/* ============================================================================
iheartparty Rentals — STOREFRONT THEME
Name: "Vintage Cream" (default)
File: inventory/static/shop/theme.css
HOW TO SWITCH THEMES (developer)
--------------------------------
Open inventory/templates/shop/base.html and change ONE line:
to point at another stylesheet in this folder, e.g.:
Every visual decision lives in the CSS custom properties (variables) in
:root below — palette, fonts, and a few component-level knobs. The rest of
the stylesheet only consumes those variables, so a new theme usually means
copying this file and editing the :root block (and, if needed, any of the
component rules underneath).
NOTE: the Tailwind config in base.html maps its colour names (cream, sand,
ink, muted, terra, terradark, gold) to these same variables, so utility
classes like `bg-terra` or `text-muted` automatically follow the theme.
The shared availability calendar (static/shop/calendar.js) also reads
--ihp-terra / --ihp-ink / --ihp-sand / --ihp-cream / --ihp-gold.
----------------------------------------------------------------------------
CHROME SCROLL-ANCHORING vs. THE COMPACT HEADER
----------------------------------------------------------------------------
Switching to the compact header shrinks the sticky header, and that height
change is ANIMATED (logo-row padding transitions here; the nav's wrap ->
nowrap is a JS-driven max-height clip — see base.html). Chrome's scroll
anchoring would "compensate" for the in-flight layout shift by adjusting
the scroll position, fighting the animation, so it stays disabled.
(Safari doesn't implement scroll anchoring anyway.) Catalog cards keep
fixed-size slots, so anchoring buys almost nothing here.
========================================================================== */
body { overflow-anchor: none; }
:root {
/* ---- Palette -------------------------------------------------------- */
--ihp-cream: #FAF6F0; /* page background */
--ihp-sand: #F1E9DE; /* subtle borders, dividers, input fills */
--ihp-sand-deep: #D9CDBE; /* stronger borders (chips, outlines) */
--ihp-ink: #26221E; /* main text */
--ihp-muted: #7A7168; /* secondary text */
--ihp-terra: #A15C48; /* PRIMARY ACCENT — buttons, links, badges */
--ihp-terradark: #854A39; /* accent hover state */
--ihp-gold: #C8A24B; /* secondary accent (hover underlines etc.) */
--ihp-panel: #FFFFFF; /* cards, dropdown panels */
/* ---- Typography ------------------------------------------------------ */
--ihp-font-display: 'Cormorant Garamond', serif; /* headings, logo */
--ihp-font-body: 'Jost', sans-serif; /* body text */
/* ---- Component knobs ------------------------------------------------- */
--ihp-btn-radius: 9999px; /* pill buttons; use .4rem for a squarer look */
--ihp-drop-shadow: 0 14px 40px rgba(38, 34, 30, .12);
--ihp-img-aspect: 1 / 1; /* aspect ratio for EVERY photo on the site
(1/1 = square, 4/5 = portrait, 16/9 = wide) */
}
/* ---- Base ---------------------------------------------------------------- */
body { background: var(--ihp-cream); color: var(--ihp-ink); font-family: var(--ihp-font-body); }
/* Small uppercase section labels ("Step 1 · Review", card headings…) */
.eyebrow { letter-spacing: .22em; text-transform: uppercase; font-size: .68rem;
color: var(--ihp-terra); font-weight: 500; }
/* Catalog card images use the global photo aspect ratio with a soft tint */
.card-img { aspect-ratio: var(--ihp-img-aspect); object-fit: cover; width: 100%; background: var(--ihp-sand); }
/* Catalog/product cards: skip rendering work for offscreen cards. The
filtering JS rebuilds the whole grid on every keystroke; with 300+ cards
content-visibility keeps layout/paint confined to the viewport. The
intrinsic size estimate (square photo + text block) avoids scrollbar
jumpiness; `auto` reuses the last rendered size once seen. */
.cal-card { content-visibility: auto; contain-intrinsic-size: auto 380px; }
/* Photo loading indicator: wrap an ![]()
in .img-load and a spinner shows
behind it until the image content paints over it (an unloaded ![]()
is
transparent). shop.js adds .loaded once the image fires load/error, so
the spinner stops animating; without JS it still hides under the photo.
Badges (discount/package/availability) sit above the image via z-index. */
.img-load { position: relative; }
.img-load::after {
content: ''; position: absolute; inset: 0; z-index: 2;
width: 32px; height: 32px; margin: auto;
border-radius: 50%;
border: 3px solid rgba(38, 34, 30, .15);
border-top-color: var(--ihp-terra);
animation: ihp-spin .8s linear infinite;
}
.img-load > img { position: relative; z-index: 1; }
.img-load > .badge { z-index: 3; }
.img-load.loaded::after { display: none; }
/* Lightbox image box: keep a minimum size so the spinner has room while
the (initially empty) image resolves. */
.img-load.lb-img-box { min-width: 200px; min-height: 200px; }
@keyframes ihp-spin { to { transform: rotate(360deg); } }
/* EVERY photo on the site (cards, gallery mains + thumbs, wishlist rows,
autocomplete results) uses --ihp-img-aspect. `height: auto !important`
neutralises fixed-height utility classes (h-11, h-16, h-24 …) so the
ratio always wins; widths still come from the utility classes. */
img { aspect-ratio: var(--ihp-img-aspect); height: auto !important; object-fit: cover; }
/* Brand images (header logo) opt out of the photo aspect treatment: fixed
WIDTH via utility classes, natural height follows. (Height utilities still
lose to the `!important` above, so size logos by width.) */
.logo-img { aspect-ratio: auto; object-fit: contain; }
/* Tiny uppercase status pills (discount −20%, "Package", availability) */
.badge { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
padding: .2rem .5rem; border-radius: 9999px; }
/* ---- Buttons ------------------------------------------------------------- */
.btn-primary { background: var(--ihp-terra); color: #fff; padding: .7rem 1.6rem;
border-radius: var(--ihp-btn-radius); font-size: .85rem;
letter-spacing: .12em; text-transform: uppercase; transition: background .2s; }
.btn-primary:hover { background: var(--ihp-terradark); }
.btn-outline { border: 1px solid var(--ihp-ink); color: var(--ihp-ink); padding: .7rem 1.6rem;
border-radius: var(--ihp-btn-radius); font-size: .85rem;
letter-spacing: .12em; text-transform: uppercase; }
/* accordions on product/info pages */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
/* ---- Tags: small rounded filter chips ------------------------------------ */
.chip { font-size: .75rem; padding: .3rem .8rem; border-radius: 9999px;
border: 1px solid var(--ihp-sand-deep); color: var(--ihp-muted); }
.chip.active { background: var(--ihp-ink); color: var(--ihp-cream); border-color: var(--ihp-ink); }
/* Colour tags render as a plain swatch; the name lives in the tooltip. */
.chip-colour { display: inline-block; width: 1.75rem; height: 1.75rem;
border-radius: 9999px; border: 1px solid var(--ihp-sand-deep); }
.chip-colour.active { outline: 2px solid var(--ihp-terra); outline-offset: 2px; }
/* ---- Site header -------------------------------------------------------------
The Tailwind Play CDN SILENTLY DROPS any `bg-/` utility
whose colour is a CSS variable (cream/sand/ink…): it cannot parse the hex
inside var(--ihp-cream), so the whole declaration is discarded. The header
and search box were therefore fully transparent — the "blurred band" was
just backdrop-blur over whatever scrolled beneath. Define the frosted
fills here; they follow the active theme. First declaration is the
no-color-mix fallback (older browsers get solid cream). */
header.site-header { background-color: var(--ihp-cream);
background-color: color-mix(in srgb, var(--ihp-cream) 90%, transparent); }
header.site-header input[type="search"] { background-color: var(--ihp-sand);
background-color: color-mix(in srgb, var(--ihp-sand) 70%, transparent); }
/* ---- Categories: serif underlined links (deliberately distinct from tags) - */
.cat-link { font-family: var(--ihp-font-display); font-size: 1.15rem; font-weight: 600;
letter-spacing: .04em; padding: .5rem .4rem; white-space: nowrap; min-height: 44px;
display: inline-flex; align-items: center;
color: var(--ihp-ink); border-bottom: 2px solid transparent; }
.cat-link:hover { border-color: var(--ihp-gold); }
.cat-link.active { border-color: var(--ihp-terra); color: var(--ihp-terra); }
/* ---- Nested hover dropdown navigation ------------------------------------ */
.cat-has-drop { position: relative; }
/* Chevron that expands a parent's subcategories inline (mobile expanded
nav only — desktop keeps the hover dropdown). */
.cat-tw { display: none; }
/* ---- Category page: breadcrumb-area subcategory browser ------------------ */
/* The current category's breadcrumb crumb doubles as the toggle (count +
chevron) for a vertical subcategory list; entries with children expand
inline (indented) via their own chevron. */
.subcat-crumb { font: inherit; color: var(--ihp-ink); font-weight: 500;
background: none; border: none; cursor: pointer; padding: 0; }
.subcat-crumb:hover { color: var(--ihp-terra); }
.subcat-crumb .chev { display: inline-block; transition: transform .2s ease; color: var(--ihp-gold); }
.subcat-crumb[aria-expanded="true"] .chev { transform: rotate(90deg); }
.subcat-list { max-width: 26rem; border: 1px solid var(--ihp-sand); border-radius: .75rem;
background: var(--ihp-panel); padding: .35rem; margin-bottom: .5rem; }
.subcat-row { display: flex; flex-wrap: wrap; align-items: center; }
.subcat-row > .cat-link { font-size: 1rem; padding: .4rem .55rem; flex: 1; min-width: 8rem; }
.subcat-tw { padding: .25rem .55rem; font-size: .75rem; color: var(--ihp-gold);
background: transparent; border: none; cursor: pointer; }
.subcat-tw .chev { display: inline-block; transition: transform .2s ease; }
.subcat-tw[aria-expanded="true"] .chev { transform: rotate(90deg); }
.subcat-kids { flex-basis: 100%; padding: .1rem .35rem .35rem 1.4rem; }
.subcat-kids > .cat-link { display: block; font-size: .95rem; padding: .3rem .55rem; }
.drop, .flyout { position: absolute; background: var(--ihp-panel);
border: 1px solid var(--ihp-sand); border-radius: .9rem;
box-shadow: var(--ihp-drop-shadow); padding: .5rem; min-width: 13rem; z-index: 45;
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity .18s ease, transform .18s ease; }
.drop { top: 100%; left: 0; }
.flyout { top: -.55rem; left: calc(100% - .4rem); }
.cat-has-drop.open > .drop, .drop-item.open > .flyout {
opacity: 1; transform: translateY(0); pointer-events: auto; }
.drop-item { position: relative; }
.drop-item > a, .flyout > a { display: block; padding: .5rem .8rem; border-radius: .6rem;
font-size: .9rem; white-space: nowrap; }
.drop-item > a:hover, .flyout > a:hover { background: var(--ihp-cream); color: var(--ihp-terra); }
.drop-item.has-flyout > a::after { content: '›'; float: right; color: var(--ihp-gold); margin-left: 1.5rem; }
@media (min-width: 768px) {
.sticky-if-desktop {
position: sticky;
}
/* Graceful compact collapse (see the scroll handler in base.html):
the logo row's padding animates so the sticky header's height —
and therefore the page below it — glides instead of jumping. The
category nav's wrap -> nowrap part is animated from JS. */
.site-header > div:first-child { transition: padding .18s ease; }
/* Applied while JS measures header/nav heights: kills every
transition so offsetHeight reads the target size, not a
mid-animation value. */
.measure-freeze, .measure-freeze * { transition: none !important; }
}
/* Smaller, tighter category nav spacing */
.site-nav { gap: .75rem 1.25rem; padding-bottom: .25rem; }
.site-nav .cat-link { padding: .4rem .3rem; }
/* Mobile-only expanders: hidden on desktop */
.tag-group-toggle { display: none; }
.cat-nav-toggle { display: none; }
/* Desktop: collapse header to a compact single-line category bar on scroll */
@media (min-width: 768px) {
.site-header-compact .site-logo { font-size: 1.5rem; }
.site-header-compact > div:first-child { padding-top: .5rem; padding-bottom: .5rem; }
.site-header-compact .site-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.site-header-compact .site-nav::-webkit-scrollbar { display: none; }
.site-header-compact .site-nav .cat-link { font-size: 1rem; padding: .35rem .25rem; }
/* The compact nav clips overflow children, so dropdowns are teleported to a
fixed layer (#compact-drop-layer) via JS. Hide the in-nav original. */
.site-header-compact .cat-has-drop > .drop { display: none !important; }
#compact-drop-layer { position: fixed; z-index: 60; pointer-events: none; }
#compact-drop-layer .drop {
position: static !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
display: block !important;
}
#compact-drop-layer .flyout { z-index: 61; }
}
/* Mobile: edge-safe dropdowns */
@media (max-width: 767px) {
.cat-has-drop { position: static; }
.cat-has-drop > .drop {
position: fixed; left: 1rem; right: 1rem; top: auto;
max-width: none; max-height: 70vh; overflow-y: auto;
}
.drop-item { position: static; }
.drop-item > .flyout {
position: static; opacity: 1; transform: none; pointer-events: auto;
box-shadow: none; border: none; padding-left: .75rem; min-width: auto;
display: none;
}
.drop-item.open > .flyout { display: block; }
.drop-item.has-flyout > a::after { content: '›'; transform: rotate(90deg); display: inline-block; margin-left: .5rem; }
/* Mobile categories nav: collapsed behind a toggle, expanded on tap */
.cat-nav-toggle { display: flex; align-items: center; justify-content: space-between;
width: 100%; max-width: 72rem; margin: 0 auto; padding: .5rem 1rem;
font-size: .85rem; color: var(--ihp-muted); background: transparent;
border: none; border-top: 1px solid var(--ihp-sand); cursor: pointer; }
.cat-nav-toggle .chev { transition: transform .2s ease; }
.site-header.nav-open .cat-nav-toggle .chev { transform: rotate(180deg); }
.site-nav { display: none !important; }
.site-header.nav-open .site-nav { display: flex !important; }
/* Expanded list: full-width vertical rows; each parent has a chevron
that reveals its subcategories indented beneath it (sub-subcategories
expand the same way via .drop-item rules above). */
.site-header.nav-open .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
.site-header.nav-open .site-nav > .cat-link,
.site-header.nav-open .cat-has-drop { padding: .15rem 0; }
.site-header.nav-open .cat-has-drop > a { display: inline; }
.site-header.nav-open .cat-has-drop > .cat-tw {
display: inline-flex; align-items: center; margin-left: .35rem;
padding: .15rem .45rem; font-size: .8rem; color: var(--ihp-gold);
background: transparent; border: none; cursor: pointer; }
.site-header.nav-open .cat-has-drop > .cat-tw .chev { display: inline-block; transition: transform .2s ease; }
.site-header.nav-open .cat-has-drop.open > .cat-tw .chev { transform: rotate(90deg); }
.site-header.nav-open .cat-has-drop > .drop {
position: static; left: auto; right: auto; max-width: none; max-height: none;
overflow: visible; display: none; box-shadow: none; border: none;
padding: .15rem 0 .15rem 1.1rem; background: transparent; }
.site-header.nav-open .cat-has-drop.open > .drop { display: block; }
.site-header.nav-open .drop-item > a { padding: .35rem .5rem; }
.site-header.nav-open .drop-item.has-flyout > a::after { margin-left: .6rem; }
/* Mobile tag filters: each group collapses independently */
.tag-group.m-collapsed .chip-idle { display: none; }
.tag-group.m-has-idle .tag-group-toggle { display: inline; }
.tag-group-toggle { font-size: .75rem; color: var(--ihp-terra); background: transparent;
border: none; padding: .2rem .3rem; cursor: pointer;
text-decoration: underline; text-underline-offset: 2px; }
}
/* ---- Wishlist "added" feedback: pop animation on badges and summary chips -- */
@keyframes wl-pop {
0% { transform: scale(.5); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); }
}
.wl-pop { animation: wl-pop .35s ease-out; }
/* ============================================================================
SITE-WIDE TOP NAV — mirror of the Squarespace header on
www.iheartparty.com.my (white bar, black 1px border, logo left, links
right). Lives ABOVE the shop's own .site-header. The typeface on the
original is Adobe's commercial "halyard-display"; Source Sans 3 (same
designer, metrically similar) stands in for it.
========================================================================== */
.site-topnav {
/* Not sticky on purpose: when scrolling, the shop's own .site-header
(search, wishlist, categories) takes over as the sticky bar. */
position: relative;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
background: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid #000;
padding: .8vw 4vw;
font-family: 'Source Sans 3', 'Jost', sans-serif;
}
.site-topnav-logo { flex: 0 0 auto; line-height: 0; }
.site-topnav-logo img { display: block; height: clamp(22px, 3vw, 32px) !important; width: auto; aspect-ratio: auto; object-fit: contain; }
.site-topnav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.site-topnav-links a {
display: inline-block;
color: #000;
font-size: clamp(.8rem, .6rem + .5vw, 1rem);
font-weight: 300;
letter-spacing: .05em;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
padding: .1em 0;
}
.site-topnav-links a + a { margin-left: clamp(.9rem, 1.6vw, 1.5rem); }
.site-topnav-links a:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-topnav-links a.active {
text-decoration: underline;
text-underline-offset: .3em;
text-decoration-thickness: 1px;
}
/* Mobile hamburger — Squarespace "double line" style */
.site-topnav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 7px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
}
.site-topnav-toggle span {
display: block;
height: 2px;
background: #000;
transition: transform .2s ease;
}
.site-topnav.menu-open .site-topnav-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
.site-topnav.menu-open .site-topnav-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
/* Mobile dropdown panel (toggled by JS) */
.site-topnav-menu { display: none; }
@media (max-width: 1100px) {
.site-topnav-links { display: none; }
.site-topnav-toggle { display: flex; }
.site-topnav-menu {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
flex-direction: column;
background: #fff;
border: 1px solid #000;
border-top: none;
padding: .8rem 4vw 1.2rem;
}
.site-topnav.menu-open .site-topnav-menu { display: flex; }
.site-topnav-menu a {
color: #000;
font-size: 1rem;
font-weight: 300;
letter-spacing: .05em;
line-height: 1.4;
text-decoration: none;
padding: .55em 0;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.site-topnav-menu a:last-child { border-bottom: none; }
.site-topnav-menu a.active { text-decoration: underline; text-underline-offset: .3em; }
}