/* ========================================================================== CANTIC — marketing site One stylesheet for every page in public/site. The rules of the look: - Black and white. Colour is light, never paint: green appears as glow (the WebGL layer in js/site.js) and as the odd lit word, not as fills. - The eclipse is the product shot. It is screen-blended over the glow layer, so NOTHING between it and may create a stacking context (no transform / filter / opacity / z-index on its ancestors) or the blend silently stops reaching the glow canvas. - Motion is transform + opacity only. Anything scroll-linked is driven from a spring in site.js, never from raw scroll, so wheels that jump 100px at a time still read as one continuous move. ========================================================================== */ @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var-latin.woff2') format('woff2-variations'), url('/fonts/archivo-var-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { --ink: #f5f5f4; --ink-2: rgba(245, 245, 244, 0.72); --ink-3: rgba(245, 245, 244, 0.54); --ink-4: rgba(245, 245, 244, 0.38); --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.18); --panel: rgba(255, 255, 255, 0.035); --panel-2: rgba(255, 255, 255, 0.065); --g: #34d399; --g-hi: #6ee7b7; --g-deep: #059669; --g-teal: #2dd4bf; --g-rgb: 16, 185, 129; --paper: #f4f4f1; --paper-2: #eaeae6; --paper-ink: #0b0b0b; --paper-ink-2: rgba(11, 11, 11, 0.66); --paper-ink-3: rgba(11, 11, 11, 0.46); --paper-line: rgba(11, 11, 11, 0.12); --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --wrap: 1280px; --gutter: clamp(20px, 4.2vw, 56px); --nav-h: 64px; --r-sm: 10px; --r: 18px; --r-lg: 28px; --section-y: clamp(104px, 13vw, 184px); } /* ---------- Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The background lives on only: the glow canvas sits at z-index -1, which paints above the root background but below every in-flow box. A background on would be painted over the canvas. */ html { background: #000; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); } body { margin: 0; color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.6; font-weight: 400; font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: rgba(52, 211, 153, 0.34); color: #fff; } :focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 6px; } .skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 14px; transform: translateY(-150%); transition: transform 0.3s var(--ease); } .skip:focus { transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The glow layer: one fixed WebGL canvas behind everything, rendered at reduced resolution (it is all soft light) and upscaled by the browser. */ .glow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .codefield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .glow-fallback { position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(40% 32% at 78% 18%, rgba(var(--g-rgb), 0.16), transparent 70%), radial-gradient(34% 30% at 14% 76%, rgba(45, 212, 191, 0.1), transparent 70%); } /* ---------- Layout -------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: calc(880px + 2 * var(--gutter)); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: calc(var(--section-y) * 0.62); } .center { text-align: center; } .stack > * + * { margin-top: var(--stack, 24px); } .paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; } /* ---------- Type ---------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.9; } .eyebrow--plain::before { display: none; } .paper .eyebrow { color: var(--g-deep); } .mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; } .label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .paper .label { color: var(--paper-ink-3); } .display, .h1, .h2, .h3 { font-family: var(--display); font-weight: 720; font-stretch: 110%; letter-spacing: -0.032em; color: #fff; text-wrap: balance; } .paper .display, .paper .h1, .paper .h2, .paper .h3 { color: var(--paper-ink); } .display { font-size: clamp(52px, 8.4vw, 148px); line-height: 0.93; letter-spacing: -0.042em; font-weight: 760; } .h1 { font-size: clamp(42px, 6vw, 96px); line-height: 0.97; letter-spacing: -0.038em; } .h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; } .h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 680; font-stretch: 106%; } .lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.5; font-weight: 420; color: var(--ink-2); text-wrap: pretty; } .paper .lead { color: var(--paper-ink-2); } .body { color: var(--ink-2); } .paper .body { color: var(--paper-ink-2); } .small { font-size: 14px; line-height: 1.55; color: var(--ink-3); } .paper .small { color: var(--paper-ink-3); } .lit { color: var(--g-hi); } .paper .lit { color: var(--g-deep); } /* White-to-mint "lit edge" gradient for the one word per headline that carries the light — the site's version of the reference's hot gradient. */ .measure { max-width: 640px; } .measure-sm { max-width: 520px; } .mx-auto { margin-inline: auto; } /* ---------- Buttons & links ---------------------------------------------- */ /* Every button is the app's glass button (components/ui/glass-button.tsx) pale green. It rests a light emerald tint and turns dark grey when selected, and as it does the glint fades in around it: a Cantic-green ring that catches two highlights, which turn as they do in the app. */ @property --rim { syntax: ''; inherits: false; initial-value: -75deg; } .btn { --h: 58px; --glint: 1.5px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; height: var(--h); padding: 0 28px; border-radius: 12px; background: #a6eec8; color: #02110b; font-size: 21px; font-weight: 600; font-stretch: 104%; letter-spacing: -0.005em; white-space: nowrap; transition: transform 0.5s var(--ease), background-color 0.25s, color 0.25s; } .btn::before { content: ''; position: absolute; inset: calc(-1 * var(--glint)); border-radius: calc(12px + var(--glint)); pointer-events: none; padding: var(--glint); background: conic-gradient(from var(--rim), rgb(var(--g-rgb)), rgba(var(--g-rgb), 0.28) 10% 43%, rgb(var(--g-rgb)) 50%, rgba(var(--g-rgb), 0.28) 73% 93%, rgb(var(--g-rgb))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: --rim 0.5s ease-in-out, opacity 0.18s ease-out; } .btn:hover { background: #232323; color: #fff; } .btn:hover::before { --rim: -125deg; opacity: 1; } /* on light ground the pale face needs an edge of its own */ .paper .btn:not(:hover) { box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.3); } .btn:active { transform: scale(0.97); } .btn--sm { --h: 44px; padding: 0 18px; font-size: 17px; } .btn--lg { --h: 66px; padding: 0 32px; font-size: 24px; } .btn--xl { --h: 76px; padding: 0 38px; font-size: 28px; } @media (max-width: 760px) { .btn:not(.btn--sm) { --h: 54px; padding: 0 24px; font-size: 19px; } .btn.btn--lg { --h: 60px; font-size: 21px; } .btn.btn--xl { --h: 64px; font-size: 23px; } } .btn .arr, .link .arr { transition: transform 0.5s var(--ease); } .btn:hover .arr, .link:hover .arr { transform: translateX(4px); } .link { display: inline-flex; align-items: center; gap: 6px; color: var(--g-hi); font-weight: 560; font-size: 16px; } .link:hover { color: #fff; } .paper .link { color: var(--g-deep); } .paper .link:hover { color: var(--paper-ink); } .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .center .actions, .actions--center { justify-content: center; } /* Corona rim: cards gain a slowly turning halo of light on hover. */ @property --corona { syntax: ''; inherits: false; initial-value: 0deg; } .card[data-spot]::after { background: conic-gradient(from var(--corona), transparent 0%, rgba(110, 231, 183, 0.75) 8%, transparent 18%, transparent 46%, rgba(255, 255, 255, 0.55) 56%, transparent 66%, transparent 100%); } .card[data-spot]:hover::after { animation: corona 9s linear infinite; } @keyframes corona { to { --corona: 360deg; } } /* Aperture: images open like totality ending — a widening circle with a thin ring of light on its edge. */ @property --ap { syntax: ''; inherits: false; initial-value: 0%; } .js [data-reveal='eclipse'] { opacity: 1; transform: none; --ap: 0%; transition: --ap 1.7s var(--ease); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--ap), transparent calc(var(--ap) + 0.5%)); mask-image: radial-gradient(circle at 50% 50%, #000 var(--ap), transparent calc(var(--ap) + 0.5%)); } .js [data-reveal='eclipse'].is-in { --ap: 150%; } /* ---------- Photography --------------------------------------------------- */ /* Black and white, crushed a little, with the site's light raking across. */ .photo { position: relative; overflow: hidden; border-radius: var(--r); background: #0a0a0a; isolation: isolate; } .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.82); transform: scale(1.08); transition: transform 1.6s var(--ease), filter 0.8s; } .photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 85% 0%, rgba(var(--g-rgb), 0.28), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%); mix-blend-mode: normal; } .photo:hover img { transform: scale(1.03); filter: grayscale(1) brightness(0.95); } .js .photo[data-reveal] img { transform: scale(1.18); } .js .photo[data-reveal].is-in img { transform: scale(1.08); } /* ---------- Page transitions: an eclipse between pages -------------------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.45s var(--ease-io) both; } ::view-transition-new(root) { animation: vt-in 0.75s var(--ease) both; } @keyframes vt-out { to { opacity: 0; transform: scale(0.985); } } @keyframes vt-in { from { clip-path: circle(0% at 50% 42%); } to { clip-path: circle(142% at 50% 42%); } } /* ---------- Nav ----------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), color 0.4s, transform 0.6s var(--ease); border-bottom: 1px solid transparent; } /* black once scrolled, over the white sections too */ .nav.is-scrolled { background: #000; border-bottom-color: rgba(255, 255, 255, 0.08); } .nav.is-hidden { transform: translateY(-100%); } .nav__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; } .nav__logo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 112%; font-size: 21px; letter-spacing: -0.03em; } .nav__logo svg { width: 26px; height: 26px; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { position: relative; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.74); transition: color 0.3s, background-color 0.3s; } .nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .nav__link[aria-current='page'] { color: #fff; } .nav__link[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); } .nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; } .nav__signin { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.74); padding: 8px 12px; transition: color 0.3s; } .nav__signin:hover { color: #fff; } .nav__toggle { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; } .nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.5s var(--ease), opacity 0.3s; } .nav__toggle span:nth-child(1) { top: 17px; } .nav__toggle span:nth-child(2) { top: 26px; } .nav-open .nav__toggle span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .nav-open .nav__toggle span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); } .sheet { position: fixed; inset: 0; z-index: 49; background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: calc(var(--nav-h) + 28px) var(--gutter) 32px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s 0.45s; } .nav-open .sheet { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); } .sheet__links a { display: block; padding: 10px 0; font-size: 34px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.03em; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .nav-open .sheet__links a { opacity: 1; transform: none; } .nav-open .sheet__links li:nth-child(2) a { transition-delay: 0.04s; } .nav-open .sheet__links li:nth-child(3) a { transition-delay: 0.08s; } .nav-open .sheet__links li:nth-child(4) a { transition-delay: 0.12s; } .nav-open .sheet__links li:nth-child(5) a { transition-delay: 0.16s; } .sheet__foot { margin-top: auto; display: grid; gap: 12px; } .sheet__foot .btn { width: 100%; } .nav-open { overflow: hidden; } @media (max-width: 900px) { .nav__inner { grid-template-columns: 1fr auto; } .nav__links, .nav__actions { display: none; } .nav__toggle { display: block; justify-self: end; } } @media (min-width: 901px) { .sheet { display: none; } } /* ---------- Reveal-on-enter ---------------------------------------------- */ /* Pre-hidden only when JS is running (html.js), so no-JS visitors and crawlers always see the content. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); } .js [data-reveal='fade'] { transform: none; } .js [data-reveal='scale'] { transform: scale(0.94); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* Headlines rise line by line from behind a mask. site.js wraps each line. */ .ln { display: block; } .js [data-lines] .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .js [data-lines] .ln > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0) * 80ms); } .js [data-lines].is-in .ln > span { transform: none; } /* ---------- Light bar (the glowing separator) ---------------------------- */ .lightbar { position: relative; height: 1px; width: min(1100px, 86%); margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(110, 231, 183, 0.9) 18%, #fff 50%, rgba(45, 212, 191, 0.9) 82%, transparent); transform-origin: 50% 50%; } .lightbar::after { content: ''; position: absolute; left: 6%; right: 6%; top: -14px; height: 28px; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--g-rgb), 0.55), transparent 70%); filter: blur(6px); } .js .lightbar[data-reveal] { transform: scaleX(0.04); opacity: 0; transition: transform 1.8s var(--ease), opacity 0.8s var(--ease); } .js .lightbar[data-reveal].is-in { transform: none; opacity: 1; } /* ---------- Cards --------------------------------------------------------- */ .card { position: relative; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); padding: clamp(24px, 2.4vw, 34px); transition: border-color 0.4s, transform 0.6s var(--ease), background-color 0.4s; } /* cursor spotlight — site.js sets --mx/--my on pointer move */ .card[data-spot]::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(110, 231, 183, 0.14), transparent 45%); opacity: 0; transition: opacity 0.5s; } .card[data-spot]::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(110, 231, 183, 0.9), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s; } .card[data-spot]:hover::before, .card[data-spot]:hover::after { opacity: 1; } .paper .card { background: #fff; border-color: var(--paper-line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 20px 40px -30px rgba(0, 0, 0, 0.18); } .paper .card[data-spot]::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(16, 185, 129, 0.09), transparent 45%); } .paper .card[data-spot]::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(5, 150, 105, 0.7), transparent 55%); } .card__n { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--g); } .paper .card__n { color: var(--g-deep); } .card__t { margin-top: 14px; } .card__d { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .paper .card__d { color: var(--paper-ink-2); } .chip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--ink-2); } .chip--g { border-color: rgba(52, 211, 153, 0.5); color: var(--g-hi); background: rgba(16, 185, 129, 0.08); } .chip--solid { border-color: transparent; background: #fff; color: #000; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .paper .chip { border-color: var(--paper-line); color: var(--paper-ink-2); } .paper .chip--g { border-color: rgba(5, 150, 105, 0.4); color: var(--g-deep); background: rgba(16, 185, 129, 0.08); } .grid { display: grid; gap: var(--gap, 20px); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Section heads ------------------------------------------------- */ .head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 88px); } .head--center { justify-items: center; text-align: center; } .head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); align-items: end; gap: 40px; } .head--split .lead { justify-self: end; max-width: 400px; } @media (max-width: 860px) { .head--split { grid-template-columns: minmax(0, 1fr); } .head--split .lead { justify-self: start; } } /* ---------- Stats --------------------------------------------------------- */ .stat__num { font-weight: 740; font-stretch: 112%; letter-spacing: -0.045em; line-height: 0.95; font-size: clamp(56px, 7.4vw, 124px); color: #fff; font-variant-numeric: tabular-nums; } .stat__num--md { font-size: clamp(44px, 5vw, 80px); } .stat__label { margin-top: 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.45; max-width: 300px; } .paper .stat__num { color: var(--paper-ink); } .paper .stat__label { color: var(--paper-ink-2); } /* Scroll-linked "highlight as you read" paragraph — site.js splits words. */ .js [data-highlight] .w { color: rgba(255, 255, 255, var(--a, 0.18)); transition: color 0.1s linear; } .js .paper [data-highlight] .w { color: rgba(11, 11, 11, var(--a, 0.16)); } .highlight { font-size: clamp(30px, 4.1vw, 62px); line-height: 1.12; font-weight: 680; font-stretch: 108%; letter-spacing: -0.03em; text-wrap: balance; } /* ========================================================================== HOME — the eclipse story A pinned stage over a tall track. Two sticky layers share the track: .story__media (the rendered eclipse, an opaque WebGL canvas) and .story__copy (the text). The eclipse is never still while pinned — it dollies in — and the copy glides at a slowed scroll speed (site.js). ========================================================================== */ .story { position: relative; height: var(--story-h, 760vh); } .story__media, .story__copy { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; width: 100%; overflow: hidden; } .story__media { pointer-events: none; background: #000; } .eclipse-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* without WebGL: a drawn ring stands in for the rendered eclipse */ .no-webgl .eclipse-gl { display: none; } .story.no-webgl .story__media, .no-webgl[data-eclipse] { background: radial-gradient(circle at 50% 55%, #000 0 min(19vw, 30vh), rgba(255, 255, 255, 0.9) calc(min(19vw, 30vh) + 1px), rgba(255, 255, 255, 0.25) calc(min(19vw, 30vh) * 1.2), transparent calc(min(19vw, 30vh) * 2)) #000; } .story__copy { margin-top: -100vh; margin-top: -100svh; pointer-events: none; } .beat { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; padding: calc(var(--nav-h) + 16px) var(--gutter) 40px; } .beat > * { pointer-events: auto; } .js .beat { opacity: 0; visibility: hidden; } .js .beat.is-live { visibility: visible; } /* Beat 0 — hero: the Kairo composition. The limb sits at 15% of the viewport (13% on phones); the copy sits below it, on the moon. */ .beat--hero { display: block; padding: 0; } .hero-in { position: absolute; left: 0; right: 0; top: calc(30vh + 112px); top: calc(30svh + 112px); display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--gutter); } .pill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; color: rgba(255, 255, 255, 0.82); transition: border-color 0.3s, background-color 0.3s; } .pill:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); } .pill .arr { color: rgba(255, 255, 255, 0.45); transition: transform 0.4s var(--ease); } .pill:hover .arr { transform: translateX(3px); } .hero-h1 { font-size: clamp(44px, 7.2vw, 124px); line-height: 1.02; font-weight: 700; font-stretch: 106%; letter-spacing: -0.038em; color: #fff; text-wrap: balance; } .nowrap { white-space: nowrap; } /* sized in em so the sentence keeps its ~900px measure and its two lines as the type grows */ .hero-in .lead { margin-top: 30px; max-width: 23em; color: rgba(255, 255, 255, 0.7); font-size: clamp(22px, 2.75vw, 42px); line-height: 1.38; text-wrap: balance; } .hero-in .actions { margin-top: 44px; gap: 14px; } @media (max-width: 760px) { .hero-in { top: calc(22vh + 84px); top: calc(22svh + 84px); } .hero-h1 { font-size: clamp(40px, 11.6vw, 56px); } .hero-in .lead { font-size: 20px; } .hero-in .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 20rem; } } /* Beat 2 — threat stats orbiting the eclipse */ .beat--threat { align-content: stretch; } .threat { position: relative; width: 100%; max-width: 1320px; height: 100%; display: grid; grid-template-rows: auto 1fr auto; will-change: transform; } .threat__title { text-align: center; } .threat__title .h2 { font-size: clamp(33px, 4.4vw, 64px); } /* one line on laptops: the title runs ~20em */ .threat__grid { display: grid; grid-template-columns: 1fr minmax(260px, 34vw) 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 24px; } .threat__stat { max-width: 300px; } .threat__stat:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; } .threat__stat:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: start; } .threat__stat:nth-child(3) { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; } .threat__stat:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: start; } .threat__stat .stat__num { font-size: clamp(44px, 5.2vw, 88px); } .threat__stat .stat__label { font-size: 15.5px; } .threat__stat:nth-child(odd) .stat__label { margin-left: auto; } /* Laptops and up: the block is centred, the rows close together; site.js keeps the eclipse in the middle of the four as they drift up together. */ @media (min-width: 861px) { .threat { display: flex; flex-direction: column; justify-content: center; } .threat__title { margin-bottom: clamp(44px, 10vh, 112px); } .threat__grid { grid-template-rows: auto auto; row-gap: clamp(48px, 13vh, 150px); } } /* Beat 3 — an engagement, replayed, the eclipse to the right */ .beat--replay { place-items: start stretch; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 40px)); padding-left: clamp(24px, 4.4vw, 72px); } .rp { width: 100%; } .rp__col { width: min(100%, 60vw, 900px); will-change: transform; } /* the engagement log: plain text on the night, no panel. The scroll types it out (site.js); proven lines are red and carry a line of evidence. The light takes it from the eclipse's side (a mask set in site.js). */ /* bolder and brighter than the site's other mono text: it carries the story here */ .log { font-family: var(--mono); font-size: clamp(12px, min(1.75vh, 1.15vw), 17px); font-weight: 500; color: var(--ink); } .log__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82em; letter-spacing: 0.08em; color: var(--ink-2); } .log__clock { color: #ff6b6b; font-weight: 600; font-variant-numeric: tabular-nums; } .log__lines { list-style: none; margin: 8px 0 0; padding: 0; } .ll { position: relative; display: grid; grid-template-columns: 4em 11.8em minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: clamp(2px, 0.45vh, 5px) 0; border-radius: 3px; } .ll__t { color: var(--ink-2); font-variant-numeric: tabular-nums; } .ll__ep { color: #fff; font-weight: 600; white-space: nowrap; } .ll__ep::before { content: '\203A'; margin-right: 0.55em; color: var(--ink-3); } .ll__ep.is-blank::before { visibility: hidden; } .ll__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the verdict: plain text at the right */ .ll__tag { font-size: 0.8em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .ll__tag--f { color: #fff; } .ll__tag--f::before { content: '\2713'; margin-right: 0.6em; } /* a proven finding: red, its verdict marked with an exclamation mark, and the row flagged once it's complete */ .ll--p { background: rgba(239, 68, 68, 0.07); } .ll--p::before { content: ''; position: absolute; left: -12px; top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); } .js .ll--p:not(.is-done) { background: none; } .js .ll--p:not(.is-done)::before { content: none; } .ll--p .ll__t { color: #ff6b6b; } .ll--p .ll__ep, .ll--p .ll__ep::before { color: #ffb3b3; } .ll--p .ll__tag { color: #ff6b6b; } .ll--p .ll__tag::before { content: '!'; margin-right: 0.6em; font-weight: 800; } .ll__ev { grid-column: 2 / 4; padding-top: 1px; font-size: 0.86em; color: #ff7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* typed, never faded: a line shows from its first letter, its tag the moment it's complete */ .js .ll { visibility: hidden; } .js .ll.is-on { visibility: visible; } .js .ll .ll__tag { visibility: hidden; } .js .ll.is-done .ll__tag { visibility: visible; } /* the caret, after the last letter typed: steady while letters come, blinking when they stop */ .ll .is-caret::after { content: ''; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 4px; vertical-align: -0.18em; background: #ff6b6b; animation: caret 1.05s steps(1) infinite; } .log.is-typing .is-caret::after { animation: none; } @keyframes caret { 50% { opacity: 0; } } /* The four verbs, after the engine: soft-pinned, the heading beside them and the active one advancing with the scroll */ .verbs-sec { position: relative; height: var(--pin-h, auto); } .verbs-sec__pin { position: relative; padding-block: clamp(24px, 4vh, 48px); will-change: transform; } .verbs-sec__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .verbs-sec .verbs__list { margin-top: 0; } .verbs__list { margin-top: clamp(28px, 4.5vh, 48px); border-left: 1px solid var(--line); position: relative; } .verbs__rail { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: linear-gradient(var(--g-hi), var(--g-teal)); box-shadow: 0 0 12px var(--g); transform-origin: 0 0; will-change: transform; } .verb { padding: 12px 0 12px 28px; } .verb__head { display: flex; align-items: baseline; gap: 16px; } .verb__n { font-family: var(--mono); font-size: 15px; color: var(--ink-4); letter-spacing: 0.12em; transition: color 0.4s; } .verb__t { font-size: clamp(30px, 3.1vw, 48px); font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; color: var(--ink-4); transition: color 0.5s; } .verb__d { overflow: hidden; height: 0; opacity: 0; color: var(--ink-2); font-size: clamp(19px, 1.5vw, 23px); max-width: 540px; transition: opacity 0.5s; } .verb__d p { padding: 10px 0 6px 44px; } .verb.is-on .verb__n { color: var(--g); } .verb.is-on .verb__t { color: #fff; } .verb.is-on .verb__d { opacity: 1; } @media (max-width: 860px) { .threat__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; row-gap: 22px; column-gap: 20px; } .threat__stat { max-width: none; } .threat__stat:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: start; text-align: left; } .threat__stat:nth-child(1), .threat__stat:nth-child(2) { grid-row: 2; } .threat__stat:nth-child(3), .threat__stat:nth-child(4) { grid-row: 3; } .threat__stat:nth-child(odd) .stat__label { margin-left: 0; } .threat__stat .stat__label { font-size: 14px; } .threat__grid::before { content: ''; grid-column: 1 / -1; grid-row: 1; } .beat--replay { align-items: end; } .rp__col { width: 100%; } .verbs-sec__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .verbs__list { margin-top: 0; } .verb { padding: 6px 0 6px 20px; } .verb__t { font-size: 28px; } .verb__d p { padding-left: 36px; font-size: 17px; } } /* ---------- Page heroes (inner pages) ------------------------------------ */ /* A shorter version of the story: the eclipse sits behind the hero copy and scrubs through the page's own slice of the clip as the hero leaves. */ .phero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 48px) 0 88px; } .phero--short { min-height: 78vh; min-height: 78svh; } .phero__media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); } .phero__copy { position: relative; } .phero .display { font-size: clamp(50px, 7.8vw, 132px); } .phero .lead { margin-top: 26px; max-width: 580px; } .phero .actions { margin-top: 34px; } .phero--center { text-align: center; } .phero--center .lead { margin-inline: auto; } .phero--center .actions { justify-content: center; } .phero__foot { position: absolute; left: 0; right: 0; bottom: 28px; } /* ---------- Bento (paper) ------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .bento > * { grid-column: span 2; } .bento .span-3 { grid-column: span 3; } .bento .span-4 { grid-column: span 4; } .bento .span-6 { grid-column: span 6; } .bento .row-2 { grid-row: span 2; } @media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > *, .bento .span-3, .bento .span-4 { grid-column: span 1; } .bento .span-6, .bento .wide { grid-column: span 2; } } @media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento > *, .bento .span-6, .bento .wide { grid-column: span 1; } .bento .row-2 { grid-row: auto; } } .fw { display: flex; flex-direction: column; min-height: 240px; } .fw__name { font-size: clamp(26px, 2.3vw, 34px); font-weight: 740; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1.02; } .fw__ref { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--paper-ink-3); } .fw__d { margin-top: auto; padding-top: 28px; color: var(--paper-ink-2); font-size: 15.5px; line-height: 1.5; } /* the signed ledger — a live-looking audit trail */ .ledger, .paper .ledger { background: #0b0b0b; color: var(--ink); border-color: #0b0b0b; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.5); } .ledger__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ledger__rows { margin-top: 26px; display: grid; gap: 0; font-family: var(--mono); font-size: 12.5px; } .ledger__row { display: grid; grid-template-columns: 70px 132px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink-2); } .ledger__row .ev { color: #fff; } .ledger__row .h { color: var(--g); } .ledger__row .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .js .ledger__row { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 140ms + 200ms); } .js .ledger.is-in .ledger__row { opacity: 1; transform: none; } .ledger__t { margin-top: auto; padding-top: 30px; } .ledger__t .h3 { color: #fff; } .ledger__t p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; } @media (max-width: 640px) { .ledger__row { grid-template-columns: 58px minmax(0, 1fr) auto; } .ledger__row .what { display: none; } } /* ---------- Horizontal findings gallery ---------------------------------- */ .gallery { position: relative; height: var(--pin-h, 300vh); } .gallery__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; will-change: transform; } .gallery__head { margin-bottom: clamp(32px, 5vh, 56px); } .gallery__track { display: flex; gap: 20px; padding-inline: var(--gutter); width: max-content; will-change: transform; } .find { width: clamp(290px, 30vw, 420px); aspect-ratio: 4 / 5; flex: none; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .find__big { font-size: clamp(38px, 3.6vw, 56px); font-weight: 740; font-stretch: 112%; letter-spacing: -0.04em; line-height: 1; } .find__sub { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; } .find__ring { position: absolute; right: -30%; top: -24%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(110, 231, 183, 0.22); box-shadow: 0 0 80px rgba(var(--g-rgb), 0.12), inset 0 0 60px rgba(var(--g-rgb), 0.06); pointer-events: none; } .find__ring::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); } .find--end { background: #fff; color: #000; border-color: #fff; } .find--end .find__sub { color: rgba(0, 0, 0, 0.6); } .find--end .card__n { color: var(--g-deep); } .gallery__foot { margin-top: clamp(28px, 4vh, 44px); } @media (max-width: 760px) { .gallery { height: auto; } .gallery__pin { position: relative; height: auto; padding-block: var(--section-y); transform: none !important; } .gallery__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; transform: none !important; } .gallery__track::-webkit-scrollbar { display: none; } .find { width: 78vw; scroll-snap-align: center; aspect-ratio: 5 / 6; } } /* ---------- Engagement steps -------------------------------------------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .steps__line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); } .steps__line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--g-deep), var(--g-hi), var(--g-teal)); box-shadow: 0 0 12px rgba(var(--g-rgb), 0.8); transform-origin: 0 0; transform: scaleX(var(--p, 0)); } .steps__line::after { content: ''; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 1.5px solid var(--line-2); border-right: 1.5px solid var(--line-2); transform: rotate(45deg); transition: border-color 0.2s, filter 0.3s; } /* the arrowhead lights once the line has reached it */ .steps.is-end .steps__line::after { border-color: var(--g-teal); filter: drop-shadow(0 0 5px rgba(var(--g-rgb), 0.9)); } .step { position: relative; padding-top: 40px; } .step::before { content: ''; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #000; border: 1px solid var(--line-2); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.4s; } .step.is-on::before { background: var(--g-hi); border-color: var(--g-hi); box-shadow: 0 0 0 5px rgba(var(--g-rgb), 0.16), 0 0 18px var(--g); } .step__k { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); transition: color 0.25s; } .step.is-on .step__k { color: var(--g); } .step__t { margin-top: 12px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; font-stretch: 108%; letter-spacing: -0.025em; line-height: 1.15; } .step__d { margin-top: 10px; color: var(--ink-2); font-size: 16px; } @media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 36px; } .steps__line { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .steps__line i { transform-origin: 0 0; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, var(--g-deep), var(--g-hi), var(--g-teal)); } .steps__line::after { right: auto; top: auto; left: 50%; bottom: 2px; margin: 0 0 0 -5px; transform: rotate(135deg); } .step { padding: 0 0 40px; } .step::before { left: -36px; top: 4px; } } /* ---------- Plans --------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); } .plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .plan__name { font-size: clamp(34px, 3.2vw, 48px); font-weight: 760; font-stretch: 112%; letter-spacing: -0.04em; line-height: 1; } .plan__meta { margin-top: 12px; } .plan__list { margin-top: 30px; display: grid; gap: 14px; } .plan__list li { display: flex; gap: 14px; align-items: baseline; font-size: 17px; color: var(--ink); } .plan__list li::before { content: ''; flex: none; width: 16px; height: 1px; background: var(--g); transform: translateY(-5px); } .plan .actions { margin-top: auto; padding-top: 36px; } .plan--hero { border-color: rgba(110, 231, 183, 0.4); background: radial-gradient(120% 80% at 100% 0%, rgba(var(--g-rgb), 0.16), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.08), 0 30px 80px -40px rgba(var(--g-rgb), 0.55); } @media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } } .cmp { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .cmp > div { padding: 22px 24px; border-left: 1px solid var(--line); } .cmp > div:first-child { border-left: 0; } .cmp .k { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); } .cmp .v { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--ink-3); letter-spacing: -0.01em; } .cmp .us { background: rgba(255, 255, 255, 0.04); } .cmp .us .k { color: var(--g); } .cmp .us .v { color: #fff; } @media (max-width: 860px) { .cmp { grid-template-columns: minmax(0, 1fr); } .cmp > div { border-left: 0; } .cmp > div + div { border-top: 1px solid var(--line); } } /* ---------- Closing CTA -------------------------------------------------- */ /* On the home page (data-fit) the eclipse rings the whole call to action: site.js centres the moon on .close__core and sizes it to enclose it (--er), and the section makes room above and below the core for the moon and its corona. The glow reaches up over the section above rather than stopping at this one's edge. */ .close { position: relative; overflow-x: clip; text-align: center; padding-block: max(clamp(120px, 16vw, 220px), calc(var(--er, 0px) * 1.5 - var(--eh, 0px))) max(clamp(96px, 12vw, 160px), calc(var(--er, 0px) * 1.4 - var(--eh, 0px))); } .close__eclipse { position: relative; width: min(520px, 76vw); aspect-ratio: 1; margin: 0 auto clamp(-120px, -8vw, -60px); pointer-events: none; -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, transparent 98%); mask-image: radial-gradient(circle closest-side, #000 60%, transparent 98%); } .close__eclipse[data-fit] { position: absolute; inset: calc(var(--er, 240px) * -0.7) 0 0; width: auto; aspect-ratio: auto; margin: 0; -webkit-mask-image: radial-gradient(circle at var(--ex, 50%) var(--ey, 50%), #000 calc(var(--er, 240px) * 1.3), transparent calc(var(--er, 240px) * 2)); mask-image: radial-gradient(circle at var(--ex, 50%) var(--ey, 50%), #000 calc(var(--er, 240px) * 1.3), transparent calc(var(--er, 240px) * 2)); } .close .wrap { position: relative; } .close__core { width: fit-content; max-width: 100%; margin-inline: auto; } .close .close__h { font-size: clamp(40px, 5.4vw, 88px); } .close .lead { margin: 22px auto 0; max-width: 560px; } .close .actions { margin-top: 34px; justify-content: center; } /* ---------- Lists, tables, accordions ------------------------------------ */ .rows { border-top: 1px solid var(--line); } .row { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; } .row__k .h3 { font-size: clamp(22px, 2vw, 30px); } .row__k .mono { margin-top: 8px; color: var(--ink-4); display: block; } .row__c .label { display: block; margin-bottom: 8px; } .row__c p { color: var(--ink-2); font-size: 16px; } .row__c--us p { color: #fff; } .paper .rows, .paper .row { border-color: var(--paper-line); } .paper .row__c p { color: var(--paper-ink-2); } .paper .row__c--us p { color: var(--paper-ink); } .paper .row__k .mono { color: var(--paper-ink-3); } @media (max-width: 860px) { .row { grid-template-columns: minmax(0, 1fr); gap: 14px; } } .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.012em; color: #fff; transition: color 0.3s; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--g-hi); } .qa summary .pm { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.5s var(--ease), border-color 0.3s, background-color 0.3s; } .qa summary .pm::before, .qa summary .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; border-radius: 2px; transition: transform 0.5s var(--ease); } .qa summary .pm::after { transform: rotate(90deg); } .qa details[open] summary .pm { transform: rotate(180deg); border-color: var(--g); background: rgba(var(--g-rgb), 0.12); } .qa details[open] summary .pm::after { transform: rotate(0deg); } .qa__a { overflow: hidden; } .qa__a > div { padding: 0 60px 26px 0; color: var(--ink-2); font-size: 17px; line-height: 1.65; max-width: 780px; } .qa__a a { color: var(--g-hi); text-decoration: underline; text-decoration-color: rgba(110, 231, 183, 0.4); text-underline-offset: 3px; } .qa-group + .qa-group { margin-top: clamp(56px, 7vw, 96px); } .qa-group__h { margin-bottom: 18px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 680; font-stretch: 106%; letter-spacing: -0.02em; color: #fff; } /* ---------- Forms --------------------------------------------------------- */ .form { display: grid; gap: 16px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } } .field { display: grid; gap: 8px; } .field label { font-size: 15px; font-weight: 500; color: #d4d4d4; } .field__opt { color: var(--ink-3); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 17px; color: #fff; background: #121212; border: 1px solid #333; border-radius: 8px; padding: 15px 16px; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; -webkit-appearance: none; appearance: none; } .field textarea { min-height: 140px; resize: vertical; } .field select { background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; } .field select option { background: #0b0b0b; color: #fff; } .field input::placeholder, .field textarea::placeholder { color: #6b6b6b; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--g); background: #151515; box-shadow: 0 0 0 3px rgba(var(--g-rgb), 0.22); } .field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #f87171; } .field__err { font-size: 13px; color: #fca5a5; min-height: 0; } .form__note { font-size: 15px; color: #a3a3a3; } .form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 6px; } .form__done { display: none; } .form.is-done .form__fields { display: none; } .form.is-done .form__done { display: block; } /* ---------- Footer -------------------------------------------------------- */ .foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 104px) 0 28px; background: #000; } .foot__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr)); gap: 40px; } .foot__brand p { margin-top: 18px; max-width: 360px; color: var(--ink-3); font-size: 15px; line-height: 1.6; } .foot__h { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 16px; } .foot__links { display: grid; gap: 10px; } .foot__links a { font-size: 15px; color: var(--ink-2); transition: color 0.3s; } .foot__links a:hover { color: #fff; } .foot__links a[aria-current='page'] { color: #fff; } .foot__trust { position: relative; margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .foot__trust svg { width: 22px; height: 22px; color: var(--g); margin-top: 2px; } .foot__trust p { font-size: 14px; color: var(--ink-3); line-height: 1.6; } .foot__trust strong { color: var(--ink); font-weight: 600; } .foot__base { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--ink-4); } .foot__base a { color: var(--ink-3); transition: color 0.3s; } .foot__base a:hover { color: #fff; } .foot__legal { display: flex; gap: 20px; flex-wrap: wrap; } @media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } } /* ---------- Misc ---------------------------------------------------------- */ .divider { height: 1px; background: var(--line); } .paper .divider { background: var(--paper-line); } .note { font-size: 13px; color: var(--ink-4); } .paper .note { color: var(--paper-ink-3); } .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--g-hi); } .icon svg { width: 22px; height: 22px; } .paper .icon { border-color: var(--paper-line); background: #fff; color: var(--g-deep); } .person { display: flex; flex-direction: column; min-height: 260px; } .person__mono { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-stretch: 112%; font-size: 21px; letter-spacing: -0.02em; color: #fff; background: radial-gradient(circle at 50% 38%, #1a1a1a, #000 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(110, 231, 183, 0.18), 0 0 40px -6px rgba(var(--g-rgb), 0.55); } .person__name { margin-top: auto; padding-top: 34px; font-size: 24px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.025em; } .person__role { margin-top: 6px; color: var(--ink-3); font-size: 15px; } /* Terminal: the replay in the home story, the guard on the threats page */ .term { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(6, 8, 8, 0.82); overflow: hidden; box-shadow: 0 40px 120px -60px rgba(var(--g-rgb), 0.5); } .term__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; } .term__dots { display: flex; gap: 6px; } .term__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); } .term__clock { margin-left: auto; color: var(--g); font-variant-numeric: tabular-nums; } .term__body { padding: 10px 0; font-family: var(--mono); font-size: 13.5px; min-height: 480px; } .tl { display: grid; grid-template-columns: 64px 148px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 20px; color: var(--ink-2); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.6s; } .tl .ts { color: var(--ink-4); font-variant-numeric: tabular-nums; } .tl .ep { color: #fff; } .tl .tag { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; } .tl .tag--p { border-color: rgba(52, 211, 153, 0.55); color: var(--g-hi); background: rgba(16, 185, 129, 0.1); } .tl .tag--f { border-color: #fff; background: #fff; color: #000; } .js .tl { opacity: 0.08; } .js .tl.is-on { opacity: 1; } .tl.is-now { background: rgba(255, 255, 255, 0.04); } .term__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.06em; } @media (max-width: 760px) { .tl { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; font-size: 12px; padding: 9px 14px; } .tl .what { display: none; } .term__body { min-height: 0; } .log { font-size: 13px; } .ll { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; padding: 4px 0; } .ll__what { display: none; } .ll__ev { display: none; } .log__head { font-size: 11px; letter-spacing: 0.02em; } } /* ---------- Reduced motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.2s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-lines] .ln > span { transform: none !important; } } /* The daylight section rides up over the last of the flood: same colour, so the seam is invisible, and the page never holds on a blank white screen. */ /* the white section waits under the story's layers, already in place, and is uncovered the moment the wash completes (site.js sets the overlap) */ .story + .paper, .story + .glide { position: relative; z-index: 1; margin-top: -45vh; margin-top: -45svh; } /* The glide (site.js): below the home story each [data-glide] block keeps its place on the page as an empty track as tall as its content, and the content rides a fixed stage that site.js scrolls to wherever the page's spring has got to. The sheet has a screen of room above and below the content, so the stage can bring it in from below and carry it out past the top. The stage is overflow: hidden (not clip) on purpose: what the browser scrolls into view itself scrolls the stage, and site.js hands that on to the page. Without script, or with reduced motion, it's plain page. */ .glide { position: relative; z-index: 1; } .glide__sheet { display: flow-root; } .glide.is-on > .glide__stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; overflow-anchor: none; will-change: scroll-position; scroll-padding-top: calc(var(--nav-h) + 24px); } .glide.is-on .glide__sheet { position: relative; will-change: transform; } .glide.is-on .glide__sheet::before, .glide.is-on .glide__sheet::after { content: ''; display: block; height: 100vh; } .glide.is-on .glide__sheet > * { pointer-events: auto; } @media print { .glide.is-on { height: auto !important; } .glide.is-on > .glide__stage { position: static; overflow: visible; } .glide.is-on .glide__sheet { transform: none !important; } .glide.is-on .glide__sheet::before, .glide.is-on .glide__sheet::after { display: none; } } /* ========================================================================== Home sections ========================================================================== */ .evidence-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; } /* The systems that move money: four photographs, staggered like a slow pan */ .systems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; } .systems__card { margin: 0; aspect-ratio: 4 / 5.3; } .systems__card:nth-child(even) { margin-top: clamp(28px, 5vw, 72px); } .systems__card figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: grid; gap: 6px; font-size: clamp(17px, 1.5vw, 22px); font-weight: 680; font-stretch: 106%; letter-spacing: -0.02em; color: #fff; } .systems__card figcaption .label { color: var(--g-hi); } @media (max-width: 900px) { .systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .systems__grid { gap: 10px; } .systems__card figcaption { left: 14px; right: 14px; bottom: 14px; font-size: 15px; } } /* Engine */ .engine__stats { margin-top: clamp(64px, 8vw, 112px); text-align: center; --gap: 32px; } .engine__stats .stat__label { margin-inline: auto; font-size: clamp(18px, 1.45vw, 22px); max-width: 340px; } .engine__foot { margin-top: clamp(48px, 6vw, 84px); display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Findings with photographs */ .find--photo { padding: 0; } .find--photo .find__img { position: absolute; inset: 0; border-radius: inherit; z-index: 0; } .find--photo > .card__n { position: relative; z-index: 1; padding: 26px 28px 0; } .find--photo > div:last-child { position: relative; z-index: 1; padding: 0 28px 28px; } .find--end { padding: clamp(24px, 2.4vw, 34px); } /* ========================================================================== Inner pages ========================================================================== */ /* left-aligned hero copy sits at the screen's left margin, clear of the eclipse, rather than in the centred column; centred heroes keep the column */ .phero__copy { max-width: none; } .phero--center .phero__copy { max-width: calc(var(--wrap) + 2 * var(--gutter)); } .phero__copy > .lead, .phero__copy > .actions { max-width: 640px; } .phero--center .phero__copy > * { margin-inline: auto; } .phero .eyebrow { margin-bottom: 22px; } .phero--short .display, .phero .h1 { font-size: clamp(46px, 6.6vw, 108px); } @media (max-width: 760px) { .phero { align-items: end; padding-top: 50vh; padding-top: 50svh; } .phero--short { padding-top: 38vh; padding-top: 38svh; } .phero--top { align-items: start; padding-top: calc(var(--nav-h) + 40px); } } .stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats-strip > div { padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); } .stats-strip > div:first-child { border-left: 0; padding-left: 0; } .stats-strip .stat__num { font-size: clamp(44px, 5.2vw, 84px); } .stats-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats-strip--4 .stat__num { font-size: clamp(40px, 4.4vw, 72px); } .stats-strip__src { margin-top: 18px; } @media (max-width: 1024px) and (min-width: 761px) { .stats-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-strip--4 > div:nth-child(3) { border-left: 0; padding-left: 0; } .stats-strip--4 > div:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 760px) { .stats-strip { grid-template-columns: minmax(0, 1fr); } .stats-strip > div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } .stats-strip > div:first-child { border-top: 0; } } .feature { display: flex; flex-direction: column; gap: 18px; min-height: 230px; } .feature .h3 { margin-top: auto; } .feature p { color: var(--ink-2); font-size: 16px; line-height: 1.55; } .paper .feature p { color: var(--paper-ink-2); } .checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); } .checks > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 30px 28px 30px 0; border-bottom: 1px solid var(--line); } .checks h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; } .checks p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; } .paper .checks, .paper .checks > div { border-color: var(--paper-line); } /* the home page's: titles only, and big */ .checks--big > div { grid-template-columns: 76px minmax(0, 1fr); gap: 26px; align-items: center; padding: 40px 32px 40px 0; } .checks--big .icon { width: 76px; height: 76px; border-radius: 20px; } .checks--big .icon svg { width: 36px; height: 36px; } .checks--big h3 { font-size: clamp(22px, 2.1vw, 31px); line-height: 1.2; letter-spacing: -0.02em; } /* ...lit in turn by the scroll (site.js): a pale mint, its line icon black */ .checks--big .icon { transition: color 0.35s, background-color 0.35s, border-color 0.35s, box-shadow 0.5s; } .checks--big > div.is-on .icon { color: var(--paper-ink); background: #e1f7eb; border-color: rgba(5, 150, 105, 0.2); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05), 0 8px 26px -10px rgba(16, 185, 129, 0.4); } /* the four verbs on white */ .paper .verbs__list { border-left-color: var(--paper-line); } .paper .verb__n { color: rgba(11, 11, 11, 0.5); } .paper .verb__t { color: rgba(11, 11, 11, 0.34); } .paper .verb.is-on .verb__n { color: var(--g-deep); } .paper .verb.is-on .verb__t { color: var(--paper-ink); } .paper .verb__d { color: var(--paper-ink-2); } /* The home page's white stretch is one fixed sheet (site.js brings it in under the story and fades it out across the dusk, the whole screen at once), so its sections are clear. Without script they keep their paper. */ .daylight { position: fixed; inset: 0; z-index: -1; background: var(--paper); opacity: 0; pointer-events: none; } .js .story ~ .paper, .js .story ~ .glide .paper { background: none; } .dusk { height: clamp(280px, 70vh, 760px); } /* a slow section grows by its hold (site.js), so its slide never runs into the next */ .section[data-slow], .section[data-arrive] { padding-bottom: calc(var(--section-y) + var(--hold, 0px)); } [data-slow] > .wrap, [data-arrive] > .wrap { will-change: transform; } .paper .checks p { color: var(--paper-ink-2); } @media (max-width: 1024px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .checks { grid-template-columns: minmax(0, 1fr); } } .incidents { display: grid; gap: 0; border-top: 1px solid var(--line); } .incident { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .incident b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .incident span { color: var(--ink-2); } @media (max-width: 640px) { .incident { grid-template-columns: minmax(0, 1fr); gap: 4px; } } /* Closer than it looks: three headlines, set like a front page */ .headlines__list { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--line); } .headline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px 32px; align-items: baseline; padding: clamp(24px, 3.2vw, 44px) 0; border-bottom: 1px solid var(--line); } .headline__y { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--g-hi); } .headline__t { font-size: clamp(30px, 4.6vw, 72px); } .headline__s { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; white-space: nowrap; } @media (max-width: 760px) { .headline { grid-template-columns: minmax(0, 1fr); gap: 10px; } .headline__s { text-align: left; } } /* The other blade: the incidents large, then the guard at work */ .guard__cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); } .guard__case { padding-top: 22px; border-top: 1px solid var(--line-2); } .guard__big { margin-top: 14px; font-family: var(--display); font-size: clamp(26px, 2.9vw, 44px); line-height: 1.04; font-weight: 720; font-stretch: 108%; letter-spacing: -0.03em; text-wrap: balance; } .guard__how { margin-top: clamp(56px, 8vw, 112px); } .guard__term .term__body { min-height: 0; } .guard__term .tl { grid-template-columns: 112px minmax(0, 1fr) auto; } .guard__term .tl .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .js .guard__term .tl { transform: translateY(8px); } .js .guard__term.is-in .tl { opacity: 1; transform: none; transition-delay: calc(0.5s + var(--i) * 0.35s); } @media (max-width: 860px) { .guard__cases { grid-template-columns: minmax(0, 1fr); gap: 28px; } } @media (max-width: 760px) { .guard__term .tl { grid-template-columns: 88px minmax(0, 1fr) auto; } .guard__term .tl .what { display: block; } } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .split--top { align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } } .offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .office { aspect-ratio: 16 / 11; } .offices--one { grid-template-columns: minmax(0, 1fr); } .offices--one .office { aspect-ratio: 21 / 9; } .office figcaption { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; } .office figcaption .h3 { color: #fff; } .office figcaption p { margin-top: 6px; color: var(--ink-2); font-size: 15px; } @media (max-width: 760px) { .offices { grid-template-columns: minmax(0, 1fr); } } .usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .usecase { aspect-ratio: 4 / 4.6; } .usecase figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; } .usecase figcaption .h3 { color: #fff; font-size: 22px; } .usecase figcaption p { margin-top: 6px; color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.5; } @media (max-width: 1024px) { .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .usecases { grid-template-columns: minmax(0, 1fr); } .usecase { aspect-ratio: 4 / 3.4; } } /* Contact: the heading and the ways to reach us beside a plain, solid form */ .contact { padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 112px)); } .contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 104px); align-items: start; } .contact__intro .lead { margin-top: 24px; max-width: 30em; } .contact__list { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; border-top: 1px solid #262626; } .contact__list li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid #262626; font-size: 18px; color: #fff; } .contact__list li > span { color: #a3a3a3; font-size: 16px; } .contact__list a:hover { color: var(--g-hi); } .contact__more { margin-top: 28px; max-width: 32em; font-size: 16px; line-height: 1.6; color: #a3a3a3; } .contact__more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); } @media (max-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .contact__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .form__done h3 { margin-bottom: 10px; } .form__done p + p { margin-top: 10px; } .form__done a { color: var(--g-hi); }