/* ============================================================================= TauDesignWorks — shared design system (base.css) ----------------------------------------------------------------------------- Accessibility-first studio, Gig Harbor WA. Two voice-first products: Iris (warm amber) and Clair (cool indigo). The parent brand contains both: a "spectrum" that runs amber -> rose -> indigo (warm Iris to cool Clair, and light through a prism — a vision company). This file is the connective tissue: one system, product accents swapped via [data-product] on /. Rules that never bend (these ARE the brand): - WCAG AAA text contrast (>=7:1 body) in BOTH themes. - Focus is always visible, never removed. - Color is never the only signal. - prefers-reduced-motion is fully honored. - Body face is Atkinson Hyperlegible — designed for low-vision readers. ============================================================================= */ /* ---------- Fonts (self-hosted, latin) ------------------------------------- */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-regular.woff2') format('woff2'); } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-bold.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-var.woff2') format('woff2-variations'); } /* ---------- Design tokens --------------------------------------------------- */ :root { color-scheme: light; /* Signature spectrum — decorative only (never load-bearing text) */ --spec-warm: #F5A524; /* Iris amber */ --spec-mid: #E0567A; /* prism rose */ --spec-cool: #6366F1; /* Clair indigo */ --spectrum: linear-gradient(90deg, var(--spec-warm) 0%, var(--spec-mid) 52%, var(--spec-cool) 100%); /* Full six-product suite spectrum — decorative only, used on the hub + suite band */ --spectrum-suite: linear-gradient(90deg, #E5964A 0%, #FFB020 18%, #2FA36B 38%, #4CC8DC 58%, #6366F1 78%, #A855B3 100%); /* Gloss · Iris · Vellum · Facet · Clair · Umbra */ /* Parent brand — LIGHT theme (warm paper, violet-ink) */ --bg: #FBFAF7; --bg-tint-a: rgba(99, 102, 241, 0.07); /* indigo ambient glow */ --bg-tint-b: rgba(245, 165, 36, 0.06); /* amber ambient glow */ --surface: #FFFFFF; --surface-2: #F3F1F8; --text: #16141F; /* 18.1:1 on --bg */ --text-muted: #4A4658; /* 8.3:1 on --bg */ --border: #E4E1EC; --border-strong:#CFCADD; --brand: #4B3BC4; /* violet-indigo — interactive/primary */ --brand-hover: #3B2CA6; --brand-text: #4535BE; /* 7.0:1 on --bg — links/eyebrows */ --on-brand: #FFFFFF; --focus: #4B3BC4; --ok: #1F7A4D; /* success (has icon+text too) */ --warn: #9A3412; /* danger/deadline on light */ --shadow-sm: 0 1px 2px rgba(22,20,31,.06), 0 1px 3px rgba(22,20,31,.05); --shadow-md: 0 8px 24px rgba(22,20,31,.09), 0 3px 8px rgba(22,20,31,.06); --shadow-lg: 0 24px 60px rgba(30,25,60,.16), 0 8px 20px rgba(30,25,60,.09); /* Type */ --font-display: 'Bricolage Grotesque', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif; --font-body: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Cascadia Code', Menlo, monospace; --t-eyebrow: .875rem; --t-body: 1.125rem; /* 18px, a11y-forward */ --t-lead: clamp(1.2rem, 1.06rem + .55vw, 1.45rem); --t-h3: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); --t-h2: clamp(1.95rem, 1.42rem + 2.2vw, 2.9rem); --t-h1: clamp(2.55rem, 1.7rem + 3.9vw, 4.35rem); /* Space / shape / motion */ --container: 1140px; --measure: 66ch; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --gap: clamp(1rem, 2.5vw, 1.5rem); --dur: 220ms; --ease: cubic-bezier(.22, .9, .36, 1); } /* Parent brand — DARK theme (violet-ink near-black) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0B0A12; --bg-tint-a: rgba(139, 135, 255, 0.10); --bg-tint-b: rgba(245, 165, 36, 0.07); --surface: #131120; --surface-2: #1C1930; --text: #F4F2FB; /* 17.6:1 on --bg */ --text-muted: #B4AECB; /* 8.4:1 on --bg */ --border: #302B44; --border-strong:#413A5C; --brand: #A99BFF; /* light violet — interactive/primary */ --brand-hover: #C4BAFF; --brand-text: #B7ABFF; /* 8.6:1 on --bg */ --on-brand: #0B0A12; --focus: #A99BFF; --ok: #46D69A; --warn: #FF8B72; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 10px 28px rgba(0,0,0,.55); --shadow-lg: 0 28px 64px rgba(0,0,0,.66); } /* Honor OS dark when the user hasn't chosen (no data-theme="light") */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B0A12; --bg-tint-a: rgba(139,135,255,.10); --bg-tint-b: rgba(245,165,36,.07); --surface: #131120; --surface-2: #1C1930; --text: #F4F2FB; --text-muted: #B4AECB; --border: #302B44; --border-strong: #413A5C; --brand: #A99BFF; --brand-hover: #C4BAFF; --brand-text: #B7ABFF; --on-brand: #0B0A12; --focus: #A99BFF; --ok: #46D69A; --warn: #FF8B72; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 10px 28px rgba(0,0,0,.55); --shadow-lg: 0 28px 64px rgba(0,0,0,.66); } } /* ========================================================================= PRODUCT THEMING — swap the interactive accent, keep every component. Iris = amber (dark-only brand). Clair = indigo. Set via / data-product="clair". ========================================================================= */ :root[data-product="iris"] { --brand: #FFB020; --brand-hover: #FFC24D; --brand-text: #FFC24D; --on-brand: #000000; --focus: #FFB020; --spec-warm: #FFB020; --spec-mid: #FF7A3C; --spec-cool: #FFD37A; --spectrum: linear-gradient(90deg,#FF7A3C 0%, #FFB020 55%, #FFD37A 100%); } :root[data-product="clair"] { /* light-theme values */ --brand: #3730A3; --brand-hover: #2E2885; --brand-text: #362FA0; --on-brand: #FFFFFF; --focus: #3730A3; --spec-warm: #7C6FF0; --spec-mid: #4F46E5; --spec-cool: #3730A3; --spectrum: linear-gradient(90deg,#7C6FF0 0%, #4F46E5 55%, #3730A3 100%); } :root[data-product="clair"][data-theme="dark"], :root[data-product="clair"]:not([data-theme="light"]) { --brand: #A5B4FC; --brand-hover: #C3CDFE; --brand-text: #AEBAFF; --on-brand: #12101C; --focus: #A5B4FC; } @media (prefers-color-scheme: dark) { :root[data-product="clair"]:not([data-theme="light"]) { --brand: #A5B4FC; --brand-hover: #C3CDFE; --brand-text: #AEBAFF; --on-brand: #12101C; --focus: #A5B4FC; } } /* Vellum = ledger green (light + dark, like Clair). The confidence-check green is the product's own signature, so the accent IS that green. AAA-verified: light brand-text 7.5:1, dark brand-text 10.6:1. */ :root[data-product="vellum"] { /* light-theme values */ --brand: #0F6E4B; --brand-hover: #0C5C3E; --brand-text: #0A5E3B; --on-brand: #FFFFFF; --focus: #0F6E4B; --bg-tint-a: rgba(15, 110, 75, 0.07); --bg-tint-b: rgba(79, 201, 141, 0.06); --spec-warm: #4FC98D; --spec-mid: #2FA36B; --spec-cool: #0F6E4B; --spectrum: linear-gradient(90deg,#4FC98D 0%, #2FA36B 55%, #0F6E4B 100%); } :root[data-product="vellum"][data-theme="dark"], :root[data-product="vellum"]:not([data-theme="light"]) { --brand: #4FC98D; --brand-hover: #7BE0B0; --brand-text: #5FD39A; --on-brand: #0B0A12; --focus: #4FC98D; --bg-tint-a: rgba(79, 201, 141, 0.10); --bg-tint-b: rgba(47, 163, 107, 0.06); --spec-warm: #7BE0B0; --spec-mid: #4FC98D; --spec-cool: #2FA36B; --spectrum: linear-gradient(90deg,#7BE0B0 0%, #4FC98D 55%, #2FA36B 100%); } @media (prefers-color-scheme: dark) { :root[data-product="vellum"]:not([data-theme="light"]) { --brand: #4FC98D; --brand-hover: #7BE0B0; --brand-text: #5FD39A; --on-brand: #0B0A12; --focus: #4FC98D; --bg-tint-a: rgba(79, 201, 141, 0.10); --bg-tint-b: rgba(47, 163, 107, 0.06); --spec-warm: #7BE0B0; --spec-mid: #4FC98D; --spec-cool: #2FA36B; --spectrum: linear-gradient(90deg,#7BE0B0 0%, #4FC98D 55%, #2FA36B 100%); } } /* Gloss = copper "a margin note in ink" (light + dark). AAA-verified: light brand-text 7.7:1, dark brand-text 8.7:1; on-brand vs brand 6.84:1 min. */ :root[data-product="gloss"] { /* light-theme values */ --brand: #8A4A12; --brand-hover: #743E0F; --brand-text: #7A420F; --on-brand: #FFFFFF; --focus: #8A4A12; --bg-tint-a: rgba(229, 150, 74, 0.07); --bg-tint-b: rgba(196, 118, 46, 0.05); --spec-warm: #E5964A; --spec-mid: #C4762E; --spec-cool: #8A4A12; --spectrum: linear-gradient(90deg,#E5964A 0%, #C4762E 55%, #8A4A12 100%); } :root[data-product="gloss"][data-theme="dark"], :root[data-product="gloss"]:not([data-theme="light"]) { --brand: #E5964A; --brand-hover: #F2AC60; --brand-text: #E89B54; --on-brand: #0B0A12; --focus: #E5964A; --bg-tint-a: rgba(229, 150, 74, 0.10); --bg-tint-b: rgba(196, 118, 46, 0.06); --spec-warm: #F2AC60; --spec-mid: #E5964A; --spec-cool: #C4762E; --spectrum: linear-gradient(90deg,#F2AC60 0%, #E5964A 55%, #C4762E 100%); } @media (prefers-color-scheme: dark) { :root[data-product="gloss"]:not([data-theme="light"]) { --brand: #E5964A; --brand-hover: #F2AC60; --brand-text: #E89B54; --on-brand: #0B0A12; --focus: #E5964A; --bg-tint-a: rgba(229, 150, 74, 0.10); --bg-tint-b: rgba(196, 118, 46, 0.06); --spec-warm: #F2AC60; --spec-mid: #E5964A; --spec-cool: #C4762E; --spectrum: linear-gradient(90deg,#F2AC60 0%, #E5964A 55%, #C4762E 100%); } } /* Facet = cut-glass cyan (light + dark). AAA-verified: light brand-text 7.7:1, dark brand-text 10.7:1; on-brand vs brand 7.49:1 min. */ :root[data-product="facet"] { /* light-theme values */ --brand: #0B5D6E; --brand-hover: #094C5A; --brand-text: #0A5866; --on-brand: #FFFFFF; --focus: #0B5D6E; --bg-tint-a: rgba(76, 200, 220, 0.07); --bg-tint-b: rgba(30, 147, 168, 0.05); --spec-warm: #4CC8DC; --spec-mid: #1E93A8; --spec-cool: #0B5D6E; --spectrum: linear-gradient(90deg,#4CC8DC 0%, #1E93A8 55%, #0B5D6E 100%); } :root[data-product="facet"][data-theme="dark"], :root[data-product="facet"]:not([data-theme="light"]) { --brand: #4CC8DC; --brand-hover: #7BD9E8; --brand-text: #55CFE0; --on-brand: #0B0A12; --focus: #4CC8DC; --bg-tint-a: rgba(76, 200, 220, 0.10); --bg-tint-b: rgba(30, 147, 168, 0.06); --spec-warm: #7BD9E8; --spec-mid: #4CC8DC; --spec-cool: #1E93A8; --spectrum: linear-gradient(90deg,#7BD9E8 0%, #4CC8DC 55%, #1E93A8 100%); } @media (prefers-color-scheme: dark) { :root[data-product="facet"]:not([data-theme="light"]) { --brand: #4CC8DC; --brand-hover: #7BD9E8; --brand-text: #55CFE0; --on-brand: #0B0A12; --focus: #4CC8DC; --bg-tint-a: rgba(76, 200, 220, 0.10); --bg-tint-b: rgba(30, 147, 168, 0.06); --spec-warm: #7BD9E8; --spec-mid: #4CC8DC; --spec-cool: #1E93A8; --spectrum: linear-gradient(90deg,#7BD9E8 0%, #4CC8DC 55%, #1E93A8 100%); } } /* Umbra = plum/orchid "the shadow" (light + dark). AAA-verified: light brand-text 7.9:1, dark brand-text 8.6:1; on-brand vs brand 7.74:1 min. Its dark surfaces are plum-shifted in product.css — verified there too. */ :root[data-product="umbra"] { /* light-theme values */ --brand: #86288F; --brand-hover: #6E2178; --brand-text: #7E2C7F; --on-brand: #FFFFFF; --focus: #86288F; --bg-tint-a: rgba(217, 152, 224, 0.07); --bg-tint-b: rgba(168, 85, 179, 0.05); --spec-warm: #D998E0; --spec-mid: #A855B3; --spec-cool: #86288F; --spectrum: linear-gradient(90deg,#D998E0 0%, #A855B3 55%, #86288F 100%); } :root[data-product="umbra"][data-theme="dark"], :root[data-product="umbra"]:not([data-theme="light"]) { --brand: #D998E0; --brand-hover: #EAB6F0; --brand-text: #DFA3E8; --on-brand: #0B0A12; --focus: #D998E0; --bg-tint-a: rgba(217, 152, 224, 0.10); --bg-tint-b: rgba(168, 85, 179, 0.06); --spec-warm: #EAB6F0; --spec-mid: #D998E0; --spec-cool: #A855B3; --spectrum: linear-gradient(90deg,#EAB6F0 0%, #D998E0 55%, #A855B3 100%); } @media (prefers-color-scheme: dark) { :root[data-product="umbra"]:not([data-theme="light"]) { --brand: #D998E0; --brand-hover: #EAB6F0; --brand-text: #DFA3E8; --on-brand: #0B0A12; --focus: #D998E0; --bg-tint-a: rgba(217, 152, 224, 0.10); --bg-tint-b: rgba(168, 85, 179, 0.06); --spec-warm: #EAB6F0; --spec-mid: #D998E0; --spec-cool: #A855B3; --spectrum: linear-gradient(90deg,#EAB6F0 0%, #D998E0 55%, #A855B3 100%); } } /* ---------- Reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* beats display:flex/grid on the same element */ html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; background-image: radial-gradient(58ch 42ch at 88% -6%, var(--bg-tint-a), transparent 70%), radial-gradient(48ch 36ch at -6% 8%, var(--bg-tint-b), transparent 70%); background-repeat: no-repeat; background-attachment: fixed; } img, svg, video { max-width: 100%; } svg { display: block; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.032em; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } p { margin: 0 0 1rem; } p { max-width: var(--measure); } strong { font-weight: 700; color: var(--text); } ul, ol { margin: 0; padding: 0; } a { color: var(--brand-text); text-underline-offset: .18em; text-decoration-thickness: .08em; } a:hover { color: var(--brand-hover); } /* ---------- Accessibility primitives --------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } main:focus-visible, section:focus-visible { outline: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--brand); color: var(--on-brand); padding: .8rem 1.2rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 1rem; color: var(--on-brand); } /* ---------- Layout helpers -------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .container.narrow { max-width: 800px; } .section { padding-block: clamp(3.5rem, 8vw, 6.75rem); } .section-head { max-width: var(--measure); margin-bottom: clamp(2rem, 4.5vw, 3.25rem); } .section-lede { font-size: var(--t-lead); color: var(--text-muted); } .section-lede { max-width: 60ch; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: .13em; text-transform: uppercase; color: var(--brand-text); margin: 0 0 .85rem; } .eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--spectrum); } .eyebrow.plain::before { display: none; } /* Signature spectrum hairline — the τ crossbar, echoed as a divider */ .spectrum-rule { height: 3px; border: 0; border-radius: 3px; background: var(--spectrum); opacity: .9; } /* ---------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .85rem 1.5rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; text-decoration: none; cursor: pointer; border: 2px solid transparent; touch-action: manipulation; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn .icon { flex: 0 0 auto; } .btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-text); } .btn-block { width: 100%; } @media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } } /* ---------- Header ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 70px; padding-block: .55rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); } .brand:hover { color: var(--text); } .brand-mark { flex: 0 0 auto; } .brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.01em; line-height: 1; } .brand-word .tau { color: var(--brand-text); } .brand-sub { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text-muted); border-left: 1px solid var(--border-strong); margin-left: .2rem; padding-left: .7rem; line-height: 1; } .main-nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: .2rem; list-style: none; } .nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .85rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 1rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-list a:hover { background: var(--surface-2); color: var(--brand-text); } .nav-list a[aria-current="page"] { color: var(--brand-text); } .nav-list a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%; background: var(--brand); } .nav-toggle { display: none; } /* Apps disclosure — progressive: the markup ships a plain link to the hub's product grid; tdw.js swaps it for a button that opens this menu. Click to open (never hover), Escape closes and restores focus, JS-off keeps the link. */ .nav-apps { position: relative; } .nav-apps-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .85rem; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text); cursor: pointer; touch-action: manipulation; font-family: var(--font-display); font-weight: 500; font-size: 1rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-apps-toggle:hover { background: var(--surface-2); color: var(--brand-text); } .nav-apps-toggle .chev { transition: transform var(--dur) var(--ease); } .nav-apps-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .apps-menu { list-style: none; margin: 0; padding: .5rem; display: grid; gap: .1rem; } .apps-menu a { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 48px; padding: .5rem .8rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .apps-menu a:hover { background: var(--surface-2); color: var(--text); } .apps-menu a:hover .am-name { color: var(--brand-text); } .apps-menu .am-name { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600; } .apps-menu a[aria-current="page"]::after { content: none; } /* not the nav-list dot — ours sits on the name */ .apps-menu a[aria-current="page"] .am-name::after { content: ""; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%; background: var(--brand); } .apps-menu .am-line { font-size: .92rem; color: var(--text-muted); } .apps-menu .am-all { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .35rem; } .apps-menu .am-all a { min-height: 44px; } @media (min-width: 861px) { .apps-menu { /* Anchored right: the Apps item sits at the nav's right end on product pages, and a left-anchored 19.5rem popover clips off-screen there. */ position: absolute; top: calc(100% + .45rem); right: 0; z-index: 80; min-width: 19.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } } @media (max-width: 860px) { .apps-menu { margin: .1rem 0 .35rem .85rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--border); } } .header-tools { display: inline-flex; align-items: center; gap: .5rem; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .4rem .6rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); cursor: pointer; touch-action: manipulation; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { border-color: var(--brand); color: var(--brand-text); } .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-sun { display: none; } :root:not([data-theme="light"]) .icon-moon { display: block; } } /* ---------- Cards ----------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (prefers-reduced-motion: no-preference) { .card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); } } .tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; color: var(--brand-text); background: color-mix(in srgb, var(--brand) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border)); } /* ---------- Waveform (the shared voice signature) --------------------------- */ .waveform { display: flex; align-items: center; justify-content: center; gap: clamp(4px,1.1vw,8px); } .waveform .bar { flex: 1 1 auto; max-width: 12px; min-width: 5px; height: 24%; border-radius: 999px; transform-origin: center; background: var(--spectrum); } .waveform.solid .bar { background: var(--brand); } @media (prefers-reduced-motion: no-preference) { .waveform.is-live .bar { animation: wave 1.6s var(--ease) infinite; } .waveform.is-live .bar:nth-child(3n) { animation-duration: 1.95s; } .waveform.is-live .bar:nth-child(3n+1) { animation-duration: 1.3s; } .waveform.is-live .bar:nth-child(1) { animation-delay: -.9s; } .waveform.is-live .bar:nth-child(2) { animation-delay: -.2s; } .waveform.is-live .bar:nth-child(3) { animation-delay: -1.3s; } .waveform.is-live .bar:nth-child(4) { animation-delay: -.5s; } .waveform.is-live .bar:nth-child(5) { animation-delay: -1.0s; } .waveform.is-live .bar:nth-child(6) { animation-delay: -.35s; } .waveform.is-live .bar:nth-child(7) { animation-delay: -.75s; } .waveform.is-live .bar:nth-child(8) { animation-delay: -1.15s; } .waveform.is-live .bar:nth-child(9) { animation-delay: -.25s; } .waveform.is-live .bar:nth-child(10) { animation-delay: -.85s; } .waveform.is-live .bar:nth-child(11) { animation-delay: -1.45s; } .waveform.is-live .bar:nth-child(12) { animation-delay: -.6s; } .waveform.is-live .bar:nth-child(13) { animation-delay: -1.05s; } .waveform.is-live .bar:nth-child(14) { animation-delay: -.15s; } .waveform.is-live .bar:nth-child(15) { animation-delay: -.95s; } .waveform.is-live .bar:nth-child(16) { animation-delay: -.45s; } .waveform.is-live .bar:nth-child(17) { animation-delay: -1.25s; } .waveform.is-live .bar:nth-child(18) { animation-delay: -.7s; } .waveform.is-live .bar:nth-child(19) { animation-delay: -.3s; } .waveform.is-live .bar:nth-child(20) { animation-delay: -1.1s; } .waveform.is-live .bar:nth-child(21) { animation-delay: -.55s; } } @keyframes wave { 0%,100% { transform: scaleY(.28); opacity: .72; } 50% { transform: scaleY(1); opacity: 1; } } /* ---------- Footer ---------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-top: clamp(2.75rem, 6vw, 4.25rem); margin-top: clamp(2rem,5vw,3.5rem); } .footer-top { position: relative; } .footer-top::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: var(--spectrum); } .footer-inner { display: grid; grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 2.5rem; } .footer-tagline { color: var(--text-muted); max-width: 34ch; margin-top: .85rem; } .footer-col h2 { font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .85rem; } .footer-col ul { list-style: none; display: grid; gap: .1rem; } .footer-col a { display: inline-flex; align-items: center; min-height: 42px; color: var(--text); text-decoration: none; font-weight: 400; } .footer-col a:hover { color: var(--brand-text); text-decoration: underline; } .footer-place { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); margin-top: .35rem; font-size: 1rem; } .footer-base { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1.5rem; border-top: 1px solid var(--border); } .footer-base p { margin: 0; font-size: .98rem; color: var(--text-muted); max-width: none; } .built-with { font-family: var(--font-display); font-weight: 500; display: inline-flex; align-items: center; gap: .45rem; } /* ---------- Scroll reveal (content is visible without JS) ------------------- */ .reveal { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .js-reveal .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } } /* ---------- Responsive ------------------------------------------------------ */ @media (min-width: 768px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } } @media (max-width: 860px) { .brand-sub { display: none; } .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: .4rem .7rem; margin-left: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation; font-family: var(--font-display); font-weight: 600; font-size: .95rem; } .nav-toggle:hover { border-color: var(--brand); color: var(--brand-text); } .main-nav { margin-left: 0; order: 3; } .header-inner { position: relative; flex-wrap: wrap; } .header-tools { margin-left: 0; } .nav-list { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; padding: .35rem 0 .75rem; } html.js .nav-list { position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: .6rem clamp(1.15rem,4vw,2.5rem) 1rem; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); } html:not(.js) .nav-toggle { display: none; } html.js .nav-toggle[aria-expanded="false"] ~ .nav-list { display: none; } .nav-list a { min-height: 48px; padding: .6rem .8rem; font-size: 1.1rem; } .nav-list a[aria-current="page"]::after { margin-left: auto; } } @media (max-width: 420px) { .brand-word { font-size: 1.15rem; } } /* ---------- Forced colors (Windows High Contrast) -------------------------- */ @media (forced-colors: active) { .card, .btn, .theme-toggle, .nav-toggle, .tile-icon, .nav-apps-toggle, .apps-menu { border: 1px solid CanvasText; } .btn-primary { border: 2px solid CanvasText; } .waveform .bar, .spectrum-rule, .eyebrow::before, .footer-top::before, .suite-band::before, .pan-beam { background: CanvasText; } :focus-visible { outline: 3px solid Highlight; } } /* ---------- Global reduced-motion kill switch ------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .waveform .bar { transform: scaleY(.6); opacity: .92; } }