:root{ /* Design tokens (light) */ --bg:#f0f2f5; --surface:#ffffff; --surface-2:#f8fafc; --header-bg: rgba(255,255,255,0.88); --header-border: rgba(15,23,42,0.08); --text:#0f172a; --text-2:#334155; --muted:#64748b; --border:rgba(15,23,42,0.10); --border-soft:rgba(15,23,42,0.06); --accent:#2563eb; --accent-600:#1d4ed8; --cta:#0ea5e9; --shadow:0 15px 40px rgba(30,64,175,0.10); --shadow-hover:0 20px 45px rgba(30,64,175,0.18); --radius:16px; } /* Dark mode is controlled by Tailwind-compatible `.dark` class on */ .dark{ color-scheme:dark; --bg:#0b1220; --surface:#111a2e; --surface-2:rgba(255,255,255,0.04); --card:#111a2e; /* In dark mode we keep header much more opaque for readability */ --header-bg: rgba(9,13,24,0.96); --header-border: rgba(255,255,255,0.12); --text:#e6edf7; --text-2:#c7d2e5; --muted:#a3b2c7; --border:rgba(255,255,255,0.14); --border-soft:rgba(255,255,255,0.10); --accent:#60a5fa; --accent-600:#3b82f6; --cta:#22d3ee; --shadow:0 18px 50px rgba(0,0,0,0.45); --shadow-hover:0 22px 70px rgba(0,0,0,0.55); } :root { --card:#ffffff; } *{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background-color .25s ease,color .25s ease; } /* Subtle modern background (keeps Tailwind layout intact) */ body::before{ content:""; position:fixed; inset:-20vh -10vw; z-index:-1; pointer-events:none; background: radial-gradient(900px 520px at 15% 10%, rgba(37,99,235,0.14), transparent 55%), radial-gradient(900px 520px at 85% 20%, rgba(14,165,233,0.10), transparent 55%), radial-gradient(900px 520px at 50% 95%, rgba(37,99,235,0.08), transparent 60%); filter:blur(0.2px); } /* Hero */ .hero{ background:linear-gradient(180deg, rgba(19,38,77,0.55), rgba(19,38,77,0.45)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size:cover; background-position:center; color:#fff; } /* Modern sticky header (readable in dark mode) */ .site-header{ position:sticky; top:0; z-index:50; background:var(--header-bg); border-bottom:1px solid var(--header-border); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(2,6,23,0.06); } .dark .site-header{ box-shadow:0 12px 34px rgba(0,0,0,0.35); /* blur + high opacity is OK, but a bit less blur feels crisper on dark */ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* Mobile menu background should remain solid (avoid glass readability issues) */ #mobile-menu{ background:var(--surface); border-top:1px solid var(--border-soft); } /* Dropdown polish */ #services-dropdown{ border:1px solid var(--border-soft); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .dark #services-dropdown{border-color:var(--border); background:color-mix(in srgb, var(--surface) 92%, transparent)} /* Cards (used alongside Tailwind utility classes) */ .window-card,.review-card,.card-hover,.calculator,.gallery-item{ background:var(--surface); border-radius:var(--radius); border:1px solid var(--border-soft); box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease, background-color .25s ease; } .window-card:hover,.card-hover:hover,.review-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); } /* Buttons */ button,.btn{ cursor:pointer; border:0; padding:.65rem 1.1rem; border-radius:10px; font-weight:600; transition:transform .12s ease, box-shadow .12s ease, background-color .2s ease, color .2s ease; } button:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(37,99,235,0.15)} .btn-primary:hover{background:var(--accent-600)} .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--accent)} /* Used by JS-inserted product cards */ .btn-main{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1.1rem; border-radius:9999px; background:linear-gradient(135deg,var(--accent),var(--cta)); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 12px 28px rgba(37,99,235,0.18); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn-main:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,99,235,0.22);filter:saturate(1.05)} /* Inputs */ input[type='text'],input[type='email'],textarea,select{ background:var(--surface); color:var(--text); border:1px solid var(--border-soft); padding:.6rem .9rem; border-radius:8px; transition:box-shadow .18s ease, border-color .18s ease, background-color .2s ease, color .2s ease; } input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--muted) 88%, transparent)} input:focus,textarea:focus,select:focus{ outline:none; box-shadow:0 8px 25px rgba(37,99,235,0.18); border-color:var(--accent); } /* Navigation underline effect */ .nav-link{position:relative} .nav-link:after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--accent);bottom:-6px;transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav-link:hover:after{transform:scaleX(1)} /* Slider tweaks */ .slider{scroll-behavior:smooth} .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none} .no-scrollbar::-webkit-scrollbar{display:none} /* Small utilities */ .container{max-width:1200px;margin:0 auto;padding:0 1rem} .rounded-lg{border-radius:12px} .bg-card{background-color:var(--card)} .text-text{color:var(--text)} /* Accessibility focus */ a:focus,button:focus,input:focus{outline:3px solid rgba(37,99,235,0.14);outline-offset:2px} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .fade-in{animation:fadeIn .7s ease both} .transition-all{transition:all .3s ease} .hero-gradient{background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%)} /* Floating call-to-action (телефон) */ .floating-cta{ background:linear-gradient(135deg,var(--cta),var(--accent)); color:#fff !important; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; box-shadow:0 15px 35px rgba(37,99,235,0.22); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .floating-cta:hover{transform:translateY(-6px);box-shadow:0 25px 50px rgba(37,99,235,0.28)} /* Dark mode: minimal compatibility overrides for Tailwind utility colors */ .dark .bg-white{background-color:var(--surface)} .dark .bg-card{background-color:var(--card)} .dark .text-text{color:var(--text)} .dark .bg-gray-50{background-color:var(--surface-2)} .dark .bg-gray-200{background-color:rgba(255,255,255,0.06)} .dark .text-gray-800{color:var(--text)} .dark .text-gray-700{color:var(--text-2)} .dark .text-gray-600,.dark .text-gray-500{color:var(--muted)} .dark .text-gray-400{color:rgba(163,178,199,0.85)} .dark .text-gray-300{color:rgba(163,178,199,0.55)} .dark .border,.dark .border-gray-300{border-color:var(--border)} .dark .bg-blue-50{background-color:rgba(34,211,238,0.06)} .dark .bg-blue-100{background-color:rgba(96,165,250,0.10)} .dark .text-blue-600{color:var(--accent)} .dark .border-blue-600{border-color:var(--accent)} .dark .bg-blue-600{background-color:var(--accent)} .dark .bg-blue-700{background-color:var(--accent-600)} /* Dark mode: fix common hover utilities that become too bright/dim */ .dark .hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--surface) 92%, #ffffff 8%)} .dark .hover\:bg-blue-50:hover{background-color:rgba(34,211,238,0.06)} .dark .hover\:bg-blue-700:hover{background-color:var(--accent-600)} .dark .hover\:text-blue-600:hover{color:var(--accent)} .dark .hover\:text-gray-700:hover{color:var(--text)} /* Dark mode: button and select fixes */ .dark .bg-gray-200 { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--text-2) !important; } .dark .text-gray-700 { color: var(--text-2) !important; } .dark .text-white { color: #ffffff !important; } .dark select, .dark input[type='text'], .dark input[type='email'], .dark textarea { background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--border-soft) !important; } .dark input::placeholder, .dark textarea::placeholder { color: var(--muted) !important; } .dark #windowTypeSelect { background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--border-soft) !important; } .dark .bg-blue-600, .dark .bg-blue-700 { background-color: var(--accent) !important; } .dark .bg-blue-600:hover, .dark .bg-blue-700:hover { background-color: var(--accent-600) !important; } /* Hero secondary CTA (bg-white hover:bg-gray-100 text-blue-600) needs extra opacity on image background */ .dark .hero a.bg-white{ border:1px solid var(--border); background-color:color-mix(in srgb, var(--surface) 96%, #ffffff 4%); } .dark .hero a.bg-white:hover{ background-color:color-mix(in srgb, var(--surface) 88%, #ffffff 12%); } /* Additional dark mode support */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: var(--text); } .dark p { color: var(--text-2); } .dark a { color: var(--accent); } .dark button { transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease, color .2s ease; } /* Dark mode: menu toggle and buttons */ .dark #menu-toggle { color: var(--text-2) !important; } .dark #services-dropdown-btn { color: var(--text-2) !important; } .dark #services-dropdown-btn:hover { color: var(--accent) !important; } .dark .window-type { transition: all 0.2s ease; } .dark .window-type:not(.active) { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--text-2) !important; } .dark .window-type:not(.active):hover { background-color: rgba(255, 255, 255, 0.12) !important; } /* Opt-out of transitions (useful for theme toggle) */ .no-transition,.no-transition *{transition:none !important} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} } /* Toast / уведомления */ .toast{ min-width:200px; max-width:360px; padding:0.8rem 1rem; border-radius:12px; color:var(--text); background:var(--surface); border:1px solid var(--border-soft); box-shadow:0 12px 30px rgba(2,6,23,0.08); display:flex; gap:0.6rem; align-items:center; animation:fadeIn .18s ease both; } .toast .icon{font-size:1.1rem} .toast-success{background:linear-gradient(90deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02)); border-color:rgba(34,197,94,0.14); color:var(--text)} .toast-error{background:linear-gradient(90deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02)); border-color:rgba(239,68,68,0.14); color:var(--text)} .toast-info{background:linear-gradient(90deg, rgba(59,130,246,0.06), rgba(59,130,246,0.02)); border-color:rgba(59,130,246,0.14); color:var(--text)} .toast.hide{opacity:0;transform:translateY(-8px);transition:opacity .25s, transform .25s}