/* Retrieverworks - landing page styles. * Structure and composition only: every colour, size, space, radius, and * motion value is a var() from /tokens.css (the single CSS source of truth). * Composition: v2 redesign per docs/superpowers/specs/ * 2026-07-25-landing-redesign-design.md (v2 addendum), 2026-07-26, plus the * motion revision per docs/superpowers/specs/ * 2026-07-27-landing-motion-revision-design.md. */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, ul, ol, figure { margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-serif); font-size: var(--text-base); font-weight: var(--weight-body); line-height: var(--leading-base); color: var(--ink); background: var(--surface-1); } h1, h2, h3, nav, button { font-family: var(--font-sans); } strong { font-weight: 600; } ul { padding: 0; list-style: none; } a { color: inherit; } img { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Keyboard users get a way past the header; visually hidden until focused. */ .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-overlay); transform: translateY(calc(-1 * var(--space-32))); background: var(--surface-0); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--border); text-decoration: none; } .skip-link:focus-visible { transform: none; } /* Set on while the mobile drawer is open. */ .no-scroll, .no-scroll body { overflow: hidden; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); align-items: start; } section[id] { scroll-margin-top: var(--space-6); } /* ---- Type roles ---- */ .h-display { font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-heading); max-width: 24ch; } .h-section { font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: var(--leading-2xl); letter-spacing: var(--tracking-heading); max-width: 24ch; } .h-item { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: var(--leading-xl); letter-spacing: var(--tracking-heading); } .caps-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-heading); line-height: var(--leading-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* ---- Buttons and links ---- */ .btn { display: inline-block; font-family: var(--font-sans); font-weight: var(--weight-heading); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .btn-forest { font-size: var(--text-base); color: var(--lime); background: var(--forest); padding: var(--space-4) var(--space-6); } .btn-forest:hover { background: var(--forest-raised); } .btn-lime { font-size: var(--text-base); color: var(--ink); background: var(--lime); padding: var(--space-4) var(--space-6); } .btn-lime:hover { background: var(--lime-hover); } .link-arrow { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-heading); color: var(--ink); text-decoration: none; } .link-arrow .arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-move); } .link-arrow:hover .arrow { transform: translateX(var(--space-1)); } /* ---- Header ---- */ .site-header { background: var(--surface-1); } .header-inner { display: flex; align-items: center; height: var(--space-20); } .site-header .lockup { height: var(--space-8); width: auto; } .site-nav { display: flex; gap: var(--space-2); margin-left: var(--space-8); } /* Hover highlight in the CTA's idiom: forest pill, lime text. */ .site-nav a { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-heading); color: var(--ink); text-decoration: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .site-nav a:hover { background: var(--forest); color: var(--lime); } .header-social { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .header-social a { display: flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); color: var(--ink-muted); transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .header-social a:hover { color: var(--lime); background: var(--forest); } .header-social svg { width: var(--space-5); height: var(--space-5); } .burger { display: none; margin-left: auto; padding: var(--space-3); border: 0; background: none; cursor: pointer; } .burger-bar { display: block; width: var(--space-5); height: 2px; background: var(--ink); } .burger-bar + .burger-bar { margin-top: var(--space-1); } .drawer { display: none; } .drawer[data-open] { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--surface-1); padding: 0 var(--gutter) var(--space-6); overflow-y: auto; } .drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--space-20); } .drawer-top .lockup { height: var(--space-8); width: auto; } .drawer-close { border: 0; background: none; padding: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); color: var(--ink); cursor: pointer; } .drawer-nav { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-10); } .drawer-nav a { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-heading); color: var(--ink); text-decoration: none; } .drawer-social { display: flex; gap: var(--space-4); margin-top: auto; margin-bottom: var(--space-6); } .drawer-social a { display: flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--ink); transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .drawer-social a:hover { color: var(--lime); background: var(--forest); border-color: var(--forest); } .drawer-social svg { width: var(--space-5); height: var(--space-5); } .drawer-cta { margin-top: 0; text-align: center; } /* ---- Hero ---- */ .hero { background: var(--surface-1); padding-block: var(--section-y); } .hero-text { grid-column: 1 / 7; align-self: center; } .hero .lead { margin-top: var(--space-6); font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--ink-muted); max-width: 44ch; /* Even line lengths keep "We build it" intact instead of stranding "We" at the end of line one, and leave the marker stops mid-line where they read as one continuous sweep. Falls back to normal wrapping where unsupported. */ text-wrap: balance; } /* Marker highlight relaying across bespoke, sized, priced and finally the whole "a business like yours": each stop sweeps in from the left, holds, then exits to the right as the next lights up. The text keeps the lead's own colour and spacing; ink kicks in only while a stop is lit. */ .hl-mark { border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; /* A stop must never split across lines: box-decoration-break: clone would give each fragment its own box, and each box would run the sweep from its own left edge, so the highlight would light up in two places at once. The widest stop is 178px against a 413px column, so this cannot overflow. */ white-space: nowrap; background-image: linear-gradient(var(--lime), var(--lime)); background-repeat: no-repeat; background-size: 0 100%; background-position: 0 0; animation: hl-cycle var(--duration-hl) var(--ease-move) infinite; } .lead .hl-mark:nth-of-type(2) { animation-delay: calc(var(--duration-hl) / 4); } .lead .hl-mark:nth-of-type(3) { animation-delay: calc(var(--duration-hl) / 2); } .lead .hl-mark:nth-of-type(4) { animation-delay: calc(var(--duration-hl) * 3 / 4); } @keyframes hl-cycle { 0% { background-size: 0 100%; background-position: 0 0; color: var(--ink-muted); } 6% { background-size: 100% 100%; background-position: 0 0; color: var(--ink); } 20% { background-size: 100% 100%; background-position: 100% 0; color: var(--ink); } 26% { background-size: 0 100%; background-position: 100% 0; color: var(--ink-muted); } 100% { background-size: 0 100%; background-position: 100% 0; color: var(--ink-muted); } } .cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); } .hero-visual { grid-column: 7 / 13; } /* Lime panel with ReflexAI-style corner scoops: page-background squares * with one rounded corner cut into the top-left and bottom-right. */ .visual-panel { position: relative; background: var(--lime); border-radius: var(--radius-xl); border-top-left-radius: 0; border-bottom-right-radius: 0; padding: var(--space-8); display: grid; } .scene { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); opacity: 0; visibility: hidden; transition: opacity var(--duration-fade) var(--ease-move), visibility 0s var(--duration-fade); } .scene.is-active { opacity: 1; visibility: visible; transition: opacity var(--duration-fade) var(--ease-move); } /* Scene 2: document to data */ .doc-card { position: relative; overflow: hidden; background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); } .doc-lines { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .doc-lines span { height: var(--space-2); border-radius: var(--radius-full); background: var(--border); } .doc-lines span:nth-child(1) { width: 90%; } .doc-lines span:nth-child(2) { width: 72%; } .doc-lines span:nth-child(3) { width: 84%; } .doc-lines span:nth-child(4) { width: 55%; } /* Forest disc that makes the extracted-field count pop in the caps title. */ .num-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-6); height: var(--space-6); padding-inline: var(--space-1); margin-right: var(--space-1); border-radius: var(--radius-full); background: var(--forest); color: var(--lime); } .scan-line { position: absolute; inset: 0 0 auto 0; height: var(--space-1); background: var(--lime); opacity: 0; } /* Repeated sweeps per activation: the document reads as being read. */ .scene.is-active .scan-line { animation: scan calc(var(--stagger) * 10) var(--ease-move) var(--stagger) 5 both; } @keyframes scan { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(var(--space-32)); } } /* Scene 3: dashboard assembling */ .dash-card { background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-6); align-items: end; } .dash-num { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: var(--leading-2xl); letter-spacing: var(--tracking-heading); margin-top: var(--space-2); font-variant-numeric: tabular-nums; } .dash-num-label { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-muted); } .dash-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: var(--space-16); } .dash-bars span { width: var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); transform: scaleY(0); transform-origin: bottom; } .dash-bars span:nth-child(1) { height: 45%; } .dash-bars span:nth-child(2) { height: 70%; } .dash-bars span:nth-child(3) { height: 100%; background: var(--lime); } .scene.is-active .dash-bars span:nth-child(1) { animation: grow var(--duration-draw) var(--ease-move) calc(var(--stagger) * 2) both; } .scene.is-active .dash-bars span:nth-child(2) { animation: grow var(--duration-draw) var(--ease-move) calc(var(--stagger) * 3) both; } .scene.is-active .dash-bars span:nth-child(3) { animation: grow var(--duration-draw) var(--ease-move) calc(var(--stagger) * 4) both; } @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .scene-dash .mock-chip { margin-top: 0; margin-bottom: var(--space-6); } .dash-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-4); } .dash-metric { display: flex; flex-direction: column; gap: var(--space-1); } .dash-metric-num { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: var(--leading-lg); font-variant-numeric: tabular-nums; } .dash-metric-label { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-muted); } .dash-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); } /* Scene 4: chat and booking */ .chat-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); } .chat-bubble { position: relative; max-width: 85%; font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); } .chat-in { align-self: flex-start; background: var(--surface-1); border-bottom-left-radius: var(--radius-sm); } .chat-out { align-self: flex-end; background: var(--lime); border-bottom-right-radius: var(--radius-sm); } .chat-ticks { display: inline-block; width: var(--space-4); vertical-align: baseline; color: var(--focus); } /* The reply bubble is sized by its (invisible) text; the typing dots sit on top until the text "arrives". */ .scene .chat-text { opacity: 0; } .chat-typing { position: absolute; inset: var(--space-2) auto auto var(--space-3); display: flex; gap: var(--space-1); align-items: center; height: var(--space-5); } .chat-typing span { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-full); background: var(--ink-muted); } .scene.is-active .chat-typing span { animation: typing var(--duration-wave) var(--ease-move) infinite alternate; } .scene.is-active .chat-typing span:nth-child(2) { animation-delay: calc(-1 * var(--duration-wave) / 3); } .scene.is-active .chat-typing span:nth-child(3) { animation-delay: calc(-2 * var(--duration-wave) / 3); } @keyframes typing { from { opacity: 0.3; } to { opacity: 1; } } /* Typing dots hold before the text lands: about a second for the agent's first reply, longer for the human's follow-up (people type slower). */ .scene.is-active .chat-out .chat-text { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 2.75) both; } .scene.is-active .chat-out .chat-typing { animation: fade-out var(--duration-fast) var(--ease-out) calc(var(--scene-step) * 2.75) both; } .scene.is-active .chat-in .chat-text { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 5) both; } .scene.is-active .chat-in .chat-typing { animation: fade-out var(--duration-fast) var(--ease-out) calc(var(--scene-step) * 5) both; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } .cal-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-4); background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: 0; } .chat-note { margin-bottom: var(--space-6); } .note-icon { flex: none; width: var(--space-4); height: var(--space-4); } .note-icon circle, .note-icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cal-bar { position: absolute; inset: 0 auto 0 0; width: var(--space-1); background: var(--focus); } .cal-date { display: flex; flex-direction: column; align-items: center; } .cal-day { color: var(--ink-subtle); } .cal-num { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: var(--leading-xl); } .cal-title { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); line-height: var(--leading-sm); } .cal-time { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-muted); margin-top: var(--space-1); } .cal-card .mock-chip { margin-left: auto; margin-top: 0; } .visual-panel::before, .visual-panel::after { content: ""; position: absolute; width: var(--space-16); height: var(--space-8); background: var(--surface-1); } .visual-panel::before { top: 0; left: 0; border-bottom-right-radius: var(--radius-xl); } .visual-panel::after { bottom: 0; right: 0; border-top-left-radius: var(--radius-xl); } .voice-bar { display: flex; align-items: center; gap: var(--space-3); background: var(--forest); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); margin-top: var(--space-6); } .voice-bar img { width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); object-fit: cover; } .voice-meta { min-width: 0; } .voice-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); line-height: var(--leading-sm); color: var(--ink-inverse); white-space: nowrap; } .wave { display: flex; align-items: center; gap: var(--space-1); height: var(--space-5); margin-top: var(--space-1); } .wave span { width: var(--space-1); height: var(--space-4); border-radius: var(--radius-full); background: var(--lime); animation: wave var(--duration-wave) var(--ease-move) infinite alternate; } .wave span:nth-child(2n) { animation-delay: calc(-1 * var(--duration-wave) / 3); height: var(--space-2); } .wave span:nth-child(3n) { animation-delay: calc(-2 * var(--duration-wave) / 3); height: var(--space-5); } .wave span:nth-child(5n) { animation-delay: calc(-1 * var(--duration-wave) / 2); height: var(--space-3); } @keyframes wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } } .voice-time { margin-left: auto; font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-inverse-muted); } .crm-card { background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .crm-title { color: var(--ink-subtle); } .crm-field { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); } .crm-label { color: var(--ink-subtle); } .crm-value { font-weight: var(--weight-heading); color: var(--ink); } .crm-status { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); line-height: var(--leading-sm); color: var(--ink); } .status-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--lime); outline: 1px solid var(--border); } /* Scene choreography: items rise in sequence each time a scene activates. Re-adding .is-active restarts the animations. */ .scene .fill-1, .scene .fill-2, .scene .fill-3, .scene .fill-4, .scene .fill-5, .scene .fill-6 { opacity: 0; } /* Items land one real step at a time, filling the scene's whole window, instead of rattling through in the first second. */ .scene.is-active .fill-1 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 0.5) both; } .scene.is-active .fill-2 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 1.5) both; } .scene.is-active .fill-3 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 2.5) both; } .scene.is-active .fill-4 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 3.5) both; } .scene.is-active .fill-5 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 4.5) both; } .scene.is-active .fill-6 { animation: rise var(--duration-reveal) var(--ease-move) calc(var(--scene-step) * 5.5) both; } @keyframes rise { from { opacity: 0; transform: translateY(var(--space-1)); } to { opacity: 1; transform: none; } } /* Conversation order: reply text lands before the follow-up arrives. Placed after the generic choreography rules above so these delays win the cascade (equal specificity, source order decides). */ .scene-chat.is-active .fill-3 { animation-delay: calc(var(--scene-step) * 3.25); } .scene-chat.is-active .fill-4 { animation-delay: calc(var(--scene-step) * 5.5); } .scene-chat.is-active .fill-5 { animation-delay: calc(var(--scene-step) * 6.25); } .scene-chat.is-active .fill-6 { animation-delay: calc(var(--scene-step) * 7); } /* ---- Services - equal 2x2 grid ---- */ .services { background: var(--surface-2); padding-block: var(--section-y); } .section-head { grid-column: 1 / 8; } .sub-lead { margin-top: var(--space-4); font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--ink-muted); max-width: 50ch; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-12); } .card { background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-8); transition: transform var(--duration-fast) var(--ease-move); } .card:hover { transform: translateY(-2px); } .card-glyph { display: block; width: var(--space-10); height: var(--space-10); color: var(--ink); margin-bottom: var(--space-5); } .card-glyph path, .card-glyph circle, .card-glyph rect { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 150; stroke-dashoffset: 150; } .js .card.in .card-glyph path, .js .card.in .card-glyph circle, .js .card.in .card-glyph rect, html:not(.js) .card-glyph path, html:not(.js) .card-glyph circle, html:not(.js) .card-glyph rect { animation: draw var(--duration-draw) var(--ease-move) both; } .card:hover .card-glyph path, .card:hover .card-glyph circle, .card:hover .card-glyph rect { animation: draw-again var(--duration-draw) var(--ease-move) both; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes draw-again { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } } .card .title { color: var(--ink); display: inline-block; padding-bottom: var(--space-1); background-image: linear-gradient(var(--lime), var(--lime)); background-repeat: no-repeat; background-size: 0 var(--space-1); background-position: 0 100%; transition: background-size var(--duration-reveal) var(--ease-move); } .card:hover .title { background-size: 100% var(--space-1); } .stack-line { margin-top: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-subtle); } .card .body { margin-top: var(--space-3); color: var(--ink-muted); max-width: 44ch; } /* ---- What we actually build - expandable tiles ---- Eight compact tiles: icon, name and a plus marker collapsed by default. A JS-toggled .open class (click only) expands the body to show build-desc (see docs/content/services.md). */ .builds { background: var(--surface-0); padding-block: var(--section-y); } /* Column flow: eight items read 4 down the left, 4 down the right, a clean 4/4 split. */ .builds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: var(--space-4) var(--space-6); margin-top: var(--space-12); } .build { background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); align-self: start; } .build-head { margin: 0; } .build-toggle { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); } .build-icon { flex: none; width: var(--space-6); height: var(--space-6); } .build-icon path, .build-icon rect, .build-icon circle, .build-icon ellipse { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .build-name { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: var(--leading-lg); letter-spacing: var(--tracking-heading); } .build-plus { margin-left: auto; flex: none; width: var(--space-6); height: var(--space-6); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--ink-subtle); transition: transform var(--duration-fast) var(--ease-move); } .build-plus::before { content: "+"; } .build.open .build-plus { transform: rotate(45deg); } .build-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-reveal) var(--ease-move); } .build-body .build-desc { overflow: hidden; min-height: 0; margin: 0; color: var(--ink-muted); max-width: 46ch; } .build.open .build-body { grid-template-rows: 1fr; } .build.open .build-body .build-desc { padding-top: var(--space-3); } /* ---- Sectors - forest carousel band ---- */ .sectors { background: var(--surface-1); padding-block: var(--section-y); } .sectors-band { position: relative; background: var(--forest); border-radius: var(--radius-xl); border-top-left-radius: 0; border-bottom-right-radius: 0; padding: var(--space-12); } .sectors-band::before, .sectors-band::after { content: ""; position: absolute; width: var(--space-20); height: var(--space-8); background: var(--surface-1); } .sectors-band::before { top: 0; left: 0; border-bottom-right-radius: var(--radius-xl); } .sectors-band::after { bottom: 0; right: 0; border-top-left-radius: var(--radius-xl); } .band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); } .band-head .h-section { color: var(--ink-inverse); max-width: none; } .car-arrows { display: flex; gap: var(--space-3); } .car-btn { width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-inverse); border-radius: var(--radius-full); background: none; color: var(--ink-inverse); font-size: var(--text-base); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); } .car-btn:hover { background: var(--forest-raised); } .car-track { display: flex; gap: var(--space-6); margin-top: var(--space-10); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .car-track::-webkit-scrollbar { display: none; } .sector-card { flex: 0 0 calc(var(--space-40) * 2); scroll-snap-align: start; background: var(--forest-raised); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; } .mock { background: var(--forest); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); height: calc(var(--space-40) + var(--space-32)); } .mock-doc { background: var(--forest-raised); border-radius: var(--radius-sm); padding: var(--space-3); } .mock-doc-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-heading); line-height: var(--leading-xs); color: var(--ink-inverse); } .mock-doc-status { margin-top: var(--space-1); color: var(--lime); } .mock-person { display: flex; align-items: center; gap: var(--space-3); background: var(--forest-raised); border-radius: var(--radius-sm); padding: var(--space-3); } .mock-person img { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); object-fit: cover; } .bubble { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 90%; } .bubble img { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); object-fit: cover; } .bubble p { background: var(--surface-0); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); border-radius: var(--radius-md); border-bottom-left-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } .bubble.reply { align-self: flex-end; } .bubble.reply p { background: var(--lime); border-radius: var(--radius-md); border-bottom-right-radius: var(--radius-sm); } .mock-chip { align-self: flex-start; margin-top: auto; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink); background: var(--lime); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); } .sector-name { margin-top: var(--space-6); color: var(--ink-inverse); } .sector-hook { margin-top: var(--space-3); color: var(--ink-inverse-muted); font-size: var(--text-sm); line-height: var(--leading-sm); } .car-progress { margin-top: var(--space-8); height: var(--space-1); border-radius: var(--radius-full); background: var(--forest-raised); overflow: hidden; } .car-progress-fill { height: 100%; width: 25%; border-radius: var(--radius-full); background: var(--lime); } .sectors-close { margin-top: var(--space-8); } .close-line { font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--ink-inverse); max-width: 80ch; text-wrap: balance; } /* ---- Stats ---- */ .stats { background: var(--forest); padding-block: var(--section-y); } .stats .h-section { color: var(--ink-inverse); } .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-16); margin-top: var(--space-12); } .stat-num { font-family: var(--font-sans); font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-heading); color: var(--lime); font-variant-numeric: tabular-nums; } .stat-copy { margin-top: var(--space-4); color: var(--ink-inverse-muted); max-width: 44ch; } .stat-src { margin-top: var(--space-3); } .stat-src a { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-inverse-muted); transition: color var(--duration-fast) var(--ease-out); } .stat-src a:hover { color: var(--ink-inverse); } /* ---- How working with us works ---- */ .ladder-section { background: var(--surface-2); padding-block: var(--section-y); } .ladder-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .rung { background: var(--surface-0); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); align-self: start; } .rung-toggle { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); } .rung-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .rung-name { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: var(--leading-lg); letter-spacing: var(--tracking-heading); } .rung-price { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); line-height: var(--leading-sm); color: var(--ink-muted); } .rung-plus { margin-left: auto; flex: none; width: var(--space-6); height: var(--space-6); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--ink-subtle); transition: transform var(--duration-fast) var(--ease-move); } .rung-plus::before { content: "+"; } .rung.open .rung-plus { transform: rotate(45deg); } .rung-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-reveal) var(--ease-move); } .rung-body .rung-desc { overflow: hidden; min-height: 0; margin: 0; color: var(--ink-muted); } .rung.open .rung-body { grid-template-rows: 1fr; } .rung.open .rung-body .rung-desc { padding-top: var(--space-3); } /* Without JS the toggles are dead; show every disclosure expanded. */ html:not(.js) .build-body, html:not(.js) .rung-body { grid-template-rows: 1fr; } html:not(.js) .build-body .build-desc, html:not(.js) .rung-body .rung-desc { padding-top: var(--space-3); } .step-num { position: relative; display: flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); background: var(--lime); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-heading); } .ladder-note { margin-top: var(--space-10); color: var(--ink-muted); max-width: 60ch; } /* ---- Who's behind it ---- */ .about { background: var(--surface-1); padding-block: var(--section-y); } .about-para { margin-top: var(--space-8); font-size: var(--text-lg); line-height: var(--leading-lg); max-width: 56ch; } .about-facts { margin-top: var(--space-6); color: var(--ink-subtle); display: flex; align-items: center; gap: var(--space-2); } .about-rose { width: 1.85em; height: auto; flex: none; /* align-items: center matches the rose to the text's line box, which sits a hair below the cap box because the descender space stays empty in all caps. Measured at 0.055em on Hanken Grotesk at --text-xs; nudge up by exactly that so the rose centre lands on the centre of YORK, UK. */ transform: translateY(-0.055em); } /* ---- Straight answers ---- */ .faq { background: var(--surface-2); padding-block: var(--section-y); } .faq .section-head { grid-column: 1 / 5; } .faq-list { grid-column: 5 / 13; } .faq-item { border-top: 1px solid var(--border); interpolate-size: allow-keywords; } .faq-item:last-child { border-bottom: 1px solid var(--border); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .h-item { font-size: var(--text-lg); } .faq-marker { flex: none; width: var(--space-6); height: var(--space-6); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-lg); color: var(--ink-subtle); transition: transform var(--duration-fast) var(--ease-move); } .faq-marker::before { content: "+"; } .faq-item[open] .faq-marker { transform: rotate(45deg); } /* Animated open/close where ::details-content is supported; elsewhere the accordion still works, it just snaps. */ .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-reveal) var(--ease-move), content-visibility var(--duration-reveal) allow-discrete; } .faq-item[open]::details-content { block-size: auto; } .faq-item .answer { margin: 0; padding-bottom: var(--space-5); color: var(--ink-muted); max-width: 60ch; } /* ---- Footer ---- */ .site-footer { background: var(--forest); color: var(--ink-inverse); padding-block: var(--section-y); } .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); } .closing { font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: var(--leading-2xl); letter-spacing: var(--tracking-heading); color: var(--ink-inverse); max-width: 22ch; } .footer-divider { border: 0; border-top: 1px solid var(--border-inverse); margin-block: var(--space-16); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); } .footer-bottom .lockup { height: var(--space-10); width: auto; } .contact-icons { display: flex; flex-wrap: wrap; gap: var(--space-4); } .contact-icons a { display: flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); border: 1px solid var(--border-inverse); border-radius: var(--radius-full); color: var(--ink-inverse); transition: background-color var(--duration-fast) var(--ease-out); } .contact-icons a:hover { background: var(--forest-raised); } .contact-icons svg { width: var(--space-5); height: var(--space-5); } .footer-note { margin-top: var(--space-10); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-inverse-muted); } /* ---- Scroll reveals (skipped entirely under reduced motion) ---- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--duration-reveal) var(--ease-move), transform var(--duration-reveal) var(--ease-move); } .js [data-reveal].in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wave span { animation: none; } .scan-line { animation: none; } .hl-mark { background-size: 100% 100%; color: var(--ink); animation: none; } .scene .fill-1, .scene .fill-2, .scene .fill-3, .scene .fill-4, .scene .fill-5, .scene .fill-6 { opacity: 1; animation: none; } .dash-bars span { transform: none; } .scene .chat-text { opacity: 1; } .chat-typing { visibility: hidden; } .card-glyph path, .card-glyph circle, .card-glyph rect { stroke-dashoffset: 0; animation: none; } *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ---- Breakpoints ---- */ @media (max-width: 1023px) { /* The full header (lockup + pill nav + social row) needs more than tablet width; switch to the burger layout early. */ .site-nav, .header-social { display: none; } .burger { display: block; } .grid-12 { display: block; } .hero-visual { margin-top: var(--space-12); max-width: calc(var(--space-40) * 3); } .sectors-band { padding: var(--space-8); } .faq-list { margin-top: var(--space-12); } .ladder-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .services-grid { grid-template-columns: 1fr; } .builds-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .sector-card { flex-basis: 84%; } } @media (max-width: 639px) { .band-head { display: block; } .car-arrows { margin-top: var(--space-6); } .stats-grid { grid-template-columns: 1fr; } .ladder-boxes { grid-template-columns: 1fr; } }