/* ───────────────────────────────────────────────────────────────── * Theme toggle + dark mode overrides for Naumova Studio. * Активується класом .dark-theme на . * Палітра: основний колір #7A4DB3 (фіолетовий), hover #f986d8 (рожевий). * Рожевий — ТІЛЬКИ для :hover-станів. Все інше акцентне — фіолетове. * ───────────────────────────────────────────────────────────────── */ /* ── theme toggle button ───────────────────────────────────────── Батьківські .menu-extras .menu-item > div > a вже задають padding 0 20px, color, min-height 62px. Нам потрібен лише line-height для центровки SVG по вертикалі. */ .theme-toggle { cursor: pointer; line-height: 62px; } .theme-toggle svg { width: 22px; height: 22px; vertical-align: middle; stroke: currentColor; fill: none; transition: transform .3s ease, stroke .2s ease; } .theme-toggle:hover svg { transform: rotate(15deg); stroke: #f986d8; } .theme-toggle .icon-moon { display: none; } .dark-theme .theme-toggle .icon-sun { display: none; } .dark-theme .theme-toggle .icon-moon { display: inline-block; } /* плавна зміна кольорів при перемиканні */ html.dark-theme, .dark-theme body, .dark-theme section, .dark-theme .grey-bg, .dark-theme #topnav, .dark-theme #topnav.stick, .dark-theme .pricing-table, .dark-theme .team-member, .dark-theme .dy-menu-body, .dark-theme .dylan-tabs .nav-tabs > li > a, .dark-theme .modal-content, .dark-theme .form-control { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ── базові кольори ── */ .dark-theme body { background: #1a1a1a; color: #c8c8c8; } .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: #fff; } /* ── секції ── */ .dark-theme #about, .dark-theme #pd52, .dark-theme #team, .dark-theme #schedule, .dark-theme #pricing, .dark-theme #contact, .dark-theme section.p-0 { background: #1a1a1a; } .dark-theme .grey-bg { background: #222225 !important; } .dark-theme #about .section-content p { color: #b8b8b8; } /* ── header / topnav (повна ширина в темній темі завжди) ── */ .dark-theme #topnav { background: #1a1a1a; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .dark-theme #topnav.stick { background: #1a1a1a; box-shadow: 0 4px 12px rgba(0,0,0,.6); } .dark-theme #topnav .logo .logo-light { display: block; } .dark-theme #topnav .logo .logo-dark { display: none; } .dark-theme #topnav.stick .logo .logo-light { display: block; } .dark-theme #topnav.stick .logo .logo-dark { display: none; } @media (min-width: 992px) { .dark-theme #topnav .navigation-menu > li > a { color: #ddd; } .dark-theme #topnav .navigation-menu > li > a:hover { color: #f986d8; } .dark-theme #topnav .navigation-menu > li.active > a { color: #7A4DB3; } .dark-theme #topnav.stick .navigation-menu > li > a { color: #ddd; } .dark-theme #topnav.stick .navigation-menu > li > a:hover { color: #f986d8; } .dark-theme #topnav.stick .navigation-menu > li.active > a { color: #7A4DB3; } } .dark-theme #topnav .menu-extras .menu-item > div > a, .dark-theme #topnav .menu-extras .menu-item > div > a > i, .dark-theme #topnav.stick .menu-extras .menu-item > div > a, .dark-theme #topnav.stick .menu-extras .menu-item > div > a > i { color: #ddd; } .dark-theme #topnav .menu-extras .menu-item > div > a:hover > i, .dark-theme #topnav.stick .menu-extras .menu-item > div > a:hover > i { color: #f986d8 !important; } .dark-theme #topnav.stick .menu-extras { border-color: rgba(255,255,255,.08); } .dark-theme #topnav.stick .toggle-inner { background-color: #ddd; } .dark-theme #navigation { background: #1a1a1a; } .dark-theme .navigation-menu > li > a { color: #ddd; } /* ── напрямки (.dy-menu) ── */ .dark-theme .dylan-menu-alt .dy-menu { background: #242427; } .dark-theme .dy-menu-body { background: #242427; color: #c8c8c8; } .dark-theme .dy-menu-body h2 { color: #fff; } .dark-theme .dy-menu-body h4 { color: #7A4DB3; } .dark-theme .dy-menu-body p { color: #b0b0b0; } .dark-theme .btn-dark { background-color: #7A4DB3; border-color: #7A4DB3; color: #fff; } .dark-theme .btn-dark:hover { background-color: #f986d8; border-color: #f986d8; color: #1a1a1a; } .dark-theme .btn-dark-out { color: #ddd; border-color: #555; background-color: transparent; } .dark-theme .btn-dark-out:hover { color: #f986d8; border-color: #f986d8; } /* ── team ── */ .dark-theme .team-member { background: #242427; } .dark-theme .team-info h4 { color: #fff; } .dark-theme .team-info .serif { color: #7A4DB3; } .dark-theme .team-info p { color: #a8a8a8; } .dark-theme .team-social a { color: #888; } .dark-theme .team-social a:hover { color: #f986d8; } /* ── schedule ── */ .dark-theme .dylan-tabs .nav-tabs { border-color: #333; } .dark-theme .dylan-tabs .nav-tabs > li > a { background: #2a2a2a; border-color: #333; color: #999; } .dark-theme .dylan-tabs .nav-tabs > li.active > a { background: #7A4DB3; border-color: #7A4DB3; color: #fff; } .dark-theme .dylan-tabs .nav-tabs > li > a:hover { background: #f986d8; border-color: #f986d8; color: #1a1a1a; } .dark-theme .dylan-menu > li { border-color: #333; } .dark-theme .dylan-menu-title { color: #fff; } .dark-theme .dylan-menu-value { color: #7A4DB3; } .dark-theme .dylan-menu-text { color: #999; } /* ── pricing ── */ .dark-theme .pricing-table { background: #242427; border-color: #333; box-shadow: 0 4px 12px rgba(0,0,0,.4); } .dark-theme .pricing-table .pricing-head h4 { color: #fff; } .dark-theme .pricing-table .price i { color: #7A4DB3; } .dark-theme .pricing-table .features li { border-color: #333; color: #b8b8b8; } .dark-theme .pricing-table .features li span { color: #b8b8b8; } .dark-theme .pricing-table .pricing-footer p { color: #888; } .dark-theme .title h4.rr, .dark-theme .title h4.arenda { color: #888; } /* ── feedbacks parallax ── */ .dark-theme .parallax-overlay { background: rgba(0,0,0,.65); } /* ── photo gallery — ховер у фірмовому фіолетовому ── */ .dark-theme .gallery-caption { background: rgba(122,77,179,.85); } /* ── contact ── */ .dark-theme #contact .icon-box-basic { color: #b8b8b8; } .dark-theme #contact .icon-box-basic h4 { color: #fff; } .dark-theme #contact .icon-box-basic i { color: #7A4DB3; } .dark-theme .form-control { background: #2a2a2a !important; color: #f0f0f0 !important; border-color: #3a3a3a !important; } .dark-theme .form-control:focus { border-color: #7A4DB3 !important; background: #2f2f2f !important; } .dark-theme .form-control::placeholder { color: #777 !important; } .dark-theme .btn-color-out { color: #7A4DB3; border-color: #7A4DB3; background: transparent; } .dark-theme .btn-color-out:hover { background: #f986d8; color: #1a1a1a; border-color: #f986d8; } /* ── footer ── */ .dark-theme #footer-widgets { background: #141414; } .dark-theme #footer { background: #0e0e0e; } .dark-theme #footer-widgets h5 { color: #fff; } .dark-theme .footer-newsletter p.serif, .dark-theme #footer-widgets p { color: #b0b0b0; } .dark-theme .social-list a { color: #888; } .dark-theme .social-list a:hover, .dark-theme .social-list a:hover > i { color: #f986d8 !important; } .dark-theme .social-list .lang.current a, .dark-theme .social-list .lang a:hover { color: #fff; } .dark-theme .footer-newsletter .newsletter-btn { background-color: #7A4DB3; border-color: #7A4DB3; color: #fff; } .dark-theme .footer-newsletter .newsletter-btn:hover { background-color: #f986d8; border-color: #f986d8; color: #1a1a1a; } /* ── modal booking ── */ .dark-theme .modal-content { background: #242427; color: #ddd; } .dark-theme .modal-header { border-color: #333; } .dark-theme .modal-footer { border-color: #333; } .dark-theme .modal-header .modal-title { color: #fff; } .dark-theme .modal-header .close { color: #ddd; opacity: .8; } .dark-theme .modal-header .close:hover { color: #f986d8; opacity: 1; } .dark-theme #successMessage { background: rgba(46,125,50,.15); color: #8edc91; padding: 12px; border-radius: 4px; } .dark-theme .btn-primary { background-color: #7A4DB3; border-color: #7A4DB3; color: #fff; } .dark-theme .btn-primary:hover { background-color: #f986d8; border-color: #f986d8; color: #1a1a1a; } /* ── search modal ── */ .dark-theme #search-modal { background: rgba(0,0,0,.92); } /* ── newsletter ── */ .dark-theme .newsletter-form .form-control { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.15) !important; color: #fff !important; } /* ── language switcher (хедер + футер) ── */ .dark-theme .language-select li a { color: rgba(255,255,255,.55); } .dark-theme .language-select li.active a, .dark-theme #topnav.stick .language-select li.active a { color: #7A4DB3; } .dark-theme .language-select li a:hover, .dark-theme #topnav.stick .language-select li a:hover { color: #f986d8; } /* ── затемнення hero / about картинок ── */ .dark-theme #about .img-holder.db { filter: brightness(.85); } .dark-theme #home .slides img { filter: brightness(.9); } /* ── повзунок hover для мобільного бургера ── */ .dark-theme .menu-toggle:hover .toggle-inner { background-color: #f986d8; }