/* cardboard.css — Hustler's Mansion Cardboard Command Center. * * Two stocks, KRAFT and WHITE BOX, added beside the glass skins. Every tile * is a PIECE OF BOARD lying on a bigger sheet — it has thickness (the slab * shadows), a corrugated cut edge (the flute below it), grain (generated * feTurbulence, no image files), and it GIVES when pressed. Type is pressed * into the board: dark top edge, lit bottom lip. Numbers are marker ink ON * the surface, so they bleed instead of bevel. * * ENGINE NOTES honoured here: * - pieces need overflow:visible for the flute, which removes saka's * clipping net — so row height rises to 104px and gap to 14px; lowering * either is what loses text. * - the texture is an ATTENUATED OVERLAY (own layer, multiply, opacity * dial), never a blended background — blend modes have no opacity. * - the piece's own grain is offset 37px 11px / -23px 44px so it can never * line up with the sheet's grain; aligned grains read as one flat image. * - the flute's 7.6px wave period is the single detail separating * corrugated board from brown paper. Not negotiable. * - the money-flash ::after on .saka-gain is sacrificed to the flute on * these two stocks; the gain still recolours, it just does not sweep. */ :root[data-skin="kraft"] { --bg: #BA8F5F; --face-a: #C8A273; --face-b: #B78F60; --surface: #C2996A; --surface-2: #B98F60; --text: #33230F; --muted: #46311B; --faint: #5C4930; --brand: #7A2E22; --brand-weak: rgba(122,46,34,.14); --on-brand: #F2E4CE; --green: #2F5236; --green-weak: rgba(47,82,54,.16); /* 4.69 on the kraft face — #8A5C18 sat at 2.22, and this is the colour "owed / waiting / late" reads in. */ --amber: #4A300A; --amber-weak: rgba(138,92,24,.16); --red: #7A2E22; --red-weak: rgba(122,46,34,.16); --border: rgba(90,62,32,.34); --border-2: rgba(90,62,32,.48); --line-soft: rgba(90,62,32,.22); --r-lg: 5px; --r-md: 5px; --cb-edge: #8E6538; --cb-edge-dark: #6E4C28; --cb-lift: rgb(255,240,214); --cb-marker: #241708; --cb-flute: repeating-linear-gradient(90deg, #6E4C28 0 1.2px, #A87C4E 1.2px 3.2px, #C29A69 3.2px 4.6px, #A87C4E 4.6px 6.4px, #6E4C28 6.4px 7.6px); --cb-grain-o: .54; --cb-sheet-o: .468; --cb-thick: 4px; --cb-press-y: 3px; --cb-sheet: radial-gradient(120% 80% at 20% 0%, rgba(255,240,214,.26), transparent 60%), radial-gradient(100% 70% at 85% 100%, rgba(70,45,20,.16), transparent 62%), linear-gradient(174deg, #C89C6C, #BA8F5F 55%, #B4895A); --cb-face: linear-gradient(174deg, #C8A273, #BF9767 62%, #B78F60); --cb-act: linear-gradient(174deg, #C3B183, #B7A374); color-scheme: light; } :root[data-skin="whitebox"] { --bg: #D3CCBC; --face-a: #F4F0E8; --face-b: #E3DDD0; --surface: #EFEADF; --surface-2: #E6E0D3; --text: #26221B; --muted: #4A443A; --faint: #675F52; --brand: #A33A28; --brand-weak: rgba(163,58,40,.13); --on-brand: #FDFBF4; --green: #2F5236; --green-weak: rgba(47,82,54,.14); --amber: #8A5C18; --amber-weak: rgba(138,92,24,.14); --red: #A33A28; --red-weak: rgba(163,58,40,.14); --border: rgba(90,82,64,.32); --border-2: rgba(90,82,64,.46); --line-soft: rgba(90,82,64,.2); --r-lg: 5px; --r-md: 5px; --cb-edge: #BCB19C; --cb-edge-dark: #968A73; --cb-lift: rgb(255,255,250); --cb-marker: #16130E; --cb-flute: repeating-linear-gradient(90deg, #968A73 0 1.2px, #C9BCA2 1.2px 3.2px, #E6DBC5 3.2px 4.6px, #C9BCA2 4.6px 6.4px, #968A73 6.4px 7.6px); --cb-grain-o: .33; --cb-sheet-o: .286; --cb-thick: 5px; --cb-press-y: 4px; --cb-sheet: radial-gradient(120% 80% at 20% 0%, rgba(255,255,250,.26), transparent 60%), radial-gradient(100% 70% at 85% 100%, rgba(70,45,20,.16), transparent 62%), linear-gradient(174deg, #DED8CB, #D3CCBC 55%, #CCC4B2); --cb-face: linear-gradient(174deg, #F4F0E8, #EBE6DB 62%, #E3DDD0); --cb-act: linear-gradient(174deg, #E5E9D8, #D8DDC8); color-scheme: light; } /* ── the sheet ─────────────────────────────────────────────────────────── */ :root[data-skin="kraft"] body, :root[data-skin="whitebox"] body { background: var(--cb-sheet); overflow-x: clip; /* the sheet overlay below is absolute; without this it sizes against the VIEWPORT and the grain ends one screen down — everything after scrolls flat */ position: relative; } /* Attenuated overlay on its own layer. ABSOLUTE, not fixed — fixed paints one viewport and tears a seam at the first scroll. */ :root[data-skin="kraft"] body::before, :root[data-skin="whitebox"] body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: var(--cb-sheet-o); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.022%200.85%22%20numOctaves%3D%224%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%3E%3Cfilter%20id%3D%22m%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.011%22%20numOctaves%3D%223%22%20seed%3D%2211%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23m%29%22%20opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.4%22%20numOctaves%3D%221%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20value%3D%22%22%20values%3D%220%200%200%200%200.16%20%200%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%201%200%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E"); background-size: 220px 220px, 360px 360px, 260px 260px; } :root[data-skin="kraft"] #root, :root[data-skin="whitebox"] #root { position: relative; z-index: 1; } /* ── a piece of board ────────────────────────────────────────────────────── * * ONE list, three rules. This was three hand-written lists — face, grain and * flute — and they had drifted apart: the grain list was missing .tm-rc and * .pvl, and none of them had ever learned about .pcard, .hero, .tile or the * week strip's date cells. The result was a Money screen and a date row made * of flat lighter patches sitting on a board that had gradient, grain and a * cut edge — the wrong material, which reads as a rendering fault rather than * a style. Every other skin (mansion, glass, chalkboard) already dressed * .pcard and .hero; cardboard was the one left behind. * * :is() means a new surface is added in ONE place and gets all three layers. * If you add a card to this app, add it here. */ :root[data-skin="kraft"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card), :root[data-skin="whitebox"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card) { position: relative; isolation: isolate; border: 0; border-radius: 5px; overflow: visible; background: var(--cb-face); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 44%, transparent), inset 0 -1px 0 rgba(90,62,32,.30), 0 var(--cb-thick) 0 var(--cb-edge), 0 calc(var(--cb-thick) + 1.5px) 0 var(--cb-edge-dark), 0 calc(var(--cb-thick) + 5px) 7px rgba(50,32,14,.34), 0 calc(var(--cb-thick) + 14px) 22px rgba(50,32,14,.24); transition: box-shadow 200ms ease, transform 110ms ease; } /* The piece's own grain — offset so it never aligns with the sheet's. Same list as the face above; `.saka-gain` is excluded because the money flash owns that ::after (see the note at the top of this file). */ :root[data-skin="kraft"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card):not(.saka-gain)::after, :root[data-skin="whitebox"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card):not(.saka-gain)::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; opacity: var(--cb-grain-o); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.022%200.85%22%20numOctaves%3D%224%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.4%22%20numOctaves%3D%221%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20value%3D%22%22%20values%3D%220%200%200%200%200.16%20%200%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%201%200%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E"); background-size: 190px 190px, 150px 150px; background-position: 37px 11px, -23px 44px; } /* THE FLUTE — the corrugated cross-section on the cut edge below. Same list, minus the two tiles that bring their own card. Those are transparent by design (app.html strips their background), so a flute under them drew a corrugated strip with NO BOARD ABOVE IT — a cut edge belongs to a piece of board, and there isn't one. That stray line ran the full width under the week strip; the date cells inside it have their own edges and are the ones you are meant to see. */ :root[data-skin="kraft"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card)::before, :root[data-skin="whitebox"] :is(.pv, .saka-w, .set-card, .tlwrap, .pvl, .tm-rc, .pcard, .hero, .tile, .wkd, .wkgrid, .cl-card)::before { content: ''; position: absolute; left: 1px; right: 1px; bottom: calc(-1 * var(--cb-thick)); height: var(--cb-thick); border-radius: 0 0 4px 4px; z-index: -1; background: linear-gradient(180deg, rgba(60,40,18,.55) 0 1px, transparent 1px), linear-gradient(0deg, rgba(60,40,18,.6) 0 1px, transparent 1px), var(--cb-flute); transition: height 110ms ease, bottom 110ms ease; } /* hand-cut, hand-laid */ :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n+1), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n+1) { rotate: -0.44deg; } :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n+2), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n+2) { rotate: 0.32deg; } :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n+3), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n+3) { rotate: -0.19deg; } :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n+4), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n+4) { rotate: 0.5deg; } :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n+5), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n+5) { rotate: -0.36deg; } :root[data-skin="kraft"] .saka-grid .saka-w:nth-child(6n), :root[data-skin="whitebox"] .saka-grid .saka-w:nth-child(6n) { rotate: 0.24deg; } /* the board itself: taller rows, wider gap, or content spills */ :root[data-skin="kraft"] .saka-board, :root[data-skin="whitebox"] .saka-board { --saka-radius: 5px; --saka-row-h: 104px; --saka-surface: var(--surface); --saka-border: transparent; --saka-border-2: transparent; } :root[data-skin="kraft"] .saka-board .saka-grid, :root[data-skin="whitebox"] .saka-board .saka-grid { gap: 14px; } :root[data-skin="kraft"] .saka-w { padding: 12px 13px 13px; } :root[data-skin="whitebox"] .saka-w { padding: 12px 13px 13px; } :root[data-skin="kraft"] .saka-w.q, :root[data-skin="whitebox"] .saka-w.q { padding: 10px 11px 11px; } :root[data-skin="kraft"] .saka-w.act, :root[data-skin="whitebox"] .saka-w.act { background: var(--cb-act); } /* PRESS — the thickness collapses, the piece bulges a hair wider. */ :root[data-skin="kraft"] .pv:active, :root[data-skin="whitebox"] .pv:active, :root[data-skin="kraft"] .saka-w:active, :root[data-skin="whitebox"] .saka-w:active { transform: translateY(var(--cb-press-y)) scale(1.004, .988); box-shadow: inset 0 2px 7px rgba(60,40,18,.42), inset 0 -1px 0 color-mix(in srgb, var(--cb-lift) 18%, transparent), 0 1px 0 var(--cb-edge), 0 1.5px 0 var(--cb-edge-dark), 0 3px 4px rgba(50,32,14,.34); } :root[data-skin="kraft"] .saka-w:active::before, :root[data-skin="whitebox"] .saka-w:active::before, :root[data-skin="kraft"] .pv:active::before, :root[data-skin="whitebox"] .pv:active::before { height: 1px; bottom: -1px; } :root[data-skin="kraft"] .mini:active, :root[data-skin="whitebox"] .mini:active, :root[data-skin="kraft"] .btn:active, :root[data-skin="whitebox"] .btn:active { transform: translateY(2px) scale(1.004, .988); box-shadow: inset 0 2px 5px rgba(60,40,18,.4); } /* ── type pressed into the board ──────────────────────────────────────── */ :root[data-skin="kraft"] .saka-wt, :root[data-skin="whitebox"] .saka-wt { font-weight: 800; letter-spacing: .13em; color: var(--muted); text-shadow: 0 -1px 1px rgba(58,38,16,.5), 0 1px 0 color-mix(in srgb, var(--cb-lift) 85%, transparent); } :root[data-skin="kraft"] .saka-big, :root[data-skin="whitebox"] .saka-big { color: var(--cb-marker); font-weight: 800; letter-spacing: -.03em; text-shadow: 0 0 1.5px rgba(36,23,8,.34), 0 1px 0 color-mix(in srgb, var(--cb-lift) 22%, transparent); } :root[data-skin="kraft"] .saka-big.g, :root[data-skin="whitebox"] .saka-big.g { color: var(--green); } :root[data-skin="kraft"] .saka-big.amb, :root[data-skin="whitebox"] .saka-big.amb { color: var(--amber); } :root[data-skin="kraft"] .saka-big.gold, :root[data-skin="whitebox"] .saka-big.gold { color: var(--brand); } /* meters: ink drawn straight onto the board */ :root[data-skin="kraft"] .splitbar, :root[data-skin="whitebox"] .splitbar { background: rgba(90,62,32,.24); box-shadow: inset 0 1px 2px rgba(60,40,18,.4); } :root[data-skin="kraft"] .splitbar .a, :root[data-skin="whitebox"] .splitbar .a { background: var(--cb-marker); } /* the wordmark, stamped a fraction crooked */ :root[data-skin="kraft"] .tb-name, :root[data-skin="whitebox"] .tb-name { color: var(--brand); rotate: -0.9deg; } /* panels — quieter relatives, same as every other skin family */ :root[data-skin="kraft"] .tl, :root[data-skin="whitebox"] .tl, :root[data-skin="kraft"] .floor, :root[data-skin="whitebox"] .floor { background: color-mix(in srgb, var(--face-b) 55%, var(--bg)); border: 1px solid rgba(90,62,32,.28); border-radius: 5px; } :root[data-skin="kraft"] .tlapt, :root[data-skin="whitebox"] .tlapt { background: var(--cb-face); border: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 40%, transparent), 0 2px 0 var(--cb-edge), 0 3px 4px rgba(50,32,14,.3); } :root[data-skin="kraft"] .wkd, :root[data-skin="whitebox"] .wkd { background: var(--cb-face); border-color: rgba(90,62,32,.3); box-shadow: 0 2px 0 var(--cb-edge), 0 3px 3px rgba(50,32,14,.22); } /* The chosen day is still A PIECE OF BOARD — brand ink pressed into the stock, not a flat swatch laid on top of it. Replacing the face with `var(--brand)` killed the gradient and left one cell in the row made of different material; the grain over it then had nothing to multiply into. Tint the face instead and let the grain, the lift and the cut edge survive. */ :root[data-skin="kraft"] .wkd.sel, :root[data-skin="whitebox"] .wkd.sel { background: linear-gradient(174deg, color-mix(in srgb, var(--brand) 88%, #fff 12%), color-mix(in srgb, var(--brand) 96%, #000 4%) 62%, color-mix(in srgb, var(--brand) 90%, #000 10%)); border-color: color-mix(in srgb, var(--brand) 70%, #000 30%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 26%, transparent), 0 2px 0 color-mix(in srgb, var(--brand) 62%, #000 38%), 0 3px 3px rgba(50,32,14,.26); } :root[data-skin="kraft"] .mini, :root[data-skin="whitebox"] .mini, :root[data-skin="kraft"] .pill, :root[data-skin="whitebox"] .pill { background: var(--cb-face); border-color: rgba(90,62,32,.36); color: var(--text); box-shadow: 0 2px 0 var(--cb-edge), 0 3px 3px rgba(50,32,14,.2); } :root[data-skin="kraft"] .mini.gold, :root[data-skin="whitebox"] .mini.gold { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } @media (prefers-reduced-motion: reduce) { :root[data-skin="kraft"] .saka-w, :root[data-skin="whitebox"] .saka-w, :root[data-skin="kraft"] .pv, :root[data-skin="whitebox"] .pv { transition-duration: .001ms !important; } } /* ── Money wears the board too ────────────────────────────────────────── */ :root[data-skin="kraft"] .pcard, :root[data-skin="whitebox"] .pcard, :root[data-skin="kraft"] .hero, :root[data-skin="whitebox"] .hero { position: relative; isolation: isolate; border: 0; border-radius: 5px; overflow: visible; background: var(--cb-face); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 44%, transparent), inset 0 -1px 0 rgba(90,62,32,.30), 0 var(--cb-thick) 0 var(--cb-edge), 0 calc(var(--cb-thick) + 1.5px) 0 var(--cb-edge-dark), 0 calc(var(--cb-thick) + 5px) 7px rgba(50,32,14,.34); } :root[data-skin="kraft"] .pcard::before, :root[data-skin="whitebox"] .pcard::before, :root[data-skin="kraft"] .hero::before, :root[data-skin="whitebox"] .hero::before { content: ''; position: absolute; left: 1px; right: 1px; bottom: calc(-1 * var(--cb-thick)); height: var(--cb-thick); border-radius: 0 0 4px 4px; z-index: -1; background: linear-gradient(180deg, rgba(60,40,18,.55) 0 1px, transparent 1px), linear-gradient(0deg, rgba(60,40,18,.6) 0 1px, transparent 1px), var(--cb-flute); } :root[data-skin="kraft"] .hero .hnum, :root[data-skin="whitebox"] .hero .hnum { color: var(--green); } :root[data-skin="kraft"] .mchip, :root[data-skin="whitebox"] .mchip, :root[data-skin="kraft"] .method-chip, :root[data-skin="whitebox"] .method-chip { background: var(--cb-act); border: 0; color: var(--text); box-shadow: 0 2px 0 var(--cb-edge), 0 3px 3px rgba(50,32,14,.2); } /* ── ARRIVAL: the flaps fold down. Heavy paper, one stiff stop. ────────── */ body.skinfx[data-skin] .saka-w { animation: none; } :root[data-skin="kraft"] body.skinfx .saka-w, :root[data-skin="whitebox"] body.skinfx .saka-w, body.skinfx:is([data-skin]) .noop { } /* Analytics bars are marker ink on the board */ :root[data-skin="kraft"] .an-bar, :root[data-skin="whitebox"] .an-bar { background: color-mix(in srgb, var(--cb-marker) 22%, transparent); border-radius: 3px; } :root[data-skin="kraft"] .an-col.cur .an-bar, :root[data-skin="whitebox"] .an-col.cur .an-bar { background: var(--cb-marker); } :root[data-skin="kraft"] .an-track, :root[data-skin="whitebox"] .an-track { background: rgba(90,62,32,.24); box-shadow: inset 0 1px 2px rgba(60,40,18,.4); } :root[data-skin="kraft"] .an-track i, :root[data-skin="whitebox"] .an-track i { background: var(--cb-marker); } /* The menu is a piece of board too — face, slab, flute. */ :root[data-skin="kraft"] .sv-card, :root[data-skin="whitebox"] .sv-card { position: relative; isolation: isolate; border: 0; border-radius: 5px; overflow: visible; background: var(--cb-face); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 44%, transparent), inset 0 -1px 0 rgba(90,62,32,.30), 0 var(--cb-thick) 0 var(--cb-edge), 0 calc(var(--cb-thick) + 1.5px) 0 var(--cb-edge-dark), 0 calc(var(--cb-thick) + 5px) 7px rgba(50,32,14,.30); } /* The day grid is PRESSED INTO the book's board, not laid on it — the wrap is the card now (full piece-of-board above), so the chart recesses like the fields do. Raising both was the double-card mistake in cardboard. */ :root[data-skin="kraft"] .tl, :root[data-skin="whitebox"] .tl { border: 0; border-radius: 8px; background: color-mix(in srgb, var(--cb-edge) 9%, var(--cb-face)); box-shadow: inset 0 2px 6px rgba(60,40,18,.32), inset 0 -1px 0 color-mix(in srgb, var(--cb-lift) 34%, transparent); } :root[data-skin="kraft"] .sv-card::before, :root[data-skin="whitebox"] .sv-card::before { content: ''; position: absolute; left: 1px; right: 1px; bottom: calc(-1 * var(--cb-thick)); height: var(--cb-thick); border-radius: 0 0 4px 4px; z-index: -1; background: linear-gradient(180deg, rgba(60,40,18,.55) 0 1px, transparent 1px), linear-gradient(0deg, rgba(60,40,18,.6) 0 1px, transparent 1px), var(--cb-flute); } /* fields: pressed into the board, not laid on it */ :root[data-skin="kraft"] .chip-input input, :root[data-skin="whitebox"] .chip-input input { background: color-mix(in srgb, var(--cb-edge) 14%, var(--surface)); border: 0; border-radius: 8px; box-shadow: inset 0 2px 5px rgba(60,40,18,.38), inset 0 -1px 0 color-mix(in srgb, var(--cb-lift) 30%, transparent); } :root[data-skin="kraft"] .chip-input input:focus, :root[data-skin="whitebox"] .chip-input input:focus { box-shadow: inset 0 2px 5px rgba(60,40,18,.38), inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent); } :root[data-skin="kraft"] .tlapt, :root[data-skin="whitebox"] .tlapt { background: color-mix(in srgb, var(--brand) 16%, var(--cb-face, var(--surface))); border-left: 3px solid var(--brand); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cb-lift) 35%, transparent), 0 2px 0 var(--cb-edge), 0 3px 4px rgba(50,32,14,.3); } /* ── TAPE ────────────────────────────────────────────────────────────────── Three pieces total. The quiet one: the hamburger, taped down like the sticky note on the chalkboard stocks — 26x8, top-centre, a hair off square. And the two torn-edge pieces on the tiles that ARE the day (the hero card and the week strip) — a pass once removed them as "decoration"; Keyno asked for them back (2026-08-08). Tape is the thing that says a human put this here. Built the way the rest of this skin is: no images. A translucent warm strip, torn edges via a repeating conic mask on each end, a little glare across it, and a slight rotation so it was clearly laid by hand. It sits ABOVE the grain (z-index 3) because tape goes on last, and it never eats a tap. Targeted by [data-id] so re-arranging the board keeps the tape on the same cards. Ties the grain ::after on specificity and wins by ORDER — these two tiles trade their piece-grain for the tape, which is the point: tape covers what it is stuck over. */ :root[data-skin="kraft"] .ham, :root[data-skin="whitebox"] .ham { position: relative; } :root[data-skin="kraft"] .ham::after, :root[data-skin="whitebox"] .ham::after { content: ''; position: absolute; top: -4px; left: 50%; width: 26px; height: 8px; transform: translateX(-50%) rotate(-1.4deg); background: rgba(255,255,255,.34); pointer-events: none; } :root[data-skin="kraft"] .saka-w[data-id="nowcard"]::after, :root[data-skin="whitebox"] .saka-w[data-id="nowcard"]::after, :root[data-skin="kraft"] .saka-w[data-id="weeknav"]::after, :root[data-skin="whitebox"] .saka-w[data-id="weeknav"]::after { content: ''; position: absolute; z-index: 3; pointer-events: none; /* Top-RIGHT, and mostly overhanging. Centred it covered "August 2026" — tape holds a corner down; it does not sit in the middle of a label. */ width: 72px; height: 22px; top: -13px; right: 16px; left: auto; background: linear-gradient(102deg, transparent, rgba(255,255,255,.30) 34%, transparent 62%), linear-gradient(180deg, var(--cb-tape-a), var(--cb-tape-b)); opacity: .78; mix-blend-mode: normal; box-shadow: 0 1px 2px rgba(50,32,14,.28); /* torn ends — a row of tiny triangles bitten out of each edge */ -webkit-mask-image: repeating-conic-gradient(from -45deg at 0 50%, #000 0 25%, transparent 0 50%), repeating-conic-gradient(from 135deg at 100% 50%, #000 0 25%, transparent 0 50%), linear-gradient(#000,#000); -webkit-mask-size: 5px 5px, 5px 5px, calc(100% - 8px) 100%; -webkit-mask-position: left center, right center, center; -webkit-mask-repeat: repeat-y, repeat-y, no-repeat; -webkit-mask-composite: source-over; mask-image: repeating-conic-gradient(from -45deg at 0 50%, #000 0 25%, transparent 0 50%), repeating-conic-gradient(from 135deg at 100% 50%, #000 0 25%, transparent 0 50%), linear-gradient(#000,#000); mask-size: 5px 5px, 5px 5px, calc(100% - 8px) 100%; mask-position: left center, right center, center; mask-repeat: repeat-y, repeat-y, no-repeat; transform: rotate(-2.4deg); } /* the second piece — the other card, other corner, other angle, so the two never read as a repeated motif */ :root[data-skin="kraft"] .saka-w[data-id="weeknav"]::after, :root[data-skin="whitebox"] .saka-w[data-id="weeknav"]::after { width: 58px; right: 26px; transform: rotate(3.1deg); opacity: .72; } :root[data-skin="kraft"], :root[data-skin="whitebox"] { --cb-tape-a: rgba(240,226,196,.92); --cb-tape-b: rgba(224,205,168,.86); } :root[data-skin="whitebox"] { --cb-tape-a: rgba(252,250,245,.9); --cb-tape-b: rgba(236,231,220,.85); } /* ── RAISED CAPSULES — the social doors and the primary button ───────────── * One definition, shared by app.html / me.html / book.html (each used to carry * its own copy). A capsule CUT FROM THICK CORRUGATED BOARD: the FACE is the * painted top; the THICKNESS is a curved side-wall that follows the whole * stadium outline and WRAPS the rounded ends. The wall is a copy of the pill * dropped straight down — so the revealed crescent is deep at the centre and * curves to nothing at the tips, the way an extruded rounded shape actually * reads from just above. Flute lines run down it (the 7.6px wave, not * negotiable), a bright rim marks the cut where face meets wall, and the wall * darkens as it turns under. Press collapses the thickness onto the board. * Per-variant tuning is all custom props — one line to redial. */ .btn-social, .btn.slab { --edge: 6px; position: relative; /* NO isolation — a negative-z wall must paint BEHIND the face, and a new stacking context flips that, bleeding the flute over the top. */ transition: box-shadow var(--dur-swift, .12s) var(--ease-spring, ease); } /* THE SIDE-WALL — a copy of the pill dropped straight down. The face (opaque, painted after this) covers all but the bottom crescent, which curves to nothing at the rounded tips: a real extruded edge, wrapping the ends. */ .btn-social::before, .btn.slab::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(var(--edge)); background: /* the lit cut where the face lifts off the wall */ linear-gradient(180deg, var(--wall-rim, rgba(255,255,255,.16)) 0 1.4px, transparent 1.4px), /* the flute cross-section — the 7.6px wave the board tiles carry */ repeating-linear-gradient(90deg, var(--flute-a) 0 1.2px, var(--flute-b) 1.2px 3.2px, var(--flute-hi) 3.2px 4.6px, var(--flute-b) 4.6px 6.4px, var(--flute-a) 6.4px 7.6px), /* the wall falls into shadow as it curves under */ linear-gradient(180deg, transparent 42%, var(--wall-occ, rgba(0,0,0,.45)) 100%), var(--wall-base); box-shadow: 0 calc(var(--edge) + 5px) 9px rgba(50,32,14,.30); transition: transform var(--dur-swift, .12s) var(--ease-spring, ease); } /* PRESS — no transform on the face (that would spawn a stacking context and bring the bug back); instead the wall collapses and the face sinks into an inset shadow, which reads as the piece pressing onto the board. */ .btn-social:active::before, .btn.slab:active::before { transform: translateY(2px); box-shadow: 0 2px 4px rgba(50,32,14,.32); } .btn.slab:active { box-shadow: inset 0 3px 9px rgba(20,8,4,.5); } .btn-social { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; cursor: pointer; font: 600 16px var(--font-ui, system-ui); letter-spacing: .1px; } .btn-social + .btn-social { margin-top: 12px; } .btn-social.apple { background: linear-gradient(174deg, #1d1d1d, #000 66%); color: #fff; --wall-base: #0d0d0d; --flute-a: #000; --flute-b: #262626; --flute-hi: #3a3a3a; --wall-rim: rgba(255,255,255,.18); --wall-occ: rgba(0,0,0,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .btn-social.google { background: linear-gradient(174deg, #fff, #F1EEE7 66%); color: #1f1f1f; --wall-base: #CFC8BA; --flute-a: #B7AF9E; --flute-b: #D6CFC1; --flute-hi: #EFE9DD; --wall-rim: rgba(255,255,255,.92); --wall-occ: rgba(120,105,80,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } .btn-social .gmark { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; } .btn-social .gmark svg { width: 100%; height: 100%; display: block; } /* the primary button, dyed to the brand — the same board, cut in maroon */ .btn.slab { --wall-base: #571c14; --flute-a: #3d120b; --flute-b: #6a241a; --flute-hi: #86311f; --wall-rim: rgba(255,240,214,.16); --wall-occ: rgba(18,6,3,.5); } .btn.slab[disabled] { opacity: .5; } .btn.slab[disabled]::before { opacity: .5; }