/* ========================================================================== THEMES.CSS — Visual theme presets (applied via data-theme on ) ========================================================================== */ /* ======================================================================== */ /* MODERN (default) — already defined in variables.css */ /* ======================================================================== */ /* No overrides needed — variables.css IS the modern theme */ /* ======================================================================== */ /* ELEGANT — serif-heavy, softer shadows, warm background */ /* ======================================================================== */ [data-theme="elegant"] { --color-bg: #faf8f5; --color-bg-alt: #f3efe9; --color-border: #ddd5c9; --color-text: #2c2420; --color-text-muted: #7a6e62; --color-text-light: #a89c90; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 4px rgba(44, 36, 32, 0.05); --shadow-md: 0 4px 20px rgba(44, 36, 32, 0.07); --shadow-lg: 0 8px 32px rgba(44, 36, 32, 0.10); --shadow-hover: 0 12px 36px rgba(44, 36, 32, 0.13); } [data-theme="elegant"] .section-headline::after { height: 2px; width: 80px; background: var(--color-accent); opacity: 0.6; } [data-theme="elegant"] .nav-menu a { letter-spacing: 0.08em; font-weight: 400; } [data-theme="elegant"] .btn { border-radius: 4px; letter-spacing: 0.04em; } [data-theme="elegant"] .site-nav.nav-scrolled { background: rgba(250, 248, 245, 0.97); } [data-theme="elegant"] .hero-overlay { background: linear-gradient(180deg, rgba(44, 36, 32, 0.3) 0%, rgba(44, 36, 32, 0.5) 100%); } [data-theme="elegant"] .benefit-card, [data-theme="elegant"] .stat-card, [data-theme="elegant"] .financing-block { border: none; box-shadow: var(--shadow-sm); } [data-theme="elegant"] .contact-form, [data-theme="elegant"] .contact-card { border: none; box-shadow: var(--shadow-sm); } /* ======================================================================== */ /* BOLD — dramatic shadows, larger type, stronger contrast */ /* ======================================================================== */ [data-theme="bold"] { --color-bg: #ffffff; --color-bg-alt: #f0f0f5; --color-text: #0d0d1a; --color-text-muted: #4a4a6a; --color-text-light: #7a7a9a; --color-border: #d0d0e0; --text-3xl: clamp(2rem, 4vw, 3rem); --text-4xl: clamp(3rem, 6vw, 5rem); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(13, 13, 26, 0.08); --shadow-md: 0 6px 24px rgba(13, 13, 26, 0.12); --shadow-lg: 0 12px 40px rgba(13, 13, 26, 0.16); --shadow-hover: 0 16px 48px rgba(13, 13, 26, 0.20); } [data-theme="bold"] .section-headline::after { width: 40px; height: 4px; border-radius: 4px; } [data-theme="bold"] .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.65) 100%); } [data-theme="bold"] .hero-title { letter-spacing: -0.04em; font-weight: 800; } [data-theme="bold"] .btn { border-width: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } [data-theme="bold"] .benefit-card, [data-theme="bold"] .stat-card { border: 2px solid var(--color-border); } [data-theme="bold"] .benefit-card:hover, [data-theme="bold"] .stat-card:hover { border-color: var(--color-accent); } [data-theme="bold"] .nav-menu a { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } [data-theme="bold"] .site-footer { padding: var(--space-xl) 0; } /* ======================================================================== */ /* MINIMAL — ultra-clean, thin lines, generous spacing */ /* ======================================================================== */ [data-theme="minimal"] { --color-bg: #ffffff; --color-bg-alt: #fafafa; --color-text: #222222; --color-text-muted: #888888; --color-text-light: #bbbbbb; --color-border: #eeeeee; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: none; --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --space-xl: 8rem; } [data-theme="minimal"] .section-headline::after { display: none; } [data-theme="minimal"] .section-headline { font-weight: 400; letter-spacing: -0.02em; } [data-theme="minimal"] .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%); } [data-theme="minimal"] .hero-subtitle { letter-spacing: 0.3em; font-size: var(--text-xs); } [data-theme="minimal"] .btn { border-radius: 2px; padding: 0.6rem 2rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-xs); } [data-theme="minimal"] .benefit-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg) var(--space-md); } [data-theme="minimal"] .benefit-card:hover { transform: none; box-shadow: none; border-color: var(--color-accent); } [data-theme="minimal"] .benefit-icon { background: none; border: 1px solid var(--color-border); } [data-theme="minimal"] .stat-card { border: none; border-bottom: 2px solid var(--color-border); border-radius: 0; padding: var(--space-md) var(--space-sm); } [data-theme="minimal"] .nav-menu a { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--text-base); } [data-theme="minimal"] .nav-menu a::after { height: 1px; } [data-theme="minimal"] .site-footer { border-top: 1px solid var(--color-border); } [data-theme="minimal"] .contact-form, [data-theme="minimal"] .contact-card { border: 1px solid var(--color-border); border-radius: var(--radius); } [data-theme="minimal"] .financing-block:hover, [data-theme="minimal"] .distance-card:hover { transform: none; box-shadow: none; } /* ======================================================================== */ /* DARK — dark background, light text */ /* ======================================================================== */ [data-theme="dark"] { --color-bg: #0f1117; --color-bg-alt: #1a1d27; --color-text: #e4e4e8; --color-text-muted: #9a9ab0; --color-text-light: #6a6a80; --color-border: #2a2d3a; --color-primary: #e4e4e8; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.6); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #fff; } [data-theme="dark"] .site-nav.nav-scrolled { background: rgba(15, 17, 23, 0.95); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .nav-scrolled .nav-brand { color: #fff; } [data-theme="dark"] .nav-scrolled .nav-menu a { color: var(--color-text); } [data-theme="dark"] .nav-scrolled .nav-hamburger span { background: var(--color-text); } [data-theme="dark"] .hero-overlay { background: linear-gradient(180deg, rgba(15, 17, 23, 0.4) 0%, rgba(15, 17, 23, 0.7) 100%); } [data-theme="dark"] .benefit-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .financing-block, [data-theme="dark"] .distance-card, [data-theme="dark"] .contact-form, [data-theme="dark"] .contact-card, [data-theme="dark"] .standard-item, [data-theme="dark"] .feature-card, [data-theme="dark"] .unit-card { background: var(--color-bg-alt); border-color: var(--color-border); } [data-theme="dark"] .units-table { background: var(--color-bg-alt); } [data-theme="dark"] .units-table thead { background: rgba(255, 255, 255, 0.08); color: var(--color-text); } [data-theme="dark"] .unit-row:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .modal-container { background: var(--color-bg); color: var(--color-text); } [data-theme="dark"] .modal-close { background: var(--color-bg-alt); color: var(--color-text); } [data-theme="dark"] .unit-detail-price { background: var(--color-bg-alt); } [data-theme="dark"] .site-footer { background: #080a0f; border-top: 1px solid var(--color-border); } [data-theme="dark"] .tab-btn { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .filter-select { background: var(--color-bg-alt); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: var(--color-bg-alt); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .stats-extras { background: var(--color-bg-alt); border-color: var(--color-border); } [data-theme="dark"] .extras-row { border-color: var(--color-border); } @media (max-width: 768px) { [data-theme="dark"] .nav-menu { background: var(--color-bg); } [data-theme="dark"] .nav-menu a { color: var(--color-text); border-bottom-color: var(--color-border); } }