/* ================================================================
EUROSTIL DESIGN PROIECT — main.css
Single source of truth for shared UI styles
================================================================ */
/* ── 1. GOOGLE FONTS (preload hint) ─────────────────────────── */
/* Loaded via in HTML head for better performance */
/* ── 2. CUSTOM PROPERTIES ────────────────────────────────────── */
:root {
/* Brand palette */
--charcoal: #3a4a48;
--charcoal-light: #5a6a68;
--charcoal-dark: #2a3a38;
--white: #ffffff;
--off-white: #f8f7f5;
--cream: #f0eeea;
--warm-gray: #e5e2dc;
--text-light: #8a8a86;
--accent: #7a6a50;
/* Typography */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
/* Footer — intentionally NOT overridden in dark mode */
--footer-bg: #111414;
--footer-text: rgba(255, 255, 255, 0.4);
--footer-link: rgba(255, 255, 255, 0.6);
}
/* ── Dark mode overrides via data-theme on ─────────── */
[data-theme="dark"] {
--charcoal: #e8e6e2;
--charcoal-light: #b8b4ae;
--charcoal-dark: #f0eeea; /* NOTE: only used for text, never for bg */
--white: #1a1e1d;
--off-white: #222726;
--cream: #2a2e2d;
--warm-gray: #3a3e3d;
--text-light: #8a8a86;
--accent: #b8a898;
/* footer-bg stays #111414 — always dark */
}
/* ── 3. RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
overflow-x: hidden;
}
body {
font-family: var(--sans);
color: var(--charcoal);
background: var(--white);
overflow-x: hidden;
}
/* ── 4. GRID BACKGROUND ──────────────────────────────────────── */
.grid-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.03;
background-image:
linear-gradient(var(--charcoal) 1px, transparent 1px),
linear-gradient(90deg, var(--charcoal) 1px, transparent 1px);
background-size: 80px 80px;
}
[data-theme="dark"] .grid-bg { opacity: 0.015; }
/* ── 5. PAGE LOADER ───────────────────────────────────────────── */
#page-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
pointer-events: all;
transition: opacity 0.5s ease;
}
#page-loader.exit {
opacity: 0;
pointer-events: none;
}
#page-loader .loader-logo {
width: 52px;
height: 52px;
animation: logoPulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] #page-loader .loader-logo {
filter: brightness(0) invert(1);
}
@keyframes logoPulse {
0%, 100% { opacity: 0.35; transform: scale(0.94); }
50% { opacity: 1; transform: scale(1); }
}
/* ── 6. NAVIGATION — BASE ────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: 100;
padding: 1.5rem 4rem;
display: flex;
justify-content: space-between;
align-items: center;
background: transparent;
transition: padding 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}
nav.scrolled { padding: 1rem 4rem; }
.nav-logo {
height: 44px;
transition: height 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}
nav.scrolled .nav-logo { height: 38px; }
/* Dark mode: invert logo to white */
[data-theme="dark"] .nav-logo { filter: brightness(0) invert(1); }
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--charcoal);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
position: relative;
transition: color 0.3s ease;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 0; height: 1px;
background: var(--charcoal);
transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links .nav-toggle-li { display: flex; align-items: center; }
/* ── 7. ADAPTIVE NAV — desktop only ─────────────────────────── */
/*
* .on-dark → nav sits over a dark section (index, servicii via JS observer)
* .over-hero → nav sits over the dark project hero (proiect.html)
* Both classes are DISABLED on mobile (overridden below in media query)
*/
@media (min-width: 769px) {
/*
* FIX: data-theme is on , not .
*
* TWO separate adaptive nav behaviors:
* nav.over-hero → proiect.html hero photo (always dark image, always needs white nav)
* nav.on-dark → JS observer: nav over a dark section (index portfolio, servicii process)
* In dark mode these sections INVERT to light → nav needs dark text
*/
/* over-hero: ALWAYS white regardless of theme (hero photo is dark in both themes) */
nav.over-hero .nav-logo {
filter: brightness(0) invert(1);
opacity: 0.88;
}
nav.over-hero .nav-links a {
color: rgba(255, 255, 255, 0.82);
}
nav.over-hero .nav-links a::after {
background: rgba(255, 255, 255, 0.6);
}
nav.over-hero .theme-toggle {
border: none;
}
nav.over-hero .theme-toggle svg {
stroke: currentColor;
}
/* on-dark light mode: white nav over dark section */
html:not([data-theme="dark"]) nav.on-dark .nav-logo {
filter: brightness(0) invert(1);
opacity: 0.88;
}
html:not([data-theme="dark"]) nav.on-dark .nav-links a {
color: rgba(255, 255, 255, 0.82);
}
html:not([data-theme="dark"]) nav.on-dark .nav-links a::after {
background: rgba(255, 255, 255, 0.6);
}
html:not([data-theme="dark"]) nav.on-dark .theme-toggle svg {
stroke: rgba(255, 255, 255, 0.85);
}
/* on-dark dark mode: sections become light → nav needs dark text */
[data-theme="dark"] nav.on-dark .nav-logo {
filter: brightness(0);
opacity: 1;
}
[data-theme="dark"] nav.on-dark .nav-links a {
color: #1a1e1d;
}
[data-theme="dark"] nav.on-dark .nav-links a::after {
background: #1a1e1d;
}
[data-theme="dark"] nav.on-dark .theme-toggle svg {
stroke: #1a1e1d;
}
}
/* ── 8. MOBILE NAV — static colors, bg on scroll ─────────── */
@media (max-width: 768px) {
/* Frosted background after scroll — theme aware */
nav.scrolled {
background: rgba(248, 247, 245, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] nav.scrolled {
background: rgba(26, 30, 29, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* DISABLE on-dark adaptive changes on mobile (only .on-dark, not .over-hero) */
nav.on-dark .nav-logo {
filter: none !important;
opacity: 1 !important;
}
[data-theme="dark"] nav.on-dark .nav-logo {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
nav.on-dark .nav-links a { color: var(--charcoal) !important; }
nav.on-dark .theme-toggle { border-color: var(--warm-gray) !important; }
nav.on-dark .theme-toggle svg { stroke: var(--charcoal) !important; }
/*
* PROJECT PAGE — MOBILE over-hero:
* .over-hero desktop rules (white nav) bleed into mobile because the media
* query only gates the ON-DARK block above. We need to also neutralise
* over-hero on mobile when scrolled. We do this via body.hero-over class:
* added by JS when nav has .over-hero AND NOT .scrolled
* removed by JS when nav gains .scrolled
* This lets us target burger (which is outside