/** * Reaver - Custom Stylesheet (Bootstrap 5 Compatible) * Modern, clean, professional hero section with Japanese ink-inspired elements */ /* ===== CSS Variables ===== */ :root { --bg-gradient-start: #f8f9fc; --bg-gradient-end: #e6e9f0; --text-primary: #1a1a2e; --text-secondary: #4a4a6a; --text-muted: #5a5a7a; /* Light gray for copy on bg-dark (footer). #6c757d is only ~3.3:1 there. */ --text-on-dark: #b4b4bc; --accent-acid-green: #ccff00; --accent-acid-green-hover: #b3e600; --accent-acid-green-text: #3a4a00; --accent-hot-pink: #ff00aa; --accent-hot-pink-hover: #dd0099; /* Ink variants for text on light surfaces. Raw accents fail WCAG AA as type. */ --accent-hot-pink-text: #7a0058; --accent-hot-pink-text-hover: #5c0042; --gradient-primary: linear-gradient(135deg, #ccff00 0%, #b3e600 50%, #aadd00 100%); --gradient-accent: linear-gradient(135deg, #ff00aa 0%, #dd0099 50%, #bb0088 100%); --white: #ffffff; --card-bg: #ffffff; --gray-50: #f8f9fc; --gray-100: #e6e9f0; --gray-200: #d1d4de; --gray-300: #b8bac6; --gray-400: #9a9cb8; --gray-500: #7a7c9a; --gray-600: #5a5d7a; --gray-700: #3a3d5a; --gray-800: #1a1a2e; --border-light: rgba(0, 0, 0, 0.06); --border-medium: #e0e0e0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15); --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; color-scheme: light; } /* ===== Dark Mode ===== */ /* Palette: Carbon Dark (Zinc-based) — switched when JS sets data-theme="dark" on */ :root[data-theme="dark"] { --bg-gradient-start: #18181b; --bg-gradient-end: #18181b; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #a1a1aa; --text-on-dark: #b4b4bc; --accent-acid-green-text: #ccff00; --accent-hot-pink-text: #ff6ec7; --accent-hot-pink-text-hover: #ff9ad9; --white: #18181b; --card-bg: #27272a; --gray-50: #18181b; --gray-100: #27272a; --gray-200: #3f3f46; --gray-300: #52525b; --gray-400: #71717a; --gray-500: #a1a1aa; --gray-600: #d4d4d8; --gray-700: #e4e4e7; --gray-800: #fafafa; --border-light: rgba(255, 255, 255, 0.06); --border-medium: #3f3f46; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5); color-scheme: dark; background-color: #18181b; --bs-body-bg: #18181b; --bs-body-color: #fafafa; --bs-white-rgb: 24, 24, 27; --bs-light-rgb: 24, 24, 27; --bs-secondary-bg: #27272a; --bs-tertiary-bg: #3f3f46; --bs-secondary-color: #a1a1aa; --bs-tertiary-color: #a1a1aa; --bs-emphasis-color: #fafafa; --bs-border-color: #71717a; --bs-form-control-bg: #18181b; } [data-theme="dark"] body, [data-theme="dark"] body.bg-light { background: #18181b !important; color: var(--text-primary) !important; } [data-theme="dark"] .navbar, [data-theme="dark"] .navbar.bg-light, [data-theme="dark"] .navbar.bg-dark, [data-theme="dark"] .navbar.scrolled { background: #18181b !important; background-color: #18181b !important; border-bottom-color: var(--border-medium) !important; } [data-theme="dark"] .navbar-toggler { border-color: #52525b; background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .navbar-toggler:hover, [data-theme="dark"] .navbar-toggler:focus-visible { border-color: var(--accent-acid-green); background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .navbar-toggler-icon, [data-theme="dark"] .navbar-light .navbar-toggler-icon, [data-theme="dark"] .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28250, 250, 250, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-theme="dark"] .card { background: var(--card-bg) !important; border-color: var(--border-medium) !important; color: var(--text-primary) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6, [data-theme="dark"] .display-1, [data-theme="dark"] .display-4, [data-theme="dark"] .display-5, [data-theme="dark"] .display-6 { color: #fafafa !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-primary, [data-theme="dark"] #features h3.text-primary, [data-theme="dark"] #stats h2.text-primary { color: #ccff00 !important; } [data-theme="dark"] hr { border-color: var(--border-medium) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border-medium) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border-medium) !important; } [data-theme="dark"] .border-secondary { border-color: var(--border-medium) !important; } /* Buttons — readable borders/text on dark surfaces */ [data-theme="dark"] .btn-outline-light { color: #fafafa !important; border-color: #a1a1aa !important; background: transparent !important; } [data-theme="dark"] .btn-outline-light:hover, [data-theme="dark"] .btn-outline-light:focus { background: var(--accent-acid-green) !important; color: #18181b !important; border-color: var(--accent-acid-green) !important; } [data-theme="dark"] .btn-outline-secondary { color: #e4e4e7 !important; border-color: #71717a !important; background: transparent !important; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-secondary:focus { background: var(--accent-hot-pink) !important; /* Dark text — white on #ff00aa is only ~3.45:1 (fails WCAG AA 4.5:1) */ color: #18181b !important; border-color: var(--accent-hot-pink) !important; } /* Brand success buttons: acid green + dark text (not Bootstrap green + white) */ [data-theme="dark"] .btn-success { background: var(--accent-acid-green) !important; border-color: var(--accent-acid-green) !important; color: #18181b !important; font-weight: 600; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:focus { background: var(--accent-acid-green-hover) !important; border-color: var(--accent-acid-green-hover) !important; color: #18181b !important; } [data-theme="dark"] .btn-success:active { background: var(--accent-acid-green-hover) !important; border-color: var(--accent-acid-green-hover) !important; color: #18181b !important; } /* Forms — readable fields, selects, and the native file “Choose” button */ [data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label { color: #fafafa !important; } [data-theme="dark"] .form-text, [data-theme="dark"] .text-muted { color: #a1a1aa !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color: #fafafa !important; background-color: #18181b !important; border-color: #71717a !important; } [data-theme="dark"] .form-control::placeholder { color: #a1a1aa !important; opacity: 1; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { color: #fafafa !important; background-color: #18181b !important; border-color: var(--accent-acid-green) !important; box-shadow: 0 0 0 0.2rem rgba(204, 255, 0, 0.18) !important; } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fafafa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; } .form-control[type="file"] { color: var(--text-primary); } .form-control::file-selector-button { color: #1a1a2e !important; background-color: #e6e9f0 !important; border: 0; border-inline-end: 1px solid #7a7c9a !important; font-weight: 600; } .form-control::-webkit-file-upload-button { color: #1a1a2e !important; background-color: #e6e9f0 !important; border: 0; border-inline-end: 1px solid #7a7c9a !important; font-weight: 600; } [data-theme="dark"] .form-control[type="file"] { color: #e4e4e7 !important; } [data-theme="dark"] .form-control::file-selector-button { color: #fafafa !important; background-color: #3f3f46 !important; border: 0 !important; border-inline-end: 1px solid #71717a !important; pointer-events: none; } [data-theme="dark"] .form-control::-webkit-file-upload-button { color: #fafafa !important; background-color: #3f3f46 !important; border: 0 !important; border-inline-end: 1px solid #71717a !important; pointer-events: none; } [data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: #52525b !important; } [data-theme="dark"] .form-check-input { background-color: #18181b !important; border-color: #71717a !important; } [data-theme="dark"] .form-check-input:checked { background-color: var(--accent-acid-green) !important; border-color: var(--accent-acid-green) !important; } [data-theme="dark"] .fb-drop, [data-theme="dark"] .qa-drop { color: #a1a1aa; border-color: #71717a; background: rgba(255, 255, 255, 0.04); } .fb-drop:focus-visible, .qa-drop:focus-visible { outline: 3px solid var(--accent-acid-green); outline-offset: 2px; } [data-theme="dark"] .fb-toolbar button, [data-theme="dark"] .fb-preview { background: #18181b; border-color: #71717a; color: #e4e4e7; } /* In-content links: Bootstrap blue is ~3.9:1 on zinc and fails AA */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.qa-chip):not(.qa-tag):not(.hero-compare-link) { color: #ff6ec7; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.hero-compare-link):hover { color: #ccff00; } [data-theme="dark"] a.text-success { color: #86efac !important; } [data-theme="dark"] a.text-secondary, [data-theme="dark"] .footer-main a.text-secondary { color: #a1a1aa !important; } [data-theme="dark"] .alert-link { color: #ff6ec7; } /* Editions section */ [data-theme="dark"] .editions-card, [data-theme="dark"] #editions .row.flex-lg-nowrap { background: var(--card-bg) !important; border-color: var(--border-medium) !important; } [data-theme="dark"] #editions .edition-content .border-bottom { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] #editions .edition-content h2, [data-theme="dark"] #editions .edition-content ul li span { color: #fafafa !important; } [data-theme="dark"] #editions .edition-content span.text-primary { color: #ccff00 !important; } /* Comparison toggle */ [data-theme="dark"] #comparison .comparison-toggle { background: var(--card-bg); border-color: var(--border-medium); } [data-theme="dark"] #comparison .comparison-toggle .toggle-option { color: var(--text-secondary); } [data-theme="dark"] #comparison .comparison-toggle .toggle-option.active { background: var(--gray-200); color: #fafafa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Comparison cards — Free, Solo, Starter, Pro, Agency, Scale */ [data-theme="dark"] .plan-cards .plan-tier-free .card, [data-theme="dark"] .plan-cards .plan-tier-solo .card, [data-theme="dark"] .plan-cards .plan-tier-starter .card, [data-theme="dark"] .plan-cards .plan-tier-agency .card, [data-theme="dark"] .plan-cards .plan-tier-scale .card { background: #3f3f46 !important; border-color: var(--border-medium) !important; } [data-theme="dark"] .plan-cards .plan-tier-free .card h3, [data-theme="dark"] .plan-cards .plan-tier-free .card p, [data-theme="dark"] .plan-cards .plan-tier-free .card li span, [data-theme="dark"] .plan-cards .plan-tier-free .card .tier-badge, [data-theme="dark"] .plan-cards .plan-tier-solo .card h3, [data-theme="dark"] .plan-cards .plan-tier-solo .card p, [data-theme="dark"] .plan-cards .plan-tier-solo .card li span, [data-theme="dark"] .plan-cards .plan-tier-solo .card .tier-badge, [data-theme="dark"] .plan-cards .plan-tier-starter .card h3, [data-theme="dark"] .plan-cards .plan-tier-starter .card p, [data-theme="dark"] .plan-cards .plan-tier-starter .card li span, [data-theme="dark"] .plan-cards .plan-tier-starter .card .tier-badge, [data-theme="dark"] .plan-cards .plan-tier-agency .card h3, [data-theme="dark"] .plan-cards .plan-tier-agency .card p, [data-theme="dark"] .plan-cards .plan-tier-agency .card li span, [data-theme="dark"] .plan-cards .plan-tier-agency .card .tier-badge, [data-theme="dark"] .plan-cards .plan-tier-scale .card h3, [data-theme="dark"] .plan-cards .plan-tier-scale .card p, [data-theme="dark"] .plan-cards .plan-tier-scale .card li span, [data-theme="dark"] .plan-cards .plan-tier-scale .card .tier-badge { color: #fafafa !important; } [data-theme="dark"] .plan-cards .plan-tier-pro .card { background: #3f3f46 !important; border-color: var(--accent-acid-green) !important; } [data-theme="dark"] .plan-cards .plan-tier-pro .card h3, [data-theme="dark"] .plan-cards .plan-tier-pro .card p, [data-theme="dark"] .plan-cards .plan-tier-pro .card li span, [data-theme="dark"] .plan-cards .plan-tier-pro .card .tier-badge { color: #fafafa !important; } /* Comparison table */ [data-theme="dark"] #comparison table { background: #18181b !important; color: #fafafa !important; } [data-theme="dark"] #comparison table thead th { background: #18181b !important; color: #fafafa !important; border-color: #3f3f46 !important; } [data-theme="dark"] #comparison table td, [data-theme="dark"] #comparison table tbody th { border-color: #3f3f46 !important; color: #d4d4d8 !important; } [data-theme="dark"] #comparison table tbody tr:nth-child(odd) { background: #27272a !important; } [data-theme="dark"] #comparison table tbody tr:nth-child(even) { background: #3f3f46 !important; } [data-theme="dark"] #comparison table td.fw-semibold, [data-theme="dark"] #comparison table tbody th { color: #fafafa !important; } [data-theme="dark"] #comparison table .text-muted { color: #d4d4d8 !important; } [data-theme="dark"] #comparison table .text-success { color: #4ade80 !important; } [data-theme="dark"] #comparison table .text-success i { color: #4ade80 !important; } [data-theme="dark"] #comparison table .text-muted i { color: #d4d4d8 !important; } [data-theme="dark"] .table { --bs-table-bg: var(--card-bg); --bs-table-color: var(--text-primary); --bs-table-striped-bg: var(--card-bg); } [data-theme="dark"] .table-dark { --bs-table-bg: #18181b !important; } /* Accordion */ [data-theme="dark"] .accordion-button { background: var(--card-bg) !important; color: var(--text-primary) !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(204, 255, 0, 0.06) !important; } /* Fix accordion chevron icon — dark SVG invisible on dark backgrounds */ [data-theme="dark"] .accordion-button::after, [data-theme="dark"] .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fafafa'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } [data-theme="dark"] .accordion-body { background: var(--card-bg) !important; color: var(--text-secondary) !important; } /* Alerts */ [data-theme="dark"] .alert-info { background: rgba(204, 255, 0, 0.06) !important; color: var(--text-primary) !important; border-color: rgba(204, 255, 0, 0.15) !important; } [data-theme="dark"] .alert-success { background: rgba(204, 255, 0, 0.08) !important; color: var(--text-primary) !important; border-color: rgba(204, 255, 0, 0.15) !important; } /* Footer */ [data-theme="dark"] footer { background: #09090b !important; border-top-color: var(--border-medium) !important; } /* How It Works cards */ [data-theme="dark"] #how-it-works .card { background: var(--card-bg) !important; border: 1px solid #52525b !important; } [data-theme="dark"] #how-it-works .card .fs-3 { color: #18181b !important; } /* Encryption Approach cards */ [data-theme="dark"] #encryption-approach .card { background: var(--card-bg) !important; border: 1px solid #52525b !important; } /* All cards with border-0 need a visible edge in dark mode */ [data-theme="dark"] .card.border-0 { border: 1px solid #3f3f46 !important; } /* Fix Bootstrap success color — too dark on dark bg */ [data-theme="dark"] .text-success { color: #86efac !important; } /* Fix Bootstrap check-circle icons */ [data-theme="dark"] .text-success i { color: #86efac !important; } /* ===== Pricing Page — Dark Mode ===== */ /* Pricing buttons — high contrast labels + borders */ [data-theme="dark"] .pricing-hero .btn-outline-secondary { color: #fafafa !important; border-color: #a1a1aa !important; background: transparent !important; } [data-theme="dark"] .pricing-hero .btn-outline-secondary:hover, [data-theme="dark"] .pricing-hero .btn-outline-secondary:focus { background: var(--accent-hot-pink) !important; color: #18181b !important; border-color: var(--accent-hot-pink) !important; } [data-theme="dark"] .pricing-hero .btn-outline-light { color: #fafafa !important; border-color: #fafafa !important; background: transparent !important; } [data-theme="dark"] .pricing-hero .btn-outline-light:hover, [data-theme="dark"] .pricing-hero .btn-outline-light:focus { background: var(--accent-acid-green) !important; color: #18181b !important; border-color: var(--accent-acid-green) !important; } [data-theme="dark"] .pricing-hero .btn-success { background: var(--accent-acid-green) !important; border-color: var(--accent-acid-green) !important; color: #18181b !important; font-weight: 600; } [data-theme="dark"] .pricing-hero .btn-success:hover, [data-theme="dark"] .pricing-hero .btn-success:focus { background: var(--accent-acid-green-hover) !important; border-color: var(--accent-acid-green-hover) !important; color: #18181b !important; } /* Text row */ [data-theme="dark"] .pricing-hero .text-muted, [data-theme="dark"] .pricing-hero .lead.text-secondary { color: #a1a1aa !important; } [data-theme="dark"] .pricing-hero h1, [data-theme="dark"] .pricing-hero h2, [data-theme="dark"] .pricing-hero h3 { color: #fafafa !important; } /* Table */ [data-theme="dark"] .pricing-hero .table { --bs-table-bg: #27272a; --bs-table-color: #d4d4d8; --bs-table-striped-bg: #3f3f46; --bs-table-striped-color: #d4d4d8; --bs-table-hover-bg: #52525b; --bs-table-hover-color: #fafafa; --bs-table-border-color: #3f3f46; background: #27272a !important; color: #d4d4d8 !important; } [data-theme="dark"] .pricing-hero .table thead th { background: #18181b !important; color: #fafafa !important; border-color: #3f3f46 !important; } [data-theme="dark"] .pricing-hero .table td { border-color: #3f3f46 !important; color: #d4d4d8 !important; background-color: transparent; } [data-theme="dark"] .pricing-hero .table tbody tr:nth-child(odd) { background: #27272a !important; color: #d4d4d8 !important; } [data-theme="dark"] .pricing-hero .table tbody tr:nth-child(even) { background: #3f3f46 !important; color: #d4d4d8 !important; } [data-theme="dark"] .pricing-hero .table .text-success { color: #4ade80 !important; } [data-theme="dark"] .pricing-hero .table td.fw-semibold { color: #fafafa !important; } /* Alerts */ [data-theme="dark"] .pricing-hero .alert-success { background: rgba(204, 255, 0, 0.08) !important; color: #fafafa !important; border-color: rgba(204, 255, 0, 0.15) !important; } [data-theme="dark"] .pricing-hero .alert-info { background: rgba(204, 255, 0, 0.06) !important; color: #fafafa !important; border-color: rgba(204, 255, 0, 0.15) !important; } /* FAQ accordion */ [data-theme="dark"] .pricing-hero .accordion-item { background: #27272a !important; border: 1px solid #3f3f46 !important; } [data-theme="dark"] .pricing-hero .accordion-button { background: #27272a !important; color: #fafafa !important; } [data-theme="dark"] .pricing-hero .accordion-button:not(.collapsed) { background: rgba(204, 255, 0, 0.08) !important; color: #fafafa !important; } [data-theme="dark"] .pricing-hero .accordion-body { background: #27272a !important; color: #d4d4d8 !important; } /* CTA section */ [data-theme="dark"] .pricing-hero .border-top.border-bottom { border-color: #3f3f46 !important; } [data-theme="dark"] .pricing-hero .text-secondary { color: #a1a1aa !important; } body { background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); } .text-gradient { color: var(--accent-acid-green-text); display: inline-block; } [data-theme="dark"] .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* ===== Japanese Ink Elements ===== */ .ink-brush { position: absolute; width: 300px; height: 300px; background: radial-gradient(ellipse at center, rgba(26, 26, 46, 0.03) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .ink-brush-1 { top: -100px; left: -100px; transform: rotate(-15deg); } .ink-brush-2 { bottom: -80px; right: -80px; transform: rotate(10deg); } .ink-brush-3 { top: 40%; right: -120px; width: 200px; height: 200px; opacity: 0.7; } /* ===== Navigation ===== */ .navbar { background: rgba(248, 249, 252, 0.9) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); } .navbar.scrolled { background: rgba(255, 255, 255, 0.98) !important; box-shadow: var(--shadow-sm); } .navbar-brand { font-size: 1.5rem; font-weight: 700; } .navbar-tools { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } .theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; user-select: none; -webkit-user-select: none; } .theme-toggle i { font-size: 1.1rem; pointer-events: none; } .theme-toggle, .navbar-toggler { touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1060; } /* Touch leaves :hover/:focus stuck; keep the icon button quiet after a tap. */ [data-theme="dark"] .theme-toggle.btn-outline-secondary:hover, [data-theme="dark"] .theme-toggle.btn-outline-secondary:focus, [data-theme="dark"] .theme-toggle.btn-outline-secondary:active { background: transparent !important; color: #e4e4e7 !important; border-color: #71717a !important; } @media (hover: hover) { [data-theme="dark"] .theme-toggle.btn-outline-secondary:hover, [data-theme="dark"] .theme-toggle.btn-outline-secondary:focus-visible { background: var(--accent-hot-pink) !important; color: #18181b !important; border-color: var(--accent-hot-pink) !important; } } .nav-link { font-size: 0.95rem; font-weight: 500; color: var(--text-secondary) !important; transition: color var(--transition-fast); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent-acid-green); transition: width var(--transition-base); } .nav-link:hover::after { width: 100%; } .nav-link:hover { color: var(--text-primary) !important; } /* Active nav link — persistent underline */ .nav-link.active { color: var(--text-primary) !important; } .nav-link.active::after { width: 100%; } .individual-highlight { border: 3px solid #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); } /* Desktop Navigation (≥992px) */ @media (min-width: 992px) { .navbar, .navbar > .container { display: flex !important; flex-wrap: nowrap !important; align-items: center; } .navbar-expand .navbar-collapse, .navbar .collapse.navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand .navbar-nav, .navbar .navbar-nav { flex-direction: row !important; display: flex !important; align-items: center; margin-bottom: 0; list-style: none; padding-left: 0; } .navbar-nav .nav-item { display: flex; } /* Hide hamburger menu on desktop */ .navbar-toggler { display: none !important; } .navbar-tools { margin-left: 0.5rem; order: 3; } .navbar .navbar-collapse { order: 2; } /* Force customer portal button to far right on desktop */ .navbar-nav .nav-item.ms-auto { margin-left: auto !important; } /* Desktop nav links */ .nav-link:hover::after { width: 100%; } } /* ===== Hero Section ===== */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: calc(88px + var(--space-3xl)); position: relative; overflow: hidden; } .hero-particles { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(204, 255, 0, 0.3), transparent), radial-gradient(2px 2px at 80% 20%, rgba(255, 0, 170, 0.2), transparent), radial-gradient(1px 1px at 40% 70%, rgba(204, 255, 0, 0.2), transparent), radial-gradient(1px 1px at 70% 80%, rgba(255, 0, 170, 0.15), transparent); pointer-events: none; z-index: 0; } .hero-container { max-width: 1280px; margin: 0 auto; } .hero-brand-word { font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 900; letter-spacing: 0.06em; background: linear-gradient(135deg, var(--accent-acid-green) 0%, #aadd00 50%, var(--accent-hot-pink) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; line-height: 1; } .hero-tagline { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--text-secondary); max-width: 500px; line-height: 1.5; } .hero-subheadline { font-size: clamp(0.9rem, 1.5vw, 1.05rem); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-lg); } /* Acid green / hot pink as text on a light wash is ~1.1:1. Use dark ink in light mode. */ .hero-pill { font-weight: 700; letter-spacing: 0.01em; } .hero-pill-green { color: #3a4a00; background: rgba(204, 255, 0, 0.28); border: 1px solid #8aa000; } .hero-pill-pink { color: #7a0058; background: rgba(255, 0, 170, 0.12); border: 1px solid #c44a96; } a.hero-compare-link { color: #3a4a00; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; } a.hero-compare-link:hover { color: #7a0058; } [data-theme="dark"] .hero-pill-green { color: #ccff00; background: rgba(204, 255, 0, 0.12); border-color: rgba(204, 255, 0, 0.45); } [data-theme="dark"] .hero-pill-pink { color: #ff6ec7; background: rgba(255, 0, 170, 0.14); border-color: rgba(255, 110, 199, 0.45); } [data-theme="dark"] a.hero-compare-link { color: #ccff00; } [data-theme="dark"] a.hero-compare-link:hover { color: #ff6ec7; } .hero-buttons .btn-success { background: var(--accent-acid-green) !important; border-color: var(--accent-acid-green) !important; color: #1a1a2e !important; font-weight: 600; } [data-theme="dark"] .hero-buttons .btn-success { color: #18181b !important; background: var(--accent-acid-green-hover) !important; border-color: var(--accent-acid-green-hover) !important; transform: translateY(-3px); box-shadow: var(--shadow-lg); } .hero-buttons .btn-outline-secondary { background: var(--accent-hot-pink) !important; color: #1a1a2e !important; border-color: var(--accent-hot-pink); font-weight: 600; } .hero-buttons .btn-outline-secondary:hover { background: var(--accent-hot-pink-hover) !important; border-color: var(--accent-hot-pink-hover) !important; color: #1a1a2e !important; transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* ===== Terminal Mockup ===== */ .terminal-mockup { background: #1a1a2e; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); overflow: hidden; max-width: 520px; margin: 0 auto; text-align: left; } .terminal-header { background: #2d2d4a; padding: 12px 16px; display: flex; align-items: center; gap: 8px; position: relative; } .terminal-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .dot-red { background: #ff5f57; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #28c840; } .terminal-title { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; font-family: 'Inter', monospace; font-weight: 500; } .terminal-body { padding: 20px 24px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.85rem; line-height: 1.7; } .terminal-line { margin-bottom: 4px; color: #c0c0d0; white-space: nowrap; } .terminal-line .prompt { color: var(--accent-acid-green); margin-right: 8px; font-weight: 700; } .terminal-line .cmd { color: #ffffff; } .terminal-line.output .prompt { color: rgba(255, 255, 255, 0.3); } .terminal-line.success .prompt { color: #28c840; } .terminal-line.success { color: #28c840; } .terminal-line.cursor { color: #c0c0d0; } .cursor-blink { animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ===== Samurai Hero Image (legacy) ===== */ .samurai-container { position: relative; width: 100%; max-width: 550px; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .samurai-image { width: 100%; filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.15)); position: relative; z-index: 2; } .samurai-glow { position: absolute; top: -30px; left: -30px; right: 30px; bottom: 30px; background: radial-gradient(ellipse at center, rgba(255, 0, 170, 0.1) 0%, transparent 70%); border-radius: var(--radius-xl); z-index: 1; } .samurai-decoration { position: absolute; width: 400px; height: 400px; border: 2px solid rgba(255, 0, 170, 0.1); border-radius: 50%; animation: spin 20s linear infinite; } .samurai-decoration::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #4a1d6e; border-radius: 50%; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== Features Section ===== */ #features .card { background: #f8f9fc; border: 1px solid #d1d5db; border-left: 4px solid var(--accent-acid-green); border-radius: var(--radius-lg); padding: var(--space-2xl); transition: all var(--transition-base); overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); } #features .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-acid-green), var(--accent-acid-green)); opacity: 0.2; transition: opacity var(--transition-base); } #features .card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); border-color: var(--accent-acid-green); } #features .card:hover::before { opacity: 1; } .card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent-acid-green), #b3e600) !important; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); font-size: 1.5rem; color: #1a1a2e; box-shadow: 0 2px 8px rgba(204, 255, 0, 0.3); } /* Editions section card */ .editions-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 249, 252, 0.6)); min-height: 400px; } [data-theme="dark"] .editions-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] #editions .edition-content span.text-primary { color: #ccff00 !important; } /* ===== Editions Section ===== */ #editions { display: flex !important; align-items: stretch !important; justify-content: center !important; } #editions .rounded-4 { border-radius: var(--radius-xl) !important; } .edition-content h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-md); line-height: 1.1; } .edition-bullets li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--border-light); } .edition-bullets li:last-child { border-bottom: none; } .edition-bullets li::before { content: '✓'; color: var(--accent-acid-green-text); font-weight: 700; font-size: 1.25rem; } .edition-image .card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-xl); border: 1px solid var(--border-light); min-height: 180px; max-width: 100%; } /* Editions row */ #editions .row { display: flex !important; align-items: stretch !important; } /* Force right column to flex column + center the card on main axis (vertical) */ #editions .row > .edition-image { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; } /* Edition cards: 3+3 wrap below xxl; one 1500px row on large desktops */ .comparison-cards-row { max-width: 960px; margin-left: auto; margin-right: auto; flex-wrap: wrap; } /* Match the section title width to the cards row */ #comparison .comparison-header { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } @media (min-width: 1400px) { #comparison, .pricing-plans { padding-left: 1.25rem; padding-right: 1.25rem; } #comparison #reaver-comparison.tab-pane { padding-left: 0.5rem; padding-right: 0.5rem; } .comparison-cards-row { max-width: 1500px; flex-wrap: nowrap; align-items: stretch; } .comparison-cards-row > .col { flex: 1 1 0; min-width: 0; max-width: none; width: auto; } #comparison .comparison-header { max-width: 1500px; } /* Slightly taller cards in the single desktop row */ .plan-cards .plan-tier .card { padding: 1.2rem 0.85rem 1.35rem !important; min-height: 27rem; } .plan-cards .plan-tier .card-body { padding: 1.5rem 0.05rem 0.2rem; } .plan-cards .plan-tier .list-unstyled { margin-bottom: 0.9rem !important; } .plan-cards .plan-tier .list-unstyled li { padding: 0.28rem 0; } .plan-cards .plan-tier .btn { padding: 0.45rem 0.55rem; } } /* Competitor comparison table */ #comparison .comparison-table { max-width: 1400px; margin-left: auto; margin-right: auto; } /* Make the inner table fill the wrapper */ #comparison .comparison-table .table { width: 100%; } /* Phone + tablet: each comparison row becomes a card. Matches both the current table (td/th) and older markup without extra classes. Desktop (≥992px) keeps the 5-column table. */ @media (max-width: 991.98px) { #comparison .comparison-table .table-responsive { overflow: visible !important; } #comparison .comparison-table thead { display: none !important; } #comparison .comparison-table table, #comparison .comparison-table tbody { display: block; width: 100%; } #comparison .comparison-table tbody tr { display: block; background: var(--card-bg) !important; border: 1px solid var(--border-medium); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 0.75rem; padding: 1rem 1rem 0.7rem; } #comparison .comparison-table tbody th, #comparison .comparison-table tbody td { display: block; width: 100%; max-width: none; border: 0 !important; box-shadow: none !important; } /* Feature name = first cell in the row */ #comparison .comparison-table tbody tr > :first-child { display: block; text-align: left !important; font-size: 1.05rem; font-weight: 700; color: var(--text-primary) !important; padding: 0 0 0.65rem !important; line-height: 1.35; background: transparent !important; } #comparison .comparison-table tbody td { --compare-label: 7.75rem; display: flow-root; text-align: left !important; padding: 0.45rem 0.65rem 0.45rem calc(var(--compare-label) + 0.75rem) !important; border-top: 1px solid var(--border-light) !important; font-size: 0.9375rem; line-height: 1.4; background: transparent !important; overflow-wrap: anywhere; } #comparison .comparison-table tbody td:nth-child(2)::before { content: "Reaver"; } #comparison .comparison-table tbody td:nth-child(3)::before { content: "BackupBuddy"; } #comparison .comparison-table tbody td:nth-child(4)::before { content: "VaultPress"; } #comparison .comparison-table tbody td:nth-child(5)::before { content: "UpdraftPlus"; } #comparison .comparison-table tbody td[data-label]::before { content: attr(data-label); } /* Label sits in the left gutter so wrapped value lines stay in the right column. Grid was putting icons/text on extra rows under "Reaver". */ #comparison .comparison-table tbody td::before { float: left; width: var(--compare-label); margin-left: calc(-1 * var(--compare-label) - 0.75rem); font-weight: 600; color: var(--text-secondary); overflow-wrap: normal; word-break: normal; } #comparison .comparison-table tbody tr > :first-child::before { content: none !important; float: none; width: auto; margin: 0; } #comparison .comparison-table tbody tr > :nth-child(2) { background: rgba(204, 255, 0, 0.18) !important; border-top-color: transparent !important; border-radius: 8px; margin: 0.05rem 0 0.2rem; font-weight: 600; } [data-theme="dark"] #comparison .comparison-table tbody tr, [data-theme="dark"] #comparison .comparison-table tbody tr:nth-child(odd), [data-theme="dark"] #comparison .comparison-table tbody tr:nth-child(even) { background: var(--card-bg) !important; border-color: var(--border-medium); } [data-theme="dark"] #comparison .comparison-table tbody tr > :first-child { color: var(--text-primary) !important; } [data-theme="dark"] #comparison .comparison-table tbody td { color: var(--text-secondary) !important; border-top-color: var(--border-medium) !important; } [data-theme="dark"] #comparison .comparison-table tbody tr > :nth-child(2) { background: rgba(204, 255, 0, 0.12) !important; color: #4ade80 !important; border-top-color: transparent !important; } } /* Toggle switch style for Reaver vs Competitors */ #comparison .comparison-toggle { display: block; width: fit-content; background-color: #f1f3f5; border-radius: 9999px; padding: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; margin: 0 auto; } #comparison .comparison-toggle .toggle-option { display: inline-flex; align-items: center; padding: 8px 24px; font-size: 0.95rem; font-weight: 600; border: none; background: transparent; border-radius: 9999px; color: #4b5563; transition: all 0.2s ease; cursor: pointer; position: relative; z-index: 1; } #comparison .comparison-toggle .toggle-option:hover:not(.active) { color: #1a1a2e; } #comparison .comparison-toggle .toggle-option.active { background: #ffffff; color: #1a1a2e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } #comparison .comparison-toggle .toggle-option i { font-size: 1rem; } /* Card styling */ .comparison-cards-row .card { transition: all var(--transition-slow); border: 2px solid transparent !important; position: relative; overflow: hidden; } .plan-cards .plan-tier .card { padding: 0.7rem 0.85rem !important; } .plan-cards .plan-tier .card-body { padding: 1.15rem 0.1rem 0; } .plan-cards .plan-tier .card h3 { font-size: 1.2rem !important; margin-bottom: 0.3rem !important; } .plan-cards .plan-tier .card .text-secondary { font-size: 1rem; margin-bottom: 0.15rem !important; } .plan-cards .plan-tier .card .text-muted.small { font-size: 0.875rem; margin-bottom: 0.65rem !important; line-height: 1.4; } .plan-cards .plan-tier .list-unstyled { margin-bottom: 0.75rem !important; } .plan-cards .plan-tier .list-unstyled li { padding: 0.22rem 0; margin-bottom: 0 !important; font-size: 0.9rem; line-height: 1.4; gap: 0.4rem !important; } .plan-cards .plan-tier .list-unstyled li .fs-5 { font-size: 1rem !important; } .plan-cards .plan-tier .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0.3rem 0.65rem; font-size: 0.78rem; line-height: 1.25; margin-bottom: 0.3rem !important; } .plan-cards .plan-tier .tier-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem !important; margin-left: 0.5rem !important; } .comparison-cards-row .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-acid-green), transparent); transform: scaleX(0); transition: transform var(--transition-base); } .comparison-cards-row .card:hover::before { transform: scaleX(1); } /* Free */ .plan-cards .plan-tier-free .card { background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%) !important; border: 2px solid var(--border-medium) !important; color: #1a1a2e; } .plan-cards .plan-tier-free .card:hover { border-color: var(--accent-acid-green) !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1) !important; } /* Solo + Starter (paid entry) */ .plan-cards .plan-tier-solo .card, .plan-cards .plan-tier-starter .card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%) !important; border: 2px solid var(--accent-acid-green) !important; } .plan-cards .plan-tier-solo .card:hover, .plan-cards .plan-tier-starter .card:hover { border-color: var(--accent-acid-green-hover) !important; box-shadow: 0 24px 48px rgba(204, 255, 0, 0.15) !important; } /* Pro (highlighted) */ .plan-cards .plan-tier-pro .card { background: linear-gradient(135deg, #ffffff 0%, #f0f8e6 100%) !important; border: 2px solid var(--accent-acid-green-hover) !important; box-shadow: 0 16px 40px rgba(204, 255, 0, 0.1); } .plan-cards .plan-tier-pro .card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 32px rgba(204, 255, 0, 0.18) !important; } /* Agency + Scale */ .plan-cards .plan-tier-agency .card, .plan-cards .plan-tier-scale .card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%) !important; border: 2px solid var(--border-medium) !important; color: #1a1a2e; } .plan-cards .plan-tier-agency .card:hover, .plan-cards .plan-tier-scale .card:hover { border-color: var(--accent-hot-pink) !important; box-shadow: 0 16px 32px rgba(255, 0, 170, 0.12) !important; } .plan-cards .plan-tier .card h3, .plan-cards .plan-tier .card p, .plan-cards .plan-tier .card li span { color: #1a1a2e !important; } /* Badge styling */ .plan-cards .position-absolute { z-index: 1; } .plan-cards .small.fw-bold.tier-badge { letter-spacing: 0.5px; text-transform: uppercase; } .plan-cards .plan-tier .tier-badge { color: #336600 !important; } /* Button enhancements */ #comparison .btn-success, .plan-cards .btn-success { background: var(--accent-acid-green) !important; border-color: var(--accent-acid-green) !important; color: #1a1a2e !important; font-weight: 600; box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3); } #comparison .btn-success:hover, .plan-cards .btn-success:hover { background: var(--accent-acid-green-hover) !important; border-color: var(--accent-acid-green-hover) !important; box-shadow: 0 6px 16px rgba(204, 255, 0, 0.4); transform: translateY(-2px); } #comparison .btn-outline-secondary { background: var(--accent-hot-pink) !important; color: #1a1a2e !important; border-color: var(--accent-hot-pink); font-weight: 600; box-shadow: 0 4px 12px rgba(255, 0, 170, 0.3); } #comparison .btn-outline-secondary:hover { background: var(--accent-hot-pink-hover) !important; border-color: var(--accent-hot-pink-hover) !important; color: #1a1a2e !important; box-shadow: 0 6px 16px rgba(255, 0, 170, 0.4); transform: translateY(-2px); } /* List item styling */ #comparison .list-unstyled li, .plan-cards .list-unstyled li { padding: 0.15rem 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.08); transition: all var(--transition-fast); } /* ===== Stats Section ===== */ #stats { padding-top: calc(88px + var(--space-3xl)); } .stat-item h2 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; color: var(--accent-acid-green); margin-bottom: var(--space-xs); } /* ===== CTA Section ===== */ .cta-section h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--space-md); } .cta-section p { color: var(--text-secondary); font-size: 1.125rem; margin-bottom: var(--space-2xl); } /* ===== Lightbox Modal ===== */ #lightboxModal .btn-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; } #lightboxImage { max-height: 100vh; max-width: 95vw; object-fit: contain; } /* ===== Footer ===== */ footer { border-top: 4px solid linear-gradient(90deg, var(--accent-acid-green), transparent, var(--accent-hot-pink)) !important; } .footer-socials .btn-outline-light { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .footer-socials .btn-outline-light:hover { background: var(--accent-acid-green) !important; color: var(--text-primary); transform: translateY(-3px); } /* Footer hover link effects */ .hover-link { transition: color 0.3s ease; } .hover-link:hover { color: var(--bs-primary); text-decoration: underline; } .hover-link[data-hover-color="#ccff00"]:hover { color: #ccff00 !important; } .hover-link[data-hover-color="#ff00aa"]:hover { color: #ff6ec7 !important; } /* Social icon hover effects */ .social-icon { transition: all 0.3s ease; border-color: #6c757d; } .social-icon:hover { transform: translateY(-3px); border-color: var(--bs-primary); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .social-icon:hover i { transform: scale(1.1); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.1); } /* ===== Animations ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out backwards; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } /* ===== Accessibility ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .samurai-container { animation: none; } } /* Acid green / hot pink as text fails on light surfaces (~1.1:1 / ~3.4:1). */ .brand-ink-green { color: var(--accent-acid-green-text); } .brand-ink-pink { color: var(--accent-hot-pink-text); } /* Bootstrap .text-secondary is #6c757d (~4.5:1 on white, fails on bg-light/gradient). */ .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } /* Footer is always dark, including light theme. */ .footer-main .text-secondary, .footer-main a.text-secondary, .footer-main .text-muted { color: var(--text-on-dark) !important; } /* ===== Focus States ===== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .nav-link:focus-visible, .btn:focus-visible, .navbar-toggler:focus-visible, .skip-link:focus { outline: 3px solid var(--accent-acid-green); outline-offset: 2px; } /* Skip target is focusable so keyboard focus moves with the skip link; do not draw a page-sized ring around
. */ #main-content:focus, #main-content:focus-visible { outline: none; } img[data-lightbox] { cursor: zoom-in; } img[data-lightbox]:focus-visible { outline: 3px solid var(--accent-acid-green); outline-offset: 4px; } /* ===== Print Styles ===== */ @media print { .navbar, .hero-image, footer { display: none; } body { background: white; } } /* Lightbox overlay */ .lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999 !important; display: none; align-items: center; justify-content: center; } .lightbox-overlay.active { display: flex; } .lightbox-overlay img { max-height: 90vh; max-width: 95vw; object-fit: contain; border-radius: 4px; } .lightbox-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.9); border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; z-index: 10000; } .lightbox-close:hover { background: white; } /* ============================================================================= MOBILE-FIRST RESPONSIVE STYLES (Bootstrap 5 Compatible) Mobile = <768px, Tablet = 769-991px, Desktop = ≥992px ============================================================================= */ /* ===== Mobile & Tablet Navigation ===== */ @media (max-width: 991.98px) { .navbar { padding: 0.55rem 0.75rem; } .navbar > .container { display: flex; flex-wrap: wrap; align-items: center; } .navbar-brand { padding-right: 0.5rem; } .navbar-brand img { max-height: 42px; width: auto; } .navbar-tools { order: 2; margin-left: auto; } .navbar-toggler { display: block; position: relative; z-index: 1055; border: 1px solid var(--border-medium); padding: 0.4rem 0.55rem; background: rgba(0, 0, 0, 0.04); } .navbar-toggler:hover, .navbar-toggler:focus-visible { background: rgba(0, 0, 0, 0.08); border-color: var(--accent-acid-green); } .navbar-collapse { order: 3; flex-basis: 100%; width: 100%; background: var(--card-bg); border: 1px solid var(--border-medium); border-radius: 12px; margin-top: 0.65rem; box-shadow: var(--shadow-lg); padding: 0.5rem 0.35rem 0.85rem; } .navbar-nav { flex-direction: column; } .nav-link { padding: 0.7rem 1rem !important; font-size: 1rem; } .navbar-auth { margin-top: 0.5rem; margin-left: 0 !important; padding: 0 0.65rem; flex-direction: column; align-items: stretch !important; } .navbar-auth .btn { display: flex; width: 100%; justify-content: center; text-align: center; /* ✅ Add accessibility-compliant sizing */ padding: 0.875rem 1.5rem; /* ~14px vertical, ~24px horizontal */ min-height: 48px; /* WCAG-recommended minimum */ font-size: 1.125rem; /* 18px - meets mobile accessibility */ } } /* (Tablet-specific navbar styles consolidated into the main (max-width: 991.98px) query above for consistency) */ /* ===== Mobile Hero Section ===== */ @media (max-width: 991.98px) { .hero-container { padding-top: 2rem; padding-bottom: 2rem; } .hero-content h1 { font-size: unset; line-height: 1; } .hero-content h1 .hero-brand-word { font-size: clamp(3.25rem, 16vw, 6rem); } .hero-subheadline { font-size: 1rem; flex-wrap: wrap; justify-content: center !important; text-align: center !important; } .hero-buttons { gap: 0.75rem; justify-content: center !important; flex-direction: column !important; width: 100%; } .hero-buttons .btn { min-width: auto; padding: 0.625rem 1.25rem; font-size: 0.95rem; width: 100%; text-align: center; } .samurai-image { max-width: 320px; margin: 0 auto; } .samurai-container { max-width: 100%; } } @media (max-width: 575.98px) { .hero-content h1 .hero-brand-word { font-size: clamp(3rem, 18vw, 6rem); } .hero-subheadline { font-size: 0.9375rem; } .samurai-image { max-width: 280px; } } /* ===== Mobile Features Section ===== */ @media (max-width: 767.98px) { #features { padding-left: 1rem; padding-right: 1rem; } #features h3 { font-size: 1.25rem !important; } #features h2 { font-size: 1.75rem !important; } #features .lead { font-size: 1rem; } #features .row { margin-left: -0.25rem; margin-right: -0.25rem; } #features .col { padding-left: 0.25rem; padding-right: 0.25rem; } #features .card { padding: 1.25rem; margin-bottom: 1rem; } .card-icon { width: 50px; height: 50px; font-size: 1.25rem; } } /* ===== Mobile Editions Section ===== */ @media (max-width: 991.98px) { #editions { flex-direction: column !important; align-items: stretch !important; } #editions .row { flex-direction: column !important; margin-left: -1rem; margin-right: -1rem; } #editions .col { padding-left: 1rem; padding-right: 1rem; margin-bottom: 2rem; } #editions .edition-content h2 { font-size: 2rem !important; } #editions .edition-content ul { max-width: 100%; } #editions .edition-image { min-height: auto; } #editions .edition-image img { max-width: 100%; height: auto; } } @media (max-width: 575.98px) { #editions .edition-content h2 { font-size: 1.5rem !important; } #editions .btn { padding: 0.625rem 1.25rem; font-size: 0.9375rem; } } /* ===== Mobile Comparison Section ===== */ @media (max-width: 767.98px) { #comparison .display-6 { font-size: 1.5rem !important; } #comparison .lead { font-size: 1rem; } /* Full width centered header and toggle */ #comparison .comparison-header { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; padding: 0 1rem; } /* Center and full-width the toggle on mobile (stacked) */ #comparison .comparison-toggle { width: 100%; max-width: 100%; margin: 0 auto 1rem !important; display: flex; flex-direction: column; gap: 0.5rem; } #comparison .toggle-option { padding: 0.6rem 1rem; font-size: 0.85rem; width: 100%; justify-content: center; } /* Stack cards; cap width so they stay card-shaped on large phones */ .comparison-cards-row { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; flex-wrap: wrap !important; } .comparison-cards-row > .col { flex: 0 0 100%; width: 100%; max-width: 22.5rem; margin-left: auto; margin-right: auto; padding: 0.5rem; } .plan-cards .plan-tier .card { padding: 1.15rem 1.1rem 1.25rem !important; } .plan-cards .plan-tier .card-body { padding: 1.4rem 0.15rem 0.2rem; } .plan-cards .plan-tier .card h3 { font-size: 1.375rem !important; margin-bottom: 0.4rem !important; } .plan-cards .plan-tier .card .text-secondary { font-size: 1.125rem; margin-bottom: 0.25rem !important; } .plan-cards .plan-tier .card .text-muted.small { font-size: 1rem; margin-bottom: 0.9rem !important; line-height: 1.45; } .plan-cards .plan-tier .list-unstyled { margin-bottom: 1rem !important; } .plan-cards .plan-tier .list-unstyled li { font-size: 1.0625rem; padding: 0.4rem 0; gap: 0.5rem !important; line-height: 1.45; } .plan-cards .plan-tier .list-unstyled li .fs-5 { font-size: 1.2rem !important; } .plan-cards .plan-tier .tier-badge { font-size: 0.75rem; padding: 0.25rem 0.6rem !important; } .plan-cards .plan-tier .btn { width: 100%; padding: 0.75rem 1.15rem !important; font-size: 1rem; line-height: 1.25; min-height: 44px; margin-bottom: 0.5rem !important; } /* Table */ #comparison .comparison-table { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; } } /* ===== Tablet responsive for comparison (stack cards nicely) ===== */ @media (min-width: 768px) and (max-width: 991.98px) { .comparison-cards-row { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; flex-wrap: wrap !important; } .comparison-cards-row > .col { flex: 0 0 50%; max-width: 50%; padding: 0.5rem; } .plan-cards .plan-tier .card h3 { font-size: 1.25rem !important; } .plan-cards .plan-tier .card .text-secondary { font-size: 1.0625rem; } .plan-cards .plan-tier .card .text-muted.small { font-size: 0.9375rem; line-height: 1.45; } .plan-cards .plan-tier .list-unstyled li { font-size: 1rem; padding: 0.32rem 0; line-height: 1.4; } .plan-cards .plan-tier .list-unstyled li .fs-5 { font-size: 1.125rem !important; } .plan-cards .plan-tier .btn { width: 100%; padding: 0.7rem 1rem !important; font-size: 1rem; line-height: 1.25; min-height: 44px; } #comparison .comparison-table { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; } /* Full width centered header and toggle on tablet */ #comparison .comparison-header { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; padding: 0 1rem; } /* Ensure toggle is centered on tablet inside the header */ #comparison .comparison-header .comparison-toggle { margin: 0.5rem auto !important; } } /* ===== Mobile Stats Section ===== */ @media (max-width: 767.98px) { #stats { text-align: center !important; } #stats .col h2 { font-size: 1.5rem !important; } #stats .col p { font-size: 0.875rem; } } /* ===== Mobile CTA Section ===== */ @media (max-width: 767.98px) { .cta-section h2 { font-size: 1.5rem !important; } .cta-section p { font-size: 1rem; } .cta-section .btn { padding: 0.75rem 2rem; font-size: 1rem; } } /* ===== Mobile Footer ===== */ @media (max-width: 767.98px) { footer { text-align: center !important; padding: 2rem 1rem; } .footer-socials .btn-outline-light { width: 44px; height: 44px; font-size: 1.125rem; } } /* ===== Touch-Friendly Mobile Interactions ===== */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets for mobile */ .btn, .nav-link, a { min-height: 44px; min-width: 44px; } .card { -webkit-tap-highlight-color: rgba(204, 255, 0, 0.3); } } /* ===== Additional Tablet (768-991px) and Mobile improvements ===== */ @media (max-width: 991.98px) { /* General container padding on tablet/mobile */ .container { padding-left: 1rem; padding-right: 1rem; } /* Editions two-column stacks */ #editions .row { flex-direction: column !important; } #editions .col-lg-6 { width: 100% !important; max-width: 100% !important; } /* Stats grid */ #stats .row { row-gap: 1.5rem; } /* CTA */ #cta .container { padding-left: 1.5rem; padding-right: 1.5rem; } } /* ===== Mobile specific refinements (<768px) ===== */ @media (max-width: 767.98px) { .navbar-nav .nav-item { margin-bottom: 0.25rem; } /* Make sure the comparison toggle buttons are usable */ #comparison .comparison-toggle { border-radius: 12px; } /* Cards in features - already handled by row-cols */ #features .card { padding: 1rem !important; } /* Footer stacks nicely */ footer .row { text-align: center; } footer .col-lg-4 { margin-bottom: 1.5rem; } } /* Make sure nav items are clickable */ .nav-item { cursor: pointer !important; }