/*
Theme Name: Canto
Theme URI: https://profudecanto.ro
Author: Mădălin George Groza
Description: Temă clasică pentru profudecanto.ro. Randată pe server, fără build step, fără SPA. Sistemul vizual e cel din pachetul de design „Profu' de Canto" — temă întunecată, gradient violet-magenta, Big Shoulders pentru logotip, Poppins pentru rest.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: canto
*/
/* ═══════════════════════════════════════════════════════════
TOKENURI — pachetul de design „Profu' de Canto"
Valorile de aici sunt finale, luate din planșa de 28 de ecrane.
Nu sunt aproximări: dacă o culoare pare aproape corectă, e greșită.
Numele de clase rămân cele vechi (.antet, .card, .buton, .tool…),
ca șabloanele și mu-pluginurile să nu se atingă. S-a schimbat
ÎNFĂȚIȘAREA, nu structura.
═══════════════════════════════════════════════════════════ */
:root {
/* ── Fundaluri. Aproape negru, ușor albăstrui. ── */
--baza: #04060E; /* fundalul paginii */
--suprafata: #080B19; /* shell-ul secțiunilor */
--card: #121827; /* carduri, panouri, input-uri */
--card-adanc: #0A0D1C; /* carduri imbricate, rânduri de listă */
--card-adanc2: #0A0F1E;
--subsol-bg: #060814;
/* ── Brand ── */
--violet: #8A2BE2;
--magenta: #FF2D95;
--lavanda: #C9A5FF;
--violet-moale:#9A7DD8;
--lila-text: #E7E3FF;
/* ── Accente ── */
--cyan: #00C2FF;
--cyan-moale: #7FE0FF;
--auriu: #E8C766;
--auriu-adanc: #C9A227;
/* ── Stări. Culoarea e informație, niciodată decor. ── */
--succes: #3BD07A;
--atentie: #FF9F45;
--pericol: #FF6B6B;
/* ── Text ── */
--alb: #FFFFFF;
--text: #A7AEC0;
--text-tare: #D6D9E4;
/* Planșa scrie #6E7691. Măsurat pe fundalurile reale, cade sub 4.5:1 în
toate patru: 4.49 pe --baza, 4.35 pe --suprafata, 3.93 pe --card, 4.43 pe
--subsol-bg. Culoarea asta poartă informație (etichetele de microfon, firul
Ariadnei, titlurile din subsol), nu e decor, deci pragul se aplică.
#8B93AC păstrează caracterul și trece peste tot: 6.62 / 6.40 / 5.79 / 6.52.
Verificat cu C:\tmp\canto-admin\contrast.py, nu din ochi. */
--sters: #8B93AC;
--palid: #4E566E;
/* ── Chenare. Pe întunecat, chenarul e alb transparent, nu o culoare. ── */
--ch-fin: rgba(255,255,255,.06);
--ch-card: rgba(255,255,255,.08);
--ch-chip: rgba(255,255,255,.12);
--ch-buton: rgba(255,255,255,.16);
--ch-violet: rgba(138,43,226,.35);
--ch-violet-tare: rgba(138,43,226,.5);
--ch-cyan: rgba(0,194,255,.35);
--ch-succes: rgba(59,208,122,.35);
/* ── Gradientul de brand. Trei variante, fiecare cu locul ei. ── */
--grad: linear-gradient(90deg, #8A2BE2, #FF2D95);
--grad-lung: linear-gradient(90deg, #8A2BE2, #FF2D95 70%, #C9A5FF);
--grad-diag: linear-gradient(135deg, #8A2BE2, #FF2D95);
/* ── Tipografie ──
Big Shoulders DOAR pentru logotip. Poppins pentru tot restul.
Mono rămâne pentru cifre tabelare, unde alinierea contează. */
--logo: "Big Shoulders", "Big Shoulders Display", Impact, sans-serif;
--sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--semnatura: "Darlington", "Brush Script MT", cursive;
/* ── Raze. Card 14-16 · buton 10-12 · chip 7-9 · pastilă 99. ── */
--raza-chip: 8px;
--raza-buton: 11px;
--raza-card: 16px;
--raza-mare: 20px;
--raza-pil: 99px;
--lat: 74rem;
--lat-text: 42rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--baza);
color: var(--text);
font-family: var(--sans);
font-size: 1rem;
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* Aura de brand din spatele paginii. Un singur strat, foarte slab: pe
telefon un gradient radial mare costă la fiecare repaint, deci e fixat
și nu se derulează. */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(900px 520px at 78% 8%, rgba(138,43,226,.18), transparent 70%),
radial-gradient(700px 420px at 6% -4%, rgba(255,45,149,.10), transparent 70%);
}
::selection { background: var(--violet); color: #fff; }
/* ═══════════ TIPOGRAFIE ═══════════
Titlurile sunt grele și strânse: 700, letter-spacing negativ.
Corpul e aerisit: 400, line-height 1.7. */
h1, h2, h3, h4 { color: var(--alb); font-family: var(--sans); }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -.03em;
line-height: 1.05; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700; letter-spacing: -.02em;
line-height: 1.12; margin: 2.8rem 0 1rem; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
margin: 1.8rem 0 .6rem; }
h4 { font-size: .97rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
p { margin: 0 0 1.05rem; }
p.lead { font-size: 1.06rem; line-height: 1.65; color: var(--text-tare); }
/* 18.09: sloganul din hero stă sub paragraful cu fapte (cine, unde, ce), mai discret */
p.lead-slogan { font-size: .98rem; color: var(--text); margin-top: -.35rem; }
a { color: var(--lavanda); text-decoration: none;
transition: color 120ms ease; }
a:hover { color: var(--magenta); }
/* Linkurile din TEXTUL CURENT se subliniază. Lavanda față de gri-ul textului are
1,08:1: fără subliniere, cine nu deosebește culorile nu vede că e un link
(axe `link-in-text-block`, 90 de linkuri pe 32 din 38 de pagini, 24.09).
Doar linkurile fără clasă, din paragrafe și liste de conținut: butoanele,
cardurile și filele au clasa lor și rămân cum sunt. Aceeași formă ca la
`.fisa-pas-alt a` și `.erou-chestionar a`. `label` = „Am citit termenii"
de lângă căsuța de acord (/cadou/, /parteneriate/). */
main :where(p, li, dd, td, figcaption, blockquote, label) a:not([class]) {
text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px; }
strong { font-weight: 600; color: var(--alb); }
mark.de-completat { background: rgba(255,159,69,.16); color: var(--atentie);
padding: 0 .25em; font-family: var(--mono); font-size: .82em; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--sters); }
hr { border: 0; border-top: 1px solid var(--ch-fin); margin: 2.4rem 0; }
/* Eticheta (eyebrow) — cel mai frecvent tipar din tot sistemul. */
.eticheta, .eticheta-mica, .antet-pagina .supra, .ch-progres {
font-family: var(--sans); font-size: .69rem; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase; color: var(--sters);
margin: 0 0 .5rem;
}
/* ═══════════ SCHELET ═══════════ */
.invelis { max-width: var(--lat); margin: 0 auto; padding: 0 1.25rem; }
.ingust { max-width: var(--lat-text); }
/* Pagina de comandă: articolul ia tot containerul; titlul și textul introductiv
rămân la lățime de citit, dar centrate. */
.ingust-lat { max-width: none; }
/* `.continut` are și el 42rem (regula de la linia ~193) — pe pagina lată se
ridică, altfel formularul rămâne în stânga, măsurat: 672px din 1144. */
.ingust-lat > .continut { max-width: none; }
/* Textul introductiv stă la lățimea formularului (66rem, ca #canto-comanda-formular),
nu la 42rem — „înghesuit pe mijloc", cum a spus proprietarul pe laptop. */
.ingust-lat .antet-pagina, .ingust-lat > .continut > p { max-width: 66rem; margin-left: auto; margin-right: auto; }
.ingust-lat .antet-pagina { text-align: center; }
.ingust-lat .antet-pagina h1 { text-wrap: balance; }
.sari-la-continut {
position: absolute; left: -9999px; top: 0; background: var(--violet);
color: #fff; padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--raza-chip) 0;
}
.sari-la-continut:focus { left: 0; }
/* ═══════════ ANTET ═══════════
MUTAT în assets/antet.css pe 15.08.2026. Antetul se afișează acum și în
cadrul aplicației Vocal Lab, care NU încarcă foaia asta de stil; regulile
scrise în două locuri s-ar fi despărțit la prima modificare. Fișierul se
încarcă pe toate paginile, imediat după style.css (vezi functions.php). */
/* ═══════════ CONȚINUT ═══════════ */
.pagina { padding: 3rem 0 4.5rem; }
.antet-pagina { margin-bottom: 2.2rem; }
.continut { max-width: var(--lat-text); }
.continut > h2:first-child { margin-top: 0; }
.fir { font-size: .74rem; color: var(--sters); margin-bottom: 1.5rem; }
.fir a { color: var(--sters); }
.fir a:hover { color: var(--text); }
.fir span { margin: 0 .4rem; }
/* ═══════════ HERO-UL DE PE PRIMA PAGINĂ ═══════════
Planșa (ecranul „02 Homepage") îl are pe două coloane. Până pe 27.08 live-ul
avea doar coloana de text, iar jumătatea dreaptă rămânea goală pe tot
desktopul. Coloana a doua e slotul de portret cu unda în spate — placeholder
marcat vizibil, niciodată fotografie de stoc.
Mobil: coloanele se pun una sub alta, iar vizualul vine DUPĂ butoane. Omul
venit din TikTok ține telefonul cu o mână; un dreptunghi gol de 500px între
titlu și butonul de programare ar împinge acțiunea sub pliu. */
.erou { display: grid; grid-template-columns: 1.02fr .98fr; gap: 2.5rem;
align-items: center; margin: 1rem 0 3rem; }
.erou-text { display: flex; flex-direction: column; align-items: flex-start;
gap: 1.35rem; }
.erou-text > * { margin: 0; }
.erou-text h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.erou-butoane { display: flex; flex-wrap: wrap; gap: .7rem; }
/* Accentul din titlu. Gradientul se taie pe text, deci fundalul rămâne
întunecat — la `print` regula din josul fișierului îl întoarce la negru. */
.accent-grad { background: var(--grad-lung); -webkit-background-clip: text;
background-clip: text; color: transparent; }
.erou-vizual { position: relative; display: flex; align-items: flex-end;
justify-content: center; min-height: 30rem; }
.erou-aura { position: absolute; inset: auto 0 0 0; height: 78%;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(138,43,226,.5),
rgba(255,45,149,.12) 60%, transparent); }
/* Unda iese de sub portret pe ambele laturi, ca în planșă. Fără topirea de la
margini, capetele arată ca niște cioburi tăiate drept — masca le stinge. */
.erou-unda { position: absolute; left: 0; right: 0; bottom: 12%;
display: flex; align-items: center; gap: 3px; height: 10rem;
opacity: .45; pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.erou-unda i { flex: 1; border-radius: 2px;
background: linear-gradient(180deg, #00C2FF, #8A2BE2 50%, #FF2D95); }
.portret { position: relative; width: 100%; max-width: 24.5rem; aspect-ratio: 79 / 100;
border-radius: 24px; overflow: hidden;
border: 1px solid rgba(138,43,226,.45);
background: linear-gradient(160deg, #1A1233 0%, #0A0D1C 55%, #0B1A2E 100%);
box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(138,43,226,.28); }
/* Modificator peste `.loc-foto`: aceeași componentă, doar că aici umple cardul
de portret în loc să fie un bloc de sine stătător. */
.portret-gol { position: absolute; inset: 0; min-height: 0;
border: 0; border-radius: 0; background: none; padding: 1rem; }
.portret-gol span { font-size: .7rem; }
/* Fotografia reală, când există în config (`persoana.foto`). Umple cardul
și stă sub vălul de jos, ca semnătura să rămână lizibilă peste ea. */
.portret-foto { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center top; display: block; }
/* Vălul care întunecă partea de jos acoperă TOT cardul, altfel se vede muchia
dreptunghiului din spatele semnăturii. Textul stă inset peste el. */
.portret::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(8,11,25,0) 45%, rgba(8,11,25,.92)); }
.portret-jos { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem;
z-index: 1; display: flex; flex-direction: column; gap: .35rem; }
/* Semnătura e pe un singur rând (Darlington nu se rupe frumos), deci mărimea
se leagă de lățimea ecranului, nu de o valoare fixă care ar ieși din card. */
/* 43px = mărimea din planșă. Măsurat pe LIVE, cu Darlington chiar încărcat:
numele ocupă 252px într-un bloc de 346px. Cu fontul de rezervă ar fi ieșit
din card, de-asta măsurătoarea s-a făcut acolo unde fontul e cel real. */
.portret-jos .semnatura { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.portret-rol { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--violet-moale); }
@media (max-width: 900px) {
.erou { grid-template-columns: 1fr; gap: 2rem; }
.erou-vizual { min-height: 0; }
/* 16.09: fără fotografie, cardul de portret e decor de 385px pe un ecran de
812 — a doua jumătate a primului ecran, pe telefon. Rămâne pe desktop
(unde stă lângă text, nu sub el) și revine pe telefon când există poza. */
.erou-vizual:not(:has(.portret-foto)) { display: none; }
.portret { max-width: 19rem; }
.erou-unda { height: 7rem; }
}
/* ═══════════ CARDURI ═══════════
Vechiul truc cu grilă de 1px peste un fundal de linie nu mai are sens:
pe întunecat cardurile se separă prin luminozitate și rază, cu spațiu
real între ele. */
.grila { display: grid; gap: 1.125rem; margin: 1.8rem 0; }
.grila-2 { grid-template-columns: repeat(2, 1fr); }
.grila-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--card); border: 1px solid rgba(255,255,255,.07);
border-radius: var(--raza-card); padding: 1.5rem;
display: flex; flex-direction: column; text-decoration: none; color: var(--text);
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.card:hover { border-color: var(--ch-violet); background: #151C2E;
transform: translateY(-2px); color: var(--text); }
.card h3 { margin: 0 0 .5rem; font-size: .97rem; font-weight: 600; color: var(--alb); }
.card p { font-size: .82rem; line-height: 1.6; color: var(--text); margin: 0 0 .9rem; }
.card .pret { margin-top: auto; font-size: .8rem; font-weight: 500; color: var(--lavanda); }
/* Pastila de icon din capul cardului. Culoarea grupează, nu decorează: violet
= măsori, magenta = ai o problemă, cyan = înveți. Iconul e SVG inline, în
limbajul planșei — nicio bibliotecă de iconuri pe site. */
.card-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: .8rem;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; }
.card-icon-violet { background: rgba(138,43,226,.16); border: 1px solid var(--ch-violet);
color: var(--lavanda); }
.card-icon-magenta { background: rgba(255,45,149,.14); border: 1px solid rgba(255,45,149,.35);
color: #FF8FC4; }
.card-icon-cyan { background: rgba(0,194,255,.12); border: 1px solid var(--ch-cyan);
color: var(--cyan-moale); }
.card-icon-auriu { background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.35);
color: var(--auriu); }
/* Cardul recomandat — o singură dată pe pagină, altfel nu mai recomandă nimic. */
.card-recomandat { background: linear-gradient(180deg, rgba(138,43,226,.22), var(--card));
border-color: var(--ch-violet-tare);
box-shadow: 0 0 60px rgba(138,43,226,.18); }
/* ═══════════ VOCAL LAB PE PRIMA PAGINĂ ═══════════
Ecranul 02 al planșei dă produsului central o jumătate de ecran. Pe live nu
apărea deloc: cine intra pe prima pagină nu afla că există un studio audio.
Vizualul e o LEGĂTURĂ, nu un player: un buton de redare care nu redă nimic
e o promisiune încălcată în prima secundă. */
.lab-bloc { padding: 3.4rem 0; margin: 3.5rem 0 0;
border-top: 1px solid var(--ch-fin);
border-bottom: 1px solid var(--ch-fin);
background: linear-gradient(180deg, rgba(138,43,226,.06), transparent); }
.lab-doua { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.75rem;
align-items: center; }
.lab-vizual { position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: .9rem;
min-height: 19rem; border-radius: 18px; overflow: hidden;
border: 1px solid var(--ch-card); background: #0B1020;
text-decoration: none; padding: 1.5rem;
transition: border-color 180ms ease, transform 180ms ease; }
.lab-vizual:hover { border-color: var(--ch-violet); transform: translateY(-2px); }
.lab-unda { position: absolute; inset: 0; display: flex; align-items: center;
gap: 3px; padding: 0 1.5rem; opacity: .3; pointer-events: none; }
.lab-unda i { flex: 1; border-radius: 2px;
background: linear-gradient(180deg, #8A2BE2, #00C2FF); }
.lab-cerc { position: relative; width: 66px; height: 66px; border-radius: var(--raza-pil);
background: var(--grad-diag); display: flex; align-items: center;
justify-content: center; box-shadow: 0 10px 40px rgba(255,45,149,.35); }
.lab-vizual-text { position: relative; font-size: .82rem; color: var(--text);
text-align: center; }
.lab-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.lab-text > * { margin: 0; }
.lab-text h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.lab-text p { color: var(--text); max-width: 38rem; }
.lab-pastile { display: flex; flex-wrap: wrap; gap: .45rem; }
.lab-pastile .fila { cursor: default; }
/* Eticheta de secțiune în violet, nu în gri: marchează un produs, nu un capitol. */
.eticheta-brand { color: var(--violet-moale) !important; letter-spacing: .26em; }
/* Blocul de verdict de pe prima pagină: titlu strâns lângă eticheta lui. */
.pagina-strans { padding: 3.4rem 0 1rem; }
.titlu-strans { margin-top: 0; }
@media (max-width: 900px) {
.lab-doua { grid-template-columns: 1fr; gap: 1.8rem; }
.lab-vizual { min-height: 13rem; }
}
/* ═══════════ VOCAL LAB — banda de cont ═══════════
Poarta către tot ce e dedesubt. Chenar violet, nu culoare de produs. */
.banda-cont { background: var(--card); border: 1px solid var(--ch-violet);
border-radius: var(--raza-card); padding: 1.5rem 1.6rem; margin: 0 0 2.2rem; }
.banda-cont .eticheta { color: var(--lavanda); }
.banda-cont p { margin: 0 0 .9rem; }
.banda-cont p:last-child { margin: 0; }
.banda-cont-butoane { display: flex; flex-wrap: wrap; gap: .7rem; }
/* ── Metadatele de pe card: categorie, durată, timp de citire ── */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin: 0 0 .5rem !important; color: var(--sters); }
.card-eticheta { text-transform: uppercase; letter-spacing: .14em;
color: var(--lavanda); }
.card-actiune { color: var(--magenta) !important; }
.card-imagine { display: block; margin: -1.5rem -1.5rem 1rem;
border-radius: var(--raza-card) var(--raza-card) 0 0; overflow: hidden; }
.card-imagine img { display: block; width: 100%; height: auto; border-radius: 0; }
/* ═══════════ ARTICOL — cuprins și caseta de instrument ═══════════ */
.cuprins { border-left: 2px solid var(--ch-violet); padding: .2rem 0 .2rem 1.1rem;
margin: 0 0 2rem; }
.cuprins ol { list-style: none; counter-reset: c; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .4rem; }
.cuprins li { counter-increment: c; margin: 0; font-size: .88rem; }
.cuprins li::before { content: counter(c, decimal-leading-zero) " ";
font-family: var(--mono); font-size: .72rem;
color: var(--sters); margin-right: .5rem; }
.cuprins a { color: var(--text); }
.cuprins a:hover { color: var(--lavanda); }
/* Caseta de la finalul articolului: instrumentul despre care tocmai s-a citit.
Nu se alege dintr-o listă — se citește din legătura pe care o are articolul. */
.caseta-tool { background: var(--card); border: 1px solid var(--ch-violet);
border-radius: var(--raza-card); padding: 1.5rem 1.6rem;
margin: 2.4rem 0 0; }
.caseta-tool h2 { margin: .1rem 0 .5rem !important; font-size: 1.15rem; }
.caseta-tool p { font-size: .9rem; margin: 0 0 1.1rem; }
.caseta-tool .buton { margin: 0; }
/* Două greutăți pentru aceeași casetă (10.09.2026).
Pe /programeaza/ stăteau una lângă alta rezervarea lecției și discuția
gratuită de un sfert de oră, în casete identice — deci pagina nu spunea care
dintre ele e drumul principal. Diferența se face din chenar, umplere și
mărimea titlului, NU din culoarea textului: textul din caseta discretă
poartă informație, iar --sters e cea mai stinsă culoare care încă trece de
4.5:1 (5.79 pe --card). Sub ea nu se coboară. */
.caseta-tare { border-color: var(--ch-violet-tare); border-width: 2px;
padding: 1.9rem 1.9rem 1.7rem; margin-top: 1.6rem;
background: var(--card-adanc); }
.caseta-tare h2 { font-size: 1.5rem; }
.caseta-tare p { font-size: .95rem; color: var(--text-tare); }
.caseta-discreta { border-color: var(--ch-fin); background: transparent;
padding: 1.2rem 1.3rem; margin-top: 2.8rem; }
.caseta-discreta h2 { font-size: 1rem !important; }
.caseta-discreta p { font-size: .85rem; color: var(--sters); }
/* ═══════════ ÎNTREBĂRI FRECVENTE ═══════════ */
.faq { margin: 2rem 0; border-top: 1px solid var(--ch-fin); }
.faq details { border-bottom: 1px solid var(--ch-fin); }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 500; font-size: .95rem;
color: var(--alb); list-style: none; position: relative;
padding-right: 1.8rem; transition: color 120ms ease; }
.faq summary:hover { color: var(--lavanda); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: .9rem;
color: var(--sters); font-weight: 400; font-size: 1.1rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 1.1rem; color: var(--text); font-size: .9rem; }
/* ═══════════ GLOSAR — căutare și filtre ═══════════ */
/* Aceeași bară de unelte pe glosar și pe /lectii/: două pagini care fac același
lucru — caută într-o listă deja randată — arată la fel, altfel par două
funcții diferite. */
.glosar-unelte, .lectii-unelte { display: flex; flex-wrap: wrap; align-items: center;
gap: .8rem 1.2rem; margin: 0 0 1.6rem; }
.glosar-cautare, .lectii-cautare { margin: 0; flex: 1 1 18rem; max-width: 26rem; }
.glosar-cautare input, .lectii-cautare input {
width: 100%; background: var(--card); color: var(--text-tare);
border: 1px solid var(--ch-chip); border-radius: var(--raza-buton);
padding: .7rem 1rem; font: 400 .92rem var(--sans); min-height: 44px;
}
.glosar-cautare input::placeholder,
.lectii-cautare input::placeholder { color: var(--sters); }
.glosar-cautare input:focus,
.lectii-cautare input:focus { border-color: var(--ch-violet-tare); outline: none;
background: #151C2E; }
.glosar-filtre, .lectii-filtre { margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.glosar-numar, .lectii-numar { margin: 0; font-size: .74rem; color: var(--sters);
font-variant-numeric: tabular-nums; }
/* Numărul de rezultate stă pe rândul lui când filtrele au împins totul: pe
telefon, altfel, ajunge lipit de ultima filă și pare eticheta ei. */
.lectii-numar { flex: 1 0 100%; }
/* Eticheta vizibilă doar pentru cititorul de ecran: câmpul are placeholder,
dar un placeholder nu ține loc de etichetă. */
.ecran-doar { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* ═══════════ GLOSAR ═══════════ */
.gloss-link { position: relative; border-bottom: 1px dotted var(--violet-moale);
text-decoration: none; color: inherit; }
.gloss-link:hover { color: var(--lavanda); }
.gloss-tip {
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
background: var(--card); color: var(--text-tare);
border: 1px solid var(--ch-violet); border-radius: 12px;
padding: .7rem .9rem; font-size: .8rem; line-height: 1.5;
width: max-content; max-width: 19rem;
opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30;
margin-bottom: .45rem; font-family: var(--sans); font-weight: 400;
box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.gloss-link:hover .gloss-tip, .gloss-link:focus .gloss-tip,
.gloss-link.deschis .gloss-tip { opacity: 1; visibility: visible; }
/* ═══════════ NIVELURI DE PRODUS ═══════════
Trei trepte, marcate pe muchia de sus: violet · magenta · auriu. */
.nivel { border: 1px solid var(--ch-card); border-radius: var(--raza-card);
padding: 1.6rem 1.7rem; background: var(--card); position: relative;
overflow: hidden; }
.nivel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.nivel-1::before { background: var(--violet); }
.nivel-2::before { background: var(--grad); }
.nivel-3::before { background: linear-gradient(90deg, var(--auriu-adanc), var(--auriu)); }
.nivel-3 { border-color: rgba(201,162,39,.35); }
/* Cele trei trepte, una lângă alta. Ies din coloana de text (42rem): o pagină
de produs se citește pe lat, nu ca un articol — asta era și constatarea
auditului („coloana de 42rem într-un container de 74rem").
Lățimea e plafonată de DOUĂ ori: de învelișul de 74rem și de ecran, ca
ieșirea din coloană să nu devină derulare orizontală pe telefon. */
.trepte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;
margin: 2rem 0 2.4rem; align-items: stretch;
width: min(calc(var(--lat) - 2.5rem), calc(100vw - 3.5rem)); }
.trepte .nivel { display: flex; flex-direction: column; }
.trepte h3 { margin: 0 0 .2rem; font-size: 1.1rem; color: var(--alb); }
.trepte .eticheta { margin: 0 0 .2rem; }
.nivel-pret { font-family: var(--sans); font-weight: 700; font-size: 1.9rem;
line-height: 1.1; letter-spacing: -.03em; color: var(--alb);
margin: .4rem 0 1rem; font-variant-numeric: tabular-nums; }
/* Bifă verde pentru ce intră, liniuță ștearsă pentru ce nu. Semnul nu e
singurul semnal: rândul care nu intră e și mai palid. */
.nivel-lista { list-style: none; padding: 0; margin: 0 0 1.4rem;
display: flex; flex-direction: column; gap: .45rem; }
.nivel-lista li { position: relative; padding-left: 1.5rem; font-size: .86rem;
line-height: 1.5; margin: 0; }
.nivel-lista li::before { position: absolute; left: 0; top: 0;
font-weight: 700; font-size: .95rem; line-height: 1.4; }
.nivel-lista li.da::before { content: "\2713"; color: var(--succes); }
.nivel-lista li.nu { color: var(--sters); }
.nivel-lista li.nu::before { content: "\2013"; color: var(--palid); }
.nivel-lista + .buton { margin-top: auto; align-self: flex-start; }
/* Pastila „cel mai ales", pe muchia de sus a cardului din mijloc. */
.nivel-insigna { position: absolute; top: -.65rem; left: 1.7rem;
background: var(--grad); color: #fff;
font-size: .62rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; padding: .28rem .7rem;
border-radius: var(--raza-pil); white-space: nowrap; }
.nivel.card-recomandat { overflow: visible; }
/* Fluxul: pașii prin care trece omul, în ordine. Numerotarea e informație —
ordinea chiar contează — deci se vede, nu se ascunde. */
.flux { list-style: none; counter-reset: pas; padding: 0;
margin: 1.6rem 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem;
width: min(calc(var(--lat) - 2.5rem), calc(100vw - 3.5rem)); }
.flux li { counter-increment: pas; margin: 0;
display: flex; align-items: center; gap: .5rem;
background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-chip); padding: .5rem .8rem;
font-size: .8rem; color: var(--text-tare); }
.flux li::before {
content: counter(pas); font-family: var(--mono); font-size: .68rem;
font-weight: 600; color: var(--lavanda);
background: rgba(138,43,226,.16); border: 1px solid var(--ch-violet);
border-radius: var(--raza-pil); width: 1.35rem; height: 1.35rem;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
@media (max-width: 900px) {
.trepte { grid-template-columns: 1fr; }
}
/* ═══════════ TABELE ═══════════ */
table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1.6rem 0; }
th { text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--sters);
padding: 0 .8rem .6rem 0; border-bottom: 1px solid var(--ch-chip); }
td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--ch-fin);
vertical-align: top; }
td.cifra, th.cifra { font-family: var(--mono); font-variant-numeric: tabular-nums;
text-align: right; padding-right: 0; }
/* ═══════════ SUBSOL ═══════════ */
.subsol { background: var(--subsol-bg); color: var(--text); margin-top: 5rem;
padding: 3rem 0 2rem; font-size: .82rem;
border-top: 1px solid var(--ch-fin); }
.subsol a { color: var(--text); text-decoration: none; }
.subsol a:hover { color: var(--lavanda); }
.subsol h4 { color: var(--sters); font-size: .66rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .9rem; }
.subsol ul { list-style: none; padding: 0; margin: 0; }
.subsol li { margin-bottom: .5rem; }
.subsol-grila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; }
.subsol-jos { border-top: 1px solid var(--ch-fin); margin-top: 2.4rem; padding-top: 1.3rem;
font-size: .72rem; color: var(--sters); }
.subsol-jos a { color: var(--sters); }
.subsol-marca { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
padding-bottom: 2.2rem; margin-bottom: 2.2rem;
border-bottom: 1px solid var(--ch-fin); }
.subsol-marca .marca-text { font-size: 1.15rem; }
.subsol-rol { display: block; font-size: .72rem; color: var(--sters); margin-top: .15rem; }
.subsol-contact-titlu { margin-top: 1.4rem !important; }
.subsol-marca .semnatura { margin-left: auto; }
/* Semnătura olografă. Darlington nu are diacritice — numele se scrie
„Madalin George Groza". Mereu pe un singur rând. */
.semnatura { font-family: var(--semnatura); font-weight: 400; white-space: nowrap;
line-height: 1.25; font-size: 2.7rem;
background: var(--grad-lung); -webkit-background-clip: text;
background-clip: text; color: transparent; }
.semnatura-mica { font-size: 1.45rem; }
/* ═══════════════════════════════════════════════════════════
INSTRUMENTE
Nu mai sunt „a doua lume": tot site-ul e întunecat acum. Ce le
deosebește e densitatea — un singur număr mare, comenzi mari, nimic
care distrage. Se folosesc cu o mână, în picioare, cântând în telefon.
═══════════════════════════════════════════════════════════ */
.tool { background: transparent; color: var(--text);
padding: 1.6rem 0 2.4rem; margin: 0 0 2rem; }
.tool h1, .tool h2, .tool h3 { color: var(--alb); }
/* ── Capacul probei de cinci minute (05.09.2026) ──
Acoperă instrumentul, nu pagina: textul de dedesubt e cel care aduce oamenii
din căutări și rămâne util și fără instrument. Fundalul e opac, nu o ceață
subțire — o comandă întrezărită dar neapăsabilă e mai enervantă decât una
ascunsă. Se randează doar din proba.js, adică doar pentru vizitatorii fără
cont care și-au consumat proba. */
.proba-capac {
position: absolute; inset: 0; z-index: 5;
display: flex; align-items: center; justify-content: center;
padding: 1.2rem;
background: rgba(4, 6, 14, .93);
backdrop-filter: blur(3px);
border-radius: var(--raza-card);
}
.proba-cutie {
max-width: 34rem; text-align: center;
background: var(--card);
border: 1px solid var(--ch-violet);
border-radius: var(--raza-card);
padding: 1.6rem 1.4rem;
}
.proba-titlu {
margin: 0 0 .6rem; color: var(--alb);
font-size: 1.15rem; line-height: 1.35;
}
.proba-text { margin: 0 0 1.2rem; color: var(--text); font-size: .95rem; }
.proba-actiuni {
display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
}
.proba-nota { margin: 1.1rem 0 0; color: var(--sters); font-size: .8rem; }
/* Pe telefon butoanele se întind pe tot rândul: două ținte alăturate la 375px
coboară sub 44px, iar asta e chiar ecranul de pe care vine traficul. */
@media (max-width: 480px) {
.proba-actiuni > .buton { flex: 1 1 100%; }
}
.tool h1 { margin: .3rem 0 1rem; }
.tool p { color: var(--text); }
.tool .eticheta { color: var(--sters); margin: 0 0 .4rem; }
/* Insignele de microfon: gri = fără, cyan = cu. Culoarea nu e singurul
semnal — textul spune același lucru. */
.insigna { display: inline-block; font-size: .62rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
padding: .32rem .65rem; border-radius: var(--raza-chip);
border: 1px solid var(--ch-chip); color: var(--sters); }
.insigna-mic { border-color: var(--ch-cyan); color: var(--cyan);
background: rgba(0,194,255,.08); }
.numar-erou { font-family: var(--sans); font-weight: 700;
font-size: clamp(3.6rem, 16vw, 5.25rem); line-height: .9;
color: var(--alb); font-variant-numeric: tabular-nums;
letter-spacing: -.04em; }
.numar-mediu { font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: -.03em; }
.numar-erou small, .numar-mediu small { font-size: .28em; font-weight: 400;
color: var(--sters); letter-spacing: 0; }
/* ── Scena: zona în care stă numărul. Un singur lucru important. ── */
.scena { background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); padding: 1.9rem 1.4rem 2rem;
text-align: center; margin: 1.3rem 0; }
.scena-strimta { padding: 1.2rem 1.4rem 1.3rem; }
.scena .eticheta { margin: .6rem 0 1.2rem; }
.rand { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
align-items: center; margin: 1rem 0 0; }
.comenzi { margin: 1.7rem 0 0; }
.comenzi-sus { margin: 0 0 1rem; }
.grup { margin: 0 0 1.5rem; }
.grup-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
/* ── Butoane ── */
.tool .buton-mare {
background: var(--grad); color: #fff; border: 0; border-radius: 12px;
padding: 1.05rem 2.2rem; font: 600 1rem/1.2 var(--sans); cursor: pointer;
min-height: 56px; min-width: 190px;
box-shadow: 0 12px 40px rgba(138,43,226,.35);
transition: filter 150ms ease-out, transform 150ms ease-out;
}
.tool .buton-mare:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tool .buton-mare[disabled] { opacity: .4; cursor: not-allowed;
box-shadow: none; transform: none; filter: none; }
/* Oprirea nu e o acțiune de brand: chenar, nu gradient. */
.tool .buton-mare.opreste { background: transparent; color: var(--alb);
border: 1px solid var(--ch-buton); box-shadow: none; }
.tool .buton-mare.opreste:hover { border-color: var(--magenta); filter: none; }
.tool .secundar { background: transparent; color: var(--lila-text);
border: 1px solid var(--ch-buton); border-radius: var(--raza-buton);
padding: .7rem 1.1rem; font: 500 .88rem/1.2 var(--sans);
cursor: pointer; min-height: 44px;
transition: border-color 150ms ease, color 150ms ease; }
.tool .secundar:hover { border-color: var(--ch-violet-tare); color: var(--alb); }
.tool .secundar.activa { border-color: var(--violet); color: var(--lavanda);
background: rgba(138,43,226,.12); }
.tool .secundar[disabled] { opacity: .35; cursor: not-allowed; }
.tool .mic-buton { font-size: .8rem; min-height: 38px; padding: .5rem .9rem;
color: var(--sters); }
.buton-respira { min-width: 150px; }
.file { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; }
.fila { background: transparent; border: 1px solid var(--ch-chip); color: var(--text);
border-radius: 9px; padding: .55rem 1rem; font: 500 .82rem var(--sans);
cursor: pointer; min-height: 44px; transition: all 150ms ease; }
.fila:hover { border-color: var(--ch-buton); color: var(--alb); }
.fila.activa { border-color: transparent; color: #fff; background: var(--grad);
font-weight: 600; }
/* Regimurile de peste nivelul ales stau la urmă, despărțite printr-o linie —
se PROPUNE o ordine, nu se interzice nimic. Se pot alege la fel de bine. */
.fila-peste { opacity: .72; }
.fila-peste:first-of-type { margin-left: .35rem; padding-left: 1.35rem;
border-left: 1px solid var(--ch-chip); border-radius: 9px; }
/* Semnul de microfon de pe filă. Cyan, ca insigna „CU MICROFON" de pe capul
instrumentului — două locuri, același semn, aceeași culoare. Pe fila activă
fundalul e gradientul de brand, unde cyanul se stinge: acolo trece pe alb. */
.fila-semn { display: inline-flex; vertical-align: -.12em; margin-left: .4rem;
color: var(--cyan); }
.fila-semn svg { width: .95em; height: .95em; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fila.activa .fila-semn { color: #fff; }
/* ── Nivelul de afișare ──
Setare, nu conținut: mică, deasupra titlului, fără să ceară atenție. Pe
telefon trece pe două rânduri în loc să înghesuie trei butoane pe unul. */
.nivel-alegere { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
margin: 0 0 1rem; }
.nivel-alegere .eticheta { margin: 0 .35rem 0 0; }
.nivel-buton { background: transparent; border: 1px solid var(--ch-chip);
color: var(--palid); border-radius: 7px; padding: .3rem .6rem;
font: 500 .72rem var(--sans); cursor: pointer; min-height: 44px;
transition: all 150ms ease; }
.nivel-buton:hover { color: var(--alb); border-color: var(--ch-buton); }
.nivel-buton.activa { color: var(--alb); border-color: var(--ch-buton);
background: var(--ch-chip); font-weight: 600; }
/* ── Respirația ritmată ──
Bara se umple cât inspiri, stă cât ții, se golește cât expiri. Se umple de
JOS în SUS: aerul intră, nivelul crește. O bară care coboară la inspir ar
cere o traducere în cap exact în momentul în care omul are nevoie să nu
gândească deloc. */
.suflu-bara { position: relative; width: 84px; height: 150px; margin: 1rem auto 0;
border: 1px solid var(--ch-chip); border-radius: 12px; overflow: hidden; }
.suflu-bara-umplere { position: absolute; left: 0; right: 0; bottom: 0; height: 0;
background: var(--grad); transition: height 60ms linear; }
.suflu-faza { margin-top: .6rem; }
.camp-mic { display: inline-flex; flex-direction: column; gap: .25rem; text-align: left; }
.camp-mic input { width: 5.5rem; min-height: 44px; }
/* ── Urma intonației ──
Ultimele zece secunde de abatere, cu banda „exact" desenată în spate.
Acul e o stare; urma e o direcție — de-asta stă imediat sub el. */
.intonatie-urma { max-width: 22rem; margin: 1rem auto 0; }
.urma-grafic { width: 100%; height: auto; display: block; }
/* Treptele gamei, listate una câte una: media ascunde exact ce caută un
profesor, adică treapta care fuge. Culoarea NU e singurul semn — textul
spune abaterea în come, cu direcție. */
.intonatie-trepte { list-style: none; padding: 0; margin: 1rem 0 0;
display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.intonatie-trepte li { font: 500 .78rem var(--mono); padding: .35rem .6rem;
border-radius: 7px; border: 1px solid var(--ch-chip); }
.intonatie-trepte .treapta-bine { color: var(--text); }
.intonatie-trepte .treapta-fuge { color: var(--alb); border-color: var(--ch-buton); }
.intonatie-pas { margin-top: .7rem; }
/* ── Lista de vocalize ──
Butoane pe două rânduri, nu un `select`: numele tiparului și silaba trebuie
citite dintr-o privire, iar într-o listă derulantă se văd doar când o
deschizi. Silaba stă sub nume, mai mică — e o propunere, nu o constrângere. */
.pian-lista { flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mic-vocaliza { display: inline-flex; flex-direction: column; align-items: flex-start;
gap: .1rem; text-align: left; line-height: 1.25; }
.vocaliza-silaba { font-family: var(--mono); font-size: .7rem; color: var(--sters); }
.mic-vocaliza.activa { border-color: transparent; background: var(--grad); color: #fff; }
.mic-vocaliza.activa .vocaliza-silaba { color: rgba(255,255,255,.85); }
.pian-serie { margin-top: .5rem; }
.pian-reglaje { margin-top: .4rem; }
/* ── Vocalizele proprii ──
Marcate cu un contur, nu cu altă culoare de fond: fondul e deja luat de
„aleasă", iar o vocaliză scrisă de om trebuie să se recunoască și când e
aleasă, și când nu. */
.mic-vocaliza.vocaliza-proprie { border-style: dashed; }
.vocaliza-mea { flex-wrap: wrap; gap: .35rem; align-items: center;
padding: .45rem 0; border-bottom: 1px solid var(--ch-chip); }
.vocaliza-mea:last-of-type { border-bottom: 0; }
/* Codul se ARATĂ după apăsare: pe telefoane copierea în clipboard e refuzată
destul de des, iar un buton care spune că a copiat fără să fi copiat e mai
rău decât unul care nu promite nimic. */
.cod-aratat { font-family: var(--mono); font-size: .68rem; user-select: all;
color: var(--alb); border-color: var(--ch-buton); }
.pian-cod { font-family: var(--mono); font-size: .78rem; min-height: 44px;
flex: 1 1 14rem; min-width: 0; }
.pian-formular { border: 1px solid var(--ch-chip); border-radius: 12px;
padding: .9rem; margin-top: .8rem; }
/* Editorul de solfegii proprii (11.09): un buton de brand sus, înaintea
listei, și panoul strâns sub el. Panoul se deschide la clic și abia atunci
se aduce pupitrul. `.pian-formular` de dinăuntru rămâne cel de sus. */
.solfegiu-scrie { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.solfegiu-scrie .solfegiu-scrie-buton { min-width: 0; }
.solfegiu-scrie .solfegiu-scrie-panou { width: 100%; }
.solfegiu-scrie .solfegiu-scrie-panou .pian-formular { margin-top: 0; }
.solfegiu-scrie .solfegiu-mele { margin-top: .6rem; }
.solfegiu-scrie .solfegiu-mele:empty { display: none; }
.pian-formular .camp-lat { margin-top: .7rem; }
.pian-formular input { min-height: 44px; width: 100%; }
.pian-spune, .formular-spune { margin-top: .6rem; }
/* ── Câmpuri ── */
.camp-lat { display: block; margin: 1.2rem auto 0; max-width: 30rem; text-align: left; }
.camp-lat .eticheta { display: block; }
.camp-lat input[type="range"] { width: 100%; accent-color: var(--magenta); height: 32px; }
.camp-lat input[type="number"],
.camp-lat select,
input[type="text"], input[type="email"], input[type="search"], textarea, select {
width: 100%; background: var(--card-adanc); color: var(--alb);
border: 1px solid var(--ch-chip); border-radius: var(--raza-buton);
padding: .7rem .85rem; font: 400 .95rem var(--sans); min-height: 44px;
transition: border-color 150ms ease;
}
.camp-lat input[type="number"] { font-family: var(--mono); }
input:focus, textarea:focus, select:focus { border-color: var(--violet); outline: none; }
input::placeholder, textarea::placeholder { color: var(--palid); }
.comuta { display: flex; align-items: center; gap: .6rem; color: var(--text);
font-size: .9rem; min-height: 44px; cursor: pointer; }
.comuta input { width: 20px; height: 20px; accent-color: var(--magenta); }
/* ── Rezultate ── */
.rezultat { font-size: .97rem; color: var(--text-tare) !important; margin: 1rem 0 0;
min-height: 1.6em; }
.istoric { margin: 1.7rem 0 0; }
.istoric .eticheta { margin: 1.3rem 0 .5rem; }
/* Comparația cu săptămâna trecută. Semnul e informație, nu decor: „+1,8 s" și
„−1,8 s" sunt două vești diferite, iar culoarea singură n-ar spune care. */
.suflu-comparatie { display: flex; align-items: baseline; flex-wrap: wrap;
gap: .5rem .9rem; margin: 1.2rem 0 0; }
.suflu-comparatie .eticheta { margin: 0; }
.suflu-comparatie-cifra { font-family: var(--mono); font-size: .95rem;
color: var(--text-tare); font-variant-numeric: tabular-nums; }
.suflu-delta { font-family: var(--mono); font-size: .82rem;
padding: .15rem .5rem; border-radius: var(--raza-chip);
border: 1px solid var(--ch-chip); color: var(--sters); }
.suflu-delta.in-sus { color: var(--succes); border-color: var(--ch-succes); }
.suflu-delta.in-jos { color: var(--atentie); border-color: rgba(255,159,69,.35); }
.suflu-ultimele { margin-top: 0; }
.grafic { width: 100%; height: auto; max-height: 120px; display: block; }
.segmente { list-style: none; padding: 0; margin: 1.2rem 0 0;
font-family: var(--mono); font-size: .82rem; color: var(--text);
font-variant-numeric: tabular-nums; }
.segmente li { border-bottom: 1px solid var(--ch-fin); padding: .55rem 0; }
/* Fraza măsurată, pe un rând: nume · bară · durată · verdict.
Bara e proporțională cu cel mai lung segment AL FRAZEI, nu cu ținta —
întrebarea e unde s-a rupt fraza față de ea însăși. */
.segment-rand { display: grid; grid-template-columns: 5.5rem 1fr auto;
grid-template-areas: "nume bara durata" "nume verdict verdict";
align-items: center; gap: .2rem .7rem; }
.segment-nume { grid-area: nume; color: var(--sters); }
.segment-bara { grid-area: bara; display: block; height: 6px; border-radius: 3px;
background: var(--ch-chip); overflow: hidden; }
.segment-bara i { display: block; height: 100%; border-radius: 3px;
background: var(--violet-moale); }
.segment-durata { grid-area: durata; color: var(--text-tare); }
.segment-verdict { grid-area: verdict; font-family: var(--sans);
font-size: .74rem; color: var(--sters); }
/* 25.09: bara live a segmentului curent din cronometrul de frază. Linia albă
e ținta; verdele apare doar când e atinsă, și textul de sub bară o spune. */
.fraza-live { position: relative; height: 14px; margin: .9rem 0 .35rem; border-radius: 7px;
background: var(--ch-chip); overflow: hidden; }
.fraza-live-umplere { display: block; height: 100%; width: 0; border-radius: 7px;
background: var(--violet-moale); transition: width 100ms linear; }
.fraza-live.este-atinsa .fraza-live-umplere { background: var(--succes); }
.fraza-live-tinta { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
background: var(--text-tare); }
.fraza-live-text { min-height: 1.4em; margin: 0 0 .6rem; font-size: .9rem; color: var(--text-tare); }
/* Culoarea e al doilea semnal, niciodată singurul: verdictul e scris. */
.segment-lung .segment-bara i { background: var(--succes); }
.segment-lung .segment-verdict { color: var(--succes); }
.segment-atentie .segment-bara i { background: var(--atentie); }
.segment-atentie .segment-verdict{ color: var(--atentie); }
.segment-rau .segment-bara i { background: var(--pericol); }
.segment-rau .segment-verdict { color: var(--pericol); }
/* ── Note de siguranță. Roșul e informație, niciodată decor. ── */
.nota-siguranta { border-left: 3px solid var(--pericol);
background: rgba(255,107,107,.07); border-radius: 0 12px 12px 0;
padding: .95rem 1.15rem; margin: 1.5rem 0;
color: var(--text-tare); font-size: .88rem; }
.nota-siguranta strong { color: var(--alb); display: block; margin-bottom: .25rem; }
.nota-fach { border-left-color: var(--violet-moale);
background: rgba(138,43,226,.08); }
/* ── Nivelul microfonului, cu pragul camerei pe bară ──
Semnul de prag nu e decor: sub el, microfonul aude camera, nu vocea. Când
nivelul stă sub prag, bara devine portocalie ȘI cifra se stinge — culoarea
nu e singurul semnal. */
.mic-nivel { display: flex; align-items: center; gap: .7rem;
max-width: 26rem; margin: .9rem auto 0; }
.mic-nivel .eticheta { margin: 0; white-space: nowrap; }
.mic-nivel-bara { position: relative; flex: 1; height: 8px; border-radius: 4px;
background: var(--ch-chip); overflow: hidden; }
.mic-nivel-bara i { display: block; height: 100%; width: 0;
border-radius: 4px; background: var(--succes);
transition: width 60ms linear; }
.mic-nivel-bara b { position: absolute; top: -3px; bottom: -3px; width: 2px;
background: var(--sters); border-radius: 1px; }
.mic-nivel-cifra { font-family: var(--mono); font-size: .74rem;
color: var(--text-tare); font-variant-numeric: tabular-nums;
min-width: 4.2rem; text-align: right; }
.mic-nivel.sub-prag .mic-nivel-bara i { background: var(--atentie); }
.mic-nivel.sub-prag .mic-nivel-cifra { color: var(--sters); }
/* ── Panoul de microfon: cerere · calibrare · zgomot · activ ── */
.panou-mic { text-align: center; margin: 1rem 0 0; }
.mic-explicatie { color: var(--sters) !important; font-size: .85rem; max-width: 34rem;
margin-left: auto; margin-right: auto; }
.mic-avertisment { color: var(--atentie) !important; font-size: .9rem; max-width: 34rem;
margin: 0 auto 1rem; }
.mic-eroare { color: var(--pericol) !important; font-size: .9rem; max-width: 34rem;
margin: 0 auto 1rem; }
.mic-actiuni { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
margin-top: 1rem; }
.mic-stare .numar-erou { margin: .6rem 0; }
/* ── Metronom ── */
.pulsuri { display: flex; gap: .5rem; justify-content: center; margin: 1.3rem 0 .4rem; }
.puls { width: 18px; height: 18px; border: 1px solid var(--ch-chip); border-radius: 50%; }
.puls.accent { border-color: var(--violet-moale); }
.puls.activ { background: var(--grad); border-color: transparent;
box-shadow: 0 0 16px rgba(255,45,149,.5); }
/* ── Claviatură
Trei octave înseamnă 22 de clape albe. Pe 375px asta ar da clape de
15px — imposibil de atins cu degetul mare. Derulează lateral și
păstrează clape de ~34px. Pe desktop încape întreagă. ── */
.claviatura-cadru { overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; margin: 1.5rem 0 .4rem; }
.claviatura { position: relative; height: 160px; min-width: 760px; margin: 0;
background: var(--card-adanc); border: 1px solid var(--ch-card);
border-radius: 12px; overflow: hidden; touch-action: manipulation; }
.clapa { position: absolute; top: 0; border: 0; padding: 0; cursor: pointer;
font: inherit; }
.clapa-alba { height: 100%; background: #E8E6F0; border-right: 1px solid #0A0D1C;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: .5rem; }
.clapa-alba:hover { background: #FFF; }
.clapa-alba.apasata { background: var(--lavanda); }
.clapa-neagra { height: 62%; background: #131722; z-index: 2;
border: 1px solid #04060E; border-radius: 0 0 3px 3px; }
.clapa-neagra:hover { background: #1E2434; }
.clapa-neagra.apasata { background: var(--violet); }
.clapa-nume { font-family: var(--mono); font-size: .6rem; color: var(--palid);
pointer-events: none; }
/* ── Claviatura de ALES nota, la intonație.
Nu e un pian de încercat, e un selector: două octave (15 clape albe)
în loc de trei și pe jumătate din înălțime, ca acul să rămână pe ecran
odată cu ea. Lățimea minimă ține clapa la aceiași ~34px ca la celelalte
instrumente — sub atât, degetul mare nimerește vecina. ── */
.claviatura-alegere { min-width: 520px; height: 104px; }
/* Clapa aleasă poartă DOUĂ semne, nu doar culoarea: rombul de sus se vede
și pe ecran citit în soare, și tipărit alb-negru, și de cine nu deosebește
violetul de gri. */
.clapa.tinta::after { content: ''; position: absolute; left: 50%; top: 7px;
width: 9px; height: 9px; border-radius: 2px;
transform: translateX(-50%) rotate(45deg); }
.clapa-alba.tinta { background: var(--lavanda); }
.clapa-alba.tinta::after { background: #0A0D1C; }
.clapa-neagra.tinta { background: var(--violet); }
.clapa-neagra.tinta::after { background: var(--lavanda); }
/* Notele pe care le-ai atins deja, aduse din harta vocii.
Semnul e o bară la BAZA clapei, nu o culoare de fond: fondul e deja luat de
„apăsată" și de „țintă", iar trei culori peste aceleași clape n-ar mai spune
nimic. Bara nu împiedică nimic — o clapă neatinsă rămâne apăsabilă, fiindcă
harta spune ce am măsurat, nu ce poate omul. */
.clapa.atinsa::before { content: ''; position: absolute; left: 50%; bottom: 5px;
width: 14px; height: 3px; border-radius: 2px;
transform: translateX(-50%); background: var(--lila-text);
opacity: .55; }
.clapa.atinsa-sigur::before { opacity: 1; height: 4px; }
.clapa-neagra.atinsa::before { background: var(--lavanda); }
.clapa.tinta.atinsa::before { opacity: 0; }
.intonatie-tinta-nume { color: var(--lila-text); font-size: .85rem; }
/* Claviatura taie ce iese din ea, deci conturul de focus se desenează pe
dinăuntru — altfel cine umblă cu Tab nu vede unde a ajuns. */
.clapa:focus-visible { outline-offset: -3px; z-index: 3; }
/* ── Acul de intonație.
Culoarea nu e singurul semnal: textul spune direcția, iar acul se
mută. Merge și pe ecran citit în soare, și tipărit alb-negru.
Rigla acului e gradată ÎN COME, nu în procente oarbe: patru come în
fiecare parte, o linie la fiecare comă (8 come pe toată lățimea,
adică 12,5% una), iar banda din mijloc e „exact" — o comă în stânga
și una în dreapta — mai exact tot ce se scrie „0 come" sau „1 comă",
adică o comă și jumătate, cât ține rotunjirea. Scara stă în CSS fiindcă e
o însușire a instrumentului, nu a stării lui; JS-ul mută doar --pozitie.
Dacă se schimbă SCARA_AC_COME sau PRAG_EXACT_COME din tools.js,
se schimbă și procentele de aici. ── */
.acul { position: relative; height: 64px; background: var(--card-adanc);
border: 1px solid var(--ch-card); border-radius: 12px;
margin: 0 auto 1.2rem; max-width: 34rem; overflow: hidden; }
.acul-rigla { position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, transparent 31.25%, rgba(59,208,122,.10) 31.25%,
rgba(59,208,122,.10) 68.75%, transparent 68.75%),
repeating-linear-gradient(to right, var(--ch-card) 0 1px,
transparent 1px 12.5%); }
.acul-centru { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
background: var(--palid); }
.acul-linie { position: absolute; left: var(--pozitie, 50%); top: 6px; bottom: 6px;
width: 4px; background: var(--sters); transform: translateX(-2px);
transition: left .07s linear; border-radius: 2px; }
.acul.exact .acul-linie { background: var(--succes); width: 8px; transform: translateX(-4px);
box-shadow: 0 0 20px rgba(59,208,122,.6); }
/* „Aproape" nu e nici verde, nici portocaliu: e o corectură în curs.
Se citește din lățime și din text, nu dintr-o a treia culoare. */
.acul.aproape .acul-linie { background: var(--text-tare); width: 6px;
transform: translateX(-3px); }
.acul.abatut .acul-linie { background: var(--atentie); }
.intonatie-verdict { letter-spacing: .01em; }
.intonatie-verdict.exact { color: var(--succes); }
.intonatie-verdict.aproape { color: var(--text-tare); }
.intonatie-verdict.sus,
.intonatie-verdict.jos { color: var(--atentie); }
.nota-octava { color: var(--atentie) !important; font-size: .9rem; min-height: 1.4em; }
/* ── Harta vocii ── */
.harta { display: flex; gap: 2px; height: 76px; align-items: flex-end;
margin: 1.3rem 0 .6rem; }
.ton { flex: 1; height: 46%; background: rgba(255,255,255,.06); border-radius: 2px; }
.ton-negru { height: 66%; background: rgba(255,255,255,.035); }
.ton.atins { background: rgba(138,43,226,.55); }
.ton.sigur { background: linear-gradient(180deg, var(--cyan), var(--violet)); }
/* Vechimea, ca intensitate. Nota atinsă ieri și cea atinsă acum trei luni
arătau identic — harta spunea „ce ai atins vreodată", nu „unde ești acum".
Nu se șterge nimic: se estompează, și rămâne în titlu de când e. */
.ton.vechi { opacity: .45; }
/* A treia stare, care NU e a doua: notele aduse din harta veche n-au nicio
dată în ele. „Nu știu de când" se desenează altfel decât „demult" —
punctat, nu palid. */
.ton.fara-data { opacity: .55; background-image: repeating-linear-gradient(
45deg, transparent 0 3px, rgba(255,255,255,.22) 3px 5px); }
/* Nota pe care a declarat-o OMUL comodă, la proba de confort. Semn propriu,
nu o a treia nuanță de violet: se citește și pe un ecran în soare. */
.ton.confort { box-shadow: inset 0 0 0 2px var(--auriu, #D9C08A); }
/* ── Rigla de ambitus — aceeași scară ca în documentele de verdict ── */
.rigla { position: relative; height: 46px; margin: 1.5rem 0 .4rem; }
.rigla-fundal { position: absolute; left: 0; right: 0; top: 12px; height: 10px;
background: rgba(255,255,255,.07); border-radius: var(--raza-pil); }
.rigla-segment { position: absolute; top: 12px; height: 10px; border-radius: var(--raza-pil); }
.rigla-total { background: rgba(255,255,255,.16); }
.rigla-stabil { background: var(--grad); }
/* Zona comodă stă PESTE cea stabilă, cu contur, nu cu altă umplere: sunt două
lucruri diferite (ce ai atins des vs. ce ai spus TU că e comod) și trebuie
să se poată vedea una peste alta. */
.rigla-confort { background: transparent; box-shadow: inset 0 0 0 2px #D9C08A; }
.rigla-capete { position: absolute; left: 0; right: 0; top: 26px;
display: flex; justify-content: space-between;
font-family: var(--mono); font-size: .66rem; color: var(--sters); }
/* ── Intervale ── */
.raspunsuri { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
margin: 1.3rem 0; }
.intervale-feedback { min-height: 1.7em; font-size: 1rem; margin: 1.1rem 0 0; }
/* 25.09: distanța dintre note, după răspuns — o căsuță pe semiton. */
.int-desen { margin: .8rem 0 0; }
.int-sir { display: flex; gap: 2px; justify-content: center; }
.int-clapa { flex: 1 1 0; max-width: 44px; min-height: 56px; display: flex; align-items: flex-end;
justify-content: center; padding-bottom: 4px; border-radius: 0 0 6px 6px;
background: var(--text); color: var(--baza); font-size: .72rem; }
.int-clapa.este-neagra { background: var(--card); border: 1px solid var(--ch-chip); color: var(--text-tare); }
.int-clapa.este-capat { background: var(--lavanda); color: var(--baza); font-weight: 600; }
.int-text { margin: .5rem 0 0; text-align: center; font-size: .9rem; color: var(--text-tare); }
.intervale-feedback.corect { color: var(--succes) !important; }
.intervale-feedback.gresit { color: var(--pericol) !important; }
/* ── Solfegiu
Portativul e desenat, nu scris cu un font de muzică: culorile lui vin
din `color`, iar tot ce e înăuntru moștenește prin `currentColor`. Așa
un verdict pus pe grupul unei note îi schimbă și capul, și codița, și
alterația, dintr-o singură declarație.
Cadrul derulează lateral, portativul NU se strânge: un solfegiu de opt
măsuri strâns pe 375px ar avea notele la trei pixeli una de alta, adică
exact lucrul pe care omul a venit să-l citească.
🔴 A avut o vreme `max-height: 52vh`, ca să nu împingă butoanele sub
marginea ecranului. Greșit, și scos la cererea proprietarului: solfegiul
se citește ca o partitură pusă pe pupitru, dintr-o bucată. O fereastră de
jumătate de ecran peste patruzeci de măsuri înseamnă că omul derulează
într-o cutie ca să vadă ce cântă — exact munca pe care o face ochiul când
citește. Pagina derulează, partitura nu. ── */
.portativ-cadru { overflow-x: auto; -webkit-overflow-scrolling: touch;
margin: .4rem -.6rem 1rem; padding: 0 .6rem; }
/* Hârtia. Portativul se desenează cu gravura modulului Partituri, adică în
negru, ca orice partitură tipărită — deci stă pe alb, nu pe fundalul
întunecat al site-ului. Nu e o abatere de la temă: e singurul loc din site
unde conținutul E o pagină de partitură, iar o partitură pe fond negru nu
seamănă cu nimic din ce are elevul pe pupitru. */
.portativ { min-height: 132px; background: #fff; border-radius: 10px;
padding: .2rem .1rem; color: #101014; }
.portativ svg { display: block; }
.portativ-lipsa { color: #55606f; padding: 2rem 1rem; text-align: center;
font-size: .9rem; }
/* Numerele de măsură. VexFlow le scrie cu 16pt Times, ceea ce pe o pagină de
solfegiu strigă mai tare decât notele. Se strâng de aici, nu în gravură:
gravura e comună cu editorul de partituri, unde mărimea aia e potrivită.
Atributul de font pus de VexFlow pierde în fața CSS-ului (atributele de
prezentare au cea mai mică prioritate), deci nu e nevoie de !important. */
.portativ svg text { font: 600 10px var(--mono); fill: #7b8493; }
/* Numele notelor, pentru „primii pași". 13px, nu 9: la nouă erau scrise, dar
nu se citeau — iar un abecedar pe care trebuie să-l apropii de ochi ca să-l
descifrezi nu ajută pe nimeni să citească portativul de la pupitru. Sunt mai
mici decât notele, fiindcă rămân al doilea drum spre notă, nu primul.
#4a5464 dă 7,65:1 pe hârtia albă (măsurat, contrast.py). */
.portativ svg text.p-nume { font: 600 13px var(--mono); fill: #4a5464; }
/* Nota care sună acum și verdictele. Gravura pune doar clasa pe grupul notei;
culoarea vine de aici, o singură dată, pentru toate semnele din grup (cap,
codiță, steag, alterație). Verdictul și nota care sună sunt două informații
diferite și trebuie să se poată vedea în același timp, deci una schimbă
culoarea semnului, cealaltă îi îngroașă conturul. */
/* Violetul e scris plin, nu luat din tokenul temei: acolo e o culoare cu
transparență, gândită să stea peste fundalul întunecat al site-ului. Pe
hârtia albă a portativului aceeași culoare iese spălăcită, iar nota care
sună trebuie să se vadă dintr-o privire, de la doi metri. */
.p-acum path, .p-acum text, .p-acum rect {
fill: #6a11c4; stroke: #6a11c4; stroke-width: 1.2;
}
.p-v-exact path, .p-v-exact text { fill: #128a4d; stroke: #128a4d; }
.p-v-aproape path, .p-v-aproape text { fill: #9a6b00; stroke: #9a6b00; }
.p-v-gresit path, .p-v-gresit text { fill: #c02a2a; stroke: #c02a2a; }
.p-v-tacut path, .p-v-tacut text { fill: #98a0ac; stroke: #98a0ac; }
.solfegiu-cum { font-size: .88rem; color: var(--sters) !important; max-width: 40rem;
margin: 0 auto 1rem; }
.solfegiu-antet { font-family: var(--mono); letter-spacing: .08em; text-transform: none;
margin: 0 0 .3rem; }
/* Ordinea din scenă, de sus în jos: referința, butoanele de pornire, mesajul
lor, antetul exercițiului, portativul. Butoanele au fost mutate deasupra
portativului pe 04.09 — vezi motivul scris în parti/tool-solfegiu.php.
Spațiile de dedesubt sunt ale lor de când sunt sus: înainte, distanța până
la marginea scenei o dădea padding-ul, iar acum urmează alt conținut. */
/* Reglajele mutate deasupra portativului: tempo, numele notelor, transpunerea.
Sunt strânse — sub ele urmează butoanele de pornire și abia apoi notele, iar
dacă reglajele iau o treime din ecran, portativul începe sub linia de plutire
exact pe telefonul de pe care se folosește instrumentul. De-aia marginile de
aici sunt mai mici decât cele din panoul de jos, de unde vin regulile. */
.comenzi-reglaje { margin: 0 0 1rem; }
/* Tempoul pe UN rând, nu pe trei. Aceleași trei elemente (eticheta, cursorul,
cifra) stau în panoul de jos unul sub altul, și acolo e bine — acolo au loc.
Sus, fiecare rând în plus împinge portativul mai jos: măsurat pe telefon,
varianta stivuită ducea prima notă la 1228px de marginea de sus, adică la o
derulare și jumătate de la titlu. Se strâng aici, nu în regula generală:
`.camp-lat` e folosit de mai multe instrumente. */
.comenzi-reglaje .camp-lat { display: flex; flex-wrap: wrap; align-items: center;
gap: .4rem .7rem; max-width: 34rem; margin: 0 auto .5rem; }
.comenzi-reglaje .camp-lat .eticheta { display: inline; flex: 0 0 auto; margin: 0; }
.comenzi-reglaje .camp-lat input[type="range"] { flex: 1 1 11rem; width: auto; height: 28px; }
.comenzi-reglaje .camp-lat .rezultat { flex: 0 0 auto; font-size: .82rem; }
.comenzi-reglaje .rand-tempo { margin: 0 0 .5rem; }
.comenzi-reglaje .comuta { justify-content: center; margin-bottom: .5rem; }
.comenzi-reglaje .rand { margin-bottom: .2rem; }
.comenzi-reglaje .mic-explicatie { margin: .2rem 0 0; }
.solfegiu-referinta { margin-bottom: .8rem; }
.solfegiu-actiuni { margin-bottom: .5rem; }
.solfegiu-stare { min-height: 1.6em; margin: 0 0 .2rem; }
.solfegiu-raport { margin: 1.6rem 0 0; }
.solfegiu-alegere { justify-content: flex-start; }
/* Tabelul notelor. Rândurile se pot apăsa — se aude nota scrisă, apoi a ta —
deci au nevoie de o țintă de 44px și de un contur de focus vizibil. */
.solfegiu-tabel { width: 100%; border-collapse: collapse; margin: .8rem 0 0;
font-family: var(--mono); font-size: .78rem; }
.solfegiu-tabel th { text-align: left; font: 600 .68rem var(--sans);
letter-spacing: .12em; text-transform: uppercase;
color: var(--sters); padding: .4rem .5rem; }
.solfegiu-tabel td { padding: .5rem; border-top: 1px solid var(--ch-fin);
color: var(--text); }
.solfegiu-tabel tr[role="button"] { cursor: pointer; }
.solfegiu-tabel tr[role="button"]:hover td { color: var(--alb); background: var(--card-adanc); }
.solfegiu-tabel tr[role="button"]:focus-visible { outline: 2px solid var(--violet);
outline-offset: -2px; }
.solfegiu-tabel tr td:first-child { color: var(--sters); }
.solfegiu-tabel tr.v-exact td:nth-child(3) { color: var(--succes); }
.solfegiu-tabel tr.v-gresit td:nth-child(3) { color: var(--atentie); }
.solfegiu-tabel tr.v-tacut td { color: var(--palid); }
/* ── Diction Lab
Instrumentul are cinci ecrane sub aceleași file, deci tot ce urmează e
scris ca să funcționeze în oricare dintre ele: bare de măsurătoare,
pastile de cifră, lista antrenamentului, chenarul camerei.
Nicio culoare nouă și niciun font nou: toate valorile vin din tokenurile
de sus. Verdele e ȚINTA, roșul e CE FACI ACUM — aceeași convenție ca în
Vocal Lab, și niciodată singurul semnal: fiecare bară are cifra ei, iar
fiecare stare are o propoziție scrisă. ── */
.dictie-intro strong { color: var(--alb); }
.dictie-limbi { justify-content: flex-start; align-items: center; }
.dictie-limbi .eticheta { margin: 0 .4rem 0 0; }
.dictie-regimuri { justify-content: flex-start; }
.dictie-cum { color: var(--sters) !important; font-size: .85rem; margin: .2rem 0 0; }
/* Textul de spus. E singurul lucru mare de pe ecran: omul se uită la el, nu
la butoane. Nu se scrie cu majuscule forțate — „ȘAPTE SAȘI" se citește mai
greu decât „Șapte sași", iar aici chiar contează cât de repede îl citești. */
.dictie-text { font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1.25;
font-weight: 600; color: var(--alb) !important;
margin: .4rem 0 .8rem; letter-spacing: -.01em;
overflow-wrap: break-word; }
/* Instrucțiunea exercițiului. Se citește, nu se rostește — de aceea e mică,
lavandă și lipită sub text, nu amestecată în el. */
.dictie-nota { color: var(--lavanda) !important; font-size: .88rem;
margin: -.4rem 0 .8rem; }
.dictie-cerut { margin: 1rem 0 0; }
.dictie-model { justify-content: flex-start; margin: 1rem 0 0; }
.dictie-actiuni { margin: 1.2rem 0 0; }
.dictie-contor { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dictie-titlu-verdict { font-size: 1.15rem; font-weight: 600;
color: var(--alb) !important; margin: 1.4rem 0 .2rem; }
/* Bifa pentru vocile prin internet. Textul de lângă ea spune exact ce pleacă
de pe dispozitiv — o bifă fără propoziția aia n-ar fi un acord. */
.dictie-bifa { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
font-size: .82rem; color: var(--sters); max-width: 34rem;
min-height: 44px; padding: .55rem 0; text-align: left; }
.dictie-bifa input { width: 20px; height: 20px; margin-top: .15rem; flex: none;
accent-color: var(--magenta); }
/* ── Barele de măsurătoare ──
„—" în loc de 0 când nu s-a putut măsura: jgheabul rămâne gol, cifra scrie
liniuță, iar propoziția de sub bare spune de ce. Un zero desenat ar fi o
acuzație pusă în locul unei lipse. ── */
.dictie-bare { margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.dictie-bara { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem;
align-items: center; gap: .7rem; }
.dictie-bara-nume { font-size: .8rem; color: var(--sters); }
.dictie-bara-jgheab { height: 8px; border-radius: 4px; background: var(--ch-chip);
overflow: hidden; }
.dictie-bara-jgheab i { display: block; height: 100%; width: 0; border-radius: 4px;
background: var(--violet-moale);
transition: width 180ms ease-out; }
.dictie-bara-jgheab i.treapta-bine { background: var(--succes); }
.dictie-bara-jgheab i.treapta-merge { background: var(--atentie); }
.dictie-bara-jgheab i.treapta-slab { background: var(--pericol); }
.dictie-bara-cifra { font-family: var(--mono); font-size: .82rem; text-align: right;
color: var(--text-tare); font-variant-numeric: tabular-nums; }
.dictie-comparatie { display: flex; align-items: baseline; flex-wrap: wrap;
gap: .4rem .9rem; margin: 1rem 0 0; }
.dictie-comparatie .eticheta { margin: 0; }
.dictie-comparatie-cifra { font-family: var(--mono); font-size: .95rem;
color: var(--text-tare); font-variant-numeric: tabular-nums; }
/* ── Antrenamentul de azi ── */
.dictie-plan-titlu { font-size: 1.25rem; margin: .3rem 0 .5rem; color: var(--alb); }
.dictie-plan-cifre { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 0; }
.dictie-pastila { flex: 1 1 7rem; background: var(--card-adanc);
border: 1px solid var(--ch-card); border-radius: var(--raza-chip);
padding: .6rem .8rem; text-align: left; }
.dictie-pastila .eticheta { margin: 0 0 .2rem; }
.dictie-pastila b { font-family: var(--mono); font-size: 1rem; color: var(--alb);
font-variant-numeric: tabular-nums; }
.dictie-lista { list-style: none; counter-reset: pas; padding: 0; margin: 1.4rem 0; }
.dictie-lista li { counter-increment: pas; display: grid;
grid-template-columns: 1.7rem 11rem 1fr; gap: .6rem;
align-items: baseline; padding: .6rem 0;
border-top: 1px solid var(--ch-fin); }
.dictie-lista li::before { content: counter(pas); font-family: var(--mono);
font-size: .78rem; color: var(--palid); }
.dictie-lista-nivel { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--sters); }
.dictie-lista-text { color: var(--text-tare); }
/* Proba zilei — singurul pas pe care obiectivul chiar se măsoară.
Culoarea nu e singurul semnal: eticheta scrie „proba zilei". */
.dictie-lista li.dictie-proba { border-left: 3px solid var(--violet);
padding-left: .7rem; margin-left: -.7rem; }
.dictie-lista li.dictie-proba .dictie-lista-nivel { color: var(--lavanda); }
/* ── Sunete și niveluri ── */
.dictie-sunete { justify-content: flex-start; }
.dictie-sunet-semn { font-family: var(--mono); font-size: 1.05rem; color: var(--alb);
margin-right: .5rem; }
.dictie-niveluri { justify-content: flex-start; margin: 1.2rem 0 .4rem; }
.dictie-itemi { margin: 1.2rem 0 0; }
.dictie-nivel-lista { list-style: none; padding: 0; margin: .6rem 0 1.4rem; }
.dictie-nivel-lista li { display: grid; grid-template-columns: 3.5rem 1fr auto;
gap: .6rem; align-items: baseline; padding: .55rem 0;
border-top: 1px solid var(--ch-fin); }
.dictie-nivel-lista .eticheta { margin: 0; }
/* ── Textul propriu ── */
.dictie-zona { width: 100%; margin: .8rem 0 0; font-family: var(--sans);
font-size: .95rem; line-height: 1.6; resize: vertical; }
.dictie-lista-zone { list-style: none; padding: 0; margin: 1rem 0; }
.dictie-lista-zone li { display: flex; flex-wrap: wrap; align-items: baseline;
gap: .5rem .9rem; padding: .5rem 0;
border-top: 1px solid var(--ch-fin); }
.dictie-lista-zone .eticheta { margin: 0; }
.dictie-zona-cuvant { color: var(--alb); font-size: .95rem; }
/* ── Camera ──
Chenarul e o ȚINTĂ, nu o ramă: omul își aduce gura în el, iar măsurătoarea
se face fix pe dreptunghiul ăla. De aceea geometria lui de aici trebuie să
rămână identică cu CHENAR din dictie.js — dacă una se mută, cealaltă
măsoară altceva decât se vede. */
.dictie-camera { position: relative; margin: 1rem auto 0; max-width: 30rem;
border-radius: var(--raza-card); overflow: hidden;
background: var(--card-adanc); border: 1px solid var(--ch-card); }
.dictie-video { display: block; width: 100%; height: auto;
transform: scaleX(-1); }
.dictie-chenar { position: absolute; left: 33%; width: 34%;
top: 42%; height: 30%;
border: 2px solid var(--cyan); border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(4,6,14,.45); pointer-events: none; }
.dictie-vocale-masurate { margin: 1.2rem 0 0; }
.dictie-vocala-rand { display: grid; grid-template-columns: 2.6rem 1fr;
gap: .7rem; align-items: center; margin: .4rem 0; }
.dictie-vocala-semn { font-family: var(--mono); font-size: 1rem; color: var(--alb); }
/* Ce s-a miscat dupa o sesiune. Semnul e informatie: „+7" si „−7" sunt doua
vesti diferite, iar culoarea singura n-ar spune care — de asta se
refoloseste .suflu-delta, care are si semnul, si culoarea. */
.dictie-miscari li { align-items: center; }
.dictie-miscari .suflu-delta { font-size: .78rem; }
.dictie-maine { margin: 1.6rem 0 0; padding: 1.1rem 1.2rem;
border: 1px solid var(--ch-violet); border-radius: var(--raza-card);
background: linear-gradient(180deg, rgba(138,43,226,.12), transparent); }
.dictie-maine .eticheta { margin: 0 0 .35rem; }
.dictie-maine .rezultat { margin: 0; }
.dictie-gol { text-align: left; }
.dictie-jos { margin: 1.6rem 0 0; }
@media (max-width: 640px) {
.dictie-bara { grid-template-columns: 6.6rem 1fr 2.4rem; gap: .5rem; }
.dictie-bara-nume { font-size: .74rem; }
.dictie-lista li { grid-template-columns: 1.4rem 1fr;
grid-template-areas: "nr nivel" "nr text"; }
.dictie-lista li::before { grid-area: nr; }
.dictie-lista-nivel { grid-area: nivel; }
.dictie-lista-text { grid-area: text; }
.dictie-nivel-lista li { grid-template-columns: 3rem 1fr; }
.dictie-nivel-lista .eticheta { grid-column: 2; }
}
/* ── Capul paginii de instrument ──
Insigna spune dacă se va cere microfonul ÎNAINTE să se ceară. Legătura de
întoarcere stă sus, nu după FAQ: cine se răzgândește se răzgândește repede. */
.tool-cap { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
margin: 0 0 .9rem; }
.tool-cap-gratuit { font-size: .74rem; color: var(--sters); }
.tool-cap-inapoi { margin-left: auto; font-size: .78rem; color: var(--sters); }
.tool-cap-inapoi:hover { color: var(--lavanda); }
/* ── Fișa de sub instrument: trei carduri scurte ──
Planșa le pune ca o coloană în dreapta instrumentului; aici sunt un rând
dedesubt, fiindcă învelișul e mai îngust decât cel de 1440 al planșei. */
.fise-tool { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;
margin: 2.2rem 0 0; }
.fisa { background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); padding: 1.2rem 1.3rem 1.3rem;
display: flex; flex-direction: column; }
.fisa .eticheta { margin: 0 0 .7rem; }
.fisa ul { list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .5rem; }
.fisa li { position: relative; padding-left: 1rem; margin: 0;
font-size: .84rem; line-height: 1.5; color: var(--text); }
.fisa li::before { content: ""; position: absolute; left: 0; top: .55em;
width: 4px; height: 4px; border-radius: 50%;
background: var(--violet-moale); }
.fisa p { font-size: .84rem; line-height: 1.6; margin: 0 0 1rem;
color: var(--text) !important; }
.fisa-pas { border-color: var(--ch-violet);
background: linear-gradient(180deg, rgba(138,43,226,.12), var(--card)); }
.fisa-pas .buton { margin-top: auto; align-self: flex-start; }
.fisa-pas h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .45rem; letter-spacing: -.01em; }
.fisa-pas > p { margin: 0 0 .9rem; }
.fisa-pas-alt { font-size: .78rem; color: var(--sters); margin: .8rem 0 0 !important; }
.fisa-pas-alt a { color: var(--lavanda); text-decoration: underline; text-underline-offset: 3px; }
/* După câteva minute în instrument (canto.js), cardul se aprinde și își spune
motivul: omul care a stat mult aici are nevoie de o ușă, nu de încă o cifră. */
.fisa-pas.este-tarziu { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(255,45,149,.18); }
/* ── Caseta „Fișa ta pe email", sub fișă (18.09) ──
Aceeași hârtie ca fișa, un singur rând de formular. `hidden` până când
abonare.js confirmă că are ce trimite (sau că e voie s-o arate). */
.caseta-email { margin: 1.125rem 0 0; background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); padding: 1.2rem 1.3rem 1.3rem; }
.caseta-email[hidden] { display: none; }
.caseta-email h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .45rem; letter-spacing: -.01em; }
.caseta-email > p { font-size: .84rem; line-height: 1.6; margin: 0 0 1rem; color: var(--text); }
.caseta-email .eticheta { margin: 0 0 .7rem; }
.caseta-email-form { display: grid; gap: .2rem; max-width: 34rem; }
.caseta-email-form .ch-camp input { width: 100%; }
.caseta-email-form .buton { justify-self: start; }
.caseta-email-form .ch-stare { margin-top: .5rem; }
.caseta-email-form.trimis .ch-camp, .caseta-email-form.trimis .ch-acord, .caseta-email-form.trimis .buton { display: none; }
.fisa-pas-tarziu { display: none; font-size: .78rem; color: var(--magenta); margin: 0 0 .5rem !important; }
.fisa-pas.este-tarziu .fisa-pas-tarziu { display: block; }
/* ── Surorile instrumentului (suflu ⇄ frază, ison ⇄ intonație ⇄ intervale…) ──
Aceleași file ca regimurile din instrument, doar că sunt legături, nu butoane. */
.tool-grup { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .9rem; margin: 0 0 1.1rem; }
.tool-grup .eticheta { margin: 0; }
.tool-grup .file { margin: 0; }
.tool-grup .fila { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.tool-grup .fila small { font-size: .62rem; font-weight: 500; letter-spacing: .08em;
text-transform: uppercase; color: var(--sters); }
.tool-grup .fila.activa small { color: rgba(255,255,255,.8); }
/* Cifra surorii, din jurnalul de pe dispozitiv (tools.js): mono, mică, fără majuscule. */
.tool-grup .fila small.fila-cifra { font-family: var(--mono); font-size: .68rem; letter-spacing: .02em;
text-transform: none; color: var(--text); }
.tool-calibrare { margin: 0 0 1.1rem; }
.tool-calibrare:empty { margin: 0; }
/* Varianta care ține text de conținut, nu liste scurte: pe indexul
instrumentelor cele trei secțiuni ale paginii devin cardurile din planșă.
Iese din coloana de 42rem, ca trepte le de pe /verdict/. */
.fise-text { width: min(calc(var(--lat) - 2.5rem), calc(100vw - 3.5rem)); }
.fise-text h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .7rem;
letter-spacing: -.01em; }
.fise-text p { font-size: .86rem; margin: 0 0 .8rem; }
.fise-text p:last-child { margin-bottom: 0; }
.fise-text .buton { margin-top: .4rem; }
/* Pe /resurse/ secțiunile sunt șapte, nu trei — trei coloane ar face carduri
înalte de un rând. Se lasă grila să decidă câte încap. */
.fise-multe { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (max-width: 900px) {
.fise-tool { grid-template-columns: 1fr; }
}
/* ── Indexul instrumentelor ── */
.tool-intro { max-width: 38rem; }
.grila-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;
margin: 1.9rem 0 0; }
.card-tool { background: var(--card); border: 1px solid rgba(255,255,255,.07);
border-radius: var(--raza-card); padding: 1.5rem 1.5rem 1.6rem;
text-decoration: none; display: block; color: var(--text);
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.card-tool:hover { border-color: var(--ch-violet); background: #151C2E;
transform: translateY(-2px); }
.card-tool h2 { font-size: 1.05rem; margin: .35rem 0 .5rem; font-weight: 600;
letter-spacing: -.01em; }
.card-tool p { font-size: .82rem; color: var(--text) !important; margin: 0; line-height: 1.6; }
/* Capul cardului: insigna de microfon la stânga, „gratuit" împins la dreapta.
Insigna e componenta care există deja (.insigna / .insigna-mic) — semnalul
cyan se stinsese fiindcă indexul folosea .eticheta, care e gri prin definiție.
Culoarea nu e singurul semnal: textul spune tot „cu microfon". */
.card-tool-cap { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .75rem; }
/* Grupul (Respirație, Auz, Pian, Ritm) — a doua etichetă din cap, în gri: spune
cu cine stă instrumentul, nu ce cere. Verbele despart grila în două. */
.card-tool-grup { font-size: .62rem; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--sters); }
.tool-verb { margin: 2.2rem 0 0; }
.tool-verb .eticheta { margin: 0 0 .25rem; color: var(--lavanda); }
.tool-verb-sub { margin: 0; font-size: .9rem; color: var(--text); max-width: 38rem; }
.tool-verb + .grila-tools { margin-top: 1.1rem; }
.card-tool-gratuit { margin-left: auto; font-size: .72rem; color: var(--sters); }
/* Cardul întreg e legătura, deci ăsta nu e un în alt — e afișajul
acțiunii, magenta, ca în planșă. */
.card-tool-actiune { display: block; margin-top: .9rem; font-size: .75rem;
font-weight: 600; color: var(--magenta); }
.card-tool:hover .card-tool-actiune { color: var(--lavanda); }
/* Banda de pe prima pagină: aceleași carduri, doar titluri — pe homepage
descrierile ar transforma o bandă într-un al doilea index. */
.banda-tools { margin: 3.5rem 0; padding: 3rem 0 3.2rem;
background: linear-gradient(180deg, rgba(138,43,226,.07), transparent);
border-top: 1px solid var(--ch-fin);
border-bottom: 1px solid var(--ch-fin); }
.banda-tools h2 { margin: .3rem 0 1.5rem; }
.banda-tools .card-tool h3 { font-size: .95rem; margin: .3rem 0 0;
font-weight: 600; color: var(--alb); }
.banda-tools .mic-explicatie { margin: 1.4rem 0 0; }
/* 16.09: banda are trei instrumente + cardul „toate”. Patru coloane pe
desktop ca să nu rămână unul orfan pe rândul al doilea; pe tabletă 2×2,
pe telefon o coloană — regulile generale de mai jos le acoperă. */
@media (min-width: 901px) { .banda-tools .grila-tools { grid-template-columns: repeat(4, 1fr); } }
.card-tool-toate { border-style: dashed; border-color: var(--ch-violet);
background: transparent; display: flex; flex-direction: column;
justify-content: center; }
.card-tool-toate .insigna { color: var(--lavanda); }
.banda-tools .card-tool-toate h3 { color: var(--lavanda); }
.card-tool-toate:hover { background: rgba(138,43,226,.10); }
/* 18.09: cardul testului „Ce tip de voce ai?", pe /tools/, înaintea grilei.
Gradientul de brand, ca un buton întins — e intrarea virală, nu un instrument. */
.card-tool-test { display: block; margin: 0 0 1.6rem; background: var(--grad-diag);
border-color: transparent; color: #fff; text-decoration: none; }
.card-tool-test .insigna { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); }
.card-tool-test h2 { color: #fff; }
.card-tool-test p { color: rgba(255,255,255,.88); margin: 0; }
.card-tool-test:hover { filter: brightness(1.08); color: #fff; }
.card-treizeci { margin: 1.4rem 0 0; }
.card-treizeci h3 { color: #fff; font-size: 1.05rem; margin: .35rem 0 .4rem; }
/* Rândul chestionarului, sub butoanele din hero: text secundar, legătura
subliniată — nu doar colorată, ca să treacă de 3:1 față de textul din jur. */
.erou-chestionar { font-size: .9rem; color: var(--text); }
.erou-chestionar a { color: var(--lavanda); text-decoration: underline; text-underline-offset: 3px; }
/* ═══════════════════════════════════════════════════════════
CHESTIONARUL — arbore de decizie, nu chatbot
Un singur lucru pe ecran, butoane mari.
═══════════════════════════════════════════════════════════ */
.chestionar { border: 1px solid var(--ch-card); background: var(--card);
border-radius: var(--raza-mare);
padding: 1.8rem 1.7rem 1.5rem; margin: 0 0 2.5rem; }
.ch-sus { margin-bottom: 1.7rem; }
.ch-bara { height: 4px; background: rgba(255,255,255,.08); border-radius: var(--raza-pil);
overflow: hidden; }
.ch-bara span { display: block; height: 100%; background: var(--grad);
width: 0; transition: width .25s; }
.ch-titlu { font-size: clamp(1.35rem, 4vw, 1.75rem); margin: 0 0 .7rem;
font-weight: 700; letter-spacing: -.02em; color: var(--alb); }
.ch-ajutor { font-size: .86rem; color: var(--sters); margin: 0 0 1.3rem; }
.ch-intro { font-size: .98rem; margin: 0 0 1.7rem; }
.ch-optiuni { display: flex; flex-direction: column; gap: .6rem; }
.ch-optiune { text-align: left; background: var(--card-adanc);
border: 1px solid var(--ch-chip); border-radius: 12px;
padding: 1rem 1.15rem; font: 500 .95rem/1.4 var(--sans); color: var(--text-tare);
cursor: pointer; min-height: 56px; transition: all 160ms ease; }
.ch-optiune:hover { border-color: var(--ch-violet); background: #10162A; color: var(--alb); }
.ch-optiune.aleasa { border-color: var(--violet); background: rgba(138,43,226,.14);
color: var(--alb); }
/* Selecția multiplă (genurile): douăzeci și ceva de opțiuni scurte, pe câte
coloane încap, butoane mai mici; bifa aleasă poartă și un semn text, nu doar
culoarea. „Mai departe" vine după listă, ca buton obișnuit. */
.ch-optiuni-multe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ch-optiuni-multe .ch-optiune { min-height: 48px; padding: .7rem .9rem; font-size: .88rem; }
.ch-optiuni-multe .ch-optiune.aleasa::before { content: "✓ "; color: var(--lavanda); }
.ch-ecran > .buton { margin-top: 1.1rem; }
.ch-inapoi { background: none; border: 0; padding: .8rem 0 0; margin-top: 1.2rem;
font: 400 .85rem var(--sans); color: var(--sters); cursor: pointer;
min-height: 44px; }
.ch-inapoi:hover { color: var(--lavanda); }
.ch-exercitiu { border: 1px solid var(--ch-violet); background: rgba(138,43,226,.1);
border-radius: var(--raza-card);
padding: 1.4rem 1.4rem 1.5rem; margin: 1.7rem 0; }
.ch-exercitiu h3 { margin: .2rem 0 .6rem; font-size: 1.05rem; }
.eticheta-mica { color: var(--lavanda); margin: 0 0 .35rem; }
.ch-apoi { margin: .9rem 0 0; font-size: .86rem; }
.ch-lecturi { margin: .6rem 0 1.7rem; }
.ch-indemn { border-top: 1px solid var(--ch-fin); padding-top: 1.5rem; margin: 1.9rem 0; }
.ch-formular { border-top: 1px solid var(--ch-fin); padding-top: 1.5rem; margin-top: 1.9rem; }
.ch-formular h3 { margin-top: 0; }
.ch-camp { display: block; margin: 0 0 1.1rem; }
.ch-camp span { display: block; font-size: .66rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--sters); margin-bottom: .4rem; }
.ch-camp input { max-width: 24rem; min-height: 48px; }
/* Capcana pentru roboți: scoasă din pagină, nu ascunsă cu display:none —
unii roboți sar peste câmpurile ascunse chiar așa. */
.ch-capcana { position: absolute; left: -9999px; width: 1px; height: 1px;
opacity: 0; pointer-events: none; }
.ch-acord { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.3rem;
font-size: .86rem; color: var(--text); cursor: pointer; }
.ch-acord input { width: 20px; height: 20px; margin-top: .15rem; flex: 0 0 auto;
accent-color: var(--violet); }
.ch-stare { min-height: 1.5em; margin: .9rem 0 0; font-size: .9rem; }
.ch-stare.bine { color: var(--succes); }
.ch-stare.rau { color: var(--pericol); }
.ch-reia { display: block; margin: 2rem 0 0; background: none; border: 0; padding: .6rem 0;
font: 400 .82rem var(--sans); color: var(--sters); cursor: pointer;
text-decoration: underline; min-height: 44px; }
[hidden] { display: none !important; }
.doar-mobil { display: none; }
.stare-ok { color: var(--succes); }
.stare-rau { color: var(--pericol); }
/* ═══════════ VOCALIZE ═══════════
Aceleași clase ca în tool-ul de întindere. Varianta „lumina" nu mai are
ce lumina — rămâne definită pentru compatibilitate cu marcajul existent,
cu valori de temă întunecată. */
.rigla-lumina .rigla-fundal { background: rgba(255,255,255,.07); }
.rigla-lumina .rigla-segment { background: var(--grad); }
.rigla-lumina .rigla-capete { color: var(--sters); }
.tipar-vizual { display: flex; align-items: flex-end; gap: 4px; height: 62px;
margin: 1.2rem 0 .3rem; }
.tipar-bara { flex: 1; max-width: 22px; border-radius: 2px;
background: linear-gradient(180deg, var(--cyan), var(--violet)); }
.exercitiu-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 1.1rem; margin: 1.3rem 0; padding: 1.2rem 1.3rem;
background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); }
.exercitiu-info dt { font-size: .64rem; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--sters); margin: 0 0 .25rem; }
.exercitiu-info dd { margin: 0; font-weight: 600; color: var(--alb); }
/* Tripletul: „cum știi că e corect" vs. „greșeala frecventă" — semnalul nu
e doar culoarea barei din stânga, e și eticheta. Daltonism și tipar
alb-negru citesc corect oricum. */
.tripletul { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem;
margin: 1.7rem 0; }
.tripletul-item { background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); padding: 1.2rem 1.3rem;
border-left: 3px solid transparent; }
.tripletul-ok { border-left-color: var(--succes); }
.tripletul-nu { border-left-color: var(--pericol); }
.tripletul-item p:last-child { margin: 0; }
.vocalize-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.2rem;
margin: 0 0 1.9rem; }
.vocalize-filtre label { display: flex; flex-direction: column; gap: .4rem;
font-size: .64rem; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--sters); }
.vocalize-filtre select { min-height: 44px; width: auto; font-size: .88rem; }
.vocalize-reseteaza { align-self: center; font-size: .82rem; color: var(--sters); }
/* ═══════════ UTILE ═══════════ */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mic { font-size: .82rem; color: var(--sters); }
.centrat { text-align: center; }
.buton {
display: inline-block; background: var(--grad); color: #fff !important;
padding: .85rem 1.6rem; border-radius: 12px; border: 0;
text-decoration: none !important; font-size: .92rem; font-weight: 600;
min-height: 44px; line-height: 1.6; cursor: pointer;
box-shadow: 0 12px 40px rgba(138,43,226,.3);
transition: filter 150ms ease-out, transform 150ms ease-out;
}
.buton:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff !important; }
/* 18.09: butonul de WhatsApp (scurtcodul [whatsapp], pe /contact/). Verdele
e al aplicației, singurul loc în care apare în afara barei de jos. */
.buton-whatsapp { display: inline-flex; align-items: center; gap: .55rem;
background: #25D366; box-shadow: 0 12px 40px rgba(37,211,102,.25); }
.whatsapp-caseta small { display: block; margin-top: .6rem; color: var(--sters); }
.buton-secundar { background: transparent; color: var(--alb) !important;
border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.buton-secundar:hover { border-color: var(--ch-violet-tare); filter: none;
background: rgba(138,43,226,.1); }
/* Pastila de stare din capul paginilor — punct cyan + text lavandă. */
.pastila { display: inline-flex; align-items: center; gap: .55rem;
padding: .45rem .9rem; border-radius: var(--raza-pil);
border: 1px solid rgba(138,43,226,.45); background: rgba(138,43,226,.12);
font-size: .75rem; color: var(--lavanda); }
.pastila::before { content: ""; width: 6px; height: 6px; border-radius: var(--raza-pil);
background: var(--cyan); flex: 0 0 auto; }
img { max-width: 100%; height: auto; border-radius: 12px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }
/* Locurile de fotografie care încă nu au poză. Vizibile intenționat.
O SINGURĂ componentă: slotul din hero (`.portret-gol`) e doar un modificator
de poziționare peste ea, nu o a doua variantă a aceluiași lucru. */
.loc-foto { display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: .7rem; min-height: 220px;
border: 1px solid var(--ch-violet); border-radius: var(--raza-card);
background: linear-gradient(160deg, #1A1233 0%, #0A0D1C 55%, #0B1A2E 100%);
font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--sters); text-align: center; padding: 1.5rem; }
.loc-foto span { display: block; max-width: 18rem; }
.portret-static { display: block; width: 100%; max-width: 24.5rem; border-radius: var(--raza-card);
border: 1px solid var(--ch-violet); }
/* Specializările, ca pastile — pe /despre/. */
.specializari { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0; }
/* ═══════════ BANDA DE CIFRE ═══════════
Ecranul 01 al planșei. Cifra e mare fiindcă e argumentul; eticheta e mică
fiindcă doar o numește. Fără card, fără chenar, fără iconuri: o bandă de
cifre încadrată arată a reclamă, iar poziționarea site-ului e opusul.
Se randează DOAR cu date reale — vezi mu/canto-dovezi.php. */
.banda-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 1.6rem 1rem; margin: 2.2rem 0 2.6rem;
padding: 1.6rem 0; border-top: 1px solid var(--ch-fin);
border-bottom: 1px solid var(--ch-fin); }
.dovada { display: flex; flex-direction: column; gap: .15rem; }
/* Gradientul cifrei porneste din LAVANDA, nu din violet.
Măsurat, nu ales din ochi: pe --baza, violetul #8A2BE2 dă 3,40:1, iar cifra
e chiar informația, deci pragul de 4,5:1 se aplică — ar fi ilizibil exact
primul caracter al fiecărei cifre. Lavanda dă 9,94 și magenta 5,84, deci
gradientul trece pe toată lungimea lui. Violetul rămâne unde e corect: sub
text alb, ca fundal de insignă (5,96:1). */
.dovada-cifra { font-family: var(--sans); font-weight: 700; font-size: 2.3rem;
line-height: 1.05; letter-spacing: -.03em;
background: linear-gradient(90deg, var(--lavanda), var(--magenta));
-webkit-background-clip: text;
background-clip: text; color: transparent; }
.dovada-eticheta { font-size: .82rem; color: var(--text-tare); }
/* Nota e proveniența („din 2015", „pe Google"). O cifră fără proveniență e o
afirmație; cu proveniență e o măsurătoare. */
.dovada-nota { font-family: var(--mono); font-size: .68rem; color: var(--sters); }
/* ═══════════ RECENZII ═══════════ */
.recenzii { margin: 2.6rem 0; }
.recenzie { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.recenzie-text { margin: 0; padding: 0; border: 0; color: var(--text-tare);
font-size: .95rem; line-height: 1.65; }
.recenzie-text p { margin: 0 0 .7rem; }
.recenzie-text p:last-child { margin-bottom: 0; }
/* Ghilimeaua e tipografică și decorativă, deci nu se citește cu voce tare. */
.recenzie-text::before { content: "\201D"; display: block; font-family: var(--sans);
font-weight: 700; font-size: 2.4rem; line-height: .6;
color: var(--violet-moale); margin-bottom: .4rem; }
.recenzie-semn { display: flex; flex-direction: column; gap: .1rem;
margin-top: auto; padding-top: .6rem;
border-top: 1px solid var(--ch-fin); }
.recenzie-nume { font-weight: 600; font-size: .86rem; color: var(--alb); }
.recenzie-context { font-size: .7rem; color: var(--sters); }
/* ═══════════ RUTINA DE ZECE MINUTE ═══════════
Numerotarea vine din , nu dintr-un contor CSS: ordinea pașilor e
informație, deci trebuie să existe și fără foaia de stil. */
.rutina { margin: 2.6rem 0; }
.rutina-pasi { list-style: none; margin: 1.6rem 0 1.4rem; padding: 0;
counter-reset: pas-rutina; display: grid; gap: .8rem; }
.rutina-pas { counter-increment: pas-rutina; position: relative;
background: var(--card); border: 1px solid var(--ch-card);
border-radius: var(--raza-card); padding: 1.1rem 1.2rem 1.1rem 3.4rem; }
.rutina-pas::before { content: counter(pas-rutina); position: absolute;
left: 1.1rem; top: 1.15rem; width: 1.6rem; height: 1.6rem;
display: flex; align-items: center; justify-content: center;
border-radius: var(--raza-pil); background: var(--grad);
font-family: var(--mono); font-size: .72rem; font-weight: 600;
color: #fff; }
.rutina-cap { display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: .4rem 1rem; }
.rutina-grupa { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
font-weight: 600; color: var(--violet-moale); }
.rutina-minute { font-size: .74rem; color: var(--sters);
font-variant-numeric: tabular-nums; }
.rutina-titlu { margin: .25rem 0 .35rem; font-size: 1rem; line-height: 1.4; }
.rutina-titlu a { color: var(--alb); text-decoration: none;
border-bottom: 1px solid transparent; }
.rutina-titlu a:hover { border-bottom-color: var(--magenta); }
.rutina-fapte { margin: 0 0 .5rem; font-size: .74rem; color: var(--sters); }
.rutina-corect { margin: 0; font-size: .84rem; color: var(--text); }
/* Verdele e „ținta / corect" peste tot pe site. Aici marchează exact același
lucru: semnul după care știi că ai făcut bine. */
.rutina-corect-et { display: block; font-size: .64rem; letter-spacing: .18em;
text-transform: uppercase; font-weight: 600;
color: var(--succes); margin-bottom: .1rem; }
.rutina-jos { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* ═══════════ CASETA DE ABONARE ═══════════ */
.caseta-abonare { margin: 2.6rem 0; padding: 1.8rem;
background: var(--card-adanc); border: 1px solid var(--ch-violet);
border-radius: var(--raza-card); }
.abonare-promisiune { max-width: var(--lat-text); }
.abonare-form { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .8rem; }
.abonare-form input {
flex: 1 1 16rem; background: var(--card); color: var(--text-tare);
border: 1px solid var(--ch-chip); border-radius: var(--raza-buton);
padding: .7rem 1rem; font: 400 .92rem var(--sans); min-height: 44px;
}
.abonare-form input::placeholder { color: var(--sters); }
.abonare-form input:focus { border-color: var(--ch-violet-tare); outline: none;
background: #151C2E; }
.abonare-fin { margin: 0; font-size: .74rem; color: var(--sters); }
/* ═══════════ MOBIL — traficul vine din TikTok, deci de pe telefon ═══════════ */
@media (max-width: 1100px) {
.grila-3, .grila-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.subsol-grila { grid-template-columns: repeat(2, 1fr); }
/* Meniul pliant a plecat în assets/antet.css, împreună cu restul antetului. */
}
@media (max-width: 720px) {
.grila-3, .grila-2, .grila-tools { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.pagina { padding: 2rem 0 3rem; }
.subsol-grila { grid-template-columns: 1fr; }
/* Instrumentele se folosesc cu o mână, în picioare, ținând telefonul
și cântând în el. Butonul mare prinde toată lățimea. */
.grup-doi { grid-template-columns: 1fr; }
.scena { padding: 1.4rem 1rem 1.5rem; margin-left: -1.25rem; margin-right: -1.25rem;
border-radius: 0; border-left: 0; border-right: 0; }
.tool .buton-mare { width: 100%; min-width: 0; }
.rand { gap: .45rem; }
.tool .secundar { flex: 1 1 auto; }
.claviatura { height: 130px; }
.claviatura-alegere { height: 92px; }
.claviatura-cadru { margin-left: -1.25rem; margin-right: -1.25rem; }
.doar-mobil { display: block; }
.harta { height: 60px; }
.file { gap: .3rem; }
.fila { flex: 1 1 auto; padding: .6rem .5rem; font-size: .78rem; }
.chestionar { margin-left: -1.25rem; margin-right: -1.25rem; border-radius: 0;
border-left: 0; border-right: 0; padding: 1.4rem 1.25rem; }
.tripletul { grid-template-columns: 1fr; }
.vocalize-filtre { flex-direction: column; align-items: stretch; }
.vocalize-filtre select { width: 100%; }
.semnatura { font-size: 1.45rem; }
}
/* Cine preferă mai puțină mișcare o primește. */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
html { scroll-behavior: auto; }
.card:hover, .card-tool:hover, .buton:hover,
.tool .buton-mare:hover { transform: none; }
/* .buton-fix:hover e în assets/antet.css, lângă regula pe care o anulează. */
}
/* La tipar, întunericul devine hârtie: nimeni nu tipărește un fundal negru. */
@media print {
/* .antet, .buton-fix și .comuta-meniu sunt ascunse la tipar din antet.css. */
.subsol, .buton, .banda-tools { display: none !important; }
body { background: #fff; color: #14171C; }
body::before { display: none; }
h1, h2, h3, h4, strong { color: #000; }
.card, .card-tool, .scena, .chestionar { border: 1px solid #ccc; background: #fff; }
.semnatura { color: #000; background: none; -webkit-text-fill-color: #000; }
}
/* 23.09: mențiunea autorului eșantioanelor de pian (CC-BY 3.0), sub instrument. */
.credit-pian { margin: 1.25rem 0 0; font-size: .75rem; color: var(--text); opacity: .75; }
.credit-pian a { color: inherit; }
/* 24.09: semnul că lucrează detectorul pentru camere zgomotoase (SwiftF0). */
.mic-motor { margin-left: .5rem; font-size: .7rem; letter-spacing: .04em; opacity: .7; }