hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add darkmode switch

Browse Source
This commit is contained in:
Ermin Zoronjic 2026-04-28 21:57:39 +02:00
parent c1345eaca7
commit 2cb39f0c55
16 changed files with 501 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
parfum-shop/src/App.css
View File

@ -10,6 +10,52 @@ body,
font-family: "Questrial", Arial, Helvetica, sans-serif; font-family: "Questrial", Arial, Helvetica, sans-serif;
} }
body { #root {
background: #efefef; background: var(--theme-bg);
color: var(--theme-text);
}
body {
background: var(--theme-bg);
}
.navbar--light .nav-pill,
.navbar--light .nav-link,
[class*="-page"],
[class*="-shell"],
[class*="-card"],
[class*="-panel"],
[class*="-box"],
button,
input,
textarea {
transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}
body.theme-dark .navbar--light .nav-pill {
background: rgba(38, 38, 38, 0.88);
border-color: rgba(234, 234, 234, 0.26);
}
body.theme-dark .navbar--light .nav-link {
color: var(--theme-white);
}
body.theme-dark .navbar--light .nav-link:hover,
body.theme-dark .navbar--light .nav-link.active {
background: rgba(234, 234, 234, 0.15);
}
body.theme-dark .navbar--light .nav-theme-switch__track {
border-color: rgba(234, 234, 234, 0.3);
background: rgba(234, 234, 234, 0.14);
}
body.theme-dark .navbar--light .nav-brand-logo {
filter: invert(1) brightness(1.08);
}
body.theme-light .navbar--light .nav-link:hover,
body.theme-light .navbar--light .nav-link.active {
background: var(--theme-surface-soft);
} }

30
parfum-shop/src/App.jsx
View File

