/* Mobile-first, responsive base styles with theme support */ :root { /* Layout & spacing tokens (theme-independent) */ --nav-logo-size: 32px; --nav-height: 70px; --max-w: 72rem; /* 1152px */ --gutter: clamp(12px, 4vw, 24px); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; /* Extended spacing scale for large sections */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 96px; --space-2xl: 128px; /* Border radius scale (theme-independent) */ --radius: 12px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 50px; /* Transitions (theme-independent) */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================================ DARK MODE (Only theme) ========================================================================== */ :root { /* Dark theme - Custom dark greys */ --bg-primary: #1A1A1A; --bg-secondary: #242424; /* 10 RGB points lighter - cards and navbar */ --bg-tertiary: #202020; /* 6 RGB points lighter - accents */ --bg-card: #1A1A1A; --btn-secondary-bg: #F4EEE0; /* Light buttons in dark mode (matches light theme primary) */ --btn-secondary-text: #1A1A1A; /* Dark text on light buttons (matches dark theme primary) */ /* Text colors - Using light mode greys (creamy whites) */ --text-primary: #FFFDF5; /* Cream white */ --text-secondary: #F3F1EA; /* Slightly darker cream */ --text-light: #EFEEE7; /* Muted cream */ --text-muted: #E5E4DD; /* Very muted cream */ /* Unified accent colors - Same in light and dark modes */ --primary-accent: #11A491; /* Vibrant teal/cyan */ --primary-accent-dark: #EA3F58; /* Vibrant pink/red */ --primary-accent-rgb: 17, 164, 145; --primary-accent-dark-rgb: 234, 63, 88; --brand: var(--primary-accent); /* Pastel accent palette */ --pastel-blue: #a0c4ff; --pastel-purple: #c9a0dc; --pastel-green: #b8e6b8; --pastel-pink: #ffb5d8; --pastel-yellow: #ffe5a0; /* Borders (dark mode) */ --border-subtle: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.16); --border-light: rgba(255, 255, 255, 0.10); /* Dark mode shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.45); /* Glass effects (dark mode) */ --glass-bg: rgba(36, 36, 36, 0.9); /* Based on #242424 secondary */ --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Glows */ --accent-glow: rgba(17, 164, 145, 0.3); /* Teal accent glow matching primary accent */ --green-glow: rgba(184, 230, 184, 0.2); /* Legacy aliases */ --bg: var(--bg-primary); --surface: var(--bg-secondary); --text: var(--text-primary); --muted: var(--text-secondary); --focus: #0085ff; --accent: #7cf1b1; /* Additional accent colors */ --primary-green: var(--pastel-green); --primary-blue: var(--pastel-blue); /* Text utilities */ --text-dark: #1e1f26; --text-on-accent: #ffffff; /* White text for use on teal accent backgrounds */ } /* Light theme overrides (applies when ) */ [data-theme="light"], .light { /* Light theme - Warm beige/cream palette */ --bg-primary: #F4EEE0; /* Warm beige - main page background */ --bg-secondary: #E8E0D4; /* Darker warm beige - cards and sections (12 RGB offset) */ --bg-tertiary: #E5DDD1; /* Deeper warm beige - accent sections (15 RGB offset) */ --bg-card: #E8E0D4; /* Warm beige for cards */ /* Secondary button flips (dark on light) */ --btn-secondary-bg: #0e0e0e; /* Dark grey buttons in light mode (matches dark theme primary) */ --btn-secondary-text: #F4EEE0; /* Light text on dark buttons (matches light theme primary) */ /* Text colors - Using dark mode greys */ --text-primary: #0e0e0e; /* Darkest grey */ --text-secondary: #101010; /* Slightly lighter dark grey */ --text-light: #1a1a1a; /* Medium dark grey */ --text-muted: #2a2a2a; /* Lighter dark grey for muted text */ /* Unified accent colors - Same as dark mode */ --primary-accent: #11A491; /* Vibrant teal/cyan */ --primary-accent-dark: #EA3F58; /* Vibrant pink/red */ --primary-accent-rgb: 17, 164, 145; --primary-accent-dark-rgb: 234, 63, 88; --brand: var(--primary-accent); /* Borders - soft and subtle */ --border-subtle: rgba(26, 26, 26, 0.08); --border-medium: rgba(26, 26, 26, 0.12); --border-strong: rgba(26, 26, 26, 0.16); --border-light: rgba(26, 26, 26, 0.06); /* Shadows - warm and soft */ --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.06); --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08); --shadow-lg: 0 10px 24px rgba(26, 26, 26, 0.10); --shadow-xl: 0 20px 40px rgba(26, 26, 26, 0.12); /* Glass effects - warm beige glass with contrast */ --glass-bg: rgba(232, 224, 212, 0.9); /* Based on #E8E0D4 secondary for better contrast */ --glass-border: rgba(26, 26, 26, 0.08); --glass-shadow: 0 8px 32px rgba(26, 26, 26, 0.10); /* Glows - warm pastel glows */ --accent-glow: rgba(17, 164, 145, 0.25); /* Teal accent glow matching primary accent */ --green-glow: rgba(184, 230, 184, 0.18); /* Legacy aliases */ --bg: var(--bg-primary); --surface: var(--bg-secondary); --text: var(--text-primary); --muted: var(--text-secondary); } /* Smooth theme transitions */ html { font-size: 16px; } body { margin: 0; font-family: 'Sora', system-ui, -apple-system, sans-serif; color: var(--text-primary); background: var(--bg-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: var(--nav-height); /* reserve space for fixed navbar */ transition: background-color 0.3s ease, color 0.3s ease; font-weight: 400; letter-spacing: -0.015em; } h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } h2 { font-size: clamp(1.875rem, 4.5vw, 3.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); } h3 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.008em; color: var(--text-primary); } p { color: var(--text-secondary); line-height: 1.65; font-size: 1.0625rem; letter-spacing: -0.01em; } img { max-width: 100%; height: auto; display: block; } * { box-sizing: border-box; } /* Minimal focus styles for keyboard users */ :where(a, button, input, select, textarea, [tabindex]){:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }} /* Layout helpers */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .stack > * + * { margin-top: var(--space-4); } .grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 48rem) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } /* Section utilities - Enhanced */ .section { padding: clamp(4rem, 8vw, 6.25rem) 0; } .section-large { padding: clamp(5rem, 10vw, 7.5rem) 0; } .section-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-title { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.025em; color: var(--text-primary); line-height: 1.15; } .section-subtitle { font-size: clamp(1.125rem, 2.25vw, 1.375rem); color: var(--text-secondary); max-width: 700px; margin: 0 auto; line-height: 1.65; letter-spacing: -0.01em; font-weight: 400; } /* Header / Nav */ /* Glass navbar - Light pastel mode */ .navbar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: var(--nav-height); z-index: 1000; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); border-radius: 0; transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Scrolled state: shrink and add rounded corners */ .navbar.scrolled { max-width: 80rem; /* Slightly wider than content (72rem) */ border-radius: 16px; top: 8px; border-bottom: none; /* Remove border with rounded corners */ } /* Mobile: keep navbar full width always */ @media (max-width: 48rem) { .navbar, .navbar.scrolled { max-width: 100%; border-radius: 0; top: 0; border-bottom: 1px solid var(--border-subtle); } .navbar .nav-inner { position: relative; height: var(--nav-height); /* Keep fixed height for proper centering */ } } .navbar .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); } header.site-header { position: sticky; top: 0; z-index: 50; background: var(--glass-bg); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--glass-border); } /* Skip link: visible on focus */ .skip-link{ position: fixed; left: 8px; top: 8px; z-index: 1000; background: var(--surface); color: var(--text); border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem 0.75rem; border-radius: 10px; transform: translateY(-150%); transition: transform .12s ease-out; text-decoration: none; } .skip-link:focus{ transform: translateY(0); } .nav-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); } .brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; font-weight: 600; } .brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; } .nav-toggle { background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-weight: 500; font-size: 14px; transition: all var(--transition-fast); cursor: pointer; } .nav-toggle:hover { background: var(--bg-tertiary); border-color: var(--border-medium); } .nav-links { display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); } .nav-links a { color: var(--text-secondary); text-decoration: none; padding: 6px 4px; border-radius: 8px; font-weight: 500; font-size: 14px; letter-spacing: 0; } .nav-links a:hover { background: transparent; } .nav-open .nav-links { display: flex; } /* Header CTAs (right side) */ .nav-ctas { display: inline-flex; gap: 10px; align-items: center; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .theme-toggle .icon { line-height: 0; display: inline-flex; } /* Icon swap based on theme */ [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline-flex; } [data-theme="light"] .theme-toggle .icon-sun { display: inline-flex; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Game feel toggle button */ .game-feel-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); } .game-feel-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .game-feel-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .game-feel-toggle .icon { line-height: 0; display: inline-flex; } /* Active state when game feel mode is on */ .game-feel-toggle.active { background: var(--primary-accent); color: #ffffff; border-color: var(--primary-accent); } @media (min-width: 48rem) { .nav-toggle { display: none; } .nav-links { display: flex !important; flex-direction: row; align-items: center; gap: 32px; padding: 0; margin-left: 16px; margin-right: auto; } .nav-ctas { display: inline-flex; } } /* Keep logo and CTAs fixed-width so links align left like backup */ .logo, .nav-ctas { flex-shrink: 0; } /* Mobile: show menu toggle button */ @media (max-width: 48rem) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; align-self: center; /* Ensure button stays centered vertically */ } .nav-ctas { display: inline-flex; gap: 8px; align-items: center; /* Center all CTA buttons vertically */ } .nav-ctas .nav-cta, .nav-ctas .nav-patreon { padding: 8px 16px; font-size: 14px; } /* Hide nav links by default on mobile */ .nav-links { display: none; position: absolute; top: var(--nav-height); right: var(--gutter); width: auto; min-width: 200px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-lg); } .nav-links a { width: 100%; padding: var(--space-3); text-align: center; border-radius: var(--radius-md); transition: all var(--transition-fast); position: relative; } /* Remove yellow underline on hover for mobile nav */ .nav-links a::after { display: none !important; } .nav-links a:hover { background: var(--bg-tertiary); } /* Show nav links when menu is open */ .nav-open .nav-links { display: flex; } } /* Previous-style top nav accents */ .logo { font-weight: 700; color: var(--primary-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.02em; } .logo:hover { transform: scale(1.03); transition: transform var(--transition-normal, .3s ease); } .nav-link { color: var(--text-secondary); text-decoration: none; position: relative; padding: 6px 4px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--primary-accent); transition: width var(--transition-normal, .3s ease); } .nav-link:hover { color: var(--text); } .nav-link:hover::after { width: 100%; } /* Logo image sizing (applies on all pages using nav.js) */ .navbar .logo img { height: var(--nav-logo-size); width: auto; display: block; object-fit: contain; border-radius: 6px; } /* Light mode: darken logo for better contrast */ [data-theme="light"] .navbar .logo img { filter: brightness(0.4); } /* Hero */ .hero { padding: clamp(2rem, 6vw, 6rem) 0; } .hero-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: clamp(1rem, 4vw, 3rem); box-shadow: var(--shadow-lg); /* add slight side gutters on mobile so edges/shadow aren't flush */ margin-inline: var(--space-2); } .hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } /* Buttons (global) - Enhanced typography */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--radius-md); padding: 14px 28px; font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; text-align: center; min-height: 44px; transition: all var(--transition-normal, .3s ease); } /* Primary - Dark text on light blue for better contrast */ .btn.primary, .btn-primary { background: var(--primary-accent); color: var(--text-on-accent); box-shadow: var(--shadow-md); transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal); } .btn.primary:hover, .btn-primary:hover { background: var(--primary-accent-dark); color: var(--text-on-accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn.primary:focus-visible, .btn-primary:focus, .btn-primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--shadow-md); } /* Secondary - Flipped theme colors */ .btn.secondary, .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-bg); } .btn.secondary:hover, .btn-secondary:hover { opacity: 0.9; transform: translateY(-1px); } .btn.secondary:focus-visible, .btn-secondary:focus, .btn-secondary:focus-visible { outline: none; box-shadow: none; } /* Success (optional) */ .btn.success, .btn-success { background: var(--primary-green); color: #fff; } .btn.success:hover, .btn-success:hover { background: #16a34a; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .btn.success:focus-visible, .btn-success:focus, .btn-success:focus-visible { outline: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .btn[disabled], .btn:disabled { opacity: .6; cursor: not-allowed; } /* Navigation-specific buttons (match backup nav sizing/look) */ .nav-cta { background: var(--primary-accent); color: var(--text-on-accent); padding: 10px 24px; border-radius: var(--radius-md); font-weight: 700; font-size: 0.9375rem; display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto; transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); box-shadow: var(--shadow-md); letter-spacing: -0.005em; } .nav-cta:hover { background: var(--primary-accent-dark); color: var(--text-on-accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .nav-cta:focus, .nav-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--shadow-md); } .nav-patreon { background: linear-gradient(135deg, #FF424D, #FF6B35); color: #fff; padding: 10px 20px; border-radius: var(--radius-md); font-weight: 700; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: all var(--transition-normal, .3s ease); letter-spacing: -0.005em; } .nav-patreon:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .nav-patreon:focus, .nav-patreon:focus-visible { outline: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } /* Icon sizing (backup) */ .nav-patreon svg { width: 16px; height: 16px; fill: currentColor; } /* Ensure generic buttons with icons have consistent sizing */ .btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2rem); box-shadow: var(--shadow-md); margin-inline: var(--space-2); transition: all var(--transition-normal); } .card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .card h3 { margin-top: 0; color: var(--text-primary); } /* Media helpers */ .media { border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-1x1 { aspect-ratio: 1 / 1; } .ratio-4x3 { aspect-ratio: 4 / 3; } .media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Social Links (from backup) */ .social-links { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); } .social-link { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; transition: all var(--transition-normal); position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .social-link svg { width: 24px; height: 24px; fill: currentColor; transition: all var(--transition-normal); z-index: 2; position: relative; } .social-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Brand-specific social link colors */ .social-link.youtube:hover { background: #FF0000; border-color: #FF0000; color: white; } .social-link.discord:hover { background: #5865F2; border-color: #5865F2; color: white; } .social-link.itch:hover { background: #FA5C5C; border-color: #FA5C5C; color: white; } .social-link.patreon:hover { background: #FF424D; border-color: #FF424D; color: white; } .social-link.twitter:hover { background: #1DA1F2; border-color: #1DA1F2; color: white; } .social-link.bluesky:hover { background: #0085ff; border-color: #0085ff; color: white; } .social-link.twitch:hover { background: #9146FF; border-color: #9146FF; color: white; } .social-link.instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #e6683c; color: white; } /* Footer - Enhanced typography */ footer.site-footer { border-top: 1px solid rgba(255,255,255,0.08); margin-top: var(--space-8); padding: clamp(3rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem); color: var(--text-muted); } .footer-links { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; margin-bottom: 1.5rem; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; transition: all var(--transition-normal); position: relative; } .footer-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary-accent); transition: width var(--transition-normal); } .footer-links a:hover { color: var(--text-primary); } .footer-links a:hover::after { width: 100%; } footer.site-footer small { display: block; text-align: center; font-size: 0.9375rem; color: var(--text-muted); letter-spacing: 0; font-weight: 400; } /* Content links (default) */ a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.nav-cta):not(.nav-patreon):not(.nav-link) { color: var(--text); text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,0.25); } a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.nav-cta):not(.nav-patreon):not(.nav-link):hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--primary-accent); } /* Ensure buttons never show underlines even though they are anchors */ .btn, .btn:hover, .btn:focus, .btn:active, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-success, .btn-success:hover, .btn-success:focus, .nav-cta, .nav-cta:hover, .nav-cta:focus, .nav-patreon, .nav-patreon:hover, .nav-patreon:focus { text-decoration: none; } /* A11y */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Larger screens: rely on grid gap, remove mobile gutters on cards */ @media (min-width: 48rem) { .card { margin-inline: 0; } .hero-card { margin-inline: 0; } } /* Mobile guardrails */ @media (max-width: 30rem) { .actions { flex-direction: column; align-items: stretch; } .actions .btn { width: 100%; } input[type="email"], input[type="text"], input[type="search"] { width: 100%; } } /* Tap target sizing */ .btn { min-height: 44px; } /* Floating nav styles moved to dedicated file: assets/css/floating-nav.css */ /* ========================================================================== NEWSLETTER POPUP SYSTEM ========================================================================== */ .newsletter-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: var(--space-lg); } .newsletter-popup-overlay.show { opacity: 1; visibility: visible; } .newsletter-popup { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); max-width: 500px; width: 100%; padding: clamp(2rem, 4vw, 3rem); position: relative; transform: translateY(20px); transition: transform 0.3s ease; box-shadow: var(--shadow-xl); } .newsletter-popup-overlay.show .newsletter-popup { transform: translateY(0); } .popup-close { position: absolute; top: var(--space-md); right: var(--space-md); width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-medium); color: var(--text-secondary); font-size: 22px; font-weight: 300; font-family: Arial, sans-serif; line-height: 36px; text-align: center; cursor: pointer; padding: 0; margin: 0; transition: all 0.2s ease; } .popup-close:hover { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-strong); transform: rotate(90deg); } .popup-content { text-align: center; } .popup-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: var(--space-sm); line-height: 1.2; letter-spacing: -0.02em; } .popup-headline.gradient-text { color: var(--primary-accent); } .popup-subheadline { color: var(--text-secondary); font-size: 1rem; margin-bottom: var(--space-lg); line-height: 1.5; } .popup-benefits { list-style: none; margin: var(--space-lg) 0; padding: var(--space-md); background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); text-align: left; } .popup-benefits li { padding: var(--space-sm) 0; color: var(--text-primary); font-size: 0.9375rem; display: flex; align-items: flex-start; gap: var(--space-sm); line-height: 1.5; } .popup-benefits li::before { content: "✓"; color: var(--primary-accent); font-weight: bold; font-size: 1.125rem; line-height: 1; flex-shrink: 0; } .popup-form { display: flex; flex-direction: column; gap: var(--space-md); } .popup-form .form-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .popup-input { flex: 1; min-width: 200px; padding: 14px 16px; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-family: inherit; transition: all 0.2s ease; } .popup-input:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 3px rgba(0,0,0,0.15); } .popup-submit { padding: 14px 28px; background: var(--primary-accent); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .popup-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .popup-submit:disabled { opacity: 0.6; cursor: not-allowed; } .popup-success { padding: var(--space-md); background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); border-radius: var(--radius-md); color: #4CAF50; margin-top: var(--space-md); } .popup-error { padding: var(--space-md); background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); border-radius: var(--radius-md); color: #f44336; margin-top: var(--space-md); } .popup-trust { color: var(--text-muted); font-size: 0.8125rem; margin-top: var(--space-md); line-height: 1.4; } /* Mobile Responsive */ @media (max-width: 48rem) { .newsletter-popup { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); margin: 1rem; } .popup-close { width: 44px; height: 44px; font-size: 28px; } } @media (max-width: 30rem) { .newsletter-popup { padding: var(--space-xl); margin: var(--space-md); } .popup-form .form-group { flex-direction: column; } .popup-input, .popup-submit { width: 100%; } .popup-headline { font-size: 1.5rem; } .popup-subheadline { font-size: 0.875rem; } } /* ============================================================================ Theme Extensions (merged from theme.css) Component-specific styling enhancements ========================================================================== */ /* Pastel Mode Background Effects - Very subtle grid background */ .bg-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.015; background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: -1; } /* Card System - Dark Mode Glass Effects */ .shmup-card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); transition: all var(--transition-normal); position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .shmup-card:hover { border-color: var(--border-light); box-shadow: var(--glass-shadow); transform: translateY(-4px); } /* Refined Bento Hero - Clean design */ .bento-item { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); cursor: pointer; } .bento-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xl); transform: translateY(-4px); } /* Trust Bar - Pastel Mode Polish */ .trust-stat { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .trust-stat:hover { /* Keep background color the same - don't change on hover */ border-color: var(--border-medium); box-shadow: var(--shadow-md); transform: translateY(-2px); } .trust-number { color: var(--primary-accent); } .trust-stat:hover .trust-number { color: var(--primary-accent); /* Keep accent color on hover */ } /* Refined Navigation - Minimal & Clean */ .navbar { background: var(--glass-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } .nav-patreon { background: linear-gradient(135deg, #FF424D 0%, #FF6B35 100%); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .nav-patreon:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* Marquee Polish - Pastel Mode */ .marquee__item img { filter: grayscale(30%) opacity(0.7); transition: all var(--transition-normal); } .marquee__item img:hover { filter: grayscale(0%) opacity(1); } /* Container enhancement */ main.container { position: relative; z-index: 1; } /* Clean section spacing - Webflow style */ section { padding: var(--space-lg) 0; } @media (min-width: 56rem) { section { padding: var(--space-xl) 0; } } /* ============================================================================ GAME FEEL MODE - SQUASH & STRETCH ANIMATIONS ========================================================================== */ /* Only apply game feel animations when mode is enabled */ [data-game-feel="on"] .game-feel-hover { animation: squashStretchHover 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-game-feel="on"] .game-feel-click { animation: squashStretchClick 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Squash & Stretch - Hover Animation (Subtle - no mouse tracking issues) */ @keyframes squashStretchHover { 0% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.98); } 100% { transform: scale(1.01, 0.99); } } /* Squash & Stretch - Click Animation (Moderate - satisfying but not jarring) */ @keyframes squashStretchClick { 0% { transform: scale(1, 1); } 40% { transform: scale(0.95, 1.05); } 100% { transform: scale(1, 1); } } /* Add smooth transitions for all interactive elements */ [data-game-feel="on"] button, [data-game-feel="on"] a, [data-game-feel="on"] .btn, [data-game-feel="on"] .link-button, [data-game-feel="on"] .filter-tab, [data-game-feel="on"] input[type="submit"], [data-game-feel="on"] .social-link, [data-game-feel="on"] .project-card, [data-game-feel="on"] .bento-item, [data-game-feel="on"] .feature-card, [data-game-feel="on"] .usage-card, [data-game-feel="on"] .course-card, [data-game-feel="on"] .trust-stat { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }