/* ============================================================= DSBN GLOBAL DESIGN TOKENS — single source of truth ------------------------------------------------------------- Portable across board / elementary / secondary themes. Only the BRAND PALETTE block is meant to be overridden per-site (via the WordPress Customizer -> inline CSS). Everything else (type scale, spacing, radii) stays shared. Type scale source: Spencer Coombes character styles (XD). Values are the design spec (pt≈px) expressed in rem @16px base; large display sizes use clamp() so they scale down on mobile while the MAX equals the exact spec value. Fonts: Adobe Fonts (Typekit kit ard5rkm) - Headings : New Spirit -> "new-spirit" - Body/UI : DM Sans -> "dm-sans" ============================================================= */ :root { /* --- Font families --------------------------------------- */ --dsbn-font-heading: "new-spirit", Georgia, "Times New Roman", serif; --dsbn-font-body: "dm-sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --dsbn-font-ui: "dm-sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* --- Type scale (exact XD spec -> rem) -------------------- */ --dsbn-fs-hub: clamp(3rem, 8vw, 6.875rem); /* HUB title — New Spirit 110 CURRENTLY UNCONSUMED. Kept as the XD spec record only. Its last use was as the max of .dsbn-hub-hero__heading's ≤768px override, which has been removed (it inverted the scale-down — see patterns.css). Note the 110px ceiling never actually rendered even then: that override lived inside a ≤768px media query, where 8vw tops out at ~61px. If you wire this token up again, verify it renders the size you expect before trusting it. */ --dsbn-fs-banner: clamp(2.25rem, 5vw, 3.75rem); /* Banner Headings — New Spirit 60 */ --dsbn-fs-section: clamp(2rem, 4vw, 2.75rem); /* Section Headers — New Spirit 44 (XD spec was 50; trimmed after a live audit found the 50px ceiling wrapped real editor h2s to two lines in the 904px sidebar content column and gave them more visual mass than the 60px hero title above them. Floor/preferred unchanged — 900px and below already measured correctly.) */ --dsbn-fs-body-header: clamp(1.5rem, 2.5vw, 1.625rem); /* Body Headers — DM Sans 30, ceiling nudged down to 26 by request (read too large for h3/icon-card titles on a 13" MacBook Air's ~1280px viewport, where 2.5vw already exceeds 30px and saturates at the ceiling; a first nudge to 28px wasn't a visible enough difference) */ --dsbn-fs-body-header-sm: clamp(1.25rem, 2.1vw, 1.5rem); /* One step down from --dsbn-fs-body-header — used by the FAQ question (.dsbn-faq__item summary), which needed to land smaller than a normal card title so a long question fits on one line instead of wrapping (see its own comment). Extracted to a token instead of staying a hand-typed clamp so it can't silently drift the way body-header's copies did. Values unchanged from the ones verified live. */ --dsbn-fs-banner-sub: 1.75rem; /* Banner Subheadings — DM Sans 30, nudged slightly smaller by request */ --dsbn-fs-button: 1.25rem; /* Button & Menus — DM Sans 20 */ --dsbn-fs-eyebrow: 1.25rem; /* Eyebrow — DM Sans 20 */ --dsbn-fs-body: 1.125rem; /* Body — DM Sans 18 */ --dsbn-fs-nav: 0.9375rem; /* Navigation title — DM Sans 15 */ /* --- Type: weights & line-heights ------------------------ */ --dsbn-fw-body: 400; --dsbn-fw-medium: 500; --dsbn-fw-semibold: 600; --dsbn-fw-bold: 700; --dsbn-lh-tight: 1.1; --dsbn-lh-heading: 1.2; --dsbn-lh-body: 1.6; /* --- BRAND PALETTE (per-site overridable) ---------------- */ --dsbn-color-primary: #004B98; /* DSBN board blue */ --dsbn-color-secondary: #1E355E; /* deep navy */ --dsbn-color-accent: #FDC743; /* yellow */ --dsbn-color-accent-blue: #1A99E5; /* site blue (CTAs/links) */ --dsbn-color-accent-blue-alt: #29AFFF; /* lighter alt blue */ --dsbn-color-surface-tint: #e8f1fb; /* light-blue section wash */ /* --- Neutrals / text ------------------------------------- */ --dsbn-color-ink: #06213E; /* headings */ --dsbn-color-body: #26364a; /* body copy */ --dsbn-color-surface: #ffffff; /* page / card background */ --dsbn-color-surface-alt: #f4f6f9; /* alt section background */ --dsbn-color-line: #d7dbe1; /* hairlines / borders */ --dsbn-color-card-border: #C6C6C6; /* thin card hairline */ --dsbn-color-footer-bg: #1E355E; --dsbn-color-footer-text: #ffffff; --dsbn-color-backdrop: rgba(0, 0, 0, 0.6); /* modal/dialog scrim overlay */ /* --- Pattern accents (cards / eyebrows / soft surfaces) --- */ --dsbn-color-eyebrow: #0056B8; /* eyebrow / kicker label text (hub hero, customizable) */ --dsbn-surface-blue-soft: #dcebfb; /* nav hover / soft blue wash */ --dsbn-surface-cream: #FFF8F2; /* image-left/right enclosed wash (customizable) */ --dsbn-surface-gray: #F7F7F7; /* image-left/right gray wash (customizable) */ /* Gradient eyebrow bars (3 Card Row - Outline) */ --dsbn-eyebrow-purple: linear-gradient(135deg, #5B2D83 0%, #C98EED 100%); --dsbn-eyebrow-pink: linear-gradient(135deg, #8A1F76 0%, #E06ECB 100%); --dsbn-eyebrow-blue: linear-gradient(135deg, #0C6FA3 0%, #3DC5FF 100%); --dsbn-eyebrow-orange: linear-gradient(135deg, #FFB477 0%, #FF7300 100%); --dsbn-eyebrow-dark-pink: linear-gradient(135deg, #E35273 0%, #FF819E 100%); --dsbn-eyebrow-red: linear-gradient(135deg, #FF3141 0%, #FF6571 100%); --dsbn-eyebrow-light-purple: linear-gradient(135deg, #AF86D3 0%, #BC98DB 100%); --dsbn-eyebrow-light-pink: linear-gradient(135deg, #CE87C2 0%, #F59CE5 50%, #D652BF 100%); --dsbn-eyebrow-yellow: linear-gradient(135deg, #FFB779 0%, #FFAF19 100%); --dsbn-eyebrow-light-blue: linear-gradient(135deg, #5284E3 0%, #818BFF 100%); --dsbn-eyebrow-light-green: linear-gradient(135deg, #8CC63F 0%, #B4DA82 100%); --dsbn-eyebrow-green: linear-gradient(135deg, #39B54A 0%, #7ECF89 100%); --dsbn-eyebrow-dark-green: linear-gradient(135deg, #0B9444 0%, #60B985 100%); /* Fill-card gradients (3 Card Row - Fill) */ --dsbn-grad-1: linear-gradient(3deg, #FFB477 0%, #FF7300 100%); /* orange */ --dsbn-grad-2: linear-gradient(180deg, #E35273 0%, #FF819E 100%); /* dark pink */ --dsbn-grad-3: linear-gradient(180deg, #FF3141 0%, #FF6571 100%); /* red */ /* Additional fill-card gradients derived from the outline accent colors (same color stops as the matching --dsbn-eyebrow-* tokens, 180deg fill direction like grad-2/grad-3) */ --dsbn-grad-purple: linear-gradient(180deg, #5B2D83 0%, #C98EED 100%); --dsbn-grad-pink: linear-gradient(180deg, #8A1F76 0%, #E06ECB 100%); --dsbn-grad-blue: linear-gradient(180deg, #0C6FA3 0%, #3DC5FF 100%); --dsbn-grad-light-purple: linear-gradient(180deg, #AF86D3 0%, #BC98DB 100%); --dsbn-grad-light-pink: linear-gradient(180deg, #D652BF 0%, #CE87C2 50%, #F59CE5 100%); --dsbn-grad-yellow: linear-gradient(180deg, #FFAF19 0%, #FFB779 100%); --dsbn-grad-light-blue: linear-gradient(180deg, #5284E3 0%, #818BFF 100%); /* Video card surfaces */ --dsbn-video-half-bg: linear-gradient(135deg, #CBE8FF 0%, #E6F4FF 100%); --dsbn-video-full-overlay: linear-gradient(184deg, rgba(255, 255, 255, 0) 0%, rgba(93, 98, 137, 0.635) 55%, #000845 100%); /* Hub hero side nav */ --dsbn-hub-nav-bg: #F5F6F8; --dsbn-hub-nav-border: #EFEFEF; --dsbn-hub-nav-active: #EAEBF0; /* Button colours */ --dsbn-btn-main: #1A99E5; --dsbn-btn-alt: #29AFFF; /* SVG icon tokens (mask = currentColor, background = baked colour) */ --dsbn-icon-chevron: url("data:image/svg+xml,"); --dsbn-icon-plus: url("data:image/svg+xml,"); --dsbn-icon-minus: url("data:image/svg+xml,"); --dsbn-icon-arrow-ink: url("data:image/svg+xml,"); --dsbn-icon-arrow-white: url("data:image/svg+xml,"); --dsbn-icon-play-circle-white: url("data:image/svg+xml,"); --dsbn-icon-play: url("data:image/svg+xml,"); --dsbn-icon-phone: url("data:image/svg+xml,"); --dsbn-icon-mail: url("data:image/svg+xml,"); --dsbn-icon-document: url("data:image/svg+xml,"); --dsbn-icon-search: url("data:image/svg+xml,"); /* --- Spacing scale --------------------------------------- */ --dsbn-space-2xs: 0.25rem; --dsbn-space-xs: 0.5rem; --dsbn-space-sm: 1rem; --dsbn-space-md: 1.5rem; --dsbn-space-lg: 2rem; --dsbn-space-xl: 3rem; --dsbn-space-2xl: 4rem; --dsbn-section-pad: clamp(2rem, 6vw, 6rem); /* vertical section rhythm */ --dsbn-gutter: clamp(1rem, 4vw, 3rem); /* horizontal page gutter */ --dsbn-carousel-edge-zone: calc(clamp(1rem, 2.5vw, 2.5rem) + 2.5rem + 0.75rem); /* homepage carousel/fallback-hero: blank space reserved between the viewport edge and where the title starts, sized to clear the prev/next arrow icon (padding + icon width) plus a small margin. Shared by both the title's left-offset and the arrow icon's own centering padding, so the arrow is always dead-centered within this same zone by construction. */ /* --- Layout ---------------------------------------------- */ --dsbn-shell: 1595px; /* shared page/content width */ --dsbn-shell-wide: 1440px; /* --- Radii & shadows ------------------------------------- */ --dsbn-radius-sm: 0.5rem; --dsbn-radius-md: 1rem; --dsbn-radius-lg: 1.5rem; --dsbn-radius-pill: 999px; --dsbn-radius-btn: 28px; --dsbn-radius-faq: 27px; --dsbn-radius-nav-link: 9px; --dsbn-shadow-card: 0 16px 28px rgba(0, 48, 103, 0.10); --dsbn-shadow-soft: 0 14px 34px rgba(18, 35, 61, 0.12); /* --- Motion ---------------------------------------------- */ --dsbn-ease: cubic-bezier(0.22, 1, 0.36, 1); --dsbn-transition: 200ms var(--dsbn-ease); }