/* ============================================================ JUWEL · Humanist Meadow tokens — juwel-ds.css (v4, 2026-07-14) Cream paper / ink / amber climate. Canonical stage: still meadow wash (data-bg=still default; ambient only data-bg=live). ONE law of color — ink = you act; topaz = JUWEL / the record. LuxLiq event helpers (bead/pour/seal) remain; ambient lava dies. Theme: . Bounce is BANNED. ============================================================ */ :root{ /* ── ink + stage — LIGHT (Humanist Meadow paper) ── */ --paper:#F7F4F0; --bg:#F7F4F0; --surface:#FFFCF8; --surface-2:#F0E8DF; --surface-3:#E8DED2; --ink:#1A1612; --ink-1:#1A1612; --ink-2:rgba(26,22,18,.64); --ink-3:rgba(26,22,18,.62); --ink-4:rgba(26,22,18,.20); --line:rgba(26,22,18,.10); --line-2:rgba(26,22,18,.06); --edge:rgba(255,255,255,.75); --receipt-bg:#171310; --receipt-ink:#F7F1E8; /* Meadow wash (still paper stage). Sky + moss field washes only — ambient lava is opt-in live; OS uses html[data-bg=still]. */ --wash:radial-gradient(90% 70% at 50% -10%, rgba(255,154,0,.045), transparent 55%), radial-gradient(80% 55% at 8% 100%, rgba(197,217,232,.22), transparent 52%), radial-gradient(70% 50% at 100% 88%, rgba(180,200,160,.14), transparent 50%), linear-gradient(180deg, #F7F4F0 0%, #F3EEE7 100%); /* ── accents (semantic; amber is JUWEL/record only) ── */ --topaz:#FF9A00; --topaz-2:#FFB43A; --topaz-deep:#E8880F; --topaz-soft:#FFF3E0; --topaz-ink:#7A4D00; --jade:#3ECF8E; --jade-2:#5FDCA4; --jade-deep:#22A96C; --jade-soft:#E2F6EC; --garnet:#C44B7A; --garnet-2:#D9709A; --garnet-deep:#A63862; --garnet-soft:#F8E6EE; --sapphire:#5BB7FF; --sapphire-2:#83C9FF; --sapphire-deep:#2E8FD9; --sapphire-soft:#E3F1FC; --rose:#FF6B8A; --rose-2:#FF8DA5; --rose-soft:#FFE9EE; --foam:#FFF3E0; --amethyst:var(--topaz); --amethyst-2:var(--topaz-2); --amethyst-deep:var(--topaz-deep); --amethyst-soft:var(--topaz-soft); /* semantic */ --accent:var(--topaz); --accent-2:var(--topaz-2); --accent-deep:var(--topaz-deep); --accent-soft:var(--topaz-soft); --accent-ink:#201200; --accent-contrast:#201200; --amber-ink:#8A5200; --ok:#22A96C; --ok-ink:#1B8756; --bad:#C44B7A; /* keyboard focus — INK not nectar: tabbing is YOU acting (a11y AA) */ --focus-ring:var(--ink); /* legacy vext.css color vocabulary → meadow (glow kept whisper-quiet) */ --amber:var(--topaz); --amber-deep:var(--topaz-deep); --amber-glow:rgba(255,154,0,.08); --sky:var(--sapphire); --terracotta:var(--rose); --moss:var(--jade-deep); --c-amber:var(--topaz); --c-burn:var(--topaz-deep); --c-coral:var(--rose); --c-sky:var(--sapphire); --c-lime:var(--jade); --c-plum:#57544E; --c-grape:#3B3934; /* purple stays dead */ --gloss-sheen:linear-gradient(180deg,rgba(255,255,255,.35),transparent 42%); /* ── type ── */ --ff:'Plus Jakarta Sans',system-ui,sans-serif; --ff-display:var(--ff); --ff-ui:var(--ff); --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace; --ff-mono:var(--mono); --serif:var(--ff); --ff-serif:var(--ff); /* no serif in the system */ --fs-display:clamp(34px,5vw,54px); --fs-h1:clamp(26px,3.4vw,38px); --fs-h2:clamp(21px,2.4vw,28px); --fs-h3:17px; --fs-lede:16px; --fs-body:15px; --fs-small:12.5px; --fs-label:11px; --maxw:1120px; /* ── space · radius (soft gel — plumper than FACET, not pills) ── */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px; --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:24px; --r-full:999px; /* ── motion — luxury viscosity: slow pours, long settle, no bounce ── */ --ease-out:cubic-bezier(.22,1,.36,1); /* --ease-viscous */ --ease-in-out:cubic-bezier(.4,0,.15,1); /* --ease-flow */ --ease:var(--ease-out); --ease-soft:var(--ease-out); --bounce:var(--ease-out); /* legacy bounce silenced */ --dur:.26s; --dur-1:.16s; --dur-2:.26s; --dur-3:.38s; /* ── elevation — gel contact + inner lamp glow ── */ --shadow-1:0 1px 2px rgba(24,16,8,.05),0 10px 28px -18px rgba(24,16,8,.28); --shadow-2:0 14px 36px -18px rgba(24,16,8,.34); --shadow-3:0 24px 60px -28px rgba(24,16,8,.42); --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3); --shadow-glow:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent); --glow-amber:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent); --inner-glow:inset 0 1px 0 var(--edge); /* wet chrome glass (menubar / dock / palette / control center) */ --glass-bg:color-mix(in srgb,var(--surface) 74%,transparent); --glass-border:var(--line); --glass-shadow:inset 0 1px 0 var(--edge),0 12px 40px -20px rgba(24,16,8,.40); --glass-blur:blur(22px) saturate(1.4); } html[data-theme="dark"]{ /* ── DARK (clean neutral charcoal — NOT brown; 2026-07-13 founder fix) ── */ --paper:#0E0E11; --bg:#0E0E11; --surface:#17171B; --surface-2:#1F1F24; --surface-3:#29292F; --ink:#F5F6F8; --ink-1:#F5F6F8; --ink-2:rgba(245,246,248,.66); --ink-3:rgba(245,246,248,.50); --ink-4:rgba(245,246,248,.20); --line:rgba(245,246,248,.10); --line-2:rgba(245,246,248,.06); --edge:rgba(255,255,255,.06); --receipt-bg:#0B0B0D; --receipt-ink:#F7F1E8; /* wash goes near-neutral whisper — candy life comes from the lamp blobs, never a brown stage */ --wash:radial-gradient(120% 90% at 12% -8%, rgba(255,180,58,.03), transparent 55%), radial-gradient(110% 80% at 96% 2%, rgba(91,183,255,.025), transparent 52%), radial-gradient(140% 120% at 50% 112%, rgba(255,107,138,.025), transparent 60%); --topaz:#FFB43A; --topaz-2:#FFC65C; --topaz-deep:#FF9A1A; --topaz-soft:#33260F; --amber-ink:#FFB43A; --topaz-ink:#FFC65C; --jade:#5FDCA4; --jade-2:#7FE6B8; --jade-deep:#3ECF8E; --jade-soft:#122A1F; --garnet:#D9709A; --garnet-2:#E48FB1; --garnet-deep:#C44B7A; --garnet-soft:#33181F; --sapphire:#83C9FF; --sapphire-2:#A5D8FF; --sapphire-deep:#5BB7FF; --sapphire-soft:#142430; --rose:#FF8DA5; --rose-2:#FFA8BA; --rose-soft:#331A20; --foam:#332A1C; --accent-ink:#201200; --ok:#5FDCA4; --ok-ink:#7FE6B8; --bad:#D9709A; --c-plum:#8B877E; --c-grape:#6B6860; --amber-glow:rgba(255,180,58,.06); --shadow-1:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.5); --shadow-2:0 14px 36px -18px rgba(0,0,0,.6); --shadow-3:0 24px 60px -28px rgba(0,0,0,.7); --glass-bg:color-mix(in srgb,var(--surface) 72%,transparent); --glass-shadow:inset 0 1px 0 var(--edge),0 12px 40px -20px rgba(0,0,0,.6); } *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} html,body{margin:0;} body{color:var(--ink);font-family:var(--ff);font-size:var(--fs-body);line-height:1.55; -webkit-font-smoothing:antialiased;background:var(--wash),var(--paper);background-attachment:fixed; font-feature-settings:"ss01","cv11";font-style:normal;} em,i,cite,dfn,address{font-style:normal;} /* italics are banned — hard rule */ ::selection{background:color-mix(in srgb,var(--topaz) 28%,transparent);} /* ── type roles ── */ .t-display{font-size:var(--fs-display);font-weight:700;letter-spacing:-.025em;line-height:1.05;} .t-h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.022em;line-height:1.1;} .t-h2{font-size:var(--fs-h2);font-weight:650;letter-spacing:-.018em;line-height:1.14;} .t-h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.012em;line-height:1.25;} .t-lede{font-size:var(--fs-lede);font-weight:500;color:var(--ink-2);line-height:1.5;} .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:500;} .serif{font-family:var(--ff);font-style:normal;font-weight:600;} .g-text{color:var(--topaz-ink);background:none;-webkit-background-clip:initial;background-clip:initial;} em.accent{font-style:normal;font-weight:600;color:var(--topaz-ink);} /* ══ LUXLIQ MATERIALS ══ Pane — a glass chamber with inner lamp glow, not a paper card. Chrome glass — ONE wet translucent material, chrome only. */ .pane,.card,.gloss,.liquid-glass{position:relative; background:var(--surface); border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1); transition:box-shadow var(--dur-3) var(--ease-out);} .pane,.gloss,.liquid-glass{border-radius:var(--r-lg);} .gloss{overflow:hidden;color:var(--ink);} .gloss::before{content:"";position:absolute;inset:0 0 62% 0;pointer-events:none; background:var(--gloss-sheen);border-radius:inherit;opacity:.5;} .liquid-glass{backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25); background:color-mix(in srgb,var(--surface) 84%,transparent);} .liquid-glass::after{content:none;} /* rainbow lens rim stays dead */ .chrome-glass{background:var(--glass-bg); backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);} /* ── the glint — event-driven only (the seal's one flash of light) ── */ .glint{position:relative;overflow:hidden;} .glint::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%; background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 34%,transparent) 50%,transparent 92%); transform:translateX(-120%) skewX(-18deg);opacity:0;pointer-events:none;} .glint.glint-on::after{opacity:1;transform:translateX(460%) skewX(-18deg); transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);} @media (prefers-reduced-motion:reduce){ .glint.glint-on::after{transform:none;left:0;width:100%; background:color-mix(in srgb,var(--topaz) 12%,transparent); transition:opacity .15s ease;opacity:0;} } /* ── buttons — ink = you act; nectar wax = JUWEL acts ── */ .cbtn,.pbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--ff);font-weight:600;font-size:13.5px;letter-spacing:-.01em; color:var(--paper);background:var(--ink); padding:9px 16px;border-radius:var(--r-md);border:1px solid transparent; cursor:pointer;text-decoration:none;overflow:hidden; transition:transform var(--dur-1) var(--ease-out),background-color .18s ease, border-color .18s ease,color .18s ease,box-shadow var(--dur-2) var(--ease-out);} .cbtn::before,.pbtn::before{content:none;} @media (hover:hover) and (pointer:fine){ .cbtn:hover,.pbtn:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper));} } .cbtn:active,.pbtn:active{transform:scale(.975);} /* gel compress, no bounce */ .cbtn.lg{padding:12px 20px;font-size:14.5px;} .cbtn.sm{padding:6px 12px;font-size:12.5px;} .cbtn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none;backdrop-filter:none;} @media (hover:hover) and (pointer:fine){ .cbtn.ghost:hover{background:var(--surface-2);} } .cbtn.juwel,.cbtn.amethyst{color:var(--accent-ink); background:linear-gradient(160deg,var(--topaz-2),var(--topaz) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px -12px var(--amber-glow);} @media (hover:hover) and (pointer:fine){ .cbtn.juwel:hover,.cbtn.amethyst:hover{ background:linear-gradient(160deg,var(--topaz-2),var(--topaz-2) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px -12px var(--amber-glow);} } .cbtn.garnet{background:transparent;color:var(--garnet);border-color:var(--line);} @media (hover:hover) and (pointer:fine){ .cbtn.garnet:hover{background:var(--garnet-soft);} } .cbtn.sapphire{background:transparent;color:var(--sapphire-deep);border-color:var(--line);} @media (hover:hover) and (pointer:fine){ .cbtn.sapphire:hover{background:var(--sapphire-soft);} } /* ── eyebrow — the record voice ── */ .eyebrow{display:inline-flex;align-items:center;gap:8px;} .eyebrow.pill{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full); padding:6px 12px;box-shadow:inset 0 1px 0 var(--edge);} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--jade);} /* ── cards ── */ .card{border-radius:var(--r-lg);padding:var(--s5);} .candy-card{position:relative;border-radius:var(--r-lg);padding:26px 24px;min-height:200px; display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);overflow:hidden; background:var(--surface);border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1); transition:box-shadow var(--dur-3) var(--ease-out);} .candy-card::before{content:"";position:absolute;inset:0 0 64% 0;pointer-events:none; background:var(--gloss-sheen);opacity:.4;} @media (hover:hover) and (pointer:fine){ .candy-card:hover{box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);} } .candy-card .ic{position:absolute;top:22px;left:24px;width:40px;height:40px;border-radius:var(--r-md); background:var(--surface-2);border:1px solid var(--line);color:var(--topaz-ink); display:grid;place-items:center;backdrop-filter:none; box-shadow:inset 0 1px 0 var(--edge),inset 0 -6px 10px -8px rgba(24,16,8,.18);} .candy-card .ic svg{width:20px;height:20px;} .candy-card h3{font-size:19px;font-weight:650;letter-spacing:-.018em;margin:0 0 6px;} .candy-card p{font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.5;margin:0;} /* ── chip ── */ .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.03em;border-radius:var(--r-full);padding:4px 10px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);} .chip.signed{color:var(--ok-ink);background:var(--jade-soft);border-color:transparent;} .chip.signed svg{width:12px;height:12px;} /* ── the receipt — the SEAL: cooled, vitrified fluid. Identical on both sites; mint edge when valid. The cohesion anchor. ── */ .receipt{background:var(--receipt-bg);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg); padding:24px 26px;color:var(--receipt-ink);font-family:var(--mono); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-2);max-width:520px;} .receipt.is-valid,.receipt.verified{border-color:color-mix(in srgb,var(--jade) 45%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px color-mix(in srgb,var(--jade) 26%,transparent),var(--shadow-2);} .receipt .rh{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.16);padding-bottom:12px;margin-bottom:12px;} .receipt .rh .t{font-weight:500;letter-spacing:.08em;font-size:11px;text-transform:uppercase;color:rgba(247,241,232,.55);} .receipt .rh .v{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--jade-2);font-weight:500;} .receipt .rh .v i{width:6px;height:6px;border-radius:50%;background:var(--jade-2);} .receipt .row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;} .receipt .row .l{color:rgba(247,241,232,.5);} .receipt .sig{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.16);font-size:11.5px;word-break:break-all;color:var(--topaz-2);} /* ── signed-action sticker ── */ .action{display:inline-flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:var(--r-md); padding:13px 15px;box-shadow:inset 0 1px 0 var(--edge),var(--shadow-1);border:1px solid var(--line);} .action .top{display:flex;align-items:center;gap:10px;} .action .a-ic{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0; color:var(--topaz-ink);background:var(--surface-2);border:1px solid var(--line);box-shadow:none;} .action .a-ic svg{width:16px;height:16px;} .action .a-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);} .action .a-t{font-size:14px;font-weight:600;letter-spacing:-.01em;} /* ── gem mark — the candy entity's badge: lit from within ── */ .gemmark{display:inline-grid;place-items:center;border-radius:var(--r-sm); color:var(--accent-ink); background:linear-gradient(160deg,var(--topaz-2),var(--topaz) 66%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 14px -4px rgba(255,255,255,.35),var(--shadow-1);} .gemmark svg{width:56%;height:56%;} /* ── swatch ── */ .sw{border-radius:var(--r-lg);height:120px;position:relative;overflow:hidden;color:#fff;padding:14px; display:flex;flex-direction:column;justify-content:flex-end; border:1px solid var(--line);box-shadow:var(--shadow-1);} .sw::before{content:"";position:absolute;inset:0 0 55% 0;pointer-events:none; background:var(--gloss-sheen);opacity:.5;} .sw .nm{font-weight:600;font-size:14px;position:relative;} .sw .hx{font-family:var(--mono);font-size:11px;opacity:.9;position:relative;} /* ── motion — entrances bloom through fluid, then settle ── */ @media (prefers-reduced-motion:no-preference){ .rise{animation:rise .55s var(--ease-out) both;} .rise-2{animation:rise .55s var(--ease-out) .08s both;} .rise-3{animation:rise .55s var(--ease-out) .16s both;} } @keyframes rise{ from{opacity:0;transform:translateY(14px) scale(.995);filter:blur(6px);} 60%{filter:blur(0);} to{opacity:1;transform:none;filter:none;} } @media (prefers-reduced-motion:reduce){ .rise,.rise-2,.rise-3{animation:none;} } @media(max-width:760px){ :root{--fs-display:clamp(30px,8.5vw,44px);} } /* ── keyboard focus — always visible, ink (focus is YOU acting) ── */ :where(button,a,input,textarea,select,[tabindex],[role=button]):focus-visible{ outline:2px solid var(--focus-ring);outline-offset:2px;} /* ── logo theme toggling ── */ .logo-light{display:block;} .logo-dark{display:none;} html[data-theme="dark"] .logo-light{display:none;} html[data-theme="dark"] .logo-dark{display:block;}