") ───────────────────
Full-bleed band on the Cronoxy blue gradient; white title + longer text + CTA. */
.cta-band {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
background: linear-gradient(135deg, #00497c, #98a8bc);
color: #ffffff;
}
.cta-inner {
max-width: var(--lat-sectiune);
margin: 0 auto;
padding: 88px 40px;
}
.cta-title {
margin: 0 0 20px;
font-size: 36px;
line-height: 1.15;
color: #ffffff;
letter-spacing: 0.3px;
max-width: 760px;
}
.cta-text {
margin: 0 0 34px;
font-size: 18px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
max-width: 680px;
}
/* button reversed on the gradient: white pill with brand-blue text */
.cta-btn {
display: inline-block;
background: #ffffff;
color: #00497c;
border-color: #ffffff;
}
.cta-btn:hover { background: #eef3f8; border-color: #eef3f8; color: #00497c; }
/* ── Bara de clienți din paginile de detaliu (cele 15 pagini de industrie) ───
Îmbrăcată exact ca banda de pe paginile de ansamblu — același fundal gri, ambele
borduri, același titlu, aceleași logouri în tonuri de gri — dar fără mișcare:
logourile stau pe loc și trec pe rândul următor când nu încap, deci nu există
marcaj de marchiză. Banda nu are nicio regulă proprie de culoare sau bordură:
le ia pe toate din `.cat-carousel`, ca cele două să nu poată diverge.
Titlul stă deasupra logourilor din marcaj, nu cu `order`, ca să rămână înaintea
grupului pe care îl denumește și pentru cititoarele de ecran. */
/* Aer egal deasupra și dedesubtul benzii: 58px de fiecare parte.
De unde vin cifrele: `.pd-contact` lasă deasupra 29px de alb între marginea de
jos a butonului „Contactați-ne" și muchia benzii (are 36px de padding, din care
7px îi mănâncă spațiul de sub linia butonului, care e inline-flex), plus 1px pe
care îl recuperăm din bordura scoasă mai jos. Dedesubt nu era nimic — banda
albastră „Împreună construim" e full-bleed și începea lipită de bara gri.
Măsurăm în alb vizibil, nu în valori din foaia de stil, ca cele două goluri să
se vadă egale; de aceea paddingul de sus nu e egal cu cel de jos. */
.clients-section { padding: 30px 0 58px; }
/* Linia de la baza secțiunii „Dacă întâmpinați o altă problemă" iese: avea rost
cât timp bara gri venea lipită dedesubt și îi ținea loc de muchie de sus. Acum
banda își poartă singură bordura, iar între ele e aer — linia ar rămâne doar o
dungă suspendată. Se scoate numai unde e urmată de bara de clienți; pe paginile
de servicii `.pd-contact` își păstrează bordura. */
.pd-contact:has(+ .clients-section) { border-bottom: 0; }
.clients-strip {
display: flex;
flex-wrap: wrap; /* logos that don't fit wrap to the next row (no carousel) */
justify-content: center;
align-items: center;
row-gap: 12px;
max-width: none; /* span the full-width band; only wrap at the window edge */
margin: 0 auto;
padding: 0 40px;
}
/* "Another problem?" contact section, placed just before the services section.
A small 50%-width centered 1px blue bar on top; the section's 1px gray bottom
border spans the full screen width. The 4 surrounding vertical gaps are equal
(36px): carousel↔blue bar, blue bar↔text, CTA↔gray bar, gray bar↔services. */
.pd-contact {
margin-top: 36px; /* gap: carousel above -> blue bar (collapses with it) */
padding: 0 40px 36px; /* bottom gap: CTA -> gray bar */
text-align: center;
border-bottom: 1px solid #cfd5dc; /* full-width gray bottom bar */
}
/* Pe paginile sub-serviciilor, spațiul dintre butonul „Contactați-ne" și banda
„Împreună construim pentru dumneavoastră" e mărit de la 36px la 90px. Regula e
limitată la .svc-detail-page, pentru că .pd-contact e folosit și pe cele 15
pagini de industrie, unde spațierea rămâne cea originală. */
body.svc-detail-page .pd-contact { padding-bottom: 90px; }
.pd-contact-bar {
width: 21%;
height: 1px;
margin: 0 auto 36px; /* gap: blue bar -> text */
background: #00497c;
}
/* Text de corp obișnuit, nu accent: invitația de a ne scrie stă sub bara albastră
și înaintea butonului, care duce oricum greutatea vizuală. Fără `font-weight`
moștenește 400 de la . */
.pd-contact-text {
max-width: 720px;
margin: 0 auto 28px; /* gap: text -> CTA (not part of the equal set) */
font-size: 16px;
line-height: 1.55;
color: var(--ink);
}
/* gap: gray bar -> services heading (only when pd-contact precedes the section) */
.pd-contact + .capabilities { padding-top: 36px; }
/* Problem panels: per-problem illustrations replace the gradient placeholders.
Scoped to slots that HAVE an image, so still-empty panels keep their placeholder.
Shown on white, whole SVG visible (object-fit: contain). */
/* image 1 (the problem) — fixed-height banner slot */
.pd-banner .banner2-media:has(img) { background: #ffffff; }
.pd-banner .banner2-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* image 2 (the hero's transformation) — absolutely positioned so it adds 0 to the
row height: the 4 text stairs on the right drive the height and the image only
fits within it (never taller than the cards). */
.pd-peace .pd-peace-media:has(img) { background: #ffffff; position: relative; min-height: 0; overflow: hidden; }
.pd-peace .pd-peace-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* 5 centered, narrowing bars (50% -> 30%) with a blue drop shadow — evokes 5 steps
climbing toward the "porch" section below. Sits between .pd-peace and .pd-porch. */
.pd-steps {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px; /* <= 10px between the steps */
margin: 32px 0;
}
.pd-step {
height: 2px;
border-radius: 4px;
background: #00497c;
box-shadow: 0 4px 8px rgba(0, 73, 124, 0.32);
}
/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
display: flex;
flex-direction: column; /* stack: content zones on top, copyright below */
align-items: flex-start; /* left-align everything (copyright lines up with the logo at 40px) */
gap: 40px; /* space between the content zones and the copyright line */
padding: 40px 0 0; /* only top padding — the copyright band spans edge-to-edge and bottom */
background: #00497c;
color: #c7ccd2;
}
/* Legal pages: the header "Contactați-ne" CTA stays visible at every scroll
position (unlike industry pages, where it appears only once the header turns
solid). Higher specificity than the .site-header[.scrolled] .btn-cta rules. */
body.legal-page .site-header .btn-cta { visibility: visible; }
/* Floating page-title bar (used by the legal pages; per-industry pages define
their own inline copy). Hidden at the top, slides down under the fixed header
once the page
scrolls out of view. Same look as the industry title bar. */
.pd-titlebar {
position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 92; height: var(--bar-h);
display: flex; align-items: center; padding: 0 40px; color: #fff;
background: linear-gradient(135deg, #00497c, #98a8bc);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transform: translateY(-100%); opacity: 0; pointer-events: none;
transition: transform .28s ease, opacity .28s ease;
}
.pd-titlebar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pd-titlebar-name { font-size: 20px; font-weight: 650; letter-spacing: .3px; color: #fff; }
.pd-titlebar-updated { margin-left: 12px; font-size: 14px; font-style: italic; color: rgba(255, 255, 255, 0.85); }
/* Firul Ariadnei în bara de titlu a sub-serviciilor: numele serviciului principal
(clickabil, duce la pagina lui) + iconița lui, apoi un separator vertical, apoi
sub-serviciul curent. Numele părinte e puțin mai mic și mai discret decât cel
curent, ca ierarhia să se citească din prima. */
.pd-titlebar-parent {
display: inline-flex; align-items: center;
color: rgba(255, 255, 255, 0.88);
font-size: 17px; font-weight: 600; letter-spacing: .3px;
text-decoration: none;
transition: color 0.18s ease;
}
.pd-titlebar-parent:hover { color: #ffffff; text-decoration: underline; }
/* Separator vertical: 34px din cei 65px ai barei, cu tonul plin la mijloc și
stins la capete, ca să nu pară o linie tăiată brusc. */
.pd-titlebar-sep {
flex: none;
width: 1px; height: 34px;
/* 18px la stânga, 15px la dreapta = spații EGALE optic: în stânga urmează
direct litera, în dreapta o iconiță de 24px al cărei desen lasă ~3px liberi
în interiorul cutiei (convenția lucide). Cutiile erau deja simetrice. */
margin: 0 15px 0 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
}
/* Floating bottom copyright bar (same as the per-industry pages). */
.pd-footbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
display: flex; align-items: center; justify-content: flex-start;
padding: 16.5px 40px; color: #fff; font-size: 13px; letter-spacing: .2px;
background: linear-gradient(to right, #00497c, #98a8bc);
transition: opacity .35s ease;
}
.pd-footbar.hide { opacity: 0; pointer-events: none; }
/* Top row of the footer: the 3 link columns on the left, the white Cronoxy logo
pinned top-right (top-aligned with the section titles, right edge at the same
40px inset as the header's RO/EN button). */
.footer-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
width: 100%;
padding: 0 40px; /* the 40px side inset now lives here, not on .site-footer */
}
/* Company legal details, placed to the LEFT of the logo, text right-aligned. */
.footer-company {
flex: 0 0 auto;
align-self: flex-start; /* top-aligned with the section titles + logo */
text-align: right;
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.footer-company p { margin: 0; }
.footer-company .footer-email a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.footer-company .footer-email a:hover { color: #ffffff; text-decoration: underline; }
/* Social icons — a single row, dead-centered (horizontally + vertically) in the
footer bottom zone and in the floating footbar. Icons inherit the surrounding
text colour: muted white on the footer/footbar, and Cronoxy-blue when the
footer bottom zone is hovered white. */
.footer-social { display: flex; align-items: center; justify-content: center; gap: 14px; }
.foot-soc { color: inherit; opacity: 0.72; line-height: 0; transition: opacity 0.2s ease; }
.foot-soc:hover { opacity: 1; }
.foot-soc svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.footer-right { position: relative; }
.footer-right .footer-social,
.pd-footbar .footer-social { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.footer-right:hover .foot-soc { opacity: 1; } /* solid blue on the white hover zone */
.footer-company .footer-company-name {
font-size: 15.5px; /* a touch larger than the other detail lines */
font-weight: 700;
color: #ffffff;
padding-bottom: 10px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* underline, like the section titles */
}
.footer-cols {
display: flex;
flex-wrap: wrap;
gap: 56px;
flex: 1 1 auto;
}
.foot-section { display: flex; flex-direction: column; }
/* Section title with a white underline spanning the whole column width
(the h4 is a block, so its border-bottom stretches to the section width;
for Services the section is as wide as its two service columns). */
.foot-title {
margin: 0 0 16px;
padding-bottom: 14px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
color: #9aa6b3; /* muted gray-blue, less prominent */
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.foot-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.foot-list li {
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
transition: color 0.2s ease;
}
.foot-list li:hover { color: #ffffff; }
.footer-right {
align-self: stretch; /* full-width band, edge to edge (no negative margin) */
padding: 16px 40px; /* text aligned at 40px; equal 16px above and below */
border-top: 1px solid rgba(255, 255, 255, 0.35);
display: flex; /* copyright on the left, products on the right */
align-items: center;
gap: 24px;
font-size: 13px;
color: #e5e6e8;
white-space: nowrap;
}
/* "Produsele noastre:" + product logos, pinned to the right edge of both the
footer copyright row and the floating footbar. Logos render white, revealing
their original colours on hover. Reused verbatim in .footer-right + .pd-footbar. */
.footer-products { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.footer-products-label { color: inherit; white-space: nowrap; }
.footer-product { display: inline-flex; align-items: center; line-height: 0; }
.footer-product img,
.footer-product svg {
height: 22px;
width: auto;
display: block;
filter: brightness(0) invert(1); /* white by default (incl. the coloured Depunem D) */
transition: filter 0.25s ease;
}
.footer-product:hover img,
.footer-product:hover svg { filter: none; } /* original brand colours on hover */
.footer-product { cursor: pointer; }
/* thin white vertical divider between two product logos */
.footer-product-sep { flex: none; width: 1px; height: 18px; background: rgba(255, 255, 255, 0.45); }
/* Depunem product logo shows the full "D depunem.ro": the D mark is whitened by
the filter above; the wordmark is white text by default and reveals its brand
colours on hover / when the footer bottom zone is hovered white. */
.footer-product-depunem { gap: 6px; }
.footer-depunem-word { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: #ffffff; transition: color 0.25s ease; }
.footer-product-depunem .depunem-dot { color: #ffffff; }
.footer-product-depunem:hover .footer-depunem-word,
.footer-right:hover .footer-product-depunem .footer-depunem-word { color: #16181D; }
.footer-product-depunem:hover .depunem-dot,
.footer-right:hover .footer-product-depunem .depunem-dot { color: #1F4E79; }
/* Footer bottom zone (copyright + products): hovering anywhere in the zone flips
it to a white card — Cronoxy-blue text and full-colour product logos — so the
products read clearly. Only here, NOT on the floating footbar. Hovering a logo
itself changes nothing further (the zone already shows real colours); the link
cursor is the only cue. */
.footer-right { transition: background-color 0.25s ease, color 0.25s ease; }
.footer-right:hover { background: #ffffff; color: #00497c; }
.footer-right:hover .footer-product img,
.footer-right:hover .footer-product svg { filter: none; }
.footer-right:hover .footer-product-sep { background: rgba(0, 73, 124, 0.35); }
/* ============================================================
Products page (products.html) — hero lead + per-product rows.
Reuses the shared chrome, .industries-bar sub-nav and .cta-band.
============================================================ */
.hero .hero-lead { margin: 0 0 26px; max-width: 580px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
/* Product nav bar: show product logos instead of text. Original colours by
default; white when the tab is active (it gets the Cronoxy-blue background). */
.products-nav a { display: flex; align-items: center; justify-content: center; }
.products-nav .pnav-logo { height: 22px; width: auto; display: block; transition: filter 0.2s ease; }
.products-nav a.active .pnav-logo { filter: brightness(0) invert(1); }
.products-nav .pnav-depunem { gap: 9px; }
.products-nav .pnav-depunem .depunem-word { font-size: 18px; }
.products-nav .pnav-depunem .depunem-mark { transition: filter 0.2s ease; }
.products-nav a.active .pnav-depunem .depunem-mark { filter: brightness(0) invert(1); }
.products-nav a.active .pnav-depunem .depunem-word,
.products-nav a.active .pnav-depunem .depunem-dot { color: #ffffff; }
.product-section { max-width: var(--lat-lectura); margin: 0 auto; padding: 76px 40px; scroll-margin-top: calc(var(--hdr-h) + var(--nav-h)); }
.product-section + .product-section { border-top: 1px solid var(--line); }
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.product-row.reverse .product-media { order: 2; }
.product-media {
height: 340px; display: flex; align-items: center; justify-content: center;
background: #ffffff; border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 18px 40px rgba(0, 73, 124, 0.10); padding: 40px; overflow: hidden;
}
.product-media img { max-height: 100px; max-width: 74%; width: auto; object-fit: contain; }
.product-media .depunem-word { font-size: 44px; }
.product-media.soon { background: linear-gradient(135deg, #00497c, #98a8bc); border-color: transparent; }
.product-media.soon svg { width: 76px; height: 76px; }
/* Laptop mockup showing app screenshots (like the reference product pages):
a laptop with the main app screen + a second "screenshot" card floating over
its corner. Swap the ![]()
src to real screenshots when available. */
/* Containerul machetei devine complet invizibil: fără gradient, fără fundal,
fără chenar și fără umbră — altfel umbra ar fi continuat să-i deseneze
conturul chiar și după scoaterea chenarului. Rămâne doar macheta de laptop,
care are umbra ei proprie. Gradientul lui .product-media.soon rămâne neatins:
acolo nu e nicio machetă, doar o iconiță pe fundal plin. */
.product-media.mockup {
height: 380px; padding: 30px 26px; position: relative;
background: transparent; border: 0; box-shadow: none;
}
.laptop { position: relative; width: 100%; max-width: 430px; }
.laptop-screen { background: #10161d; border-radius: 12px 12px 6px 6px; padding: 9px; box-shadow: 0 22px 46px rgba(0, 73, 124, 0.30); }
.laptop-screen img { display: block; width: 100%; max-height: none; max-width: none; border-radius: 4px; }
.laptop-deck { position: relative; height: 13px; width: 112%; left: -6%; background: linear-gradient(180deg, #e7edf3, #b4c3d3); border-radius: 0 0 11px 11px; box-shadow: 0 12px 18px rgba(0, 73, 124, 0.16); }
.laptop-deck::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20%; height: 5px; background: #9fb0c1; border-radius: 0 0 6px 6px; }
.mockup-float { position: absolute; width: 42%; right: 0; bottom: 4%; border-radius: 9px; border: 4px solid #ffffff; box-shadow: 0 16px 32px rgba(0, 73, 124, 0.26); transform: rotate(3deg); background: #ffffff; overflow: hidden; }
.mockup-float img { display: block; width: 100%; max-height: none; max-width: none; }
.product-badge {
display: inline-block; margin: 0 0 16px; padding: 5px 13px;
font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: #00497c; background: #e9f0f7; border-radius: 20px;
}
.product-badge.soon { color: #7c848d; background: #eef0f2; }
.product-name { margin: 0 0 10px; font-size: 34px; color: var(--ink); letter-spacing: 0.3px; }
/* product name shown as a logo instead of text */
.product-name .product-logo { height: 44px; width: auto; display: block; }
.product-name .depunem-word { font-size: 34px; }
.product-tagline { margin: 0 0 16px; font-size: 20px; line-height: 1.4; color: #2f6ea5; font-weight: 600; }
.product-desc { margin: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--dark); max-width: 54ch; }
.product-features { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.product-features li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--dark); }
.product-features .feat-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #00497c; }
.product-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.product-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa6b3; }
@media (max-width: 900px) {
.product-section { padding: 52px 18px; }
.product-row { grid-template-columns: 1fr; gap: 28px; }
.product-row.reverse .product-media { order: 0; }
.product-media { height: 260px; padding: 30px; }
.product-media.mockup { height: 320px; }
.product-name { font-size: 28px; }
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
.site-header { padding: 12px 18px; gap: 12px; }
.main-nav { gap: 16px; }
.banner2 { grid-template-columns: 1fr; }
.cap-grid { grid-template-columns: repeat(2, 1fr); }
.cta-inner { padding: 60px 18px; }
.cta-title { font-size: 30px; }
.cat-section { padding: 40px 18px; }
.hero-inner h1 { font-size: 38px; }
body.pd-detail .hero .hero-inner h1 { white-space: normal; } /* allow wrap on mobile (no clipping) */
.site-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
.subcat-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } /* single column: natural card heights */
.cap-grid { grid-template-columns: 1fr; }
.logo-item { padding: 0 18px; }
.logo-item img { max-height: 46px; max-width: 104px; }
.logo-item.wide-mdrap img, .logo-item.wide-sts img { height: 46px; }
.logo-item.lg img { height: 54px; }
.logo-item.lg.sm img { height: 44px; }
.logo-item.lg.ssg-fix img { height: 28px; }
.logo-item.lg.tp img { height: 38px; }
.logo-item.xl img { height: 60px; }
/* `.main-nav { display: none }` stătea aici, fără nimic în loc — de la v9
meniul e preluat de panoul hamburger, ascuns de la 1024px în jos. */
}
/* ── Legal pages (terms / privacy / cookie / gdpr) ─────────────
Reading-width document under the solid pd-detail header. Content
is bilingual (data-ro/data-en), translated by the shared switch. */
.legal-main { padding: 120px 0 72px; background: #ffffff; }
.legal-container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.legal-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 28px; }
.legal-title { font-size: 34px; line-height: 1.15; color: var(--ink); margin: 0 0 10px; }
.legal-updated { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.legal-intro { font-size: 16px; line-height: 1.65; color: var(--dark); margin: 0; }
.legal-doc h2 { font-size: 19px; color: var(--ink); margin: 30px 0 10px; line-height: 1.3; }
.legal-link { color: var(--ink); text-decoration: underline; }
.legal-link:hover { color: #003a63; }
.legal-doc p { font-size: 15px; line-height: 1.7; color: var(--dark); margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 20px; }
.legal-doc li { font-size: 15px; line-height: 1.65; color: var(--dark); margin: 4px 0; }
.legal-table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--alt); color: var(--ink); font-weight: 700; }
.legal-table td { color: var(--dark); }
@media (max-width: 760px) {
.legal-main { padding-top: 104px; }
.legal-title { font-size: 27px; }
}
/* ============================================================
Home page (index.html)
Hero animation, section nav, vertical client + technology
carousels and product story cards. Reuses the shared chrome
plus the .capabilities / .cta-band blocks from above.
============================================================ */
/* Hero — taller than the industry heroes: fills the viewport up to the
floating footbar. Animated "systems / data" field (canvas) sits over the
Cronoxy-blue gradient; the title is set on two lines. */
.home-hero { min-height: 50vh; } /* same height as the industries-page hero */
.home-hero .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-media .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-hero .hero-inner { max-width: var(--lat-sectiune); }
.home-hero-title { display: flex; flex-direction: column; gap: 4px; }
.home-hero-title span { display: block; }
/* Section nav — same sticky bar as the industries page, homepage anchors. */
.home-secnav a { white-space: nowrap; }
/* Generic homepage section wrapper + centered head. */
.home-section {
max-width: var(--lat-sectiune);
margin: 0 auto;
padding: 72px 40px;
scroll-margin-top: calc(var(--hdr-h) + var(--nav-h)); /* fixed header (89) + sticky nav (58) */
}
.home-section-head { text-align: center; margin: 0 auto 40px; max-width: 720px; }
/* Full-width gray separator between home sections, with the same soft blue
drop shadow used on the detail-page banners. position+z-index lift it above
the following section, otherwise that section's white background hides the
downward shadow. */
/* Separator = a real 24px-tall block in normal flow: a gray line on top and the
blue drop shadow painted as a gradient fading downward inside it. Because it
occupies its own space, nothing overlaps/hides the shadow (a box-shadow from a
1px line is too faint, and an absolutely-positioned one gets covered by the
next section). */
.home-sep {
border: 0; border-top: 1px solid var(--line);
height: 8px; margin: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.03) 22%, rgba(0, 0, 0, 0) 55%);
}
.home-title { margin: 0 0 12px; font-size: 30px; line-height: 1.2; color: var(--ink); letter-spacing: 0.3px; }
.home-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
/* Sub-heading inside the home "Servicii" block (governance-pyramid title): same
look as the group section titles — thick grey underline bar, here centred. */
/* Left-aligned, but constrained to the same 1200px content band as the other
home sections (Industries etc.) — 1120 = 1200 minus the section's 2×40 padding.
The 5-group grid below stays full-width. */
/* Double the gap between the "Servicii" intro paragraph and the 5-group grid. */
.services-band > .home-section-head:not(.svc-arch-head) { margin-bottom: 80px; }
/* Full-bleed 1px grey rule between the 5-group grid and the pyramid title. */
.svc-arch-head { max-width: var(--lat-lectura); margin: 0 auto 30px; text-align: left; }
/* Gap under the pyramid = gap above the "Servicii" title (section padding-top,
72px). The pyramid SVG carries ~26px of empty space below its base, so the
structural spacing below it is 46px (46 + ~26 ≈ 72). */
.services-band .svc-arch-inner { margin-bottom: 0; }
.capabilities.services-band { padding-bottom: 46px; }
.svc-arch-head .ph-line { max-width: 420px; margin: 12px 0 0; }
.svc-arch-head .cat-sub { max-width: none; margin: 16px 0 0; }
/* capabilities reused for the Services section — give it the same anchor offset */
.capabilities[id] { scroll-margin-top: calc(var(--hdr-h) + var(--nav-h)); }
a.cap-card.home-cat-card { display: block; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.cap-card.home-cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 73, 124, 0.16); }
.home-cat-card .cap-media { display: flex; align-items: center; justify-content: center; }
.home-cat-card .cap-media { padding: 14px; overflow: hidden; }
.home-cat-card .cap-media img.cap-illu { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0.97; }
.home-cat-card .cap-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-cat-card .cap-title .home-cat-arr { color: #2f6ea5; transition: transform 0.2s ease; flex: none; }
a.cap-card.home-cat-card:hover .home-cat-arr { transform: translateX(3px); }
/* ── Vertical carousels (clients + technologies) ─────────── */
.v-viewport { position: relative; overflow: hidden; }
.v-viewport::before,
.v-viewport::after { content: ""; position: absolute; left: 0; right: 0; height: 66px; z-index: 2; pointer-events: none; }
.v-viewport::before { top: 0; background: linear-gradient(to bottom, #ffffff 0, rgba(255,255,255,0) 100%); }
.v-viewport::after { bottom: 0; background: linear-gradient(to top, #ffffff 0, rgba(255,255,255,0) 100%); }
.v-track { display: flex; flex-direction: column; will-change: transform; }
/* Clienti — 3 columns, ~3 logos visible per column, logos free on the page
(no boxes): grayscale + faded, full colour on hover, same as the marquees. */
.vclients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vclients .v-viewport { height: 336px; }
.vclient { height: 112px; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.vclient img {
max-height: 54px; max-width: 150px; width: auto; height: auto;
object-fit: contain;
filter: grayscale(100%); opacity: 0.55;
transition: filter 0.4s ease, opacity 0.4s ease;
}
.vclient:hover img { filter: none; opacity: 1; }
.vclient.listit img { filter: grayscale(100%) brightness(0.5); }
.vclient.listit:hover img { filter: none; }
/* Produse — "success story" style vertical cards. */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.story-card {
display: flex; flex-direction: column;
background: var(--alt);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 73, 124, 0.16); }
.story-media {
height: 190px; display: flex; align-items: center; justify-content: center;
background: #ffffff; border-bottom: 1px solid var(--line); padding: 30px;
}
.story-media img { max-height: 60px; max-width: 74%; width: auto; object-fit: contain; }
/* Depunem wordmark (D mark + "depunem.ro") rendered in the media, on white. */
.depunem-logo { display: inline-flex; align-items: center; gap: 12px; }
.depunem-mark { flex: none; display: block; }
.depunem-word { font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700;
line-height: 1; letter-spacing: -0.01em; color: #16181D; }
.depunem-dot { color: #1F4E79; }
.story-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.story-title { margin: 0 0 10px; font-size: 21px; color: var(--ink); }
.story-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.story-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.story-cta .arr { transition: transform 0.2s ease; }
.story-cta:hover { color: #003a63; }
.story-cta:hover .arr { transform: translateX(3px); }
/* "Coming soon" product cards: blue-gradient media with a white product glyph,
a muted tag + a non-clickable "available soon" note instead of a link. */
.story-card.soon .story-media { background: linear-gradient(135deg, #00497c, #98a8bc); border-bottom-color: transparent; }
.story-card.soon .story-media svg { width: 54px; height: 54px; opacity: 0.92; }
.story-soon { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.story-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa6b3; flex: none; }
/* Tehnologii — 5 vertical scrolling columns of blue tech chips. Full-bleed
band on --alt; all columns share the same list, phase-shifted per column. */
.tech-band {
position: relative; left: 50%; right: 50%; width: 100vw;
margin-left: -50vw; margin-right: -50vw;
margin-bottom: 80px; /* white gap before the footer */
background: var(--alt);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.tech-inner { max-width: var(--lat-sectiune); margin: 0 auto; padding: 18px 40px; }
.tech-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tech-cols .v-viewport { height: 448px; }
.tech-cols .v-viewport::before { background: linear-gradient(to bottom, var(--alt) 0, rgba(244,245,247,0) 100%); }
.tech-cols .v-viewport::after { background: linear-gradient(to top, var(--alt) 0, rgba(244,245,247,0) 100%); }
.tech-col-track { gap: 12px; padding: 6px 0; }
.tech {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 10px 14px;
background: #ffffff;
border: 1px solid var(--line);
border-radius: 24px;
color: #00497c; font-size: 13.5px; font-weight: 600;
white-space: nowrap;
}
.tech-ico { width: 20px; height: 20px; flex: none; display: block; }
/* ── "Serviciile noastre" band: 5 governance groups on one full-width row ── */
.capabilities.services-band { max-width: 100%; }
/* Pagini de detaliu industrie: antetul „Serviciile noastre" (titlu + bară + text)
stă în coloana de conținut de 1200px (aliniat cu banda „Împreună construim" de
deasupra), iar cele 5 grupuri rămân pe toată lățimea. */
.capabilities.services-band.svc-detail { padding-left: 0; padding-right: 0; }
/* Banda de conținut a secțiunii de servicii — 1200px minus 2×40 = 1120px utili.
NU e legată de .svc-detail: aceeași bandă ține și caruselul de servicii de pe
pagina de acasă, care altfel s-ar întinde pe toată lățimea ferestrei (secțiunea
are max-width:100%, mai sus). Oriunde apare .svc-inner, conținutul stă în ea. */
.services-band .svc-inner { max-width: var(--lat-sectiune); margin: 0 auto; padding: 0 40px; }
/* Tooltip head (service groups + pyramid, which clones the same markup):
group title in the representative colour, short subtitle in grey italic,
a left→right gradient rule, then the existing long description. */
.svc-tip-title { display: block; font-size: 14px; font-weight: 700; color: var(--gc, #00497c); margin: 0 0 2px; }
.svc-tip-sub { display: block; font-style: italic; color: #8a97a3; font-size: 12px; line-height: 1.4; margin: 0 0 8px; }
.svc-tip-rule { display: block; height: 2px; margin: 0 0 9px; border-radius: 2px; background: linear-gradient(90deg, var(--gc, #00497c), transparent); }
.svc-tip-desc { display: block; }
.pyr-tip strong { color: var(--gc, #00497c); }
/* ── Piramida de guvernanță: hover pe o zonă → se mărește, urcă în față și
afișează un tooltip (stânga/dreapta) cu descrierea grupului. ──────────── */
.pyr-host { position: relative; }
.pyr-zone { cursor: pointer; }
/* Zoom pe hover eliminat: regiunea rămâne neschimbată, apare doar tooltip-ul. */
.pyr-tip {
position: absolute;
width: 300px; max-width: 78vw;
background: #ffffff; color: #3b4650;
border: 1px solid var(--line);
border-top: 3px solid var(--gc, #00497c);
border-radius: 12px; padding: 13px 15px;
box-shadow: 0 16px 36px rgba(0, 73, 124, 0.18);
font: 400 12.6px/1.55 Arial, Helvetica, sans-serif;
text-align: left;
opacity: 0; visibility: hidden;
transition: opacity 0.18s ease, visibility 0s linear 0.18s;
pointer-events: auto; /* hoverabil + selectabil (copy) */
cursor: auto;
z-index: 5;
}
.pyr-tip.on { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
@media (max-width: 900px) {
.home-section { padding: 52px 18px; }
.tech-inner { padding: 18px 18px; }
.tech-cols { grid-template-columns: repeat(3, 1fr); }
.vclients { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.tech-cols { grid-template-columns: repeat(2, 1fr); }
.vclients { grid-template-columns: 1fr; }
.vclients .v-viewport { height: 300px; }
.stories-grid { grid-template-columns: 1fr; }
}
/* Cele 5 caruseluri verticale de tehnologii au 448px fiecare. Pe 2 coloane
înseamnă 3 rânduri, adică 1418px de bandă — două ecrane de telefon doar
pentru ea. Caruselul de clienți avea deja regula; o primește și acesta. */
@media (max-width: 900px) { .tech-cols .v-viewport { height: 340px; } }
@media (max-width: 560px) { .tech-cols .v-viewport { height: 280px; } }
/* ============================================================
Contact page (contact.html)
============================================================ */
/* Hero animation canvas (same slot behaviour as the home hero). */
.contact-hero { min-height: 50vh; }
.contact-hero .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contact-hero .hero-inner { max-width: var(--lat-sectiune); }
.contact-hero .hero-lead { margin: 0 0 26px; max-width: 620px; }
/* Shared wrapper for the contact sections. */
.contact-wrap { max-width: var(--lat-sectiune); margin: 0 auto; padding: 72px 40px; }
.contact-head { text-align: center; margin: 0 auto 40px; max-width: 760px; }
.contact-head .home-title { margin: 0 0 12px; }
.contact-head .home-sub { margin: 0; }
/* ── Form ─────────────────────────────────────────────────── */
.contact-form-wrap { max-width: 820px; margin: 0 auto; }
.contact-form {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 34px 34px 30px;
box-shadow: 0 18px 40px rgba(0, 73, 124, 0.08);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field .req { color: #c0392b; margin-left: 2px; }
.field input:not([type="checkbox"]),
.field textarea {
font: inherit;
color: var(--ink);
background: var(--alt);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
width: 100%;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:not([type="checkbox"])::placeholder,
.field textarea::placeholder { color: #9aa2ab; }
.field input:not([type="checkbox"]):focus,
.field textarea:focus {
outline: none;
background: #ffffff;
border-color: #00497c;
box-shadow: 0 0 0 3px rgba(0, 73, 124, 0.12);
}
.field .field-msg { min-height: 16px; margin-top: 6px; font-size: 12.5px; color: #c0392b; }
.field.has-error input:not([type="checkbox"]),
.field.has-error textarea { border-color: #c0392b; background: #fdf3f2; }
/* Consent row */
.form-consent { margin: 4px 0 22px; }
.consent-text { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.consent-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; }
.consent-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #00497c; flex: none; cursor: pointer; }
.consent-copy { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
/* only "Sunt de acord" toggles the checkbox */
.consent-agree { cursor: pointer; }
.consent-static { font-weight: 400; color: var(--muted); }
.consent-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.field.has-error .consent-copy { color: #c0392b; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-submit { border: none; cursor: pointer; font: inherit; }
.form-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: #1a7f4b; opacity: 0; transition: opacity .2s; }
.form-note.show { opacity: 1; }
/* ── Find us (address + map) ──────────────────────────────── */
.contact-find { background: var(--alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.find-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: stretch; }
.find-info { display: flex; flex-direction: column; justify-content: center; }
.find-info h2 { margin: 0 0 18px; font-size: 30px; line-height: 1.2; color: var(--ink); letter-spacing: 0.3px; }
.find-addr { list-style: none; margin: 0 0 24px; padding: 0; }
.find-addr li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.find-addr li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; stroke: #00497c; }
.find-addr a { color: var(--ink); text-decoration: none; }
.find-addr a:hover { text-decoration: underline; }
.find-map {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 12px 30px rgba(0, 73, 124, 0.10);
min-height: 340px;
background: #e9edf1;
}
.find-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
/* ── Social (original brand colours) ─────────────────────── */
.contact-social { text-align: center; }
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 8px; }
.csoc {
width: 58px; height: 58px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--line);
box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
transition: transform .16s ease, box-shadow .16s ease;
}
.csoc svg { width: 26px; height: 26px; display: block; }
.csoc:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(16, 24, 40, 0.16); }
@media (max-width: 900px) {
.contact-wrap { padding: 52px 18px; }
.contact-form { padding: 26px 20px 24px; }
.find-grid { grid-template-columns: 1fr; gap: 26px; }
.find-info h2 { font-size: 26px; }
}
@media (max-width: 560px) {
.form-row { grid-template-columns: 1fr; }
.contact-hero .hero-inner h1 { font-size: 38px; }
}
/* Intro banner mosaic: 9 service icons, white on the blue tile. */
.svc-mosaic {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
/* The 4-icon column at the larger icon size is taller than the fixed 260px band,
so let the services media grow to fit (min-height keeps parity with others). */
.banner2-media:has(.svc-mosaic) { height: auto; min-height: 260px; }
/* One column per service group (icon counts: 2, 3, 2, 2, 4), each stacked
vertically and centred, with equal spacing between the five columns. */
.svc-mosaic-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.svc-mosaic svg {
/* same box size as the industries mosaic icons (~51px cell, 6px padding) */
width: 51px; height: 51px; flex: 0 0 auto; opacity: 0.92;
box-sizing: border-box; padding: 6px; border-radius: 9px; cursor: pointer;
transition: background .18s ease, stroke .18s ease, opacity .18s ease;
}
/* Hover: white chip + Cronoxy-blue glyph (CSS stroke overrides the white attr). */
.svc-mosaic svg:hover { opacity: 1; background: #fff; stroke: #00497c; }
/* ── Direcții de acțiune — rânduri alternante: imagine ⇄ (iconiță + titlu + descriere) ── */
.dir-list { display: flex; flex-direction: column; gap: 64px; margin-top: 6px; }
.dir-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dir-row.reverse .dir-media { order: 2; }
.dir-row.reverse .dir-body { order: 1; }
.dir-media { min-width: 0; }
.dir-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 6px 26px rgba(0,73,124,.10); }
.dir-body { min-width: 0; }
.dir-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dir-ico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.dir-ico svg { width: 25px; height: 25px; }
.dir-kicker { margin: 0 0 3px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.dir-title { margin: 0; font-size: 22px; line-height: 1.25; color: var(--ink); }
.dir-desc { max-height: 280px; overflow-y: auto; margin: 0; padding-right: 14px; scrollbar-width: thin; scrollbar-color: #c3ccd6 transparent; }
.dir-desc p { margin: 0 0 12px; color: #3b4650; font-size: 14.5px; line-height: 1.72; }
.dir-desc p:last-child { margin-bottom: 0; }
.dir-desc::-webkit-scrollbar { width: 8px; }
.dir-desc::-webkit-scrollbar-thumb { background: #c3ccd6; border-radius: 4px; }
.dir-desc::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) {
.dir-row, .dir-row.reverse { grid-template-columns: 1fr; gap: 22px; }
.dir-row.reverse .dir-media, .dir-row.reverse .dir-body { order: 0; }
.dir-list { gap: 46px; }
}
.dir-desc a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Piramida + Direcții de acțiune injectate pe paginile de detalii ale serviciilor
(components.js): ambele sunt .home-section, deci fără o regulă proprie s-ar cumula
padding-ul de jos (72px) + marginea .svc-arch-inner (70px) + padding-ul de sus (72px).
Colapsăm frontiera dintre ele la un spațiu moderat. */
#gov-pyramid-block { padding-bottom: 22px; }
#gov-pyramid-block .svc-arch-inner { margin-bottom: 0; }
#gov-pyramid-block + #directii-actiune { padding-top: 22px; }
/* ── index.html — cele 4 servicii, rânduri alternante text ⇄ imagine ──────────
Fiecare rând își poartă culoarea în --sc (iconiță, supratitlu, linie-accent,
CTA), dată inline pe , ca să nu fie nevoie de câte o regulă per
serviciu. Ilustrațiile din _assets/images/services-home/ sunt desenate deja în
culoarea serviciului, fundal cu tot — de aceea containerul lor nu mai adaugă
niciun fundal. */
.hsvc-list { display: flex; flex-direction: column; gap: 72px; margin-top: 10px; }
.hsvc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.hsvc-row.reverse .hsvc-media { order: 2; }
.hsvc-row.reverse .hsvc-body { order: 1; }
/* Fără fundal propriu: ilustrația își aduce singură fundalul, în culoarea
serviciului. Colțurile rotunjite (18px) și umbra stau pe ![]()
, ca umbra să
urmeze exact marginea desenului, nu o casetă mai mare din jurul lui. */
.hsvc-media { min-width: 0; }
.hsvc-media img { width: 100%; height: auto; display: block; border-radius: 18px;
box-shadow: 0 6px 26px rgba(0,73,124,.08); }
.hsvc-body { min-width: 0; }
.hsvc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hsvc-ico { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--sc);
color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hsvc-ico svg { width: 25px; height: 25px; }
.hsvc-kicker { margin: 0 0 3px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--sc); }
.hsvc-title { margin: 0; font-size: 23px; line-height: 1.25; color: var(--ink); }
/* Linia-accent de sub titlu, în culoarea serviciului, ca la titlurile de secțiune. */
.hsvc-rule { display: block; width: 88px; height: 3px; border-radius: 2px; margin: 0 0 18px;
background: linear-gradient(90deg, var(--sc), transparent); }
.hsvc-desc p { margin: 0 0 14px; color: #3b4650; font-size: 15px; line-height: 1.75; }
.hsvc-desc p:last-child { margin-bottom: 0; }
.hsvc-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
padding: 11px 22px; border: 1.5px solid var(--sc); border-radius: 999px;
color: var(--sc); background: transparent; font-size: 14.5px; font-weight: 600;
text-decoration: none; transition: background .18s ease, color .18s ease; }
.hsvc-cta:hover, .hsvc-cta:focus-visible { background: var(--sc); color: #fff; }
.hsvc-cta svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 900px) {
.hsvc-row, .hsvc-row.reverse { grid-template-columns: 1fr; gap: 26px; }
.hsvc-row.reverse .hsvc-media, .hsvc-row.reverse .hsvc-body { order: 0; }
.hsvc-list { gap: 54px; }
.hsvc-media { padding: 18px; }
}
/* ── Caruselul de servicii din banda de jos a paginilor de industrie ──────────
Slide-urile refolosesc întocmai .hsvc-* de pe pagina de acasă; aici se adaugă
doar mecanica de carusel. Pista are lățimea de 4×100%, deci fiecare slide
ocupă un sfert din ea — adică exact lățimea ferestrei. Înălțimea ferestrei o
dă cel mai înalt slide (flex-ul le întinde egal), ca trecerea de la unul la
altul să nu salte pagina sub cursor. */
.hsvc-carousel { margin-top: 6px; }
.hsvc-viewport { overflow: hidden; }
.hsvc-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
/* Slide-urile inactive rămân vizibile în fluxul pistei — le ascunde fereastra cu
overflow, nu o regulă de vizibilitate. Altfel cel care intră ar apărea gol pe
toată durata alunecării. Din ordinea de tabulare ies prin aria-hidden/tabindex,
puse din JS. */
.hsvc-slide { width: 25%; flex: none; padding: 4px 2px 8px; }
.hsvc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.hsvc-nav { width: 40px; height: 40px; padding: 0; flex: none; display: inline-flex;
align-items: center; justify-content: center; border: 1.5px solid #d3dbe3;
border-radius: 50%; background: #fff; color: #00497c; cursor: pointer;
transition: border-color .18s ease, background .18s ease, color .18s ease; }
.hsvc-nav:hover { border-color: #00497c; background: #00497c; color: #fff; }
.hsvc-nav svg { width: 19px; height: 19px; }
.hsvc-dots { display: flex; gap: 10px; }
/* Bulinele poartă culoarea serviciului pe care îl deschid — cine a văzut secțiunea
o dată recunoaște violetul sau portocaliul înainte să apese. */
.hsvc-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
background: #cfd5dc; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.hsvc-dot:hover { background: var(--sc); }
.hsvc-dot.active { background: var(--sc); transform: scale(1.35); }
@media (max-width: 900px) {
.hsvc-controls { gap: 14px; margin-top: 22px; }
}
/* ── services.html — cele 4 servicii ca zone clicabile în banner-ul de sus ────
Ocupă exact dreptunghiul în care stătea ilustrația, împărțit în patru. De aceea
`.banner2-media` își pierde aici fundalul în degrade și padding-ul: fundalul îl
dau cele patru plăci, fiecare în culoarea serviciului ei. */
/* Plăcile încep exact de la primul rând al descrierii, nu de la titlu. Nu le
coborâm cu o margine în pixeli — titlul se poate rupe pe două sau trei rânduri,
după limbă și lățime, iar decalajul fix ar rămâne în urmă. În schimb, titlul și
paragraful devin rânduri distincte ale grilei, iar plăcile se așază pe rândul
paragrafului: alinierea iese din layout și se corectează singură.
Același tipar e folosit și de banda de sus a paginii de industrii, unde în
dreapta stă mozaicul de iconițe — de aceea regulile poartă și numele neutru
`.banner2-split`, iar ultima țintește `.banner2-media` (clasa pe care o au
ambele: plăcile din services.html sunt `banner2-media svc-quad`).
`align-items: start` ține ambele coloane lipite de marginea de sus a rândului:
fără el, grila ar centra pe verticală coloana mai scundă. */
.banner2-svc, .banner2-split { grid-template-rows: auto auto; align-items: start; }
/* Titlul și paragraful erau frați în același bloc, despărțiți doar de marginea de
16px a titlului. Devenind rânduri de grilă, li s-ar mai adăuga și `row-gap`-ul
de 10px al lui `.banner2`; îl anulăm, ca spațierea să rămână exact cea dinainte
(coloanele își păstrează cei 40px). */
.banner2-split { row-gap: 0; }
.banner2-svc > .banner2-title, .banner2-split > .banner2-title { grid-column: 1; grid-row: 1; }
.banner2-svc > .banner2-p { grid-column: 1; grid-row: 2; }
/* Pe pagina de industrii descrierea are mai multe paragrafe, ținute într-un
singur bloc — deci ocupă o singură celulă a grilei. Dacă ar fi copii direcți,
al doilea paragraf ar cădea pe rândul 3, adică sub imaginea de pe rândul 2, cu
un gol între ele. Așa, oricâte paragrafe ar fi, curg unul după altul. */
.banner2-split > .banner2-text { grid-column: 1; grid-row: 2; }
.banner2-svc > .banner2-media, .banner2-split > .banner2-media { grid-column: 2; grid-row: 2; }
/* Înălțime `auto`, nu fixă: plăcile își iau înălțimea din conținut, iar cu un
gap de 21px blocul ajunge la aceeași înălțime cu paragraful de alături — deci
se aliniază și sus, și jos. O înălțime fixă ar strica potrivirea de îndată ce
textul s-ar schimba. */
.banner2-media.svc-quad {
background: none; padding: 0; height: auto;
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 21px;
}
/* Patru culori pline, una lângă alta, strigau prea tare pentru un banner de
deschidere. Le ținem la 0,82 — destul cât să se recunoască fiecare serviciu,
fără ca patrulaterul să fure atenția de la titlu. Sub ~0,7 albul textului
începe să pălească, mai ales pe portocaliu. La hover revin la plin: e semnalul
că placa e un link, nu un simplu chenar colorat. */
.svc-quad-tile {
background: var(--sc); border-radius: 12px; color: #fff; text-decoration: none;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 14px 16px; text-align: center; min-width: 0;
opacity: .82;
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.svc-quad-tile:hover, .svc-quad-tile:focus-visible {
opacity: 1; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,73,124,.22);
}
.svc-quad-tile:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.svc-quad-ico { width: 34px; height: 34px; flex: none; }
.svc-quad-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
@media (max-width: 900px) {
/* Pe o singură coloană nu mai există „rândul paragrafului" de aliniat: lăsăm
cele trei blocuri să curgă normal, unul sub altul. */
.banner2-svc > .banner2-title,
.banner2-svc > .banner2-p,
.banner2-svc > .svc-quad { grid-column: 1; grid-row: auto; }
.svc-quad-tile { padding: 18px 14px; }
}
/* Separator între banner-ul de deschidere și primul serviciu (services.html).
Nu e full-bleed ca .svc-arch-sep și nu are degradeul lui .home-sep: doar o
linie de 1px, centrată pe aceeași bandă de conținut de 1120px pe care stau
textul și plăcile de deasupra, ca să pară că închide banner-ul, nu că taie
pagina în două. */
.svc-sep {
border: 0; border-top: 1px solid var(--line);
max-width: var(--lat-lectura); margin: 56px auto; height: 0;
}
/* Spațiul din jurul liniei îl dă exclusiv marginea ei. Padding-ul de jos al
banner-ului și marginea de jos a paragrafului se anulează aici — altfel s-ar
aduna peste margine și linia ar sta descentrată, mai departe de textul de
deasupra decât de primul serviciu de dedesubt. */
.banner2-svc { padding-bottom: 0; }
.banner2-svc > .banner2-p { margin-bottom: 0; }
/* services.html — cele 4 servicii, strânse la banda de conținut.
Secțiunea are `max-width: 100%` (regulă rămasă de pe vremea celor 5 grupuri de
guvernanță, care se întindeau pe toată lățimea), așa că rândurile ajungeau la
~1305px, mai late decât banner-ul de deasupra (1200) și decât linia de separare
(1120). Le aducem la aceeași bandă de 1120px, ca marginile paginii să cadă pe
aceeași verticală de sus până jos.
Constrângerea stă pe rânduri, NU pe .hsvc-list: caruselele de clienți sunt și
ele în listă și trebuie să rămână pe toată lățimea, cum arată și în paginile de
detaliu de unde au fost aduse. */
.hsvc-list > .hsvc-row { max-width: var(--lat-lectura); width: 100%; margin-left: auto; margin-right: auto; }
/* Ancorele barei de navigare cad pe articolele serviciilor, care — spre deosebire
de .capabilities[id] sau .cat-section — n-aveau decalaj de ancoră. Fără el,
browserul aduce marginea de sus a articolului la marginea ferestrei, adică
fix sub antetul fix (--hdr-h) și bara lipicioasă (--nav-h), iar titlul serviciului
rămâne ascuns. 147 = 89 + 58 (antet + bară) lipește serviciul de bară; adăugăm
40px de aer deasupra, ca titlul să nu pornească direct din marginea ei. */
.hsvc-list > .hsvc-row[id] { scroll-margin-top: calc(var(--hdr-h) + var(--nav-h) + 40px); }
/* products.html — ClLink: macheta de laptop pornește de la rândul cu sloganul
(„Toată comunicarea, într-un singur loc, cu AI."), nu de la mijlocul textului.
Nu o coborâm cu o margine în pixeli: înălțimea insignei și a logoului se poate
schimba (alt logo, alt text, altă lățime de ecran) și decalajul fix ar rămâne
în urmă. În schimb, insigna + logoul stau pe primul rând al grilei, iar macheta
și restul textului pe al doilea — alinierea iese din așezare.
row-gap: 0 fiindcă .product-row are `gap: 52px`, care s-ar aplica și între
cele două rânduri și ar rupe spațiul strâns dintre logo și slogan. */
.product-row-aligned { grid-template-rows: auto auto; row-gap: 0; align-items: start; }
.product-row-aligned > .product-info-head { grid-column: 2; grid-row: 1; }
.product-row-aligned > .product-media { grid-column: 1; grid-row: 2; }
.product-row-aligned > .product-info-rest { grid-column: 2; grid-row: 2; }
/* Grila aduce CONTAINERUL la nivelul sloganului, dar înăuntru .product-media își
centrează conținutul pe 380px și mai are și 30px de padding sus — laptopul ar
rămâne cu ~45px mai jos. Aici containerul e oricum invizibil, așa că îl lipim
de sus: se aliniază laptopul însuși, nu cutia din jurul lui. */
.product-row-aligned > .product-media { align-items: flex-start; padding-top: 0; height: auto; }
@media (max-width: 900px) {
/* Pe o coloană nu mai există rândul sloganului de aliniat: totul curge normal. */
.product-row-aligned > .product-info-head,
.product-row-aligned > .product-media,
.product-row-aligned > .product-info-rest { grid-column: 1; grid-row: auto; }
}
/* ============================================================
Navigația pe ecrane mici (v9)
Sub 1024px, meniul orizontal e înlocuit de un buton hamburger
care deschide un panou pe tot ecranul. Până în v9 nu exista
nimic aici: `.main-nav` se ascundea sub 560px și atât.
============================================================ */
/* butonul hamburger — ascuns pe ecrane late, unde meniul încape */
.nav-toggle {
display: none;
flex: 0 0 auto;
width: 44px; height: 44px; /* ținta de atingere cerută de WCAG 2.5.5 */
padding: 0; border: 0; background: transparent; cursor: pointer;
align-items: center; justify-content: center;
}
/* trei linii dintr-un singur element: bara din mijloc e fundalul,
celelalte două sunt pseudo-elemente deplasate */
/* Culoarea liniilor vine din `color`-ul butonului, nu scrisă de trei ori: headerul
are trei stări în care fundalul e alb, iar o listă de selectori × trei elemente
ar fi însemnat nouă reguli de ținut sincronizate. */
.nav-toggle { color: #ffffff; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block; width: 24px; height: 2px; border-radius: 2px;
background: currentColor; transition: color 0.3s ease, transform 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
/* cele trei stări cu fundal alb: header derulat, mega-meniu deschis, și paginile
de detaliu, unde `body.pd-detail .site-header` e alb din capul locului —
acolo liniile albe erau invizibile pe toate cele 41 de pagini */
.site-header.scrolled .nav-toggle,
body:has(.mega.open) .site-header .nav-toggle,
body.pd-detail .site-header .nav-toggle { color: var(--ink); }
/* ── panoul ──────────────────────────────────────────────── */
.mnav {
position: fixed; inset: 0; z-index: 200;
background: rgba(9, 26, 41, 0.55);
opacity: 0; transition: opacity 0.2s ease;
}
.mnav.open { opacity: 1; }
.mnav[hidden] { display: none; }
.mnav-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
display: flex; flex-direction: column;
background: #ffffff;
box-shadow: -8px 0 28px rgba(0, 32, 64, 0.18);
transform: translateX(100%); transition: transform 0.22s ease;
/* panoul se derulează singur: pe telefon în peisaj, lista de 21 de industrii
nu încape pe înălțime */
overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mnav.open .mnav-panel { transform: translateX(0); }
.mnav-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--line);
position: sticky; top: 0; background: #ffffff; z-index: 1;
}
.mnav-brand img { display: block; height: 44px; width: auto; }
.mnav-close {
width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
cursor: pointer; color: var(--ink);
display: flex; align-items: center; justify-content: center;
}
.mnav-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.mnav-list { display: flex; flex-direction: column; padding: 8px 0; flex: 1 1 auto; }
.mnav-link,
.mnav-top {
display: flex; align-items: center; justify-content: space-between;
width: 100%; min-height: 52px; /* confortabil la atingere, nu doar suficient */
padding: 12px 18px; margin: 0;
border: 0; background: transparent; text-align: left; cursor: pointer;
font: inherit; font-size: 17px; font-weight: 600; color: var(--ink);
border-bottom: 1px solid var(--line);
}
.mnav-link:hover, .mnav-top:hover { background: var(--alt); }
.mnav-caret {
flex: none; width: 9px; height: 9px; margin-left: 12px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.2s ease;
}
.mnav-group.open .mnav-caret { transform: rotate(-135deg) translate(-2px, -2px); }
/* sub-lista: închisă implicit, fără să dispară din fluxul de citire */
.mnav-sub { display: none; padding: 6px 0 12px; background: var(--alt); border-bottom: 1px solid var(--line); }
.mnav-group.open .mnav-sub { display: block; }
.mnav-grup {
margin: 12px 0 4px; padding: 0 18px;
font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--muted);
}
.mnav-item, .mnav-all {
display: flex; align-items: center; min-height: 44px;
padding: 8px 18px 8px 26px;
font-size: 15px; line-height: 1.35; color: var(--dark);
}
.mnav-all { font-weight: 700; color: var(--ink); padding-left: 18px; }
.mnav-item:hover, .mnav-all:hover { background: #ffffff; }
.mnav-off { color: #a8b0b8; } /* industrie încă nepublicată — ca în mega-meniu */
.mnav-foot {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line); background: #ffffff;
/* lipit de baza panoului: cu secțiunea Industrii desfăcută, panoul are 1587px
de derulat, iar butonul CTA și comutatorul de limbă ajungeau sub cele 21 de
industrii — de negăsit fără să derulezi până la capăt */
position: sticky; bottom: 0; z-index: 1;
}
.mnav-cta {
flex: 1 1 auto; min-height: 48px;
display: flex; align-items: center; justify-content: center; text-align: center;
font-size: 14px; line-height: 1.25; white-space: normal;
}
.mnav-lang {
flex: none; min-width: 52px; min-height: 48px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--ink); border-radius: 24px;
font-size: 14px; font-weight: 700; color: var(--ink);
}
.mnav-lang:hover { background: rgba(0, 73, 124, 0.08); }
/* fundalul nu se mai derulează cât panoul e deschis */
html.mnav-blocat, html.mnav-blocat body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.mnav, .mnav-panel, .mnav-caret { transition: none; }
}
/* ── comutarea ────────────────────────────────────────────── */
@media (max-width: 1024px) {
.nav-toggle { display: flex; }
.main-nav { display: none; }
/* butonul CTA din header e cel mai lat element al barei (271px la text
întreg) și era cauza principală a depășirii pe orizontală; pe ecrane
mici trăiește doar în panou */
.site-header .btn-cta { display: none; }
.site-header .lang-switch { display: none; }
.site-header { grid-template-columns: auto 1fr; gap: 12px; }
.header-actions { justify-content: flex-end; }
}
/* ── Subsolul pe ecrane mici ──────────────────────────────────
`.footer-right` și `.pd-footbar` aveau `white-space: nowrap` pe un rând
care nu se rupe: copyright (302px) + rețele + produse (354px) forțau
pagina la 720px lățime, pe TOATE cele 47 de paginile, indiferent de ecran.
Depășirea era invizibilă doar fiindcă `html { overflow-x: clip }` o tăia. */
@media (max-width: 900px) {
.footer-top { flex-direction: column; gap: 28px; padding: 0 18px; }
.footer-company { text-align: left; align-self: stretch; }
.footer-cols { gap: 28px 36px; }
.foot-section { flex: 1 1 200px; }
.footer-right {
flex-direction: column; align-items: flex-start; gap: 14px;
padding: 16px 18px; white-space: normal;
}
/* rețelele erau centrate cu position:absolute față de rândul întreg; în
stivă nu mai există un „centru" al rândului, deci revin în flux */
.footer-right .footer-social,
.pd-footbar .footer-social { position: static; transform: none; }
.footer-products { margin-left: 0; flex-wrap: wrap; }
.pd-footbar { padding: 12px 18px; white-space: normal; flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 560px) {
.footer-cols { flex-direction: column; gap: 22px; }
/* bara plutitoare de jos mănâncă din ecran pe telefon; pe ea rămâne doar
copyright-ul, produsele se văd în subsolul propriu-zis */
.pd-footbar .footer-products { display: none; }
.pd-footbar { font-size: 12px; padding: 10px 18px; }
}
/* `.banner2` trece pe o singură coloană sub 900px, dar varianta `.banner2-aligned`
își plasează explicit copiii în `grid-column: 1` și `2`. Coloana 2 nu mai există,
așa că grila crea una implicită și imaginea ieșea din ecran. Aici plasările se
anulează: totul curge pe rânduri, în ordinea din marcaj. */
@media (max-width: 900px) {
.banner2-aligned, .banner2-svc, .banner2-split { grid-template-rows: auto; }
.banner2-aligned > .banner2-head,
.banner2-aligned > .banner2-text,
.banner2-aligned > .banner2-media,
.banner2-svc > .banner2-title, .banner2-svc > .banner2-p, .banner2-svc > .banner2-media,
.banner2-split > .banner2-title, .banner2-split > .banner2-text, .banner2-split > .banner2-media {
grid-column: 1 / -1; grid-row: auto;
}
.banner2-split { row-gap: 16px; }
.banner2-aligned > .banner2-head .banner2-title { font-size: 24px; }
}
/* ── Bara fixă, adaptată la ecran ─────────────────────────────
Variabilele de mai sus spun cât de înalt E headerul; regulile de aici îl fac
efectiv atât. Logo-ul și spațierea coboară împreună, altfel valorile mint. */
@media (max-width: 900px) {
.site-header { padding: 9px 18px; }
.site-header .brand img { height: 42px; }
.pd-titlebar { padding: 0 18px; }
.pd-titlebar-name { font-size: 16px; }
}
@media (max-width: 560px) {
.site-header { padding: 8px 14px; }
.site-header .brand img { height: 40px; }
.pd-titlebar { padding: 0 14px; }
.pd-titlebar-name { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 480px) {
/* Podeaua headerului e butonul hamburger: 44px, cât cere ținta de atingere.
Se poate strânge doar spațierea din jurul lui. */
.site-header { padding: 2px 14px; }
.site-header .brand img { height: 34px; }
/* eroul ocupa jumătate din ecran; în peisaj, jumătate din 375px nu ajunge
pentru titlu + buton. `min-height: 0` singur nu ajungea: rămâneau 80px
de padding vertical. */
.hero, .home-hero, .contact-hero { min-height: 0; }
.hero-inner { padding-top: 16px; padding-bottom: 16px; }
.hero .hero-lead { margin-bottom: 14px; }
.pd-titlebar { height: var(--bar-h); }
.pd-titlebar-name { font-size: 14px; }
.mnav-head { position: static; } /* pe un panou scund, capul lipit fură prea mult */
.mnav-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.mnav-cta { font-size: 13px; min-height: 40px; }
.mnav-link, .mnav-top { min-height: 46px; padding: 8px 18px; }
/* secțiunile respiră mai puțin pe verticală când verticala e resursa rară */
.home-section, .cat-section, .contact-wrap, .product-section { padding-top: 32px; padding-bottom: 32px; }
/* trei carduri de poveste pe un ecran de 667px lățime lasă textului 142px;
în peisaj lățimea nu e problema, dar coloanele o irosesc */
.stories-grid { grid-template-columns: repeat(2, 1fr); }
.vclients { grid-template-columns: repeat(3, 1fr); }
.tech-cols .v-viewport { height: 240px; }
}
/* ── Tipografie fluidă ───────────────────────────────────────
Titlurile săreau brusc între praguri (38px → 30px) în loc să se scaleze.
`clamp(minim, preferat, maxim)` le face să urmeze lățimea ecranului, cu
capete fixate: minimul ține lizibilitatea pe 320px, maximul oprește creșterea
pe monitoarele late. */
/* Capetele de sus sunt EXACT dimensiunile de azi de pe desktop (52 / 36 / 30 /
34 / 34 / 30): pe ecran lat nu se schimbă nimic, doar drumul până acolo devine
continuu în loc de trei trepte. `line-height` rămâne cel din regula de bază. */
.hero-inner h1,
.home-hero .hero-inner h1 { font-size: clamp(26px, 5.2vw, 52px); }
.cta-title { font-size: clamp(22px, 3.2vw, 36px); }
.cat-title { font-size: clamp(20px, 2.6vw, 30px); }
.legal-title { font-size: clamp(22px, 3vw, 34px); }
.product-name { font-size: clamp(22px, 2.8vw, 34px); }
.banner2-title { font-size: clamp(19px, 2.4vw, 28px); } /* 28 = valoarea de bază de azi; varianta -aligned rămâne 30 prin specificitate */
/* ── Atingere ────────────────────────────────────────────────
Punctele caruselelor au 8px: prea mici pentru un deget. Zona de atingere se
lărgește la 44px printr-un pseudo-element, fără să crească pastila vizibilă. */
@media (hover: none) and (pointer: coarse) {
.mega-dot, .pd-dot, .v-dot, .hsvc-dot { position: relative; }
.mega-dot::after, .pd-dot::after, .v-dot::after, .hsvc-dot::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* caruselele primesc glisare pe orizontală fără ca pagina să se blocheze */
.pd-nav, .industries-bar, .services-bar { touch-action: pan-x; }
}
/* ── Câmpurile de formular ───────────────────────────────────
Sub 16px, Safari pe iOS mărește pagina la focus și nu o mai micșorează. */
/* Sub 16px, Safari pe iOS mărește pagina la focus și nu o mai micșorează.
Pragul e 1024px, nu 900: un iPhone Pro Max în peisaj are 932px lățime. Al
doilea bloc prinde tabletele mari, unde lățimea nu mai spune nimic.
`.field input:not([type=checkbox])` are specificitate 0,2,1 și
`font-size: inherit`; o regulă mai slabă nu-l poate învinge, oricât de jos
ar sta în fișier. */
@media (max-width: 1024px) {
.contact-form .field input:not([type="checkbox"]),
.contact-form .field select,
.contact-form .field textarea { font-size: 16px; }
}
@media (hover: none) and (pointer: coarse) {
.contact-form .field input:not([type="checkbox"]),
.contact-form .field select,
.contact-form .field textarea { font-size: 16px; }
}
/* ── Ținte de atingere (E1) ──────────────────────────────────
WCAG 2.5.8 cere 24×24 px, 2.5.5 (nivelul AAA) cere 44×44. Ținem 44 pentru
comenzi — butoane, săgeți, puncte, iconițe — și lăsăm link-urile din
interiorul textului curent așa cum sunt: pentru ele regula are o excepție
explicită, iar mărirea lor ar rupe rândul. */
/* Pragul e 1024px, nu 900: un iPhone Pro Max în peisaj are 932px LĂȚIME și
rămânea în afara regulii, deși e cel mai tactil dispozitiv cu putință. Ținta
de atingere ține de felul în care atingi ecranul, nu de cât e de lat — de aici
și al doilea bloc, pe `pointer: coarse`, pentru tabletele mari.
Blocurile sunt gemene intenționat: CSS nu poate reuni două condiții media
printr-un SAU. Se modifică amândouă. */
@media (max-width: 1024px) {
.btn-cta, .mnav-cta, .cta-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.pd-arrow, .hsvc-nav { width: 44px; height: 44px; }
.subcat-cta, .story-cta, .ind-ico-wrap { min-height: 44px; display: inline-flex; align-items: center; }
.lang-btn { min-height: 44px; }
.foot-soc { position: relative; }
.foot-soc::after { content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%); }
.mega-dot, .pd-dot, .v-dot, .hsvc-dot { position: relative; }
.mega-dot::after, .pd-dot::after, .v-dot::after, .hsvc-dot::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
}
@media (hover: none) and (pointer: coarse) {
.btn-cta, .mnav-cta, .cta-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.pd-arrow, .hsvc-nav { width: 44px; height: 44px; }
.subcat-cta, .story-cta, .ind-ico-wrap { min-height: 44px; display: inline-flex; align-items: center; }
.lang-btn { min-height: 44px; }
.foot-soc { position: relative; }
.foot-soc::after { content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%); }
.mega-dot, .pd-dot, .v-dot, .hsvc-dot { position: relative; }
.mega-dot::after, .pd-dot::after, .v-dot::after, .hsvc-dot::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
}
/* Mozaicul celor 21 de industrii era fixat pe 7 coloane. Coloanele sunt `1fr`,
dar ținta de atingere de 44px (adăugată în E1) plus `aspect-ratio: 1/1` le dă
o lățime minimă reală de 44px: 7 × 44 + 6 × 20 de spațiu = 428px, într-un
container care are 290 la 400px lățime de ecran. Restul ieșea din grilă.
`auto-fit` calculează singur câte încap, deci nu mai există prag de nimerit. */
@media (max-width: 900px) {
/* Peste 560px cei 7×3 încap din nou cu spațiul micșorat, deci păstrăm forma
de pe desktop; sub, `auto-fit` alege singur câte coloane încap (4 la 320px,
6 la 430px), fără prag de nimerit. */
.ind-mosaic { grid-template-columns: repeat(7, 1fr); gap: 10px 8px; }
}
/* 480 și nu 560: la 481px cei 7×44 + 6×8 = 356px încap în containerul de 370,
iar 8 coloane ar da 8+8+5 — un rând ciunt. */
@media (max-width: 480px) {
.ind-mosaic { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
}
/* ── Gutiera laterală pe ecrane mici (E1) ────────────────────
Aproape toate containerele de conținut au `padding: … 40px` — potrivit pe
desktop, dar 80 din 375px, adică 21% din ecran. Iar acolo unde se cuibăresc
(`.capabilities` > `.svc-inner`) se aduna de două ori: caruselul de servicii
rămânea cu 200px din 375, iar titlurile se rupeau la 109px. */
@media (max-width: 900px) {
.hero-inner, .capabilities, .banner2, .svc-arch, .pd-contact,
.cta-inner, .svc-inner, .clients-section, .stories-inner {
padding-left: 18px; padding-right: 18px;
}
/* containerul interior nu mai adaugă gutieră peste cea a secțiunii */
.capabilities > .svc-inner,
.capabilities > .tech-chips { padding-left: 0; padding-right: 0; }
/* EXCEPȚIE: secțiunea „Serviciile noastre" din paginile de industrie și de
serviciu. Acolo secțiunea e DELIBERAT pe toată lățimea
(`.capabilities.services-band.svc-detail { padding: 0 }`, mai sus), iar
gutiera o ține containerul interior — 40px pe desktop.
Regula de deasupra i-o lua, iar secțiunea rămânea singura de pe pagină
lipită de marginile ecranului: titlul „Serviciile noastre" și textul
porneau din pixelul zero, în timp ce tot restul paginii respira 18px.
Specificitate egală cu regula pe care o corectează (două clase), deci
decide ordinea — de aceea stă imediat după ea. */
.services-band .svc-inner { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 400px) {
.hero-inner, .capabilities, .banner2, .svc-arch, .pd-contact,
.cta-inner, .svc-inner, .clients-section, .stories-inner {
padding-left: 14px; padding-right: 14px;
}
/* aceeași excepție ca la ≤900px, cu gutiera strânsă a acestui prag */
.services-band .svc-inner { padding-left: 14px; padding-right: 14px; }
}
/* Mozaicul celor 9 iconițe de serviciu din bannerul S2 are `max-width: 360px`
și coloane nemicșorabile: pe un ecran de 320px ultima coloană rămânea tăiată
cu 8px de `overflow: hidden` al containerului. */
@media (max-width: 400px) {
.svc-mosaic { max-width: 100%; gap: 4px; }
/* Coloanele se micșorează, dar iconițele aveau lățime proprie (51px într-o
coloană de 40) și ieșeau ele din grilă. Le legăm de coloană. */
.svc-mosaic-col { min-width: 0; }
.svc-mosaic-link { max-width: 100%; }
.svc-mosaic svg, .svc-mosaic img { width: 100%; height: auto; max-width: 100%; }
}
/* Bara lipicioasă de ancore avea 73px pe telefon — cu headerul de 61px, 134px de
ecran ocupați permanent, adică 20% dintr-un 667px. Se strânge, iar `--nav-h`
de mai sus urmează valoarea rezultată. */
@media (max-width: 900px) {
.industries-bar a, .services-bar a { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
.industries-bar a, .services-bar a { padding: 10px 12px; font-size: 12.5px; }
}
/* Formularul de contact era singura ancoră fără spațiu rezervat: ținta ateriza
exact sub header. */
#contact-form { scroll-margin-top: calc(var(--hdr-h) + 12px); }
/* ── Peisaj scund: barele de ancore ──────────────────────────
Regulile stau AICI, la finalul fișierului: blocul de peisaj de mai sus e
scris înaintea regulilor de la ≤900px, deci pierdea la specificitate egală.
`--nav-h` urmează cazul cel mai defavorabil, nu media: pe pagina Industrii
etichetele sunt lungi („Industrie & Energie & Construcții") și se rup pe două
rânduri, deci bara are 60px acolo unde pe prima pagină are 45. O variabilă
potrivită pe cazul scurt ar ascunde 15px din titlu la fiecare ancoră. */
@media (orientation: landscape) and (max-height: 480px) {
.industries-bar a, .services-bar a { padding: 7px 12px; font-size: 12.5px; }
:root { --nav-h: 54px; }
/* Headerul e transparent peste erou. Pe desktop eroul e destul de înalt ca
titlul să treacă de el; în peisaj eroul are 146px, iar titlul urca în
spatele logo-ului. Îi rezervăm înălțimea barei. */
.hero-inner { padding-top: calc(var(--hdr-h) + 12px); }
/* bara de jos ajungea pe două rânduri (copyright + produse) — 55px din 375 */
.pd-footbar .footer-products { display: none; }
.pd-footbar { padding: 8px 14px; font-size: 12px; }
}
/* ── Tabletă portret (E4) ────────────────────────────────────
`.stories-grid` rămânea pe 3 coloane până la 560px: pe un iPad de 768px
textul cardurilor ajungea la 176px, mai îngust decât pe un telefon de 430.
Două coloane sunt măsura potrivită între telefon (una) și desktop (trei). */
@media (min-width: 561px) and (max-width: 900px) {
.stories-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Bara de ancore de pe pagina Industrii are cinci etichete lungi („Servicii
Profesionale & Financiare & Securitate"). Sub ~1300px nu mai încap pe un rând
și bara crește de la 58 la 73px — cu `--nav-h: 65` ancorele ascundeau 8px din
titlul-țintă. Variabila urmează cazul real, pe intervalul în care apare. */
@media (min-width: 1025px) and (max-width: 1299px) {
:root { --nav-h: 73px; }
}
/* ── Desktop mare (E7) ───────────────────────────────────────
Peste 1600px conținutul se lărgește. Blocurile de citit cresc mai puțin
decât secțiunile cu grile: un rând de text de peste ~1200px devine greu de
urmărit, indiferent cât de lat e ecranul. */
@media (min-width: 1600px) {
:root { --lat-sectiune: 1360px; --lat-lectura: 1200px; }
}
/* Paragrafele de introducere au `max-width: none`, deci creșteau odată cu
containerul: 1200px la 1440 lățime de ecran, 1280 după lărgirea de la 1600.
Le oprim la lungimea de rând dinainte — spațiul câștigat pe ecranele late
folosește grilelor, nu rândurilor de text.
(Observație rămasă deschisă: 1200px e oricum un rând lung pentru citit;
valoarea vine din v8 și n-am schimbat-o, ca desktopul să rămână identic.) */
@media (min-width: 1600px) {
.cat-sub, .svc-arch-head .cat-sub { max-width: 1200px; }
}
/* ── 4K și ultrawide (E8) ────────────────────────────────────
Peste 2200px containerul mai crește o dată. Nu până la lățimea ecranului:
pe un 3840 un container de 3800px ar da rânduri de text imposibil de urmărit,
iar grilele ar deveni benzi. 1560px e ultimul pas rezonabil. */
@media (min-width: 2200px) {
:root { --lat-sectiune: 1560px; --lat-lectura: 1260px; }
}
/* Eroul e `min-height: 50vh`. Pe un 4K de 2160px înălțime asta înseamnă 1080px
doar pentru banner — mai mult decât un ecran întreg de laptop. Plafonăm
înălțimea, păstrând proporția pe ecranele obișnuite. */
@media (min-height: 1240px) {
.hero, .home-hero, .contact-hero { min-height: min(50vh, 620px); }
}
/* ── Focus vizibil (E9) ──────────────────────────────────────
Site-ul avea doar cinci reguli de focus, pentru cinci componente; restul se
bazau pe inelul implicit al browserului, care e subțire și dispare pe fundal
albastru. `:focus-visible` (nu `:focus`) apare doar la navigarea din
tastatură — pe clic de mouse nu se vede nimic, deci aspectul nu se schimbă. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
border-radius: 3px;
}
/* pe fundal albastru, inelul albastru ar dispărea */
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.pd-footbar :focus-visible,
.pd-titlebar :focus-visible,
.site-header:not(.scrolled) :focus-visible {
outline-color: #ffffff;
}
/* zonele piramidei sunt elemente SVG: `outline` nu le prinde peste tot */
.pyr-zone:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pyr-zone:focus-visible polygon { stroke: var(--ink); stroke-width: 3; }
/* ── Laptopuri scunde (E9, punct rămas din E6) ───────────────
Pe paginile de detaliu bara fixă are 154px (header 89 + bara albastră de
titlu 65). Pe cea mai răspândită rezoluție de laptop, 1366×768, asta e exact
20% din ecran — cu bara lipicioasă de ancore, 29%.
Regula e scrisă pe ÎNĂLȚIME, nu pe lățime: problema e verticala, iar un
monitor de 1920×1200 n-o are. Peste 1024px lățime, ca să nu se suprapună cu
regulile de mobil. */
@media (min-width: 1025px) and (max-height: 820px) {
:root { --hdr-h: 71px; --bar-h: 54px; }
.site-header { padding: 10px 40px; }
.site-header .brand img { height: 50px; }
.pd-titlebar-name { font-size: 18px; }
.hero, .home-hero, .contact-hero { min-height: 44vh; }
}
/* ── Tipografia pe ecrane mari (E9, punct rămas din E7) ──────
Plafoanele din `clamp()` au fost fixate în E0b pe dimensiunile de desktop din
v8, ca desktopul să rămână neatins. Odată cu lărgirea containerelor (E7, E8)
ele au început să rămână în urmă: titlul stă la 52px, dar coloana crește de la
1200 la 1560px — proporția scade de la 23 la 30 de lățimi de titlu pe coloană.
Ochiul compară titlul cu coloana în care stă, nu cu ecranul. Deci titlul
urmează coloana, iar textul de corp NU se atinge: are deja 90 de caractere pe
rând la orice lățime, exact unde trebuie.
Se anulează ștergând acest bloc — desktopul sub 1600px nu e afectat deloc. */
@media (min-width: 1600px) {
.hero-inner h1, .home-hero .hero-inner h1 { font-size: clamp(26px, 5.2vw, 58px); }
.cta-title { font-size: clamp(22px, 3.2vw, 40px); }
.cat-title { font-size: clamp(20px, 2.6vw, 32px); }
}
@media (min-width: 2200px) {
.hero-inner h1, .home-hero .hero-inner h1 { font-size: clamp(26px, 5.2vw, 64px); }
.cta-title { font-size: clamp(22px, 3.2vw, 44px); }
.cat-title { font-size: clamp(20px, 2.6vw, 34px); }
}
/* ══════════════ NOTA DESPRE COOKIE-URI ══════════════
Pereche cu `_partials/cookie-bar.php` și `_assets/js/cookie-bar.js`.
Stă în `styles.css`, nu într-o foaie proprie: apare pe toate cele 48 de
pagini, iar o foaie separată ar fi însemnat un `` în plus peste tot.
`z-index: 95` — peste bara plutitoare de copyright (80) și peste bara de
titlu (92), sub mega-meniu (95 la hover). E o notificare: dacă apare, trebuie
să fie deasupra a ceea ce acoperă. */
.cookiebar {
position: fixed;
left: 16px; right: 16px; bottom: 16px;
z-index: 95;
max-width: 720px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 16px 20px;
border-radius: 12px;
background: #14213d;
box-shadow: 0 12px 34px rgba(20, 33, 61, .28);
/* Ascunsă până când JavaScript-ul îi pune `.show`: alunecă din marginea de
jos, nu apare brusc peste conținut. */
transform: translateY(160%);
opacity: 0;
transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .38s ease;
}
.cookiebar.show { transform: translateY(0); opacity: 1; }
.cookiebar-text {
flex: 1 1 260px;
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, .86);
}
.cookiebar-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookiebar-link:hover { color: #fff; text-decoration-thickness: 2px; }
.cookiebar-ok {
flex: 0 0 auto;
font: inherit;
font-size: 13.5px;
font-weight: 650;
color: #14213d;
background: #fff;
border: 0;
border-radius: 6px;
padding: 10px 22px;
cursor: pointer;
transition: background .18s ease;
}
.cookiebar-ok:hover { background: #eef3f8; }
.cookiebar-ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Pe telefon nota devine un bloc: textul pe toată lățimea, butonul dedesubt și
lat cât cardul — o țintă de atins cu degetul, nu una de nimerit. */
@media (max-width: 560px) {
.cookiebar { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 14px 16px; }
.cookiebar-text { flex-basis: 100%; font-size: 13px; }
.cookiebar-ok { width: 100%; padding: 12px 22px; }
}
/* Mișcare redusă: nota apare pe loc, fără alunecare. */
@media (prefers-reduced-motion: reduce) {
.cookiebar { transition: none; transform: none; }
}