/* ===== tokens.css ===== */ /* ========================================================================== AVELaunch Books — design tokens Source of truth: WEBSITE_DESIGN (Figma), page "Dekstop" Handoff document v1.0, 7 September 2026, sections 6 and 7 No colour value may be written anywhere outside this file. ========================================================================== */ :root { /* --- 6.2 Primitive palette ------------------------------------------- */ --rich-black-1: #0B1424; /* body text, inverse surfaces, 3px strokes */ --rich-black-2: #E8EDF5; --rich-black-3: #C7D2E3; /* 1px hairline, vertical grid lines */ --rich-black-4: #93A3BD; --rich-black-5: #5D6C86; /* secondary text */ --rich-black-6: #08101D; --rich-black-7: #050A14; --space-cadet-1: #1B2A57; --space-cadet-2: #EEF2FA; --space-cadet-3: #CBD6EC; --space-cadet-4: #9BAED3; --space-cadet-5: #657BA8; --space-cadet-6: #142042; --space-cadet-7: #0D162D; --vista-blue-1: #7C9EC7; /* brand surface */ --vista-blue-2: #F3F7FC; /* spelled "Vista Vlue 2" in the file */ --vista-blue-3: #DCE8F5; --vista-blue-4: #B7CBE3; --vista-blue-5: #93B1D3; --columbia-blue-1: #C2E6F9; --columbia-blue-2: #FCFEFF; --columbia-blue-3: #EEF8FD; --columbia-blue-4: #D9EEF9; --columbia-blue-5: #CBE8FA; --amber-1: #F2BB16; --amber-2: #F9E08A; --amber-3: #F7CD52; --amber-4: #E0A800; /* accent: buttons, underlines, active */ --editorial-white-1: #F8F7F4; --editorial-white-2: #FFFFFF; --editorial-white-3: #FDFBF8; --editorial-white-4: #EEEAE3; /* page background */ /* --- 6.3 Semantic layer ---------------------------------------------- Reference map from the file. The layout binds to primitives, exactly as the Figma layers do, so this layer stays a dictionary of roles. */ --surface-page: var(--editorial-white-4); --surface-brand: var(--vista-blue-1); --surface-accent: var(--amber-4); --surface-inverse: var(--rich-black-1); --content-primary: var(--rich-black-1); --content-secondary: var(--rich-black-5); --content-on-inverse: var(--editorial-white-4); --content-accent: var(--amber-4); --content-on-accent: var(--rich-black-1); --content-on-brand: var(--rich-black-1); --border-strong: var(--rich-black-1); /* 3px */ --border-hairline: var(--rich-black-3); /* 1px */ --border-accent: var(--amber-4); /* 3px */ --action-fill: var(--amber-4); --action-fill-hover: rgba(255, 255, 255, 0); /* no fill on hover */ --action-border-hover: var(--amber-4); /* --- 4.1 Grid --------------------------------------------------------- 1440 reference · 12 columns · Stretch · margin 50 · gutter 25 Working area 1340. Column width is derived, never written down. */ --layout-reference: 1440px; --layout-margin: 50px; --layout-gutter: 25px; --layout-content: 1340px; --layout-floor: 1200px; /* lower bound of the desktop layout */ /* --- 4.1 Vertical lines ---------------------------------------------- Seven lines, step 180 of 1440 = 12.5 % of the window. THIS IS THE ONLY PLACE THE POSITIONS EXIST. Both layers — the page layer under the content and the header layer over its blurred background — read them from here. Writing them twice is what makes the two layers drift apart at the header edge. */ --line-step: 12.5%; --line-width: 1px; --line-color: var(--rich-black-3); /* --- 8 Effects -------------------------------------------------------- One effect on the whole site: BACKGROUND_BLUR 50 on the header plate. */ --header-blur: 25px; --header-plate: rgb(238 234 227 / 0.75); --header-height: 61px; /* --- Motion ----------------------------------------------------------- */ --t-fast: 150ms; --t-base: 300ms; } /* ===== base.css ===== */ /* ========================================================================== AVELaunch Books — fonts, typography scale, grid, vertical lines, layout intent tags. Handoff sections 4, 5, 7, 15. ========================================================================== */ /* --- 15.1 Fonts. Served from our own domain, never a third party. -------- */ @font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/mulish-latin-wght-normal.woff2") format("woff2-variations"); 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: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/mulish-latin-ext-wght-normal.woff2") format("woff2-variations"); 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; } @font-face { font-family: "Mulish"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../fonts/mulish-latin-wght-italic.woff2") format("woff2-variations"); 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: "Comforter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/comforter-latin-400-normal.woff2") format("woff2"); } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: var(--layout-floor); background: var(--surface-page); color: var(--content-primary); font-family: "Mulish", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: normal; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; margin: 0; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* 9. Keyboard focus is visible on every interactive element: white plate, 3px accent stroke — the decision taken for the form fields, applied site wide because the component sets carry no separate focus variant. */ :focus-visible { outline: 3px solid var(--border-accent); outline-offset: 2px; background-color: var(--editorial-white-2); } /* --- 7.3 Heading trim --------------------------------------------------- Headings in the file sit on the cap height, not on the line box. Without the trim every heading drops a few pixels and the spacing above it reads larger than the macket. */ .u-trim { text-box-trim: trim-both; text-box-edge: cap alphabetic; } /* --- 7.2 Type styles ---------------------------------------------------- Letter spacing comes from Figma as a percentage of the type size, so it is written in em and never converted to pixels. Line height is Auto in every style, which is line-height: normal, not 100 %. */ .t-heading-accent { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; text-transform: uppercase; } .t-heading-accent-small { font-family: "Comforter", cursive; font-weight: 400; font-size: 100px; letter-spacing: 0; } .t-heading { font-weight: 1000; font-size: 50px; letter-spacing: 0.1em; text-transform: uppercase; } .t-heading-wide { font-weight: 1000; font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; } .t-heading-wide-light { font-weight: 200; font-size: 50px; letter-spacing: 0.06em; text-transform: uppercase; } .t-subheading { font-weight: 400; font-size: 25px; letter-spacing: 0; text-transform: uppercase; } .t-intro { font-weight: 400; font-size: 25px; letter-spacing: 0; } .t-intro-black { font-weight: 1000; font-size: 25px; letter-spacing: 0; text-transform: uppercase; } .t-intro-black-wide { font-weight: 1000; font-size: 25px; letter-spacing: 0.1em; text-transform: uppercase; } .t-base { font-weight: 400; font-size: 15px; letter-spacing: 0; } .t-base-black { font-weight: 1000; font-size: 15px; letter-spacing: 0; } .t-base-italic { font-weight: 400; font-size: 15px; font-style: italic; } .t-base-down-black { font-weight: 1000; font-size: 15px; text-transform: lowercase; } .t-base-up { font-weight: 400; font-size: 15px; text-transform: uppercase; } .t-base-up-black { font-weight: 1000; font-size: 15px; text-transform: uppercase; } .t-base-up-black-wide { font-weight: 1000; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; } .t-label { font-weight: 400; font-size: 25px; letter-spacing: 0.1em; text-transform: uppercase; } .t-label-wide { font-weight: 400; font-size: 25px; letter-spacing: 0.6em; text-transform: uppercase; } .t-label-big { font-weight: 200; font-size: 100px; text-transform: uppercase; } .t-label-big-black { font-weight: 1000; font-size: 100px; text-transform: uppercase; } .u-secondary { color: var(--content-secondary); } .u-accent { color: var(--content-accent); } /* --- 4.1 / 4.2 Working area --------------------------------------------- Above 1440 the working area holds at 1340 and centres; the margins grow. Between 1200 and 1440 the margin stays 50, the gutter stays 25, the columns narrow. Type sizes do not change. */ .container { width: min(var(--layout-content), 100% - var(--layout-margin) * 2); margin-inline: auto; } /* 12-column helper. The column width is derived from the grid, never set. */ .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--layout-gutter); } /* --- 5.1 Intent tags ---------------------------------------------------- Five values cover all thirty-nine hand-composed blocks. Where Auto Layout in the file disagrees with the tag, the tag wins. */ /* fluid — lives inside the working area and narrows with it. Default. */ .is-fluid { width: 100%; } /* flow — a row of equal elements that wraps when it stops fitting. The gap equals the gutter. The count per row is not fixed. */ .is-flow { display: flex; flex-wrap: wrap; gap: var(--layout-gutter); } .is-flow > * { flex: 1 1 var(--flow-basis, 430px); min-width: 0; } /* bleed:both — runs the full window width both sides. Text and cards inside stay in the working area. */ .is-bleed-both { width: 100vw; margin-left: calc(50% - 50vw); } /* bleed:left / bleed:right — out past one margin only, never both. --bleed-stop is the macket coordinate of the edge that stays put, expressed as a share of the working area. The box stops growing at the reference frame. It used to run to the window edge (`margin-left: calc(50% - 50vw)`), which at 1440 made it exactly the macket's 1340 — every share inside is a share of 1340, so the composition was right there and only there. At 1920 the same box became 1580 and the photograph, the cards and the text stretched with it: the "block drifts left" the comments report, eighteen times over. Pinned to the frame, the proportions inside are the macket's at any width. What is supposed to keep running off the edge is the fill, not the composition — an amber slab, a coloured band. That is `.u-bleed-fill-left` below, on the fill itself. */ .is-bleed-left { width: calc(100% - var(--bleed-stop, 0%) + (var(--layout-reference) - var(--layout-content)) / 2); margin-left: calc((var(--layout-content) - var(--layout-reference)) / 2); margin-right: 0; } /* Mirror image: for bleed:right the stop is the LEFT inset, so it stays a margin and the width comes off the same side. */ .is-bleed-right { width: calc(100% - var(--bleed-stop, 0%) + (var(--layout-reference) - var(--layout-content)) / 2); margin-right: calc((var(--layout-content) - var(--layout-reference)) / 2); margin-left: var(--bleed-stop, 0%); } /* The fill carries on to the window edge from wherever it stops. It paints a viewport's worth sideways and the page clips it, so no width has to be worked out. `background: inherit` so the fill's own colour is the only place a colour is written. */ .u-bleed-fill-left::before, .u-bleed-fill-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; background: inherit; } .u-bleed-fill-left::before { right: 100%; } .u-bleed-fill-right::after { left: 100%; } /* --- 4.0 The frame ------------------------------------------------------ Everything positioned from --line-step is positioned inside this box, and nothing else is: the macket's 1440 frame, centred, shrinking with the window below 1440 and holding still above it. Before this existed, the line layer was `inset: 0` on the page, so --line-step read as 12.5 % of the WINDOW: at 1440 the lines landed on 180 · 360 · … · 1260 exactly, and at 1920 they spread to a 240 step and left the working area behind. Same for the header's menu, which took its cells from the same percentage. One box, one source, so the page layer and the header layer cannot drift apart at any width. */ .u-frame { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, var(--layout-reference)); transform: translateX(-50%); } /* --- 4.1 Vertical lines ------------------------------------------------- One component, two placements. Positions are read from --line-step in tokens.css and exist nowhere else, so the page layer and the header layer cannot drift apart. */ .gridlines { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, var(--layout-reference)); transform: translateX(-50%); pointer-events: none; z-index: 0; } .gridlines i { position: absolute; top: 0; bottom: 0; width: var(--line-width); background: var(--line-color); left: calc(var(--n) * var(--line-step)); } /* The page layer sits under every section, the full height of the document. The header is the one exception: it keeps its own sticky positioning and rides above, because it draws its own copy of the lines over its plate. */ /* Bleeding blocks are drawn past the window edge on purpose — an amber band that runs off the left, a roller whose next card is cut by the right. The page clips them at the window. `clip` and not `hidden`: hidden would make this a scroll container and the pinned header would stop pinning. */ .page { position: relative; overflow-x: clip; } .page > .gridlines { z-index: 0; } .page > *:not(.gridlines):not(.site-header):not(.site-up) { position: relative; z-index: 1; } .page > .site-header { z-index: 2; } /* Skip link — visible only once it takes focus. */ .skip-link { position: absolute; left: var(--layout-margin); top: 0; z-index: 10; transform: translateY(-200%); padding: 12px 25px; background: var(--editorial-white-2); color: var(--content-primary); font-weight: 1000; font-size: 15px; text-transform: uppercase; transition: transform var(--t-fast); } .skip-link:focus-visible { transform: translateY(0); } /* --- Vertical rhythm between the blocks --------------------------------- The file stacks the screen's blocks on a fixed rhythm, and it is defined here once rather than inside each section: a section owns its own height, never the air around it. Read off the Main screen (1:3): the header's box ends at 111 and the first block starts at 180; every neighbouring pair of blocks sits 150 apart; the footer sits 100 below the last one. 150 is only the Main screen's number. Services runs 150 · 100 · 0, How It Works runs 100 below its halfway point, and the gap under the header is a different number on every screen. So the default lives here and a block that departs from it writes its own value once, in the markup, as `style="--gap: 100px"` on the
— the measured Figma number, next to the block it belongs to, still not a margin the section sets on itself. The FAQ on Main carries `--gap: 0`: its full-width blue fill is meant to start exactly where the founder block above it ends. */ :root { --block-gap: 150px; --block-gap-first: 69px; /* header box 111 → first block 180 */ --block-gap-footer: 100px; } main > section + section { margin-top: var(--gap, var(--block-gap)); } main > section:first-child { margin-top: var(--gap, var(--block-gap-first)); } .page > .site-footer { margin-top: var(--gap-footer, var(--block-gap-footer)); } /* --- 13.3 Anchors ------------------------------------------------------- Smooth scroll that accounts for the pinned header, so the target block does not hide underneath it. */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--header-height) + 50px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --- Below the 1200 floor ------------------------------------------------ The design stops at 1200: below that there is no narrower composition to fall back to, and `min-width` on its own gave a horizontal scrollbar — the headline cut off the left edge, half the hero off the right. A window at 900 is not a phone; it is a laptop or a half-screen window, and a page you have to scroll sideways to read is broken in the only sense that matters. So the page keeps its 1200 layout and is scaled down to fit the window. Everything stays in proportion and simply reads smaller. This is not a narrow layout and it is no substitute for one — it is what the site does until a narrow composition is drawn. The scale itself cannot be written here: `zoom` needs a plain ratio, and no CSS expression turns a viewport width into one — dividing 100vw by 1200 yields a length, which `zoom` rejects. So it is set by the small inline script the build puts at the top of every , and `zoom` rather than `transform: scale()` because a transform would make the pinned header and the scroll-to-top control position against the transformed box instead of the window, and both would come unstuck. */ /* An inline link inside body copy. The site has no underlines anywhere, so a link in the middle of a sentence has to be told apart some other way: it carries the accent colour and a 1px rule that thickens on hover. */ .u-link-inline { color: var(--content-accent); border-bottom: 1px solid currentColor; transition: border-bottom-width var(--t-fast), color var(--t-fast); } .u-link-inline:hover, .u-link-inline:focus-visible { border-bottom-width: 3px; } /* ===== header.css ===== */ /* ========================================================================== Site header — Figma component set 504:2789, instance 20:1973 on Main. Load AFTER css/base.css. Full window width, 61px tall, pinned to the top of the window. Three layers, bottom to top: 1. the plate — Editorial White 4 at 75 % over a background blur (Figma "Rectangle 13", 1440 x 61) 2. the lines — the page's own .gridlines component, drawn a second time so the seven lines sit OVER the plate 3. the logo and the menu Geometry: the seven lines and the seven menu cells are the same seven positions. They are read from --line-step in tokens.css and appear nowhere else, so the page's line layer and the header's cannot drift. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 10; height: var(--header-height); /* Starts one page margin down; the page's own lines show in that strip. */ margin-top: var(--layout-margin); } /* base.css pins every child of .page with `position: relative` at a higher weight than a single class, so the sticky behaviour is restated here at matching specificity. Width stays `auto` — the header must measure the same box as .page, not 100vw, or the scrollbar would offset its lines by a few pixels against the page's. */ .page > .site-header { position: sticky; z-index: 10; } /* --- 1. The plate ------------------------------------------------------- */ .site-header__plate { position: absolute; inset: 0; z-index: 0; background: var(--header-plate); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); } /* --- 2. The lines ------------------------------------------------------- The only modifier the shared component needs: it is lifted above the plate. The page layer keeps z-index 0 and stays under the content, so what shows inside the header is this crisp set at full strength, never the page's set dimmed and blurred through the translucent plate. */ .site-header__lines { z-index: 1; } /* --- 3. Logo ------------------------------------------------------------ */ /* The macket's margin measured from the frame, not from the window: above 1440 the frame centres, and a logo pinned to the window edge would sit 240 away from the menu that starts at the frame's first line. */ .site-header__logo { position: absolute; z-index: 2; left: calc(max(0px, (100% - var(--layout-reference)) / 2) + var(--layout-margin)); top: 50%; transform: translateY(-50%); } /* 15px tall, the wordmark's own ratio gives the width (107.45 in the macket). Fixed to the window margin, not to a share of the width. */ .site-header__logo img { width: auto; height: 15px; } /* --- 3. Menu ------------------------------------------------------------ Each cell's line is at --n * --line-step; the label sits one gutter to the right of it. The cell width (150 in the macket) is never needed — the next cell is placed from the next line, not from this one's edge. */ /* The frame box, not the window: the cells are placed from --line-step and the lines they belong to are now anchored to the macket's 1440 frame (base.css §4.0). Window-wide, the menu spread with the window and left its own lines behind above 1440. */ .site-header__nav { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, var(--layout-reference)); transform: translateX(-50%); z-index: 2; /* The nav box covers the whole header, including the logo. It is transparent but would still take the clicks, so it is made inert and only the menu items themselves are given back to the pointer. */ pointer-events: none; } .site-header__item { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: auto; left: calc(var(--n) * var(--line-step) + var(--layout-gutter)); } .site-header__link { white-space: nowrap; transition: color var(--t-fast); } /* Active page. The five variants in the set carry no other difference at this height, so one rule covers Main, Services, Process, Results and About. Styled off the attribute so the markup cannot drift from it. */ .site-header__link[aria-current="page"], .site-header__link:hover, .site-header__link:focus-visible { color: var(--content-accent); } /* --- 4. The sub-navigation ---------------------------------------------- Three of the five header variants in the set are 113 tall instead of 61: Services (966:7456), Results (521:2698) and About (521:3038). The extra 52 is a second row of links that hangs under the item that owns it — All services / Discovery Sprint under Services, Author Stories / Free Resources under Results, Our Team & Story / FAQ / Contact under About. Each sub-item sits on the SAME seven positions as the bar above it, one gutter right of its line, and the group's plate covers only its own columns. The rest of the row is bare: the page shows through it, with the seven lines carried down across the full width (Figma "Group 75"). The block is a child of the
  • that opens it, so :hover and :focus-within on that item are the entire interaction — no script, and the pointer can travel down into the row without losing the hover because it never leaves the
  • 's subtree. It is an OVERLAY, not flow: on Services the hero deliberately starts at 110 and runs up behind the whole header. A page whose first block is meant to start below the open row writes that into its own --gap. */ /* The row is a frame box, not a window-wide one: every piece inside it — plate, rule, line copy, labels — is placed from --line-step, and the line copy is now anchored to the macket's 1440 frame (base.css §4.0). If this row stayed window-wide the plate would sit at 12.5 % of the window while the lines sat on the frame, and above 1440 they would come apart. */ .site-header__sub { position: absolute; top: 100%; left: 50%; width: min(100%, var(--layout-reference)); transform: translateX(-50%); height: 52px; opacity: 0; visibility: hidden; transition: opacity var(--t-fast) ease, visibility var(--t-fast); /* The nav box above is inert so it cannot swallow clicks meant for the page; this row is its own box and takes its own. */ pointer-events: auto; } /* The block is a sibling of the menu, not a child of the item that opens it: the item is itself absolutely positioned, so a descendant would be laid out against that one narrow cell instead of across the header. :has() carries the relationship instead. Three states, in this order, and the order is the whole logic: 1. a page that belongs to a group holds that group's row open; 2. the moment the pointer or the caret lands on ANY opening item, every row closes — otherwise the page's own row and the hovered one draw on top of each other in the same 52px strip, which is what the header did on all seven section pages; 3. the row belonging to what is actually being pointed at opens. Step 3 also keeps the row open while the pointer is inside it, so travelling down from the label into the links does not close it. */ /* 1 — held open by the page, at the top of the page only. js/header.js adds .is-scrolled once the page has moved (2026-10-08: a scrolled or anchor-linked page had the row lying over its content). */ .site-header[data-subnav="services"]:not(.is-scrolled) .site-header__sub[data-group="services"], .site-header[data-subnav="results"]:not(.is-scrolled) .site-header__sub[data-group="results"], .site-header[data-subnav="about"]:not(.is-scrolled) .site-header__sub[data-group="about"] { opacity: 1; visibility: visible; } /* 2 — anything being pointed at or tabbed to closes all of them first */ .site-header:has(.site-header__link[data-opens]:hover) .site-header__sub, .site-header:has(.site-header__link[data-opens]:focus-visible) .site-header__sub, .site-header:has(.site-header__sub:hover) .site-header__sub, .site-header:has(.site-header__sub:focus-within) .site-header__sub { opacity: 0; visibility: hidden; } /* 3 — and only the one being pointed at opens */ .site-header:has(.site-header__link[data-opens="services"]:hover) .site-header__sub[data-group="services"], .site-header:has(.site-header__link[data-opens="services"]:focus-visible) .site-header__sub[data-group="services"], .site-header:has(.site-header__sub[data-group="services"]:hover) .site-header__sub[data-group="services"], .site-header:has(.site-header__sub[data-group="services"]:focus-within) .site-header__sub[data-group="services"], .site-header:has(.site-header__link[data-opens="results"]:hover) .site-header__sub[data-group="results"], .site-header:has(.site-header__link[data-opens="results"]:focus-visible) .site-header__sub[data-group="results"], .site-header:has(.site-header__sub[data-group="results"]:hover) .site-header__sub[data-group="results"], .site-header:has(.site-header__sub[data-group="results"]:focus-within) .site-header__sub[data-group="results"], .site-header:has(.site-header__link[data-opens="about"]:hover) .site-header__sub[data-group="about"], .site-header:has(.site-header__link[data-opens="about"]:focus-visible) .site-header__sub[data-group="about"], .site-header:has(.site-header__sub[data-group="about"]:hover) .site-header__sub[data-group="about"], .site-header:has(.site-header__sub[data-group="about"]:focus-within) .site-header__sub[data-group="about"] { opacity: 1; visibility: visible; } /* The group's own piece of the plate: from its first line to one past its last, so the blur ends on a line and not in the middle of a cell. */ .site-header__sub-plate { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * var(--line-step)); width: calc(var(--span) * var(--line-step) + var(--line-width)); background: var(--header-plate); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); } /* Figma "Line 39": 1px at y 62, i.e. the first pixel of this row, spanning exactly the group's columns. */ .site-header__sub-rule { position: absolute; top: 1px; height: var(--line-width); left: calc(var(--from) * var(--line-step)); width: calc(var(--span) * var(--line-step) + var(--line-width)); background: var(--line-color); z-index: 2; } /* The lines carry on down through the row — but only inside the group's own columns. They used to be drawn across all seven. On the page the line layer lies UNDER the sections, so a section's own fill hides it; this copy sits above the page instead, so every line outside the open panel was painted onto whatever content happened to be under the header — four loose verticals hanging off the bar to the left of the About panel, with no plate and no rule to belong to. Services never showed it because its panel starts at the first line and there is nothing to its left. The layer stays full width so the `--n` percentages still resolve against the same box as everywhere else; the clip is what limits what is painted, from the group's first line to the far edge of its last column. */ .site-header__sub-lines { z-index: 1; clip-path: inset( 0 max(0px, calc(100% - (var(--from) + var(--span)) * var(--line-step) - var(--line-width))) 0 calc(var(--from) * var(--line-step))); } .site-header__submenu { position: absolute; inset: 0; z-index: 3; } /* Macket: label baseline at y 76 within the 113 header, i.e. 15 into this row; same one-gutter offset from the line as the bar above. */ .site-header__subitem { position: absolute; top: 15px; left: calc(var(--n) * var(--line-step) + var(--layout-gutter)); pointer-events: auto; } /* Sentence case, Base Regular — the one place on the site where a menu label is not set in capitals. */ .site-header__sublink { white-space: nowrap; transition: color var(--t-fast); } .site-header__sublink[aria-current="page"], .site-header__sublink:hover, .site-header__sublink:focus-visible { color: var(--content-accent); } /* ===== footer.css ===== */ /* ========================================================================== Site footer — Figma symbol 152:1464, instance 966:8527. Load AFTER css/base.css. Full window width, 415 tall in the macket, Vista Blue 1. The fill is opaque, so it covers the page's vertical line layer — the macket shows no lines inside the footer. Vertical rhythm, read off the macket (footer top = 0): 50 logo, 15 tall 83 hairline, full working area 98 tagline | 50 Company / Services / Contact headings 134 social icons | 98 first link of each column 184 Barcelona office | 289 last link of the Services column 339 hairline 354 legal links and copyright 415 foot The right-hand link block starts level with the logo, so the first hairline crosses it. That is why the two halves are one grid with fixed rows rather than two stacked blocks: the rules span both columns while the link block spans the rows above and below the first of them. ========================================================================== */ .site-footer { background: var(--vista-blue-1); padding-block: var(--layout-margin); min-height: 415px; } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; /* logo band · hairline · body · hairline · bottom bar */ grid-template-rows: 33px var(--line-width) 255px var(--line-width) auto; } /* --- Logo --------------------------------------------------------------- */ .site-footer__logo { grid-column: 1; grid-row: 1; justify-self: start; } .site-footer__logo img { width: auto; height: 15px; } /* --- Hairlines ---------------------------------------------------------- */ .site-footer__rule { grid-column: 1 / -1; margin: 0; border: 0; height: var(--line-width); background: var(--rich-black-1); } .site-footer__rule--top { grid-row: 2; } .site-footer__rule--bottom { grid-row: 4; } /* --- Left half: tagline, socials, office -------------------------------- */ .site-footer__brand { grid-column: 1; grid-row: 3; } .site-footer__tagline { margin-top: 14px; } .site-footer__social { display: flex; align-items: center; gap: var(--layout-gutter); margin-top: var(--layout-gutter); } .site-footer__office { display: block; font-style: normal; margin-top: var(--layout-gutter); } .site-footer__office span { display: block; } /* --- Right half: three link columns ------------------------------------- Spans from the logo band down past the first hairline, exactly as in the macket. 169 wide each, 50 apart — two gutters. */ .site-footer__nav { grid-column: 2; grid-row: 1 / 4; align-self: start; display: flex; gap: calc(var(--layout-gutter) * 2); } .site-footer__col { display: flex; flex-direction: column; gap: 30px; width: 169px; } .site-footer__list { display: flex; flex-direction: column; gap: var(--layout-gutter); align-items: start; } /* --- Bottom bar --------------------------------------------------------- */ .site-footer__bottom { grid-column: 1 / -1; grid-row: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--layout-gutter); margin-top: 14px; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--layout-gutter); } .site-footer__copy { text-align: right; white-space: nowrap; } /* --- Links -------------------------------------------------------------- */ .site-footer a { transition: color var(--t-fast); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--content-accent); } /* --- The reduced footer — Figma `Footer_min` 917:7587, 1440 x 319 -------- Used by the two paid-traffic landing pages. Same brand block, same legal row, same hairline; the three site-map columns are replaced by "Contact" and two ways to reach us, and the second hairline is gone. Measured from the symbol: logo 50,50 · rule y 83 · tagline y 98 · social y 134 · office y 184 · legal row and copyright y 258. With the 50 page padding those become a 33 logo band, the rule, a 160 body and the bottom bar — 319 in total. */ .site-footer--min { min-height: 319px; } .site-footer--min .site-footer__grid { /* logo band · hairline · body · bottom bar */ grid-template-rows: 33px var(--line-width) 160px auto; } /* "Contact" sits on the logo's line, hard right. */ .site-footer--min .site-footer__contact { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; } /* WhatsApp and the address share the tagline's line, right aligned. */ .site-footer--min .site-footer__reach { grid-column: 2; grid-row: 3; justify-self: end; align-self: start; display: flex; gap: 50px; margin-top: 14px; } .site-footer--min .site-footer__reach a { transition: color var(--t-fast); } .site-footer--min .site-footer__reach a:hover, .site-footer--min .site-footer__reach a:focus-visible { color: var(--content-accent); } /* The bottom bar moves up one row, since there is no second hairline. */ .site-footer--min .site-footer__bottom { grid-row: 4; } /* ===== up.css ===== */ /* ========================================================================== Scroll-to-top control — `Button_form` 657:4075, macket 50,235 · 61 × 72. Load AFTER css/base.css. Fixed to the window at the page margin, at the same y the file draws it, so it sits in the empty strip left of the first vertical line and clear of the header. The label is set on its side reading bottom to top, which is what makes the box taller than it is wide. ========================================================================== */ .site-up { position: fixed; left: var(--layout-margin); /* The file draws this at y 235 — a static position on a page that does not scroll. As a floating control at the same coordinate it sits on top of whatever band happens to be passing: the Services list on the homepage runs its blue fill from the page margin, and the button covered the first row's line. So it keeps the file's x and moves to the foot of the window, out of the reading column and where a back-to-top control is looked for. */ bottom: var(--layout-margin); z-index: 11; /* over the header's 10 */ display: inline-flex; align-items: center; justify-content: center; padding: 25px; border: 0; background: var(--action-fill); color: var(--content-on-accent); box-shadow: inset 0 0 0 3px var(--action-fill); cursor: pointer; opacity: 0; transition: opacity var(--t-base) ease, background-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } /* `hidden` is removed by the script; `data-shown` is what fades it in, so the control is never a dead button and never a flash on load. */ .site-up[data-shown] { opacity: 1; } .site-up__label { writing-mode: vertical-rl; transform: rotate(180deg); /* reads bottom to top, as in the file */ white-space: nowrap; } /* pas → hov on Button_form: the fill empties, the amber stroke stays, and the box does not change size because the stroke is drawn inside. */ .site-up:hover, .site-up:focus-visible { background: var(--action-fill-hover); box-shadow: inset 0 0 0 3px var(--action-border-hover); } /* ===== consent.css ===== */ /* ========================================================================== Cookie consent banner — partials/consent.html, behaviour in js/track.js Not in the Figma file (added 2026-10-08). Everything here is a token or a type style the site already has: page ground, the 3 px Rich Black 1 rule, the Amber 4 action and ring, 15 px type, the 25 / 50 spacing steps. Desktop: copy left, three buttons right; the settings panel opens below across the full working area. Phone: one column, buttons share a row. The banner sits outside .page, so base.css's z-index pin (`.page > *` at 1, specificity 0,4,0) does not reach it and a plain number is enough. ========================================================================== */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 100vh; overflow-y: auto; background: var(--surface-page); border-top: 3px solid var(--border-strong); color: var(--content-primary); } .consent[hidden], .consent [hidden] { display: none !important; } .consent__inner { box-sizing: border-box; width: min(100%, var(--layout-reference)); margin-inline: auto; padding: 25px var(--layout-margin); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 50px; row-gap: 25px; } .consent__copy { display: grid; gap: 10px; max-width: 80ch; } .consent__title, .consent__text { margin: 0; } .consent__text { line-height: 1.5; } .consent__link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .consent__actions { display: flex; gap: 15px; } .consent__btn { min-width: 150px; min-height: 44px; padding: 0 25px; border: 3px solid var(--border-accent); border-radius: 0; background: transparent; font-family: inherit; color: var(--content-on-accent); cursor: pointer; transition: background-color var(--t-fast); } .consent__btn--fill { background: var(--action-fill); } .consent__btn--fill:hover { background: var(--action-fill-hover); } .consent__btn--line:hover { background: var(--action-fill); } .consent__btn--text { min-width: 0; padding: 0 10px; border-color: transparent; text-decoration: underline; text-decoration-color: var(--border-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; } .consent__btn--text:hover { border-color: var(--border-accent); } .consent__btn:focus-visible, .consent__box:focus-visible { outline: 3px solid var(--border-strong); outline-offset: 3px; } /* Settings panel: spans both columns under the copy and the buttons. */ .consent__panel { grid-column: 1 / -1; display: grid; gap: 15px; justify-items: start; padding-top: 25px; border-top: 1px solid var(--border-hairline); } .consent__row { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; max-width: 80ch; cursor: pointer; } .consent__label { display: grid; gap: 5px; line-height: 1.5; } .consent__box { width: 22px; height: 22px; margin: 0; accent-color: var(--amber-4); cursor: pointer; } .consent__box:disabled { cursor: default; } /* Phone: one column; the three buttons share the row. */ @media (max-width: 1023.98px) { .consent__inner { grid-template-columns: 1fr; row-gap: 15px; padding: 15px 25px calc(15px + env(safe-area-inset-bottom)); } .consent__actions { gap: 10px; } .consent__btn { flex: 1; min-width: 0; padding: 0 10px; } .consent__btn--text { flex: 0 0 auto; } .consent__panel { padding-top: 15px; } .consent__panel .consent__btn { width: 100%; } } /* ===== cases/case.css ===== */ /* ========================================================================== Author case study — the shared template behind case-yohansen.html, case-ikonnikova.html and case-kozachkova.html. Figma: "Author Stories_case_1" (649:3595), "_case_2" (799:7392) and "_case_3" (799:7657) on page Dekstop. The three screens are the same seven blocks in the same order with the same geometry; only the copy, the cover and the number of items inside three of the blocks differ. So the whole layout lives here once and each page ships markup only. This id has no `case.html` on purpose: it contributes styles alone. THE GRID. Every block is built out of the same four measures, and all of them are multiples of the 12-column grid (column 88.75, gutter 25): 1340 the working area, 12 columns — the band fills 1112 10 columns, the content box, inset 114 (a column and a gutter) 657 6 columns, the text column 430 4 columns, the label column and the book cover 316 3 columns, a Solution card So the content box is written once as a share of the working area and everything inside it is an `fr` ratio with the 25 gutter between, which keeps the sums exact at every width instead of drifting by a pixel or two as percentages do. VERTICAL RHYTHM. Measured on all three screens: 150 between every pair of blocks and 100 above the footer — the numbers `base.css` already carries — and 150 under the header, which is the one departure and is written on the first section in the markup. ========================================================================== */ /* --- The shared measures ------------------------------------------------- */ /* The 10-column content box, centred in the working area. 114 of air each side is one column plus one gutter, which is why the bands below use the same number as padding and land on the same box. */ .s-case__inner { width: 82.98507%; /* 1112 / 1340 */ margin-inline: auto; } /* Label 430 + gutter + text 657 = 1112. Used by The challenge, Holding and Our solution, which are the same two-column row three times. */ .s-case__row { display: grid; grid-template-columns: 430fr 657fr; gap: var(--layout-gutter); align-items: start; } /* A block whose fill runs the whole working area. The padding is a share of this box — which is the container, 1340 — so the content inside is the same 1112 box as everywhere else. It must sit INSIDE .container: percentage padding resolves against the parent's width, and .container's parent is the page, not the working area. */ .s-case__band { padding: 100px 8.50746%; /* 114 / 1340 */ } .s-case__band--brand { background: var(--vista-blue-1); } /* --- 1. Hero ------------------------------------------------------------ Figma 790:7108 / 799:7414 / 799:7679, 1112 x 655.213. Cover 430 x 609 on the left, the words 657 on the right, and the link back to the index 25 under both. The cover is the taller of the two, so it is the cover that gives the block its height. */ .s-case-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--layout-gutter); } .s-case-hero__row { width: 100%; display: grid; grid-template-columns: 430fr 657fr; gap: var(--layout-gutter); align-items: start; } .s-case-hero__cover { width: 100%; height: auto; } /* The segment tag sits at the top of the column and the title group 150 below it; inside that group the lede is 75 under the name lockup. */ .s-case-hero__words { display: flex; flex-direction: column; gap: 150px; } .s-case-hero__intro { display: flex; flex-direction: column; gap: 75px; } /* The author's name in Comforter lies over the Mulish book title: both in one grid cell, the name at the top of the cell and the title 50 down. Both are trimmed to the cap height, so 50 is the macket offset exactly, and the name is second in the markup so it paints over the title. */ .s-case-hero__lockup { display: grid; font: inherit; } .s-case-hero__lockup > * { grid-area: 1 / 1; width: 100%; } .s-case-hero__title { margin-top: 50px; } .s-case-hero__author { color: var(--content-accent); } /* Back to the index. Component Button_text with Main_S11_Arrows (115:578) in front of it: variant Pas draws the chevron and the label in Rich Black 1, variant Hov turns both Amber 4. The chevron is the shared `icon-arrow-prev` cut, used as a mask so its colour comes from the token and follows the label's through currentColor. */ .s-case-hero__back { display: inline-flex; align-items: center; gap: var(--layout-gutter); color: var(--content-primary); transition: color var(--t-fast) ease; } .s-case-hero__back:hover, .s-case-hero__back:focus-visible { color: var(--content-accent); } .s-case-hero__back-icon { flex: 0 0 auto; width: 13px; /* 12.728 rendered */ height: 21px; /* 21.213 rendered */ background: currentColor; -webkit-mask: url("../assets/icon-arrow-prev.png") no-repeat center / contain; mask: url("../assets/icon-arrow-prev.png") no-repeat center / contain; } /* --- 2. The challenge --------------------------------------------------- Figma 790:7116 / 799:7427 / 799:7692. Nothing but the shared row. */ /* --- 3. What was holding them back -------------------------------------- Figma 790:7146 / 799:7430 / 799:7695, the working area filled Vista Blue 1 with 100 of air above and below the 1112 box. The numbered items are 50 apart; inside one, the number is a column wide and right-aligned and the sentence five columns — 89 + 25 + 543 = 657. */ .s-case-holding__list { display: flex; flex-direction: column; gap: 50px; } .s-case-holding__item { display: grid; grid-template-columns: 89fr 543fr; gap: var(--layout-gutter); align-items: start; } .s-case-holding__num { text-align: right; color: var(--content-accent); } /* --- 4. Our solution ---------------------------------------------------- Figma 790:7180 / 799:7450 / 799:7715. The shared row, then the cards 50 below it, right-aligned under the text column: two of 316 with the gutter between, as many rows as the case has cards (two on screens 1 and 3, three on screen 2, where the fifth card sits alone). */ .s-case-solution__inner { display: flex; flex-direction: column; gap: 50px; } .s-case-solution__cards { width: 59.08273%; /* 657 / 1112 */ margin-left: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--layout-gutter); } /* Solution_card (799:7191 Pas / 799:7190 Hov): 316 x 204, 50 of padding and a 3px stroke that is Rich Black 3 passive and Amber 4 on hover. The stroke is drawn inset rather than as a border because Figma's stroke does not take part in the layout: an inset shadow keeps the content box at the macket's 216 x 104. 204 is a floor, not a fixed height — below the reference width the sentence takes another line and the card grows instead of spilling out of itself. */ .s-case-solution__card { display: flex; flex-direction: column; gap: var(--layout-gutter); min-height: 204px; padding: 50px; box-shadow: inset 0 0 0 3px var(--rich-black-3); transition: box-shadow var(--t-base) ease; } .s-case-solution__card:hover, .s-case-solution__card:focus-within { box-shadow: inset 0 0 0 3px var(--amber-4); } .s-case-solution__num { color: var(--content-accent); } /* --- 5. The results ----------------------------------------------------- Figma 799:7279 / 799:7459 / 799:7725. The second Vista Blue 1 band. "the results" in Comforter over "her book", 56 of air under the pair, then the rows: page-ground plates, 25 apart, 59 of padding on the left so the number hangs in its own column. */ .s-case-results__head { display: grid; width: 59.08273%; /* 657 / 1112 */ font: inherit; } .s-case-results__head > * { grid-area: 1 / 1; width: 100%; } .s-case-results__title { margin-top: 50px; } .s-case-results__script { color: var(--content-accent); } .s-case-results__list { margin-top: 56px; display: flex; flex-direction: column; gap: var(--layout-gutter); } .s-case-results__item { display: flex; align-items: flex-start; gap: var(--layout-gutter); padding: 25px 25px 25px 59px; background: var(--editorial-white-4); } .s-case-results__num { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--content-accent); } /* --- 6. In their own words ---------------------------------------------- Figma 799:7297 / 799:7485. A Rich Black 3 band, 50 of air above and below. The row is 1127 wide — fifteen more than the content box, which is what the macket draws — so it is placed by its own left offset rather than by the band's padding: 341 label, 49, the opening mark, 25, and the words take what is left, which is 657 at the reference. */ .s-case-quote__band { padding-block: 50px; background: var(--rich-black-3); } .s-case-quote__inner { width: 84.10448%; /* 1127 / 1340 */ margin-left: 8.50746%; /* 114 / 1340 */ display: flex; align-items: flex-start; } .s-case-quote__label { flex: 0 0 auto; width: 30.25732%; /* 341 / 1127 */ } .s-case-quote__body { flex: 1 1 auto; margin-left: 4.34783%; /* 49 / 1127 */ display: flex; align-items: flex-start; gap: var(--layout-gutter); min-width: 0; } .s-case-quote__mark { flex: 0 0 auto; } .s-case-quote__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 50px; } .s-case-quote__by { color: var(--vista-blue-1); } /* --- 7. Your expertise deserves a book like this ------------------------ Figma 799:7389 / 799:7493 / 799:7755. "Your" in Comforter over the two-line heading, 100 of air, then the two Button_form instances centred on the content box. */ .s-case-cta__inner { display: flex; flex-direction: column; gap: 100px; } .s-case-cta__lockup { display: grid; font: inherit; } .s-case-cta__lockup > * { grid-area: 1 / 1; width: 100%; } .s-case-cta__title { margin-top: 50px; } .s-case-cta__script { color: var(--content-accent); } .s-case-cta__actions { display: flex; align-items: center; justify-content: center; gap: var(--layout-gutter); } /* Button_form, prop=pas → prop=hov: the filled button drops its fill and keeps the amber stroke; the outlined one moves its stroke from Rich Black 1 to the accent, which is the same change read the other way round. 22 of padding plus the 3px stroke is the macket's 25, and the pair comes out 61 tall. */ .s-case-cta__button { display: inline-flex; align-items: center; justify-content: center; padding: 22px; border: 3px solid var(--action-fill); background: var(--action-fill); color: var(--content-on-accent); white-space: nowrap; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; } .s-case-cta__button:hover, .s-case-cta__button:focus-visible { background: var(--action-fill-hover); border-color: var(--action-border-hover); } .s-case-cta__button--ghost { border-color: var(--border-strong); background: var(--action-fill-hover); color: var(--content-primary); } .s-case-cta__button--ghost:hover, .s-case-cta__button--ghost:focus-visible { border-color: var(--action-border-hover); } /* ===== m-base.css ===== */ /* ========================================================================== Mobile foundation — Figma page "Mobile", hand-off document v1.0. Load AFTER every desktop stylesheet. See CONTRACT_MOBILE.md. The whole file is one media query. Below 1024 this layer overrides the desktop layer; at 1024 and up not a single rule here applies, so the desktop layout is untouched byte for byte. Why an overlay rather than two wrapped halves: the desktop CSS is live and already verified. Wrapping it would rewrite every one of its rules to prove a layout that is not changing. This way the desktop bytes stay as they are and the mobile layer states only its differences. ========================================================================== */ @media (max-width: 1023.98px) { /* --- 3.1 Grid --------------------------------------------------------- 402 reference · 6 columns · Stretch · margin 25 · gutter 25 Working area 352. Column 37.83 is derived and written nowhere. */ :root { --m-reference: 402px; --m-margin: 25px; --m-gutter: 25px; --m-content: 352px; /* at the reference width */ --m-max: 430px; /* the column stops growing here (3.2) */ /* 4. Three gaps carry 94 % of 3 010 Auto Layout nodes. */ --m-gap-tight: 10px; --m-gap-mid: 15px; --m-gap: 25px; --m-gap-block: 50px; --m-gap-big: 75px; /* 9.1 Header: logo at y 59, rule at y 89. */ --m-header-h: 89px; /* 5.2 Touch targets grow from the centre toward this. */ --m-tap: 44px; } /* --- 3.2 Reflow ------------------------------------------------------- The desktop floor is 1200 and it is what puts a horizontal scrollbar on a phone. Below the breakpoint there is no floor: the page is as wide as the window and never wider. */ body { min-width: 0; overflow-x: clip; } /* Working area. Below 430 it stretches with the window and the 25 margins hold; above 430 it stops at 380 and centres, and the window fills with the page ground. Nothing scales — sizes and spacing are the macket's. */ .container { width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2)); margin-inline: auto; } /* 6 columns, not 12. A block that asked for the desktop grid gets the mobile one without having to know which layer it is in. */ .grid12 { grid-template-columns: repeat(6, 1fr); gap: var(--m-gutter); } /* --- Intent tags ------------------------------------------------------ `flow` on mobile is a single column: two 430-basis children side by side cannot fit 352. Bleed keeps its meaning — the full window, which above 430 is wider than the column. */ .is-flow { display: block; } .is-flow > * + * { margin-top: var(--m-gap); } .is-bleed-left, .is-bleed-right, .is-bleed-both, .m-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; } /* --- 3.1 Background lines --------------------------------------------- Unlike desktop, where the line layer spans the page, `BackgroundLines` on mobile is 352 wide and starts below the header — it lives inside the working area. The desktop layer's seven lines at 12.5 % of the window are wrong here and are switched off; each screen draws its own set inside its own container. */ .page > .gridlines { display: none; } /* --- 5.6 Touch targets ------------------------------------------------ The area grows from the centre of the element toward 44 on each axis, independently, and never moves or resizes what is drawn. Where a neighbour is closer than 44, the block sets --tap-h (or --tap-w) to twice the half-gap for EVERY item in that row, so the row is even under the thumb (5.3). ::after and not padding: padding would move the element. */ .m-tap { position: relative; } .m-tap::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, var(--tap-w, var(--m-tap))); height: max(100%, var(--tap-h, var(--m-tap))); } /* An indicator is not a target: carousel dots and arrows show that more exists, they do not move anything (5.7). */ .m-indicator { pointer-events: none; } /* --- 7 Type ----------------------------------------------------------- Eleven of the twelve mobile styles are the desktop values unchanged — the 15 and 25 sizes are the same file-wide. Only the Comforter accent differs, and it differs by half: 50 on mobile against 100 on desktop. The styles are named "… Mobile" in Figma for exactly this reason. */ .t-heading-accent, .t-heading-accent-small { font-size: 50px; } /* 7.2 The one style with no desktop counterpart: the numeral on the error page. 500 is the size, not a typo. */ .t-404 { font-family: "Comforter", cursive; font-weight: 400; font-size: 500px; letter-spacing: 0.05em; } /* --- 3.2 Long pages --------------------------------------------------- Screens run to 14 382. Smooth anchor scrolling has to clear the pinned header or the target lands underneath it. */ :target { scroll-margin-top: calc(var(--m-header-h) + var(--m-gap)); } } /* ========================================================================== Layer switch. A page carries both sets of blocks; each layer hides the other's. The mobile blocks are marked `is-m` by the screen that writes them; everything else in
    is the desktop layer. The second query is the only rule in this file that applies at 1024 and up, and it can only hide blocks that a desktop-only build never emits — so the desktop layer is still untouched. ========================================================================== */ @media (max-width: 1023.98px) { .page > main > section:not(.is-m) { display: none; } .page > main > .is-m + .is-m { margin-top: var(--gap-m, var(--m-gap-big)); } .page > main > .is-m:first-child { margin-top: 0; } } @media (min-width: 1024px) { .page > main > .is-m { display: none; } } /* ===== m-header.css ===== */ /* ========================================================================== Mobile header and menu — Figma `Menu_mob` 1244:11197. Inside the mobile media query; nothing here exists at 1024 and up. ========================================================================== */ @media (max-width: 1023.98px) { /* The desktop header and its three sub-rows do not appear on a phone: the mobile menu is an overlay with its own, flatter list. */ .page > .site-header { display: none; } .m-header[hidden] { display: block; } /* `hidden` is for the no-CSS case */ .m-header { position: sticky; top: 0; z-index: 10; height: var(--m-header-h); /* 89 — the rule sits on the edge */ } .page > .m-header { position: sticky; z-index: 10; } /* 8. The one effect in the whole mobile version. */ .m-header__plate { position: absolute; inset: 0; z-index: 0; background: var(--header-plate); -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur)); } /* Logo at 25,59. Its touch area reaches 44 on the vertical — the room is there, and nothing else is near it. */ .m-header__logo { position: absolute; z-index: 2; left: var(--m-margin); top: 59px; --tap-w: 107px; } .m-header__logo img { width: auto; height: 15px; } /* The button at 332,49 is 70 × 40 in the file: wide enough across, four pixels short down. The area takes the full 44 on both axes; the nearest other target is the logo, 200 away. */ .m-header__toggle { position: absolute; z-index: 2; right: var(--m-margin); top: 49px; width: 45px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; } /* Three bars drawn in CSS, as the file draws them — not an exported icon. */ .m-header__bars, .m-header__bars::before, .m-header__bars::after { display: block; width: 20px; height: 2px; background: var(--content-primary); } .m-header__bars { position: relative; } .m-header__bars::before, .m-header__bars::after { content: ""; position: absolute; left: 0; } .m-header__bars::before { top: -6px; } .m-header__bars::after { top: 6px; } /* Line 54 at y 89, 352 wide — inside the working area, not edge to edge. */ .m-header__rule { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100% - var(--m-margin) * 2, calc(var(--m-max) - var(--m-margin) * 2)); margin: 0; border: 0; border-top: var(--line-width) solid var(--line-color); } /* --- The overlay ------------------------------------------------------ 402 × 830 in the file, anchored under the header. On a real phone it takes the window, because a fixed height would leave the page showing under it on a tall screen and cut the buttons off on a short one. */ .page > .m-header { position: sticky; z-index: 10; } .page > .m-menu { position: fixed; z-index: 20; } .m-menu { position: fixed; inset: 0; z-index: 20; background: var(--surface-page); overflow-y: auto; overscroll-behavior: contain; } .m-menu[hidden] { display: none; } .m-menu__inner { display: flex; flex-direction: column; min-height: 100%; padding-block: 49px var(--m-gap-block); } /* Close at 332,0 · 45 × 40 with a 20 × 20 glyph, then the rule at y 40. */ .m-menu__head { position: relative; height: 40px; } .m-menu__close { position: absolute; right: 0; top: 0; width: 45px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; } .m-menu__close span, .m-menu__close span::before, .m-menu__close span::after { display: block; } .m-menu__close span { position: relative; width: 20px; height: 20px; } .m-menu__close span::before, .m-menu__close span::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: var(--content-primary); } .m-menu__close span::before { transform: rotate(45deg); } .m-menu__close span::after { transform: rotate(-45deg); } .m-menu__rule, .m-menu__list li + li { border: 0; border-top: var(--line-width) solid var(--line-color); } .m-menu__rule { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; } /* Nine items on a 41 step: the label sits 15 below its own rule, the row is 26 tall. 41 between centres is under 44, so by 5.2 every area takes half the gap on each side — 41 — and by 5.3 every item in the list takes the same one, so the first and last are not larger than the rest. */ .m-menu__list { margin-top: var(--m-gap); } .m-menu__list li { padding-bottom: 15px; } /* 15 above the label and 15 below gives a 42 step, not the file's 41: in Figma the rule is a zero-height line, in CSS it is a real pixel. The padding above absorbs it so the step lands on 41 exactly. */ .m-menu__list li + li { padding-top: 14px; } .m-menu__list a { display: block; --tap-h: 41px; } /* The two calls to action and the address, at the foot of the overlay. `margin-top: auto` pins them down however tall the window is, which is what the file's fixed 646 does on a 830 frame. */ .m-menu__foot { margin-top: auto; padding-top: var(--m-gap-big); display: grid; justify-items: center; gap: var(--m-gap-mid); } .m-menu__foot .m-btn { display: grid; place-items: center; width: 253px; max-width: 100%; height: 41px; text-align: center; } .m-menu__foot .m-btn--fill { background: var(--action-fill); color: var(--content-on-accent); } .m-menu__foot .m-btn--line { box-shadow: inset 0 0 0 3px var(--border-strong); color: var(--content-primary); } .m-menu__mail { margin-top: calc(var(--m-gap-block) + 6px); } .m-menu__mail a { --tap-h: 44px; } /* While the overlay is open the page underneath does not scroll. */ body.is-m-menu-open { overflow: hidden; } } /* The mobile chrome exists in the markup at every width; only the media query keeps it off the desktop layer. `hidden` is removed by the script as soon as it runs, so without this the header renders twice above 1024. */ @media (min-width: 1024px) { .m-header, .m-menu, .m-footer { display: none !important; } } /* ===== m-footer.css ===== */ /* ========================================================================== Mobile footer — Figma `Footer_m` 1774:15900, 402 × 449. Inside the mobile media query; nothing here exists at 1024 and up. ========================================================================== */ @media (max-width: 1023.98px) { .page > .site-footer { display: none; } .m-footer[hidden] { display: block; } /* The file leaves 75 between the last block and the footer. The desktop layer sets its own gap on .site-footer, which is hidden down here, so this one has to be stated. */ .page > .m-footer { margin-top: var(--m-gap-big); } .m-footer { background: var(--surface-brand); color: var(--content-on-brand); text-align: center; } /* The block runs edge to edge; the content keeps the 25 margins. */ .m-footer__inner { padding-block: var(--m-gap) var(--m-gap-block); } .m-footer__logo { display: inline-block; --tap-h: 44px; --tap-w: 107px; } .m-footer__logo img { width: auto; height: 15px; } /* Three groups. The file sets them 10 apart, not 25: `Frame 481` runs logo 15 · 10 · group 169 · 10 · group 62 · 10 · group 98 = 374, which with the 25 above and 50 below is the footer's 449. The 25 that stood here was what made the block 46 too tall on all 37 screens. */ .m-footer__group { margin-top: var(--m-gap-tight); } .m-footer__rule { margin: 0 0 var(--m-gap-mid); border: 0; border-top: var(--line-width) solid var(--content-on-brand); } /* Two lines, 30 tall in the file: 11 a line on a 19 step. */ .m-footer__tagline { margin-inline: auto; max-width: 30ch; line-height: 19px; } /* Three marks on a 50 step: 50 between centres clears 44, so each area is the full 44 × 44 and they still do not touch. */ .m-footer__social { display: flex; justify-content: center; gap: 25px; margin-top: var(--m-gap); } .m-footer__social a { display: block; } /* `text-box-trim` only takes effect on a block box: a bare inside a grid is still inline, the trim is ignored, and the line keeps its full leading. Every trimmed label here is blockified for that reason — the same trap that put 202px of drift into the FAQ. Figma writes the three address lines on an 18 step from a 49-tall box. */ .m-footer__office span { display: block; } .m-footer__office { display: grid; gap: 7px; margin-top: var(--m-gap); font-style: normal; } /* 5.3 — one row, one size. The step is 36 in the file, so every link in both lists takes a 36 band: the rows stay even under the thumb and no two areas meet. This is the floor the contract records at §5.4. */ .m-footer__reach, .m-footer__legal { display: grid; gap: 25px; } /* `block`, not `inline-block`: an inline-block still sits in a line box, so the
  • keeps the full leading even after the label itself is trimmed and the row measures 19 where the file measures 11. */ .m-footer__reach a, .m-footer__legal a { display: block; --tap-h: 36px; } .m-footer__legal a { color: var(--content-on-inverse); } } /* ===== m-up.css ===== */ /* ========================================================================== Mobile "up" control — Figma `Button_form` 41 × 52, drawn at 25,143 on all 37 screens. Contract §9.2. ========================================================================== */ @media (max-width: 1023.98px) { /* The desktop control is 61 × 72 and sits at the desktop margin; the mobile one is its own size at its own place, so the shared element is restyled rather than duplicated. */ .site-up { position: relative; } .site-up::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, var(--tap-w, var(--m-tap))); height: max(100%, var(--tap-h, var(--m-tap))); } .site-up { position: fixed; left: var(--m-margin); bottom: var(--m-margin); padding: 0; width: 41px; height: 52px; /* 5.5 — three pixels short across. The room is there: the nearest other target is the footer, and on a scrolled page nothing sits beside it. */ --tap-w: 44px; --tap-h: 52px; } /* The file draws it at y 143, under the header. As a floating control it keeps the file's x and moves to the foot of the window, out of the reading column — the same decision as on desktop, and for the same reason: at 143 it would sit on whatever band is passing under it. */ .site-up__label { font-size: 15px; } } /* ===== cases/casem.css ===== */ /* ========================================================================== Author case study, mobile — the shared template. Figma page "Mobile": `Author Stories_case_1_m` 1515:9654 (402 x 4118), `_case_2_m` 1515:10639 (402 x 4067), `_case_3_m` 1515:11114 (402 x 3724). The three screens are one layout with three sets of copy — the same seven blocks, the same sizes, only the card counts and the sentences differ. So this file is CSS only, with no `casem.html` beside it, and each page names it first in its own `sectionsMobile` list. That is the arrangement the desktop half of this folder already uses for `case`; see `order.txt`. Blocks, and where the file puts them (y measured on the 402 macket, from the top of the frame; the header rule sits at 89 and `Sections` opens at 139, so the first block stands 50 under the rule and every pair after it is 75 apart — the footer included): 1 hero cover, "All results", the name over the title, the lede 2 challenge heading + paragraph 3 holding Vista Blue 1 band, full window 4 solution heading + paragraph, then the stroked cards 5 results the second Vista Blue 1 band, page-ground plates on it 6 quote Rich Black 3 band, full window 7 cta the closing lockup and the two buttons Case 3 ships six of the seven: its quote band carries a placeholder string rather than an approved quote, so the block is left out and `c3m6` is held free for it. See the note in `c3m5.html`. The whole file is one media query. Below 1024 it is the layout; at 1024 and up not one rule here applies and the desktop layer in `case.css` is untouched. ========================================================================== */ @media (max-width: 1023.98px) { /* ====================================================================== Shared vocabulary (cam- : case mobile) ====================================================================== */ /* The 3px stroke of `Button_form` and of the solution card. Both are the file's one stroke weight, so it is named once rather than typed three times. */ :root { --m-stroke: 3px; } /* --- The heading lockup — Figma `Group 89` ---------------------------- Comforter 50 and Mulish 25 share one cell and the script is drawn over the word. The group is as tall as whichever is taller: the word's two wrapped lines on the hero and the CTA (64), the script's own cap height where the word is a single line (38, on "her book"). The word hangs 15 below the top of the group. Its inset from the left is 0 on the hero and 6 on the results head and the CTA, which is what the 10 % tracking on the word's last letter gives back — so it is a variable with a zero default. Both spans are grid items, which blockifies them: `u-trim` does nothing on an inline box, and a `t-` class on an inline span is exactly the 8px-too-tall bug the FAQ paid for. */ .cam-lockup { display: grid; font: inherit; text-align: center; } .cam-lockup__line { display: grid; } .cam-lockup__line > * { grid-area: 1 / 1; } .cam-lockup__word { margin-top: var(--m-gap-mid); margin-left: var(--cam-lockup-inset, 0px); } .cam-lockup__script { color: var(--content-accent); } /* --- A heading over its paragraph, 15 apart -------------------------- `The challenge` 1515:10161 and the `Header` of `Solution` 1515:10197 are the same two rows. */ .cam-stack { display: flex; flex-direction: column; gap: var(--m-gap-mid); } /* --- A full-window band ---------------------------------------------- `Holding`, `Results` and `Quote` are 402 wide — the whole window — with 25 of padding on every side. The 25 across is the working area's own margin and comes from `.container` inside; only the 25 above and below is written here. `m-bleed` in the markup takes the band out of the column so it keeps reaching the window edges above 430. */ .cam-band { padding-block: var(--m-gap); } .cam-band--brand { background: var(--surface-brand); color: var(--content-on-brand); } /* The quote band is the one place on these screens that Rich Black 3 is a surface rather than a hairline. */ .cam-band--quote { background: var(--rich-black-3); color: var(--content-primary); } /* --- A numbered card -------------------------------------------------- The solution cards (`Frame 280` 1515:10201) and the results plates (1515:10273) are one box with two settings: 25 of padding, the number 15 above the sentence. The solution card adds a 3px stroke and no fill; the results plate adds the page ground and no stroke. Their 112 and 106 differ by exactly the two 3px edges. */ .cam-card { display: flex; flex-direction: column; gap: var(--m-gap-mid); padding: var(--m-gap); min-width: 0; } .cam-card--stroked { border: var(--m-stroke) solid var(--border-hairline); } .cam-card--plate { background: var(--surface-page); color: var(--content-primary); } .cam-card__num { color: var(--content-accent); } /* --- `Button_form`, 61 tall ------------------------------------------ 25 of padding over the label's 11 cap height. The stroke is drawn inside the 61, so 22 of padding plus the 3px edge is the macket's 25 — the same reading the desktop layer takes. The filled button carries the accent on both fill and edge, which is how the file draws it. No hover: contract §9. The file holds a Hov variant for this component and it is not built. */ .cam-btn { display: flex; align-items: center; justify-content: center; padding: calc(var(--m-gap) - var(--m-stroke)); border: var(--m-stroke) solid var(--action-fill); background: var(--action-fill); color: var(--content-on-accent); text-align: center; } .cam-btn--ghost { border-color: var(--border-strong); background: transparent; color: var(--content-primary); } /* 3.2 Reflow. The macket is drawn at 402, where both labels sit on one line. At 320 the working area is 270 and "Start the Discovery Sprint" no longer fits, so it wraps and the button grows — which is what `Button_form` does with a two-line label anyway. Nothing truncates and nothing scales. The label is a flex item, so it is a block box and `u-trim` bites. */ .cam-btn > span { min-width: 0; } /* ====================================================================== 1. Hero — `Section 1` 1515:10164 / 1515:10647 / 1515:11122, 352 x 578 picture 276 x 391, centred in the 352, the 595 x 842 page block of a printed book back link 15 under it, right-aligned to the picture head 48 under the picture group: the lockup, then the lede 15 below it, both centred 48 and not the rhythm's 50: it is the gap the file's own Auto Layout carries on this frame, and the seven block tops below depend on it. ====================================================================== */ .s-cam1 { display: flow-root; } /* --- 3.1 Background lines -------------------------------------------- `BackgroundLines` 1515:9655 / 1515:10640 / 1515:11115: four lines at 0, 33.33, 66.67 and 100 per cent of the working area — Figma x 25 · 142.33 · 259.67 · 377 on the 402 macket — starting under the header and running the length of the screen. Unlike desktop, the layer is 352 wide and sits inside the working area, so it cannot come from the page's own `.gridlines`, which `m-base.css` switches off down here. One layer is drawn for the whole screen and positioned against
    , which `base.css` has already made the nearest positioned ancestor. It lives in block 1 because that is the block that always exists. */ .s-cam1__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .s-cam1__lines > .container { position: relative; height: 100%; } .s-cam1__lines i { position: absolute; top: 0; bottom: 0; width: var(--line-width); background: var(--line-color); } .s-cam1__lines i:nth-child(1) { left: 0; } .s-cam1__lines i:nth-child(2) { left: 33.333%; } .s-cam1__lines i:nth-child(3) { left: 66.667%; } .s-cam1__lines i:nth-child(4) { right: 0; } /* `Frame 564`: 276 of the 352, centred, its two rows 15 apart and pushed to the right edge of the picture. 78.40909 % is 276 / 352, so the group keeps its share of the working area as the window narrows. */ .s-cam1__art { width: 78.40909%; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--m-gap-mid); } .s-cam1__cover { width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: cover; } /* --- 5.7 One link, one area ------------------------------------------- The chevron and the words go to the same place, so they are one and one area on its bounds — not two. The row is about 118 x 15; `m-tap` takes the height to 44 and leaves the width alone, and the nearest other target is the header, 400 above. Nothing moves: the area is transparent and drawn from the centre. */ .s-cam1__back { display: flex; align-items: center; gap: var(--m-gap-mid); color: var(--content-primary); } /* `Main_S11_Arrows` Pas, 1244:9841 — the same cut the desktop pages use, drawn as a mask over `currentColor` so the chevron can never drift from the label beside it. The file's frame is 8 wide and clips the glyph, so the mask is sized from its height and centred rather than contained. */ .s-cam1__back-icon { flex: 0 0 auto; width: 8px; height: 15px; background: currentColor; -webkit-mask: url("../assets/icon-arrow-prev.png") no-repeat center / auto 15px; mask: url("../assets/icon-arrow-prev.png") no-repeat center / auto 15px; } .s-cam1__head { margin-top: 48px; text-align: center; } .s-cam1__lede { margin-top: var(--m-gap-mid); } /* ====================================================================== 2. The challenge — 1515:10161 / 1515:10658 / 1515:11133 Nothing but the shared two-row stack. ====================================================================== */ /* ====================================================================== 3. What was holding them back — `Holding` 1515:10183 / 1515:10661 / 1515:11136, 402 x 420 (382 on case 3). heading Intro Black Wide, up to two lines list 50 under it, items 25 apart item the number in a 38 column, right-aligned and Amber 4, then 25, then the sentence in the remaining 289 ====================================================================== */ .s-cam3__inner { display: flex; flex-direction: column; gap: var(--m-gap-block); } .s-cam3__list { display: flex; flex-direction: column; gap: var(--m-gap); } /* 38 + 25 + 289 = 352. Written as shares so the two columns keep their proportions when the working area narrows to 270 at 320. */ .s-cam3__item { display: grid; grid-template-columns: 38fr 289fr; gap: var(--m-gutter); align-items: start; } .s-cam3__num { text-align: right; color: var(--content-accent); } /* ====================================================================== 4. Our solution — `Solution` 1515:10228 / 1515:10677 / 1515:11152. The shared stack, then the cards 25 below it, 15 apart. ====================================================================== */ .s-cam4__inner { display: flex; flex-direction: column; gap: var(--m-gap); } .s-cam4__cards { display: flex; flex-direction: column; gap: var(--m-gap-mid); } /* ====================================================================== 5. The results — `Results` 1515:10294 / 1515:10702 / 1515:11182. The second Vista Blue 1 band: the lockup, then 25, then the plates 15 apart. The head is one line of Mulish under the script, so the group is 38 rather than the hero's 64. ====================================================================== */ .s-cam5__inner { display: flex; flex-direction: column; gap: var(--m-gap); } .s-cam5__head { --cam-lockup-inset: 6px; } .s-cam5__list { display: flex; flex-direction: column; gap: var(--m-gap-mid); } /* ====================================================================== 6. In their own words — `Quote` 1515:10569 / 1515:10734. A Rich Black 3 band: the mark, the words and the name, 50 apart. ====================================================================== */ .s-cam6__inner { display: flex; flex-direction: column; gap: var(--m-gap-block); } .s-cam6__words { min-width: 0; } /* The opening mark is the one text node on these screens bound to no style in the file — the twelve mobile styles stop at 50 and the file draws this glyph at 75, Mulish Regular, Amber 4. The colour comes from the token and the family and weight from the body; the size is the file's measurement and is written here, next to the note that says why. Same reading as the Author Stories index, `results/m3.css`. */ .s-cam6__mark { font-weight: 400; font-size: 75px; color: var(--content-accent); } .s-cam6__by { color: var(--vista-blue-1); } /* ====================================================================== 7. Your expertise deserves a book like this — `CTA` 1515:10570 / 1515:10739 / 1515:11214, 352 x 226. lockup "Your" in Comforter over the two forced lines of Mulish button 25 under the lockup, the full 352 button 15 under the first, also the full 352 The two buttons are a column of like elements: their centres are 76 apart, so each takes the full 44 x 44 and, being 352 x 61 already, the area changes nothing (§5.2, §5.3). ====================================================================== */ .s-cam7__inner { display: flex; flex-direction: column; gap: var(--m-gap-mid); } .s-cam7__head { display: flex; flex-direction: column; gap: var(--m-gap); } .s-cam7__title { --cam-lockup-inset: 6px; } }