:root { /* ── Brand ─────────────────────────────────────────── */ --primary: #1a73e8; --primary-hover: #1557b0; /* ── Backgrounds ────────────────────────────────────── */ --bg: #0f0f0f; /* body / page */ --bg-soft: #1c1c1c; /* alternate sections */ --bg-card: #111111; /* cards, gallery items */ --bg-img: #252525; /* image placeholders */ --bg-deep: #000000; /* footer, pure black areas */ /* ── Borders & surfaces ─────────────────────────────── */ --border-xfaint: #1a1a1a; /* grid gap colour, almost invisible */ --border-faint: #222222; /* subtle borders */ --border: #2a2a2a; /* standard border */ --border-mid: #333333; /* medium border */ --border-strong: #444444; /* stronger border */ --border-item: #1e1e1e; /* card / item border */ /* ── Text ───────────────────────────────────────────── */ --text: #e5e5e5; /* primary body text */ --text-muted: #aaaaaa; /* secondary / helper text */ --text-dim: #888888; /* captions, counters */ --text-faint: #666666; /* very faint labels */ --text-ghost: #555555; /* ghost / placeholder text */ --text-white: #ffffff; /* pure white (logos, btn text) */ --text-nav: #bbbbbb; /* nav contact links */ --text-emboss: #1a1a1a; /* large embossed numbers on dark bg */ /* ── Specials ───────────────────────────────────────── */ --hero-overlay: rgba(0, 0, 0, 0.65); /* hero image darkening */ --hero-text: #e5e5e5; /* primary text on hero images; kept light for readability over darkened backgrounds */ --hero-muted: #aaaaaa; /* secondary hero text; reduced contrast while still readable on image overlays */ --caption-bg: rgba(0, 0, 0, 0.75); /* gallery caption gradient end */ --link: #7eb8f7; /* links inside highlight boxes */ --link-hover: #b9d8ff; --highlight-bg: #0c1f3a; /* contact highlight box bg */ --accent-border: #1e3a5f; /* review product tag border */ /* ── Legacy aliases – keep page CSS working as-is ───── */ --dark: var(--bg); --dark-soft: var(--bg-soft); --light: var(--text); --gray: var(--text-muted); } /* ═══════════════════════════════════════════════════════════ LIGHT MODE Add data-theme="light" to (or ) to activate. You can also swap the values directly inside :root above. ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f5f5f5; --bg-soft: #ebebeb; --bg-card: #e2e2e2; --bg-img: #d4d4d4; --bg-deep: #d8d8d8; --border-xfaint: #d8d8d8; --border-faint: #cccccc; --border: #c0c0c0; --border-mid: #b0b0b0; --border-strong: #999999; --border-item: #d0d0d0; --text: #111111; --text-muted: #555555; --text-dim: #666666; --text-faint: #777777; --text-ghost: #888888; --text-white: #111111; --text-nav: #444444; --text-emboss: #d0d0d0; --hero-overlay: rgba(0, 0, 0, 0.65); --caption-bg: rgba(255, 255, 255, 0.75); --link: #1a5cb0; --link-hover: #1a73e8; --highlight-bg: #ddeeff; --accent-border: #7eb8f7; } /* ────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; font-style: normal; src: url('/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Oswald'; font-style: normal; src: url('/fonts/oswald-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Oswald'; font-style: normal; src: url('/fonts/oswald-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } * { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; } html { scroll-padding-top: 80px; } body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.6; scroll-behavior: smooth; overflow-x: hidden; } .navbar { background: var(--bg); padding: 20px 0; position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-mid); } .nav-container { display: flex; justify-content: center; align-items: center; max-width: 100%; padding: 0 80px; position: relative; min-height: 40px; } .logo { position: absolute; left: 80px; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: bold; color: var(--text-white); text-decoration: none; letter-spacing: 1px; } .logo span { color: var(--primary); } .nav-links { display: flex; list-style: none; align-items: center; } .nav-links li { margin: 0 15px; } .nav-links a { color: var(--text); text-decoration: none; font-size: 13px; text-transform: uppercase; transition: 0.3s; } .nav-links a.btn-contact-nav { color: var(--hero-text); } .nav-links a:hover { color: var(--primary); } .nav-links .btn-contact-nav:hover { color: var(--hero-text); background-color: var(--primary-hover); } .btn-contact-nav { background: var(--primary); padding: 10px 20px; border-radius: 4px; } .nav-contact { display: flex; align-items: center; gap: 50px; position: absolute; right: 40px; } .nav-contact a { color: var(--text-nav); text-decoration: none; font-size: 12px; letter-spacing: 0.3px; transition: color 0.3s; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .nav-contact a:hover { color: var(--text-white); } .nav-contact svg { width: 12px; height: 12px; flex-shrink: 0; stroke: var(--primary); } .nav-phone-text { display: flex; flex-direction: column; line-height: 1.35; } .nav-hours { font-size: 10px; color: var(--text-ghost); letter-spacing: 0.3px; } .contact-info { display: flex; flex-direction: column; align-items: flex-begin; gap: 5px; } .contact-highlight .contact-info { display: block; white-space: nowrap; } .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover svg { transition: stroke 0.3s; stroke: var(--primary); } .theme-toggle svg { width: 20px; height: 20px; stroke: var(--text); } #icon-sun { display: none; } [data-theme="light"] #icon-sun { display: block; } [data-theme="light"] #icon-moon { display: none; } .menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; position: absolute; right: 20px; } .menu-toggle span { display: block; width: 25px; height: 2px; background: var(--text-white); transition: .3s; } footer { padding: 56px 0 32px; background: var(--bg-deep); color: var(--text-muted); border-top: 1px solid var(--border-mid); } .footer-grid { display: flex; align-items: flex-start; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border-faint); margin-bottom: 24px; } .footer-col { flex: 1; } .footer-col:nth-child(2) { text-align: center; display: flex; flex-direction: column; align-items: center; } .footer-col:last-child { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .footer-brand { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600; color: var(--text-white); letter-spacing: 1px; margin-bottom: 10px; } .footer-brand span { color: var(--primary); } .footer-col > p { font-size: 13px; color: var(--text-muted); line-height: 1.7; } .footer-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 14px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 8px; } .footer-col a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.3s; } .footer-col a:hover { color: var(--primary); } .footer-col address { font-style: normal; } .footer-col address p { font-size: 13px; color: var(--text-muted); line-height: 1.9; } .footer-copy { font-size: 12px; color: var(--text-faint); text-align: center; } @media (max-width: 768px) { .footer-grid { flex-wrap: wrap; gap: 28px; } .footer-col { flex: 1 1 40%; } .footer-col:first-child { flex: 1 1 100%; } .footer-col:nth-child(2), .footer-col:last-child { text-align: left; align-items: flex-start; } } @media (max-width: 480px) { .footer-col { flex: 1 1 100%; } } @media (max-width: 992px) { .nav-container { padding: 0 30px; } .container { padding: 0 24px; } .nav-contact { right: 30px; } } @media (max-width: 768px) { .navbar { padding: 14px 0 12px; } .nav-container { min-height: 56px; } .nav-links { display: none; flex-direction: column; background: var(--bg); position: fixed; top: 56px; left: 0; width: 100%; padding: 20px 0; border-bottom: 1px solid var(--border-faint); z-index: 998; } .nav-links.open { display: flex; } .nav-links li { margin: 10px 0; } .menu-toggle { display: flex; } .container { padding: 0 16px; } .nav-contact { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); left: auto; padding: 0; gap: 0; z-index: 999; } .nav-contact .contact-info { display: none; } .nav-contact>a { display: none; } .logo { left: 16px; font-size: 15px; letter-spacing: 0; } } @media (max-width: 480px) { .contact-highlight .contact-info { white-space: normal; } }