/* =========================================================
MAIN — stiluri desktop-first, în ordinea secțiunilor
Ordinea din : reset → variables → main → responsive
========================================================= */
/* 1. BAZĂ ------------------------------------------------ */
html {
scroll-padding-block-start: var(--gutter);
background: var(--c-cream); /* spațiul din stânga/dreapta peste 1440px */
}
body {
/* pagina nu depășește lățimea artboard-ului (1440px); pe ecrane mai late
stă centrată, cu crem în lateral */
max-inline-size: var(--w-design);
margin-inline: auto;
background: var(--c-cream);
color: var(--c-brick);
font-family: var(--f-letter);
overflow-x: clip; /* siguranță: nimic nu produce scroll orizontal */
}
/* link „Sari la conținut": ascuns până primește focus din tastatură */
.skip-link {
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--gutter);
z-index: 100;
padding: 0.75em 1.25em;
background: var(--c-brown-dark);
color: var(--c-cream);
font-family: var(--f-ui);
font-size: var(--t-small);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
transform: translateY(-120%);
transition: transform 200ms ease;
}
.skip-link:focus-visible { transform: translateY(0); outline-color: var(--c-cream); }
/* text doar pentru cititoarele de ecran */
.sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* 2. COMPONENTE REFOLOSITE (buton, bandă, zid) */
/* 2.1 .btn — o singură componentă, dimensionată de text + padding (nu de lățime/înălțime)
Donează ← link, duce la Stripe
← acțiune în pagină
Centrarea o face părintele (flex column centrat / text-align: center), nu butonul. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-display);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
text-indent: var(--ls-wide); /* recentrează: tracking-ul adaugă spațiu și după ultima literă */
white-space: nowrap;
border-radius: var(--btn-radius);
background: var(--c-brick);
color: var(--c-white);
text-decoration: none;
transition: background-color 0.2s, transform 0.2s;
}
.btn:hover { background: color-mix(in srgb, var(--c-brick) 92%, #000); transform: scale(1.02); }
.btn:active { transform: scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--c-brown-dark); outline-offset: 3px; }
.btn--donate {
font-size: var(--t-btn);
padding: 0.74em 1.80em; /* proporțiile din PDF (454 × 134 la 50px); scara vine din --t-btn */
min-block-size: var(--tap-donate); /* zonă de atins pe telefon */
}
.btn--copy {
font-size: var(--t-copy);
padding: 0.90em 1.69em; /* 168 × 50 la 16.6px */
min-block-size: var(--tap-min); /* zonă de atins pe touch */
min-inline-size: var(--tap-min);
}
.btn--copy[data-state="error"] { background: var(--c-brown-dark); }
/* 2.2 .ticker — banda „DONEAZĂ O CĂRĂMIDĂ", în buclă continuă (§1, §3, §5, §7)
8 ×
![]()
+ aceleași 8