/* ============================================================ POPUP+ Design System — Design Tokens Source: popupcreators.ro Version: 1.0 · 2024 ============================================================ */ :root { /* ── COLORS ─────────────────────────────────────────────── */ /* Backgrounds */ --color-void: #0B0B0C; /* Page background (matches popupcreators.ro --ink) */ --color-surface: #121214; /* Cards, panels */ --color-lift: #161618; /* Borders, dividers, elevated surfaces */ --color-raise: #26262A; /* Hover borders, subtle dividers */ /* Text */ --color-text: #FFFFFF; /* Primary headings & body */ --color-muted: #888888; /* Supporting copy, captions, nav links */ --color-subtle: #555555; /* Metadata, timestamps, placeholders */ --color-faint: #333333; /* Disabled states */ /* Brand accent */ --color-accent: #C5FF47; /* Lime+ — CTAs, kickers, active states */ --color-accent-hover: #8FB800; /* Lime+ hover / pressed */ --color-accent-dim: rgba(197, 255, 71, 0.15); /* Accent borders on dark */ --color-accent-bg: rgba(197, 255, 71, 0.04); /* Accent tinted surfaces */ /* ── TYPOGRAPHY ─────────────────────────────────────────── */ /* Font families */ --font-display: 'Syne', sans-serif; /* Display · headings */ --font-body: 'DM Sans', sans-serif; /* Body · UI copy */ --font-mono: 'Space Mono', monospace; /* Kickers · numbers · code */ /* Google Fonts import URL (add to ): https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800 &family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300 &family=Space+Mono:wght@400;700&display=swap */ /* Type scale */ --text-display: clamp(64px, 7vw, 96px); /* Hero headline — Syne 800, ls -0.04em */ --text-h1: 48px; /* Section hero — Syne 800, ls -0.03em */ --text-h2: 32px; /* Section title — Syne 700, ls -0.02em */ --text-h3: 22px; /* Sub-section — Syne 700, ls -0.01em */ --text-body-lg: 18px; /* Lead / intro — DM Sans 300, lh 1.6 */ --text-body: 15px; /* Standard body — DM Sans 400, lh 1.65 */ --text-ui: 13px; /* UI labels, nav — DM Sans 400/500 */ --text-kicker: 11px; /* Kickers, badges — Space Mono 400 UPPERCASE ls 0.18em */ --text-micro: 10px; /* Captions, meta — Space Mono 400 */ /* Line heights */ --lh-tight: 1.0; --lh-snug: 1.1; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter spacing */ --ls-tight: -0.04em; --ls-snug: -0.02em; --ls-normal: 0; --ls-wide: 0.06em; --ls-wider: 0.12em; --ls-widest: 0.18em; /* Kickers / Space Mono UPPERCASE */ /* ── SPACING ─────────────────────────────────────────────── */ /* 8px base scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-30: 120px; /* Layout */ --max-width: 1200px; --page-gutter: 48px; --section-pad-y: 80px; --column-gap: 2px; /* Signature tight grid gap */ /* ── BORDER RADIUS ──────────────────────────────────────── */ --radius-sharp: 2px; /* Buttons, tags, small UI */ --radius-base: 4px; /* Cards, panels, containers */ --radius-md: 8px; /* Larger panels */ --radius-pill: 9999px; /* Pills, full-rounded chips */ /* ── BORDERS ─────────────────────────────────────────────── */ --border-default: 1px solid #1C1C1C; --border-subtle: 1px solid #0F0F0F; --border-raise: 1px solid #2A2A2A; --border-accent: 1px solid rgba(197, 255, 71, 0.3); --border-accent-full: 1px solid #C5FF47; /* ── SHADOWS ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); /* ── MOTION ──────────────────────────────────────────────── */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; /* Default */ --dur-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-INDEX ─────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 50; --z-nav: 100; --z-modal: 200; } /* ── UTILITY CLASSES ─────────────────────────────────────── */ /* Typography */ .text-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-text); } .text-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h1); line-height: var(--lh-snug); letter-spacing: -0.03em; color: var(--color-text); } .text-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--color-text); } .text-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); line-height: 1.2; color: var(--color-text); } .text-body-lg { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--color-muted); } .text-body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--color-muted); } .text-kicker { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-kicker); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-accent); } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-muted); } /* Buttons */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--color-accent); border: none; border-radius: var(--radius-sharp); font-family: var(--font-display); font-weight: 700; font-size: var(--text-ui); color: var(--color-void); letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: transparent; border: 1px solid #333; border-radius: var(--radius-sharp); font-family: var(--font-display); font-weight: 600; font-size: var(--text-ui); color: var(--color-text); letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-secondary:active { transform: scale(0.97); } .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; background: var(--color-surface); border: var(--border-accent-full); border-radius: var(--radius-sharp); font-family: var(--font-mono); font-size: var(--text-kicker); color: var(--color-accent); letter-spacing: var(--ls-wider); text-transform: uppercase; cursor: pointer; transition: background var(--dur-base) var(--ease-out); } .btn-outline:hover { background: var(--color-accent-bg); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; background: transparent; border: none; border-bottom: 1px solid #444; font-family: var(--font-body); font-size: 14px; color: var(--color-muted); cursor: pointer; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn-ghost:hover { color: var(--color-text); border-color: var(--color-text); } /* Card */ .card { background: var(--color-surface); border: var(--border-default); border-radius: var(--radius-base); padding: 32px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Tag / Badge */ .tag-accent { display: inline-block; font-family: var(--font-mono); font-size: var(--text-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); padding: 5px 12px; border: var(--border-accent); border-radius: var(--radius-sharp); } .tag-muted { display: inline-block; font-family: var(--font-mono); font-size: var(--text-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-faint); padding: 5px 12px; border: var(--border-default); border-radius: var(--radius-sharp); } .chip-accent { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-void); background: var(--color-accent); padding: 4px 12px; border-radius: var(--radius-pill); } .chip-surface { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-text); background: var(--color-lift); padding: 4px 12px; border-radius: var(--radius-pill); } /* Section marker */ .section-marker { display: flex; align-items: center; gap: 20px; margin-bottom: 64px; } .section-marker__num { font-family: var(--font-mono); font-size: var(--text-kicker); letter-spacing: var(--ls-widest); color: var(--color-accent); text-transform: uppercase; flex-shrink: 0; } .section-marker__rule { flex: 1; height: 1px; background: var(--color-lift); } .section-marker__label { font-family: var(--font-mono); font-size: var(--text-kicker); letter-spacing: var(--ls-widest); color: var(--color-subtle); text-transform: uppercase; flex-shrink: 0; } /* Callout box */ .callout { background: var(--color-accent-bg); border: var(--border-accent); border-radius: var(--radius-base); padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; } /* Nav */ .nav { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: 20px var(--page-gutter); border-bottom: var(--border-default); background: rgba(8, 8, 8, 0.92); backdrop-filter: blur(12px); } /* Page shell */ .page { min-height: 100vh; background: var(--color-void); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .section { padding: var(--section-pad-y) var(--page-gutter); border-bottom: var(--border-default); } /* Grid column gap (signature 2px tight) */ .grid-tight { display: grid; gap: var(--column-gap); } /* Animations */ @keyframes popup-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: popup-fade-up var(--dur-slow) var(--ease-out) both; }