/* 32505 EPIC mockup (1095466 -> 32505 flip 2026-09-05) - operator-managed per-store CSS. 2026-08-27. Content-area links in brand blue so customers can spot them (Jeremy round-2 #4). Scoped to authored-content regions ONLY - nav, buttons and the header band keep their design colors (the topbar is dark; a blanket rule would go dark-on-dark). !important needed: the EPIC XML hard-codes epic-bundle.css AFTER css_advanced_user, so source order cannot win. :visited included - the bundle ships a:visited{color:inherit} which turns visited links into plain text, and the store owner has visited everything on his own site. getComputedStyle lies for visited links (privacy) - verify by screenshot, not computed color. */ .de_text-tool a, .category-header-info a, .epic-pd__prose a, .epic-pd__abstract a, .epic-blogview__content a, #product-description a, .de_text-tool a:visited, .category-header-info a:visited, .epic-pd__prose a:visited, .epic-pd__abstract a:visited, .epic-blogview__content a:visited, #product-description a:visited { color: #2F9E44 !important; text-decoration: underline !important; } /* Round-4 (2026-08-28): links moved blue -> green (his blue buttons made blue links invisible). Links that ARE buttons (TinyMCE-authored anchors carrying an inline background) get white text instead - green-on-blue reads badly. */ .de_text-tool a[style*="background"], .category-header-info a[style*="background"], .epic-pd__prose a[style*="background"], .epic-pd__abstract a[style*="background"], #product-description a[style*="background"] { color: #ffffff !important; text-decoration: none !important; } /* Logo legibility on the toned header band: his logo art is blue/red on transparent, drawn for the live site's WHITE masthead. White chip behind it until a band-ready logo asset exists (photoroom white-bg version). */ .epic-header .epic-header__logo, .epic-header a.logo_wrapper.main_logo { background: #ffffff; border-radius: 10px; padding: 6px 12px; } /* ================= Round-3 colour pass (Jeremy, 2026-08-27) ================= Greens + reds alongside the brand blue, per his round-3 notes - kept as per-store CSS on purpose (shared EPIC tokens stay one brand pair). Green anchor #2F9E44 ~ the live site's cash-back green. */ /* Topbar (Need Help / Offers / email row): round-4 - red with white text per Jeremy's ask (was green in round 3; he moved the green to the links). */ .epic-header__topbar { background: #CF2E2E !important; } .epic-header__topbar, .epic-header__topbar a, .epic-header__topbar a:visited, .epic-header__topbar i { color: #ffffff !important; } /* Shop-by cards: alternate the accent blue -> green on every second card. The tiles are inline-styled content blocks with no classes, so we key on the section's 230px grid template - operator-managed, revisit if he rebuilds the tiles in the editor. */ div[style*="minmax(230px"] > a:nth-child(even) strong { color: #2F9E44 !important; } div[style*="minmax(230px"] > a:nth-child(even) span > span { color: #2F9E44 !important; } div[style*="minmax(230px"] > a:nth-child(even) svg { stroke: #2F9E44 !important; } /* Reds for the discount signals, echoing his legacy sale visuals. */ .flat-label.sale { background-color: #CF2E2E !important; color: #fff !important; } .epic-badge--offer { background: #FDEBEB !important; color: #C22626 !important; border-color: #E9A8A8 !important; } /* Blog cards: show roughly double the excerpt (his round-2 ask to expand the homepage blog block). Bundle clamps to 3 lines for everyone else. */ .epic-blog-card__excerpt { -webkit-line-clamp: 6 !important; line-clamp: 6 !important; } /* ============== Round-5 (2026-08-28): desktop above-the-fold pass ============== Jeremy: "bring the Shop-by tiles closer to the banner - you can just barely see them at the bottom of the screen." Cap the hero band and trim the tile band's inline 48px padding (inline style needs !important). Scoped to the block directly after the slider so other 48px containers keep their rhythm. Desktop only - phones keep the full-height hero. */ @media (min-width: 992px) { .epic-hero--lg { min-height: 400px !important; } .epic-hero--lg .epic-hero__inner { padding-top: clamp(20px, 2.5vw, 40px); padding-bottom: clamp(20px, 2.5vw, 40px); } .slider-area + .container[style*="padding-top:48px"] { padding-top: 24px !important; padding-bottom: 28px !important; } } /* ============== Round-6 (2026-08-29): hero focal points ============== Jeremy: the 400px cap cropped the mini splits out of banners 2 and 3 - both photos have the unit mounted high on the wall (bedroom ~13-23% from the top, apartment ~4-13%) and object-fit:cover's default centre crop shows the 31-69% band at 1920px. Bias each image's crop toward its unit. Keyed on src (owl-carousel clones slides, so nth-child is unreliable). Same breakpoint as the cap - phones crop horizontally, units already show. */ @media (min-width: 992px) { /* Store-wide default for any FUTURE hero image: bias the crop toward the top, because mini split photos near-always have the unit high on a wall - the centred crop that caused this report would cause it again on his next upload. The per-image rules below have equal specificity, so they must FOLLOW this rule (source order decides). */ .epic-hero--lg .epic-hero__img { object-position: center 25%; } .epic-hero--lg .epic-hero__img[src*="pexels_hero_closeup"] { object-position: center center; } /* slide 1: unit fills the frame, Jeremy approved the centre crop - keep it */ .epic-hero--lg .epic-hero__img[src*="pexels_hero_bedroom"] { object-position: center 15%; } .epic-hero--lg .epic-hero__img[src*="pexels_hero_apartment"] { object-position: center 5%; } } /* ============== Round-8 (2026-09-01): round-7 mirror RETIRED ============== The bundle (epic-bundle.css?v=37) now skips its description normalizer for descriptions that ship their own