/* Platform — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference "Platform.dc.html" — the largest file * in the 2026-08 package (186KB, 8 sections) — without its 1,115 inline styles. * * STRATEGY (the same one the Secondary port settled): * The markup uses DESIGN-SYSTEM classes wherever the DS has the right component, and this * file carries the package'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 `.platform-page`, so this file is inert on any other page. * * HOW THE REFERENCE'S TOKENS COMPARE TO OURS * The reference declares its palette on a wrapper div, not in :root. Measured, every one of * them is already a token of ours: * --accent #EC634B → coral-500 --ink #0F1A4F → ink-deep * --accent-soft #FFE7DD → coral-100 --ink-soft #4D5B7F → ink-soft * --paper #FFFFFF → paper --ink-mute #8893B0 → ink-mute * --sand #F4F5F9 → page-bg --rule #E6E8EF → rule * --navy #0F1A4F → ink-deep --dark #0B1023 → dark-band * --mono IBM Plex Mono → font-label * Shadow `0 14px 40px rgba(15,26,79,.07)` is EXACTLY our --shadow-soft, so the product grid * uses the token rather than a page value. * * DIFFERENT, so declared here (owner's call: keep the reference's colours): * #E9ECF3 the reference's `--sand-2` (progress-bar troughs, section 2's hairline borders) * #F0F1F5 the lighter hairline INSIDE a mock card's row list * #616D90 the dimmed "separate tools" column in the comparison table * #9AA6C2 body copy ON DARK · #C9D1E6 list copy ON DARK · #5C688A captions ON DARK * Five shadows have no token (listed with --dc-shadow-* below). * * GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS is * 1224px / 32px. Overridden here only — the DS defaults are untouched. * ============================================================================================ */ .platform-page { /* reference-only values, all measured off the file */ --dc-sand-2: #E9ECF3; /* progress troughs + section 2's border */ --dc-line-row: #F0F1F5; /* row hairline inside a mock card */ --dc-ink-dim: #616D90; /* the "separate tools" column */ --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright:var(--color-on-dark-bright); --dc-on-dark-mute: var(--color-on-dark-faint); --dc-shadow-hero: 0 16px 44px rgba(15, 26, 79, .09); /* hero phase cards */ --dc-shadow-hero-dark: 0 24px 56px rgba(4, 8, 24, .3); /* the dark 4th hero card */ --dc-shadow-mock: 0 14px 40px rgba(15, 26, 79, .08); /* the panel's mock card */ --dc-shadow-tab: 0 12px 32px rgba(15, 26, 79, .08); /* the selected sector tab */ --dc-shadow-card-hover:0 24px 56px rgba(15, 26, 79, .13); /* product card hover */ 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. */ /* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */ /* Deliberately literal `dc-py--`: the reference hand-tunes each section, so the DS padding modifiers cannot express it. This page is unusually regular — six of eight sections are a flat 88px. */ .platform-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ /* Nine steps, named by their maximum. Proxima 700 throughout; tracking is the reference's. */ .platform-page [class*="dc-t-"] { font-family: var(--font-heading); font-weight: 700; } /* margin + text-wrap at ZERO specificity (:where), so an ordinary utility can override them. As a plain 0-2-0 descendant selector this silently beat every unlayered Tailwind margin utility — the same trick the design system uses for `:where(.app h3)`. Only the section h1/h2 steps are balanced: the reference does NOT balance its card headings. */ :where(.platform-page [class*="dc-t-"]) { margin: 0; } :where(.platform-page .dc-t-82, .platform-page .dc-t-74, .platform-page .dc-t-56, .platform-page .dc-t-50, .platform-page .dc-t-48, .platform-page .dc-t-46, .platform-page .dc-t-38, .platform-page .dc-t-32) { text-wrap: balance; } .platform-page .dc-t-82 { font-size: clamp(42px, 5.8vw, 82px); line-height: 1.0; letter-spacing: -.04em; } .platform-page .dc-t-74 { font-size: clamp(36px, 5.6vw, 74px); line-height: 1.0; letter-spacing: -.04em; } .platform-page .dc-t-58 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1; letter-spacing: -.045em; } .platform-page .dc-t-56 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.03; letter-spacing: -.035em; } .platform-page .dc-t-50 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.032em; } .platform-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.03em; } .platform-page .dc-t-46 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; } .platform-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -.025em; } .platform-page .dc-t-32 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.16; letter-spacing: -.022em; } /* Fixed-size Proxima steps (card titles, row labels, stage labels). line-height is stated on every one: the reference writes them with the `font:` shorthand and no /line-height, so they compute to `normal` — inheriting our body 1.5 instead makes every one of them taller. */ .platform-page .dc-h-16 { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: normal; letter-spacing: -.012em; margin: 0; } .platform-page .dc-h-15 { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: normal; letter-spacing: -.012em; margin: 0; } .platform-page .dc-h-15r{ font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; margin: 0; } .platform-page .dc-h-14 { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; margin: 0; } .platform-page .dc-h-12 { font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: normal; margin: 0; } .platform-page .dc-h-12l{ font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.25; margin: 0; } /* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */ .platform-page .dc-lede-19 { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .platform-page .dc-body-17 { font-size: 17px; line-height: 1.6; margin: 0; } .platform-page .dc-body-165 { font-size: 16.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-125 { font-size: 12.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-125t{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-mute); margin: 0; } .platform-page .dc-body-115 { font-size: 11.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255,255,255,.92); } /* Reading measures the reference sets in `ch` — kept in ch so they track the font, as it does. */ .platform-page .dc-ch-62 { max-width: 62ch; } .platform-page .dc-ch-64 { max-width: 64ch; } .platform-page .dc-ch-60 { max-width: 60ch; } .platform-page .dc-ch-58 { max-width: 58ch; } .platform-page .dc-ch-54 { max-width: 54ch; } .platform-page .dc-ch-48 { max-width: 48ch; } .platform-page .dc-ch-46 { max-width: 46ch; } .platform-page .dc-measure-1100 { max-width: 1100px; } .platform-page .dc-measure-820 { max-width: 820px; } .platform-page .dc-measure-800 { max-width: 800px; } .platform-page .dc-measure-780 { max-width: 780px; } .platform-page .dc-measure-760 { max-width: 760px; } /* ── Mono labels (IBM Plex Mono 500) ────────────────────────────────────────────────────── */ /* Confirmed against the reference: `--mono` really is IBM Plex Mono, which is our --font-label. Every step states `line-height: normal` for the shorthand reason above. */ /* Family/weight/line-height only — deliberately NO `display`. A page rule here would be 0-2-0 and would silently beat an unlayered `block` / `flex` utility sitting in the markup, which is the specificity trap that cost nine pages 28px a card in an earlier batch. */ .platform-page [class*="dc-label-"], .platform-page [class*="dc-eyebrow"], .platform-page .dc-syear { font-family: var(--font-label); font-weight: 500; line-height: normal; } .platform-page .dc-eyebrow { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-500); } .platform-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-ink-mute); } .platform-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .platform-page .dc-label-11c { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-500); } .platform-page .dc-label-11m { font-size: 11px; letter-spacing: .09em; } /* Zero-specificity default so the "ONE APPLICAA PLATFORM" instance's `text-coral-500` wins (coding-standards §2 rule 5); as a 0-2-0 rule it silently beat that utility. */ :where(.platform-page .dc-label-11m) { color: var(--color-ink-mute); } .platform-page .dc-label-105 { font-size: 10.5px; letter-spacing: .07em; color: var(--color-ink-mute); } .platform-page .dc-label-105d { font-size: 10.5px; letter-spacing: .08em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-95 { font-size: 9.5px; letter-spacing: .07em; color: var(--color-ink-mute); } .platform-page .dc-label-95d { font-size: 9.5px; letter-spacing: .07em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-95p { font-size: 9.5px; color: var(--color-ink-soft); } /* bar row label */ .platform-page .dc-label-95g { font-size: 9.5px; color: var(--color-ok-green); } /* row value */ .platform-page .dc-label-95a { font-size: 9.5px; color: var(--color-coral-500); } .platform-page .dc-label-9 { font-size: 9px; letter-spacing: .05em; } .platform-page .dc-label-9d { font-size: 9px; letter-spacing: .06em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-9b { font-size: 9px; letter-spacing: .06em; color: var(--dc-on-dark-bright); } .platform-page .dc-label-9s { font-size: 9px; letter-spacing: .07em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-85 { font-size: 8.5px; letter-spacing: .07em; color: var(--color-coral-500); } .platform-page .dc-syear { font-weight: 700; font-size: 10px; letter-spacing: .05em; } /* ── Hero ───────────────────────────────────────────────────────────────────────────────── */ /* The reference's hero glow is TOP-CENTRED (760px, left 50%, top -440px). Our .section-glow ships four CORNER placements only, so the placement — not the wash — is page-local. 19 of the package's 38 files use a top-centred hero glow (STATUS §4). */ .platform-page .dc-glow-top { width: 760px; height: 760px; left: 50%; top: -440px; transform: translateX(-50%); } /* The two phase rails above the hero card row, with a dot travelling along each. */ .platform-page .dc-phase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; } .platform-page .dc-phase-line { position: relative; height: 10px; } .platform-page .dc-phase-line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: var(--radius-0\.5); background: var(--dc-sand-2); } .platform-page .dc-phase-on::before { background: var(--color-coral-500); } .platform-page .dc-phase-dot { position: absolute; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-deep); animation: dc-flow 3.2s linear infinite; } .platform-page .dc-phase-on .dc-phase-dot { background: var(--color-coral-500); } .platform-page .dc-phase-dot-late { animation-delay: 1.6s; } @keyframes dc-flow { 0% { left: -10%; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { left: 105%; opacity: 0; } } .platform-page .dc-plgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .platform-page .dc-hero-card { background: var(--color-paper); border-radius: var(--radius-4); box-shadow: var(--dc-shadow-hero); padding: 22px 22px 20px; text-align: left; display: flex; flex-direction: column; } .platform-page .dc-hero-card-dark { background: var(--color-dark-band); box-shadow: var(--dc-shadow-hero-dark); color: #fff; } /* Icon tile — six sizes across the package; three of them appear on this page (38/40/34px). STATUS §4 lists this as a size-modifier component candidate at 8–10 pages. */ .platform-page .dc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; } .platform-page .dc-tile-38 { width: 38px; height: 38px; border-radius: var(--radius-2\.5); background: var(--color-page-bg); } .platform-page .dc-tile-40 { width: 40px; height: 40px; border-radius: var(--radius-3); } .platform-page .dc-tile-34 { width: 34px; height: 34px; border-radius: var(--radius-2\.5); background: rgba(255,255,255,.07); } .platform-page .dc-tile-coral { background: var(--color-coral-500); color: #fff; } .platform-page .dc-tile-navy { background: var(--color-ink-deep); color: #fff; } /* the coral "Emma …" line pinned to the foot of each hero card (11.5px — the products grid's equivalent line is 13px, hence two classes) */ .platform-page .dc-hero-more { margin-top: auto; padding-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; line-height: normal; color: var(--color-coral-500); } .platform-page .dc-hero-strip { display: flex; align-items: center; justify-content: center; gap: 10px 32px; flex-wrap: wrap; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--color-rule); max-width: 900px; } /* The fixed scroll cue. Reproduced because it is page content, not chrome; it is position: fixed, so it contributes nothing to any section's height. */ .platform-page .dc-scroll-cue { position: fixed; right: 26px; bottom: 24px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; text-decoration: none; } .platform-page .dc-scroll-cue i { font-size: 17px; color: var(--color-ink-mute); animation: dc-nudge 2s ease-in-out infinite; } @keyframes dc-nudge { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .45; } } /* ── Section 2 · the intake spine ───────────────────────────────────────────────────────── */ /* A NESTED switcher, and the reason this file is 186KB: four sector TRACKS, each with its own stage rail (8/8/5/5 stages) and one panel per stage — 26 panels, of which exactly ONE is visible. Measured before building: the section is ~1100px tall, not the ~14,000px it would be if the panels stacked. Both levels are the DS `tabs` controller (nested, same identifier — Stimulus scopes targets to the nearest controller of that identifier, so they do not fight). Visual state keys off aria-selected, which the controller already sets, so there are no toggled classes to keep in sync. */ .platform-page .dc-spine { background: var(--color-paper); border-top: 1px solid var(--dc-sand-2); border-bottom: 1px solid var(--dc-sand-2); box-shadow: inset 0 14px 26px -18px rgba(15,26,79,.16), inset 0 -14px 26px -18px rgba(15,26,79,.16); } .platform-page .dc-tabrow { display: flex; flex-wrap: wrap; margin-bottom: 28px; } .platform-page .dc-tab { flex: 1; min-width: 210px; flex-direction: column; align-items: flex-start; text-align: left; } .platform-page .dc-tab-narrow { min-width: 190px; } .platform-page .dc-tab .dc-h-15 { color: var(--color-ink-soft); } .platform-page .dc-tab[aria-selected="true"] .dc-h-15 { color: var(--color-ink-deep); } .platform-page .dc-rail { display: grid; gap: 10px; position: relative; } .platform-page .dc-rail-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .platform-page .dc-rail-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .platform-page .dc-rail-line { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--dc-sand-2); } .platform-page .dc-stage { position: relative; z-index: 1; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .platform-page .dc-sdot { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-sand-2); color: var(--color-ink-mute); box-shadow: 0 0 0 5px var(--color-paper); transition: background .3s ease, transform .3s ease, color .3s ease, box-shadow .3s ease; } .platform-page .dc-sdot i { font-size: 15px; } .platform-page .dc-stage .dc-syear, .platform-page .dc-stage .dc-h-12l { color: var(--color-ink-mute); transition: color .3s ease; } .platform-page .dc-stage[aria-selected="true"] .dc-sdot { background: var(--color-coral-500); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 5px var(--color-paper), 0 10px 24px rgba(236,99,75,.3); } .platform-page .dc-stage[aria-selected="true"] .dc-syear { color: var(--color-coral-500); } .platform-page .dc-stage[aria-selected="true"] .dc-h-12l { color: var(--color-ink-deep); } .platform-page .dc-panel-well { margin-top: 32px; background: var(--color-page-bg); border-radius: var(--radius-5); padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px); } .platform-page .dc-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; } /* The tabs controller adds BOTH the `hidden` class and the hidden attribute; `display: grid` above would otherwise beat `[hidden]`, exactly the trap the reference hits with its own `!important` rules. */ .platform-page .dc-panel[hidden] { display: none; } /* the mock card that sits on the right of every panel */ .platform-page .dc-mock { background: var(--color-paper); border-radius: var(--radius-3\.5); padding: 20px 22px; box-shadow: var(--dc-shadow-mock); } .platform-page .dc-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-rule); } .platform-page .dc-mock-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--color-rule); } .platform-page .dc-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } .platform-page .dc-bar-head { display: flex; justify-content: space-between; } .platform-page .dc-bar-track { height: 7px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 5px; overflow: hidden; } .platform-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1); background: var(--color-ink-deep); } .platform-page .dc-bar-fill-accent { background: var(--color-coral-500); } /* Bar fill widths. The reference sets each one inline; here they are the reference's 33 distinct values as percentage-named classes. Tailwind has no arbitrary-value surface in a CMS block, so this is the only way to keep the data out of a style attribute. */ .platform-page .dc-w-8 { width: 8%; } .platform-page .dc-w-9 { width: 9%; } .platform-page .dc-w-10 { width: 10%; } .platform-page .dc-w-11 { width: 11%; } .platform-page .dc-w-12 { width: 12%; } .platform-page .dc-w-14 { width: 14%; } .platform-page .dc-w-22 { width: 22%; } .platform-page .dc-w-28 { width: 28%; } .platform-page .dc-w-30 { width: 30%; } .platform-page .dc-w-40 { width: 40%; } .platform-page .dc-w-50 { width: 50%; } .platform-page .dc-w-52 { width: 52%; } .platform-page .dc-w-56 { width: 56%; } .platform-page .dc-w-62 { width: 62%; } .platform-page .dc-w-64 { width: 64%; } .platform-page .dc-w-65 { width: 65%; } .platform-page .dc-w-66 { width: 66%; } .platform-page .dc-w-70 { width: 70%; } .platform-page .dc-w-75 { width: 75%; } .platform-page .dc-w-76 { width: 76%; } .platform-page .dc-w-78 { width: 78%; } .platform-page .dc-w-82 { width: 82%; } .platform-page .dc-w-83 { width: 83%; } .platform-page .dc-w-84 { width: 84%; } .platform-page .dc-w-86 { width: 86%; } .platform-page .dc-w-87 { width: 87%; } .platform-page .dc-w-88 { width: 88%; } .platform-page .dc-w-90 { width: 90%; } .platform-page .dc-w-91 { width: 91%; } .platform-page .dc-w-92 { width: 92%; } .platform-page .dc-w-94 { width: 94%; } .platform-page .dc-w-97 { width: 97%; } .platform-page .dc-w-100 { width: 100%; } .platform-page .dc-rows { display: flex; flex-direction: column; gap: 0; margin-top: 6px; } .platform-page .dc-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--dc-line-row); } .platform-page .dc-row:last-child { border-bottom: 0; } /* the coral "read more" links under every panel's copy */ .platform-page .dc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; } .platform-page .dc-links-18 { margin-top: 18px; } .platform-page .dc-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: normal; color: var(--color-coral-500); text-decoration: none; } .platform-page .dc-link:hover { color: var(--color-ink-deep); } .platform-page .dc-link i { font-size: 10px; } /* Wordmark links — the §5 network row, where "ApplicaaOne" and "Applicaa Futures" are shown as their own marks rather than coral text (owner, 2026-09-15). A separate class rather than a change to `.dc-link`, which is used by several other sections on this page and must stay text. `gap` overrides `.dc-links`'s 8px/20px in BOTH axes on purpose: 24px is the asked-for spacing between the pair, and the same 24px is right between rows once they wrap on a phone. Longhand transition properties, never the `transition` shorthand: the shorthand resets transition-delay, which is how `.reveal-stagger` drives its cascade (the `.dc-addgrid` rule above documents the same trap from the other side). The opacity shift replaces the hover affordance the coral text link had via `.dc-link:hover` - a logo cannot signal it the same way. */ .platform-page .dc-logolinks { gap: 24px; align-items: center; } .platform-page .dc-logolink { display: inline-flex; transition-property: opacity; transition-duration: .15s; transition-timing-function: ease; } .platform-page .dc-logolink:hover { opacity: .7; } .platform-page .dc-logolink img { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; } /* ── Section 3 · Emma across the platform ───────────────────────────────────────────────── */ /* An INSET-free full-bleed dark band — the page's ONE dark moment, so the DS rule "the dark band is a moment, not a texture" holds. (The network panel in §5 is a card, not a band.) */ .platform-page .dc-glow-emma { width: 600px; height: 600px; right: -200px; top: -260px; } .platform-page .dc-emma-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; } .platform-page .dc-e-row { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .platform-page .dc-stat-panel { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-4\.5); padding: 26px 30px; background: rgba(255,255,255,.04); } .platform-page .dc-terms-panel { border: 1px solid rgba(236,99,75,.4); background: rgba(236,99,75,.1); border-radius: var(--radius-4\.5); padding: 24px 28px; } /* The DS .check-list at the reference's metrics: 11px gap, 13.5px copy, on-dark bright ink. Its ticks already turn ok-green-bright inside .section-dark, which is why 1a added that token. */ .platform-page .dc-terms-panel .check-list { gap: 11px; } .platform-page .dc-terms-panel .check-list > li { font-size: 13.5px; line-height: 1.5; color: var(--dc-on-dark-bright); gap: 8px; } .platform-page .dc-terms-panel .check-list > li > i { margin-top: 3px; } .platform-page .dc-terms-panel .check-list-label { font-size: 10px; letter-spacing: .08em; line-height: normal; margin-bottom: 12px; } /* ── Section 4 · the comparison table ───────────────────────────────────────────────────── */ .platform-page .dc-vs { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); } .platform-page .dc-vs-head { align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--color-ink-deep); } .platform-page .dc-vs-row { align-items: start; padding: 22px 0; border-bottom: 1px solid var(--color-rule); } .platform-page .dc-dot-coral { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-500); flex: none; } /* ── Section 5 · the network ────────────────────────────────────────────────────────────── */ .platform-page .dc-net { background: var(--color-paper); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } .platform-page .dc-net-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .platform-page .dc-net-panel { background: var(--color-dark-band); border-radius: var(--radius-5); padding: clamp(28px, 3.2vw, 40px); position: relative; overflow: hidden; color: #fff; } .platform-page .dc-glow-net { width: 420px; height: 420px; right: -150px; bottom: -190px; } .platform-page .dc-net-step { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-3); padding: 15px 18px; } .platform-page .dc-net-step-on { background: rgba(236,99,75,.12); border-color: rgba(236,99,75,.4); } /* ── Section 6 · MIS ────────────────────────────────────────────────────────────────────── */ .platform-page .dc-mis { background: var(--color-paper); } /* ── Section 7 · everything in the platform ─────────────────────────────────────────────── */ .platform-page .dc-addgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* LONGHANDS, NOT THE `transition` SHORTHAND. This element is a direct child of a .reveal-stagger container, and the stagger works by setting per-child transition-delay. The shorthand RESETS transition-delay to 0s, and page CSS is unlayered while reveal.css compiles into @layer components — so unlayered wins regardless of specificity and every child animated at once. Same trap reveal.css's own header documents, reached from the child's side. */ .platform-page .dc-umbrella { grid-column: span 2; } /* PRODUCT WORDMARKS REPLACE THE ICONS (owner, 2026-09-15). Each card now leads with the product's own type logo instead of a placeholder FA glyph, so the `.dc-h-16` title beside it would say the same word twice - it stays in the DOM as `sr-only` (the card is a link, and the accessible name has to come from somewhere; the is `alt=""` so nothing is announced twice). Sized by HEIGHT, not width: these are wordmarks of very different lengths (Data+ ~67px wide, MAT Management+ ~207px at the same cap height), and a uniform height is what makes a set of wordmarks read as one family. `width: auto` keeps each one's own proportion; `max-width: 100%` with `object-fit: contain` is the guard for the narrowest card, where a fixed height plus a clamped width would otherwise squash the type rather than letterbox it. */ .platform-page .dc-add-logo { box-sizing: border-box; height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 14px; } /* The two ApplicaaOne / Applicaa Futures files are `-type` exports: drawn tight to the letters on a 64-unit artboard, where the other eight are `+` lockups on a 78-unit one with superscript space above and descender space below. Measured by rasterising each at 200px and reading the ink: cap-to-descender is 118px on the eight, 195px and 192px on these two - so at equal box height their type renders about 1.65x larger, which is visible immediately in a row of cards. The padding shrinks the drawn mark to ~29px INSIDE the same 48px box (border-box, so the box itself is unchanged) rather than reducing `height`: every card's copy then starts at the same y, which is what keeps the three cards in a grid row aligned. */ .platform-page .dc-add-logo-type { padding-block: 9.5px; } /* The card's "See it" / "See the LA journey" link, matched to the description above it (owner, 2026-09-15): same family, same size. `/r/24` sets it at Proxima 13px, and that selector (`body.app .dc-linkcard .dc-add-more`, 0-3-1) beats a utility, so the override lives here -- scoped through `.dc-addgrid` for 0-4-0. `/r/24` is derived from `prototypes/_shared/`, so editing it directly would be lost on the next re-derive and would also move Home v6's cards. `inherit`, NOT a named family, and that is the load-bearing detail. The description sets no family of its own -- it inherits -- so `inherit` is what "same as the description" literally means here, and the two stay married whatever the inherited value turns out to be. Worth knowing what it currently IS: `body.app` has no font-family rule anywhere, so body copy falls through to Tailwind's preflight default (ui-sans-serif, system-ui, ...) rather than to the brand's `--font-sans`, which is correctly declared as Inter. Measured on the LIVE page as well as here, so it is a site condition, not a prototype artifact. Naming Inter here would "fix" the link alone and leave it mismatched against the description it is supposed to match. */ .platform-page .dc-addgrid .dc-add .dc-add-more { font-family: inherit; font-size: 15px; } .platform-page .dc-pill { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--color-ink-soft); text-decoration: none; background: var(--color-page-bg); border-radius: var(--radius-full); padding: 7px 13px; } .platform-page .dc-pill:hover { color: #fff; background: var(--color-coral-500); } .platform-page .dc-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; } /* ── Section 8 · closer ─────────────────────────────────────────────────────────────────── */ /* .cta-section + .cta-section-flat already carry the flat coral full-bleed band; only the reference's exact padding is nudged. Deliberately NO coral highlight word in the headline: .orange-title on a coral band is 1:1 contrast, and 0 of the package's 24 closers use one. */ .platform-page .cta-section { padding: clamp(80px, 11vw, 150px) 24px; } .platform-page .cta-section-contact { font-size: 13.5px; line-height: normal; margin-top: 26px; } /* ── On-dark copy colours ───────────────────────────────────────────────────────────────── */ .platform-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .platform-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .platform-page .dc-ink-dim { color: var(--dc-ink-dim); } /* ── Spacing the compiled utility surface cannot express ────────────────────────────────── */ /* Tailwind's scale is patchy here (mt-7, mt-9, mt-11, mt-14 and every .5 step produce nothing), and the reference's rhythm is in odd pixels. Naming these by px keeps them from ever being confused with a Tailwind step. */ .platform-page .dc-mt-2 { margin-top: 2px; } .platform-page .dc-mt-3 { margin-top: 3px; } .platform-page .dc-mt-5 { margin-top: 5px; } .platform-page .dc-mt-6 { margin-top: 6px; } .platform-page .dc-mt-10 { margin-top: 10px; } .platform-page .dc-mt-12 { margin-top: 12px; } .platform-page .dc-mt-14 { margin-top: 14px; } .platform-page .dc-mt-16 { margin-top: 16px; } .platform-page .dc-mt-18 { margin-top: 18px; } .platform-page .dc-mt-20 { margin-top: 20px; } .platform-page .dc-mt-22 { margin-top: 22px; } .platform-page .dc-mt-24 { margin-top: 24px; } .platform-page .dc-mt-30 { margin-top: 30px; } .platform-page .dc-mt-34 { margin-top: 34px; } .platform-page .dc-mt-44 { margin-top: 44px; } .platform-page .dc-mb-6 { margin-bottom: 6px; } .platform-page .dc-mb-12 { margin-bottom: 12px; } .platform-page .dc-mb-14 { margin-bottom: 14px; } .platform-page .dc-mb-16 { margin-bottom: 16px; } .platform-page .dc-mb-20 { margin-bottom: 20px; } .platform-page .dc-mb-30 { margin-bottom: 30px; } .platform-page .dc-mb-32 { margin-bottom: 32px; } .platform-page .dc-mb-36 { margin-bottom: 36px; } .platform-page .dc-mb-44 { margin-bottom: 44px; } .platform-page .dc-gap-12 { gap: 12px; } .platform-page .dc-gap-14 { gap: 14px; } .platform-page .dc-gap-9 { gap: 9px; } .platform-page .dc-self-start { align-self: start; } /* ── Responsive: the reference's own breakpoints (1080 / 640) ───────────────────────────── */ @media (max-width: 1080px) { .platform-page .dc-rail-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } .platform-page .dc-rail-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } .platform-page .dc-rail-line { display: none; } .platform-page .dc-panel, .platform-page .dc-net-grid, .platform-page .dc-emma-grid, .platform-page .dc-plgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-phase { display: none; } .platform-page .dc-addgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-umbrella { grid-column: span 2; } } @media (max-width: 640px) { .platform-page .dc-plgrid { grid-template-columns: minmax(0, 1fr); } .platform-page .dc-rail-8, .platform-page .dc-rail-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-addgrid, .platform-page .dc-vs { grid-template-columns: minmax(0, 1fr); } .platform-page .dc-umbrella { grid-column: span 1; } } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* No blanket `* { animation-duration: .01ms !important }` (the reference does exactly that; coding-standards §6 bans !important, and the DS animations already neutralise themselves). Only this page's own two keyframe animations need switching off. */