/* ========================================================================== Gamermaid — style.css Shared design tokens, base reset, typography, buttons, cards, forms, utilities. Loaded on every page BEFORE components.css. PATH CONVENTION (read this before touching any page): - Root page (/index.html) -> , assets = "assets/..." - Every other page (one folder deep) -> , assets = "../assets/..." - This file itself never references other assets, so it has no paths to fix. ========================================================================== */ :root { /* ---- Color tokens ---- */ --color-bg: #ffffff; --color-bg-alt: #f7f7fb; --color-text: #16131f; --color-text-muted: #5b5768; --color-border: rgba(20, 16, 40, 0.09); --color-border-strong: rgba(20, 16, 40, 0.16); --color-primary: #7c5cff; /* purple */ --color-primary-dark: #6a45ff; --color-secondary: #ff5cb8; /* pink */ --color-accent-blue: #4f8dff; --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); --gradient-glow: radial-gradient(circle at 30% 20%, rgba(124, 92, 255, 0.35), transparent 60%), radial-gradient(circle at 80% 60%, rgba(255, 92, 184, 0.28), transparent 55%), radial-gradient(circle at 50% 90%, rgba(79, 141, 255, 0.22), transparent 55%); --color-success: #2fbf7f; --color-danger: #ff5c6c; --color-warning: #ffb340; /* ---- Glass / surfaces ---- */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: 18px; /* ---- Shadows ---- */ --shadow-sm: 0 2px 8px rgba(20, 16, 40, 0.06); --shadow-md: 0 8px 24px rgba(20, 16, 40, 0.10); --shadow-lg: 0 20px 48px rgba(20, 16, 40, 0.14); --shadow-glow: 0 0 0 1px rgba(124, 92, 255, 0.12), 0 12px 36px rgba(124, 92, 255, 0.22); /* ---- Radius ---- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; /* ---- Layout ---- */ --container-max: 1280px; --header-height: 76px; /* ---- Typography ---- */ --font-base: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- Motion ---- */ --transition-fast: 160ms ease; --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); line-height: 1.55; font-size: 16px; overflow-x: hidden; /* guarantee no horizontal scroll from decorative elements */ } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.15; } p { margin: 0; } input, select, textarea { font-family: inherit; } /* ========================================================================== Typography scale (fluid via clamp) ========================================================================== */ h1, .h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem); letter-spacing: -0.02em; } h2, .h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.015em; } h3, .h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); } h4, .h4 { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); } .lead { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); color: var(--color-text-muted); } small, .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-muted { color: var(--color-text-muted); } .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== Layout utilities ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .section { padding-block: var(--space-8); } .section-tight { padding-block: var(--space-6); } /* ========================================================================== Glassmorphism helper ========================================================================== */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.85rem 1.6rem; border-radius: var(--radius-pill); border: 1px solid transparent; font-weight: 600; font-size: 1rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: rgba(124, 92, 255, 0.08); color: var(--color-primary-dark); border-color: var(--color-border-strong); } .btn-secondary:hover { background: rgba(124, 92, 255, 0.14); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { background: var(--color-bg-alt); } .btn-sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; } .btn-icon { padding: 0.65rem; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--color-border); } .btn-icon:hover { background: var(--color-bg-alt); } /* ========================================================================== Cards ========================================================================== */ .card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } /* ========================================================================== Forms ========================================================================== */ .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .field label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .input, .select, textarea.textarea { width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-bg-alt); color: var(--color-text); font-size: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .input:focus, .select:focus, textarea.textarea:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14); } .field-hint { font-size: 0.8rem; color: var(--color-text-muted); } /* ========================================================================== Background glow / decorative blobs (used behind hero sections) ========================================================================== */ .bg-glow { position: absolute; inset: 0; z-index: -1; background: var(--gradient-glow); pointer-events: none; } .bg-grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(20, 16, 40, 0.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 80%); pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: blob-drift 18s ease-in-out infinite alternate; } @keyframes blob-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } 100% { transform: translate(-20px, 15px) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .blob { animation: none; } html { scroll-behavior: auto; } } /* Manual "Reduced motion" override, toggled from the Dashboard Settings panel via a `reduced-motion` class on (same class main.js applies automatically when the OS-level prefers-reduced-motion is set). */ html.reduced-motion .blob { animation: none; } html.reduced-motion { scroll-behavior: auto; } /* ========================================================================== Responsive breakpoints Design is fluid via clamp(); these breakpoints handle structural shifts. ========================================================================== */ @media (max-width: 1920px) { /* wide desktop — reserved for future tuning */ } @media (max-width: 1440px) { .container { max-width: 1180px; } } @media (max-width: 1024px) { .container { padding-inline: var(--space-4); } .section { padding-block: var(--space-7); } } @media (max-width: 768px) { .section { padding-block: var(--space-6); } } @media (max-width: 480px) { .btn { width: 100%; } .container { padding-inline: var(--space-3); } } @media (max-width: 375px) { h1, .h1 { font-size: clamp(1.9rem, 1.4rem + 3vw, 3rem); } }