/** Shopify CDN: Minification failed
Line 2338:8 Unexpected "{"
Line 2338:17 Expected ":"
Line 2338:23 Unexpected ","
**/
/* ==========================================================================
provis-all.css — Combined Provis custom styles
Generated 2026-04-10. Source files preserved in assets/ for editing.
========================================================================== */
/* --- Global bulletproofing --- */
html { scroll-behavior: auto !important; overflow-x: hidden !important; }
body { overflow-x: hidden !important; }
/* --- Global centering: everything centered, no bleed --- */
section, .shopify-section, .shopify-section > div,
.shopify-section > section, [class*="provis-"] {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Kill 100vw hacks on provis sections only — not header/theme elements */
section[style*="100vw"],
div[class*="pv-"][style*="100vw"] {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Force full-bleed sections to stay within viewport */
.pv-mq, .pv-cc, .pv-os, .pv-ctab, .pv-sub,
.pv-img-hero, .pv-page-hero, .pv-brand-story,
[class*="marquee"], [class*="cta-banner"],
[class*="subscribe-cta"], [class*="origins-strip"],
[class*="newsletter"], [class*="founder-note"],
[class*="brewing-today"], [class*="collection-hero"] {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow-x: hidden !important;
}
/* ═══════════════════════════════════════════════════════════════
MOBILE FIXES (max-width: 768px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* --- Nothing under 12px on mobile — nuclear override --- */
.pv-cc__card-origin,
.pv-cc__card-badge,
.pv-cc__card-flag,
.pv-cc__card-add,
.pv-cc__eyebrow,
.pv-os__card-country,
.pv-os__eyebrow,
.pv-ph-scroll-text,
.pv-img-hero__eyebrow,
.pv-img-hero__eyebrow-text,
.pv-img-hero__btn,
.pv-img-hero__scroll-text,
.pv-founder__eyebrow,
.pv-sub__eyebrow,
.pv-sub__btn,
.pv-nl__eyebrow,
.pv-sub-bag-num,
.pv-rn__eyebrow,
.cart-bubble__text,
.cart-bubble__text-count,
[class*="eyebrow"],
[class*="badge"],
[class*="fine"],
[class*="small"],
[class*="disclaimer"],
[class*="bubble"],
[class*="tag"],
[class*="counter"],
[class*="hint"],
[class*="scroll-text"] {
font-size: 12px !important;
}
/* Nuclear: override section-ID-scoped font sizes under 12px */
[id*="shopify-section"] [class*="origin"],
[id*="shopify-section"] [class*="eyebrow"],
[id*="shopify-section"] [class*="scroll-text"],
[id*="shopify-section"] [class*="fine"],
[id*="shopify-section"] [class*="note"],
[id*="shopify-section"] [class*="hint"],
[id*="shopify-section"] [class*="disclaimer"],
[id*="shopify-section"] [class*="count"],
[id*="shopify-section"] [class*="label"]:not(label),
[id*="shopify-section"] [class*="country"],
[id*="shopify-section"] [class*="farm"],
[id*="shopify-section"] [class*="num"],
[id*="shopify-section"] [class*="stat"],
[id*="shopify-section"] [class*="tag"]:not(main):not(body) {
font-size: 12px !important;
}
/* Form elements */
[id*="shopify-section"] input,
[id*="shopify-section"] select,
[id*="shopify-section"] textarea,
[id*="shopify-section"] label {
font-size: 16px !important;
}
/* --- Overflow containment: nothing wider than screen --- */
.pv-mq, [class*="marquee"],
.pv-img-hero, [class*="image-hero"],
.pv-ctab, [class*="cta-banner"],
section, .shopify-section {
max-width: 100vw !important;
overflow-x: hidden !important;
}
.pv-mq__track, [class*="marquee"] [class*="track"] {
/* marquee tracks are intentionally wide — parent clips */
}
.pv-img-hero__bg, .pv-ph-bg,
[class*="hero"] [class*="bg"],
.pv-ctab-bg {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* --- Header overlap fix --- */
.shopify-section[id*="main"] .product-information {
padding-block-start: 120px !important;
}
.provis-image-hero, .provis-page-hero,
.provis-collection-hero, [class*="collection-hero"] {
margin-top: 0 !important;
}
/* --- Carousel cards: bigger on mobile --- */
.pv-cc__card {
flex: 0 0 80% !important;
}
.pv-cc__track { gap: 16px !important; }
.pv-cc__track-wrap { padding: 0 20px !important; }
.pv-cc__card-name { font-size: 1.1rem !important; height: auto !important; }
.pv-cc__card-notes { font-size: 0.9rem !important; height: auto !important; }
.pv-cc__card-price { font-size: 1rem !important; }
.pv-cc__card-add { padding: 10px 16px !important; }
.pv-cc__all {
flex: 0 0 80% !important;
width: 80% !important;
max-width: 80% !important;
aspect-ratio: auto !important;
margin: 0 !important;
}
.pv-cc { padding: 48px 0 !important; }
.pv-cc__header { margin-bottom: 28px !important; padding: 0 20px !important; }
.pv-cc__heading { font-size: 1.8rem !important; }
.pv-cc__nav { margin-top: 24px !important; }
/* --- Subscribe tiers: single column --- */
.pv-sub-tiers-grid {
grid-template-columns: 1fr !important;
max-width: 100% !important;
}
/* --- Split story: single column --- */
.pv-split-visual--logo {
min-height: 280px !important;
padding: 32px !important;
}
/* --- Origins strip: stack vertically --- */
.pv-os__grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* --- Hide sticky ATC --- */
.provis-sticky-mobile-atc, .sticky-add-to-cart,
sticky-add-to-cart {
display: none !important;
}
/* --- About page: tighten all sections --- */
[class*="pv-bs-"] {
padding: 40px 20px !important;
min-height: auto !important;
}
[class*="pv-bs-"] [class*="grid"] {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
[class*="pv-bs-"] [class*="img"] {
height: 220px !important;
min-height: 0 !important;
border-radius: 4px !important;
overflow: hidden !important;
}
[class*="pv-bs-"] h2 {
font-size: 1.6rem !important;
}
[class*="pv-split-story"] {
padding: 32px 0 !important;
}
[class*="pv-split"] .pv-split {
gap: 24px !important;
padding: 0 20px !important;
}
.pv-split-img {
height: 280px !important;
border-radius: 4px !important;
}
.pv-split-visual--logo {
min-height: 260px !important;
padding: 28px !important;
border-radius: 4px !important;
}
/* --- PDP: hide sticky bar + fix spacing --- */
.sticky-add-to-cart, sticky-add-to-cart,
[class*="sticky-add-to-cart"], [data-stuck] {
display: none !important;
height: 0 !important;
}
/* --- Producer cards: bigger on mobile --- */
.pv-os__card {
aspect-ratio: 4/5 !important;
min-height: 300px !important;
}
/* --- Brewing today: tighter on mobile --- */
[class*="pv-bt-"] {
padding: 48px 20px !important;
}
[class*="pv-bt-"] [class*="media"] {
aspect-ratio: 1/1 !important;
max-height: 350px !important;
}
/* Hide ALL decorative pseudo-elements on mobile about page */
.provis-values-grid::before,
.provis-values-grid::after,
.provis-brand-story::before,
.provis-brand-story::after,
[class*="split-story"]::before,
[class*="split-story"]::after {
display: none !important;
}
/* Kill all section gaps / margins on mobile about page */
.provis-values-grid,
.provis-brand-story,
[class*="provis-split-story"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Values grid: remove top decoration space */
[class*="values-grid"] [class*="header"]::before,
[class*="values-grid"] [class*="header"]::after {
display: none !important;
}
/* Hide gold diamond ornaments on mobile */
.pv-ornament, [class*="ornament"] {
display: none !important;
}
/* Gold bleed on right edge — kill overflow */
.provis-values-grid, [class*="values-grid"] {
overflow: hidden !important;
}
/* --- CTA banner: contain width --- */
.pv-ctab {
width: 100% !important;
margin-left: 0 !important;
}
/* --- Product page title --- */
.shopify-section[id*="main"] h1 {
font-size: 1.6rem !important;
}
/* --- Footer: readable text --- */
.footer [class*="menu"] {
font-size: 14px !important;
}
/* --- Cart bubble: ensure visible --- */
.cart-bubble__text-count {
font-size: 12px !important;
}
/* --- Cart discount code: stack on mobile --- */
.cart-summary [class*="discount"] form,
.cart-summary [class*="discount"] [class*="form"],
[class*="discount-form"],
[class*="cart"] [class*="discount"] [class*="row"],
[class*="cart"] [class*="discount"] [class*="wrapper"] {
flex-direction: column !important;
gap: 8px !important;
}
.cart-summary [class*="discount"] input,
[class*="discount-form"] input {
width: 100% !important;
min-width: 0 !important;
}
.cart-summary [class*="discount"] button,
[class*="discount-form"] button {
width: 100% !important;
}
/* --- Mobile header: force visible --- */
.shopify-section[id*="header"],
header-component, .header {
z-index: 999 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 60px !important;
}
.header__drawer {
display: flex !important;
align-items: center !important;
}
.header__icon--menu,
.menu-drawer-container > summary {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 10 !important;
}
/* --- Mobile drawer menu: readable links --- */
.menu-drawer a,
.menu-drawer__menu-item,
[class*="menu-drawer"] a {
color: inherit !important;
text-decoration: none !important;
font-size: 16px !important;
padding: 12px 0 !important;
}
/* --- Hide ALL sticky ATC bars on PDP --- */
.sticky-add-to-cart, sticky-add-to-cart,
[class*="sticky-add-to-cart"],
.provis-sticky-mobile-atc,
.sticky-add-to-cart__bar,
[data-stuck] {
display: none !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* --- About page: collapse empty space from split sections --- */
.pv-split-img {
height: 300px !important;
min-height: 0 !important;
}
.pv-split { gap: 24px !important; }
.pv-split-story { padding: 40px 0 !important; }
/* --- Subscribe CTA: no overlap --- */
.pv-sub {
min-height: auto !important;
}
.pv-sub__img {
min-height: 250px !important;
max-height: 300px !important;
}
/* --- Header icons: prevent overlap on mobile --- */
.header-actions {
gap: 8px !important;
flex-wrap: nowrap !important;
}
.header-actions__action {
min-width: 32px !important;
min-height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 1 !important;
}
/* Ensure hamburger menu button is clickable above account link */
.header__drawer button,
[class*="header-drawer"] button,
header button[aria-label] {
position: relative !important;
z-index: 10 !important;
}
/* --- Carousel section headings: bigger on mobile --- */
.pv-cc__heading {
font-size: clamp(1.6rem, 6vw, 2rem) !important;
}
.pv-cc__desc {
font-size: 0.95rem !important;
padding: 0 8px !important;
}
/* --- Brand story / values: readable on mobile --- */
[class*="values-grid"] [class*="grid"] {
grid-template-columns: 1fr !important;
}
/* --- CTA banner: fit on mobile --- */
.pv-ctab {
padding: 48px 24px !important;
}
.pv-ctab-body {
font-size: 0.95rem !important;
}
/* --- Footer newsletter: stack on mobile --- */
[class*="newsletter-inline"] [class*="inner"] {
flex-direction: column !important;
}
}
/* Single-card static grid: make the card wider so it doesn't look lost */
.pv-cc--static .pv-cc__track:has(.pv-cc__card:only-child) .pv-cc__card {
max-width: 360px !important;
}
/* Kill all entrance animations sitewide — prevents layout shifts */
.pv-cc__eyebrow, .pv-cc__heading, .pv-cc__heading .pv-cc__word,
.pv-cc__desc, .pv-cc__line, .pv-cc__card, .pv-cc__all, .pv-cc__nav,
.pv-cc__intro-callout, [data-pv-reveal], .pv-kenburns,
.pv-words-reveal .pv-word {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* Hide video hero section on home page */
[id*="hero_video"] { display: none !important; }
/* Hide footer "Get First Access" email bar — using the big newsletter section instead */
[id*="footer_m9NzUG"] { display: none !important; }
/* Hide "Four steps. Worlds apart." process strip on reserve page */
[id*="process_strip"] { display: none !important; }
/* Hide first marquee on coffee page */
[id*="marquee_1"] { display: none !important; }
/* Hide sticky add-to-cart bar on product pages */
.sticky-add-to-cart,
sticky-add-to-cart,
[class*="sticky-add-to-cart"],
.provis-sticky-mobile-atc {
display: none !important;
}
/* Hide Shop Pay / accelerated checkout sitewide */
.accelerated-checkout-block, .shopify-payment-button,
.shopify-payment-button__button, .dynamic-checkout__buttons,
shopify-accelerated-checkout, [class*="accelerated-checkout"],
[class*="additional-checkout"], [class*="shopify-payment-button"],
shopify-payment-terms, .shopify-payment-terms,
[class*="payment-terms"], more-payment-options-link,
.shopify-payment-button__more-options {
display: none !important;
}
/* Hide Account text, show icon only */
shopify-account .account-button__text, .account-button__text,
[class*="account"] [class*="text-style"], .account-button--text {
display: none !important;
}
shopify-account [class*="avatar-initial"] {
display: none !important;
}
/* Cart bubble: white bg, navy text — override all Shopify defaults */
cart-bubble, .cart-bubble,
[class*="cart-bubble"],
[class*="cart-count"],
.header [class*="bubble"] {
background: transparent !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: none !important;
}
.cart-bubble__background {
background: #FFFFFF !important;
opacity: 1 !important;
}
.cart-bubble__text,
.cart-bubble__text-count {
color: #222432 !important;
}
/* Align header action icons evenly */
.header-actions {
display: flex !important;
align-items: center !important;
gap: 20px !important;
}
/* ==========================================================================
SOURCE: provis-brand.css
========================================================================== */
/* provis-brand.css — v2 (rewritten from spec, 2026-04-06)
- Body type fixed: NO Tiller on body. Inter Tight workhorse.
- Palette: oxblood + paper + ink (gold killed).
- Two motions only: fade-up + hairline-draw.
- Margin-note device baked in. */
@font-face {
font-family: 'Tiller';
src: url('Tiller-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Tiller';
src: url('Tiller-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
/* Tiller-Bold.woff2 fails OTS parsing in Chromium (corrupt file shipped in
theme). Alias weight 700 to Tiller-Heavy.woff2 to eliminate console
warnings + font-decode errors across every page. */
@font-face {
font-family: 'Tiller';
src: url('Tiller-Heavy.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Tiller';
src: url('Tiller-Heavy.woff2') format('woff2');
font-weight: 800; font-style: normal; font-display: swap;
}
:root {
/* Round-6 palette restored */
--provis-cream: #F8FAEF;
--provis-warm-beige: #eef1ea;
--provis-navy: #222432;
--provis-dark: #222432;
--provis-gold: #B9A977;
--provis-gold-hover: #a89664;
--provis-espresso: #2d2418;
--provis-roast: #4a3223;
--provis-muted: #222432a0;
--provis-light-muted: #F8FAEFcc;
--provis-soft-white: #f2f4ec;
--provis-border: #2224320f;
/* New palette aliased back to legacy values so any new section refs still resolve */
--provis-paper: #F8FAEF;
--provis-paper-2: #eef1ea;
--provis-paper-rule: rgba(34, 36, 50, 0.12);
--provis-ink: #222432;
--provis-ink-2: #2d2f44;
--provis-ink-rule: rgba(248, 250, 239, 0.14);
--provis-oxblood: #B9A977;
--provis-oxblood-deep: #a89664;
--provis-mute: rgba(34, 36, 50, 0.62);
--provis-mute-dark: rgba(248, 250, 239, 0.62);
/* Type */
--provis-heading-font: 'Tiller', Georgia, serif;
--provis-body-font: 'DM Sans', sans-serif;
/* Spacing */
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
--space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
--space-9:6rem; --space-10:8rem; --space-11:10rem;
/* Containers */
--container-display: 1440px;
--container-wide: 1240px;
--container-text: 680px;
--container-narrow: 520px;
/* Section padding (the global rule) */
--section-pad-y: clamp(6rem, 10vw, 10rem);
--section-pad-x: clamp(1.5rem, 4vw, 4rem);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Round-6 body type — Tiller everywhere via heading-family override */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--provis-heading-font) !important;
letter-spacing: 0.02em;
}
body * {
--font-heading-family: 'Tiller', Georgia, serif;
}
/* Force proper case on all headings site-wide */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
text-transform: none !important;
}
::selection { background: var(--provis-oxblood); color: var(--provis-paper); }
/* Eyebrow utility */
.pv-eyebrow {
font-family: var(--provis-heading-font);
font-weight: 500;
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--provis-ink);
line-height: 1;
}
.pv-eyebrow--ox { color: var(--provis-oxblood); }
.pv-eyebrow--mute { color: var(--provis-mute); }
.pv-eyebrow--paper { color: var(--provis-paper); }
/* Drop cap (one per page max) */
.pv-drop-cap::first-letter {
font-family: var(--provis-heading-font);
font-weight: 700;
font-size: 3.6em;
line-height: 1;
float: left;
margin: 0.12em 0.12em -0.05em 0;
padding: 0;
color: var(--provis-oxblood);
-webkit-initial-letter: 3;
initial-letter: 3;
}
/* Hairline */
.pv-hairline {
display: block; width: 96px; height: 1px;
background: var(--provis-oxblood);
margin: var(--space-5) 0;
}
/* Section wrapper */
.pv-section {
padding: var(--section-pad-y) var(--section-pad-x);
background: var(--provis-paper);
color: var(--provis-ink);
}
.pv-section--ink { background: var(--provis-ink); color: var(--provis-paper); }
.pv-section--ink h1, .pv-section--ink h2, .pv-section--ink h3, .pv-section--ink h4 { color: var(--provis-paper); }
.pv-section__inner { max-width: var(--container-wide); margin: 0 auto; }
.pv-section__inner--text { max-width: var(--container-text); }
.pv-section__inner--display { max-width: var(--container-display); }
/* Margin-note grid (signature device) */
.pv-margin-grid {
display: grid;
grid-template-columns: clamp(80px, 18vw, 200px) 1fr;
column-gap: clamp(1.5rem, 3vw, 3rem);
}
.pv-margin-col {
display: flex; flex-direction: column; align-items: flex-start;
gap: 1.25rem; padding-top: 0.6rem;
border-right: 1px solid var(--provis-paper-rule);
padding-right: clamp(1rem, 2vw, 2rem);
}
.pv-section--ink .pv-margin-col { border-right-color: var(--provis-ink-rule); }
.pv-margin-col__chapter {
font-family: var(--provis-heading-font);
font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.04em;
color: var(--provis-oxblood); line-height: 1;
}
.pv-margin-col__pilcrow {
font-family: var(--provis-heading-font);
font-size: 1.25rem; color: var(--provis-oxblood);
margin-top: auto; opacity: 0.7;
}
@media (max-width: 749px) {
.pv-margin-grid { grid-template-columns: 1fr; }
.pv-margin-col {
flex-direction: row; align-items: center; gap: 0.75rem;
border-right: none; border-bottom: 1px solid var(--provis-paper-rule);
padding: 0 0 1rem; margin-bottom: 1.5rem;
}
.pv-margin-col__pilcrow { margin-top: 0; margin-left: auto; }
}
/* Reveal — progressive enhancement. Content is visible by default so
crawlers, static renderers, social preview bots, and no-JS users see
everything. The fade-in is only armed once JS has marked the document
as ready, at which point IntersectionObserver adds .pv-visible. */
[data-pv-reveal] {
opacity: 1; transform: none;
transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
html.pv-js-loaded [data-pv-reveal]:not(.pv-visible):not(.is-visible) {
opacity: 0; transform: translateY(24px);
}
[data-pv-reveal].pv-visible,
[data-pv-reveal].is-visible { opacity: 1; transform: none; }
/* Always-visible safety nets for product grids */
.product-grid-container, .product-grid-container *,
.collection-wrapper, .collection-wrapper *,
results-list, results-list *,
product-card, product-card *,
.product-grid__item, .product-grid__item * {
opacity: 1 !important;
visibility: visible !important;
}
/* Image hover */
.pv-img-hover { overflow: hidden; }
.pv-img-hover img { transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); }
.pv-img-hover:hover img { transform: scale(1.03); }
/* Image grading */
.pv-img-grade { filter: saturate(0.88) contrast(1.06) brightness(0.97) sepia(0.04); }
/* Buttons */
.pv-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 18px 36px; border-radius: 2px;
font-family: var(--provis-heading-font); font-weight: 500;
font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
text-decoration: none; cursor: pointer; border: none;
transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}
.pv-btn--primary { background: var(--provis-oxblood); color: var(--provis-paper); }
.pv-btn--primary:hover { background: var(--provis-oxblood-deep); }
.pv-btn--ghost {
background: transparent; color: var(--provis-ink);
border: 1px solid var(--provis-ink); padding: 17px 35px;
}
.pv-btn--ghost:hover { background: var(--provis-ink); color: var(--provis-paper); }
.pv-btn--ghost-paper {
background: transparent; color: var(--provis-paper);
border: 1px solid var(--provis-paper); padding: 17px 35px;
}
.pv-btn--ghost-paper:hover { background: var(--provis-paper); color: var(--provis-ink); }
/* Text link */
.pv-link {
font-family: var(--provis-heading-font); font-weight: 500;
font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--provis-oxblood); text-decoration: none;
border-bottom: 1px solid var(--provis-oxblood); padding-bottom: 2px;
}
.pv-link:hover { color: var(--provis-oxblood-deep); }
/* Form elements */
.pv-input, .pv-textarea, .pv-select {
width: 100%; background: transparent;
border: none; border-bottom: 1px solid var(--provis-paper-rule);
padding: 12px 0; font-family: var(--provis-body-font);
font-size: 1rem; color: var(--provis-ink);
border-radius: 0; outline: none;
}
.pv-input:focus, .pv-textarea:focus, .pv-select:focus { border-bottom-color: var(--provis-oxblood); }
.pv-label {
display: block; font-family: var(--provis-heading-font);
font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--provis-mute); margin-bottom: 6px;
}
/* Footer dark theme */
.footer-content,
[data-section-id*="footer"] {
background: var(--provis-ink);
color: var(--provis-mute-dark);
}
.footer-content h2 { color: var(--provis-paper); font-family: var(--provis-heading-font); }
.footer-content a:hover { color: var(--provis-oxblood); }
/* --------------------------------------------------------------------------
Header logo (the seal)
- Single source: badge-200.png
- Lock visible container to --original (no theme swap)
- On dark/transparent hero state: render badge as-is — light dog
details show clearly on the dark video.
- On scrolled WHITE nav state: add a navy radial-gradient backdrop
behind the badge (sized to the seal's inner circle) so the cream
dog highlights have something dark to contrast against.
- Responsive sizing via clamp().
-------------------------------------------------------------------------- */
.header-logo__image-container--original {
display: block !important;
position: relative;
isolation: isolate;
}
.header-logo__image-container--inverse {
display: none !important;
}
.header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
display: block !important;
}
.header-logo,
.header-logo * {
opacity: 1 !important;
}
.header-logo img {
opacity: 1 !important;
filter: none !important;
position: relative;
z-index: 2;
}
/* Navy backdrop behind seal — only when header is in scrolled/sticky-active
state (white nav background). Radial gradient sized to fit the seal's
inner circle so it doesn't spill past the rim/cherries on the badge. */
.header-logo__image-container--original::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(circle, #1a1b22 36%, rgba(26,27,34,0.85) 44%, transparent 50%);
opacity: 0;
transition: opacity 0.35s ease;
}
header-component[data-sticky-state="active"] .header-logo__image-container--original::before,
header-component:not([transparent]) .header-logo__image-container--original::before,
header-component[transparent="not-sticky"][data-sticky-state="active"] .header-logo__image-container--original::before {
opacity: 1;
}
/* Responsive seal sizing — proportionate to viewport. */
.header-logo__image {
height: clamp(44px, 5.5vw, 76px) !important;
width: auto !important;
max-width: clamp(44px, 5.5vw, 76px);
}
@media (max-width: 749px) {
.header-logo__image {
height: clamp(40px, 10vw, 56px) !important;
max-width: clamp(40px, 10vw, 56px);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
[data-pv-reveal] { opacity: 1 !important; transform: none !important; }
}
html { scroll-behavior: smooth; }
body, html { overflow-x: hidden; }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--provis-oxblood); outline-offset: 3px;
}
/* Kill old gold accents from any leftover section CSS that referenced var(--provis-gold) */
/* (alias above already covers it; this is belt-and-suspenders for hard-coded #B9A977) */
[style*="#B9A977"], [style*="#b9a977"] { color: var(--provis-oxblood) !important; }
/* --------------------------------------------------------------------------
Site-wide animation + overlay system
- Subtle film grain overlay on every page (fixed, low opacity)
- Auto-reveal motion on section headings, paragraphs, images
- Smooth scroll behavior + scroll-triggered fade-in via IntersectionObserver
-------------------------------------------------------------------------- */
/* Film grain overlay — sits above everything but pointer-events: none */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
will-change: transform;
}
/* Subtle scroll-triggered reveals on common section elements
(relies on the existing provis-scroll-reveal.js IntersectionObserver
which adds .pv-visible to elements with data-pv-reveal). For sections
that don't have data-pv-reveal yet, we provide a CSS-only fallback that
gently fades in on initial paint. */
@media (prefers-reduced-motion: no-preference) {
/* CSS-only initial paint reveal — applied to common section types
so EVERY section animates in even without JS attributes */
section[class*="provis-"], section[class*="pv-"], .shopify-section > section {
animation: pvSectionFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.05s;
}
@keyframes pvSectionFadeIn {
from { opacity: 0.001; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Reset reveals for elements that have their own data-pv-reveal */
[data-pv-reveal] { animation: none !important; }
}
/* Image hover overlay — applied to non-carousel product images.
Coffee carousel (.pv-cc__card-img) is excluded so its own gallery
transition with rotate isn't overridden. */
.pv-img-hover img,
[class*="product-card"] img,
.product-grid__item img {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.5s ease !important;
}
.pv-img-hover:hover img,
[class*="product-card"]:hover img {
filter: brightness(0.94) contrast(1.04);
}
/* Smooth scroll feel */
html { scroll-behavior: smooth; }
/* Subtle parallax-feel on hero sections via background-attachment */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
[class*="provis-page-hero"] .pv-ph-bg,
[class*="provis-image-hero"] .pv-img-hero__bg {
will-change: transform;
}
}
/* ══════════════════════════════════════════════════════════
PRODUCT PAGE — Brand cohesion overrides
Applied to Shopify's native product-information section so
the page reads as Provis (Tiller, cream/navy/gold, locked
button system) without rewriting the section.
══════════════════════════════════════════════════════════ */
/* Section-level: warm cream background on the entire main product block */
.shopify-section[id*="main"] .product-information,
.shopify-section[id*="main"] product-information,
.shopify-section[id*="main"] .product-details,
.shopify-section[id*="main"] .product-details-grid {
background: #F8FAEF;
}
/* Product title — Tiller, dramatic */
.shopify-section[id*="main"] .product-title h1,
.shopify-section[id*="main"] .product-title,
.shopify-section[id*="main"] h1.product__title,
.shopify-section[id*="main"] h1 {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.01em !important;
color: #222432 !important;
}
/* Price — bigger, Tiller, gold */
.shopify-section[id*="main"] .product-price,
.shopify-section[id*="main"] .price,
.shopify-section[id*="main"] [class*="price__regular"],
.shopify-section[id*="main"] .price-item--regular {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: 1.5rem !important;
color: #B9A977 !important;
letter-spacing: 0.01em !important;
}
/* Variant picker buttons — locked Provis style */
.shopify-section[id*="main"] variant-picker .variant-picker__option-values label,
.shopify-section[id*="main"] .variant-picker__option-values label,
.shopify-section[id*="main"] .product-form__input label,
.shopify-section[id*="main"] [class*="variant-picker"] label {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
border: 1px solid rgba(34,36,50,0.18) !important;
border-radius: 1px !important;
padding: 14px 22px !important;
background: transparent !important;
color: #222432 !important;
transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}
.shopify-section[id*="main"] variant-picker input:checked + label,
.shopify-section[id*="main"] .variant-picker__option-values input:checked + label,
.shopify-section[id*="main"] [class*="variant-picker"] input:checked + label {
border-color: #222432 !important;
background: #222432 !important;
color: #F8FAEF !important;
}
/* Variant option group label (e.g., "Grind") */
.shopify-section[id*="main"] .variant-picker__option-label,
.shopify-section[id*="main"] .product-form__input-label,
.shopify-section[id*="main"] legend {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: #B9A977 !important;
margin-bottom: 12px !important;
}
/* Add to cart button — locked Provis style */
.shopify-section[id*="main"] .add-to-cart-button,
.shopify-section[id*="main"] button[name="add"],
.shopify-section[id*="main"] .product-form__submit,
.shopify-section[id*="main"] .button.add-to-cart-button {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: #222432 !important;
color: #F8FAEF !important;
border: 1px solid #222432 !important;
border-radius: 1px !important;
padding: 18px 36px !important;
height: auto !important;
min-height: 56px !important;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="main"] .add-to-cart-button:hover,
.shopify-section[id*="main"] button[name="add"]:hover,
.shopify-section[id*="main"] .product-form__submit:hover {
background: #B9A977 !important;
border-color: #B9A977 !important;
color: #222432 !important;
transform: translateY(-2px) !important;
}
/* Quantity selector */
.shopify-section[id*="main"] quantity-input,
.shopify-section[id*="main"] .quantity,
.shopify-section[id*="main"] [class*="quantity"] {
border: 1px solid rgba(34,36,50,0.18) !important;
border-radius: 1px !important;
}
/* Description text — DM Sans body */
.shopify-section[id*="main"] .product-description,
.shopify-section[id*="main"] [class*="product-description"],
.shopify-section[id*="main"] .rte {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 1rem !important;
line-height: 1.75 !important;
color: rgba(34,36,50,0.82) !important;
}
/* Dividers — gold hairline instead of grey */
.shopify-section[id*="main"] hr,
.shopify-section[id*="main"] .product-divider,
.shopify-section[id*="main"] [class*="_divider"] {
border: none !important;
height: 1px !important;
background: rgba(34,36,50,0.12) !important;
margin: 24px 0 !important;
}
/* Product recommendations — match coffee carousel card aesthetic */
.shopify-section[id*="recommendations"] .product-recommendations,
.shopify-section[id*="recommendations"] product-recommendations {
background: #F8FAEF !important;
padding: clamp(80px, 11vh, 140px) 0 !important;
}
.shopify-section[id*="recommendations"] h3,
.shopify-section[id*="recommendations"] [class*="recommendations__heading"] {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
color: #222432 !important;
margin-bottom: clamp(32px, 5vh, 56px) !important;
text-align: center !important;
}
.shopify-section[id*="recommendations"] [class*="product-card"] {
border: none !important;
border-radius: 6px !important;
overflow: hidden !important;
background: #222432 !important;
transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}
.shopify-section[id*="recommendations"] [class*="product-card"]:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px rgba(34, 36, 50, 0.22) !important;
}
.shopify-section[id*="recommendations"] [class*="product-card"] [class*="product-title"],
.shopify-section[id*="recommendations"] [class*="product-card"] a {
font-family: 'Tiller', Georgia, serif !important;
color: #F8FAEF !important;
text-decoration: none !important;
}
.shopify-section[id*="recommendations"] [class*="product-card"] [class*="price"] {
color: #B9A977 !important;
font-family: 'Tiller', Georgia, serif !important;
}
/* ══════════════════════════════════════════════════════════
CART PAGE — Brand cohesion overrides
══════════════════════════════════════════════════════════ */
.shopify-section[id*="cart-section"] {
background: #F8FAEF !important;
padding: clamp(80px, 11vh, 140px) 0 !important;
}
.shopify-section[id*="cart-section"] .cart-page-title h1,
.shopify-section[id*="cart-section"] h1,
.shopify-section[id*="cart-section"] .cart__title {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
line-height: 1.05 !important;
letter-spacing: -0.01em !important;
color: #222432 !important;
margin-bottom: clamp(32px, 5vh, 56px) !important;
}
.shopify-section[id*="cart-section"] .cart-products,
.shopify-section[id*="cart-section"] [class*="cart-product"] {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
color: #222432 !important;
}
.shopify-section[id*="cart-section"] .cart-product__title,
.shopify-section[id*="cart-section"] [class*="cart-product__title"],
.shopify-section[id*="cart-section"] .cart-product a,
.shopify-section[id*="cart-section"] [class*="cart-products"] a {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
color: #222432 !important;
text-decoration: none !important;
}
.shopify-section[id*="cart-section"] .cart-product__price,
.shopify-section[id*="cart-section"] [class*="cart-product"] [class*="price"],
.shopify-section[id*="cart-section"] .price {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 600 !important;
color: #B9A977 !important;
}
.shopify-section[id*="cart-section"] [class*="cart-summary"] {
background: #fff !important;
border: 1px solid rgba(34,36,50,0.10) !important;
border-radius: 6px !important;
padding: clamp(28px, 4vw, 44px) !important;
}
.shopify-section[id*="cart-section"] [class*="cart-summary"] h2,
.shopify-section[id*="cart-section"] [class*="cart-summary"] [class*="title"] {
font-family: 'Tiller', Georgia, serif !important;
color: #222432 !important;
}
.shopify-section[id*="cart-section"] .cart-summary__totals,
.shopify-section[id*="cart-section"] [class*="totals"] {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
color: #222432 !important;
}
/* Checkout button — locked Provis style */
.shopify-section[id*="cart-section"] [name="checkout"],
.shopify-section[id*="cart-section"] .cart__checkout-button,
.shopify-section[id*="cart-section"] button[type="submit"].button,
.shopify-section[id*="cart-section"] [class*="checkout"].button {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: #222432 !important;
color: #F8FAEF !important;
border: 1px solid #222432 !important;
border-radius: 1px !important;
padding: 18px 36px !important;
min-height: 56px !important;
width: 100% !important;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="cart-section"] [name="checkout"]:hover,
.shopify-section[id*="cart-section"] .cart__checkout-button:hover {
background: #B9A977 !important;
border-color: #B9A977 !important;
color: #222432 !important;
transform: translateY(-2px) !important;
}
/* Quantity steppers */
.shopify-section[id*="cart-section"] quantity-input,
.shopify-section[id*="cart-section"] [class*="quantity"] {
border: 1px solid rgba(34,36,50,0.18) !important;
border-radius: 1px !important;
}
/* ══════════════════════════════════════════════════════════
COLLECTION PAGE — Brand cohesion overrides
══════════════════════════════════════════════════════════ */
.shopify-section[id*="main-collection"],
.shopify-section[id*="main"] [class*="collection"] {
background: #F8FAEF !important;
}
/* Filter / sort toolbar */
.shopify-section[id*="main"] [class*="facets"],
.shopify-section[id*="main"] [class*="collection-filters"],
.shopify-section[id*="main"] [class*="filters__header"] {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
color: #222432 !important;
}
.shopify-section[id*="main"] [class*="facets"] button,
.shopify-section[id*="main"] [class*="facets"] label,
.shopify-section[id*="main"] [class*="filter"] button,
.shopify-section[id*="main"] [class*="sort"] button,
.shopify-section[id*="main"] [class*="sort"] select {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #222432 !important;
border: 1px solid rgba(34,36,50,0.18) !important;
border-radius: 1px !important;
padding: 12px 18px !important;
background: transparent !important;
transition: border-color 0.3s ease, background 0.3s ease !important;
}
.shopify-section[id*="main"] [class*="facets"] button:hover,
.shopify-section[id*="main"] [class*="filter"] button:hover {
border-color: #B9A977 !important;
}
/* Active filter */
.shopify-section[id*="main"] [class*="facets"] [aria-pressed="true"],
.shopify-section[id*="main"] [class*="facets"] [class*="active"] {
background: #222432 !important;
border-color: #222432 !important;
color: #F8FAEF !important;
}
/* Collection product cards — match coffee carousel aesthetic */
.shopify-section[id*="main"] [class*="product-card"],
.shopify-section[id*="main-collection"] [class*="product-card"] {
border: none !important;
border-radius: 6px !important;
overflow: hidden !important;
background: transparent !important;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease !important;
}
.shopify-section[id*="main"] [class*="product-card"]:hover,
.shopify-section[id*="main-collection"] [class*="product-card"]:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px rgba(34, 36, 50, 0.18) !important;
}
.shopify-section[id*="main"] [class*="product-card"] [class*="product-title"],
.shopify-section[id*="main"] [class*="product-card"] a[class*="title"],
.shopify-section[id*="main-collection"] [class*="product-card"] a {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
color: #222432 !important;
text-decoration: none !important;
}
.shopify-section[id*="main"] [class*="product-card"] [class*="price"],
.shopify-section[id*="main-collection"] [class*="product-card"] [class*="price"] {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 600 !important;
color: #B9A977 !important;
}
/* Collection title (the implicit one Shopify renders if you don't suppress it) */
.shopify-section[id*="main-collection"] h1,
.shopify-section[id*="main-collection"] [class*="collection-hero__title"] {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
color: #222432 !important;
}
/* ══════════════════════════════════════════════════════════
404 PAGE + PRODUCT-LIST (used on cart/404) — cohesion
══════════════════════════════════════════════════════════ */
/* Note: the padding/background was previously on the outer wrapper which
leaked cream above the dark hero. Move both to apply inside the inner
.pv-404 (which already paints its own background) so the dark hero
reaches the header edge. */
.shopify-section[id*="main-404"],
.shopify-section[id*="404"] {
background: transparent !important;
padding: 0 !important;
text-align: center !important;
}
.shopify-section[id*="main-404"] h1,
.shopify-section[id*="404"] h1 {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: clamp(2.4rem, 5vw, 4rem) !important;
line-height: 1.1 !important;
color: #222432 !important;
}
.shopify-section[id*="main-404"] p,
.shopify-section[id*="404"] p {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 1.05rem !important;
color: rgba(34,36,50,0.72) !important;
margin: 16px 0 32px !important;
}
.shopify-section[id*="main-404"] .button,
.shopify-section[id*="main-404"] a.button,
.shopify-section[id*="404"] .button {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: #222432 !important;
color: #F8FAEF !important;
border: 1px solid #222432 !important;
border-radius: 1px !important;
padding: 18px 36px !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="main-404"] .button:hover {
background: #B9A977 !important;
border-color: #B9A977 !important;
color: #222432 !important;
transform: translateY(-2px) !important;
}
/* product-list section (cart upsell + 404 upsell) */
.shopify-section[id*="product_list"],
.shopify-section[id*="product-list"] {
background: #F8FAEF !important;
padding: clamp(64px, 9vh, 96px) 0 !important;
}
.shopify-section[id*="product_list"] h3,
.shopify-section[id*="product-list"] h3,
.shopify-section[id*="product_list"] [class*="product-list-text"] h3 {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
color: #222432 !important;
}
.shopify-section[id*="product_list"] [class*="product-list-button"] a,
.shopify-section[id*="product_list"] a[class*="link"] {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #B9A977 !important;
text-decoration: none !important;
border-bottom: 1px solid #B9A977 !important;
padding-bottom: 4px !important;
transition: color 0.3s ease, border-color 0.3s ease !important;
}
.shopify-section[id*="product_list"] [class*="product-list-button"] a:hover {
color: #222432 !important;
border-color: #222432 !important;
}
/* ══════════════════════════════════════════════════════════
AESTHETIC BATCH A — FOUNDATION
1. Header polish
2. Footer build
3. Section edge transitions (hairlines + ombre bleeds)
4. Photo grade pass
══════════════════════════════════════════════════════════ */
/* ─── 1. HEADER ──────────────────────────────────────────── */
/* Make navy the default header background; cream when transparent over hero */
#header-component .header,
header.header,
.header {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
background: rgba(34,36,50,0.92) !important;
backdrop-filter: blur(14px) saturate(140%) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%) !important;
border-bottom: 1px solid rgba(248,250,239,0.08) !important;
transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease !important;
}
/* Transparent header over hero */
.header[data-transparent="always"]:not([data-stuck="true"]) {
background: linear-gradient(180deg, rgba(34,36,50,0.55) 0%, rgba(34,36,50,0) 100%) !important;
border-bottom-color: transparent !important;
backdrop-filter: none !important;
}
/* Header logo / wordmark */
.header__logo a,
.header__logo,
[class*="header-logo"] a,
[class*="header__logo"] img {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: #F8FAEF !important;
text-decoration: none !important;
}
/* Nav menu links */
.header__menu a,
.header-menu a,
.header__navigation-bar-row a,
.header-row a:not([class*="logo"]):not([class*="cart"]):not([class*="search"]),
[class*="header-menu"] a {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #F8FAEF !important;
text-decoration: none !important;
position: relative !important;
padding: 8px 4px !important;
transition: color 0.3s ease !important;
}
/* Animated underline on nav links */
.header__menu a::after,
.header-menu a::after,
[class*="header-menu"] a::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: 2px;
height: 1px;
background: #B9A977;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__menu a:hover::after,
.header-menu a:hover::after,
[class*="header-menu"] a:hover::after {
transform: scaleX(1);
}
.header__menu a:hover,
.header-menu a:hover,
[class*="header-menu"] a:hover {
color: #B9A977 !important;
}
/* Cart count pill */
.header-actions [class*="cart"],
.header-actions__action[href*="cart"] {
position: relative !important;
}
.header-actions [class*="cart-count"],
[class*="header-actions"] [class*="count"] {
background: #B9A977 !important;
color: #222432 !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-weight: 700 !important;
font-size: 10px !important;
border-radius: 999px !important;
padding: 2px 7px !important;
min-width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Header icons (search, cart, account)
Use currentColor so icons inherit from the link/button color, which the
header swaps between cream (transparent/hero state) and navy (scrolled
state). Hardcoding cream here made icons invisible on white scrolled
state. Hover stays gold. */
.header-actions svg,
.header-actions__action svg,
[class*="header-actions"] svg {
stroke: currentColor !important;
fill: none !important;
transition: stroke 0.3s ease, color 0.3s ease !important;
}
.header-actions a,
.header-actions button,
.header-actions__action {
color: #F8FAEF;
transition: color 0.3s ease;
}
header-component[data-sticky-state='active'] .header-actions a,
header-component[data-sticky-state='active'] .header-actions button,
header-component[data-sticky-state='active'] .header-actions__action,
header-component:not([transparent='not-sticky']) .header-actions a,
header-component:not([transparent='not-sticky']) .header-actions button,
header-component:not([transparent='not-sticky']) .header-actions__action {
color: #222432;
}
.header-actions a:hover,
.header-actions button:hover,
.header-actions__action:hover,
.header-actions a:hover svg,
.header-actions__action:hover svg {
color: #B9A977 !important;
stroke: #B9A977 !important;
}
/* ─── 2a. CART DRAWER — LIGHT & AIRY ──────────────────────
Clean white drawer, navy text, gold accents.
Feels like the Shopify checkout: white, spacious, calm.
──────────────────────────────────────────────────────── */
.cart-drawer__dialog,
.cart-drawer-component dialog,
dialog.cart-drawer__dialog {
background: #FFFFFF !important;
color: #222432 !important;
border: 0 !important;
border-left: 1px solid rgba(34, 36, 50, 0.08) !important;
max-width: 480px !important;
width: 92vw !important;
padding: 0 !important;
box-shadow: -8px 0 40px rgba(34, 36, 50, 0.10) !important;
}
.cart-drawer__dialog::backdrop {
background: rgba(34, 36, 50, 0.28) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
.cart-drawer__inner {
background: #FFFFFF !important;
color: #222432 !important;
padding: 0 !important;
}
.cart-drawer__header {
background: #FFFFFF !important;
color: #222432 !important;
border-bottom: 1px solid rgba(34, 36, 50, 0.08) !important;
padding: 24px 28px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.cart-drawer__heading,
.cart-drawer__heading--empty {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700 !important;
font-size: 1.6rem !important;
letter-spacing: -0.005em !important;
color: #222432 !important;
margin: 0 !important;
}
.cart-drawer__close-button {
background: transparent !important;
border: 1px solid rgba(34, 36, 50, 0.12) !important;
border-radius: 50% !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
color: #B9A977 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}
.cart-drawer__close-button:hover {
background: rgba(185, 169, 119, 0.10) !important;
border-color: #B9A977 !important;
color: #B9A977 !important;
transform: scale(1.05) !important;
}
.cart-drawer__close-button:active {
transform: scale(0.95) !important;
}
.cart-drawer__close-button svg { stroke: currentColor !important; fill: none !important; width: 18px !important; height: 18px !important; }
.cart-drawer__content,
.cart-drawer__items,
.cart-drawer__summary {
background: #FFFFFF !important;
color: #222432 !important;
}
.cart-drawer__items {
padding: 8px 28px !important;
}
.cart-drawer__items [class*="cart-product"],
.cart-drawer__items [class*="line-item"] {
border-bottom: 1px solid rgba(34, 36, 50, 0.08) !important;
padding-block: 18px !important;
}
.cart-drawer__items [class*="cart-product"]:last-child {
border-bottom: 0 !important;
}
.cart-drawer__items img,
.cart-drawer__items [class*="cart-product__image"] img {
border-radius: 3px !important;
border: 1px solid rgba(34, 36, 50, 0.06) !important;
}
.cart-drawer__items [class*="product-title"],
.cart-drawer__items [class*="cart-product__title"] {
font-family: 'Tiller', Georgia, serif !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #222432 !important;
}
.cart-drawer__items [class*="price"],
.cart-drawer__items [class*="cart-product__price"] {
color: #222432 !important;
font-family: 'Tiller', Georgia, serif !important;
font-weight: 600 !important;
}
.cart-drawer__items [class*="quantity-selector"] button,
.cart-drawer__items [class*="quantity"] button {
background: transparent !important;
border: 1px solid rgba(34, 36, 50, 0.15) !important;
color: #222432 !important;
border-radius: 2px !important;
}
.cart-drawer__items [class*="quantity-selector"] button:hover,
.cart-drawer__items [class*="quantity"] button:hover {
background: rgba(185, 169, 119, 0.10) !important;
border-color: #B9A977 !important;
}
.cart-drawer__items [class*="quantity-selector"] input,
.cart-drawer__items [class*="quantity"] input {
background: transparent !important;
color: #222432 !important;
border-color: rgba(34, 36, 50, 0.15) !important;
}
.cart-drawer__items [class*="remove"] {
color: rgba(34, 36, 50, 0.45) !important;
transition: color 0.25s ease !important;
}
.cart-drawer__items [class*="remove"]:hover {
color: #B9A977 !important;
}
/* Cart drawer item titles — link color */
.cart-drawer__items a {
color: #222432 !important;
text-decoration: none !important;
}
.cart-drawer__items a:hover {
color: #B9A977 !important;
}
/* Cart drawer variant/property text */
.cart-drawer__items [class*="variant"],
.cart-drawer__items [class*="property"],
.cart-drawer__items dd {
color: rgba(34, 36, 50, 0.60) !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 0.82rem !important;
}
.cart-drawer__summary {
padding: 24px 28px 28px !important;
border-top: 1px solid rgba(34, 36, 50, 0.08) !important;
background: #FAFBF7 !important;
}
.cart-drawer__summary [class*="subtotal"],
.cart-drawer__summary [class*="total"] {
font-family: 'Tiller', Georgia, serif !important;
color: #222432 !important;
}
.cart-drawer__summary [class*="subtotal"] [class*="price"],
.cart-drawer__summary [class*="total"] [class*="price"] {
color: #222432 !important;
font-weight: 700 !important;
}
/* Tax/shipping note */
.cart-drawer__summary [class*="tax"],
.cart-drawer__summary small {
color: rgba(34, 36, 50, 0.55) !important;
font-family: 'DM Sans', sans-serif !important;
}
/* Continue Shopping link in drawer */
.cart-drawer__summary a[href*="collection"],
.cart-drawer a[href*="shop"],
.cart-drawer [class*="continue-shopping"],
.cart-drawer__content a:not([name="checkout"]) {
color: #B9A977 !important;
font-family: 'DM Sans', sans-serif !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.cart-drawer__summary button[type="submit"],
.cart-drawer__summary [name="checkout"],
.cart-drawer__summary [class*="checkout-button"] {
background: #222432 !important;
color: #F8FAEF !important;
border: 0 !important;
border-radius: 2px !important;
padding: 18px 32px !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
width: 100% !important;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important;
}
.cart-drawer__summary button[type="submit"]:hover,
.cart-drawer__summary [name="checkout"]:hover {
background: #B9A977 !important;
color: #222432 !important;
box-shadow: 0 8px 24px rgba(34, 36, 50, 0.15) !important;
transform: translateY(-1px) !important;
}
/* Empty state */
.cart-drawer--empty .cart-drawer__heading--empty {
color: #222432 !important;
text-align: center;
}
.cart-drawer--empty .cart-drawer__content {
text-align: center;
padding: 40px 28px !important;
color: rgba(34, 36, 50, 0.65) !important;
}
/* Cart bubble in drawer heading */
.cart-drawer__heading .cart-bubble__background {
background-color: rgba(34, 36, 50, 0.08) !important;
}
.cart-drawer__heading .cart-bubble__text {
color: #222432 !important;
}
/* Border colors inside drawer */
.cart-drawer__dialog [class*="border"],
.cart-drawer__dialog .cart__summary-totals {
border-color: rgba(34, 36, 50, 0.08) !important;
}
/* Free shipping progress bar inside the drawer */
.pv-cart-drawer-ship {
padding: 20px 28px 16px;
background: #F8FAEF;
border-bottom: 1px solid rgba(34, 36, 50, 0.06);
}
.pv-cart-drawer-ship__msg {
font-family: 'Tiller', Georgia, serif;
font-size: 0.95rem;
color: #222432;
margin: 0 0 12px;
text-align: center;
}
.pv-cart-drawer-ship__msg strong {
color: #B9A977;
font-weight: 700;
}
.pv-cart-drawer-ship__bar {
position: relative;
height: 5px;
background: rgba(185, 169, 119, 0.15);
border-radius: 999px;
overflow: hidden;
}
.pv-cart-drawer-ship__bar-fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(90deg, #B9A977 0%, #d4c08a 100%);
border-radius: 999px;
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: none;
}
.pv-cart-drawer-ship__bar-fill.is-full {
background: linear-gradient(90deg, #B9A977 0%, #d4c08a 50%, #B9A977 100%);
background-size: 200% 100%;
animation: pv-drawer-ship-shimmer 3s ease-in-out infinite;
}
@keyframes pv-drawer-ship-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ─── 2. FOOTER ──────────────────────────────────────────── */
/* Footer-group is a single visual block. Each shopify-section inside
it should NOT have its own background+padding+border or you get
stacked horizontal lines and triple-padding between blocks. */
.shopify-section-group-footer-group {
background: #0d0f18 !important;
color: #F8FAEF !important;
position: relative !important;
padding: clamp(64px, 8vh, 110px) 0 clamp(28px, 4vh, 48px) !important;
}
/* Force EVERY descendant of the footer (ANY footer on ANY template,
including /a/subscriptions and other account layouts that don't use
.shopify-section-group-footer-group) to the dark blue. Horizon has
multiple nested elements with their own color-scheme backgrounds
(.section-background, .section, .footer-content, .footer-utilities,
.footer-bottom, etc.) — one blanket rule is safer than chasing each
specific selector. Form elements are excluded so newsletter input +
submit button still render correctly. Also remove any border/shadow
on the footer group so there's no visible "break" anywhere. */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group *:not(input):not(textarea):not(button):not(select):not([class*="submit"]):not([class*="primary-button"]),
footer.shopify-section,
footer.shopify-section *:not(input):not(textarea):not(button):not(select):not([class*="submit"]):not([class*="primary-button"]),
.shopify-section[id*="footer"],
.shopify-section[id*="footer"] *:not(input):not(textarea):not(button):not(select):not([class*="submit"]):not([class*="primary-button"]),
.shopify-section-group-footer-group > footer,
.shopify-section-group-footer-group > footer * {
background-color: #0d0f18 !important;
box-shadow: none !important;
}
.shopify-section-group-footer-group,
.shopify-section-group-footer-group > *,
footer.shopify-section,
.shopify-section[id*="footer"] {
border-top: none !important;
border-bottom: none !important;
}
/* Global body background fallback — ensures any gap between content
and the footer (or any wrapper Shopify inserts on customer account
pages like /a/subscriptions) shows the same dark blue instead of a
default lighter shade. Content sections have their own backgrounds
so this only shows where nothing else paints. */
html, body {
background-color: #0d0f18 !important;
}
/* Customer account pages (/a/subscriptions, /account, etc.) — force any
wrapper div that Shopify injects below the main content area to the
dark blue so there's no visible transition band.
NOTE: removed `main + *` selectors — they were matching .pv-mobile-nav
(which is a sibling of main in theme.liquid) and turning it from
#222432 navy to #0d0f18 dark blue. */
.customer-account,
.shopify-account,
[class*="customer"][class*="subscription"],
body > footer,
body > .shopify-section-group-footer-group {
background-color: #0d0f18 !important;
}
.shopify-section-group-footer-group .shopify-section[id*="footer"] {
background: transparent !important;
border: 0 !important;
padding-block: 0 !important;
position: relative;
}
.shopify-section-group-footer-group .shopify-section[id*="footer"] .section {
background: transparent !important;
border: 0 !important;
padding-block-start: clamp(20px, 2.6vh, 36px) !important;
padding-block-end: clamp(20px, 2.6vh, 36px) !important;
}
/* Single subtle gold rule at the very top of the footer-group */
.shopify-section-group-footer-group::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(185,169,119,0.55) 50%, transparent 100%);
pointer-events: none;
}
/* Kill any per-section ::before pseudo-lines */
.shopify-section-group-footer-group .shopify-section[id*="footer"]::before,
.shopify-section-group-footer-group .shopify-section[id*="footer"] .section::before {
content: none !important;
display: none !important;
}
/* Grain overlay on footer */
.shopify-section[id*="footer"]::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Footer content layered above grain */
.shopify-section[id*="footer"] > * { position: relative; z-index: 1; }
/* Footer headings */
.shopify-section[id*="footer"] h2,
.shopify-section[id*="footer"] h3,
.shopify-section[id*="footer"] h4,
.shopify-section[id*="footer"] [class*="footer__title"],
.shopify-section[id*="footer"] [class*="footer-block__heading"] {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: #B9A977 !important;
margin-bottom: 20px !important;
}
/* Footer body text */
.shopify-section[id*="footer"] p,
.shopify-section[id*="footer"] li,
.shopify-section[id*="footer"] address {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 0.92rem !important;
line-height: 1.75 !important;
color: rgba(248,250,239,0.72) !important;
}
/* Footer links */
.shopify-section[id*="footer"] a {
color: rgba(248,250,239,0.82) !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
}
.shopify-section[id*="footer"] a:hover {
color: #B9A977 !important;
}
/* Footer logo / brand mark */
.shopify-section[id*="footer"] [class*="logo"] img,
.shopify-section[id*="footer"] .logo {
filter: brightness(0) invert(0.94) !important;
max-width: 220px !important;
}
/* Newsletter form in footer */
.shopify-section[id*="footer"] form input[type="email"] {
background: transparent !important;
border: 1px solid rgba(248,250,239,0.20) !important;
border-radius: 1px !important;
padding: 14px 18px !important;
color: #F8FAEF !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 0.92rem !important;
}
.shopify-section[id*="footer"] form input[type="email"]::placeholder {
color: rgba(248,250,239,0.45) !important;
}
.shopify-section[id*="footer"] form button[type="submit"],
.shopify-section[id*="footer"] form .button {
background: #B9A977 !important;
color: #222432 !important;
border: 1px solid #B9A977 !important;
border-radius: 1px !important;
padding: 14px 28px !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
transition: background 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="footer"] form button[type="submit"]:hover {
background: #c9b886 !important;
transform: translateY(-2px) !important;
}
/* Social icons in footer — oval border removed per request */
.shopify-section[id*="footer"] [class*="social"] a,
.shopify-section[id*="footer"] [class*="social-icons"] a {
width: 38px !important;
height: 38px !important;
border: none !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 12px !important;
transition: color 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="footer"] [class*="social"] a:hover {
color: #B9A977 !important;
transform: translateY(-2px) !important;
}
/* Bottom copyright row — border-top removed to eliminate the visible
"lighter break" in the footer. Spacing now relies on padding-top only. */
.shopify-section[id*="footer"] [class*="copyright"],
.shopify-section[id*="footer"] [class*="footer__bottom"],
.shopify-section[id*="footer"] [class*="footer-utilities"] {
border-top: none !important;
margin-top: clamp(40px, 6vh, 64px) !important;
padding-top: clamp(24px, 4vh, 40px) !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em !important;
color: rgba(248,250,239,0.50) !important;
}
.shopify-section[id*="footer"] [class*="payment"] svg,
.shopify-section[id*="footer"] [class*="payment-icons"] svg {
filter: grayscale(1) brightness(2) opacity(0.55) !important;
height: 22px !important;
margin-right: 6px !important;
}
/* ─── 3. SECTION EDGE TRANSITIONS ────────────────────────── */
/* Add a 1px gold hairline between every section group on the home/page templates,
and a soft 60px ombre bleed at the top of each section so contrasting cream/navy
transitions feel intentional, not stacked. */
.shopify-section + .shopify-section {
position: relative;
}
.shopify-section + .shopify-section::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: clamp(180px, 28vw, 320px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(185,169,119,0.55) 50%, transparent 100%);
z-index: 5;
pointer-events: none;
}
/* Suppress hairline between sections that share the same background (looks cleaner) */
.shopify-section[id*="header"] + .shopify-section::before,
.shopify-section + .shopify-section[id*="footer"]::before,
.shopify-section + .shopify-section[id*="header"]::before { display: none; }
/* ─── 4. PHOTOGRAPHY GRADE ───────────────────────────────── */
/* Apply a unified film grade to hero/editorial photos. EXCLUDES coffee
carousel card images (.pv-cc__card-img) so per-product tile colors
and bag mockups stay vibrant. */
.pv-img-hero__bg,
.pv-page-hero-bg,
.pv-ph-bg,
.pv-vc-img img,
.pv-sub__img img {
filter: saturate(0.92) contrast(1.05) brightness(0.97) sepia(0.04) !important;
}
/* Hero/full-bleed images get a slightly warmer push */
.pv-img-hero__bg,
.pv-page-hero-bg,
[class*="page-hero"] img,
[class*="hero"] picture img {
filter: saturate(0.88) contrast(1.06) brightness(0.96) sepia(0.06) !important;
}
/* ══════════════════════════════════════════════════════════
AESTHETIC BATCH B — EDITORIAL FLOURISHES
5. Pull quotes
6. Drop caps
7. Decorative section dividers
9. Numbered figures
13. Hairline rules
20. Editorial title clusters
══════════════════════════════════════════════════════════ */
/* Pull quote — apply with class .pv-pullquote on any blockquote or div */
.pv-pullquote {
font-family: 'Tiller', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.35;
color: #222432;
text-align: center;
max-width: 720px;
margin: clamp(48px, 7vh, 96px) auto;
padding: 0 clamp(24px, 4vw, 56px);
position: relative;
}
.pv-pullquote::before,
.pv-pullquote::after {
content: '';
display: block;
width: 48px;
height: 1px;
background: #B9A977;
margin: 0 auto 24px;
}
.pv-pullquote::after {
margin: 24px auto 0;
}
.pv-pullquote cite {
display: block;
font-family: var(--provis-body-font, 'DM Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B9A977;
font-style: normal;
margin-top: 20px;
}
/* Drop caps — first letter on long-form .pv-editorial paragraphs */
.pv-editorial > p:first-of-type::first-letter,
[class*="provis-brand-story"] .pv-bs-body > p:first-of-type::first-letter,
[class*="provis-split-story"] [class*="body"] > p:first-of-type::first-letter,
[class*="provis-margin-note"] [class*="body"] > p:first-of-type::first-letter {
font-family: 'Tiller', Georgia, serif;
font-weight: 700;
font-size: 3.6em;
line-height: 1;
float: left;
margin: 0.12em 0.12em -0.05em 0;
padding: 0;
color: #B9A977;
-webkit-initial-letter: 3;
initial-letter: 3;
}
/* Decorative section ornaments — small centered marks between sections.
Apply with in liquid templates. */
.pv-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: clamp(48px, 7vh, 80px) auto;
max-width: 280px;
}
.pv-ornament::before,
.pv-ornament::after {
content: '';
flex: 1;
height: 1px;
background: rgba(185,169,119,0.45);
}
.pv-ornament::before { background: linear-gradient(90deg, transparent, rgba(185,169,119,0.55)); }
.pv-ornament::after { background: linear-gradient(90deg, rgba(185,169,119,0.55), transparent); }
.pv-ornament__mark {
width: 12px;
height: 12px;
border: 1px solid #B9A977;
transform: rotate(45deg);
flex-shrink: 0;
}
/* Numbered figure caption */
.pv-figure {
display: block;
margin: 0;
}
.pv-figure img {
display: block;
width: 100%;
height: auto;
}
.pv-figure figcaption {
font-family: 'Tiller', Georgia, serif;
font-style: italic;
font-size: 0.82rem;
color: rgba(34,36,50,0.62);
margin-top: 14px;
text-align: center;
letter-spacing: 0.02em;
}
.pv-figure figcaption::before {
content: 'Fig. ' attr(data-figure-num) ' — ';
font-style: normal;
font-weight: 600;
color: #B9A977;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
margin-right: 4px;
}
/* Editorial hairline rules — 1px gold hairline above any heading with .pv-rule-above */
.pv-rule-above {
position: relative;
padding-top: 28px;
}
.pv-rule-above::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 1px;
background: #B9A977;
}
/* Editorial title cluster — for any heading wrapped in .pv-title-cluster */
.pv-title-cluster {
text-align: center;
margin-bottom: clamp(40px, 6vh, 64px);
}
.pv-title-cluster .eyebrow {
display: inline-block;
font-family: var(--provis-body-font, 'DM Sans', sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B9A977;
margin-bottom: 18px;
}
.pv-title-cluster .rule {
display: block;
width: 64px;
height: 1px;
background: #B9A977;
margin: 0 auto 24px;
opacity: 0.7;
}
.pv-title-cluster h1,
.pv-title-cluster h2 {
font-family: 'Tiller', Georgia, serif !important;
font-weight: 700;
font-size: clamp(2.4rem, 4.4vw, 3.8rem);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 18px;
color: #222432;
}
.pv-title-cluster .subtitle {
font-family: var(--provis-body-font, 'DM Sans', sans-serif);
font-size: 1.05rem;
line-height: 1.75;
color: rgba(34,36,50,0.72);
max-width: 580px;
margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════
AESTHETIC BATCH C — TEXTURE AND DEPTH
10. Grain overlay everywhere
11. Paper texture on cream
12. Gradient navy
19. Gold variation
══════════════════════════════════════════════════════════ */
/* Custom props for the gold family */
:root {
--provis-gold-deep: #a89664;
--provis-gold: #B9A977;
--provis-gold-soft: #d4c79a;
--provis-navy-deep: #1c1e2a;
--provis-navy: #222432;
--provis-navy-up: #2d2f44;
}
/* Grain overlay — subtle, applied via ::after on any section that opts in
via .pv-grain class, plus auto-applied to all provis sections */
section[class*="provis-"]::after,
.pv-grain::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
section[class*="provis-"] {
position: relative;
}
/* Push real content above grain layer */
section[class*="provis-"] > *:not(::after) {
position: relative;
z-index: 1;
}
/* Paper texture on cream — subtle linen weave SVG */
section[class*="provis-"][style*="F8FAEF"],
[class*="bg-cream"],
[style*="background:#F8FAEF"],
[style*="background: #F8FAEF"] {
background-image: url("data:image/svg+xml;utf8,"), #F8FAEF !important;
}
/* Gradient navy on dark sections */
[style*="background:#222432"],
[style*="background: #222432"],
[style*="background-color:#222432"],
[style*="background-color: #222432"] {
background: linear-gradient(180deg, #2a2c40 0%, #222432 50%, #1c1e2a 100%) !important;
}
/* Gold variation — used for ornaments, button hovers, badge backgrounds */
.pv-gold-grad-bg {
background: linear-gradient(135deg, var(--provis-gold-soft) 0%, var(--provis-gold) 50%, var(--provis-gold-deep) 100%);
}
/* ══════════════════════════════════════════════════════════
AESTHETIC BATCH D — MOTION POLISH
15. Page-load curtain
17. Magnetic hover hint on primary buttons
18. Image clip-path reveal
══════════════════════════════════════════════════════════ */
/* Page-load curtain — navy panel rises from bottom on first paint */
@keyframes pvCurtainRise {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
body::before {
content: '';
position: fixed;
inset: 0;
background: #1c1e2a;
z-index: 9998;
pointer-events: none;
animation: pvCurtainRise 1.4s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards;
}
@media (prefers-reduced-motion: reduce) {
body::before { display: none; }
}
/* Hide curtain on subsequent navigation (only first paint) */
body.pv-loaded::before { display: none; }
/* Magnetic-hint scale on primary buttons (subtle, no JS needed for the hint) */
.pv-btn-gold,
.pv-cta-buttons a,
.pv-sub__btn,
.ct-submit,
.pv-sub-tier-btn {
will-change: transform;
}
/* Image clip-path reveal — applied via [data-pv-reveal="clip-up"] */
[data-pv-reveal="clip-up"] {
clip-path: inset(100% 0 0 0);
transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
[data-pv-reveal="clip-up"].pv-visible {
clip-path: inset(0 0 0 0);
}
/* Smooth fade for everything that opts in */
[data-pv-reveal="fade-up"] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
[data-pv-reveal="fade-up"].pv-visible {
opacity: 1;
transform: translateY(0);
}
[data-pv-reveal="fade-up"][data-pv-delay="1"].pv-visible { transition-delay: 0.10s; }
[data-pv-reveal="fade-up"][data-pv-delay="2"].pv-visible { transition-delay: 0.20s; }
[data-pv-reveal="fade-up"][data-pv-delay="3"].pv-visible { transition-delay: 0.30s; }
[data-pv-reveal="fade-up"][data-pv-delay="4"].pv-visible { transition-delay: 0.40s; }
[data-pv-reveal="fade-up"][data-pv-delay="5"].pv-visible { transition-delay: 0.50s; }
/* ══════════════════════════════════════════════════════════
GLOBAL TIGHTEN PASS — Reduce vertical rhythm site-wide
Sections were clamp(80px, 11vh, 140px). Tightened ~30%.
══════════════════════════════════════════════════════════ */
/* v2026-04-08c design audit bump forcecachebust — Target the INNER Provis blocks only — never
the outer .shopify-section wrapper (which inherits the page background
and would otherwise leak cream above full-bleed dark heroes). */
section[class*="provis-"]:not(.shopify-section):not([class*="image-hero"]):not([class*="provis-hero"]):not([class*="page-hero"]):not([class*="freshness"]) {
padding-top: clamp(56px, 7.5vh, 96px) !important;
padding-bottom: clamp(56px, 7.5vh, 96px) !important;
}
/* And explicitly flatten the wrapper so no stray vertical padding bleeds
through between the header and a full-bleed dark hero. */
.shopify-section[class*="provis-"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Carousel inner padding too */
.pv-cc {
padding: clamp(56px, 7.5vh, 96px) 0 !important;
}
/* Subscribe-cta two-column padding */
.pv-sub__content {
padding: clamp(56px, 7vh, 88px) clamp(40px, 6vw, 80px) !important;
}
/* CTA banner inner */
[class*="pv-cta-banner"] [class*="pv-cta-inner"] {
padding: clamp(64px, 9vh, 100px) clamp(24px, 5vw, 48px) !important;
}
/* Trust strip — keep slim */
[class*="pv-freshness"] {
padding: clamp(48px, 6vh, 76px) 24px !important;
}
/* Visit cafe */
.pv-vc-{{ section.id }},
[class*="pv-vc-"] {
padding: clamp(64px, 8vh, 100px) clamp(24px, 4vw, 56px) !important;
}
/* Why provis split-story */
[class*="provis-split-story"] {
padding: clamp(64px, 8vh, 100px) 0 !important;
}
/* ══════════════════════════════════════════════════════════
DYNAMIC SCROLL — gentle scroll-snap on the home page so each
section locks into view as you scroll. Uses proximity (not
mandatory) so scrolling never fights the user.
══════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
html { scroll-snap-type: y proximity; }
body > main > section,
#MainContent > section,
.shopify-section[id*="image_hero"],
.shopify-section[id*="trust_strip"],
.shopify-section[id*="coffee_lineup"],
.shopify-section[id*="why_provis"],
.shopify-section[id*="reserve_spotlight"],
.shopify-section[id*="subscribe_save"],
.shopify-section[id*="visit_cafe"],
.shopify-section[id*="hero_video"] {
scroll-snap-align: start;
scroll-snap-stop: normal;
}
}
/* ══════════════════════════════════════════════════════════
FOOTER TIGHTEN — Override the heavy padding from Batch A.
The footer is composed of 3 sections; only the first should
carry generous top padding, the rest tight, and the bottom
sits flush.
══════════════════════════════════════════════════════════ */
.shopify-section-group-footer-group,
.shopify-section[id*="footer"] {
padding: 0 !important;
background: #1c1e2a !important;
}
/* The first footer section (newsletter) gets the gentle top padding */
.shopify-section-group-footer-group > .shopify-section:first-child,
.shopify-section[id*="footer"]:first-of-type {
padding-top: clamp(48px, 6vh, 80px) !important;
padding-bottom: clamp(20px, 3vh, 32px) !important;
}
/* Middle footer sections — tight */
.shopify-section-group-footer-group > .shopify-section:not(:first-child):not(:last-child),
.shopify-section[id*="footer"]:not(:first-of-type):not(:last-of-type) {
padding: clamp(20px, 3vh, 32px) 0 !important;
}
/* Last footer section (utilities/copyright) — slim bottom */
.shopify-section-group-footer-group > .shopify-section:last-child,
.shopify-section[id*="footer"]:last-of-type {
padding-top: clamp(20px, 3vh, 32px) !important;
padding-bottom: clamp(24px, 3.5vh, 40px) !important;
}
/* Newsletter signup container — kill the bloat. The email-signup
block in Horizon has its own internal padding wrapper that we need
to neutralize. */
.shopify-section[id*="footer"] [class*="email-signup"],
.shopify-section[id*="footer"] email-signup,
.shopify-section[id*="footer"] form[class*="email"] {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
}
.shopify-section[id*="footer"] [class*="email-signup__input-wrapper"],
.shopify-section[id*="footer"] [class*="email-signup__field"],
.shopify-section[id*="footer"] [class*="newsletter__form"] {
background: transparent !important;
border: 1px solid rgba(248,250,239,0.20) !important;
border-radius: 999px !important;
padding: 4px 4px 4px 24px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
max-width: 520px !important;
height: 56px !important;
}
.shopify-section[id*="footer"] [class*="email-signup__input-wrapper"] input[type="email"],
.shopify-section[id*="footer"] [class*="newsletter__form"] input[type="email"] {
border: none !important;
background: transparent !important;
flex: 1 !important;
height: 100% !important;
padding: 0 !important;
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
color: #F8FAEF !important;
outline: none !important;
}
.shopify-section[id*="footer"] [class*="email-signup__input-wrapper"] button,
.shopify-section[id*="footer"] [class*="newsletter__form"] button {
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
border: none !important;
background: #B9A977 !important;
color: #222432 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
cursor: pointer !important;
transition: background 0.3s ease, transform 0.3s ease !important;
}
.shopify-section[id*="footer"] [class*="email-signup__input-wrapper"] button:hover {
background: #c9b886 !important;
transform: translateY(-1px) !important;
}
/* Group containing the heading + body copy left of the input — tighten */
.shopify-section[id*="footer"] [class*="group"] h2,
.shopify-section[id*="footer"] [class*="group"] h3 {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: #B9A977 !important;
margin: 0 0 12px !important;
}
.shopify-section[id*="footer"] [class*="group"] p {
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: rgba(248,250,239,0.78) !important;
margin: 0 !important;
max-width: 480px !important;
}
/* Footer link columns — tighten the row of menus */
.shopify-section[id*="footer_links"],
.shopify-section[id*="footer-links"] {
padding: clamp(32px, 5vh, 56px) 0 !important;
}
.shopify-section[id*="footer_links"] [class*="menu"] h2,
.shopify-section[id*="footer_links"] [class*="menu"] h6 {
font-family: var(--provis-body-font, 'DM Sans', sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
color: #B9A977 !important;
margin-bottom: 16px !important;
}
/* Reduce gaps between the 3 footer sections too — they sit on the same dark bg */
.shopify-section[id*="footer"] + .shopify-section[id*="footer"]::before {
display: none !important;
}
/* ══════════════════════════════════════════════════════════
GLOBAL TYPE + BUTTON SCALE DOWN
Reduce overall sizing ~18% — text and buttons were oversized.
══════════════════════════════════════════════════════════ */
/* Display headings (hero, page titles) */
.pv-img-hero__display {
font-size: clamp(2.0rem, 4.6vw, 4.0rem) !important;
}
.pv-img-hero__tagline {
font-size: clamp(0.92rem, 1.2vw, 1.15rem) !important;
}
.pv-img-hero__logo {
width: clamp(100px, 12vw, 200px) !important;
}
/* Section H2 headings (carousels, page heroes, cta-banner, subscribe-cta, etc) */
.pv-cc__heading,
[class*="pv-page-hero"] h1,
[class*="pv-cta-banner"] h2,
[class*="pv-sub__title"],
[class*="pv-vc-h2"],
[class*="pv-ws-form"] h2,
[class*="pv-now"] h2,
.pv-title-cluster h1,
.pv-title-cluster h2 {
font-size: clamp(1.9rem, 3.4vw, 3.0rem) !important;
}
/* Carousel eyebrow + section eyebrows already at 11px — leave alone */
.pv-cc__eyebrow {
font-size: 11px !important;
letter-spacing: 0.32em !important;
}
/* Carousel description / body text */
.pv-cc__desc,
[class*="pv-page-hero"] p,
[class*="pv-cta-body"],
.pv-sub__body,
.pv-vc-body,
[class*="pv-ws-form-desc"] {
font-size: clamp(0.92rem, 1vw, 1.0rem) !important;
line-height: 1.65 !important;
}
/* Coffee card name + price */
.pv-cc__card-name {
font-size: 1.15rem !important;
}
.pv-cc__card-price {
font-size: 0.92rem !important;
}
.pv-cc__card-notes {
font-size: 0.82rem !important;
}
.pv-cc__card-origin {
font-size: 0.62rem !important;
}
.pv-cc__card-badge {
font-size: 0.6rem !important;
padding: 6px 12px !important;
}
/* All-tile shop-all */
.pv-cc__all-text {
font-size: 1.25rem !important;
}
.pv-cc__all-icon {
width: 40px !important;
height: 40px !important;
font-size: 17px !important;
margin-bottom: 16px !important;
}
.pv-cc__all-btn {
font-size: 0.7rem !important;
}
/* Carousel arrows */
.pv-cc__arrow {
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
}
/* ── BUTTONS — globally tighter ── */
.pv-btn-gold,
.pv-cta-buttons a,
.pv-sub__btn,
.ct-submit,
.pv-sub-tier-btn,
.pv-img-hero__btn,
.pv-ws-form-buttons a,
[class*="add-to-cart-button"],
button[name="add"],
.shopify-section[id*="cart-section"] [name="checkout"],
.shopify-section[id*="main-404"] .button {
font-size: 10px !important;
letter-spacing: 0.20em !important;
padding: 14px 28px !important;
min-height: 44px !important;
}
/* Hero buttons specifically */
.pv-img-hero__btn {
padding: 13px 26px !important;
font-size: clamp(10px, 0.9vw, 12px) !important;
}
/* Eyebrows — keep small but consistent */
[class*="eyebrow"]:not(.pv-cc__eyebrow) {
font-size: 10px !important;
letter-spacing: 0.30em !important;
}
.pv-img-hero__eyebrow-text {
font-size: 10px !important;
}
/* Hero coming-soon eyebrow rules a bit shorter */
.pv-img-hero__eyebrow-rule {
width: 28px !important;
}
/* ══════════════════════════════════════════════════════════
FINAL SIZING CONSOLIDATION
Bring native Shopify page overrides down to the same scale
as the rest of the site. Earlier batches left these at larger
sizes than the newer Provis section scale-down.
══════════════════════════════════════════════════════════ */
/* Native Shopify h1s (product page, cart, 404, collection) — match Provis scale */
.shopify-section[id*="main"] .product-title h1,
.shopify-section[id*="main"] .product-title,
.shopify-section[id*="main"] h1.product__title,
.shopify-section[id*="main"] h1,
.shopify-section[id*="cart-section"] .cart-page-title h1,
.shopify-section[id*="cart-section"] h1,
.shopify-section[id*="cart-section"] .cart__title,
.shopify-section[id*="main-404"] h1,
.shopify-section[id*="404"] h1,
.shopify-section[id*="main-collection"] h1,
.shopify-section[id*="main-collection"] [class*="collection-hero__title"] {
font-size: clamp(1.9rem, 3.4vw, 3.0rem) !important;
line-height: 1.06 !important;
}
/* Product price */
.shopify-section[id*="main"] .product-price,
.shopify-section[id*="main"] .price,
.shopify-section[id*="main"] [class*="price__regular"],
.shopify-section[id*="main"] .price-item--regular {
font-size: 1.25rem !important;
}
/* Variant picker buttons + labels */
.shopify-section[id*="main"] variant-picker .variant-picker__option-values label,
.shopify-section[id*="main"] .variant-picker__option-values label,
.shopify-section[id*="main"] .product-form__input label,
.shopify-section[id*="main"] [class*="variant-picker"] label {
font-size: 10px !important;
letter-spacing: 0.20em !important;
padding: 11px 18px !important;
}
/* All buttons site-wide — locked to 14px × 28px / 44px min-height */
.shopify-section[id*="main"] .add-to-cart-button,
.shopify-section[id*="main"] button[name="add"],
.shopify-section[id*="main"] .product-form__submit,
.shopify-section[id*="main"] .button.add-to-cart-button,
.shopify-section[id*="cart-section"] [name="checkout"],
.shopify-section[id*="cart-section"] .cart__checkout-button,
.shopify-section[id*="cart-section"] button[type="submit"].button,
.shopify-section[id*="cart-section"] [class*="checkout"].button,
.shopify-section[id*="main-404"] .button,
.shopify-section[id*="main-404"] a.button,
.shopify-section[id*="404"] .button {
font-size: 10px !important;
letter-spacing: 0.20em !important;
padding: 14px 28px !important;
min-height: 44px !important;
}
/* Native Shopify product card titles + prices on cart upsell, recs, collection */
.shopify-section[id*="recommendations"] [class*="product-card"] [class*="product-title"],
.shopify-section[id*="recommendations"] [class*="product-card"] a,
.shopify-section[id*="main"] [class*="product-card"] [class*="product-title"],
.shopify-section[id*="main"] [class*="product-card"] a[class*="title"],
.shopify-section[id*="main-collection"] [class*="product-card"] a,
.shopify-section[id*="cart-section"] .cart-product__title,
.shopify-section[id*="cart-section"] [class*="cart-product__title"],
.shopify-section[id*="cart-section"] .cart-product a {
font-size: 1.0rem !important;
}
.shopify-section[id*="recommendations"] [class*="product-card"] [class*="price"],
.shopify-section[id*="main"] [class*="product-card"] [class*="price"],
.shopify-section[id*="main-collection"] [class*="product-card"] [class*="price"],
.shopify-section[id*="cart-section"] .cart-product__price,
.shopify-section[id*="cart-section"] [class*="cart-product"] [class*="price"] {
font-size: 0.92rem !important;
}
/* Cart, collection, 404, product-list section padding — match Provis tighten */
.shopify-section[id*="cart-section"] {
padding: clamp(56px, 7.5vh, 96px) 0 !important;
}
.shopify-section[id*="main-404"],
.shopify-section[id*="404"] {
padding: 0 !important;
}
.shopify-section[id*="recommendations"] .product-recommendations,
.shopify-section[id*="recommendations"] product-recommendations,
.shopify-section[id*="product_list"],
.shopify-section[id*="product-list"] {
padding: clamp(56px, 7.5vh, 96px) 0 !important;
}
.shopify-section[id*="recommendations"] h3,
.shopify-section[id*="recommendations"] [class*="recommendations__heading"],
.shopify-section[id*="product_list"] h3 {
font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
}
/* Filter/sort buttons on collection */
.shopify-section[id*="main"] [class*="facets"] button,
.shopify-section[id*="main"] [class*="facets"] label,
.shopify-section[id*="main"] [class*="filter"] button,
.shopify-section[id*="main"] [class*="sort"] button,
.shopify-section[id*="main"] [class*="sort"] select {
font-size: 10px !important;
letter-spacing: 0.20em !important;
padding: 10px 16px !important;
}
/* Cart summary card */
.shopify-section[id*="cart-section"] [class*="cart-summary"] {
padding: clamp(24px, 3vw, 36px) !important;
}
/* Header nav links — also bring to 10px to match */
.header__menu a,
.header-menu a,
.header__navigation-bar-row a,
.header-row a:not([class*="logo"]):not([class*="cart"]):not([class*="search"]),
[class*="header-menu"] a {
font-size: 10px !important;
letter-spacing: 0.20em !important;
}
/* Footer eyebrow headings — already 11px, bring to 10 */
.shopify-section[id*="footer"] h2,
.shopify-section[id*="footer"] h3,
.shopify-section[id*="footer"] h4,
.shopify-section[id*="footer"] [class*="footer__title"],
.shopify-section[id*="footer"] [class*="footer-block__heading"] {
font-size: 10px !important;
letter-spacing: 0.30em !important;
}
.shopify-section[id*="footer"] form button[type="submit"],
.shopify-section[id*="footer"] form .button {
font-size: 10px !important;
letter-spacing: 0.20em !important;
padding: 12px 24px !important;
}
/* ══════════════════════════════════════════════════════════
AUDIT FIXES — Tier 1+2
══════════════════════════════════════════════════════════ */
/* Mobile: keep "Add to cart" text visible on small screens.
Horizon's default hides text below 749px, leaving icon-only.
Provis voice: text always wins. */
@media (max-width: 749px) {
.add-to-cart-text__content,
.sticky-add-to-cart__bar .add-to-cart-text__content {
display: inline !important;
}
}
/* Coffee carousel — make card price always visible (no hover required).
Position it above the bottom info gradient as a small Tiller serif tag. */
.pv-cc__card-price-static {
position: absolute;
top: 18px;
right: 18px;
z-index: 4;
font-family: 'Tiller', Georgia, serif;
font-weight: 700;
font-size: 0.85rem;
color: #F8FAEF;
background: rgba(34,36,50,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: 3px;
letter-spacing: 0.02em;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* If a flag exists (New / Best Seller), the flag stays top-right and the
price drops below it so they don't collide */
.pv-cc__card:has(.pv-cc__card-flag) .pv-cc__card-price-static {
top: 56px;
}
/* Hide the in-info-strip price duplicate when the static one renders */
.pv-cc__card:has(.pv-cc__card-price-static) .pv-cc__card-info .pv-cc__card-price {
display: none;
}
/* ══════════════════════════════════════════════════════════
POLISH PASS — 2026-04-06
Senior product designer pass. Additive only. Aim: elevate
from "polished" to "world class" within the locked structure.
══════════════════════════════════════════════════════════ */
/* ── 1. CINEMATIC HERO BOTTOM BLEED ─────────────────────────
The image-hero currently butts hard against the carousel
(cream). Add a soft, deliberate ombre at the bottom of the
hero so the transition into the carousel feels intentional
instead of stacked. */
.pv-img-hero::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 28%;
background: linear-gradient(
to bottom,
rgba(34,36,50,0) 0%,
rgba(34,36,50,0.25) 55%,
rgba(34,36,50,0.55) 100%
);
z-index: 1;
pointer-events: none;
}
/* ── 2. HERO SCROLL CUE — gentler, slower, more confident ─── */
.pv-img-hero__scroll {
gap: 12px !important;
}
.pv-img-hero__scroll-text {
opacity: 0.62;
transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}
.pv-img-hero:hover .pv-img-hero__scroll-text {
opacity: 0.95;
transform: translateY(-2px);
}
@keyframes pvBounceSoft {
0%, 100% { transform: rotate(45deg) translate(0, 0); }
50% { transform: rotate(45deg) translate(3px, 3px); }
}
.pv-img-hero__scroll-arrow {
animation: pvBounceSoft 3.2s var(--ease-out) infinite 2.8s !important;
}
/* ── 3. PRIMARY HERO BUTTON — softer lift + shadow on hover ─ */
.pv-img-hero__btn {
border-radius: 2px !important;
transition: background 0.4s var(--ease-out),
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
box-shadow 0.5s var(--ease-out),
transform 0.5s var(--ease-out) !important;
will-change: transform;
}
.pv-img-hero__btn--primary:hover {
box-shadow: 0 14px 38px rgba(185,169,119,0.32),
inset 0 0 0 1px rgba(185,169,119,0.95) !important;
transform: translateY(-2px);
}
.pv-img-hero__btn--secondary:hover {
box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
transform: translateY(-2px);
}
.pv-img-hero__btn:active {
transform: translateY(0) !important;
transition-duration: 0.12s !important;
}
/* ── 4. CAROUSEL CARDS — refined depth, easier easing, sharper
focus state, and a hairline gold border on hover so the card
feels like it's "lighting up" rather than just rising. ─── */
/* ── Carousel card hover overrides REMOVED ──
The new gallery card style (in sections/provis-coffee-carousel.liquid)
handles its own card hover, image scale+rotate, and info animations.
The old !important overrides here were fighting the gallery card and
killing the per-product tile background colors + rotate animation. */
/* ── 7. CAROUSEL HEADER — tighten breathing, add a subtle
serif italic tone to the description and longer hairline. ── */
.pv-cc__line {
height: 1px !important;
width: 56px !important;
opacity: 0 !important;
}
.pv-cc--visible .pv-cc__line {
opacity: 0.55 !important;
}
.pv-cc__desc {
font-style: italic;
}
/* ── 8. CAROUSEL ARROWS — softer, paper-feel default; gold
on hover. Removes the heavy 60px solid pill. ─────────── */
.pv-cc__arrow {
background: transparent !important;
color: var(--pv-cc-text) !important;
border: 1px solid var(--pv-cc-text)28 !important;
box-shadow: none !important;
transition: background 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
transform 0.4s var(--ease-out),
box-shadow 0.5s var(--ease-out) !important;
}
.pv-cc__arrow:hover {
background: var(--pv-cc-accent) !important;
border-color: var(--pv-cc-accent) !important;
color: var(--pv-cc-bg) !important;
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 12px 28px rgba(34,36,50,0.18) !important;
}
/* ── 9. SHOP-ALL TILE — feels more like a "card" sibling now;
swaps the heavy 2px border for a 1px hairline + paper fill. */
.pv-cc__all {
border: 1px solid var(--pv-cc-accent)55 !important;
background: transparent !important;
transition: border-color 0.5s var(--ease-out),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.6s var(--ease-out) !important;
}
.pv-cc__all:hover {
border-color: var(--pv-cc-accent) !important;
transform: translateY(-10px) !important;
box-shadow: 0 24px 60px rgba(34,36,50,0.14) !important;
}
.pv-cc__all-icon {
border-width: 1px !important;
transition: transform 0.5s var(--ease-out),
background 0.5s var(--ease-out),
color 0.5s var(--ease-out) !important;
}
.pv-cc__all:hover .pv-cc__all-icon {
background: var(--pv-cc-accent) !important;
color: var(--pv-cc-bg) !important;
transform: scale(1.12) rotate(-3deg) !important;
}
/* ── 10. SUBSCRIBE-CTA — image gets a longer pull and a soft
inside vignette for editorial depth. The benefit checks
become more refined. ─────────────────────────────────── */
.pv-sub__img::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 75% 60% at 50% 50%, transparent 0%, rgba(34,36,50,0.18) 100%),
linear-gradient(90deg, rgba(248,250,239,0.10) 0%, transparent 18%);
z-index: 2;
}
.pv-sub__img img {
transition: transform 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.pv-sub__benefits li::before {
box-shadow: 0 4px 12px rgba(185,169,119,0.30);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pv-sub__benefits li:hover::before {
transform: scale(1.08);
box-shadow: 0 6px 16px rgba(185,169,119,0.45);
}
.pv-sub__btn {
border-radius: 2px !important;
transition: opacity 0.6s ease 0.55s,
transform 0.5s var(--ease-out),
background 0.4s var(--ease-out),
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
box-shadow 0.5s var(--ease-out) !important;
}
.pv-sub__btn:hover {
box-shadow: 0 14px 34px rgba(185,169,119,0.30) !important;
transform: translateY(-2px) !important;
}
/* ── 11. GLOBAL BUTTON POLISH — tactile press states + softer
easing on every Provis button so feedback feels consistent. */
.pv-btn,
.pv-btn-gold,
.pv-cta-buttons a,
.pv-sub__btn,
.ct-submit,
.pv-sub-tier-btn,
.pv-img-hero__btn,
.pv-ws-form-buttons a {
transition: background 0.4s var(--ease-out),
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
box-shadow 0.5s var(--ease-out),
transform 0.45s var(--ease-out) !important;
}
.pv-btn:active,
.pv-btn-gold:active,
.pv-cta-buttons a:active,
.pv-sub__btn:active,
.pv-sub-tier-btn:active,
.pv-img-hero__btn:active,
.pv-ws-form-buttons a:active {
transform: translateY(0) scale(0.985) !important;
transition-duration: 0.12s !important;
}
/* ── 12. NAV UNDERLINE — a touch finer + more confident easing */
.header__menu a::after,
.header-menu a::after,
[class*="header-menu"] a::after {
height: 1px !important;
background: linear-gradient(90deg, transparent 0%, #B9A977 18%, #B9A977 82%, transparent 100%) !important;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* ── 13. FOCUS STATES — visible, on-brand, never default blue. */
a:focus-visible,
button:focus-visible,
.pv-cc__card:focus-visible,
.pv-cc__all:focus-visible,
.pv-img-hero__btn:focus-visible,
.pv-sub__btn:focus-visible {
outline: none !important;
box-shadow:
0 0 0 2px var(--provis-paper),
0 0 0 4px var(--provis-oxblood) !important;
border-radius: 2px;
}
/* ── 14. FORM INPUT POLISH — refined focus + animated underline */
.pv-input,
.pv-textarea,
.pv-select,
input[type="email"]:not([class*="email-signup"] input),
input[type="text"]:not([class*="email-signup"] input) {
transition: border-color 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out) !important;
}
/* ── 15. SECTION EDGE HAIRLINE — slightly more confident,
slower fade. Pull it inward so it doesn't sit on a hard edge. */
.shopify-section + .shopify-section::before {
width: clamp(120px, 22vw, 260px) !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(185,169,119,0.45) 35%,
rgba(185,169,119,0.65) 50%,
rgba(185,169,119,0.45) 65%,
transparent 100%) !important;
top: 0 !important;
}
/* Suppress the hairline above the image-hero (it sits beneath nav) */
.shopify-section:has(.pv-img-hero)::before { display: none !important; }
/* ── 16. CARD REVEAL STAGGER — extend to 8 cards (carousel can
render up to 8). The current rule only goes to 6. ───── */
.pv-cc--visible .pv-cc__card:nth-child(7) { transition-delay: 0.75s; }
.pv-cc--visible .pv-cc__card:nth-child(8) { transition-delay: 0.85s; }
/* ── 17. SCROLL-SNAP REFINEMENT — proximity is OK but on
shorter sections it can fight scroll. Disable on touch. */
@media (hover: none) and (pointer: coarse) {
html { scroll-snap-type: none !important; }
}
/* ── 18. CURSOR HINT — pointer on every interactive card */
.pv-cc__card,
.pv-cc__all,
.pv-sub__btn,
.pv-img-hero__btn { cursor: pointer; }
/* ── 19. REDUCED-MOTION SAFETY — make sure cards still appear */
@media (prefers-reduced-motion: reduce) {
.pv-cc__card,
.pv-cc__all,
.pv-sub__title,
.pv-sub__body,
.pv-sub__benefits,
.pv-sub__btn,
.pv-cc__eyebrow,
.pv-cc__heading,
.pv-cc__desc {
opacity: 1 !important;
transform: none !important;
}
.pv-img-hero__bg { animation: none !important; }
}
/* ==========================================================================
SOURCE: provis-polish-system.css
========================================================================== */
/* =============================================================
PROVIS — CROSS-CUTTING POLISH SYSTEM
assets/provis-polish-system.css
-------------------------------------------------------------
A design-system polish layer that sits ON TOP of
provis-brand.css. It introduces refined tokens, utilities,
and micro-interactions without touching markup, copy, or
section schema. Everything here is opt-in via class, or
applies through low-specificity, non-destructive selectors.
Tokens namespace: --pv-* (additive; existing --provis-*
tokens from provis-brand.css remain authoritative)
Brand:
Tiller serif — headings
DM Sans — body
#222432 navy — ink
#F8FAEF cream — paper
#B9A977 gold — accent
============================================================= */
/* =============================================================
1. TOKENS — scale, motion, elevation, tonal variations
============================================================= */
:root {
/* ---------- Modular type scale (1.250 — minor third) ----- */
/* Base 16px body. Scale steps tuned for editorial coffee site. */
--pv-fs-0: 0.75rem; /* 12px — micro / legal */
--pv-fs-1: 0.8125rem; /* 13px — eyebrow */
--pv-fs-2: 0.9375rem; /* 15px — caption */
--pv-fs-3: 1rem; /* 16px — body */
--pv-fs-4: 1.125rem; /* 18px — lede */
--pv-fs-5: 1.375rem; /* 22px — h5 */
--pv-fs-6: 1.6875rem; /* 27px — h4 */
--pv-fs-7: 2.0625rem; /* 33px — h3 */
--pv-fs-8: 2.5625rem; /* 41px — h2 */
--pv-fs-9: 3.1875rem; /* 51px — h1 */
--pv-fs-10: 4rem; /* 64px — display sm */
--pv-fs-11: 5rem; /* 80px — display md */
--pv-fs-12: clamp(3.5rem, 8vw, 7rem); /* display lg fluid */
/* ---------- Line-heights (tight for display, loose for body) */
--pv-lh-display: 1.02;
--pv-lh-heading: 1.12;
--pv-lh-subhead: 1.28;
--pv-lh-body: 1.68;
--pv-lh-body-long: 1.75;
--pv-lh-tight: 1.0;
/* ---------- Letter-spacing per level ---------------------- */
--pv-ls-display: -0.012em;
--pv-ls-h1: -0.008em;
--pv-ls-h2: 0em;
--pv-ls-h3: 0.004em;
--pv-ls-h4: 0.008em;
--pv-ls-eyebrow: 0.32em;
--pv-ls-caps: 0.12em;
/* ---------- Measure --------------------------------------- */
--pv-measure: 65ch;
--pv-measure-tight: 52ch;
--pv-measure-wide: 78ch;
/* ---------- Tonal palette — gold ------------------------- */
--pv-gold-deepest: #8f7e4f;
--pv-gold-deep: #a89664;
--pv-gold: #b9a977;
--pv-gold-soft: #d4c79a;
--pv-gold-mist: #e8dfbf;
--pv-gold-ghost: rgba(185, 169, 119, 0.14);
--pv-gold-line: rgba(185, 169, 119, 0.42);
/* ---------- Tonal palette — navy ------------------------- */
--pv-navy-deepest: #14151d;
--pv-navy-deep: #1c1e2a;
--pv-navy: #222432;
--pv-navy-2: #2d2f44;
--pv-navy-3: #3a3c55;
--pv-navy-ghost: rgba(34, 36, 50, 0.08);
--pv-navy-line: rgba(34, 36, 50, 0.14);
/* ---------- Tonal palette — cream / paper ---------------- */
--pv-cream: #f8faef;
--pv-cream-2: #f2f4ec;
--pv-paper: #eef1ea;
--pv-paper-2: #e6e9df;
--pv-paper-rule: rgba(34, 36, 50, 0.12);
/* ---------- Elevation (4 levels) ------------------------- */
--pv-shadow-sm:
0 1px 2px rgba(20, 21, 29, 0.04),
0 1px 3px rgba(20, 21, 29, 0.06);
--pv-shadow-md:
0 4px 10px rgba(20, 21, 29, 0.05),
0 8px 20px rgba(20, 21, 29, 0.07);
--pv-shadow-lg:
0 10px 24px rgba(20, 21, 29, 0.08),
0 20px 48px rgba(20, 21, 29, 0.10);
--pv-shadow-xl:
0 18px 44px rgba(20, 21, 29, 0.10),
0 40px 90px rgba(20, 21, 29, 0.14);
--pv-shadow-inset:
inset 0 1px 0 rgba(248, 250, 239, 0.06),
inset 0 -1px 0 rgba(20, 21, 29, 0.08);
/* ---------- Border-radius scale --------------------------- */
--pv-radius-sharp: 1px;
--pv-radius-soft: 3px;
--pv-radius-card: 6px;
--pv-radius-lg: 12px;
--pv-radius-pill: 999px;
/* ---------- Easing curves --------------------------------- */
--pv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--pv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--pv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--pv-ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
--pv-ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1);
/* ---------- Duration scale -------------------------------- */
--pv-t-fast: 160ms;
--pv-t-base: 280ms;
--pv-t-slow: 520ms;
--pv-t-deliberate: 900ms;
--pv-t-curtain: 1400ms;
/* ---------- Focus ring ------------------------------------ */
--pv-focus-ring:
0 0 0 2px var(--pv-cream),
0 0 0 4px var(--pv-gold);
--pv-focus-ring-inverse:
0 0 0 2px var(--pv-navy),
0 0 0 4px var(--pv-gold);
}
/* =============================================================
2. TYPE SCALE APPLICATION
Low-specificity refinements that only reinforce existing
provis-brand.css rules. No markup touched.
============================================================= */
/* 2.1 Display headings — hero-level h1 feel */
.pv-display,
.pv-hero h1,
.page-hero h1 {
font-size: clamp(var(--pv-fs-9), 7vw, var(--pv-fs-12));
line-height: var(--pv-lh-display);
letter-spacing: var(--pv-ls-display);
font-feature-settings: "ss01", "liga", "dlig";
}
/* 2.2 H1 tuning */
.pv-h1 {
font-size: clamp(var(--pv-fs-8), 4.6vw, var(--pv-fs-10));
line-height: var(--pv-lh-heading);
letter-spacing: var(--pv-ls-h1);
}
/* 2.3 H2 tuning */
.pv-h2 {
font-size: clamp(var(--pv-fs-7), 3.6vw, var(--pv-fs-9));
line-height: var(--pv-lh-heading);
letter-spacing: var(--pv-ls-h2);
}
/* 2.4 H3 tuning */
.pv-h3 {
font-size: clamp(var(--pv-fs-6), 2.6vw, var(--pv-fs-8));
line-height: var(--pv-lh-subhead);
letter-spacing: var(--pv-ls-h3);
}
/* 2.5 H4 tuning */
.pv-h4 {
font-size: var(--pv-fs-5);
line-height: var(--pv-lh-subhead);
letter-spacing: var(--pv-ls-h4);
}
/* 2.6 Eyebrow refinement — consistent tracking */
.pv-eyebrow {
letter-spacing: var(--pv-ls-eyebrow);
font-feature-settings: "tnum";
}
/* 2.7 Lede paragraph — comfortable reading for intros */
.pv-lede {
font-size: var(--pv-fs-4);
line-height: var(--pv-lh-body);
max-width: var(--pv-measure);
}
/* 2.8 Body rhythm — readable measure + line-height */
.pv-body,
.pv-prose p {
font-size: var(--pv-fs-3);
line-height: var(--pv-lh-body);
max-width: var(--pv-measure);
}
/* 2.9 Long-form prose variant */
.pv-prose--long p {
line-height: var(--pv-lh-body-long);
margin-bottom: 1.15em;
}
/* 2.10 Caption / meta text */
.pv-caption {
font-size: var(--pv-fs-2);
line-height: 1.55;
letter-spacing: 0.005em;
color: var(--provis-mute);
}
/* =============================================================
3. LINK STYLES — editorial underlines w/ hover reveal
============================================================= */
/* 3.1 Refined inline link — animated underline thickness */
.pv-link-x {
color: currentColor;
text-decoration: none;
background-image: linear-gradient(var(--pv-gold), var(--pv-gold));
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size var(--pv-t-base) var(--pv-ease-out),
color var(--pv-t-base) var(--pv-ease-out);
padding-bottom: 0.12em;
}
.pv-link-x:hover {
background-size: 100% 2px;
color: var(--pv-gold-deep);
}
/* 3.2 Reveal-on-hover link (underline grows from left) */
.pv-link-reveal {
position: relative;
text-decoration: none;
color: currentColor;
}
.pv-link-reveal::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--pv-t-base) var(--pv-ease-out);
}
.pv-link-reveal:hover::after { transform: scaleX(1); }
/* =============================================================
4. GRADIENTS — subtle brand washes
============================================================= */
/* 4.1 Paper gradient — warm cream to paper */
.pv-grad-paper {
background-image:
linear-gradient(180deg, var(--pv-cream) 0%, var(--pv-paper) 100%);
}
/* 4.2 Navy gradient — deep to navy-2 */
.pv-grad-navy {
background-image:
linear-gradient(180deg, var(--pv-navy-deep) 0%, var(--pv-navy-2) 100%);
}
/* 4.3 Gold gradient — soft to deep */
.pv-grad-gold {
background-image:
linear-gradient(135deg, var(--pv-gold-soft) 0%, var(--pv-gold) 50%, var(--pv-gold-deep) 100%);
}
/* 4.4 Radial warm-light spotlight */
.pv-grad-spotlight {
background-image:
radial-gradient(ellipse at 50% 10%, rgba(185, 169, 119, 0.22), transparent 60%),
linear-gradient(180deg, var(--pv-cream), var(--pv-paper));
}
/* 4.5 Vignette wash for image overlays */
.pv-grad-vignette::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at center,
transparent 40%, rgba(20, 21, 29, 0.45) 100%);
pointer-events: none;
}
/* =============================================================
5. SHADOW ELEVATION UTILITIES
============================================================= */
.pv-elev-sm { box-shadow: var(--pv-shadow-sm); }
.pv-elev-md { box-shadow: var(--pv-shadow-md); }
.pv-elev-lg { box-shadow: var(--pv-shadow-lg); }
.pv-elev-xl { box-shadow: var(--pv-shadow-xl); }
.pv-elev-inset { box-shadow: var(--pv-shadow-inset); }
/* =============================================================
6. BORDER-RADIUS UTILITIES
============================================================= */
.pv-r-sharp { border-radius: var(--pv-radius-sharp); }
.pv-r-soft { border-radius: var(--pv-radius-soft); }
.pv-r-card { border-radius: var(--pv-radius-card); }
.pv-r-lg { border-radius: var(--pv-radius-lg); }
.pv-r-pill { border-radius: var(--pv-radius-pill); }
/* =============================================================
7. FOCUS RING — brand-cohesive double ring
Gentle, non-destructive. Only affects keyboard focus.
============================================================= */
.pv-focusable:focus-visible,
.pv-btn:focus-visible,
.pv-btn-gold:focus-visible,
.pv-link-x:focus-visible,
.pv-link-reveal:focus-visible {
outline: none;
box-shadow: var(--pv-focus-ring);
border-radius: var(--pv-radius-soft);
}
.pv-section--ink .pv-focusable:focus-visible,
.pv-section--ink .pv-btn:focus-visible {
box-shadow: var(--pv-focus-ring-inverse);
}
/* =============================================================
8. SCROLL-REVEAL MOTION — refined variants
Hooks into provis-scroll-reveal.js:
- .is-visible is added by the class observer
- .pv-visible is added by the data-pv-reveal observer
============================================================= */
/* 8.1 Fade-up (default editorial reveal) */
.pv-rv-fade-up {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition: opacity var(--pv-t-deliberate) var(--pv-ease-editorial),
transform var(--pv-t-deliberate) var(--pv-ease-editorial);
will-change: opacity, transform;
}
.pv-rv-fade-up.is-visible,
.pv-rv-fade-up.pv-visible { opacity: 1; transform: none; }
/* 8.2 Clip-up — wipe from bottom */
.pv-rv-clip-up {
clip-path: inset(0 0 100% 0);
transition: clip-path var(--pv-t-deliberate) var(--pv-ease-editorial);
}
.pv-rv-clip-up.is-visible,
.pv-rv-clip-up.pv-visible { clip-path: inset(0 0 0 0); }
/* 8.3 Scale-in */
.pv-rv-scale {
opacity: 0; transform: scale(0.96);
transition: opacity var(--pv-t-slow) var(--pv-ease-spring),
transform var(--pv-t-slow) var(--pv-ease-spring);
}
.pv-rv-scale.is-visible,
.pv-rv-scale.pv-visible { opacity: 1; transform: none; }
/* 8.4 Hairline draw — horizontal rule that draws in */
.pv-rv-hairline {
transform: scaleX(0); transform-origin: left center;
transition: transform var(--pv-t-deliberate) var(--pv-ease-editorial);
}
.pv-rv-hairline.is-visible,
.pv-rv-hairline.pv-visible { transform: scaleX(1); }
/* 8.5 Stagger delays (use alongside reveal classes) */
.pv-rv-d1 { transition-delay: 80ms; }
.pv-rv-d2 { transition-delay: 160ms; }
.pv-rv-d3 { transition-delay: 240ms; }
.pv-rv-d4 { transition-delay: 320ms; }
.pv-rv-d5 { transition-delay: 400ms; }
/* =============================================================
9. IMAGE GRADE UTILITY — editorial photographic treatment
============================================================= */
.pv-img-grade img,
img.pv-img-grade {
filter: saturate(0.92) contrast(1.04) sepia(0.06);
transition: filter var(--pv-t-slow) var(--pv-ease-out),
transform var(--pv-t-slow) var(--pv-ease-out);
}
.pv-img-grade:hover img,
img.pv-img-grade:hover {
filter: saturate(1) contrast(1.06) sepia(0.02);
}
/* 9.1 Mono grade — duotone-ish navy wash */
.pv-img-mono img,
img.pv-img-mono {
filter: grayscale(0.85) contrast(1.06) brightness(0.98);
}
/* =============================================================
10. GRAIN OVERLAY — analog film grain
============================================================= */
.pv-grain {
position: relative;
isolation: isolate;
}
.pv-grain::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
z-index: 1;
}
/* 10.1 Section-level grain wash (subtle, 3%) */
.pv-section-grain {
position: relative;
}
.pv-section-grain::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml;utf8,");
z-index: 0;
}
/* =============================================================
11. PAPER TEXTURE UTILITY
============================================================= */
.pv-paper-tex {
background-color: var(--pv-cream);
background-image:
radial-gradient(rgba(34, 36, 50, 0.035) 1px, transparent 1px),
radial-gradient(rgba(34, 36, 50, 0.025) 1px, transparent 1px);
background-size: 18px 18px, 32px 32px;
background-position: 0 0, 9px 9px;
}
/* =============================================================
12. HAIRLINE DIVIDER — universal gold gradient rule
============================================================= */
.pv-hairline {
display: block;
width: 100%;
height: 1px;
border: 0;
background-image: linear-gradient(90deg,
transparent 0%,
var(--pv-gold-line) 20%,
var(--pv-gold) 50%,
var(--pv-gold-line) 80%,
transparent 100%);
}
.pv-hairline--short {
width: 72px;
height: 1px;
background: var(--pv-gold);
}
.pv-hairline--vert {
width: 1px;
height: 100%;
background-image: linear-gradient(180deg,
transparent, var(--pv-gold-line), transparent);
}
/* =============================================================
13. DROP CAP — editorial first letter
============================================================= */
.pv-dropcap::first-letter,
.pv-dropcap > p:first-of-type::first-letter {
font-family: var(--provis-heading-font);
font-size: 3.6em;
float: left;
line-height: 1;
margin: 0.12em 0.12em -0.05em 0;
padding: 0;
color: var(--pv-gold-deep);
font-weight: 500;
-webkit-initial-letter: 3;
initial-letter: 3;
}
/* =============================================================
14. PULL QUOTE — editorial blockquote utility
============================================================= */
.pv-pullquote {
font-family: var(--provis-heading-font);
font-size: clamp(var(--pv-fs-6), 3vw, var(--pv-fs-8));
line-height: 1.22;
letter-spacing: var(--pv-ls-h3);
color: var(--pv-navy);
max-width: var(--pv-measure-tight);
margin: var(--space-7, 3rem) auto;
padding: 0 var(--space-6, 2rem);
border-left: 2px solid var(--pv-gold);
font-style: italic;
}
.pv-pullquote cite {
display: block;
margin-top: 0.8em;
font-family: var(--provis-body-font);
font-size: var(--pv-fs-2);
font-style: normal;
letter-spacing: var(--pv-ls-eyebrow);
text-transform: uppercase;
color: var(--provis-mute);
}
/* =============================================================
15. NUMBERED FIGURE — "Nº 01" style numeral label
============================================================= */
.pv-figno {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
font-family: var(--provis-heading-font);
font-size: var(--pv-fs-2);
letter-spacing: var(--pv-ls-eyebrow);
text-transform: uppercase;
color: var(--pv-gold-deep);
}
.pv-figno::before { content: "N\00BA"; opacity: 0.7; }
/* =============================================================
16. CARET / ARROW MICRO-ICONS — pure CSS
============================================================= */
.pv-caret {
display: inline-block;
width: 0.55em; height: 0.55em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--pv-t-base) var(--pv-ease-out);
vertical-align: middle;
}
.pv-caret--down { transform: rotate(45deg); }
.pv-caret--up { transform: rotate(-135deg); }
.pv-caret--left { transform: rotate(135deg); }
.pv-arrow {
display: inline-block;
width: 1.2em;
height: 1px;
background: currentColor;
position: relative;
vertical-align: middle;
transition: width var(--pv-t-base) var(--pv-ease-out);
}
.pv-arrow::after {
content: "";
position: absolute;
right: 0; top: 50%;
width: 0.5em; height: 0.5em;
border-right: 1px solid currentColor;
border-top: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
a:hover > .pv-arrow,
button:hover > .pv-arrow { width: 1.6em; }
/* =============================================================
17. LOADING SKELETON SHIMMER
============================================================= */
@keyframes pvShimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.pv-skeleton {
display: block;
background-color: var(--pv-paper);
background-image: linear-gradient(90deg,
var(--pv-paper) 0%,
var(--pv-cream-2) 40%,
var(--pv-paper) 80%);
background-size: 400px 100%;
background-repeat: no-repeat;
animation: pvShimmer 1.6s var(--pv-ease-in-out) infinite;
border-radius: var(--pv-radius-soft);
min-height: 1em;
color: transparent;
}
/* =============================================================
18. TOAST / NOTIFICATION SHELL — disabled (Apr 2026)
============================================================= */
#pv-toast, .pv-toast { display: none !important; }
.pv-toast {
position: fixed;
left: 50%;
bottom: 2rem;
transform: translateX(-50%) translateY(20px);
background: var(--pv-navy);
color: var(--pv-cream);
font-family: var(--provis-body-font);
font-size: var(--pv-fs-3);
padding: 0.9rem 1.4rem;
border-radius: var(--pv-radius-card);
box-shadow: var(--pv-shadow-lg);
border: 1px solid var(--pv-gold-line);
opacity: 0;
pointer-events: none;
transition: opacity var(--pv-t-base) var(--pv-ease-out),
transform var(--pv-t-base) var(--pv-ease-out);
z-index: 9000;
}
.pv-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.pv-toast--success { border-left: 3px solid var(--pv-gold); }
.pv-toast--error { border-left: 3px solid #c75a4a; }
/* =============================================================
19. TOOLTIP SHELL
============================================================= */
.pv-tip { position: relative; }
.pv-tip[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 50%; bottom: calc(100% + 8px);
transform: translate(-50%, 4px);
background: var(--pv-navy);
color: var(--pv-cream);
font-family: var(--provis-body-font);
font-size: var(--pv-fs-1);
letter-spacing: 0.01em;
padding: 0.45rem 0.7rem;
border-radius: var(--pv-radius-soft);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--pv-t-fast) var(--pv-ease-out),
transform var(--pv-t-fast) var(--pv-ease-out);
box-shadow: var(--pv-shadow-md);
z-index: 50;
}
.pv-tip:hover::after,
.pv-tip:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0);
}
/* =============================================================
20. TAG / CHIP / PILL COMPONENTS
============================================================= */
.pv-chip {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--provis-body-font);
font-size: var(--pv-fs-1);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.35em 0.85em;
border-radius: var(--pv-radius-pill);
background: var(--pv-navy-ghost);
color: var(--pv-navy);
border: 1px solid var(--pv-navy-line);
transition: background var(--pv-t-base) var(--pv-ease-out),
color var(--pv-t-base) var(--pv-ease-out);
}
.pv-chip:hover { background: var(--pv-navy); color: var(--pv-cream); }
.pv-chip--gold {
background: var(--pv-gold-ghost);
border-color: var(--pv-gold-line);
color: var(--pv-gold-deep);
}
.pv-chip--gold:hover { background: var(--pv-gold); color: var(--pv-navy); }
.pv-chip--solid {
background: var(--pv-navy);
color: var(--pv-cream);
border-color: transparent;
}
/* =============================================================
21. AVATAR / CIRCLE FRAME
============================================================= */
.pv-avatar {
display: inline-block;
width: 48px; height: 48px;
border-radius: var(--pv-radius-pill);
overflow: hidden;
border: 1px solid var(--pv-gold-line);
box-shadow: var(--pv-shadow-sm);
background: var(--pv-paper);
}
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-avatar--sm { width: 32px; height: 32px; }
.pv-avatar--lg { width: 72px; height: 72px; }
.pv-avatar--xl { width: 112px; height: 112px; }
/* =============================================================
22. ASPECT-RATIO UTILITIES
============================================================= */
.pv-ar-square { aspect-ratio: 1 / 1; }
.pv-ar-portrait { aspect-ratio: 4 / 5; }
.pv-ar-landscape{ aspect-ratio: 16 / 9; }
.pv-ar-golden { aspect-ratio: 1.618 / 1; }
.pv-ar-cinema { aspect-ratio: 2.39 / 1; }
.pv-ar-35 { aspect-ratio: 3 / 5; }
.pv-ar-square > img,
.pv-ar-portrait > img,
.pv-ar-landscape > img,
.pv-ar-golden > img,
.pv-ar-cinema > img,
.pv-ar-35 > img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* =============================================================
23. SELECTION COLOR — brand-aware, per-context
============================================================= */
::selection {
background: var(--pv-gold);
color: var(--pv-navy);
}
.pv-section--ink ::selection,
.pv-grad-navy ::selection {
background: var(--pv-cream);
color: var(--pv-navy);
}
/* =============================================================
24. CUSTOM SCROLLBAR — subtle, brand-cohesive
============================================================= */
@supports selector(::-webkit-scrollbar) {
html {
scrollbar-color: var(--pv-gold-deep) var(--pv-paper);
scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
background: var(--pv-paper);
}
::-webkit-scrollbar-thumb {
background: var(--pv-gold-deep);
border: 2px solid var(--pv-paper);
border-radius: var(--pv-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--pv-navy); }
}
/* =============================================================
25. PRINT STYLESHEET BASICS
============================================================= */
@media print {
:root { --pv-cream: #fff; --pv-navy: #000; }
body, .pv-section, .pv-section--ink {
background: #fff !important;
color: #000 !important;
}
.pv-btn, .pv-btn-gold, nav, header, footer,
.pv-grain, .pv-section-grain,
.pv-toast, .pv-tip::after { display: none !important; }
h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; }
p, li, blockquote { orphans: 3; widows: 3; }
a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
img { max-width: 100% !important; page-break-inside: avoid; }
.pv-pullquote { border-left-color: #999 !important; color: #000 !important; }
}
/* =============================================================
26. REDUCED-MOTION SAFETY NET
============================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.pv-rv-fade-up,
.pv-rv-clip-up,
.pv-rv-scale,
.pv-rv-hairline {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
.pv-skeleton { animation: none !important; }
}
/* =============================================================
27. RTL SUPPORT HOOKS (light)
============================================================= */
[dir="rtl"] .pv-link-reveal::after { transform-origin: right center; }
[dir="rtl"] .pv-rv-hairline { transform-origin: right center; }
[dir="rtl"] .pv-dropcap::first-letter,
[dir="rtl"] .pv-dropcap > p:first-of-type::first-letter {
float: right;
padding: 0.08em 0 0 0.12em;
}
[dir="rtl"] .pv-pullquote {
border-left: none;
border-right: 2px solid var(--pv-gold);
}
[dir="rtl"] .pv-caret { transform: rotate(135deg); }
[dir="rtl"] .pv-caret--left { transform: rotate(-45deg); }
[dir="rtl"] .pv-toast { /* keep centered */ }
/* =============================================================
28. MEASURE & FLOW UTILITIES
============================================================= */
.pv-measure { max-width: var(--pv-measure); }
.pv-measure-tight { max-width: var(--pv-measure-tight); }
.pv-measure-wide { max-width: var(--pv-measure-wide); }
.pv-center-x { margin-left: auto; margin-right: auto; }
.pv-flow > * + * { margin-top: 1em; }
.pv-flow-lg > * + *{ margin-top: 1.6em; }
/* =============================================================
29. DIVIDER SPACING RHYTHM
============================================================= */
.pv-divider-y-sm { padding-top: var(--space-6, 2rem); padding-bottom: var(--space-6, 2rem); }
.pv-divider-y { padding-top: var(--space-8, 4rem); padding-bottom: var(--space-8, 4rem); }
.pv-divider-y-lg { padding-top: var(--space-10, 8rem); padding-bottom: var(--space-10, 8rem); }
/* =============================================================
30. IMAGE FRAME — editorial bordered image container
============================================================= */
.pv-frame {
position: relative;
padding: 6px;
background: var(--pv-cream);
border: 1px solid var(--pv-gold-line);
box-shadow: var(--pv-shadow-md);
}
.pv-frame::after {
content: "";
position: absolute; inset: 0;
border: 1px solid var(--pv-gold-line);
pointer-events: none;
transform: scale(0.985);
}
/* =============================================================
31. BUTTON REFINEMENTS (non-destructive polish on .pv-btn)
Adds subtle easing + focus harmony without touching
existing provis-brand.css button selectors.
============================================================= */
.pv-btn,
.pv-btn-gold {
transition: background var(--pv-t-base) var(--pv-ease-out),
color var(--pv-t-base) var(--pv-ease-out),
border-color var(--pv-t-base) var(--pv-ease-out),
box-shadow var(--pv-t-slow) var(--pv-ease-out),
transform var(--pv-t-slow) var(--pv-ease-spring);
}
.pv-btn:active,
.pv-btn-gold:active { transform: translateY(1px) scale(0.995); }
/* =============================================================
32. KEYFRAMES — shared micro-interaction library
============================================================= */
@keyframes pvFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pvRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes pvDraw {
from { stroke-dashoffset: 100%; }
to { stroke-dashoffset: 0; }
}
@keyframes pvPulseGold {
0%, 100% { box-shadow: 0 0 0 0 rgba(185, 169, 119, 0.45); }
50% { box-shadow: 0 0 0 10px rgba(185, 169, 119, 0); }
}
.pv-anim-pulse-gold { animation: pvPulseGold 2.4s var(--pv-ease-out) infinite; }
.pv-anim-fade-in { animation: pvFadeIn var(--pv-t-slow) var(--pv-ease-out) both; }
.pv-anim-rise { animation: pvRise var(--pv-t-slow) var(--pv-ease-editorial) both; }
/* =============================================================
33. HOVER LIFT — universal card hover polish
============================================================= */
.pv-lift {
transition: transform var(--pv-t-slow) var(--pv-ease-spring),
box-shadow var(--pv-t-slow) var(--pv-ease-out);
}
.pv-lift:hover {
transform: translateY(-3px);
box-shadow: var(--pv-shadow-lg);
}
/* =============================================================
34. SECTION-LEVEL AMBIENCE
Adds an opt-in 3% grain to any section without markup edits.
============================================================= */
.pv-ambient {
position: relative;
isolation: isolate;
}
.pv-ambient::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.04;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
.pv-ambient > * { position: relative; z-index: 1; }
/* =============================================================
35. TEXT BALANCE & WRAP
============================================================= */
.pv-balance { text-wrap: balance; }
.pv-pretty { text-wrap: pretty; }
.pv-nowrap { white-space: nowrap; }
/* =============================================================
36. NUMERIC STYLING — tabular figures for prices/stats
============================================================= */
.pv-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pv-onum { font-variant-numeric: oldstyle-nums; font-feature-settings: "onum"; }
/* =============================================================
37. SMALL-CAPS UTILITY
============================================================= */
.pv-smallcaps {
font-variant-caps: all-small-caps;
letter-spacing: var(--pv-ls-caps);
}
/* =============================================================
38. BACKDROP BLUR PANEL — glassy overlay
============================================================= */
.pv-glass {
background: rgba(248, 250, 239, 0.72);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border: 1px solid var(--pv-gold-line);
}
.pv-glass--ink {
background: rgba(20, 21, 29, 0.6);
color: var(--pv-cream);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border: 1px solid rgba(185, 169, 119, 0.28);
}
/* =============================================================
39. KEYLINE BORDER — double hairline brand frame
============================================================= */
.pv-keyline {
border: 1px solid var(--pv-gold-line);
box-shadow:
inset 0 0 0 3px var(--pv-cream),
inset 0 0 0 4px var(--pv-gold-line);
}
/* =============================================================
40. ORNAMENT — centered gold dot separator
============================================================= */
.pv-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
color: var(--pv-gold-deep);
}
.pv-ornament::before,
.pv-ornament::after {
content: "";
flex: 0 0 48px;
height: 1px;
background: var(--pv-gold-line);
}
.pv-ornament > span::before { content: "\25C6"; /* diamond */ }
/* =============================================================
END — provis-polish-system.css
============================================================= */
/* ==========================================================================
SOURCE: provis-polish-global.css
========================================================================== */
/* cache-bust: nav-fix 2026-04-08 */
/* ============================================================
provis-polish-global.css
Global-elements polish pass for Provis Coffee (Shopify Horizon)
------------------------------------------------------------
Scope: header, announcement bar, nav/mega menu, mobile drawer,
search modal, cart icon/badge, account link, localization,
footer (brand, columns, newsletter, socials, copyright),
skip-link, page-transition, scroll progress.
Rules of engagement:
- Additive CSS only. No markup/copy/schema changes.
- Uses existing Provis tokens from provis-brand.css where possible
(--provis-navy, --provis-cream, --provis-paper, --provis-gold).
- Respects reduced-motion.
- Never touches templates/.
============================================================ */
/* ------------------------------------------------------------
Local tokens — scoped, non-destructive. Fall back to brand
tokens defined in provis-brand.css.
------------------------------------------------------------ */
:root {
--pg-navy: var(--provis-navy, #222432);
--pg-navy-deep: #1a1c28;
--pg-cream: var(--provis-cream, #F8FAEF);
--pg-paper: var(--provis-paper, #F8FAEF);
--pg-gold: var(--provis-gold, #B9A977);
--pg-gold-soft: rgba(185, 169, 119, 0.35);
--pg-hairline: rgba(248, 250, 239, 0.12);
--pg-hairline-strong: rgba(248, 250, 239, 0.22);
--pg-shadow-lg: 0 24px 60px -20px rgba(10, 12, 22, 0.45);
--pg-shadow-md: 0 12px 28px -12px rgba(10, 12, 22, 0.35);
--pg-ease: cubic-bezier(0.2, 0.65, 0.25, 1);
--pg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--pg-dur-fast: 160ms;
--pg-dur: 260ms;
--pg-dur-slow: 420ms;
}
/* ============================================================
1. HEADER BACKGROUND STATES
Change: Give the header a subtle glassy veil when scrolled
and a crisp hairline that fades in with stuck-state.
Rationale: The current header snaps hard between transparent
and solid. A 260ms cross-fade on backdrop-filter + border
reads as premium without masking the navy.
============================================================ */
header-component .header,
header.header,
.header {
transition:
background-color var(--pg-dur) var(--pg-ease),
box-shadow var(--pg-dur) var(--pg-ease),
border-color var(--pg-dur) var(--pg-ease),
backdrop-filter var(--pg-dur) var(--pg-ease);
will-change: background-color, box-shadow;
border-bottom: 1px solid transparent;
}
/* 2. Scrolled / sticky-active state — soft navy glass + hairline */
header-component[data-sticky-state="active"] .header,
header-component:not([transparent]) .header,
.header[data-stuck="true"] {
background-color: rgba(34, 36, 50, 0.92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom-color: var(--pg-hairline);
box-shadow: 0 10px 30px -18px rgba(10, 12, 22, 0.55);
}
/* 2b. Force cream text inside the forced-navy header.
Subpage templates (page/*, 404, etc.) don't get the transparent header,
so header-component has no color-scheme class and the inner rows keep
their .color-scheme-1 (cream-bg/dark-text) treatment. Rule #2 above
overrides the *background* to navy, but without also overriding the
color the logo, header-actions (search, currency, account, cart), and
any non-menu-link element inherit a dark navy color from color-scheme-1
and become invisible on the now-navy background.
Scope to non-transparent headers so the transparent-over-hero case on
home/product/collection is untouched. Note: header-component itself
carries the `.header` class, so rule #2 above matches it directly —
there is no `.header` descendant to traverse into. We target descendants
from header-component with a descendant combinator. */
header-component:not([transparent]),
header-component:not([transparent]) .header__row,
header-component:not([transparent]) .header__row--top,
header-component:not([transparent]) .header__row--bottom,
header-component:not([transparent]) .header__navigation-bar-row,
header-component:not([transparent]) .header-logo,
header-component:not([transparent]) .header__logo,
header-component:not([transparent]) .header-logo *,
header-component:not([transparent]) [class*="header-actions"],
header-component:not([transparent]) [class*="header-actions"] *,
header-component:not([transparent]) .dropdown-localization,
header-component:not([transparent]) .dropdown-localization *,
header-component:not([transparent]) search-button,
header-component:not([transparent]) search-button *,
header-component:not([transparent]) shopify-account,
header-component:not([transparent]) shopify-account *,
header-component:not([transparent]) .cart-bubble,
header-component:not([transparent]) .cart-bubble *,
header-component:not([transparent]) .account-button,
header-component:not([transparent]) .account-button * {
color: var(--pg-cream, #F8FAEF) !important;
}
/* SVG icons inside the header — force stroke + fill to currentColor so
they track the cream text color we just set above. */
header-component:not([transparent]) [class*="header-actions"] svg,
header-component:not([transparent]) [class*="header-actions"] svg *,
header-component:not([transparent]) .dropdown-localization svg,
header-component:not([transparent]) .dropdown-localization svg *,
header-component:not([transparent]) search-button svg,
header-component:not([transparent]) search-button svg *,
header-component:not([transparent]) .icon-caret svg,
header-component:not([transparent]) .icon-caret svg * {
stroke: currentColor !important;
}
/* Exception: the orange "Account" pill button — it has its own background
and text color, leave it alone. */
header-component:not([transparent]) .account-button--signed-in,
header-component:not([transparent]) .account-button--signed-in * {
color: inherit !important;
}
/* 3. Transparent-over-hero state — ensure nav links have a
readable soft shadow so they float on light imagery. */
header-component[transparent]:not([data-sticky-state="active"]) .header a,
.header[data-transparent="always"]:not([data-stuck="true"]) a {
text-shadow: 0 1px 18px rgba(10, 12, 22, 0.35);
}
/* ============================================================
4. HEADER LOGO — hover lift + crisper focus ring
Rationale: Seal treatment already handled in brand.css; here
we add a gentle scale on hover + accessible focus ring.
============================================================ */
.header-logo,
.header__logo a,
[class*="header-logo"] a {
transition: transform var(--pg-dur) var(--pg-ease-out), filter var(--pg-dur) var(--pg-ease);
}
.header-logo:hover,
.header__logo a:hover,
[class*="header-logo"] a:hover {
transform: translateY(-1px) scale(1.012);
filter: brightness(1.04);
}
.header-logo:focus-visible,
.header__logo a:focus-visible {
outline: 2px solid var(--pg-gold);
outline-offset: 6px;
border-radius: 999px;
}
/* ============================================================
5. NAV MENU LINKS — refined rhythm + underline animation
Rationale: provis-brand.css has a basic underline; we sharpen
the ease, thin the stroke, and anchor it from center for
a more editorial feel.
============================================================ */
.header__menu a,
.header-menu a,
[class*="header-menu"] a {
letter-spacing: 0.04em;
font-feature-settings: "ss01", "ss02", "liga";
transition:
color var(--pg-dur-fast) var(--pg-ease),
opacity var(--pg-dur-fast) var(--pg-ease);
}
/* 6. Nav link gap rhythm — add a touch more breathing room */
.header__menu,
.header-menu,
[class*="header-menu"] > ul,
[class*="header-menu"] > li {
column-gap: clamp(1.25rem, 2vw, 2.25rem);
}
/* ============================================================
HOVER PREVIEW CARD — quick info popper on product card hover
Shows tasting notes / brew tip / roast info on hover for cards
in the carousel. Uses CSS only — no JS needed.
============================================================ */
.pv-cc__card {
/* Make sure the card is positioned for the absolute child preview */
position: relative;
}
.pv-cc__card .pv-cc__card-notes {
/* The notes line is now also used as the hover badge content */
transition: opacity 0.4s ease, transform 0.4s ease;
}
.pv-cc__card-info {
transform: translateY(0);
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pv-cc__card:hover .pv-cc__card-info {
transform: translateY(-6px);
}
/* Add a "View Coffee →" CTA chip on hover for non-featured cards */
.pv-cc__card .pv-cc__card-view {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 14px;
background: rgba(185, 169, 119, 0.18);
border: 1px solid rgba(185, 169, 119, 0.45);
border-radius: 2px;
color: var(--pv-cc-accent, #B9A977);
font-family: var(--provis-body-font, 'DM Sans', sans-serif);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
align-self: flex-start;
width: max-content;
}
.pv-cc__card:hover .pv-cc__card-view {
opacity: 1;
transform: translateY(0);
background: rgba(185, 169, 119, 0.28);
}
.pv-cc__card-view__arrow {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.pv-cc__card:hover .pv-cc__card-view__arrow {
transform: translateX(4px);
}
/* ============================================================
HOVER POLISH — site-wide micro-interactions that give the
site life. Apply to buttons, links, product cards, etc.
============================================================ */
/* All buttons get a subtle lift + brightness on hover */
.button:not(.button-unstyled):not(.cart-bubble),
button.button:not(.button-unstyled):not(.cart-bubble),
.shopify-payment-button__button,
[type="submit"]:not(.button-unstyled),
.pv-btn,
.pv-btn-gold,
.pv-btn-outline {
transition:
transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.32s ease,
border-color 0.32s ease,
color 0.32s ease !important;
}
.button:not(.button-unstyled):not(.cart-bubble):hover,
button.button:not(.button-unstyled):not(.cart-bubble):hover,
.shopify-payment-button__button:hover,
[type="submit"]:not(.button-unstyled):hover,
.pv-btn:hover,
.pv-btn-gold:hover,
.pv-btn-outline:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(34, 36, 50, 0.18);
}
.button:not(.button-unstyled):not(.cart-bubble):active,
button.button:not(.button-unstyled):not(.cart-bubble):active {
transform: translateY(0);
transition-duration: 0.05s;
}
/* Inline links inside body copy get a gold underline-grow on hover */
.rte a:not([class]),
.pv-body a:not([class]),
[class*="text-block"] a:not([class]) {
position: relative;
text-decoration: none;
color: inherit;
font-weight: 600;
background-image: linear-gradient(180deg, transparent 92%, var(--pg-gold, #B9A977) 92%, var(--pg-gold, #B9A977) 100%);
background-size: 100% 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease, color 0.3s ease;
}
.rte a:not([class]):hover,
.pv-body a:not([class]):hover,
[class*="text-block"] a:not([class]):hover {
color: var(--pg-gold, #B9A977);
}
/* Native Shopify product cards on collection pages get the same lift treatment */
product-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
product-card:hover {
transform: translateY(-6px);
}
product-card [class*="product-card__image"],
product-card [class*="product-card-gallery"] img {
transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
product-card:hover [class*="product-card__image"] img,
product-card:hover [class*="product-card-gallery"] img {
transform: scale(1.04);
}
product-card [class*="product-title"],
product-card .product-title {
transition: color 0.3s ease;
}
product-card:hover [class*="product-title"],
product-card:hover .product-title {
color: var(--pg-gold, #B9A977) !important;
}
/* Hide Contact from main nav (desktop + mobile drawer) — moved to footer
This is a belt-and-braces CSS rule on top of the Liquid filter in
blocks/_header-menu.liquid + snippets/header-drawer.liquid because
Shopify's HEAD/section cache can lag the Liquid render by 5-10 minutes. */
.header__menu li:has(> a[href="/pages/contact"]),
.menu-list__list-item:has(> a[href="/pages/contact"]),
.menu-drawer__list-item--flat:has(> a[href="/pages/contact"]),
.menu-drawer__list-item--deep:has(> a[href="/pages/contact"]),
li:has(> a#HeaderDrawer-contact),
li:has(> a[id^="HeaderDrawer-contact"]),
.menu-list__list-item:has(> a[id^="header-menu-contact"]),
a[href="/pages/contact"].menu-list__link,
a#HeaderDrawer-contact {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 7. Nav underline — anchored to the inner text span (not the padded link)
The