/* Reserve scrollbar gutter on so the browser doesn't toggle the vertical scrollbar on/off when JS mutations briefly shift layout. Without this, Chrome on macOS can enter a scrollbar flicker loop on pages where the content height hovers near viewport height. */ html { scrollbar-gutter: stable !important; } /* Anti-FOUC: Hide showcase until JS relocates it into #pp-homepage */ .page-home .showcase, .page-home .section-showcase { opacity: 0 !important; transition: opacity .3s ease !important; } .page-home .showcase.pp-revealed, .page-home .section-showcase.pp-revealed { opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════ ANTI-FOUC: Hide CMS subnav bars until JS restyles them. Target only divs with background:#1a2e1a (not color:#1a2e1a). ═══════════════════════════════════════════════════════════════ */ div[style*="background:#1a2e1a"], div[style*="background: #1a2e1a"] { opacity: 0 !important; transition: opacity 0.2s ease !important; } div[style*="background:#1a2e1a"].pp-subnav-styled, div[style*="background: #1a2e1a"].pp-subnav-styled, .pp-subnav-styled { opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════ ANTI-FOUC: Hide native Tray nav IMMEDIATELY — no .pp-enhanced guard. WHY: The old approach waited for JS to add .pp-enhanced before hiding the native nav. This caused the old theme nav to flash on every page load. This has regressed 3+ times — this fix is permanent. SAFE: Our CSS loads in via , so this rule applies before the browser paints the nav. If JS fails entirely, the store is broken anyway (no cart/checkout), so the guard was unnecessary. The custom nav (.pp-nav-list) is excluded so it stays visible. ═══════════════════════════════════════════════════════════════ */ /* Fix strobe flash: kill ALL transitions on header/nav that cause flicker */ .header, .header .top-header, .header .bg, nav.nav { transition: none !important; } /* Nav background — always match header, never flash dark */ nav.nav, nav.nav.show-nav { background: #2C2C2C !important; } /* When show-nav is removed by Plugoo scroll JS, hide nav instantly (no animation) */ nav.nav:not(.show-nav) { transform: none !important; opacity: 1 !important; } nav.nav .list.flex.justify-between, nav.nav > .container > ul:not(.pp-nav-list) { display: none !important; } /* ════════════════════════════════════════════════════════════ */ /* Source: css/modules/_tokens.css */ /* ════════════════════════════════════════════════════════════ */ /* * PeptídeosPro — Design Tokens & Global Variables * All colors, fonts, and spacing values in one place */ /* === GOOGLE FONTS === */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); /* === DESIGN TOKENS === */ :root { --pp-bg: #FFFFFF; --pp-card: #FFFFFF; --pp-surface: #F8FAFC; --pp-accent: #7B8B6F; --pp-accent-light: #8FA688; --pp-accent-dim: rgba(123,139,111,0.08); --pp-accent-border: rgba(123,139,111,0.15); --pp-success: #059669; --pp-warning: #D97706; --pp-text: #0F172A; --pp-text-muted: #475569; --pp-text-dim: #94A3B8; --pp-border: rgba(15,23,42,0.08); --pp-font-display: 'Space Grotesk', system-ui, sans-serif; --pp-font-body: 'DM Sans', system-ui, sans-serif; } /* ════════════════════════════════════════════════════════════ */ /* Source: css/modules/_header.css */ /* ════════════════════════════════════════════════════════════ */ /* * PeptídeosPro — Header, Navigation & Announcement Bar */ /* ================================================================ HIDE NATIVE TRAY HOMEPAGE ELEMENTS — prevent duplicate sections ================================================================ */ .page-home .banner-tarja-swiper, .page-home .banners-grid, .page-home .banner-line, .page-home .section-comentarios, .page-home .instagram-link, .page-home .line-benefits, .page-home #banner-brands, .page-home .barra-oferta-cabecalho, .page-home .section-news, .page-home main > .container:not(:has(.showcase)):not(:has(#pp-homepage)), .page-home main > .section.banner-tarja-swiper, .page-home main > .section-showcase, .page-home main > svg.svg-sprite { display: none !important; } /* ================================================================ HEADER OVERRIDES — Global dark theme styling SAFETY: All rules below are scoped to .pp-enhanced so they ONLY apply when peptideospro.js has loaded. If JS is missing, the page falls back to the default Tray white theme gracefully. ================================================================ */ /* Hide Tray's native offer bar and banner tarja on ALL pages. NOT scoped to .pp-enhanced — must hide before JS loads to prevent FOUC (flash of the old banner/sacola bar on navigation). */ .barra-oferta-cabecalho, .banner-tarja-swiper { display: none !important; } /* No announcement bar — no top padding needed */ .pp-enhanced .application { padding-top: 0 !important; } /* Dark header background */ .pp-enhanced .header, .pp-enhanced .header .bg, .pp-enhanced .header-mobile { top: 0 !important; background: #111111 !important; } /* Force header links and text to be white against dark bg */ .pp-enhanced .header .text, .pp-enhanced .header .title, .pp-enhanced .header .title-store, .pp-enhanced .header-actions a, .pp-enhanced .header .options-wrapper > a, .pp-enhanced .header .options-wrapper > span, .pp-enhanced .header .options-wrapper > .dropHelp > svg, .pp-enhanced .header .options-wrapper > .dropHelp > p, .pp-enhanced .header .options-wrapper > .orderList > svg, .pp-enhanced .header .options-wrapper > .orderList > p, .pp-enhanced .header .options-wrapper > .account > svg, .pp-enhanced .header .options-wrapper > .account > div > span, .pp-enhanced .central-icons span { color: #FFFFFF !important; } /* Dropdown panels inside header: restore dark text on white bg */ .pp-enhanced .header .dropHelp ul, .pp-enhanced .header .dropdown-account { background: #FFFFFF !important; color: #393939 !important; } .pp-enhanced .header .dropHelp ul a, .pp-enhanced .header .dropHelp ul span, .pp-enhanced .header .dropHelp ul p, .pp-enhanced .header .dropHelp ul b, .pp-enhanced .header .dropHelp ul div, .pp-enhanced .header .dropdown-account a, .pp-enhanced .header .dropdown-account span, .pp-enhanced .header .dropdown-account b { color: #393939 !important; } .pp-enhanced .header .dropdown-account .btn-login { color: #FFFFFF !important; } .pp-enhanced .header .dropHelp ul a:hover, .pp-enhanced .header .dropdown-account a:hover { color: var(--pp-accent) !important; } /* Protect icon fonts in header — never override these, but make them white */ .pp-enhanced .header .icon, .pp-enhanced .header i.icon, .pp-enhanced .header .button-search .icon, .pp-enhanced .header-actions .icon, .pp-enhanced .central-icons .icon { font-family: 'icons-new', 'go' !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: #FFFFFF !important; } /* Normalize header options — same font size and icon size for all 3 */ .pp-enhanced .header .options-wrapper > .dropHelp > p, .pp-enhanced .header .options-wrapper > .orderList > p, .pp-enhanced .header .options-wrapper > .account > div > span { font-size: 13px !important; font-weight: 500 !important; } .pp-enhanced .header .options-wrapper > .dropHelp > svg, .pp-enhanced .header .options-wrapper > .orderList > svg, .pp-enhanced .header .options-wrapper > .account > svg { width: 26px !important; height: 26px !important; } /* Fix search input styling */ .pp-enhanced .header .header-search-wrapper { display: flex !important; align-items: center !important; background: #FFFFFF !important; border-radius: 8px !important; overflow: hidden !important; border: none !important; } .pp-enhanced .header .input-search { font-family: var(--pp-font-body) !important; background: transparent !important; color: #111111 !important; border: none !important; box-shadow: none !important; } .pp-enhanced .header .button-search { display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; } .pp-enhanced .header .button-search .icon { color: #111111 !important; } /* Style header fonts and logo */ .pp-enhanced .header .logo, .pp-enhanced .header .logo a { font-family: var(--pp-font-display) !important; font-size: 22px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -0.02em; } .header-logo { display: flex !important; align-items: center !important; } .header-logo img { height: 48px !important; width: auto !important; display: block !important; object-fit: contain !important; max-width: 200px !important; } /* Nav menu styling — exclude dropdown links which have their own dark color */ .pp-enhanced .header .menu-list > li > a, .pp-enhanced .header nav a:not(.pp-dropdown a):not(.pp-mega-col a):not(.pp-mega-fallback) { font-family: var(--pp-font-body) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em; color: rgba(255,255,255,0.75) !important; } .pp-enhanced .header .menu-list > li > a:hover, .pp-enhanced .header nav a:not(.pp-dropdown a):not(.pp-mega-col a):hover { color: #FFFFFF !important; } /* ================================================================ CUSTOM NAVIGATION — replaces Tray default nav ================================================================ */ .pp-nav-list { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .pp-nav-item { position: relative; } .pp-nav-link { display: inline-flex !important; align-items: center !important; font-family: var(--pp-font-body) !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(255,255,255,0.75) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 22px 18px !important; text-decoration: none !important; cursor: pointer; transition: color 0.2s; white-space: nowrap; } .pp-nav-link:hover { color: #FFFFFF !important; } .pp-dropdown-trigger svg { transition: transform 0.2s; } .pp-has-dropdown:hover .pp-dropdown-trigger svg { transform: rotate(180deg); } /* Dropdown menu */ .pp-dropdown { display: none; position: absolute; top: 100%; left: 0; background: #FFFFFF; border: 1px solid var(--pp-border); border-radius: 12px; box-shadow: 0 12px 36px rgba(15,23,42,0.10); padding: 8px 0; min-width: 220px; z-index: 200; list-style: none; } .pp-has-dropdown:hover .pp-dropdown { display: block; } .pp-enhanced .pp-dropdown li a, .pp-dropdown li a { display: block !important; padding: 10px 20px !important; font-family: var(--pp-font-body) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--pp-text) !important; text-decoration: none !important; transition: background 0.15s, color 0.15s; text-transform: none !important; letter-spacing: 0 !important; } .pp-enhanced .pp-dropdown li a:hover, .pp-dropdown li a:hover { background: var(--pp-accent-dim); color: var(--pp-accent) !important; } /* Brands dropdown: multi-column layout. With 30+ brands a single-column list was too tall to scan. Uses CSS multi-column (not grid) so the existing