/* ============================================================ KRM — brand v2.1 Companion to css/tokens.css, which is AUTHORITATIVE and is never edited from here. Link order is tokens.css FIRST, then this file — head() in tools/gen-pages.js writes them in that order. Everything below either uses a v2 token or is a local value this file owns and documents. WHAT tokens.css ALREADY SHIPS — do not restate it here: body (background, color, font-family, size, line-height) h1 / h2 / h3 weights, tracking, text-wrap a (colour + transition), a:hover .btn-primary, .btn-secondary, .surface, .panel :focus-visible @media (prefers-reduced-motion) — a blanket transition/animation kill This file EXTENDS those (buttons gain a 44px floor, links gain per-context colour) and adds everything tokens.css does not cover: layout, components, and the reduced-motion cases the blanket rule does not handle. ------------------------------------------------------------ COLOUR USAGE RULE — READ BEFORE ADDING A COLOUR ------------------------------------------------------------ --text-mute (#8A8A83) is 3.47:1 on --paper and 3.18:1 on --panel. Both FAIL WCAG AA for small text. It is legal ONLY for: - non-text (control borders, where 3:1 applies) - text at 18.66px+ / 24px+ bold EVERY caption, label, kicker, helper line and piece of metadata uses --text-soft (#5A5A54 — 6.94:1 on paper, 6.36:1 on panel). v1 carried --ink-3-aa for exactly this job; v2 has no tertiary ink that clears AA, so --text-soft does double duty. Do not "soften" small text by reaching for --text-mute. Other standing rules from tokens.css, restated so they are not lost: - No gradients — except inside a device screen, which draws the customer's software (brand v2.2). No drop shadows. Hairlines and space do the separating. - Sentence case everywhere. No uppercase letterspaced labels. - Headings are Instrument Sans 500. Never bold, never a serif. ------------------------------------------------------------ ABOVE THE PHASE 2 SECTION IS THE OLD HOMEPAGE'S CSS ------------------------------------------------------------ Everything in the PHASE 2 section and below serves the pages tools/gen-pages.js writes, which since THE SWITCH phase 6 is every page the site serves. Everything above it was written for the hand-written v2.0 homepage that phase 6 replaced. Much of it matches no element any more — the hero, the band, the agents grid, the services accordion, the lead form. The rest still paints: the base nav and footer on every page, and the buttons, the section heads, the FAQ rows, .field and the success mark where those appear. None of it reads a green any more. v2.1 landed beside v2.0 rather than over it. Until THE SWITCH phase 7 the rules the two shared were overridden behind a `v21` root class, in the block near the end of this file; phase 7 flattened those overrides in place, so each is now the SAME weight as the original it overrides up here and wins on source order alone. Removing the dead rules up here is the next task, under the same guard — tools/README.md, Routine R. ============================================================ */ :root{ color-scheme:light; /* ---- local scale ---- v2 tokens define colour, type, --wrap, --radius and one duration. They do NOT define a spacing scale, a section rhythm, a measure, or the panel duration the accordions are locked to. Those live here. */ /* 8px base, same rhythm v1 used so the vertical feel is unchanged */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px; --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px; --gutter:clamp(20px,5vw,28px); --section-y:clamp(72px,9vw,120px); /* MEASURE — 47ch, not the 68ch v1 used. Instrument Sans has a tabular-width zero: 1ch = 0.666em against an average prose advance of 0.451em, a ratio of 1.476. So 68ch would hold ~100 characters and blow straight through the 70-character cap the brand sets. 47ch resolves to ~70 characters (47 x 1.476 = 69.4), and because `ch` scales with the element's own font-size it stays ~70 characters at every step of the type scale. --measure-n is the ~59-character lead measure. */ --measure:47ch; --measure-n:40ch; /* 260ms is LOCKED — it mirrors COLLAPSE_MS in js/main.js, which sequences close-then-open on the services accordion. Changing this number desyncs rapid clicking. */ --dur-panel:260ms; --nav-h:64px; --z-nav:40; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* `clip` (not `hidden`) — hidden on the body silently kills position:sticky. The hidden line stays first as a fallback for engines without clip. */ body{overflow-x:hidden;overflow-x:clip} /* .wrap — --wrap is the CONTENT width (980px), exactly as tokens.css describes it. v1 set max-width:1120px and let 28px of padding eat into it, which made the real measure 1064px and meant the token never matched the rendered box. min() states the intent directly: never wider than --wrap, never closer to the edge than --gutter. */ .wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto;position:relative} /* anchor targets must clear the sticky bar */ section[id],form[id]{scroll-margin-top:calc(var(--nav-h) + var(--sp-5))} img{max-width:100%;height:auto} /* The base ring and, in tokens.css, the base link are --orange, the light-ground stop — and stay this weak, so any component that states its own colour wins. */ :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px} /* ============================================================ BUTTONS — additive extension of tokens.css ============================================================ tokens.css sets the fill, the 500 weight, the pill radius and a 13px label on 24px of padding. Since v2.4b phase 4 every button is the homepage's instead: a 17px label on a 44px pill, 22px each side and a 1px edge — the size the tiles and the homepage's band always had, so the same "Learn more" is no longer 17px on the homepage and 13px on a lineup card (docs/DECISIONS.md, "v2.4b"). tokens.css is not edited; this rule wins on source order. THE EDGE IS --ink. On the filled primary it is the fill's own colour and does not show; "Learn more" states its orange edge at the end of this file. On the outline secondary it is the control's boundary, 13.62:1 on paper, as the homepage's light tiles draw it — tokens.css's --text-mute was 3.47:1, clear of the 3:1 WCAG 1.4.11 asks and no more. The homepage's tile and band rules state all three properties at (0,2,0), so nothing there moves. THE 44x44 TOUCH MINIMUM is the min-height floor: with no vertical padding the pill is exactly 44px, inline-flex centring the label in it. */ .btn-primary,.btn-secondary{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 22px;font-size:17px;border:1px solid var(--ink); text-decoration:none;white-space:nowrap; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .btn-primary:hover,.btn-secondary:hover{text-decoration:none} .hero-cta,.home-rec-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)} /* ============================================================ NAV — white, hairline, sentence case ============================================================ v1's dark slab is retired along with --nav-*, backdrop-filter, the @supports fallback and the prefers-reduced-transparency block: a white bar over a white page needs none of them. js/nav.js is untouched — it still toggles .scrolled and .menu-open, and both remain live hooks below. */ .site-nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper); border-bottom:1px solid var(--hairline);transition:border-color var(--dur) var(--ease)} /* the only thing scrolling changes now is the weight of the rule underneath */ .site-nav.scrolled{border-bottom-color:var(--text-mute)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);min-height:var(--nav-h)} .brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:inherit} .brand:hover{text-decoration:none} .brand .name{font-weight:500;font-size:20px;letter-spacing:var(--track-section);color:var(--ink)} /* Sentence case, no letterspacing. tokens.css allows exactly one uppercase letterspaced label — the logo descriptor — and only "inside the logo files". This is live markup, not logo artwork, so the exception does not apply. --text-soft, not --text-mute: 12px is small text. */ .brand .sub{font-size:var(--fs-label);color:var(--text-soft);margin-top:4px} .nav-links{display:flex;align-items:center;gap:var(--sp-6)} .nav-link{display:inline-flex;align-items:center;min-height:44px; font-size:var(--fs-ui);color:var(--text-soft);text-decoration:none; transition:color var(--dur) var(--ease)} .nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px; background:var(--ink);color:var(--paper);font:500 var(--fs-ui)/1 var(--sans); padding:11px 24px;border:1px solid var(--ink);border-radius:var(--radius-pill); text-decoration:none;white-space:nowrap;cursor:pointer; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)} @media(hover:hover) and (pointer:fine){ .nav-link:hover{color:var(--ink);text-decoration:none} .nav-cta:hover{text-decoration:none} } /* ---- mobile menu ---- */ .nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none; padding:0;background:transparent;border:none;border-radius:var(--radius);color:var(--ink);cursor:pointer} .nav-toggle-bars{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor} .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px; border-radius:2px;background:currentColor;transition:transform var(--dur-panel) var(--ease)} .nav-toggle-bars::before{top:-6px} .nav-toggle-bars::after{top:6px} /* the bars fold into an X off aria-expanded, so open state has exactly one source of truth — the attribute assistive tech reads is the same one that drives the paint */ .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent} .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)} /* absolute, not in flow: opening the menu must not push the page down. top:100% resolves against .site-nav, which is positioned by being sticky. The 0fr->1fr collapse is the same mechanic as the services and FAQ panels. */ .nav-mobile{display:none;position:absolute;top:100%;left:0;right:0;grid-template-rows:0fr; background:var(--paper);border-bottom:1px solid transparent; transition:grid-template-rows var(--dur-panel) var(--ease)} .site-nav.menu-open .nav-mobile{grid-template-rows:1fr;border-bottom-color:var(--hairline)} /* visibility, not overflow alone: a collapsed panel whose links stay focusable is a tab trap into invisible content. Delayed on close so it clears after the collapse, immediate on open. */ .nav-mobile-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--dur-panel)} .site-nav.menu-open .nav-mobile-inner{visibility:visible;transition-delay:0s} .nav-mobile-link{display:block;padding:var(--sp-4) 0;font-size:var(--fs-ui);color:var(--text-soft); text-decoration:none;border-bottom:1px solid var(--hairline)} .nav-mobile .nav-cta{display:flex;margin:var(--sp-5) 0 var(--sp-6)} @media(hover:hover) and (pointer:fine){ .nav-mobile-link:hover{color:var(--ink);text-decoration:none} } /* ---- nav breakpoints ---- MUST STAY BELOW the .nav-toggle and .nav-mobile base rules. Both of those declare display:none at (0,1,0), which is the same specificity as the overrides here, so this block only wins on SOURCE ORDER. Moving it above them leaves the hamburger permanently hidden at every width. BUG FIX carried in with the rebuild. v1 hid .nav-link at <=900px but only revealed .nav-toggle at <=820px, so between 821px and 900px the bar had no links AND no hamburger — the primary navigation was unreachable. The two breakpoints are now the same number. js/nav.js's matchMedia moved with it, from (min-width:821px) to (min-width:901px), so the menu still resets at exactly the width the desktop bar takes over. */ @media(max-width:900px){ .nav-link{display:none} .nav-toggle{display:inline-flex} .nav-mobile{display:grid} .nav-links{gap:var(--sp-3)} } @media(max-width:480px){.brand .sub{display:none}} /* ============================================================ HERO — type on white ============================================================ The video, its poster stack, the wash, the bottom fade, the source-picking script and the EKG wave are all gone. Nothing is layered, nothing is out of flow, and the section carries no background of its own: type and space do the work. Left-aligned rather than v1's centred block — centred display type over a full-bleed video was a composition for imagery that no longer exists. */ .hero{padding:clamp(64px,10vw,116px) 0 clamp(56px,8vw,96px)} /* 24ch resolves to ~35 characters, so the 72-character headline balances onto two or three lines rather than running the full 980px measure at the 56px cap */ .hero h1{max-width:24ch;color:var(--ink)} .hero .sub-lead{margin-top:var(--sp-5);max-width:var(--measure); font-size:var(--fs-section);line-height:1.5;color:var(--text-soft)} .hero .hero-cta{margin-top:var(--sp-7)} /* ============================================================ BAND — three statements under the hero ============================================================ Full-bleed: the section sits outside .wrap and carries its own inner .wrap, so it reaches both edges with no 100vw (which over-measures by the scrollbar width on Windows) and no negative margins. The hairlines are LOAD-BEARING, not decoration. --panel is 1.09:1 against --paper: without the top and bottom rules the band does not read as a band at all, it reads as a rendering artefact. */ .band{background:var(--panel);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline); padding:clamp(48px,6vw,72px) 0} /* 1.15fr in the middle: breaks the dead-even three-up, and that column carries the longest line, so the extra width is doing real work */ .band-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr} /* dividers come from borders + symmetric padding rather than gap, so the hairline sits centred in the space between columns. --sp-6 (32px), not v1's --sp-7 (48px): at the 980px measure the three columns fall to 250/288/250px, and 48px of padding on both inner sides was consuming 10% of the container. 32px returns the columns to 270/311/270. */ .band-item{padding:0 var(--sp-6)} .band-item:first-child{padding-left:0} .band-item:last-child{padding-right:0} .band-item + .band-item{border-left:1px solid var(--hairline)} .band-item h3{font-size:var(--fs-section);color:var(--ink);margin-bottom:var(--sp-3)} .band-item p{color:var(--text-soft);max-width:var(--measure)} @media(max-width:760px){ .band-grid{grid-template-columns:1fr} .band-item{padding:var(--sp-6) 0} .band-item:first-child{padding-top:0} .band-item:last-child{padding-bottom:0} .band-item + .band-item{border-left:none;border-top:1px solid var(--hairline)} } /* ============================================================ SECTION FURNITURE ============================================================ */ .section-head{max-width:var(--measure);margin-bottom:var(--sp-8)} .section-title{font-size:var(--fs-section);color:var(--ink)} .section-lead{margin-top:var(--sp-4);color:var(--text-soft);max-width:var(--measure-n)} /* The surviving kickers. Six of v1's nine were dropped because the heading beneath already said it; these three carry information the heading does not. Sentence case, no letterspacing, no text-transform, and no "//" glyph — all three devices are retired. --text-soft because 12px is small text. */ .kicker{font-size:var(--fs-label);color:var(--text-soft);margin-bottom:var(--sp-3)} /* ============================================================ AGENTS — featured agent, then the eight that stack on ============================================================ */ .agents-home{padding:var(--section-y) 0 0} /* Deck under the headline. The leading mark is injected by paint() in js/main.js as , so it has to stay styleable. Under v2.0 it drew a short green rule; the fill went at THE SWITCH phase 7, and the rule matches nothing since the old homepage went. */ .pain{margin-top:var(--sp-5);max-width:var(--measure-n);font-size:var(--fs-section); line-height:1.5;color:var(--text-soft)} .pain .ic{display:block;width:34px;height:2px;border-radius:2px; font-size:0;line-height:0;margin-bottom:var(--sp-4)} .pain-note{margin-top:var(--sp-4);max-width:var(--measure);color:var(--text-soft)} /* ---- the featured agent ---- */ .home-rec{padding-top:var(--sp-2)} .home-rec-num{font-size:var(--fs-label);font-variant-numeric:tabular-nums} .home-rec-name{font-size:var(--fs-section);color:var(--ink);margin:var(--sp-2) 0 var(--sp-4)} .home-rec-what{max-width:var(--measure);font-size:var(--fs-section);line-height:1.5;color:var(--text-soft)} .home-rec-how{margin-top:var(--sp-4);max-width:var(--measure);color:var(--text-soft)} /* the line that carries the broadened positioning — the use case is the variable. One step quieter than .home-rec-how so it reads as a note on it. */ .home-rec-use{margin-top:var(--sp-4);max-width:var(--measure);color:var(--text-soft)} .home-rec-cta{gap:var(--sp-5);margin-top:var(--sp-6)} /* 13px vertical padding + a 44px floor: at --fs-ui the link's own box is about 18px tall and misses the touch minimum on every screen. Already inline-flex, so the padding counts toward the box. */ .home-rec-link,.home-agents-link,.faq-link{display:inline-flex;align-items:center;min-height:44px; padding:13px 0;font-size:var(--fs-ui);text-decoration:none; transition:color var(--dur) var(--ease)} .home-agents-link{margin-top:var(--sp-6)} .faq-link{margin-top:var(--sp-5)} .arw{display:inline-block;margin-left:.4em;transition:transform var(--dur) var(--ease)} @media(hover:hover) and (pointer:fine){ .home-rec-link:hover,.home-agents-link:hover,.faq-link:hover{text-decoration:underline;text-underline-offset:3px} .home-rec-link:hover .arw,.home-agents-link:hover .arw,.faq-link:hover .arw{transform:translateX(3px)} } /* ---- the eight that stack on after the voice agent is running ---- The label over a hairline is the only rule between the two groups; without it the eight cards read as alternatives to the featured agent rather than as what comes next. --sp-8 above, --sp-7 below: a slight lead, because a label centred in its own whitespace attaches to neither side. */ .home-stack{margin-top:var(--sp-8)} .home-stack-label{font-size:var(--fs-label);color:var(--text-soft); padding-bottom:var(--sp-4);border-bottom:1px solid var(--hairline);margin-bottom:var(--sp-7)} /* The peeking robot is gone, so this row no longer needs to be a positioning context for it — it is a plain block again. */ .home-agents-row{display:block} .agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)} /* `backwards` (not `forwards`) matters twice over: it lets the JS-set animation-delay hold the hidden state, and it hands the element back to its own declared values afterwards — so :hover still works and reduced-motion leaves the card visible rather than stuck at opacity 0. paint() in js/main.js sets animation-delay inline; this rule is what makes it mean anything. */ .agent{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius); padding:var(--sp-5);text-align:left;opacity:1;transform:none; animation:rise 320ms var(--ease) backwards; transition:border-color var(--dur) var(--ease)} @keyframes rise{from{opacity:0;transform:translateY(8px)}} .agent .num{font-size:var(--fs-label);font-variant-numeric:tabular-nums} .agent h3{font-size:var(--fs-section);color:var(--ink);margin:var(--sp-2) 0 var(--sp-2)} .agent p{color:var(--text-soft)} /* The card is rendered as an when its agent has a section on /agents (see AGENT_SECTIONS in js/main.js). These keep it identical to the
version: the UA underline propagates to descendants, so text-decoration has to be killed on the card itself, not on the children. */ a.agent{display:block;text-decoration:none;color:inherit;cursor:pointer} a.agent:hover{text-decoration:none} /* the global ring is border-radius:2px, which would cut the card's corners */ a.agent:focus-visible{border-radius:var(--radius)} @media(hover:hover) and (pointer:fine){ a.agent:hover{border-color:var(--text-mute)} /* A plain div.agent has nothing to click, so it must not react under the cursor: that covers main.js's documented div fallback. (0,2,1) against .agent's (0,2,0), so it wins on specificity rather than source order. */ div.agent:hover{border-color:var(--hairline)} } /* 5+ cards -> a fixed 4-up grid. paint() lifts FEATURED_AGENT out of the array and index.html renders it as its own section, so the home grid carries EIGHT — and eight lands as a clean 4+4. Industries with 4 agents never reach the threshold and keep the auto-fit single row above. At the 980px measure a 4-up card is 233px, comfortably clear of the 200px auto-fit floor. */ .agents:has(.agent:nth-child(5)){grid-template-columns:repeat(4,1fr)} /* A 2-up step: eight halves cleanly into 2+2+2+2 with nothing stranded. 900px is where four tracks cross the 200px floor — below a 1036px viewport the container is fluid, so this crossover is exactly where it was at v1's 1064px measure and the number did not need recomputing. Same specificity as the rule above (0,2,0), so it wins on SOURCE ORDER — it must stay below it, and so must the 600px block. */ @media(max-width:900px){.agents:has(.agent:nth-child(5)){grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.agents,.agents:has(.agent:nth-child(5)){grid-template-columns:1fr}} /* ---- custom agents ---- v1 gave this a tinted green panel. v2 has no tint, so the surface is gone entirely: a hairline above and space around it. Everything else in this column is a panel or a card, so bare type IS the differentiation — this reads as a note on the whole agents story rather than a ninth card. */ .custom-agents{margin-top:var(--section-y);padding-top:var(--sp-7);border-top:1px solid var(--hairline)} .custom-agents h3{font-size:var(--fs-section);color:var(--ink);margin-bottom:var(--sp-3)} .custom-agents-body{max-width:var(--measure);color:var(--text-soft)} /* ============================================================ INTEGRATIONS MARQUEE ============================================================ */ .integrations{padding:var(--section-y) 0 0} /* --marquee-dur is a DURATION, not a speed: the track travels one group's width in this time, so px/s depends on how wide the group actually is. Change the item count, the font, or the font-size and this needs recomputing. MEASURED IN THE BROWSER, not estimated. With Instrument Sans 500 loaded at 18px the six-item group renders 1215.8px wide (track 2432px, exactly 2x): 1215.8 / 24.3s = 50.03 px/s which holds v1's 50 px/s, and is why this is 24.3s rather than the 27s Fraunces needed at 1352px. Summing raw advances from the TTF predicted 1207px — 0.7% under the rendered figure, the difference being kerning. Re-measure if the item count, the font, or --marquee-fs changes. */ .marquee{--marquee-dur:24.3s;--marquee-fs:18px; overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline); padding:var(--sp-5) 0} /* the track holds TWO identical groups and travels exactly -50%, i.e. one group's width, so the loop restarts on a pixel-identical frame with no seam. Both