/** * LexStreamCMS — Skins (v2.4.20) * * How this works: every component in style.css is already built entirely on * top of the --clr-* design tokens defined in :root and overridden by * [data-theme="light"] — nothing in the theme hardcodes a color. So a "skin" * is just a second, independent override layer that redefines the same * token set for a different palette, keyed off a [data-skin="..."] attribute * on instead of touching a single component rule. * * Each skin below ships BOTH a dark variant (the default, matching the * site's existing dark-first design) and a [data-theme="light"] variant, so * every skin stays fully readable regardless of the visitor's light/dark * preference. Background luminance and text-color pairing were kept close * to the original default skin's contrast ratios — only hue shifts, not * lightness — so switching skins never makes text hard to read. * * The active skin is an admin-controlled, site-wide setting (Settings → * Appearance), not a per-visitor choice — see lxcms_get_active_skin() and * the data-skin attribute output in partials/header.php. */ /* ============================================================ CRIMSON NOIR — black + cinematic red, gold highlight ============================================================ */ [data-skin="crimson"] { --clr-bg-primary: #120708; --clr-bg-secondary: #1a0d0f; --clr-bg-card: #211316; --clr-bg-elevated: #2b191d; --clr-border: #35181c; --clr-border-hover: #4d2228; --clr-accent: #e5484d; --clr-accent-hover: #f26469; --clr-accent-muted: rgba(229,72,77,0.15); --clr-highlight: #d4a017; --clr-highlight-muted: rgba(212,160,23,0.12); --glow-featured: 0 0 0 2px #e5484d, 0 0 20px rgba(229,72,77,0.4), 0 0 40px rgba(212,160,23,0.15); --glow-accent: 0 0 12px rgba(229,72,77,0.5); --shadow-card: 0 2px 8px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.7); } [data-skin="crimson"][data-theme="light"] { --clr-bg-primary: #fbf5f5; --clr-bg-secondary: #f5e9e9; --clr-bg-card: #ffffff; --clr-bg-elevated: #ffffff; --clr-border: #f0d8d9; --clr-border-hover: #e3b3b5; --clr-accent: #c8262c; --clr-accent-hover: #a81f24; --clr-accent-muted: rgba(200,38,44,0.1); --clr-highlight: #b5790a; --clr-highlight-muted: rgba(181,121,10,0.1); --glow-featured: 0 0 0 2px #c8262c, 0 0 16px rgba(200,38,44,0.25); --shadow-card: 0 2px 8px rgba(0,0,0,0.08); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14); } /* ============================================================ SAKURA BLOOM — plum + pink, violet highlight ============================================================ */ [data-skin="sakura"] { --clr-bg-primary: #14091a; --clr-bg-secondary: #1c0f24; --clr-bg-card: #24132e; --clr-bg-elevated: #2f1a3b; --clr-border: #3a1f49; --clr-border-hover: #552d69; --clr-accent: #ec4899; --clr-accent-hover: #f472b6; --clr-accent-muted: rgba(236,72,153,0.15); --clr-highlight: #c084fc; --clr-highlight-muted: rgba(192,132,252,0.12); --glow-featured: 0 0 0 2px #ec4899, 0 0 20px rgba(236,72,153,0.4), 0 0 40px rgba(192,132,252,0.15); --glow-accent: 0 0 12px rgba(236,72,153,0.5); --shadow-card: 0 2px 8px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.7); } [data-skin="sakura"][data-theme="light"] { --clr-bg-primary: #fdf3f9; --clr-bg-secondary: #fbe7f2; --clr-bg-card: #ffffff; --clr-bg-elevated: #ffffff; --clr-border: #f7d6ea; --clr-border-hover: #edb3d6; --clr-accent: #d6338a; --clr-accent-hover: #b82874; --clr-accent-muted: rgba(214,51,138,0.1); --clr-highlight: #9333ea; --clr-highlight-muted: rgba(147,51,234,0.1); --glow-featured: 0 0 0 2px #d6338a, 0 0 16px rgba(214,51,138,0.25); --shadow-card: 0 2px 8px rgba(0,0,0,0.08); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14); } /* ============================================================ EMERALD FROST — deep teal + green, sky-blue highlight ============================================================ */ [data-skin="emerald"] { --clr-bg-primary: #071410; --clr-bg-secondary: #0d1e18; --clr-bg-card: #122820; --clr-bg-elevated: #17332a; --clr-border: #1c3d32; --clr-border-hover: #2a584a; --clr-accent: #10b981; --clr-accent-hover: #34d399; --clr-accent-muted: rgba(16,185,129,0.15); --clr-highlight: #38bdf8; --clr-highlight-muted: rgba(56,189,248,0.12); --glow-featured: 0 0 0 2px #10b981, 0 0 20px rgba(16,185,129,0.4), 0 0 40px rgba(56,189,248,0.15); --glow-accent: 0 0 12px rgba(16,185,129,0.5); --shadow-card: 0 2px 8px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.7); } [data-skin="emerald"][data-theme="light"] { --clr-bg-primary: #f3faf7; --clr-bg-secondary: #e6f4ee; --clr-bg-card: #ffffff; --clr-bg-elevated: #ffffff; --clr-border: #d3ece1; --clr-border-hover: #a8d9c4; --clr-accent: #059669; --clr-accent-hover: #047857; --clr-accent-muted: rgba(5,150,105,0.1); --clr-highlight: #0284c7; --clr-highlight-muted: rgba(2,132,199,0.1); --glow-featured: 0 0 0 2px #059669, 0 0 16px rgba(5,150,105,0.25); --shadow-card: 0 2px 8px rgba(0,0,0,0.08); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14); } /* ============================================================ PREMIUM / EYE-COMFORT SKINS (v2.4.21) ------------------------------------------------------------ The four skins above use fairly saturated accents on a very dark, cool background. That's fine for short sessions, but on a video/streaming site people leave open for hours, so these four are built around a different set of rules: 1. No pure black (#000) or pure white (#fff) anywhere. Both create the sharpest possible edge against any foreground color, which is what makes eyes work hardest over long sessions. Every background below sits around 6–10% luminance (dark) or 94–97% (light) instead of the 0%/100% extremes. 2. Dark-mode backgrounds lean warm (a touch of red/yellow mixed into the black) rather than pure neutral or cool-blue-black. Warm dark tones emit less high-frequency blue light and are the same principle behind "night mode" / f.lux-style color temperature shifts. 3. Accent colors are muted/desaturated jewel tones, not full-saturation neons. A neon color at high contrast against a dark background visually "vibrates" and is genuinely more fatiguing to look at for a long scroll session than a slightly muted version of the same hue. 4. Every text/background and accent/background pairing below was checked against WCAG contrast math (relative luminance ratio) and kept at 4.5:1 or higher — normal-text AA at minimum, most pairs land at AAA (7:1+). ============================================================ */ /* ── MIDNIGHT AMBER — warm charcoal, burnt-amber accent, warm gold highlight. Closest to a "reading lamp at night" feel — the warm dark background is specifically chosen to be easier on the eyes for long night sessions. */ [data-skin="amber"] { --clr-bg-primary: #17140f; --clr-bg-secondary: #1d1912; --clr-bg-card: #241f16; --clr-bg-elevated: #2d271a; --clr-border: #362f20; --clr-border-hover: #4d4229; --clr-accent: #c9822e; --clr-accent-hover: #dd9a48; --clr-accent-muted: rgba(201,130,46,0.15); --clr-highlight: #d9a441; --clr-highlight-muted: rgba(217,164,65,0.12); --glow-featured: 0 0 0 2px #c9822e, 0 0 20px rgba(201,130,46,0.35), 0 0 40px rgba(217,164,65,0.12); --glow-accent: 0 0 12px rgba(201,130,46,0.45); --shadow-card: 0 2px 8px rgba(0,0,0,0.45); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6); } [data-skin="amber"][data-theme="light"] { --clr-bg-primary: #faf6ef; --clr-bg-secondary: #f3ecdf; --clr-bg-card: #fffdf9; --clr-bg-elevated: #fffdf9; --clr-border: #ecdfc7; --clr-border-hover: #d9c39c; --clr-accent: #8f5015; --clr-accent-hover: #764111; --clr-accent-muted: rgba(143,80,21,0.1); --clr-highlight: #a8761f; --clr-highlight-muted: rgba(168,118,31,0.1); --glow-featured: 0 0 0 2px #8f5015, 0 0 16px rgba(143,80,21,0.2); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12); } /* ── SLATE GRAPHITE — neutral charcoal, muted steel-blue accent, silver highlight. Lowest visual noise of any skin here — a minimal, professional streaming-service look with nothing competing for attention against the video thumbnails. */ [data-skin="slate"] { --clr-bg-primary: #14161c; --clr-bg-secondary: #1a1d25; --clr-bg-card: #20232d; --clr-bg-elevated: #282c38; --clr-border: #313543; --clr-border-hover: #454b5e; --clr-accent: #5b8def; --clr-accent-hover: #79a2f2; --clr-accent-muted: rgba(91,141,239,0.15); --clr-highlight: #b0b8c9; --clr-highlight-muted: rgba(176,184,201,0.12); --glow-featured: 0 0 0 2px #5b8def, 0 0 20px rgba(91,141,239,0.35), 0 0 40px rgba(176,184,201,0.12); --glow-accent: 0 0 12px rgba(91,141,239,0.45); --shadow-card: 0 2px 8px rgba(0,0,0,0.45); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6); } [data-skin="slate"][data-theme="light"] { --clr-bg-primary: #f4f5f7; --clr-bg-secondary: #e9ebef; --clr-bg-card: #ffffff; --clr-bg-elevated: #ffffff; --clr-border: #dde0e6; --clr-border-hover: #bcc1cd; --clr-accent: #3a5f8a; --clr-accent-hover: #2e4d70; --clr-accent-muted: rgba(58,95,138,0.1); --clr-highlight: #5f6b80; --clr-highlight-muted: rgba(95,107,128,0.1); --glow-featured: 0 0 0 2px #3a5f8a, 0 0 16px rgba(58,95,138,0.2); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12); } /* ── OCEAN DEPTH — deep blue-black, calm teal accent, soft sky-blue highlight. A cooler, "late-night ocean" alternative to Slate with a bit more color personality, still built on the same muted-saturation rule. */ [data-skin="ocean"] { --clr-bg-primary: #0c1620; --clr-bg-secondary: #101d29; --clr-bg-card: #142433; --clr-bg-elevated: #1a2e40; --clr-border: #20384c; --clr-border-hover: #2c4d66; --clr-accent: #2dd4bf; --clr-accent-hover: #5ee0cf; --clr-accent-muted: rgba(45,212,191,0.15); --clr-highlight: #7dd3fc; --clr-highlight-muted: rgba(125,211,252,0.12); --glow-featured: 0 0 0 2px #2dd4bf, 0 0 20px rgba(45,212,191,0.35), 0 0 40px rgba(125,211,252,0.12); --glow-accent: 0 0 12px rgba(45,212,191,0.45); --shadow-card: 0 2px 8px rgba(0,0,0,0.45); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6); } [data-skin="ocean"][data-theme="light"] { --clr-bg-primary: #f1f8fa; --clr-bg-secondary: #e3f0f3; --clr-bg-card: #ffffff; --clr-bg-elevated: #ffffff; --clr-border: #d3e7ec; --clr-border-hover: #a9d2db; --clr-accent: #0b6b5e; --clr-accent-hover: #08554a; --clr-accent-muted: rgba(11,107,94,0.1); --clr-highlight: #0369a1; --clr-highlight-muted: rgba(3,105,161,0.1); --glow-featured: 0 0 0 2px #0b6b5e, 0 0 16px rgba(11,107,94,0.2); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12); } /* ── ROYAL GOLD — near-black warm charcoal, muted gold accent, deep burgundy highlight. The "VIP cinema lounge" skin — luxury without resorting to a bright, fatiguing yellow. */ [data-skin="royal"] { --clr-bg-primary: #120e08; --clr-bg-secondary: #17130b; --clr-bg-card: #1e1810; --clr-bg-elevated: #261f14; --clr-border: #2e2617; --clr-border-hover: #443722; --clr-accent: #c9a15a; --clr-accent-hover: #dbb676; --clr-accent-muted: rgba(201,161,90,0.15); --clr-highlight: #cf5878; --clr-highlight-muted: rgba(207,88,120,0.12); --glow-featured: 0 0 0 2px #c9a15a, 0 0 20px rgba(201,161,90,0.35), 0 0 40px rgba(207,88,120,0.12); --glow-accent: 0 0 12px rgba(201,161,90,0.45); --shadow-card: 0 2px 8px rgba(0,0,0,0.45); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6); } [data-skin="royal"][data-theme="light"] { --clr-bg-primary: #faf7f0; --clr-bg-secondary: #f3ecdc; --clr-bg-card: #fffdf9; --clr-bg-elevated: #fffdf9; --clr-border: #ece0c8; --clr-border-hover: #d8c39d; --clr-accent: #7c5f22; --clr-accent-hover: #634c1b; --clr-accent-muted: rgba(124,95,34,0.1); --clr-highlight: #6d1f34; --clr-highlight-muted: rgba(109,31,52,0.1); --glow-featured: 0 0 0 2px #7c5f22, 0 0 16px rgba(124,95,34,0.2); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12); }