/** * AILYDIAN Theme System — Dark (default) + Light * ------------------------------------------------ * Dark theme is the HARD DEFAULT. * Light theme is activated by [data-theme="light"] on . * * Variable naming follows the existing site convention: * --bg-0, --bg-1, --bg-2, --bg-3 * --txt-1, --txt-2, --txt-3 * --accent-1, --accent-2 * --border, --card-bg, --card-border, --shadow, --input-bg * * Additional legacy aliases kept for backwards compatibility with * existing HTML that references --bg-primary, --text-primary, etc. */ /* ============================================================ NO-TRANSITION CLASS — prevents FOUC on first paint Applied by theme-init.js, removed after first rAF cycle ============================================================ */ .no-theme-transition *, .no-theme-transition *::before, .no-theme-transition *::after { transition: none !important; } /* ============================================================ DARK THEME (DEFAULT) :root covers pages that never set data-theme, plus explicit dark ============================================================ */ :root, [data-theme='dark'] { /* Core backgrounds */ --bg-0: #0a0a12; --bg-1: #12121e; --bg-2: #1a1a2e; --bg-3: #22223a; /* Text */ --txt-1: #ffffff; --txt-2: rgba(255, 255, 255, 0.65); --txt-3: rgba(255, 255, 255, 0.4); /* Brand accents — kept identical in both themes */ --accent-1: #c41e3a; --accent-2: #ff6b6b; /* Structural */ --border: rgba(255, 255, 255, 0.1); --card-bg: rgba(255, 255, 255, 0.04); --card-border: rgba(255, 255, 255, 0.08); --shadow: rgba(0, 0, 0, 0.3); --input-bg: rgba(255, 255, 255, 0.06); /* Glass surfaces */ --glass: rgba(0, 0, 0, 0.6); --glass-2: rgba(255, 255, 255, 0.04); --stroke: rgba(255, 255, 255, 0.1); /* Legacy alias map — used by theme-manager.js and older pages */ --bg-primary: #0a0a12; --bg-secondary: #12121e; --bg-tertiary: #1a1a2e; --bg-hover: #22223a; --bg-modal: rgba(18, 18, 30, 0.98); --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(255, 255, 255, 0.4); --text-muted: rgba(255, 255, 255, 0.3); --text-inverse: #1a1a2e; --border-color: rgba(255, 255, 255, 0.1); --border-medium: rgba(255, 255, 255, 0.15); --border-dark: rgba(255, 255, 255, 0.2); --accent-primary: #c41e3a; --accent-hover: #a01830; --accent-secondary: #ff6b6b; --accent-secondary-hover: #ff4d4d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7); --gradient-header: linear-gradient(180deg, #12121e 0%, #1a1a2e 100%); --gradient-primary: linear-gradient(135deg, #c41e3a 0%, #ff6b6b 100%); --gradient-subtle: linear-gradient( 135deg, rgba(196, 30, 58, 0.08) 0%, rgba(255, 107, 107, 0.08) 100% ); /* Color scheme hint for browser chrome */ color-scheme: dark; } /* ============================================================ LIGHT THEME Activated by [data-theme="light"] on ============================================================ */ [data-theme='light'] { /* Core backgrounds */ --bg-0: #ffffff; --bg-1: #f8f9fa; --bg-2: #f0f1f3; --bg-3: #e8e9ec; /* Text */ --txt-1: #1a1a2e; --txt-2: rgba(26, 26, 46, 0.65); --txt-3: rgba(26, 26, 46, 0.4); /* Brand accents — same hue, slightly deeper for contrast on light */ --accent-1: #c41e3a; --accent-2: #a01830; /* Structural */ --border: rgba(0, 0, 0, 0.1); --card-bg: rgba(0, 0, 0, 0.02); --card-border: rgba(0, 0, 0, 0.08); --shadow: rgba(0, 0, 0, 0.08); --input-bg: rgba(0, 0, 0, 0.04); /* Glass surfaces — inverted for light */ --glass: rgba(255, 255, 255, 0.9); --glass-2: rgba(0, 0, 0, 0.02); --stroke: rgba(0, 0, 0, 0.08); /* Legacy alias map */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #f0f1f3; --bg-hover: #e8e9ec; --bg-modal: rgba(255, 255, 255, 0.98); --bg-overlay: rgba(0, 0, 0, 0.4); --text-primary: #1a1a2e; --text-secondary: rgba(26, 26, 46, 0.65); --text-tertiary: rgba(26, 26, 46, 0.4); --text-muted: rgba(26, 26, 46, 0.3); --text-inverse: #ffffff; --border-color: rgba(0, 0, 0, 0.1); --border-medium: rgba(0, 0, 0, 0.15); --border-dark: rgba(0, 0, 0, 0.2); --accent-primary: #c41e3a; --accent-hover: #8b0000; --accent-secondary: #a01830; --accent-secondary-hover: #c41e3a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12); --gradient-header: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); --gradient-primary: linear-gradient(135deg, #c41e3a 0%, #a01830 100%); --gradient-subtle: linear-gradient( 135deg, rgba(196, 30, 58, 0.06) 0%, rgba(160, 24, 48, 0.06) 100% ); color-scheme: light; } /* ============================================================ SMOOTH TRANSITIONS — ONLY on interactive toggling The .no-theme-transition class (set by theme-init.js) suppresses these on page load to prevent flash. ============================================================ */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Elements with their own complex animations must not be overridden. */ canvas, video, iframe, [class*='animation-'], [class*='animate-'], .loading-spinner, .hero-typewriter, .hero-cursor, .particle { transition: none !important; } /* ============================================================ LIGHT THEME — COMPONENT OVERRIDES These only activate when [data-theme="light"] is set. They handle elements that use hardcoded dark rgba() values inline or in other CSS files that cannot be easily overridden via variables alone. ============================================================ */ /* ----- Header ----- */ [data-theme='light'] .header-2025 { background: rgba(255, 255, 255, 0.88) !important; border-bottom-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; } [data-theme='light'] .brand { color: #1a1a2e !important; } [data-theme='light'] .nav-link { color: #1a1a2e !important; } [data-theme='light'] .nav-link:hover, [data-theme='light'] .nav-link:focus-visible { color: #1a1a2e !important; background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* ----- CTA Buttons ----- */ [data-theme='light'] .cta { background: linear-gradient(135deg, #1a1a2e, #22223a) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(26, 26, 46, 0.25) !important; } [data-theme='light'] .cta:hover { box-shadow: 0 8px 28px rgba(26, 26, 46, 0.4) !important; background: linear-gradient(135deg, #22223a, #2e2e50) !important; } [data-theme='light'] .btn-outline { border-color: rgba(26, 26, 46, 0.5) !important; color: #1a1a2e !important; } [data-theme='light'] .btn-outline:hover { background: rgba(26, 26, 46, 1) !important; color: #ffffff !important; } /* ----- Mega Dropdown ----- */ [data-theme='light'] .mega { background: rgba(255, 255, 255, 0.96) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } [data-theme='light'] .mega-col { background: rgba(0, 0, 0, 0.025) !important; border-color: rgba(0, 0, 0, 0.07) !important; } [data-theme='light'] .mega-kicker { color: rgba(26, 26, 46, 0.55) !important; } [data-theme='light'] .mega-item { color: rgba(26, 26, 46, 0.8) !important; } [data-theme='light'] .mega-item:hover { color: #1a1a2e !important; background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* ----- Search Input ----- */ [data-theme='light'] #live-search-input { border-color: rgba(0, 0, 0, 0.15) !important; background: rgba(0, 0, 0, 0.05) !important; color: #1a1a2e !important; } [data-theme='light'] #live-search-input::placeholder { color: rgba(26, 26, 46, 0.5) !important; } /* ----- Left Sidebar Panel (Globe stats) ----- */ [data-theme='light'] #cyber-sidebar { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; } /* Sidebar text items that use hardcoded #fff */ [data-theme='light'] #cyber-sidebar span[style*='color: #fff'], [data-theme='light'] #cyber-sidebar span[style*='color:#fff'] { color: #1a1a2e !important; } /* ----- Bottom Category Bar ----- */ [data-theme='light'] #cyber-bottom-bar { background: rgba(255, 255, 255, 0.88) !important; border-top-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] .cyber-cat div[style*='color: #ffffff'], [data-theme='light'] .cyber-cat div[style*='color:#ffffff'], [data-theme='light'] .cyber-cat div[style*='color: #fff'], [data-theme='light'] .cyber-cat div[style*='color:#fff'] { color: #1a1a2e !important; } /* ----- Hero Section (overlays dark globe canvas) ----- */ [data-theme='light'] .hero { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] .hero-badge { background: rgba(196, 30, 58, 0.08) !important; border-color: rgba(196, 30, 58, 0.2) !important; color: #c41e3a !important; } [data-theme='light'] .hero-title { color: #1a1a2e !important; text-shadow: none !important; } [data-theme='light'] .hero-typewriter { color: #c41e3a !important; text-shadow: none !important; } [data-theme='light'] .hero-cursor { background: #c41e3a !important; } [data-theme='light'] .hero-description { color: rgba(26, 26, 46, 0.7) !important; text-shadow: none !important; } [data-theme='light'] .hero-cta-primary { background: linear-gradient(135deg, #c41e3a, #a01830) !important; color: #ffffff !important; border-color: transparent !important; } [data-theme='light'] .hero-cta-ghost { background: transparent !important; color: #1a1a2e !important; border-color: rgba(26, 26, 46, 0.25) !important; } [data-theme='light'] .hero-cta-ghost:hover { background: rgba(26, 26, 46, 0.06) !important; color: #1a1a2e !important; } [data-theme='light'] .hero-stat-value { color: #1a1a2e !important; } [data-theme='light'] .hero-stat-label { color: rgba(26, 26, 46, 0.55) !important; } /* ----- Globe Sidebar (left panel, overlays dark canvas) ----- */ [data-theme='light'] #cyber-sidebar { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] #cyber-sidebar * { color: #1a1a2e !important; } [data-theme='light'] #cyber-sidebar span[style*='color:'], [data-theme='light'] #cyber-sidebar div[style*='color:'] { color: #1a1a2e !important; } [data-theme='light'] #cyber-sidebar span[style*='color: #c41e3a'], [data-theme='light'] #cyber-sidebar span[style*='color:#c41e3a'], [data-theme='light'] #cyber-sidebar span[style*='color: #ff'], [data-theme='light'] #cyber-sidebar span[style*='color:#ff'] { color: #c41e3a !important; } /* ----- Bottom Bar (overlays dark canvas) ----- */ [data-theme='light'] #cyber-bottom-bar { background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-top-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] #cyber-bottom-bar * { color: #1a1a2e !important; } [data-theme='light'] #cyber-bottom-bar span[style*='color: #c41e3a'], [data-theme='light'] #cyber-bottom-bar span[style*='color:#c41e3a'], [data-theme='light'] #cyber-bottom-bar span[style*='color: #ff'], [data-theme='light'] #cyber-bottom-bar span[style*='color:#ff'] { color: #c41e3a !important; } [data-theme='light'] .cyber-cat div[style*='color:'] { color: #1a1a2e !important; } /* ----- Sidebar Stats (mobile bottom position) ----- */ [data-theme='light'] .sidebar-stats { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme='light'] .sidebar-stats * { color: #1a1a2e !important; } /* ----- Body background for light theme ----- */ [data-theme='light'] body { background: #f5f5f7 !important; } /* ----- Quick Links Sidebar ----- */ [data-theme='light'] .sidebar-stats .stat-item { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* ----- Health Badge ----- */ [data-theme='light'] .health-badge { background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #1a1a2e !important; } /* ----- Hero mobile stacked ----- */ @media (max-width: 768px) { [data-theme='light'] .hero { border-left: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; } } /* ----- .navbar Header (used by about, status, developers, etc.) ----- */ [data-theme='light'] .navbar { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] .navbar a, [data-theme='light'] .navbar .nav-link, [data-theme='light'] .navbar .brand, [data-theme='light'] .navbar .logo-text { color: #1a1a2e !important; } [data-theme='light'] .navbar .nav-link:hover { background: rgba(0, 0, 0, 0.06) !important; } [data-theme='light'] .navbar .cta, [data-theme='light'] .navbar .btn-primary { background: linear-gradient(135deg, #c41e3a, #a01830) !important; color: #ffffff !important; } /* ----- Page body/main for all pages ----- */ [data-theme='light'] body { background: #f5f5f7 !important; color: #1a1a2e !important; } /* Override hardcoded :root dark variables via cascade */ [data-theme='light'] { --bg-0: #ffffff; --bg-1: #f8f9fa; --bg-2: #f0f1f3; --bg-3: #e8e9ec; --txt-1: #1a1a2e; --txt-2: rgba(26, 26, 46, 0.65); --txt-3: rgba(26, 26, 46, 0.4); --glass: rgba(255, 255, 255, 0.9); --glass-2: rgba(0, 0, 0, 0.02); --stroke: rgba(0, 0, 0, 0.08); --border: rgba(0, 0, 0, 0.1); --card-bg: rgba(0, 0, 0, 0.02); --card-border: rgba(0, 0, 0, 0.08); --shadow: rgba(0, 0, 0, 0.08); --input-bg: rgba(0, 0, 0, 0.04); } /* ----- Generic card/section overrides ----- */ [data-theme='light'] .card, [data-theme='light'] .feature-card, [data-theme='light'] .service-card, [data-theme='light'] .stat-card, [data-theme='light'] .metric-card, [data-theme='light'] .pricing-card, [data-theme='light'] .team-card, [data-theme='light'] [class*='-card'] { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; color: #1a1a2e !important; } [data-theme='light'] .card h2, [data-theme='light'] .card h3, [data-theme='light'] .card h4, [data-theme='light'] [class*='-card'] h2, [data-theme='light'] [class*='-card'] h3, [data-theme='light'] [class*='-card'] h4 { color: #1a1a2e !important; } [data-theme='light'] .card p, [data-theme='light'] [class*='-card'] p { color: rgba(26, 26, 46, 0.7) !important; } /* ----- Section backgrounds (exclude .hero which needs its own bg) ----- */ [data-theme='light'] section:not(.hero), [data-theme='light'] .section:not(.hero) { background-color: transparent !important; } [data-theme='light'] section[style*='background']:not(.hero), [data-theme='light'] div[style*='background: #0'], [data-theme='light'] div[style*='background:#0'], [data-theme='light'] div[style*='background: rgb(10'], [data-theme='light'] div[style*='background: linear-gradient'] { background: #f5f5f7 !important; } /* ----- Headings ----- */ [data-theme='light'] h1, [data-theme='light'] h2, [data-theme='light'] h3, [data-theme='light'] h4 { color: #1a1a2e !important; } /* ----- Paragraphs & text ----- */ [data-theme='light'] p, [data-theme='light'] li, [data-theme='light'] span, [data-theme='light'] label { color: rgba(26, 26, 46, 0.8); } /* Keep accent-colored text intact */ [data-theme='light'] [style*='color: #c41e3a'], [data-theme='light'] [style*='color:#c41e3a'], [data-theme='light'] .accent, [data-theme='light'] .text-accent { color: #c41e3a !important; } /* ----- Inputs ----- */ [data-theme='light'] input, [data-theme='light'] textarea, [data-theme='light'] select { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a2e !important; } [data-theme='light'] input::placeholder, [data-theme='light'] textarea::placeholder { color: rgba(26, 26, 46, 0.4) !important; } /* ----- Tables ----- */ [data-theme='light'] table, [data-theme='light'] th, [data-theme='light'] td { border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme='light'] th { background: rgba(0, 0, 0, 0.04) !important; color: #1a1a2e !important; } [data-theme='light'] td { color: rgba(26, 26, 46, 0.8) !important; } /* ----- Code blocks ----- */ [data-theme='light'] pre, [data-theme='light'] code { background: #f0f1f3 !important; color: #1a1a2e !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* ----- Footer ----- */ [data-theme='light'] footer, [data-theme='light'] .footer, [data-theme='light'] [class*='footer'] { background: #ebeced !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1a1a2e !important; } [data-theme='light'] footer a, [data-theme='light'] .footer a, [data-theme='light'] [class*='footer'] a { color: rgba(26, 26, 46, 0.7) !important; } [data-theme='light'] footer a:hover, [data-theme='light'] .footer a:hover { color: #c41e3a !important; } /* ----- Mobile Navigation Overlay ----- */ [data-theme='light'] .mobile-nav-overlay { background: rgba(255, 255, 255, 0.98) !important; } [data-theme='light'] .mobile-nav-links a { color: #1a1a2e !important; } /* ----- Chat page specific ----- */ [data-theme='light'] .chat-header { background: rgba(255, 255, 255, 0.92) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme='light'] .chat-sidebar, [data-theme='light'] .sidebar { background: #f8f9fa !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme='light'] .chat-input, [data-theme='light'] .message-input { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1a1a2e !important; } [data-theme='light'] .message-bubble, [data-theme='light'] .chat-message { background: rgba(0, 0, 0, 0.03) !important; color: #1a1a2e !important; } [data-theme='light'] .chat-area, [data-theme='light'] .messages-container { background: #ffffff !important; } /* ----- Scrollbars ----- */ [data-theme='light'] ::-webkit-scrollbar-track { background: #f0f1f3; } [data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(196, 30, 58, 0.5); } [data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: #c41e3a; } /* ============================================================ THEME TOGGLE BUTTON — Legacy (.theme-btn) ============================================================ */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #ffffff; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; position: relative; overflow: hidden; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .theme-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 2px 12px rgba(255, 255, 255, 0.12); } .theme-btn:active { transform: scale(0.9); } [data-theme='light'] .theme-btn { border-color: rgba(26, 26, 46, 0.2); background: rgba(0, 0, 0, 0.05); color: #1a1a2e; } [data-theme='light'] .theme-btn:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(26, 26, 46, 0.35); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .theme-btn-icon--sun, .theme-btn-icon--moon { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; pointer-events: none; } .theme-btn::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1a1a2e; color: #ffffff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 9999; } [data-theme='light'] .theme-btn::after { background: #1a1a2e; color: #ffffff; } .theme-btn:hover::after { opacity: 1; } /* ============================================================ THEME TOGGLE — NEO (.theme-neo) SVG morphing sun/moon with smooth CSS transitions ============================================================ */ .theme-neo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); cursor: pointer; padding: 0; flex-shrink: 0; position: relative; overflow: visible; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease; } .theme-neo:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 20px rgba(255, 200, 50, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2); } .theme-neo:active { transform: scale(0.88); } /* SVG container */ .theme-neo svg { width: 20px; height: 20px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Sun rays — visible in dark mode (show sun to switch to light) */ .theme-neo .neo-rays { transform-origin: center; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } /* Sun circle */ .theme-neo .neo-sun { fill: #fbbf24; transition: fill 0.35s ease, r 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Moon crescent mask */ .theme-neo .neo-moon-mask { transition: cx 0.5s cubic-bezier(0.4, 0, 0.2, 1), cy 0.5s cubic-bezier(0.4, 0, 0.2, 1), r 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* --- LIGHT MODE (showing moon icon to switch back to dark) --- */ .theme-neo--light svg { transform: rotate(45deg); } .theme-neo--light .neo-rays { opacity: 0; transform: rotate(90deg) scale(0); } .theme-neo--light .neo-sun { fill: #94a3b8; } /* Light theme button container */ [data-theme='light'] .theme-neo { border-color: rgba(26, 26, 46, 0.15); background: rgba(26, 26, 46, 0.05); } [data-theme='light'] .theme-neo:hover { background: rgba(26, 26, 46, 0.1); border-color: rgba(26, 26, 46, 0.3); box-shadow: 0 0 20px rgba(100, 120, 200, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); } /* Tooltip */ .theme-neo::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1a1a2e; color: #ffffff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 9999; } .theme-neo:hover::after { opacity: 1; } /* ============================================================ MOBILE HEADER FIX — prevent stacking/overflow ============================================================ */ @media (max-width: 768px) { /* Hide "Giriş" button on mobile to prevent cramping */ .nav-right .btn-outline { display: none !important; } /* Ensure theme toggle is properly sized */ .theme-neo, .theme-btn { width: 34px; height: 34px; } .theme-neo svg { width: 18px; height: 18px; } } @media (max-width: 480px) { .theme-neo, .theme-btn { width: 32px; height: 32px; } .theme-neo svg { width: 16px; height: 16px; } } /* ============================================================ MOBILE HERO — Globe typewriter text responsive ============================================================ */ @media (max-width: 768px) { .hero { border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Remove the framed/bordered appearance on mobile */ .hero::before { display: none !important; } .hero-typewriter-line { height: auto !important; min-height: 1.8rem; } .hero-typewriter { font-size: 1.05rem !important; line-height: 1.4 !important; word-break: break-word; } .hero-title { font-size: 1.6rem !important; line-height: 1.2 !important; } .hero-description { font-size: 0.9rem !important; line-height: 1.5 !important; } .hero-ctas { flex-wrap: wrap !important; gap: 0.75rem !important; } .hero-cta-primary, .hero-cta-ghost { font-size: 14px !important; padding: 0.65rem 1.2rem !important; } .hero-stats { flex-wrap: wrap !important; gap: 1rem !important; } } @media (max-width: 480px) { .hero-title { font-size: 1.35rem !important; } .hero-typewriter { font-size: 0.95rem !important; } .hero-badge { font-size: 0.7rem !important; padding: 0.3rem 0.75rem !important; } .hero-stats { gap: 0.75rem !important; } .hero-stat-value { font-size: 1.2rem !important; } .hero-stat-label { font-size: 0.7rem !important; } } /* ============================================================ ACCESSIBILITY — reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================================ PRINT — force readable output ============================================================ */ @media print { :root, [data-theme='dark'], [data-theme='light'] { --bg-0: #ffffff; --bg-1: #f8f9fa; --txt-1: #000000; --txt-2: #333333; --border: #cccccc; } }