/* Inter găzduit local — zero cereri către Google (GDPR).
Fișierele sunt exact cele descărcate de pe google-webfonts-helper,
cu numele lor originale: „latin_latin-ext" = latină + diacritice
românești (ă â î ș ț) în același fișier.
Dacă le reînnoiești, descarcă-le la fel și nu mai ai nimic de
redenumit — numele de aici se potrivesc cu ce iese din generator.
Dacă folderul e gol, se folosește fontul de sistem, foarte apropiat. */
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-300.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-v20-latin_latin-ext-800.woff2") format("woff2");
font-weight: 800; font-style: normal; font-display: swap;
}
/* =========================================================
AZTEC Inflatables — Core stylesheet
Design tokens + base + shared components (header, footer,
gallery, search). One file, used across all pages.
========================================================= */
/* ---------- Design tokens ---------- */
:root {
/* Palette — sober dark, close to the current site.
Brand yellow accent (matches the Framer component: #F5C518). */
--ink: #0e0f11; /* near-black — site background */
--ink-2: #17181b; /* raised surface / cards */
--ink-3: #1f2024; /* hover surface */
--paper: #f4f4f2; /* off-white text */
--accent: #f5c518; /* brand yellow — primary accent */
--accent-dim: #d4a900;
--cta: #e8552a; /* warm CTA (like "Proiectul tău") */
--haze: #a7abb0; /* secondary text */
--haze-2: #71767c;
--line: rgba(255, 255, 255, 0.09);
--line-strong: rgba(255, 255, 255, 0.18);
/* Typography — Inter only, like the current site */
--font-display: "Inter", system-ui, -apple-system, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "Inter", system-ui, sans-serif;
/* Mărimea textului pe tot site-ul. Se schimbă dintr-un singur loc:
1 = mărimea de bază, 1.5 = cu 50% mai mare. Se combină cu reglajul
din panou (Aspect → Mărime text general). */
--text-scale: 1.375;
/* Type scale */
--step--1: clamp(calc(0.78rem * var(--text-scale)), calc((0.75rem + 0.15vw) * var(--text-scale)), calc(0.86rem * var(--text-scale)));
--step-0: clamp(calc(0.95rem * var(--text-scale)), calc((0.9rem + 0.25vw) * var(--text-scale)), calc(1.05rem * var(--text-scale)));
--step-1: clamp(calc(1.2rem * var(--text-scale)), calc((1.05rem + 0.7vw) * var(--text-scale)), calc(1.6rem * var(--text-scale)));
--step-2: clamp(calc(1.6rem * var(--text-scale)), calc((1.3rem + 1.4vw) * var(--text-scale)), calc(2.4rem * var(--text-scale)));
--step-3: clamp(calc(2.2rem * var(--text-scale)), calc((1.6rem + 3vw) * var(--text-scale)), calc(4rem * var(--text-scale)));
--step-4: clamp(calc(3rem * var(--text-scale)), calc((2rem + 6vw) * var(--text-scale)), calc(6.5rem * var(--text-scale)));
/* Spacing */
--gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--pad-page: clamp(1rem, 0.5rem + 3vw, 4rem);
--radius: 14px;
--radius-sm: 8px;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 0.35s;
}
/* ---------------------------------------------------------
Lățimea paginii urmează meniul
--page-min e calculată în site.js: exact cât îi trebuie
antetului ca textul din meniu să încapă pe un singur rând,
dar niciodată sub 800px pe desktop. Pe mobil (meniu ascuns
în buton) rămâne 0, deci pagina curge liber.
--------------------------------------------------------- */
:root {
--page-min: 800px; /* lățimea minimă a paginii pe desktop */
--page-w: 1400px; /* lățimea containerului: antet, conținut, subsol */
}
body { min-width: var(--page-min); }
@media (max-width: 860px) {
:root { --page-min: 0px; }
}
/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.55;
color: var(--paper);
/* Adâncime: două lumini abia sesizabile — galbenul mărcii sus-dreapta,
CTA-ul cald jos-stânga — peste negrul de bază. */
background:
radial-gradient(1100px 540px at 88% -8%, rgba(245, 197, 24, 0.05), transparent 62%),
radial-gradient(900px 520px at -12% 82%, rgba(232, 85, 42, 0.04), transparent 60%),
var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 0.4em;
}
h1 {
font-size: var(--step-3);
}
h2 {
font-size: var(--step-2);
}
h3 {
font-size: var(--step-1);
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.page {
max-width: var(--page-w);
margin-inline: auto;
padding-inline: var(--pad-page);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Header ---------- */
/* Header mount: display:contents so the injected sticky header behaves as a
direct child of and stays pinned across the whole page scroll. */
#header-mount {
display: contents;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--ink);
border-bottom: 1px solid var(--line);
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
/* Peste hero fullscreen: header transparent la început */
.site-header__inner {
max-width: var(--page-w);
margin-inline: auto;
padding: 0.85rem var(--pad-page);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap);
position: relative;
}
.brand {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
font-size: var(--step-0);
white-space: nowrap;
}
.brand__mark {
width: 38px;
height: 38px;
object-fit: contain;
flex: none;
}
.brand span {
font-weight: 300;
color: var(--accent);
}
.brand .brand-name b {
color: var(--accent);
font-weight: 800;
}
.nav {
display: flex;
align-items: center;
gap: 1.35rem;
flex-wrap: nowrap; /* meniul stă mereu pe un singur rând */
white-space: nowrap;
}
/* ---------------------------------------------------------
Regula generală de hover pentru navigație (marker galben)
Aceeași peste tot: meniu principal, meniu mobil, subsol.
Fondul devine galben, textul negru — ca un marker trecut peste.
--------------------------------------------------------- */
.nav a,
.footer-menu a,
.footer-col--brand a,
.footer-legal a {
display: inline-block;
padding: 0.1em 0.4em;
border-radius: 5px;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover,
.nav a:focus-visible,
.footer-menu a:hover,
.footer-menu a:focus-visible,
.footer-col--brand a:hover,
.footer-col--brand a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible {
background: var(--accent);
color: var(--ink);
outline: none;
}
.nav a {
font-size: var(--step--1);
letter-spacing: 0.02em;
color: var(--haze);
position: relative;
}
/* pagina curentă: rămâne subliniată, ca să se distingă de simplul hover */
.nav a[aria-current="page"] {
color: var(--paper);
}
.nav a[aria-current="page"]::after {
content: "";
position: absolute;
left: 0.4em;
right: 0.4em;
bottom: -3px;
height: 2px;
background: var(--accent);
}
.nav a[aria-current="page"]:hover::after { background: var(--ink); }
.header-cta {
padding: 0.55rem 1.1rem;
border-radius: 999px;
background: var(--cta);
color: #fff;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: transform var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.header-cta:hover {
transform: translateY(-1px);
background: #ff6a3d;
}
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
width: 40px;
height: 40px;
padding: 0;
font-size: calc(1.2rem * var(--text-scale));
line-height: 1;
color: var(--paper);
cursor: pointer;
flex: none;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Search trigger in header */
.search-trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--haze);
font-size: var(--step--1);
background: none;
transition: border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.search-trigger:hover {
border-color: var(--accent);
color: var(--paper);
}
.search-trigger kbd {
font-family: var(--font-mono);
font-size: 0.72em;
padding: 0.1em 0.4em;
border: 1px solid var(--line);
border-radius: 4px;
color: var(--haze-2);
}
/* ---------- Footer ---------- */
.site-footer {
margin-top: clamp(3rem, 2rem + 5vw, 7rem);
border-top: 1px solid var(--line);
background: var(--ink-2);
}
.site-footer__inner {
max-width: var(--page-w);
margin-inline: auto;
padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--pad-page);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
position: relative;
}
/* Blocul social e centrat pe mijlocul REAL al paginii, independent de coloane */
.footer-col--social {
position: absolute;
left: 50%;
top: clamp(2rem, 1.5rem + 3vw, 4rem);
transform: translateX(-50%);
text-align: center;
}
.footer-col--brand, .footer-col--menu { max-width: 40%; }
.footer-col h4 {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--haze-2);
margin: 0 0 1rem;
}
.footer-col a,
.footer-col p {
color: var(--haze);
margin: 0.35rem 0;
transition: color var(--dur) var(--ease);
}
.footer-menu {
display: grid;
gap: 0.15rem;
}
.footer-bottom {
border-top: 1px solid var(--line);
padding: 1.2rem var(--pad-page);
max-width: var(--page-w);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.5rem;
justify-content: space-between;
align-items: center;
font-size: var(--step--1);
color: var(--haze-2);
}
/* Footer: logo + social + counter (replică aztec.ro) */
.footer-logo {
display: inline-block;
margin-bottom: 1rem;
position: relative;
width: 72px;
height: 72px;
}
.footer-logo img {
width: 72px;
height: 72px;
object-fit: contain;
position: absolute;
inset: 0;
transition: opacity var(--dur) var(--ease);
}
.footer-logo__white { opacity: 0; }
.footer-logo:hover .footer-logo__yellow { opacity: 0; }
.footer-logo:hover .footer-logo__white { opacity: 1; }
.footer-col--social { text-align: center; }
.footer-col--menu .footer-menu { text-align: right; }
.footer-col--menu .footer-menu a { justify-self: end; }
.social-row {
display: flex;
gap: 0.9rem;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
}
/* Efect hover social: iconița individuală devine galben plin, cu simbol închis */
.social-ico {
width: 46px;
height: 46px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--haze);
transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.social-ico svg { width: 26px; height: 26px; display: block; }
a.social-ico:hover {
background: var(--accent);
color: var(--ink);
transform: translateY(-1px);
}
/* rețea fără link — afișată dezactivată (ca pe aztec.ro) */
.social-ico--off {
color: var(--haze-2);
opacity: 0.4;
cursor: default;
}
/* pe ecrane înguste, micșorează ca toate 6 să încapă pe un rând */
@media (max-width: 420px) {
.social-row { gap: 0.4rem; }
.social-ico { width: 40px; height: 40px; }
.social-ico svg { width: 22px; height: 22px; }
}
/* Hover-ul e definit o singură dată, sus, la regula generală de navigație.
Aici rămâne doar spațierea specifică subsolului. */
.footer-menu a,
.footer-col--brand a { margin: 0.2rem 0; }
.footer-bottom { flex-direction: column; text-align: center; gap: 0.8rem; }
.footer-legal a { color: var(--accent); font-weight: 600; }
.footer-legal__sep { color: var(--haze-2); margin: 0 0.6rem; }
.footer-copy { color: var(--haze); font-weight: 600; }
.footer-counter {
display: flex;
gap: 4px;
margin-top: 0.4rem;
}
.footer-counter__d {
font-family: var(--font-mono);
font-size: calc(1.1rem * var(--text-scale));
color: var(--haze-2);
background: var(--ink);
border: 1px solid var(--line);
border-radius: 4px;
padding: 0.15em 0.4em;
min-width: 1.4ch;
text-align: center;
}
@media (max-width: 780px) {
.footer-col--menu .footer-menu,
.footer-col--menu .footer-menu a { text-align: left; justify-self: start; }
}
/* ---------- Gallery ---------- */
.gallery-head {
padding-top: clamp(2rem, 1.5rem + 3vw, 4rem);
padding-bottom: var(--gap);
}
.gallery-controls {
position: sticky;
top: 62px;
z-index: 40;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
padding: 0.9rem 0;
background: color-mix(in srgb, var(--ink) 88%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-left: auto;
}
.gallery-meta {
display: none;
}
.chip {
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: none;
color: var(--haze);
font-size: var(--step--1);
letter-spacing: 0.01em;
transition: all var(--dur) var(--ease);
white-space: nowrap;
}
.chip:hover {
color: var(--paper);
border-color: var(--accent);
}
.chip[aria-pressed="true"] {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
font-weight: 600;
}
.chip .count {
font-family: var(--font-mono);
font-size: 0.8em;
opacity: 0.7;
margin-left: 0.35em;
}
/* Masonry via JS-computed flex columns (zero gaps) */
.masonry {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0 0 3rem;
width: 100%;
}
.masonry__col {
flex: 1 1 0;
width: 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.masonry__item {
margin: 0;
position: relative;
overflow: hidden;
/* transparent: prin miniaturile în penumbră se vede pelicula din spate */
background: transparent;
display: block;
width: 100%;
border-radius: 10px;
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
z-index 0s;
cursor: zoom-in;
}
.masonry__item:hover {
transform: scale(1.035);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55),
0 34px 90px rgba(0, 0, 0, 0.9);
z-index: 5;
}
.masonry__item img {
width: 100%;
height: auto;
display: block;
filter: brightness(0.8) contrast(1.02);
transition: filter var(--dur) var(--ease);
}
.masonry__item:hover img {
filter: brightness(1) contrast(1);
}
.masonry__cat {
position: absolute;
top: 10px;
left: 10px;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 70%, transparent);
backdrop-filter: blur(4px);
font-family: var(--font-mono);
font-size: calc(0.7rem * var(--text-scale));
letter-spacing: 0.05em;
color: var(--paper);
opacity: 0;
transform: translateY(-4px);
transition: all var(--dur) var(--ease);
pointer-events: none;
}
.masonry__item:hover .masonry__cat {
opacity: 1;
transform: translateY(0);
}
.gallery-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--haze);
}
/* ---------- Global search overlay ---------- */
.search-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: none;
background: color-mix(in srgb, var(--ink) 75%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: clamp(1rem, 5vh, 6rem) 1rem 1rem;
}
.search-overlay.is-open {
display: block;
animation: overlayIn 0.25s var(--ease);
}
@keyframes overlayIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.search-panel {
max-width: 720px;
margin-inline: auto;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.search-input-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--line);
}
.search-input-wrap svg {
flex: none;
color: var(--haze);
}
.search-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--paper);
font-size: var(--step-1);
font-family: var(--font-body);
}
.search-input::placeholder {
color: var(--haze-2);
}
.search-clear,
.search-close {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: none;
color: var(--haze);
cursor: pointer;
flex: none;
transition: background var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.search-clear:hover,
.search-close:hover {
background: var(--ink-2);
color: var(--paper);
}
.search-close:hover {
color: var(--cta);
}
.search-clear { display: none; }
.search-results {
max-height: min(60vh, 520px);
overflow-y: auto;
padding: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
.search-group-label {
font-family: var(--font-mono);
font-size: calc(0.68rem * var(--text-scale));
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--haze-2);
padding: 0.8rem 0.8rem 0.35rem;
}
.search-result {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.6rem 0.8rem;
border-radius: var(--radius-sm);
transition: background var(--dur) var(--ease);
}
.search-result:hover,
.search-result.is-active {
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.search-result__thumb {
width: 54px;
height: 54px;
border-radius: var(--radius-sm);
object-fit: cover;
flex: none;
background: var(--ink);
}
.search-result__icon {
width: 54px;
height: 54px;
border-radius: var(--radius-sm);
flex: none;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--accent) 20%, transparent);
color: var(--accent);
}
.search-result__body {
min-width: 0;
}
.search-result__title {
font-weight: 600;
color: var(--paper);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result__meta {
font-family: var(--font-mono);
font-size: calc(0.72rem * var(--text-scale));
color: var(--haze-2);
letter-spacing: 0.03em;
}
.search-result__excerpt {
display: block;
font-size: calc(0.85rem * var(--text-scale));
color: var(--haze);
line-height: 1.5;
margin: 0.15rem 0 0.1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-result mark {
background: color-mix(in srgb, var(--cta) 40%, transparent);
color: var(--paper);
border-radius: 3px;
padding: 0 2px;
}
.search-empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--haze-2);
font-family: var(--font-mono);
font-size: var(--step--1);
}
/* ---------- Lightbox ---------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 300;
display: none;
flex-direction: column;
background: rgba(6, 8, 10, 0.9);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.lightbox.is-open { display: flex; }
/* Bara de sus: contor | zoom | acțiuni */
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1.2rem;
gap: 1rem;
flex: none;
}
.lightbox__counter {
font-family: var(--font-mono);
font-size: calc(0.9rem * var(--text-scale));
color: var(--haze);
min-width: 80px;
}
.lightbox__zoom { display: flex; gap: 0.4rem; }
.lightbox__actions { display: flex; gap: 0.4rem; min-width: 80px; justify-content: flex-end; }
.lightbox__bar button {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
background: transparent;
border: none;
color: var(--haze);
cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lightbox__bar button:hover { background: var(--ink-3); color: var(--paper); }
.lightbox__close:hover { color: var(--cta) !important; }
/* Zona imaginii */
.lightbox__stage {
flex: 1;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
padding: 0 1rem;
}
.lightbox__stage img {
max-width: 90vw;
max-height: calc(100vh - 220px);
border-radius: var(--radius-sm);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
transition: transform 0.25s var(--ease), opacity 0.35s ease;
cursor: zoom-in;
}
/* CTA galben pe imagine */
.lightbox__cta {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: var(--ink);
font-weight: 700;
font-family: inherit;
font-size: calc(0.95rem * var(--text-scale));
padding: 0.7rem 1.4rem;
border: none;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
opacity: 0;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
pointer-events: none;
}
.lightbox__cta:focus { outline: none; }
.lightbox__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lightbox__stage:hover .lightbox__cta {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.lightbox__cta:hover { background: #ffd534; }
/* Săgeți navigare */
.lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
flex: none;
width: 52px; height: 52px;
padding: 0;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(14, 15, 17, 0.55);
background: color-mix(in srgb, var(--ink) 55%, transparent);
border: 1px solid var(--line-strong);
color: var(--paper);
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__nav:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--ink);
}
.lightbox__nav:focus { outline: none; }
.lightbox__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(2px); }
/* Banda de thumbnails jos */
.lightbox__thumbs {
flex: none;
display: flex;
gap: 6px;
padding: 0.8rem 1rem;
overflow-x: auto;
scrollbar-width: thin;
}
.lightbox__thumb {
flex: none;
width: 84px;
height: 64px;
padding: 0;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
background: var(--ink-2);
opacity: 0.55;
transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--accent); }
@media (max-width: 640px) {
.lightbox__stage img { max-height: calc(100vh - 190px); }
.lightbox__thumb { width: 60px; height: 46px; }
.lightbox__nav { width: 42px; height: 42px; }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
.lightbox__nav svg { width: 26px; height: 26px; }
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.nav {
display: none;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-header.is-open .nav {
display: flex;
position: absolute;
top: calc(100% + 6px);
right: var(--pad-page);
left: auto;
width: max-content;
min-width: 200px;
flex-direction: column;
align-items: flex-end;
gap: 0.2rem;
padding: 0.8rem 1rem;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.site-header.is-open .nav a {
width: 100%;
text-align: right;
padding: 0.5rem 0.6rem;
border-radius: 8px;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* și în meniul mobil, același marker galben */
.site-header.is-open .nav a:hover,
.site-header.is-open .nav a:focus-visible {
background: var(--accent);
color: var(--ink);
}
/* Butonul Caută devine doar lupă (rotund) pe mobil */
.search-trigger {
padding: 0.5rem;
width: 40px;
height: 40px;
justify-content: center;
gap: 0;
}
.search-trigger span,
.search-trigger kbd {
display: none;
}
/* mai mult spațiu între butoanele din dreapta header-ului */
.site-header__inner > div:last-child {
gap: 0.5rem;
}
.site-header__inner {
padding: 0.7rem var(--pad-page);
}
.site-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.footer-col--social {
position: static;
left: auto;
top: auto;
transform: none;
text-align: center;
width: 100%;
}
.footer-col--brand, .footer-col--menu { max-width: 100%; }
.search-trigger kbd {
display: none;
}
.masonry {
columns: 2 150px;
}
}
/* =========================================================
MOTION — tema "aer / respirație"
Elementele respiră (se umflă subtil), apar la scroll,
și straturile se mișcă cu viteze diferite (parallax).
========================================================= */
/* Scroll-reveal: starea inițială + revealed */
[data-reveal] {
opacity: 0;
transform: translateY(42px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
filter 1.1s ease;
filter: blur(6px);
will-change: opacity, transform, filter;
}
[data-reveal].is-in {
opacity: 1;
transform: none;
filter: blur(0);
}
/* variante de reveal */
[data-reveal="left"] { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.86); }
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="scale"].is-in { transform: none; }
/* Stagger: întârziere progresivă pentru copii, mai lung și mai lin */
[data-stagger] > * {
opacity: 0;
transform: translateY(38px) scale(0.98);
transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger].is-in > * {
opacity: 1;
transform: none;
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0.08s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 0.20s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 0.32s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 0.44s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 0.56s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 0.68s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 0.80s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: 0.92s; }
/* "Breathing" — respiră ca o structură gonflabilă */
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.025); }
}
.breathe {
animation: breathe 6s ease-in-out infinite;
transform-origin: center;
}
.breathe--slow { animation-duration: 9s; }
.breathe--fast { animation-duration: 4s; }
/* Hero: gradient de "aer" care pulsează în fundal */
.hero {
position: relative;
overflow: hidden;
}
.hero__air {
position: absolute;
inset: -20% -10% auto -10%;
height: 120%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(closest-side at 20% 30%,
color-mix(in srgb, var(--accent) 16%, transparent), transparent),
radial-gradient(closest-side at 80% 20%,
color-mix(in srgb, var(--cta) 12%, transparent), transparent),
radial-gradient(closest-side at 60% 80%,
color-mix(in srgb, var(--accent) 10%, transparent), transparent);
filter: blur(40px);
animation: airDrift 18s ease-in-out infinite alternate;
}
@keyframes airDrift {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(2%, 1%, 0) scale(1.08); }
100% { transform: translate3d(-2%, -1%, 0) scale(1.03); }
}
/* Word-by-word reveal pentru titlul din hero */
.hero h1 .word {
display: inline-block;
opacity: 0;
transform: translateY(0.5em) rotate(2deg);
animation: wordUp 0.7s var(--ease) forwards;
}
@keyframes wordUp {
to { opacity: 1; transform: none; }
}
/* Parallax: elemente cu data-parallax primesc translateY via JS.
Doar hint de compositing aici. */
[data-parallax] { will-change: transform; }
/* Hover "inflate" mai pronunțat pe carduri (peste cel din pagină) */
.card, .post, .step {
transition: transform var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.card:hover, .post:hover {
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
/* Bara de progres scroll, sus */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--cta));
z-index: 300;
transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal],
[data-stagger] > * { opacity: 1 !important; transform: none !important; }
.breathe, .hero__air { animation: none !important; }
}
/* Buton vertical PROIECTUL TĂU pe marginea dreaptă (injectat pe toate paginile
mai puțin proiectul-tau, prin site.js) */
.side-cta {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 90;
background: var(--accent);
color: var(--ink);
font-weight: 700;
letter-spacing: 0.12em;
font-size: calc(0.8rem * var(--text-scale));
padding: 1.4rem 0.55rem;
border-radius: 10px 0 0 10px;
writing-mode: vertical-rl;
text-orientation: mixed;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
transition: padding-right var(--dur) var(--ease),
background var(--dur) var(--ease);
text-decoration: none;
}
.side-cta span { transform: rotate(180deg); }
.side-cta:hover { background: #ffd534; padding-right: 0.9rem; }
@media (max-width: 700px) {
.side-cta {
font-size: calc(0.62rem * var(--text-scale));
padding: 0.8rem 0.35rem;
letter-spacing: 0.12em;
}
}
/* Search filters */
.search-filters {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--line);
}
.sf-row {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.sf-label {
font-family: var(--font-mono);
font-size: calc(0.7rem * var(--text-scale));
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--haze-2);
min-width: 68px;
}
.sf-chip {
background: var(--ink-2);
border: 1px solid var(--line-strong);
color: var(--haze);
font: inherit;
font-size: calc(0.82rem * var(--text-scale));
padding: 0.28rem 0.7rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: border-color var(--dur) var(--ease),
color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sf-chip:hover { border-color: var(--accent); color: var(--paper); }
.sf-chip.is-active {
background: var(--accent);
color: var(--ink);
border-color: var(--accent);
font-weight: 600;
}
.sf-dot {
display: none;
}
/* =========================================================
TEMATIZARE GLOBALĂ UI — scrollbar, selecție, focus, forms
Toate elementele native urmează paleta site-ului.
========================================================= */
/* Browserul știe că suntem pe temă întunecată (afectează scrollbar
nativ, autofill, controale native pe unele platforme) */
:root {
color-scheme: dark;
}
/* ----- Scrollbar (Chrome/Edge/Safari) — global ----- */
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--accent-dim) transparent; /* Firefox: thumb, track */
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-track {
background: var(--ink);
}
*::-webkit-scrollbar-thumb {
background: var(--ink-3);
border-radius: 999px;
border: 3px solid var(--ink); /* creează un "padding" în jurul thumb-ului */
}
*::-webkit-scrollbar-thumb:hover {
background: var(--accent-dim);
}
*::-webkit-scrollbar-corner {
background: var(--ink);
}
/* Scrollbar pe body/pagina principală — puțin mai lat */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 14px;
height: 14px;
}
/* ----- Selecția de text ----- */
::selection {
background: var(--accent);
color: var(--ink);
}
::-moz-selection {
background: var(--accent);
color: var(--ink);
}
/* ----- Focus vizibil, în culoarea brandului ----- */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* elementele care au deja stilul lor de focus nu primesc dublu contur */
.chip:focus-visible,
.sf-chip:focus-visible,
.btn:focus-visible {
outline-offset: 3px;
}
/* ----- Controale native (checkbox, radio, range, progress) ----- */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--accent);
}
/* ----- Input-uri, textarea, select: temă întunecată + focus galben ----- */
input,
textarea,
select {
color-scheme: dark;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--accent);
}
/* Placeholder în culoarea secundară a temei */
::placeholder {
color: var(--haze-2);
opacity: 1;
}
/* Select nativ: săgeata și fundalul dropdown-ului pe temă (unde e suportat) */
select option {
background: var(--ink-2);
color: var(--paper);
}
/* Autofill (Chrome pune fundal alb urât) — forțăm tema */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--paper);
-webkit-box-shadow: 0 0 0 1000px var(--ink-2) inset;
caret-color: var(--paper);
transition: background-color 9999s ease-out;
}
/* Caret (cursorul de text) în culoarea accent */
input,
textarea {
caret-color: var(--accent);
}
/* Animație de intrare pentru topul paginilor interioare (motion.js) */
@keyframes introRise {
to { opacity: 1; transform: none; filter: blur(0); }
}
/* ---------- Back to top ---------- */
.back-to-top {
position: fixed;
right: clamp(1rem, 2vw, 2rem);
bottom: clamp(1rem, 2vw, 2rem);
z-index: 261; /* peste butonul flotant de contact (260) */
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--ink-3);
color: var(--haze);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
background 0.3s var(--ease), color 0.3s var(--ease);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* când există butonul flotant de contact, „înapoi sus" urcă deasupra lui */
body.are-fab .back-to-top { bottom: calc(1.2rem + 56px + 0.7rem); }
.back-to-top:hover {
background: var(--accent);
color: var(--ink);
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity 0.2s, background 0.2s, color 0.2s; }
}
/* Dropdown custom filtru categorie (temă închisă, control total) */
.cat-dd { position: relative; }
.cat-dd__btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
justify-content: space-between;
background: var(--ink-2);
color: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 0.7rem 1.1rem;
font: inherit;
font-size: calc(0.95rem * var(--text-scale));
cursor: pointer;
min-width: 220px;
white-space: nowrap;
transition: border-color var(--dur) var(--ease);
}
.cat-dd__btn:hover, .cat-dd.is-open .cat-dd__btn { border-color: var(--accent); }
.cat-dd__btn svg { color: var(--accent); transition: transform var(--dur) var(--ease); }
.cat-dd.is-open .cat-dd__btn svg { transform: rotate(180deg); }
.cat-dd__list {
position: absolute;
top: calc(100% + 6px);
right: 0; /* lista se aliniază la dreapta cu butonul */
left: auto;
min-width: 100%;
width: max-content; /* fiecare denumire pe un singur rând */
max-width: min(92vw, 30rem);
max-height: 340px;
overflow-y: auto;
margin: 0;
padding: 0.4rem;
list-style: none;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
z-index: 50;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-dd.is-open .cat-dd__list { opacity: 1; transform: none; pointer-events: auto; }
.cat-dd__opt {
display: flex;
align-items: center;
gap: 1.6rem;
white-space: nowrap;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.8rem;
border-radius: 7px;
cursor: pointer;
color: var(--haze);
font-size: calc(0.92rem * var(--text-scale));
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-dd__opt:hover { background: var(--ink-3); color: var(--paper); }
.cat-dd__opt.is-active { background: var(--accent); color: var(--ink); font-weight: 600; }
.cat-dd__n { font-family: var(--font-mono); font-size: calc(0.78rem * var(--text-scale)); opacity: 0.7; }
.cat-dd__opt.is-active .cat-dd__n { opacity: 0.85; }
/* Lightbox: buton slideshow activ */
.lightbox__bar #lbPlay.is-playing { background: var(--accent); color: var(--ink); }
/* ---------- Modal "Vreau un proiect ca acesta" (preview + formular) ---------- */
.proj-modal {
position: fixed;
inset: 0;
z-index: 400;
display: none;
place-items: center;
background: rgba(6, 8, 10, 0.75);
backdrop-filter: blur(4px);
padding: 1rem;
}
.proj-modal.is-open { display: grid; }
.proj-modal__box {
position: relative;
width: min(560px, 100%);
max-height: 92vh;
overflow-y: auto;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 0 1.8rem 1.8rem;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.proj-modal__bar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.7rem 0;
margin: 0 -0.2rem 0.2rem;
background: var(--ink-2);
}
.proj-modal__close {
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ink-3);
border: none;
color: var(--haze);
cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.proj-modal__close:hover { background: var(--line-strong); color: var(--cta); }
.proj-modal__head h3 { margin: 0; font-size: calc(1.3rem * var(--text-scale)); }
.proj-modal__cat { color: var(--accent); font-size: calc(0.85rem * var(--text-scale)); font-family: var(--font-mono); }
.proj-modal__preview {
width: 100%;
max-height: 300px;
object-fit: contain;
border-radius: var(--radius-sm);
margin: 1rem 0 1.4rem;
background: var(--ink);
}
.proj-modal__form label {
display: block;
font-size: calc(0.85rem * var(--text-scale));
color: var(--haze);
margin-bottom: 0.9rem;
}
.proj-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.proj-modal__form input,
.proj-modal__form textarea {
width: 100%;
margin-top: 0.35rem;
background: var(--ink-3);
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 0.65rem 0.8rem;
color: var(--paper);
font: inherit;
resize: vertical;
}
.proj-modal__form input:focus,
.proj-modal__form textarea:focus { outline: none; border-color: var(--accent); }
.proj-modal__submit {
width: 100%;
background: var(--cta);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.8rem;
font-weight: 700;
cursor: pointer;
margin-top: 0.3rem;
transition: filter var(--dur) var(--ease);
}
.proj-modal__submit:hover { filter: brightness(1.08); }
.proj-modal__note { text-align: center; color: var(--haze-2); font-size: calc(0.85rem * var(--text-scale)); margin: 0.9rem 0 0; }
.proj-modal__note a { color: var(--accent); }
.proj-modal__status { text-align: center; color: var(--accent); font-size: calc(0.9rem * var(--text-scale)); margin-top: 0.6rem; min-height: 1.2em; }
@media (max-width: 480px) { .proj-modal__row { grid-template-columns: 1fr; } }
/* ---------- Marca "AZTEC Inflatables" — stil consecvent peste tot ---------- */
/* Ambele galbene: AZTEC bold, Inflatables light. Folosire:
AZTEC Inflatables */
.brand-name {
color: var(--accent);
font-weight: 300;
text-transform: none !important;
font-variant: normal !important;
}
.brand-name b,
.brand-name strong {
color: var(--accent);
font-weight: 800;
text-transform: none !important;
}
/* Modal: câmp de atașare fișier */
.proj-modal__file { font-size: calc(0.85rem * var(--text-scale)); color: var(--haze); }
.proj-modal__file input[type="file"] {
margin-top: 0.35rem;
width: 100%;
color: var(--haze);
font-size: calc(0.85rem * var(--text-scale));
}
.proj-modal__file input[type="file"]::file-selector-button {
background: var(--ink-3);
color: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 7px;
padding: 0.4rem 0.8rem;
margin-right: 0.7rem;
cursor: pointer;
font: inherit;
font-size: calc(0.82rem * var(--text-scale));
transition: border-color var(--dur) var(--ease);
}
.proj-modal__file input[type="file"]::file-selector-button:hover { border-color: var(--accent); }
/* Galerie: fade-in stagger la încărcarea imaginilor */
.masonry__item.is-loading {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
.masonry__item.is-in {
opacity: 1;
transform: none;
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Dropdown categorie în overlay-ul de căutare */
.sf-dd { position: relative; display: inline-block; }
.sf-dd__btn {
display: inline-flex; align-items: center; gap: 0.6rem; justify-content: space-between;
background: var(--ink-2); color: var(--paper);
border: 1px solid var(--line-strong); border-radius: 999px;
padding: 0.4rem 0.9rem; font: inherit; font-size: var(--step--1);
cursor: pointer; min-width: 160px;
transition: border-color var(--dur) var(--ease);
}
.sf-dd__btn:hover, .sf-dd.is-open .sf-dd__btn { border-color: var(--accent); }
.sf-dd__btn svg { color: var(--accent); transition: transform var(--dur) var(--ease); }
.sf-dd.is-open .sf-dd__btn svg { transform: rotate(180deg); }
.sf-dd__list {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 100%; max-height: 260px; overflow-y: auto;
margin: 0; padding: 0.4rem; list-style: none;
background: var(--ink-2); border: 1px solid var(--line-strong);
border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
z-index: 60; opacity: 0; transform: translateY(-6px);
pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sf-dd.is-open .sf-dd__list { opacity: 1; transform: none; pointer-events: auto; }
.sf-dd__opt {
padding: 0.5rem 0.8rem; border-radius: 7px; cursor: pointer;
color: var(--haze); font-size: calc(0.9rem * var(--text-scale)); white-space: nowrap;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sf-dd__opt:hover { background: var(--ink-3); color: var(--paper); }
.sf-dd__opt.is-active { background: var(--accent); color: var(--ink); font-weight: 600; }
/* Link admin discret în footer */
.footer-admin {
display: block; text-align: center; margin-top: 0.8rem;
color: var(--haze-2); font-size: calc(0.72rem * var(--text-scale)); opacity: 0.4;
text-decoration: none; letter-spacing: 0.05em;
transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-admin:hover { opacity: 1; color: var(--accent); }
/* Galerie în articol de blog */
.article__gallery {
columns: 3 200px;
column-gap: 0.8rem;
margin: 2rem 0;
}
.article__gitem {
display: block; overflow: hidden; padding: 0;
border-radius: var(--radius-sm);
background: var(--ink-2); cursor: pointer; line-height: 0;
break-inside: avoid; margin-bottom: 0.8rem; width: 100%;
position: relative;
}
.article__gitem img {
width: 100%; height: auto; display: block;
filter: brightness(0.8) contrast(1.02);
transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.article__gitem:hover img { filter: brightness(1) contrast(1); transform: scale(1.02); }
/* ===== Lightbox reutilizabil (galerie articol) ===== */
@media (max-width: 640px) {
}
/* Lightbox pe mobil: mai puține butoane, fără înghesuială */
@media (max-width: 640px) {
.lightbox__bar { padding: 0.6rem 0.8rem; gap: 0.4rem; }
.lightbox__counter { min-width: auto; font-size: calc(0.8rem * var(--text-scale)); }
.lightbox__actions { min-width: auto; }
/* ascunde grid (redundant cu X) pe mobil */
#lbGrid { display: none; }
.lightbox__bar button { width: 36px; height: 36px; }
.lightbox__zoom, .lightbox__actions { gap: 0.2rem; }
}
/* TEMPORAR: eticheta versiune lângă marcă (scoate-o când site-ul e final) */
.brand-ver {
/* reperul de versiune rămâne în cod (util la verificarea livrării),
dar nu se mai afișează în site */
display: none !important;
font-family: var(--font-mono);
font-size: calc(0.65rem * var(--text-scale));
color: var(--haze-2);
background: var(--ink-3);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.15em 0.5em;
margin-left: 0.5rem;
letter-spacing: 0.03em;
vertical-align: middle;
}
/* ---------- Videoclipuri în galerie ---------- */
.masonry__item--video { position: relative; }
.video-badge {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 58px; height: 58px;
display: grid; place-items: center;
background: rgba(8, 9, 11, 0.62);
border: 2px solid var(--accent);
color: var(--accent);
border-radius: 50%;
pointer-events: none;
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.masonry__item--video:hover .video-badge {
transform: translate(-50%, -50%) scale(1.1);
background: var(--accent);
color: var(--ink);
}
/* player în lightbox */
.lightbox__video {
max-width: 100%;
max-height: 100%;
width: auto; height: auto;
border-radius: var(--radius-sm);
background: #000;
}
/* thumbnail video fără poster */
.lightbox__thumb--video {
display: grid; place-items: center;
background: var(--ink-3);
color: var(--accent);
}
/* Video fără poster propriu: casetă cu iconiță video + titlu */
.masonry__item.is-video-placeholder {
aspect-ratio: 16 / 9;
background: linear-gradient(145deg, var(--ink-2), var(--ink-3));
border: 1px solid var(--line);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
}
.masonry__item.is-video-placeholder:hover { border-color: var(--accent); }
.video-placeholder__label {
position: absolute;
bottom: 0.8rem; left: 0.9rem; right: 0.9rem;
color: var(--haze);
font-size: calc(0.85rem * var(--text-scale));
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Subcategorii indentate în dropdown-ul de categorii */
.cat-dd__opt--sub {
padding-left: 1.8rem;
font-size: calc(0.88rem * var(--text-scale));
opacity: 0.92;
}
.cat-dd__opt--sub::before {
content: "└";
color: var(--haze-2);
margin-right: 0.4rem;
font-size: 0.8em;
}
/* Cloudflare Turnstile — verificare anti-spam în formulare */
.turnstile-box {
margin: 0.5rem 0 1rem;
display: flex;
justify-content: center;
min-height: 65px;
}
.proj-modal .turnstile-box { margin: 0.3rem 0 0.8rem; }
/* Consimțământ GDPR în formulare */
.consent {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 0.6rem 0 1rem;
font-size: calc(0.85rem * var(--text-scale));
line-height: 1.5;
color: var(--haze);
cursor: pointer;
}
.consent input[type="checkbox"] {
flex: none;
width: 18px;
height: 18px;
margin-top: 0.15rem;
accent-color: var(--accent);
cursor: pointer;
}
.consent a { color: var(--accent); text-decoration: underline; }
.consent a:hover { color: var(--cta); }
/* Politica de confidențialitate: tabel și meta */
.policy-updated {
font-family: var(--font-mono);
font-size: calc(0.8rem * var(--text-scale));
color: var(--haze-2);
margin-bottom: 1.5rem;
}
.policy-table {
width: 100%;
border-collapse: collapse;
margin: 1.2rem 0 1.6rem;
font-size: calc(0.88rem * var(--text-scale));
}
.policy-table th,
.policy-table td {
border: 1px solid var(--line);
padding: 0.7rem 0.8rem;
text-align: left;
vertical-align: top;
}
.policy-table th {
background: var(--ink-2);
color: var(--paper);
font-weight: 600;
}
.policy-table td { color: var(--haze); }
@media (max-width: 700px) {
.policy-table, .policy-table thead, .policy-table tbody,
.policy-table th, .policy-table td, .policy-table tr { display: block; }
.policy-table thead { display: none; }
.policy-table tr {
margin-bottom: 1rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
overflow: hidden;
}
.policy-table td { border: none; border-bottom: 1px solid var(--line); }
.policy-table td:last-child { border-bottom: none; }
}
/* ---------- Consimțământ cookie: banner + panou setări ---------- */
.cookie-bar {
position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 250;
max-width: 720px; margin-inline: auto;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: 14px;
padding: 1rem 1.2rem;
display: flex; flex-wrap: wrap; gap: 0.75rem;
align-items: center; justify-content: space-between;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cookie-bar__text {
flex: 1 1 280px; color: var(--haze); font-size: calc(0.88rem * var(--text-scale)); line-height: 1.5;
}
.cookie-bar__text a { color: var(--accent); text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-btn {
padding: 0.5rem 1rem; border-radius: 999px; font-size: calc(0.88rem * var(--text-scale));
cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cookie-btn--ghost {
border: 1px solid var(--line-strong); background: none; color: var(--paper);
}
.cookie-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.cookie-btn--primary {
border: none; background: var(--accent); color: var(--ink); font-weight: 600;
}
.cookie-btn--primary:hover { background: #ffd534; }
.cookie-modal {
position: fixed; inset: 0; z-index: 400;
background: rgba(6,8,10,0.78);
display: grid; place-items: center;
padding: 1.2rem;
backdrop-filter: blur(4px);
}
.cookie-modal__box {
width: min(600px, 100%); max-height: 88vh; overflow-y: auto;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cookie-modal__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0.6rem;
}
.cookie-modal__head h3 { margin: 0; font-size: calc(1.25rem * var(--text-scale)); }
.cookie-modal__close {
width: 36px; height: 36px; display: grid; place-items: center;
border: none; border-radius: 50%; background: var(--ink-3);
color: var(--haze); cursor: pointer;
}
.cookie-modal__close:hover { color: var(--cta); }
.cookie-modal__intro {
color: var(--haze-2); font-size: calc(0.88rem * var(--text-scale)); line-height: 1.6; margin: 0 0 1.2rem;
}
.cookie-cat {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.9rem; margin-bottom: 0.6rem;
border: 1px solid var(--line); border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--dur) var(--ease);
}
.cookie-cat:hover { border-color: var(--line-strong); }
.cookie-cat.is-locked { opacity: 0.75; cursor: default; }
.cookie-cat input[type="checkbox"] {
flex: none; width: 18px; height: 18px; margin-top: 0.15rem;
accent-color: var(--accent); cursor: pointer;
}
.cookie-cat.is-locked input { cursor: not-allowed; }
.cookie-cat__body { display: flex; flex-direction: column; gap: 0.25rem; }
.cookie-cat__body strong { color: var(--paper); font-size: calc(0.95rem * var(--text-scale)); }
.cookie-cat__desc { color: var(--haze-2); font-size: calc(0.83rem * var(--text-scale)); line-height: 1.5; }
.cookie-modal__actions {
display: flex; gap: 0.6rem; justify-content: flex-end;
margin-top: 1.2rem; flex-wrap: wrap;
}
@media (max-width: 560px) {
.cookie-bar { padding: 0.9rem 1rem; }
.cookie-bar__actions { width: 100%; }
.cookie-btn { flex: 1; text-align: center; }
.cookie-modal__actions .cookie-btn { flex: 1 1 100%; }
}
/* Conținut extern blocat (hartă etc.): mesaj clar cu ce trebuie activat */
.map-consent {
min-height: 420px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0.5rem; padding: 2.5rem 1.5rem; text-align: center;
background: var(--ink-2);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
}
.map-consent p { margin: 0; }
.map-consent__icon { color: var(--haze-2); margin-bottom: 0.3rem; }
.map-consent__title { font-size: calc(1.05rem * var(--text-scale)); color: var(--paper); }
.map-consent__note {
color: var(--haze); font-size: calc(0.9rem * var(--text-scale)); line-height: 1.65;
max-width: 52ch; margin-bottom: 0.9rem !important;
}
.map-consent__note strong { color: var(--accent); }
.map-consent__actions {
display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
margin-bottom: 0.5rem;
}
.map-consent__link {
padding: 0.6rem 1.1rem; border-radius: 999px;
border: 1px solid var(--line-strong); background: none;
color: var(--paper); font-size: calc(0.88rem * var(--text-scale)); cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.map-consent__link:hover { border-color: var(--accent); color: var(--accent); }
.map-consent__alt {
color: var(--haze-2); font-size: calc(0.82rem * var(--text-scale)); line-height: 1.6;
max-width: 48ch; margin-top: 0.4rem !important;
}
.map-consent__alt a { color: var(--accent); text-decoration: underline; }
@media (max-width: 560px) {
.map-consent { min-height: 340px; padding: 2rem 1.1rem; }
.map-consent__actions { width: 100%; flex-direction: column; }
.map-consent__actions > * { width: 100%; }
}
/* =========================================================
Buton flotant de contact rapid (setari.json → flotant)
========================================================= */
.fab-contact {
position: fixed;
right: 1.2rem;
bottom: 1.2rem;
z-index: 260;
display: flex;
align-items: center;
gap: 0;
height: 56px;
padding: 0 15px;
border-radius: 999px;
background: var(--accent);
color: var(--ink);
text-decoration: none;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab-contact--wa { background: #25d366; color: #073b21; }
.fab-contact:hover { gap: 0.55rem; padding-right: 1.2rem; transform: translateY(-2px); }
.fab-contact__text {
max-width: 0;
overflow: hidden;
white-space: nowrap;
font-weight: 700;
font-size: calc(0.92rem * var(--text-scale));
transition: max-width var(--dur) var(--ease);
}
.fab-contact:hover .fab-contact__text { max-width: 220px; }
@media (max-width: 640px) {
.fab-contact { height: 50px; right: 0.9rem; bottom: 0.9rem; }
.fab-contact:hover .fab-contact__text { max-width: 0; }
.fab-contact:hover { gap: 0; padding-right: 15px; }
}
/* =========================================================
Mod mentenanță
========================================================= */
.mentenanta {
min-height: 100vh;
display: grid;
place-content: center;
justify-items: center;
text-align: center;
gap: 0.6rem;
padding: 2rem 1.5rem;
max-width: 60ch;
margin: 0 auto;
}
.mentenanta h1 { font-size: var(--step-3); margin: 0.6rem 0 0; }
.mentenanta p { color: var(--haze); margin: 0; }
.mentenanta__contact { margin-top: 1rem !important; }
.mentenanta a { color: var(--accent); }
.mentenanta-nota {
position: fixed; top: 0; left: 0; right: 0; z-index: 400;
background: var(--cta); color: #fff;
font-size: calc(0.85rem * var(--text-scale)); text-align: center; padding: 0.45rem 1rem;
}
body:has(.mentenanta-nota) .site-header { top: 32px; }
/* =========================================================
Editor inline (doar pentru administratorul logat)
========================================================= */
.ie-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 500;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 1.2rem;
background: var(--ink-2);
border-top: 1px solid var(--accent);
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
}
.ie-bar__brand { font-weight: 700; color: var(--accent); font-size: calc(0.9rem * var(--text-scale)); }
.ie-bar__count { color: var(--haze); font-size: calc(0.85rem * var(--text-scale)); }
.ie-bar__actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.ie-btn {
background: var(--accent);
color: var(--ink);
border: none;
border-radius: 999px;
padding: 0.45rem 1.1rem;
font: inherit;
font-size: calc(0.88rem * var(--text-scale));
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.ie-btn--primary { background: #7bc47f; color: #06240c; }
.ie-btn--ghost {
background: transparent;
color: var(--haze);
border: 1px solid var(--line-strong);
font-weight: 500;
}
.ie-btn--ghost:hover { color: var(--paper); border-color: var(--accent); }
.ie-btn:disabled { opacity: 0.45; cursor: default; }
body.has-ie-bar { padding-bottom: 58px; }
body.ie-on [data-ed] {
outline: 1px dashed var(--line-strong);
outline-offset: 3px;
border-radius: 3px;
cursor: text;
transition: outline-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
body.ie-on [data-ed]:hover { outline-color: var(--accent); }
body.ie-on [data-ed]:focus {
outline: 2px solid var(--accent);
background: rgba(245, 197, 24, 0.07);
}
body.ie-on .ie-field.ie-modificat { outline-color: #7bc47f; }
body.ie-on a, body.ie-on button { cursor: text; }
.ie-toast {
position: fixed;
bottom: 72px;
left: 50%;
transform: translateX(-50%) translateY(140%);
z-index: 501;
background: var(--ink-3);
border: 1px solid var(--accent);
color: var(--paper);
padding: 0.7rem 1.3rem;
border-radius: 999px;
font-size: calc(0.9rem * var(--text-scale));
opacity: 0;
transition: transform 0.35s var(--ease), opacity 0.35s ease;
pointer-events: none;
}
.ie-toast.is-on { transform: translateX(-50%) translateY(0); opacity: 1; }
.ie-toast--err { border-color: var(--cta); }
/* ---------- Editor inline: unelte de formatare ---------- */
.ie-tools {
position: absolute;
z-index: 502;
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.25rem;
background: var(--ink-2);
border: 1px solid var(--accent);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.ie-tools button {
background: none;
border: none;
color: var(--paper);
width: 30px; height: 28px;
border-radius: 5px;
cursor: pointer;
font: inherit;
font-size: calc(0.9rem * var(--text-scale));
line-height: 1;
}
.ie-tools button:hover { background: var(--accent); color: var(--ink); }
.ie-tools__sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 0.15rem; }
/* ---------- Insigne pe imagini, linkuri și secțiuni ---------- */
.ie-anchor { position: relative; }
.ie-badge {
position: absolute;
top: 4px; right: 4px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--ink-2);
border: 1px solid var(--accent);
color: var(--paper);
border-radius: 999px;
padding: 0.2rem 0.55rem;
font: inherit;
font-size: calc(0.75rem * var(--text-scale));
line-height: 1.4;
cursor: pointer;
opacity: 0.55;
transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ie-badge:hover { opacity: 1; background: var(--accent); color: var(--ink); }
.ie-badge--sec { top: 6px; left: 6px; right: auto; max-width: 60%; }
.ie-badge--sec span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---------- Stări vizuale în modul editare ---------- */
body.ie-on [data-ed-sec] {
outline: 1px dashed var(--line-strong);
outline-offset: 6px;
border-radius: 6px;
}
body.ie-on [data-ed-sec][data-ed-ascunsa] {
opacity: 0.4;
outline: 2px dashed var(--cta);
}
[data-ed-ascunsa]::after {
content: "secțiune ascunsă pentru vizitatori";
position: absolute;
bottom: 6px; left: 6px;
background: var(--cta); color: #fff;
font-size: calc(0.7rem * var(--text-scale)); padding: 0.15rem 0.5rem; border-radius: 999px;
}
body.ie-on .ie-img {
cursor: pointer;
outline: 2px dashed var(--line-strong);
outline-offset: 3px;
}
body.ie-on .ie-img:hover { outline-color: var(--accent); }
.ie-img--incarca { opacity: 0.4; filter: grayscale(1); }
body.ie-on .ie-modificat { outline-color: #7bc47f !important; }
body.ie-on [data-ed-href] { outline: 1px dotted var(--line-strong); outline-offset: 2px; }
/* Pagina deschisă în panoul de administrare: bara proprie dispare,
butoanele de salvare sunt cele ale panoului. */
body.ie-incorporat .ie-bar { display: none; }
body.ie-incorporat.has-ie-bar { padding-bottom: 0; }
body.ie-incorporat .ie-toast { bottom: 20px; }
/* =========================================================
Acordeon — regulă generală pentru tot site-ul
Un singur panou deschis odată (vezi site.js). Titlul deschis
devine galben, ca să se vadă imediat unde ești.
========================================================= */
.qa {
border-bottom: 1px solid var(--line);
transition: border-color var(--dur) var(--ease);
}
.qa > summary {
cursor: pointer;
list-style: none;
padding: 1.2rem 0.6rem 1.2rem 0;
margin: 0;
font-weight: 600;
font-size: calc(1.05rem * var(--text-scale));
color: var(--paper);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border-radius: 6px;
transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--accent); }
.qa > summary:focus { outline: none; }
.qa > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* semnul + / – din dreapta */
.qa > summary::after {
content: "+";
color: var(--accent);
font-size: calc(1.5rem * var(--text-scale));
line-height: 1;
flex: none;
transition: transform var(--dur) var(--ease);
}
/* panoul deschis: titlu galben, o linie galbenă în stânga */
.qa[open] { border-bottom-color: var(--line-strong); }
.qa[open] > summary {
color: var(--accent);
padding-left: 0.9rem;
box-shadow: inset 3px 0 0 var(--accent);
}
.qa[open] > summary::after { content: "–"; transform: rotate(180deg); }
.qa__body {
color: var(--haze);
margin: 0 0 1.3rem;
padding-left: 0.9rem;
max-width: 72ch;
animation: qaDeschide 0.35s var(--ease) both;
}
.qa__body p { margin: 0 0 0.6rem; }
.qa__body ul { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; }
.qa__body li { margin: 0.2rem 0; }
@keyframes qaDeschide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.qa__body { animation: none; }
}
/* =========================================================
v141 — strat de finisaj global
========================================================= */
/* Selecția de text poartă culorile mărcii */
::selection { background: var(--accent); color: var(--ink); }
/* Bare de derulare pe culorile mărcii */
html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--ink-2); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--accent), var(--accent-dim));
border-radius: 999px;
border: 2px solid var(--ink-2);
}
::-webkit-scrollbar-thumb:hover { background: #ffd534; }
::-webkit-scrollbar-corner { background: var(--ink); }
/* Un singur limbaj de focus pe tot site-ul (unde nu există deja unul propriu) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
:root { accent-color: var(--accent); }
/* Titluri echilibrate, paragrafe fără cuvinte orfane */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Derulare lină + ancorele nu se ascund sub antet */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Eticheta de secțiune primește liniuța de marcă */
.eyebrow::before {
content: "";
display: inline-block;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--accent);
margin-right: 0.55rem;
vertical-align: 0.18em;
}
/* Butonul principal: umbră caldă, ridicare la hover */
.header-cta {
box-shadow: 0 6px 22px -10px rgba(232, 85, 42, 0.55);
transition: transform var(--dur) var(--ease),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.header-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px -12px rgba(232, 85, 42, 0.6);
}
/* Formulare: inel de focus pe tema mărcii, indicii mai discrete */
input::placeholder, textarea::placeholder { color: var(--haze-2); }
.form input:focus, .form textarea:focus, .form select:focus,
.faq-search:focus, .proj-modal input:focus, .proj-modal textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.14);
outline: none;
}
/* Galerie: în repaus miniaturile stau în penumbră (transparente peste
fundalul închis); sub cursor se aprind complet */
.masonry__item img {
opacity: 0.45;
transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
}
.masonry__item:hover img {
transform: scale(1.045);
opacity: 1;
}
/* Antetul capătă sticlă mată după primul ecran derulat */
.site-header.is-scrolled {
background: rgba(14, 15, 17, 0.86);
background: color-mix(in srgb, var(--ink) 86%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Legătura „sari la conținut” — invizibilă până primește focus */
.skip-link {
position: fixed;
top: 10px; left: 10px;
z-index: 600;
background: var(--accent);
color: var(--ink);
font-weight: 700;
padding: 0.6rem 1.1rem;
border-radius: 999px;
/* ascuns complet până la focus (nu doar deplasat — transformările din
animații nu-l mai pot aduce pe ecran din greșeală) */
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
width: auto; height: auto;
overflow: visible;
clip-path: none;
opacity: 1;
pointer-events: auto;
outline: none;
transform: none;
animation: none !important;
}
/* Nota „tradus automat" din articolele de blog în engleză */
.article__auto {
margin: 0 0 1.2rem;
font-size: calc(0.85rem * var(--text-scale));
color: var(--haze-2);
border-left: 2px solid var(--line-strong);
padding-left: 0.8rem;
}
/* Navigația lipicioasă a paginii de servicii */
.svc-nav {
position: sticky;
top: 86px;
z-index: 40;
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
width: max-content;
max-width: 100%;
padding: 0.45rem 0.6rem;
margin: 0 0 1.4rem;
background: rgba(14, 15, 17, 0.88);
background: color-mix(in srgb, var(--ink) 88%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid var(--line);
border-radius: 999px;
}
.svc-nav a {
font-size: var(--step--1);
color: var(--haze);
padding: 0.32rem 0.85rem;
border-radius: 999px;
white-space: nowrap;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-nav a:hover, .svc-nav a:focus-visible {
background: var(--accent);
color: var(--ink);
outline: none;
}
.svc { scroll-margin-top: 170px; }
@media (max-width: 860px) {
.svc-nav { top: 66px; border-radius: var(--radius); }
}
/* Granulație foarte fină peste tot — textura „de studio” */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 390;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* =========================================================
v142 — nivelul „spectaculos”
========================================================= */
/* Tranziții blânde între pagini (unde browserul le știe) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
/* Fiecare secțiune începe cu o linie-semnătură a mărcii */
.section { position: relative; }
.section::before {
content: "";
position: absolute;
top: -1px; left: 0;
width: 110px; height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
}
/* CTA principal: o dâră de lumină trece peste buton la hover */
.header-cta { position: relative; overflow: hidden; }
.header-cta::after {
content: "";
position: absolute;
top: 0; left: -130%;
width: 55%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-20deg);
transition: left 0.55s var(--ease);
pointer-events: none;
}
.header-cta:hover::after { left: 140%; }
/* Galerie: titlul lucrării apare la hover, pe o umbră de jos */
.masonry__cap {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 2.2rem 0.8rem 0.65rem;
background: linear-gradient(transparent, rgba(8, 9, 11, 0.88));
color: var(--paper);
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.01em;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
pointer-events: none;
}
.masonry__item:hover .masonry__cap { opacity: 1; transform: none; }
/* Subsol: invitația mare, înaintea coloanelor */
.footer-cta {
max-width: var(--page-w);
margin-inline: auto;
padding: 2.4rem var(--pad-page) 0.4rem;
}
.footer-cta a {
display: inline-flex;
align-items: baseline;
gap: 0.7rem;
font-size: var(--step-2);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--paper);
text-decoration: none;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--line-strong);
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-cta a span {
color: var(--accent);
transition: transform var(--dur) var(--ease);
}
.footer-cta a:hover { color: var(--accent); border-color: var(--accent); }
.footer-cta a:hover span { transform: translateX(8px); }
/* Servicii: fiecare capitol e numerotat discret, ca un catalog */
body[data-page="servicii"] main { counter-reset: svc; }
.svc { counter-increment: svc; }
.svc h2::before {
content: "0" counter(svc);
display: block;
font-family: var(--font-mono);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.22em;
color: var(--accent);
opacity: 0.9;
margin-bottom: 0.35rem;
}
#idee h2::before { content: none; }
/* Marquee: banda cinetică de pe prima pagină */
.marquee {
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 0.9rem 0;
user-select: none;
}
.marquee__track {
display: flex;
gap: 3rem;
width: max-content;
will-change: transform;
/* mișcarea o dă fizica din index.html — aceeași ca banda de parteneri */
}
.marquee__set {
display: flex;
gap: 3rem;
align-items: baseline;
white-space: nowrap;
}
.marquee__set a {
font-size: var(--step-2);
font-weight: 800;
letter-spacing: 0.02em;
color: transparent;
-webkit-text-stroke: 1px var(--haze-2);
text-decoration: none;
transition: color 0.25s var(--ease), transform 0.25s var(--ease),
-webkit-text-stroke-color 0.25s var(--ease);
}
.marquee__set a:nth-child(odd) {
color: var(--accent);
-webkit-text-stroke: 0;
}
/* hover: conturul se umple, plinul se aprinde */
.marquee__set a:hover, .marquee__set a:focus-visible {
color: var(--accent);
-webkit-text-stroke-color: var(--accent);
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { transform: none !important; }
}
/* =========================================================
v143 — redesignul „AER"
========================================================= */
/* Aurorele: două respirații de culoare în spatele secțiunilor-cheie */
.aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.aurora span {
position: absolute;
width: 46vw;
height: 46vw;
max-width: 640px;
max-height: 640px;
border-radius: 50%;
filter: blur(70px);
opacity: 0.1;
}
.aurora span:first-child {
left: -12%;
top: 6%;
background: radial-gradient(circle, var(--accent), transparent 65%);
animation: auroraA 22s ease-in-out infinite;
}
.aurora span:last-child {
right: -14%;
bottom: -8%;
background: radial-gradient(circle, var(--cta), transparent 65%);
animation: auroraB 26s ease-in-out infinite;
}
@keyframes auroraA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(6vw, 4vh) scale(1.15); }
}
@keyframes auroraB {
0%, 100% { transform: translate(0, 0) scale(1.1); }
50% { transform: translate(-5vw, -5vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.aurora span { animation: none; }
}
/* Peste text NEeditabil cursorul rămâne săgeată — I-beam doar unde chiar se scrie */
body { cursor: default; }
a, button, summary, label, select, [role="button"],
.masonry__item { cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]), textarea,
[contenteditable="true"] { cursor: text; }
input[type="checkbox"], input[type="radio"] { cursor: pointer; }
/* Pe prima pagină, antetul plutește transparent peste erou */
body[data-page="acasa"] .site-header:not(.is-scrolled) {
background: transparent;
border-bottom-color: transparent;
}
body[data-page="acasa"] .site-header:not(.is-scrolled) .nav a { color: var(--paper); }
body[data-page="acasa"] .site-header:not(.is-scrolled) .brand-ver { background: rgba(14,15,17,0.5); }
/* Butonul de acțiune din meniul principal */
.nav .nav-cta {
background: var(--cta);
color: #fff;
font-weight: 700;
padding: 0.42rem 1.05rem;
border-radius: 999px;
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav .nav-cta:hover {
background: #ff6a3d;
color: #fff;
transform: translateY(-2px);
}
/* Servicii: numărul capitolului devine fantomă monumentală în spatele titlului */
.svc { position: relative; }
.svc h2 { position: relative; z-index: 1; }
.svc h2::before {
position: absolute;
left: -0.08em;
top: -0.62em;
z-index: -1;
font-size: clamp(4.5rem, 11vw, 8.5rem);
letter-spacing: 0;
color: rgba(255, 255, 255, 0.045);
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
opacity: 1;
margin: 0;
}
/* Cronologia din Despre: anii, monumentali */
.tl__year {
font-size: var(--step-2) !important;
line-height: 1;
color: transparent !important;
-webkit-text-stroke: 1.5px var(--accent);
}
/* Legătura-mega din CTA final: contur care se umple la hover */
.mega-link {
display: inline-block;
font-size: clamp(calc(2rem * var(--text-scale)), 7vw, calc(4.4rem * var(--text-scale)));
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
color: transparent;
-webkit-text-stroke: 1.5px var(--accent);
transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.mega-link:hover {
color: var(--accent);
transform: translateY(-3px);
}
/* Contact: formularul poartă linia mărcii */
body[data-page="contact"] .form {
border-top: 3px solid var(--accent);
padding-top: 1.6rem;
}
/* Titlurile paginilor interioare, la scara identității */
main .intro h1 { letter-spacing: -0.03em; }
/* =========================================================
v160 — FUNDALUL VIU: pelicula de fâșii, legată de derulare
O fotografie aleatoare per pagină, gri, repetată pe trei
fâșii-paralelogram (50vw, tăiate diagonal pe ambele părți),
ca o peliculă de film. La start prima fâșie se vede ÎNTREAGĂ,
iar în dreapta e mereu vizibilă continuarea următoarei.
--fc (ciclul derulării) trage pelicula spre stânga; în sus,
înapoi pe același drum. Bucla e fără capăt: pasul = o fâșie.
========================================================= */
.fundal {
--fc: 0;
--lat: 50vw; /* lățimea unei fâșii: jumătate din pagină */
/* rostul dintre fâșii = JUMĂTATE din lățimea paginii */
--pas: calc(var(--lat) + 50vw);
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.fundal__banda {
position: absolute;
top: -8%;
bottom: -8%;
left: 0;
width: calc(var(--pas) * 3);
/* la --fc=0: fâșia din mijloc întreagă pe ecran (începe la 8vw);
SENS INVERSAT: la derularea în jos pelicula curge spre dreapta,
continuarea intră prin stânga; un pas de scroll = o fâșie */
transform: translate3d(calc(8vw - var(--pas) + var(--fc) * var(--pas)), 0, 0);
will-change: transform;
}
.fundal__strat {
position: absolute;
top: 0;
bottom: 0;
width: var(--lat);
background-size: cover;
background-position: center;
filter: grayscale(1) brightness(0.78);
opacity: 0.09;
clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}
.fundal__strat:nth-child(1) { left: 0; }
.fundal__strat:nth-child(2) { left: var(--pas); }
.fundal__strat:nth-child(3) { left: calc(var(--pas) * 2); }
@media (max-width: 900px) {
.fundal { --lat: 72vw; } /* pasul se recalculează singur */
.fundal__strat { filter: grayscale(1) brightness(0.78); }
}
@media (prefers-reduced-motion: reduce) {
.fundal { --fc: 0 !important; } /* cadrul de start: fâșia întreagă */
}
/* Invitatorul: din când în când, câte un element — miniatură, tab de
acordeon, rând, pas, statistică — face o rotire completă și rapidă
pe axa X, ca o carte de joc întoarsă în aer. Invitație la explorat. */
@keyframes rotireX {
from { transform: perspective(700px) rotateX(0turn); }
to { transform: perspective(700px) rotateX(1turn); }
}
.se-roteste {
animation: rotireX 0.75s cubic-bezier(0.45, 0, 0.2, 1);
position: relative;
z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
.se-roteste { animation: none; }
}
/* Elementele care intră cu un fade propriu (banda de dovezi, formula din erou)
pornesc de la opacity: 0. Când invitatorul le rotește, animația lor de intrare
e înlocuită de rotireX — așa că le ținem vizibile explicit, altfel ar dispărea
cât durează rotirea. */
.hero-dovezi.se-roteste,
.hero-formula.se-roteste {
opacity: 1;
}
/* ---------- Comutatorul de limba RO/EN din antet ---------- */
.lang-switch {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.4rem; height: 2rem; padding: 0 0.55rem;
border: 1px solid var(--line-strong); border-radius: 999px;
font-size: calc(0.78rem * var(--text-scale));
font-weight: 700; letter-spacing: 0.08em;
color: var(--paper); text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- Prima imagine din slideshow-ul de pe prima pagină ----------
Pe ecrane înguste, imaginea largă e decupată pe verticală: fără ancorare
am vedea mijlocul (burta dinozaurului). O ancorăm sus-dreapta, unde e capul.
Regula stă aici, nu în pagină, ca să fie identică în RO și în EN. */
@media (max-width: 1000px) {
.hero-full__slide--first,
.hero-full__slide--first.is-active {
background-position: 100% 15% !important;
}
}
/* ---------- Meniu: la hover, pastilă galbenă cu text negru ----------
Regulă scrisă explicit și cu specificitate mai mare, ca nimic adăugat
ulterior (starea „pagina curentă", comutatorul de limbă etc.) să nu o
poată anula. Valabil în antet și în subsol, RO și EN. */
.site-header .nav a:hover,
.site-header .nav a:focus-visible,
.site-header .nav a[aria-current="page"]:hover,
.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible {
background: var(--accent);
color: var(--ink) !important;
outline: none;
}
.site-header .nav a:hover::after,
.site-header .nav a[aria-current="page"]:hover::after { background: var(--ink); }
/* ---------- Mobil: fără derulare pe orizontală ----------
Pe telefon pagina ocupă exact lățimea ecranului, cu 4px margine de o parte
și de alta. Nimic nu mai poate împinge conținutul în lateral: elementele
late (benzi, imagini, tabele, cuvinte lungi) sunt ținute în interior. */
@media (max-width: 900px) {
:root { --pad-page: 4px; }
html, body {
max-width: 100%;
/* „clip", nu „hidden": „hidden" face din body un container de derulare,
iar antetul cu position:sticky nu se mai lipește de marginea de sus —
pe telefon meniul aluneca odata cu pagina. „clip" taie la fel
depasirea pe orizontala, dar nu creeaza container de derulare. */
overflow-x: clip;
}
/* browsere vechi (Safari sub 16) nu cunosc „clip" — acolo rămâne „hidden" */
@supports not (overflow: clip) {
html, body { overflow-x: hidden; }
}
body > *, main, section, header, footer {
max-width: 100%;
}
img, video, iframe, canvas, svg { max-width: 100%; }
/* Textul curent se micșorează pe telefon (titlurile rămân neatinse):
scara generală scade, deci tot ce e calculat cu --text-scale urmează. */
:root { --text-scale: 1.14; }
h1, h2, .hero-full__title, .hero-full__slogan, .section-title,
.article__title, .cta-final__title, .hero-formula {
--text-scale: 1.375; /* titlurile și subtitlurile rămân ca înainte */
}
/* cuvintele foarte lungi (adrese, denumiri) se rup în loc să lățească pagina */
h1, h2, h3, p, li, summary, .lead { overflow-wrap: anywhere; }
}
/* ---------- Antetul pe telefon: butonul de meniu nu mai poate fi împins afară ----------
Zona din dreapta (căutare, limbă, meniu) rămâne întreagă, iar numele mărcii
cedează spațiu — altfel butonul „sandwich" ieșea din ecran și era tăiat. */
@media (max-width: 900px) {
.site-header__inner {
gap: 0.5rem;
flex-wrap: nowrap;
}
.brand {
min-width: 0; /* poate ceda din lățime */
overflow: hidden;
}
.brand-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.site-header__inner > div:last-child {
flex: none; /* căutare + limbă + meniu: lățime intactă */
gap: 0.4rem;
}
.nav-toggle {
flex: none;
width: 38px;
height: 38px;
}
.lang-switch { min-width: 2.1rem; height: 1.9rem; padding: 0 0.4rem; }
}
@media (max-width: 420px) {
/* pe ecrane foarte înguste rămân doar sigla, lupa, limba și meniul */
.brand-name { display: none; }
}
/* ---------- Termenul venit din căutare ----------
Rezultatul căutării duce la pagină cu ?cauta=…; primul loc unde apare
termenul e adus în centrul ecranului și marcat scurt, apoi marcajul dispare. */
mark.cauta-gasit, .cauta-gasit {
background: var(--accent);
color: var(--ink);
border-radius: 4px;
padding: 0.05em 0.25em;
box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.25);
animation: cautaPuls 1.1s ease-out 2;
transition: background 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}
.cauta-gasit.se-stinge {
background: transparent;
color: inherit;
box-shadow: none;
animation: none;
}
@keyframes cautaPuls {
0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.55); }
100% { box-shadow: 0 0 0 12px rgba(245, 197, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
mark.cauta-gasit, .cauta-gasit { animation: none; }
}
/* ---------- Casete care duc undeva ----------
Blocurile de informație de pe prima pagină (materiale, studii de caz) sunt
clickabile pe toată suprafața: cursor de mână, chenar care se aprinde și o
săgeată discretă în colț. Butoanele dinăuntru rămân cu destinația lor. */
.info-block--link {
cursor: pointer;
position: relative;
padding-right: 2.6rem;
}
.info-block--link::after {
content: "→";
position: absolute;
top: 1.2rem; right: 1.2rem;
color: var(--accent);
opacity: 0.45;
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.info-block--link:hover::after,
.info-block--link:focus-visible::after {
opacity: 1;
transform: translateX(4px);
}
.info-block--link:hover h3,
.info-block--link:focus-visible h3 { color: var(--accent); }
.info-block--link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---------- Widgetul de recenzii (Wally) ---------- */
.wally-gazda {
width: 100%;
min-height: 220px;
margin-top: 0.5rem;
}
.wally-gazda:empty::after {
content: "";
display: block;
height: 180px;
border-radius: var(--radius);
background: linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 37%, var(--ink-2) 63%);
background-size: 400% 100%;
animation: wallyIncarca 1.4s ease-in-out infinite;
}
@keyframes wallyIncarca { to { background-position: -135% 0; } }
/* ---------- v256: Erou — aer EGAL deasupra și dedesubtul butoanelor ----------
Golul de sus era suma a doi termeni (marginea paragrafului + marginea
rândului), cel de jos doar unul — de aici diferența. Acum paragrafele nu mai
lasă margine în jos, iar sus și jos folosesc aceeași variabilă: rămân egale
la orice lățime. Regula stă aici, nu în pagină, ca RO și EN să fie identice. */
:root { --hero-aer: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); }
.hero-full__desc p { margin: 0; }
.hero-full__desc p + p { margin-top: 0.8rem; }
.hero-cta-row {
gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
margin-top: var(--hero-aer);
}
/* selector cu două clase: altfel „.hero-full__desc p" (mai specific decât
„.hero-full__mark") i-ar anula marginea de sus și golul de jos ar dispărea */
.hero-full__desc .hero-full__mark,
.hero-full__mark {
margin-top: var(--hero-aer);
margin-bottom: 0;
}
@media (max-height: 900px) {
:root { --hero-aer: clamp(1.2rem, 0.9rem + 1vw, 1.8rem); }
}
@media (max-width: 900px) {
:root { --hero-aer: 1.4rem; }
.hero-cta-row { gap: 0.9rem; }
}
/* ---------- v255: plăcuță temporară de versiune (diagnostic cache) ----------
Arată ce versiune a ajuns EFECTIV în browser, separat pentru HTML, JS și CSS.
Dacă cele trei nu coincid, un fișier a rămas în cache (LiteSpeed sau browser).
Se scoate ștergând acest bloc, „--ver-css" și initPlacutaVersiune() din site.js. */
:root { --ver-css: "275"; }
.ver-temp {
position: fixed;
left: 8px;
bottom: 8px;
z-index: 9999;
display: flex;
gap: 0.45rem;
align-items: center;
padding: 0.42rem 0.85rem;
border-radius: 999px;
background: rgba(14, 15, 17, 0.82);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
font-family: var(--font-mono, monospace);
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.9);
pointer-events: none;
user-select: none;
}
.ver-temp b { color: var(--accent); font-weight: 700; }
.ver-temp .ver-temp__ok { color: #4ade80; }
.ver-temp .ver-temp__nu { color: #f87171; font-weight: 700; }
@media (max-width: 900px) {
.ver-temp { font-size: 12px; padding: 0.34rem 0.6rem; left: 4px; bottom: 4px; }
}
@media print { .ver-temp { display: none; } }
/* ---------- v257: jurnalul livrărilor (clic pe plăcuța de versiune) ---------- */
.ver-temp { cursor: pointer; pointer-events: auto; border: 1px solid rgba(255,255,255,0.18); }
.ver-temp:hover { border-color: var(--accent); }
.ver-temp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.fara-derulare { overflow: hidden; }
.jurnal-fundal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
animation: jurnalApare 0.18s ease-out;
}
@keyframes jurnalApare { from { opacity: 0; } to { opacity: 1; } }
.jurnal {
width: min(640px, 100%);
max-height: min(80vh, 720px);
display: flex;
flex-direction: column;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.jurnal__cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--line);
}
.jurnal__cap h2 {
margin: 0;
font-size: calc(1.05rem * var(--text-scale));
letter-spacing: -0.01em;
}
.jurnal__x {
background: none;
border: 0;
color: var(--haze);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
padding: 0 0.3rem;
}
.jurnal__x:hover { color: var(--accent); }
.jurnal__corp { overflow-y: auto; padding: 0.4rem 1.2rem 1.2rem; }
.jurnal-v { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.jurnal-v:last-child { border-bottom: 0; }
.jurnal-v__cap {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin: 0 0 0.5rem;
font-family: var(--font-mono, monospace);
font-size: calc(0.82rem * var(--text-scale));
}
.jurnal-v__cap b { color: var(--paper); }
.jurnal-v__data { color: var(--haze-2); font-size: 0.85em; }
.jurnal-v__acum {
color: var(--ink);
background: var(--accent);
border-radius: 999px;
padding: 0.12rem 0.5rem;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.jurnal-v.este-acum b { color: var(--accent); }
.jurnal-v ul { margin: 0; padding-left: 1.1rem; }
.jurnal-v li {
margin: 0.3rem 0;
color: var(--haze);
font-size: calc(0.9rem * var(--text-scale));
line-height: 1.5;
}
.jurnal-gol { color: var(--haze-2); padding: 1rem 0; }
@media (max-width: 900px) {
.jurnal-fundal { padding: 0.5rem; align-items: flex-end; }
.jurnal { max-height: 86vh; width: 100%; }
.jurnal__cap { padding: 0.8rem 0.9rem; }
.jurnal__corp { padding: 0.3rem 0.9rem 1rem; }
.jurnal-v li { font-size: calc(0.95rem * var(--text-scale)); }
}
/* ---------- v258: antetul rămâne lipit sus și pe telefon ----------
Pe mobil antetul se derula odată cu pagina. Cauza era „overflow-x: hidden"
pe html/body (vezi blocul de mai sus). Aici doar întărim regula, ca nicio
altă foaie să nu o poată slăbi, și îi dăm un fundal opac când e desprins. */
@media (max-width: 900px) {
.site-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 200;
}
/* pe prima pagină antetul e transparent peste erou; din clipa în care
pagina s-a derulat, primește fundal, altfel textul se citește peste poză */
.site-header.is-scrolled {
background: rgba(14, 15, 17, 0.94);
border-bottom-color: var(--line);
}
/* meniul deschis stă deasupra oricărui conținut */
.site-header.is-open { z-index: 300; }
}
/* ---------- v260: eroul se măsoară în raport cu ecranul ----------
Problema: compoziția din erou (titlu, slogan, subtitlu, bandă, descriere,
butoane, marcă) era dimensionată doar după LĂȚIME. Pe o fereastră lată dar
scundă — un laptop, sau browserul cu multe bare — coloana ieșea sub fold și
se tăiau butoanele și rândul de marcă.
Soluția: o singură unitate de compunere, „--u", luată ca cea mai STRÂNSĂ
dintre lățime și înălțime. Toate mărimile din erou se exprimă în „--u", deci
întreaga compoziție se strânge sau se lărgește dintr-un singur loc, păstrând
proporțiile. Coeficientul 1.5 e ales ca înălțimea să preia comanda pe orice
fereastră mai lată de ~1.5:1 — adică exact acolo unde apărea problema.
Mobilul nu e atins: sub 900px rămân regulile de acum, care funcționează. */
@media (min-width: 901px) {
.hero-full {
--u: min(1vw, 1.5vh);
/* aerul de deasupra și de sub butoane — vezi v256, rămâne egal */
--hero-aer: clamp(0.8rem, calc(1.5 * var(--u)), 2.4rem);
}
.hero-full .hero-full__title {
font-size: clamp(2rem, calc(7.1 * var(--u)), 120px);
margin-bottom: clamp(0.5rem, calc(1.2 * var(--u)), 1.6rem);
}
.hero-full .hero-full__slogan {
font-size: clamp(1.05rem, calc(2.75 * var(--u)), 3.2rem);
margin-bottom: clamp(0.7rem, calc(2 * var(--u)), 2.8rem);
}
.hero-full .hero-formula {
font-size: clamp(0.85rem, calc(1.28 * var(--u)), 1.5rem);
}
.hero-full .hero-dovezi {
margin-top: clamp(0.6rem, calc(1.1 * var(--u)), 1.6rem);
margin-bottom: clamp(0.6rem, calc(1.15 * var(--u)), 1.7rem);
}
.hero-full .hero-dovezi__set {
font-size: clamp(0.68rem, calc(0.85 * var(--u)), 1.05rem);
}
.hero-full .hero-full__desc {
font-size: clamp(0.85rem, calc(1.25 * var(--u)), 1.45rem);
}
/* descrierea: cu cât fereastra e mai scundă, cu atât o lăsăm mai lată —
aceleași cuvinte pe mai puține rânduri, deci mai puțină înălțime */
.hero-full .hero-full__desc {
max-width: min(62ch, calc(46 * var(--u)));
}
}
/* Ferestre foarte scunde (sub 700px utili): strângem încă un pas, ca butoanele
și rândul de marcă să rămână deasupra foldului. */
@media (min-width: 901px) and (max-height: 700px) {
.hero-full { --u: min(1vw, 1.35vh); }
.hero-full .hero-full__slogan { margin-bottom: clamp(0.6rem, calc(1.5 * var(--u)), 1.8rem); }
}
/* ---------- v262: eroul — imagine mai potolită și vignetă ----------
Slideshow-ul e puțin mai întunecat, cu marginile stinse, ca textul alb să
stea bine peste orice fotografie — sunt foarte diferite între ele.
Trei straturi, de jos în sus:
1. imaginea, coborâtă în luminozitate
2. vigneta — o elipsă care lasă centrul curat și stinge colțurile
3. voalurile de dinainte (din stânga, de jos, de sus), mai apăsate
TREI NUMERE de reglat, toate aici. Nu umbla mai jos, doar la ele:
--erou-lumina cât de întunecată e fotografia (1 = neatinsă, 0.6 = mult)
--erou-contrast cât de dur e contrastul (1 = neatins, 1.2 = apăsat)
--erou-vigneta cât de dense sunt colțurile (0 = fără vignetă, 1 = negru)
--erou-voal cât de apăsate sunt voalurile laterale (0.8 … 1.2)
Regula stă aici, nu în pagină, ca RO și EN să rămână identice. */
.hero-full {
--erou-lumina: 0.72;
--erou-contrast: 1.3;
--erou-vigneta: 0.78;
--erou-voal: 1;
}
.hero-full .hero-full__slide {
filter: brightness(var(--erou-lumina)) contrast(var(--erou-contrast)) saturate(0.96);
}
/* Vigneta: elipsă centrată, transparentă în mijloc, densă spre margini.
Stă în interiorul fundalului, deci deasupra fotografiei și sub voaluri. */
.hero-full__bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 78% 72% at 50% 46%,
transparent 0%,
rgba(6, 7, 9, calc(0.23 * var(--erou-vigneta))) 58%,
rgba(6, 7, 9, calc(0.67 * var(--erou-vigneta))) 82%,
rgba(6, 7, 9, var(--erou-vigneta)) 100%);
}
.hero-full .hero-full__scrim {
background:
linear-gradient(90deg,
rgba(8, 9, 11, calc(0.88 * var(--erou-voal))),
rgba(8, 9, 11, calc(0.38 * var(--erou-voal))) 55%,
rgba(8, 9, 11, calc(0.22 * var(--erou-voal)))),
linear-gradient(to top, rgba(8, 9, 11, calc(0.95 * var(--erou-voal))), transparent 48%),
linear-gradient(to bottom, rgba(8, 9, 11, calc(0.68 * var(--erou-voal))), transparent 32%);
}
/* Pe mobil textul stă peste mijlocul imaginii, nu în dreapta — vigneta se
lărgește și fotografia rămâne ceva mai luminoasă, ca subiectul să se vadă. */
@media (max-width: 900px) {
.hero-full {
--erou-lumina: 0.76;
--erou-vigneta: 0.66;
}
.hero-full__bg::after {
background:
radial-gradient(ellipse 92% 84% at 50% 44%,
transparent 0%,
rgba(6, 7, 9, calc(0.21 * var(--erou-vigneta))) 62%,
rgba(6, 7, 9, calc(0.67 * var(--erou-vigneta))) 86%,
rgba(6, 7, 9, var(--erou-vigneta)) 100%);
}
}
/* ---------- v265: pe telefon, textul nu mai atinge marginea ----------
În v244 marginea paginii a fost coborâtă la 4px, ca să scăpăm de derularea
pe orizontală. A rezolvat problema, dar textul a rămas lipit de muchia
ecranului — începe și se termină exact în margine.
Acum marginea de conținut e 14px, cât să respire rândurile. Antetul își
păstrează marginea strâmtă (6px): acolo stau logo, căutare, limbă și
sandvișul, iar dacă le înghesuim din laterale, butonul de meniu iese din
ecran — s-a mai întâmplat, în v244.
Se reglează dintr-un singur loc: --pad-page de mai jos. */
@media (max-width: 900px) {
:root { --pad-page: 14px; }
/* antetul: margine proprie, mai mică, ca să încapă tot rândul */
.site-header__inner { padding-inline: 6px; }
/* banda de dovezi și cea de parteneri curg dintr-o margine în alta —
le lăsăm lipite de muchie, altfel bucla se vede că are capete */
.hero-dovezi,
.parteneri { margin-inline: calc(-1 * var(--pad-page)); }
}
/* ---------- v266: pe telefon — margini peste tot, cercuri mai mari ----------
1) MARGINILE. Pe prima pagină secțiunile poartă „page section". Regula
„.section { padding: … 0 }" din pagină folosește prescurtarea, deci
anulează „padding-inline" moștenit de la „.page" — textul ajungea lipit
de muchia ecranului. Pe celelalte pagini nu se întâmplă, fiindcă acolo
are clasa „page" și dă marginea peste tot.
Selectorul de mai jos are două clase, deci trece peste cel din pagină.
2) CERCURILE din „Cum lucrăm". Pe telefon erau plafonate la 280px, dar
ieșeau și mai mici. Le dăm lățime explicită, legată de ecran. */
/* Marginea se aplică pe toate ecranele, nu doar pe telefon: pe prima pagină
secțiunile erau mai late decât conținutul celorlalte pagini. */
.page.section { padding-inline: var(--pad-page); }
@media (max-width: 900px) {
.process-sticky .process-sticky__visual {
width: 100%;
max-width: min(86vw, 420px);
margin: 0 auto 2rem;
}
.process-sticky .process-visual {
width: 100%;
max-width: none;
}
}
/* ---------- v266b: umbră sub bara de meniu ----------
Antetul plutea peste conținut fără nicio despărțire: pe fotografii deschise
se lipea de imagine, iar la derulare textul părea că intră direct în el.
O umbră difuză, pe ambele ecrane, îl desprinde de pagină.
Pe prima pagină antetul e transparent peste erou până la prima derulare —
acolo umbra ar fi o dungă suspendată în aer, așa că apare abia odată cu
fundalul, când primește clasa „is-scrolled". Pe restul paginilor, unde
antetul are fundal de la bun început, umbra e mereu prezentă. */
.site-header {
box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.75);
}
body[data-page="acasa"] .site-header:not(.is-scrolled) {
box-shadow: none;
}
body[data-page="acasa"] .site-header.is-scrolled {
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.85);
}
/* ---------- v268: marginile pe tot site-ul + eroul pe tot ecranul ----------
După reparația de pe prima pagină am verificat toate cele 24 de pagini.
Restul erau curate — poartă clasa „page", deci marginea vine de
acolo. Au mai ieșit la iveală trei locuri, plus înălțimea eroului. */
/* 1) Banda de clienți: e absolută, dintr-o muchie în alta. Marginea negativă
era gândită pentru banda de dovezi, care stă în flux și trebuie să iasă
din marginea părintelui. Aici doar împingea caseta afară și mânca
marginea titlului „Clienți", care ajungea lipit de muchie. */
@media (max-width: 900px) {
.parteneri { margin-inline: 0; }
}
/* 2) Secțiunea „Un atelier integrat": plafonul de lățime stătea pe copil, iar
marginea pe părinte — deci conținutul ei începea cu o margine mai la
stânga decât restul paginii. Le punem pe aceeași cutie, ca la „.page". */
.process-sticky {
max-width: var(--page-w);
margin-inline: auto;
}
/* 3) Pagina 404: marginea vine deja de la , iar secțiunea
mai adăuga una — ieșea dublă. */
.page .eroare { padding-inline: 0; }
/* 4) Eroul ocupă exact ecranul, nu mai mult. Până acum avea doar înălțime
minimă, iar banda de clienți — care stă lipită de baza lui — rămânea
tăiată în două de marginea ferestrei. Acum baza eroului coincide cu baza
ecranului, iar banda se vede întreagă.
Pe ferestre foarte scunde renunțăm la înălțimea fixă: acolo preferăm ca
textul să curgă mai jos decât să fie tăiat. */
/* Valoare de rezervă, până când JS-ul măsoară antetul real. */
:root { --antet-h: 75px; }
@media (max-width: 900px) { :root { --antet-h: 60px; } }
/* Selectorul are „body" în față ca să treacă peste „min-height: 100svh" din
blocul