/* ============================================================================ CULTURE CAVE 3.0 — THE SOUL Loaded last. This is the aesthetic, taken directly from the paintings. The palette is not chosen, it is measured. Sampling every pixel in the seven paintings that is both bright and saturated — the glow itself, not the rock — gives: 64% cyan-to-blue, 21% magenta-to-pink, the rest violet and ember. The old build leaned violet, which is why it never quite read as Culture Cave. Cyan leads. Magenta answers. Everything else is an accent. The art is UV blacklight poster work: near-black ground, neon LINE, outer glow, nothing flat-filled. So the interface is drawn the same way. Dark is the default now, because that is what the paintings are; the lit chamber is still there behind the lantern for anyone who wants it. ========================================================================== */ /* --------------------------------------------------------------------------- 1. THE MEASURED PALETTE ------------------------------------------------------------------------- */ :root{ --uv-cyan:#14C4FF; --uv-ice:#7FEBFF; --uv-blue:#1489FF; --uv-mag:#FF14C4; --uv-pink:#FF1489; --uv-violet:#A855F7; --uv-green:#5BFF9E; --uv-amber:#FF8A2E; --void-0:#07040F; --void-1:#0B0618; --void-2:#120A24; --void-3:#1A0F31; /* the three glow channels every rim, ring and shadow already reads from */ --glow-v:20,196,255; /* cyan leads */ --glow-m:255,20,196; /* magenta answers */ --glow-c:20,137,255; /* blue holds the middle */ --glow-e:91,255,158; } /* dark is the default: the paintings are dark, so the site is */ :root,:root[data-theme="dark"]{ --ground:var(--void-1); --ground2:var(--void-2); --ground3:var(--void-3); --ink:#EAF6FF; --ink-2:#9FB6D4; --ink-mut:#6E839E; --surface:rgba(20,196,255,.045); --well:rgba(20,196,255,.06); --line:rgba(20,196,255,.2); --line-strong:rgba(20,196,255,.38); --rule:rgba(20,196,255,.18); --rule-2:rgba(20,196,255,.09); --wash:rgba(20,196,255,.12); --violet:var(--uv-cyan); --violet-lt:var(--uv-ice); --magenta:var(--uv-mag); --cyan:var(--uv-blue); --ink-violet:var(--uv-ice); --emerald:var(--uv-green); --gold:var(--uv-amber); --grad2:linear-gradient(118deg,var(--uv-cyan),var(--uv-mag)); --grad3:linear-gradient(100deg,var(--uv-cyan) 0%,var(--uv-violet) 48%,var(--uv-mag) 100%); --paper-1:var(--void-1); --paper-2:var(--void-2); --paper-3:var(--void-3); --myc:url("custom/myc-dark.svg"); --myc-a:.13; --shaft:12,7,26; --shaft-a:.72; --veil:0; --sky:.2; --floor:.34; } /* the lit chamber, kept and made to work with the same measured hues */ :root[data-theme="light"]{ --ground:#F4F1F8; --ground2:#EBE6F2; --ground3:#E3DCEC; --ink:#0E0A1A; --ink-2:#4A4260; --ink-mut:#736B88; --surface:rgba(255,255,255,.8); --well:rgba(14,10,26,.045); --line:rgba(14,10,26,.14); --line-strong:rgba(14,10,26,.26); --rule:rgba(14,10,26,.14); --rule-2:rgba(14,10,26,.07); --wash:rgba(20,137,255,.1); --violet:#0A8FD6; --violet-lt:#14C4FF; --magenta:#D6009E; --cyan:#0A6FD6; --ink-violet:#0A6FA8; --emerald:#0F9E60; --gold:#C96A0E; --paper-1:#F6F3FA; --paper-2:#EFEAF5; --paper-3:#E7E0EF; --myc:url("custom/myc-light.svg"); --myc-a:.16; --shaft:248,245,252; --shaft-a:.95; --sky:.3; --floor:.44; } /* The ground goes on only. Giving an opaque background paints it over the cavern, which sits at z-index -3. This is the third time that trap has bitten on this build: on this site, page backgrounds live on . */ html{background:var(--void-0)} body{background:transparent;color:var(--ink)} /* --------------------------------------------------------------------------- 2. THE PAINTINGS ARE THE GROUND AGAIN, ON EVERY SIZE The v5 build took the photograph off desktop because it read as wallpaper behind panels. There are no panels now, so it can come back: what made it wallpaper was the furniture on top of it, not the picture itself. ------------------------------------------------------------------------- */ @media(min-width:861px){ .cavern{display:block!important} html{background:var(--void-0)!important} body::after{opacity:.09} /* the mat stays, as grain over the art */ body::before{display:none} .hero .hbg{background-image:none!important} /* the cavern behind it is the picture */ .band,.phead{background:none!important} .band::before,.phead::before{background:linear-gradient(180deg, rgba(4,2,10,.62),rgba(4,2,10,.22) 42%,rgba(4,2,10,.68))!important} .band::after,.phead::after,.hero::before{display:none!important} } .cavern .lyr{filter:none} .cavern::after{background: linear-gradient(180deg,rgba(4,2,10,var(--sky)) 0,rgba(4,2,10,0) 24%, rgba(4,2,10,0) 72%,rgba(4,2,10,var(--floor)) 100%)} /* The lit chamber does NOT wash the paintings out. A picture block is a picture: light type over dark art, in both themes. Only the stretches you READ go light, and they do that with their own floor, so the art still lives at the edges instead of being bleached to fog. */ :root[data-theme="light"] .cavern::after{background: linear-gradient(180deg,rgba(6,3,16,.34) 0,rgba(6,3,16,.1) 26%, rgba(6,3,16,.1) 74%,rgba(6,3,16,.38) 100%)} /* --------------------------------------------------------------------------- 3. NEON LINE, NOT HAIRLINE In the art nothing has a grey border. Every edge is a lit contour. ------------------------------------------------------------------------- */ .cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary,.coll,.notice,.plan{ background:var(--surface); border:1px solid var(--line); box-shadow:inset 0 0 0 0 transparent; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} @media(max-width:860px){ .cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary{ -webkit-backdrop-filter:none;backdrop-filter:none; background:rgba(11,6,24,.72)} :root[data-theme="light"] .cell,:root[data-theme="light"] .pcard, :root[data-theme="light"] .tier,:root[data-theme="light"] .mspot, :root[data-theme="light"] .formcard,:root[data-theme="light"] .summary{ background:rgba(255,255,255,.9)} } .cell:hover,.pcard:hover,.tier:hover,.mspot:hover,.vchip:hover{ border-color:rgb(var(--glow-v)); background:color-mix(in srgb,var(--surface) 70%,rgba(var(--glow-v),.08)); box-shadow:0 0 0 1px rgba(var(--glow-v),.5), 0 0 26px -6px rgba(var(--glow-v),.7), 0 18px 44px -22px rgba(var(--glow-m),.6)} .cell::before,.pcard::before,.tier::before,.mspot::before, .cell::after,.pcard::after,.tier::after,.mspot::after{ border-color:rgba(var(--glow-v),.75)} .cell:hover::before,.pcard:hover::before,.tier:hover::before,.mspot:hover::before, .cell:hover::after,.pcard:hover::after,.tier:hover::after,.mspot:hover::after{ border-color:rgb(var(--glow-m)); filter:drop-shadow(0 0 5px rgba(var(--glow-m),.9))} /* every rule on the page is a lit filament */ .divh,.fg,.stabs,.spec-list,.pdesc,.summary .tot,.fdisc,.cartrow,.frail{ border-color:var(--rule)} .seam::before{background:linear-gradient(90deg,transparent, rgba(var(--glow-v),.55) 20%,rgba(var(--glow-m),.55) 80%,transparent); height:1px;box-shadow:0 0 8px rgba(var(--glow-v),.4)} /* --------------------------------------------------------------------------- 4. THE ROSETTE — the runes in the sky of the art, struck behind each chamber ------------------------------------------------------------------------- */ .blk .shead{position:relative} .blk .shead::after{content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:clamp(230px,26vw,340px);aspect-ratio:1;z-index:-1;pointer-events:none; background:var(--rune) center/contain no-repeat; opacity:.2; animation:runeturn 210s linear infinite} @keyframes runeturn{to{transform:translate(-50%,-50%) rotate(360deg)}} @media (prefers-reduced-motion:reduce){.blk .shead::after{animation:none}} @media(max-width:860px){.blk .shead::after{width:210px;opacity:.14}} /* --------------------------------------------------------------------------- 5. TYPE IN THE DARK ------------------------------------------------------------------------- */ .blk .shead h2,.phead h1,.band h2{color:var(--ink); text-shadow:0 0 34px rgba(var(--glow-v),.35)} .hero h1{text-shadow:0 2px 30px rgba(0,0,0,.85),0 0 90px rgba(var(--glow-v),.55)} .hero h1 .grad{background:linear-gradient(100deg,var(--uv-ice),var(--uv-mag) 55%,var(--uv-cyan)); -webkit-background-clip:text;background-clip:text;color:transparent} .eyebrow{color:var(--uv-ice)} .eyebrow::before{background:rgb(var(--glow-m));box-shadow:0 0 8px rgba(var(--glow-m),.9)} .blk .shead p,.hero .sub{color:var(--ink-2)} :root[data-theme="light"] .blk .shead h2{text-shadow:none} :root[data-theme="light"] .eyebrow{color:var(--ink-2)} /* --------------------------------------------------------------------------- 6. CHROME ------------------------------------------------------------------------- */ .abar{background:rgba(4,2,10,.92);color:var(--uv-ice); border-bottom:1px solid rgba(var(--glow-v),.2)} .quicknav{background:rgba(7,4,15,.78);border-bottom:1px solid var(--rule); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} header.top{background:rgba(7,4,15,.8);border-bottom:1px solid var(--rule); -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)} body.hd-stuck header.top{background:rgba(7,4,15,.93); box-shadow:0 1px 0 rgba(var(--glow-v),.28),0 20px 44px -34px rgba(0,0,0,.9)} footer{background:rgba(7,4,15,.86);border-top:1px solid var(--rule); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} :root[data-theme="light"] .abar{background:rgba(10,6,20,.94)} :root[data-theme="light"] .quicknav, :root[data-theme="light"] header.top{background:rgba(248,245,252,.86)} :root[data-theme="light"] body.hd-stuck header.top{background:rgba(248,245,252,.96)} :root[data-theme="light"] footer{background:rgba(248,245,252,.9)} @media(max-width:860px){ header.top,.quicknav,footer{-webkit-backdrop-filter:none;backdrop-filter:none; background:rgba(7,4,15,.95)} :root[data-theme="light"] header.top,:root[data-theme="light"] .quicknav, :root[data-theme="light"] footer{background:rgba(248,245,252,.97)} } .brand{color:var(--ink)} .navlinks a{color:var(--ink-2)} .navlinks a:hover{color:var(--uv-ice);background:rgba(var(--glow-v),.1)} .navlinks a.active,.qp.on{background:var(--grad2);color:#04020A;font-weight:700; box-shadow:0 0 20px -4px rgba(var(--glow-v),.8)} .top .icons .cart{background:var(--grad2);color:#04020A;font-weight:700; box-shadow:0 0 22px -6px rgba(var(--glow-m),.9)} .top .search input,.mobnav .msearch input,.input,.textarea,.sel,.sortsel select, .dsearch input,.qv-field select{ background:rgba(20,196,255,.06);border:1px solid var(--line);color:var(--ink)} :root[data-theme="light"] .top .search input, :root[data-theme="light"] .input,:root[data-theme="light"] .textarea, :root[data-theme="light"] .sel,:root[data-theme="light"] .dsearch input{ background:rgba(255,255,255,.85)} .top .search .kbd{background:rgba(20,196,255,.1);border-color:var(--line);color:var(--ink-2)} .bigsearch input{background:rgba(6,3,14,.72);border:1px solid rgba(var(--glow-v),.45); color:var(--ink); box-shadow:0 0 34px -10px rgba(var(--glow-v),.75),inset 0 0 24px -12px rgba(var(--glow-v),.6)} .bigsearch input::placeholder{color:var(--ink-mut)} .bigsearch input:focus{border-color:rgb(var(--glow-v)); box-shadow:0 0 44px -8px rgba(var(--glow-v),.95)} .bigsearch .go{background:var(--grad2);color:#04020A;font-weight:800} .tchip{background:rgba(20,196,255,.08);border-color:var(--line);color:var(--uv-ice)} .tchip:hover{border-color:rgb(var(--glow-v));background:rgba(20,196,255,.16)} .hstats .s b{color:var(--ink);text-shadow:0 0 26px rgba(var(--glow-v),.6)} .hstats .s span{color:var(--ink-2)} .hstats::before,.hstats::after{background:linear-gradient(90deg,transparent, rgba(var(--glow-v),.6),transparent)} .hstats .s{border-right-color:var(--rule)} .drop>.wrap{background:rgba(8,4,18,.8);border:1px solid rgba(var(--glow-m),.45); box-shadow:0 0 34px -12px rgba(var(--glow-m),.8)} .drop .tag{color:var(--uv-ice)} /* buttons carry the measured gradient and a real glow */ .btn,.solid,.msgo,.qv-add,.pact.add,.pact.opts{ background:var(--grad2);color:#04020A;font-weight:800; box-shadow:0 0 26px -8px rgba(var(--glow-m),.85)} .btn:hover,.solid:hover,.qv-add:hover{box-shadow:0 0 38px -6px rgba(var(--glow-m),1)} .btn2{background:transparent;border:1px solid var(--line-strong);color:var(--ink)} .btn2:hover{border-color:rgb(var(--glow-v));color:var(--uv-ice)} /* overlays */ .wf{background:rgba(9,5,20,.96);border-color:rgba(var(--glow-v),.4); box-shadow:0 0 0 1px rgba(var(--glow-v),.28),0 0 90px -20px rgba(var(--glow-v),.7), 0 40px 100px -40px #000} .wf-it.sel{background:rgba(var(--glow-v),.14);border-left-color:rgb(var(--glow-m))} .qv{background:rgba(9,5,20,.98);border-color:rgba(var(--glow-v),.35)} .descent{background:rgba(9,5,20,.86);border-color:var(--line)} :root[data-theme="light"] .wf{background:rgba(250,248,253,.98)} :root[data-theme="light"] .qv{background:rgba(250,248,253,.99)} :root[data-theme="light"] .descent{background:rgba(250,248,253,.9)} .dmark::before{background:var(--line-strong)} .dmark.on::before{background:rgb(var(--glow-m))} .descent .vein i{background:linear-gradient(180deg,var(--uv-cyan),var(--uv-mag))} /* the vendor cards are the art; frame them in light */ .vc{border:1px solid rgba(var(--glow-v),.28); box-shadow:0 20px 44px -26px #000} .vc:hover{border-color:rgb(var(--glow-m)); box-shadow:0 0 30px -6px rgba(var(--glow-m),.8),0 26px 60px -28px #000} .vc .vcbadge{background:rgba(6,3,14,.72);border-color:rgba(var(--glow-v),.5); color:var(--uv-ice)} .vc .vcname{color:#fff} /* the seal and the spore take the measured hues */ .p100,.pcard .p100{color:var(--uv-green)!important} .dot.g{background-color:var(--uv-green)} .plan li::before,.mspot .mspts span::before{background:var(--uv-green)} .band .feat::before{background:var(--uv-green)} /* --------------------------------------------------------------------------- 7. FOCUS AND SELECTION, in the house colours ------------------------------------------------------------------------- */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:1.5px solid rgb(var(--glow-v));outline-offset:3px; box-shadow:0 0 0 5px rgba(var(--glow-v),.22),0 0 20px -4px rgba(var(--glow-v),.8)} ::selection{background:rgba(var(--glow-v),.32);color:#fff} ::-webkit-scrollbar-thumb{background:rgba(var(--glow-v),.45);background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgb(var(--glow-v));background-clip:content-box} /* --------------------------------------------------------------------------- 8. THE HERO READS The rune sky is busy, which is the point of it, so the words get their own pool of dark rather than the painting being dimmed to suit them. ------------------------------------------------------------------------- */ .heroin::before{ width:min(1000px,96%);height:min(620px,92%); background:radial-gradient(58% 52% at 50% 46%, rgba(4,2,10,.86) 0,rgba(4,2,10,.66) 42%,rgba(4,2,10,.30) 68%,transparent 84%)!important; filter:blur(18px)} .hero h1{text-shadow:0 2px 22px rgba(0,0,0,.95),0 0 70px rgba(0,0,0,.8), 0 0 110px rgba(var(--glow-v),.5)} .hero .sub{color:#DCEBFA;text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.7)} .hero .herocap,.hero .orn .txt{color:#BFE4FF;text-shadow:0 1px 12px rgba(0,0,0,.95)} .hero .orn .line,.hero .orn .line.r{background:linear-gradient(90deg,transparent,rgba(20,196,255,.55))} .hero .orn .line.r{background:linear-gradient(90deg,rgba(20,196,255,.55),transparent)} .hero .hstats{background:rgba(5,3,12,.62);border:1px solid rgba(var(--glow-v),.28); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} @media(max-width:860px){ .hero .hstats{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,3,12,.8)} } .hero .tchip{background:rgba(5,3,12,.6);border-color:rgba(var(--glow-v),.35);color:#DCEBFA} .trending .l{color:#9FC8E6} /* --------------------------------------------------------------------------- 9. READABLE OVER A BUSY PAINTING In the art nothing is a transparent pane: forms are DARK with a lit contour. So the cards are dark bodies with a neon rim, which is both more faithful to the source and the only way text survives over a rune sky. And the passage floor darkens down its centre so running copy always has ground under it. ------------------------------------------------------------------------- */ :root,:root[data-theme="dark"]{ --surface:rgba(8,4,18,.74); --well:rgba(8,4,18,.6); } :root[data-theme="light"]{--surface:rgba(255,255,255,.92);--well:rgba(14,10,26,.05)} .cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary,.coll,.notice,.plan{ background:var(--surface); -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)} @media(max-width:860px){ .cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary{ background:rgba(8,4,18,.9); -webkit-backdrop-filter:none;backdrop-filter:none} :root[data-theme="light"] .cell,:root[data-theme="light"] .pcard, :root[data-theme="light"] .tier,:root[data-theme="light"] .mspot, :root[data-theme="light"] .formcard,:root[data-theme="light"] .summary{ background:rgba(255,255,255,.96)} } .pcard .im{background:rgba(4,2,10,.5)} .cell .nm,.pcard .pn,.tier .tn{color:var(--ink)} .cell .ct,.pcard .pc{color:var(--ink-2)} .cell .ix,.pcard .fl,.pcard .srctag{background:rgba(4,2,10,.8);border-color:var(--line); color:var(--uv-ice)} /* the floor of the passage: dark down the middle, art at the edges */ section.blk.shafted,div.pagewrap.shafted,div.wrap.shafted,footer.shafted{ background:linear-gradient(90deg, rgba(5,3,12,0) 0, rgba(5,3,12,0) max(0px,calc(50% - var(--col)/2 - 300px)), rgba(5,3,12,.44) calc(50% - var(--col)/2 + 30px), rgba(5,3,12,.5) 50%, rgba(5,3,12,.44) calc(50% + var(--col)/2 - 30px), rgba(5,3,12,0) min(100%,calc(50% + var(--col)/2 + 300px)), rgba(5,3,12,0) 100%)} :root[data-theme="light"] section.blk.shafted, :root[data-theme="light"] div.pagewrap.shafted, :root[data-theme="light"] div.wrap.shafted, :root[data-theme="light"] footer.shafted{ background:linear-gradient(90deg, rgba(246,243,250,0) 0, rgba(246,243,250,.94) calc(50% - var(--col)/2 + 30px), rgba(246,243,250,.96) 50%, rgba(246,243,250,.94) calc(50% + var(--col)/2 - 30px), rgba(246,243,250,0) 100%)} @media(min-width:861px){:root{--col:1180px}} @media(max-width:860px){ section.blk.shafted,div.pagewrap.shafted,div.wrap.shafted,footer.shafted{ background:rgba(5,3,12,.58)} :root[data-theme="light"] section.blk.shafted, :root[data-theme="light"] div.wrap.shafted, :root[data-theme="light"] footer.shafted{background:rgba(246,243,250,.95)} } /* the rune sits above the floor, so it still reads */ .blk .shead::after{z-index:0;opacity:.16} .blk .shead>*{position:relative;z-index:1} /* the hero, the band and the page heads are pictures in both themes */ :root[data-theme="light"] .hero h1, :root[data-theme="light"] .phead h1, :root[data-theme="light"] .band h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.9)} :root[data-theme="light"] .hero .sub, :root[data-theme="light"] .phead p{color:#DCEBFA} :root[data-theme="light"] .hero .herocap, :root[data-theme="light"] .hero .orn .txt, :root[data-theme="light"] .phead .eyebrow, :root[data-theme="light"] .band .eyebrow{color:#BFE4FF} :root[data-theme="light"] .band p, :root[data-theme="light"] .band .feat{color:#D6E6F5} :root[data-theme="light"] .hstats .s b{color:#fff} :root[data-theme="light"] .hstats .s span{color:#BFE4FF}