/* ============================================================ 150 SHADES — DESIGN SYSTEM Core CSS variables, typography, resets, and base utilities ============================================================ */ /* ------------------------------------------------------------ FONTS — Load from Google Fonts (add to HTML ) Playfair Display — headlines Source Sans Pro — body Montserrat — UI / buttons / labels ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;600&family=Montserrat:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ COLOR TOKENS ------------------------------------------------------------ */ :root { /* Grayscale */ --white: #FFFFFF; --bright-gray: #EEEEEE; --chinese-silver: #CCCCCC; --spanish-gray: #999999; --granite-gray: #666666; --dark-charcoal: #333333; --pure-black: #000000; /* Accent */ --accent-red: #DC2626; --accent-red-hover: #B91C1C; --accent-red-light: rgba(220, 38, 38, 0.08); /* Safety colors */ --safety-low: #22C55E; --safety-medium: #EAB308; --safety-high: #F97316; --safety-extreme: #DC2626; /* Surface colors */ --surface-bg: #0A0A0A; --surface-card: #141414; --surface-elevated: #1C1C1C; --surface-border: #2A2A2A; /* Typography colors */ --text-primary: #FFFFFF; --text-secondary: #CCCCCC; --text-muted: #666666; --text-accent: #DC2626; /* ------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------ */ --font-headline: 'Playfair Display', Georgia, serif; --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* Type scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Line heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; /* ------------------------------------------------------------ SPACING ------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --max-width: 1200px; --max-width-narrow: 720px; --max-width-wide: 1440px; /* ------------------------------------------------------------ BORDER RADIUS ------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------ SHADOWS ------------------------------------------------------------ */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-xl: 0 16px 64px rgba(0,0,0,0.7); --shadow-red: 0 4px 20px rgba(220, 38, 38, 0.3); /* ------------------------------------------------------------ TRANSITIONS ------------------------------------------------------------ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ------------------------------------------------------------ Z-INDEX SCALE ------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; --z-age-gate:9999; } /* ------------------------------------------------------------ RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--surface-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } img, video, svg { display: block; max-width: 100%; } a { color: var(--accent-red); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-red-hover); } button { cursor: pointer; font-family: var(--font-ui); border: none; background: none; } input, textarea, select { font-family: var(--font-body); font-size: var(--text-base); } ul, ol { list-style: none; } /* ------------------------------------------------------------ TYPOGRAPHY UTILITIES ------------------------------------------------------------ */ .font-headline { font-family: var(--font-headline); } .font-body { font-family: var(--font-body); } .font-ui { font-family: var(--font-ui); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); line-height: var(--leading-tight); color: var(--text-primary); } h1 { font-size: var(--text-5xl); font-weight: 700; } h2 { font-size: var(--text-4xl); font-weight: 600; } h3 { font-size: var(--text-3xl); font-weight: 600; } h4 { font-size: var(--text-2xl); font-weight: 600; } h5 { font-size: var(--text-xl); font-weight: 600; } h6 { font-size: var(--text-lg); font-weight: 600; } p { line-height: var(--leading-relaxed); color: var(--text-secondary); } /* ------------------------------------------------------------ LAYOUT UTILITIES ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); } .container--narrow { max-width: var(--max-width-narrow); } /* ------------------------------------------------------------ BUTTON COMPONENTS ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; line-height: 1; padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); border: 2px solid transparent; transition: all var(--transition-base); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; } .btn--primary { background: var(--accent-red); color: var(--white); border-color: var(--accent-red); } .btn--primary:hover { background: var(--accent-red-hover); border-color: var(--accent-red-hover); color: var(--white); box-shadow: var(--shadow-red); transform: translateY(-1px); } .btn--outline { background: transparent; color: var(--white); border-color: var(--surface-border); } .btn--outline:hover { border-color: var(--white); color: var(--white); } .btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn--ghost:hover { color: var(--white); } .btn--lg { font-size: var(--text-lg); padding: var(--space-5) var(--space-10); } .btn--sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-5); } /* ------------------------------------------------------------ CARD COMPONENT ------------------------------------------------------------ */ .card { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--radius-xl); padding: var(--space-8); } .card--elevated { background: var(--surface-elevated); box-shadow: var(--shadow-lg); } /* ------------------------------------------------------------ FORM COMPONENTS ------------------------------------------------------------ */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; } .form-input { width: 100%; padding: var(--space-4) var(--space-5); background: var(--surface-elevated); border: 1px solid var(--surface-border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-base); transition: border-color var(--transition-fast); outline: none; } .form-input:focus { border-color: var(--accent-red); } .form-input::placeholder { color: var(--text-muted); } /* Checkbox */ .checkbox-group { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; } .checkbox-group input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; accent-color: var(--accent-red); cursor: pointer; margin-top: 2px; } .checkbox-label { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } /* ------------------------------------------------------------ SAFETY BADGE ------------------------------------------------------------ */ .safety-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); } .safety-badge--low { background: rgba(34,197,94,0.15); color: var(--safety-low); } .safety-badge--medium { background: rgba(234,179,8,0.15); color: var(--safety-medium); } .safety-badge--high { background: rgba(249,115,22,0.15); color: var(--safety-high); } .safety-badge--extreme { background: rgba(220,38,38,0.15); color: var(--safety-extreme); } /* ------------------------------------------------------------ SECTION UTILITIES ------------------------------------------------------------ */ .section { padding-block: var(--space-20); } .section--sm { padding-block: var(--space-12); } .section--lg { padding-block: var(--space-24); } .section-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-red); margin-bottom: var(--space-4); } .section-title { font-family: var(--font-headline); font-size: var(--text-4xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-6); } .section-subtitle { font-size: var(--text-lg); color: var(--text-secondary); max-width: 600px; line-height: var(--leading-relaxed); } /* ------------------------------------------------------------ DIVIDERS ------------------------------------------------------------ */ .divider { border: none; border-top: 1px solid var(--surface-border); margin-block: var(--space-8); } /* ------------------------------------------------------------ RESPONSIVE — Mobile first ------------------------------------------------------------ */ @media (max-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } .section { padding-block: var(--space-12); } .section--lg { padding-block: var(--space-16); } .container { padding-inline: var(--space-4); } .btn--lg { font-size: var(--text-base); padding: var(--space-4) var(--space-8); } } @media (max-width: 480px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } }