/** * YUMYODA APN PIN SHOP — Design System Tokens v2.0.0 * Flat, concrete token system: --ymyd-CLASS-LABEL * * @package APN_Pin_Shop * @author Vic Stizzi * @version 2.0.0 * @since 3.29.0 * * NAMING CONVENTION: --ymyd-{class}-{label} * All values are concrete — no var() references in :root. * Reference: copwatchdog/MERCURY/public/assets/css/pseudo.css */ /* ================================================= */ /* TABLE OF CONTENTS */ /* ================================================= */ /* 1. COLORS (--ymyd-c-*) */ /* 2. TYPOGRAPHY (--ymyd-font-*, fs, fsr, */ /* fw, lh, ls) */ /* 3. SPACING (--ymyd-s-*) */ /* 4. LAYOUT (--ymyd-l-*) */ /* 5. BORDERS (--ymyd-bw-*, radius-*) */ /* 6. SHADOWS (--ymyd-sh-*) */ /* 7. MOTION (--ymyd-dur-*, ease-*, */ /* t-*, hover-*) */ /* 8. SURFACES (--ymyd-sf-*) */ /* 9. TEXT (--ymyd-tx-*) */ /* 10. INTERACTIVE (--ymyd-ix-*) */ /* 11. FEEDBACK (--ymyd-fb-*) */ /* 12. PIN SHOP (--ymyd-ps-*) */ /* ================================================= */ :root { /* ================================================= */ /* 1. COLORS (--ymyd-c-*) */ /* ================================================= */ /* Brand */ --ymyd-c-navy: #021c41; --ymyd-c-charcoal: #171717; --ymyd-c-black: #000000; --ymyd-c-eggplant: #332042; --ymyd-c-darkgray: #252525; --ymyd-c-orange: #ff9100; /* Accent */ --ymyd-c-red: #e82c2d; --ymyd-c-orangered: #ff5513; --ymyd-c-mint: #15e781; --ymyd-c-coral: #ff6b6b; --ymyd-c-cyan: #4deeea; --ymyd-c-lime: #74ee15; --ymyd-c-pink: #ff38c4; --ymyd-c-yellow: #feca57; --ymyd-c-teal: #1dd1a1; --ymyd-c-blue: #54a0ff; /* Neutral */ --ymyd-c-peach: #ffb56b; --ymyd-c-slate: #79869b; --ymyd-c-skyblue: #c1e0ed; --ymyd-c-white: #ffffff; --ymyd-c-gray: #aeaeae; --ymyd-c-lightgray: #f1f1f2; --ymyd-c-medgray: #888888; --ymyd-c-dimgray: #444444; /* Semantic */ --ymyd-c-success: #15e781; --ymyd-c-warning: #ff9100; --ymyd-c-error: #e82c2d; --ymyd-c-danger: #ff0000; --ymyd-c-info: #332042; /* Extended Brand */ --ymyd-c-maroon: #1b0606; --ymyd-c-steelblue: #1c2f4d; --ymyd-c-deepblue: #012552; --ymyd-c-darkteal: #1d373a; /* Button */ --ymyd-c-btn-border: #ff6b6b; --ymyd-c-btn-bg: #3a2a2a; --ymyd-c-btn-default: #acb0bb; --ymyd-c-btn-hover: #ffb56b; /* Gradient (Rainbow Animation) */ --ymyd-c-grad-purple: #33235b; --ymyd-c-grad-red: #D62229; --ymyd-c-grad-orange: #E97639; --ymyd-c-grad-burgundy: #792042; /* Black Overlays */ --ymyd-c-o-10: rgba(0, 0, 0, 0.1); --ymyd-c-o-20: rgba(0, 0, 0, 0.2); --ymyd-c-o-30: rgba(0, 0, 0, 0.3); --ymyd-c-o-50: rgba(0, 0, 0, 0.5); --ymyd-c-o-80: rgba(0, 0, 0, 0.8); --ymyd-c-o-90: rgba(0, 0, 0, 0.9); /* White Overlays */ --ymyd-c-ow-10: rgba(255, 255, 255, 0.1); --ymyd-c-ow-20: rgba(255, 255, 255, 0.2); --ymyd-c-ow-50: rgba(255, 255, 255, 0.5); --ymyd-c-ow-70: rgba(255, 255, 255, 0.7); /* ================================================= */ /* 2. TYPOGRAPHY */ /* ================================================= */ /* Font Families (--ymyd-font-*) */ --ymyd-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ymyd-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --ymyd-font-mono: 'SF Mono', 'Monaco', 'Menlo', monospace; --ymyd-font-courier: 'Courier New', monospace; --ymyd-font-inherit: inherit; /* Font Sizes — Fixed (--ymyd-fs-*) */ --ymyd-fs-3xs: 10px; --ymyd-fs-2xs: 11px; --ymyd-fs-xs: 12px; --ymyd-fs-sm: 13px; --ymyd-fs-md: 14px; --ymyd-fs-lg: 16px; --ymyd-fs-xl: 18px; --ymyd-fs-2xl: 20px; --ymyd-fs-3xl: 24px; --ymyd-fs-4xl: 28px; --ymyd-fs-5xl: 32px; --ymyd-fs-6xl: 42px; /* Font Sizes — Responsive (--ymyd-fsr-*) Fluid 320px-1200px */ --ymyd-fsr-xs: clamp(12px, calc(12px + 2 * ((100vw - 320px) / 880)), 14px); --ymyd-fsr-sm: clamp(13px, calc(13px + 3 * ((100vw - 320px) / 880)), 16px); --ymyd-fsr-md: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 880)), 18px); --ymyd-fsr-lg: clamp(16px, calc(16px + 4 * ((100vw - 320px) / 880)), 20px); --ymyd-fsr-xl: clamp(18px, calc(18px + 6 * ((100vw - 320px) / 880)), 24px); --ymyd-fsr-2xl: clamp(20px, calc(20px + 8 * ((100vw - 320px) / 880)), 28px); --ymyd-fsr-h1: clamp(18px, calc(18px + 10 * ((100vw - 320px) / 880)), 28px); /* Font Weights (--ymyd-fw-*) */ --ymyd-fw-light: 300; --ymyd-fw-regular: 400; --ymyd-fw-medium: 500; --ymyd-fw-semibold: 600; --ymyd-fw-bold: 700; /* Line Heights (--ymyd-lh-*) */ --ymyd-lh-tight: 1.2; --ymyd-lh-regular: 1.5; --ymyd-lh-relaxed: 1.75; /* Letter Spacing (--ymyd-ls-*) */ --ymyd-ls-tight: -0.025em; --ymyd-ls-regular: 0; --ymyd-ls-wide: 0.05em; --ymyd-ls-wider: 0.1em; --ymyd-ls-half: 0.5px; --ymyd-ls-1: 1px; /* ================================================= */ /* 3. SPACING (8pt Grid) */ /* ================================================= */ --ymyd-s-0: 0; --ymyd-s-px: 1px; --ymyd-s-0-5: 2px; --ymyd-s-1: 4px; --ymyd-s-1-5: 6px; --ymyd-s-2: 8px; --ymyd-s-2-5: 10px; --ymyd-s-3: 12px; --ymyd-s-4: 16px; --ymyd-s-5: 20px; --ymyd-s-6: 24px; --ymyd-s-8: 32px; --ymyd-s-10: 40px; --ymyd-s-12: 48px; --ymyd-s-16: 64px; --ymyd-s-20: 80px; --ymyd-s-24: 96px; /* ================================================= */ /* 4. LAYOUT */ /* ================================================= */ /* Content Widths */ --ymyd-l-w-rd: 45rem; --ymyd-l-w-ct: 62.5rem; --ymyd-l-w-wd: 75rem; --ymyd-l-w-fl: 90%; --ymyd-l-w-100: 100%; --ymyd-l-w-45vw: 45vw; /* Pin Card Width — Responsive */ --ymyd-l-card-w: clamp(200px, calc(200px + 50 * ((100vw - 320px) / 880)), 250px); /* Grid Gap — Responsive */ --ymyd-l-grid-gap: clamp(12px, calc(12px + 8 * ((100vw - 320px) / 880)), 20px); /* ================================================= */ /* 5. BORDERS */ /* ================================================= */ /* Widths (--ymyd-bw-*) */ --ymyd-bw-1: 1px; --ymyd-bw-2: 2px; --ymyd-bw-4: 4px; /* Radius (--ymyd-radius-*) */ --ymyd-radius-none: 0; --ymyd-radius-sm: 3px; --ymyd-radius-md: 4px; --ymyd-radius-lg: 8px; --ymyd-radius-xl: 12px; --ymyd-radius-2xl: 16px; --ymyd-radius-3xl: 20px; --ymyd-radius-full: 9999px; /* Border Style */ --ymyd-b-solid: solid; /* ================================================= */ /* 6. SHADOWS */ /* ================================================= */ --ymyd-sh-none: none; --ymyd-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --ymyd-sh-md: 0 4px 12px rgba(0, 0, 0, 0.2); --ymyd-sh-lg: 0 12px 24px rgba(0, 0, 0, 0.2); --ymyd-sh-xl: 0 20px 40px rgba(0, 0, 0, 0.3); /* Glow Effects */ --ymyd-sh-glow-cyan: 0 0 16px rgba(77, 238, 234, 0.3); --ymyd-sh-glow-coral: 0 0 20px rgba(255, 107, 107, 0.4), 0 0 40px rgba(255, 107, 107, 0.2); --ymyd-sh-glow-lime: 0 0 12px rgba(116, 238, 21, 0.4); --ymyd-sh-glow-yellow: 0 0 8px rgba(254, 202, 87, 0.3); /* Hover Shadow */ --ymyd-sh-hover: 0 12px 24px rgba(77, 238, 234, 0.25), 0 0 16px rgba(255, 107, 107, 0.15); /* ================================================= */ /* 7. MOTION */ /* ================================================= */ /* Duration (--ymyd-dur-*) */ --ymyd-dur-0: 0ms; --ymyd-dur-fast: 150ms; --ymyd-dur-normal: 300ms; --ymyd-dur-slow: 500ms; --ymyd-dur-slower: 700ms; /* Easing (--ymyd-ease-*) */ --ymyd-ease-linear: linear; --ymyd-ease-default: ease; --ymyd-ease-in: ease-in; --ymyd-ease-out: ease-out; --ymyd-ease-io: ease-in-out; --ymyd-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Transition Presets (--ymyd-t-*) */ --ymyd-t-fast: all 150ms ease; --ymyd-t-normal: all 300ms ease; --ymyd-t-slow: all 500ms ease; /* Transform Values */ --ymyd-hover-scale: 1.05; --ymyd-hover-lift: -4px; /* ================================================= */ /* 8. SURFACES (--ymyd-sf-*) */ /* ================================================= */ --ymyd-sf-bg: #000000; --ymyd-sf-card: #252525; --ymyd-sf-card-hover: #171717; --ymyd-sf-overlay: rgba(0, 0, 0, 0.8); --ymyd-sf-blur: 12px; /* ================================================= */ /* 9. TEXT (--ymyd-tx-*) */ /* ================================================= */ --ymyd-tx-primary: #ffffff; --ymyd-tx-secondary: #aeaeae; --ymyd-tx-muted: rgba(255, 255, 255, 0.7); --ymyd-tx-accent: #4deeea; --ymyd-tx-link: #ff6b6b; --ymyd-tx-link-hover: #ffb56b; /* ================================================= */ /* 10. INTERACTIVE (--ymyd-ix-*) */ /* ================================================= */ --ymyd-ix-focus-ring: #ff6b6b; --ymyd-ix-hover-bg: rgba(255, 255, 255, 0.1); --ymyd-ix-active-bg: rgba(255, 255, 255, 0.2); --ymyd-ix-disabled: 0.5; /* ================================================= */ /* 11. FEEDBACK (--ymyd-fb-*) */ /* ================================================= */ --ymyd-fb-success: #74ee15; --ymyd-fb-warning: #feca57; --ymyd-fb-error: #e82c2d; --ymyd-fb-info: #4deeea; /* ================================================= */ /* 12. PIN SHOP (--ymyd-ps-*) */ /* ================================================= */ /* 12.1 Grid */ --ymyd-ps-grid-gap: clamp(12px, calc(12px + 8 * ((100vw - 320px) / 880)), 20px); --ymyd-ps-grid-cols: repeat(auto-fill, clamp(200px, calc(200px + 50 * ((100vw - 320px) / 880)), 250px)); /* 12.2 Card */ --ymyd-ps-card-w: clamp(200px, calc(200px + 50 * ((100vw - 320px) / 880)), 250px); --ymyd-ps-card-bg: linear-gradient(-180deg, #222222 0%, #181818 100%); --ymyd-ps-card-border: #171717; --ymyd-ps-card-border-w:1px; --ymyd-ps-card-radius: 12px; --ymyd-ps-card-padding: 8px; --ymyd-ps-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Card Hover */ --ymyd-ps-card-hover-border: #ff5513; --ymyd-ps-card-hover-shadow: 0 12px 24px rgba(77, 238, 234, 0.25), 0 0 16px rgba(255, 107, 107, 0.15); --ymyd-ps-card-hover-scale: 1.05; --ymyd-ps-card-hover-lift: -4px; /* Card Selected */ --ymyd-ps-card-selected-border: #332042; --ymyd-ps-card-selected-shadow: 0 0 20px rgba(255, 107, 107, 0.4), 0 0 40px rgba(255, 107, 107, 0.2); /* Card Typography */ --ymyd-ps-card-title-size: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 880)), 18px); --ymyd-ps-card-title-weight: 600; --ymyd-ps-card-title-color: #ffffff; --ymyd-ps-card-price-size: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 880)), 18px); --ymyd-ps-card-price-weight: 700; --ymyd-ps-card-price-color: #ffffff; /* Card Checkbox */ --ymyd-ps-checkbox-size: 36px; --ymyd-ps-checkbox-border: 2px solid rgba(255, 255, 255, 0.5); --ymyd-ps-checkbox-radius: 9999px; --ymyd-ps-checkbox-bg: rgba(0, 0, 0, 0.3); --ymyd-ps-checkbox-checked-bg: #ff6b6b; --ymyd-ps-checkbox-check-size: 42px; /* 12.3 Float Menu */ --ymyd-ps-float-bg: rgba(21, 21, 21, 0.9); --ymyd-ps-float-blur: 12px; --ymyd-ps-float-border: 2px solid #f1f1f2; --ymyd-ps-float-padding: 12px 20px; --ymyd-ps-float-gap: 12px; --ymyd-ps-float-z: 9999; /* Float Menu Labels */ --ymyd-ps-float-h1-size: clamp(9px, calc(9px + 3 * ((100vw - 320px) / 880)), 12px); --ymyd-ps-float-label-size: clamp(16px, calc(16px + 4 * ((100vw - 320px) / 880)), 20px); --ymyd-ps-float-value-size: clamp(18px, calc(18px + 4 * ((100vw - 320px) / 880)), 22px); --ymyd-ps-float-label-color: #ffffff; --ymyd-ps-float-count-color: #4deeea; --ymyd-ps-float-amount-color: #ffffff; --ymyd-ps-float-font: 'Courier New', monospace; --ymyd-ps-float-divider: 1px dashed #1d373a; /* Float Menu Buttons */ --ymyd-ps-float-btn-size: clamp(11px, calc(11px + 3 * ((100vw - 320px) / 880)), 14px); --ymyd-ps-float-btn-bg: #acb0bb; --ymyd-ps-float-btn-color: #000000; --ymyd-ps-float-btn-hover-bg: #ffb56b; --ymyd-ps-float-btn-radius: 5px; --ymyd-ps-float-btn-padding: 0.75rem 1.5rem; --ymyd-ps-float-btn-success-bg: #74ee15; /* Shipping Estimate */ --ymyd-ps-float-ship-color: #feca57; --ymyd-ps-float-ship-free: #74ee15; /* 12.4 Search */ --ymyd-ps-search-w: 90%; --ymyd-ps-search-padding: 20px 0; --ymyd-ps-search-gap: 12px; --ymyd-ps-search-mb: 20px; /* Search Inputs */ --ymyd-ps-input-bg: transparent; --ymyd-ps-input-border: 1px solid #444444; --ymyd-ps-input-radius: 4px; --ymyd-ps-input-padding: 8px; --ymyd-ps-input-focus-border: #ff6b6b; --ymyd-ps-input-focus-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); /* 12.5 Badges */ --ymyd-ps-badge-disc-bg: #ff0000; --ymyd-ps-badge-disc-color: #ffffff; --ymyd-ps-badge-disc-size: 10px; --ymyd-ps-badge-disc-weight: 700; --ymyd-ps-badge-disc-padding: 4px 12px; --ymyd-ps-badge-disc-radius: 3px; --ymyd-ps-badge-disc-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Discontinued State */ --ymyd-ps-disc-opacity: 0.5; --ymyd-ps-disc-blur: 8px; --ymyd-ps-disc-border: #ff0000; /* 12.6 Toggle */ --ymyd-ps-toggle-bg: #252525; --ymyd-ps-toggle-border: 1px solid #444444; --ymyd-ps-toggle-radius: 20px; --ymyd-ps-toggle-padding: 6px 12px; --ymyd-ps-toggle-gap: 8px; --ymyd-ps-toggle-size: 13px; --ymyd-ps-toggle-color: rgba(255, 255, 255, 0.7); /* Toggle Knob */ --ymyd-ps-toggle-knob-w: 36px; --ymyd-ps-toggle-knob-h: 20px; --ymyd-ps-toggle-knob-bg: #444444; --ymyd-ps-toggle-knob-radius: 8px; /* Toggle Knob Circle */ --ymyd-ps-toggle-circle-size: 16px; --ymyd-ps-toggle-circle-bg: #888888; /* Toggle ON State */ --ymyd-ps-toggle-on-border: #ff6b6b; --ymyd-ps-toggle-on-bg: #3a2a2a; --ymyd-ps-toggle-on-knob: #ff6b6b; --ymyd-ps-toggle-on-circle: #ffffff; --ymyd-ps-toggle-on-color: #ffffff; /* 12.7 Heading */ --ymyd-ps-heading-size: 18px; --ymyd-ps-heading-weight: 600; --ymyd-ps-heading-spacing: 0.5px; --ymyd-ps-heading-mb: 12px; --ymyd-ps-heading-gap: 12px; /* 12.8 Animations */ --ymyd-ps-anim-float-duration: 400ms; --ymyd-ps-anim-float-easing: ease; --ymyd-ps-anim-enter-duration: 500ms; --ymyd-ps-anim-enter-easing: ease; --ymyd-ps-anim-enter-offset: 12px; --ymyd-ps-anim-rainbow-duration:7s; --ymyd-ps-anim-pulse-duration: 300ms; /* 12.9 Admin Overridable */ --ymyd-ps-admin-heading-size: 28px; --ymyd-ps-admin-body-size: 16px; /* 12.10 Size Circle */ --ymyd-c-technogreen: #2a9d8f; --ymyd-ps-circle-border-color: #2a9d8f; --ymyd-ps-circle-border-width: 2px; --ymyd-ps-circle-border-style: dotted; --ymyd-ps-circle-bg: rgba(42, 157, 143, 0.08); --ymyd-ps-circle-text-color: rgba(42, 157, 143, 0.7); --ymyd-ps-circle-text-size: clamp(10px, calc(10px + 2 * ((100vw - 320px) / 880)), 12px); --ymyd-ps-circle-text-bottom: 50px; }