/* ---------- base reset ---------- Ported from the React app's globals.css. WordPress and WooCommerce ship no such reset, so without this anchors render browser-default blue/underlined. Tokens come from `.page`, which is applied to . */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body, button, input, select, textarea { font: inherit; } button, a, summary, input { -webkit-tap-highlight-color: transparent; } button, summary { cursor: pointer; } button:disabled { cursor: not-allowed; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; } fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* WooCommerce renders its own markup inside our dark shell; keep its links and headings legible without fighting its component styles. */ .woocommerce a:not(.button):not(.wc-block-components-button) { color: var(--gold); } .woocommerce h1, .woocommerce h2, .woocommerce h3 { color: var(--fg); } /* ProGreen storefront — the page is the label: warm black field, gold rules, carbon-hex watermark, condensed display caps. Green stays in the leaf. */ /* @font-face rules are emitted inline from functions.php (progreen_fonts_inline) so the font URLs carry a version. */ .page { --bg: #0d0b08; --bg-2: #14110c; --bg-3: #1b1710; --fg: #f4efe3; --fg-2: rgba(244, 239, 227, 0.72); --fg-3: rgba(244, 239, 227, 0.45); --gold: #d9a63f; --gold-bright: #eec05a; --gold-dim: rgba(217, 166, 63, 0.32); --line: rgba(244, 239, 227, 0.12); --line-gold: rgba(217, 166, 63, 0.38); --ink-on-gold: #191204; --shell: 80rem; --gut: clamp(1.25rem, 4vw, 3.5rem); --font-display: "Anton", "Arial Narrow", "Avenir Next Condensed", sans-serif; --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* label hexagon watermark */ --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23d9a63f' stroke-opacity='0.16'%3E%3Cpath d='M28 1 54 16.5v31L28 63 2 47.5v-31z'/%3E%3Cpath d='M28 65 54 80.5v31L28 127 2 111.5v-31z'/%3E%3Cpath d='M0 33.5 26 49v31L0 95.5M56 33.5 30 49v31l26 15.5'/%3E%3C/g%3E%3C/svg%3E"); background: var(--bg); color: var(--fg); font-family: var(--font-body); overflow-x: clip; } .kicker { color: var(--gold); font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .displayTitle { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(2.6rem, 5.2vw, 4.6rem); font-weight: 400; letter-spacing: 0.005em; line-height: 0.98; text-transform: uppercase; } .displayTitle em { color: var(--gold); font-style: normal; } .skipLink { position: absolute; left: -999px; } .skipLink:focus { position: fixed; top: 1rem; left: 1rem; z-index: 200; border-radius: 0.5rem; padding: 0.75rem 1rem; background: var(--gold); color: var(--ink-on-gold); font-weight: 600; } /* ---------- header ---------- */ .header { position: sticky; top: 0; z-index: 60; align-items: center; display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; padding: 0.9rem var(--gut); border-bottom: 1px solid var(--line); background: rgba(13, 11, 8, 0.82); backdrop-filter: blur(16px); } .brand { align-items: center; display: flex; gap: 0.6rem; } .brand img { width: 2.1rem; height: auto; } .brand span { display: flex; flex-direction: column; line-height: 1; } .brand strong { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; } .brand small { margin-top: 0.22rem; color: var(--fg-3); font-size: 0.56rem; letter-spacing: 0.19em; text-transform: uppercase; } .navigation { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); justify-content: center; font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.02em; } .navigation a { color: var(--fg-2); transition: color 150ms ease; } .navigation a:hover { color: var(--gold-bright); } .cartTrigger { align-items: center; border: 1px solid var(--line-gold); border-radius: 999px; background: transparent; color: var(--fg); display: inline-flex; gap: 0.45rem; padding: 0.5rem 0.85rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; } .cartTrigger span { align-items: center; border-radius: 999px; background: var(--gold); color: var(--ink-on-gold); display: inline-flex; height: 1.25rem; justify-content: center; min-width: 1.25rem; font-size: 0.72rem; font-weight: 600; } /* ---------- hero ---------- */ .hero { position: relative; display: flex; /* full viewport minus the sticky header, so the buy card lands exactly on the fold */ min-height: max(calc(100svh - 4.25rem), 40rem); align-items: flex-end; border-bottom: 1px solid var(--line-gold); } .heroMedia { position: absolute; inset: 0; overflow: hidden; } .heroMedia img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 72%; } .heroMedia::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 11, 8, 0.94) 4%, rgba(13, 11, 8, 0.42) 36%, rgba(13, 11, 8, 0.14) 60%, rgba(13, 11, 8, 0.3)), linear-gradient(to right, rgba(13, 11, 8, 0.5), transparent 42%); content: ""; } .heroInner { position: relative; z-index: 2; display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1.15fr 0.85fr; align-items: end; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 6rem var(--gut) clamp(1.5rem, 2.5vw, 2.25rem); } .heroTitle { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(3.4rem, 8vw, 7.25rem); font-weight: 400; letter-spacing: 0.005em; line-height: 0.92; text-transform: uppercase; } .heroTitle em { color: var(--gold-bright); font-style: normal; } .heroSub { max-width: 30rem; margin-top: 1.1rem; color: var(--fg-2); font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.58; text-wrap: pretty; } .heroBuy { justify-self: end; width: min(24.5rem, 100%); } .heroStatline { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin-top: 0.9rem; color: var(--fg-2); font-family: var(--font-ui); font-size: 0.78rem; } .heroStatline strong { font-weight: 500; } .heroStatline span { color: var(--gold-dim); } /* ---------- purchase card (shared) ---------- */ .purchase { border: 1px solid var(--line-gold); border-radius: 0.9rem; padding: 1.15rem; background: rgba(13, 11, 8, 0.88); backdrop-filter: blur(14px); } .purchaseDetails { margin-top: 1.5rem; background: var(--bg-2); backdrop-filter: none; } .priceLine { align-items: baseline; display: flex; gap: 0.65rem; } .priceLine strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: 0.01em; } .priceLine span { color: var(--fg-3); font-size: 0.8rem; } .purchaseLabel { display: flex; justify-content: space-between; margin: 0.9rem 0 0.5rem; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .purchaseActions { display: flex; gap: 0.6rem; } .purchaseQuantity { align-items: center; display: inline-flex; flex: 0 0 7.25rem; justify-content: space-between; border: 1px solid var(--line); border-radius: 0.65rem; padding: 0.2rem; } .purchaseQuantity button { align-items: center; border: 0; border-radius: 0.45rem; background: transparent; color: var(--fg); display: inline-flex; height: 2.35rem; justify-content: center; width: 2.35rem; font-size: 1.05rem; } .purchaseQuantity button:hover { background: rgba(244, 239, 227, 0.08); } .purchaseQuantity output { min-width: 1.4rem; text-align: center; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; } .addButton { flex: 1; border: 0; border-radius: 0.65rem; background: var(--gold); color: var(--ink-on-gold); min-height: 2.95rem; padding: 0 1rem; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; transition: background 150ms ease; } .addButton:hover { background: var(--gold-bright); } .purchaseNote { margin-top: 0.7rem; color: var(--fg-3); font-size: 0.73rem; } /* ---------- steps ---------- */ .stepsSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gut); } .stepsHead { max-width: 40rem; } .stepsRow { display: grid; gap: clamp(1.1rem, 2vw, 2rem); grid-template-columns: repeat(5, 1fr); margin: clamp(2rem, 4vw, 3.25rem) 0 0; padding: 0; list-style: none; } .stepsRow li { padding-top: 1.1rem; border-top: 1px solid var(--line-gold); } .stepNumber { display: block; color: var(--gold); font-family: var(--font-display); font-size: 2.2rem; line-height: 1; } .stepsRow h3 { margin-top: 0.9rem; font-family: var(--font-ui); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em; } .stepsRow p { margin-top: 0.4rem; color: var(--fg-2); font-size: 0.9rem; line-height: 1.55; } /* ---------- math monument ---------- */ .mathSection { position: relative; padding: clamp(4rem, 8vw, 7rem) var(--gut); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); background-image: var(--hex); text-align: center; } .mathSection::after { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, var(--bg-2) 88%); content: ""; pointer-events: none; } .mathSection > * { position: relative; z-index: 2; } .mathFormula { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(0.8rem, 2.5vw, 2rem); justify-content: center; margin-top: clamp(1.75rem, 4vw, 3rem); color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(4.5rem, 12vw, 11rem); line-height: 0.9; } .mathFormula small { margin-left: 0.25rem; font-size: 0.32em; color: var(--gold); } .mathOperator { color: var(--fg-3); font-size: 0.45em; transform: translateY(-0.55em); } .mathLine { max-width: 34rem; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; color: var(--fg-2); font-size: 1.02rem; line-height: 1.6; } /* ---------- finish ---------- */ .finishSection { position: relative; display: flex; min-height: min(46rem, 92svh); align-items: flex-end; border-bottom: 1px solid var(--line); } .finishMedia { position: absolute; inset: 0; overflow: hidden; } .finishMedia img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 68%; } .finishMedia::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 11, 8, 0.95) 8%, rgba(13, 11, 8, 0.42) 48%, rgba(13, 11, 8, 0.15)); content: ""; } .finishInner { position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut) clamp(2.5rem, 5vw, 4rem); } .finishLines { display: grid; gap: 0; margin: 2rem 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-gold); } .finishLines > div { padding: 1.1rem 1.5rem 0 0; } .finishLines dt { color: var(--gold); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .finishLines dd { margin: 0.4rem 0 0; color: var(--fg-2); font-size: 0.92rem; line-height: 1.55; } /* ---------- product shell ---------- */ .productShell { display: grid; gap: clamp(1.5rem, 3vw, 3.25rem); grid-template-columns: 1.06fr 0.94fr; align-items: start; max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); } .gallery { position: sticky; top: 5.5rem; display: grid; gap: 0.55rem; } .galleryStage { position: relative; align-items: center; display: flex; aspect-ratio: 4 / 3.35; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--bg-2); } .galleryStage[data-kind="product"] { background: radial-gradient(circle at 50% 62%, rgba(217, 166, 63, 0.12), transparent 58%), #12100b; } .galleryPhoto { height: 100%; width: 100%; object-fit: cover; } .galleryProduct { position: relative; z-index: 2; height: 84%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.6)); } .productShadow { position: absolute; bottom: 7%; height: 3.5rem; width: 55%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.62), transparent 68%); filter: blur(6px); } .galleryCount { position: absolute; right: 0.85rem; bottom: 0.85rem; border-radius: 999px; padding: 0.32rem 0.6rem; background: rgba(13, 11, 8, 0.72); color: var(--fg-2); font-size: 0.68rem; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); } .galleryThumbs { display: grid; gap: 0.55rem; grid-template-columns: repeat(4, 1fr); } .galleryThumbs button { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--bg-2); padding: 0; transition: border-color 150ms ease; } .galleryThumbs button:hover { border-color: var(--line-gold); } .galleryThumbActive { border-color: var(--gold) !important; } .galleryThumbs img { height: 100%; width: 100%; object-fit: cover; } .thumbProduct { object-fit: contain !important; padding: 0.4rem; } .buyColumn { padding-top: 0.4rem; } .productTitle { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3.3rem); font-weight: 400; letter-spacing: 0.005em; line-height: 1; text-transform: uppercase; } .productSummary { max-width: 34rem; margin-top: 0.8rem; color: var(--fg-2); font-size: 1rem; line-height: 1.62; } .benefitLines { display: grid; gap: 0.55rem; margin: 1.35rem 0 0; padding: 1.35rem 0 0; border-top: 1px solid var(--line); list-style: none; } .benefitLines li { align-items: baseline; display: grid; gap: 0.7rem; grid-template-columns: 0.45rem 1fr; color: var(--fg-2); font-size: 0.95rem; } .benefitLines li::before { border-radius: 50%; background: var(--gold); content: ""; height: 0.35rem; width: 0.35rem; } .buyDetails { margin-top: 1.35rem; border-top: 1px solid var(--line); } .buyDetails details { border-bottom: 1px solid var(--line); } .buyDetails summary { display: flex; justify-content: space-between; padding: 1rem 0; font-family: var(--font-ui); font-size: 0.92rem; font-weight: 500; list-style: none; } .buyDetails summary::-webkit-details-marker { display: none; } .buyDetails summary span { color: var(--gold); } .buyDetails details[open] summary span { transform: rotate(45deg); } .buyDetails p { padding-bottom: 1rem; color: var(--fg-2); font-size: 0.9rem; line-height: 1.62; } /* ---------- faq ---------- */ .faqSection { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 0.75fr 1.25fr; max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--gut); border-top: 1px solid var(--line); } .faqList { border-top: 1px solid var(--line); } .faqList details { border-bottom: 1px solid var(--line); } .faqList summary { align-items: center; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-family: var(--font-ui); font-size: 0.98rem; font-weight: 500; list-style: none; } .faqList summary::-webkit-details-marker { display: none; } .disclosureIcon { position: relative; flex: 0 0 auto; height: 0.85rem; width: 0.85rem; } .disclosureIcon::before, .disclosureIcon::after { position: absolute; top: 50%; left: 0; height: 1px; width: 100%; background: var(--gold); content: ""; transition: transform 180ms ease; } .disclosureIcon::after { transform: rotate(90deg); } .faqList details[open] .disclosureIcon::after { transform: rotate(0deg); } .faqList details p { max-width: 46rem; padding-bottom: 1.3rem; color: var(--fg-2); font-size: 0.93rem; line-height: 1.65; } /* ---------- footer ---------- */ .footer { display: grid; gap: 1.75rem; max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gut) 2.5rem; border-top: 1px solid var(--line-gold); } .footerBrand { align-items: center; display: flex; gap: 0.75rem; } .footerBrand img { width: 2.4rem; height: auto; } .footerBrand strong { display: block; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; } .footerBrand span { color: var(--fg-3); font-size: 0.76rem; } .footerCommerce { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: 0.84rem; } .footerCommerce p + p { margin-top: 0.35rem; } .paymentMarks { display: grid; gap: 0.5rem; } .paymentMarks > span { color: var(--fg-3); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; } .paymentMarks ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .paymentMarks li { border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.3rem 0.5rem; color: var(--fg-2); font-size: 0.7rem; } .paymentMarksCompact li { font-size: 0.66rem; } .footerBottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; color: var(--fg-3); font-size: 0.76rem; } .footerBottom nav { display: flex; gap: 1.25rem; } /* ---------- cart ---------- */ .cartDialog { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(27rem, 100%); max-width: 100%; border: 0; padding: 0; background: transparent; color: var(--fg); } .cartDialog::backdrop { background: rgba(6, 5, 3, 0.66); backdrop-filter: blur(3px); } .cartPanel { display: flex; height: 100%; flex-direction: column; padding: 1.4rem; border-left: 1px solid var(--line-gold); background: #14110c; color: #f4efe3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } .cartHeader { align-items: start; display: flex; justify-content: space-between; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); } .cartHeader span { color: var(--gold); font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } .cartHeader h2 { margin-top: 0.45rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; } .cartHeader button { border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg); height: 2rem; width: 2rem; font-size: 1.05rem; line-height: 1; } .cartLine { display: grid; gap: 1rem; grid-template-columns: 5.5rem 1fr; padding: 1.3rem 0; border-bottom: 1px solid var(--line); } .cartImage { align-items: center; display: flex; aspect-ratio: 3 / 4; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 0.6rem; background: #0d0b08; } .cartImage img { height: 88%; width: auto; object-fit: contain; } .cartProduct h3 { font-size: 0.95rem; font-weight: 600; } .cartProduct p { margin-top: 0.25rem; color: var(--fg-3); font-size: 0.78rem; } .cartProduct strong { display: block; margin-top: 0.5rem; font-size: 1rem; font-weight: 620; } .cartQuantity { align-items: center; display: inline-flex; gap: 0.3rem; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.15rem; } .cartQuantity button { border: 0; border-radius: 0.4rem; background: transparent; color: var(--fg); height: 1.9rem; width: 1.9rem; font-size: 1rem; } .cartQuantity button:hover:not(:disabled) { background: rgba(244, 239, 227, 0.08); } .cartQuantity output { min-width: 1.4rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .cartSummary { margin-top: auto; padding-top: 1.2rem; } .cartSummary > div { align-items: baseline; display: flex; justify-content: space-between; } .cartSummary > div span { color: var(--fg-2); font-size: 0.85rem; } .cartSummary > div strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; } .cartSummary > p { margin-top: 0.4rem; color: var(--fg-3); font-size: 0.76rem; } .checkoutButton { width: 100%; margin-top: 1rem; border: 0; border-radius: 0.65rem; background: var(--gold); color: var(--ink-on-gold); min-height: 3rem; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; } .checkoutButton:disabled { opacity: 0.6; } .checkoutError { margin-top: 0.7rem; color: #ff9a8a; font-size: 0.8rem; } .checkoutTrust { margin-top: 0.7rem; color: var(--fg-3); font-size: 0.74rem; } .emptyCart { display: grid; gap: 1rem; margin: auto; justify-items: center; text-align: center; } .emptyCart p { font-size: 1.05rem; font-weight: 560; } .emptyCart button { border: 1px solid var(--line-gold); border-radius: 0.6rem; background: transparent; color: var(--fg); padding: 0.7rem 1.1rem; font-size: 0.88rem; } /* ---------- mobile buy bar ---------- */ .mobileBuyBar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 70; align-items: center; display: none; gap: 1rem; justify-content: space-between; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-gold); background: rgba(13, 11, 8, 0.95); backdrop-filter: blur(14px); transform: translateY(110%); transition: transform 220ms ease; } .mobileBuyBar span { display: block; color: var(--fg-3); font-size: 0.72rem; } .mobileBuyBar strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; } .mobileBuyBar button { border: 0; border-radius: 0.6rem; background: var(--gold); color: var(--ink-on-gold); min-height: 2.75rem; padding: 0 1.2rem; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; } .mobileBuyBarVisible { transform: translateY(0); } /* ---------- responsive ---------- */ @media (max-width: 64rem) { .heroInner { grid-template-columns: 1fr; padding-top: 6.5rem; } .heroBuy { justify-self: stretch; width: 100%; max-width: 26rem; } } @media (max-width: 60rem) { .productShell, .faqSection { grid-template-columns: 1fr; } .gallery { position: static; } .stepsRow { grid-template-columns: repeat(2, 1fr); } .finishLines { grid-template-columns: 1fr; } .finishLines > div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); } .finishMedia::after { background: linear-gradient(to top, rgba(13, 11, 8, 0.95) 25%, rgba(13, 11, 8, 0.72) 65%, rgba(13, 11, 8, 0.4)); } } @media (max-width: 48rem) { .navigation { display: none; } .mobileBuyBar { display: flex; } .hero { min-height: calc(100svh - 4.5rem); } .heroMedia img { object-position: 68% 35%; } .heroMedia::after { background: linear-gradient(to top, rgba(13, 11, 8, 0.97) 18%, rgba(13, 11, 8, 0.6) 55%, rgba(13, 11, 8, 0.35)); } .stepsRow { grid-template-columns: 1fr; } .galleryStage { aspect-ratio: 4 / 4.2; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } /* ---------- brochure savings comparison ---------- */ .savingsRow { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; margin: clamp(2rem, 4vw, 3rem) auto 0; border-top: 1px solid var(--line-gold); text-align: left; } .savingsRow > div { padding: 1.2rem 1.25rem 0 0; } .savingsRow dt { color: var(--fg-3); font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } .savingsRow dd { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.01em; } .savingsHighlight dd { color: var(--gold-bright); } .savingsNote { margin-top: 1.4rem; color: var(--gold); font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.04em; } @media (max-width: 48rem) { .savingsRow { grid-template-columns: 1fr; } .savingsRow > div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); } } /* ---------- dilution calculator (light card on the dark field) ---------- */ .calcSection { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; max-width: var(--shell); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gut); border-bottom: 1px solid var(--line); } .calcLead { max-width: 30rem; margin-top: 1.1rem; color: var(--fg-2); font-size: 1.02rem; line-height: 1.62; } .calcMonoLine { margin-top: 1.4rem; color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; letter-spacing: 0.02em; } .calcCard { border-radius: 1.25rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); background: #f4f1e8; color: #14110c; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .calcCardLabel { color: #6f6a5c; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } .calcCardTitle { margin-top: 0.7rem; font-family: var(--font-ui); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; } .calcCardLead { max-width: 24rem; margin-top: 0.6rem; color: #57534a; font-size: 0.88rem; line-height: 1.55; } .calcControl { margin-top: 1.6rem; } .calcControl label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: #6f6a5c; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .calcControl label output { color: #14110c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: none; } .calcControl input[type="range"] { width: 100%; margin-top: 0.75rem; accent-color: #b8862b; background: transparent; } .calcScale { display: flex; justify-content: space-between; margin-top: 0.15rem; color: #8b8577; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.65rem; } .calcOutputs { display: grid; gap: 1.1rem 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.7rem 0 0; } .calcOutputs dd { margin: 0; color: #9a6f14; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: 0.02em; line-height: 1.15; } .calcOutputs dt { margin-top: 0.45rem; color: #6f6a5c; font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.1em; line-height: 1.35; text-transform: uppercase; } .calcNote { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(20, 17, 12, 0.12); color: #6f6a5c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; line-height: 1.6; } /* ---------- shared inner-page furniture ---------- */ .pageHero { max-width: var(--shell); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gut) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line-gold); } .pageLead { max-width: 44rem; margin-top: 1.1rem; color: var(--fg-2); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; } .sectionTitle { margin-top: 0.9rem; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: 0.005em; line-height: 1.02; text-transform: uppercase; } .storySection { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 0.8fr 1.2fr; max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); } .storyCopy p { color: var(--fg-2); font-size: 1.02rem; line-height: 1.7; } .storyCopy p + p { margin-top: 1.1rem; } .pillarSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); background: var(--bg-2); } .pillarGrid { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line-gold); } .pillarGrid > div { padding: 1.3rem 1.4rem 0 0; } .pillarGrid h3 { font-family: var(--font-ui); font-size: 0.98rem; font-weight: 500; } .pillarGrid p { margin-top: 0.5rem; color: var(--fg-2); font-size: 0.9rem; line-height: 1.55; } .addressSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); } .addressLine { margin-top: 1.2rem; color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: 0.01em; } /* ---------- business page ---------- */ .segmentSection { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gut); } .segmentSection article { padding: 1.4rem 1.5rem 0 0; border-top: 1px solid var(--line-gold); } .segmentSection h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; text-transform: uppercase; } .segmentPrice { margin-top: 0.5rem; color: var(--gold); font-family: var(--font-ui); font-size: 0.85rem; } .segmentSection article p:last-child { margin-top: 0.8rem; color: var(--fg-2); font-size: 0.92rem; line-height: 1.6; } .economicsSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); background: var(--bg-2); background-image: var(--hex); } .economicsGrid { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; border-top: 1px solid var(--line-gold); } .economicsGrid > div { padding: 1.3rem 1.4rem 0 0; } .economicsGrid dd { margin: 0; color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; } .economicsGrid dt { margin-top: 0.6rem; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.45; text-transform: uppercase; } .economicsNote { margin-top: 1.6rem; color: var(--fg-3); font-size: 0.85rem; } .tradeCta { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); } .tradeLinks { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; } .tradeLinks a { border: 1px solid var(--line-gold); border-radius: 0.65rem; padding: 0.85rem 1.2rem; color: var(--fg); font-family: var(--font-ui); font-size: 0.9rem; } .tradeLinks a:first-child { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); } /* ---------- footer columns ---------- */ .footerColumns { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); } .footerColumns > div { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.84rem; } .footerColumns > div > span { margin-bottom: 0.3rem; color: var(--gold); font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; } .footerColumns a { color: var(--fg-2); } .footerColumns a:hover { color: var(--fg); } .footerColumns p { color: var(--fg-2); line-height: 1.5; } @media (max-width: 60rem) { .calcBody, .storySection { grid-template-columns: 1fr; } .pillarGrid, .segmentSection, .footerColumns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { .calcOutputs, .economicsGrid, .pillarGrid, .segmentSection, .footerColumns { grid-template-columns: 1fr; } .calcOutputs > div, .economicsGrid > div, .pillarGrid > div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); } .segmentSection article { padding: 1.2rem 0 1.4rem; } } /* ---------- mobile menu ---------- */ .menuToggle { display: none; align-items: center; gap: 0.5rem; border: 1px solid var(--line-gold); border-radius: 999px; background: transparent; color: var(--fg); padding: 0.5rem 0.85rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; } .menuBars { position: relative; display: block; width: 0.95rem; height: 1px; background: currentColor; } .menuBars::before, .menuBars::after { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; content: ""; transition: transform 180ms ease; } .menuBars::before { top: -0.28rem; } .menuBars::after { top: 0.28rem; } .menuBars[data-open]::before { transform: translateY(0.28rem) rotate(45deg); } .menuBars[data-open]::after { transform: translateY(-0.28rem) rotate(-45deg); } .mobileMenu { position: fixed; top: 4rem; right: 0; left: 0; z-index: 80; /* The header sets backdrop-filter, which makes it the containing block for fixed children — so `bottom: 0` would resolve against the header, not the viewport. Height is stated explicitly instead. */ height: calc(100svh - 4rem); overflow-y: auto; display: none; flex-direction: column; gap: 0.25rem; padding: 1.25rem var(--gut) 2rem; border-top: 1px solid var(--line-gold); background: #0b0907; } .mobileMenuOpen { display: flex; } .mobileMenu a { padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--fg); font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.01em; text-transform: uppercase; } .mobileMenuCta { margin-top: 1.25rem; border: 1px solid var(--line-gold) !important; border-radius: 0.7rem; background: var(--gold); color: var(--ink-on-gold) !important; font-family: var(--font-ui) !important; font-size: 1rem !important; text-align: center; text-transform: none !important; } @media (max-width: 60rem) { .navigation { display: none; } .menuToggle { display: inline-flex; } } @media (max-width: 60rem) { .calcSection { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .calcOutputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- technology page ---------- */ .materialSection { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gut); } .materialSection article { padding: 1.4rem 1.5rem 0 0; border-top: 1px solid var(--line-gold); } .materialSymbol { color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; } .materialSection h2 { margin-top: 0.7rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 500; } .materialSection article p:last-child { margin-top: 0.6rem; color: var(--fg-2); font-size: 0.92rem; line-height: 1.6; } .compareSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); background: var(--bg-2); } .compareTable { width: 100%; margin-top: clamp(1.5rem, 3vw, 2.25rem); border-collapse: collapse; font-family: var(--font-ui); } .compareTable th, .compareTable td { padding: 1rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; } .compareTable thead th { border-bottom: 1px solid var(--line-gold); color: var(--gold); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .compareTable tbody th { color: var(--fg); font-size: 0.95rem; font-weight: 400; } .compareTable td { width: 6.5rem; text-align: center; font-size: 1.1rem; } .yes { color: var(--gold-bright); } .no { color: rgba(244, 239, 227, 0.3); } /* ---------- products page ---------- */ .flagshipSection { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gut); } .flagshipMedia { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; } .flagshipMedia img { width: 100%; height: auto; display: block; } .flagshipMix { margin-top: 1.2rem; color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; } .flagshipPrice { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .flagshipPrice strong { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; } .flagshipPrice span { color: var(--fg-3); font-size: 0.8rem; } .industrialSection { max-width: var(--shell); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gut); border-top: 1px solid var(--line); background: var(--bg-2); } .industrialGrid { display: grid; gap: 0 clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.75rem, 3vw, 2.5rem); } .industrialGrid article { padding: 1.4rem 0 1.8rem; border-top: 1px solid var(--line-gold); } .industrialCode { color: var(--gold-bright); font-family: var(--font-display); font-size: 1.8rem; line-height: 1; } .industrialGrid h3 { margin-top: 0.6rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 500; } .industrialSummary { margin-top: 0.3rem; color: var(--gold); font-size: 0.82rem; } .industrialNotice { margin-top: 0.5rem; color: #e5a3a3; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; } .industrialCopy { margin-top: 0.7rem; color: var(--fg-2); font-size: 0.86rem; line-height: 1.6; } .industrialTags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; } .industrialTags li { border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.3rem 0.5rem; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; } .industrialFoot { margin-top: 2rem; color: var(--fg-3); font-size: 0.85rem; } .industrialFoot a { color: var(--gold); border-bottom: 1px solid currentColor; } @media (max-width: 60rem) { .materialSection, .flagshipSection { grid-template-columns: 1fr; } .industrialGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { .materialSection { gap: 0; } .materialSection article { padding: 1.2rem 0 1.4rem; } .industrialGrid { grid-template-columns: 1fr; } .compareTable td { width: 4rem; } } /* ---------- variant hero: product image as the background ---------- */ .heroProductBg .heroMedia img { /* The source is nearly the hero's own aspect, so object-position alone cannot move the bottle. Scale slightly and shift it right of the copy column. */ object-position: 50% 40%; transform: scale(1.2) translateX(13%); transform-origin: center; } .heroProductBg .heroMedia::after { background: linear-gradient(to top, rgba(13, 11, 8, 0.96) 5%, rgba(13, 11, 8, 0.5) 36%, rgba(13, 11, 8, 0.12) 62%, rgba(13, 11, 8, 0.38)), linear-gradient(to right, rgba(13, 11, 8, 0.94) 8%, rgba(13, 11, 8, 0.62) 32%, rgba(13, 11, 8, 0.1) 55%, transparent 70%); } @media (max-width: 60rem) { .heroProductBg .heroMedia img { transform: scale(1.15) translateX(6%); object-position: 50% 30%; } .heroProductBg .heroMedia::after { background: linear-gradient(to top, rgba(13, 11, 8, 0.98) 38%, rgba(13, 11, 8, 0.88) 55%, rgba(13, 11, 8, 0.45) 74%, rgba(13, 11, 8, 0.25)); } } /* ---------- promo band (WooCommerce coupon, announced) ---------- */ .promoBand { border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); background: linear-gradient(to right, rgba(217, 166, 63, 0.14), rgba(217, 166, 63, 0.04)), var(--bg-2); } .promoInner { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 1.3fr 0.7fr; align-items: center; max-width: var(--shell); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gut); } .promoHeadline { margin-top: 0.7rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: 0.005em; line-height: 1.05; text-transform: uppercase; } .promoDetail { margin-top: 0.6rem; color: var(--fg-2); font-size: 0.95rem; } .promoCodeWrap { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; } .promoCode { display: block; border: 1px dashed var(--gold); border-radius: 0.7rem; padding: 0.9rem 1rem; background: rgba(13, 11, 8, 0.55); color: var(--gold-bright); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0.16em; text-align: center; } .promoCta { border-radius: 0.7rem; padding: 0.85rem 1rem; background: var(--gold); color: var(--ink-on-gold); font-family: var(--font-ui); font-size: 0.92rem; font-weight: 500; text-align: center; } .promoCta:hover { background: var(--gold-bright); } /* quantity field now posts to WooCommerce, so it is an input not an output */ .purchaseQuantity input[name="quantity"] { width: 2.4rem; border: 0; background: transparent; color: var(--fg); font-family: inherit; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; } .purchaseQuantity input[name="quantity"]::-webkit-outer-spin-button, .purchaseQuantity input[name="quantity"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .purchaseForm { margin: 0; } @media (max-width: 60rem) { .promoInner { grid-template-columns: 1fr; } } /* ---------- narrow-phone header fit ---------- */ /* At 320px the brand wordmark + burger + cart exceed the row and push the cart past the viewport. Drop the wordmark text and tighten the row; the logo still carries the brand and both controls stay reachable. */ @media (max-width: 26em) { .header { gap: 0.5rem; padding-left: 0.85rem; padding-right: 0.85rem; } .brand span { display: none; } .brand img { width: 1.9rem; } .menuToggle, .cartTrigger { padding: 0.45rem 0.7rem; font-size: 0.74rem; } .cartTrigger { gap: 0.35rem; } } /* ---------- WooCommerce surfaces ---------- */ /* Woo renders its own cart/checkout/account markup inside our dark shell. These rules brand its primary controls and give its blocks the site's measure, without overriding its component internals. */ .pageBody { max-width: var(--shell); margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) var(--gut) clamp(3rem, 6vw, 5rem); } .pageBody .wp-block-woocommerce-cart, .pageBody .wp-block-woocommerce-checkout, .pageBody .woocommerce { width: 100%; } /* Primary actions in brand gold */ .woocommerce .button, .wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { border: 0 !important; border-radius: 0.65rem !important; background: var(--gold) !important; color: var(--ink-on-gold) !important; font-family: var(--font-ui) !important; font-weight: 500 !important; } .woocommerce .button:hover, .wc-block-components-button:hover, .wc-block-cart__submit-button:hover { background: var(--gold-bright) !important; } /* Totals, panels and inputs on the dark field */ .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .woocommerce-Price-amount { color: var(--fg); } .wc-block-components-panel__button, .wc-block-components-totals-coupon__button { color: var(--gold) !important; } .wc-block-components-text-input input, .wc-block-components-address-form input, .woocommerce form input[type="text"], .woocommerce form input[type="email"], .woocommerce form input[type="tel"] { border: 1px solid var(--line) !important; border-radius: 0.5rem !important; background: var(--bg-2) !important; color: var(--fg) !important; } .wc-block-components-text-input label, .wc-block-components-checkout-step__title, .wc-block-components-title { color: var(--fg) !important; } .wc-block-components-product-name { color: var(--fg) !important; } /* Single product */ .woocommerce div.product .product_title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; } .woocommerce div.product p.price { color: var(--gold-bright) !important; font-family: var(--font-display); font-size: 1.8rem; } .woocommerce div.product .quantity input[type="number"] { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg-2); color: var(--fg); padding: 0.55rem; } /* ---------- owner batch: sale, promo, 4-pack, tidy woo chrome ---------- */ .stepsLead { max-width: 38rem; margin-top: 0.9rem; color: var(--fg-2); font-size: 1rem; line-height: 1.6; } .priceLine del { color: var(--fg-3); font-size: 1.05rem; text-decoration: line-through; } .salePill { border-radius: 999px; padding: 0.25rem 0.6rem; background: var(--gold); color: var(--ink-on-gold); font-family: var(--font-ui); font-size: 0.68rem; font-style: normal; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .purchasePromo { margin-top: 0.7rem; color: var(--gold); font-family: var(--font-ui); font-size: 0.76rem; } .purchasePromo strong { letter-spacing: 0.08em; } .fourPackRow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.8rem; border: 1px solid var(--line); border-radius: 0.65rem; padding: 0.7rem 0.85rem; } .fourPackRow strong { display: block; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600; } .fourPackRow span { display: block; margin-top: 0.15rem; color: var(--gold); font-size: 0.72rem; } .fourPackRow button { flex: 0 0 auto; border: 1px solid var(--line-gold); border-radius: 0.55rem; background: transparent; color: var(--fg); padding: 0.55rem 0.85rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; } .fourPackRow button:hover { background: rgba(217, 166, 63, 0.12); } .saleBadge { position: fixed; top: 4.6rem; right: 0.9rem; z-index: 65; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; border: 1px solid var(--line-gold); border-radius: 0.6rem; padding: 0.45rem 0.75rem; background: rgba(13, 11, 8, 0.92); backdrop-filter: blur(8px); } .saleBadge strong { color: var(--gold-bright); font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; } .saleBadge span { color: var(--fg-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-variant-numeric: tabular-nums; } /* Woo product chrome the owner asked to tidy */ .woocommerce .woocommerce-breadcrumb { display: none; } .woocommerce div.product .stock { display: none; } .woocommerce div.product .woocommerce-tabs li.reviews_tab { display: none; } @media (max-width: 64rem) { .stepsRow { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 48rem) { .stepsRow { grid-template-columns: 1fr; } .saleBadge { top: auto; bottom: 4.6rem; right: 0.75rem; } .footerColumns { grid-template-columns: 1fr; } }