/* * Collectable.gg — Brand Design System * Last updated: 2026-04-21 * * The authoritative CSS token + component reference for all Collectable.gg * web work. Import or copy variables into new pages/sections. * * Google Fonts (include in ): * * * Logo: /82294.png * Pixel-art "C", white on red square, transparent bg. * White logo — only use on dark backgrounds. */ :root { /* ───────────────────────────────────────────────────── COLOUR — BACKGROUNDS ───────────────────────────────────────────────────── */ --bg-base: #171522; /* primary page bg */ --bg-surface: #202439; /* cards, panels */ --bg-raised: #262339; /* elevated cards */ --bg-overlay: rgba(32, 36, 57, 0.5); /* glassmorphism fill */ --bg-overlay-deep: rgba(23, 21, 34, 0.95); /* dark modal/panel bg */ /* ───────────────────────────────────────────────────── COLOUR — BRAND RED ───────────────────────────────────────────────────── */ --red: #FF1139; /* primary accent */ --red-light: #FF4466; /* hover / highlight */ --red-dark: #c0002a; /* pressed state */ --red-glow: rgba(255, 17, 57, 0.4); /* glow / drop-shadow */ --red-glow-soft: rgba(255, 17, 57, 0.15); /* ambient glow */ --red-subtle: rgba(255, 17, 57, 0.12); /* tinted fill */ --red-border: rgba(255, 17, 57, 0.25); /* tinted border */ /* ───────────────────────────────────────────────────── COLOUR — TEXT ───────────────────────────────────────────────────── */ --text: #f4f0ff; /* primary text */ --muted: #7F7B91; /* secondary / supporting text */ --muted2: #a8a4b8; /* tertiary text */ /* ───────────────────────────────────────────────────── COLOUR — BORDERS ───────────────────────────────────────────────────── */ --border: #303D53; --border-soft: rgba(77, 73, 93, 0.4); /* ───────────────────────────────────────────────────── COLOUR — STATUS / SEMANTIC ───────────────────────────────────────────────────── */ --green: #22c55e; --green-bright: #57f287; /* Discord-style success */ --teal: #06b6d4; --amber: #f59e0b; --blue: #3b82f6; --discord: #5865f2; /* ───────────────────────────────────────────────────── TYPOGRAPHY — FAMILIES ───────────────────────────────────────────────────── */ --font-head: 'Poppins', system-ui, sans-serif; --font-body: 'Roboto', system-ui, sans-serif; /* ───────────────────────────────────────────────────── TYPOGRAPHY — SIZES ───────────────────────────────────────────────────── */ /* Headings — fluid responsive */ --text-h1-xl: clamp(3rem, 7vw, 6rem); --text-h1: clamp(2.5rem, 5vw, 4.2rem); --text-h2-xl: clamp(2.5rem, 6vw, 5.5rem); --text-h2: clamp(2.25rem, 3.2vw, 3.25rem); /* coverage-section h2 */ --text-h2-sm: clamp(2rem, 4vw, 3.2rem); --text-h3: 1.15rem; /* Body */ --text-lg: 1.05rem; --text-md: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --text-2xs: 0.65rem; /* ───────────────────────────────────────────────────── TYPOGRAPHY — WEIGHTS ───────────────────────────────────────────────────── */ --weight-black: 900; --weight-bold: 700; --weight-semi: 600; --weight-med: 500; --weight-reg: 400; /* ───────────────────────────────────────────────────── TYPOGRAPHY — LINE HEIGHTS ───────────────────────────────────────────────────── */ --lh-tightest: 1.0; --lh-tight: 1.08; /* large headings */ --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.75; /* body copy */ /* ───────────────────────────────────────────────────── TYPOGRAPHY — LETTER SPACING ───────────────────────────────────────────────────── */ --ls-tightest: -0.05em; --ls-tight: -0.03em; /* large headings */ --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.12em; /* eyebrow / caps labels */ --ls-widest: 0.14em; /* ───────────────────────────────────────────────────── SPACING SCALE ───────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-28: 7rem; /* Horizontal section padding */ --section-px: 5vw; /* ───────────────────────────────────────────────────── BORDERS & RADII ───────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 999px; /* ───────────────────────────────────────────────────── SHADOWS & GLOWS ───────────────────────────────────────────────────── */ --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3); --shadow-lg: 0 40px 100px rgba(0, 0, 0, 0.6); --glow-red: 0 0 20px rgba(255, 17, 57, 0.4); --glow-red-lg: 0 20px 60px rgba(255, 17, 57, 0.15); --glow-card: 0 8px 30px rgba(255, 17, 57, 0.1); --drop-red: drop-shadow(0 0 18px rgba(255, 17, 57, 0.4)) drop-shadow(0 0 48px rgba(255, 17, 57, 0.18)); /* ───────────────────────────────────────────────────── BLUR / GLASS ───────────────────────────────────────────────────── */ --blur-sm: blur(10px); --blur-md: blur(16px); --blur-lg: blur(20px); /* ───────────────────────────────────────────────────── ANIMATION ───────────────────────────────────────────────────── */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Apple-style spring */ --ease-out: ease-out; --ease-in-out: ease-in-out; --dur-fast: 0.2s; --dur-normal: 0.3s; --dur-slow: 0.5s; --dur-slower: 0.6s; } /* ═══════════════════════════════════════════════════════ REUSABLE COMPONENT CLASSES ═══════════════════════════════════════════════════════ */ /* Eyebrow — small caps label above section headings */ .eyebrow { display: block; font-family: var(--font-head); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--red); letter-spacing: var(--ls-widest); text-transform: uppercase; margin-bottom: 1rem; } /* Standard card */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-8); transition: border-color var(--dur-normal) ease, transform var(--dur-normal) ease; } .card:hover { border-color: var(--red-border); transform: translateY(-3px); } /* Glassmorphism card */ .glass-card { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-xl); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); } /* Stat pill (coverage-style) */ .stat-pill { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; min-width: 280px; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.5rem 1.25rem; background: rgba(32, 36, 57, 0.5); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } /* Red dot indicator */ .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; } /* Tag / badge */ .tag { display: inline-block; background: var(--red-subtle); border: 1px solid var(--red-border); border-radius: var(--radius-full); padding: 0.2rem 0.75rem; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--red-light); } /* Primary CTA button */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--red); color: #fff; padding: 0.9rem 2rem; border-radius: var(--radius-md); font-family: var(--font-head); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; border: none; cursor: pointer; box-shadow: var(--glow-red); transition: opacity var(--dur-fast), transform var(--dur-fast); } .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); } /* Ghost / secondary button */ .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.08); color: var(--text); padding: 0.9rem 2rem; border-radius: var(--radius-md); font-family: var(--font-head); font-size: var(--text-sm); font-weight: var(--weight-semi); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); transition: background var(--dur-fast), border-color var(--dur-fast); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); } /* Nav CTA (compact) */ .nav-cta { background: var(--red); color: #fff; padding: 0.5rem 1.3rem; border-radius: var(--radius-sm); font-family: var(--font-head); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; border: none; cursor: pointer; transition: opacity var(--dur-fast), transform var(--dur-fast); } .nav-cta:hover { opacity: 0.85; transform: translateY(-1px); } /* ───────────────────────────────────────────────────────────────────────── PIXEL CORNER BUTTONS 20-point polygon: 2-step staircase at each corner. --step = size of each step (default 6px) --corner = total cut = step × 2 (default 12px) NOTE: use filter:drop-shadow() for glow — box-shadow is clipped by clip-path ─────────────────────────────────────────────────────────────────────────── */ /* Shared clip-path shape — apply to any element */ .pixel-shape { --step: 6px; --corner: 12px; clip-path: polygon( 0 var(--corner), var(--step) var(--corner), var(--step) var(--step), var(--corner) var(--step), var(--corner) 0, calc(100% - var(--corner)) 0, calc(100% - var(--corner)) var(--step), calc(100% - var(--step)) var(--step), calc(100% - var(--step)) var(--corner), 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--step)) calc(100% - var(--corner)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--corner)) calc(100% - var(--step)), calc(100% - var(--corner)) 100%, var(--corner) 100%, var(--corner) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--corner)), 0 calc(100% - var(--corner)) ); } /* Solid red — primary action */ .btn-pixel-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--red); color: #fff; padding: 1rem 2.2rem; font-family: var(--font-head); font-weight: var(--weight-bold); font-size: var(--text-md); text-decoration: none; border: none; cursor: pointer; transition: filter var(--dur-fast) ease, transform var(--dur-fast) ease; } .btn-pixel-primary:hover { filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 17, 57, 0.6)); transform: translateY(-2px); } .btn-pixel-primary:active { transform: translateY(0); filter: brightness(0.9); } /* Ghost outline — wrapper provides border fill, inner provides dark fill */ .btn-pixel-ghost-wrap { display: inline-block; background: rgba(255, 17, 57, 0.7); padding: 2px; transition: filter var(--dur-fast) ease, transform var(--dur-fast) ease; } .btn-pixel-ghost-wrap:hover { filter: drop-shadow(0 0 10px rgba(255, 17, 57, 0.45)); transform: translateY(-2px); } .btn-pixel-ghost-wrap:active { transform: translateY(0); } .btn-pixel-ghost { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-base); color: var(--text); padding: 0.95rem 2.15rem; font-family: var(--font-head); font-weight: var(--weight-semi); font-size: var(--text-md); text-decoration: none; border: none; cursor: pointer; transition: background var(--dur-fast) ease; } .btn-pixel-ghost:hover { background: #201e2e; } /* White variant — for use on dark coloured backgrounds */ .btn-pixel-white { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--red); padding: 1rem 2.2rem; font-family: var(--font-head); font-weight: var(--weight-bold); font-size: var(--text-md); text-decoration: none; border: none; cursor: pointer; transition: filter var(--dur-fast) ease, transform var(--dur-fast) ease; } .btn-pixel-white:hover { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); transform: translateY(-2px); } /* Size modifiers */ .btn-pixel-sm { padding: 0.6rem 1.4rem; font-size: var(--text-sm); --step: 4px; --corner: 8px; } .btn-pixel-lg { padding: 1.25rem 3rem; font-size: 1.15rem; --step: 8px; --corner: 16px; } .btn-pixel-nav { padding: 0.55rem 1.3rem; font-size: var(--text-sm); --step: 4px; --corner: 8px; } /* Reveal animation — add .reveal, trigger with .visible */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.visible { opacity: 1; transform: none; } /* Stagger delays for reveal chains */ .rd1 { transition-delay: 0.1s; } .rd2 { transition-delay: 0.2s; } .rd3 { transition-delay: 0.3s; } .rd4 { transition-delay: 0.4s; } .rd5 { transition-delay: 0.5s; } /* ═══════════════════════════════════════════════════════ KEYFRAMES ═══════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 17, 57, 0.3); } 50% { box-shadow: 0 0 30px 6px rgba(255, 17, 57, 0.15); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ═══════════════════════════════════════════════════════ BREAKPOINTS (reference) Mobile: max-width: 640px Tablet: max-width: 900px Desktop: min-width: 901px Wide: min-width: 1280px XWide: min-width: 1600px ═══════════════════════════════════════════════════════ */