/* Pocket Cologne / Pocket Perfume — Design System * * Single source of truth for tokens (color, type, spacing, radii), the button * system, tags/badges, and section typography. Pages opt in by linking this * file in : * * * * Component classes are namespaced with .pc-* so they don't collide with * page-level styles. Existing class names (.btn-primary, .product-card, etc.) * still work — this layer is additive. Migrate existing classes to .pc-* * over time as you touch each page. */ :root { /* ── Brand colors ─────────────────────────────────────────── */ --pc-gold: #c9a050; /* THE accent */ --pc-gold-hover: #d4a854; /* hover state only */ /* Compat aliases for older inline page styles that still reference the bright/dim variants. Resolve to the canonical gold so anything outside this file lands on a single accent without breaking layouts. */ --pc-gold-light: #d4a854; --pc-gold-bright: #c9a050; --pc-gold-dim: #c9a050; /* ── Surface colors ──────────────────────────────────────── */ --pc-bg-deep: #110c07; --pc-bg-dark: #1a140d; --pc-bg-dark-2: #2a1f12; --pc-bg-white: #ffffff; --pc-bg-cream: #faf5eb; --pc-bg-soft: #f9f4ea; --pc-bg-elevated: #f5f0e6; --pc-bg-card: #ffffff; /* ── Text ────────────────────────────────────────────────── */ --pc-text-primary: #1a1a1a; --pc-text-secondary: #6b6560; --pc-text-dim: #a09890; --pc-text-light: #f2ece0; --pc-text-light-muted: rgba(244,235,224,0.7); /* ── States ──────────────────────────────────────────────── */ --pc-success: #1bb579; --pc-success-dark: #0f7a51; --pc-error: #d6584b; --pc-warning: #e8a14a; /* ── Borders ─────────────────────────────────────────────── */ --pc-border: rgba(0,0,0,0.08); --pc-border-light: rgba(0,0,0,0.04); --pc-border-gold: rgba(201,160,80,0.32); /* ── Fonts ───────────────────────────────────────────────── */ --pc-font-display: 'Playfair Display', Georgia, serif; --pc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pc-font-condensed: 'Barlow Condensed', sans-serif; /* ── Spacing scale ──────────────────────────────────────── */ --pc-space-xs: 4px; --pc-space-sm: 8px; --pc-space-md: 16px; --pc-space-lg: 24px; --pc-space-xl: 40px; --pc-space-2xl: 64px; --pc-space-3xl: 96px; /* ── Radii ──────────────────────────────────────────────── */ --pc-radius-sm: 8px; --pc-radius-md: 14px; --pc-radius-lg: 22px; --pc-radius-xl: 32px; --pc-radius-pill: 999px; /* ── Shadows ────────────────────────────────────────────── */ --pc-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --pc-shadow-md: 0 8px 24px rgba(0,0,0,0.08); --pc-shadow-lg: 0 20px 48px rgba(20,18,15,0.12); /* ── Motion ─────────────────────────────────────────────── */ --pc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --pc-transition-fast: 0.15s var(--pc-ease-out); --pc-transition: 0.3s var(--pc-ease-out); /* ── Type scale (Phase 1: 6-step discipline) ─────────────── Premium D2C scale. Only 6 sizes. Hero/h1/h2/h3 use clamp so they breathe across mobile→desktop. Body floor is 16px. Anything outside this scale is a bug. */ --pc-fs-hero: clamp(2.6rem, 7vw, 4.75rem); /* 42px → 76px display headline */ --pc-fs-h1: clamp(2rem, 5vw, 3.4rem); /* 32px → 54px section headline */ --pc-fs-h2: clamp(1.5rem, 3.6vw, 2.4rem); /* 24px → 38px sub-section */ --pc-fs-h3: clamp(1.15rem, 2vw, 1.5rem); /* 18px → 24px section sub copy */ --pc-fs-body: 1rem; /* 16px body floor */ --pc-fs-small: 0.875rem; /* 14px disclaimers / fine print */ --pc-fs-micro: 0.75rem; /* 12px — eyebrow ONLY */ /* Letter-spacing rule: tighten for headlines, widen for labels, normal elsewhere */ --pc-tracking-tight: -0.02em; --pc-tracking-label: 0.18em; /* Line-height */ --pc-lh-display: 1.05; --pc-lh-tight: 1.15; --pc-lh-body: 1.65; } /* ============================================================ BUTTONS — .pc-btn + variants Canonical button system for the entire site. One class for the base look, modifiers for color/size/width. ============================================================ */ .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--pc-font-body); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 32px; min-height: 52px; border-radius: var(--pc-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--pc-transition-fast), color var(--pc-transition-fast), transform var(--pc-transition-fast), border-color var(--pc-transition-fast), box-shadow var(--pc-transition-fast); text-decoration: none; white-space: nowrap; line-height: 1; position: relative; overflow: hidden; } .pc-btn:hover:not(:disabled) { transform: translateY(-1px); } .pc-btn:disabled { background: #bcb3a8 !important; color: #fff !important; cursor: not-allowed; transform: none !important; border-color: transparent !important; } .pc-btn--primary { background: var(--pc-text-primary); color: #fff; } .pc-btn--primary:hover:not(:disabled) { background: var(--pc-gold); color: var(--pc-bg-dark); } .pc-btn--gold { background: var(--pc-gold); color: var(--pc-bg-dark); border-color: var(--pc-gold); } .pc-btn--gold:hover:not(:disabled) { background: var(--pc-gold-light); border-color: var(--pc-gold-light); } .pc-btn--secondary { background: var(--pc-bg-white); color: var(--pc-text-primary); border-color: var(--pc-border); } .pc-btn--secondary:hover:not(:disabled) { border-color: var(--pc-gold); color: var(--pc-gold); } .pc-btn--outline-gold { background: transparent; color: var(--pc-gold); border-color: var(--pc-gold); } .pc-btn--outline-gold:hover:not(:disabled) { background: var(--pc-gold); color: var(--pc-bg-dark); } .pc-btn--ghost { background: transparent; color: var(--pc-text-secondary); border-color: transparent; } .pc-btn--ghost:hover:not(:disabled) { color: var(--pc-gold); } .pc-btn--success { background: var(--pc-success); color: #fff; } .pc-btn--sm { font-size: 0.8125rem; padding: 12px 22px; min-height: 42px; letter-spacing: 0.05em; } .pc-btn--lg { font-size: 1rem; padding: 20px 40px; min-height: 60px; letter-spacing: 0.06em; } .pc-btn--full { width: 100%; } /* ============================================================ TAGS / BADGES — .pc-tag + variants Universal pill style used for product badges, status flags, announcement-bar chips, etc. ============================================================ */ .pc-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pc-font-condensed); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--pc-radius-pill); background: rgba(255,255,255,0.92); color: var(--pc-text-primary); border: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); line-height: 1; white-space: nowrap; } .pc-tag--gold { background: var(--pc-gold); color: var(--pc-bg-dark); border-color: var(--pc-gold); } .pc-tag--dark { background: rgba(0,0,0,0.55); color: #fff; border-color: transparent; backdrop-filter: blur(6px); } .pc-tag--success { background: rgba(27,181,121,0.10); color: var(--pc-success-dark); border: 1px solid rgba(27,181,121,0.25); } .pc-tag--lg { font-size: 0.78rem; padding: 8px 16px; } .pc-tag--sm { font-size: 0.55rem; padding: 4px 8px; letter-spacing: 0.12em; } /* ============================================================ SECTION TYPOGRAPHY — eyebrow / title / sub triplet Use anywhere you would have hand-rolled a section header. ============================================================ */ .pc-eyebrow { font-family: var(--pc-font-condensed); font-size: var(--pc-fs-micro); font-weight: 700; letter-spacing: var(--pc-tracking-label); text-transform: uppercase; color: var(--pc-gold); opacity: 0.78; display: inline-block; } .pc-hero-title { font-family: var(--pc-font-display); font-size: var(--pc-fs-hero); font-weight: 700; line-height: var(--pc-lh-display); letter-spacing: var(--pc-tracking-tight); color: var(--pc-text-primary); margin: 0 0 18px; } .pc-hero-title em { font-style: italic; color: var(--pc-gold); font-weight: 700; } .pc-section-title { font-family: var(--pc-font-display); font-size: var(--pc-fs-h1); font-weight: 700; line-height: var(--pc-lh-tight); letter-spacing: var(--pc-tracking-tight); color: var(--pc-text-primary); margin: 12px 0 16px; } .pc-section-title em { font-style: italic; color: var(--pc-gold); font-weight: 700; } .pc-section-sub { font-family: var(--pc-font-body); font-size: var(--pc-fs-h3); color: var(--pc-text-secondary); line-height: var(--pc-lh-body); margin: 0; } .pc-body { font-family: var(--pc-font-body); font-size: var(--pc-fs-body); line-height: var(--pc-lh-body); color: var(--pc-text-secondary); } .pc-small { font-size: var(--pc-fs-small); color: var(--pc-text-dim); } /* ============================================================ SECTION LAYOUT — .pc-section utility for consistent vertical rhythm ============================================================ */ .pc-section { padding: clamp(56px, 8vw, 120px) 0; } .pc-section--tight { padding: clamp(40px, 6vw, 80px) 0; } .pc-section--hero { padding: 0; min-height: clamp(560px, 80vh, 880px); position: relative; } /* ============================================================ FORM CONTROLS — single base for inputs + selects ============================================================ */ .pc-input { display: block; width: 100%; font-family: var(--pc-font-body); font-size: 0.95rem; color: var(--pc-text-primary); background: var(--pc-bg-cream); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-sm); padding: 12px 16px; outline: none; transition: border-color var(--pc-transition-fast), box-shadow var(--pc-transition-fast); } .pc-input:focus { border-color: var(--pc-gold); box-shadow: 0 0 0 3px rgba(201,160,80,0.12); } .pc-input::placeholder { color: var(--pc-text-dim); } /* ============================================================ UTILITY HELPERS ============================================================ */ .pc-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .pc-container--narrow { max-width: 760px; } .pc-text-center { text-align: center; } .pc-stack-sm > * + * { margin-top: var(--pc-space-sm); } .pc-stack > * + * { margin-top: var(--pc-space-md); } .pc-stack-lg > * + * { margin-top: var(--pc-space-lg); }