/* Site-wide E Promote Global styles. Moved out of src/views/partials/site-head.ejs so the browser downloads it once and caches it, instead of receiving the same 10KB inside every page. Load order matters: this file must come AFTER custom.css and after any page-specific stylesheet, because these rules override them. */ :root{ --primary:#FFD81B; --secondary:#101834; --navy2:#111938; --font-display:'Anton', Impact, 'Arial Narrow Bold', sans-serif; --font-body:'Archivo', 'Segoe UI', Arial, sans-serif; } /* Body / UI type. Weight 500 (not 400) so body copy holds its own against the heavy Anton headings; at 400 the page read thin next to them. */ body{ font-family:var(--font-body); font-weight:500; -webkit-font-smoothing:antialiased; } /* Muted/secondary copy can drop back to 400 where it should recede. */ small{ font-weight:400; } /* Display type: bold pop-art poster headings, used everywhere for consistency */ /* NOTE: the template ships `.c-font-uppercase{text-transform:inherit}` which out-ranks a bare h1..h5 selector, so the .c-content-title-3 selectors below are what actually keep hero/section headings uppercase. Keep h1 and h2 in this list or they silently drop to sentence case. */ h1,h2,h3,h4,h5,.epg-display, .c-content-title-3 h1,.c-content-title-3 h2, .c-content-title-3 h3,.c-content-title-3 h4{ font-family:var(--font-display) !important; font-weight:400 !important; letter-spacing:.6px; text-transform:uppercase; -webkit-text-stroke:0; } /* Anton is naturally tall/tight; give headings a touch more breathing room */ .c-content-title-3 h1,.c-content-title-3 h2,.c-content-title-3 h3{ line-height:1.05; } /* The template only styles .c-content-title-3 > h3. We use a proper heading hierarchy (one h1 per page, h2 for sections), so mirror those rules onto h1/h2 to keep the pop-art look identical. See Global SEO Standards. */ .c-content-title-3 > h1,.c-content-title-3 > h2{ font-size:28px; color:#3f444a; font-weight:500; margin:0 0 15px 0; } .c-content-title-3 > h1.c-font-uppercase,.c-content-title-3 > h2.c-font-uppercase{ font-weight:700; font-size:48px; } strong,b{ font-weight:700; } /* Liquid-glass inner-page header (matches the homepage vibe) */ .epg-hdr{ position:sticky; top:0; z-index:1000; background:rgba(16,24,52,.72); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.10); box-shadow:0 6px 24px rgba(0,0,0,.22); } .epg-hdr-in{ max-width:1170px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; justify-content:space-between; } .epg-hdr-logo img{ height:60px; } .epg-hdr-menu{ list-style:none; display:flex; gap:20px; margin:0; padding:0; align-items:center; text-transform:uppercase; font-weight:700; font-size:14px; letter-spacing:.4px; } .epg-hdr-menu a{ color:#fff; text-decoration:none; } .epg-hdr-menu a:hover, .epg-hdr-menu a.active{ color:var(--primary); } .epg-hdr-cta{ background:var(--primary); color:#101834 !important; padding:9px 18px; border-radius:24px; } .epg-hdr-cart{ position:relative; } .epg-hdr-cart .b{ background:var(--primary); color:#101834; border-radius:10px; padding:1px 7px; font-size:12px; margin-left:3px; } .epg-hdr-cur select{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:20px; padding:6px 10px; font-weight:700; font-size:13px; letter-spacing:.3px; cursor:pointer; -webkit-appearance:none; appearance:none; } .epg-hdr-cur select:hover{ border-color:var(--primary); } .epg-hdr-cur select option{ color:#101834; background:#fff; } .epg-hdr-toggle{ display:none; color:#fff; font-size:24px; background:none; border:none; cursor:pointer; } .epg-hdr-cb{ display:none; } @media(max-width:900px){ .epg-hdr-in{ flex-wrap:wrap; } .epg-hdr-toggle{ display:inline-block; } .epg-hdr-menu{ display:none; flex-direction:column; width:100%; gap:0; margin-top:8px; align-items:stretch; } .epg-hdr-menu li a{ display:block; padding:12px 4px; border-top:1px solid rgba(255,255,255,.12); } .epg-hdr-cb:checked ~ .epg-hdr-menu{ display:flex; } } /* Wavy section divider (reuses the template's sborders_06 wave) */ .epg-wave{ height:100px; background-image:url(/images/sborders_06.png); background-repeat:repeat-x; background-position:center top; } .c-content-box p{ font-size:16px; line-height:1.75; } .epg-yellow-btn{ background:var(--primary) !important; color:#101834 !important; border:none !important; border-radius:6px !important; font-weight:700; } .epg-navy-btn{ background:var(--secondary) !important; color:#fff !important; border:none !important; border-radius:6px !important; font-weight:700; } /* Bigger sections so only one wavy divider is ever in view while scrolling */ .c-content-box.c-size-md{ padding-top:92px !important; padding-bottom:92px !important; } /* Each section + its wave always exceeds the viewport height, so two wavy dividers are never visible at the same time (on any screen size). */ .epg-sec-min{ min-height:calc(100vh - 84px); } .epg-eyebrow{ text-transform:uppercase; letter-spacing:2.5px; font-size:13px; font-weight:800; } /* Liquid-glass surfaces (used across all sections) */ .epg-glass{ background:rgba(255,255,255,.13); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); border:1px solid rgba(255,255,255,.22); border-radius:18px; } .epg-glass-light{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border:1px solid rgba(255,255,255,.75); border-radius:18px; box-shadow:0 10px 34px rgba(16,24,52,.10); } .epg-glass-navy{ background:rgba(16,24,52,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(16,24,52,.12); border-radius:18px; } .epg-pill-glass{ display:inline-block; background:rgba(255,255,255,.20); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.35); padding:9px 18px; border-radius:30px; font-weight:700; margin:5px; } .epg-glass-pad{ padding:26px; } /* Equal-height card rows (cards in a row match the tallest, on any content) */ .epg-eq{ display:flex; flex-wrap:wrap; } .epg-eq > [class*="col-"]{ display:flex; margin-bottom:20px; } .epg-eq > [class*="col-"] > *{ width:100%; } /* On phones the Bootstrap col-md and col-sm classes provide no width, which left the flex items sizing to content (ragged widths and heights). Force every card column to a full-width single-column stack below the tablet size. */ @media (max-width:767px){ .epg-eq > [class*="col-"]{ flex:0 0 100%; max-width:100%; } } /* Responsive tables: a wide table (cart, receipt) scrolls inside its own box on small screens instead of pushing the whole page sideways. */ @media (max-width:640px){ .container table, .c-content-box table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* Collapsible FAQ (pure CSS
, no JavaScript needed) */ .epg-faq{ margin-bottom:14px; overflow:hidden; } .epg-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; } .epg-faq summary::-webkit-details-marker{ display:none; } .epg-faq summary::marker{ content:''; } .epg-faq .epg-faq-q{ font-family:var(--font-body); font-weight:600; font-size:17px; line-height:1.35; } .epg-faq .epg-faq-chev{ transition:transform .25s ease; } .epg-faq[open] .epg-faq-chev{ transform:rotate(180deg); } .epg-faq .epg-faq-a{ padding:0 26px 24px; } .epg-faq .epg-faq-a p{ margin:0; font-size:15.5px; line-height:1.75; } .epg-faq summary:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:16px; } /* ========================================================================== Utility classes for the legal / policy pages -------------------------------------------------------------------------- These replace the highest-frequency IDENTICAL inline style="..." strings in src/views/legal/*.ejs. Each declaration block is byte-identical to the inline string it replaces, so the rendering does not change. Why each selector is doubled (.epg-x.epg-x): An inline style beats every class. Moving a declaration out of the style attribute makes it losable to existing theme rules that target the same element. Real conflicts that exist today: .c-content-box p (epg.css) -> line-height:1.75 .c-content-title-3 > h2 (epg.css) -> color:#3f444a; font-size:28px a:hover / a:focus (default.css) -> color:#32c5d2 a:hover / a:focus (components.css) -> text-decoration:none h2, p, ul, a (bootstrap.min.css) -> font-size, margin, color Those selectors have specificity 0,1,1 or lower. Repeating the class name gives these utilities specificity 0,2,0, so they win in every state (including :hover) exactly as the inline style did. This avoids !important. ========================================================================== */ /* Body copy inside a policy page (

and