/* ==========================================================================
TRANSPORT CRAIOVA ↔ LONDRA — stylesheet
--------------------------------------------------------------------------
Cuprins
01. Tokens
02. Reset & bază
03. Tipografie & utilitare
04. Butoane
05. Carduri & liste
06. Header, navigație, drawer
07. Hero + șina de traseu
08. Beneficii
09. Despre noi
10. Servicii
11. Pachetul tău (pași)
12. Calculator
13. Micro-CTA / Flota
14. Program saptamanal
15. De ce noi
16. FAQ
17. Contact & hartă
18. CTA final
19. Footer
20. Buton flotant & mesaje
21. Animații de intrare
22. Breakpoints & preferințe
========================================================================== */
/* ------------------------------------------------------------- 00. FONTURI
Fonturile sunt gazduite local, in public/fonts/ , NU de pe serverele Google.
Doua motive:
1. GDPR — un link catre fonts.gstatic.com trimite adresa IP a vizitatorului
catre Google la fiecare incarcare de pagina, inainte de orice acord.
2. Viteza — dispare un request blocant catre un domeniu strain din drumul
critic al primei afisari.
Subseturile pastrate sunt latin si latin-ext . latin-ext este obligatoriu:
acolo stau diacriticele romanesti (a-breve, a-circumflex, i-circumflex, s si t
cu virgula). Daca il stergi, diacriticele se afiseaza cu alt font.
Archivo este un font variabil: un singur fisier acopera toate grosimile
500-800. Barlow si Barlow Condensed au cate un fisier pentru fiecare grosime.
Ca sa schimbi fonturile, descarca woff2-urile in public/fonts/ si rescrie
blocurile de mai jos. Nu adauga la loc un catre fonts.googleapis.com.
========================================================================== */
/* Archivo 500 800 (variabil) — latin */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("fonts/archivo-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 500 800 (variabil) — latin-ext */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url("fonts/archivo-var-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 400 — latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/barlow-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 500 — latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/barlow-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 600 — latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/barlow-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 700 — latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/barlow-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 400 — latin-ext */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/barlow-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 500 — latin-ext */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/barlow-500-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 600 — latin-ext */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/barlow-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 700 — latin-ext */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/barlow-700-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 500 — latin */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/barlow-condensed-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 600 — latin */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 700 — latin */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 500 — latin-ext */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/barlow-condensed-500-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 600 — latin-ext */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 700 — latin-ext */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ------------------------------------------------------------- 01. TOKENS */
:root {
/* Culori de bază — cerute în brief */
--bg: #F4F5F8;
--surface: #FFFFFF;
--accent: #25D366; /* rezervat exclusiv acțiunilor WhatsApp */
--ink: #0F172A;
/* Neutre derivate */
--ink-2: #475569;
--ink-3: #5B6B7E; /* 5,00:1 pe --bg si 5,46:1 pe alb — WCAG AA. NU-l deschide la loc. */
--ink-4: #94A3B8;
--line: #E4E8EF;
--line-2: #CBD5E1;
--deep: #0B1220;
--deep-2: #16233C;
--accent-600: #1EBE5B;
--accent-700: #17A34E;
--accent-soft: rgba(37, 211, 102, 0.12);
/* Traseul: albastrul din siglă. Structurează programul și marcajele de rută. */
--route: #1E4E6B;
--route-2: #2C6985;
--route-soft: rgba(44, 105, 133, 0.10);
/* Singurul accent cald din pagină: fereastra de program care urmează.
Îl folosim exclusiv pentru starea „urmează / în desfășurare". */
--live: #F59E0B;
--live-ink: #7C4A03;
--live-soft: rgba(245, 158, 11, 0.14);
/* Carduri */
--card-pad: clamp(1.4rem, 3vw, 2rem);
--brand-bg: #2C6985; /* fundalul propriu al siglei — badge-ul se continuă cu ea */
--radius: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
--shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.10);
--shadow-lift: 0 18px 40px rgba(15, 23, 42, 0.14);
/* Tipografie */
--font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-cond: "Barlow Condensed", "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
/* Ritm */
--header-h: 66px;
--gutter: clamp(1.15rem, 4.5vw, 2.5rem);
--section-y: clamp(3.5rem, 8vw, 6.5rem);
--maxw: 1180px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--t-fast: 0.18s var(--ease);
--t: 0.28s var(--ease);
/* Colțurile ecranului: butoanele plutitoare (WhatsApp, cookie-uri, sus)
folosesc aceeași margine, ca să rămână aliniate între ele. */
--fab-gap: clamp(0.9rem, 3vw, 1.5rem);
--fab-bottom: calc(var(--fab-gap) + env(safe-area-inset-bottom));
--fab-size: 56px;
/* IMAGINEA DE HERO
Schimbi poza din hero înlocuind numele fișierului de mai jos (și pe cele
două din din index.html).
Cu valoarea `none` se afișează fundalul generat prin CSS.
Valoarea de aici este varianta MICĂ, de 800 px — telefoanele sunt majoritatea
vizitelor, iar un fundal CSS nu poate folosi `srcset`. Varianta mare se pune
la loc pe ecrane late, în blocul de la secțiunea 22 („BREAKPOINTS"). */
--hero-image: url("img/l1@800.jpg");
--hero-image-pos: center 58%; /* ce parte a pozei rămâne vizibilă la decupare */
}
/* ------------------------------------------------------- 02. RESET & BAZĂ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
margin: 0;
background-color: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
font-weight: 400;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, svg, iframe { display: block; max-width: 100%; }
iframe { border: 0; }
/* Regulile noastre de `display` au prioritate peste `[hidden]` din browser,
așa că o impunem explicit. Fără asta, elementele ascunse din JS
(mesajul de eroare al calculatorului, listele goale) rămân vizibile. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-display);
margin: 0;
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 700;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
width: 22px; height: 22px;
flex: 0 0 auto;
fill: none;
}
.icon--sm { width: 17px; height: 17px; }
.icon--lg { width: 28px; height: 28px; }
/* Focus vizibil, consecvent pe tot site-ul */
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
.btn--wa:focus-visible,
.fab:focus-visible { outline-color: var(--ink); }
.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; left: 50%; top: 0;
transform: translate(-50%, -120%);
z-index: 200;
background: var(--ink); color: #fff;
padding: 0.7rem 1.2rem;
border-radius: 0 0 var(--radius) var(--radius);
font-weight: 600;
transition: transform var(--t-fast);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
/* ------------------------------------------- 03. TIPOGRAFIE & UTILITARE */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: 840px; }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section__head {
max-width: 640px;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__title {
font-size: clamp(1.7rem, 4.2vw, 2.6rem);
font-weight: 800;
margin-bottom: 0.75rem;
}
.section__lead {
font-size: clamp(1.02rem, 1.6vw, 1.15rem);
color: var(--ink-2);
margin-bottom: 0;
}
.section__lead strong { color: var(--ink); font-weight: 700; }
.eyebrow {
font-family: var(--font-cond);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.eyebrow::before {
content: "";
width: 26px; height: 2px;
background: var(--ink);
flex: 0 0 auto;
}
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--3, .grid--4 { grid-template-columns: 1fr; }
/* --------------------------------------------------------- 04. BUTOANE */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.85rem 1.35rem;
min-height: 48px;
border: 1px solid transparent;
border-radius: var(--radius);
background: none;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-align: center;
transition: background-color var(--t-fast), border-color var(--t-fast),
color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 42px; padding: 0.55rem 1rem; font-size: 0.925rem; }
.btn--lg { min-height: 54px; padding: 0.95rem 1.6rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
/* CTA WhatsApp — singurul loc unde folosim verdele */
.btn--wa {
background: var(--accent);
color: #04240F;
box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
}
.btn--wa:hover { background: var(--accent-600); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.34); }
.btn--wa:active { background: var(--accent-700); }
.btn--wa .icon { fill: currentColor; }
.btn--ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.btn--outline {
background: var(--surface);
border-color: var(--line-2);
color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); }
/* Acțiunea principală acolo unde verdele de WhatsApp nu se potrivește
(ex. consimțământul de cookie-uri, care nu are legătură cu WhatsApp). */
.btn--dark {
background: var(--ink);
color: #fff;
}
.btn--dark:hover { background: var(--deep-2); }
.link-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: auto;
padding-top: 1.2rem;
font-weight: 600;
color: var(--ink);
border-bottom: 2px solid transparent;
align-self: flex-start;
transition: gap var(--t-fast), border-color var(--t-fast);
}
.link-cta .icon { transition: transform var(--t-fast); }
.link-cta:hover { border-bottom-color: var(--ink); }
.link-cta:hover .icon { transform: translateX(3px); }
/* --------------------------------------------------- 05. CARDURI & LISTE */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: var(--card-pad);
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card--flat { box-shadow: none; }
.card__title {
font-size: 1.22rem;
margin-bottom: 0.6rem;
}
.card__title--row { display: flex; align-items: center; gap: 0.6rem; }
.card__title--row .icon { color: var(--ink-3); }
.card__text { color: var(--ink-2); }
.card__note {
margin-top: 0.9rem;
font-size: 0.85rem;
color: var(--ink-3);
}
.ticks { display: grid; gap: 0.55rem; margin-top: 1.2rem; }
.ticks li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 0.6rem;
align-items: start;
font-size: 0.96rem;
color: var(--ink-2);
}
.ticks .icon { color: var(--accent-700); margin-top: 4px; }
/* ------------------------------------ 06. HEADER, NAVIGAȚIE ȘI DRAWER */
.header {
position: sticky;
top: 0;
z-index: 90;
background: rgba(244, 245, 248, 0.88);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.header.is-scrolled {
background: rgba(255, 255, 255, 0.94);
border-bottom-color: var(--line);
box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
/* Sigla este pătrată; badge-ul rotund o decupează în cerc. Fundalul propriu
al siglei este pus și pe badge, ca marginile să se continue perfect și ca
locul să arate corect chiar dacă imaginea nu se încarcă. */
.brand__mark {
position: relative;
display: grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: var(--brand-bg);
flex: 0 0 auto;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.brand__mark--sm { width: 38px; height: 38px; }
.brand__mark--lg { width: 52px; height: 52px; }
.brand__logo {
width: 100%;
height: 100%;
object-fit: cover;
/* Sigla este un oval lat: o mărim puțin ca să umple cercul fără benzi goale. */
transform: scale(1.04);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.02rem;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand__tag {
font-family: var(--font-cond);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
.nav { display: none; }
.nav__link {
position: relative;
padding: 0.5rem 0.1rem;
font-weight: 500;
color: var(--ink-2);
transition: color var(--t-fast);
}
.nav__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t);
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }
.header__cta { display: none; }
.burger {
display: inline-grid;
place-items: center;
width: 46px; height: 46px;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: border-color var(--t-fast), background-color var(--t-fast);
}
.burger:hover { border-color: var(--ink); }
.burger__bars { display: grid; gap: 5px; width: 20px; }
.burger__bars span {
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform var(--t), opacity var(--t-fast);
}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer */
.drawer-overlay {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(15, 23, 42, 0.5);
opacity: 0;
transition: opacity var(--t);
}
.drawer-overlay.is-visible { opacity: 1; }
.drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
z-index: 100;
width: min(340px, 88vw);
display: flex;
flex-direction: column;
background: var(--surface);
box-shadow: -20px 0 45px rgba(15, 23, 42, 0.18);
transform: translateX(100%);
/* `visibility` scoate drawerul din ordinea de tabulare cât timp e închis,
inclusiv în browserele fără suport pentru atributul `inert`. */
visibility: hidden;
transition: transform var(--t), visibility 0s linear 0.28s;
padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open {
transform: translateX(0);
visibility: visible;
transition: transform var(--t), visibility 0s;
}
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.drawer__title {
flex: 1 1 auto; /* sigla rămâne la stânga, butonul de închidere la dreapta */
min-width: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
}
.drawer__close {
display: grid;
place-items: center;
width: 42px; height: 42px;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: border-color var(--t-fast);
}
.drawer__close:hover { border-color: var(--ink); }
.drawer__nav {
flex: 1 1 auto;
overflow-y: auto;
padding: 0.5rem 0.75rem;
}
.drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 0.75rem;
min-height: 52px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
border-bottom: 1px solid var(--line);
transition: background-color var(--t-fast);
}
.drawer__link:last-child { border-bottom: 0; }
.drawer__link .icon { color: var(--ink-4); }
.drawer__link:hover { background: var(--bg); }
.drawer__foot {
padding: 1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
display: grid;
gap: 0.85rem;
}
.drawer__phone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
font-weight: 600;
color: var(--ink-2);
}
/* ------------------------------------------ 07. HERO + ȘINA DE TRASEU */
.hero {
/* Ritmul comun al animaţiilor din hero. Şina şi eticheta pornesc în acelaşi
moment şi au aceeaşi durată, deci rămân sincronizate: când microbuzul
merge spre Londra se aprinde „Londra · UK", iar la întoarcere „Craiova · Dolj".
Creşte --rail-cycle dacă vrei mişcarea şi mai lentă. */
--rail-cycle: 10s;
--rail-start: 1.1s; /* porneşte după ce linia s-a desenat */
--rail-vehicle: 42px; /* diametrul badge-ului cu microbuz */
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: 560px;
min-height: clamp(540px, 88svh, 780px);
padding-block: clamp(3.5rem, 10vh, 6rem);
color: #fff;
overflow: hidden;
}
/*
Straturile se aplică în ordine: overlay -> fotografie (--hero-image) ->
fundal generat prin CSS. Dacă fotografia lipsește sau nu e setată,
fundalul CSS rămâne vizibil, așa că hero-ul arată corect și fără asset.
*/
.hero__media {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(102deg, rgba(11, 18, 32, 0.88) 0%, rgba(11, 18, 32, 0.74) 46%, rgba(11, 18, 32, 0.56) 100%),
var(--hero-image),
radial-gradient(120% 70% at 50% 118%, rgba(148, 163, 184, 0.38) 0%, rgba(148, 163, 184, 0) 62%),
radial-gradient(55% 45% at 76% 14%, rgba(251, 191, 36, 0.20) 0%, rgba(251, 191, 36, 0) 70%),
linear-gradient(180deg, #0B1220 0%, #16233C 52%, #24344F 100%);
background-size: cover, cover, cover, cover, cover;
background-position: center, var(--hero-image-pos), center, center, center;
background-repeat: no-repeat;
}
.hero__inner { position: relative; text-align: center; }
/* Eticheta de rută și badge-ul de program stau pe același rând cât încape. */
.hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-bottom: 1.35rem;
}
.hero__eyebrow {
position: relative;
overflow: hidden; /* ţine reflexia în interiorul pastilei */
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.45rem 1.05rem;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.11);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
font-family: var(--font-cond);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hero__eyebrow .icon { color: rgba(255, 255, 255, 0.75); }
/* Reflexia care traversează pastila o dată pe ciclu. */
.hero__eyebrow::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
105deg,
rgba(255, 255, 255, 0) 32%,
rgba(255, 255, 255, 0.32) 50%,
rgba(255, 255, 255, 0) 68%
);
transform: translateX(-150%);
}
.hero__eyebrow.is-revealed::after {
animation: eyebrow-shine var(--rail-cycle) ease-in-out var(--rail-start) infinite;
}
.hero__city { will-change: opacity; }
.hero__eyebrow.is-revealed .hero__city--from {
animation: city-pulse-from var(--rail-cycle) ease-in-out var(--rail-start) infinite;
}
.hero__eyebrow.is-revealed .hero__city--to {
animation: city-pulse-to var(--rail-cycle) ease-in-out var(--rail-start) infinite;
}
.hero__eyebrow.is-revealed .hero__eyebrow-swap {
animation: eyebrow-nudge var(--rail-cycle) ease-in-out var(--rail-start) infinite;
}
@keyframes eyebrow-shine {
0% { transform: translateX(-150%); }
22% { transform: translateX(150%); }
100% { transform: translateX(150%); }
}
/* Craiova e aprinsă cât microbuzul stă acasă, Londra cât e la capătul celălalt. */
@keyframes city-pulse-from {
0%, 8% { opacity: 1; }
42%, 58% { opacity: 0.6; }
92%, 100% { opacity: 1; }
}
@keyframes city-pulse-to {
0%, 8% { opacity: 0.6; }
42%, 58% { opacity: 1; }
92%, 100% { opacity: 0.6; }
}
@keyframes eyebrow-nudge {
0%, 8% { transform: translateX(-2px); }
42%, 58% { transform: translateX(2px); }
92%, 100% { transform: translateX(-2px); }
}
/* Fereastra de program care urmează. Singurul element cald din hero, ca ochiul
să meargă la el imediat după numele rutei. Textul vine din config.js. */
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.45rem 0.95rem 0.45rem 0.75rem;
border: 1px solid rgba(245, 158, 11, 0.5);
border-radius: var(--radius-pill);
background: rgba(245, 158, 11, 0.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
font-family: var(--font-cond);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #FFE2B3;
}
.hero__badge.is-live {
background: rgba(245, 158, 11, 0.28);
border-color: rgba(245, 158, 11, 0.85);
}
.hero__badge-dot {
flex: 0 0 auto;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--live);
animation: badge-pulse 2.6s ease-out infinite;
}
.hero__badge-when { color: #fff; letter-spacing: 0.08em; }
.hero__badge-when::before {
content: "·";
margin-right: 0.45rem;
opacity: 0.55;
}
@keyframes badge-pulse {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.hero__title {
font-size: clamp(2.2rem, 8vw, 4.4rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.02;
margin-bottom: 1rem;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__lead {
max-width: 640px;
margin: 0 auto 2rem;
font-size: clamp(1.05rem, 2.4vw, 1.32rem);
color: rgba(255, 255, 255, 0.9);
text-wrap: pretty;
}
.hero__actions {
display: grid;
gap: 0.85rem;
max-width: 420px;
margin: 0 auto;
}
.hero__note {
margin-top: 0.9rem;
font-family: var(--font-cond);
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
/* Element-semnătură: șina Craiova ↔ Londra */
.rail {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 2.75rem;
font-family: var(--font-cond);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.rail__stop {
position: relative;
padding-left: 1rem;
white-space: nowrap;
}
.rail__stop::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 9px; height: 9px;
margin-top: -4.5px;
border-radius: 50%;
background: currentColor;
}
/* Linia propriu-zisă stă într-un pseudo-element, ca animația de desenare
să nu deformeze vehiculul poziționat pe ea. */
.rail__line {
position: relative;
flex: 1 1 auto;
min-width: 40px;
height: 2px;
}
.rail__line::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 2px;
margin-top: -1px;
background: currentColor;
opacity: 0.45;
transform-origin: left;
}
.rail--hero .rail__line {
height: var(--rail-vehicle);
min-width: calc(var(--rail-vehicle) * 2);
}
/* Şina de rulare: are exact lăţimea liniei, deci translateX(100% - badge)
duce microbuzul fix până la capătul din dreapta, la orice lăţime de ecran. */
.rail__track {
position: absolute;
inset: 0;
pointer-events: none;
will-change: transform;
}
.rail__vehicle {
position: absolute;
top: 50%;
left: 0;
/* Aceeaşi listă de funcţii ca în @keyframes rail-turn, ca browserul să
interpoleze unghiul, nu matricea. */
transform: perspective(220px) translateY(-50%) rotateY(0deg);
display: grid;
place-items: center;
width: var(--rail-vehicle, 42px);
height: var(--rail-vehicle, 42px);
border-radius: 50%;
background: var(--deep);
border: 2px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.rail__vehicle .icon {
width: 60%;
height: 60%;
}
.rail--hero.is-revealed .rail__track {
animation: rail-travel var(--rail-cycle) cubic-bezier(0.45, 0.05, 0.55, 0.95)
var(--rail-start) infinite;
}
.rail--hero.is-revealed .rail__vehicle {
animation: rail-turn var(--rail-cycle) linear var(--rail-start) infinite;
}
/* Dus-întors, cu câte o oprire scurtă în fiecare capăt. */
@keyframes rail-travel {
0%, 6% { transform: translateX(0); }
44%, 56% { transform: translateX(calc(100% - var(--rail-vehicle))); }
94%, 100% { transform: translateX(0); }
}
/* Microbuzul se întoarce cu faţa în direcţia de mers, exact în opriri.
Rotaţia pe Y, nu scaleX: interpolarea unui scaleX de la 1 la -1 trece prin
zero, matricea devine degenerată şi browserul umflă elementul la mijlocul
întoarcerii. Unghiul se interpolează curat şi arată ca o întoarcere reală. */
@keyframes rail-turn {
0%, 46% { transform: perspective(220px) translateY(-50%) rotateY(0deg); }
54%, 96% { transform: perspective(220px) translateY(-50%) rotateY(180deg); }
100% { transform: perspective(220px) translateY(-50%) rotateY(360deg); }
}
/* Când hero-ul iese din ecran, animaţiile se pun pe pauză — nu consumă
baterie degeaba pe telefon. Clasa e pusă din script.js; dacă lipseşte,
animaţiile rulează normal. */
.hero.is-out-of-view .rail__track,
.hero.is-out-of-view .rail__vehicle,
.hero.is-out-of-view .hero__eyebrow::after,
.hero.is-out-of-view .hero__city,
.hero.is-out-of-view .hero__eyebrow-swap,
.hero.is-out-of-view .hero__badge-dot { animation-play-state: paused; }
.rail--hero { color: rgba(255, 255, 255, 0.85); }
.rail--dark { color: rgba(255, 255, 255, 0.6); margin-top: 0; margin-bottom: 2rem; }
/* -------------------------------------------------------- 08. BENEFICII */
.trust { padding-block: clamp(2rem, 5vw, 3rem); }
.trust__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.trust__item {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.1rem 1rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
font-size: 0.94rem;
font-weight: 500;
line-height: 1.35;
color: var(--ink-2);
transition: box-shadow var(--t), transform var(--t);
}
.trust__item .icon { color: var(--ink); }
.trust__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* ------------------------------------------------------- 09. DESPRE NOI */
.about { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.about p { color: var(--ink-2); }
.about__list { display: grid; gap: 1rem; }
.about__list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 0.9rem;
align-items: start;
padding: 1rem;
background: var(--bg);
border-radius: var(--radius);
border: 1px solid var(--line);
}
.about__list .icon {
width: 24px; height: 24px;
color: var(--ink);
margin-top: 2px;
justify-self: center;
}
.about__list div { display: flex; flex-direction: column; }
.about__list strong { font-family: var(--font-display); font-size: 1.02rem; }
.about__list span { color: var(--ink-2); font-size: 0.94rem; line-height: 1.5; }
/* --------------------------------------------------------- 10. SERVICII */
.service {
display: flex;
flex-direction: column;
overflow: hidden; /* fotografia se opreşte exact la colţurile cardului */
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* Fotografia iese din padding-ul cardului, până la margini. Raportul fix
păstrează toate cardurile aliniate, indiferent de dimensiunea pozei. */
.service__media {
position: relative;
margin: calc(var(--card-pad) * -1);
margin-bottom: 1.35rem;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bg);
}
.service__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.45s var(--ease);
}
.service:hover .service__media img { transform: scale(1.04); }
/* Umbră discretă în partea de jos, ca badge-ul cu iconiţă să rămână lizibil
peste orice fotografie, deschisă sau întunecată. */
.service__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 48%;
background: linear-gradient(to top, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0));
pointer-events: none;
}
.service__icon {
position: absolute;
left: 0.9rem;
bottom: 0.9rem;
z-index: 1;
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--ink);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
}
/* ------------------------------------------------- 11. PACHETUL TĂU */
.steps {
position: relative;
display: grid;
gap: 1.75rem;
padding-left: 3.25rem;
}
/* linia de traseu care leagă cei 4 pași */
.steps::before {
content: "";
position: absolute;
left: 21px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(180deg, var(--line-2), var(--line));
}
.step { position: relative; }
.step__node {
position: absolute;
left: -3.25rem;
top: -2px;
display: grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--ink);
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
}
.step__title { font-size: 1.2rem; margin-bottom: 0.3rem; }
.step__text { color: var(--ink-2); margin: 0; }
/* ------------------------------------------------------- 12. CALCULATOR */
.calc { padding: clamp(1.25rem, 3vw, 2.25rem); }
.calc__form { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.calc__label {
display: block;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.stepper {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem;
border: 1px solid var(--line-2);
border-radius: var(--radius);
background: var(--bg);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.stepper:focus-within {
border-color: var(--ink);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08);
}
.stepper.is-invalid { border-color: #C2410C; }
.stepper__btn {
display: grid;
place-items: center;
width: 48px; height: 48px;
flex: 0 0 auto;
border: 1px solid var(--line-2);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: border-color var(--t-fast), background-color var(--t-fast);
}
.stepper__btn:hover { border-color: var(--ink); }
.stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper__input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: clamp(1.5rem, 5vw, 1.9rem);
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink);
text-align: center;
padding: 0;
}
.stepper__input:focus { outline: none; }
.stepper__unit {
font-family: var(--font-cond);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
padding-right: 0.35rem;
}
.calc__range {
width: 100%;
margin-top: 1.1rem;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: var(--line-2);
}
.calc__range::-moz-range-track {
height: 6px;
border-radius: 3px;
background: var(--line-2);
}
.calc__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px; height: 26px;
margin-top: -10px;
border-radius: 50%;
background: var(--ink);
border: 3px solid var(--surface);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.calc__range::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--ink);
border: 3px solid var(--surface);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.calc__help {
margin-top: 0.7rem;
font-size: 0.85rem;
color: var(--ink-3);
}
.calc__msg {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.7rem;
padding: 0.6rem 0.8rem;
border-radius: 10px;
background: #FEF3E7;
border: 1px solid #F7C89B;
color: #9A3412;
font-size: 0.9rem;
font-weight: 500;
}
.calc__facts {
display: grid;
gap: 0.5rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.calc__facts li {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.94rem;
color: var(--ink-3);
}
.calc__facts strong {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.calc__result { display: grid; gap: 1rem; align-content: start; }
.price {
padding: clamp(1.25rem, 3vw, 1.75rem);
border-radius: var(--radius);
background: var(--ink);
color: #fff;
text-align: center;
}
.price__label {
font-family: var(--font-cond);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 0.35rem;
}
.price__value {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
margin: 0 0 0.6rem;
font-family: var(--font-display);
font-size: clamp(2.6rem, 11vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.price__currency {
font-family: var(--font-cond);
font-size: clamp(1rem, 3vw, 1.25rem);
font-weight: 600;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.7);
}
.price__breakdown {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.calc__disclaimer {
display: flex;
gap: 0.55rem;
align-items: flex-start;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink-3);
margin: 0;
}
.calc__disclaimer .icon { color: var(--ink-4); margin-top: 2px; }
/* -------------------------------------------------------- 13. MICRO-CTA */
.microcta { padding-bottom: var(--section-y); }
.microcta__inner {
display: grid;
gap: 1.5rem;
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.microcta__title { font-size: clamp(1.35rem, 3.5vw, 1.85rem); margin-bottom: 0.4rem; }
.microcta__text { color: var(--ink-2); margin: 0; }
/* ------------------------------------ 14. PROGRAM SĂPTĂMÂNAL & FLOTĂ */
/* Aceeași șină ca în hero, dar stațiile sunt zile, nu orașe: săptămâna unui
colet, în ordinea în care se petrece. Pasul care urmează e marcat cald. */
.plan {
position: relative;
display: grid;
gap: 1.25rem;
margin: 0;
padding: 0 0 0 3.5rem;
list-style: none;
}
.plan::before {
content: "";
position: absolute;
left: 23px;
top: 24px;
bottom: 24px;
width: 2px;
background: linear-gradient(180deg, var(--route-2), var(--line));
}
.plan__item { position: relative; }
.plan__marker {
position: absolute;
left: -3.5rem;
top: 0;
z-index: 1;
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--route-2);
color: var(--route);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}
.plan__item.is-next .plan__marker {
background: var(--route);
border-color: var(--route);
color: #fff;
}
.plan__card {
height: 100%;
padding: var(--card-pad);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.plan__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.plan__item.is-next .plan__card {
border-color: rgba(245, 158, 11, 0.55);
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.13);
}
.plan__eyebrow {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.55rem;
font-family: var(--font-cond);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.plan__flag {
padding: 0.15rem 0.55rem;
border-radius: var(--radius-pill);
background: var(--live-soft);
color: var(--live-ink);
letter-spacing: 0.1em;
}
.plan__every {
display: block;
font-family: var(--font-cond);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-4);
}
.plan__day {
margin: 0 0 0.3rem;
font-family: var(--font-display);
font-size: clamp(1.55rem, 4.2vw, 2rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.08;
}
.plan__title {
font-size: 1.06rem;
margin: 0 0 0.75rem;
color: var(--route);
}
.plan__hours {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.85rem;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--route-soft);
color: var(--route);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.plan__hours .icon { color: var(--route-2); }
.plan__text { margin: 0; color: var(--ink-2); font-size: 0.96rem; }
.plan__addr {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 1rem 0 0;
padding-top: 0.85rem;
border-top: 1px dashed var(--line-2);
font-size: 0.88rem;
color: var(--ink-3);
}
.plan__addr .icon { flex: 0 0 auto; margin-top: 2px; color: var(--ink-4); }
.plan__note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
font-size: 0.9rem;
color: var(--ink-3);
}
.plan__note .icon { flex: 0 0 auto; margin-top: 3px; color: var(--ink-4); }
/* ----------------------------------------------------------------- FLOTĂ */
.fleet {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.6rem, 1.5vw, 1rem);
}
.fleet__item {
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--deep);
box-shadow: var(--shadow);
}
.fleet__item--wide { grid-column: span 2; }
.fleet__item img {
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.fleet__item:hover img { transform: scale(1.05); }
.fleet__item figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 1.9rem 0.9rem 0.75rem;
background: linear-gradient(to top, rgba(11, 18, 32, 0.85), rgba(11, 18, 32, 0));
color: #fff;
font-family: var(--font-cond);
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------------------------------------------------------- 15. DE CE NOI */
.why:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.why__icon {
display: grid;
place-items: center;
width: 50px; height: 50px;
margin-bottom: 1rem;
border-radius: var(--radius);
background: var(--ink);
color: #fff;
}
/* --------------------------------------------------------------- 16. FAQ */
.faq {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__h { margin: 0; font-size: inherit; letter-spacing: normal; }
.faq__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 60px;
padding: 1.1rem 1.15rem;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.35;
transition: background-color var(--t-fast);
}
.faq__btn:hover { background: rgba(15, 23, 42, 0.035); }
.faq__chevron {
color: var(--ink-3);
transition: transform var(--t);
flex: 0 0 auto;
}
.faq__btn[aria-expanded="true"] { background: var(--surface); }
.faq__btn[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__panel {
padding: 0 1.15rem 1.25rem;
background: var(--surface);
color: var(--ink-2);
font-size: 0.98rem;
}
.faq__panel a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.faq__panel a:hover { border-bottom-color: var(--ink); }
.faq__panel strong { color: var(--ink); }
/* ------------------------------------------------- 17. CONTACT & HARTĂ */
.contact { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.contact__list { display: grid; gap: 1rem; margin: 1.75rem 0; }
.contact__item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 0.9rem;
align-items: start;
padding: 1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.contact__icon {
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 10px;
background: var(--bg);
color: var(--ink);
}
.contact__label {
font-family: var(--font-cond);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 0.15rem;
}
.contact__value { margin: 0; font-weight: 500; line-height: 1.5; }
.contact__hint { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--ink-3); }
/* Programul de la contact vine din aceleași date ca secțiunea „Program". */
.hours__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.1rem 0.5rem;
margin: 0 0 0.35rem;
}
.hours__row:last-child { margin-bottom: 0; }
.hours__row strong { min-width: 4.2rem; }
.hours__time { font-variant-numeric: tabular-nums; }
.hours__what {
flex-basis: 100%;
font-family: var(--font-cond);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Zonă de atingere generoasă pe mobil: linkurile de contact sunt printre
cele mai apăsate elemente ale paginii. */
.contact__link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 600;
box-shadow: inset 0 -1px 0 var(--line-2);
transition: box-shadow var(--t-fast);
}
.contact__link:hover { box-shadow: inset 0 -2px 0 var(--ink); }
.contact__map { display: flex; flex-direction: column; gap: 0.75rem; }
.map__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
align-self: flex-start;
min-height: 40px;
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-2);
transition: color var(--t-fast);
}
.map__link:hover { color: var(--ink); }
.map__link .icon { color: var(--ink-4); }
.map {
position: relative;
flex: 1 1 auto;
height: 340px;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.map iframe { width: 100%; height: 100%; }
.map__placeholder {
display: grid;
place-content: center;
justify-items: center;
gap: 0.6rem;
height: 100%;
padding: 1.5rem;
text-align: center;
background:
repeating-linear-gradient(45deg, #EDF0F5 0 12px, #F4F5F8 12px 24px);
color: var(--ink-3);
}
.map__placeholder .icon { width: 34px; height: 34px; color: var(--ink-4); }
.map__placeholder strong { font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; }
.map__placeholder span { font-size: 0.88rem; max-width: 34ch; line-height: 1.5; }
.map__placeholder code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 6px;
padding: 0.15rem 0.4rem;
color: var(--ink);
}
/* ---------------------------------------------------------- 18. CTA FINAL */
.finalcta {
background: var(--deep);
color: #fff;
padding-block: clamp(3rem, 8vw, 5.5rem);
}
.finalcta__inner { max-width: 700px; text-align: center; }
.finalcta__inner .rail { justify-content: center; }
.finalcta__title {
font-size: clamp(1.65rem, 5vw, 2.6rem);
font-weight: 800;
margin-bottom: 0.85rem;
text-wrap: balance;
}
.finalcta__text {
color: rgba(255, 255, 255, 0.75);
font-size: clamp(1rem, 2vw, 1.12rem);
margin-bottom: 2rem;
}
/* ------------------------------------------------------------ 19. FOOTER */
/* Footer pe fundal închis, cu contrast ridicat. Tot ce e mai jos își ia
culorile din tokenurile locale de aici, nu din :root — restul paginii
rămâne pe fundal deschis, iar footerul se poate schimba dintr-un loc. */
.footer {
--f-bg: #0F172A; /* fundalul închis cerut */
--f-bg-2: #16233C; /* cardurile și pastilele din interior */
--f-text: #E2E8F0; /* textul curent */
--f-title: #FFFFFF; /* titlurile de coloană, BOLD */
--f-muted: #94A3B8; /* etichete, adrese, rânduri secundare */
--f-line: rgba(226, 232, 240, 0.14);
--f-line-2: rgba(226, 232, 240, 0.28);
--f-accent: var(--accent);
position: relative;
background: var(--f-bg);
color: var(--f-text);
border-top: 0;
padding-top: clamp(3.25rem, 7vw, 5rem);
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
font-size: 1rem;
}
/* Ruta, redusă la o linie: albastrul de România trece în verdele de UK.
Singurul ornament din footer — restul rămâne tipografie și spațiu. */
.footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--route-2), #3E8FB0 45%, var(--accent) 100%);
}
.footer__grid {
display: grid;
gap: clamp(2.25rem, 5vw, 3.25rem);
padding-bottom: clamp(2.25rem, 5vw, 3rem);
}
.footer .brand--footer { color: var(--f-title); }
.footer .brand__name { color: var(--f-title); }
.footer .brand__tag { color: var(--f-muted); }
.footer__about {
margin-top: 1.15rem;
color: var(--f-text);
font-size: 1rem;
line-height: 1.65;
max-width: 44ch;
}
/* Telefonul și WhatsApp-ul, ca pastile — se apasă ușor pe telefon. */
.footer__contact {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.5rem;
}
.footer__contact-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 48px;
padding: 0.6rem 1.05rem;
border: 1px solid var(--f-line-2);
border-radius: var(--radius-pill);
background: var(--f-bg-2);
color: var(--f-title);
font-weight: 600;
font-size: 0.98rem;
transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.footer__contact-link:hover {
border-color: var(--f-accent);
background: rgba(37, 211, 102, 0.12);
transform: translateY(-1px);
}
.footer__contact-link .icon { color: var(--f-accent); flex: 0 0 auto; }
.footer__contact-link--wa .icon { fill: currentColor; }
/* Datele de identificare ale firmei, sub descriere. */
.footer__legal {
margin: 1.75rem 0 0;
display: grid;
gap: 0.55rem;
font-size: 0.95rem;
}
.footer__legal-row { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; }
.footer__legal dt {
flex: 0 0 5.6rem;
font-family: var(--font-cond);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--f-muted);
padding-top: 0.15rem;
}
.footer__legal dd { margin: 0; color: var(--f-text); }
/* Singura valoare pe care se poate da click din blocul de date legale. */
.footer__legal-link {
color: var(--f-text);
text-decoration: underline;
text-decoration-color: var(--f-muted);
text-underline-offset: 3px;
word-break: break-word;
transition: color var(--t-fast);
}
.footer__legal-link:hover { color: var(--f-accent); text-decoration-color: currentColor; }
.footer__legal-link:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.footer__col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__title {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--f-title);
margin: 0 0 1rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--f-line);
}
.footer__col a,
.footer__col > span,
.footer__linklike {
color: var(--f-text);
font-size: 1rem;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color var(--t-fast);
}
.footer__linklike {
border: 0;
background: none;
padding: 0;
font-family: inherit;
font-weight: inherit;
text-align: left;
cursor: pointer;
}
.footer__col a:hover,
.footer__linklike:hover { color: var(--f-accent); }
.footer__col a:focus-visible,
.footer__linklike:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
/* --------------------------------- Coloana 2: săptămâna unui colet */
/* Trei opriri pe un traseu, în ordinea în care se petrec — de aceea este
o listă numerotată și de aceea punctele sunt legate printr-o linie. */
.footer-plan {
list-style: none;
margin: 0;
padding: 0 0 0 1.5rem;
display: grid;
gap: 1.35rem;
position: relative;
}
.footer-plan::before {
content: "";
position: absolute;
left: 5px;
top: 0.6rem;
bottom: 0.6rem;
width: 2px;
background: linear-gradient(180deg, var(--route-2), var(--accent));
opacity: 0.55;
}
.footer-plan__step {
position: relative;
display: grid;
gap: 0.15rem;
}
.footer-plan__step::before {
content: "";
position: absolute;
left: -1.5rem;
top: 0.5rem;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--f-bg);
border: 2px solid var(--accent);
}
.footer-plan__day {
font-family: var(--font-cond);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.footer-plan__what {
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 700;
color: var(--f-title);
}
.footer-plan__where { font-size: 0.92rem; color: var(--f-muted); }
.footer__more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1.35rem;
min-height: 44px;
font-weight: 600;
color: var(--f-accent);
transition: gap var(--t-fast);
}
.footer__more:hover { gap: 0.75rem; }
.footer__more:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
/* Badge-urile ANPC. Specificitatea include .footer__col ca să bată regula
generică `.footer__col a` de mai sus, altfel s-ar întoarce la stilul de link. */
/* Grilă, nu flex: badge-urile primesc aceeași lățime, iar subtitlul lung
nu mai iese din chenar pe coloane înguste. */
.anpc { display: grid; gap: 0.6rem; margin-top: 1.35rem; }
.footer__col .anpc__badge {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 0.55rem;
min-height: 52px;
padding: 0.5rem 0.85rem;
border: 1px solid var(--f-line-2);
border-radius: 12px;
background: var(--f-bg-2);
color: var(--f-text);
transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.footer__col .anpc__badge:hover {
border-color: var(--f-accent);
background: rgba(37, 211, 102, 0.12);
color: var(--f-title);
}
.anpc__badge .icon { flex: 0 0 auto; color: var(--f-accent); }
.anpc__mark {
font-family: var(--font-display);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--f-title);
}
.anpc__label {
display: flex;
flex-direction: column;
font-family: var(--font-cond);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.15;
color: var(--f-text);
}
.anpc__label small {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
color: var(--f-muted);
}
/* ------------------------------------------- Rândul de link-uri rapide */
.footer__quick {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.5rem;
padding-top: clamp(1.5rem, 4vw, 2rem);
padding-bottom: clamp(1.25rem, 3vw, 1.5rem);
border-top: 1px solid var(--f-line);
}
.footer__quick a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0.35rem 0.9rem;
border-radius: var(--radius-pill);
background: rgba(226, 232, 240, 0.06);
color: var(--f-muted);
font-family: var(--font-cond);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background-color var(--t-fast), color var(--t-fast);
}
.footer__quick a:hover { background: rgba(37, 211, 102, 0.16); color: var(--f-title); }
.footer__quick a:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
/* ----------------------------------- Banda de copyright & credit autor */
.footer__bottom {
padding-top: clamp(1.25rem, 3vw, 1.75rem);
border-top: 1px solid var(--f-line);
display: grid;
gap: 0.85rem;
font-size: 0.95rem;
color: var(--f-muted);
}
.footer__bottom p { margin: 0; }
.footer__copy { color: var(--f-text); }
.footer__bottom-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.footer__bottom-links a {
display: inline-flex;
align-items: center;
min-height: 40px;
color: var(--f-muted);
transition: color var(--t-fast);
}
.footer__bottom-links a:hover { color: var(--f-accent); }
.footer__credit { color: var(--f-muted); }
.footer__credit a,
.footer__credit-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 700;
color: var(--f-title);
box-shadow: inset 0 -1px 0 var(--f-line-2);
transition: color var(--t-fast), box-shadow var(--t-fast);
}
.footer__credit a:hover,
.footer__credit-link:hover {
color: var(--f-accent);
box-shadow: inset 0 -2px 0 var(--f-accent);
}
.footer__credit .icon { color: var(--f-accent); }
.footer__credit a:focus-visible,
.footer__credit-link:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
/* Pe paginile legale footerul e doar banda de jos: îi dăm aer, ca să nu
pară o dungă lipită de conținut. */
.legal-page .footer { padding-top: clamp(2rem, 5vw, 2.75rem); }
.legal-page .footer__bottom { border-top: 0; padding-top: 0; }
/* ------------------------------------------ 20. BUTON FLOTANT & MESAJE */
.fab {
position: fixed;
right: var(--fab-gap);
bottom: var(--fab-bottom);
z-index: 80;
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: var(--fab-size);
padding: 0 1.1rem;
border-radius: var(--radius-pill);
background: var(--accent);
color: #04240F;
font-weight: 700;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
transition: transform var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.fab .icon { fill: currentColor; }
.fab:hover { background: var(--accent-600); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.32); }
.fab:active { transform: translateY(0); }
.fab__label { display: none; }
.toasts {
position: fixed;
left: 50%;
bottom: calc(1.25rem + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 120;
display: grid;
gap: 0.5rem;
width: min(440px, calc(100vw - 2rem));
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.85rem 1rem;
border-radius: var(--radius);
background: var(--ink);
color: #fff;
font-size: 0.93rem;
line-height: 1.45;
box-shadow: var(--shadow-lift);
opacity: 0;
transform: translateY(10px);
transition: opacity var(--t), transform var(--t);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast .icon { color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.toast--warn { background: #7C2D12; }
/* ------------------------------------------------- 21. ANIMAȚII INTRARE */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal-delay="3"] { transition-delay: 0.21s; }
[data-reveal-delay="4"] { transition-delay: 0.28s; }
/* Șina de traseu se desenează o singură dată, la încărcare */
.rail--hero.is-revealed .rail__line::before { animation: rail-draw 0.9s var(--ease) 0.15s both; }
@keyframes rail-draw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* --------------------------------------- 22. BREAKPOINTS & PREFERINȚE */
/* ≥ 900px — poza mare din hero.
Sub acest prag rămâne varianta @800 setată în :root. Pragul trebuie să fie
IDENTIC cu cel din index.html , de la ; altfel browserul
descarcă un fișier și afișează altul, adică plătește ambele poze. */
@media (min-width: 900px) {
:root { --hero-image: url("img/l1.jpg"); }
}
/* ≥ 560px — telefoane mari / tablete mici */
@media (min-width: 560px) {
.hero__actions { grid-template-columns: repeat(2, auto); justify-content: center; max-width: none; }
.trust__grid { grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 1.1rem 1rem; }
.fab__label { display: inline; }
.footer__bottom { grid-template-columns: 1fr; }
}
/* ≥ 768px — tablete */
@media (min-width: 768px) {
:root { --header-h: 74px; }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.microcta__inner {
grid-template-columns: 1fr auto;
align-items: center;
gap: 2rem;
}
.contact { grid-template-columns: 1fr 1fr; align-items: stretch; }
.map { height: auto; min-height: 460px; }
.fleet { grid-template-columns: repeat(4, 1fr); }
.footer__grid { grid-template-columns: repeat(2, 1fr); }
.footer__brand { grid-column: 1 / -1; }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 2rem;
}
.footer__credit { margin-left: auto; text-align: right; }
}
/* ≥ 1024px — desktop */
@media (min-width: 1024px) {
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
.header__cta { display: inline-flex; }
.burger { display: none; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.hero { min-height: clamp(620px, 90svh, 820px); text-align: left; }
.hero__inner { text-align: left; max-width: 900px; }
.hero__meta { justify-content: flex-start; }
.hero__lead { margin-inline: 0; }
.hero__actions { justify-content: flex-start; }
.rail--hero { max-width: 560px; }
.about { grid-template-columns: 1.05fr 1fr; align-items: start; }
/* Pașii trec de pe șina verticală pe cea orizontală, cu 4 stații */
.steps {
grid-template-columns: repeat(4, 1fr);
column-gap: 2rem;
padding-left: 0;
padding-top: 3.75rem;
}
.steps::before {
left: 22px; right: 22px; top: 21px;
bottom: auto; width: auto; height: 2px;
background: linear-gradient(90deg, var(--line-2), var(--line));
}
.step__node { left: 0; top: -3.75rem; }
.calc__form { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.calc__result { position: sticky; top: calc(var(--header-h) + 1.5rem); }
/* Programul trece de pe șina verticală pe cea orizontală, cu 3 stații */
.plan {
--plan-gap: clamp(1rem, 2.2vw, 1.75rem);
grid-template-columns: repeat(3, 1fr);
column-gap: var(--plan-gap);
padding-left: 0;
padding-top: 4.5rem;
}
/* Linia se opreste exact in centrul ultimului marcaj: saptămâna are trei
stații, nu se continuă la nesfârșit. Marcajul are 48px, deci jumătate = 24px. */
.plan::before {
left: 24px;
right: calc((100% - 2 * var(--plan-gap)) / 3 - 24px);
top: 23px;
bottom: auto; width: auto; height: 2px;
background: linear-gradient(90deg, var(--route-2), var(--route-2) 55%, var(--line-2));
}
.plan__marker { left: 0; top: -4.5rem; }
.footer__grid { grid-template-columns: 1.45fr 1fr 1.05fr; }
.footer__brand { grid-column: auto; }
}
/* ≥ 1280px — desktop mare */
@media (min-width: 1280px) {
:root { --maxw: 1220px; }
.hero__title { letter-spacing: -0.04em; }
}
/* Telefoane — badge-ul de pe şină se micşorează ca să rămână drum de parcurs */
@media (max-width: 559px) {
.hero { --rail-vehicle: 34px; }
}
/* Ecrane foarte înguste (320px) — evităm orice depășire pe orizontală */
@media (max-width: 359px) {
:root { --gutter: 1rem; }
.hero { --rail-vehicle: 30px; }
.trust__grid { grid-template-columns: 1fr; }
.brand__tag { display: none; }
.rail { font-size: 0.78rem; letter-spacing: 0.12em; gap: 0.5rem; }
.hero__eyebrow { gap: 0.5rem; padding-inline: 0.85rem; font-size: 0.82rem; letter-spacing: 0.12em; }
.hero__badge { padding-inline: 0.75rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.fleet { grid-template-columns: 1fr; }
.fleet__item--wide { grid-column: auto; }
.fab { min-height: 52px; padding: 0 0.9rem; }
}
/* Ecrane joase în landscape — hero-ul nu trebuie să blocheze pagina */
@media (max-height: 520px) and (orientation: landscape) {
.hero { min-height: auto; padding-block: 3.5rem; }
.rail--hero { display: none; }
}
/* Respectăm preferința pentru mișcare redusă */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
.drawer { transition: none; }
/* Şina şi eticheta rămân în starea finală, fără nicio mişcare:
microbuzul se aşază la mijlocul liniei, ambele oraşe sunt lizibile. */
.rail--hero.is-revealed .rail__track {
animation: none;
transform: translateX(calc(50% - var(--rail-vehicle) / 2));
}
.rail--hero.is-revealed .rail__vehicle { animation: none; }
.hero__eyebrow::after { display: none; }
.hero__eyebrow.is-revealed .hero__city--from,
.hero__eyebrow.is-revealed .hero__city--to {
animation: none;
opacity: 1;
}
.hero__eyebrow.is-revealed .hero__eyebrow-swap {
animation: none;
transform: none;
}
.hero__badge-dot { animation: none; }
}
/* Print */
@media print {
.header, .drawer, .drawer-overlay, .fab, .toasts, .hero__media,
.cookie-fab, .backtotop, .cookie-banner, .cookie-modal,
.cookie-modal-overlay { display: none !important; }
body { background: #fff; }
.card { box-shadow: none; border-color: #ccc; }
}
/* -------------------------------------------------- 23. PAGINI LEGALE */
/* Politica de confidențialitate, termenii și politica de cookie folosesc
aceleași tokenuri ca pagina principală, dar un layout de document: o
singură coloană, măsură scurtă, fără fotografii. */
.legal-page { background: var(--surface); }
.legal-hero {
background: var(--deep);
color: #fff;
padding-block: clamp(2.75rem, 7vw, 4.5rem);
}
.legal-hero__eyebrow {
font-family: var(--font-cond);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 0.6rem;
}
.legal-hero__title {
font-size: clamp(1.9rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
}
.legal-hero__updated {
margin: 1rem 0 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.65);
}
.legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal__body { max-width: 72ch; }
.legal__body > *:first-child { margin-top: 0; }
.legal__body h2 {
margin: clamp(2rem, 4vw, 2.75rem) 0 0.75rem;
font-size: clamp(1.2rem, 3vw, 1.5rem);
}
.legal__body h3 { margin: 1.6rem 0 0.5rem; font-size: 1.05rem; }
.legal__body p { margin: 0 0 0.9rem; color: var(--ink-2); }
.legal__body ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.legal__body li { color: var(--ink-2); }
.legal__body strong { color: var(--ink); }
.legal__body a {
font-weight: 600;
color: var(--ink);
box-shadow: inset 0 -1px 0 var(--line-2);
transition: box-shadow var(--t-fast);
}
.legal__body a:hover { box-shadow: inset 0 -2px 0 var(--ink); }
.legal__card {
margin: 1.5rem 0 0;
padding: clamp(1.1rem, 3vw, 1.5rem);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.legal__card dl { margin: 0; display: grid; gap: 0.4rem; }
.legal__card div { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; }
.legal__card dt {
flex: 0 0 6.5rem;
font-family: var(--font-cond);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
padding-top: 0.12rem;
}
.legal__card dd { margin: 0; color: var(--ink-2); }
.legal__nav {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: clamp(2.25rem, 5vw, 3rem);
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
/* --------------------------------------- 24. COOKIE-URI & ÎNAPOI SUS */
/* Consimțământul e singura parte a site-ului care apare peste tot conținutul,
așa că are propriile tokenuri: se schimbă dintr-un singur loc și nu ating
restul paginii. Paleta e a site-ului — hârtie albă, cerneală închisă — cu
albastrul din siglă drept accent. Verdele rămâne al WhatsApp-ului:
consimțământul nu are legătură cu el, deci nu îi împrumută nici culoarea. */
.cookie-banner,
.cookie-modal,
.cookie-fab,
.backtotop {
--c-surface: var(--surface);
--c-raise: #F8FAFC; /* fundal discret pentru bara de acțiuni */
--c-title: var(--ink);
--c-text: var(--ink-2);
--c-muted: var(--ink-3);
--c-line: var(--line);
--c-line-strong: var(--line-2);
--c-brand: var(--route); /* albastrul din siglă */
--c-brand-soft: rgba(30, 78, 107, 0.10);
--c-util: 46px; /* diametrul pastilelor din stânga */
--c-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ------------------------------------------ Coloana din colțul din stânga */
/* Butonul „sus" și insigna de cookie-uri sunt o singură coloană de pastile
albe, în stânga. Verdele de WhatsApp rămâne singur în dreapta: două colțuri,
două intenții — contactul într-o parte, uneltele paginii în cealaltă. */
.cookie-fab,
.backtotop {
position: fixed;
left: var(--fab-gap);
display: grid;
place-items: center;
width: var(--c-util);
height: var(--c-util);
padding: 0;
border: 1px solid var(--c-line-strong);
border-radius: 50%;
background: var(--c-surface);
color: var(--c-title);
cursor: pointer;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
transition: transform var(--t-fast), border-color var(--t-fast),
color var(--t-fast), box-shadow var(--t-fast), opacity var(--t);
}
.cookie-fab .icon,
.backtotop .icon { width: 21px; height: 21px; }
.cookie-fab:hover,
.backtotop:hover {
border-color: var(--c-brand);
color: var(--c-brand);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}
.cookie-fab:focus-visible,
.backtotop:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
/* Insigna stă ascunsă cât timp bannerul e pe ecran — a cere aceeași decizie
în două locuri deodată e zgomot. Apare abia după prima alegere, ca omul să
poată reveni oricând asupra ei. */
.cookie-fab { bottom: var(--fab-bottom); z-index: 998; display: none; }
.cookie-fab.is-visible { display: grid; }
.cookie-fab:hover { transform: translateY(-2px); }
/* -------------------------------------------------------- Buton „sus" */
/* Deasupra insignei, în aceeași coloană. Cât timp insigna nu e pe ecran
(înainte de prima alegere) coboară pe locul ei, ca să nu rămână suspendat
în gol. Browserele fără :has păstrează poziția de sus — corectă oricum. */
.backtotop {
bottom: calc(var(--fab-bottom) + var(--c-util) + 0.6rem);
z-index: 999;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
body:not(:has(.cookie-fab.is-visible)) .backtotop { bottom: var(--fab-bottom); }
.backtotop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.backtotop.is-visible:hover { transform: translateY(-2px); }
.backtotop .icon { transform: rotate(180deg); }
/* Cât timp bannerul cere o decizie, celelalte butoane plutitoare se retrag:
bannerul are lățimea conținutului, așa că ar trece peste ele. Revin
amândouă imediat ce alegerea a fost făcută. */
body:has(.cookie-banner.is-visible) .backtotop,
body:has(.cookie-banner.is-visible) .fab {
opacity: 0;
pointer-events: none;
}
body:has(.cookie-banner.is-visible) .fab { transition: opacity var(--t); }
/* ------------------------------------------------------- Banner inițial */
.cookie-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 1000;
display: flex;
justify-content: center;
/* Fixat la marginea de jos, fără scurgere: pe un ecran scund (telefon mic,
landscape, zoom mare) bannerul devine el însuși derulabil, ca butonul
„Acceptă toate" să rămână mereu accesibil. */
max-height: 100vh;
overflow-y: auto;
padding: 1rem clamp(0.9rem, 3vw, 1.5rem) calc(1rem + env(safe-area-inset-bottom));
transform: translateY(115%);
transition: transform 0.55s var(--c-ease);
}
.cookie-banner.is-visible { transform: none; }
.cookie-banner__card {
position: relative;
width: 100%;
max-width: var(--maxw);
display: grid;
gap: 1.15rem;
padding: clamp(1.25rem, 3vw, 1.6rem) clamp(1.25rem, 3vw, 1.75rem);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius-lg);
box-shadow: 0 -2px 40px rgba(15, 23, 42, 0.10), 0 20px 50px rgba(15, 23, 42, 0.14);
color: var(--c-text);
}
/* Firul de traseu din hero, reluat pe muchia de sus: bannerul aparține
site-ului, nu e o casetă străină lipită peste el. */
.cookie-banner__card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(90deg, var(--c-brand) 0%, var(--route-2) 100%);
}
.cookie-banner__intro { display: flex; align-items: flex-start; gap: 0.9rem; }
.cookie-banner__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 42px; height: 42px;
border-radius: 11px;
background: var(--c-brand-soft);
color: var(--c-brand);
}
.cookie-banner__title {
margin: 0 0 0.3rem;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: var(--c-title);
}
.cookie-banner__text {
margin: 0;
max-width: 68ch;
font-size: 0.94rem;
line-height: 1.6;
color: var(--c-text);
}
.cookie-banner__text strong { color: var(--c-title); }
.cookie-banner__text a {
font-weight: 600;
color: var(--c-title);
box-shadow: inset 0 -1px 0 var(--c-line-strong);
}
.cookie-banner__text a:hover { color: var(--c-brand); box-shadow: inset 0 -2px 0 var(--c-brand); }
/* Pe telefon butoanele stau unul sub altul, iar `column-reverse` urcă
„Acceptă toate" primul — cel mai scurt drum pentru cei mai mulți — fără să
schimbe ordinea din DOM, care rămâne cea de citit: refuz, detaliu, da. */
.cookie-banner__actions {
display: flex;
flex-direction: column-reverse;
gap: 0.5rem;
}
/* ------------------------------------------ Butoanele de consimțământ */
/* Greutatea vizuală spune adevărul despre ce se întâmplă la apăsare: plin =
accepți tot, contur = alegi altceva. Refuzul are aceeași mărime și același
contur ca „Personalizează", ca alegerea să rămână liberă, nu sugerată. */
.cookie-btn {
min-height: 46px;
padding-inline: 1.15rem;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 600;
}
.cookie-btn--accept {
background: var(--c-title);
border-color: var(--c-title);
color: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.cookie-btn--accept:hover {
background: var(--deep-2);
border-color: var(--deep-2);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
}
.cookie-btn--outline {
background: var(--c-surface);
border-color: var(--c-line-strong);
color: var(--c-title);
}
.cookie-btn--outline:hover { border-color: var(--c-brand); color: var(--c-brand); }
/* A treia cale („Personalizează"), vizual sub cele două răspunsuri directe.
Nu folosi stilul ăsta pentru „Refuză": refuzul trebuie să arate exact ca
acceptul, altfel bannerul devine un tipar de tip „dark pattern". */
.cookie-btn--ghost {
background: none;
border-color: transparent;
color: var(--c-text);
box-shadow: none;
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-btn--ghost:hover { color: var(--c-brand); background: none; border-color: transparent; }
.cookie-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
/* ---------------------------------------------------- Modal de preferințe */
.cookie-modal-overlay {
position: fixed;
inset: 0;
z-index: 1001;
background: rgba(15, 23, 42, 0.45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity var(--t);
}
.cookie-modal-overlay.is-visible { opacity: 1; }
.cookie-modal {
position: fixed;
z-index: 1002;
left: 50%;
top: 50%;
width: min(620px, calc(100vw - 2rem));
max-height: min(720px, calc(100vh - 2rem));
display: flex;
flex-direction: column;
overflow: hidden; /* firul de traseu urmează colțurile */
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--radius-lg);
box-shadow: 0 30px 70px rgba(15, 23, 42, 0.24);
color: var(--c-text);
opacity: 0;
transform: translate(-50%, -46%) scale(0.97);
pointer-events: none;
transition: opacity var(--t), transform 0.45s var(--c-ease);
}
.cookie-modal.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.cookie-modal::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--c-brand) 0%, var(--route-2) 100%);
}
.cookie-modal__head {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.6rem 1.6rem 1.15rem;
border-bottom: 1px solid var(--c-line);
}
.cookie-modal__title {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-size: 1.28rem;
color: var(--c-title);
}
.cookie-modal__lead { margin: 0; font-size: 0.92rem; color: var(--c-muted); line-height: 1.6; }
.cookie-modal__close {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px; height: 36px;
border: 1px solid var(--c-line);
border-radius: 50%;
background: var(--c-surface);
color: var(--c-muted);
cursor: pointer;
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cookie-modal__close:hover { background: var(--c-raise); color: var(--c-title); border-color: var(--c-line-strong); }
.cookie-modal__close:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.cookie-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Categoriile sunt rânduri despărțite de o linie, nu carduri: modalul se
citește ca o listă de setări, care e exact ce este. Comutatorul stă primul,
ca starea „pornit/oprit" să se vadă înainte de a citi numele. */
.cookie-cat {
display: flex;
align-items: flex-start;
gap: 0.95rem;
padding: 1.15rem 1.6rem;
border-top: 1px solid var(--c-line);
}
.cookie-cat:first-child { border-top: 0; }
.cookie-cat__body { min-width: 0; }
.cookie-cat__name {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--c-title);
}
.cookie-cat__badge {
padding: 0.16rem 0.5rem;
border-radius: var(--radius-pill);
background: var(--c-brand-soft);
font-family: var(--font-cond);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-brand);
}
.cookie-cat__text {
margin: 0.45rem 0 0;
font-size: 0.9rem;
line-height: 1.6;
color: var(--c-muted);
}
/* Comutator — mai limpede decât un checkbox simplu pentru „pornit/oprit",
dar rămâne un pe dedesubt, pentru accesibilitate
și pentru ca starea să funcționeze fără JavaScript suplimentar. */
.switch {
position: relative;
flex: 0 0 auto;
display: inline-block;
width: 46px; height: 26px;
margin-top: 0.15rem;
}
.switch input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.switch__track {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: var(--radius-pill);
background: #E2E8F0;
border: 1px solid var(--c-line-strong);
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.switch__track::before {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.30);
transition: transform var(--t-fast);
}
.switch input:checked ~ .switch__track {
background: var(--route-2);
border-color: var(--route-2);
}
.switch input:checked ~ .switch__track::before { transform: translateX(20px); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled ~ .switch__track {
background: var(--c-line-strong);
border-color: var(--c-line-strong);
}
.switch input:disabled ~ .switch__track::before { box-shadow: none; }
.switch input:focus-visible ~ .switch__track { outline: 2px solid var(--c-brand); outline-offset: 3px; }
/* Bara de acțiuni: `column-reverse` urcă „Salvează preferințele" primul pe
telefon, cu aceeași logică din banner. */
.cookie-modal__foot {
flex: 0 0 auto;
display: flex;
flex-direction: column-reverse;
gap: 0.55rem;
padding: 1.1rem 1.6rem calc(1.25rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--c-line);
background: var(--c-raise);
}
/* Placeholderul care apare în locul hărții cât timp categoria
„Funcționalități & Modul hartă" nu este acceptată. */
.map__consent {
display: grid;
place-content: center;
justify-items: center;
gap: 0.6rem;
height: 100%;
padding: 1.5rem;
text-align: center;
background: var(--bg);
color: var(--ink-3);
}
.map__consent .icon { width: 30px; height: 30px; color: var(--ink-4); }
.map__consent strong { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.map__consent span { font-size: 0.88rem; max-width: 34ch; line-height: 1.5; }
/* ≥ 560px — butoanele modalului stau pe un rând, aliniate la dreapta */
@media (min-width: 560px) {
.cookie-modal__foot { flex-direction: row; justify-content: flex-end; }
.cookie-modal__foot .cookie-btn { min-width: 175px; }
}
/* ≥ 900px — bannerul își pune textul și butoanele pe același rând */
@media (min-width: 900px) {
.cookie-banner__card {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2rem;
}
.cookie-banner__actions { flex-direction: row; align-items: center; }
.cookie-btn { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
.cookie-banner, .cookie-modal-overlay, .cookie-modal,
.backtotop, .cookie-fab, .cookie-btn,
.switch__track, .switch__track::before {
transition: none;
}
.cookie-fab:hover, .backtotop.is-visible:hover { transform: none; }
}