/* ====================================================================================================== File: viridians-jurisdictions.css Path: /assets/css/viridians/viridians-jurisdictions.css Version: v2.2.0 Issued: 2026-03-30 Author: Buktika Webdesk (Binka) Purpose: Viridians Jurisdictions sub-page stylesheet — token consumer only. License: © Buktika, 2026. All rights reserved. Changelog: v2.2.0 (2026-03-30): Viridians globe palette aligned to governed token model. - ADDED Map state variables for inactive, active, hover, and selected country states. - CHANGED Active globe countries now use Viridians purple instead of amber. v2.1.1 (2026-03-28): Remove non-compliant grid section top-padding override. - REMOVED First-child grid section padding-top reset. - FIXED Trigger grid now uses canonical .sdx-card-section top spacing. v2.1.0 (2026-03-27): Map help dialog block removed. Migrated to shared component. - All .page-viridians-jurisdictions .viridians-map-help-dialog* rules removed. - Visual spec now owned by /assets/css/partials/sdx-floating-panel.css. - Load order: sdx-floating-panel.css MUST precede this file in page . - maplibregl-ctrl-help button styles retained in viridians-jurisdictions-map.css (MapLibre control button is page-specific — not part of the shared component). v2.0.0 (2026-03-26): Page flow restructure + help dialog component added. v1.0.1 (2026-03-25): Compliance notice colour rules added (PIL-01 §7, DOC-02 §3.4). v1.0.0 (2026-03-24): SCRATCH REBUILD from v14.0.0. Dependencies: global.css — canonical tokens, .sdx-card-section, .card, .container, .sdx-btn-primary themes.css — [data-theme] alias layer partials/footer.css partials/sdx-floating-panel.css — MUST precede this file viridians-jurisdictions-map.css — map partial (hero image, vignette, MapLibre GL) viridians-jurisdictions-grid.css — trigger card grid ====================================================================================================== */ /* 0) Dependencies — see header above */ /* 1) Page variable binding — PIL-01 §2 (LOCKED) */ .page-viridians-jurisdictions { --page-bg: var(--sdx-color-viridians-bg); --page-primary: var(--sdx-color-purple-deep); --page-secondary: var(--sdx-color-teal-deep); --page-accent: var(--sdx-color-mama-amber); --page-depth: var(--sdx-color-stem-olive); --page-dark-base: var(--sdx-color-viridians-dark-base); --page-dark-surface: var(--sdx-color-viridians-dark-surface); --map-country-inactive-fill: var(--sdx-color-map-inactive-fill); --map-country-inactive-border: color-mix(in srgb, var(--sdx-color-reporters-orange) 16%, var(--page-accent) 55%); --map-country-active-fill: color-mix(in srgb, var(--page-primary) 78%, white); --map-country-active-border: color-mix(in srgb, var(--page-primary) 34%, white); --map-country-hover-ring: color-mix(in srgb, var(--sdx-color-white) 88%, var(--page-primary) 12%); --map-country-hover-halo: color-mix(in srgb, var(--sdx-color-white) 66%, var(--page-primary) 34%); --map-country-selected-ring: color-mix(in srgb, var(--map-country-inactive-border) 74%, white); --map-country-selected-halo: color-mix(in srgb, var(--map-country-inactive-border) 58%, white); --hero-image: none; --hero-vignette-from: color-mix(in srgb, var(--page-primary) 20%, transparent); --hero-vignette-to: color-mix(in srgb, var(--page-primary) 0%, transparent); } /* 2) Base page surfaces */ .page-viridians-jurisdictions { background: var(--page-bg); color: var(--fg); } .page-viridians-jurisdictions main > .container { padding-top: 0; padding-bottom: 0; } /* 3) Hero — none. Map is owned by viridians-jurisdictions-map.css. */ /* none */ /* 4) Typography overrides */ /* none */ /* 5) Sections and alternation */ .page-viridians-jurisdictions .section-title, .page-viridians-jurisdictions .sdx-card-section > h2 { border-bottom-color: color-mix(in srgb, var(--page-primary) 55%, transparent); } /* 6) Cards and tiles */ .page-viridians-jurisdictions .card { border-left-color: var(--page-primary); } /* 7) Buttons and CTAs — PIL-01 §5.1 */ .page-viridians-jurisdictions .sdx-btn-primary { background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; box-shadow: 0 4px 14px color-mix(in srgb, var(--page-primary) 28%, transparent); } .page-viridians-jurisdictions .sdx-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px color-mix(in srgb, var(--page-primary) 36%, transparent), 0 4px 16px color-mix(in srgb, var(--page-secondary) 22%, transparent); } /* No lift inside card. DOC-03 §8.3.3. */ .page-viridians-jurisdictions .card .sdx-btn-primary:hover { transform: none; filter: brightness(1.08); } /* 8) Page modules */ /* ── Promise box (retained — used on other templates) ── */ .page-viridians-jurisdictions .vm-promise-box { margin-top: 1.25rem; padding: 3rem 2.5rem; background: color-mix(in srgb, var(--page-primary) 6%, transparent); border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--page-primary) 30%, transparent); } .page-viridians-jurisdictions .vm-promise-statement { font-size: var(--body); line-height: 1.7; color: var(--muted); margin: 0; font-weight: 500; text-align: center; } /* ── How-to list (retained) ── */ .page-viridians-jurisdictions .vm-how-inner { padding: 2rem; background: color-mix(in srgb, var(--page-primary) 3%, transparent); border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--page-primary) 10%, transparent); } .page-viridians-jurisdictions .vm-how-list { padding: 0; list-style: none; counter-reset: instruction-counter; } .page-viridians-jurisdictions .vm-how-list li { counter-increment: instruction-counter; position: relative; padding-left: 3rem; margin-bottom: 1.5rem; font-size: var(--body); line-height: 1.7; color: var(--muted); } .page-viridians-jurisdictions .vm-how-list li:last-child { margin-bottom: 0; } .page-viridians-jurisdictions .vm-how-list li::before { content: counter(instruction-counter); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--page-primary); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--headline-font); font-size: var(--small); box-shadow: 0 4px 12px color-mix(in srgb, var(--page-primary) 25%, transparent); } /* ── Help accordion (retained) ── */ .page-viridians-jurisdictions .help-more { margin-top: 0.625rem; border: 1px solid color-mix(in srgb, var(--page-primary) 20%, transparent); border-radius: 0.75rem; background: var(--card); box-shadow: 0 4px 16px color-mix(in srgb, var(--page-primary) 10%, transparent); } .page-viridians-jurisdictions .help-more summary { padding: 1.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; font-size: var(--body); font-weight: 600; color: var(--page-primary); list-style: none; transition: background 0.2s ease, color 0.2s ease; } .page-viridians-jurisdictions .help-more summary::-webkit-details-marker { display: none; } .page-viridians-jurisdictions .help-more summary:hover { background: color-mix(in srgb, var(--page-primary) 3%, transparent); color: var(--page-secondary); } .page-viridians-jurisdictions .help-more summary:focus-visible { outline: 2px solid var(--page-primary); outline-offset: 2px; } .page-viridians-jurisdictions .vm-help-icon { flex-shrink: 0; color: var(--page-primary); } .page-viridians-jurisdictions .vm-help-content { padding: 0 1.5rem 1.5rem; border-top: 1px solid color-mix(in srgb, var(--page-primary) 10%, transparent); } .page-viridians-jurisdictions .vm-help-content h4 { font-size: var(--h5); font-weight: 600; color: var(--fg); margin: 1.5rem 0 0.75rem; } .page-viridians-jurisdictions .vm-help-content h4:first-child { margin-top: 1rem; } .page-viridians-jurisdictions .vm-help-list { list-style: none; padding: 0; margin: 0; } .page-viridians-jurisdictions .vm-help-list li { margin-bottom: 0.75rem; font-size: var(--body); line-height: 1.6; color: var(--muted); } .page-viridians-jurisdictions .vm-help-list strong { color: var(--page-primary); font-weight: 600; } .page-viridians-jurisdictions .vm-help-content > p { font-size: var(--body); line-height: 1.6; color: var(--muted); margin: 0.75rem 0 1.5rem; } .page-viridians-jurisdictions .vm-help-footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--page-primary) 10%, transparent); } .page-viridians-jurisdictions .vm-help-link { color: var(--page-primary); text-decoration: none; font-weight: 500; font-size: var(--body); display: inline-flex; align-items: center; transition: color 0.2s ease; } .page-viridians-jurisdictions .vm-help-link:hover { color: var(--page-secondary); text-decoration: underline; } /* ── Compliance notice callout — DOC-03 §16.4 ── */ .page-viridians-jurisdictions .sdx-proof { background: rgba(120, 113, 108, 0.08); border: 1px solid var(--border); padding: 1.25rem; border-radius: 0.5rem; color: var(--fg); margin-top: 1.25rem; } .page-viridians-jurisdictions .sdx-proof a { color: var(--page-primary); font-weight: 500; } .page-viridians-jurisdictions .sdx-proof a:hover { color: var(--page-secondary); text-decoration: underline; } /* 9) Media queries */ @media (max-width: 768px) { .page-viridians-jurisdictions .vm-promise-box { padding: 2rem 1.5rem; } .page-viridians-jurisdictions .vm-how-inner { padding: 1.5rem 1rem; } .page-viridians-jurisdictions .help-more summary { padding: 1.25rem; } } @media (max-width: 480px) { .page-viridians-jurisdictions .help-more summary { font-size: var(--small); } } /* 10) Dark mode — [data-theme="dark"] only. DOC-01 §3.2. @media (prefers-color-scheme) MUST NOT appear here. */ [data-theme="dark"] .page-viridians-jurisdictions { background: var(--page-dark-base); color: var(--fg); } [data-theme="dark"] .page-viridians-jurisdictions .section-title, [data-theme="dark"] .page-viridians-jurisdictions .sdx-card-section > h2 { border-bottom-color: color-mix(in srgb, var(--page-primary) 35%, transparent); } [data-theme="dark"] .page-viridians-jurisdictions .card { border-left-color: color-mix(in srgb, var(--page-primary) 70%, transparent); } [data-theme="dark"] .page-viridians-jurisdictions .vm-promise-box { background: color-mix(in srgb, var(--page-primary) 12%, transparent); border-color: color-mix(in srgb, var(--page-primary) 25%, transparent); } [data-theme="dark"] .page-viridians-jurisdictions .vm-how-inner { background: color-mix(in srgb, var(--page-primary) 8%, transparent); border-color: color-mix(in srgb, var(--page-primary) 18%, transparent); } [data-theme="dark"] .page-viridians-jurisdictions .help-more { background: var(--page-dark-surface); border-color: color-mix(in srgb, var(--page-primary) 30%, transparent); } /* DOC-03 §16.4 canonical dark mode callout. */ [data-theme="dark"] .page-viridians-jurisdictions .sdx-proof { background: rgba(245, 176, 20, 0.07); border-color: rgba(245, 176, 20, 0.18); color: var(--fg); }