/* =========================================================================== STASH EDGE · page-on-page + glam layer (pops4-stash-glam.css) 2026-09-01 --------------------------------------------------------------------------- ADDITIVE ONLY. Stash Edge already has its own editorial chrome, its own type (Jost 900 / 500 / 450, navy) and its own card motion. None of that is touched here. This layer does exactly two things: 1. seats the desk on the gold semiconductor FIELD and pulls the full-width bars in to 1280 so it reads as a page on a page, the way House Edge does 2. gives the cards the glam: circuit texture, gloss, glitter, a smooth 3D lift and a sheen sweep Measured before writing (live, 2026-09-01): body #faf8f5, its own SVG tile chrome bars 1425px full-bleed (House Edge caps at 1280) .card transparent, r10, 1px hairline, NO shadow, transition already on transform/box-shadow/filter Because the cards already carry a transition, the lift below inherits it smoothly instead of fighting it. TYPE IS DELIBERATELY ABSENT from this file - the desk is already on the article standard and re-declaring it would only risk drift. =========================================================================== */ :root{ --se-field:#ece4d6; --se-bone:#faf8f5; --se-gold:#c9a96e; --se-gold-dk:#b8944f; --se-hair:rgba(15,13,10,.10); --se-ease:cubic-bezier(.22,.61,.36,1); --se-chip:url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1' stroke-opacity='0.30'%3E%3Cpath d='M0 20H30V0M30 42H58V20H84M20 84V54H52V32M62 84V62H84M42 42V64M0 62H22'/%3E%3C/g%3E%3Cg fill='%23c9a96e' fill-opacity='0.38'%3E%3Ccircle cx='30' cy='20' r='2'/%3E%3Ccircle cx='58' cy='20' r='2'/%3E%3Ccircle cx='52' cy='32' r='2'/%3E%3Ccircle cx='42' cy='64' r='2'/%3E%3Ccircle cx='62' cy='62' r='2'/%3E%3Ccircle cx='22' cy='62' r='2'/%3E%3C/g%3E%3C/svg%3E"); } /* --- 1 · the field ------------------------------------------------------- */ html:root{ background-color:var(--se-field) !important; background-image:var(--se-chip) !important; background-repeat:repeat !important; background-attachment:fixed !important} html body{ background-color:transparent !important; background-image:none !important} /* --- 2 · page on a page: pull the full-bleed bars in to 1280 ------------- Width only. Each bar keeps its own colour, so the dark bars stay dark and the light bars stay light - no contrast pair is disturbed. */ html body .ecobar, html body .vb-strip, html body .deskbar, html body .pourbar, html body .slowtick, html body .masthead, html body .toolbar, html body .filterbar, html body .p4sb-wrap, html body .desk-tiles, html body main, html body .footer, html body footer{ max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; border-left:1px solid var(--se-hair); border-right:1px solid var(--se-hair); box-sizing:border-box} /* the stack reads as one card: round the ends, float it off the field */ html body .ecobar{ border-radius:10px 10px 0 0; border-top:1px solid var(--se-hair); margin-top:18px !important; box-shadow:0 -1px 0 rgba(255,255,255,.35),0 18px 46px -30px rgba(15,13,10,.55)} html body footer, html body .footer{ border-radius:0 0 10px 10px; border-bottom:1px solid var(--se-hair); margin-bottom:46px !important; box-shadow:0 30px 60px -34px rgba(15,13,10,.5)} /* main is the reading column - keep its own width inside the card */ html body main{ background:var(--se-bone) !important; max-width:1280px !important; padding-left:clamp(16px,3vw,40px) !important; padding-right:clamp(16px,3vw,40px) !important} /* --- 3 · the glam on the cards ------------------------------------------ `.card` is transparent with a hairline and no shadow. Give it the circuit texture, a gloss falloff, gold glitter and a real 3D rest state. The desk already transitions transform/box-shadow/filter, so the lift is smooth. */ /* NOTE ON SPECIFICITY: the desk's own chrome layer carries the desk flattens its cards on purpose with TWO rules: html body .stream .card (0,2,2) box-shadow:none !important html body .stream .card.pinned-card (0,3,2) box-shadow:none, r10 !important A tie is broken by source order and that block is emitted AFTER this link, so (0,2,2) and (0,3,2) both beat a tie. Four classes puts these at (0,4,2), which wins outright regardless of order. Verified with a live specificity scan, not guessed - the background layer had already won at (0,3,2) because nothing competes for it, which is why only shadow and radius were missing. */ html body .card.card.card.card{ background-color:#fff !important; background-image: var(--se-chip), radial-gradient(circle at 13% 17%, rgba(201,169,110,.85) 0 1.8px, transparent 2.6px), radial-gradient(circle at 31% 68%, rgba(201,169,110,.62) 0 1.5px, transparent 2.3px), radial-gradient(circle at 52% 24%, rgba(201,169,110,.75) 0 1.6px, transparent 2.4px), radial-gradient(circle at 71% 61%, rgba(201,169,110,.58) 0 1.5px, transparent 2.2px), radial-gradient(circle at 86% 29%, rgba(201,169,110,.80) 0 1.8px, transparent 2.6px), radial-gradient(circle at 94% 78%, rgba(201,169,110,.60) 0 1.5px, transparent 2.3px), linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 20%, rgba(255,255,255,0) 54%), linear-gradient(135deg,#ffffff 0%,#fdfcf9 55%,#f7f3ec 100%) !important; background-size:84px 84px,auto,auto,auto,auto,auto,auto,auto,auto !important; background-repeat:repeat !important; border:1px solid var(--se-hair) !important; border-radius:12px !important; position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,13,10,.045), 0 10px 26px -16px rgba(15,13,10,.30) !important} html body .card.card.card.card:hover{ transform:translateY(-7px); border-color:rgba(201,169,110,.45) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(15,13,10,.05), 0 30px 52px -24px rgba(15,13,10,.38), 0 0 0 1px rgba(201,169,110,.16) !important} /* the shine: a diagonal highlight sweeping across on hover */ html body .card.card.card.card::after{ content:"";position:absolute;top:0;left:0;width:100%;height:100%; pointer-events:none;z-index:3;border-radius:inherit; background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.62) 48%, rgba(255,255,255,.20) 55%, transparent 66%); transform:translateX(-120%); transition:transform .9s var(--se-ease); opacity:0} html body .card.card.card.card:hover::after{transform:translateX(120%);opacity:1} html body .card.card.card.card > *{position:relative;z-index:2} /* --- 4 · the smaller furniture gets the same physics, gently ------------- */ html body .desk-tiles a, html body .filter-pill, html body .tag-chip{ transition:transform .26s var(--se-ease),box-shadow .26s var(--se-ease), border-color .26s var(--se-ease)} html body .desk-tiles a:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(15,13,10,.5), inset 0 0 0 1px rgba(201,169,110,.45)} html body .filter-pill:hover, html body .tag-chip:hover{ transform:translateY(-1px); border-color:rgba(201,169,110,.55)} @media (prefers-reduced-motion:reduce){ html body .card.card.card.card, html body .card.card.card.card::after, html body .desk-tiles a, html body .filter-pill, html body .tag-chip{transition:none !important} html body .card.card.card.card:hover, html body .desk-tiles a:hover, html body .filter-pill:hover, html body .tag-chip:hover{transform:none !important} } @media (max-width:1320px){ html body .ecobar,html body .vb-strip,html body .deskbar,html body .pourbar, html body .slowtick,html body .masthead,html body .toolbar,html body .filterbar, html body .p4sb-wrap,html body .desk-tiles,html body main, html body .footer,html body footer{ margin-left:12px !important;margin-right:12px !important} } @media (max-width:640px){ html body .ecobar{border-radius:0;margin-top:0 !important} html body footer,html body .footer{border-radius:0;margin-bottom:0 !important} html body .ecobar,html body .vb-strip,html body .deskbar,html body .pourbar, html body .slowtick,html body .masthead,html body .toolbar,html body .filterbar, html body .p4sb-wrap,html body .desk-tiles,html body main, html body .footer,html body footer{ margin-left:0 !important;margin-right:0 !important; border-left:0;border-right:0} }