/* ============================================================ VINIFY β€” LANDING v1 Patterns: Smoovly (nav, card fan, steps, chip cards, impact), Grovia (tab showcase), Verseo (framed grid, accordion), Nexura. ============================================================ */ :root{ /* ============================================================ BRAND PALETTE Source of truth: Figma "πŸ“• Library - Global", page Color figma.com/design/0Ka9XdrqTWOkiacl1viAVu/?node-id=750-534 Mirrors vinify-frontend/src/styles/base-colors.ts. Use a ramp token directly, or one of the semantic aliases below. ============================================================ */ /* Primary - Red */ --red-900:#4B1129; --red-800:#791C3A; --red-700:#952343; --red-600:#AB284E; --red-500:#BE2C55; --red-400:#D44971; --red-300:#DC6A8B; --red-200:#EDB8C7; --red-100:#F4DDE4; --red-50:#FAF0F3; /* Secondary - Navy */ --navy-900:#28273F; --navy-800:#32304F; --navy-700:#494672; --navy-600:#8787AB; --navy-500:#BCBCD1; --navy-400:#CCCCDD; --navy-300:#DCDCE7; --navy-200:#E7E7EF; --navy-100:#EFEFF4; --navy-50:#F5F5F9; /* Tertiary - Gold */ --gold-900:#473734; --gold-800:#6B5446; --gold-700:#A18060; --gold-600:#C49C71; --gold-500:#E1B37F; --gold-400:#E7C299; --gold-300:#EDD1B2; --gold-200:#F3E1CC; --gold-100:#F9F0E5; --gold-50:#FCF7F2; /* Additional - Green */ --green-900:#004E45; --green-800:#016C58; --green-700:#018065; --green-600:#009F79; --green-500:#58B99D; --green-400:#89CEBA; --green-300:#BCE3D8; --green-200:#CEEAE2; --green-100:#E6F6F1; --green-50:#F7FBFA; /* Additional - Orange */ --orange-900:#733D00; --orange-800:#995200; --orange-700:#BF6800; --orange-600:#D98006; --orange-500:#E89608; --orange-400:#F7AE3B; --orange-300:#FFC766; --orange-200:#FFDC99; --orange-100:#FFEFCC; --orange-50:#FFF8E5; /* Additional - Blue. The library defines no 800 step. */ --blue-900:#0F2B7B; --blue-700:#1845AF; --blue-600:#2369F5; --blue-500:#4B85FA; --blue-400:#73A2FF; --blue-300:#9ABBFD; --blue-200:#C1D4FB; --blue-100:#DFEAFF; --blue-50:#EFF4FF; /* Transparents, as defined in the library */ --navy-800-60:rgb(50 48 79 / .60); --navy-500-52:rgb(188 188 209 / .52); --navy-500-24:rgb(188 188 209 / .24); --navy-100-80:rgb(239 239 244 / .80); --gold-300-80:rgb(237 209 178 / .80); --white:#FFFFFF; --black:#000000; /* ------------------------------------------------------------ SEMANTIC ALIASES - what the page actually reads. Every one resolves to a ramp token above, so the page cannot drift off palette without it showing up here. ------------------------------------------------------------ */ --paper:var(--navy-50); --paper-2:var(--navy-100); --paper-3:var(--navy-200); --surface:var(--white); --placeholder:var(--navy-300); --ink:var(--navy-800); --ink-2:var(--navy-700); --ink-3:var(--navy-600); --wine:var(--red-900); --wine-2:var(--red-800); --burgundy:var(--red-500); --burgundy-deep:var(--red-700); --burgundy-tint:var(--red-50); --gold:var(--gold-600); --gold-2:var(--gold-500); --gold-tint:var(--gold-100); --gold-deep:var(--gold-700); --green:var(--green-800); --green-ink:var(--green-700); --green-tint:var(--green-100); --status:var(--green-500); --blue:var(--blue-700); --blue-tint:var(--blue-100); /* Landing-only. Dark grounds for the near-black full-bleed sections. No library equivalent: navy-900 (#28273F) reads too blue at that scale. */ --cellar:#1B1A28; --cellar-2:#242236; --cellar-3:#2F2D44; --hairline:rgb(50 48 79 / .12); --hairline-soft:rgb(50 48 79 / .07); --hairline-strong:rgb(50 48 79 / .24); --font-display:'Frank Ruhl Libre',Georgia,serif; --font-text:'Source Sans 3',-apple-system,BlinkMacSystemFont,sans-serif; --font-meta:'Source Code Pro',ui-monospace,SFMono-Regular,Menlo,monospace; /* Font weights. Only these are requested from Google Fonts; any other value is synthesised by the browser. */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-text-strong:var(--fw-semibold); /* strong labels in body copy */ --fw-display:var(--fw-bold); /* h1-h3, Frank Ruhl Libre */ --fw-display-heavy:900; /* hero h1 only */ --fs-display-xl:clamp(2.5rem,6vw,5.5rem); --fs-display-l:clamp(1.875rem,3.6vw,3rem); --fs-display-m:clamp(1.3125rem,1.8vw,1.75rem); --fs-lede:clamp(1.0625rem,1.25vw,1.3125rem); --fs-body:clamp(1rem,.3vw,1.0625rem); --fs-small:.9375rem; --fs-card:.9375rem; --lh-card:1.25; --fs-meta:clamp(.6875rem,.2vw,.75rem); --ls-display:-.025em; --lh-display:.9; --ls-h2:-.022em; --lh-h2:1.0; --ls-h3:-.02em; --lh-h3:1.15; --ls-meta:.1em; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --section-sm:clamp(56px,7vw,88px); --section:clamp(80px,9vw,128px); --gutter:clamp(20px,4vw,48px); --container:min(1240px,100% - var(--gutter) * 2); /* radius scale β€” every surface picks one of these xs tags Β· sm inner chrome Β· md tiles & controls Β· lg cards & panels */ --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:12px; --r-pill:100px; --r-btn:var(--r-pill); --r-card:var(--r-lg); --r-panel:var(--r-lg); --r-frame:var(--r-lg); --shadow-card:0 14px 34px -20px rgb(23 22 22 / .24); --shadow-raise:0 22px 50px -24px rgb(23 22 22 / .30); --shadow-float:0 26px 60px -22px rgb(23 22 22 / .34); --shadow-nav:0 6px 24px -12px rgb(23 22 22 / .14); --ease:cubic-bezier(.2,.8,.2,1); --dur-micro:160ms; --dur-ui:280ms; } @media (max-width:1023px){:root{--ls-display:-.03em;--lh-display:.96;--ls-h2:-.025em;--lh-h2:1.06}} @media (max-width:767px){:root{--ls-display:-.02em;--lh-display:1.0;--ls-h2:-.02em;--lh-h2:1.1}} @media (min-width:1920px){:root{font-size:17px;--container:1400px}} /* ---------- BASE ---------- */ [hidden]{display:none!important} *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{background:var(--paper);color:var(--ink);font-family:var(--font-text); font-size:var(--fs-body);line-height:1.6;font-feature-settings:"kern","liga","calt"; -webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul,ol{list-style:none} h1,h2,h3{font-family:var(--font-display);font-weight:700;text-wrap:balance} h1{font-weight:900;font-size:var(--fs-display-xl);letter-spacing:var(--ls-display);line-height:var(--lh-display)} h2{font-size:var(--fs-display-l);letter-spacing:var(--ls-h2);line-height:var(--lh-h2)} h3{font-size:var(--fs-display-m);letter-spacing:var(--ls-h3);line-height:var(--lh-h3)} p{text-wrap:pretty} .lede{font-size:var(--fs-lede);line-height:1.4;letter-spacing:-.02em;color:var(--ink)} .mute{color:var(--ink-3)} .meta{font-family:var(--font-meta);font-size:var(--fs-meta);letter-spacing:var(--ls-meta); color:var(--ink-3);font-weight:400;text-transform:uppercase} .meta--dot::before{content:"β–ͺ";margin-right:.7em;font-size:.8em;vertical-align:2px} /* section eyebrows carry the brand red; on the navy ground they lift to red-400 */ .meta--dot{color:var(--burgundy);font-weight:600} .section--cellar .meta--dot{color:#D44971} .cap{font-style:normal;color:var(--ink-3);font-size:.875rem} em,i{font-style:normal} /* Phosphor sizing */ .ph{font-size:1.15em;line-height:1;vertical-align:-.12em} .pair__ic .ph{font-size:1.4rem} .istat .ic .ph{font-size:1.6rem} .chipcard__mark .ph{font-size:2.4rem} .appwin__side a .ph,.floatchip .ph,.switch .ph{font-size:1.05rem} .mock__row .acts .ph{font-size:.7rem} .invite .ph{font-size:.95rem} .formcard .star .ph{font-size:1.3rem;color:var(--burgundy)} .num{font-variant-numeric:tabular-nums} ::selection{background:var(--burgundy);color:#fff} :focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:var(--r-md)} .skip-link{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 20px;z-index:10000} .skip-link:focus{left:8px;top:8px} .container{width:var(--container);margin-inline:auto;position:relative} .section{padding-block:var(--section);position:relative} .section--tight{padding-block:var(--section-sm)} .section--tonal{background:var(--paper-2)} .section--white{background:var(--surface)} .section--cellar{overflow:visible;--paper:var(--cellar);--surface:var(--cellar-2);--paper-2:var(--cellar-2); --ink:#F5F5F9;--ink-2:#BCBCD1;--ink-3:#8787AB;--placeholder:var(--cellar-3); --hairline:rgb(255 255 255 / .12);--hairline-soft:rgb(255 255 255 / .07); --hairline-strong:rgb(255 255 255 / .24);background:var(--paper);color:var(--ink)} .head-c{text-align:center;margin:0 auto var(--space-8)} #toolkit{padding-top:calc(var(--section) - 32px)} .head-c .meta{display:block;margin-bottom:var(--space-4)} .head-c h2{margin:0 auto var(--space-4);max-width:22ch} .head-c h2.head-c__wide{max-width:32ch} .head-c p{color:var(--ink-2);max-width:56ch;margin-inline:auto;line-height:1.48;letter-spacing:-.02em} .head-l{display:grid;gap:var(--space-4);margin-bottom:var(--space-8);max-width:58ch} .head-split{display:grid;gap:var(--space-5);margin-bottom:var(--space-8);align-items:end} @media (min-width:900px){.head-split{grid-template-columns:1.25fr .75fr}} .head-split p:not(.lede){color:var(--ink-2)} .head-split p{line-height:1.48;letter-spacing:-.02em} /* ============================================================ BUTTONS β€” Verseo / Smoovly ============================================================ */ /* Verseo: 4px radius, 48px tall, 15px/400, label-swap on hover */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; height:48px;padding:14px 26px;border-radius:var(--r-btn); font-size:var(--fs-card);font-weight:500;letter-spacing:-.01em;line-height:1.2;white-space:nowrap; transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease)} .btn__swap{display:block;overflow:hidden;height:1.2em;position:relative} .btn__swap span{display:block;transition:transform .38s cubic-bezier(.2,.8,.2,1)} @media (hover:hover){.btn:hover .btn__swap span{transform:translateY(-100%)}} .btn--sm{height:42px;padding:12px 18px;font-size:.875rem} /* primary is red in v1.1 β€” the dark nav overrides it back to white below */ .btn-dark{background:var(--burgundy);color:#fff} .btn-dark:hover{background:var(--burgundy-deep)} .btn-accent{background:var(--burgundy);color:#fff} .btn-accent:hover{background:var(--burgundy-deep)} .btn-soft{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px rgb(50 48 79 / .14)} .btn-soft:hover{box-shadow:0 0 0 1px rgb(50 48 79 / .34)} .section--cellar .btn-soft{background:rgb(255 255 255 / .1);color:#fff;box-shadow:none} .link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:var(--fs-small); transition:gap var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .link-arrow:hover{gap:.8em;color:var(--burgundy)} /* ============================================================ NAV β€” Smoovly: full-width bar, links right, black pill CTA ============================================================ */ /* rests as a slim, near-transparent bar; turns to dark glass only once collapsed */ .header{position:fixed;inset:0 0 auto;z-index:1000;padding-inline:0; display:flex;justify-content:center;transition:padding .5s var(--ease)} .header.is-stuck{padding-top:10px;padding-inline:var(--gutter)} .header__inner{width:100%;display:flex;align-items:center; gap:20px;padding:8px clamp(20px,4vw,48px);border-radius:0;color:var(--ink); background:rgb(255 255 255 / .50); backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%); box-shadow:inset 0 -1px 0 rgb(23 22 22 / .07); transition:width .55s var(--ease),padding .45s var(--ease),border-radius .45s var(--ease), box-shadow .45s var(--ease),background .45s var(--ease),color .45s var(--ease)} /* collapsed: shrinks to a measured width so it can actually animate */ .header.is-stuck .header__inner{width:var(--nav-w,760px);max-width:100%;padding:5px 5px 5px 20px; border-radius:var(--r-pill);color:#fff;background:rgb(12 11 15 / .72); backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12), 0 12px 36px -16px rgb(0 0 0 / .55)} .header.is-stuck .nav{margin-inline:auto} /* no underline on hover β€” colour only */ .header .nav a::after{display:none} .header .nav a{color:var(--ink-2)} @media (hover:hover){.header .nav a:hover{color:var(--ink)}} .header .nav-rule{background:var(--hairline-strong)} .header .btn-dark{background:var(--burgundy);color:#fff;border-radius:var(--r-pill);height:38px;padding:0 20px;font-size:.875rem} @media (hover:hover){.header .btn-dark:hover{background:var(--burgundy-deep)}} .header .menu-toggle{background:var(--ink);color:#fff} /* inverted once collapsed */ .header.is-stuck .logo{color:#fff} .header.is-stuck .nav a{color:rgb(255 255 255 / .76)} @media (hover:hover){.header.is-stuck .nav a:hover{color:#fff}} .header.is-stuck .nav-rule{background:rgb(255 255 255 / .3)} .header.is-stuck .menu-toggle{background:#fff;color:var(--ink)} /* ---- pill button, dark-ground pair ------------------------------------- The collapsed nav and the ask dock sit on the same smoked-glass ground, so they share one geometry rule and one filled/outlined pair. Adding a selector here is the only way to get the component β€” never restate the declarations, that is how the two drifted apart in the first place. */ .header .btn-dark,.header__login,.ask-btn,.ask-link{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:38px;padding:0 20px;border-radius:var(--r-pill); font-size:.875rem;font-weight:500;letter-spacing:-.01em;line-height:1.2; white-space:nowrap;text-decoration:none; transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease)} /* filled */ .header.is-stuck .btn-dark,.ask-btn--primary{background:#fff;color:var(--ink);box-shadow:none} @media (hover:hover){.header.is-stuck .btn-dark:hover,.ask-btn--primary:hover{ background:rgb(255 255 255 / .88)}} /* outlined */ .header.is-stuck .header__login,.ask-link{background:transparent;color:rgb(255 255 255 / .86); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3)} @media (hover:hover){.header.is-stuck .header__login:hover,.ask-link:hover{ color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6)}} .logo{display:inline-flex;align-items:center;color:var(--ink)} .logo svg{display:block;width:auto;height:26px} .nav{display:flex;gap:24px;margin-inline:auto} .nav a{font-size:var(--fs-small);font-weight:500;color:var(--ink-2);position:relative} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease)} @media (hover:hover){.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1)}} .nav-rule{display:none} .menu-toggle{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center; border-radius:50%;background:var(--ink);color:#fff} .menu-toggle span{display:block;width:16px;height:1.5px;background:currentColor;position:relative; border-radius:var(--r-xs);transition:background .2s var(--ease)} .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px; background:currentColor;border-radius:var(--r-xs); transition:transform .38s cubic-bezier(.2,.8,.2,1),top .22s var(--ease)} .menu-toggle span::before{top:-5px}.menu-toggle span::after{top:5px} .menu-toggle[aria-expanded="true"] span{background:transparent} .menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media (max-width:1023px){ .nav,.nav-rule,.header__cta{display:none} .menu-toggle{display:flex} .sheet{position:fixed;inset:0;z-index:999;background:var(--surface); padding:100px var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); /* gap:0 β€” the rows space themselves with padding, so the flex gap can't add extra room above a label and make the two sides uneven */ display:flex;flex-direction:column;gap:0;opacity:0;pointer-events:none; /* the fade waits for the rows to leave, so closing reads in reverse */ transition:opacity .3s var(--ease) .16s,visibility 0s linear .46s;visibility:hidden} .sheet.is-open{opacity:1;pointer-events:auto;visibility:visible; transition:opacity .3s var(--ease),visibility 0s} .sheet a:not(.btn){font-family:var(--font-display);font-size:2rem;letter-spacing:-.03em; /* line-height 1 removes the serif's uneven half-leading, so the padding reads the same above and below the label */ line-height:1;padding-block:20px;border-bottom:1px solid var(--hairline)} .sheet .btn{margin-top:auto;width:100%} /* rows rise in staggered on open, and drop out in reverse on close */ .sheet > *{opacity:0;transform:translateY(16px); transition:opacity .26s var(--ease),transform .34s cubic-bezier(.2,.8,.2,1)} .sheet > *:nth-child(1){transition-delay:.15s} .sheet > *:nth-child(2){transition-delay:.12s} .sheet > *:nth-child(3){transition-delay:.09s} .sheet > *:nth-child(4){transition-delay:.06s} .sheet > *:nth-child(5){transition-delay:.03s} .sheet > *:nth-child(6){transition-delay:0s} .sheet.is-open > *{opacity:1;transform:none; transition:opacity .4s var(--ease),transform .5s cubic-bezier(.2,.8,.2,1)} .sheet.is-open > *:nth-child(1){transition-delay:.06s} .sheet.is-open > *:nth-child(2){transition-delay:.11s} .sheet.is-open > *:nth-child(3){transition-delay:.16s} .sheet.is-open > *:nth-child(4){transition-delay:.21s} .sheet.is-open > *:nth-child(5){transition-delay:.26s} .sheet.is-open > *:nth-child(6){transition-delay:.32s} } @media (min-width:1024px){.sheet{display:none}} /* ============================================================ HERO β€” Smoovly card fan ============================================================ */ .hero{padding-top:clamp(140px,17vh,190px);padding-bottom:var(--section-sm); text-align:center;position:relative;overflow:hidden;background:var(--surface)} .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(38% 26% at 18% 30%, rgb(196 156 113 / .16), transparent 70%), radial-gradient(44% 32% at 84% 22%, rgb(190 44 85 / .10), transparent 70%), radial-gradient(60% 40% at 50% 96%, rgb(94 18 38 / .10), transparent 72%), linear-gradient(180deg,var(--surface),var(--paper)); mask-image:linear-gradient(180deg,#000 72%,transparent)} /* faint dot field, same material language as the rest of the page */ .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgb(23 22 22 / .07) 1px,transparent 1px);background-size:26px 26px; mask-image:radial-gradient(58% 46% at 50% 34%,#000,transparent 75%)} .hero__pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px; border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--hairline), var(--shadow-card); font-size:.8125rem;margin-bottom:var(--space-5);white-space:nowrap} .hero__fine-extra{display:none} .hero__pill b{color:var(--gold);letter-spacing:.06em;font-weight:400} .hero__pill span{color:var(--ink-2)} .hero__pill em{font-style:normal;width:1px;height:14px;background:var(--hairline);display:block} /* the three-fact pill can't hold a line on a phone β€” keep the rating and move the rest into the fine print under the buttons */ @media (max-width:680px){ .hero__pill em,.hero__pill > span:nth-of-type(n+2){display:none} .hero__fine-extra{display:block;margin-top:6px} } .hero .fl{position:absolute} .hero .fl{padding:14px 18px;gap:13px;border-radius:var(--r-md)} .hero .fl .ph{width:34px;height:34px;border-radius:var(--r-sm);font-size:1.05rem} .hero .fl b{font-size:.875rem} .hero .fl span{font-size:.6875rem} .hero .fl--a{top:15%;left:3%} .hero .fl--b{top:31%;right:3%} @media (max-width:1180px){.hero .fl{display:none}} .hero .container{z-index:2} .hero .meta{display:block;margin-bottom:var(--space-5)} .hero h1{max-width:16ch;margin:0 auto var(--space-5)} .hero h1 em{font-style:normal;color:var(--burgundy)} .hero__lede{max-width:54ch;margin:0 auto var(--space-7)} .hero__lede i{font-family:var(--font-text);font-style:normal;color:inherit} .hero__cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4)} .hero__fine{font-family:var(--font-text);font-size:var(--fs-small);letter-spacing:0;color:var(--ink-3)} /* ---------- CELLAR APP WINDOW (hero) ---------- A trimmed, landing-legible reading of the real Vinify desktop UI: the same chrome, tags, steppers and drink windows, with the column count and card count cut back to what survives at hero scale. */ .appwin{position:relative;text-align:left;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--hairline);overflow:hidden; box-shadow:0 40px 90px -40px rgb(23 22 22 / .38), 0 2px 6px rgb(23 22 22 / .05)} .appwin__bar{display:flex;align-items:center;gap:var(--space-4);padding:12px 16px; border-bottom:1px solid var(--hairline-soft);background:var(--paper)} .appwin__dots{display:flex;gap:6px} .appwin__dots i{width:9px;height:9px;border-radius:50%;display:block} .appwin__dots i:nth-child(1){background:#E5786F}.appwin__dots i:nth-child(2){background:#E8C069} .appwin__dots i:nth-child(3){background:#7FC08E} .appwin__url{flex:1;max-width:280px;margin-inline:auto;height:24px;border-radius:var(--r-md); background:var(--paper-2);display:grid;place-items:center; font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-3)} /* below desktop the window is shown as a scaled-down desktop screen, not reflowed β€” it is meant to read as a desktop app */ .appwin-scaler{position:relative;overflow:visible;padding-top:10px; margin-top:calc(clamp(44px,6vw,80px) - 10px); /* Declared, not measured. fitAppwin() sizes the scaler from this instead of reading .appwin's height, because that height moves when the webfonts land and the resulting re-fit was the page's single largest layout shift. Values are the measured heights at each breakpoint. */ --appwin-h:716px} @media (max-width:640px){.appwin-scaler{--appwin-h:686px}} @media (min-width:1920px){.appwin-scaler{--appwin-h:722px}} .appwin-scaler .appwin{width:1180px;transform-origin:top left; transform:translateX(var(--appwin-x,0px)) scale(var(--appwin-scale,1))} /* the layer the pinned window drifts on β€” the whole composition, chips included, creeps upward for the length of the pin so the page still feels like it scrolls */ .appwin-drift{position:relative;will-change:transform} /* hero chips ride with the pinned window, one pair per scene (stacked, cross-faded) */ .appwin-scaler .fl{pointer-events:none} .js .appwin-scaler .fl[data-for]{opacity:0;visibility:hidden} .js .appwin-scaler .fl[data-for].is-live{opacity:1;visibility:visible} .appwin-scaler .fl--a{top:96px;left:-104px;right:auto} .appwin-scaler .fl--b{top:auto;bottom:-26px;right:-76px;left:auto} .appwin-scaler .fl--b .ph{background:var(--blue-tint);color:var(--blue)} /* the chips break the window edge β€” below this the margins vanish, so do they */ @media (max-width:1479px){.hero .fl{display:none}} /* --- product top bar --- */ .aw-top{display:flex;align-items:center;gap:20px;height:54px;padding:0 18px; border-bottom:1px solid var(--hairline-soft);background:var(--surface)} .aw-top__logo{display:flex;align-items:center} .aw-top__logo img{display:block;width:auto;height:calc(32px * var(--s,.82))} .aw-top__search{flex:1;max-width:420px;height:34px;border-radius:var(--r-md);background:var(--paper); border:1px solid var(--hairline-soft);display:flex;align-items:center;gap:9px;padding-inline:12px; font-size:.8125rem;color:var(--ink-3)} .aw-top__search .ph{font-size:.95rem} .aw-top__nav{display:flex;gap:22px;margin-left:auto;font-size:.8125rem;font-weight:600;color:var(--ink-2)} .aw-top__nav .is-on{color:var(--ink)} .aw-top__av{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--burgundy);color:#fff; display:grid;place-items:center;font-size:.625rem;font-weight:600;letter-spacing:.02em} /* --- body: rail | tree | stage --- */ .appwin__body{position:relative;display:grid;grid-template-columns:64px 180px 1fr;height:600px} .aw-rail{display:flex;flex-direction:column;gap:2px;padding:10px 6px; border-right:1px solid var(--hairline-soft);background:var(--surface)} .aw-rail span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px; border-radius:var(--r-md);color:var(--ink-3)} .aw-rail .ph{font-size:1.05rem} .aw-rail em{font-size:.5rem;letter-spacing:.01em;font-weight:600} .aw-rail .is-on{background:var(--paper-2);color:var(--ink)} .aw-rail__end{margin-top:auto} .aw-tree{display:flex;flex-direction:column;gap:1px;padding:12px 8px; border-right:1px solid var(--hairline-soft);background:var(--paper)} .aw-tree span{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--r-md); font-size:.78125rem;color:var(--ink-2);white-space:nowrap} .aw-tree .ph{font-size:.9rem;color:var(--ink-3);flex:none} .aw-tree u{margin-left:auto;font-size:.55rem;color:var(--ink-3);text-decoration:none} .aw-tree .is-on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-card)} .aw-tree .is-open{color:var(--ink)} .aw-tree .l2{padding-left:22px}.aw-tree .l3{padding-left:36px} /* indent guides: each nested row draws its own segment, so consecutive siblings join into one continuous line down the group */ .aw-tree .l2,.aw-tree .l3{position:relative} .aw-tree .l2::before,.aw-tree .l3::before,.aw-tree .l3::after{content:'';position:absolute; top:-2px;bottom:-2px;width:1px;background:var(--hairline-soft)} .aw-tree .l2::before,.aw-tree .l3::before{left:16px} .aw-tree .l3::after{left:29px} /* --- stage --- */ .aw-stage{position:relative;overflow:hidden;background:var(--paper)} .aw-scene{position:absolute;inset:0;padding:13px 22px 18px;display:flex;flex-direction:column;gap:13px} .js .aw-scene{opacity:0;visibility:hidden} .aw-scene.is-on{opacity:1;visibility:visible} .aw-scene__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)} .aw-scene__head h4{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em; line-height:1.1;color:var(--ink)} .aw-btns{display:flex;gap:8px} .aw-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:12px; border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline-soft); font-size:.75rem;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-card)} .aw-btn .ph{font-size:.85rem} .aw-btn--go{background:var(--burgundy);border-color:var(--burgundy);color:#fff} .aw-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff} .aw-btn--ic{padding-inline:8px} /* ===== scene A Β· bento ===== */ .aw-bento{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.5fr 1fr; grid-template-rows:1fr 1fr;gap:11px} .aw-card{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg); padding:13px 15px;display:flex;flex-direction:column;gap:10px;min-height:0;box-shadow:var(--shadow-card)} .aw-card--value{grid-row:span 2} .aw-card__t{display:flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;color:var(--ink)} .aw-card__t .ph{font-size:.95rem;color:var(--burgundy)} .aw-card__t u{margin-left:auto;font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);text-decoration:none} .aw-kpis{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;align-content:space-evenly} .aw-kpis span{display:flex;flex-direction:column;gap:2px;padding-left:11px;border-left:2px solid var(--paper-3)} .aw-kpis em{font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3)} .aw-kpis b{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em; line-height:1;font-variant-numeric:tabular-nums} .aw-val{display:grid;grid-template-columns:1fr 1fr;gap:14px} .aw-val span{display:flex;flex-direction:column;gap:3px} .aw-val em{display:flex;align-items:center;gap:6px;font-family:var(--font-meta);font-size:.5625rem; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* legend keys are upright bars that read as the plot lines they label: buying price is dashed, market value solid (Figma 33826:14672) */ .aw-val .ind{width:2px;height:11px;border-radius:100px;display:block;flex:0 0 auto} .aw-val .ind--buy{background:linear-gradient(var(--gold) 0 37.5%,transparent 37.5% 62.5%,var(--gold) 62.5%)} .aw-val .ind--mkt{background:var(--blue)} .aw-val b{font-family:var(--font-display);font-weight:700;font-size:1.625rem;letter-spacing:-.035em; line-height:1;font-variant-numeric:tabular-nums} .aw-val u{display:inline-flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:600; text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap} .aw-val u.up{color:var(--green-ink)}.aw-val u.dn{color:var(--burgundy)} .aw-val .amt{font-style:normal;color:var(--ink-2);font-weight:500} /* solid delta triangles, as drawn in Figma */ .aw-val .tri{width:0;height:0;flex:0 0 auto; border-left:3.5px solid transparent;border-right:3.5px solid transparent} .aw-val u.up .tri{border-bottom:5px solid currentColor} .aw-val u.dn .tri{border-top:5px solid currentColor} /* the plot is gridded vertically and labelled on the right, as in Figma β€” --gut reserves the right-hand column the value labels sit in */ /* --gut is the right-hand column for value labels, --lbl the bottom row for dates. Gridlines stop where the date row starts, exactly as in Figma, so the labels never sit on top of the lines. */ .aw-chart{position:relative;flex:1;min-height:0;margin-top:2px;--gut:30px;--lbl:20px;--padl:0px} .aw-chart__grid{position:absolute;inset:0 var(--gut) var(--lbl) var(--padl);display:flex;justify-content:space-between} .aw-chart__grid i{display:block;width:1px;height:100%;background:var(--hairline-soft)} /* Vectors sit 27.5px / 22px inside the 174px gridline box in the source design. An is a replaced element, so `bottom` with `height:auto` is ignored and it collapses to its intrinsic ratio β€” the height has to be stated. */ .aw-chart svg{position:absolute;left:var(--padl);top:calc(15.8% - 3px); width:calc(100% - var(--gut) - var(--padl));height:calc(71.6% - 14px);overflow:visible} .aw-chart .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} .aw-chart .ln--buy{stroke:var(--gold);stroke-dasharray:5 4} .aw-chart .ln--mkt{stroke:var(--blue)} .aw-chart__x{position:absolute;left:var(--padl);right:var(--gut);bottom:0;display:flex;justify-content:space-between; align-items:center;height:var(--lbl); font-family:var(--font-meta);font-size:.5rem;letter-spacing:.08em;color:var(--ink-3)} .aw-chart__y{position:absolute;right:0;top:0;bottom:var(--lbl);width:var(--gut); display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end; font-family:var(--font-meta);font-size:.5rem;letter-spacing:.08em;color:var(--ink-3)} .aw-chart__x em,.aw-chart__y em{font-style:normal} .aw-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px; border-radius:var(--r-md);background:var(--paper-2)} .aw-seg b{position:relative;z-index:1;text-align:center;padding:5px 0;font-size:.6875rem; font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums} .aw-seg b.is-on{color:var(--ink)} /* the pill tracks the active slot β€” --slot is the 0-based index of .is-on */ .aw-seg{--slot:1} .aw-seg__pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(25% - 3px);border-radius:var(--r-sm); background:var(--surface);box-shadow:var(--shadow-card); translate:calc(var(--slot) * (100% + 2px)) 0} .aw-reg{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2px} .aw-reg li{position:relative;display:flex;align-items:center;gap:8px;padding:2px 0 6px;font-size:.78125rem} .aw-reg li i{font-family:var(--font-meta);font-size:.5625rem;color:var(--ink-3);width:8px} .aw-reg li img{width:15px;height:11px;object-fit:cover;border-radius:1px;flex:none} .aw-reg li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)} .aw-reg li b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)} .aw-reg--plain li span{padding-left:2px} .aw-reg li u{position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:#EDB8C7; text-decoration:none;transform-origin:left} /* the list reads first, the donut sits under it and carries a heavier ring */ .aw-dw{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--sp-16,13px)} .aw-donut{position:relative;flex:1;min-height:0;align-self:center;aspect-ratio:1;max-width:100%} .aw-donut svg{width:100%;height:100%;transform:rotate(-90deg)} .aw-donut circle{fill:none;stroke-width:15} .aw-dwl{display:flex;flex-direction:column;gap:var(--sp-8,7px);flex:0 0 auto} .aw-dwl li{display:flex;align-items:center;gap:var(--sp-8,7px);font-size:.75rem;color:var(--ink-2);white-space:nowrap} .aw-dwl li img{width:14px;height:14px;flex:none} .aw-dwl li i{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums} .aw-dwl li span{flex:1} .aw-dwl li b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)} /* ===== scene B Β· all wines ===== */ .aw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .aw-stats span{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto; column-gap:10px;align-items:center;background:var(--surface);border:1px solid var(--hairline-soft); border-radius:var(--r-md);padding:9px 12px} .aw-stats .ph{grid-row:span 2;width:30px;height:30px;border-radius:var(--r-sm);background:var(--paper-2); display:grid;place-items:center;font-size:.95rem;color:var(--ink-2)} .aw-stats em{font-family:var(--font-meta);font-size:.5rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);align-self:end} .aw-stats b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.03em; line-height:1.1;font-variant-numeric:tabular-nums;align-self:start} .aw-filters{display:flex;gap:8px;align-items:center} .aw-find{flex:0 0 190px;height:31px;border-radius:var(--r-md);background:var(--surface); border:1px solid var(--hairline-soft);display:flex;align-items:center;gap:8px;padding-inline:11px; font-size:.75rem;color:var(--ink-3)} .aw-drop{height:31px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline-soft); display:inline-flex;align-items:center;gap:7px;padding-inline:11px;font-size:.75rem; font-weight:600;color:var(--ink-2)} .aw-drop u{color:var(--ink-3);font-size:.65rem} .aw-find .ph,.aw-drop .ph{font-size:.85rem} .aw-tbl{flex:1;min-height:0;background:var(--surface);border:1px solid var(--hairline-soft); border-radius:8px 8px 0 0;overflow:hidden} .aw-tbl__h,.aw-row{display:grid; grid-template-columns:1fr 92px 62px 78px 78px 84px 172px; gap:10px;align-items:center;padding:0 15px} .aw-tbl__h{height:31px;background:var(--surface);border-bottom:1px solid var(--hairline-soft); font-family:var(--font-meta);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .aw-tbl__h .r,.aw-row .r{text-align:right} .aw-tbl__h .c,.aw-row .c{text-align:center} .aw-row{height:51px;border-bottom:1px solid var(--hairline-soft);font-size:.78125rem; font-variant-numeric:tabular-nums;color:var(--ink-2)} .aw-row .p{display:grid;grid-template-columns:26px 1fr;column-gap:10px;align-items:center;min-width:0} .aw-row .sw{grid-row:span 2;width:26px;height:34px;border-radius:var(--r-sm);background:#F1DDE2; overflow:hidden;display:grid;place-items:end center} .aw-row .sw.white{background:#F3EEDC}.aw-row .sw.rose{background:#F7E4E6} .aw-row .sw img{height:40px;width:auto;max-width:none;object-fit:contain;mix-blend-mode:multiply} .aw-row .p b{font-weight:600;font-size:.8125rem;letter-spacing:-.01em;color:var(--ink);align-self:end; line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aw-row .p em{font-size:.6875rem;color:var(--ink-3);align-self:start;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aw-row .q{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;color:var(--ink)} .aw-row .q u{width:19px;height:19px;border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink-2); display:grid;place-items:center;font-size:.6875rem;text-decoration:none;line-height:1} .aw-row .lk{display:flex;align-items:center;justify-content:flex-end;gap:5px} .aw-row .lk .ph{font-size:.7rem;color:var(--ink-3)} .aw-row .mk{background:var(--blue-tint);color:var(--blue);font-weight:600; border-radius:var(--r-sm);padding:4px 7px;margin-right:-7px} .dw{font-family:var(--font-meta);font-size:.625rem;letter-spacing:.02em;font-weight:500} .dw--ok{color:var(--green-ink)}.dw--wait{color:#BF6800}.dw--late{color:var(--burgundy)} .tg{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; vertical-align:middle;font-size:.6875rem;font-weight:600;padding:3px 9px;border-radius:var(--r-pill)} /* Category palette from the library set β€” the label is always ink, only the ground carries the colour (the one exception there is "Other", navy/white). */ .tg--pink{background:#F9B3C7;color:#32304F} /* Red wine */ .tg--blue{background:#DFEAFF;color:#32304F} /* Alcohol free */ .tg--gold{background:#FCF2BF;color:#32304F} /* White wine */ .tg--peach{background:#FAD5B4;color:#32304F} /* Orange */ .tg--violet{background:#DBD9F5;color:#32304F} /* Liquor */ .tg--rose{background:#FBDCED;color:#32304F} /* RosΓ© */ .aw-tbl__f{display:flex;align-items:center;gap:10px;padding:0 4px; font-family:var(--font-meta);font-size:.5rem;letter-spacing:.08em;color:var(--ink-3)} .aw-tbl__f .sync{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--green-ink)} .aw-tbl__f .sync i{width:6px;height:6px;border-radius:50%;background:var(--status);display:block} /* ===== scene C Β· wine side modal ===== */ .aw-modal{position:absolute;left:0;right:0;bottom:0;top:49px;z-index:20;pointer-events:none} .js .aw-modal:not(.is-on){display:none} .aw-modal.is-on{visibility:visible} .aw-modal__dim{position:absolute;inset:0;background:rgb(35 33 55 / .93)} .aw-modal__ctl{position:absolute;left:calc(38% - 74px);top:24px;display:flex;flex-direction:column;gap:12px} .aw-modal__ctl u{width:38px;height:38px;border-radius:50%;background:rgb(255 255 255 / .1); border:1px solid rgb(255 255 255 / .14);color:#fff;display:grid;place-items:center; font-size:1rem;text-decoration:none} .aw-panel{position:absolute;right:0;top:0;bottom:0;width:62%;background:var(--paper); display:flex;flex-direction:column;gap:12px;padding:16px 20px 18px;overflow:hidden} .aw-panel__top{display:flex;justify-content:flex-end;gap:8px} .aw-panel__id{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start} .aw-panel__id .sw{width:64px;height:84px;border-radius:var(--r-md);background:#F1DDE2;overflow:hidden; display:grid;place-items:end center} .aw-panel__id .sw img{height:96px;width:auto;max-width:none;object-fit:contain;mix-blend-mode:multiply} .aw-panel__id h5{font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.03em; line-height:1.2;color:var(--ink);margin:6px 0 4px} .aw-panel__geo{display:flex;align-items:center;gap:7px;font-size:.78125rem;color:var(--ink-3)} .aw-panel__geo img{width:15px;height:11px;object-fit:cover;border-radius:1px} .aw-note{margin-top:9px;background:var(--paper-2);border-radius:var(--r-md);padding:9px 12px; font-size:.78125rem;line-height:1.35;color:var(--ink-2)} .aw-tabs{position:relative;display:flex;gap:20px;border-bottom:1px solid var(--hairline-soft); font-size:.8125rem;font-weight:600;color:var(--ink-3)} .aw-tabs b{padding-bottom:9px;font-weight:600} .aw-tabs b.is-on{color:var(--burgundy)} .aw-tabs__ink{position:absolute;left:0;bottom:-1px;height:2px;width:52px;background:var(--burgundy); border-radius:1px} .aw-pane{position:absolute;left:20px;right:20px;bottom:18px;top:236px; display:flex;flex-direction:column;gap:10px} .js .aw-pane{opacity:0;visibility:hidden} .aw-pane.is-on{opacity:1;visibility:visible} .aw-mkt{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);padding:13px 15px} .aw-mkt__h{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--ink);margin-bottom:12px} .aw-mkt__h .ph{color:var(--burgundy);font-size:.95rem} .aw-mkt__h em{font-size:.75rem;font-weight:400;color:var(--ink-3)} .aw-mkt__h .aw-btn{margin-left:auto} .aw-mkt__g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .aw-mkt__g span{display:flex;flex-direction:column;gap:2px;padding-left:11px;border-left:1px solid var(--hairline-soft)} .aw-mkt__g span:first-child{padding-left:0;border-left:0} .aw-mkt__g b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.03em; line-height:1.1;font-variant-numeric:tabular-nums} .aw-mkt__g em{font-size:.6875rem;color:var(--ink-3)} .aw-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--surface); border:1px solid var(--hairline-soft);border-radius:var(--r-lg);padding:13px 15px} .aw-fields--3{grid-template-columns:1.6fr 1fr 1fr} .aw-fields span{display:flex;flex-direction:column;gap:6px} .aw-fields em{font-size:.75rem;font-weight:600;color:var(--ink)} .aw-fields u{height:34px;border-radius:var(--r-md);background:var(--paper-2);display:flex;align-items:center; gap:7px;padding-inline:12px;font-size:.8125rem;color:var(--ink-2);text-decoration:none; font-variant-numeric:tabular-nums} .aw-fields u.lk{justify-content:space-between} .aw-fields u .ph{color:var(--ink-3);font-size:.85rem} .aw-ratio{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg); padding:11px 15px 13px} .aw-ratio .h,.aw-ratio .v{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:12px;align-items:center} .aw-ratio .h{font-family:var(--font-meta);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);padding-bottom:8px;border-bottom:1px solid var(--hairline-soft)} .aw-ratio .v{padding-top:9px;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums} .aw-ratio .v b{font-weight:600;color:var(--ink)} .aw-ratio .v u{color:var(--ink-3);text-decoration:none} .aw-ratio .r{text-align:right} .aw-week{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--surface); border:1px solid var(--hairline-soft);border-radius:var(--r-lg);padding:11px 15px} .aw-week span{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:1px solid var(--hairline-soft)} .aw-week span:first-child{padding-left:0;border-left:0} .aw-week em{font-family:var(--font-meta);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .aw-week b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.03em; line-height:1.1;font-variant-numeric:tabular-nums} .aw-log{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-lg); overflow:hidden} .aw-log__h,.aw-log__r{display:grid;grid-template-columns:74px 1fr 46px 54px 96px 88px 54px; gap:10px;align-items:center;padding:0 15px} .aw-log__h{height:31px;background:var(--paper);border-bottom:1px solid var(--hairline-soft); font-family:var(--font-meta);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .aw-log__r{height:38px;border-bottom:1px solid var(--hairline-soft);font-size:.78125rem; color:var(--ink-2);font-variant-numeric:tabular-nums} .aw-log__r:last-child{border-bottom:0} .aw-log .r{text-align:right}.aw-log .c{text-align:center} .aw-log .c .ph{font-size:.9rem;color:var(--ink-3)} .bg{display:inline-block;font-size:.625rem;font-weight:600;letter-spacing:.02em; padding:3px 9px;border-radius:var(--r-pill)} .bg--rem{background:#F7DDE5;color:#8A2148} .bg--sold{background:#DFEAFF;color:#1845AF} .bg--add{background:#DCEFE7;color:#016C58} /* the hero window keeps a light UI even when a chapter inverts */ .appwin{--paper:#F5F5F9;--surface:#FFFFFF;--paper-2:#EFEFF4;--paper-3:#E7E7EF; --ink:#32304F;--ink-2:#6B6985;--ink-3:#8787AB; --hairline:rgb(50 48 79 / .12);--hairline-soft:rgb(50 48 79 / .09);color:var(--ink)} /* ============================================================ THE WINDOW IS A PICTURE OF THE APP, SO IT SPEAKS THE APP'S VOICE β€” not the landing's. The editorial register (display serif numerals, Source Code Pro meta) belongs to the page around the window; inside it everything is Source Sans on the product's own tokens (Figma 33826:14672). ============================================================ */ .appwin,.xl{ /* greys already match the product; the accents did not */ --gold:#E89608; /* Additional/Orange/500 β€” buying price */ --blue:#2369F5; /* Additional/Blue/600 β€” market value */ --blue-tint:#EAF1FE; --green-ink:#009F79; /* Additional/Green/600 */ /* ---- MOCK SCALE ---------------------------------------------------- The window is a 1440px app viewport shown inside a 1180px frame, so the UI renders at: --s = 1180 / 1440 = 0.82 That single ratio is the only assumption here. Everything below is a Figma measurement times --s β€” type sizes, line heights, tracking and spacing, which are fixed tokens in the design. Card and column WIDTHS are deliberately not scaled: every card in these nodes is `size-full`, i.e. fluid, so its width comes from this bento's layout while its type and rhythm come from the scale above. -------------------------------------------------------------------- */ --s:.82; --f-body:calc(14px * var(--s)); /* B0 Regular/Semibold */ --f-value:calc(26px * var(--s)); /* A3 Semibold */ --lh-body:calc(20px * var(--s)); --lh-value:calc(24px * var(--s)); --tr-value:calc(-.26px * var(--s)); --sp-2:calc(2px * var(--s)); --sp-4:calc(4px * var(--s)); --sp-8:calc(8px * var(--s)); --sp-10:calc(10px * var(--s)); --sp-12:calc(12px * var(--s)); --sp-16:calc(16px * var(--s)); --sp-20:calc(20px * var(--s)); --ic:calc(16px * var(--s)); /* icon box */ --rad-8:calc(8px * var(--s)); --rad-12:calc(12px * var(--s)); --div-h:calc(27px * var(--s)); /* 1px vertical divider */ --hd-h:calc(24px * var(--s)); /* card header row */ } /* Cellar header (33833:15087): the page title stays Frank Ruhl Libre Bold 32/36 β€” it is the one display face the product itself uses β€” while the two actions are px-12 py-8, r-8, gap-8, 16px icon, SemiBold 14/20. */ .appwin .aw-scene__head{align-items:flex-end;gap:calc(40px * var(--s))} .appwin .aw-scene__head h4{font-family:var(--font-display);font-weight:700; font-size:calc(32px * var(--s));line-height:calc(36px * var(--s));letter-spacing:0} .appwin .aw-btns{gap:var(--sp-8)} .appwin .aw-btn{height:auto;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12); border-radius:var(--rad-8);border-color:transparent; font-size:var(--f-body);line-height:var(--lh-body);font-weight:600;color:var(--ink); box-shadow:0 2px 4px rgb(0 0 0 / .02)} .appwin .aw-btn .ph{font-size:var(--ic)} .appwin .aw-btn--go{background:var(--burgundy);border-color:var(--burgundy);color:#fff;box-shadow:none} /* serif numerals -> Source Sans SemiBold */ .appwin .aw-kpis b, .appwin .aw-val b, .appwin .aw-stats b, .appwin .aw-mkt__g b, .appwin .aw-week b, .appwin .aw-panel__id h5, .appwin .aw-top__logo{ font-family:var(--font-text);font-weight:600;letter-spacing:-.01em} /* mono meta -> Source Sans. Uppercase micro-labels are kept only where the product itself sets them (table and log headers, KPI captions). */ .appwin .aw-card__t u, .appwin .aw-kpis em, .appwin .aw-val em, .appwin .aw-stats em, .appwin .aw-mkt__g em, .appwin .aw-week em, .appwin .aw-chart__x, .appwin .aw-chart__y, .appwin .aw-tbl__h, .appwin .aw-tbl__f, .appwin .aw-log__h, .appwin .aw-reg li i, .appwin .dw, .appwin .aw-ratio .h{font-family:var(--font-text)} /* the footer line and drink windows are body copy in the product, not micro-caps */ .appwin .aw-tbl__f{font-size:.6875rem;letter-spacing:0} .appwin .dw{letter-spacing:0} /* Table header (33836:15238): white ground, 11/12 SemiBold uppercase at 1.2px tracking in ink β€” not the grey micro-caps we had β€” and p-12, which makes the row shorter than the 31px it was hard-set to. */ .appwin .aw-tbl__h{height:auto;padding-block:calc(12px * var(--s)); background:#fff;color:var(--ink); font-size:calc(11px * var(--s));line-height:calc(12px * var(--s)); letter-spacing:calc(1.2px * var(--s));font-weight:600;align-items:center} /* ---- card header icons: the product draws these in ink, and the label sits close to the mark (33832:15020 header uses a 16px icon) ---- */ .appwin .aw-card__t{gap:var(--sp-8)} .appwin .aw-card__t .ph{color:var(--ink)} /* rank rows: the count reads at the same size as the name it belongs to */ .appwin .aw-reg li{font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-reg li b{font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-reg li i{font-family:var(--font-text)} /* the drinking-window glyphs are taller than wide; keep their ratio */ .appwin .aw-dwl li img{object-fit:contain} /* ---- filter row (33836:15387 / 15401 / 15415): one grey field for all of them, px-12 py-8, r-8, 14/20. The plain filters carry no icon and no caret β€” only search and the sort control have a mark. ---- */ .appwin .aw-find,.appwin .aw-drop{height:auto;padding:var(--sp-8) var(--sp-12); border-radius:var(--rad-8);background:var(--paper-3);border:0; gap:var(--sp-12);font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink)} .appwin .aw-find{flex:0 0 190px;color:var(--ink-3)} .appwin .aw-drop--sort{box-shadow:0 2px 4px rgb(0 0 0 / .02)} .appwin .aw-find img,.appwin .aw-drop img{width:var(--ic);height:var(--ic); object-fit:contain;display:block;flex:0 0 auto} /* a little air between the figures and the plot, not a chasm */ /* a real breath between the figures and the plot */ .appwin .aw-val{margin-bottom:var(--sp-20)} /* ---- table row: one type size across the row. The subtitle under the wine name and the category chip keep their own sizes. ---- */ .appwin .aw-row{font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-row .p b, .appwin .aw-row .q, .appwin .aw-row .q u, .appwin .aw-row .mk, .appwin .aw-row .dw{font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-row .dw{letter-spacing:0} /* market reads like buy ex and sell β€” no pill, no accent weight */ .appwin .aw-row .mk{background:none;color:var(--ink-2);font-weight:400; padding:0;margin-right:0;border-radius:0} /* category chip (Library 2222:12985): px-8 py-4, r-6 β€” squarer than the pill it was, and tighter top to bottom */ .appwin .tg{padding:calc(3px * var(--s)) calc(8px * var(--s)); border-radius:calc(6px * var(--s))} /* With the value axis gone the plot takes that width back, but the right side still needs room for the centred 'Aug' label to sit under its gridline. */ .appwin .aw-chart{--gut:var(--sp-12)} /* The tree chevron is a , so `.aw-tree .ph` was out-specifying `.aw-tree u` and it never shrank. Target the element and the class together. */ .appwin .aw-tree u.ph{font-size:.5rem} /* rank numerals match the row they label */ .appwin .aw-reg li i{font-size:var(--f-body);line-height:var(--lh-body);width:auto} /* ---- wine profile panel (33812:160172) ---- header is white and vertically centred, the body below is the grey ground with a 24px rounded top edge. */ .appwin .aw-panel{background:#fff;padding:0;gap:0} .appwin .aw-panel__top{position:absolute;right:calc(8px * var(--s));top:calc(8px * var(--s));z-index:2} .appwin .aw-panel__id{display:flex;align-items:center;gap:calc(24px * var(--s)); padding:calc(32px * var(--s));background:#fff} /* the bottle is 108Γ—156 and sits on nothing β€” no swatch behind it */ .appwin .aw-panel__id .sw{flex:0 0 auto;width:calc(108px * var(--s));height:calc(156px * var(--s)); background:none;border-radius:0;display:grid;place-items:center} .appwin .aw-panel__id .sw img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal} .appwin .aw-panel__id > div{flex:1 1 0;min-width:0;display:flex;flex-direction:column; align-items:flex-start;gap:calc(4px * var(--s))} /* the chip hugs its label instead of stretching down the column */ .appwin .aw-panel__id .tg{align-self:flex-start} .appwin .aw-panel__id .aw-note{align-self:stretch} /* `.appwin .aw-btn` was out-specifying `.aw-btn--dark`, so the dark button's white label was being painted navy on navy and vanished. */ .appwin .aw-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff; border-radius:100px;box-shadow:none} /* ---- panel: narrower, and one type size across the header and tabs ---- */ .appwin .aw-panel{width:46%} .appwin .aw-tabs b{font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-tabs{gap:0} .appwin .aw-tabs b{padding:var(--sp-8) var(--sp-16)} /* market data card (33839:16086): white, r-16, p-16; title and its timestamp are the same 14/20, the timestamp just drops to the muted ink */ .appwin .aw-mkt{border-radius:calc(16px * var(--s));padding:var(--sp-16);border:0; box-shadow:0 2px 4px rgb(0 0 0 / .02)} .appwin .aw-mkt__h{font-size:var(--f-body);line-height:var(--lh-body);gap:var(--sp-8); margin-bottom:var(--sp-12)} .appwin .aw-mkt__h em{font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink-3)} .appwin .aw-mkt__h .ph{color:var(--burgundy);font-size:var(--ic)} .appwin .aw-mkt__g b{font-size:var(--f-body);line-height:var(--lh-body); font-family:var(--font-text);font-weight:600;letter-spacing:0} .appwin .aw-mkt__g em{font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink-3)} /* inputs (33839:18031): label SemiBold 14/20 over an #E7E7EF field, r-8 */ .appwin .aw-fields{border-radius:calc(16px * var(--s));padding:var(--sp-16);border:0; box-shadow:0 2px 4px rgb(0 0 0 / .02)} .appwin .aw-fields em{font-size:var(--f-body);line-height:var(--lh-body);font-weight:600; color:var(--ink);padding-inline:calc(6px * var(--s));padding-bottom:var(--sp-4)} .appwin .aw-fields u{height:auto;padding:var(--sp-8) var(--sp-12);border-radius:var(--rad-8); background:var(--paper-3);font-size:var(--f-body);line-height:var(--lh-body)} /* ============================================================ ONE LABEL TREATMENT ACROSS THE MOCK Every micro-caps label β€” table head, log head, ratio head, KPI and weekly captions β€” uses the table header's metrics (11/12 SemiBold at 1.2px tracking, uppercase). Only the colour differs per context. ============================================================ */ .appwin .aw-tbl__h, .appwin .aw-log__h, .appwin .aw-ratio .h, .appwin .aw-week em, .appwin .aw-stats em, .appwin .aw-kpis em{font-size:calc(11px * var(--s));line-height:calc(12px * var(--s)); letter-spacing:calc(1.2px * var(--s));font-weight:600;text-transform:uppercase} .appwin .aw-log__h,.appwin .aw-ratio .h{padding-block:calc(12px * var(--s));height:auto;align-items:center} /* chip: shorter, squarer, label optically centred */ .appwin .tg{display:inline-flex;align-items:center;justify-content:center; padding:calc(2px * var(--s)) calc(8px * var(--s));border-radius:calc(4px * var(--s)); font-size:calc(12px * var(--s));line-height:calc(16px * var(--s));font-weight:600} /* the prev/next/close controls tuck against the panel edge */ .appwin .aw-modal__ctl{left:auto;right:calc(46% + var(--sp-12))} /* the bottle is a 275Γ—960 crop, so it is contained by height and centred β€” the whole bottle shows rather than being filled to the box and cut */ .appwin .aw-panel__id .sw{overflow:visible;display:grid;place-items:center} .appwin .aw-panel__id .sw img{width:auto;height:100%;max-width:100%; object-fit:contain;object-position:center} /* Check for updates (33839:18026): h-24, px-8 py-2, full pill β€” it was inheriting the big header-button metrics */ .appwin .aw-mkt__h .aw-btn--dark{height:calc(24px * var(--s));padding:calc(2px * var(--s)) calc(8px * var(--s)); gap:var(--sp-4);border-radius:100px;font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-mkt__h .aw-btn--dark .ph{font-size:calc(14px * var(--s))} /* market figures read at the stat-tile size, and the wine name keeps the display serif β€” both deliberate, the panel is the mock's hero moment */ .appwin .aw-mkt__g b{font-size:calc(20px * var(--s));line-height:1.2} .appwin .aw-panel__id h5{font-family:var(--font-display);font-weight:700; font-size:calc(22px * var(--s));line-height:1.2;letter-spacing:-.02em} /* input labels sit closer to their field and share its left edge */ .appwin .aw-fields em{padding-inline:var(--sp-12) 0;padding-bottom:calc(2px * var(--s))} .appwin .aw-fields span{gap:0} .appwin .aw-panel__id h5{margin:0} .appwin .aw-panel__geo{font-size:var(--f-body);line-height:var(--lh-body);gap:var(--sp-4)} .appwin .aw-panel__geo img{width:calc(12px * var(--s));height:calc(12px * var(--s)); border-radius:50%;object-fit:cover} .appwin .aw-note{margin-top:var(--sp-12);background:var(--paper-3); border-radius:var(--rad-8);padding:var(--sp-8) var(--sp-12); font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink)} .appwin .aw-tabs{padding-inline:calc(24px * var(--s));margin:0;background:#fff} /* everything under the tabs sits on the grey ground, full width of the panel */ .appwin .aw-panes{position:relative;flex:1;min-height:0;background:var(--paper); border-top:1px solid var(--paper-3); border-radius:calc(24px * var(--s)) calc(24px * var(--s)) 0 0} .appwin .aw-pane{left:var(--sp-16);right:var(--sp-16);top:var(--sp-16);bottom:0} /* the Cellar value card follows Figma exactly: sentence case, no tracking, and labels at a legible size rather than micro-caps */ .appwin .aw-val em, .appwin .aw-card__t u, .appwin .aw-chart__x, .appwin .aw-chart__y{ text-transform:none;letter-spacing:0;font-size:.75rem;font-weight:400;color:var(--ink-3)} .appwin .aw-card__t u{font-weight:600} /* ---- card shell: px-20 py-16, gap-20, r-12 (33832:15020 / 15021) ---- */ .appwin .aw-card{padding:var(--sp-16) var(--sp-20);gap:var(--sp-20);border-radius:var(--rad-12)} .appwin .aw-card__t{gap:var(--sp-16);min-height:var(--hd-h); font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-card__t .ic{width:var(--ic);height:var(--ic);object-fit:contain;display:block;flex:0 0 auto} .appwin .aw-card__t u{font-size:var(--f-body);line-height:var(--lh-body)} /* Figma stacks the value card as: header Β· 20 Β· [summary Β· 8 Β· chart Β· 8 Β· tabs], and gives it px-12 rather than px-20 (33826:14672). */ .appwin .aw-card--value{gap:var(--sp-8);padding-inline:var(--sp-12)} .appwin .aw-card--value .aw-card__t{margin-bottom:calc(var(--sp-20) - var(--sp-8))} .appwin .aw-val{gap:var(--sp-16)} .appwin .aw-val span{gap:var(--sp-2)} .appwin .aw-val em{gap:var(--sp-10);font-size:var(--f-body);line-height:var(--lh-body)} .appwin .aw-val b{font-size:var(--f-value);line-height:var(--lh-value);letter-spacing:var(--tr-value)} .appwin .aw-val u{font-size:var(--f-body);line-height:var(--lh-body);gap:var(--sp-4)} .appwin .aw-chart{margin-top:0} .appwin .aw-chart__x,.appwin .aw-chart__y{font-size:var(--f-body);line-height:var(--lh-body)} /* The card is row-span-2 and was stretching the plot to fill it. Pin the chart to its Figma height (194px Γ— --s) and let the slack fall above it, so the plot starts lower and keeps the drawn proportions instead of being pulled. */ .appwin .aw-chart{--lbl:var(--lh-body);--padl:var(--sp-12); flex:1} /* This card spans two bento rows, so it is far taller than the 392px Figma draws it at. Pinning the chart to its Figma height only moved the stretch into an empty gap, so instead the gridlines keep the full height and the plot is anchored to the bottom of them β€” the data starts lower and reads as headroom above the line rather than a stretched curve. */ .appwin .aw-chart svg{top:auto;bottom:calc(var(--lbl) + 7%);height:68%} .appwin .aw-chart__y{top:auto;bottom:var(--lbl);height:calc(68% + 14%)} /* Each date is a zero-width box centred on its gridline, so all seven β€” including May and Aug β€” sit under the line rather than beside it. This is a deliberate change from Figma, which insets the first and last label. */ .appwin .aw-chart__x em{width:0;display:flex;justify-content:center;overflow:visible;white-space:nowrap} /* heavier plot lines than the 2px Figma stroke, by request */ .appwin .aw-chart .ln{stroke-width:2.6} /* ---- Wines Β· 4 fluid KPI columns split by 1Γ—27 dividers (33832:15020) ---- */ /* The four columns are flex-1 in Figma, so the widest label ('Producers', 48.6px here) sets every column. Four of those plus Figma's 16px gutter needs 276px and this row has 265px, so the gutter takes the next step down in the same scale rather than truncating the labels. */ .appwin .aw-kpis{display:flex;align-items:center;gap:var(--sp-8);flex:0 0 auto} .appwin .aw-kpis span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2); padding-left:0;border-left:0} .appwin .aw-kpis em{font-size:var(--f-body);line-height:var(--lh-body); text-transform:none;letter-spacing:0;color:var(--ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .appwin .aw-kpis b{font-size:var(--f-value);line-height:var(--lh-value);letter-spacing:var(--tr-value)} .appwin .aw-kpis__div{flex:0 0 1px;width:1px;height:var(--div-h);background:var(--paper-3);display:block} /* ---- Wine list (33832:15021) ---- */ .appwin .aw-wl{display:flex;align-items:center;gap:var(--sp-8)} .appwin .aw-wl__n{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)} .appwin .aw-wl__n em{font-style:normal;font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .appwin .aw-wl__n b{font-size:var(--f-value);line-height:var(--lh-value);letter-spacing:var(--tr-value); white-space:nowrap} .appwin .aw-wl__b,.appwin .aw-wl__pdf{flex:0 0 auto;display:flex;align-items:center;justify-content:center; height:calc(36px * var(--s));background:var(--surface);border:1px solid #DCDCE7;border-radius:var(--rad-8)} .appwin .aw-wl__b{width:calc(36px * var(--s))} .appwin .aw-wl__b img{width:var(--ic);height:var(--ic);object-fit:contain;display:block} .appwin .aw-wl__pdf{padding-inline:var(--sp-12);font-size:var(--f-body);line-height:var(--lh-body); font-weight:600;color:var(--ink);white-space:nowrap} /* The left column now carries the two wide Figma cards, whose 4-up KPI row and 3-action row need ~295px to render without clipping at this scale, so the bento gives it that and takes it back off the right column. */ .appwin .aw-bento{grid-template-columns:1.25fr 1.3fr .85fr} .appwin .aw-col{grid-row:span 2;display:flex;flex-direction:column;gap:11px;min-height:0} .appwin .aw-col .aw-card--wines,.appwin .aw-col .aw-card--wlist{flex:0 0 auto} .appwin .aw-col .aw-card--reg{flex:1 1 auto;min-height:0} .appwin .aw-val b{font-size:1.625rem;letter-spacing:-.01em} .appwin .aw-val u{font-weight:400;font-size:.75rem} .appwin .aw-val .amt{color:var(--ink);font-weight:400} .appwin .aw-card--value .aw-card__t u{font-weight:600} /* segmented control β€” Figma 33832:15010: a full pill, not a rounded rect, with 3px track padding, 2px gaps and 7px vertical tab padding */ .appwin .aw-seg{border-radius:1000px;padding:3px;gap:2px;background:var(--paper-3)} .appwin .aw-seg b{padding:6px 12px;border-radius:1000px;font-size:.75rem;line-height:18px; font-weight:400;color:var(--ink-3)} .appwin .aw-seg b.is-on{font-weight:600;color:var(--ink)} .appwin .aw-seg__pill{border-radius:1000px;background:#fff;box-shadow:0 2px 4px rgb(0 0 0 / .02)} /* bottle chip β€” shared with the tab showcase mockups */ .wine-row__tag{display:inline-block;margin-left:8px;font-family:var(--font-meta);font-size:.5rem; letter-spacing:.08em;padding:2px 6px;border-radius:var(--r-xs);background:var(--paper-2);color:var(--ink-3); vertical-align:2px} .swatch{width:34px;height:44px;border-radius:var(--r-sm);background:#F1DDE2;position:relative;overflow:hidden; display:grid;place-items:end center} .swatch.white{background:#F3EEDC}.swatch.rose{background:#F7E4E6}.swatch.amber{background:#F6EBD8} .swatch img{height:52px;width:auto;max-width:none;object-fit:contain;mix-blend-mode:multiply} @media (max-width:640px){.swatch{width:26px;height:34px}} .floatcard{position:absolute;right:-14px;top:74px;z-index:3;background:var(--surface);border-radius:var(--r-md); padding:14px 16px;box-shadow:var(--shadow-float);border:1px solid var(--hairline);min-width:180px} .floatcard .meta{display:block;margin-bottom:6px} .floatcard b{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em; font-variant-numeric:tabular-nums;display:block} .floatcard em{font-style:normal;font-size:.75rem;color:var(--green-ink);font-weight:600} .floatchip{position:absolute;left:-16px;bottom:-18px;z-index:3;background:var(--ink);color:#fff; border-radius:var(--r-btn);padding:10px 16px;font-size:.8125rem;font-weight:600; box-shadow:var(--shadow-float);display:flex;align-items:center;gap:9px} .floatchip i{font-style:normal;color:var(--gold-2)} @media (max-width:900px){.floatcard,.floatchip{display:none}} @media (max-width:1023px){ .appwin{box-shadow:none;border-radius:var(--r-lg)} .appwin-scaler{border-radius:var(--r-lg); box-shadow:0 40px 90px -40px rgb(23 22 22 / .38), 0 2px 6px rgb(23 22 22 / .05)} } /* ---------- WINE CARD FAN ---------- */ .fan{margin-top:clamp(72px,9vw,120px);display:flex;justify-content:center;align-items:flex-end; min-height:clamp(270px,30vw,400px);perspective:1400px} .fan__card{width:clamp(170px,16.5vw,220px);aspect-ratio:1/1.34;border-radius:var(--r-lg);background:var(--surface); box-shadow:0 30px 60px -30px rgb(23 22 22 / .42), 0 0 0 1px rgb(23 22 22 / .06); padding:14px 14px 16px;text-align:left;display:flex;flex-direction:column;will-change:transform; margin-inline:clamp(-16px,-1.2vw,-4px);transform-origin:bottom center;overflow:visible} .fan__bottle{flex:1 1 auto;border-radius:var(--r-md);margin-bottom:12px;position:relative;min-height:48%;overflow:visible} /* bottle sits centred and rises out of the swatch and the card top */ .fan__bottle img{position:absolute;left:50%;bottom:-6%;height:150%;width:auto;max-width:none; object-fit:contain;z-index:2;transform:translateX(-50%); filter:drop-shadow(0 16px 22px rgb(23 22 22 / .26))} .bt-white{background:linear-gradient(165deg,#F6F1DE,#E7DFC2)} .bt-red{background:linear-gradient(165deg,#F3DEE2,#DCB6BE)} .bt-deep{background:linear-gradient(165deg,#EBD9DD,#C79EA8)} .bt-amber{background:linear-gradient(165deg,#F7EBD9,#E5CDA6)} .fan__card:nth-child(1){--rot:-11deg;--ty:26px;z-index:1} .fan__card:nth-child(2){--rot:-5.5deg;--ty:10px;z-index:2} .fan__card:nth-child(3){--rot:0deg;--ty:0px;z-index:3} .fan__card:nth-child(4){--rot:5.5deg;--ty:10px;z-index:2} .fan__card:nth-child(5){--rot:11deg;--ty:26px;z-index:1} .fan__card{transform:rotate(var(--rot)) translateY(var(--ty))} .fan__typerow{display:flex;align-items:center;gap:6px} .fan__typerow .livex{width:22px;height:14px;display:block;flex:0 0 auto} .fan__type{display:block;font-family:var(--font-text);font-weight:600;font-size:.6875rem; line-height:1.09;letter-spacing:1.2px;text-transform:uppercase;color:#8787AB} .fan__card b{display:block;margin-top:4px;font-family:var(--font-text);font-weight:600; font-size:.8125rem;line-height:1.43;letter-spacing:0;color:#32304F} .fan__region{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:.75rem; line-height:1.33;color:#32304F} .fan__region i{width:12px;height:12px;flex:0 0 auto;display:block;border-radius:50%; background:#DCDCE7;padding:.5px;overflow:hidden} .fan__region img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover} .fan__rule{display:block;height:1px;margin:8px 0;background:#EFEFF4} .fan__val{display:flex;align-items:center;gap:4px;font-family:var(--font-display); font-weight:500;font-size:1.25rem;line-height:1.2;color:#32304F} .fan__val em{font-style:normal} .fan__src{display:block;font-size:.75rem;line-height:1.33;color:#009F79} .fan__src.lo{color:#BE2C55} @media (max-width:760px){ .fan{min-height:210px} .fan__card{width:clamp(120px,30vw,175px);border-radius:var(--r-lg);padding:7px 7px 10px; margin-inline:clamp(-14px,-2.4vw,-6px)} .fan__typerow{gap:4px} .fan__typerow .livex{width:16px;height:10px} .fan__type{font-size:.5rem;letter-spacing:.9px} .fan__card b{font-size:.6875rem;margin-top:3px} .fan__region{font-size:.5625rem;gap:4px} .fan__region i{width:9px;height:9px} .fan__rule{margin:6px 0} .fan__val{font-size:.9375rem;gap:3px} .fan__src{font-size:.5625rem} } .sw-red{background:linear-gradient(150deg,var(--wine-2),#3A0C19)} .sw-white{background:linear-gradient(150deg,#EFE4B4,#CFC189)} .sw-rose{background:linear-gradient(150deg,#F2C3C6,#D98F97)} .sw-amber{background:linear-gradient(150deg,#D9A46A,#A46C33)} .sw-deep{background:linear-gradient(150deg,#4A2233,#20101A)} .proof{margin-top:clamp(32px,4vw,52px);display:grid;justify-items:center;gap:var(--space-4);position:relative;z-index:5} .proof__label{font-family:var(--font-text);font-size:var(--fs-small);letter-spacing:0; text-transform:none;color:var(--ink-3)} .proof__label b{color:var(--burgundy);font-weight:600} .proof__faces{display:flex} .proof__faces i{width:36px;height:36px;border-radius:50%;border:2px solid var(--surface); background:var(--placeholder);margin-left:-10px;display:block} .proof__faces i:first-child{margin-left:0} /* ---------- TRUST ---------- */ .trust{padding-block:var(--space-7);background:var(--paper); border-block:1px solid var(--hairline);overflow:hidden} .trust__title{text-align:center;font-size:var(--fs-small);color:var(--ink-3);margin-bottom:var(--space-6)} .trust__title b{color:var(--burgundy);font-weight:600} .marquee{display:flex;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .marquee__track{display:flex;align-items:center;flex:0 0 auto;gap:clamp(8px,1.4vw,22px);padding-right:clamp(8px,1.4vw,22px);will-change:transform} .logo-w{color:var(--ink-3);flex:0 0 auto;text-decoration:none; transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)} /* Real customer logos. Two stacked layers: ::before paints the silhouette in the strip's ink through a mask, ::after holds the artwork in its own colours at zero opacity, and hover crossfades between them. Every file is drawn on the same 640x420 frame and optically fitted inside it, so one height governs all eighteen. There used to be a hand-tuned --logo-h per logo; the frames carry that judgement now, and adding a logo is a file drop plus one line below. --mask exists only where the artwork cannot double as its own silhouette: Counter is white type on the brand's own black plate, Bisous draws its name over a lips graphic, Kolonialen sets yellow letters over a black shadow. The url() paths are relative to THIS file, not to index.html: a url() inside a custom property resolves against the stylesheet that substitutes it. */ .logo-mark{position:relative;display:block;height:var(--logo-h,80px);aspect-ratio:640/420} .logo-mark::before,.logo-mark::after{content:"";position:absolute;inset:0; transition:opacity var(--dur-ui) var(--ease)} .logo-mark::before{background:currentColor; -webkit-mask:var(--mask,var(--src)) center/contain no-repeat; mask:var(--mask,var(--src)) center/contain no-repeat} .logo-mark::after{background:var(--src) center/contain no-repeat;opacity:0} .logo-mark--jordnaer{--src:url(img/logos/jordnaer.png)} .logo-mark--vinland{--src:url(img/logos/vinland.png)} .logo-mark--tartarun{--src:url(img/logos/tartarun.png)} .logo-mark--ambassaden{--src:url(img/logos/ambassaden.png)} .logo-mark--kong-hans{--src:url(img/logos/kong-hans.png)} .logo-mark--kolonialen{--src:url(img/logos/kolonialen.png);--mask:url(img/logos/kolonialen-mask.png)} .logo-mark--credo{--src:url(img/logos/credo.png)} .logo-mark--skigaarden{--src:url(img/logos/skigaarden.png)} .logo-mark--kvitnes{--src:url(img/logos/kvitnes.png)} .logo-mark--counter{--src:url(img/logos/counter.png);--mask:url(img/logos/counter-mask.png)} .logo-mark--montergade{--src:url(img/logos/montergade.png)} .logo-mark--grotto{--src:url(img/logos/grotto.png)} .logo-mark--table-464{--src:url(img/logos/table-464.png)} .logo-mark--nedre-foss-gaard{--src:url(img/logos/nedre-foss-gaard.png)} .logo-mark--katla{--src:url(img/logos/katla.png)} .logo-mark--bisous{--src:url(img/logos/bisous.png);--mask:url(img/logos/bisous-mask.png)} .logo-mark--vin-bjorvika{--src:url(img/logos/vin-bjorvika.png)} .logo-mark--sinck{--src:url(img/logos/sinck.png)} /* the strip scrolls, so dim the rest to make the target obvious */ @media (hover:hover){ .marquee:hover .logo-w{opacity:.4} .marquee .logo-w:hover{opacity:1;transform:translateY(-2px)} .logo-mark:hover::before{opacity:0} .logo-mark:hover::after{opacity:1} } .logo-w:focus-visible{outline:2px solid var(--burgundy);outline-offset:8px;border-radius:2px} .logo-w:focus-visible.logo-mark::after{opacity:1} .logo-w:focus-visible.logo-mark::before{opacity:0} @media (max-width:767px){.logo-mark{--logo-h:60px}} /* ---------- SEGMENT SWITCHER ---------- */ .switch{display:flex;gap:4px;padding:5px;border-radius:var(--r-btn); background:var(--paper-2);box-shadow:0 0 0 1px rgb(23 22 22 / .06) inset; max-width:820px;margin:0 auto var(--space-6);overflow-x:auto;scrollbar-width:none} /* on a tonal section the track needs to be a shade deeper than the ground */ .section--tonal .switch{background:var(--paper-3);box-shadow:0 0 0 1px rgb(23 22 22 / .05) inset} .switch::-webkit-scrollbar{display:none} .switch button{flex:1 0 auto;height:46px;padding-inline:var(--space-5);border-radius:var(--r-btn); font-size:var(--fs-small);font-weight:600;color:var(--ink-3);white-space:nowrap; display:inline-flex;align-items:center;gap:var(--space-2);justify-content:center; transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)} .switch{position:relative} .switch__thumb{position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:var(--r-btn); background:var(--surface);box-shadow:var(--shadow-card);z-index:0;pointer-events:none} .switch button{position:relative;z-index:1} .switch button[aria-selected="true"]{color:var(--ink)} .js .switch button[aria-selected="true"]{background:transparent;box-shadow:none} .seg-group-label{display:none} .segpanel{display:none;grid-template-columns:1fr;gap:0;background:transparent; border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden} .segpanel.is-active{display:grid} @media (min-width:760px){.segpanel{grid-template-columns:repeat(2,1fr)}.segpanel--1{grid-template-columns:1fr}} .segpanel--1{max-width:520px;margin-inline:auto} .segpanel--1 .segcard{border-left:0} .segpanel--1 .segcard{align-items:center;text-align:center;padding-block:var(--space-7)} .segpanel--1 .segcard p{margin-inline:auto} @media (min-width:1100px){.segpanel--3{grid-template-columns:repeat(3,1fr)} .segpanel--4{grid-template-columns:repeat(4,1fr)} .segpanel--1{grid-template-columns:1fr}} .segcard{background:var(--surface);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3); border-left:1px solid var(--hairline);transition:background var(--dur-ui) var(--ease)} .segpanel .segcard:first-child{border-left:0} @media (max-width:759px){.segcard{border-left:0;border-top:1px solid var(--hairline)} .segpanel .segcard:first-child{border-top:0}} @media (hover:hover){.segcard:hover{background:var(--paper)}} /* pixel mark on segment cards */ .segcard__mark{margin-bottom:var(--space-4)} .segcard h3{font-size:1.25rem} .segcard p{color:var(--ink-2);font-size:var(--fs-small);flex:1;line-height:1.48;letter-spacing:-.02em} /* ---------- PLACEHOLDERS ---------- */ .imgph{background:var(--placeholder);border-radius:var(--r-lg);display:grid;place-items:center; font-family:var(--font-meta);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);text-align:center;padding:var(--space-4);min-height:110px} .ph--43{aspect-ratio:4/3}.ph--169{aspect-ratio:16/9}.ph--45{aspect-ratio:4/5} /* ---------- FRAMED CARD GRID β€” Verseo, measured ---------- Outer frame is barely rounded; cards inside are 12px and float, with a hairline running down the gutter between every cell. */ .frame{border:1px solid var(--hairline);border-radius:var(--r-md);padding:0;background:transparent;overflow:hidden} .frame__grid{display:grid;grid-template-columns:1fr} @media (min-width:640px){.frame__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.frame__grid--3{grid-template-columns:repeat(3,1fr)}} .frame__cell{padding:9px;border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)} .frame__cell:nth-child(1){border-top:0;border-left:0} @media (max-width:639px){.frame__cell{border-left:0}} @media (min-width:640px) and (max-width:1099px){ .frame__cell:nth-child(2n+1){border-left:0} .frame__cell:nth-child(-n+2){border-top:0} } @media (min-width:1100px){ .frame__cell:nth-child(3n+1){border-left:0} .frame__cell:nth-child(-n+3){border-top:0} } .fcard{background:var(--surface);border-radius:var(--r-lg);padding:24px;min-height:280px;height:100%; display:flex;flex-direction:column;justify-content:space-between;gap:12px; box-shadow:0 1px 2px rgb(23 22 22 / .05), 0 0 0 1px rgb(23 22 22 / .05); transition:box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)} @media (hover:hover){ .fcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px -22px rgb(23 22 22 / .3), 0 0 0 1px rgb(23 22 22 / .09)} .fcard:hover .pix i{opacity:1} } /* 5Γ—5 pixel mark, ~34px */ .pix{display:grid;grid-template-columns:repeat(5,4.5px);gap:3px;width:max-content} .pix i{width:4.5px;height:4.5px;border-radius:1px;background:currentColor;opacity:.16; transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)} .pix i.on{opacity:1} @media (hover:hover){.fcard:hover .pix i{opacity:.5}.fcard:hover .pix i.on{opacity:1;transform:scale(1.15)}} .pix--wine{color:var(--burgundy)}.pix--gold{color:#B0834B} .pix--ink{color:var(--ink)}.pix--green{color:#3F8F72}.pix--blue{color:#3E63A8}.pix--rose{color:#C8536F} .fcard__txt{display:flex;flex-direction:column;gap:12px} .fcard h3{font-family:var(--font-display);font-weight:700;font-size:1.75rem; letter-spacing:-.03em;line-height:1.08;color:var(--ink)} .fcard p{font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em;color:var(--ink-2)} .fcard .cap{font-size:.8125rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink-3)} /* ============================================================ TAB SHOWCASE β€” Grovia, four distinct mockups ============================================================ */ .showcase{display:none;border-radius:var(--r-lg);overflow:hidden;background:var(--surface); border:1px solid var(--hairline);grid-template-columns:1fr} .showcase.is-active{display:grid} @media (min-width:960px){.showcase.is-active{grid-template-columns:1.05fr .95fr}} .stage{position:relative;min-height:clamp(340px,34vw,470px);padding:clamp(24px,3vw,44px); display:grid;place-items:center;overflow:hidden} .stage--a{background:linear-gradient(145deg,#2B2028,var(--wine) 55%,#8A4A32)} .stage--b{background:linear-gradient(145deg,#1D2430,#2F4A56 50%,#7A4030)} .stage--c{background:linear-gradient(145deg,#2E1B24,#6B2131 45%,#94502F)} .stage--d{background:linear-gradient(145deg,#241E2C,#3B2A3C 50%,#6E3A3A)} .stage::after{content:"";position:absolute;inset:-25%;pointer-events:none; background:radial-gradient(closest-side,rgb(255 255 255 / .14),transparent 70%);filter:blur(28px)} .showcase__text{padding:clamp(28px,3.6vw,54px);display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)} .pill-label{align-self:flex-start;display:inline-flex;align-items:center;gap:8px; font-family:var(--font-text);font-size:.75rem;font-weight:600;letter-spacing:.02em; padding:5px 11px;border-radius:var(--r-xs);background:var(--burgundy-tint);color:var(--burgundy-deep)} .pill-label::before{content:"";width:8px;height:8px;border-radius:1px;background:currentColor;flex:0 0 auto} /* one palette colour per tag */ .pill--wine {background:var(--burgundy-tint);color:var(--burgundy-deep)} .pill--gold {background:var(--gold-tint); color:var(--gold-deep)} .pill--green{background:var(--green-tint); color:var(--green)} .pill--blue {background:var(--blue-tint); color:var(--blue)} .pill--rose {background:#FBECEF; color:#A8425C} .pill--ink {background:#EDEDEB; color:var(--ink)} .showcase__text h3{font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.03em;line-height:1.08} .showcase__text p{color:var(--ink-2);font-size:1.0625rem;line-height:1.4;letter-spacing:-.02em} /* -- mock A: cellar list -- */ .mock{position:relative;z-index:1;width:min(400px,100%);background:var(--surface);border-radius:var(--r-lg); box-shadow:var(--shadow-float);overflow:hidden} .mock__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px; border-bottom:1px solid var(--hairline-soft)} .mock__head strong{font-weight:600;font-size:var(--fs-card)} .mock__row{display:grid;grid-template-columns:26px 1fr auto auto;gap:12px;align-items:center; padding:11px 16px;font-size:.8125rem;position:relative;transition:background var(--dur-ui) var(--ease)} .mock__row .swatch{width:26px;height:34px} .mock__row .swatch img{height:40px} .mock__row b{font-weight:600;display:block} .mock__row b{line-height:1.25;letter-spacing:-.01em} .mock__row em{font-style:normal;display:block;font-family:var(--font-text);font-size:.6875rem; letter-spacing:-.01em;color:var(--ink-3);line-height:1.3} .mock__row .qty{color:var(--ink-3);font-variant-numeric:tabular-nums} .mock__row .price{font-weight:600;font-variant-numeric:tabular-nums;min-width:46px;text-align:right} .mock__row.is-hot{background:var(--burgundy-tint)} .mock__row .qty,.mock__row .price{transition:opacity var(--dur-ui) var(--ease)} .mock__row.is-hot .qty,.mock__row.is-hot .price{opacity:0} .mock__row .acts{position:absolute;right:14px;display:flex;gap:6px;opacity:0; transition:opacity var(--dur-ui) var(--ease)} .mock__row.is-hot .acts{opacity:1} .mock__row .acts i{width:20px;height:20px;border-radius:var(--r-md);background:rgb(255 255 255 / .8); display:grid;place-items:center;font-style:normal;font-size:.6rem;color:var(--burgundy-deep)} .mock__foot{padding:11px 16px;border-top:1px solid var(--hairline-soft); font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.08em;color:var(--ink-3)} /* -- mock B: value chart -- */ .chart{position:relative;z-index:1;width:min(420px,100%);background:var(--surface);border-radius:var(--r-lg); padding:22px 20px 16px;box-shadow:var(--shadow-float);text-align:center} .chart h6{font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.02em} .chart .sub{font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.1em;color:var(--ink-3);margin-top:3px} .chart svg{margin-top:14px;width:100%;height:120px;overflow:visible} .chart__tip{position:absolute;left:16%;top:34%;background:var(--ink);color:#fff;border-radius:var(--r-md); padding:7px 11px;font-size:.6875rem;white-space:nowrap;box-shadow:var(--shadow-card)} .chart__cursor{position:absolute;left:30%;top:47%;background:var(--burgundy);color:#fff;border-radius:var(--r-md); padding:3px 9px;font-size:.625rem;font-weight:600} .chart__ticks{display:flex;gap:3px;margin-top:10px;justify-content:space-between} .chart__ticks i{flex:1;height:8px;background:var(--hairline);border-radius:1px;display:block} /* -- mock C: alert card -- */ .alertcard{position:relative;z-index:1;width:min(330px,100%);background:var(--surface);border-radius:var(--r-lg); padding:20px;box-shadow:var(--shadow-float); outline:1px dashed rgb(255 255 255 / 0);outline-offset:11px; transition:outline-color .5s var(--ease)} .alertcard.is-settled{outline-color:rgb(255 255 255 / .5)} .alertcard .chip{display:inline-block;font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.12em; text-transform:uppercase;padding:4px 9px;border-radius:var(--r-md);background:var(--burgundy-tint);color:var(--burgundy-deep)} .alertcard h5{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em; margin-block:12px 14px} .alertcard .imgph{min-height:88px;border-radius:var(--r-md);margin-bottom:14px} /* the bottle is portrait β€” size it by its narrow axis, then lay it on its side */ .bottle-lay{position:relative;display:grid;place-items:center;height:104px;border-radius:var(--r-md); margin-bottom:14px;background:linear-gradient(150deg,#F7E7E4,#EFD3D6);overflow:hidden} .bottle-lay img{position:absolute;width:61px;height:auto;max-width:none; transform:rotate(-90deg);filter:drop-shadow(0 10px 16px rgb(23 22 22 / .26))} .alertcard p{font-size:.8125rem;color:var(--ink-2);line-height:1.5} .alertcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px; padding-top:14px;border-top:1px solid var(--hairline-soft); font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-3)} .stackav{display:flex} .stackav i{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface); background:var(--placeholder);margin-left:-7px;display:block} .stackav i:first-child{margin-left:0} /* -- mock D: team form -- */ .formcard{position:relative;z-index:1;width:min(340px,100%);background:var(--surface);border-radius:var(--r-lg); padding:24px 22px;box-shadow:var(--shadow-float)} .formcard .star{color:var(--burgundy);font-size:1.1rem} .formcard h5{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin-block:8px 18px} .formcard label{display:block;font-size:.75rem;font-weight:600;margin-bottom:6px} .formcard .fld{height:40px;border-radius:var(--r-md);background:var(--paper-2);margin-bottom:14px; display:flex;align-items:center;padding-inline:12px;font-size:.8125rem;color:var(--ink-3)} .invite{position:absolute;top:-22px;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:var(--r-btn); padding:8px 10px 8px 16px;font-size:.8125rem;font-weight:600;box-shadow:var(--shadow-float);white-space:nowrap;z-index:2} .invite .stackav i{border-color:var(--ink);background:var(--cellar-3)} .invite .more{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:var(--cellar-3); display:grid;place-items:center;font-size:.5625rem;margin-left:-7px} /* ============================================================ STEPS ON GRADIENT β€” Smoovly ============================================================ */ .steps{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(40px,7vw,110px) clamp(20px,4vw,60px); background:linear-gradient(135deg,#F6E7D7,#F3D7DE 35%,#E9DFF2 70%,#F7EFE2)} .steps::after{content:"";position:absolute;inset:-20%;pointer-events:none; background:radial-gradient(closest-side,rgb(255 255 255 / .5),transparent 70%);filter:blur(40px)} .steps__list{position:relative;z-index:1;max-width:640px;margin-inline:auto;display:grid;gap:14px} .step{background:rgb(255 255 255 / .92);backdrop-filter:blur(8px);border-radius:var(--r-lg); box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-ui) var(--ease)} .step__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4); width:100%;text-align:left;padding:18px 20px} .step__pm{width:36px;height:36px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center; font-family:var(--font-meta);color:var(--ink-2);transition:transform var(--dur-ui) var(--ease)} .step__t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,1.6vw,1.375rem);letter-spacing:-.02em} .step__dot{width:15px;height:15px;border-radius:50%;background:var(--paper-3);border:3px solid var(--surface); box-shadow:0 0 0 1px var(--hairline);transition:background var(--dur-ui) var(--ease)} .step__body{display:none;padding:0 20px 20px 70px;color:var(--ink-2); font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em;max-width:56ch} .step.is-open{box-shadow:var(--shadow-raise)} .step.is-open .step__pm{transform:rotate(45deg)} .step.is-open .step__dot{background:var(--ink)} .step.is-open .step__body{display:block} .steps__rail{position:absolute;right:34px;top:30px;bottom:30px;width:1px;background:var(--hairline);z-index:0} @media (max-width:700px){.step__body{padding-left:20px}} /* ============================================================ CHIP CARDS β€” Smoovly ============================================================ */ .chipcards{display:grid;grid-template-columns:1fr; border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--paper);overflow:hidden} @media (min-width:640px){.chipcards{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.chipcards{grid-template-columns:repeat(4,1fr)}} .chipcard-wrap{padding:9px;border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)} .chipcard-wrap:first-child{border-left:0;border-top:0} @media (max-width:639px){.chipcard-wrap{border-left:0}.chipcard-wrap:first-child{border-top:0}} @media (min-width:640px) and (max-width:1099px){ .chipcard-wrap:nth-child(2n+1){border-left:0} .chipcard-wrap:nth-child(-n+2){border-top:0}} @media (min-width:1100px){ .chipcard-wrap:nth-child(4n+1){border-left:0} .chipcard-wrap:nth-child(-n+4){border-top:0}} /* deep colour grounds β€” dark enough that white type holds contrast */ .chipcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:364px;height:100%;color:#fff; display:flex;flex-direction:column;gap:14px;padding:24px;isolation:isolate; transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)} @media (hover:hover){.chipcard:hover{box-shadow:0 24px 50px -24px rgb(23 22 22 / .5)}} /* text lifts to make room, CTA rises out of the bottom edge */ .chipcard__body{display:grid;gap:6px;margin-top:auto; transition:transform .45s var(--ease)} .chipcard__cta{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start; color:#fff;font-size:var(--fs-card);font-weight:600;white-space:nowrap; position:absolute;left:24px;bottom:24px; opacity:0;transform:translateY(28px); transition:transform .45s var(--ease),opacity .3s var(--ease),gap .25s var(--ease)} .chipcard:hover .chipcard__cta{gap:.8em} @media (hover:hover){ .chipcard:hover .chipcard__body{transform:translateY(-34px)} .chipcard:hover .chipcard__cta{opacity:1;transform:translateY(0)} } @media (hover:none){ .chipcard__cta{position:static;opacity:1;transform:none;margin-top:14px} } .chipcard__bg{position:absolute;inset:0;z-index:-1;transition:transform .8s var(--ease)} @media (hover:hover){.chipcard:hover .chipcard__bg{transform:scale(1.06)}} /* same construction as the showcase stages: dark β†’ mid β†’ warm, three stops */ .cbg-1{background:linear-gradient(150deg,#16301F,#2F6446 52%,#548A55)} .cbg-2{background:linear-gradient(150deg,#2B1520,var(--wine-2) 52%,#A8503C)} .cbg-3{background:linear-gradient(150deg,#16233A,#2E4F80 52%,#5C7FA6)} .cbg-4{background:linear-gradient(150deg,#33230F,var(--gold-deep) 52%,#C09455)} /* same tag treatment as the product chips */ .chipcard__chip{align-self:flex-start;background:rgb(255 255 255 / .92);color:var(--ink); display:inline-flex;align-items:center;gap:7px; font-family:var(--font-text);font-size:.75rem;font-weight:600;letter-spacing:.02em; padding:5px 11px;border-radius:var(--r-xs)} .chipcard__chip .ph{font-size:16px;line-height:1} .chipcard:nth-child(1) .chipcard__chip{color:#2F5B3E} .chipcard:nth-child(2) .chipcard__chip{color:var(--burgundy-deep)} .chipcard:nth-child(3) .chipcard__chip{color:#2C4468} .chipcard:nth-child(4) .chipcard__chip{color:#6E4E28} .chipcard h4{font-family:var(--font-display);font-weight:700;font-size:1.75rem; letter-spacing:-.03em;line-height:1.08} .chipcard p{color:rgb(255 255 255 / .76);font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em} .chipcards__cap{margin-top:var(--space-6);color:var(--ink-2);max-width:44ch;font-size:var(--fs-small); line-height:1.48;letter-spacing:-.02em} /* ============================================================ FEATURE PAIRS + IMPACT β€” Smoovly ============================================================ */ .pairs{display:grid;grid-template-columns:1fr;gap:var(--space-7) var(--space-8)} @media (min-width:800px){.pairs{grid-template-columns:1fr 1fr}} .pair{display:grid;grid-template-columns:auto auto 1fr;gap:var(--space-4);align-items:start} .pair__ic{font-size:1.25rem;line-height:1;margin-top:2px;color:var(--ink)} .pair__rule{width:1px;align-self:stretch;background:var(--hairline)} .pair h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em; line-height:1.08;margin-bottom:10px} .pair p{color:var(--ink-2);font-size:var(--fs-card);line-height:1.3;letter-spacing:-.02em;max-width:44ch} .impact{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-8)} @media (min-width:900px){.impact{grid-template-columns:1fr 1.5fr 1fr;align-items:stretch}} .istat{background:var(--surface);border-radius:var(--r-lg);padding:var(--space-6); box-shadow:0 0 0 1px rgb(23 22 22 / .06); display:flex;flex-direction:column;justify-content:space-between;min-height:250px} .istat .ic{font-size:1.75rem;color:var(--ink-2)} /* counting progress */ /* POS sync flow */ .istat b{display:block;font-family:var(--font-display);font-weight:700; font-size:clamp(2.25rem,4vw,3.25rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .istat span,.iquote .meta{font-family:var(--font-meta);font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);display:block} .istat span{margin-top:var(--space-3)} .iquote{background:var(--surface);box-shadow:0 0 0 1px rgb(23 22 22 / .06); border-radius:var(--r-lg);padding:var(--space-7) var(--space-6);text-align:center;position:relative; display:flex;flex-direction:column;justify-content:center;gap:var(--space-4)} .iquote__fan{display:flex;justify-content:center;margin-top:-64px;margin-bottom:var(--space-4)} .iquote__fan i{width:52px;height:62px;border-radius:var(--r-md);background:var(--placeholder); border:3px solid var(--surface);box-shadow:var(--shadow-card);margin-inline:-6px;display:block} .iquote__fan i:nth-child(1){transform:rotate(-11deg) translateY(7px)} .iquote__fan i:nth-child(2){transform:rotate(-5deg) translateY(2px)} .iquote__fan i:nth-child(3){transform:rotate(0) translateY(-3px);z-index:2} .iquote__fan i:nth-child(4){transform:rotate(5deg) translateY(2px)} .iquote__fan i:nth-child(5){transform:rotate(11deg) translateY(7px)} .iquote blockquote{font-family:var(--font-display);font-weight:700; font-size:clamp(1.125rem,1.9vw,1.5rem);letter-spacing:-.03em;line-height:1.22; max-width:32ch;margin-inline:auto} /* ---------- BROWSER ACCORDION (Verseo) ---------- */ .browser{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)} .browser__bar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--hairline)} .browser__dots{display:flex;gap:6px} .browser__dots i{width:9px;height:9px;border-radius:50%;display:block} .browser__dots i:nth-child(1){background:#E5786F}.browser__dots i:nth-child(2){background:#E8C069} .browser__dots i:nth-child(3){background:#7FC08E} .browser__url{margin-left:auto;height:22px;width:180px;border-radius:var(--r-md);background:var(--paper-3)} .acc__row{border-bottom:1px solid var(--hairline);transition:background var(--dur-ui) var(--ease)} .acc__row:last-child{border-bottom:0} .acc__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-5); width:100%;text-align:left;padding:var(--space-6)} .acc__n{font-family:var(--font-meta);font-size:.75rem;letter-spacing:.1em;padding:5px 9px;border-radius:var(--r-sm); background:var(--paper-3);color:var(--ink-3); transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .acc__t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.025em} .acc__pm{width:36px;height:36px;border:1px solid var(--hairline);border-radius:var(--r-md);display:grid;place-items:center; font-family:var(--font-meta);color:var(--ink-3);transition:transform var(--dur-ui) var(--ease)} .acc__body{display:none;padding:0 var(--space-6) var(--space-6);grid-template-columns:1fr;gap:var(--space-4)} .acc__row.is-open{background:var(--surface);box-shadow:var(--shadow-card)} .acc__row.is-open .acc__n{background:var(--ink);color:#fff} .acc__row.is-open .acc__pm{transform:rotate(45deg)} .acc__row.is-open .acc__body{display:grid} @media (min-width:700px){.acc__body{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.acc__body{grid-template-columns:repeat(4,1fr)}} .acc__item{border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--space-4);background:var(--paper); display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; transition:background var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)} .acc__item .ph{grid-row:span 2;width:28px;height:28px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--surface);box-shadow:0 0 0 1px var(--hairline);color:var(--ink-2);font-size:.95rem; transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .acc__item strong{display:block;font-size:var(--fs-card);font-weight:600;margin-bottom:2px;line-height:1.25; transition:color var(--dur-ui) var(--ease)} .acc__item span:not(.ph){font-size:.8125rem;color:var(--ink-2);line-height:1.3} @media (hover:hover){ .acc__item:hover{background:var(--surface);border-color:transparent;transform:translateY(-3px); box-shadow:0 14px 30px -18px rgb(23 22 22 / .3), 0 0 0 1px rgb(23 22 22 / .07)} .acc__item:hover strong{color:var(--burgundy)} .acc__item:hover .ph{background:var(--burgundy-tint);color:var(--burgundy-deep)} } /* ============================================================ TRAVELLING-CARD SECTION β€” Grovia Three cells; one UI mock moves between them and swaps content. ============================================================ */ /* same shell as the feature frame: barely-rounded outer, hairline dividers, 12px cards */ .travel{position:relative;display:grid;grid-template-columns:1fr; border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--paper);overflow:hidden} @media (min-width:900px){ .travel{display:flex} .tcell-wrap{flex:1 1 0;min-width:0;padding:9px;border-left:1px solid var(--hairline); transition:flex-grow .65s cubic-bezier(.2,.8,.2,1)} .tcell-wrap:first-child{border-left:0} .tcell-wrap.is-open{flex-grow:2.15} } @media (max-width:899px){ .tcell-wrap{padding:9px;border-top:1px solid var(--hairline)} .tcell-wrap:first-child{border-top:0} } .tcell{position:relative;height:100%;background:var(--surface);border-radius:var(--r-lg);padding:24px; min-height:clamp(280px,30vw,384px);display:flex;flex-direction:column;justify-content:flex-end; gap:0;overflow:hidden; box-shadow:0 1px 2px rgb(23 22 22 / .05), 0 0 0 1px rgb(23 22 22 / .05)} .tcell__n{position:absolute;top:24px;left:24px; font-family:var(--font-text);font-size:1rem;font-weight:400;color:var(--ink-3)} .tcell h3{font-family:var(--font-display);font-weight:700;font-size:1.75rem; letter-spacing:-.03em;line-height:1.08;margin-bottom:12px} .tcell p{color:var(--ink-2);font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em} /* the visual is inset inside the card, with the mock centred in it */ .tcell__vis{position:absolute;right:14px;top:14px;bottom:14px;width:250px;z-index:2; border-radius:var(--r-lg);overflow:hidden;pointer-events:none;display:grid;place-items:center;padding:16px; background:linear-gradient(160deg,#F6EDE6,#EFDDE4 50%,#E6DCEE); opacity:0;transform:translateX(16px) scale(.97); transition:opacity .45s var(--ease),transform .6s var(--ease)} .tcell-wrap.is-open .tcell__vis{opacity:1;transform:none} /* the copy keeps a constant width so it never reflows as the card grows */ .tcell__body{position:relative;z-index:3;width:262px;max-width:100%} @media (max-width:1100px){.tcell__vis{width:214px}.tcell__body{width:230px}} @media (max-width:899px){.tcell__vis{display:none}.tcell__body{width:100%}} .tcell__vis .tmock{width:100%;box-shadow:0 14px 28px -14px rgb(23 22 22 / .28)} .tmock{background:rgb(255 255 255 / .92);border-radius:var(--r-lg);padding:12px;backdrop-filter:blur(6px)} .tmock .meta{display:block;margin-bottom:8px} .tmock h6{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;margin-bottom:10px} .tmock__chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px} .tmock__chips span{font-size:.625rem;font-weight:600;padding:4px 8px;border-radius:var(--r-md); background:var(--paper-2);color:var(--ink-2)} .tmock__chips span.on{background:var(--ink);color:#fff} .tmock__row{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center; padding-block:7px;border-top:1px solid var(--hairline-soft);font-size:.6875rem} .tmock__row:first-of-type{border-top:0} .tmock__row i{width:8px;height:8px;border-radius:50%;background:var(--wine);display:block} .tmock__row i.w{background:#E4D9A8}.tmock__row i.r{background:#E9B4B4} .tmock__row b{font-weight:600} .tmock__row span{color:var(--ink-3);font-variant-numeric:tabular-nums} .tmock__cta{margin-top:10px;height:30px;border-radius:var(--r-md);background:var(--burgundy);color:#fff; display:grid;place-items:center;font-size:.6875rem;font-weight:600} .tmock__alert{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--r-md); background:var(--burgundy-tint);color:var(--burgundy-deep);font-size:.6875rem;font-weight:600;margin-bottom:8px} /* ============================================================ PRINTED WINE LIST CARD ============================================================ */ .listcard{background:var(--surface);border-radius:var(--r-lg);padding:clamp(28px,3vw,44px); box-shadow:0 24px 50px -28px rgb(23 22 22 / .30), 0 0 0 1px rgb(23 22 22 / .06)} .listcard__head{text-align:center;margin-bottom:var(--space-5)} .listcard__head h4{font-family:var(--font-display);font-weight:700;font-size:1.625rem; letter-spacing:.07em;line-height:1;color:var(--burgundy);text-transform:uppercase} .listcard__head span{display:block;margin-top:11px;font-family:var(--font-meta);font-size:.625rem; font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)} .listcard__rule{height:2px;background:var(--burgundy);margin-bottom:var(--space-5)} .listcard__group{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--burgundy);margin-block:var(--space-5) var(--space-3)} .listcard__group:first-of-type{margin-top:0} .listcard__row{display:flex;align-items:baseline;gap:10px;padding-block:10px; border-bottom:1px dotted var(--hairline-strong)} .listcard__row:last-child{border-bottom:0} .listcard__row span{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em} .listcard__row b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums} .listcard__foot{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hairline); display:flex;justify-content:space-between;font-family:var(--font-meta);font-size:.625rem; letter-spacing:.08em;color:var(--ink-3)} /* check bullets (wireframe style) */ .checks{display:grid;gap:var(--space-3);margin-block:var(--space-6);max-width:54ch} .checks li{display:grid;grid-template-columns:22px 1fr;gap:var(--space-3);align-items:start; font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em;color:var(--ink-2)} .checks li i{width:22px;height:22px;border-radius:50%;background:var(--burgundy);color:#fff; display:grid;place-items:center;font-size:.65rem;margin-top:1px} /* ---------- FEATURE BULLET LIST ---------- */ .feat-list{display:grid;gap:0;margin-bottom:var(--space-7);border-top:1px solid var(--hairline); counter-reset:fl} @media (min-width:900px){.feat-list{grid-template-columns:1fr 1fr;column-gap:var(--space-8)}} .feat-list li{display:grid;grid-template-columns:2.25rem 1fr;gap:var(--space-4); padding-block:var(--space-4);border-bottom:1px solid var(--hairline); color:var(--ink-2);font-size:var(--fs-small)} .feat-list li::before{content:counter(fl,decimal-leading-zero);counter-increment:fl; font-family:var(--font-meta);font-size:var(--fs-meta);letter-spacing:.1em;color:var(--ink-3)} /* ============================================================ SPLIT SHOWCASE β€” visual on one side, copy on the other ============================================================ */ .split{display:grid;grid-template-columns:1fr;border:1px solid var(--hairline);border-radius:var(--r-md); overflow:hidden;background:var(--surface)} @media (min-width:1000px){.split{grid-template-columns:1.02fr .98fr}} .split__vis{position:relative;display:grid;place-items:center;padding:clamp(28px,4vw,56px); background:linear-gradient(145deg,#2B2028,var(--wine) 55%,#8A4A32);min-height:clamp(360px,36vw,520px)} .split__vis::after{content:"";position:absolute;inset:-25%;pointer-events:none; background:radial-gradient(closest-side,rgb(255 255 255 / .13),transparent 70%);filter:blur(30px)} .split__text{padding:clamp(28px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center; gap:var(--space-4)} .split__text h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.1; max-width:24ch} .split__text > p{color:var(--ink-2);font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em; max-width:52ch} /* the printed list, scaled to sit inside the panel */ .split__vis .listcard{position:relative;z-index:1;width:min(420px,100%);padding:26px 24px; max-height:100%;overflow:hidden} .split__vis .listcard__row{padding-block:8px} .split__vis .listcard__row span{font-size:var(--fs-card)} /* ============================================================ FEATURE CARDS WITH BESPOKE VISUALS ============================================================ */ .fxcards{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--hairline); border-top:0;border-radius:0 0 6px 6px;overflow:hidden;background:var(--surface)} @media (min-width:700px){.fxcards{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.fxcards{grid-template-columns:repeat(4,1fr)}} .fxcard{padding:var(--space-6);display:grid;grid-template-rows:auto auto auto 1fr;gap:var(--space-3); border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)} .fxcard:first-child{border-left:0} @media (min-width:700px) and (max-width:1099px){.fxcard:nth-child(2n+1){border-left:0}} @media (min-width:1100px){.fxcard{border-left:1px solid var(--hairline)}.fxcard:first-child{border-left:0}} @media (max-width:699px){.fxcard{border-left:0}} .fxcard__ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--burgundy-tint);color:var(--burgundy-deep);font-size:1.15rem} .fxcard h4{font-family:var(--font-display);font-weight:700;font-size:1.1875rem;letter-spacing:-.025em} .fxcard p{color:var(--ink-2);font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em} .fxcard__vis{align-self:end;margin-top:var(--space-5);border-radius:var(--r-lg);background:var(--paper-2); padding:var(--space-4);height:172px;display:grid;align-content:center;gap:8px} /* 1 Β· template thumbnails */ .tpl-row{display:flex;gap:7px} .tpl{flex:1;aspect-ratio:3/4;border-radius:var(--r-sm);background:var(--surface); box-shadow:0 0 0 1px var(--hairline);padding:5px;display:grid;align-content:start;gap:3px} .tpl i{display:block;height:2px;border-radius:1px;background:var(--hairline-strong);opacity:.55} .tpl i:first-child{background:var(--ink-3);width:60%;height:3px;margin-bottom:2px} .tpl.is-on{box-shadow:0 0 0 1.5px var(--burgundy)} .tpl.is-on i:first-child{background:var(--burgundy)} /* 2 Β· pdf page + qr */ .pq{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center} .pq__page{background:var(--surface);border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--hairline); padding:8px;display:grid;gap:4px;align-content:start;min-height:88px} .pq__page i{display:block;height:2px;border-radius:1px;background:var(--hairline-strong);opacity:.5} .pq__page i:first-child{background:var(--burgundy);width:52%;height:3px;opacity:1;margin-bottom:3px} .pq__qr{width:62px;height:62px;background:var(--surface);border-radius:var(--r-md);padding:6px; box-shadow:0 0 0 1px var(--hairline);display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .pq__qr i{background:var(--ink);border-radius:1px;opacity:.18} .pq__qr i.on{opacity:1} /* 3 Β· type + colour composition */ .brand{display:grid;gap:10px} .brand__row{display:flex;align-items:baseline;gap:12px} .brand__aa{line-height:1} .brand__aa.serif{font-family:var(--font-display);font-size:2rem;letter-spacing:-.03em} .brand__aa.sans{font-family:var(--font-text);font-size:1.375rem;font-weight:600} .brand__aa.mono{font-family:var(--font-meta);font-size:1rem;letter-spacing:.06em;color:var(--ink-3)} .brand__sw{display:flex;gap:6px} .brand__sw i{width:22px;height:22px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgb(23 22 22 / .08)} /* 4 Β· language rows */ .langs{display:grid;gap:6px} .lang{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center; background:var(--surface);border-radius:var(--r-md);padding:7px 9px;box-shadow:0 0 0 1px var(--hairline); font-size:.8125rem} .lang b{font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.08em;color:var(--ink-3)} .lang.is-on{box-shadow:0 0 0 1.5px var(--burgundy)} .lang.is-on b{color:var(--burgundy)} /* ============================================================ INTEGRATIONS β€” copy left, two icon columns drifting opposite ways ============================================================ */ .integr{display:grid;gap:var(--space-8);align-items:center} @media (min-width:1000px){.integr{grid-template-columns:1.05fr .95fr}} .integr__steps{margin-top:var(--space-7);display:grid;gap:var(--space-4)} .integr__steps li{display:flex;align-items:center;gap:var(--space-4);color:var(--ink-2); font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em} .integr__steps b{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;flex:0 0 auto; display:grid;place-items:center;font-family:var(--font-meta);font-size:.625rem;letter-spacing:.04em} .icols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);height:420px;overflow:hidden; max-width:340px;margin-inline:auto; -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)} .icol{display:grid;gap:var(--space-3);align-content:start;will-change:transform} .itile{aspect-ratio:1;border-radius:var(--r-lg);background:var(--surface); box-shadow:0 1px 2px rgb(23 22 22 / .05), 0 0 0 1px rgb(23 22 22 / .06); display:grid;place-items:center;font-family:var(--font-meta);font-size:.625rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-2);text-align:center;padding:var(--space-3)} /* POS logos, same two-layer treatment as the customer strip: ink at rest, real colours on hover. --mark is the artwork width as a share of the square tile, tuned per logo because a compact mark reads larger than a long wordmark at the same width. */ .itile--logo{position:relative;font-size:0} .itile--logo::before,.itile--logo::after{content:"";position:absolute;inset:0; transition:opacity var(--dur-ui) var(--ease)} .itile--logo::before{background:currentColor; -webkit-mask:var(--mask,var(--src)) center/var(--mark,62%) auto no-repeat; mask:var(--mask,var(--src)) center/var(--mark,62%) auto no-repeat} .itile--logo::after{background:var(--src) center/var(--mark,62%) auto no-repeat;opacity:0} .itile--lightspeed{--src:url(img/logos/pos/lightspeed.png);--mark:66%} .itile--pck{--src:url(img/logos/pos/pck.png);--mark:44%} .itile--nanopos{--src:url(img/logos/pos/nanopos.png);--mark:66%} .itile--restolution{--src:url(img/logos/pos/restolution.png);--mark:60%} .itile--winston{--src:url(img/logos/pos/winston.png);--mark:66%;--mask:url(img/logos/pos/winston-mask.png)} .itile--munu{--src:url(img/logos/pos/munu.svg);--mark:56%} .itile--susoft{--src:url(img/logos/pos/susoft.png);--mark:62%} @media (hover:hover){ .itile--logo:hover::before{opacity:0} .itile--logo:hover::after{opacity:1} } @media (max-width:640px){.icols{height:340px;max-width:280px}} /* ---------- CASE CARDS ---------- */ .cases{display:grid;grid-template-columns:1fr;gap:var(--space-5)} @media (min-width:760px){.cases{grid-template-columns:repeat(2,1fr)}} .case{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:var(--space-4);transition:box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)} @media (hover:hover){.case:hover{box-shadow:var(--shadow-raise);transform:translateY(-4px)}} .case__media{position:relative;border-radius:var(--r-lg);overflow:hidden} .case__media .imgph{border-radius:0;min-height:220px} .case__year{position:absolute;right:12px;bottom:12px;font-family:var(--font-meta);font-size:.625rem; letter-spacing:.08em;padding:6px 11px;border-radius:var(--r-btn); background:rgb(23 22 22 / .64);color:#fff;backdrop-filter:blur(6px)} .case__body{padding:var(--space-5) var(--space-4) var(--space-3)} .case__body h3{margin-bottom:var(--space-2)} .case__body p{color:var(--ink-2);font-size:var(--fs-small)} /* ---------- TESTIMONIALS ---------- */ /* Grovia review cards: quote glyph top-left, portrait hanging off the bottom-right corner, columns offset and parallaxed at different rates. */ .tstack{display:grid;grid-template-columns:1fr;gap:var(--space-8) var(--space-5)} @media (min-width:900px){ .tstack{grid-template-columns:repeat(3,1fr);align-items:start; row-gap:calc(var(--space-8) + var(--space-5));padding-bottom:var(--space-7)} .tstack > *:nth-child(3n+2){margin-top:var(--space-6)} .tstack > *:nth-child(3n+3){margin-top:var(--space-8)} } .tcard{background:var(--surface);border-radius:var(--r-lg);padding:26px 26px 30px; box-shadow:0 1px 2px rgb(23 22 22 / .05), 0 0 0 1px rgb(23 22 22 / .06); display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-5);position:relative; will-change:transform;transition:box-shadow var(--dur-ui) var(--ease)} @media (hover:hover){.tcard:hover{box-shadow:0 20px 44px -24px rgb(23 22 22 / .3), 0 0 0 1px rgb(23 22 22 / .1)}} .tcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)} .tcard .q{font-family:Georgia,serif;font-size:3rem;line-height:.7;color:var(--burgundy);opacity:.28; height:.5em;overflow:hidden} .tcard .stars{color:var(--gold);font-size:.6875rem;letter-spacing:.18em} .tcard blockquote{font-size:1.0625rem;color:var(--ink);line-height:1.45;letter-spacing:-.01em;max-width:27ch} .tcard figcaption{align-self:end} .tcard .who strong{display:block;font-weight:600;font-size:var(--fs-card);color:var(--ink)} .tcard .who span{display:block;font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);margin-top:4px;max-width:22ch;line-height:1.4} .tcard .face,.iquote__fan,.faq-card .avs,.proof__faces{display:none} /* ---------- MOBILE APP ---------- */ .app-row{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center} @media (min-width:1024px){.app-row{grid-template-columns:1.05fr .95fr}} .badges{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)} .store{display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 20px; border-radius:var(--r-btn);background:var(--cellar);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22); transition:background var(--dur-ui) var(--ease),transform var(--dur-micro) var(--ease)} @media (hover:hover){.store:hover{background:#141414;transform:translateY(-2px)}} .store:active{transform:scale(.985)} .store svg{width:24px;height:24px;flex:0 0 auto} .store small{display:block;font-size:.625rem;letter-spacing:.02em;line-height:1.2;opacity:.82} .store strong{display:block;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.2} /* ============================================================ PHONE MOCK ============================================================ */ .phone-wrap{position:relative;display:grid;place-items:center;z-index:3} @media (min-width:1024px){ /* the phone runs past the bottom of the dark band */ .phone-wrap{margin-top:-32px;margin-bottom:calc(var(--section) * -1 - 24px);align-self:end} } .phone-frame{position:relative;z-index:2;width:min(300px,86%);aspect-ratio:9/17.6; border-radius:44px;padding:10px;background:linear-gradient(160deg,#2E2B36,#131218); box-shadow:0 46px 90px -34px rgb(0 0 0 / .78), inset 0 0 0 1px rgb(255 255 255 / .12)} .phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:92px;height:26px; border-radius:var(--r-pill);background:#0C0B10;z-index:3} /* the app mock is a light UI island β€” .section--cellar must not invert it */ .light-ui,.phone-screen,.fl{--paper:#F5F5F9;--surface:#FFFFFF;--paper-2:#EFEFF4;--paper-3:#E7E7EF;--ink:#32304F;--ink-2:#6B6985;--ink-3:#8787AB;--placeholder:#DCDCE7;--hairline:rgb(50 48 79 / .12);--hairline-soft:rgb(50 48 79 / .07);--hairline-strong:rgb(50 48 79 / .24);color:var(--ink)} /* Inside the device we speak the APP's language, not the landing system's β€” tokens lifted from Figma (Navy ramp, Source Sans / SF Pro), scaled 0.77 because the mock is 256px wide against the real screen's 334px. */ .phone-screen{ --app-ink:#32304F; --app-ink-2:#6B6985; --app-ink-3:#BCBCD1; --app-line:#EFEFF4; --app-line-2:#DCDCE7; --app-bg:#F5F5F9; --app-card:#fff; --font-app:-apple-system,'SF Pro Text',system-ui,'Source Sans 3',sans-serif; --card-shadow:0 2px 4px rgb(0 0 0 / .02), 0 2px 8px rgb(0 0 0 / .03); height:100%;background:var(--app-bg);border-radius:35px;padding:40px 12px 0; display:flex;flex-direction:column;overflow:hidden;position:relative; font-family:var(--font-app);color:var(--app-ink);letter-spacing:-.115px} /* ---- scene stack: scenes cross-push like native nav ---- */ .ps-track{position:relative;flex:1;min-height:0} .ps-scene{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px; padding-bottom:74px} .js .ps-scene{opacity:0;visibility:hidden} .ps-scene.is-on{opacity:1;visibility:visible} /* ---- headers ---- */ .ps-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 4px} .ps-head span{font-size:.9125rem;line-height:1.263;font-weight:700;letter-spacing:0; color:var(--app-ink)} .ps-head--sub{align-items:center;gap:6px;justify-content:flex-start} .ps-head--sub .ph{font-size:.9rem;color:var(--app-ink-2)} /* card header: icon Β· title Β· trailing link (Figma 33826:14672) */ .ps-head--card{align-items:center;gap:12px;padding:2px 6px 0} .ps-head--card .ic{width:15px;height:15px;object-fit:contain;display:block;flex:0 0 auto} .ps-head--card span{flex:1;min-width:0} .ps-head__link{font-size:.6875rem;line-height:1.4286;font-weight:700;color:#8787AB} .ps-searchrow{display:flex;align-items:center;gap:9px} .ps-search{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:37px; border-radius:100px;background:#E7E7EF;padding-inline:12px} .ps-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:.6875rem;line-height:1.4286;letter-spacing:-.115px;color:#8787AB} .ps-search img,.ps-filter img{width:15px;height:15px;object-fit:contain;display:block;flex:0 0 auto} .ps-filter{width:37px;height:37px;flex:0 0 auto;display:grid;place-items:center; border-radius:100px;background:#E7E7EF} /* ---- cards (Figma: radius 24 / pad 16 / gap 20, scaled) ---- */ .ps-card{background:var(--app-card);border-radius:18px;padding:12px;box-shadow:var(--card-shadow)} /* rows carry their own 8px bottom padding, so the card adds only 5 β€” Figma is pt 16 / pb 6 */ .ps-card--wines,.ps-card--styles{padding-bottom:5px} .ps-card__head{display:flex;align-items:center;gap:12px;font-size:.6875rem;color:var(--app-ink)} .ps-card__head b{flex:1;font-weight:700;letter-spacing:-.077px} .ps-card__head .ic{width:15px;height:15px;object-fit:contain;display:block;flex:0 0 auto} .ps-card__head .ic--ph{display:grid;place-items:center;font-size:.95rem;color:var(--app-ink)} .ps-card--stock{display:flex;flex-direction:column} .plusbadge{height:18px;width:auto;display:block;flex:0 0 auto} /* chevron: the Figma asset is a down-caret, rotated -90 as the component does */ .chev{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto} .chev img{width:8.2px;height:4.7px;display:block;transform:rotate(-90deg)} /* ---- four stats (label 14/20 #8787AB, value SF Pro Display Bold 24/28) ---- */ .ps-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:15px 0 0} .ps-stats em{font-style:normal;display:block;font-size:.6875rem;font-weight:400;line-height:1.4286; color:#8787AB;letter-spacing:-.115px} .ps-stats b{display:block;font-size:1.125rem;line-height:1.1667;font-weight:700;letter-spacing:0; color:var(--app-ink);font-variant-numeric:tabular-nums} /* the Figma stats row is whitespace-nowrap; without it a label wraps and drops its value out of line with the others */ .ps-stats{white-space:nowrap} .ps-stats--3{grid-template-columns:repeat(3,1fr)} /* ---- drink windows: the hairline runs under the text only, never the icon ---- */ .ps-drink{list-style:none;margin:12px 0 0;padding:0} .ps-drink li{display:flex;align-items:center;gap:12px} .ps-drink .ic{width:15px;height:15px;object-fit:contain;display:block;flex:0 0 auto} .ps-drink .row{flex:1;display:flex;align-items:center;gap:4px;padding:8px 0; border-bottom:1px solid var(--app-line)} .ps-drink li:last-child .row{border-bottom:0} .ps-drink .nm{flex:1;font-size:.6875rem;letter-spacing:-.115px;color:var(--app-ink)} .ps-drink b{font-size:.6875rem;font-weight:700;letter-spacing:-.077px;color:var(--app-ink); font-variant-numeric:tabular-nums} /* ---- price pair (Figma 21119:4450) ---- */ .ps-price{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:2px 6px 0} /* 1px hairline between the two figures, as in the Figma summary row */ .ps-price::after{content:'';position:absolute;top:50%;left:50%;translate:-50% -50%; width:1px;height:21px;background:#E7E7EF} .ps-price .lbl{display:flex;align-items:center;gap:6px;font-size:.6875rem;line-height:1.4286; letter-spacing:-.115px;color:#8787AB} .ps-price .ind{width:2px;border-radius:100px;flex:0 0 auto} /* buying price reads as two stacked dashes, matching its dashed plot line */ .ps-price .ind--buy{height:9px; background:linear-gradient(#E89608 0 37.5%,transparent 37.5% 62.5%,#E89608 62.5%)} .ps-price .ind--mkt{height:9px;background:#2369F5} .ps-price b{display:block;font-size:1.125rem;line-height:1.1667;font-weight:700;letter-spacing:0; color:var(--app-ink);font-variant-numeric:tabular-nums} .ps-price .chg{display:flex;align-items:center;gap:4px;font-size:.625rem;line-height:1.4286; letter-spacing:-.115px;white-space:nowrap} /* the exported triangles point the wrong way on their own β€” Figma flips them vertically in place, so up reads up and down reads down */ .ps-price .chg img{width:11px;height:11px;display:block;flex:0 0 auto;scale:1 -1} .ps-price .chg em{font-style:normal;color:var(--app-ink)} .ps-price u{text-decoration:none} .ps-price .up{color:#009F79} .ps-price .dn{color:#BE2C55} /* ---- chart (Figma 33826:14672) β€” vectors are the exported Figma paths ---- */ .ps-chart{display:grid;grid-template-columns:1fr auto;gap:6px} .ps-chart__plot{position:relative;height:165px} .ps-chart__plot .grid{position:absolute;inset:0 9px;display:flex;justify-content:space-between} .ps-chart__plot .grid i{width:1px;height:100%;background:#EFEFF4;display:block} /* the plot sits 27.5px / 22px inside the 174px gridline box in Figma */ .ps-chart svg{position:absolute;left:9px;right:9px;top:15.8%;bottom:12.6%;width:auto;height:auto; overflow:visible} .ps-chart .ln{fill:none;stroke-width:1.9;vector-effect:non-scaling-stroke} .ps-chart .ln--mkt{stroke:#2369F5} .ps-chart .ln--buy{stroke:#E89608;stroke-dasharray:4.7 3.1} .ps-chart__y{grid-column:2;display:flex;flex-direction:column;justify-content:space-between; align-items:flex-end;font-size:.5625rem;line-height:1.33;color:#8787AB;padding-bottom:2px} .ps-chart__x{grid-column:1;display:flex;justify-content:space-between;font-size:.5625rem; line-height:1.33;color:#8787AB;padding-top:3px} .ps-chart__x em,.ps-chart__y em{font-style:normal;text-align:center} .ps-chart__x em{width:20px} /* ---- time segmented control (Figma 33826:14672) β€” label only, no deltas ---- */ .ps-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2px; background:#E7E7EF;border-radius:1000px;padding:3px} .ps-seg button{position:relative;z-index:2;border:0;background:none;font:inherit;cursor:default; display:flex;align-items:center;justify-content:center; min-height:0;padding:5px 12px;border-radius:1000px} .ps-seg button span{font-size:.6875rem;line-height:1.4286;font-weight:400;letter-spacing:-.115px; color:#8787AB;white-space:nowrap} .ps-seg button.is-on span{font-weight:700;color:var(--app-ink)} .ps-seg__pill{position:absolute;z-index:1;top:3px;left:3px;height:calc(100% - 6px); border-radius:1000px;background:#fff;box-shadow:0 2px 4px rgb(0 0 0 / .02)} /* ---- average price pair ---- */ .ps-avg{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:1px 2px} .ps-avg span{display:block;font-size:.6875rem;line-height:1.4286;letter-spacing:-.115px;color:#8787AB} .ps-avg b{display:block;font-size:1.125rem;line-height:1.1667;font-weight:700; color:var(--app-ink);font-variant-numeric:tabular-nums} /* ---- Top Styles card: donut + legend, straight off the Figma node ---- */ .ps-card--styles{display:flex;flex-direction:column;gap:15px} .ps-donut{display:grid;place-items:center;padding-top:2px} .ps-donut svg{width:138px;height:138px;transform:rotate(-90deg)} .ps-donut .sg{fill:none;stroke-width:21;stroke-linecap:butt} .ps-legend{list-style:none;margin:0;padding:0} .ps-legend li{display:flex;align-items:center;gap:12px} .ps-legend .dot{width:15px;height:15px;border-radius:50%;display:block;flex:0 0 auto; border:.62px solid var(--app-line-2)} .ps-legend .row{flex:1;display:flex;align-items:center;gap:4px;padding:8px 0; border-bottom:1px solid var(--app-line)} .ps-legend li:last-child .row{border-bottom:0} .ps-legend em{font-style:normal;width:13px;text-align:center;font-size:.6875rem; letter-spacing:-.115px;color:var(--app-ink)} .ps-legend .nm{flex:1;font-size:.6875rem;letter-spacing:-.115px;color:var(--app-ink)} .ps-legend b{font-size:.6875rem;font-weight:700;letter-spacing:-.077px;color:var(--app-ink); font-variant-numeric:tabular-nums} /* ---- bottom nav (Figma 21119:4529) β€” icons are the exported Figma SVGs ---- */ .ps-nav{position:absolute;left:16px;right:16px;bottom:13px;z-index:4; display:flex;align-items:center;gap:8px} .ps-nav__bar{flex:1;display:grid;grid-template-columns:repeat(4,1fr);padding:3px; border-radius:1000px;background:#F7F7F7;backdrop-filter:blur(20px); box-shadow:1px 1px 7px rgb(0 0 0 / .04), 0 -6px 26px -4px rgb(50 48 79 / .12)} .ps-nav__i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:5px 4px;border-radius:1000px} .ps-nav__i img{width:18px;height:18px;object-fit:contain;display:block} .ps-nav__i em{font-style:normal;font-size:.53125rem;line-height:1.1;font-weight:600; letter-spacing:.17px;color:#000;white-space:nowrap} .ps-nav__i.is-on{background:#EDEDED} .ps-nav__i.is-on em{color:#BE2C55} .ps-nav__search{width:47px;height:47px;border-radius:50%;flex:0 0 auto;display:grid; place-items:center;background:#F7F7F7;backdrop-filter:blur(20px); box-shadow:1px 1px 7px rgb(0 0 0 / .04), 0 -6px 26px -4px rgb(50 48 79 / .12)} .ps-nav__search img{width:18px;height:18px;object-fit:contain;display:block} .ps-fab{position:absolute;right:18px;bottom:65px;z-index:5;width:41px;height:41px; border-radius:50%;background:#BE2C55;display:grid;place-items:center; box-shadow:0 10px 22px -8px rgb(190 44 85 / .65)} .ps-fab img{width:15px;height:15px;display:block} .fl{position:absolute;z-index:3;display:flex;align-items:center;gap:10px; background:rgb(255 255 255 / .96);border-radius:var(--r-md);padding:10px 13px; box-shadow:0 18px 36px -16px rgb(0 0 0 / .5);white-space:nowrap;will-change:transform} .fl .ph{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:.9rem; background:var(--burgundy-tint);color:var(--burgundy-deep);flex:0 0 auto} .fl > span{text-align:left} .fl b{display:block;font-size:.75rem;font-weight:600;color:#141319;line-height:1.25;text-align:left} .fl span{display:block;font-size:.625rem;color:var(--ink-3);line-height:1.3;text-align:left} /* measured off the device centre so they actually break its edges */ .fl--1{top:4%;left:50%;margin-left:-290px} .fl--2{top:34%;left:50%;margin-left:126px} .fl--3{bottom:26%;left:50%;margin-left:-298px} .fl--2 .ph{background:var(--burgundy-tint);color:var(--burgundy)} .fl--3 .ph{background:#F9F0E5;color:#A18060} .fl--1 .ph{background:#E7F4EE;color:#2F7C5F} .fl--2 .ph{background:#FDECF1;color:#D9376B} /* chips belong to a scene β€” the inactive ones recede */ .fl{transition:opacity .5s var(--ease),filter .5s var(--ease)} .js .phone-wrap .fl[data-for]{opacity:.3;filter:saturate(.5)} .js .phone-wrap .fl[data-for].is-live{opacity:1;filter:none} @media (max-width:900px){.fl--1{margin-left:-210px}.fl--2{margin-left:20px}.fl--3{margin-left:-205px} .fl{padding:8px 10px}} /* ---------- FAQ ---------- */ .faq-wrap{display:grid;grid-template-columns:1fr;gap:var(--space-7)} @media (min-width:1000px){.faq-wrap{grid-template-columns:.72fr 1.28fr;gap:var(--space-8);align-items:start}} .faq-aside{position:sticky;top:120px;display:grid;gap:var(--space-5)} .faq-aside h2{max-width:12ch} .faq-card{background:var(--surface);border-radius:var(--r-lg);padding:var(--space-6); box-shadow:0 1px 2px rgb(23 22 22 / .05), 0 0 0 1px rgb(23 22 22 / .06);display:grid;gap:var(--space-4)} .faq-card .ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--burgundy-tint); color:var(--burgundy-deep);display:grid;place-items:center;font-size:1.15rem} .faq-card b{font-family:var(--font-display);font-weight:700;font-size:1.1875rem;letter-spacing:-.025em} .faq-card p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.48;letter-spacing:-.02em} .faq-card .avs{display:flex} .faq-card .avs i{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface); background:var(--placeholder);margin-left:-9px;display:block} .faq-card .avs i:first-child{margin-left:0} .faq{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .faq__head{width:100%;text-align:left;cursor:pointer;padding:var(--space-5) var(--space-6);display:grid; grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center} .faq__q{font-family:var(--font-display);font-size:1.1875rem;letter-spacing:-.025em} .acc-n{font-family:var(--font-meta);font-size:.625rem;letter-spacing:.1em;color:var(--ink-3); padding:4px 7px;border-radius:var(--r-sm);background:var(--paper-2); transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .faq__pm{font-family:var(--font-meta);color:var(--ink-3);width:30px;height:30px;border:1px solid var(--hairline); border-radius:var(--r-md);display:grid;place-items:center;transition:transform var(--dur-ui) var(--ease)} .faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)} .faq__row.is-open .faq__body{grid-template-rows:1fr} .faq__body > div{overflow:hidden;min-height:0} .faq p{padding:0 var(--space-6) var(--space-6) calc(var(--space-6) + 42px);color:var(--ink-2);max-width:70ch; line-height:1.48;letter-spacing:-.02em;opacity:0;transform:translateY(-6px); transition:opacity .3s var(--ease) .06s,transform .3s var(--ease) .06s} .faq__row.is-open p{opacity:1;transform:none} .faq__row{border-bottom:1px solid var(--hairline)} .faq__row:last-child{border-bottom:0} .faq__row.is-open{background:var(--paper)} .faq__row.is-open .acc-n{background:var(--ink);color:#fff} .faq__row.is-open .faq__pm{transform:rotate(45deg)} @media (hover:hover){.faq__head:hover{background:var(--paper)}} /* ---------- CTA (Smoovly closing panel) ---------- */ .cta-panel{background:var(--paper-2);border-radius:var(--r-lg);text-align:center; padding:clamp(140px,15vw,230px) var(--gutter) clamp(48px,6vw,80px);position:relative; margin-top:clamp(150px,17vw,250px)} .cta-panel .fan{position:absolute;top:-32px;left:0;right:0;transform:translateY(-62%);margin-top:0;min-height:0; pointer-events:none} .cta-panel .fan__card{width:clamp(170px,16.5vw,220px);margin-inline:clamp(-28px,-2vw,-9px)} .cta-panel h2{max-width:18ch;margin:var(--space-4) auto var(--space-4)} .cta-panel .btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-6)} /* ---------- FOOTER ---------- */ .footer{background:var(--surface);border-top:1px solid var(--hairline);padding-block:var(--section-sm)} .f-top{display:grid;grid-template-columns:1fr;gap:var(--space-6); padding-bottom:var(--space-7);border-bottom:1px solid var(--hairline)} @media (min-width:900px){.f-top{grid-template-columns:1.6fr 1fr;align-items:center}} .f-brand .logo{font-size:1.5rem;display:inline-flex;margin-bottom:var(--space-4)} .f-brand p{color:var(--ink-2);font-size:var(--fs-small);max-width:44ch} .f-mail{text-align:right;display:flex;flex-direction:column;justify-content:center} .f-mail .meta{display:block} .f-mail a{font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.03em; display:block;margin-top:var(--space-3)} @media (hover:hover){.f-mail a:hover{color:var(--burgundy)}} @media (max-width:899px){.f-mail{text-align:left}} .f-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-7) var(--space-5); padding-block:var(--space-7)} @media (min-width:900px){.f-cols{grid-template-columns:1.6fr repeat(3,1fr)}} .f-cols h5{margin-bottom:var(--space-4)} .f-cols li{margin-bottom:var(--space-2)} .f-cols a{font-size:var(--fs-small);color:var(--ink-2)} @media (hover:hover){.f-cols a:hover{color:var(--ink)}} .f-news{background:var(--paper-2);border-radius:var(--r-lg);padding:var(--space-6);align-self:start} .f-news form{position:relative;margin-top:var(--space-4);max-width:390px} .f-news input{width:100%;height:56px;padding:0 106px 0 22px;border:1px solid var(--hairline-strong); border-radius:var(--r-btn);background:var(--surface);font:inherit;font-size:var(--fs-small)} .f-news input:focus{outline:none;border-color:var(--ink)} .f-news form .btn{position:absolute;top:6px;right:6px;height:44px;border-radius:var(--r-btn); padding:0 22px;font-size:.875rem} .f-news h4{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin-top:var(--space-3)} .f-bottom{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center; border-top:1px solid var(--hairline);padding-block:var(--space-5)} .dot{width:6px;height:6px;border-radius:50%;background:var(--status);display:inline-block;margin-right:.5em} /* ---------- MOTION PRIMITIVES ---------- */ /* the mask must clear descenders, or "operating system" loses its p/y tails */ /* The mask has to hide the line waiting below at yPercent 118 without clipping descenders, which overflow the box at --lh-display .9. Padding plus a negative margin did that but grew the heading by 6px, because the last child's negative margin collapses out of the parent instead of shrinking it. clip-path does not participate in layout at all, so the split costs nothing. */ .line-wrap{display:block;clip-path:inset(-.6em -.6em -.16em -.6em)} .js .fx-up{opacity:0;transform:translateY(24px)} .js .fx-blur{opacity:0;transform:translateY(28px);filter:blur(8px)} .js .fx-scale{opacity:0;transform:scale(.97)} @media (prefers-reduced-motion:reduce){ .js .fx-up,.js .fx-blur,.js .fx-scale{opacity:1!important;transform:none!important;filter:none!important} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ============================================================ MOBILE ADJUSTMENTS ============================================================ */ @media (max-width:768px){ /* no tab switching on a phone β€” you just scroll, so every group is shown with its own label and the switcher itself is dropped */ #segments .switch{display:none} #segments .segpanel{display:grid !important;margin-bottom:var(--space-7)} #segments .segpanel:last-of-type{margin-bottom:0} .seg-group-label{display:block;font-family:var(--font-meta);font-size:var(--fs-meta); letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--ink-3); margin:0 0 var(--space-3) 2px} /* the product showcase keeps its tabs (four big mockups would run forever), but as a snapping scroller with a peek and a fade rather than a grid */ #product .switch{max-width:none;margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);border-radius:0;background:transparent;box-shadow:none; scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter); -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)} #product .switch button{flex:0 0 auto;scroll-snap-align:start; background:var(--paper-2);border-radius:var(--r-pill)} #product .switch button[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow-card)} #product .switch__thumb{display:none} /* the review stack sits tight rather than page-length apart */ .tstack{gap:8px} .tstack > *{margin-top:0 !important} /* the mobile-app section reads centred */ .section--cellar .app-row{text-align:center} .section--cellar .app-row .lede{margin-inline:auto} .section--cellar .badges{justify-content:center} .section--cellar .app-row h2{margin-inline:auto} /* footer columns stack */ .f-cols{grid-template-columns:1fr;gap:var(--space-6)} .f-top{gap:var(--space-5)} /* the desktop screen runs off the right edge of the viewport */ .appwin-scaler{width:calc(100% + var(--gutter));border-top-right-radius:0;border-bottom-right-radius:0} } @media (max-width:1023px){ /* chips sit wider of the device and lower */ .fl--1{margin-left:-232px;top:calc(4% + 24px)} .fl--2{margin-left:96px;top:calc(37% + 24px)} .fl--3{margin-left:-240px;bottom:calc(26% - 24px)} } @media (max-width:640px){ .fl--1{margin-left:-176px} .fl--2{margin-left:34px} .fl--3{margin-left:-184px} } /* ============================================================ AI WINE IMPORT β€” the spreadsheet becomes the cellar One table, two states, cross-faded on scroll: Excel column letters, gridlines and a formula bar give way to the Vinify header, bottle thumbs, steppers and coloured style tags. ============================================================ */ .imp-row{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center} @media (min-width:1024px){.imp-row{grid-template-columns:.86fr 1.14fr;gap:clamp(40px,4vw,72px)}} .imp-row > div:first-child{display:flex;flex-direction:column;align-items:flex-start} .imp-row .checks{margin-block:var(--space-6) var(--space-5)} .imp-quote{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:center; padding:var(--space-4) 0 var(--space-6);border-top:1px solid var(--hairline-soft); margin-bottom:var(--space-5);width:100%} .imp-quote b{font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.04em; line-height:1;color:var(--gold-2);white-space:nowrap;padding-top:6px} .imp-quote span{font-size:var(--fs-card);line-height:1.35;letter-spacing:-.01em;color:var(--ink-2)} .imp-quote em{color:var(--ink-3)} .imp-vis{position:relative} .imp-state{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-4); font-family:var(--font-meta);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase} .imp-state em{color:var(--ink-3);transition:color var(--dur-ui) var(--ease)} .imp-state em.is-on{color:#fff} .imp-state i{flex:1;max-width:64px;height:1px;background:var(--hairline-strong);position:relative} .imp-state i::after{content:"";position:absolute;right:-1px;top:-2px;border:3px solid transparent; border-left-color:var(--hairline-strong)} /* the sheet/table island keeps a light UI on the dark chapter */ .xl{position:relative;border-radius:var(--r-lg);background:var(--surface);overflow:hidden; box-shadow:0 40px 90px -44px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .08)} .xl__bar{position:relative;display:flex;align-items:center;gap:var(--space-4); padding:12px 16px;min-height:52px;border-bottom:1px solid var(--hairline-soft)} .xl__green{position:absolute;inset:0;background:#0F7B4F;opacity:0} /* both title layers span the whole bar, so their clip-path percentages stay in lockstep with the green band's as the wipe crosses the words */ .xl__title{position:absolute;inset:0;display:flex;align-items:center;padding-left:16px; font-family:var(--font-display);font-weight:700;font-size:1.125rem; letter-spacing:-.03em;white-space:nowrap;pointer-events:none} .xl__title--d{color:var(--ink)} .xl__title--w{color:#fff;opacity:0} .xl__acts{position:relative;display:flex;gap:8px;margin-left:auto} .xl__strip{position:relative;height:44px;padding:0 16px;display:flex;align-items:center; border-bottom:1px solid var(--hairline-soft)} .xl__fx,.xl__filters{position:absolute;left:16px;right:16px;display:flex;align-items:center;gap:8px} .xl__fx{opacity:0} .xl__fx em{font-family:var(--font-meta);font-size:.6875rem;font-style:italic;color:var(--ink-3); padding-right:11px;border-right:1px solid var(--hairline);margin-right:4px} .xl__fx > span{font-size:.78125rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xl__filters .aw-find{flex:0 1 190px} .xl__grid{padding:0} .xl__head,.xl__row{display:grid;grid-template-columns:1fr 80px 60px 60px 150px;align-items:center} .xl__head{height:28px;background:var(--paper-2);border-bottom:1px solid var(--hairline)} .xl__head .cell{position:relative;justify-content:center} .xl__head .cell.r,.xl__head .cell.c{justify-content:center} .xl__head em.a{opacity:0} .xl__head em{position:absolute;left:0;right:0;text-align:center; font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);padding-inline:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .xl__head em.v{text-align:left} .xl__head .cell.r em.v,.xl__head .cell.c em.v{text-align:center} .xl__row{height:48px;border-bottom:1px solid var(--hairline-soft);font-size:.78125rem; color:var(--ink-2);font-variant-numeric:tabular-nums} .xl__row:last-child{border-bottom:0} .cell{position:relative;display:flex;align-items:center;gap:9px;height:100%;padding-inline:11px; min-width:0;border-right:1px solid transparent} .cell:last-child{border-right:0} .cell.r{justify-content:flex-end}.cell.c{justify-content:center} .cell.nm b{font-weight:600;font-size:.8125rem;letter-spacing:-.01em;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cell .th{flex:0 0 auto;width:26px;height:34px;border-radius:var(--r-sm);background:#F1DDE2; overflow:hidden;display:grid;place-items:end center} .cell .th.white{background:#F3EEDC}.cell .th.rose{background:#F7E4E6} .cell .th img{height:40px;width:auto;max-width:none;object-fit:contain;mix-blend-mode:multiply} .cell.q{gap:7px;font-weight:600;color:var(--ink)} .cell .st{width:19px;height:19px;border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink-2); display:grid;place-items:center;font-size:.6875rem;text-decoration:none;line-height:1} /* the Excel selection ring on the first cell */ .cell .sel{position:absolute;inset:1px 2px;border:2px solid #1A73E8;border-radius:1px; text-decoration:none;pointer-events:none;opacity:0} .xl__foot{display:flex;align-items:center;gap:6px;padding:8px 14px;border-top:1px solid var(--hairline); background:var(--paper-2)} .xl__tab{font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-3); padding:4px 10px;border-radius:var(--r-sm)} .xl__tab:first-child{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)} .xl__sync{margin-left:auto;display:inline-flex;align-items:center;gap:7px; font-family:var(--font-meta);font-size:.5625rem;letter-spacing:.06em;color:var(--green-ink)} .xl__sync i{width:6px;height:6px;border-radius:50%;background:var(--status);display:block} @media (max-width:1023px){ .xl__head,.xl__row{grid-template-columns:1fr 72px 52px 130px} .xl__head .cell:nth-child(4),.xl__row .cell:nth-child(4){display:none} } @media (max-width:600px){ .xl__head,.xl__row{grid-template-columns:1fr 62px 108px} .xl__head .cell:nth-child(3),.xl__row .cell:nth-child(3){display:none} .xl__title{font-size:1rem}.xl__acts{display:none} } /* ---- bottle: contained, never cropped ------------------------------- The asset is 275Γ—960 (ratio .286) where Figma's crop is .69, so it is held by the box's max dimensions and keeps its own proportions. ---- */ .appwin .aw-panel__id .sw{width:calc(108px * var(--s));height:calc(156px * var(--s)); overflow:visible;display:grid;place-items:center;background:none} /* percentage max-* does not resolve against the grid area here, so the cap is stated in absolute terms */ .appwin .aw-panel__id .sw img{width:auto;height:auto; max-width:calc(108px * var(--s));max-height:calc(156px * var(--s)); object-fit:contain;mix-blend-mode:normal} /* Public profile / overflow buttons (33839:18047): h-24, px-8 py-2, r-6, white on a #DCDCE7 hairline β€” not the larger header-button metrics */ .appwin .aw-panel__top{gap:var(--sp-8)} .appwin .aw-panel__top .aw-btn{height:calc(24px * var(--s)); padding:calc(2px * var(--s)) var(--sp-8);border-radius:calc(6px * var(--s)); border:1px solid #DCDCE7;background:#fff;color:var(--ink); font-size:var(--f-body);line-height:var(--lh-body);font-weight:600;box-shadow:none} .appwin .aw-panel__top .aw-btn--ic{width:calc(24px * var(--s));padding:0;justify-content:center} .appwin .aw-panel__top .aw-btn--ic .ph{font-size:calc(14px * var(--s))} /* The panel narrowed to 46%, so the seven-column log no longer fit and Ratio was being clipped. It is dropped (it is derivable from selling / buy). */ /* Six columns sized so the Activity chip's min-content still fits the 1fr track β€” the previous widths left it only 45px and the row overflowed. */ .appwin .aw-log__h,.appwin .aw-log__r{ grid-template-columns:66px minmax(0,1fr) 40px 38px 74px 66px;gap:8px} /* the header row needs air before the figures */ .appwin .aw-mkt__h{margin-bottom:var(--sp-20)} /* the refresh glyph sits on the dark pill, so it reads white β€” the burgundy rule above is meant for the card's own title icon */ .appwin .aw-mkt__h .aw-btn--dark .ph{color:#fff} /* ---- activity badges take the category chip's metrics, keep their own colours (Removed / Sold / Added) ---- */ .appwin .bg{display:inline-flex;align-items:center;justify-content:center; padding:calc(2px * var(--s)) calc(8px * var(--s));border-radius:calc(4px * var(--s)); font-size:calc(12px * var(--s));line-height:calc(16px * var(--s)); font-weight:600;letter-spacing:0} /* ---- right edges line up: the overflow button, the note, and the cards in the grey pane all stop at the same inset ---- */ .appwin .aw-panel__id{padding-right:var(--sp-16)} .appwin .aw-panel__top{right:var(--sp-16);top:var(--sp-16)} /* the tabs row and the pane below it were each drawing a rule β€” one is enough */ .appwin .aw-tabs{border-bottom:0} /* market figures match the weekly-stats figures */ .appwin .aw-mkt__g b,.appwin .aw-week b{font-size:calc(20px * var(--s));line-height:1.2} /* and sit closer to their caption */ .appwin .aw-mkt__g span,.appwin .aw-week span{gap:0} /* input label: flush with the field's left edge, with a little air below β€” 2px read as none, Figma's 4px read as too much at this scale */ .appwin .aw-fields em{padding-inline:0;padding-bottom:calc(3px * var(--s))} /* ---- row thumbnails: no swatch behind the bottle, and the whole bottle shows. The image was 40px tall in a 34px box with overflow hidden, so it was being cropped top and bottom. ---- */ .appwin .aw-row .sw, .appwin .aw-row .sw.white, .appwin .aw-row .sw.rose{background:none;border-radius:0;overflow:visible; display:grid;place-items:center} .appwin .aw-row .sw img{width:auto;height:auto; max-width:calc(26px * var(--s));max-height:calc(44px * var(--s)); object-fit:contain;mix-blend-mode:normal} /* the log header matches the wines table header β€” white ground, ink label */ .appwin .aw-log__h{background:#fff;color:var(--ink)} /* a touch more air under the input label */ .appwin .aw-fields em{padding-bottom:calc(4px * var(--s))} /* The three-up row: the first field matches the half-width field in the row above, and the remaining two split that other half evenly. */ .appwin .aw-fields--3{grid-template-columns:calc((100% - 10px) / 2) 1fr 1fr} /* Activity only needs room for its badge; the columns after it move left and the slack collects at the end of the row rather than inside it. */ .appwin .aw-log__h,.appwin .aw-log__r{ grid-template-columns:66px 84px 40px 38px 74px 70px} /* half again on the gap between the figures and the plot (20 -> 30) */ .appwin .aw-val{margin-bottom:calc(30px * var(--s))} /* The same column proportions, but expressed in fr so they take up the slack and fill the row: the last column now ends the same distance from the right edge as the first starts from the left. */ .appwin .aw-log__h,.appwin .aw-log__r{ grid-template-columns:66fr 84fr 40fr 38fr 74fr 70fr} /* ============================================================ EXCEL / CELLAR CARD β€” same treatments as the app table The card sits outside .appwin, so the component rules are restated here against the shared scale tokens. ============================================================ */ .xl .xl__title{font-size:calc(32px * var(--s));line-height:calc(36px * var(--s));letter-spacing:0} /* header actions */ .xl .aw-btn{height:auto;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12); border-radius:var(--rad-8);border-color:transparent;background:var(--surface); font-size:var(--f-body);line-height:var(--lh-body);font-weight:600;color:var(--ink); box-shadow:0 2px 4px rgb(0 0 0 / .02)} .xl .aw-btn .ph{font-size:var(--ic)} .xl .aw-btn--go{background:var(--burgundy);border-color:var(--burgundy);color:#fff;box-shadow:none} /* search and filter chips share one grey field, no borders, no carets */ .xl .aw-find,.xl .aw-drop{height:auto;padding:var(--sp-8) var(--sp-12); border-radius:var(--rad-8);background:var(--paper-3);border:0;gap:var(--sp-12); font-size:var(--f-body);line-height:var(--lh-body);color:var(--ink)} .xl .aw-find{color:var(--ink-3)} .xl .aw-find img,.xl .aw-drop img{width:var(--ic);height:var(--ic);object-fit:contain;display:block} .xl .aw-drop u{display:none} /* column headings match the wines table: white ground, ink micro-caps */ .xl .xl__head{background:#fff} .xl .xl__head em{font-family:var(--font-text);color:var(--ink); font-size:calc(11px * var(--s));line-height:calc(12px * var(--s)); letter-spacing:calc(1.2px * var(--s));font-weight:600;text-transform:uppercase} /* one type size down the row, as in the table */ .xl .xl__row{font-size:var(--f-body);line-height:var(--lh-body)} .xl .cell.nm b,.xl .cell.q,.xl .cell .st{font-size:var(--f-body);line-height:var(--lh-body)} /* thumbnails lose the coloured swatch and show the whole bottle */ .xl .cell .th,.xl .cell .th.white,.xl .cell .th.rose{background:none;border-radius:0; overflow:visible;display:grid;place-items:center} .xl .cell .th img{width:auto;height:auto; max-width:calc(26px * var(--s));max-height:calc(44px * var(--s)); object-fit:contain;mix-blend-mode:normal} /* style chips take the category chip's metrics */ .xl .tg{display:inline-flex;align-items:center;justify-content:center; padding:calc(2px * var(--s)) calc(8px * var(--s));border-radius:calc(4px * var(--s)); font-size:calc(12px * var(--s));line-height:calc(16px * var(--s));font-weight:600} /* the footer is body copy, not mono micro-caps */ .xl .xl__foot{background:#fff} .xl .xl__tab,.xl .xl__sync{font-family:var(--font-text);font-size:var(--f-body); line-height:var(--lh-body);letter-spacing:0} .xl .xl__tab{padding:calc(2px * var(--s)) var(--sp-8);border-radius:var(--rad-8)} /* ============================================================ AI WINE IMPORT β€” the text column now carries the same treatments as the showcase splits (pill label, heading size, body copy), and the visual gives back some width. ============================================================ */ @media (min-width:1024px){ /* the column split stays as designed so the table does not reflow and truncate wine names; the card is scaled instead, which opens the gutter without taking width off either column */ .imp-row{grid-template-columns:.86fr 1.14fr;gap:clamp(56px,6vw,104px)} .imp-vis .xl{transform:scale(.95);transform-origin:top right} } /* the stat quote reads as a pull-quote: the claim, then the figure and source */ .imp-quote{display:block;align-self:stretch;margin:0;padding-top:var(--space-5); border-top:1px solid var(--hairline);border-left:0} .imp-quote blockquote{margin:0;font-family:var(--font-display);font-weight:400; font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.4;letter-spacing:-.015em; color:var(--ink)} .imp-quote figcaption{display:flex;align-items:baseline;gap:var(--space-4); margin-top:var(--space-4)} .imp-quote cite{font-family:var(--font-meta);font-style:normal;font-size:.6875rem; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* the spreadsheet focus ring was heavier than a real cell selection */ .xl .cell .sel{border-width:1.5px;border-radius:2px} /* the wider gutter and the 0.95 scale cost the name column ~30px, so the fixed columns give some back rather than truncating wine names */ /* the chip now carries the row's type size, so STYLE needs more room; the name column still clears its longest entry */ .xl .xl__head,.xl .xl__row{grid-template-columns:1fr 76px 56px 56px 162px} /* the card title is a card title, not a page heading */ .xl .xl__title{font-size:calc(24px * var(--s));line-height:calc(30px * var(--s))} /* the selection ring sits on the cell bounds, like a real spreadsheet */ .xl .cell .sel{inset:0;border-radius:1px} /* in the dark nav the whole mark goes white, diamond included; the light header keeps the burgundy */ .header.is-stuck .logo svg path[fill="#BE2C55"]{fill:#fff} /* every cell reads at one size and sits on the cell's centre line */ .xl .cell{align-items:center} .xl .cell .tg{line-height:var(--lh-body)} /* the state label rides with the scaled card so their left edges agree */ @media (min-width:1024px){ .imp-vis .imp-state{transform:scale(.95);transform-origin:top right} } /* The selection ring sits on the gridlines rather than inside them, the way a spreadsheet draws it β€” inset:0 left a hairline of cell showing on two sides. */ /* the ring paints above the gridlines it replaces, not beneath them */ .xl .cell .sel{inset:0 -1px -1px 0;border-width:2px;border-radius:1px;z-index:3} .xl .xl__row{position:relative} .xl .xl__row:has(.sel){z-index:2} /* the style chip shares the row's line box exactly, so its text sits on the same centre line as the numbers beside it */ .xl .cell .tg{line-height:inherit;font-size:var(--f-body)} /* the lede matches the section intro paragraph, not the hero lede scale */ .imp-row .lede{font-size:var(--fs-body);line-height:1.48;letter-spacing:-.02em} /* One left edge down the card: title, search, the WINE heading, the rows and the footer all start at the bar's 16px inset. Only the first column takes it β€” 16px on the narrow numeric columns wrapped their values. */ .xl .xl__row > .cell:first-child, .xl .xl__head > .cell:first-child{padding-left:16px} .xl .xl__head > .cell:first-child em{padding-inline:16px} .xl .xl__foot{padding-inline:16px} /* While the section is pinned the page is frozen, so any sliver of the next section showing under it reads as the page having jammed. Filling the viewport removes that seam and makes the hold look deliberate. */ @media (min-width:1024px){ /* grid, not flex: as a flex item the container lost its auto margins and the content slid to the viewport edge. Grid keeps the container's own width and centring while still centring it vertically in the taller section. */ #import{min-height:100vh;display:grid;align-content:center} } /* The cell centres inside the row's content box (47px) while the visible row between the two gridlines is 48px, so text sat half a pixel high. The compensation is half the border, not the whole one β€” 2px pushed it a full pixel the other way. */ .xl .cell{padding-top:1px;min-height:0} /* the thumbnail is taller than the sheet's 30px row, so it must not set the cell's min-content floor β€” that floor was pushing the cell (and the selection ring with it) ~5px past the row's gridline */ .xl .cell .th{min-height:0} /* ============================================================ PRICING β€” Luka's card design kept as-is (centred, 360px cards, badge in the head). Two things changed: the mono meta face is swapped for the page's text face, and the in-app photographic ground is replaced with the page's own light surface, since it otherwise landed black-on-black under the cellar section. ============================================================ */ .pw{position:relative;background:var(--paper);color:var(--ink); padding:clamp(88px,9vw,128px) 24px clamp(56px,7vw,96px)} .pw__inner{max-width:792px;margin:0 auto;display:flex;flex-direction:column; align-items:center;gap:24px} .pw-eyebrow{display:inline-flex;align-items:center;min-height:20px;padding:3px 10px; border-radius:999px;background:var(--burgundy-tint);color:var(--burgundy); font-family:var(--font-text);font-size:.75rem;font-weight:600;letter-spacing:.01em} .pw-title{font-family:var(--font-display);font-weight:700; font-size:clamp(28px,3.4vw,44px);line-height:1.15;letter-spacing:-.03em; text-align:center;margin:0;color:var(--ink)} .pw-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--paper-2)} .pw-toggle button{border:0;background:none;font:inherit;cursor:pointer;padding:7px 16px; border-radius:999px;font-size:var(--fs-small);font-weight:500;color:var(--ink-3); transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .pw-toggle button.is-on{background:var(--surface);color:var(--ink);font-weight:600; box-shadow:var(--shadow-card)} .pw-toggle em{font-style:normal;color:var(--burgundy);font-weight:600} .pw-plans{display:flex;justify-content:center;align-items:stretch;gap:24px;width:100%} @media (max-width:720px){.pw-plans{flex-direction:column;align-items:center}} .pw-card{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px;padding:24px; border-radius:24px;background:var(--surface);border:1px solid var(--hairline-soft); box-shadow:var(--shadow-card)} /* the paid tier is marked by the gold hairline and gold title, not a filled panel */ .pw-card--pro{border-color:var(--gold)} .pw-card__head{display:flex;align-items:center;gap:10px} .pw-card__head h3{margin:0;font-family:var(--font-display);font-weight:700; font-size:1.375rem;letter-spacing:-.03em;line-height:1.1;color:var(--ink)} .pw-card--pro .pw-card__head h3{color:var(--gold-deep)} .pw-badge{display:inline-flex;align-items:center;min-height:20px;padding:3px 8px; border-radius:999px;background:var(--paper-2);color:var(--ink-3); font-family:var(--font-text);font-size:.6875rem;font-weight:600;letter-spacing:.02em; text-transform:uppercase} .pw-card--pro .pw-badge{background:var(--gold-tint);color:var(--gold-deep)} .pw-card__desc{margin:0;color:var(--ink-2);font-size:var(--fs-card);line-height:1.35; letter-spacing:-.02em} .pw-price{display:flex;align-items:baseline;gap:8px} .pw-price b{font-family:var(--font-display);font-weight:700;font-size:2.5rem; letter-spacing:-.04em;line-height:1;color:var(--ink)} .pw-price span{font-size:var(--fs-card);color:var(--ink-3)} .pw-billing{margin:0;font-family:var(--font-text);font-size:.8125rem; letter-spacing:-.01em;color:var(--ink-3)} .pw-cta{display:inline-flex;align-items:center;justify-content:center;height:48px; padding:0 24px;border-radius:var(--r-pill);font-size:var(--fs-card);font-weight:600; letter-spacing:-.01em;background:var(--surface);color:var(--ink); box-shadow:0 0 0 1px rgb(50 48 79 / .14); transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)} .pw-cta--pro{background:var(--burgundy);color:#fff;box-shadow:none} @media (hover:hover){ .pw-cta:hover{background:var(--paper-2)} .pw-cta--pro:hover{background:var(--burgundy-deep)} } .pw-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pw-feat{display:flex;align-items:center;gap:10px;font-size:var(--fs-card);color:var(--ink-2)} .pw-feat .ph{color:var(--burgundy);font-size:1rem;flex:none} .pw-card--pro .pw-feat .ph{color:var(--gold-deep)} .pw-reassure{margin:auto 0 0;font-size:.8125rem;color:var(--ink-3)} .pw-notes{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px; color:var(--ink-3);font-size:var(--fs-small)} .pw-notes p{margin:0} /* ============================================================ COMPARISON ONLY β€” Luka's original paywall styles, scoped to .pw-orig so they cannot touch the rebuilt section above. Delete this block and the #pricing-orig section together. ============================================================ */ .pw-orig{--navy800:#32304F;--navy600:#8787AB;--gold100:#F9F0E5;--gold500:#E1B37F;--gold600:#C49C71; --t-dark:rgba(25,24,35,.5);--t-navy800:rgba(50,48,79,.6);--t-navy600:rgba(188,188,209,.52); position:relative;color:#fff;background-image:url('img/paywall-bg.png'); background-position:center;background-size:cover;padding:clamp(56px,7vw,96px) 24px} .pw-orig .pw__inner{max-width:792px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px} .pw-orig .pw-eyebrow{display:inline-flex;align-items:center;min-height:20px;padding:3px 6px;border-radius:999px; background:linear-gradient(85deg,rgba(215,171,122,.4) 35.85%,rgba(229,201,169,.4) 61.17%,rgba(196,156,113,.4) 84.23%); color:var(--gold100);font-family:var(--font-meta);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .pw-orig .pw-title{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.15; text-align:center;max-width:560px;margin:0} .pw-orig .pw-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08)} .pw-orig .pw-toggle button{padding:8px 18px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.7); font:inherit;font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease} .pw-orig .pw-toggle button.is-on{background:var(--navy800);color:#fff} .pw-orig .pw-toggle em{font-style:normal;color:var(--gold500)} .pw-orig .pw-plans{display:flex;justify-content:center;align-items:stretch;gap:24px;width:100%} @media (max-width:759px){.pw-orig .pw-plans{flex-direction:column;align-items:center}} .pw-orig .pw-card{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px;padding:24px;border-radius:24px; background-color:var(--t-dark);border:1px solid var(--t-navy800)} .pw-orig .pw-card--pro{border-color:rgba(225,179,127,.4); background-image:linear-gradient(85deg,rgba(225,179,127,.1) 36%,rgba(231,194,153,.1) 61%,rgba(196,156,113,.1) 84%)} .pw-orig .pw-card__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .pw-orig .pw-card__head h3{font-family:var(--font-display);font-weight:500;font-size:22px;margin:0;color:#fff} .pw-orig .pw-card--pro .pw-card__head h3{color:var(--gold500)} .pw-orig .pw-badge{display:inline-flex;align-items:center;min-height:20px;padding:3px 6px;border-radius:999px; background:linear-gradient(85deg,rgba(215,171,122,.4) 35.85%,rgba(229,201,169,.4) 61.17%,rgba(196,156,113,.4) 84.23%); color:var(--gold100);font-family:var(--font-meta);font-size:10px;letter-spacing:.08em;text-transform:uppercase} .pw-orig .pw-card__desc{margin:0;color:#fff;font-size:14px;opacity:.85} .pw-orig .pw-price{display:flex;align-items:baseline;gap:8px} .pw-orig .pw-price b{font-family:var(--font-display);font-size:40px;font-weight:500;line-height:1;color:#fff} .pw-orig .pw-price span{color:var(--t-navy600);font-size:15px} .pw-orig .pw-billing{margin:0;color:#fff;font-size:13px;opacity:.9} .pw-orig .pw-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;border-radius:999px; border:1px solid rgba(255,255,255,.38);background:#fff;color:var(--navy800);font-weight:600;font-size:15px; text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.02);transition:background-color .15s ease,filter .15s ease} .pw-orig .pw-cta:hover{background:#CCCCDD} .pw-orig .pw-cta--pro{background:transparent;color:#fff;padding:12px 16px; background-image:linear-gradient(45deg,#A18060 7%,#cfa371 37%,#e6caaa 54%,#bb9266 72%); text-shadow:0 0 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.8)} .pw-orig .pw-cta--pro:hover{filter:brightness(1.04);box-shadow:0 2px 8px rgba(0,0,0,.02),0 0 16px rgba(225,179,127,.35)} .pw-orig .pw-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%} .pw-orig .pw-feat{display:flex;align-items:center;gap:8px;font-size:14px;color:#fff} .pw-orig .pw-feat i{flex-shrink:0;color:var(--gold500)} .pw-orig .pw-reassure{margin:auto 0 0;color:var(--t-navy600);text-align:center;font-size:13px} .pw-orig .pw-notes{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;color:#fff;font-size:14px;opacity:.9} .pw-orig .pw-notes p{margin:0} /* ============================================================ FOOTER + PRICING refinements ============================================================ */ .f-brand .logo img{display:block;width:auto;height:26px} /* the app paragraph was running the full column; hold it to a readable measure */ .split__text .lede, .section--cellar .lede{max-width:46ch} /* ---- pricing ---- */ /* the eyebrow now uses the page's section-label voice */ .pw:not(.pw-orig) .pw-eyebrow{background:none;padding:0;min-height:0;border-radius:0; font-family:var(--font-meta);font-size:var(--fs-meta);letter-spacing:var(--ls-meta); text-transform:uppercase;font-weight:600;color:var(--burgundy)} /* the billing toggle takes the product switch's colours, height and equal tabs */ .pw:not(.pw-orig) .pw-toggle{gap:4px;padding:5px;border-radius:var(--r-btn);background:var(--paper-2); box-shadow:0 0 0 1px rgb(23 22 22 / .06) inset} .pw:not(.pw-orig) .pw-toggle button{flex:1 1 0;min-width:160px;height:46px;padding-inline:var(--space-5); border-radius:var(--r-btn);font-size:var(--fs-small);font-weight:600;color:var(--ink-3); display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); box-shadow:none;background:none} .pw:not(.pw-orig) .pw-toggle button.is-on{background:var(--surface);color:var(--ink); box-shadow:var(--shadow-card)} /* the trial line reads as copy, not as a caption: same size, ink colour */ .pw:not(.pw-orig) .pw-price span{color:var(--ink);font-size:var(--fs-card)} .pw:not(.pw-orig) .pw-billing{font-size:var(--fs-card);color:var(--ink-2)} /* the card stacks on a 16px gap; these pull the label lines in tight and keep the air where it matters, before the button */ .pw:not(.pw-orig) .pw-card__desc{margin-top:-8px} .pw:not(.pw-orig) .pw-price{margin-bottom:-12px} .pw:not(.pw-orig) .pw-billing{margin-bottom:8px} /* Pro: his gold button, his chip, and a soft gold wash on the card */ /* a 60% gold rim reads softer than the solid one */ .pw:not(.pw-orig) .pw-card--pro{border-color:rgba(196,156,113,.6); background:linear-gradient(rgba(249,240,229,.55),rgba(249,240,229,.55)),var(--surface)} /* his exact gold, copied from the paywall rather than approximated */ .pw:not(.pw-orig) .pw-badge{padding:3px 6px; background:linear-gradient(85deg,rgba(215,171,122,.4) 35.85%,rgba(229,201,169,.4) 61.17%,rgba(196,156,113,.4) 84.23%); color:var(--gold-deep);font-family:var(--font-meta);font-size:10px;letter-spacing:.08em} .pw:not(.pw-orig) .pw-card--pro .pw-badge{color:var(--gold-deep)} .pw:not(.pw-orig) .pw-cta--pro{background:transparent;color:#fff;padding:12px 16px;box-shadow:none; background-image:linear-gradient(45deg,#A18060 7%,#cfa371 37%,#e6caaa 54%,#bb9266 72%); text-shadow:0 0 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.8)} /* The shine is the gold itself moving, not a white pass laid over it: the gradient is drawn at twice the button so its bright band (#e6caaa) sits off to one side, and the hover slides that band across the face. */ .pw:not(.pw-orig) .pw-cta--pro{border:1px solid rgba(255,255,255,.38); background-size:200% 200%;background-position:0% 50%; transition:background-position .9s cubic-bezier(.4,0,.2,1), box-shadow .25s var(--ease)} @media (hover:hover){ .pw:not(.pw-orig) .pw-cta--pro:hover{background-position:100% 50%; box-shadow:0 2px 8px rgba(0,0,0,.02),0 0 16px rgba(225,179,127,.35)} } @media (prefers-reduced-motion:reduce){ .pw:not(.pw-orig) .pw-cta--pro{transition:none} } .pw:not(.pw-orig) .pw-card--pro .pw-feat .ph{color:var(--gold-deep)} /* more air either side of the billing toggle without opening every gap in the column (the inner stack runs on 24px) */ .pw:not(.pw-orig) .pw-toggle{margin-block:26px 14px} /* the eyebrow sits closer to the heading than the 24px column gap */ .pw:not(.pw-orig) .pw-eyebrow{margin-bottom:-12px} /* both plans lift a little under the pointer */ .pw:not(.pw-orig) .pw-card{transition:transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease)} @media (hover:hover){ .pw:not(.pw-orig) .pw-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgb(50 48 79 / .10)} } @media (prefers-reduced-motion:reduce){ .pw:not(.pw-orig) .pw-card{transition:none} .pw:not(.pw-orig) .pw-card:hover{transform:none} } /* the comparison copy of Luka's original is parked, not deleted β€” drop this rule and the #pricing-orig section together when it is no longer needed */ #pricing-orig,.pw-orig-note{display:none} .header__cta{display:inline-flex;align-items:center;gap:8px} /* on the light ground the log-in takes the See-pricing treatment; its collapsed-nav state lives with the shared pill rule above */ .header__login{color:var(--ink);background:var(--surface); box-shadow:0 0 0 1px rgb(50 48 79 / .14)} @media (hover:hover){.header__login:hover{box-shadow:0 0 0 1px rgb(50 48 79 / .34)}} @media (max-width:900px){.header__login{display:none}} /* ============================================================ ASK DOCK β€” ported from startsiden/vinify-website ============================================================ */ .ask-dock{position:fixed;right:clamp(14px,2.2vw,24px);bottom:clamp(14px,2.2vw,24px);z-index:900; display:flex;flex-direction:column;align-items:flex-end;gap:10px; opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease)} .ask-dock.is-in{opacity:1;transform:none} /* pill and card share the collapsed nav's smoked-glass ground */ .ask-dock{--ask-ground:rgb(12 11 15 / .72);--ask-rim:rgb(255 255 255 / .12)} .ask-face{width:26px;height:26px;border-radius:50%;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; background:rgb(255 255 255 / .1) var(--ask-face,none) center/cover no-repeat; color:#fff;box-shadow:none} .ask-face .ph{font-size:15px;line-height:1} .ask-face--lg{width:38px;height:38px;margin-bottom:10px;display:flex} .ask-face--lg .ph{font-size:20px} /* label matches the section tab labels, not the button scale */ .ask-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 7px; border:0;border-radius:var(--r-pill);background:var(--ask-ground); backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%); color:#fff;font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer; box-shadow:inset 0 0 0 1px var(--ask-rim), 0 12px 36px -16px rgb(0 0 0 / .55); transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .22s var(--ease)} .ask-pill:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22), 0 16px 40px -16px rgb(0 0 0 / .62)} .ask-dock.is-open .ask-pill{opacity:0;pointer-events:none;transform:scale(.94)} .ask-card{position:absolute;right:0;bottom:0;width:270px;padding:18px 18px 16px; background:var(--ask-ground);border:0;border-radius:var(--r-lg); backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%); box-shadow:inset 0 0 0 1px var(--ask-rim), 0 22px 50px -20px rgb(0 0 0 / .55); opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 100%; transition:opacity .26s var(--ease),transform .26s var(--ease)} .ask-dock.is-open .ask-card{opacity:1;transform:none} .ask-card__x{position:absolute;top:9px;right:10px;width:22px;height:22px;border:0;padding:0; background:transparent;color:rgb(255 255 255 / .56);font-size:17px;line-height:1;cursor:pointer;border-radius:50%} .ask-card__x:hover{color:#fff;background:rgb(255 255 255 / .12)} .ask-card b{display:block;font-size:var(--fs-small);color:#fff;line-height:1.3} .ask-card p{margin:5px 0 13px;font-size:.8125rem;color:rgb(255 255 255 / .68);line-height:1.45} /* geometry, type and both hovers come from the shared pill rule near the header β€” these only place the two buttons in the card */ .ask-btn,.ask-link{display:flex} .ask-link{margin-top:8px} .ask-meta{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--ask-rim); font-size:.6875rem;letter-spacing:.01em;color:rgb(255 255 255 / .56);text-align:center} @media (max-width:400px){.ask-card{width:calc(100vw - 28px)}} @media (prefers-reduced-motion:reduce){.ask-dock,.ask-pill,.ask-card{transition:none}}