/* =========================================================================== STAKK BRAND V3 - DESIGN TOKENS Picked 22 Oct 2026: direction 3, "Green". Inter stays. Rules and pictures: projects/stakk/stakk-brand-guidelines-v3.html. ROLLOUT IN TWO PARTS (Nate, 23 Oct 2026): the homepage, the shared site chrome and the SEO pages load THIS file. The store, checkout, dashboard and every page not yet moved still load css/stakk-tokens.css (v2), so they do not change. Rollout step 1 later copies this file over stakk-tokens.css, repoints every link to it, and deletes this file. projects/stakk/stakk-tokens-v3.css is a copy for the guidelines page. Every v2 and v1 name is kept at the bottom, so no page broke on the swap. New code uses the v3 names only. One palette: green, ink, mint, forest. No more brand colours. Colour variety comes from photos, product covers and store colours. =========================================================================== */ :root { /* ---- Palette ---- */ --sk-green: #00E000; /* the brand. Hero and last-call ground, money */ --sk-green-hover: #00FA00; /* green button hover: lighter, not darker */ --sk-ink: #0A0F0B; /* text, logo, the action button */ --sk-ink-hover: #2B332C; /* ink button hover: lighter */ --sk-white: #FFFFFF; --sk-mint-50: #F4FCF1; /* cards on white, store and app ground */ --sk-mint-100: #E7F9E2; /* the tint band */ --sk-mint-200: #CDF3C3; /* slabs on white, soft button hover */ --sk-forest-900: #08281A; /* the deep band: money safety, once a page */ --sk-forest-800: #0E3524; /* cards on forest */ --sk-forest-700: #184A33; /* lines and slabs on forest */ --sk-muted: #5B625C; /* second text on white and mint (6.2:1) */ --sk-muted-on-green: #14361F; /* second text on green (7:1) */ --sk-muted-on-forest: #A9BDB0; /* second text on forest (7.9:1) */ --sk-line: #E2E7E1; /* hairlines */ --sk-input-line: #CFD6CE; /* input ring */ --sk-error: #D93025; --sk-warn: #FFB020; /* ---- Type: Inter 400 and 700 only ---- */ --sk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --sk-fw-regular: 400; --sk-fw-bold: 700; --sk-fs-display: clamp(56px, 8vw, 128px); /* one big number a page */ --sk-fs-h1: clamp(38px, 2.2vw + 30px, 56px); /* 2 lines desktop, 3 phone */ --sk-fs-h2: clamp(30px, 2vw + 22px, 48px); --sk-fs-h3: clamp(20px, .5vw + 18px, 24px); --sk-fs-lede: clamp(17px, .45vw + 15.5px, 21px);/* the one sub line */ --sk-fs-body: 16px; --sk-fs-small: 14px; /* the floor on a phone */ --sk-fs-mock: 12px; /* inside drawn phones only */ --sk-lh-tight: 1.04; --sk-lh-snug: 1.25; --sk-lh-lede: 1.4; --sk-lh-body: 1.5; --sk-ls-tight: -0.035em; /* H1, H2, big numbers */ --sk-ls-snug: -0.02em; /* H3, names, prices */ /* ---- Space: a 4px scale ---- */ --sk-sp-1: 4px; --sk-sp-2: 8px; --sk-sp-3: 12px; --sk-sp-4: 16px; --sk-sp-5: 24px; --sk-sp-6: 32px; --sk-sp-7: 48px; --sk-sp-8: 64px; --sk-sp-9: 96px; --sk-sp-10: 128px; --sk-section-y: clamp(72px, 4.4vw + 56px, 112px); --sk-head-gap: 48px; --sk-gutter: 32px; --sk-max-w: 1200px; --sk-card-pad: 24px; --sk-card-pad-sm: 16px; /* ---- Corners ---- */ --sk-r-card: 20px; /* cards, panels, modals, tiles */ --sk-r-control: 14px; /* buttons, inputs, images inside cards, bump box */ --sk-r-small: 10px; /* thumbnails 64px and under */ --sk-r-check: 7px; /* checkboxes */ --sk-r-pill: 999px; /* chips, badges, switch tracks */ --sk-r-money: .3em; /* money chips: scales with the text, never a pill */ --sk-money-pad: .04em .3em; --sk-r-device: 44px; /* drawn phones only */ /* ---- Controls: buttons and inputs share heights ---- */ --sk-ctl-h: 48px; --sk-ctl-h-lg: 56px; /* hero and last call */ --sk-ctl-h-sm: 38px; /* nav and inside mocks */ --sk-ctl-pad: 24px; --sk-ctl-pad-lg: 32px; --sk-ctl-pad-sm: 16px; --sk-ring: 1.5px; /* input ring and checkbox ring */ --sk-focus: 2px; --sk-disabled: .4; /* opacity of a disabled control */ /* ---- Depth: floating pictures only, never real UI ---- */ --sk-shadow-float: 0 18px 40px -16px rgba(8, 40, 26, .35), 0 2px 8px rgba(8, 40, 26, .08); /* ---- Motion ---- */ --sk-ease: cubic-bezier(.2, 0, 0, 1); --sk-spring: cubic-bezier(.34, 1.56, .64, 1); --sk-dur-press: 120ms; --sk-dur-hover: 200ms; --sk-dur-ground: 400ms; --sk-dur-pop: 600ms; --sk-press-scale: .96; --sk-lift: -3px; --sk-reveal-y: 24px; /* ---- Icon wallpaper: the two-tone product-type icons, tiled faintly behind a hero or last call ---- */ --sk-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='460' viewBox='0 0 390 460' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 28) scale(1.75) rotate(-12 12 12)' stroke-width='1.14'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M8.5 8.5l1.2 1.2 2-2.2M13.5 9h2M8.5 14l1.2 1.2 2-2.2M13.5 14.5h2'/%3E%3C/g%3E%3Cg transform='translate(150 16) scale(1.6) rotate(8 12 12)' stroke-width='1.25'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6L7 7M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4'/%3E%3C/g%3E%3Cg transform='translate(282 44) scale(1.75) rotate(-6 12 12)' stroke-width='1.14'%3E%3Crect x='3' y='5' width='18' height='14' rx='3' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M7 10v4M10 8v8M13 10.5v3M16 9v6'/%3E%3C/g%3E%3Cg transform='translate(76 150) scale(1.7) rotate(10 12 12)' stroke-width='1.18'%3E%3Cpath d='M12 6.5c-2-1.5-5-2-8-1.5v13c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5V5c-3-.5-6 0-8 1.5z' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/g%3E%3Cg transform='translate(212 138) scale(1.75) rotate(-14 12 12)' stroke-width='1.14'%3E%3Crect x='3.5' y='4.5' width='17' height='12' rx='2.5' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M10.5 8v5l4-2.5zM8 20h8'/%3E%3C/g%3E%3Cg transform='translate(330 184) scale(1.55) rotate(12 12 12)' stroke-width='1.29'%3E%3Cpath d='M13.5 4.5l6 6-6 6-6-6z' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M7.5 10.5L5 13c-1.5 1.5-1 3-2 4.5 2.5.5 4.5-.5 6-2l2.5-2.5'/%3E%3C/g%3E%3Cg transform='translate(20 286) scale(1.75) rotate(6 12 12)' stroke-width='1.14'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 4.5v15'/%3E%3C/g%3E%3Cg transform='translate(160 272) scale(1.7) rotate(-8 12 12)' stroke-width='1.18'%3E%3Cpath d='M4 8h3l1.5-2.5h7L17 8h3v11H4z' fill='%23000' fill-opacity='.38'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(286 300) scale(1.7) rotate(14 12 12)' stroke-width='1.18'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M6 7.5c3 1 6 4 7 12M9 4.5c3.5 2 6 6 6.5 14M5 13c3-.5 7 .5 10.5 4'/%3E%3C/g%3E%3Cg transform='translate(104 378) scale(1.6) rotate(-10 12 12)' stroke-width='1.25'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M4 9.5h16M8.5 3v4M15.5 3v4M8 13h2M12 13h2M8 16.5h2'/%3E%3C/g%3E%3Cg transform='translate(242 404) scale(1.7) rotate(9 12 12)' stroke-width='1.18'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5' fill='%23000' fill-opacity='.38'/%3E%3Cpath d='M8 8v8M12 8v8M16 8v8M6.5 10.5h3M10.5 14h3M14.5 11h3'/%3E%3C/g%3E%3C/svg%3E"); --sk-wall-size: 390px 460px; /* ---- Icons: line only ---- */ --sk-icon-stroke: 1.75; --sk-icon-sm: 16px; --sk-icon: 20px; --sk-icon-lg: 24px; /* ---- Store colours (APPROVED 22 Oct 2026, built after the rollout) ---- A creator picks one. It colours their avatar ring, buy buttons and cover tint. Layout, type and checkout never change. Default is ink. */ --sk-store-green: #00E000; --sk-store-green-on: var(--sk-ink); --sk-store-ocean: #2F6BFF; --sk-store-ocean-on: var(--sk-white); --sk-store-grape: #7B4DFF; --sk-store-grape-on: var(--sk-white); --sk-store-berry: #FF3D8B; --sk-store-berry-on: var(--sk-ink); --sk-store-sunset: #FF6A3D; --sk-store-sunset-on: var(--sk-ink); --sk-store-lemon: #FFC81A; --sk-store-lemon-on: var(--sk-ink); --sk-store-sky: #28B8F0; --sk-store-sky-on: var(--sk-ink); --sk-store-ink: #0A0F0B; --sk-store-ink-on: var(--sk-white); --sk-store-accent: var(--sk-store-ink); --sk-store-accent-on: var(--sk-store-ink-on); } @media (max-width: 600px) { :root { --sk-gutter: 16px; } } /* ---- Grounds ---------------------------------------------------------------- A section picks one ground. Every part inside reads the --g-* values, so a button or card is styled once and looks right on all four. */ :root, .sk-g-white { --g-wall: rgba(8, 40, 26, .06); --g-bg: var(--sk-white); --g-fg: var(--sk-ink); --g-fg-2: var(--sk-muted); --g-card: var(--sk-mint-50); --g-line: var(--sk-line); --g-slab: var(--sk-mint-200); --g-act-bg: var(--sk-ink); --g-act-fg: var(--sk-white); --g-act-hover: var(--sk-ink-hover); --g-soft-bg: var(--sk-mint-100);--g-soft-hover: var(--sk-mint-200); --g-field: var(--sk-white); --g-field-ring: var(--sk-input-line); --g-money-bg: var(--sk-green); --g-money-fg: var(--sk-ink); } .sk-g-mint { --g-wall: rgba(8, 40, 26, .06); --g-bg: var(--sk-mint-100); --g-fg: var(--sk-ink); --g-fg-2: var(--sk-muted); --g-card: var(--sk-white); --g-line: rgba(10, 15, 11, .08); --g-slab: var(--sk-mint-200); --g-act-bg: var(--sk-ink); --g-act-fg: var(--sk-white); --g-act-hover: var(--sk-ink-hover); --g-soft-bg: var(--sk-white); --g-soft-hover: var(--sk-mint-50); --g-field: var(--sk-white); --g-field-ring: var(--sk-input-line); --g-money-bg: var(--sk-green); --g-money-fg: var(--sk-ink); } .sk-g-green { --g-wall: rgba(10, 15, 11, .1); --g-bg: var(--sk-green); --g-fg: var(--sk-ink); --g-fg-2: var(--sk-muted-on-green); --g-card: var(--sk-white); --g-line: rgba(10, 15, 11, .12); --g-slab: rgba(255, 255, 255, .55); --g-act-bg: var(--sk-ink); --g-act-fg: var(--sk-white); --g-act-hover: var(--sk-ink-hover); --g-soft-bg: rgba(255, 255, 255, .45); --g-soft-hover: rgba(255, 255, 255, .7); --g-field: var(--sk-white); --g-field-ring: transparent; --g-money-bg: var(--sk-white); --g-money-fg: var(--sk-ink); } .sk-g-forest { --g-wall: rgba(255, 255, 255, .07); --g-bg: var(--sk-forest-900); --g-fg: var(--sk-white); --g-fg-2: var(--sk-muted-on-forest); --g-card: var(--sk-forest-800); --g-line: var(--sk-forest-700); --g-slab: var(--sk-forest-700); --g-act-bg: var(--sk-green); --g-act-fg: var(--sk-forest-900); --g-act-hover: var(--sk-green-hover); --g-soft-bg: rgba(255, 255, 255, .12); --g-soft-hover: rgba(255, 255, 255, .2); --g-field: rgba(255, 255, 255, .1); --g-field-ring: transparent; --g-money-bg: var(--sk-green); --g-money-fg: var(--sk-forest-900); } .sk-g-white, .sk-g-mint, .sk-g-green, .sk-g-forest { background: var(--g-bg); color: var(--g-fg); transition: background-color var(--sk-dur-ground) var(--sk-ease); } /* ---- Base (kept from the live file) ---- */ html { color-scheme: light; } html, body { background: var(--sk-white); color: var(--sk-ink); } p, li { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } body.sk-ground-off, body[data-sk-ground="off"] { background: var(--sk-mint-50); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* =========================================================================== v2 AND v1 NAMES, REPOINTED So rollout step 1 is one file swap. Delete each line once no page uses it. =========================================================================== */ :root { --sk-black: var(--sk-ink); --sk-black-hover: var(--sk-ink-hover); --sk-btn-hover: var(--sk-ink-hover); --sk-green-lift: var(--sk-green-hover); --sk-off: var(--sk-mint-50); --sk-grey: var(--sk-muted); --sk-hairline: var(--sk-line); --sk-border: var(--sk-line); --sk-weight: var(--sk-fw-regular); --sk-ease-standard: var(--sk-ease); --sk-btn-transition: background-color .3s var(--sk-ease); --sk-radius-btn: var(--sk-r-control); --sk-radius-input: var(--sk-r-control); --sk-radius-card: var(--sk-r-card); --sk-radius-tile: var(--sk-r-card); --sk-radius-thumb: var(--sk-r-small); --sk-radius-pill: var(--sk-r-pill); --sk-btn-h: 56px; /* v2 sizes kept so nothing moves on the swap */ --sk-btn-pad: 28px; --sk-btn-h-sm: 44px; --sk-btn-pad-sm: 20px; /* v1 */ --bg: var(--sk-white); --card: var(--sk-white); --border: var(--sk-line); --primary: var(--sk-ink); --primary-hover: var(--sk-ink-hover); --text: var(--sk-ink); --text-secondary: var(--sk-muted); --dark: var(--sk-ink); --green-light: var(--sk-mint-50); --radius: var(--sk-r-control); --max-w: var(--sk-max-w); }