/* =================================================================== ГалеонАренда — Light Theme Override Подключать ПОСЛЕ style.min.css Активируется через data-theme="light" на =================================================================== */ /* === LIGHT PALETTE === */ html[data-theme="light"] { --bg-primary: #f4f3f0; --bg-secondary: #eae8e4; --bg-card: #ffffff; --bg-elevated: #f0efec; --accent: #d44f12; --accent-muted: rgba(212, 79, 18, 0.12); --accent-subtle: rgba(212, 79, 18, 0.06); --text-primary: #1a1a1e; --text-secondary: #5c5c64; --text-muted: #9c9ca4; --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.15); color-scheme: light; } /* === BODY GRADIENT === */ html[data-theme="light"] body::before { background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(212, 79, 18, 0.04), transparent 50%); } /* === NAVIGATION === */ html[data-theme="light"] nav { background: rgba(244, 243, 240, 0.85); border-bottom-color: var(--border); } html[data-theme="light"] .mobile-menu-btn { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .mobile-menu-btn span { background: var(--text-primary); } /* Mobile nav drawer */ @media (max-width: 768px) { html[data-theme="light"] .nav-links { background: var(--bg-card); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .nav-overlay.active { background: rgba(0, 0, 0, 0.25); } } /* === HERO === */ html[data-theme="light"] .hero::before { background: linear-gradient(180deg, rgba(244, 243, 240, 0.08) 0%, rgba(244, 243, 240, 0.86) 72%, rgba(244, 243, 240, 1) 100%); } html[data-theme="light"] .hero::after { background: linear-gradient(180deg, rgba(244, 243, 240, 0) 0%, rgba(244, 243, 240, 0.14) 64%, rgba(244, 243, 240, 0.96) 90%, rgba(244, 243, 240, 1) 100%); } html[data-theme="light"] .hero-bg::after { background: linear-gradient(90deg, rgba(244, 243, 240, 0.88) 0%, rgba(244, 243, 240, 0.62) 25%, rgba(244, 243, 240, 0.35) 45%, rgba(244, 243, 240, 0.12) 65%, transparent 100%), linear-gradient(180deg, rgba(244, 243, 240, 0.05) 0%, rgba(244, 243, 240, 0.2) 56%, rgba(244, 243, 240, 0.4) 100%); } html[data-theme="light"] .hero-bg::before { background: linear-gradient(180deg, rgba(244, 243, 240, 0) 0%, rgba(244, 243, 240, 0.2) 56%, rgba(244, 243, 240, 0.9) 84%, rgba(244, 243, 240, 1) 100%), radial-gradient(120% 72% at 50% 4%, rgba(244, 243, 240, 0.3) 0%, rgba(244, 243, 240, 0) 70%); } html[data-theme="light"] .hero-content::before { background: radial-gradient(136% 116% at 8% 38%, rgba(244, 243, 240, 0.4) 0%, rgba(244, 243, 240, 0.15) 52%, rgba(244, 243, 240, 0) 84%); } html[data-theme="light"] .hero h1, html[data-theme="light"] .hero-subtitle { text-shadow: 0 2px 12px rgba(244, 243, 240, 0.5); } html[data-theme="light"] .hero-subtitle { color: var(--text-primary); } html[data-theme="light"] .hero h1 .muted { color: var(--text-primary); } /* Floating cards */ html[data-theme="light"] .floating-card { background: rgba(255, 255, 255, 0.75); border-color: var(--border); } html[data-theme="light"] .hero-stats .floating-card { background: rgba(255, 255, 255, 0.6); border-color: var(--border); } html[data-theme="light"] .hero-stats .floating-card::after { background: none; } html[data-theme="light"] .hero-featured-stage { border-color: rgba(26, 26, 30, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 243, 240, 0.96)); box-shadow: 0 20px 46px rgba(53, 48, 43, 0.16); } html[data-theme="light"] .hero-featured-title, html[data-theme="light"] .hero-featured-caption, html[data-theme="light"] .hero-featured-meta, html[data-theme="light"] .hero-featured-row-label { color: var(--text-primary); } html[data-theme="light"] .hero-featured-meta, html[data-theme="light"] .hero-featured-caption, html[data-theme="light"] .hero-featured-row-label { color: var(--text-secondary); } html[data-theme="light"] .hero-featured-close { border-color: rgba(26, 26, 30, 0.1); background: rgba(255, 255, 255, 0.72); color: var(--text-secondary); } html[data-theme="light"] .hero-featured-close:hover { border-color: rgba(212, 79, 18, 0.28); background: rgba(255, 248, 244, 0.94); color: var(--text-primary); } html[data-theme="light"] .hero-featured-media { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 239, 236, 0.96)); border-color: rgba(26, 26, 30, 0.08); } html[data-theme="light"] .hero-featured-media.is-expanded #hero-featured-image { background: rgba(244, 243, 240, 0.92); } html[data-theme="light"] .hero-featured-state-pill, html[data-theme="light"] .hero-featured-link, html[data-theme="light"] .hero-featured-chip, html[data-theme="light"] .hero-featured-variant { border-color: rgba(26, 26, 30, 0.08); background: rgba(255, 255, 255, 0.78); color: var(--text-primary); } html[data-theme="light"] .hero-featured-state-pill strong, html[data-theme="light"] .hero-featured-link strong { color: var(--text-primary); } html[data-theme="light"] .hero-featured-chip:hover, html[data-theme="light"] .hero-featured-variant:hover, html[data-theme="light"] .hero-featured-link:hover { background: rgba(255, 248, 244, 0.96); color: var(--text-primary); } html[data-theme="light"] .hero-featured-chip.active, html[data-theme="light"] .hero-featured-variant.active { border-color: rgba(212, 79, 18, 0.38); background: rgba(212, 79, 18, 0.12); color: var(--accent); } /* === BUTTONS === */ html[data-theme="light"] .btn-primary { color: #fff; } html[data-theme="light"] .btn-primary:hover { background: #c04510; } html[data-theme="light"] .btn-secondary { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); } html[data-theme="light"] .btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-hover); } /* === STATS SECTION === */ html[data-theme="light"] .stats-section { border-bottom-color: var(--border); } /* === CARDS & ITEMS === */ html[data-theme="light"] .equipment-card, html[data-theme="light"] .feature-item, html[data-theme="light"] .type-card, html[data-theme="light"] .cta-card, html[data-theme="light"] .info-card, html[data-theme="light"] .calc-form, html[data-theme="light"] .calc-results, html[data-theme="light"] .about-stat, html[data-theme="light"] .stat-card, html[data-theme="light"] .user-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Equipment card image container */ html[data-theme="light"] .card-image { background-color: var(--bg-elevated); } /* Status badges */ html[data-theme="light"] .status-badge.available { background: rgba(34, 197, 94, 0.08); color: #16a34a; } html[data-theme="light"] .status-badge.rented { background: var(--accent-subtle); color: var(--accent); } html[data-theme="light"] .status-badge.maintenance { background: rgba(245, 158, 11, 0.1); color: #d97706; } /* Equipment hero */ html[data-theme="light"] .eq-hero { background: rgba(255, 255, 255, 0.98); border-color: rgba(232, 90, 28, 0.12); box-shadow: none; } html[data-theme="light"] .eq-hero-photo { background: transparent; } html[data-theme="light"] .eq-hero-photo-frame { box-shadow: none; } html[data-theme="light"] .eq-hero-badge { background: rgba(255, 255, 255, 0.92); color: var(--text-primary); border-color: rgba(232, 90, 28, 0.18); box-shadow: none; } html[data-theme="light"] .eq-hero-badge.accent { background: var(--accent); color: white; border-color: var(--accent); } html[data-theme="light"] .eq-hero-price-note, html[data-theme="light"] .eq-hero-type, html[data-theme="light"] .eq-hero-spec-label { color: var(--text-secondary); } /* === FEATURES / SERVICES === */ html[data-theme="light"] .features-section { background: var(--bg-secondary); } html[data-theme="light"] .feature-icon { background: var(--accent-subtle); } /* === FORMS === */ html[data-theme="light"] .form-input, html[data-theme="light"] .form-select { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); } html[data-theme="light"] .form-input:focus, html[data-theme="light"] .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } html[data-theme="light"] .form-input::placeholder { color: var(--text-muted); } /* === CALCULATOR === */ html[data-theme="light"] .result-note { background: var(--accent-subtle); } /* === CATALOG FILTERS === */ html[data-theme="light"] .filter-btn { border-color: var(--border); color: var(--text-secondary); } html[data-theme="light"] .filter-btn:hover { border-color: var(--border-hover); color: var(--text-primary); } html[data-theme="light"] .filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; } /* === FOOTER === */ html[data-theme="light"] footer { background: var(--bg-secondary); } /* === DASHBOARD SIDEBAR === */ html[data-theme="light"] .dashboard-layout .sidebar { background: rgba(255, 255, 255, 0.9); border-right-color: var(--border); } html[data-theme="light"] .sidebar-nav a.active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-muted); } /* === COOKIE BANNER === */ html[data-theme="light"] .cookie-banner { background: var(--bg-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* === SCROLLBAR === */ html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-secondary); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* === HERO MOBILE OVERRIDES === */ @media (max-width: 768px) { html[data-theme="light"] .hero-bg::after { background: linear-gradient(180deg, rgba(244, 243, 240, 0.6) 10%, rgba(244, 243, 240, 0.2) 58%, transparent 30%), linear-gradient(90deg, rgba(244, 243, 240, 0.65) 10%, rgba(244, 243, 240, 0.45) 50%, rgba(244, 243, 240, 0.18) 100%, transparent 100%), linear-gradient(180deg, transparent 50%, rgba(244, 243, 240, 0.55) 65%, rgba(244, 243, 240, 0.88) 78%, rgba(244, 243, 240, 1) 90%); } html[data-theme="light"] .hero-actions .btn-primary { border-color: var(--border); } html[data-theme="light"] .hero-actions .btn-secondary { background: rgba(255, 255, 255, 0.5); border-color: var(--border); } } /* === THEME TOGGLE BUTTON === */ .theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; color: var(--text-secondary); transition: color 0.2s var(--ease), border-color 0.2s, background 0.2s; flex-shrink: 0; padding: 0; margin-left: var(--space-xs); } .theme-toggle:hover { color: var(--accent); border-color: var(--border-hover); background: var(--accent-subtle); } .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease), opacity 0.2s; } /* Sun icon visible in dark mode, moon in light mode */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* === SMOOTH TRANSITION === */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* === PRINT: always light === */ @media print { :root { --bg-primary: #fff; --bg-secondary: #f5f5f5; --bg-card: #fff; --bg-elevated: #f0f0f0; --text-primary: #111; --text-secondary: #555; --text-muted: #999; --border: rgba(0, 0, 0, 0.1); --border-hover: rgba(0, 0, 0, 0.2); } }