/* vm.css — additions on top of the transplanted gruns theme (fonts, wordmark, small fixes). Use brand variables only. */ @font-face { font-family: "GT Standard"; src: url(/_theme/fonts/GTStandard-LHeavy.woff2) format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url(/_theme/fonts/GTStandard-MSemibold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url(/_theme/fonts/GTStandard-MMedium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "GT Standard"; src: url(/_theme/fonts/GTStandard-MRegular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url(/_theme/fonts/DMSans-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* gruns' Klaviyo footer email form (Google-hosted on gruns) */ html { scroll-behavior: smooth; } body { margin: 0; background: #fff; } /* font/size/colour come from gruns' theme.css body rule (Work Sans 20/32, color var(--color-black)) */ .vm-wordmark { font-family: var(--font-shrek-display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.02em; display: inline-block; } .d1, .d2, .d3, .d4, .d5, .d6 { font-weight: 700; } .header-v2-section .vm-wordmark { color: var(--color-yellow); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } @layer base { img { max-width: 100%; height: auto; } } /* accordion-item panel animation (gruns uses grid-template-rows 0fr/1fr) */ accordion-item [data-panel] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease-in-out; } accordion-item [data-panel] > div { overflow: hidden; } accordion-item[open] [data-panel], accordion-item.is-open [data-panel] { grid-template-rows: 1fr; } /* placeholder tiles for null assets */ .vm-placeholder { background: var(--color-green-weakest); display:flex; align-items:center; justify-content:center; color: var(--color-fg-tertiary); } /* Footer "Email me instead" form = gruns' Klaviyo form look (DM Sans 20px, green text, #3d1202 hairline, 52px input / 50px yellow button, square corners) */ [data-signup-shell="email"] input[type=email] { font-family: "DM Sans", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; font-size: 20px; font-weight: 400; line-height: normal; color: var(--color-green); background: #fff; border: 1px solid rgba(61,18,2,1); border-radius: 0; height: 52px; padding: 0 0 0 16px; } [data-signup-shell="email"] input[type=email]::placeholder { color: #808080; font-family: "DM Sans", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; font-size: 20px; } [data-signup-shell="email"] button.sms-submit { height: 50px; width: auto; min-width: 50px; align-self: flex-end; padding: 0 10px; border-radius: 0; font-family: "DM Sans", "Lucida Sans", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; font-size: 22px; letter-spacing: 1px; line-height: 1; color: rgba(61,18,2,1); } [data-signup-shell="email"] .relative.flex { align-items: flex-end; gap: 0; } /* --------------------------------------------------------------------------------------------------------------- Revision 2 — global design tweaks (owner review 2026-09-12, REVISION_2_BRIEF §E). Deliberate departures from gruns 1:1. --------------------------------------------------------------------------------------------------------------- */ /* E1 header: bare wordmark (≈1.4× gruns' 26px), no pill behind it or the actions; icons in the brand ink (they float over light sections now that nothing dark sits behind them); the hide-on-scroll / reveal behaviour and the floating position are untouched. */ .header-v2-section .vm-wordmark { font-size: 36px; color: var(--vm-header-wordmark, var(--color-yellow)); filter: none; } /* colour: products.js (accent, or the primary for pale accents) */ .header-v2-section .vm-header-logo { padding-left: 2px; padding-right: 8px; } .header-v2-section .vm-header-logo img { width: 108px; } .header-v2-section .vm-header-actions > a[aria-label="View cart"]:hover, .header-v2-section .vm-header-actions > button:hover { background: rgba(0,0,0,.08); } /* long wordmarks (everbloom, wildpress…) shrink to the room left of the actions on phones: data-fit-text (main.js fitText) fits the span to this max-width */ @media (max-width: 991px) { .header-v2-section .vm-header-logo { max-width: calc(100vw - 232px); overflow: hidden; } } /* E2 hero (mobile): the floating header (60px) sits on the buybox top; keep slide 1 below it, full image visible, thumbs unchanged. */ @media (max-width: 991px) { .vm-pdp .usnacks-buybox .product-galleries { padding-top: 44px; } } /* E4 popup teaser tab: ≈60% of its former thickness (49.6px → 29.6px), same label, length and position — set in partials/popup.njk (.vm-popup-teaser padding 14px → 4px; the partial's own