/* ============================================================================ WPC BRIDGE — makes the platform and the website ONE design system Vendored from the design project (templates/wpc-shared/wpc-bridge.css). Pairs with wpc-design-system.css v3.2, alongside this file. ---------------------------------------------------------------------------- Assigns the WPC token VALUES to the NCLDS token NAMES, so any NCLDS component rendered inside .wpc-brand inherits WPC brand automatically. wpc-design-system .css owns the values; this file only forwards them. Never hardcode a hex here. LOAD ORDER (see admin/index.html) 1. _ds_bundle.css NCLDS component styles + :root defaults 2. wpc-design-system.css WPC tokens (.wpc AND .wpc-brand) + web parts 3. wpc-bridge.css THIS FILE — maps 2 onto 1 .wpc-brand = tokens only, for the platform. .wpc = tokens + website element styles, which would restyle h1/a/table/p across the admin portal — so the portal uses .wpc-brand. ========================================================================== */ .wpc, .wpc-brand { --navy: var(--wpc-navy); --red: var(--wpc-red); --light: var(--wpc-zebra); --card: var(--wpc-white); --border: var(--wpc-border); --border-soft: var(--wpc-mist); --text: var(--wpc-ink); --muted: var(--wpc-ink-soft); --header-bg: var(--wpc-white); --red-bg: var(--wpc-red-tint); --green: var(--wpc-ok-ink); --green-bg: var(--wpc-ok-bg); --amber: var(--wpc-gold); --amber-bg: var(--wpc-warm-bg); --slate: var(--wpc-slate); --slate-bg: var(--wpc-mist); --font: var(--wpc-font); } /* --- BUTTONS: hover states were literal, so none followed the skin -------- */ .wpc-brand .ncl-btn--primary:hover:not(:disabled), .wpc .ncl-btn--primary:hover:not(:disabled) { background: var(--wpc-navy-800); } .wpc-brand .ncl-btn--danger-solid:hover:not(:disabled), .wpc .ncl-btn--danger-solid:hover:not(:disabled) { background: var(--wpc-red-700); } .wpc-brand .ncl-btn--danger:hover:not(:disabled), .wpc .ncl-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--wpc-red) 14%, #fff); } .wpc-brand .ncl-btn--green:hover:not(:disabled), .wpc .ncl-btn--green:hover:not(:disabled) { background: color-mix(in srgb, var(--wpc-ok-ink) 84%, #000); } .wpc-brand .ncl-btn--amber:hover:not(:disabled), .wpc .ncl-btn--amber:hover:not(:disabled) { background: color-mix(in srgb, var(--wpc-gold) 84%, #000); } /* --- SCOREBOARD ---------------------------------------------------------- */ .wpc-brand .ncl-scoreboard, .wpc .ncl-scoreboard { background: linear-gradient(180deg, var(--wpc-navy-800) 0%, var(--wpc-navy) 100%); box-shadow: inset 0 -3px 0 var(--wpc-accent); } /* --- AMBER TEXT ---------------------------------------------------------- */ .wpc-brand .ncl-badge--amber, .wpc .ncl-badge--amber { color: var(--wpc-warm-ink); } /* --- NEUTRAL GREYS ------------------------------------------------------- */ .wpc-brand .ncl-pill--white, .wpc .ncl-pill--white { background: var(--wpc-zebra); } .wpc-brand .ncl-table tbody tr:hover td, .wpc .ncl-table tbody tr:hover td { background: var(--wpc-zebra); } .wpc-brand .ncl-res--T, .wpc .ncl-res--T { background: var(--wpc-mist); } .wpc-brand .ncl-sidebar__group-label, .wpc .ncl-sidebar__group-label, .wpc-brand .ncl-prog-switcher__label, .wpc .ncl-prog-switcher__label, .wpc-brand .ncl-event-pin__close, .wpc .ncl-event-pin__close { color: var(--wpc-silver); } /* --- KPI / STAT accents -------------------------------------------------- */ .wpc-brand .ncl-kpi__accent, .wpc .ncl-kpi__accent { background: var(--wpc-navy); } .wpc-brand .ncl-kpi__val--red, .wpc .ncl-kpi__val--red, .wpc-brand .ncl-stat__val--red, .wpc .ncl-stat__val--red { color: var(--wpc-red-ink); } .wpc-brand .ncl-kpi__val--green, .wpc .ncl-kpi__val--green, .wpc-brand .ncl-stat__val--green, .wpc .ncl-stat__val--green { color: var(--wpc-ok-ink); } .wpc-brand .ncl-kpi__val--amber, .wpc .ncl-kpi__val--amber, .wpc-brand .ncl-stat__val--amber, .wpc .ncl-stat__val--amber { color: var(--wpc-warm-ink); } /* --- SCHEDULE / PROGRESS ------------------------------------------------- */ .wpc-brand .ncl-sched__day::before, .wpc .ncl-sched__day::before { background: var(--wpc-accent); } .wpc-brand .ncl-progress__fill, .wpc .ncl-progress__fill { background: var(--wpc-ok-ink); } .wpc-brand .ncl-progress__fill--red, .wpc .ncl-progress__fill--red { background: var(--wpc-red); } .wpc-brand .ncl-progress__fill--amber, .wpc .ncl-progress__fill--amber { background: var(--wpc-gold); } .wpc-brand .ncl-progress__fill--navy, .wpc .ncl-progress__fill--navy { background: var(--wpc-navy); } /* --- STANDINGS ----------------------------------------------------------- */ .wpc-brand .ncl-standings .ncl-table th, .wpc .ncl-standings .ncl-table th { background: var(--wpc-mist); color: var(--wpc-slate); } /* --- remaining literals -------------------------------------------------- */ .wpc-brand .ncl-btn--dc:hover:not(:disabled), .wpc .ncl-btn--dc:hover:not(:disabled) { background: color-mix(in srgb, var(--purple) 14%, #fff); } .wpc-brand .ncl-empty__hint, .wpc .ncl-empty__hint { color: var(--wpc-warm-ink); } .wpc-brand .ncl-toast--warning, .wpc .ncl-toast--warning { background: var(--wpc-warm-ink); } .wpc-brand .ncl-bell__panel, .wpc .ncl-bell__panel { border-color: var(--wpc-border); } .wpc-brand .ncl-bell__head button, .wpc .ncl-bell__head button { color: var(--wpc-red-ink); } .wpc-brand .ncl-bell__item--unread, .wpc .ncl-bell__item--unread { background: var(--wpc-navy-tint); } .wpc-brand .ncl-bell__time, .wpc .ncl-bell__time { color: var(--wpc-silver); } /* --- header layout guards ------------------------------------------------ */ .wpc-brand .ncl-header, .wpc .ncl-header { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; color: #fff; } .wpc-brand .ncl-header__logo, .wpc .ncl-header__logo { flex: 0 0 auto; } .wpc-brand .ncl-header__title, .wpc .ncl-header__title { line-height: 1.2; } .wpc-brand .ncl-header__sub, .wpc .ncl-header__sub { line-height: 1.3; } .wpc-brand .ncl-header__user, .wpc .ncl-header__user { white-space: nowrap; } .wpc-brand .ncl-scoreboard, .wpc .ncl-scoreboard { color: #fff; } /* --- TYPOGRAPHY: League Spartan for display + uppercase labels ----------- */ .wpc-brand .ncl-page-title h1, .wpc .ncl-page-title h1, .wpc-brand .ncl-auth__title, .wpc .ncl-auth__title { font-family: var(--wpc-font-display); letter-spacing: -.01em; } .wpc-brand .ncl-kpi__val, .wpc .ncl-kpi__val, .wpc-brand .ncl-stat__val, .wpc .ncl-stat__val, .wpc-brand .ncl-scoreboard__score, .wpc .ncl-scoreboard__score { font-family: var(--wpc-font-display); font-weight: 800; letter-spacing: -.01em; } .wpc-brand .ncl-table th, .wpc .ncl-table th, .wpc-brand .ncl-kpi__label, .wpc .ncl-kpi__label, .wpc-brand .ncl-stat__label, .wpc .ncl-stat__label, .wpc-brand .ncl-sidebar__group-label, .wpc .ncl-sidebar__group-label, .wpc-brand .ncl-prog-switcher__label, .wpc .ncl-prog-switcher__label, .wpc-brand .ncl-event-pin__label, .wpc .ncl-event-pin__label, .wpc-brand .ncl-auth__org, .wpc .ncl-auth__org, .wpc-brand .ncl-field__label, .wpc .ncl-field__label { font-family: var(--wpc-font-display); letter-spacing: .06em; } .wpc-brand .ncl-card__title, .wpc .ncl-card__title, .wpc-brand .ncl-banner__title, .wpc .ncl-banner__title, .wpc-brand .ncl-empty__title, .wpc .ncl-empty__title, .wpc-brand .ncl-header__title, .wpc .ncl-header__title { font-family: var(--wpc-font); font-weight: 800; } /* ============================================================================ HUB OVERRIDE — amber stays a warning ---------------------------------------------------------------------------- The bridge maps --amber to --wpc-gold (#C9A227). Gold is a MEDAL colour in the WPC palette — it sits beside silver and bronze. Every "expiring", "action needed" and "no date of birth" badge in Safe Sport uses --amber, and rendering those in medal gold makes a compliance warning look like an award. --wpc-warm-ink is the palette's actual warning colour and is already what the amber BADGE text and warm callouts use; this makes the fill agree with it. ========================================================================== */ .wpc-brand { --amber: var(--wpc-warm-ink); } /* ============================================================================ ISLANDS — how a WPC website component gets to work inside the admin portal ---------------------------------------------------------------------------- THE PROBLEM. Every component rule in wpc-design-system.css is scoped to a `.wpc` ANCESTOR: `.wpc .wpc-card`, `.wpc .wpc-btn`, `.wpc .wpc-hero`. The portal puts `.wpc-brand` on #root, which forwards TOKENS and nothing else — so a `
` in the admin portal computes to border 0, padding 0, background transparent. It is not a subtle mismatch; the component simply is not there. That is why adopting the "skin" changed only colour. WHY NOT JUST PUT .wpc ON #root. Because `.wpc` also brings the website's element styles — `a` goes red and 700, tables get website padding, headings get website margins — across a dense working grid built on .ncl-* components. That decision is recorded at admin/index.html:8-13 and it was right. WHY NOT RE-SCOPE THE 250 RULES INTO THIS FILE. It would be a second copy of a stylesheet that is the hosted source of truth for waterpolo.ca, and it would drift the first time either side is edited. THE ISLAND. Put `.wpc` on the ONE container that wants website treatment — a page header, an empty state, a call to action — and the components inside it light up. The element styles come too, but only inside that container, which is small and deliberately chosen. Everything below fixes the specific ways an island misbehaves when it is nested inside .wpc-brand rather than standing on its own page. ========================================================================== */ /* 1. The base reset `.wpc :is(h1..h5):not(.wpc-brand *){margin:0}` in the design system deliberately switches ITSELF off inside .wpc-brand, and _ds_bundle .css has no element reset of its own. So inside an island the UA margins come back — a hero h1 keeps its 0.67em top margin and sits off-centre. */ .wpc-brand .wpc :is(h1, h2, h3, h4, h5, h6, p) { margin: 0; } /* 2. Hero type is sized for a marketing page: uppercase at clamp(30px,5vw,46px). At admin widths that is 46px SHOUTING, and uppercase destroys the casing of the names this system exists to get right — McDonald, de la Cruz, O'Donnell. An identity backbone must not restyle a person's name. */ .wpc-brand .wpc .wpc-hero h1 { text-transform: none; font-size: 26px; line-height: 1.15; } .wpc-brand .wpc .wpc-hero p { font-size: 14px; } /* 3. A hero is a plain block, so header actions cannot right-align against it. */ .wpc-brand .wpc .wpc-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; } .wpc-brand .wpc .wpc-hero > .hero-main { min-width: 0; flex: 1 1 auto; } /* 4. `.wpc .wpc-hero` sets overflow:hidden but NOT position:relative — only `.wpc-wm-host` does. A .wpc-watermark inside a bare hero therefore positions against the page and paints a 440px mark behind the tables underneath. Belt and braces: make every island hero a containing block anyway. */ .wpc-brand .wpc .wpc-hero, .wpc-brand .wpc .wpc-cta, .wpc-brand .wpc .wpc-empty { position: relative; } /* 5. `.wpc .wpc-btn` declares no font-family, so it renders in the UA font while everything around it is the brand face. Upstream bug in the design project; fixed here rather than forking the stylesheet. */ .wpc .wpc-btn, .wpc-brand .wpc .wpc-btn { font-family: var(--wpc-font); } /* 6. Section heads are sized for a landing page too. */ .wpc-brand .wpc .section-head { margin-bottom: 14px; } .wpc-brand .wpc .section-head h2 { font-size: 19px; } .wpc-brand .wpc .section-head p { font-size: 13.5px; } /* 7. Rule 1 zeroes the margins inside an island, which is right for a hero but collapses a section head's title onto its own hint. Give the h2 back the few pixels, and nothing else. */ .wpc-brand .wpc .section-head h2 { margin-bottom: 3px; } /* 8. TYPE, forwarded. Every type rule in the design system's §20 carries a `:not(.wpc-brand *)` guard, because a platform screen is meant to keep its own NCLDS type — so inside an island they all switch themselves off and the brand's own components render in the fallback body face. The TYPOGRAPHY block above already re-forwards the display face for each .ncl-* equivalent (page titles, KPI values, field labels); these are the island components the portal actually uses, on the same terms. Values match §20 exactly: display face at .06em for uppercase labels, .02em for a display heading. */ .wpc-brand .wpc .section-head h2 { font-family: var(--wpc-font-display); font-weight: 800; letter-spacing: .02em; } .wpc-brand .wpc .section-head .kicker, .wpc-brand .wpc .wpc-kv .lbl, .wpc-brand .wpc .wpc-fact .k, .wpc-brand .wpc .wpc-timeline .d { font-family: var(--wpc-font-display); letter-spacing: .06em; } /* …except the timeline date, which is a NUMBER and not a label: caps tracking on tabular digits pulls a date apart. Display face, no tracking. */ .wpc-brand .wpc .wpc-timeline .d { letter-spacing: normal; font-variant-numeric: tabular-nums; } .wpc-brand .wpc .wpc-timeline strong { font-family: var(--wpc-font); font-weight: 800; } /* 9. A history in a card runs to dozens of rows; the landing-page schedule this was drawn for has six. Tighter rows, and the sub-line under the date needs air of its own now that it can hold a badge rather than a day name. */ .wpc-brand .wpc .wpc-timeline li { padding: 9px 0; } .wpc-brand .wpc .wpc-timeline .d { font-size: 13px; } .wpc-brand .wpc .wpc-timeline .d small { margin-top: 3px; font-size: 11px; } .wpc-brand .wpc .wpc-timeline .w span { font-size: 13px; }