/* We Are Pioneers site: shared components. System: UI/UX Pro Max "Minimalism & Swiss Style" + "Trust & Authority + Conversion". Every value comes from tokens.css (primitive -> semantic -> component). Edit tokens in system/tokens.json. Grid: 12 columns, one pair of margins, flush left, radius 0, no shadows, one accent. */ :root { color-scheme: light; --margin: max(var(--primitive-spacing-8), env(safe-area-inset-left, 0px)); --margin-r: max(var(--primitive-spacing-8), env(safe-area-inset-right, 0px)); --bar: var(--nav-height); --mark: var(--nav-mark); --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --f-text: "Inter", "Helvetica Neue", Arial, sans-serif; --ease-out: var(--primitive-motion-ease-out); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + var(--primitive-spacing-6)); } body { margin: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--f-text); font-size: var(--primitive-fontSize-body); line-height: 1.55; font-feature-settings: "ss01", "cv11"; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 97, 35, .25); } body:not(.has-dawn) { padding-top: calc(var(--bar) + env(safe-area-inset-top, 0px)); } img, video { display: block; max-width: 100%; height: auto; } h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; } p { margin: 0; } a { color: inherit; } :focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; } ::selection { background: var(--color-accent); color: var(--color-on-accent); } .skip { position: absolute; left: -9999px; top: 0; } .skip:focus { left: var(--margin); top: var(--primitive-spacing-4); z-index: 60; background: var(--color-background); color: var(--color-foreground); padding: var(--primitive-spacing-2) var(--primitive-spacing-4); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Grid */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); padding-left: var(--margin); padding-right: var(--margin-r); max-width: 1600px; margin: 0 auto; } /* Buttons and links */ .btn { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; min-height: var(--button-height); padding: 0 var(--button-padding-x); background: var(--button-bg); color: var(--button-fg); border: 0; border-radius: var(--button-radius); font-family: var(--f-text); font-weight: 600; font-size: var(--primitive-fontSize-body); text-decoration: none; cursor: pointer; transition: background-color var(--primitive-motion-fast) ease, transform var(--primitive-motion-fast) var(--ease-out); } .btn:hover { background: var(--button-hover-bg); } .btn:active { transform: translateY(1px); } .btn--ink { background: var(--color-foreground); color: var(--color-on-night); } .btn--ink:hover { background: var(--primitive-color-ink-700); } .link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color var(--primitive-motion-fast) ease; } .link:hover { color: var(--color-accent-text); } .more { display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--primitive-motion-fast) ease; } /* The arrow slides on hover without changing the link's width, so links in wrapping rows never jump */ .more::after { content: "\2192"; display: inline-block; text-decoration: none; transition: transform var(--primitive-motion-fast) var(--ease-out); } .more:hover { color: var(--color-accent-text); } .more:hover::after { transform: translateX(var(--primitive-spacing-2)); } /* Header: one fixed bar. Day state by default; a solid night bar over a dawn stage (body.has-dawn) until the stage has passed. The night bar is solid black, which matches the top of the sky, so text never scrolls behind a see-through bar. */ .nav { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: var(--nav-day-bg); color: var(--color-foreground); transition: background-color var(--primitive-motion-fast) ease, color var(--primitive-motion-fast) ease; } .nav .bar { position: relative; z-index: 2; align-items: center; min-height: var(--bar); } .nav .logo { grid-column: 1 / 4; display: flex; align-items: center; height: var(--mark); width: max-content; } .nav .logo img { height: 100%; width: auto; } .nav .logo-night { display: none; } .nav .links { grid-column: 4 / 11; justify-self: end; } .nav .links ul { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--primitive-spacing-8); list-style: none; margin: 0; padding: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; } .nav .links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; opacity: .78; transition: opacity var(--primitive-motion-fast) ease; } .nav .links a:hover, .nav .links a[aria-current="page"] { opacity: 1; } .nav .links > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--primitive-motion-fast) var(--ease-out); } .nav .links > ul > li > a:hover::after { transform: scaleX(1); } .nav .links > ul > li > a[aria-current="page"]::after { transform: scaleX(1); background: var(--color-accent); } .nav .end { grid-column: 11 / 13; justify-self: end; display: flex; align-items: center; gap: var(--primitive-spacing-4); padding-left: var(--primitive-spacing-8); } .nav .btn { min-height: 48px; font-size: 1rem; padding: 0 var(--primitive-spacing-6); } .menu-btn { display: none; min-height: 44px; min-width: 44px; padding: 0 var(--primitive-spacing-2); background: none; border: 0; color: inherit; font: 600 var(--primitive-fontSize-small) / 1 var(--f-text); cursor: pointer; } .has-dawn .nav:not(.is-day) { background: var(--nav-night-bg); color: var(--color-on-night); } .has-dawn .nav:not(.is-day) .logo-night { display: block; } .has-dawn .nav:not(.is-day) .logo-day { display: none; } /* Services drop-down: opens on hover or keyboard focus; the small arrow button toggles it for touch and keyboard (site.js) */ .nav .links .has-sub { position: relative; display: flex; align-items: center; gap: var(--primitive-spacing-1); } .nav .sub-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; opacity: .85; } .nav .sub-btn::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--primitive-motion-fast) var(--ease-out); } .nav .has-sub.is-open .sub-btn::before, .nav .has-sub:hover .sub-btn::before { transform: translateY(2px) rotate(225deg); } .nav .links .sub { position: absolute; left: calc(var(--primitive-spacing-4) * -1); top: 100%; min-width: 15rem; display: flex; flex-direction: column; gap: 0; padding: var(--primitive-spacing-2) 0; background: var(--nav-day-bg); color: var(--color-foreground); border-top: var(--figure-rule) solid var(--color-accent); display: none; } .nav .links .sub a { display: flex; min-height: 46px; padding: 0 var(--primitive-spacing-6); opacity: 1; font-size: 1rem; } .nav .links .sub a:hover, .nav .links .sub a[aria-current="page"] { color: var(--color-accent-text); text-decoration: none; } .nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.is-open .sub { display: flex; animation: sub-in var(--primitive-motion-fast) var(--ease-out); } @keyframes sub-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } } .has-dawn .nav:not(.is-day) .links .sub { background: var(--nav-night-bg); color: var(--color-on-night); } .has-dawn .nav:not(.is-day) .links .sub a:hover, .has-dawn .nav:not(.is-day) .links .sub a[aria-current="page"] { color: var(--color-accent); } /* In the mobile menu the three services sit indented under Services, folded away until the arrow beside it is tapped */ .menu li:has(> .menu-sub-btn) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--primitive-spacing-4); } .menu .menu-sub-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .menu .menu-sub-btn::before { content: ""; width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--primitive-motion-fast) var(--ease-out); } .menu .menu-sub-btn[aria-expanded="true"]::before { transform: translateY(3px) rotate(225deg); } .menu .menu-sub { flex-basis: 100%; } .menu .menu-sub { list-style: none; margin: 0 0 var(--primitive-spacing-4); padding: 0 0 0 var(--primitive-spacing-6); display: flex; flex-direction: column; gap: 0; } .menu .menu-sub a { font-family: var(--f-text); font-weight: 500; font-size: var(--primitive-fontSize-lead); letter-spacing: 0; padding-block: var(--primitive-spacing-1); color: var(--color-on-night-muted); } /* Mobile menu */ .menu { position: fixed; inset: 0; z-index: 1; background: var(--color-night); color: var(--color-on-night); padding: calc(env(safe-area-inset-top, 0px) + var(--bar)) var(--margin-r) var(--primitive-spacing-12) var(--margin); overflow-y: auto; } .menu[hidden] { display: none; } [hidden] { display: none !important; } .menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-2); } .menu ul a { display: block; padding-block: var(--primitive-spacing-2); font-family: var(--f-display); font-weight: 600; font-size: var(--primitive-fontSize-head); letter-spacing: -0.04em; line-height: 1.05; text-decoration: none; } .menu ul a[aria-current="page"] { color: var(--color-accent); } .menu .btn { margin-top: var(--primitive-spacing-12); } .menu-open { overflow: hidden; } .menu-open .nav { background: var(--nav-night-bg); color: var(--color-on-night); } .menu-open .nav .logo-night { display: block; } .menu-open .nav .logo-day { display: none; } /* Dawn stage: text on the left, the Higgsfield sun (a cut-out disc) rising on the right as the page scrolls. The glow around the sun is drawn here and grows with the rise; site.js sets --e from 0 (night) to 1 (risen). Opt in with body.has-dawn. */ .dawn { position: relative; height: 210svh; background: var(--color-night); color: var(--color-on-night); } .dawn--short { height: 170svh; } .dawn .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } /* The landscape follows the micro1 build: a coded sky, a photographic cut-out of the mountains (generated with Higgsfield) and a fine grain over everything. site.js sets --e from 0 (night) to 1 (sunrise) as the stage scrolls: the dawn sky fades in over the night sky, the sun glow rises behind the ridge and the land lifts out of the dark. The copy stays light throughout. */ .dawn { --e: 0; --x: 0; } .dawn .sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .dawn .sky-night, .dawn .sky-dawn, .dawn .grain { position: absolute; inset: 0; } .dawn .sky-night { background: linear-gradient(#030407 0%, #070A10 45%, #10141B 72%, #161A21 100%); } .dawn .sky-dawn { background: linear-gradient(#161C25 0%, #262F3B 28%, #444C58 50%, #7E7470 66%, #C9805C 78%, #FF7A3D 86%, #FF6123 93%); opacity: var(--e); } .dawn .sun { position: absolute; left: 74%; top: 83%; width: min(30vw, 46svh); aspect-ratio: 1; border-radius: 50%; transform: translate3d(-50%, calc(-50% + (1 - var(--e)) * 26svh - var(--x, 0) * 34svh), 0); background: radial-gradient(circle, #FFF6E8 0%, #FFE0B0 16%, #FFB070 30%, rgba(255, 122, 61, .75) 44%, rgba(255, 97, 35, .3) 58%, rgba(255, 97, 35, 0) 72%); filter: blur(4px); opacity: calc(.15 + .85 * var(--e)); will-change: transform, opacity; } .dawn .sun::after { content: ""; position: absolute; inset: -110%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 90, .38), rgba(255, 97, 35, .14) 45%, rgba(255, 97, 35, 0) 100%); opacity: var(--e); } .dawn .land { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; min-height: 7svh; object-fit: cover; object-position: 62% 100%; filter: brightness(calc(.32 + .68 * var(--e))) saturate(calc(.6 + .4 * var(--e))); animation: land-in 1.6s var(--ease-out) both; } .dawn .grain { background: url("../img/grain.png?v=20261026") repeat; background-size: 180px; mix-blend-mode: overlay; opacity: .2; animation: grain-in 1.2s ease both; } /* Birds: a loose flock that glides towards the sun once the dawn is nearly complete (.is-late, set by site.js). Wings held still; each bird drifts a few pixels within the flock as it crosses. Hidden under reduced motion. */ .dawn .flock { position: absolute; left: 0; top: 50%; width: 18vw; height: 6vw; opacity: 0; transform: translate3d(-24vw, 0, 0); } .dawn.is-late .flock { opacity: 1; animation: flock-cross 26s cubic-bezier(.45, .05, .55, .95) infinite; } .dawn .bird { position: absolute; left: calc(var(--x) * .5vw); top: calc(var(--y) * .24vw); width: calc(3vw * var(--s)); min-width: 14px; animation: bird-drift 9s ease-in-out var(--b) infinite alternate; } .dawn .bird svg { display: block; width: 100%; height: auto; overflow: visible; } .dawn .bird path { fill: #11161D; opacity: .86; } /* Small variations so the flock does not read as copies: a few birds bank slightly or face a touch higher */ .dawn .bird:nth-child(2n) svg { transform: rotate(-4deg); } .dawn .bird:nth-child(3n) svg { transform: rotate(5deg) scaleX(.92); } @keyframes flock-cross { 0% { transform: translate3d(-24vw, 2vh, 0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate3d(112vw, -6vh, 0); opacity: 0; } } @keyframes bird-drift { from { transform: translate3d(0, -2px, 0); } to { transform: translate3d(6px, 3px, 0); } } @keyframes land-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } } @keyframes grain-in { from { opacity: 0; } } .dawn .copy { transition: color .5s var(--ease-out); } .dawn .copy { position: relative; z-index: 2; padding-top: calc(var(--bar) + clamp(56px, 10svh, 120px)); row-gap: var(--primitive-spacing-8); } .dawn h1 { grid-column: 1 / 8; font-size: var(--primitive-fontSize-display); line-height: .9; letter-spacing: -0.05em; } .dawn .sub { grid-column: 1 / 6; max-width: 34ch; font-size: var(--primitive-fontSize-lead); line-height: 1.35; } .dawn .act { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--primitive-spacing-4); align-items: flex-start; color: var(--color-on-night-muted); max-width: 40ch; } /* Page head for pages without a dawn stage */ .pagehead { padding-block: var(--primitive-spacing-24) var(--primitive-spacing-16); row-gap: var(--primitive-spacing-8); } .pagehead h1 { grid-column: 1 / 13; font-size: var(--primitive-fontSize-display); line-height: .9; letter-spacing: -0.05em; } .pagehead .lead { grid-column: 1 / 8; max-width: 38ch; font-size: var(--primitive-fontSize-lead); line-height: 1.35; } .pagehead .aside { grid-column: 9 / 13; align-self: end; display: flex; flex-direction: column; gap: var(--primitive-spacing-4); align-items: flex-start; } .pagehead.night { background: var(--color-night); color: var(--color-on-night); } .pagehead.night .aside { color: var(--color-on-night-muted); } /* Sections */ .section { padding-top: var(--spacing-section); } .section--surface { margin-top: var(--spacing-section); padding-block: var(--primitive-spacing-24); background: var(--color-surface); } .section--night { margin-top: var(--spacing-section); padding-block: var(--primitive-spacing-24); background: var(--color-night); color: var(--color-on-night); } /* Section head: heading in the first seven columns, its note starting on column nine and sitting on the heading's last line. Both edges are grid lines, so every section reads the same way, flush left. */ .section-head { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); row-gap: var(--primitive-spacing-6); align-items: end; margin-bottom: var(--primitive-spacing-16); } .section-head > :first-child { grid-column: 1 / 8; } .section-head > :not(:first-child) { grid-column: 9 / 13; } .section-head h2 { font-size: var(--primitive-fontSize-head); line-height: .98; max-width: 16ch; } .section-head p { max-width: 40ch; font-size: var(--primitive-fontSize-lead); line-height: 1.35; } .section-head .note { font-size: var(--primitive-fontSize-body); line-height: 1.55; max-width: 34ch; } .section-foot { grid-column: 1 / 13; margin-top: var(--primitive-spacing-12); } /* Figures */ .figures { list-style: none; margin: 0; row-gap: var(--primitive-spacing-12); } .figures li { grid-column: span 4; container-type: inline-size; display: flex; flex-direction: column; gap: var(--primitive-spacing-4); padding-top: var(--primitive-spacing-6); border-top: var(--figure-rule) solid currentColor; } .figures li:first-child { border-top-color: var(--color-accent); } .figures b { font-family: var(--f-display); font-weight: 600; font-size: min(var(--figure-size), 31cqi); line-height: .85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; } .figures span { max-width: 28ch; } .figures span strong { display: block; font-weight: 600; } /* Hours calculator: any [data-calc] block */ .calc { background: var(--color-surface); padding-block: var(--primitive-spacing-16); margin-top: var(--primitive-spacing-24); } .calc .q { grid-column: 1 / 8; font-family: var(--f-display); font-weight: 500; font-size: var(--primitive-fontSize-lead); line-height: 1.35; letter-spacing: -0.015em; } .calc select { font: inherit; color: var(--color-foreground); background: var(--color-background); border: 0; border-bottom: 3px solid var(--color-accent); border-radius: 0; padding: 0 .3em; margin: 0 .15em; cursor: pointer; min-height: 44px; } .calc .out { grid-column: 9 / 13; align-self: center; font-family: var(--f-display); font-weight: 700; font-size: var(--primitive-fontSize-head); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .calc .out small { display: block; margin-top: var(--primitive-spacing-4); font-family: var(--f-text); font-weight: 400; font-size: var(--primitive-fontSize-small); letter-spacing: 0; color: var(--color-muted-foreground); } .calc .note { grid-column: 1 / 8; margin-top: var(--primitive-spacing-6); font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } /* List rows: a heavy rule, a name, a sentence, a link. Use for services, steps or issues. */ .list { grid-column: 1 / 13; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-12); } .list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); row-gap: var(--primitive-spacing-4); padding-top: var(--primitive-spacing-6); border-top: var(--figure-rule) solid currentColor; } .list h3 { grid-column: 1 / 6; font-size: var(--primitive-fontSize-lead); line-height: 1.15; letter-spacing: -0.02em; } .list p { grid-column: 6 / 11; max-width: 46ch; } .list .more { grid-column: 11 / 13; justify-self: end; align-self: start; } /* Rows: a picture on the left, its words on the right */ .rows { grid-column: 1 / 13; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-16); } .rows > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--primitive-spacing-6) var(--spacing-gutter); padding-top: var(--primitive-spacing-6); border-top: var(--figure-rule) solid currentColor; } .rows figure { grid-column: 1 / 8; grid-row: 1 / 3; margin: 0; } .rows h3, .rows .text { grid-column: 9 / 13; } .rows h3 { font-size: var(--primitive-fontSize-lead); line-height: 1.15; letter-spacing: -0.02em; } .rows .text { display: flex; flex-direction: column; gap: var(--primitive-spacing-4); align-self: start; } /* Picture frame with an overlaid caption, or a caption beneath (.media) */ .frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); } .frame img, .frame video { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(1.25) contrast(1.04); } /* The Wright brothers' wind tunnel photograph: black and white, not graded */ img[src*="wright-brothers-wind-tunnel"] { filter: grayscale(1) contrast(1.06) !important; } /* The archive footage is already warm; a lighter grade keeps it from turning yellow */ .frame video { filter: sepia(.08) saturate(1.05) contrast(1.04); } .frame figcaption { position: absolute; left: 0; top: 0; max-width: 80%; padding: var(--primitive-spacing-2) var(--primitive-spacing-4); background: rgba(0, 0, 0, .62); color: var(--color-on-night); font-size: var(--primitive-fontSize-small); } .media { margin: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-2); min-width: 0; } .media .frame figcaption { position: static; max-width: none; padding: 0; background: none; color: var(--color-muted-foreground); } .media > figcaption { font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } .frame--tall { aspect-ratio: 4 / 5; } .frame--wide { aspect-ratio: 21 / 9; } /* Long-form text */ .prose { grid-column: 1 / 9; max-width: var(--primitive-size-measure); display: flex; flex-direction: column; gap: var(--primitive-spacing-6); } .prose h2 { font-size: var(--primitive-fontSize-lead); line-height: 1.15; letter-spacing: -0.02em; margin-top: var(--primitive-spacing-8); } .prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--primitive-spacing-2); } /* People */ .person { display: flex; flex-direction: column; gap: var(--primitive-spacing-6); min-width: 0; } .person figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-surface); } .person img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .person:hover img { transform: scale(1.02); } .person h3 { font-size: var(--primitive-fontSize-lead); letter-spacing: -0.02em; } .person .role { color: var(--color-muted-foreground); } .person .bio { max-width: 48ch; } .half-l { grid-column: 1 / 7; } .half-r { grid-column: 7 / 13; } /* Quotes */ .quote { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--primitive-spacing-6); align-content: start; min-width: 0; } .quote img { width: 112px; height: 112px; object-fit: cover; } .quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.3; letter-spacing: -0.015em; } .quote figcaption { grid-column: 2; font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } .quote figcaption strong { color: var(--color-foreground); font-weight: 600; } /* Banded sections butt against each other with no white gap */ .section--surface + .section--night, .section--night + .section--surface, .section--surface + .cta, .section--night + .cta { margin-top: 0; } /* CTA band (orange). Ends most pages, directly above the footer. */ .cta { background: var(--cta-bg); color: var(--cta-fg); padding-block: var(--primitive-spacing-24); margin-top: var(--spacing-section); } .cta h2 { grid-column: 1 / 9; font-size: var(--primitive-fontSize-head); line-height: 1; } .cta p { grid-column: 1 / 7; margin-top: var(--primitive-spacing-8); font-size: var(--primitive-fontSize-lead); line-height: 1.35; } .cta .acts { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; justify-content: flex-end; display: flex; gap: var(--primitive-spacing-6) var(--primitive-spacing-8); align-items: center; flex-wrap: wrap; } .cta .link:hover { color: inherit; text-decoration-thickness: 3px; } /* Forms */ .form { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--primitive-spacing-8) var(--spacing-gutter); } .field { display: flex; flex-direction: column; gap: var(--primitive-spacing-2); min-width: 0; } .field--full { grid-column: 1 / -1; } .field label, .field legend { font-size: var(--primitive-fontSize-small); font-weight: 600; } .field .hint { font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } .field input, .field textarea, .field select { width: 100%; min-height: var(--field-height); padding: var(--primitive-spacing-2) var(--primitive-spacing-4); font: inherit; color: var(--color-foreground); background: var(--field-bg); border: 0; border-bottom: var(--field-border-width) solid var(--field-border); border-radius: 0; accent-color: var(--color-accent); } .field textarea { min-height: 9rem; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 0; } .field [aria-invalid="true"] { border-bottom-color: var(--color-accent-text); } .field .error { font-size: var(--primitive-fontSize-small); color: var(--color-accent-text); font-weight: 600; } .check { display: flex; gap: var(--primitive-spacing-4); align-items: flex-start; } .check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--color-accent); } .form .send { grid-column: 1 / -1; display: flex; gap: var(--primitive-spacing-6); align-items: center; flex-wrap: wrap; } .form .status { font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } /* Claude Partner Network: a strip on the homepage; the badge keeps its own light ground */ .partner-strip .grid { align-items: center; row-gap: var(--primitive-spacing-8); } .partner-badge { grid-column: 1 / 6; margin: 0; padding: var(--primitive-spacing-6); background: var(--color-partner-ground); } .partner-badge img { width: 100%; height: auto; } .partner-text { grid-column: 7 / 13; display: flex; flex-direction: column; gap: var(--primitive-spacing-6); } .partner-text h2 { font-size: var(--primitive-fontSize-head); line-height: .98; max-width: 14ch; } .partner-text p { font-size: var(--primitive-fontSize-lead); line-height: 1.35; max-width: 34ch; } @media (max-width: 1000px) { .partner-badge { grid-column: 1 / 9; } .partner-text { grid-column: 1 / 13; } } @media (max-width: 720px) { .partner-badge { grid-column: 1 / 13; } } /* Footer: the logo, the address and one small legal line */ .foot { background: var(--footer-bg); color: var(--footer-fg); padding-block: var(--primitive-spacing-24) var(--primitive-spacing-8); } .foot .brands { grid-column: 1 / 7; display: flex; align-items: center; gap: var(--primitive-spacing-8); } .foot .mark { display: block; width: min(100%, 9.5rem); flex: none; } .foot .foot-partner { display: block; height: 2.75rem; width: auto; flex: none; } .foot .mark img { width: 100%; height: auto; } .foot nav { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--primitive-spacing-8) var(--spacing-gutter); align-content: start; } .foot nav h2 { font-family: var(--f-text); font-size: var(--primitive-fontSize-small); font-weight: 600; letter-spacing: 0; color: var(--footer-muted); margin-bottom: var(--primitive-spacing-4); } .foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-1); } .foot nav a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; white-space: nowrap; } .foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; } .foot .mail { grid-column: 1 / 13; margin-top: var(--primitive-spacing-24); font-family: var(--f-display); font-weight: 600; font-size: min(var(--primitive-fontSize-head), 7.2vw); letter-spacing: -0.04em; line-height: 1; text-decoration: none; white-space: nowrap; justify-self: start; } .foot .mail:hover { color: var(--color-accent); } .foot .where { grid-column: 7 / 13; align-self: end; justify-self: end; text-align: right; font-style: normal; font-size: var(--primitive-fontSize-body); line-height: 1.5; color: var(--footer-fg); } .foot .legal { display: flex; gap: var(--primitive-spacing-6); flex-wrap: wrap; } .foot .legal a, .foot .legal button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: none; cursor: pointer; } .foot .legal a:hover, .foot .legal button:hover { color: var(--footer-fg); text-decoration: underline; text-underline-offset: 4px; } .foot .meta { grid-column: 1 / 13; margin-top: var(--primitive-spacing-16); display: flex; justify-content: space-between; gap: var(--primitive-spacing-6); flex-wrap: wrap; font-size: var(--primitive-fontSize-small); color: var(--footer-muted); } .foot .meta span { max-width: 72ch; } .foot .link:hover { color: var(--footer-fg); } /* Video player: a poster button that swaps in the real player on click, so no third-party script loads until someone presses play.
...
*/ .player { margin: 0; } .player .screen { position: relative; aspect-ratio: 16 / 9; background: var(--color-night); overflow: hidden; } .player .play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--color-on-night); cursor: pointer; } .player .play img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity var(--primitive-motion-fast) ease; } .player .play:hover img { transform: scale(1.015); opacity: .9; } .player .glyph { position: absolute; left: 50%; top: 50%; width: clamp(4rem, 3rem + 4vw, 7rem); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--color-accent); transition: transform var(--primitive-motion-fast) var(--ease-out), background-color var(--primitive-motion-fast) ease; } .player .glyph::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .9em 0 .9em 1.5em; border-color: transparent transparent transparent var(--color-on-accent); font-size: clamp(.75rem, .6rem + .5vw, 1.1rem); } .player .play:hover .glyph { transform: translate(-50%, -50%) scale(1.06); background: var(--button-hover-bg); } .player .len { position: absolute; left: 0; bottom: 0; padding: var(--primitive-spacing-2) var(--primitive-spacing-4); background: var(--color-night); color: var(--color-on-night); font-size: var(--primitive-fontSize-small); font-weight: 600; font-variant-numeric: tabular-nums; } .player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: none; background: var(--color-night); } /* Format filter: buttons with aria-pressed over a set of [data-format] items (site.js) */ .filters { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-2); margin-bottom: var(--primitive-spacing-12); } .filters button { min-height: 44px; padding: 0 var(--primitive-spacing-6); font: 600 var(--primitive-fontSize-small) / 1 var(--f-text); color: var(--color-foreground); background: var(--color-surface); border: 0; border-radius: 0; cursor: pointer; transition: background-color var(--primitive-motion-fast) ease, color var(--primitive-motion-fast) ease; } .filters button:hover { background: var(--color-surface-strong); } .filters button[aria-pressed="true"] { background: var(--color-foreground); color: var(--color-on-night); } .filters .count { margin-left: var(--primitive-spacing-2); font-weight: 400; opacity: .7; } /* Cards: three across, picture, format line, title, sentence. Video cards carry the player's duration chip. */ .cards { grid-column: 1 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--primitive-spacing-16) var(--spacing-gutter); } .cards > li { position: relative; display: flex; flex-direction: column; gap: var(--primitive-spacing-4); padding-top: var(--primitive-spacing-6); border-top: var(--figure-rule) solid currentColor; min-width: 0; } .cards figure { margin: 0 0 var(--primitive-spacing-2); } .cards .frame { position: relative; } .cards .len { position: absolute; left: 0; bottom: 0; padding: var(--primitive-spacing-1) var(--primitive-spacing-2); background: var(--color-night); color: var(--color-on-night); font-size: var(--primitive-fontSize-small); font-weight: 600; font-variant-numeric: tabular-nums; } .cards .is-video .frame::after { content: ""; position: absolute; right: var(--primitive-spacing-4); bottom: var(--primitive-spacing-4); width: 2.75rem; aspect-ratio: 1; background: var(--color-accent); } .cards .is-video .frame::before { content: ""; position: absolute; z-index: 1; right: calc(var(--primitive-spacing-4) + 1rem); bottom: calc(var(--primitive-spacing-4) + .8rem); border-style: solid; border-width: .58rem 0 .58rem .95rem; border-color: transparent transparent transparent var(--color-on-accent); } .cards h3 { font-size: var(--primitive-fontSize-lead); line-height: 1.15; letter-spacing: -0.02em; } .cards h3 a { text-decoration: none; } .cards h3 a::after { content: ""; position: absolute; inset: 0; } .cards li:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .cards li:hover .frame img { transform: scale(1.02); } .cards .frame img { transition: transform .6s var(--ease-out); } .cards p { max-width: 42ch; } .kind { display: flex; flex-wrap: wrap; gap: var(--primitive-spacing-2) var(--primitive-spacing-4); font-size: var(--primitive-fontSize-small); color: var(--color-muted-foreground); } .kind b { color: var(--color-accent-text); font-weight: 600; } .section--night .kind, .pagehead.night .kind { color: var(--color-on-night-muted); } .section--night .kind b, .pagehead.night .kind b { color: var(--color-accent); } /* Article and video pages: a back link above the head, then the page */ .crumbs { grid-column: 1 / 13; margin-bottom: var(--primitive-spacing-8); font-size: var(--primitive-fontSize-small); } .crumbs a { display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); min-height: 44px; font-weight: 600; text-decoration: none; } .crumbs a::before { content: "\2190"; } .crumbs a:hover { color: var(--color-accent-text); } .pagehead--article h1 { font-size: var(--primitive-fontSize-head); line-height: 1; max-width: 18ch; grid-column: 1 / 11; } .pagehead--article .kind { grid-column: 1 / 13; } .prose blockquote { margin: var(--primitive-spacing-4) 0; padding-left: var(--primitive-spacing-6); border-left: var(--figure-rule) solid var(--color-accent); font-family: var(--f-display); font-weight: 500; font-size: var(--primitive-fontSize-lead); line-height: 1.3; letter-spacing: -0.015em; } .prose h3 { font-size: var(--primitive-fontSize-body); line-height: 1.3; letter-spacing: -0.01em; margin-top: var(--primitive-spacing-4); } .prose figure { margin: var(--primitive-spacing-4) 0; } .prose a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .prose a:hover { color: var(--color-accent-text); } .side { grid-column: 10 / 13; display: flex; flex-direction: column; gap: var(--primitive-spacing-8); align-self: start; position: sticky; top: calc(var(--bar) + var(--primitive-spacing-8)); } .side h2 { font-family: var(--f-text); font-size: var(--primitive-fontSize-small); font-weight: 600; letter-spacing: 0; color: var(--color-muted-foreground); } .side ul { list-style: none; margin: var(--primitive-spacing-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--primitive-spacing-2); } .side a { text-decoration: none; } .side a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Scroll motion (site.js adds .motion on unless reduced motion is on). Heavy rules draw in from the left; pictures settle from a slight zoom; section headings rise out of a mask. */ .motion .list > li[data-rise], .motion .rows > li[data-rise], .motion .cards > li[data-rise], .motion .figures > li[data-rise] { position: relative; border-top-color: transparent; } .motion .list > li[data-rise]::before, .motion .rows > li[data-rise]::before, .motion .cards > li[data-rise]::before, .motion .figures > li[data-rise]::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--figure-rule) * -1); height: var(--figure-rule); background: var(--rule, currentColor); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .motion .figures > li[data-rise]:first-child { --rule: var(--color-accent); } /* Stat rules draw with the scroll itself (site.js sets --draw from 0 to 1 as each figure rises through the screen) */ .motion .figures > li[data-rise]::before, .motion .figures > li.in::before { transform: scaleX(var(--draw, 0)); transition: none; } .motion .list > li.in::before, .motion .rows > li.in::before, .motion .cards > li.in::before, .motion .figures > li.in::before { transform: scaleX(1); } .motion [data-rise] .frame img, .motion .frame[data-rise] img { transform: scale(1.06); transition: transform 1400ms var(--ease-out), filter var(--primitive-motion-fast) ease; } .motion [data-rise].in .frame img, .motion .frame[data-rise].in img { transform: scale(1); } .motion .section-head h2[data-rise] { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.35em, 0); opacity: 1; } .motion .section-head h2[data-rise].in { clip-path: inset(0 0 -0.2em 0); transform: none; transition: clip-path 800ms var(--ease-out), transform 800ms var(--ease-out); } /* Crowd band: faint particles fall out of the section above as you scroll down, land and gather into a crowd behind the text, part around the pointer, then walk off to the right together (site.js). The canvas reaches up behind the previous section.
… */ .sunband { position: relative; isolation: isolate; background: var(--color-background); --fall-reach: 85svh; } .sunband .particle-sun { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--fall-reach) * -1); z-index: -1; width: 100%; height: calc(100% + var(--fall-reach)); pointer-events: none; } /* Hover glimpse: a faint animated diagram that sits behind a list row's title and comes up gently while the row is hovered (or while it is on screen on touch devices). No box, no pop-up: the title stays on top.
  • …
    • */ [data-glimpse] { position: relative; isolation: isolate; } .glimpse { position: absolute; z-index: -1; left: 0; top: var(--primitive-spacing-4); width: min(8.5rem, 30%); margin: 0; pointer-events: none; opacity: .1; transform: translate3d(0, 10px, 0); transition: opacity .6s ease, transform .6s var(--ease-out); } .glimpse svg { display: block; width: 100%; height: auto; } [data-glimpse].is-hover .glimpse { opacity: .32; transform: none; } [data-glimpse] h3 { position: relative; transition: color var(--primitive-motion-fast) ease; } [data-glimpse].is-hover h3 { color: var(--color-accent-text); } /* Phones and touch screens: the diagram sits small in the row's top-right corner, clear of the title and text, and the title keeps its colour (rows light up just by being on screen there, so orange titles would all be lit at once) */ @media (hover: none), (max-width: 720px) { .glimpse { left: auto; right: 0; top: calc(var(--primitive-spacing-6) + 2px); width: 3.25rem; opacity: .22; } [data-glimpse].is-hover .glimpse { opacity: .5; } [data-glimpse].is-hover h3 { color: inherit; } [data-glimpse] h3 { padding-right: 4.5rem; } } /* Pixel field: a canvas of small squares behind a night band that light up around the pointer (site.js). */ .pixel-host { position: relative; isolation: isolate; } .pixel-field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; } /* Scribble: a loose, hand-drawn orange loop around a phrase that draws itself when its heading lands. phrase */ .scribble { position: relative; display: inline-block; white-space: nowrap; } .scribble-ink { position: absolute; left: -8%; top: -20%; width: 115%; height: 132%; overflow: visible; pointer-events: none; transform: rotate(-1.6deg); } .scribble-ink path { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* Drawn in with a left-to-right wipe: a dash animation with a non-scaling stroke only ever draws part of the loop in Chrome */ .motion .scribble-ink { clip-path: inset(-20% 100% -20% -10%); } .motion .in .scribble-ink, .motion .scribble.in .scribble-ink { clip-path: inset(-20% -10% -20% -10%); transition: clip-path 1100ms cubic-bezier(.6, .05, .3, 1) 450ms; } /* Workflow: phases of numbered steps joined by arrows, with a progress line that runs through them as you scroll.

    Phase note

    Label

    1. 1

      …

      …

      2. …
    …
    site.js adds .is-on to each step as it reaches the middle of the screen and sets --flow (0 to 1) for the progress line. */ .flow { grid-column: 1 / 13; position: relative; display: flex; flex-direction: column; gap: var(--primitive-spacing-16); } .flow-phase { position: relative; display: flex; flex-direction: column; gap: var(--primitive-spacing-6); --tone: currentColor; } .flow-phase + .flow-phase::before { content: ""; position: absolute; left: 5px; top: calc(var(--primitive-spacing-16) * -1 + var(--primitive-spacing-2)); height: calc(var(--primitive-spacing-16) - var(--primitive-spacing-4)); width: 2px; background: currentColor; opacity: .3; } .flow-phase-head { display: flex; align-items: baseline; gap: var(--primitive-spacing-4); font-family: var(--f-text); font-size: var(--primitive-fontSize-small); font-weight: 600; letter-spacing: 0; } .flow-phase-head .dot { align-self: center; } .flow-phase-head .dot { width: 12px; height: 12px; background: var(--tone); flex: none; } .flow-phase-head b { font-family: var(--f-display); font-size: var(--primitive-fontSize-lead); letter-spacing: -0.02em; } .flow-phase-head span:last-child { opacity: .55; font-family: var(--f-display); font-weight: 600; font-size: var(--primitive-fontSize-lead); letter-spacing: -0.02em; } .flow-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--spacing-gutter); align-items: start; } .flow-label { padding-top: var(--primitive-spacing-6); font-size: var(--primitive-fontSize-small); font-weight: 600; color: var(--tone); } .flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--spacing-gutter); } .flow-step { position: relative; display: flex; flex-direction: column; gap: var(--primitive-spacing-2); padding-top: var(--primitive-spacing-6); border-top: var(--figure-rule) solid color-mix(in srgb, currentColor 22%, transparent); } .flow-step::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--figure-rule) * -1); height: var(--figure-rule); background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); } .flow-step:not(:last-child)::after { content: "\2192"; position: absolute; right: calc(var(--spacing-gutter) / -2); top: calc(var(--primitive-spacing-6) + .2em); transform: translateX(50%); opacity: .4; transition: opacity .4s ease, color .4s ease; } .flow-step .n { font-family: var(--f-display); font-weight: 700; font-size: var(--primitive-fontSize-head); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; opacity: .28; transition: opacity .5s ease, color .5s ease; } .flow-step h4, .flow-fork h4 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--primitive-fontSize-lead); line-height: 1.15; letter-spacing: -0.02em; } .flow-step p { opacity: .78; max-width: 34ch; } .flow-step .flow-tag { align-self: flex-start; margin-top: var(--primitive-spacing-2); padding: 2px var(--primitive-spacing-2); font-size: var(--primitive-fontSize-small); font-weight: 600; background: color-mix(in srgb, currentColor 10%, transparent); } .flow-step.is-on::before { transform: scaleX(1); } .flow-step.is-on .n { opacity: 1; color: var(--color-accent); } .flow-step.is-on:not(:last-child)::after { opacity: 1; color: var(--color-accent); } /* The fork after the programme */ .flow-fork { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--spacing-gutter); align-items: stretch; } .flow-fork > div { display: flex; flex-direction: column; gap: var(--primitive-spacing-2); padding: var(--primitive-spacing-8); background: color-mix(in srgb, currentColor 7%, transparent); } .flow-fork .or { align-self: center; font-weight: 600; opacity: .6; } @media (max-width: 1000px) { .flow-row { grid-template-columns: minmax(0, 1fr); gap: var(--primitive-spacing-2); } .flow-label { padding-top: 0; } .flow-steps { grid-template-columns: minmax(0, 1fr); gap: var(--primitive-spacing-8); } .flow-step:not(:last-child)::after { content: "\2193"; right: auto; left: auto; top: auto; bottom: calc(var(--primitive-spacing-8) / -1 - .2em); transform: none; } .flow-fork { grid-template-columns: minmax(0, 1fr); } .flow-fork .or { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .flow-step::before { transform: scaleX(1); } .flow-step .n { opacity: 1; } } /* Entrances: content is never hidden. It starts slightly lowered and dimmed, so it still reads if the reveal never fires. */ .js [data-rise] { opacity: .6; transform: translate3d(0, 20px, 0); } .js [data-rise].in { opacity: 1; transform: none; transition: opacity var(--primitive-motion-base) ease, transform var(--primitive-motion-base) cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(var(--i, 0) * 70ms); } @media (max-width: 1000px) { .nav .links { display: none; } .menu-btn { display: inline-flex; align-items: center; } .nav .logo { grid-column: 1 / 6; } .nav .end { grid-column: 6 / 13; } .dawn h1, .dawn .act { grid-column: 1 / 13; } .dawn .sub, .pagehead .lead { grid-column: 1 / 10; } .pagehead .aside { grid-column: 1 / 13; align-self: start; } .rows figure { grid-column: 1 / 13; grid-row: auto; } .rows h3, .rows .text { grid-column: 1 / 13; } .list h3 { grid-column: 1 / 13; } .list p { grid-column: 1 / 10; } .list .more { grid-column: 10 / 13; } .prose, .form { grid-column: 1 / 13; } .section-head > :first-child { grid-column: 1 / 13; } .section-head > :not(:first-child) { grid-column: 1 / 10; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .side { grid-column: 1 / 13; position: static; margin-top: var(--primitive-spacing-16); } .pagehead--article h1 { grid-column: 1 / 13; } .calc .q, .calc .note { grid-column: 1 / 13; } .calc .out { grid-column: 1 / 13; margin-top: var(--primitive-spacing-8); } .foot .brands { grid-column: 1 / 13; gap: var(--primitive-spacing-6); } .foot .mark { width: min(100%, 8rem); } .foot .foot-partner { height: 2.25rem; } .foot .where { grid-column: 1 / 13; grid-row: auto; justify-self: start; text-align: left; margin-top: var(--primitive-spacing-12); } .foot nav { grid-column: 1 / 13; margin-top: var(--primitive-spacing-16); } } @media (max-width: 720px) { :root { --margin: max(var(--primitive-spacing-4), env(safe-area-inset-left, 0px)); --margin-r: max(var(--primitive-spacing-4), env(safe-area-inset-right, 0px)); --bar: var(--nav-height-sm); --mark: var(--nav-mark-sm); --spacing-section: var(--primitive-spacing-24); } .dawn { height: 180svh; } .dawn .flock { top: 58%; } .dawn .bird { width: calc(4.4vw * var(--s)); left: calc(var(--x) * .8vw); top: calc(var(--y) * .4vw); } .dawn--short { height: 150svh; } .section--surface, .section--night, .cta, .foot { padding-block: var(--primitive-spacing-16); } .section-head { margin-bottom: var(--primitive-spacing-12); } .section-head > :first-child, .section-head > :not(:first-child) { grid-column: 1 / 13; } .pagehead { padding-block: var(--primitive-spacing-16) var(--primitive-spacing-12); } .grid { column-gap: var(--primitive-spacing-4); } .nav .btn { padding: 0 var(--primitive-spacing-4); } .dawn .sub, .pagehead .lead { grid-column: 1 / 13; } .figures li, .calc .q, .calc .out, .calc .note, .half-l, .half-r, .cta h2, .cta p { grid-column: 1 / 13; } .half-r { margin-top: var(--primitive-spacing-12); } .calc .out { margin-top: var(--primitive-spacing-8); } .list p, .list .more { grid-column: 1 / 13; } .list .more { justify-self: start; } .cta .acts { grid-column: 1 / 13; grid-row: auto; justify-content: flex-start; margin-top: var(--primitive-spacing-12); } .form { grid-template-columns: 1fr; } .quote { grid-template-columns: 72px minmax(0, 1fr); } .quote img { width: 72px; height: 72px; } .foot nav { grid-template-columns: 1fr 1fr; } .cards { grid-template-columns: 1fr; gap: var(--primitive-spacing-12); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dawn, .dawn--short { height: auto; } .dawn .flock { display: none; } .dawn .stage { position: relative; height: 100svh; } .js [data-rise] { opacity: 1; transform: none; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* Service page heads: a canvas scene behind the right-hand side (hero-fx.js) and a title entrance per service */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pagehead[data-fx] { position: relative; isolation: isolate; overflow: hidden; } .pagehead[data-fx] > .fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } @media (max-width: 720px) { .pagehead[data-fx] > .fx { opacity: .4; } } .fx-title .w { display: inline-block; white-space: nowrap; } /* AI Training: letters rise one after another */ .fx-title--network .ch { display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0) rotate(8deg); animation: fx-rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--n) * 45ms + 120ms); } @keyframes fx-rise { to { opacity: 1; transform: none; } } /* AI Transformation: words come into focus */ .fx-title--order .w { opacity: 0; filter: blur(14px); transform: scale(1.06); animation: fx-focus 1100ms var(--ease-out) forwards; animation-delay: calc(var(--n) * 160ms + 150ms); } @keyframes fx-focus { to { opacity: 1; filter: blur(0); transform: none; } } /* AI Deployment: an orange bar scans across and prints the title */ .fx-title--circuit .scan { position: relative; display: inline-block; } .fx-title--circuit .txt { display: inline-block; clip-path: inset(-.15em 100% -.35em -.1em); animation: fx-print 900ms cubic-bezier(.65, 0, .35, 1) 150ms forwards; } .fx-title--circuit .bar { position: absolute; top: .08em; bottom: .02em; left: 0; width: .09em; background: var(--color-accent); animation: fx-bar 900ms cubic-bezier(.65, 0, .35, 1) 150ms forwards, fx-blink 1s steps(1) 1050ms 3 forwards; } @keyframes fx-print { to { clip-path: inset(-.15em -.15em -.35em -.1em); } } @keyframes fx-bar { from { left: 0; } to { left: calc(100% + .06em); } } @keyframes fx-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fx-title .ch, .fx-title .w, .fx-title .txt { opacity: 1; filter: none; transform: none; clip-path: none; animation: none; } .fx-title .bar { display: none; } } /* Services head: the label under the morphing scene names the service on show and links to it */ .pagehead[data-fx] > .fx-tag { position: absolute; z-index: 1; font-size: var(--primitive-fontSize-small); font-weight: 600; color: var(--color-accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); min-height: 44px; } .pagehead[data-fx] > .fx-tag::after { content: "→"; transition: transform var(--primitive-motion-fast) var(--ease-out); } .pagehead[data-fx] > .fx-tag:hover::after { transform: translateX(4px); } .pagehead[data-fx] > .fx-tag.is-in { animation: fx-tag-in 500ms var(--ease-out) both; } @keyframes fx-tag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .pagehead[data-fx] > .fx-tag { display: none; } } @media (prefers-reduced-motion: reduce) { .pagehead[data-fx] > .fx-tag.is-in { animation: none; } }