/* ==================== Light Theme ==================== */ /* Applied when */ /* Global transition for theme switch */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important; } /* ==================== CSS Variable Overrides ==================== */ [data-theme="light"] { --color-navy-950: #F8FAFC; --color-navy-900: #F1F5F9; --color-navy-800: #E2E8F0; --color-navy-700: #CBD5E1; --color-navy-600: #94A3B8; --color-brand-glow: rgba(255, 107, 44, 0.15); } /* ==================== Body & Backgrounds ==================== */ [data-theme="light"] body { background-color: #F8FAFC !important; color: #1E293B !important; } /* Tailwind bg overrides */ [data-theme="light"] .bg-navy-950 { background-color: #F8FAFC !important; } [data-theme="light"] .bg-navy-900 { background-color: #F1F5F9 !important; } [data-theme="light"] .bg-navy-800 { background-color: #E2E8F0 !important; } [data-theme="light"] .bg-navy-900\/50 { background-color: rgba(241,245,249,0.5) !important; } /* White opacity backgrounds → subtle grays */ [data-theme="light"] .bg-white\/5, [data-theme="light"] .bg-white\/3 { background-color: rgba(0,0,0,0.03) !important; } [data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; } /* Brand opacity backgrounds */ [data-theme="light"] .bg-brand\/5 { background-color: rgba(255,107,44,0.06) !important; } [data-theme="light"] .bg-brand\/10 { background-color: rgba(255,107,44,0.1) !important; } [data-theme="light"] .bg-blue-500\/10 { background-color: rgba(59,130,246,0.08) !important; } [data-theme="light"] .bg-blue-500\/5 { background-color: rgba(59,130,246,0.05) !important; } [data-theme="light"] .bg-purple-500\/10 { background-color: rgba(168,85,247,0.08) !important; } [data-theme="light"] .bg-green-500\/10 { background-color: rgba(34,197,94,0.08) !important; } [data-theme="light"] .bg-orange-500\/10 { background-color: rgba(249,115,22,0.08) !important; } [data-theme="light"] .bg-red-500\/10 { background-color: rgba(239,68,68,0.08) !important; } [data-theme="light"] .bg-red-500\/5 { background-color: rgba(239,68,68,0.05) !important; } /* ==================== Text Colors ==================== */ [data-theme="light"] .text-white { color: #0F172A !important; } [data-theme="light"] .text-slate-300 { color: #475569 !important; } [data-theme="light"] .text-slate-400 { color: #64748B !important; } [data-theme="light"] .text-slate-500 { color: #94A3B8 !important; } [data-theme="light"] .text-slate-700 { color: #334155 !important; } /* Keep accent colors vivid */ [data-theme="light"] .text-brand { color: #E85A1F !important; } [data-theme="light"] .text-blue-400 { color: #2563EB !important; } [data-theme="light"] .text-blue-500 { color: #2563EB !important; } [data-theme="light"] .text-purple-500 { color: #7C3AED !important; } [data-theme="light"] .text-green-500 { color: #16A34A !important; } [data-theme="light"] .text-orange-500 { color: #EA580C !important; } [data-theme="light"] .text-red-400, [data-theme="light"] .text-red-500 { color: #DC2626 !important; } /* White/50 opacity text */ [data-theme="light"] .text-white\/60 { color: rgba(15,23,42,0.6) !important; } /* ==================== Borders ==================== */ [data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; } [data-theme="light"] .border-brand\/20, [data-theme="light"] .border-brand\/30 { border-color: rgba(255,107,44,0.2) !important; } [data-theme="light"] .border-blue-500\/30 { border-color: rgba(59,130,246,0.2) !important; } [data-theme="light"] .border-red-500\/20 { border-color: rgba(239,68,68,0.15) !important; } /* ==================== Navbar / Glass ==================== */ [data-theme="light"] .glass-nav { background: rgba(248,250,252,0.85) !important; border-bottom-color: rgba(0,0,0,0.08) !important; backdrop-filter: blur(20px) saturate(180%); } [data-theme="light"] #main-nav-container.bg-navy-950\/90 { background: rgba(248,250,252,0.95) !important; } /* Navbar text */ [data-theme="light"] .glass-nav .text-white, [data-theme="light"] .glass-nav span.text-white { color: #0F172A !important; } [data-theme="light"] .glass-nav .text-slate-300 { color: #475569 !important; } [data-theme="light"] .glass-nav .text-slate-300:hover { color: #0F172A !important; } /* Navbar hamburger */ [data-theme="light"] .nav-toggle { color: #0F172A !important; } /* Navbar dropdown */ [data-theme="light"] .glass-nav .bg-navy-800 { background-color: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important; } [data-theme="light"] .glass-nav .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; } /* Navbar İletişim button */ [data-theme="light"] .glass-nav .bg-white\/5 { background-color: rgba(0,0,0,0.05) !important; } [data-theme="light"] .glass-nav .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.1) !important; } /* ==================== Mobile Menu ==================== */ [data-theme="light"] #mobile-menu { background-color: #F8FAFC !important; } [data-theme="light"] #mobile-menu .text-white { color: #0F172A !important; } [data-theme="light"] #mobile-menu .text-slate-300 { color: #475569 !important; } [data-theme="light"] #mobile-menu .text-slate-500 { color: #94A3B8 !important; } [data-theme="light"] #mobile-menu .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; } /* ==================== Breadcrumb ==================== */ [data-theme="light"] nav[aria-label="Breadcrumb"] { background-color: rgba(241,245,249,0.5) !important; border-color: rgba(0,0,0,0.06) !important; } /* ==================== Cards ==================== */ [data-theme="light"] .card-hover { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important; } [data-theme="light"] .card-hover:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 0 20px rgba(255,107,44,0.08) !important; } /* ==================== Forms ==================== */ [data-theme="light"] input.bg-navy-900, [data-theme="light"] select.bg-navy-900, [data-theme="light"] textarea.bg-navy-900, [data-theme="light"] .bg-navy-900 input, [data-theme="light"] input[class*="bg-navy"] { background-color: #FFFFFF !important; border-color: rgba(0,0,0,0.15) !important; color: #0F172A !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94A3B8 !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #FF6B2C !important; box-shadow: 0 0 0 3px rgba(255,107,44,0.1) !important; } /* ==================== Calculator Result Cards ==================== */ [data-theme="light"] .bg-blue-500\/10 { background-color: rgba(59,130,246,0.08) !important; } /* ==================== Gradient Text ==================== */ [data-theme="light"] .gradient-text { background: linear-gradient(135deg, #E85A1F 0%, #C44A18 50%, #FF6B2C 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ==================== Blob / Decorative ==================== */ [data-theme="light"] .blob { opacity: 0.04 !important; } /* ==================== Footer ==================== */ [data-theme="light"] footer { background-color: #F1F5F9 !important; border-top-color: rgba(0,0,0,0.08) !important; } /* Footer headings */ [data-theme="light"] footer h4.text-white { color: #0F172A !important; } /* Footer brand logo text */ [data-theme="light"] footer .text-white { color: #0F172A !important; } /* Footer body text */ [data-theme="light"] footer .text-slate-400 { color: #64748B !important; } [data-theme="light"] footer .text-slate-500 { color: #94A3B8 !important; } [data-theme="light"] footer .text-slate-600 { color: #475569 !important; } /* Footer links hover */ [data-theme="light"] footer a.text-slate-400:hover { color: #E85A1F !important; } /* Social media buttons */ [data-theme="light"] footer .bg-white\/5 { background-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] footer a.hover\:bg-brand:hover { background-color: #FF6B2C !important; color: #FFFFFF !important; } /* Footer divider */ [data-theme="light"] footer .section-divider { border-color: rgba(0,0,0,0.08) !important; background-color: rgba(0,0,0,0.06) !important; } /* Footer border */ [data-theme="light"] footer .border-white\/5 { border-color: rgba(0,0,0,0.08) !important; } /* ==================== Cookie Banner ==================== */ [data-theme="light"] .cookie-banner { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important; } /* ==================== Scrollbar ==================== */ [data-theme="light"]::-webkit-scrollbar-track { background: #F1F5F9; } [data-theme="light"]::-webkit-scrollbar-thumb { background: #CBD5E1; } [data-theme="light"]::-webkit-scrollbar-thumb:hover { background: #FF6B2C; } /* ==================== FAQ Items ==================== */ [data-theme="light"] .faq-item { background-color: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .faq-question:hover, [data-theme="light"] .faq-item .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.03) !important; } /* ==================== Loader ==================== */ [data-theme="light"] .loader-screen { background: #F8FAFC !important; } [data-theme="light"] .loader-ring { border-color: rgba(255,107,44,0.15); border-top-color: #FF6B2C; } /* ==================== Page Transition ==================== */ [data-theme="light"] .page-transition { background: #F8FAFC !important; } /* ==================== Selection ==================== */ [data-theme="light"] ::selection { background: rgba(255,107,44,0.2) !important; color: #0F172A !important; } /* ==================== Noise Overlay ==================== */ [data-theme="light"] .noise-overlay::before { opacity: 0.02 !important; } /* ==================== Custom Cursor ==================== */ [data-theme="light"] .custom-cursor { border-color: #FF6B2C; mix-blend-mode: normal; } [data-theme="light"] .custom-cursor.hover { border-color: #E85A1F; background: rgba(255,107,44,0.1); } [data-theme="light"] .custom-cursor-dot { background: #FF6B2C; } /* ==================== Shadow Overrides ==================== */ [data-theme="light"] .shadow-brand\/20 { box-shadow: 0 4px 14px rgba(255,107,44,0.12) !important; } [data-theme="light"] .shadow-blue-500\/20 { box-shadow: 0 4px 14px rgba(59,130,246,0.12) !important; } [data-theme="light"] .shadow-lg { box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; } [data-theme="light"] .shadow-2xl { box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important; } [data-theme="light"] .shadow-black\/20 { box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important; } /* ==================== Prose (Blog/FAQ Content) ==================== */ [data-theme="light"] .prose-invert { --tw-prose-body: #475569 !important; --tw-prose-headings: #0F172A !important; --tw-prose-links: #E85A1F !important; --tw-prose-bold: #0F172A !important; --tw-prose-bullets: #94A3B8 !important; --tw-prose-quotes: #64748B !important; --tw-prose-code: #E85A1F !important; --tw-prose-hr: rgba(0,0,0,0.1) !important; } /* ==================== Animated Underline ==================== */ [data-theme="light"] .animated-underline::after { background: #E85A1F; } /* ==================== Details/Summary (SSS Page) ==================== */ [data-theme="light"] details summary .text-white { color: #0F172A !important; } [data-theme="light"] details[open] summary { background-color: rgba(0,0,0,0.02) !important; } /* ==================== Theme Toggle Button ==================== */ .theme-toggle { position: relative; width: 52px; height: 28px; border-radius: 99px; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); cursor: pointer; overflow: hidden; transition: all 0.4s ease; flex-shrink: 0; } [data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FCD34D; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(252,211,77,0.5); } .theme-toggle-knob i { font-size: 11px; color: #92400E; transition: transform 0.4s ease, opacity 0.3s ease; } /* Dark mode (moon): knob slides right */ [data-theme="dark"] .theme-toggle-knob, :not([data-theme]) .theme-toggle-knob { left: calc(100% - 22px); background: #CBD5E1; box-shadow: 0 0 8px rgba(148,163,184,0.5); } [data-theme="dark"] .theme-toggle-knob i, :not([data-theme]) .theme-toggle-knob i { color: #334155; } /* Stars decoration in dark mode */ .theme-toggle::before, .theme-toggle::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transition: opacity 0.4s ease; opacity: 0; } [data-theme="dark"] .theme-toggle::before, :not([data-theme]) .theme-toggle::before { width: 3px; height: 3px; top: 6px; left: 8px; opacity: 1; } [data-theme="dark"] .theme-toggle::after, :not([data-theme]) .theme-toggle::after { width: 2px; height: 2px; top: 14px; left: 14px; opacity: 0.7; } /* Widget in light theme */ [data-theme="light"] .widget { background: rgba(255,255,255,0.8) !important; border-color: rgba(0,0,0,0.08) !important; }