/* ========================================================================= Sassys Pharmaceuticals Replica - SITEWIDE stylesheet Design tokens, primitives, header, footer and the SHARED PRODUCT CARD. Every colour/size below is either quoted from the source's own :root custom properties (scrape/assets/css/c8a2f947d13e6b04a9f1.css) or measured off the rendered DOM (scrape/source-cdp/design-tokens.json). Provenance is noted inline as [tok] (declared token) or [meas] (measured computed style). Webfonts are in assets/css/fonts.css (enqueued before this file). ========================================================================= */ /* ---------- 1. DESIGN TOKENS ---------- Source root blocks 0-4, collapsed to their EFFECTIVE values (later blocks win; see RECON-DESIGN 1.1 - --store-radius is 20px not 18px). The DESKTOP type scale (block 4) is the base here; block 3's smaller scale is re-applied under 768px. */ :root{ /* neutrals [tok] */ --sp-b0:#020202; --sp-b1:#050505; --sp-b2:#090909; --sp-b3:#0E0E0E; --sp-b4:#131313; --sp-b5:#1A1A1A; --sp-b6:#222222; /* gold ramp [tok] */ --sp-gold-hi:#D4C49A; --sp-gold-mid:#B9965A; --sp-gold-pure:#A07C3E; --sp-gold-deep:#745527; --sp-gold-lo:#4A3316; --sp-gold-rgb:185,150,90; /* the CARD-CHROME gold is NOT the token gold - measured #D4AF37. Do not "tidy" it into --sp-gold-mid or the cards go visibly duller. */ --sp-gold-chrome-rgb:212,175,55; /* NOTE ON BORDER WIDTHS. RECON-DESIGN 1.2/1.3 records card, pill, badge and button borders as "0.78125px solid". That figure is a CAPTURE ARTIFACT, not a design value: 1 / 0.78125 = 1.28 exactly, the harvest machine ran at 128% Windows display scaling, and the string "0.78125" appears ZERO times across all 11 source stylesheets - every one of them declares 1px (--store-border: 1px solid rgba(255,255,255,.10), .customProductPill border:1px, .badgeHotSeller border:1px). We ship 1px, which is what the source's own CSS says. Verified 2026-08-20. */ /* silver ramp [tok] */ --sp-silver-hi:#ECEEF0; --sp-silver-mid:#C2C8D0; --sp-silver-pure:#9AA0AA; --sp-silver-deep:#6A7080; --sp-silver-lo:#3E424A; --sp-silver-rgb:194,200,208; /* text [tok] */ --sp-tx:rgba(238,238,240,0.94); --sp-tx2:rgba(238,238,240,0.60); --sp-tx3:rgba(238,238,240,0.36); --sp-tx4:rgba(238,238,240,0.20); /* tones [tok] */ --sp-good:rgba(90,195,140,0.95); --sp-warn:rgba(185,150,90,0.95); --sp-bad:rgba(210,100,100,0.95); /* families [tok] */ --sp-ff-display:'Cormorant Garamond','Georgia',serif; --sp-ff-body:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif; /* spacing - an irregular hand-tuned ramp, NOT a 4/8pt grid [tok] */ --sp-s1:6px; --sp-s2:10px; --sp-s3:14px; --sp-s4:18px; --sp-s5:26px; --sp-s6:36px; --sp-s7:52px; /* radii [tok] + [meas] */ --sp-r-btn:9px; /* measured 9px on the real CTA; token claims 10px */ --sp-r-input:12px; /* measured on .searchInput */ --sp-r-card:20px; /* measured on the real product card */ --sp-r-catlink:10px; /* measured on .catLink */ --sp-r-panel:16px; --sp-r-modal:18px; --sp-r-pill:999px; /* chrome + carve [tok] */ --sp-chrome-hi:rgba(255,255,255,0.10); --sp-chrome-mid:rgba(255,255,255,0.055); --sp-chrome-lo:rgba(255,255,255,0.025); --sp-carve:rgba(0,0,0,0.72); --sp-carve2:rgba(0,0,0,0.88); --sp-border:1px solid rgba(255,255,255,0.10); --sp-border-soft:1px solid rgba(255,255,255,0.08); /* elevation ladder [tok] */ --sp-sh-flat:inset 0 1px 0 var(--sp-chrome-mid),inset 0 -1px 0 rgba(0,0,0,0.40); --sp-sh-raised:inset 0 1px 0 var(--sp-chrome-hi),inset 0 -1px 0 var(--sp-carve),0 4px 16px rgba(0,0,0,0.60),0 12px 36px rgba(0,0,0,0.40); --sp-sh-elevated:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 -1px 0 var(--sp-carve2),0 8px 32px rgba(0,0,0,0.72),0 24px 60px rgba(0,0,0,0.44); --sp-sh-hero:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.92),0 16px 56px rgba(0,0,0,0.80),0 36px 90px rgba(0,0,0,0.44); --sp-sh-modal:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.96),0 32px 90px rgba(0,0,0,0.90),0 60px 140px rgba(0,0,0,0.55); --sp-sh-btn:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 -1px 0 rgba(0,0,0,0.75),0 6px 20px rgba(0,0,0,0.65); /* measured on the real product card */ --sp-sh-card:inset 0 1px 0 rgba(255,255,255,0.08),inset 0 0 0 1px rgba(212,175,55,0.10),0 0 0 1px rgba(212,175,55,0.16),0 12px 28px rgba(0,0,0,0.30),0 3px 10px rgba(0,0,0,0.20); --sp-glow-faint:0 0 0 1px rgba(185,150,90,0.10),0 6px 24px rgba(185,150,90,0.08); --sp-glow-active:0 0 0 1px rgba(185,150,90,0.18),0 10px 32px rgba(185,150,90,0.14); --sp-focus-aura:0 0 0 2px rgba(194,200,208,0.30),0 0 0 5px rgba(194,200,208,0.10); /* motion [tok] */ --sp-t:200ms; --sp-t2:320ms; --sp-ease:cubic-bezier(.16,.84,.44,1); --sp-ease-spring:cubic-bezier(.34,1.56,.64,1); --sp-store-ease:cubic-bezier(.2,.8,.2,1); --sp-store-dur:180ms; /* chrome heights [tok] */ --sp-nav-h:60px; --sp-mob-h:72px; /* metallic text gradients [tok] */ --sp-gold-btn-text:linear-gradient(135deg,#E9DDC0 0%,#D8C49A 18%,#C6AD78 38%,#B18E4B 55%,#C6AD78 72%,#D8C49A 88%,#E9DDC0 100%); --sp-gold-btn-text-bright:linear-gradient(135deg,#F3EAD1 0%,#E9DDC0 25%,#D8C49A 55%,#E9DDC0 100%); --sp-gold-pop:linear-gradient(135deg,#F3EAD1 0%,#E9DDC0 22%,#D4B87A 48%,#C49B50 60%,#D4B87A 72%,#E9DDC0 88%,#F3EAD1 100%); --sp-silver-pop:linear-gradient(135deg,#FAFAF8 0%,#EDEBE7 20%,#D9D4CC 42%,#C8C1B6 58%,#D9D4CC 74%,#EDEBE7 90%,#FAFAF8 100%); --sp-silver-text-soft:linear-gradient(135deg,rgba(248,246,243,0.84) 0%,rgba(220,215,208,0.70) 38%,rgba(196,189,180,0.60) 60%,rgba(220,215,208,0.70) 82%,rgba(248,246,243,0.84) 100%); /* pressed-metal label gradient on catLink / quicklink text [meas] */ --sp-catlink-text:linear-gradient(148deg,#f5eee1 0%,#e2c99f 26%,#c79d61 54%,#efdcb8 84%,#fbf4ea 100%); /* category break heading gradient [meas] */ --sp-catbreak-text:linear-gradient(176deg,#f5e4b3 0%,#d8b673 38%,#b08a48 72%,#876430 100%); /* wordmark gradient [meas] */ --sp-wordmark:linear-gradient(155deg,#F8F6F3 0%,#EBE7E1 14%,#EDE0C8 28%,#D8C49A 42%,#C6AD78 52%,#D8C49A 62%,#EDE0C8 74%,#EBE7E1 88%,#F8F6F3 100%); /* fluid type scale - DESKTOP (root block 4) */ --sp-fs-nav:clamp(0.72rem,0.38vw + 0.66rem,0.88rem); --sp-fs-cat:clamp(0.74rem,0.42vw + 0.68rem,0.92rem); --sp-fs-card-title:clamp(0.96rem,0.40vw + 0.90rem,1.14rem); --sp-fs-price:clamp(1.26rem,0.62vw + 1.18rem,1.58rem); --sp-fs-btn:clamp(0.72rem,0.34vw + 0.68rem,0.86rem); --sp-fs-mob-label:clamp(0.62rem,0.28vw + 0.60rem,0.72rem); --sp-ico-mob:26px; /* layout */ --sp-wrap-max:1360px; --sp-grid-gap:20px; /* [meas] desktop 1441 */ } @media (max-width:767px){ :root{ /* root block 3 - the mobile-first (smaller) scale */ --sp-fs-nav:clamp(0.62rem,0.30vw + 0.56rem,0.78rem); --sp-fs-cat:clamp(0.64rem,0.34vw + 0.58rem,0.82rem); --sp-fs-card-title:clamp(0.78rem,0.25vw + 0.74rem,0.90rem); --sp-fs-price:clamp(1.05rem,0.45vw + 0.98rem,1.26rem); --sp-fs-btn:clamp(0.66rem,0.28vw + 0.62rem,0.80rem); --sp-fs-mob-label:clamp(0.54rem,0.22vw + 0.52rem,0.62rem); --sp-ico-mob:23px; --sp-grid-gap:10px; /* [meas] 390 */ } } @media (min-width:768px) and (max-width:1099px){ :root{ --sp-grid-gap:14px; } /* [meas] 820 */ } /* ---------- 2. RESET / DOCUMENT ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--sp-b0)} body{ margin:0; font-family:var(--sp-ff-body); font-size:16px; line-height:1.6; letter-spacing:0.01em; color:var(--sp-tx); background-color:#030303; /* [meas] the source's 5-layer atmospheric stack, verbatim */ background-image: radial-gradient(1100px 650px at 88% -6%,rgba(140,105,50,0.07) 0%,rgba(120,88,38,0.035) 30%,rgba(80,60,28,0.01) 50%,rgba(0,0,0,0) 72%), radial-gradient(800px 550px at 6% 22%,rgba(180,155,115,0.024) 0%,rgba(140,115,75,0.01) 40%,rgba(0,0,0,0) 70%), radial-gradient(1000px 500px at 50% 105%,rgba(110,82,36,0.055) 0%,rgba(90,68,30,0.024) 40%,rgba(0,0,0,0) 72%), linear-gradient(152deg,rgba(200,175,130,0.01) 0%,rgba(160,130,80,0.016) 16%,rgba(0,0,0,0) 30%,rgba(180,150,100,0.008) 48%,rgba(0,0,0,0) 62%,rgba(160,130,80,0.01) 78%,rgba(200,175,130,0.008) 100%), linear-gradient(#080706 0%,#060504 15%,#050403 35%,#040303 55%,#030302 75%,#020202 100%); background-attachment:fixed; overflow-x:hidden; } img{max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:2px solid rgba(194,200,208,0.55);outline-offset:2px} /* The one container. NOTE - THIS CORRECTS RECON-DESIGN 1.6. That section concludes the container is capped at 1360px and that the measured `wrap.max-width: 100%` is just an overflow guard. The measurement disproves it: at the 1441px capture the source's grid rendered 5 x 255.7 + 4 x 20 = 1358.5px. A 1360px cap would give 1360 - 72 = 1288px (cards of 241.6px); max-width:100% gives 1430 - 72 = 1358px (cards of 255.6px). The measured value matches the uncapped hypothesis to within 0.49px and the capped one is off by 70.5px. So .wrap really is full-bleed-with-padding, and we ship that. `.sp-topbar-inner` and `.sp-footer-inner` keep their real 1360px caps - those are NOT overridden on the source. Verified 2026-08-20. */ .sp-wrap{max-width:100%;margin:0 auto;padding:20px 14px 28px;position:relative; /* The source pairs max-width:100% with overflow-x:hidden on .wrap. That guard is load-bearing, not decorative: the store-head glow layer is a 500px-wide centred pseudo-element, so at a 390px viewport it spans -55px..445px and pushes the layout width to 445. Clipping here is what the source does. */ overflow-x:hidden} @media (max-width:767px){ .sp-wrap{padding:28px 14px 28px} } @media (min-width:768px){ .sp-wrap{padding:36px 24px 52px} } @media (min-width:1100px){ .sp-wrap{padding:52px 36px 72px} } /* gradient-painted text helper. Any source heading whose measured colour is rgba(0,0,0,0) is THIS technique, not a colour bug (RECON-DESIGN 1.4). */ .sp-metal{ -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .sp-metal{-webkit-text-fill-color:currentColor;color:#dcc39a} } .sp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .sp-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;padding:10px 16px; background:var(--sp-b3);color:var(--sp-tx)} .sp-skip-link:focus{left:8px;top:8px} /* ---------- 3. BUTTON PRIMITIVES ---------- .sp-btn--primary reproduces the measured card CTA exactly: Outfit 700 / 13.76px / ls 2.4768px / uppercase / rgb(194,200,208) bg rgba(14,14,14,.88) + silver sheen / border .78125px rgba(194,200,208,.07) radius 9px / padding 12px 14px / height 45.996px */ .sp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sp-ff-body);font-size:var(--sp-fs-btn);font-weight:700; letter-spacing:0.18em;text-transform:uppercase;line-height:1.6; padding:12px 14px;border-radius:var(--sp-r-btn);border:1px solid transparent; cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent; transition:transform var(--sp-store-dur) var(--sp-store-ease), box-shadow var(--sp-store-dur) var(--sp-store-ease), filter var(--sp-store-dur) var(--sp-store-ease); } .sp-btn--wide{width:100%} .sp-btn--primary{ color:var(--sp-silver-mid); background-color:rgba(14,14,14,0.88); background-image:linear-gradient(rgba(194,200,208,0.12) 0%,rgba(194,200,208,0.04) 50%,rgba(194,200,208,0.06) 100%); border-color:rgba(194,200,208,0.07); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 -1px 0 rgba(0,0,0,0.60),0 3px 14px rgba(0,0,0,0.55); min-height:46px; } .sp-btn--primary:hover{filter:brightness(1.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.62), 0 6px 20px rgba(0,0,0,0.62),0 0 0 1px rgba(185,150,90,0.14)} .sp-btn--primary:active{transform:translateY(1px) scale(.99);filter:brightness(.96)} .sp-btn--ghost{ color:var(--sp-tx2);background:rgba(255,255,255,0.025); border-color:rgba(255,255,255,0.08);box-shadow:var(--sp-sh-flat); } .sp-btn--ghost:hover{color:var(--sp-tx);background:rgba(255,255,255,0.05)} .sp-btn--small{padding:8px 14px;min-height:0;font-size:calc(var(--sp-fs-btn) - 0.06rem)} /* ---------- 4. BADGES + MARKETING PILLS ---------- Both measured: Outfit 900 / 11px / ls 1.54px / uppercase / radius 999px. NOTE: there is deliberately NO sold-out / out-of-stock / "in stock soon" variant here. HARD RULE 10 - every product ships purchasable. */ .sp-badge-stack,.sp-pill-stack{ display:flex;align-items:flex-start;justify-content:flex-start; width:100%;max-width:100%;margin:0;padding:0;pointer-events:none;position:relative;z-index:7; } .sp-pill-stack{margin-top:-2px} .sp-badge,.sp-pill{ position:relative;display:inline-flex;align-items:center;gap:8px; max-width:min(100%,320px);min-height:34px;padding:8px 18px; border-radius:var(--sp-r-pill); font-family:var(--sp-ff-body);font-size:11px;line-height:1;font-weight:900; letter-spacing:1.54px;text-transform:uppercase;white-space:nowrap;overflow:hidden; border:1px solid rgba(255,255,255,0.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 -1px 0 rgba(0,0,0,0.72), 0 10px 24px rgba(0,0,0,0.50),0 0 0 1px rgba(255,255,255,0.045); backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08); } .sp-badge::before,.sp-pill::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 42%,rgba(0,0,0,.24) 100%), radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.12) 0%,transparent 72%); } /* HOT SELLER badge [meas] text rgb(255,210,184), border rgba(255,118,71,.38) */ .sp-badge--hot{ color:rgb(255,210,184); background-image:linear-gradient(rgba(26,12,10,0.96) 0%,rgba(14,6,6,0.98) 55%,rgb(8,3,3) 100%); border-color:rgba(255,118,71,0.38); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.72), 0 10px 24px rgba(0,0,0,0.50),0 0 0 1px rgba(255,118,71,0.10),0 0 18px rgba(255,62,45,0.15); } /* SALE badge. NOT MEASURED: the source's capture probe sampled only pillGold and badgeHot, so no computed style exists for `.badge` on the one SALE product (Dianabol 20mg x 100 tabs). Rather than invent a colour, this reuses the MEASURED gold pill treatment, which is the source's own second badge skin. Flagged as an OPEN QUESTION - re-harvest to confirm. */ .sp-badge--sale{ color:#ffe2a0; background-image:linear-gradient(rgba(34,22,5,0.96) 0%,rgba(17,10,3,0.98) 58%,rgb(9,5,2) 100%); border-color:rgba(255,195,80,0.38); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.72), 0 10px 24px rgba(0,0,0,0.50),0 0 0 1px rgba(255,195,80,0.10),0 0 18px rgba(212,175,55,0.16); } /* the badge stack holds at most two badges side by side */ .sp-badge-stack{gap:6px;flex-wrap:wrap} /* gold marketing pill [meas] text rgb(255,226,160), border rgba(255,195,80,.38) */ .sp-pill--gold{ color:#ffe2a0; background-image:linear-gradient(rgba(34,22,5,0.96) 0%,rgba(17,10,3,0.98) 58%,rgb(9,5,2) 100%); border-color:rgba(255,195,80,0.38); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.72), 0 10px 24px rgba(0,0,0,0.50),0 0 0 1px rgba(255,195,80,0.10),0 0 18px rgba(212,175,55,0.16); } .sp-pill--gold .sp-pill-text{background-image:linear-gradient(180deg,#fff4cf 0%,#ffd980 23%,#d6a93b 55%,#fff0b8 100%)} .sp-pill--ruby{ color:#ffd1c8; background-image:linear-gradient(rgba(34,7,8,0.96) 0%,rgba(17,4,5,0.98) 58%,rgb(8,2,3) 100%); border-color:rgba(255,106,92,0.38); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.72), 0 10px 24px rgba(0,0,0,0.50),0 0 0 1px rgba(255,106,92,0.10),0 0 18px rgba(255,62,45,0.15); } .sp-pill--ruby .sp-pill-text{background-image:linear-gradient(180deg,#fff1ea 0%,#ffb7a4 24%,#ff705f 58%,#ffd6cb 100%)} .sp-badge-icon,.sp-pill-icon{position:relative;z-index:1;font-size:16px;line-height:1; flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(0,0,0,.38))} .sp-badge-text,.sp-pill-text{position:relative;z-index:1;text-shadow:0 1px 1px rgba(0,0,0,.56)} .sp-pill-text{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @media (max-width:640px){ .sp-badge,.sp-pill{gap:2.5px;min-width:0;min-height:19px;padding:3px 8px; font-size:9.2px;letter-spacing:.015em;max-width:88%;width:fit-content} .sp-badge-icon,.sp-pill-icon{font-size:10.5px} } /* ---------- 5. TOPBAR (desktop primary nav - 4 flat links) ---------- RECON-DESIGN 2.1/2.6: this source has NO mega-menu, NO dropdown, NO hover panel and NO announcement bar. Verified across all 29 captured pages. Do not add one. */ .sp-topbar{ display:flex;position:sticky;top:0;left:0;right:0;z-index:9999; height:var(--sp-nav-h);align-items:center;border:none; background-image:linear-gradient(rgba(17,14,11,0.84) 0%,rgba(10,8,7,0.78) 100%); backdrop-filter:blur(40px) saturate(200%) brightness(0.90); -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(0.90); box-shadow:0 1px 0 rgba(255,235,205,0.03),0 1px 0 rgba(173,132,69,0.08),0 12px 42px rgba(0,0,0,0.72); transform:translateZ(0); } .sp-topbar-inner{max-width:var(--sp-wrap-max);width:100%;margin:0 auto;padding:0 20px; display:flex;align-items:center;justify-content:center} .sp-nav{display:flex;align-items:center} .sp-navlink{ position:relative;display:inline-flex;align-items:center;padding:10px 18px; font-family:var(--sp-ff-body);font-size:var(--sp-fs-nav);font-weight:700; letter-spacing:0.22em;text-transform:uppercase;border-radius:7px; background-image:var(--sp-silver-text-soft); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; color:var(--sp-silver-mid); transition:opacity 0.18s ease; } .sp-navlink:hover,.sp-navlink.is-active{background-image:var(--sp-silver-pop); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .sp-navlink::after{ content:'';position:absolute;bottom:2px;left:16px;right:16px;height:1px; background:linear-gradient(90deg,transparent,rgba(194,200,208,0.62) 20%,rgba(255,252,248,0.95) 50%,rgba(194,200,208,0.62) 80%,transparent); opacity:0;transform:scaleX(0.5); transition:opacity var(--sp-t) var(--sp-ease),transform var(--sp-t) var(--sp-ease); } .sp-navlink.is-active::after{opacity:1;transform:scaleX(1)} /* cart count pill [meas] gradient #EDEAE5 -> #D0C9BF, black glyphs */ .sp-navcount{ display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:19px;padding:0 5px;margin-left:4px; font-family:var(--sp-ff-body);font-size:9.5px;font-weight:800;letter-spacing:0.02em; color:#000;-webkit-text-fill-color:#000; background-image:linear-gradient(135deg,#EDEAE5,#D0C9BF); border-radius:var(--sp-r-pill); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),inset 0 -1px 0 rgba(0,0,0,0.28),0 2px 8px rgba(0,0,0,0.60); } @media (max-width:767px){ .sp-topbar{display:none !important} } /* ---------- 6. MOBILE CHROME (<=767) ---------- A top util strip + a FIXED BOTTOM TAB BAR. NOT a hamburger drawer - the source has no drawer at all (RECON-DESIGN 2.5). A Woo theme's default burger would be wrong here. */ .sp-mobile-util{display:none} .sp-mobilenav{display:none} @media (max-width:767px){ .sp-mobile-util{ display:grid;grid-template-columns:repeat(3,1fr); background:linear-gradient(180deg,rgba(9,9,9,0.985),rgba(4,4,4,0.99)); box-shadow:0 1px 0 rgba(255,235,205,0.03),0 6px 20px rgba(0,0,0,0.55); position:sticky;top:0;z-index:9998; } .sp-mobile-util-link{ display:flex;align-items:center;justify-content:center;padding:11px 6px; font-family:var(--sp-ff-body);font-size:10px;font-weight:700;letter-spacing:0.14em; text-transform:uppercase; background-image:var(--sp-gold-pop); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; color:#C8A96A;opacity:0.78; } .sp-mobile-util-link + .sp-mobile-util-link{border-left:1px solid rgba(255,255,255,0.05)} .sp-mobile-util-link:active{opacity:1} .sp-mobilenav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999; height:calc(68px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:linear-gradient(180deg,rgba(9,9,9,0.985),rgba(3,3,3,0.995)); box-shadow:0 -1px 0 rgba(255,235,205,0.04),0 -10px 34px rgba(0,0,0,0.72); backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%); } .sp-mobilenav-inner{display:grid;grid-template-columns:repeat(4,1fr);width:100%} .sp-mobilenav-item{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; color:rgba(194,200,208,0.62);-webkit-tap-highlight-color:transparent; transition:transform .12s ease,color .12s ease; } .sp-mobilenav-item:active{transform:translateY(1px)} .sp-mobilenav-icon{position:relative;display:flex;align-items:center;justify-content:center} .sp-mobilenav-icon svg{width:var(--sp-ico-mob);height:var(--sp-ico-mob);display:block} .sp-mobilenav-label{ font-family:var(--sp-ff-body);font-size:var(--sp-fs-mob-label); font-weight:600;letter-spacing:0.10em;text-transform:uppercase; background-image:var(--sp-silver-text-soft); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .sp-mobilenav-item.is-active{color:var(--sp-silver-hi)} .sp-mobilenav-item.is-active .sp-mobilenav-label{background-image:var(--sp-silver-pop); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .sp-mobilenav-badge{ position:absolute;top:-6px;right:-10px; display:inline-flex;align-items:center;justify-content:center; min-width:17px;height:17px;padding:0 4px; font-family:var(--sp-ff-body);font-size:9px;font-weight:800; color:#000;-webkit-text-fill-color:#000; background-image:linear-gradient(135deg,#EDEAE5,#D0C9BF); border-radius:var(--sp-r-pill);box-shadow:0 2px 8px rgba(0,0,0,0.60); transition:opacity var(--sp-t) var(--sp-ease); } /* the source hides the mobile badge at zero; desktop still prints the 0 */ .sp-mobilenav-badge[data-count="0"]{opacity:0} /* keep page content clear of the fixed bar */ body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))} } /* ---------- 7. STORE HEAD (logo / category nav / quick links / search) ---- Present on the storefront surfaces (front page, shop, category, search). */ .sp-storehead{position:relative;text-align:center;padding:44px 0 28px;margin-bottom:8px} .sp-storehead::before{ content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%); width:min(500px,100%);height:400px;pointer-events:none;z-index:0; background:radial-gradient(ellipse at center,rgba(194,200,208,0.04) 0%,rgba(194,200,208,0.01) 40%,transparent 70%); } .sp-storehead > *{position:relative;z-index:1} .sp-storehead::after{ content:"";display:block;height:1px;max-width:980px;margin:16px auto 0; background:linear-gradient(90deg,transparent,rgba(194,200,208,0.10) 15%,rgba(185,150,90,0.22) 35%,rgba(194,200,208,0.30) 50%,rgba(185,150,90,0.22) 65%,rgba(194,200,208,0.10) 85%,transparent); opacity:.9; } .sp-storehead-logo-wrap{display:block} .sp-storehead-logo{ width:min(99vw,940px);max-width:100%;margin:0 auto;height:auto; aspect-ratio:2600/1171;object-fit:contain; filter:drop-shadow(0 4px 24px rgba(183,155,100,.20)); } /* text fallback if no logo image has been uploaded yet */ .sp-storehead-wordmark{ margin:0 auto;font-family:var(--sp-ff-display);font-style:italic;font-weight:700; font-size:clamp(3rem,11vw,7rem);line-height:1.12;letter-spacing:0.03em; padding-bottom:.12em; background-image:var(--sp-wordmark); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 28px rgba(200,165,100,0.22)); } @media (max-width:780px){ .sp-storehead{padding:10px 0 18px} .sp-storehead-logo{width:min(72vw,520px)} .sp-storehead-wordmark{font-size:clamp(2.6rem,12vw,4.2rem)} } /* category nav - a PRESSED-METAL BUTTON, not a text link [meas]: Cormorant Garamond ITALIC 700, radius 10px, padding 12px 22px, min-width 148px, gold-gradient label, active state physically depresses. */ .sp-catnav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:14px 16px;margin:12px auto 0;padding:0 14px;max-width:1040px} .sp-catlink{ position:relative;display:inline-flex;align-items:center;justify-content:center; min-width:148px;padding:12px 22px;border:none;border-radius:var(--sp-r-catlink); font-family:var(--sp-ff-display);font-style:italic;font-weight:700; font-size:clamp(1rem,2.15vw,1.16rem);letter-spacing:.06em;line-height:1; background:linear-gradient(180deg,rgba(24,24,24,.98) 0%,rgba(10,10,10,1) 100%); box-shadow:0 16px 32px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055),0 2px 10px rgba(0,0,0,.22); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; } .sp-catlink-text,.sp-quicklink-text{ display:block;color:#dcc39a; background-image:var(--sp-catlink-text); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.28); } .sp-catlink:hover,.sp-catlink:focus-visible{transform:translateY(-1px); box-shadow:0 20px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.025); filter:brightness(1.03)} .sp-catlink:active{transform:translateY(1px) scale(.97); box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03); filter:brightness(.96);transition-duration:.08s} .sp-catlink.is-active{ transform:translateY(2px) scale(.985); background:linear-gradient(180deg,rgba(12,12,12,1) 0%,rgba(4,4,4,1) 100%); box-shadow:0 8px 18px rgba(0,0,0,.46),inset 0 2px 5px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(219,183,119,.1); filter:brightness(.95); } @media (max-width:780px){ .sp-catnav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px; margin-top:6px;padding:0 12px;max-width:720px} .sp-catlink{width:100%;min-width:0;padding:10px 12px; font-size:clamp(.86rem,3.35vw,.98rem);border-radius:8px} .sp-catlink:nth-child(-n+3){grid-column:span 2} .sp-catlink:nth-child(n+4):nth-child(-n+5){grid-column:span 3} .sp-catlink:nth-child(n+6){grid-column:span 2} } /* quick links - same pressed-metal skin. Hidden at <=780 (the mobile util bar replaces them; measured quickLinksShown "none" at 390). */ .sp-quicklinks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:16px 20px;margin:20px auto 18px;padding:10px 14px 0;max-width:760px} .sp-quicklink-row{flex:0 0 100%;display:flex;justify-content:center;align-items:center} .sp-quicklink{ position:relative;display:inline-flex;align-items:center;justify-content:center; min-width:148px;padding:12px 22px;border:none;border-radius:var(--sp-r-catlink); font-family:var(--sp-ff-display);font-style:italic;font-weight:700; font-size:clamp(1rem,2.15vw,1.16rem);letter-spacing:.06em;line-height:1; background:linear-gradient(180deg,rgba(24,24,24,.98) 0%,rgba(10,10,10,1) 100%); box-shadow:0 16px 32px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055),0 2px 10px rgba(0,0,0,.22); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; } .sp-quicklink:hover,.sp-quicklink:focus-visible{transform:translateY(-1px); box-shadow:0 20px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.025); filter:brightness(1.03)} .sp-quicklink:active{transform:translateY(1px) scale(.97);filter:brightness(.96)} @media (max-width:780px){ .sp-quicklinks{display:none !important} } /* search - [meas] h 41.19px, radius 12px, bg rgba(12,12,12,.65), padding 12px 18px 12px 46px (the left pad clears the magnifier). */ .sp-searchwrap{max-width:460px;margin:0 auto 22px} .sp-searchform{position:relative;display:flex} .sp-searchico{position:absolute;left:16px;top:50%;transform:translateY(-50%); color:rgba(194,200,208,0.25);pointer-events:none;z-index:1} .sp-searchinput{ width:100%;padding:12px 18px 12px 46px; font-family:var(--sp-ff-body);font-size:14.5px;font-weight:400;letter-spacing:0.01em; line-height:normal;height:41.19px; /* [meas] measured height of the real input */ color:var(--sp-tx); background-image:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,rgba(255,255,255,0.010) 100%); background-color:rgba(12,12,12,0.65); border:1px solid rgba(255,255,255,0.055);border-radius:var(--sp-r-input);outline:none; backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.06),0 2px 12px rgba(0,0,0,0.35); -webkit-appearance:none;appearance:none; transition:box-shadow 0.28s ease,border-color 0.28s ease; } .sp-searchinput::placeholder{color:var(--sp-tx3)} .sp-searchinput:focus{border-color:rgba(194,200,208,0.16); box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.08),0 0 0 3px rgba(194,200,208,0.05),0 4px 20px rgba(0,0,0,0.45)} @media (max-width:767px){ .sp-searchinput{font-size:14px;padding:14px 18px 14px 46px;height:45px} } /* ---------- 8. THE SHARED PRODUCT CARD ---------- ONE component: template-parts/product-card.php. Used by the homepage showcases + grid, the shop/category archive, PDP related products, cart cross-sells and search. Contents in SOURCE ORDER: image -> badge layer -> pill layer -> title -> price -> add-to-cart The source card carries NO category label, NO rating, NO review count, NO excerpt and NO SKU. Do not add them. HARD RULE 10: never a SOLD OUT badge, never a restock/notify form, never a disabled CTA. */ .sp-grid{ display:grid;gap:var(--sp-grid-gap); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); align-items:stretch;margin:0;padding:0;list-style:none; } @media (max-width:860px){ .sp-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} } @media (max-width:520px){ .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Woo ships `ul.products::before{content:" ";display:table}` as a float clearfix. On a grid container that pseudo-element occupies cell 1 and shifts the whole catalogue one cell right (STANDARDS, case 1). */ .sp-grid::before,.sp-grid::after{content:none !important;display:none !important} .sp-card{ position:relative;display:flex;flex-direction:column;overflow:hidden; border-radius:var(--sp-r-card); border:1px solid rgba(212,175,55,0.34); background-color:rgba(13,11,10,0.78); background-image:linear-gradient(rgba(255,248,236,0.05) 0%,rgba(210,175,118,0.024) 18%,rgba(255,255,255,0.01) 52%,rgba(255,245,225,0.008) 100%); box-shadow:var(--sp-sh-card); transform:translateZ(0);margin:0; transition:transform var(--sp-store-dur) var(--sp-store-ease), box-shadow var(--sp-store-dur) var(--sp-store-ease), border-color var(--sp-store-dur) var(--sp-store-ease); } @media (hover:hover){ .sp-card:hover{transform:translateY(-2px);border-color:rgba(212,175,55,0.46); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 0 0 1px rgba(212,175,55,0.14), 0 0 0 1px rgba(212,175,55,0.22),0 18px 40px rgba(0,0,0,0.38),0 4px 14px rgba(0,0,0,0.24)} } /* the whole card is clickable via an absolutely-positioned empty overlay link; the image carries alt="" and the accessible name comes from this anchor */ .sp-card-link{position:absolute;inset:0;z-index:1;text-decoration:none} .sp-card-media{ position:relative;aspect-ratio:4/5;overflow:hidden;flex-shrink:0; background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.10),transparent 58%), linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.10)); } .sp-card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block} .sp-card-media-placeholder{width:100%;height:100%;display:block} .sp-card-media-overlay{ position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; align-items:flex-start;justify-content:flex-start;gap:6px;padding:10px; pointer-events:none; } .sp-card-body{ position:relative;z-index:4;display:flex;flex-direction:column;gap:10px;flex:1; padding:14px 14px 16px; background-image:linear-gradient(180deg,rgba(255,255,255,0.018) 0%,rgba(255,255,255,0.005) 100%); background-color:var(--sp-b2); } /* [meas] Outfit 700 / 15px / lh 17.7px / ls .375px / rgb(236,238,240) Alignment from the source stylesheet: `.cardTitle{text-align:center!important}` (c8a2f947d13e6b04a9f1.css @63790). The source additionally paints the title with --silver-pop; we keep the flat colour because it already equals the MEASURED reference value, and swapping in the gradient would change the painted pixels away from it. */ .sp-card-title{ font-family:var(--sp-ff-body);font-size:15px;font-weight:700; line-height:1.18;letter-spacing:0.375px;color:rgb(236,238,240);margin:0; text-align:center; } /* `.cardMeta{text-align:center!important}` @64164, `.price{justify-content:center!important}` */ .sp-card-meta{flex:1;text-align:center} /* The gradient is applied to BOTH .sp-price (wrapper) and .sp-price-now (the inner that actually holds the glyphs). Only the inner one is strictly required - the wrapper has no direct text node - but a wrapper reporting `background-image:none` reads exactly like a missing fix to any tool that samples the wrapper, which has already cost one audit cycle. Painting both makes the element you happen to query irrelevant. */ .sp-price{ display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0; color:#E9DDC0; background-image:var(--sp-gold-pop); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* PRICE - GOLD, not silver. RECON-DESIGN 1.4's table records rgb(236,238,240) for priceNow. That is the FALLBACK `color` sitting underneath a transparent -webkit-text-fill-color, i.e. what you would see if the gradient fill failed - not what the source paints. Two rules target .priceNow and BOTH carry !important, so the later one wins: @63790 sets --silver-text-gradient, then @89940 sets `background:var(--gold-pop)` + background-clip:text + text-fill transparent + weight 800 + drop-shadow. @89940 is later, so the source price is GOLD. Painted sample from the audit: rgb(233,221,192) = #E9DDC0, which is exactly the 22% stop of --gold-pop. Confirms the gradient reading. */ .sp-price-now{ font-family:var(--sp-ff-body);font-size:var(--sp-fs-price);font-weight:800; line-height:1.6;letter-spacing:0.01em; color:#E9DDC0; background-image:var(--sp-gold-pop); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 10px rgba(200,165,80,0.15)); } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .sp-price-now{-webkit-text-fill-color:#E9DDC0;color:#E9DDC0} } /* The source hides the struck-through "was" price on the card: `.priceWas{display:none!important}` @64520 (only 1 product has one). */ .sp-price-was{display:none} .sp-card-actions{position:relative;z-index:5;margin-top:auto;min-height:46px} /* --- Woo defence, SITEWIDE. This lives in base.css and NOT in a shop stylesheet on purpose: the shared card also renders on /cart/ (cross-sells) and on the PDP related row, and /cart/ does not load shop.css. `.woocommerce:where(body:not(...)) a.button` computes at (0,2,1) - :where() contributes nothing - and would repaint the CTA as Woo's grey pill on every page whose carries `woocommerce`. The selectors below are (0,3,1)+. */ .sp-card .sp-card-actions a.sp-card-cta, .sp-card .sp-card-actions a.sp-card-cta.button, .sp-card .sp-card-actions button.sp-card-cta, body .sp-card a.sp-card-cta{ display:inline-flex;align-items:center;justify-content:center;width:100%; font-family:var(--sp-ff-body);font-size:var(--sp-fs-btn);font-weight:700; letter-spacing:0.18em;text-transform:uppercase;line-height:1.6; padding:12px 14px;height:46px;border-radius:var(--sp-r-btn); /* [meas] 45.9961px */ color:#D4BC82; /* label colour; the visible glyphs are the .sp-btn-text span */ background-color:rgba(14,14,14,0.88); background-image:linear-gradient(rgba(194,200,208,0.12) 0%,rgba(194,200,208,0.04) 50%,rgba(194,200,208,0.06) 100%); border:1px solid rgba(194,200,208,0.07); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),inset 0 -1px 0 rgba(0,0,0,0.60),0 3px 14px rgba(0,0,0,0.55); text-decoration:none;cursor:pointer; transition:filter var(--sp-store-dur) var(--sp-store-ease), box-shadow var(--sp-store-dur) var(--sp-store-ease); } /* --- CTA LABEL IS GOLD, NOT SILVER -------------------------------------- Same class of error as the price: RECON-DESIGN 1.4 recorded rgb(194,200,208) for btnPrimary, which is the FALLBACK colour under a transparent -webkit-text-fill-color. The rule that actually wins for a storefront card CTA is html:not([data-theme="light"]) body.storeIndex .productGrid .cardActions .btn.btnPrimary .btnText (@176473) -> background:var(--gold-btn-text); background-clip:text; -webkit-text-fill-color:transparent; color:#D4BC82; ls .18em; weight 700 and the PDP add-to-cart gets the identical treatment at @173699, so this is the shared card's CTA treatment on every surface. Audit's painted sample rgb(199,175,126) ~= #C6AD78, the 38% stop of --gold-btn-text. Confirms the gradient reading. CRITICAL: the gradient goes on the INNER SPAN, never on the . The button carries its own visible background, and background-clip:text on the anchor would clip that chrome to the glyphs and destroy the button. This is exactly why the source targets .btnText. The anchor still gets color:#D4BC82 so any tool sampling the anchor reads gold too. Lives in base.css (SITEWIDE) on purpose: the shared card also renders on the PDP related row and in cart cross-sells, and /cart/ loads base.css but NOT home.css. */ /* The BUTTON element stays silver on the source - .cardActions .btnPrimary sets color:var(--silver-mid) (@19443, @65828) and @57312 pins -webkit-text-fill-color:var(--silver-mid)!important. Only the LABEL is gold. What the button itself does need is centring (@244459). */ body .sp-card a.sp-card-cta, body .sp-card button.sp-card-cta{text-align:center;color:#D4BC82} body .sp-card .sp-card-cta .sp-btn-text{ display:block;width:100%;margin:0 auto;text-align:center;line-height:1.15; font-weight:700;letter-spacing:0.18em; color:#D4BC82; background-image:var(--sp-gold-btn-text); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none;filter:none; } body .sp-card .sp-card-cta:hover .sp-btn-text{ background-image:var(--sp-gold-btn-text-bright); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ body .sp-card .sp-card-cta .sp-btn-text{-webkit-text-fill-color:#D4BC82;color:#D4BC82} } body .sp-card a.sp-card-cta:hover{filter:brightness(1.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.62), 0 6px 20px rgba(0,0,0,0.62),0 0 0 1px rgba(185,150,90,0.14)} body .sp-card a.sp-card-cta.loading{opacity:.72;pointer-events:none} body .sp-card a.sp-card-cta.loading::after{ content:'';width:13px;height:13px;margin-left:8px;border-radius:50%; border:2px solid rgba(194,200,208,.35);border-top-color:var(--sp-silver-mid); animation:sp-spin .6s linear infinite; } @keyframes sp-spin{to{transform:rotate(360deg)}} /* Woo appends a "View cart" link after an ajax add. The source card has no such link, and letting it in changes the card height mid-grid. */ .sp-card .added_to_cart.wc-forward{display:none !important} /* ---------- 9. FOOTER ---------- RECON-DESIGN 4: ONE centred row of exactly THREE links plus a copyright line. No columns, no column headings, NO payment icons, no trust badges, no social links, no newsletter, no address, no ABN. The source footer is three and one
and nothing else. Do not add anything. */ .sp-footer{position:relative;margin:80px 0 0;padding:16px 12px 22px;border:none;background:transparent} .sp-footer::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(194,200,208,0.06) 15%,rgba(194,200,208,0.18) 35%,rgba(194,200,208,0.24) 50%,rgba(194,200,208,0.18) 65%,rgba(194,200,208,0.06) 85%,transparent); } .sp-footer-inner{max-width:var(--sp-wrap-max);margin:0 auto;padding:0 24px; display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center} .sp-footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap} .sp-footer-links a{ font-family:var(--sp-ff-display);font-size:18px;font-weight:500; letter-spacing:0.14em;text-transform:uppercase;opacity:0.62; transition:opacity var(--sp-t) var(--sp-ease); } .sp-footer-links a:hover,.sp-footer-links a[aria-current="page"]{opacity:1} .sp-footer-link-text{ background-image:var(--sp-gold-pop); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; color:#C8A96A; } .sp-footer-copy{font-family:var(--sp-ff-body);font-size:13px;font-weight:400; letter-spacing:0.03em;line-height:1.5;color:rgba(194,200,208,0.18)} @media (max-width:767px){ .sp-footer-links a{font-size:16px} .sp-footer-copy{font-size:12px} } /* the source hides the footer on checkout (RECON-DESIGN 4.4). Do it in CSS, not with an inline JS style, or WooCommerce's footer flashes first. */ body.woocommerce-checkout .sp-footer{display:none} /* ---------- 10. SITEWIDE PROSE + PAGE TITLE ---------- */ .sp-prose{font-family:var(--sp-ff-body);font-size:16px;line-height:1.7;color:var(--sp-tx2)} .sp-prose > *:first-child{margin-top:0} .sp-prose h1,.sp-prose h2,.sp-prose h3,.sp-prose h4{ font-family:var(--sp-ff-display);font-weight:600;letter-spacing:0.06em; color:var(--sp-gold-mid);margin:1.6em 0 .6em;line-height:1.2} .sp-prose h2{font-size:clamp(1.4rem,2.2vw,1.9rem);text-transform:uppercase} .sp-prose h3{font-size:clamp(1.15rem,1.6vw,1.4rem)} .sp-prose p{margin:0 0 1.05em} .sp-prose a{color:var(--sp-gold-hi);text-decoration:underline;text-underline-offset:3px} .sp-prose ul,.sp-prose ol{margin:0 0 1.05em;padding-left:1.3em} .sp-prose li{margin:0 0 .45em} .sp-prose strong{color:var(--sp-tx);font-weight:600} .sp-prose img{border-radius:var(--sp-r-panel)} .sp-page-title{ font-family:var(--sp-ff-display);font-weight:700;font-style:italic; font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:0.02em; margin:0 0 .5em;padding-bottom:.15em; background-image:var(--sp-wordmark); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 24px rgba(200,165,100,0.18)); } .sp-panel{ border-radius:var(--sp-r-panel);border:var(--sp-border-soft); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); box-shadow:var(--sp-sh-raised);padding:22px; } /* ---------- 11. MOTION PREFERENCE ---------- The source honours prefers-reduced-motion in 12 places; so do we. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms !important;animation-iteration-count:1 !important; transition-duration:0.01ms !important;scroll-behavior:auto !important; } .sp-card,.sp-catlink,.sp-quicklink{transform:none !important} } @media print{ .sp-topbar,.sp-mobilenav,.sp-mobile-util,.sp-footer,.sp-btn{display:none !important} }