/* ========================================================================= Sassys Pharmaceuticals Replica - FRONT PAGE stylesheet Only the homepage-specific sections live here. Tokens, header, footer and the shared product card are in base.css (sitewide). The homepage IS the shop on this source. Section order, verbatim from RECON-DESIGN 3 (parsed from source-cdp/home.html, cross-checked against responsive-measure.json): topbar -> store head (logo) -> category nav -> quick links -> search -> FEATURED (3 cards) -> HOT SELLERS (4 cards) -> product grid (33 cards in labelled category groups) -> footer There is NO hero banner, NO video, NO testimonials, NO newsletter block, NO trust-badge strip and NO "why choose us" on this homepage. Do not add any of them. The one addition is the SEO content zone at the end, which is LOCKED standard #6 and is flagged as an addition, not a replication. ========================================================================= */ /* ---------- 1. SHOWCASE (Featured + Hot Sellers share this chrome) -------- [meas] showcaseTitle: Cormorant Garamond 600 / 25px / lh 40px / ls 2px / uppercase / rgb(185,150,90) - painted with the gold gradient. */ .sp-showcase{position:relative;margin:0 auto 22px;padding:0 16px} .sp-showcase-header{position:relative;text-align:center;margin-bottom:12px;padding:8px 0 4px} .sp-showcase-glow{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(520px,86%);height:150px;pointer-events:none;z-index:0; background:radial-gradient(ellipse at center,rgba(196,154,42,0.10) 0%,rgba(196,154,42,0.04) 40%,transparent 72%); } .sp-showcase-title{ position:relative;z-index:1; display:inline-flex;align-items:center;justify-content:center;gap:8px; width:100%;margin:0 0 2px; font-family:var(--sp-ff-display);font-size:25px;font-weight:600; line-height:1.6;letter-spacing:0.08em;text-transform:uppercase; color:var(--sp-gold-mid); background-image:var(--sp-gold-pop); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,0.42)) drop-shadow(0 0 12px rgba(200,165,80,0.22)); } .sp-showcase-title svg{ color:var(--sp-gold-mid);fill:currentColor;opacity:0.95;flex:0 0 auto; vertical-align:-3px;filter:drop-shadow(0 0 10px rgba(200,165,80,0.20)); } /* the fire glyph on the Hot Sellers heading must stay a real emoji, not gradient-painted text, or it renders as a transparent blob */ .sp-showcase-fire{ -webkit-text-fill-color:initial;color:initial; background:none;font-size:0.9em;line-height:1;flex:0 0 auto; } @media (max-width:767px){ .sp-showcase-title{font-size:17px;letter-spacing:0.10em} } @media (max-width:480px){ .sp-showcase-title{font-size:16px;letter-spacing:0.11em} } /* ---------- 2. FEATURED grid (centre-focus, odd tail) ---------- The featured grid uses the SAME column track as the main product grid ([meas] 5 x 249.3px @1441 / 3 @820 / 2 @390); it is narrower only because the showcase adds 16px of side padding. When the card count is ODD and greater than one, the LAST card spans the full row, is centred, and is scaled to 1.2x of a 3-column cell - that is the source's "centerFocus". */ .sp-featured-grid{--sp-featured-gap:12px} @media (min-width:768px){ .sp-featured-grid{--sp-featured-gap:14px} } @media (min-width:1100px){ .sp-featured-grid{--sp-featured-gap:16px} } .sp-featured-wrap{position:relative;display:flex;flex-direction:column} .sp-featured-wrap::before{ content:'';position:absolute;inset:-2px;border-radius:calc(var(--sp-r-card) + 2px); pointer-events:none;z-index:0;background:transparent; box-shadow:0 0 0 1px rgba(201,168,76,0.22),0 0 8px 2px rgba(201,168,76,0.18); transition:box-shadow .28s ease; } .sp-featured-wrap > .sp-card{flex:1;position:relative;z-index:1;border-color:rgba(201,168,76,0.28)} @media (hover:hover){ .sp-featured-wrap:hover::before{box-shadow:0 0 0 1px rgba(201,168,76,0.34),0 0 12px 3px rgba(201,168,76,0.22)} .sp-featured-wrap:hover > .sp-card{transform:translateY(-2px);border-color:rgba(201,168,76,0.42)} } /* the featured card's own gold rim [meas] */ .sp-card--featured{ border:1px solid rgba(196,154,42,0.34); box-shadow:0 14px 34px rgba(0,0,0,0.34),0 4px 16px rgba(0,0,0,0.24), 0 0 0 1px rgba(196,154,42,0.16),0 0 18px rgba(196,154,42,0.18), 0 0 36px rgba(196,154,42,0.14),0 0 64px rgba(184,134,27,0.10); isolation:isolate; } .sp-card--featured .sp-card-media{ border:1px solid rgba(212,175,55,0.32); box-shadow:0 0 0 1px rgba(212,175,55,0.12),0 2px 5px rgba(0,0,0,0.32), 0 0 2px rgba(212,175,55,0.55),inset 0 1px 0 rgba(255,255,255,0.02); } @media (max-width:780px){ .sp-card--featured .sp-card-media{ box-shadow:0 0 0 1px rgba(212,175,55,0.10),0 1px 4px rgba(0,0,0,0.30),0 0 2px rgba(212,175,55,0.48); } } /* odd tail: full-row, centred, 1.2x a 3-col cell (2-col cell under 900) */ .sp-featured-grid--odd > .sp-featured-wrap--oddtail{ grid-column:1 / -1;justify-self:center;margin-left:auto;margin-right:auto; } @media (max-width:899px){ .sp-featured-grid--odd > .sp-featured-wrap--oddtail{ width:calc((100% - var(--sp-featured-gap)) / 2); max-width:calc((100% - var(--sp-featured-gap)) / 2); } } @media (min-width:900px){ .sp-featured-grid--odd > .sp-featured-wrap--oddtail{ width:calc(((100% - (var(--sp-featured-gap) * 2)) / 3) * 1.2); max-width:calc(((100% - (var(--sp-featured-gap) * 2)) / 3) * 1.2); } } .sp-featured-grid--single > .sp-featured-wrap{grid-column:1 / -1;justify-self:center} /* ---------- 3. HOT SELLERS ---------- Same showcase chrome; the cards get an ember rim instead of a gold one. */ .sp-card--hotseller{ box-shadow:0 0 0 1px rgba(255,119,52,.32),0 0 28px rgba(255,92,34,.20),0 18px 44px rgba(0,0,0,.42); border-color:rgba(255,119,52,0.34); } @media (hover:hover){ .sp-card--hotseller:hover{ box-shadow:0 0 0 1px rgba(255,119,52,.42),0 0 34px rgba(255,92,34,.26),0 22px 52px rgba(0,0,0,.46); } } /* ---------- 4. MAIN PRODUCT GRID + CATEGORY BREAK ROWS ---------- The grid has NO section heading. It is interrupted by full-width category break rows whose label is gradient-painted Cormorant Garamond italic ([meas] 34px / weight 500 / ls -0.408px / colour rgba(0,0,0,0) = background-clip:text). The source ALSO renders a `Pending Restock` inventory marker followed by a second, `--soldout` copy of all four category groups. We render NEITHER: HARD RULE 10 collapses the sold-out groups into the in-stock ones, so this build has exactly FOUR groups (OILS / ORALS / HGH / PEPTIDES) and no restock marker. That omission is deliberate. */ .sp-home-grid{margin-bottom:64px} .sp-catbreak{ grid-column:1 / -1; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;margin:9px 0;padding:2px 4px 8px;border:0;background:none; overflow:visible; } .sp-card + .sp-catbreak,.sp-featured-wrap + .sp-catbreak{margin-top:18px} .sp-catbreak::after{ content:'';display:block;width:min(168px,44vw);height:1px;margin:5px auto 0;border:0; background:linear-gradient(90deg,transparent,rgba(212,177,106,.20) 20%,rgba(245,228,179,.42) 50%,rgba(212,177,106,.20) 80%,transparent); box-shadow:0 1px 6px rgba(0,0,0,.28); } .sp-catbreak-label{ display:inline-block; font-family:var(--sp-ff-display);font-style:italic;font-weight:500; font-size:clamp(23.5px,4.9vw,34px);line-height:1.11;letter-spacing:-.012em; padding:0 .035em .10em;overflow:visible; background-image:var(--sp-catbreak-text); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; color:transparent;text-shadow:0 1px 0 rgba(0,0,0,.50); } @media (max-width:780px){ .sp-catbreak{margin:8px 0 9px;padding:1px 2px 8px} .sp-card + .sp-catbreak{margin-top:15px} .sp-catbreak::after{width:min(148px,38vw);margin-top:4px} .sp-catbreak-label{font-size:clamp(23px,5.7vw,31.5px);line-height:1.11;padding-bottom:.11em} } /* a group with an odd card count leaves a trailing gap; the source centres that last card (productCard--categoryOddTail). Cosmetic, reproduced. */ .sp-home-grid > .sp-card--oddtail{grid-column:1 / -1;justify-self:center;margin:0 auto} @media (min-width:781px){ .sp-home-grid > .sp-card--oddtail{width:min(100%,320px);max-width:320px} } @media (max-width:780px){ .sp-home-grid > .sp-card--oddtail{ width:calc((100% - var(--sp-grid-gap)) / 2);max-width:calc((100% - var(--sp-grid-gap)) / 2); } } /* empty-state note shown while the catalogue has not been imported yet */ .sp-empty{ grid-column:1 / -1;text-align:center;padding:38px 16px; font-family:var(--sp-ff-body);font-size:13px;letter-spacing:.10em; text-transform:uppercase;color:var(--sp-tx3); } /* ---------- 5. HOMEPAGE SEO CONTENT ZONE ---------- LOCKED standard #6. H2 + ~300 words, rendered from the front page's own WP-editor content so the client edits it at wp-admin > Pages > Home. The source has no equivalent block - this is an addition by standard. */ .sp-seo{ margin:56px auto 0;padding:34px 30px;max-width:1000px; border-radius:var(--sp-r-panel); border:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 48px rgba(0,0,0,.42); } .sp-seo .sp-prose{max-width:78ch;margin:0 auto} .sp-seo .sp-prose h2:first-child{margin-top:0} @media (max-width:640px){ .sp-seo{margin-top:40px;padding:24px 18px;border-radius:14px} } /* ---------- 6. SCROLL REVEAL ---------- The source ships every below-the-fold card with an INLINE opacity:0 / translateY(20px) and flips it on intersection. We do the same with a class, and the no-JS / reduced-motion paths both leave the card fully visible - a reveal that never fires is the exact defect that ruined the source's own PDP screenshot tiles. */ .js .sp-reveal{opacity:0;transform:translateY(20px); transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)} .js .sp-reveal.is-revealed,.no-js .sp-reveal{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .sp-reveal{opacity:1 !important;transform:none !important;transition:none !important} }