@ -1,4 +1,4 @@
import { useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { Routes, Route, useLocation } from "react-router"; import { Routes, Route, useLocation } from "react-router";
import LandingPage from "./pages/LandingPage"; import LandingPage from "./pages/LandingPage";
import ProductDetailPage from "./components/ProductDetailPage"; import ProductDetailPage from "./components/ProductDetailPage";
@ -14,17 +14,44 @@ import ScrollToTop from "./components/ScrollToTop";
import ShopDrawer from "./components/ShopDrawer"; import ShopDrawer from "./components/ShopDrawer";
import CartToast from "./components/CartToast"; import CartToast from "./components/CartToast";
import useScrollTextReveal from "./hooks/useScrollTextReveal"; import useScrollTextReveal from "./hooks/useScrollTextReveal";
import { ThemeProvider } from "./theme/ThemeContext";
import "./style/textReveal.css"; import "./style/textReveal.css";
const THEME_STORAGE_KEY = "atmos-theme";
function App() { function App() {
const location = useLocation(); const location = useLocation();
const routeContentRef = useRef(null); const routeContentRef = useRef(null);
const [theme, setTheme] = useState(() => {
if (typeof window === "undefined") return "dark";
const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
return storedTheme === "light" ? "light" : "dark";
});
const shouldFlushFooter = const shouldFlushFooter =
location.pathname === "/" || location.pathname.startsWith("/duft/"); location.pathname === "/" || location.pathname.startsWith("/duft/");
useScrollTextReveal(routeContentRef, [location.pathname]); useScrollTextReveal(routeContentRef, [location.pathname]);
useEffect(() => {
if (typeof document === "undefined") return;
document.body.classList.remove("theme-dark", "theme-light");
document.body.classList.add(theme === "light" ? "theme-light" : "theme-dark");
document.documentElement.style.colorScheme = theme === "light" ? "light" : "dark";
if (typeof window !== "undefined") {
window.localStorage.setItem(THEME_STORAGE_KEY, theme);
}
}, [theme]);
const toggleTheme = () => {
setTheme((currentTheme) => (currentTheme === "dark" ? "light" : "dark"));
};
const isLight = theme === "light";
return ( return (
<ThemeProvider value={{ theme, isLight, toggleTheme }}>
<> <>
<ScrollToTop /> <ScrollToTop />
@ -46,6 +73,7 @@ function App() {
<Footer flushTop={shouldFlushFooter} /> <Footer flushTop={shouldFlushFooter} />
<SupportChatbot /> <SupportChatbot />
</> </>
</ThemeProvider>
); );
} }

152
parfum-shop/src/components/ProductDetailPage.css
View File

@ -2,7 +2,7 @@
.detail-page { .detail-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 0; padding: 26px 38px 0;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -10,8 +10,8 @@
} }
.detail-shell { .detail-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
border-radius: 0px; border-radius: 0px;
width: 100%; width: 100%;
max-width: 1680px; max-width: 1680px;
@ -30,7 +30,7 @@
gap: 20px; gap: 20px;
min-height: 72px; min-height: 72px;
padding: 18px 0; padding: 18px 0;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--theme-border);
margin-bottom: 28px; margin-bottom: 28px;
} }
@ -45,13 +45,13 @@
.detail-topbar-label { .detail-topbar-label {
font-size: 11px; font-size: 11px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #777; color: var(--theme-text-muted);
} }
.detail-topbar-name { .detail-topbar-name {
font-size: 13px; font-size: 13px;
letter-spacing: 0.16em; letter-spacing: 0.16em;
color: #1f1f1f; color: var(--theme-text);
} }
/* --- Topbar End --- */ /* --- Topbar End --- */
@ -67,7 +67,7 @@
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: #1f1f1f; color: var(--theme-text);
letter-spacing: 0.01em; letter-spacing: 0.01em;
transition: opacity 0.2s ease, transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease;
} }
@ -132,7 +132,7 @@
height: 92px; height: 92px;
border: none; border: none;
border-radius: 0px; border-radius: 0px;
background: #fff; background: var(--theme-paper);
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
@ -171,7 +171,7 @@
.detail-meta-grid > div { .detail-meta-grid > div {
padding: 14px 0 0; padding: 14px 0 0;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.detail-meta-grid span { .detail-meta-grid span {
@ -179,7 +179,7 @@
margin-bottom: 8px; margin-bottom: 8px;
font-size: 11px; font-size: 11px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.detail-meta-grid p { .detail-meta-grid p {
@ -205,8 +205,8 @@
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
padding: 22px; padding: 22px;
background: #f1f1f1; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
} }
.detail-structure h3 { .detail-structure h3 {
@ -214,7 +214,7 @@
letter-spacing: 0.24em; letter-spacing: 0.24em;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
color: #1f1f1f; color: var(--theme-text);
} }
.structure-block { .structure-block {
@ -224,7 +224,7 @@
gap: 10px; gap: 10px;
padding: 14px 14px 14px 16px; padding: 14px 14px 14px 16px;
background: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.42);
border: 1px solid #e1e1e1; border: 1px solid var(--theme-border);
} }
.structure-block::before { .structure-block::before {
@ -253,7 +253,7 @@
margin-bottom: 0; margin-bottom: 0;
font-size: 11px; font-size: 11px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #555; color: var(--theme-text-muted);
} }
.structure-block:nth-of-type(1) .structure-phase { .structure-block:nth-of-type(1) .structure-phase {
@ -289,26 +289,26 @@
box-sizing: border-box; box-sizing: border-box;
overflow-wrap: break-word; overflow-wrap: break-word;
word-break: break-word; word-break: break-word;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
} }
.structure-block:nth-of-type(1) .structure-tag { .structure-block:nth-of-type(1) .structure-tag {
background: #ffffff; background: var(--theme-paper);
border-color: #f0e6df; border-color: #f0e6df;
color: #555; color: var(--theme-text-muted);
} }
.structure-block:nth-of-type(2) .structure-tag { .structure-block:nth-of-type(2) .structure-tag {
background: #fff5ed; background: #fff5ed;
border-color: #ffdecc; border-color: #ffdecc;
color: #444; color: var(--theme-text-muted);
} }
.structure-block:nth-of-type(3) .structure-tag { .structure-block:nth-of-type(3) .structure-tag {
background: #ffece0; background: #ffece0;
border-color: #ffad80; border-color: #ffad80;
color: #1f1f1f; color: var(--theme-text);
} }
/* --- Duftstruktur End --- */ /* --- Duftstruktur End --- */
@ -327,14 +327,14 @@
.structure-info-label { .structure-info-label {
font-size: 11px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: var(--theme-text-muted);
} }
.structure-info-box p { .structure-info-box p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
color: #3f3f3f; color: var(--theme-text-muted);
} }
.structure-info-legend { .structure-info-legend {
@ -351,7 +351,7 @@
gap: 10px; gap: 10px;
font-size: 13px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #666; color: var(--theme-text-muted);
} }
.structure-info-dot { .structure-info-dot {
@ -388,14 +388,14 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 11px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: #555; color: var(--theme-text-muted);
} }
.mood-box p { .mood-box p {
font-size: 16px; font-size: 16px;
line-height: 1.65; line-height: 1.65;
margin: 0; margin: 0;
color: #1f1f1f; color: var(--theme-text);
} }
/* --- Mood Box End --- */ /* --- Mood Box End --- */
@ -410,8 +410,8 @@
} }
.accordion-item { .accordion-item {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
border-left: 3px solid #d9d9d9; /* Subtiler Rahmen im Normalzustand */ border-left: 3px solid #d9d9d9; /* Subtiler Rahmen im Normalzustand */
transition: border-color 0.2s ease, background 0.2s ease; transition: border-color 0.2s ease, background 0.2s ease;
} }
@ -433,7 +433,7 @@
font-size: 12px; font-size: 12px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
font-weight: 500; font-weight: 500;
color: #1f1f1f; color: var(--theme-text);
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
@ -467,7 +467,7 @@
font-size: 16px; font-size: 16px;
line-height: 1.65; line-height: 1.65;
margin: 0; margin: 0;
color: #1f1f1f; color: var(--theme-text);
padding-top: 6px; padding-top: 6px;
} }
@ -488,7 +488,7 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid var(--theme-border);
} }
.detail-heading-copy { .detail-heading-copy {
@ -501,7 +501,7 @@
display: inline-block; display: inline-block;
font-size: 11px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #777; color: var(--theme-text-muted);
} }
.detail-heading h1 { .detail-heading h1 {
@ -510,14 +510,14 @@
line-height: 0.92; line-height: 0.92;
font-weight: 300; font-weight: 300;
letter-spacing: -0.045em; letter-spacing: -0.045em;
color: #131313; color: var(--theme-text);
} }
.detail-heading p { .detail-heading p {
max-width: 640px; max-width: 640px;
font-size: 18px; font-size: 18px;
line-height: 1.45; line-height: 1.45;
color: #5f5f5f; color: var(--theme-text-muted);
margin: 0; margin: 0;
} }
@ -532,7 +532,7 @@
margin-bottom: 0; margin-bottom: 0;
font-size: 11px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: var(--theme-text-muted);
} }
/* --- Description Section Start --- */ /* --- Description Section Start --- */
@ -553,7 +553,7 @@
.detail-copy-block { .detail-copy-block {
padding-top: 14px; padding-top: 14px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.detail-copy-label { .detail-copy-label {
@ -561,7 +561,7 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 11px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: var(--theme-text-muted);
} }
.detail-copy-block p { .detail-copy-block p {
@ -569,7 +569,7 @@
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
color: #1f1f1f; color: var(--theme-text);
} }
/* --- Description Section End --- */ /* --- Description Section End --- */
@ -579,8 +579,8 @@
.delivery-box { .delivery-box {
margin-top: 4px; margin-top: 4px;
padding: 20px; padding: 20px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #efefef; background: var(--theme-bg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@ -621,20 +621,20 @@
.delivery-item--full { .delivery-item--full {
grid-column: 1 / -1; grid-column: 1 / -1;
padding-top: 4px; padding-top: 4px;
border-top: 1px solid #d9d9d9; border-top: 1px solid var(--theme-border);
} }
.delivery-item-label { .delivery-item-label {
font-size: 11px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: #666; color: var(--theme-text-muted);
} }
.delivery-item p { .delivery-item p {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
color: #1f1f1f; color: var(--theme-text);
} }
/* --- Delivery Box End --- */ /* --- Delivery Box End --- */
@ -680,7 +680,7 @@
} }
.comment-card { .comment-card {
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #ff6a0023; background: #ff6a0023;
padding: 18px; padding: 18px;
display: flex; display: flex;
@ -692,21 +692,21 @@
.comment-card-title { .comment-card-title {
font-size: 12px; font-size: 12px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #666; color: var(--theme-text-muted);
} }
.comment-card p { .comment-card p {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.55; line-height: 1.55;
color: #1f1f1f; color: var(--theme-text);
flex: 1; flex: 1;
} }
.comment-card-author { .comment-card-author {
font-size: 13px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #777; color: var(--theme-text-muted);
} }
/* --- Comment Spotlight End --- */ /* --- Comment Spotlight End --- */
@ -737,7 +737,7 @@
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.55; line-height: 1.55;
color: #5f5f5f; color: var(--theme-text-muted);
} }
.review-section-main { .review-section-main {
@ -752,7 +752,7 @@
line-height: 1; line-height: 1;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.review-summary-copy { .review-summary-copy {
@ -771,7 +771,7 @@
.review-count { .review-count {
font-size: 12px; font-size: 12px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #666; color: var(--theme-text-muted);
} }
.review-panel { .review-panel {
@ -792,23 +792,23 @@
align-items: center; align-items: center;
gap: 14px; gap: 14px;
width: 100%; width: 100%;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: transparent; background: transparent;
padding: 12px 14px; padding: 12px 14px;
font-size: 13px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1f1f1f; color: var(--theme-text);
cursor: pointer; cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease; transition: border-color 0.2s ease, background 0.2s ease;
} }
.review-toggle:hover { .review-toggle:hover {
border-color: #bcbcbc; border-color: var(--theme-border);
background: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.45);
} }
.review-panel.is-open .review-toggle { .review-panel.is-open .review-toggle {
border-color: #c8c8c8; border-color: var(--theme-border);
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
} }
@ -837,9 +837,9 @@
right: 28px; right: 28px;
width: 12px; width: 12px;
height: 12px; height: 12px;
background: #efefef; background: var(--theme-bg);
border-left: 1px solid #d9d9d9; border-left: 1px solid var(--theme-border);
border-top: 1px solid #d9d9d9; border-top: 1px solid var(--theme-border);
transform: rotate(45deg); transform: rotate(45deg);
} }
@ -848,8 +848,8 @@
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #efefef; background: var(--theme-bg);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
} }
@ -863,7 +863,7 @@
.review-detail-label { .review-detail-label {
font-size: 11px; font-size: 11px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #666; color: var(--theme-text-muted);
} }
.review-detail-bar { .review-detail-bar {
@ -882,15 +882,15 @@
.review-detail-value { .review-detail-value {
font-size: 13px; font-size: 13px;
color: #1f1f1f; color: var(--theme-text);
text-align: right; text-align: right;
} }
.review-write-button { .review-write-button {
margin-top: 4px; margin-top: 4px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #fff; background: var(--theme-paper);
color: #999; color: var(--theme-text-muted);
padding: 11px 14px; padding: 11px 14px;
font-size: 12px; font-size: 12px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -914,7 +914,7 @@
align-items: center; align-items: center;
min-height: 36px; min-height: 36px;
padding: 8px 14px; padding: 8px 14px;
border: 1px solid #d2d2d2; border: 1px solid var(--theme-border);
border-radius: 0px; border-radius: 0px;
background: transparent; background: transparent;
font-size: 14px; font-size: 14px;
@ -932,9 +932,9 @@
} }
.size-card { .size-card {
border: 1px solid #d0d0d0; border: 1px solid var(--theme-border);
border-radius: 0px; border-radius: 0px;
background: #fff; background: var(--theme-paper);
padding: 20px 18px 18px; padding: 20px 18px 18px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -943,7 +943,7 @@
.size-card:hover { .size-card:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: #bdbdbd; border-color: var(--theme-border);
} }
.size-card.active { .size-card.active {
@ -955,7 +955,7 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 13px; font-size: 13px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: #1f1f1f; color: var(--theme-text);
} }
.size-card strong { .size-card strong {
@ -968,7 +968,7 @@
.size-card small { .size-card small {
font-size: 12px; font-size: 12px;
color: #6a6a6a; color: var(--theme-text-muted);
} }
/* --- Size Selection End --- */ /* --- Size Selection End --- */
@ -996,7 +996,7 @@
.discovery-note-text p { .discovery-note-text p {
font-size: 13px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
color: #d0d0d0; color: var(--theme-text-muted);
margin: 0; margin: 0;
max-width: 520px; max-width: 520px;
} }
@ -1060,10 +1060,10 @@
width: 100%; width: 100%;
min-height: 48px; min-height: 48px;
margin-top: 10px; margin-top: 10px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
border-radius: 0; border-radius: 0;
background: #f8f8f8; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
font-size: 12px; font-size: 12px;
letter-spacing: 0.13em; letter-spacing: 0.13em;
cursor: pointer; cursor: pointer;
@ -1113,7 +1113,7 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
background: #fff; background: var(--theme-paper);
color: #ff6a00; color: #ff6a00;
} }
@ -1300,3 +1300,5 @@
} }
/* --- Responsive End --- */ /* --- Responsive End --- */

13
parfum-shop/src/components/SharedNavbar.jsx
View File

@ -1,9 +1,11 @@
import { Link } from "react-router"; import { Link } from "react-router";
import { useShop } from "../shop/useShop"; import { useShop } from "../shop/useShop";
import { useTheme } from "../theme/ThemeContext";
import "../style/navbar.css"; import "../style/navbar.css";
function SharedNavbar({ variant = "light", active = "" }) { function SharedNavbar({ variant = "light", active = "" }) {
const { cart, openCart, openProfile, user } = useShop(); const { cart, openCart, openProfile, user } = useShop();
const { isLight, toggleTheme } = useTheme();
const cartLabel = const cartLabel =
cart.total_quantity > 0 ? `Cart ${cart.total_quantity}` : "Cart"; cart.total_quantity > 0 ? `Cart ${cart.total_quantity}` : "Cart";
const logoSrc = const logoSrc =
@ -31,6 +33,17 @@ function SharedNavbar({ variant = "light", active = "" }) {
<button type="button" className="nav-link nav-button" onClick={openProfile}> <button type="button" className="nav-link nav-button" onClick={openProfile}>
{user ? "Profile" : "Profile"} {user ? "Profile" : "Profile"}
</button> </button>
<button
type="button"
className={`nav-link nav-button nav-theme-switch ${isLight ? "is-light" : ""}`}
onClick={toggleTheme}
aria-label={isLight ? "Switch to dark mode" : "Switch to light mode"}
aria-pressed={isLight}
>
<span className="nav-theme-switch__track" aria-hidden="true">
<span className="nav-theme-switch__thumb" />
</span>
</button>
</div> </div>
</nav> </nav>
); );

108
parfum-shop/src/components/ShopDrawer.css
View File

@ -22,9 +22,9 @@
height: 100vh; height: 100vh;
padding: 22px; padding: 22px;
overflow-y: auto; overflow-y: auto;
background: #f5f5f5; background: var(--theme-surface);
border-left: 1px solid #d9d9d9; border-left: 1px solid var(--theme-border);
color: #1f1f1f; color: var(--theme-text);
transform: translateX(100%); transform: translateX(100%);
transition: transform 0.24s ease; transition: transform 0.24s ease;
} }
@ -44,7 +44,7 @@
.drawer-top { .drawer-top {
padding-bottom: 18px; padding-bottom: 18px;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid var(--theme-border);
margin-bottom: 18px; margin-bottom: 18px;
font-size: 12px; font-size: 12px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
@ -54,9 +54,9 @@
.cart-toast-close { .cart-toast-close {
width: 34px; width: 34px;
height: 34px; height: 34px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f1f1f1; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
cursor: pointer; cursor: pointer;
} }
@ -74,8 +74,8 @@
.drawer-section { .drawer-section {
padding: 18px; padding: 18px;
background: #f1f1f1; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
} }
.drawer-section h2, .drawer-section h2,
@ -89,7 +89,7 @@
margin-bottom: 12px; margin-bottom: 12px;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.drawer-grid { .drawer-grid {
@ -113,17 +113,17 @@
font-size: 11px; font-size: 11px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: #666; color: var(--theme-text-muted);
} }
.shop-field input { .shop-field input {
width: 100%; width: 100%;
min-height: 42px; min-height: 42px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
border-radius: 0; border-radius: 0;
background: #f8f8f8; background: var(--theme-surface-soft);
padding: 10px 11px; padding: 10px 11px;
color: #1f1f1f; color: var(--theme-text);
font: inherit; font: inherit;
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
@ -158,9 +158,9 @@
.drawer-secondary { .drawer-secondary {
min-height: 38px; min-height: 38px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
padding: 0 13px; padding: 0 13px;
} }
@ -176,8 +176,8 @@
.read-block, .read-block,
.status-box, .status-box,
.requirement-row { .requirement-row {
background: #f8f8f8; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
} }
.cart-item { .cart-item {
@ -197,7 +197,7 @@
.drawer-muted, .drawer-muted,
.order-card p { .order-card p {
margin: 0; margin: 0;
color: #666; color: var(--theme-text-muted);
font-size: 13px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
} }
@ -206,8 +206,8 @@
display: grid; display: grid;
grid-template-columns: 32px 32px 32px; grid-template-columns: 32px 32px 32px;
align-items: center; align-items: center;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f1f1f1; background: var(--theme-surface-soft);
} }
.cart-controls button { .cart-controls button {
@ -223,8 +223,8 @@
.cart-remove { .cart-remove {
min-height: 34px; min-height: 34px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
padding: 0 10px; padding: 0 10px;
} }
@ -233,8 +233,8 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
min-height: 60px; min-height: 60px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
padding: 12px; padding: 12px;
} }
@ -271,8 +271,8 @@
.totals-box .discount-explainer { .totals-box .discount-explainer {
display: block; display: block;
padding: 12px; padding: 12px;
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
} }
.discount-explainer span { .discount-explainer span {
@ -282,7 +282,7 @@
.discount-explainer p { .discount-explainer p {
margin: 0; margin: 0;
color: #1f1f1f; color: var(--theme-text);
font-size: 13px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
} }
@ -293,16 +293,16 @@
.total-row { .total-row {
padding-top: 10px; padding-top: 10px;
border-top: 1px solid #d6d6d6; border-top: 1px solid var(--theme-border);
font-size: 18px; font-size: 18px;
} }
.drawer-error { .drawer-error {
margin: 0; margin: 0;
padding: 12px 14px; padding: 12px 14px;
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
} }
.drawer-error { .drawer-error {
@ -332,7 +332,7 @@
.read-block span, .read-block span,
.requirement-row span, .requirement-row span,
.totals-box span { .totals-box span {
color: #666; color: var(--theme-text-muted);
font-size: 11px; font-size: 11px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@ -349,16 +349,16 @@
.sample-credit-list span { .sample-credit-list span {
padding: 10px; padding: 10px;
background: #f8f8f8; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
font-size: 13px; font-size: 13px;
} }
.pref-toggle { .pref-toggle {
min-height: 58px; min-height: 58px;
padding: 12px; padding: 12px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -373,11 +373,11 @@
.subscription-list { .subscription-list {
margin-top: 16px; margin-top: 16px;
padding-top: 16px; padding-top: 16px;
border-top: 1px solid #d6d6d6; border-top: 1px solid var(--theme-border);
} }
.subscription-list-title { .subscription-list-title {
color: #666; color: var(--theme-text-muted);
font-size: 10px; font-size: 10px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
@ -389,8 +389,8 @@
gap: 12px; gap: 12px;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
background: #f8f8f8; background: var(--theme-surface-soft);
} }
.subscription-row div { .subscription-row div {
@ -400,16 +400,16 @@
} }
.subscription-row span { .subscription-row span {
color: #666; color: var(--theme-text-muted);
font-size: 12px; font-size: 12px;
} }
.subscription-row button { .subscription-row button {
min-height: 34px; min-height: 34px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
border-radius: 0; border-radius: 0;
background: #f1f1f1; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
padding: 0 12px; padding: 0 12px;
cursor: pointer; cursor: pointer;
} }
@ -444,15 +444,15 @@
z-index: 100; z-index: 100;
width: min(360px, calc(100vw - 44px)); width: min(360px, calc(100vw - 44px));
padding: 18px; padding: 18px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f5f5f5; background: var(--theme-surface);
color: #1f1f1f; color: var(--theme-text);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
} }
.cart-toast p { .cart-toast p {
margin: 8px 38px 14px 0; margin: 8px 38px 14px 0;
color: #666; color: var(--theme-text-muted);
} }
.cart-toast > button:last-child { .cart-toast > button:last-child {
@ -466,9 +466,9 @@
.cart-toast > button.cart-toast-close:last-child { .cart-toast > button.cart-toast-close:last-child {
width: 34px; width: 34px;
min-height: 34px; min-height: 34px;
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #f1f1f1; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
} }
.cart-toast-close { .cart-toast-close {
@ -493,3 +493,5 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }

55
parfum-shop/src/components/SupportChatbot.css
View File

@ -34,8 +34,8 @@
z-index: 1199; z-index: 1199;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
overflow: hidden; overflow: hidden;
} }
@ -46,7 +46,7 @@
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
padding: 18px 18px 16px; padding: 18px 18px 16px;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid var(--theme-border);
background: #1f1f1f; background: #1f1f1f;
} }
@ -87,7 +87,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
background: #f5f5f5; background: var(--theme-surface);
} }
.chatbot-message { .chatbot-message {
@ -100,9 +100,9 @@
.chatbot-message--bot { .chatbot-message--bot {
align-self: flex-start; align-self: flex-start;
background: #ececec; background: var(--theme-surface-soft);
color: #1f1f1f; color: var(--theme-text);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
} }
.chatbot-message--user { .chatbot-message--user {
@ -112,22 +112,22 @@
} }
.chatbot-message--typing { .chatbot-message--typing {
color: #666; color: var(--theme-text-muted);
} }
.chatbot-quick-actions { .chatbot-quick-actions {
padding: 14px 18px 16px; padding: 14px 18px 16px;
border-top: 1px solid #dcdcdc; border-top: 1px solid var(--theme-border);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
background: #fafafa; background: var(--theme-surface-soft);
} }
.chatbot-chip { .chatbot-chip {
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #fff; background: var(--theme-paper);
color: #1f1f1f; color: var(--theme-text);
padding: 9px 12px; padding: 9px 12px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
@ -136,13 +136,13 @@
.chatbot-chip:hover { .chatbot-chip:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: #bcbcbc; border-color: var(--theme-border);
} }
.chatbot-footer { .chatbot-footer {
padding: 14px 18px 18px; padding: 14px 18px 18px;
border-top: 1px solid #dcdcdc; border-top: 1px solid var(--theme-border);
background: #fff; background: var(--theme-paper);
} }
.chatbot-form { .chatbot-form {
@ -153,8 +153,8 @@
.chatbot-input { .chatbot-input {
width: 100%; width: 100%;
border: 1px solid #d3d3d3; border: 1px solid var(--theme-border);
background: #fff; background: var(--theme-paper);
padding: 12px 14px; padding: 12px 14px;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
@ -191,13 +191,13 @@
} }
.chatbot-link--muted { .chatbot-link--muted {
color: #777; color: var(--theme-text-muted);
cursor: default; cursor: default;
} }
.chatbot-action-area { .chatbot-action-area {
border-top: 1px solid #dcdcdc; border-top: 1px solid var(--theme-border);
background: #fafafa; background: var(--theme-surface-soft);
} }
.chatbot-section { .chatbot-section {
@ -205,7 +205,7 @@
} }
.chatbot-section + .chatbot-section { .chatbot-section + .chatbot-section {
border-top: 1px solid #e2e2e2; border-top: 1px solid var(--theme-border);
} }
.chatbot-section-label { .chatbot-section-label {
@ -213,7 +213,7 @@
margin-bottom: 10px; margin-bottom: 10px;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.chatbot-feedback-actions { .chatbot-feedback-actions {
@ -223,9 +223,9 @@
} }
.chatbot-feedback-btn { .chatbot-feedback-btn {
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
background: #fff; background: var(--theme-paper);
color: #1f1f1f; color: var(--theme-text);
padding: 10px 14px; padding: 10px 14px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
@ -234,7 +234,7 @@
.chatbot-feedback-btn:hover { .chatbot-feedback-btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: #bcbcbc; border-color: var(--theme-border);
} }
.chatbot-feedback-btn--primary { .chatbot-feedback-btn--primary {
@ -273,3 +273,4 @@
font-size: 20px; font-size: 20px;
} }
} }

30
parfum-shop/src/index.css
View File

@ -1,7 +1,18 @@
:root { :root {
font-family: "Questrial", Arial, Helvetica, sans-serif; font-family: "Questrial", Arial, Helvetica, sans-serif;
color: #1f1f1f; --theme-black: #262626;
background: #efefef; --theme-white: #eaeaea;
--theme-accent: #ff6a00;
--theme-bg: #262626;
--theme-surface: #2f2f2f;
--theme-surface-soft: #363636;
--theme-paper: #404040;
--theme-text: #eaeaea;
--theme-text-muted: #c8c8c8;
--theme-border: #4a4a4a;
color: var(--theme-text);
background: var(--theme-bg);
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
@ -21,8 +32,20 @@ html {
body { body {
margin: 0; margin: 0;
background: #efefef; background: var(--theme-bg);
color: var(--theme-text);
font-family: inherit; font-family: inherit;
transition: background-color 0.25s ease, color 0.25s ease;
}
body.theme-light {
--theme-bg: #eaeaea;
--theme-surface: #f5f5f5;
--theme-surface-soft: #f0f0f0;
--theme-paper: #ffffff;
--theme-text: #262626;
--theme-text-muted: #5f5f5f;
--theme-border: #d6d6d6;
} }
a { a {
@ -32,3 +55,4 @@ a {
button { button {
font: inherit; font: inherit;
} }

1
parfum-shop/src/main.jsx
View File

@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router"; import { BrowserRouter } from "react-router";
import App from "./App"; import App from "./App";
import { ShopProvider } from "./shop/ShopContext"; import { ShopProvider } from "./shop/ShopContext";
import "./index.css";
import "./App.css"; import "./App.css";
ReactDOM.createRoot(document.getElementById("root")).render( ReactDOM.createRoot(document.getElementById("root")).render(

69
parfum-shop/src/pages/AboutPage.css
View File

@ -1,6 +1,6 @@
.about-page { .about-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -8,8 +8,8 @@
} }
.about-shell { .about-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 38px; padding: 38px;
} }
@ -21,7 +21,7 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.about-hero { .about-hero {
@ -30,7 +30,7 @@
gap: 28px; gap: 28px;
align-items: end; align-items: end;
padding-bottom: 36px; padding-bottom: 36px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid var(--theme-border);
} }
.about-hero-copy h1 { .about-hero-copy h1 {
@ -39,7 +39,7 @@
line-height: 0.92; line-height: 0.92;
font-weight: 300; font-weight: 300;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: #131313; color: var(--theme-text);
} }
.about-intro { .about-intro {
@ -47,7 +47,7 @@
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.about-hero-panel { .about-hero-panel {
@ -64,7 +64,7 @@
margin: 10px 0 0; margin: 10px 0 0;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
color: #1f1f1f; color: var(--theme-text);
} }
.about-panel-meta { .about-panel-meta {
@ -81,7 +81,7 @@
margin: 8px 0 0; margin: 8px 0 0;
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
color: #1f1f1f; color: var(--theme-text);
} }
.about-section { .about-section {
@ -103,7 +103,7 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.about-section-copy { .about-section-copy {
@ -118,7 +118,7 @@
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.about-quote-block { .about-quote-block {
@ -147,8 +147,8 @@
.about-card { .about-card {
padding: 24px; padding: 24px;
background: #efefef; background: var(--theme-bg);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
min-height: 260px; min-height: 260px;
} }
@ -157,14 +157,14 @@
font-size: 24px; font-size: 24px;
line-height: 1.05; line-height: 1.05;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.about-card p { .about-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.about-origin-section { .about-origin-section {
@ -173,21 +173,21 @@
gap: 28px; gap: 28px;
margin-top: 38px; margin-top: 38px;
padding-top: 38px; padding-top: 38px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.about-origin-box { .about-origin-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 18px;
background: #efefef; background: var(--theme-bg);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 24px; padding: 24px;
} }
.about-origin-box > div { .about-origin-box > div {
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid var(--theme-border);
} }
.about-origin-box > div:last-child { .about-origin-box > div:last-child {
@ -242,7 +242,7 @@
} }
.about-btn--primary { .about-btn--primary {
background: #fff; background: var(--theme-paper);
color: #ff6a00; color: #ff6a00;
} }
@ -261,21 +261,21 @@
.about-proof-item { .about-proof-item {
padding: 18px; padding: 18px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #fafafa; background: var(--theme-surface-soft);
} }
.about-proof-item p { .about-proof-item p {
margin: 10px 0 0; margin: 10px 0 0;
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
color: #3f3f3f; color: var(--theme-text-muted);
} }
.about-process-section { .about-process-section {
margin-top: 38px; margin-top: 38px;
padding-top: 38px; padding-top: 38px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.about-credentials-grid { .about-credentials-grid {
@ -301,14 +301,14 @@
font-size: 24px; font-size: 24px;
line-height: 1.08; line-height: 1.08;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.about-credential-card p { .about-credential-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.about-method-section { .about-method-section {
@ -317,8 +317,8 @@
gap: 28px; gap: 28px;
margin-top: 38px; margin-top: 38px;
padding: 28px; padding: 28px;
background: #efefef; background: var(--theme-bg);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
} }
.about-method-copy h2 { .about-method-copy h2 {
@ -327,14 +327,14 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.about-method-copy p { .about-method-copy p {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.about-method-points { .about-method-points {
@ -345,7 +345,7 @@
.about-method-points > div { .about-method-points > div {
padding-bottom: 14px; padding-bottom: 14px;
border-bottom: 1px solid #d6d6d6; border-bottom: 1px solid var(--theme-border);
} }
.about-method-points > div:last-child { .about-method-points > div:last-child {
@ -357,14 +357,14 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.about-method-points p { .about-method-points p {
margin: 8px 0 0; margin: 8px 0 0;
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
color: #1f1f1f; color: var(--theme-text);
} }
.about-trust-note { .about-trust-note {
@ -382,7 +382,7 @@
margin: 10px 0 0; margin: 10px 0 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #1f1f1f; color: var(--theme-text);
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
@ -453,3 +453,4 @@
padding: 26px 20px; padding: 26px 20px;
} }
} }

25
parfum-shop/src/pages/DatenschutzPage.css
View File

@ -1,6 +1,6 @@
.datenschutz-page { .datenschutz-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -8,8 +8,8 @@
} }
.datenschutz-shell { .datenschutz-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 38px; padding: 38px;
} }
@ -18,12 +18,12 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.datenschutz-hero { .datenschutz-hero {
padding-bottom: 32px; padding-bottom: 32px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid var(--theme-border);
} }
.datenschutz-hero h1 { .datenschutz-hero h1 {
@ -32,7 +32,7 @@
line-height: 0.92; line-height: 0.92;
font-weight: 300; font-weight: 300;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: #131313; color: var(--theme-text);
} }
.datenschutz-intro { .datenschutz-intro {
@ -40,7 +40,7 @@
margin: 0; margin: 0;
font-size: 17px; font-size: 17px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.datenschutz-section { .datenschutz-section {
@ -50,7 +50,7 @@
align-items: start; align-items: start;
margin-top: 38px; margin-top: 38px;
padding-top: 38px; padding-top: 38px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.datenschutz-section-heading h2 { .datenschutz-section-heading h2 {
@ -59,14 +59,14 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.datenschutz-section-copy p { .datenschutz-section-copy p {
margin: 0 0 16px; margin: 0 0 16px;
font-size: 16px; font-size: 16px;
line-height: 1.75; line-height: 1.75;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.datenschutz-list { .datenschutz-list {
@ -79,7 +79,7 @@
.datenschutz-list li { .datenschutz-list li {
font-size: 16px; font-size: 16px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.datenschutz-note-box { .datenschutz-note-box {
@ -96,7 +96,7 @@
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #1f1f1f; color: var(--theme-text);
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
@ -132,3 +132,4 @@
font-size: 15px; font-size: 15px;
} }
} }

53
parfum-shop/src/pages/DiscoverySetPage.css
View File

@ -1,6 +1,6 @@
.discovery-page { .discovery-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -8,8 +8,8 @@
} }
.discovery-shell { .discovery-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 0 38px 38px; padding: 0 38px 38px;
} }
@ -26,7 +26,7 @@
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
color: #1f1f1f; color: var(--theme-text);
letter-spacing: 0.01em; letter-spacing: 0.01em;
transition: opacity 0.2s ease, transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease;
} }
@ -47,7 +47,7 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.discovery-hero { .discovery-hero {
@ -64,7 +64,7 @@
line-height: 0.94; line-height: 0.94;
font-weight: 300; font-weight: 300;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: #131313; color: var(--theme-text);
} }
.discovery-intro { .discovery-intro {
@ -72,7 +72,7 @@
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
line-height: 1.55; line-height: 1.55;
color: #3f3f3f; color: var(--theme-text-muted);
} }
.discovery-benefits { .discovery-benefits {
@ -92,7 +92,7 @@
.discovery-benefit-icon { .discovery-benefit-icon {
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
color: #1f1f1f; color: var(--theme-text);
} }
.discovery-benefit strong { .discovery-benefit strong {
@ -100,14 +100,14 @@
margin-bottom: 4px; margin-bottom: 4px;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.discovery-benefit p { .discovery-benefit p {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
color: #5a5a5a; color: var(--theme-text-muted);
} }
.discovery-hero-actions { .discovery-hero-actions {
@ -137,7 +137,7 @@
margin: 12px 0 0; margin: 12px 0 0;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: #555; color: var(--theme-text-muted);
} }
.discovery-mood-grid { .discovery-mood-grid {
@ -149,7 +149,7 @@
.discovery-mood-tile { .discovery-mood-tile {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
background: #eaeaea; background: var(--theme-surface-soft);
} }
.discovery-mood-tile img { .discovery-mood-tile img {
@ -175,7 +175,7 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.discovery-section-heading p { .discovery-section-heading p {
@ -183,7 +183,7 @@
margin: 18px 0 0; margin: 18px 0 0;
font-size: 16px; font-size: 16px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.discovery-section-heading--center { .discovery-section-heading--center {
@ -211,7 +211,7 @@
.discovery-product-image { .discovery-product-image {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
overflow: hidden; overflow: hidden;
background: #ececec; background: var(--theme-surface-soft);
} }
.discovery-product-image img { .discovery-product-image img {
@ -225,14 +225,14 @@
margin: 0 0 6px; margin: 0 0 6px;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.discovery-product-copy p { .discovery-product-copy p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.discovery-product-tags { .discovery-product-tags {
@ -247,9 +247,9 @@
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
padding: 7px 12px; padding: 7px 12px;
background: #e4e4e4; background: var(--theme-surface-soft);
font-size: 12px; font-size: 12px;
color: #1f1f1f; color: var(--theme-text);
} }
/* Steps */ /* Steps */
@ -290,8 +290,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #f1f1f1; background: var(--theme-surface-soft);
color: #111; color: var(--theme-text);
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
} }
@ -320,8 +320,8 @@
.discovery-comparison-card { .discovery-comparison-card {
padding: 28px; padding: 28px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #efefef; background: var(--theme-bg);
} }
.discovery-comparison-card--highlight { .discovery-comparison-card--highlight {
@ -343,21 +343,21 @@
.discovery-comparison-icon { .discovery-comparison-icon {
font-size: 28px; font-size: 28px;
line-height: 1; line-height: 1;
color: #1f1f1f; color: var(--theme-text);
} }
.discovery-comparison-head h3 { .discovery-comparison-head h3 {
margin: 0; margin: 0;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.discovery-comparison-card p { .discovery-comparison-card p {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.discovery-bottom-cta { .discovery-bottom-cta {
@ -447,3 +447,4 @@
font-size: 22px; font-size: 22px;
} }
} }

31
parfum-shop/src/pages/ImpressumPage.css
View File

@ -1,6 +1,6 @@
.impressum-page { .impressum-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -8,8 +8,8 @@
} }
.impressum-shell { .impressum-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 38px; padding: 38px;
} }
@ -18,12 +18,12 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.impressum-hero { .impressum-hero {
padding-bottom: 32px; padding-bottom: 32px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid var(--theme-border);
} }
.impressum-hero h1 { .impressum-hero h1 {
@ -32,7 +32,7 @@
line-height: 0.92; line-height: 0.92;
font-weight: 300; font-weight: 300;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: #131313; color: var(--theme-text);
} }
.impressum-intro { .impressum-intro {
@ -40,7 +40,7 @@
margin: 0; margin: 0;
font-size: 17px; font-size: 17px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.impressum-grid { .impressum-grid {
@ -52,8 +52,8 @@
.impressum-card { .impressum-card {
padding: 24px; padding: 24px;
background: #efefef; background: var(--theme-bg);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
min-height: 210px; min-height: 210px;
} }
@ -62,14 +62,14 @@
font-size: 26px; font-size: 26px;
line-height: 1.05; line-height: 1.05;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.impressum-card p { .impressum-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.impressum-section { .impressum-section {
@ -79,7 +79,7 @@
align-items: start; align-items: start;
margin-top: 38px; margin-top: 38px;
padding-top: 38px; padding-top: 38px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.impressum-section-heading h2 { .impressum-section-heading h2 {
@ -88,14 +88,14 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.impressum-section-copy p { .impressum-section-copy p {
margin: 0 0 16px; margin: 0 0 16px;
font-size: 16px; font-size: 16px;
line-height: 1.75; line-height: 1.75;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.impressum-note-box { .impressum-note-box {
@ -112,7 +112,7 @@
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #1f1f1f; color: var(--theme-text);
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
@ -149,3 +149,4 @@
font-size: 15px; font-size: 15px;
} }
} }

19
parfum-shop/src/pages/LandingPage.css
View File

@ -1,7 +1,7 @@
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #efefef; background: var(--theme-bg);
color: #1f1f1f; color: var(--theme-text);
} }
.visually-hidden { .visually-hidden {
@ -145,7 +145,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 26; z-index: 26;
background: #fff; background: var(--theme-paper);
display: grid; display: grid;
place-items: center; place-items: center;
will-change: transform; will-change: transform;
@ -193,7 +193,7 @@
line-height: 0.95; line-height: 0.95;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #1f1f1f; color: var(--theme-text);
} }
/* GRID */ /* GRID */
@ -207,8 +207,8 @@
position: relative; position: relative;
isolation: isolate; isolation: isolate;
overflow: hidden; overflow: hidden;
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
border-radius: 0; border-radius: 0;
padding: 18px; padding: 18px;
min-height: 360px; min-height: 360px;
@ -280,7 +280,7 @@
.product-id { .product-id {
font-size: 18px; font-size: 18px;
color: #5f5f5f; color: var(--theme-text-muted);
} }
.product-top h3 { .product-top h3 {
@ -332,7 +332,7 @@
max-width: 170px; max-width: 170px;
font-size: 15px; font-size: 15px;
line-height: 1.35; line-height: 1.35;
color: #5f5f5f; color: var(--theme-text-muted);
} }
.arrow { .arrow {
@ -405,7 +405,7 @@
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
background: #fff; background: var(--theme-paper);
color: #ff6a00; color: #ff6a00;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
@ -521,3 +521,4 @@
animation: none !important; animation: none !important;
} }
} }

26
parfum-shop/src/pages/SmallBatchPage.css
View File

@ -1,27 +1,27 @@
.small-page { .small-page {
min-height: 100vh; min-height: 100vh;
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: #efefef; background: var(--theme-bg);
color: #1f1f1f; color: var(--theme-text);
} }
.small-shell { .small-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 38px; padding: 38px;
} }
.small-hero { .small-hero {
max-width: 780px; max-width: 780px;
padding-bottom: 34px; padding-bottom: 34px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--theme-border);
margin-bottom: 28px; margin-bottom: 28px;
} }
.small-kicker { .small-kicker {
display: block; display: block;
margin-bottom: 12px; margin-bottom: 12px;
color: #666; color: var(--theme-text-muted);
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
} }
@ -41,15 +41,15 @@
.small-panel p, .small-panel p,
.release-card p { .release-card p {
margin: 0; margin: 0;
color: #666; color: var(--theme-text-muted);
line-height: 1.55; line-height: 1.55;
} }
.small-panel, .small-panel,
.release-card, .release-card,
.small-error { .small-error {
background: #f1f1f1; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
padding: 22px; padding: 22px;
} }
@ -77,13 +77,13 @@
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 14px; padding: 14px;
background: #f8f8f8; background: var(--theme-surface-soft);
border: 1px solid #dddddd; border: 1px solid var(--theme-border);
} }
.small-requirement span, .small-requirement span,
.release-card span { .release-card span {
color: #666; color: var(--theme-text-muted);
font-size: 10px; font-size: 10px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
@ -123,3 +123,5 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }

53
parfum-shop/src/pages/SupportPage.css
View File

@ -1,6 +1,6 @@
.support-page { .support-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: var(--theme-text);
padding: 26px 38px 38px; padding: 26px 38px 38px;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
@ -8,8 +8,8 @@
} }
.support-shell { .support-shell {
background: #f5f5f5; background: var(--theme-surface);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
padding: 38px; padding: 38px;
} }
@ -20,7 +20,7 @@
display: block; display: block;
font-size: 10px; font-size: 10px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: var(--theme-text-muted);
} }
.support-hero { .support-hero {
@ -29,7 +29,7 @@
gap: 28px; gap: 28px;
align-items: end; align-items: end;
padding-bottom: 36px; padding-bottom: 36px;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid var(--theme-border);
} }
.support-hero-copy h1 { .support-hero-copy h1 {
@ -38,7 +38,7 @@
line-height: 0.92; line-height: 0.92;
font-weight: 300; font-weight: 300;
letter-spacing: -0.05em; letter-spacing: -0.05em;
color: #131313; color: var(--theme-text);
} }
.support-intro { .support-intro {
@ -46,7 +46,7 @@
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.support-hero-panel { .support-hero-panel {
@ -63,7 +63,7 @@
margin: 10px 0 0; margin: 10px 0 0;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
color: #1f1f1f; color: var(--theme-text);
} }
.support-panel-meta { .support-panel-meta {
@ -79,7 +79,7 @@
margin: 8px 0 0; margin: 8px 0 0;
font-size: 14px; font-size: 14px;
line-height: 1.55; line-height: 1.55;
color: #1f1f1f; color: var(--theme-text);
} }
.support-quick-grid { .support-quick-grid {
@ -91,8 +91,8 @@
.support-quick-card { .support-quick-card {
padding: 24px; padding: 24px;
background: #efefef; background: var(--theme-bg);
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
min-height: 240px; min-height: 240px;
} }
@ -101,14 +101,14 @@
font-size: 24px; font-size: 24px;
line-height: 1.08; line-height: 1.08;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.support-quick-card p { .support-quick-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.support-section { .support-section {
@ -129,7 +129,7 @@
line-height: 0.98; line-height: 0.98;
font-weight: 300; font-weight: 300;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #131313; color: var(--theme-text);
} }
.support-section-copy { .support-section-copy {
@ -143,7 +143,7 @@
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 1.7; line-height: 1.7;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.support-info-grid { .support-info-grid {
@ -155,8 +155,8 @@
.support-info-box { .support-info-box {
padding: 24px; padding: 24px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #fafafa; background: var(--theme-surface-soft);
} }
.support-info-box h3 { .support-info-box h3 {
@ -171,12 +171,12 @@
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.support-info-box--dark { .support-info-box--dark {
background: #1f1f1f; background: #1f1f1f;
border-color: #1f1f1f; border-color: var(--theme-text);
} }
.support-info-box--dark .support-label, .support-info-box--dark .support-label,
@ -194,7 +194,7 @@
.support-list li { .support-list li {
font-size: 15px; font-size: 15px;
line-height: 1.6; line-height: 1.6;
color: #1f1f1f; color: var(--theme-text);
} }
.support-mail-btn { .support-mail-btn {
@ -218,7 +218,7 @@
.support-faq-section { .support-faq-section {
margin-top: 38px; margin-top: 38px;
padding-top: 38px; padding-top: 38px;
border-top: 1px solid #dfdfdf; border-top: 1px solid var(--theme-border);
} }
.support-faq-grid { .support-faq-grid {
@ -230,8 +230,8 @@
.support-faq-card { .support-faq-card {
padding: 24px; padding: 24px;
border: 1px solid #d9d9d9; border: 1px solid var(--theme-border);
background: #efefef; background: var(--theme-bg);
min-height: 210px; min-height: 210px;
} }
@ -240,14 +240,14 @@
font-size: 22px; font-size: 22px;
line-height: 1.08; line-height: 1.08;
font-weight: 400; font-weight: 400;
color: #131313; color: var(--theme-text);
} }
.support-faq-card p { .support-faq-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
line-height: 1.65; line-height: 1.65;
color: #4f4f4f; color: var(--theme-text-muted);
} }
.support-bottom-cta { .support-bottom-cta {
@ -297,7 +297,7 @@
} }
.support-btn--primary { .support-btn--primary {
background: #fff; background: var(--theme-paper);
color: #ff6a00; color: #ff6a00;
} }
@ -355,3 +355,4 @@
padding: 26px 20px; padding: 26px 20px;
} }
} }

59
parfum-shop/src/style/navbar.css
View File

@ -43,6 +43,35 @@
cursor: pointer; cursor: pointer;
} }
.nav-theme-switch {
min-width: auto;
padding: 8px;
}
.nav-theme-switch__track {
position: relative;
width: 38px;
height: 20px;
border-radius: 999px;
border: 1px solid;
display: inline-flex;
align-items: center;
padding: 2px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-theme-switch__thumb {
width: 14px;
height: 14px;
border-radius: 50%;
transform: translateX(0);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-theme-switch.is-light .nav-theme-switch__thumb {
transform: translateX(18px);
}
/* Hero variant */ /* Hero variant */
.navbar--hero { .navbar--hero {
padding-top: 22px; padding-top: 22px;
@ -60,6 +89,15 @@
background: transparent; background: transparent;
} }
.navbar--hero .nav-theme-switch__track {
border-color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.14);
}
.navbar--hero .nav-theme-switch__thumb {
background: #fff;
}
.navbar--hero .nav-link:hover, .navbar--hero .nav-link:hover,
.navbar--hero .nav-link.active { .navbar--hero .nav-link.active {
background: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.22);
@ -72,20 +110,29 @@
.navbar--light .nav-pill { .navbar--light .nav-pill {
background: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.88);
border: 1px solid #d6d6d6; border: 1px solid var(--theme-border);
} }
.navbar--light .nav-link { .navbar--light .nav-link {
color: #1d1d1d; color: var(--theme-text);
} }
.navbar--light .nav-button { .navbar--light .nav-button {
background: transparent; background: transparent;
} }
.navbar--light .nav-theme-switch__track {
border-color: rgba(38, 38, 38, 0.24);
background: rgba(38, 38, 38, 0.08);
}
.navbar--light .nav-theme-switch__thumb {
background: var(--theme-text);
}
.navbar--light .nav-link:hover, .navbar--light .nav-link:hover,
.navbar--light .nav-link.active { .navbar--light .nav-link.active {
background: #ebebeb; background: var(--theme-surface-soft);
} }
/* --- Shared Navbar End --- */ /* --- Shared Navbar End --- */
@ -108,4 +155,10 @@
.nav-brand-logo { .nav-brand-logo {
width: 54px; width: 54px;
} }
.nav-theme-switch {
min-width: auto;
padding: 8px;
} }
}