/* * Maniko-inspired LIGHT theme for Paradise Nail Studio * -------------------------------------------------- * Cream + burgundy palette, italic serif headlines, pill buttons. * Matches the editorial cosmetics look of maniko-nails.de. * * Activated by setting . * The dark theme is intentionally NOT overridden — the original * gold-on-black palette in style.css remains the dark experience. * * Source of truth: brand.theme in /data/site-config.json * - "default" → original gold/dark style.css (no override) * - "maniko-light" → cream + burgundy via this file */ html[data-maniko="light"] { --bg: #FAF6F0; --bg2: #FFFFFF; --bg3: #F4ECE2; --surface: #FFFFFF; --surface2: #F8F0E5; --gold: #9A8435; --gold-light: #C9B97A; --gold-dark: #6E5E22; --gold-glow: rgba(154,132,53,0.08); --primary: #7B1F38; --primary-hover: #5E1A2C; --primary-soft: #F3D5DC; --accent: #E8B5C2; --text: #1A1A1A; --text2: #4A444A; --text3: #7A6F75; --border: #E8DDCC; --border-gold: rgba(154,132,53,0.3); --shadow: 0 4px 24px rgba(123,31,56,0.08); } html[data-maniko="light"] body { background: var(--bg); color: var(--text); } /* Top announcement bar (above the header) */ html[data-maniko="light"] body::before { content: "Von Millionen Händen geliebt · Premium Nagelstudio"; display: block; padding: 11px 20px; text-align: center; background: var(--primary); color: #FFFFFF; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; } html[data-maniko="light"] .header { background: var(--bg2); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } html[data-maniko="light"] .logo-text { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; } html[data-maniko="light"] .logo-sub { color: var(--text3); } html[data-maniko="light"] .nav-link { color: var(--text); } html[data-maniko="light"] .nav-link:hover { color: var(--primary); border-bottom-color: var(--primary); } /* Italic serif hero + section headings */ html[data-maniko="light"] .hero-title, html[data-maniko="light"] .section-title { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } /* Pill buttons */ html[data-maniko="light"] .btn, html[data-maniko="light"] .btn-primary, html[data-maniko="light"] .btn-secondary, html[data-maniko="light"] .btn-signin, html[data-maniko="light"] .lang-btn { border-radius: 999px; } html[data-maniko="light"] .btn-primary { background: var(--primary); color: #FFFFFF; border: none; box-shadow: 0 6px 18px rgba(123,31,56,0.25); } html[data-maniko="light"] .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); } html[data-maniko="light"] .btn-secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } html[data-maniko="light"] .btn-secondary:hover { background: var(--primary-soft); } /* Cards */ html[data-maniko="light"] .service-card, html[data-maniko="light"] .salon-option, html[data-maniko="light"] .service-option, html[data-maniko="light"] .booking-form, html[data-maniko="light"] .booking-step, html[data-maniko="light"] .footer-col { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } html[data-maniko="light"] .service-card { border-radius: 18px; padding: 32px 24px; transition: transform 0.25s, box-shadow 0.25s; } html[data-maniko="light"] .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(123,31,56,0.18); } /* Service icons → pink gradient circles like Maniko */ html[data-maniko="light"] .service-icon { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: radial-gradient(circle at 30% 30%, var(--primary-soft), var(--accent)); margin: 0 auto 18px; box-shadow: inset 0 -4px 12px rgba(123,31,56,0.15); } /* Hero fallback gradient when no slide image */ html[data-maniko="light"] .hero { background: var(--bg); } html[data-maniko="light"] .slide:not(.slide-with-video):not([style*="background-image"]) { background: linear-gradient(135deg, var(--primary-soft), var(--bg)); } /* Time slots */ html[data-maniko="light"] .time-slot { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); font-weight: 500; } html[data-maniko="light"] .time-slot:hover { border-color: var(--primary); background: var(--primary-soft); } html[data-maniko="light"] .time-slot.selected { background: var(--primary); color: #FFFFFF; border-color: var(--primary); } /* Inputs */ html[data-maniko="light"] input[type="text"], html[data-maniko="light"] input[type="email"], html[data-maniko="light"] input[type="tel"], html[data-maniko="light"] input[type="password"], html[data-maniko="light"] input[type="date"], html[data-maniko="light"] input[type="time"], html[data-maniko="light"] textarea, html[data-maniko="light"] select { background: var(--bg2); border: 1.5px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 16px; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; } html[data-maniko="light"] input:focus, html[data-maniko="light"] textarea:focus, html[data-maniko="light"] select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* Step indicator */ html[data-maniko="light"] .step .step-number { background: var(--surface2); color: var(--text3); border: 2px solid var(--border); } html[data-maniko="light"] .step.active .step-number { background: var(--primary); color: #FFFFFF; border-color: var(--primary); } html[data-maniko="light"] .step.completed .step-number { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } /* Lang switcher */ html[data-maniko="light"] .lang-switch { background: var(--surface2); border: 1px solid var(--border); padding: 3px; } html[data-maniko="light"] .lang-btn:not(.active) { color: var(--text3); } html[data-maniko="light"] .lang-btn.active { background: var(--primary); color: #FFFFFF; } /* Footer */ html[data-maniko="light"] .footer { background: var(--bg2); border-top: 1px solid var(--border); color: var(--text2); } html[data-maniko="light"] .footer-heading { color: var(--primary); font-family: 'Playfair Display', serif; font-style: italic; } html[data-maniko="light"] .footer-menu a { color: var(--text2); } html[data-maniko="light"] .footer-menu a:hover { color: var(--primary); } /* Site banner border */ html[data-maniko="light"] .site-banner { border-bottom: 1px solid var(--border); } /* Hero dots */ html[data-maniko="light"] .hero-dot { background: rgba(123,31,56,0.25); width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0; transition: background 0.2s; } html[data-maniko="light"] .hero-dot.active { background: var(--primary); } /* Carousel arrows */ html[data-maniko="light"] .carousel-btn { background: rgba(255,255,255,0.95); color: var(--primary); border: 1px solid rgba(123,31,56,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.08); } html[data-maniko="light"] .carousel-btn:hover { background: #FFFFFF; } /* Cookie banner */ html[data-maniko="light"] .cookie-banner { background: var(--surface); border: 1px solid var(--border-gold); color: var(--text); } html[data-maniko="light"] .cookie-btn-primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }