/*---------------------------------------------- * * [Marss — stiluri proprii, peste template-ul Leverage] * * Incarcat dupa theme-*.css. Aici punem tot ce e specific site-ului Marss, * ca sa nu modificam fisierele template-ului (main.css etc.). * ----------------------------------------------*/ /*---------------------------------------------- [CUPRINS] 1. Brands (#brands) 2. About (#about) 3. Products (#products) 4. Slider hero (#slider) 5. Partner area (partner.html) 6. Index v2 (body.v2 — pagina principala) 7. Subsol: protectia datelor / GDPR (index.html si partner.html) 8. OUR HISTORY (poza landscape) + logo Blaupunkt 100 years 9. NETWORK (#network, GLOBAL NETWORK) + subtitlul mare din About 10. Intrebare anti-spam din formularul de contact ----------------------------------------------*/ /*---------------------------------------------- 1. Brands ----------------------------------------------*/ /* La hover, logo-urile marcate cu .logo-hover-white devin albe (Blaupunkt, Daewoo) */ .card:hover img.logo-hover-white, .card.featured:hover img.logo-hover-white { filter: grayscale(100%) brightness(1000%) contrast(1000%); transition: filter 0s ease; } /* Carduri de aceeasi inaltime pe rand + nota in josul cardului */ #brands .item { display: flex; } #brands .item > a { display: flex; width: 100%; } #brands .card { padding-bottom: 50px; } /* Cardul FIFA Women’s World Cup: imagine inalta (logo + banda neagra „Official Licensed Product”), nu se intinde pe latimea cardului; 357px = inaltimea insignei FIFA din cardul vecin */ #brands .card img.card-tall { width: auto; max-width: 100%; height: 357px; } #brands .card .card-note { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; font-size: 12px; } /*---------------------------------------------- 2. About ----------------------------------------------*/ /* Iconite SVG proprii: linie subtire cu acelasi gradient ca iconitele din font (gradientul #brand-gradient e definit la inceputul sectiunii #about) */ .svg-icon, .svg-icon * { fill: none; stroke: url(#brand-gradient); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .svg-icon-feature { display: block; width: 60px; height: 60px; margin: 0 auto; overflow: visible; } #about .intro { margin-bottom: 35px; } #about .intro h2 { margin-bottom: 1.5rem; } /* aceeasi distanta ca intre subtitlu si paragraful „We are a global company…” */ #about .intro .version-number { display: block; } #about .intro .version-number + .version-number { margin-top: 4px; } /* Cifre cheie: cerc cu iconita + numar si eticheta pe doua randuri */ .about-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; margin: 28px 0; } .about-stats .stat { display: flex; align-items: center; gap: 12px; } .about-stats .svg-icon { flex: none; width: 56px; height: 56px; } .about-stats .stat-text { display: flex; flex-direction: column; text-align: left; font-family: var(--h2-font); font-size: 1.15rem; font-weight: 700; line-height: 1.15; color: var(--primary-t-color); } @media (min-width: 768px) { .about-stats { justify-content: flex-start; } } /* Pe telefon: cele 3 cifre pe un singur rand, iconita deasupra textului */ @media (max-width: 767px) { .about-stats { flex-wrap: nowrap; gap: 14px; } .about-stats .stat { flex: 1 1 0; flex-direction: column; gap: 8px; } .about-stats .stat-text { align-items: center; text-align: center; font-size: 1rem; } } /*---------------------------------------------- 3. Products ----------------------------------------------*/ /* Banner-ul de colaj ocupa toata latimea ecranului, lipit de marginea de jos a sectiunii */ section.products { padding-bottom: 0; } section.products .intro { margin-bottom: 40px; } .products-banner { display: block; width: 100%; height: auto; } /* Doua colaje care se schimba la 5 s (si la click), comandate din site-ui.js prin clasa .is-second. Tranzitie de 0,5 s: poza care iese face fade-out la negru (0,25 s), apoi cea care intra face fade-in (0,25 s, cu intarziere de 0,25 s). Fundalul negru al containerului apare intre ele. Doar transition pe opacity -> la fel in Chrome / Firefox / Safari. Fara JS ramane vizibila doar prima poza. */ .products-slideshow { position: relative; background: #000; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } .products-slideshow .products-banner-2 { position: absolute; top: 0; left: 0; } .products-slideshow .products-banner { opacity: 1; -webkit-transition: opacity .25s linear .25s; transition: opacity .25s linear .25s; } .products-slideshow .products-banner-2 { opacity: 0; -webkit-transition: opacity .25s linear 0s; transition: opacity .25s linear 0s; } .products-slideshow.is-second .products-banner { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; } .products-slideshow.is-second .products-banner-2 { opacity: 1; -webkit-transition-delay: .25s; transition-delay: .25s; } .products-slideshow:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -4px; } /* Sageti „<” / „>” peste poza (cerinta clientului): sugereaza ca poza se schimba. Inalte de 100px (pe ecrane mici cel mult 70% din inaltimea bannerului), albe cu contur negru de 1px (doua polilinii: negru lat de 12, alb de 10 deasupra) si cu putina umbra. Doar decor: pointer-events: none, deci click-ul ajunge la slideshow. Apar doar dupa ce JS activeaza slideshow-ul (.is-interactive). */ .products-arrow { display: none; position: absolute; top: 50%; z-index: 1; height: min(100px, 70%); aspect-ratio: 58 / 100; transform: translateY(-50%); pointer-events: none; -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); } .products-slideshow.is-interactive .products-arrow { display: block; } .products-arrow-prev { left: clamp(6px, 2vw, 32px); } .products-arrow-next { right: clamp(6px, 2vw, 32px); } .products-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; } .products-arrow polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; } .products-arrow .o { stroke: #000; stroke-width: 12; } .products-arrow .w { stroke: #fff; stroke-width: 10; } /* prefers-reduced-motion: se schimba tot la 5 s / click, dar taiat, fara fade */ @media (prefers-reduced-motion: reduce) { .products-slideshow .products-banner, .products-slideshow .products-banner-2, .products-slideshow.is-second .products-banner, .products-slideshow.is-second .products-banner-2 { -webkit-transition: none; transition: none; } } /*---------------------------------------------- 4. Slider hero ----------------------------------------------*/ /* Pe desktop poza e lipita la dreapta (right: 10%), inalta cat 85% din slider (= 100vh), deci latimea ei (768/1027 din inaltime) depinde de inaltimea ferestrei. Template-ul lasa textul la 60% din latime si la 6rem, deci pe laptopuri mai mici titlul intra peste poza. Calculam locul liber din stanga pozei si potrivim latimea coloanei de text si marimea titlului dupa el. --hero-img-w : latimea pozei (63.6vh = 85vh * 768/1027), dar cel mult 42vw (ferestre aproape patrate) --text-left : marginea din stanga a textului (container de max. 1140px, centrat) + 20px rezerva --text-free : spatiul liber pentru text pana la poza (10% margine dreapta + 16px respiratie) 6.6 = latimea celui mai lat cuvant din titluri, in majuscule ("TECHNOLOGY", 6.52em), cu putin spatiu --title-em (6.6 implicit; 6.9 pentru .title-long = „THE GREATEST SPORTING EVENT”: „THE GREATEST” are 6.72em, ca sa stea pe un rand si titlul sa ramana pe 3 randuri) (100vh - 380px) / 3.6 : si pe verticala trebuie sa incapa titlul pe 3 randuri (3 x 1.2 x marime) + descrierea + butonul GET STARTED (~150px) + header-ul, altfel butonul iese sub marginea ecranului pe laptopuri joase */ @media (min-width: 992px) { .full-slider { --hero-img-w: min(63.6vh, 42vw); --text-left: calc(max(0px, (100vw - 1140px) / 2) + 20px); --text-free: calc(90vw - var(--hero-img-w) - var(--text-left) - 16px); } .full-slider .hero-image { height: min(85%, 56.2vw); } .full-slider .slide-content .inner .left { width: min(60%, var(--text-free)); } .full-slider .slide-content .title.title-long { --title-em: 6.9; } .full-slider .slide-content .title { font-size: clamp(2.5rem, min(calc(var(--text-free) / var(--title-em, 6.6)), calc((100vh - 380px) / 3.6)), 6rem); } } /* Sloganurile mari (portocalii) sunt scrise cu majuscule — cerinta clientului (formula de mai sus tine cont de latimea lor). */ .full-slider .slide-content .title { text-transform: uppercase; } /* Subtitluri din slider: .description-lg = cu 25% mai mari (1.2rem -> 1.5rem), .description-caps = majuscule. Selectorul bate regulile responsive din main.css (body .full-slider .slide-content .inner .description). */ body .full-slider .slide-content .inner .description.description-lg { font-size: 1.5rem; } .full-slider .slide-content .description.description-caps { text-transform: uppercase; } /* Inaltimea slider-ului pe telefoane / tablete: din inaltimea vizibila calculata de site-ui.js (--hero-h, sectiunea 8), cu 100vh doar ca rezerva (fara JS). Pe unele telefoane 100vh e mult mai mare decat zona vizibila, iar poza (lipita jos) iesea sub ecran. Valorile de rezerva = cele din main.css (calc(100vh - 50px) sub 768px, 100vh intre 768 si 991px). */ @media (max-width: 767px) { body .slider-h-100 { height: calc(var(--hero-h, 100vh) - 50px); } } @media (min-width: 768px) and (max-width: 991px) { body .slider-h-100 { height: var(--hero-h, 100vh); } } /* Mobil (<768px): textul din slider nu mai acopera partea importanta din poza. Poza e lipita jos, cat latimea ecranului (inaltime = 1,337 x latime; la Marss, 768x1084, 1,411 x latime), deci reperele din ea (logo-uri) sunt la procente fixe din inaltimea ei. De aceea ancoram textul fata de marginea de jos a slider-ului, ca poza, nu fata de centru. .text-low : tot blocul (titlu, descriere, buton) jos, deasupra buletelor de paginare — NBA (logo-ul NBA, sus, ramane liber), Daewoo (logo-ul DAEWOO din poza) si Blaupunkt (logo-ul „100 years” din poza) .text-split : titlul sus, descrierea + butonul jos; cercul cu logo-ul MARSS de la mijloc ramane liber (slide-ul Marss) .title-fit : titlul se micsoreaza ca cel mai lat cuvant sa incapa pe ecranele inguste ("TECHNOLOGY", 6,52em, se rupea in „TECHNOLOG / Y”) Aceleasi reguli (text + clase) se aplica si pe tablete in portret (768-991px), unde poza trece pe aspectul de telefon (blocul de mai jos, dupa acesta). */ @media (max-width: 767px), (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { body .full-slider .slide-content.text-low .inner, body .full-slider .slide-content.text-split .inner { height: 100%; } body .full-slider .slide-content.text-low .inner .left { align-self: flex-end !important; padding-bottom: 5.5rem; } body .full-slider .slide-content.text-low .title { margin-bottom: 1rem; } body .full-slider .slide-content.text-low .title { -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, .7)); filter: drop-shadow(0 0 6px rgba(0, 0, 0, .7)); } /* titlul rosu-inchis (ultimul rand al gradientului) se pierdea peste panoul auriu din poza NBA */ body .full-slider .slide-content.text-low .btn { margin-top: 1rem !important; } body .full-slider .slide-content.text-low .inner .description { margin: .75rem 0 1rem; } body .full-slider .slide-content.text-split .inner .left { align-self: stretch !important; display: flex; flex-direction: column; align-items: center; padding: 7.5rem 0 6rem; } body .full-slider .slide-content.text-split .inner .left .title { margin-bottom: 0; } body .full-slider .slide-content.text-split .inner .left .description { margin-top: auto; margin-bottom: 0; } body .full-slider .slide-content.text-split .inner .left .btn { margin-top: 1rem !important; } /* poza e mai putin intunecata (data-mask-768="20"), ca logo-ul MARSS sa se vada; textul ramane lizibil peste scrisul de mana din poza: descrierea pe o placuta intunecata, titlul cu umbra */ body .full-slider .slide-content.text-split .inner .description { color: #e9e9ee; font-size: 1.05rem; padding: .3rem .6rem; border-radius: 8px; background: rgba(17, 17, 17, .72); } body .full-slider .slide-content.text-split .title { -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, .85)); filter: drop-shadow(0 0 6px rgba(0, 0, 0, .85)); } /* titlul are fill transparent (gradient pe text): text-shadow ar umple literele cu negru */ /* telefoane scurte (<=700px inaltime): poza ocupa aproape tot slider-ul, deci titlul Marss se micsoreaza ca sa nu acopere cuvantul MARSS din cerc */ @media (max-height: 700px) { body .full-slider .slide-content.text-split .title { font-size: 2.2rem; } } html.hero-h-700 body .full-slider .slide-content.text-split .title { font-size: 2.2rem; } /* aceeasi regula, pe inaltimea corectata de JS (site-ui.js sectiunea 8) */ body .full-slider .slide-content .title.title-fit { font-size: min(3.5rem, calc((100vw - 40px) / 6.7)); } /* telefoane foarte scurte (<=600px, ex. 320x568): blocul de jos se micsoreaza ca sa incapa intre logo-ul din poza si buline */ @media (max-height: 600px) { body .full-slider .slide-content.text-low .inner .left { padding-bottom: 6.5rem; } /* la 320px buletele se rup pe 2 randuri */ body .full-slider .slide-content.text-low .title, body .full-slider .slide-content .title.title-fit { font-size: 2.2rem; } body .full-slider .slide-content.text-low .inner .description, body .full-slider .slide-content.text-low .inner .description.description-lg { font-size: 1.1rem; } } html.hero-h-600 body .full-slider .slide-content.text-low .inner .left { padding-bottom: 6.5rem; } html.hero-h-600 body .full-slider .slide-content.text-low .title, html.hero-h-600 body .full-slider .slide-content .title.title-fit { font-size: 2.2rem; } html.hero-h-600 body .full-slider .slide-content.text-low .inner .description, html.hero-h-600 body .full-slider .slide-content.text-low .inner .description.description-lg { font-size: 1.1rem; } } /* Tablete in portret (768-991px, ex. iPad 768x1024, 820x1180): aspectul de telefon. Template-ul trece pe el doar sub 768px; intre 768 si 991px textul statea in stanga, peste poza din dreapta (inalta cat 85% din slider), si ii acoperea logo-urile. Acum poza e lipita jos, centrata, cat latimea ecranului dar nu mai inalta decat slider-ul (pe tablete 4:3, 768x1024, ar fi iesit din slider si ar fi taiat logo-urile de sus; si fara cei 150px de sub header — logo-ul MARSS din header are ~170px pe tableta si acopera varful pozei), iar textul e centrat peste ea, cu masca din data-mask-768 (20% la Marss, 70% la rest). Ferestre late si joase (portret = inaltime >= latime) raman pe aspectul de desktop. */ @media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { body .full-slider .hero-image { width: auto; height: min(calc(100% - 150px), 133.7vw); bottom: 0; left: 0; right: 0; margin: 0 auto; } body .full-slider .slide-content .inner .left { width: 100%; text-align: center !important; } /* .text-md-left (Bootstrap, de la 768px) ar aliniat textul la stanga */ body .full-slider .slide-content .inner .left .btn { margin-left: auto !important; margin-right: auto !important; } /* .ml-md-0 */ /* buletele de paginare stau pe tableta mai sus fata de marginea slider-ului (~83px, pe telefon ~66px): blocul de text urca la fel */ body .full-slider .slide-content.text-low .inner .left { padding-bottom: 7rem; } body .full-slider .slide-content.text-split .inner .left { padding-bottom: 7.5rem; } body .full-slider .slide-content.text-split .inner .description { font-size: 1.2rem; } body .full-slider .slide-content .inner .description, body .full-slider .slide-content .inner .description p { max-width: 100%; font-size: 1.2rem; } body .full-slider .slide-content .inner .left a.btn-primary-color:after { content: none; } body .full-slider .slide-content { height: 100%; } body .full-slider .slide-content:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--hero-bg-color); opacity: 0; } body .full-slider .slide-content[data-mask-768="20"]:before { opacity: .2; } body .full-slider .slide-content[data-mask-768="70"]:before { opacity: .7; } } /*---------------------------------------------- 5. Partner area ----------------------------------------------*/ /* Hero compact: titlu, sesiune, 3 actiuni rapide */ .pa-hero { padding: 170px 0 64px; text-align: center; background: radial-gradient(60% 90% at 50% 0%, rgba(252, 81, 48, .16), transparent 70%), var(--hero-bg-color); } .pa-eyebrow { display: inline-block; margin: 0 0 16px; padding: 4px 16px; border: 1px solid rgba(252, 81, 48, .5); border-radius: 999px; color: var(--primary-color); font-size: .8rem; font-weight: 600; letter-spacing: .25em; } .pa-hero h1 { margin-bottom: 14px; font-size: clamp(3rem, 8vw, 5rem); } .pa-lead { max-width: 640px; margin: 0 auto 22px; font-size: 1.15rem; color: #b3b7c1; } .pa-session { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 30px; padding: 6px 16px; border: 1px solid rgba(46, 213, 115, .3); border-radius: 999px; background: rgba(46, 213, 115, .1); color: #7ee2a8; font-size: .85rem; } .pa-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ed573; animation: pa-pulse 2s infinite; } @keyframes pa-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 213, 115, .6); } 70% { box-shadow: 0 0 0 8px rgba(46, 213, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); } } .pa-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .pa-actions .btn { margin: 0; } /* Butoane secundare (contur): Contact us, Logout */ a.btn.pa-btn-ghost, .btn.pa-logout { background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #f1f1f1; box-shadow: none; } a.btn.pa-btn-ghost:hover, .btn.pa-logout:hover { background: transparent; border-color: var(--primary-color); color: var(--primary-color); } .btn.pa-logout { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .btn.pa-logout i { margin: 0; } @media (max-width: 575px) { .btn.pa-logout span { display: none; } } /* Sectiuni: Our Partner Brands, Partner Resources */ .pa-section { padding: 80px 0; } .pa-brands { background: var(--section-1-bg-color); } .pa-resources { background: var(--section-2-bg-color); } .pa-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .pa-head h2 { margin: 0 0 14px; font-size: 2.4rem; color: #eceef4; } .pa-head h2:after { content: ""; display: block; width: 56px; height: 4px; margin: 16px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); } .pa-head p { margin: 0; color: #b3b7c1; } .pa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 991px) { .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .pa-grid { grid-template-columns: 1fr; } } /* celula = elementul animat de AOS; cardul din ea are propriul hover (altfel se bat tranzitiile) */ .pa-cell { display: flex; } .pa-brand, .pa-res { display: flex; flex-direction: column; flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: #1c1c1c; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .pa-brand:hover, .pa-res:hover { transform: translateY(-5px); border-color: var(--primary-color); box-shadow: 0 16px 36px rgba(0, 0, 0, .5); } .pa-resources .pa-res { background: #222; } /* Card brand: zona luminoasa cu logo (toate logo-urile se vad, si cele negre), dedesubt informatiile */ .pa-brand-logo { display: flex; align-items: center; justify-content: center; height: 180px; padding: 20px; background: #f4f4f4; } .pa-brand-logo img { width: auto; height: auto; max-width: 78%; max-height: 120px; transition: transform .3s ease; } .pa-brand-logo img.tall { max-height: 150px; } /* logo-uri inalte si inguste (Women, FIFA) */ .pa-brand:hover .pa-brand-logo img { transform: scale(1.06); } .pa-brand-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .pa-brand-body h3, .pa-res h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; color: #fff; } .pa-brand-body p, .pa-res p { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: #b3b7c1; } .pa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; } .pa-tags li { padding: 3px 10px; border: 1px solid rgba(252, 81, 48, .35); border-radius: 999px; background: rgba(252, 81, 48, .12); color: #ff8a70; font-size: .75rem; } .pa-brand-body p.pa-note { margin: 0 0 18px; font-size: 12px; color: #7d818d; } /* Plita resursa: iconita cu gradientul temei */ .pa-res { align-items: flex-start; padding: 28px 26px; } .pa-res-icon { margin-bottom: 16px; font-size: 2.2rem; background-image: linear-gradient(45deg, var(--secondary-color) 15%, var(--primary-color) 65%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Link de actiune (email pre-completat) */ a.pa-cta, a.pa-cta:link, a.pa-cta:visited { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding: 8px 16px; border: 1px solid var(--primary-color); border-radius: 8px; color: var(--primary-color); font-size: .9rem; font-weight: 600; transition: background .2s ease, color .2s ease; } a.pa-cta:hover, a.pa-cta:focus { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); border-color: transparent; color: #fff; } a.pa-cta i { font-size: .75rem; } /*---------------------------------------------- 6. Index v2 (body.v2) — previzualizare index_new.html ----------------------------------------------*/ /* Tot ce e mai jos se aplica DOAR paginii index_new.html (clasa v2 pe ); index.html ramane neschimbat. La aprobare, index_new.html devine index.html. */ /* Link „Skip to content” (vizibil doar la focus de la tastatura) */ .v2 a.v2-skip { position: absolute; top: 8px; left: -9999px; z-index: 10000; padding: 8px 16px; border-radius: 4px; background: #fff; color: #111; font-weight: 600; } .v2 a.v2-skip:link, .v2 a.v2-skip:visited, .v2 a.v2-skip:hover { color: #111; } .v2 a.v2-skip:focus { left: 8px; } /* Focus vizibil pentru navigarea cu tastatura */ .v2 a:focus-visible, .v2 button:focus-visible, .v2 input:focus-visible, .v2 select:focus-visible, .v2 textarea:focus-visible, .v2 .swiper-pagination-bullet:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--primary-color); } /* Partner: logo de cel mult 100px la orice latime. Template-ul (main.css, @media 992-1500px) il limita la 100px doar pana la 1500px; peste 1500px logo-ul revenea la 164px, iar meniul (6 linkuri + CONTACT US + Logout) se rupea pe 2 randuri. Pus INAINTE de regula compacta de mai jos (aceeasi specificitate), ca sa ramana 52px la header-ul lipit. */ .partner-page header .navbar img { max-height: 100px; width: auto; } /* Header lipit (apare la scroll in sus): compact, ca sa nu acopere 15% din ecran */ .v2 header .navbar-sticky, .partner-page header .navbar-sticky { padding-top: 8px; padding-bottom: 8px; } .v2 header .navbar-sticky img, .partner-page header .navbar-sticky img { max-height: 52px; width: auto; } /* si in partner.html (body.partner-page), care nu are clasa v2 */ /* Telefon (<768px): header-ul ramane compact si in varful paginii (identic cu cel lipit de la scroll: 68px, fundal, logo 52px). Varianta mare si transparenta (120px, logo 80px) cobora logo-ul peste poza slide-ului, mai jos decat banda intunecata de sus. Index (.v2) si partner. Culoarea si umbra = cele din .navbar-sticky (main.css). */ @media (max-width: 767px) { .v2 header .navbar:not(.navbar-sticky), .partner-page header .navbar:not(.navbar-sticky) { padding-top: 8px; padding-bottom: 8px; background-color: var(--header-bg-color); -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09); box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09); } .v2 header .navbar:not(.navbar-sticky) img, .partner-page header .navbar:not(.navbar-sticky) img { max-height: 52px; width: auto; } } /* Meniu: sectiunea curenta (scrollspy din site-ui.js) */ .v2 header .navbar-expand .navbar-nav.items .nav-link.active:not(.btn), .v2 .menu .navbar-nav.items .nav-link.active:not(.btn) { color: var(--primary-color); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } /* Contrast AA: text alb pe butoanele portocalii (3,3:1 -> 4,7:1, cu textul #f5f5f5 din tema) */ .v2 .primary-button, .v2 .primary-button:visited, .v2 .primary-button:active { background-color: #cc3516; } .v2 .primary-button:hover, .v2 .primary-button:focus { background-color: #cc3516; background-image: linear-gradient(45deg, #b01d0a 15%, #cc3516 65%); } /* Titlurile coborate de la h4/h5 la h3 (ierarhie corecta H2 > H3 > H4) isi pastreaza marimea de dinainte */ .v2 #brands .card h3, .v2 #our-licenses .item h3, .v2 footer h3.title { font-size: 1.3rem; } .v2 #about h3, .v2 #network h3 { font-size: 1.2rem; } .v2 footer h3.title { color: #f5f5f5; } /* Contrast AA: textele din cardurile luminoase din Brands erau gri-lavanda pe gri deschis (1,8:1) */ .v2 #brands .card h3 { color: #2a2d35; } .v2 #brands .card p { color: #4d515c; } .v2 #brands .card p.card-note { color: #5b5f6b; } .v2 #brands .card:hover h3, .v2 #brands .card:hover p, .v2 #brands .card:hover p.card-note { color: #fff; } /* Titlurile centrate au aceeasi bara de accent ca restul sectiunilor */ .v2 #brands .intro h2:after, .v2 #products .intro h2:after { content: ""; display: block; width: 56px; height: 4px; margin: 18px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); } /* Numele firmei din subsol (text cu gradient): literele cu coada (g) erau taiate jos */ .v2 footer .brand .logo { line-height: 1.4; padding-bottom: 4px; } /* Butonul CUSTOMER LOGIN din subsol: se vede ca actiune, nu ca eticheta */ .v2 .odd .footer-widget a.badge.tag[href="partner.html"] { padding: 10px 18px; border: 1px solid var(--primary-color); border-radius: 2px; background: transparent; color: #fff; font-size: .85rem; font-weight: 600; letter-spacing: .04em; transition: background .2s ease; } .v2 .odd .footer-widget a.badge.tag[href="partner.html"]:hover { background: #cc3516; color: #fff; border-color: #cc3516; } /* Utilizatorii care cer mai putina miscare: fara animatii la aparitie, fara introul cu logo */ @media (prefers-reduced-motion: reduce) { .v2 [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; } .v2 #intro { display: none !important; } .v2 * { scroll-behavior: auto !important; } } /*---------------------------------------------- 7. Subsol: protectia datelor / GDPR ----------------------------------------------*/ /* Zona din subsol, intre coloanele cu date de contact si bara de copyright (index.html si partner.html) */ footer .gdpr { padding: 0; border-top: 1px solid rgba(255, 255, 255, .08); } /* fara padding-ul mare al
din template */ footer .gdpr .item { padding-top: 24px !important; padding-bottom: 24px !important; } /* mai aproape de coloanele de deasupra: