/* ========================================================================== Rovian — Stone The design system from demos/11d-field-stone.html, extracted and extended with the components the case studies need. ========================================================================== */ /* ---------- type ---------- */ /* Instrument Sans, self-hosted. It used to come from Google's CDN, which meant every visitor's IP reached a third party before a single word was painted — awkward for a site whose privacy page says it hands nothing to anyone. Serving it from our own origin also drops two DNS lookups and a TLS handshake off the critical path. Both subsets are required, not just latin: ă, ș and ț live in latin-ext, so dropping it would leave the Romanian pages rendering diacritics from a fallback face. unicode-range keeps that file unfetched for English readers. */ @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:75% 100%; font-display:swap; src:url(../fonts/instrument-sans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:75% 100%; font-display:swap; src:url(../fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --ground:#E6E6E3; --ground-2:#DCDCD9; --card:#FFFFFF; --cream:#F2F2F0; --ink:#1C1D1F; --mid:#5C5F63; --line:rgba(28,29,31,.15); --line-soft:rgba(28,29,31,.08); /* The emphasis tone. It used to be a navy, which fought the four project colours the work section now carries; a near-black in the ink family gets out of their way, so the only chroma on the page belongs to the projects. */ --deep:#212328; --deep-hover:#0F1013; --r:22px; --sp:clamp(20px,5vw,76px); /* the vertical rhythm between sections. Named because blocks inside a section sometimes have to reproduce it — see .pair--even */ --sec-gap:clamp(52px,9.5vh,112px); --f:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",Arial,sans-serif; /* the four project colours, each sampled from that project's poster and taken down in lightness until it clears 3:1 on the stone ground — everything set in them is large text, so that is the AA bar. Two places name a project in its own colour and must agree: the home cards and the next-project title at the foot of every case study. */ --brand-powercast:#E64E0C; --brand-sofimar:#159538; --brand-ambience:#277AEA; --brand-spine:#985AE8; } *{box-sizing:border-box;margin:0;padding:0} /* the ground colour lives on so 's own background never paints over the dot field, which sits underneath the content at z-index:-1 */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground)} body{background:transparent;color:var(--ink);font-family:var(--f); font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{max-width:100%;height:auto;display:block} ::selection{background:var(--deep);color:var(--cream)} :focus-visible{outline:2px solid var(--deep);outline-offset:3px} /* ---------- dot field ---------- */ /* A viewport-fixed measuring grid the whole site sits on. It never scrolls: the content slides across a stationary field. Opaque surfaces (cards, the CTA, the footer) mask it, so the dots only ever read in the negative space. */ .dotfield{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block; pointer-events:none;contain:layout style paint} /* ---------- large-display scale ---------- */ /* Every cap in the type scale has bottomed out by ~1400px, so on a 1920 desktop the page keeps getting wider while the text stays the same size and starts to read small against the screen. This is the 110% the design was judged at, applied only where there is room for it — laptops are left alone. The dot field is excluded on purpose: it is a viewport-fixed canvas sized off clientWidth, and scaling it would just resample the dots. */ @media(min-width:1500px){.hd,main,.ft{zoom:1.1}} /* Anchor targets have to clear the sticky bar, or a jump to #work parks the heading underneath it. --hd-h is the bar's own height: the fallback below covers a no-JS load, and the header script overwrites it with the measured value on every resize, so the two can never drift apart. */ :root{--hd-h:64px} #top,#services,#work,#contact{scroll-margin-top:calc(var(--hd-h) + 26px)} .wrap{max-width:1300px;margin:0 auto;padding:0 var(--sp)} .narrow{max-width:1000px;margin:0 auto;padding:0 var(--sp)} .lbl{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--mid)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- header ---------- */ /* The bar carries no surface at rest, so the dot field reads straight through it. It only takes one once page text starts passing underneath, where the nav would otherwise have to compete with moving content. blur(0) rather than none in the bare state: none isn't interpolable, so the blur would snap instead of fade. */ .hd{position:sticky;top:0;z-index:50;background:transparent;backdrop-filter:blur(0px); transition:background-color .28s ease,backdrop-filter .28s ease} .hd.stuck{background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px)} .hd .wrap{display:flex;align-items:baseline;gap:26px;padding-top:15px;padding-bottom:15px} .hd .brand{font-size:21px;font-weight:600;letter-spacing:-.035em} .hd .brand em{font-style:normal;font-weight:400;font-size:13px;color:var(--mid);margin-left:9px} .hd nav{margin-left:auto;display:flex;gap:26px;align-items:baseline} .hd nav a{font-size:15px;color:var(--mid);transition:color .18s} .hd nav a:hover,.hd nav a[aria-current]{color:var(--ink)} /* without a contrasting hue to mark it, the quote link earns its emphasis from a surface instead. Baseline alignment is what keeps its label on the same line as the plain links either side, with the pill sitting around it. */ .hd nav a.go{background:var(--deep);color:var(--cream);font-weight:600;font-size:14px; padding:9px 14px;border-radius:13px;transition:background-color .2s} .hd nav a.go:hover{background:var(--deep-hover);color:var(--cream)} @media(max-width:820px){.hd .brand em{display:none}.hd nav a:not(.go){display:none}} /* ---------- skip link ---------- */ /* Off-screen until focused. The first Tab on a keyboard should be a way past the header, not the first link inside it. */ .skip{position:absolute;left:-9999px;top:0;z-index:100; background:var(--deep);color:var(--cream);padding:12px 18px;border-radius:0 0 12px 0; font-size:14px;font-weight:600} .skip:focus{left:0} /* ---------- buttons ---------- */ .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,40px)} .btn{border-radius:999px;padding:14px 26px;font-size:15px;font-weight:600;transition:.2s;display:inline-block} .btn-a{background:var(--deep);color:var(--cream)} .btn-a:hover{background:var(--deep-hover);transform:translateY(-1px)} .btn-b{background:rgba(255,255,255,.66);color:var(--ink)} .btn-b:hover{background:var(--card)} .btn-c{background:var(--cream);color:var(--deep)} .btn-c:hover{background:#fff} /* ---------- hero ---------- */ .hero{padding:clamp(46px,10vh,124px) 0 clamp(72px,10vh,120px)} .hero h1{margin:0;font-size:clamp(38px,6.8vw,102px);line-height:1.0; letter-spacing:-.045em;font-weight:400;max-width:15ch} .hero h1 b{font-weight:600} /* ---------- sections ---------- */ .sec{padding:var(--sec-gap) 0} .sec-flush{padding-top:0} .sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap; margin-bottom:clamp(24px,4vh,42px)} .sec-top h2{font-size:clamp(25px,3.2vw,44px);letter-spacing:-.045em;font-weight:500;line-height:1.04;max-width:18ch} .sec-top p{font-size:15.5px;line-height:1.55;color:var(--mid);max-width:34ch} /* The work section opens the page's content, so it takes the long pad away from the collage above it and only a short one down to "What we do"; that section then closes on a longer pad still: the CTA below it is a filled dark block, and it needs more clear air above it than a run of text would. */ #work{--sec-pad:clamp(84px,12vh,140px); padding-top:var(--sec-pad);padding-bottom:clamp(32px,5vh,58px)} #services{--sec-pad:clamp(48px,7vh,82px); padding-top:var(--sec-pad);padding-bottom:clamp(78px,14vh,170px)} /* ...but that opening pad is the gap down from whatever sits above, not space the anchor should land in: a jump to either section is a request for its heading, and the generic scroll-margin above would stack the pad on top of the bar clearance. Each section publishes its own pad so this can take it back out, landing both headings the same 26px under the bar as every other anchor target. The offset goes negative where the pad is taller than the header, which is what that case is supposed to resolve to. */ #work,#services{scroll-margin-top:calc(var(--hd-h) + 26px - var(--sec-pad))} /* the first entry's rule now does most of the work of separating the heading from the list, and the entry adds its own top padding under it, so the heading's own gap comes down to keep the total where it was */ #work .sec-top{margin-bottom:clamp(20px,3.2vh,36px)} /* ---------- selected work (home) ---------- */ /* Four crops sharing one plate, and one target: the whole strip points at the work section below it. Nothing moves on hover — on a fine pointer the cursor itself is replaced by a chip that says where the strip goes, which is both the affordance and the label. */ .work-collage{display:flex;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:var(--r)} .collage-poster{position:relative;flex:1 1 0;min-width:0;overflow:hidden} .collage-poster:nth-child(1){z-index:1} .collage-poster:nth-child(2){z-index:2} .collage-poster:nth-child(3){z-index:3} .collage-poster:nth-child(4){z-index:4} .collage-poster+.collage-poster{box-shadow:-18px 0 30px -14px rgba(8,13,20,.55)} .collage-poster img{width:100%;height:100%;object-fit:cover} .collage-poster:nth-child(1) img{object-position:0 50%} .collage-poster:nth-child(2) img{object-position:47.5% 50%} .collage-poster:nth-child(3) img{object-position:36% 50%} .collage-poster:nth-child(4) img{object-position:0 50%} /* the native cursor is only given up once the chip that replaces it exists, so a failed script leaves a pointer rather than nothing. The class comes from JS. */ .work-collage.chip-on{cursor:none} /* position comes from the `translate` property, which JS drives every frame; `scale` is left to CSS so the entrance can be eased without fighting it */ .cursor-chip{position:fixed;left:0;top:0;z-index:80;pointer-events:none; display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:13px; background:var(--deep);color:var(--cream);font-size:14px;font-weight:600; line-height:1;white-space:nowrap; box-shadow:0 8px 24px -12px rgba(8,13,20,.55); opacity:0;scale:.86;transition:opacity .16s ease,scale .22s cubic-bezier(.22,.7,.2,1)} .cursor-chip.on{opacity:1;scale:1} .cursor-chip i{font-style:normal;font-size:15px} @media(prefers-reduced-motion:reduce){.cursor-chip{transition:opacity .16s ease}} /* One shape for every entry — no alternating sides. The copy column is set to the height of the poster beside it, which is what lets the name sit on the poster's top edge and the button on its bottom edge. Name and description are two blocks at one size: the name recedes to grey, the sentence carries the weight, and they read as consecutive lines of a single paragraph. */ /* Each entry is ruled off top and bottom, edge to edge. The list is the one block on the page that leaves .wrap: the hairline runs the full width of the page and .card-in puts the measure back, so the rules read as page furniture rather than as a border drawn around a card. The gap between entries is now their padding, split either side of the shared rule. */ .cards{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line); --ease:cubic-bezier(.22,.7,.2,1)} .card{display:block;min-width:0;padding:clamp(30px,4.4vw,60px) 0;border-top:1px solid var(--line)} .card-in{max-width:1300px;margin:0 auto;padding:0 var(--sp); display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); column-gap:clamp(30px,6vw,104px);align-items:stretch;min-width:0} .card-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .card .meta{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(14px,1.7vw,22px)} .card .yr{font-size:13px;color:var(--mid)} .card h3,.card p{font-size:clamp(21px,2.35vw,33px);line-height:1.1;letter-spacing:-.042em; font-weight:600;margin:0;text-wrap:pretty} /* the name is set in the project's own colour — that is what gives the recessive line a job. The order here is the order of the cards in the markup. */ .card:nth-child(1){--brand:var(--brand-powercast)} .card:nth-child(2){--brand:var(--brand-sofimar)} .card:nth-child(3){--brand:var(--brand-ambience)} .card:nth-child(4){--brand:var(--brand-spine)} .card h3{color:var(--brand,rgba(28,29,31,.38))} .card h3:after{content:"."} /* the auto margin below decides where the pill lands; this is the floor on how close it may come when the description is short */ .card p{color:var(--ink);margin-bottom:clamp(26px,3vw,40px)} /* the link sits on the poster's bottom edge; margin-top:auto is what pushes it there, so the gap above it grows with whatever the description needs */ .card-go{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:9px; padding-bottom:5px;color:var(--ink);font-size:15px;font-weight:600} .card-go span{font-size:17px;line-height:1;transition:transform .35s var(--ease)} .card-go:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)} .card:hover .card-go:after,.card:focus-visible .card-go:after{transform:none} /* the link box now runs edge to edge, and a focus ring drawn around that would trace the whole viewport; it is moved in onto the measure instead */ .card:focus-visible{outline:0} .card:focus-visible .card-in{outline:2px solid var(--deep);outline-offset:3px} .card:hover .card-go span{transform:translateX(4px)} .card:hover .plate{transform:translateY(-5px)} /* align-self:start keeps the 4:3 intact — a stretched grid item takes its height from the row instead, which would quietly re-crop the poster whenever the description happened to run longer than the picture is tall */ .card .plate{align-self:start;border-radius:clamp(12px,1.6vw,20px);overflow:hidden;aspect-ratio:4/3; background:var(--cream);transition:transform .45s var(--ease)} .card .plate img,.card .plate svg{width:100%;height:100%;display:block;object-fit:cover} /* each poster is a 2:1 plate with its subject in a different place, so the 4:3 crop is anchored per project rather than centred */ .card:nth-child(1) .plate img{object-position:0 50%} .card:nth-child(2) .plate img{object-position:100% 50%} .card:nth-child(3) .plate img{object-position:80% 50%} .card:nth-child(4) .plate img{object-position:0 50%} @media(max-width:940px){ .card{padding:clamp(26px,5vw,38px) 0} .card-in{grid-template-columns:1fr} .card .plate{order:-1;margin-bottom:clamp(20px,3vw,28px)} .card-go{margin-top:0} } /* ---------- services ---------- */ /* Six disciplines on the bare ground: no cards, no fills, no rules. Each one opens with a drawn mark — small technical diagrams on one 48-unit grid at one stroke weight, the only iconography on the site — and those marks are what set the rhythm the tiles used to get from their borders. The row gap is much wider than the column gap on purpose: it is paying for the hairline that used to separate the two rows, and without it the second row reads as a continuation of the first. */ .svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3.4vw,58px);row-gap:clamp(46px,5.6vw,82px)} .svc-mark{color:var(--deep);opacity:.92;margin-bottom:clamp(20px,2.4vw,32px)} .svc-mark svg{width:clamp(40px,3.6vw,50px);height:auto;display:block} /* knocked-out shapes: where one drawn element crosses another, the one in front is filled with the page ground so the line behind it stops rather than showing through. In CSS rather than a fill attribute — var() is not valid in a presentation attribute, so the fill has to come from a rule. */ .svc-mark .bg{fill:var(--ground)} .svc-mark .ink{fill:currentColor;stroke:none} .svc-mark .tint{fill:currentColor;stroke:none;opacity:.15} .svc h3{font-size:clamp(18px,1.8vw,23px);letter-spacing:-.035em;font-weight:600;margin-bottom:10px} .svc p{font-size:15px;line-height:1.6;color:var(--mid);max-width:38ch} @media(max-width:900px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){ .svcs{grid-template-columns:1fr;row-gap:40px} .svc-mark{margin-bottom:16px} } /* ---------- CTA ---------- */ /* The block carries a form now, which is what took it off centre: a statement centred over a left-aligned form reads as two blocks that happen to share a card. Statement and address on the left, the form on the right, and the whole thing lines up with the left-aligned page above it. */ .cta{background:var(--deep);color:var(--cream);border-radius:var(--r); padding:clamp(30px,5vw,76px);margin-bottom:clamp(40px,7vh,84px)} .cta-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,4.6vw,76px);align-items:start} /* the cap comes down with the column: the heading used to have the full width of the card to run across, and it now has a little under half of it */ .cta h2{font-size:clamp(28px,3.5vw,50px);line-height:1.02;letter-spacing:-.05em;font-weight:400;max-width:13ch} .cta h2 b{font-weight:600} /* scoped to the statement rather than .cta p: the form in the other column has paragraphs of its own, and this would outrank every class they carry */ .cta-say p{margin-top:clamp(16px,2.2vh,22px);font-size:16.5px;line-height:1.55; color:rgba(242,242,240,.7);max-width:40ch} /* the other route out of the block. Set at a size that reads as an invitation rather than a footnote, and ruled off so it is plainly its own offer. */ .cta-direct{display:flex;flex-direction:column;align-items:flex-start; margin-top:clamp(26px,3.6vh,42px);padding-top:clamp(20px,2.8vh,30px); border-top:1px solid rgba(242,242,240,.16)} .cta-direct .lbl{color:rgba(242,242,240,.5);margin-bottom:11px} .cta-direct .mail{position:relative;font-size:clamp(19px,1.9vw,26px);letter-spacing:-.035em; font-weight:600;padding-bottom:4px} .cta-direct .mail:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;opacity:.38;transition:opacity .22s} .cta-direct .mail:hover:after{opacity:1} .cta-direct .call{display:inline-flex;align-items:center;gap:9px;margin-top:15px; font-size:15px;color:rgba(242,242,240,.62);transition:color .18s} .cta-direct .call:hover{color:var(--cream)} .cta-direct .call span{font-size:16px;line-height:1;transition:transform .3s cubic-bezier(.22,.7,.2,1)} .cta-direct .call:hover span{transform:translateX(4px)} /* ---------- contact form ---------- */ /* Fields as soft-cornered wells sunk into the card, in the radius family the nav pill and the cursor chip already use. They carry their label inside as the placeholder; the