/* ═══════════════════════════════════════════════════════════════
SISAM DESIGN SYSTEM — design-tokens.css
Liquid Surface (Light) + Frosted Tile (Dark)
Version 1.0 · Production Ready
───────────────────────────────────────────────────────────────
ARCHITECTURE NOTE:
Tailwind v4 is used for layout scaffolding only (grid, flex,
spacing utilities, max-width containers). All glass effects,
typography, animation, and visual tokens live here exclusively.
Never express glass or brand values through Tailwind classes.
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────
FONTS
Altone is loaded via @font-face (local).
Google Fonts handles: Pinyon Script, Syne, DM Mono.
Import in HTML before this stylesheet:
─────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-LightOblique.ttf') format('truetype');
font-weight: 300;
font-style: oblique;
font-display: swap;
}
@font-face {
font-family: 'Altone';
src: url('../fonts/altone/Altone-MediumOblique.ttf') format('truetype');
font-weight: 500;
font-style: oblique;
font-display: swap;
}
/* ═══════════════════════════════════════════════════════════════
ROOT — GLOBAL INVARIANTS
These never change between light/dark themes.
═══════════════════════════════════════════════════════════════ */
:root {
/* ── Brand Palette (invariant) ── */
--color-brand: #00AAAA;
--color-brand-bright: #00D4D4;
--color-brand-dim: #007E7E;
--color-brand-deep: #005F5F;
--color-white: #FFFFFF;
--color-black: #000000;
/* Brand tints for overlays */
--color-brand-tint-10: rgba(0, 170, 170, 0.10);
--color-brand-tint-15: rgba(0, 170, 170, 0.15);
--color-brand-tint-20: rgba(0, 170, 170, 0.20);
--color-brand-tint-30: rgba(0, 170, 170, 0.30);
/* ── Font Families ── */
--font-script: 'Pinyon Script', cursive;
--font-display: 'Syne', sans-serif;
--font-body: 'Altone', sans-serif;
--font-mono: 'DM Mono', monospace;
/* ── Type Scale ── */
--type-script: clamp(2rem, 5vw, 3.5rem);
/* Script accent — hero taglines only */
--type-h1: clamp(1.75rem, 4vw, 3rem);
/* Page title */
--type-h2: clamp(1.25rem, 3vw, 2rem);
/* Section / card title */
--type-h3: 1.25rem;
/* Sub-section */
--type-overline: 0.68rem;
/* Labels, badges, overlines */
--type-body-lg: 1rem;
/* Lead paragraph */
--type-body: 0.875rem;
/* Body copy */
--type-body-sm: 0.80rem;
/* Caption, helper text */
--type-ui: 0.78rem;
/* UI labels, CTA text */
--type-spec: 0.72rem;
/* Tile dims, prices — DM Mono */
/* ── Font Weights ── */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* ── Letter Spacing ── */
--tracking-script: 0em;
/* Natural — never override */
--tracking-overline: 0.22em;
/* Overlines, section labels */
--tracking-badge: 0.10em;
/* Badge text */
--tracking-cta: 0.08em;
/* CTA button text */
--tracking-spec: 0.04em;
/* DM Mono spec chips */
--tracking-body: 0em;
/* Body — no tracking */
/* ── Line Height ── */
--leading-script: 1.10;
--leading-h1: 1.10;
--leading-h2: 1.20;
--leading-h3: 1.20;
--leading-body: 1.60;
--leading-label: 1.00;
/* ── Spacing Scale (Base-8) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Layout ── */
--layout-max-width: 1100px;
--layout-gutter-mob: 16px;
--layout-gutter-tab: 20px;
--layout-gutter-dsk: 24px;
--layout-margin-mob: 16px;
--layout-margin-tab: 24px;
--layout-margin-dsk: 32px;
/* ── Border Radius ── */
--radius-pill: 999px;
/* Badges, status chips */
--radius-btn: 10px;
/* Buttons */
--radius-tag: 8px;
/* Size pills, filter chips */
--radius-card-sm: 14px;
/* Small glass info cards (L1) */
--radius-card: 20px;
/* Standard glass cards (L2) */
--radius-panel: 24px;
/* Section wrappers */
--radius-overlay: 28px;
/* Modals, drawers (L3) */
/* ── Glass Elevation — Light Mode ──────────────────────────
L00 glass-l00 1px blur · transparent · base layer
L0 glass-flat no blur · lightest fill · no shadow
L1 glass-card 20px · mid fill · soft lift
L2 glass-hero 32px · rich fill · deep lift
L3 glass-overlay 48px · heaviest fill · modal depth
─────────────────────────────────────────────────────────── */
--glass-l00-fill: transparent;
--glass-l00-border: var(--glass-l0-border);
--glass-l00-blur: 1px;
--glass-l00-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
--glass-l0-fill: rgba(255, 255, 255, 0.30);
--glass-l0-border: rgba(255, 255, 255, 0.60);
--glass-l0-blur: 0px;
--glass-l0-sat: 100%;
--glass-l0-shadow: none;
--glass-l1-fill: rgba(255, 255, 255, 0.55);
--glass-l1-border: rgba(255, 255, 255, 0.85);
--glass-l1-blur: 20px;
--glass-l1-sat: 180%;
--glass-l1-shadow: 0 8px 24px rgba(0, 80, 100, 0.10);
--glass-l2-fill: rgba(255, 255, 255, 0.45);
--glass-l2-border: rgba(255, 255, 255, 0.80);
--glass-l2-blur: 32px;
--glass-l2-sat: 200%;
--glass-l2-shadow: 0 20px 60px rgba(0, 100, 120, 0.15);
--glass-l3-fill: rgba(255, 255, 255, 0.60);
--glass-l3-border: rgba(255, 255, 255, 0.90);
--glass-l3-blur: 48px;
--glass-l3-sat: 220%;
--glass-l3-shadow: 0 32px 80px rgba(0, 80, 100, 0.20),
0 8px 24px rgba(0, 60, 80, 0.12);
/* ── Shared Glass Rim Highlights (both modes) ── */
--glass-rim-top: rgba(255, 255, 255, 0.88);
/* Inner top specular */
--glass-rim-left: rgba(255, 255, 255, 0.55);
/* Inner left catch-light */
--glass-rim-bottom: rgba(0, 0, 0, 0.04);
/* Inner bottom dark edge */
/* ── Shared Glass Shimmer (cursor-reactive via JS) ── */
--glass-shimmer-opacity: 0.26;
--glass-shimmer-size: 220px;
--glass-band-top: 0.20;
/* Top banding opacity, used in ::after */
--glass-refract: 0.90;
/* Refraction line brightness */
/* ── Animation ── */
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--duration-theme: 300ms;
--duration-blob: 8s;
--duration-fade: 400ms;
--ease-out: ease-out;
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Springy toggle/thumb */
--ease-glass: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* ── Focus Ring (Accessibility) ── */
--focus-ring: 0 0 0 3px rgba(0, 168, 168, 0.45);
--focus-ring-dark: 0 0 0 3px rgba(0, 212, 212, 0.40);
--focus-ring-offset: 2px;
/* ── Z-index Scale ── */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-overlay: 200;
--z-modal: 300;
--z-toast: 400;
}
/* ═══════════════════════════════════════════════════════════════
THEME — LIGHT (Liquid Surface)
Applied via .theme-light on or
Default theme — no class needed if light is baseline.
═══════════════════════════════════════════════════════════════ */
:root,
.theme-light {
/* ── Canvas & Ambient ── */
--surface-canvas: #e8f4f4;
--surface-blob-1: rgba(0, 200, 200, 0.22);
--surface-blob-2: rgba(0, 150, 160, 0.18);
--surface-blob-glow: rgba(200, 240, 240, 0.40);
/* ── Glass Surfaces (semantic) ── */
--surface-glass-flat: rgba(255, 255, 255, 0.30);
/* L0 */
--surface-glass-card: rgba(255, 255, 255, 0.55);
/* L1 */
--surface-glass-hero: rgba(255, 255, 255, 0.45);
/* L2 */
--surface-glass-overlay: rgba(255, 255, 255, 0.60);
/* L3 */
/* ── Borders ── */
--surface-border-glass: rgba(255, 255, 255, 0.80);
--surface-border-teal: rgba(0, 170, 170, 0.15);
--surface-border-subtle: rgba(0, 0, 0, 0.06);
/* ── Text ── */
--text-primary: #0A1A1A;
--text-secondary: rgba(10, 26, 26, 0.55);
--text-muted: rgba(10, 26, 26, 0.35);
--text-brand: var(--color-brand-deep);
--text-on-brand: #FFFFFF;
/* ── Glass Rim (light mode — white-dominant) ── */
--glass-rim-top-mode: rgba(255, 255, 255, 0.90);
--glass-rim-left-mode: rgba(255, 255, 255, 0.60);
--glass-rim-bottom-mode: rgba(0, 0, 0, 0.04);
/* ── Glow & Shadow (light mode) ── */
--glass-shadow-color: rgba(0, 80, 100, 0.14);
--glass-glow-color: rgba(0, 200, 200, 0.20);
/* ── Component Surface Fills ── */
--badge-bg: var(--color-brand-tint-10);
--badge-border: rgba(0, 170, 170, 0.22);
--badge-text: var(--color-brand-deep);
--chip-bg: rgba(255, 255, 255, 0.70);
--chip-border: rgba(0, 170, 170, 0.25);
--chip-text: #1a3333;
--toggle-off-bg: rgba(0, 0, 0, 0.09);
--toggle-off-border: rgba(0, 0, 0, 0.07);
--toggle-thumb-bg: linear-gradient(145deg, #ffffff, #e0f4f4);
--divider-color: linear-gradient(90deg,
transparent,
rgba(0, 168, 168, 0.20),
rgba(255, 255, 255, 0.50),
rgba(0, 168, 168, 0.20),
transparent);
/* ── Focus Ring ── */
--focus-ring-mode: var(--focus-ring);
}
/* ═══════════════════════════════════════════════════════════════
THEME — DARK (Frosted Tile)
Applied via .theme-dark on or
═══════════════════════════════════════════════════════════════ */
.theme-dark {
/* ── Canvas & Ambient ── */
--surface-canvas: #0d0d0d;
--surface-blob-1: rgba(0, 170, 170, 0.18);
--surface-blob-2: rgba(0, 100, 120, 0.15);
--surface-blob-glow: rgba(0, 80, 90, 0.10);
/* ── Glass Surfaces (semantic) ── */
--surface-glass-flat: rgba(255, 255, 255, 0.03);
/* L0 — barely visible */
--surface-glass-card: rgba(255, 255, 255, 0.04);
/* L1 */
--surface-glass-hero: rgba(255, 255, 255, 0.055);
/* L2 */
--surface-glass-overlay: rgba(255, 255, 255, 0.08);
/* L3 — modal */
/* ── Borders ── */
--surface-border-glass: rgba(0, 210, 210, 0.25);
/* Teal edge glow — Frosted Tile signature */
--surface-border-teal: rgba(0, 200, 200, 0.12);
--surface-border-subtle: rgba(255, 255, 255, 0.06);
/* ── L00 Glass (Dark Mode) ── */
--glass-l00-fill: rgba(0, 0, 0, 0.20);
/* Slight tint for contrast against bright images */
--glass-l00-border: var(--surface-border-subtle);
/* ── Text ── */
--text-primary: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.50);
--text-muted: rgba(255, 255, 255, 0.30);
--text-brand: var(--color-brand-bright);
--text-on-brand: #FFFFFF;
/* ── Glass Rim (dark mode — teal-dominant) ── */
--glass-rim-top-mode: rgba(0, 220, 220, 0.60);
/* Teal glow rim instead of white */
--glass-rim-left-mode: rgba(255, 255, 255, 0.12);
--glass-rim-bottom-mode: rgba(0, 0, 0, 0.40);
/* ── Glow & Shadow (dark mode — deeper) ── */
--glass-shadow-color: rgba(0, 0, 0, 0.50);
--glass-glow-color: rgba(0, 170, 170, 0.12);
/* ── Component Surface Fills ── */
--badge-bg: rgba(0, 170, 170, 0.12);
--badge-border: rgba(0, 200, 200, 0.25);
--badge-text: var(--color-brand-bright);
--chip-bg: rgba(255, 255, 255, 0.05);
--chip-border: rgba(0, 200, 200, 0.18);
--chip-text: rgba(255, 255, 255, 0.75);
--toggle-off-bg: rgba(255, 255, 255, 0.08);
--toggle-off-border: rgba(255, 255, 255, 0.06);
--toggle-thumb-bg: linear-gradient(145deg, #e0f4f4, #a8d8d8);
--divider-color: linear-gradient(90deg,
transparent,
rgba(0, 210, 210, 0.20),
rgba(0, 220, 220, 0.35),
rgba(0, 210, 210, 0.20),
transparent);
/* ── Focus Ring (brighter in dark) ── */
--focus-ring-mode: var(--focus-ring-dark);
}
/* ═══════════════════════════════════════════════════════════════
GLASS UTILITY CLASSES
Use these on semantic HTML elements directly.
All 4 levels work in both light and dark themes automatically.
═══════════════════════════════════════════════════════════════ */
/* ── Shared glass base (applied to all levels) ── */
.glass {
background: var(--surface-glass-card);
border: 1px solid var(--surface-border-glass);
border-radius: var(--radius-card);
/* 5-layer box-shadow stack */
box-shadow:
/* 1. Top specular rim */
0 1px 0 0 var(--glass-rim-top-mode) inset,
/* 2. Bottom dark edge */
0 -1px 0 0 var(--glass-rim-bottom-mode) inset,
/* 3. Left catch-light */
1px 0 0 0 var(--glass-rim-left-mode) inset,
/* 4. Ambient lift shadow */
var(--glass-l1-shadow),
/* 5. Brand glow */
0 0 80px -20px var(--glass-glow-color);
/* Cursor-reactive shimmer — JS sets --mx/--my */
position: relative;
overflow: hidden;
}
/* Shimmer band pseudo-element (JS-driven) */
.glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse var(--glass-shimmer-size) calc(var(--glass-shimmer-size) * 0.55) at var(--mx, 50%) var(--my, 25%),
rgba(255, 255, 255, var(--glass-shimmer-opacity)) 0%,
rgba(255, 255, 255, calc(var(--glass-shimmer-opacity) * 0.35)) 45%,
transparent 70%);
}
/* Static top light banding */
.glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 55%;
border-radius: inherit;
pointer-events: none;
z-index: 2;
background: linear-gradient(168deg,
rgba(255, 255, 255, var(--glass-band-top)) 0%,
rgba(255, 255, 255, calc(var(--glass-band-top) * 0.3)) 50%,
transparent 75%);
}
/* ── Content must sit above pseudo-elements ── */
.glass>* {
position: relative;
z-index: 3;
}
/* ── L00 · glass-l00 ── */
.glass-l00 {
background: var(--glass-l00-fill);
border: 1px solid var(--glass-l00-border);
backdrop-filter: blur(var(--glass-l00-blur));
-webkit-backdrop-filter: blur(var(--glass-l00-blur));
box-shadow: var(--glass-l00-shadow);
}
.glass-l00::before,
.glass-l00::after {
display: none;
}
/* ── L0 · glass-flat ── */
.glass-l0 {
background: var(--surface-glass-flat);
border-color: var(--glass-l0-border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.glass-l0::before,
.glass-l0::after {
display: none;
}
/* ── L1 · glass-card ── */
.glass-l1 {
background: var(--surface-glass-card);
border-color: var(--glass-l1-border);
border-radius: var(--radius-card-sm);
backdrop-filter: blur(var(--glass-l1-blur)) saturate(var(--glass-l1-sat));
-webkit-backdrop-filter: blur(var(--glass-l1-blur)) saturate(var(--glass-l1-sat));
}
/* ── L2 · glass-hero ── */
.glass-l2 {
background: var(--surface-glass-hero);
border-color: var(--glass-l2-border);
border-radius: var(--radius-card);
backdrop-filter: blur(var(--glass-l2-blur)) saturate(var(--glass-l2-sat));
-webkit-backdrop-filter: blur(var(--glass-l2-blur)) saturate(var(--glass-l2-sat));
box-shadow:
0 1px 0 0 var(--glass-rim-top-mode) inset,
0 -1px 0 0 var(--glass-rim-bottom-mode) inset,
1px 0 0 0 var(--glass-rim-left-mode) inset,
var(--glass-l2-shadow),
0 0 100px -20px var(--glass-glow-color);
}
/* ── L3 · glass-overlay (modals, drawers) ── */
.glass-l3 {
background: var(--surface-glass-overlay);
border-color: var(--glass-l3-border);
border-radius: var(--radius-overlay);
backdrop-filter: blur(var(--glass-l3-blur)) saturate(var(--glass-l3-sat));
-webkit-backdrop-filter: blur(var(--glass-l3-blur)) saturate(var(--glass-l3-sat));
box-shadow:
0 1px 0 0 var(--glass-rim-top-mode) inset,
0 -1px 0 0 var(--glass-rim-bottom-mode) inset,
1px 0 0 0 var(--glass-rim-left-mode) inset,
var(--glass-l3-shadow);
}
/* Refraction line — place as first child: */
.glass-refract-line {
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 1px;
border-radius: inherit;
background: linear-gradient(90deg,
transparent,
rgba(200, 255, 255, var(--glass-refract)) 25%,
rgba(255, 255, 255, 1.0) 50%,
rgba(200, 255, 255, var(--glass-refract)) 75%,
transparent);
z-index: 4;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
TYPOGRAPHY UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
/* Script — decorative hero use only */
.type-script {
font-family: var(--font-script);
font-size: var(--type-script);
font-weight: var(--weight-regular);
line-height: var(--leading-script);
letter-spacing: var(--tracking-script);
color: var(--text-primary);
}
/* Headings */
.type-h1 {
font-family: var(--font-display);
font-size: var(--type-h1);
font-weight: var(--weight-extrabold);
line-height: var(--leading-h1);
letter-spacing: -0.01em;
color: var(--text-primary);
}
.type-h2 {
font-family: var(--font-display);
font-size: var(--type-h2);
font-weight: var(--weight-bold);
line-height: var(--leading-h2);
color: var(--text-primary);
}
.type-h3 {
font-family: var(--font-display);
font-size: var(--type-h3);
font-weight: var(--weight-bold);
line-height: var(--leading-h3);
color: var(--text-primary);
}
/* Overline */
.type-overline {
font-family: var(--font-display);
font-size: var(--type-overline);
font-weight: var(--weight-bold);
line-height: var(--leading-label);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--text-muted);
}
/* Body */
.type-body-lg {
font-family: var(--font-body);
font-size: var(--type-body-lg);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
color: var(--text-secondary);
}
.type-body {
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: var(--weight-light);
line-height: var(--leading-body);
color: var(--text-secondary);
}
.type-body-sm {
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: var(--weight-light);
line-height: var(--leading-body);
color: var(--text-muted);
}
/* UI label */
.type-ui {
font-family: var(--font-body);
font-size: var(--type-ui);
font-weight: var(--weight-semibold);
line-height: var(--leading-label);
letter-spacing: var(--tracking-cta);
color: var(--text-primary);
}
/* Spec chip — DM Mono */
.type-spec {
font-family: var(--font-mono);
font-size: var(--type-spec);
font-weight: var(--weight-regular);
line-height: var(--leading-label);
letter-spacing: var(--tracking-spec);
color: var(--text-secondary);
}
/* ═══════════════════════════════════════════════════════════════
COMPONENT UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
/* ── Badge ── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-display);
font-size: var(--type-overline);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-badge);
text-transform: uppercase;
color: var(--badge-text);
background: var(--badge-bg);
border: 1px solid var(--badge-border);
border-radius: var(--radius-pill);
padding: var(--space-1) var(--space-3);
line-height: 1;
white-space: nowrap;
}
.badge-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-brand);
flex-shrink: 0;
}
.badge-dot--pulse {
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(0.6);
}
}
/* ── Spec Chip ── */
.spec-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: var(--type-spec);
font-weight: var(--weight-regular);
letter-spacing: var(--tracking-spec);
color: var(--chip-text);
background: var(--chip-bg);
border: 1px solid var(--chip-border);
border-radius: var(--radius-tag);
padding: var(--space-1) var(--space-3);
white-space: nowrap;
}
/* ── Button — Primary ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--type-ui);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-cta);
text-transform: uppercase;
text-decoration: none;
color: var(--text-on-brand);
background: linear-gradient(135deg,
var(--color-brand-bright),
var(--color-brand),
var(--color-brand-dim));
border: none;
border-radius: var(--radius-btn);
padding: var(--space-3) var(--space-6);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.30) inset,
0 8px 28px rgba(0, 168, 168, 0.35),
0 2px 6px rgba(0, 80, 80, 0.15);
/* GSAP controls transform — CSS only transitions shadow */
will-change: transform;
transform: translateZ(0);
transition:
box-shadow var(--duration-base) var(--ease-out);
}
/* Sweep shimmer on hover */
.btn::before {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
.btn:hover::before {
left: 120%;
}
.btn:hover {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.30) inset,
0 14px 36px rgba(0, 168, 168, 0.45),
0 4px 10px rgba(0, 80, 80, 0.20);
}
.btn:active {
transform: scale(0.97) translateY(0);
}
/* ── Button — Ghost ── */
.btn-ghost {
background: transparent;
color: var(--color-brand-dim);
border: 1.5px solid var(--surface-border-teal);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--color-brand-tint-10);
border-color: var(--color-brand);
box-shadow: none;
transform: translateY(-1px);
}
.btn-ghost::before {
display: none;
}
/* ── Focus Styles (Accessibility) ── */
.btn:focus-visible,
.btn-ghost:focus-visible {
outline: none;
box-shadow: var(--focus-ring-mode);
outline-offset: var(--focus-ring-offset);
}
/* ── Divider ── */
.divider {
height: 1px;
border: none;
background: var(--divider-color);
margin: 0;
}
/* ── Toggle Switch ── */
.toggle {
position: relative;
width: 50px;
height: 28px;
flex-shrink: 0;
}
.toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: absolute;
inset: 0;
border-radius: var(--radius-pill);
background: var(--toggle-off-bg);
border: 1px solid var(--toggle-off-border);
cursor: pointer;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) inset;
transition:
background var(--duration-slow) var(--ease-spring),
border-color var(--duration-slow) var(--ease-spring),
box-shadow var(--duration-slow) var(--ease-spring);
}
/* Glass sheen on track */
.toggle-track::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
border-radius: inherit;
pointer-events: none;
}
.toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--toggle-thumb-bg);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.90) inset,
0 2px 8px rgba(0, 0, 0, 0.18),
0 1px 2px rgba(0, 0, 0, 0.10);
transition:
transform var(--duration-slow) var(--ease-spring),
box-shadow var(--duration-slow) var(--ease-spring);
pointer-events: none;
}
/* Checked state */
.toggle input:checked~.toggle-track {
background: linear-gradient(135deg, var(--color-brand-bright), var(--color-brand));
border-color: rgba(0, 180, 180, 0.40);
box-shadow: 0 0 0 3px var(--color-brand-tint-15),
0 1px 3px rgba(0, 0, 0, 0.08) inset;
}
.toggle input:checked~.toggle-track .toggle-thumb {
transform: translateX(22px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.90) inset,
0 3px 10px rgba(0, 100, 100, 0.30),
0 1px 2px rgba(0, 0, 0, 0.10);
}
/* Focus */
.toggle input:focus-visible~.toggle-track {
box-shadow: var(--focus-ring-mode);
}
/* ── Apple-Style Slider ── */
.slider-wrap {
position: relative;
height: 28px;
display: flex;
align-items: center;
}
/* Glass tube track */
.slider-track {
position: relative;
width: 100%;
height: 5px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.65);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.60) inset,
0 1px 4px rgba(0, 80, 90, 0.12);
overflow: visible;
}
/* Tube rim highlights */
.slider-track::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
border-radius: var(--radius-pill) var(--radius-pill) 0 0;
pointer-events: none;
z-index: 1;
}
.slider-track::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.06), transparent);
border-radius: 0 0 var(--radius-pill) var(--radius-pill);
pointer-events: none;
z-index: 1;
}
/* Teal fill portion */
.slider-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: var(--radius-pill);
background: linear-gradient(90deg,
rgba(0, 168, 168, 0.55),
rgba(0, 200, 200, 0.35));
backdrop-filter: blur(4px);
border-right: 1px solid rgba(0, 200, 200, 0.50);
pointer-events: none;
}
/* Invisible range input — floats on top */
.slider-input {
position: absolute;
inset: -10px 0;
width: 100%;
height: calc(100% + 20px);
opacity: 0;
cursor: pointer;
z-index: 10;
-webkit-appearance: none;
appearance: none;
}
/* Glass bead thumb */
.slider-thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 35% 32%,
rgba(255, 255, 255, 0.95) 0%,
rgba(220, 244, 244, 0.90) 55%,
rgba(180, 230, 230, 0.85) 100%);
border: 1px solid rgba(0, 168, 168, 0.30);
box-shadow:
0 1px 0 rgba(255, 255, 255, 1.00) inset,
0 -0.5px 0 rgba(0, 0, 0, 0.06) inset,
0 3px 10px rgba(0, 100, 110, 0.25),
0 1px 3px rgba(0, 0, 0, 0.12);
pointer-events: none;
z-index: 5;
transition:
transform var(--duration-base) var(--ease-spring),
box-shadow var(--duration-base) var(--ease-out);
}
/* Specular dot on thumb */
.slider-thumb::before {
content: '';
position: absolute;
top: 5px;
left: 6px;
width: 6px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.90);
filter: blur(1px);
}
/* Hover/active thumb state */
.slider-wrap:hover .slider-thumb,
.slider-wrap.is-dragging .slider-thumb {
transform: translate(-50%, -50%) scale(1.20);
box-shadow:
0 1px 0 rgba(255, 255, 255, 1.00) inset,
0 4px 16px rgba(0, 130, 130, 0.32),
0 0 0 5px rgba(0, 168, 168, 0.12);
}
/* Focus */
.slider-input:focus-visible~.slider-thumb {
box-shadow:
0 1px 0 rgba(255, 255, 255, 1.00) inset,
var(--focus-ring-mode);
}
/* ═══════════════════════════════════════════════════════════════
LAYOUT HELPERS
Tailwind handles grid/flex. These are glass-system-specific.
═══════════════════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: var(--layout-max-width);
margin-inline: auto;
padding-inline: var(--layout-margin-mob);
}
@media (min-width: 480px) {
.container {
padding-inline: var(--layout-margin-tab);
}
}
@media (min-width: 768px) {
.container {
padding-inline: var(--layout-margin-dsk);
}
}
/* ═══════════════════════════════════════════════════════════════
AMBIENT BLOB SYSTEM
Three positioned divs create the background atmosphere.
JS animates via class or inline style — CSS defines the shapes.
═══════════════════════════════════════════════════════════════ */
.blob-scene {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
will-change: transform;
}
.blob-1 {
width: 520px;
height: 520px;
background: radial-gradient(circle, var(--surface-blob-1), transparent);
top: -120px;
left: -80px;
animation: blobDrift var(--duration-blob) ease-in-out infinite alternate;
}
.blob-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--surface-blob-2), transparent);
bottom: -80px;
right: -60px;
animation: blobDrift var(--duration-blob) ease-in-out infinite alternate;
animation-delay: -3s;
}
.blob-3 {
width: 280px;
height: 280px;
background: radial-gradient(circle, var(--surface-blob-glow), transparent);
top: 50%;
left: 55%;
animation: blobDrift var(--duration-blob) ease-in-out infinite alternate;
animation-delay: -6s;
}
@keyframes blobDrift {
0% {
transform: translate(0, 0) scale(1.00);
}
33% {
transform: translate(30px, -40px) scale(1.05);
}
66% {
transform: translate(-20px, 20px) scale(0.96);
}
100% {
transform: translate(15px, -15px) scale(1.03);
}
}
/* Noise grain overlay */
.grain-overlay {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px;
}
/* ═══════════════════════════════════════════════════════════════
THEME TRANSITION
Smooth crossfade when toggling .theme-light ↔ .theme-dark
═══════════════════════════════════════════════════════════════ */
body {
transition:
background-color var(--duration-theme) var(--ease-out),
color var(--duration-theme) var(--ease-out);
}
.glass,
.glass-l1,
.glass-l2,
.glass-l3 {
transition:
background var(--duration-theme) var(--ease-out),
border-color var(--duration-theme) var(--ease-out),
box-shadow var(--duration-theme) var(--ease-out),
backdrop-filter var(--duration-theme) var(--ease-out);
}
/* ═══════════════════════════════════════════════════════════════
REDUCED MOTION
Respects prefers-reduced-motion system setting.
Disables all animations; keeps visual state intact.
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
.blob {
animation: none !important;
}
.badge-dot--pulse {
animation: none !important;
opacity: 1;
}
.btn::before {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════
PAGE FADE-IN ANIMATION
Add .animate-in to sections/cards for staggered reveal.
Set --delay on each element for orchestration.
═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation:
fadeUp var(--duration-fade) var(--ease-out) var(--delay, 0ms) both;
}