/* ==========================================================================
nisporeni.travel — Sistem de design
Identitate: albastru #004CA8 · auriu #D3C406 · Palanquin
Ton: turistic editorial, cu rigoare instituțională
========================================================================== */
/* Fonturile Palanquin, servite de pe site (assets/fonts, subset latin + latin-ext,
generat din TTF cu fontTools) — fără cereri la Google. ExtraLight are usWeightClass 275,
de aceea greutatea 200 e declarată explicit. */
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 200; font-display: swap; src: url('/assets/fonts/Palanquin-ExtraLight.woff') format('woff'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/Palanquin-Light.woff') format('woff'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Palanquin-Regular.woff') format('woff'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Palanquin-Medium.woff') format('woff'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Palanquin-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Palanquin'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Palanquin-Bold.woff') format('woff'); }
/* --------------------------------------------------------------------------
1. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* `height: auto` e obligatoriu, nu cosmetic: ![]()
primește din foto.js
atributele width/height reale (ex. 2000×1334), ca browserul să rezerve
spațiul și pagina să nu salte la încărcare. Fără `height: auto`, când
`max-width: 100%` micșorează lățimea, înălțimea rămâne la valoarea din
atribut și fotografia apare întinsă pe verticală. Containerele care chiar
vor înălțime fixă (card, galerie, hero) o redeclară ele, cu object-fit. */
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
/* --------------------------------------------------------------------------
2. Tokens
-------------------------------------------------------------------------- */
:root {
/* Albastru de brand */
--c-blue-900: #002450;
--c-blue-800: #003672;
--c-blue-700: #004093;
--c-blue-600: #004CA8; /* culoare oficială */
--c-blue-500: #1565c4;
--c-blue-100: #dce9f8;
--c-blue-50: #f0f6fd;
/* Auriu de brand.
ATENȚIE: #D3C406 pe alb are contrast ~1.9:1 — NU se folosește pentru text.
Doar accente grafice, linii, marcaje, sau text pe fundal închis.
Pentru text auriu pe alb se folosește --c-gold-text. */
--c-gold-500: #D3C406; /* culoare oficială */
--c-gold-600: #a89d05;
--c-gold-text: #6b6403; /* 5.6:1 pe alb — sigur pentru text */
--c-gold-200: #f2ecab;
--c-gold-50: #fdfbe8;
/* Neutre */
--c-ink: #14181f; /* 16.8:1 pe alb */
--c-ink-2: #454e5c; /* 8.5:1 */
--c-ink-3: #6b7482; /* 4.9:1 */
--c-line: #e2e6ec;
--c-line-2: #ccd4de;
--c-surface: #ffffff;
--c-surface-2:#f7f9fb;
--c-surface-3:#eef2f6;
/* Semantice */
--c-text: var(--c-ink);
--c-text-muted: var(--c-ink-2);
--c-text-subtle: var(--c-ink-3);
--c-accent: var(--c-blue-600);
--c-accent-hover:var(--c-blue-700);
--c-focus: var(--c-blue-500);
/* Categorii — fiecare rubrică are culoarea ei pe hartă și în etichete */
--cat-memorial: #004CA8; /* Monumente și memoriale */
--cat-mural: #c2410c;
--cat-muzeu: #7c3aed;
--cat-traseu: #15803d;
--cat-belvedere: #0f766e;
--cat-cazare: #0e7490;
--cat-mancare: #b91c1c;
--cat-cafenea: #78350f;
--cat-produs: #a16207;
--cat-activitate:#be185d;
--cat-arhitectura: #4338ca; /* Arhitectură și lăcașuri */
/* Tipografie */
--ff-base: 'Palanquin', 'Segoe UI', system-ui, -apple-system, sans-serif;
--fs-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.75rem);
--fs-h1: clamp(2.25rem, 1.45rem + 3.2vw, 4rem);
--fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
--fs-h3: clamp(1.3125rem, 1.1rem + 0.85vw, 1.75rem);
--fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
--fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
--fs-body: 1.0625rem; /* 17px */
--fs-sm: 0.9375rem;
--fs-xs: 0.8125rem;
--lh-tight: 1.08;
--lh-snug: 1.25;
--lh-base: 1.65;
--ls-display: -0.025em;
--ls-tight: -0.015em;
--ls-label: 0.14em;
/* Spațiere — bază 4px */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
--sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
--sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem;
--sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem;
/* Structură */
--container: 78rem;
--container-narrow: 46rem;
--gutter: clamp(1.25rem, 4vw, 3rem);
--header-h: 4.5rem;
--r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
--sh-1: 0 1px 2px rgba(0, 36, 80, .06), 0 1px 3px rgba(0, 36, 80, .08);
--sh-2: 0 4px 12px rgba(0, 36, 80, .08), 0 2px 4px rgba(0, 36, 80, .05);
--sh-3: 0 12px 32px rgba(0, 36, 80, .12), 0 4px 8px rgba(0, 36, 80, .06);
--sh-4: 0 24px 60px rgba(0, 36, 80, .18);
/* Mișcare */
--t-fast: 150ms;
--t-base: 250ms;
--t-slow: 400ms;
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* --------------------------------------------------------------------------
3. Bază
-------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
font-family: var(--ff-base);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-base);
color: var(--c-text);
background: var(--c-surface);
}
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-accent-hover); }
:focus-visible {
outline: 3px solid var(--c-focus);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: var(--c-blue-600); color: #fff; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%);
z-index: 1200; background: var(--c-blue-600); color: #fff;
padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) var(--r-md);
font-weight: 600; text-decoration: none; transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }
/* --------------------------------------------------------------------------
4. Structură
-------------------------------------------------------------------------- */
.container {
width: 100%; max-width: var(--container);
margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(var(--sp-9), 8vw, var(--sp-12)); }
.section--tight { padding-block: clamp(var(--sp-8), 6vw, var(--sp-10)); }
.section--tinted { background: var(--c-surface-2); }
.section--deep { background: var(--c-blue-900); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }
/* Antet de secțiune */
.section-head { max-width: 46rem; margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { margin-bottom: var(--sp-4); }
.section-head__lead {
font-size: var(--fs-lead); color: var(--c-text-muted);
line-height: 1.55; font-weight: 300;
}
.section--deep .section-head__lead { color: rgba(255,255,255,.75); }
/* Eticheta „eyebrow" — cu romb din motivul logo-ului */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--sp-3);
font-size: var(--fs-xs); font-weight: 600;
letter-spacing: var(--ls-label); text-transform: uppercase;
color: var(--c-blue-600); margin-bottom: var(--sp-4);
}
.eyebrow::before {
content: ''; width: 8px; height: 8px; flex: none;
background: var(--c-gold-500); transform: rotate(45deg);
}
.section--deep .eyebrow { color: var(--c-gold-500); }
.section--deep .eyebrow::before { background: var(--c-gold-500); }
.section-head--center .eyebrow { justify-content: center; }
/* Grile */
.grid { display: grid; gap: clamp(var(--sp-4), 2.5vw, var(--sp-6)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
/* Itinerariile din „Planifică vizita": texte lungi, deci câte unul pe rând */
.itinerarii { grid-template-columns: 1fr; }
.itinerar .card__body { display: grid; gap: var(--sp-3) var(--sp-8); }
.itinerar__text { max-width: 72ch; }
.itinerar__text p + p { margin-top: var(--sp-3); }
@media (min-width: 56rem) { .itinerar .card__body { grid-template-columns: minmax(13rem, 1fr) 2.4fr; align-items: start; } }
/* Plimbarea prin centru: traseul din Google Earth și obiectivele de pe drum (plimbare.js) */
.plimbare { grid-column: 1 / -1; margin-top: var(--sp-4); }
.plimbare__lista { list-style: none; margin: var(--sp-5) 0 0; padding: 0; columns: 3 15rem; column-gap: var(--sp-6); font-size: var(--fs-sm); }
.plimbare__lista li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; break-inside: avoid; }
.plimbare__lista a { color: var(--c-ink); text-decoration: none; }
.plimbare__lista a:hover { color: var(--c-blue-600); text-decoration: underline; }
.plimbare__nr { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid; background: #fff; font-size: 12px; font-weight: 700; color: var(--c-ink); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
/* --------------------------------------------------------------------------
5. Butoane
-------------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
min-height: 48px; padding: var(--sp-3) var(--sp-6);
font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
border: 1.5px solid transparent; border-radius: var(--r-md);
text-decoration: none; cursor: pointer;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease), transform 160ms var(--ease-out),
box-shadow var(--t-fast) var(--ease);
}
/* Butonul se micșorează la apăsare, nu coboară cu un pixel. Un pixel se citea
ca o tresărire; scalarea comprimă și textul dinăuntru, iar asta e chiar ce
face ca apăsarea să pară fizică. Rămâne subtilă — sub 0.95 începe să sară. */
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--c-blue-600); color: #fff; box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--c-blue-700); color: #fff; box-shadow: var(--sh-2); }
.btn--outline { background: transparent; color: var(--c-blue-600); border-color: var(--c-line-2); }
.btn--outline:hover { border-color: var(--c-blue-600); background: var(--c-blue-50); color: var(--c-blue-700); }
.btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(8px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.95); color: var(--c-blue-800); border-color: #fff; }
.btn--gold { background: var(--c-gold-500); color: var(--c-blue-900); }
.btn--gold:hover { background: #e4d51a; color: var(--c-blue-900); }
.btn__icon { width: 18px; height: 18px; flex: none; }
/* Link cu săgeată */
.link-arrow {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
color: var(--c-blue-600);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
/* --------------------------------------------------------------------------
6. Antet / navigație
-------------------------------------------------------------------------- */
/* z-index 1100: Leaflet își urcă propriile straturi până la 1000
(.leaflet-top/.leaflet-bottom), așa că un antet sub acea valoare ar lăsa
meniurile derulante să se deschidă *în spatele* hărții pe harta.html —
se deschid corect, dar nu se văd. Orice element care trebuie să stea peste
antet (link-ul de salt, moara călătoare) urcă odată cu el. */
.header {
position: fixed; inset: 0 0 auto 0; z-index: 1100;
height: var(--header-h);
display: flex; align-items: center;
transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
border-bottom: 1px solid transparent;
}
.header__inner {
width: 100%; max-width: var(--container); margin-inline: auto;
padding-inline: var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
/* Transparent peste hero */
.header--over { background: linear-gradient(to bottom, rgba(0,20,45,.55), transparent); }
.header--over .nav__link { color: rgba(255,255,255,.92); }
.header--over .nav__link:hover { color: #fff; }
.header--over .logo path { fill: #fff; stroke: #fff; }
.header--over .burger span { background: #fff; }
/* Lipit la scroll — sau permanent opac, pe paginile fără antet vizual (--solid) */
.header--stuck, .header--solid {
background: rgba(255,255,255,.94);
backdrop-filter: saturate(180%) blur(14px);
border-bottom-color: var(--c-line);
box-shadow: 0 1px 12px rgba(0,36,80,.06);
}
.header--stuck .nav__link, .header--solid .nav__link { color: var(--c-ink-2); }
.header--stuck .nav__link:hover, .header--solid .nav__link:hover { color: var(--c-blue-600); }
.header--stuck .logo path, .header--solid .logo path { fill: var(--c-blue-600); stroke: var(--c-blue-600); }
.header--stuck .burger span, .header--solid .burger span { background: var(--c-blue-600); }
.logo { display: flex; align-items: center; gap: var(--sp-3); flex: none; text-decoration: none; }
.logo svg { height: 40px; width: auto; transition: opacity var(--t-base) var(--ease); }
.logo path { transition: fill var(--t-base) var(--ease), stroke var(--t-base) var(--ease); }
.logo:hover { opacity: .85; }
/* Fereastra și butucul central din stemă sunt goale în original (fill="none",
moștenit de la rădăcina SVG-ului sursă) — un contur gros, nu o formă plină.
Regulile de mai sus țintesc direct, deci ar suprascrie acel gol;
această regulă, mai specifică, îl restabilește peste tot unde apare stema. */
.header--over .logo .mk-hollow,
.header--stuck .logo .mk-hollow,
.header--solid .logo .mk-hollow { fill: none; }
/* ---- Sigla cu moara: paletele se rotesc în jurul axului ----
La trecerea mouse-ului, paletele fac o tură întreagă și se opresc exact
în poziția din stemă (main.js pune .is-rotire și o scoate la final, ca tura
să se termine chiar dacă mouse-ul pleacă). La prima intrare pe site
(intro.js pune .intro-sigla), sigla se desenează, se umple și își pornește
paletele — aceeași mișcare ca pe pagina cu parolă:
0.2–1.7s conturul se trasează linie cu linie
1.3–2.1s formele se umplu, iar conturul de desen se subțiază până dispare
1.7–3.6s paletele fac o rotație și jumătate și se opresc
2.2s o licărire aurie scurtă, apoi apare numele orașului
La final main.js scoate .intro-sigla: sigla rămâne identică cu cea de la
o pagină reîncărcată. */
.logo__mark { overflow: visible; }
.logo__mark .mill-blades { transform-origin: 459.14px 347.14px; }
@media (prefers-reduced-motion: no-preference) {
.logo__mark .mill-blades.is-rotire { animation: sigla-rotire 1.1s cubic-bezier(.45,0,.2,1); }
.intro-sigla .logo__mark path:not(.mk-hollow) {
fill-opacity: 0; stroke-width: 1.3px; vector-effect: non-scaling-stroke;
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: sigla-deseneaza 1.3s cubic-bezier(.6,.1,.3,1) forwards, sigla-umple .8s ease forwards;
}
.intro-sigla .logo__mark .mk-hollow {
stroke-dasharray: 1; stroke-dashoffset: 1;
animation: sigla-deseneaza 1.2s cubic-bezier(.6,.1,.3,1) .5s forwards;
}
.intro-sigla .logo__mark .mill-base path:nth-child(1) { animation-delay: .2s, 1.3s; }
.intro-sigla .logo__mark .mill-base path:nth-child(2) { animation-delay: .3s, 1.4s; }
.intro-sigla .logo__mark .mill-base path:nth-child(6) { animation-delay: .45s, 1.5s; }
.intro-sigla .logo__mark .mill-base path:nth-child(7) { animation-delay: .5s, 1.5s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(1) { animation-delay: .6s, 1.6s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(2) { animation-delay: .66s, 1.62s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(3) { animation-delay: .72s, 1.64s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(4) { animation-delay: .78s, 1.66s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(5) { animation-delay: .84s, 1.68s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(6) { animation-delay: .9s, 1.7s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(7) { animation-delay: .96s, 1.72s; }
.intro-sigla .logo__mark .mill-blades path:nth-child(8) { animation-delay: 1.02s, 1.74s; }
.intro-sigla .logo__mark .mill-blades { animation: sigla-porneste 1.9s cubic-bezier(.16,1,.3,1) 1.7s both; }
.intro-sigla .logo__mark { animation: sigla-licare 1.4s ease 2.2s; }
.intro-sigla .logo__word { opacity: 0; translate: -8px 0; animation: sigla-cuvant .9s cubic-bezier(.2,.7,.2,1) 2.3s forwards; }
}
@keyframes sigla-deseneaza { to { stroke-dashoffset: 0; } }
@keyframes sigla-umple { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes sigla-porneste { from { rotate: -540deg; } to { rotate: 0deg; } }
@keyframes sigla-rotire { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes sigla-licare {
40% { filter: drop-shadow(0 0 12px rgba(211,196,6,.7)); }
100% { filter: drop-shadow(0 0 0 rgba(211,196,6,0)); }
}
@keyframes sigla-cuvant { to { opacity: 1; translate: 0 0; } }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav__link {
position: relative;
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-sm); font-weight: 500;
text-decoration: none; border-radius: var(--r-sm);
white-space: nowrap;
transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px;
height: 2px; background: var(--c-gold-500);
transform: scaleX(0); transform-origin: left;
transition: transform var(--t-base) var(--ease-out);
}
/* Doar pagina curentă rămâne aici. Sublinierea la hover s-a mutat în blocul
„Mișcarea la hover" de la finalul fișierului — dacă ar sta în aceeași regulă,
ar dispărea și marcajul paginii curente pe ecranele tactile. */
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: var(--sp-3); }
/* Grup dropdown din meniul principal ("Descoperă", "Practic") */
.nav__group { position: relative; }
.nav__link--dropdown { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font: inherit; }
.nav__chevron { width: 13px; height: 13px; flex: none; transform: rotate(90deg); transition: transform var(--t-base) var(--ease); }
.nav__link--dropdown[aria-expanded="true"] .nav__chevron { transform: rotate(-90deg); }
.nav__dropdown {
position: absolute; top: calc(100% + 10px); left: 50%;
min-width: 13.5rem; background: var(--c-surface);
border: 1px solid var(--c-line); border-radius: var(--r-md);
box-shadow: var(--sh-3); padding: var(--sp-2);
display: grid; gap: 1px;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translate(-50%, -6px);
/* Ambele proprietăți pe aceeași curbă, și pe cea de ieșire rapidă: e un
element care intră, deci contează primele milisecunde. Înainte, opacitatea
mergea pe o curbă cu pornire lentă, iar poziția pe alta — se desincronizau,
meniul plutea puțin înainte să se vadă bine. */
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
z-index: 60;
}
.nav__dropdown.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav__dropdown a {
display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-2);
text-decoration: none; white-space: nowrap;
}
.nav__dropdown a:hover, .nav__dropdown a:focus-visible { background: var(--c-surface-2); color: var(--c-blue-600); }
.nav__dropdown a[aria-current="page"] { color: var(--c-blue-600); font-weight: 600; background: var(--c-blue-50); }
/* Comutator de limbă: un singur buton cu limba curentă; lista limbilor se
deschide în jos, ca meniurile „Descoperă" și „Practic" (main.js, initLimba).
Încape oricâte limbi — fiecare e un rând în listă. */
.lang { position: relative; margin-left: var(--sp-3); flex: none; }
.lang__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: var(--sp-2); background: none; border: none; cursor: pointer;
font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
border-radius: var(--r-sm);
}
.header--over .lang__btn { color: #fff; }
.header--stuck .lang__btn, .header--solid .lang__btn { color: var(--c-ink-2); }
.lang__chevron { width: 11px; height: 11px; flex: none; transform: rotate(90deg); transition: transform var(--t-base) var(--ease); }
.lang__btn[aria-expanded="true"] .lang__chevron { transform: rotate(-90deg); }
.lang__flag {
width: 18px; height: 12px; flex: none; border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.lang__lista {
position: absolute; top: calc(100% + 10px); right: 0;
min-width: 10.5rem; background: var(--c-surface);
border: 1px solid var(--c-line); border-radius: var(--r-md);
box-shadow: var(--sh-3); padding: var(--sp-2);
display: grid; gap: 1px;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-6px);
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
z-index: 60;
}
.lang__lista.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.lang__opt {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-2);
text-decoration: none; white-space: nowrap;
}
.lang__opt:hover, .lang__opt:focus-visible { background: var(--c-surface-2); color: var(--c-blue-600); }
.lang__opt[aria-current="true"] { color: var(--c-blue-600); font-weight: 600; background: var(--c-blue-50); }
/* Meniu mobil */
.burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; padding: 0;
background: none; border: none; cursor: pointer;
}
.burger span {
display: block; width: 24px; height: 2px; border-radius: 2px;
transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease),
background var(--t-base) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 60rem) {
.burger { display: flex; }
.nav {
position: fixed; inset: var(--header-h) 0 auto 0;
flex-direction: column; align-items: stretch; gap: 0;
background: #fff; padding: var(--sp-4) var(--gutter) var(--sp-6);
border-bottom: 1px solid var(--c-line);
box-shadow: var(--sh-3);
transform: translateY(-8px); opacity: 0; pointer-events: none;
/* Panou care intră — curbă cu pornire rapidă, ca la meniul derulant */
transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.nav[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav__link {
padding: var(--sp-4) var(--sp-2); font-size: 1.0625rem;
border-bottom: 1px solid var(--c-line); border-radius: 0;
color: var(--c-ink) !important;
}
.nav__link::after { display: none; }
.nav__link[aria-current="page"] { color: var(--c-blue-600) !important; font-weight: 600; }
.nav__cta { margin: var(--sp-5) 0 0; }
/* Pe mobil grupul e mereu "deschis" — nu mai are sens un al doilea nivel
de pliere peste meniul full-screen deja glisant. */
.nav__link--dropdown { justify-content: space-between; width: 100%; }
.nav__chevron { display: none; }
.nav__dropdown {
position: static; opacity: 1; visibility: visible; transform: none;
border: none; box-shadow: none; background: var(--c-surface-2);
border-radius: var(--r-md); margin: 0 0 var(--sp-2); padding: var(--sp-2);
/* `inherit`, nu `auto`: pe mobil panoul e mereu desfășurat vizual, deci
trebuie să urmeze starea MENIULUI, nu propria stare `.is-open`.
Cu `auto` rămânea atingibil și cu meniul închis — iar cum panoul
acoperă partea de sus a paginii, atingerea pe un card ajungea într-un
link din meniu. Cu `none` (regula de desktop) n-ar mai fi răspuns nici
măcar cu meniul deschis. */
pointer-events: inherit;
}
.nav__dropdown a { color: var(--c-ink) !important; border-bottom: none; padding: var(--sp-3) var(--sp-3); }
/* În meniul mobil (panou alb) butonul de limbă stă pe rând propriu, mare,
la degete, iar lista se deschide dedesubt, în pagină — mereu pe fundal
deschis, deci nu moștenește culoarea albă de la .header--over. */
.lang { margin: var(--sp-5) 0 0; }
.lang__btn {
width: 100%; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm);
border: 1.5px solid var(--c-line); border-radius: var(--r-md);
color: var(--c-ink) !important;
}
.lang__chevron { margin-left: auto; }
.lang__lista {
position: static; display: none; margin-top: var(--sp-2);
box-shadow: none; background: var(--c-surface-2); border: none;
opacity: 1; visibility: visible; transform: none;
pointer-events: inherit; /* urmează starea meniului, ca .nav__dropdown */
}
.lang__lista.is-open { display: grid; }
}
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
padding-block: var(--sp-12) clamp(var(--sp-8), 8vh, var(--sp-11));
color: #fff; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(to top, rgba(0,18,40,.92) 0%, rgba(0,18,40,.55) 35%, rgba(0,18,40,.15) 70%, rgba(0,18,40,.35) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
/* ---- Fotografia din hero: intrare, zbor de dronă, parallax ----
Trei mișcări simultane, ținute pe proprietăți de transformare diferite:
scale — apropierea lentă (și saltul de la intrare);
transform — deriva laterală care merge la pachet cu apropierea;
translate — parallax-ul legat de scroll.
Fiind proprietăți separate, nu două funcții în același `transform`, se pot
anima independent fără să se suprascrie una pe alta.
--hero-foto-zoom e și scara de repaus, și rezerva din care se plătesc
translațiile: la scale s, imaginea depășește cadrul cu (s−1)/2s în fiecare
parte. La 1.10 asta înseamnă ~4.5%, peste cei 3.5% cu care coboară
fotografia la derulare — deci marginea de sus nu se descoperă niciodată.
Vitezele sunt alese ca mișcarea să se vadă, nu doar să existe: apropierea
merge liniar, ~0.55% pe secundă, adică în patru-cinci secunde de privit
cadrul s-a schimbat vizibil. Prima variantă a acestui bloc făcea 7% în 44s
cu ease-in-out — sub pragul de percepție, exact defectul pe care îl repară
valorile de aici. Nu urca mai mult de ~1.25: sursa are 2000px lățime și
peste atât începe să se vadă înmuiată pe ecrane retina. */
.hero { --hero-foto-zoom: 1.10; }
.hero__media img {
width: 100%; height: 100%; object-fit: cover;
scale: var(--hero-foto-zoom);
will-change: scale, transform, translate;
}
@media (prefers-reduced-motion: no-preference) {
/* Intrarea așază fotografia dintr-un cadru mai strâns; capătul ei e chiar
scara de repaus, ca predarea către zbor să nu se vadă ca un salt. */
.hero__media img {
animation:
hero-foto-intrare 2s var(--ease-out) both,
hero-foto-zbor 22s linear 2s infinite alternate;
}
/* Parallax legat direct de poziția de scroll, fără listener în JS — același
mecanism ca moara călătoare de mai jos. Fotografia rămâne puțin în urma
paginii cât ține hero-ul, iar textul pare că alunecă peste oraș. */
@supports (animation-timeline: scroll()) {
.hero__media img {
animation-name: hero-foto-intrare, hero-foto-zbor, hero-foto-parallax;
animation-duration: 2s, 22s, auto;
animation-timing-function: var(--ease-out), linear, linear;
animation-delay: 0s, 2s, 0s;
animation-iteration-count: 1, infinite, 1;
animation-direction: normal, alternate, normal;
animation-fill-mode: both, both, both;
animation-timeline: auto, auto, scroll(root block);
animation-range: normal, normal, 0 100svh;
}
}
}
@keyframes hero-foto-intrare {
from { opacity: 0; scale: calc(var(--hero-foto-zoom) + .14); transform: translateX(0); }
to { opacity: 1; scale: var(--hero-foto-zoom); transform: translateX(0); }
}
/* Apropiere + derivă laterală în același timp: deplasarea pe orizontală se
citește mult mai ușor decât scalarea singură, așa că mișcarea se vede fără
să fie nevoie de un zoom mai agresiv. */
@keyframes hero-foto-zbor {
from { scale: var(--hero-foto-zoom); transform: translateX(0); }
to { scale: calc(var(--hero-foto-zoom) + .12); transform: translateX(-2.2%); }
}
@keyframes hero-foto-parallax {
from { translate: 0 0; }
to { translate: 0 3.5%; }
}
.hero__heading { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 30rem) { .hero__heading { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } }
.hero__title {
font-size: var(--fs-display); font-weight: 200;
letter-spacing: var(--ls-display); line-height: 1;
max-width: 18ch;
text-shadow: 0 2px 30px rgba(0,18,40,.4);
}
.hero__title strong { font-weight: 600; display: block; }
.hero__lead {
font-size: var(--fs-lead); font-weight: 300; line-height: 1.5;
max-width: 44ch; color: rgba(255,255,255,.9);
margin-bottom: var(--sp-7);
text-shadow: 0 1px 16px rgba(0,18,40,.5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* --------------------------------------------------------------------------
8. Carduri
-------------------------------------------------------------------------- */
.card {
position: relative;
display: flex; flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.card:hover { box-shadow: var(--sh-3); border-color: transparent; }
.card:focus-within { box-shadow: var(--sh-3); border-color: var(--c-blue-500); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-3); }
/* Fotografia nu se mai apropie la hover. Cardul se ridică deja, deci apropierea
era un al doilea semnal pentru același eveniment — și dura 400ms, adică
aproape jumătate de secundă pentru ceva văzut de zeci de ori într-o vizită. */
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* nu are dimensiune proprie: îl facem să umple containerul, ca ![]()
*/
.card__media picture,
.hero__media picture,
.gallery__item picture,
.pagehead__media picture,
.detaliu-media picture { display: block; width: 100%; height: 100%; }
/* Fotografia mare din capul articolului: umple cadrul 16/9 decupând, nu
deformând — aceeași regulă pe care o au deja cardurile și galeria. */
.detaliu-media img { width: 100%; height: 100%; object-fit: cover; }
/* Butonul care o face să se mărească la clic umple tot cadrul */
.detaliu-media__zoom {
display: block; width: 100%; height: 100%;
padding: 0; border: none; background: none; cursor: zoom-in;
}
/* ---- Antetul cu fotografii al paginii de obiectiv (detaliu.js) ----
Fotografia umple capul paginii; titlul stă jos, peste un voal care se
închide spre text și se deschide spre fotografie. Sub titlu: miniaturile
celorlalte fotografii, butonul de mărire și autorul fotografiei. */
.pagehead--foto {
min-height: clamp(34rem, 88svh, 56rem);
display: flex; align-items: flex-end;
padding-block: calc(var(--header-h) + var(--sp-8)) clamp(var(--sp-6), 4.5vw, var(--sp-9));
background: #0a1424;
}
.pagehead--foto::after { display: none; }
.pagehead--foto .container { width: 100%; }
.pagehead--foto .pagehead__title { text-shadow: 0 2px 30px rgba(0, 10, 25, .45); max-width: 20ch; }
.pagehead--foto .pagehead__lead { text-shadow: 0 1px 16px rgba(0, 10, 25, .5); }
.phf { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.phf__cadru { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.phf__cadru.is-activ { opacity: 1; }
.phf__cadru picture { position: absolute; inset: 0; display: block; }
.phf__cadru img { width: 100%; height: 100%; object-fit: cover; scale: 1.05; transition: scale 1.8s var(--ease-out); }
.phf__cadru.is-activ img { scale: 1; }
/* voalul: sus, pentru bara de navigare; jos și în stânga, pentru titlu */
.phf__cadru::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(to top, rgba(4, 14, 30, .94) 0%, rgba(4, 14, 30, .62) 30%, rgba(4, 14, 30, .1) 62%, rgba(4, 14, 30, .5) 100%),
linear-gradient(90deg, rgba(4, 14, 30, .45) 0%, rgba(4, 14, 30, 0) 55%);
}
.phf__fundal {
position: absolute; inset: -60px;
background: center / cover no-repeat;
filter: blur(36px) brightness(.5) saturate(1.2);
}
/* Fotografie verticală pe ecran lat: întreagă, încadrată în dreapta, peste
copia ei estompată; textul se strânge în jumătatea din stânga. */
@media (min-width: 60rem) and (orientation: landscape) {
.phf__cadru--portret picture {
inset: auto;
top: calc(var(--header-h) + var(--sp-6)); bottom: var(--sp-8);
right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
aspect-ratio: var(--r); max-width: 42%;
z-index: 1; border-radius: var(--r-lg); overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}
.pagehead--foto-portret .container > * { max-width: 52%; }
}
.phf__bara {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-7);
}
.phf__miniaturi { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.phf__mini {
flex: none; width: 64px; height: 44px; padding: 0; border: 0; border-radius: 8px;
overflow: hidden; background: #000; cursor: pointer; opacity: .55;
outline: 2px solid transparent; outline-offset: 2px;
transition: opacity .2s ease, outline-color .2s ease, translate .2s var(--ease-out);
}
.phf__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phf__mini:hover { opacity: .9; translate: 0 -2px; }
.phf__mini.is-activ { opacity: 1; outline-color: var(--c-gold-500); }
.phf__mini:focus-visible { outline-color: #fff; }
.phf__credit { margin: 0 0 0 auto; font-size: var(--fs-xs); color: rgba(255, 255, 255, .62); }
.phf__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.phf__credit a:hover { color: #fff; }
@media (max-width: 40rem) {
.pagehead--foto { min-height: 82svh; }
.phf__mini { width: 52px; height: 38px; }
.phf__credit { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.phf__cadru, .phf__cadru img { transition: none; }
.phf__cadru img { scale: 1; }
}
/* Autorul fotografiei mari, când imaginea e preluată sub licență liberă (CC BY-SA):
stă lipit de fotografie, discret, aliniat la dreapta. */
.detaliu-media:has(+ .detaliu-credit) { margin-bottom: var(--sp-2) !important; }
.detaliu-credit {
margin: 0 0 var(--sp-8); text-align: right;
font-size: var(--fs-xs); color: var(--c-text-subtle);
}
.detaliu-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.detaliu-credit a:hover { color: var(--c-blue-600); }
/* Fotografie pe verticală în cadrul orizontal al fișei: se vede întreagă,
centrată, peste o copie a ei mărită și estompată care umple restul cadrului. */
.detaliu-media--portret { position: relative; background: #111; }
.detaliu-media__fundal {
position: absolute; inset: -40px; /* depășește cadrul, ca marginile estompate să nu se vadă */
background: center / cover no-repeat;
filter: blur(28px) brightness(.55) saturate(1.15);
transform: scale(1.05);
}
.detaliu-media--portret .detaliu-media__zoom { position: relative; }
.detaliu-media--portret img { object-fit: contain; }
/* În cardurile și galeriile orizontale, fotografiile pe verticală se decupează
mai sus de mijloc: subiectul (capul unui bust, vârful unei troițe) e de obicei sus. */
img.foto--portret { object-position: 50% 22%; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); gap: var(--sp-3); }
.card__title { font-size: var(--fs-h4); font-weight: 600; }
/* Întreg cardul devine clickabil, dar linkul rămâne accesibil la tastatură */
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--c-blue-600); }
.card__text { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.55; }
.card__meta {
margin-top: auto; padding-top: var(--sp-3);
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
font-size: var(--fs-xs); color: var(--c-text-subtle);
}
.card__meta-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.card__meta-item svg { width: 14px; height: 14px; flex: none; opacity: .75; }
/* Card mare, cu imagine pe tot fundalul */
.card--feature { border: none; min-height: 22rem; justify-content: flex-end; color: #fff; }
.card--feature .card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.card--feature .card__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,18,40,.9) 0%, rgba(0,18,40,.45) 45%, rgba(0,18,40,.05) 100%);
}
/* Corpul nu trebuie să crească: altfel umple tot cardul și textul rămâne sus,
anulând `justify-content: flex-end` al cardului. */
.card--feature .card__body { position: relative; z-index: 1; padding: var(--sp-6); flex: 0 0 auto; }
.card--feature .card__meta { margin-top: 0; }
.card--feature .card__title { font-size: var(--fs-h3); }
.card--feature .card__title a:hover { color: var(--c-gold-500); }
.card--feature .card__text { color: rgba(255,255,255,.85); }
.card--feature .card__meta { color: rgba(255,255,255,.7); }
.card--feature:hover { box-shadow: var(--sh-4); }
/* Card larg, pe 2 coloane într-o grilă --3 */
.card--wide { grid-column: span 2; }
@media (max-width: 48rem) { .card--wide { grid-column: span 1; } }
/* --------------------------------------------------------------------------
9. Etichete de categorie
-------------------------------------------------------------------------- */
.tag {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: 4px var(--sp-3);
font-size: var(--fs-xs); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
border-radius: 100px; white-space: nowrap;
background: var(--c-blue-50); color: var(--c-blue-700);
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag--onmedia {
position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
box-shadow: var(--sh-1);
}
/* O culoare per rubrică */
.tag[data-cat="memorial"] { color: var(--cat-memorial); background: #e9f0fa; }
.tag[data-cat="arhitectura"] { color: var(--cat-arhitectura); background: #ecebfb; }
.tag[data-cat="mural"] { color: var(--cat-mural); background: #fdeee6; }
.tag[data-cat="muzeu"] { color: var(--cat-muzeu); background: #f2ecfd; }
.tag[data-cat="traseu"] { color: var(--cat-traseu); background: #e7f5ec; }
.tag[data-cat="belvedere"] { color: var(--cat-belvedere); background: #e2f2f0; }
.tag[data-cat="cazare"] { color: var(--cat-cazare); background: #e3f4f7; }
.tag[data-cat="mancare"] { color: var(--cat-mancare); background: #fdeaea; }
.tag[data-cat="cafenea"] { color: var(--cat-cafenea); background: #f6ede4; }
/* Grupurile de pe paginile care afișează mai multe categorii deodată
(vezi randeaza() din listare.js) */
.listare-grup + .listare-grup { margin-top: clamp(var(--sp-7), 5vw, var(--sp-9)); }
.listare-grup__titlu { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--sp-5); }
.tag[data-cat="produs"] { color: var(--cat-produs); background: #fbf1de; }
.tag[data-cat="activitate"]{ color: var(--cat-activitate);background: #fdeaf2; }
/* --------------------------------------------------------------------------
10. Rubrici (navigarea pe categorii de pe pagina principală)
-------------------------------------------------------------------------- */
.rubrics { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.rubric {
position: relative; display: flex; flex-direction: column;
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: var(--r-lg); text-decoration: none; color: inherit;
overflow: hidden;
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
/* Fâșie colorată în capătul de sus, care se dezvăluie la hover */
.rubric::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
background: var(--rubric-color, var(--c-blue-600));
transform: scaleX(0); transform-origin: left;
/* 160ms, nu 400: e răspuns la hover, adică ceva văzut de zeci de ori într-o
vizită — la o asemenea frecvență, o animație lungă se simte ca o frână. */
transition: transform 160ms var(--ease-out);
}
.rubric:hover { box-shadow: var(--sh-2); border-color: transparent; }
/* Fotografie sus, pe toată lățimea — o categorie fără poză de arătat nu
invită la click la fel de mult ca una cu chip. Cât timp nu există încă o
fotografie reală pentru o categorie (muzee, cazare etc.), .ph păstrează
același placeholder gradient folosit și în cardurile „De neocolit". */
.rubric__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-3); }
.rubric__media picture, .rubric__media .ph { position: absolute; inset: 0; }
.rubric__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Insignă în colțul fotografiei — nu la limita de jos: .rubric__media are
overflow:hidden (necesar pentru cadrul care se mărește ușor la hover), așa
că orice ar ieși din caseta ei (o insignă „călare" pe margine, pe jumătate
peste text) ar fi retezată exact la acea margine. */
.rubric__icon {
position: absolute; left: var(--sp-4); bottom: var(--sp-3); z-index: 1;
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: var(--r-md); flex: none;
background: var(--rubric-color, var(--c-blue-600));
color: #fff; box-shadow: var(--sh-2);
}
.rubric__icon svg { width: 22px; height: 22px; }
.rubric__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; padding: var(--sp-5); }
.rubric__title { font-size: var(--fs-h4); font-weight: 600; }
.rubric__count { font-size: var(--fs-xs); color: var(--c-text-subtle); font-weight: 500; }
.rubric__text { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; flex: 1; }
/* --------------------------------------------------------------------------
11. Hartă
-------------------------------------------------------------------------- */
.map-layout {
display: grid; gap: 0;
grid-template-columns: 23rem 1fr;
height: calc(100svh - var(--header-h));
min-height: 34rem;
}
@media (max-width: 64rem) {
.map-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
}
.map-panel {
display: flex; flex-direction: column;
background: var(--c-surface); border-right: 1px solid var(--c-line);
overflow: hidden;
}
@media (max-width: 64rem) { .map-panel { border-right: none; border-bottom: 1px solid var(--c-line); } }
.map-panel__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.map-panel__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.map-panel__sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.map-search { position: relative; margin-top: var(--sp-4); }
.map-search input {
width: 100%; min-height: 46px;
padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.75rem;
font-size: var(--fs-sm);
border: 1.5px solid var(--c-line-2); border-radius: var(--r-md);
background: var(--c-surface-2);
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.map-search input:focus { border-color: var(--c-blue-500); background: #fff; outline: none; }
.map-search input::placeholder { color: var(--c-text-subtle); }
.map-search svg {
position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--c-text-subtle); pointer-events: none;
}
/* Filtre pe categorii */
.map-filters {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--c-line);
}
.chip {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 36px; padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-xs); font-weight: 600;
background: var(--c-surface-2); color: var(--c-ink-2);
border: 1.5px solid var(--c-line); border-radius: 100px;
cursor: pointer; white-space: nowrap;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--c-blue-600)); flex: none; }
/* „Toate" resetează selecția — neutru, ca să nu pară încă o categorie */
.chip--toate { --chip-color: var(--c-ink-2); }
.chip:hover { border-color: var(--chip-color, var(--c-blue-600)); background: #fff; }
.chip[aria-pressed="true"] {
background: color-mix(in srgb, var(--chip-color, var(--c-blue-600)) 12%, white);
border-color: var(--chip-color, var(--c-blue-600));
color: color-mix(in srgb, var(--chip-color, var(--c-blue-600)) 78%, black);
}
/* Lista de locații */
.map-list { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-5); }
@media (max-width: 64rem) { .map-list { max-height: 20rem; } }
.map-item {
display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
width: 100%; text-align: left;
padding: var(--sp-3); border: none; background: none;
border-radius: var(--r-md); cursor: pointer;
transition: background var(--t-fast) var(--ease);
}
.map-item:hover { background: var(--c-surface-2); }
.map-item[aria-current="true"] { background: var(--c-blue-50); }
.map-item__pin {
width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
background: var(--item-color, var(--c-blue-600)); color: #fff; flex: none;
font-size: 11px; font-weight: 700;
}
.map-item__pin svg { width: 15px; height: 15px; }
.map-item__name { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.map-item__cat { display: block; font-size: var(--fs-xs); color: var(--c-text-subtle); margin-top: 2px; }
.map-empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--c-text-subtle); font-size: var(--fs-sm); }
.map-canvas { position: relative; background: var(--c-surface-3); min-height: 26rem; }
#map { width: 100%; height: 100%; min-height: 26rem; }
@media (max-width: 64rem) { #map { height: 60svh; } }
/* Marcaje personalizate */
.pin {
display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
border: 2.5px solid #fff;
box-shadow: 0 3px 8px rgba(0,36,80,.35);
transition: transform var(--t-base) var(--ease-out);
}
.pin svg { width: 15px; height: 15px; color: #fff; transform: rotate(45deg); }
/* Pinul selectat se mărește pe orice dispozitiv — pe telefon e singurul mod de
a vedea pe care punct ai apăsat. Varianta la hover s-a mutat la final. */
.pin-wrap.is-active .pin { transform: rotate(-45deg) scale(1.18); }
.pin-wrap.is-active .pin { border-color: var(--c-gold-500); }
/* Popup Leaflet — stilizat în identitatea site-ului */
.leaflet-popup-content-wrapper { border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 16rem !important; font-family: var(--ff-base); }
/* Comutatorul Satelit / Hartă de pe hărți (controlul de straturi Leaflet, ca
două butoane lipite; clasa o pune fundal.js) */
.comutator-fundal.leaflet-control-layers {
border: 0; border-radius: 999px; padding: 3px; background: rgba(255,255,255,.94);
box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.comutator-fundal .leaflet-control-layers-base { display: flex; gap: 2px; }
.comutator-fundal label { margin: 0; }
.comutator-fundal .leaflet-control-layers-selector { position: absolute; opacity: 0; pointer-events: none; }
.comutator-fundal label > span > span {
display: block; padding: 4px 12px; border-radius: 999px; cursor: pointer;
font: 600 13px/1.4 var(--ff-base); color: var(--c-ink);
}
.comutator-fundal .leaflet-control-layers-selector:checked + span { background: var(--c-blue-600); color: #fff; }
.comutator-fundal .leaflet-control-layers-selector:focus-visible + span { outline: 2px solid var(--c-blue-600); outline-offset: 1px; }
.leaflet-popup-tip { box-shadow: var(--sh-2); }
.popup__media { aspect-ratio: 16/9; background: var(--c-surface-3); overflow: hidden; }
.popup__media picture { display: block; width: 100%; height: 100%; }
.popup__media img { width: 100%; height: 100%; object-fit: cover; }
.popup__body { padding: var(--sp-4); }
.popup__title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-2); color: var(--c-ink); }
.popup__text { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; margin-bottom: var(--sp-3); }
.popup__link { font-size: var(--fs-xs); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
/* Baloanele au acum două acțiuni („Află mai multe" / „Navighează") — le
despărțim ca să nu pară un singur link rupt pe două rânduri. */
.popup__link + .popup__link { margin-left: var(--sp-4); }
/* --------------------------------------------------------------------------
12. Antet de pagină interioară
-------------------------------------------------------------------------- */
.pagehead {
position: relative;
padding-block: calc(var(--header-h) + clamp(var(--sp-8), 9vw, var(--sp-11))) clamp(var(--sp-8), 8vw, var(--sp-10));
background: var(--c-blue-900); color: #fff; overflow: hidden;
}
.pagehead__media { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(120deg, rgba(0,36,80,.95), rgba(0,36,80,.6));
}
.pagehead .container { position: relative; z-index: 1; }
.pagehead__title { font-size: var(--fs-h1); font-weight: 200; letter-spacing: var(--ls-display); margin-bottom: var(--sp-4); }
.pagehead__lead { font-size: var(--fs-lead); font-weight: 300; color: rgba(255,255,255,.82); max-width: 52ch; line-height: 1.5; }
.pagehead .eyebrow { color: var(--c-gold-500); }
/* Firul Ariadnei */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); margin-bottom: var(--sp-5); }
.breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb span { color: rgba(255,255,255,.45); }
.breadcrumb [aria-current] { color: var(--c-gold-500); font-weight: 600; }
/* --------------------------------------------------------------------------
13. Conținut editorial (pagina de detaliu)
-------------------------------------------------------------------------- */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-8); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--sp-6); }
.prose p { line-height: 1.7; color: var(--c-ink-2); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: var(--sp-5); line-height: 1.65; color: var(--c-ink-2); }
.prose ul li + li { margin-top: var(--sp-3); }
.prose ul li::before {
content: ''; position: absolute; left: 2px; top: .65em;
width: 7px; height: 7px; background: var(--c-gold-500); transform: rotate(45deg);
}
.prose blockquote {
border-left: 3px solid var(--c-gold-500);
padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
font-size: var(--fs-lead); font-weight: 300; font-style: italic; color: var(--c-ink);
}
/* Tabel de informații practice */
.factsheet { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.factsheet__row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.factsheet__row + .factsheet__row { border-top: 1px solid var(--c-line); }
.factsheet__row:nth-child(odd) { background: var(--c-surface-2); }
.factsheet__key { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-subtle); }
.factsheet__val { font-size: var(--fs-sm); color: var(--c-ink); }
@media (max-width: 34rem) { .factsheet__row { grid-template-columns: 1fr; gap: var(--sp-1); } }
/* Layout cu bară laterală */
.split { display: grid; gap: clamp(var(--sp-6), 5vw, var(--sp-9)); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
.split__aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-5); }
@media (max-width: 60rem) { .split__aside { position: static; } }
/* --------------------------------------------------------------------------
14. Galerie
-------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.gallery__item {
position: relative; aspect-ratio: 1; overflow: hidden;
border-radius: var(--r-md); background: var(--c-surface-3);
border: none; padding: 0; cursor: pointer;
}
/* Galeria își păstrează apropierea la hover — spre deosebire de carduri, ea nu
are alt semn că imaginea se poate deschide. Dar la 160ms, nu la 400. */
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 160ms var(--ease-out); }
.gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2.06; }
@media (max-width: 40rem) { .gallery__item--tall { grid-row: span 1; aspect-ratio: 1; } }
/* --------------------------------------------------------------------------
14b. Fotografia mărită la clic (lightbox.js)
-------------------------------------------------------------------------- */
/* z-index 1300: peste antet (1100) și peste link-ul de salt (1200) */
.lightbox { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
body.are-lightbox { overflow: hidden; }
.lightbox__fundal { position: absolute; inset: 0; background: rgba(0, 12, 28, .92); backdrop-filter: blur(4px); }
.lightbox__cadru {
position: relative; z-index: 1;
width: min(96vw, 1600px); height: min(92vh, 1100px);
display: grid; place-items: center;
}
.lightbox__figura { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-height: 100%; }
.lightbox__img {
max-width: 100%; max-height: calc(92vh - 5rem);
width: auto; height: auto; /* niciodată deformată */
object-fit: contain; /* fotografia întreagă, nu decupată */
border-radius: var(--r-md); box-shadow: 0 24px 70px rgba(0,0,0,.5);
background: rgba(255,255,255,.04);
}
.lightbox__legenda {
display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; justify-content: center;
color: rgba(255,255,255,.9); font-size: var(--fs-sm); text-align: center;
max-width: 60ch;
}
.lightbox__contor { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; flex: none; }
.lightbox__buton {
position: absolute; z-index: 2;
width: 48px; height: 48px; display: grid; place-items: center;
border: none; border-radius: 50%; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lightbox__buton:hover { background: rgba(255,255,255,.24); }
.lightbox__buton:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 3px; }
.lightbox__buton[hidden] { display: none; }
.lightbox__buton svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__buton--inchide { top: 0; right: 0; }
.lightbox__buton--prec { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox__buton--urm { right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
.lightbox__cadru { width: 100vw; height: 100vh; }
.lightbox__buton--prec { left: var(--sp-2); }
.lightbox__buton--urm { right: var(--sp-2); }
.lightbox__buton--inchide { top: var(--sp-3); right: var(--sp-3); background: rgba(0,0,0,.45); }
.lightbox__legenda { padding-inline: var(--sp-5); }
}
/* Semnalăm că fotografia se poate mări */
[data-foto], [data-foto-src] { cursor: zoom-in; }
/* --------------------------------------------------------------------------
15. Bandă de traseu
-------------------------------------------------------------------------- */
.route {
display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5);
padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg);
background: var(--c-surface); text-decoration: none; color: inherit;
transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
transform var(--t-base) var(--ease-out);
}
.route:hover { border-color: var(--cat-traseu); box-shadow: var(--sh-2); }
.route__num {
width: 46px; height: 46px; display: grid; place-items: center; flex: none;
border-radius: var(--r-md); background: #e7f5ec; color: var(--cat-traseu);
font-size: var(--fs-h4); font-weight: 600;
}
.route__title { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--sp-2); }
.route__path { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }
/* Marcaj pentru traseele fără descriere verificată încă. Nu arată ca un text
de descriere, ci ca o etichetă de stare — altfel „În curând" s-ar citi ca
rezumatul traseului. */
.route__path--curand {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
color: var(--c-text-subtle);
}
.route__path--curand::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--cat-traseu); opacity: .55; flex: none;
}
.route__stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-text-subtle); }
.route__stat { display: inline-flex; align-items: center; gap: var(--sp-2); }
.route__stat svg { width: 14px; height: 14px; opacity: .7; }
/* Traseele desenate (trasee.js): pe card, culoarea marcajului și mini-profilul;
trecerea peste card aprinde traseul pe harta de deasupra. */
.route__geo { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-4); }
.route__marcaje { display: inline-flex; gap: 4px; flex: none; }
.trk-mini { flex: 1; height: 38px; min-width: 0; }
.route.is-aprins { border-color: var(--cat-traseu); box-shadow: var(--sh-2); }
.trk__culoare {
display: inline-block; width: 22px; height: 8px; border-radius: 4px; flex: none;
background: var(--c); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.12);
}
/* Harta cu toate traseele, pe pagina Drumeții */
.trk-rubrica {
height: clamp(320px, 52vh, 520px); margin-bottom: var(--sp-7);
border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line);
box-shadow: var(--sh-1); z-index: 0;
}
/* Blocul unui traseu: hartă, cifre, profil, „Unde sunt pe traseu?" */
.trk {
margin-bottom: var(--sp-8); padding: var(--sp-5);
border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
box-shadow: var(--sh-1);
}
.trk__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.trk__titlu { font-size: var(--fs-h4); font-weight: 600; }
.trk__legenda { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--c-text-subtle); }
.trk__legenda li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trk__harta { height: clamp(300px, 50vh, 480px); border-radius: var(--r-md); overflow: hidden; z-index: 0; }
.trk__cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.trk__cifre div { padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); border-radius: var(--r-md); }
.trk__cifre span { display: block; font-size: var(--fs-xs); color: var(--c-text-subtle); letter-spacing: .03em; text-transform: uppercase; }
.trk__cifre strong { font-size: var(--fs-h4); font-weight: 600; color: var(--c-ink); }
@media (max-width: 40rem) {
.trk { padding: var(--sp-4); }
.trk__cifre { grid-template-columns: 1fr; }
.trk__cifre div { display: flex; justify-content: space-between; align-items: baseline; }
}
.trk-profil__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.trk-profil__cap h3 { font-size: var(--fs-body); font-weight: 600; }
.trk-profil__cap p { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.trk-profil__zona {
position: relative; height: 170px; padding-left: 0;
border-bottom: 1px solid var(--c-line-2); touch-action: pan-y; cursor: crosshair;
}
.trk-profil__svg { display: block; width: 100%; height: 100%; }
.trk-profil__ax { position: absolute; left: 0; font-size: 11px; color: var(--c-text-subtle); background: rgba(255,255,255,.8); padding: 0 4px; border-radius: 3px; pointer-events: none; }
.trk-profil__ax--sus { top: 0; }
.trk-profil__ax--jos { bottom: 2px; }
.trk-profil__x { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-text-subtle); margin-top: 4px; }
.trk-profil__cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--c-ink-3); pointer-events: none; }
.trk-profil__punct {
position: absolute; left: -7px; width: 14px; height: 14px; margin-bottom: -7px; border-radius: 50%;
background: var(--c-ink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.trk-profil__eticheta {
position: absolute; top: 4px; left: 8px; white-space: nowrap;
font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink);
background: #fff; padding: 2px 8px; border-radius: 999px; box-shadow: var(--sh-1);
}
.trk-profil__eticheta.is-dreapta { left: auto; right: 8px; }
.trk-eu { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.trk-eu__buton[aria-pressed="true"] { background: var(--c-blue-50); border-color: var(--c-blue-600); color: var(--c-blue-600); }
.trk-eu__mesaj { font-size: var(--fs-sm); color: var(--c-ink-2); }
.trk-eu__mesaj:empty { display: none; }
.trk-eu__nota { flex-basis: 100%; font-size: var(--fs-xs); color: var(--c-text-subtle); }
/* Semnele de plecare și sosire pe hartă */
.trk-semn {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
font-size: 13px; font-weight: 700; color: #fff; border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.trk-semn--start { background: #1b7f3b; }
.trk-semn--final { background: var(--c-ink); }
.trk-semn--final svg { width: 14px; height: 14px; fill: #fff; }
.trk-semn--mic { width: 14px; height: 14px; border-width: 2px; margin: 7px; }
.trk-semn--nr { background: #fff; color: var(--c-ink); border-width: 4px; cursor: pointer; }
/* --------------------------------------------------------------------------
16. Bandă CTA
-------------------------------------------------------------------------- */
.cta-band {
position: relative; overflow: hidden;
background: var(--c-blue-900); color: #fff;
border-radius: var(--r-xl);
padding: clamp(var(--sp-7), 6vw, var(--sp-10));
text-align: center;
}
/* Fotografie de fundal — apusul de pe Dealul Mârzoaia — sub un văl bleumarin,
ca textul alb să rămână lizibil oriunde cade peste lumina apusului. */
.cta-band__media { position: absolute !important; inset: 0; z-index: 0 !important; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cta-band::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse at 50% 50%, rgba(0,18,40,.55) 0%, rgba(0,18,40,.78) 70%),
linear-gradient(to bottom, rgba(0,18,40,.25), rgba(0,18,40,.55));
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band__title { font-size: var(--fs-h2); font-weight: 200; letter-spacing: var(--ls-display); margin-bottom: var(--sp-4); }
.cta-band__text { font-size: var(--fs-lead); font-weight: 300; color: rgba(255,255,255,.8); max-width: 46ch; margin: 0 auto var(--sp-7); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
/* --------------------------------------------------------------------------
17. Subsol
-------------------------------------------------------------------------- */
.footer { background: var(--c-blue-900); color: rgba(255,255,255,.7); padding-block: var(--sp-9) var(--sp-6); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: var(--sp-8); }
.footer__brand { grid-column: span 1; }
@media (min-width: 60rem) { .footer__brand { grid-column: span 2; padding-right: var(--sp-8); } }
.footer__logo { height: 52px; width: auto; margin-bottom: var(--sp-4); overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: filter 1.2s ease; }
.footer__logo path { fill: #fff; stroke: #fff; transition: fill 1.2s ease, stroke 1.2s ease; }
.footer__logo .mk-hollow { fill: none; }
/* Jocul ascuns al morii (main.js): după 15 s de clicuri, moara se aurește */
.footer__logo--aur { filter: drop-shadow(0 0 10px rgba(211,196,6,.5)); animation: moara-aur 1.8s ease-out; }
.footer__logo--aur path { fill: var(--c-gold-500); stroke: var(--c-gold-500); }
.footer__logo--aur .mk-hollow { fill: none; }
@keyframes moara-aur {
0% { filter: drop-shadow(0 0 0 rgba(211,196,6,0)); }
30% { filter: drop-shadow(0 0 26px rgba(211,196,6,.95)); }
100% { filter: drop-shadow(0 0 10px rgba(211,196,6,.5)); }
}
.footer__tagline { line-height: 1.6; max-width: 34ch; }
.footer__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-500); margin-bottom: var(--sp-4); }
.footer__links { display: grid; gap: var(--sp-3); }
.footer__links a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__contact { display: grid; gap: var(--sp-3); line-height: 1.5; }
.footer__contact-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer__contact-item svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c-gold-500); }
.footer__bottom {
padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14);
display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
justify-content: space-between; align-items: center;
font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.footer__bottom a { color: rgba(255,255,255,.6); }
.footer__autor { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.footer__autor-marca { height: .95em; width: auto; fill: currentColor; opacity: .85; }
.footer__autor strong { font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.8); }
/* --------------------------------------------------------------------------
17b. Info călătorie — distanțe și traseu
-------------------------------------------------------------------------- */
.distante-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.distanta-card {
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-5); background: var(--c-surface);
border: 1px solid var(--c-line); border-radius: var(--r-lg);
transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.distanta-card:hover { border-color: var(--c-blue-500); box-shadow: var(--sh-2); }
.distanta-card__icon {
width: 46px; height: 46px; flex: none; display: grid; place-items: center;
border-radius: var(--r-md); background: var(--c-blue-50); color: var(--c-blue-600);
}
.distanta-card__icon svg { width: 24px; height: 24px; }
.distanta-card__nume { font-weight: 600; font-size: var(--fs-h4); margin-bottom: 2px; }
.distanta-card__meta { font-size: var(--fs-sm); color: var(--c-text-muted); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.distanta-card__meta strong { color: var(--c-blue-600); font-weight: 700; }
/* Panoul de rutare */
.ruta-panel {
display: grid; gap: 0; grid-template-columns: 22rem 1fr;
border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden;
background: var(--c-surface); box-shadow: var(--sh-1);
}
@media (max-width: 56rem) { .ruta-panel { grid-template-columns: 1fr; } }
.ruta-panel__aside { padding: var(--sp-6); border-right: 1px solid var(--c-line); display: grid; gap: var(--sp-5); align-content: start; }
@media (max-width: 56rem) { .ruta-panel__aside { border-right: none; border-bottom: 1px solid var(--c-line); } }
.ruta-panel__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-subtle); margin-bottom: var(--sp-2); display: block; }
.ruta-select {
width: 100%; min-height: 48px; padding: 0 var(--sp-4);
font-size: var(--fs-sm); font-family: inherit; color: var(--c-ink);
border: 1.5px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-surface-2);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454e5c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 18px;
padding-right: var(--sp-8);
}
.ruta-select:focus { outline: none; border-color: var(--c-blue-500); }
.ruta-gps {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-xs); font-weight: 600; color: var(--c-blue-600);
background: none; border: none; padding: var(--sp-2) 0; cursor: pointer;
}
.ruta-gps svg { width: 15px; height: 15px; }
.ruta-gps:hover { color: var(--c-blue-700); text-decoration: underline; }
.ruta-gps[disabled] { opacity: .5; cursor: default; text-decoration: none; }
/* Separator „sau" între selectorul de orașe și căutarea liberă */
.ruta-sau {
display: flex; align-items: center; gap: var(--sp-3);
font-size: var(--fs-xs); color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: .06em;
}
.ruta-sau::before, .ruta-sau::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
/* Căutare liberă cu sugestii (Nominatim) */
.ruta-cauta-wrap { position: relative; }
.ruta-cauta {
width: 100%; min-height: 48px; padding: 0 var(--sp-4);
font-size: var(--fs-sm); font-family: inherit; color: var(--c-ink);
border: 1.5px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-surface-2);
}
.ruta-cauta:focus { outline: none; border-color: var(--c-blue-500); background: #fff; }
.ruta-cauta::placeholder { color: var(--c-text-subtle); }
.ruta-sugestii {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
box-shadow: var(--sh-3); overflow: hidden; max-height: 16rem; overflow-y: auto;
display: none;
}
.ruta-sugestii.is-vizibil { display: block; }
.ruta-sugestie {
display: block; width: 100%; text-align: left;
padding: var(--sp-3) var(--sp-4); border: none; background: none; cursor: pointer;
font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.4;
border-bottom: 1px solid var(--c-line);
}
.ruta-sugestie:last-child { border-bottom: none; }
.ruta-sugestie:hover, .ruta-sugestie[aria-selected="true"] { background: var(--c-blue-50); }
.ruta-sugestie small { display: block; color: var(--c-text-subtle); font-size: var(--fs-xs); margin-top: 2px; }
.ruta-sugestii__gol { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-subtle); }
.ruta-rezultat { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); display: none; }
.ruta-rezultat.is-vizibil { display: block; }
.ruta-rezultat__num { font-size: 2rem; font-weight: 200; color: var(--c-blue-600); line-height: 1; letter-spacing: var(--ls-display); }
.ruta-rezultat__num span { font-size: 1rem; font-weight: 500; }
.ruta-rezultat__eticheta { font-size: var(--fs-xs); color: var(--c-text-subtle); margin-top: var(--sp-1); }
.ruta-rezultat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ruta-stare { font-size: var(--fs-sm); color: var(--c-text-muted); }
.ruta-stare--eroare { color: #b91c1c; }
#ruta-harta { min-height: 22rem; height: 100%; }
@media (max-width: 56rem) { #ruta-harta { height: 22rem; } }
/* --------------------------------------------------------------------------
18. Placeholder foto — până la încărcarea fotografiilor reale
-------------------------------------------------------------------------- */
/* Locul fotografiei care încă nu există. Trebuie să arate ca o alegere, nu
ca o imagine stricată: caroul în diagonală de dinainte semăna cu textura
de „missing image" a editoarelor. Acum e o suprafață calmă, în albastrul
mărcii, cu moara din stemă ca filigran discret — ceva ce poate sta liniștit
pe site-ul oficial al Primăriei până sosesc fotografiile reale. */
.ph {
position: relative; width: 100%; height: 100%;
display: grid; place-items: center;
background:
radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.10) 0%, transparent 60%),
linear-gradient(160deg, var(--c-blue-700) 0%, var(--c-blue-800) 100%);
overflow: hidden;
}
/* Filigran: moara din stemă, foarte discretă, decupată de marginea cadrului */
.ph::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='155 45 610 780' fill='%23ffffff'%3E%3Cpath d='M278.787 801.849L330.332 602.542H585.628L637.173 801.849H528.917C528.524 806.128 527.961 810.326 527.237 814.427H653.417L595.366 589.965H320.594L262.543 814.427H388.725C388.001 810.326 387.438 806.128 387.045 801.849H278.787Z'/%3E%3Cpath d='M514.446 814.429C516.099 805.891 516.999 796.804 516.999 787.337C516.999 760.108 509.552 736.021 498.171 719.103C486.737 702.107 472.291 693.489 457.981 693.489C443.671 693.489 429.225 702.107 417.791 719.103C406.41 736.021 398.963 760.108 398.963 787.337C398.963 796.804 399.863 805.891 401.516 814.429H388.726C387.198 805.779 386.385 796.699 386.385 787.337C386.385 728.56 418.44 680.911 457.981 680.911C497.522 680.911 529.577 728.56 529.577 787.337C529.577 796.699 528.763 805.779 527.236 814.429H514.446Z'/%3E%3Cpath d='M491.968 146.254L500.855 155.141L311.657 344.34L302.77 335.452L491.968 146.254Z'/%3E%3Cpath d='M425.481 146.254L416.594 155.141L605.793 344.34L614.68 335.452L425.481 146.254Z'/%3E%3Cpath d='M492.462 220.885L662.591 50.7562L647.807 145.029L477.678 315.159L492.462 220.885Z'/%3E%3Cpath d='M584.439 312.846L754.568 142.717L660.295 157.501L490.166 327.63L584.439 312.846Z'/%3E%3Cpath d='M332.882 380.466L162.752 550.595L257.025 535.811L427.155 365.682L332.882 380.466Z'/%3E%3Cpath d='M424.827 472.411L254.698 642.541L269.482 548.268L439.611 378.138L424.827 472.411Z'/%3E%3Cpath d='M332.885 313.182L162.756 143.053L257.029 157.837L427.159 327.966L332.885 313.182Z'/%3E%3Cpath d='M424.827 221.229L254.698 51.0999L269.482 145.373L439.611 315.502L424.827 221.229Z'/%3E%3Cpath d='M492.462 472.759L662.591 642.888L647.807 548.615L477.678 378.486L492.462 472.759Z'/%3E%3Cpath d='M584.408 380.818L754.537 550.947L660.264 536.163L490.134 366.034L584.408 380.818Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 46%;
background-size: auto 58%;
opacity: .085;
}
.ph__mark { position: relative; width: 34%; max-width: 88px; opacity: .5; }
.ph__mark path { fill: #fff; stroke: #fff; }
.ph--dark { background: linear-gradient(135deg, #001a3a 0%, var(--c-blue-800) 100%); }
/* În hero, marca stă discret în colț ca filigran — nu peste titlu */
.hero .ph { place-items: end; }
.hero .ph__mark {
width: 14%; max-width: 190px; opacity: .12;
margin: 0 clamp(1.5rem, 6vw, 6rem) clamp(6rem, 16vh, 11rem) 0;
}
/* --------------------------------------------------------------------------
19. Utilitare
-------------------------------------------------------------------------- */
.stack { display: grid; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.center-x { margin-inline: auto; }
/* Notă de avertizare pentru date ce necesită verificare */
.notice {
display: flex; gap: var(--sp-4); align-items: flex-start;
padding: var(--sp-4) var(--sp-5);
background: var(--c-gold-50); border: 1px solid var(--c-gold-200);
border-left: 4px solid var(--c-gold-500);
border-radius: var(--r-md);
font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.55;
}
.notice svg { width: 20px; height: 20px; flex: none; color: var(--c-gold-text); margin-top: 1px; }
.notice strong { color: var(--c-ink); }
/* --------------------------------------------------------------------------
20. Animație la scroll + respectarea preferinței de mișcare redusă
-------------------------------------------------------------------------- */
[data-reveal] {
opacity: 0; transform: translateY(18px);
transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
Mișcarea la hover — numai unde există un mouse adevărat
--------------------------------------------------------------------------
Pe un ecran tactil nu există „a pleca cu mouse-ul de pe element": o atingere
declanșează :hover, iar starea rămâne agățată până când utilizatorul atinge
altundeva. Cardul rămâne ridicat, ceea ce arată ca un defect, nu ca un
răspuns. `pointer: fine` exclude și creioanele groase și telecomenzile de TV.
Aici stă DOAR deplasarea. Umbra, chenarul și culoarea au rămas în regulile
lor obișnuite, ca atingerea de pe telefon să dea totuși un răspuns vizibil.
Regulile pentru sublinierea paginii curente (.nav__link[aria-current]) și
pentru pinul selectat (.pin-wrap.is-active) au fost desprinse dinadins și
lăsate afară: sunt stări, nu efecte de hover, și trebuie să se vadă și pe
telefon — acolo sunt chiar singurul indiciu al selecției.
-------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.link-arrow:hover svg { transform: translateX(4px); }
.nav__link:hover::after { transform: scaleX(1); }
.card:hover { transform: translateY(-4px); }
.rubric:hover { transform: translateY(-3px); }
.rubric:hover::before { transform: scaleX(1); }
.pin-wrap:hover .pin { transform: rotate(-45deg) scale(1.18); }
.gallery__item:hover img { transform: scale(1.06); }
.route:hover { transform: translateY(-2px); }
.distanta-card:hover { transform: translateY(-2px); }
.lightbox__buton--prec:hover,
.lightbox__buton--urm:hover { transform: translateY(-50%) scale(1.06); }
}
/* „Mișcare redusă" înseamnă mai puțină mișcare, nu zero animație. Cine
bifează opțiunea o face de obicei din cauza răului de mișcare: îl deranjează
deplasarea și scalarea, nu o estompare blândă. Ba dimpotrivă — dacă tai și
estompările, meniurile apar și dispar brusc, iar asta e mai greu de urmărit,
nu mai ușor.
Varianta de dinainte punea `transition-duration: .01ms !important` pe absolut
tot, deci omora inclusiv tranzițiile de culoare și opacitate care ajută la
înțelegere. Acum oprim doar animațiile în buclă și deplasările, și păstrăm
estompările. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
/* Animațiile continue sau declanșate de scroll se opresc de tot */
.hero__media img {
animation: none !important;
}
/* Dezvăluirea la scroll se anulează complet, nu doar deplasarea: `opacity: 1`
e și plasa de siguranță dacă JS-ul nu rulează — altfel conținutul ar rămâne
invizibil. Tranzițiile care chiar ajută la înțelegere (meniuri, butoane)
nu sunt atinse aici; ele își păstrează estomparea. */
[data-reveal] { opacity: 1; transform: none; }
/* Nimic nu se mai ridică, mărește sau mută la hover ori la apăsare */
.card:hover, .rubric:hover, .route:hover, .distanta-card:hover,
.link-arrow:hover svg, .pin-wrap:hover .pin,
.gallery__item:hover img, .btn:active {
transform: none !important;
}
}
/* --------------------------------------------------------------------------
21. Tipar
-------------------------------------------------------------------------- */
@media print {
.header, .footer, .map-layout, .cta-band, .skip-link { display: none !important; }
body { color: #000; font-size: 11pt; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* --------------------------------------------------------------------------
Harta — „Unde sunt eu?" (locația vizitatorului, doar la cerere)
-------------------------------------------------------------------------- */
.map-canvas { position: relative; }
.map-locate__btn {
display: grid; place-items: center; width: 34px; height: 34px;
padding: 0; border: 0; background: #fff; color: var(--c-ink-2); cursor: pointer;
}
.map-locate__btn:hover { background: var(--c-surface-2); }
.map-locate__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.map-locate__btn svg circle:first-child { fill: currentColor; stroke: none; }
.map-locate__btn[aria-pressed="true"] { color: #1a73e8; }
.map-locate__btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.map-locate__btn.is-cautare svg { animation: locatie-cauta 1.1s ease-in-out infinite; }
}
@keyframes locatie-cauta { 50% { opacity: .35; } }
/* Punctul albastru și cercul de precizie, în culorile cunoscute din aplicațiile de hărți */
.eu-punct { fill: #1a73e8; fill-opacity: 1; stroke: #fff; stroke-width: 3; }
.eu-precizie { fill: #1a73e8; fill-opacity: .12; stroke: #1a73e8; stroke-opacity: .35; stroke-width: 1; }
.map-item__dist { color: #1a73e8; font-weight: 600; }
/* Mesaj scurt peste hartă: „Ești la 67 km de Nisporeni", permisiune refuzată etc. */
.map-mesaj {
position: absolute; left: 50%; bottom: var(--sp-4); z-index: 1000;
transform: translateX(-50%); width: max-content; max-width: min(92%, 30rem);
padding: var(--sp-3) var(--sp-9) var(--sp-3) var(--sp-4);
background: #fff; color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.5;
border-radius: var(--r-md); box-shadow: var(--sh-3, 0 8px 24px rgba(0,0,0,.18));
}
.map-mesaj[hidden] { display: none; }
.map-mesaj a { color: #1a73e8; font-weight: 600; white-space: nowrap; }
.map-mesaj__inchide {
position: absolute; top: 4px; right: 6px; width: 30px; height: 30px;
border: 0; background: none; font-size: 20px; line-height: 1; color: var(--c-text-subtle); cursor: pointer;
}
/* --------------------------------------------------------------------------
Info călătorie — antetul cu șoseaua și traseul desenat
Fotografia și SVG-ul stau în același cadru 16:9 (.drum__cadru), dimensionat
ca „object-fit: cover" cu unități de container: așa linia rămâne pe asfalt
la orice lățime. Pe ecran lat cadrul e împins spre dreapta, ca drumul să
nu treacă pe sub titlu.
-------------------------------------------------------------------------- */
.pagehead--drum {
min-height: clamp(30rem, 78vh, 46rem);
display: flex; align-items: flex-end;
}
.pagehead--drum .container { width: 100%; }
.drum { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.drum__cadru {
position: absolute; left: 50%; top: 15%;
width: max(100cqw, calc(100cqh * 4096 / 2304));
aspect-ratio: 4096 / 2304;
translate: -44% -15%; /* un pic spre dreapta: pinul nu mai stă lipit de margine pe telefon */
transform-origin: 34.7% 25%; /* capătul drumului: spre el „înaintăm" */
}
@media (min-width: 60rem) {
.drum__cadru { width: max(115cqw, calc(100cqh * 4096 / 2304)); translate: -44% -15%; }
}
.drum__cadru picture, .drum__cadru img { display: block; width: 100%; height: 100%; }
.drum__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Voalul: închis sub text (stânga și jos), deschis peste drum */
.pagehead--drum::after {
background:
linear-gradient(90deg, rgba(0,24,56,.9) 0%, rgba(0,24,56,.62) 36%, rgba(0,24,56,.12) 68%, rgba(0,24,56,.05) 100%),
linear-gradient(to top, rgba(0,24,56,.55) 0%, transparent 45%);
}
@media (max-width: 59.99rem) {
.pagehead--drum::after {
background: linear-gradient(to top, rgba(0,24,56,.94) 0%, rgba(0,24,56,.7) 38%, rgba(0,24,56,.15) 75%);
}
}
/* Traseul: galbenul din siglă, cu o umbră închisă ca să se vadă și pe asfaltul luminos */
.drum__umbra { fill: none; stroke: rgba(0,18,40,.45); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.drum__linie { fill: none; stroke: var(--c-gold-500, #d3c406); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
/* Stare finală (și pentru cine a cerut mișcare redusă): traseul întreg, pinul pus */
.drum__linie { stroke-dasharray: 1; stroke-dashoffset: 0; }
.drum__cap { fill: #fff; stroke: var(--c-gold-500, #d3c406); stroke-width: 10; opacity: 0; }
.drum__pin path { fill: var(--c-gold-500, #d3c406); stroke: rgba(0,18,40,.5); stroke-width: 6; }
.drum__pin circle { fill: var(--c-blue-900, #0a1f44); }
.drum__pin { transform-box: fill-box; transform-origin: 50% 100%; }
.drum__puls { fill: none; stroke: var(--c-gold-500, #d3c406); stroke-width: 3; vector-effect: non-scaling-stroke;
transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
/* traseul se desenează de jos până la orizont, apoi cade pinul și începe să pulseze */
.drum__umbra { opacity: 0; animation: drum-apare .4s ease .6s forwards; }
.drum__linie { stroke-dashoffset: 1; animation: drum-deseneaza 3s cubic-bezier(.45,0,.2,1) .6s forwards; }
.drum__cap.is-activ { opacity: 1; }
.drum__pin { opacity: 0; animation: drum-pin .5s cubic-bezier(.34,1.56,.64,1) 3.5s forwards; }
.drum__puls { animation: drum-puls 2.2s ease-out 3.8s infinite; }
/* ca dintr-o mașină care înaintează: apropiere lentă spre capătul drumului */
.drum__cadru { animation: drum-inainte 16s cubic-bezier(.2,.6,.3,1) forwards; }
}
@keyframes drum-apare { to { opacity: 1; } }
@keyframes drum-deseneaza { to { stroke-dashoffset: 0; } }
@keyframes drum-pin { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes drum-puls { from { opacity: .75; scale: .2; } to { opacity: 0; scale: 1.5; } }
@keyframes drum-inainte { from { scale: 1; } to { scale: 1.07; } }
/* --------------------------------------------------------------------------
Antetul rubricilor — fotografiile rubricii, una după alta
(construit de listare.js; fără fotografii, antetul rămâne albastru)
-------------------------------------------------------------------------- */
.pagehead--rotativ {
min-height: clamp(28rem, 72vh, 42rem);
display: flex; align-items: flex-end;
}
.pagehead--rotativ .container { width: 100%; }
.rot { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--c-blue-900); }
.rot__cadru { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.rot__cadru.is-activ { opacity: 1; }
.rot__cadru picture, .rot__cadru img { display: block; width: 100%; height: 100%; }
.rot__cadru img { object-fit: cover; scale: 1; transition: scale 9s linear; }
.rot__cadru img.foto--portret { object-position: 50% 30%; }
.rot__cadru.is-activ img { scale: 1.08; } /* apropiere lentă cât stă pe ecran */
/* Voalul: închis sub titlu, deschis spre dreapta, unde se vede fotografia */
.pagehead--rotativ::after {
background:
linear-gradient(90deg, rgba(0,24,56,.9) 0%, rgba(0,24,56,.6) 40%, rgba(0,24,56,.15) 75%, rgba(0,24,56,.08) 100%),
linear-gradient(to top, rgba(0,24,56,.7) 0%, transparent 50%);
}
@media (max-width: 59.99rem) {
.pagehead--rotativ::after {
background: linear-gradient(to top, rgba(0,24,56,.95) 0%, rgba(0,24,56,.72) 45%, rgba(0,24,56,.2) 80%);
}
}
/* Numele obiectivului din fotografie + liniuțele de progres */
.rot__nav {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: var(--sp-4); margin-top: var(--sp-7);
}
.rot__eticheta {
display: inline-flex; flex-direction: column; gap: 2px; min-width: 0;
color: #fff; text-decoration: none; font-size: var(--fs-sm); line-height: 1.35;
padding-left: var(--sp-3); border-left: 2px solid var(--c-gold-500);
}
.rot__nume { font-weight: 600; }
.rot__loc { color: rgba(255,255,255,.7); font-size: var(--fs-xs); }
.rot__eticheta:hover .rot__nume { text-decoration: underline; text-underline-offset: 3px; }
.rot__controale { display: flex; align-items: center; gap: var(--sp-3); }
.rot__puncte { display: flex; gap: 6px; }
.rot__punct {
width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
display: grid; align-items: center;
}
.rot__punct span { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.rot__punct span::after { content: ''; display: block; height: 100%; width: 0; background: #fff; }
.rot__punct.is-activ span::after { animation: rot-progres var(--rot-durata, 6.5s) linear forwards; }
.rot__nav.is-oprit .rot__punct.is-activ span::after { animation-play-state: paused; }
@keyframes rot-progres { to { width: 100%; } }
.rot__punct:hover span { background: rgba(255,255,255,.6); }
.rot__punct:focus-visible, .rot__pauza:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }
.rot__pauza {
width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,18,40,.35); color: #fff;
}
.rot__pauza svg { width: 14px; height: 14px; fill: currentColor; }
.rot__pauza .rot__i-play { display: none; }
.rot__nav.is-oprit .rot__i-pauza { display: none; }
.rot__nav.is-oprit .rot__i-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
.rot__cadru { transition: none; }
.rot__cadru img, .rot__cadru.is-activ img { transition: none; scale: 1; }
.rot__punct.is-activ span::after { animation: none; width: 100%; }
}