/* ========================================================================== KEYBOARD GLYPH FIX — make ⌘ render consistently across every theme ========================================================================== `⌘K` appears across ~20 templates. Several themes set --t-font-mono to a web font (IBM Plex Mono, JetBrains Mono, Space Mono, Fira Code) that ships WITHOUT the U+2318 "Place of Interest Sign" glyph — so `⌘` renders as tofu. The system monos (SF Mono, Menlo, Consolas, DejaVu Sans Mono) all include it. We force kbd onto that stack ahead of the theme's own mono token. ========================================================================== */ kbd { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; } /* ========================================================================== BRAND MARK — canonical logo, global across every template ========================================================================== Single source of truth: assets/sample-logo.svg The asset contains both the orb mark and the "Company" wordmark in one file, so templates only need a single element to render the full brand lockup — no separate for the wordmark. Two rendering paths are supported: ────────────────────────────────────────────────────────────────────── PATH A — Themeable (recommended for nav, sidebar, footer) ────────────────────────────────────────────────────────────────────── CSS `mask-image` + `background-color: currentColor` so the logo picks up the active theme's colour. Works because the SVG file uses `fill="currentColor"` and the mask carves out the shape from the parent's background-color. Markup: Styles (already defined below — no per-template copy needed): .brand-logo { ... mask-image: url(assets/sample-logo.svg) ... } .brand-lockup { color: var(--t-primary); } ────────────────────────────────────────────────────────────────────── PATH B — Static (for places where colour must be fixed) ────────────────────────────────────────────────────────────────────── Use Company which renders the logo in its default colour (currentColor inherited from the document root, usually the primary text colour). Not themeable per theme but works with zero CSS. Rules: · Lockup size: 120–160 px wide on desktop, 28–32 px tall. · Do not distort the aspect ratio — the SVG viewBox is 455 × 95. · Pair with `color: var(--t-primary)` on the parent so the logo flows naturally into the theme's primary colour. · Never colour individual paths — recolour via `color` on the parent. ========================================================================== */ /* Flynge brand logo utility — used by every template's nav/footer. THEME-AGNOSTIC CHROME: always pure #000 on light surfaces, #FFF on dark. NEVER tinted to --t-primary. The Flynge shell sets --t-logo-color per theme based on surface luminance. */ .brand-logo { display: inline-block; width: 134px; height: 28px; background-color: var(--t-logo-color, #000000); -webkit-mask-image: url('assets/sample-logo.svg'); mask-image: url('assets/sample-logo.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; flex-shrink: 0; } .brand-logo.lg { width: 152px; height: 32px; } .brand-logo.sm { width: 114px; height: 24px; } /* Lockup wrapper — also locked to --t-logo-color so any text sitting next to the mark reads as Flynge chrome, not theme accent. */ .brand-lockup { display: inline-flex; align-items: center; color: var(--t-logo-color, #000000); text-decoration: none; transition: opacity var(--t-hover-duration) var(--t-hover-easing); } .brand-lockup:hover { opacity: 0.85; } .brand-lockup:focus-visible { outline: 2px solid var(--t-focus-ring); outline-offset: 4px; border-radius: 4px; } /* ========================================================================== Product X — Shared Token Definitions (all 12 themes) ========================================================================== Source of truth: theme-tool/src/themes/definitions.ts Naming convention: theme-tool/src/styles/tokens.css ─── WCAG/ADA COMPLIANCE ───────────────────────────────────────────────── All text-on-surface combinations in this file meet or exceed WCAG 2.1 Level AA minimums: · Normal body text (< 18pt / < 14pt bold) : 4.5 : 1 · Large text (≥ 18pt / ≥ 14pt bold) : 3.0 : 1 · UI components + graphical objects : 3.0 : 1 Token pairs audited: · --t-text-primary on --t-surface-base and --t-surface-card · --t-text-secondary on --t-surface-base and --t-surface-card · --t-text-tertiary on --t-surface-base and --t-surface-card · --t-primary-text on --t-primary (button labels) · --t-success-text on --t-success-subtle (semantic badges) · --t-warning-text on --t-warning-subtle · --t-error-text on --t-error-subtle · --t-primary on --t-primary-subtle (links, eyebrows) Several values were intentionally raised above their original project definitions (in theme-tool/src/themes/definitions.ts) to guarantee AA. See inline "AA fix" annotations per theme. When a new theme is added, run the audit — do not add any value below 4.5 : 1 for informational text. ───────────────────────────────────────────────────────────────────────── How to use: - Default (body with no class) = Theme 01 · Precision Dark - Switch themes by setting `document.body.className = "theme-"` - Every layout file links to this file and uses only var(--t-*) tokens Token taxonomy - --t-surface-* : backgrounds (base page + card) - --t-text-* : primary / secondary / tertiary text - --t-border-* : default / subtle strokes - --t-primary-* : brand colour + subtle + on-primary text - --t-secondary : accent colour - --t-success/-* : semantic (+ subtle + text variants) - --t-warning/-* : semantic - --t-error/-* : semantic - --t-focus-ring : focus outline colour - --t-skeleton-* : loading state base + highlight - --t-nav-background: navigation surface - --t-overlay : modal / dialog scrim - --t-font-* : display / body / mono stacks - --t-radius-* : button / card / input / badge - --t-btn-* : button geometry - --t-size-* : type scale - --t-display-* : display font tuning - --t-body-* : body font tuning - --t-section/card/... : layout spacing - --t-shadow-* : brief-only elevation tokens (:root default only) - --t-transition-* : brief-only motion tokens (:root default only) - --t-icon-* : brief-only iconography tokens (:root default only) ========================================================================== */ /* ─── DEFAULT · Theme 01 · Precision Dark ────────────────────────────────── */ :root { /* ══════════════════════════════════════════════════════════════════════════ LAYER 1 — BASE UNITS (Precision Dark defaults) These are the only values set directly. Every Layer 2 / Layer 3 token below derives from these via calc() / hsl(). In Product X, these are what the control-panel sliders set. Theme classes override them to change their personality; the derived scale recalculates automatically. ══════════════════════════════════════════════════════════════════════════ */ --t-space-unit: 8px; /* base grid unit — every spacing derives from this */ /* Fluid body size — smoothly scales from 15px (≤640px viewport) to 16px (≥1280px viewport). Every Layer 2 type token multiplies this value, so the whole type scale flexes proportionally with the vp. */ --t-type-base: clamp(15px, 0.8rem + 0.3125vw, 16px); --t-type-ratio: 1.25; /* Major Third — harmonious for UI */ --t-radius-base: 6px; /* personality multiplier — Precision Dark: sharp */ /* Primary colour in HSL components (#00D4FF ≈ hsl(190, 100%, 50%)) */ --t-primary-h: 190; --t-primary-s: 100%; --t-primary-l: 50%; /* Secondary colour (#A78BFA ≈ hsl(255, 92%, 76%)) */ --t-secondary-h: 255; --t-secondary-s: 92%; --t-secondary-l: 76%; /* ══════════════════════════════════════════════════════════════════════════ LAYER 2 — DERIVED SCALE (mathematical, never set directly) Do not override these in theme classes. Override Layer 1 instead. ══════════════════════════════════════════════════════════════════════════ */ /* Spacing scale — every value is a multiple of --t-space-unit */ --t-space-1: calc(var(--t-space-unit) * 0.5); /* 4px — micro */ --t-space-2: calc(var(--t-space-unit) * 1); /* 8px — base */ --t-space-3: calc(var(--t-space-unit) * 1.5); /* 12px — compact */ --t-space-4: calc(var(--t-space-unit) * 2); /* 16px — standard */ --t-space-5: calc(var(--t-space-unit) * 3); /* 24px — comfortable */ --t-space-6: calc(var(--t-space-unit) * 4); /* 32px — generous */ --t-space-7: calc(var(--t-space-unit) * 6); /* 48px — section component */ --t-space-8: calc(var(--t-space-unit) * 8); /* 64px — large */ --t-space-9: calc(var(--t-space-unit) * 10); /* 80px — hero */ --t-space-10: calc(var(--t-space-unit) * 16); /* 128px — maximum */ /* Radius scale — proportional to --t-radius-base */ --t-radius-sm: calc(var(--t-radius-base) * 0.667); /* badges, chips */ --t-radius-md: var(--t-radius-base); /* buttons, inputs */ --t-radius-lg: calc(var(--t-radius-base) * 1.333); /* cards, modals */ --t-radius-xl: calc(var(--t-radius-base) * 2.667); /* large containers */ /* No-capsule rule: ONLY buttons may be pill-shaped. Anything else that historically bound to --t-radius-pill (hero-metric chips, nav rails, progress wrappers, etc.) now resolves to the theme's card radius and renders as a rounded rectangle. --t-radius-card is injected per theme by the Flynge shell, so the result stays theme-consistent. */ --t-radius-pill: var(--t-radius-card, 8px); /* rounded rectangle, never a capsule */ /* ── Motion system — Part 25 of the design constitution ────────────── Speed, easing, and parallax intensity. Consumed by 00-motion.js and by theme overrides below. prefers-reduced-motion flattens all of these to 0 (see media query further down in this file). */ --t-motion-speed-instant: 0ms; --t-motion-speed-fast: 150ms; --t-motion-speed-standard: 200ms; --t-motion-speed-slow: 400ms; --t-motion-speed-glacial: 800ms; --t-motion-ease-snap: cubic-bezier(0.4, 0, 0.2, 1); --t-motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --t-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-motion-ease-luxury: cubic-bezier(0.16, 1, 0.3, 1); --t-motion-ease-editorial: cubic-bezier(0.76, 0, 0.24, 1); --t-parallax-subtle: 0.03; --t-parallax-medium: 0.06; --t-parallax-strong: 0.10; /* Primary colour — derived from HSL components, reflavours with --t-primary-h */ --t-primary-derived: hsl(var(--t-primary-h), var(--t-primary-s), var(--t-primary-l)); --t-primary-subtle-derived: hsla(var(--t-primary-h), var(--t-primary-s), var(--t-primary-l), 0.08); --t-primary-dark: hsl(var(--t-primary-h), var(--t-primary-s), calc(var(--t-primary-l) - 15%)); /* Secondary colour — derived from HSL components */ --t-secondary-derived: hsl(var(--t-secondary-h), var(--t-secondary-s), var(--t-secondary-l)); /* Motion — single transition source */ --t-transition-speed: 150ms; --t-transition-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ══════════════════════════════════════════════════════════════════════════ LAYER 3 — SEMANTIC TOKENS (named intent, reference Layer 2) These are what component CSS rules reference. Each theme below may override specific semantic tokens for personality, but the default values here derive cleanly from the Layer 2 scale. ══════════════════════════════════════════════════════════════════════════ */ /* Surfaces — raw values, per-theme (cannot be mathematically derived) */ --t-surface-base: #0B0D12; --t-surface-card: #141720; /* Primary + accent — alias to derived HSL so Layer 1 changes cascade */ --t-primary: var(--t-primary-derived); --t-secondary: var(--t-secondary-derived); --t-primary-subtle: var(--t-primary-subtle-derived); --t-primary-text: #0D0F14; /* Text */ --t-text-primary: #F1F5F9; --t-text-secondary: #94A3B8; --t-text-tertiary: #6F7D8F; /* AA fix: was #475569 (2.55) → 4.60 on surface-base */ /* Borders */ --t-border-default: #1E2535; --t-border-subtle: #161923; /* AA fix (WCAG 1.4.11 non-text contrast — 3:1 minimum for UI component borders). --t-border-default and --t-border-subtle are intentionally low-contrast for decorative card outlines and section dividers. For INTERACTIVE borders (buttons, chips, inputs, size / qty selectors) use --t-border-strong, which aliases to --t-text-tertiary. text-tertiary is already AA 4.5:1 per theme, so it trivially passes the 3:1 UI threshold and reflavours for free. */ --t-border-strong: var(--t-text-tertiary); /* Semantic */ --t-success: #22D3A0; --t-success-subtle: rgba(34, 211, 160, 0.1); --t-success-text: #22D3A0; --t-warning: #F59E0B; --t-warning-subtle: rgba(245, 158, 11, 0.1); --t-warning-text: #F59E0B; --t-error: #F43F5E; --t-error-subtle: rgba(244, 63, 94, 0.1); --t-error-text: #F43F5E; /* Focus / skeleton / nav / overlay */ --t-focus-ring: #00D4FF; --t-skeleton-base: #1A1D26; --t-skeleton-highlight: #232738; --t-nav-background: #0D0F16; --t-overlay: rgba(0, 0, 0, 0.65); /* Typography — stacks */ --t-font-display: 'DM Sans', system-ui, sans-serif; --t-font-body: 'DM Sans', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale — all derived from --t-type-base × --t-type-ratio^n. Values annotated as the result with the default base=16, ratio=1.25. */ --t-size-footnote: calc(var(--t-type-base) * 0.75); /* 12px */ --t-size-body: var(--t-type-base); /* 16px */ --t-size-subhead3: calc(var(--t-type-base) * var(--t-type-ratio)); /* 20px */ --t-size-subhead2: calc(var(--t-type-base) * var(--t-type-ratio) * var(--t-type-ratio)); /* 25px */ --t-size-subhead1: calc(var(--t-type-base) * var(--t-type-ratio) * var(--t-type-ratio) * var(--t-type-ratio)); /* 31.25px */ --t-size-headline: calc(var(--t-type-base) * var(--t-type-ratio) * var(--t-type-ratio) * var(--t-type-ratio) * var(--t-type-ratio)); /* 39.0625px */ --t-size-body2: calc(var(--t-type-base) * 0.875); /* 14px — secondary body copy */ /* Typography tuning */ --t-display-weight: 700; --t-display-leading: 1.2; --t-display-tracking: -0.02em; --t-body-weight: 400; --t-body-leading: 1.5; --t-body-tracking: 0em; --t-paragraph-spacing: var(--t-space-4); /* 16px */ /* Radius — semantic aliases reference the Layer 2 radius scale */ --t-radius-button: var(--t-radius-md); /* 6px */ --t-radius-card: var(--t-radius-lg); /* 8px */ --t-radius-input: var(--t-radius-md); /* 6px */ --t-radius-badge: var(--t-radius-sm); /* 4px */ /* Button geometry */ --t-btn-stroke-width: 0px; --t-btn-stroke-color: transparent; --t-btn-pad-h: calc(var(--t-space-unit) * 2.5); /* 20px */ --t-btn-pad-v: var(--t-space-3); /* 12px */ --t-btn-text-color: var(--t-primary-text); --t-btn-text-size: calc(var(--t-size-body) * 0.875); /* 14px */ /* Spacing — Precision Dark: DENSE, information-forward (all reference Layer 2) */ --t-section-spacing: calc(var(--t-space-unit) * 7); /* 56px */ --t-card-padding: var(--t-space-4); /* 16px */ --t-container-padding: var(--t-space-7); /* 48px */ --t-component-gap: var(--t-space-3); /* 12px */ --t-heading-margin: var(--t-space-3); /* 12px */ --t-grid-gap: var(--t-space-3); /* 12px */ /* ─── DECORATIVE LANGUAGE (Precision Dark baseline) ─── See Product X_LAYOUTS_BRIEF.md § Theme Decorative Language Specification. Every theme below overrides these to carry its own identity. Together with the colour/font/radius tokens above, they define a *visual signature* that survives the greyscale test. */ /* Hover timing — Precision Dark is instant (data tools respond now) */ --t-hover-duration: 0ms; --t-hover-easing: linear; /* Eyebrow / label treatment — mono, uppercase, tight tracking. This is the Bloomberg-terminal feel applied to every section label. */ --t-eyebrow-font: var(--t-font-mono); --t-eyebrow-size: calc(var(--t-size-footnote) * 0.917); /* ~11px */ --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.12em; --t-eyebrow-transform: uppercase; /* Image treatment — mood + contrast, no warmth */ --t-img-filter: brightness(0.85) contrast(1.05); /* Card hover — no lift, primary left-border accent instead */ --t-card-hover-lift: 0; --t-card-hover-shadow: 0 0 0 transparent; --t-card-hover-accent: inset 2px 0 0 var(--t-primary); /* Button hover — 8% brightness + subtle glow */ --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.08); --t-btn-hover-shadow: 0 0 12px rgba(0, 212, 255, 0.20); /* Section divider — 0.5px rule, functional not decorative */ --t-divider-style: solid; --t-divider-width: 1px; --t-divider-color: var(--t-border-default); /* ─── Brief-only tokens — :root defaults, never per-theme overridden ─── */ /* Shadows — not in project tokens. Project applies shadows via .std-card:hover and effects.css data-fx attributes. These :root defaults give standalone layouts a single consistent elevation scale to reference. */ --t-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10); --t-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.14); --t-shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.50); /* Icons — proportional to the grid unit */ --t-icon-size-sm: var(--t-space-4); /* 16px */ --t-icon-size-md: calc(var(--t-space-unit) * 2.5); /* 20px */ --t-icon-size-lg: var(--t-space-5); /* 24px */ --t-icon-stroke-width: 1.5; } /* ─── Theme 02 · Civic Trust ─────────────────────────────────────────────── */ .theme-civic-trust { --t-surface-base: #FFFFFF; --t-surface-card: #FFFFFF; --t-primary: #1D4ED8; --t-secondary: #065F46; --t-primary-subtle: #EFF6FF; --t-primary-text: #FFFFFF; --t-text-primary: #111827; --t-text-secondary: #4B5563; --t-text-tertiary: #6B7280; /* AA fix: was #9CA3AF (2.55) → 4.90 on white */ --t-border-default: #D1D5DB; --t-border-subtle: #E5E7EB; --t-success: #16A34A; --t-success-subtle: #F0FDF4; --t-success-text: #15803D; --t-warning: #D97706; --t-warning-subtle: #FFFBEB; --t-warning-text: #B45309; --t-error: #DC2626; --t-error-subtle: #FEF2F2; --t-error-text: #B91C1C; --t-focus-ring: #1D4ED8; --t-skeleton-base: #F3F4F6; --t-skeleton-highlight: #E5E7EB; --t-nav-background: #FFFFFF; --t-overlay: rgba(0, 0, 0, 0.4); --t-font-display: 'Lora', 'Georgia', serif; --t-font-body: 'Source Sans 3', 'Helvetica', sans-serif; --t-font-mono: 'Source Code Pro', ui-monospace, monospace; --t-radius-button: 4px; --t-radius-card: 4px; --t-radius-input: 4px; --t-radius-badge: 4px; /* Decorative language — Civic Trust: GOV.UK authority, measured */ --t-hover-duration: 200ms; --t-hover-easing: cubic-bezier(0.4, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 12px; --t-eyebrow-weight: 700; --t-eyebrow-tracking: 0.04em; --t-eyebrow-transform: none; --t-img-filter: none; --t-card-hover-lift: 0; --t-card-hover-shadow: 0 0 0 transparent; --t-card-hover-accent: inset 4px 0 0 var(--t-primary); --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.10); --t-btn-hover-shadow: 0 0 0 transparent; --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 80px; --t-card-padding: 24px; --t-grid-gap: 20px; } /* ─── Theme 03 · Warm Marketplace ────────────────────────────────────────── */ .theme-warm-marketplace { --t-surface-base: #FAFAF9; --t-surface-card: #FFFFFF; --t-primary: #D97706; --t-secondary: #0F766E; --t-primary-subtle: #FFFBEB; --t-primary-text: #1C1917; /* AA fix: was #FFFFFF (3.19 on primary) → 5.50 */ --t-text-primary: #1C1917; --t-text-secondary: #57534E; --t-text-tertiary: #78716C; /* AA fix: was #A8A29E (2.32) → 4.61 on surface-base */ --t-border-default: #E7E5E4; --t-border-subtle: #F5F5F4; --t-success: #16A34A; --t-success-subtle: #F0FDF4; --t-success-text: #15803D; --t-warning: #EA580C; --t-warning-subtle: #FFF7ED; --t-warning-text: #C2410C; --t-error: #DC2626; --t-error-subtle: #FEF2F2; --t-error-text: #B91C1C; --t-focus-ring: #D97706; --t-skeleton-base: #F5F5F4; --t-skeleton-highlight: #EEECEB; --t-nav-background: #FFFFFF; --t-overlay: rgba(28, 25, 23, 0.5); --t-font-display: 'Fraunces', 'Georgia', serif; --t-font-body: 'Nunito', system-ui, sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 24px; --t-radius-card: 12px; --t-radius-input: 12px; --t-radius-badge: 12px; /* Decorative language — Warm Marketplace: curated market, warmth */ --t-hover-duration: 250ms; --t-hover-easing: cubic-bezier(0.2, 0, 0, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 13px; --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.08em; --t-eyebrow-transform: none; --t-img-filter: brightness(1.02) saturate(1.08) sepia(0.06); --t-card-hover-lift: -4px; --t-card-hover-shadow: 0 12px 32px rgba(28, 25, 23, 0.14), 0 2px 8px rgba(28, 25, 23, 0.08); --t-card-hover-accent: none; --t-btn-hover-lift: -2px; --t-btn-hover-filter: brightness(1.08); --t-btn-hover-shadow: 0 4px 16px rgba(217, 119, 6, 0.25); --t-divider-style: none; --t-divider-width: 0; --t-section-spacing: 96px; --t-card-padding: 28px; --t-component-gap: 16px; --t-heading-margin: 16px; --t-grid-gap: 24px; } /* ─── Theme 06 · Luxury Refined ──────────────────────────────────────────── */ .theme-luxury-refined { --t-surface-base: #0F0E0C; --t-surface-card: #1A1714; --t-primary: #C9A84C; --t-secondary: #8B7355; --t-primary-subtle: rgba(201, 168, 76, 0.08); --t-primary-text: #0F0E0C; --t-text-primary: #FAF9F7; --t-text-secondary: #B5A99A; --t-text-tertiary: #8C7E6D; /* AA fix: was #6B6259 (3.10) → 4.89 on surface-base */ --t-border-default: #2E2A25; --t-border-subtle: #1F1C18; --t-success: #4D8B5E; --t-success-subtle: rgba(77, 139, 94, 0.1); --t-success-text: #4D8B5E; --t-warning: #C9A84C; --t-warning-subtle: rgba(201, 168, 76, 0.1); --t-warning-text: #C9A84C; --t-error: #B05252; --t-error-subtle: rgba(176, 82, 82, 0.1); --t-error-text: #B05252; --t-focus-ring: #C9A84C; --t-skeleton-base: #1A1714; --t-skeleton-highlight: #252018; --t-nav-background: #0F0E0C; --t-overlay: rgba(0, 0, 0, 0.75); --t-font-display: 'Cormorant Garamond', 'Georgia', serif; --t-font-body: 'Jost', 'Helvetica Neue', sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 2px; --t-radius-card: 2px; --t-radius-input: 2px; --t-radius-badge: 2px; /* Decorative language — Luxury Refined: slow, wide-tracked, precious */ --t-hover-duration: 400ms; --t-hover-easing: cubic-bezier(0.4, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 11px; --t-eyebrow-weight: 500; --t-eyebrow-tracking: 0.2em; --t-eyebrow-transform: uppercase; --t-img-filter: brightness(1.0) contrast(1.02) saturate(0.92); --t-card-hover-lift: 0; --t-card-hover-shadow: 0 0 0 transparent; --t-card-hover-accent: none; --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.05); --t-btn-hover-shadow: 0 0 0 transparent; --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 104px; --t-card-padding: 32px; --t-grid-gap: 24px; } /* ─── Theme 07 · Neon Industrial ─────────────────────────────────────────── */ .theme-neon-industrial { --t-surface-base: #0C1017; --t-surface-card: #161D28; --t-primary: #FF6B35; --t-secondary: #7EE8A2; --t-primary-subtle: rgba(255, 107, 53, 0.1); --t-primary-text: #0E131A; /* AA fix: was #FFFFFF (2.87 on primary) → 6.70 */ --t-text-primary: #E8ECF0; --t-text-secondary: #A0AABA; --t-text-tertiary: #7B8A9F; /* AA fix: was #6B7A8D (3.19) → 5.49 on surface-base */ --t-border-default: #1F2836; --t-border-subtle: #161D28; --t-success: #7EE8A2; --t-success-subtle: rgba(126, 232, 162, 0.12); --t-success-text: #7EE8A2; --t-warning: #FFD166; --t-warning-subtle: rgba(255, 209, 102, 0.12); --t-warning-text: #FFD166; --t-error: #FF4757; --t-error-subtle: rgba(255, 71, 87, 0.12); --t-error-text: #FF4757; --t-focus-ring: #FF6B35; --t-skeleton-base: #161D28; --t-skeleton-highlight: #1F2836; --t-nav-background: #0E131A; --t-overlay: rgba(0, 0, 0, 0.75); --t-font-display: 'Space Grotesk', 'Inter', sans-serif; --t-font-body: 'Inter', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-radius-button: 6px; --t-radius-card: 6px; --t-radius-input: 6px; --t-radius-badge: 4px; /* Decorative language — Neon Industrial: dark, precise, electric */ --t-hover-duration: 150ms; --t-hover-easing: cubic-bezier(0.2, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-mono); --t-eyebrow-size: 11px; --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.15em; --t-eyebrow-transform: uppercase; --t-img-filter: brightness(0.80) contrast(1.10) saturate(1.15) hue-rotate(-5deg); --t-card-hover-lift: 0; --t-card-hover-shadow: 0 0 16px rgba(255, 107, 53, 0.20), inset 0 0 16px rgba(255, 107, 53, 0.05); --t-card-hover-accent: inset 0 0 0 1px var(--t-primary); --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.10); --t-btn-hover-shadow: 0 0 20px rgba(255, 107, 53, 0.35); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 64px; --t-card-padding: 20px; --t-grid-gap: 16px; } /* ─── Theme 08 · Playful Consumer ────────────────────────────────────────── */ .theme-playful-consumer { --t-surface-base: #FFFFFF; --t-surface-card: #FFFFFF; --t-primary: #FF4E6A; --t-secondary: #6C63FF; --t-primary-subtle: #FFF0F2; --t-primary-text: #18181B; /* AA fix: was #FFFFFF (3.20 on primary) → 5.73 */ --t-text-primary: #18181B; --t-text-secondary: #52525B; --t-text-tertiary: #71717A; /* AA fix: was #A1A1AA (2.41) → 4.86 on white */ --t-border-default: #F0D0D5; --t-border-subtle: #FFF0F2; --t-success: #22C55E; --t-success-subtle: #F0FDF4; --t-success-text: #16A34A; --t-warning: #FBBF24; --t-warning-subtle: #FFFBEB; --t-warning-text: #D97706; --t-error: #EF4444; --t-error-subtle: #FEF2F2; --t-error-text: #DC2626; --t-focus-ring: #FF4E6A; --t-skeleton-base: #F4F4F5; --t-skeleton-highlight: #EBEBEB; --t-nav-background: #FFFFFF; --t-overlay: rgba(0, 0, 0, 0.4); --t-font-display: 'Nunito', 'Poppins', sans-serif; --t-font-body: 'Nunito', 'Poppins', sans-serif; --t-font-mono: 'Fira Code', ui-monospace, monospace; --t-radius-button: 9999px; --t-radius-card: 24px; --t-radius-input: 24px; --t-radius-badge: 12px; /* was 9999px — no capsules except buttons */ /* Decorative language — Playful Consumer: bouncy, friendly, tactile */ --t-hover-duration: 250ms; --t-hover-easing: cubic-bezier(0.34, 1.56, 0.64, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 13px; --t-eyebrow-weight: 700; --t-eyebrow-tracking: 0.04em; --t-eyebrow-transform: none; --t-img-filter: brightness(1.05) saturate(1.15); --t-card-hover-lift: -6px; --t-card-hover-shadow: 0 16px 32px rgba(255, 78, 106, 0.18), 0 4px 12px rgba(255, 78, 106, 0.10); --t-card-hover-accent: none; --t-btn-hover-lift: -3px; --t-btn-hover-filter: brightness(1.05); --t-btn-hover-shadow: 0 8px 20px rgba(255, 78, 106, 0.28); --t-divider-style: none; --t-divider-width: 0; --t-section-spacing: 88px; --t-card-padding: 24px; --t-grid-gap: 20px; } /* ─── Theme 09 · Brutalist Functional ────────────────────────────────────── */ .theme-brutalist-functional { --t-surface-base: #FFFFFF; --t-surface-card: #FFFFFF; --t-primary: #FFDD00; --t-secondary: #000000; --t-primary-subtle: #FFFDE0; --t-primary-text: #000000; --t-text-primary: #000000; --t-text-secondary: #444444; --t-text-tertiary: #666666; /* AA fix: was #999999 (2.85) → 5.74 on white */ --t-border-default: #000000; --t-border-subtle: #E0E0E0; --t-success: #00AA44; --t-success-subtle: #E6F9EE; --t-success-text: #00AA44; --t-warning: #FF8800; --t-warning-subtle: #FFF3E0; --t-warning-text: #FF8800; --t-error: #FF0000; --t-error-subtle: #FFE0E0; --t-error-text: #FF0000; --t-focus-ring: #FFDD00; --t-skeleton-base: #E0E0E0; --t-skeleton-highlight: #F5F5F5; --t-nav-background: #000000; --t-overlay: rgba(0, 0, 0, 0.75); --t-font-display: 'Bebas Neue', 'Impact', sans-serif; --t-font-body: 'IBM Plex Sans', 'Arial', sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 0px; --t-radius-card: 0px; --t-radius-input: 0px; --t-radius-badge: 0px; /* Decorative language — Brutalist Functional: hard shadows, ALL CAPS */ --t-hover-duration: 100ms; --t-hover-easing: cubic-bezier(0.2, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-display); --t-eyebrow-size: 14px; --t-eyebrow-weight: 700; --t-eyebrow-tracking: 0.06em; --t-eyebrow-transform: uppercase; --t-img-filter: contrast(1.15) saturate(0.85); --t-card-hover-lift: -2px; --t-card-hover-shadow: 4px 4px 0 var(--t-text-primary); --t-card-hover-accent: none; --t-btn-hover-lift: -2px; --t-btn-hover-filter: brightness(1.0); --t-btn-hover-shadow: 4px 4px 0 var(--t-text-primary); --t-divider-style: solid; --t-divider-width: 2px; --t-section-spacing: 72px; --t-card-padding: 24px; --t-grid-gap: 16px; } /* ─── Theme 10 · Glassmorphism Pro ───────────────────────────────────────── */ /* Refined 2026-04-15 to look like actual glassmorphism (floating coloured blobs bleeding through frosted cards) rather than just "dark with low contrast". The body gains a fixed multi-blob atmosphere and cards use a real backdrop-filter blur. AA invariant: `--t-surface-card` is an rgba with a DARK base (not white-alpha) so even when the brightest blob — indigo #6366F1 at 38% — bleeds through the 55% card, the effective card luminance stays below 0.08, giving white-ish text #F0F2FF (L≈0.87) a contrast floor of 11:1. See "Card rules" block below the token block. */ .theme-glassmorphism-pro { --t-surface-base: #0A0B1E; --t-surface-card: rgba(20, 22, 48, 0.55); /* dark blueish frosted pane */ --t-primary: #6366F1; --t-secondary: #EC4899; --t-primary-subtle: rgba(99, 102, 241, 0.1); --t-primary-text: #000000; /* AA fix: was #FFFFFF (4.46, fails) → 4.71 on primary */ --t-text-primary: #F0F2FF; --t-text-secondary: #DBE0ED; /* 2026-04-15: bumped from #9499CC (L=0.33) to cover AA on translucent glass. L≈0.72; AA on worst-case card (L≈0.10 under brightest blob). Used by body paragraphs, form helper text, secondary labels, list meta, etc. */ --t-text-tertiary: #D0D5E6; /* Bumped from #8082B8 (L=0.21). L≈0.63, AA on glass. Used by stat-labels, workout-lib-equip, tab-inactive, trainer-specialty, pricing-price-sub, etc. */ --t-border-default: rgba(255, 255, 255, 0.15); --t-border-subtle: rgba(255, 255, 255, 0.08); --t-success: #10B981; --t-success-subtle: rgba(16, 185, 129, 0.15); --t-success-text: #6EE7B7; /* Bumped from #10B981 to L≈0.72 for AA on glass (worst-case 4.8:1; was 3.07 on blob-lit card). */ --t-warning: #F59E0B; --t-warning-subtle: rgba(245, 158, 11, 0.15); --t-warning-text: #FCD34D; /* Bumped to L≈0.72 for AA on glass. */ --t-error: #EF4444; --t-error-subtle: rgba(239, 68, 68, 0.15); --t-error-text: #FCA5A5; /* Bumped to L≈0.60 for AA on glass. */ --t-focus-ring: #6366F1; --t-skeleton-base: rgba(255, 255, 255, 0.05); --t-skeleton-highlight: rgba(255, 255, 255, 0.1); --t-nav-background: rgba(10, 11, 30, 0.8); --t-overlay: rgba(0, 0, 0, 0.6); --t-font-display: 'Syne', 'Inter', sans-serif; --t-font-body: 'Inter', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-radius-button: 8px; --t-radius-card: 12px; --t-radius-input: 8px; --t-radius-badge: 6px; /* Decorative language — Glassmorphism Pro: frosted, dimensional, premium */ --t-hover-duration: 300ms; --t-hover-easing: cubic-bezier(0.2, 0, 0, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 12px; --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.08em; --t-eyebrow-transform: uppercase; --t-img-filter: brightness(1.02) contrast(1.04); --t-card-hover-lift: -2px; --t-card-hover-shadow: 0 12px 40px rgba(99, 102, 241, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18); --t-card-hover-accent: none; --t-btn-hover-lift: -1px; --t-btn-hover-filter: brightness(1.10); --t-btn-hover-shadow: 0 8px 24px rgba(99, 102, 241, 0.32); --t-divider-style: none; --t-divider-width: 0; --t-section-spacing: 96px; --t-card-padding: 28px; --t-grid-gap: 24px; } /* Glassmorphism Pro — atmosphere + cards. ─────────────────────────────────────── The ATMOSPHERE: four large colour blobs (indigo, pink, cyan, amber) painted onto the body as radial gradients. `background-attachment: fixed` pins them to the viewport where the browser supports it so the user sees blobs through their scroll — exactly what reference glass dashboards do. The CARDS: real `backdrop-filter: blur(…)` with a dark-tinted rgba base. AA-safe on any blob colour because the 55% base dominates. */ body.theme-glassmorphism-pro, body[data-theme="glassmorphism-pro"] { /* Base deepened to push the atmosphere more navy-purple. Solid colour handles anywhere the radial blobs have already faded to transparent. */ background-color: #070817; /* Four hot colour blobs — violet, magenta, cyan, orange — at high opacity with short glow falloff so each has a visibly saturated CORE rather than a uniform wash. Order: darker purple anchor first (painted under the others), then the brights. Colours mix where they overlap, reproducing the rich gradient-wash vibe of premium glassmorphism references. AA holds on any blob because the card's rgba(20,22,48,0.55) base dominates — text sits on L≈0.05. */ /* Each blob is anchored AT the viewport corner (0%/100% positions). Only a quarter-circle of the gradient is visible inside the canvas, which means the saturated CORE sits right at the corner and the fade runs diagonally inward. Reads as "light source emerging from the edge" — the signature of reference glassmorphism dashboards. */ background-image: radial-gradient(circle 850px at 0% 0%, rgba(139, 92, 246, 0.85) 0%, rgba(139, 92, 246, 0.28) 30%, transparent 65%), radial-gradient(circle 720px at 100% 0%, rgba(236, 72, 153, 0.78) 0%, rgba(236, 72, 153, 0.22) 30%, transparent 65%), radial-gradient(circle 800px at 100% 100%, rgba(34, 211, 238, 0.68) 0%, rgba(34, 211, 238, 0.20) 32%, transparent 65%), radial-gradient(circle 680px at 0% 100%, rgba(251, 146, 60, 0.65) 0%, rgba(251, 146, 60, 0.18) 30%, transparent 65%); background-repeat: no-repeat; background-attachment: fixed; } /* Glass cards — all surfaces get the frosted treatment (visual identity). The dark-tinted rgba base keeps text AA-legible even when a bright blob bleeds through the blur; the inset top highlight is the "catch light" on the top edge of a pane of glass. */ .theme-glassmorphism-pro .card, [data-theme="glassmorphism-pro"] .card, .theme-glassmorphism-pro .std-card, [data-theme="glassmorphism-pro"] .std-card, .theme-glassmorphism-pro .class-card, [data-theme="glassmorphism-pro"] .class-card, .theme-glassmorphism-pro .trainer-card, [data-theme="glassmorphism-pro"] .trainer-card, .theme-glassmorphism-pro .workout-lib-card, [data-theme="glassmorphism-pro"] .workout-lib-card, .theme-glassmorphism-pro .pricing-card, [data-theme="glassmorphism-pro"] .pricing-card, .theme-glassmorphism-pro .featured-card, [data-theme="glassmorphism-pro"] .featured-card, .theme-glassmorphism-pro .icon-card, [data-theme="glassmorphism-pro"] .icon-card, .theme-glassmorphism-pro .testimonial-card, [data-theme="glassmorphism-pro"] .testimonial-card, .theme-glassmorphism-pro .feature-bar-item, [data-theme="glassmorphism-pro"] .feature-bar-item, .theme-glassmorphism-pro .stat-item, [data-theme="glassmorphism-pro"] .stat-item, .theme-glassmorphism-pro .stat-card, [data-theme="glassmorphism-pro"] .stat-card, .theme-glassmorphism-pro .table-card, [data-theme="glassmorphism-pro"] .table-card, .theme-glassmorphism-pro .l-panel, [data-theme="glassmorphism-pro"] .l-panel, .theme-glassmorphism-pro .l-stat-card, [data-theme="glassmorphism-pro"] .l-stat-card, .theme-glassmorphism-pro .l-pricing-card, [data-theme="glassmorphism-pro"] .l-pricing-card, .theme-glassmorphism-pro .l-product-card, [data-theme="glassmorphism-pro"] .l-product-card, .theme-glassmorphism-pro .l-section-card, [data-theme="glassmorphism-pro"] .l-section-card, .theme-glassmorphism-pro .l-card, [data-theme="glassmorphism-pro"] .l-card, .theme-glassmorphism-pro .l-desk-panel, [data-theme="glassmorphism-pro"] .l-desk-panel, .theme-glassmorphism-pro .product-card, [data-theme="glassmorphism-pro"] .product-card, .theme-glassmorphism-pro .course-card, [data-theme="glassmorphism-pro"] .course-card, .theme-glassmorphism-pro .article-card, [data-theme="glassmorphism-pro"] .article-card, .theme-glassmorphism-pro .deal-card, [data-theme="glassmorphism-pro"] .deal-card, .theme-glassmorphism-pro .event-card, [data-theme="glassmorphism-pro"] .event-card, .theme-glassmorphism-pro .dish-card, [data-theme="glassmorphism-pro"] .dish-card, .theme-glassmorphism-pro .apartment-card, [data-theme="glassmorphism-pro"] .apartment-card, .theme-glassmorphism-pro .portfolio-card, [data-theme="glassmorphism-pro"] .portfolio-card { /* Glass illusion stack (outer to inner): 1. A diagonal white-alpha sheen painted ON the card — simulates light reflecting off a polished glass surface, hottest at the top-left, fades out by 50%. 2. A translucent dark base (40% alpha) underneath — lets the blobs behind the card bleed through visibly through the blur. Dropped from 55% to 40% so the colour transfer is felt. 3. Brightened top-edge catch-light (0.25 vs 0.12) — the edge of the glass catches more light than the body, a signature tell. 4. Inset bottom shadow (0.15 dark) — gives the pane internal depth; the eye reads it as a 3D object instead of a sticker. 5. Backdrop saturate(1.8) — colours behind come through MORE saturated after the blur, which reads as "I'm seeing them through real glass" rather than through a muddy gray filter. AA still holds: worst-case effective card luminance under the brightest blob stays ≈ 0.06, giving text #F0F2FF (L≈0.87) an 8.4:1 contrast floor (AA pass). */ background-color: rgba(10, 15, 35, 0.40) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important; backdrop-filter: blur(20px) saturate(1.8) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; /* 50% of prior 0.22 */ border-radius: 16px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.13), /* top edge catch-light halved too */ inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; transition: backdrop-filter 300ms cubic-bezier(0.2, 0, 0, 1), background-color 300ms cubic-bezier(0.2, 0, 0, 1), border-color 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1), box-shadow 300ms cubic-bezier(0.2, 0, 0, 1) !important; } /* Hover only on whole-card-clickable grid items (global rule). Cards with nested buttons (FAQs, pricing, forms) don't hover — their internal buttons handle that. */ .theme-glassmorphism-pro .product-card:hover, [data-theme="glassmorphism-pro"] .product-card:hover, .theme-glassmorphism-pro .course-card:hover, [data-theme="glassmorphism-pro"] .course-card:hover, .theme-glassmorphism-pro .article-card:hover, [data-theme="glassmorphism-pro"] .article-card:hover, .theme-glassmorphism-pro .deal-card:hover, [data-theme="glassmorphism-pro"] .deal-card:hover, .theme-glassmorphism-pro .event-card:hover, [data-theme="glassmorphism-pro"] .event-card:hover, .theme-glassmorphism-pro .dish-card:hover, [data-theme="glassmorphism-pro"] .dish-card:hover, .theme-glassmorphism-pro .apartment-card:hover, [data-theme="glassmorphism-pro"] .apartment-card:hover, .theme-glassmorphism-pro .portfolio-card:hover, [data-theme="glassmorphism-pro"] .portfolio-card:hover, .theme-glassmorphism-pro .listing-card:hover, [data-theme="glassmorphism-pro"] .listing-card:hover, .theme-glassmorphism-pro .class-card:hover, [data-theme="glassmorphism-pro"] .class-card:hover, .theme-glassmorphism-pro .trainer-card:hover, [data-theme="glassmorphism-pro"] .trainer-card:hover { /* Glass deepens — more blur, brighter edge highlight, subtle indigo halo. */ background-color: rgba(28, 32, 70, 0.70) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; backdrop-filter: blur(28px) saturate(1.6) !important; border-color: rgba(255, 255, 255, 0.13) !important; /* kept at half of prior 0.26 to match the card resting stroke */ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 28px rgba(99, 102, 241, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; transform: translateY(-2px); } /* ═══ Glassmorphism Pro — AA patches + liquid-glass buttons ══════════════ Everything that sits ON a glass surface needs brighter strokes / text to clear AA — the translucent dark card has an effective luminance that can reach 0.08–0.10 when a bright blob is peeking through, and the theme's default tertiary / border tokens were tuned for the solid #0A0B1E base. */ /* Form-field strokes — bump to ~3:1 contrast on glass cards. Native input borders use --t-border-default which at 0.15 alpha failed against the translucent card. 0.40 alpha gets us to ~4:1. */ .theme-glassmorphism-pro .input-field, [data-theme="glassmorphism-pro"] .input-field, .theme-glassmorphism-pro input[type="text"], [data-theme="glassmorphism-pro"] input[type="text"], .theme-glassmorphism-pro input[type="email"], [data-theme="glassmorphism-pro"] input[type="email"], .theme-glassmorphism-pro input[type="password"], [data-theme="glassmorphism-pro"] input[type="password"], .theme-glassmorphism-pro input[type="number"], [data-theme="glassmorphism-pro"] input[type="number"], .theme-glassmorphism-pro input[type="search"], [data-theme="glassmorphism-pro"] input[type="search"], .theme-glassmorphism-pro select, [data-theme="glassmorphism-pro"] select, .theme-glassmorphism-pro textarea, [data-theme="glassmorphism-pro"] textarea { border-color: rgba(255, 255, 255, 0.40) !important; background-color: rgba(10, 15, 35, 0.35) !important; } /* Locked achievement circle + label — default .locked treatment drops opacity too far for the glass context; text/icon disappears. */ .theme-glassmorphism-pro .achieve-circle.locked, [data-theme="glassmorphism-pro"] .achieve-circle.locked { opacity: 1 !important; color: rgba(240, 242, 255, 0.70) !important; background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.20) !important; } .theme-glassmorphism-pro .achieve-item.locked .achieve-name, [data-theme="glassmorphism-pro"] .achieve-item.locked .achieve-name { color: rgba(240, 242, 255, 0.75) !important; } /* Liquid-glass buttons — still clearly pressable but now frosted, with a diagonal sheen highlight, brighter top catch-light, and subtle depth shadow. Taller by 10px total (5px top + 5px bottom). */ .theme-glassmorphism-pro .btn, [data-theme="glassmorphism-pro"] .btn, .theme-glassmorphism-pro button.btn, [data-theme="glassmorphism-pro"] button.btn, .theme-glassmorphism-pro a.btn, [data-theme="glassmorphism-pro"] a.btn { padding-top: calc(var(--t-btn-pad-v, 12px) + 5px) !important; padding-bottom: calc(var(--t-btn-pad-v, 12px) + 5px) !important; /* 30px horizontal padding keeps the label from hitting the button's own edge — gives the glass pane breathing room and prevents the text reading as flush-to-edge on full-width buttons. */ padding-left: 30px !important; padding-right: 30px !important; -webkit-backdrop-filter: blur(10px) saturate(1.6) !important; backdrop-filter: blur(10px) saturate(1.6) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; /* dimmed to 40% of prior 0.24 */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.25) !important; transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1) !important; } /* Indigo reserved for interactive elements ONLY (Glassmorphism Pro rule). Decorative uses of --t-primary are reassigned to neutral light so the colour keeps its CTA signalling power and doesn't compete. Applies to: pricing bullets, stat numbers, hero-metric numbers, metric-kpi values, anywhere headings / accents were painted primary. */ .theme-glassmorphism-pro .pricing-features li::before, [data-theme="glassmorphism-pro"] .pricing-features li::before { background: rgba(255, 255, 255, 0.40) !important; /* neutral dot, 3.5:1 on glass */ } .theme-glassmorphism-pro .stat-number, [data-theme="glassmorphism-pro"] .stat-number, .theme-glassmorphism-pro .hero-metric strong, [data-theme="glassmorphism-pro"] .hero-metric strong, .theme-glassmorphism-pro .metric-kpi-value, [data-theme="glassmorphism-pro"] .metric-kpi-value, .theme-glassmorphism-pro .pricing-price, [data-theme="glassmorphism-pro"] .pricing-price, .theme-glassmorphism-pro .trainer-stat-value, [data-theme="glassmorphism-pro"] .trainer-stat-value, .theme-glassmorphism-pro .funnel-stage-count, [data-theme="glassmorphism-pro"] .funnel-stage-count { color: var(--t-text-primary) !important; /* #F0F2FF neutral white */ } /* Eyebrow / section-label accents also go neutral light. */ .theme-glassmorphism-pro .eyebrow, [data-theme="glassmorphism-pro"] .eyebrow, .theme-glassmorphism-pro .class-day-header.today, [data-theme="glassmorphism-pro"] .class-day-header.today { color: rgba(240, 242, 255, 0.70) !important; border-bottom-color: rgba(255, 255, 255, 0.24) !important; } /* Trainer accent bar — removed entirely for Glassmorphism Pro. The coloured chip competes with the glass atmosphere; in this theme identity comes from the blobs behind, not decorative markers on individual cards. */ .theme-glassmorphism-pro .trainer-accent, [data-theme="glassmorphism-pro"] .trainer-accent { display: none !important; } /* Primary button — translucent indigo (vs opaque), white text (overrides the theme's --t-primary-text=#000 which only worked on solid indigo; on glass indigo black drops below AA). */ .theme-glassmorphism-pro .btn-primary, [data-theme="glassmorphism-pro"] .btn-primary, .theme-glassmorphism-pro a.btn-primary, [data-theme="glassmorphism-pro"] a.btn-primary, .theme-glassmorphism-pro button.btn-primary, [data-theme="glassmorphism-pro"] button.btn-primary { background-color: rgba(99, 102, 241, 0.82) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.12) !important; /* dimmed to 40% of prior 0.30 */ } .theme-glassmorphism-pro .btn-primary:hover, [data-theme="glassmorphism-pro"] .btn-primary:hover, .theme-glassmorphism-pro a.btn-primary:hover, [data-theme="glassmorphism-pro"] a.btn-primary:hover, .theme-glassmorphism-pro button.btn-primary:hover, [data-theme="glassmorphism-pro"] button.btn-primary:hover { background-color: rgba(99, 102, 241, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 6px 22px rgba(99, 102, 241, 0.55) !important; transform: translateY(-1px); } /* Secondary / ghost button — near-invisible glass with a brighter stroke. */ .theme-glassmorphism-pro .btn-secondary, [data-theme="glassmorphism-pro"] .btn-secondary, .theme-glassmorphism-pro a.btn-secondary, [data-theme="glassmorphism-pro"] a.btn-secondary, .theme-glassmorphism-pro button.btn-secondary, [data-theme="glassmorphism-pro"] button.btn-secondary { background-color: rgba(255, 255, 255, 0.10) !important; color: #F0F2FF !important; border-color: rgba(255, 255, 255, 0.11) !important; /* dimmed to 40% of prior 0.28 */ } .theme-glassmorphism-pro .btn-secondary:hover, [data-theme="glassmorphism-pro"] .btn-secondary:hover, .theme-glassmorphism-pro a.btn-secondary:hover, [data-theme="glassmorphism-pro"] a.btn-secondary:hover, .theme-glassmorphism-pro button.btn-secondary:hover, [data-theme="glassmorphism-pro"] button.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.40) !important; transform: translateY(-1px); } /* ─── Theme 14 · Amp Room · v2 ──────────────────────────────────────────── */ /* Reference: https://dividedby13.com/ */ /* Raw. Crafted. Heavy. Earned — a warm-dark theme for craft & artisan */ /* brands. v2 ships a distinctive "amplifier chassis" card treatment — */ /* amber L-seam (top + right), clipped bottom-left corner, bolt-head rivets. */ /* v1 backup: public/templates/amp-room-v1.backup.css */ .theme-amp-room { --t-surface-base: #141210; /* very dark warm charcoal — aged iron */ --t-surface-card: #1E1B18; --t-primary: #D07525; /* oxidised amber, hsl(28,70%,48%) — 5.54:1 vs #141210 text */ --t-secondary: #62847B; /* iron grey-green, hsl(165,15%,45%) */ --t-primary-subtle: rgba(208, 117, 37, 0.10); --t-primary-text: #141210; /* AA pass: 5.54 on primary (amber is too light for white text) */ --t-text-primary: #E8E2D9; /* warm off-white — aged paper */ --t-text-secondary: #A8998C; /* warm tan — 6.2:1 on base (AA) */ --t-text-tertiary: #8A7E72; /* muted warm tan — 4.73:1 on base (AA) */ --t-border-default: rgba(255, 255, 255, 0.08); /* barely there on dark */ --t-border-subtle: rgba(255, 255, 255, 0.04); --t-success: #85A86A; --t-success-subtle: rgba(133, 168, 106, 0.10); --t-success-text: #A5C890; --t-warning: #E0A84A; --t-warning-subtle: rgba(224, 168, 74, 0.10); --t-warning-text: #E8BF75; --t-error: #C85A4A; --t-error-subtle: rgba(200, 90, 74, 0.10); --t-error-text: #E08070; --t-focus-ring: #D07525; --t-skeleton-base: #1E1B18; --t-skeleton-highlight: #2A2623; --t-nav-background: #0E0C0A; /* flat, no transparency, no blur */ --t-overlay: rgba(20, 18, 16, 0.78); --t-font-display: 'Barlow Condensed', 'Oswald', 'Impact', sans-serif; --t-font-body: 'IBM Plex Sans', system-ui, sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 3px; --t-radius-card: 3px; /* very small — hard, industrial edges */ --t-radius-input: 3px; --t-radius-badge: 2px; /* Decorative language — Amp Room: machine parts, weld seams, ticker tape. Motion is fast and snapping — no spring, no bounce. Card hover shifts the surface colour one notch lighter and shows a 1px primary "weld seam" along the top edge (via --t-card-hover-accent + template CSS binding). */ --t-hover-duration: 150ms; --t-hover-easing: cubic-bezier(0.4, 0, 0.2, 1); /* snap easing */ --t-eyebrow-font: var(--t-font-mono); --t-eyebrow-size: 11px; --t-eyebrow-weight: 700; --t-eyebrow-tracking: 0.10em; --t-eyebrow-transform: uppercase; --t-img-filter: brightness(0.92) contrast(1.08) saturate(0.90); --t-card-hover-lift: 0; --t-card-hover-shadow: 0 4px 24px rgba(0, 0, 0, 0.60); --t-card-hover-accent: inset 0 1px 0 var(--t-primary); /* weld seam */ --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.08); --t-btn-hover-shadow: 0 2px 12px rgba(208, 117, 37, 0.30); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 72px; /* denser — workshop, not gallery */ --t-card-padding: 20px; --t-component-gap: 12px; --t-heading-margin: 12px; --t-grid-gap: 16px; } /* Amp Room — "side-panel" cards. ────────────────────────────── Refined per creative direction 2026-04-15: strip back to a single amber stroke on the RIGHT edge only, all four corners straight, no rivets, no corner clip. The card reads as the side-panel of a metal enclosure viewed head-on — disciplined, industrial, and visibly distinct from every other theme (none of which touch a single edge with a coloured stroke). AA contrast: text inside the card lives on #1E1B18 at rest or #252220 on hover — both give >12:1 with --t-text-primary (#E8E2D9). The amber stroke is decorative and reads 5.0:1 against the card surface. Pass. */ /* Softened amber — the stroke sits in the room, doesn't shout across it. Amber primary is #D07525; at 45% alpha over #1E1B18 it reads as a muted brass-glow rather than a hard accent stripe. */ .theme-amp-room .card, [data-theme="amp-room"] .card, .theme-amp-room .std-card, [data-theme="amp-room"] .std-card, .theme-amp-room .class-card, [data-theme="amp-room"] .class-card, .theme-amp-room .trainer-card, [data-theme="amp-room"] .trainer-card, .theme-amp-room .workout-lib-card, [data-theme="amp-room"] .workout-lib-card, .theme-amp-room .pricing-card, [data-theme="amp-room"] .pricing-card, .theme-amp-room .featured-card, [data-theme="amp-room"] .featured-card, .theme-amp-room .icon-card, [data-theme="amp-room"] .icon-card, .theme-amp-room .testimonial-card, [data-theme="amp-room"] .testimonial-card, .theme-amp-room .feature-bar-item, [data-theme="amp-room"] .feature-bar-item, .theme-amp-room .stat-item, [data-theme="amp-room"] .stat-item, .theme-amp-room .stat-card, [data-theme="amp-room"] .stat-card, .theme-amp-room .table-card, [data-theme="amp-room"] .table-card, .theme-amp-room .l-panel, [data-theme="amp-room"] .l-panel, .theme-amp-room .l-stat-card, [data-theme="amp-room"] .l-stat-card, .theme-amp-room .l-pricing-card, [data-theme="amp-room"] .l-pricing-card, .theme-amp-room .l-product-card, [data-theme="amp-room"] .l-product-card, .theme-amp-room .l-section-card, [data-theme="amp-room"] .l-section-card, .theme-amp-room .l-card, [data-theme="amp-room"] .l-card, .theme-amp-room .l-desk-panel, [data-theme="amp-room"] .l-desk-panel, .theme-amp-room .product-card, [data-theme="amp-room"] .product-card, .theme-amp-room .course-card, [data-theme="amp-room"] .course-card, .theme-amp-room .article-card, [data-theme="amp-room"] .article-card, .theme-amp-room .deal-card, [data-theme="amp-room"] .deal-card, .theme-amp-room .event-card, [data-theme="amp-room"] .event-card, .theme-amp-room .dish-card, [data-theme="amp-room"] .dish-card, .theme-amp-room .apartment-card, [data-theme="amp-room"] .apartment-card, .theme-amp-room .portfolio-card, [data-theme="amp-room"] .portfolio-card { border: none !important; border-radius: 0 !important; clip-path: none !important; background-image: none !important; background-color: var(--t-surface-card) !important; /* Right-edge stroke only (softened amber) + drop shadow. No top, no bottom, no left. All four corners straight. */ box-shadow: inset -2px 0 0 0 rgba(208, 117, 37, 0.45), 0 4px 14px rgba(0, 0, 0, 0.55) !important; transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important; } .theme-amp-room .card:hover, [data-theme="amp-room"] .card:hover, .theme-amp-room .std-card:hover, [data-theme="amp-room"] .std-card:hover, .theme-amp-room .class-card:hover, [data-theme="amp-room"] .class-card:hover, .theme-amp-room .trainer-card:hover, [data-theme="amp-room"] .trainer-card:hover, .theme-amp-room .workout-lib-card:hover, [data-theme="amp-room"] .workout-lib-card:hover, .theme-amp-room .pricing-card:hover, [data-theme="amp-room"] .pricing-card:hover, .theme-amp-room .featured-card:hover, [data-theme="amp-room"] .featured-card:hover, .theme-amp-room .icon-card:hover, [data-theme="amp-room"] .icon-card:hover, .theme-amp-room .testimonial-card:hover, [data-theme="amp-room"] .testimonial-card:hover, .theme-amp-room .feature-bar-item:hover, [data-theme="amp-room"] .feature-bar-item:hover, .theme-amp-room .stat-item:hover, [data-theme="amp-room"] .stat-item:hover, .theme-amp-room .stat-card:hover, [data-theme="amp-room"] .stat-card:hover, .theme-amp-room .table-card:hover, [data-theme="amp-room"] .table-card:hover, .theme-amp-room .l-panel:hover, [data-theme="amp-room"] .l-panel:hover, .theme-amp-room .l-stat-card:hover, [data-theme="amp-room"] .l-stat-card:hover, .theme-amp-room .l-pricing-card:hover, [data-theme="amp-room"] .l-pricing-card:hover, .theme-amp-room .l-product-card:hover, [data-theme="amp-room"] .l-product-card:hover, .theme-amp-room .l-section-card:hover, [data-theme="amp-room"] .l-section-card:hover, .theme-amp-room .l-card:hover, [data-theme="amp-room"] .l-card:hover, .theme-amp-room .l-desk-panel:hover, [data-theme="amp-room"] .l-desk-panel:hover, .theme-amp-room .product-card:hover, [data-theme="amp-room"] .product-card:hover, .theme-amp-room .course-card:hover, [data-theme="amp-room"] .course-card:hover, .theme-amp-room .article-card:hover, [data-theme="amp-room"] .article-card:hover, .theme-amp-room .deal-card:hover, [data-theme="amp-room"] .deal-card:hover, .theme-amp-room .event-card:hover, [data-theme="amp-room"] .event-card:hover, .theme-amp-room .dish-card:hover, [data-theme="amp-room"] .dish-card:hover, .theme-amp-room .apartment-card:hover, [data-theme="amp-room"] .apartment-card:hover, .theme-amp-room .portfolio-card:hover, [data-theme="amp-room"] .portfolio-card:hover { /* Card "warms up" — stroke thickens a hair + surface lifts one notch. */ box-shadow: inset -3px 0 0 0 rgba(208, 117, 37, 0.65), 0 6px 22px rgba(0, 0, 0, 0.65) !important; background-color: #252220 !important; } /* Clean Room — "layered lab plate" cards. ────────────────────────────────────── Cards read as precision-cut lab plates stacked on a primary-blue ghost layer: white face on top, a hard-offset primary shadow peeks out along the bottom-right edges. Hard offset (no blur) keeps the look surgical and precise, matching the clinical / scientific personality. On hover the ghost layer extends slightly — the plate "lifts" along its own axis without any transform jitter. AA: text inside the card lives on pure white; contrast carries through the theme's --t-text-primary (#1A1A24 ≈ 18:1 on white). The ghost-blue shadow is decorative and fails AA-3:1 only at the edges — which is the desired effect (soft presence, not a hard content stripe). */ /* Base rest state for ALL card surfaces — just a hairline outline. Non-interactive cards (stat displays, testimonials, section wrappers) stop here: they get the clean Clean-Room face but no shadow, no drop-plate, no hover. That keeps them from implying "click me" and also reduces the visual weight on dense stat grids. */ .theme-clean-room .card, [data-theme="clean-room"] .card, .theme-clean-room .std-card, [data-theme="clean-room"] .std-card, .theme-clean-room .class-card, [data-theme="clean-room"] .class-card, .theme-clean-room .trainer-card, [data-theme="clean-room"] .trainer-card, .theme-clean-room .workout-lib-card, [data-theme="clean-room"] .workout-lib-card, .theme-clean-room .pricing-card, [data-theme="clean-room"] .pricing-card, .theme-clean-room .featured-card, [data-theme="clean-room"] .featured-card, .theme-clean-room .icon-card, [data-theme="clean-room"] .icon-card, .theme-clean-room .testimonial-card, [data-theme="clean-room"] .testimonial-card, .theme-clean-room .feature-bar-item, [data-theme="clean-room"] .feature-bar-item, .theme-clean-room .stat-item, [data-theme="clean-room"] .stat-item, .theme-clean-room .stat-card, [data-theme="clean-room"] .stat-card, .theme-clean-room .table-card, [data-theme="clean-room"] .table-card, .theme-clean-room .l-panel, [data-theme="clean-room"] .l-panel, .theme-clean-room .l-stat-card, [data-theme="clean-room"] .l-stat-card, .theme-clean-room .l-pricing-card, [data-theme="clean-room"] .l-pricing-card, .theme-clean-room .l-product-card, [data-theme="clean-room"] .l-product-card, .theme-clean-room .l-section-card, [data-theme="clean-room"] .l-section-card, .theme-clean-room .l-card, [data-theme="clean-room"] .l-card, .theme-clean-room .l-desk-panel, [data-theme="clean-room"] .l-desk-panel, .theme-clean-room .product-card, [data-theme="clean-room"] .product-card, .theme-clean-room .course-card, [data-theme="clean-room"] .course-card, .theme-clean-room .article-card, [data-theme="clean-room"] .article-card, .theme-clean-room .deal-card, [data-theme="clean-room"] .deal-card, .theme-clean-room .event-card, [data-theme="clean-room"] .event-card, .theme-clean-room .dish-card, [data-theme="clean-room"] .dish-card, .theme-clean-room .apartment-card, [data-theme="clean-room"] .apartment-card, .theme-clean-room .portfolio-card, [data-theme="clean-room"] .portfolio-card { border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 10px !important; background-color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1) !important; } /* Ghost-plate shadow ONLY on cards whose WHOLE SURFACE is clickable — grid items that navigate to detail views when you click anywhere on them. FAQ panels, pricing cards, stat displays, form containers, and content cards stay flat: their internal buttons/links are the real interactive elements, not the card itself. If you add a new whole-card-clickable class (e.g. .job-card), append it to both selector lists below; otherwise the card will render as a content-only outlined surface. */ .theme-clean-room .product-card, [data-theme="clean-room"] .product-card, .theme-clean-room .course-card, [data-theme="clean-room"] .course-card, .theme-clean-room .article-card, [data-theme="clean-room"] .article-card, .theme-clean-room .deal-card, [data-theme="clean-room"] .deal-card, .theme-clean-room .event-card, [data-theme="clean-room"] .event-card, .theme-clean-room .dish-card, [data-theme="clean-room"] .dish-card, .theme-clean-room .apartment-card, [data-theme="clean-room"] .apartment-card, .theme-clean-room .portfolio-card, [data-theme="clean-room"] .portfolio-card, .theme-clean-room .listing-card, [data-theme="clean-room"] .listing-card, .theme-clean-room .class-card, [data-theme="clean-room"] .class-card, .theme-clean-room .trainer-card, [data-theme="clean-room"] .trainer-card { /* Hard-offset primary ghost plate underneath. No blur — precise cut. */ box-shadow: 5px 5px 0 0 rgba(29, 98, 237, 0.22), 0 1px 2px rgba(0, 0, 0, 0.04) !important; } /* Hover only fires on cards that contain something clickable (a link or button). Content-only cards — stat displays, testimonials, section wrappers — stay still on hover because they aren't clickable and a rollover would create a false affordance. `:has(a, button)` matches any depth of descendant so pricing cards (CTA inside), product cards (link wrapper), course cards, etc. all qualify. */ .theme-clean-room .card:has(a, button):hover, [data-theme="clean-room"] .card:has(a, button):hover, .theme-clean-room .std-card:has(a, button):hover, [data-theme="clean-room"] .std-card:has(a, button):hover, .theme-clean-room .class-card:has(a, button):hover, [data-theme="clean-room"] .class-card:has(a, button):hover, .theme-clean-room .trainer-card:has(a, button):hover, [data-theme="clean-room"] .trainer-card:has(a, button):hover, .theme-clean-room .workout-lib-card:has(a, button):hover, [data-theme="clean-room"] .workout-lib-card:has(a, button):hover, .theme-clean-room .pricing-card:has(a, button):hover, [data-theme="clean-room"] .pricing-card:has(a, button):hover, .theme-clean-room .featured-card:has(a, button):hover, [data-theme="clean-room"] .featured-card:has(a, button):hover, .theme-clean-room .icon-card:has(a, button):hover, [data-theme="clean-room"] .icon-card:has(a, button):hover, .theme-clean-room .testimonial-card:has(a, button):hover, [data-theme="clean-room"] .testimonial-card:has(a, button):hover, .theme-clean-room .feature-bar-item:has(a, button):hover, [data-theme="clean-room"] .feature-bar-item:has(a, button):hover, .theme-clean-room .stat-item:has(a, button):hover, [data-theme="clean-room"] .stat-item:has(a, button):hover, .theme-clean-room .stat-card:has(a, button):hover, [data-theme="clean-room"] .stat-card:has(a, button):hover, .theme-clean-room .table-card:has(a, button):hover, [data-theme="clean-room"] .table-card:has(a, button):hover, .theme-clean-room .l-panel:has(a, button):hover, [data-theme="clean-room"] .l-panel:has(a, button):hover, .theme-clean-room .l-stat-card:has(a, button):hover, [data-theme="clean-room"] .l-stat-card:has(a, button):hover, .theme-clean-room .l-pricing-card:has(a, button):hover, [data-theme="clean-room"] .l-pricing-card:has(a, button):hover, .theme-clean-room .l-product-card:has(a, button):hover, [data-theme="clean-room"] .l-product-card:has(a, button):hover, .theme-clean-room .l-section-card:has(a, button):hover, [data-theme="clean-room"] .l-section-card:has(a, button):hover, .theme-clean-room .l-card:has(a, button):hover, [data-theme="clean-room"] .l-card:has(a, button):hover, .theme-clean-room .l-desk-panel:has(a, button):hover, [data-theme="clean-room"] .l-desk-panel:has(a, button):hover, .theme-clean-room .product-card:has(a, button):hover, [data-theme="clean-room"] .product-card:has(a, button):hover, .theme-clean-room .course-card:has(a, button):hover, [data-theme="clean-room"] .course-card:has(a, button):hover, .theme-clean-room .article-card:has(a, button):hover, [data-theme="clean-room"] .article-card:has(a, button):hover, .theme-clean-room .deal-card:has(a, button):hover, [data-theme="clean-room"] .deal-card:has(a, button):hover, .theme-clean-room .event-card:has(a, button):hover, [data-theme="clean-room"] .event-card:has(a, button):hover, .theme-clean-room .dish-card:has(a, button):hover, [data-theme="clean-room"] .dish-card:has(a, button):hover, .theme-clean-room .apartment-card:has(a, button):hover, [data-theme="clean-room"] .apartment-card:has(a, button):hover, .theme-clean-room .portfolio-card:has(a, button):hover, [data-theme="clean-room"] .portfolio-card:has(a, button):hover { /* Card slides down-right to meet its own ghost plate — on rest the plate peeks out from under the card at a 5px offset; on hover the card closes that gap, the two surfaces align, and the shadow all but disappears underneath. Reads as a crisp "click into place". */ transform: translate(5px, 5px); box-shadow: 0 0 0 0 rgba(29, 98, 237, 0), 0 1px 2px rgba(0, 0, 0, 0.05) !important; } /* ─── Theme 15 · Clean Room ──────────────────────────────────────────────── */ /* Reference: https://circledna.com/ */ /* Clinical. Credible. Precise. Warmly confident. Medical/scientific white */ /* aesthetic with a confident medium-blue primary — no corporate coldness. */ .theme-clean-room { --t-surface-base: #FFFFFF; --t-surface-card: #F8F9FA; --t-primary: #1D62ED; /* medium blue hsl(220,85%,52%) — 5.68:1 vs white */ --t-secondary: #2EACB8; /* teal-adjacent complement */ --t-primary-subtle: #EAF0FE; --t-primary-text: #FFFFFF; /* 5.68:1 on primary */ --t-text-primary: #1A1A24; /* near-black, slightly warm */ --t-text-secondary: #4B5563; /* 7.46:1 on white — AA pass */ --t-text-tertiary: #6B7280; /* 4.83:1 on white — AA pass */ --t-border-default: rgba(0, 0, 0, 0.08); --t-border-subtle: rgba(0, 0, 0, 0.04); --t-success: #16A34A; --t-success-subtle: #F0FDF4; --t-success-text: #15803D; --t-warning: #D97706; --t-warning-subtle: #FFFBEB; --t-warning-text: #B45309; --t-error: #DC2626; --t-error-subtle: #FEF2F2; --t-error-text: #B91C1C; --t-focus-ring: #1D62ED; --t-skeleton-base: #F3F4F6; --t-skeleton-highlight: #F9FAFB; --t-nav-background: #FFFFFF; --t-overlay: rgba(26, 26, 36, 0.5); --t-font-display: 'Manrope', 'Inter', system-ui, sans-serif; --t-font-body: 'Manrope', 'Inter', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-radius-button: 10px; --t-radius-card: 10px; --t-radius-input: 10px; --t-radius-badge: 8px; /* Decorative language — Clean Room: clinical precision, no flourish. */ --t-hover-duration: 200ms; --t-hover-easing: cubic-bezier(0, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 12px; --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.04em; --t-eyebrow-transform: uppercase; --t-img-filter: none; --t-card-hover-lift: -3px; --t-card-hover-shadow: 0 8px 16px rgba(30, 60, 180, 0.10); --t-card-hover-accent: none; --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.05); --t-btn-hover-shadow: 0 2px 8px rgba(30, 60, 180, 0.18); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 96px; --t-card-padding: 24px; --t-component-gap: 16px; --t-heading-margin: 16px; --t-grid-gap: 20px; } /* ─── Theme 16 · Body Studio ─────────────────────────────────────────────── */ /* Reference: https://thesculptsociety.com/ */ /* Editorial. Aspirational. Body-conscious. Quietly luxurious. Fashion-mag */ /* type with near-black primary actions and a dusty-terracotta accent. */ .theme-body-studio { --t-surface-base: #FAF9F7; /* warm cream, not yellow */ --t-surface-card: #FFFFFF; --t-primary: #231D1A; /* near-black editorial — 16.9:1 vs white */ --t-secondary: #CA8173; /* dusty terracotta, hsl(10,45%,62%) */ --t-primary-subtle: #F2EFEC; --t-primary-text: #FFFFFF; --t-text-primary: #0A0A0A; /* pure black — editorial choice */ --t-text-secondary: #595552; /* 7.2:1 on base — AA pass */ --t-text-tertiary: #7A7270; /* ~4.5:1 on base for meta/captions */ --t-border-default: rgba(10, 10, 10, 0.08); --t-border-subtle: rgba(10, 10, 10, 0.04); --t-success: #2F6F4E; --t-success-subtle: #ECF5EF; --t-success-text: #1F513A; --t-warning: #B96020; --t-warning-subtle: #FBF0E4; --t-warning-text: #8F4412; --t-error: #A83A2B; --t-error-subtle: #FAEDE9; --t-error-text: #7A281C; --t-focus-ring: #231D1A; --t-skeleton-base: #F0EEE9; --t-skeleton-highlight: #F7F5F1; --t-nav-background: rgba(250, 249, 247, 0.88); /* transitions to cream on scroll */ --t-overlay: rgba(10, 10, 10, 0.55); --t-font-display: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif; --t-font-body: 'DM Sans', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-radius-button: 5px; --t-radius-card: 5px; --t-radius-input: 5px; --t-radius-badge: 4px; /* Decorative language — Body Studio: editorial slow, image-forward. */ --t-hover-duration: 400ms; --t-hover-easing: cubic-bezier(0.16, 1, 0.3, 1); /* luxury easing */ --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 11px; --t-eyebrow-weight: 600; --t-eyebrow-tracking: 0.14em; --t-eyebrow-transform: uppercase; --t-img-filter: contrast(1.04); --t-card-hover-lift: 0; --t-card-hover-shadow: 0 12px 32px rgba(10, 10, 10, 0.08); --t-card-hover-accent: inset 0 0 0 1px rgba(10, 10, 10, 0.16); /* hairline */ --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.10); --t-btn-hover-shadow: 0 2px 8px rgba(10, 10, 10, 0.14); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 120px; --t-card-padding: 32px; --t-component-gap: 20px; --t-heading-margin: 20px; --t-grid-gap: 32px; } /* ─── Theme 17 · The Mondrian (slug kept as forest-matter) ──────────────── */ /* 2026-04-16 complete redo. De Stijl homage — warm cream canvas with sparse primary-colour patches anchored in background margins (parallax via background-attachment: fixed). Cards are solid white and fully cover the patches where content sits; patches peek through in the gutters. */ .theme-forest-matter { --t-surface-base: #F2EDE0; /* warm aged-poster cream */ --t-surface-card: #FFFFFF; /* crisp white — must fully cover patches */ --t-primary: #D93B2D; /* Mondrian red */ --t-secondary: #1F4FA6; /* Mondrian blue */ --t-primary-subtle: #F8DDD9; --t-primary-text: #FFFFFF; /* 5.0:1 on red */ --t-text-primary: #0A0A0A; /* ink black */ --t-text-secondary: #4A4540; --t-text-tertiary: #6B655A; /* 4.85:1 on cream */ --t-border-default: rgba(10, 10, 10, 0.14); --t-border-subtle: rgba(10, 10, 10, 0.06); --t-success: #2E6F3E; --t-success-subtle: #E6F0E8; --t-success-text: #1E5128; --t-warning: #B56A1A; --t-warning-subtle: #FBEED9; --t-warning-text: #854B0F; --t-error: #A4402E; --t-error-subtle: #F6E4DD; --t-error-text: #7A281C; --t-focus-ring: #D93B2D; --t-skeleton-base: #EAE2D0; --t-skeleton-highlight: #F0E9D9; --t-nav-background: #F2EDE0; --t-overlay: rgba(10, 10, 10, 0.60); --t-font-display: 'Space Grotesk', system-ui, sans-serif; --t-font-body: 'Inter', system-ui, sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 0px; --t-radius-card: 0px; --t-radius-input: 0px; --t-radius-badge: 0px; /* Decorative language — The Mondrian: refined De Stijl homage. */ --t-hover-duration: 200ms; --t-hover-easing: cubic-bezier(0, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-mono); --t-eyebrow-size: 11px; --t-eyebrow-weight: 500; --t-eyebrow-tracking: 0.14em; --t-eyebrow-transform: uppercase; --t-img-filter: grayscale(1) contrast(1.04); /* editorial mono photos */ --t-card-hover-lift: 0; --t-card-hover-shadow: 0 2px 8px rgba(10, 10, 10, 0.06); --t-card-hover-accent: inset 0 0 0 1px rgba(10, 10, 10, 0.40); --t-btn-hover-lift: 0; --t-btn-hover-filter: brightness(1.05); --t-btn-hover-shadow: 0 2px 8px rgba(217, 59, 45, 0.24); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 88px; --t-card-padding: 28px; --t-component-gap: 14px; --t-heading-margin: 14px; --t-grid-gap: 24px; /* Mondrian palette for background patches (used in the body rule below). Muted ~10-15% saturation off the pure primary tones so the backdrop never fights the content. */ --t-pal-red: rgba(217, 59, 45, 0.85); --t-pal-blue: rgba(31, 79, 166, 0.85); --t-pal-yellow: rgba(242, 201, 30, 0.85); } /* ─── The Mondrian backdrop — LARGE asymmetric colour blocks anchored at the viewport edges + thick black bars that act as compositional frame elements. The pattern is deliberately unbalanced (more mass on one side, less on the other) so the page reads as a De Stijl composition, not a symmetric wallpaper. RULE: patches never cross into the content column. The coloured blocks sit ONLY in the outer gutters, and are hidden entirely on viewports narrower than ~1440px (where the centered 1280px-max content column leaves no clear gutter for them to live in). */ body.theme-forest-matter, body[data-theme="forest-matter"] { background-color: #F2EDE0; /* Below the gutter-breakpoint we show NO patches — the page stays a clean cream canvas. The larger-viewport rule below re-adds them. */ background-image: none; } @media (min-width: 1440px) { body.theme-forest-matter, body[data-theme="forest-matter"] { background-image: /* RED rectangle — tall block anchoring top-left edge (120×340px). */ linear-gradient(#D93B2D, #D93B2D), /* BLUE rectangle — wide block hanging from top-right (240×110px). */ linear-gradient(#1F4FA6, #1F4FA6), /* YELLOW block — square-ish, mid-page left edge (180×110px). */ linear-gradient(#F2C91E, #F2C91E), /* THICK BLACK HORIZONTAL BAR — 3px at 460px, runs full width. */ linear-gradient(#0A0A0A, #0A0A0A), /* Vertical black bar was removed: it cut through the Class Schedule heading and the MON column labels when the hero sits inset from the viewport. The horizontal bar alone is enough structural punctuation; the coloured blocks carry the rest. */ /* BLUE square anchor — right edge, ~2400px down (100×100px). */ linear-gradient(#1F4FA6, #1F4FA6), /* RED rectangle — left edge, ~3500px down (92×200px). */ linear-gradient(#D93B2D, #D93B2D), /* YELLOW block — right edge, ~4600px down (140×80px). */ linear-gradient(#F2C91E, #F2C91E); background-position: 0 80px, calc(100vw - 240px) 0, 0 1700px, 0 460px, calc(100vw - 100px) 2400px, 0 3500px, calc(100vw - 140px) 4600px; background-size: 120px 340px, /* red tall block */ 240px 110px, /* blue wide block */ 180px 110px, /* yellow mid block */ 100vw 3px, /* black horizontal bar */ 100px 100px, /* blue square */ 92px 200px, /* red tall accent */ 140px 80px; /* yellow accent */ background-repeat: no-repeat; } } /* /@media (min-width: 1440px) */ /* ─── Cards — De Stijl composition blocks. Every card carries a THICK coloured top bar (6px) rotating through red → blue → yellow → black, a heavier 2px black border on the other three sides, and zero radius. The card IS a Mondrian composition unit. */ .theme-forest-matter .card, [data-theme="forest-matter"] .card, .theme-forest-matter .std-card, [data-theme="forest-matter"] .std-card, .theme-forest-matter .class-card, [data-theme="forest-matter"] .class-card, .theme-forest-matter .trainer-card, [data-theme="forest-matter"] .trainer-card, .theme-forest-matter .workout-lib-card, [data-theme="forest-matter"] .workout-lib-card, .theme-forest-matter .pricing-card, [data-theme="forest-matter"] .pricing-card, .theme-forest-matter .icon-card, [data-theme="forest-matter"] .icon-card, .theme-forest-matter .testimonial-card, [data-theme="forest-matter"] .testimonial-card, .theme-forest-matter .feature-bar-item, [data-theme="forest-matter"] .feature-bar-item, .theme-forest-matter .stat-item, [data-theme="forest-matter"] .stat-item, .theme-forest-matter .stat-card, [data-theme="forest-matter"] .stat-card, .theme-forest-matter .table-card, [data-theme="forest-matter"] .table-card, .theme-forest-matter .l-panel, [data-theme="forest-matter"] .l-panel, .theme-forest-matter .l-stat-card, [data-theme="forest-matter"] .l-stat-card, .theme-forest-matter .l-pricing-card, [data-theme="forest-matter"] .l-pricing-card, .theme-forest-matter .l-product-card, [data-theme="forest-matter"] .l-product-card, .theme-forest-matter .l-section-card, [data-theme="forest-matter"] .l-section-card, .theme-forest-matter .l-card, [data-theme="forest-matter"] .l-card, .theme-forest-matter .l-desk-panel, [data-theme="forest-matter"] .l-desk-panel, .theme-forest-matter .product-card, [data-theme="forest-matter"] .product-card, .theme-forest-matter .course-card, [data-theme="forest-matter"] .course-card, .theme-forest-matter .article-card, [data-theme="forest-matter"] .article-card, .theme-forest-matter .deal-card, [data-theme="forest-matter"] .deal-card, .theme-forest-matter .event-card, [data-theme="forest-matter"] .event-card, .theme-forest-matter .dish-card, [data-theme="forest-matter"] .dish-card, .theme-forest-matter .apartment-card, [data-theme="forest-matter"] .apartment-card, .theme-forest-matter .portfolio-card, [data-theme="forest-matter"] .portfolio-card, .theme-forest-matter .listing-card, [data-theme="forest-matter"] .listing-card { background-color: #F8F3E5 !important; color: #0A0A0A !important; /* Three-sided heavy black border; top border is a thick coloured bar set by :nth-child below. */ border: 2px solid #0A0A0A !important; border-top-width: 6px !important; border-top-color: #0A0A0A !important; /* default; :nth-child overrides */ border-radius: 0 !important; box-shadow: none !important; position: relative; transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) !important; } /* ─── Rotating coloured TOP BARS — every card's top edge cycles through the De Stijl primaries (red → blue → yellow → black). 4-step cycle so the composition feels deliberate, not random. */ .theme-forest-matter .product-card:nth-child(4n+1), [data-theme="forest-matter"] .product-card:nth-child(4n+1), .theme-forest-matter .course-card:nth-child(4n+1), [data-theme="forest-matter"] .course-card:nth-child(4n+1), .theme-forest-matter .article-card:nth-child(4n+1), [data-theme="forest-matter"] .article-card:nth-child(4n+1), .theme-forest-matter .deal-card:nth-child(4n+1), [data-theme="forest-matter"] .deal-card:nth-child(4n+1), .theme-forest-matter .event-card:nth-child(4n+1), [data-theme="forest-matter"] .event-card:nth-child(4n+1), .theme-forest-matter .dish-card:nth-child(4n+1), [data-theme="forest-matter"] .dish-card:nth-child(4n+1), .theme-forest-matter .class-card:nth-child(4n+1), [data-theme="forest-matter"] .class-card:nth-child(4n+1), .theme-forest-matter .trainer-card:nth-child(4n+1), [data-theme="forest-matter"] .trainer-card:nth-child(4n+1), .theme-forest-matter .pricing-card:nth-child(4n+1), [data-theme="forest-matter"] .pricing-card:nth-child(4n+1), .theme-forest-matter .testimonial-card:nth-child(4n+1), [data-theme="forest-matter"] .testimonial-card:nth-child(4n+1), .theme-forest-matter .stat-card:nth-child(4n+1), [data-theme="forest-matter"] .stat-card:nth-child(4n+1) { border-top-color: #D93B2D !important; /* RED */ } .theme-forest-matter .product-card:nth-child(4n+2), [data-theme="forest-matter"] .product-card:nth-child(4n+2), .theme-forest-matter .course-card:nth-child(4n+2), [data-theme="forest-matter"] .course-card:nth-child(4n+2), .theme-forest-matter .article-card:nth-child(4n+2), [data-theme="forest-matter"] .article-card:nth-child(4n+2), .theme-forest-matter .deal-card:nth-child(4n+2), [data-theme="forest-matter"] .deal-card:nth-child(4n+2), .theme-forest-matter .event-card:nth-child(4n+2), [data-theme="forest-matter"] .event-card:nth-child(4n+2), .theme-forest-matter .dish-card:nth-child(4n+2), [data-theme="forest-matter"] .dish-card:nth-child(4n+2), .theme-forest-matter .class-card:nth-child(4n+2), [data-theme="forest-matter"] .class-card:nth-child(4n+2), .theme-forest-matter .trainer-card:nth-child(4n+2), [data-theme="forest-matter"] .trainer-card:nth-child(4n+2), .theme-forest-matter .pricing-card:nth-child(4n+2), [data-theme="forest-matter"] .pricing-card:nth-child(4n+2), .theme-forest-matter .testimonial-card:nth-child(4n+2), [data-theme="forest-matter"] .testimonial-card:nth-child(4n+2), .theme-forest-matter .stat-card:nth-child(4n+2), [data-theme="forest-matter"] .stat-card:nth-child(4n+2) { border-top-color: #1F4FA6 !important; /* BLUE */ } .theme-forest-matter .product-card:nth-child(4n+3), [data-theme="forest-matter"] .product-card:nth-child(4n+3), .theme-forest-matter .course-card:nth-child(4n+3), [data-theme="forest-matter"] .course-card:nth-child(4n+3), .theme-forest-matter .article-card:nth-child(4n+3), [data-theme="forest-matter"] .article-card:nth-child(4n+3), .theme-forest-matter .deal-card:nth-child(4n+3), [data-theme="forest-matter"] .deal-card:nth-child(4n+3), .theme-forest-matter .event-card:nth-child(4n+3), [data-theme="forest-matter"] .event-card:nth-child(4n+3), .theme-forest-matter .dish-card:nth-child(4n+3), [data-theme="forest-matter"] .dish-card:nth-child(4n+3), .theme-forest-matter .class-card:nth-child(4n+3), [data-theme="forest-matter"] .class-card:nth-child(4n+3), .theme-forest-matter .trainer-card:nth-child(4n+3), [data-theme="forest-matter"] .trainer-card:nth-child(4n+3), .theme-forest-matter .pricing-card:nth-child(4n+3), [data-theme="forest-matter"] .pricing-card:nth-child(4n+3), .theme-forest-matter .testimonial-card:nth-child(4n+3), [data-theme="forest-matter"] .testimonial-card:nth-child(4n+3), .theme-forest-matter .stat-card:nth-child(4n+3), [data-theme="forest-matter"] .stat-card:nth-child(4n+3) { border-top-color: #F2C91E !important; /* YELLOW */ } .theme-forest-matter .product-card:nth-child(4n), [data-theme="forest-matter"] .product-card:nth-child(4n), .theme-forest-matter .course-card:nth-child(4n), [data-theme="forest-matter"] .course-card:nth-child(4n), .theme-forest-matter .article-card:nth-child(4n), [data-theme="forest-matter"] .article-card:nth-child(4n), .theme-forest-matter .deal-card:nth-child(4n), [data-theme="forest-matter"] .deal-card:nth-child(4n), .theme-forest-matter .event-card:nth-child(4n), [data-theme="forest-matter"] .event-card:nth-child(4n), .theme-forest-matter .dish-card:nth-child(4n), [data-theme="forest-matter"] .dish-card:nth-child(4n), .theme-forest-matter .class-card:nth-child(4n), [data-theme="forest-matter"] .class-card:nth-child(4n), .theme-forest-matter .trainer-card:nth-child(4n), [data-theme="forest-matter"] .trainer-card:nth-child(4n), .theme-forest-matter .pricing-card:nth-child(4n), [data-theme="forest-matter"] .pricing-card:nth-child(4n), .theme-forest-matter .testimonial-card:nth-child(4n), [data-theme="forest-matter"] .testimonial-card:nth-child(4n), .theme-forest-matter .stat-card:nth-child(4n), [data-theme="forest-matter"] .stat-card:nth-child(4n) { border-top-color: #0A0A0A !important; /* BLACK */ } /* ─── Decorative anchor — red filled CIRCLE peeking over the top-right corner of every 3rd card. The signature Mondrian "planet" decoration from the reference posters. */ .theme-forest-matter .product-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .product-card:nth-child(3n+1)::after, .theme-forest-matter .course-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .course-card:nth-child(3n+1)::after, .theme-forest-matter .article-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .article-card:nth-child(3n+1)::after, .theme-forest-matter .deal-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .deal-card:nth-child(3n+1)::after, .theme-forest-matter .pricing-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .pricing-card:nth-child(3n+1)::after, .theme-forest-matter .testimonial-card:nth-child(3n+1)::after, [data-theme="forest-matter"] .testimonial-card:nth-child(3n+1)::after { content: ''; position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: #D93B2D; border: 2px solid #0A0A0A; z-index: 2; pointer-events: none; } /* ─── Featured card — RED outlined callout. Uses the same thick bar system but with a 2.5px RED border on ALL four sides, over-riding the black hairline. Loudest attention anchor on the page. */ .theme-forest-matter .featured-card, [data-theme="forest-matter"] .featured-card { background-color: #F8F3E5 !important; color: #0A0A0A !important; border: 2.5px solid #D93B2D !important; border-radius: 0 !important; box-shadow: none !important; position: relative; } /* ─── Headings — arrow suffix on h2 (poster-like Mondrian typography from the references: "PROJECT NAME →", "ABOUT US →"). Using the CSS escape sequence \2192 for → avoids any UTF-8 encoding issues that would render the glyph as mojibake. */ .theme-forest-matter h2::after, [data-theme="forest-matter"] h2::after { content: ' \2192'; color: #D93B2D; font-weight: 700; margin-left: 6px; display: inline-block; } /* Hover deepens the hairline border across standard cards. Featured card's red border stays red (it's already the attention anchor). */ .theme-forest-matter .product-card:hover, [data-theme="forest-matter"] .product-card:hover, .theme-forest-matter .course-card:hover, [data-theme="forest-matter"] .course-card:hover, .theme-forest-matter .article-card:hover, [data-theme="forest-matter"] .article-card:hover, .theme-forest-matter .deal-card:hover, [data-theme="forest-matter"] .deal-card:hover, .theme-forest-matter .event-card:hover, [data-theme="forest-matter"] .event-card:hover, .theme-forest-matter .dish-card:hover, [data-theme="forest-matter"] .dish-card:hover, .theme-forest-matter .apartment-card:hover, [data-theme="forest-matter"] .apartment-card:hover, .theme-forest-matter .portfolio-card:hover, [data-theme="forest-matter"] .portfolio-card:hover, .theme-forest-matter .listing-card:hover, [data-theme="forest-matter"] .listing-card:hover, .theme-forest-matter .class-card:hover, [data-theme="forest-matter"] .class-card:hover, .theme-forest-matter .trainer-card:hover, [data-theme="forest-matter"] .trainer-card:hover { border-color: rgba(10, 10, 10, 0.40) !important; } /* ─── Grayscale images — the editorial photography mode from the reference proposal decks. Content images read as mono so the primary colour accents never have to compete. Belt-and-braces in case --t-img-filter isn't honoured by a template stylesheet. */ .theme-forest-matter img, [data-theme="forest-matter"] img, .theme-forest-matter video, [data-theme="forest-matter"] video { filter: grayscale(1) contrast(1.04) !important; } /* Hero-wrapper backgrounds (CSS background-image on divs) — catch the same class patterns covered in the Circuit Dark theme. */ .theme-forest-matter [class*="hero-bg"], [data-theme="forest-matter"] [class*="hero-bg"], .theme-forest-matter [class*="-hero-bg"], [data-theme="forest-matter"] [class*="-hero-bg"], .theme-forest-matter .re-hero-bg, [data-theme="forest-matter"] .re-hero-bg, .theme-forest-matter .fitness-hero-bg, [data-theme="forest-matter"] .fitness-hero-bg { filter: grayscale(1) contrast(1.04) !important; } /* ─── Hero as a FLOATING Mondrian block — the whole hero section is inset from the viewport edges and treated as a card: thick 2px black border on 3 sides, 6px YELLOW top bar (Mondrian canvas-edge yellow), 0 radius. Body backdrop patches peek through the margins. Note: using `filter: grayscale()` on the section would desaturate the BORDER too — rendering the yellow top bar as grey. Instead we grayscale the background image via `background-blend-mode: luminosity` + a neutral grey `background-color`, which only affects the image layer and leaves the border in full colour. */ .theme-forest-matter section.fitness-hero, [data-theme="forest-matter"] section.fitness-hero, .theme-forest-matter section.re-hero, [data-theme="forest-matter"] section.re-hero, .theme-forest-matter section.travel-hero, [data-theme="forest-matter"] section.travel-hero, .theme-forest-matter section.food-hero, [data-theme="forest-matter"] section.food-hero, .theme-forest-matter section.event-hero, [data-theme="forest-matter"] section.event-hero, .theme-forest-matter section.portfolio-hero, [data-theme="forest-matter"] section.portfolio-hero, .theme-forest-matter section[class$="-hero"], [data-theme="forest-matter"] section[class$="-hero"], .theme-forest-matter .hero, [data-theme="forest-matter"] .hero { margin: 24px 32px 48px !important; /* ONLY the yellow top stroke carries the Mondrian anchor; the other three sides of the hero are unbordered so the image bleeds into the cream canvas. */ border: 0 !important; border-top: 6px solid #F2C91E !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; background-color: #888 !important; background-blend-mode: luminosity !important; } /* ─── Trainer accent bar — coloured stripe doesn't fit the palette. */ .theme-forest-matter .trainer-accent, [data-theme="forest-matter"] .trainer-accent { display: none !important; } /* ─── Buttons — primary = solid red fill, secondary = black outlined. Hover inverts the primary (outlined) and fills the secondary. */ .theme-forest-matter .btn.btn-primary, [data-theme="forest-matter"] .btn.btn-primary, .theme-forest-matter button.btn-primary, [data-theme="forest-matter"] button.btn-primary { background-color: #D93B2D !important; color: #FFFFFF !important; border: 1.5px solid #D93B2D !important; border-radius: 4px !important; } .theme-forest-matter .btn.btn-primary:hover, [data-theme="forest-matter"] .btn.btn-primary:hover, .theme-forest-matter button.btn-primary:hover, [data-theme="forest-matter"] button.btn-primary:hover { background-color: #F2EDE0 !important; color: #D93B2D !important; } .theme-forest-matter .btn.btn-secondary, [data-theme="forest-matter"] .btn.btn-secondary, .theme-forest-matter .btn.btn-outline, [data-theme="forest-matter"] .btn.btn-outline { background-color: transparent !important; color: #0A0A0A !important; border: 1.5px solid #0A0A0A !important; border-radius: 4px !important; } .theme-forest-matter .btn.btn-secondary:hover, [data-theme="forest-matter"] .btn.btn-secondary:hover, .theme-forest-matter .btn.btn-outline:hover, [data-theme="forest-matter"] .btn.btn-outline:hover { background-color: #0A0A0A !important; color: #F2EDE0 !important; } /* ─── Theme 18 · Chrome Pulse ────────────────────────────────────────────── */ /* Reference: https://www.nickelbronx.com/ */ /* Bold. Electric. Confident. Agency energy. Dark base with an electric */ /* orange primary and a complementary blue-violet. Primary CTAs glow. */ .theme-chrome-pulse { --t-surface-base: #0E0E12; --t-surface-card: #16161C; --t-primary: #F96610; /* electric orange hsl(22,95%,52%) */ --t-secondary: #6B51EC; /* electric violet */ --t-primary-subtle: rgba(249, 102, 16, 0.10); --t-primary-text: #0A0A0A; /* 6.91:1 on primary — orange too light for white */ --t-text-primary: #F0F0F4; --t-text-secondary: #9EA0B5; /* ~6.5:1 on base */ --t-text-tertiary: #7F82A3; /* ~4.8:1 on base */ --t-border-default: rgba(255, 255, 255, 0.06); --t-border-subtle: rgba(255, 255, 255, 0.03); --t-success: #60D394; --t-success-subtle: rgba(96, 211, 148, 0.10); --t-success-text: #87E3AB; --t-warning: #FFB454; --t-warning-subtle: rgba(255, 180, 84, 0.10); --t-warning-text: #FFC97E; --t-error: #FF5A5A; --t-error-subtle: rgba(255, 90, 90, 0.10); --t-error-text: #FF8585; --t-focus-ring: #F96610; --t-skeleton-base: #1A1A20; --t-skeleton-highlight: #222229; --t-nav-background: #0E0E12; --t-overlay: rgba(14, 14, 18, 0.78); --t-font-display: 'Syne', 'Space Grotesk', system-ui, sans-serif; --t-font-body: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-radius-button: 7px; --t-radius-card: 7px; --t-radius-input: 7px; --t-radius-badge: 5px; /* Decorative language — Chrome Pulse: agency swagger, primary glow. */ --t-hover-duration: 180ms; --t-hover-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring for interactive */ --t-eyebrow-font: var(--t-font-body); --t-eyebrow-size: 11px; --t-eyebrow-weight: 700; --t-eyebrow-tracking: 0.10em; --t-eyebrow-transform: uppercase; --t-img-filter: contrast(1.10) saturate(1.10); --t-card-hover-lift: 0; --t-card-hover-shadow: 0 0 24px rgba(249, 102, 16, 0.20); --t-card-hover-accent: inset 0 0 0 1px var(--t-primary); --t-btn-hover-lift: -1px; --t-btn-hover-filter: brightness(1.10); --t-btn-hover-shadow: 0 0 24px rgba(249, 102, 16, 0.35); --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 80px; --t-card-padding: 20px; --t-component-gap: 14px; --t-heading-margin: 14px; --t-grid-gap: 18px; } /* ─── Theme 22 · Circuit Dark ────────────────────────────────────────────── */ /* 2026-04-16 complete redo. Bare monochrome — black, white, and outlines carrying the entire visual structure. Pure #000 body, zero radius, all images pass through grayscale(1). Primary CTAs are white-filled (loud); secondary CTAs are outlined (quiet). References: Equinox / Madly / Endel. */ .theme-circuit-dark { --t-surface-base: #000000; --t-surface-card: #000000; /* card defined by OUTLINE, not fill */ --t-primary: #FFFFFF; --t-secondary: #FFFFFF; --t-primary-subtle: rgba(255, 255, 255, 0.08); --t-primary-text: #000000; /* 21:1 on white */ --t-text-primary: #FFFFFF; --t-text-secondary: #B5B5B5; /* 11.7:1 on black — AAA */ --t-text-tertiary: #808080; /* 5.3:1 on black — AA */ --t-border-default: rgba(255, 255, 255, 0.22); --t-border-subtle: rgba(255, 255, 255, 0.10); /* Status colours remain near-monochrome; only error retains a warm tint so alarms stay readable as alarms without breaking the palette. */ --t-success: #C8C8C8; --t-success-subtle: rgba(255, 255, 255, 0.06); --t-success-text: #D8D8D8; --t-warning: #A0A0A0; --t-warning-subtle: rgba(255, 255, 255, 0.06); --t-warning-text: #C8C8C8; --t-error: #C97171; --t-error-subtle: rgba(201, 113, 113, 0.10); --t-error-text: #D89090; --t-focus-ring: #FFFFFF; --t-skeleton-base: #1A1A1A; --t-skeleton-highlight: #2A2A2A; --t-nav-background: #000000; --t-overlay: rgba(0, 0, 0, 0.80); --t-font-display: 'Sora', 'Exo 2', system-ui, sans-serif; --t-font-body: 'IBM Plex Sans', system-ui, sans-serif; --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --t-radius-button: 0px; --t-radius-card: 0px; --t-radius-input: 0px; --t-radius-badge: 0px; /* Decorative language — Circuit Dark: bareness carried by outlines. */ --t-hover-duration: 180ms; --t-hover-easing: cubic-bezier(0, 0, 0.2, 1); --t-eyebrow-font: var(--t-font-mono); --t-eyebrow-size: 11px; --t-eyebrow-weight: 500; --t-eyebrow-tracking: 0.14em; --t-eyebrow-transform: uppercase; /* Every image passes through grayscale. The theme refuses colour in content the same way it refuses colour in chrome. */ --t-img-filter: grayscale(1) contrast(1.02); --t-card-hover-lift: 0; --t-card-hover-shadow: none; --t-card-hover-accent: inset 0 0 0 1px rgba(255, 255, 255, 0.60); --t-btn-hover-lift: 0; --t-btn-hover-filter: none; --t-btn-hover-shadow: none; --t-divider-style: solid; --t-divider-width: 1px; --t-section-spacing: 96px; --t-card-padding: 28px; --t-component-gap: 14px; --t-heading-margin: 14px; --t-grid-gap: 24px; } /* Body — pure black. No gradients, no blobs. */ body.theme-circuit-dark, body[data-theme="circuit-dark"] { background-color: #000000; background-image: none; } /* ─── Cards — outlined, zero radius, black fill. Hover doubles border opacity; no lift, no shadow. Applies across every card class in the template library. Wide selector list mirrors other theme blocks above. */ .theme-circuit-dark .card, [data-theme="circuit-dark"] .card, .theme-circuit-dark .std-card, [data-theme="circuit-dark"] .std-card, .theme-circuit-dark .class-card, [data-theme="circuit-dark"] .class-card, .theme-circuit-dark .trainer-card, [data-theme="circuit-dark"] .trainer-card, .theme-circuit-dark .workout-lib-card, [data-theme="circuit-dark"] .workout-lib-card, .theme-circuit-dark .pricing-card, [data-theme="circuit-dark"] .pricing-card, .theme-circuit-dark .featured-card, [data-theme="circuit-dark"] .featured-card, .theme-circuit-dark .icon-card, [data-theme="circuit-dark"] .icon-card, .theme-circuit-dark .testimonial-card, [data-theme="circuit-dark"] .testimonial-card, .theme-circuit-dark .feature-bar-item, [data-theme="circuit-dark"] .feature-bar-item, .theme-circuit-dark .stat-item, [data-theme="circuit-dark"] .stat-item, .theme-circuit-dark .stat-card, [data-theme="circuit-dark"] .stat-card, .theme-circuit-dark .table-card, [data-theme="circuit-dark"] .table-card, .theme-circuit-dark .l-panel, [data-theme="circuit-dark"] .l-panel, .theme-circuit-dark .l-stat-card, [data-theme="circuit-dark"] .l-stat-card, .theme-circuit-dark .l-pricing-card, [data-theme="circuit-dark"] .l-pricing-card, .theme-circuit-dark .l-product-card, [data-theme="circuit-dark"] .l-product-card, .theme-circuit-dark .l-section-card, [data-theme="circuit-dark"] .l-section-card, .theme-circuit-dark .l-card, [data-theme="circuit-dark"] .l-card, .theme-circuit-dark .l-desk-panel, [data-theme="circuit-dark"] .l-desk-panel, .theme-circuit-dark .product-card, [data-theme="circuit-dark"] .product-card, .theme-circuit-dark .course-card, [data-theme="circuit-dark"] .course-card, .theme-circuit-dark .article-card, [data-theme="circuit-dark"] .article-card, .theme-circuit-dark .deal-card, [data-theme="circuit-dark"] .deal-card, .theme-circuit-dark .event-card, [data-theme="circuit-dark"] .event-card, .theme-circuit-dark .dish-card, [data-theme="circuit-dark"] .dish-card, .theme-circuit-dark .apartment-card, [data-theme="circuit-dark"] .apartment-card, .theme-circuit-dark .portfolio-card, [data-theme="circuit-dark"] .portfolio-card, .theme-circuit-dark .listing-card, [data-theme="circuit-dark"] .listing-card { background-color: #000000 !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color 180ms cubic-bezier(0, 0, 0.2, 1) !important; } .theme-circuit-dark .product-card:hover, [data-theme="circuit-dark"] .product-card:hover, .theme-circuit-dark .course-card:hover, [data-theme="circuit-dark"] .course-card:hover, .theme-circuit-dark .article-card:hover, [data-theme="circuit-dark"] .article-card:hover, .theme-circuit-dark .deal-card:hover, [data-theme="circuit-dark"] .deal-card:hover, .theme-circuit-dark .event-card:hover, [data-theme="circuit-dark"] .event-card:hover, .theme-circuit-dark .dish-card:hover, [data-theme="circuit-dark"] .dish-card:hover, .theme-circuit-dark .apartment-card:hover, [data-theme="circuit-dark"] .apartment-card:hover, .theme-circuit-dark .portfolio-card:hover, [data-theme="circuit-dark"] .portfolio-card:hover, .theme-circuit-dark .listing-card:hover, [data-theme="circuit-dark"] .listing-card:hover, .theme-circuit-dark .class-card:hover, [data-theme="circuit-dark"] .class-card:hover, .theme-circuit-dark .trainer-card:hover, [data-theme="circuit-dark"] .trainer-card:hover { border-color: rgba(255, 255, 255, 0.60) !important; } /* ─── Images — grayscale across the theme. Applied on everything img-like inside any card, plus bare nodes in sections. The token --t-img-filter handles most cases; this belt-and-braces rule catches images that don't consume the token. */ .theme-circuit-dark img, [data-theme="circuit-dark"] img, .theme-circuit-dark video, [data-theme="circuit-dark"] video, .theme-circuit-dark [style*="background-image"], [data-theme="circuit-dark"] [style*="background-image"] { filter: grayscale(1) contrast(1.02) !important; } /* Hero backgrounds — templates use CSS background-image on wrapper divs whose class contains "hero" or "-bg". Pure attribute selectors miss those; enumerate the known wrapper patterns so grayscale applies. */ .theme-circuit-dark [class*="hero-bg"], [data-theme="circuit-dark"] [class*="hero-bg"], .theme-circuit-dark [class*="-hero-bg"], [data-theme="circuit-dark"] [class*="-hero-bg"], .theme-circuit-dark [class$="hero"], [data-theme="circuit-dark"] [class$="hero"], .theme-circuit-dark [class*="hero-image"], [data-theme="circuit-dark"] [class*="hero-image"], .theme-circuit-dark [class*="cover-image"], [data-theme="circuit-dark"] [class*="cover-image"], .theme-circuit-dark .re-hero-bg, [data-theme="circuit-dark"] .re-hero-bg, .theme-circuit-dark .fitness-hero-bg, [data-theme="circuit-dark"] .fitness-hero-bg, .theme-circuit-dark .travel-hero, [data-theme="circuit-dark"] .travel-hero, .theme-circuit-dark .food-hero, [data-theme="circuit-dark"] .food-hero, .theme-circuit-dark .event-hero, [data-theme="circuit-dark"] .event-hero, .theme-circuit-dark .portfolio-hero, [data-theme="circuit-dark"] .portfolio-hero, .theme-circuit-dark .fitness-hero, [data-theme="circuit-dark"] .fitness-hero { filter: grayscale(1) contrast(1.02) !important; } /* ─── Buttons — differentiated by fill vs outline. Primary (.btn, .btn-primary, most unadorned buttons): white fill, black text. Hover inverts to outlined white-on-black for feedback. Secondary (.btn-secondary, .btn-outline, .btn-ghost): transparent, 1.5px white outline, white text. Hover fills white. Zero radius on everything. */ .theme-circuit-dark .btn, [data-theme="circuit-dark"] .btn, .theme-circuit-dark button.btn, [data-theme="circuit-dark"] button.btn, .theme-circuit-dark .btn-primary, [data-theme="circuit-dark"] .btn-primary, .theme-circuit-dark button:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-link):not([class*="tab"]):not([class*="chip"]):not([class*="pill"]) { background-color: #FFFFFF !important; color: #000000 !important; border: 1.5px solid #FFFFFF !important; border-radius: 0 !important; } .theme-circuit-dark .btn:hover, [data-theme="circuit-dark"] .btn:hover, .theme-circuit-dark button.btn:hover, [data-theme="circuit-dark"] button.btn:hover, .theme-circuit-dark .btn-primary:hover, [data-theme="circuit-dark"] .btn-primary:hover { background-color: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; } /* Secondary / outline / ghost buttons — transparent with 1.5px outline. Hover fills white. */ .theme-circuit-dark .btn-secondary, [data-theme="circuit-dark"] .btn-secondary, .theme-circuit-dark .btn-outline, [data-theme="circuit-dark"] .btn-outline, .theme-circuit-dark .btn-ghost, [data-theme="circuit-dark"] .btn-ghost { background-color: transparent !important; color: #FFFFFF !important; border: 1.5px solid #FFFFFF !important; border-radius: 0 !important; } .theme-circuit-dark .btn-secondary:hover, [data-theme="circuit-dark"] .btn-secondary:hover, .theme-circuit-dark .btn-outline:hover, [data-theme="circuit-dark"] .btn-outline:hover, .theme-circuit-dark .btn-ghost:hover, [data-theme="circuit-dark"] .btn-ghost:hover { background-color: #FFFFFF !important; color: #000000 !important; } /* ─── Inputs — outlined, zero radius, transparent bg. */ .theme-circuit-dark input[type="text"], .theme-circuit-dark input[type="email"], .theme-circuit-dark input[type="password"], .theme-circuit-dark input[type="search"], .theme-circuit-dark input[type="number"], .theme-circuit-dark textarea, [data-theme="circuit-dark"] input[type="text"], [data-theme="circuit-dark"] input[type="email"], [data-theme="circuit-dark"] input[type="password"], [data-theme="circuit-dark"] input[type="search"], [data-theme="circuit-dark"] input[type="number"], [data-theme="circuit-dark"] textarea { background-color: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 0 !important; } .theme-circuit-dark input::placeholder, [data-theme="circuit-dark"] input::placeholder, .theme-circuit-dark textarea::placeholder, [data-theme="circuit-dark"] textarea::placeholder { color: #808080 !important; opacity: 1; } .theme-circuit-dark input:focus, [data-theme="circuit-dark"] input:focus, .theme-circuit-dark textarea:focus, [data-theme="circuit-dark"] textarea:focus { outline: none; border-color: #FFFFFF !important; } /* ─── Chips / pills / badges — outlined, zero radius. Keeps them consistent with the no-round-edges directive. */ .theme-circuit-dark .chip, [data-theme="circuit-dark"] .chip, .theme-circuit-dark .pill, [data-theme="circuit-dark"] .pill, .theme-circuit-dark .badge, [data-theme="circuit-dark"] .badge, .theme-circuit-dark .tag, [data-theme="circuit-dark"] .tag, .theme-circuit-dark .class-diff, [data-theme="circuit-dark"] .class-diff { background-color: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 0 !important; } /* ─── Trainer accent bar — decorative coloured stripe doesn't fit the mono palette. Hide in this theme. */ .theme-circuit-dark .trainer-accent, [data-theme="circuit-dark"] .trainer-accent { display: none !important; } /* ========================================================================== MOTION SYSTEM — reveal + scroll-reveal + hero parallax ========================================================================== These classes are applied by 00-motion.js at runtime (staggered hero children get .reveal-on-load; below-the-fold sections + cards get .scroll-reveal and receive .is-visible via IntersectionObserver). The prefers-reduced-motion media query flattens ALL durations to 0, neutralising the effects without removing the markup — per Part 25 of the design constitution, this override is non-negotiable. ========================================================================== */ .reveal-on-load { opacity: 0; transform: translateY(24px); animation: flynge-revealUp var(--t-motion-speed-slow, 400ms) var(--t-motion-ease-luxury, ease) forwards; } @keyframes flynge-revealUp { to { opacity: 1; transform: translateY(0); } } /* 80ms stagger between siblings — the interval Part 25 specifies as the cognitive sweet spot between "imperceptible" and "laboured". */ .reveal-on-load:nth-child(1) { animation-delay: 0ms; } .reveal-on-load:nth-child(2) { animation-delay: 80ms; } .reveal-on-load:nth-child(3) { animation-delay: 160ms; } .reveal-on-load:nth-child(4) { animation-delay: 240ms; } .reveal-on-load:nth-child(5) { animation-delay: 320ms; } .reveal-on-load:nth-child(6) { animation-delay: 400ms; } .reveal-on-load:nth-child(7) { animation-delay: 480ms; } .reveal-on-load:nth-child(8) { animation-delay: 560ms; } .scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--t-motion-speed-slow, 400ms) var(--t-motion-ease-luxury, ease), transform var(--t-motion-speed-slow, 400ms) var(--t-motion-ease-luxury, ease); will-change: opacity, transform; } .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } /* When a container is marked .scroll-reveal-group, its descendant reveals stagger on the same 80ms schedule instead of all-at-once. */ .scroll-reveal-group .scroll-reveal:nth-child(1) { transition-delay: 0ms; } .scroll-reveal-group .scroll-reveal:nth-child(2) { transition-delay: 80ms; } .scroll-reveal-group .scroll-reveal:nth-child(3) { transition-delay: 160ms; } .scroll-reveal-group .scroll-reveal:nth-child(4) { transition-delay: 240ms; } .scroll-reveal-group .scroll-reveal:nth-child(5) { transition-delay: 320ms; } .scroll-reveal-group .scroll-reveal:nth-child(6) { transition-delay: 400ms; } /* Hero parallax — 00-motion.js writes --parallax-y on each hero element tagged [data-parallax="hero-bg"]. We translate the ::before pseudo (the image layer) rather than the hero itself so the text stays pinned while the photograph drifts. Transform is the only property we animate here — we never touch `inset: 0` or the background-image declarations the template already set. */ [data-parallax="hero-bg"]::before { will-change: transform; transform: translate3d(0, var(--parallax-y, 0px), 0); } /* Motion safety net — per Part 25: "The prefers-reduced-motion override is non-negotiable. Never override it under any circumstance." */ @media (prefers-reduced-motion: reduce) { :root { --t-motion-speed-fast: 0ms; --t-motion-speed-standard: 0ms; --t-motion-speed-slow: 0ms; --t-motion-speed-glacial: 0ms; --t-parallax-subtle: 0; --t-parallax-medium: 0; --t-parallax-strong: 0; } .reveal-on-load, .scroll-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } [data-parallax="hero-bg"] { transform: none !important; } } /* ========================================================================== GLOBAL RESPONSIVE RULES — applies to every layout that links this file ========================================================================== Breakpoint mental model: · ≥ 1280 px → desktop (multi-column tables, full sidebars) · ≤ 1024 px → tablet (sidebar collapses to icon rail, tables REFLOW into stacked cards) · ≤ 768 px → mobile (single column, sidebar goes horizontal, tables become single-column card lists) · ≤ 375 px → mobile S (compact type, reduced padding, but still airy — no cramming) CORE RULES (non-negotiable) ─────────────────────────────────────────────────────────────────────── 1. NO HORIZONTAL SCROLL on mobile or tablet. Anywhere. · No `overflow-x: auto` as a layout escape hatch below 1024 px · Multi-column grids collapse to 1fr or stack explicitly · Tables reflow via display:block + CSS Grid per row 2. CARDS, NOT TABLES, at mobile/tablet. · rows become -as-card using display:grid per row · is display:none at mobile · Each row uses grid-template-areas so columns remap visually 3. ECONOMY OF SPACE, NOT CRAMPING. · Keep card padding ≥ 16 px on mobile, ≥ 20 px on tablet · Row gaps inside a card ≥ 6 px · Line-height ≥ 1.3 for body copy, ≥ 1.4 for small text · Group related values together (e.g. price + volume stacked) · Remove decorative redundancy (e.g. hide up/down arrow on a change column when a trend icon already carries the direction cue) · Body copy never below 12 px, touch targets never below 40 px 4. HIERARCHY MUST SURVIVE THE REFLOW. · Primary metric stays visually largest after reflow · Secondary labels shrink but stay legible (≥ 12 px, AA contrast) These rules apply to EVERY new layout in this folder. When adding a table component, write the mobile/tablet card reflow CSS at the same time — do not leave it for later. ========================================================================== */ /* ========================================================================== GLOBAL SCROLLBAR BEHAVIOUR ========================================================================== Rule: if a scrollbar is ever triggered, anywhere in any layout, it must float over content — never reserve a rail / gutter that shifts layout. Applies to: · the page root (body/html) · .table-wrap + any other inner-scroll container · sidebars, panes, dropdowns, modals The default browser behaviour on macOS already overlays scrollbars, but Windows, Linux, and any platform with "Always show scrollbars" reserves a rail. These rules force overlay-style scrollbars everywhere. ========================================================================== */ /* Never reserve a gutter for a scrollbar — layout must not shift when one appears or disappears. */ html, body, * { scrollbar-gutter: auto; } /* Firefox: thin, theme-aware, transparent track */ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent; } /* WebKit / Blink: 10px thin overlay scrollbar with rounded thumb. Track is transparent; the thumb uses currentColor so it picks up the scroll container's text colour — guaranteeing contrast in every theme without per-theme overrides. */ ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, currentColor 28%, transparent); border: 2px solid transparent; border-radius: 9999px; background-clip: content-box; min-height: 40px; min-width: 40px; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, currentColor 48%, transparent); background-clip: content-box; } /* Safety rail: never use overflow:scroll (which always reserves a rail). Page root uses auto so scrollbars only appear when content exceeds the viewport, and they overlay instead of pushing content. */ html { overflow-y: auto; overflow-x: hidden; } /* ========================================================================== HAIRLINE STROKE ANTIALIASING ========================================================================== Rule: any stroke less than 1.5 px applied to an element looks stark / pixelated on hi-DPI screens because the browser rasterises it at pixel-exact edges. Promoting the element to its own compositing layer (via transform: translateZ(0)) forces the browser to subpixel-render its outline via the GPU's bilinear filter, which softens the edge without changing the apparent thickness. Applied GLOBALLY via class selectors to every interactive UI component across all templates that carries a 1 px border. Purely decorative 1 px dividers (table separators, section underlines) are left alone — they're meant to read as "barely there" so the hairline look is desired. ========================================================================== */ .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-icon, .icon-btn, .chip, .segment, .segment button, .input, .nav-search input, .topbar-search input, .cta-input, .size-btn, .qty-input, .checkbox, .swatch, .featured-thumb, .date-pill, .ticker-chip, .product-tag, .pay-chip, .pager button { transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ========================================================================== GLOBAL MOBILE TYPE SCALE — locks typography at fixed sizes below 768 px. Applies to ALL templates that link to this token file. Desktop values are fluid (derived from --t-type-base × --t-type-ratio). Mobile values are explicit per the design brief: H1 32 · H2 26 · H3 22 · H4 20 · H5 18 · Body 16 · Body2 14 · Foot 12 ========================================================================== */ @media (max-width: 768px) { /* ── Type scale ── */ :root { --t-size-headline: 32px; --t-size-subhead1: 26px; --t-size-subhead2: 22px; --t-size-subhead3: 20px; --t-size-body: 16px; --t-size-body2: 14px; --t-size-footnote: 12px; /* ── Mobile spacing overrides ── */ --t-card-padding: var(--t-space-4); /* 16px — tighter cards */ --t-container-padding: var(--t-space-4); /* 16px — edge-to-edge */ --t-section-spacing: var(--t-space-6); /* 32px — compact rows */ --t-component-gap: var(--t-space-3); /* 12px */ --t-grid-gap: var(--t-space-3); /* 12px */ /* ── Mobile button geometry ── */ --t-btn-pad-h: var(--t-space-4); /* 16px — narrower buttons */ --t-btn-pad-v: var(--t-space-2); /* 8px — shorter buttons */ --t-btn-text-size: 13px; } h1 { font-size: 32px !important; } h2 { font-size: 26px !important; } h3 { font-size: 22px !important; } h4 { font-size: 20px !important; } h5 { font-size: 18px !important; } /* ── Global mobile button sizing ── */ .btn { min-height: 40px; } .btn svg { width: 14px; height: 14px; } .btn-sm { min-height: 32px; padding: 6px 12px; font-size: 12px; } /* ── Avatars shrink on mobile ── */ .avatar-btn .avatar, .comment .avatar, .comment-composer .avatar, .create-post .avatar { width: 32px; height: 32px; font-size: 11px; } /* ── Modal/overlay mobile refinements ── */ .image-modal { padding: var(--t-space-4); min-height: 380px; } .image-modal-frame > img { max-height: 320px; } .image-modal-nav { width: 36px; height: 36px; } .image-modal-actions { flex-wrap: wrap; gap: var(--t-space-2); } .image-modal-actions button { padding: 6px 10px; font-size: 11px; } .image-modal-meta { flex-direction: column; gap: var(--t-space-3); } .video-modal { padding: 0; border-radius: var(--t-radius-card); } .video-modal-close { top: var(--t-space-2); right: var(--t-space-2); width: 36px; height: 36px; } .video-modal-frame { border-radius: var(--t-radius-card) var(--t-radius-card) 0 0; } .video-modal-play { width: 56px; height: 56px; } .video-modal-play svg { width: 22px; height: 22px; } .video-modal-controls .ctrl { width: 28px; height: 28px; } .video-modal-controls .ctrl svg { width: 14px; height: 14px; } .video-modal-time { font-size: 10px; min-width: 70px; } .video-modal-meta { padding: var(--t-space-3) var(--t-space-4); } .video-modal-meta .video-title { font-size: 15px; } } /* ─── GLOBAL SELECT / DROPDOWN THEMING ──────────────────────────────── */ /* Force dark color-scheme on selects in dark themes so the OS popup matches */ :root { color-scheme: dark; } .theme-warm-marketplace, .theme-soft-minimal, .theme-milk-glass, .theme-clean-room, .theme-body-studio, .theme-forest-matter, .theme-system-zero { color-scheme: light; } select { background: var(--t-surface-card); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-badge); padding: var(--t-space-3); font-family: var(--t-font-body); font-size: var(--t-size-body); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; outline: none; transition: border-color var(--t-transition-speed); } select:focus { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-primary-subtle); } select:hover { border-color: var(--t-border-strong); } /* ─── CUSTOM DROPDOWN (replaces native