/* Wilhelm — storefront pages (buy / thank-you / sold-out). Shares the Friday-Drop brand tokens with optin.css. Fonts load via in each page's . */ :root { --gold: #e8c24a; --gold-deep: #b8922f; --gold-soft: rgba(232,194,74,0.16); --ink: #0c0a08; --ink-2: #15100b; --parchment: #f6efda; --display: 'Bodoni Moda', serif; --body: 'Lora', serif; --mono: 'DM Mono', monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; min-height: 100dvh; background: radial-gradient(ellipse at 50% 0%, #1a1308 0%, var(--ink) 60%), var(--ink); color: var(--parchment); font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* subtle film grain (matches the opt-in page) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; } .hero { position: relative; z-index: 1; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: calc(clamp(78px, 9vh, 100px) + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) clamp(16px, 2.5vh, 36px); } @media (min-width: 760px) { .hero { align-items: center; padding-top: calc(clamp(40px, 6vh, 72px) + env(safe-area-inset-top, 0px)); } } .hero-logo { position: absolute; top: calc(clamp(10px, 1.6vh, 18px) + env(safe-area-inset-top, 0px)); left: clamp(16px, 4vw, 40px); z-index: 3; display: flex; align-items: center; text-decoration: none; } .hero-logo img { height: 56px; width: 56px; border-radius: 50%; } .hero-price { position: absolute; top: calc(clamp(10px, 1.6vh, 18px) + env(safe-area-inset-top, 0px)); right: clamp(16px, 4vw, 40px); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; font-family: var(--mono); font-weight: 500; font-size: clamp(24px, 3.8vw, 32px); color: var(--gold); text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .hero-price span { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(246,239,218,0.85); margin-top: 6px; white-space: nowrap; } .card { position: relative; z-index: 1; width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; padding: clamp(8px, 1.5vh, 18px) clamp(24px, 5vw, 52px) clamp(16px, 2.4vh, 30px); text-align: center; } @media (min-width: 760px) { .card { max-width: 600px; padding: clamp(24px, 3vh, 48px) 40px; } } h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.6vh, 50px); line-height: 1.04; letter-spacing: -1.2px; color: var(--parchment); margin: 0 0 clamp(8px, 1.4vh, 14px); } h1 em { font-style: italic; color: var(--gold); } .lede { font-family: var(--body); font-style: italic; font-size: clamp(15px, 2.2vh, 20px); line-height: 1.5; color: rgba(246,239,218,0.92); margin: 0 auto clamp(14px, 2.4vh, 26px); max-width: 90%; text-wrap: balance; } .product-image { display: block; width: 100%; max-width: 420px; margin: clamp(16px, 3vh, 30px) auto; } .product-image img { width: 100%; height: auto; display: block; border: 1px solid rgba(232,194,74,0.35); border-radius: 5px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } @media (min-width: 760px) { .product-image img { max-height: 42vh; width: auto; max-width: 100%; margin: 0 auto; } } /* scarcity line */ .scarcity { font-family: var(--mono); font-size: clamp(11px, 1.5vh, 13px); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 auto clamp(14px, 2.2vh, 22px); border: 1px solid rgba(232,194,74,0.4); padding: 8px 16px; display: inline-flex; align-items: center; gap: 9px; } .scarcity .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2.4s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(232,194,74,0.5)} 70%{box-shadow:0 0 0 8px rgba(232,194,74,0)} 100%{box-shadow:0 0 0 0 rgba(232,194,74,0)} } /* primary action button (square, gold — matches opt-in) */ .btn-primary { width: 100%; max-width: 420px; height: clamp(50px, 7vh, 60px); border: none; cursor: pointer; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2.4vh, 19px); letter-spacing: 0.5px; transition: filter .2s, transform .08s; } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:active { transform: translateY(1px); } .btn-primary[aria-busy="true"] { opacity: 0.72; cursor: progress; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .fineprint { font-family: var(--mono); font-size: clamp(10px, 1.3vh, 11px); letter-spacing: 1.5px; color: rgba(246,239,218,0.6); margin-top: clamp(12px, 2vh, 20px); line-height: 1.7; } .fineprint a { color: rgba(246,239,218,0.6); } /* email capture (sold-out page) — mirrors opt-in form */ .cap-form { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 12px); width: 100%; max-width: 420px; margin: clamp(8px,1.6vh,16px) auto 0; } .cap-form input[type="email"] { width: 100%; height: clamp(48px, 7vh, 58px); padding: 0 20px; background: rgba(232,217,181,0.06); border: 1px solid rgba(232,194,74,0.35); color: var(--parchment); font-family: var(--body); font-size: clamp(15px, 2vh, 17px); text-align: center; outline: none; transition: border-color .2s, background .2s; } .cap-form input[type="email"]::placeholder { color: rgba(246,239,218,0.78); } .cap-form input[type="email"]:focus { border-color: var(--gold); background: rgba(232,217,181,0.1); } .cap-error { width: 100%; max-width: 420px; margin: 8px auto 0; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: #f0c14a; border: 1px solid rgba(232,194,74,0.5); background: rgba(232,194,74,0.08); padding: 8px 12px; text-align: center; } /* seal + success/confirmation (matches opt-in success) */ .seal { width: clamp(64px, 11vh, 84px); height: clamp(64px, 11vh, 84px); border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto clamp(12px,2vh,18px); } .seal::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(232,194,74,0.3); border-radius: 50%; } .seal svg { width: clamp(30px, 5vh, 38px); height: clamp(30px, 5vh, 38px); } .confirm-h { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(28px, 5.5vh, 42px); color: var(--gold); margin: 0 0 clamp(10px,1.8vh,16px); letter-spacing: -0.5px; } .confirm-p { font-family: var(--body); font-size: clamp(15px, 2.2vh, 19px); line-height: 1.55; color: rgba(232,217,181,0.85); margin: 0 auto clamp(10px,1.6vh,14px); max-width: 420px; } .confirm-p strong { color: var(--parchment); } .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: rgba(232,217,181,0.5); margin-top: 10px; } .eyebrow { font-family: var(--mono); font-size: clamp(10px,1.4vh,12px); letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin: 0 0 clamp(12px,2vh,18px); } .link-quiet { display: inline-block; margin-top: clamp(14px,2.2vh,22px); font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: rgba(246,239,218,0.7); text-decoration: none; border-bottom: 1px solid rgba(232,194,74,0.4); padding-bottom: 3px; } .link-quiet:hover { color: var(--gold); } [hidden] { display: none !important; } .rise { animation: rise .5s cubic-bezier(.2,.7,.3,1); } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rise, .scarcity .dot { animation: none; } html { scroll-behavior: auto; } } footer.store-footer { position: relative; z-index: 1; text-align: center; padding: 28px 16px 36px; font-family: var(--mono); } footer.store-footer .wm { font-size: 13px; letter-spacing: 3px; color: rgba(246,239,218,0.7); } footer.store-footer .fnote { font-size: 10px; letter-spacing: 2px; color: rgba(246,239,218,0.4); margin-top: 6px; } /* ── Buy page: quantity stepper + on-page checkout (added for the drop) ── */ .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 420px; margin: clamp(4px,1vh,10px) auto clamp(14px,2.2vh,20px); } .qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(232,194,74,0.4); border-radius: 6px; } .qty-stepper button { width: 44px; height: 44px; background: transparent; border: none; color: var(--gold); font-family: var(--body); font-size: 22px; line-height: 1; cursor: pointer; } .qty-stepper button:disabled { opacity: 0.3; cursor: not-allowed; } .qty-stepper span { min-width: 40px; text-align: center; font-family: var(--mono); font-size: 18px; color: var(--parchment); } .qty-total { text-align: right; font-family: var(--mono); } .qty-total-label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(246,239,218,0.55); } .qty-total span#total-amt { font-size: clamp(20px,3vw,26px); color: var(--gold); } #express-wrap { width: 100%; max-width: 420px; margin: 0 auto clamp(10px,1.6vh,14px); min-height: 4px; } /* Tappable "or pay with card" toggle that collapses the card form under the wallet buttons. Keeps the flanking-line divider look but reads as a control. */ .pay-toggle { width: 100%; max-width: 420px; margin: clamp(8px,1.6vh,14px) auto; display: flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(246,239,218,0.55); } .pay-toggle::before, .pay-toggle::after { content: ''; flex: 1; height: 1px; background: rgba(232,194,74,0.2); } .pay-toggle:hover { color: rgba(246,239,218,0.85); } #pay-wrap { width: 100%; max-width: 420px; margin: 0 auto; } .stripe-field { margin: 0 auto clamp(10px,1.6vh,14px); text-align: left; } #pay-card { margin-top: 4px; } /* Pay button before the form is actually complete: dimmed so it reads "finish this first," but still tappable so the tap can guide them to the gap. */ #pay-card.not-ready { opacity: 0.6; } /* Flash ring pulled around whichever field blocked the tap (address or card). */ .field-flash { border-radius: 8px; animation: fieldFlash 1.8s ease both; } @keyframes fieldFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,194,74,0); } 15%, 55% { box-shadow: 0 0 0 3px rgba(232,194,74,0.75); } } @media (prefers-reduced-motion: reduce) { .field-flash { animation: none; box-shadow: 0 0 0 2px rgba(232,194,74,0.6); } } /* ── Content sections below the fold ── */ .store-section { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: clamp(40px,7vh,80px) clamp(20px,5vw,40px); text-align: center; border-top: 1px solid rgba(232,194,74,0.14); } .store-section h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px,5vw,46px); margin: 0 0 14px; color: var(--parchment); letter-spacing: -0.5px; } .store-section h2 em { font-style: italic; color: var(--gold); } .store-section h2 .yr { font-style: italic; color: var(--gold-deep); } .section-lede { font-family: var(--body); font-style: italic; font-size: clamp(15px,2vw,19px); color: rgba(246,239,218,0.7); margin: 0 auto 26px; max-width: 480px; } .notes { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 460px; text-align: left; } .notes li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(232,194,74,0.12); } .notes .n { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: 1px; } .notes .t { font-family: var(--body); font-size: clamp(15px,2vw,17px); color: rgba(246,239,218,0.85); line-height: 1.5; } .notes .t strong { color: var(--parchment); font-style: italic; font-family: var(--display); } .spec { font-family: var(--mono); font-size: clamp(10px,1.4vw,12px); letter-spacing: 3px; color: var(--gold); margin-top: 8px; } .origin-figure { max-width: 460px; margin: 0 auto 24px; } .origin-figure img { width: 100%; height: auto; display: block; border: 1px solid rgba(232,194,74,0.3); border-radius: 5px; box-shadow: 0 18px 48px rgba(0,0,0,0.4); } .origin p { font-family: var(--body); font-size: clamp(16px,2vw,19px); line-height: 1.7; color: rgba(246,239,218,0.78); max-width: 540px; margin: 0 auto 18px; } .origin .pull { font-family: var(--display); font-style: italic; font-size: clamp(22px,4vw,30px); color: var(--gold); margin: 22px 0; } .origin .proof-line { font-size: clamp(14px,1.8vw,16px); color: rgba(246,239,218,0.65); } .origin .proof-line strong { color: var(--parchment); } /* ── Sticky mobile CTA ── */ .sticky-buy { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; border: none; cursor: pointer; white-space: nowrap; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .sticky-buy:active { transform: translateX(-50%) translateY(1px); } @media (min-width: 760px) { .sticky-buy { display: none; } } /* ── Sold-out demand-feedback buttons ── */ .feedback-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; } .btn-secondary { width: 100%; height: clamp(48px,7vh,56px); background: transparent; color: var(--parchment); border: 1px solid rgba(232,194,74,0.4); border-radius: 6px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(15px,2.2vh,17px); letter-spacing: 0.3px; transition: background .2s; } .btn-secondary:hover { background: rgba(232,194,74,0.08); } .btn-secondary:active { transform: translateY(1px); } .qty-total-sub { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: rgba(246,239,218,0.5); margin-top: 3px; text-transform: none; } /* ── Itemized order summary (shipping shown as its own line) ── */ .qty-label { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(246,239,218,0.7); } .order-summary { width: 100%; max-width: 420px; margin: 0 auto clamp(16px,2.4vh,22px); border: 1px solid rgba(232,194,74,0.25); border-radius: 8px; padding: 10px 16px; background: rgba(232,217,181,0.03); } .os-row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--body); font-size: 15px; color: rgba(246,239,218,0.82); padding: 5px 0; text-align: left; } .os-row em { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); } .os-ship span:last-child { color: var(--parchment); font-weight: 600; } .os-total { border-top: 1px solid rgba(232,194,74,0.2); margin-top: 4px; padding-top: 10px; font-family: var(--display); font-size: 20px; color: var(--parchment); } .os-total span:last-child { color: var(--gold); font-weight: 700; } /* ── Buy page: compress above-the-fold so the wallet/pay buttons are visible without scrolling (scoped to .buy-page only — sold-out/thank-you unchanged) ── */ .buy-page .hero { padding-top: calc(clamp(48px,6vh,66px) + env(safe-area-inset-top,0px)); padding-bottom: 14px; } .buy-page .card { padding-top: 2px; } .buy-page .eyebrow { margin-bottom: 10px; } .buy-page .scarcity { margin-top: 0; margin-bottom: 12px; } .buy-page .product-image { width: 100%; max-width: 420px; margin: 2px auto 12px; } .buy-page .product-image img { width: 100%; height: auto; max-height: none; max-width: 100%; margin: 0; } .buy-page h1 { font-size: clamp(25px,4.2vh,36px); margin: 0 0 10px; } .buy-page .qty-row { margin-top: 2px; margin-bottom: 10px; } .buy-page .order-summary { margin-bottom: 12px; } /* ── Buy page: top-right bottle count box + batch-number header ── */ .count-box { position: absolute; z-index: 3; overflow: hidden; top: calc(clamp(10px,1.6vh,18px) + env(safe-area-inset-top,0px)); right: clamp(16px,4vw,40px); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; padding: 9px 14px; border: 1.5px solid var(--gold); border-radius: 9px; background: rgba(232,194,74,0.06); animation: countGlow 2.6s ease-in-out infinite; } /* light sweep across the box to signal it's live/active */ .count-box::after { content: ''; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,246,214,0.55), transparent); transform: skewX(-18deg); animation: countShimmer 3.4s ease-in-out infinite; pointer-events: none; } @keyframes countGlow { 0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 0 rgba(232,194,74,0); } 50% { box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 16px 1px rgba(232,194,74,0.55); } } @keyframes countShimmer { 0% { left: -70%; } 55%, 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .count-box { animation: none; } .count-box::after { display: none; } } .count-num { font-family: var(--mono); font-weight: 500; font-size: clamp(24px,4.6vw,32px); color: var(--gold); line-height: 1; position: relative; } .count-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(246,239,218,0.78); margin-top: 4px; } .batch-head { text-align: center; margin: 0 auto clamp(10px,1.8vh,16px); } .batch-num { font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(26px,5vh,42px); color: var(--gold); letter-spacing: -0.5px; line-height: 1.05; } .batch-sub { font-family: var(--mono); font-size: clamp(9px,1.3vh,11px); letter-spacing: 2px; text-transform: uppercase; color: rgba(246,239,218,0.6); margin-top: 7px; } /* ── Tasting notes: button (replaces subtitle) + gold "designer card" modal ── */ .notes-btn { display: inline-block; margin: 9px auto 0; cursor: pointer; background: linear-gradient(135deg, #f4d572 0%, #e8c24a 50%, #cf9f2e 100%); color: var(--ink); border: none; border-radius: 999px; padding: 9px 22px; font-family: var(--mono); font-weight: 500; font-size: clamp(10px,1.4vh,12px); letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 4px 14px rgba(232,194,74,0.25); transition: filter .2s, transform .08s; } .notes-btn:hover { filter: brightness(1.06); } .notes-btn:active { transform: translateY(1px); } .notes-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 22px; } .notes-overlay { position: absolute; inset: 0; background: rgba(6,5,4,0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .notes-card { position: relative; z-index: 1; width: 100%; max-width: 380px; background: linear-gradient(155deg, #f8ead0 0%, #ecc657 42%, #cf9f2e 100%); color: #28200d; border-radius: 16px; padding: 32px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.6); border: 1px solid rgba(120,90,20,0.45); animation: rise .35s cubic-bezier(.2,.7,.3,1); } .notes-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(90,65,15,0.4); border-radius: 10px; pointer-events: none; } .notes-close { position: absolute; top: 8px; right: 14px; background: none; border: none; font-size: 28px; line-height: 1; color: rgba(60,42,8,0.55); cursor: pointer; padding: 4px; } .notes-emblem { font-size: 16px; color: #7a5a14; } .notes-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #6e500f; margin-top: 5px; } .notes-title { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 30px; color: #22190a; margin: 4px 0 0; letter-spacing: -0.5px; line-height: 1.1; } .notes-rule { width: 46px; height: 1px; background: rgba(90,65,15,0.55); margin: 13px auto 14px; } .notes-list { list-style: none; padding: 0; margin: 0; text-align: left; } .notes-list li { padding: 10px 2px; border-bottom: 1px solid rgba(90,65,15,0.18); } .notes-list li:last-child { border-bottom: none; } .notes-list li b { display: block; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 18px; color: #2a1d08; } .notes-list li span { display: block; font-family: var(--body); font-size: 14px; line-height: 1.45; color: rgba(40,32,13,0.82); margin-top: 2px; } .notes-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #6e500f; margin-top: 16px; } /* tasting card spec grid (origin/varietal/elevation/roast) */ .notes-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(90,65,15,0.2); text-align: left; } .spec-item { display: flex; flex-direction: column; } .spec-k { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #7a5a14; } .spec-v { font-family: var(--body); font-size: 15px; color: #2a1d08; margin-top: 2px; line-height: 1.3; } .notes-sig { display: block; width: 118px; height: auto; margin: 16px auto 2px; opacity: 0.9; } .notes-by { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #6e500f; margin-top: 4px; }