/* ============================================================================ mediweb-ui.css — antetul și subsolul noi (29.07.2026) Se încarcă DUPĂ styles.css și suprascrie doar antetul și subsolul. Restul stilurilor (.grid, .hero, .registration-form etc.) rămân în styles.css și continuă să funcționeze neschimbate. Selectorii au specificitate ridicată (header.pp-hdr, footer.pp-foot), ca să învingă regulile vechi de tip `header { }` din styles.css. ============================================================================ */ /* Previne derularea laterală pe telefon (meniul glisant iese din ecran). ATENȚIE — capcană: `styles.css` are `html, body { height: 100% }`. Dacă pui `overflow-x: hidden` pe BODY peste acea înălțime fixă, `overflow-y` devine `auto` și **body ajunge containerul care derulează**, în locul documentului. Atunci `window.scrollY` rămâne veșnic 0 — iar antetul lipit nu mai primește niciodată umbra la derulare, fiindcă se uită la `window.scrollY`. Soluția: lăsăm înălțimea liberă (`height:auto`), ca documentul să crească firesc, punem tăierea orizontală pe `html`, iar pe `body` folosim `clip`, care NU creează un container de derulare. */ html { overflow-x: hidden; height: auto; min-height: 100%; } /* Subsol „lipit" de baza ecranului: pe pagini scurte și ecrane înalte, subsolul coboară până jos în loc să lase o bandă albă sub el. Coloană flexibilă + `margin-top:auto` pe subsol — copiii sunt oricum secțiuni pe toată lățimea, deci așezarea rămâne aceeași. */ body { height: auto; min-height: 100vh; display: flex; flex-direction: column; max-width: 100%; overflow-x: clip; } body > footer.pp-foot { margin-top: auto; } /* CAPCANĂ (a costat un bug pe telefon): într-un container flex pe coloană, un copil cu `margin: 0 auto` — cum sunt aproape toate blocurile centrate din site — NU se mai întinde pe toată lățimea; se dimensionează după conținut și iese din ecran. De aceea cei trei pași de pe prima pagină apăreau pe 3 coloane de 240px (780px) pe un ecran de 375px. `width:100%` restabilește comportamentul de dinainte: blocul ocupă toată lățimea, iar `max-width` + `margin:auto` îl centrează, ca la layout normal. */ body > * { width: 100%; min-width: 0; flex: 0 0 auto; } /* Aceeași capcană, dar în grilele din pagini: un element de grilă are implicit `min-width:auto` și refuză să coboare sub lățimea conținutului. Pe pagina de contact, hărțile împingeau cardurile în afara părintelui. */ .contact-wrap > *, .pp-grid > *, .pp-docgrid > *, .pp-infobar > *, .pp-steps > * { min-width: 0; } /* nimic încorporat (hărți, videoclipuri) nu are voie să depășească ecranul */ iframe, img, video, embed, object { max-width: 100%; } /* adresele de email și adresele web lungi nu au unde să se rupă și ies din ecran pe telefon — le lăsăm să se rupă oriunde, la nevoie */ .qcard a, .pp-medloc-item .adr, .lg-text a, .pm-help-list a { overflow-wrap: anywhere; } /* Pe ecrane înalte cu puțin conținut, zona rămasă sub subsol continua albă. Punem pe exact culoarea de la baza subsolului, ca prelungirea să pară parte din el. Atenție: fundalul lui nu se mai propagă pe pânza paginii din momentul în care are unul propriu — de aceea fiecare pagină își păstrează mai jos fundalul ei deschis pe . */ html { background-color: #0b2748; } /* browsere vechi, fără `clip`: revenim la `hidden`; înălțimea fiind liberă, body tot nu devine container de derulare */ @supports not (overflow: clip) { body { overflow-x: hidden; } } /* ---------------------------------------------------------------- bara de sus */ .pp-topbar{background:#0f2f5c;color:#cfe0f5;font-size:.82rem;line-height:1.5} .pp-topbar .in{max-width:1160px;margin:0 auto;padding:7px 18px;display:flex; justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .pp-topbar a{color:#fff;text-decoration:none;font-weight:600} .pp-topbar .tb-r{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .pp-topbar .tb-r a:hover{color:#7bd4ff} @media(max-width:600px){ .pp-topbar .in{justify-content:center;text-align:center} .pp-topbar .tb-l{display:none} /* pe ecran mic păstrăm doar contactul */ } /* ---------------------------------------------------------------------- antet */ header.pp-hdr{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.94);backdrop-filter:blur(8px); border-bottom:1px solid #e5e9f0;transition:box-shadow .2s; /* anulăm explicit stilurile vechi din styles.css */ color:#334155;padding:0;display:block; } header.pp-hdr.scrolled{box-shadow:0 6px 22px rgba(15,23,42,.09)} header.pp-hdr .in{max-width:1160px;margin:0 auto;padding:11px 18px; display:flex;align-items:center;gap:18px} header.pp-hdr .pp-logo{display:flex;align-items:center;gap:12px;text-decoration:none} header.pp-hdr .pp-logo img.big{height:50px;width:auto;display:block} header.pp-hdr .pp-logo img.small{height:34px;width:auto;display:block} header.pp-hdr nav.pp-nav{ margin-left:auto;display:flex;align-items:center;gap:5px; flex-direction:row; /* styles.css îl punea pe coloană */ } header.pp-hdr nav.pp-nav a{ padding:9px 14px;border-radius:9px;text-decoration:none;font-weight:600; color:#334155;font-size:.94rem;transition:background .15s,color .15s;white-space:nowrap; } header.pp-hdr nav.pp-nav a:hover{background:#eff6ff;color:#0369a1} header.pp-hdr nav.pp-nav a.active{color:#0369a1;background:#eff6ff} header.pp-hdr nav.pp-nav a.cta{background:#0ea5e9;color:#fff;margin-left:5px} header.pp-hdr nav.pp-nav a.cta:hover{background:#0284c7;color:#fff} header.pp-hdr .pp-burger{ display:none;margin-left:auto;font-size:1.7rem;line-height:1; background:none;border:0;cursor:pointer;color:#0f2f5c;padding:4px 8px; } /* meniu glisant pe telefon */ @media(max-width:920px){ header.pp-hdr nav.pp-nav{ position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:#fff; flex-direction:column;align-items:stretch;padding:78px 18px 20px;gap:6px; transform:translateX(100%);visibility:hidden; transition:transform .25s ease,visibility .25s; box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:120;overflow-y:auto; } header.pp-hdr nav.pp-nav.open{transform:translateX(0);visibility:visible} header.pp-hdr nav.pp-nav a{padding:13px 15px;font-size:1rem} header.pp-hdr .pp-burger{display:block} header.pp-hdr .pp-logo img.big{height:42px} header.pp-hdr .pp-logo img.small{height:29px} } /* Fundal întunecat când meniul e deschis. ATENȚIE la z-index: `header.pp-hdr` are position:sticky + z-index:100, deci creează un CONTEXT DE STIVUIRE — z-index:120 de pe meniu se compară doar în interiorul antetului, iar față de pagină antetul valorează 100. Dacă fundalul ar avea 110 (cum avea), ar acoperi tot antetul, INCLUSIV meniul deschis, și ar înghiți apăsările pe legături: meniul se vedea, dar nu se putea apăsa nimic. Fundalul trebuie deci să rămână SUB antet. */ .pp-ovl{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;visibility:hidden; transition:.25s;z-index:90} .pp-ovl.on{opacity:1;visibility:visible} /* ----------------------------------------------- antetul albastru de pagină Aceeași bandă ca pe pagina unei specialități sau a unui medic: firimituri + titlu + o linie de context. Firimiturile sunt și perechea vizibilă a blocului BreadcrumbList din datele structurate — Google îl ia în seamă doar dacă are corespondent pe pagină. */ section.pp-pghero { background: linear-gradient(135deg, #1c7ed6 0%, #1560ab 100%); color: #fff; padding: 24px 16px 28px; } section.pp-pghero .in { max-width: 1160px; margin: 0 auto; } section.pp-pghero .pp-crumbs { font-size: .85rem; opacity: .92; margin-bottom: 8px; line-height: 1.5; } section.pp-pghero .pp-crumbs a { color: #fff; text-decoration: none; font-weight: 600; } section.pp-pghero .pp-crumbs a:hover { text-decoration: underline; } section.pp-pghero h1 { font-size: 1.6rem; margin: 0 0 5px; color: #fff; line-height: 1.25; } section.pp-pghero .meta { font-size: .92rem; opacity: .93; } @media (max-width: 620px) { section.pp-pghero h1 { font-size: 1.3rem; } section.pp-pghero .meta { font-size: .86rem; } } /* ------------------------------------------------------------------- subsol */ footer.pp-foot{ background:radial-gradient(1200px 400px at 80% -10%,#1b4a86 0,transparent 60%), linear-gradient(180deg,#0f2f5c 0%,#0b2748 100%); color:#c9d8ee;margin-top:26px; } footer.pp-foot .in{max-width:1160px;margin:0 auto;padding:40px 18px 22px; display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px} @media(max-width:860px){footer.pp-foot .in{grid-template-columns:1fr;gap:26px}} footer.pp-foot h3{color:#fff;font-size:1.02rem;margin:0 0 8px;line-height:1.35} footer.pp-foot h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em; margin:0 0 11px;opacity:.85} footer.pp-foot p{margin:0 0 6px;font-size:.9rem;line-height:1.55} footer.pp-foot .brandline{opacity:.82} footer.pp-foot ul{list-style:none;margin:0;padding:0} footer.pp-foot ul li{margin-bottom:8px} footer.pp-foot a{color:#c9d8ee;text-decoration:none;font-size:.9rem;transition:color .15s} footer.pp-foot a:hover{color:#7bd4ff} footer.pp-foot .pp-loc{margin-bottom:15px} footer.pp-foot .pp-loc .eticheta{color:#fff;font-weight:600;margin-bottom:2px;font-size:.9rem} footer.pp-foot .pp-loc .addr{font-size:.87rem;opacity:.9;margin-bottom:6px} footer.pp-foot .pp-mapbtns{display:flex;gap:8px;flex-wrap:wrap} footer.pp-foot .pp-mapbtn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px; border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid transparent} footer.pp-foot .pp-mapbtn.g{background:rgba(66,133,244,.16);color:#9cc2ff;border-color:rgba(66,133,244,.3)} footer.pp-foot .pp-mapbtn.g:hover{background:rgba(66,133,244,.28);color:#bcd6ff} footer.pp-foot .pp-mapbtn.w{background:rgba(0,180,255,.16);color:#8fdcff;border-color:rgba(0,180,255,.3)} footer.pp-foot .pp-mapbtn.w:hover{background:rgba(0,180,255,.28);color:#b3e8ff} footer.pp-foot .social{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap} footer.pp-foot .social a{display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:999px;padding:7px 13px;color:#fff;font-size:.83rem;font-weight:600} footer.pp-foot .social a:hover{background:rgba(255,255,255,.17);color:#fff} footer.pp-foot .mwbadge{display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15); border-radius:999px;padding:6px 12px;color:#fff;font-weight:600;font-size:.85rem;margin-top:12px} footer.pp-foot .mwbadge img{width:22px;height:22px} footer.pp-foot .bottom{max-width:1160px;margin:0 auto;padding:15px 18px; border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between; align-items:center;gap:14px;flex-wrap:wrap;font-size:.81rem;opacity:.85} footer.pp-foot .bottom a{font-size:.81rem} /* ascundem vechiul comutator de meniu (bifa) rămas în pagină */ #menu-toggle, label.menu-icon { display: none !important; } /* ============================================================================ Legătura către site-ul oficial al spitalului (subsol, 31.07.2026) Acesta e doar subdomeniul de programări — fără linkul acesta nici vizitatorul, nici Google nu leagă cele două site-uri între ele. ============================================================================ */ .pp-foot .pp-siteoficial { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 8px 14px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600; transition: background .15s, border-color .15s; } .pp-foot .pp-siteoficial:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.38); color: #fff; }