…
Reglaj fin fara clasa noua: style="--ct-tex-o:.24"
⚠ NU pune textura peste o fotografie — se pune pe FUNDAL, sub continut.
⚠ Pe carduri mici nu se vede oricum; e facuta pentru benzi mari.
─────────────────────────────────────────────────────────── */
.ct-tex{
position: relative;
isolation: isolate;
}
.ct-tex::before{
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
border-radius: inherit; /* altfel textura iese cu colturi drepte
dintr-un panou rotunjit */
/* Motivul e format din MANUNCHIURI de 2-3 ace pornite din acelasi punct,
nu din linii izolate: manunchiul citeste „cetina", linia izolata citeste
„hasura". Ochiul prinde grupul, nu firul.
Stratul 1 — dala de 160px. Stratul 2 — dala de 230px, decalata si cu
manunchiurile orientate invers, ca sa nu se simta repetitia. */
background-color: var(--ct-tex-color,
color-mix(in srgb, var(--color-primary) 38%, var(--color-bg)));
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M14,26l11,-6M14,26l9,-10M14,26l4,-11M58,14l-11,-6M58,14l-9,-10M58,14l-4,-11M102,34l11,-6M102,34l9,-10M102,34l4,-11M140,18l-11,-6M140,18l-9,-10M140,18l-4,-11M30,64l11,-6M30,64l9,-10M30,64l4,-11M74,52l-11,-6M74,52l-9,-10M74,52l-4,-11M118,74l11,-6M118,74l9,-10M118,74l4,-11M152,58l-11,-6M152,58l-9,-10M152,58l-4,-11M10,102l11,-6M10,102l9,-10M10,102l4,-11M52,96l-11,-6M52,96l-9,-10M52,96l-4,-11M96,112l11,-6M96,112l9,-10M96,112l4,-11M136,100l-11,-6M136,100l-9,-10M136,100l-4,-11M24,140l11,-6M24,140l9,-10M24,140l4,-11M68,132l-11,-6M68,132l-9,-10M68,132l-4,-11M112,150l11,-6M112,150l9,-10M112,150l4,-11M148,138l-11,-6M148,138l-9,-10M148,138l-4,-11'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'%3E%3Cpath d='M20,40l-11,-6M20,40l-9,-10M20,40l-4,-11M78,22l11,-6M78,22l9,-10M78,22l4,-11M130,48l-11,-6M130,48l-9,-10M130,48l-4,-11M196,30l11,-6M196,30l9,-10M196,30l4,-11M46,92l-11,-6M46,92l-9,-10M46,92l-4,-11M104,78l11,-6M104,78l9,-10M104,78l4,-11M158,100l-11,-6M158,100l-9,-10M158,100l-4,-11M212,84l11,-6M212,84l9,-10M212,84l4,-11M14,150l-11,-6M14,150l-9,-10M14,150l-4,-11M70,136l11,-6M70,136l9,-10M70,136l4,-11M126,160l-11,-6M126,160l-9,-10M126,160l-4,-11M184,144l11,-6M184,144l9,-10M184,144l4,-11M38,206l-11,-6M38,206l-9,-10M38,206l-4,-11M96,194l11,-6M96,194l9,-10M96,194l4,-11M150,214l-11,-6M150,214l-9,-10M150,214l-4,-11M206,198l11,-6M206,198l9,-10M206,198l4,-11'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M14,26l11,-6M14,26l9,-10M14,26l4,-11M58,14l-11,-6M58,14l-9,-10M58,14l-4,-11M102,34l11,-6M102,34l9,-10M102,34l4,-11M140,18l-11,-6M140,18l-9,-10M140,18l-4,-11M30,64l11,-6M30,64l9,-10M30,64l4,-11M74,52l-11,-6M74,52l-9,-10M74,52l-4,-11M118,74l11,-6M118,74l9,-10M118,74l4,-11M152,58l-11,-6M152,58l-9,-10M152,58l-4,-11M10,102l11,-6M10,102l9,-10M10,102l4,-11M52,96l-11,-6M52,96l-9,-10M52,96l-4,-11M96,112l11,-6M96,112l9,-10M96,112l4,-11M136,100l-11,-6M136,100l-9,-10M136,100l-4,-11M24,140l11,-6M24,140l9,-10M24,140l4,-11M68,132l-11,-6M68,132l-9,-10M68,132l-4,-11M112,150l11,-6M112,150l9,-10M112,150l4,-11M148,138l-11,-6M148,138l-9,-10M148,138l-4,-11'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'%3E%3Cpath d='M20,40l-11,-6M20,40l-9,-10M20,40l-4,-11M78,22l11,-6M78,22l9,-10M78,22l4,-11M130,48l-11,-6M130,48l-9,-10M130,48l-4,-11M196,30l11,-6M196,30l9,-10M196,30l4,-11M46,92l-11,-6M46,92l-9,-10M46,92l-4,-11M104,78l11,-6M104,78l9,-10M104,78l4,-11M158,100l-11,-6M158,100l-9,-10M158,100l-4,-11M212,84l11,-6M212,84l9,-10M212,84l4,-11M14,150l-11,-6M14,150l-9,-10M14,150l-4,-11M70,136l11,-6M70,136l9,-10M70,136l4,-11M126,160l-11,-6M126,160l-9,-10M126,160l-4,-11M184,144l11,-6M184,144l9,-10M184,144l4,-11M38,206l-11,-6M38,206l-9,-10M38,206l-4,-11M96,194l11,-6M96,194l9,-10M96,194l4,-11M150,214l-11,-6M150,214l-9,-10M150,214l-4,-11M206,198l11,-6M206,198l9,-10M206,198l4,-11'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-size: 160px 160px, 230px 230px;
mask-size: 160px 160px, 230px 230px;
-webkit-mask-position: 0 0, 53px 87px;
mask-position: 0 0, 53px 87px;
-webkit-mask-repeat: repeat, repeat;
mask-repeat: repeat, repeat;
opacity: var(--ct-tex-o, .15);
}
/* mai apasat — doar pe suprafete MICI (un panou, o caseta), nu pe o banda
intreaga; pe banda intreaga incepe sa se vada motivul */
.ct-tex--dense{ --ct-tex-o: .26; }
/* aproape numai o banuiala — pentru benzi foarte mari, langa fotografii */
.ct-tex--faint{ --ct-tex-o: .08; }
/* Stinge textura spre marginile de sus si de jos, ca banda sa nu se termine
cu o taietura dreapta in textura cand urmeaza alta sectiune.
Textura foloseste deja masca pentru desen, deci estomparea NU se mai poate
face cu un `mask-image` separat: se compune in ACEEASI masca, cu trei
straturi. ORDINEA CONTEAZA — operatorul fiecarui strat spune cum se compune
cu tot ce e SUB el, iar straturile se scriu de sus in jos:
1. gradientul `intersect` → taie tot ce iese din interval
2. acele 160px `add` ─┐ reunite intre ele
3. acele 230px (jos, ignorat)┘
Adica gradient ∩ (ace160 ∪ ace230). Scris invers (gradientul ultimul) ar da
ace160 ∪ (ace230 ∩ gradient) — adica primul strat NEatenuat la capete. */
.ct-tex--fade::before{
-webkit-mask-image:
linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M14,26l11,-6M14,26l9,-10M14,26l4,-11M58,14l-11,-6M58,14l-9,-10M58,14l-4,-11M102,34l11,-6M102,34l9,-10M102,34l4,-11M140,18l-11,-6M140,18l-9,-10M140,18l-4,-11M30,64l11,-6M30,64l9,-10M30,64l4,-11M74,52l-11,-6M74,52l-9,-10M74,52l-4,-11M118,74l11,-6M118,74l9,-10M118,74l4,-11M152,58l-11,-6M152,58l-9,-10M152,58l-4,-11M10,102l11,-6M10,102l9,-10M10,102l4,-11M52,96l-11,-6M52,96l-9,-10M52,96l-4,-11M96,112l11,-6M96,112l9,-10M96,112l4,-11M136,100l-11,-6M136,100l-9,-10M136,100l-4,-11M24,140l11,-6M24,140l9,-10M24,140l4,-11M68,132l-11,-6M68,132l-9,-10M68,132l-4,-11M112,150l11,-6M112,150l9,-10M112,150l4,-11M148,138l-11,-6M148,138l-9,-10M148,138l-4,-11'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'%3E%3Cpath d='M20,40l-11,-6M20,40l-9,-10M20,40l-4,-11M78,22l11,-6M78,22l9,-10M78,22l4,-11M130,48l-11,-6M130,48l-9,-10M130,48l-4,-11M196,30l11,-6M196,30l9,-10M196,30l4,-11M46,92l-11,-6M46,92l-9,-10M46,92l-4,-11M104,78l11,-6M104,78l9,-10M104,78l4,-11M158,100l-11,-6M158,100l-9,-10M158,100l-4,-11M212,84l11,-6M212,84l9,-10M212,84l4,-11M14,150l-11,-6M14,150l-9,-10M14,150l-4,-11M70,136l11,-6M70,136l9,-10M70,136l4,-11M126,160l-11,-6M126,160l-9,-10M126,160l-4,-11M184,144l11,-6M184,144l9,-10M184,144l4,-11M38,206l-11,-6M38,206l-9,-10M38,206l-4,-11M96,194l11,-6M96,194l9,-10M96,194l4,-11M150,214l-11,-6M150,214l-9,-10M150,214l-4,-11M206,198l11,-6M206,198l9,-10M206,198l4,-11'/%3E%3C/g%3E%3C/svg%3E");
mask-image:
linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M14,26l11,-6M14,26l9,-10M14,26l4,-11M58,14l-11,-6M58,14l-9,-10M58,14l-4,-11M102,34l11,-6M102,34l9,-10M102,34l4,-11M140,18l-11,-6M140,18l-9,-10M140,18l-4,-11M30,64l11,-6M30,64l9,-10M30,64l4,-11M74,52l-11,-6M74,52l-9,-10M74,52l-4,-11M118,74l11,-6M118,74l9,-10M118,74l4,-11M152,58l-11,-6M152,58l-9,-10M152,58l-4,-11M10,102l11,-6M10,102l9,-10M10,102l4,-11M52,96l-11,-6M52,96l-9,-10M52,96l-4,-11M96,112l11,-6M96,112l9,-10M96,112l4,-11M136,100l-11,-6M136,100l-9,-10M136,100l-4,-11M24,140l11,-6M24,140l9,-10M24,140l4,-11M68,132l-11,-6M68,132l-9,-10M68,132l-4,-11M112,150l11,-6M112,150l9,-10M112,150l4,-11M148,138l-11,-6M148,138l-9,-10M148,138l-4,-11'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%23000' stroke-width='.75' stroke-linecap='round'%3E%3Cpath d='M20,40l-11,-6M20,40l-9,-10M20,40l-4,-11M78,22l11,-6M78,22l9,-10M78,22l4,-11M130,48l-11,-6M130,48l-9,-10M130,48l-4,-11M196,30l11,-6M196,30l9,-10M196,30l4,-11M46,92l-11,-6M46,92l-9,-10M46,92l-4,-11M104,78l11,-6M104,78l9,-10M104,78l4,-11M158,100l-11,-6M158,100l-9,-10M158,100l-4,-11M212,84l11,-6M212,84l9,-10M212,84l4,-11M14,150l-11,-6M14,150l-9,-10M14,150l-4,-11M70,136l11,-6M70,136l9,-10M70,136l4,-11M126,160l-11,-6M126,160l-9,-10M126,160l-4,-11M184,144l11,-6M184,144l9,-10M184,144l4,-11M38,206l-11,-6M38,206l-9,-10M38,206l-4,-11M96,194l11,-6M96,194l9,-10M96,194l4,-11M150,214l-11,-6M150,214l-9,-10M150,214l-4,-11M206,198l11,-6M206,198l9,-10M206,198l4,-11'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%, 160px 160px, 230px 230px;
mask-size: 100% 100%, 160px 160px, 230px 230px;
-webkit-mask-position: 0 0, 0 0, 53px 87px;
mask-position: 0 0, 0 0, 53px 87px;
-webkit-mask-repeat: no-repeat, repeat, repeat;
mask-repeat: no-repeat, repeat, repeat;
-webkit-mask-composite: source-in, source-over, source-over;
mask-composite: intersect, add, add;
}
/* ═══════════════════════════════════════════════════════════
2. LUMINA DE JAR — .ct-glow
═══════════════════════════════════════════════════════════
Aura calda radiala, pe un pseudo-element IN SPATELE continutului. Nu e
„glow de neon": nu are contur, nu are inel, se stinge complet inainte de
marginea aurei. Gandeste-o ca lumina care iese din gura cuptorului.
Locul ei natural: sub pizzele DECUPATE (plutesc pe verde, fara rama — vezi
BRIEF §12) si sub butonul principal al paginii.
FOLOSIRE
…obiect care „sta" pe o suprafata…
Reglaj fin: style="--ct-glow-i:34%; --ct-glow-y:44%"
⚠ Elementul care primeste `.ct-glow` devine `position:relative` +
`isolation:isolate`. Daca avea deja `position:absolute`, aura merge la
fel — schimba doar `relative`-ul implicit, nu ce ai scris tu dupa.
⚠ NU pune `.ct-glow` pe un card cu fundal opac si aura in afara lui: aura
e taiata de `overflow` daca un stramos are `overflow:hidden/clip`. Pe
situl real asta se intampla usor — `.ct-mark-host`, `.category-hero` si
mai multe sectiuni ale platformei taie la margine.
─────────────────────────────────────────────────────────── */
.ct-glow{
position: relative;
isolation: isolate;
}
.ct-glow::before{
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
left: 50%;
top: var(--ct-glow-y, 54%);
width: var(--ct-glow-w, 116%);
height: var(--ct-glow-h, 104%);
transform: translate(-50%, -50%);
/* Masurat pe #0A1310: sub 30% aura pur si simplu nu exista pe ecran —
obiectul acopera miezul aprins si afara ramane doar coada gradientului.
De aceea miezul e mai tare decat pare firesc pe hartie, iar stingerea
e lunga (pana la 84%), ca marginea sa nu se citeasca niciodata ca inel. */
background: radial-gradient(closest-side at 50% 50%,
color-mix(in srgb, var(--ct-glow-color, var(--ct-ember)) var(--ct-glow-i, 40%), transparent) 0%,
color-mix(in srgb, var(--ct-glow-color, var(--ct-ember)) var(--ct-glow-i2, 15%), transparent) 46%,
transparent 84%);
}
/* mic si strans — sub un buton, sub o insigna, sub o icoana */
.ct-glow--sm{
--ct-glow-w: 128%;
--ct-glow-h: 230%;
--ct-glow-i: 34%;
--ct-glow-i2: 12%;
}
/* mare si larg — sub o fotografie mare de fel principal, sub o pizza intreaga */
.ct-glow--lg{
--ct-glow-w: 150%;
--ct-glow-h: 140%;
--ct-glow-i: 46%;
--ct-glow-i2: 17%;
}
/* lumina se strange DEDESUBT, ca un obiect care sta pe o masa luminata */
.ct-glow--under{
--ct-glow-y: 88%;
--ct-glow-w: 104%;
--ct-glow-h: 64%;
--ct-glow-i: 42%;
--ct-glow-i2: 15%;
}
/* aceeasi aura, dar in cetina in loc de jar — pentru accente verzi
(buton primar, insigna „nou") unde chihlimbarul ar bate in portocaliu */
.ct-glow--leaf{ --ct-glow-color: var(--color-primary); }
/* Pe telefon aura lata iese lateral din ecran. Masurat la 360px: o figura de
300px cu `--lg` (150%) ajunge la 395px, adica 35px peste ecran. Nu produce
derulare laterala (main.css pune `overflow-x:clip` pe body), dar e o risipa
de lumina in afara cadrului — deci o strangem.
Regulile stau DUPA modificatori si au aceeasi specificitate, deci castiga. */
@media (max-width: 640px){
.ct-glow{ --ct-glow-w: 120%; }
.ct-glow--under{ --ct-glow-w: 100%; }
}
/* ═══════════════════════════════════════════════════════════
3. LIMBAJUL LINIAR — .ct-rule / .ct-corner / .ct-frame
═══════════════════════════════════════════════════════════
Logoul e desenat din linii, deci tot ce delimiteaza e un FIR, nu o umbra
si nu un dreptunghi gri. Firele se sting spre capete: nicio linie nu se
opreste brusc.
─────────────────────────────────────────────────────────── */
/* ── 3.1 .ct-rule — despartitorul ────────────────────────────
FOLOSIRE
despartitor neutru banda de brand fir vertical intre coloane `.ct-rule--brand` e DELIMITAREA OFICIALA langa fotografii (BRIEF §2): fotografia ramane curata, iar banda in culoarea identitatii marcheaza marginea. Peste poza NU se pune tenta. */ .ct-rule{ display: block; width: 100%; height: var(--ct-rule-h, 1px); border: 0; margin: 0; flex: none; opacity: 1; /* Bootstrap Reboot pune `opacity:.25` pe
*/ background: linear-gradient(90deg, transparent 0%, var(--ct-line) 16%, color-mix(in srgb, var(--ct-line) 55%, var(--ct-mix-lift)) 50%, var(--ct-line) 84%, transparent 100%); } /* banda de brand: aprinsa la mijloc, stinsa spre capete */ .ct-rule--brand{ height: var(--ct-rule-h, 2px); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 14%, color-mix(in srgb, var(--color-primary) 88%, transparent) 50%, color-mix(in srgb, var(--color-primary) 14%, transparent) 86%, transparent 100%); } /* varianta calda a benzii — langa fotografii de mancare la gratar */ .ct-rule--ember{ height: var(--ct-rule-h, 2px); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ct-ember) 12%, transparent) 14%, color-mix(in srgb, var(--ct-ember) 84%, transparent) 50%, color-mix(in srgb, var(--ct-ember) 12%, transparent) 86%, transparent 100%); } /* fir vertical — aceeasi logica, rotita; inaltimea o da contextul */ .ct-rule--v{ width: var(--ct-rule-h, 1px); height: auto; align-self: stretch; min-height: var(--ct-rule-len, 100%); background: linear-gradient(180deg, transparent 0%, var(--ct-line) 16%, color-mix(in srgb, var(--ct-line) 55%, var(--ct-mix-lift)) 50%, var(--ct-line) 84%, transparent 100%); } .ct-rule--v.ct-rule--brand{ width: var(--ct-rule-h, 2px); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 14%, color-mix(in srgb, var(--color-primary) 88%, transparent) 50%, color-mix(in srgb, var(--color-primary) 14%, transparent) 86%, transparent 100%); } /* ── 3.2 .ct-corner — colturi de fotograf ──────────────────── Patru colturi desenate din fir, ca reperele de pe un vizor. Se pune pe carduri IMPORTANTE (felul zilei, oferta), nu pe toate — altfel nu mai marcheaza nimic. FOLOSIRE
Un singur pseudo-element: o rama de 1px din care masca lasa vizibile doar
patratele din colturi. Deci NU intra in conflict cu ::after-ul tau. */
.ct-corner{
position: relative;
}
.ct-corner::before{
content: "";
position: absolute;
inset: var(--ct-corner-inset, 8px);
z-index: 1;
pointer-events: none;
border: 1px solid var(--ct-corner-color, var(--ct-line-control));
border-radius: var(--ct-corner-radius, var(--r-sm));
--ct-corner-s: var(--ct-corner-size, 20px);
-webkit-mask-image:
linear-gradient(#000, #000), linear-gradient(#000, #000),
linear-gradient(#000, #000), linear-gradient(#000, #000);
mask-image:
linear-gradient(#000, #000), linear-gradient(#000, #000),
linear-gradient(#000, #000), linear-gradient(#000, #000);
-webkit-mask-size: var(--ct-corner-s) var(--ct-corner-s);
mask-size: var(--ct-corner-s) var(--ct-corner-s);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left top, right top, left bottom, right bottom;
mask-position: left top, right top, left bottom, right bottom;
}
/* doar coltul stanga-sus si dreapta-jos — mai discret, bun pe citate */
.ct-corner--diag::before{
-webkit-mask-position: left top, right bottom, left top, right bottom;
mask-position: left top, right bottom, left top, right bottom;
}
/* colturile se aprind cand cardul e survolat, fara sa se miste nimic */
.ct-corner--hover::before{
border-color: var(--ct-corner-color, var(--ct-line));
transition: border-color var(--t) var(--ease);
}
.ct-corner--hover:hover::before,
.ct-corner--hover:focus-within::before{
border-color: var(--color-primary);
}
/* ── 3.3 .ct-frame — rama cu colturi taiate ──────────────────
Pentru citate si marturii: o rama subtire de 1px cu colturile retezate,
ecou al frunzei din logo (forma inchisa, desenata din linii).
FOLOSIRE
Variante: .ct-mark--tr (sus-dreapta) · .ct-mark--tl · .ct-mark--bl
(implicit: jos-dreapta) · .ct-mark--xl (filigran urias, mai palid)
· .ct-mark--ember (in chihlimbar)
Reglaj: style="--ct-mark-size:340px; --ct-mark-o:.045"
⚠ VALOARE CODATA, DE MUTAT INTR-O SETARE: calea imaginii.
In propunere cheia `logo-mark` era injectata de build.py prin `--ct-bg`.
Pe situl real marca vine din Setari → General → „Iconita logo"
(`general.logo_icon_url`), dar platforma NU o emite ca variabila CSS —
nu exista niciun `--cs-logo-icon` in layout.php. Pana cand nucleul
capata asa ceva, calea e scrisa aici, in `--ct-mark-src`, pe locul
standard folosit de provisioner. Daca fisierul se muta, se schimba
UN singur rand.
⚠ Proportia implicita e a frunzei reale din propunere (180x256). Fisierul
de pe server e inca patratul livrat de provisioner; cu `mask-size:contain`
iese doar mai mic, nu deformat. Cand intra frunza adevarata, raportul e
corect din start; daca are alta proportie, se schimba `--ct-mark-ar`.
⚠ Gazda are nevoie de `.ct-mark-host` (pozitionare + context de strat +
taiere la margine). Fara ea, filigranul iese din banda.
─────────────────────────────────────────────────────────── */
.ct-mark-host{
position: relative;
isolation: isolate;
overflow: clip; /* `clip`, nu `hidden`: nu creeaza container de derulare */
}
.ct-mark{
position: absolute;
z-index: -1;
pointer-events: none;
display: block;
width: var(--ct-mark-size, 250px);
aspect-ratio: var(--ct-mark-ar, 180 / 256);
background-color: var(--ct-mark-color, var(--color-primary));
opacity: var(--ct-mark-o, .05);
-webkit-mask-image: var(--ct-mark-src, url("/uploads/site/logo-icon.png"));
mask-image: var(--ct-mark-src, url("/uploads/site/logo-icon.png"));
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
/* implicit: jos-dreapta, cu un sfert iesit din banda */
right: var(--ct-mark-x, -4%);
bottom: var(--ct-mark-y, -8%);
}
.ct-mark--tr{ top: var(--ct-mark-y, -10%); right: var(--ct-mark-x, -3%); bottom: auto; left: auto; }
.ct-mark--tl{ top: var(--ct-mark-y, -10%); left: var(--ct-mark-x, -4%); bottom: auto; right: auto; }
.ct-mark--bl{ bottom: var(--ct-mark-y, -8%); left: var(--ct-mark-x, -4%); top: auto; right: auto; }
/* filigran urias — pe banda de poveste, pe subsol; cu cat e mai mare,
cu atat mai palid, altfel devine desen, nu filigran */
.ct-mark--xl{
--ct-mark-size: clamp(280px, 36vw, 520px);
--ct-mark-o: .04;
}
/* filigran in chihlimbar — pe benzile calde (gratar, tochitura) */
.ct-mark--ember{ --ct-mark-color: var(--ct-ember); --ct-mark-o: .045; }
/* pe telefon filigranul mare mananca latimea; il strangem */
@media (max-width: 640px){
.ct-mark{ --ct-mark-size: 170px; }
.ct-mark--xl{ --ct-mark-size: 230px; }
}
/* ═══════════════════════════════════════════════════════════
5. .ct-noise — grain fin impotriva benzilor de gradient
═══════════════════════════════════════════════════════════
VERIFICAT IN BROWSER, nu presupus: pe un gradient #1B3129 → #0A1310 lat de
800px, treptele se vad ca dungi moi (paleta noastra are ~17 trepte pe canal
pe toata banda, deci fiecare treapta tine ~47px). Cu grainul de mai jos,
dungile dispar. De asta exista clasa; daca gradientul tau e scurt (sub
~400px) sau are contrast mare, nu-ti trebuie.
Se pune DOAR pe elementul care are gradientul, nu pe toata pagina.
FOLOSIRE
` (2 id-uri),
peste ale noastre. Respiratia (scale) se opreste cand slide-ul
nu e `cover` (data-fit-d / data-fit-m). Scos tratamentul
„pizza decupata" de pe :nth-of-type(2) — acum ar fi nimerit o
fotografie intreaga.
2026-08-28 18:20 — Portare din propunere (parts/20-acasa-hero.css):
scoparea de prototip devine `#heroSlider` (id-ul REAL
emis de home.php); `#hps-2` devine :nth-of-type(2)
fiindca id-ul slide-ului e `hps-`;
`.ct-hero-trust` scos (INTEGRARE §13 — ramane
`.benefits-bar`); banca de imagini `data-ct-bg`
inlocuita de `
…
…⚠ `--ct-frame-bg` TREBUIE sa fie culoarea suprafetei de DEDESUBT: rama e desenata ca un octogon plin din care se decupeaza un octogon mai mic, in culoarea fundalului. Implicit `--color-bg`. Pe un `.ct-card` pui `--ct-frame-bg:var(--color-white)`, pe `.ct-card--raised` pui `var(--ct-surface-2)`. Peste o TEXTURA nu o folosi — se vede plombajul. */ .ct-frame{ position: relative; isolation: isolate; /* fara el, octogoanele de pe z-index:-1 fug sub fundalul sectiunii si rama dispare */ --ct-frame-cut: 16px; padding: var(--s6); } .ct-frame::before, .ct-frame::after{ content: ""; position: absolute; pointer-events: none; clip-path: polygon( var(--ct-frame-cut) 0, calc(100% - var(--ct-frame-cut)) 0, 100% var(--ct-frame-cut), 100% calc(100% - var(--ct-frame-cut)), calc(100% - var(--ct-frame-cut)) 100%, var(--ct-frame-cut) 100%, 0 calc(100% - var(--ct-frame-cut)), 0 var(--ct-frame-cut)); } /* octogonul plin, in culoarea firului */ .ct-frame::before{ inset: 0; z-index: -1; background: var(--ct-frame-color, var(--ct-line-control)); } /* octogonul decupat din interior — lasa vizibil doar firul de 1px */ .ct-frame::after{ inset: 1px; z-index: -1; background: var(--ct-frame-bg, var(--color-bg)); --ct-frame-cut: 15px; } /* ═══════════════════════════════════════════════════════════ 4. MARCA DREPT ORNAMENT — .ct-mark ═══════════════════════════════════════════════════════════ Frunza din logo, mare, la 4-6% opacitate, in coltul benzilor mari. NICIODATA peste text, NICIODATA peste mancare — sta pe un strat negativ, sub tot continutul, si e `pointer-events:none`. Filigranul e colorat din TEMA: imaginea intra ca `mask`, iar culoarea vine din `background-color`. Asa merge `var()` — spre deosebire de o imagine pusa direct in `background-image`, unde culoarea ar fi a fisierului. FOLOSIRE
…continutul…
…
…
⚠ Nu-l combina cu `.ct-tex` pe acelasi element: acele de brad fac deja
treaba asta pe suprafata lor. Grainul e pentru gradientii CURATI.
⚠ E o singura dala de 160px, tiled — se randeaza o data, nu costa la
derulare (spre deosebire de un `filter` pe element mare).
─────────────────────────────────────────────────────────── */
.ct-noise{
position: relative;
isolation: isolate;
}
.ct-noise::after{
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit; /* coltul patrat al grainului peste un panou
rotunjit se vede — masurat, nu presupus */
opacity: var(--ct-noise-o, .035);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
background-repeat: repeat;
mix-blend-mode: overlay;
}
/* ═══════════════════════════════════════════════════════════
6. MISCARE — plasa de siguranta
═══════════════════════════════════════════════════════════
Niciun utilitar de mai sus nu se anima singur: aurele nu pulseaza,
textura nu se deruleaza, filigranul nu se roteste. Blocul de mai jos
exista ca oricine adauga ulterior o tranzitie pe clasele astea sa nu
scape de regula.
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.ct-tex::before,
.ct-glow::before,
.ct-corner::before,
.ct-corner--hover::before,
.ct-frame::before,
.ct-frame::after,
.ct-mark,
.ct-noise::after{
animation: none;
transition: none;
}
}
/* ══════════════════════════════════════════════════════════════
10-antet.css
══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
CETINIS — antet, navigatie, cautare, mini-cos, meniu mobil (T2)
Ultima modificare: 2026-08-30 02:05
Modificari:
2026-08-30 02:05 — X-ul meniului de pe telefon isi primeste inapoi pastila
verde (regula `#navbarToggle{background:none}`, selector de ID,
stergea pastila nucleului si ramanea cerneala inchisa pe fundal
inchis — contrast 1.01). Sub 380px se ascunde tot randul cu
orele, nu doar textul: ramanea iconita de ceas singura.
2026-08-28 18:10 — Portare din C:\tmp\cetinis\design\parts\10-antet.css
pe contractele REALE ale platformei CloudShop.
───────────────────────────────────────────────────────────
CE S-A SCHIMBAT FATA DE PROTOTIP (si de ce)
1. `#siteNavbar` RAMANE — nu era scop artificial: id-ul exista in
`templates/partials/header.php`. La fel `#navbarSearchBar`, `#miniCart`,
`#navbarMenu`, `#navbarToggle`, `#navbarCartCloseMobile`.
2. MENIUL SI HAMBURGERUL SE MUTA SUB pe mobil (`main.js`, portal
anti-iOS). Deci `#siteNavbar .navbar-menu` ar inceta sa se aplice fix
cand meniul e deschis. Toate regulile de meniu sunt scopate pe
`#navbarMenu` / `#navbarToggle`, nu pe antet. Aceeasi capcana la
cautare (`#navbarSearchBar`) si la mini-cos (`#miniCart`).
3. ANTETUL RAMANE `position: sticky` (contractul platformei, comandat de
cele 4 setari `general.header_sticky_*`), NU `fixed` ca in prototip.
Consecinta: banda utilitara NU se mai retrage la derulare — cu antet in
flux, micsorarea lui ar impinge tot continutul in sus cu 36px, adica un
salt vizibil. `.navbar-spacer` ramane 0, ca in nucleu.
4. ICOANELE: spriteul `#ct-i-*` a disparut. Pe situl real sunt
`` din Lucide self-hostat. Regulile tintesc
elementul (`.ct-topbar-item i`), nu clasa `.ct-ico`, ca sa nu depinda
de fragmentul de icoane.
5. X-UL PANOULUI MOBIL nu mai e `.ct-menu-close` scris de noi: platforma
transforma deja hamburgerul in X de 44px pe culoarea marcii si il muta
peste panou (`body.menu-open .navbar-menu-btn`, navbar.css). Aici il
REASEZAM in coltul panoului lateral (panoul are 400px, nu tot ecranul).
Un al doilea X ar fi cerut si JS propriu in sablon.
6. LATIMEA randului o da `.container` din Bootstrap, ca in restul sitului.
Prototipul folosea `--wrap`; aici nu se scrie `max-width`, altfel
antetul s-ar termina pe alta linie verticala decat continutul paginii.
7. Tokenii `--ct-*`, `--s*`, `--r*`, `--f-*` vin din `00-fundatie.css`.
Culorile `--color-*` vin din Setari → Identitate. Nu se redefineste
NICIUNA aici.
═══════════════════════════════════════════════════════════ */
/* ═══ 1. ANTETUL ═══════════════════════════════════════════════════════ */
#siteNavbar{
--ct-topbar-h: 36px;
background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
border-bottom: 0;
-webkit-backdrop-filter: blur(16px) saturate(1.15);
backdrop-filter: blur(16px) saturate(1.15);
transition: background-color var(--t) var(--ease),
box-shadow var(--t) var(--ease);
}
/* firul de 1px care se stinge spre capete — semnatura liniara a marcii.
Inlocuieste `border-bottom` plat din navbar.css (stins mai sus). */
#siteNavbar::after{
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
pointer-events: none;
background-image: linear-gradient(90deg,
transparent 0%,
var(--ct-line-soft) 10%,
color-mix(in srgb, var(--color-primary) 55%, var(--ct-line)) 50%,
var(--ct-line-soft) 90%,
transparent 100%);
}
/* la derulare antetul se inchide la culoare si capata umbra (clasa o pune main.js) */
#siteNavbar.navbar-scrolled{
background-color: color-mix(in srgb, var(--color-bg) 97%, #000);
box-shadow: 0 14px 34px -20px #000;
}
/* Cat e deschis un panou, antetul NU are voie sa poarte transform sau filtru:
ambele l-ar face containing-block pentru copiii `position:fixed` (capcana
iOS din contractul platformei). Pentru meniu regula exista deja in
navbar.css; aici o completam pentru cos. */
body.cart-open #siteNavbar{
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
will-change: auto !important;
}
/* ═══ 2. BANDA UTILITARA (ct-*, nu exista in nucleu) ═══════════════════
Marcajul vine din `theme/templates/partials/header.php`. Textele: programul
din Setari → Adresa, telefonul din Setari → Contact. Zero valoare scrisa
in CSS sau in sablon. Structura: .ct-topbar > .container.ct-topbar-inner,
ca sa cada pe ACEEASI linie verticala cu randul principal. */
#siteNavbar .ct-topbar{
height: var(--ct-topbar-h);
background-color: color-mix(in srgb, var(--color-bg) 55%, #000);
border-bottom: 1px solid var(--ct-line-soft);
overflow: hidden;
}
#siteNavbar .ct-topbar-inner{
height: 100%;
display: flex;
align-items: center;
gap: var(--s5);
font-size: 12.5px;
line-height: 1;
}
#siteNavbar .ct-topbar-item{
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0;
color: var(--ct-text-2);
white-space: nowrap;
}
#siteNavbar .ct-topbar-item i{ font-size: 14px; color: var(--ct-text-3); line-height: 1; }
#siteNavbar .ct-topbar-hours{ color: var(--ct-text-2); font-variant-numeric: tabular-nums; }
#siteNavbar .ct-topbar-sep{ color: var(--ct-line-control); }
#siteNavbar .ct-topbar-zone{ margin-inline-start: auto; }
#siteNavbar .ct-topbar-phone{
color: var(--ct-text-2);
text-decoration: none;
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: var(--r-pill);
padding: .3rem .55rem;
margin-inline-end: -.55rem;
position: relative;
transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* banda are doar 36px inaltime, deci tinta se intinde cu un strat invizibil,
nu cu inaltimea benzii — 44x44 fara sa se miste nimic */
#siteNavbar .ct-topbar-phone::after{
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
#siteNavbar .ct-topbar-phone:hover{
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
#siteNavbar .ct-topbar-phone:hover i{ color: var(--color-primary); }
/* ═══ 3. RANDUL PRINCIPAL ══════════════════════════════════════════════ */
#siteNavbar .navbar-inner{
padding: .7rem 0;
display: flex;
align-items: center;
gap: var(--s5);
}
#siteNavbar .navbar-logo{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
text-decoration: none;
border-radius: var(--r-sm);
min-height: var(--ct-tap);
}
#siteNavbar .navbar-logo img{
display: block;
height: var(--logo-height, 40px);
width: auto;
transition: transform var(--t) var(--ease), filter var(--t) var(--ease);
}
#siteNavbar .navbar-logo:hover img{
transform: translateY(-1px);
filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--color-primary) 40%, transparent));
}
/* Marcajul meniului de pe telefon exista mereu in DOM; pe calculator nu se vede.
Ascuns AICI, in afara media query-ului, ca sa nu depinda de ordinea regulilor. */
.ct-mm-cap,
.ct-mm-shop{ display: none; }
/* ═══ 4. MENIUL ════════════════════════════════════════════════════════
Scopat pe `#navbarMenu`, NU pe `#siteNavbar .navbar-menu`: pe mobil
`main.js` muta nodul sub . */
#navbarMenu{
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--s4);
}
#navbarMenu .navbar-nav{
display: flex;
flex-direction: row;
align-items: center;
gap: .125rem;
list-style: none;
margin: 0;
padding: 0;
}
#navbarMenu .nav-item{ position: relative; }
#navbarMenu .nav-link{
display: inline-flex;
align-items: center;
gap: .42rem;
position: relative;
min-height: 40px;
padding: .5rem .78rem;
font-family: var(--f-body);
font-size: 14.5px;
font-weight: 600;
letter-spacing: .005em;
color: var(--ct-text-2);
text-decoration: none;
border: 0;
border-radius: var(--r-sm);
background: none;
cursor: pointer;
transition: color var(--t-fast) var(--ease);
}
#navbarMenu .nav-link:hover{ color: var(--color-text); }
/* elementul activ: SUBLINIERE in primary, nu fundal plin */
#navbarMenu .nav-link.active{ color: var(--color-text); font-weight: 600; }
#navbarMenu .nav-link.active::after{
content: '';
display: block;
position: absolute;
left: .78rem; right: .78rem;
bottom: 2px;
height: 2px;
border-radius: 2px;
background-image: linear-gradient(90deg,
color-mix(in srgb, var(--color-primary) 22%, transparent),
var(--color-primary) 45%,
color-mix(in srgb, var(--color-primary) 22%, transparent));
}
#navbarMenu .nav-link .nav-icon{
font-size: 16px;
color: var(--ct-text-3);
transition: color var(--t-fast) var(--ease);
}
#navbarMenu .nav-link:hover .nav-icon,
#navbarMenu .nav-link.active .nav-icon{ color: var(--color-primary); }
#navbarMenu .nav-arrow{
margin-inline-start: .1rem;
transition: transform var(--t) var(--ease);
}
#navbarMenu .nav-item:hover .nav-arrow,
#navbarMenu .nav-item:focus-within .nav-arrow{ transform: rotate(180deg); }
/* ── dropdownul de categorii ────────────────────────────────────────── */
#navbarMenu .nav-dropdown{
position: absolute;
top: calc(100% + .7rem);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 274px;
padding: .5rem;
background-color: var(--ct-surface-2);
border: 1px solid var(--ct-line);
border-radius: var(--r-lg);
box-shadow: 0 26px 50px -26px #000,
0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
opacity: 0;
visibility: hidden;
z-index: var(--z-dropdown, 100);
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
/* puntea invizibila dintre link si panou, ca mouse-ul sa nu cada intre ele */
#navbarMenu .nav-dropdown::before{
content: '';
position: absolute;
top: -.7rem; left: 0; right: 0;
height: .7rem;
}
#navbarMenu .nav-item:hover .nav-dropdown,
#navbarMenu .nav-item:focus-within .nav-dropdown{
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
#navbarMenu .nav-dropdown-item{
display: flex;
align-items: center;
gap: .7rem;
padding: .58rem .75rem;
min-height: 40px;
font-size: 14px;
font-weight: 500;
color: var(--ct-text-2);
text-decoration: none;
border-radius: var(--r-sm);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#navbarMenu .nav-dropdown-item:hover{
background-color: var(--ct-surface-3);
color: var(--color-text);
}
#navbarMenu .nav-dropdown-item .nav-dropdown-icon{
font-size: 17px;
width: 22px;
color: var(--color-primary);
text-align: center;
}
/* contorul de produse: nucleul il randeaza cu `style=` inline (culoare +
margine), deci aici se regleaza doar ce NU e scris inline. */
#navbarMenu .nav-dropdown-item small{ font-variant-numeric: tabular-nums; }
/* ── butonul de telefon: la un restaurant cu livrare e actiunea principala.
In nucleu e `display:none` implicit; temele care il vor il aprind. ── */
#navbarMenu .navbar-menu-call{
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 40px;
padding: .45rem .95rem;
border-radius: var(--r-pill);
text-decoration: none;
font-weight: 700;
font-size: 14px;
color: var(--ct-ember);
background-color: var(--ct-ember-soft);
border: 1px solid color-mix(in srgb, var(--ct-ember) 34%, transparent);
transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
#navbarMenu .navbar-menu-call:hover{
background-color: var(--ct-ember);
color: var(--color-on-accent);
box-shadow: var(--ct-glow-ember);
}
#navbarMenu .navbar-menu-call:hover i{ color: var(--color-on-accent); }
#navbarMenu .navbar-menu-call:active{ transform: translateY(1px); }
#navbarMenu .navbar-menu-call-ico{ display: inline-flex; font-size: 15px; }
#navbarMenu .navbar-menu-call-num{ font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* ═══ 5. ICOANELE DIN DREAPTA ══════════════════════════════════════════ */
#siteNavbar .navbar-icons{
display: flex;
align-items: center;
gap: .15rem;
flex: 0 0 auto;
}
#siteNavbar .navbar-icon-btn{
position: relative;
width: 42px; height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
border-radius: var(--r-sm);
color: var(--ct-text-2);
font-size: 19px;
cursor: pointer;
text-decoration: none;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#siteNavbar .navbar-icon-btn:hover{
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
#siteNavbar .navbar-icon-btn .badge{
position: absolute;
top: 1px; right: 1px;
min-width: 18px; height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--ct-ember);
color: var(--color-on-accent);
font-family: var(--f-body);
font-size: 10.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
border-radius: var(--r-pill);
border: 2px solid var(--color-bg);
}
#siteNavbar .navbar-icon-btn .badge:empty{ display: none; }
#siteNavbar .navbar-icon-btn.navbar-cart-btn{
background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-primary);
}
#siteNavbar .navbar-icon-btn.navbar-cart-btn:hover{
background-color: var(--color-primary);
color: var(--color-on-primary);
}
#siteNavbar .mini-cart-wrapper{ position: relative; }
/* ═══ 6. CAUTAREA (overlay) ════════════════════════════════════════════
Se muta sub cat e deschisa (main.js), deci se scopeaza pe id. */
#navbarSearchBar{
padding-top: 16vh;
background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: opacity var(--t) var(--ease), visibility var(--t);
}
#navbarSearchBar .navbar-search-inner{
max-width: 680px;
padding-inline: var(--gut);
gap: .75rem;
transform: translateY(-14px) scale(.98);
transition: transform var(--t) var(--ease-out);
}
#navbarSearchBar.open .navbar-search-inner{ transform: none; }
#navbarSearchBar .navbar-search-input{
min-height: 56px;
padding: .95rem 1.35rem;
font-family: var(--f-body);
font-size: 17px;
color: var(--color-text);
background-color: var(--ct-surface-2);
border: 1px solid var(--ct-line-control);
border-radius: var(--r-pill);
outline: none;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#navbarSearchBar .navbar-search-input::placeholder{ color: var(--ct-text-3); opacity: 1; }
#navbarSearchBar .navbar-search-input:focus{
border-color: var(--color-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
#navbarSearchBar .navbar-search-close{
width: var(--ct-tap); height: var(--ct-tap);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--color-text);
background-color: var(--ct-surface-3);
border: 1px solid var(--ct-line);
border-radius: 50%;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), transform var(--t) var(--ease),
color var(--t-fast) var(--ease);
}
#navbarSearchBar .navbar-search-close:hover{
background-color: var(--color-primary);
color: var(--color-on-primary);
transform: rotate(90deg);
}
#navbarSearchBar .ct-search-hint{
margin-top: var(--s4);
max-width: 680px;
padding-inline: var(--gut);
color: var(--ct-text-3);
font-size: 13px;
text-align: center;
}
#navbarSearchBar .ct-search-hint b{ color: var(--ct-text-2); font-weight: 600; }
/* ═══ 7. MINI-COSUL ════════════════════════════════════════════════════
Pe mobil devine copil direct al (regula iOS a platformei) — de
aceea toate regulile lui se scriu pe #miniCart, nu sub #siteNavbar. */
#miniCart{
position: absolute;
top: calc(100% + .55rem);
right: 0;
width: 372px;
max-height: min(72vh, 540px);
display: flex;
flex-direction: column;
background-color: var(--ct-surface-2);
border: 1px solid var(--ct-line);
border-radius: var(--r-lg);
box-shadow: 0 30px 60px -28px #000,
0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
z-index: calc(var(--z-navbar, 1000) + 40);
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
#miniCart.open{ opacity: 1; visibility: visible; transform: none; }
#miniCart .mini-cart-header{
display: flex;
align-items: center;
gap: .6rem;
padding: var(--s4) var(--s4) var(--s3);
border-bottom: 1px solid var(--ct-line-soft);
}
#miniCart .mini-cart-header h4{
margin: 0;
font-family: var(--f-display);
font-size: 18px;
font-weight: 500;
color: var(--color-text);
}
#miniCart .mini-cart-count{
color: var(--ct-text-3);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
#miniCart .mini-cart-close{
margin-inline-start: auto;
width: var(--ct-tap); height: var(--ct-tap);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--ct-text-2);
background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
border: 1px solid var(--ct-line);
border-radius: var(--r-sm);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#miniCart .mini-cart-close:hover{
background-color: var(--color-primary);
color: var(--color-on-primary);
}
#miniCart .mini-cart-items{
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s2) var(--s3);
}
#miniCart .mini-cart-item{
display: flex;
align-items: center;
gap: .75rem;
padding: .6rem .5rem;
}
#miniCart .mini-cart-item + .mini-cart-item{ border-top: 1px solid var(--ct-line-soft); }
#miniCart .mini-cart-item-image{
width: 56px; height: 56px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: var(--r-sm);
background-image: radial-gradient(circle at 50% 55%,
color-mix(in srgb, var(--ct-ember) 26%, transparent) 0%, transparent 70%);
}
#miniCart .mini-cart-item-image img{
width: 56px; height: 56px;
object-fit: contain;
display: block;
}
#miniCart .mini-cart-item-details{ min-width: 0; flex: 1 1 auto; }
#miniCart .mini-cart-item-title{
font-size: 14px;
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#miniCart .mini-cart-item-meta{
margin-top: 2px;
font-size: 12.5px;
color: var(--ct-text-3);
font-variant-numeric: tabular-nums;
}
#miniCart .mini-cart-item-price{ margin-top: 3px; color: var(--color-text); }
#miniCart .mini-cart-item-remove{
width: 36px; height: 36px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--ct-text-3);
background: none;
border: 1px solid transparent;
border-radius: var(--r-sm);
cursor: pointer;
transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
#miniCart .mini-cart-item-remove:hover{
color: var(--ct-danger);
background-color: color-mix(in srgb, var(--ct-danger) 14%, transparent);
}
#miniCart .mini-cart-footer{
padding: var(--s3) var(--s4) var(--s4);
border-top: 1px solid var(--ct-line-soft);
background-color: color-mix(in srgb, var(--color-bg) 45%, transparent);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
#miniCart .mini-cart-shipping{
font-size: 12.5px;
color: var(--ct-text-2);
}
#miniCart .mini-cart-shipping strong{ color: var(--ct-ember); font-variant-numeric: tabular-nums; }
#miniCart .mini-cart-shipping.success{ color: var(--ct-ok); }
#miniCart .mini-cart-total{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
margin-bottom: .85rem;
font-size: 13px;
color: var(--ct-text-2);
}
#miniCart .mini-cart-total-amount{ color: var(--color-text); font-variant-numeric: tabular-nums; }
#miniCart .mini-cart-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .55rem;
}
#miniCart .mini-cart-empty{
padding: var(--s7) var(--s5);
text-align: center;
color: var(--ct-text-2);
}
#miniCart .mini-cart-empty-icon{
font-size: 34px;
color: var(--ct-line-control);
margin-bottom: var(--s3);
}
#miniCart .mini-cart-empty p{ margin: 0 0 var(--s4); font-size: 14px; }
/* fundalul mini-cosului — nucleul il creeaza din JS, direct pe
(`.mini-cart-overlay`), deci nu are id propriu. */
.mini-cart-overlay{
background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
}
/* ═══ 8. MOBIL ═════════════════════════════════════════════════════════ */
@media (max-width: 991.98px){
#siteNavbar .navbar-inner{ gap: .6rem; padding: .6rem 0; }
#siteNavbar .navbar-logo img{ height: var(--logo-height-mobile, 34px); }
#siteNavbar .navbar-icons{ margin-inline-start: auto; gap: 0; }
#siteNavbar .navbar-icon-btn{ width: var(--ct-tap); height: var(--ct-tap); }
/* hamburgerul (nucleul il porteaza sub cat e meniul deschis) */
#navbarToggle{
width: var(--ct-tap); height: var(--ct-tap);
flex: 0 0 auto;
font-size: 21px;
color: var(--ct-text-2);
background: none;
border: 0;
border-radius: var(--r-sm);
}
#navbarToggle:hover{ background: none; color: var(--color-primary); }
/* PANOUL PE TOT ECRANUL (cerere user 2026-08-30). Era o fasie laterala de
min(88vw, 400px), care lasa o dunga din pagina la dreapta si arata a sertar
de administrare, nu a meniu de restaurant. Acum acopera tot: marca sus,
traseul principal, apoi meniul propriu-zis cu categoriile pe doua coloane. */
#navbarMenu{
position: fixed;
inset: 0;
width: 100%;
z-index: calc(var(--z-navbar, 1000) + 50);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: calc(env(safe-area-inset-top, 0px) + var(--s5)) 0
calc(env(safe-area-inset-bottom, 0px) + var(--s6));
background-color: var(--color-bg);
border-right: 0;
box-shadow: none;
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(-100%);
visibility: hidden;
transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
#navbarMenu.open{ transform: none; visibility: visible; }
/* X-UL PANOULUI. De cand panoul e pe TOT ecranul, X-ul se intoarce in coltul
lui dreapta-sus — exact unde il pune nucleul. Ramane scris aici fiindca tot
noi trebuie sa-i redam pastila (vezi mai jos) si sa-l coboram sub bara de
stare a telefonului. `!important` bate `!important`-ul din navbar.css. */
html body.menu-open #navbarToggle{
top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
right: 12px !important;
left: auto !important;
/* PASTILA, nu doar cerneala. Nucleul o pune pe `body.menu-open .navbar-menu-btn`
(0,2,0), dar regula noastra `#navbarToggle{background:none}` de mai jos e
selector de ID (1,0,0) si o sterge — ramanea cerneala inchisa pe fundalul
inchis al panoului, contrast 1.01:1, adica X-ul devenea invizibil
(masurat 30 aug). Cu pastila la loc: 9.7:1. */
background: var(--color-primary) !important;
color: var(--color-on-primary) !important;
border-radius: 12px;
box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
#navbarMenu .navbar-nav{
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
padding: var(--s3) var(--s4);
}
#navbarMenu .nav-item{ width: 100%; }
#navbarMenu .nav-link{
width: 100%;
min-height: var(--ct-tap);
padding: .9rem .25rem;
font-size: 16px;
border-radius: 0;
border-bottom: 1px solid var(--ct-line-soft);
}
#navbarMenu .nav-link.active::after{
left: -.85rem; right: auto;
top: 50%; bottom: auto;
width: 3px; height: 22px;
transform: translateY(-50%);
background-image: none;
background-color: var(--color-primary);
}
#navbarMenu .nav-link .nav-arrow{ margin-inline-start: auto; }
#navbarMenu .nav-dropdown{
position: static;
transform: none;
min-width: 0;
padding: .25rem 0 .5rem .9rem;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
}
#navbarMenu .nav-dropdown::before{ display: none; }
#navbarMenu .nav-dropdown-item{ min-height: var(--ct-tap); }
#navbarMenu .navbar-menu-call{
margin: var(--s5) var(--s4) 0;
min-height: 52px;
justify-content: center;
font-size: 15.5px;
}
/* ═══ MENIUL DE PE TELEFON — capul cu marca ══════════════════════════
Panoul acopera tot ecranul, deci acopera si antetul cu logoul. Fara
randul asta omul ramane intr-un ecran fara niciun semn unde se afla. */
.ct-mm-cap{
display: flex !important;
flex-direction: column;
gap: 4px;
padding: 0 var(--s4) var(--s5);
margin-bottom: var(--s4);
border-bottom: 1px solid var(--ct-line-soft);
}
.ct-mm-logo{ height: 34px; width: auto; align-self: flex-start; }
.ct-mm-tag{
font-family: var(--f-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ct-text-3);
}
/* ═══ „Vezi tot meniul" + CATEGORIILE PE DOUA COLOANE ═════════════════ */
.ct-mm-shop{ display: block !important; padding: var(--s5) var(--s4) 0; }
.ct-mm-all{
display: flex;
align-items: center;
gap: var(--s4);
min-height: 62px;
padding: var(--s3) var(--s4);
border-radius: var(--r);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.ct-mm-all:active{ background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.ct-mm-all-ico{
display: grid;
place-items: center;
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: var(--r-sm);
background-color: var(--color-primary);
color: var(--color-on-primary);
font-size: 19px;
}
.ct-mm-all-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-mm-all-txt strong{
font-family: var(--f-display);
font-size: 17px;
font-weight: 500;
color: var(--color-text);
}
.ct-mm-all-txt small{ font-size: 12.5px; color: var(--ct-text-3); }
.ct-mm-all-go{ margin-inline-start: auto; font-size: 18px; color: var(--color-primary); }
.ct-mm-title{
margin: var(--s5) 0 var(--s3);
font-family: var(--f-body);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ct-text-3);
}
/* DOUA COLOANE — ca la La Pascan. `minmax(0, 1fr)`, nu `1fr`: fara el, un
nume lung de categorie umfla pista si iese din ecran. */
.ct-mm-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
}
.ct-mm-cat{
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 84px;
padding: var(--s4) var(--s3);
border-radius: var(--r);
border: 1px solid var(--ct-line);
background-color: var(--ct-surface-2);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.ct-mm-cat:active{
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
background-color: color-mix(in srgb, var(--color-primary) 8%, var(--ct-surface-2));
}
.ct-mm-cat-ico{ font-size: 21px; color: var(--color-primary); line-height: 1; }
.ct-mm-cat-name{
font-family: var(--f-body);
font-size: 14px;
font-weight: 600;
line-height: 1.25;
overflow-wrap: break-word;
}
.ct-mm-cat-n{
position: absolute;
top: var(--s3);
right: var(--s3);
min-width: 22px;
padding: 1px 6px;
border-radius: var(--r-pill);
background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-primary);
font-size: 11px;
font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* sub 360px numele lungi n-ar mai incapea pe doua coloane */
@media (max-width: 359.98px){
.ct-mm-grid{ grid-template-columns: minmax(0, 1fr); }
.ct-mm-cat{ min-height: 0; flex-direction: row; align-items: center; gap: var(--s3); }
.ct-mm-cat-n{ position: static; margin-inline-start: auto; }
}
/* mini-cosul devine panou pe tot ecranul (contractul platformei) */
#miniCart{
position: fixed;
inset: 0;
width: auto;
max-height: none;
border: 0;
transform: translateY(2%);
z-index: calc(var(--z-navbar, 1000) + 55);
}
#miniCart .mini-cart-header{ padding: var(--s4); }
#miniCart .mini-cart-header h4{ font-size: 20px; }
#miniCart .mini-cart-footer{
border-radius: 0;
padding-bottom: max(var(--s5), env(safe-area-inset-bottom));
}
/* X-ul care ia locul hamburgerului cat e cosul deschis */
#navbarCartCloseMobile{
width: var(--ct-tap); height: var(--ct-tap);
font-size: 24px;
color: var(--color-text);
background: none;
border: 0;
border-radius: var(--r-sm);
}
}
@media (max-width: 767.98px){
#siteNavbar .ct-topbar-zone{ display: none; }
#siteNavbar .ct-topbar-inner{ gap: var(--s4); justify-content: space-between; }
#siteNavbar .ct-topbar-phone{ margin-inline-start: 0; }
#miniCart .mini-cart-actions{ grid-template-columns: 1fr; }
#navbarSearchBar{ padding-top: 10vh; }
/* 16px = pragul sub care iOS mareste singur pagina la focus */
#navbarSearchBar .navbar-search-input{ font-size: 16px; }
}
/* Sub 380px orele nu mai incap. Se ascunde TOT randul, nu doar textul: pana acum
ramanea iconita de ceas singura in stanga, fara nimic langa ea (masurat 30 aug). */
@media (max-width: 380px){
#siteNavbar .ct-topbar-hours,
#siteNavbar .ct-topbar-sep,
#siteNavbar .ct-topbar-item:has(.ct-topbar-hours){ display: none; }
}
/* ═══ 9. MISCAREA — se opreste la cerere ══════════════════════════════ */
@media (prefers-reduced-motion: reduce){
#siteNavbar,
#navbarMenu,
#navbarMenu .nav-dropdown,
#siteNavbar .navbar-logo img,
#miniCart,
#navbarSearchBar,
#navbarSearchBar .navbar-search-inner{ transition: none !important; }
#navbarSearchBar .navbar-search-close:hover{ transform: none; }
}
/* ══════════════════════════════════════════════════════════════
12-insigna-delivery.css
══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
CETINIS — insigna „Meniu exclusiv delivery" din antet + butonul
„Meniu" (fost „Filtre") de pe /shop si /categorie
Ultima modificare: 2026-09-15 21:40
Modificari:
2026-09-15 21:40 — Creare: insigna de langa logo (4 trepte de latime,
masurate pe antetul real) + iconita butonului „Meniu".
───────────────────────────────────────────────────────────
DE UNDE VINE MARCAJUL
`theme/templates/partials/header.php`, blocul [CETINIS] (5):
.ct-dlv > .ct-dlv-ico > i.icon-truck
> .ct-dlv-txt > .ct-dlv-a („Meniu exclusiv") + .ct-dlv-b („delivery")
Textul vine din `general.header_delivery_badge`; impartirea pe doua
bucati o face PHP-ul (echilibrat pe numar de litere), ca pe telefon sa
poata sta pe doua randuri fara sa depinda de latimea fontului.
SPATIUL MASURAT (15 sep 2026, antetul viu, fara insigna):
360px, vizitator → ~84px liberi intre logo si iconite
360px, client logat (apare inima de favorite, +44px) → ~40px
1000px → navigatia mai are ~79px de rezerva
1200px+ → peste 250px de rezerva
De aici cele patru trepte de mai jos. Iconitele raman de 44px — nu se
micsoreaza tinte de atingere ca sa incapa o insigna.
Tokenii `--ct-*`, `--s*`, `--r*`, `--t*` vin din `00-fundatie.css`;
culorile din Setari → Identitate. Zero hex nou.
═══════════════════════════════════════════════════════════ */
/* ═══ 1. INSIGNA — calculator lat (≥1200px): un singur rand ════════════ */
#siteNavbar .ct-dlv{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .55rem;
margin: 0;
padding: .3rem .9rem .3rem .3rem;
border-radius: var(--r-pill);
border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
background-color: color-mix(in srgb, var(--color-primary) 9%, transparent);
background-image: linear-gradient(120deg,
color-mix(in srgb, var(--color-primary) 16%, transparent) 0%,
transparent 70%);
box-shadow: inset 0 1px 0 rgba(var(--ct-lift-rgb), .06);
color: var(--color-text);
font-family: var(--f-body);
white-space: nowrap;
cursor: default;
user-select: none;
}
/* pastila cu iconita: plina, pe culoarea marcii */
#siteNavbar .ct-dlv-ico{
position: relative;
flex: 0 0 auto;
display: grid;
place-items: center;
width: 30px; height: 30px;
border-radius: 50%;
background-color: var(--color-primary);
color: var(--color-on-primary);
font-size: 15px;
line-height: 1;
box-shadow: var(--ct-glow-leaf);
}
#siteNavbar .ct-dlv-ico i{ line-height: 1; }
#siteNavbar .ct-dlv-txt{
display: inline-flex;
align-items: baseline;
gap: .3em;
font-size: 13px;
line-height: 1.15;
letter-spacing: .005em;
}
#siteNavbar .ct-dlv-a{ color: var(--ct-text-2); font-weight: 600; }
#siteNavbar .ct-dlv-b{ color: var(--color-text); font-weight: 800; }
/* ═══ 2. PULSUL — foarte discret, doar daca omul nu a cerut miscare redusa ═
Un inel care se desprinde din pastila la ~3,6s. Scris DOAR sub
`no-preference`, deci la `reduce` nici nu exista animatia. */
@media (prefers-reduced-motion: no-preference){
#siteNavbar .ct-dlv-ico::after{
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--color-primary);
opacity: 0;
pointer-events: none;
animation: ctDlvRing 3.6s var(--ease-out) 1.2s infinite;
}
@keyframes ctDlvRing{
0% { opacity: .55; transform: scale(1); }
45%, 100% { opacity: 0; transform: scale(1.75); }
}
}
/* ═══ 3. CALCULATOR INGUST (992–1199px): doua randuri + navigatie stransa ══
Intre 992 si 1199px `.container` are MEREU 960px, deci masuratoarea de la
1000px e valabila pentru tot intervalul. Acolo navigatia mai avea ~79px
liberi, iar insigna pe doua randuri are ~131px: butonul de telefon se rupea
pe doua randuri („0751 420 / 234", masurat). Se recupereaza diferenta din
golurile randului si din spatierea interioara a linkurilor (nu din textul
lor), iar butonul de telefon nu mai are voie sa se rupa. */
@media (min-width: 992px) and (max-width: 1199.98px){
#siteNavbar .ct-dlv{ padding: .22rem .7rem .22rem .22rem; gap: .45rem; }
#siteNavbar .ct-dlv-ico{ width: 26px; height: 26px; font-size: 13px; }
#siteNavbar .ct-dlv-txt{
flex-direction: column;
align-items: flex-start;
gap: 0;
font-size: 11.5px;
line-height: 1.12;
}
#siteNavbar .navbar-inner{ gap: var(--s3); }
#navbarMenu{ gap: var(--s2); }
#navbarMenu .nav-link{ padding-inline: .5rem; }
#navbarMenu .nav-link.active::after{ left: .5rem; right: .5rem; }
#navbarMenu .navbar-menu-call{ padding-inline: .7rem; white-space: nowrap; }
}
/* ═══ 4. TELEFON / TABLETA (<992px): doua randuri, compacta ════════════ */
@media (max-width: 991.98px){
#siteNavbar .ct-dlv{
padding: .2rem .55rem .2rem .2rem;
gap: .35rem;
max-height: 40px;
}
#siteNavbar .ct-dlv-ico{ width: 24px; height: 24px; font-size: 12.5px; box-shadow: none; }
#siteNavbar .ct-dlv-txt{
flex-direction: column;
align-items: flex-start;
gap: 0;
font-size: 11px;
line-height: 1.1;
letter-spacing: 0;
}
/* Randul de pe telefon are `justify-content: space-between` si iconitele cu
margini `auto` (navbar.css + mobile-wow.css). Insigna se lipeste de logo,
iconitele raman centrate in ce ramane. */
#siteNavbar .ct-dlv{ margin-inline-start: -.1rem; }
}
/* LATIMI MASURATE ale insignei pe telefon (15 sep, Manrope):
doua randuri + pastila = 121px · trei randuri + pastila = 74px · doar pastila = 30px
Loc liber langa logo = latimea ecranului − 276px (vizitator) sau − 320px (logat),
plus golul de 6px al insignei. De aici pragurile:
vizitator: doua randuri de la 408px, trei randuri 356–407px, doar pastila sub 356px
logat: doua randuri de la 480px, trei randuri 420–479px, doar pastila sub 420px
(la 390px, logat, trei randuri ieseau cu 14px in afara ecranului — masurat). */
/* Telefon ingust, vizitator (<408px): TREI randuri scurte
(„Meniu / exclusiv / delivery"). `min-content` rupe la fiecare spatiu, deci
latimea = cel mai lung cuvant, nu tot textul. */
@media (max-width: 407.98px){
#siteNavbar .ct-dlv{ padding: .18rem .45rem .18rem .18rem; gap: .3rem; border-radius: 14px; }
#siteNavbar .ct-dlv-ico{ width: 20px; height: 20px; font-size: 11px; }
#siteNavbar .ct-dlv-txt{
display: block;
width: min-content;
white-space: normal;
font-size: 9.5px;
line-height: 1.08;
}
#siteNavbar .ct-dlv-a,
#siteNavbar .ct-dlv-b{ display: inline; }
}
/* Client LOGAT: inima de favorite ocupa inca 44px. Trei randuri sub 480px, iar
sub 420px ramane doar pastila cu iconita — textul nu dispare, trece in
stratul pentru cititoarele de ecran. */
@media (max-width: 479.98px){
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv{
padding: .18rem .45rem .18rem .18rem; gap: .3rem; border-radius: 14px;
}
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-ico{
width: 20px; height: 20px; font-size: 11px;
}
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-txt{
display: block;
width: min-content;
white-space: normal;
font-size: 9.5px;
line-height: 1.08;
}
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-a,
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-b{ display: inline; }
}
@media (max-width: 419.98px){
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv{
padding: 0; border: 0; background: none; box-shadow: none;
}
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-ico{
width: 30px; height: 30px; font-size: 14px;
}
#siteNavbar .navbar-inner:has(.navbar-favorites-btn.is-logged) .ct-dlv-txt{
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
}
/* Sub 356px nici vizitatorul nu mai are loc de text: doar pastila. */
@media (max-width: 355.98px){
#siteNavbar .ct-dlv{ padding: 0; border: 0; background: none; box-shadow: none; }
#siteNavbar .ct-dlv-txt{
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
}
/* ═══ 5. BUTONUL „MENIU" de pe /shop si /categorie ══════════════════════
Textul, `aria-label`-ul si iconita se schimba din `header.php` (blocul
[CETINIS] (6)), cat se construieste pagina — deci nu apare niciodata
„Filtre" pe ecran. Aici doar marimea iconitei Lucide care inlocuieste
`fa-sliders` (Font Awesome si Lucide au alta linie de baza). */
.shop-filter-toggle .ct-menu-ico{
font-size: 17px;
line-height: 1;
color: var(--color-primary);
}
.shop-filter-toggle:hover .ct-menu-ico{ color: currentColor; }
/* ══════════════════════════════════════════════════════════════
20-acasa-hero.css
══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
CETINIȘ — prima pagină: sliderul premium (T3)
Ultima modificare: 2026-09-21 15:20
Modificari:
2026-09-21 15:20 — Incadrarea pozei aleasa din admin (fit_desktop / fit_mobile)
castiga: nucleul emite reguli `#heroSlider #hps-