/* === Warmth — theme.css (variabile + 30 palete via JS + layout/componente comune). Partajat de TOATE paginile. === */ /* ============================================================ THEMING — 8 variabile --color-* per paletă (din brand_kits.md) Switcher-ul schimbă DOAR aceste 8 valori. Restul derivă cu color-mix(). ============================================================ */ :root, [data-palette="terracotta"]{ --color-primary:#C4734A; --color-secondary:#E8C9A0; --color-bg:#FAF4EC; --color-surface:#FFFFFF; --color-text:#3E2C20; --color-text-muted:#7A6555; --color-accent:#A85638; --color-border:#EBDCC9; } [data-palette="clay"]{ --color-primary:#A85B45; --color-secondary:#D9B08C; --color-bg:#F8F1E9; --color-surface:#FFFFFF; --color-text:#3A2820; --color-text-muted:#786056; --color-accent:#8C4332; --color-border:#E8D9CA; } [data-palette="honey"]{ --color-primary:#CB8A3E; --color-secondary:#E8D0A0; --color-bg:#FBF6EC; --color-surface:#FFFFFF; --color-text:#3E3018; --color-text-muted:#7C6B4E; --color-accent:#A86E28; --color-border:#EDE2CC; } :root{ /* Tipografie — per template (Warmth) */ --font-heading:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-body:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif; /* Scale modulară 1.25 */ --text-xs:.8rem; --text-sm:1rem; --text-base:1.25rem; --text-lg:1.563rem; --text-xl:1.953rem; --text-2xl:2.441rem; --text-3xl:3.052rem; /* Spacing */ --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:8rem; /* Personalitate Warmth: radius mediu, shadow cald */ --radius:8px; --radius-lg:16px; --radius-pill:50px; --shadow:0 6px 28px color-mix(in srgb,var(--color-text) 10%,transparent); --shadow-sm:0 2px 10px color-mix(in srgb,var(--color-text) 7%,transparent); --t:.3s cubic-bezier(.4,0,.2,1); /* DERIVATE (auto-update la schimbarea paletei) */ --tint:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface)); --tint-2:color-mix(in srgb,var(--color-secondary) 32%,var(--color-bg)); --tint-icon:color-mix(in srgb,var(--color-secondary) 55%,var(--color-surface)); --cta-bg:color-mix(in srgb,var(--color-accent),#000 10%); /* WCAG AA: alb pe cta-bg ≥4.5:1 toate paletele */ --on-primary:#FFFFFF; --cta-hover:color-mix(in srgb,var(--color-accent),#000 26%); --link:color-mix(in srgb,var(--color-accent),#000 16%); --ring:color-mix(in srgb,var(--color-primary) 50%,transparent); /* Footer & zone „pe întuneric": rămân închise pe ORICE paletă (inclusiv inversate) */ --dark-bg:color-mix(in srgb,var(--color-accent) 16%,#16130f); --on-dark:#F4EFE8; --on-dark-muted:color-mix(in srgb,#F4EFE8 62%,transparent); --on-dark-border:color-mix(in srgb,#F4EFE8 14%,transparent); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .site-header.stuck,.search-overlay{backdrop-filter:none!important}} body{ background:var(--color-bg);color:var(--color-text); font-family:var(--font-body);font-size:1rem;line-height:1.7;font-weight:400; -webkit-font-smoothing:antialiased; /* textură caldă subtilă */ background-image:radial-gradient(at 12% 0%,color-mix(in srgb,var(--color-secondary) 22%,transparent),transparent 42%),radial-gradient(at 88% 6%,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 40%); background-attachment:fixed; } img{max-width:100%;height:auto;display:block} a{color:var(--link);text-decoration:none;text-underline-offset:3px} :focus-visible{outline:2.5px solid var(--ring);outline-offset:3px;border-radius:3px} h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--fw-head,300);line-height:1.12;letter-spacing:-.01em} em{font-style:italic;color:var(--color-accent)} /* Skip link */ .skip{position:absolute;left:-999px;top:0;background:var(--color-text);color:var(--color-bg);padding:.7rem 1.2rem;border-radius:0 0 var(--radius) 0;z-index:200} .skip:focus{left:0} /* Layout */ .inner{max-width:1320px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)} section{padding:var(--space-lg) 0} .eyebrow{font-size:.72rem;letter-spacing:var(--ls-eyebrow,.22em);text-transform:uppercase;color:var(--color-accent);font-weight:500;display:inline-flex;align-items:center;gap:.6rem} .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--color-accent)} .eyebrow.center{justify-content:center} h2.h{font-size:clamp(1.9rem,4vw,var(--text-2xl));margin:.6rem 0 1rem} .lead{color:var(--color-text-muted);max-width:54ch} .sec-head{max-width:640px} .sec-head.center{margin-inline:auto;text-align:center} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:var(--font-body);font-size:.78rem;letter-spacing:var(--ls-btn,.1em);text-transform:uppercase;font-weight:500;padding:.85rem 1.7rem;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;border:1.5px solid var(--color-border);background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface));color:var(--color-text);transition:all var(--t)} .btn:hover{background:var(--tint);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border))} /* static: schimba fundalul (umbra/pop-up vin din nivelul de animatie) */ .btn-primary{background:var(--cta-bg);color:var(--on-primary);border-color:transparent} .btn-primary:hover{background:var(--cta-hover)} .btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)} .btn-ghost:hover{background:var(--tint);border-color:var(--color-text)} .btn svg{width:15px;height:15px} /* ============ Top bar (3 zone: stânga/centru/dreapta) ============ */ .topbar{background:var(--dark-bg);color:var(--on-dark-muted);font-size:.78rem} .topbar-inner{max-width:1320px;margin:0 auto;padding:.5rem clamp(1.2rem,4vw,3rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem} .tb-item{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none;font:inherit;background:none;border:none;cursor:default;transition:color var(--t)} .tb-addr{justify-self:start} .tb-phone{justify-self:center} .tb-hours{justify-self:end} .tb-addr,.tb-phone{cursor:pointer} .tb-addr:hover,.tb-phone:hover{color:var(--on-dark)} .tb-item svg{width:15px;height:15px;flex:0 0 auto;opacity:.85} /* ===== Selector de limba (i18n) — compact: glob + cod + sageata, dropdown la click (
, fara JS). Desktop: in bara de nav, langa lupa. Mobil: langa logo. Apare doar daca _locales.json are >=2 limbi (add-on). ===== */ .lang-switch{position:relative;flex:0 0 auto} .lang-switch summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;padding:.32rem .42rem;border-radius:var(--radius);color:var(--color-text);font-size:.78rem;font-weight:600;line-height:1;transition:background var(--t)} .lang-switch summary::-webkit-details-marker{display:none} .lang-switch summary:hover{background:var(--tint)} /* fără steaguri (steagul = țară, nu limbă): închis = glob + cod; dropdown = COD - Autonim (RO - Română) */ .lang-globe{width:16px;height:16px;flex:0 0 auto;opacity:.8} .lang-code{letter-spacing:.04em} .lang-caret{width:13px;height:13px;opacity:.65;transition:transform var(--t);margin-left:-3px} /* compensează spațiul alb intern al SVG-ului → săgeata vizual aproape de cod */ .lang-switch[open] .lang-caret{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + .15rem);right:0;min-width:max-content;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 10px 28px color-mix(in srgb,var(--color-text) 24%,transparent),0 2px 8px color-mix(in srgb,var(--color-text) 15%,transparent);padding:.18rem;display:flex;flex-direction:column;gap:0;z-index:140} .lang-opt{display:flex;align-items:center;gap:.3rem;padding:.26rem .8rem .26rem .5rem;line-height:1;border-radius:6px;text-decoration:none;color:var(--color-text);font-size:.78rem;font-weight:600;white-space:nowrap} .lang-opt:hover{background:var(--tint)} .lang-opt.is-current{color:var(--color-accent)} .lang-sep{opacity:.45} .lang-opt .lang-name{font-weight:500;text-transform:none;letter-spacing:0} /* selector + iconiță info „multi-limbă = add-on" (demo-only). Tooltip propriu (în theme.css, pe toate paginile; cel din editorial.css e scopat pe share). */ .lang-box{position:relative;display:inline-flex;align-items:center;gap:.18rem} .lang-info{background:none;border:none;padding:.18rem;margin:0;cursor:help;color:#d63333;display:inline-flex;align-items:center;line-height:0;border-radius:50%;transition:color var(--t)} /* ROȘU = evident că e add-on */ .lang-info:hover,.lang-info:focus-visible{color:#b02525} .lang-info svg{width:15px;height:15px} /* iconița ABSOLUTĂ (iese din flux) -> switcher-ul se termină la marginea conținutului paginii, iar ⓘ străpunge padding-ul. Desktop: ⓘ în dreapta (în padding-ul drept); cluster-ul CTA·lupă·EN rămâne tot la fel (lupa centrată). */ .nav-lang-li .lang-info{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:2px} /* ⓘ lipit de marginea boxului switcherului (~2px) */ .lang-info[data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);right:0;width:max-content;max-width:230px;white-space:normal;background:var(--color-text);color:var(--color-bg);font-family:var(--font-body);font-size:.72rem;font-weight:500;line-height:1.45;text-transform:none;letter-spacing:0;text-align:left;padding:.5rem .65rem;border-radius:8px;box-shadow:0 8px 22px -6px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;z-index:200} /* desktop = hover; touch = tap (clasa .tip-open pusă de app.js); + focus tastatură */ .lang-info[data-tooltip]:focus-visible::after,.lang-info[data-tooltip].tip-open::after{opacity:1;transform:translateY(0)} @media (hover:hover){.lang-info[data-tooltip]:hover::after{opacity:1;transform:translateY(0)}} .nav-lang-li{display:flex;align-items:center} /* i18n: cluster compact CTA·lupă·EN DOAR când selectorul e RANDAT (.lang-switch există = multi-limbă; li-ul .nav-lang-li există mereu, dar gol pe mono-limbă). Mono-limbă rămâne neatins. */ .nav-links:has(.lang-switch) .nav-search-li{margin-left:-1.1rem} /* lupă lângă „Programează-te" (în loc de gap-ul de 2rem al meniului) */ .nav-links:has(.lang-switch) .nav-lang-li{margin-left:-1.5rem} /* EN lângă lupă; tras mai mult ca să compenseze padding-ul stânga al summary-ului → lupă vizual centrată (18px ≈ 19px) */ /* Dialog navigație */ .nav-dialog{position:fixed;inset:0;z-index:135;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-text) 45%,transparent)} .nav-dialog.open{display:flex;animation:fade .2s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .nav-dialog-inner{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.8rem;max-width:340px;width:calc(100% - 2.4rem);position:relative;text-align:center} .nav-dialog-close{position:absolute;top:.6rem;right:.8rem;background:none;border:none;font-size:1.6rem;line-height:1;color:var(--color-text-muted);cursor:pointer} .nd-title{font-family:var(--font-heading);font-size:1.4rem;margin-bottom:.4rem} .nd-addr{color:var(--color-text-muted);font-size:.9rem;margin-bottom:1.3rem} .nd-actions{display:flex;gap:.6rem;justify-content:center} /* ============ Header / nav ============ */ .site-header{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--color-bg) 96%,transparent);border-bottom:1px solid color-mix(in srgb,var(--color-border) 60%,transparent);transition:transform .35s ease,background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease} .site-header.stuck{background:color-mix(in srgb,var(--color-bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 2px 20px color-mix(in srgb,var(--color-text) 7%,transparent);border-bottom-color:transparent} .site-header.hide{transform:translateY(-100%)} .site-header.nav-open{z-index:100;backdrop-filter:none!important;transform:none!important;background:transparent;border-bottom-color:transparent;box-shadow:none} .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1.2rem,4vw,3rem);max-width:1320px;margin:0 auto} .logo{font-family:var(--font-heading);font-size:1.6rem;font-weight:500;color:var(--color-text);text-decoration:none;letter-spacing:.01em;white-space:nowrap} .logo span{color:var(--color-primary);font-style:italic} /* Logo-imagine opțional (business.logo): gol -> img eliminat la build (ramane textul); prezent -> doar imaginea */ .logo{display:inline-flex;align-items:center} .logo .logo-img{display:block;max-height:46px;width:auto} .logo:has(.logo-img[src]:not([src=""])) .logo-text{display:none} .nav-drawer-logo .logo-img{display:block;max-height:38px;width:auto;margin-inline:auto} .nav-drawer-logo:has(.logo-img[src]:not([src=""])) .logo-text{display:none} .fcol .foot-logo .logo-img{display:block;max-height:54px;width:auto} .fcol .foot-logo:has(.logo-img[src]:not([src=""])) .logo-text{display:none} .logo-img:not([src]),.logo-img[src=""]{display:none} /* hook logo fără sursă = invizibil, DAR rămâne în base/ pt overlay CMS self-serve (owner încarcă logoul luni după build); regulă LAST → bate display:block prin ordine */ .nav-links{display:flex;align-items:center;gap:2rem;list-style:none} .nav-links a{text-decoration:none;color:var(--color-text-muted);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:color var(--t)} .nav-links a:hover{color:var(--color-accent)} .nav-links > li[data-content-item]{display:flex;align-items:center} /* aliniere verticală uniformă: items cu/fără săgeată pe aceeași linie */ .nav-links > li[data-content-item] > a{flex:1 1 auto} .nav-cta{padding:.6rem 1.4rem;border-radius:var(--radius-pill);background:var(--cta-bg);color:var(--on-primary)!important;font-size:.78rem;white-space:nowrap} .nav-cta:hover{background:var(--cta-hover)} .nav-cta-li{display:inline-flex;align-items:center} /* desktop: arată „Programează-te" (între Contact și lupă) */ .nav-cta-li .nav-cta-call{display:none} /* „Sună" rămâne doar în drawer-ul mobil */ .nav-search{background:none;border:none;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;padding:.25rem;transition:color var(--t)} .nav-search:hover{color:var(--color-accent)} .nav-search svg{width:19px;height:19px} .nav-toggle,.nav-search-mobile{display:none;background:none;border:none;cursor:pointer;color:var(--color-text);padding:.3rem;align-items:center;justify-content:center} .nav-toggle svg,.nav-search-mobile svg{width:23px;height:23px} .nav-lang-mobile{display:none} /* selector limbă mobil (header, lângă lupă) — pe desktop e .nav-lang-li */ /* elemente afișate doar în drawer (mobil) */ .nav-drawer-head,.nav-drawer-search,.nav-drawer-social{display:none} /* ============ Submeniu nav (Echipa → specialiști) ============ */ .nav-has-sub{position:relative;display:flex;align-items:center;gap:.1rem} /* săgeată mai aproape de element */ .nav-sub{list-style:none;margin:0;padding:0} .nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:.08rem;cursor:pointer;color:var(--color-text-muted);transition:color var(--t)} .nav-sub-toggle:hover{color:var(--color-accent)} .nav-sub-chev{width:13px;height:13px;transition:transform var(--t)} .nav-has-sub.is-open > .nav-sub-toggle .nav-sub-chev{transform:rotate(180deg)} /* doar chevron-ul DIRECT (nu al categoriilor copil) */ .nav-sub a{display:block;color:var(--color-text);text-transform:none} .nav-sub a:hover{color:var(--color-accent)} .nav-sub a.is-active{font-weight:600} /* Desktop: dropdown ancorat sub „Echipa" (hover / focus-within / click-pin) */ @media (min-width:1025px){ .nav-sub{position:absolute;top:calc(100% + .4rem);left:50%;min-width:max-content;padding:.45rem; background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 60%,transparent); border-radius:var(--radius-lg);box-shadow:var(--shadow);z-index:95; opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px); transition:opacity .22s ease,transform .22s ease,visibility .22s ease} .nav-has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:.5rem} /* punte de hover link↔panou */ .nav-has-sub:hover > .nav-sub,.nav-has-sub:focus-within > .nav-sub,.nav-has-sub.is-open > .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .nav-links > .nav-has-sub:hover > .nav-sub-toggle .nav-sub-chev,.nav-links > .nav-has-sub:focus-within > .nav-sub-toggle .nav-sub-chev{transform:rotate(180deg)} .nav-sub a{padding:.5rem .85rem;border-radius:var(--radius);white-space:nowrap;font-size:.85rem;letter-spacing:.02em} .nav-sub a:hover{background:var(--tint)} /* Nivel 2 (categorie ▸ servicii): flyout lateral spre dreapta */ .nav-lvl2{width:100%} .nav-lvl2 > a{flex:1 1 auto} .nav-lvl2 > .nav-sub-toggle .nav-sub-chev{transform:rotate(-90deg)} .nav-lvl2 > .nav-sub{top:-.5rem;left:calc(100% + .35rem);transform:translate(8px,0)} .nav-lvl2::after{top:0;bottom:0;left:100%;right:auto;width:.5rem;height:auto} /* punte hover laterala */ .nav-lvl2:hover > .nav-sub,.nav-lvl2:focus-within > .nav-sub,.nav-lvl2.is-open > .nav-sub{transform:translate(0,0)} /* Item de meniu activ: scos in evidenta prin ridicare usoara + font putin mai mare (fara fundal); culoarea accent o are deja din .nav-links a.is-active */ .nav-links > li > a.is-active{position:relative;top:-3px;font-size:.88rem} .nav-has-sub > a.is-active + .nav-sub-toggle{position:relative;top:-3px} } /* ============ Hero ============ */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-lg);align-items:center;padding-top:var(--space-lg);padding-bottom:var(--space-lg)} .hero h1{font-size:clamp(2.6rem,5.5vw,4.4rem);margin:1rem 0 .6rem} .hero-sub{font-family:var(--font-heading);font-style:italic;font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:1.2rem} .hero-desc{color:var(--color-text-muted);max-width:46ch;margin-bottom:2rem} .actions{display:flex;flex-wrap:wrap;gap:.8rem} /* CRO: reasigurare sub CTA hero (C1) · urgenta programare (C2) · dovada sociala la formular (C3) */ .hero-cta-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.85rem;color:var(--color-text-muted)} .hero-cta-note svg{width:1.05em;height:1.05em;color:var(--color-primary);flex:0 0 auto} .contact-urgency{display:inline-flex;align-items:center;gap:.5rem;margin:.1rem 0 1.3rem;font-size:.82rem;color:var(--color-accent);background:var(--tint);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:.45rem .9rem;line-height:1.3} .contact-urgency svg{width:1.05em;height:1.05em;flex:0 0 auto} .form-trust{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.84rem;color:var(--color-text-muted);margin:0 0 .9rem;text-align:center} .form-trust .ft-stars{color:#E0A23A;letter-spacing:1px} .form-trust b{color:var(--color-text);font-weight:600} .hdr-rating{display:inline-flex;align-items:center;gap:.4rem;margin:1.1rem 0 0;font-size:.86rem;color:var(--color-text-muted)} .hdr-rating .hr-stars{color:#E0A23A;letter-spacing:1px} .hdr-rating b{color:var(--color-text);font-weight:600} /* CRO C6: teaser Echipă pe home — fețe în cerc cu focal-point (object-position din _team.json) */ .team-teaser{background:color-mix(in srgb,var(--color-secondary) 14%,var(--color-bg))} .tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:720px;margin:2.2rem auto 0} .tt-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;text-decoration:none;color:var(--color-text)} .tt-photo{width:128px;height:128px;border-radius:50%;overflow:hidden;background:var(--tint-icon);display:flex;align-items:center;justify-content:center;position:relative} .tt-photo img{width:100%;height:100%;object-fit:cover;display:block} .tt-photo.noimg img{display:none} .tt-init{position:absolute;font-family:var(--font-heading);font-size:2.6rem;color:var(--color-accent);display:none} .tt-photo.noimg .tt-init{display:block} .tt-name{font-weight:500;font-size:1.08rem;margin-top:.5rem} .tt-role{font-size:.85rem;color:var(--color-text-muted)} .tt-photo,.tt-photo img{transition:box-shadow .25s ease,transform .35s ease} .tt-card:hover .tt-name{color:var(--color-accent);font-weight:600} html[data-animation="usoara"] .tt-card:hover .tt-photo,html[data-animation="abundenta"] .tt-card:hover .tt-photo{box-shadow:0 12px 26px -10px color-mix(in srgb,var(--color-text) 32%,transparent)} html[data-animation="abundenta"] .tt-card:hover .tt-photo img{transform:scale(1.08)} @media(max-width:600px){.tt-grid{gap:.7rem}.tt-photo{width:88px;height:88px}.tt-init{font-size:1.9rem}.tt-name{font-size:.92rem}.tt-role{font-size:.76rem}} .stats{display:flex;gap:2.2rem;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--color-border)} .stat b{font-family:var(--font-heading);font-weight:400;font-size:2rem;display:block;line-height:1} .stat span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)} .hero-media{position:relative} .hero-img{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(150deg,var(--tint-2),var(--tint-icon));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);position:relative} /* .real-img absolut DOAR în sloturile hibride (hero/antet, position:relative); în carduri imaginea se stilizează per-container */ .hero-img .real-img,.ph-figure .real-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .hero-img picture,.about-figure picture,.post picture{position:absolute;inset:0} .ph{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:color-mix(in srgb,var(--color-accent) 70%,transparent);font-family:var(--font-heading);font-style:italic;font-size:.9rem;letter-spacing:.08em;text-align:center;padding:1rem} .ph svg{width:54px;height:54px;opacity:.7} .hero-badge{position:absolute;left:0;transform:translateX(-50%);bottom:28px;max-width:230px;background:var(--color-surface);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;box-shadow:var(--shadow);z-index:3} .hero-badge p{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;line-height:1.45;margin-bottom:.5rem} .hero-badge cite{font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)} /* ============ About / team ============ */ .about{background:var(--color-surface)} .about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--space-lg);align-items:center} .about-figure{aspect-ratio:3/4;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--tint-2),var(--tint-icon));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .about p+p{margin-top:1rem} .team{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:var(--space-lg)} .team>*{flex:0 1 calc((100% - 2.4rem)/3);min-width:240px;max-width:360px} .member{text-align:center;display:flex;flex-direction:column;border-radius:var(--radius-lg);border:1px solid transparent;padding:.35rem 1rem 1.15rem} .member-photo{aspect-ratio:1;border-radius:var(--radius-lg);background:linear-gradient(150deg,var(--tint-icon),var(--tint-2));margin-bottom:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)} .member h3{font-size:var(--text-base);font-weight:500;margin-bottom:.1rem} .member .role{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem} .member p{font-size:.9rem;color:var(--color-text-muted)} .member .socials{display:flex;gap:.6rem;justify-content:center;margin-top:.7rem} .member .socials a{color:var(--color-text-muted)} .member .socials svg{width:17px;height:17px} /* ============ Catalog ============ */ .cat-cat{margin-top:var(--space-md)} .cat-cat>h3{font-size:var(--text-xl);margin-bottom:.2rem;display:flex;align-items:baseline;gap:.7rem} .cat-cat>h3::after{content:"";flex:1;height:1px;background:var(--color-border)} .cat-desc{color:var(--color-text-muted);font-size:.92rem;margin-bottom:1.2rem} .cat-sub{margin-top:1.4rem} .cat-sub>h4{font-size:1.02rem;font-family:var(--font-body);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.8rem} .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem} .item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)} .item-img{aspect-ratio:16/10;background:linear-gradient(150deg,var(--tint-2),var(--tint-icon));display:flex;align-items:center;justify-content:center} .item-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;flex:1} .item-title{font-family:var(--font-heading);font-size:1.3rem;font-weight:var(--fw-display,500);margin-bottom:.25rem} .item-desc{font-size:.88rem;color:var(--color-text-muted);margin-bottom:.9rem} .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem} .tag{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;background:var(--tint);color:var(--color-accent);padding:.2rem .6rem;border-radius:var(--radius-pill)} .opts{padding-top:.4rem;margin-bottom:.9rem;display:flex;flex-direction:column;gap:.55rem} .opt-label{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);display:block;margin-bottom:.3rem} .opt-row{display:flex;flex-wrap:wrap;gap:.4rem} .chip{font-size:.78rem;border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-pill);padding:.32rem .8rem;cursor:pointer;transition:all var(--t)} .chip[aria-pressed="true"]{border-color:var(--color-primary);background:var(--tint);color:var(--color-accent);font-weight:500} .item-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem} /* Card catalog EVENT: from_price (string liber) + capacitate (linie muted, ca .svc-dur) */ .price--event{font-weight:600;color:var(--color-primary);font-size:1.02rem} .item-cap{display:block;font-size:.78rem;color:var(--color-text-muted);margin-top:.2rem} /* CRO S2: card serviciu — la hover pe CARD doar bordura devine accent; CTA se umple terracotta DOAR la hover pe buton. FĂRĂ schimbare de geometrie pe hover (doar culori) → fără flicker la marginea butonului. */ .cat-items .item:hover{border-color:color-mix(in srgb,var(--color-accent) 55%,var(--color-border))} .cat-items .item-foot .btn-ghost{transition:background var(--t),border-color var(--t),color var(--t)} .cat-items .item-foot .btn-ghost:hover{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--on-primary)} /* fix flicker: butonul din cardul de serviciu nu adaugă propriul translateY (cardul deja face translateY la „abundenta") */ html[data-animation="abundenta"] .cat-items .item .btn:hover{transform:none} .price{font-family:var(--font-heading);font-size:1.5rem;font-weight:500;line-height:1} .price small{font-family:var(--font-body);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);font-weight:400;display:block;margin-top:.2rem} /* Nota de preț LÂNGĂ preț (#1583/#1584): text normal, nu majuscule — e o propoziție („o dată, apoi 59 €/lună”), nu o unitate. */ .price .price-note{text-transform:none;letter-spacing:0;font-size:.78rem;display:block;margin-top:.25rem;line-height:1.35} .pt-price .price-note{display:inline;font-size:.8rem;color:var(--color-text-muted);font-weight:400;margin-left:.3rem} .price .from{font-size:.66rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em} .btn-sm{font-size:.68rem;padding:.6rem 1.05rem} /* ============ Card recenzii/testimoniale (REUTILIZAT, light band sus) ============ */ .reviews{background:linear-gradient(180deg,var(--tint),var(--color-surface))} .rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:var(--space-md)} .gscore{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .gscore .num{font-family:var(--font-heading);font-size:2.6rem;color:var(--color-accent);line-height:1} .gscore .gmeta{font-size:.82rem;color:var(--color-text-muted)} .gbadge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);text-decoration:none;padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface)} .gbadge:hover{border-color:var(--color-primary)} .gbadge svg{width:16px;height:16px} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .rev{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)} .stars{color:var(--color-primary);letter-spacing:.12em;font-size:.85rem;margin-bottom:.8rem} .rev p{font-family:var(--font-heading);font-style:italic;font-size:1.18rem;line-height:1.55;color:var(--color-text);margin-bottom:1rem} .rev .who{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);font-weight:500} .rev .when{font-size:.7rem;color:var(--color-text-muted);margin-top:.15rem} .rev-author{display:flex;align-items:center;gap:.7rem;margin-top:.2rem} .rev-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--tint-icon);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.1rem;color:var(--color-accent);font-weight:500} .gsnap{font-size:.7rem;color:var(--color-text-muted);margin-top:.3rem} /* Pagină dedicată Recenzii (recenzii.html): intro deasupra + CTA Google sub secțiunea {{REVIEWS}}. Padding explicit (capcana section{padding:4rem 0}). */ .rev-page-lead{padding:1.4rem 0 0} .rev-page-lead .rev-intro{max-width:62ch;margin:0 auto;text-align:center;color:var(--color-text-muted);line-height:1.6} .rev-page-cta{padding:1.6rem 0 var(--space-lg,3.5rem);text-align:center} /* ============ Servicii teaser ============ */ .srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:var(--space-md)} .srv-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem 1.8rem;transition:transform var(--t),box-shadow var(--t);text-decoration:none;color:inherit;display:block} .srv-ic{width:58px;height:58px;border-radius:var(--radius-lg);background:var(--tint-icon);display:flex;align-items:center;justify-content:center;color:var(--color-accent);margin-bottom:1.2rem} .srv-ic svg{width:30px;height:30px} .srv-card h3{font-size:var(--text-lg);font-weight:500;margin-bottom:.5rem} .srv-card p{font-size:.92rem;color:var(--color-text-muted);margin-bottom:1.1rem} .srv-from{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)} .srv-from b{font-family:var(--font-heading);font-size:1.4rem;color:var(--color-text);font-weight:500} /* ============ Blog recent ============ */ .posts{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem;margin-top:var(--space-md)} .posts>*{flex:0 1 calc((100% - 2.6rem)/3);min-width:260px;max-width:380px} .post{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)} html[data-animation="abundenta"] .post{transition:transform .25s ease,box-shadow .25s ease} .post-img{aspect-ratio:16/9;background:linear-gradient(150deg,var(--tint-2),var(--tint-icon));position:relative;overflow:hidden} .post-body{padding:1.1rem 1.2rem 1.3rem} .post-meta{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem} .post h3{font-size:var(--text-base);font-weight:500;margin-bottom:.4rem} .post-ex{font-size:.88rem;color:var(--color-text-muted)} .blog-foot{text-align:center;margin-top:var(--space-md)} /* ============ FAQ ============ */ .faq-wrap{max-width:760px;margin:var(--space-md) auto 0} .faq{border-bottom:1px solid var(--color-border)} .faq summary{cursor:pointer;list-style:none;padding:1.15rem .2rem;font-family:var(--font-heading);font-size:1.32rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-body);font-weight:300;font-size:1.6rem;color:var(--color-accent);transition:transform var(--t)} .faq[open] summary::after{transform:rotate(45deg)} .faq .ans{padding:0 .2rem 1.2rem;color:var(--color-text-muted);max-width:64ch} /* Titlu de grup FAQ (când _faq.json are categorii;

intercalat între
) */ .faq-group-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;margin:2rem 0 .1rem} .faq-group-title:first-child{margin-top:0} /* ============ Contact + form ============ */ .contact{background:var(--color-bg);scroll-margin-top:90px} #harta{scroll-margin-top:90px} .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-lg);align-items:start} .cdetails{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.4rem} .cdetail{display:flex;gap:.9rem;align-items:flex-start} .cdetail .ic{flex:0 0 38px;height:38px;border-radius:50%;background:var(--tint-icon);display:flex;align-items:center;justify-content:center;color:var(--color-accent)} .cdetail .ic svg{width:18px;height:18px} .cdetail .lab{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)} .cdetail .val{font-size:.98rem} .cform{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.8rem} .form-head{text-align:center;max-width:560px;margin:0 auto var(--space-md)} .form-head .eyebrow{justify-content:center} .form-head .lead{margin-inline:auto} .contact .cform{max-width:620px;margin:0 auto} .field .opt{text-transform:none;letter-spacing:0;color:var(--color-text-muted)} .cform h3{font-size:var(--text-lg);font-weight:400;margin-bottom:.2rem} .cform .sub{font-size:.85rem;color:var(--color-text-muted);margin-bottom:1.3rem} .field{margin-bottom:.9rem} .field label{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.35rem} .field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:.92rem;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius);padding:.7rem .9rem;transition:border-color var(--t)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary)} .field textarea{resize:vertical;min-height:90px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cform button{width:100%;margin-top:.4rem;justify-content:center;border:none} /* ============ Calendar (placeholder add-on) ============ */ .calendar-sec{background:var(--color-bg)} .cal-box{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:center;background:linear-gradient(150deg,var(--tint),var(--tint-2));border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md)} .cal-embed{background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-lg);min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:var(--color-text-muted);text-align:center} .cal-embed svg{width:54px;height:54px;color:var(--color-accent);opacity:.7} .cal-embed small{font-size:.78rem} /* ============ Hartă (jos) ============ */ .map-sec{background:var(--color-surface);text-align:center} .map-h{font-size:clamp(1.7rem,3vw,var(--text-2xl))} .map-lead{margin:.3rem auto 1.5rem} .map-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:1rem;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);padding:.7rem 1.4rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;font-family:var(--font-body);color:var(--color-text);transition:all var(--t)} .map-toggle:hover{border-color:var(--color-primary)} .map-sum-txt{display:inline-flex;align-items:center;gap:.5rem} .map-sum-txt svg{width:17px;height:17px;color:var(--color-accent)} .map-chev{font-size:1.3rem;font-weight:300;color:var(--color-accent);transition:transform var(--t)} .map-toggle[aria-expanded="true"] .map-chev{transform:rotate(45deg)} .map-facade{position:relative;margin-top:1.2rem;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:clamp(380px,46vw,560px);overflow:hidden;background:linear-gradient(150deg,var(--tint-2),var(--tint-icon))} .map-facade iframe{width:100%;height:100%;border:0;display:block} .map-nav{display:flex;gap:.7rem;justify-content:center;margin-top:.6rem} .map-nav-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-top:1.4rem} /* Waze/Maps utile doar pe device-uri de navigație (mobil/tabletă); ascunse pe desktop */ @media (min-width:1025px){.map-nav-wrap{display:none}} @media (max-width:900px){.cal-box{grid-template-columns:1fr;gap:var(--space-md)}.cal-embed{min-height:180px}} /* ============ Footer ============ */ .site-footer{background:var(--dark-bg);color:var(--on-dark-muted);padding:var(--space-lg) 0 var(--space-md)} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem} .foot-cols2{display:contents} /* Banda de abonare newsletter din footer (compacta, globala) */ .foot-news{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2.5rem;padding-bottom:var(--space-md);margin-bottom:var(--space-md);border-bottom:1px solid var(--on-dark-border)} .foot-news .fn-copy{flex:1 1 280px} .foot-news .fn-title{font-family:var(--font-heading);font-weight:var(--fw-display,500);font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.12;color:var(--on-dark);margin:0 0 .35rem;text-transform:none;letter-spacing:normal} .foot-news .fn-note{font-size:.86rem;line-height:1.5;color:var(--on-dark-muted);margin:0;max-width:48ch} .foot-news .fn-form{flex:0 0 auto;width:min(380px,100%)} .foot-news .nl-err{color:#f0a89e;font-size:.8rem;margin:.45rem 0 0} .fcol .foot-logo{font-family:var(--font-heading);font-size:2rem;color:var(--on-dark);margin-bottom:.6rem;text-decoration:none;display:inline-block;line-height:1} .fcol .foot-logo span{color:var(--color-primary);font-style:italic;font-size:inherit} .site-footer h3{font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);margin-bottom:.9rem;font-weight:500} .fcol ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} .fcol a{color:var(--on-dark-muted);text-decoration:none;font-size:.86rem} .fcol a:hover{color:var(--color-secondary)} .fsoc{display:flex;gap:.7rem;margin-top:.4rem} .foot-contact{margin:.9rem 0 .2rem;font-size:.84rem;line-height:1.5} .foot-addr{color:var(--on-dark-muted);margin-bottom:.3rem} .foot-hours{color:var(--on-dark-muted);margin-bottom:.3rem} .foot-cline{display:flex;flex-direction:column;gap:.08rem;margin-bottom:.3rem} .foot-cline a{color:var(--on-dark);text-decoration:none} .foot-cline a:hover{color:var(--color-secondary)} .fc-tag{color:var(--on-dark-muted);margin-right:.4rem} .fsoc a{color:var(--on-dark-muted)} .fsoc svg{width:19px;height:19px} .foot-bottom{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:0;padding-top:1.3rem;border-top:1px solid var(--on-dark-border);font-size:.78rem} .foot-bottom .copy{text-align:right;flex:1 1 0;min-width:0} .foot-bottom .sep{color:color-mix(in srgb,#fff 30%,transparent);flex:0 0 auto} .foot-bottom .backlink{text-align:left;flex:1 1 0;min-width:0} .backlink{color:var(--on-dark-muted)} .backlink a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px} .backlink a:hover{color:#fff} .foot-consumer{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,9vw,9rem);align-items:center;justify-content:center;margin-top:1.3rem;padding-top:1.6rem;padding-bottom:1.6rem;border-top:1px solid var(--on-dark-border)} .nav-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--color-text) 45%,transparent);z-index:96;opacity:0;transition:opacity var(--t)} .nav-backdrop.show{opacity:1} /* Search overlay */ .search-overlay{position:fixed;inset:0;z-index:140;background:color-mix(in srgb,var(--color-bg) 96%,transparent);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding-top:18vh} .search-overlay.open{display:flex;animation:fade .2s ease} .search-close{position:absolute;top:1.4rem;right:1.6rem} .search-close svg{width:17px;height:17px} /* X de închidere unificat (peste tot) */ .x-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--tint-icon);border:none;border-radius:50%;color:var(--color-accent);cursor:pointer;transition:background var(--t),transform var(--t)} .x-btn:hover{background:var(--color-secondary);transform:rotate(90deg)} .x-btn svg{width:17px;height:17px} .search-form{display:flex;align-items:center;gap:.9rem;width:min(620px,90vw);border-bottom:2px solid var(--color-primary);padding-bottom:.8rem} .search-form svg{width:26px;height:26px;color:var(--color-accent);flex:0 0 auto} .search-go{flex:0 0 auto;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;color:var(--color-text-muted);transition:color var(--t),transform var(--t)} .search-go:disabled{cursor:default;opacity:.5} .search-go:not(:disabled){color:var(--color-accent)} .search-go:not(:disabled):hover{transform:scale(1.12)} .search-form input{flex:1;border:none;background:none;outline:none;font-family:var(--font-heading);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--color-text)} .foot-consumer .anpc-pic{display:inline-flex;align-items:center;text-decoration:none} .foot-consumer .anpc-pic:hover{color:var(--on-dark);border-color:var(--color-primary)} .foot-consumer .anpc-pic svg{width:18px;height:18px;flex:0 0 auto} .foot-banners{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin-top:1.3rem} .foot-banners[hidden]{display:none} .foot-banners a{opacity:.7;transition:opacity var(--t)} .foot-banners a:hover{opacity:1} /* ============ Floating stack (jos-dreapta) ============ */ .floats{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:95;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end} .fab{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);color:#fff;transition:transform var(--t)} .fab:hover{transform:scale(1.06)} .fab svg{width:26px;height:26px} .fab-wa{background:#25D366} .fab-phone{background:#2563eb} .fab-top{background:var(--color-surface);color:var(--color-accent);border:1px solid var(--color-border);width:46px;height:46px;opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t)} .fab-top.show{opacity:1;pointer-events:auto} .fab-top svg{width:20px;height:20px} .dialog-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1rem 1.1rem;max-width:250px;margin-bottom:.3rem;display:none} .dialog-box.open{display:block;animation:pop .25s ease} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .dialog-box p{font-size:.86rem;color:var(--color-text-muted);margin-bottom:.7rem} .dialog-box .title{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-text);margin-bottom:.3rem} .chat-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);width:280px;display:none;flex-direction:column;align-items:flex-start;gap:.7rem;text-align:left;color:var(--color-text-muted);font-size:.85rem;padding:1.2rem} .chat-panel.open{display:flex} .dialog-box .addon-badge{margin-bottom:.6rem} /* ============ Cookie consent (non-blocant, fail-open) ============ */ .consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:680px;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.2rem 1.3rem;z-index:120;display:none} .consent.show{display:block} .consent p{font-size:.86rem;color:var(--color-text-muted);margin-bottom:.9rem} .consent a{color:var(--link)} .consent-actions{display:flex;flex-wrap:wrap;gap:.6rem} .consent-actions .btn{font-size:.7rem;padding:.6rem 1.2rem} .btn-text{background:none;border:none;color:var(--color-text-muted);text-decoration:underline;cursor:pointer;font-size:.78rem} /* ============ Page-load reveal ============ */ @keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero-copy>*{animation:up .7s ease both} .hero-copy .eyebrow{animation-delay:.05s}.hero-copy h1{animation-delay:.15s} .hero-copy .hero-sub{animation-delay:.25s}.hero-copy .hero-desc{animation-delay:.33s} .hero-copy .actions{animation-delay:.42s}.hero-copy .stats{animation-delay:.5s} .hero-media{animation:up .8s ease .3s both} /* ============ Responsive ============ */ /* ============ Tabletă/desktop mic (≤1024px): nav devine hamburger ============ */ @media (max-width:1024px){ .nav{position:relative;justify-content:center} .nav-toggle{display:inline-flex;position:absolute;left:clamp(1.2rem,4vw,3rem)} .nav-search-mobile{display:inline-flex;position:absolute;right:clamp(1.2rem,4vw,3rem);color:var(--color-accent)} .logo{font-size:1.5rem} /* Drawer din STÂNGA, cutoff după ultimul element, colț jos-dreapta rotunjit */ .nav-links{position:fixed;top:0;left:0;bottom:auto;right:auto;width:min(80vw,330px);max-height:calc(100dvh - var(--bb-h,0px));overflow-y:auto; background:linear-gradient(180deg,var(--color-surface),var(--tint)); border-radius:0 0 var(--radius-lg) 0; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.2rem;padding:.85rem 1.3rem .8rem; transform:translateX(-101%);transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:6px 8px 40px color-mix(in srgb,var(--color-text) 22%,transparent);z-index:97} .nav-links.open{transform:none} .nav-links li{width:100%} .nav-links li[data-content-item]{border-bottom:1px solid color-mix(in srgb,var(--color-border) 70%,transparent)} .nav-links a:not(.nav-cta){display:block;font-size:1rem;letter-spacing:.05em;padding:.55rem .3rem;color:var(--color-text)} .nav-links a:not(.nav-cta):hover{color:var(--color-accent)} /* Submeniu (Echipa) = acordeon în drawer; chevron-ul deschide, „Echipa" tot navighează */ .nav-has-sub{flex-wrap:wrap;gap:0} .nav-has-sub > a{flex:1 1 auto} .nav-sub-toggle{flex:0 0 auto;width:42px;height:42px;color:var(--color-text)} .nav-sub-chev{width:17px;height:17px} .nav-sub{flex-basis:100%;width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease} .nav-has-sub.is-open > .nav-sub{max-height:280px} /* direct child = nest-safe */ .nav-has-sub.is-open > .nav-sub-services{max-height:1000px} /* nivel 1 servicii: incap categoriile + una extinsa (drawer-ul scrollează) */ .nav-links .nav-sub li[data-content-item]{border-bottom:none} .nav-links .nav-sub a{padding:.5rem .3rem .5rem 1.5rem;font-size:.95rem;color:var(--color-text-muted)} .nav-links .nav-sub a:hover{color:var(--color-accent)} .nav-links .nav-lvl2 .nav-sub a{padding-left:2.6rem} /* serviciile indentate mai adanc sub categorie */ .nav-search-li{display:none} /* lupa din bară pe desktop; în drawer avem câmp dedicat */ .nav-cta-li{margin-top:.5rem;display:flex;gap:.5rem} .nav-links .nav-cta{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.78rem;padding:.66rem .5rem} .nav-links .nav-cta-call{flex:0 0 auto;gap:.32rem;padding:.66rem .85rem;background:transparent;color:var(--color-primary)!important;border:1.5px solid var(--color-primary)} .nav-links .nav-cta-call svg{width:15px;height:15px;flex:0 0 auto} /* Head drawer: logo centrat + X stilizat */ .nav-drawer-head{display:flex!important;align-items:center;justify-content:center;position:relative;padding:.2rem 0 .7rem;margin-bottom:.25rem;border-bottom:1px solid color-mix(in srgb,var(--color-border) 70%,transparent)} .nav-drawer-logo{font-family:var(--font-heading);font-size:1.4rem;font-weight:500;color:var(--color-text)} .nav-drawer-logo span{color:var(--color-primary);font-style:italic} .nav-close{position:absolute;right:0;top:.1rem} /* Search field în drawer */ .nav-drawer-search{display:block!important;margin-top:.6rem} .nav-drawer-search form{display:flex;align-items:center;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);padding:.2rem .2rem .2rem .9rem} .nav-drawer-search input{flex:1;border:none;background:none;outline:none;font-family:var(--font-body);font-size:.9rem;color:var(--color-text);padding:.5rem 0} .nav-drawer-search button{width:38px;height:38px;border:none;border-radius:50%;background:var(--cta-bg);color:var(--on-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .nav-drawer-search button svg{width:16px;height:16px} /* Social în drawer (în culoarea template-ului) */ .nav-drawer-social{display:flex!important;gap:.7rem;justify-content:center;margin-top:.7rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--color-border) 70%,transparent)} .nav-drawer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--color-accent)} .nav-drawer-social a:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent)} .nav-drawer-social svg{width:21px;height:21px;display:block} .nav-lang-li{display:none} /* selectorul din bara desktop ascuns în drawer */ /* Selector limbă MOBIL: în HEADER, la stânga lupei (drawer-ul = doar navigație). Dropdown ancorat dreapta. */ .nav-lang-mobile{display:inline-flex;position:absolute;right:calc(clamp(1.2rem,4vw,3rem) + 38px);top:50%;transform:translateY(-50%)} .nav-lang-mobile .lang-menu{max-height:55vh;overflow-y:auto} /* multi-limbă pe ecran îngust: logo-ul centrat scade fluid (nu intră sub selector) + ellipsis de gardă */ .site-header:has(.nav-lang-mobile .lang-switch) .logo{font-size:clamp(1rem,4.5vw,1.5rem)} .site-header:has(.nav-lang-mobile .lang-switch) .logo .logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 250px)} /* layout pagină */ .hero{grid-template-columns:1fr;gap:var(--space-md);justify-items:center;text-align:center} .hero-copy{max-width:620px} .hero-desc,.lead{margin-inline:auto} .actions,.stats,.eyebrow{justify-content:center} .hero-media{max-width:460px;width:100%} .about-grid,.contact-grid{grid-template-columns:1fr;gap:var(--space-md)} .about-figure{max-width:620px;width:100%;margin-inline:auto;aspect-ratio:16/11} .about .inner>*{text-align:center} .about .eyebrow{justify-content:center} .about .actions{justify-content:center} /* headerul blog: centrat ca celelalte secțiuni pe ecrane mici */ .sec-head{margin-inline:auto;text-align:center} .sec-head .eyebrow{justify-content:center} /* FAQ: întrebări + răspunsuri aliniate la stânga (citire mai bună), chiar dacă e în container .about */ .faq summary{text-align:left} .faq .ans{text-align:left} .rev-head{justify-content:center;text-align:center} .rev-grid,.posts,.srv-grid{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr;gap:1.8rem;text-align:center} .foot-top>.fcol:first-child{display:flex;flex-direction:column;align-items:center} .foot-top>.fcol:first-child p{max-width:42ch} .fcol .fsoc{justify-content:center} .foot-news{justify-content:center;text-align:center} .foot-news .fn-note,.foot-news .fn-form{margin-inline:auto} .foot-cols2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;text-align:center} .foot-cols2 .fcol{justify-content:center} } /* ============ Mobil mare (≤680px) ============ */ @media (max-width:680px){ .tb-hours{display:none} .topbar-inner{grid-template-columns:1fr auto} .tb-phone{justify-self:end} .tb-addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw} /* footer mobil: about centrat; Navigare+Servicii 2 col; Legal full-width 3 col */ .foot-top{grid-template-columns:1fr;gap:1.8rem;text-align:center} .foot-top>.fcol:first-child{display:flex;flex-direction:column;align-items:center} .foot-top>.fcol:first-child p{max-width:34ch} .fcol .fsoc{justify-content:center} .foot-cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem;text-align:center} .foot-cols2 .fcol{justify-content:center} .foot-cols2 .fcol ul{align-items:center} .fcol-legal{grid-column:1 / -1;border-top:1px solid var(--on-dark-border);padding-top:1.4rem;margin-top:.2rem} .fcol-legal>div{display:block!important;width:100%} .fcol-legal ul{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-top:.2rem} .fcol-legal li:nth-child(1){text-align:left} .fcol-legal li:nth-child(2){text-align:center} .fcol-legal li:nth-child(3){text-align:right} } /* ============ Mobil (≤560px) ============ */ @media (max-width:560px){ section{padding:var(--space-md) 0} .rev-grid,.posts,.srv-grid,.team,.frow{grid-template-columns:1fr} .stats{flex-wrap:wrap;gap:1.4rem;justify-content:center} .hero-badge{position:static;margin-top:1rem;max-width:none;transform:none;left:auto} .gscore{justify-content:center} .gscore .num{font-size:2.1rem} .nd-actions{flex-direction:column} .map-facade{height:clamp(420px,70vh,520px)} } /* ============ Nav activ (setat la build per pagina) ============ */ .nav-links a.is-active{color:var(--color-accent)} /* ============ Degradare imagini lipsă + hibrid imagine/emblemă ============ */ /* Placeholderul foto (.ph) e ascuns implicit; readus DOAR în starea data-visual="image" fără imagine reală */ .ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;font-family:var(--font-body);font-size:.68rem;letter-spacing:.18em;color:var(--color-text-muted)} .ph svg{width:54px;height:54px;opacity:.55} /* Emblema partajată (hero index + page-header despre) */ .ph-mono{position:absolute;inset:0;width:100%;height:100%;display:none} .ph-mono-initial{font-family:var(--font-heading);font-size:170px;font-weight:600;fill:var(--color-primary);fill-opacity:.55} .ph-mono-est{font-family:var(--font-body);font-size:13px;letter-spacing:3px;fill:var(--color-text-muted)} /* Sloturi CU emblemă, fără imagine → emblemă pe fundal transparent (fără cutia tonată) */ .hero-img.noimg,.ph-figure.noimg{background:none;box-shadow:none} .hero-img.noimg .ph-mono,.ph-figure.noimg .ph-mono{display:block} /* Toggle din customizer / stare coaptă per pagină (data-visual pe slot) */ /* EMBLEMĂ: ascunde imaginea reală + placeholder foto, arată emblema (ph-mono) */ .hero-img[data-visual="emblem"] img,.ph-figure[data-visual="emblem"] img, .hero-img[data-visual="emblem"] picture,.ph-figure[data-visual="emblem"] picture, .hero-img[data-visual="emblem"] .ph,.ph-figure[data-visual="emblem"] .ph{display:none !important} .hero-img[data-visual="emblem"],.ph-figure[data-visual="emblem"]{background:none;box-shadow:none} .hero-img[data-visual="emblem"] .ph-mono,.ph-figure[data-visual="emblem"] .ph-mono{display:block} /* IMAGINE: arată imaginea, ascunde emblema. Dacă imaginea lipsește (.noimg) → placeholder */ .hero-img[data-visual="image"] .ph-mono,.ph-figure[data-visual="image"] .ph-mono{display:none} .hero-img[data-visual="image"]:not(.noimg) img,.ph-figure[data-visual="image"]:not(.noimg) img, .hero-img[data-visual="image"]:not(.noimg) picture,.ph-figure[data-visual="image"]:not(.noimg) picture{display:block} .hero-img[data-visual="image"].noimg img,.ph-figure[data-visual="image"].noimg img{display:none} /* „Imagine" aleasă dar fără imagine reală → cutia tonată + placeholder foto */ .hero-img[data-visual="image"].noimg .ph,.ph-figure[data-visual="image"].noimg .ph{display:flex} .hero-img[data-visual="image"].noimg{background:linear-gradient(150deg,var(--tint-2),var(--tint-icon));box-shadow:var(--shadow)} .ph-figure[data-visual="image"].noimg{background:linear-gradient(160deg,var(--tint-2),var(--tint-icon));box-shadow:var(--shadow-sm)} /* Starea „Niciuna" (data-visual="none") — slotul dispare, hero se recompune centrat */ .hero-img[data-visual="none"],.ph-figure[data-visual="none"]{display:none} .hero:has(.hero-img[data-visual="none"]){grid-template-columns:1fr;gap:var(--space-md);justify-items:center;text-align:center} .hero:has(.hero-img[data-visual="none"]) .hero-copy{max-width:760px} .hero:has(.hero-img[data-visual="none"]) .hero-desc{margin-inline:auto} .hero:has(.hero-img[data-visual="none"]) .actions,.hero:has(.hero-img[data-visual="none"]) .stats,.hero:has(.hero-img[data-visual="none"]) .eyebrow{justify-content:center} .hero:has(.hero-img[data-visual="none"]) .hero-media{max-width:460px;width:100%;animation-delay:.5s} .hero:has(.hero-img[data-visual="none"]) .hero-badge{position:static;margin:0 auto;max-width:420px;transform:none;left:auto;text-align:center} /* Sloturi FĂRĂ emblemă, fără imagine → dispar + secțiunea se reorganizează */ .about-figure.noimg:not(:has(.ph-mono)){display:none} .about-grid:has(.about-figure.noimg){grid-template-columns:1fr;max-width:780px;margin-inline:auto} .post-img.noimg:not(:has(.ph-mono)){display:none} /* ============ Atitudine (preset site-wide, decompozabil; data-attitude pe ) ============ */ /* Controlează: radius colțuri, greutate titluri, letter-spacing eyebrow/butoane. Font+emblemă le setează customizer-ul (controale existente). Culoarea NU e atinsă. */ html[data-attitude="sobra"]{--radius:3px;--radius-lg:7px;--radius-pill:10px;--fw-head:400;--fw-display:600;--ls-eyebrow:.28em;--ls-btn:.14em} html[data-attitude="calda"]{--radius:8px;--radius-lg:16px;--radius-pill:50px;--fw-head:300;--fw-display:500;--ls-eyebrow:.22em;--ls-btn:.1em} html[data-attitude="eleganta"]{--radius:5px;--radius-lg:12px;--radius-pill:50px;--fw-head:300;--fw-display:400;--ls-eyebrow:.3em;--ls-btn:.16em} html[data-attitude="energica"]{--radius:10px;--radius-lg:22px;--radius-pill:50px;--fw-head:500;--fw-display:700;--ls-eyebrow:.16em;--ls-btn:.08em} /* ============ Densitate ornamente (data-density="rich" pe ; lipsă = limited) ============ */ /* Ornamente CSS-only (pseudo-elemente, gradients), derivate din paletă; motivul urmează atitudinea. */ html{--orn:color-mix(in srgb,var(--color-primary) 55%,transparent);--orn-faint:color-mix(in srgb,var(--color-primary) 9%,transparent)} /* 1) Motiv ornamental deasupra titlurilor de secțiune (înlocuiește liniuța eyebrow, ca să nu dubleze ornamentele) */ html[data-density="rich"] .sec-head .eyebrow::before,html[data-density="rich"] .story-head .eyebrow::before{display:none} html[data-density="rich"] .sec-head h2::before, html[data-density="rich"] .story-head .story-title::before, html[data-density="rich"] .pull-quote p::before{content:"";display:block;width:64px;height:12px;margin-bottom:.9rem; background:repeating-radial-gradient(circle at 50% 130%,transparent 0 4px,var(--orn) 4px 5px,transparent 5px 9px);background-size:28px 12px;background-repeat:repeat-x;background-position:center} html[data-density="rich"] .sec-head.center h2::before{margin-inline:auto} html[data-attitude="sobra"][data-density="rich"] .sec-head h2::before, html[data-attitude="sobra"][data-density="rich"] .story-head .story-title::before, html[data-attitude="sobra"][data-density="rich"] .pull-quote p::before{background:repeating-linear-gradient(to bottom,var(--orn) 0 1px,transparent 1px 5px);background-size:64px 6px;background-repeat:no-repeat;background-position:left center;height:6px} html[data-attitude="sobra"][data-density="rich"] .sec-head.center h2::before{background-position:center} /* Parteneri (variantă centrată home/pagină): .partners-head are .sec-head dar NU .center → centrează și motivul ornamental de deasupra titlului (footer rămâne la stânga, intenționat; varianta --top ascunde head-ul) */ html[data-density="rich"] .partners:not(.partners--footer) .partners-head h2::before{margin-inline:auto} html[data-attitude="sobra"][data-density="rich"] .partners:not(.partners--footer) .partners-head h2::before{background-position:center} html[data-attitude="eleganta"][data-density="rich"] .sec-head h2::before, html[data-attitude="eleganta"][data-density="rich"] .story-head .story-title::before, html[data-attitude="eleganta"][data-density="rich"] .pull-quote p::before{background:conic-gradient(from 45deg,var(--orn) 0 25%,transparent 0 50%,var(--orn) 0 75%,transparent 0) 50%/8px 8px no-repeat,linear-gradient(var(--orn),var(--orn)) calc(50% - 22px) 50%/24px 1px no-repeat,linear-gradient(var(--orn),var(--orn)) calc(50% + 22px) 50%/24px 1px no-repeat;height:8px;transform:none} html[data-attitude="energica"][data-density="rich"] .sec-head h2::before, html[data-attitude="energica"][data-density="rich"] .story-head .story-title::before, html[data-attitude="energica"][data-density="rich"] .pull-quote p::before{background:repeating-linear-gradient(60deg,var(--orn) 0 2px,transparent 2px 8px);height:10px;width:56px} /* 2) Filigran de fundal (hero homepage + poveste despre) */ html[data-density="rich"] .hero{position:relative} html[data-density="rich"] .hero::before, html[data-density="rich"] .story .story-inner::before{content:"";position:absolute;right:-140px;top:-120px;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:-1; background:repeating-radial-gradient(circle,transparent 0 30px,var(--orn-faint) 30px 31.5px); -webkit-mask-image:radial-gradient(circle,#000 25%,transparent 70%);mask-image:radial-gradient(circle,#000 25%,transparent 70%)} html[data-density="rich"] .story .story-inner{position:relative} html[data-density="rich"] .story .story-inner::before{right:auto;left:-180px;top:-80px} html[data-attitude="sobra"][data-density="rich"] .hero::before, html[data-attitude="sobra"][data-density="rich"] .story .story-inner::before{background:repeating-linear-gradient(to right,var(--orn-faint) 0 1px,transparent 1px 26px);border-radius:0} html[data-attitude="eleganta"][data-density="rich"] .hero::before, html[data-attitude="eleganta"][data-density="rich"] .story .story-inner::before{background:repeating-linear-gradient(45deg,var(--orn-faint) 0 1px,transparent 1px 30px),repeating-linear-gradient(-45deg,var(--orn-faint) 0 1px,transparent 1px 30px);border-radius:0} html[data-attitude="energica"][data-density="rich"] .hero::before, html[data-attitude="energica"][data-density="rich"] .story .story-inner::before{background:repeating-linear-gradient(60deg,var(--orn-faint) 0 2px,transparent 2px 22px);border-radius:0} /* ornament pe sectiunea de detalii serviciu (reutilizeaza motivul; diferenta limited↔rich vizibila) */ html[data-density="rich"] .svc-body .inner{position:relative} html[data-density="rich"] .svc-body .inner::before{content:"";position:absolute;right:-170px;top:-90px;width:440px;height:440px;border-radius:50%;pointer-events:none;z-index:-1;background:repeating-radial-gradient(circle,transparent 0 30px,var(--orn-faint) 30px 31.5px);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 70%);mask-image:radial-gradient(circle,#000 25%,transparent 70%)} /* 3) Cadru ornamental pe carduri-cheie */ html[data-density="rich"] .hero-badge,html[data-density="rich"] .pull-quote{outline:1px solid var(--orn);outline-offset:5px} html[data-density="rich"] .pull-quote{outline:none;border-top-width:0;padding-top:0} /* 4) Separatoare decorative în banda de cifre (homepage .stats) */ html[data-density="rich"] .stats .stat+.stat{position:relative;padding-left:2.2rem} html[data-density="rich"] .stats .stat+.stat::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:1px;background:linear-gradient(to bottom,transparent,var(--orn),transparent)} /* ============ Animație (data-animation pe : statica | usoara(default) | abundenta) ============ */ html[data-animation="statica"] .hero-copy>*,html[data-animation="statica"] .hero-media{animation:none} /* Reveal la scroll (clase puse de app.js doar pe abundenta; transform+opacity, zero CLS) */ /* Reveal la scroll: usoara = subtil (mică ridicare + fade), abundenta = mai amplu. Fără delay de pornire. */ html[data-animation="usoara"] .rv{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease} html[data-animation="usoara"] .rv.rv-in{opacity:1;transform:translateY(0)} html[data-animation="abundenta"] .rv{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} html[data-animation="abundenta"] .rv.rv-in{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){.rv{opacity:1 !important;transform:none !important;transition:none !important}} /* Bannere consumator (ANPC SAL / UE SOL) — imagini 520x130 afișate la 208x52 */ .anpc-pic img{display:block;height:62px;width:auto} /* ============ Formular: multiselect servicii + specialist + add-on programări ============ */ .field .label{display:block} .ms{position:relative} .ms-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);padding:.7rem .85rem;font-family:var(--font-body);font-size:.92rem;color:var(--color-text);cursor:pointer;text-align:left} .ms-btn[aria-expanded="true"]{border-color:var(--color-primary)} .ms-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ms-sum.placeholder{color:var(--color-text-muted)} .ms-car{width:16px;height:16px;flex:none;color:var(--color-text-muted)} .ms-panel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:240px;overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem} .ms-opt{display:flex;align-items:center;gap:.55rem;padding:.42rem .5rem;border-radius:6px;font-size:.88rem;cursor:pointer} .ms-opt:hover{background:var(--tint)} .ms-opt input{accent-color:var(--color-primary);width:15px;height:15px;flex:none} /* Add-on Programări: vizibil când data-addon-booking=on (backend) SAU hidden scos (customizer). Grid 2col pt cele 2 câmpuri native (Dată+Oră) injectate de embed.js; o singură regulă ca specificitatea lui data-addon-booking să nu suprascrie grid-ul. */ #webid-booking-module:not([hidden]), html[data-addon-booking="on"] #webid-booking-module{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;border:1px dashed var(--color-border);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;background:var(--tint)} @media(max-width:440px){#webid-booking-module:not([hidden]),html[data-addon-booking="on"] #webid-booking-module{grid-template-columns:1fr}} .bk-demo{font-size:.85rem;color:var(--color-text-muted);display:flex;align-items:center;gap:.6rem} .bk-demo svg{width:22px;height:22px;flex:none;color:var(--color-accent)} /* ============ Carusel postări blog (homepage): 3 vizibile desktop / 1 pe mobil, auto-advance 5s în view, loop ============ */ .car{position:relative} .car-vp{overflow:hidden;padding:16px 0 48px;margin:-16px 0 -48px} /* loc pt umbra de hover (jos+lateral), fără tăiere */ .posts.car-track{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:1.3rem;transition:transform .6s cubic-bezier(.22,.61,.36,1);grid-template-columns:none} .car-track .post{flex:0 0 calc((100% - 2.6rem)/3);min-width:0;max-width:none} .car-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all var(--t)} .car-arr svg{width:18px;height:18px} .car-arr:hover{border-color:var(--color-primary);color:var(--color-accent)} .car-prev{left:-12px}.car-next{right:-12px} /* toate item-urile încap în vizor (ex. categorie cu 2 documente) → rând static: fără clone vizibile, fără săgeți moarte */ .car-fits .car-clone{display:none} .car-fits .car-arr{display:none} @media (max-width:1024px) and (min-width:761px){.car-track .post{flex-basis:calc((100% - 1.3rem)/2)}} @media (max-width:760px){ .car-track .post{flex-basis:100%} .car-prev{left:-6px}.car-next{right:-6px} } /* ============ Secțiune modulară „Parteneri" (carduri logo, carusel autoplay sincron cu blogul) ============ */ /* Fundal cald intermediar: distinct de FAQ (alb/--color-surface) ȘI de Programare (--color-bg), palette-driven */ .partners{background:color-mix(in srgb, var(--color-secondary) 16%, var(--color-bg))} .partners-head{margin-bottom:1.8rem;text-align:center} .partners-head .eyebrow{justify-content:center} .partners-lead{margin:.6rem auto 0;color:var(--color-text-muted);max-width:60ch} .pt-wrap{position:relative;padding:0 52px} /* gutiere laterale pt săgeți (clar de carduri) */ .pt-strip{display:flex;align-items:stretch;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.5rem 0} .pt-strip::-webkit-scrollbar{display:none} /* card alb, logo PĂSTREAZĂ culoarea (fără grayscale); EXACT 5 vizibile (fără peek) */ .pt-logo{flex:0 0 calc((100% - 4 * 1.1rem) / 5);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:104px;padding:14px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);text-decoration:none} a.pt-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .pt-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} .pt-logo .pt-name{display:none;font-weight:600;color:var(--color-text);white-space:nowrap} /* SCOP .pt-logo: fallback text PARTENERI (nu ascunde .pt-name de pe /preturi, care e în .pt-row) */ .pt-logo.noimg .pt-name{display:inline} /* fallback text când lipsește logo-ul (onerror) */ .pt-clone{pointer-events:none} /* clonele pt loop seamless nu sunt interactive */ .pt-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all var(--t)} .pt-arrow svg{width:18px;height:18px} .pt-arrow:hover{border-color:var(--color-primary);color:var(--color-accent)} .pt-arrow.car-prev{left:5px}.pt-arrow.car-next{right:5px} /* centrate în gutiera de 52px, fără să intre peste carduri */ .pt-arrow[hidden]{display:none} /* variantă FOOTER (compactă, în