/* ============================================================ Pushpmilan — Flowers, Cakes & Gifts ============================================================ */ :root { /* Phase 6: deeper botanical green, more controlled floral rose, and a restrained champagne (still --gold, value only changed) replacing the brighter gold -- see qa/reports/phase6/VISUAL-DESIGN-PROPOSAL.md. Variable NAMES are unchanged so every existing rule (including cart/ checkout, never redesigned in this pass) picks up the refined palette automatically instead of drifting from it. */ --green-dark: #12281b; --green: #1f6b45; --green-light: #e9f3ec; --rose: #a63a56; --rose-dark: #7e2740; --rose-light: #fbe9ee; --gold: #b08d4f; --clay: #b9673a; /* secondary accent -- festive/seasonal warmth, used sparingly (never a large-area background) */ --clay-light: #f6e6da; /* soft clay badge/hover background, sibling to --rose-light */ --cream: #fbf5e9; /* New: a second, deeper warm tone for section-to-section banding (Phase 6 §"Section backgrounds create rhythm") -- additive, nothing existing referenced a second cream tone before this. */ --cream-deep: #f1e5cd; /* UI observations batch: approved section-background tones for the Flowers and Occasions sections/pages specifically -- distinct from each other and from --cream, so the two currently look visually interchangeable no longer do. Subtle/premium by design (not meant to be visually loud), applied as full section backgrounds. */ --flowers-bg: #f7f1e7; --occasions-bg: #fbf2f4; --paper: #fffdfb; --ink: #26221d; --muted: #6f6a62; --border: #ece4d8; --white: #ffffff; --shadow-sm: 0 2px 10px rgba(38, 34, 29, 0.06); --shadow-md: 0 12px 30px rgba(22, 61, 41, 0.12); --shadow-lg: 0 22px 50px rgba(22, 61, 41, 0.18); --radius: 14px; --radius-sm: 10px; /* 8pt spacing scale (Phase 5 DESIGN-SYSTEM.md §4), 4px half-step */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; /* Floating-control tokens (§8) -- consumed by the safe-area-aware .fab-wa/.fab-top positioning rules below. */ --fab-offset: 20px; --fab-gap: 14px; --fab-size-primary: 56px; --fab-size-secondary: 44px; /* Typography hierarchy (§3): Fraunces for the hero h1 only, Playfair Display narrowed to section-level headings (h2/h3) only, Poppins (final branding pass; was Work Sans, kept as fallback) for card/component titles and all body/UI text. */ --ff-hero: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --ff-heading: "Playfair Display", Georgia, "Times New Roman", serif; --ff-body: "Poppins", "Work Sans", Arial, Helvetica, sans-serif; /* Premium redesign: supporting blush/neutral tones + a fluid section rhythm -- additive only, every existing variable above keeps its name and value so nothing already using them (cart/checkout/admin-adjacent rules) drifts. */ --blush: #f4e3e6; --neutral-warm: #efe8dc; --space-9: 128px; --section-y: clamp(56px, 8vw, 112px); --header-h: 76px; --header-nav-h: 48px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* The `hidden` attribute must always win over any component's own `display` rule, regardless of selector specificity elsewhere in this file -- same fix already applied globally in css/admin.css. Without this, any element that both carries a `display: flex/grid/block/...` class rule AND gets toggled via `.hidden = true` in JS renders visible anyway, because an author-stylesheet class selector beats the browser's own default `[hidden] { display: none }` UA rule at equal specificity. This exact bug was hit and patched piecemeal, in at least four separate places in this file already (search for "browser's built-in [hidden]" / "browser's own [hidden]" in this file's own comments) -- most recently the Flowers/ Occasions/Decoration hierarchy sections' Filter/Sort toolbar (.filter-toolbar-standalone, js/category-hierarchy-nav.js) staying visible after navigating Back from a leaf category to the category-cards view, even though that JS correctly sets toolbarEl.hidden = true. One global rule here removes this entire recurring bug class instead of requiring a new narrow override every time it resurfaces on a new component. */ [hidden] { display: none !important; } /* Private Preview banner (js/preview-mode.js) -- UX indicator only, not the access-control mechanism. Sticky, unobtrusive, matches brand palette; deliberately not styled as an alert/warning to stay calm and professional rather than alarming. */ .preview-mode-banner { position: sticky; top: 0; z-index: 200; background: var(--ink); color: var(--cream); font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-align: center; padding: 7px 12px; } @media (max-width: 480px) { .preview-mode-banner { font-size: 12px; padding: 6px 10px; } } body { margin: 0; font-family: var(--ff-body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } .container { width: 100%; /* Phase 6: was 1240px everywhere with no exception, the audit's #1 finding -- at 1920px that left 340px of dead margin per side for the entire page. Widened moderately (not blown out to full-bleed, which would hurt text readability -- VISUAL-DESIGN-PROPOSAL.md keeps a "sensible maximum text width"); full-bleed *color* treatment for specific bands (Shop by Occasion, the story section) comes from backgrounds on the
itself, not from this container. */ max-width: 1320px; margin: 0 auto; padding: 0 var(--space-4); } section { padding: var(--section-y) 0; scroll-margin-top: calc(var(--header-h) + 8px); } /* Scoped to this one section only -- the body's --cream background stays the site-wide default everywhere else; this just softens the tone directly behind the Flowers listing per design feedback. */ #flowers-section { background: var(--paper); } #home { scroll-margin-top: 0; } .section-tag { display: inline-block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); font-weight: 600; line-height: 1.4; margin-bottom: 12px; } /* Sparing --clay accent (DESIGN-SYSTEM.md §2): festive/occasion tags, e.g. the Ganpati Decoration block below -- one instance, not a general replacement for the rose section-tag color. */ .section-tag-clay { color: var(--clay); } /* Phase 6: was text-align:center + margin:0 auto on every section on the page (8+ identical centered-serif headings in a row, the single largest "generic/template" finding in VISUAL-GAP-AUDIT.md §2) -- left-aligned here instead, restrained rather than removed. Still the same class on every section, so this one change alone fixes the repetition site-wide. .head-row (below) adds an optional trailing link for sections that want one, without requiring every section to use it. */ .section-head { max-width: 640px; margin: 0 0 48px; } @media (min-width: 981px) { .section-head, .head-row { margin-bottom: var(--space-7); } } .section-head h2 { font-family: var(--ff-heading); font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--green-dark); } .section-head p { color: var(--muted); margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 56ch; } /* Optional pairing: a section-head beside a trailing link/CTA (e.g. "Shop by Category" -> "View All Categories"), asymmetric instead of a lone centered block. Opt-in per section -- .section-head alone (no wrapping .head-row) still works exactly as above. */ .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; } .head-row .section-head { margin-bottom: 0; } .head-row-link { font-size: 14.5px; font-weight: 600; color: var(--rose); white-space: nowrap; padding-bottom: 4px; } .head-row-link:hover { color: var(--rose-dark); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; border: 2px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-rose { background: var(--rose); color: var(--white); box-shadow: var(--shadow-sm); } .btn-rose:hover { background: var(--rose-dark); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; border-color: rgba(255,255,255,0.7); color: var(--white); } .btn-outline:hover { background: rgba(255,255,255,0.15); } .btn-outline-dark { background: transparent; border-color: var(--green); color: var(--green); } .btn-outline-dark:hover { background: var(--green); color: var(--white); } /* Tertiary/quiet action (brief: "secondary action should be visually quieter" -- e.g. hero's Call, decor's "ask about a custom setup"). */ .btn-ghost { background: transparent; border-color: transparent; color: var(--white); padding-left: 8px; padding-right: 8px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,0.45); } .btn-ghost:hover { color: var(--gold); text-decoration-color: var(--gold); } .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 10px 18px; font-size: 13.5px; } .btn-disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; justify-content: center; } .btn-disabled:hover, .btn-disabled:active { background: var(--border); color: var(--muted); transform: none; } /* ---------- Top bar ---------- */ .topbar { background: var(--green-dark); color: rgba(255,255,255,0.88); font-size: 13px; } .topbar .container { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; gap: 12px; flex-wrap: wrap; } .topbar a { display: inline-flex; align-items: center; gap: 6px; } .topbar a:hover { color: var(--gold); } .topbar-links { display: flex; gap: 20px; flex-wrap: wrap; } /* ---------- Header ---------- Two-tier commerce header: row 1 is brand + search + account actions, row 2 is a dedicated category nav strip on a contrasting ground -- the structure FNP-class sites use so search is always in reach and category browsing reads as navigation, not a row of text links squeezed beside a logo. */ .site-header { position: sticky; top: 0; z-index: 500; background: var(--white); box-shadow: none; } .header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; } .brand { display: flex; align-items: center; gap: 6px; flex: none; } .brand-mark { width: 22px; height: 22px; color: var(--gold); flex: none; } .brand-word { font-family: "Caveat", cursive; font-weight: 700; font-size: 34px; line-height: 1; color: var(--green); letter-spacing: 0.01em; white-space: nowrap; } /* Header wordmark image (customer redesign, final branding pass): fixed height so .site-header never grows, width auto-derives from the asset's own aspect ratio so it can never distort. */ .brand-logo-img { height: 68px; width: auto; display: block; } @media (max-width: 480px) { .brand-logo-img { height: 52px; } } /* Header horizontal-overflow fix (390px/430px): the fixed-size content in .header-row (logo ~159px at height:52px, five 40px icon-buttons + their 6px gaps = 224px, plus .header-row's own 20px gap) totals ~403px -- .container's own math (viewport - 48px side padding) only clears that at a viewport of ~451px or wider, so BOTH 390px and 430px genuinely overflow with the full-size header, not just 390px -- confirmed by measuring the actual CSS values, not assumed from the bug report's one named width. Fixed at max-width:460px (comfortably covers both required test widths with margin to spare) via a smaller logo, tighter gaps, and the icon-buttons trimmed from 40px to 36px -- still comfortably above common ~32px minimum tap-target guidance, and every icon/label/structure stays exactly as-is, nothing removed or hidden. Every wider viewport (768px, desktop) is completely unaffected. */ @media (max-width: 460px) { .brand-logo-img { height: 40px; } .header-row { gap: 8px; } .header-cta { gap: 2px; } .header-cta .icon-btn { width: 36px; height: 36px; } } /* Header search: the primary product-discovery entry point lives in the header itself (row 1, between brand and account actions) instead of below the fold -- #productSearchInput/#productSearchClear are the exact same elements js/products.js already wires up, only relocated. */ .header-search { flex: 1 1 auto; max-width: 480px; display: none; } @media (min-width: 981px) { .header-search { display: block; } } .nav { display: flex; align-items: center; gap: 22px; } .nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; color: rgba(255,255,255,0.86); position: relative; padding: 4px 0; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.2s ease; } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); } .nav a:hover, .nav a.active { color: var(--white); } /* Row 2: category nav strip -- deep forest ground so it reads as a distinct navigation band under the white brand/search row, not a plain continuation of it. */ .header-nav-strip { background: var(--green-dark); border-top: 1px solid rgba(255,255,255,0.08); } .header-nav-strip .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-nav-h); gap: 20px; } .header-cta { display: flex; align-items: center; gap: 6px; } /* ---------- Customer account drawer ---------- Mirrors admin-dashboard.html's #profileMenu structure/behaviour (js/admin.js: click toggles hidden + aria-expanded, outside-click and Escape close it) adapted to customer tokens/content. Only ever shown for a signed-in customer -- js/account-nav.js swaps #accountNavBtn between a plain "Sign In" link (signed out, unchanged behaviour) and this drawer's trigger (signed in), so a signed-out visitor never sees an empty/broken drawer. z-index above the sticky header (500) so it never renders underneath it. */ .account-nav-wrap { position: relative; display: flex; } .account-drawer { position: absolute; top: calc(100% + 8px); right: 0; width: 230px; background: var(--white); color: var(--ink); border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,0.14); padding: 6px; z-index: 520; } .account-drawer-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .account-drawer-head strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-drawer-head span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-drawer-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); border: none; background: none; color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; } .account-drawer-item:hover { background: var(--cream); } .account-drawer-divider { height: 1px; background: var(--border); margin: 6px 4px; } .account-drawer-item-danger { color: var(--rose); } @media (max-width: 480px) { .account-drawer { width: 210px; right: -8px; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--green-dark); transition: background 0.2s ease, color 0.2s ease; position: relative; } .icon-btn:hover { background: var(--green-light); } .icon-btn svg { width: 21px; height: 21px; } .icon-btn-label { display: none; } @media (min-width: 1200px) { .icon-btn { width: auto; height: auto; border-radius: 0; padding: 6px 4px; gap: 6px; flex-direction: column; } .icon-btn:hover { background: transparent; color: var(--rose); } .icon-btn-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; } } .nav-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; border-radius: 10px; align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; color: var(--green-dark); } /* Row-2 category strip links */ .nav-strip-links { display: flex; align-items: center; gap: 26px; overflow-x: auto; scrollbar-width: none; } .nav-strip-links::-webkit-scrollbar { display: none; } .nav-strip-links a { font-size: 14px; font-weight: 500; white-space: nowrap; color: rgba(255,255,255,0.82); position: relative; padding: 4px 0; } .nav-strip-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.2s ease; } .nav-strip-links a:hover::after, .nav-strip-links a.active::after { transform: scaleX(1); } .nav-strip-links a:hover, .nav-strip-links a.active { color: var(--white); } .nav-strip-cta { flex: none; font-size: 12.5px; font-weight: 600; color: var(--gold); white-space: nowrap; letter-spacing: 0.01em; } .nav-strip-cta:hover { color: var(--white); } /* Mobile-only search trigger in the header-cta row: expands the same #productSearchInput used by .header-search on desktop, so there is still exactly one search input/id on the page, just relocated into an expandable bar below the header row on narrow screens. */ .search-toggle { display: none; } .mobile-search-bar { display: none; } @media (max-width: 980px) { .search-toggle { display: inline-flex; } .mobile-search-bar { display: block; max-height: 0; overflow: hidden; transition: max-height 0.22s ease; background: var(--white); border-top: 1px solid var(--border); } .mobile-search-bar.open { max-height: 72px; } .mobile-search-bar .container { padding-top: 10px; padding-bottom: 10px; } .mobile-search-bar .product-search { max-width: none; margin: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; height: auto; min-height: 0; overflow: hidden; color: var(--white); } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } .hero-slide::after { content: ""; position: absolute; inset: 0; /* Two-layer gradient (bottom wash + a left-side wash where the text sits) instead of one flat overlay -- keeps the photo's centre-right open and readable rather than uniformly darkened. */ background: linear-gradient(180deg, rgba(18,40,27,0.30) 0%, rgba(18,40,27,0.18) 40%, rgba(18,40,27,0.72) 100%), linear-gradient(100deg, rgba(18,40,27,0.62) 0%, rgba(18,40,27,0.18) 62%, rgba(18,40,27,0) 100%); } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 620px; padding-top: clamp(72px, 14vh, 140px); padding-bottom: clamp(72px, 14vh, 140px); } @media (max-width: 760px) { .hero { min-height: 62vh; } .hero-content { padding-top: 56px; padding-bottom: 64px; } } .hero-content .section-tag { color: var(--gold); } .hero-content h1 { font-family: var(--ff-heading); font-optical-sizing: auto; font-size: clamp(29px, 4.6vw, 54px); line-height: 1.14; margin: 8px 0 16px; font-weight: 600; max-width: 15ch; text-shadow: 0 4px 20px rgba(0,0,0,0.25); } .hero-content p { font-size: 16.5px; color: rgba(255,255,255,0.92); margin: 0 0 26px; max-width: 46ch; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* Compact hero variant for standalone pages (flowers/gifts/decoration): same photo-led composition, shorter minimum height than the homepage. */ .hero-compact .hero-content { padding-top: clamp(56px, 9vh, 88px); padding-bottom: clamp(56px, 9vh, 88px); } .hero-compact { min-height: 0; } @media (max-width: 760px) { .hero-compact { min-height: 46vh; } } .hero-dots { position: absolute; z-index: 3; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); background: transparent; padding: 0; } .hero-dots button.active { background: var(--white); } /* ---------- Trust / value proposition ---------- Second pass (UI observations batch): the first non-overlapping 2x2 pass fixed the floating-card overlap bug, but real-user feedback was that the dense, horizontally-divided shared-card treatment still read as a lesser "compact card" next to .why-strip's stronger, more premium treatment further down this same page -- centered column, a larger circular icon with its own shadow (not a shared card + dividers), generous grid gap. Mirrors .why-item's structural approach (see that class below) while keeping this section's own rose-tinted icon accent and copy -- a deliberately distinct class (.trust-item-v2), not a reuse of .why-item, since the two sections intentionally keep different icon color treatments (this one rose, why-item white+shadow) as separate, non-duplicate visual moments on the same page. */ .trust { /* Fix (real-device feedback): --cream (the page's own default background, which this section sat on with no background of its own) and the new --flowers-bg tint on the section directly below are close enough in value that the two read as one seamless, undifferentiated block with no visible section break -- confirmed on a real device screenshot. A plain white background gives Trust its own clear identity again, distinct from both --cream (used elsewhere on the page) and --flowers-bg (Flowers section below). */ background: var(--white); max-width: 1180px; margin: 0 auto; padding: var(--space-7) var(--space-4); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: none; } .trust-item-v2 { text-align: center; } .trust-item-v2 .ic { width: 58px; height: 58px; border-radius: 50%; background: var(--rose-light); color: var(--rose); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: var(--shadow-sm); } .trust-item-v2 .ic svg { width: 26px; height: 26px; } .trust-item-v2 h4 { margin: 0 0 8px; font-family: var(--ff-body); font-weight: 600; font-size: 18px; color: var(--green-dark); } .trust-item-v2 p { margin: 0; font-size: 13.5px; color: var(--muted); } /* ---------- Categories ---------- */ .categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } @media (min-width: 981px) { .categories-grid { gap: var(--space-4); } } /* Phase 6: the first category tile becomes a featured 2x2 block instead of every tile being an identical small square (VISUAL-GAP-AUDIT.md §4) -- grid-auto-flow: dense re-packs the remaining tiles around it automatically, the same technique already proven on .decor-gallery above, so no manual row/column bookkeeping is needed as categories are added/removed in the Admin. Desktop only -- the existing 980px/520px breakpoints already collapse this to 2 columns, where every tile stays equal-sized (a 2x2 featured tile would consume the whole grid on a narrow screen). */ @media (min-width: 981px) { .categories-grid { grid-auto-flow: dense; } .categories-grid .cat-card:first-child { grid-column: span 2; grid-row: span 2; } } .cat-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--border); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cat-card:hover { border-color: transparent; box-shadow: var(--shadow-md); } .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .cat-card:hover img { transform: scale(1.05); } .cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(15,30,20,0.78) 100%); } .cat-card .label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px; color: var(--white); } .cat-card .label span { display: block; font-size: 12px; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; } .cat-card .label h3 { margin: 0; font-family: var(--ff-heading); font-weight: 600; font-size: 21px; line-height: 1.2; } @media (min-width: 981px) { .categories-grid .cat-card:first-child .label h3 { font-size: 30px; } } @media (max-width: 520px) { .cat-card { aspect-ratio: 1/1; } .cat-card .label { padding: 14px 13px; } .cat-card .label h3 { font-size: 16px; } } /* ---------- Premium Collections (editorial band) ---------- */ .collections-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .collection-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5; } .collection-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .collection-card:hover img { transform: scale(1.05); } .collection-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,20,14,0.82) 100%); } .collection-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 18px; color: var(--white); } .collection-label span { display: block; font-size: 11px; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .collection-label h3 { margin: 0; font-family: var(--ff-heading); font-weight: 600; font-size: 19px; } @media (max-width: 980px) { .collections-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- Filter chips ---------- */ .filters { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-6); } .chip { border: 1.5px solid var(--border); background: var(--white); padding: 10px 22px; border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--ink); transition: all 0.2s ease; } .chip.active, .chip:hover { background: var(--green); border-color: var(--green); color: var(--white); } /* ---------- Listing toolbar: product count / Filter button / Sort ---------- */ .listing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .listing-toolbar-left { display: flex; align-items: center; gap: 16px; } .listing-count { font-size: 13.5px; color: var(--muted); } .filter-open-btn { display: none; align-items: center; gap: 8px; border: 1.5px solid var(--border); background: var(--white); padding: 9px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink); } /* Product listing filters/sort stage: the homepage's per-section leaf- category listings use a compact TOOLBAR-ONLY layout (Filter button + Sort select, per the approved mockup) rather than flowers.html's persistent desktop sidebar column -- there is no second, always-open filter column to make the Filter button redundant on desktop here, so it must stay visible at every width. .filter-toolbar-standalone is opt-in (added only by js/category-hierarchy-nav.js's generated toolbar) so flowers.html's own #filterOpenBtn (inside its two-column .listing-layout) keeps its existing mobile-only behaviour unchanged. */ .filter-toolbar-standalone .filter-open-btn { display: inline-flex; } /* Standalone drawer: on DESKTOP flowers.html's own .filter-sidebar rule (above) has no hidden/toggle state at all -- it relies on being permanently visible as a sticky grid column, which is exactly what this toolbar-only layout does NOT have. Made into a real open/close panel at every width: hidden by default, shown as a fixed overlay panel (reusing the same bottom-sheet transform/backdrop already defined for <=980px) once .open is added — mirrors this file's own existing mobile drawer behaviour, just no longer gated to a max-width. */ .filter-sidebar.filter-sidebar-standalone { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 84vh; /* dvh fallback -- see .cart-drawer's own comment on why (Safari's dynamic toolbar) */ max-height: 84dvh; border-radius: 20px 20px 0 0; border: none; box-shadow: var(--shadow-lg); padding: 0 20px 20px; transform: translateY(100%); transition: transform 0.28s cubic-bezier(.4,0,.2,1); z-index: 800; overflow-y: auto; } .filter-sidebar-standalone.open { transform: translateY(0); } .filter-sidebar-standalone .filter-sidebar-head { display: flex; } .filter-sidebar-standalone .filter-sidebar-actions { display: flex; } @media (min-width: 520px) { /* Wider viewports get a centred, max-width panel instead of a full-bleed sheet -- still an overlay (not inline content), just not stretched edge-to-edge once there is room to spare. */ .filter-sidebar.filter-sidebar-standalone { left: 50%; right: auto; bottom: 24px; width: min(420px, calc(100vw - 48px)); transform: translate(-50%, 24px); border-radius: var(--radius); border: 1px solid var(--border); opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; } .filter-sidebar-standalone.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } } .filter-backdrop-standalone { position: fixed; inset: 0; background: rgba(18,40,27,0.45); z-index: 790; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .filter-backdrop-standalone.open { opacity: 1; pointer-events: auto; } .filter-open-btn svg { width: 17px; height: 17px; } .filter-open-btn:hover { border-color: var(--green); } .filter-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--rose); color: var(--white); font-size: 11px; font-weight: 700; } .filter-count-badge[hidden] { display: none; } .sort-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; } .sort-row label { font-size: 13.5px; color: var(--muted); font-weight: 500; flex: none; } .sort-row select { border: 1.5px solid var(--border); background: var(--white); padding: 9px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; min-width: 0; } .sort-row select:hover, .sort-row select:focus { border-color: var(--green); outline: none; } /* Below ~460px the count + Filter button + Sort dropdown no longer fit on one row (min-content widths alone exceed the viewport) -- wrap onto a second line and let Sort's reserves its own dropdown-arrow glyph inside the box's own padding box, not as a separate overlay -- with the same symmetric padding as a text input, a long selected value (e.g. the "Deliver To" saved-address select) can visually run right up against that arrow before iOS's own ellipsis kicks in. Extra right padding only (native appearance/arrow itself untouched -- no -webkit-appearance override) gives the arrow its own clear space regardless of value length. text-overflow only matters on engines that don't already ellipsis the closed select natively; harmless where iOS does it itself. */ .field select { padding-right: 34px; text-overflow: ellipsis; } /* iOS Safari centers a native 's selected value by default (its own internal date-field rendering, not something this stylesheet ever set) -- confirmed on a real iPhone recording, where "Preferred Delivery Date" reads centered while every sibling .field input is left-aligned. text-align on the itself (the first attempt here) does NOT work on iOS Safari -- re-tested on a second real iPhone recording, still centered -- because the visible date text lives inside Safari's own ::-webkit-date-and-time-value pseudo-element, not the input's own text content; only styling that pseudo-element directly actually moves it. Desktop Chromium was never a reliable way to verify this specific fix (it doesn't expose the same pseudo-element the same way), which is why the first attempt looked fine locally but didn't hold on the real device. Native picker UI, min-date, and validation are all untouched -- this only repositions the already- rendered value text within the box. */ .field input[type="date"] { text-align: left; } .field input[type="date"]::-webkit-date-and-time-value { text-align: left; } .field textarea { resize: vertical; min-height: 100px; } /* Batch 8: contextual, field-level validation message -- matches the pattern already established in Admin (css/admin.css's .admin-field-error/.admin-field-invalid), same error color as this file's own .checkout-notice-error (#7a2020) for consistency. */ .checkout-field-error { color: #7a2020; font-size: 12.5px; margin: 6px 0 0; } .field-invalid { border-color: #7a2020 !important; box-shadow: 0 0 0 3px rgba(122, 32, 32, 0.12); } .form-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; } .hp-field { position: absolute; left: -9999px; } /* ---------- Footer (Phase 6) ---------- Was a flat 4-column link list on a plain dark block (VISUAL-GAP-AUDIT.md §6/"Footer problems"). Same .site-footer class (js/script.js does document.querySelector(".site-footer") for the floating-controls fade -- untouched) and same .footer-grid/.footer-col link structure, now a 5th "Same-Day Delivery" CTA card breaks the flat list, plus a faint brand-mark watermark. */ .site-footer { background: var(--green-dark); color: rgba(255,255,255,0.78); position: relative; overflow: hidden; } .footer-mark { position: absolute; right: -50px; top: -30px; width: 300px; height: 300px; color: var(--white); opacity: 0.04; pointer-events: none; } /* A3 fix (Phase 7): this element also carries the .container class (see index.html), which supplies the intended horizontal gutter via `padding: 0 var(--space-4)`. The 3-value `padding: 80px 0 48px` shorthand previously used here set left/right to 0 as part of the same declaration -- same specificity as .container's rule, later in source order, so it silently zeroed the container's horizontal padding at EVERY viewport (masked at desktop widths by the max-width:1320px auto-margin, which happens to leave outer whitespace anyway; fully exposed at mobile widths where the whole footer sits flush against the viewport edges). padding-top/padding-bottom longhands only touch the vertical rhythm this rule actually owns, leaving .container's horizontal padding intact. */ .footer-top { padding-top: var(--space-8); padding-bottom: var(--space-6); position: relative; } .footer-grid { display: grid; grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr; gap: var(--space-5) var(--space-4); } /* Footer wordmark: same full-color logo asset/treatment as the header (previously shown as a reversed white silhouette instead, so it no longer matched the header) -- the logo's dark-green text is otherwise unreadable directly against this dark-green footer, so a small, tightly- fitted ivory plate sized just to the logo (not a full-width box) keeps it legible while still reading as an intentional badge, not a sticker. */ .footer-logo-plate { display: inline-flex; background: var(--cream); border-radius: var(--radius-sm); padding: 10px 16px; } .footer-brand .brand-logo-img { height: 52px; width: auto; } .footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); margin: var(--space-3) 0 var(--space-4); max-width: 300px; line-height: 1.7; } .social-row { display: flex; gap: 10px; } .social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; } .social-row a:hover { background: var(--rose); border-color: var(--rose); } .social-row svg { width: 16px; height: 16px; } .footer-col h4 { color: var(--gold); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--space-3); font-family: var(--ff-body); font-weight: 600; } .footer-col li { margin-bottom: 10px; font-size: 14px; } .footer-col a { color: rgba(255,255,255,0.74); } .footer-col a:hover { color: var(--white); } /* Customer UI architecture pass: padding tightened from (--space-4 --space-5) = 24px/32px to a flat --space-3 (16px) -- this promo previously "consumed a disproportionate amount of the page" (confirmed at 390px: 211px tall for a two-line message + one button). Compact CTA card, not a hero moment -- readability/touch target (44px button height) preserved, only the surrounding whitespace cut. */ .footer-newsletter { grid-column: 1 / -1; background: rgba(255,255,255,0.07); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .footer-newsletter > div { flex: 1 1 320px; } .footer-newsletter h4 { color: var(--white); font-family: var(--ff-heading); font-weight: 600; font-size: 17px; margin: 0 0 8px; text-transform: none; letter-spacing: 0; } /* margin-bottom: 0 -- the flex container's own gap (--space-3) already separates this
from the button below it (on mobile, where they stack); this paragraph's own bottom margin was doubling that space. */ .footer-newsletter p { font-size: 13px; color: rgba(255,255,255,0.62); margin: 0; line-height: 1.6; } .footer-newsletter .btn { padding: 11px 18px; font-size: 13px; background: var(--gold); color: var(--green-dark); box-shadow: none; } .footer-newsletter .btn:hover { background: #967a44; color: var(--white); } /* .footer-delivery removed -- index.html now uses .footer-newsletter, the same Same-Day Delivery promo component every other customer page already used, consolidating what was two divergent implementations of identical content into one reused component. */ .footer-bottom { position: relative; border-top: 1px solid rgba(255,255,255,0.14); /* A3 fix (Phase 7): same .container-padding-zeroing bug as .footer-top above (2-value `padding: 22px 0` shorthand also sets left/right: 0). Longhand keeps .container's horizontal padding intact. */ padding-top: 22px; padding-bottom: 22px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,0.55); } .footer-bottom a:hover { color: var(--gold); } /* ---------- Floating buttons ---------- Phase 5 §8: both fabs share one positioning formula (--fab-offset/ --fab-gap/--fab-size-primary/--fab-size-secondary, defined in :root by Agent B) instead of hardcoded right/bottom values, with env(safe-area-inset-*) folded into the calc() so they never sit under an iPhone home-indicator/rounded-corner safe area. Requires viewport-fit=cover on index.html's viewport meta tag (added alongside this) -- without it env(safe-area-inset-*) always resolves to 0 and this is a no-op, same as #checkoutFooter's existing safe-area rule. */ .fab-wa { position: fixed; right: calc(var(--fab-offset) + env(safe-area-inset-right, 0px)); bottom: calc(var(--fab-offset) + env(safe-area-inset-bottom, 0px)); z-index: 400; width: var(--fab-size-primary); height: var(--fab-size-primary); border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45); transition: transform 0.2s ease, opacity 0.25s ease; } .fab-wa:hover { transform: scale(1.08); } .fab-wa svg { width: 28px; height: 28px; } /* Behavioural requirement (§8): fade/hide once .site-footer enters view (js/script.js IntersectionObserver, mirrors the .fab-top.show pattern below rather than inventing a new one). */ .fab-wa.fab-hidden { opacity: 0; pointer-events: none; } .fab-top { position: fixed; right: calc(var(--fab-offset) + env(safe-area-inset-right, 0px)); bottom: calc(var(--fab-offset) + var(--fab-size-primary) + var(--fab-gap) + env(safe-area-inset-bottom, 0px)); z-index: 400; width: var(--fab-size-secondary); height: var(--fab-size-secondary); border-radius: 50%; background: var(--white); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green-dark); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all 0.25s ease; } .fab-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Source-order matters: this must win over .fab-top.show (same specificity) when the footer is in view AND the user has scrolled past the show threshold, so the footer-visibility fade always takes priority. */ .fab-top.fab-hidden { opacity: 0; pointer-events: none; } .fab-top svg { width: 20px; height: 20px; } /* Systemic fix for the fab-overlaps-content class of bug, replacing the previous per-instance approach (each affected element -- .trust-item, .find-us-card -- got its own bespoke, hand-measured padding-bottom value found only after a real device recording caught the specific overlap). Opt any scrollable content container that ends near the bottom of the viewport into this ONE utility instead: reserves the fab's actual footprint (offset + size + a little clearance) so nothing inside can ever render under its fixed corner, and it stays correct automatically if --fab-offset/--fab-size-primary ever change, since it shares those tokens rather than hardcoding a pixel value. Hidden pages (this is customer-only chrome) or pages without the WhatsApp fab don't need this class at all -- it's opt-in, not global. */ .fab-safe-bottom { padding-bottom: calc(var(--fab-offset) + var(--fab-size-primary) + 20px + env(safe-area-inset-bottom, 0px)); } /* ---------- PWA install banner (Batch 2 / 2.1) ---------- Compact, dismissible bottom card -- intentionally NOT a circular fab (would collide with .fab-wa/.fab-top) and NOT a full-width top banner (blocks header/search on mobile). Sits above the fabs' column using the same --fab-offset/--fab-size-primary/--fab-gap tokens so spacing stays consistent with the rest of the fixed-position UI. Batch 2.1: .is-fallback is a deliberately distinct visual treatment (muted border/background, no filled action button) so the "Chrome hasn't offered install yet" message can never be mistaken for the real install CTA below. */ .pwa-install-banner { position: fixed; left: 14px; right: 14px; bottom: calc(var(--fab-offset) + var(--fab-size-primary) + var(--fab-gap) + env(safe-area-inset-bottom, 0px)); z-index: 600; max-width: 420px; margin: 0 auto; background: var(--white); border: 1.5px solid var(--green-dark); border-radius: 14px; box-shadow: var(--shadow-md, 0 10px 24px rgba(0,0,0,0.14)); padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .pwa-install-banner.is-fallback { border: 1.5px dashed var(--border); box-shadow: var(--shadow-sm); background: #faf6ee; } .pwa-install-body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .pwa-install-heading { font-size: 13.5px; font-weight: 700; color: var(--ink, #1f2a22); } .is-fallback .pwa-install-heading { color: rgba(31,42,34,0.75); font-weight: 600; } .pwa-install-text { font-size: 12.5px; line-height: 1.4; color: rgba(31,42,34,0.8); } .pwa-install-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pwa-install-btn { background: var(--green-dark); color: var(--white); border: none; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .pwa-install-btn:disabled { opacity: 0.6; cursor: default; } .pwa-install-close { background: transparent; border: none; color: rgba(31,42,34,0.5); font-size: 14px; line-height: 1; cursor: pointer; padding: 4px; } @media (max-width: 480px) { .pwa-install-banner { left: 10px; right: 10px; padding: 10px 12px; } .pwa-install-text { font-size: 12px; } } /* Grouped nav (SHOP / CELEBRATE / DISCOVER): one markup, two behaviours. Desktop: groups dissolve into a single flat row via display:contents, so .nav's existing flex layout is unaffected -- zero desktop regression. Mobile: groups become stacked, labeled sections in the slide-in panel. */ .nav-group { display: contents; } .nav-group-title { display: none; } .nav-wa-cta { display: none; } /* ---------- Responsive ---------- */ @media (max-width: 1120px) { /* Below this width the row-2 category strip disappears entirely -- its links move into the slide-in drawer instead, so there is exactly one navigation surface on mobile, not two. */ .header-nav-strip { display: none; } .nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 32px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(.4,0,.2,1); z-index: 700; } .nav.open { transform: translateX(0); } /* Applied only for the instant before a genuine cross-page drawer link navigates away (js/script.js) -- removes the slide-closed transition entirely so the drawer disappears instantly instead of animating out while the browser is simultaneously unloading the page, which was reading as menu items fading/disappearing on a real device. */ .nav.nav-no-transition { transition: none; } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 6px 20px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .nav-drawer-head .brand-logo-img { height: 32px; } .nav-drawer-close { width: 38px; height: 38px; border: none; background: var(--green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .nav-drawer-close svg { width: 18px; height: 18px; color: var(--green-dark); } .nav > a { color: var(--ink); } .nav-group { display: block; margin-bottom: var(--space-4); } .nav-group a { color: var(--ink); } /* #navDrawerSignOut (js/account-nav.js) is a real