/* --- 0. Faces ------------------------------------------------------------
NB, supplied by the studio. The vendor stripped the name table, so the family
is named here. It ships as a single weight, so `font-synthesis: none` keeps the
browser from faking 500 and 600 — a faux weight is exactly what the contract
forbids. Where the system needs a heavier weight it falls through to Inter.
------------------------------------------------------------------------ */
@font-face {
font-family: "NB";
/* woff2 only. The woff fallback served browsers that predate 2016; none of
them run the rest of this stylesheet, and in the single-file build the
second format was 80KB of base64 nobody ever fetched. */
src: url("../fonts/nb.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
Street Studios — design system
Calibrated against moffittmoffitt.com computed styles at 1440x900.
See bar.md for the seven mechanisms this file implements.
The rules that matter most, because they are the ones easy to drift from:
- letter-spacing is `normal` everywhere, at every size
- the ramp is 40 / 24 / 16, stepping to 22 for card titles below 1080,
plus 12 for meta. There is no 13px size: the reference sets its labels
in a weight NB does not ship, so the size alone cannot carry it
- one family. There is no serif in this system
- 50px radius belongs to badges and pills; 5px to cards and the filter chip
- hovers 0.3s, transforms 0.5s, nothing over 0.9s
========================================================================== */
/* --- 1. Tokens ----------------------------------------------------------- */
:root {
/* Palette — fully achromatic; colour lives only inside the work. The ink and
the ground are inspirux.com's near-black and near-white (#101012 /
#eeeeee), at the owner's request, in place of pure #000 / #fff; the greys
between them are re-set against the new ground (--steel clears 4.5:1 on
#eeeeee at 5.2:1). Their lime accent was tried in the footer and left out:
the only colour on the site outside the films, it read as their brand. */
--obsidian: #101012;
--graphite: #55565b;
--steel: #636366;
--ash: #cbcbce;
--fog: #dddde0;
--mist: #e6e6e8;
--bone: #eeeeee;
--warn: #b00000; /* form errors: 5.8:1 on the light ground */
/* translucent whites, for chrome that sits over footage */
--bone-60: rgba(255, 255, 255, 0.6);
--bone-70: rgba(255, 255, 255, 0.7);
--bone-80: rgba(255, 255, 255, 0.8);
--bone-35: rgba(255, 255, 255, 0.35);
/* Chrome that sits over footage never flips with the theme: film is film in
both modes, so white stays white and the frame behind it stays black. */
--on-film: #ffffff;
--film-back: #000000;
/* Type. One family carries the whole page — NB, and one weight of it. */
--sans: "NB", "Inter", "Suisse Int'l", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--fs-display: 40px; /* section headings + hero caption; 50px above 1700 */
--fs-card: 24px; /* card titles + the intro statement */
--fs-body: 16px; /* body, card descriptions, feed titles */
--fs-sub: 22px; /* project titles — the reference's subheading token */
--fs-meta: 12px; /* dates, captions */
--lh-display: 45px;
--lh-card: 28px;
--lh-body: 22.22px;
--lh-sub: 35px;
/* Rhythm — 4px base, 40px gutter as measured */
--gap: 40px;
--gap-sm: 20px;
--card-gap: 15px; /* image to caption on every card — owner set this by eye; the reference runs 50px at 1440 and 20px at 390 */
--gutter: 40px; /* measured: 40px page margin at 1440 */
--band: clamp(64px, 8vw, 120px);
--row-gap: 140px; /* vertical rhythm between project rows — the reference's own card margin-bottom at 1440 */
/* Shape — 50px for badges, 5px for cards and the filter chip */
--r-badge: 50px;
--r-card: 5px;
--hairline: 1px solid var(--fog);
/* Motion — two curves, three durations. Nothing exceeds --t-big. */
--t-fast: 0.3s;
/* Colour changes take longer than fades. Measured on the reference: seven
elements at `color 0.5s` against four at `opacity 0.3s`. A tint crossing
in 0.3s reads as a flicker; at 0.5s it reads as the element answering. */
--t-tint: 0.5s;
--t-move: 0.5s;
--t-big: 0.9s;
--e-move: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark mode. The palette is achromatic, so it inverts cleanly: the ink and the
canvas swap, and the four greys between them run the other way. Three states —
an explicit choice wins over the OS in both directions, and the un-stamped
default follows the OS. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--obsidian: #eeeeee;
--graphite: #a8a9ae;
--steel: #8a8b90;
--ash: #33343a;
--fog: #232326;
--mist: #18181b;
--bone: #101012;
--warn: #ff6b6b;
}
}
:root[data-theme="dark"] {
--obsidian: #eeeeee;
--graphite: #a8a9ae;
--steel: #8a8b90;
--ash: #33343a;
--fog: #232326;
--mist: #18181b;
--bone: #101012;
--warn: #ff6b6b; /* 6.9:1 on the dark ground; #b00 was 2.8:1 */
}
/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: clip;
}
[id] { scroll-margin-top: 96px; }
body {
margin: 0;
font-synthesis: none;
background: var(--bone);
color: var(--obsidian);
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, p, figure, blockquote, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--obsidian); color: var(--bone); }
:focus-visible { outline: 1px solid var(--obsidian); outline-offset: 3px; }
/* --- 3. Type ------------------------------------------------------------- */
/* Mechanism 1: no tracking anywhere. Mechanism 2: three sizes. */
.h-section {
font-size: var(--fs-display);
font-weight: 600;
line-height: var(--lh-display);
letter-spacing: normal;
}
/* The intro statement is the card size, not a display size. */
.statement {
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
}
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.muted { color: var(--steel); }
.meta {
font-size: var(--fs-meta);
font-weight: 400;
line-height: 16px;
letter-spacing: normal;
color: var(--steel);
}
/* Project titles: 22/600/35, measured off the reference's project page. */
.h-sub {
font-size: var(--fs-sub);
font-weight: 600;
line-height: var(--lh-sub);
letter-spacing: normal;
}
/* --- 4. Pills and badges ------------------------------------------------
Mechanism 4: 50px radius belongs to this component only.
The reference sets every pill in 13px at a hairline weight, in a 25px box.
We set ours at body size in a 32px box, because NB has one cut and a 13px
label at weight 400 is a different object. The consequence is real and
visible: our pills carry more weight against a card than the reference's do.
------------------------------------------------------------------------ */
.badge {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 16px;
border-radius: var(--r-badge);
border: 1px solid currentColor;
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1;
letter-spacing: normal;
white-space: nowrap;
transition: background var(--t-fast) ease, color var(--t-tint) ease;
}
/* filled — the primary action, and the intro links */
.badge--solid {
background: var(--obsidian);
border-color: var(--obsidian);
color: var(--bone);
}
.badge--solid:hover { background: var(--graphite); border-color: var(--graphite); }
/* outline on light ground */
.badge--line { border-color: var(--ash); color: var(--obsidian); }
.badge--line:hover { border-color: var(--obsidian); }
/* Over imagery. The reference keeps these black, which works because its stills
are mid-tone; against real footage that runs dark the text disappears. A fixed
translucent white plate keeps the reference's black label legible on anything,
and does not flip with the theme because photography does not either. */
.badge--over {
/* A label sitting on artwork, not a control: it runs smaller than the pills
that are there to be pressed. The reference's own category badge is 13px on
a 25px box; this is 12px on 24px, the same proportion on our scale.
Outlined, not plated — the reference draws this pill as a stroke on the
photograph. */
height: 24px;
padding: 0 12px;
font-size: var(--fs-meta);
line-height: 16px;
background: transparent;
border-color: var(--bone-60);
color: var(--on-film);
transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}
/* The label steps aside while the card is hovered and returns when the pointer
leaves, as the reference's does: it fades and lifts 4px over 0.3s. The image
itself does not fade — only the pill. */
.card:hover .badge--over { opacity: 0; transform: translateY(-4px); }
/* toggled filter option */
.badge[aria-pressed="true"] {
background: var(--obsidian);
border-color: var(--obsidian);
color: var(--bone);
}
/* The filter control is a 5px chip on mist — deliberately not a pill. */
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: var(--r-card);
background: var(--mist);
font-size: var(--fs-meta);
line-height: 16px;
letter-spacing: normal;
color: var(--obsidian);
transition: background var(--t-fast) ease;
}
.chip:hover { background: var(--fog); }
.chip svg { transition: transform var(--t-move) var(--e-move); }
.chip[aria-expanded="true"] svg { transform: rotate(45deg); }
.icon-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--ash);
display: grid;
place-items: center;
transition: background var(--t-fast) ease, border-color var(--t-tint) ease, color var(--t-tint) ease;
}
.icon-btn:hover { background: var(--obsidian); border-color: var(--obsidian); color: var(--bone); }
/* Text link with a wiping underline — 0.3s, per mechanism 5. */
.ulink {
position: relative;
display: inline-block;
font-size: var(--fs-body);
line-height: var(--lh-body); /* never inherit leading from a .meta parent */
letter-spacing: normal;
padding-bottom: 1px;
justify-self: start;
}
.ulink::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(1);
transform-origin: right;
transition: transform var(--t-fast) ease;
}
.ulink:hover::after { animation: wipe var(--t-move) var(--e-move); }
@keyframes wipe {
0% { transform: scaleX(1); transform-origin: right; }
45% { transform: scaleX(0); transform-origin: right; }
55% { transform: scaleX(0); transform-origin: left; }
100% { transform: scaleX(1); transform-origin: left; }
}
/* --- 5. Layout ----------------------------------------------------------- */
.shell { padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
/* Section heading flush left, control on the right of the same row. */
.sec-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-sm);
margin-bottom: var(--gap);
}
/* 12-column grid, as the reference uses. */
.grid12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: var(--gap-sm);
}
.col-6 { grid-column: span 6; }
.start-7 { grid-column: 7 / span 6; }
.row-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--gap-sm);
}
/* Facts in the intro's right half, so the column is composed rather than void. */
.intro-stats { grid-column: 9 / span 4; align-self: start; }
/* Number and label read as one pair: the rule carries the column width,
the content stays left so the two never detach across the measure. The
rule above the first pair is left out, at the owner's request. */
.stat-line {
display: flex;
align-items: baseline;
gap: 16px;
padding-block: 14px;
border-top: var(--hairline);
}
.stat-line:first-child { padding-top: 0; border-top: 0; } /* registers with the paragraph's first baseline */
.stat-line b {
min-width: 72px;
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
font-variant-numeric: tabular-nums;
}
.stat-line span {
font-size: var(--fs-meta);
line-height: 16px;
color: var(--steel);
}
/* --- 6. Media placeholders ----------------------------------------------
Stand-ins for film stills. Swap the .media block for .
------------------------------------------------------------------------ */
.media {
position: relative;
overflow: hidden;
background: var(--mist);
border-radius: var(--r-card);
isolation: isolate;
}
.media::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(112% 84% at var(--fx, 30%) var(--fy, 20%), rgba(255,255,255,.30), transparent 46%),
radial-gradient(135% 105% at 50% 48%, transparent 42%, rgba(0,0,0,.26) 100%),
linear-gradient(var(--fa, 145deg), var(--t1, #d6d7d9) 0%, var(--t2, #b9babd) 46%, var(--t3, #8e9095) 100%);
}
.media::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .78;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.media--3x2 { aspect-ratio: 3 / 2; } /* 653x440 on the reference */
.media--6x7 { aspect-ratio: 6 / 7; } /* 330x385 feed card on the reference */
.media--16x10 { aspect-ratio: 16 / 10; } /* 1360x850 project image */
.media--5x3 { aspect-ratio: 5 / 3; } /* 893x536 service image */ /* 330x385 feed card on the reference */
.media--4x5 { aspect-ratio: 4 / 5; }
.media--flush { border-radius: 0; }
.t-1 { --t1:#e4e5e6; --t2:#c2c3c6; --t3:#96979b; --fa:155deg; --fx:22%; --fy:16%; }
.t-2 { --t1:#cfd0d2; --t2:#a4a5a9; --t3:#6d6f74; --fa:120deg; --fx:70%; --fy:24%; }
.t-3 { --t1:#dedfe0; --t2:#b0b1b4; --t3:#7c7e83; --fa:200deg; --fx:40%; --fy:70%; }
.t-4 { --t1:#c4c5c8; --t2:#8f9095; --t3:#54565b; --fa:165deg; --fx:60%; --fy:12%; }
.t-5 { --t1:#eaeaeb; --t2:#cbccce; --t3:#9fa0a4; --fa:135deg; --fx:18%; --fy:60%; }
.t-6 { --t1:#b8b9bc; --t2:#87888d; --t3:#3f4145; --fa:190deg; --fx:75%; --fy:70%; }
.t-7 { --t1:#d2d3d5; --t2:#9c9da1; --t3:#616368; --fa:110deg; --fx:35%; --fy:35%; }
.t-8 { --t1:#e0e1e2; --t2:#bcbdc0; --t3:#8a8c90; --fa:175deg; --fx:80%; --fy:40%; }
.t-9 { --t1:#c9cacd; --t2:#95969b; --t3:#5b5d62; --fa:145deg; --fx:50%; --fy:80%; }
.t-h1 { --t1:#8a8c90; --t2:#5c5e63; --t3:#2b2d31; --fa:160deg; --fx:28%; --fy:14%; }
.t-h2 { --t1:#9c9ea2; --t2:#68696e; --t3:#333539; --fa:125deg; --fx:66%; --fy:22%; }
.t-h3 { --t1:#7e8085; --t2:#525459; --t3:#232528; --fa:195deg; --fx:44%; --fy:66%; }
.t-h4 { --t1:#93959a; --t2:#616368; --t3:#2f3134; --fa:140deg; --fx:74%; --fy:38%; }
.t-h5 { --t1:#86888d; --t2:#57595e; --t3:#26282b; --fa:170deg; --fx:20%; --fy:56%; }
/* --- 7. Masthead --------------------------------------------------------- */
.masthead {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px var(--gutter);
color: var(--on-film);
transition: color var(--t-tint) ease,
transform var(--t-move) var(--e-move),
background var(--t-fast) ease,
backdrop-filter var(--t-fast) ease;
}
/* Past the hero the bar stops sitting on a picture and starts sitting on the
page, where white type on a light ground would vanish. It takes the ink
colour and a blurred, translucent ground so the content reads through it
without the bar becoming a solid slab. */
.masthead.is-past {
/* the plain value first, for anything without color-mix */
background: rgba(12, 12, 13, .72);
background: color-mix(in srgb, var(--bone) 72%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
}
/* The `body:not(.is-locked)` is not decoration. Without it this selector is
three classes deep and beats the two-class rule further down that clears the
plate while the drawer is open, so the bar kept a white band across the top
of the drawer — in light mode only, because the dark plate above is one class
shallower and loses to it cleanly. Guard the condition here rather than
escalating specificity there. */
:root[data-theme="light"] body:not(.is-locked) .masthead.is-past { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] body:not(.is-locked) .masthead.is-past { background: color-mix(in srgb, var(--bone) 72%, transparent); }
.masthead.is-tucked { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
/* Sliding furniture is the first thing to go, but the bar must not simply
vanish and reappear — it stays put instead. */
.masthead { transition: color var(--t-tint) ease; }
.masthead.is-tucked { transform: none; }
}
/* set once the hero has scrolled past, so the wordmark stays legible on white */
.masthead.is-dark { color: var(--obsidian); }
/* Wordmark, not a monogram — an unfamiliar studio has to name itself. */
/* centred by the box, not by line-height, so leading stays on the body token */
.mark {
display: inline-flex;
align-items: center;
height: 38px;
/* Back on the scale at the card size: 20% up from 20px lands exactly on
--fs-card, so the wordmark no longer needs an exception of its own. */
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
transition: opacity var(--t-fast) ease;
}
.mark:hover { opacity: .7; }
/* The logo, drawn from the brand file's outlines. currentColor keeps it the
masthead's ink: white on the dark theme, dark on the light one. */
.mark-logo { display: block; height: 24px; width: auto; }
/* Measured off the reference: a 37x30 box holding two bars, not three — each
the full 37px wide and 3px thick, set 9px apart (bar tops at 9px and 21px). */
.burger { position: relative; width: 37px; height: 30px; }
.burger span {
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: currentColor;
/* the reference's own morph: 0.6s on an ease-out cubic */
transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
background-color var(--t-tint) ease;
}
.burger span:nth-child(1) { transform: translateY(9px); }
.burger span:nth-child(2) { transform: translateY(21px); }
/* Open: both bars travel to the same line and cross, exactly as the reference
does it — translateY(15px) with a ∓45° rotation. One control, two states,
rather than a burger and a separate X. */
body.is-locked .burger span:nth-child(1) { transform: translateY(15px) rotate(-45deg); }
body.is-locked .burger span:nth-child(2) { transform: translateY(15px) rotate(45deg); }
/* over the drawer's ground, which inverts with the theme */
body.is-locked .burger span { background: var(--bone); }
/* The drawer has its own close control, so the masthead tools simply step out
of the way rather than morphing into a second one. */
/* The burger stays put and becomes the cross; only the theme toggle steps aside,
since it has nothing to say while the drawer is open. */
body.is-locked .theme-toggle {
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) ease;
}
/* The wordmark stays visible over the open drawer, as the reference's logo does.
That needs the header above the drawer, so it gives up pointer events while
locked — otherwise it swallows clicks meant for the drawer's close control. */
body.is-locked .masthead {
z-index: 70;
pointer-events: none;
}
body.is-locked .mark,
body.is-locked .burger { pointer-events: auto; }
/* The drawer inverts the page: --obsidian ground, --bone type. The wordmark
and the close control sit over it but take their colour from the masthead,
so on the dark site they stayed white and vanished into a light drawer.
While it is open they belong to the drawer, not to the page behind it. */
body.is-locked .mark,
body.is-locked .burger { color: var(--bone); }
/* While the drawer is open the bar has nothing to sit on: the drawer is its
own ground, and the blurred plate from `is-past` painted a dark band across
the top of it. Clear the ground and the tuck — the bar belongs to the drawer
until it closes. */
body.is-locked .masthead {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: none;
}
/* --- 8. Menu -------------------------------------------------------------
A drawer, not a full-screen overlay: 50vw pinned to the right edge, sliding
in on the --t-big token. Measured off the reference at 1440 — panel 720px
wide at x=720, black ground, items 40/600 at 40px leading.
------------------------------------------------------------------------ */
.menu {
position: fixed;
inset: 0 0 0 auto;
/* above the masthead (60), not below it: the close control sits at the
burger's coordinates, which are inside the masthead's band, and a header
painting over the drawer swallows every click on the X. */
z-index: 65;
width: 50vw;
/* Items start at 34px, as the reference's do. The close control does not sit
in the flow above them — it overlays at the burger's exact coordinates, so
the X reads as the burger toggling rather than as a second control. */
/* --gutter, not --gap: the drawer's items should stand on the same left
edge as the page's content behind it. On desktop the two are both 40px
and nothing moves; on a phone the gutter is 24 and the items were sitting
16px further in than everything else on the site. */
padding: 34px var(--gutter) var(--gutter);
background: var(--obsidian);
color: var(--bone);
display: grid;
grid-template-rows: 1fr auto;
transform: translateX(100%);
transition: transform var(--t-big) var(--e-move);
}
.menu.is-open { transform: none; }
.menu-list { align-self: start; }
/* The reference runs its drawer items at 40/600 on a 50px pitch. NB has no bold
cut, so 600 renders at 400 and 40px reads noticeably lighter than the
reference does; the items take 48px here to carry the same weight on the page,
on the reference's 1.25 pitch ratio. Restore 40px once the Bold cut lands. */
.menu-list li { padding-bottom: 12px; }
.menu-list a {
display: block;
width: max-content;
/* 48/48, not the reference's 40/40. NB ships one cut at 400, and 40px at
book weight reads too light to hold the panel — the size is carrying what
a heavier cut would. It drops to 40 the day a Medium or Bold exists. */
font-size: 48px;
font-weight: 600;
line-height: 48px;
letter-spacing: normal;
color: var(--bone);
transition: transform var(--t-fast) ease, color var(--t-tint) ease;
}
/* Measured off the reference's own recording: hovering a row slides it 16px
right over 0.3s while every other row drops to grey — rgb(128,128,128) in
the capture, which is --steel. A dim, not a fade: opacity would land near
#d9d9d9 on this ground and read far too bright. */
.menu-list:hover a { color: var(--steel); }
.menu-list a:hover { color: var(--bone); transform: translateX(16px); }
/* the reference closes the drawer with two labelled contact columns */
.menu-foot {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-sm);
/* start, not end: the two blocks hold different numbers of lines, so
aligning their bottoms left the labels on visibly different baselines. */
align-items: start;
}
.menu-foot .menu-label {
font-size: var(--fs-meta);
font-weight: 400;
line-height: 16px;
letter-spacing: normal;
color: var(--bone);
margin-bottom: 8px;
}
.menu-foot p, .menu-foot a {
font-size: var(--fs-meta);
line-height: 16px;
color: var(--bone);
}
.menu-foot a:hover { opacity: .6; }
@media (max-width: 860px) {
/* full width, so the rows start below the masthead instead of colliding with
the wordmark, and the close control follows the narrow gutter to stay on
top of the burger */
.menu { width: 100vw; padding-top: 88px; }
}
/* --- 9. Hero ------------------------------------------------------------- */
.hero {
position: relative;
height: 100svh;
min-height: 560px;
overflow: hidden;
background: var(--film-back);
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--t-big) var(--e-move);
}
.slide.is-active { opacity: 1; }
.slide > .media { position: absolute; inset: 0; border-radius: 0; }
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.16) 100%);
}
/* The claim runs the full width on its own row, so it is never squeezed by
the controls; below it, the count left and the arrow right. (An earlier
flex version and a grid version both lived here, the second silently
replacing the first.) */
.hero-bar {
position: absolute;
z-index: 2;
left: var(--gutter);
right: var(--gutter);
bottom: clamp(28px, 4vw, 44px);
display: grid;
grid-template-areas:
"caption caption"
"count next";
grid-template-columns: 1fr auto;
align-items: end;
row-gap: var(--gap);
column-gap: var(--gap);
color: var(--on-film);
}
/* The studio's own claim, at section-heading size — mechanism 2.
It is constant; only the credit beneath it changes with the slide. */
.hero-title {
display: block;
font-size: var(--fs-display);
font-weight: 600;
line-height: var(--lh-display);
letter-spacing: normal;
}
/* a bare arrow, not a bordered circle; it steps right on hover as theirs does */
.hero-next {
justify-self: end;
align-self: end;
display: block;
width: 48px;
height: 40px;
color: var(--on-film);
transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.hero-next svg { display: block; width: 100%; height: 100%; }
.hero-next:hover { transform: translateX(6px); }
/* --- 10. Feed ------------------------------------------------------------ */
.feed-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--band) var(--gap);
}
.feed-card { display: block; position: relative; }
.feed-card .frame { position: relative; overflow: hidden; border-radius: var(--r-card); }
.feed-card .media { transition: transform var(--t-move) var(--e-move); }
.feed-card:hover .media { transform: scale(1.03); }
/* hairline centred in the 40px gutter, running the full height of the card */
.feed-card::before {
content: "";
position: absolute;
left: calc(var(--gap) / -2);
top: 0; bottom: 0;
width: 1px;
background: var(--fog);
}
.feed-grid > .feed-card:nth-child(4n + 1)::before { display: none; }
.frame .badge {
position: absolute;
top: 18px; left: 18px;
z-index: 1;
}
.feed-card time { display: block; margin-top: 18px; }
.feed-card h3 {
margin-top: 2px;
font-size: var(--fs-body);
font-weight: 600;
line-height: var(--lh-body);
letter-spacing: normal;
}
.feed-card p {
margin-top: 20px;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--steel);
}
.feed-card .ulink { margin-top: 20px; }
/* Mechanism 6: sibling dim is subtle. */
.dimmable:hover > * { opacity: .85; transition: opacity var(--t-fast) ease; }
.dimmable:hover > *:hover { opacity: 1; }
/* --- 11. Services -------------------------------------------------------- */
/* padded, not leaded, so the counter aligns to the service name
without borrowing the card token's line-height */
/* --- 12. Projects -------------------------------------------------------- */
/* Mechanism 7: two columns, 40px gutter. */
.grid-work {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--row-gap) var(--gap);
}
.card { display: block; }
.card .frame { position: relative; overflow: hidden; border-radius: var(--r-card); }
.card .media { transition: transform var(--t-move) var(--e-move); }
.card:hover .media { transform: scale(1.03); }
.card-title {
margin-top: var(--card-gap);
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
}
.card-desc {
margin-top: 2px;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--steel);
}
.card.is-hidden,
.vent-card.is-hidden { display: none; }
/* Full-width feature card. The reference breaks its two-column rhythm with a
1360x880 (17:11) card spanning both columns, then returns to pairs. */
.card--wide { grid-column: 1 / -1; }
.media--wide { aspect-ratio: 17 / 11; }
/* The reference caps image height rather than letting the ratio run on:
max-height 600px on a standard card, 880px on the feature. A ratio alone
keeps growing with the viewport — the feature reaches 1190px at 1920 wide and
swallows the screen. The 80vh term is ours: 880px is still the whole of a
900px-tall laptop screen, so the cap also leaves air on short viewports.
The image is absolutely positioned and object-fit: cover, so capping the box
crops it centrally instead of squashing it. The explicit width matters: with
aspect-ratio alone the cap shrinks the element's WIDTH to preserve the ratio,
so the feature card stops spanning the grid. */
.card .media { width: 100%; max-height: 600px; }
.card--wide .media { width: 100%; max-height: min(880px, 80vh); }
/* The project page's stills take the same caps, so a gallery image is never
taller than the card that led the reader to it: the paired 4:5 stills match a
standard card, the full-measure and bleed figures match the feature. */
/* Every paired still takes the standard card's cap, wherever it appears — the
project galleries, the profile page, the contact portraits — so an image is
never taller than the card that led the reader to it. */
.duo .media { width: 100%; max-height: 600px; }
.proj-figs > figure .media { width: 100%; max-height: min(880px, 80vh); }
/* Filter drawer behind the chip */
.filter-drawer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--t-move) var(--e-move);
}
.filter-drawer.is-open { grid-template-rows: 1fr; }
.filter-drawer > div { overflow: hidden; }
.filter-inner { padding-block: var(--gap-sm) var(--gap); }
.filter-group { padding-block: 14px; border-top: var(--hairline); }
.filter-group h3 {
margin: 0 0 12px;
font-size: var(--fs-meta);
font-weight: 400;
line-height: 16px;
letter-spacing: normal;
color: var(--steel);
}
.filter-set { display: flex; flex-wrap: wrap; gap: 6px; }
.result-note { margin-bottom: var(--gap); }
/* --- 13. Marquee --------------------------------------------------------- */
.marquee {
overflow: hidden;
border-block: var(--hairline);
padding-block: 22px;
position: relative;
}
.marquee::before,
.marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 8%;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bone), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bone), transparent); }
.marquee-track {
display: flex;
gap: var(--gap);
width: max-content;
animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* --- 14. Quotes ---------------------------------------------------------- */
.quote-card { border-top: var(--hairline); padding-top: 20px; }
.quote-card p {
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
}
.quote-card footer { margin-top: 16px; }
/* --- 15. FAQ ------------------------------------------------------------- */
.faq-item { border-bottom: var(--hairline); }
.faq-item:first-child { border-top: var(--hairline); }
.faq-q {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
gap: var(--gap-sm);
align-items: center;
text-align: left;
padding-block: 24px;
}
.faq-q h3 {
font-size: var(--fs-card);
font-weight: 600;
line-height: var(--lh-card);
letter-spacing: normal;
transition: color var(--t-tint) ease;
}
.faq-q:hover h3 { color: var(--steel); }
.faq-sign { position: relative; justify-self: end; }
.faq-sign::before, .faq-sign::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: currentColor;
transition: transform var(--t-move) var(--e-move), opacity var(--t-fast) ease;
}
.faq-sign::before { width: 12px; height: 1px; }
.faq-sign::after { width: 1px; height: 12px; }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--t-move) var(--e-move);
}
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a .inner {
max-width: 62ch;
padding-bottom: 28px;
color: var(--steel);
}
.faq-a .inner > * + * { margin-top: 12px; }
.faq-a strong { color: var(--obsidian); font-weight: 600; }
/* --- 16. Forms / definition lists ---------------------------------------- */
.dl-row {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: var(--gap-sm);
padding-block: 14px;
border-top: var(--hairline);
}
.dl-row dt { color: var(--steel); }
/* --- 17. Footer ---------------------------------------------------------- */
/* No rule along the top edge: the foot runs in the opposite mode to the page
(section 26), and the inverted ground is the separation. */
.footer { padding: var(--band) var(--gutter) 24px; }
/* Four equal columns: contact, visit, and two of navigation — Sidor and
Tjänster, restored so every page carries internal links for crawlers. Below
1080 they fold to two. */
/* The logo heads the footer. It takes the footer's ink: black on the white
footer of the default theme, light on the dark footer of the light one. */
.footer-logo { display: inline-block; margin-bottom: var(--gap); color: inherit; }
.footer-logo svg { display: block; height: 40px; width: auto; }
.footer-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap) var(--gap);
}
/* The supplied logo file is the word set in Brockmann Bold — a face this site
no longer uses, and could not render at Bold even if it did. It is live text in
the SVG, not outlines, so the file itself cannot be used as an image — an
with custom controls, so it
works the moment a file is dropped into cases.json; until then it shows the
poster and says the clip is not attached rather than failing silently.
------------------------------------------------------------------------ */
.player {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--r-card);
background: var(--film-back);
isolation: isolate;
}
.player video,
.player .media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/* scrim so white controls hold over any footage */
.player::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 40%;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
opacity: 0;
transition: opacity var(--t-fast) ease;
}
.player:hover::after,
.player.is-playing::after { opacity: 1; }
/* Back by request. No ring — the glyph alone, so nothing is left hanging over
the first second of the film when it fades out on play. The drop shadow is
what keeps a white triangle legible over a bright frame. Clicking the picture
still works; this is the affordance that says so. */
.player-play {
position: absolute;
inset: 0;
margin: auto;
z-index: 3;
width: 72px;
height: 72px;
display: grid;
place-items: center;
color: var(--on-film);
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.player-play:hover { transform: scale(1.08); }
.player.is-playing .player-play { opacity: 0; pointer-events: none; }
.player-bar {
position: absolute;
inset: auto 0 0 0;
z-index: 4;
display: flex;
align-items: center;
gap: var(--gap-sm);
padding: 18px 20px;
color: var(--on-film);
opacity: 0;
transition: opacity var(--t-fast) ease;
}
.player:hover .player-bar,
.player.is-playing .player-bar,
.player:focus-within .player-bar { opacity: 1; }
.player-bar button {
display: grid;
place-items: center;
width: 20px;
height: 20px;
color: var(--on-film);
transition: opacity var(--t-fast) ease;
}
.player-bar button:hover { opacity: .7; }
/* One button, two glyphs — the sound control had a single icon, so pressing it
muted the film with nothing on screen changing and read as a dead button. */
[data-mute] .snd-off { display: none; }
[data-mute][aria-pressed="true"] .snd-on { display: none; }
[data-mute][aria-pressed="true"] .snd-off { display: block; }
/* Same idea on the transport: the glyph has to say what the film is doing, not
what the button is called. */
[data-toggle] .pse { display: none; }
.player.is-playing [data-toggle] .ply { display: none; }
.player.is-playing [data-toggle] .pse { display: block; }
/* With no button in the middle, the picture itself is the control. */
.player video { cursor: pointer; }
.player-time {
font-size: var(--fs-meta);
line-height: 16px;
letter-spacing: normal;
color: var(--on-film);
font-variant-numeric: tabular-nums;
}
/* The track reads as a hairline but is not one to the pointer. At 1px it was
a 1px target, which is unhittable in practice; the box is 16px and the line
is drawn inside it, so the look is unchanged and the aim is forgiving. */
.player-scrub {
flex: 1;
height: 16px;
position: relative;
cursor: pointer;
/* the rail owns the drag: without this a scrub on a phone scrolls the page */
touch-action: none;
}
.player-scrub:focus-visible {
outline: 2px solid var(--on-film);
outline-offset: 4px;
}
.player-scrub::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--bone-35);
transition: height var(--t-fast) ease, margin-top var(--t-fast) ease;
}
.player-bar:hover .player-scrub::before { height: 4px; margin-top: -2px; }
.player-scrub span {
position: absolute;
left: 0;
top: 50%;
height: 2px;
margin-top: -1px;
width: 0;
background: var(--on-film);
transition: height var(--t-fast) ease, margin-top var(--t-fast) ease;
}
.player-bar:hover .player-scrub span { height: 4px; margin-top: -2px; }
/* shown when no file is attached yet */
.player-note {
position: absolute;
inset: auto 20px 64px 20px;
z-index: 4;
color: var(--on-film);
font-size: var(--fs-meta);
line-height: 16px;
letter-spacing: normal;
}
.player-note a { text-decoration: underline; }
/* prev / next project */
.proj-nav {
display: flex;
justify-content: space-between;
gap: var(--gap-sm);
padding-top: var(--gap-sm);
border-top: var(--hairline);
}
/* "Vad vi gjorde" reuses the definition row, with no term column */
/* The work list is one value per row, so it is a list, not a description
grid — it only ever needed the rule and the rhythm. */
.proj-work li { padding-block: 14px; border-top: var(--hairline); }
/* --- 24. Theme toggle ----------------------------------------------------
Inherits the masthead's colour, so it is white over the hero and ink once
the page is on canvas. Two glyphs, one shown per state.
------------------------------------------------------------------------ */
.theme-toggle {
width: 38px;
height: 38px;
display: grid;
place-items: center;
color: inherit;
transition: opacity var(--t-fast) ease;
}
.theme-toggle:hover { opacity: .7; }
.theme-toggle svg { display: block; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
:root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
}
.masthead-tools { display: flex; align-items: center; gap: 8px; }
/* the placeholder stills are stand-ins for photography, which does not invert;
in dark mode they simply sit a little lower so they do not glare */
:root[data-theme="dark"] .media { filter: brightness(.82); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .media { filter: brightness(.82); }
}
/* full-bleed still: breaks the gutter, as the reference does on project pages */
.bleed {
margin-inline: calc(var(--gutter) * -1);
border-radius: 0;
}
.bleed .media { border-radius: 0; }
/* --- 25. Real imagery ----------------------------------------------------
The gradient placeholder stays behind as the loading state; a real photo
covers it. Swapping one in means adding an , so Escape, focus trapping and focus return are the
browser's job rather than ours. It sits on film black in both themes: a
picture being looked at full size wants the room dark, not the page's
canvas following the theme.
-------------------------------------------------------------------------- */
[data-zoom] { cursor: zoom-in; }
.lightbox {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
padding: var(--gap);
border: 0;
background: var(--film-back);
color: var(--on-film);
display: grid;
place-items: center;
overscroll-behavior: contain;
}
/* `display: grid` above outranks the browser's own `dialog:not([open])
{ display: none }`, so a closed lightbox stayed on screen — out of the top
layer, at the end of , a black block under the footer that the close
button could no longer shut because the dialog already was. */
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.lightbox-fig {
margin: 0;
display: grid;
gap: var(--gap-sm);
justify-items: center;
/* The picture is the point: it may use the whole frame minus the gutter, and
the caption sits under it rather than over it. */
max-height: 100%;
}
.lightbox-fig img {
display: block;
max-width: 100%;
max-height: calc(100dvh - var(--gap) * 2 - 40px);
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r-card);
}
.lightbox-fig figcaption {
color: var(--bone-70);
font-variant-numeric: tabular-nums;
}
.lightbox-close {
position: absolute;
top: var(--gap);
right: var(--gap);
z-index: 2;
width: 37px;
height: 30px;
display: grid;
place-items: center;
color: var(--on-film);
transition: opacity var(--t-fast) ease;
}
.lightbox-close:hover { opacity: .7; }
/* Every press lands on the button, never on the glyph inside it. */
.lightbox-close svg { pointer-events: none; }
@media (max-width: 860px) {
.lightbox { padding: var(--gap-sm); }
.lightbox-close { top: var(--gap-sm); right: var(--gap-sm); }
}
/* --- Hero: the mobile slide ------------------------------------------------
Below the split's threshold the hero used to cross-fade, which the reference
never does at any width. It now slides sideways: the outgoing frame leaves
left while the next arrives from the right, both moving together.
-------------------------------------------------------------------------- */
.hero.is-sliding .slide { transition: none; }
.hero.is-sliding .slide.is-active { opacity: 1; }
/* --- Work slider ----------------------------------------------------------
The reference's Ventures pattern. A text panel holds the heading, the lead
and the controls; the card track starts beside it and runs off the right
edge of the page. The row deliberately never ends flush with the margin —
the cut card is what says there is more to the right.
-------------------------------------------------------------------------- */
.vent {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
/* stretch, not start: the panel is short and the cards are tall, so aligning
to the top left 250px of dead space beside them. The reference's panel is
a block the full height of the card row with its controls at the foot. */
align-items: stretch;
}
.vent-panel {
grid-column: 1 / span 4;
display: flex;
flex-direction: column;
}
.vent-sub { font-size: var(--fs-body); font-weight: 600; margin-top: 8px; }
.vent-body { color: var(--steel); margin-top: var(--gap-sm); max-width: 34ch; }
.vent-nav {
display: flex;
gap: 12px;
/* pushed to the foot of the panel, which is what closes the gap */
margin-top: auto;
padding-top: var(--gap);
}
.vent-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
/* Ink discs, like the pills above them. The grey disc they replaced was
1.2:1 against the page and read as disabled even when it wasn't; the
end of the rail is now the only state that looks empty. */
background: var(--obsidian);
color: var(--bone);
transition: background var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.vent-arrow:hover { background: var(--graphite); }
.vent-arrow[disabled] {
background: transparent;
color: var(--steel);
box-shadow: inset 0 0 0 1px var(--ash);
pointer-events: none;
}
/* Bleeds one gutter past the shell, so the track reaches the viewport edge. */
.vent-track {
grid-column: 5 / -1;
margin-right: calc(var(--gutter) * -1);
display: flex;
gap: var(--gap);
overflow-x: auto;
/* overflow-y must be said out loud. Setting overflow-x alone makes overflow-y
compute to `auto` rather than stay `visible`, which quietly turned this
into a vertical scroll container with 20px of slack — so a scroll gesture
started over a card was swallowed by the rail and the page stayed put.
touch-action does the same job for a finger: pan-x keeps the horizontal
swipe here and hands every vertical one to the page. */
overflow-y: hidden;
/* pan-x AND pan-y. pan-x alone does not "hand vertical to the page" — it
forbids vertical panning outright for any touch that starts here, which
is the trap it was meant to fix. Naming both allows each axis, and since
the rail has no vertical overflow the vertical one falls through to the
page, which is the behaviour we want. */
touch-action: pan-x pan-y;
/* Nothing inside a horizontal rail may be translated downward. The cards
carried .reveal, which holds them 20px low until they animate in, and a
downward translate inside an overflow box IS scrollable overflow — the
rail became vertically scrollable by exactly the reveal's travel, and ate
the gesture. The panel beside the track still reveals; the cards do not. */
/* proximity, not mandatory: mandatory snapping refuses a programmatic
scroll outright — measured, the arrows moved the track by 0px — and it
forces a jump on every small drag. Proximity snaps when the reader lands
near a card and otherwise leaves them alone. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
/* -webkit-overflow-scrolling: touch is deliberately absent. It is obsolete —
iOS has had momentum scrolling natively since 13 — and it creates a
separate momentum layer that can keep hold of a gesture even when
overflow-y is hidden. That is the same bug in a second place. */
}
.vent-track::-webkit-scrollbar { display: none; }
.vent-card {
/* 426px is the reference's card, and it stays the ceiling. But at 1440 two of
them fit the track exactly, so the row ended 41px short of the edge with
nothing cut — and the cut card is the whole mechanism. Sizing to 2.4 cards
guarantees the next one is sliced by the viewport at every width, which
matters more than the last few pixels of width. */
flex: 0 0 clamp(260px, calc((100% - var(--gap) * 2) / 2.4), 426px);
scroll-snap-align: start;
position: relative;
display: block;
}
.vent-card .frame { position: relative; overflow: hidden; border-radius: var(--r-card); }
.vent-card .media { aspect-ratio: 3 / 4; }
.vent-card .media img {
transition: transform var(--t-move) var(--e-move);
/* A picture is draggable by default; on a rail that turns a scroll attempt
into a drag of the image itself. */
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
.vent-card:hover .media img { transform: scale(1.03); }
/* A scrim under the label. The reference's own venture cards are dark images,
so white type sits on them safely; ours are whatever the project happens to
be, and "SKF" was disappearing into a bright head of hair. The gradient is
confined to the top third and fades to nothing, so it reads as light falling
off rather than as a panel laid over the photograph. */
.vent-card .media::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 38%;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
/* The name sits under the picture, as it does on the grid cards, because the
pill now occupies the top-left of the image — both absolutely positioned
there put one word on top of the other. */
.vent-label {
display: block;
margin-top: var(--card-gap);
color: var(--obsidian);
font-size: var(--fs-card);
line-height: var(--lh-card);
font-weight: 500;
}
@media (max-width: 1080px) {
.vent { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
.vent-panel, .vent-track { grid-column: 1 / -1; }
.vent-body { max-width: none; }
/* stacked, the panel sits above the rail and has no height to fill */
.vent-nav { margin-top: 0; }
}
@media (max-width: 860px) {
.vent-card { flex-basis: 80%; }
}
/* Om oss: two customer films. Same rail as Fler projekt, but two portrait cards
both fit the track, which leaves nothing to click between. Wide 16:9 cards,
most of the track each, so the second is always cut and the arrows work. */
.vent--film .vent-card { flex: 0 0 85%; }
.vent--film .vent-card .media { aspect-ratio: 16 / 9; }
.vent--film .vent-card .media::after { content: none; }
/* The heading sits above the films at every width, not in a panel beside
them (the owner's call): the stacked layout Fler projekt uses below 1080px. */
.vent--film { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
.vent--film .vent-panel,
.vent--film .vent-track { grid-column: 1 / -1; }
.vent--film .vent-nav { margin-top: 0; }
/* Full width, 85% would make each film ~1150px at 1440; cap it so the next
card still shows at the edge without the first one filling the screen. */
.vent--film .vent-card { flex-basis: min(85%, 960px); }
/* --- Menu on a phone ------------------------------------------------------
The reference sets its items about a quarter of the way down rather than
under the masthead, and stacks the contact blocks instead of columning them
into 165px. Measured at 390x844: its first item sits at y=200.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
/* The items stay high, under the masthead. The reference sets its own about a
quarter of the way down and I moved ours to match; the owner prefers them
where they were, and it is their site. The stacked footer below stays. */
.menu-foot { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
}
/* --- Let's work together --------------------------------------------------
The reference's closing call: the heading holds the left of the measure and
the lead sits in the right half with the controls beneath it, not alongside
the heading. Measured at 1440 — heading 40/45 at the gutter, right column
beginning at x=740, lead at 24px.
-------------------------------------------------------------------------- */
/* Stacked at every width: the owners want the lead under the heading, not
beside it, so the narrow-screen layout is now the only one. */
.cta {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--gap-sm);
align-items: start;
}
.cta > .h-section, .cta-side { grid-column: 1 / -1; }
/* The lead is a step above body. It is the last thing read before the footer,
and at 16px it read as small print rather than as an invitation. */
.cta-lead {
font-size: var(--fs-card);
line-height: var(--lh-card);
max-width: 34ch;
}
.cta-side .row-links { margin-top: var(--gap); }
@media (max-width: 1080px) {
.cta-lead { max-width: none; }
}
/* --- Hero bar, on the reference's arrangement ------------------------------
Bottom-left: a category pill, then the project on two lines — its name, then
its tagline. Bottom line: the counter on the left, the arrow on the right.
No ring; the reference does not carry one.
-------------------------------------------------------------------------- */
/* The pill sits on film, so it cannot use --ash: that is the border for pills
on the page ground and it disappears over footage. White stroke, white text,
no fill — the reference's own. */
.hero-pill {
/* The reference's own pill, measured off it: 13px type on a 25px box with
11px of side padding, a 1px stroke and a 50px radius. Ours ran 12 on 24
with 12px padding, which is the card's badge rather than the hero's.
The one thing that cannot be matched is the weight. The reference sets
every pill at 100; NB ships a single cut at 400 and font-synthesis is off,
so asking for 100 would render at 400 and only mislead. */
height: 25px;
padding: 0 11px;
font-size: 13px;
line-height: 13px;
margin-bottom: var(--gap-sm);
border-color: var(--on-film);
color: var(--on-film);
background: transparent;
}
.hero-link { display: block; }
.hero-title {
font-size: var(--fs-display);
line-height: var(--lh-display);
font-weight: 600;
letter-spacing: normal;
margin: 0;
}
/* The counter sits on the baseline row with the arrow, not floating centre.
The reference sets its count at the display size, 40/40. Ours sat at body
size, which read as a caption, and 40 read as too loud over our own hero —
the owner's call, and the reference's hero is a different composition. It
takes --fs-sub instead: 22px, a size the scale already owns, so the count
is neither a caption nor a headline and no new size enters the system.
The line box stays exactly one digit tall. That is what the roll relies on:
the outgoing number travels 100% and lands precisely one line up. */
.hero-count {
grid-area: count;
font-size: var(--fs-sub);
line-height: 1;
font-weight: 600;
letter-spacing: normal;
font-variant-numeric: tabular-nums;
/* The digit travels a full line, so the box has to crop it — otherwise the
old number is still legible above the new one on its way out. */
overflow: hidden;
}
.hero-caption { grid-area: caption; }
.hero-next { grid-area: next; justify-self: end; }
/* The caption and the counter change together when the slide does: both
leave upward and both return from below, so the whole lower-left corner
reads as one movement rather than three things blinking.
A heading that rewrites itself cannot be split into lines once at load,
which is why this is a fade on the block rather than the per-line reveal
the rest of the site uses. */
.hero-caption,
.hero-count [data-hero-num] {
transition: opacity var(--t-fast) ease, transform var(--t-move) var(--e-move);
}
/* leaving */
.hero-caption.is-swapping { opacity: 0; transform: translateY(-10px); }
.hero-count [data-hero-num].is-swapping { opacity: 0; transform: translateY(-100%); }
/* Coming back: an animation rather than a parked state, so the resting style
stays legible on its own. Nothing here holds the element invisible. */
@keyframes hero-rise-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-digit-in {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
.hero-caption.is-entering { animation: hero-rise-in var(--t-move) var(--e-move); }
.hero-count [data-hero-num].is-entering { animation: hero-digit-in var(--t-move) var(--e-move); }
.hero-count [data-hero-num] { display: inline-block; } /* the total beside it never moves */
@media (prefers-reduced-motion: reduce) {
.hero-caption,
.hero-count [data-hero-num] { transition: none; transform: none; animation: none; }
}
/* --- The footer scrolls; only the wordmark is revealed -------------------
The whole footer used to be pinned under the page, as on the reference, so
scrolling to the end slid the page off it. That only held while the footer
fitted in 90% of the viewport, and on a laptop it often did not, so the same
site behaved two ways. The links are content and now simply scroll; the
reveal belongs to the wordmark at the foot alone (section 51), which works
at every height.
`main` keeps its own ground and stacking level: other rules have come to
rely on it sitting above the page's fixed layers. */
main {
position: relative;
z-index: 1;
background: var(--bone);
}
/* The hero arrow shrinks on a phone. Measured on the reference at 390: the
same artwork renders 20px wide there against 48 on the desktop — ours stayed
48 at every width and dominated the corner. The button keeps a 44px tap
height; only the glyph shrinks. */
@media (max-width: 860px) {
.hero-next {
width: 24px;
height: auto;
/* the glyph shrinks, the target does not — 44px stays tappable */
min-height: 44px;
display: grid;
place-items: center;
}
.hero-next svg { width: 24px; height: auto; }
}
/* A revealed footer is only worth revealing if there is page left above it.
At 390 the band padding put it at 70% of the viewport; trimmed, it lands
near the reference's 43%. */
@media (max-width: 860px) {
.footer { padding-top: var(--gap); padding-bottom: 20px; }
.footer-base { margin-top: var(--gap); }
}
/* --- 26. The footer follows the theme ------------------------------------
The footer takes the page's own mode — dark on the dark theme, light on the
light one — at the owner's request; only "Fler vi arbetar med" on the home
page runs in the opposite mode (section 53), which is what sets the end of
the page apart. So no token set here: the page's tokens apply as they are. */
.footer {
color: var(--obsidian);
background: var(--bone);
}
/* The summary's paragraphs run on rather than standing apart. Each one here
is usually a single line, so a 20px gap between them did not read as two
paragraphs — it read as one paragraph set on a wildly loose line. The
reference runs its case copy continuously for the same reason. */
.page-hero .proj-body + .proj-body { margin-top: 0; }
/* A clip and its name travel together, so the grid cell is the pair rather
than the player: the figure keeps its 9:16 box inside the cell and the name
sits under it on the card's own rhythm. */
.clip-item { display: flex; flex-direction: column; }
.clip-title {
margin-top: var(--card-gap);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 600;
}
/* The project's opening block reads flush left at every width, like every
other block of text on the site. It was set against the right margin for a
day; the owner's ruling is that everything is left aligned.
/* --- 31. Pictures settle as they arrive ------------------------------------
A case picture starts a touch large inside its frame and eases to rest as it
crosses into view, so a page of stills reads as something passing rather
than something printed. 1.06 to 1: under the threshold where it registers
as zoom, over the one where it registers at all.
On the picture, not on .media — the card's hover already scales .media, and
two animations writing one transform would fight. Nested, they compose.
The frame clips it, so nothing grows past the card's edge.
Scroll-driven, so it is CSS alone and costs nothing on the main thread.
Where view timelines are not supported the picture simply sits at rest.
Not on the slider's cards: that rail scrolls sideways, a vertical view
timeline would read nothing useful there, and nothing inside a horizontal
rail may be moved on the vertical axis.
The timeline is declared on the card and read by the picture, not taken
with view() on the picture itself. view() binds to the nearest scroll
container, and the frame's overflow:hidden makes the frame one — so the
picture was measuring its visibility inside a box that never scrolls, and
sat at scale 1 the whole way down. Measured before the fix: 1.000 entering,
1.000 a third in, 1.000 well in. The card is outside that box.
------------------------------------------------------------------------ */
@keyframes settle-in {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.card,
.mfig { view-timeline: --case block; }
.card .media > img,
.card .media > .card-film,
.mfig img {
animation: settle-in linear both;
animation-timeline: --case;
animation-range: entry 0% cover 45%;
}
}
}
/* --- 32. Cards play their film on hover ----------------------------------
The loop sits over the still and fades up once it has a frame to show. It
is built on first hover by street.js, never at load. */
.card-film {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) ease;
}
.media.is-playing .card-film { opacity: 1; }
/* --- 33. The card becomes the page ---------------------------------------
Cross-document view transitions on the real site: the clicked card's
picture travels into the project's film, and everything else cross-fades.
The artifact runs the same transition through its router. Where view
transitions are unsupported the navigation is simply immediate.
One name. The lead player always holds it; a card holds it only once
clicked (.vt-case, set by street.js). The two pictures differ in shape —
a 3:2 card, a 16:9 film — so both snapshots are cropped rather than
stretched while the box between them changes size. */
@view-transition { navigation: auto; }
.player--lead,
.vt-case { view-transition-name: case-hero; }
.player--lead.vt-off { view-transition-name: none; }
::view-transition-group(case-hero) {
animation-duration: .5s; /* --t-move */
animation-timing-function: cubic-bezier(.4, 0, .2, 1); /* --e-move */
}
::view-transition-old(case-hero),
::view-transition-new(case-hero) {
height: 100%;
object-fit: cover;
overflow: clip;
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; } /* --t-fast */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* --- 34. Spring -----------------------------------------------------------
A third feel beside the two speeds: things the pointer touches overshoot a
little and settle, as if they had weight. Only on hover affordances — the
card, the arrow, the cursor tag. Page-level movement (the cut, the sheet,
the reveals) keeps the calm curve; a whole page that bounces is a toy.
linear() draws a real spring; older browsers get an overshooting bezier. */
:root { --e-spring: cubic-bezier(.34, 1.56, .64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
:root {
--e-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 15.5%, .938 20.7%,
1.017 24.5%, 1.061 28.3%, 1.077 32.4%, 1.067 36.9%, 1.016 50.4%,
.996 58.8%, 1.001 81.5%, 1);
}
}
.card .media,
.vent-card .media { transition: transform .7s var(--e-spring); }
.hero-next { transition: transform .6s var(--e-spring), opacity var(--t-fast) ease; }
/* --- 35. The cursor becomes a lens -------------------------------------
Over something clickable that is a picture — a case, a film, a gallery
still — the pointer turns into a translucent disc that says what the click
will do. Everywhere else the system arrow stays, so text can still be
selected and small links aimed at.
Dark glass rather than light: it sits over footage in both themes, and a
pale disc with dark type loses its contrast over every bright frame. The
blur keeps the label legible over detail; the grain ties it to the hero's
film surface. Centred on the pointer, because here it IS the pointer. */
.cursor-tag {
position: fixed;
left: 0;
top: 0;
z-index: 90;
pointer-events: none;
will-change: transform;
}
.cursor-tag span {
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
/* Safari draws a backdrop-filter as the element's square box when the
element is transformed, ignoring border-radius and overflow: the "Se
case" disc showed a pale blurred square around it. clip-path clips the
backdrop too, in every engine. */
-webkit-clip-path: circle(50%);
clip-path: circle(50%);
/* and the grain inside animates, so WebKit composites it on its own layer,
which neither border-radius nor overflow clips; a mask does */
-webkit-mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
isolation: isolate;
background: rgba(12, 12, 13, .42);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
backdrop-filter: blur(10px) saturate(1.2);
color: #fff;
font-size: var(--fs-meta);
line-height: 1;
white-space: nowrap;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform .5s var(--e-spring), opacity .15s ease;
}
/* the grain: the hero's own noise tile, jumping in steps, under the label */
.cursor-tag span::before {
content: "";
position: absolute;
inset: -50%;
z-index: -1;
background-image: url("data:image/svg+xml;utf8,