/* ============================================================ TERRAFORM — website styles Mobile-first · low-carbon (no framework, CSS-only nav, lazy media). Consumes the design-system tokens from ../styles.css. Sections are authored as modular blocks that map 1:1 to ACF flexible-content layouts (see data-acf attributes in markup). ============================================================ */ /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink-950); color: var(--oat-200); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--oat-50); margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } p { margin: 0; } /* ---------- layout helpers ---------- */ .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 22px; } .section { padding-block: 68px; } .section--tight { padding-block: 48px; } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--caramel-300); display: inline-flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap; } .eyebrow--rule::before { content: none; } .lead { font-size: 17px; line-height: 1.62; color: var(--oat-200); } .muted { color: var(--slate-300); } .mono { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); } .coord { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.06em; color: var(--slate-300); } .coord b { color: var(--caramel-300); font-weight: 400; } @media (min-width: 720px) { .wrap { padding-inline: 40px; } .section { padding-block: 104px; } .section--tight { padding-block: 72px; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 13px 24px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--caramel-500); color: var(--brand-on); } .btn--primary:hover { background: var(--caramel-400); } .btn--ghost { background: color-mix(in oklab, var(--oat-100) 8%, transparent); color: var(--oat-100); border-color: color-mix(in oklab, var(--oat-200) 28%, transparent); } .btn--ghost:hover { background: color-mix(in oklab, var(--oat-100) 15%, transparent); } .btn--dark { background: var(--ink-700); color: var(--oat-100); border-color: var(--border); } .btn--dark:hover { background: var(--ink-600); } .btn--block { width: 100%; } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn--sm { padding: 9px 16px; font-size: 13.5px; border-radius: 8px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--caramel-300); font-family: var(--font-body); } .link-arrow:hover { color: var(--caramel-200); } .link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); } .link-arrow:hover svg { transform: translateX(3px); } /* ============================================================ HEADER · ACF: n/a (theme header.php) Sticky translucent ink bar; CSS-only mobile menu (no JS). ============================================================ */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--ink-950) 80%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--oat-200) 8%, transparent); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; height: 66px; } .site-header__brand { display: flex; align-items: center; } .site-header__brand img { height: 32px; width: auto; } @media (min-width: 900px) { .site-header__brand img { height: 36px; } } .site-nav { display: none; } .site-nav a { font-size: 14px; font-weight: 500; color: var(--oat-200); white-space: nowrap; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--oat-50); } .site-header__cta { display: none; } /* mobile menu (checkbox hack) */ .nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .nav-burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; margin-right: -10px; cursor: pointer; } .nav-burger span { width: 22px; height: 2px; background: var(--oat-100); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .mobile-menu { position: fixed; inset: 66px 0 auto 0; z-index: 55; background: var(--ink-950); border-bottom: 1px solid var(--border); transform: translateY(-120%); transition: transform var(--dur-base) var(--ease-out); padding: 12px 22px 28px; } .nav-toggle:checked ~ .mobile-menu { transform: translateY(0); } .nav-toggle:checked ~ * .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ * .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ * .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* keyboard focus ring: the input is visually hidden, so surface it on the label */ .nav-toggle:focus-visible ~ * .nav-burger { outline: 2px solid var(--caramel-500); outline-offset: 3px; border-radius: 6px; } .mobile-menu a { display: block; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--oat-100); border-bottom: 1px solid color-mix(in oklab, var(--oat-200) 8%, transparent); } .mobile-menu .btn { margin-top: 18px; } @media (min-width: 900px) { .nav-burger, .mobile-menu { display: none; } .nav-toggle { display: none; } .site-nav { display: flex; align-items: center; gap: 32px; } .site-header__cta { display: inline-flex; } } /* ============================================================ HERO · ACF: layout_hero ============================================================ */ .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; color: var(--oat-100); } .hero--full { min-height: calc(100svh - 66px); } .hero--page { min-height: 62vh; } .hero__media, .hero__scrim { position: absolute; inset: 0; } .hero__media { z-index: -2; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--ink-950) 55%, transparent), transparent 30%, transparent 42%, color-mix(in oklab, var(--ink-950) 88%, transparent)), linear-gradient(90deg, color-mix(in oklab, var(--ink-950) 60%, transparent), transparent 60%); } .hero__body { margin-top: auto; padding-block: 40px 52px; } .hero h1 { font-size: clamp(40px, 11vw, 78px); color: var(--oat-50); margin: 18px 0; text-wrap: balance; max-width: 15ch; } .hero__lead { font-size: clamp(15px, 4vw, 18px); color: var(--oat-200); max-width: 46ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero__coord { position: absolute; right: 22px; bottom: 24px; text-align: right; line-height: 1.7; display: none; } @media (min-width: 720px) { .hero__coord { display: block; right: 40px; } } /* ============================================================ STAT ROW · ACF: layout_stats ============================================================ */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } .stat__num { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; font-size: clamp(30px, 9vw, 44px); color: var(--caramel-300); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat__num small { font-size: 0.5em; } .stat__label { font-size: 13.5px; line-height: 1.45; color: var(--slate-300); margin-top: 10px; max-width: 24ch; } .stat__rule { width: 30px; height: 2px; background: var(--caramel-500); margin-top: 12px; border-radius: 2px; } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } } /* section headings */ .sect-head { max-width: 640px; margin-bottom: 40px; } .sect-head h2 { font-size: clamp(30px, 8vw, 46px); margin: 16px 0 0; } .sect-head p { margin-top: 16px; } .sect-head--between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; } /* ============================================================ PRODUCT CARD · ACF: layout_collection (repeater) ============================================================ */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } .product { display: flex; flex-direction: column; background: var(--ink-800); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .product:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--caramel-500) 45%, transparent); } .product__media { position: relative; aspect-ratio: 1 / 1.06; background: var(--ink-700); overflow: hidden; } .product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .product:hover .product__media img { transform: scale(1.04); } .product__flag { position: absolute; top: 12px; left: 12px; } .product__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product__region { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--caramel-300); } .product__title { font-size: 20px; color: var(--oat-50); } .product__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .price { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; font-size: 16px; color: var(--oat-100); } .price small { font-family: var(--font-body); font-weight: 500; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-300); margin-right: 3px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: color-mix(in oklab, var(--ink-950) 62%, transparent); color: var(--oat-100); backdrop-filter: blur(3px); border: 1px solid color-mix(in oklab, var(--oat-200) 16%, transparent); } .badge--caramel { background: var(--caramel-500); color: var(--brand-on); border-color: transparent; } .badge--sage { background: color-mix(in oklab, var(--sage-500) 90%, black); color: var(--oat-50); border-color: transparent; } /* ============================================================ EDITORIAL / NUMBERED STEPS · ACF: layout_process ============================================================ */ .steps { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .step__n { font-family: var(--font-display); font-weight: 900; font-size: 60px; color: color-mix(in oklab, var(--caramel-500) 42%, transparent); line-height: 0.9; letter-spacing: -0.03em; } .step__title { font-size: 22px; margin: 16px 0 10px; } .step__body { font-size: 14.5px; color: var(--slate-300); line-height: 1.6; } /* split (image + text) · ACF: layout_split */ .split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: 60px; } .split--reverse .split__media { order: 2; } } .split__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split h2 { font-size: clamp(28px, 7vw, 42px); } .split p + p { margin-top: 16px; } /* ============================================================ CTA BAND (photo bg) · ACF: layout_cta ============================================================ */ .cta-band { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; padding: 56px 28px; text-align: center; } .cta-band__media, .cta-band__scrim { position: absolute; inset: 0; z-index: -1; } .cta-band__media { width: 100%; height: 100%; object-fit: cover; z-index: -2; } .cta-band__scrim { background: linear-gradient(180deg, color-mix(in oklab, var(--ink-950) 55%, transparent), color-mix(in oklab, var(--ink-950) 78%, transparent)); } .cta-band h2 { font-size: clamp(28px, 7vw, 46px); max-width: 16ch; margin-inline: auto; } .cta-band p { margin: 18px auto 0; max-width: 46ch; color: var(--oat-200); } .cta-band .hero__cta, .cta-band .btn { justify-content: center; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } @media (min-width: 720px) { .cta-band { padding: 88px 40px; } } /* ============================================================ LIGHT (Au Lait) SECTION · ACF: layout_quote ============================================================ */ .section--light { background: var(--oat-100); color: var(--ink-800); } .section--light h2, .section--light h3, .section--light blockquote { color: var(--ink-900); } .section--light .eyebrow { color: var(--caramel-600); } .section--light .muted { color: var(--slate-600); } .quote { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 6vw, 38px); line-height: 1.2; letter-spacing: -0.01em; max-width: 20ch; } .quote-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 820px) { .quote-grid { grid-template-columns: 1.2fr 1fr; align-items: center; } } .press { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center; } .press span { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-700); opacity: 0.75; } /* ---------- contour divider motif ---------- */ .contour { height: 2px; border: 0; margin: 0; background: repeating-linear-gradient(90deg, var(--caramel-500) 0 20px, transparent 20px 28px); opacity: 0.5; } /* ============================================================ FOOTER · theme footer.php ============================================================ */ .site-footer { position: relative; overflow: hidden; background: var(--ink-900); border-top: 1px solid var(--border); padding-block: 88px 34px; } .footer-contours { position: absolute; inset: 0; z-index: 0; color: var(--slate-400); opacity: 0.16; pointer-events: none; } .footer-contours svg { width: 100%; height: 100%; display: block; } .site-footer .wrap { position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } .site-footer__brand img { height: 48px; width: auto; margin-bottom: 20px; } .site-footer__brand p { color: var(--slate-300); font-size: 14px; max-width: 34ch; } .footer-col h4 { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 16px; } .footer-col a { display: block; padding: 7px 0; font-size: 14.5px; color: var(--oat-200); } .footer-col a:hover { color: var(--caramel-300); } /* sustainability strip */ .footer-eco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; margin-top: 64px; padding-top: 44px; border-top: 1px solid color-mix(in oklab, var(--oat-200) 8%, transparent); } .footer-eco__lede h4 { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 10px; } .footer-eco__lede p { color: var(--slate-300); font-size: 14px; line-height: 1.55; max-width: 36ch; } .footer-eco__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .raidboxes-badge { height: 50px; width: auto; border-radius: 10px; display: block; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-top: 52px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--oat-200) 8%, transparent); } .footer-bottom p, .footer-bottom a { font-size: 12.5px; color: var(--slate-400); } .footer-legal { display: flex; gap: 20px; } .footer-legal a:hover { color: var(--caramel-300); } @media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } } /* ---------- reveal on scroll ---------- Gated on .reveal-armed, which terraform.js adds at the same moment it starts observing — NOT on a generic .js class. If the script is deferred, combined, or fails, the class is never added and all content stays visible. Content visible is the safe failure mode. See the comment in terraform.js. */ @media (prefers-reduced-motion: no-preference) { .reveal-armed .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal-armed .reveal.in { opacity: 1; transform: none; } } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ .breadcrumb { padding-top: 20px; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); } .breadcrumb a:hover { color: var(--caramel-300); } .breadcrumb li::after { content: "/"; margin-left: 8px; color: var(--slate-500); } .breadcrumb li:last-child::after { content: ""; } .breadcrumb li:last-child { color: var(--oat-200); } .pdp { display: grid; grid-template-columns: 1fr; gap: 36px; padding-block: 28px 0; } @media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; } } /* CSS-only gallery (radio swap, no JS) */ .gallery__pick { position: absolute; opacity: 0; pointer-events: none; } .gallery__stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: 16px; overflow: hidden; background: var(--ink-800); border: 1px solid var(--border); } .gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } #pv1:checked ~ .gallery__stage .pv-1, #pv2:checked ~ .gallery__stage .pv-2, #pv3:checked ~ .gallery__stage .pv-3 { opacity: 1; } .gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; } .gallery__thumbs label { flex: 0 0 84px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast), border-color var(--dur-fast); } .gallery__thumbs label:hover { opacity: 1; } .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; } #pv1:checked ~ .gallery__thumbs label[for=pv1], #pv2:checked ~ .gallery__thumbs label[for=pv2], #pv3:checked ~ .gallery__thumbs label[for=pv3] { opacity: 1; border-color: var(--caramel-500); } .pdp__region { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel-300); } .pdp__title { font-size: clamp(32px, 8vw, 46px); margin: 12px 0 16px; } .pdp__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; } .pdp__price .now { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; font-size: 26px; color: var(--oat-50); } .pdp__price .from { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-300); } .pdp__desc { color: var(--oat-200); line-height: 1.65; } .pdp__rule { border: 0; border-top: 1px solid var(--border); margin: 26px 0; } .opt__label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--oat-100); margin-bottom: 10px; } .opt__label span { color: var(--slate-300); font-weight: 500; } .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatch-opt { position: absolute; opacity: 0; pointer-events: none; } .swatch-opt + label { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--oat-200); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); } .swatch-opt:checked + label { border-color: var(--caramel-500); background: color-mix(in oklab, var(--caramel-500) 14%, transparent); color: var(--oat-50); } .swatch-opt:focus-visible + label { box-shadow: var(--ring-focus); } .size-select { width: 100%; appearance: none; background: var(--ink-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca9a7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; border: 1px solid var(--border); color: var(--oat-100); font-family: var(--font-body); font-size: 15px; padding: 13px 16px; border-radius: 10px; } .size-select:focus-visible { outline: none; box-shadow: var(--ring-focus); border-color: var(--caramel-500); } .buy-row { display: flex; gap: 12px; margin-top: 8px; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .qty button { width: 44px; height: 100%; min-height: 48px; background: var(--ink-800); color: var(--oat-100); border: none; font-size: 18px; cursor: pointer; } .qty button:hover { background: var(--ink-700); } .qty input { width: 44px; text-align: center; background: transparent; border: none; color: var(--oat-50); font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 15px; } .trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ink-700); } .trust li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--slate-300); } .trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--caramel-400); } .pdp ul { padding: 0; margin: 0; } /* native WooCommerce gallery inside .pdp (overrides WC's 48% float) */ .pdp div.images, .woocommerce div.product .pdp__gallery div.images { float: none; width: 100%; margin: 0; position: relative; } .pdp__gallery { min-width: 0; } .woocommerce-product-gallery { position: relative; opacity: 1 !important; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--ink-800); } .woocommerce-product-gallery__image a { display: block; } .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .woocommerce-product-gallery .flex-control-thumbs li { margin: 0; width: auto !important; float: none !important; } .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast), border-color var(--dur-fast); } .woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--caramel-500); } .woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in oklab, var(--ink-950) 70%, transparent); display: inline-flex; align-items: center; justify-content: center; text-indent: -9999px; overflow: hidden; } .woocommerce-product-gallery__trigger::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--oat-100); border-radius: 50%; text-indent: 0; } .woocommerce-product-gallery__trigger:focus-visible { outline: none; box-shadow: var(--ring-focus); } .pdp div.summary, .woocommerce div.product .pdp__info { float: none; width: 100%; margin: 0; } /* specs (native details, no JS) */ .spec { border-top: 1px solid var(--border); } .spec summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--oat-50); } .spec summary::-webkit-details-marker { display: none; } .spec summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 22px; color: var(--caramel-300); transition: transform var(--dur-fast); } .spec[open] summary::after { content: "–"; } .spec__body { padding: 0 0 22px; color: var(--slate-300); line-height: 1.7; font-size: 14.5px; max-width: 62ch; } .spec__body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; } .spec__body dt { color: var(--oat-200); font-weight: 600; } .spec__body dd { margin: 0; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 13px; } /* ============================================================ CONTACT ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 44px; } @media (min-width: 880px) { .contact-grid { grid-template-columns: 1.3fr 0.7fr; gap: 64px; } } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .field label { font-size: 13px; font-weight: 600; color: var(--oat-100); } .field label .req { color: var(--caramel-400); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: 15px; color: var(--oat-50); background: var(--ink-800); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; width: 100%; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .field textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: var(--slate-400); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--caramel-500); box-shadow: var(--ring-focus); } .field-row { display: grid; grid-template-columns: 1fr; gap: 0 20px; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .contact-aside h3 { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 12px; } .contact-aside .block { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); } .contact-aside .block:last-child { border-bottom: 0; } .contact-aside p { color: var(--oat-200); line-height: 1.7; font-size: 15px; } .contact-aside a.big { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--oat-50); } .contact-aside a.big:hover { color: var(--caramel-300); } .contact-aside .socials { display: flex; gap: 10px; } .contact-aside .socials a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; color: var(--oat-200); } .contact-aside .socials a:hover { border-color: var(--caramel-500); color: var(--caramel-300); } .map-block { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; margin-top: 8px; border: 1px solid var(--border); background: repeating-linear-gradient(45deg, var(--ink-800) 0 14px, var(--ink-700) 14px 28px); display: flex; align-items: flex-end; padding: 16px; } .map-block .coord { background: color-mix(in oklab, var(--ink-950) 70%, transparent); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(3px); } /* ============================================================ LITERARY QUOTE · ACF layout_verse A line of landscape writing over faint topographic contours. ============================================================ */ .verse { position: relative; overflow: hidden; background: var(--ink-900); } .verse__bg { position: absolute; inset: -10% -10% -10% -10%; z-index: 0; color: var(--caramel-500); opacity: 0.16; pointer-events: none; } .verse__bg svg { width: 100%; height: 100%; } .verse__inner { position: relative; z-index: 1; max-width: 940px; } .verse blockquote { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6.4vw, 62px); line-height: 1.06; letter-spacing: -0.02em; color: var(--oat-50); text-wrap: balance; } .verse cite { display: block; margin-top: 30px; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-style: normal; font-size: 12px; letter-spacing: 0.08em; color: var(--caramel-300); } .verse cite i { color: var(--slate-300); font-style: italic; } /* ============================================================ WORDPRESS CORE — alignments, captions, blocks, admin bar ============================================================ */ .alignleft { float: left; margin: 6px 24px 16px 0; } .alignright { float: right; margin: 6px 0 16px 24px; } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: 1180px; margin-inline: auto; } .alignfull { width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, figcaption { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 12px; letter-spacing: 0.04em; color: var(--slate-400); margin-top: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--caramel-500); color: var(--brand-on); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; } body.admin-bar .site-header { top: 32px; } @media (max-width: 782px){ body.admin-bar .site-header { top: 46px; } } .sticky-note { display: none; } /* Header cart count + toggle button (WooCommerce) */ .site-header__actions { display: flex; align-items: center; gap: 6px; } .header-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--oat-100); } .header-cart:hover { color: var(--caramel-300); } .header-cart__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; font-size: 10px; color: var(--brand-on); background: var(--caramel-500); border-radius: 999px; } .header-cart__count:empty, .header-cart__count[data-count="0"] { display: none; } /* Current menu item */ .site-nav a.current-menu-item, .site-nav a.current_page_item { color: var(--oat-50); } /* ============================================================ PAGE HEADER (inner pages, blog) ============================================================ */ .page-head { padding-block: 56px 0; } .page-head__inner { max-width: 760px; } .page-head h1 { font-size: clamp(34px, 8vw, 56px); margin: 16px 0 0; text-wrap: balance; } .page-head p { margin-top: 16px; } /* ============================================================ BLOG / JOURNAL ============================================================ */ .journal-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 620px){ .journal-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px){ .journal-grid { grid-template-columns: repeat(3, 1fr); } } .post-card { display: flex; flex-direction: column; background: var(--ink-800); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .post-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--caramel-500) 45%, transparent); } .post-card__media { aspect-ratio: 16/10; background: var(--ink-700); overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .post-card__meta { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caramel-300); } .post-card__title { font-size: 20px; color: var(--oat-50); line-height: 1.15; } .post-card__excerpt { font-size: 14px; color: var(--slate-300); line-height: 1.6; } .post-card__more { margin-top: auto; } /* single post */ .article { max-width: 760px; margin-inline: auto; } .article__meta { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--caramel-300); margin-bottom: 14px; } .article__title { font-size: clamp(30px, 7vw, 52px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } .article__lede { font-size: 19px; line-height: 1.55; color: var(--oat-200); margin-top: 18px; } .article__cover { border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; margin: 32px 0; } .article__cover img { width: 100%; height: 100%; object-fit: cover; } .article__body { color: var(--oat-200); line-height: 1.75; font-size: 16.5px; } .article__body > * + * { margin-top: 22px; } .article__body h2 { font-size: 28px; margin-top: 40px; } .article__body h3 { font-size: 22px; margin-top: 32px; } .article__body a { color: var(--caramel-300); text-decoration: underline; text-underline-offset: 3px; } .article__body blockquote { border-left: 3px solid var(--caramel-500); padding-left: 22px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--oat-50); } .article__body img { border-radius: 12px; } .article__body ul, .article__body ol { padding-left: 22px; } .article__body li + li { margin-top: 8px; } .pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 14px; color: var(--oat-200); } .pagination .page-numbers.current { background: var(--caramel-500); color: var(--brand-on); border-color: transparent; } .pagination a.page-numbers:hover { border-color: var(--caramel-500); color: var(--caramel-300); } /* ============================================================ WOOCOMMERCE — mapped onto the storefront design language ============================================================ */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { list-style: none; background: var(--ink-800); border: 1px solid var(--border); border-left: 3px solid var(--caramel-500); border-radius: 10px; padding: 14px 18px; margin: 0 0 18px; color: var(--oat-200); font-size: 14.5px; } .woocommerce-error { border-left-color: var(--rust-500); } .woocommerce-message a, .woocommerce-info a { color: var(--caramel-300); } /* shop toolbar */ .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .woocommerce-result-count { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); margin: 0; } .woocommerce-ordering select { appearance: none; background: var(--ink-800); border: 1px solid var(--border); color: var(--oat-100); font-family: var(--font-body); font-size: 14px; padding: 11px 40px 11px 15px; border-radius: 10px; } /* archive product grid reuses .product / .product-grid */ ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 560px){ ul.products { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px){ ul.products { grid-template-columns: repeat(3, 1fr); } } .add_to_cart_button, .single_add_to_cart_button { cursor: pointer; } .woocommerce a.added_to_cart { display: none; } /* single product */ .summary .price, .woocommerce-Price-amount { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 700; color: var(--oat-50); } .summary del { color: var(--slate-400); font-weight: 400; margin-right: 8px; } .summary ins { text-decoration: none; } .stock { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .stock.in-stock { color: var(--sage-500); } .stock.out-of-stock { color: var(--rust-500); } table.variations { width: 100%; border-collapse: collapse; margin: 8px 0 18px; } table.variations td { padding: 6px 0; vertical-align: top; } table.variations label { font-size: 13px; font-weight: 600; color: var(--oat-100); } .woocommerce-variation-add-to-cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; } .woocommerce-variation-price { margin-bottom: 12px; } /* woo tabs -> use spec accordion look */ .woocommerce-tabs .tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 22px; border-bottom: 1px solid var(--border); } .woocommerce-tabs .tabs li a { display: inline-block; padding: 12px 4px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--slate-300); border-bottom: 2px solid transparent; margin-bottom: -1px; } .woocommerce-tabs .tabs li.active a { color: var(--oat-50); border-bottom-color: var(--caramel-500); } /* related */ .related > h2, .upsells > h2, .cross-sells > h2 { font-family: var(--font-display); font-size: clamp(24px,5vw,34px); margin-bottom: 26px; } /* cart & checkout */ .woocommerce-cart-form table.cart, .shop_table { width: 100%; border-collapse: collapse; } .shop_table th { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-400); text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border); } .shop_table td { padding: 16px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .cart_item .product-thumbnail img { width: 72px; border-radius: 10px; } .cart-collaterals, .checkout .col2-set, .checkout .col-1, .checkout .col-2 { } .cart_totals, .checkout .cart_totals, #order_review { background: var(--ink-800); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .checkout .form-row { margin-bottom: 16px; } .checkout label { font-size: 13px; font-weight: 600; color: var(--oat-100); } .checkout input.input-text, .checkout textarea, .checkout select, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container .select2-selection { font-family: var(--font-body); font-size: 15px; color: var(--oat-50); background: var(--ink-800); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; width: 100%; } .woocommerce form .form-row input.input-text:focus, .checkout textarea:focus, .checkout select:focus { outline: none; border-color: var(--caramel-500); box-shadow: var(--ring-focus); } #payment { background: var(--ink-900); border-radius: 14px; padding: 20px; margin-top: 16px; } #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; } .quantity input.qty { width: 64px; text-align: center; background: var(--ink-800); border: 1px solid var(--border); color: var(--oat-50); font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); border-radius: 8px; padding: 10px; } /* mini cart drawer */ .cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--ink-900); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); z-index: 200; display: flex; flex-direction: column; } .cart-drawer.open { transform: none; } .cart-drawer__backdrop { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink-950) 60%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--dur-base); z-index: 199; } .cart-drawer__backdrop.open { opacity: 1; visibility: visible; } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--border); } .cart-drawer__head h2 { font-size: 20px; } .cart-drawer__body { padding: 22px; overflow-y: auto; flex: 1; } .cart-drawer__foot { padding: 22px; border-top: 1px solid var(--border); display: grid; gap: 10px; } .cart-drawer .widget_shopping_cart_content ul { list-style: none; padding: 0; margin: 0; } /* buttons: map woo buttons to .btn */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 13px 24px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; background: var(--caramel-500); color: var(--brand-on); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--caramel-400); color: var(--brand-on); } .woocommerce a.button.alt, .woocommerce button.button.alt, .single_add_to_cart_button { background: var(--caramel-500); } .woocommerce a.button:active, .woocommerce button.button:active { transform: translateY(1px); } /* ============================================================ COOKIE CONSENT BANNER (GDPR) — rendered in footer, hidden until needed ============================================================ */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: color-mix(in oklab, var(--ink-950) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); box-shadow: 0 -12px 40px -20px rgba(0,0,0,0.6); } .cookie-banner[hidden] { display: none; } .cookie-banner__inner { display: flex; flex-direction: column; gap: 16px; padding-block: 20px; } .cookie-banner__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--oat-50); margin: 0 0 4px; } .cookie-banner__body { font-size: 13.5px; line-height: 1.55; color: var(--slate-300); margin: 0; max-width: 68ch; } .cookie-banner__body a { color: var(--caramel-300); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (min-width: 760px){ .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .cookie-banner__actions { flex: none; } } /* split body spacing when a WYSIWYG is used */ .split__body p + p { margin-top: 16px; } .split__body { color: var(--slate-300); } /* article header left-aligned wrapper used on single posts */ .single .article { text-align: left; } /* mini-cart list (drawer) */ .cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 14px 0; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); } .cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; } .cart-drawer .woocommerce-mini-cart__buttons a { width: 100%; } .cart-drawer li.mini_cart_item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); position: relative; } .cart-drawer li.mini_cart_item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; } .cart-drawer li.mini_cart_item a.remove { position: absolute; right: 0; top: 14px; color: var(--slate-400); } /* comment list basic */ .comment-list ol.children { list-style: none; padding-left: 24px; } .comment-body { padding: 18px 0; border-bottom: 1px solid var(--border); } .comment-author { font-family: var(--font-display); font-weight: 700; color: var(--oat-50); } .comment-meta { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.06em; color: var(--slate-400); } .comment-respond { margin-top: 40px; } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--oat-50); background: var(--ink-800); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; } /* ============================================================ PORTED FROM THE PROTOTYPE (site/site.css) — new section types: shop toolbar & filter chips, region rows, long-read, case studies, panels/newsletter, reviews, notes strip, legal documents, skip link. ============================================================ */ /* ============================================================ NAV — 6 items; tighten desktop gap ============================================================ */ @media (min-width: 900px) { .site-nav { gap: 26px; } } @media (min-width: 1100px) { .site-nav { gap: 34px; } } /* ============================================================ SHOP — toolbar, filters, sort · woocommerce/archive-product.php ============================================================ */ .shop-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-block: 24px; border-bottom: 1px solid var(--border); position: sticky; top: 66px; z-index: 40; background: color-mix(in oklab, var(--ink-950) 92%, transparent); backdrop-filter: blur(10px); } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip-in { position: absolute; opacity: 0; pointer-events: none; } .chip-in + label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--oat-200); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); } .chip-in + label:hover { border-color: var(--border-strong); color: var(--oat-50); } .chip-in:checked + label { background: var(--caramel-500); border-color: var(--caramel-500); color: var(--brand-on); font-weight: 600; } .chip-in:focus-visible + label { box-shadow: var(--ring-focus); } .chip-in + label .n { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; opacity: 0.7; } .sort-wrap { display: flex; align-items: center; gap: 10px; } .sort-wrap label { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-400); white-space: nowrap; } .sort-wrap select { appearance: none; background: var(--ink-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca9a7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--border); color: var(--oat-100); font-family: var(--font-body); font-size: 14px; padding: 10px 40px 10px 14px; border-radius: 9px; } .sort-wrap select:focus-visible { outline: none; border-color: var(--caramel-500); box-shadow: var(--ring-focus); } .result-count { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-400); padding-block: 22px 0; } .product-grid--shop { padding-top: 30px; } @media (min-width: 1180px) { .product-grid--shop { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ MAPS — editorial region rows ============================================================ */ .region { padding-block: 56px; border-bottom: 1px solid var(--border); } .region__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } @media (min-width: 880px) { .region__grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } .region--flip .region__media { order: 2; } } .region__media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--ink-800); border: 1px solid var(--border); } .region__media img { width: 100%; height: 100%; object-fit: cover; } .region__coord { position: absolute; left: 14px; bottom: 14px; background: color-mix(in oklab, var(--ink-950) 74%, transparent); padding: 7px 11px; border-radius: 7px; backdrop-filter: blur(3px); } .region h2 { font-size: clamp(27px, 6.4vw, 40px); margin-top: 14px; } .region p { margin-top: 16px; color: var(--slate-300); line-height: 1.68; max-width: 52ch; } .region__maps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .region__maps a { display: inline-flex; align-items: baseline; gap: 9px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--oat-100); transition: border-color var(--dur-fast), background var(--dur-fast); } .region__maps a:hover { border-color: var(--caramel-500); background: color-mix(in oklab, var(--caramel-500) 10%, transparent); } .region__maps .p { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 12px; color: var(--caramel-300); } /* ============================================================ LONG-READ · geology page ============================================================ */ .longread { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 48px 24px; } @media (min-width: 1000px) { .longread { grid-template-columns: 232px 1fr; gap: 72px; align-items: start; } } .toc { position: sticky; top: 92px; } .toc h2 { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 14px; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--border); } .toc li { counter-increment: toc; } .toc a { display: block; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--slate-300); } .toc a::before { content: counter(toc, decimal-leading-zero) " "; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; color: var(--slate-500); margin-right: 6px; } .toc a:hover { color: var(--oat-50); border-left-color: var(--caramel-500); } .prose { max-width: 68ch; } .prose h2 { font-size: clamp(25px, 5.4vw, 34px); margin: 0 0 18px; scroll-margin-top: 96px; } .prose h3 { font-size: 19px; margin: 34px 0 10px; color: var(--oat-100); } .prose p { margin: 0 0 18px; color: var(--oat-200); line-height: 1.75; font-size: 16.5px; } .prose p.first::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: 0.82; padding: 4px 12px 0 0; color: var(--caramel-400); } .prose > section { padding-block: 40px; border-top: 1px solid var(--border); } .prose > section:first-child { border-top: 0; padding-top: 0; } .prose ul { margin: 0 0 20px; padding-left: 20px; color: var(--oat-200); line-height: 1.7; } .prose li { margin-bottom: 9px; } .prose li::marker { color: var(--caramel-400); } .prose strong { color: var(--oat-50); font-weight: 600; } .prose a { color: var(--caramel-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--caramel-200); } .prose figure { margin: 0 0 26px; } .prose figcaption { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.03em; color: var(--slate-400); margin-top: 10px; } .prose figure img { border-radius: 14px; border: 1px solid var(--border); } .pull { margin: 30px 0; padding: 22px 26px; border-left: 2px solid var(--caramel-500); background: color-mix(in oklab, var(--caramel-500) 7%, transparent); border-radius: 0 12px 12px 0; } .pull p { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 3.6vw, 24px); line-height: 1.32; color: var(--oat-50); margin: 0; letter-spacing: -0.01em; } .era { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; margin: 0 0 24px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; } .era dt { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 12px; color: var(--caramel-300); font-variant-numeric: tabular-nums; white-space: nowrap; } .era dd { margin: 0; font-size: 14.5px; color: var(--slate-300); line-height: 1.5; } .inline-map { display: flex; gap: 16px; align-items: center; margin: 28px 0; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--ink-900); } .inline-map img { width: 84px; height: 90px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; } .inline-map .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--oat-50); } .inline-map .d { font-size: 13.5px; color: var(--slate-300); margin-top: 4px; } /* ============================================================ BESPOKE — case studies ============================================================ */ .case { padding-block: 56px; border-top: 1px solid var(--border); } .case__grid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 900px) { .case__grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .case--flip .case__media { order: 2; } } .case__media { border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; border: 1px solid var(--border); background: var(--ink-800); } .case__media img { width: 100%; height: 100%; object-fit: cover; } .case__kicker { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel-300); } .case h2 { font-size: clamp(24px, 5.4vw, 34px); margin: 14px 0 0; } .case p { margin-top: 16px; color: var(--slate-300); line-height: 1.7; max-width: 50ch; } .case__facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .case__facts div { min-width: 96px; } .case__facts dt { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-400); } .case__facts dd { margin: 5px 0 0; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 14px; color: var(--oat-100); } /* ============================================================ TRADE / NEWSLETTER / REVIEWS ============================================================ */ .duo { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; gap: 22px; } } .panel { padding: 32px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--ink-900); } .panel h3 { font-size: 22px; margin-bottom: 12px; } .panel p { color: var(--slate-300); font-size: 14.5px; line-height: 1.65; max-width: 40ch; } .panel .btn { margin-top: 22px; } .signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .signup input { flex: 1 1 200px; background: var(--ink-800); border: 1px solid var(--border); border-radius: 10px; color: var(--oat-50); font-family: var(--font-body); font-size: 15px; padding: 13px 15px; } .signup input::placeholder { color: var(--slate-400); } .signup input:focus { outline: none; border-color: var(--caramel-500); box-shadow: var(--ring-focus); } .signup small { flex: 1 1 100%; font-size: 11.5px; color: var(--slate-400); line-height: 1.5; } .reviews { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, 1fr); } } .review { padding: 26px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--ink-900); display: flex; flex-direction: column; gap: 14px; } .stars { display: flex; gap: 3px; color: var(--caramel-400); font-size: 13px; letter-spacing: 0.14em; } .review p { font-size: 15px; line-height: 1.68; color: var(--oat-200); } .review cite { margin-top: auto; font-style: normal; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); } .ship-note { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 22px; border: 1px dashed var(--border-strong); border-radius: 12px; margin-top: 28px; } .ship-note div { font-size: 13.5px; color: var(--slate-300); } .ship-note b { color: var(--oat-100); font-weight: 600; display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); margin-bottom: 4px; } /* ============================================================ LEGAL / DOC PAGES ============================================================ */ .doc { display: grid; grid-template-columns: 1fr; gap: 36px; padding-block: 44px 20px; } @media (min-width: 1000px) { .doc { grid-template-columns: 220px 1fr; gap: 64px; align-items: start; } } .doc .prose { max-width: 72ch; } .doc .prose h2 { font-size: 22px; margin-top: 0; } .doc .prose h3 { font-size: 16.5px; } .doc .prose p, .doc .prose li { font-size: 15.5px; } .doc .prose > section { padding-block: 32px; } .doc-meta { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11px; letter-spacing: 0.08em; color: var(--slate-400); line-height: 1.8; } .doc-meta b { display: block; color: var(--oat-200); font-weight: 400; } .doc-nav { margin-top: 26px; } .doc-nav h2 { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 12px; } .doc-nav a { display: block; padding: 7px 0; font-size: 13.5px; color: var(--slate-300); } .doc-nav a:hover { color: var(--caramel-300); } .doc-nav a[aria-current="page"] { color: var(--caramel-300); } .tbl { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px; } .tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .tbl th { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); font-weight: 400; } .tbl td { color: var(--oat-200); } .tbl td.n { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 13.5px; white-space: nowrap; } /* skip link (WCAG 2.2 AA) */ .skip, .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--caramel-500); color: var(--brand-on); font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: 8px; transition: top var(--dur-fast) var(--ease-out); } .skip:focus, .skip-link:focus { top: 12px; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--caramel-400); outline-offset: 2px; } /* article cover caption (ACF post_cover_caption) */ .article__cover { margin: 0 auto; } .article__cover figcaption { font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.03em; color: var(--slate-400); margin-top: 10px; } /* ============================================================ NAV MENUS — WordPress emits
  • (and sometimes