/* ============================================================ LIKHIT PENS — GLOBAL CSS Source of truth: docs/tokens.md Rule: NEVER hardcode colors/fonts. Always use CSS variables. ============================================================ */ /* ============================================================ GOOGLE FONTS (preconnect in HTML head — here for reference) ============================================================ */ /* @import via tags in HTML — not @import here for performance */ /* ============================================================ :ROOT — DESIGN TOKENS (exact copy from docs/tokens.md) ============================================================ */ :root { /* ============================================ COLORS — PRIMARY ============================================ */ --color-ink-black: #0D0D0D; --color-parchment: #F5EDD6; --color-aged-white: #FAF6EE; --color-deep-brown: #3B1F0A; --color-antique-gold: #C9A84C; --color-burnished-gold: #A07830; --color-light-gold: #E8D5A3; /* ============================================ COLORS — SECONDARY ============================================ */ --color-ink-blue: #1A2A4A; --color-silver: #C0C0C0; --color-antique-silver: #8C8C8C; --color-copper: #B87333; --color-velvet-navy: #0F1A2E; /* ============================================ COLORS — SEMANTIC ============================================ */ --color-success: #2E7D32; --color-warning: #F57C00; --color-error: #C62828; --color-info: #1565C0; /* ============================================ GRADIENTS ============================================ */ --gradient-hero: linear-gradient(135deg, #0D0D0D 0%, #1A0A00 50%, #0D0D0D 100%); --gradient-gold: linear-gradient(135deg, #C9A84C 0%, #E8D5A3 50%, #A07830 100%); --gradient-parchment: linear-gradient(180deg, #FAF6EE 0%, #F0E6CC 100%); --gradient-velvet: linear-gradient(180deg, #0F1A2E 0%, #1A2A4A 100%); --gradient-gold-text: linear-gradient(135deg, #C9A84C, #E8D5A3, #A07830); /* ============================================ TYPOGRAPHY — FONT FAMILIES ============================================ */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-script: 'Pinyon Script', cursive; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ============================================ TYPOGRAPHY — FONT SIZES (rem) ============================================ */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 5rem; /* 80px */ --text-6xl: 7rem; /* 112px */ /* ============================================ TYPOGRAPHY — FONT WEIGHTS ============================================ */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================ TYPOGRAPHY — LINE HEIGHTS ============================================ */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.8; /* ============================================ TYPOGRAPHY — LETTER SPACING ============================================ */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; --tracking-caps: 0.2em; /* ============================================ SPACING (8px base unit) ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 192px; /* ============================================ BORDER RADIUS ============================================ */ --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ============================================ SHADOWS ============================================ */ --shadow-sm: 0 2px 8px rgba(201, 168, 76, 0.15); --shadow-md: 0 4px 20px rgba(201, 168, 76, 0.25); --shadow-lg: 0 8px 40px rgba(201, 168, 76, 0.35); --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-card: 0 4px 24px rgba(59, 31, 10, 0.12), 0 1px 4px rgba(59, 31, 10, 0.08); --shadow-card-hover: 0 12px 48px rgba(59, 31, 10, 0.2), 0 4px 12px rgba(59, 31, 10, 0.12); --shadow-float: 0 16px 64px rgba(201, 168, 76, 0.2), 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-glow-gold: 0 0 20px rgba(201, 168, 76, 0.6), 0 0 40px rgba(201, 168, 76, 0.3); --shadow-glow-silver: 0 0 16px rgba(192, 192, 192, 0.5); /* ============================================ EASING FUNCTIONS ============================================ */ --ease-ink-drop: cubic-bezier(0.55, 0, 1, 0.45); --ease-ink-splash: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55); --ease-pen-draw: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ============================================ ANIMATION DURATIONS ============================================ */ --duration-micro: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-medium: 500ms; --duration-slow: 700ms; --duration-slower: 1000ms; --duration-cinematic: 2000ms; /* ============================================ LAYOUT — CONTAINER WIDTHS ============================================ */ --container-sm: 640px; --container-md: 900px; --container-lg: 1200px; --container-xl: 1440px; /* ============================================ LAYOUT — Z-INDEX SCALE ============================================ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-cursor: 600; --z-top: 999; /* ============================================ COMPONENT — NAVBAR ============================================ */ --navbar-height-desktop: 80px; --navbar-height-mobile: 64px; --navbar-bg-transparent: rgba(13, 13, 13, 0); --navbar-bg-solid: rgba(13, 13, 13, 0.85); --navbar-blur: blur(20px); --navbar-border: 1px solid rgba(201, 168, 76, 0.2); /* ============================================ COMPONENT — PRODUCT CARD ============================================ */ --card-bg: var(--color-aged-white); --card-border: 1px solid rgba(201, 168, 76, 0.2); --card-radius: var(--radius-md); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-image-height: 60%; --card-padding: var(--space-5); /* ============================================ COMPONENT — BUTTONS ============================================ */ --btn-primary-bg: var(--color-antique-gold); --btn-primary-text: var(--color-ink-black); --btn-primary-border: var(--color-burnished-gold); --btn-primary-hover-bg: var(--color-ink-black); --btn-primary-hover-text: var(--color-antique-gold); --btn-secondary-bg: transparent; --btn-secondary-text: var(--color-antique-gold); --btn-secondary-border: var(--color-antique-gold); --btn-padding-y: 16px; --btn-padding-x: 40px; --btn-radius: var(--radius-xs); --btn-font-size: var(--text-sm); --btn-font-weight: var(--weight-semibold); --btn-letter-space: var(--tracking-wider); /* ============================================ COMPONENT — FORMS ============================================ */ --input-border-color: rgba(59, 31, 10, 0.3); --input-focus-color: var(--color-antique-gold); --input-label-color: rgba(59, 31, 10, 0.6); --input-label-focus-color: var(--color-antique-gold); --input-padding-y: 12px; --input-font-size: var(--text-base); /* ============================================ COMPONENT — BADGES ============================================ */ --badge-limited-bg: #8B0000; --badge-limited-text: #E8D5A3; --badge-new-bg: var(--color-antique-gold); --badge-new-text: var(--color-ink-black); --badge-corporate-bg: var(--color-ink-blue); --badge-corporate-text: white; } /* ============================================================ GLOBAL RESET & BASE STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-deep-brown); background-color: var(--color-ink-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul, ol { list-style: none; } /* ============================================================ REDUCED MOTION (from docs/animations.md — GLOBAL REDUCED MOTION) ============================================================ */ @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; } [data-animate] { opacity: 1 !important; transform: none !important; } } /* ============================================================ CONTAINER UTILITY ============================================================ */ .container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 1440px) { .container { max-width: var(--container-xl); padding: 0 var(--space-8); } } /* ============================================================ LAYOUT UTILITIES ============================================================ */ /* POLISH #4 — Editorial spacing: luxury brands breathe at 120px desktop, 80px mobile */ .section-padding { padding: 120px 0; } @media (max-width: 767px) { .section-padding { padding: 80px 0; } } /* ============================================================ TYPOGRAPHY UTILITIES ============================================================ */ .heading-display { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } /* POLISH #1 — Montblanc/Rolex-tier typography: Lighter weight (300/400) at generously larger sizes. This is the editorial sweet spot — thin but massive. Bold weight is reserved for specific emphasis only. */ .heading-xl { font-family: var(--font-display); font-weight: var(--weight-light); /* 300 — editorial thinness */ font-size: var(--text-5xl); letter-spacing: -0.03em; /* tighter than default for big display */ line-height: var(--leading-tight); } @media (max-width: 767px) { .heading-xl { font-size: var(--text-3xl); } } .heading-lg { font-family: var(--font-display); font-weight: var(--weight-regular); /* 400 — confident but not heavy */ font-size: var(--text-4xl); letter-spacing: -0.025em; line-height: var(--leading-tight); } @media (max-width: 767px) { .heading-lg { font-size: var(--text-2xl); } } .heading-md { font-family: var(--font-display); font-weight: var(--weight-light); /* 300 — section headings feel refined */ font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: var(--leading-tight); } .gold-text { background: var(--gradient-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .script-text { font-family: var(--font-script); font-weight: var(--weight-regular); } .mono-text { font-family: var(--font-mono); } /* POLISH #1 — Wider tracking on all uppercase subheadings per design review */ .label-caps { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.25em; /* upgraded from 0.2em for more editorial air */ text-transform: uppercase; color: var(--color-antique-gold); } /* ============================================================ COLOUR SECTION BACKGROUNDS ============================================================ */ .bg-dark { background-color: var(--color-ink-black); } .bg-parchment { background-color: var(--color-parchment); } .bg-aged-white { background-color: var(--color-aged-white); } .bg-navy { background-color: var(--color-velvet-navy); } .bg-ink-blue { background-color: var(--color-ink-blue); } .bg-hero { background: var(--gradient-hero); } /* ============================================================ POLISH #1 — Editorial text contrast on dark sections Using --color-aged-white (warm off-white) at 85% instead of pure #ffffff — reduces harshness, feels more premium print. ============================================================ */ .dark-section-text, .bg-dark p, .bg-navy p, .bg-ink-blue p, [style*="background: var(--gradient-hero)"] p { color: rgba(250, 246, 238, 0.75); /* var(--color-aged-white) at 75% */ } /* Section headings on dark: warm off-white, not blinding white */ .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--color-aged-white); } /* ============================================================ MOBILE ANIMATION GUARDS ============================================================ */ @media (max-width: 767px) { .filter-blob { display: none !important; } .heritage-parallax-bg { background-attachment: scroll !important; } .desktop-only { display: none !important; } } @media (min-width: 768px) { .mobile-only { display: none !important; } } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-ink-black); } ::-webkit-scrollbar-thumb { background: var(--color-antique-gold); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-burnished-gold); } /* ============================================================ SELECTION ============================================================ */ ::selection { background: rgba(201, 168, 76, 0.3); color: var(--color-deep-brown); } /* ============================================================ FOCUS RING (accessibility) ============================================================ */ :focus-visible { outline: 2px solid var(--color-antique-gold); outline-offset: 3px; }