@charset "UTF-8"; /* ========================================================================= Sonor — Darbuka ------------------------------------------------------------------------ Secțiunea are identitatea ei: ÎNCHIS · AURIU · ORIENTAL · CINEMATIC. Restul sonor.ro rămâne cum e — foaia asta se încarcă NUMAI de cele cinci pagini din /darbuka/, deci `:root`-ul de aici nu ajunge nicăieri altundeva. Asta e și tot izolarea de care e nevoie: nimic din site.css nu se atinge. De ce nu mai urmează tema site-ului. Până acum secțiunea împrumuta tokenii site-ului și se făcea deschisă sau închisă odată cu el. Acum e o platformă în platformă: cine intră la darbuka trebuie să simtă că a intrat altundeva, iar „altundeva” înseamnă o sală întunecată cu o lumină caldă pe instrument. Pe alb, tot ce urmează — fumul, aurul, fotografia scufundată în fundal — n-ar avea unde să existe. Deci tema e una singură, și e închisă. Cheia `sonor-theme` din rămâne citită și pusă pe : nu strică nimic aici și trebuie să rămână acolo pentru ziua în care secțiunea intră în meniul site-ului. Un singur strat de tokeni, fără variante. Se schimbă o valoare aici și se schimbă toată secțiunea — inclusiv tot ce desenează JS-ul, fiindcă și `darbuka-curs.css` trăiește din aceiași tokeni și nu redefinește niciunul. ========================================================================= */ /* ================================================================== fontul === Cormorant Garamond, antiqua titlurilor. Ține la noi, în `assets/fonts/`, nu se cere de la Google: · merge și când pagina e deschisă prin dublu-clic, fără rețea — aceeași grijă din care sunetele tobei stau scrise în cod, nu citite de pe disc; · nu trimite adresa niciunui vizitator la un server străin; · nu adaugă încă o legătură care poate să cadă. Două fișiere, 70 KB la un loc, și numai pentru literele care chiar se folosesc: `latin` și `latin-ext`. Al doilea nu e de lux — în el stau ă, î, ș și ț, fără de care titlurile secțiunii ar fi scrise pe jumătate cu alt font. Fișierul poartă axa de grosime, deci un singur fișier per subset acoperă tot intervalul cerut mai jos. `swap`: până se încarcă, titlul se scrie cu antiqua sistemului și se vede de la prima zugrăvire. Nimic nu clipește gol. ========================================================================= */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- aurul, culoarea secțiunii ------------------------------------------ Trei trepte, fiindcă aurul singur e o pată: `deep` pentru chenare și umbre, `gold` pentru scris și pentru tot ce e important, `bright` pentru ce e chiar acum sub deget. Degradeul e o rază de lumină care trece peste metal — de la bronz, prin lumină, înapoi în bronz. */ --gold-deep: #b8863b; --gold: #d9b876; --gold-bright: #f2d89a; --gold-soft: #1c1608; --gold-line: rgb(200 165 96 / .32); /* Cerneala care se scrie PESTE aur plin. Aurul e cea mai deschisă suprafață din secțiune, deci singurul text care se citește pe el e unul aproape negru — nu albul, care ar da 1,4:1. */ --ink-on-gold: #171004; /* Jetonul de bronz: numărul secțiunii, numărul lecției. Bătut, nu desenat — de aceea e un degrade pieziș, cu lumina în colțul de sus. Stă aici, nu în fiecare regulă, fiindcă îl folosesc amândouă foile. */ --medalion: linear-gradient(145deg, #37290f, #140f06); --brand-blue: #6f9bff; --brand-purple: #9b7dff; --brand-orange: #e0883c; --brand-navy: #070a16; --brand-gradient: linear-gradient(100deg, var(--gold-deep), var(--gold-bright) 45%, #c9a05a); /* Numele a rămas: e cerneala accentului cald, folosită de sprâncene, de fila curentă și de chenarele la hover. Aici accentul cald e aurul. */ --brand-orange-ink: var(--gold-bright); /* --- fundalurile --------------------------------------------------------- Aproape negru, dar cu albastru în el, nu gri: negrul curat scoate aurul în evidență prea tare și face pagina să pară un afiș. */ --bg: #070a16; /* Suprafața dinăuntrul unui cartonaș: șanțuri de bară, cutii de cod, jetoane. Pe întuneric, „adâncit” se face cu lumină, nu cu umbră — de aceea e cu o idee mai deschisă decât fundalul, nu mai închisă. Rămâne OPACĂ dinadins: peste ea stau capacul de la „memorează și cântă” (care chiar trebuie să ascundă grila de dedesubt) și fundurile de bară. */ --bg-sunken: #0a1020; --bg-raised: #0c1226; /* Suprafața cartonașelor. Semi-străvezie dinadins: sub ea trec fumul și lumina din fundal, iar cartonașul pare așezat în cameră, nu lipit pe ea. */ --bg-card: rgb(12 18 38 / .82); --text: #f4ecdc; /* alb cald, nu alb de hârtie */ --text-muted: #a89b85; /* Nu mai stins de atât: pe el se scriu lacătele nivelurilor închise și rândurile nebifate din progres, care sunt text de citit, nu podoabă. Ține 5:1 pe fundalul cartonașelor. */ --text-faint: #8a7f6c; /* Chenarele sunt aur străveziu, nu o culoare plină: așa prind tonul a ce e sub ele și rămân o linie de lumină, nu o ramă desenată. */ --line: rgb(200 165 96 / .18); --line-strong: rgb(210 175 105 / .34); --accent: #8fb4ff; --accent-soft: #101a38; --ok: #5ed3a6; --ok-soft: #0b2a22; --warn: #edc274; --warn-soft: #241c0c; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / .45), 0 6px 20px rgb(0 0 0 / .32); --shadow-md: 0 4px 16px rgb(0 0 0 / .35), 0 20px 60px rgb(0 0 0 / .42); /* Lumina aurie de la hover. Una singură, ca să nu se strecoare pe furiș zece străluciri diferite prin foaie. */ --glow-gold: 0 0 0 1px rgb(217 184 118 / .22), 0 0 24px rgb(217 184 118 / .18); --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --wrap: 1180px; /* Titlurile au font propriu — o antiqua cu personalitate, care dă tonul „premium” fără nicio podoabă în plus. Textul rămâne pe fontul sistemului: e cel mai lizibil lucru de pe orice ecran și nu costă nicio descărcare. Dacă antiqua nu se încarcă (fără rețea, deschis prin dublu-clic), cade pe Georgia și pagina arată aproape la fel. */ --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* --- culorile loviturilor ------------------------------------------------ Fiecare lovitură are tonul ei, ca grila să se citească din culoare înainte de a se citi din literă. Perechile sunt cerneală pe fundalul lor, nu culori alese la ochi: fiecare trece de 4.5:1 pe perechea ei. */ --db-doum: #f0965a; --db-doum-soft: #3a1d0c; --db-tek: #7fb0ff; --db-tek-soft: #142449; --db-ka: #b49bff; --db-ka-soft: #241c48; --db-accent: #d9b876; --db-accent-soft: #332810; /* Căsuța aprinsă. Nu e una din culorile de mai sus: dacă ar fi, un doum aprins ar semăna prea bine cu un doum stins, iar ce trebuie văzut din colțul ochiului e *unde* a ajuns ritmul, nu ce lovitură e acolo. Pe întuneric răspunsul e lumina însăși: căsuța pe care cade ritmul se face alb-cald pe bronz și capătă o aură. Se vede de la un metru și nu seamănă cu niciuna dintre cele patru lovituri. */ --db-on: #ffefc9; --db-on-soft: #4a3714; /* --- decorul ------------------------------------------------------------- Fotografiile tale, trecute prin duoton de `_tools\darbuka\fa-decorul.ps1`. Căile sunt raportate la foaia asta, care stă în `assets/`. */ --decor-corp: url("../media/imagini/decor/darbuka-corp.jpg"); --decor-membrana: url("../media/imagini/decor/darbuka-membrana.jpg"); /* Steaua în opt colțuri, semnul geometriei orientale. Desenată o dată aici, în linie de aur, și repetată peste tot unde e nevoie de textură. */ --patern-stea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1'%3E%3Cpath d='M60 8 112 60 60 112 8 60Z'/%3E%3Cpath d='M23 23h74v74H23z'/%3E%3Ccircle cx='60' cy='60' r='5.5'/%3E%3Cpath d='M0 0h16L0 16Z'/%3E%3Cpath d='M120 0h-16l16 16Z'/%3E%3Cpath d='M0 120h16L0 104Z'/%3E%3Cpath d='M120 120h-16l16-16Z'/%3E%3C/g%3E%3C/svg%3E"); /* Praful de aur din aer. Puncte mărunte, împrăștiate neregulat, ca să nu se citească tiparul când se repetă. */ --patern-praf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23e7c88a'%3E%3Ccircle cx='24' cy='38' r='1.3' opacity='.55'/%3E%3Ccircle cx='97' cy='12' r='.9' opacity='.4'/%3E%3Ccircle cx='168' cy='61' r='1.6' opacity='.5'/%3E%3Ccircle cx='243' cy='27' r='1' opacity='.35'/%3E%3Ccircle cx='299' cy='88' r='1.4' opacity='.45'/%3E%3Ccircle cx='51' cy='121' r='1.1' opacity='.5'/%3E%3Ccircle cx='131' cy='152' r='.8' opacity='.35'/%3E%3Ccircle cx='206' cy='133' r='1.5' opacity='.42'/%3E%3Ccircle cx='277' cy='181' r='1' opacity='.5'/%3E%3Ccircle cx='18' cy='203' r='1.5' opacity='.4'/%3E%3Ccircle cx='89' cy='247' r='1.1' opacity='.48'/%3E%3Ccircle cx='157' cy='219' r='.9' opacity='.35'/%3E%3Ccircle cx='229' cy='268' r='1.4' opacity='.45'/%3E%3Ccircle cx='301' cy='239' r='.9' opacity='.38'/%3E%3Ccircle cx='63' cy='299' r='1.2' opacity='.42'/%3E%3Ccircle cx='190' cy='307' r='1' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); color-scheme: dark; } * { box-sizing: border-box; } /* `hidden` e felul în care JS-ul ascunde STOP, butonul de revenire și avertismentul de sub grilă. Regula din foaia browserului e doar `[hidden] { display: none }`, iar orice `display` scris de noi o bate — `.db-btn` are `inline-flex`, deci STOP s-ar vedea lângă PLAY de la bun început. Se repară o dată, aici, nu la fiecare element ascuns. */ [hidden] { display: none !important; } /* Aceeași regulă pe care o are site.css de la bun început. Secțiunea are foaia ei, deci n-o moștenește, iar fără ea o poză de 1400px rămâne lată de 1400px ca mărime minimă a cutiei și iese din ecran pe telefon. */ img { max-width: 100%; height: auto; } html { -webkit-text-size-adjust: 100%; /* Culoarea de bază stă pe , nu pe : fundalul rădăcinii se întinde peste toată pânza browserului, iar straturile de atmosferă de mai jos au voie să se așeze deasupra lui, sub conținut. */ background-color: var(--bg); } body { margin: 0; background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; } /* ============================================================== atmosfera ==== Camera în care stă instrumentul: lumini calde, geometrie orientală abia ghicită și praf de aur în aer. Amândouă straturile sunt `position: fixed`, și asta nu e o alegere de stil: un element fix nu intră în așezarea paginii, deci nu poate lăți documentul nici cu un pixel. Testele măsoară `document.body.clientWidth` la 390 px și cer să nu treacă de lățimea ecranului — un fundal decorativ n-are voie să fie motivul pentru care pică. `z-index` negativ le trimite sub tot ce e scris în pagină, iar `pointer-events: none` face ca degetul și mausul să treacă prin ele. */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } /* Lumina. Un pol cald sus-dreapta (de unde „cade” lumina pe instrument), unul albăstrui-violet sus-stânga ca să nu fie totul sepia, o pată caldă jos și, peste toate, o vinietă care strânge privirea spre mijloc. */ body::before { z-index: -2; background: radial-gradient(120% 80% at 78% 14%, rgb(198 148 62 / .17), transparent 60%), radial-gradient( 90% 70% at 10% 6%, rgb( 92 78 168 / .13), transparent 62%), radial-gradient(140% 95% at 62% 104%, rgb(152 96 34 / .15), transparent 66%), radial-gradient(100% 100% at 50% 42%, transparent 38%, rgb(2 3 8 / .6) 100%); } /* Textura: steaua în opt colțuri și praful de aur. Stau într-un strat separat tocmai ca să li se poată stinge opacitatea fără să pălească și luminile. Patru sutimi și jumătate, nu șapte: la șapte, steaua se CITEA ca desen pe zonele goale ale paginii, iar brieful cere ca geometria să fie „foarte discretă”, ghicită, nu privită. Pragul dintre atmosferă și tapet e undeva pe aici. */ body::after { z-index: -1; opacity: .045; background: var(--patern-praf) 0 0 / 320px 320px repeat, var(--patern-stea) 0 0 / 150px 150px repeat; } /* Pe telefon rămâne lumina, dispare textura: pe un ecran mic ea nu se mai citește ca geometrie, ci ca zgomot peste text. */ @media (max-width: 40rem) { body::after { display: none; } } h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 600; letter-spacing: .005em; } p { margin: 0 0 var(--s-4); } a { color: var(--accent); } a:hover { color: var(--gold-bright); } /* Ce e scris mărunt și cu majuscule — sprâncene, etichete, nume de trepte — rămâne pe fontul sistemului: antiqua la 12 px cu litere rărite se face ilizibilă. Antiqua e pentru titluri, nu pentru șoapte. */ .db-eyebrow, .db-zone__n, .db-status, .db-count__n { font-family: var(--font-sans); } .db-wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Focus vizibil peste tot. Butoanele de aici sunt multe și mici, iar fără inelul ăsta navigarea din Tab devine ghicit. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* ================================================================ bannerul */ .db-banner { margin: 0; padding: var(--s-3) var(--s-4); background: linear-gradient(180deg, rgb(38 28 10 / .92), rgb(20 15 6 / .92)); color: var(--warn); border-bottom: 1px solid var(--gold-line); font-size: .9rem; text-align: center; } .db-banner strong { color: var(--gold-bright); } .db-banner a { color: inherit; text-underline-offset: 3px; } .db-banner a:hover { color: var(--gold-bright); } /* ====================================================== bara secțiunii ==== Cele trei zone ale platformei: Curs, Antrenament, Progres. Stă pe toate paginile, deci regula ei trăiește aici, în foaia comună. Ordinea nu e întâmplătoare: Cursul e primul fiindcă omul care nu știe să cânte trebuie să nimerească acolo fără să se gândească. Antrenamentul e unealta, nu ușa de intrare. Marca din stânga duce acasă. E singurul drum înapoi din adâncul unei lecții, deci nu e podoabă. */ .db-tabs { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgb(10 15 32 / .94), rgb(6 9 20 / .88)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Firul de lumină de sub bară. E singurul lucru care o desparte de atmosfera de dedesubt fără să pună încă un chenar peste cel de jos. */ .db-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(217 184 118 / .45) 30%, rgb(217 184 118 / .45) 70%, transparent); } .db-tabs__inner { display: flex; align-items: center; gap: var(--s-5); margin: 0 auto; width: min(100% - 2rem, var(--wrap)); } .db-tabs__brand { flex: none; display: flex; align-items: center; /* fără `gap`: „Dar” și „buka” sunt un singur cuvânt, tăiat doar ca să poată lua a doua jumătate degradeul mărcii */ padding: var(--s-3) 0; color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .06em; } .db-tabs__brand span { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .db-tabs__list { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .db-tabs__link { display: block; padding: var(--s-3) var(--s-4); color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .24s ease, border-color .24s ease; } .db-tabs__link:hover { color: var(--gold-bright); } .db-tabs__link[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); text-shadow: 0 0 18px rgb(217 184 118 / .35); } /* Drumul înapoi la restul site-ului. Nu e podoabă și nu e de scos: paginile secțiunii sunt HTML static, servit dintr-un folder, deci NU primesc antetul PHP al sonor.ro și n-au meniul lui. Cât timp secțiunea e în lucru, legătura asta se dublează cu cea din bannerul de sus — dar bannerul se scoate în ziua lansării, și atunci ea rămâne singura ieșire dinăuntru. */ .db-tabs__home { margin-left: auto; flex: none; padding: var(--s-3) 0; color: var(--text-faint); text-decoration: none; font-size: .78rem; letter-spacing: .08em; transition: color .24s ease; } .db-tabs__home:hover { color: var(--gold); } .db-tabs__home::before { content: "\2190"; margin-right: .5em; } /* Pe telefon marca trece deasupra, iar cele trei zone rămân un rând întreg — §32 cere meniul simplu, nu înghesuit. */ @media (max-width: 34rem) { .db-tabs__inner { flex-wrap: wrap; gap: 0 var(--s-3); } .db-tabs__brand { padding-bottom: 0; } .db-tabs__list { width: 100%; } .db-tabs__link { padding-inline: var(--s-3); } /* Cele trei zone iau un rând întreg, deci fără `order` legătura de întoarcere ar cădea singură pe un al treilea rând. Așezată cu ordinea, ea urcă lângă marcă și bara rămâne de două rânduri, cât era. */ .db-tabs__home { order: 2; padding-bottom: 0; } .db-tabs__list { order: 3; } } /* ==================================================================== antet */ /* Capul paginilor de unealtă (antrenamentul). `overflow: hidden` nu e podoabă: el ține instrumentul decorativ înăuntru, oricât ar fi de mare, și e a doua plasă de siguranță împotriva derulării pe orizontală. */ .db-head { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgb(10 15 32 / .55), rgb(4 6 15 / .8)); border-bottom: 1px solid var(--line); padding-block: var(--s-7) var(--s-7); } /* Lumina caldă în care stă instrumentul. */ .db-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 130% at 82% 55%, rgb(214 160 70 / .16), transparent 70%); } /* Instrumentul, scufundat în fundal. Nu e lipit peste pagină: e tăiat pe margini cu o mască rotundă, ținut sub text și stins până unde încă se mai ghicește forma. Stă în dreapta, unde rândul de text s-a terminat deja. */ .db-head::after { content: ""; position: absolute; z-index: -1; top: 50%; right: 3%; translate: 0 -50%; /* Mărimea se dă pe LĂȚIME, nu pe înălțime. Pe un element așezat absolut, lățimea dedusă dintr-o înălțime plus `aspect-ratio` e o socoteală pe care nu toate browserele o fac la fel — iar dacă iese zero, instrumentul dispare fără să spună nimeni de ce. Lățimea e dată, înălțimea vine din raport, iar ce trece de antet e tăiat de `overflow: hidden`. */ width: clamp(12rem, 24vw, 20rem); aspect-ratio: 640 / 999; background: var(--decor-corp) center / contain no-repeat; opacity: .5; -webkit-mask-image: radial-gradient(closest-side, #000 38%, rgb(0 0 0 / .5) 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 38%, rgb(0 0 0 / .5) 72%, transparent 100%); pointer-events: none; } /* Textul urcă peste straturile decorative. Fără el, `isolation: isolate` de mai sus ar fi de ajuns, dar regula asta face intenția limpede pentru cine vine după: în antet, scrisul e deasupra, întotdeauna. */ .db-head > .db-wrap { position: relative; } .db-eyebrow { margin: 0 0 var(--s-3); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; } /* Liniuța dinaintea sprâncenei. Semnul cel mai mic din foaie și singurul care spune, fără cuvinte, „de aici începe ceva”. */ .db-eyebrow::before { content: ""; display: inline-block; width: 2.2em; height: 1px; margin-right: .9em; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--gold)); } .db-head h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); font-weight: 600; margin-bottom: var(--s-4); color: var(--text); } .db-head h1 span { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .db-lead { max-width: 58ch; font-size: 1.0625rem; color: var(--text-muted); } .db-lead a { color: var(--gold); text-underline-offset: 3px; } /* Pe ecran îngust instrumentul se retrage: acolo textul are nevoie de toată lățimea, iar o fotografie sub el ar fi zgomot, nu atmosferă. §13. */ @media (max-width: 60rem) { .db-head::after { display: none; } .db-head { padding-block: var(--s-6); } } /* =================================================================== panouri */ .db-main { padding-block: var(--s-6) var(--s-7); } /* ---- cartonașul, forma de bază a întregii secțiuni ---------------------- Tot ce e o cutie în secțiunea asta arată așa: suprafață închisă și puțin străvezie, un fir de aur pe margine, colțuri de 20 px și o umbră care o ridică de pe fundal. `darbuka-curs.css` îmbracă la fel `.dbc-block`, `.dbc-lessons__link` și celelalte, ca nimic să nu iasă din familie. */ .db-panel { position: relative; background: var(--bg-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r-lg); /* Firul de lumină de sus e ce face diferența dintre o cutie desenată și una luminată. Stă în `inset`, deci nu costă niciun element în plus. */ box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--shadow-md); padding: var(--s-6); margin-bottom: var(--s-5); } .db-panel > h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); font-weight: 600; color: var(--gold-bright); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } /* Linia care pleacă de la titlu și se stinge. Fiind element flexibil în rândul titlului, ia exact locul rămas — deci se scurtează singură când titlul e lung, fără nicio socoteală. */ .db-panel > h2::after { content: ""; flex: 1; height: 1px; min-width: var(--s-4); background: linear-gradient(90deg, rgb(200 165 96 / .45), transparent); } /* Numărul secțiunii. Un jeton întunecat cu chenar de aur și cifra aurie — nu o pastilă colorată. Pare bătut în metal, nu desenat. */ .db-step { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--medalion); border: 1px solid var(--line-strong); color: var(--gold-bright); font-family: var(--font-sans); font-size: .62em; font-weight: 700; box-shadow: inset 0 1px 0 rgb(242 216 154 / .22), 0 4px 14px rgb(0 0 0 / .5); } .db-hint { color: var(--text-muted); font-size: .9rem; } .db-alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--gold-line); } /* Pe telefon cartonașele se strâng: cu 2 rem de aer pe fiecare parte, o grilă de ritm ar rămâne cu 40 px mai puțin de lucru pe un ecran de 390 px. Tot aici pică și sticla mată: `backdrop-filter` cere o trecere în plus prin placa video pentru fiecare cartonaș, iar o lecție are zece. Fundalul se face în schimb aproape opac, ca ele să rămână tot cutii, nu pete. §13. */ @media (max-width: 40rem) { .db-panel { padding: var(--s-4); border-radius: var(--r-md); background: rgb(11 16 34 / .95); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ================================================================ loviturile */ .db-strokes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .db-stroke { display: flex; flex-direction: column; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(165deg, rgb(16 23 46 / .8), rgb(6 9 20 / .8)); box-shadow: inset 0 1px 0 rgb(244 236 220 / .05); transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease; } /* Ridicarea de la hover e mică dinadins — două zecimi de rem. Cartonașul trebuie să răspundă, nu să sară. §14. */ .db-stroke:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--glow-gold), var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .db-stroke, .db-stroke:hover { transition: none; transform: none; } } .db-stroke__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); } .db-stroke__key { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--r-sm); border: 1px solid currentColor; font-family: var(--font-mono); font-weight: 700; background: var(--db-accent-soft); color: var(--db-accent); box-shadow: 0 0 18px -6px currentColor; } .db-stroke:nth-child(1) .db-stroke__key { background: var(--db-doum-soft); color: var(--db-doum); } .db-stroke:nth-child(2) .db-stroke__key { background: var(--db-tek-soft); color: var(--db-tek); } .db-stroke:nth-child(3) .db-stroke__key { background: var(--db-ka-soft); color: var(--db-ka); } .db-stroke__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text); letter-spacing: .01em; } .db-stroke__hand { font-size: .74rem; color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .1em .7em; } .db-stroke__how { font-size: .9rem; color: var(--text-muted); flex: 1; } .db-stroke__play { align-self: flex-start; } /* ================================================================== alegerea */ .db-cols { display: grid; gap: var(--s-5); grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } @media (max-width: 56rem) { .db-cols { grid-template-columns: minmax(0, 1fr); } } .db-pick { position: sticky; top: var(--s-4); } .db-pick__level { margin: var(--s-5) 0 var(--s-2); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .db-pick__level:first-child { margin-top: 0; } .db-pick__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); width: 100%; margin-bottom: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: rgb(10 15 32 / .55); color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; transition: border-color .24s ease, background .24s ease, color .24s ease; } .db-pick__item:hover { border-color: var(--line-strong); background: rgb(24 32 60 / .6); color: var(--text); } /* Ritmul ales. Chenar de aur și o dungă aurie în stânga — culoarea singură n-ar fi de ajuns pe un fundal deja cald. */ .db-pick__item[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(90deg, rgb(58 44 16 / .75), rgb(14 20 40 / .6)); color: var(--gold-bright); box-shadow: inset 3px 0 0 var(--gold); } .db-pick__name { font-weight: 700; } .db-pick__meter { font-family: var(--font-mono); font-size: .8rem; color: var(--text-faint); } .db-pick__item[aria-pressed="true"] .db-pick__meter { color: var(--gold); } /* ==================================================================== grila */ /* Capul ritmului ales: numele mare, măsura, ce înseamnă, și o linie de aur care pleacă mai departe. Linia e ultimul element flexibil din rând, deci ia exact locul rămas — se lungește și se scurtează singură. */ .db-now__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); } .db-now__head h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 600; color: var(--gold-bright); letter-spacing: .01em; } .db-now__head::after { content: ""; flex: 1 1 4rem; height: 1px; align-self: center; margin-left: var(--s-2); background: linear-gradient(90deg, rgb(200 165 96 / .55), transparent 85%); } .db-now__meaning { color: var(--text-muted); font-size: .95rem; font-style: italic; } .db-now__meter { font-family: var(--font-mono); font-weight: 700; font-size: .95rem; color: var(--text-faint); } .db-now__note { color: var(--text-muted); } /* Grila și numărătoarea au aceleași coloane, puse din JS prin --cols. Derularea laterală a rămas doar ca plasă de siguranță — pentru ce n-a putut fi împăturit (vezi mai jos) și pentru browserele fără ResizeObserver, unde împăturirea nu se poate socoti. În rest, exercițiul se vede întreg. */ .db-scroll { overflow-x: auto; padding-bottom: var(--s-2); /* Bara de derulare a browserului e albă și lată: pe un cartonaș închis, ea ar fi cel mai luminos lucru din pagină. Aici e o dungă subțire de bronz. */ scrollbar-width: thin; scrollbar-color: rgb(200 165 96 / .35) transparent; } .db-scroll::-webkit-scrollbar { height: 8px; } .db-scroll::-webkit-scrollbar-track { background: transparent; } .db-scroll::-webkit-scrollbar-thumb { background: rgb(200 165 96 / .3); border-radius: var(--r-pill); } .db-scroll::-webkit-scrollbar-thumb:hover { background: rgb(200 165 96 / .5); } /* Selecția textului, în aurul secțiunii. Albastrul de sistem pe fundalul ăsta arată ca o scăpare. */ ::selection { background: rgb(217 184 118 / .28); color: var(--text); } .db-grid, .db-count { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(2.4rem, 1fr)); gap: var(--s-1); min-width: min-content; } .db-cell { position: relative; /* pentru bulina de accent, vezi .is-accent */ aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgb(8 12 26 / .6); color: var(--text-faint); font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: transform .1s ease, box-shadow .12s ease, background .12s ease; } .db-cell:hover { border-color: var(--line-strong); } /* Prima căsuță a fiecărei bătăi. Chenarul mai gros e singurul lucru care arată unde cade numărătoarea la 9/8, unde grupele nu sunt egale. */ .db-cell.is-beat { border-left: 3px solid var(--line-strong); } .db-cell[data-key="D"] { background: var(--db-doum-soft); color: var(--db-doum); } .db-cell[data-key="T"] { background: var(--db-tek-soft); color: var(--db-tek); } .db-cell[data-key="K"] { background: var(--db-ka-soft); color: var(--db-ka); } .db-cell[data-key="A"] { background: var(--db-accent-soft); color: var(--db-accent); } /* Căsuța accentuată: acolo cade greutatea măsurii. Se însemnează cu un chenar mai gros și o pată sub literă, nu cu altă culoare — culoarea spune deja ce lovitură e, iar accentul e altceva decât lovitura. */ .db-cell.is-accent { box-shadow: inset 0 0 0 2px currentColor; font-weight: 800; } .db-cell.is-accent::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; opacity: .7; } .db-cell.is-rest { color: var(--text-muted); opacity: .65; } /* ---- dinamica (Nivel 7) -------------------------------------------------- Brieful cere două lucruri deodată: schimbarea să se vadă limpede, și mărimea notei să NU se schimbe pentru ea. Așa că nota rămâne exact cât era, iar dinamica se scrie ca într-o partitură — semnul italic deasupra căsuței, numai acolo unde se schimbă ceva — plus o umbră de fundal care spune, dintr-o privire, cât de plină e fraza acolo. Litera stă în `.db-cell__k` de când există semnul ăsta: două elemente frați într-o căsuță care le centrează pe amândouă. */ .db-cell__k { line-height: 1; } .db-cell__din { position: absolute; left: 50%; top: -.15em; transform: translate(-50%, -100%); font-family: var(--font-mono); font-style: italic; font-size: .62rem; font-weight: 800; letter-spacing: .02em; color: var(--db-accent); white-space: nowrap; pointer-events: none; } /* Umbra: cu cât mai tare, cu atât mai plină căsuța. E o nuanță, nu o culoare nouă — culoarea căsuței spune deja ce lovitură e. Pe întuneric „umbra” trebuie să fie lumină, altfel un piano ar ajunge o gaură neagră în care nu se mai citește litera. Secțiunea e închisă acum întotdeauna, deci regula nu mai are variantă și nici condiție. */ .db-cell.is-din { box-shadow: inset 0 0 0 999px rgb(244 236 220 / .04); } .db-cell.is-din--p { opacity: .72; } .db-cell.is-din--mp { opacity: .84; } .db-cell.is-din--mf { box-shadow: inset 0 0 0 999px rgb(244 236 220 / .04); } .db-cell.is-din--f { box-shadow: none; font-weight: 800; } /* O căsuță accentuată își păstrează chenarul gros: accentul e altceva decât treapta de dinamică — e „mai tare decât ce e în jur”, oriunde ar fi „în jur”. Umbra dinamicii n-are voie să-l șteargă. */ .db-cell.is-din.is-accent { box-shadow: inset 0 0 0 2px currentColor; } /* ---- căsuța lăsată elevului (Nivel 7) ------------------------------------ „Aici e măsura ta.” Nu e o pauză și n-are voie să arate ca una: o pauză se ține, asta se umple. Se însemnează cu hașuri diagonale — semnul de „loc liber” din orice partitură scrisă de mână. */ .db-cell.is-liber { border-style: dashed; border-color: var(--db-ka); color: var(--db-ka); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--db-ka) 14%, transparent) 5px 7px); opacity: 1; } /* `color-mix` lipsește în browserele mai vechi; acolo rămâne o căsuță goală cu chenar întrerupt, care spune același lucru mai puțin frumos. */ @supports not (background: color-mix(in srgb, red 10%, transparent)) { .db-cell.is-liber { background: var(--db-ka-soft); } } /* Grila cu dinamică are nevoie de un deget de loc deasupra, pentru semne. */ .db-grid.has-din { padding-top: 1.15em; } .db-grid.is-wrapped.has-din { padding-top: 0; } .db-grid.is-wrapped.has-din .db-row__cells { padding-top: 1.15em; } .db-grid.is-wrapped .db-cell__din { font-size: calc(var(--count-font, .7rem) * .95); } /* Căsuța pe care e ritmul ACUM. Trei lucruri deodată, fiindcă e singurul semn pe care ochiul îl caută în timp ce mâna bate: se face alb-cald, se ridică o idee și capătă o aură care se vede din colțul ochiului. */ .db-cell.is-on { background: var(--db-on-soft); color: var(--db-on); border-color: var(--db-on); transform: translateY(-2px); box-shadow: 0 0 0 2px var(--db-on) inset, 0 0 18px rgb(255 239 201 / .45), 0 6px 18px rgb(0 0 0 / .5); } /* Săritura căsuței aprinse e podoabă, nu informație: culoarea spune același lucru. Cine a cerut mai puțină mișcare primește doar culoarea. */ @media (prefers-reduced-motion: reduce) { .db-cell { transition: none; } .db-cell.is-on { transform: none; } } /* ---- cum a ieșit fiecare căsuță, la un exercițiu notat (Nivel 4) ---- Semnul stă în colțul de sus al căsuței, ca să nu se bată cap în cap cu evidențierea (care e chenar) și nici cu bulina de accent (care e jos). Așa, o căsuță poate spune în același timp: „aici e ritmul acum”, „aici cade greutatea” și „aici ai bătut strâmb”. */ .db-cell.is-ok::before, .db-cell.is-aproape::before, .db-cell.is-ratat::before, .db-cell.is-gresit::before { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; } .db-cell.is-ok::before { background: var(--ok); } .db-cell.is-aproape::before { background: var(--warn); } .db-cell.is-gresit::before { background: var(--brand-orange); } .db-cell.is-ratat::before { background: var(--db-doum); opacity: .8; } /* Cea sărită se și stinge puțin: e singura la care nu s-a întâmplat nimic, iar asta trebuie să se vadă dintr-o privire, de la un metru. */ .db-cell.is-ratat { opacity: .55; } .db-count__n { text-align: center; font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); } .db-count__n.is-beat { color: var(--text); font-weight: 700; } /* ---- grila împăturită pe mai multe rânduri ---- Când exercițiul e mai lung decât lățimea liberă — o înlănțuire de cinci ritmuri a câte patru măsuri înseamnă aproape trei sute de căsuțe — grila se rupe în rânduri, tăiate la marginile măsurilor, și își micșorează căsuțele cât să încapă tot. Ruperea o hotărăște `darbuka-grid.js`, care știe unde sunt măsurile; foaia asta doar așază ce a hotărât el. Aici numărătoarea nu mai poate sta într-un singur element sub grilă, fiindcă cifrele ei ar fi rămas pe un rând în timp ce căsuțele lor s-au mutat pe patru. De aceea fiecare rând își poartă propriile cifre, iar `.db-count` de sub grilă se ascunde — de unde și regula de mai jos, care îi trebuie fiindcă `display: grid` de mai sus bate atributul `hidden`. Mărimile vin din JS în `--cell`, `--cell-gap`, `--cell-font`: se socotesc din lățimea măsurată a paginii, nu se pot scrie aici. Toate rândurile primesc aceeași căsuță — pe grilă, o căsuță e o unitate de timp, iar două mărimi diferite pe același exercițiu ar minți despre durată. */ .db-grid.is-wrapped { display: block; /* rândurile își au grilele lor, una sub alta */ min-width: 0; } .db-count[hidden] { display: none; } .db-row { margin-bottom: var(--s-3); } .db-row:last-child { margin-bottom: 0; } /* Rândul cu care începe un ritm nou. Linia de deasupra e informația cerută („de aici se schimbă”), deci nu se pune înaintea primului: acolo n-ar despărți nimic de nimic. */ .db-row.is-part:not(:first-child) { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--line); } .db-row__part { margin: 0 0 var(--s-1); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); } .db-row__cells, .db-row__count { display: grid; grid-template-columns: repeat(var(--n, 1), var(--cell, 2.4rem)); gap: var(--cell-gap, 3px); justify-content: start; } .db-grid.is-wrapped .db-cell { font-size: var(--cell-font, 1rem); } .db-grid.is-wrapped .db-count__n { font-size: var(--count-font, .7rem); } /* Chenarele și bulinele sunt scrise în pixeli pentru căsuța mare de pe un singur rând. Pe una de cincisprezece pixeli, aceiași trei pixeli de chenar ar mânca o cincime din pătrat, iar bulina de accent ar acoperi litera. Deci scad odată cu căsuța, dar nu cresc peste cât erau. */ .db-grid.is-wrapped .db-cell.is-beat { border-left-width: min(3px, var(--cell) / 8); } /* Unde se termină o măsură și începe alta. Pe un rând care ține două măsuri, e singurul semn care mai spune asta — la grila de un rând, marginea măsurii era chiar capătul rândului și nu trebuia însemnată. */ .db-grid.is-wrapped .db-cell.is-bar { border-left: min(3px, var(--cell) / 6) solid var(--text-muted); } .db-grid.is-wrapped .db-cell.is-accent::after { width: min(5px, var(--cell) * .22); height: min(5px, var(--cell) * .22); margin-left: calc(min(5px, var(--cell) * .22) / -2); bottom: max(2px, var(--cell) * .08); } .db-grid.is-wrapped .db-cell.is-ok::before, .db-grid.is-wrapped .db-cell.is-aproape::before, .db-grid.is-wrapped .db-cell.is-ratat::before, .db-grid.is-wrapped .db-cell.is-gresit::before { width: min(7px, var(--cell) * .26); height: min(7px, var(--cell) * .26); top: max(2px, var(--cell) * .06); right: max(2px, var(--cell) * .06); } .db-edited { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--accent-soft); color: var(--accent); font-size: .85rem; } /* =============================================================== transportul */ .db-transport { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-4); } /* Butoanele. Două feluri și atât: unul plin de aur, pentru lucrul de făcut acum (PLAY, „Începe de la zero”), și unul întunecat cu chenar de aur, pentru tot restul. Al treilea, roșu-portocaliu, e STOP-ul — n-are voie să semene cu niciunul din primele două. */ .db-btn { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.3em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgb(16 23 46 / .6); font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer; /* Butoanele sunt când `