/* ============================================================ Светлая тема — переопределения поверх main.css Активируется атрибутом data-theme="light" на ============================================================ */ [data-theme="light"] { /* Фоны */ --bg-void: #F5F0E6; --bg-deep: #FBF8F1; --bg-surface: #FFFFFF; --bg-surface-hover: #FBF8F1; --bg-elevated: #EDE6D6; /* Антикварное золото — темнее, чем в тёмной теме: иначе не читается на cream */ --gold-muted: #5A430D; --gold-base: #7A5F18; --gold-classic: #A8841F; --gold-bright: #C9A961; --gold-light: #DCC588; /* Чернила вместо белого */ --text-primary: #1A1814; --text-secondary: #4A453E; --text-tertiary: #7A746A; --text-disabled: #B8B0A0; /* Границы — тонкие чернила */ --border-subtle: rgba(26, 24, 20, 0.06); --border-default: rgba(26, 24, 20, 0.10); --border-gold: rgba(168, 132, 31, 0.40); /* Cormorant Garamond — более книжный, чем Playfair */ --font-heading: 'Cormorant Garamond', Georgia, serif; } /* ============================================================ Header ============================================================ */ [data-theme="light"] .header { background: rgba(245, 240, 230, 0.92); } /* ============================================================ Кнопки — на светлом CTA чернильная, не золотая ============================================================ */ [data-theme="light"] .btn--primary { background: #1A1814; color: #F5F0E6; border-color: #1A1814; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04); } [data-theme="light"] .btn--primary:hover { background: #2A2620; transform: translateY(-2px); /* Тонкая золотая полоска снизу — сигнатурный люкс-приём */ box-shadow: inset 0 -1px 0 rgba(168, 132, 31, 0.5), 0 16px 32px -8px rgba(26, 24, 20, 0.18); } [data-theme="light"] .btn--primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(26, 24, 20, 0.12); } [data-theme="light"] .btn--secondary { color: #1A1814; border-color: rgba(26, 24, 20, 0.35); } [data-theme="light"] .btn--secondary:hover { color: #1A1814; border-color: #1A1814; background: rgba(26, 24, 20, 0.04); box-shadow: none; } [data-theme="light"] .btn-split--primary { background: #1A1814; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04); } [data-theme="light"] .btn-split--primary:hover { background: #2A2620; } [data-theme="light"] .btn-split--primary .btn-split__label, [data-theme="light"] .btn-split--primary .btn-split__link { color: #F5F0E6; } [data-theme="light"] .btn-split--primary .btn-split__divider, [data-theme="light"] .btn-split--primary .btn-split__row::before { background: rgba(245,240,230,0.20); } [data-theme="light"] .btn-split--secondary { border-color: rgba(26,24,20,0.35); } [data-theme="light"] .btn-split--secondary .btn-split__label, [data-theme="light"] .btn-split--secondary .btn-split__link { color: #1A1814; } [data-theme="light"] .btn-split--secondary .btn-split__divider, [data-theme="light"] .btn-split--secondary .btn-split__row::before { background: rgba(26,24,20,0.15); } [data-theme="light"] .btn-split--secondary:hover { border-color: #1A1814; background: rgba(26,24,20,0.04); } /* ============================================================ Карточки услуг — белые, приподнятые, с радиусами ============================================================ */ /* Убираем «плитку» из тёмной темы */ [data-theme="light"] .services-grid { gap: 1.5rem; background: transparent; border: none; } [data-theme="light"] .service-card { background: #FFFFFF; border: 1px solid rgba(26, 24, 20, 0.08); border-radius: 12px; padding: 2.5rem; } [data-theme="light"] .service-card:hover { border-color: rgba(168, 132, 31, 0.35); background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%); transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(26, 24, 20, 0.10); } [data-theme="light"] .service-card__icon-wrap { background: rgba(168, 132, 31, 0.06); border-color: rgba(168, 132, 31, 0.16); } [data-theme="light"] .service-card__link { color: var(--gold-base); } [data-theme="light"] .service-card__link:hover { color: var(--gold-classic); } /* ============================================================ Footer ============================================================ */ [data-theme="light"] .footer { border-top-color: rgba(26, 24, 20, 0.08); }