/* ============================================================================ CULTURE CAVE — "THE DESCENT" A cave-themed design layer over the existing storefront components. Loaded AFTER style.css. Keeps every existing selector working. Concept: the page is a vertical passage through a cave system. Each section is a chamber; you pass between them through cave mouths (arches). The light theme is the lantern-lit chamber (light-dominant, as the brand always was); the dark theme is the deep, where the bioluminescence carries the UI. ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKENS — light theme = "Lantern Chamber" Pale mineral stone rather than paper white: enough warmth and violet cast that the page reads as a lit rock face, not a blank sheet. ------------------------------------------------------------------------- */ :root{ --ground:#F2EEF8; --ground2:#E8E1F2; --surface:#FCFAFE; --well:#EDE6F6; --line:#E1D9EF; --line-strong:#C8BCE2; --ink:#17102A; --ink-2:#544A70; --ink-mut:#7D7299; --violet:#7C3AED; --violet-lt:#9B6BFF; --magenta:#E250C8; --cyan:#1FB6EE; --gold:#E0982E; --emerald:#1FBE7E; --amber:#F08A1E; --ink-violet:#6D28D9; --wash:#F0E8FF; --grad3:linear-gradient(100deg,#7C3AED 0%,#E250C8 52%,#1FB6EE 100%); --grad2:linear-gradient(120deg,#7C3AED,#E250C8); /* cave-specific */ --rock:#F2EEF8; /* colour the arch cut-outs are filled with */ --void:#0A0618; /* the dark beyond a cave mouth */ --void2:#160D2E; --glow-v:124,58,237; /* rgb triplets for glow layers */ --glow-m:226,80,200; --glow-c:31,182,238; --glow-e:31,190,126; --lume:.42; /* master bioluminescence strength */ --grain:.05; /* mineral grain strength */ --vig:.055; /* enclosure vignette strength */ --r-card:14px; --r-ctrl:10px; --r-cell:3px; --shadow:0 1px 2px rgba(23,16,42,.05),0 10px 30px rgba(23,16,42,.07); --shadow-h:0 3px 8px rgba(23,16,42,.09),0 20px 48px rgba(124,58,237,.16); --deco:'Cinzel Decorative','Cinzel',Georgia,serif; --display:'Cinzel',Georgia,'Times New Roman',serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; } /* --------------------------------------------------------------------------- 2. TOKENS — dark theme = "The Deep" ------------------------------------------------------------------------- */ :root[data-theme="dark"]{ --ground:#0B0718; --ground2:#100A20; --surface:#171029; --well:#1E1536; --line:#2A1F45; --line-strong:#3E2E63; --ink:#F3EDFF; --ink-2:#B6ABD6; --ink-mut:#8B7FAD; --violet:#9B6BFF; --violet-lt:#B995FF; --magenta:#F268D8; --cyan:#4FD2FF; --gold:#F0B04A; --emerald:#3FE0A0; --amber:#FFA53A; --ink-violet:#C0A2FF; --wash:#251A42; --rock:#0B0718; --void:#060310; --void2:#120A26; --lume:1; --grain:.05; --vig:.5; --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.5); --shadow-h:0 3px 10px rgba(0,0,0,.55),0 24px 60px rgba(124,58,237,.4); } /* Follow the OS when the visitor has not chosen. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#0B0718; --ground2:#100A20; --surface:#171029; --well:#1E1536; --line:#2A1F45; --line-strong:#3E2E63; --ink:#F3EDFF; --ink-2:#B6ABD6; --ink-mut:#8B7FAD; --violet:#9B6BFF; --violet-lt:#B995FF; --magenta:#F268D8; --cyan:#4FD2FF; --gold:#F0B04A; --emerald:#3FE0A0; --amber:#FFA53A; --ink-violet:#C0A2FF; --wash:#251A42; --rock:#0B0718; --void:#060310; --void2:#120A26; --lume:1; --vig:.5; --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.5); --shadow-h:0 3px 10px rgba(0,0,0,.55),0 24px 60px rgba(124,58,237,.4); } } /* The ground colour lives on so the canvas is painted by the root and the negative-z-index cave layers (walls, ambient glow) are not buried under 's own background. */ html{background:var(--ground);transition:background-color .45s ease} body{background:transparent;color:var(--ink);transition:color .45s ease} /* --------------------------------------------------------------------------- 3. ENCLOSURE — the single most important trick. A light page reads as a cave only if it feels bounded by rock. Two fixed, non-interactive overlays sit above the page: a vignette that darkens the viewport edges, and a fine mineral grain so surfaces read as stone. ------------------------------------------------------------------------- */ .cave-vig,.cave-grain{position:fixed;inset:0;pointer-events:none;z-index:900} .cave-vig{ box-shadow: inset 0 0 130px 30px rgba(12,6,26,var(--vig)), inset 0 44px 90px -50px rgba(12,6,26,calc(var(--vig) * 1.5)), inset 0 -60px 110px -60px rgba(12,6,26,calc(var(--vig) * 1.4)); } /* fine mineral grain, generated as an inline SVG turbulence */ .cave-grain{ opacity:var(--grain); mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } :root[data-theme="dark"] .cave-grain{mix-blend-mode:overlay;opacity:.07} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cave-grain{mix-blend-mode:overlay;opacity:.07}} /* the rock strata that run faintly down the page behind everything */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(120% 60% at 50% -10%, rgba(var(--glow-v),calc(.10 * var(--lume))), transparent 62%), radial-gradient(90% 50% at 8% 30%, rgba(var(--glow-c),calc(.07 * var(--lume))), transparent 60%), radial-gradient(90% 50% at 96% 62%, rgba(var(--glow-m),calc(.07 * var(--lume))), transparent 60%), radial-gradient(80% 40% at 50% 108%, rgba(var(--glow-e),calc(.06 * var(--lume))), transparent 62%); } /* --------------------------------------------------------------------------- 4. CAVE MOUTHS — the arch that separates one chamber from the next. The SVG is the ROCK (filled with the adjacent chamber's colour) with the arch as negative space, so content behind shows through the opening. ------------------------------------------------------------------------- */ .cmouth{position:absolute;left:0;right:0;z-index:6;pointer-events:none;line-height:0;display:block} .cmouth svg{display:block;width:100%;height:100%} .cmouth.top{top:-1px;height:clamp(64px,8vw,124px)} .cmouth.bot{bottom:-1px;height:clamp(76px,9.5vw,148px)} .cmouth path.rockfill{fill:var(--rock)} /* Lit rock shades warm to cool: the lantern side picks up a warm mineral cast, the face turning into the opening falls away to cool violet shadow. Mixing toward --ink-violet rather than --ink keeps the chroma, so the rock never goes flat grey against the page. */ .cmouth stop.s0{stop-color:color-mix(in srgb,var(--rock) 87%, #FFF3E2 13%)} .cmouth stop.s1{stop-color:var(--rock)} .cmouth stop.s2{stop-color:color-mix(in srgb,var(--rock) 84%, var(--ink-violet) 16%)} :root[data-theme="dark"] .cmouth stop.s0{stop-color:color-mix(in srgb,var(--rock) 84%, var(--violet) 16%)} :root[data-theme="dark"] .cmouth stop.s2{stop-color:color-mix(in srgb,var(--rock) 66%, #000 34%)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cmouth stop.s0{stop-color:color-mix(in srgb,var(--rock) 84%, var(--violet) 16%)} :root:not([data-theme="light"]) .cmouth stop.s2{stop-color:color-mix(in srgb,var(--rock) 66%, #000 34%)} } /* the wet, lit edge where the rock meets the opening */ .cmouth::after{content:"";position:absolute;left:0;right:0;height:56%;pointer-events:none; background:radial-gradient(120% 100% at 50% 0%,rgba(var(--glow-m),calc(.42 * var(--lume))),transparent 66%); filter:blur(7px);opacity:.8;mix-blend-mode:screen} .cmouth.top::after{top:0;background:radial-gradient(140% 100% at 50% 100%,rgba(var(--glow-v),calc(.34 * var(--lume))),transparent 68%)} .cmouth.bot::after{bottom:0} /* a thin lip of lit mineral along the arch edge */ .cmouth path.rocklip{fill:none;vector-effect:non-scaling-stroke; stroke:rgba(var(--glow-v),calc(.55 * var(--lume)));stroke-width:1.6; filter:drop-shadow(0 0 7px rgba(var(--glow-m),calc(.6 * var(--lume))))} /* --------------------------------------------------------------------------- 4b. CHAMBER WALLS — the passage you are walking down. Two rock faces pinned to the left and right of the viewport: layered strata, a ragged inner silhouette, and bioluminescence caught in the crevices. This is what makes the LIGHT theme read as a cave rather than a white page — the content sits in a lit passage with stone either side, and the page never meets the viewport edge as flat colour. ------------------------------------------------------------------------- */ .cave-walls{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;--wally:0px} .cave-walls i{position:absolute;top:0;bottom:0;display:block; width:clamp(64px,10.5vw,210px)} .cave-walls i.l{left:0} .cave-walls i.r{right:0;transform:scaleX(-1)} .cave-walls i.r::before{background-position:0 calc(var(--wally) - 37px),0 0} /* the rock face: depth across the wall, plus horizontal strata bedding */ .cave-walls i::before{content:"";position:absolute;inset:0; background: /* strata — the layers the rock was laid down in */ repeating-linear-gradient(178.4deg, transparent 0 29px, color-mix(in srgb,var(--ink) 5%,transparent) 29px 30px, transparent 30px 53px, color-mix(in srgb,var(--ink) 2.5%,transparent) 53px 54px, transparent 54px 71px, color-mix(in srgb,var(--ink) 3.5%,transparent) 71px 72px, transparent 72px 108px), /* the face itself, darkest where it turns away from the light */ linear-gradient(90deg, color-mix(in srgb,var(--ground2) 58%, var(--ink) 42%) 0%, color-mix(in srgb,var(--ground2) 74%, var(--ink) 26%) 26%, color-mix(in srgb,var(--ground2) 92%, var(--ink) 8%) 58%, var(--ground2) 84%, transparent 100%); background-position:0 var(--wally),0 0; -webkit-mask-image:var(--wallcut);mask-image:var(--wallcut); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* the ragged edge where the wall gives way to the passage — two different cuts so the left and right walls are not mirror twins of each other */ :root{ --wallcut:url("data:image/svg+xml,"); --wallcut2:url("data:image/svg+xml,"); } .cave-walls i.r{--wallcut:var(--wallcut2)} /* bioluminescence caught in the crevices, and the lit lip along the edge */ .cave-walls i::after{content:"";position:absolute;inset:0; background: radial-gradient(40% 7% at 3% 12%,rgba(var(--glow-v),calc(.42 * var(--lume))),transparent 74%), radial-gradient(34% 5% at 2% 29%,rgba(var(--glow-c),calc(.30 * var(--lume))),transparent 74%), radial-gradient(42% 6% at 5% 48%,rgba(var(--glow-m),calc(.34 * var(--lume))),transparent 74%), radial-gradient(32% 5% at 2% 66%,rgba(var(--glow-e),calc(.28 * var(--lume))),transparent 74%), radial-gradient(38% 6% at 4% 84%,rgba(var(--glow-v),calc(.32 * var(--lume))),transparent 74%); filter:blur(13px); background-position:0 calc(var(--wally) * 1.8); background-size:100% 220%;background-repeat:repeat-y; -webkit-mask-image:var(--wallcut);mask-image:var(--wallcut); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} @media(max-width:820px){ .cave-walls i{width:clamp(22px,5vw,52px)} .cave-walls i::after{filter:blur(8px)} } /* --------------------------------------------------------------------------- 4c. CHAMBER LEDGES — a low rock lip you pass under between lit chambers. Light-on-light, so the page stays light-dominant but never flat. ------------------------------------------------------------------------- */ .ledge{position:relative;height:clamp(26px,3.4vw,50px);pointer-events:none;overflow:hidden} .ledge.lip{height:clamp(30px,4vw,60px);margin-bottom:clamp(4px,1vw,14px)} .ledge::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:150%;height:210%;border-radius:0 0 50% 50%/0 0 100% 100%; background:linear-gradient(180deg, color-mix(in srgb,var(--ground2) 62%, var(--ink) 38%) 0%, var(--ground2) 34%, transparent 92%); opacity:.55} .ledge::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:150%;height:210%;border-radius:0 0 50% 50%/0 0 100% 100%; box-shadow:0 2px 0 0 rgba(var(--glow-v),calc(.34 * var(--lume))), 0 10px 26px -6px rgba(var(--glow-m),calc(.2 * var(--lume)))} /* --------------------------------------------------------------------------- 5. DRIFTING SPORES — cave air. Slow, sparse, never distracting. ------------------------------------------------------------------------- */ .motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3} .mote{position:absolute;border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(var(--tint,124,58,237),.55) 45%,transparent 72%); animation:drift var(--d,22s) var(--delay,0s) linear infinite;will-change:transform,opacity} @keyframes drift{ 0%{opacity:0;transform:translate3d(0,20px,0) scale(.7)} 12%{opacity:calc(.85 * var(--lume))} 80%{opacity:calc(.5 * var(--lume))} 100%{opacity:0;transform:translate3d(var(--dx,18px),calc(-1 * var(--rise,190px)),0) scale(1.15)} } @media (prefers-reduced-motion:reduce){ .mote{animation:none;opacity:calc(.4 * var(--lume))} } /* --------------------------------------------------------------------------- 6. HEADER — a stone ledge with a fringe of stalactites beneath it. ------------------------------------------------------------------------- */ .abar{background:linear-gradient(100deg,var(--void),var(--void2) 60%,var(--void));color:#D9CCF7; position:relative;border-bottom:1px solid rgba(var(--glow-v),.28)} .abar b{color:#fff} .abar .dia{color:var(--magenta);text-shadow:0 0 8px rgba(var(--glow-m),.8)} .quicknav{background:var(--surface);border-bottom:1px solid var(--line)} .qpills{background:var(--well);border-color:var(--line)} .qp{color:var(--ink-2)} .qp:hover{color:var(--ink)} .qp.on{background:var(--grad2);color:#fff;box-shadow:0 3px 14px rgba(var(--glow-v),.45)} header.top{ background:color-mix(in srgb, var(--surface) 82%, transparent); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1); position:sticky;top:0;z-index:50; } /* the fringe: drips hanging off the header into the page */ header.top::after{ content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none; background:var(--surface); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v3H0z' fill='%23000'/%3E%3Cpath d='M8 2l2.2 9L12 2zM31 2l1.4 5.5L34 2zM52 2l2.8 13L57 2zM76 2l1.6 6.5L79 2zM99 2l2.2 10L104 2zM123 2l1.3 5L126 2zM145 2l2.6 12L150 2zM168 2l1.5 6L171 2zM190 2l2.4 11L195 2zM214 2l1.4 5.5L217 2zM231 2l2 8L235 2z' fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v3H0z' fill='%23000'/%3E%3Cpath d='M8 2l2.2 9L12 2zM31 2l1.4 5.5L34 2zM52 2l2.8 13L57 2zM76 2l1.6 6.5L79 2zM99 2l2.2 10L104 2zM123 2l1.3 5L126 2zM145 2l2.6 12L150 2zM168 2l1.5 6L171 2zM190 2l2.4 11L195 2zM214 2l1.4 5.5L217 2zM231 2l2 8L235 2z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size:240px 16px;mask-size:240px 16px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x; opacity:.92; } .brand{color:var(--ink)} .brand .cdot{background:var(--grad2);box-shadow:0 0 10px rgba(var(--glow-m),.9)} .navlinks a{color:var(--ink-2)} .navlinks a:hover{background:var(--wash);color:var(--ink-violet)} .navlinks a.active{background:var(--grad2);color:#fff;box-shadow:0 4px 16px rgba(var(--glow-v),.42)} .top .search input{background:var(--well);border-color:var(--line);color:var(--ink)} .top .search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--wash),0 0 18px rgba(var(--glow-v),.28)} .top .icons{color:var(--ink-2)} .top .icons .cart{background:var(--grad2);color:#fff;box-shadow:0 4px 16px rgba(var(--glow-v),.4)} .burger{background:var(--surface);border-color:var(--line-strong)} .burger span{background:var(--ink)} .mobnav>a{color:var(--ink);border-bottom-color:var(--line)} .mobnav .msearch input{background:var(--well);border-color:var(--line-strong);color:var(--ink)} /* theme lantern — the light/dark switch, styled as a hanging lamp */ .lantern{position:relative;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer; background:var(--well);border:1px solid var(--line-strong);color:var(--ink-2); transition:background .2s,border-color .2s,color .2s,box-shadow .2s} .lantern:hover{border-color:var(--violet);color:var(--ink-violet); box-shadow:0 0 0 3px var(--wash),0 0 22px rgba(var(--glow-v),.35)} .lantern svg{width:18px;height:18px} .lantern .ic-dark{display:none} :root[data-theme="dark"] .lantern .ic-dark{display:block} :root[data-theme="dark"] .lantern .ic-light{display:none} :root[data-theme="dark"] .lantern{color:var(--gold);border-color:rgba(240,176,74,.4); box-shadow:0 0 20px rgba(240,176,74,.28),inset 0 0 12px rgba(240,176,74,.14)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lantern .ic-dark{display:block} :root:not([data-theme="light"]) .lantern .ic-light{display:none} :root:not([data-theme="light"]) .lantern{color:var(--gold);border-color:rgba(240,176,74,.4); box-shadow:0 0 20px rgba(240,176,74,.28),inset 0 0 12px rgba(240,176,74,.14)} } .mobnav .lantern{width:auto;height:auto;border-radius:999px;padding:13px;gap:10px; font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px} /* --------------------------------------------------------------------------- 7. THE HERO — a tunnel of receding cave mouths with a glowing throat. ------------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;border-bottom:0;background:var(--void);isolation:isolate} .hero .hbg{position:absolute;inset:0;z-index:0; background:url(vendors/ccback.jpg) center/cover no-repeat; transform:scale(1.08);filter:saturate(1.15) contrast(1.05)} .hero .hbg::after{content:"";position:absolute;inset:0; background: radial-gradient(58% 50% at 50% 46%, rgba(10,6,24,.18), rgba(8,4,20,.72) 68%, rgba(6,3,16,.94) 100%), linear-gradient(180deg,rgba(8,4,20,.62),rgba(8,4,20,.34) 40%,rgba(7,3,18,.9))} /* the receding arches — five nested cave mouths drawn in SVG by cave.js */ .tunnel{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .tunnel svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(160%,1900px);height:auto;min-height:100%} .tunnel .ring{fill:none;stroke-linecap:round;mix-blend-mode:screen} .tunnel .ring:not(.core){filter:blur(7px)} .tunnel svg{ -webkit-mask-image:radial-gradient(122% 96% at 50% 122%,#000 26%,rgba(0,0,0,.42) 60%,transparent 86%); mask-image:radial-gradient(122% 96% at 50% 122%,#000 26%,rgba(0,0,0,.42) 60%,transparent 86%)} /* the glowing throat at the end of the tunnel */ .throat{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:1; width:min(46vw,520px);aspect-ratio:.78;pointer-events:none; background:radial-gradient(closest-side, rgba(255,255,255,.5) 0%, rgba(var(--glow-m),.42) 26%, rgba(var(--glow-v),.34) 50%, transparent 76%); filter:blur(14px);opacity:.85; animation:breathe 9s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.97)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.04)}} @media (prefers-reduced-motion:reduce){.throat{animation:none}} /* the still pool on the cave floor — the hero's bottom edge reflects */ .pool{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,13vw,190px);z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(var(--glow-c),.16) 42%,rgba(var(--glow-v),.22)); -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%); mask-image:linear-gradient(180deg,transparent,#000 55%)} .pool::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%; background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 7px); animation:ripple 7s ease-in-out infinite} @keyframes ripple{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(3px);opacity:.85}} @media (prefers-reduced-motion:reduce){.pool::after{animation:none}} .hero .stars{z-index:4} .hero .wrap{position:relative;z-index:5} .hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; box-shadow:inset 0 0 190px 56px rgba(5,2,14,.9)} .hero .mtscene{display:none} .heroin{padding:clamp(74px,10vw,110px) 0 clamp(96px,13vw,150px);position:relative;z-index:5} .hero .herocap,.hero .herocap .mts{color:#D6C4FF} .hero .herocap{letter-spacing:.22em} .hero h1{color:#fff;font-family:var(--display);text-shadow:0 2px 40px rgba(0,0,0,.6),0 0 70px rgba(var(--glow-v),.5)} .hero h1 .grad{background:linear-gradient(100deg,#C9A6FF 0%,#FF9BEA 48%,#8FE6FF 100%); -webkit-background-clip:text;background-clip:text;color:transparent} .hero .sub{color:#E4DBF7} .hero .orn .txt{color:#E4DBF7} .hero .orn .line{background:linear-gradient(90deg,transparent,rgba(255,255,255,.45))} .hero .orn .line.r{background:linear-gradient(90deg,rgba(255,255,255,.45),transparent)} .hero .orn .dia{color:#FF9BEA;text-shadow:0 0 10px rgba(var(--glow-m),.9)} .bigsearch input{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.3);color:#17102A; box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(var(--glow-v),.22)} .bigsearch input::placeholder{color:#7D7299} .bigsearch input:focus{border-color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 4px rgba(var(--glow-v),.45)} .bigsearch .g{color:var(--violet)} .bigsearch .go{background:var(--grad2);box-shadow:0 6px 22px rgba(var(--glow-m),.55)} .hero .trending .l{color:#C4B2EE} .hero .tchip{color:#F2ECFF;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .hero .tchip:hover{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.19)} .hero .hstats{background:rgba(16,9,34,.5);border-color:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09)} .hero .hstats .s{border-color:rgba(255,255,255,.14)} .hero .hstats .s b{color:#fff;text-shadow:0 0 22px rgba(var(--glow-c),.6)} .hero .hstats .s span{color:#C4B2EE;font-size:11px} /* --------------------------------------------------------------------------- 8. THE DROP PLATE — a slab of glowing mineral set into the cave floor, sitting just below the mouth of the passage rather than banding across it. ------------------------------------------------------------------------- */ .drop{background:none;border-bottom:0;position:relative;z-index:9; margin:calc(-1 * clamp(26px,3.4vw,48px)) 0 0} .drop .wrap{max-width:min(880px,calc(100% - 44px));margin:0 auto;padding:0} .drop>.wrap{ display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center; padding:14px 26px;border-radius:999px; background:linear-gradient(100deg,#1B0F36,#3A1560 48%,#1B0F36); border:1px solid rgba(var(--glow-m),.42); box-shadow:0 18px 46px rgba(12,4,30,.42), 0 0 34px rgba(var(--glow-m),calc(.34 * var(--lume))), inset 0 1px 0 rgba(255,255,255,.1); color:#EFE7FD;position:relative;overflow:hidden} .drop>.wrap::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 220% at 50% 50%,rgba(var(--glow-m),.3),transparent 72%)} .drop .tag,.drop .nm,.drop .cd{position:relative;z-index:2} .drop .tag{color:#E7C2FF} .drop .nm{color:#fff;font-family:var(--display)} .drop .cd b{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff} @media(max-width:640px){ .drop{margin-top:calc(-1 * clamp(14px,3vw,26px))} .drop>.wrap{border-radius:20px;padding:13px 18px;gap:10px} } /* --------------------------------------------------------------------------- 9. CHAMBERS — sections, headings with an underglow ------------------------------------------------------------------------- */ section.blk{position:relative;padding:clamp(48px,6.5vw,72px) 0} /* One chamber to the next the stone shifts tone a little. This has to stay translucent: an opaque background on an in-flow section paints above the negative-z-index wall layer and would bury the passage walls. */ section.blk:nth-of-type(even)::before{background-color:color-mix(in srgb,transparent 92%, var(--ground2))} section.blk:nth-of-type(3n)::before{background-color:color-mix(in srgb,transparent 94%, var(--wash))} /* the rippled strata of the chamber wall, receding behind the content */ section.blk::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:min(1500px,124vw);height:100%;pointer-events:none;z-index:0;opacity:calc(.5 * var(--lume)); background:repeating-radial-gradient( 112% 78% at 50% 104%, transparent 0 44px, color-mix(in srgb,var(--ink) 7%,transparent) 44px 46px, transparent 45px 92px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 26%,#000 70%,transparent)} section.blk>.wrap{position:relative;z-index:1} .blk .shead{position:relative} .blk .shead h2{font-family:var(--display);color:var(--ink)} /* the bioluminescent pool of light under a section heading */ .blk .shead::before{content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%); width:min(560px,86%);height:172px;pointer-events:none;z-index:0; background: radial-gradient(closest-side,rgba(var(--glow-v),calc(.26 * var(--lume))),transparent 72%), radial-gradient(closest-side at 50% 62%,rgba(var(--glow-m),calc(.14 * var(--lume))),transparent 68%); filter:blur(8px)} .blk .shead>*{position:relative;z-index:1} .eyebrow{color:var(--ink-mut);font-size:11.5px;letter-spacing:.2em} .orn .txt{color:var(--ink-2)} .orn .dia{color:var(--magenta);text-shadow:0 0 9px rgba(var(--glow-m),calc(.7 * var(--lume)))} .orn .line{background:linear-gradient(90deg,transparent,var(--line-strong))} .orn .line.r{background:linear-gradient(90deg,var(--line-strong),transparent)} .ghost{color:var(--ink-2)} .ghost:hover{color:var(--ink-violet)} /* --------------------------------------------------------------------------- 10. CARDS AS CARVED NICHES A niche has a lit lip along its top edge and pooled glow at its base. ------------------------------------------------------------------------- */ .cell,.pcard,.vcard,.tier,.formcard,.summary,.plan,.coll,.notice,.vchip{ background:var(--surface);border-color:var(--line)} .cell{position:relative;border-radius:16px;overflow:hidden; box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7)} :root[data-theme="dark"] .cell{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)} .cell::after{content:"";position:absolute;left:50%;bottom:-38px;transform:translateX(-50%); width:78%;height:76px;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side,rgba(var(--glow-v),calc(.3 * var(--lume))),transparent 72%); opacity:0;transition:opacity .25s} .cell:hover::after{opacity:1} .cell:hover{border-color:var(--violet-lt);box-shadow:var(--shadow-h)} .cell .ic{background:var(--wash);color:var(--violet)} .cell:hover .ic{background:var(--grad2);color:#fff;box-shadow:0 8px 24px rgba(var(--glow-v),.5)} .cell .nm{color:var(--ink)} .cell:hover .nm{color:var(--ink-violet)} .cell .ct,.cell .ix{color:var(--ink-mut)} .cell.photo .ph{background:var(--well)} .cell.photo .ix{background:rgba(10,6,24,.55);color:#fff} /* vendor cards — the cave art is already the star; frame it as a cave mouth */ .vc{background:var(--void);box-shadow:0 12px 34px rgba(12,6,26,.24)} :root[data-theme="dark"] .vc{box-shadow:0 12px 40px rgba(0,0,0,.6)} .vc::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 46px 10px rgba(6,3,16,.5); transition:box-shadow .25s} .vc:hover::after{box-shadow:inset 0 0 0 1px rgba(var(--glow-m),.6),inset 0 0 46px 10px rgba(6,3,16,.34)} .vc:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(var(--glow-v),.45)} .vc .vimg{transition:transform .5s ease} .vc:hover .vimg{transform:scale(1.06)} .vc .vcbadge{background:rgba(var(--glow-v),.55);border-color:rgba(255,255,255,.36)} .vc .vcname{font-family:var(--sans)} /* product cards — stone slabs */ .pcard{position:relative;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.65)} :root[data-theme="dark"] .pcard{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)} .pcard:hover{box-shadow:var(--shadow-h);border-color:var(--violet-lt)} .pcard .im{border-bottom-color:var(--line);background:var(--well)} .pcard .fl,.pcard .srctag{background:color-mix(in srgb,var(--surface) 92%,transparent); border-color:var(--line);color:var(--ink-2)} .pcard .pn{color:var(--ink)} .pcard .pc{color:var(--ink-mut)} .pcard .price{color:var(--ink)} .pcard .instk{color:var(--ink-2)} .pcard .p100{color:var(--emerald)!important} .pcard .pfrom{color:var(--ink-mut)!important} .dot.g{background:var(--emerald);box-shadow:0 0 8px rgba(var(--glow-e),.8)} .vcard .lg{border-color:var(--surface)} .vbadge{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--line);color:var(--ink-2)} /* --------------------------------------------------------------------------- 11. THE DEEP CHAMBER — the big dark band, entered through a cave mouth ------------------------------------------------------------------------- */ .band .inner{padding:calc(clamp(64px,8vw,124px) + 18px) 0 calc(clamp(76px,9.5vw,148px) + 10px)} .band{position:relative;overflow:hidden;border-top:0;color:#EAE3FB; background: radial-gradient(70% 90% at 50% 8%, #2B1656 0%, #180D31 52%, #0C0620 100%); padding-top:clamp(30px,5vw,58px)} .band .aur{position:absolute;inset:0;opacity:.85; background: radial-gradient(38% 52% at 84% 26%,rgba(var(--glow-m),.38),transparent 62%), radial-gradient(38% 52% at 10% 88%,rgba(var(--glow-c),.3),transparent 62%), radial-gradient(30% 40% at 50% 4%,rgba(var(--glow-v),.4),transparent 66%)} .band .wrap{position:relative;z-index:8} .band .eyebrow{color:#CFA9FF} .band h2{color:#fff;font-family:var(--display)} .band p{color:#B9AFDD} .band .feat{color:#D8D1F2} .band .feat svg{color:#5BE0B0} .band .feat b{color:#fff} .solid{background:var(--grad3);box-shadow:0 10px 34px rgba(var(--glow-m),.48)} .plan{background:var(--surface);color:var(--ink);box-shadow:0 28px 70px rgba(0,0,0,.5)} .plan .pt{color:var(--ink-violet)} .plan .amt{color:var(--ink)} .plan .amt small{color:var(--ink-mut)} .plan li svg{color:var(--emerald)} .plan .note{color:var(--ink-mut);border-top-color:var(--line)} /* --------------------------------------------------------------------------- 12. FOOTER — the cave floor, with the pool at the bottom of the descent ------------------------------------------------------------------------- */ footer{position:relative;overflow:hidden;border-top:0;background:var(--surface); padding-top:clamp(52px,7vw,78px)} footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:280px;pointer-events:none; background: radial-gradient(60% 100% at 50% 100%,rgba(var(--glow-v),calc(.16 * var(--lume))),transparent 72%), radial-gradient(40% 80% at 16% 100%,rgba(var(--glow-c),calc(.12 * var(--lume))),transparent 70%), radial-gradient(40% 80% at 86% 100%,rgba(var(--glow-m),calc(.12 * var(--lume))),transparent 70%)} footer .wrap{position:relative;z-index:2} .fcol h4{color:var(--ink-mut);font-size:11px;letter-spacing:.14em} .fcol a{color:var(--ink-2)} .fcol a:hover{color:var(--ink-violet)} .fbrand p{color:var(--ink-2)} .fdisc{border-top-color:var(--line)} .fdisc .warn{color:var(--gold);font-size:11px} .fdisc .cp{color:var(--ink-mut);font-size:11.5px} /* --------------------------------------------------------------------------- 13. PAGE HEADS — every inner page opens with a chamber mouth ------------------------------------------------------------------------- */ /* The chamber head is entered under a rock lip and left through the floor, so its padding has to clear both arches or the eyebrow ends up behind the rock. */ .phead{position:relative;overflow:hidden;background:var(--void);color:#fff;border-bottom:0; --arch-t:clamp(42px,5vw,76px); --arch-b:clamp(50px,6vw,96px); padding:calc(var(--arch-t) + clamp(26px,3vw,42px)) 0 calc(var(--arch-b) + clamp(22px,2.6vw,36px))} .phead>.cmouth.top{height:var(--arch-t)} .phead>.cmouth.bot{height:var(--arch-b)} /* the same clearance rule for the other dark chamber heads */ .sec-hero,.vstore-hero{--arch-t:clamp(42px,5vw,76px);--arch-b:clamp(50px,6vw,96px)} .sec-hero>.cmouth.top,.vstore-hero>.cmouth.top{height:var(--arch-t)} .sec-hero>.cmouth.bot,.vstore-hero>.cmouth.bot{height:var(--arch-b)} .vstore-hero .wrap{padding:calc(var(--arch-t) + 26px) 0 calc(var(--arch-b) + 22px)} .phead .aur{position:absolute;inset:0;opacity:1; background: radial-gradient(60% 120% at 50% -10%,rgba(var(--glow-v),.5),transparent 62%), radial-gradient(42% 90% at 86% 20%,rgba(var(--glow-m),.3),transparent 64%), radial-gradient(42% 90% at 10% 100%,rgba(var(--glow-c),.26),transparent 64%)} .phead::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 130px 40px rgba(5,2,14,.8)} .phead .wrap{position:relative;z-index:8} .phead .eyebrow{color:#CFA9FF} .phead h1{color:#fff;font-family:var(--display);text-shadow:0 2px 30px rgba(0,0,0,.5)} .phead p{color:#D9CFF2} .dsearch input{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.28);color:#17102A; box-shadow:0 10px 30px rgba(0,0,0,.35)} .dsearch input::placeholder{color:#7D7299} .dsearch input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(var(--glow-v),.45)} .dsearch .g{color:var(--violet)} /* --------------------------------------------------------------------------- 14. CONTROLS, FORMS, THE REST — re-tinted so both themes hold up ------------------------------------------------------------------------- */ .btn{background:var(--grad2);box-shadow:0 6px 22px rgba(var(--glow-m),.32)} .btn:hover{box-shadow:0 10px 30px rgba(var(--glow-m),.48)} .btn2{background:var(--surface);color:var(--ink);border-color:var(--line-strong)} .btn2:hover{border-color:var(--violet);color:var(--ink-violet)} .notice{background:var(--wash);border-color:var(--line-strong);color:var(--ink-2)} .notice svg{color:var(--violet)} .input,.textarea,select.input,.sel,.sortsel select{background:var(--well);border-color:var(--line-strong);color:var(--ink)} .input:focus,.textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--wash)} .field label{color:var(--ink-2);font-size:11.5px;letter-spacing:.1em} .frail{background:var(--well);border-color:var(--line)} .fg{border-bottom-color:var(--line)} .fg h5{color:var(--ink-mut);font-size:11px} .opt{color:var(--ink-2)} .opt:hover{color:var(--ink)} .opt .bx{background:var(--surface);border-color:var(--line-strong)} .opt .n{color:var(--ink-mut)} .sw{background:var(--line-strong)} .sw::after{background:var(--surface)} .az{color:var(--ink-2)} .az:hover{background:var(--surface);color:var(--ink)} .az.on{background:var(--wash);color:var(--ink-violet)} .pg{background:var(--surface);border-color:var(--line);color:var(--ink-2)} .pg:hover{border-color:var(--violet-lt);color:var(--ink)} .pg.on{background:var(--grad2);color:#fff;border-color:transparent} .stabs{border-bottom-color:var(--line)} .stab{color:var(--ink-2)} .stab:hover{color:var(--ink)} .stab.on{color:var(--ink-violet)} .subhd{color:var(--ink-mut);font-size:11px} .subhd::after{background:var(--line)} .crumb{color:var(--ink-mut);font-size:11.5px} .divh{background:var(--line)} .summary{box-shadow:var(--shadow)} .summary .line{color:var(--ink-2)} .summary .tot{color:var(--ink);border-top-color:var(--line)} .cartrow{border-bottom-color:var(--line)} .cartrow img{border-color:var(--line)} .cartrow .ci-v,.cartrow .rm{color:var(--ink-mut)} .empty{color:var(--ink-2)} .empty svg{color:var(--line-strong)} .tier.feat{border-color:var(--violet);box-shadow:0 22px 56px rgba(var(--glow-v),.24)} .tier.feat::before{background:var(--grad2)} .step .no{border-color:var(--line-strong)} .step.on .no{background:var(--grad2);border-color:transparent;color:#fff} .step .bar{background:var(--line-strong)} .spec-list{border-top-color:var(--line)} .spec-list li{color:var(--ink-2)} .spec-list li b{color:var(--ink)} .qty{border-color:var(--line-strong)} .qty button{background:var(--surface);color:var(--ink-2)} .qty button:hover{background:var(--well);color:var(--ink)} .pdp .media{background:var(--void);border-color:var(--line)} .pdp .opt-pill{background:var(--surface);border-color:var(--line-strong)} .pdp .opt-pill.on{background:var(--wash);border-color:var(--violet);color:var(--ink-violet)} .pdp .desc,.rt{color:var(--ink-2)} .pdesc{border-top-color:var(--line)} .pdesc>.pdlbl{color:var(--ink-mut)} .rt .rt-lead{color:var(--ink)} .rt .rt-h{color:var(--ink)} .rt .rt-feat{background:var(--surface);border-color:var(--line)} .rt .rt-feat b{color:var(--ink)} .rt .rt-fic{background:var(--wash)} .rt .rt-kvs{border-top-color:var(--line)} .rt .rt-kv{border-bottom-color:var(--line)} .rt .rt-kv b{color:var(--ink-mut)} .rt .rt-kv span{color:var(--ink-2)} .rt .rt-fine{background:var(--well);border-color:var(--line);color:var(--ink-mut)} .rt .rt-linkline a{background:var(--wash);border-color:var(--line-strong);color:var(--ink-violet)} .rt .rt-ol li::before{background:var(--wash);color:var(--ink-violet)} .vstore-hero{border-bottom:0} .vstore-hero .bg::after{background:linear-gradient(180deg,rgba(8,4,20,.42),rgba(8,4,20,.8))} .vpill{background:rgba(var(--glow-v),.6);border-color:rgba(255,255,255,.32)} .tchip{background:var(--surface);border-color:var(--line);color:var(--ink-2)} .tchip:hover{border-color:var(--violet-lt)} .hstats{background:var(--surface);border-color:var(--line)} .hstats .s{border-color:var(--line)} .hstats .s b{color:var(--ink)} .hstats .s span{color:var(--ink-mut)} .coll{border-color:var(--line)} .coll .ct p{color:var(--ink-2)} .vchip .mt{color:var(--ink-mut)} .mspot{background:var(--surface);border-color:var(--line)} .mspot .msart{background:var(--well);border-right-color:var(--line)} .mspot .msven,.mspot .msprice small{color:var(--ink-mut)} .mspot .msblurb,.mspot .mspts span{color:var(--ink-2)} .mspot .msprice{color:var(--ink)} .mspot .msfoot{border-top-color:var(--line)} .mspot .mspts svg{color:var(--emerald)} .mspot .msflag{background:rgba(var(--glow-v),.62)} .mspot .msgo{background:var(--grad2);box-shadow:0 6px 22px rgba(var(--glow-v),.34)} .rail::-webkit-scrollbar-thumb{background:var(--line-strong)} ::selection{background:var(--wash);color:var(--ink)} /* The wishlist heart on product cards. The base rule is .pcard .pwish with a hard-coded white, so these have to match its specificity to reach it. */ .pcard .pwish{background:color-mix(in srgb,var(--surface) 84%,transparent); border-color:var(--line);color:var(--ink-mut); box-shadow:0 2px 8px rgba(6,3,16,.18)} .pcard .pwish:hover{color:var(--violet)} .pcard .pwish.on{background:var(--surface);color:var(--magenta); border-color:color-mix(in srgb,var(--magenta) 42%,transparent)} .pcard .pwish.on svg{fill:var(--magenta);stroke:var(--magenta)} .pact.add,.pact.opts{background:var(--grad2);color:#fff} .pact.oos{background:var(--well);color:var(--ink-mut)} /* --------------------------------------------------------------------------- 15. TYPE — carved, and microlabels readable (never decorative-tiny) ------------------------------------------------------------------------- */ h1,h2,h3{font-family:var(--display)} .hero h1,.phead h1,.band h2,.blk .shead h2{letter-spacing:.012em} .mono,.eyebrow,.fcol h4,.fg h5,.subhd,.crumb,.field label{font-family:var(--mono)} /* --------------------------------------------------------------------------- 16. RESPONSIVE ------------------------------------------------------------------------- */ @media(max-width:960px){ .cmouth.top,.cmouth.bot{height:clamp(40px,9vw,66px)} .cdrip{height:clamp(22px,5vw,40px)} .throat{width:min(74vw,420px)} } @media(max-width:560px){ .heroin{padding:56px 0 78px} .hero .hstats{flex-wrap:wrap} .hero .hstats .s{flex:1 0 33%;padding:15px 8px} .hero .hstats .s b{font-size:24px} .cave-vig{box-shadow:inset 0 0 70px 16px rgba(12,6,26,var(--vig))} }