/* ===================================================================== Studio Nafay — Unified fonts + header chrome (theme pages) WPCode snippet type: CSS. Run location: Front end only. --------------------------------------------------------------------- PURPOSE: kill the old Syne / IBM Plex Mono fonts everywhere on theme pages and leave ONLY Bodoni Moda (display / logo text) + Hanken Grotesk (everything else), per Rida's order (11 Nov 2026). Also restyles the theme header's remaining black surfaces (search overlay, mobile menu, black hairline borders) to cream. LOAD ORDER (verified 11 Nov 2026 from saved live HTML): theme combined CSS is at position 5240 in ; WPCode CSS snippets output at ~21445 — AFTER the theme stylesheet. So equal- specificity rules win by order. The :root redefinition below uses html:root (specificity 0,1,1) so it wins even if LiteSpeed ever reorders the stylesheets. OUT OF SCOPE (deliberately NOT touched — see build-notes.md): - The v8 product template (#sn-v8) and the pages v9 template: they already use literal Bodoni Moda + Hanken Grotesk. - The theme FOOTER (.site-footer): black by Rida's earlier decision ("keep the OLD theme footer — only change its FONT"). Its fonts flip via the :root redefinition below; its background stays black. - Black functional UI (add-to-cart buttons, .btn--dark, pagination "current", .card__flag, .vault section, hover-invert states): buttons/badges, not strips — Rida's call if she wants them cream. ===================================================================== */ /* --- 1. Flip the theme's font variables at the root ------------------ */ /* --display was 'Syne',Arial — now Bodoni Moda (display / logo only). --mono was 'IBM Plex Mono' — now Hanken Grotesk (everything else). This flips all 63 var(--mono) and 21 var(--display) usages at once, including the theme header nav, footer, buttons, prices, cart and checkout chrome. */ html:root{ --display:'Bodoni Moda',serif!important; --mono:'Hanken Grotesk',sans-serif!important; } /* --- 2. Body copy stays Hanken (never Bodoni) ------------------------ */ body{ font-family:'Hanken Grotesk',sans-serif!important; } /* --- 3. Literal (non-var) Syne / IBM Plex Mono rules ---------------- */ /* These rules name the old fonts literally, so the :root flip above cannot reach them. All are old-PDP (.single-product.sn-*) rules. */ /* 3a. "Syne",Arial,sans-serif!important — detail copy + spec list */ .single-product .sn-detail-copy, .single-product .sn-spec-list{ font-family:'Hanken Grotesk',sans-serif!important; } /* 3b. "Syne",sans-serif — box copy / price / live badge */ .single-product .sn-box-copy strong, .single-product .sn-box-copy small, .single-product .sn-box-price, .single-product .sn-box-live{ font-family:'Hanken Grotesk',sans-serif!important; } /* 3c. "IBM Plex Mono",monospace!important — buy form / accordions */ .single-product .sn-buy-form .variations th label, .single-product .sn-buy-form .reset_variations, .single-product .sn-buy-form .qty, .single-product .sn-buy-form .single_add_to_cart_button, .single-product .sn-buy-assurances span, .single-product .sn-product-accordions summary, .single-product .sn-variation-choices button{ font-family:'Hanken Grotesk',sans-serif!important; } /* 3d. .sn-tabs.body uses var(--display)!important — force Hanken */ .single-product .sn-tabs .body{ font-family:'Hanken Grotesk',sans-serif!important; } /* NOTE: .sn-buy-form .quantity:before/:after and .sn-box-check:after also name IBM Plex Mono / Syne, but they are pseudo-elements carrying glyphs (not text) — left untouched. */ /* --- 4. Reviews plugin (generic sans-serif / Helvetica) ------------- */ .cr-reviews-summary, .cr-reviews-summary .cr-summary-text, .cr-reviews-summary .cr-summary-stars, .cr-review .cr-review-title, .cr-review .cr-review-content, .cr-review .cr-review-author, .cr-review .cr-review-date, .cr-reviews-form .cr-form-title, .cr-reviews-form label, .cr-reviews-form input, .cr-reviews-form textarea, .cr-reviews-form button, .cr-reviews-load-more, .cr-reviews-pagination a, .cr-reviews-pagination span{ font-family:'Hanken Grotesk',sans-serif!important; } /* --- 5. Header chrome: black surfaces -> cream ---------------------- */ /* 5a. Theme header hairline (was 1px solid black) */ .sn-premium-header.sn-premium-header{ border-bottom:1px solid #e8e6e1!important; } /* 5b. Mega menu + Policies dropdown borders (were black) */ .sn-premium-maison-mega.sn-premium-maison-mega{ border-top:1px solid #e8e6e1!important; border-bottom:1px solid #e8e6e1!important; } .sn-premium-dropdown.sn-premium-dropdown{ border:1px solid #e8e6e1!important; } /* 5c. Search overlay: black (rgba(11,11,11,.98)) -> cream */ .sn-premium-search.sn-premium-search{ background:rgba(250,249,247,.98)!important; color:#151515!important; } .sn-premium-search.sn-premium-search .sn-premium-search-label{ font-family:'Hanken Grotesk',sans-serif!important; color:#151515!important; } .sn-premium-search.sn-premium-search .sn-premium-search-line{ border-bottom:1px solid #151515!important; } .sn-premium-search.sn-premium-search .sn-premium-search-line input{ color:#151515!important; } .sn-premium-search.sn-premium-search .sn-premium-search-line button{ color:#151515!important; } .sn-premium-search.sn-premium-search .sn-premium-search-tip{ color:#7c776e!important; } .sn-premium-search.sn-premium-search .sn-premium-search-close{ color:#151515!important; } /* 5d. Mobile menu: black full-screen (#0b0b0b) -> cream */ .sn-premium-mobile.sn-premium-mobile{ background:#faf9f7!important; color:#151515!important; } .sn-premium-mobile.sn-premium-mobile .sn-premium-logo{ color:#151515!important; } .sn-premium-mobile.sn-premium-mobile .sn-premium-mobile-close{ color:#151515!important; } .sn-premium-mobile.sn-premium-mobile a{ color:#151515!important; } .sn-premium-mobile.sn-premium-mobile .sn-premium-mobile-btn{ color:#151515!important; } .sn-premium-mobile.sn-premium-mobile .sn-premium-mobile-panel a{ color:#55524d!important; } .sn-premium-mobile.sn-premium-mobile .sn-premium-mobile-search{ color:#151515!important; } /* POLICIES DROPDOWN FIX — 11 Nov 2026: dropdown links must stay dark on the cream panel even when the header is transparent/unscrolled (white text) */ .sn-premium-header .sn-premium-dropdown a, .sn-premium-header .sn-premium-dropdown a:visited{color:#151515!important}