/* ============================================================================ DICE - HOMEPAGE (`/`) · additive body sheet FLAT REFERENCE Drop `_21`. Built to `dice-homepage-copy-v2-2026-08-05.md`. ADDITIVE. Everything the marketing family already owns is REUSED, not recopied: `.mk-hero*` · `.mk-btn*` · `.mk-wrap` / `.mk-narrow` / `.mk-block` `.mk-h2` / `.mk-h3` / `.mk-lede` / `.mk-k` · `.mk-steps` / `.mk-step` · `.mk-cta`. This sheet adds ONLY the four things the homepage genuinely needs and no other page has: the two-audience router, the five-routes board, the logo band, and the single testimonial. ⛔ In particular the how-it-works block is canonical `.mk-steps` - the `_20` lesson. No `.hm-steps` fork exists and none should be added. ── TOKENS: THIS FILE DEFINES NONE ───────────────────────────────────────── No `:root` block. **23 token names consumed** from the app - counted from this file with comments stripped, so the figure is measured not estimated: --accent --accent-strong --bg-subtle --border --border-strong --dur --ease --ink --muted --navy --pillar-channels-fill --pillar-channels-ink --pillar-entertainment-fill --pillar-entertainment-ink --pillar-monetise-fill --pillar-monetise-ink --pillar-solutions-fill --pillar-solutions-ink --pillar-sports-fill --pillar-sports-ink --r --rl --text Two further names appear in `var()` and are NOT consumed: `--rt-fill` and `--rt-ink` are DEFINED here, on the `.hm-route--*` classes, and read back by the card body. So a raw `var()` grep returns 25; the app supplies 23 and this sheet supplies 2 to itself. Stating both figures so they cannot be confused. All ten pillar names are live in `dice-tokens.css`. This is the first page in the estate where all five pillar accents appear together - that is the visual form of the five-routes moat, so each is taken from its own real token and none is approximated. ⚠️ Deliberately NOT consumed: `--pso`, `--psof`, `--psoi`, `--ps`, `--pe`, `--pc`. Per DH 2026-08-04, `--pso` is defined in `postlogin-b3.css` and anon marketing pages do not reliably load that sheet. The homepage is the most anon page in the estate, so it uses long-form pillar tokens only. ── LOAD ORDER ───────────────────────────────────────────────────────────── app token layer → chrome-unified.css → marketing.css → home.css This sheet must land last; it only adds. ── SCOPING ──────────────────────────────────────────────────────────────── Every selector is prefixed `.hm-`, except three documented single-property accent overrides on `.mk-step::before` scoped under `.hm-*` ancestors. No bare-element selectors, no `*` reset, no page wrapper, nothing touching chrome internals. ========================================================================== */ /* ============================================================================ 1 · TWO-AUDIENCE ROUTER - directly under the hero, per the ICP finding that the page cannot assume one reader. Two blocks, equal weight, so neither audience is the default. Buyers first because Sid ruled buyer acquisition above seller acquisition; sellers are served, not demoted. ========================================================================== */ .hm-router{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px} .hm-side{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--rl);padding:28px 28px 24px} .hm-side__t{font-size:19px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.01em} .hm-side__d{font-size:14.5px;line-height:1.6;color:var(--text);margin:9px 0 0;text-wrap:pretty} .hm-side__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px} .hm-side__a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--accent);text-decoration:none;padding:9px 15px;border:1px solid var(--border-strong);border-radius:var(--r);transition:border-color var(--dur,.2s) var(--ease,ease),background-color var(--dur,.2s) var(--ease,ease)} .hm-side__a:hover{border-color:var(--accent);background:var(--bg-subtle);color:var(--accent-strong)} .hm-side__a:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* the buyer side leads - one filled action, so the primary path is unambiguous without making the seller block look like a lesser page */ .hm-side--buy .hm-side__a{background:var(--accent);border-color:var(--accent);color:#fff} .hm-side--buy .hm-side__a:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff} /* ============================================================================ 2 · THE FIVE ROUTES - the moat, made concrete. Verb-led label · what it is · who it's for. Five columns collapse to a readable grid rather than a scroller: this is an argument to be read, not inventory to be browsed. ========================================================================== */ /* ⛔ WAS repeat(5,...) with NO margin-bottom, and both halves were defects. COUNT: the whole scheme was authored for exactly five cards. The card set is now VARIABLE BY DESIGN - dice_chrome_route_exists() decides it - and hiding the /for-brands card left FOUR on the homepage and THREE on the dashboard, so a fifth-width hole opened on the right. That regression was mine, introduced the same morning the card was hidden: the filter removed a child from a layout that had a fixed count baked in. Third instance today of one defect - a rule written to the CURRENT COUNT rather than to the condition: `empty($hub_page)`, `.dash-stats{repeat(5,1fr)}`, this. auto-fit takes any count, so adding or removing a route cannot reopen it. MARGIN: ⛔ NOT set here, and that is a ruling. cbdb8b7 added margin-bottom:40px to fix the DASHBOARD's spacing, and it changed the HOMEPAGE gap from 8px to 40px as a side effect - .hm-trust follows with margin-top:8px, and margins collapse to the larger. A live page nobody had reported moved 5x to fix another page. DH's principle, adopted: A SHARED COMPONENT OWNS ITS INTERNALS; THE PAGE OWNS THE SPACE AROUND IT. The dashboard wraps its instance in .dash-section, which already carries margin:0 0 40px. If 8px is too tight on the homepage that becomes a deliberate homepage decision, not a side effect of someone else's fix. */ .hm-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:28px;align-items:stretch} .hm-route{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-top:3px solid var(--rt-ink,var(--accent));border-radius:var(--rl);padding:20px 18px 18px} /* DH ruling 2026-08-07 #1: the cards became anchors. `display:flex` above already wins over the inline default, so the layout is untouched; these three lines only strip the link chrome an brings with it and give the card a hover/focus affordance, borrowed from .hm-side__a so the two card kinds behave alike. */ a.hm-route{color:inherit;text-decoration:none;transition:border-color var(--dur,.2s) var(--ease,ease),box-shadow var(--dur,.2s) var(--ease,ease)} a.hm-route:hover{border-color:var(--rt-ink,var(--accent));box-shadow:0 2px 10px rgba(0,0,0,.06)} a.hm-route:focus-visible{outline:2px solid var(--rt-ink,var(--accent));outline-offset:2px} .hm-route__n{font-size:15.5px;font-weight:800;line-height:1.28;color:var(--ink);margin:0} .hm-route__d{font-size:13px;line-height:1.55;color:var(--muted);margin:9px 0 0;text-wrap:pretty} .hm-route__w{margin-top:auto;padding-top:16px} .hm-route__w span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .hm-route__w b{display:inline-block;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--rt-ink,var(--ink));background:var(--rt-fill,var(--bg-subtle));border-radius:var(--r);padding:4px 9px} /* one variable pair per route - the accent is set once and the card reads it, so adding a sixth route is one class, not a new rule block */ .hm-route--ent{--rt-fill:var(--pillar-entertainment-fill);--rt-ink:var(--pillar-entertainment-ink)} .hm-route--spt{--rt-fill:var(--pillar-sports-fill);--rt-ink:var(--pillar-sports-ink)} .hm-route--chn{--rt-fill:var(--pillar-channels-fill);--rt-ink:var(--pillar-channels-ink)} .hm-route--sol{--rt-fill:var(--pillar-solutions-fill);--rt-ink:var(--pillar-solutions-ink)} .hm-route--mon{--rt-fill:var(--pillar-monetise-fill);--rt-ink:var(--pillar-monetise-ink)} /* ============================================================================ 3 · TRUST BAND - no heading and no lead line, per the copy ruling. Any label ("trusted by", "our partners") is a claim requiring backing. ⛔ SHIPS AS SLOTS, NOT NAMES. The harvest's own note: "curation of the final buyer-logo set is Sid's - some may be prospects vs signed." Publishing names before that approval would be exactly the fabrication this drop is meant to avoid, so the band renders EMPTY SLOTS at final dimensions: the layout is settled and reviewable, and the page makes no claim about anybody. The 12 names I recommend, chosen by persona rather than by prettiness, are in the relay for Sid to approve. Real files then replace the slot contents. ⚠️ Do NOT reuse Veritone's or MOJO FX's own client logos - those are the partners' clients, not DICE's. ========================================================================== */ .hm-trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:34px 0;margin-top:8px} .hm-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 26px;align-items:center} /* Slot state. Real logos: replace the inner content with an , keep the cell. Greyscale at rest is the agreed treatment - one line, applied to the img when it exists, so no restyle is needed at swap-in. */ .hm-logo{height:44px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--bg-subtle)} .hm-logo span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* .hm-logo img MOVED to marketing.css, beside .mkp-partner__mark img - ONE shared partner-mark treatment (DH 2026-08-12). It cannot live here: home.css loads AFTER marketing.css, so a copy in this file would outrank the shared rule and the "one treatment" would be true in the source and false in the browser. ⛔ Do not re-add it. Change the shared declaration instead. */ .hm-logo:has(img){border:0;background:none} /* ============================================================================ 4 · ONE TESTIMONIAL - not a carousel. At this volume a carousel advertises thinness; one quote at full width reads as confidence. The quote is VERBATIM and attributed. It contains a word the voice guide bans in our own copy; the ban is on what we write, not on what a customer said, so it stands unedited. ========================================================================== */ .hm-quote{background:var(--navy);border-radius:var(--rl);padding:48px 52px} /* The homepage renders every eligible quote and reveals one client-side, so the HTML stays byte-stable. `.hm-quote` sets no `display`, so the UA's [hidden] rule already wins - this is here so that stays true if anyone ever adds one. */ .hm-quote[hidden]{display:none} .hm-quote__q{font-size:23px;line-height:1.45;font-weight:600;color:#fff;margin:0;letter-spacing:-.01em;max-width:34em;text-wrap:pretty} .hm-quote__a{display:flex;align-items:baseline;gap:9px;margin-top:24px} .hm-quote__a b{font-size:14.5px;font-weight:700;color:#fff} .hm-quote__a span{font-size:14px;color:#C6D2DE} /* ---------- how it works: canonical .mk-steps, accent only ---------- `.mk-step::before` is brand `--accent` in `marketing.css`, which is correct on non-pillar pages. The homepage is the whole estate rather than one pillar, so brand blue is right here too and NO override is applied. This comment exists so the next person does not "fix" it into a pillar. */ /* The 6-column span scheme that used to live here solved "five is an awkward count" by hard-coding which children span what. It cannot survive a variable card count, and the count is now variable by design. auto-fit in the base rule fills every row at every width without naming any child, so the whole nth-child scheme is retired rather than adjusted. */ @media (max-width:1080px){ .hm-logos{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:860px){ .hm-router{grid-template-columns:1fr;gap:14px} .hm-routes{gap:14px} .hm-quote{padding:34px 28px} .hm-quote__q{font-size:19px} } @media (max-width:600px){ .hm-routes{grid-template-columns:1fr} .hm-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} } @media (prefers-reduced-motion:reduce){.hm-side__a{transition-duration:.001ms!important}}