/* ============================================================ DGA Website — "Connected Grid" Enhancement Layer ------------------------------------------------------------ ADDITIVE polish on top of styles.css / design-tokens.css. Theme: DGA's own circuit / connection identity, refined. - Uses ONLY existing brand tokens (navy / orange / blue). - Progressive enhancement: content is ALWAYS visible without JS; motion is gated behind AND prefers-reduced-motion. - Designed to coexist with chrome.js dark-mode / high-contrast / grayscale / readable-font overrides. ============================================================ */ :root { /* Derived accents (kept within the DGA palette) */ --dga-orange-soft: rgba(240, 81, 35, 0.12); --dga-orange-line: rgba(240, 81, 35, 0.55); --dga-navy-2: #2a1f6b; /* matches existing gradient stop */ --dga-indigo: #251d5c; /* Refined multi-layer elevation (Soft-UI evolution) */ --sh-soft: 0 1px 2px rgba(28,22,75,.05), 0 4px 12px rgba(28,22,75,.06); --sh-soft-2: 0 2px 6px rgba(28,22,75,.07), 0 16px 40px rgba(28,22,75,.12); --sh-orange: 0 10px 30px rgba(240,81,35,.22); --ease-out: cubic-bezier(.22, 1, .36, 1); --reveal-dur: .62s; } /* ============================================================ 0. SHARED UTILITY — `.hide` The inline form scripts on several pages (register, complaint, the homepage AI panel, admin) toggle a `.hide` class to show/ hide validation errors, success cards and panels. It was only declared inline on a few pages, so on register/complaint those states were permanently visible. Centralise it here so every page that uses the pattern behaves correctly. ============================================================ */ .hide { display: none !important; } /* ============================================================ 1. SCROLL PROGRESS BAR (top of viewport) ============================================================ */ #dga-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9999; background: linear-gradient(90deg, var(--dga-orange), var(--dga-orange-light)); box-shadow: 0 0 8px rgba(240,81,35,.5); transition: width .08s linear; pointer-events: none; } /* ============================================================ 2. STICKY HEADER — depth on scroll ============================================================ */ header.site.site-header { transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out); } header.site.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(28,22,75,.13); } /* hairline brand accent under the header — a faint circuit rail */ header.site.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--dga-orange-line) 18%, var(--dga-blue) 50%, var(--dga-orange-line) 82%, transparent 100%); opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none; } header.site.site-header.is-scrolled::after { opacity: .65; } /* ============================================================ 3. SCROLL REVEAL Content stays visible if JS never runs. Only when has .js-reveal (set by enhance.js) do we hide-then-reveal. ============================================================ */ html.js-reveal .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); } html.js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* Stagger children inside a revealed group */ html.js-reveal .reveal-group.is-visible > * { animation: dga-rise var(--reveal-dur) var(--ease-out) both; } html.js-reveal .reveal-group.is-visible > *:nth-child(2) { animation-delay: .07s; } html.js-reveal .reveal-group.is-visible > *:nth-child(3) { animation-delay: .14s; } html.js-reveal .reveal-group.is-visible > *:nth-child(4) { animation-delay: .21s; } html.js-reveal .reveal-group.is-visible > *:nth-child(5) { animation-delay: .28s; } html.js-reveal .reveal-group.is-visible > *:nth-child(6) { animation-delay: .35s; } @keyframes dga-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ============================================================ 4. CIRCUIT-TRACE SECTION HEADINGS The signature motif: the orange kicker becomes a node on a circuit rail — echoes the DGA logo traces + seal chevrons. Fully automatic on existing .section-head / .kicker markup. ============================================================ */ .section-head .kicker { display: inline-flex; align-items: center; gap: 10px; } /* leading trace + node for left-aligned kickers */ .section-head .kicker::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, transparent, var(--dga-orange)); border-radius: 2px; flex: 0 0 auto; } /* centered kickers get a symmetric trailing trace (seal-like balance) */ .section-head.center .kicker { justify-content: center; } .section-head.center .kicker::after { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, var(--dga-orange), transparent); border-radius: 2px; flex: 0 0 auto; } /* the node dot sits at the start of the kicker text */ .section-head .kicker::before { position: relative; } /* A reusable, optional decorative connector between sections */ .circuit-divider { --c: var(--dga-orange-line); display: flex; align-items: center; justify-content: center; gap: 0; margin: 4px auto 0; max-width: var(--container); padding: 0 20px; color: var(--dga-orange); } .circuit-divider::before, .circuit-divider::after { content: ""; height: 2px; flex: 1; background: linear-gradient(90deg, transparent, rgba(240,81,35,.35), transparent); } .circuit-divider .node { width: 9px; height: 9px; border-radius: 50%; background: var(--dga-orange); box-shadow: 0 0 0 4px var(--dga-orange-soft); margin: 0 4px; } /* ============================================================ 5. ELEVATION & HOVER POLISH ============================================================ */ .card, .svc, .svc-cat, .life-tile, .form-card, .pcard, .role-tile { box-shadow: var(--sh-soft); } .card, .svc, .svc-cat, .life-tile { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out); } .card:hover, .svc:hover, .svc-cat:hover, .life-tile:hover { box-shadow: var(--sh-soft-2); } /* image cards: smoother, deeper zoom + subtle brightness */ .card .thumb img, .pcard img, .role-tile img { transition: transform .5s var(--ease-out), filter .5s var(--ease-out); } .card:hover .thumb img, .pcard:hover img, .role-tile:hover img { transform: scale(1.06); } /* Quick-service icon bubble: gentle pop + brand glow on hover */ .svc .ico { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); } .svc:hover .ico { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 18px rgba(16,115,184,.28); } /* Tag chips: tiny lift */ .tag { transition: transform .2s var(--ease-out); } .card:hover .tag { transform: translateX(2px); } /* ============================================================ 6. BUTTON & LINK MICRO-INTERACTIONS ============================================================ */ .btn { transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), filter .18s var(--ease-out); } .btn-primary { box-shadow: 0 6px 16px rgba(240,81,35,.22); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-orange); } .btn-navy:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,22,75,.28); } .btn-ghost:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .viewmore { transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s; } .viewmore:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,22,75,.28); } /* Footer links: animated underline reveal */ footer .fcol a { position: relative; width: fit-content; } footer .fcol a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: var(--dga-orange-light); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); } footer .fcol a:hover::after { transform: scaleX(1); } /* ============================================================ 7. AURORA DEPTH in navy sections (contrast-safe overlays) Applied to the stats band + ecosystem hub. Pure decoration behind existing content; text contrast is unchanged. ============================================================ */ .stats, .ecosystem-section { position: relative; isolation: isolate; } .stats::before, .ecosystem-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 12% 0%, rgba(16,115,184,.35), transparent 60%), radial-gradient(50% 120% at 92% 100%, rgba(240,81,35,.22), transparent 55%); opacity: .9; pointer-events: none; } /* keep ecosystem image/content above the glow */ .ecosystem-section > .container { position: relative; z-index: 1; } /* Stat numbers: tabular figures so count-up doesn't jitter */ .stats .stat .num { font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* ============================================================ 8. PAGE HERO (interior pages) — subtle circuit texture ============================================================ */ .page-hero { position: relative; overflow: hidden; } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 55%, #000 100%); } .page-hero > .container { position: relative; z-index: 1; } /* ============================================================ 9. BACK-TO-TOP — a circuit "node" button ============================================================ */ #dga-top { position: fixed; left: 24px; bottom: 24px; z-index: 190; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--dga-navy); color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(28,22,75,.32); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background .2s; } #dga-top.is-shown { opacity: 1; transform: none; pointer-events: auto; } #dga-top:hover { background: var(--dga-orange); transform: translateY(-2px); } #dga-top svg { width: 20px; height: 20px; } /* node pulse ring */ #dga-top::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(240,81,35,.5); opacity: 0; } #dga-top.is-shown:hover::before { animation: dga-ping 1.4s var(--ease-out) infinite; } @keyframes dga-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } } /* ============================================================ 10. REFINED FOCUS (keeps a11y strong, looks intentional) ============================================================ */ :focus-visible { outline: 3px solid var(--dga-orange); outline-offset: 3px; border-radius: 6px; } /* ============================================================ 11. RESPONSIVE refinements ============================================================ */ @media (max-width: 768px) { #dga-top { left: 16px; bottom: 16px; width: 42px; height: 42px; } .section-head .kicker::before, .section-head.center .kicker::after { width: 18px; } } /* ============================================================ 12. MOTION SAFETY — honour reduced-motion everywhere. If a user prefers reduced motion, reveal everything instantly and disable decorative animation. ============================================================ */ @media (prefers-reduced-motion: reduce) { html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.js-reveal .reveal-group.is-visible > * { animation: none !important; } #dga-progress { display: none; } #dga-top { transition: opacity .2s linear; } #dga-top.is-shown:hover::before { animation: none; } } /* ============================================================ 13. DARK-MODE harmony (chrome.js adds body.dark-mode) Keep enhancement surfaces consistent with the dark theme. ============================================================ */ body.dark-mode header.site.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.55); } body.dark-mode #dga-top { background: #2a2a2a; } body.dark-mode #dga-top:hover { background: var(--dga-orange); } body.dark-mode .card, body.dark-mode .svc, body.dark-mode .svc-cat, body.dark-mode .life-tile, body.dark-mode .form-card { box-shadow: 0 2px 8px rgba(0,0,0,.4); } /* Dark-mode text contrast — headings & titles default to dark navy in light mode, which is unreadable on the dark canvas. Lift them to a light tone so dark mode also meets the WCAG AA contrast target. */ body.dark-mode .section-head h2, body.dark-mode .card h3, body.dark-mode .svc-cat h3, body.dark-mode .life-tile h3, body.dark-mode .side h3, body.dark-mode .dga-table a.title, body.dark-mode .amount { color: #f3f2f8 !important; } body.dark-mode .svc span { color: #e7e6ef !important; } body.dark-mode .section-head p, body.dark-mode .life-tile p, body.dark-mode .side label, body.dark-mode .form-group label, body.dark-mode .card .meta { color: #b9b7c9 !important; } body.dark-mode .accordion > summary { color: #f3f2f8 !important; } body.dark-mode .side { border-color: #333 !important; } /* Long-form prose pages (about / policy / accessibility) — lift body + headings off the dark canvas so legal/content text stays AA-legible. */ body.dark-mode .about-content, body.dark-mode .policy-content, body.dark-mode .a11y-content { color: #d7d6e2 !important; } body.dark-mode .about-content h2, body.dark-mode .about-content h3, body.dark-mode .policy-content h2, body.dark-mode .policy-content h3, body.dark-mode .a11y-content h2, body.dark-mode .a11y-content h3 { color: #f3f2f8 !important; } /* High-contrast: strip decorative glows so nothing fights the theme */ body.high-contrast #dga-progress, body.high-contrast .stats::before, body.high-contrast .ecosystem-section::before, body.high-contrast .page-hero::after { display: none !important; } body.high-contrast .section-head .kicker::before, body.high-contrast .section-head.center .kicker::after { background: #fff !important; } /* ============================================================ 14. HOMEPAGE SECTION-INTENT POLISH (homepage-scoped classes) Each rule sharpens a section's *purpose*. All additive, token-only, pure-CSS (no markup needed), TH + EN homepages. ============================================================ */ /* HERO — premium circuit rail across the top of the glass card, tying the primary-entry panel to the DGA logo's trace motif. */ .hero .hero-copy { position: relative; } .hero .hero-copy::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, var(--dga-orange), var(--dga-orange-light) 42%, transparent); } /* LIFE-EVENTS — these are the primary task entries ("I want to…"). Give each tile an unmistakable "go" affordance + an icon lift so it reads as an actionable task, not a static card. */ .life-tile { position: relative; } .life-tile .icon { transition: transform .28s var(--ease-out); display: inline-block; } .life-tile:hover .icon { transform: translateY(-3px) scale(1.06); } .life-tile::after { content: "\2192"; /* → */ position: absolute; right: 18px; bottom: 14px; color: var(--dga-orange); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); } .life-tile:hover::after { opacity: 1; transform: translateX(0); } /* ROLE TILES — audience entries should invite the click. Reveal a directional cue beside the title on hover. */ .role-tile .overlay h3 { display: inline-flex; align-items: center; gap: 8px; } .role-tile .overlay h3::after { content: "\2192"; color: var(--dga-orange-light); opacity: 0; transform: translateX(-6px); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); } .role-tile:hover .overlay h3::after { opacity: 1; transform: translateX(0); } /* ECOSYSTEM "Smart Connector" — the thematic heart. Give each link a circuit "connection node", so the list literally reads as nodes on the government data network. */ .eco-btn { position: relative; } .eco-btn::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--dga-orange-light); box-shadow: 0 0 0 4px rgba(255,153,51,.16); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); } .eco-btn:hover::before { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(255,153,51,.24); } /* PROMO STRIP — signal that it scrolls: a soft edge-fade hints at more. */ .promo-strip .container { position: relative; } .promo-strip .container::after { content: ""; position: absolute; top: 0; bottom: 14px; right: 20px; width: 56px; background: linear-gradient(90deg, rgba(250,250,250,0), var(--bg-alt)); pointer-events: none; z-index: 1; } /* STATS — each trust number gets a small orange trace underline, echoing the circuit motif and anchoring the count-up. */ .stats .stat .num { position: relative; display: inline-block; } .stats .stat .num::after { content: ""; display: block; width: 30px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--dga-orange); opacity: .9; } @media (prefers-reduced-motion: reduce) { .life-tile::after, .role-tile .overlay h3::after { transition: none; } } /* ============================================================ 15. MOBILE OVERFLOW GUARDS A CSS grid/flex track defaults to min-width:auto and will NOT shrink below its content's intrinsic size — so a wide child (a data table with min-width, a step rail, a 2-col alert) can blow the whole page wider than the device and force the mobile browser to zoom out. Letting these containers' children shrink makes wide content scroll/wrap INSIDE instead. ============================================================ */ .with-side > * { min-width: 0; } /* procurement/register/complaint */ .table-scroll { max-width: 100%; } /* keep the table scroller in-bounds */ .steps { min-width: 0; } .steps .step { min-width: 0; } /* multi-step rails shrink on narrow screens */