/* ===================================================================== * experiences.css — the alternate design languages ("Experiences"). * * Driven by html[data-experience] (set by theme.js): * os → ChicaBate OS (default; this file adds nothing) * therma → infrared heat instrument * maison → after-dark couture salon * pulse → chromatic kinetic nightclub * * HOW IT REACHES EVERY PAGE WITH LITTLE CODE * ------------------------------------------ * Inner pages already paint from the palette contract (var(--primary), * var(--gradient), …) ~4000 times and from the --cb-* type tokens. So each * experience mainly REDEFINES those tokens, scoped to its attribute, and the * whole site re-colours and re-types itself. theme.js clears the inline * palette vars for a non-os experience so these scoped values win. * * On top of that, each skin restyles the shared chrome (nav, buttons, cards, * panels, inputs, tables, ticker, footer, avatar cluster) with its own * shapes, glow and motion — and leans into the brand: adult, warm, alluring. * * MUST load AFTER chicabate-os.css and cb-components.css. * Reduced motion is honoured at the end. * ===================================================================== */ /* ╔═══════════════════════════════════════════════════════════════════╗ ║ THERMA — "chemistry you can see" ║ ║ Infrared: cold indigo → teal → hot magenta → amber. Technical ║ ║ type, instrument chrome, body-heat glow. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="therma"]{ --primary:#E0447A; --primary-dark:#B02C5C; --primary-glow:#FF6FA0; --primary-rgb:224,68,122; --secondary:#1B8FA6; --secondary-glow:#48C6DC; --secondary-rgb:27,143,166; --accent:#FF8A2B; --accent-light:#FFE0A6; --accent-rgb:255,138,43; --gradient:linear-gradient(92deg,#1B8FA6,#E0447A 55%,#FF8A2B); --gradient-glow:linear-gradient(92deg,#48C6DC,#FF6FA0); --background:linear-gradient(160deg,#05070f,#0a0f1e 60%,#070a14); --cb-h-chrome:216; --cb-hue-a:28; --cb-hue-b:340; --cb-hue-c:196; --cb-ink:#04060E; --cb-text:#E7EEF7; --cb-muted:#B9C6D8; --cb-faint:#8FA3BE; --cb-display:'Chakra Petch','Space Grotesk',sans-serif; --cb-ui:'IBM Plex Sans',system-ui,sans-serif; --cb-mono:'IBM Plex Mono',ui-monospace,monospace; } html[data-experience="therma"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui)} html[data-experience="therma"] body::before{ background: radial-gradient(58% 48% at 78% 26%, rgba(224,68,122,.30), transparent 60%), radial-gradient(48% 44% at 88% 64%, rgba(255,138,43,.20), transparent 60%), radial-gradient(66% 58% at 12% 80%, rgba(27,143,166,.20), transparent 60%), linear-gradient(160deg,#05070f,#0a0f1e 60%,#070a14) !important} html[data-experience="therma"] .cb-h1, html[data-experience="therma"] h1, html[data-experience="therma"] h2, html[data-experience="therma"] .cb-display{font-family:var(--cb-display);letter-spacing:-.01em} /* instrument chrome: sharp corners, hairline rules, mono labels */ html[data-experience="therma"] .cb-nav, html[data-experience="therma"] nav.hdr-member, html[data-experience="therma"] nav.hdr-admin{ background:rgba(4,7,16,.62);border-bottom:1px solid rgba(159,180,206,.16); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html[data-experience="therma"] .cb-btn, html[data-experience="therma"] .cb-btn-primary{border-radius:3px;font-family:var(--cb-display);letter-spacing:.01em} html[data-experience="therma"] .cb-btn-primary{color:#0a0710;background:linear-gradient(92deg,var(--accent),#FFD37A);box-shadow:0 10px 30px rgba(255,138,43,.30)} html[data-experience="therma"] .cb-card, html[data-experience="therma"] .cb-panel, html[data-experience="therma"] .media-thumbnail{border-radius:6px;border:1px solid rgba(159,180,206,.16)} /* body-heat bloom behind member cards — the sensual read: everyone runs hot */ html[data-experience="therma"] .cb-card::after, html[data-experience="therma"] .media-thumbnail::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen; background:radial-gradient(60% 50% at 50% 46%, rgba(255,138,43,.42), rgba(224,68,122,.28) 42%, transparent 72%); opacity:.55;transition:opacity .5s ease} html[data-experience="therma"] .cb-card:hover::after, html[data-experience="therma"] .media-thumbnail:hover::after{opacity:.9} html[data-experience="therma"] .cb-input, html[data-experience="therma"] .cb-select, html[data-experience="therma"] .cb-textarea{border-radius:3px} html[data-experience="therma"] .cb-seclabel, html[data-experience="therma"] .cb-ticker-group{font-family:var(--cb-mono)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ MAISON NOIR — "an evening you weren't meant to find" ║ ║ Dark couture: bordeaux-black, ivory, gold leaf. Didone display. ║ ║ Candlelit, intimate, restrained — one sensual glow. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="maison"]{ --primary:#C9A24B; --primary-dark:#A6822F; --primary-glow:#E7CF9A; --primary-rgb:201,162,75; --secondary:#7A1830; --secondary-glow:#B24961; --secondary-rgb:122,24,48; --accent:#D9909E; --accent-light:#F2D7DD; --accent-rgb:217,144,158; --gradient:linear-gradient(100deg,#C9A24B,#E7CF9A); --gradient-glow:linear-gradient(100deg,#E7CF9A,#D9909E); --background:linear-gradient(160deg,#160b10,#0d0609); --cb-h-chrome:350; --cb-hue-a:38; --cb-hue-b:344; --cb-hue-c:20; --cb-ink:#130A0F; --cb-text:#F2E8D8; --cb-muted:#D8C9BC; --cb-faint:#B7A69A; --cb-display:'Fraunces',Georgia,serif; --cb-ui:'Hanken Grotesk',system-ui,sans-serif; --cb-mono:'Hanken Grotesk',system-ui,sans-serif; } html[data-experience="maison"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui);font-weight:300} html[data-experience="maison"] body::before{ background: radial-gradient(70% 60% at 20% 12%, rgba(122,24,48,.6), transparent 60%), radial-gradient(56% 52% at 92% 90%, rgba(42,12,23,.9), transparent 55%), radial-gradient(38% 38% at 78% 22%, rgba(201,162,75,.10), transparent 60%), linear-gradient(160deg,#160b10,#0d0609) !important} html[data-experience="maison"] .cb-h1, html[data-experience="maison"] h1, html[data-experience="maison"] h2, html[data-experience="maison"] .cb-display{font-family:var(--cb-display);font-weight:300;letter-spacing:-.015em;line-height:1.0} html[data-experience="maison"] .cb-hot, html[data-experience="maison"] em{font-style:italic} /* couture chrome: gold hairlines, near-square corners, quiet glass */ html[data-experience="maison"] .cb-nav, html[data-experience="maison"] nav.hdr-member, html[data-experience="maison"] nav.hdr-admin{ background:rgba(19,10,15,.6);border-bottom:1px solid rgba(201,162,75,.24); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} html[data-experience="maison"] .cb-btn{border-radius:1px} html[data-experience="maison"] .cb-btn-primary{color:#130A0F;background:linear-gradient(100deg,#C9A24B,#E7CF9A);box-shadow:0 10px 30px rgba(201,162,75,.24)} html[data-experience="maison"] .cb-btn-ghost{border-color:rgba(201,162,75,.5)} html[data-experience="maison"] .cb-card, html[data-experience="maison"] .cb-panel, html[data-experience="maison"] .media-thumbnail{border-radius:3px;border:1px solid rgba(201,162,75,.28);box-shadow:0 24px 50px rgba(0,0,0,.5)} /* candlelit warmth rising off a portrait on hover — intimate, not loud */ html[data-experience="maison"] .cb-card::after, html[data-experience="maison"] .media-thumbnail::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(80% 60% at 50% 108%, rgba(201,162,75,.28), transparent 60%); opacity:0;transition:opacity .6s ease} html[data-experience="maison"] .cb-card:hover::after, html[data-experience="maison"] .media-thumbnail:hover::after{opacity:1} html[data-experience="maison"] .cb-input, html[data-experience="maison"] .cb-select, html[data-experience="maison"] .cb-textarea{border-radius:2px;border-color:rgba(201,162,75,.3)} html[data-experience="maison"] .cb-seclabel{font-family:var(--cb-ui);letter-spacing:.34em} html[data-experience="maison"] .cb-seclabel::before{content:"— "} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ PULSE — "the room is alive" ║ ║ Nightclub: chromatic club lights in motion, kinetic Anton type, ║ ║ neon glow. Loud, sweaty-dancefloor flirtation. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="pulse"]{ --primary:#FF2E9A; --primary-dark:#C61E78; --primary-glow:#FF6FBE; --primary-rgb:255,46,154; --secondary:#16E0FF; --secondary-glow:#7DEEFF; --secondary-rgb:22,224,255; --accent:#C6FF3D; --accent-light:#E6FFA6; --accent-rgb:198,255,61; --gradient:linear-gradient(92deg,#16E0FF,#A64BFF 40%,#FF2E9A 75%,#C6FF3D); --gradient-glow:linear-gradient(92deg,#7DEEFF,#FF6FBE); --background:linear-gradient(180deg,#0b0916,#07060c); --cb-h-chrome:280; --cb-hue-a:330; --cb-hue-b:192; --cb-hue-c:86; --cb-ink:#07060C; --cb-text:#F4F2FF; --cb-muted:#CFC9EA; --cb-faint:#9C96C4; --cb-display:'Anton','Space Grotesk',sans-serif; --cb-ui:'Space Grotesk',system-ui,sans-serif; --cb-mono:'Space Mono',ui-monospace,monospace; } html[data-experience="pulse"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui)} /* moving club lights */ html[data-experience="pulse"] body::before{ inset:-20%;filter:blur(64px);opacity:.5; background: radial-gradient(30% 30% at 20% 30%, #FF2E9A, transparent 60%), radial-gradient(28% 28% at 80% 25%, #16E0FF, transparent 60%), radial-gradient(30% 30% at 65% 80%, #A64BFF, transparent 60%), radial-gradient(24% 24% at 30% 85%, #C6FF3D, transparent 60%) !important; animation:pulseLights 16s ease-in-out infinite alternate} @keyframes pulseLights{50%{transform:translate3d(6%,-5%,0) scale(1.15) rotate(8deg)}} html[data-experience="pulse"] .cb-h1, html[data-experience="pulse"] h1, html[data-experience="pulse"] h2, html[data-experience="pulse"] .cb-display{font-family:var(--cb-display);text-transform:uppercase;letter-spacing:.01em;line-height:.86} html[data-experience="pulse"] .cb-nav, html[data-experience="pulse"] nav.hdr-member, html[data-experience="pulse"] nav.hdr-admin{ background:rgba(7,6,12,.55);border-bottom:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html[data-experience="pulse"] .cb-btn{border-radius:2px;font-family:var(--cb-display);text-transform:uppercase;letter-spacing:.03em} html[data-experience="pulse"] .cb-btn-primary{color:#07060C;background:linear-gradient(92deg,#C6FF3D,#16E0FF);box-shadow:0 10px 34px rgba(22,224,255,.32)} html[data-experience="pulse"] .cb-card, html[data-experience="pulse"] .cb-panel, html[data-experience="pulse"] .media-thumbnail{border-radius:8px;border:1px solid rgba(255,255,255,.12)} /* neon rim that lights up on hover — the floor noticing you */ html[data-experience="pulse"] .cb-card:hover, html[data-experience="pulse"] .media-thumbnail:hover{ border-color:rgba(255,46,154,.7);box-shadow:0 0 0 1px rgba(22,224,255,.4),0 24px 60px rgba(255,46,154,.3)} html[data-experience="pulse"] .cb-input, html[data-experience="pulse"] .cb-select, html[data-experience="pulse"] .cb-textarea{border-radius:6px} html[data-experience="pulse"] .cb-seclabel, html[data-experience="pulse"] .cb-ticker-group{font-family:var(--cb-mono)} html[data-experience="pulse"] .cb-ticker-live{color:var(--accent)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ AURORA GLASS — frosted spatial glass over a warm drifting aurora ║ ║ Soft, premium, intimate. Hot pink + violet + emerald. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="aurora"]{ --primary:#FF7AC6; --primary-dark:#D64FA0; --primary-glow:#FFA6DC; --primary-rgb:255,122,198; --secondary:#8B7CFF; --secondary-glow:#B0A6FF; --secondary-rgb:139,124,255; --accent:#34E5C4; --accent-light:#B6FBEE; --accent-rgb:52,229,196; --gradient:linear-gradient(110deg,#34E5C4,#8B7CFF 48%,#FF7AC6); --gradient-glow:linear-gradient(110deg,#B6FBEE,#FFA6DC); --background:linear-gradient(160deg,#0A0F1E,#080B18); --cb-h-chrome:250; --cb-hue-a:330; --cb-hue-b:270; --cb-hue-c:168; --cb-ink:#080B18; --cb-text:#EAF0FF; --cb-muted:#A7B2D4; --cb-faint:#6B769B; --cb-display:'Sora',system-ui,sans-serif; --cb-ui:'Inter',system-ui,sans-serif; --cb-mono:'Inter',system-ui,sans-serif; } html[data-experience="aurora"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui)} html[data-experience="aurora"] body::before{ inset:-25%;filter:blur(90px);opacity:.55; background: radial-gradient(30% 34% at 22% 26%,#FF7AC6,transparent 60%), radial-gradient(34% 30% at 82% 20%,#8B7CFF,transparent 60%), radial-gradient(30% 34% at 70% 82%,#34E5C4,transparent 60%), radial-gradient(24% 24% at 24% 84%,#3AA0FF,transparent 60%) !important; animation:auroraDrift 22s ease-in-out infinite alternate} @keyframes auroraDrift{50%{transform:translate3d(4%,-3%,0) scale(1.12)}} html[data-experience="aurora"] .cb-h1, html[data-experience="aurora"] h1, html[data-experience="aurora"] h2, html[data-experience="aurora"] .cb-display{font-family:var(--cb-display);font-weight:600;letter-spacing:-.02em} /* frosted glass chrome */ html[data-experience="aurora"] .cb-nav, html[data-experience="aurora"] nav.hdr-member, html[data-experience="aurora"] nav.hdr-admin, html[data-experience="aurora"] .cb-card, html[data-experience="aurora"] .cb-panel, html[data-experience="aurora"] .media-thumbnail{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5); box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14)} html[data-experience="aurora"] .cb-card, html[data-experience="aurora"] .cb-panel, html[data-experience="aurora"] .media-thumbnail{border-radius:22px} html[data-experience="aurora"] .cb-btn, html[data-experience="aurora"] .cb-btn-primary{border-radius:14px;font-family:var(--cb-display);font-weight:600} html[data-experience="aurora"] .cb-btn-primary{color:#06110E;background:linear-gradient(100deg,#34E5C4,#8B7CFF);box-shadow:0 10px 30px rgba(52,229,196,.3)} html[data-experience="aurora"] .cb-btn-ghost{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)} html[data-experience="aurora"] .cb-input, html[data-experience="aurora"] .cb-select, html[data-experience="aurora"] .cb-textarea{border-radius:13px;background:rgba(255,255,255,.04)} html[data-experience="aurora"] .cb-card:hover, html[data-experience="aurora"] .media-thumbnail:hover{ box-shadow:0 26px 66px rgba(255,122,198,.28),inset 0 1px 0 rgba(255,255,255,.2)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ SIGNAL HUD — a heat-scan tactical console. Grid, brackets, ║ ║ readouts. Hot signal-red + amber + cyan. Desire, quantified. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="hud"]{ --primary:#FF4D5E; --primary-dark:#C6303F; --primary-glow:#FF8A96; --primary-rgb:255,77,94; --secondary:#FFB020; --secondary-glow:#FFD07A; --secondary-rgb:255,176,32; --accent:#3DE0FF; --accent-light:#AEF2FF; --accent-rgb:61,224,255; --gradient:linear-gradient(92deg,#FFB020,#FF4D5E); --gradient-glow:linear-gradient(92deg,#FFD07A,#FF8A96); --background:#0B0C0F; --cb-h-chrome:220; --cb-hue-a:2; --cb-hue-b:36; --cb-hue-c:192; --cb-ink:#0B0C0F; --cb-text:#EDEFF2; --cb-muted:#8A93A0; --cb-faint:#5A626E; --cb-display:'Archivo',system-ui,sans-serif; --cb-ui:'JetBrains Mono',ui-monospace,monospace; --cb-mono:'JetBrains Mono',ui-monospace,monospace; } html[data-experience="hud"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui); background-image:linear-gradient(rgba(37,42,49,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(37,42,49,.6) 1px,transparent 1px); background-size:44px 44px} html[data-experience="hud"] body::before{background: radial-gradient(60% 40% at 80% 0%,rgba(255,77,94,.16),transparent 60%), radial-gradient(50% 40% at 10% 100%,rgba(255,176,32,.12),transparent 60%),#0B0C0F !important} html[data-experience="hud"] .cb-h1, html[data-experience="hud"] h1, html[data-experience="hud"] h2, html[data-experience="hud"] .cb-display{font-family:var(--cb-display);font-weight:900;text-transform:uppercase;letter-spacing:.02em} html[data-experience="hud"] .cb-nav, html[data-experience="hud"] nav.hdr-member, html[data-experience="hud"] nav.hdr-admin{ background:rgba(16,18,22,.9);border-bottom:1px solid #333A44;-webkit-backdrop-filter:none;backdrop-filter:none} /* bracket-corner boxes on every panel/card */ html[data-experience="hud"] .cb-card, html[data-experience="hud"] .cb-panel, html[data-experience="hud"] .media-thumbnail{ position:relative;border-radius:0;background:#101216;border:1px solid #333A44} html[data-experience="hud"] .cb-card::before, html[data-experience="hud"] .cb-panel::before, html[data-experience="hud"] .media-thumbnail::before, html[data-experience="hud"] .cb-card::after, html[data-experience="hud"] .cb-panel::after, html[data-experience="hud"] .media-thumbnail::after{ content:"";position:absolute;width:11px;height:11px;border:2px solid #FFB020;z-index:2;pointer-events:none} html[data-experience="hud"] .cb-card::before, html[data-experience="hud"] .cb-panel::before, html[data-experience="hud"] .media-thumbnail::before{top:-1px;left:-1px;border-right:0;border-bottom:0} html[data-experience="hud"] .cb-card::after, html[data-experience="hud"] .cb-panel::after, html[data-experience="hud"] .media-thumbnail::after{bottom:-1px;right:-1px;border-left:0;border-top:0} html[data-experience="hud"] .cb-btn, html[data-experience="hud"] .cb-btn-primary{border-radius:0;font-family:var(--cb-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em} html[data-experience="hud"] .cb-btn-primary{color:#0B0C0F;background:#FF4D5E;box-shadow:none} html[data-experience="hud"] .cb-btn-ghost{border:1px solid #333A44;background:transparent} html[data-experience="hud"] .cb-input, html[data-experience="hud"] .cb-select, html[data-experience="hud"] .cb-textarea{border-radius:0;background:#0C0E12;border-color:#333A44} html[data-experience="hud"] .cb-seclabel, html[data-experience="hud"] .cb-ticker-group{font-family:var(--cb-mono);text-transform:uppercase} html[data-experience="hud"] .cb-ticker-live{color:#C6FF3D} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ LIQUID CHROME — molten metal + rose-gold oil-slick iridescence. ║ ║ Sleek, expensive, magnetic. ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="chrome"]{ --primary:#FF9AD2; --primary-dark:#D66FAA; --primary-glow:#FFC2E6; --primary-rgb:255,154,210; --secondary:#B98CFF; --secondary-glow:#D4BEFF; --secondary-rgb:185,140,255; --accent:#FFE68C; --accent-light:#FFF4C8; --accent-rgb:255,230,140; --gradient:linear-gradient(100deg,#B98CFF,#5FD2FF 30%,#8CFFD6 52%,#FFE68C 74%,#FF9AD2); --gradient-glow:linear-gradient(100deg,#D4BEFF,#FFC2E6); --background:linear-gradient(180deg,#0E1016,#0A0B0E); --cb-h-chrome:250; --cb-hue-a:330; --cb-hue-b:270; --cb-hue-c:52; --cb-ink:#0A0B0E; --cb-text:#F3F5F9; --cb-muted:#9AA3B2; --cb-faint:#646C7A; --cb-display:'Sora',system-ui,sans-serif; --cb-ui:'Sora',system-ui,sans-serif; --cb-mono:'Space Mono',ui-monospace,monospace; } html[data-experience="chrome"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui)} html[data-experience="chrome"] body::before{opacity:.5;background: radial-gradient(50% 40% at 78% 12%,rgba(185,140,255,.28),transparent 60%), radial-gradient(46% 42% at 15% 88%,rgba(95,210,255,.18),transparent 60%), radial-gradient(40% 40% at 90% 90%,rgba(255,154,210,.18),transparent 60%) !important} html[data-experience="chrome"] .cb-h1, html[data-experience="chrome"] h1, html[data-experience="chrome"] h2, html[data-experience="chrome"] .cb-display{font-family:var(--cb-display);font-weight:700;letter-spacing:-.02em} html[data-experience="chrome"] .cb-nav, html[data-experience="chrome"] nav.hdr-member, html[data-experience="chrome"] nav.hdr-admin, html[data-experience="chrome"] .cb-card, html[data-experience="chrome"] .cb-panel, html[data-experience="chrome"] .media-thumbnail{ background:linear-gradient(180deg,#1b1e26,#12141a);border:1px solid #2A2E37; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.4)} html[data-experience="chrome"] .cb-card, html[data-experience="chrome"] .cb-panel, html[data-experience="chrome"] .media-thumbnail{border-radius:18px} /* chrome-bevel buttons + iridescent primary */ html[data-experience="chrome"] .cb-btn{border-radius:12px;font-weight:700; color:#0B0C0F;border:0;background:linear-gradient(180deg,#F4F7FB,#8B94A3);box-shadow:inset 0 1px 1px #fff,0 6px 16px rgba(0,0,0,.4)} html[data-experience="chrome"] .cb-btn-primary{color:#0B0C0F;border:0;font-weight:800; background:linear-gradient(100deg,#B98CFF,#5FD2FF 30%,#8CFFD6 52%,#FFE68C 74%,#FF9AD2);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 8px 22px rgba(185,140,255,.3)} html[data-experience="chrome"] .cb-btn-ghost{background:rgba(255,255,255,.05);color:var(--cb-text);border:1px solid #2A2E37} html[data-experience="chrome"] .cb-input, html[data-experience="chrome"] .cb-select, html[data-experience="chrome"] .cb-textarea{border-radius:12px; background:linear-gradient(180deg,#0d0f14,#101319);border-color:#2A2E37;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)} html[data-experience="chrome"] .cb-seclabel, html[data-experience="chrome"] .cb-ticker-group{font-family:var(--cb-mono)} /* ╔═══════════════════════════════════════════════════════════════════╗ ║ BOTANICA NOIR — organic, literary, sensual. Emerald + blush, ║ ║ soft curves, a serif that leans in. "In bloom." ║ ╚═══════════════════════════════════════════════════════════════════╝ */ html[data-experience="botanica"]{ --primary:#EA9CB0; --primary-dark:#C85B78; --primary-glow:#F4C2CF; --primary-rgb:234,156,176; --secondary:#37C98F; --secondary-glow:#6FE0B4; --secondary-rgb:55,201,143; --accent:#E6C878; --accent-light:#F3E6BC; --accent-rgb:230,200,120; --gradient:linear-gradient(120deg,#37C98F,#EA9CB0); --gradient-glow:linear-gradient(120deg,#6FE0B4,#F4C2CF); --background:linear-gradient(160deg,#0E1A13,#0B140F); --cb-h-chrome:150; --cb-hue-a:344; --cb-hue-b:152; --cb-hue-c:44; --cb-ink:#0B140F; --cb-text:#EFEAE0; --cb-muted:#A9B7AC; --cb-faint:#6E8074; --cb-display:'Newsreader',Georgia,serif; --cb-ui:'Mulish',system-ui,sans-serif; --cb-mono:'Mulish',system-ui,sans-serif; } html[data-experience="botanica"] body{background:var(--cb-ink);color:var(--cb-text);font-family:var(--cb-ui)} html[data-experience="botanica"] body::before{inset:-20%;filter:blur(70px);opacity:.5;background: radial-gradient(28% 30% at 20% 24%,#37C98F,transparent 62%), radial-gradient(30% 30% at 84% 20%,#C85B78,transparent 62%), radial-gradient(30% 34% at 74% 84%,#1E6E52,transparent 62%), radial-gradient(24% 24% at 24% 86%,#EA9CB0,transparent 62%) !important} html[data-experience="botanica"] .cb-h1, html[data-experience="botanica"] h1, html[data-experience="botanica"] h2, html[data-experience="botanica"] .cb-display{font-family:var(--cb-display);font-weight:400;letter-spacing:-.01em} html[data-experience="botanica"] .cb-hot, html[data-experience="botanica"] em{font-style:italic} html[data-experience="botanica"] .cb-nav, html[data-experience="botanica"] nav.hdr-member, html[data-experience="botanica"] nav.hdr-admin{ background:rgba(17,30,22,.62);border-bottom:1px solid rgba(233,201,178,.14); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} html[data-experience="botanica"] .cb-card, html[data-experience="botanica"] .cb-panel, html[data-experience="botanica"] .media-thumbnail{ background:#111E16;border:1px solid rgba(233,201,178,.14);border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.4)} html[data-experience="botanica"] .cb-btn, html[data-experience="botanica"] .cb-btn-primary{border-radius:18px;font-weight:700} html[data-experience="botanica"] .cb-btn-primary{color:#08140D;background:linear-gradient(120deg,#37C98F,#EA9CB0)} html[data-experience="botanica"] .cb-btn-ghost{border-color:rgba(233,201,178,.14)} html[data-experience="botanica"] .cb-input, html[data-experience="botanica"] .cb-select, html[data-experience="botanica"] .cb-textarea{border-radius:18px;background:rgba(255,255,255,.03);border-color:rgba(233,201,178,.14)} html[data-experience="botanica"] .cb-seclabel{font-family:var(--cb-display);font-style:italic;letter-spacing:.02em;text-transform:none;color:var(--accent)} html[data-experience="botanica"] .cb-seclabel::before{content:""} /* ===================================================================== * LANDING HERO SIGNATURES — one bold, experience-specific accent on the * home hero (.cbx-hero). Decorative only (pointer-events:none), placed in * the empty right/edge zone so hero text stays crisp. os keeps its own * constellation and gets none here. * ===================================================================== */ html[data-experience="therma"] .cbx-hero, html[data-experience="maison"] .cbx-hero, html[data-experience="pulse"] .cbx-hero, html[data-experience="aurora"] .cbx-hero, html[data-experience="hud"] .cbx-hero, html[data-experience="chrome"] .cbx-hero, html[data-experience="botanica"] .cbx-hero{position:relative;overflow:hidden} /* :not(.hero-bgmedia): the admin-set hero background layer must STAY an absolute, z:-1 backdrop — this lift was pulling it into the flow, so the image stacked ABOVE the hero copy instead of behind it. */ .cbx-hero > *:not(.hero-bgmedia){position:relative;z-index:2} /* THERMA — an infrared scan line sweeps the hero, warm grid behind */ html[data-experience="therma"] .cbx-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(rgba(224,68,122,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,138,43,.05) 1px,transparent 1px); background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 70% at 78% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 78% 40%,#000,transparent)} html[data-experience="therma"] .cbx-hero::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,#FFE6A6,#FF8A2B,transparent);box-shadow:0 0 22px #FF8A2B; animation:thScan 4.6s linear infinite} @keyframes thScan{0%{top:-2%}100%{top:102%}} /* MAISON — a fine gold frame + slow candle glow, salon-style */ html[data-experience="maison"] .cbx-hero::before{content:"";position:absolute;inset:22px;z-index:0;pointer-events:none; border:1px solid rgba(201,162,75,.35);border-radius:4px} html[data-experience="maison"] .cbx-hero::after{content:"";position:absolute;right:-6%;top:20%;width:46%;height:60%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(201,162,75,.22),transparent 70%);animation:maGlow 7s ease-in-out infinite alternate} @keyframes maGlow{50%{opacity:.55;transform:translateY(-14px) scale(1.06)}} /* PULSE — a chromatic energy bar pulsing along the hero base */ html[data-experience="pulse"] .cbx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:1;pointer-events:none; background:linear-gradient(90deg,#16E0FF,#A64BFF,#FF2E9A,#C6FF3D);background-size:200% 100%; animation:puBar 3s ease-in-out infinite;box-shadow:0 0 22px rgba(255,46,154,.7)} @keyframes puBar{0%,100%{opacity:.5;background-position:0% 50%;transform:scaleY(.6)}50%{opacity:1;background-position:100% 50%;transform:scaleY(1.4)}} html[data-experience="pulse"] .cbx-hero::before{content:"";position:absolute;right:4%;top:24%;width:34%;height:52%;z-index:0;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(166,75,255,.28),transparent 70%);animation:puRing 2.4s ease-in-out infinite} @keyframes puRing{50%{transform:scale(1.12);opacity:.7}} /* AURORA — soft glass orbs drifting in the empty zone */ html[data-experience="aurora"] .cbx-hero::before{content:"";position:absolute;right:12%;top:18%;width:150px;height:150px;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(52,229,196,.4),rgba(52,229,196,0));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);animation:auOrb 9s ease-in-out infinite alternate} html[data-experience="aurora"] .cbx-hero::after{content:"";position:absolute;right:30%;bottom:16%;width:96px;height:96px;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(255,122,198,.4),rgba(255,122,198,0));border:1px solid rgba(255,255,255,.14);animation:auOrb 7s ease-in-out infinite alternate-reverse} @keyframes auOrb{50%{transform:translate3d(-18px,-22px,0) scale(1.12)}} /* HUD — targeting reticle + corner ticks locked on the empty zone */ html[data-experience="hud"] .cbx-hero::before{content:"";position:absolute;right:16%;top:26%;width:180px;height:180px;z-index:1;pointer-events:none; border:1px solid rgba(61,224,255,.5);border-radius:50%; box-shadow:0 0 0 1px rgba(255,176,32,.25) inset;animation:hudSpin 12s linear infinite} html[data-experience="hud"] .cbx-hero::after{content:"⌖ TARGET · LOCK";position:absolute;right:14%;top:50%;z-index:1;pointer-events:none; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:#3DE0FF;text-shadow:0 0 8px rgba(61,224,255,.6)} @keyframes hudSpin{to{transform:rotate(360deg)}} /* CHROME — a diagonal liquid sheen sweeping across the hero */ html[data-experience="chrome"] .cbx-hero::after{content:"";position:absolute;top:-30%;left:-40%;width:60%;height:160%;z-index:1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.10) 46%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.10) 54%,transparent); transform:skewX(-18deg);animation:chSheen 6s ease-in-out infinite} @keyframes chSheen{0%{left:-50%}60%,100%{left:130%}} /* BOTANICA — an organic bloom unfurling in the corner */ html[data-experience="botanica"] .cbx-hero::before{content:"";position:absolute;right:-4%;top:-8%;width:44%;height:70%;z-index:0;pointer-events:none; background:radial-gradient(38% 44% at 70% 30%,rgba(55,201,143,.3),transparent 70%),radial-gradient(34% 40% at 84% 66%,rgba(234,156,176,.26),transparent 70%); animation:boBloom 8s ease-in-out infinite alternate} @keyframes boBloom{50%{transform:translate(-14px,10px) scale(1.08)}} html[data-experience="botanica"] .cbx-hero::after{content:"";position:absolute;right:8%;bottom:10%;width:120px;height:120px;z-index:0;pointer-events:none; background:conic-gradient(from 200deg,rgba(230,200,120,.4),transparent 45%);border-radius:50% 50% 50% 8px;transform:rotate(-18deg);filter:blur(2px)} /* ---- reduced motion: kill the ambient loops in every experience ---- */ @media (prefers-reduced-motion: reduce){ html[data-experience="pulse"] body::before, html[data-experience="aurora"] body::before, html[data-experience] .cbx-hero::before, html[data-experience] .cbx-hero::after{animation:none !important} }