/* ========================================================================== Tap Hold Maker — Custom Component Overrides & Micro-Animations ========================================================================== */ /* Hero Gradient Overlay */ .hero-bg-gradient { background: radial-gradient(ellipse at top right, rgba(219, 234, 254, 0.65), transparent 70%); pointer-events: none; } /* Tool Tab Button Active State */ .tool-tab.active { background-color: #ffffff !important; color: #1d4ed8 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tool-tab { color: #475569; } .tool-tab:hover:not(.active) { color: #0f172a; background-color: rgba(255, 255, 255, 0.5); } /* Hero Visual Demo Card Placeholders */ .light-demo-bg { background-color: #ffffff; height: 220px; border: 1px dashed #cbd5e1; } .dark-demo-bg { background-color: #0f172a; height: 240px; border: 1px dashed #3b82f6; } /* Buttons */ .btn-primary { background-color: #2563eb !important; color: #ffffff !important; transition: all 0.15s ease; } .btn-primary:hover { background-color: #1d4ed8 !important; transform: translateY(-1px); } .btn-secondary { background-color: #ffffff !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; transition: all 0.15s ease; } .btn-secondary:hover { background-color: #f8fafc !important; border-color: #94a3b8 !important; } /* Tool Buttons in Sketch Mode */ .tool-btn.active { background-color: #2563eb !important; color: #ffffff !important; } /* Interactive Tap Stage */ .tap-stage { transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease; } .tap-stage:active, .tap-stage.holding { background-color: #000000 !important; transform: scale(0.99); } .tap-stage.holding #tap-overlay { opacity: 0.25; } /* Range Input Accent */ input[type="range"] { accent-color: #2563eb; height: 6px; background: #e2e8f0; border-radius: 3px; cursor: pointer; } /* Custom Toggle Switch */ input[type="checkbox"]:checked + .toggle-slider { background-color: #2563eb !important; } .toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: transform 0.2s ease; border-radius: 50%; } input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(20px); } /* FAQ Chevron Rotation */ .rotate-180 { transform: rotate(180deg); } /* Transparent Checkerboard Background Pattern */ .checkerboard-bg { background-color: #f8fafc; background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } /* Pulse animation for live badge */ .live-pulse { animation: pulseGlow 2s infinite ease-in-out; } @keyframes pulseGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } /* ========================================================================== Dark Mode High-Contrast Support (Applied when .dark is present on ) ========================================================================== */ html.dark { color-scheme: dark; } html.dark body { background-color: #070a12 !important; color: #f8fafc !important; } html.dark header { background-color: rgba(15, 23, 42, 0.92) !important; border-color: #1e293b !important; } html.dark .brand-logo span, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark nav a, html.dark label, html.dark strong, html.dark legend { color: #ffffff !important; } html.dark p, html.dark figcaption { color: #cbd5e1 !important; } html.dark .card, html.dark #menu-theme, html.dark #menu-lang, html.dark .feature-card, html.dark .step-card, html.dark .faq-item, html.dark .rounded-2xl.border-slate-200 { background-color: #0f172a !important; border-color: #1e293b !important; color: #f8fafc !important; } html.dark #tool, html.dark #features, html.dark #how-it-works, html.dark #what-is, html.dark #faq, html.dark .hero-section { background-color: #070a12 !important; } html.dark .bg-slate-50, html.dark .bg-slate-50\/50, html.dark .drop-zone { background-color: #131d31 !important; border-color: #1e293b !important; } html.dark .drop-zone:hover { background-color: #1e3a8a/40 !important; border-color: #3b82f6 !important; } /* 1. White containers, pills, and backgrounds inside dark mode */ html.dark .bg-white:not(.card):not(.card-before):not(.card-after):not(.tap-stage):not(.modal-content):not(#menu-theme):not(#menu-lang):not(.feature-card):not(.faq-item):not(.step-card) { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } /* 2. Hero Badges in Dark Mode */ html.dark .hero-badge .bg-brand-50 { background-color: rgba(30, 58, 138, 0.5) !important; border-color: #2563eb !important; } html.dark .hero-badge .bg-brand-50 span, html.dark .hero-badge .bg-brand-50 svg { color: #93c5fd !important; } html.dark .hero-badge .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.5) !important; border-color: #059669 !important; } html.dark .hero-badge .bg-emerald-50 span, html.dark .hero-badge .bg-emerald-50 svg { color: #6ee7b7 !important; } /* 3. Warning Callout (Posting Advice) in Dark Mode */ html.dark .warning-callout { background-color: rgba(30, 58, 138, 0.45) !important; border-color: #2563eb !important; color: #f8fafc !important; } html.dark .warning-callout div, html.dark .warning-callout strong, html.dark .warning-callout span { color: #f8fafc !important; } html.dark .warning-callout svg { color: #60a5fa !important; } /* 4. Brush Mode & Action Buttons in Dark Mode */ html.dark .btn-mode.active { background-color: #2563eb !important; border-color: #3b82f6 !important; color: #ffffff !important; } html.dark .btn-mode:not(.active) { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark .btn-mode:not(.active):hover { background-color: #334155 !important; color: #ffffff !important; } html.dark #btn-reset-hidden, html.dark #btn-undo { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } html.dark #btn-reset-hidden:hover, html.dark #btn-undo:hover { background-color: #334155 !important; color: #ffffff !important; } /* 5. Mask Opacity Pill in Dark Mode Header */ html.dark #val-mask-opacity, html.dark #brush-size-val, html.dark #val-brightness, html.dark #val-auto-lineart { color: #60a5fa !important; } /* 6. Step Cards & Icons in Dark Mode */ html.dark .step-icon, html.dark .feature-icon, html.dark .drop-icon { background-color: #1e293b !important; color: #60a5fa !important; } /* 7. Select & Accordion FAQ in Dark Mode */ html.dark select { background-color: #1e293b !important; border-color: #475569 !important; color: #ffffff !important; } html.dark .faq-question { color: #f8fafc !important; } html.dark .faq-answer { color: #cbd5e1 !important; } html.dark .opt-theme:hover, html.dark .opt-lang:hover { background-color: #1e293b !important; } html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: #ffffff !important; } html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400 { color: #cbd5e1 !important; } html.dark .modal-content { background-color: #0f172a !important; border-color: #1e293b !important; color: #f8fafc !important; }