/* ───────────────────────────────────────────────────────────────────────────── OCALLY · base.css: the one design system every page is built from. Loaded first on every page. 1. tokens colour, type roles, rhythm, lifts 2. elements the page defaults 3. components buttons, text links, labels, Kai's notes, questions 4. the top bar and the footer Page stylesheets use these tokens and never redefine them. A new size, colour or shadow is added here, with its purpose, or not at all. Drawings and the phone mockups (sized in container units) keep their own scale inside the frame; the type families and colours still come from here. ───────────────────────────────────────────────────────────────────────────── */ /* ── the three families, served from this origin: the files Google Fonts serves, cut by tools/fonts.py into the characters the site prints (core, preloaded by the head for the first screen: components/v4/fonts.html) and the rest of the latin range (rest, only fetched by a page that uses one of them), declared weight by weight with Google's ranges and display. Glyphs, metrics and kerning are the originals', so every weight renders exactly as before. Each file name carries its version and its cut, so the files are cached for a year; regenerate with the tool. */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-grotesk-v22-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-grotesk-v22-rest-1.woff2) format('woff2'); unicode-range: U+000D, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+200B, U+2215; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-grotesk-v22-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/space-grotesk-v22-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/space-grotesk-v22-rest-1.woff2) format('woff2'); unicode-range: U+000D, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+200B, U+2215; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/space-grotesk-v22-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/space-grotesk-v22-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/space-grotesk-v22-rest-1.woff2) format('woff2'); unicode-range: U+000D, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+200B, U+2215; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/space-grotesk-v22-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-grotesk-v22-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-grotesk-v22-rest-1.woff2) format('woff2'); unicode-range: U+000D, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+200B, U+2215; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-grotesk-v22-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-rest-1.woff2) format('woff2'); unicode-range: U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2215; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-rest-1.woff2) format('woff2'); unicode-range: U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2215; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-rest-1.woff2) format('woff2'); unicode-range: U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2215; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/assets/fonts/hanken-grotesk-v12-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-mono-400-v17-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-mono-400-v17-rest-1.woff2) format('woff2'); unicode-range: U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2215; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/space-mono-400-v17-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-mono-700-v17-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-mono-700-v17-rest-1.woff2) format('woff2'); unicode-range: U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2215; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: block; src: url(/assets/fonts/space-mono-700-v17-core-1.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212; } :root { /* ── colour ── */ --navy: #17223D; /* ink, rules, the dark ground */ --night: #111A30; /* Kai's stage, the night scene */ --orange: #D24719; /* the accent, the one UI orange: buttons, panels, rules. White text on it passes AA (4.5:1) */ --brand: #E1552A; /* the logo's orange: the wordmark and nothing else (illustrations keep their own inks) */ --orange-ink: #B23F16; /* orange words on a light ground */ --orange-tint: #FCEDE6; /* hover and highlight on a light ground */ --amber: #EBAD21; /* the sun; highlights and labels on navy */ --amber-ink: #C48800; /* amber words on a light ground (large type only: 3:1 on paper) */ --leaf: #A6C24A; /* growth, in drawings */ --leaf-ink: #4F6A0E; /* growth, in words */ --paper: #FFFDF7; /* the page */ --sky: #EEF2F6; /* the hero ground */ --cream: #F6ECDD; /* the warm ground; the floor in drawings */ --body: #3B4256; /* running text */ --muted: #656B7F; /* secondary text; passes AA (4.5:1) on paper, sky and cream */ --line: rgba(23, 34, 61, .14); /* hairlines on light grounds */ --on-navy: #FFFDF7; /* words on navy */ --on-navy-body: rgba(255, 253, 247, .78); --on-navy-muted: #8F98B3; --on-navy-line: rgba(255, 253, 247, .18); /* five pale tints: each bucket of Kai's work takes one ([data-area] below), and drawings and tiles borrow them */ --tint-teal: #E1ECE8; --tint-blue: #DFE7F1; --tint-amber: #FBEFD3; --tint-green: #EBF0D6; --tint-peach: #FAE3D8; /* ── type: three families, one size per purpose ── Use as font: var(--t-h2); letter-spacing: var(--ls-h2); */ --display: 'Space Grotesk', -apple-system, 'Helvetica Neue', sans-serif; --font: 'Hanken Grotesk', -apple-system, 'Helvetica Neue', sans-serif; --mono: 'Space Mono', 'SF Mono', Menlo, monospace; --t-display: 700 clamp(52px, min(8vw, 14vh), 150px)/.9 var(--display); --ls-display: -.055em; /* posters: page heroes, Kai's words, the hours of the day */ --t-h1: 700 clamp(44px, min(6.4vw, 11vh), 116px)/.95 var(--display); --ls-h1: -.05em; /* page titles, closing lines */ --t-h2: 700 clamp(36px, min(4.6vw, 8.6vh), 84px)/1 var(--display); --ls-h2: -.045em; /* section headlines; a page title that shares the screen with a tool */ --t-h3: 600 clamp(28px, min(3.2vw, 6vh), 56px)/1.05 var(--display); --ls-h3: -.035em; /* scene headlines, index entries, big numbers */ --t-h4: 600 clamp(22px, min(2vw, 3.8vh), 32px)/1.15 var(--display); --ls-h4: -.025em; /* statements, article headings, pull quotes */ --t-h5: 600 clamp(19px, 1.45vw, 23px)/1.2 var(--display); --ls-h5: -.02em; /* card titles, questions */ --t-h6: 600 17px/1.25 var(--display); --ls-h6: -.01em; /* small titles inside cards and lists */ --t-lead: 400 clamp(18px, min(1.45vw, 2.6vh), 22px)/1.5 var(--font); /* the paragraph under a headline */ --t-body: 400 clamp(16px, 1.2vw, 18.5px)/1.6 var(--font); /* running text */ --t-read: 400 clamp(17px, 1.2vw, 19px)/1.7 var(--font); /* long-form articles */ --t-card: 400 15.5px/1.5 var(--font); /* text inside cards */ --t-small: 400 14px/1.45 var(--font); /* captions, meta, lists of links */ --t-fine: 400 13px/1.45 var(--font); /* fine print, sources */ --t-ui: 600 16px/1 var(--font); /* buttons, text links */ --t-ui-s: 600 14.5px/1 var(--font); /* tabs, small controls, field labels */ --t-label: 700 12px/1.2 var(--mono); --ls-label: .1em; /* kickers and labels, uppercase */ --t-tag: 700 10.5px/1 var(--mono); --ls-tag: .07em; /* tags on cards and drawings, uppercase */ --t-data: 700 13px/1.4 var(--mono); /* times, counts, prices */ /* ── rhythm ── */ --edge: clamp(20px, 7vw, 160px); /* the page margin */ --bar: 64px; /* the top bar */ --sec-y: clamp(88px, 14vh, 160px); /* a section's top and bottom */ --gap-lede: clamp(18px, 3vh, 28px); /* headline to its paragraph */ --gap-head: clamp(40px, 7vh, 72px); /* a section's head to its content */ --gap-cols: clamp(32px, 5vw, 96px); /* between two columns */ --gap-cards: clamp(16px, 1.8vw, 28px); /* between cards */ --card-pad: clamp(20px, 2.2vw, 32px); /* inside a card */ --btn-h: 54px; --mbar: 0px; /* the thumb bar, on phones only */ /* ── print: square corners, 1.5px navy rules, offset lifts ── */ --rule: 1.5px solid var(--navy); --lift-xs: 2px 2px 0; /* tags on drawings */ --lift-s: 3px 3px 0; /* buttons, chips, notes */ --lift: 5px 5px 0; /* cards */ --lift-l: 8px 8px 0; /* feature panels */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ── elements ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--navy); font: var(--t-body); -webkit-font-smoothing: antialiased; } a { color: inherit; } code, kbd, samp, pre { font-family: var(--mono); font-size: inherit; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* nothing inside a page may widen the screen sideways (clip, unlike hidden, keeps sticky scenes working) */ main { overflow-x: clip; } /* each area of Kai's work has its tint, wherever it appears (cards, drawings, blog posts); "chain" is the business as a whole */ [data-area="sync"] { --tint: var(--tint-teal); } [data-area="found"] { --tint: var(--tint-blue); } [data-area="engage"] { --tint: var(--tint-amber); } [data-area="local"] { --tint: var(--tint-green); } [data-area="sell"] { --tint: var(--tint-peach); } [data-area="chain"] { --tint: var(--cream); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── buttons: one shape, four grounds ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); padding: 0 24px; font: var(--t-ui); white-space: nowrap; text-decoration: none; cursor: pointer; border: var(--rule); background: var(--paper); color: var(--navy); box-shadow: var(--lift-s) var(--navy); transition: transform .12s var(--ease), box-shadow .12s var(--ease); } .btn:hover { transform: translate(1px, 1px); box-shadow: var(--lift-xs) var(--navy); } .btn--ink { background: var(--navy); color: var(--on-navy); box-shadow: var(--lift-s) var(--orange); } .btn--ink:hover { box-shadow: var(--lift-xs) var(--orange); } .btn--light { background: #fff; color: var(--navy); border-color: #fff; } .btn--orange { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: var(--lift-s) var(--on-navy); } .btn--orange:hover { box-shadow: var(--lift-xs) var(--on-navy); } .btn--sm { height: 40px; padding: 0 16px; font: var(--t-ui-s); } .btn:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; } /* ── text links: the second way in, and every "see more" ── */ .tlink { font: var(--t-ui); color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 4px; transition: color .15s linear; } .tlink:hover { color: var(--orange-ink); } .tlink--light, .tlink--light:hover { color: #fff; border-color: currentColor; } .tlink--on-navy, .tlink--on-navy:hover { color: var(--on-navy); } /* the two ways in, side by side */ .cta2 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } /* ── labels ── */ .kicker { margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); } /* ── Kai's notes: what he did, waiting for a yes ── */ .note { display: inline-flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; white-space: nowrap; background: var(--paper); color: var(--navy); border: var(--rule); box-shadow: var(--lift-s) var(--navy); font: 400 13.5px/1.2 var(--font); } .note ocally-kai { width: 20px; height: 23px; display: block; flex: none; } .note b { font-weight: 600; } .note .st { font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; padding: 4px 6px; background: #E4E8F0; } .note .st.is-yes { background: #FBE0D2; color: var(--orange-ink); } /* ── questions: every FAQ on the site ── */ .qa details { border-bottom: 1px solid var(--line); } .qa details:first-of-type { border-top: 1px solid var(--line); } .qa summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--navy); transition: color .15s linear; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; flex: none; font: 400 28px/1 var(--display); color: var(--orange); transition: transform .25s var(--ease); } .qa summary:hover { color: var(--orange-ink); } .qa details[open] summary::after { transform: rotate(45deg); } .qa details > p { margin: 0 0 24px; max-width: 42em; font: var(--t-body); color: var(--body); } /* the section around them: the headline holds on the left, the questions run on the right */ .qa-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: var(--gap-cols); padding: var(--sec-y) var(--edge); } .qa-sec__head { position: sticky; top: calc(var(--bar) + 40px); align-self: start; } @media (max-width: 860px) { .qa-sec { grid-template-columns: 1fr; gap: 28px; } .qa-sec__head { position: static; } .qa summary { padding: 20px 0; } } /* ── the thumb bar: on phones, the two ways in live at the bottom of the screen ── Every call to action on a phone sits in thumb reach. The bar carries both; the copies up the screen (the top bar's button, a section's pair, the footer's pair) step aside so nothing asks twice. Full-height scenes subtract --mbar. The two pages that are the ways in (/fit, /consultation) have no bar. */ .mbar { display: none; } @media (max-width: 760px) { :root { --mbar: calc(68px + env(safe-area-inset-bottom)); } html:is([data-page="fit"], [data-page="consultation"]) { --mbar: 0px; } html:not([data-page="fit"]):not([data-page="consultation"]) .mbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 18px; height: var(--mbar); padding: 10px 18px calc(10px + env(safe-area-inset-bottom)) 16px; background: var(--paper); border-top: 1px solid var(--line); } .mbar .btn { flex: 1; height: 48px; padding: 0 16px; } .mbar .tlink { flex: none; font: var(--t-ui-s); } .mbar__long { display: none; } body { padding-bottom: var(--mbar); } html:not([data-page="fit"]):not([data-page="consultation"]) :is(main :is(.btn, .tlink):is([href="/consultation"], [href="/fit"]), main .cta2, .hy__ctas, .foot .cta2) { display: none !important; } .topbar__ctas { display: none !important; } } @media (min-width: 480px) and (max-width: 760px) { .mbar__long { display: inline; } .mbar__short { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ═══ THE TOP BAR (every page) ══════════════════════════════════════════════ The mark, the places to go, and the two ways in as real buttons, centred in the bar. The page you are on carries the orange rule the tabs use. Under 1040px the places fold into a menu; on phones the two ways in move to the thumb bar at the bottom. */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); } .topbar__in { display: flex; align-items: center; gap: 12px; height: calc(var(--bar) - 1px); padding: 0 var(--edge); } .topbar__mark { display: inline-flex; align-items: center; margin-right: clamp(20px, 3vw, 48px); color: var(--brand); } .topbar__mark svg { height: 22px; width: auto; display: block; } .topbar__nav { display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); margin-right: auto; } .topbar__link { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 10px; white-space: nowrap; font: var(--t-ui-s); color: var(--navy); text-decoration: none; transition: color .15s linear; } .topbar__link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out); } .topbar__link:hover::after, .topbar__link[aria-current]::after { transform: none; } .topbar__link[aria-current] { color: var(--navy); } .topbar__ctas { display: flex; align-items: center; gap: 14px; } .topbar__short { display: none; } .topbar__menu { display: none; } @media (max-width: 1180px) { .topbar__long { display: none; } .topbar__short { display: inline; } } /* tablets: the places fold into a menu, the two ways in stay */ @media (max-width: 1040px) { .topbar__menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; margin-right: -10px; padding: 0 11px; border: 0; background: none; cursor: pointer; } .topbar__menu i { display: block; height: 2px; background: var(--navy); transition: transform .25s var(--ease); } .topbar.is-open .topbar__menu i:first-child { transform: translateY(4px) rotate(45deg); } .topbar.is-open .topbar__menu i:last-child { transform: translateY(-4px) rotate(-45deg); } .topbar__ctas { margin-left: auto; } .topbar__nav { position: absolute; left: 0; right: 0; top: calc(var(--bar) - 1px); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--edge) 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(23, 34, 61, .35); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .25s var(--ease), visibility 0s .25s; } .topbar.is-open .topbar__nav { transform: none; opacity: 1; visibility: visible; transition: opacity .2s ease, transform .25s var(--ease); } .topbar__link { height: 56px; padding: 0; border-bottom: 1px solid var(--line); font: var(--t-h5); letter-spacing: var(--ls-h5); } .topbar__link:last-child { border-bottom: 0; } .topbar__link::after { left: 0; right: auto; width: 32px; bottom: 12px; } } @media (max-width: 760px) { .topbar__in { padding: 0 18px 0 20px; } .topbar__mark { margin-right: auto; } .topbar__mark svg { height: 20px; } } /* ═══ THE FOOTER (every page) ═══════════════════════════════════════════════ The close, then the map of the site in four columns, then the base line. */ .foot { background: var(--navy); color: var(--on-navy-body); padding: var(--sec-y) var(--edge) 28px; } .foot__close { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding-bottom: clamp(56px, 9vh, 96px); border-bottom: 1px solid var(--on-navy-line); } .foot__big { margin: 0; max-width: 13em; font: var(--t-h1); letter-spacing: var(--ls-h1); color: var(--on-navy); text-wrap: balance; } .foot__big span { color: var(--orange); } .foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 7vh, 64px) 0; } .foot__cols > * { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .foot__k { margin: 0 0 6px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-navy-muted); } .foot__cols a { font: 500 15.5px/1.3 var(--font); color: var(--on-navy); text-decoration: none; } .foot__cols a:hover { text-decoration: underline; text-underline-offset: 4px; } .foot__cols .foot__all { color: var(--amber); } .foot__note { margin: 6px 0 0; max-width: 18em; font: var(--t-small); color: var(--on-navy-muted); } .foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 24px; border-top: 1px solid var(--on-navy-line); font: var(--t-fine); color: var(--on-navy-muted); } .foot__mark { color: #fff; margin-right: auto; } .foot__mark svg { display: block; height: 24px; width: auto; } .foot__legal { display: flex; gap: 18px; } .foot__legal a { color: inherit; text-decoration: none; } .foot__legal a:hover { color: var(--on-navy); } @media (max-width: 860px) { .foot__close { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: 1fr 1fr; row-gap: 40px; } .foot__mark { flex-basis: 100%; } }