/* ===================================================================== MARROW, THE HOMEPAGE. assets/home/home.css Edwin, 2026-10-08: "make the website pop a lot more ... animated graphics showing the benefits ... the new branding". Built to ~/.edwinstrong/design-canon/homepage-brief-20261008.md on the hybrid canon (hybrid-spec-20261005.md) with the Horizon and the ringed mark from the approved sign in entrance (entrance-preview-20261008.html) and the logo system (logo-system-20261008/). ONE SHEET, ONE PAGE. Every rule opens with #main, so it reaches index.html only (the only page linking it). Since 2026-10-09 the shared components (bands, type, rings, doors, tiers, the fee flow, the objection list, proof, the hero, the mark, the Horizon, the close, the nav state and the motion contract) live in assets/public/public.css, and the device and app screens in assets/public/public-app.css; this sheet keeps the offer band, the doors section frame, the tour, the brand preview and the AI section. Colours are the hybrid values dialed-web.css declares (--hy-*) and the css/styles.css tokens; the deepened ring hues on paper are color-mix() of the dark hues with --bone-black (the logo system light ground rule). No new token. MOTION. One hero moment, then each section plays its one graphic once when it scrolls into view (assets/public/public.js adds .is-in) and rests. The base rules ARE the rest state; every start state lives under html.pub-armed, which the head script sets only when the visitor allows motion and has not paused it. The two loops (ring 24s, rim 70s) live under html.pub-loops. Only opacity, transform, stroke-dasharray, stroke-dashoffset, stroke-opacity and box-shadow move. No filter, no backdrop blur. No em or en dashes. ===================================================================== */ #main > .hm-ai.dialed-band { padding-bottom: 104px; } /* ---------- 3. Pick your door: one lit panel, three doors on one row grid ---------- */ #main > .pub-light.hm-doors { padding-block: 96px; } /* Above the phone width only: under 768 the shared .pub-head phone rule (28px) holds, as it did when both lived in one sheet. */ @media (min-width: 768px) { #main .hm-doors-head { margin-bottom: 44px; } } #main .hm-doors .hm-doors-head .pub-eyebrow { color: var(--hy-aqua-hi); } #main .hm-doors .hm-doors-head .pub-h2 { color: var(--hy-ink); } #main .hm-doors .hm-doors-head .pub-h2 em { color: var(--hy-aqua-hi); } #main .hm-doors :focus-visible { outline: 2px solid var(--mz-ember); outline-offset: 2px; } /* ---------- 4. How it works: one device, four live screens ---------- */ #main .hm-tour { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 96px; align-items: start; margin-top: 8px; } /* The band clips without becoming a scroll container, so the device can stay put. */ #main > .hm-how.dialed-band { overflow: clip; } #main .hm-tabs { display: none; } #main .hm-steps-l { grid-column: 1; display: flex; flex-direction: column; padding-bottom: 14vh; } #main .hm-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 46ch; padding-left: 22px; border-left: 2px solid var(--hy-hairline); transition: border-color 500ms cubic-bezier(0.22, 1, 0.36, 1); } #main .hm-step:first-child { min-height: 56vh; justify-content: flex-start; padding-top: 12vh; } #main .hm-step.is-on { border-left-color: var(--hy-aqua-hi); } #main .dialed-band p.hm-step-n { margin: 0; font-size: 12px; letter-spacing: 0.16em; color: var(--hy-muted); } #main .dialed-band .hm-step.is-on p.hm-step-n { color: var(--hy-aqua-hi); } #main .hm-step-t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--hy-muted); transition: color 500ms ease; } #main .hm-step.is-on .hm-step-t { color: var(--hy-ink); } #main .dialed-band p.hm-step-b { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hy-muted); } #main .hm-stage { grid-column: 2; grid-row: 1; position: sticky; top: max(88px, calc(50vh - 348px)); display: flex; justify-content: center; padding-bottom: 48px; } #main .hm-brand .bp-phone .pub-island { top: 22px; } /* ---------- 5. Put your name on it: the phone in the hybrid app look, the form on paper ---------- */ #main .hm-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 80px; align-items: start; } #main .hm-brand > .pub-head { grid-column: 1; grid-row: 1; margin-bottom: 0; } #main .hm-brand .bp { display: contents; } #main .hm-brand .bp-form { grid-column: 1; grid-row: 2; align-self: start; width: 100%; max-width: 480px; margin-top: 36px; } #main .hm-brand .bp-phone { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 320px; } #main .hm-brand .bp-screen { position: relative; isolation: isolate; overflow: hidden; display: block; height: 100%; border-radius: 44px; padding: 0; border: 0; background: var(--hy-ground); color: var(--hy-ink); } #main .hm-brand .bp-logo { width: 36px; height: 36px; border-radius: 10px; font-family: var(--sans); font-size: 13px; background: var(--hy-sunk, #2A363F); color: var(--hy-ink, #F6F8F9); border: 1px solid var(--hy-aqua, #3EF0CD); } #main .hm-brand .bp-name { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--hy-ink); } #main .hm-brand .bp-hello em { font-style: italic; font-weight: 400; color: var(--hy-aqua-hi); } #main .hm-brand .bp-tabs.ap-tabs { margin: 0; } #main .hm-brand .bp-tabs .on { color: var(--bp-accent, var(--hy-aqua)); text-decoration: none; } #main .hm-brand .bp-form { padding: 28px; background: var(--paper-card); border: 1px solid var(--rule-soft); border-radius: 16px; color: var(--ink-primary); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } #main .hm-brand .bp-form::before { display: none; } #main .hm-brand .bp-label { color: var(--ink-secondary); } #main .hm-brand main .bp-form .bp-input, #main .hm-brand .bp-form .bp-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { background: var(--color-pure-white); border: 1px solid var(--rule-strong); color: var(--ink-primary); } #main .hm-brand .bp-input::placeholder { color: var(--ink-tertiary); } #main .hm-brand .bp-input:focus-visible { outline: 2px solid var(--mz-ember); } #main .hm-brand .bp-form .bp-sw { color: var(--ink-primary); } #main .hm-brand .bp-sw span { border-color: var(--rule-strong); } #main .hm-brand .bp-sw input:checked + span { border-color: var(--ink-primary); outline-color: var(--ink-primary); } #main .hm-brand .bp-sw input:focus-visible + span { outline-color: var(--ink-primary); } #main .hm-brand .bp-sw input[value="var(--color-pure-white)"] + span { border-color: var(--rule-strong); } #main .hm-brand .bp-sw-own span::after { color: var(--ink-primary); } #main .hm-brand .bp-up { color: var(--ink-primary); border-color: var(--rule-strong); } #main .hm-brand .bp-up:focus-within { outline-color: var(--ink-primary); } #main .hm-brand .bp-note { color: var(--ink-secondary); } #main .hm-brand .bp-go { align-self: stretch; margin-top: 4px; } /* member train (the brand preview) */ #main .hm-brand .rt-pad { padding: 4px 16px 0; } #main .hm-brand .rt-eb { margin: 16px 0 0; font-size: 12px; line-height: 18px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-aqua); } #main .hm-brand .bp-screen p.bp-hello { margin: 12px 0 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 44px; color: var(--hy-ink); } #main .hm-brand .bp-screen .score-row.rt-score { margin-top: 26px; display: flex; justify-content: space-around; gap: 10px; padding: 22px 12px 20px; border-radius: 12px; background-color: var(--hy-card); background-image: none; border: 1px solid var(--hy-edge); } #main .hm-brand .bp-screen .score { flex: 0 1 100px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; } #main .hm-brand .ap-ringwrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; } #main .hm-brand .bp-screen .ring { width: 64px; height: 64px; overflow: visible; } #main .hm-brand .bp-screen .ring .ring-track { stroke: var(--hy-edge); } #main .hm-brand .bp-screen .ring[data-role] { color: var(--hy-teal); } #main .hm-brand .bp-screen .ring[data-role="activity"] { color: var(--hy-aqua-hi); } #main .hm-brand .bp-screen .score .score-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 26px; color: var(--hy-ink); } #main .hm-brand .bp-screen .score .score-label { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; text-align: center; color: var(--hy-muted); } #main .hm-brand .rt-sub { margin-top: 2px; font-size: 12px; line-height: 16px; text-align: center; color: var(--hy-muted); } #main .hm-brand .rt-next { margin-top: 16px; display: flex; flex-direction: column; padding: 18px; border-radius: 12px; background-color: var(--hy-card); background-image: none; border: 1px solid var(--hy-edge); } #main .hm-brand .rt-nk { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hy-muted); } #main .hm-brand .bp-screen .bp-t { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 33px; color: var(--hy-ink); } #main .hm-brand .bp-screen .bp-s { display: block; margin-top: 2px; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--hy-muted); } #main .hm-brand .rt-when { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--hy-ink); } #main .hm-brand .rt-step { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 10px 16px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); } #main .hm-brand .rt-step span { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; color: var(--hy-ink); } #main .hm-brand .rt-step small { font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hy-muted); } #main .hm-brand .rt-step i { font-style: normal; color: var(--hy-muted); } #main .hm-brand .rt-steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } #main .hm-brand .rt-steps2 .rt-step { margin-top: 9px; } #main .hm-brand .rt-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; } #main .hm-brand .rt-pills span { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 999px; background: var(--hy-card); border: 1px solid var(--hy-hairline); font-weight: 500; font-size: 16px; color: var(--hy-ink); } #main .hm-brand .rt-pills svg { width: 20px; height: 20px; fill: var(--hy-ink); } #main .hm-brand .bp-head { display: flex; align-items: center; gap: 10px; } /* ---------- 6. Your AI connection ---------- */ #main .hm-ai-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; } #main .hm-ai-mark figcaption { display: flex; flex-direction: column; align-items: center; gap: 14px; } #main .hm-ai-mark { border: 0; background: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; } #main .hm-mk1 { width: 240px; height: 240px; overflow: visible; } #main .hm-mk1 .pub-mark-cells { stroke: #4FF2D3; } #main .hm-mk1 .hm-cell { transform-box: fill-box; } #main .hm-cell-b { color: var(--atelier-dark-blue); } #main .hm-cell-a { color: var(--atelier-dark-amber); } #main .hm-cell-line { stroke: currentColor; fill: currentColor; fill-opacity: 0.1; } #main .hm-cell-lum { stroke: currentColor; stroke-opacity: 0.16; fill: none; } #main .hm-link-l { stroke: var(--hy-aqua-hi); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } #main .hm-mk1 .pub-mark-core-lum { stroke-opacity: 0.4; } #main .hm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; list-style: none; } #main .hm-legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-ink); } /* The legend names each colour in its own colour (no decorative dots, Edwin 2026-10-08). */ #main .hm-legend li.hm-ld-a { color: var(--atelier-dark-amber); } #main .hm-legend li.hm-ld-b { color: var(--atelier-dark-blue); } #main .hm-legend li.hm-ld-t { color: var(--hy-teal); } #main .dialed-band p.hm-cap { margin: 0; max-width: 34ch; text-align: center; font-size: 15px; line-height: 1.5; color: var(--hy-muted); } #main .hm-ex { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 16px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); } #main .dialed-band p.hm-who { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hy-aqua); } #main .dialed-band p.hm-ask { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--hy-ink); text-transform: none; letter-spacing: 0; min-height: 3.2em; } #main .hm-answer.dialed-glass { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; border-color: var(--hy-edge); } #main .dialed-band .hm-answer p.hm-ans { margin: 0; font-size: 16px; line-height: 1.55; color: var(--hy-ink); } #main .hm-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; } #main .hm-cap-card.dialed-glass { padding: 24px; display: flex; flex-direction: column; gap: 10px; } #main .hm-cap-t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; } #main .dialed-band .hm-cap-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hy-muted); } #main .dialed-band .hm-cap-card p.hm-cap-ask { font-size: 13px; line-height: 1.55; color: var(--hy-aqua-hi); text-transform: none; letter-spacing: 0; } #main .hm-guard { margin-top: 24px; } #main .dialed-band p.hm-tm { margin-top: 24px; padding: 12px 16px; border-radius: 10px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; text-transform: none; color: var(--hy-muted); } /* ---------- 7. Pricing: a dark band, the doors' rings, the fee told as a flow ---------- */ #main > .hm-ai + .hm-price { margin-top: 56px; } @media (max-width: 1023px) { #main .hm-tour { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } #main .hm-tabs { display: flex; grid-row: 1; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); justify-self: center; max-width: 100%; } /* 44, not 40: the tap floor holds at 768 to 1023 too (Fable review fa120be8). */ #main .hm-tab { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--hy-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 300ms ease, color 300ms ease; } #main .hm-tab[aria-selected="true"] { background: var(--hy-card); color: var(--hy-ink); box-shadow: none; } #main .hm-stage { grid-column: 1; grid-row: 2; position: static; padding-bottom: 40px; } #main .hm-steps-l { grid-row: 3; padding-bottom: 0; } #main .hm-step, #main .hm-step:first-child { display: none; min-height: 0; padding: 0; border-left: 0; text-align: center; align-items: center; margin-inline: auto; } #main .hm-step.is-on { display: flex; } #main .hm-caps { grid-template-columns: minmax(0, 1fr); } #main .hm-ai-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } #main .hm-brand { grid-template-columns: minmax(0, 1fr); } #main .hm-brand .bp-phone { grid-column: 1; grid-row: 2; width: 300px; max-width: 100%; margin-top: 32px; } #main .hm-brand .bp-form { grid-column: 1; grid-row: 3; max-width: none; } } @media (max-width: 767px) { /* Gauntlet L5: 44px on both axes under 768 (tests/gauntlet-smoke-20260915 G). */ #main .hm-tab { min-height: 44px; padding: 0 10px; font-size: 10px; letter-spacing: 0.08em; } #main .hm-ex { padding: 22px; } #main .hm-brand .bp-form { padding: 22px; margin-top: 28px; } #main .hm-mk1 { width: 200px; height: 200px; } } /* Gauntlet O2, measured at 320 with CDP device metrics: the four tour tabs held 3px more than the strip and the end tabs sat 6.81px outside it. Trim the side padding and the tracking. */ @media (max-width: 420px) { #main .hm-tabs { gap: 2px; padding: 3px; } #main .hm-tab { min-height: 44px; padding: 0 7px; letter-spacing: 0.04em; } } @media (prefers-reduced-motion: no-preference) { /* 2. The code pill lights up once and stays lit. */ #main .hm-brand .bp :is(.bp-logo, .bp-cta) { transition: background-color 600ms ease, color 600ms ease; } /* 6. The ask types, the two assistants light and connect to the core, the answer rises. */ .pub-armed #main .hm-ai-grid:not(.is-in) .hm-cell-line { stroke-opacity: 0.1; } .pub-armed #main .hm-ai-grid:not(.is-in) .hm-cell-lum { stroke-opacity: 0; } .pub-armed #main .hm-ai-grid:not(.is-in) .hm-link-l { stroke-dashoffset: 1; } .pub-armed #main .hm-ai-grid:not(.is-in) .hm-mk1 .pub-mark-core-lum { stroke-opacity: 0.22; } .pub-armed #main .hm-ai-grid:not(.is-in) .hm-answer { opacity: 0; transform: translateY(16px) scale(0.985); } .pub-armed #main .hm-ai-grid.is-in .hm-cell-b .hm-cell-line { animation: hm-kf-lit 420ms ease 1700ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-cell-b .hm-cell-lum { animation: hm-kf-lum 420ms ease 1700ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-link-b { animation: pub-kf-draw1 500ms cubic-bezier(0.22, 1, 0.36, 1) 1800ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-cell-a .hm-cell-line { animation: hm-kf-lit 420ms ease 2300ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-cell-a .hm-cell-lum { animation: hm-kf-lum 420ms ease 2300ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-link-a { animation: pub-kf-draw1 500ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-mk1 .pub-mark-core-lum { animation: hm-kf-core 400ms ease 2800ms both; } .pub-armed #main .hm-ai-grid.is-in .hm-answer { animation: pub-kf-rise 680ms cubic-bezier(0.22, 1, 0.36, 1) 2800ms both; } } @media (prefers-reduced-motion: reduce) { #main :is(.hm-pane, .hm-pane.is-on, .hm-step, .hm-tab) { transition: none; } } @keyframes hm-kf-lit { from { stroke-opacity: 0.1; } to { stroke-opacity: 1; } } @keyframes hm-kf-lum { from { stroke-opacity: 0; } to { stroke-opacity: 0.16; } } @keyframes hm-kf-core { from { stroke-opacity: 0.22; } to { stroke-opacity: 0.4; } }