:root{ --navH:82px; }
/* compensează navbarul fix */
body{ padding-top: var(--navH); }
/* -------------------- NAVBAR -------------------- */
#topNav{
position:fixed; top:0; left:0; right:0; height:var(--navH);
background:transparent; box-shadow:none; z-index:1030;
transition:background .25s ease, box-shadow .25s ease, color .25s ease;
backdrop-filter:none;
}
.nav-grid.container{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; height:100%; }
.nav-center{ justify-self:center; }
.nav-right{ justify-self:end; }
#topNav.navbar-transparent .navbar-brand,
#topNav.navbar-transparent .nav-link,
#topNav.navbar-transparent .btn-link{ color:#0f172a !important; opacity:.96; }
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
#topNav.navbar-solid{
background:#fff !important; box-shadow:0 10px 30px rgba(16,24,40,.08);
}
#topNav.navbar-solid .navbar-brand,
#topNav.navbar-solid .nav-link,
#topNav.navbar-solid .btn-link{ color:#0f172a !important; opacity:.9; }
#topNav:hover{ background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.08); }
#topNav:hover .navbar-brand, #topNav:hover .nav-link, #topNav:hover .btn-link{ color:#0f172a !important; }
.navbar-brand{ font-weight:800; letter-spacing:.2px; font-size:1.45rem; }
.nav-link{ font-weight:700;font-size:1.05rem; }
.nav-item .dropdown-toggle::after{ display:none }
/* ===== NAVBAR LOGO ===== */
.nav-logo {
height: 34px;
width: auto;
transition: opacity 0.3s ease, filter 0.3s ease;
}
/* Logo alb (pe fundal transparent) */
#topNav.navbar-transparent .nav-logo {
content: url("../img/vp_logo_dark.png");
filter: brightness(1);
}
/* Logo negru (după scroll sau hover) */
#topNav.navbar-solid .nav-logo,
#topNav:hover .nav-logo {
content: url("../img/vp_logo_dark.png");
filter: brightness(0.95);
}
/* ===== NAVBAR LOGO DIMENSIONS ===== */
.nav-logo {
height: 50px; /* mic și echilibrat — poți ajusta între 36–48px */
width: auto;
max-height: 52px; /* previne să se extindă prea mult */
object-fit: contain;
transition: all 0.3s ease;
}
/* ===== MEGA MENU bandă crem, full-width, colțuri jos ===== */
.dropdown-mega{ position:static; }
.dropdown-menu.mega{
width:100% !important;
left:0 !important; right:0 !important; top:100% !important;
margin-top:0 !important; padding:24px 0 !important;
background:#DEE3E3 !important;
border:0 !important;
box-shadow:none !important;
opacity:0; transform:none;
transition:opacity .18s ease, visibility .18s ease;
}
/* anulează transformările Popper */
.dropdown-menu.mega[data-bs-popper]{
left:0 !important; right:0 !important; top:100% !important; transform:none !important;
}
/* arată mega-ul la hover pe desktop */
@media (min-width: 992px){
.dropdown-hover:hover > .dropdown-menu.mega{ opacity:1; visibility:visible; }
.dropdown-menu.mega .col-lg-8 .col-md-4{ padding-inline:18px; }
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
.mega-title{ font-size:1.05rem; color:#0f172a; font-weight:800; margin-bottom:.75rem; }
.mega-note{ color:#6b7280; }
.mega-link{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0; color:#0f172a; text-decoration:none; font-weight:700; }
.mega-link i{ font-size:1.1rem; color:#64748b; }
.mega-link .sub{ font-weight:600; color:#64748b; margin-left:.25rem; }
.promo{ display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem; height:100%; }
.promo img{ width:120px; height:90px; object-fit:cover; border-radius:10px; }
.promo h6{ margin:0 0 .25rem; font-weight:800; }
.promo p{ margin:0; color:#6b7280; }
/* ====== Card mare din stânga ====== */
/* Opportunities */
.opp-left-card{
display:flex; align-items:center; gap:24px;
background:transparent; border:1px solid transparent;
padding:24px 28px; /* padding fix (același și pe hover) */
box-shadow:none;
transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.opp-left-card .opp-img{
flex:0 0 auto;
width:220px; aspect-ratio: 4 / 3; /* stabil, în loc de height fix */
object-fit:cover;
transition:transform .25s;
}
.opp-left-card h5{
margin:0 0 .4rem; font-weight:800; color:#0f172a; font-size:1.35rem;
}
.opp-left-card p{
margin:0; color:#6b7280; font-size:1rem; line-height:1.55;
}
.opp-left-card:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 12px 20px rgba(2,6,23,.08), 0 34px 80px rgba(2,6,23,.16);
transform:translateY(-4px);
}
.opp-left-card:hover .opp-img{ transform:scale(1.04); }
/* ====== Carduri mici ====== */
.opp-mini-card{
display:flex; align-items:center; gap:14px;
background:transparent; border:1px solid transparent;
padding:16px 18px; /* padding fix */
transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.opp-mini-card img{
flex:0 0 auto;
width:88px; aspect-ratio: 4 / 3; /* stabil */
object-fit:cover;
transition:transform .25s;
}
.opp-mini-card h6{
margin:0 0 .2rem; font-weight:700; font-size:1.05rem; color:#0f172a;
}
.opp-mini-card p{
margin:0; color:#6b7280; font-size:.95rem; line-height:1.45;
}
.opp-mini-card:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 10px 18px rgba(2,6,23,.08), 0 28px 70px rgba(2,6,23,.14);
transform:translateY(-3px);
}
.opp-mini-card:hover img{ transform:scale(1.04); }
/* ====== Titlu secțiune ====== */
.mega-section-title{
font-size:.85rem; font-weight:700; color:#94a3b8;
text-transform:uppercase; letter-spacing:.05em;
margin-bottom:1rem;
}
/* ===== Buy mega: 3 columns look, icons & spacing ===== */
/* ===== Coloane din stânga (tipografie + icon chips) ===== */
.mega-heading{
font-size:1.15rem; font-weight:800; color:#0f172a; margin-bottom:1rem;font-family: var(--font-sans);
}
.mega-item{
display:flex; align-items:center; gap:.7rem;
padding:.35rem .45rem;
color:#0f172a; text-decoration:none; font-weight:600; /* titlul mai greu */
border-radius:12px;
transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
font-family: var(--font-sans);
}
.mega-item i{
width:36px; height:36px; display:inline-grid; place-items:center;
border-radius:10px; background:#e9eef5; color:#2f3a4a; font-size:1.1rem;
}
.mega-item .sub{ margin-left:.3rem; font-weight:600; color:#8a97ad; } /* "en venta" / "for sale" */
.mega-item:hover{
background:#fff; transform:translateX(2px);
box-shadow:0 10px 22px rgba(2,6,23,.05);
}
/* spațiere egală între cele 3 coloane pe desktop */
@media (min-width: 992px){
.dropdown-menu.mega .col-lg-8 .col-md-4{ padding-inline:18px; }
}
/* ===== Buy mega: big promo cards on the right ===== */
/* Buy */
.mega-heading{ font-size:1.15rem; font-weight:800; color:#0f172a; margin-bottom:1rem; }
.mega-item{ display:flex; align-items:center; gap:.7rem; padding:.35rem .45rem; color:#0f172a; text-decoration:none; font-weight:800; border-radius:0px; transition:background .18s, transform .18s, box-shadow .18s; }
.mega-item i{ width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; background:#eef2f6; color:#334155; font-size:1.1rem; }
.mega-item .sub{ margin-left:.3rem; font-weight:600; color:#8a97ad; }
.mega-item:hover{ background:#fff; transform:translateX(2px); box-shadow:0 10px 22px rgba(2,6,23,.05); }
/* Buy – promo cards */
.promo-card-lg{ display:flex; align-items:center; gap:20px; background:transparent; border:0; box-shadow:none; padding:0; transition:all .25s; }
.pc-img-wrap{ flex:0 0 auto; width:100px; height:80px; border-radius:10px; overflow:hidden; }
.promo-card-lg img{ width:100%; height:100%; object-fit:cover; transition:transform .22s; }
.pc-title{ margin:0 0 .25rem; font-weight:800; color:#0f172a; font-size:1.25rem; }
.pc-text{ margin:0; color:#6b7280; line-height:1.55; font-size:1rem; }
.promo-card-lg:hover{ background:#fff; padding:20px 24px; border:1px solid #e5e7eb; box-shadow:0 10px 20px rgba(2,6,23,.08),0 30px 80px rgba(2,6,23,.16); transform:translateY(-4px); }
.promo-card-lg:hover img{ transform:scale(1.04); }
/* ușor mai compact pe desktop mare */
@media (min-width: 992px){
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
/* ===== Services: HERO card ===== */
/* ==== Glass card variant (left) ==== */
/* ===== Services – Premium left card ===== */
/* ===== Services: HERO card ===== */
/* ==== Glass card variant (left) ==== */
/* ===== Services: HERO card — Premium Glass (LEFT) ===== */
/* CARD */
.svc-card{
position:relative; isolation:isolate;
padding:22px 24px 20px;
border-radius:18px;
border:1px solid rgba(225,232,245,.9);
background:
radial-gradient(1400px 600px at -10% -40%, rgba(255,255,255,.85), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.66)),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(15,23,42,.03) 18px 19px);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 12px 20px rgba(2,6,23,.06),
0 44px 120px rgba(2,6,23,.18);
overflow:hidden;
will-change: transform, box-shadow;
}
/* scoatem linia portocalie de sus */
.svc-card::after{ content:none; }
/* highlight premium sus (gloss discret) */
.svc-card::before{
content:"";
position:absolute; left:18px; right:18px; top:8px; height:42px;
border-radius:999px;
background: radial-gradient(120% 100% at 50% 0%,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,0) 70%);
pointer-events:none;
}
/* HEAD */
.svc-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:.35rem; }
.svc-badge{
width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
background:linear-gradient(180deg,#eef3f8,#e7edf6);
color:#334155; font-size:1.25rem;
box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(2,6,23,.08);
}
.svc-eyebrow{
display:inline-flex; align-items:center; gap:.35rem;
padding:.28rem .6rem; border-radius:999px;
background:#f5f7fb; border:1px solid #e6ebf2;
color:#0f172a; font-weight:800; font-size:.86rem;
}
/* TYPO */
.svc-title{
margin:.25rem 0 .2rem; font-weight:900;
font-size:1.75rem; letter-spacing:.1px; color:#0f172a;
}
.svc-sub{ margin:0 0 .9rem; color:#7b8aa6; font-size:1.02rem; line-height:1.6; }
/* INPUT + CTA ancorat (fără salt pe hover) */
.svc-input-row{
display:flex; align-items:center; gap:.6rem;
background:#fff;
border:1px solid #e6ebf2;
border-radius:999px;
padding:.6rem .7rem;
box-shadow:0 8px 22px rgba(2,6,23,.06);
}
.svc-input-row i{ color:#64748b; font-size:1rem; }
.svc-input-row input{
flex:1; border:0; outline:0; background:transparent;
font-size:1rem; color:#0f172a; min-width:0;
}
/* CTA negru — glass premium */
.svc-cta{
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
padding:.66rem 1.05rem;
white-space:nowrap;
font-weight:900;
color:#fff;
background: rgba(0,0,0,.55);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
box-shadow:
0 12px 24px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(0,0,0,.38);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.svc-cta:hover{
transform:translateY(-1px);
background: rgba(0,0,0,.7);
box-shadow: 0 18px 36px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.22);
}
.svc-cta:active{ transform:translateY(0); }
/* FOOT */
.svc-foot{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem; }
.svc-hint{ color:#0f172a; font-weight:700; opacity:.85; }
.svc-dot{ width:4px; height:4px; border-radius:999px; background:#cbd5e1; display:inline-block; }
/* ===== Tiles din dreapta — păstrăm efectul premium coerent ===== */
.svc-tile{
display:flex; gap:14px; align-items:flex-start;
box-sizing:border-box;
padding:14px 16px;
border:1px solid transparent;
background:transparent;
box-shadow:none;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
will-change: transform, box-shadow;
}
.svc-tile-icon{
flex:0 0 auto; width:46px; height:46px; border-radius:12px;
display:grid; place-items:center;
background:linear-gradient(180deg,#eef2f6,#e8edf5);
color:#334155; font-size:1.2rem; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(2,6,23,.06);
}
.svc-tile-title{ margin:0 0 .15rem; font-weight:800; color:#0f172a; font-size:1.05rem; }
.svc-tile-text{ margin:0; color:#6b7280; line-height:1.5; font-size:.97rem; }
.svc-tile .chip{
display:inline-flex; align-items:center; padding:.28rem .5rem;
background:#fff; border:1px solid #e5e7eb; border-radius:999px; font-weight:700; font-size:.82rem; color:#0f172a;
}
.svc-tile:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:0 12px 20px rgba(2,6,23,.08), 0 34px 80px rgba(2,6,23,.14);
transform:translateY(-3px);
}
/* QUICK LINKS */
.svc-quick{ display:flex; gap:.6rem; flex-wrap:wrap; }
.svc-quick-link{
display:inline-flex; align-items:center; gap:.35rem;
padding:.46rem .68rem; border-radius:999px;
background:#fff; border:1px solid #e5e7eb; color:#0f172a; text-decoration:none; font-weight:700; font-size:.9rem;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
will-change: transform, box-shadow;
}
.svc-quick-link:hover{
transform:translateY(-2px);
border-color:#e2e8f0;
box-shadow:0 8px 16px rgba(2,6,23,.08);
}
/* spacing în mega */
@media (min-width:992px){
.dropdown-menu.mega .col-lg-7{ padding-right:18px; }
.dropdown-menu.mega .col-lg-5{ padding-left:18px; }
}
/* ============ SERVICES (mega menu) – CLEAN ============ */
/* ===== Left promo card (re-use opp-left-card) ===== */
.opp-left-card--svc{
padding:22px 24px;
border-radius:0; /* colțuri drepte */
border:1px solid transparent; /* pt. hover subtle */
background:transparent;
transition:transform .22s, box-shadow .22s, border-color .22s, background .22s;
}
.opp-left-card--svc .opp-img{
width:200px;
aspect-ratio:4/3;
border-radius:12px;
}
.opp-left-card--svc:hover{
background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
border-color:#e6ebf2;
box-shadow:0 14px 24px rgba(2,6,23,.08), 0 60px 140px rgba(2,6,23,.18);
}
/* Stack left spacing */
.svc-left{ display:flex; flex-direction:column; }
.svc-left .opp-left-card--svc{ margin-bottom:.6rem; }
/* ===== Quick pills (sub cardul din stânga) – MARI + CONTUR NEGRU ===== */
.svc-quick--under{
display:flex; gap:.8rem; flex-wrap:wrap;
}
.svc-quick-link{
display:inline-flex; align-items:center; gap:.5rem;
padding:.66rem 1.05rem; /* mai mare */
border-radius:999px;
font-weight:900; font-size:1rem;
line-height:1;
text-decoration:none;
transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.svc-quick-link--outline-black{
color:#0b1220;
background:rgba(255,255,255,.92);
border:1.6px solid rgba(0,0,0,.85); /* contur negru elegant */
box-shadow:
0 6px 14px rgba(0,0,0,.08),
inset 0 0 0 .6px rgba(255,255,255,.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.svc-quick-link--outline-black:hover{
transform:translateY(-2px);
background:rgba(255,255,255,1);
border-color:#000;
box-shadow:0 10px 22px rgba(0,0,0,.12);
}
/* ===== RIGHT SERVICE CARDS (tile-urile din dreapta) ===== */
.svc-tile{
position:relative;
display:flex;
align-items:flex-start;
gap:18px;
padding:14px 20px;
border:1.5px solid rgba(0,0,0,.85); /* contur negru rafinat */
border-radius:10px;
/* „alb” mai transparent (glass) */
background:
linear-gradient(180deg, rgba(255,255,255,.80), rgba(245,245,245,.72));
box-shadow:
0 8px 18px rgba(0,0,0,.08),
inset 0 0 0 .8px rgba(255,255,255,.4);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svc-tile:hover{
transform:translateY(-3px);
box-shadow:0 16px 28px rgba(0,0,0,.15), 0 60px 120px rgba(0,0,0,.18);
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,245,245,.84));
}
/* Icon container – relief discret */
.svc-tile-icon{
width:48px; height:48px;
display:grid; place-items:center;
border:1.4px solid rgba(0,0,0,.85);
border-radius:12px;
background:linear-gradient(145deg, #ffffff, #e6e9ef);
color:#111;
font-size:1.15rem;
box-shadow:
0 2px 5px rgba(0,0,0,.12),
inset 0 0 0 .6px rgba(255,255,255,.5);
transition:transform .25s ease;
}
.svc-tile:hover .svc-tile-icon{ transform:scale(1.07) rotate(-2deg); }
/* Tipografie în carduri */
.svc-tile-title{
font-weight:900;
font-size:1.06rem;
color:#0f172a;
letter-spacing:.2px;
margin-bottom:.25rem;
}
.svc-tile-text{
color:#444;
font-size:.95rem;
line-height:1.5;
font-weight:500;
}
/* Chips / tag-uri din carduri */
.svc-tile .chip{
background:rgba(255,255,255,.96);
border:1.3px solid rgba(0,0,0,.78);
border-radius:999px;
font-weight:800;
font-size:.82rem;
text-transform:uppercase;
padding:.24rem .55rem;
box-shadow:
0 2px 5px rgba(0,0,0,.1),
inset 0 0 0 .6px rgba(255,255,255,.45);
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s;
}
.svc-tile .chip:hover{
background:#0f172a;
color:#fff;
border-color:#0f172a;
transform:translateY(-2px);
}
/* ===== “Popular tools” – heading ===== */
.svc-section-label{
font-family:var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial);
font-weight:900;
font-size:.78rem;
letter-spacing:.14em;
text-transform:uppercase;
color:#0f172a;
opacity:.9;
display:flex; align-items:center; gap:.65rem;
margin:2px 0 12px;
transition:opacity .25s ease, letter-spacing .25s ease;
}
.svc-section-label::after{
content:"";
flex:1; height:1px; background:#0f172a; opacity:.15;
}
.svc-section-label:hover{ opacity:1; letter-spacing:.18em; }
/* ===== Accessibility: reduce motion ===== */
@media (prefers-reduced-motion: reduce){
.svc-section-label,
.svc-quick-link,
.svc-tile,
.svc-tile-icon{ transition:none !important; }
}
/* ===== Responsive ===== */
@media (max-width: 991.98px){
.opp-left-card--svc .opp-img{ width:150px; }
.svc-quick--under{ gap:.7rem; }
.svc-quick-link{ padding:.62rem .95rem; font-size:.98rem; }
.svc-tile{
padding:12px 16px;
border-radius:16px;
background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,245,245,.78));
backdrop-filter: blur(8px);
}
.svc-tile-icon{ width:44px; height:44px; font-size:1.05rem; }
}
/* ===== Quick pills – Premium black outline version ===== */
.svc-quick--under {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.svc-quick-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1.3rem; /* mai mare, premium feel */
border-radius: 999px; /* complet rotund */
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
color: #0f172a;
background: rgba(255, 255, 255, 0.92);
border: 1.8px solid #000; /* contur negru clar */
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.08),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.svc-quick-link:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 1);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.12),
0 0 0 1px #000;
}
.svc-quick-link i {
font-size: 1.1rem;
line-height: 1;
color: #0f172a;
}
/* Responsive pills */
@media (max-width: 991.98px) {
.svc-quick-link {
padding: 0.65rem 1.1rem;
font-size: 1rem;
}
}
/* ===== Quick pills (sub cardul din stânga) – Black Outline Premium ===== */
.svc-quick--under {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.svc-quick-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1.3rem; /* proporții mai mari, look premium */
border-radius: 999px;
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
color: #0f172a;
background: rgba(255, 255, 255, 0.9);
border: 1.8px solid #000; /* contur negru clar */
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.08),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
/* === Hover – se inversează, la fel ca Enterprise === */
.svc-quick-link:hover {
transform: translateY(-2px);
background: #0f172a; /* negru elegant */
color: #fff; /* text alb la hover */
border-color: #0f172a;
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.svc-quick-link i {
font-size: 1.1rem;
line-height: 1;
color: inherit; /* urmează culoarea textului */
transition: color 0.22s ease;
}
/* ===== Responsive ===== */
@media (max-width: 991.98px) {
.svc-quick-link {
padding: 0.65rem 1.1rem;
font-size: 1rem;
}
}
/* ===== Enterprise – feature cards ===== */
.ent-feature{
position:relative;
display:flex;
gap:18px;
align-items:center;
padding:18px;
background:transparent;
border:1px solid transparent;
transition:all .25s ease;
}
.ent-media{
flex:0 0 210px;
height:150px;
border-radius:10px;
overflow:hidden;
border:2px solid rgba(0,0,0,.9); /* contur negru tip “ramă” */
background:#fff;
box-shadow:
0 2px 4px rgba(0,0,0,.08),
inset 0 0 0 1px rgba(255,255,255,.6); /* efect de profunzime subtil */
transition:transform .25s ease, box-shadow .25s ease;
}
.ent-media img{
width:100%; height:100%; object-fit:cover;
transform:scale(1.0);
transition:transform .25s ease, filter .25s ease;
border-radius:10px; /* ușor rotunjit în interiorul ramei */
}
.ent-body{ min-width:0; }
.ent-title{
position:relative;
margin:2px 0 10px;
font-weight:900;
font-size:1.45rem;
color:#0f172a;
display:inline-block;
}
/* Linie subțire neagră elegantă sub titlu */
.ent-title::after{
content:"";
display:block;
width:100%;
height:1.5px;
background:#000;
opacity:0.7;
margin-top:6px;
border-radius:2px;
}
.ent-text{
margin:0;
color:#7b8aa6;
line-height:1.6;
font-size:.98rem;
}
.ent-meta{
display:flex;
gap:.5rem;
flex-wrap:wrap;
margin-top:.65rem;
}
.ent-chip{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.34rem .6rem;
border-radius:999px;
background:#f7f9fc;
border:1px solid #e5e7eb;
color:#0f172a;
font-weight:700;
font-size:.9rem;
}
/* === Hover state === */
.ent-feature:hover{
background:#fff;
border-color:#e5e7eb;
box-shadow:
0 12px 22px rgba(2,6,23,.08),
0 42px 110px rgba(2,6,23,.16);
transform:translateY(-3px);
}
.ent-feature:hover .ent-media{
box-shadow:
0 4px 8px rgba(0,0,0,.15),
inset 0 0 0 1px rgba(255,255,255,.5);
transform:scale(1.02);
}
.ent-feature:hover .ent-media img{
transform:scale(1.04);
filter:brightness(1.03);
}
/* Varianta revers (imagine în dreapta) */
.ent-feature--reverse{
flex-direction:row-reverse;
}
/* Responsive */
@media (max-width: 991.98px){
.ent-feature{
flex-direction:column;
align-items:flex-start;
}
.ent-media{
width:100%;
height:180px;
}
}
/* ===== Elegant black-outline pills (meta chips) ===== */
.ent-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9); /* alb ușor transparent */
border: 1.6px solid rgba(0, 0, 0, 0.9); /* contur negru clar */
color: #0f172a;
font-weight: 800;
font-size: 0.93rem;
text-decoration: none;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.06),
inset 0 0 0 0.6px rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ent-chip:hover {
transform: translateY(-2px);
background: #0f172a;
color: #fff;
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.12);
}
.ent-chip i {
font-size: 1rem;
line-height: 1;
}
/* ===== MOBILE FULLSCREEN OFFCANVAS — fără JS ===== */
@media (max-width: 991.98px){
/* 1) Panoul devine full-screen */
#topNav.navbar{
--nav-h: 60px;
--panel-w: 100vw;
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
}
#topNav .navbar-collapse{
position: fixed;
inset: 0; /* ocupă tot ecranul */
right: -100%;
left: auto;
width: var(--panel-w);
height: 100dvh; /* sigur pe iOS/Android */
background: var(--bg);
border-radius: 0;
box-shadow: none;
transition: right .35s ease;
padding: var(--nav-h) 16px 16px;
overflow-y: auto; /* derulare DOAR în panou */
z-index: 1040;
border: 0;
}
#topNav .navbar-collapse.show{ right: 0; }
/* 2) Blochează scrollul paginii când panoul e deschis (browsere moderne) */
body:has(#topNav .navbar-collapse.show){ overflow: hidden; }
/* 3) Mega-menourile pe mobil: fără limite de înălțime, fără fade/transform */
#topNav .dropdown-menu{
position: static !important;
float: none;
margin: 0;
border: 0;
box-shadow: none;
background: var(--bg);
padding: 0;
max-height: none; /* IMPORTANT: nu mai tăiem conținutul */
opacity: 1;
transform: none !important;
overflow: visible;
}
/* 4) Varianta mega: ocupă toată lățimea panoului și spațiere corectă */
#topNav .dropdown-menu.mega{
width: 100% !important;
left: 0 !important; right: 0 !important; top: auto !important;
padding: 12px 0 !important;
background: #f6f8fb !important; /* sau #fff dacă preferi */
}
/* 5) Carduri/elemente interne — compacte, dar complete vizibile */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature,
#topNav .dropdown-menu .svc-card,
#topNav .dropdown-menu .svc-tile{
background: var(--card);
border: 1px solid var(--divider);
border-radius: 14px;
margin-bottom: 12px;
}
/* 6) Listă principală: linkuri ca „rânduri” și iconițe aliniate */
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem; padding:.9rem .25rem;
font-weight:700; color:var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* 7) Butoanele din dreapta — full width în panou */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* 8) Mini-thumbs & text în mega — fără tăiere */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px; flex-shrink:0;
}
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
}
/* ===== DESKTOP: păstrează comportamentul tău la hover ===== */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Fix: toggler corect poziționat și funcțional, doar din CSS ===== */
@media (max-width: 991.98px){
/* (A) Comportament implicit (MENIU ÎNCHIS):
păstrăm poziția ta inițială în header */
#topNav .navbar-toggler{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
box-shadow: none !important;
z-index: 1031; /* deasupra headerului, dar sub panou când se deschide */
padding: 8px; /* hit area mai mare */
}
/* (B) Când MENIUL E DESCHIS:
toggler devine FIX în colțul de sus, deasupra panoului (clickabil) */
#topNav:has(.navbar-collapse.show) .navbar-toggler{
position: fixed;
right: calc(12px + env(safe-area-inset-right));
top: calc(12px + env(safe-area-inset-top));
transform: none;
z-index: 1055; /* > 1040 cât are panoul */
}
/* Spațiu extra sus în panou ca să nu stea sub toggler */
#topNav .navbar-collapse.show{
padding-top: max(72px, calc(56px + env(safe-area-inset-top)));
}
/* Burger → “X” când meniul e deschis (fără JS) */
#topNav .navbar-toggler .navbar-toggler-icon{
width: 28px; height: 22px; position: relative;
background-image: none;
}
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; top:50%;
background: black; transform-origin:center; transition:transform .2s ease, opacity .2s ease;
}
/* linii inițiale (burger) */
#topNav .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-7px) rotate(0deg); /* linia de sus */
}
#topNav .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(5px) rotate(0deg); /* linia de jos */
}
/* în stare DESCHIS → X */
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-50%) rotate(45deg);
}
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(-50%) rotate(-45deg);
}
/* Dacă panoul are backdrop cu ::before, nu bloca togglerul */
#topNav .navbar-collapse.show::before{ z-index: -1; }
}
/* Opțional: dacă headerul e transparent și vrei ca liniile burgerului să fie închise la culoare
și în starea transparentă, păstrează regula ta existentă:
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
*/
@media (max-width: 991.98px){
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
background: black !important; /* negru intens */
}
}
/* ===== Bottom actions în panoul mobil (fără JS) ===== */
@media (max-width: 991.98px){
/* containerul de butoane din panou */
#topNav .navbar-collapse .nav-right-clone{
position: sticky; /* rămâne lipit jos cât derulezi panoul */
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px;
margin-top: 12px;
/* fundal separat + „elevare” */
background:
linear-gradient(to top, rgba(251,251,253,1), rgba(251,251,253,.96) 48%, rgba(251,251,253,.85) 80%, rgba(251,251,253,0));
border-top: 1px solid var(--divider);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1; /* peste conținutul panoului */
}
/* butoanele */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* spațiu safe-area pe iOS */
#topNav .navbar-collapse .nav-right-clone{
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* ascunde acțiunile din dreapta pe mobil (rămân pe desktop) */
#topNav .nav-right{ display: none !important; }
}
/* Desktop: ascunde varianta „clone” */
@media (min-width: 992px){
#topNav .navbar-collapse .nav-right-clone{ display: none !important; }
}
/* === Premium pill-style buttons în panoul mobil === */
@media (max-width: 991.98px){
#topNav .navbar-collapse .nav-right-clone .btn{
border-radius: 999px !important;
padding: .9rem 1.4rem !important;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 800;
font-size: .95rem;
line-height: 1;
transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease;
}
/* === LOGIN (alb, contur negru) === */
#topNav .navbar-collapse .nav-right-clone .btn.btn-dark{
background: #fff !important;
color: #0f172a !important;
border: 2px solid #0f172a !important;
box-shadow: none !important;
}
#topNav .navbar-collapse .nav-right-clone .btn.btn-dark:hover{
background: #f8fafc !important;
transform: translateY(-1px);
}
/* === REGISTER (negru, text alb) === */
#topNav .navbar-collapse .nav-right-clone .btn.btn-outline-dark{
background: #0f172a !important;
color: #fff !important;
border: 2px solid #0f172a !important;
box-shadow: 0 12px 24px rgba(15,23,42,.25);
}
#topNav .navbar-collapse .nav-right-clone .btn.btn-outline-dark:hover{
filter: brightness(1.1);
transform: translateY(-1px);
}
/* Shadow mic la hover */
#topNav .navbar-collapse .nav-right-clone .btn:active{
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(15,23,42,.15);
}
}
.footer {
background: #1a1d23; /* culoarea închisă ca în poză */
color: #e2e8f0;
font-family: 'Inter', sans-serif;
padding: 60px 20px 30px;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 40px;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
}
.footer-logo span {
color: #e0a94f; /* accent auriu */
}
.footer-desc {
font-size: 0.95rem;
margin: 16px 0 20px;
color: #cbd5e1;
line-height: 1.6;
}
.footer-col h4 {
font-weight: 700;
margin-bottom: 14px;
color: #cbd5e1;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
color: #e2e8f0;
text-decoration: none;
font-size: 0.92rem;
transition: color .2s;
}
.footer-col ul li a:hover {
color: #e0a94f;
}
.footer-social {
display: flex;
gap: 14px;
font-size: 1.4rem;
}
.footer-social a {
color: #cfd6e0;
font-size: 1.6rem;
transition: all 0.3s ease;
}
.footer-social a:hover {
color: white; /* galbenul tău */
transform: scale(1.25); /* mărește iconul */
text-shadow: 0 0 8px rgba(224,169,79,0.7),
0 0 15px rgba(224,169,79,0.6);
}
.footer-lang {
margin-top: 18px;
font-size: 0.9rem;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 6px;
}
.footer-lang span {
font-size: 0.75rem;
}
.footer-bottom {
text-align: center;
margin-top: 40px;
font-size: 0.85rem;
color: #94a3b8;
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 20px;
}
/* ===== FOOTER LOGO POSITION & SIZE ===== */
.footer-logo {
display: flex;
align-items: center;
justify-content: flex-start; /* logo la stânga */
margin-bottom: 1.2rem;
margin-left: 0; /* aliniat perfect cu textul din stânga */
}
/* imaginea logo */
.footer-logo-img {
height: 58px; /* mai mare (ajustabil între 54–64px) */
width: auto;
object-fit: contain;
filter: brightness(1.2); /* mai clar pe fundalul închis */
opacity: 0.95;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* mic efect premium la hover */
.footer-logo-img:hover {
transform: scale(1.05);
opacity: 1;
}
* ===== Typography override: elegant sans (NOT Inter) ===== */
:root{
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Setează fontul pe tot site-ul (texte + UI) */
html, body,
button, input, select, textarea,
.hero, .how-clean, .kv-section, .faq-wrap, .tstX-wrap, .footer,
.navbar, .dropdown-menu {
font-family: var(--font-sans) !important;
}
/* ——— Headline style (H1/H2 mari) ——— */
/* Titlul de sus + titlul de jos identice */
.how-head .how-title,
.kv-section .kv-head .kv-title{
font-family: var(--font-sans) !important;
font-weight: 800 !important; /* 900 dacă îl vrei și mai masiv */
letter-spacing: -0.015em !important; /* ușor compact, look modern */
line-height: 1.06 !important;
font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.1rem) !important; /* exact ca „How does…” */
margin: 0 0 .35rem !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Subtitluri subțiri/fluide (păstrează aspectul elegant) */
.how-head .how-sub,
.kv-section .kv-sub,
.faq-head p,
.tstX-head p{
font-family: var(--font-sans) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
/* Micro headere din carduri / liste (consistente) */
.how-h,
.kv-item h5,
.promo h6,
.pc-title,
.inv-mini-title,
.svc-title,
.ent-title,
.faq-q{
font-family: var(--font-sans) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Butoane/CTA (shape rămâne, doar tipografia) */
.how-cta,
.kv-cta,
.btn, .svc-cta, .svc-quick-link{
font-family: var(--font-sans) !important;
font-weight: 800 !important;
letter-spacing: .01em !important;
}
/* Brand + iteme din nav să nu rămână pe vechiul font */
.navbar-brand,
.nav-link,
.mega-heading,
.mega-item{
font-family: var(--font-sans) !important;
}
/* ====== Valuation Wizard – polished light style ====== */
:root{
--vw-ink:#0f172a;
--vw-muted:#6b7280;
--vw-line:rgba(15,23,42,.08);
--vw-soft:#fbfcfd;
--vw-card:#ffffff;
--vw-cream:#fcf7f2;
--vw-accent:#f5ab2a;
--vw-accent-ink:#111827;
--vw-focus:0 0 0 4px rgba(245,158,11,.22);
--vw-shadow:0 16px 40px rgba(2,6,23,.06), 0 50px 120px rgba(2,6,23,.05);
--vw-radius:18px;
--vw-radius-lg:22px;
}
/* container spacing (se potrivește cu restul site-ului) */
.val-wizard.container{
padding-top: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
padding-bottom: clamp(1.2rem, 1.2vw + .8rem, 2.2rem);
}
/* ===== Head ===== */
.vw-head{
text-align:center;
margin: 0 auto 1.2rem;
max-width: 64rem;
}
.vw-title{
font-weight:900;
letter-spacing:-.015em;
line-height:1.06;
font-size:clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
color:var(--vw-ink);
margin:.45rem 0 .25rem;
}
.vw-sub{
color:var(--vw-muted);
margin:0 0 1rem;
font-weight:600;
}
/* stepper (pills + line) */
/* ===== Premium Stepper Overrides (glass + gold + motion) ===== */
.vw-pillbar{
display:flex; align-items:center; justify-content:center; gap:14px;
margin-bottom:.6rem;
perspective: 900px;
}
/* pills */
.vw-pill{
appearance:none; cursor:pointer;
display:flex; align-items:center; gap:.6rem;
background:rgba(255,255,255,.9);
border:1px solid rgba(15,23,42,.08);
border-radius:999px;
padding:.55rem 1rem;
box-shadow:0 12px 30px rgba(2,6,23,.07), 0 1px 0 rgba(255,255,255,.7) inset;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
transform-style: preserve-3d;
transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
position:relative; isolation:isolate;
}
/* halo */
.vw-pill::before{
content:"";
position:absolute; inset:-2px; border-radius:999px;
background: radial-gradient(60% 120% at 20% 0%, rgba(245,171,42,.22), transparent 60%);
opacity:0; transition:opacity .25s ease; z-index:-1;
}
/* number badge */
.vw-pill span{
width:36px; height:36px; display:grid; place-items:center;
border-radius:999px; font-weight:900; color:#0f172a;
border:1px solid rgba(15,23,42,.08);
background:#fff;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
transition: transform .22s ease;
}
/* label */
.vw-pill small{ font-weight:800; color:#6b7280; letter-spacing:.01em; }
/* hover */
.vw-pill:hover{
transform: translateY(-3px) scale(1.02) rotateX(4deg);
box-shadow:0 16px 40px rgba(2,6,23,.10), 0 60px 140px rgba(2,6,23,.10);
border-color: rgba(15,23,42,.12);
}
.vw-pill:hover::before{ opacity:.9; }
.vw-pill:hover span{ transform: translateZ(12px); }
/* active */
.vw-pill.is-active{
background:
linear-gradient(180deg, #ffe9bf, #fff3d4) padding-box,
linear-gradient(180deg, #f5ab2a, #d88a0a) border-box;
border:1px solid transparent;
}
.vw-pill.is-active span{
border-color: transparent;
background: linear-gradient(180deg, #f5ab2a, #d88a0a);
color:#111827;
}
.vw-pill.is-active small{ color:#374151; }
/* shimmer on active */
.vw-pill.is-active::after{
content:"";
position:absolute; inset:0; border-radius:999px;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
transform: translateX(-120%);
animation: vw-shimmer 2.2s ease-in-out infinite;
mix-blend-mode: soft-light;
}
@keyframes vw-shimmer{
0% { transform: translateX(-120%); }
60%{ transform: translateX(120%); }
100%{ transform: translateX(120%); }
}
/* completed */
.vw-pill.is-complete{
background:#fff;
border:1px solid #f2d299;
box-shadow:0 12px 26px rgba(249,200,115,.22), 0 1px 0 rgba(255,255,255,.8) inset;
}
.vw-pill.is-complete span{
background:#fff;
border-color:#f2d299;
}
/* connector line */
.vw-line{
width:44px; height:3px; border-radius:999px;
background:linear-gradient(90deg,#e9eef5,#f1f5f9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: background .25s ease, height .25s ease, box-shadow .25s ease;
}
.vw-pill.is-complete + .vw-line,
.vw-pill.is-active + .vw-line{
background:linear-gradient(90deg,#f5ab2a,#ffd27a);
height:4px;
box-shadow:0 4px 12px rgba(245,171,42,.35);
}
/* optional micro-pulse when treci pe Next */
@keyframes vw-pulse {
0%{transform:translateY(0) scale(1)}
50%{transform:translateY(-2px) scale(1.02)}
100%{transform:translateY(0) scale(1)}
}
.pulse{ animation: vw-pulse .42s ease; }
/* ===== Pane (card) ===== */
.vw-pane{
display:none;
border-radius: var(--vw-radius-lg);
background:
radial-gradient(1200px 480px at -10% -30%, rgba(255,255,255,.9), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.9)),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(17,24,39,.02) 18px 19px);
border: 1px solid rgba(230,235,245,.9);
padding: clamp(1rem, 1.2vw + .8rem, 1.5rem);
box-shadow: var(--vw-shadow);
animation: vw-enter .22s ease;
}
.vw-pane.is-current{ display:block; }
.vw-pane-title{
margin:0 0 .9rem;
font-weight:900; color:var(--vw-ink);
font-size:1.18rem; letter-spacing:.01em;
}
/* grid layout */
.vw-grid{
display:grid; gap:14px; grid-template-columns:1fr;
}
@media(min-width: 820px){
.vw-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.vw-grid--sm{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
/* fields */
.vw-field{ display:flex; flex-direction:column; }
.vw-field label{ font-weight:900; color:var(--vw-ink); margin-bottom:.38rem; }
.vw-field label span{ color:#ef4444; }
.vw-label{ font-weight:900; color:var(--vw-ink); margin-bottom:.3rem; }
.vw-help{
color:#93a1b5; font-weight:600; margin-top:.3rem; font-size:.875rem;
}
/* form controls */
.vw-field input,
.vw-field select,
.vw-field textarea{
border:1px solid var(--vw-line);
border-radius:14px;
padding:.85rem 1rem;
background:#fff; color:var(--vw-ink);
font-weight:700;
outline:0;
transition: border-color .15s, box-shadow .15s, transform .04s;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.vw-field input::placeholder,
.vw-field textarea::placeholder{ color:#9aa3b2; font-weight:600; }
.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus{
border-color:#e7c27a;
box-shadow: var(--vw-focus);
}
.vw-field select{
appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%),
linear-gradient(to right, #fff, #fff);
background-position:
calc(100% - 18px) calc(50% - 4px),
calc(100% - 12px) calc(50% - 4px),
100% 0;
background-size: 6px 6px, 6px 6px, 2.5rem 100%;
background-repeat: no-repeat;
}
/* radios */
.vw-radios{ display:flex; gap:14px; flex-wrap:wrap; }
.vw-radios label{ font-weight:800; color:var(--vw-ink); }
.vw-radios input{ margin-right:.35rem; }
/* buttons */
.vw-cta{
display:flex; gap:.6rem; justify-content:flex-end; margin-top:16px;
}
.btn-amber{
appearance:none; border:0; border-radius:999px; padding:.95rem 1.35rem;
font-weight:1000; letter-spacing:.01em;
color:var(--vw-accent-ink); background:linear-gradient(180deg,var(--vw-accent),#d88a0a);
box-shadow:0 16px 28px rgba(216,138,10,.25), inset 0 1px 0 rgba(255,255,255,.65);
cursor:pointer; transition: transform .12s, filter .12s, box-shadow .12s;
}
.btn-amber:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn-soft{
appearance:none; border:1px solid var(--vw-line); background:#fff; color:var(--vw-ink);
border-radius:999px; padding:.95rem 1.15rem; font-weight:900;
}
/* progress animation */
@keyframes vw-enter { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }
/* subtle empty-state for selects fără opțiuni */
select.is-empty{
background-image:none;
color:#9aa3b2;
}
/* ====== ABOUT ESTHER – Premium Orizontal + Animations ====== */
:root {
--bg-cream: #EBF2F2;
--ink: #1b2733;
--muted: #4f5d6a;
--accent: #0b4a86;
--shadow: 0 18px 50px rgba(15, 23, 42, .08);
}
.about-hero {
position: relative;
background: var(--bg-cream);
padding: clamp(64px, 7vw, 100px) 0;
}
.container { width: min(1180px, 94vw); margin-inline: auto; }
.about-wrap {
display: grid;
grid-template-columns: 1.1fr 1fr; /* imagine / text */
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
/* ===== Imagine (MAI MICĂ) ===== */
/* ===== Fix imagine: cadru landscape, fără deformare ===== */
.about-media{
position: relative;
width: clamp(320px, 40vw, 500px); /* controlează lățimea imaginii */
aspect-ratio: 4 / 3; /* înălțime automată = lățime * 3/4 */
border-radius: 0px;
overflow: hidden;
box-shadow: var(--shadow);
margin: 0 0 0 auto;
transform: translateX(-8%); /* rămâne aliniată spre interior */
}
.about-photo{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* umple cadrul, taie elegant surplusul */
object-position: 50% 50%; /* poți muta focusul: 50% 40%, etc. */
display: block;
}
/* Efect hover: zoom + lumină */
.about-media:hover .about-photo {
transform: scale(1.05);
filter: brightness(1.05) contrast(1.05);
}
/* ===== Text ===== */
.about-content { color: var(--ink); text-align: left; }
.about-overline{
font: 600 16px/1 "Inter", sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px;
}
.about-title{
font-family: "Playfair Display", serif;
font-weight: 800;
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.2;
margin: 0 0 8px;
}
.about-subtitle{
display: block;
color: var(--ink);
opacity: .9;
font-weight: 600;
font-size: clamp(18px, 2vw, 22px);
margin-bottom: 16px;
}
/* Divider */
.about-divider{ display:inline-flex; align-items:center; gap:10px; margin:18px 0 24px; }
.about-divider .line{
width: 120px; height: 2px; background: var(--accent);
border-radius: 999px; transform-origin: left;
}
.about-divider .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
/* Paragrafe */
.about-text{
display: grid;
gap: 14px;
max-width: 560px; /* ține textul pe orizontală, nu se lungește */
}
.about-text p{ font: 400 15px/1.65 "Inter", sans-serif; color: var(--muted); margin: 0; }
/* ===== Animații (ca înainte) ===== */
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-zoom{ opacity:0; transform: scale(.98); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal-line{ transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.24,.84,.21,1); }
.inview .reveal-up{ opacity:1; transform: translateY(0); }
.inview .reveal-zoom{ opacity:1; transform: scale(1); }
.inview .about-divider .line{ transform: scaleX(1); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.reveal-up,.reveal-zoom,.reveal-line{ transition:none!important; transform:none!important; opacity:1!important; }
}
/* ===== Responsive ===== */
@media (max-width:1024px){
.about-wrap{ grid-template-columns: 1fr; text-align:center; }
.about-photo{ margin: 0 auto 32px; }
.about-content{ text-align:center; }
.about-text{ max-width: 100%; margin: 0 auto; }
}
/* ==== Border premium dublu cu AUR ==== */
.about-media {
position: relative;
width: clamp(300px, 40vw, 500px);
aspect-ratio: 4 / 3;
overflow: hidden;
margin: 0 0 0 auto;
transform: translateX(-8%);
/* contur auriu (gradient) */
border: 4px solid transparent;
border-image: linear-gradient(135deg, #d4af37, #f9e79f, #d4af37) 1; /* efect aur */
/* al doilea contur crem */
outline: 10px solid #fdfaf6;
outline-offset: 8px;
box-shadow: 0 25px 50px rgba(0,0,0,.2);
border-radius: 0;
transition: transform .5s ease, box-shadow .5s ease, border-image .5s ease;
}
/* Hover efect – aur mai intens */
.about-media:hover {
transform: translateX(-8%) scale(1.03);
box-shadow: 0 35px 70px rgba(0,0,0,.28);
border-image: linear-gradient(135deg, #b8860b, #ffd700, #b8860b) 1; /* aur mai puternic */
}
#about-esther .about-caption{
margin-top: clamp(14px, 1.8vw, 18px);
color: var(--muted);
font-size: clamp(15.5px, 1.6vw, 18px); /* ⇐ aceeași mărime ca textul mic din dreapta */
line-height: 1.7;
background: #ffffffcc;
padding: clamp(10px, 1.6vw, 14px) clamp(12px, 1.8vw, 16px);
border-left: 4px solid var(--gold); /* accent discret premium */
border-radius: 10px;
box-shadow: 0 10px 28px rgba(15,39,66,.06);
}
/* Fonts: titlu/subtitlu = Playfair Display (ca în screenshot), restul = Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;800&display=swap');
#hero-esther{
position: relative;
min-height: 73vh;
color:#fff;
overflow:hidden;
isolation:isolate;
font-family: "Playfair Display", serif;
}
/* ==== Background (schimbă imaginea după nevoie) ==== */
#hero-esther .hero-bg{
position:absolute; inset:0;
background:url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
transform:scale(1.05);
transition:transform 2s ease;
}
#hero-esther:hover .hero-bg{ transform:scale(1.08); }
/* Overlay întunecat */
#hero-esther .hero-overlay{
position:absolute; inset:0;
background: rgba(0,0,0,.60);
z-index:1;
}
/* ==== Layout ==== */
#hero-esther .hero-wrap{
position:relative; z-index:2;
max-width:1280px; margin:0 auto;
padding:clamp(28px,5vw,68px);
display:grid; grid-template-columns:1.2fr 0.8fr;
gap:clamp(16px,4vw,40px); align-items:center;
}
@media (max-width: 1024px){
#hero-esther .hero-wrap{ grid-template-columns:1fr; text-align:left; }
}
/* ==== Tipografie (mai mică, cu același font ca în hero) ==== */
#hero-esther .hero-title{
font-family: "Playfair Display", serif;
font-weight:800;
font-size:clamp(34px,4.6vw,58px); /* ↓ mai mic */
line-height:1.06;
margin:0 0 12px; /* ↓ spacing */
letter-spacing:.2px;
}
/* Accent albastru sobru (fără roșu) */
#hero-esther .hero-title .accent{
color:#F5DEC9;
font-weight:800;
}
#hero-esther .hero-sub{
font-family:'Playfair Display', Georgia, serif;
font-style:italic;
font-weight:700;
font-size:clamp(16px,1.9vw,24px); /* ↓ mai mic */
line-height:1.35;
opacity:.98;
margin:0 0 22px; /* ↓ spacing */
}
/* ==== Bullets (2 coloane, iconuri mai mici & monocrom) ==== */
#hero-esther .hero-bullets{
display:grid;
grid-template-columns:repeat(2, minmax(240px, 1fr));
gap:16px 24px; /* ↓ ușor mai compact */
margin:0 0 24px;
}
@media (max-width: 720px){ #hero-esther .hero-bullets{ grid-template-columns:1fr; } }
#hero-esther .bullet{
display:flex; align-items:center; gap:12px;
font-weight:600;
font-size:clamp(14.5px,1.5vw,18px); /* ↓ text bullets */
}
/* Icon disc mai mic + monocrom albastru */
#hero-esther .bullet .ico{
width:48px; height:48px; /* ↓ 60px -> 48px */
border-radius:50%;
background:#fff; display:grid; place-items:center;
box-shadow:0 10px 22px rgba(0,0,0,.25), inset 0 0 0 2px #ffffff22;
color:#1f4d7a; /* ↓ fără roșu */
}
#hero-esther .bullet span:last-child{ color:#fff; }
/* Paletă asortată secțiunii (fără roșu) */
#hero-esther{
--accent: black; /* albastru sobru */
--accent2:#2b6aa3; /* albastru luminos pt hover */
--ink: #0f172a;
}
/* ========== CTA PREMIUM (capsule cu border gradient + glass sheen) ========== */
#hero-esther .hero-cta{
position:relative;
display:inline-flex; align-items:center; justify-content:center;
min-width: 210px; height: 54px; padding: 0 24px;
border-radius: 999px;
font-weight:800; font-size:16px; letter-spacing:.15px;
color: #0f172a;
border: 2px solid transparent;
/* dublu background: interior „glass” + chenar gradient */
background:
linear-gradient(120deg, #ffffff, #f6f8fb) padding-box,
linear-gradient(140deg, rgba(255,255,255,.85), rgba(255,255,255,.15)) border-box;
box-shadow:
0 18px 40px rgba(0,0,0,.32),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .25s ease,
background .35s ease, color .2s ease, letter-spacing .18s ease;
isolation:isolate;
}
/* luciu care alunecă pe hover */
#hero-esther .hero-cta::before{
content:"";
position:absolute; inset:0; border-radius:inherit;
background: linear-gradient(110deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 65%);
transform: translateX(-30%);
transition: transform .7s ease;
pointer-events:none;
}
#hero-esther .hero-cta:hover,
#hero-esther .hero-cta:focus-visible{
color:#fff;
transform: translateY(-2px);
letter-spacing:.2px;
background:
linear-gradient(135deg, var(--accent), var(--accent2)) padding-box,
linear-gradient(140deg, rgba(255,255,255,.75), rgba(255,255,255,.2)) border-box;
box-shadow: 0 22px 52px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.35);
}
#hero-esther .hero-cta:hover::before,
#hero-esther .hero-cta:focus-visible::before{ transform: translateX(110%); }
#hero-esther .hero-cta:active{ transform:translateY(0); }
/* Focus ring accesibil */
#hero-esther .hero-cta:focus-visible{
outline:none;
box-shadow:
0 0 0 3px rgba(255,255,255,.6),
0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent),
0 22px 52px rgba(0,0,0,.45);
}
/* ========== PLAY PREMIUM (inel gradient rotativ + disc care se colorează) ========== */
#hero-esther .hero-play{
justify-self:center; position:relative; border:none; background:transparent; cursor:pointer;
width: clamp(150px,16vw,210px); height: clamp(150px,16vw,210px);
filter: drop-shadow(0 16px 42px rgba(0,0,0,.35));
}
/* Inel gradient rotativ (subtil) */
#hero-esther .hero-play .ring{
position:absolute; inset:0; border-radius:50%;
background:
conic-gradient(from 0deg,
rgba(255,255,255,.15) 0deg,
color-mix(in srgb, var(--accent) 40%, transparent) 120deg,
rgba(255,255,255,.15) 240deg,
color-mix(in srgb, var(--accent) 40%, transparent) 360deg);
animation: spin 7s linear infinite;
opacity:.9;
}
/* Disc „glass” */
#hero-esther .hero-play .disc{
position:absolute; inset:12% 12%; border-radius:50%;
background: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, #f5f7fb 65%, #eef2f8 100%);
display:grid; place-items:center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(0,0,0,.06),
0 10px 40px rgba(0,0,0,.35);
transition: background .35s ease, transform .2s ease, box-shadow .25s ease;
}
/* Triunghi monocrom albastru */
#hero-esther .hero-play .tri{
width:0; height:0;
border-left: 28px solid var(--accent);
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
transform: translateX(4px);
transition: border-left-color .25s ease;
}
/* Hover: disc devine gradient albastru, triunghiul devine alb, înelul se intensifică */
#hero-esther .hero-play:hover .disc{
background: linear-gradient(135deg, var(--accent), var(--accent2));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 14px 52px rgba(0,0,0,.45);
transform: scale(1.02);
}
#hero-esther .hero-play:hover .tri{ border-left-color:#fff; }
#hero-esther .hero-play:hover .ring{ opacity:1; filter: saturate(1.05); }
/* Animații */
@keyframes spin { to { transform: rotate(360deg); } }
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
#hero-esther .hero-play .ring{ animation:none !important; }
#hero-esther .hero-cta, #hero-esther .hero-cta::before{ transition:none !important; }
}
/* ==== Play button (dreapta) – triunghi albastru închis ==== */
#hero-esther .hero-play{
justify-self:center; position:relative; border:none; background:transparent; cursor:pointer;
width:clamp(150px,16vw,210px);
height:clamp(150px,16vw,210px);
}
#hero-esther .hero-play .ring{
position:absolute; inset:0; border-radius:50%;
background:radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,.06));
animation:pulse 2.2s ease-in-out infinite;
}
#hero-esther .hero-play .disc{
position:absolute; inset:18% 18%; border-radius:50%;
background:#fff; display:grid; place-items:center;
box-shadow:0 10px 40px rgba(0,0,0,.4), inset 0 0 0 10px rgba(255,255,255,.5);
}
#hero-esther .hero-play .tri{
width:0; height:0;
border-left:30px solid #1f4d7a; /* ↓ albastru sobru */
border-top:18px solid transparent;
border-bottom:18px solid transparent;
transform:translateX(4px);
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
/* ==== Reveal on scroll ==== */
.reveal{ opacity:0; transform:translateY(14px); }
.revealed{ opacity:1; transform:translateY(0); transition:.7s cubic-bezier(.22,.8,.25,1); }
#hero-esther .hero-title.revealed{ transition-delay:.05s; }
#hero-esther .hero-bullets.revealed{ transition-delay:.15s; }
#hero-esther .hero-cta.revealed{ transition-delay:.25s; }
#hero-esther .hero-play.revealed{ transition-delay:.2s; }
/* Modal video */
#hero-esther .hero-modal[hidden]{ display:none; }
#hero-esther .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
#hero-esther .modal-dialog{ position:fixed; inset:0; display:grid; place-items:center; padding:24px; }
#hero-esther .modal-iframe{ width:min(100%,960px); height:min(60vh,540px); background:#000; border:none; border-radius:14px; }
#hero-esther .modal-close{ position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:none; background:#fff; color:#111; font-size:28px; box-shadow:0 6px 22px rgba(0,0,0,.35); cursor:pointer; }
/* Reduce motion */
@media (prefers-reduced-motion:reduce){
#hero-esther .hero-bg{ transform:none!important; }
.reveal,.revealed{ opacity:1!important; transform:none!important; transition:none!important; }
#hero-esther .hero-play .ring{ animation:none!important; }
}
/* 1) Overlay mai „deștept” + vignette */
#hero-esther .hero-overlay{
background:
radial-gradient(120% 90% at 80% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 55%),
linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.30) 100%);
}
/* 2) Ierarhie tipografică mai fină */
#hero-esther .hero-title{ font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 10px; }
#hero-esther .hero-sub{ font-size: clamp(16px, 1.9vw, 22px); font-weight: 600; margin-bottom: 22px; }
/* 3) Bullets – baseline perfect + spații egale */
#hero-esther .hero-bullets{ gap: 14px 24px; }
#hero-esther .bullet{ gap: 12px; line-height: 1.35; }
#hero-esther .bullet .ico{ display:inline-grid; place-items:center; }
/* 4) CTA cu „ancoră” vizuală (shadow bar) */
#hero-esther .hero-cta{
box-shadow: 0 20px 38px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.8) inset;
}
#hero-esther .hero-cta::after{
content:""; position:absolute; left:12%; right:12%; bottom:-14px; height:18px;
filter: blur(8px); background: rgba(0,0,0,.25); border-radius: 50%;
z-index:-1; transition: opacity .25s ease; opacity:.85;
}
#hero-esther .hero-cta:hover::after{ opacity:1; }
/* 5) Play – ușor spre stânga + ring subtil */
#hero-esther .hero-wrap{ align-items: center; }
#hero-esther .hero-play{ margin-left: -1.5vw; }
#hero-esther .hero-play .ring{
background: conic-gradient(from 0deg,
rgba(255,255,255,.14), rgba(255,255,255,.04), rgba(255,255,255,.14));
animation: spin 9s linear infinite;
}
/* 6) Focus vizibil (a11y) */
#hero-esther .hero-cta:focus-visible,
#hero-esther .hero-play:focus-visible{
outline: none;
box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 0 0 8px rgba(31,77,122,.35);
}
/* 7) Mobile stacking */
@media (max-width: 900px){
#hero-esther .hero-wrap{ grid-template-columns: 1fr; gap: 24px; }
#hero-esther .hero-play{ order: 3; margin: 0; justify-self: start; }
#hero-esther .hero-cta{ order: 2; }
}
/* (păstrăm animațiile existente) */
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Bullets premium + spacing deasupra ===== */
/* mai mult spațiu deasupra listei */
#hero-esther .hero-bullets{
margin-top: clamp(18px, 3vh, 40px); /* ⇐ spațiul cerut */
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
column-gap: 34px;
row-gap: 22px;
}
/* item mai “plin” și aliniere perfectă */
#hero-esther .bullet{
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 8px 10px; /* micro-padding pt. respirație */
border-radius: 0px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
backdrop-filter: blur(2px);
box-shadow: 0 8px 22px rgba(0,0,0,.18);
transition: transform .18s ease, box-shadow .25s ease;
}
#hero-esther .bullet:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
/* disc “glass + ring”, mai rafinat */
#hero-esther .bullet .ico{
position: relative;
width: 50px; height: 50px; /* puțin mai mic & echilibrat */
border-radius: 999px;
display: grid; place-items: center;
color: #1f4d7a; /* asortat cu restul secțiunii */
background:
radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #f4f6fa 65%, #eef2f8 100%);
border: 1px solid #e7ecf4;
box-shadow:
0 12px 22px rgba(15,23,42,.22),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
#hero-esther .bullet .ico::before{
content:"";
position:absolute; inset:-1px; border-radius:inherit;
background: conic-gradient(from 180deg, #c3d3e6 0deg, #f9fbff 120deg, #c3d3e6 240deg, #f9fbff 360deg);
mix-blend-mode: soft-light; opacity:.5; pointer-events:none;
}
#hero-esther .bullet .ico::after{
content:"";
position:absolute; top:8%; left:12%; width:60%; height:34%;
border-radius:100px;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
filter: blur(2px); opacity:.7; pointer-events:none;
}
#hero-esther .bullet .ico svg{
width: 22px; height: 22px;
stroke: currentColor; fill: none; stroke-width: 2;
}
#hero-esther .bullet:hover .ico{
transform: translateY(-1px);
filter: saturate(1.05);
}
/* text mai curat + highlight elegant la hover */
#hero-esther .bullet span:last-child{
color: #fff;
font-weight: 800;
font-size: clamp(15px, 1.6vw, 20px);
line-height: 1.35;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
transition: background-size .35s ease;
}
#hero-esther .bullet:hover span:last-child{
background-size: 100% 2px; /* subliniere fluidă */
}
/* responsive */
@media (max-width: 720px){
#hero-esther .hero-bullets{ grid-template-columns: 1fr; }
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;800&display=swap');
/* ===== Vars ===== */
#stats-ribbon{
--bg:#0b0e12; --ink:#fff; --muted:#cfd6e4;
--gold:#d4af37; --gold2:#f1d27a;
--radius:18px; --shadow:0 30px 70px rgba(0,0,0,.35);
}
#stats-ribbon{ padding:clamp(28px,6vw,56px) 0; font-family:Inter,system-ui,sans-serif; }
/* ===== Wrap (card mare negru lucios) ===== */
#stats-ribbon .stats-wrap{
width:min(1400px,94vw); margin-inline:auto; position:relative; overflow:hidden;
border-radius:var(--radius); color:var(--ink); box-shadow:var(--shadow);
padding:clamp(26px,4.6vw,42px); display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(18px,3vw,32px);
background:linear-gradient(160deg,#13161b 0%,#0b0e12 60%,#0b0e12 100%);
}
/* Reflex “sheen” care alunecă ușor */
#stats-ribbon .stats-wrap::before{
content:""; position:absolute; inset:-20% -10% auto -10%; height:80%;
background:linear-gradient(120deg,rgba(255,255,255,.08),rgba(255,255,255,0));
transform:rotate(-8deg) translateX(-10%);
animation: sheen 9s ease-in-out infinite;
pointer-events:none;
}
@keyframes sheen{
0%,100%{ transform:rotate(-8deg) translateX(-10%); opacity:.55; }
50% { transform:rotate(-8deg) translateX(10%); opacity:.9; }
}
/* Textură foarte discretă */
#stats-ribbon .stats-wrap::after{
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px);
opacity:.2; mix-blend-mode:soft-light; pointer-events:none;
}
/* ===== Card ===== */
#stats-ribbon .stat{ position:relative; padding:clamp(6px,1.2vw,10px); border-radius:12px; }
#stats-ribbon .stat:hover{ transform:translateY(-2px); transition:.25s; }
#stats-ribbon .stat-title{
margin:0 0 6px; color:var(--ink); font-weight:800; letter-spacing:.2px;
font-size:clamp(22px,2.8vw,32px); display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:baseline;
}
#stats-ribbon .stat-title em{ font-family:"Playfair Display",Georgia,serif; font-style:normal; font-weight:800; }
#stats-ribbon .plus{ color:var(--gold2); text-shadow:0 2px 8px rgba(212,175,55,.35); }
#stats-ribbon .stat-sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(12px,1.4vw,16px); line-height:1.4; }
/* Linie aurie animată */
#stats-ribbon .stat-underline{
display:block; width:clamp(56px,8vw,84px); height:6px; border-radius:999px;
background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 100%);
box-shadow:0 4px 16px rgba(241,210,122,.35);
transform-origin:left; transform:scaleX(0);
}
/* ===== Reveal (stagger) ===== */
.reveal{ opacity:0; transform:translateY(16px); }
.revealed{ opacity:1; transform:none; transition:.7s cubic-bezier(.22,.8,.25,1); }
.revealed .stat:nth-child(1) .stat-underline{ transition:transform .9s .15s cubic-bezier(.24,.84,.21,1); transform:scaleX(1); }
.revealed .stat:nth-child(2) .stat-underline{ transition:transform .9s .25s cubic-bezier(.24,.84,.21,1); transform:scaleX(1); }
.revealed .stat:nth-child(3) .stat-underline{ transition:transform .9s .35s cubic-bezier(.24,.84,.21,1); transform:scaleX(1); }
.revealed .stat:nth-child(4) .stat-underline{ transition:transform .9s .45s cubic-bezier(.24,.84,.21,1); transform:scaleX(1); }
/* ===== Responsive ===== */
@media (max-width:1024px){ #stats-ribbon .stats-wrap{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
#stats-ribbon .stats-wrap{ grid-template-columns:1fr; }
#stats-ribbon .stat{ text-align:center; }
#stats-ribbon .stat-underline{ margin-inline:auto; }
}
/* ===== Reduce motion ===== */
@media (prefers-reduced-motion:reduce){
#stats-ribbon .stats-wrap::before{ animation:none !important; }
.reveal,.revealed{ opacity:1 !important; transform:none !important; transition:none !important; }
.stat-underline{ transform:scaleX(1) !important; }
}
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
/* ===== Section base ===== */
#needs-min{
--ink:#0a0f1a;
--muted:#4a5868;
--accent:#1f4d7a;
--badge:#fdebdc;
--icon:#e09a47;
--border:#0a0f1a;
--shadow-sm:0 8px 22px rgba(15,23,42,.10);
--shadow:0 16px 40px rgba(15,23,42,.14);
background:#EBEDED;
padding:40px 0;
}
#needs-min .nm-container{ width:min(1160px,92vw); margin-inline:auto; }
/* ===== Rows (mai apropiate poză + text) ===== */
#needs-min .nm-row{
display:grid;
grid-template-columns: 1fr 1fr; /* coloană simetrică */
align-items:start; /* aliniere sus */
gap:clamp(20px,4vw,40px); /* MAI APROAPE decât înainte */
margin-bottom:clamp(36px,6vw,72px); /* spațiu vertical mai mic */
}
#needs-min .nm-row.nm-alt{ grid-template-columns: 1fr 1fr; }
@media (max-width:1020px){
#needs-min .nm-row,
#needs-min .nm-row.nm-alt{ grid-template-columns:1fr; gap:18px; }
}
/* ===== Media (poze mai mici + card premium) ===== */
#needs-min .nm-media{
position:relative; margin:0; justify-self:end; /* mai aproape de content */
width:100%; max-width:440px; /* IMAGINI MAI MICI */
aspect-ratio:16/9;
border-radius:16px; overflow:hidden;
background:#f6f6f6;
box-shadow:var(--shadow-sm);
outline:1px solid rgba(15,23,42,.06);
}
#needs-min .nm-row.nm-alt .nm-media{ justify-self:start; } /* pentru rândul inversat */
#needs-min .nm-media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
transition:transform .45s ease, filter .45s ease;
transform:translateZ(0);
}
#needs-min .nm-media:hover img{ transform:scale(1.02); filter:saturate(1.02); }
/* ===== Content (compact & premium) ===== */
#needs-min .nm-content{
color:var(--ink);
max-width:520px; /* lățime confort de citire */
padding-top:4px; /* îl ridică subtil */
}
#needs-min .nm-badge{
display:inline-grid; place-items:center;
width:56px; height:56px; border-radius:999px;
background:var(--badge); color:var(--icon);
box-shadow:0 8px 20px rgba(224,154,71,.22), inset 0 0 0 6px rgba(224,154,71,.10);
margin:0 8px 8px 0; /* mai mic și mai aproape de titlu */
vertical-align:middle;
}
#needs-min .nm-badge svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }
#needs-min .nm-h3{
display:inline-block; vertical-align:middle;
margin:0 0 8px;
font:800 clamp(18px,1.8vw,22px)/1.22 Inter,system-ui,sans-serif;
letter-spacing:.1px;
}
#needs-min .nm-h3 .accent{ font-weight:800; color:#0d2e49; letter-spacing:.12px; }
#needs-min .nm-text{
margin:8px 0 14px;
font:400 clamp(14px,1.5vw,16px)/1.62 Inter,system-ui,sans-serif;
color:#5a6a7a;
max-width:56ch; /* paragraf mai îngust -> mai premium */
}
/* ===== Button (outline mic, hover fill) ===== */
#needs-min .nm-btn{
display:inline-flex; align-items:center; justify-content:center;
height:44px; min-width:210px; padding:0 18px; border-radius:999px;
font:800 14px/1 Inter,system-ui,sans-serif; letter-spacing:.15px;
color:var(--ink); background:#fff; text-decoration:none;
border:2px solid var(--ink);
box-shadow:0 10px 24px rgba(0,0,0,.08);
transition:transform .16s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .25s ease;
}
#needs-min .nm-btn:hover{
transform:translateY(-2px);
background:var(--ink); color:#fff; border-color:var(--ink);
box-shadow:var(--shadow);
}
#needs-min .nm-btn:active{ transform:translateY(-1px) scale(.995); }
/* ===== Micro alignment pentru rândul inversat ===== */
#needs-min .nm-row.nm-alt .nm-content{ justify-self:end; }
@media (max-width:1020px){
#needs-min .nm-media{ justify-self:center; max-width:92%; }
#needs-min .nm-row.nm-alt .nm-content{ justify-self:start; }
}
/* ===== Reveal (dacă folosești .nm-reveal pe rânduri) ===== */
.nm-reveal{ opacity:0; transform:translateY(16px); }
.nm-reveal.is-in{ opacity:1; transform:none; transition:.8s cubic-bezier(.22,.8,.25,1); }
@media (prefers-reduced-motion:reduce){
.nm-reveal,.nm-reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
}
#needs-min .nm-row:first-child .nm-media{
justify-self:start;
margin-left:40px; /* ajustezi după gust */
}
/* ===== Selector limba ===== */
.footer-lang{ position:relative; display:inline-block; }
.lang-btn{
display:inline-flex; align-items:center; gap:.5rem;
background:#1f2937; color:#e5e7eb; border:1px solid #374151;
padding:.5rem .75rem; border-radius:999px; cursor:pointer;
}
.lang-btn .caret{ opacity:.8; font-size:.8rem; }
.lang-list{
position:absolute; inset:auto 0 auto 0; min-width:180px; margin-top:.5rem;
background:#111827; color:#e5e7eb; border:1px solid #374151; border-radius:.75rem;
padding:.25rem; list-style:none; display:none; z-index:50;
box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.lang-list.show{ display:block; }
.lang-list li{
padding:.55rem .75rem; border-radius:.5rem; cursor:pointer;
}
.lang-list li[aria-selected="true"]{ background:#1f2937; }
.lang-list li:hover{ background:#374151; }
/* ===== NAVBAR — MOBILE PREMIUM v3 (fix: show mega items) ===== */
@media (max-width: 991.98px){
#topNav.navbar{
--nav-h: 60px;
--panel-w: min(86vw, 420px);
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
--shadow: 0 12px 30px rgba(15,23,42,.10);
--radius: 16px;
}
/* Header row */
#topNav .nav-grid.container{
display:flex; align-items:center; justify-content:space-between;
min-height: var(--nav-h);
}
/* Burger */
#topNav .navbar-toggler{
position:absolute; right:12px; top:50%; transform:translateY(-50%);
border:0 !important; box-shadow:none !important; z-index:1031;
}
#topNav .navbar-toggler-icon{
background-image:none; width:28px; height:22px; position:relative;
}
#topNav .navbar-toggler-icon::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(#111,#111) left 0 top 2px/100% 2px no-repeat,
linear-gradient(#111,#111) left 0 center/70% 2px no-repeat,
linear-gradient(#111,#111) left 0 bottom 2px/100% 2px no-repeat;
}
/* Slide-in panel */
#topNav .navbar-collapse{
position:fixed; top:8px; right:-100%;
width: var(--panel-w); height: calc(100vh - 16px);
background: var(--bg);
border-radius: var(--radius) 0 0 var(--radius);
box-shadow: var(--shadow);
transition: right .35s ease;
padding: calc(var(--nav-h) - 6px) 14px 16px;
overflow-y:auto; z-index:1030;
border:1px solid #eef2f7;
}
#topNav .navbar-collapse.show{ right:8px; }
/* Optional backdrop (dacă adaugi `body.nav-open` în JS) */
body.nav-open::before{
content:""; position:fixed; inset:0;
background: rgba(2,6,23,.28);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index:1029;
}
/* Main list */
#topNav .navbar-nav{ width:100%; gap:0; }
#topNav .nav-item{ margin: 2px 0; }
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem;
padding:.9rem .25rem;
font-weight:700;
color: var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* Chevron */
#topNav .nav-link .bi-chevron-down{
font-size:.95rem; color: var(--muted);
transition: transform .22s ease, color .2s ease;
}
#topNav .dropdown.show > .nav-link .bi-chevron-down{
transform: rotate(180deg); color: var(--ink);
}
/* ============ ACCORDION CONTENT (VISIBLE) ============ */
/* Dropdown container devine acordion cu animație */
#topNav .dropdown-menu{
position: static !important;
float:none; margin:0;
border:0; box-shadow:none;
background: var(--bg);
padding: 0; /* padding gestionat mai jos */
max-height: 0; /* ascuns implicit */
overflow: hidden;
opacity: 0;
transition: max-height .3s ease, opacity .2s ease;
}
#topNav .dropdown.show > .dropdown-menu{
max-height: 2000px; /* suficient pentru conținutul tău */
opacity: 1;
}
/* Container intern */
#topNav .dropdown-menu > .container{ padding: 12px 12px 10px; }
/* Titlul de secțiune pentru mobil (d-lg-none din HTML) */
#topNav .dropdown-menu .border-bottom.bg-body-tertiary{
background: transparent !important;
border-color: var(--divider) !important;
}
#topNav .dropdown-menu h4{ font-size:1.25rem; color:var(--ink); }
/* ===== Carduri compacte cu thumbnail ===== */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px;
flex-shrink:0;
}
/* Generic card look pentru itemii principali (opp/promo/ent/etc.) */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature{
display:flex; align-items:center; gap:12px;
background: var(--card);
border:1px solid var(--divider);
padding:12px;
text-decoration:none;
color: var(--ink);
margin-bottom:12px;
}
#topNav .dropdown-menu .opp-left-card h5,
#topNav .dropdown-menu .promo-card-lg .pc-title,
#topNav .dropdown-menu .ent-feature .ent-title{
margin:0 0 4px; font-size:1rem; line-height:1.2;
}
#topNav .dropdown-menu p,
#topNav .dropdown-menu .pc-text,
#topNav .dropdown-menu .ent-text{
margin:0; font-size:.9rem; color:var(--muted);
}
/* Elimină layout-uri complexe pe mobil (row/grid) → stack */
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
/* ===== Lista de categorii (“Buy”) ===== */
#topNav .dropdown-menu .mega-heading{
font-weight:800; color:var(--muted); margin:.25rem 0 .35rem;
}
#topNav .dropdown-menu .mega-item{
display:flex; align-items:center;
gap:.5rem;
padding:.6rem .25rem;
font-weight:600; color: var(--ink) !important; text-decoration:none;
border-bottom:1px dashed var(--divider);
}
#topNav .dropdown-menu .mega-item:last-child{ border-bottom:0; }
#topNav .dropdown-menu .mega-item i{ opacity:.7; }
/* Right actions în panou */
#topNav .nav-right{ display:none !important; }
#topNav .navbar-collapse .nav-right-clone{
margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--divider);
}
#topNav .navbar-collapse .nav-right-clone .btn{
width:100%; padding:.9rem 1rem; font-weight:800; border-radius:14px;
background:#111; color:#fff;
}
/* Hover-uri discrete */
#topNav .nav-link:hover{ background: linear-gradient(0deg, rgba(2,6,23,.03), rgba(2,6,23,.03)); border-radius:10px; }
#topNav .dropdown-menu .opp-left-card:hover,
#topNav .dropdown-menu .opp-mini-card:hover,
#topNav .dropdown-menu .promo-card-lg:hover,
#topNav .dropdown-menu .ent-feature:hover,
#topNav .dropdown-menu .mega-item:hover{ background:#fff; border-radius:8px; }
}
/* Desktop: păstrează mega-menu la hover */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Enterprise (în mega-menu pe mobil) – compact, curat ===== */
@media (max-width: 991.98px){
/* cardul din mega-menu */
#topNav .dropdown-menu .ent-feature{
display:flex;
flex-direction: row !important;
align-items: flex-start;
gap: 12px;
padding: 12px;
margin-bottom: 12px;
background:#fff;
border:1px solid var(--divider);
border-radius: 14px;
box-shadow: none;
transform: none !important;
}
/* imagine mică, pătrată */
#topNav .dropdown-menu .ent-media{
flex: 0 0 68px !important;
width: 68px !important;
height: 68px !important;
border-radius: 12px !important;
overflow: hidden;
}
#topNav .dropdown-menu .ent-media img{
width:100%; height:100%; object-fit:cover;
transform:none !important; /* anulează zoom-ul de hover */
}
/* textul din dreapta */
#topNav .dropdown-menu .ent-body{ min-width:0; }
#topNav .dropdown-menu .ent-title{
margin: 0 0 4px;
font-size: 1rem;
line-height: 1.2;
color: var(--ink);
}
#topNav .dropdown-menu .ent-text{
margin: 0;
font-size: .92rem;
line-height: 1.45;
color: var(--muted);
}
/* chip-urile (meta) – mai mici și pe un singur rând */
#topNav .dropdown-menu .ent-meta{
margin-top: 8px;
gap: 6px;
flex-wrap: wrap;
}
#topNav .dropdown-menu .ent-chip{
padding: .3rem .55rem;
font-size: .78rem;
border-radius: 10px;
background:#f8fafc;
border:1px solid #e6edf6;
}
/* headerul secțiunii din mega-menu */
#topNav .dropdown-menu .mega-section-title,
#topNav .dropdown-menu .border-bottom.bg-body-tertiary h4{
font-size: 1.05rem;
margin: 2px 0 8px;
}
}
/* ===== Services card (mega-menu mobile) — compact & stacked ===== */
@media (max-width: 991.98px){
/* Card container */
#topNav .dropdown-menu .svc-card{
padding: 14px 14px 12px;
border-radius: 14px;
background: #fff;
border: 1px solid #e9edf3;
box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
#topNav .dropdown-menu .svc-card::after{
left: 12px; right: 12px; top: 8px; height: 3px;
opacity: .85;
}
/* Header (icon + badge) */
#topNav .dropdown-menu .svc-card-head{ gap: 10px; margin-bottom: .2rem; }
#topNav .dropdown-menu .svc-badge{
width: 44px; height: 44px; border-radius: 12px; font-size: 1.05rem;
}
#topNav .dropdown-menu .svc-eyebrow{
padding: .22rem .55rem; font-size: .8rem; border-radius: 999px;
}
/* Title & sub */
#topNav .dropdown-menu .svc-title{
margin: .35rem 0 .2rem;
font-size: 1.25rem; line-height: 1.2; letter-spacing: .1px;
}
#topNav .dropdown-menu .svc-sub{
font-size: .95rem; line-height: 1.5; margin: 0 0 .7rem; color: #667085;
}
/* Input + CTA → stacked */
#topNav .dropdown-menu .svc-input-row{
position: relative;
display: flex; flex-direction: column; gap: 8px;
padding: 0; background: transparent; border: 0; box-shadow: none;
}
/* Icon over the input */
#topNav .dropdown-menu .svc-input-row i{
position: absolute; left: 12px; top: 14px;
font-size: 1rem; color: #94a3b8;
background: transparent; border: 0;
}
/* Make the input standalone and full width */
#topNav .dropdown-menu .svc-input-row input{
width: 100%;
padding: .7rem .9rem .7rem 2.2rem; /* room for the icon */
border: 1px solid #e5e7eb; border-radius: 12px;
background: #fff; box-shadow: 0 2px 8px rgba(2,6,23,.04) inset;
font-size: .98rem; color: #0f172a;
}
/* CTA → full width button */
#topNav .dropdown-menu .svc-cta{
width: 100%;
padding: .8rem 1rem;
border-radius: 12px;
box-shadow: 0 10px 22px rgba(216,138,10,.22), inset 0 1px 0 rgba(255,255,255,.6);
font-size: 1rem;
}
/* Footer hints (chips) */
#topNav .dropdown-menu .svc-foot{ gap: .5rem; margin-top: .6rem; }
#topNav .dropdown-menu .svc-hint{
font-size: .9rem; opacity: .9;
}
/* Popular tools (tiles) under the card — smaller */
#topNav .dropdown-menu .svc-section-label{ margin-top: 12px; font-size: .82rem; }
#topNav .dropdown-menu .svc-tile{
padding: 12px; border-radius: 12px; gap: 12px;
}
#topNav .dropdown-menu .svc-tile-icon{ width: 42px; height: 42px; border-radius: 10px; }
#topNav .dropdown-menu .svc-tile-title{ font-size: 1rem; }
#topNav .dropdown-menu .svc-tile-text{ font-size: .92rem; line-height: 1.45; }
#topNav .dropdown-menu .svc-tile .chip{
font-size: .78rem; padding: .26rem .48rem; border-radius: 999px;
}
}
/* Hover lift & shadow pentru cardurile din mega-menú – doar pe pointer fin */
@media (hover:hover) and (pointer:fine){
#topNav .dropdown-menu .opp-left-card:hover,
#topNav .dropdown-menu .opp-mini-card:hover,
#topNav .dropdown-menu .promo-card-lg:hover,
#topNav .dropdown-menu .ent-feature:hover,
#topNav .dropdown-menu .svc-tile:hover,
#topNav .dropdown-menu .mega-item:hover{
background:#fff;
transform:translateY(-4px);
border-color:#e5e7eb;
box-shadow:0 12px 24px rgba(2,6,23,.10), 0 36px 80px rgba(2,6,23,.16);
}
}
/* ===== MOBILE FULLSCREEN OFFCANVAS — fără JS ===== */
@media (max-width: 991.98px){
/* 1) Panoul devine full-screen */
#topNav.navbar{
--nav-h: 60px;
--panel-w: 100vw;
--bg: #fbfbfd;
--card: #ffffff;
--ink: #1f2937;
--muted: #64748b;
--divider: #e9edf3;
}
#topNav .navbar-collapse{
position: fixed;
inset: 0; /* ocupă tot ecranul */
right: -100%;
left: auto;
width: var(--panel-w);
height: 100dvh; /* sigur pe iOS/Android */
background: var(--bg);
border-radius: 0;
box-shadow: none;
transition: right .35s ease;
padding: var(--nav-h) 16px 16px;
overflow-y: auto; /* derulare DOAR în panou */
z-index: 1040;
border: 0;
}
#topNav .navbar-collapse.show{ right: 0; }
/* 2) Blochează scrollul paginii când panoul e deschis (browsere moderne) */
body:has(#topNav .navbar-collapse.show){ overflow: hidden; }
/* 3) Mega-menourile pe mobil: fără limite de înălțime, fără fade/transform */
#topNav .dropdown-menu{
position: static !important;
float: none;
margin: 0;
border: 0;
box-shadow: none;
background: var(--bg);
padding: 0;
max-height: none; /* IMPORTANT: nu mai tăiem conținutul */
opacity: 1;
transform: none !important;
overflow: visible;
}
/* 4) Varianta mega: ocupă toată lățimea panoului și spațiere corectă */
#topNav .dropdown-menu.mega{
width: 100% !important;
left: 0 !important; right: 0 !important; top: auto !important;
padding: 12px 0 !important;
background: #f6f8fb !important; /* sau #fff dacă preferi */
}
/* 5) Carduri/elemente interne — compacte, dar complete vizibile */
#topNav .dropdown-menu .opp-left-card,
#topNav .dropdown-menu .opp-mini-card,
#topNav .dropdown-menu .promo-card-lg,
#topNav .dropdown-menu .ent-feature,
#topNav .dropdown-menu .svc-card,
#topNav .dropdown-menu .svc-tile{
background: var(--card);
border: 1px solid var(--divider);
border-radius: 14px;
margin-bottom: 12px;
}
/* 6) Listă principală: linkuri ca „rânduri” și iconițe aliniate */
#topNav .nav-link{
display:flex; align-items:center; justify-content:space-between;
gap:.75rem; padding:.9rem .25rem;
font-weight:700; color:var(--ink) !important;
border-bottom:1px solid var(--divider);
}
#topNav .nav-item:last-child .nav-link{ border-bottom:0; }
/* 7) Butoanele din dreapta — full width în panou */
#topNav .navbar-collapse .nav-right-clone .btn{
width: 100%;
padding: .9rem 1rem;
font-weight: 800;
border-radius: 14px;
}
/* 8) Mini-thumbs & text în mega — fără tăiere */
#topNav .dropdown-menu img{
width:72px; height:72px; object-fit:cover; border-radius:12px; flex-shrink:0;
}
#topNav .dropdown-menu .row{ --bs-gutter-x: .75rem; }
}
/* ===== DESKTOP: păstrează comportamentul tău la hover ===== */
@media (min-width: 992px){
#topNav .dropdown-hover:hover > .dropdown-menu{ display:block; }
}
/* ===== Fix: toggler corect poziționat și funcțional, doar din CSS ===== */
@media (max-width: 991.98px){
/* (A) Comportament implicit (MENIU ÎNCHIS):
păstrăm poziția ta inițială în header */
#topNav .navbar-toggler{
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border: 0 !important;
box-shadow: none !important;
z-index: 1031; /* deasupra headerului, dar sub panou când se deschide */
padding: 8px; /* hit area mai mare */
}
/* (B) Când MENIUL E DESCHIS:
toggler devine FIX în colțul de sus, deasupra panoului (clickabil) */
#topNav:has(.navbar-collapse.show) .navbar-toggler{
position: fixed;
right: calc(12px + env(safe-area-inset-right));
top: calc(12px + env(safe-area-inset-top));
transform: none;
z-index: 1055; /* > 1040 cât are panoul */
}
/* Spațiu extra sus în panou ca să nu stea sub toggler */
#topNav .navbar-collapse.show{
padding-top: max(72px, calc(56px + env(safe-area-inset-top)));
}
/* Burger → “X” când meniul e deschis (fără JS) */
#topNav .navbar-toggler .navbar-toggler-icon{
width: 28px; height: 22px; position: relative;
background-image: none;
}
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
content:""; position:absolute; left:0; right:0; height:2px; top:50%;
background: #111; transform-origin:center; transition:transform .2s ease, opacity .2s ease;
}
/* linii inițiale (burger) */
#topNav .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-7px) rotate(0deg); /* linia de sus */
}
#topNav .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(5px) rotate(0deg); /* linia de jos */
}
/* în stare DESCHIS → X */
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::before{
transform: translateY(-50%) rotate(45deg);
}
#topNav:has(.navbar-collapse.show) .navbar-toggler .navbar-toggler-icon::after{
transform: translateY(-50%) rotate(-45deg);
}
/* Dacă panoul are backdrop cu ::before, nu bloca togglerul */
#topNav .navbar-collapse.show::before{ z-index: -1; }
}
/* Opțional: dacă headerul e transparent și vrei ca liniile burgerului să fie închise la culoare
și în starea transparentă, păstrează regula ta existentă:
#topNav.navbar-transparent .navbar-toggler{ filter:invert(1); }
*/
@media (max-width: 991.98px){
#topNav .navbar-toggler .navbar-toggler-icon::before,
#topNav .navbar-toggler .navbar-toggler-icon::after{
background: white !important; /* negru intens */
}
}
/* === ABOUT — Poză mică & centrată pe mobil/tabletă === */
@media (max-width: 820px){
.about-hero .about-wrap{ grid-template-columns: 1fr !important; }
.about-hero .about-content{ text-align: center !important; }
.about-hero .about-media{
/* micșorare + centrare */
width: clamp(220px, 62vw, 360px) !important;
margin: 0 auto 20px !important;
place-self: center !important; /* sigur pe grid */
transform: none !important; /* scoate translateX pe mobil */
aspect-ratio: 4 / 3 !important;
/* contururi mai fine pe mobil (opțional) */
border-width: 3px !important;
outline: 8px solid #fdfaf6 !important;
outline-offset: 6px !important;
box-shadow: 0 18px 40px rgba(0,0,0,.22) !important;
}
}
@media (max-width: 480px){
.about-hero .about-media{
width: clamp(200px, 70vw, 300px) !important;
margin: 0 auto 16px !important;
}
}
/* Fallback iOS foarte vechi fără aspect-ratio (opțional) */
@supports not (aspect-ratio: 4 / 3){
.about-hero .about-media{ height: 220px !important; }
}
/* ========== AVALUX STATS (prefix avx-) ========== */
:root{
--avx-ink:#0f172a; /* titlu */
--avx-fig:#5b616a; /* număr mare */
--avx-muted:#8891a1; /* subtitlu */
--avx-maxw:1200px;
}
.avx-stats{
background:#fff;
padding: clamp(48px, 8vw, 120px) 0;
color:var(--avx-ink);
}
.avx-wrap{
width:min(var(--avx-maxw), 92vw);
margin:0 auto;
}
.avx-title{
text-align:center;
font-weight:800;
letter-spacing:.01em;
line-height:1.15;
font-size: clamp(26px, 4.2vw, 44px);
margin:0 0 clamp(28px, 5vw, 56px);
color:var(--avx-ink);
}
.avx-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 4vw, 60px);
align-items:center;
justify-items:center;
}
.avx-item{
text-align:center;
transform: translateY(12px);
opacity: 0;
transition: transform .5s ease, opacity .5s ease;
}
.avx-item.is-inview{
transform:none;
opacity:1;
}
.avx-value{
display:flex;
align-items:baseline;
justify-content:center;
gap:.35em;
}
.avx-plus{
font-weight:800;
font-size: clamp(34px, 6vw, 72px);
line-height:1;
color:var(--avx-fig);
translate: 0 .05em;
}
.avx-num{
font-weight:800;
letter-spacing:.01em;
line-height:1;
color:var(--avx-fig);
font-size: clamp(42px, 8vw, 96px);
min-width: 4ch; /* ca să nu sară layout-ul la start */
}
.avx-label{
margin-top: clamp(8px, 1.6vw, 14px);
font-size: clamp(14px, 2.2vw, 18px);
color:var(--avx-muted);
font-weight:600;
}
/* Responsive */
@media (max-width: 767.98px){
.avx-grid{ grid-template-columns: 1fr; }
}
/* ============ ABOUT / LEGACY — clean, final ============ */
/* Paletă + raze */
:root{
--al-ink:#0f172a;
--al-muted:#5b6573;
--al-line:#eceff3;
--al-bg:#ffffff;
--al-shadow: 0 40px 120px rgba(15,23,42,.16), 0 8px 24px rgba(15,23,42,.08);
--al-radius: 8px;
}
/* Secțiune: fundal premium cu pattern „e” + două glows discrete */
.al-section{
position:relative; isolation:isolate;
background:
radial-gradient(140% 110% at 50% -20%, rgba(15,23,42,.06) 0%, transparent 60%),
linear-gradient(#ffffff 0%, #ffffff00 55%, #ffffff 100%),
url("data:image/svg+xml;utf8,\
") repeat;
background-color: var(--al-bg);
padding: clamp(56px, 7.5vw, 110px) 0;
color: var(--al-ink);
}
/* Grid: stânga | imagine | dreapta */
.al-wrap{
width:min(1400px, 94vw);
margin-inline:auto;
display:grid;
grid-template-columns: 0.9fr minmax(520px, 640px) 0.85fr;
gap: clamp(22px, 3vw, 40px);
align-items:center;
}
/* ========== STÂNGA — heading elegant ========== */
.al-left{ display:flex; align-items:center; justify-content:flex-start; }
.al-heading{
margin:0; display:grid; gap:8px; line-height:1;
font-family: "Playfair Display", ui-serif, Georgia, serif;
}
/* Numărul mare — rafinat */
.al-years-num{
display:block;
font-weight:300;
font-size: clamp(88px, 10.5vw, 160px);
letter-spacing:-0.02em;
line-height:.9;
/* accent subtil: gradient pe text cu fallback */
background: linear-gradient(180deg, #0f172a 0%, #233047 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
/* Subtitlu — italic fin */
.al-years-sub{
display:block;
font-size: clamp(14px, 1.4vw, 18px);
font-style: italic;
color:#334155;
letter-spacing:.01em;
}
/* Titlu — capitalizare discretă */
.al-years-title{
display:block;
font-size: clamp(26px, 2.5vw, 32px);
font-weight:600;
letter-spacing:.02em;
text-transform: none;
}
/* Legendă — small caps optic + spacing */
.al-years-legend{
display:block;
font-size: clamp(18px, 2vw, 24px);
font-weight:600;
letter-spacing:.08em;
text-transform: uppercase;
color:#1f2937;
opacity:.9;
}
/* ========== CENTRU — imagine înaltă/îngustă, shadow moale ========== */
.al-media{
position:relative;
align-self:start;
width: min(520px, 45vw);
height: clamp(620px, 82vh, 960px);
margin: -60px 0 0 0; /* ridicăm vizual cardul */
border-radius: var(--al-radius);
overflow:hidden;
box-shadow: var(--al-shadow);
background:#e9edf3;
}
.al-media img{
width:100%; height:100%;
object-fit:cover;
transform: translateZ(0) scale(1.005);
transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s ease;
filter: saturate(1.02) contrast(1.02) brightness(1.02);
}
.al-media:hover img{ transform: scale(1.025); }
.al-media::before{
content:""; position:absolute; inset:0; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(15,23,42,.06), inset 0 -100px 160px rgba(0,0,0,.18);
border-radius: inherit;
}
.al-cap{ display:none; }
/* ========== DREAPTA — copy lejer, premium ========== */
.al-right{
align-self:start;
margin-top:30px;
max-width: 60ch;
}
.al-copy{
margin:0 0 1.1rem;
color: var(--al-muted);
font-size: clamp(14px, 1vw, 16px);
line-height:1.85;
}
/* Reveal (dacă adaugi .is-in din JS) */
[data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
/* ========== Responsive ========== */
@media (max-width: 1100px){
.al-wrap{ grid-template-columns: 1fr minmax(520px, 640px) 1fr; }
}
@media (max-width: 900px){
.al-wrap{ grid-template-columns: 1fr; gap:22px; }
.al-left, .al-right{ text-align:center; margin-inline:auto; }
.al-right{ max-width:min(60ch, 92vw); margin-top:0; }
.al-media{
width:min(780px, 92vw);
height: clamp(480px, 72vh, 860px);
margin-top:0;
}
}
/* ===== Linii fine între paragrafe (compacte, gri închis) ===== */
#about-legacy .al-copy {
position: relative;
padding-top: 0.6rem; /* spațiu mic deasupra liniei */
margin-top: 0.6rem;
}
#about-legacy .al-copy:not(:first-of-type) {
border-top: 1px solid rgba(15, 23, 42, 0.35); /* gri închis, dar nu negru */
}
/* ===== Titlu "Nuestra Historia" — linie elegantă extinsă ===== */
#about-legacy .al-heading {
position: relative;
display: inline-block;
text-align: center;
margin-inline: auto;
padding-bottom: 28px; /* spațiu vizual sub text */
font-family: "Playfair Display", serif;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.03em;
}
/* Linie decorativă lungă, cu fade subtil spre capete */
#about-legacy .al-heading::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 220px; /* mai lungă */
height: 3px;
border-radius: 3px;
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0) 0%, /* complet transparent la margine stânga */
rgba(15, 23, 42, 0.8) 45%, /* aproape opac spre centru */
rgba(15, 23, 42, 0.8) 55%, /* menține zona centrală mai puternică */
rgba(15, 23, 42, 0) 100% /* fade-out elegant dreapta */
);
opacity: 0.95;
}
/* ===== PATCH: extindere lățime text (fără modificare font) ===== */
#about-legacy .al-right {
max-width: 88ch; /* în loc de 40ch — acum e mai lat, mai aerisit */
}
/* ============ NX HERO (scoped) ============ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@300;400;500&display=swap");
#nx-hero{
--nx-ink:#0f172a;
--nx-muted:#5b6573;
--nx-line:#eceff3;
--nx-bg-img: var(--nx-bg, none);
--nx-grad1: radial-gradient(140% 110% at 50% -20%, rgba(15,23,42,.06) 0%, transparent 60%);
--nx-grad2: linear-gradient(#ffffff, #ffffff00 55%, #ffffff);
color: var(--nx-ink);
position: relative; isolation: isolate;
padding: clamp(60px, 8vw, 110px) 0;
overflow: clip;
}
#nx-hero .nx-bg{
position:absolute; inset:0; z-index:-2;
background-image: var(--nx-bg-img);
background-size: cover; background-position: center;
filter: saturate(1.02) contrast(1.02) brightness(0.96);
transform: translateZ(0);
}
#nx-hero .nx-overlay{
position:absolute; inset:0; z-index:-1;
background:
var(--nx-grad1),
var(--nx-grad2),
url("data:image/svg+xml;utf8,\
") repeat;
}
#nx-hero .nx-wrap{
width:min(1300px, 94vw);
margin: 0 auto;
display:grid;
grid-template-columns: minmax(420px,1fr) auto;
align-items: center;
gap: clamp(28px,4vw,56px);
}
#nx-hero .nx-left{ max-width: 720px; }
#nx-hero .nx-overline{
font: 600 .78rem/1 "Inter", system-ui, sans-serif;
letter-spacing:.12em; text-transform: uppercase;
color:#374151; background:#f8fafc; border:1px solid var(--nx-line);
padding:6px 10px; border-radius:999px; display:inline-block; margin:0 0 12px;
}
#nx-hero .nx-title{
margin:0 0 .6rem;
font-family: "Playfair Display", ui-serif, Georgia, serif;
font-weight:500; letter-spacing:-.01em; line-height:1.06;
font-size: clamp(42px, 6vw, 90px);
}
#nx-hero .nx-accent{
font-style: italic; position: relative; display:inline-block;
padding-bottom: .12em;
background-image: linear-gradient(currentColor,currentColor);
background-size: 0 2px; background-repeat:no-repeat; background-position: 0 100%;
transition: background-size .6s cubic-bezier(.2,.8,.2,1);
}
#nx-hero .nx-title:hover .nx-accent{ background-size: 100% 2px; }
#nx-hero .nx-lead{
margin:.8rem 0 1.2rem;
font: 400 clamp(15px,1.15vw,17px)/1.9 "Inter", system-ui, sans-serif;
color:#FFFFFF;
max-width: 65ch;
}
#nx-hero .nx-bullets{
display:grid; grid-template-columns: repeat(2, minmax(220px,1fr));
gap: 10px 18px; margin: 10px 0 18px;
}
#nx-hero .nx-bullet{ display:flex; align-items:center; gap:10px; }
#nx-hero .nx-ico{
width:38px; height:38px; min-width:38px; border-radius:999px;
display:grid; place-items:center; color:#0f172a;
background: radial-gradient(120% 120% at 40% 40%, rgba(15,23,42,.10), transparent 70%);
border:1px solid rgba(15,23,42,.10);
transition: transform .25s ease, background .25s ease;
}
#nx-hero .nx-bullet:hover .nx-ico{
transform: translateY(-2px);
background: radial-gradient(120% 120% at 40% 40%, rgba(15,23,42,.16), transparent 70%);
}
#nx-hero .nx-btxt{ font: 500 .96rem/1.4 "Inter", system-ui, sans-serif; color:#111827; }
/* ======== BUTON MODERN (oval REFUZ style) ======== */
#nx-hero .nx-cta{
display:inline-block;
margin-top:16px;
font: 700 .9rem/1 "Inter", system-ui, sans-serif;
letter-spacing: .08em;
color:#0f172a;
text-decoration:none;
padding:14px 34px;
border:2px solid #0f172a;
border-radius:999px;
background:transparent;
transition: all .25s ease;
}
#nx-hero .nx-cta:hover{
background:#0f172a;
color:#fff;
transform: translateY(-2px);
}
/* ====== Play Button (bigger + moved left) ====== */
#nx-hero .nx-play{
--sz: 120px;
position: relative;
width: var(--sz);
height: var(--sz);
border: none;
background: transparent;
cursor: pointer;
display:grid;
place-items:center;
justify-self: start; /* moved to left */
margin-left: -30px; /* extra left offset */
}
#nx-hero .nx-ring{
position:absolute; inset:0; border-radius:50%;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 10px 30px rgba(15,23,42,.25);
animation: nx-pulse 2.6s ease-in-out infinite;
}
#nx-hero .nx-disc{
width: calc(var(--sz) - 20px); height: calc(var(--sz) - 20px);
border-radius:50%; background: #ffffffd9; display:grid; place-items:center;
box-shadow: 0 12px 30px rgba(15,23,42,.2);
}
#nx-hero .nx-tri{
width:0; height:0;
border-left:14px solid #0f172a;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
margin-left:5px;
}
@keyframes nx-pulse{
0%,100%{ transform: scale(1); opacity:1 }
50%{ transform: scale(1.06); opacity:.8 }
}
/* ===== Reveal (scoped) ===== */
#nx-hero [data-nx-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; will-change: transform, opacity; }
#nx-hero .nx-in{ opacity:1 !important; transform: none !important; }
/* ===== Responsive ===== */
@media (max-width: 1000px){
#nx-hero .nx-wrap{ grid-template-columns: 1fr; }
#nx-hero .nx-play{ justify-self: start; margin-top: 8px; --sz: 100px; margin-left: 0; }
#nx-hero .nx-bullets{ grid-template-columns: 1fr; }
}
/* ===== NX HERO — Mobile polish ===== */
@media (max-width: 768px){
/* paddings + safe-area */
#nx-hero{
padding: max(48px, 6vh) 0 calc(28px + env(safe-area-inset-bottom));
}
/* mai mult contrast peste poză pe mobil */
#nx-hero .nx-overlay{
background:
radial-gradient(140% 110% at 50% -20%, rgba(15,23,42,.10) 0%, transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.88) 60%, rgba(255,255,255,1)),
url("data:image/svg+xml;utf8,\
") repeat;
}
/* o singură coloană + ordonare: Play sus, apoi textul */
#nx-hero .nx-wrap{
grid-template-columns: 1fr;
gap: 22px;
width: min(640px, 94vw);
}
#nx-hero .nx-play{ grid-row: 1; }
#nx-hero .nx-left{ grid-row: 2; }
/* titlu + subtitlu optimizate pentru ecrane mici */
#nx-hero .nx-title{
font-size: clamp(30px, 8.2vw, 42px);
line-height: 1.08;
letter-spacing: -.01em;
margin-bottom: .4rem;
}
#nx-hero .nx-accent{
background-size: 0 1.5px;
}
#nx-hero .nx-lead{
font: 400 clamp(15px, 4.2vw, 16px)/1.75 "Inter", system-ui, sans-serif;
color: #374151;
margin: .6rem 0 1rem;
}
/* chip (overline) mai mic */
#nx-hero .nx-overline{
font-size: .72rem;
padding: 5px 10px;
margin-bottom: 10px;
}
/* bullets: 1 coloană, spațiu aerisit, icon ușor mai mic */
#nx-hero .nx-bullets{
grid-template-columns: 1fr;
gap: 12px;
margin: 8px 0 14px;
}
#nx-hero .nx-ico{
width: 34px; height: 34px; min-width: 34px;
}
#nx-hero .nx-btxt{
font-size: .95rem;
}
/* CTA: full-width (tap target mare) cu accent clar */
#nx-hero .nx-cta{
display: block;
width: 100%;
text-align: center;
padding: 15px 22px;
font-weight: 700;
letter-spacing: .08em;
border-width: 2px;
margin-top: 10px;
box-shadow: none;
background: #fff;
}
/* Play: mai mare, centrat sus, fără offset negativ */
#nx-hero .nx-play{
--sz: 104px;
justify-self: center;
margin: 0 0 6px 0;
}
/* pe telefoane foarte mici, mai mic un pic */
@media (max-width: 380px){
#nx-hero .nx-play{ --sz: 92px; }
}
/* modal video: folosește lățimea completă, înălțime sigură */
#nx-hero .nx-dialog{
width: 100vw;
max-width: 100vw;
height: min(60vh, 56.25vw); /* 16:9 limitat de viewport */
aspect-ratio: auto;
border-radius: 10px;
}
}
/* accesibilitate: reduce mișcările dacă utilizatorul preferă */
@media (prefers-reduced-motion: reduce){
#nx-hero [data-nx-reveal],
#nx-hero .nx-dialog{ transition: none !important; }
#nx-hero .nx-ring{ animation: none !important; }
}
/* ===== NX Bullets — premium glass ===== */
#nx-hero .nx-bullets{
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 14px 22px;
}
#nx-hero .nx-bullet{
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.52));
backdrop-filter: blur(6px) saturate(1.05);
-webkit-backdrop-filter: blur(6px) saturate(1.05);
border: 1px solid rgba(15,23,42,.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.7),
0 10px 30px rgba(15,23,42,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#nx-hero .nx-bullet:hover{
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.8),
0 16px 42px rgba(15,23,42,.10);
border-color: rgba(15,23,42,.14);
}
/* Icon „medalion” cu inel dublu + lumină */
#nx-hero .nx-ico{
--sz: 38px;
width: var(--sz); height: var(--sz); min-width: var(--sz);
border-radius: 999px; display: grid; place-items: center;
color: #0f172a;
background:
radial-gradient(120% 120% at 35% 30%, rgba(15,23,42,.12), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
border: 1px solid rgba(15,23,42,.18);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.6),
0 6px 16px rgba(15,23,42,.12);
position: relative;
}
#nx-hero .nx-ico::after{
content: "";
position: absolute; inset: -4px;
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
pointer-events: none;
}
/* Text clar și echilibrat */
#nx-hero .nx-btxt{
font: 600 .98rem/1.45 "Inter", system-ui, sans-serif;
color: #0f172a;
letter-spacing: .01em;
}
/* Variante „dark-over-photo” — crește contrastul când imaginea e mai închisă */
#nx-hero.is-dark .nx-bullet{
background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.32));
border-color: rgba(255,255,255,.22);
}
#nx-hero.is-dark .nx-btxt{ color: #0b1220; }
#nx-hero.is-dark .nx-ico{ border-color: rgba(255,255,255,.35); }
/* Micro-interacțiune: iconul plutește fin la hover */
#nx-hero .nx-bullet:hover .nx-ico{ transform: translateY(-1px); transition: transform .18s ease; }
/* Separator vertical discret între coloane (doar pe ecrane mari) */
@media (min-width: 992px){
#nx-hero .nx-bullets{
position: relative;
}
#nx-hero .nx-bullets::before{
content:"";
position: absolute; top: 4px; bottom: 4px; left: 50%;
width: 1px; transform: translateX(-.5px);
background: linear-gradient(180deg, transparent, rgba(15,23,42,.08), transparent);
}
}
/* Mobil — 1 coloană și tap-target mai mare */
@media (max-width: 768px){
#nx-hero .nx-bullets{ grid-template-columns: 1fr; gap: 10px; }
#nx-hero .nx-bullet{ padding: 12px 14px; border-radius: 14px; }
#nx-hero .nx-ico{ --sz: 34px; }
#nx-hero .nx-btxt{ font-size: .96rem; }
}
/* Desktop: popover în dreapta */
@media (min-width: 992px){
.footer-lang .lang-list {
bottom: auto; /* anulăm deschiderea în sus */
top: 50%; /* aliniere pe verticală */
right: auto;
left: calc(100% + 10px); /* la dreapta butonului */
transform: translateY(-50%); /* centrare pe buton */
max-height: 240px; /* sigur încape, fără scroll pagină */
overflow: auto;
overscroll-behavior: contain;
}
}
[data-vx-reveal] {
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.6s cubic-bezier(.2,.7,.2,1),
transform 0.6s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
[data-vx-reveal].is-in {
opacity: 1;
transform: translateY(0);
}
/* efect subtil de stagger pentru liste și rânduri din tabel */
.vx-list > li[data-vx-reveal]:nth-child(2),
.vx-table tbody tr[data-vx-reveal]:nth-child(2) { transition-delay: 0.08s; }
.vx-list > li[data-vx-reveal]:nth-child(3),
.vx-table tbody tr[data-vx-reveal]:nth-child(3) { transition-delay: 0.12s; }
.vx-list > li[data-vx-reveal]:nth-child(4),
.vx-table tbody tr[data-vx-reveal]:nth-child(4) { transition-delay: 0.16s; }
/* animația standard */
[data-vx-reveal]{
opacity:0;
transform: translateY(14px);
transition: opacity .6s cubic-bezier(.2,.7,.2,1),
transform .6s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
[data-vx-reveal].is-in{ opacity:1; transform:none; }
/* === PATCH pentru tabele: NU aplica transform pe structura de tabel === */
.vx-table[data-vx-reveal],
.vx-table thead[data-vx-reveal],
.vx-table tbody[data-vx-reveal],
.vx-table tr[data-vx-reveal],
.vx-table th[data-vx-reveal],
.vx-table td[data-vx-reveal]{
transform: none !important; /* evită layer separat */
will-change: opacity; /* fără transform pe tabele */
}
/* opțional: efect „slide” sigur pentru rânduri cu clip-path, fără transform */
.vx-table tr[data-vx-reveal]{
clip-path: inset(8px 0 0 0);
transition: opacity .6s cubic-bezier(.2,.7,.2,1),
clip-path .6s cubic-bezier(.2,.7,.2,1);
}
.vx-table tr[data-vx-reveal].is-in{
clip-path: inset(0);
}
#vx-cookies{
--vx-ink:#0f172a; --vx-muted:#5b6577; --vx-line:#0b1222;
--vx-ease:cubic-bezier(.2,.7,.2,1);
--vx-serif:'Playfair Display',serif; --vx-sans:'Inter',system-ui,sans-serif;
background:#fff; color:var(--vx-ink);
font-family:var(--vx-sans); line-height:1.75;
padding:clamp(56px,6vw,88px) 0 clamp(80px,8vw,120px);
overflow:hidden;
}
#vx-cookies .vx-legal__wrap{width:min(1200px,92vw);margin-inline:auto;--col:min(72ch,100%);}
#vx-cookies .vx-ttl,#vx-cookies .vx-sub,#vx-cookies .vx-p,#vx-cookies .vx-list{max-width:var(--col);}
/* TITLU H1 */
#vx-cookies .vx-ttl{
font-family:var(--vx-serif);text-transform:uppercase;
letter-spacing:.045em;font-weight:500;
font-size:clamp(2.2rem,4.2vw,3.1rem);line-height:1.12;
margin:0 0 .75rem 0;-webkit-font-smoothing:antialiased;
}
#vx-cookies .vx-ttl::after{content:none!important;}
#vx-cookies .vx-ttl + .vx-p{font-size:1.1rem;color:#465167;margin-top:.25rem;margin-bottom:1rem;}
/* SUBTITLURI */
#vx-cookies .vx-sub{
font-family:var(--vx-serif);text-transform:uppercase;
letter-spacing:.04em;font-weight:500;
font-size:clamp(1.15rem,1.9vw,1.55rem);
line-height:1.18;margin:clamp(26px,3.2vw,36px) 0 .6rem 0;position:relative;
}
#vx-cookies .vx-sub.vx-sub--lined::after{
content:"";display:block;height:1px;
background:linear-gradient(90deg,var(--vx-line) 0%,rgba(11,18,34,.2) 100%);
margin-top:.5rem;opacity:.9;
}
/* PARAGRAFE + LISTE */
#vx-cookies .vx-p{color:var(--vx-muted);margin:0 0 .9rem;font-size:1rem;}
#vx-cookies .vx-list{list-style:none;padding:0;margin:.5rem 0 1.1rem;}
#vx-cookies .vx-list li{position:relative;padding-left:26px;margin:.58rem 0;color:var(--vx-muted);}
#vx-cookies .vx-list li::before{
content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;
border-radius:50%;box-shadow:inset 0 0 0 2px var(--vx-ink);background:#fff;
}
/* LINKURI */
#vx-cookies a{color:var(--vx-ink);text-decoration:none;position:relative;font-weight:500;}
#vx-cookies a::after{
content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
background:var(--vx-ink);transition:width .3s var(--vx-ease);
}
#vx-cookies a:hover::after{width:100%;}
#vx-cookies .vx-list--links a{text-decoration:underline;text-underline-offset:3px;}
/* ANIMAȚIE SCROLL REVEAL */
#vx-cookies [data-vx-reveal]{opacity:0;transform:translateY(16px);transition:opacity 680ms var(--vx-ease),transform 680ms var(--vx-ease);}
#vx-cookies [data-vx-reveal].is-in{opacity:1;transform:none;}
/* RESPONSIVE */
@media(max-width:900px){
#vx-cookies{padding:56px 0 72px;}
#vx-cookies .vx-ttl{font-size:2rem;letter-spacing:.05em;}
#vx-cookies .vx-sub{font-size:1.08rem;}
#vx-cookies .vx-legal__wrap{--col:100%;}
}
/* ===== ADĂUGIRI PREMIUM ===== */
/* 1️⃣ Lățime mai mare + centrare reală */
#vx-cookies .vx-legal__wrap {
width: min(1320px, 96vw); /* mai lat decât 1200px */
margin-inline: auto; /* centrează */
padding-inline: clamp(24px, 4vw, 60px);
--col: min(80ch, 100%); /* text mai lat */
}
/* 2️⃣ Subtitluri cu linii elegante (exceptând titlul principal) */
#vx-cookies .vx-sub {
position: relative;
padding-bottom: 0.5rem;
margin-top: clamp(32px, 4vw, 48px);
}
#vx-cookies .vx-sub:not(:first-of-type)::after {
content: "";
display: block;
height: 1px;
background: linear-gradient(90deg, var(--vx-line) 0%, rgba(11,18,34,.15) 100%);
margin-top: .5rem;
opacity: .8;
}
/* 3️⃣ Ajustări vizuale generale */
#vx-cookies .vx-p {
max-width: 80ch;
font-size: 1.05rem;
line-height: 1.8;
}
#vx-cookies .vx-list li {
max-width: 80ch;
}
/* 4️⃣ Pe ecrane mici */
@media (max-width: 900px) {
#vx-cookies .vx-legal__wrap {
width: 94vw;
padding-inline: 1rem;
}
#vx-cookies .vx-p {
font-size: 1rem;
}
}
/* === TEXT MAI LAT ȘI CENTRAT === */
#vx-cookies .vx-legal__wrap {
width: min(1320px, 96vw);
margin-inline: auto;
--col: min(105ch, 100%); /* în loc de 72ch → 95ch pentru text mai lat */
}
#vx-cookies .vx-ttl,
#vx-cookies .vx-sub,
#vx-cookies .vx-p,
#vx-cookies .vx-list {
max-width: var(--col);
}
/* Paragrafe confortabile și aerisite */
#vx-cookies .vx-p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--vx-muted);
margin: 0 0 1.1rem;
text-align: left;
}
/* ===== Browser links – stacked bullets ===== */
#vx-cookies .vx-list--links{
list-style:none; padding:0; margin:.5rem 0 1.2rem;
}
#vx-cookies .vx-list--links li{
position:relative; padding-left:26px; margin:.48rem 0;
}
#vx-cookies .vx-list--links li::before{
content:""; position:absolute; left:0; top:.72em; width:9px; height:9px;
border-radius:50%; box-shadow:inset 0 0 0 2px var(--vx-ink); background:#fff;
}
#vx-cookies .vx-list--links a{ text-decoration:none; border-bottom:1px solid transparent; }
#vx-cookies .vx-list--links a:hover{ border-bottom-color: currentColor; }
#vx-cookies p[data-i18n^="cp.types_"][data-i18n$="_label"] {
font-weight: 700; /* bold */
color: var(--vx-ink, #0f172a); /* text mai închis */
margin-top: 2.2em; /* mai mult spațiu deasupra */
margin-bottom: 0.6em; /* mai puțin sub el */
font-size: 1.05rem; /* puțin mai mare decât textul normal */
letter-spacing: 0.01em;
}
/* ===== PRIVACY POLICY – Premium Elegant Look ===== */
#vx-privacy {
--vx-ink: #0f172a;
--vx-muted: #5b6577;
--vx-serif: 'Playfair Display', serif;
--vx-sans: 'Inter', system-ui, sans-serif;
background: #fff;
color: var(--vx-ink);
font-family: var(--vx-sans);
line-height: 1.75;
padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 8vw, 120px);
overflow: hidden;
}
#vx-privacy .vx-legal__wrap {
width: min(1320px, 96vw);
margin-inline: auto;
padding-inline: clamp(24px, 4vw, 60px);
--col: min(95ch, 100%);
}
/* ===== TITLU PRINCIPAL (fără linie) ===== */
#vx-privacy .vx-ttl {
font-family: var(--vx-serif);
text-transform: uppercase;
letter-spacing: 0.045em;
font-weight: 400;
font-size: clamp(2.2rem, 4vw, 3rem);
line-height: 1.1;
margin: 0 0 1.5rem;
border: none !important; /* fără linie dedesubt */
}
.vx-divider { display: flex; justify-content: center; align-items: center; margin: 32px auto 36px; /* spațiu mai mic sus și jos */ opacity: 0.95; } .vx-divider svg { width: min(720px, 90%); height: auto; }
.vx-divider path { vector-effect: non-scaling-stroke; stroke-linecap: round; transition: opacity 0.3s ease; } .vx-divider:hover path { opacity: 1; }
/* ===== SUBTITLURI (cu linie subtilă) ===== */
#vx-privacy .vx-sub {
font-family: var(--vx-serif);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 400;
font-size: clamp(1.15rem, 1.9vw, 1.5rem);
line-height: 1.2;
margin: 2.4rem 0 0.6rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
/* ===== TEXT ===== */
#vx-privacy .vx-p {
color: var(--vx-muted);
margin: 0 0 1.1rem;
font-size: 1rem;
line-height: 1.8;
}
/* ===== LISTE ===== */
#vx-privacy .vx-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 1.1rem;
}
#vx-privacy .vx-list li {
position: relative;
padding-left: 26px;
margin: 0.55rem 0;
color: var(--vx-muted);
}
#vx-privacy .vx-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--vx-ink);
}
/* ===== TABEL ELEGANT CU LINII NEGRE ===== */
#vx-privacy .vx-table-wrap {
margin: 1rem 0 1.5rem;
overflow-x: auto;
}
#vx-privacy .vx-table {
width: 100%;
border-collapse: collapse;
font-size: 0.98rem;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 8px;
background: #fff;
}
#vx-privacy .vx-table thead th {
background: #0f172a;
color: #fff;
text-align: left;
padding: 12px 16px;
font-weight: 600;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#vx-privacy .vx-table tbody td {
padding: 12px 16px;
color: #1e293b;
border: 1px solid rgba(0, 0, 0, 0.35);
}
#vx-privacy .vx-table tbody tr:nth-child(odd) td {
background: #fafafa;
}
/* ===== LINKURI ===== */
#vx-privacy a {
color: var(--vx-ink);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
transition: color 0.25s ease;
}
#vx-privacy a:hover {
color: #1d4ed8;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
#vx-privacy {
padding: 56px 0 72px;
}
#vx-privacy .vx-ttl {
font-size: 2rem;
}
#vx-privacy .vx-sub {
font-size: 1.05rem;
}
#vx-privacy .vx-p {
font-size: 1rem;
}
.vx-divider {
width: 40%;
opacity: 0.7;
}
}
/* ===== AVISO LEGAL – Premium Elegant Look (match cu #vx-privacy) ===== */
#vx-legalnotice {
--vx-ink: #0f172a;
--vx-muted: #5b6577;
--vx-serif: 'Playfair Display', serif;
--vx-sans: 'Inter', system-ui, sans-serif;
background: #fff;
color: var(--vx-ink);
font-family: var(--vx-sans);
line-height: 1.75;
padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 8vw, 120px);
overflow: hidden;
}
#vx-legalnotice .vx-legal__wrap {
width: min(1320px, 96vw);
margin-inline: auto;
padding-inline: clamp(24px, 4vw, 60px);
--col: min(120ch, 100%);
}
#vx-legalnotice .vx-ttl,
#vx-legalnotice .vx-sub,
#vx-legalnotice .vx-p,
#vx-legalnotice .vx-list {
max-width: var(--col);
}
/* ===== TITLU PRINCIPAL (fără linie) ===== */
#vx-legalnotice .vx-ttl {
font-family: var(--vx-serif);
text-transform: uppercase;
letter-spacing: 0.045em;
font-weight: 400;
font-size: clamp(2.2rem, 4vw, 3rem);
line-height: 1.1;
margin: 0 0 1.5rem;
border: none !important;
}
/* dacă folosești separatorul SVG opțional */
#vx-legalnotice .vx-divider{
display:flex;justify-content:center;align-items:center;
margin:32px auto 36px;opacity:.95;
}
#vx-legalnotice .vx-divider svg{width:min(720px,90%);height:auto;}
#vx-legalnotice .vx-divider path{
vector-effect: non-scaling-stroke; stroke-linecap: round;
transition: opacity .3s ease;
}
#vx-legalnotice .vx-divider:hover path{opacity:1;}
/* ===== SUBTITLURI (cu linie subtilă) ===== */
#vx-legalnotice .vx-sub {
font-family: var(--vx-serif);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 400;
font-size: clamp(1.15rem, 1.9vw, 1.5rem);
line-height: 1.2;
margin: 2.4rem 0 0.6rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
/* ===== TEXT ===== */
#vx-legalnotice .vx-p {
color: var(--vx-muted);
margin: 0 0 1.1rem;
font-size: 1.05rem;
line-height: 1.8;
}
/* ===== LISTE ===== */
#vx-legalnotice .vx-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 1.1rem;
}
#vx-legalnotice .vx-list li {
position: relative;
padding-left: 26px;
margin: 0.55rem 0;
color: var(--vx-muted);
}
#vx-legalnotice .vx-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--vx-ink);
}
/* ===== LINKURI ===== */
#vx-legalnotice a {
color: var(--vx-ink);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
transition: color 0.25s ease;
}
#vx-legalnotice a:hover { color: #1d4ed8; }
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
#vx-legalnotice { padding: 56px 0 72px; }
#vx-legalnotice .vx-ttl { font-size: 2rem; }
#vx-legalnotice .vx-sub { font-size: 1.05rem; }
#vx-legalnotice .vx-p { font-size: 1rem; }
#vx-legalnotice .vx-divider { width: 40%; opacity: .7; }
}
/* ========== NUESTRA FILOSOFÍA — styles (scoped) ========== */
.vp-craft{
--vp-wrap: min(1320px, 92vw);
--vp-ink: #0b0e12;
--vp-muted: #4b525a;
--vp-glass: rgba(255,255,255,.62);
--vp-edge: 28px;
position: relative;
padding: clamp(32px, 6vw, 56px) 0;
isolation: isolate;
}
/* Frosted panel with subtle gradient + rounded edges */
.vp-craft__bg{
position: absolute; inset: 0;
background: transparent;
filter: blur(2px);
z-index: 0;
}
.vp-craft__inner{
width: var(--vp-wrap);
margin-inline: auto;
position: relative;
z-index: 1;
/* Glass card */
background: var(--vp-glass);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-radius: 4px;
border: 1px solid rgba(255,255,255,.35);
box-shadow: 0 20px 60px rgba(10, 16, 24, .12);
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(20px, 5vw, 64px);
padding: clamp(22px, 5vw, 48px);
}
/* Title */
.vp-craft__title{
align-self: center;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
line-height: .95;
letter-spacing: -.02em;
color: var(--vp-ink);
font-weight: 500;
margin: 0;
opacity: 0; transform: translateY(12px);
text-align: center;
position: relative;
padding-bottom: 18px;
font-size: clamp(18px, 3.6vw, 42px); /* 🔹 mult mai mic și echilibrat */
}
/* Linie decorativă elegantă sub titlu */
.vp-craft__title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,.4), transparent);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
opacity: .8;
}
/* Copy */
.vp-craft__copy{
align-self: center;
color: var(--vp-muted);
font-size: clamp(13px, 1.2vw, 16px);
line-height: 1.55;
max-width: 72ch;
opacity: 0; transform: translateY(12px);
}
.vp-craft__copy p{ margin: 0 0 1.6em; position: relative; padding-bottom: 0.9em; }
/* Linii elegante sub fiecare paragraf */
.vp-craft__copy p::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 85%;
height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.45), rgba(0,0,0,.15));
border-radius: 2px;
opacity: 0.7;
}
.vp-craft__copy .vp-craft__closing{
color: #1b1f24;
font-weight: 600;
}
/* Reveal animation (premium, subtle) */
.vp-craft [data-vp-reveal].is-in{
animation: vp-fadeUp .7s cubic-bezier(.2,.65,.22,1) both;
}
.vp-craft [data-vp-reveal]:nth-child(2).is-in{
animation-delay: .08s;
}
@keyframes vp-fadeUp{
from{ opacity: 0; transform: translateY(14px) scale(.995); filter: saturate(.9); }
to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}
/* Nice rounded right edge accent (optional) */
.vp-craft__inner::after{
content:"";
position:absolute; inset: -1px -1px -1px auto; width: 38%;
border-top-right-radius: var(--vp-edge);
border-bottom-right-radius: var(--vp-edge);
pointer-events:none;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 60%, rgba(255,255,255,.75) 100%);
opacity:.35;
mask-image: linear-gradient(90deg, transparent 0%, black 30%);
}
/* Responsive */
@media (max-width: 1024px){
.vp-craft__inner{
grid-template-columns: 1fr;
padding: clamp(20px, 5vw, 36px);
}
.vp-craft__title{ text-align: center; font-size: clamp(20px, 6vw, 36px); }
}
@media (prefers-reduced-motion: reduce){
.vp-craft *{ animation: none !important; transition: none !important; }
.vp-craft__title,
.vp-craft__copy{ opacity: 1 !important; transform: none !important; }
}
/* ===== Decor elegant, lung și accentuat pentru titlu ===== */
.vp-craft__title{
position: relative;
padding-bottom: 22px; /* spațiu pentru linii */
}
/* linia principală (accent) */
.vp-craft__title::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width: clamp(180px, 24vw, 420px); /* 🔹 mult mai lungă */
height: 3px; /* ușor mai groasă */
border-radius: 999px;
background:
linear-gradient(90deg,
rgba(0,0,0,.06) 0%,
rgba(0,0,0,.55) 16%,
rgba(0,0,0,.85) 50%,
rgba(0,0,0,.55) 84%,
rgba(0,0,0,.06) 100%);
box-shadow:
0 3px 14px rgba(0,0,0,.18), /* shadow exterior subtil */
inset 0 0 0 1px rgba(255,255,255,.22); /* finisaj lucios discret */
opacity:.95;
}
/* a doua linie hairline (finisaj premium) */
.vp-craft__title::before{
content:"";
position:absolute;
left:50%;
bottom:8px; /* puțin deasupra liniei principale */
transform:translateX(-50%);
width: clamp(120px, 16vw, 280px);
height:1px;
border-radius:999px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,.35), transparent);
opacity:.7;
}
/* ===== PREMIUM HERO (vpv-*) — versiune rafinată ===== */
.vpv-hero{
--ink:#0d0f12;
--paper:#ffffff;
--accent:#0d0f12;
--glass-bg: rgba(255,255,255,.12); /* mai transparent */
--glass-brd: rgba(255,255,255,.28); /* contur subtil */
--shadow: 0 20px 50px rgba(0,0,0,.20);
position:relative; isolation:isolate; min-height:72vh; display:grid; place-items:center;
color:var(--ink); background: radial-gradient(1200px 300px at 50% -10%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
overflow:hidden;
}
.vpv-hero .vpv-bg{
position:absolute; inset:0;
background-image:var(--vpv-bg, none);
background-size:cover; background-position:center;
filter:saturate(105%) contrast(105%);
z-index:-2;
}
/* vignette mai fină + blur redus */
.vpv-hero::before{
content:""; position:absolute; inset:0; z-index:-1;
background:
radial-gradient(circle at center, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 42%, rgba(0,0,0,.06) 80%, rgba(0,0,0,.18) 100%);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* layout: mai mult spațiu pentru cardul de text */
.vpv-container{
width:min(1280px, 92vw); margin-inline:auto;
padding: clamp(48px, 6vw, 80px) 16px;
display:grid; grid-template-columns: 1.5fr .5fr; /* lărgit stânga */
gap: clamp(16px, 4vw, 40px); align-items:center;
}
/* titlu subțire + decorație */
.vpv-title{
font-family:"Georgia", ui-serif, serif;
font-weight:400; font-size:clamp(22px, 4vw, 44px);
line-height:1.05; letter-spacing:.5px; color:#0d0f12; text-transform:uppercase;
position:relative; display:inline-block; padding-bottom:12px;
}
.vpv-title .vpv-accent{ font-style:italic; font-weight:400; }
.vpv-title::after{
content:""; position:absolute; left:0; bottom:0; height:2px;
width: clamp(180px, 24vw, 420px);
border-radius:999px;
background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.85) 50%, rgba(0,0,0,.06));
transform-origin:left center; transform:scaleX(0);
transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.vpv-title[data-vpv-reveal].is-in::after{ transform:scaleX(1); }
/* ===== Cardul cu text (mai transparent, fără border-radius, un pic mai “lung”) ===== */
.vpv-glass{
margin-top: clamp(14px, 2.6vw, 22px);
padding: clamp(18px, 2.8vw, 28px) clamp(20px, 3vw, 34px);
background: var(--glass-bg); /* mai transparent */
border: 1px solid var(--glass-brd); /* contur discret */
border-radius: 0; /* fără colțuri rotunjite */
backdrop-filter: blur(6px) saturate(125%); /* blur puțin mai mic */
-webkit-backdrop-filter: blur(6px) saturate(125%);
box-shadow: 0 18px 44px rgba(0,0,0,.16);
max-width: none; /* poate crește pe lățimea coloanei */
}
.vpv-lead{
color:#0f1216; font-size: clamp(15px, 1.25vw, 17px); /* text ușor mai mare */
line-height: 1.55; margin:0 0 12px;
}
.vpv-lead--muted{ opacity:.92; margin-bottom:0; }
/* ===== Pills — stil modern, elegant și așezare frumoasă ===== */
.vpv-bullets{
margin: clamp(16px, 3vw, 26px) auto 12px;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* grid fluid */
gap: 14px 18px;
align-items: stretch;
}
.vpv-bullet{
display:flex; align-items:center; gap:12px;
padding: 12px 16px;
border-radius: 16px; /* formă modernă (nu foarte rotundă) */
background: rgba(255,255,255,.55);
border: 1px solid rgba(0,0,0,.08);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 8px 18px rgba(0,0,0,.08);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vpv-bullet:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0,0,0,.12);
background: rgba(255,255,255,.68);
}
.vpv-ico{
display:grid; place-items:center;
width: 34px; height: 34px; border-radius:50%;
background:#fff; border:1px solid rgba(0,0,0,.06);
box-shadow: 0 2px 6px rgba(0,0,0,.08);
flex: 0 0 auto;
}
.vpv-btxt{
font-size: 15px; font-weight: 600; color:#1a1d22; letter-spacing:.1px;
}
/* ===== CTA (outline modern) ===== */
.vpv-cta{
display:inline-block; margin-top:18px; padding:10px 28px; font-weight:600;
border:1.8px solid #0d0f12; border-radius:50px; background:transparent; color:#0d0f12;
text-decoration:none; transition:all .25s ease;
}
.vpv-cta:hover{ background:#0d0f12; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.1); transform:translateY(-2px); }
/* ===== Video button ===== */
.vpv-play{
position:relative; justify-self:center; width:92px; height:92px; border:0; background:transparent; cursor:pointer;
}
.vpv-ring{ position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(0,0,0,.2); animation:vpv-pulse 2.4s infinite ease-out; }
.vpv-disc{ position:absolute; inset:0; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 12px 26px rgba(0,0,0,.22); }
.vpv-tri{ width:0; height:0; border-left:16px solid #0d0f12; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
@keyframes vpv-pulse{ 0%{opacity:.65; transform:scale(.9);} 100%{opacity:0; transform:scale(1.25);} }
/* ===== Reveal ===== */
[data-vpv-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-vpv-reveal].is-in{ opacity:1; transform:none; }
/* ===== Modal ===== */
.vpv-modal[hidden]{ display:none; }
.vpv-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.vpv-dialog{ position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(960px, 92vw); background:#000; border-radius:16px; overflow:hidden; box-shadow: var(--shadow); }
.vpv-iframe{ display:block; width:100%; height:min(60vh, 520px); }
.vpv-close{ position:absolute; top:8px; right:10px; background:transparent; color:#fff; border:0; font-size:28px; line-height:1; cursor:pointer; }
/* ===== Responsive ===== */
@media (max-width: 980px){
.vpv-container{ grid-template-columns: 1fr; }
.vpv-play{ order:-1; margin-bottom:12px; }
.vpv-title{ font-size: clamp(20px, 7vw, 36px); }
.vpv-bullets{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* ===== Bullets — small, flat, no radius, elegant black frame ===== */
.vpv-bullets{
margin: clamp(14px, 2.2vw, 20px) 0 6px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* mult mai mici */
gap: 10px 12px;
align-items: center;
}
.vpv-bullet{
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px; /* mai compact */
background: rgba(255,255,255,.14); /* sticlă subtilă */
border: 1.2px solid rgba(13,15,18,.6); /* ramă neagră elegantă */
border-radius: 0; /* fără colțuri rotunjite */
box-shadow: 0 6px 14px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.06);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.vpv-bullet:hover{
background: rgba(255,255,255,.22);
border-color: rgba(13,15,18,.75);
transform: translateY(-1px);
}
/* icon mic, pătrat, fără radius */
.vpv-ico{
width: 26px; height: 26px;
display: grid; place-items: center;
background: rgba(255,255,255,.9);
border: 1px solid rgba(13,15,18,.5);
border-radius: 0; /* fără radius */
color: #0d0f12;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
flex: 0 0 auto;
}
/* text mai discret și compact */
.vpv-btxt{
font-size: 14px;
font-weight: 600;
color: #0f1216;
letter-spacing: .1px;
line-height: 1.25;
}
/* layout mai strâns pe mobile */
@media (max-width: 768px){
.vpv-bullets{
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.vpv-bullet{ padding: 8px 10px; }
.vpv-btxt{ font-size: 13.5px; }
}
/* ============ LEGACY TIMELINE — clean (cool-slate) ============ */
#tl-legacy{
--ink:#0f172a; /* text principal */
--muted:#4b5563; /* descriere */
--axis:#d8dee9; /* axă + dot */
--bg1:#ffffff;
--bg2:#f5f7fb;
color:var(--ink);
background:linear-gradient(180deg,var(--bg1),var(--bg2));
/* mai puțin spațiu sus, echilibru jos */
padding: clamp(40px, 5vw, 80px) 0 clamp(60px, 6vw, 100px);
position:relative;
}
#tl-legacy .tl-wrap{
width:min(1180px,94vw);
margin:0 auto;
position:relative;
}
/* axă centrală */
#tl-legacy .tl-wrap::before{
content:"";
position:absolute; inset:0 auto 0 50%;
width:1px; transform:translateX(-.5px);
background:linear-gradient(180deg,transparent,var(--axis),transparent);
}
/* titlu secțiune */
#tl-legacy .tl-head{
font-family:"Playfair Display", ui-serif, Georgia, serif;
font-weight:500;
letter-spacing:.02em;
font-size:clamp(30px, 4.3vw, 46px);
margin:0 0 clamp(24px, 3.4vw, 52px);
color:#0f172a;
position:relative;
text-align:center;
isolation:isolate;
}
#tl-legacy .tl-head::after{
content:"";
position:absolute; left:50%; bottom:-10px;
width:60px; height:3px;
background:linear-gradient(90deg,#0f172a 0%,rgba(15,23,42,0) 100%);
transform:translateX(-50%);
border-radius:4px; opacity:.8;
}
/* item */
#tl-legacy .tl-item{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:clamp(28px,4vw,60px);
position:relative;
padding:clamp(28px,3vw,42px) 0;
}
#tl-legacy .tl-item + .tl-item{ margin-top:clamp(26px, 2.6vw, 50px); }
/* dot pe axă */
#tl-legacy .tl-dot{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:12px; height:12px; border-radius:50%;
background:var(--axis);
box-shadow:0 0 0 6px #fff;
}
/* col text */
#tl-legacy .tl-copy{ position:relative; }
#tl-legacy .tl-year{
position:absolute; left:0; top:-6px; pointer-events:none;
font-family:"Inter", system-ui, sans-serif;
font-weight:600;
font-size:clamp(84px,12vw,168px);
line-height:.9;
color:#0f172a; opacity:.05;
}
#tl-legacy .tl-text{
font:400 clamp(13px, .98vw, 15px)/1.85 "Times New Roman", system-ui, serif;
color:var(--muted);
max-width:70ch;
}
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
/* col imagine — mai îngustă, fără radius; imagini puțin mai joase */
#tl-legacy .tl-media{
justify-self:center;
max-width:480px;
width:100%;
background:#000;
box-shadow:0 24px 80px rgba(15,23,42,.12);
overflow:visible;
border-radius:8px;
}
#tl-legacy .tl-media img{
display:block; width:100%; height:auto;
aspect-ratio: 5 / 4; /* puțin mai joase decât 3/4 */
object-fit:cover;
border-radius:8px;
filter:saturate(1.04) contrast(1.02) brightness(.98);
transition:transform .6s cubic-bezier(.22,.68,.12,1);
}
#tl-legacy .tl-media:hover img{ transform:scale(1.03); }
/* alternanță L/R */
#tl-legacy .tl-item.is-right .tl-copy{ grid-column:2; }
#tl-legacy .tl-item.is-right .tl-media{ grid-column:1; }
/* reveal subtil (dacă ai JS-ul de reveal) */
#tl-legacy [data-tl-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
#tl-legacy .tl-in{ opacity:1 !important; transform:none !important; }
/* responsive: axa în stânga */
@media (max-width:980px){
#tl-legacy .tl-wrap::before{ left:24px; }
#tl-legacy .tl-item{ grid-template-columns:1fr; padding-left:42px; }
#tl-legacy .tl-item.is-right .tl-copy,
#tl-legacy .tl-item.is-right .tl-media{ grid-column:auto; }
#tl-legacy .tl-dot{ left:24px; }
#tl-legacy .tl-media{ max-width:84vw; }
#tl-legacy .tl-year{ font-size:clamp(72px,18vw,120px); }
}
/* ===== TITLU CU ACCENT VERTICAL STÂNGA — PREMIUM ===== */
.tl-item .tl-title {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #0d0f12;
display: flex;
align-items: center;
gap: 14px;
position: relative;
margin-bottom: 2.2rem;
line-height: 1.2;
}
/* Linie verticală elegantă în stânga */
.tl-item .tl-title::before {
content: "";
display: block;
width: 2px;
height: 56px;
background: #000;
border-radius: 1px;
}
/* Linia verticală — neagră, subțire și elegantă */
.tl-item .tl-title::before {
content: "";
display: block;
width: 2px; /* mai subțire decât înainte */
height: 52px;
background: #000; /* negru complet, fără gradient */
border-radius: 1px;
}
/* ===== TEXT EVIDENȚIAT ===== */
.tl-item .tl-text strong {
font-weight: 600;
color: #4D4C4C; /* gri închis elegant */
}
.tl-item .tl-text {
margin-bottom: 0.75rem; /* sau chiar 0.6rem dacă vrei mai strâns */
line-height: 1.65; /* păstrează lizibilitatea */
}
/* ================= MOBILE REFINEMENTS ================= */
/* Tablete mici / telefoane mari */
@media (max-width: 780px){
#tl-legacy{
padding: clamp(28px, 5vw, 40px) 0 clamp(36px, 6vw, 56px);
}
/* un singur col, axa în stânga (ai deja), dar cu spacing mai mic */
#tl-legacy .tl-item{
grid-template-columns: 1fr;
gap: clamp(16px, 3.5vw, 22px);
padding: 18px 0 22px 42px; /* loc pt axa din stânga */
}
/* titluri mult mai mici */
.tl-item .tl-title{
font-size: clamp(18px, 5.2vw, 24px);
margin-bottom: 1rem;
gap: 10px;
}
.tl-item .tl-title::before{
width: 2px;
height: 32px; /* mai scurt pe mobil */
}
/* paragrafe mai compacte */
.tl-item .tl-text{
font-size: 0.98rem;
line-height: 1.6;
margin-bottom: 0.6rem;
}
/* imagine mai mică, cu înălțime limitată */
#tl-legacy .tl-media{
max-width: 86vw;
box-shadow: 0 16px 48px rgba(15,23,42,.10);
}
#tl-legacy .tl-media img{
aspect-ratio: 4 / 3; /* mai lat, mai puțin înalt */
max-height: 260px; /* plafon pe mobil mare */
object-fit: cover;
}
/* anul mare din fundal să nu domine */
#tl-legacy .tl-year{
font-size: clamp(48px, 16vw, 88px);
opacity: .045;
top: -2px;
}
/* dot-ul mai mic */
#tl-legacy .tl-dot{ width: 10px; height: 10px; box-shadow: 0 0 0 5px #fff; }
}
/* Telefoane uzuale */
@media (max-width: 520px){
/* ascundem axa centrală pentru aer și simplitate */
#tl-legacy .tl-wrap::before{ display:none; }
#tl-legacy .tl-dot{ display:none; }
#tl-legacy .tl-item{
padding: 16px 0; /* fără indent stânga */
}
.tl-item .tl-title{
font-size: clamp(17px, 5vw, 22px);
gap: 10px;
}
.tl-item .tl-title::before{
height: 26px; /* accent mai discret */
}
.tl-item .tl-text{
font-size: 0.96rem;
line-height: 1.58;
margin-bottom: 0.55rem;
}
#tl-legacy .tl-media{
max-width: 92vw;
border-radius: 8px;
}
#tl-legacy .tl-media img{
aspect-ratio: 16 / 10;
max-height: 220px;
border-radius: 8px;
}
/* anul – foarte discret sau îl poți ascunde complet dacă vrei */
#tl-legacy .tl-year{
font-size: clamp(40px, 14vw, 64px);
opacity: .035;
}
}
/* Telefoane mici */
@media (max-width: 400px){
.tl-item .tl-title{
font-size: 1.05rem; /* foarte compact */
letter-spacing: .01em;
}
.tl-item .tl-title::before{
width: 1.5px;
height: 22px;
}
.tl-item .tl-text{
font-size: 0.94rem;
line-height: 1.55;
margin-bottom: 0.5rem;
}
#tl-legacy .tl-media img{
max-height: 200px;
}
#tl-legacy .tl-year{ opacity: .03; }
}
/* ===== OUR PATH — PREMIUM HEADING ===== */
#tl-legacy .tl-head{
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: 400; /* mai suplu, mai premium */
letter-spacing: .01em;
font-size: clamp(28px, 5vw, 56px);
line-height: 1.1;
color:#0c1220; /* navy foarte închis */
text-align:center;
margin: 0 0 clamp(26px, 4vw, 60px);
position: relative;
display: inline-block; /* ca să centreze decorația sub text */
left: 50%;
transform: translateX(-50%);
text-rendering: optimizeLegibility;
mrgin-bottom:20px;
}
/* elimină underline-ul vechi definit pe ::after (dacă există) */
#tl-legacy .tl-head::after{ all: unset; }
/* linie fină lungă (hairline) */
#tl-legacy .tl-head::after{
content:"";
position:absolute;
left:50%;
bottom:-16px;
transform:translateX(-50%);
width: min(360px, 48vw);
height:1px;
background: linear-gradient(
90deg,
rgba(12,18,32,0) 0%,
rgba(12,18,32,.18) 12%,
rgba(12,18,32,.28) 50%,
rgba(12,18,32,.18) 88%,
rgba(12,18,32,0) 100%
);
opacity:.9;
}
/* bară accent scurtă, groasă, perfect centrată */
#tl-legacy .tl-head::before{
content:"";
position:absolute;
left:50%;
bottom:-18px; /* ușor peste hairline */
transform:translateX(-50%);
width:64px;
height:3px;
border-radius:2px;
background:#0c1220;
filter: drop-shadow(0 1px 2px rgba(12,18,32,.15));
}
/* mică ajustare pe mobil */
@media (max-width:560px){
#tl-legacy .tl-head{
font-size: clamp(26px, 7vw, 36px);
margin-bottom: 34px;
}
#tl-legacy .tl-head::after{ width: min(240px, 70vw); bottom:-14px; }
#tl-legacy .tl-head::before{ width:44px; bottom:-16px; height:2.5px; }
}
#tl-legacy .tl-head {
margin-bottom: 80px; /* poți ajusta: 60–100px după gust */
}
#tl-legacy .tl-media img {
transform: scale(0.94);
transition: transform .6s cubic-bezier(.22,.68,.12,1);
}
#tl-legacy .tl-media:hover img {
transform: scale(0.98); /* efect subtil la hover */
}
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
/* ===== Vars ===== */
#about-services{
--ink:#121826; /* titlu & h3 */
--muted:#6b7a8a; /* paragrafe */
--card:#ffffff;
--bg-cream:#EDF7F7; /* crem cald spre baza */
--radius:14px;
--shadow-sm:0 12px 28px rgba(15,23,42,.12);
--shadow-lg:0 26px 60px rgba(15,23,42,.18);
}
/* ===== Section ===== */
#about-services{
position:relative;
padding: clamp(54px,8vw,120px) 0 clamp(70px,10vw,140px);
background:
linear-gradient(180deg,#ffffff 0%, #ffffff 30%, var(--bg-cream) 100%);
overflow:clip;
}
/* Halo difuz la bază */
#about-services::after{
content:"";
position:absolute; inset:auto 0 -12%;
height:48%;
background:radial-gradient(60% 80% at 50% 0%,
rgba(15,23,42,.18), rgba(15,23,42,0) 65%);
filter:blur(22px); opacity:.25; pointer-events:none;
}
#about-services .as-container{ width:min(1200px,92vw); margin-inline:auto; }
/* ===== Title ===== */
#about-services .as-title{
margin:0 0 clamp(28px,5vw,44px);
text-align:center;
color:var(--ink);
font:600 clamp(20px,4.4vw,42px)/1.06 "Times New Roman", Georgia, serif;
letter-spacing:.2px;
}
/* ===== Grid ===== */
#about-services .as-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap: clamp(18px,2.6vw,24px);
}
@media (max-width:1024px){
#about-services .as-grid{ grid-template-columns:1fr; }
}
/* ===== Cards (dimensiune & stil ca în poză) ===== */
#about-services .as-card{
background:#fff;
border-radius:0px;
border:1px solid rgba(18,24,38,.06);
padding:24px;
box-shadow:0 12px 28px rgba(15,23,42,.12);
transition:transform .22s ease, box-shadow .28s ease;
/* am șters min-height */
}
/* Umbra “ambient” sub card, ca în screenshot */
#about-services .as-card::after{
content:"";
position:absolute; left:6%; right:6%; bottom:-18px; height:26px;
border-radius:999px;
background:radial-gradient(60% 100% at 50% 0%,
rgba(15,23,42,.18), rgba(15,23,42,0) 70%);
filter:blur(10px); opacity:.4; z-index:-1;
}
#about-services .as-card:hover{
transform:translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: rgba(18,24,38,.10);
}
/* Tipografie card */
#about-services .as-h3{
margin:0 0 10px;
color:var(--ink);
font:800 clamp(16px,2.1vw,20px)/1.24 Playfair Display, Georgia, serif;
}
#about-services .as-p{
margin:0;
color:var(--muted);
font:400 clamp(14px,1.55vw,16px)/1.7 Playfair Display, Georgia, serif;
}
/* ===== Smooth reveal ===== */
.as-reveal{ opacity:0; transform: translateY(16px); }
.as-reveal.is-in{ opacity:1; transform:none; transition:.8s cubic-bezier(.22,.8,.25,1); }
@media (prefers-reduced-motion:reduce){
.as-reveal,.as-reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
}
.about-caption {
display: none;
}
.vpv-bullets { display: none !important; }