/* ============================================================ Conversor de Letras — Design System & Glassmorphism Utilities Light mode is the DEFAULT. Dark mode uses .dark class on . ============================================================ */ /* ── CSS Custom Properties ── */ :root { /* Light mode (default) */ --bg-canvas: #f8fafc; --bg-surface: rgba(255, 255, 255, 0.90); --bg-surface-hover:rgba(255, 255, 255, 1); --border-color: rgba(15, 23, 42, 0.10); --text-primary: #0f172a; --text-secondary: #374151; --text-muted: #6b7280; --unicode-text: #111827; --accent-violet: #6d28d9; --accent-blue: #2563eb; --accent-cyan: #0891b2; --accent-pink: #db2777; --card-shadow: 0 4px 24px -4px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(109, 40, 217, 0.06); --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: rgba(15, 23, 42, 0.08); } html.dark { --bg-canvas: #0b0f1e; --bg-surface: rgba(255, 255, 255, 0.05); --bg-surface-hover:rgba(255, 255, 255, 0.09); --border-color: rgba(255, 255, 255, 0.10); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --unicode-text: #f1f5f9; --accent-violet: #8b5cf6; --accent-blue: #3b82f6; --accent-cyan: #22d3ee; --accent-pink: #ec4899; --card-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.65), 0 0 28px rgba(139, 92, 246, 0.18); --nav-bg: rgba(11, 15, 30, 0.90); --nav-border: rgba(255, 255, 255, 0.08); } /* ── Base ── */ body { background-color: var(--bg-canvas); color: var(--text-primary); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; } /* ── Unified Continuous Hero Shell (Shared Parent Wrapper from y=0) ── */ .hero-shell { position: relative; width: 100%; overflow: hidden; background: linear-gradient(135deg, #f1f5fd 0%, #faf5ff 45%, #f0f7ff 100%); transition: background 0.3s ease; } html.dark .hero-shell, .dark .hero-shell { background: linear-gradient(135deg, #070914 0%, #12072b 45%, #050c1e 100%) !important; } /* Subtle continuous grid overlay covering entire hero-shell */ .hero-grid-overlay { position: absolute; inset: 0; pointer-events: none; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px); } html.dark .hero-grid-overlay, .dark .hero-grid-overlay { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important; opacity: 0.35; } /* ── Seamless Transparent SaaS Header (Floats directly over Hero Canvas) ── */ .premium-header { background: transparent !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; position: sticky; top: 0; z-index: 50; width: 100%; } /* Header On Scroll Only */ .premium-header.header-scrolled { background: rgba(241, 245, 253, 0.75) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important; } html.dark .premium-header.header-scrolled, .dark .premium-header.header-scrolled { background: rgba(7, 9, 20, 0.80) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(99, 102, 241, 0.12) !important; } /* Brand Logo Text */ .brand-logo-text { color: #0f172a; } html.dark .brand-logo-text, .dark .brand-logo-text { color: #ffffff !important; } /* ── Floating Glass Navigation Pill ── */ .desktop-nav-center { display: none; } @media (min-width: 768px) { .desktop-nav-center { display: flex; justify-content: center; align-items: center; flex-grow: 1; } } .nav-pill-container { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.60); box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(109, 40, 217, 0.04); position: relative; } html.dark .nav-pill-container, .dark .nav-pill-container { background: rgba(20, 20, 40, 0.65) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.15) !important; } .nav-pill-item { font-size: 0.9375rem; /* 15px */ font-weight: 600; color: #334155; padding: 7px 16px; border-radius: 9999px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; text-decoration: none; white-space: nowrap; } .nav-pill-item:hover { color: #6d28d9; background: rgba(109, 40, 217, 0.08); } .nav-pill-item.active { color: #6d28d9; font-weight: 700; background: #ffffff; box-shadow: 0 2px 8px rgba(109, 40, 217, 0.15); } html.dark .nav-pill-item, .dark .nav-pill-item { color: #cbd5e1 !important; font-weight: 500; } html.dark .nav-pill-item:hover, .dark .nav-pill-item:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; } html.dark .nav-pill-item.active, .dark .nav-pill-item.active { color: #ffffff !important; background: rgba(139, 92, 246, 0.30) !important; border: 1px solid rgba(139, 92, 246, 0.50) !important; box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25) !important; } /* ── Guaranteed Cross-Browser Gradient Accent Headings (Zero Invisible Text) ── */ .text-gradient-accent { color: #7c3aed !important; /* Visible fallback in all browsers */ background-image: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #4f46e5 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } html.dark .text-gradient-accent, .dark .text-gradient-accent { color: #c084fc !important; /* Dark mode fallback */ background-image: linear-gradient(135deg, #c084fc 0%, #a78bfa 50%, #67e8f9 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } /* ── Secondary CTA Buttons (Zero invisible text on hover) ── */ .btn-hero-secondary { background-color: #ffffff !important; color: #1e293b !important; border: 1.5px solid #cbd5e1 !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; display: inline-flex; align-items: center; } .btn-hero-secondary:hover { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35) !important; } html.dark .btn-hero-secondary, .dark .btn-hero-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } html.dark .btn-hero-secondary:hover, .dark .btn-hero-secondary:hover { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #a78bfa !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5) !important; } /* ── Symbol Buttons Hover ── */ .symbol-btn:hover { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; } /* ── STRICT HIGH-CONTRAST FORM & SELECT STYLES (Zero invisible text) ── */ select, select option, optgroup { background-color: #ffffff !important; color: #0f172a !important; font-weight: 500; } html.dark select, html.dark select option, html.dark optgroup, .dark select, .dark select option, .dark optgroup { background-color: #0f172a !important; color: #f8fafc !important; } /* Select Dropdown & Textarea elements */ #gen-font-select, #gen-weight-select, #gen-text-input { background-color: #ffffff !important; color: #0f172a !important; border: 1.5px solid #cbd5e1 !important; } html.dark #gen-font-select, html.dark #gen-weight-select, html.dark #gen-text-input, .dark #gen-font-select, .dark #gen-weight-select, .dark #gen-text-input { background-color: #020617 !important; color: #f8fafc !important; border: 1.5px solid rgba(139, 92, 246, 0.4) !important; } /* Form labels high contrast */ .generator-label, label[for="gen-font-select"], label[for="gen-weight-select"], label[for="gen-text-input"] { color: #1e293b !important; font-weight: 700 !important; } html.dark .generator-label, html.dark label[for="gen-font-select"], html.dark label[for="gen-weight-select"], html.dark label[for="gen-text-input"], .dark .generator-label { color: #e2e8f0 !important; } /* ── Header Theme Toggle Button (44px x 44px circular) ── */ .header-theme-toggle, #theme-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(109, 40, 217, 0.18) !important; color: #d97706 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .header-theme-toggle:hover, #theme-toggle:hover { background: #ffffff !important; border-color: #7c3aed !important; transform: scale(1.05); box-shadow: 0 4px 14px rgba(109, 40, 217, 0.2); } html.dark .header-theme-toggle, html.dark #theme-toggle, .dark .header-theme-toggle, .dark #theme-toggle { background: rgba(255, 255, 255, 0.08) !important; border: 1.5px solid rgba(255, 255, 255, 0.15) !important; color: #fbbf24 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } html.dark .header-theme-toggle:hover, html.dark #theme-toggle:hover, .dark .header-theme-toggle:hover, .dark #theme-toggle:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: #a78bfa !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important; } .header-theme-toggle svg, #theme-toggle svg { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } /* ── Header CTA Button & Arrow Icon (16–20px, no overflow) ── */ .header-cta-btn, .btn-header-cta { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important; border-radius: 9999px !important; font-size: 0.8125rem !important; font-weight: 700 !important; color: #ffffff !important; padding: 0 20px !important; height: 42px !important; box-shadow: 0 4px 18px rgba(109, 40, 217, 0.40); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; white-space: nowrap !important; } .header-cta-btn:hover, .btn-header-cta:hover { transform: scale(1.03) translateY(-1px); box-shadow: 0 8px 26px rgba(109, 40, 217, 0.55); filter: brightness(1.08); } .header-cta-arrow, .btn-header-cta svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* Responsive Display for Nav Pill & Hamburger */ .desktop-nav-center { display: flex !important; align-items: center; justify-content: center; flex: 1; } .mobile-menu-btn { display: none !important; } @media (max-width: 1024px) { .desktop-nav-center { display: none !important; } .mobile-menu-btn { display: inline-flex !important; } } /* ── FAQ Accordion Styles ── */ .faq-item { border: 1.5px solid rgba(15, 23, 42, 0.12) !important; background-color: #ffffff !important; transition: all 0.2s ease; } .faq-item:hover { border-color: rgba(124, 58, 237, 0.40) !important; } html.dark .faq-item, .dark .faq-item { border: 1px solid rgba(255, 255, 255, 0.10) !important; background-color: rgba(15, 23, 42, 0.65) !important; } .faq-question-btn { color: #0f172a !important; } html.dark .faq-question-btn, .dark .faq-question-btn { color: #f8fafc !important; } .faq-answer-container { color: #334155 !important; font-size: 0.9375rem; line-height: 1.65; } html.dark .faq-answer-container, .dark .faq-answer-container { color: #cbd5e1 !important; } /* ── Glassmorphism Panel ── */ .glass-panel { background: var(--bg-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } /* ── Interactive 3D Card ── */ .glass-panel-interactive { background: var(--bg-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease; transform-style: preserve-3d; } .glass-panel-interactive:hover { transform: translateY(-5px) rotateX(1.5deg); border-color: rgba(109, 40, 217, 0.35); } html:not(.dark) .glass-panel-interactive:hover { box-shadow: 0 20px 40px -8px rgba(109, 40, 217, 0.14), 0 4px 16px rgba(15, 23, 42, 0.06); } html.dark .glass-panel-interactive:hover { box-shadow: 0 28px 55px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(139, 92, 246, 0.28); } /* ── Converter Result Card ── */ .result-card { background: #ffffff; border: 1.5px solid #e2e8f0; box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease; } html.dark .result-card, .dark .result-card { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(124, 58, 237, 0.15) !important; } .result-card:hover { transform: translateY(-3px); border-color: #7c3aed !important; box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.18) !important; } html.dark .result-card:hover, .dark .result-card:hover { box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.8), 0 0 24px rgba(139, 92, 246, 0.3) !important; } /* ── Unicode Result Text — ALWAYS 100% CONTRAST & READABLE ── */ .unicode-output-text { color: #0f172a !important; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 1.2rem; line-height: 1.6; font-weight: 500; } html.dark .unicode-output-text, .dark .unicode-output-text { color: #f8fafc !important; } /* ── Style name label ── */ .style-name-label { color: #6d28d9 !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } html.dark .style-name-label, .dark .style-name-label { color: #a78bfa !important; } /* ── Copy button in card ── */ .copy-btn { background: #f8fafc; border: 1.5px solid #cbd5e1; color: #6d28d9; font-weight: 700; transition: all 0.2s ease; } html.dark .copy-btn, .dark .copy-btn { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #e2e8f0 !important; } .copy-btn:hover { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); } /* ── Real Font Catalog Card ── */ .font-card { background: #ffffff !important; border: 1.5px solid #e2e8f0 !important; box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.07); } .font-card:hover { border-color: #7c3aed !important; box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.16) !important; transform: translateY(-3px); } html.dark .font-card, .dark .font-card { background: rgba(15, 23, 42, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6) !important; } html.dark .font-card:hover, .dark .font-card:hover { border-color: rgba(139, 92, 246, 0.5) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(124, 58, 237, 0.25) !important; } /* ── All Filter Chips & Category Pills (Unicode, Real Fonts, Símbolos) ── */ .category-chip, .symbol-chip, .font-category-pill { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; color: #334155 !important; font-weight: 600 !important; font-size: 0.8125rem !important; padding: 7px 16px !important; border-radius: 9999px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } .category-chip:hover, .symbol-chip:hover, .font-category-pill:hover { border-color: #7c3aed !important; color: #7c3aed !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(124, 58, 237, 0.15) !important; } /* ACTIVE STATE: High contrast vivid purple gradient with pure white text */ .category-chip.active, .symbol-chip.active, .font-category-pill.active { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.40) !important; transform: translateY(-1px) !important; } html.dark .category-chip, html.dark .symbol-chip, html.dark .font-category-pill, .dark .category-chip, .dark .symbol-chip, .dark .font-category-pill { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #cbd5e1 !important; } html.dark .category-chip:hover, html.dark .symbol-chip:hover, html.dark .font-category-pill:hover, .dark .category-chip:hover, .dark .symbol-chip:hover, .dark .font-category-pill:hover { border-color: #a78bfa !important; color: #ffffff !important; } html.dark .category-chip.active, html.dark .symbol-chip.active, html.dark .font-category-pill.active, .dark .category-chip.active, .dark .symbol-chip.active, .dark .font-category-pill.active { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; border-color: #7c3aed !important; color: #ffffff !important; } /* ── Platform Cards (use dark bg for contrast) ── */ .platform-card { background: #1e1b4b; border: 1px solid rgba(139, 92, 246, 0.20); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); color: #ffffff; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } .platform-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px -8px rgba(109, 40, 217, 0.40); } .platform-card-title { color: #ffffff; font-weight: 700; } .platform-card-desc { color: #c4b5fd; } /* ── How It Works Steps ── */ .step-card { background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } html:not(.dark) .step-card { background: #ffffff; border-color: #e5e7eb; } /* ── Form Inputs & Labels ── */ .form-input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html:not(.dark) .form-input { background: #ffffff; border-color: #d1d5db; color: #111827; } .form-input:focus { outline: none; border-color: var(--accent-violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); } .form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } /* ── FAQ Accordion ── */ .faq-item { background: var(--bg-surface); border: 1px solid var(--border-color); } html:not(.dark) .faq-item { background: #ffffff; border-color: #e5e7eb; } .faq-question { color: var(--text-primary); font-weight: 600; } .faq-answer { color: var(--text-secondary); } /* ── Ambient Glow Blobs ── */ .ambient-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; animation: floatOrb 14s ease-in-out infinite alternate; } html:not(.dark) .ambient-blob { opacity: 0.25; } html.dark .ambient-blob { opacity: 0.42; } .ambient-blob-1 { width: 480px; height: 480px; background: radial-gradient(circle, #7c3aed 0%, #4f46e5 100%); top: -120px; left: 15%; } .ambient-blob-2 { width: 460px; height: 460px; background: radial-gradient(circle, #06b6d4 0%, #2563eb 100%); top: 200px; right: 8%; animation-delay: -7s; } .ambient-blob-3 { width: 380px; height: 380px; background: radial-gradient(circle, #ec4899 0%, #7c3aed 100%); bottom: 15%; left: 25%; animation-delay: -3.5s; } @keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(25px, -35px) scale(1.06); } 100% { transform: translate(-20px, 25px) scale(0.96); } } /* ── Floating Unicode Decorators ── */ .floating-char { position: absolute; user-select: none; pointer-events: none; font-family: serif; font-weight: bold; filter: drop-shadow(0 12px 20px rgba(124, 58, 237, 0.35)); animation: floatChar 7s ease-in-out infinite alternate; } html:not(.dark) .floating-char { opacity: 0.10; } html.dark .floating-char { opacity: 0.20; } @keyframes floatChar { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(-16px) rotate(5deg); } } /* ── SVG failsafe ── */ svg { max-width: 100%; max-height: 100%; flex-shrink: 0; } /* ── Primary Button ── */ .btn-3d-primary { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); box-shadow: 0 8px 22px -4px rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255,255,255,0.30); color: #ffffff; font-weight: 700; transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-3d-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px -4px rgba(124, 58, 237, 0.65), inset 0 1px 0 rgba(255,255,255,0.40); } .btn-3d-primary:active { transform: translateY(1px) scale(0.98); } /* ── Secondary Button ── */ .btn-3d-secondary { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); transition: all 0.2s ease; } html:not(.dark) .btn-3d-secondary { background: #ffffff; border-color: #d1d5db; color: #374151; } .btn-3d-secondary:hover { border-color: var(--accent-violet); color: var(--accent-violet); transform: translateY(-1px); } /* ── Custom Scrollbar ── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-canvas); } ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.30); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.60); } /* ── Favorite heart animation ── */ @keyframes heartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } } .heart-active { color: #ec4899; animation: heartPulse 0.3s ease; } /* ── Toast ── */ .toast-notification { background: #1e293b; color: #f1f5f9; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 8px 24px rgba(0,0,0,0.40); } html:not(.dark) .toast-notification { background: #1e293b; color: #f1f5f9; } /* ── Section headings — always readable ── */ .section-heading { color: var(--text-primary); } .section-subheading { color: var(--text-secondary); } /* ── Font Explorer & Catalog Cards ── */ .font-card { background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } html:not(.dark) .font-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08); } .font-card:hover { transform: translateY(-3px); border-color: var(--accent-violet); box-shadow: 0 12px 30px -4px rgba(109, 40, 217, 0.15); } .font-category-pill, .symbol-chip { padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-secondary); transition: all 0.15s ease; } html:not(.dark) .font-category-pill, html:not(.dark) .symbol-chip { background: #f1f5f9; border-color: #cbd5e1; color: #334155; } .font-category-pill:hover, .symbol-chip:hover { border-color: var(--accent-violet); color: var(--accent-violet); } .font-category-pill.active, .symbol-chip.active { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); color: #ffffff !important; border-color: transparent; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); } /* ── Generator Swatches & Align Buttons ── */ .btn-align.active { background: #7c3aed !important; color: #ffffff !important; border-color: #7c3aed !important; } .color-swatch-text, .color-swatch-bg { transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .color-swatch-text:hover, .color-swatch-bg:hover { transform: scale(1.25); box-shadow: 0 0 8px rgba(255,255,255,0.4); } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { .ambient-blob, .floating-char, .glass-panel-interactive, .result-card, .font-card { animation: none !important; transition: none !important; transform: none !important; } } /* ============================================================ HIGH-CONTRAST ACCESSIBILITY ENGINE (FOOTER & BLOG) Ensures 100% WCAG AAA contrast in both Light & Dark modes. ============================================================ */ /* ── Universal High-Contrast Solid Dark Footer ── */ footer, .site-footer { background-color: #090d16 !important; color: #94a3b8 !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; } footer h3, footer h4, .site-footer h3, .site-footer h4, footer .font-bold.text-white, footer span.text-white { color: #ffffff !important; font-weight: 800 !important; letter-spacing: 0.05em; } footer p, .site-footer p { color: #94a3b8 !important; line-height: 1.6; } footer ul li a, .site-footer ul li a { color: #cbd5e1 !important; font-weight: 500; transition: color 0.15s ease, transform 0.15s ease; } footer ul li a:hover, .site-footer ul li a:hover { color: #a78bfa !important; } footer .border-b, footer .border-t { border-color: rgba(255, 255, 255, 0.10) !important; } footer .text-slate-500, footer .text-slate-400 { color: #94a3b8 !important; } footer .text-slate-500 a, footer .text-slate-400 a { color: #cbd5e1 !important; } footer .text-slate-500 a:hover, footer .text-slate-400 a:hover { color: #a78bfa !important; } /* ── FAQ Section Explicit Styling (Light & Dark) ── */ .faq-item { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html.dark .faq-item, .dark .faq-item { background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none; } .faq-item:hover { border-color: #8b5cf6 !important; } .faq-question-btn { color: #0f172a !important; background: transparent !important; } html.dark .faq-question-btn, .dark .faq-question-btn { color: #ffffff !important; } .faq-answer-container { color: #334155 !important; border-top: 1px solid #f1f5f9 !important; line-height: 1.7 !important; } html.dark .faq-answer-container, .dark .faq-answer-container { color: #cbd5e1 !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ── High-Contrast Blog & Article Typography (Scoped) ── */ html:not(.dark) .blog-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important; } html:not(.dark) .blog-card h2, html:not(.dark) .blog-card h3 { color: #0f172a !important; font-weight: 800 !important; } html:not(.dark) .blog-card p { color: #475569 !important; line-height: 1.6 !important; } html:not(.dark) .prose-slate { color: #334155 !important; } html:not(.dark) .prose-slate h1, html:not(.dark) .prose-slate h2, html:not(.dark) .prose-slate h3, html:not(.dark) .prose-slate strong { color: #0f172a !important; } html:not(.dark) .prose-slate p, html:not(.dark) .prose-slate li { color: #334155 !important; line-height: 1.75 !important; } html:not(.dark) .prose-slate a { color: #6d28d9 !important; font-weight: 700 !important; }