/* Stilurile comune tuturor paginilor generate de seoLayout: antet, subsol, * sertar, modale, plus clasele mutate din atribute style=. * * Stăteau în , în interiorul fiecărei pagini: 20 KB descărcați din nou la * fiecare articol de blog, fiecare pagină de serviciu, fiecare anunț. Ca fișier * separat se descarcă o dată pentru tot site-ul. * * Stilurile specifice unei pagini rămân după acest fișier, ca să-l poată * suprascrie: ordinea de încărcare e ordinea în care se aplică. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --accent: #1a56db; --accent-dark: #1e3a8a; --accent-light: #eff6ff; --accent-mid: #3b82f6; --bg: #f1f5f9; --card: #ffffff; --galben: #fbbf24; --pe-galben: #111827; --border: #e2e8f0; --text: #1e293b; --muted: #5f6e82; --radius: 5px; --shadow: 0 2px 12px rgba(0,0,0,0.07); } /* Tema întunecată — aceleași valori ca pe homepage, comutată manual din footer. */ [data-theme="dark"] { --bg: #0f172a; --card: #1e293b; --border: #334155; --text: #e2e8f0; --muted: #94a3b8; --accent-light: #1e3a8a; --shadow: 0 2px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .faq-a { color: var(--muted); } [data-theme="dark"] .card { background: var(--card); color: var(--text); } html { font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Antetul e lat cât ecranul, dar sigla și butoanele stau în aceeași lățime ca restul paginii (1120 px, cu 1 rem aer, ca .container). Sub 1120 px, max() lasă marginea obișnuită. */ header { background: var(--accent-dark); color: #fff; padding: 0 max(1.25rem, calc((100% - 1120px) / 2 + 1rem)); height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; } .logo svg { width: 30px; height: 30px; flex-shrink: 0; } .logo-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.8px; } .logo-name em { color: #93c5fd; font-style: normal; } .header-badge { display: none; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; } @media (min-width: 640px) { .header-badge { display: flex; } } .header-right { display:flex;align-items:center;gap:0.4rem; } .header-auth { display:flex;align-items:center;gap:0.5rem;flex-shrink:0; } .hamburger-btn { display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:0.4rem 0.3rem;line-height:1;text-decoration:none; } .seo-drawer { display:none;flex-direction:column;background:var(--accent-dark);border-top:1px solid rgba(255,255,255,0.12);padding:0.75rem 1rem 1rem;gap:0.4rem; } .seo-drawer.open { display:flex; } .drawer-link { color:#fff;font-size:0.9rem;font-weight:600;padding:0.65rem 1rem;border-radius:5px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;gap:0.6rem;text-decoration:none; } .drawer-link:hover { background:rgba(255,255,255,0.2);text-decoration:none; } .drawer-link-primary { background:#f59e0b;color:#1e293b;border-color:#f59e0b; } .drawer-link-primary:hover { background:#d97706; } .drawer-font-row { display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0 0; } .drawer-font-label { font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.65); } .drawer-font-actions { display:flex;gap:0.4rem; } .drawer-font-btn { background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);color:#fff;border-radius:5px;padding:0.4rem 0.85rem;font-weight:700;cursor:pointer; } .drawer-font-btn:hover { background:rgba(255,255,255,0.25); } @media (max-width:639px) { .header-auth { display:none !important; } .hamburger-btn { display:flex;align-items:center; } } @media (min-width:640px) { .seo-drawer { display:none !important; } } .font-btns { display:flex;align-items:center;gap:0.2rem; } .font-btn { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:5px;cursor:pointer;line-height:1;padding:0.28rem 0.45rem;transition:background 0.15s; } .font-btn:hover { background:rgba(255,255,255,0.25); } .font-btn.minus { font-size:0.72rem;font-weight:700; } .font-btn.plus { font-size:0.9rem;font-weight:700; } .header-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 0.4rem 0.9rem; border-radius: 5px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; text-decoration: none; } .header-btn:hover { background: rgba(255,255,255,0.25); text-decoration: none; } .header-btn.primary { background: #fbbf24; color: #1e293b; border-color: #fbbf24; } .header-btn.primary:hover { background: #f59e0b; } .breadcrumbs { max-width: 860px; margin: 0 auto; padding: 1.35rem 1rem 0.9rem; font-size: 0.82rem; color: var(--muted); } /* Pe paginile de servicii breadcrumb-ul e deja în interiorul .container, deci padding-ul lui orizontal s-ar aduna peste cel al containerului. */ .container .breadcrumbs { max-width: none; padding-left: 0; padding-right: 0; } .breadcrumbs a { color: var(--accent); } .breadcrumbs span { margin: 0 0.3rem; } .seo-hero { background: linear-gradient(150deg, var(--accent-dark) 0%, #1e40af 60%, var(--accent-mid) 100%); color: #fff; padding: 3rem 1.25rem 3.5rem; text-align: center; position: relative; } /* Fără textura cu plusuri pe fundalul albastru (scoasă pe 20 sep 2026): meșterul e destul. */ .seo-hero-inner { position: relative; max-width: 700px; margin: 0 auto; } .seo-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.18; letter-spacing: -0.5px; margin-bottom: 0.75rem; } .seo-hero p { font-size: 1.05rem; opacity: 0.88; margin-bottom: 1.75rem; line-height: 1.65; } .cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--galben); color: #1e293b; font-weight: 800; font-size: 1rem; padding: 0.85rem 1.75rem; border-radius: 5px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(251,191,36,0.35); text-decoration: none; transition: transform 0.15s; } .cta:hover { transform: translateY(-2px); text-decoration: none; color: #1e293b; } .seo-hero .cta { display: inline-flex; align-items: center; gap: 0.5rem; background: #fbbf24; color: #1e293b; font-weight: 800; font-size: 1rem; padding: 0.85rem 1.75rem; border-radius: 5px; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(251,191,36,0.4); text-decoration: none; transition: transform 0.15s; } .seo-hero .cta:hover { transform: translateY(-2px); text-decoration: none; } .container { max-width: 860px; margin: 0 auto; padding: 0 1rem 3rem; } /* Prima pagină se lărgește la 1120px pe ecran lat, restul site-ului rămăsese la 860px: aceleași liste, wrapper mai îngust, ca două site-uri diferite. Paginile care aleg anume o lățime mai mică — text lung, formulare, întrebări — și-o păstrează: regulile lor au clasa scrisă de două ori, deci bat media query-ul ăsta oricât de jos ar fi el în fișier. */ @media (min-width: 1000px) { .container { max-width: 1120px; } } .section { margin-top: 2.5rem; } .section h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; } .section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; transition: box-shadow 0.15s, transform 0.15s; text-decoration: none; color: var(--text); display: block; } .card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-2px); text-decoration: none; } .card i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--galben); color: var(--pe-galben); font-size: 1.35rem; margin-bottom: 0.6rem; } .card .card-title { font-weight: 700; font-size: 0.88rem; } .card .card-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; } .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem; } .link-grid a { font-size: 0.88rem; padding: 0.5rem 0.75rem; border-radius: 8px; transition: background 0.15s; } .link-grid a:hover { background: var(--accent-light); } .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 720px; margin: 0 auto; text-align: center; } @media (max-width: 480px) { .steps-row { grid-template-columns: 1fr; max-width: 320px; } } .step-icon { width: 56px; height: 56px; background: var(--accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: var(--accent); font-size: 1.3rem; } .step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; } .step p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .faq-item { border-bottom: 1px solid var(--border); padding: 1rem 0; } .faq-item:last-child { border-bottom: none; } .faq-q { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; } .faq-a { font-size: 0.88rem; color: #334155; line-height: 1.6; } .trust-bar { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); } .trust-item i { font-size: 1.1rem; color: #fbbf24; } footer { background: var(--accent-dark); color: rgba(255,255,255,0.78); text-align: center; padding: 1.5rem 1rem; font-size: 0.8rem; } footer strong { color: #fff; } .footer-links { max-width:1120px;margin:0 auto;padding-bottom:1rem; } .footer-title { font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.78);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.5rem; } .footer-grid { display:flex;flex-wrap:wrap;justify-content:center;gap:0.15rem 0.2rem;margin-bottom:1rem; } .footer-grid a { color:rgba(255,255,255,0.82);font-size:0.75rem;text-decoration:none;padding:0.45rem 0.55rem;border-radius:4px; } .footer-grid a:hover { color:#fff;text-decoration:none;background:rgba(255,255,255,0.08); } .footer-grid .footer-all { color:#fff;font-weight:600; } /* ── Clase mutate din atribute style= ────────────────────────────────── Aceleași reguli, adunate aici din paginile generate în src/index.js și din antetul comun. Utilitarele au selectorul dublat: erau scrise inline tocmai ca să bată stilul de bază al componentei. */ /* Antet și subsol */ .antet-stanga.antet-stanga { display:flex;align-items:center;gap:0.75rem;min-width:0; } .antet-logo-ridicat.antet-logo-ridicat { transform:translateY(-3px); } .subsol-linkuri.subsol-linkuri { display:flex;justify-content:center;gap:0.15rem 0.4rem;flex-wrap:wrap;margin-bottom:0.75rem;font-size:0.78rem; } .subsol-link.subsol-link { color:rgba(255,255,255,0.82);text-decoration:none;padding:0.45rem 0.5rem;border-radius:4px; } .subsol-link-sters.subsol-link-sters { color:rgba(255,255,255,0.78); } .subsol-marunt.subsol-marunt { font-size:0.75rem;color:rgba(255,255,255,0.72);display:block;line-height:1.6; } .btn-tema.btn-tema { background:none;border:1px solid rgba(255,255,255,0.35);color:rgba(255,255,255,0.82);padding:0.3rem 0.75rem;border-radius:5px;cursor:pointer;font-size:0.75rem;margin-top:0.75rem;display:inline-flex;align-items:center;gap:0.35rem; } /* Utilitare */ .u-colturi.u-colturi { border-radius:5px; } .u-flex-min200.u-flex-min200 { flex:1;min-width:200px; } .u-mb-larg.u-mb-larg { margin-bottom:1rem; } .u-mb-med.u-mb-med { margin-bottom:0.65rem; } .u-mr-med.u-mr-med { margin-right:0.4rem; } .u-mt-mic.u-mt-mic { margin-top:0.5rem; } .u-mt-xmic.u-mt-xmic { margin-top:0.3rem; } .u-my-xmic.u-my-xmic { margin:0.25rem 0; } .u-text-mediu.u-text-mediu { font-size:0.9rem; } .u-text-mic.u-text-mic { font-size:0.8rem; } /* Lățimi și titluri de pagină */ .pagina-text.pagina-text { max-width:760px;padding:2rem 1rem 3rem; } .pagina-profil.pagina-profil { max-width:680px;padding:2rem 1rem 3rem; } .pagina-ingusta.pagina-ingusta { max-width:520px;padding:2.5rem 1rem 3rem; } .pagina-faq.pagina-faq { max-width:760px;padding:0.5rem 1rem 3rem; } /* Pe ecran lat toate paginile de conținut ajung cât prima pagină, inclusiv textele de lege: cerut anume, după ce le-am ținut o vreme mai înguste. Întrebările se așază pe două coloane — un rând de întrebare lat de 1120px cu o săgeată singură tocmai în dreapta arăta a greșeală. Cutiile de autentificare și 404 rămân cutii: n-are ce lăți la două câmpuri. */ @media (min-width: 1000px) { .pagina-text.pagina-text { max-width:1120px; } .pagina-faq.pagina-faq { max-width:1120px; } .pagina-faq .faq-grup { display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; align-items:start; } .pagina-faq .faq-grup-titlu, .pagina-faq .faq-mai-multe { grid-column:1 / -1; } } .pagina-titlu.pagina-titlu { font-size:1.5rem;font-weight:800;margin-bottom:0.25rem; } .pagina-titlu-larg.pagina-titlu-larg { font-size:1.5rem;font-weight:800;margin-bottom:0.4rem; } .pagina-subtitlu.pagina-subtitlu { color:var(--muted);font-size:0.82rem;margin-bottom:1.5rem; } .pagina-subtitlu-inchis.pagina-subtitlu-inchis { color:#64748b;font-size:0.88rem;margin-bottom:1.5rem; } .sectiune-titlu-mic.sectiune-titlu-mic { font-size:1rem;font-weight:800;margin-bottom:0.75rem; } .titlu-centrat.titlu-centrat { text-align:center;margin-bottom:1.5rem; } .antet-centrat.antet-centrat { text-align:center;margin-bottom:2rem; } .titlu-404.titlu-404 { margin:1rem 0 0.5rem;font-size:1.5rem; } /* Pictograme */ .ico-firav.ico-firav { color:var(--muted);font-size:0.75rem;margin-right:0.3rem; } .ico-accent-mic.ico-accent-mic { color:var(--accent);margin-right:0.3rem;font-size:0.85rem; } .ico-caseta.ico-caseta { color:var(--accent);font-size:1.2rem;margin-bottom:0.5rem;display:block; } .ico-accent-mare.ico-accent-mare { color:var(--accent);font-size:1.3rem; } .ico-albastru.ico-albastru { color:#1a56db;margin-right:0.3rem; } .ico-albastru-larg.ico-albastru-larg { color:#1a56db;margin-right:0.4rem; } .ico-galben.ico-galben { color:#f59e0b;margin-right:0.3rem; } .ico-galben-larg.ico-galben-larg { color:#f59e0b;margin-right:0.4rem; } .stea-aur.stea-aur { color:#f59e0b; } .ico-bifa.ico-bifa { color:#22c55e;font-size:0.75rem;flex-shrink:0; } .ico-info.ico-info { color:#3b82f6;margin-right:0.2rem; } .ico-verde.ico-verde { color:#10b981; } .ico-contact.ico-contact { font-size:1.4rem;color:#1a56db; } .ico-404.ico-404 { font-size:3rem;color:var(--muted);opacity:0.4; } /* Casete de conținut */ .caseta.caseta { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem; } .caseta-lat.caseta-lat { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem; } .caseta-rand.caseta-rand { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap; } .grila-casete.grila-casete { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem; } .caseta-text.caseta-text { font-size:0.82rem;color:var(--muted);margin-top:0.3rem;line-height:1.5; } .caseta-galbena.caseta-galbena { background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius);padding:1.25rem 1.5rem;font-size:0.9rem;line-height:1.7;color:#92400e; } .caseta-pret.caseta-pret { background:var(--accent-light);border-radius:12px;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.6rem; } .caseta-pret-valoare.caseta-pret-valoare { font-weight:800;font-size:1.1rem;color:var(--accent); } .caseta-pret-nota.caseta-pret-nota { font-size:0.75rem;color:var(--muted); } .caseta-pret-text.caseta-pret-text { font-size:0.85rem;color:var(--muted);line-height:1.6;flex:1;min-width:200px; } .sectiune-alba.sectiune-alba { background:#fff;padding:2.5rem 1.25rem;margin:0 -1.25rem;margin-top:2.5rem; } /* Liste de servicii */ .lista-servicii.lista-servicii { list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0.5rem; } .lista-servicii-item.lista-servicii-item { font-size:0.88rem;padding:0.3rem 0;display:flex;align-items:center;gap:0.5rem; } /* Formulare */ .camp-eticheta.camp-eticheta { display:block;font-size:0.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.3rem; } .camp-eticheta-mica.camp-eticheta-mica { font-size:0.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;display:block;margin-bottom:0.2rem; } .camp.camp { width:100%;padding:0.75rem 1rem;border:2px solid #e2e8f0;border-radius:8px;font-size:0.95rem; } .camp-text.camp-text { width:100%;padding:0.75rem 1rem;border:2px solid #e2e8f0;border-radius:8px;font-size:0.95rem;min-height:120px;resize:vertical;font-family:inherit; } .camp-mic.camp-mic { width:100%;padding:0.6rem;border:1.5px solid #e2e8f0;border-radius:5px;font-size:0.88rem; } .camp-mic-text.camp-mic-text { width:100%;padding:0.6rem;border:1.5px solid #e2e8f0;border-radius:5px;font-size:0.88rem;resize:vertical;min-height:90px;font-family:inherit; } .btn-trimite.btn-trimite { width:100%;padding:0.8rem;background:#1a56db;color:#fff;border:none;border-radius:5px;font-size:0.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.4rem; } .mesaj-formular.mesaj-formular { margin-top:1rem;text-align:center;font-size:0.88rem; } .mesaj-mic.mesaj-mic { margin-top:0.5rem;font-size:0.82rem; } .mesaj-mediu.mesaj-mediu { margin-top:0.5rem;font-size:0.85rem; } .contact-cerc.contact-cerc { width:56px;height:56px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; } .text-inchis.text-inchis { color:#64748b;font-size:0.9rem; } .text-inchis-mic.text-inchis-mic { color:#64748b;font-size:0.88rem; } .text-inchis-mb.text-inchis-mb { color:#64748b;font-size:0.88rem;margin-bottom:0.75rem; } .text-inchis-xmic.text-inchis-xmic { font-size:0.82rem;color:#64748b; } .text-404.text-404 { color:var(--muted);margin-bottom:2rem; } /* Oferte și pagina 404 */ .oferta-trimisa.oferta-trimisa { background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:5px;padding:0.75rem;font-size:0.88rem; } .btn-oferta.btn-oferta { display:inline-flex;align-items:center;gap:0.4rem;background:#f59e0b;color:#1e293b;border:none;border-radius:5px;padding:0.6rem 1.2rem;font-size:0.88rem;font-weight:700;cursor:pointer; } .btn-404.btn-404 { display:inline-flex;align-items:center;gap:0.5rem;background:#fbbf24;color:#1e293b;font-weight:800;font-size:1rem;padding:0.85rem 1.75rem;border-radius:5px;text-decoration:none; } .harta-cadru.harta-cadru { display:block;border:0;pointer-events:none; } .zona-404.zona-404 { text-align:center;padding-top:4rem; } /* Detaliile structurate ale unui anunț */ .detalii-lista.detalii-lista { display:flex;flex-direction:column;gap:0.35rem; } .detalii-rand.detalii-rand { display:flex;flex-wrap:wrap;gap:0.3rem;font-size:0.88rem;align-items:center; } .detalii-cheie.detalii-cheie { color:#64748b;flex-shrink:0;font-weight:600; } .detalii-valoare.detalii-valoare { background:#fff;color:#1e293b;padding:0.15rem 0.5rem;border-radius:4px;border:1px solid #e2e8f0;line-height:1.4; } .detalii-text-liber.detalii-text-liber { background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:0.85rem 1rem;font-size:0.9rem;color:#334155;line-height:1.6;white-space:pre-wrap; } /* Completarea profilului */ .profil-indiciu.profil-indiciu { background:#eff6ff;border:1px solid #bfdbfe;border-radius:5px;padding:0.6rem;margin-top:0.4rem;font-size:0.78rem;color:#1e40af;line-height:1.5; } .profil-insigna.profil-insigna { display:inline-flex;align-items:center;gap:0.2rem;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;border-radius:4px;padding:0.1rem 0.35rem;font-size:0.7rem;font-weight:700; } /* Antetul construit de /js/antet.js după autentificare. Numele și butonul de ieșire apar doar pe ecrane late. Erau ascunse cu display:none scris inline, iar antet.js injecta la fiecare încărcare un