/* ============================================================================ NYC DIGITAL DESIGN SYSTEM — Theme Override Layer When is set, every CSS custom property from tokens.css is overridden to match the NYC Digital Design System specs (designsystem.nyc.gov). The toggle lives in the prototype toolbar. This is a REPLICA theme — the actual @nycds/core package is private (Azure DevOps registry, NYC government only). All values here come from the publicly documented specs on designsystem.nyc.gov. Fonts: Heading: Clash Grotesk (Fontshare, free) Body/UI: Noto Sans (Google Fonts, free) Primary interactive color: #103FEF (Blue 40) ============================================================================ */ /* ── Token Overrides ─────────────────────────────────────────────────────── */ [data-theme="nyc"] { /* ── NYC Brand Colors ──────────────────────────────────────────────── */ --nyc-dark: #000000; --nyc-red: #1B2C8F; /* Navy — default interactive blue */ --nyc-red-hover: #103FEF; /* Bright Blue 40 — hover/active feedback */ --nyc-red-light: var(--nyc-ref-color-blue-80); /* Blue 80 — selection highlight */ --nyc-red-bg: #E8EEFF; /* Light blue tint — subtle bg */ /* ── Page & Surface Colors ─────────────────────────────────────────── */ --page-bg: #FFFFFF; --page-pink: #E8EEFF; /* Neutral blue instead of pink */ --page-pink-light: #F0F4FF; --page-pink-deep: #C5D4F0; --surface-white: #FFFFFF; --surface-card: #FFFFFF; --surface-muted: #F5F5F5; --surface-hover: #EEEEEE; /* ── Page Background — internal-page gradient. Top matches the page-header bg (#F0EFF8) so the header blends into the body; bottom keeps the existing light blue. ── */ --page-gradient-start: #FAFAFE; --page-gradient-end: #F0EFF8; --page-gradient: linear-gradient(180deg, #FAFAFE 0%, #FAFAFE 45%, #F0EFF8 100%); /* ── Text Colors ───────────────────────────────────────────────────── */ --text-primary: #000000; --text-secondary: #333333; /* Gray 20 */ --text-muted: #555555; /* Gray 30 */ --text-inverse: #FFFFFF; --text-link: #1B2C8F; /* Navy — default link color */ --text-link-hover: #103FEF; /* Bright Blue 40 — hover feedback */ --text-link-visited: #6B3FA0; /* Purple — visited state */ /* ── Status Colors ─────────────────────────────────────────────────── */ /* All mapped to NYC DS reference tokens (designsystem.nyc.gov) */ --status-verified-bg: var(--nyc-ref-color-green-100); --status-verified-text: var(--nyc-ref-color-green-50); --status-verified-border: var(--nyc-ref-color-green-70); --status-checking-bg: var(--nyc-ref-color-blue-100); --status-checking-text: var(--nyc-ref-color-blue-40); --status-checking-border: var(--nyc-ref-color-blue-70); --status-progress-bg: var(--nyc-ref-color-yellow-100); --status-progress-text: var(--nyc-ref-color-orange-50); --status-progress-border: var(--nyc-ref-color-orange-70); --status-reviews-bg: var(--nyc-ref-color-red-100); --status-reviews-text: var(--nyc-ref-color-red-50); --status-reviews-border: var(--nyc-ref-color-red-70); /* Application-status pills */ --status-draft-bg: #F5F5F5; --status-draft-text: var(--nyc-ref-color-gray-20, #333); --status-draft-border: var(--nyc-ref-color-gray-70, #ccc); --status-draft-expired-bg: var(--nyc-ref-color-red-100); --status-draft-expired-text: var(--nyc-ref-color-red-50); --status-draft-expired-border: var(--nyc-ref-color-red-70); --status-in-process-bg: var(--nyc-ref-color-blue-100); --status-in-process-text: var(--nyc-ref-color-blue-40); --status-in-process-border: var(--nyc-ref-color-blue-70); --status-approved-bg: var(--nyc-ref-color-green-100); --status-approved-text: var(--nyc-ref-color-green-50); --status-approved-border: var(--nyc-ref-color-green-70); --status-waitlisted-bg: var(--nyc-ref-color-yellow-100); --status-waitlisted-text: var(--nyc-ref-color-orange-50); --status-waitlisted-border: var(--nyc-ref-color-orange-70); --status-denied-bg: #FFFFFF; --status-denied-text: var(--nyc-ref-color-red-50); --status-denied-border: var(--nyc-ref-color-red-50); /* ── Stepper Colors ────────────────────────────────────────────────── */ --stepper-completed: var(--nyc-ref-color-green-50); --stepper-current: var(--nyc-ref-color-blue-40); --stepper-line: var(--nyc-ref-color-green-50); --stepper-line-current: var(--nyc-ref-color-blue-40); /* ── Alert / Banner Colors ─────────────────────────────────────────── */ --alert-warning-bg: var(--nyc-ref-color-yellow-100); --alert-warning-border: var(--nyc-ref-color-orange-70); --alert-warning-text: var(--text-primary); --alert-info-bg: var(--nyc-ref-color-blue-100); --alert-info-border: var(--nyc-ref-color-blue-70); --alert-info-text: var(--text-primary); --alert-error-bg: var(--nyc-ref-color-red-100); --alert-error-border: var(--nyc-ref-color-red-70); --alert-error-text: var(--text-primary); --alert-success-bg: var(--nyc-ref-color-green-100); --alert-success-border: var(--nyc-ref-color-green-70); --alert-success-text: var(--text-primary); /* ── Panel Colors ──────────────────────────────────────────────────── */ --panel-info-bg: var(--nyc-ref-color-blue-100); --panel-info-text: var(--text-primary); --panel-info-accent: var(--nyc-ref-color-blue-70); --panel-warning-bg: var(--nyc-ref-color-yellow-100); --panel-warning-text: var(--text-primary); --panel-warning-accent: var(--nyc-ref-color-orange-70); --panel-success-bg: var(--nyc-ref-color-green-100); --panel-success-text: var(--text-primary); --panel-success-accent: var(--nyc-ref-color-green-70); --panel-error-bg: var(--nyc-ref-color-red-100); --panel-error-text: var(--text-primary); --panel-error-accent: var(--nyc-ref-color-red-70); --panel-muted-bg: var(--nyc-ref-color-gray-90, #eee); --panel-muted-text: var(--text-primary); --panel-muted-accent: var(--nyc-ref-color-gray-70, #ccc); --surface-info-soft: var(--nyc-ref-color-blue-100); --border-info-soft: var(--nyc-ref-color-blue-80); /* ── NYC Design System Reference Tokens ──────────────────────────── */ /* Primitive color scales from designsystem.nyc.gov — used by component-level overrides below (e.g. color-mix backgrounds). */ --nyc-ref-color-orange-90: #ffe0c2; --nyc-ref-color-orange-80: #fcc788; --nyc-ref-color-orange-70: #fba95b; --nyc-ref-color-orange-60: #f98d26; --nyc-ref-color-orange-50: #e57000; --nyc-ref-color-blue-100: #e7f0fa; --nyc-ref-color-blue-90: #d1e9ff; --nyc-ref-color-blue-80: #b5dbff; --nyc-ref-color-blue-70: #70baff; --nyc-ref-color-blue-60: #3185fc; --nyc-ref-color-blue-40: #1B2C8F; /* Navy — unified interactive blue (was #103fef) */ --nyc-ref-color-red-100: #fde7e8; --nyc-ref-color-red-90: #f9b8bb; --nyc-ref-color-red-70: #f47178; --nyc-ref-color-red-50: #ec131e; --nyc-ref-color-green-100: #e6f8e6; --nyc-ref-color-green-90: #b3e9b3; --nyc-ref-color-green-70: #66d468; --nyc-ref-color-green-50: #00b703; --nyc-ref-color-yellow-100:#fff9e5; --nyc-ref-color-yellow-90: #ffeeb2; --nyc-ref-color-gray-90: #eee; --nyc-ref-color-gray-80: #ddd; --nyc-ref-color-gray-70: #ccc; --nyc-ref-color-gray-30: #555; --nyc-ref-color-gray-20: #333; /* System-level semantic surfaces & auxiliary colors */ --nyc-sys-color-surface-warning: var(--nyc-ref-color-yellow-100); --nyc-sys-color-surface-error: var(--nyc-ref-color-red-100); --nyc-sys-color-surface-success: var(--nyc-ref-color-green-100); --nyc-sys-color-surface-info: var(--nyc-ref-color-blue-100); --nyc-sys-color-auxiliary-warning: var(--nyc-ref-color-orange-70); --nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-50); --nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-50); --nyc-sys-color-auxiliary-info: var(--nyc-ref-color-blue-70); --nyc-sys-radius-xs: 8px; /* ── Border Colors ─────────────────────────────────────────────────── */ --border-light: #DDDDDD; /* Gray 80 */ --border-medium: #CCCCCC; /* Gray 70 */ --border-dark: #555555; /* Gray 30 */ --border-input: #555555; /* Thicker contrast */ --border-focus: #1B2C8F; /* Navy focus ring — unified interactive blue */ /* ── Typography ────────────────────────────────────────────────────── */ --font-heading: 'Clash Grotesk', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* NYC trims "bold" to 600 everywhere — only the page

stays 700 (restored below). Redefining the token flips all var(--font-weight-bold) usages at once; the 16 literal-700 NYC rules were lowered to 600 alongside. */ --font-weight-bold: 600; /* ── Spacing (aligned to NYC 8px base) ─────────────────────────────── */ --space-sm: 8px; --space-base: 16px; --space-lg: 24px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; /* ── Border Radius — NYC DS uses sharper corners ───────────────────── */ --radius-xs: 2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 8px; /* ── Shadows — NYC DS is flatter ───────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 2px 4px rgba(0,0,0,0.08); --shadow-lg: 0 4px 12px rgba(0,0,0,0.10); --shadow-card: 0 1px 3px rgba(0,0,0,0.05); --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.08); /* ── Reading Measure ───────────────────────────────────────────────── */ --reading-max-width: 860px; /* NYC DS: 860px max line length */ } /* ── Component-Level Overrides ─────────────────────────────────────────── */ /* ── Buttons — NYC DS (designsystem.nyc.gov) ─────────────────────────── */ /* Spec source: DevTools computed values from production nyc.gov buttons. Primary: 40px radius, Blue 40 fill + Blue 40 border, white text. Secondary: 40px radius, white bg, gray (#DDD) border, Blue 40 text. Both: Noto Sans 22px / 600 / line-height 26.4px / padding 12px 32px. */ [data-theme="nyc"] .btn { border-radius: 40px; /* NYC DS: 40px, not full pill */ letter-spacing: normal; /* NYC DS: no letter-spacing */ text-transform: none; font-weight: 600; /* NYC DS: one step bolder than body 500 */ font-size: 22px; /* NYC DS: 22px */ line-height: 1.2; /* NYC DS: 26.4px / 22px */ padding: 12px 32px; /* NYC DS: 12px vertical, 32px horizontal */ transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } [data-theme="nyc"] .btn--primary { box-shadow: none; background: var(--nyc-red); color: #FFFFFF; border: 2px solid var(--nyc-red); } [data-theme="nyc"] .btn--primary:hover { background: var(--nyc-red-hover); border-color: var(--nyc-red-hover); color: #FFFFFF; } [data-theme="nyc"] .btn--primary:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; } /* Secondary: white bg, gray border, Blue 40 text. Hover: background + border stay, only text color shifts darker. Must use explicit color on :visited and :hover to prevent the generic a.btn:visited { color: inherit } from killing blue. */ [data-theme="nyc"] .btn--secondary, [data-theme="nyc"] .btn--secondary:visited, [data-theme="nyc"] .page-body a.btn--secondary, [data-theme="nyc"] .page-body a.btn--secondary:visited { background: #FFFFFF; color: var(--nyc-red); border: 2px solid #DDDDDD; } [data-theme="nyc"] .btn--secondary:hover, [data-theme="nyc"] .page-body a.btn--secondary:hover { background: #FFFFFF; border-color: #DDDDDD; color: var(--nyc-red-hover); } [data-theme="nyc"] .btn--secondary:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; } [data-theme="nyc"] .btn:disabled { background: #EEEEEE; color: #777777; border-color: #CCCCCC; cursor: not-allowed; } /* Medium button — proportionally scaled for card-level actions */ [data-theme="nyc"] .btn--md { font-size: 18px; padding: 8px 24px; } /* ── Icon-only button (NYC DS) ─────────────────────────────────────────── Circular icon-only button using the SECONDARY text-button palette (designsystem.nyc.gov "Icon button"): white fill, gray border, Blue 40 glyph, navy glyph on hover, dotted focus ring, gray disabled. Every icon-only button in the NYC theme uses this one secondary treatment. CC theme has no `.icon-btn` rules, so icon-only buttons there keep their bare-icon look. The doubled class (.icon-btn.icon-btn) raises specificity above the base entry-list `.entry-list__row-action--delete:hover { color: var(--nyc-red) }` rule — which is blue under the NYC theme and loads after this file — so the glyph color isn't hijacked on hover. */ [data-theme="nyc"] .icon-btn.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #FFFFFF; color: var(--nyc-red); /* Blue 40 glyph */ border: 2px solid #DDDDDD; box-shadow: none; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } [data-theme="nyc"] .icon-btn.icon-btn:hover { background: #FFFFFF; border-color: #DDDDDD; color: var(--nyc-red-hover); /* navy glyph on hover */ } [data-theme="nyc"] .icon-btn.icon-btn:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; } [data-theme="nyc"] .icon-btn.icon-btn:disabled { background: #EEEEEE; color: #777777; border-color: #CCCCCC; cursor: not-allowed; } /* The glyph inherits the button's text color (Blue 40 / navy on hover). */ [data-theme="nyc"] .icon-btn .material-symbols-outlined { color: inherit; font-size: 20px; } /* Mobile: slightly smaller, per the spec. */ @media (max-width: 480px) { [data-theme="nyc"] .icon-btn { width: 38px; height: 38px; } } /* ── Doc Upload — gap below the "About the application form" info note ─── The shared .inline-note carries no bottom margin, so on the Doc Upload step the blue info card sat flush against the first requirement card. Give the requirement card that immediately follows the note a top gap matching its own bottom margin. Scoped to NYC (CC stays the control). */ [data-theme="nyc"] .inline-note + .doc-upload__card { margin-top: var(--space-lg); } /* Gap below the in-card guardian note (the amber "Legal guardian?" tip on the relationship requirement) so it doesn't sit flush against the "Pick the document type" radio-group label beneath it. */ [data-theme="nyc"] .doc-upload__card .inline-note { margin-bottom: var(--space-xl); } /* Income — give the amber "different amounts" tip room above it. The base collapses both the radios' bottom margin (§5 reveal rule) and the note's top margin to 0, leaving it flush against "No". Restore a clear gap on the note itself (more specific than income.css's margin-top:0, and the reveal rule only zeroes the group, not the note). */ [data-theme="nyc"] .income-amounts-vary .inline-note { margin-top: var(--space-base); } /* Income total — NYC grey card: drop the flat border, use the 8px radius + soft shadow that every other NYC container uses (no flat corners / borders in NYC). Grey fill stays. */ [data-theme="nyc"] .income-info__total { border: none; border-radius: var(--nyc-sys-radius-xs); box-shadow: 0 0 8px 1px rgba(0, 0, 0, .15); } /* ── Headings — NYC DS tighter line-height ───────────────────────────── */ /* Noto Sans bold at large sizes needs tighter leading than the base theme's 1.7 body line-height. Most component titles are
s with heading font (not tags), so we target both h-tags AND the common __title classes to ensure consistent tight leading. */ [data-theme="nyc"] h1, [data-theme="nyc"] h2 { line-height: 1.15; } /* Only the page

keeps the full 700 weight; the --font-weight-bold token is 600 in NYC, so everything else (h2–h6, titles, buttons, labels) renders at 600. Literal 700 so the token swap can't pull it back down. */ [data-theme="nyc"] h1 { font-weight: 600; } [data-theme="nyc"] h3, [data-theme="nyc"] h4, [data-theme="nyc"] h5, [data-theme="nyc"] h6 { line-height: 1.2; } /* Component title classes — these use font-heading but are
s, so the h-tag rules above don't reach them. */ [data-theme="nyc"] .cta-card__title, [data-theme="nyc"] .dash-block__title, [data-theme="nyc"] .dash-callout__title, [data-theme="nyc"] .card__title, [data-theme="nyc"] .panel__title, [data-theme="nyc"] .prompt-card__title, [data-theme="nyc"] .modal__title, [data-theme="nyc"] .status-banner__title, [data-theme="nyc"] .confirm-card__title, [data-theme="nyc"] .welcome-section__title, [data-theme="nyc"] .page-intro__title, [data-theme="nyc"] .choice-card__title, [data-theme="nyc"] .consent-affirm__title, [data-theme="nyc"] .journey__title, [data-theme="nyc"] .progress-card__title, [data-theme="nyc"] .recap__title, [data-theme="nyc"] .priority-tiers__title, [data-theme="nyc"] .program-compare__title, [data-theme="nyc"] .elig-check__title, [data-theme="nyc"] .voucher-display-card__title, [data-theme="nyc"] .dash-block--deadline-hero__title { line-height: 1.2; } /* ============================================================================ PAGE-LEVEL STRUCTURAL OVERRIDES — NYC Digital Design System These rules reshape the prototype's global page anatomy when the NYC theme is active. The production nyc.gov uses: 1. "Official website" banner — thin expandable strip above everything 2. Global header — solid black, NYC logo + nav + Search + Language 3. Breadcrumb bar — clean neutral (not pink), with back-chevron pattern 4. Content area — flat white, no gradient 5. Footer — black background, 3-column link grid ============================================================================ */ /* ── 1. Official Website Banner ──────────────────────────────────────── */ /* Always in the DOM; hidden by default, shown only on NYC theme. Production nyc.gov: dark strip, white text, left-aligned with bar below. */ .nyc-official-banner { display: none; } [data-theme="nyc"] .nyc-official-banner { display: block; background: #000000; border-bottom: 1px solid #333333; font-family: var(--font-body); font-size: 14px; color: #FFFFFF; } /* Trigger button — uses same max-width + auto-margin centering as nyc-bar__inner so "Official website…" left-aligns with the NYC logo. */ [data-theme="nyc"] .nyc-official-banner__trigger { display: flex; align-items: center; gap: 6px; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 8px var(--space-3xl); max-width: var(--content-max-width); margin: 0 auto; width: 100%; text-align: left; } [data-theme="nyc"] .nyc-official-banner__link { color: #FFFFFF; text-decoration: underline; font-weight: 500; } [data-theme="nyc"] .nyc-official-banner__chevron { font-size: 12px; margin-left: 2px; transition: transform 200ms ease; } [data-theme="nyc"] .nyc-official-banner__trigger[aria-expanded="true"] .nyc-official-banner__chevron { transform: rotate(180deg); } /* Expandable panel — slightly lighter dark, same centering as trigger */ [data-theme="nyc"] .nyc-official-banner__panel { background: #2B2B2B; color: #E0E0E0; border-top: 1px solid #444; } [data-theme="nyc"] .nyc-official-banner__panel-inner { display: flex; gap: 48px; padding: 20px var(--space-3xl); max-width: var(--content-max-width); margin: 0 auto; } [data-theme="nyc"] .nyc-official-banner__col { flex: 1; } [data-theme="nyc"] .nyc-official-banner__col strong { display: block; color: #FFFFFF; font-family: var(--font-heading); font-size: 15px; font-weight: 600; margin-bottom: 6px; } [data-theme="nyc"] .nyc-official-banner__col p { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: #CCCCCC; } /* ── 2. Global Header (NYC Bar) ──────────────────────────────────────── */ [data-theme="nyc"] .nyc-bar { background: #000000; } [data-theme="nyc"] .nyc-bar__inner { padding: 0 var(--space-3xl); min-height: 64px; align-items: stretch; } /* Left group: logo + nav links */ [data-theme="nyc"] .nyc-bar__left { display: flex; align-items: center; gap: 40px; } /* NYC SVG logo — production uses the white blocky wordmark */ [data-theme="nyc"] .nyc-bar__logo-svg { display: block; height: 32px; width: auto; } [data-theme="nyc"] .nyc-bar__logo { display: flex; align-items: center; line-height: 1; } /* Primary nav links — white on black, matching production nyc.gov. Hover shows dark-gray bg with rounded top + thick white bottom border. */ [data-theme="nyc"] .nyc-bar__nav { display: flex; align-items: stretch; align-self: stretch; gap: 0; } [data-theme="nyc"] .nyc-bar__nav-link { position: relative; isolation: isolate; color: #FFFFFF; font-family: var(--font-body); font-size: 18px; font-weight: 600; text-decoration: none; padding: 10px 18px 0 18px; border-bottom: 10px solid transparent; transition: border-color 400ms ease; display: flex; align-items: center; } [data-theme="nyc"] .nyc-bar__nav-link::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; bottom: 0; border-radius: 8px 8px 0 0; background: transparent; transition: background 400ms ease; z-index: -1; } [data-theme="nyc"] .nyc-bar__nav-link:hover::before { background: #333333; } [data-theme="nyc"] .nyc-bar__nav-link:hover { border-bottom-color: #FFFFFF; text-decoration: none; color: #FFFFFF; } /* Search button — solid white pill, black text + icon, per production. Icon and font are large but horizontal padding is tight. */ [data-theme="nyc"] .nyc-bar__search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: none; border-radius: 100px; color: #000000; font-family: var(--font-ui); font-size: 18px; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: background 150ms ease; } [data-theme="nyc"] .nyc-bar__search:hover { background: #E6E6E6; } [data-theme="nyc"] .nyc-bar__search-icon { font-size: 22px; color: #000000; } /* Right section: wider gap between Search and lang button */ [data-theme="nyc"] .nyc-bar__right { gap: 24px; align-items: center; } /* CC theme: text-based logo (preserved for default theme) */ [data-theme="nyc"] .nyc-bar__logo-nyc { font-family: var(--font-heading); font-weight: 600; font-size: 24px; padding: 2px 6px; letter-spacing: 0.06em; } [data-theme="nyc"] .nyc-bar__tagline { font-family: var(--font-body); font-size: 14px; font-weight: 400; } /* Language button — NYC DS gradient icon + gradient text (no pill border). Uses --font-ui token. Positioned to right-align with user-nav below. */ [data-theme="nyc"] .nyc-bar__lang { font-family: var(--font-ui); border: none; border-radius: 0; padding: 4px 0; font-size: 16px; gap: 8px; background: none; } [data-theme="nyc"] .nyc-bar__lang:hover { opacity: 0.85; } /* Gradient text on the language label */ [data-theme="nyc"] .nyc-bar__lang-label { background: linear-gradient(135deg, #6DA1FF 0%, #FFA049 40%, #BA63FF 70%, #6FBAFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: var(--font-ui); font-weight: 600; font-size: 18px; } /* Hide default caret in NYC theme */ [data-theme="nyc"] .nyc-bar__lang-caret { display: none; } /* Gradient icon — sized to match production */ [data-theme="nyc"] .nyc-lang-icon { display: inline-block; vertical-align: middle; width: 30px; height: 30px; } /* ── 3. Secondary Brand Bar (Child Care) ─────────────────────────────── */ /* NYC DS brand architecture: secondary brand bar sits below the primary NYC bar. Background: soft periwinkle (#c4bdff). All text/links use the default link color so they read as interactive on the light bar. Font: same size as primary nav (18px) but one step lighter (600). */ [data-theme="nyc"] .page-header { background: #F0EFF8; border-bottom: none; } [data-theme="nyc"] .page-header__inner { padding: 12px var(--space-3xl); } /* Breadcrumb: brand link color (#0029F7), scoped to the page-header bar */ [data-theme="nyc"] .page-header .breadcrumb { font-family: var(--font-body); font-size: 18px; font-weight: 600; } [data-theme="nyc"] .page-header .breadcrumb a { color: #1B2C8F; text-decoration: none; } [data-theme="nyc"] .page-header .breadcrumb a:hover { color: #1B2C8F; text-decoration: underline; } [data-theme="nyc"] .page-header .breadcrumb a:visited { color: #1B2C8F; } [data-theme="nyc"] .page-header .breadcrumb__separator { color: #1B2C8F; } [data-theme="nyc"] .page-header .breadcrumb__current { color: #1B2C8F; font-weight: 600; } /* User nav — brand link color (#0029F7), scoped to the page-header bar */ [data-theme="nyc"] .page-header .user-nav a { color: #1B2C8F; font-family: var(--font-body); font-size: 18px; font-weight: 600; text-decoration: none; } [data-theme="nyc"] .page-header .user-nav a:hover { color: #1B2C8F; text-decoration: underline; } [data-theme="nyc"] .page-header .user-nav__profile { font-family: var(--font-body); color: #1B2C8F; font-size: 16px; font-weight: 600; } /* All icons and text inside page-header use the brand link color */ [data-theme="nyc"] .page-header .user-nav__icon, [data-theme="nyc"] .page-header .user-nav__icon .material-symbols-outlined, [data-theme="nyc"] .page-header .notif-bell, [data-theme="nyc"] .page-header .notif-bell .material-symbols-outlined, [data-theme="nyc"] .page-header .nav-drawer-trigger, [data-theme="nyc"] .page-header .nav-drawer-trigger .material-symbols-outlined { color: #1B2C8F; } /* Hover states on brand bar — subtle tint, keep link color */ [data-theme="nyc"] .page-header .notif-bell:hover { background: rgba(27, 44, 143, 0.12); color: #1B2C8F; } [data-theme="nyc"] .page-header .notif-bell:hover .material-symbols-outlined { color: #1B2C8F; } /* Increase bell + profile icon size ~25% (22→28px). renderIcon() sets font-size inline, so !important is needed. */ [data-theme="nyc"] .page-header .notif-bell .material-symbols-outlined, [data-theme="nyc"] .page-header .user-nav__icon .material-symbols-outlined { font-size: 26px !important; } /* Brand name — first breadcrumb item is the product name, 2 sizes bigger. On the homepage it's a , on deeper pages it's an . */ [data-theme="nyc"] .breadcrumb > :first-child { font-size: 22px; font-weight: 600; } /* ── 4. Content Area ─────────────────────────────────────────────────── */ /* Warm beige-to-white gradient adopted from the production nyc.gov */ [data-theme="nyc"] .page-body { background: var(--page-gradient); background-attachment: fixed; } /* ── Hero Banner (middle column only) ────────────────────────────────── */ /* A gradient image banner at the top of the center content column. Page titles and greeting text render on top in white. - Landing page: .state-greeting is the first child (overlays banner) - Other pages: h2 is the first child (overlays banner) */ [data-theme="nyc"] .layout-dashboard__main { position: relative; padding-top: 120px; display: flex; flex-direction: column; } /* Suppress hero banner on redirect pages (Documents, MyCity Dashboard) where the first child is a .card, not a heading or greeting. */ [data-theme="nyc"] .layout-dashboard__main:has(> .card:first-child) { padding-top: 0; } [data-theme="nyc"] .layout-dashboard__main:has(> .card:first-child)::before { display: none; } [data-theme="nyc"] .layout-dashboard__main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: url('../images/hero-home.png') center / cover no-repeat; border-radius: var(--radius-lg); z-index: 0; } /* Per-page hero banner images */ [data-theme="nyc"] .layout-dashboard__main[data-page="home"]::before { background-image: url('../images/hero-home.png'); } [data-theme="nyc"] .layout-dashboard__main[data-page="applications"]::before { background-image: url('../images/hero-applications.png'); } [data-theme="nyc"] .layout-dashboard__main[data-page="profile"]::before { background-image: url('../images/hero-profile.png'); } /* Voucher download keeps the warm case banner; legacy 'case'/'update-case' ids stay on it too. */ [data-theme="nyc"] .layout-dashboard__main[data-page="voucher"]::before, [data-theme="nyc"] .layout-dashboard__main[data-page="case"]::before, [data-theme="nyc"] .layout-dashboard__main[data-page="update-case"]::before { background-image: url('../images/hero-case.png'); } /* Recertification reuses the cool pastel NYC banner so it never reads the same as the warm-gold voucher-download page. */ [data-theme="nyc"] .layout-dashboard__main[data-page="recertify"]::before { background-image: url('../images/hero-banner-nyc.png'); } [data-theme="nyc"] .layout-dashboard__main[data-page="programs"]::before, [data-theme="nyc"] .layout-dashboard__main[data-page="priority"]::before { background-image: url('../images/hero-programs.png'); } /* Greeting on landing page — match h2 font for consistency */ [data-theme="nyc"] .layout-dashboard__main > .state-greeting { position: relative; z-index: 1; margin-top: -120px; padding: 0 var(--space-xl); min-height: 120px; display: flex; align-items: center; color: var(--text-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); } /* Page title h2 as first child — other pages (Applications, Profile, etc.) */ [data-theme="nyc"] .layout-dashboard__main > h2:first-child { position: relative; z-index: 1; margin-top: -120px; padding: 0 var(--space-xl); min-height: 120px; display: flex; align-items: center; color: var(--text-primary); } /* ── Link States (NYC DS spec) ───────────────────────────────────────── */ /* Per NYC DS: body content links are Blue 40, underlined, with purple visited state. Scoped to known prose containers so underlines don't bleed into nav chrome, buttons, card CTAs, or icon-bearing links. Components with their own link patterns (sidebar-nav, CTA buttons, stat-card CTAs, etc.) get explicit overrides below so they never inherit the prose underline. */ /* Prose content links — underline per NYC DS */ [data-theme="nyc"] .page-body .dash-block__body a, [data-theme="nyc"] .page-body .dash-block__intro a, [data-theme="nyc"] .page-body .dash-block__footer a, [data-theme="nyc"] .page-body .status-banner__body a, [data-theme="nyc"] .page-body .status-banner__detail a, [data-theme="nyc"] .page-body .panel__body a, [data-theme="nyc"] .page-body .panel__bullets a, [data-theme="nyc"] .page-body .cta-card__body a, [data-theme="nyc"] .page-body .inline-note__body a, [data-theme="nyc"] .page-body .dash-callout__body a, [data-theme="nyc"] .page-body .modal__body a, [data-theme="nyc"] .page-body .welcome-section__lede a, [data-theme="nyc"] .page-body .confirm-card__action-row-text a, [data-theme="nyc"] .page-body .state-greeting a, [data-theme="nyc"] .page-body .page-intro__body a { color: var(--text-link); text-decoration: underline; } [data-theme="nyc"] .page-body .dash-block__body a:visited, [data-theme="nyc"] .page-body .status-banner__body a:visited, [data-theme="nyc"] .page-body .status-banner__detail a:visited, [data-theme="nyc"] .page-body .panel__body a:visited, [data-theme="nyc"] .page-body .cta-card__body a:visited, [data-theme="nyc"] .page-body .inline-note__body a:visited { color: var(--text-link-visited); } [data-theme="nyc"] .page-body .dash-block__body a:hover, [data-theme="nyc"] .page-body .status-banner__body a:hover, [data-theme="nyc"] .page-body .panel__body a:hover, [data-theme="nyc"] .page-body .cta-card__body a:hover { color: var(--text-link-hover); text-decoration: underline; } /* Buttons rendered as tags — explicit specificity match so they never inherit prose underline regardless of nesting. IMPORTANT: do NOT set color here — each variant (.btn--primary, .btn--secondary) owns its color in the component overrides above. A generic 'color: inherit' here would kill secondary's Blue 40. */ [data-theme="nyc"] .page-body a.btn, [data-theme="nyc"] .page-body a.btn:visited, [data-theme="nyc"] .page-body a.btn:hover { text-decoration: none; } [data-theme="nyc"] .btn, [data-theme="nyc"] .btn:visited { text-decoration: none; } /* Source / attribution links — blue + underlined like all content links */ [data-theme="nyc"] .dash-source, [data-theme="nyc"] .dash-source:visited { color: var(--text-link); text-decoration: underline; } [data-theme="nyc"] .dash-source:hover { color: var(--text-link-hover); text-decoration: underline; } /* Stat card CTAs — blue + underlined */ [data-theme="nyc"] .stat-card__cta, [data-theme="nyc"] .stat-card__cta:visited { color: var(--text-link); text-decoration: underline; font-weight: 600; } [data-theme="nyc"] .stat-card__cta:hover { color: var(--text-link-hover); text-decoration: underline; } /* Confirm card source links — blue, underline on the LABEL span only. The anchor is display:inline-flex (label + icon as flex items); underlining the anchor would draw the line across the icon. Underline the label span so the external-link / edit icon stays clean. */ [data-theme="nyc"] .confirm-card__source-link, [data-theme="nyc"] .confirm-card__source-link:visited { color: var(--text-link); text-decoration: none; } [data-theme="nyc"] .confirm-card__source-link:hover { color: var(--text-link-hover); text-decoration: none; } [data-theme="nyc"] .confirm-card__source-link .confirm-card__source-label { text-decoration: underline; } /* Nav drawer links (mobile) — blue + label-only underline */ [data-theme="nyc"] .nav-drawer__link, [data-theme="nyc"] .nav-drawer__link:visited { color: var(--text-link); text-decoration: none; } [data-theme="nyc"] .nav-drawer__link .nav-drawer__label { text-decoration: underline; } [data-theme="nyc"] .nav-drawer__link:hover { color: var(--text-link-hover); } /* User dropdown links — blue, label-only underline (icon protected) */ [data-theme="nyc"] .user-dropdown__item, [data-theme="nyc"] .user-dropdown__item:visited { color: var(--nyc-red); text-decoration: none; } [data-theme="nyc"] .user-dropdown__item .user-dropdown__item-label { text-decoration: underline; } [data-theme="nyc"] .user-dropdown__item:hover { color: var(--nyc-red); text-decoration: none; } [data-theme="nyc"] .user-dropdown__item:hover .user-dropdown__item-label { text-decoration: underline; } /* External link icon in dropdown — blue to match item text */ [data-theme="nyc"] .user-dropdown__ext { color: var(--nyc-red); opacity: 1; } /* ── NYC Bar links — white on black, no visited/underline ────────────── */ [data-theme="nyc"] .nyc-bar a, [data-theme="nyc"] .nyc-bar a:visited, [data-theme="nyc"] .nyc-bar a:hover { color: #FFFFFF; text-decoration: none; } /* ── Foundational: icons inside links/buttons never show underlines ──── */ /* Material Symbols icons are text ligatures — the browser underlines them like any other text when a parent sets text-decoration: underline. display: inline-flex creates an atomic inline box that text-decoration from ancestors cannot propagate into. This is a global defense — every icon inside every or