/* Applicaa Homepage v6 — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference "Applicaa Homepage v6.dc.html" * (12 sections, ~560 inline styles) WITHOUT its inline styles. Every value below was read out * of the reference, not guessed. * * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right * component, and this file carries the reference's metric DELTAS as page-scoped overrides. * Tuning toward the DS later is then deleting overrides one at a time, not rewriting markup. * * Every rule is scoped under `.home-v6-page`, so the file is inert on any other page — the * pattern proven in production by /r/10 (`.about-page`). * * WHAT CAME FROM THE DESIGN SYSTEM * .section / .page-container the band + container (geometry overridden below) * .marquee / .marquee-frame / §2 Trusted by, both rows, incl. the reverse row * .marquee-track(-reverse) * .cta-section(-flat) / §12 Closer — the standard full-bleed coral CTA * .cta-section-actions * .section-glow(-coral|-white| decorative washes outside the closer * -drift) * .btn .btn-primary .btn-ink every button * .btn-light .btn-outline-light * .orange-title the coral highlight ("Meet Emma.", "a decade") * font-label / text-label-l / the mono eyebrow really is IBM Plex Mono 500 / 12.5px / * text-label-m / text-label-s 0.08em = font-label + text-label-l + tracking-label * / tracking-label * .badge §11 the three event tags * data-controller="reveal" the reference's own scroll reveal (DS controller, markup-only) * * HOW THE REFERENCE'S TOKENS COMPARE TO OURS (its :root is on the page root div) * IDENTICAL, so ours are used: --ink #0F1A4F, --ink-soft #4D5B7F, --ink-mute #8893B0, * --rule #E6E8EF, --dark #0B1023, --accent #EC634B, --accent-soft #FFE7DD, --paper #FFFFFF, * --sand #F4F5F9, plus #1A8A3F (ok-green), #DFF1E5 (ok-green-soft), #34D07F (ok-green-bright), * #FEF7E7 (light-yellow) and shadow-card. * DIFFERENT, so declared below (owner's call: keep the reference's colours). * * GEOMETRY: reference container is max-width 1200px with a 24px section gutter; our DS is * 1224px / 32px. Overridden HERE only — .page-container is untouched in app/. * ============================================================================================ */ .home-v6-page { /* reference-only values, all read off the reference */ --dc-sand-2: #E9ECF3; /* leftover: user bubble now uses --color-light-blue */ --dc-on-dark-body: var(--color-on-dark-body); /* body copy on the dark panels/cards */ --dc-on-dark-bright: var(--color-on-dark-bright); /* the audit pill label on dark */ --dc-on-dark-mute: var(--color-ink-mute); /* mono captions on dark */ --dc-coral-line: #F8D2C3; /* the border on an accent-soft surface */ --dc-conn: #C3C9D9; /* journey connector strokes */ --dc-shadow-ask: 0 30px 80px rgba(15, 26, 79, .12); --dc-shadow-audit: 0 40px 90px rgba(4, 8, 24, .5); --dc-shadow-video: 0 30px 70px rgba(4, 8, 24, .5); --dc-shadow-hover: 0 16px 40px rgba(15, 26, 79, .1); --dc-shadow-hover-lg: 0 16px 40px rgba(15, 26, 79, .12); --dc-ease: cubic-bezier(.2, .8, .2, 1); background: var(--color-page-bg); } /* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */ /* NO BREAKPOINT HERE IN THE REFERENCE - the padding steps that were here are gone. * A gutter step at 767px and a section-padding step at 991px had been added right across the * batch. No reference has either: they pad with literal px, no clamp and no media query, all the * way down to a phone - and neither 767px nor 991px is even a breakpoint the package uses * anywhere (its own are 1080/1000/940/900/800/720/680/640/620/560). Removed to keep the port * faithful; the narrow-viewport squeeze that leaves is the reference's own and is recorded in * STATUS.md section 5 as the defect most worth fixing at source, after the port. */ /* ── Sections are OPAQUE, because this page stacks them ─────────────────────────────────── */ /* page.js section 3 pins five sections and slides the next one over them. A slide-over only reads if the covering section is opaque — a transparent one shows the pinned section straight through, which looks like a z-index bug and cannot be fixed with a z-index. (Measured before this rule: 19 pinned/covering pairs bled, across the whole page; at the very bottom 682px of the pinned testimonial section sat behind the closer.) The cause is a porting habit, not a design decision: body.app already paints page-bg, so dropping the reference's per-section background changed nothing visible — until two sections occupied the same pixels, which is exactly what pinning causes. Telling detail: the only three sections that never bled are the three that happened to keep a `bg-paper` utility. :where() holds this at specificity 0-0-0 (coding-standards section 2, rule 5), so it is a default rather than a decree and those `bg-paper` utilities still win. */ :where(.home-v6-page > section) { background-color: var(--color-page-bg); } /* ── Vertical rhythm: hand-tuned per section in the reference ───────────────────────────── */ /* Not a scale — these are the reference's own values, section by section, so the DS padding modifiers cannot express them. `dc-py--` is deliberately literal. */ .home-v6-page .dc-py-136-32 { padding-top: 136px; padding-bottom: 32px; } /* Hero bottom: 32 was tight once the proof strip sat in the section (owner, 2026-08-17). */ .home-v6-page .dc-py-136-96 { padding-bottom: 96px; } .home-v6-page .dc-py-8-56 { padding-top: 8px; padding-bottom: 56px; } /* The trust strip after the card came off (owner, 2026-08-17): more air above so the logos are not tight under the hero lede, less below so the dark band follows sooner. Same dc-py-- vocabulary as every other section on the page. */ .home-v6-page .dc-py-32-32 { padding-top: 32px; padding-bottom: 32px; } /* Full-bleed white band behind the unframed trust strip. Individual logos now carry cards. */ /* The trust strip follows the pinned hero and carries `data-pin-shadow` — a white wash (see `_shared/motion.css`). Later pin-followers still get the dark stack shadow from page.js. */ .home-v6-page .dc-band-paper { background-color: var(--color-paper); } /* ...and the section below fades that white back into the page so the band has no hard edge. Fading paper -> page-bg rather than paper -> `transparent`: interpolating to `transparent` runs through transparent BLACK in sRGB and greys the middle of the ramp. Stop position chosen by screenshot, not by reasoning. */ .home-v6-page .dc-band-fade { background-image: linear-gradient(to bottom, var(--color-paper) 0, var(--color-page-bg) 180px); } .home-v6-page .dc-py-40-64 { padding-top: 40px; padding-bottom: 64px; } .home-v6-page .dc-py-16-0 { padding-top: 16px; padding-bottom: 0; } .home-v6-page .dc-py-104 { padding-top: 104px; padding-bottom: 104px; } .home-v6-page .dc-py-0-96 { padding-top: 0; padding-bottom: 96px; } /* #audit only (owner, 2026-08-20): no bottom padding, so the docked mock can run out of the panel and onto the page instead of stopping inside the section's own gutter. */ .home-v6-page .dc-py-0-0 { padding-top: 0; padding-bottom: 0; } .home-v6-page .dc-py-96 { padding-top: 96px; padding-bottom: 96px; } .home-v6-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } /* The closer: the reference writes padding-top 64 with margin-top -64, which CANCEL — the panel lands flush on the section above either way (measured: gap 0). Only the section's BOX was pulled 64px up, and that box overlap is what stopped the closer carrying a background: an opaque closer would have painted over the last 64px of the white "What's hot" band, border and all. Written as the net offset it always was (`dc-py-0-96`, which already exists), so the rule below can make it opaque. The panel does not move. */ /* ── Display type: the reference clamps every headline individually ─────────────────────── */ /* 22 distinct steps, named by their maximum so the mapping to a DS step stays obvious. Proxima 700 unless the step says otherwise; the tracking is the reference's. */ .home-v6-page [class*="dc-t-"] { font-family: var(--font-heading); font-weight: 700; } /* margin + text-wrap at ZERO specificity, via :where(), so an ordinary utility can override them. Written as a plain descendant selector (0-2-0) this silently beats every unlayered Tailwind margin utility (0-1-0) and `mt-5` on a heading would do nothing at all. Same trick the design system uses for heading element defaults (:where(.app h3)). */ :where(.home-v6-page [class*="dc-t-"]) { margin: 0; } .home-v6-page .dc-t-112 { font-size: clamp(54px, 8.4vw, 112px); line-height: 1; letter-spacing: -.045em; } /* Hero h1 — 68 step matches the other centred heroes (About / Partnerships / Integrations). */ .home-v6-page .dc-t-68 { font-size: clamp(36px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; } .home-v6-page .dc-t-76 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -.04em; } .home-v6-page .dc-t-80 { font-size: clamp(40px, 6vw, 80px); line-height: 1.0; letter-spacing: -.04em; } .home-v6-page .dc-t-80c { font-size: clamp(38px, 6vw, 80px); line-height: 1.0; letter-spacing: -.04em; } .home-v6-page .dc-t-64 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.035em; } .home-v6-page .dc-t-60 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.14; letter-spacing: -.035em; } .home-v6-page .dc-t-60n { font-size: clamp(44px, 4vw, 60px); line-height: 1; letter-spacing: -.03em; } .home-v6-page .dc-t-56 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.035em; } .home-v6-page .dc-t-56n { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; } .home-v6-page .dc-t-52 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.03em; } .home-v6-page .dc-t-48 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -.03em; } .home-v6-page .dc-t-46 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1; letter-spacing: -.03em; } .home-v6-page .dc-t-34 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.02em; } .home-v6-page .dc-t-28 { font-size: 28px; line-height: 1; letter-spacing: -.02em; } .home-v6-page .dc-t-28n { font-size: 28px; line-height: normal; } .home-v6-page .dc-t-22 { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; } .home-v6-page .dc-t-22c { font-size: 22px; line-height: 1.15; letter-spacing: -.02em; } .home-v6-page .dc-t-22s { font-size: 22px; line-height: 1.15; letter-spacing: -.01em; } .home-v6-page .dc-t-21 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; } .home-v6-page .dc-t-20 { font-size: 20px; line-height: 1.15; letter-spacing: -.01em; } .home-v6-page .dc-t-20h { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; } .home-v6-page .dc-t-20n { font-size: 20px; line-height: normal; letter-spacing: -.01em; } .home-v6-page .dc-t-19 { font-size: 19px; line-height: 1.15; letter-spacing: -.01em; } .home-v6-page .dc-t-17 { font-size: 17px; line-height: 1.2; letter-spacing: -.012em; } .home-v6-page .dc-t-16n { font-size: 16px; line-height: normal; } .home-v6-page .dc-t-15 { font-size: 15px; line-height: normal; letter-spacing: -.012em; } .home-v6-page .dc-t-145 { font-size: 14.5px; line-height: 1.35; font-weight: 600; } .home-v6-page .dc-t-14 { font-size: 14px; line-height: normal; } .home-v6-page .dc-q-24 { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; } /* Only the section h1/h2s balance in the reference; card headings do not. */ .home-v6-page .dc-balance { text-wrap: balance; } /* ── Interaction type (Proxima 600 — links, buttons, chips) ─────────────────────────────── */ .home-v6-page [class*="dc-i-"] { font-family: var(--font-heading); font-weight: 600; line-height: normal; } .home-v6-page .dc-i-15 { font-size: 15px; } .home-v6-page .dc-i-145 { font-size: 14.5px; } .home-v6-page .dc-i-14 { font-size: 14px; } .home-v6-page .dc-i-13 { font-size: 13px; font-family: var(--font-sans); line-height: normal; } /* ── Mono labels (IBM Plex Mono 500) ────────────────────────────────────────────────────── */ /* The `font:` shorthand in the reference carries no /line-height, so every label computes to `normal`. Inheriting our body 1.5 instead makes every label row measurably taller — declare it once here for the DS class as well as the four sizes the DS scale does not carry. DS sizes reused: text-label-l 12.5 · text-label-m 10.5 · text-label-s 9.5. */ .home-v6-page .font-label { line-height: normal; } .home-v6-page .dc-m-12 { font-size: 12px; line-height: normal; } .home-v6-page .dc-m-115 { font-size: 11.5px; line-height: normal; } .home-v6-page .dc-m-11 { font-size: 11px; line-height: normal; } .home-v6-page .dc-m-10 { font-size: 10px; line-height: normal; } /* Tracking — the reference uses seven values; tracking-label (0.08em) covers the commonest. */ .home-v6-page .dc-ls-04 { letter-spacing: .04em; } .home-v6-page .dc-ls-05 { letter-spacing: .05em; } .home-v6-page .dc-ls-06 { letter-spacing: .06em; } .home-v6-page .dc-ls-07 { letter-spacing: .07em; } .home-v6-page .dc-ls-09 { letter-spacing: .09em; } .home-v6-page .dc-ls-10 { letter-spacing: .1em; } /* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */ .home-v6-page [class*="dc-body-"], .home-v6-page .dc-lede, .home-v6-page .dc-ask-line, .home-v6-page .dc-closer-lede { font-family: var(--font-sans); font-weight: 400; } :where(.home-v6-page [class*="dc-body-"]), :where(.home-v6-page .dc-lede), :where(.home-v6-page .dc-closer-lede) { margin: 0; } .home-v6-page .dc-lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--color-ink-soft); } .home-v6-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255,255,255,.92); } .home-v6-page .dc-ask-line { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: var(--color-ink-deep); } .home-v6-page .dc-body-19 { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--color-ink-soft); } .home-v6-page .dc-body-18 { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; } .home-v6-page .dc-body-17 { font-size: 17px; line-height: 1.6; color: var(--color-ink-soft); } .home-v6-page .dc-body-16 { font-size: 16px; line-height: 1.55; color: var(--color-ink-soft); } .home-v6-page .dc-body-15 { font-size: 15px; line-height: 1.55; color: var(--color-ink-soft); } .home-v6-page .dc-body-15h { font-size: 15px; line-height: 1.5; color: var(--color-ink-soft); } .home-v6-page .dc-body-145 { font-size: 14.5px; line-height: 1.5; color: var(--color-ink-soft); } .home-v6-page .dc-body-145m { font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--color-ink-deep); } .home-v6-page .dc-body-14 { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); } .home-v6-page .dc-body-14t { font-size: 14px; line-height: 1.4; color: var(--color-ink-soft); } .home-v6-page .dc-body-14m { font-size: 14px; line-height: normal; font-weight: 500; color: var(--color-ink-soft); } .home-v6-page .dc-body-13 { font-size: 13px; line-height: 1.45; color: var(--color-ink-soft); } .home-v6-page .dc-body-13t { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); } .home-v6-page .dc-body-13n { font-size: 13px; line-height: normal; color: var(--color-ink-mute); } .home-v6-page .dc-body-125 { font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); } /* Measures, named by px / ch exactly as the reference writes them. */ .home-v6-page .dc-m-46ch { max-width: 46ch; } .home-v6-page .dc-m-42ch { max-width: 42ch; } .home-v6-page .dc-m-40ch { max-width: 40ch; } .home-v6-page .dc-m-48ch { max-width: 48ch; } .home-v6-page .dc-m-50ch { max-width: 50ch; } .home-v6-page .dc-m-52ch { max-width: 52ch; } .home-v6-page .dc-m-56ch { max-width: 56ch; } .home-v6-page .dc-m-58ch { max-width: 58ch; } .home-v6-page .dc-m-26ch { max-width: 26ch; } .home-v6-page .dc-m-24ch { max-width: 24ch; } .home-v6-page .dc-w-640 { max-width: 640px; } .home-v6-page .dc-w-760 { max-width: 760px; } .home-v6-page .dc-w-820 { max-width: 820px; } .home-v6-page .dc-w-880 { max-width: 880px; } .home-v6-page .dc-w-920 { max-width: 920px; } /* On-dark copy colours */ .home-v6-page .dc-on-dark { color: var(--dc-on-dark-body); } .home-v6-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } /* ── Shared surfaces ────────────────────────────────────────────────────────────────────── */ /* THE INSET DARK PANEL. STATUS.md counts it on 22 of the package's 38 files and recommends a dark sibling to .cta-section-panel; until that lands it lives page-locally. Two instances here (§3 The shift, §5 Admissions audit) with different padding. */ .home-v6-page .dc-panel { max-width: 1200px; margin: 0 auto; border-radius: var(--radius-5\.5); position: relative; overflow: hidden; } .home-v6-page .dc-panel-dark { background: var(--color-dark-band); color: #fff; } /* Top only — video sits on the panel floor (owner, 2026-08-17). Was 64–110 all sides. */ .home-v6-page .dc-panel-shift { padding: 48px clamp(28px, 5vw, 80px) 0; } .home-v6-page .dc-shift-copy { margin-inline: auto; text-align: center; } /* The audit panel is INK ROYAL, not the near-black band (owner, 2026-08-20), matching the secondary page's `.dc-res-dark`. It keeps `.dc-panel-dark` for the white text + on-dark treatment and overrides only the fill; the rule sits after that one, so a plain `background-color` is enough — no specificity ratchet. The shift panel above still uses the near-black band, so the page keeps exactly one `dark-band` surface. */ .home-v6-page .dc-panel-audit { padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); background-color: var(--color-ink-royal); /* Square feet + no clipping (owner, 2026-08-20): the panel sits on the page's bottom edge here, and the docked mock is meant to flow out of it. Overriding `.dc-panel`'s `overflow: hidden` for this one panel — the shift panel still clips, because its glow depends on it. This panel has no glow child, so nothing else escapes. */ border-end-start-radius: 0; border-end-end-radius: 0; overflow: visible; } .home-v6-page .dc-panel-plain { padding: clamp(44px, 5vw, 72px) clamp(8px, 3vw, 40px); } /* Card surfaces. The reference's cards are flat coloured surfaces — a fill and a radius, no border and no shadow — so .card (border + shadow-card + its own padding) would be more override than reuse. */ .home-v6-page .dc-card { border-radius: var(--radius-5); padding: 30px 26px; } .home-v6-page .dc-card-paper { background: var(--color-paper); } .home-v6-page .dc-card-sand { background: var(--color-page-bg); } .home-v6-page .dc-card-dark { background: var(--color-dark-band); color: #fff; } .home-v6-page .dc-card-p30 { padding: 30px; } .home-v6-page .dc-card-p26 { padding: 26px; } .home-v6-page .dc-card-p40 { padding: 40px; } /* The icon tile — 8-10 pages in the package, six sizes (STATUS.md §4). */ .home-v6-page .dc-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-3); width: 44px; height: 44px; background: var(--color-page-bg); } .home-v6-page .dc-tile i { font-size: 17px; color: var(--color-ink-royal); } .home-v6-page .dc-tile-dark { background: rgba(255, 255, 255, .08); } .home-v6-page .dc-tile-dark i { color: var(--color-coral-500); } .home-v6-page .dc-tile-52 { width: 52px; height: 52px; border-radius: var(--radius-3\.5); } .home-v6-page .dc-tile-52 i { font-size: 20px; } .home-v6-page .dc-tile-48 { width: 48px; height: 48px; border-radius: var(--radius-3); background: var(--color-paper); } .home-v6-page .dc-tile-48 i { color: var(--color-coral-500); --fa-primary-color: var(--color-coral-500); --fa-secondary-color: var(--color-coral-500); --fa-secondary-opacity: 0.4; } .home-v6-page .dc-tile-36 { width: 36px; height: 36px; border-radius: var(--radius-2\.5); background: var(--color-paper); } .home-v6-page .dc-tile-36 i { font-size: 14px; color: var(--color-coral-500); } /* The flywheel's four icons lost their tile (owner, 2026-08-20): no fill, no radius, no 44px box — just the glyph. Two notes: - The wrapper stays. It is what carries the icon's size and colour (and the dark card's coral), so unwrapping it in the markup would mean re-declaring both. The box is what was asked for and the box is what has gone. - This rule sits LAST of the tile rules deliberately: `.dc-tile-dark` also sets `background` at the same specificity, so on the dark card only source order decides which wins. Put this earlier and that one tile keeps its translucent box. */ .home-v6-page .dc-tile-bare { background: none; width: auto; height: auto; border-radius: 0; } .home-v6-page .dc-icon-247 { width: 24px; height: 24px; display: block; color: var(--color-ink-royal); } .home-v6-page .dc-icon-247 text { font-family: var(--font-heading); font-weight: 700; } /* Emma's initial disc, used in five places at four sizes (the 14px step went with the video chrome bar, 2026-08-20). */ /* Section header row — copy left, a link on the baseline right (§6 §7 §9 §10). */ .home-v6-page .dc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* Grids, measured off the reference. */ .home-v6-page .dc-grid { display: grid; } .home-v6-page .dc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /* Emma's four items are no longer cards (owner, 2026-08-20) - no fill, no padding, bare icons - so the card padding that used to separate them is gone and the gap has to carry it alone. Both numbers preserve the old optical rhythm rather than being picked by eye: text-to-text was 26 + 14 + 26 = 66px across columns, and the last line sat 30 + 14 = 44px above the coral band. Column gap is a touch tighter than 66 because four bare columns at that distance start to read as four separate lists. Only this grid changes - `.dc-grid-4` also carries the flywheel. */ .home-v6-page .dc-grid-emma { column-gap: 56px; row-gap: 44px; } .home-v6-page #emma .dc-tile-bare i { font-size: 28px; } .home-v6-page #emma .dc-icon-247 { width: 28px; height: 28px; } .home-v6-page .dc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .home-v6-page .dc-span-2 { grid-column: span 2; } .home-v6-page .dc-span-3 { grid-column: span 3; } .home-v6-page .dc-span-4 { grid-column: span 4; } /* ── Responsive collapse: only what the reference actually has ─────────────────────────────── Parsed out of the reference, its ONE content breakpoint is `[data-segrid]` - 1080px to two columns, 560px to one - reproduced verbatim in §9 below. (Its other rules, 1120/940 for the nav and 1080/560 for the footer grid, belong to chrome we deliberately do not copy.) DELIBERATELY ABSENT, therefore: a 991px block collapsing `.dc-grid-4` / `.dc-grid-3`, resetting the `.dc-span-*` spans and shrinking `.dc-panel-shift` / `.dc-panel-audit`, plus the 560px block that finished the job. The reference holds each of those grids at its full column count all the way down - the flywheel stays four across and the marketing bento keeps its 2- and 3-wide spans. Recorded as a squeeze to review after the port rather than fixed with breakpoints the package does not have. */ /* ══ 1 · HERO ═══════════════════════════════════════════════════════════════════════════ */ .home-v6-page .dc-hero-sub { display: block; } /* Glob / wash live in `_shared/motion.css` — same treatment as audience + product heroes. */ /* The Ask-Emma console — DS .prompt-card / -light / -pills / -input / -field / -send. Page keeps: the 760px measure, 24px card padding, centred chips, the 7/13 pill metrics (DS pills are 6/14 + leading-none for the dark-band quote card), the typed-line clamp, and the transcript (convo height/mask, bubbles, acts). */ .home-v6-page .dc-ask-wrap { max-width: 880px; margin-top: 40px; margin-inline: auto; } .home-v6-page .dc-ask { padding: 24px; } /* The chip row is the DS Tabs pills track. Page keeps only geometry: the track hugs its tabs (align-self, so the soft track is a segmented control rather than an 880px bar) and re-gains the mb-4 that .prompt-card-pills used to supply. It wraps on narrow viewports — .tabs alone does not — and a tab label never breaks mid-phrase. */ .home-v6-page .dc-ask-chips { align-self: center; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; /* The DS pills track is opaque page-bg-soft; over this page's warm wash it reads as a grey slab, so the track becomes translucent paper instead. color-mix, not rgba() — the house rule is that a colour resolves through a token (coding-standards §6). */ background-color: color-mix(in srgb, var(--color-paper) 48%, transparent); } .home-v6-page .dc-ask-chips .tab { white-space: nowrap; } .home-v6-page .dc-ask-convo { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; /* 300 sits just under the tallest fully-played scenario (330px measured at this width), so the longest two conversations lose the top of their first line to the mask and the shorter two play clear. Owner's call (2026-08-20) — 340 fitted every scenario but read too tall. */ height: 300px; overflow: hidden; margin-bottom: 16px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%); mask-image: linear-gradient(180deg, transparent, #000 16%); transition: opacity .35s ease; } .home-v6-page .dc-ask-msg { display: flex; flex-direction: column; gap: 8px; max-width: 84%; animation: dc-msg-in .5s var(--dc-ease) both; } .home-v6-page .dc-ask-msg-user { align-self: flex-end; } /* 92% is the DS's own Emma inset — applied ONCE, on the wrapper, so a long reply keeps a bubble edge instead of running the full width of the transcript. */ .home-v6-page .dc-ask-msg-emma { align-self: flex-start; max-width: 92%; } /* The DS bubble carries its own percentage cap (84% user / 92% Emma) — but here it resolves against a wrapper that has ALREADY shrunk to the text's max-content, so the cap compounded and forced EVERY message onto two lines, however short ("Can we win them back?" wrapped at 114 + 39px), and broke the last "·" off the typing bubble. The wrapper owns the measure on this page; the bubble takes all of it. */ .home-v6-page .dc-ask-msg > .prompt-card-msg { max-width: 100%; } /* Chat copy reads at the typed-line size (DS 14px is the widget's step, not the console's). */ .home-v6-page .dc-ask-msg > .prompt-card-msg { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; } .home-v6-page .dc-ask-typing { color: var(--color-ink-mute); white-space: nowrap; } /* The fixed scroll cue that sits between §2 and §3 in the reference is styled ONCE, in `_shared/motion.css` (`.dc-scroll-cue` + its nudge keyframes) - identical on all 19 pages that carry one. The page-local copy that used to live here has been removed: it duplicated those metrics exactly, so it could only ever drift from the shared rule. */ /* DELIBERATELY ABSENT: a 767px block wrapping the ask chips and tightening the trust row. The reference's only content breakpoint is `[data-segrid]` (1080/560, kept in §9); it lets both of these rows wrap on their own. */ /* ══ 2 · TRUSTED BY ═════════════════════════════════════════════════════════════════════ */ /* The DS .marquee supplies the seamless loop, equal-height logo cards, edge mask, hover pause and reduced-motion stop. This page keeps two opposing rows and its two artwork sizes. */ /* The proof block — stats over a pipeline pill. Lived in the hero until 2026-08-20, when the owner moved it down to open this band, above the trust kicker. Two consequences of the move are handled here, not left to chance: - spacing: the hero's single `margin-top: 44px` becomes margin on BOTH sides, because the block now has a neighbour below it (the kicker) as well as the band edge above; - the pill's fill: `paper 64%` was legible over the hero's colour wash and is invisible on this white band, so it becomes a page-bg mix. Same device, correct surface. */ .home-v6-page .dc-proof { margin-top: 16px; margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .home-v6-page .dc-proof-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 8px 18px; border-radius: var(--radius-full); background-color: var(--color-page-bg); } .home-v6-page .dc-proof-rule { width: 16px; height: 1px; background-color: color-mix(in srgb, var(--color-blue-600) 24%, transparent); flex: none; } /* `flex-wrap` arrived with the third stat (2026-09-14). It is not an overflow guard - measured at 390px, three stats overflow nothing either way, because flex shrinks them. What it prevents is the shrink: without it the three captions run to 3, 1 and 2 lines, a ragged row. Wrapped, all three sit on one line each and the row breaks 2 + 1. */ .home-v6-page .dc-proof-stats { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 48px; } .home-v6-page .dc-proof-stats > div { text-align: center; } .home-v6-page .dc-proof-cap { display: block; margin-top: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--color-ink-soft); } /* Each marquee keeps 24px block padding so card shadows are not clipped. Pull the second row through that combined 48px buffer, leaving the same 20px used by the track's `gap-5`. */ .home-v6-page .marquee + .marquee { margin-top: -28px; } .home-v6-page .marquee-track-slow { animation-duration: 74s; } /* Several assets have white baked in; the shared paper cards make that backing intentional. */ .home-v6-page .marquee-item img { height: 58px; width: 146px; object-fit: contain; } .home-v6-page .marquee-item-tall img { height: 78px; width: 98px; } /* The artwork stays 58x146 / 78x98; the shared cards and gap handle narrow viewports. */ /* ══ 3 · THE SHIFT ══════════════════════════════════════════════════════════════════════ */ /* The DS .section-glow is 520px in one of four corners; the reference's washes are 560px and 460px at their own offsets, so the size/placement is nudged page-locally. */ .home-v6-page .dc-glow-shift { width: 560px; height: 560px; right: -160px; top: -220px; filter: blur(14px); } .home-v6-page .dc-glow-one { width: 460px; height: 460px; left: -140px; bottom: -200px; filter: blur(14px); } /* ApplicaaOne carries its own product colour (owner, 2026-08-20) - `product-sky`, #35A7E7, an existing brand token, so this stays on-palette rather than becoming a one-off hex. It is a deliberate local exception to "the primary CTA is coral": this card is the ApplicaaOne surface, and the wash follows the button so the two read as one product moment. */ .home-v6-page .dc-glow-sky { background: radial-gradient(circle, color-mix(in srgb, var(--color-product-sky) 20%, transparent), transparent 62%); } .home-v6-page .dc-video { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 940px; border-radius: var(--radius-4) var(--radius-4) 0 0; overflow: hidden; background: var(--color-dark-band); border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0; box-shadow: var(--dc-shadow-video); } .home-v6-page .dc-video-stage { position: relative; aspect-ratio: 16 / 9; } .home-v6-page .dc-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-dark-band); cursor: pointer; } .home-v6-page .dc-video-hint[hidden] { display: none; } .home-v6-page .dc-video-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; background: color-mix(in srgb, var(--color-dark-band) 82%, #FFFFFF); } .home-v6-page .dc-video-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; } .home-v6-page .dc-video-play i { font-size: 20px; color: #fff; margin-left: 4px; } .home-v6-page .dc-video-note { color: var(--dc-on-dark-mute); text-align: center; max-width: 34ch; line-height: 1.6; } /* ══ 4 · FLYWHEEL ═══════════════════════════════════════════════════════════════════════ */ .home-v6-page .dc-halves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; margin-bottom: 10px; } .home-v6-page .dc-half { grid-column: span 2; padding-bottom: 9px; border-bottom: 2px solid var(--color-rule); } /* A bare row, not a card (owner, 2026-08-20): the paper fill, the rule border, the 16px radius and the 18/26 padding all came off, so Emma's note now sits directly on the page background. Only the layout is left — and `align-items` moves centre -> start, because the copy became two lines of unequal weight and a centred avatar would float against the middle of them. */ .home-v6-page .dc-emma-strip { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 14px; } /* HIDDEN 2026-08-20 — candidate for removal (owner). One line, deliberately its own rule rather than an edit to the block above, so restoring is a delete and the layout comes back untouched. `display: none` is what actually hides it — the `hidden` attribute would lose to `display: flex`. */ .home-v6-page .dc-emma-strip { display: none; } .home-v6-page .dc-mis-row { display: flex; align-items: stretch; gap: 14px; } .home-v6-page .dc-mis-cell { flex: 1; height: 76px; background: var(--color-paper); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); } .home-v6-page .dc-mis-cell img { max-width: 100%; object-fit: contain; } .home-v6-page .dc-mis-30 { height: 30px; width: auto; } .home-v6-page .dc-mis-68 { height: 68px; } .home-v6-page .dc-mis-24 { height: 24px; width: auto; } .home-v6-page .dc-mis-46 { height: 46px; width: auto; } /* DELIBERATELY ABSENT: a 991px block halving `.dc-halves` and wrapping the MIS logo row. The reference keeps both fixed - and the two halves ARE the flywheel's argument, so splitting them changed what the section says. */ /* ══ 5 · ADMISSIONS AUDIT ═══════════════════════════════════════════════════════════════ */ .home-v6-page .dc-grid-audit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .home-v6-page .dc-pill-dark { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-full); padding: 7px 14px; color: var(--dc-on-dark-bright); } .home-v6-page .dc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); flex: none; } /* The field is glass on the panel, not a white slab (owner, 2026-08-20; 40% -> 24% -> 16% as the panel moved to ink royal). Paper at 16% over #263C91 composites to ~rgb(73,91,163), where white text measures 6.2:1 — so the copy inside is pure white, not a dimmed white. `background-color`, not `background`, so the shorthand can't erase anything it doesn't own. */ .home-v6-page .dc-search { display: flex; gap: 8px; align-items: center; margin-top: 28px; background-color: color-mix(in srgb, var(--color-paper) 16%, transparent); border-radius: var(--radius-2\.5); padding: 7px 7px 7px 16px; max-width: 540px; } .home-v6-page .dc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: #fff; } /* The placeholder needs saying out loud: it does NOT inherit `color` (the UA paints its own grey), so without this it would stay dark grey on a dark field and effectively vanish. Full white rather than a dimmed one because anything under ~100% drops below 4.5:1 on this surface. */ .home-v6-page .dc-search input::placeholder { color: #fff; opacity: 1; } /* ── The audit preview (ported from the new-landing hero, 2026-08-20) ───────────────────── */ /* ONE KNOB: every dimension inside .dc-ap is em, so `font-size` on .dc-ap scales the whole mock. Reference baseline is 14px = 100%; 10.95px is the reference's own 78%. The page is 51.429em (563px) inside a ~469px frame, so the right edge clips on purpose — that is what makes it read as a real screen rather than a diagram. Keep `overflow: hidden` on the frame or the clip becomes an overflow. The grade palette is the GRADER's, not the brand's (its greens/oranges are a scale, and `ok-green`/`warn-amber` do not have the five steps it needs), so those hexes are page-local and named here rather than scattered through the rules. */ .home-v6-page .dc-ap-frame { position: relative; overflow: hidden; min-width: 0; background: var(--color-paper); border-radius: var(--radius-4\.5); /* The 1px ring is a hairline, drawn as a spread-only shadow rather than a border so it costs no layout — the document inside is sized to the frame, and a real border would eat a pixel of it. ink-deep at 6% rather than black: the brand's elevation is navy-alpha throughout (`--shadow-card` is rgba(15,26,79,.08)), so the hairline stays in the ink's colour family. 6% (owner, 2026-08-20) — a touch lighter than `--color-rule` over paper. */ box-shadow: var(--dc-shadow-audit), 0 0 0 1px color-mix(in srgb, var(--color-ink-deep) 6%, transparent); } .home-v6-page .dc-ap { --dc-g-a: #2BAE5E; --dc-g-b: #4BB573; --dc-g-c: #E8852B; --dc-g-d: #DD5F2A; --dc-g-f: #D14040; --dc-ap-surface: #F2F5FB; /* 13px, up from the reference's 10.95 (owner, 2026-08-20): the mock is bigger here because it bleeds off the panel instead of sitting inside a column, so it can afford the size. */ font-size: 13px; /* WIDTH = the frame (owner, 2026-08-20). The reference made this document 51.429em — wider than its frame — so the right edge clipped and it read as a screen peeking off. Docked on the panel edge that trick is no longer wanted, so the document fits and every panel is whole. The knob still sets the type size; only the measure changed. */ width: 100%; padding: 1.571em 1.714em 1.714em; aspect-ratio: 1.4; overflow: hidden; position: relative; background: var(--dc-ap-surface); color: var(--color-ink-deep); font-family: var(--font-sans); } /* PLACEMENT (owner, 2026-08-20): the mock is not a card in a column — it is docked to the panel's bottom-right corner and runs off both edges, so it reads as a window onto a real screen. The negative margins are exactly the panel's own padding, which is what lets it reach the edges; `align-self: end` is what puts it on the bottom one. Only the top-left corner is rounded — the other three sit on or past the panel's edge. The panel no longer clips (below), so this is now the only thing bounding the mock: the FRAME's own `overflow: hidden` clips the 669px document to 541px. Make `margin-bottom` more negative than the panel's padding and the whole mock protrudes below the panel onto the page — that is the one lever, and the section's bottom padding was removed to leave it room. Held above the reference's own 900px break: below that the document goes fluid (`width: 100%`) and a negative margin would drag it past the panel instead of fitting inside it. */ @media (min-width: 901px) { .home-v6-page .dc-panel-audit .dc-ap-frame { align-self: end; /* Bottom: flush with the panel's edge (the padding, nothing more). Right: the padding PLUS 96px, so the mock runs 96px past the panel and off toward the page edge (owner, 2026-08-20). The section clips (`overflow-hidden` in the markup), so that overhang can never become a horizontal scrollbar on a narrow desktop — which is exactly what it would do otherwise once the viewport stops being wider than the panel plus the overhang. */ margin-bottom: calc(-1 * clamp(48px, 6vw, 80px)); margin-right: calc(-1 * (clamp(28px, 5vw, 72px) + 96px)); /* Both TOP corners are rounded: the right edge runs past the panel but is still on screen, so that corner is visible and wants the same 18px as the left. The two bottom corners sit on the panel's own bottom edge, so they stay square. */ border-radius: var(--radius-4\.5) var(--radius-4\.5) 0 0; /* The frame's drop shadow was drawn for a card the panel clipped. Now that the panel does not clip, that shadow smears onto the page below and right of the panel — so here it becomes a LEFTWARD-only lift (negative spread kills the vertical bleed): the mock still separates from the royal panel on the edge that is still inside it, and nothing escapes onto the page. The contained mobile card below 901px keeps the original shadow. */ box-shadow: -28px 0 56px -20px rgba(4, 8, 24, .45), 0 0 0 1px color-mix(in srgb, var(--color-ink-deep) 6%, transparent); } } /* The foot fades into the surface so the clipped document has no hard bottom edge. */ .home-v6-page .dc-ap::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 8.767em; background-image: linear-gradient(0deg, var(--dc-ap-surface), transparent); } .home-v6-page .dc-ap-head { position: relative; margin-bottom: 0.543em; } .home-v6-page .dc-ap-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 0.75em; color: var(--color-ink-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.571em; } .home-v6-page .dc-ap-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.571em; letter-spacing: -0.02em; color: var(--color-ink-deep); margin: 0 0 0.182em; transition: opacity 250ms ease; } .home-v6-page .dc-ap-meta { position: absolute; right: 0; bottom: 0; font-size: 0.929em; color: var(--color-ink-mute); margin-bottom: 0.615em; transition: opacity 250ms ease; } .home-v6-page .dc-ap-dot { opacity: .5; margin: 0 0.462em; } .home-v6-page .dc-ap-mis { color: #1F9D55; font-weight: 600; } .home-v6-page .dc-ap-meta-muted { opacity: .55; letter-spacing: 0.08em; } .home-v6-page .dc-ap-name.is-fading, .home-v6-page .dc-ap-meta.is-fading, .home-v6-page .dc-ap-badge.is-fading, .home-v6-page .dc-ap-score-title.is-fading, .home-v6-page .dc-ap-grade.is-fading { opacity: 0; } .home-v6-page .dc-ap-grid { display: grid; grid-template-columns: 20em 1fr; gap: 1.143em; align-items: start; } .home-v6-page .dc-ap-score { background: var(--color-paper); border-radius: 1em; padding: 1.286em 1.143em; text-align: center; margin-bottom: 0.714em; box-shadow: 0 0.071em 0 rgba(15, 26, 79, .04); } .home-v6-page .dc-ap-score-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.786em; color: var(--color-ink-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.091em; } .home-v6-page .dc-ap-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 2.571em; width: 1.778em; height: 1.778em; border-radius: 0.444em; color: var(--color-paper); font-family: var(--font-heading); font-weight: 700; transition: opacity 250ms ease; } .home-v6-page .dc-ap-score-title { font-size: 1.143em; margin-top: 0.625em; font-family: var(--font-heading); font-weight: 700; color: var(--color-ink-deep); transition: opacity 250ms ease; } .home-v6-page .dc-ap-score-desc { font-size: 0.857em; margin-top: 0.5em; color: var(--color-ink-mute); line-height: 1.4; } .home-v6-page .dc-ap-dims { display: flex; flex-direction: column; gap: 0.129em; } .home-v6-page .dc-ap-dim { font-size: 0.929em; border-radius: 0.769em; padding: 0.649em 0.923em; background: var(--color-paper); color: var(--color-ink-deep); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0.077em 0 rgba(15, 26, 79, .03); } .home-v6-page .dc-ap-grade { font-size: 0.846em; width: 2em; height: 2em; border-radius: 0.545em; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; color: var(--color-paper); transition: opacity 250ms ease; } /* Grade fills. The badge gets the reference's gradient + drop shadow; a dimension row gets the flat colour. One class per letter, set by page.js as the mock rotates. */ .home-v6-page .dc-ap-g-a { background: var(--dc-g-a); } .home-v6-page .dc-ap-g-b { background: var(--dc-g-b); } .home-v6-page .dc-ap-g-c { background: var(--dc-g-c); } .home-v6-page .dc-ap-g-d { background: var(--dc-g-d); } .home-v6-page .dc-ap-g-f { background: var(--dc-g-f); } .home-v6-page .dc-ap-badge.dc-ap-g-a { background: linear-gradient(135deg, #2BAE5E 0%, #1E8A48 100%); box-shadow: 0 0.167em 0.389em -0.111em rgba(30, 138, 72, .4); } .home-v6-page .dc-ap-badge.dc-ap-g-b { background: linear-gradient(135deg, #4BB573 0%, #358F58 100%); box-shadow: 0 0.167em 0.389em -0.111em rgba(53, 143, 88, .4); } .home-v6-page .dc-ap-badge.dc-ap-g-c { background: linear-gradient(135deg, #E8852B 0%, #C9651A 100%); box-shadow: 0 0.167em 0.389em -0.111em rgba(201, 101, 26, .4); } .home-v6-page .dc-ap-badge.dc-ap-g-d { background: linear-gradient(135deg, #DD5F2A 0%, #BC4818 100%); box-shadow: 0 0.167em 0.389em -0.111em rgba(188, 72, 24, .4); } .home-v6-page .dc-ap-badge.dc-ap-g-f { background: linear-gradient(135deg, #D14040 0%, #A82D2D 100%); box-shadow: 0 0.167em 0.389em -0.111em rgba(168, 45, 45, .4); } .home-v6-page .dc-ap-panels { min-width: 0; } .home-v6-page .dc-ap-panel { background: var(--color-paper); border-radius: 1em; padding: 1em 1.286em; margin-bottom: 0.257em; box-shadow: 0 0.071em 0 rgba(15, 26, 79, .04); } .home-v6-page .dc-ap-panel:last-child { margin-bottom: 0; } .home-v6-page .dc-ap-panel h4 { display: flex; align-items: center; gap: 0.571em; font-family: var(--font-heading); font-weight: 700; font-size: 1em; color: var(--color-ink-deep); margin: 0 0 0.229em; } .home-v6-page .dc-ap-panel p { font-size: 0.857em; margin: 0; color: var(--color-ink-mute); line-height: 1.4; } /* Below the reference's own 900px break the knob goes fluid and the page stops overflowing its frame, so the mock shrinks to fit instead of clipping half its width away. */ @media (max-width: 900px) { .home-v6-page .dc-ap { font-size: 1.9vw; } /* width is 100% at every size now */ } /* The search field's rotating school name — an overlay, so the input's own value stays authoritative. */ .home-v6-page .dc-search-field { position: relative; display: flex; flex: 1; min-width: 0; overflow: hidden; } .home-v6-page .dc-search-rot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; font-family: var(--font-sans); font-size: 15px; color: var(--color-paper); transition: opacity 250ms ease; /* The reference let the longest name run off the edge of the field; on a 390px phone that is ~93px of a school's name simply gone (the overflow census sees it). Truncate instead — the device survives, the text doesn't get silently cut. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .home-v6-page .dc-search-rot.is-fading { opacity: 0; } .home-v6-page .dc-search-rot[hidden] { display: none; } /* DELIBERATELY ABSENT: a 991px collapse of `.dc-grid-audit`; the reference holds its split. */ /* ══ 6 · MARKETING ENGINE ═══════════════════════════════════════════════════════════════ */ /* No panel at all (owner, 2026-08-20). The journey started as a white card inside the sand card; it lost its border, then its bottom corners, and now its fill - so the track sits directly on the card and its left edge lines up with the eyebrow and the headline above it. Only the bottom padding survives, because the card itself has none (`dc-card-flush`) - that is what keeps the Emma line off the card's bottom edge. `border-radius` went with the fill. */ .home-v6-page .dc-card-flush { padding-bottom: 0; } .home-v6-page .dc-journey { margin-top: auto; padding: 0 0 20px; } /* THE TRACK (owner, 2026-08-20) - what replaced a single wrapped flex row. * * The old markup put the YES/NO pair in the SAME flex row as the three steps, so the fork only * dropped to a second line because the row ran out of width: its left edge landed wherever the * wrap happened to put it, with nothing tying it to the "Attended?" node it forks from. This is * a two-row grid, so the fork's position is stated instead of inherited from a line break. * * Mobile-first single column; the track itself starts at 901px. That order is deliberate - the * areas live inside the min-width query, so the stacked state needs no per-child reset (and no * `!important` to undo a `grid-area`). */ /* A guard, not a scroller: at every width the track either fits or is stacked (see the 1240px note below). This only earns its keep if someone later lengthens a node's label. */ .home-v6-page .dc-track-scroll { overflow-x: auto; } .home-v6-page .dc-track { display: grid; gap: 10px; } .home-v6-page .dc-track-label { color: var(--color-ink-mute); } /* ONE node metric for all five. The branch pills used to be 12px text at 8/12 padding against the steps' 11.5px at 8/11 - two sizes in one diagram, which is most of why it read as noise. */ .home-v6-page .dc-node { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-2); padding: 7px 10px; font-size: 11.5px; white-space: nowrap; border: 1px solid transparent; } .home-v6-page .dc-node-ink { background: var(--color-ink-deep); color: #fff; } .home-v6-page .dc-node-ink i { color: var(--color-coral-500); } .home-v6-page .dc-node-wait { background: var(--color-paper); border: 1px dashed var(--color-ink-mute); color: var(--color-ink-soft); } .home-v6-page .dc-node-check { background: var(--color-paper); border-color: var(--color-rule); color: var(--color-ink-deep); box-shadow: var(--shadow-card); } .home-v6-page .dc-node-check i{ color: var(--color-ink-royal); } .home-v6-page .dc-node-yes { background: var(--color-coral-100); border-color: var(--dc-coral-line); color: var(--color-ink-deep); } .home-v6-page .dc-node-yes i { color: var(--color-coral-500); } .home-v6-page .dc-node-no { background: var(--color-paper); border-color: var(--color-rule); color: var(--color-ink-soft); } .home-v6-page .dc-node-no i { color: var(--color-ink-mute); } .home-v6-page .dc-node i { font-size: 11px; } .home-v6-page .dc-conn { flex: none; } .home-v6-page .dc-conn path { fill: none; stroke: var(--dc-conn); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } /* The fork: two EQUAL bars running to the panel's right edge. That width is the point of this layout - the old version left roughly the right half of a 1470px panel empty while the branch crowded the left edge. * * THE CONNECTOR IS TWO CURVED ELBOWS, NOT STITCHED SEGMENTS (owner, 2026-08-20). Each elbow is * one box carrying two borders and one corner radius, so the spine and the turn into the row are * a single continuous stroke of the same width - there is no join to misalign. * * Each elbow is anchored to ITS OWN ROW's centre (`top: 50%` / `bottom: 50%`) and overshoots by * half the 10px row gap, so the two meet exactly at the gap centre. That is what makes it hold * when the rows are DIFFERENT heights - which they are in the 1100px state below, where the bars * wrap. A percentage-based bracket on a shared column could not do that. */ .home-v6-page .dc-split { display: grid; gap: 10px; } .home-v6-page .dc-split-row { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 22px; } .home-v6-page .dc-split-row .dc-node { flex: 1; } .home-v6-page .dc-cond { flex: none; width: 26px; } .home-v6-page .dc-split-row::before { content: ""; position: absolute; left: 0; width: 14px; border-left: 1.25px solid var(--dc-conn); } .home-v6-page .dc-split-row:first-child::before { top: 50%; bottom: -5px; border-top: 1.25px solid var(--dc-conn); border-top-left-radius: 8px; } .home-v6-page .dc-split-row:last-child::before { top: -5px; bottom: 50%; border-bottom: 1.25px solid var(--dc-conn); border-bottom-left-radius: 8px; } /* The trunk from the check node. Anchored to the gap centre (the first row's bottom + half the gap) rather than to the split's own 50%, which is a different y once the rows differ. */ .home-v6-page .dc-split-row:first-child::after { content: ""; position: absolute; left: -14px; bottom: -5px; width: 15px; height: 1.25px; background: var(--dc-conn); } /* THE TRACK RUNS IN TWO STATES (owner, 2026-08-20). * * 1150px+ - the middle state. Same seven columns, but the bars are allowed to WRAP, because this * card is `dc-span-2` of a three-column grid and its panel is only ~597px wide at a 1100px * viewport. Wrapping costs a two-line YES bar; the alternative was a horizontal scrollbar inside * a marketing card on an ordinary laptop. * * The 160px floor is not a preference - it is the split's own min-content width (22px of elbow * lead-in + the 26px condition label + the gap + "application", the longest unbreakable word in * the bars). Set it lower and the column simply refuses to shrink, and the panel scrolls: at a * 140px floor and a 1100px viewport it needed 600px in a 597px panel. * * 1240px+ - single-line bars on a 170px floor. Measured, not guessed: the nowrap track needs * ~640px and the panel is 675px at 1220px, 688px at 1240px. * * The connector columns are 32px against a 16px arrow, so each arrow keeps 8px of air off both * cards rather than butting against them. */ @media (min-width: 1150px) { .home-v6-page .dc-track { grid-template-columns: auto 32px auto 32px auto 20px minmax(160px, 1fr); grid-template-areas: "l1 . l2 . l3 . l4" "n1 c1 n2 c2 n3 . sp"; align-items: center; column-gap: 0; /* the connector columns ARE the spacing */ row-gap: 8px; } .home-v6-page .dc-tl1 { grid-area: l1; } .home-v6-page .dc-tl2 { grid-area: l2; } .home-v6-page .dc-tl3 { grid-area: l3; } .home-v6-page .dc-tl4 { grid-area: l4; } .home-v6-page .dc-tn1 { grid-area: n1; } .home-v6-page .dc-tn2 { grid-area: n2; } .home-v6-page .dc-tn3 { grid-area: n3; } .home-v6-page .dc-tc1 { grid-area: c1; justify-self: center; } .home-v6-page .dc-tc2 { grid-area: c2; justify-self: center; } .home-v6-page .dc-split { grid-area: sp; } .home-v6-page .dc-split .dc-node { white-space: normal; } } @media (min-width: 1240px) { .home-v6-page .dc-track { grid-template-columns: auto 32px auto 32px auto 20px minmax(170px, 1fr); } .home-v6-page .dc-split .dc-node { white-space: nowrap; } } /* Stacked: a horizontal arrow and a fork bracket say nothing in one column, so they go rather than rotate. The rail on the split is what still marks the two outcomes as the fork. */ @media (max-width: 1149px) { .home-v6-page .dc-conn { display: none; } /* Specificity has to MATCH, not be beaten: the trunk is `:first-child::after`, so a bare `.dc-split-row::after` here loses and a stray line survives beside the YES row. */ .home-v6-page .dc-split-row:first-child::before, .home-v6-page .dc-split-row:last-child::before, .home-v6-page .dc-split-row:first-child::after { content: none; } .home-v6-page .dc-split-row { padding-left: 0; } .home-v6-page .dc-node { white-space: normal; } .home-v6-page .dc-split { padding-left: 14px; border-left: 1.25px solid var(--color-rule); } } .home-v6-page .dc-foot-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-rule); color: var(--color-ink-mute); } .home-v6-page .dc-stack { display: flex; flex-direction: column; gap: 14px; } .home-v6-page .dc-stack > * { flex: 1; } .home-v6-page .dc-grid-social { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; } /* 1.85fr, not 1.3 (owner, 2026-08-20): the reference puts the stats rule at ~66% of the card, where 1.3fr + the 40px gap landed it at ~59% and squeezed the headline to three lines. */ .home-v6-page .dc-grid-one { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 40px; align-items: center; } .home-v6-page .dc-one-stats { position: relative; display: grid; gap: 22px; border-left: 1px solid var(--color-rule); padding-left: 40px; } .home-v6-page .dc-one-pill { border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 5px 11px; margin-left: 4px; color: var(--color-ink-mute); } /* DELIBERATELY ABSENT: a 991px collapse of `.dc-grid-social` / `.dc-grid-one` and dropping the stat column's rule. The reference keeps both splits, and the rule, at every width. */ /* ══ 7 · MEET EMMA ══════════════════════════════════════════════════════════════════════ */ /* ══ 8 · WHY EMMA IS DIFFERENT ══════════════════════════════════════════════════════════ */ /* THE BAND BECAME AN INSET PANEL (owner, 2026-09-14). It used to be a full-bleed section whose wash and loop spanned the viewport, and it was a member of page.js's sticky stack - which is what printed the soft grey seam across the full width between it and Meet Emma. Both go: the content is now one rounded panel inside the page container, in normal flow directly under the Emma grid, and `different` leaves PINNED in page.js so nothing slides over it. The section keeps `dc-py-0-96`, no top padding - the Emma section's own 104px bottom padding is the gap, so the two are not stacking padding on padding. FILL: `light-blue`, the brand's hero/section wash. It reads clearly as a panel against page-bg, and it is the colour family of the loop that sits on top of it where the loop can load. */ .home-v6-page .dc-different-panel { background-color: var(--color-light-blue); /* .dc-panel-plain is deliberately NOT used here - one owner per property. That class writes the `padding` shorthand, so having both would make which-wins depend on source order. */ padding-block: clamp(72px, 9vw, 132px); padding-inline: clamp(24px, 5vw, 64px); } /* The loop and its overlay now belong to the PANEL, so they clip to its radius instead of bleeding the full width. `.dc-panel` already carries `position: relative` + `overflow: hidden`. On the live site the