/* ===================================================================== 6 MUSHROOMS — APPLE-STYLE HEADER & FOOTER Slim frosted sticky nav + light multi-column footer directory. Targets the Beaver Themer header/footer without changing their markup. ===================================================================== */ /* ===================================================================== 6 MUSHROOMS DESIGN TOKENS - single source of truth for the whole site. chrome.css loads on every page, so every other stylesheet (shop.css, product.css, cart.css) inherits these. Never hardcode a colour in a page stylesheet - add it here or reuse a token. ===================================================================== */ :root{ /* --- type --- */ /* Nike's typeface is Helvetica Now (Monotype, paid licence). This stack asks for it first, so if a licence is ever bought you only need to add the @font-face block below and every page picks it up - nothing else changes. Until then it falls back to Helvetica Neue (every Mac/iPhone), Helvetica, then Arial on Windows: same grotesque skeleton, no webfont to download, so the site stays fast. */ --ap-font: "Helvetica Now Text", "Helvetica Now Display", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; /* --- text --- */ --ap-ink:#1d1b1f; /* headings, primary text */ --ap-ink-2:#46414c; /* secondary body copy */ --ap-mute:#6e6a73; /* labels, meta */ --ap-faint:#8b8792; /* captions, disabled */ /* --- lines & surfaces --- */ --ap-line:#e6e1e9; /* standard hairline */ --ap-line-soft:#f0ecf2; /* faint divider */ --ap-line-strong:#d8d3dd; /* input borders, stronger edge */ --ap-canvas:#fff; /* cards, page background */ --ap-surface:#faf9fb; /* barely-there fill */ --ap-parchment:#f6f4f8; /* tinted section / footer fill */ --ap-bar:rgba(255,255,255,.8); /* translucent sticky header */ --ap-footer:#f6f4f8; /* --- brand --- */ /* Lightened from #7d3c98. This is the lightest plum that still clears WCAG AA with white text (4.57:1 measured); #a666c2 and lighter fail at 3.96:1 and would make every button label hard to read. */ --ap-plum:#9d5ab9; --ap-plum-dark:#7d3c98; /* hover/pressed - the old base, now the darker state */ /* hover / pressed */ --ap-plum-deep:#480371; /* promo ribbon */ --ap-plum-tint:rgba(157,90,185,.14); /* --- BUTTON SYSTEM --- There is no lighter white-text plum: #9d5ab9 + white = 4.57:1 and the very next step (#a262bd) drops to 4.18 and fails. So to go lighter the LABEL has to flip. Primary is now a pale fill carrying a deep-plum label (6.22:1), with a structural border - the fill is only 2.21:1 against a white page and cannot delineate itself. */ /* Solid brand purple, white label, border matched to the fill. The previous pastel (#c6a1d8) under a much darker #7d3c98 ring read as a DISABLED control - a pale centre inside a hard dark outline is exactly the shape of an inactive button, which is why it looked wrong even though it measured 6.2:1. Flat saturated fill is the fix, not more lightness. */ --ap-btn-fill:#9d5ab9; /* the exact logo purple - 4.57:1 on white, clears AA */ --ap-btn-fill-h:#8f4bab; --ap-btn-fill-a:#7d3c98; --ap-btn-ink:#ffffff; --ap-btn-edge:#9d5ab9; /* == fill, so the primary reads as one solid shape */ --ap-btn-edge-h:#8f4bab; /* border follows the fill on hover, or it rings */ --ap-btn-line:#a76bc0; /* 3.81:1 - a control boundary needs 3:1 */ --ap-btn-wash:#f3e8f9; --ap-btn-wash-a:#e9d9f2; --ap-btn-off:#efe6f3; --ap-btn-off-ink:#6b4e77; --ap-btn-off-line:#dccbe6; /* focus ring, soft fill */ /* --- status --- */ --ap-gold:#c9962f; /* rating stars */ --ap-sale:#b5451d; /* sale price */ --ap-stock:#2f7d55; /* in stock */ /* --- dark aubergine surfaces (home page feature sections) --- */ --ap-dark:#3a1f3d; /* dark section ground */ --ap-dark-deep:#241326; /* deepest ground / video overlay */ --ap-dark-tile:#2c1730; /* cards sitting on a dark ground */ --ap-dark-edge:#4d2653; /* hairlines on dark */ --ap-dark-abyss:#150b17; /* deepest gradient stop */ --ap-plum-light:#c98be0; /* plum accent readable on dark */ --ap-mist:#cbb8d4; /* body copy on dark */ --ap-gold-light:#d8b673; /* gold accent on dark */ /* --- on dark / overlays --- */ --ap-on-dark:#fff; /* text on ink or plum fills */ --ap-on-dark-2:#f7f4f8; /* headings on aubergine */ --ap-on-dark-mute:#b4a7ba; /* muted copy on aubergine */ --ap-on-dark-soft:rgba(255,255,255,.6);/* secondary text on dark fills */ --ap-hairline-dark:rgba(255,255,255,.14); --ap-scrim:rgba(24,16,28,.8); /* badge over product imagery */ --ap-veil:rgba(20,10,24,.42); /* modal / drawer backdrop */ --ap-glass:rgba(255,255,255,.92); /* frosted sticky bars */ /* --- elevation --- */ --ap-shadow-sm:0 1px 2px rgba(20,10,24,.06); --ap-shadow-md:0 4px 16px rgba(20,10,24,.10); --ap-shadow-lg:0 18px 48px rgba(20,10,24,.16); --ap-shadow-drawer:0 0 60px rgba(20,6,24,.25); } /* ===================================================================== GLOBAL TYPOGRAPHY The theme skin hardcodes h1-h6 to "Libre Franklin" / #212121, and that font is dequeued - so every heading was falling back to plain Arial and an off-palette grey. Put the whole site on the Apple stack + ink token. font-family is forced (always safe); colour is NOT forced, so Beaver Builder modules that deliberately set light text on dark rows still win. ===================================================================== */ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, li, dt, dd, td, th, label, blockquote, figcaption, legend, input, select, textarea, button, a, .fl-heading, .fl-heading-text, .fl-rich-text, .pp-heading, .heading-title, .title-text, .fl-module-content, .menu a, .nav-main a, .pp-advanced-menu a, .fl-builder-content a{ font-family:var(--ap-font) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ color:var(--ap-ink); letter-spacing:-.02em; } body{ color:var(--ap-ink); } /* NOTE: icon fonts are deliberately NOT listed above. FontAwesome/dashicons set their own font-family via their own class rules, which beats the inherited text stack - do not add an override here or the glyphs break. */ /* ===================================================================== PALETTE NORMALISATION The parent theme ships its own brand colours that leak through on elements we don't own: #212121 nav text, #5b2a86 links/buttons, #2b7bb9 buttons, #ccc menu borders, #e6e6e6 table borders. Map every one of them onto the tokens so the site reads as one palette. ===================================================================== */ /* nav + menu links (PowerPack wraps submenu parents in an extra .pp-has-submenu-container, so this must be a descendant selector) */ .fl-builder-content .menu-item a, .fl-builder-content .pp-has-submenu-container > a, .fl-builder-content .menu-item-text, .fl-builder-content .pp-menu-toggle{ color:var(--ap-ink) !important; } /* the theme draws hairlines between menu items - we don't want boxes */ .fl-builder-content .menu-item, .fl-builder-content .menu li{ border-color:transparent !important; } /* WooCommerce buttons anywhere: same pill, same plum */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, a.checkout-button, a.wc-forward, .wc-proceed-to-checkout a.button{ background-color:var(--ap-plum) !important; color:var(--ap-on-dark) !important; border:0 !important; border-radius:9999px !important; text-shadow:none !important; box-shadow:none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, a.checkout-button:hover, .wc-proceed-to-checkout a.button:hover{ background-color:var(--ap-plum-dark) !important; } /* WooCommerce table hairlines */ .woocommerce table th, .woocommerce table td, .cart_totals table th, .cart_totals table td{ border-color:var(--ap-line) !important; } /* --------------------------------------------------------------------- ONE BUTTON COLOUR SITE-WIDE The brand uses the mushroom plum and nothing else - no black, no grey. This catches buttons on pages we don't hand-build (blog, about, contact, Gravity Forms, plugin UI) where the parent theme paints them #212121/grey. Scoped away from admin bar, Beaver Builder UI and the off-canvas toggle. ------------------------------------------------------------------- */ .fl-page button:not(.pp-offcanvas-close):not(.pp-menu-toggle):not(.sh-side-close):not([class*="dgwt-wcas"]):not(.pp-rf-toggle-pw):not(.show-password-input), .fl-page input[type="submit"], .fl-page input[type="button"], .fl-page .fl-button, .fl-page a.fl-button, .fl-page .gform_button, .fl-page .wp-block-button__link{ background-color:var(--ap-plum) !important; background-image:none !important; color:var(--ap-on-dark) !important; border-color:var(--ap-plum) !important; text-shadow:none !important; transition:background-color .2s ease, transform .15s ease; } .fl-page button:not(.pp-offcanvas-close):not(.pp-menu-toggle):not(.sh-side-close):not([class*="dgwt-wcas"]):not(.pp-rf-toggle-pw):not(.show-password-input):hover, .fl-page input[type="submit"]:hover, .fl-page .fl-button:hover, .fl-page a.fl-button:hover, .fl-page .gform_button:hover, .fl-page .wp-block-button__link:hover{ background-color:var(--ap-plum-dark) !important; color:var(--ap-on-dark) !important; transform:translateY(-1px); } .fl-page button:active, .fl-page input[type="submit"]:active, .fl-page .fl-button:active{ transform:translateY(0); } /* our own hand-built secondary buttons opt out - they are a plum OUTLINE */ .fl-page .ct-btn--quiet, .fl-page .sh-filter-btn, .fl-page .woocommerce-mini-cart__buttons a:not(.checkout){ background-color:var(--ap-canvas) !important; color:var(--ap-plum) !important; border-color:var(--ap-plum) !important; } .fl-page .ct-btn--quiet:hover, .fl-page .sh-filter-btn:hover, .fl-page .woocommerce-mini-cart__buttons a:not(.checkout):hover{ background-color:var(--ap-plum-tint) !important; color:var(--ap-plum) !important; } /* ---------- SHIPPING RIBBON: slim Apple announcement bar ---------- */ .shipping-notice{ background:var(--ap-parchment) !important; color:var(--ap-ink) !important; font-weight:400 !important; font-size:13px !important; letter-spacing:-.01em !important; padding:9px 16px !important; border-bottom:1px solid var(--ap-line); } /* ---------- HEADER: exact Apple globalnav spec ---------- Measured from apple.com: 44px bar, rgba(255,255,255,.8), saturate(1.8) blur(20px), 1024px content, flex space-between. */ .fl-builder-content[data-type="header"]{ background:var(--ap-bar) !important; -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); border-bottom:1px solid var(--ap-line); /* the header was position:static, so positioned page sections (the hero) painted OVER the dropdown. Make it a sticky layer above all content. */ position:sticky !important; top:0 !important; z-index:1000 !important; } /* the promo ribbon scrolls away (Apple pattern) so the nav owns the top edge */ .shipping-notice{ position:static !important; } /* collapse the tall row to Apple's 44px bar */ .fl-builder-content[data-type="header"] .fl-row-content-wrap{ padding-top:0 !important; padding-bottom:0 !important; } .fl-builder-content[data-type="header"] .fl-module{ margin-bottom:0 !important; } /* header container matches the page content container exactly, so the logo lines up with the page heading and the icons sit flush with the grid edge */ .fl-builder-content[data-type="header"] .fl-row-content{ max-width:1280px !important; margin-inline:auto !important; padding-inline:clamp(20px,4vw,48px) !important; box-sizing:border-box !important; } .fl-builder-content[data-type="header"] .fl-row-content-wrap{ padding-inline:0 !important; } /* push the icon cluster to the far right edge */ .fl-builder-content[data-type="header"] .fl-col:last-child, .fl-builder-content[data-type="header"] .fl-col:has(.header-icons), .fl-builder-content[data-type="header"] .fl-col:has(.burger-container){ margin-left:auto !important; } .header-icons, .fl-builder-content[data-type="header"] .burger-container{ justify-content:flex-end !important; margin-right:0 !important; } /* distribute logo · nav · search · cart evenly across the bar */ .fl-builder-content[data-type="header"] .fl-col-group{ display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; min-height:44px !important; } .fl-builder-content[data-type="header"] .fl-col{ width:auto !important; flex:0 0 auto !important; min-height:0 !important; } .fl-builder-content[data-type="header"] .fl-col:nth-child(2){ flex:1 1 auto !important; } /* the menu module was only 374px inside a 634px column, so the links bunched to one side — stretch every wrapper so space-between can work */ .fl-builder-content[data-type="header"] .nav-main, .fl-builder-content[data-type="header"] .nav-main .fl-module-content, .fl-builder-content[data-type="header"] .pp-advanced-menu, .fl-builder-content[data-type="header"] .pp-menu-nav{ width:100% !important; max-width:none !important; flex:1 1 auto !important; } /* logo column hugs its logo instead of reserving 240px, with no inset so the logo starts exactly on the page content's left edge */ .fl-builder-content[data-type="header"] .fl-col:first-child{ flex:0 0 auto !important; width:auto !important; padding-left:0 !important; margin-left:0 !important; } .fl-builder-content[data-type="header"] .fl-col:first-child .fl-col-content, .fl-builder-content[data-type="header"] .fl-col:first-child .fl-module, .fl-builder-content[data-type="header"] .fl-col:first-child .fl-module-content, .fl-builder-content[data-type="header"] .fl-col:first-child .fl-photo, .fl-builder-content[data-type="header"] .fl-col:first-child .fl-photo-content{ width:auto !important; padding-left:0 !important; margin-left:0 !important; } .fl-builder-content[data-type="header"] .fl-col-content{ display:flex !important; align-items:center !important; min-height:44px !important; padding:0 !important; } /* every header module collapses to the 44px bar */ .fl-builder-content[data-type="header"] .fl-module, .fl-builder-content[data-type="header"] .fl-module-content, .fl-builder-content[data-type="header"] .pp-advanced-menu, .fl-builder-content[data-type="header"] .pp-menu-nav, .fl-builder-content[data-type="header"] .fl-photo, .fl-builder-content[data-type="header"] .fl-photo-content{ height:44px !important; min-height:0 !important; line-height:normal !important; display:flex !important; align-items:center !important; } .nav-main .menu{ height:44px !important; } /* logo at Apple's small scale (explicit height — SVG has no intrinsic size) */ .fl-builder-content[data-type="header"] .fl-photo-img, .fl-builder-content[data-type="header"] .fl-logo-img{ height:26px !important; max-height:26px !important; width:auto !important; max-width:none !important; display:block !important; } /* nav links — Apple's exact values: 12px / 400 / rgba(0,0,0,.8) / -0.12px / 0 8px */ .nav-main .menu > li > a, .nav-main .menu-item > a, .nav-main .pp-has-submenu-container > a{ font-size:12px !important; font-weight:400 !important; letter-spacing:-.12px !important; color:var(--ap-ink) !important; opacity:1 !important; padding:0 8px !important; height:44px !important; display:flex !important; align-items:center !important; text-transform:none !important; transition:color .2s ease; } .nav-main .menu > li > a:hover, .nav-main .pp-has-submenu-container > a:hover{ color:var(--ap-plum) !important; } /* kill any inherited uppercase/bold on the top-level labels (e.g. "SHOP") */ .nav-main .menu > li > a .menu-item-text, .nav-main .pp-has-submenu-container > a .menu-item-text{ font-size:12px !important; font-weight:400 !important; text-transform:none !important; letter-spacing:-.12px !important; } /* Apple distributes the items evenly across the bar */ .nav-main .menu{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; gap:19px !important; padding:0 !important; margin:0 !important; } .nav-main .menu > li{ border:0 !important; } .nav-main .pp-has-submenu-container{ display:flex !important; align-items:center !important; } /* no chevron — Apple's nav has no dropdown arrows */ .nav-main .pp-menu-toggle, .nav-main .pp-has-submenu-container > .pp-menu-toggle{ display:none !important; } /* GUARANTEE the mega panel opens on hover/focus (PowerPack toggles visibility+opacity; make our own rule authoritative) */ .nav-main .pp-has-submenu > .sub-menu{ visibility:hidden; opacity:0; transition:opacity .22s ease, visibility .22s ease; pointer-events:none; } .nav-main .pp-has-submenu:hover > .sub-menu, .nav-main .pp-has-submenu:focus-within > .sub-menu, .nav-main .pp-has-submenu.pp-active > .sub-menu{ visibility:visible !important; opacity:1 !important; pointer-events:auto; } /* ---------- RIGHT CLUSTER: search · bag · account as icons ---------- */ .fl-builder-content[data-type="header"] .fl-col:has(.header-icons){ flex:0 0 auto !important; width:auto !important; min-width:150px !important; } .fl-builder-content[data-type="header"] .fl-col:has(.header-icons) .fl-col-content{ flex-direction:row !important; justify-content:flex-end !important; } .header-icons{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:6px !important; justify-content:flex-end !important; width:auto !important; } /* turn the Cart + Login text into Apple-style icon buttons */ .header-icons .flyout-cart, .header-icons .login{ position:relative; width:36px !important; height:44px !important; flex:0 0 36px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden; } /* hide the "Cart" / "Login" labels - but NOT the count badge */ .header-icons .flyout-cart *:not(.six-cart-count), .header-icons .login *{ font-size:0 !important; color:transparent !important; line-height:0 !important; } .header-icons .flyout-cart a, .header-icons .login a{ display:block !important; width:36px !important; height:44px !important; } .header-icons .flyout-cart::after, .header-icons .login::after{ content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:19px 19px; opacity:.82; transition:opacity .2s ease; pointer-events:none; } .header-icons .flyout-cart:hover::after, .header-icons .login:hover::after{ opacity:1; } /* shopping bag */ .header-icons .flyout-cart::after{ background-image:url("data:image/svg+xml;utf8,"); } /* account */ .header-icons .login::after{ background-image:url("data:image/svg+xml;utf8,"); } /* ---------- APPLE MEGA-MENU DROPDOWN ---------- Full-width white panel anchored under the nav bar, content centered, large semibold links in column one — Apple's exact pattern. */ /* anchor the dropdown to the FULL-WIDTH row wrapper, not the inner 1024px column */ .fl-builder-content[data-type="header"] .fl-row-content-wrap{ position:relative !important; } .fl-builder-content[data-type="header"] .fl-row-content, .fl-builder-content[data-type="header"] .fl-col-group, .fl-builder-content[data-type="header"] .pp-advanced-menu, .fl-builder-content[data-type="header"] .pp-menu-nav{ position:static !important; } /* Beaver Builder puts an identity transform on columns/modules, which creates a containing block and traps the dropdown. Clear it so the panel can go full-bleed. */ .fl-builder-content[data-type="header"] .fl-col, .fl-builder-content[data-type="header"] .fl-col-content, .fl-builder-content[data-type="header"] .fl-module, .fl-builder-content[data-type="header"] .fl-module-content, .fl-builder-content[data-type="header"] .pp-advanced-menu{ transform:none !important; } .nav-main, .nav-main .menu, .nav-main .pp-has-submenu, .nav-main .menu-item{ position:static !important; } .nav-main .pp-has-submenu .sub-menu{ position:absolute !important; top:100% !important; left:0 !important; right:auto !important; /* width + margin-left are set inline by JS so the panel spans the viewport; no !important here or the inline alignment would be overridden. The fallback is 100%, never 100vw - 100vw includes the vertical scrollbar and made the hidden panel force a horizontal scrollbar site-wide. */ width:100%; min-width:0 !important; margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; /* content centered to Apple's 1024px column inside a full-bleed panel (100vw, not 100%, because % resolves against the offset parent) */ padding:54px max(24px, calc((100% - 1024px) / 2)) 64px !important; /* two labelled columns, Apple-style */ display:grid !important; grid-template-columns:repeat(2, minmax(0, 300px)) !important; column-gap:64px !important; row-gap:0 !important; align-content:start !important; list-style:none !important; z-index:999 !important; } /* explicit placement so each group owns a column and stacks from the top */ .nav-main .sub-menu .six-col-1{ grid-column:1 !important; } .nav-main .sub-menu .six-col-2{ grid-column:2 !important; } .nav-main .sub-menu .six-row-1{ grid-row:1 !important; } .nav-main .sub-menu .six-row-2{ grid-row:2 !important; } .nav-main .sub-menu .six-row-3{ grid-row:3 !important; } .nav-main .sub-menu .six-row-4{ grid-row:4 !important; } .nav-main .sub-menu .six-row-5{ grid-row:5 !important; } .nav-main .sub-menu .six-row-6{ grid-row:6 !important; } .nav-main .sub-menu .six-row-7{ grid-row:7 !important; } .nav-main .sub-menu .six-row-8{ grid-row:8 !important; } .nav-main .sub-menu .six-row-9{ grid-row:9 !important; } .nav-main .sub-menu .six-row-10{ grid-row:10 !important; } .nav-main .sub-menu .six-row-11{ grid-row:11 !important; } .nav-main .sub-menu .six-row-12{ grid-row:12 !important; } /* small grey group heading */ .nav-main .sub-menu .six-mega-head > a, .nav-main .sub-menu .six-mega-head .menu-item-text{ font-size:12px !important; font-weight:700 !important; color:var(--ap-mute) !important; letter-spacing:-.01em !important; line-height:1.3 !important; padding:0 0 10px !important; cursor:default; } .nav-main .sub-menu .six-mega-head > a:hover{ color:var(--ap-mute) !important; } /* (group headings are real menu items generated in functions.php) */ /* full-bleed white backdrop behind the 1024px content column (Apple's pattern) */ .nav-main .pp-has-submenu .sub-menu::before{ content:""; position:absolute; /* the panel is already exactly the viewport content width, so the backdrop just fills it - no 100vw (scrollbar) maths needed */ top:0; bottom:0; left:0; right:0; transform:none; background:var(--ap-canvas); border-top:1px solid var(--ap-line); box-shadow:var(--ap-shadow-lg); z-index:-1; } .nav-main .pp-has-submenu .sub-menu > li{ border:0 !important; background:none !important; margin:0 !important; padding:0 !important; width:auto !important; display:block !important; float:none !important; } /* submenu items must NOT inherit the 44px top-level bar height */ .nav-main .sub-menu, .nav-main .sub-menu li, .nav-main .sub-menu .menu-item, .nav-main .sub-menu .menu-item > a, .nav-main .sub-menu a{ height:auto !important; min-height:0 !important; max-height:none !important; } /* no category icons — Apple's mega-menu is pure typography */ .nav-main .sub-menu a::before, .nav-main .sub-menu img, .nav-main .sub-menu .menu-item > a > img{ display:none !important; content:none !important; } /* big Apple-style stacked links */ .nav-main .sub-menu a{ display:block !important; font-size:20px !important; font-weight:700 !important; letter-spacing:-.018em !important; line-height:1.6 !important; color:var(--ap-ink) !important; opacity:1 !important; padding:2px 0 !important; background:none !important; border-radius:0 !important; transition:color .18s ease; } .nav-main .sub-menu a:hover{ color:var(--ap-plum) !important; background:none !important; } .nav-main .sub-menu .menu-item-text{ display:block !important; font-size:20px !important; font-weight:700 !important; letter-spacing:-.018em !important; line-height:1.6 !important; } /* theme injects a description via .menu-item-text::after — Apple's menu has none, so remove it for the clean typographic look */ .nav-main .sub-menu .menu-item-text::after, .nav-main .sub-menu a::after, .nav-main .sub-menu .menu-item-desc, .nav-main .sub-menu .menu-item-description{ content:none !important; display:none !important; } @media(max-width:900px){ .nav-main .pp-has-submenu .sub-menu{ position:static !important; width:auto !important; padding:8px 0 !important; grid-template-columns:1fr; box-shadow:none !important; } .nav-main .sub-menu a, .nav-main .sub-menu .menu-item-text{ font-size:17px !important; } } /* search: Apple shows only a magnifier — collapse to an icon, expand on focus */ .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp{ width:36px !important; max-width:36px !important; min-width:0 !important; flex:0 0 36px !important; margin:0 !important; background:transparent !important; box-shadow:none !important; transition:width .3s cubic-bezier(.16,1,.3,1), max-width .3s cubic-bezier(.16,1,.3,1), flex-basis .3s cubic-bezier(.16,1,.3,1); } /* strip the plugin's white pill/shadow so only the magnifier shows */ .fl-builder-content[data-type="header"] .dgwt-wcas-search-form, .fl-builder-content[data-type="header"] .dgwt-wcas-sf-wrapp{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within, .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open{ width:260px !important; max-width:260px !important; flex:0 0 260px !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within{ width:260px !important; max-width:260px !important; } .fl-builder-content[data-type="header"] .header-icons .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input, .fl-builder-content[data-type="header"] input.dgwt-wcas-search-input{ width:36px !important; min-width:0 !important; max-width:100% !important; height:30px !important; font-size:12px !important; border-radius:8px !important; background:transparent !important; background-color:transparent !important; background-image:none !important; border:1px solid transparent !important; box-shadow:none !important; padding:0 0 0 30px !important; color:transparent !important; cursor:pointer; transition:background-color .25s ease, color .25s ease, border-color .25s ease, width .3s cubic-bezier(.16,1,.3,1); } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within input.dgwt-wcas-search-input, .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open input.dgwt-wcas-search-input{ width:260px !important; background-color:var(--ap-parchment) !important; border-color:var(--ap-line) !important; color:var(--ap-ink) !important; cursor:text !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open input.dgwt-wcas-search-input::placeholder{ color:var(--ap-faint) !important; } /* once open the magnifier must not block typing */ .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within .dgwt-wcas-search-submit, .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open .dgwt-wcas-search-submit{ pointer-events:none; } /* FiboSearch results dropdown */ .fl-builder-content[data-type="header"] .dgwt-wcas-suggestions-wrapp{ border-radius:12px !important; border:1px solid var(--ap-line) !important; box-shadow:var(--ap-shadow-lg) !important; margin-top:6px !important; z-index:1001 !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-input::placeholder{ color:transparent !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within .dgwt-wcas-search-input{ background:var(--ap-parchment) !important; border-color:var(--ap-line) !important; color:var(--ap-ink) !important; cursor:text; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within .dgwt-wcas-search-input::placeholder{ color:var(--ap-faint) !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-voice-search, .fl-builder-content[data-type="header"] .dgwt-wcas-preloader{ display:none !important; } /* keep the submit button — it holds the magnifier SVG — as an icon overlay */ .fl-builder-content[data-type="header"] .dgwt-wcas-search-submit{ display:flex !important; align-items:center !important; justify-content:center !important; position:absolute !important; left:0 !important; top:0 !important; width:36px !important; height:30px !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; cursor:pointer; z-index:2; } .fl-builder-content[data-type="header"] .dgwt-wcas-ico-magnifier{ display:block !important; width:16px !important; height:16px !important; position:static !important; opacity:.85; fill:var(--ap-ink) !important; color:var(--ap-ink) !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-ico-magnifier path{ fill:var(--ap-ink) !important; } /* cart / login links */ .fl-builder-content[data-type="header"] a[href*="cart"], .fl-builder-content[data-type="header"] a[href*="account"], .fl-builder-content[data-type="header"] a[href*="login"]{ font-size:12px !important; color:var(--ap-ink) !important; opacity:.88; } /* ===================================================================== CART COUNT BADGE on the header bag icon ===================================================================== */ .header-icons .flyout-cart, .burger-container .flyout-cart{ position:relative !important; } .six-cart-count{ position:absolute; /* the bag glyph is a 19px SVG centred in a 36x44 hit area - sit the badge on the glyph's top-right corner, not floating above the whole box */ top:9px; right:4px; min-width:15px; height:15px; padding:0 4px; display:none; /* shown only when the cart has items */ align-items:center; justify-content:center; border-radius:9999px; background:var(--ap-plum) !important; color:var(--ap-on-dark) !important; font-family:var(--ap-font) !important; font-size:10px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:0; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--ap-canvas); pointer-events:none; } .flyout-cart.has-items .six-cart-count{ display:flex; } /* the mobile bag is a 20x20 box, not 36x44 - re-anchor the badge to its corner */ @media(max-width:980px){ .burger-container .flyout-cart .six-cart-count{ top:-5px; right:-6px; min-width:14px; height:14px; padding:0 3px; font-size:9px !important; } } /* ===================================================================== SLIDE-OUT CART PANEL - matched to the site design system ===================================================================== */ .pp-offcanvas-content .pp-offcanvas-content-inner{ padding:20px 22px 28px !important; } /* the panel is authored at 450px, which is wider than a phone - cap it */ @media(max-width:520px){ .pp-offcanvas-content{ width:min(88vw, 400px) !important; } .pp-offcanvas-content .pp-offcanvas-content-inner{ padding:16px 18px 24px !important; } } /* the drawer holds a Beaver Builder layout - strip its chrome so the mini cart fills the panel instead of sitting in a 40px-narrower inner box */ .pp-offcanvas-content .fl-builder-content, .pp-offcanvas-content .fl-row, .pp-offcanvas-content .fl-row-content-wrap, .pp-offcanvas-content .fl-row-content, .pp-offcanvas-content .fl-col-group, .pp-offcanvas-content .fl-col, .pp-offcanvas-content .fl-col-content, .pp-offcanvas-content .fl-module, .pp-offcanvas-content .fl-module-content, .pp-offcanvas-content .fl-widget, .pp-offcanvas-content .widget{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; width:100% !important; max-width:none !important; background:none !important; float:none !important; } .pp-offcanvas-content .fl-module{ margin-bottom:0 !important; } /* small, left-aligned panel title (was 27px) + drop the purple separator */ .pp-offcanvas-content .fl-module-pp-heading{ margin-bottom:14px !important; padding-bottom:12px !important; border-bottom:1px solid var(--ap-line); } .pp-offcanvas-content .heading-title, .pp-offcanvas-content h4.heading-title{ margin:0 !important; padding:0 !important; text-align:left !important; } .pp-offcanvas-content .pp-heading-separator, .pp-offcanvas-content .pp-separator-line{ display:none !important; } .pp-offcanvas-content .title-text, .pp-offcanvas-content .pp-primary-title, .pp-offcanvas-content h4.heading-title .title-text{ font-size:17px !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.3 !important; color:var(--ap-ink) !important; text-align:left !important; } /* close button */ .pp-offcanvas-content .pp-offcanvas-close{ padding:14px 18px 0 !important; } .pp-offcanvas-content .pp-offcanvas-close .fa-times{ font-size:18px !important; color:var(--ap-mute) !important; } /* cart lines inside the drawer */ .pp-offcanvas-content .woocommerce-mini-cart, .pp-offcanvas-content ul.cart_list{ margin:0 !important; padding:0 !important; list-style:none !important; } /* Woo's markup is:
  • xName1 x $15
    • The image lives INSIDE the name link, so lay that link out as a flex row and indent the quantity so it lines up under the name. */ /* A grid, not absolute positioning: WooCommerce's a.remove is an inline anchor whose used width during layout differed from its painted width, so right:0 let the x hang past the row. Grid columns can't drift. */ .pp-offcanvas-content ul.cart_list li{ display:grid !important; grid-template-columns:minmax(0,1fr) 24px; grid-template-areas:"main remove" "qty remove"; column-gap:10px; row-gap:5px; align-items:center; padding:14px 0 !important; margin:0 !important; border-bottom:1px solid var(--ap-line-soft); font-size:14px !important; line-height:1.4 !important; } .pp-offcanvas-content ul.cart_list li:last-of-type{ border-bottom:0; } .pp-offcanvas-content ul.cart_list li > a:not(.remove){ grid-area:main; display:flex !important; align-items:center; gap:12px; font-size:14.5px !important; font-weight:700 !important; color:var(--ap-ink) !important; letter-spacing:-.012em; text-decoration:none; line-height:1.35; } .pp-offcanvas-content ul.cart_list li > a:not(.remove):hover{ color:var(--ap-plum) !important; } .pp-offcanvas-content ul.cart_list li img{ width:56px !important; height:56px !important; flex:0 0 56px; object-fit:cover; border-radius:10px; background:var(--ap-parchment); margin:0 !important; float:none !important; } /* quantity on its own row, indented to the name's left edge (56 thumb + 12 gap) */ .pp-offcanvas-content ul.cart_list li .quantity{ grid-area:qty; display:block !important; margin:0 0 0 68px !important; font-size:13px !important; color:var(--ap-mute) !important; font-weight:400 !important; } /* ---- REMOVE BUTTON ---- The theme paints this as a filled #480371 circle with a low-contrast glyph. Reset it completely: a quiet grey x that only fills on hover. */ .pp-offcanvas-content ul.cart_list li a.remove, .pp-offcanvas-content ul.cart_list li a.remove_from_cart_button{ grid-area:remove; position:static !important; top:auto !important; right:auto !important; align-self:center; justify-self:end; width:24px !important; height:24px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; background:none !important; background-color:transparent !important; background-image:none !important; border:0 !important; border-radius:50% !important; box-shadow:none !important; font-size:18px !important; font-weight:400 !important; line-height:1 !important; color:var(--ap-faint) !important; text-decoration:none !important; transition:background-color .18s ease, color .18s ease; } .pp-offcanvas-content ul.cart_list li a.remove:hover, .pp-offcanvas-content ul.cart_list li a.remove_from_cart_button:hover{ background-color:var(--ap-plum-tint) !important; color:var(--ap-plum) !important; } /* subtotal + buttons */ .pp-offcanvas-content .woocommerce-mini-cart__total{ display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 !important; padding:14px 0 0 !important; border:0 !important; border-top:1px solid var(--ap-line) !important; font-size:15px !important; } .pp-offcanvas-content .woocommerce-mini-cart__total strong{ font-weight:400 !important; color:var(--ap-mute) !important; } .pp-offcanvas-content .woocommerce-mini-cart__total .amount{ font-size:18px !important; font-weight:700 !important; color:var(--ap-ink) !important; } .pp-offcanvas-content .woocommerce-mini-cart__buttons{ display:flex !important; flex-direction:column; gap:9px; margin:0 !important; } .pp-offcanvas-content .woocommerce-mini-cart__buttons a{ display:flex !important; align-items:center; justify-content:center; width:100% !important; box-sizing:border-box !important; min-height:46px; padding:12px 20px !important; border-radius:9999px !important; font-size:15px !important; font-weight:700 !important; letter-spacing:-.012em; text-decoration:none; /* secondary = plum outline, never grey - the brand uses one colour only */ background:var(--ap-canvas) !important; color:var(--ap-plum) !important; border:1px solid var(--ap-plum) !important; transition:background-color .2s ease, transform .15s ease; } .pp-offcanvas-content .woocommerce-mini-cart__buttons a:hover{ background:var(--ap-plum-tint) !important; transform:translateY(-1px); } .pp-offcanvas-content .woocommerce-mini-cart__buttons a.checkout{ background:var(--ap-plum) !important; color:var(--ap-on-dark) !important; border-color:var(--ap-plum) !important; } .pp-offcanvas-content .woocommerce-mini-cart__buttons a.checkout:hover{ background:var(--ap-plum-dark) !important; } .pp-offcanvas-content .woocommerce-mini-cart__buttons a:active{ transform:translateY(0); } .pp-offcanvas-content .woocommerce-mini-cart__empty-message{ font-size:14.5px !important; color:var(--ap-mute) !important; padding:18px 0 !important; } /* ---------- FOOTER: Apple directory ---------- */ .fl-builder-content[data-type="footer"]{ background:var(--ap-footer) !important; color:var(--ap-mute) !important; border-top:1px solid var(--ap-line); font-size:12px; } /* the footer rows paint their own purple (a 120deg gradient + a solid #480371). Clear both so the Apple #f5f5f7 ground shows through. */ .fl-builder-content[data-type="footer"] .fl-row, .fl-builder-content[data-type="footer"] .fl-row-content-wrap, .fl-builder-content[data-type="footer"] .fl-col, .fl-builder-content[data-type="footer"] .fl-col-content{ background-image:none !important; background-color:transparent !important; } .fl-builder-content[data-type="footer"] .fl-row-content{ max-width:1024px !important; margin-inline:auto !important; } /* main link directory row */ .fl-builder-content[data-type="footer"] .fl-row:first-child .fl-row-content-wrap{ padding-top:40px !important; padding-bottom:22px !important; } /* columns spread evenly like Apple's directory */ .fl-builder-content[data-type="footer"] .fl-col-group{ display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; gap:0 40px !important; } .fl-builder-content[data-type="footer"] .fl-col{ flex:1 1 200px !important; width:auto !important; min-height:0 !important; } .fl-builder-content[data-type="footer"] .fl-module{ margin-bottom:8px !important; } /* hidden off-canvas panels must not add empty vertical space */ .fl-builder-content[data-type="footer"] .fl-module-pp-offcanvas-content{ margin:0 !important; padding:0 !important; height:0 !important; } /* tighten the directory: no stray separators, Apple's compact rhythm */ .fl-builder-content[data-type="footer"] .nav-footer a, .fl-builder-content[data-type="footer"] .menu-item > a{ border-left:0 !important; padding-left:0 !important; padding-right:0 !important; line-height:1.8 !important; } .fl-builder-content[data-type="footer"] .fl-row:first-child li{ margin:0 !important; } /* kill the icon-font glyph that renders as a small box before each link (the theme sets a FontAwesome codepoint; our font override turns it to tofu) */ .fl-builder-content[data-type="footer"] li > a::before, .fl-builder-content[data-type="footer"] li > a::after, .fl-builder-content[data-type="footer"] .menu-item > a::before, .fl-builder-content[data-type="footer"] .menu-item-text::before, .fl-builder-content[data-type="footer"] .nav-footer a::before{ content:none !important; display:none !important; } .fl-builder-content[data-type="footer"] .fl-rich-text p{ margin:0 0 8px !important; } .fl-builder-content[data-type="footer"] .fl-heading{ margin-bottom:6px !important; } /* column headings — tiny, bold, dark */ .fl-builder-content[data-type="footer"] h1, .fl-builder-content[data-type="footer"] h2, .fl-builder-content[data-type="footer"] h3, .fl-builder-content[data-type="footer"] h4, .fl-builder-content[data-type="footer"] .fl-heading-text{ font-size:12px !important; font-weight:700 !important; color:var(--ap-ink) !important; letter-spacing:-.01em !important; margin-bottom:10px !important; text-transform:none !important; } /* footer links — small, grey, tight rhythm */ .fl-builder-content[data-type="footer"] a, .nav-footer .menu-item > a{ font-size:12px !important; font-weight:400 !important; color:var(--ap-mute) !important; letter-spacing:-.01em !important; line-height:1.9 !important; text-decoration:none !important; padding:2px 0 !important; transition:color .2s ease; } .fl-builder-content[data-type="footer"] a:hover, .nav-footer .menu-item > a:hover{ color:var(--ap-ink) !important; text-decoration:underline !important; } .nav-footer .menu{ display:flex !important; flex-direction:column !important; gap:0 !important; } .nav-footer .menu-item{ border:0 !important; } /* body copy + fine print */ .fl-builder-content[data-type="footer"] p, .fl-builder-content[data-type="footer"] .fl-rich-text{ font-size:12px !important; line-height:1.6 !important; color:var(--ap-mute) !important; } /* white logo sits on a light footer now → keep it visible */ .fl-builder-content[data-type="footer"] .fl-photo-img{ max-height:26px !important; width:auto !important; filter:brightness(0) saturate(100%) invert(13%) sepia(9%) saturate(690%) hue-rotate(232deg) brightness(96%) contrast(88%); } /* payment badge stays natural */ .fl-builder-content[data-type="footer"] img[src*="cp-interac"]{ filter:none !important; max-height:24px !important; } /* social links sit inline as small quiet text */ .fl-builder-content[data-type="footer"] .fl-social-icons, .fl-builder-content[data-type="footer"] .fl-icon-group{ display:flex !important; gap:14px !important; flex-wrap:wrap; margin-top:6px; } .fl-builder-content[data-type="footer"] .fl-icon i, .fl-builder-content[data-type="footer"] .fl-icon a{ color:var(--ap-mute) !important; font-size:15px !important; } .fl-builder-content[data-type="footer"] .fl-icon a:hover i{ color:var(--ap-ink) !important; } /* ---- bottom legal bar: hairline + 12px grey, Apple's closing row ---- */ .fl-builder-content[data-type="footer"] .fl-row:last-child .fl-row-content-wrap{ border-top:1px solid var(--ap-line); padding-top:17px !important; padding-bottom:22px !important; } .fl-builder-content[data-type="footer"] .fl-row:last-child, .fl-builder-content[data-type="footer"] .fl-row:last-child p, .fl-builder-content[data-type="footer"] .fl-row:last-child .fl-rich-text{ font-size:12px !important; line-height:1.5 !important; color:var(--ap-mute) !important; letter-spacing:-.01em !important; } /* legal links separated by hairline dividers, exactly like Apple */ .fl-builder-content[data-type="footer"] .fl-row:last-child a{ color:var(--ap-mute) !important; padding:0 11px !important; border-left:1px solid var(--ap-line); line-height:1 !important; } .fl-builder-content[data-type="footer"] .fl-row:last-child a:first-of-type{ border-left:0; padding-left:11px !important; } .fl-builder-content[data-type="footer"] .fl-row:last-child a:hover{ color:var(--ap-ink) !important; text-decoration:underline !important; } /* ===================================================================== RESPONSIVE — header, mega-menu and footer across all devices ===================================================================== */ /* --- tablet and below: mega-menu becomes a simple stacked list --- */ @media(max-width:900px){ .nav-main .pp-has-submenu .sub-menu{ position:static !important; width:auto !important; margin-left:0 !important; padding:6px 0 10px 12px !important; display:block !important; box-shadow:none !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } .nav-main .pp-has-submenu .sub-menu::before{ display:none !important; } .nav-main .sub-menu a, .nav-main .sub-menu .menu-item-text{ font-size:16px !important; line-height:1.9 !important; } .nav-main .sub-menu .six-mega-head > a, .nav-main .sub-menu .six-mega-head .menu-item-text{ font-size:11px !important; padding-bottom:2px !important; } .nav-main .sub-menu .six-col-1, .nav-main .sub-menu .six-col-2{ grid-column:auto !important; } .nav-main .sub-menu [class*="six-row-"]{ grid-row:auto !important; } /* header: logo + icons only, menu handled by the mobile toggle */ .fl-builder-content[data-type="header"] .fl-col-group{ flex-wrap:nowrap !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp{ flex:0 0 36px !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within, .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open{ width:170px !important; max-width:170px !important; flex:0 0 170px !important; } .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp.six-search-open input.dgwt-wcas-search-input, .fl-builder-content[data-type="header"] .dgwt-wcas-search-wrapp:focus-within input.dgwt-wcas-search-input{ width:170px !important; } /* footer: stack the directory columns */ .fl-builder-content[data-type="footer"] .fl-col-group{ gap:0 24px !important; } .fl-builder-content[data-type="footer"] .fl-col{ flex:1 1 240px !important; } .fl-builder-content[data-type="footer"] .fl-row:first-child .fl-row-content-wrap{ padding-top:30px !important; padding-bottom:14px !important; } } /* --- phones --- */ @media(max-width:600px){ .fl-builder-content[data-type="footer"] .fl-col-group{ flex-direction:column !important; gap:22px 0 !important; } .fl-builder-content[data-type="footer"] .fl-col{ flex:1 1 100% !important; width:100% !important; } .fl-builder-content[data-type="footer"] .fl-row:last-child a{ display:inline-block; border-left:0 !important; padding:0 8px !important; } .fl-builder-content[data-type="footer"] .fl-row:last-child .fl-row-content-wrap{ padding-top:14px !important; padding-bottom:18px !important; text-align:center; } .fl-builder-content[data-type="header"] .fl-photo-img{ height:22px !important; } .header-icons{ gap:2px !important; } } /* ===================================================================== MOBILE HEADER + FOOTER polish ===================================================================== */ @media(max-width:980px){ /* logo smaller, hamburger small and pinned right */ .fl-builder-content[data-type="header"] .fl-photo-img, .fl-builder-content[data-type="header"] .fl-logo-img{ height:22px !important; } .fl-builder-content[data-type="header"] .fl-row-content-wrap{ padding-inline:16px !important; } .fl-builder-content[data-type="header"] .fl-col-group{ align-items:center !important; } /* the off-canvas / mobile menu toggle */ .pp-offcanvas-toggle, .pp-advanced-menu-mobile-toggle, .fl-builder-content[data-type="header"] .pp-hamburger, .fl-builder-content[data-type="header"] .pp-menu-toggle-wrap{ margin-left:auto !important; transform:scale(.72); transform-origin:right center; } .fl-builder-content[data-type="header"] .pp-hamburger-inner, .fl-builder-content[data-type="header"] .pp-hamburger-inner::before, .fl-builder-content[data-type="header"] .pp-hamburger-inner::after{ height:2px !important; background-color:var(--ap-ink) !important; } /* off-canvas panel type */ .pp-offcanvas-content .menu-item > a{ font-size:17px !important; font-weight:400 !important; } /* mobile header uses its own row - give every header row the page gutter so the logo starts on the content edge and icons end on it */ .fl-builder-content[data-type="header"] .fl-row-content, .fl-builder-content[data-type="header"] .fl-row-content-wrap{ padding-inline:0 !important; max-width:none !important; } .fl-builder-content[data-type="header"] .fl-row > .fl-row-content-wrap{ padding-inline:clamp(20px,4vw,48px) !important; } .fl-builder-content[data-type="header"] .fl-col-group{ width:100% !important; justify-content:space-between !important; } /* BB gives header columns a percentage margin (58.6px on the icon column) which stops them short of the row edge - clear it */ .fl-builder-content[data-type="header"] .fl-col{ padding-inline:0 !important; margin-right:0 !important; margin-left:0 !important; } /* last visible column hugs the right edge */ .fl-builder-content[data-type="header"] .fl-col:last-of-type{ margin-left:auto !important; margin-right:0 !important; flex:0 0 auto !important; width:auto !important; } /* ---- custom hamburger: small, thin, pinned right ---- */ .fl-builder-content[data-type="header"] .burger-container{ width:auto !important; margin-left:auto !important; margin-right:0 !important; padding-right:0 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:16px !important; height:44px !important; } /* the module wrapping the icons must not add its own inset */ .fl-builder-content[data-type="header"] .fl-col:last-of-type .fl-col-content, .fl-builder-content[data-type="header"] .fl-col:last-of-type .fl-module, .fl-builder-content[data-type="header"] .fl-col:last-of-type .fl-module-content, .fl-builder-content[data-type="header"] .fl-col:last-of-type .fl-html{ width:auto !important; margin-right:0 !important; padding-right:0 !important; display:flex !important; justify-content:flex-end !important; } /* the theme zeroes the height of the .line divs, so draw the three bars directly on .burger with background gradients - fully reliable */ .fl-builder-content[data-type="header"] .burger{ width:20px !important; height:20px !important; /* same box as the bag so both centre identically */ flex:0 0 20px !important; position:relative !important; cursor:pointer; background-image: linear-gradient(var(--ap-ink), var(--ap-ink)), linear-gradient(var(--ap-ink), var(--ap-ink)), linear-gradient(var(--ap-ink), var(--ap-ink)); background-size:19px 1.5px; background-position:center 4px, center 9.5px, center 15px; background-repeat:no-repeat; } .fl-builder-content[data-type="header"] .burger .line{ display:none !important; } /* both icons: identical 20x20 box, same vertical centre, flush right */ .fl-builder-content[data-type="header"] .burger-container > *{ height:20px !important; align-self:center !important; margin:0 !important; } /* the FontAwesome bag glyph doesn't load - draw a real SVG bag instead */ .fl-builder-content[data-type="header"] .burger-container .flyout-cart{ width:20px !important; height:20px !important; flex:0 0 20px !important; display:block !important; position:relative; } .fl-builder-content[data-type="header"] .burger-container .flyout-cart i{ display:none !important; } .fl-builder-content[data-type="header"] .burger-container .flyout-cart::after{ content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:19px 19px; background-image:url("data:image/svg+xml;utf8,"); } } /* ---- FOOTER: tighter, left-aligned, better rhythm on small screens ---- */ @media(max-width:760px){ .fl-builder-content[data-type="footer"] .fl-row-content{ padding-inline:20px !important; } .fl-builder-content[data-type="footer"] .fl-row:first-child .fl-row-content-wrap{ padding-top:24px !important; padding-bottom:6px !important; } .fl-builder-content[data-type="footer"] .fl-col-group{ flex-direction:column !important; gap:14px 0 !important; } /* collapse empty rows/columns that create dead space */ .fl-builder-content[data-type="footer"] .fl-col:not(:has(.fl-module:not(.fl-module-pp-offcanvas-content))){ display:none !important; } .fl-builder-content[data-type="footer"] .fl-col, .fl-builder-content[data-type="footer"] .fl-col-content{ width:100% !important; flex:1 1 100% !important; text-align:left !important; align-items:flex-start !important; } /* kill any centering the builder applied */ .fl-builder-content[data-type="footer"] .fl-module-content, .fl-builder-content[data-type="footer"] .fl-rich-text, .fl-builder-content[data-type="footer"] .fl-heading, .fl-builder-content[data-type="footer"] .fl-photo{ text-align:left !important; } .fl-builder-content[data-type="footer"] .fl-photo-content{ margin:0 !important; } .fl-builder-content[data-type="footer"] h1, .fl-builder-content[data-type="footer"] h2, .fl-builder-content[data-type="footer"] h3, .fl-builder-content[data-type="footer"] h4, .fl-builder-content[data-type="footer"] .fl-heading-text{ font-size:11.5px !important; margin-bottom:6px !important; text-align:left !important; } /* nav: one tidy left-aligned column (a 2-col grid left an empty cell) */ .fl-builder-content[data-type="footer"] .nav-footer .menu{ display:flex !important; flex-direction:column !important; gap:0 !important; align-items:flex-start !important; text-align:left !important; } .fl-builder-content[data-type="footer"] .nav-footer .menu li:empty{ display:none !important; } .fl-builder-content[data-type="footer"] .nav-footer .menu-item, .fl-builder-content[data-type="footer"] .nav-footer .menu-item > a, .fl-builder-content[data-type="footer"] .nav-footer .menu-item-text{ text-align:left !important; justify-content:flex-start !important; width:100% !important; display:block !important; } .fl-builder-content[data-type="footer"] a, .nav-footer .menu-item > a{ font-size:13px !important; line-height:1.95 !important; } .fl-builder-content[data-type="footer"] p{ font-size:13px !important; } /* kill the dead vertical space: empty modules + oversized margins */ .fl-builder-content[data-type="footer"] .fl-module{ margin-bottom:8px !important; } .fl-builder-content[data-type="footer"] .fl-module:empty, .fl-builder-content[data-type="footer"] .fl-module-pp-offcanvas-content{ display:none !important; margin:0 !important; height:0 !important; } .fl-builder-content[data-type="footer"] .fl-col-group:empty{ display:none !important; } .fl-builder-content[data-type="footer"] .fl-photo{ margin-bottom:4px !important; } /* payment badge sized sensibly */ .fl-builder-content[data-type="footer"] img[src*="cp-interac"], .fl-builder-content[data-type="footer"] .fl-module-pp-image img{ max-height:22px !important; width:auto !important; } } /* --- trim the oversized gap between the last page section and the footer --- */ .six-rd section:last-of-type{ padding-bottom:clamp(56px, 6vw, 88px) !important; } @media(max-width:900px){ .six-rd section:last-of-type{ padding-bottom:48px !important; } } /* ===================================================================== MOTION LAYER (site-wide) Rules this follows: - transform and opacity ONLY, so nothing triggers layout or paint reflow - nothing longer than 600ms, easing cubic-bezier(.16,1,.3,1) - no extra JavaScript; the .six-anim class and the existing IntersectionObserver in functions.php already drive the reveals - everything collapses under prefers-reduced-motion at the bottom ===================================================================== */ :root{ --ap-ease:cubic-bezier(.16,1,.3,1); } /* ---------- nav: underline wipes in from the left ---------- */ .fl-builder-content[data-type="header"] .menu-item > a{ position:relative; } .fl-builder-content[data-type="header"] .menu-item > a::after{ content:""; position:absolute; left:8px; right:8px; bottom:9px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--ap-ease); pointer-events:none; } .fl-builder-content[data-type="header"] .menu-item > a:hover::after{ transform:scaleX(1); } .nav-main .sub-menu .menu-item > a::after{ content:none; } /* ---------- header icons ---------- */ .header-icons .flyout-cart::after, .header-icons .login::after{ transition:opacity .2s var(--ap-ease), transform .2s var(--ap-ease); } .header-icons .flyout-cart:hover::after, .header-icons .login:hover::after{ transform:scale(1.08); } /* cart badge pops when the count changes (class toggled by the fragment repaint) */ @keyframes six-badge-pop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); opacity:1; } } .flyout-cart.has-items .six-cart-count{ animation:six-badge-pop .34s var(--ap-ease); } /* ---------- mega-menu panel ---------- */ .nav-main .pp-has-submenu .sub-menu{ transform:translateY(-6px); transition:opacity .22s var(--ap-ease), transform .22s var(--ap-ease), visibility .22s var(--ap-ease); } .nav-main .pp-has-submenu:hover > .sub-menu, .nav-main .pp-has-submenu:focus-within > .sub-menu, .nav-main .pp-has-submenu.pp-active > .sub-menu{ transform:translateY(0); } /* the column links stagger in behind the panel */ .nav-main .sub-menu > li{ opacity:0; transform:translateY(6px); transition:opacity .3s var(--ap-ease), transform .3s var(--ap-ease); } .nav-main .pp-has-submenu:hover > .sub-menu > li, .nav-main .pp-has-submenu:focus-within > .sub-menu > li, .nav-main .pp-has-submenu.pp-active > .sub-menu > li{ opacity:1; transform:translateY(0); } .nav-main .sub-menu > li:nth-child(1){ transition-delay:.02s; } .nav-main .sub-menu > li:nth-child(2){ transition-delay:.04s; } .nav-main .sub-menu > li:nth-child(3){ transition-delay:.06s; } .nav-main .sub-menu > li:nth-child(4){ transition-delay:.08s; } .nav-main .sub-menu > li:nth-child(5){ transition-delay:.10s; } .nav-main .sub-menu > li:nth-child(6){ transition-delay:.12s; } .nav-main .sub-menu > li:nth-child(n+7){ transition-delay:.14s; } /* ---------- images fade in once decoded (no layout shift) ---------- */ .six-anim .six-shop .sh-img, .six-anim .six-pdp .pd-main-img, .six-anim .six-rd .rd-pcard-media img, .six-anim .six-rd .rd-cat-img{ animation:six-img-in .5s var(--ap-ease) both; } @keyframes six-img-in{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } } /* ---------- cart drawer: items stagger in ---------- */ .pp-offcanvas-content ul.cart_list li{ opacity:0; transform:translateX(12px); animation:six-drawer-item .38s var(--ap-ease) forwards; } @keyframes six-drawer-item{ to{ opacity:1; transform:none; } } .pp-offcanvas-content ul.cart_list li:nth-child(1){ animation-delay:.04s; } .pp-offcanvas-content ul.cart_list li:nth-child(2){ animation-delay:.09s; } .pp-offcanvas-content ul.cart_list li:nth-child(3){ animation-delay:.14s; } .pp-offcanvas-content ul.cart_list li:nth-child(n+4){ animation-delay:.18s; } .pp-offcanvas-content .woocommerce-mini-cart__total, .pp-offcanvas-content .woocommerce-mini-cart__buttons{ opacity:0; animation:six-drawer-item .4s var(--ap-ease) .22s forwards; } /* ---------- links ---------- */ .six-shop a, .six-pdp a, .six-cart a, .six-checkout a, .six-account a{ transition:color .18s var(--ap-ease), opacity .18s var(--ap-ease); } /* ---------- footer columns reveal ---------- */ .six-anim .fl-builder-content[data-type="footer"] .fl-col{ animation:six-fade-up .5s var(--ap-ease) both; } @keyframes six-fade-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .fl-builder-content[data-type="footer"] .fl-col:nth-child(2){ animation-delay:.06s; } .fl-builder-content[data-type="footer"] .fl-col:nth-child(3){ animation-delay:.12s; } .fl-builder-content[data-type="footer"] .fl-col:nth-child(4){ animation-delay:.18s; } /* ---------- ACCESSIBILITY: kill every bit of it on request ---------- */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .six-anim .six-shop .sh-img, .six-anim .six-pdp .pd-main-img, .six-anim .six-rd .rd-pcard-media img, .six-anim .six-rd .rd-cat-img, .pp-offcanvas-content ul.cart_list li, .pp-offcanvas-content .woocommerce-mini-cart__total, .pp-offcanvas-content .woocommerce-mini-cart__buttons, .six-anim .fl-builder-content[data-type="footer"] .fl-col, .nav-main .sub-menu > li{ opacity:1 !important; transform:none !important; } } /* --------------------------------------------------------------------- Site chrome must never be caught by the scroll-reveal start state. style.css hides every top-level Beaver Builder row with `.six-anim .fl-builder-content > .fl-row { opacity:0 }` and waits for the observer to reveal it. The footer's last row (the copyright line) never got revealed and stayed invisible, and the header/drawer are equally at risk. Chrome is always visible; the fade-up below supplies the motion instead. ------------------------------------------------------------------- */ .six-anim .fl-builder-content[data-type="header"] > .fl-row, .six-anim .fl-builder-content[data-type="footer"] > .fl-row, .six-anim .pp-offcanvas-content .fl-row, .six-anim .six-cart .fl-row, .six-anim .six-checkout .fl-row, .six-anim .six-account .fl-row{ opacity:1 !important; } /* ===================================================================== TYPE TUNING FOR THE HELVETICA STACK Helvetica/Arial have a smaller x-height than SF Pro, so text set for SF reads noticeably smaller once the stack changes. These nudge the reading sizes back up and relax the tracking: SF wants tight negative tracking at small sizes, Helvetica is already tight and turns muddy if you squeeze it. Only type is touched here - no widths, gaps or grid tracks, so every layout keeps its alignment. ===================================================================== */ /* small text: let it breathe instead of inheriting SF's tight tracking */ .six-shop .sh-crumb, .six-pdp .pd-crumb, .six-cart .ct-crumb, .six-checkout .co-crumb, .six-page .pg-crumb, .six-blog .bl-crumb, .six-post .po-crumb, .six-shop .sh-n, .six-shop .sh-count, .six-blog .bl-meta, .six-post .po-meta, .six-cart .ct-item-cat, .six-blog .bl-cat{ letter-spacing:0 !important; } /* body copy */ .six-shop .sh-intro, .six-blog .bl-sub, .six-page .pg-sub, .six-cart .ct-sub, .six-checkout .co-sub, .six-pdp .pd-short{ font-size:15.5px !important; letter-spacing:0 !important; } .six-page .fl-rich-text, .six-page .fl-rich-text p{ font-size:16.5px !important; line-height:1.68 !important; letter-spacing:0 !important; } .six-post .po-body, .six-post .po-body p{ font-size:18px !important; line-height:1.75 !important; letter-spacing:0 !important; } /* product + post card text */ .six-shop .sh-name{ font-size:15.5px !important; letter-spacing:-.008em !important; } .six-shop .sh-price{ font-size:16px !important; } .six-blog .bl-title{ font-size:18.5px !important; letter-spacing:-.012em !important; } .six-blog .bl-excerpt{ font-size:15px !important; letter-spacing:0 !important; } /* controls: buttons and form fields were tuned for SF's larger x-height */ .six-shop .sh-btn, .six-shop .sh-apply, .six-shop .sh-fclear, .six-cart .ct-btn, .six-blog .bl-btn, .six-post .po-btn{ font-size:15px !important; letter-spacing:0 !important; } .six-shop .sh-fcheck, .six-shop .sh-fradio, .six-shop .sh-sort select, .six-shop .sh-filter-btn{ font-size:15px !important; letter-spacing:0 !important; } /* nav: Apple's 12px is too small in Helvetica */ .fl-builder-content[data-type="header"] .menu-item > a, .fl-builder-content[data-type="header"] .menu-item-text{ font-size:12.5px !important; letter-spacing:0 !important; } .nav-main .sub-menu .menu-item > a{ letter-spacing:0 !important; } /* footer */ .fl-builder-content[data-type="footer"] a, .fl-builder-content[data-type="footer"] p, .fl-builder-content[data-type="footer"] li{ font-size:14.5px !important; letter-spacing:0 !important; } /* display sizes keep their negative tracking - Helvetica needs it when large */ h1, .six-post .po-head h1, .six-rd h1{ letter-spacing:-.028em; } h2{ letter-spacing:-.02em; } /* ===================================================================== FONT WEIGHT NORMALISATION The design was drawn for SF Pro, which ships 400/500/600/700 as real cuts. Helvetica Neue and Arial only ship 400 and 700, so every font-weight:700 was being SYNTHESISED by the browser - smeared edges instead of a real bold. Everything is snapped to the two weights that genuinely exist: 400 for reading, 700 for emphasis. Nothing is left on a faked weight. (If Helvetica Now is licensed later it has real 500/600 cuts, and this block can simply be deleted.) ===================================================================== */ body, p, li, dd, td, input, textarea, select, .six-shop .sh-intro, .six-shop .sh-count, .six-shop .sh-n, .six-shop .sh-crumb, .six-blog .bl-excerpt, .six-blog .bl-meta, .six-blog .bl-sub, .six-post .po-body, .six-post .po-body p, .six-post .po-meta, .six-page .fl-rich-text, .six-page .fl-rich-text p, .six-page .pg-sub, .six-cart .ct-item-unit, .six-checkout .form-row label, .fl-builder-content[data-type="footer"] a, .fl-builder-content[data-type="footer"] p{ font-weight:400 !important; } h1, h2, h3, h4, h5, h6, .heading-title, .title-text, .fl-heading-text, .six-shop .sh-name, .six-shop .sh-price, .six-shop .sh-apply, .six-shop .sh-btn, .six-shop .sh-fclear, .six-shop .sh-filter-btn, .six-shop .sh-page.is-active, .six-shop .sh-fcheck.is-on .sh-fcheck-label, .six-shop .sh-fradio.is-on .sh-fradio-label, .six-shop .sh-count strong, .six-pdp .pd-title, .six-pdp .pd-price, .six-pdp form.cart button.single_add_to_cart_button, .six-cart .ct-item-name, .six-cart .ct-item-total, .six-cart .ct-btn, .six-cart .cart_totals .order-total th, .six-cart .cart_totals .order-total td, .six-checkout #place_order, .six-checkout .shop_table tfoot .order-total th, .six-checkout .shop_table tfoot .order-total td, .six-blog .bl-title, .six-blog .bl-btn, .six-blog .bl-page.is-active, .six-post .po-btn, .six-post .po-rel-title, .six-page .pg-contact-value, .six-page .fl-button, .six-rd .btn, .six-rd .rd-cat-name, .six-rd .rd-pcard-name, .woocommerce-mini-cart__buttons a, .six-cart-count{ font-weight:700 !important; } /* eyebrows and small caps labels read better at 700 with their wide tracking */ .six-shop .sh-fsub, .six-pdp .pd-eyebrow, .six-blog .bl-cat, .six-cart .ct-item-cat, .six-page .pg-contact-label, .six-rd .eyebrow{ font-weight:700 !important; } /* nav sits at regular; the active/hover state carries the emphasis instead */ .fl-builder-content[data-type="header"] .menu-item > a, .fl-builder-content[data-type="header"] .menu-item-text{ font-weight:400 !important; } /* --- two hold-outs that earlier rules were still winning --------------- */ /* the cart drawer title was pinned to the now-fake 600 */ .pp-offcanvas-content .title-text, .pp-offcanvas-content .pp-primary-title, .pp-offcanvas-content h4.heading-title .title-text{ font-weight:700 !important; } /* PowerPack wraps submenu parents in .pp-has-submenu-container, so the nav link is not a direct child of .menu-item and the child selector missed it */ .fl-builder-content[data-type="header"] .nav-main .menu a, .fl-builder-content[data-type="header"] .nav-main .menu-item a, .nav-main .menu > li > a, .nav-main .menu-item > a, .nav-main .pp-has-submenu-container > a{ font-size:12.5px !important; letter-spacing:0 !important; } /* submenu links keep their own larger size */ .nav-main .sub-menu .menu-item a{ font-size:14px !important; } /* Beaver Builder's node CSS sets the nav to the fake 600; match its reach */ .fl-builder-content[data-type="header"] .pp-advanced-menu .menu a, .fl-builder-content[data-type="header"] .nav-main .menu a, .fl-builder-content[data-type="header"] .menu-item-text, .nav-main .pp-has-submenu-container > a{ font-weight:400 !important; } .nav-main .sub-menu .six-mega-head > a{ font-weight:700 !important; } /* the mobile off-canvas menu is a separate builder block with no data-type */ .pp-advanced-menu .menu a, .pp-advanced-menu .menu-item-text{ font-weight:400 !important; } .pp-advanced-menu .six-mega-head > a{ font-weight:700 !important; } /* Catch-all: nothing may sit on weight 600, which this stack cannot render as a real cut. Anything inside the off-canvas panels that earlier selectors missed is snapped to regular; the drawer's own headings are set to 700 above. */ .pp-offcanvas-content a, .pp-offcanvas-content span, .pp-offcanvas-content li, .pp-offcanvas-content p, .pp-advanced-menu a, .pp-advanced-menu span, .pp-advanced-menu li{ font-weight:400 !important; } /* the pieces that keep their emphasis */ .pp-offcanvas-content .title-text, .pp-offcanvas-content .pp-primary-title, .pp-offcanvas-content .woocommerce-mini-cart__total strong, .pp-offcanvas-content .woocommerce-mini-cart__total .amount, .pp-offcanvas-content .woocommerce-mini-cart__buttons a, .pp-offcanvas-content ul.cart_list li > a:not(.remove), .pp-advanced-menu .six-mega-head a, .six-cart-count{ font-weight:700 !important; } /* ===================================================================== BOLD DIET Snapping every 600 up to 700 made far too much of the page heavy. Bold is reserved for the things that genuinely need to shout: page headings, prices, buttons and the active state of a control. Product names, card meta, filter labels, nav and body copy all sit at regular - which is how Shroomyz and Nike actually set their cards. ===================================================================== */ .six-shop .sh-name, .six-shop .sh-fcheck-label, .six-shop .sh-fradio-label, .six-shop .sh-fcheck.is-on .sh-fcheck-label, .six-shop .sh-fradio.is-on .sh-fradio-label, .six-shop .sh-count strong, .six-shop .sh-fsub, .six-shop .sh-tag, .six-shop .sh-page, .six-blog .bl-title, .six-blog .bl-cat, .six-post .po-rel-title, .six-cart .ct-item-name, .six-cart .ct-item-cat, .six-pdp .pd-eyebrow, .six-rd .rd-cat-name, .six-rd .rd-pcard-name, .six-rd .eyebrow, .six-page .pg-contact-label, .fl-builder-content[data-type="footer"] a{ font-weight:400 !important; } /* the short list that keeps real bold */ h1, h2, .six-shop .sh-price, .six-pdp .pd-price, .six-pdp .pd-title, .six-cart .ct-item-total, .six-cart .cart_totals .order-total th, .six-cart .cart_totals .order-total td, .six-checkout .shop_table tfoot .order-total th, .six-checkout .shop_table tfoot .order-total td, .six-shop .sh-apply, .six-shop .sh-fclear, .six-shop .sh-btn, .six-cart .ct-btn, .six-checkout #place_order, .six-blog .bl-btn, .six-post .po-btn, .six-rd .btn, .six-page .fl-button, .woocommerce-mini-cart__buttons a, .six-shop .sh-page.is-active, .six-blog .bl-page.is-active, .six-cart-count, .six-page .pg-contact-value{ font-weight:700 !important; } /* h3/h4 are section labels, not headlines - medium presence is enough */ h3, h4, h5, h6{ font-weight:400 !important; } .six-shop .sh-fgroup h3, .six-rd .rd-pillar h3, .six-post .po-body h2, .six-post .po-body h3{ font-weight:700 !important; } /* Header type sized down: the nav now carries the four categories plus Shop, FAQ, About and Contact, so it has to stay compact to fit on one line. */ .fl-builder-content[data-type="header"] .nav-main .menu a, .fl-builder-content[data-type="header"] .nav-main .menu-item a, .fl-builder-content[data-type="header"] .menu-item-text, .nav-main .menu > li > a, .nav-main .menu-item > a, .nav-main .pp-has-submenu-container > a{ font-size:12.5px !important; letter-spacing:0 !important; } /* mega-menu panel: column headings and links a touch smaller too */ .nav-main .sub-menu .menu-item a{ font-size:13px !important; } .nav-main .sub-menu .six-mega-head > a{ font-size:11px !important; } /* Header type down to the original compact spec, and the logo with it - the bar now carries 8 items (4 categories + Shop, FAQ, About, Contact), so both have to be small for it to read as one calm line. */ .fl-builder-content[data-type="header"] .nav-main .menu a, .fl-builder-content[data-type="header"] .nav-main .menu-item a, .fl-builder-content[data-type="header"] .menu-item-text, .nav-main .menu > li > a, .nav-main .menu-item > a, .nav-main .pp-has-submenu-container > a{ font-size:12px !important; letter-spacing:0 !important; } .fl-builder-content[data-type="header"] .fl-photo-img, .fl-builder-content[data-type="header"] .fl-logo-img{ height:22px !important; } .nav-main .sub-menu .menu-item a{ font-size:12.5px !important; } .nav-main .sub-menu .six-mega-head > a{ font-size:10.5px !important; } /* ===================================================================== HEADING SCALE - smaller and lighter The display headings were drawn at Apple-hero scale (up to 88px) and then snapped to bold when the font changed, which made every page shout. Large headings now sit at regular weight - Helvetica at size carries enough presence on its own - and the whole scale steps down. ===================================================================== */ .six-rd .rd-hero h1{ font-weight:400 !important; letter-spacing:-.03em !important; line-height:1.06 !important; } .six-rd h2, .six-rd .rd-head h2{ font-weight:400 !important; letter-spacing:-.022em !important; } .six-rd h3, .six-rd .rd-pillar h3{ font-weight:700 !important; } /* page headings across every template */ .six-shop .sh-head h1, .six-pdp .pd-title, .six-cart .ct-head h1, .six-checkout .co-head h1, .six-account .ac-head h1, .six-page .pg-head h1, .six-blog .bl-head h1{ font-size:clamp(24px,2.4vw,32px) !important; font-weight:400 !important; letter-spacing:-.022em !important; } .six-post .po-head h1{ font-size:clamp(26px,2.8vw,38px) !important; font-weight:400 !important; letter-spacing:-.024em !important; } /* section headings inside pages */ .six-page h2, .six-page .fl-heading .fl-heading-text, .six-page .pp-heading .title-text{ font-size:21px !important; font-weight:700 !important; } .six-post .po-body h1{ font-size:24px !important; font-weight:700 !important; } .six-post .po-body h2{ font-size:21px !important; } .six-post .po-body h3{ font-size:18px !important; } .six-post .po-related h2, .six-post .po-cta h2, .six-page .pg-contact-h, .six-shop .sh-empty h2, .six-cart .ct-empty h2{ font-size:20px !important; font-weight:700 !important; } /* --------------------------------------------------------------------- Mega-menu panel: its content was centred to a 1024px column, so it began at the viewport edge rather than under the logo. Align it to the same 1280px container + gutter the header and every page uses, so the first column starts directly below the mushroom mark. ------------------------------------------------------------------- */ .nav-main .pp-has-submenu .sub-menu{ padding-top:38px !important; padding-bottom:44px !important; padding-inline:max(clamp(20px,4vw,48px), calc((100% - 1280px) / 2 + clamp(20px,4vw,48px))) !important; } /* header type back up a step now that the headings are calm */ .fl-builder-content[data-type="header"] .nav-main .menu a, .fl-builder-content[data-type="header"] .nav-main .menu-item a, .fl-builder-content[data-type="header"] .menu-item-text, .nav-main .menu > li > a, .nav-main .menu-item > a, .nav-main .pp-has-submenu-container > a{ font-size:13.5px !important; } .fl-builder-content[data-type="header"] .fl-photo-img, .fl-builder-content[data-type="header"] .fl-logo-img{ height:25px !important; } .nav-main .sub-menu .menu-item a{ font-size:14px !important; } .nav-main .sub-menu .six-mega-head > a{ font-size:11.5px !important; } /* ===================================================================== FONT WEIGHT - final pass, whole site Two real weights only. 400 carries all reading text, including product names, card titles, FAQ questions, nav and headings. 700 is reserved for the few things that must be findable at a glance: prices, buttons, totals and small uppercase labels. ===================================================================== */ body, p, li, dd, dt, td, th, span, a, label, input, select, textarea, h1, h2, h3, h4, h5, h6, .fl-heading-text, .title-text, .heading-title, .pp-primary-title, .fl-rich-text, .fl-rich-text p, .menu-item-text{ font-weight:400 !important; } /* the short list that stays bold */ .six-shop .sh-price, .six-pdp .pd-price, .six-cart .ct-item-total, .six-cart .cart_totals .order-total th, .six-cart .cart_totals .order-total td, .six-checkout .shop_table tfoot .order-total th, .six-checkout .shop_table tfoot .order-total td, .six-rd .rd-pcard-price, .six-shop .sh-btn, .six-shop .sh-apply, .six-shop .sh-fclear, .six-shop .sh-filter-btn, .six-cart .ct-btn, .six-checkout #place_order, .six-blog .bl-btn, .six-post .po-btn, .six-rd .btn, .six-page .fl-button, .woocommerce-mini-cart__buttons a, a.checkout-button, .fl-page button, .fl-page input[type="submit"], .six-shop .sh-page.is-active, .six-blog .bl-page.is-active, .six-cart-count, .six-shop .sh-fsub, .six-pdp .pd-eyebrow, .six-blog .bl-cat, .six-cart .ct-item-cat, .six-rd .eyebrow, .six-page .pg-contact-label, .six-shop .sh-fgroup h3, strong, b{ font-weight:700 !important; } /* ===================================================================== BUTTON SYSTEM - pale fill, deep-plum label Researched + contrast-verified. The label flips to dark because no lighter white-text plum exists: #9d5ab9+white is 4.57:1 and the next step down fails. Primary 6.22:1, hover 5.15:1, active 4.65:1. The 1.5px border is STRUCTURAL - the fill is 2.21:1 vs a white page. ===================================================================== */ .fl-page button:not(.pp-offcanvas-close):not(.pp-menu-toggle):not(.sh-side-close):not([class*="dgwt-wcas"]):not(.pp-rf-toggle-pw):not(.show-password-input):not(.pp-faq-button), .fl-page input[type="submit"], .fl-page input[type="button"], .fl-page .fl-button, .fl-page a.fl-button, .fl-page .gform_button, .fl-page .wp-block-button__link, .six-rd .btn-primary, .six-shop .sh-apply, .six-shop .sh-btn, .six-shop .sh-btn--solid, .six-pdp form.cart button.single_add_to_cart_button, .six-pdp .pd-sticky-btn, .six-cart .ct-btn--solid, .six-cart button.ct-btn--solid, .six-cart .wc-proceed-to-checkout a.checkout-button, .six-checkout #place_order, .six-checkout button#place_order, .six-blog .bl-btn, .six-post .po-btn, .six-page .fl-button, .pp-offcanvas-content .woocommerce-mini-cart__buttons a.checkout, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, a.checkout-button{ background-color:var(--ap-btn-fill) !important; background-image:none !important; color:var(--ap-btn-ink) !important; border:1.5px solid var(--ap-btn-edge) !important; border-radius:9999px !important; opacity:1 !important; text-shadow:none !important; box-shadow:none !important; transition:background-color .2s ease, transform .15s ease; } .fl-page button:hover, .fl-page input[type="submit"]:hover, .fl-page .fl-button:hover, .six-rd .btn-primary:hover, .six-shop .sh-apply:hover, .six-shop .sh-btn:hover, .six-pdp form.cart button.single_add_to_cart_button:hover, .six-pdp .pd-sticky-btn:hover, .six-cart .ct-btn--solid:hover, .six-cart .wc-proceed-to-checkout a.checkout-button:hover, .six-checkout #place_order:hover, .six-blog .bl-btn:hover, .six-post .po-btn:hover, .pp-offcanvas-content .woocommerce-mini-cart__buttons a.checkout:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, a.checkout-button:hover{ background-color:var(--ap-btn-fill-h) !important; color:var(--ap-btn-ink) !important; border-color:var(--ap-btn-edge-h) !important; transform:translateY(-1px); } .fl-page button:active, .six-shop .sh-btn:active, .six-cart .ct-btn:active, .six-checkout #place_order:active, .six-rd .btn-primary:active{ background-color:var(--ap-btn-fill-a) !important; border-color:var(--ap-btn-fill-a) !important; transform:translateY(0); } /* SECONDARY - white fill, plum label, light plum hairline */ .six-cart .ct-btn--quiet, .six-cart button.ct-btn--quiet, .six-shop .sh-filter-btn, .six-shop .sh-fclear, .six-shop .sh-page, .six-blog .bl-page, .pp-offcanvas-content .woocommerce-mini-cart__buttons a:not(.checkout){ background-color:var(--ap-canvas) !important; color:var(--ap-btn-edge) !important; border:1px solid var(--ap-btn-line) !important; box-shadow:none !important; } .six-cart .ct-btn--quiet:hover, .six-shop .sh-filter-btn:hover, .six-shop .sh-fclear:hover, .six-shop .sh-page:hover, .six-blog .bl-page:hover, .pp-offcanvas-content .woocommerce-mini-cart__buttons a:not(.checkout):hover{ background-color:var(--ap-btn-wash) !important; color:var(--ap-btn-edge) !important; border-color:var(--ap-btn-edge) !important; } .six-shop .sh-page.is-active, .six-blog .bl-page.is-active{ background-color:var(--ap-canvas) !important; color:var(--ap-btn-edge) !important; border:1.5px solid var(--ap-btn-edge) !important; } /* selected category = LIGHT plum wash + plum text (not a dark filled pill) */ .six-shop .sh-flink.is-on{ background-color:var(--ap-plum-tint) !important; color:var(--ap-plum) !important; } /* DISABLED - must sit clear of the pale primary, still plum family, never grey. Replaces opacity:.38, which resolved to 1.66:1 and was illegible. */ .fl-page button[disabled], .fl-page button:disabled, .six-shop .sh-btn--disabled, .six-pdp form.cart button.single_add_to_cart_button.disabled, .six-pdp form.cart button.single_add_to_cart_button:disabled{ background-color:var(--ap-btn-off) !important; color:var(--ap-btn-off-ink) !important; border:1px solid var(--ap-btn-off-line) !important; opacity:1 !important; transform:none !important; cursor:not-allowed !important; } /* SUCCESS - reverses the weight, same hue */ .six-shop .sh-btn.added, .is-added{ background-color:var(--ap-plum-deep) !important; color:var(--ap-on-dark) !important; border-color:var(--ap-plum-deep) !important; } /* FOCUS - always a ring; a pale fill's state change is under 3:1 alone */ .fl-page button:focus-visible, .fl-page a:focus-visible, .fl-page input[type="submit"]:focus-visible{ outline:2px solid var(--ap-plum-deep) !important; outline-offset:2px !important; box-shadow:none !important; } /* ===================================================================== BUTTON SIZE - the pills were drawn at hero scale (up to 56px tall, 18px labels, 34px padding). Brought down to a normal control size so they read as buttons rather than banners. ===================================================================== */ .fl-page button:not(.pp-offcanvas-close):not(.pp-menu-toggle):not(.sh-side-close):not([class*="dgwt-wcas"]):not(.pp-rf-toggle-pw):not(.show-password-input):not(.pp-faq-button), .fl-page input[type="submit"], .fl-page input[type="button"], .fl-page .fl-button, .fl-page a.fl-button, .fl-page .wp-block-button__link, .six-rd .btn, .six-rd .btn-primary, .six-rd .btn-ghost, .six-shop .sh-apply, .six-shop .sh-btn, .six-shop .sh-fclear, .six-shop .sh-filter-btn, .six-pdp form.cart button.single_add_to_cart_button, .six-cart .ct-btn, .six-cart .wc-proceed-to-checkout a.checkout-button, .six-checkout #place_order, .six-blog .bl-btn, .six-post .po-btn, .six-page .fl-button, .pp-offcanvas-content .woocommerce-mini-cart__buttons a, .woocommerce a.button, .woocommerce button.button, a.checkout-button{ min-height:42px !important; height:auto !important; padding:10px 22px !important; font-size:14px !important; line-height:1.2 !important; } /* the two hero CTAs stay a touch larger, but nowhere near 56px */ .six-rd .rd-cta .btn{ min-height:46px !important; padding:12px 26px !important; font-size:15px !important; } .six-rd .rd-cta .btn-ghost{ padding:12px 10px !important; } /* the page-level primaries that carry real weight */ .six-checkout #place_order, .six-cart .wc-proceed-to-checkout a.checkout-button, .six-pdp form.cart button.single_add_to_cart_button{ min-height:46px !important; font-size:15px !important; } /* pagination and filter chips are controls, not buttons */ .six-shop .sh-page, .six-blog .bl-page{ min-width:36px !important; height:36px !important; min-height:36px !important; padding:0 10px !important; font-size:13.5px !important; } .six-shop .sh-tag{ height:28px !important; font-size:12.5px !important; } /* the logo had no hover state at all - give it the same restrained lift the rest of the header uses, so it reads as clickable */ .fl-builder-content[data-type="header"] .fl-photo-img, .fl-builder-content[data-type="header"] .fl-logo-img{ transition:opacity .2s ease, transform .2s ease; } .fl-builder-content[data-type="header"] .fl-photo:hover .fl-photo-img, .fl-builder-content[data-type="header"] a:hover .fl-photo-img, .fl-builder-content[data-type="header"] a:hover .fl-logo-img{ opacity:.75; transform:scale(1.03); } /* ===================================================================== MOBILE MENU DRAWER, Shroomyz-style - a white sheet of big tappable rows with a chevron each, hairline dividers, roomy padding. Targets only the off-canvas panel that carries the nav (the cart panel has no ul.menu, so :has() keeps it untouched). ===================================================================== */ .pp-offcanvas-content:has(ul.menu){ background:var(--ap-canvas) !important; padding:22px 24px !important; } .pp-offcanvas-content ul.menu{ list-style:none; margin:0 !important; padding:0 !important; } .pp-offcanvas-content ul.menu > li{ border-bottom:1px solid var(--ap-line-soft) !important; margin:0 !important; } .pp-offcanvas-content ul.menu > li > a{ display:flex !important; align-items:center; justify-content:space-between; padding:19px 2px !important; font-size:17px !important; font-weight:400 !important; letter-spacing:-.012em; color:var(--ap-ink) !important; background:none !important; } /* chevron on the right of every top-level row */ .pp-offcanvas-content ul.menu > li > a::after{ content:"\203A"; /* single right angle quote as › */ font-size:22px; line-height:1; color:var(--ap-faint); margin-left:14px; } .pp-offcanvas-content ul.menu > li > a:hover{ color:var(--ap-plum) !important; } /* submenus (the Shop categories) indent quietly under their parent */ .pp-offcanvas-content ul.menu .sub-menu{ list-style:none; margin:0 0 8px !important; padding:0 0 0 14px !important; position:static !important; width:auto !important; visibility:visible !important; opacity:1 !important; transform:none !important; box-shadow:none !important; border:0 !important; background:none !important; } .pp-offcanvas-content ul.menu .sub-menu a{ display:block !important; padding:10px 2px !important; font-size:15px !important; color:var(--ap-ink-2) !important; } .pp-offcanvas-content ul.menu .sub-menu a:hover{ color:var(--ap-plum) !important; } .pp-offcanvas-content ul.menu .sub-menu .six-mega-head > a{ font-size:12px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; color:var(--ap-faint) !important; padding-top:14px !important; } /* ===================================================================== MOBILE MENU SHEET v2 - matched against shroomyz.com's drawer at 387px: full-screen white sheet, SMALL centred logo with an x beside it, then one flat row per destination, Login/Register last. No nested submenu. ===================================================================== */ /* drawer-only rows never appear in the desktop bar */ .nav-main .six-cat-extra, .nav-main .six-acct-item{ display:none !important; } .pp-offcanvas-content:has(ul.menu){ width:100vw !important; max-width:420px !important; padding:16px 26px 30px !important; } /* the header logo module gets cloned into the sheet at full size - cap it */ .pp-offcanvas-content .fl-photo, .pp-offcanvas-content .fl-photo-content{ text-align:center !important; } .pp-offcanvas-content .fl-photo-img, .pp-offcanvas-content img.fl-photo-img{ max-width:118px !important; width:auto !important; height:auto !important; margin:6px auto 10px !important; display:inline-block !important; } /* the close x: visible, big enough to tap, top right */ .pp-offcanvas-content .pp-offcanvas-close, .pp-offcanvas-close{ display:flex !important; align-items:center; justify-content:center; position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:none !important; border:0 !important; font-size:26px !important; color:var(--ap-ink) !important; opacity:1 !important; z-index:5; } /* flat rows only - the mega submenu is redundant now every category is a top-level row, and nesting it back under Shop made the sheet a maze */ .pp-offcanvas-content ul.menu .sub-menu{ display:none !important; } .pp-offcanvas-content ul.menu > li:last-child{ border-bottom:0 !important; } /* chevron already set in the v1 block; keep rows breathing evenly */ .pp-offcanvas-content ul.menu > li > a{ padding:18px 2px !important; } /* menu sheet v3 - matched row-for-row against shroomyz.com's open drawer: small logo top-LEFT with the x opposite it, Shop as the FIRST row, then the categories, account row last, taller rows. */ .pp-offcanvas-content .fl-photo, .pp-offcanvas-content .fl-photo-content{ text-align:left !important; } .pp-offcanvas-content .fl-photo-img, .pp-offcanvas-content img.fl-photo-img{ max-width:96px !important; margin:8px 0 14px !important; } /* flex column so the drawer can order rows independently of the desktop bar: Shop first (it is the only item carrying a submenu), account last */ .pp-offcanvas-content ul.menu{ display:flex !important; flex-direction:column !important; } .pp-offcanvas-content ul.menu > li{ order:1; } .pp-offcanvas-content ul.menu > li.pp-has-submenu, .pp-offcanvas-content ul.menu > li.menu-item-object-page.menu-item-has-children{ order:0; } .pp-offcanvas-content ul.menu > li.six-acct-item{ order:2; } /* taller, roomier rows - theirs measure ~76px */ .pp-offcanvas-content ul.menu > li > a{ padding:24px 2px !important; font-size:18px !important; } /* drawer: Shop row removed - every category is already its own row, so Shop added nothing but a duplicate route into the same grid. DESKTOP bar keeps Shop (this hides it only inside the off-canvas sheet). */ .pp-offcanvas-content ul.menu > li.pp-has-submenu, .pp-offcanvas-content ul.menu > li.menu-item-object-page.menu-item-has-children{ display:none !important; } /* The drawer's close button was an invisible 40px box: its icon is a Font Awesome , and Font Awesome is deliberately blocked on this site for performance. Draw the x ourselves instead. */ .pp-offcanvas-close .fa, .pp-offcanvas-close [class*="fa-"]{ display:none !important; } .pp-offcanvas-close::before{ content:"\00d7"; font-size:32px; line-height:1; font-family:inherit; color:var(--ap-ink); } /* ===================================================================== FOOTER - Shroomyz-style on mobile. ===================================================================== */ /* belt-and-braces: injected header/drawer rows never render in the footer, even if a menu slips past the PHP-side name check */ .fl-builder-content[data-type="footer"] .six-cat-item, .fl-builder-content[data-type="footer"] .six-acct-item{ display:none !important; } @media (max-width:780px){ .fl-builder-content[data-type="footer"] .fl-col{ flex:1 1 100% !important; max-width:100% !important; } /* section header row: uppercase label + rotating chevron, full-width tap */ .six-facc .fl-heading{ display:flex !important; align-items:center; justify-content:space-between; margin:0 !important; padding:17px 0 !important; border-bottom:1px solid var(--ap-line); font-size:13px !important; font-weight:700 !important; letter-spacing:.09em; text-transform:uppercase; color:var(--ap-ink) !important; cursor:pointer; user-select:none; } .six-facc .fl-heading::after{ content:"\203A"; font-size:20px; line-height:1; color:var(--ap-faint); transform:rotate(90deg); transition:transform .22s ease; } .six-facc.six-facc-open .fl-heading::after{ transform:rotate(-90deg); } /* collapse everything under the heading until opened */ .six-facc .fl-module:has(.fl-heading) ~ .fl-module{ display:none; } .six-facc.six-facc-open .fl-module:has(.fl-heading) ~ .fl-module{ display:block; padding-block:10px 16px; } .six-facc .fl-module ul.menu li{ border:0 !important; } .six-facc .fl-module ul.menu li a{ padding:9px 0 !important; font-size:15px !important; } /* tighten the whole footer and centre the closing line */ .fl-builder-content[data-type="footer"] .fl-row-content-wrap{ padding-top:10px !important; padding-bottom:10px !important; } .fl-builder-content[data-type="footer"] .fl-rich-text, .fl-builder-content[data-type="footer"] p{ text-align:center; } } /* the theme's own heading rules out-rank the accordion header styling - pin the two that lost (size and case) */ @media (max-width:780px){ .fl-builder-content[data-type="footer"] .six-facc .fl-heading, .fl-builder-content[data-type="footer"] .six-facc .fl-heading *{ font-size:13px !important; text-transform:uppercase !important; letter-spacing:.09em !important; } } /* footer accordion v2 - matched against the Shroomyz reference again: on mobile the footer is ONLY the accordion sections plus the closing line. The about/logo column is desktop furniture; the heading row must span the full width so the chevron sits at the right edge and the divider runs edge to edge. */ @media (max-width:780px){ .fl-builder-content[data-type="footer"] .fl-col-group:has(.six-facc) .fl-col:not(.six-facc){ display:none !important; } .six-facc{ padding:0 !important; } .six-facc .fl-col-content, .six-facc .fl-module, .six-facc .fl-module-content{ margin:0 !important; padding:0 !important; } .six-facc .fl-heading{ width:100% !important; display:flex !important; } .fl-builder-content[data-type="footer"] .fl-row-content-wrap{ padding-top:4px !important; padding-bottom:4px !important; } } /* the BB column lays its modules out as a shrink-to-fit flex row, which collapsed the heading to text width - stack them full-width instead */ @media (max-width:780px){ .six-facc .fl-col-content{ display:block !important; } .six-facc .fl-module{ width:100% !important; max-width:100% !important; } }