/* Admissions+ for Faith Schools — page CSS * ============================================================================================ * FAITHFUL (1:1) reproduction of "Admissions Plus for Faith Schools.dc.html" (9 sections) * without its inline styles. Every value is read out of the reference file. * * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right * component; this file carries the package's metric DELTAS as page-scoped overrides. Tuning * toward the DS later = deleting overrides, not rewriting markup. * * PROVENANCE: descended from prototypes/sixth-forms/page.css — the container override, the * dc-py-* padding-pair convention, the dc-t-* / dc-body-* / dc-label-* scales, dc-tr-*, the * colour helpers, the dc-e Emma discs, dc-mock/dc-row atoms, dc-bar, * dc-mis, dc-avatar and dc-res all carry over. What is new is marked "NEW FOR THIS PAGE". * * TWO REAL DS WINS on this page, both firsts for the batch: * · the struck-through chip row is exactly `.badge .badge-struck` + `.badge-row` — the DS * variant built for this device, used here for the first time. * · the closer's phone/email row is exactly `.cta-section-contact`. * * TOKENS: identical to the reference — ink scale, coral 500/100, page-bg, paper, rule, * dark-band, ok-green(+bright), shadow-soft (= the reference's 0 14px 40px/.07). * Hairline: var(--color-rule) — #ECEEF3 closed 2026-08-17, no second token. * DIFFERENT, so declared here (keep the reference's colours): #F0F1F5 the inner mock row * rule, #E9ECF3 sand-2, #9AA6C2 on-dark body, #8D9AB8 on-dark * guardrail copy, #7E8AA6 on-coral caption. * Shadows with no token: 0 24px 60px/.1 (hero mock) · 0 18px 48px/.07 and /.08 (panels) · * 0 14px 40px/.09 (the SIF-pile mock) · 0 10px 24px rgba(coral,.3) (the coral tile glow). * * GEOMETRY: reference container is 1200px with a 24px gutter (DS is 1224/32) — page-local. * ============================================================================================ */ .faith-schools-page { --dc-line-soft: #F0F1F5; --dc-sand-2: #E9ECF3; --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright: var(--color-on-dark-bright); /* the prompt note - 12.35:1 on #0B1023 */ --dc-on-dark-tick: var(--color-ink-mute); --dc-shadow-hero: 0 24px 60px rgba(15, 26, 79, 0.1); --dc-shadow-panel: 0 18px 48px rgba(15, 26, 79, 0.07); --dc-shadow-quote: 0 18px 48px rgba(15, 26, 79, 0.08); --dc-shadow-pile: 0 14px 40px rgba(15, 26, 79, 0.09); --dc-shadow-coral: 0 10px 24px rgba(236, 99, 75, 0.3); --dc-ease: cubic-bezier(.2, .8, .2, 1); /* The DS does not set Inter on body/.app, so the page root carries the family exactly as the reference's own wrapper does. */ font-family: var(--font-sans); 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 ────────────────────────────────────────────────────────────────────── */ /* This page is the most regular in the set: an unusual 148/24 hero (it opens under the fixed nav with almost no bottom padding) and then a steady 88 everywhere. */ .faith-schools-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } .faith-schools-page .dc-py-0-88 { padding-top: 0; padding-bottom: 88px; } .faith-schools-page .dc-py-0 { padding-top: 0; padding-bottom: 0; } /* the MIS strip carries its own clamp padding instead of the section's */ .faith-schools-page .dc-py-mis { padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(40px, 4vw, 56px); } /* ── Section backgrounds the reference alternates ───────────────────────────────────────── */ /* sand · paper · sand · paper · DARK · paper · sand · sand · coral — the one full-bleed dark band is Emma, so "the dark band is a moment, not a texture" holds. */ .faith-schools-page .dc-bg-paper { background: var(--color-paper); } .faith-schools-page .dc-rule-b { border-bottom: 1px solid var(--color-rule); } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ .faith-schools-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. As written before — a 0-2-0 descendant selector — this rule silently beat every unlayered Tailwind margin utility (0-1-0), so `mt-5` on a dc-t- heading did nothing at all. Same trick the design system uses for heading element defaults (:where(.app h3)), and the same class of bug fixed there earlier. */ :where(.faith-schools-page [class*="dc-t-"]) { margin: 0; text-wrap: balance; } .faith-schools-page .dc-t-72 { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.04em; } .faith-schools-page .dc-t-70 { font-size: clamp(34px, 5.2vw, 70px); line-height: 1.02; letter-spacing: -0.04em; } .faith-schools-page .dc-t-52 { font-size: clamp(28px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.032em; } .faith-schools-page .dc-t-50 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -0.032em; } .faith-schools-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.03em; } .faith-schools-page .dc-t-46 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; } .faith-schools-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.025em; } .faith-schools-page .dc-t-32 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.16; letter-spacing: -0.022em; } .faith-schools-page .dc-t-30 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.02em; } .faith-schools-page .dc-t-17 { font-size: 17px; line-height: 1.28; letter-spacing: -0.014em; } .faith-schools-page .dc-t-16 { font-size: 16px; line-height: normal; letter-spacing: -0.014em; } /* the two testimonial sizes: a light card at 21px and a dark card at 19px */ .faith-schools-page .dc-q-21 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.45; letter-spacing: -0.014em; color: var(--color-ink-deep); margin: 0; text-wrap: pretty; } .faith-schools-page .dc-q-19 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(15.5px, 1.7vw, 19px); line-height: 1.45; letter-spacing: -0.012em; color: #fff; margin: 0; text-wrap: pretty; } /* the "why it matters" pull-quote inside a step panel */ .faith-schools-page .dc-pull { font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--color-ink-deep); margin: 10px 0 0; } /* ── Body copy steps (Inter), named by px ───────────────────────────────────────────────── */ .faith-schools-page .dc-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-16h{ font-size: 16.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-15h{ font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-14h{ font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-14t{ font-size: 14.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-14 { font-size: 14px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-13h{ font-size: 13.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-12h{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-body-12 { font-size: 12px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .faith-schools-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.92); } /* ── Mono labels (IBM Plex Mono) ────────────────────────────────────────────────────────── */ /* The reference writes these with the `font:` SHORTHAND and no `/line-height`, so line-height resets to `normal`; inheriting 1.5 instead makes every label ~4px too tall — the single biggest source of height error across this batch. */ .faith-schools-page [class*="dc-label-"], .faith-schools-page .dc-eyebrow { font-family: var(--font-label); font-weight: 500; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } /* Colour as an overridable default (§2 rule 5): the meter counters are ink-soft in the reference, and as a 0-2-0 rule this beat their `text-ink-soft`. */ :where(.faith-schools-page [class*="dc-label-"], .faith-schools-page .dc-eyebrow) { color: var(--color-ink-mute); } .faith-schools-page .dc-eyebrow { display: block; font-size: 12.5px; color: var(--color-coral-500); } .faith-schools-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); } .faith-schools-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .faith-schools-page .dc-label-11 { font-size: 11px; } .faith-schools-page .dc-label-10h { font-size: 10.5px; } .faith-schools-page .dc-label-10 { font-size: 10px; } .faith-schools-page .dc-label-9h { font-size: 9.5px; } .faith-schools-page .dc-label-9 { font-size: 9px; } .faith-schools-page .dc-tr-0 { letter-spacing: 0; } .faith-schools-page .dc-tr-06 { letter-spacing: 0.06em; } .faith-schools-page .dc-tr-07 { letter-spacing: 0.07em; } .faith-schools-page .dc-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok-green-bright); } /* ── Colour helpers ─────────────────────────────────────────────────────────────────────── */ .faith-schools-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .faith-schools-page .dc-ok { color: var(--color-ok-green); } .faith-schools-page .dc-coral { color: var(--color-coral-500); } /* the struck chip row: the DS .badge-struck, nudged to the reference's hairline colour */ .faith-schools-page .badge-struck { border-color: var(--color-rule); } /* ── Hero: the SIF-round progress mock ───────────────────────────────────────────────────── */ /* NEW FOR THIS PAGE: three labelled progress bars rather than the funnel of bars the other audience heroes use. */ .faith-schools-page .dc-card-hero { background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-hero); padding: clamp(22px, 2.6vw, 30px); } .faith-schools-page .dc-meter { display: flex; flex-direction: column; gap: 10px; } .faith-schools-page .dc-meter-head { display: flex; justify-content: space-between; } .faith-schools-page .dc-bar { height: 9px; background: var(--dc-sand-2); border-radius: var(--radius-1\.5); margin-top: 5px; } .faith-schools-page .dc-bar-fill { display: block; height: 100%; border-radius: var(--radius-1\.5); } .faith-schools-page .dc-bar-navy { background: var(--color-ink-deep); } .faith-schools-page .dc-bar-green { background: var(--color-ok-green); } .faith-schools-page .dc-bar-coral { background: var(--color-coral-500); } .faith-schools-page .dc-w-89 { width: 89%; } .faith-schools-page .dc-w-82 { width: 82%; } .faith-schools-page .dc-w-9 { width: 9%; } .faith-schools-page .dc-mock-foot { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); color: var(--color-ink-soft); } .faith-schools-page .dc-illustrative { text-align: center; margin-top: 14px; } /* the hero's mono fact row */ .faith-schools-page .dc-facts { display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-rule); } /* ── The problem: the SIF-pile mock in a sand well ───────────────────────────────────────── */ .faith-schools-page .dc-well { background: var(--color-page-bg); border-radius: var(--radius-4\.5); padding: clamp(22px, 2.6vw, 30px); } .faith-schools-page .dc-pile { background: var(--color-paper); border-radius: var(--radius-3\.5); box-shadow: var(--dc-shadow-pile); padding: 22px 24px; } .faith-schools-page .dc-pile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--color-rule); } .faith-schools-page .dc-pile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--dc-line-soft); } .faith-schools-page .dc-pile-row:last-of-type { border-bottom: 0; } .faith-schools-page .dc-pile-note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-rule); } .faith-schools-page .dc-name { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--color-ink-deep); margin: 0; } /* ── The six-step SIF rail (the switcher on this page) ───────────────────────────────────── */ /* MEASURED FIRST, and it is a different mechanism again: a 6-column ICON rail — a 44px circular dot per step on a 2px connector line, with a mono number and a label beneath — over a single white panel whose contents swap. The dot fills coral and scales when selected. The DS tabs controller drives it (ARIA, arrow keys, panel switching) so this page needs no JS. */ .faith-schools-page .dc-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .faith-schools-page .dc-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; } .faith-schools-page .dc-step:not(:last-child)::before, .faith-schools-page .dc-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 21px; left: 50%; width: calc(100% + 10px); height: 2px; } .faith-schools-page .dc-step:not(:last-child)::before { background: var(--dc-sand-2); } .faith-schools-page .dc-step:not(:last-child)::after { background: var(--color-coral-500); transform: scaleX(0); transform-origin: left center; transition: transform 300ms ease; } .faith-schools-page .dc-step:has(~ .dc-step[aria-selected="true"]):not(:last-child)::after { transform: scaleX(1); } .faith-schools-page .dc-step-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: background 300ms ease, transform 300ms ease, color 300ms ease; } .faith-schools-page .dc-step-dot > i { font-size: 15px; } .faith-schools-page .dc-step-num { font-family: var(--font-label); font-weight: 700; font-size: 10px; line-height: normal; letter-spacing: 0.05em; transition: color 300ms ease; } .faith-schools-page .dc-step-label { font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.25; transition: color 300ms ease; } .faith-schools-page .dc-step[aria-selected="true"] .dc-step-dot { background: var(--color-coral-500); color: #fff; box-shadow: 0 0 0 5px var(--color-page-bg), var(--dc-shadow-coral); transform: scale(1.08); } .faith-schools-page .dc-step[aria-selected="true"] .dc-step-num { color: var(--color-coral-500); } .faith-schools-page .dc-step[aria-selected="true"] .dc-step-label { color: var(--color-ink-deep); } .faith-schools-page .dc-step:not([aria-selected="true"]) .dc-step-dot { background: var(--dc-sand-2); color: var(--color-ink-mute); box-shadow: 0 0 0 5px var(--color-page-bg); transform: scale(1); } .faith-schools-page .dc-step:not([aria-selected="true"]) .dc-step-num, .faith-schools-page .dc-step:not([aria-selected="true"]) .dc-step-label { color: var(--color-ink-mute); } .faith-schools-page .dc-step:has(~ .dc-step[aria-selected="true"]) .dc-step-dot { color: var(--color-paper); background: var(--color-coral-500); box-shadow: none; } .faith-schools-page .dc-panel-steps { margin-top: 32px; background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-panel); padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px); } .faith-schools-page .dc-spanel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .faith-schools-page .dc-aside { background: var(--color-page-bg); border-radius: var(--radius-3\.5); padding: 20px 22px; } /* The rail and panel collapse at the reference's own 1080/640 — see the Responsive block at the foot of this file, where every one of its collapse rules now lives together. */ /* ── Features: shared unwrapped capability row + intake pills + parent panel ─────────────── */ .faith-schools-page .dc-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .faith-schools-page .dc-tile-coral { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-3); background: var(--color-coral-500); box-shadow: var(--dc-shadow-coral); } .faith-schools-page .dc-tile-coral > i { font-size: 16px; color: #fff; } .faith-schools-page .dc-intake-row { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; margin: 36px 0 32px; } .faith-schools-page .dc-intake-label { margin-right: 4px; } .faith-schools-page .dc-intake { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: 11px 18px; transition: border-color 200ms ease, transform 200ms var(--dc-ease); } .faith-schools-page .dc-intake:hover { border-color: var(--color-coral-500); transform: translateY(-2px); } .faith-schools-page .dc-intake > i:first-child { font-size: 13px; color: var(--color-coral-500); } .faith-schools-page .dc-intake > i:last-child { font-size: 9px; color: var(--color-ink-mute); } .faith-schools-page .dc-intake-name { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; color: var(--color-ink-deep); } .faith-schools-page .dc-parent-panel { margin-top: 20px; background: var(--color-page-bg); border-radius: var(--radius-5); padding: clamp(34px, 3.8vw, 48px) clamp(30px, 3.8vw, 52px); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .faith-schools-page .dc-checks { display: flex; flex-direction: column; gap: 14px; } .faith-schools-page .dc-check-row { display: flex; gap: 12px; align-items: flex-start; } .faith-schools-page .dc-check-row > i { flex: none; margin-top: 5px; font-size: 11px; color: var(--color-coral-500); } /* ── Emma band ──────────────────────────────────────────────────────────────────────────── */ .faith-schools-page .dc-grid-emma { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .faith-schools-page .dc-stat-pill { display: inline-flex; align-items: center; gap: 18px; } .faith-schools-page .dc-stat-pill-num { flex: none; color: var(--color-coral-500); font-family: var(--font-heading); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .faith-schools-page .dc-stat-pill .dc-label-9 { color: var(--color-ink-mute); } .faith-schools-page .dc-emma-tabs { flex-wrap: wrap; } .faith-schools-page .dc-emma-tabs .tab { white-space: nowrap; } .faith-schools-page .dc-guardrails { padding: 8px 4px 0; } .faith-schools-page .dc-guardrails .check-list { gap: 15px; } .faith-schools-page .dc-on-dark-bright { color: var(--dc-on-dark-bright); } .faith-schools-page .dc-measure-620 { max-width: 620px; } /* ── Results: a light quote card beside a dark one ───────────────────────────────────────── */ .faith-schools-page .dc-grid-quotes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; } .faith-schools-page .dc-quote-light { margin: 0; background: var(--color-paper); border-radius: var(--radius-5); box-shadow: var(--dc-shadow-quote); padding: clamp(28px, 3.4vw, 42px) clamp(26px, 3.4vw, 44px); } .faith-schools-page .dc-quote-dark { position: relative; overflow: hidden; margin: 0; background: var(--color-dark-band); border-radius: var(--radius-5); padding: clamp(28px, 3.4vw, 42px) clamp(26px, 3.4vw, 40px); } .faith-schools-page .dc-quote-foot { display: flex; align-items: center; gap: 13px; margin-top: 24px; } .faith-schools-page .dc-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: normal; } .faith-schools-page .dc-avatar-light { background: var(--color-page-bg); color: var(--color-ink-deep); } .faith-schools-page .dc-avatar-dark { background: rgba(255, 255, 255, 0.1); color: #fff; } .faith-schools-page .dc-quote-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: normal; color: var(--color-ink-deep); } .faith-schools-page .dc-quote-name-w { color: #fff; } /* ── Where it fits: the 3-up intake cards + the platform strip ───────────────────────────── */ .faith-schools-page .dc-fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .faith-schools-page .dc-fit { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--color-paper); border-radius: var(--radius-4); box-shadow: var(--shadow-soft); padding: 24px 26px; /* LONGHANDS, NOT THE `transition` SHORTHAND. These cards are direct children of a `.reveal-stagger` container (the intake grid), and the stagger works by setting a 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 all three cards would animate at once. Measured before the split: 0s / 0s / 0s. */ transition-property: transform, box-shadow; transition-duration: 220ms, 220ms; transition-timing-function: var(--dc-ease), ease; } .faith-schools-page .dc-fit:hover { transform: translateY(-3px); box-shadow: var(--dc-shadow-panel); } .faith-schools-page .dc-fit-cta { margin-top: auto; padding-top: 16px; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; line-height: normal; color: var(--color-coral-500); } .faith-schools-page .dc-fit-cta > i { font-size: 9px; } .faith-schools-page .dc-plat { display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; margin-top: 16px; background: var(--color-paper); border-radius: var(--radius-4); box-shadow: var(--shadow-soft); padding: 24px 28px; } .faith-schools-page .dc-plat-body { flex: 1; min-width: 280px; } .faith-schools-page .dc-tile-ink { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-3); background: var(--color-ink-deep); } .faith-schools-page .dc-tile-ink > i { font-size: 15px; color: #fff; } /* ── Grids and measures shared across sections ──────────────────────────────────────────── */ .faith-schools-page .dc-grid-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .faith-schools-page .dc-grid-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .faith-schools-page .dc-measure-780 { max-width: 780px; } .faith-schools-page .dc-ch-58 { max-width: 58ch; } .faith-schools-page .dc-ch-56 { max-width: 56ch; } .faith-schools-page .dc-ch-54 { max-width: 54ch; } .faith-schools-page .dc-ch-48 { max-width: 48ch; } .faith-schools-page .dc-ch-42 { max-width: 42ch; } /* ── Spacing steps the build does not carry ──────────────────────────────────────────────── */ /* `prototypes/` is not a Tailwind scan source and the compiled spacing surface is patchy anyway (mb-11 compiles, mt-11 does not), so the reference's exact values are declared here named by px rather than rounded to whatever happens to compile. */ .faith-schools-page .dc-mt-3 { margin-top: 3px; } .faith-schools-page .dc-mt-6 { margin-top: 6px; } .faith-schools-page .dc-mt-12 { margin-top: 12px; } .faith-schools-page .dc-mt-14 { margin-top: 14px; } .faith-schools-page .dc-mt-16 { margin-top: 16px; } .faith-schools-page .dc-mt-18 { margin-top: 18px; } .faith-schools-page .dc-mt-20 { margin-top: 20px; } .faith-schools-page .dc-mt-22 { margin-top: 22px; } .faith-schools-page .dc-mt-24 { margin-top: 24px; } .faith-schools-page .dc-mt-26 { margin-top: 26px; } .faith-schools-page .dc-mt-30 { margin-top: 30px; } .faith-schools-page .dc-mt-34 { margin-top: 34px; } .faith-schools-page .dc-mt-40 { margin-top: 40px; } .faith-schools-page .dc-mb-8 { margin-bottom: 8px; } .faith-schools-page .dc-mb-12 { margin-bottom: 12px; } .faith-schools-page .dc-mb-14 { margin-bottom: 14px; } .faith-schools-page .dc-mb-16 { margin-bottom: 16px; } .faith-schools-page .dc-mb-30 { margin-bottom: 30px; } .faith-schools-page .dc-mb-36 { margin-bottom: 36px; } /* ── Closer ─────────────────────────────────────────────────────────────────────────────── */ /* Full-bleed FLAT coral at clamp(80,11vw,150) 24px — `.cta-section .cta-section-flat` with the padding overridden. The phone/email row beneath the buttons is exactly the DS `.cta-section-contact`, used here for the first time in this batch. */ .faith-schools-page .cta-section { padding: clamp(80px, 11vw, 150px) 24px; } .faith-schools-page .cta-section-contact { font-size: 13.5px; } /* ── Responsive: the reference's OWN collapse breakpoints, 1080px and 640px ────────────────── The port had grown five media blocks at 900px, 991px and 1000px — three values this reference never uses. Its whole content scale is two rules, read out of its own stylesheet: 1080 [data-fitgrid] → 2 cols · [data-featgrid] → 2 cols [data-sifrail] → 3 cols + hide its connector line (its `> [aria-hidden]`) [data-sifpanel] [data-probgrid] [data-emmagrid] [data-parentgrid] [data-quotegrid] → 1 col 640 [data-fitgrid] → 1 col · [data-featgrid] → 1 col · [data-sifrail] → 2 cols `[data-probgrid]` is on BOTH the hero grid and the problem grid in the reference, which is why the hero collapses at 1080 here and not at the 900 we had invented. Its remaining media rules are chrome we do not port (1120/940 hide nav items, 1080/560 reflow the footer grid). REFERENCE DEFECT, recorded not reproduced: the 640 rule also names `[data-howrow]`, an attribute that appears nowhere in the reference's markup — dead CSS in the source. Declared HERE, at the foot, so every base rule it overrides is already above it. */ @media (max-width: 1080px) { .faith-schools-page .dc-grid-hero, .faith-schools-page .dc-grid-problem, .faith-schools-page .dc-grid-emma, .faith-schools-page .dc-grid-quotes, .faith-schools-page .dc-spanel, .faith-schools-page .dc-parent-panel { grid-template-columns: minmax(0, 1fr); } .faith-schools-page .dc-feat-grid, .faith-schools-page .dc-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faith-schools-page .dc-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } .faith-schools-page .dc-step::before, .faith-schools-page .dc-step::after { display: none; } } @media (max-width: 640px) { .faith-schools-page .dc-emma-tabs .tab { flex-basis: calc(50% - 2px); } .faith-schools-page .dc-feat-grid, .faith-schools-page .dc-fit-grid { grid-template-columns: minmax(0, 1fr); } .faith-schools-page .dc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* Deliberately empty: this page declares no @keyframes of its own, and every DS component it uses (section-glow drift) already stops itself under prefers-reduced-motion. A blanket `* { animation: … !important }` would break coding-standards §6 for no gain — the house precedent set on secondary/. The only page-owned motion is hover/selection transitions. */