/* ============================================================ SWEET DIVA — DESIGN SYSTEM / TOKEN LAYER ------------------------------------------------------------ Single source of truth for colour, type, space, elevation and motion. Loaded BEFORE customstyle.css so component CSS can consume these tokens (and still override where it needs to). BACKWARD COMPATIBILITY CONTRACT The 17 --sd-* tokens that already existed in customstyle.css keep their EXACT previous values and are re-declared here as aliases at the bottom of :root. Nothing shifts visually when this file is added; it only makes new values available. Naming --sd-brand-* brand rose ramp (50 lightest -> 900 darkest) --sd-neutral-* warm grey ramp --sd- semantic role (surface / text / border ...) Always prefer the semantic role token in component CSS. ============================================================ */ :root { /* ── 1. COLOUR PRIMITIVES ───────────────────────────────── Brand ramp is built around the existing brand pink (#e8557a = 500). The old --sd-pink-light and --sd-pink-dark land exactly on 50 and 600. */ --sd-brand-50: #fdf0f4; --sd-brand-100: #fbdde5; --sd-brand-200: #f7bccb; --sd-brand-300: #f294ab; --sd-brand-400: #ed6f8f; --sd-brand-500: #e8557a; --sd-brand-600: #c93f62; --sd-brand-700: #a63250; --sd-brand-800: #82273f; --sd-brand-900: #5e1c2e; /* Warm-tinted neutrals — reads softer than pure grey and suits a fashion surface better. */ --sd-neutral-0: #ffffff; --sd-neutral-50: #f8f8f8; --sd-neutral-100: #f0f0f0; --sd-neutral-200: #e4e4e4; --sd-neutral-300: #d4d4d4; --sd-neutral-400: #a3a3a3; --sd-neutral-500: #737373; --sd-neutral-600: #666666; --sd-neutral-700: #4a4a4a; --sd-neutral-800: #333333; --sd-neutral-900: #1a1a1a; /* Violet accent. The hero slider pairs a magenta with a purple for its futuristic gradient. Rather than flatten that to the brand rose — which would kill the effect — the purple is promoted to a real ramp, so the gradient becomes a system decision, not two loose hex values. */ --sd-accent-300: #c084d8; --sd-accent-400: #a855c4; --sd-accent-500: #9b27af; --sd-accent-600: #7d1f8d; /* Deep plum-black. Used for high-contrast "editorial" surfaces (hero overlays, footer) — this is what gives the site its modern depth without going neon. */ --sd-ink: #1b1420; --sd-ink-soft: #2a2030; --sd-ink-deep: #0f0f1e; /* hero slider backdrop */ /* Status */ --sd-success: #2e7d32; --sd-success-bg: #edf7ed; --sd-warning: #b26a00; --sd-warning-bg: #fff6e6; --sd-danger: #c62828; --sd-danger-bg: #fdecec; --sd-info: #0277bd; --sd-info-bg: #e8f4fb; /* ── 2. SEMANTIC ROLES ──────────────────────────────────── Component CSS should reach for these, not the ramps. */ --sd-surface: var(--sd-neutral-0); --sd-surface-sunken: var(--sd-neutral-50); --sd-surface-raised: var(--sd-neutral-0); --sd-surface-inverse: var(--sd-ink); --sd-surface-brand: var(--sd-brand-500); --sd-surface-brand-subtle: var(--sd-brand-50); --sd-content: var(--sd-neutral-800); --sd-content-muted: var(--sd-neutral-600); --sd-content-subtle: var(--sd-neutral-500); --sd-content-inverse: var(--sd-neutral-0); --sd-content-brand: var(--sd-brand-600); --sd-border: var(--sd-neutral-200); --sd-border-strong: var(--sd-neutral-300); --sd-border-brand: var(--sd-brand-500); /* ── 3. TYPOGRAPHY ──────────────────────────────────────── Fluid scale: every step interpolates between a mobile and a desktop size, so type is responsive by default and no per-breakpoint font-size overrides are needed. */ /* style.css has its own @import for Poppins (moved into the alongside Inter). Poppins is the site's typeface throughout, body copy and every heading level — h1-h6, including the .s-h1/.s-h2/ .section-title "hero" headings, all resolve to --sd-font-body. --sd-font-sans stays separate for the .sd-* header/nav UI chrome specifically, which already depended on Inter for 7 rules before this file existed — that split is unrelated to the body/heading typeface and untouched by it. A Playfair Display "editorial serif" treatment was tried on the hero/section headings and reverted; --sd-font-display is left defined (unused) in case a display face is wanted again later. */ --sd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sd-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sd-font-display: var(--sd-font-body); --sd-text-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --sd-text-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --sd-text-base: clamp(0.94rem, 0.90rem + 0.18vw, 1.02rem); --sd-text-lg: clamp(1.06rem, 1.00rem + 0.28vw, 1.20rem); --sd-text-xl: clamp(1.22rem, 1.12rem + 0.45vw, 1.45rem); --sd-text-2xl: clamp(1.45rem, 1.28rem + 0.75vw, 1.85rem); --sd-text-3xl: clamp(1.75rem, 1.48rem + 1.20vw, 2.40rem); --sd-text-4xl: clamp(2.10rem, 1.70rem + 1.80vw, 3.10rem); --sd-text-5xl: clamp(2.55rem, 1.95rem + 2.65vw, 4.00rem); --sd-weight-regular: 400; --sd-weight-medium: 500; --sd-weight-semibold: 600; --sd-weight-bold: 700; --sd-leading-tight: 1.15; --sd-leading-snug: 1.3; --sd-leading-normal: 1.55; --sd-leading-relaxed: 1.75; --sd-tracking-tight: -0.02em; --sd-tracking-normal: 0; --sd-tracking-wide: 0.04em; --sd-tracking-wider: 0.10em; /* ── 4. SPACING (4px base) ──────────────────────────────── */ --sd-space-0: 0; --sd-space-1: 0.25rem; /* 4px */ --sd-space-2: 0.5rem; /* 8px */ --sd-space-3: 0.75rem; /* 12px */ --sd-space-4: 1rem; /* 16px */ --sd-space-5: 1.5rem; /* 24px */ --sd-space-6: 2rem; /* 32px */ --sd-space-7: 2.5rem; /* 40px */ --sd-space-8: 3rem; /* 48px */ --sd-space-9: 4rem; /* 64px */ --sd-space-10: 5rem; /* 80px */ --sd-space-11: 6rem; /* 96px */ /* Vertical rhythm between page sections — fluid so mobile doesn't inherit desktop's generous spacing. */ --sd-section-y: clamp(2.5rem, 1.6rem + 4vw, 6rem); /* ── 5. RADII ───────────────────────────────────────────── */ --sd-radius-xs: 4px; --sd-radius-sm: 6px; --sd-radius-md: 8px; --sd-radius-lg: 14px; --sd-radius-xl: 20px; --sd-radius-2xl: 28px; --sd-radius-pill: 999px; --sd-radius-circle: 50%; /* ── 6. ELEVATION ───────────────────────────────────────── Layered shadows (tight contact + broad ambient) read far more natural than a single large blur. */ --sd-elev-1: 0 1px 2px rgba(27, 20, 32, 0.06), 0 1px 3px rgba(27, 20, 32, 0.05); --sd-elev-2: 0 2px 4px rgba(27, 20, 32, 0.05), 0 4px 12px rgba(27, 20, 32, 0.07); --sd-elev-3: 0 4px 8px rgba(27, 20, 32, 0.05), 0 12px 28px rgba(27, 20, 32, 0.10); --sd-elev-4: 0 8px 16px rgba(27, 20, 32, 0.06), 0 24px 48px rgba(27, 20, 32, 0.14); --sd-elev-brand: 0 6px 20px rgba(232, 85, 122, 0.28); /* Glass surfaces — used sparingly on overlays/sticky bars. */ --sd-glass-bg: rgba(255, 255, 255, 0.72); --sd-glass-border: rgba(255, 255, 255, 0.55); --sd-glass-blur: saturate(180%) blur(14px); /* ── 7. GRADIENTS ───────────────────────────────────────── */ --sd-gradient-brand: linear-gradient(135deg, var(--sd-brand-400) 0%, var(--sd-brand-600) 100%); --sd-gradient-ink: linear-gradient(160deg, var(--sd-ink) 0%, var(--sd-ink-soft) 100%); /* The hero's signature rose -> violet sweep */ --sd-gradient-accent: linear-gradient(90deg, var(--sd-brand-500) 0%, var(--sd-accent-500) 100%); --sd-gradient-sheen: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); /* ── 8. MOTION ──────────────────────────────────────────── */ --sd-ease: cubic-bezier(0.4, 0, 0.2, 1); --sd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sd-duration-fast: 140ms; --sd-duration-normal: 220ms; --sd-duration-slow: 380ms; --sd-transition-base: all var(--sd-duration-normal) var(--sd-ease); /* ── 9. LAYOUT ──────────────────────────────────────────── */ --sd-container: 1320px; --sd-container-md: 1080px; --sd-container-sm: 760px; --sd-gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem); /* Offset for anything position:sticky. The main header wrap becomes fixed at --sd-header-h once scrolled, so sticky panels clear it by that much plus a little breathing room. One value, so a header height change does not have to be chased through page CSS. */ --sd-sticky-top: calc(var(--sd-header-h) + var(--sd-space-4)); /* Z-index scale — single ordered list beats scattered magic numbers. Header sits above the cookie banner (1050), which is why it lands at 1060. */ --sd-z-base: 1; --sd-z-dropdown: 900; --sd-z-sticky: 1000; --sd-z-banner: 1050; --sd-z-header: 1060; --sd-z-overlay: 1400; --sd-z-drawer: 1500; --sd-z-modal: 1600; --sd-z-toast: 1800; /* ── 10. FOCUS (accessibility) ──────────────────────────── */ --sd-focus-ring: 0 0 0 3px rgba(232, 85, 122, 0.45); --sd-focus-offset: 2px; /* ── 11. BACKWARD-COMPATIBLE ALIASES ────────────────────── The original 17 tokens, mapped onto the new scale. Values are byte-identical to what customstyle.css declared, so every existing .sd-* rule renders exactly as before. */ --sd-pink: var(--sd-brand-500); /* #e8557a */ --sd-pink-dark: var(--sd-brand-600); /* #c93f62 */ --sd-pink-light: var(--sd-brand-50); /* #fdf0f4 */ --sd-black: var(--sd-neutral-900); /* #1a1a1a */ --sd-gray-1: var(--sd-neutral-50); /* #f8f8f8 */ --sd-gray-2: var(--sd-neutral-100); /* #f0f0f0 */ --sd-gray-3: var(--sd-neutral-300); /* #d4d4d4 */ --sd-text: var(--sd-neutral-800); /* #333 */ --sd-text-light: var(--sd-neutral-600); /* #666 */ --sd-white: var(--sd-neutral-0); /* #ffffff */ --sd-radius: var(--sd-radius-md); /* 8px */ --sd-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); --sd-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.07); --sd-transition: 0.22s ease; --sd-header-h: 70px; --sd-topbar-h: 38px; --sd-font: var(--sd-font-sans); } /* ============================================================ REDUCED MOTION Respect the OS setting. Motion tokens collapse to ~0 so every component that transitions via these tokens becomes still without needing its own media query. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --sd-duration-fast: 1ms; --sd-duration-normal: 1ms; --sd-duration-slow: 1ms; --sd-transition: 1ms linear; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ============================================================ TYPOGRAPHY LAYER ------------------------------------------------------------ style.css sets body and h1-h6 to Poppins, which really is loaded (its own @import, now in the ). This file loads after style.css and shares its specificity, so these rules restate the same font-family (Poppins) for every heading level rather than silently fighting it. h1/h2 and the .s-h1/ .s-h2/.section-title "hero" headings all resolve to the same --sd-font-body — Poppins is the one typeface for content and headings alike; --sd-font-sans (Inter) stays scoped to the .sd-* header/nav UI chrome only. ============================================================ */ body { font-family: var(--sd-font-body); font-size: var(--sd-text-base); line-height: var(--sd-leading-normal); color: var(--sd-content); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--sd-font-body); line-height: var(--sd-leading-snug); color: var(--sd-content); } /* Section/hero headings — kept in Poppins (--sd-font-body), same as everything else. Playfair Display was tried here for an editorial serif accent but the request was for Poppins throughout, headings included, so this class no longer switches the family — it only carries the weight/spacing treatment. --sd-font-display is left defined in case a display face is wanted again later, just unused. */ .s-h1, .s-h2, .section-title, .sd-display { font-family: var(--sd-font-body); font-weight: var(--sd-weight-semibold); line-height: var(--sd-leading-tight); letter-spacing: var(--sd-tracking-tight); } /* Opt-in size steps, so a heading's size is chosen on purpose rather than inherited from whatever tag was reached for. */ .sd-display-xl { font-size: var(--sd-text-5xl); } .sd-display-lg { font-size: var(--sd-text-4xl); } .sd-display-md { font-size: var(--sd-text-3xl); } .sd-display-sm { font-size: var(--sd-text-2xl); } /* Eyebrow / kicker above a section title */ .sd-eyebrow { font-family: var(--sd-font-sans); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-semibold); letter-spacing: var(--sd-tracking-wider); text-transform: uppercase; color: var(--sd-content-brand); } /* Long-form copy (legal, about, policy pages) */ .sd-prose { max-width: 68ch; font-size: var(--sd-text-base); line-height: var(--sd-leading-relaxed); color: var(--sd-content-muted); } .sd-prose > * + * { margin-top: var(--sd-space-4); } /* Prices read better with tabular figures — digits line up across a product grid instead of jittering. */ .sd-numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ============================================================ UTILITY PRIMITIVES Deliberately small. These are the patterns repeated across nearly every page; everything else stays in component CSS. ============================================================ */ /* Page section rhythm */ .sd-section { padding-block: var(--sd-section-y); } .sd-container { width: 100%; max-width: var(--sd-container); margin-inline: auto; padding-inline: var(--sd-gutter); } .sd-container--md { max-width: var(--sd-container-md); } .sd-container--sm { max-width: var(--sd-container-sm); } /* Visible focus for keyboard users only — never for mouse clicks, so it doesn't fight the visual design. */ .sd-focusable:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sd-brand-500); outline-offset: var(--sd-focus-offset); border-radius: var(--sd-radius-xs); } /* Screen-reader-only text (needed for icon-only buttons) */ .sd-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; } /* Skip link — first tab stop, for keyboard/screen-reader users */ .sd-skip-link { position: absolute; left: var(--sd-space-4); top: var(--sd-space-4); z-index: var(--sd-z-toast); padding: var(--sd-space-3) var(--sd-space-5); background: var(--sd-surface); color: var(--sd-content-brand); font-weight: var(--sd-weight-semibold); border-radius: var(--sd-radius-md); box-shadow: var(--sd-elev-3); transform: translateY(-150%); transition: transform var(--sd-duration-normal) var(--sd-ease-out); } .sd-skip-link:focus { transform: translateY(0); } /* Media that never overflows its column */ .sd-media-fluid { display: block; max-width: 100%; height: auto; } /* Wide content (tables, code, diagram) scrolls inside itself rather than forcing the page to scroll sideways. */ .sd-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Fixed-ratio media box — prevents layout shift while images load, which is a Core Web Vitals (CLS) win. */ .sd-ratio { position: relative; width: 100%; overflow: hidden; background: var(--sd-surface-sunken); } .sd-ratio > img, .sd-ratio > video, .sd-ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sd-ratio--square { aspect-ratio: 1 / 1; } .sd-ratio--portrait { aspect-ratio: 3 / 4; } .sd-ratio--product { aspect-ratio: 2 / 3; } .sd-ratio--wide { aspect-ratio: 16 / 9; } /* Clamp text to N lines */ .sd-clamp-1, .sd-clamp-2, .sd-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .sd-clamp-1 { -webkit-line-clamp: 1; } .sd-clamp-2 { -webkit-line-clamp: 2; } .sd-clamp-3 { -webkit-line-clamp: 3; } /* ============================================================ COLOUR + BUTTON UTILITIES Bootstrap 4's .text-primary is #007bff — a blue, on a rose brand. Prices and totals were rendering blue because of it. These give components a brand-correct option. ============================================================ */ .sd-text-brand { color: var(--sd-content-brand); } .sd-text-muted { color: var(--sd-content-muted); } .sd-text-inverse { color: var(--sd-content-inverse); } /* Buttons — .sd-btn is the shape, the modifier is the emphasis. Pairing a solid primary with an outline secondary gives an action group a clear hierarchy instead of two identical buttons competing for the same attention. */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2); padding: var(--sd-space-3) var(--sd-space-5); border: 1px solid transparent; border-radius: var(--sd-radius-md); font-family: var(--sd-font-sans); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-semibold); letter-spacing: var(--sd-tracking-wide); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--sd-duration-normal) var(--sd-ease), border-color var(--sd-duration-normal) var(--sd-ease), color var(--sd-duration-normal) var(--sd-ease), transform var(--sd-duration-fast) var(--sd-ease-out), box-shadow var(--sd-duration-normal) var(--sd-ease); } .sd-btn:hover { text-decoration: none; transform: translateY(-1px); } .sd-btn:active { transform: translateY(0); } .sd-btn--block { width: 100%; } .sd-btn--primary { background: var(--sd-brand-500); border-color: var(--sd-brand-500); color: var(--sd-content-inverse); box-shadow: var(--sd-elev-brand); } .sd-btn--primary:hover { background: var(--sd-brand-600); border-color: var(--sd-brand-600); color: var(--sd-content-inverse); } .sd-btn--outline { background: transparent; border-color: var(--sd-neutral-900); color: var(--sd-neutral-900); } .sd-btn--outline:hover { background: var(--sd-neutral-900); color: var(--sd-content-inverse); } .sd-btn--ghost { background: transparent; border-color: transparent; color: var(--sd-content-brand); } .sd-btn--ghost:hover { background: var(--sd-brand-50); } /* Disabled state must look inert and stop pointer interaction */ .sd-btn[disabled], .sd-btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } /* ============================================================ STICKY PANELS ------------------------------------------------------------ position:sticky only works when the element has room to move inside its scroll container. Inside a Bootstrap .row — which is display:flex with the default align-items:stretch — a column is stretched to the full height of the row, leaving zero travel, so sticky silently does nothing. align-self: flex-start is what actually makes it work. Height is left to the content on purpose: a fixed 100vh makes the panel taller than the space above the fold, which both breaks the pin and forces an inner scrollbar. ============================================================ */ .sd-sticky { position: sticky; top: var(--sd-sticky-top); align-self: flex-start; /* stop the flex row stretching it */ height: auto; /* content height, never 100vh */ overflow: visible; /* the panel itself must not scroll */ } /* Sticky is pointless on small screens, where the sidebar is stacked above or below the content rather than beside it. */ @media (max-width: 991.98px) { .sd-sticky { position: static; top: auto; } }