/** * Theme Name: Blocksy Child * Theme URI: https://marius.tudose.com * Description: Child theme pentru marius.tudose.com. Personalizările PHP stau în functions.php, cele de CSS aici. * Author: Marius Tudose * Author URI: https://marius.tudose.com * Template: blocksy * Version: 1.1.0 * Text Domain: blocksy-child */ /* ═══════════════════════════════════════════════════════════════════════════ * SISTEMUL VIZUAL — luat din producție (marius.tudose.com, tema Mies) * * Trei decizii, atât: * * 1. Două fonturi. **Lato** pentru tot ce numește ceva — numele site-ului, * titlurile, etichetele — mereu VERSALE, cu spațiere între litere. * **Open Sans 300** pentru tot ce se citește pe rând lung. * 2. Zero culoare. Negru #171617, două griuri (#555659 pentru secundar, * #afafaf pentru terțiar), un fundal #f8f8f8, alb. Nimic altceva. * 3. Linii, nu forme. Bordurile sunt de un pixel; nu există pastile, umbre * sau colțuri rotunjite. Ce separă e o linie, nu o cutie colorată. * * De ce contează regula 2: singura culoare de pe pagină trebuie să fie a * fotografiilor. Un buton albastru concurează cu ele; un buton negru nu. * * Metoda: se rescrie **paleta lui Blocksy**, nu fiecare element. Tema își * generează absolut tot CSS-ul din `--theme-palette-color-1…8`, deci opt * variabile schimbate scot albastrul din linkuri, butoane, filtre, formulare * și citate deodată — inclusiv din locurile la care n-am apucat să mă gândesc. * * ⚠️ `:root:root` nu e o greșeală de scriere. CSS-ul dinamic al lui Blocksy * se scrie inline în ``, deci **după** foaia asta; la specificitate * egală ar câștiga el. Selectorul dublat urcă specificitatea la 0,2,0 și * câștigă indiferent de ordine. * ═══════════════════════════════════════════════════════════════════════════ */ :root:root { /* Paleta temei — aceleași opt sloturi, doar că fără culoare. */ --theme-palette-color-1: #171617; /* accent → negru */ --theme-palette-color-2: #555659; /* accent hover → gri închis */ --theme-palette-color-3: #171617; /* text */ --theme-palette-color-4: #171617; /* titluri */ --theme-palette-color-5: #e3e3e3; /* borduri */ --theme-palette-color-6: #f8f8f8; /* fundal secundar */ --theme-palette-color-7: #fcfcfc; --theme-palette-color-8: #ffffff; --theme-text-color: #171617; --theme-headings-color: #171617; --theme-link-initial-color: #171617; --theme-link-hover-color: #555659; --theme-border-color: #e3e3e3; --theme-form-field-border-initial-color: #e3e3e3; --theme-form-field-border-focus-color: #171617; --theme-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --theme-font-weight: 300; --theme-font-size: 17px; /* Variabilele proprii, pentru regulile de mai jos. */ --mt-titluri: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mt-negru: #171617; --mt-gri: #555659; --mt-gri-deschis: #afafaf; --mt-linie: #e3e3e3; --mt-fundal: #f8f8f8; /* * Eticheta — o singură măsură pentru toate cuvintele mici versale din site: * meniul și titlurile din portofoliu. Sunt același rang vizual, deci trebuie * să nu poată să se desincronizeze: se schimbă aici, se schimbă în ambele. */ --mt-eticheta-marime: 0.875rem; --mt-eticheta-spatiere: 0.12em; } body { color: var(--mt-negru); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 300; line-height: 1.6; } /* ── Titluri ────────────────────────────────────────────────────────────── * * Versale, Lato, cu spațiere. Litera mare cu spațiu între semne e felul în * care producția marchează un titlu — la fel ca pe o plachetă de expoziție, * unde nu poți îngroșa mai mult, deci desfaci. * * Dimensiunile sunt mici intenționat: un H2 de 18px versale se vede la fel de * bine ca unul de 30px cu literă mică, dar nu strigă peste fotografie. */ h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .site-title, .widget-title, .wp-block-heading { color: var(--mt-negru); font-family: var(--mt-titluri); text-transform: uppercase; } h1, .page-title, .entry-title { font-size: 2rem; font-weight: 900; letter-spacing: 0.06em; line-height: 1.25; } .entry-content h2, .wp-block-heading:is(h2) { font-size: 1.125rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1.4; margin-top: 3.5rem; } .entry-content h3, .wp-block-heading:is(h3) { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1em; margin-top: 2.5rem; } /* * Titlul dintr-un card de listă e etichetă, nu titlu de pagină. Regula de mai * sus îl prindea ca `.entry-title` și îl scotea la 2rem — trei rânduri de * versale grele într-o coloană îngustă, care furau atenția de la fotografie. */ .entries .entry-title, .entry-card .entry-title { font-size: 1rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1.45; } /* Numele din antet — 900, versale, spațiere 0.1em, exact ca în producție. */ .site-title, .site-title a { font-weight: 900; letter-spacing: 0.1em; } /* * Meniul: etichete, nu linkuri. * * ⚠️ Ținta e `.ct-menu-link`, nu `.menu-item > a`. Blocksy își scrie regulile * de meniu pe clasa proprie, cu specificitate mai mare — regula pe `> a` se * aplica pe hârtie și nu se vedea deloc în pagină. */ .header-menu-1 .ct-menu-link, .menu .ct-menu-link, .mobile-menu .ct-menu-link, .menu-item > a { font-family: var(--mt-titluri); font-size: var(--mt-eticheta-marime); font-weight: 700; letter-spacing: var(--mt-eticheta-spatiere); text-transform: uppercase; } /* ── Legături ───────────────────────────────────────────────────────────── * Negre în text, cu linie subțire dedesubt. Culoarea nu marchează nimic aici; * o face poziția liniei. */ /* * Regula prinde doar legăturile din TEXT, nu orice `a` din conținut. Grila de * portofoliu stă și ea în `entry-content` (vine dintr-un scurtcod), iar o * subliniere sub titlurile de card le strica spațierea largă. */ /* * ⚠️ `:not(.wp-block-post)` nu e de prisos. Cardurile din grila de portofoliu * SUNT elemente `li`, deci `:is(… li …) a` le prindea și le sublinia titlul — * cu specificitate mai mare decât `.fu-card__titlu a` din plugin, care cerea * exact opusul. */ .entry-content :is(p, li:not(.wp-block-post), figcaption, blockquote) a:not(.wp-block-button__link):not(.wp-element-button) { color: var(--mt-negru); text-decoration: underline; text-decoration-color: var(--mt-gri-deschis); text-underline-offset: 0.25em; transition: text-decoration-color 0.15s ease; } .entry-content :is(p, li:not(.wp-block-post), figcaption, blockquote) a:not(.wp-block-button__link):not(.wp-element-button):hover { text-decoration-color: var(--mt-negru); } .fu-grila a, .fu-grila a:hover { text-decoration: none; } /* ── Citate ─────────────────────────────────────────────────────────────── * * O linie verticală de un pixel și spațiu. Fără ghilimele desenate, fără * fundal, fără italic — textul e deja altfel prin dimensiune și prin aer. */ .entry-content blockquote, .wp-block-quote { border: 0; border-left: 1px solid var(--mt-negru); color: var(--mt-negru); font-size: 1.25rem; font-style: normal; font-weight: 300; line-height: 1.5; margin: 3rem 0; padding: 0.25rem 0 0.25rem 2rem; } /* * ⚠️ Core pune italicul pe PARAGRAFUL din citat, nu pe citat: * `.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p`. O regulă pe * `blockquote` nu-l scoate — moștenirea pierde în fața unei reguli directe. */ .wp-block-quote.is-style-large, .wp-block-quote.is-style-large p, .wp-block-quote.is-style-plain, .wp-block-quote.is-style-plain p { font-size: 1.375rem; font-style: normal; font-weight: 300; line-height: 1.5; padding-left: 0; } .wp-block-quote.is-style-large { padding-left: 2rem; } .wp-block-quote cite, .wp-block-quote__citation { color: var(--mt-gri); display: block; font-family: var(--mt-titluri); font-size: 0.75rem; font-style: normal; letter-spacing: 0.14em; margin-top: 1rem; text-transform: uppercase; } /* Pullquote-ul temei vine cu ramă groasă colorată. Aici e tot o linie. */ .wp-block-pullquote { border: 0; border-left: 1px solid var(--mt-negru); padding: 0.25rem 0 0.25rem 2rem; text-align: left; } .wp-block-pullquote blockquote { border: 0; padding: 0; } /* ── Linii de separare ────────────────────────────────────────────────────*/ .wp-block-separator, hr { background: none; border: 0; border-top: 1px solid var(--mt-linie); margin: 3.5rem 0; opacity: 1; } /* ── Casete de conținut (fișe, note) ────────────────────────────────────── * Fundal #f8f8f8, fără colțuri rotunjite, fără umbră. Un plan mai jos, atât. */ .wp-block-group.has-background { border-radius: 0; } .has-palette-color-6-background-color, .has-palette-color-7-background-color { background-color: var(--mt-fundal) !important; } /* ── Metadate ───────────────────────────────────────────────────────────── * Autor, dată, categorie: gri deschis, versale mici. Se citesc dacă le cauți. */ .entry-meta, .entry-meta a, .post-meta, .ct-meta-element { color: var(--mt-gri-deschis); font-family: var(--mt-titluri); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .entry-meta a:hover { color: var(--mt-negru); } /* ── Portofoliu: cardul ─────────────────────────────────────────────────── * Titlul cardului e copiat exact din producție: Lato 600, 14px, versale, * spațiere 0.3em. Spațierea largă e ce transformă un titlu în etichetă de * expoziție — și ce lasă fotografia să fie singurul lucru care ține atenția. */ /* * ⚠️ Fără asta, titlul de card se lipea de imaginea următoare. * Pe pagina de portofoliu cardul are `nivel="2"`, deci titlul e un `h2` — și * prindea `margin-top: 3.5rem` din regula de titlu de articol. Legenda se rupea * în două: supratitlul rămânea sus, lângă imaginea lui, iar numele proiectului * cobora la jumătatea drumului spre următorul. */ .fu-grila .fu-card__titlu { margin-top: 0; } .fu-grila .wp-block-post-title, .fu-grila .wp-block-post-title a, .fu-grila .wp-block-post-title a:hover { color: var(--mt-negru); font-family: var(--mt-titluri); font-size: var(--mt-eticheta-marime); font-weight: 600; letter-spacing: var(--mt-eticheta-spatiere); line-height: 1.5; text-transform: uppercase; } /* * Supratitlul cardului: clientul și anul, deasupra numelui proiectului. E cu un * pas mai deschis la culoare decât titlul, ca ochiul să prindă numele întâi și * să coboare la context abia dacă îl caută. */ .fu-card__meta, .fu-card__client, .fu-card__an { color: var(--mt-gri-deschis); font-family: var(--mt-titluri); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; } /* ── Portofoliu: filtrele ───────────────────────────────────────────────── * * Erau pastile cu bordură rotundă și fundal plin la cel activ. Aici sunt * cuvinte: gri când sunt inactive, negre cu linie dedesubt când sunt alese. * Un rând de pastile e o interfață; un rând de cuvinte e un cuprins. */ /* * ⚠️ Selectorii sunt dublați (`.fu-filtre .fu-filtre__buton`) intenționat. * `assets/filtre.css` din pluginul Furnicuța se încarcă DUPĂ foaia temei-copil, * deci la specificitate egală (0,1,0) ar câștiga pastilele lui. Clasa părinte * urcă la 0,2,0 și rescrie tot. */ .fu-filtre .fu-filtre__buton { background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; color: var(--mt-gri-deschis); font-family: var(--mt-titluri); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; padding: 0.35rem 0; text-transform: uppercase; transition: color 0.15s ease, border-color 0.15s ease; } .fu-filtre .fu-filtre__grup { gap: 1.75rem; } .fu-filtre .fu-filtre__buton:hover { background: none; border-bottom-color: var(--mt-linie); color: var(--mt-negru); } .fu-filtre .fu-filtre__buton.is-activ { background: none; border-bottom-color: var(--mt-negru); color: var(--mt-negru); } /* Subdomeniile: același vocabular, cu un pas mai jos în ierarhie. */ .fu-filtre .fu-filtre__buton--sub { border-bottom-style: solid; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.16em; opacity: 1; padding: 0.3rem 0; } .fu-filtre .fu-filtre__grup--sub { gap: 1.25rem; margin-top: 0.5rem; } .fu-filtre .fu-filtre__numar { color: var(--mt-gri-deschis); font-family: var(--mt-titluri); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; margin-top: 2rem; text-transform: uppercase; } /* ── Fișa proiectului ─────────────────────────────────────────────────────*/ .fu-fisa__eticheta, .fu-detalii__eticheta, .fu-credite__rol { color: var(--mt-gri-deschis); font-family: var(--mt-titluri); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* ── Butoane ────────────────────────────────────────────────────────────── * Negru plin, colțuri drepte, etichetă versală. Un dreptunghi, nu o pastilă. */ .wp-block-button__link, .wp-element-button, .ct-button { background: var(--mt-negru); border-radius: 0; color: #fff; font-family: var(--mt-titluri); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .wp-block-button__link:hover, .wp-element-button:hover, .ct-button:hover { background: var(--mt-gri); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ * HERO — pagini, articole, proiecte * * Structura și comportamentul sunt ALE TEMEI, nu de aici. Blocksy are hero * type-2 cu imagine reprezentativă și **parallax nativ** (rellax, pornit din * Customizer, per dispozitiv). Configurația stă în theme mods: * `single_page_*`, `single_blog_post_*`, `fu_proiect_single_*`. * * Aici stă doar ce nu e opțiune: felul în care arată. * * ⚠️ Versiunea anterioară a acestui fișier forța `min-height: 420px` și un * overlay plat, fiindcă opțiunile native „nu funcționau". Nu ele erau de vină: * opțiunile de design ale hero-ului sunt condiționate de * `hero_elements:array-ids:custom_title:enabled`, iar `hero_elements` nu era * salvat deloc. Odată salvat, înălțimea și restul vin din Customizer — deci * hack-urile au fost șterse. * * Structura randată: * .hero-section[data-type="type-2"][data-parallax] * > figure > .ct-media-container > img * > header.entry-header.ct-container > (.entry-meta) + h1.page-title * ═══════════════════════════════════════════════════════════════════════════ */ /* * Tot ce urmează e condiționat de existența imaginii. `page_title_bg_type` e * `featured_image` pentru toate cele trei tipuri, dar o pagină fără imagine nu * primește `
` — iar fără condiție ar rămâne o bandă goală de 78vh cu * titlu alb pe alb. S-a mai întâmplat. */ .hero-section[data-type="type-2"]:has(> figure img) { align-items: flex-end; display: flex; overflow: hidden; position: relative; } /* * ⚠️ Condiția e pe IMAGINE, nu pe `figure`. Blocksy randează `
` și * atunci când postarea n-are imagine reprezentativă — gol. Cu `:has(> figure)` * un articol fără copertă primea banda de 68vh și titlul alb pe alb. */ .hero-section[data-type="type-2"]:not(:has(> figure img)) { min-height: 0; } /* * ⚠️ Înălțimea nu stă pe secțiune, ci pe `.entry-header` dinăuntru — acolo pune * Blocksy `min-height: var(--min-height)`. Anulată doar pe secțiune, o pagină * fără copertă rămânea cu 78vh de gri și titlul singur jos. */ .hero-section[data-type="type-2"]:not(:has(> figure img)) .entry-header { min-height: 0; } .hero-section[data-type="type-2"]:has(> figure img) > figure, .hero-section[data-type="type-2"]:has(> figure img) .ct-media-container { height: 100%; margin: 0; } /* * Scrim, nu overlay. * * Un voal uniform peste toată imaginea o stinge pe toată ca să se citească * textul dintr-un colț. Un gradient întunecă doar unde stă textul și lasă * restul fotografiei la luminozitatea ei — care e, până la urmă, motivul * pentru care e acolo. */ .hero-section[data-type="type-2"]:has(> figure img) > figure::after { background: linear-gradient( to top, rgba(23, 22, 23, 0.78) 0%, rgba(23, 22, 23, 0.45) 28%, rgba(23, 22, 23, 0.08) 58%, rgba(23, 22, 23, 0) 100% ); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; } .hero-section[data-type="type-2"]:has(> figure img) .entry-header { padding-bottom: clamp(2.5rem, 6vw, 5.5rem); position: relative; width: 100%; z-index: 2; } /* * Titlul. `clamp()` în loc de puncte de rupere: la 6vw titlul crește odată cu * fereastra și rămâne mereu în aceeași relație cu imaginea, nu sare la praguri. * Interlinie sub 1 — versalele n-au ascendente și descendente, deci rândurile * pot sta lipite fără să se atingă. */ .hero-section[data-type="type-2"]:has(> figure img) .page-title { color: #fff; font-family: var(--mt-titluri); font-size: clamp(2.25rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: 0.01em; line-height: 0.95; margin: 0; max-width: 18ch; text-transform: uppercase; text-wrap: balance; } /* Data și categoria: supratitlu, deasupra numelui. */ .hero-section[data-type="type-2"]:has(> figure img) .entry-meta { color: rgba(255, 255, 255, 0.72); margin-bottom: 1.25rem; } .hero-section[data-type="type-2"]:has(> figure img) .entry-meta, .hero-section[data-type="type-2"]:has(> figure img) .entry-meta a { color: rgba(255, 255, 255, 0.72); font-family: var(--mt-titluri); font-size: var(--mt-eticheta-marime); font-weight: 700; letter-spacing: var(--mt-eticheta-spatiere); text-transform: uppercase; } .hero-section[data-type="type-2"]:has(> figure img) .entry-meta a:hover { color: #fff; } /* * Semnul de derulare: o linie de un pixel care coboară în buclă. Spune „mai e * ceva sub" fără să scrie „scroll" — un hero de 78vh nu arată marginea de jos, * deci nimic din pagină nu promite continuare. */ .hero-section[data-type="type-2"]:has(> figure img)::after { animation: mt-coboara 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; background: rgba(255, 255, 255, 0.85); bottom: 0; content: ""; height: 3.5rem; left: 50%; position: absolute; width: 1px; z-index: 2; } @keyframes mt-coboara { 0% { opacity: 0; transform: translateY(-3.5rem); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-section[data-type="type-2"]:has(> figure img)::after { animation: none; opacity: 0.6; } } /* Pe prima pagină titlul e „Home" — un cuvânt care nu spune nimic. */ .home .hero-section[data-type="type-2"] .page-title { display: none; } @media (max-width: 689px) { .hero-section[data-type="type-2"]:has(> figure img) .page-title { max-width: none; } }