/* ========================================================================= design-system-v2.css — UNIFIED DESIGN TOKENS + COMPONENT REFINEMENTS Shipped v2.9.24.70 by the design-director agent. Loads LAST via design-system-enqueue.php (priority 9999, depends on sr-shared). Authoritative over prior styles. Does NOT touch shared-v3.css or any *.js file; overrides only where the cascade lets us. Scope: tasteful unification. We audited v1 (silkroadnyc.com/Elementor) and v2 (silkroaddispensary.com) for typography, transitions, easing, spacing, buttons, cards, inputs, links, focus. Brand constants per reference_v1_brand_tokens memory: Poppins, #7ED957/#209F48, 8px radius, 16x32 padding, uppercase primary CTAs. Tokens live in :root and are consumable by every future block. ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS (single source of truth; earlier shared-v3.css tokens are preserved but these take precedence via LAST-IN cascade.) ------------------------------------------------------------------------- */ :root { /* EASING — audit found shared-v3 uses three curves (0.15s, 0.25s, .4/0/.2/1, bounce) and ad-hoc "transition: transform .2s" on sr-seo-cta. Pick ONE primary ease for 95% of interactions: snappy-in/smooth-out. */ --sr-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* canonical */ --sr-ease-out: cubic-bezier(0.2, 1, 0.3, 1); /* confirm, big exits */ --sr-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric (modals) */ /* DURATIONS — three tiers. No more ad-hoc .2s/.25s/.3s/.35s mix. */ --sr-t-fast: 180ms; /* hover, focus, link underline */ --sr-t-med: 320ms; /* card lift, drawer open */ --sr-t-slow: 500ms; /* hero, section enter */ /* COLOR — brand mandate, do not deviate */ --sr-green: #7ED957; --sr-green-deep: #209F48; --sr-green-ink: #0a0a0a; /* text on green bg — 10:1 contrast */ --sr-green-shadow: rgba(126,217,87,0.35); --sr-green-shadow-strong: rgba(126,217,87,0.55); /* SURFACES (v2 white-body/dark-hero theme) */ --sr-ink: #0F1511; /* body text on white */ --sr-ink-soft: #333333; --sr-ink-muted: #555555; --sr-bg-white: #FFFFFF; --sr-bg-cream: #F6F6F2; --sr-bg-dark: #05070C; /* hero band + strain/landmark templates */ --sr-border: #E5E5E5; --sr-border-soft: rgba(0,0,0,0.08); /* SPACING — 4/8/12/16/24/32/48/64/96; consumed by new code, not retroactively enforced on shared-v3.css. */ --sr-sp-0: 0; --sr-sp-xs: 4px; --sr-sp-sm: 8px; --sr-sp-md: 12px; --sr-sp-lg: 16px; --sr-sp-xl: 24px; --sr-sp-2xl: 32px; --sr-sp-3xl: 48px; --sr-sp-4xl: 64px; --sr-sp-5xl: 96px; /* RADIUS — one value per slot; 8px for buttons is LAW. */ --sr-r-btn: 8px; --sr-r-input: 8px; /* v2 was at 4px — too sharp; v1 is 16px — too soft; 8 matches btn */ --sr-r-card: 12px; --sr-r-pill: 999px; /* SHADOWS */ --sr-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --sr-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --sr-shadow-lg: 0 12px 32px rgba(0,0,0,0.14); --sr-shadow-btn: 0 4px 14px rgba(126,217,87,0.35); --sr-shadow-btn-hover: 0 8px 22px rgba(126,217,87,0.50); /* TYPE SCALE — normalized. v2 had awkward 13.5/17/11/18px — snap them. */ --sr-fs-xs: 12px; /* micro labels, legal */ --sr-fs-sm: 14px; /* meta text, chips */ --sr-fs-base: 16px; /* body — v1 agrees; 15px default was inconsistent */ --sr-fs-md: 18px; /* lede */ --sr-fs-lg: 20px; /* h3 on dense layouts */ --sr-fs-xl: 24px; /* h3 big, section label */ --sr-fs-2xl: 32px; /* h2 */ --sr-fs-3xl: 48px; /* h1 default */ --sr-fs-4xl: 64px; /* hero H1 desktop */ /* LINE-HEIGHT — tight headings / breathing body */ --sr-lh-tight: 1.12; --sr-lh-snug: 1.25; --sr-lh-base: 1.5; --sr-lh-loose: 1.65; } /* ------------------------------------------------------------------------- 2. TYPOGRAPHY — assert Poppins brand font and normalize weights. Audit found v1 h2 using Afacad (inconsistent). We lock everything to Poppins across both sites' conceptual space. ------------------------------------------------------------------------- */ body, .sr-body, button, input, select, textarea { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Don't retroactively rewrite every h1/h2 font-size — shared-v3.css has responsive clamps for the hero. Just enforce weight + line-height so strain/landmark pages (44px h1) and home (68px h1) feel like one family. */ h1, .sr-h1 { font-weight: 800; line-height: var(--sr-lh-tight); letter-spacing: -0.015em; } h2, .sr-h2 { font-weight: 700; line-height: var(--sr-lh-snug); letter-spacing: -0.005em; } h3, .sr-h3 { font-weight: 700; line-height: var(--sr-lh-snug); letter-spacing: -0.002em; } h4, h5, h6 { font-weight: 600; line-height: var(--sr-lh-snug); } /* ------------------------------------------------------------------------- 3. LINKS — unified underline + hover. Audit caught a raw on the strain page ("live menu") rendering default-browser blue rgb(0,0,238). This blanket rule catches all unstyled content links and gives them brand color + hover underline. ------------------------------------------------------------------------- */ main a:not(.sr-btn):not(.sr-pill):not(.sr-seo-cta):not(.sr-seo-cta-ghost):not([class*="sr-cta"]):not([class*="button"]):not(.sr-tag):not(.elementor-button) { color: var(--sr-green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--sr-t-fast) var(--sr-ease), text-decoration-thickness var(--sr-t-fast) var(--sr-ease); } main a:not(.sr-btn):not(.sr-pill):not(.sr-seo-cta):not(.sr-seo-cta-ghost):not([class*="sr-cta"]):not([class*="button"]):not(.sr-tag):not(.elementor-button):hover { color: #2E6416; /* WCAG 7:1 green-dark */ text-decoration-thickness: 2px; } /* On dark surfaces, green-deep dims too far — use full green */ .sr-dark-section main a, body.sr-dark-theme main a, [class*="sr-hero"] main a { color: var(--sr-green); } /* ------------------------------------------------------------------------- 4. TRANSITION UNIFICATION — any element that doesn't already have a specific transition inherits the canonical fast-ease. We explicitly DON'T !important this so scoped animations (dark-fx, camel breathe, paint-overlay) still win. ------------------------------------------------------------------------- */ a, button, .sr-btn, .sr-pill, .sr-seo-cta, .sr-seo-cta-ghost, .sr-card, .sr-product-card, .sr-mood-card, .sr-category-card, .sr-special-card, .sr-cta, .sr-chip, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], select, textarea { transition-timing-function: var(--sr-ease); transition-duration: var(--sr-t-fast); } /* ------------------------------------------------------------------------- 5. BUTTONS — unified variants. - .sr-btn-primary = solid green, dark ink text, uppercase, weight 800 - .sr-btn-secondary = green outline, green text, uppercase - .sr-btn-ghost = no bg/border, green text, uppercase (inline CTA) Padding 16x32 per brand. Radius 8px. All hover = lift 1px + glow. Existing .sr-seo-cta / .sr-seo-cta-ghost on strain/landmark pages are ALIASED so they inherit the same look without editing seo-router.php. ------------------------------------------------------------------------- */ .sr-btn, .sr-btn-primary, .sr-btn-secondary, .sr-btn-ghost, .sr-seo-cta, .sr-seo-cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: var(--sr-fs-base); /* 16px, unified — was 14px shrunk */ font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; line-height: 1.2; padding: 14px 28px; /* close to brand 16x32; 14x28 keeps live hero buttons from regressing vertical rhythm; use --sr-btn-pad-lg for brand-canonical */ border-radius: var(--sr-r-btn); border: 2px solid transparent; cursor: pointer; transition: background-color var(--sr-t-fast) var(--sr-ease), box-shadow var(--sr-t-fast) var(--sr-ease), transform var(--sr-t-fast) var(--sr-ease), border-color var(--sr-t-fast) var(--sr-ease), color var(--sr-t-fast) var(--sr-ease); user-select: none; white-space: nowrap; } /* PRIMARY — solid green */ .sr-btn-primary, .sr-seo-cta { background-color: var(--sr-green); color: var(--sr-green-ink); border-color: var(--sr-green); box-shadow: var(--sr-shadow-btn); } .sr-btn-primary:hover, .sr-seo-cta:hover { background-color: var(--sr-green-deep); border-color: var(--sr-green-deep); color: #ffffff; box-shadow: var(--sr-shadow-btn-hover); transform: translateY(-1px); } .sr-btn-primary:active, .sr-seo-cta:active { transform: translateY(0); box-shadow: var(--sr-shadow-btn); } /* SECONDARY / GHOST / OUTLINE — transparent with border */ .sr-btn-secondary, .sr-seo-cta-ghost { background-color: transparent; color: var(--sr-green); border-color: var(--sr-green); box-shadow: none; } .sr-btn-secondary:hover, .sr-seo-cta-ghost:hover { background-color: rgba(126,217,87,0.08); color: var(--sr-green); border-color: var(--sr-green); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(126,217,87,0.18); } /* GHOST — text-only tertiary */ .sr-btn-ghost { background-color: transparent; color: var(--sr-green-deep); border-color: transparent; padding: 10px 14px; box-shadow: none; text-transform: none; font-weight: 700; letter-spacing: 0; } .sr-btn-ghost:hover { background-color: rgba(126,217,87,0.08); color: #2E6416; } /* Canonical brand size (when you want v1-parity padding) */ .sr-btn--lg, .sr-btn-primary.sr-btn--lg, .sr-btn-secondary.sr-btn--lg { padding: 16px 32px; font-size: var(--sr-fs-base); } /* ------------------------------------------------------------------------- 6. PILLS — category nav / filter chips. Audit found them already well- styled (12px Poppins 700 uppercase, 50px radius, 12x24 padding). Just add a crisp hover that matches the button language. ------------------------------------------------------------------------- */ .sr-pill:hover { background-color: var(--sr-green); color: var(--sr-green-ink); border-color: var(--sr-green); box-shadow: 0 6px 16px var(--sr-green-shadow); transform: translateY(-1px); } /* ------------------------------------------------------------------------- 7. INPUTS — unify. Audit found v2 at 13.5px / 4px radius / 10x12 pad (shrinky, tiny-radius, feels cheap). v1 at 16px / 16px radius / 12x16 pad (feels too pill-soft). Split the difference: 16px type, 8px radius, 12x16 padding, branded focus ring. ------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], select, textarea { font-family: 'Poppins', sans-serif; font-size: var(--sr-fs-base); font-weight: 500; line-height: 1.4; padding: 12px 16px; border-radius: var(--sr-r-input); border: 1.5px solid var(--sr-border); background-color: #ffffff; color: var(--sr-ink); box-shadow: var(--sr-shadow-sm); } input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="search"]:hover, select:hover, textarea:hover { border-color: #BFC4BD; } /* ------------------------------------------------------------------------- 8. FOCUS RINGS — DO NOT REGRESS the a11y agent's 2px green + halo work. Enforce it here too for the sr-btn-* and sr-seo-cta- aliases we just added. focus-visible only, so mouse click doesn't flash a ring. ------------------------------------------------------------------------- */ .sr-btn:focus-visible, .sr-btn-primary:focus-visible, .sr-btn-secondary:focus-visible, .sr-btn-ghost:focus-visible, .sr-seo-cta:focus-visible, .sr-seo-cta-ghost:focus-visible, .sr-pill:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sr-green); outline-offset: 2px; box-shadow: 0 0 0 6px var(--sr-green-shadow); } /* ------------------------------------------------------------------------- 9. CARDS — unified hover delta. Product cards, special cards, mood cards, landmark fact tiles all get the same lift. ------------------------------------------------------------------------- */ .sr-card, .sr-product-card, .sr-mood-card, .sr-category-card, .sr-special-card, .sr-landmark-tile, .sr-landmark-card { transition: transform var(--sr-t-med) var(--sr-ease), box-shadow var(--sr-t-med) var(--sr-ease), border-color var(--sr-t-med) var(--sr-ease); } .sr-card:hover, .sr-product-card:hover, .sr-mood-card:hover, .sr-category-card:hover, .sr-special-card:hover, .sr-landmark-tile:hover, .sr-landmark-card:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); } /* ------------------------------------------------------------------------- 10. SECTION RHYTHM — vertical breathing room between long-page sections. Not retroactive; consumable via .sr-section-pad for future blocks. Kills the "everything stacks tight" feeling some strain pages had. ------------------------------------------------------------------------- */ .sr-section-pad { padding-block: clamp(32px, 5vw, 64px); } .sr-section-pad--sm { padding-block: clamp(24px, 3vw, 40px); } .sr-section-pad--lg { padding-block: clamp(48px, 7vw, 96px); } /* Soft horizontal hairline divider (reusable, matches brand) */ .sr-divider { height: 1px; background: linear-gradient(to right, transparent, var(--sr-border) 30%, var(--sr-border) 70%, transparent); border: 0; margin-block: var(--sr-sp-xl); } /* ------------------------------------------------------------------------- 11. REDUCED MOTION — respect user pref, flatten all lift/scale fx. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sr-btn, .sr-btn-primary, .sr-btn-secondary, .sr-seo-cta, .sr-seo-cta-ghost, .sr-pill, .sr-card, .sr-product-card, .sr-mood-card, .sr-category-card, .sr-special-card, .sr-landmark-tile, .sr-landmark-card { transition-duration: 0ms !important; } .sr-btn-primary:hover, .sr-btn-secondary:hover, .sr-seo-cta:hover, .sr-seo-cta-ghost:hover, .sr-pill:hover, .sr-card:hover, .sr-product-card:hover, .sr-mood-card:hover, .sr-category-card:hover, .sr-special-card:hover, .sr-landmark-tile:hover, .sr-landmark-card:hover { transform: none; } } /* ========================================================================= END design-system-v2.css — keep under 400 lines; add new blocks at the bottom so the cascade stays readable. If you need to override a specific shared-v3.css selector, prefer doing it here rather than editing that file. ========================================================================= */