/* ============================================================================ CULTURE CAVE — THE HOUSE KIT v5.0 Loaded last. Everything in here is drawn for Culture Cave and exists nowhere else: the ground it stands on, its marks, its seals, its controls. The change of principle: on a phone the cave photograph is the ground and it works, because the screen is narrow and the image reads as a place. On a desktop the same photograph reads as wallpaper behind furniture. So desktop gets a ground of our own instead — a mycelial mat grown filament by filament — and the cave paintings become deliberate imagery inside the hero, the vendor band and the page heads, where they are pictures rather than backdrop. ========================================================================== */ /* --------------------------------------------------------------------------- 1. THE GROUND Mineral paper, warm, never flat: a slow vertical shift plus the mycelium mat. ------------------------------------------------------------------------- */ :root{ --paper-1:#F6F2F8; --paper-2:#EFE9F4; --paper-3:#E7DFEE; --myc:url("custom/myc-light.svg"); --myc-a:.2; --myc-size:440px; } :root[data-theme="dark"]{ --paper-1:#0C0718; --paper-2:#120B22; --paper-3:#170E2C; --myc:url("custom/myc-dark.svg"); --myc-a:.2; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper-1:#0C0718; --paper-2:#120B22; --paper-3:#170E2C; --myc:url("custom/myc-dark.svg"); --myc-a:.16; } } @media(min-width:861px){ /* the photographic cavern comes off the desktop entirely */ .cavern{display:none!important} /* The ground lives on . On it would paint over the mat and the bedding, both of which sit at a negative z-index behind the content. */ html{background: linear-gradient(180deg,var(--paper-1) 0,var(--paper-2) 46%,var(--paper-3) 100%) fixed} body{background:transparent} /* the mat: one grown tile, fixed so the page moves across it */ body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background-image:var(--myc); background-size:var(--myc-size) var(--myc-size); background-repeat:repeat; opacity:var(--myc-a); display:block} /* strata: the faintest bedding in the mineral, drawn not photographed */ body::before{content:"";display:block;position:fixed;inset:0;z-index:-1;pointer-events:none; background:repeating-linear-gradient(179.3deg, transparent 0 62px, color-mix(in srgb,var(--ink) 3.5%,transparent) 62px 63px, transparent 63px 118px, color-mix(in srgb,var(--ink) 2%,transparent) 118px 119px, transparent 119px 196px); opacity:.75} /* the shaft is no longer needed: the ground already reads */ section.blk.shafted,div.pagewrap.shafted,div.wrap.shafted,footer.shafted{background:none} .seam::before{background:linear-gradient(90deg,transparent,var(--rule) 16%,var(--rule) 84%,transparent)} /* A hung picture is not a panel butted against the page: its edges dissolve into the paper, top and bottom, so the mat appears to continue behind it. */ .band::after,.phead::after,.hero::before{ content:"";display:block;position:absolute;left:0;right:0;bottom:0; height:clamp(80px,9vw,150px);z-index:3;pointer-events:none; background:linear-gradient(0deg,var(--paper-2) 0,rgba(0,0,0,0) 100%)} .band::after{background:linear-gradient(0deg,var(--paper-3) 0,rgba(0,0,0,0) 100%)} .phead::after{background:linear-gradient(0deg,var(--paper-1) 0,rgba(0,0,0,0) 100%)} .hero::before{z-index:6} /* the paintings return as pictures, in the three places that want one */ .hero .hbg{background-image:var(--plate-hero)!important; background-size:cover;background-position:center} .band{background:var(--plate-band) center/cover no-repeat} .phead{background:var(--plate-head) center/cover no-repeat} .band::before{content:"";display:block;position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,4,22,.72),rgba(8,4,22,.42) 40%,rgba(8,4,22,.78))} .phead::before{content:"";display:block;position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,3,18,.68),rgba(6,3,18,.36) 46%,rgba(6,3,18,.7))} .band>.wrap,.phead>.wrap{position:relative;z-index:2} } :root{--plate-hero:url("plates/vista-lg.webp"); --plate-band:url("plates/pool-lg.webp"); --plate-head:url("plates/crystal-lg.webp")} /* the cards read as cut into the mat, so they carry a little more body */ @media(min-width:861px){ .cell,.pcard,.tier,.mspot,.vchip,.formcard,.summary,.coll,.notice{ background:rgba(255,255,255,.78)} :root[data-theme="dark"] .cell,:root[data-theme="dark"] .pcard, :root[data-theme="dark"] .tier,:root[data-theme="dark"] .mspot, :root[data-theme="dark"] .formcard,:root[data-theme="dark"] .summary{ background:rgba(255,255,255,.055)} } /* --------------------------------------------------------------------------- 2. THE SPORE — the house mark. A body with five hyphae leaving it. It is the bullet, the pip, the divider and the tick, so one drawn thing runs through the entire interface instead of a borrowed dingbat. ------------------------------------------------------------------------- */ :root{ --spore:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 4.2v3.1M19 8.4l-2.6 1.6M17.2 17.6l-2.4-2M6.8 17.6l2.4-2M5 8.4l2.6 1.6'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23000'/%3E%3C/svg%3E"); } .spore{display:inline-block;width:1em;height:1em;vertical-align:-.14em; background:currentColor;-webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat} /* the seam pip becomes the mark */ .seam::after{background:transparent;box-shadow:none; width:15px;height:15px;top:-7px; background-color:rgb(var(--glow-m)); -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat; filter:drop-shadow(0 0 6px rgba(var(--glow-m),.8))} /* the eyebrow rule ends in a spore rather than stopping dead */ .eyebrow::before{width:26px} .eyebrow::after{content:"";width:.72em;height:.72em;flex:none; background:rgb(var(--glow-m)); -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat; opacity:.85} /* list bullets, everywhere */ .rt .rt-list li::before{background:currentColor;color:rgb(var(--glow-v)); width:11px;height:11px;transform:none;border-radius:0;left:2px;top:.42em; -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat} .dia{font-size:0!important;width:13px;height:13px;display:inline-block;flex:none; background:currentColor; -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat} .orn .dia,.drop .tag .dia{color:rgb(var(--glow-m))} .abar .dia{width:10px;height:10px;color:rgb(var(--glow-m));vertical-align:-1px} .cell .ct::before{background:rgb(var(--glow-v));width:9px;height:9px;border-radius:0; -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat;opacity:.9} /* --------------------------------------------------------------------------- 3. CORNER TICKS — every card is set into the page rather than dropped on it. Two drawn brackets, opposite corners, in the light of the chamber. ------------------------------------------------------------------------- */ .cell,.pcard,.tier,.mspot,.formcard,.summary,.plan,.vchip{position:relative} .cell::before,.pcard::before,.tier::before,.mspot::before, .cell::after,.pcard::after,.tier::after,.mspot::after{ content:"";position:absolute;width:13px;height:13px;pointer-events:none;z-index:3; border:0 solid rgba(var(--glow-v),.5); transition:border-color .22s ease,width .22s var(--e-out),height .22s var(--e-out)} .cell::before,.pcard::before,.tier::before,.mspot::before{ top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px; border-top-left-radius:12px} .cell::after,.pcard::after,.tier::after,.mspot::after{ bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px; border-bottom-right-radius:12px;display:block;opacity:1;background:none; left:auto;top:auto;transform:none;filter:none} .cell:hover::before,.pcard:hover::before,.tier:hover::before,.mspot:hover::before, .cell:hover::after,.pcard:hover::after,.tier:hover::after,.mspot:hover::after{ width:22px;height:22px;border-color:rgb(var(--glow-m))} /* --------------------------------------------------------------------------- 4. NOTCHED MARKS — the badges are cut, not rounded. A pill is a default; a notch is a decision. ------------------------------------------------------------------------- */ .vc .vcbadge,.mspot .msflag,.vpill,.pcard .fl,.pcard .srctag,.tier.feat::before{ border-radius:0; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} .vc .vcbadge{padding:5px 13px;letter-spacing:.14em} .pcard .fl,.pcard .srctag{padding:3px 8px} /* the stock dot is a spore */ .dot.g{background:transparent;width:10px;height:10px;box-shadow:none; background-color:var(--emerald); -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat} /* --------------------------------------------------------------------------- 5. THE SEAL — an engraved roundel for the promises the marketplace makes. Drawn once as a mask so it takes the colour of whatever it is stamped on. ------------------------------------------------------------------------- */ :root{ --seal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='20' cy='20' r='17.4'/%3E%3Ccircle cx='20' cy='20' r='14.2' stroke-dasharray='1.6 2.6'/%3E%3C/g%3E%3Cpath d='M13.4 20.4l4.6 4.4 8.6-9.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .p100,.pcard .p100{display:inline-flex!important;align-items:center;gap:7px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;font-weight:600; color:var(--emerald)!important;text-transform:uppercase} .p100::before{content:"";width:15px;height:15px;flex:none;background:currentColor; -webkit-mask:var(--seal) center/contain no-repeat; mask:var(--seal) center/contain no-repeat} .plan li svg,.band .feat svg,.mspot .mspts svg{display:none} .plan li,.band .feat,.mspot .mspts span{position:relative;padding-left:26px} .plan li::before,.band .feat::before,.mspot .mspts span::before{ content:"";position:absolute;left:0;top:.12em;width:16px;height:16px; background:var(--emerald); -webkit-mask:var(--seal) center/contain no-repeat; mask:var(--seal) center/contain no-repeat} .band .feat::before{background:#5BE0B0} /* --------------------------------------------------------------------------- 6. CONTROLS — drawn, not borrowed ------------------------------------------------------------------------- */ /* the checkbox is a spore that grows into its cell */ .opt .bx{width:19px;height:19px;border-radius:4px;border:1.5px solid var(--line-strong); background:transparent;position:relative;overflow:visible;transition:.18s var(--e-out)} .opt .bx svg{display:none} .opt .bx::after{content:"";position:absolute;inset:0; background:rgb(var(--glow-v));opacity:0;transform:scale(.3) rotate(-45deg); -webkit-mask:var(--spore) center/contain no-repeat; mask:var(--spore) center/contain no-repeat; transition:opacity .18s ease,transform .3s var(--e-spring)} .opt:hover .bx{border-color:rgba(var(--glow-v),.7)} .opt.on .bx{border-color:rgb(var(--glow-v));background:rgba(var(--glow-v),.1)} .opt.on .bx::after{opacity:1;transform:none} .opt.rad .bx{border-radius:50%} /* the toggle is a lantern on a rail */ .sw{width:42px;height:22px;background:var(--well);border:1px solid var(--line-strong); border-radius:999px;transition:.22s var(--e-out)} .sw::after{width:16px;height:16px;top:2px;left:2px;background:var(--ink-mut); box-shadow:none;transition:.26s var(--e-spring),background .2s} .toggle.on .sw{background:rgba(var(--glow-v),.18);border-color:rgb(var(--glow-v))} .toggle.on .sw::after{left:22px;background:rgb(var(--glow-m)); box-shadow:0 0 10px rgba(var(--glow-m),.9),0 0 20px rgba(var(--glow-v),.6)} /* the select carries the house chevron */ .sel,.sortsel select,select.input,.qv-field select{ appearance:none;-webkit-appearance:none;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23776f92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px} /* --------------------------------------------------------------------------- 7. BUTTONS — a carved face with a seam of mineral that catches the light ------------------------------------------------------------------------- */ .btn,.solid,.msgo,.qv-add,.top .icons .cart,.pact.add,.pact.opts{ position:relative} .btn,.solid,.msgo,.qv-add,.bigsearch .go,.top .icons .cart,.pact.add,.pact.opts{ overflow:hidden; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)} /* the hero button is already absolutely placed inside its field: giving it position:relative drops it out of the input entirely */ .bigsearch .go{position:absolute} .btn::after,.solid::after,.msgo::after,.qv-add::after,.bigsearch .go::after, .top .icons .cart::after{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-18deg);transition:left .55s var(--e-out)} .btn:hover::after,.solid:hover::after,.msgo:hover::after,.qv-add:hover::after, .bigsearch .go:hover::after,.top .icons .cart:hover::after{left:130%} .btn:active,.solid:active,.qv-add:active{transform:translateY(1px)} /* the quiet button gets brackets instead of a box */ .btn2,.ghost.stamp{position:relative} .btn2::before,.btn2::after{content:"";position:absolute;width:8px;height:8px; border:1.5px solid rgb(var(--glow-v));opacity:0;transition:.2s var(--e-out)} .btn2::before{top:-3px;left:-3px;border-right:0;border-bottom:0} .btn2::after{bottom:-3px;right:-3px;border-left:0;border-top:0} .btn2:hover::before,.btn2:hover::after{opacity:1;width:12px;height:12px} /* --------------------------------------------------------------------------- 8. NUMERALS — the counts are the proof, so they are set like a plate ------------------------------------------------------------------------- */ .hstats{border-radius:0;overflow:visible;border:0;background:none!important; box-shadow:none!important;position:relative;gap:0} .hstats::before,.hstats::after{content:"";position:absolute;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)} .hstats::before{top:0} .hstats::after{bottom:0} .hstats .s{border-right:1px solid rgba(255,255,255,.16);padding:22px 14px} .hstats .s:last-child{border-right:0} .hstats .s b{font-family:var(--mono);font-weight:500;letter-spacing:-.02em; font-size:clamp(26px,3vw,36px)} .hstats .s span{font-size:10.5px;letter-spacing:.22em} /* --------------------------------------------------------------------------- 9. FOCUS, SELECTION, SCROLLBAR — the house even here ------------------------------------------------------------------------- */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:1.5px solid rgb(var(--glow-m));outline-offset:3px; box-shadow:0 0 0 5px rgba(var(--glow-v),.2)} ::selection{background:rgba(var(--glow-v),.26);color:var(--ink)} ::-webkit-scrollbar-thumb{background:rgba(var(--glow-v),.4);background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgb(var(--glow-v));background-clip:content-box} /* --------------------------------------------------------------------------- 10. MOBILE keeps the photographed cave and loses none of the marks ------------------------------------------------------------------------- */ @media(max-width:860px){ body::after,body::before{display:none} /* The cavern is mounted by script, so before it exists the phone would paint a bare colour where the cave should be. Give the same plate in CSS and the very first paint is already the right place. */ html{background:var(--void) url("plates/vista-sm.webp") center top/cover no-repeat} .cell::before,.pcard::before,.cell::after,.pcard::after{width:10px;height:10px} }