/* ============================================================ JUWEL · Liquid Candy (enhanced) — juwel-ds.css Evolved from the Theron Liquid Candy system. JUWEL by Vext Labs. DNA kept: deep grape-ink + candy gloss (saturated gradient body + white top-sheen + soft colored shadow), Geist@900, serif accent, spring motion, the receipt anchor. Enhanced: gem-taxonomy accent names (Topaz/Garnet/Sapphire/Jade/ Amethyst), light + dark first-class, the "AI in the real world" signed-action surfaces. Theme: . Accent per scope: set --accent/--accent-2/--accent-deep (defaults to Topaz). ============================================================ */ :root{ /* ink + paper — LIGHT (grape-black on candy paper) */ --ink:#190E24; --ink-2:rgba(25,14,36,.66); --ink-3:rgba(25,14,36,.40); --ink-4:rgba(25,14,36,.18); --paper:#FFF8FB; --surface:#FFFFFF; --surface-2:#FBEFF6; --surface-3:#F4E3EF; --line:rgba(25,14,36,.10); --line-2:rgba(25,14,36,.06); --receipt-bg:#17101F; --receipt-ink:#EFE7F5; /* candy washes behind everything */ --wash:radial-gradient(120% 90% at 10% -5%,#FFE7F0,transparent 55%), radial-gradient(120% 90% at 96% 0%,#E6F4FF,transparent 52%), radial-gradient(140% 130% at 50% 112%,#FFF1D9,transparent 60%); /* ── gem taxonomy = the candy accents, named ── */ --topaz:#FFB42A; --topaz-2:#FF9A00; --topaz-deep:#FF6A00; --topaz-soft:#FFE6C2; /* brand / amber→burn */ --garnet:#FF8AA6; --garnet-2:#FF5D7E; --garnet-deep:#E23A60; --garnet-soft:#FFDCE5; --sapphire:#6FD4FF; --sapphire-2:#28C2FF; --sapphire-deep:#1AA0FF; --sapphire-soft:#D5F0FF; --jade:#AEEB6E; --jade-2:#8BE04B; --jade-deep:#5FC72B; --jade-soft:#E4F8D2; --amethyst:#C08CFF; --amethyst-2:#A85CFF; --amethyst-deep:#7B2BFF; --amethyst-soft:#EBDDFF; /* semantic */ --accent:var(--topaz); --accent-2:var(--topaz-2); --accent-deep:var(--topaz-deep); --accent-soft:var(--topaz-soft); --ok:#5FC72B; --ok-ink:#8BE04B; /* type */ --ff:'Geist','Inter',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif; --fs-display:clamp(48px,9vw,128px); --fs-h1:clamp(40px,6vw,84px); --fs-h2:clamp(34px,5.2vw,64px); --fs-h3:clamp(22px,2.3vw,30px); --fs-lede:clamp(18px,2.1vw,25px); --fs-body:18px; --fs-small:14.5px; --fs-label:12px; /* space · radius · motion */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:28px; --r-2xl:34px; --r-full:999px; --ease:cubic-bezier(.22,1,.36,1); --bounce:cubic-bezier(.34,1.56,.64,1); --dur:.2s; --shadow:0 28px 60px -30px rgba(25,14,36,.4); --shadow-lg:0 50px 110px -44px rgba(25,14,36,.5); --glow-amber:0 12px 30px -8px rgba(255,106,0,.55); } html[data-theme="dark"]{ --ink:#F6EDFA; --ink-2:rgba(246,237,250,.68); --ink-3:rgba(246,237,250,.42); --ink-4:rgba(246,237,250,.2); --paper:#140A1E; --surface:#1E1230; --surface-2:#271838; --surface-3:#332247; --line:rgba(246,237,250,.12); --line-2:rgba(246,237,250,.06); --receipt-bg:#0E0717; --receipt-ink:#EFE7F5; --topaz-soft:#3A2410; --garnet-soft:#3A1822; --sapphire-soft:#0E2C3D; --jade-soft:#1E3312; --amethyst-soft:#2A183F; --wash:radial-gradient(120% 90% at 10% -5%,rgba(255,93,126,.16),transparent 55%), radial-gradient(120% 90% at 96% 0%,rgba(40,194,255,.14),transparent 52%), radial-gradient(140% 130% at 50% 112%,rgba(168,92,255,.16),transparent 60%); --shadow:0 28px 60px -30px rgba(0,0,0,.7); --shadow-lg:0 50px 110px -44px rgba(0,0,0,.78); } *{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.45;-webkit-font-smoothing:antialiased; background:var(--wash),var(--paper);background-attachment:fixed;font-feature-settings:"ss01","cv11";} ::selection{background:color-mix(in srgb,var(--amethyst-2) 36%,transparent);} /* ── type ── */ .t-display{font-size:var(--fs-display);font-weight:900;letter-spacing:-.05em;line-height:.92;} .t-h1{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.05em;line-height:.94;} .t-h2{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.045em;line-height:.98;} .t-h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;} .t-lede{font-size:var(--fs-lede);font-weight:500;color:var(--ink-2);line-height:1.4;} .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:600;} .serif{font-family:var(--serif);font-style:italic;font-weight:400;} .g-text{background:linear-gradient(95deg,var(--topaz-2),var(--garnet-2) 45%,var(--amethyst-2));-webkit-background-clip:text;background-clip:text;color:transparent;} em.accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amethyst-2);} /* ── the gloss recipe: saturated body + white top-sheen + colored shadow ── */ .gloss{position:relative;overflow:hidden;color:#fff; box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.42);} .gloss::before{content:"";position:absolute;left:0;right:0;top:0;height:46%; background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);pointer-events:none;} /* ══ LIQUID GLASS — the material (Apple glass, candy flavor) ══ Three layers make the material: 1. the pane — deep blur + saturation lift, so candy color from the current beneath floods the glass 2. the light — a specular top edge, like light resting on the upper rim of real glass 3. the lens — a gem-tinted rim that catches color at the edges, where a real lens bends light most */ .lg{position:relative; background:color-mix(in srgb,var(--surface) 50%,transparent); backdrop-filter:blur(22px) saturate(1.9); -webkit-backdrop-filter:blur(22px) saturate(1.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent), 0 24px 48px -26px color-mix(in srgb,var(--amethyst-deep) 26%,rgba(25,14,36,.35));} html[data-theme="dark"] .lg{ background:color-mix(in srgb,var(--surface) 44%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07), 0 28px 56px -28px rgba(0,0,0,.7);} /* the lensing rim — a gradient ring only on the edge, via mask */ .lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1.5px; background:linear-gradient(135deg, color-mix(in srgb,var(--topaz) 55%,transparent), color-mix(in srgb,var(--garnet-2) 30%,transparent) 30%, transparent 52%, color-mix(in srgb,var(--sapphire-2) 26%,transparent) 78%, color-mix(in srgb,var(--amethyst-2) 50%,transparent)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:.5;transition:opacity .5s var(--ease);} .lg:hover::after{opacity:.9;} html[data-theme="dark"] .lg::after{opacity:.4;} html[data-theme="dark"] .lg:hover::after{opacity:.75;} /* candy button */ .cbtn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:16px;letter-spacing:-.01em;color:#fff; padding:15px 28px;border-radius:var(--r-full);border:none;cursor:pointer;overflow:hidden;text-decoration:none; background:linear-gradient(180deg,var(--accent-2),var(--accent-deep)); box-shadow:0 12px 30px -8px color-mix(in srgb,var(--accent-deep) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.55); transition:transform var(--dur) var(--bounce),box-shadow var(--dur) var(--ease),filter var(--dur);} .cbtn::before{content:"";position:absolute;left:6%;right:6%;top:4px;height:42%;border-radius:var(--r-full); background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,0));pointer-events:none;} .cbtn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.03);} .cbtn:active{transform:translateY(0) scale(.99);} .cbtn.lg{padding:17px 32px;font-size:17px;} .cbtn.sm{padding:11px 20px;font-size:15px;} .cbtn.ghost{background:color-mix(in srgb,var(--surface) 72%,transparent);color:var(--ink); box-shadow:0 6px 20px -10px rgba(25,14,36,.3),inset 0 0 0 1.5px var(--line);backdrop-filter:blur(8px);} .cbtn.ghost::before{opacity:.4;} .cbtn.garnet{background:linear-gradient(180deg,var(--garnet-2),var(--garnet-deep));box-shadow:0 12px 30px -8px rgba(226,58,96,.5),inset 0 1px 0 rgba(255,255,255,.5);} .cbtn.sapphire{background:linear-gradient(180deg,var(--sapphire-2),var(--sapphire-deep));box-shadow:0 12px 30px -8px rgba(40,150,255,.5),inset 0 1px 0 rgba(255,255,255,.5);} .cbtn.amethyst{background:linear-gradient(180deg,var(--amethyst-2),var(--amethyst-deep));box-shadow:0 12px 30px -8px rgba(123,43,255,.5),inset 0 1px 0 rgba(255,255,255,.5);} /* eyebrow */ .eyebrow{display:inline-flex;align-items:center;gap:9px;} .eyebrow.pill{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep); background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:var(--r-full);padding:8px 16px;box-shadow:var(--shadow);} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--jade-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--jade-2) 34%,transparent);} /* glossy candy card */ .candy-card{position:relative;border-radius:var(--r-xl);padding:30px 28px 32px;color:#fff;overflow:hidden;min-height:230px; display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(160deg,var(--g,var(--topaz)),var(--gd,var(--topaz-deep))); box-shadow:var(--shadow-lg),inset 0 1.5px 0 rgba(255,255,255,.4);} .candy-card::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);pointer-events:none;} .candy-card .ic{position:absolute;top:24px;left:26px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.26); backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);display:grid;place-items:center;} .candy-card .ic svg{width:22px;height:22px;} .candy-card h3{font-size:27px;font-weight:900;letter-spacing:-.03em;margin:0 0 8px;} .candy-card p{font-size:15px;font-weight:500;opacity:.95;line-height:1.5;margin:0;} /* soft (paper) card */ .card{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5); box-shadow:0 26px 56px -32px rgba(25,14,36,.3),inset 0 0 0 1.5px var(--line-2);} /* chip */ .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;font-weight:600;border-radius:var(--r-full);padding:5px 12px;} .chip.signed{color:var(--ok);background:color-mix(in srgb,var(--jade-2) 16%,transparent);} .chip.signed svg{width:12px;height:12px;} /* the receipt — gravity anchor */ .receipt{background:var(--receipt-bg);border-radius:var(--r-lg);padding:26px 28px;color:var(--receipt-ink);font-family:var(--mono); box-shadow:var(--shadow-lg);max-width:520px;} .receipt .rh{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.18);padding-bottom:13px;margin-bottom:13px;} .receipt .rh .t{font-weight:600;letter-spacing:.1em;font-size:12px;text-transform:uppercase;color:rgba(239,231,245,.6);} .receipt .rh .v{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ok-ink);font-weight:600;} .receipt .rh .v i{width:7px;height:7px;border-radius:50%;background:var(--ok-ink);box-shadow:0 0 10px var(--ok-ink);} .receipt .row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;} .receipt .row .l{color:rgba(239,231,245,.55);} .receipt .sig{margin-top:13px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.18);font-size:12px;word-break:break-all;color:var(--topaz);} /* real-world signed-action sticker (the new direction) */ .action{display:inline-flex;flex-direction:column;gap:9px;background:var(--surface);border-radius:var(--r-md); padding:14px 16px;box-shadow:var(--shadow);border:1.5px solid var(--line-2);} .action .top{display:flex;align-items:center;gap:10px;} .action .a-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;flex-shrink:0; background:linear-gradient(160deg,var(--g,var(--topaz)),var(--gd,var(--topaz-deep)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);} .action .a-ic svg{width:17px;height:17px;} .action .a-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);} .action .a-t{font-size:15px;font-weight:800;letter-spacing:-.01em;} /* gem mark / mascot */ .gemmark{display:inline-grid;place-items:center;border-radius:var(--r-sm);color:#fff; background:linear-gradient(160deg,var(--g,var(--topaz)),var(--gd,var(--topaz-deep)));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),var(--shadow);} .gemmark svg{width:56%;height:56%;} /* swatch */ .sw{border-radius:var(--r-lg);height:140px;position:relative;overflow:hidden;color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end; box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.45);} .sw::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.42),transparent);pointer-events:none;} .sw .nm{font-weight:800;font-size:15px;position:relative;} .sw .hx{font-family:var(--mono);font-size:11px;opacity:.88;position:relative;} /* motion */ @media (prefers-reduced-motion:no-preference){ .rise{animation:rise .6s var(--ease) both;} .rise-2{animation:rise .6s var(--ease) .1s both;} .rise-3{animation:rise .6s var(--ease) .2s both;} } @keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} @media(max-width:760px){ :root{--fs-display:clamp(44px,13vw,80px);} }