/* ============================================================================ DASH public site - site.css ---------------------------------------------------------------------------- The marketing / trust page at dash.org.nz (plans/landing-page.md Section 4). Consumes design/tokens.css (copied verbatim by the build) and tonal.css (generated from the logo assets). This file declares NO colour of its own (tests/site bans hex, rgb(), hsl() and named colours here): every colour, radius, shadow and duration binds a token, and every spacing value binds a --sp-* token or one of the site-scoped --site-* dimensions below. The few raw lengths that remain are geometry, not spacing: the theme glyph's 15/4/1px (copied from design/app-shell.html), 1px hairlines, the em-relative list indent and bullet, the tile grid's 16rem minimum and the 480px phone query. Site-scoped extensions (prefixed --site-) live here, not in tokens.css: the app's six type roles top out at 22px (a dashboard scale), so this surface adds a small fluid display scale in rem/clamp(). They are not product tokens (DESIGN.md Section 8 governs those) and nothing in the app consumes them. Colour pairings are ONLY those already evidenced in design/a11y-audit.md: page text on --colour-bg / --colour-surface, --primary-on on --primary, --primary on --colour-surface, and the chrome pairings on --colour-nav - which hold ONLY because the nav is pinned to the dark ramp (data-theme="dark" on the
, as client/chrome/chrome.css does) with the focus ring re-bound to the mark colour (a11y-audit.md 9.5). Both themes via [data-theme] on ; the theme glyph and the hero mark key on html[data-theme], never on the nav's pin. ========================================================================== */ /* -- Self-hosted brand face (SIL OFL 1.1, see fonts/OFL.txt): ONE variable file per subset (wght 200-800, fvar/gvar present), so 600 for section heads and 800 for the wordmark + display come from the same outlines. Latin-ext carries the macrons. -- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -- Site-scoped scale (fluid, rem-based; see the header comment) -- */ :root { --site-t-display: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --site-t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --site-t-section: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --site-t-sub: 1.125rem; --site-t-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --site-t-small: 0.875rem; --site-lh-prose: 1.6; --site-lh-tight: 1.15; --site-mark-hero: clamp(72px, 10vw, 112px); --site-maxw-hero: 40ch; --site-pillar-mark: 28px; --site-gutter: var(--sp-5); } /* -- Base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--colour-bg); color: var(--colour-text); font-family: var(--font-stack); font-size: var(--site-t-body); line-height: var(--site-lh-prose); padding-inline: var(--site-gutter); } h1, h2, h3 { font-family: var(--font-heading); color: var(--n-800); margin: 0; line-height: var(--site-lh-tight); } h1 { font-size: var(--site-t-display); font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: var(--site-t-section); font-weight: 600; } h3 { font-size: var(--site-t-sub); font-weight: 600; } p { margin: 0; } p + p { margin-top: var(--sp-4); } a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; } a:hover { color: var(--primary-hover); } :focus-visible { outline: none; box-shadow: var(--e-focus); border-radius: var(--r-input); } ul, ol { margin: 0; padding-left: 1.25em; } li + li { margin-top: var(--sp-2); } strong { color: var(--n-700); } svg { display: block; } /* -- Skip link: visually hidden until focused -- */ .skip-link { position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-10)); z-index: var(--z-toast); padding: var(--sp-2) var(--sp-4); background: var(--colour-surface); color: var(--primary); border: 1px solid var(--colour-border-strong); border-radius: var(--r-input); box-shadow: var(--e-2); transition: top var(--dur-fast) var(--ease); } /* the skip link is only ever on screen while focused, so its elevation must COMPOSE with the one focus ring, not replace it (same specificity as the global :focus-visible rule, later in source) */ .skip-link:focus-visible { top: var(--sp-4); box-shadow: var(--e-2), var(--e-focus); } /* -- The signed-out notice (plans/signin-signout-ux.md Section 3): a subtle, dismissible toast revealed by the ?reason reveal script when the app returns a signed-out / expired user to this front door. A calm surface panel at the top of the viewport, both themes (every value binds a token; the 480px width cap and the top offset are geometry). It never traps focus or blocks the page - the homepage still reads as the front door behind it. The dismiss button picks up the global :focus-visible ring and the reduce-motion query below disables the entry animation. -- */ .signout-notice { position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3); max-width: min(92vw, 30rem); padding: var(--sp-3) var(--sp-4); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--r-surface); box-shadow: var(--e-2); font-size: var(--site-t-small); animation: signout-notice-in var(--dur-fast) var(--ease); } .signout-notice[hidden] { display: none; } .signout-notice-text { margin: 0; } .signout-notice-close { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); margin-inline-start: auto; background: transparent; border: 0; border-radius: var(--r-input); color: var(--colour-text-secondary); cursor: pointer; font-size: var(--site-t-lead); line-height: 1; transition: color var(--dur-fast) var(--ease); } .signout-notice-close:hover { color: var(--colour-text); } @keyframes signout-notice-in { from { opacity: 0; transform: translate(-50%, calc(-1 * var(--sp-2))); } to { opacity: 1; transform: translate(-50%, 0); } } /* -- Top bar: the product's PERMANENTLY-DARK nav (app-shell.html section 1; client/chrome/chrome.css). The
carries data-theme="dark", so tokens.css's dark block resolves its aliases to the dark ramp in either page theme (the mark is mint, 8.88:1 on the bar). The one focus ring is a translucent halo tuned for the page surfaces and composites below 3:1 on this near-black bar, so the ring COLOUR is re-bound to the mark colour here - tokens.css re-declares the --e-focus alias in its dark block, which matches this element, so the ring recomputes against it. -- */ .nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); min-height: var(--nav-h); margin-inline: calc(-1 * var(--site-gutter)); padding: var(--sp-2) var(--site-gutter); background: var(--colour-nav); border-bottom: 1px solid var(--colour-divider); color-scheme: dark; --colour-focus-ring: var(--primary); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--primary); text-decoration: none; } .brand-mark svg { height: var(--brand-mark-s); width: auto; } .wordmark { font-family: var(--font-heading); font-weight: 800; font-size: var(--t-heading-size); letter-spacing: 0.01em; color: var(--colour-text-on-dark); } .navlinks { display: inline-flex; align-items: center; gap: var(--sp-1); } .navlink { font-family: var(--font-heading); font-size: var(--t-ui-size); font-weight: 500; color: var(--colour-text-on-dark); text-decoration: none; border-radius: var(--r-input); padding: var(--sp-2) var(--sp-3); min-height: var(--tap-min-aa); transition: background var(--dur-fast) var(--ease); } .navlink:hover { background: var(--colour-nav-hover); color: var(--colour-text-on-dark); } .nav-spacer { flex: 1; } .nav-cluster { display: inline-flex; align-items: center; gap: var(--sp-3); } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-circle); background: transparent; border: 1px solid var(--colour-nav-border); color: var(--colour-text-on-dark); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .iconbtn:hover { background: var(--colour-nav-hover); border-color: var(--colour-text-on-dark); } /* The theme glyph mirrors the product: a moon on a light page (offer dark), a sun on a dark page (offer light) - keyed on the PAGE theme, never on the always-dark nav (app-shell.html). */ .themeglyph { position: relative; width: 15px; height: 15px; border-radius: var(--r-circle); box-shadow: inset -4px -1px 0 0 var(--colour-text-on-dark); } html[data-theme="dark"] .themeglyph { box-shadow: none; } html[data-theme="dark"] .themeglyph::before { content: ""; position: absolute; inset: 4px; border-radius: var(--r-circle); background: var(--colour-text-on-dark); } html[data-theme="dark"] .themeglyph::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-circle); background: radial-gradient(circle 1px at 50% 0, var(--colour-text-on-dark) 99%, transparent 0), radial-gradient(circle 1px at 50% 100%, var(--colour-text-on-dark) 99%, transparent 0), radial-gradient(circle 1px at 0 50%, var(--colour-text-on-dark) 99%, transparent 0), radial-gradient(circle 1px at 100% 50%, var(--colour-text-on-dark) 99%, transparent 0); } /* -- Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-input); font-family: var(--font-heading); font-weight: 600; font-size: var(--site-t-small); text-decoration: none; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn--primary { background: var(--primary); color: var(--primary-on); } .btn--primary:hover { background: var(--primary-hover); color: var(--primary-on); } .btn--secondary { background: transparent; color: var(--primary); border-color: var(--colour-border-strong); } .btn--secondary:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-fill); } .btn--nav { min-height: var(--tap-min-aa); padding-block: var(--sp-1); } /* -- Layout -- */ main { display: block; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); padding-block: var(--sp-10) var(--sp-8); max-width: var(--maxw-content); margin-inline: auto; } .hero-mark svg { height: var(--site-mark-hero); width: auto; margin-inline: auto; } .hero-mark--dark { display: none; } html[data-theme="dark"] .hero-mark--dark { display: block; } html[data-theme="dark"] .hero-mark--light { display: none; } .eyebrow { font-family: var(--font-mono); font-size: var(--t-ui-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-text-secondary); } .lead { font-size: var(--site-t-lead); color: var(--colour-text-secondary); max-width: var(--site-maxw-hero); } /* The letters that spell DASH in the hero title, in the brand token --primary (theme-aware: a deeper shade on the light page, a lighter one on dark). Decorative: the heading still reads its full text for assistive tech, and --primary clears AA against the page at this display size. */ .acr { color: var(--primary); } .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-2); } .hint { font-size: var(--site-t-small); color: var(--colour-text-tertiary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .section { max-width: var(--maxw-prose); margin-inline: auto; padding-block: var(--sp-6) var(--sp-10); } .section > h2 { margin-bottom: var(--sp-5); } .section p, .section li { color: var(--colour-text); } .section .muted { color: var(--colour-text-secondary); } /* -- The four pillars: one compact row, each item the whole mark with ITS bar lit in that bar's tonal colour and the other three ghosted (the build inlines the mark.svg geometry) beside the pillar's name. Position + length within the D are the non-hue channel; the name carries the meaning. No boxes: the row wraps to two-up, then one-up, on narrow screens. -- */ .pillars { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-8); } .pillars li + li { margin-top: 0; } .pillar { display: inline-flex; align-items: center; gap: var(--sp-3); } .pillar-mark svg { height: var(--site-pillar-mark); width: auto; } .pillar-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--site-t-small); color: var(--n-800); white-space: nowrap; } /* -- The caregiver aside -- */ .aside { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--colour-surface-muted); border-left: 4px solid var(--primary); border-radius: var(--r-surface); } .aside h3 { margin-bottom: var(--sp-2); } /* -- Definition-style lists (the protection list, the notice) -- */ .plain { list-style: none; padding: 0; } .plain li { padding-left: var(--sp-5); position: relative; } .plain li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-circle); background: var(--primary); } .contact { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); margin: var(--sp-6) 0 0; } .contact dt { font-family: var(--font-heading); font-weight: 600; font-size: var(--site-t-small); color: var(--colour-text-secondary); } .contact dd { margin: var(--sp-1) 0 0; } /* -- Notice page -- */ .notice { max-width: var(--maxw-prose); margin-inline: auto; padding-block: var(--sp-8); } .notice > h1 { font-size: var(--site-t-section); margin-bottom: var(--sp-2); } .notice h2 { font-size: var(--site-t-sub); margin-top: var(--sp-7); margin-bottom: var(--sp-3); } .notice .meta { font-size: var(--site-t-small); color: var(--colour-text-secondary); } /* -- Footer -- */ .footer { margin-inline: calc(-1 * var(--site-gutter)); padding: var(--sp-6) var(--site-gutter); background: var(--colour-surface-muted); border-top: 1px solid var(--colour-divider); font-size: var(--site-t-small); color: var(--colour-text-secondary); } .footer-inner { max-width: var(--maxw-content); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: center; } .footer .brand { color: var(--primary); } .footer .wordmark { color: var(--n-800); font-size: var(--t-strong-size); } .footer nav { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); } .footer a { color: var(--colour-text-secondary); } .footer a:hover { color: var(--primary); } .footer .fine { flex-basis: 100%; } /* -- Motion: honour the preference (DESIGN.md universal rule 7) -- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* -- Phone width: everything already stacks; tighten the vertical rhythm -- */ @media (max-width: 480px) { .hero { padding-block: var(--sp-8); } .section { padding-block: var(--sp-7); } .actions .btn { flex: 1 1 100%; } }