/* ===========================================================================
Faithful static-restore fixes for saaar.co (Shopify "Ella/Halo" theme).
This theme lazy-renders parts of its header/menu/slideshow via the Shopify
Section Rendering API (XHR), which is dead on a static archive export. Two
theme assets (halo.slide-show.js / halo.image-banner-slide.js) and the
section-rendered layout CSS were never archived. These rules ONLY re-assert
the theme's own intended dimensions/behaviour so the archived page renders
as it did originally. No colours, fonts, copy, layout structure or design
are changed.
=========================================================================== */
/* --- 1) Icon sizing: inline SVGs use width="100%" height="100%" and rely on a
JS-built sized parent that never renders; cap them to the theme's own
declared icon sizes (22-24px) so they don't fill the viewport. --- */
svg.icon,
svg[class*="icon-"]{
width: 24px; height: 24px;
max-width: 24px; max-height: 24px;
flex: 0 0 auto; display: inline-block; vertical-align: middle;
}
.header__icon svg,
.header__icon--account svg,
.header__icon--wishlist svg,
.header__icon--cart svg,
.header__icon--search svg{ width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
.icon-caret, svg.icon-caret, .icon-arrow-nav{ width: 14px; height: 14px; max-width: 14px; max-height: 14px; }
.slick-prev svg, .slick-next svg, svg.icon-chevron-right, svg.icon-chevron-left{
width: 18px; height: 18px; max-width: 18px; max-height: 18px; }
.icon-close, .icon-hamburger, svg.icon-account, svg.icon-sign-up, svg.icon-wishlist{
max-width: 28px; max-height: 28px; }
/* --- 2) Slideshow / image-banner: halo.slide-show.js (which Slick-ifies the
.slideshow and constrains each .item to one viewport-width slide) is not
in any archive snapshot. Without it the raw slides lay out at their full
intrinsic image width (~2800px) and overflow the page. Re-assert the
theme's intent: clip the slideshow to its container and show the first
slide full-width (graceful static-banner fallback), hide the rest. --- */
.slideshow,
.halo-block.image-banner,
[data-init-slideshow]{
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.slideshow > .item,
[data-init-slideshow] > .item{
width: 100%;
max-width: 100%;
}
/* Before Slick initialises (first paint), show only the first slide so the
stacked raw slides don't pile up; once .slick-initialized is added by the
real halo.slide-show.js, Slick's own track owns slide visibility. */
.slideshow:not(.slick-initialized) > .item:not(:first-child),
[data-init-slideshow]:not(.slick-initialized) > .item:not(:first-child){
display: none;
}
/* Slick track/list safety: never exceed the viewport width */
.slick-list, .slick-track{ max-width: 100%; }
/* The theme ships `.slick-slide{visibility:hidden}` and reveals slides only once
the carousel is wired up; its complementary `visibility:visible` reveal rule
lives in the absent section CSS, so with the (now real) Slick initialised the
slides stay invisible → a blank hero. Re-assert slick's own reveal. */
.slick-initialized .slick-slide{ visibility: visible; }
.slideshow.slick-initialized .slick-slide,
.slideshow.slick-initialized .item{ visibility: visible; }
/* if Slick somehow does not initialise, still reveal the first slide so the hero
is never blank (graceful static-banner fallback). */
.slideshow:not(.slick-initialized) > .item:first-child,
.slideshow:not(.slick-initialized) > .item:first-child .slick-slide{ visibility: visible; }
/* Each hero slide ships TWO responsive image anchors —
and
—
and the theme shows the PC one on desktop, the mobile one on phones. That
show/hide rule ships in the absent section CSS, so on this export BOTH stack
(and at full intrinsic image height it made the slideshow ~5000px tall). Each
already carries its correct aspect via inline padding-top; we only need to
(a) pick the right one per breakpoint and (b) absolute-fill its image. */
.slideshow .item .adaptive_height,
.slideshow .slick-slide .adaptive_height,
.image-banner .adaptive_height{
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
/* the inline padding-top on .adaptive_height already reserves the correct banner
height; the image link () and the ![]()
are nested one
level deeper, so absolute-fill them as DESCENDANTS (not direct children) and
ignore the raw width/height attrs that otherwise force a ~1070px tall image. */
.slideshow .adaptive_height .slide-image,
.image-banner .adaptive_height .slide-image{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: block;
}
.slideshow .adaptive_height img,
.image-banner .adaptive_height img{
position: absolute;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover;
object-position: center;
transform: none;
}
/* responsive PC/mobile slide selection — the theme's own intent */
@media (min-width: 768px){
.slideshow .slide-mobile, .image-banner .slide-mobile{ display: none !important; }
}
@media (max-width: 767px){
.slideshow .slide-pc, .image-banner .slide-pc{ display: none !important; }
}
/* --- 3) Global overflow guard: a static Shopify export with dead section CSS
can leave a few wide blocks; clip horizontal overflow at the document
level so there is no horizontal scrollbar (vertical untouched). --- */
html, body{ max-width: 100%; overflow-x: hidden; }
img, svg, video{ max-width: 100%; }
/* --- 4) Carousels & brand marquees: these become Slick carousels / animated
marquees via theme JS that partly depends on dead section scripts. Clip
their containers so the un-initialised wide track can't push page width.
(Faithful: same visual region, just contained as the theme intends.) --- */
.products-carousel,
.product-block,
.brand-slider,
.brand-item-scroll,
[class*="products-carousel"],
[class*="brand-slider"]{
max-width: 100%;
overflow: hidden;
}
.brand-layout--infinite .brand-item-scroll{ overflow: hidden; }
/* the brand marquee/grid sizes each .halo-item via `width:var(--width_item)`,
a variable the theme's JS sets from the item count; it is unset on this static
export, so each brand item falls back to auto and (with a full-width image)
stacks one-per-row. Supply the theme's intended per-item width so the brand
row lays out horizontally as designed. */
.brand-slider .halo-row.column-5 > .halo-item,
.brand-slider .brand-layout--grid.column-5 > .halo-item{ width: 20%; }
.brand-slider .halo-row.column-4 > .halo-item{ width: 25%; }
.brand-slider .halo-row.column-6 > .halo-item{ width: 16.6666%; }
.brand-slider .brand-layout--infinite{ --width_item: 20%; }
.brand-slider .brand-layout--infinite .halo-item{ width: var(--width_item, 20%); display: inline-block; vertical-align: top; white-space: normal; }
@media (max-width: 1024px){
.brand-slider .halo-row.column-5 > .halo-item,
.brand-slider .brand-layout--grid.column-5 > .halo-item,
.brand-slider .halo-row.column-4 > .halo-item{ width: 33.3333%; }
.brand-slider .brand-layout--infinite{ --width_item: 33.3333%; }
}
@media (max-width: 749px){
.brand-slider .halo-row > .halo-item,
.brand-slider .brand-layout--grid > .halo-item{ width: 50%; }
.brand-slider .brand-layout--infinite{ --width_item: 50%; }
}
/* product carousels: until Slick wraps them, wrap items into a flex row that
stays within the viewport instead of a single overflowing track */
.products-carousel:not(.slick-initialized),
[class*="products-carousel"]:not(.slick-initialized){
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.products-carousel:not(.slick-initialized) > *,
[class*="products-carousel"]:not(.slick-initialized) > *{
flex: 0 1 auto;
max-width: 100%;
}
/* --- 5) Product cards & grids: the product-section layout CSS (grid columns,
card-media aspect-ratio boxes, absolute-positioned media images) was
delivered by the Shopify Section Rendering API and is absent from the
static archive, so cards/images collapse to 0x0. Re-assert the theme's
own intended layout, driven by its existing markup classes
(.products-grid.column-N, .card-media--square padding-bottom:100%). --- */
/* grid containers: lay items out in the column count the markup declares */
.products-grid, .halo-row.products-grid,
.halo-row.brand-layout--grid,
.spotlight-block .halo-row,
.halo-row[class*="column-"]{
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.products-grid > .product,
.products-grid > .product-item,
.halo-row[class*="column-"] > .halo-item,
.brand-layout--grid > .halo-item{
box-sizing: border-box;
padding: 0 10px;
}
/* column counts */
.column-2 > .product, .column-2 > .product-item, .column-2 > .halo-item{ width: 50%; }
.column-3 > .product, .column-3 > .product-item, .column-3 > .halo-item{ width: 33.3333%; }
.column-4 > .product, .column-4 > .product-item, .column-4 > .halo-item{ width: 25%; }
.column-5 > .product, .column-5 > .product-item, .column-5 > .halo-item{ width: 20%; }
.column-6 > .product, .column-6 > .product-item, .column-6 > .halo-item{ width: 16.6666%; }
@media (max-width: 1024px){
.column-4 > .product, .column-4 > .product-item, .column-4 > .halo-item,
.column-5 > .product, .column-5 > .product-item, .column-5 > .halo-item,
.column-6 > .product, .column-6 > .product-item, .column-6 > .halo-item{ width: 33.3333%; }
}
@media (max-width: 749px){
.column-2 > .product, .column-2 > .product-item, .column-2 > .halo-item,
.column-3 > .product, .column-3 > .product-item, .column-3 > .halo-item,
.column-4 > .product, .column-4 > .product-item, .column-4 > .halo-item,
.column-5 > .product, .column-5 > .product-item, .column-5 > .halo-item,
.column-6 > .product, .column-6 > .product-item, .column-6 > .halo-item{ width: 50%; }
}
/* card-media aspect-ratio boxes: the markup sets style="padding-bottom:100%"
(square) etc.; make that produce a real box with the image filling it */
.card-media, .card__media, .media, .image.adaptive_height,
.images-contain, .wrapper-image,
[class*="card-media"]{
position: relative;
display: block;
width: 100%;
overflow: hidden;
}
.card-media > img, .card__media > img, .media > img,
.images-contain > img, .wrapper-image > img,
.card-media a > img, .card-media picture > img,
[class*="card-media"] img{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
/* product image wrappers must have a width so padding-bottom% gives height */
.card-product, .card-product__wrapper, .product-item, .product{ width: 100%; }
/* if a media box has no inline padding-bottom, give a sensible square fallback */
.card-media:not([style*="padding"]){ padding-bottom: 100%; }
/* 5b) Empty product-card media on this static export: several product
sections are populated by Shopify's Section-Rendering / AJAX product API,
which is dead here, so their `.card-media.animated-loading` boxes never
receive an ![]()
and the theme's INFINITE shimmer keeps animating an empty
grey/diagonal gradient (looks like coloured strips). Calm those never-to-load
placeholders: stop the perpetual shimmer and show a single neutral tone, so
each card reads cleanly as title + price over a quiet placeholder rather than
a broken animation. (Cards whose image IS present render normally.) */
.card-media.animated-loading{
animation: none !important;
background: #f3f1ef !important; /* the theme's own placeholder tone, static */
}
.card-media.animated-loading > img{ opacity: 1 !important; } /* if an img IS there, show it */
/* --- 6) Off-canvas drawers (search / mobile-menu / login) & modal overlays &
popups: the Halo theme keeps these CLOSED by default and only reveals
them when theme.js adds `.is-active` (drawers) / `.show`|`.is-visible`
(popups) / a parent (search modal) on user click. The
theme's closed-state rules ship in section-rendered CSS that the static
archive lacks, so on this export the off-canvas search/menu sidebars and
the full-screen search overlay and the newsletter/video/warning popups
leak into the page (a sidebar's full-bleed close-button SVG then renders
as a giant X). These rules re-assert ONLY the theme's own documented
CLOSED state; theme.js still opens them normally (add .is-active) so
behaviour is unchanged from the original live store. --- */
/* 6a) Off-canvas sidebars: hidden + pushed off-canvas until .is-active.
(Left drawers slide from left, right drawers from right — matches the
theme's own .halo-sidebar-left / .halo-sidebar-right intent.) */
.halo-sidebar:not(.is-active){
position: fixed;
top: 0;
bottom: 0;
width: 0 !important;
max-width: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
overflow: hidden !important;
z-index: -1 !important;
}
.halo-sidebar.halo-sidebar-left:not(.is-active){ left: -101% !important; right: auto !important; }
.halo-sidebar.halo-sidebar-right:not(.is-active){ right: -101% !important; left: auto !important; }
/* its contents must not paint or take space while closed */
.halo-sidebar:not(.is-active) > *,
.halo-sidebar:not(.is-active) .halo-sidebar-wrapper,
.halo-sidebar:not(.is-active) .halo-sidebar-close{ display: none !important; }
/* 6b) Full-screen search overlay (.search-modal.modal__content): the theme
makes it opacity:0 and reveals it via `details[open] > .search-modal`.
Keep it fully out of the layout/interaction unless its is open. */
.search-modal.modal__content{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
details[open] > .search-modal.modal__content,
details[open] .search-modal.modal__content{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* 6c) Popups (newsletter / video / warning / quick-view / someone-purchased):
theme reveals via `.show` / `.is-visible` / `.is-active`. Hide otherwise. */
.halo-popup:not(.show):not(.is-visible):not(.is-active){
display: none !important;
}
/* 6d) Belt-and-suspenders: close-button SVGs (these have NO icon class, so the
width/height:100% inline attrs let them fill any container). Cap to the
theme's own close-icon size so none can ever render as a full-screen X. */
.halo-sidebar-close svg,
.halo-popup-close svg,
.search-modal__close-button svg,
.header-search-close svg,
[data-close-sidebar] svg,
[data-search-close-sidebar] svg,
[data-close-auth-sidebar] svg,
[data-close-warning-popup] svg,
[data-popup-close] svg,
a[class*="-close"] svg,
button[class*="-close"] svg{
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
display: inline-block;
vertical-align: middle;
}
/* --- 7) Header responsive show/hide + desktop nav layout. The theme ships two
header sections — `.section-header-navigation` (desktop) and
`.section-header-mobile` (mobile) — and swaps them by viewport. Its own
rule `@media (max-width:1024px){.section-header-navigation{display:none}}`
is present (component-megamenu.css), but the COMPLEMENTARY rule that
hides the MOBILE header on desktop ships in section CSS absent from this
static export, so on desktop BOTH headers stack. Re-assert the theme's
own intended breakpoint behaviour. --- */
@media (min-width: 1025px){
.section-header-mobile{ display: none !important; }
}
@media (max-width: 1024px){
/* desktop nav already hidden by theme; keep mobile header visible */
.section-header-mobile{ display: block; }
}
/* 7b) Desktop inline menu: the markup is