/* ========================================================================== Sam Studio — bundled stylesheet Auto-generated by concatenating the AETHER core/patterns modules plus this project's own site.css, in their original cascade order, into a single file — replacing ~25 chained @import requests with one. Source modules remain in css/aether/ for reference and future edits; re-run the same concatenation after changing any of them. Google Fonts / Fontshare @import removed from base/_typography.css — moved to + in each page's , loaded in parallel instead of discovered mid-cascade. ========================================================================== */ /* ---- source: css/aether/core/tokens/_variables.css ---- */ /* ========================================================================== AETHER UI — Design Tokens "Building the future while studying the wisdom of the past." Every visual decision in the system traces back to a token defined here. Components never hardcode a color, size, or timing value — they reference a token. That's what makes the system feel like one coherent object instead of a pile of pages that happen to share a stylesheet. ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. COLOR — raw scales Each scale runs 50 (lightest) → 950 (darkest/most saturated). Raw scale tokens are implementation detail; components should consume the SEMANTIC tokens in section 1b, not these directly. The scales exist so semantic tokens have somewhere to point, and so we can add new semantic tokens later without inventing new colors. -------------------------------------------------------------------- */ /* Void — the navy the entire system floats on. 950 is Sam Studio's verified brand navy (matches the logo); every lighter step is a color-mix formula off that one anchor rather than a hand-picked hex, so the whole ladder stays consistent if the anchor ever changes. Never pure #000: true black kills the "depth" the observatory-at- night mood depends on. */ --aether-void-950: #0a1830; --aether-void-900: color-mix(in oklch, var(--aether-void-950) 92%, white 8%); --aether-void-800: color-mix(in oklch, var(--aether-void-950) 84%, white 16%); --aether-void-700: color-mix(in oklch, var(--aether-void-950) 76%, white 24%); --aether-void-600: color-mix(in oklch, var(--aether-void-950) 66%, white 34%); --aether-void-500: color-mix(in oklch, var(--aether-void-950) 55%, white 45%); --aether-void-400: color-mix(in oklch, var(--aether-void-950) 40%, white 60%); --aether-void-300: color-mix(in oklch, var(--aether-void-950) 24%, white 76%); /* Royal blue — technology, intelligence, forward motion */ --aether-blue-950: #0a1550; --aether-blue-900: #101f6e; --aether-blue-800: #162c93; --aether-blue-700: #1d3ab8; --aether-blue-600: #2947d6; --aether-blue-500: #3b5bff; --aether-blue-400: #6480ff; --aether-blue-300: #93a8ff; --aether-blue-200: #c2ceff; --aether-blue-100: #e2e7ff; /* Deep purple — depth, philosophy, the "night sky" half of the mood */ --aether-violet-950: #170b3d; --aether-violet-900: #241357; --aether-violet-800: #351d7c; --aether-violet-700: #4827a3; --aether-violet-600: #5c34c4; --aether-violet-500: #7548e0; --aether-violet-400: #9770ea; --aether-violet-300: #b89bf1; --aether-violet-200: #d8c6f8; /* Gold — wisdom, craftsmanship, the one warm note in a cold palette. Kept antique/muted on purpose: bright yellow-gold reads as "cheap award badge," not "premium." */ --aether-gold-900: #4a3512; --aether-gold-700: #83621f; --aether-gold-600: #a67e2b; --aether-gold-500: #c6a15b; --aether-gold-400: #d8b876; --aether-gold-300: #e8cf9c; --aether-gold-200: #f2e3c2; /* Neutrals — cool, slightly blue-shifted grays so they never fight the navy background the way true-gray (#888) does. */ --aether-gray-950: #0c0f16; --aether-gray-900: #12151f; --aether-gray-800: #1b1f2c; --aether-gray-700: #2a2f40; --aether-gray-600: #3d4358; --aether-gray-500: #5a6178; --aether-gray-400: #7c8299; --aether-gray-300: #a3a9bd; --aether-gray-200: #c7cbdb; --aether-gray-100: #e4e6f0; --aether-gray-50: #f5f6fa; /* -------------------------------------------------------------------- 1b. COLOR — semantic tokens Components and utilities consume ONLY these. If a new component needs a color that isn't here, that's a sign to add a semantic token, not to reach for a raw scale value. -------------------------------------------------------------------- */ /* Surfaces — the canvas, then three numbered elevation tiers. --aether-bg is the page itself (nothing sits "under" it). Every raised surface above that picks one of three tiers by how far off the canvas it sits, not by what component it happens to be: surface-1 first lift off the canvas — page-level cards, panels surface-2 content nested inside a surface-1 — a card inside a card, an active tab panel, a dropdown menu surface-3 the highest resting elevation — modals, popovers, toasts, tooltips: things that float above everything Each tier is exactly one --aether-void-* step lighter than the last, and each tier's hover state is one more step lighter again — a single continuous ladder, not three unrelated decisions. Themes re-tune the whole ladder at once (see _themes.css) rather than touching tiers individually. */ --aether-bg: var(--aether-void-950); --aether-surface-1: var(--aether-void-800); --aether-surface-1-hover: var(--aether-void-700); --aether-surface-2: var(--aether-void-700); --aether-surface-2-hover: var(--aether-void-600); --aether-surface-3: var(--aether-void-600); --aether-surface-3-hover: var(--aether-void-500); --aether-border: var(--aether-void-400); --aether-border-strong: var(--aether-void-300); /* Brand */ --aether-primary: var(--aether-blue-500); --aether-primary-hover: var(--aether-blue-400); --aether-primary-active: var(--aether-blue-600); --aether-secondary: var(--aether-violet-500); --aether-secondary-hover: var(--aether-violet-400); --aether-accent: var(--aether-gold-500); --aether-accent-hover: var(--aether-gold-400); /* Separate from --aether-accent on purpose: accent covers every "gold highlight" use (badges, quote marks, eyebrow labels), while --cta is specifically "the color of the button that makes money." They point to the same value by default, but a theme is free to split them — Commerce does, to make checkout buttons punchier without also making every small gold accent in the UI louder. */ --aether-cta: var(--aether-accent); --aether-cta-hover: var(--aether-accent-hover); /* Text */ --aether-text: var(--aether-gray-50); --aether-text-muted: var(--aether-gray-400); --aether-text-faint: var(--aether-gray-600); /* Text-on-color pairings — kept explicit per background rather than computed, so contrast can be checked and guaranteed AA rather than assumed. Themes that remap primary/secondary/accent to a different lightness MUST re-check (and if needed override) these three. */ --aether-text-on-primary: var(--aether-gray-50); --aether-text-on-secondary: var(--aether-gray-50); --aether-text-on-accent: var(--aether-void-950); /* Feedback — desaturated enough to sit quietly in a dark UI. Hover states are derived via color-mix() (darken toward black) rather than hand-picked hex, the same formula-over-value approach as everything else in this file — keeps these self-consistent with the rest of the palette instead of being four one-off guesses. */ --aether-success: #4ad9a3; --aether-success-hover: color-mix(in oklch, var(--aether-success) 85%, black 15%); --aether-warning: var(--aether-gold-500); --aether-warning-hover: var(--aether-gold-400); --aether-danger: #ef5b6b; --aether-danger-hover: color-mix(in oklch, var(--aether-danger) 85%, black 15%); --aether-info: var(--aether-blue-400); --aether-info-hover: var(--aether-blue-300); /* Text color for badges/alerts/buttons sitting on a feedback color — same value as --aether-text-on-primary, named separately because the pairing is semantically "on feedback," not "on brand." */ --aether-text-on-feedback: var(--aether-gray-50); /* -------------------------------------------------------------------- 2. TYPOGRAPHY -------------------------------------------------------------------- */ /* Serif for headings: carries the "wisdom / philosophy / editorial" register. Fraunces is used deliberately over the Playfair/Cormorant pairing every "elegant" template reaches for — its soft, slightly wonky optical curves read as considered rather than decorative. */ --aether-font-heading: 'Fraunces', 'Iowan Old Style', 'Georgia', serif; /* Sans for body: Satoshi over Inter on purpose. Inter is the default face of every SaaS/AI landing page in 2026 — using it is the fastest way to look like a template. Satoshi keeps the geometric-clean legibility but has a warmer, more distinct personality. */ --aether-font-body: 'Satoshi', 'General Sans', -apple-system, 'Segoe UI', sans-serif; /* Mono for code / data / technical labels */ --aether-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* Fluid type scale — clamp(min, preferred, max). Preferred term uses vw so text scales smoothly between breakpoints instead of jumping at fixed media-query lines. Ratio ~1.25 (major third) between steps. */ --aether-text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8rem); --aether-text-sm: clamp(0.875rem, 0.83rem + 0.22vw, 0.95rem); --aether-text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); --aether-text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); --aether-text-lg: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem); --aether-text-xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --aether-text-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem); --aether-text-3xl: clamp(2.5rem, 2.05rem + 2.25vw, 3.6rem); --aether-text-4xl: clamp(3.1rem, 2.4rem + 3.5vw, 4.75rem); --aether-text-5xl: clamp(3.8rem, 2.8rem + 5vw, 6.25rem); --aether-leading-tight: 1.1; --aether-leading-snug: 1.3; --aether-leading-normal: 1.6; --aether-leading-relaxed: 1.8; --aether-tracking-tight: -0.03em; --aether-tracking-normal: 0; --aether-tracking-wide: 0.04em; --aether-tracking-widest: 0.15em; --aether-weight-regular: 400; --aether-weight-medium: 500; --aether-weight-semibold: 600; --aether-weight-bold: 700; /* -------------------------------------------------------------------- 3. SPACING — 4px base unit. Referenced by every margin/padding/gap in the system so rhythm stays consistent across components. -------------------------------------------------------------------- */ --aether-space-0: 0; --aether-space-1: 0.25rem; /* 4px */ --aether-space-2: 0.5rem; /* 8px */ --aether-space-3: 0.75rem; /* 12px */ --aether-space-4: 1rem; /* 16px */ --aether-space-5: 1.25rem; /* 20px */ --aether-space-6: 1.5rem; /* 24px */ --aether-space-8: 2rem; /* 32px */ --aether-space-10: 2.5rem; /* 40px */ --aether-space-12: 3rem; /* 48px */ --aether-space-16: 4rem; /* 64px */ --aether-space-20: 5rem; /* 80px */ --aether-space-24: 6rem; /* 96px */ --aether-space-32: 8rem; /* 128px */ --aether-space-40: 10rem; /* 160px */ /* -------------------------------------------------------------------- 4. LAYOUT Tokens only — Phase 2 (the Aether Layout Engine) is what turns these into actual .container/.section classes. Defined now so that work has a settled scale to build against instead of inventing pixel values in-flight. -------------------------------------------------------------------- */ /* Container widths — the max-width ceiling of the outer layout shell. Deliberately its own scale rather than reusing --aether-bp-* — a container is meant to sit narrower than the viewport it lives in, leaving room for a gutter, so the two scales diverge by design even though they rhyme. */ --aether-container-sm: 40rem; /* 640px — narrow content, auth forms */ --aether-container-md: 48rem; /* 768px — article/reading layouts */ --aether-container-lg: 64rem; /* 1024px — standard page content */ --aether-container-xl: 80rem; /* 1280px — dashboards, wide layouts */ --aether-container-2xl: 90rem; /* 1440px — deliberate ceiling: wider than this and body copy starts reading as a spreadsheet, not a premium page */ /* Content widths — optimal reading measure, in ch (character-width) units so it scales with font choice/size rather than viewport. Distinct from container widths: a container bounds a whole layout region, a content width bounds one column of prose inside it. */ --aether-content-width-narrow: 45ch; /* captions, card copy, sidebars */ --aether-content-width-normal: 68ch; /* body copy — the system default */ --aether-content-width-wide: 85ch; /* long-form editorial/blog */ /* Section spacing — vertical rhythm between major page sections. A named *subset* of the spacing scale (not new raw values), so section rhythm always stays a clean multiple of the 4px base unit rather than drifting into arbitrary numbers over time. */ --aether-section-spacing-sm: var(--aether-space-12); /* 48px — tight, dashboard-density */ --aether-section-spacing-md: var(--aether-space-20); /* 80px — default */ --aether-section-spacing-lg: var(--aether-space-32); /* 128px — hero-scale */ --aether-section-spacing-xl: var(--aether-space-40); /* 160px — landing-page hero ceiling */ /* -------------------------------------------------------------------- 5. RADIUS -------------------------------------------------------------------- */ --aether-radius-sm: 6px; --aether-radius-md: 10px; --aether-radius-lg: 16px; --aether-radius-xl: 24px; --aether-radius-2xl: 32px; --aether-radius-full: 999px; /* -------------------------------------------------------------------- 6. SHADOW & GLOW Elevation shadows stay neutral (black-based); glows carry brand color via color-mix() so they always match whatever theme values above resolve to, instead of hardcoded rgba duplicates going stale. -------------------------------------------------------------------- */ --aether-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --aether-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --aether-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --aether-shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.55); /* Glow is a *formula*, not a fixed value: color comes from whatever --aether-primary/secondary/accent currently resolve to, intensity comes from --aether-glow-strength, and spread comes from --aether-glow-blur. Themes override the two knobs (strength/blur) instead of redefining the shadow itself — a "restrained" theme like Business turns the knob down, a "expressive" one like Spiritual turns it up, and both stay perfectly in sync with their theme's colors. Deliberately NOT pre-assembled into a --aether-glow-primary-style composite token here. A custom property that itself contains var() references gets resolved once, at whichever element actually DECLARES it — if nothing overrides that same property further down the tree, descendants inherit the already-resolved result, not a live formula. That's invisible when a theme is applied to (the composite and its ingredients resolve on the same element), but breaks the moment a theme is scoped to a subtree instead: a button inside
would still see the ROOT's glow (wrong strength/blur/color), because nothing on that section redeclared the composite itself. Every consumer below (utilities, button, card) writes the box-shadow formula out directly instead — three real var() reads at the point of use, each resolving against whatever element it's actually on, correct at any nesting depth. */ --aether-glow-strength: 45%; --aether-glow-blur: 40px; /* -------------------------------------------------------------------- 7. MOTION Motion should feel expensive: slower than default browser instincts, eased with curves that decelerate rather than linear or bouncy. Named after intent (what the motion is FOR) rather than shape, so a component author picks "emphasized" for a thing that should draw the eye without needing to know what a cubic-bezier curve does. -------------------------------------------------------------------- */ /* Durations */ --aether-duration-instant: 100ms; /* micro-feedback: checkbox, toggle */ --aether-duration-fast: 150ms; /* hover states, small UI */ --aether-duration-base: 250ms; /* default — most transitions */ --aether-duration-slow: 450ms; /* panels, dropdowns, reveals */ --aether-duration-slower: 800ms; /* hero/scroll reveals */ --aether-duration-slowest: 1200ms; /* full page transitions (Phase 4) */ /* Easings — three registers, each with a job: standard — safe default, symmetric, unremarkable on purpose smooth — gentle ease-in-out for ambient/background motion (floating elements, slow pulses) that should never feel mechanical emphasized — decisive, front-loaded deceleration for anything that should draw the eye (modals opening, hero elements, page transitions). Split into enter/exit variants because "arriving" and "leaving" read differently: entrances decelerate hard, exits accelerate away. */ --aether-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --aether-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); --aether-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --aether-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --aether-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --aether-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* Ready-to-use composites — duration + easing, so most components never touch the raw tokens above directly. */ --aether-transition-fast: var(--aether-duration-fast) var(--aether-ease-standard); --aether-transition-base: var(--aether-duration-base) var(--aether-ease-standard); --aether-transition-slow: var(--aether-duration-slow) var(--aether-ease-smooth); --aether-transition-emphasized: var(--aether-duration-slow) var(--aether-ease-emphasized); /* -------------------------------------------------------------------- 8. GLASS Shared recipe for the frosted-glass surfaces used across cards, nav, and modals — centralized so "glass" looks identical everywhere. -------------------------------------------------------------------- */ --aether-glass-bg: color-mix(in oklch, var(--aether-void-700) 55%, transparent); --aether-glass-border: color-mix(in oklch, var(--aether-gray-50) 12%, transparent); --aether-glass-blur: 20px; /* -------------------------------------------------------------------- 9. Z-INDEX SCALE Named layers prevent the classic "z-index: 9999" arms race. -------------------------------------------------------------------- */ --aether-z-dropdown: 100; --aether-z-sticky: 200; --aether-z-overlay: 300; --aether-z-modal: 400; --aether-z-toast: 500; --aether-z-tooltip: 600; /* -------------------------------------------------------------------- 10. ACCESSIBILITY Tokens consumed by core/base/_accessibility.css. Kept here rather than hardcoded there so themes can adjust them too (e.g. a theme could widen the focus ring without touching the a11y file). -------------------------------------------------------------------- */ --aether-focus-ring-width: 2px; --aether-focus-ring-offset: 3px; --aether-focus-ring-color: var(--aether-primary-hover); /* WCAG 2.5.5 (AAA) minimum — every clickable target should be at least this tall/wide, padding included. */ --aether-tap-target-min: 2.75rem; /* 44px */ } /* -------------------------------------------------------------------- 11. BREAKPOINTS CSS custom properties can't be interpolated inside @media conditions, so these values are documented here as the single source of truth and hand-copied into media queries throughout the system. They're also exposed as unitless custom properties so JavaScript can read them via getComputedStyle() and stay in sync without a second source of truth. --aether-bp-sm : 480px phones (landscape) --aether-bp-md : 768px tablets --aether-bp-lg : 1024px small laptops --aether-bp-xl : 1280px desktops --aether-bp-2xl: 1536px large desktops -------------------------------------------------------------------- */ :root { --aether-bp-sm: 480; --aether-bp-md: 768; --aether-bp-lg: 1024; --aether-bp-xl: 1280; --aether-bp-2xl: 1536; } /* ---- source: css/aether/core/themes/_themes.css ---- */ /* ========================================================================== AETHER UI — Themes One system, four personalities. Components are built against SEMANTIC tokens only (--aether-primary, --aether-surface-1, --aether-glow-strength, etc.) — never against raw color scales or literal values. That indirection is what makes this file possible: a theme block just re-points the semantic tokens, and every component built in later phases re-skins for free, with zero component-level changes. USAGE Apply to for a whole site, or to any subtree for a themed section within an otherwise-default page (custom properties inherit): whole site
... just this section No attribute = the default "Portfolio" identity defined at :root in _variables.css (the moody, expressive, gold-accented observatory mood from Phase 1). It never needs its own [data-theme="portfolio"] block — that IS the root definition. RULE FOR ADDING A NEW THEME Override semantic tokens only. Reach for the existing raw scales (--aether-blue-*, --aether-violet-*, --aether-gold-*, --aether-void-*) and color-mix() between them — never introduce a new hex value here. That constraint is what keeps four "personalities" reading as one family instead of four unrelated sites that happen to share a stylesheet. ========================================================================== */ /* -------------------------------------------------------------------- BUSINESS — Stripe-register: structured, restrained, trustworthy. Same blue, but the violet and gold roles get demoted to "used sparingly" rather than "expressive." Tighter radii read as more engineered; a quieter glow and shallower glass read as more serious. -------------------------------------------------------------------- */ [data-theme='business'] { /* Shifts the whole surface ladder one void-step darker/flatter than Portfolio's — less separation between elevation tiers reads as more structured/enterprise, less "expressive stack of floating panels." */ --aether-surface-1: var(--aether-void-900); --aether-surface-1-hover: var(--aether-void-800); --aether-surface-2: var(--aether-void-800); --aether-surface-2-hover: var(--aether-void-700); --aether-surface-3: var(--aether-void-700); --aether-surface-3-hover: var(--aether-void-600); --aether-secondary: var(--aether-violet-700); --aether-secondary-hover: var(--aether-violet-600); --aether-accent: var(--aether-gold-600); --aether-accent-hover: var(--aether-gold-500); /* Business doesn't want CTA to diverge from accent the way Commerce does — but --aether-cta is still its own token (declared once, at :root, as `var(--aether-accent)`), so it has to be redeclared here explicitly to pick up the accent override above. A custom property that isn't redeclared on this element inherits its value already resolved from whichever ancestor DID declare it — in a scoped `
` usage, that ancestor is :root, not this block, so skipping this line would silently leave CTA buttons on Portfolio's gold instead of Business's. See the note on --aether-glow-strength in _variables.css for the general version of this gotcha. */ --aether-cta: var(--aether-accent); --aether-cta-hover: var(--aether-accent-hover); --aether-radius-lg: 12px; --aether-radius-xl: 16px; --aether-radius-2xl: 20px; --aether-glow-strength: 22%; --aether-glow-blur: 28px; --aether-glass-blur: 12px; } /* -------------------------------------------------------------------- COMMERCE — warmer and more persuasive. Gold is promoted from "quiet premium accent" to "the color that sells" via --aether-cta, radii soften up (friendlier, more huggable product cards), and the glow comes back up from Business's restraint to give hero products and pricing moments some sparkle. -------------------------------------------------------------------- */ [data-theme='commerce'] { --aether-accent: var(--aether-gold-400); --aether-accent-hover: var(--aether-gold-300); --aether-cta: var(--aether-gold-400); --aether-cta-hover: var(--aether-gold-300); --aether-radius-lg: 20px; --aether-radius-xl: 28px; --aether-radius-2xl: 36px; --aether-glow-strength: 32%; --aether-glow-blur: 36px; } /* -------------------------------------------------------------------- SPIRITUAL — introspective, philosophical, slower. Violet moves from "secondary depth color" to leading the palette, the background itself is warmed with a violet undertone (color-mix, not a new hex), radii go fully soft/organic, the glow turns diffuse and ethereal (lower precision, wider blur), and reading rhythm loosens — more line-height, slightly more letter-spacing — for contemplative long-form pages. -------------------------------------------------------------------- */ [data-theme='spiritual'] { --aether-bg: color-mix(in oklch, var(--aether-void-950) 80%, var(--aether-violet-950) 20%); /* Same void-step ladder as Portfolio, with a consistent violet tint mixed through every tier — depth that reads as dusk, not just dark. */ --aether-surface-1: color-mix(in oklch, var(--aether-void-800) 78%, var(--aether-violet-900) 22%); --aether-surface-1-hover: color-mix(in oklch, var(--aether-void-700) 78%, var(--aether-violet-800) 22%); --aether-surface-2: color-mix(in oklch, var(--aether-void-700) 78%, var(--aether-violet-800) 22%); --aether-surface-2-hover: color-mix(in oklch, var(--aether-void-600) 78%, var(--aether-violet-700) 22%); --aether-surface-3: color-mix(in oklch, var(--aether-void-600) 78%, var(--aether-violet-700) 22%); --aether-surface-3-hover: color-mix(in oklch, var(--aether-void-500) 78%, var(--aether-violet-600) 22%); --aether-primary: var(--aether-violet-500); --aether-primary-hover: var(--aether-violet-400); --aether-primary-active: var(--aether-violet-600); --aether-secondary: var(--aether-blue-500); --aether-secondary-hover: var(--aether-blue-400); --aether-accent: var(--aether-gold-400); --aether-accent-hover: var(--aether-gold-300); --aether-cta: var(--aether-gold-400); --aether-cta-hover: var(--aether-gold-300); --aether-radius-lg: 20px; --aether-radius-xl: 32px; --aether-radius-2xl: 40px; --aether-glow-strength: 55%; --aether-glow-blur: 64px; --aether-leading-relaxed: 1.9; --aether-tracking-wide: 0.06em; } /* -------------------------------------------------------------------- DAYLIGHT — the first theme in this file that's actually light, not a tinted variant of the dark base. Every other theme above only retunes surface/accent/radius/glow; this one redefines bg, the surface ladder, text, and border from scratch, because there's no dark ancestor value worth inheriting on a light ground. Two colors do double duty across the whole system, deliberately: Portfolio's void-950 (now the studio's real brand navy — see _variables.css) is BOTH the page background in the dark theme and the primary/cta/text color here. Gold is the reverse: the expressive accent when it's the one warm note on navy, demoted to a quieter accent-only role here since navy itself already provides the strong, high-contrast actionable color on a light ground. Same two colors, swapped roles by which one actually pops on the given background — not two unrelated palettes. Every text pairing below is verified (contrast computed against these literal values, not assumed): ink-on-bg 16.2:1, ink-on-white 17.7:1, muted-on-bg 5.4:1, accent-on-bg 4.6:1. The raw dark-theme gold (--aether-gold-500) fails badly here (2.2:1) — do not use it for text on this theme; it's fine for non-text use (borders, dots). Feedback colors below follow the same "deepen for light" logic but are unverified against real usage — re-check before shipping the first light-theme alert/badge that uses them. Scope this to a subtree, not :root —
— the way every other theme in this file is designed to be used. -------------------------------------------------------------------- */ [data-theme='daylight'] { --aether-bg: #f6f5f1; --aether-surface-1: #ffffff; --aether-surface-1-hover: #fbfaf7; --aether-surface-2: #f0efe9; --aether-surface-2-hover: #e9e7df; --aether-surface-3: #ffffff; --aether-surface-3-hover: #fbfaf7; --aether-border: #dedcd2; --aether-border-strong: #c7c4b6; --aether-text: #0a1830; --aether-text-muted: #5b6478; --aether-text-faint: #8a92a3; /* Navy is the strong actionable color here — it's what pops on a light ground, the same way gold pops on the dark ground. */ --aether-primary: #0a1830; --aether-primary-hover: color-mix(in oklch, #0a1830 85%, white 15%); --aether-primary-active: color-mix(in oklch, #0a1830 92%, black 8%); --aether-secondary: #5c3fa8; --aether-secondary-hover: #6f52ba; /* Deepened from the dark theme's gold-500 specifically so it holds AA as text/label color on this background — see file header. */ --aether-accent: #8a6a2a; --aether-accent-hover: #71531f; --aether-cta: var(--aether-primary); --aether-cta-hover: var(--aether-primary-hover); --aether-text-on-primary: #f6f5f1; --aether-text-on-secondary: #f6f5f1; --aether-text-on-accent: #f6f5f1; --aether-text-on-feedback: #f6f5f1; --aether-success: #2f7a52; --aether-success-hover: color-mix(in oklch, #2f7a52 85%, black 15%); --aether-warning: var(--aether-accent); --aether-warning-hover: var(--aether-accent-hover); --aether-danger: #b8384a; --aether-danger-hover: color-mix(in oklch, #b8384a 85%, black 15%); --aether-info: #3a5fb0; --aether-info-hover: color-mix(in oklch, #3a5fb0 85%, black 15%); --aether-glass-bg: rgba(246, 245, 241, 0.82); --aether-glass-border: rgba(10, 24, 48, 0.1); --aether-glow-strength: 12%; --aether-glow-blur: 32px; } /* -------------------------------------------------------------------- Atelier — Sam Studio's approved portfolio redesign direction ("Atelier Daylight" + "The Seal"). Portfolio-specific, not a general AETHER theme: exact hex values as specified in the approved design brief, not derived from the existing gold/void raw scales the way 'dark'/'daylight' are — this is the Sam Studio *product* asserting its own identity on top of AETHER the *tool*, per that brief's explicit instruction not to let AETHER's prior appearance dictate it. Verified contrast (computed, not assumed): ink #241F1A on paper #F6EFE1 14.27:1 — body text, headings muted #6B5F4C on paper #F6EFE1 5.45:1 — secondary text (passes AA) ember #B2451F on paper #F6EFE1 4.88:1 — accent text/links (passes AA) navy #1B2A4A on paper #F6EFE1 12.43:1 — available as text if needed paper #F6EFE1 on navy #1B2A4A 12.43:1 — the one deliberate dark band gold #D9A441 on paper #F6EFE1 1.97:1 — FAILS AA as text; decorative /large-mark use only (seal, numerals, borders), never small text on paper gold #D9A441 on ink #241F1A 7.26:1 — safe as text on dark bands gold #D9A441 on navy #1B2A4A 6.32:1 — safe as text on the navy band ember #B2451F on ink #241F1A 2.93:1 — FAILS; do not pair these two -------------------------------------------------------------------- */ [data-theme='atelier'] { --aether-bg: #f6efe1; --aether-surface-1: #fbf6ea; --aether-surface-1-hover: #f3ecd9; --aether-surface-2: #fefcf6; --aether-surface-2-hover: #f6efe1; --aether-surface-3: #ffffff; --aether-surface-3-hover: #fbf6ea; --aether-border: #e1d5bd; --aether-border-strong: #cbb894; --aether-text: #241f1a; --aether-text-muted: #6b5f4c; --aether-text-faint: #948564; /* Ink is the strong actionable color here — solid CTA buttons — so ember stays a deliberate, occasional accent rather than "everywhere". */ --aether-primary: #241f1a; --aether-primary-hover: color-mix(in oklch, #241f1a 85%, white 15%); --aether-primary-active: color-mix(in oklch, #241f1a 92%, black 8%); --aether-secondary: #1b2a4a; --aether-secondary-hover: color-mix(in oklch, #1b2a4a 85%, white 15%); --aether-accent: #b2451f; --aether-accent-hover: color-mix(in oklch, #b2451f 80%, black 20%); --aether-cta: var(--aether-primary); --aether-cta-hover: var(--aether-primary-hover); --aether-text-on-primary: #f6efe1; --aether-text-on-secondary: #f6efe1; --aether-text-on-accent: #f6efe1; --aether-text-on-feedback: #f6efe1; --aether-success: #2f7a52; --aether-success-hover: color-mix(in oklch, #2f7a52 85%, black 15%); --aether-warning: #a1791f; --aether-warning-hover: color-mix(in oklch, #a1791f 85%, black 15%); --aether-danger: #a1341f; --aether-danger-hover: color-mix(in oklch, #a1341f 85%, black 15%); --aether-info: #2f4f8a; --aether-info-hover: color-mix(in oklch, #2f4f8a 85%, black 15%); --aether-glass-bg: rgba(246, 239, 225, 0.86); --aether-glass-border: rgba(36, 31, 26, 0.1); --aether-glow-strength: 10%; --aether-glow-blur: 28px; } /* ---- source: css/aether/core/base/_reset.css ---- */ /* ========================================================================== AETHER UI — Reset A modern, opinionated reset. The goal is not "remove all browser styling" — it's "remove the styling decisions that fight the system, keep the ones that preserve accessibility (like focus outlines until we replace them deliberately in base.css)." ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; line-height: var(--aether-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Media elements default to block and never overflow their container */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Form elements inherit typography instead of reverting to the OS default */ input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; cursor: pointer; } /* Headings/paragraphs get their sizing from the type-scale system in typography.css, not from browser defaults */ h1, h2, h3, h4, h5, h6, p { font-size: inherit; font-weight: inherit; text-wrap: balance; } p, li { text-wrap: pretty; } a { color: inherit; text-decoration: none; } ul[role='list'], ol[role='list'] { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* Respect reduced-motion at the reset level, before any component gets a chance to add an animation */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } #root, #__next { isolation: isolate; } /* ---- source: css/aether/core/base/_typography.css ---- */ /* ========================================================================== AETHER UI — Typography Self-hosted (see assets/fonts/) — fetched once from Google Fonts / Fontshare's own CDN response and vendored here with the exact font-weight/style/unicode-range values each service returned, so subsetting behavior is unchanged from the CDN version. No third-party font request, no render-blocking cross-origin dependency. Re-fetch and re-run the same extraction if a font/weight is ever added. ========================================================================== */ @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-1.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-2.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; 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; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-3.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; 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: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-4.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-5.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; 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; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces/fraunces-6.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; 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: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-1.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-2.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-3.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-4.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-5.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-6.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-7.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-8.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-9.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-10.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-11.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; 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; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-12.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; 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: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-13.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-14.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-15.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-16.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-17.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; 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; } @font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono/jetbrains-mono-18.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; 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: 'Satoshi'; src: url('../assets/fonts/satoshi/satoshi-1.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi/satoshi-2.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi/satoshi-3.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../assets/fonts/satoshi/satoshi-4.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------- Base element typography -------------------------------------------------------------------- */ body { font-family: var(--aether-font-body); font-size: var(--aether-text-base); font-weight: var(--aether-weight-regular); color: var(--aether-text); letter-spacing: var(--aether-tracking-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--aether-font-heading); font-weight: var(--aether-weight-semibold); line-height: var(--aether-leading-tight); letter-spacing: var(--aether-tracking-tight); color: var(--aether-text); } h1 { font-size: var(--aether-text-5xl); } h2 { font-size: var(--aether-text-4xl); } h3 { font-size: var(--aether-text-3xl); } h4 { font-size: var(--aether-text-2xl); } h5 { font-size: var(--aether-text-xl); font-weight: var(--aether-weight-medium); } h6 { font-size: var(--aether-text-md); font-weight: var(--aether-weight-medium); } p { max-width: var(--aether-content-width-normal); line-height: var(--aether-leading-relaxed); color: var(--aether-text); } small { font-size: var(--aether-text-sm); color: var(--aether-text-muted); } strong, b { font-weight: var(--aether-weight-semibold); } em, i { font-style: italic; } blockquote { font-family: var(--aether-font-heading); font-size: var(--aether-text-md); font-style: italic; line-height: var(--aether-leading-relaxed); color: var(--aether-text-muted); border-left: 2px solid var(--aether-accent); padding-left: var(--aether-space-6); } code, kbd, samp { font-family: var(--aether-font-mono); font-size: 0.9em; } code { background: var(--aether-surface-2); border: 1px solid var(--aether-border); border-radius: var(--aether-radius-sm); padding: 0.15em 0.45em; color: var(--aether-accent-hover); } pre { font-family: var(--aether-font-mono); background: var(--aether-surface-1); border: 1px solid var(--aether-border); border-radius: var(--aether-radius-md); padding: var(--aether-space-5); overflow-x: auto; line-height: var(--aether-leading-normal); } pre code { background: none; border: none; padding: 0; color: inherit; } a { color: var(--aether-primary-hover); transition: color var(--aether-transition-base); } a:hover { color: var(--aether-accent); } /* -------------------------------------------------------------------- Typographic utility classes These sit here (rather than utilities.css) because they're purely typographic — no layout, spacing, or color-system implications beyond font tokens already defined above. -------------------------------------------------------------------- */ .u-font-heading { font-family: var(--aether-font-heading); } .u-font-body { font-family: var(--aether-font-body); } .u-font-mono { font-family: var(--aether-font-mono); } .u-eyebrow { font-family: var(--aether-font-mono); font-size: var(--aether-text-xs); font-weight: var(--aether-weight-medium); letter-spacing: var(--aether-tracking-widest); text-transform: uppercase; color: var(--aether-accent); } /* Signature "premium" text treatment — a restrained gradient sweep across headline text, used sparingly (hero headlines, not body copy). */ .u-text-gradient { background: linear-gradient( 100deg, var(--aether-text) 20%, var(--aether-primary-hover) 50%, var(--aether-accent) 80% ); background-clip: text; -webkit-background-clip: text; color: transparent; } /* ---- source: css/aether/core/base/_base.css ---- */ /* ========================================================================== AETHER UI — Base Global, non-component styling: the canvas everything else sits on. Reset strips defaults, typography.css handles type, this file handles "what does the page itself look and feel like." ========================================================================== */ html { background: var(--aether-bg); color-scheme: dark; } body { background: var(--aether-bg); /* A faint radial wash of primary/secondary at the far corners is the "observatory at night" cue — depth and curiosity without literally drawing stars. Fixed so it doesn't repeat or shift oddly on scroll. */ background-image: radial-gradient(ellipse 80% 50% at 15% -10%, color-mix(in oklch, var(--aether-primary) 16%, transparent), transparent), radial-gradient(ellipse 60% 40% at 90% 10%, color-mix(in oklch, var(--aether-secondary) 12%, transparent), transparent); background-attachment: fixed; background-repeat: no-repeat; } /* -------------------------------------------------------------------- Selection A themed selection color is a small detail with disproportionate signal — one of the fastest tells that a UI was actually designed rather than defaulted. Focus-ring handling lives in _accessibility.css, not here — it needs to coordinate with prefers-contrast and forced-colors, which are accessibility concerns more than "base look" concerns. -------------------------------------------------------------------- */ ::selection { background: color-mix(in oklch, var(--aether-accent) 35%, transparent); color: var(--aether-text); } /* -------------------------------------------------------------------- Scrollbar Restyled on both engines so the scrollbar doesn't puncture the dark surface with a bright OS-default gray track. -------------------------------------------------------------------- */ html { scrollbar-width: thin; scrollbar-color: var(--aether-border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--aether-border-strong); border-radius: var(--aether-radius-full); border: 2px solid var(--aether-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--aether-text-faint); } /* -------------------------------------------------------------------- Disabled state — shared across any interactive element -------------------------------------------------------------------- */ [disabled], [aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; } /* -------------------------------------------------------------------- Horizontal rule -------------------------------------------------------------------- */ hr { border: none; border-top: 1px solid var(--aether-border); margin-block: var(--aether-space-8); } /* ---- source: css/aether/core/base/_accessibility.css ---- */ /* ========================================================================== AETHER UI — Accessibility Premium and accessible are not in tension — a UI that only "feels expensive" for sighted mouse users with default OS settings isn't actually premium, it's just decorated. This file is the foundation layer's contract: every component built on top of AETHER UI inherits these behaviors for free, so accessibility doesn't have to be re-litigated component by component. ========================================================================== */ /* -------------------------------------------------------------------- Focus — the single most important a11y primitive in the system. Reset.css already sets `:focus { outline: none }` is NOT what we do — instead we replace the default outline with a deliberate one, always visible for keyboard users, always absent for mouse users. Never remove focus outlines without replacing them; that's a WCAG 2.4.7 failure and it's one of the first things a keyboard user will notice. -------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: var(--aether-focus-ring-width) solid var(--aether-focus-ring-color); outline-offset: var(--aether-focus-ring-offset); border-radius: var(--aether-radius-sm); } /* Forced Colors Mode (Windows High Contrast). The browser strips custom backgrounds/gradients/shadows here and substitutes a flat, user-chosen palette — glass panels and glow effects would otherwise vanish into nothing. We don't fight the mode (that defeats its purpose); we just make sure focus and borders survive it using system color keywords. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } .u-glass, .u-surface-1, .u-surface-2, .u-surface-3 { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; } } /* A visible keyboard-focus ring for custom interactive components (divs with role="button", custom selects, etc.) that can't rely on the browser's native :focus-visible heuristics alone. Apply alongside tabindex="0" and appropriate ARIA role. */ .u-focus-ring:focus-visible { outline: var(--aether-focus-ring-width) solid var(--aether-focus-ring-color); outline-offset: var(--aether-focus-ring-offset); } /* -------------------------------------------------------------------- Minimum tap target WCAG 2.5.5 / 2.5.8 — anything clickable should be reachable by an imprecise pointer (touch, tremor, low vision + magnification). Apply to icon buttons, close (×) controls, and other small hit areas that don't get their size from padded text. -------------------------------------------------------------------- */ .u-tap-target { min-width: var(--aether-tap-target-min); min-height: var(--aether-tap-target-min); display: inline-flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------- Reduced motion Reset.css already collapses animation/transition duration to ~0 for prefers-reduced-motion. That's the blunt, universal guarantee. The rules below are for ambient/looping motion (parallax, floating/ pulsing elements, scroll-linked effects) that doesn't just need to be *fast* — they need to not happen at all, because they're the category of motion most likely to trigger vestibular symptoms. Components that add that kind of motion should gate it behind .u-motion-safe rather than relying on the duration override alone. Paused by default, running only once the user's OS has confirmed no preference against motion — deliberately the more cautious direction (most reduced-motion code instead defaults to "on" and only switches off inside a `prefers-reduced-motion: reduce` query, which leaves ambient/looping motion running for the common case of a browser or OS that simply hasn't reported a preference either way). Note this uses the `animation-play-state` longhand, not the `animation` shorthand — the shorthand would reset `animation-name` too, which no later rule (regardless of specificity) can un-set back to a real keyframe name. -------------------------------------------------------------------- */ .u-motion-safe { animation-play-state: paused; } @media (prefers-reduced-motion: no-preference) { .u-motion-safe { animation-play-state: running; } } /* -------------------------------------------------------------------- Reduced transparency Glass surfaces depend on backdrop-filter + a translucent background. Some users disable transparency system-wide (motion sensitivity, low vision, or just readability) — honor it by swapping glass for a flat, fully opaque surface using the same tone. -------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { .u-glass { background: var(--aether-surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* -------------------------------------------------------------------- Increased contrast prefers-contrast: more signals the user needs stronger separation between foreground/background than our default premium-but-subtle borders provide. Strengthen borders and mutes without abandoning the theme's color identity. -------------------------------------------------------------------- */ @media (prefers-contrast: more) { :root { --aether-border: var(--aether-border-strong); --aether-text-muted: var(--aether-gray-300); --aether-glass-bg: var(--aether-surface-2); --aether-glow-strength: 65%; } .u-glass { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* -------------------------------------------------------------------- Keyboard navigation Real keyboard interaction lives with each component that needs it (the navbar's dropdown, the mobile toggle, tooltip :focus-within) — this is the one global rule every component still relies on: [hidden] must genuinely remove content from both the visual canvas and the tab order, a common source of "invisible but still focusable" keyboard traps. -------------------------------------------------------------------- */ [hidden] { display: none !important; } /* ---- source: css/aether/core/utilities/_utilities.css ---- */ /* ========================================================================== AETHER UI — Utilities Single-purpose classes for the cases where a full component is overkill. Spacing/gap utilities below are mechanically generated from the spacing scale in variables.css (see scripts note at bottom) — don't hand-edit the numbers, edit the scale and regenerate instead. ========================================================================== */ /* -------------------------------------------------------------------- Accessibility -------------------------------------------------------------------- */ .u-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; } .u-skip-link { position: absolute; top: -100%; left: var(--aether-space-4); z-index: var(--aether-z-toast); background: var(--aether-primary); color: var(--aether-text); padding: var(--aether-space-2) var(--aether-space-4); border-radius: var(--aether-radius-sm); transition: top var(--aether-transition-base); } .u-skip-link:focus { top: var(--aether-space-4); } /* -------------------------------------------------------------------- Surfaces — glass & elevation The one "glass" recipe, reused everywhere, so every frosted panel in every project looks like it belongs to the same system. -------------------------------------------------------------------- */ .u-glass { background: var(--aether-glass-bg); border: 1px solid var(--aether-glass-border); backdrop-filter: blur(var(--aether-glass-blur)); -webkit-backdrop-filter: blur(var(--aether-glass-blur)); } .u-surface-1 { background: var(--aether-surface-1); border: 1px solid var(--aether-border); } .u-surface-2 { background: var(--aether-surface-2); border: 1px solid var(--aether-border); } .u-surface-3 { background: var(--aether-surface-3); border: 1px solid var(--aether-border); } /* -------------------------------------------------------------------- Glow — the signature "sophisticated observatory" accent. Use on interactive or focal elements only; overuse flattens the effect. -------------------------------------------------------------------- */ .u-glow-primary { box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-primary) var(--aether-glow-strength), transparent); } .u-glow-secondary { box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-secondary) var(--aether-glow-strength), transparent); } .u-glow-accent { box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-accent) var(--aether-glow-strength), transparent); } /* -------------------------------------------------------------------- Shadow (elevation only, no color) -------------------------------------------------------------------- */ .u-shadow-sm { box-shadow: var(--aether-shadow-sm); } .u-shadow-md { box-shadow: var(--aether-shadow-md); } .u-shadow-lg { box-shadow: var(--aether-shadow-lg); } .u-shadow-xl { box-shadow: var(--aether-shadow-xl); } /* -------------------------------------------------------------------- Radius -------------------------------------------------------------------- */ .u-radius-sm { border-radius: var(--aether-radius-sm); } .u-radius-md { border-radius: var(--aether-radius-md); } .u-radius-lg { border-radius: var(--aether-radius-lg); } .u-radius-xl { border-radius: var(--aether-radius-xl); } .u-radius-2xl { border-radius: var(--aether-radius-2xl); } .u-radius-full { border-radius: var(--aether-radius-full); } /* -------------------------------------------------------------------- Text color -------------------------------------------------------------------- */ .u-text { color: var(--aether-text); } .u-text-muted { color: var(--aether-text-muted); } .u-text-faint { color: var(--aether-text-faint); } .u-text-primary { color: var(--aether-primary-hover); } .u-text-secondary { color: var(--aether-secondary-hover); } .u-text-accent { color: var(--aether-accent); } /* -------------------------------------------------------------------- Text alignment / weight -------------------------------------------------------------------- */ .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-weight-regular { font-weight: var(--aether-weight-regular); } .u-weight-medium { font-weight: var(--aether-weight-medium); } .u-weight-semibold { font-weight: var(--aether-weight-semibold); } .u-weight-bold { font-weight: var(--aether-weight-bold); } /* -------------------------------------------------------------------- Display (minimal set — the full layout system arrives in Phase 2) -------------------------------------------------------------------- */ .u-block { display: block; } .u-inline-block { display: inline-block; } .u-flex { display: flex; } .u-inline-flex { display: inline-flex; } .u-grid { display: grid; } .u-hidden { display: none; } /* -------------------------------------------------------------------- Spacing — margin / padding Generated from the 15-step spacing scale × {m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py}. Regenerate with: node scripts/generate-spacing.js and paste the output over this section if the scale in core/tokens/_variables.css ever changes. -------------------------------------------------------------------- */ .u-m-0 { margin: var(--aether-space-0); } .u-m-1 { margin: var(--aether-space-1); } .u-m-2 { margin: var(--aether-space-2); } .u-m-3 { margin: var(--aether-space-3); } .u-m-4 { margin: var(--aether-space-4); } .u-m-5 { margin: var(--aether-space-5); } .u-m-6 { margin: var(--aether-space-6); } .u-m-8 { margin: var(--aether-space-8); } .u-m-10 { margin: var(--aether-space-10); } .u-m-12 { margin: var(--aether-space-12); } .u-m-16 { margin: var(--aether-space-16); } .u-m-20 { margin: var(--aether-space-20); } .u-m-24 { margin: var(--aether-space-24); } .u-m-32 { margin: var(--aether-space-32); } .u-m-40 { margin: var(--aether-space-40); } .u-mt-0 { margin-top: var(--aether-space-0); } .u-mt-1 { margin-top: var(--aether-space-1); } .u-mt-2 { margin-top: var(--aether-space-2); } .u-mt-3 { margin-top: var(--aether-space-3); } .u-mt-4 { margin-top: var(--aether-space-4); } .u-mt-5 { margin-top: var(--aether-space-5); } .u-mt-6 { margin-top: var(--aether-space-6); } .u-mt-8 { margin-top: var(--aether-space-8); } .u-mt-10 { margin-top: var(--aether-space-10); } .u-mt-12 { margin-top: var(--aether-space-12); } .u-mt-16 { margin-top: var(--aether-space-16); } .u-mt-20 { margin-top: var(--aether-space-20); } .u-mt-24 { margin-top: var(--aether-space-24); } .u-mt-32 { margin-top: var(--aether-space-32); } .u-mt-40 { margin-top: var(--aether-space-40); } .u-mr-0 { margin-right: var(--aether-space-0); } .u-mr-1 { margin-right: var(--aether-space-1); } .u-mr-2 { margin-right: var(--aether-space-2); } .u-mr-3 { margin-right: var(--aether-space-3); } .u-mr-4 { margin-right: var(--aether-space-4); } .u-mr-5 { margin-right: var(--aether-space-5); } .u-mr-6 { margin-right: var(--aether-space-6); } .u-mr-8 { margin-right: var(--aether-space-8); } .u-mr-10 { margin-right: var(--aether-space-10); } .u-mr-12 { margin-right: var(--aether-space-12); } .u-mr-16 { margin-right: var(--aether-space-16); } .u-mr-20 { margin-right: var(--aether-space-20); } .u-mr-24 { margin-right: var(--aether-space-24); } .u-mr-32 { margin-right: var(--aether-space-32); } .u-mr-40 { margin-right: var(--aether-space-40); } .u-mb-0 { margin-bottom: var(--aether-space-0); } .u-mb-1 { margin-bottom: var(--aether-space-1); } .u-mb-2 { margin-bottom: var(--aether-space-2); } .u-mb-3 { margin-bottom: var(--aether-space-3); } .u-mb-4 { margin-bottom: var(--aether-space-4); } .u-mb-5 { margin-bottom: var(--aether-space-5); } .u-mb-6 { margin-bottom: var(--aether-space-6); } .u-mb-8 { margin-bottom: var(--aether-space-8); } .u-mb-10 { margin-bottom: var(--aether-space-10); } .u-mb-12 { margin-bottom: var(--aether-space-12); } .u-mb-16 { margin-bottom: var(--aether-space-16); } .u-mb-20 { margin-bottom: var(--aether-space-20); } .u-mb-24 { margin-bottom: var(--aether-space-24); } .u-mb-32 { margin-bottom: var(--aether-space-32); } .u-mb-40 { margin-bottom: var(--aether-space-40); } .u-ml-0 { margin-left: var(--aether-space-0); } .u-ml-1 { margin-left: var(--aether-space-1); } .u-ml-2 { margin-left: var(--aether-space-2); } .u-ml-3 { margin-left: var(--aether-space-3); } .u-ml-4 { margin-left: var(--aether-space-4); } .u-ml-5 { margin-left: var(--aether-space-5); } .u-ml-6 { margin-left: var(--aether-space-6); } .u-ml-8 { margin-left: var(--aether-space-8); } .u-ml-10 { margin-left: var(--aether-space-10); } .u-ml-12 { margin-left: var(--aether-space-12); } .u-ml-16 { margin-left: var(--aether-space-16); } .u-ml-20 { margin-left: var(--aether-space-20); } .u-ml-24 { margin-left: var(--aether-space-24); } .u-ml-32 { margin-left: var(--aether-space-32); } .u-ml-40 { margin-left: var(--aether-space-40); } .u-mx-0 { margin-left: var(--aether-space-0); margin-right: var(--aether-space-0); } .u-mx-1 { margin-left: var(--aether-space-1); margin-right: var(--aether-space-1); } .u-mx-2 { margin-left: var(--aether-space-2); margin-right: var(--aether-space-2); } .u-mx-3 { margin-left: var(--aether-space-3); margin-right: var(--aether-space-3); } .u-mx-4 { margin-left: var(--aether-space-4); margin-right: var(--aether-space-4); } .u-mx-5 { margin-left: var(--aether-space-5); margin-right: var(--aether-space-5); } .u-mx-6 { margin-left: var(--aether-space-6); margin-right: var(--aether-space-6); } .u-mx-8 { margin-left: var(--aether-space-8); margin-right: var(--aether-space-8); } .u-mx-10 { margin-left: var(--aether-space-10); margin-right: var(--aether-space-10); } .u-mx-12 { margin-left: var(--aether-space-12); margin-right: var(--aether-space-12); } .u-mx-16 { margin-left: var(--aether-space-16); margin-right: var(--aether-space-16); } .u-mx-20 { margin-left: var(--aether-space-20); margin-right: var(--aether-space-20); } .u-mx-24 { margin-left: var(--aether-space-24); margin-right: var(--aether-space-24); } .u-mx-32 { margin-left: var(--aether-space-32); margin-right: var(--aether-space-32); } .u-mx-40 { margin-left: var(--aether-space-40); margin-right: var(--aether-space-40); } .u-my-0 { margin-top: var(--aether-space-0); margin-bottom: var(--aether-space-0); } .u-my-1 { margin-top: var(--aether-space-1); margin-bottom: var(--aether-space-1); } .u-my-2 { margin-top: var(--aether-space-2); margin-bottom: var(--aether-space-2); } .u-my-3 { margin-top: var(--aether-space-3); margin-bottom: var(--aether-space-3); } .u-my-4 { margin-top: var(--aether-space-4); margin-bottom: var(--aether-space-4); } .u-my-5 { margin-top: var(--aether-space-5); margin-bottom: var(--aether-space-5); } .u-my-6 { margin-top: var(--aether-space-6); margin-bottom: var(--aether-space-6); } .u-my-8 { margin-top: var(--aether-space-8); margin-bottom: var(--aether-space-8); } .u-my-10 { margin-top: var(--aether-space-10); margin-bottom: var(--aether-space-10); } .u-my-12 { margin-top: var(--aether-space-12); margin-bottom: var(--aether-space-12); } .u-my-16 { margin-top: var(--aether-space-16); margin-bottom: var(--aether-space-16); } .u-my-20 { margin-top: var(--aether-space-20); margin-bottom: var(--aether-space-20); } .u-my-24 { margin-top: var(--aether-space-24); margin-bottom: var(--aether-space-24); } .u-my-32 { margin-top: var(--aether-space-32); margin-bottom: var(--aether-space-32); } .u-my-40 { margin-top: var(--aether-space-40); margin-bottom: var(--aether-space-40); } .u-p-0 { padding: var(--aether-space-0); } .u-p-1 { padding: var(--aether-space-1); } .u-p-2 { padding: var(--aether-space-2); } .u-p-3 { padding: var(--aether-space-3); } .u-p-4 { padding: var(--aether-space-4); } .u-p-5 { padding: var(--aether-space-5); } .u-p-6 { padding: var(--aether-space-6); } .u-p-8 { padding: var(--aether-space-8); } .u-p-10 { padding: var(--aether-space-10); } .u-p-12 { padding: var(--aether-space-12); } .u-p-16 { padding: var(--aether-space-16); } .u-p-20 { padding: var(--aether-space-20); } .u-p-24 { padding: var(--aether-space-24); } .u-p-32 { padding: var(--aether-space-32); } .u-p-40 { padding: var(--aether-space-40); } .u-pt-0 { padding-top: var(--aether-space-0); } .u-pt-1 { padding-top: var(--aether-space-1); } .u-pt-2 { padding-top: var(--aether-space-2); } .u-pt-3 { padding-top: var(--aether-space-3); } .u-pt-4 { padding-top: var(--aether-space-4); } .u-pt-5 { padding-top: var(--aether-space-5); } .u-pt-6 { padding-top: var(--aether-space-6); } .u-pt-8 { padding-top: var(--aether-space-8); } .u-pt-10 { padding-top: var(--aether-space-10); } .u-pt-12 { padding-top: var(--aether-space-12); } .u-pt-16 { padding-top: var(--aether-space-16); } .u-pt-20 { padding-top: var(--aether-space-20); } .u-pt-24 { padding-top: var(--aether-space-24); } .u-pt-32 { padding-top: var(--aether-space-32); } .u-pt-40 { padding-top: var(--aether-space-40); } .u-pr-0 { padding-right: var(--aether-space-0); } .u-pr-1 { padding-right: var(--aether-space-1); } .u-pr-2 { padding-right: var(--aether-space-2); } .u-pr-3 { padding-right: var(--aether-space-3); } .u-pr-4 { padding-right: var(--aether-space-4); } .u-pr-5 { padding-right: var(--aether-space-5); } .u-pr-6 { padding-right: var(--aether-space-6); } .u-pr-8 { padding-right: var(--aether-space-8); } .u-pr-10 { padding-right: var(--aether-space-10); } .u-pr-12 { padding-right: var(--aether-space-12); } .u-pr-16 { padding-right: var(--aether-space-16); } .u-pr-20 { padding-right: var(--aether-space-20); } .u-pr-24 { padding-right: var(--aether-space-24); } .u-pr-32 { padding-right: var(--aether-space-32); } .u-pr-40 { padding-right: var(--aether-space-40); } .u-pb-0 { padding-bottom: var(--aether-space-0); } .u-pb-1 { padding-bottom: var(--aether-space-1); } .u-pb-2 { padding-bottom: var(--aether-space-2); } .u-pb-3 { padding-bottom: var(--aether-space-3); } .u-pb-4 { padding-bottom: var(--aether-space-4); } .u-pb-5 { padding-bottom: var(--aether-space-5); } .u-pb-6 { padding-bottom: var(--aether-space-6); } .u-pb-8 { padding-bottom: var(--aether-space-8); } .u-pb-10 { padding-bottom: var(--aether-space-10); } .u-pb-12 { padding-bottom: var(--aether-space-12); } .u-pb-16 { padding-bottom: var(--aether-space-16); } .u-pb-20 { padding-bottom: var(--aether-space-20); } .u-pb-24 { padding-bottom: var(--aether-space-24); } .u-pb-32 { padding-bottom: var(--aether-space-32); } .u-pb-40 { padding-bottom: var(--aether-space-40); } .u-pl-0 { padding-left: var(--aether-space-0); } .u-pl-1 { padding-left: var(--aether-space-1); } .u-pl-2 { padding-left: var(--aether-space-2); } .u-pl-3 { padding-left: var(--aether-space-3); } .u-pl-4 { padding-left: var(--aether-space-4); } .u-pl-5 { padding-left: var(--aether-space-5); } .u-pl-6 { padding-left: var(--aether-space-6); } .u-pl-8 { padding-left: var(--aether-space-8); } .u-pl-10 { padding-left: var(--aether-space-10); } .u-pl-12 { padding-left: var(--aether-space-12); } .u-pl-16 { padding-left: var(--aether-space-16); } .u-pl-20 { padding-left: var(--aether-space-20); } .u-pl-24 { padding-left: var(--aether-space-24); } .u-pl-32 { padding-left: var(--aether-space-32); } .u-pl-40 { padding-left: var(--aether-space-40); } .u-px-0 { padding-left: var(--aether-space-0); padding-right: var(--aether-space-0); } .u-px-1 { padding-left: var(--aether-space-1); padding-right: var(--aether-space-1); } .u-px-2 { padding-left: var(--aether-space-2); padding-right: var(--aether-space-2); } .u-px-3 { padding-left: var(--aether-space-3); padding-right: var(--aether-space-3); } .u-px-4 { padding-left: var(--aether-space-4); padding-right: var(--aether-space-4); } .u-px-5 { padding-left: var(--aether-space-5); padding-right: var(--aether-space-5); } .u-px-6 { padding-left: var(--aether-space-6); padding-right: var(--aether-space-6); } .u-px-8 { padding-left: var(--aether-space-8); padding-right: var(--aether-space-8); } .u-px-10 { padding-left: var(--aether-space-10); padding-right: var(--aether-space-10); } .u-px-12 { padding-left: var(--aether-space-12); padding-right: var(--aether-space-12); } .u-px-16 { padding-left: var(--aether-space-16); padding-right: var(--aether-space-16); } .u-px-20 { padding-left: var(--aether-space-20); padding-right: var(--aether-space-20); } .u-px-24 { padding-left: var(--aether-space-24); padding-right: var(--aether-space-24); } .u-px-32 { padding-left: var(--aether-space-32); padding-right: var(--aether-space-32); } .u-px-40 { padding-left: var(--aether-space-40); padding-right: var(--aether-space-40); } .u-py-0 { padding-top: var(--aether-space-0); padding-bottom: var(--aether-space-0); } .u-py-1 { padding-top: var(--aether-space-1); padding-bottom: var(--aether-space-1); } .u-py-2 { padding-top: var(--aether-space-2); padding-bottom: var(--aether-space-2); } .u-py-3 { padding-top: var(--aether-space-3); padding-bottom: var(--aether-space-3); } .u-py-4 { padding-top: var(--aether-space-4); padding-bottom: var(--aether-space-4); } .u-py-5 { padding-top: var(--aether-space-5); padding-bottom: var(--aether-space-5); } .u-py-6 { padding-top: var(--aether-space-6); padding-bottom: var(--aether-space-6); } .u-py-8 { padding-top: var(--aether-space-8); padding-bottom: var(--aether-space-8); } .u-py-10 { padding-top: var(--aether-space-10); padding-bottom: var(--aether-space-10); } .u-py-12 { padding-top: var(--aether-space-12); padding-bottom: var(--aether-space-12); } .u-py-16 { padding-top: var(--aether-space-16); padding-bottom: var(--aether-space-16); } .u-py-20 { padding-top: var(--aether-space-20); padding-bottom: var(--aether-space-20); } .u-py-24 { padding-top: var(--aether-space-24); padding-bottom: var(--aether-space-24); } .u-py-32 { padding-top: var(--aether-space-32); padding-bottom: var(--aether-space-32); } .u-py-40 { padding-top: var(--aether-space-40); padding-bottom: var(--aether-space-40); } .u-gap-0 { gap: var(--aether-space-0); } .u-gap-1 { gap: var(--aether-space-1); } .u-gap-2 { gap: var(--aether-space-2); } .u-gap-3 { gap: var(--aether-space-3); } .u-gap-4 { gap: var(--aether-space-4); } .u-gap-5 { gap: var(--aether-space-5); } .u-gap-6 { gap: var(--aether-space-6); } .u-gap-8 { gap: var(--aether-space-8); } .u-gap-10 { gap: var(--aether-space-10); } .u-gap-12 { gap: var(--aether-space-12); } .u-gap-16 { gap: var(--aether-space-16); } .u-gap-20 { gap: var(--aether-space-20); } .u-gap-24 { gap: var(--aether-space-24); } .u-gap-32 { gap: var(--aether-space-32); } .u-gap-40 { gap: var(--aether-space-40); } /* ---- source: css/aether/core/layout/_container.css ---- */ /* ========================================================================== AETHER UI — Layout: Container The outer shell that centers and bounds page content. Namespaced `.l-` (layout) rather than `.u-` (utility, single CSS property) or a bare class — this is structural scaffolding with its own responsive behavior, and the distinction keeps a future `.card` component from colliding with whatever a consuming project already calls `.container`. Breakpoints are hardcoded to the pixel values documented in _variables.css (--aether-bp-*) rather than interpolated — CSS custom properties can't be substituted inside an @media condition, so those tokens exist for JS to read, and this file is the second, deliberate place the same numbers live. ========================================================================== */ .l-container { width: 100%; margin-inline: auto; padding-inline: var(--aether-space-5); max-width: var(--aether-container-xl); } @media (min-width: 768px) { .l-container { padding-inline: var(--aether-space-8); } } @media (min-width: 1280px) { .l-container { padding-inline: var(--aether-space-10); } } /* Size modifiers — override the default xl ceiling. */ .l-container--sm { max-width: var(--aether-container-sm); } .l-container--md { max-width: var(--aether-container-md); } .l-container--lg { max-width: var(--aether-container-lg); } .l-container--xl { max-width: var(--aether-container-xl); } .l-container--2xl { max-width: var(--aether-container-2xl); } /* Edge-to-edge: keeps the responsive gutter, drops the max-width ceiling. For full-bleed sections (hero backgrounds, image bands) that still need their inner content indented consistently with the rest of the page. */ .l-container--fluid { max-width: none; } /* ---- source: css/aether/core/layout/_section.css ---- */ /* ========================================================================== AETHER UI — Layout: Section Vertical rhythm between major page regions, plus the reading-measure primitive for prose. Two different jobs, same file, because they're the two ways `_variables.css`'s Layout tokens (section-spacing, content-width) actually get consumed. ========================================================================== */ .l-section { padding-block: var(--aether-section-spacing-md); } .l-section--sm { padding-block: var(--aether-section-spacing-sm); } .l-section--lg { padding-block: var(--aether-section-spacing-lg); } .l-section--xl { padding-block: var(--aether-section-spacing-xl); } /* Zero out one edge — the common case is a hero directly under a sticky nav (no top gap wanted) or two sections that should read as one visual block with a divider between them (no double gap at the seam). */ .l-section--flush-top { padding-top: 0; } .l-section--flush-bottom { padding-bottom: 0; } /* -------------------------------------------------------------------- Prose — bounds a column of text to a readable measure. Distinct from .l-container: a container bounds a whole layout region (which might hold a grid, a hero, images at full width); .l-prose bounds one column of continuous reading text inside it. -------------------------------------------------------------------- */ .l-prose { max-width: var(--aether-content-width-normal); margin-inline: auto; } .l-prose--narrow { max-width: var(--aether-content-width-narrow); } .l-prose--wide { max-width: var(--aether-content-width-wide); } /* ---- source: css/aether/core/layout/_grid.css ---- */ /* ========================================================================== AETHER UI — Layout: Grid Two grid patterns cover almost everything: a fixed N-column grid that collapses predictably at wider breakpoints (dashboards, pricing tables, product listings with a known count), and a self-wrapping auto-fit grid that needs no breakpoints at all (card walls, portfolio showcases, anything where the item count isn't known ahead of time). Gap is intentionally NOT baked into each modifier — pair any .l-grid with a spacing utility from _utilities.css (.u-gap-4, .u-gap-8, ...) to control density. Default gap below is just a sane fallback. ========================================================================== */ .l-grid { display: grid; grid-template-columns: 1fr; gap: var(--aether-space-6); } /* Fixed column counts — mobile-first: always 1 column below md (768px), then the requested count from lg (1024px) up. md itself is an intermediate 2-column step so tablets don't jump straight from 1 to 6. */ .l-grid--2, .l-grid--3, .l-grid--4, .l-grid--6, .l-grid--12 { grid-template-columns: 1fr; } @media (min-width: 768px) { .l-grid--2 { grid-template-columns: repeat(2, 1fr); } .l-grid--3 { grid-template-columns: repeat(2, 1fr); } .l-grid--4 { grid-template-columns: repeat(2, 1fr); } .l-grid--6 { grid-template-columns: repeat(3, 1fr); } .l-grid--12 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .l-grid--3 { grid-template-columns: repeat(3, 1fr); } .l-grid--4 { grid-template-columns: repeat(4, 1fr); } .l-grid--6 { grid-template-columns: repeat(6, 1fr); } .l-grid--12 { grid-template-columns: repeat(12, 1fr); } } /* Auto-fit — no breakpoints needed, wraps based on available width. --l-grid-min sets the minimum column width before it wraps; override inline (style="--l-grid-min: 280px") per instance rather than adding a new class for every size. */ .l-grid--auto { grid-template-columns: repeat(auto-fit, minmax(var(--l-grid-min, 240px), 1fr)); } /* Column/row span helpers for grid children */ .l-grid-span-2 { grid-column: span 2; } .l-grid-span-3 { grid-column: span 3; } .l-grid-span-full { grid-column: 1 / -1; } /* ---- source: css/aether/core/layout/_flex.css ---- */ /* ========================================================================== AETHER UI — Layout: Flex The other half of the layout toolkit — one-dimensional arrangement where grid would be overkill (a toolbar, a card's header row, a button group). Pair with .u-gap-* for spacing between items. ========================================================================== */ .l-flex { display: flex; } .l-flex--col { flex-direction: column; } .l-flex--wrap { flex-wrap: wrap; } .l-flex--nowrap { flex-wrap: nowrap; } .l-flex--items-start { align-items: flex-start; } .l-flex--items-center { align-items: center; } .l-flex--items-end { align-items: flex-end; } .l-flex--items-stretch { align-items: stretch; } .l-flex--justify-start { justify-content: flex-start; } .l-flex--justify-center { justify-content: center; } .l-flex--justify-end { justify-content: flex-end; } .l-flex--justify-between { justify-content: space-between; } .l-flex--justify-around { justify-content: space-around; } /* Child utilities */ .l-flex-1 { flex: 1 1 0%; } /* grow to fill remaining space */ .l-flex-none { flex: none; } /* never grow or shrink */ /* Mobile-first responsive stacking: column on small screens (the safe default for two things that can't both fit narrow), row from md (768px) up. The single most common "responsive layout" request — named for the breakpoint it switches at, not for what it's stacking, since the same class serves a nav, a hero split, or a form row. */ .l-flex--row-md { flex-direction: column; } @media (min-width: 768px) { .l-flex--row-md { flex-direction: row; } } /* ---- source: css/aether/core/motion/_keyframes.css ---- */ /* ========================================================================== AETHER UI — Motion: Keyframes Named animation definitions only — no classes here. _motion.css applies these to real, reusable classes with the durations/easings from the Motion tokens in _variables.css. Splitting the two keeps a keyframe's shape (what it moves) separate from its timing (how long, what curve), the same separation of concerns as tokens vs. the things that consume them everywhere else in this system. ========================================================================== */ /* -------------------------------------------------------------------- Fade Opacity only — deliberately doesn't touch transform. Two separate utility CLASSES on one element can't combine (whichever sets `animation` last in the cascade wins outright, it doesn't merge with the other) — but two KEYFRAME NAMES referenced together in one `animation` declaration do run concurrently, each only touching the properties it declares. That's what this split is actually for: a future component can write its own `animation: aetherFadeIn .., aetherSlideInUp ..;` and get a real fade+slide combo, because neither keyframe fights the other for the same property. The Reveal keyframe below (aetherRevealUp) is exactly that combination, pre-assembled and exposed as .m-reveal-in in _motion.css. -------------------------------------------------------------------- */ @keyframes aetherFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes aetherFadeOut { from { opacity: 1; } to { opacity: 0; } } /* -------------------------------------------------------------------- Slide Transform only, for the same reason Fade is opacity-only. Distance is a fixed value here rather than a token — motion distance is a different kind of scale than spacing-between-elements, and forcing it onto --aether-space-* would make a spacing-scale change silently change how far every entrance animation travels. -------------------------------------------------------------------- */ @keyframes aetherSlideInUp { from { transform: translateY(24px); } to { transform: translateY(0); } } @keyframes aetherSlideInDown { from { transform: translateY(-24px); } to { transform: translateY(0); } } @keyframes aetherSlideInLeft { from { transform: translateX(-24px); } to { transform: translateX(0); } } @keyframes aetherSlideInRight { from { transform: translateX(24px); } to { transform: translateX(0); } } /* -------------------------------------------------------------------- Reveal The opinionated combination of fade + a shorter rise than Slide uses — the "this content has arrived" entrance, distinct from a generic directional slide. One keyframe (not two composed) because reveal is meant to be a single deliberate effect, not a build-your-own. -------------------------------------------------------------------- */ @keyframes aetherRevealUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------- Float Ambient, continuous, decorative — a different time register entirely from interaction motion (seconds, not the millisecond Motion-token scale built for UI feedback). Kept as a literal duration in _motion.css for that reason; see the comment there. -------------------------------------------------------------------- */ @keyframes aetherFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* -------------------------------------------------------------------- Glow pulse Reads --m-glow-color (set by a modifier class in _motion.css, default --aether-primary) so one keyframe serves every glow color instead of one keyframe per tint. Strength/blur intensify at the peak using calc() on top of the existing --aether-glow-strength/-blur tokens, so a theme that turns glow down (Business) or up (Spiritual) changes the whole pulse range automatically, not just its resting state. -------------------------------------------------------------------- */ @keyframes aetherGlowPulse { 0%, 100% { box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--m-glow-color, var(--aether-primary)) var(--aether-glow-strength), transparent); } 50% { box-shadow: 0 0 calc(var(--aether-glow-blur) * 1.6) color-mix(in oklch, var(--m-glow-color, var(--aether-primary)) calc(var(--aether-glow-strength) + 20%), transparent); } } /* -------------------------------------------------------------------- Spin Added in Phase 3 for loading states (button loading, the feedback spinner) — kept here rather than duplicated in two component files, since "rotate 360deg forever" is exactly the kind of primitive this module exists to hold. A functional/status animation, not a decorative one, so components using it do NOT pair it with .u-motion-safe the way Float/Glow pulse do — reset.css's blanket reduced-motion override (near-zero duration, single iteration) is the right amount of restraint for something communicating "busy." -------------------------------------------------------------------- */ @keyframes aetherSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ---- source: css/aether/core/motion/_motion.css ---- */ /* ========================================================================== AETHER UI — Motion Reusable animation primitives — not component animations. Nothing here knows about a card, a button, or a nav; these are the six raw moves (reveal, fade, slide, float, glow, hover lift) that Core components apply, the same way components apply .u-radius-lg or .l-flex rather than reinventing radius or layout. Namespaced `.m-` (motion) — the same reasoning as `.l-` for layout in core/layout/: this is multi-property, stateful behavior (an animation or a hover interaction), not a single CSS property like a `.u-` utility, and it deserves its own namespace so a component class never collides with it. Every duration/easing below comes from the Motion tokens in core/tokens/_variables.css (--aether-duration-*, --aether-ease-*) — nothing here invents its own timing. The one exception is Float's loop duration; see the comment on that class for why. ========================================================================== */ /* -------------------------------------------------------------------- Fade Standalone opacity change. For a fade THAT ALSO moves, don't stack .m-fade-in with .m-slide-up — see the note in _keyframes.css: separate utility classes both setting `animation` don't combine, only one wins. Use .m-reveal-in for a pre-combined fade+rise, or write a component's own `animation: aetherFadeIn .., aetherSlideInUp ..;` to combine any two keyframes deliberately. -------------------------------------------------------------------- */ .m-fade-in { animation: aetherFadeIn var(--aether-duration-slow) var(--aether-ease-standard) both; } .m-fade-out { animation: aetherFadeOut var(--aether-duration-slow) var(--aether-ease-standard) both; } /* -------------------------------------------------------------------- Slide Directional, transform-only entrances. Emphasized-decelerate is the easing built specifically for arrivals — front-loaded deceleration reads as "this landed here" rather than a mechanical linear move. -------------------------------------------------------------------- */ .m-slide-up { animation: aetherSlideInUp var(--aether-duration-slow) var(--aether-ease-emphasized-decelerate) both; } .m-slide-down { animation: aetherSlideInDown var(--aether-duration-slow) var(--aether-ease-emphasized-decelerate) both; } .m-slide-left { animation: aetherSlideInLeft var(--aether-duration-slow) var(--aether-ease-emphasized-decelerate) both; } .m-slide-right { animation: aetherSlideInRight var(--aether-duration-slow) var(--aether-ease-emphasized-decelerate) both; } /* -------------------------------------------------------------------- Reveal Two flavors of the same idea, because "reveal" means two different things in practice: .m-reveal-in plays once, immediately, on mount — a hero, a modal's content, anything that should arrive as soon as it exists in the DOM. No JS required. .m-reveal a SCROLL reveal: starts hidden and stays hidden until something external adds .is-visible (an IntersectionObserver, wired up in Phase 4 — this is the CSS half of that pattern, ready for it). Because that trigger is external, an element can get stuck invisible forever if the JS never runs — so prefers-reduced-motion doesn't just speed this one up, it forces the visible end-state outright, independent of whether .is-visible ever gets added. -------------------------------------------------------------------- */ .m-reveal-in { animation: aetherRevealUp var(--aether-duration-slower) var(--aether-ease-emphasized-decelerate) both; } .m-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--aether-duration-slower) var(--aether-ease-emphasized-decelerate), transform var(--aether-duration-slower) var(--aether-ease-emphasized-decelerate); } .m-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .m-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------- Float Ambient, continuous, decorative — a hero graphic, a floating badge, an icon that should feel alive without asking for attention. Runs on its own literal duration rather than a Motion token: 6s/8s sit in a completely different register than the millisecond scale (--aether-duration-fast..slowest) built for UI feedback, and forcing ambient-loop timing onto that scale would either make "float" too fast to read as ambient, or pull the whole interaction-duration scale out toward multi-second values it was never meant to hold. This is exactly the "not just fast, actually off" category of motion _accessibility.css calls out — pair with .u-motion-safe (paused until the OS confirms no preference against motion) on anything where the float is purely decorative rather than load-bearing:
-------------------------------------------------------------------- */ .m-float { animation: aetherFloat 6s var(--aether-ease-smooth) infinite; } .m-float--slow { animation-duration: 8s; } /* -------------------------------------------------------------------- Glow pulse The animated counterpart to the static .u-glow-primary/secondary/ accent utilities from _utilities.css — same color formula, breathing instead of fixed. Same accessibility guidance as Float: decorative, not load-bearing, pair with .u-motion-safe where appropriate. -------------------------------------------------------------------- */ .m-glow-pulse { animation: aetherGlowPulse 3s var(--aether-ease-smooth) infinite; } .m-glow-pulse--secondary { --m-glow-color: var(--aether-secondary); } .m-glow-pulse--accent { --m-glow-color: var(--aether-accent); } /* -------------------------------------------------------------------- Spin Status motion (loading), not decorative — see the note in _keyframes.css on why this one isn't paired with .u-motion-safe. -------------------------------------------------------------------- */ .m-spin { animation: aetherSpin 0.6s linear infinite; } /* -------------------------------------------------------------------- Hover lift Interaction motion, not autoplay — a transition between two states (rest / hovered), not a keyframe. Fast duration on purpose: hover feedback needs to feel immediate, not cinematic. Also responds to :focus-visible so the same lift reaches keyboard users, not just a mouse — and to :active with a smaller, closer offset for the "being pressed" moment, which reads as considered rather than just a hover effect that happens to also apply on click. -------------------------------------------------------------------- */ .m-hover-lift { transition: transform var(--aether-transition-fast), box-shadow var(--aether-transition-fast); } .m-hover-lift:hover, .m-hover-lift:focus-visible { transform: translateY(-4px); box-shadow: var(--aether-shadow-lg); } .m-hover-lift:active { transform: translateY(-1px); } /* ---- source: css/aether/core/components/buttons/_button.css ---- */ /* ========================================================================== AETHER UI — Component: Button Namespaced `.c-` (component) — distinct from `.u-` (single-property utility), `.l-` (structural layout), and `.m-` (raw animation primitive). A button is all four things at once — spacing, color, motion, interaction — so it earns its own layer rather than being assembled from utilities on every use. The base .c-button carries everything variant-independent (shape, type, motion, focus, disabled/loading behavior). Variant classes only ever set color — swapping a variant should never change size, radius, or how the hover/press motion feels. That split is what keeps six variants reading as one button family instead of six different buttons that happen to sit near each other. ========================================================================== */ /* -------------------------------------------------------------------- Base -------------------------------------------------------------------- */ .c-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--aether-space-2); position: relative; min-height: var(--aether-tap-target-min); padding: var(--aether-space-3) var(--aether-space-6); border: 1px solid transparent; border-radius: var(--aether-radius-md); font-family: var(--aether-font-body); font-size: var(--aether-text-base); font-weight: var(--aether-weight-semibold); line-height: 1; white-space: nowrap; text-decoration: none; user-select: none; cursor: pointer; transition: background-color var(--aether-transition-fast), border-color var(--aether-transition-fast), color var(--aether-transition-fast), transform var(--aether-transition-fast), box-shadow var(--aether-transition-fast); } /* Press feedback — a small settle-down on every variant, independent of whichever hover treatment (lift, glow) that variant adds on top. */ .c-button:active { transform: translateY(1px); } .c-button[disabled], .c-button[aria-disabled='true'] { transform: none; box-shadow: none; } /* -------------------------------------------------------------------- Sizes min-height stays constant across sizes (accessibility floor, not a visual one) — only padding and type scale change. -------------------------------------------------------------------- */ .c-button--sm { padding: var(--aether-space-2) var(--aether-space-4); font-size: var(--aether-text-sm); gap: var(--aether-space-1); } .c-button--lg { padding: var(--aether-space-4) var(--aether-space-8); font-size: var(--aether-text-md); } /* -------------------------------------------------------------------- Variants Each hover treatment matches the variant's register: filled variants (primary/secondary/CTA) get a lift + glow, because they're meant to feel substantial and premium. Ghost/outline stay quieter — a glow on a low-emphasis button would fight its own purpose. -------------------------------------------------------------------- */ .c-button--primary { background: var(--aether-primary); color: var(--aether-text-on-primary); } .c-button--primary:hover { background: var(--aether-primary-hover); transform: translateY(-2px); box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-primary) var(--aether-glow-strength), transparent); } .c-button--secondary { background: var(--aether-secondary); color: var(--aether-text-on-secondary); } .c-button--secondary:hover { background: var(--aether-secondary-hover); transform: translateY(-2px); box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-secondary) var(--aether-glow-strength), transparent); } /* Ghost — the quietest variant. No fill, no border; a background tint on hover is the only feedback. For tertiary actions that shouldn't compete with a primary/CTA button on the same screen. */ .c-button--ghost { background: transparent; color: var(--aether-text-muted); } .c-button--ghost:hover { background: var(--aether-surface-2); color: var(--aether-text); } /* Outline — visible boundary without the weight of a fill. Reads as "secondary action with more presence than Ghost," e.g. paired next to a Primary button as its "Cancel"/"Learn more" counterpart. */ .c-button--outline { background: transparent; border-color: var(--aether-border-strong); color: var(--aether-text); } .c-button--outline:hover { border-color: var(--aether-primary-hover); color: var(--aether-primary-hover); background: color-mix(in oklch, var(--aether-primary) 8%, transparent); } /* CTA — the button that makes money. Uses --aether-cta rather than --aether-accent directly (see _variables.css) so Commerce can make checkout buttons punchier without every other gold accent in the UI following along. Slightly bolder weight and a stronger lift than Primary/Secondary — this is the one button on the page that should feel like the obvious next step. */ .c-button--cta { background: var(--aether-cta); color: var(--aether-text-on-accent); font-weight: var(--aether-weight-bold); } .c-button--cta:hover { background: var(--aether-cta-hover); transform: translateY(-3px); box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-cta) var(--aether-glow-strength), transparent); } .c-button--danger { background: var(--aether-danger); color: var(--aether-text-on-feedback); } .c-button--danger:hover { background: var(--aether-danger-hover); transform: translateY(-2px); box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-danger) var(--aether-glow-strength), transparent); } /* -------------------------------------------------------------------- Loading Text stays visible (color isn't touched) — a spinner is inserted before it via ::before, so the button keeps its label and doesn't reflow-jump when the state changes. currentColor means the spinner automatically matches whichever variant it's applied to. Consumers should pair this class with the real `disabled` attribute (or `aria-disabled="true"`) and `aria-busy="true"` — a CSS class alone can't stop form submission or announce the state to assistive tech. -------------------------------------------------------------------- */ .c-button--loading { pointer-events: none; opacity: 0.85; } .c-button--loading::before { content: ''; width: 1em; height: 1em; border: 2px solid color-mix(in oklch, currentColor 30%, transparent); border-top-color: currentColor; border-radius: var(--aether-radius-full); animation: aetherSpin 0.6s linear infinite; } /* ---- source: css/aether/core/components/cards/_card.css ---- */ /* ========================================================================== AETHER UI — Component: Card One flexible primitive rather than twelve bespoke components. Every card type this system needs to support — project, skill, service, pricing, product, article, quote, reflection, stat — is a composition of the same .c-card shell plus a handful of __ sub-parts, not a separate class per named use case. That's the "coherent design language" the brief asks for: the vocabulary is shared, only the content inside changes. Anatomy: .c-card shell — border, radius, background, motion .c-card__media optional image, bleeds to the card's edges .c-card__body padded content area (everything below media) .c-card__title / __description / __footer / __list / __stat .c-card__corner absolute-positioned slot over .media (badge, price tag) The shell itself carries no padding — .c-card__media (if present) can then run edge-to-edge, with .c-card__body owning the internal padding. Text content always lives inside .c-card__body, whether or not the card has media above it; a text-only card just omits __media. ========================================================================== */ /* -------------------------------------------------------------------- Shell -------------------------------------------------------------------- */ .c-card { display: block; position: relative; background: var(--aether-surface-1); border: 1px solid var(--aether-border); border-radius: var(--aether-radius-lg); overflow: hidden; transition: border-color var(--aether-transition-base), transform var(--aether-transition-base), box-shadow var(--aether-transition-base); } .c-card__body { display: flex; flex-direction: column; gap: var(--aether-space-3); padding: var(--aether-space-6); } .c-card__media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } /* Slot for a badge/price-tag/discount pill floated over the media — pairs with .c-badge from the Feedback components. */ .c-card__corner { position: absolute; top: var(--aether-space-4); right: var(--aether-space-4); z-index: var(--aether-z-dropdown); } .c-card__title { font-family: var(--aether-font-heading); font-size: var(--aether-text-lg); font-weight: var(--aether-weight-semibold); color: var(--aether-text); } .c-card__description { font-size: var(--aether-text-sm); line-height: var(--aether-leading-relaxed); color: var(--aether-text-muted); } .c-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--aether-space-4); margin-top: auto; padding-top: var(--aether-space-4); border-top: 1px solid var(--aether-border); } /* Feature/pricing list — checkmark via ::before so the marker inherits the accent color without needing an icon dependency. */ .c-card__list { display: flex; flex-direction: column; gap: var(--aether-space-2); list-style: none; } .c-card__list-item { display: flex; align-items: baseline; gap: var(--aether-space-2); font-size: var(--aether-text-sm); color: var(--aether-text-muted); } .c-card__list-item::before { content: '✓'; color: var(--aether-accent); font-weight: var(--aether-weight-bold); } /* Stat — the large-number treatment for statistics/dashboard cards. Mono font reads as "measured/precise," matching the Business register this card type is built for. */ .c-card__stat { font-family: var(--aether-font-mono); font-size: var(--aether-text-3xl); font-weight: var(--aether-weight-semibold); color: var(--aether-primary-hover); line-height: var(--aether-leading-tight); } .c-card__stat-label { font-size: var(--aether-text-xs); text-transform: uppercase; letter-spacing: var(--aether-tracking-wide); color: var(--aether-text-faint); } /* -------------------------------------------------------------------- Variants -------------------------------------------------------------------- */ .c-card--glass { background: var(--aether-glass-bg); border-color: var(--aether-glass-border); backdrop-filter: blur(var(--aether-glass-blur)); -webkit-backdrop-filter: blur(var(--aether-glass-blur)); } .c-card--elevated { background: var(--aether-surface-2); box-shadow: var(--aether-shadow-lg); } /* Interactive — the card itself is the click target (wrap in , or add tabindex="0" + an appropriate role if it triggers JS). Lift + border animation on both :hover and :focus-visible so keyboard users get identical feedback to a mouse. */ .c-card--interactive { cursor: pointer; } .c-card--interactive:hover, .c-card--interactive:focus-visible { transform: translateY(-4px); border-color: var(--aether-primary-hover); box-shadow: var(--aether-shadow-lg); } /* Featured — a persistent accent treatment for "most popular"/"selected work" callouts, not just a hover state. Top accent bar + a resting (not pulsing) glow at reduced strength so it reads as premium rather than distracting. */ .c-card--featured { border-color: var(--aether-accent); border-top: 3px solid var(--aether-accent); box-shadow: 0 0 var(--aether-glow-blur) color-mix(in oklch, var(--aether-accent) calc(var(--aether-glow-strength) / 2), transparent); } /* Quote — for testimonials, philosophy pages, reflection entries. A large decorative opening mark in the heading serif, sized and faded independently of the actual quote text so it reads as texture, not as content (hence aria-hidden guidance in the demo/README). */ .c-card--quote { text-align: center; } .c-card--quote .c-card__body { align-items: center; gap: var(--aether-space-4); } .c-card--quote .c-card__body::before { content: '"'; font-family: var(--aether-font-heading); font-size: var(--aether-text-4xl); line-height: 1; color: var(--aether-accent); opacity: 0.5; } .c-card--quote blockquote { border-left: none; padding-left: 0; font-size: var(--aether-text-md); } /* ---- source: css/aether/core/components/navigation/_navbar.css ---- */ /* ========================================================================== AETHER UI — Component: Navigation Outer bar / inner row split, the same separation Phase 2's layout engine uses for container vs. content: .c-navbar is the full-bleed bar that owns background, border, and sticky behavior; .c-navbar__inner is the width-constrained flex row that actually aligns brand/links/CTA. Splitting them means a glass or sticky nav can span edge-to-edge while its *content* still lines up with the rest of the page's container. State vs. variant naming follows the convention set in Phase 2.5: `--modifier` classes are author-chosen (glass vs. solid, which variant to render); `.is-*` classes are runtime state toggled by JS (open vs. closed) — same pattern as .m-reveal's `.is-visible`. ========================================================================== */ /* -------------------------------------------------------------------- Bar -------------------------------------------------------------------- */ .c-navbar { width: 100%; z-index: var(--aether-z-sticky); border-bottom: 1px solid transparent; transition: background-color var(--aether-transition-base), border-color var(--aether-transition-base); } .c-navbar--sticky { position: sticky; top: 0; } .c-navbar--glass { background: var(--aether-glass-bg); border-bottom-color: var(--aether-glass-border); backdrop-filter: blur(var(--aether-glass-blur)); -webkit-backdrop-filter: blur(var(--aether-glass-blur)); } .c-navbar--solid { background: var(--aether-bg); border-bottom-color: var(--aether-border); } .c-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--aether-space-6); max-width: var(--aether-container-xl); margin-inline: auto; padding-inline: var(--aether-space-5); padding-block: var(--aether-space-4); } @media (min-width: 768px) { .c-navbar__inner { padding-inline: var(--aether-space-8); } } .c-navbar__brand { display: flex; align-items: center; gap: var(--aether-space-2); font-family: var(--aether-font-heading); font-size: var(--aether-text-md); font-weight: var(--aether-weight-semibold); color: var(--aether-text); } /* -------------------------------------------------------------------- Links -------------------------------------------------------------------- */ .c-nav-links { display: flex; align-items: center; gap: var(--aether-space-8); list-style: none; } .c-nav-link { position: relative; padding-block: var(--aether-space-2); font-size: var(--aether-text-sm); font-weight: var(--aether-weight-medium); color: var(--aether-text-muted); transition: color var(--aether-transition-fast); } .c-nav-link:hover { color: var(--aether-text); } /* Animated underline — grows from 0 on hover, and stays full-width for the current page via [aria-current="page"]. Real navigation state (aria-current) drives it, not a decorative-only class, so a screen reader gets the same "you are here" signal a sighted user sees. */ .c-nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--aether-primary-hover); transition: width var(--aether-transition-base); } .c-nav-link:hover::after, .c-nav-link[aria-current='page']::after { width: 100%; } .c-nav-link[aria-current='page'] { color: var(--aether-text); } /* -------------------------------------------------------------------- Mobile .c-navbar__toggle is a real
USAGE (split — text + media side by side)
...
Split reaches for .l-flex--row-md (already stacks on mobile, sits side by side from 768px) instead of Hero inventing its own responsive two-column logic — composing the Layout Engine, not duplicating it. Assumes core/aether.css is already loaded by whatever page imports this file — same convention Core's own internal files use, so combining several patterns on one page never re-imports Core more than once. ========================================================================== */ .p-hero { padding-block: var(--aether-section-spacing-lg); text-align: center; } .p-hero--split { text-align: left; } .p-hero--split .p-hero__content, .p-hero--split .p-hero__media { flex: 1 1 0%; } .p-hero__subtext { max-width: var(--aether-content-width-normal); margin-inline: auto; margin-block: var(--aether-space-6) 0; font-size: var(--aether-text-md); line-height: var(--aether-leading-relaxed); color: var(--aether-text-muted); } .p-hero--split .p-hero__subtext { margin-inline: 0; } .p-hero__actions { display: flex; justify-content: center; align-items: center; gap: var(--aether-space-4); flex-wrap: wrap; margin-top: var(--aether-space-8); } .p-hero--split .p-hero__actions { justify-content: flex-start; } /* A placeholder treatment for the media slot — a real project drops an /

Selected work

View all →
...
...
...
Assumes core/aether.css is already loaded by whatever page imports this file — see the note in patterns/hero/hero.css. ========================================================================== */ .p-grid-section { padding-block: var(--aether-section-spacing-md); } .p-grid-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--aether-space-6); margin-bottom: var(--aether-space-10); } .p-grid-section__link { flex-shrink: 0; font-size: var(--aether-text-sm); font-weight: var(--aether-weight-medium); color: var(--aether-text-muted); transition: color var(--aether-transition-fast); } .p-grid-section__link:hover { color: var(--aether-primary-hover); } /* ---- source: css/aether/patterns/article/article.css ---- */ /* ========================================================================== AETHER UI — Pattern: Article The long-form reading layout — a Spiritual article/teaching, a Portfolio case study, a Business blog post. Three parts: a centered header (eyebrow, title, meta), a width-constrained body with consistent rhythm between whatever content blocks it holds, and a closing footer (author bio, tags, next/prev). Depends on Core only. The __meta fields (author, date, reading time) are a direct match for whatever shape a project's own article content takes — this pattern and that content are meant to be read side by side. Assumes core/aether.css is already loaded by whatever page imports this file — see the note in patterns/hero/hero.css. ========================================================================== */ .p-article-layout { padding-block: var(--aether-section-spacing-md); } .p-article-layout__header { max-width: var(--aether-content-width-normal); margin-inline: auto; margin-bottom: var(--aether-space-10); text-align: center; } .p-article-layout__meta { display: flex; align-items: center; justify-content: center; gap: var(--aether-space-3); margin-top: var(--aether-space-4); font-family: var(--aether-font-mono); font-size: var(--aether-text-xs); color: var(--aether-text-faint); } .p-article-layout__meta-item + .p-article-layout__meta-item::before { content: '·'; margin-right: var(--aether-space-3); color: var(--aether-text-faint); } .p-article-layout__body { max-width: var(--aether-content-width-normal); margin-inline: auto; } /* "Lobotomized owl" rhythm — every content block gets consistent space above it, regardless of what mix of paragraphs/headings/blockquotes/ images an article happens to contain. Means an author never has to remember a spacing utility on every element. */ .p-article-layout__body > * + * { margin-top: var(--aether-space-6); } .p-article-layout__footer { max-width: var(--aether-content-width-normal); margin-inline: auto; margin-top: var(--aether-space-12); padding-top: var(--aether-space-8); border-top: 1px solid var(--aether-border); } /* ---- source: css/aether/patterns/footer/footer.css ---- */ /* ========================================================================== AETHER UI — Pattern: Footer The closing landmark — brand + link columns, then a copyright bar. The one pattern in this set styled as a real