/* ============================================================ THEME 01 — Premium Dark ============================================================ Locked 2026-05-24. Aesthetic: masculine premium dark, restraint over flourish, big typography, glass cards over near-black bg. Aesthetic is locked. Brand color + paid color are tenant-customizable axes. Refs: ps11-task-management, nudero-nft, fitness-toolbox, financial-literacy-green, time-fun, fitpulse, vitaliy-dark. Sub-niche: masculine premium, fintech, sales-funnel, dating, crypto, high-ticket sales, executive task management. ============================================================ */ :root[data-theme="premium-dark"] { /* -- BRAND (tenant-customizable axis #1) -------------------- */ /* Default = Electric Blue (modern tech premium, NOT leon13). */ /* See palettes.json for 10 curated picker options. */ --brand: #3171C6; /* Electric Blue — palette default */ --brand-bright: #60a5fa; /* derived: brightened for accent */ --brand-glow: rgba(49, 113, 198, 0.30); --brand-soft: rgba(49, 113, 198, 0.18); /* -- PAID (tenant-customizable axis #2) ------------------- */ /* Default = Tangerine (distinctly NOT leon13 carmine). */ /* Curated picker options live in palettes.json. */ --paid: #FF5E32; /* Tangerine */ --paid-hover: #FB8060; --paid-soft: rgba(255, 94, 50, 0.18); --success: #10b981; --warning: #fbbf24; --error: #ef4444; /* -- BACKGROUND -------------------------------------------- */ --bg-base: #050a1c; /* near-black navy, app body */ --bg-elevated: #0b1228; /* slightly lighter — page sections */ --bg-glass-deep: rgba(15, 20, 56, 0.22); --bg-glass-warm: rgba(20, 8, 12, 0.6); /* Games / paid surfaces */ /* -- TEXT --------------------------------------------------- */ --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.55); --text-dim: rgba(255, 255, 255, 0.35); --text-silver: #c7cdd9; /* -- BORDERS / HIGHLIGHTS ---------------------------------- */ --border-glass: rgba(255, 255, 255, 0.06); --border-glass-strong: rgba(255, 255, 255, 0.10); --highlight-top: rgba(255, 255, 255, 0.12); /* inset edge glow */ --hairline: rgba(255, 255, 255, 0.05); /* -- RADIUS (4 free axis: тонкая experimental ось) --------- */ /* Tenant picks ONE of: soft / medium / sharp. */ /* Default = medium. Each block component reads --radius-md. */ --radius-soft: 24px; --radius-medium: 12px; --radius-sharp: 4px; --radius-md: var(--radius-medium); /* set by tenant pick */ /* Sub-radii — derived from chosen --radius-md proportion */ --radius-card: 16px; /* rounded-2xl */ --radius-pill: 999px; --radius-button: 12px; --radius-input: 12px; --radius-tag: 6px; /* -- SHADOWS / GLASS -------------------------------------- */ --shadow-card: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--hairline), 0 8px 28px -12px rgba(0, 0, 0, 0.45); --shadow-card-elevated: inset 0 1px 0 var(--highlight-top), inset 0 0 0 1px var(--hairline), 0 16px 48px -16px rgba(0, 0, 0, 0.6); --shadow-glow-brand: 0 0 24px var(--brand-glow); --shadow-glow-paid: 0 0 20px rgba(240, 50, 60, 0.25); --backdrop-blur: blur(18px) saturate(160%); /* -- TYPOGRAPHY (font-set picks display+body family) ------- */ --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; /* Type scale — LOCKED per canon */ --type-display-xl: 40px; /* hero numbers */ --type-display-lg: 32px; /* stats numbers */ --type-display-md: 28px; /* hero greeting */ --type-eyebrow-display: 26px; /* inline caps next to display */ --type-heading: 18px; /* card titles */ --type-eyebrow-stat: 15px; /* inline caps next to stat */ --type-body: 14px; /* body copy */ --type-meta: 12px; /* section eyebrows */ --type-caption: 11px; /* card metric captions */ --type-micro: 10px; /* CTA pill text */ --weight-black: 900; --weight-extrabold: 800; --weight-bold: 700; --weight-semi: 600; --weight-regular: 400; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-loose: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-caps: 0.06em; --tracking-caps-wide: 0.08em; --dim-caps-opacity: 0.35; /* canon: inline category trails as ambient */ /* -- SPACING (Tailwind default — keep) -------------------- */ --space-1: 4px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* -- MOTION (no tenant control — subtle by design) -------- */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* -- AMBIENT GRADIENT (fixed background) ------------------ */ /* Two layered radial-gradients per leon13 canon. */ --ambient-top: radial-gradient(60% 40% at 50% 0%, rgba(58, 123, 255, 0.12), transparent 70%); --ambient-bottom: radial-gradient(80% 60% at 100% 100%, rgba(0, 36, 151, 0.18), transparent 60%); /* -- TAP TARGET --------------------------------------------*/ --tap-min: 44px; /* Apple HIG — enforced */ /* -- ICONS (3 variants: outline / filled / duotone) ------- */ /* Default = outline per masculine-restraint principle. */ --icon-stroke-width: 1.5; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-size-xl: 32px; } /* ========================================================= APPLY BASE: body / ambient / typography reset ========================================================= */ html[data-theme="premium-dark"], body[data-theme="premium-dark"] { background: var(--bg-base); color: var(--text); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[data-theme="premium-dark"]::before { content: ''; position: fixed; inset: 0; background: var(--ambient-top), var(--ambient-bottom); pointer-events: none; z-index: 0; } /* ========================================================= GLASS CARD recipe — canonical from leon13 V2 ========================================================= */ [data-theme="premium-dark"] .glass-card { background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%), var(--bg-glass-deep); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); box-shadow: var(--shadow-card); border-radius: var(--radius-card); } [data-theme="premium-dark"] .glass-card-elevated { background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%), var(--bg-glass-deep); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); box-shadow: var(--shadow-card-elevated); border-radius: var(--radius-card); } /* ========================================================= BUTTON variants ========================================================= */ [data-theme="premium-dark"] .btn-primary { background: var(--paid); color: var(--text); font-weight: var(--weight-extrabold); border-radius: var(--radius-button); transition: background var(--transition-base); } [data-theme="premium-dark"] .btn-primary:hover { background: var(--paid-hover); } [data-theme="premium-dark"] .btn-accent { background: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand) 100%); color: var(--text); font-weight: var(--weight-extrabold); border-radius: var(--radius-button); transition: filter var(--transition-base); } [data-theme="premium-dark"] .btn-accent:hover { filter: brightness(1.1); } [data-theme="premium-dark"] .btn-ghost { background: rgba(255, 255, 255, 0.10); color: var(--text); font-weight: var(--weight-bold); border-radius: var(--radius-button); transition: background var(--transition-base); } [data-theme="premium-dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.15); } /* CTA pill inside cards (smaller, lower emphasis) */ [data-theme="premium-dark"] .pill { height: 28px; padding: 0 12px; background: rgba(255, 255, 255, 0.10); color: var(--text); font-size: var(--type-micro); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; border-radius: var(--radius-pill); box-shadow: inset 0 1px 0 var(--highlight-top); display: inline-flex; align-items: center; gap: 4px; } /* ========================================================= TYPOGRAPHY classes (semantic — map to scale) ========================================================= */ [data-theme="premium-dark"] .t-display-xl { font: var(--weight-black) var(--type-display-xl) / var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); } [data-theme="premium-dark"] .t-display-lg { font: var(--weight-black) var(--type-display-lg) / var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); } [data-theme="premium-dark"] .t-display-md { font: var(--weight-extrabold) var(--type-display-md) / var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-tight); } [data-theme="premium-dark"] .t-eyebrow-display { font: var(--weight-extrabold) var(--type-eyebrow-display) / var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: var(--dim-caps-opacity); } [data-theme="premium-dark"] .t-heading { font: var(--weight-extrabold) var(--type-heading) / var(--leading-snug) var(--font-display); } [data-theme="premium-dark"] .t-eyebrow-stat { font: var(--weight-extrabold) var(--type-eyebrow-stat) / var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: var(--dim-caps-opacity); } [data-theme="premium-dark"] .t-body { font: var(--weight-regular) var(--type-body) / var(--leading-normal) var(--font-body); } [data-theme="premium-dark"] .t-body-bold { font: var(--weight-semi) var(--type-body) / var(--leading-normal) var(--font-body); } [data-theme="premium-dark"] .t-meta { font: var(--weight-bold) var(--type-meta) / var(--leading-snug) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } [data-theme="premium-dark"] .t-caption { font: var(--weight-semi) var(--type-caption) / var(--leading-snug) var(--font-body); color: var(--text-muted); } [data-theme="premium-dark"] .t-micro { font: var(--weight-bold) var(--type-micro) / 1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* ========================================================= UTILITY: dim-caps inline trick (canon) ========================================================= */ [data-theme="premium-dark"] .lockup-display-eyebrow { display: flex; align-items: baseline; gap: 10px; } /* ========================================================= ICON VARIANT MODIFIERS ========================================================= */ [data-theme="premium-dark"][data-icons="filled"] .icon { fill: currentColor; stroke: none; } [data-theme="premium-dark"][data-icons="outline"] .icon { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke-width); } [data-theme="premium-dark"][data-icons="duotone"] .icon { fill: currentColor; fill-opacity: 0.25; stroke: currentColor; stroke-width: var(--icon-stroke-width); }