/* ============================================================================= STILURI PENTRU TOT SITE-UL (se încarcă pe fiecare pagină) ============================================================================= CE E AICI Variabilele comune ale site-ului, componentele refolosite de mai multe pagini (secțiunile, eticheta numerotată, capul de secțiune, CTA-ul final, bara de căutare), header-ul și footer-ul, mega meniul, bucățile din landing page-urile de funcții și regula celor două fonturi. Ce ține de o singură pagină stă în fișierul ei (home, pricing, checkout, kb). CE NU E AICI Tipografia, culorile de bază, spațierile generale: alea vin din tema Canvas (theme.json). Dacă vrei să schimbi cum arată un titlu, se schimbă acolo. CUM E ORGANIZAT FIȘIERUL 0. VARIABILE (culori pe rol, rotunjimi, umbră, stele) 1. UTILITARE (etichete, chip-uri, stele, legende) 2. COMPONENTE COMUNE (secțiunile, eticheta numerotată, capul de secțiune, CTA-ul final, bara de căutare) 3. MEGA MENIU 4. ZIDUL DE ALBUME 5. BLOCURI DE COD 6. PLAYLISTUL DE VIDEO 7. CAPTURI DE ECRAN ȘI VIDEO 8. LISTA CU BIFE 9. DEMO DE IMAGE PROOFING 10. CORECȚII PENTRU GALERIILE MODULA 11. SLIDER 12. HEADER ȘI FOOTER 13. DOAR DOUĂ FAMILII DE FONTURI 14. NOTE REGULI RESPECTATE ÎN TOATE FIȘIERELE DE CSS - Culorile vin din paleta temei, direct sau prin variabilele `--mc-*` de mai jos (aceleași culori, cu nume după rol). Singurele valori „crude" sunt `rgb(... / ...)` folosite ca voaluri și umbre, care trebuie să meargă peste orice fotografie, și auriul stelelor. - Fonturile doar prin variabilele temei (`--wp--preset--font-family--*`). - Rotunjimile care se repetă au variabile (`--mc-radius-*`); cele de o singură folosință rămân scrise pe loc. PALETA (Global Styles) --wp--preset--color--main / primary cerneala: text și butoane (#1E1E1C) --wp--preset--color--base crem, fundalul paginii (#F5F3EE) --wp--preset--color--tertiary alb, fundalul cardurilor (#FFFFFF) --wp--preset--color--secondary gri de text secundar (#6B675F) --wp--preset--color--border-light linii fine pe fundal deschis (#D8D3C9) --wp--preset--color--border-dark linii fine pe fundal închis (#3A3A37) --wp--preset--color--primary-accent bej deschis (fundaluri, hover) (#EDEBE6) --wp--preset--color--primary-alt bej cald (#E8E3DA) --wp--preset--color--main-accent gri cald, text pe negru (#D9D6CF) CONVENȚIE DE DENUMIRE `.modula-dark` e pusă în editor pe secțiunile cu fundal închis. Oriunde o vezi într-un selector, regula de după ea e varianta „pe negru" a unei reguli scrise mai sus pentru fundal alb. Prefixele: `mh-` homepage și elementele din canvas (header, footer, mega meniu), `mc-` componente comune și checkout, `mod-` pricing, `mkb` Knowledge Base, `modula-` landing page-urile de funcții. ========================================================================== */ /* ----------------------------------------------------------------------------- 0. VARIABILE Aceleași valori în toate paginile; fișierele de pagină le folosesc, nu le redefinesc. -------------------------------------------------------------------------- */ :root { /* Culorile temei, cu nume după rolul lor. */ --mc-ink: var(--wp--preset--color--main); --mc-muted: var(--wp--preset--color--secondary); --mc-line: var(--wp--preset--color--border-light); --mc-card: var(--wp--preset--color--tertiary); --mc-tint: var(--wp--preset--color--primary-accent); /* Rotunjimile repetate: carduri, rânduri și casete mici, câmpuri și butoane mici. */ --mc-radius-card: 18px; --mc-radius-row: 14px; --mc-radius-control: 10px; /* Umbra cardurilor și a barelor care „plutesc" deasupra paginii. */ --mc-shadow-float: 0 14px 40px rgb(30 30 28 / .08); /* Stelele (singura culoare din afara paletei), un auriu închis, aceeași pe tot site-ul. Stelele sunt un semn grafic, deci au nevoie de minimum 3:1 față de fundal (WCAG 1.4.11): #B07D1A dă 3.6:1 pe alb și 3.3:1 pe crem. Galbenul clasic (#fcb900) dădea 1.7:1, adică stele pe care nu le vede nimeni. */ --mc-star: #B07D1A; } /* ----------------------------------------------------------------------------- 1. UTILITARE Bucăți mici, refolosite în mai multe pagini. -------------------------------------------------------------------------- */ /* Eticheta-pilulă mare, de deasupra titlurilor de secțiune. */ .modula-badge-pill { display: inline-block; padding: .35rem 1rem; border-radius: var(--wp--preset--border-radius--full); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: .75rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* Eticheta „NEW", mică, lipită după un cuvânt. */ .modula-badge-new { display: inline-block; margin-left: .5rem; padding: .14rem .5rem; border-radius: var(--wp--preset--border-radius--full); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: .6rem !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; vertical-align: middle; } /* Rând de chip-uri conturate, centrate. */ .modula-chips { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } .modula-chip { padding: .45rem 1.1rem; border: 1px solid var(--wp--preset--color--border-light); border-radius: var(--wp--preset--border-radius--full); color: var(--wp--preset--color--primary); font-size: .875rem !important; } .modula-chip .check { margin-right: .35rem; color: var(--wp--preset--color--primary); font-weight: 600; } /* Șirul de steluțe. Are `aria-label` în markup, deci culoarea e pur decorativă. */ .modula-stars { color: var(--mc-star); letter-spacing: 3px; } /* Legendă mică sub imagini și demo-uri. */ .modula-caption { color: var(--wp--preset--color--secondary); font-size: .9rem !important; } /* ----------------------------------------------------------------------------- 2. COMPONENTE COMUNE -------------------------------------------------------------------------- */ /* Secțiunile (`.mh-section`, generate de kit.section() în ~/modula-ollie-build): în interior, blocurile se așază la distanța din design (`--mh-hd`, titlu → conținut), nu la `blockGap`-ul general al temei. Homepage, blog, paginile de comparație. */ .mh-section { --mh-hd: 48px; position: relative; } .mh-section .mh-inner > * { margin-block: 0; } .mh-section .mh-inner > * + * { margin-block-start: var(--mh-hd); } @media (max-width: 760px) { .mh-section { --mh-hd: 32px; } } /* Eticheta numerotată de deasupra secțiunilor (`01 ─── SHOWCASE`): un grup flex cu numărul și eticheta, cu linia fină de sus pusă din editor. Homepage, pricing, Knowledge Base. */ .mh-rule { width: 100%; } .mh-rule > * { margin: 0; } /* Capul de secțiune: titlul în stânga, o frază scurtă în dreapta, aliniate jos (generat de kit.head() în ~/modula-ollie-build). Homepage și pricing. */ .mh-head { gap: 24px; align-items: last baseline; } .mh-head > * { margin: 0; } .mh-head .mh-title { max-width: 640px; } .mh-head .mh-lead { max-width: 450px; line-height: 1.6; } .mh-title { line-height: 1; } /* CTA-ul final (`.mh-start-box`, kit.start()): cutia albă coboară peste footer, iar footer-ul primește spațiu în plus sus doar pe paginile care o au. */ .mh-start { z-index: 3; } .mh-start-box { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: -140px !important; padding: 112px 48px; border-radius: var(--wp--preset--border-radius--lg); box-shadow: 0 30px 80px rgb(30 30 28 / .12); } .mh-start-box > * { margin: 0 !important; } .mh-start-box .mh-title { max-width: 900px; line-height: 1.04; } body:has(.mh-start-box) .wp-site-blocks > footer { margin-block-start: 0; } body:has(.mh-start-box) .mh-footer { padding-top: calc(140px + var(--wp--preset--spacing--xx-large)) !important; } @media (max-width: 760px) { .mh-start-box { padding: 64px 24px; margin-bottom: -90px !important; } body:has(.mh-start-box) .mh-footer { padding-top: calc(90px + var(--wp--preset--spacing--xx-large)) !important; } } /* Bara de căutare (`.mc-search`): blocul Search core, îmbrăcat ca pastilă albă cu umbră, cu lupa în față și butonul negru în dreapta. Demo-ul AI de pe homepage (`.is-voice`: microfon în loc de lupă) și căutarea din Knowledge Base (`.is-compact`: mai mică, fără umbră, butonul doar iconiță). Selectoarele au și `.wp-block-search`, ca să treacă peste regulile core ale blocului (bordura gri și padding-ul wrapper-ului). */ .mc-search.wp-block-search { margin: 0; } .mc-search.wp-block-search .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border: 1px solid var(--mc-line); border-radius: var(--wp--preset--border-radius--full); background: var(--mc-card); box-shadow: var(--mc-shadow-float); transition: border-color .2s ease; } .mc-search.wp-block-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--mc-ink); } .mc-search.wp-block-search:not(.is-compact) .wp-block-search__inside-wrapper::before { content: ""; flex: 0 0 18px; height: 18px; background: var(--mc-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain; } .mc-search.is-voice.wp-block-search .wp-block-search__inside-wrapper::before { flex-basis: 20px; height: 20px; background: var(--mc-ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); } .mc-search.wp-block-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: var(--wp--preset--font-size--base); color: var(--mc-ink); } .mc-search.wp-block-search .wp-block-search__input::placeholder { color: var(--mc-muted); opacity: 1; } .mc-search.wp-block-search .wp-block-search__button { flex: 0 0 auto; min-height: 48px; margin: 0; padding: 0 26px; border: 0; border-radius: var(--wp--preset--border-radius--full); background: var(--mc-ink); color: var(--mc-card); font-size: var(--wp--preset--font-size--xx-small); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; } .mc-search.wp-block-search .wp-block-search__button:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 3px; } .mc-search.is-compact .wp-block-search__inside-wrapper { padding: 4px 4px 4px 18px; box-shadow: none; } .mc-search.is-compact .wp-block-search__input { min-height: 38px; font-size: var(--wp--preset--font-size--x-small); } .mc-search.is-compact .wp-block-search__button { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-height: 38px; padding: 0; } .mc-search.is-compact .wp-block-search__button svg { width: 18px; height: 18px; fill: currentColor; } @media (max-width: 781px) { .mc-search.wp-block-search:not(.is-compact) .wp-block-search__inside-wrapper { gap: 8px; padding-left: 16px; } .mc-search.wp-block-search:not(.is-compact) .wp-block-search__button { padding: 0 16px; } /* Sub 16px, Safari pe iPhone mărește pagina când atingi câmpul. */ .mc-search.wp-block-search .wp-block-search__input { font-size: max(16px, var(--wp--preset--font-size--base)); } } /* ----------------------------------------------------------------------------- 3. MEGA MENIU Panourile mari care se deschid din meniul principal. Blocul de bază e ollie/mega-menu; aici doar îmbrăcăm conținutul pe care îl punem noi în el. -------------------------------------------------------------------------- */ /* Meniul de sus e scris cu majuscule mici, spațiate (atributele blocului Navigation din header). În panouri și în dropdown-uri revenim la textul obișnuit al site-ului, cel din paragrafe: același font, litere normale, fără spațiere în plus, la o mărime ușor de citit. Titlurile din panouri sunt `h4`, deci ar lua fontul de titluri; aici rămân tot pe fontul de text. */ .mh-nav .wp-block-navigation__submenu-container, .mh-nav .wp-block-ollie-mega-menu__menu-container { font-family: var(--wp--preset--font-family--instrument-sans); font-size: var(--wp--preset--font-size--small); font-weight: 400; letter-spacing: 0; text-transform: none; } .mh-nav .wp-block-ollie-mega-menu__menu-container :is(h1, h2, h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--instrument-sans); letter-spacing: 0; } .mh-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55em 1.25em; } .wp-block-ollie-mega-menu__menu-container { border: 1px solid var(--wp--preset--color--border-light); border-radius: var(--wp--preset--border-radius--lg); box-shadow: var(--wp--preset--shadow--large-dark); overflow: hidden; } .wp-block-ollie-mega-menu__menu-container.menu-width-wide { width: min(1260px, calc(100vw - 3rem)); } /* CORECȚIE: panoul mega-meniului acoperea bara de navigare la încărcare lentă. Fișierul view.js al blocului ollie/mega-menu scrie decalajul de sus al panoului (din atributul `data-top-spacing`) abia când `document.readyState` devine "complete", adică la evenimentul `load` al ferestrei — nu la DOMContentLoaded. Stylesheet-ul lui de bază pornește cu `top:0`, așa că dacă treceai cu mouse-ul peste meniu după ce pagina începuse să se deseneze, dar înainte să se termine de încărcat fiecare imagine și script, panoul se deschidea lipit de marginea de sus a elementului de meniu, adică peste bara de navigare, până când se executa în sfârșit acel JS întârziat. Valoarea corectă (`data-top-spacing="78"` pe ambele mega-meniuri, Features și Resources) e deja în HTML-ul venit de la server, deci o putem aplica de la prima desenare, fără să depindem de JavaScript. DE REȚINUT: regula asta țintește exact valoarea de `topSpacing` folosită acum. Dacă setarea blocului se schimbă din editor, adaugă încă un `[data-top-spacing="N"]` sau actualizeaz-o pe asta. */ .wp-block-ollie-mega-menu__menu-container[data-top-spacing="78"] { top: 78px; } /* Când treci de pe un panou pe altul (Features → Resources), blocul închide panoul vechi cu fade, cam 150ms, timp în care cele două se suprapun. Dacă un panou e deschis, celelalte dispar pe loc; închiderea obișnuită (ieși cu mouse-ul din meniu) rămâne cu fade. */ .mh-nav:has(.wp-block-ollie-mega-menu__toggle[aria-expanded="true"]) .wp-block-ollie-mega-menu__toggle[aria-expanded="false"] ~ .wp-block-ollie-mega-menu__menu-container { transition: none; } /* Panoul Features: trei coloane de link-uri, fiecare cu o descriere scurtă luată de pe pagina funcției, și un card închis pentru noutatea 3.0. Titlurile de coloană repetă motivul de pe homepage: număr mic, nume, linie fină dedesubt. La hover, rândul primește un fundal discret și o săgeată. */ .mh-mf { border-radius: inherit; } .mh-mf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 8px 28px; align-items: start; } .mh-mf-grid > * { margin: 0 !important; } .mh-mf-col { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; } .mh-mf-col > * { margin: 0 !important; } .mh-mf-head { gap: 10px; align-items: baseline; margin-bottom: 10px !important; padding: 0 12px 12px; border-bottom: 1px solid var(--wp--preset--color--border-light); } .mh-mf-head > * { margin: 0; } .mh-mf-num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--secondary); } .mh-mf-label { font-size: var(--wp--preset--font-size--small); } .mh-mf-label strong { font-weight: 600; } .mh-mf-item { line-height: 1.3; } .mh-mf-link { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 30px 10px 12px; border-radius: var(--wp--preset--border-radius--md); color: var(--wp--preset--color--main); text-decoration: none !important; transition: background .2s ease; } .mh-mf-t { font-size: var(--wp--preset--font-size--small); font-weight: 500; } .mh-mf-d { font-size: 14px; color: var(--wp--preset--color--secondary); } .mh-mf-link::after { content: "→"; position: absolute; right: 10px; top: 50%; opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s ease, transform .2s ease; } .mh-mf-link:hover, .mh-mf-link:focus-visible { background: var(--wp--preset--color--tertiary); } .mh-mf-link:hover::after, .mh-mf-link:focus-visible::after { opacity: 1; transform: translate(0, -50%); } .mh-mf-link:focus-visible { outline: 2px solid var(--wp--preset--color--main); outline-offset: 0; } /* Cardul 3.0: sigla Modula și „3.0" mare, pe un fundal cu sigla repetată, uriașă și abia vizibilă, care se rotește puțin la hover (ca un obturator). */ .mh-mf-card { overflow: hidden; border-radius: var(--mc-radius-card); } .mh-mf-card > * { margin: 0 !important; } .mh-mf-v3 { position: relative; height: 150px; overflow: hidden; background: radial-gradient(120% 90% at 85% 110%, color-mix(in srgb, var(--wp--preset--color--tertiary) 14%, transparent), transparent 60%), color-mix(in srgb, var(--wp--preset--color--main) 88%, var(--wp--preset--color--tertiary)); border-bottom: 1px solid var(--wp--preset--color--border-dark); } .mh-mf-v3 > * { margin: 0 !important; } .mh-mf-v3-bg { position: absolute !important; right: -46px; bottom: -70px; width: 220px; opacity: .07; transform: rotate(-12deg); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); } .mh-mf-v3-bg img { width: 100%; height: auto; display: block; } .mh-mf-card:hover .mh-mf-v3-bg { transform: rotate(48deg); } .mh-mf-v3-lockup { position: absolute !important; left: 22px; bottom: 18px; gap: 14px; } .mh-mf-v3-lockup > * { margin: 0 !important; } .mh-mf-v3-mark { flex: 0 0 auto; width: 40px; } .mh-mf-v3-mark img { width: 40px; height: 40px; display: block; } .mh-mf-v3-num { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--tertiary) 30%, transparent); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -.02em; /* Cormorant are implicit cifre „de text" (3 coboară sub linie); aici vrem cifre de titlu. */ font-variant-numeric: lining-nums; color: var(--wp--preset--color--tertiary); } @media (prefers-reduced-motion: reduce) { .mh-mf-v3-bg { transition: none; } .mh-mf-card:hover .mh-mf-v3-bg { transform: rotate(-12deg); } } .mh-mf-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; } .mh-mf-body > * { margin: 0 !important; } .mh-mf-badge { align-self: flex-start; padding: 5px 10px; border-radius: var(--wp--preset--border-radius--full); background: var(--wp--preset--color--base); color: var(--wp--preset--color--main); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; } /* Singurul titlu din panou, deci singurul în fontul de titluri, la o mărime la care se citește ușor. */ .mh-nav .wp-block-ollie-mega-menu__menu-container .mh-mf-title { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--tertiary); } .mh-mf-text { font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--main-accent); } .mh-mf-more a { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--tertiary); text-decoration: underline; text-underline-offset: 4px; } .mh-mf-more a::after { content: " →"; } /* Pe telefon (sub 600px, pragul blocului) panoul devine un ecran întreg, cu butonul lui de închidere în colțul din dreapta sus: fără ramă rotunjită, pe fundalul alb al meniului de telefon și cu loc deasupra conținutului pentru buton. */ @media (max-width: 599px) { .wp-block-ollie-mega-menu__menu-container { border: 0; border-radius: 0; box-shadow: none; } .wp-block-ollie-mega-menu__menu-container .mh-mf { padding: 72px 12px 32px !important; background: transparent !important; } } /* Panoul Resources: aceleași rânduri ca la Features, pe două coloane, fără card. */ .mh-mf-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .mh-mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mh-mf-card { grid-column: 1 / -1; display: grid; grid-template-columns: 240px 1fr; } .mh-mf-v3 { height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--wp--preset--color--border-dark); } } @media (max-width: 781px) { .mh-mf { padding: 8px 4px !important; } .mh-mf-col + .mh-mf-col { margin-top: 24px !important; } .mh-mf-grid, .mh-mf-grid.is-two, .mh-mf-card { grid-template-columns: 1fr; } .mh-mf-v3 { height: 130px; border-right: 0; border-bottom: 1px solid var(--wp--preset--color--border-dark); } } /* ----------------------------------------------------------------------------- 4. ZIDUL DE ALBUME Carduri cu coperți de galerii reale, prezentate ca albume răsfoibile. -------------------------------------------------------------------------- */ .modula-albumwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .modula-albumcard { display: block; border: 1px solid var(--wp--preset--color--border-light); border-radius: var(--wp--preset--border-radius--lg); background: var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--small-light); overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .modula-albumcard:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--medium-light); } .modula-albumcard .cover { position: relative; aspect-ratio: 16/11; background-size: cover; background-position: center; } /* Voal întunecat spre partea de jos, ca eticheta și miniaturile să se vadă. */ .modula-albumcard .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .28), rgb(0 0 0 / 0) 55%); } .modula-albumcard .badge { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 5px 11px; border-radius: var(--wp--preset--border-radius--full); background: rgb(20 20 24 / .82); color: var(--wp--preset--color--base); font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); } /* Teancul de miniaturi din colțul de jos-stânga. */ .modula-albumcard .stack { position: absolute; z-index: 2; bottom: 12px; left: 12px; display: flex; gap: 5px; } .modula-albumcard .stack span { width: 28px; height: 28px; border: 2px solid var(--wp--preset--color--base); border-radius: var(--wp--preset--border-radius--xs); background-size: cover; background-position: center; box-shadow: var(--wp--preset--shadow--small-dark); } .modula-albumcard .meta { padding: 16px 18px 18px; } .modula-albumcard .t { display: block; color: var(--wp--preset--color--primary); font-size: 1.25rem; line-height: 1.2; } .modula-albumcard .d { display: block; margin-top: 4px; color: var(--wp--preset--color--secondary); font-size: .82rem; } @media (max-width: 900px) { .modula-albumwall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .modula-albumwall { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- 5. BLOCURI DE COD În articolele din baza de cunoștințe apar fragmente de CSS cu linii lungi. Implicit ar ieși din coloană; aici le rupem pe mai multe rânduri. -------------------------------------------------------------------------- */ .wp-block-code { overflow-x: auto; } .wp-block-code code { display: block; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } /* ----------------------------------------------------------------------------- 6. PLAYLISTUL DE VIDEO Lista laterală din galeriile video are o bară de derulare nativă groasă. O înlocuim cu una subțire, care se accentuează la hover. `scrollbar-width` și `scrollbar-color` sunt standardul; regulile `::-webkit-scrollbar-*` acoperă Chrome și Safari, care încă nu îl respectă. Bara stă peste fundal închis, deci albul transparent e o nuanță de lumină, nu o culoare de brand. -------------------------------------------------------------------------- */ .modula-video-items { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .28) transparent; } .modula-video-items::-webkit-scrollbar { width: 6px; } .modula-video-items::-webkit-scrollbar-track { background: transparent; } .modula-video-items::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); border-radius: var(--wp--preset--border-radius--full); } .modula-video-items:hover { scrollbar-color: rgb(255 255 255 / .5) transparent; } .modula-video-items:hover::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .5); } /* Săgețile de la capetele barei, în Chrome. */ .modula-video-items::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* ----------------------------------------------------------------------------- 7. CAPTURI DE ECRAN ȘI VIDEO Imaginile de produs din paginile de funcționalități, plus clipurile care pornesc la click, cu buton mare de play peste ele. -------------------------------------------------------------------------- */ .modula-shot img, .modula-shot video { display: block; width: 100%; height: auto; border-radius: var(--wp--preset--border-radius--lg); box-shadow: var(--wp--preset--shadow--large-dark); } figure.wp-block-video.modula-shot { position: relative; margin: 0; } figure.wp-block-video.modula-shot video { cursor: pointer; } /* Stratul de play. E un `