/* ========================================================================== Arcobaleno — compoziție la nivel de pagină ========================================================================== */ @layer pages { /* ================================================================= hero Filmul umple prima fereastră; textul stă peste el, pe aceleași hârtii și pigmenți ca restul site-ului. Marcajul e: .hero > .hero__media (filmul) + .hero__body.shell > .hero__inner Filmul e absolut, iar `.hero__body` e grila obișnuită a site-ului — așa nu ne luptăm cu plasarea în grid pentru un element decorativ. */ /* Eroul umple exact ce rămâne din prima fereastră după bandă și antet, ca să nu fie nevoie de scroll ca să-l vezi întreg. `--banner-h` e măsurat de site.js și pus pe ; cade la 0px când banda e închisă sau lipsește. Sub 48em rămâne `min-block-size`: pe un telefon îngust titlul se rupe pe mai multe rânduri și e mai bine să crească secțiunea decât să tăiem text. */ .hero { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-block-size: calc(100svh - var(--header-h) - var(--banner-h, 0px)); background: var(--ink); color: var(--paper); padding-block: var(--sp-2xl) var(--sp-xl); } @media (min-width: 48em) { .hero { /* `--hero-h` vine din site.js și e exact la pixel; formula din `calc` e rezerva pentru cazul în care scriptul nu rulează. */ block-size: var(--hero-h, calc(100svh - var(--header-h) - var(--banner-h, 0px))); min-block-size: 26rem; } } .hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); } .hero__media video, .hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Ce bandă din cadru rămâne vizibilă după tăiere. 50% = mijlocul; mai mic urcă spre partea de sus a filmării, mai mare coboară. */ object-position: center var(--hero-focus, 50%); /* Filmul se stinge înăuntru după ce primul cadru e gata, ca să nu apară un dreptunghi negru cât se încarcă. */ opacity: 0; transition: opacity 900ms var(--ease-out); } .hero[data-video="on"] .hero__media video, .hero[data-video="off"] .hero__media video { opacity: 1; } /* ATENȚIE, DACĂ FILMUL PARE „TRAS PREA APROAPE” Sursa actuală e verticală: 478×850. Eroul e lat (peste 2:1). Ca să umple toată fereastra, browserul mărește filmarea de ~2,6 ori și păstrează doar o bandă de vreo 25% din înălțimea cadrului — de aici impresia de zoom. Nu e o setare care se poate da la o parte: un dreptunghi înalt nu poate acoperi unul lat fără să fie tăiat. Ce se poate face: 1. O filmare ORIZONTALĂ (16:9, ideal 1920×1080). Se pune peste `assets/video/hero.mp4` și gata — atunci nu se mai taie aproape nimic și arată ca pe site-urile date ca exemplu. 2. Cu filmarea verticală de acum: se alege ce bandă rămâne vizibilă, din `--hero-focus` mai jos. Cadrul tot nu încape întreg. 3. Cadru întreg, cu benzi în lateral — încercat și refuzat. */ .hero { --hero-focus: 50%; } /* ------------------------------------------------ varianta pe două jumătăți `.hero--split`: prima fereastră se taie exact în două coloane egale. În stânga, panoul de cerneală (navy) cu textul, butoanele și sigiliul; în dreapta, filmul, pe toată jumătatea lui. Filmul iese aici din poziționarea absolută și devine celulă de grilă. De aceea și voalul trebuie mutat în aceeași celulă: altfel ar acoperi și panoul din stânga, care n-are ce voala. Sub 62em nu se aplică nimic din toate astea: eroul se poartă ca cel obișnuit, cu filmul pe tot fundalul și textul peste el. */ @media (min-width: 62em) { .hero.hero--split { display: grid; grid-template-columns: 1fr 1fr; /* Jumătățile ating muchiile secțiunii; respirația o dă panoul. Scris cu două clase ca să bată `.hero { padding-block }` de la 64em, care vine mai jos în fișier și altfel ar câștiga pe ordine. */ padding-block: 0; /* Eroul stă exact într-o fereastră: comenzile filmului sunt în colțul lui de jos și trebuie să se vadă fără scroll. Ce e în panou se strânge (vezi plafoanele în vh de mai jos), nu împinge secțiunea mai jos de ecran. */ block-size: var(--hero-h, calc(100svh - var(--header-h) - var(--banner-h, 0px))); min-block-size: 26rem; } .hero--split .hero__body { grid-area: 1 / 1; display: grid; align-content: center; background: var(--ink); padding-block: min(var(--sp-2xl), 3vh); z-index: 1; } /* Titlul și sigiliul, unul lângă altul. Sigiliul nu se strânge (`flex: none`) și e centrat pe înălțimea numelui. */ .hero--split .hero__head { display: flex; align-items: center; gap: clamp(var(--sp-sm), 2.5vi, var(--sp-lg)); } .hero--split .hero__media { position: relative; inset: auto; grid-area: 1 / 2; z-index: 0; } /* Voalul, strâns peste film: întunecă muchia dinspre panou, ca trecerea de la cerneală la imagine să nu fie o tăietură bruscă. */ .hero--split .hero__scrim { position: relative; inset: auto; grid-area: 1 / 2; z-index: 1; background: linear-gradient(to right, color-mix(in oklab, var(--ink) 62%, transparent) 0%, color-mix(in oklab, var(--ink) 12%, transparent) 34%, transparent 100%), radial-gradient(90% 70% at 70% 10%, color-mix(in oklab, var(--ochre) 18%, transparent), transparent 62%); } /* Titlul nu mai are o fereastră întreagă la dispoziție, deci se strânge. Plafonul în vh e obligatoriu: fără el, pe un laptop scund titlul singur împinge panoul mai jos decât ecranul și comenzile filmului ajung sub linia de plutire. */ .hero--split .hero__title { font-size: min(var(--fs-7xl), 11.6vh); max-inline-size: 12ch; } .hero--split .hero__lede { max-inline-size: 34ch; font-size: min(var(--fs-xl), 3.9vh); margin-block-start: min(var(--sp-md), 2.4vh); } .hero--split .hero__actions { margin-block-start: min(var(--sp-lg), 3vh); } /* Butoanele de acțiune se retrag la mărimea obișnuită: în panou vedeta e numele școlii, nu ele. */ .hero--split .hero__actions .btn { font-size: var(--fs-xs); } /* Toate butoanele pe un singur rând. Ca să nu ajungă peste film când fonturile ies mai late (scalarea sistemului), rândul are voie să se strângă: `min-inline-size: 0` lasă butoanele să se împacheteze în loc să împingă în afara coloanei. */ .hero--split .hero__actions { flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; /* Spațiul obișnuit dintre butoane (18px) plus indentarea nu mai încap pe un rând: cele trei grupuri cer 541px într-o coloană de 539. Aici se strânge, ca rândul să rămână unul singur. */ --gap: 0.65rem; } /* Butoanele își strâng și ele burta pe orizontală, ca să rămână loc de rețele pe același rând chiar și cu fonturi mai late. */ .hero--split .hero__actions .btn { padding: 0.82em 1.05em; } .hero--split .hero__actions .socials { align-items: center; gap: 0.5rem; } .hero--split .hero__actions .social { inline-size: 3.3rem; block-size: 3.3rem; aspect-ratio: auto; } .hero--split .hero__actions .social svg { inline-size: 1.45rem; } /* Sigiliul coboară din colț și intră în panou, sub butoane. Rămâne `relative`, nu `static`: inelul și sigla din el sunt poziționate absolut și au nevoie de sigiliu ca reper, altfel se raportează la secțiune și ies cât toată jumătatea. */ .hero--split .hero__seal { position: relative; inset: auto; display: grid; /* Stă lângă titlu, deci nu se strânge și nu-și mai ia margine de sus. */ margin: 0; flex: none; inline-size: min(9.5rem, 15vh); } /* Comenzile filmului rămân peste film, în colțul lui de jos. */ .hero--split .hero__controls { inset-inline-end: calc(var(--gutter) + 4.4rem); inset-block-end: var(--sp-md); z-index: 2; } } /* Voalul: întuneric jos, unde stă textul, și o suflare caldă de ocru sus, ca filmul să se așeze în paleta casei în loc să pară lipit peste ea. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--ink) 92%, transparent) 0%, color-mix(in oklab, var(--ink) 74%, transparent) 34%, color-mix(in oklab, var(--ink) 38%, transparent) 66%, color-mix(in oklab, var(--ink) 46%, transparent) 100%), radial-gradient(120% 80% at 78% 8%, color-mix(in oklab, var(--ochre) 26%, transparent), transparent 60%); } .hero__body { inline-size: 100%; } .hero__inner { display: grid; justify-items: start; gap: 0; } .hero .eyebrow { color: var(--ochre); } .hero__title { font-size: var(--fs-7xl); line-height: 0.98; letter-spacing: -0.036em; font-weight: 440; font-variation-settings: "SOFT" 46, "WONK" 1, "opsz" 144; margin-block-start: var(--sp-sm); max-inline-size: 15ch; color: var(--paper); text-wrap: balance; text-shadow: 0 1px 30px color-mix(in oklab, var(--ink) 55%, transparent); } .hero__welcome { display: block; font-size: 0.44em; letter-spacing: -0.018em; font-weight: 400; color: color-mix(in oklab, var(--paper) 82%, transparent); margin-block-end: 0.24em; } .hero__lede { margin-block-start: var(--sp-md); max-inline-size: 44ch; color: color-mix(in oklab, var(--paper) 84%, transparent); } .hero__actions { margin-block-start: var(--sp-lg); --gap: var(--sp-sm); /* Rândul se întinde, deci pastilele de rețele sociale iau exact înălțimea butoanelor de lângă ele, fără vreo valoare fixă de întreținut. */ --align: stretch; } .hero__actions .socials { align-items: stretch; } .hero__actions .social { block-size: auto; inline-size: auto; aspect-ratio: 1; } .hero .btn--ghost { --btn-fg: var(--paper); --btn-edge: color-mix(in oklab, var(--paper) 42%, transparent); } .hero .btn--ghost:hover { --btn-edge: var(--paper); --btn-bg: color-mix(in oklab, var(--paper) 12%, transparent); } .hero__figures { inline-size: 100%; margin-block-start: var(--sp-xl); padding-block-start: var(--sp-md); border-block-start: 1px solid color-mix(in oklab, var(--paper) 26%, transparent); --fs-4xl: var(--fs-3xl); } .hero__figures .figure { gap: 0.15rem; } .hero__figures .figure__l { order: 2; color: color-mix(in oklab, var(--paper) 62%, transparent); } .hero__figures .figure__n { order: 1; color: var(--paper); } /* Sigiliul, mutat în colț peste film. */ .hero__seal { position: absolute; inset-block-start: var(--sp-lg); inset-inline-end: var(--gutter); z-index: 1; color: var(--paper); display: none; } .hero__seal .seal__core { color: var(--ochre); } @media (min-width: 64em) { .hero__seal { display: grid; } } /* Comenzile filmului de fundal: sunet și pauză, unul lângă altul. Grupul stă unde stătea singur butonul de pauză înainte — împins spre stânga cât să iasă de sub butonul plutitor de WhatsApp, care ocupă același colț. */ .hero__controls { position: absolute; inset-block-end: var(--sp-md); inset-inline-end: calc(var(--gutter) + 4.4rem); z-index: 2; display: flex; gap: 0.5rem; } .hero__sound, .hero__toggle { inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--paper) 40%, transparent); color: var(--paper); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .hero__sound:hover, .hero__toggle:hover { background: color-mix(in oklab, var(--paper) 16%, transparent); border-color: var(--paper); } .hero__sound svg, .hero__toggle svg { inline-size: 0.85rem; } .hero__toggle .is-play { display: none; } .hero__toggle[data-playing="false"] .is-play { display: block; } .hero__toggle[data-playing="false"] .is-pause { display: none; } /* Implicit filmul e mut (așa pornește autoplay-ul), deci implicit se vede difuzorul tăiat; un clic dă sunetul și schimbă iconița pe cea cu unde. */ .hero__sound .is-unmuted { display: none; } .hero__sound[data-muted="true"] .is-unmuted { display: none; } .hero__sound[data-muted="true"] .is-muted { display: block; } .hero__sound[data-muted="false"] .is-unmuted { display: block; } .hero__sound[data-muted="false"] .is-muted { display: none; } @media (max-width: 48em) { .hero__controls { inset-block-end: auto; inset-block-start: var(--sp-sm); } } /* Sublinierea de sub „Arcobaleno” ia direct arcul curcubeu din siglă, nu o singură culoare — degradeul e definit o dată în spritul de pictograme al paginii (id `i-rainbow`). Auriul rămâne ca rezervă, sintaxă de paint SVG, pentru cazul rar în care referința la degrade nu se rezolvă. */ .hero__title .marked > svg path { stroke: url(#i-rainbow) var(--ochre); } /* Fiecare măsură verticală e plafonată cu min(, ): pe un ecran înalt câștigă scara fluidă normală, pe un laptop scund preia termenul în vh și compoziția se strânge toată deodată, în loc să dea pe dinafară. */ @media (min-width: 48em) { .hero__title { font-size: min(var(--fs-7xl), 11.5vh); margin-block-start: min(var(--sp-sm), 1.6vh); } .hero__lede { font-size: min(var(--fs-lg), 3.2vh); margin-block-start: min(var(--sp-md), 2.6vh); } .hero__actions { margin-block-start: min(var(--sp-lg), 3.6vh); } } @media (min-width: 64em) { .hero { padding-block: var(--sp-2xl) var(--sp-2xl); } } /* ================================================== section head pattern */ .rooms__head { display: grid; gap: var(--sp-md); align-items: end; } @media (min-width: 56em) { .rooms__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-2xl); } /* Când a doua celulă e un singur link („Toată galeria”, „Toate însemnările”), îl împingem la marginea din dreapta a coloanei. Un paragraf de text rămâne aliniat la stânga, ca înainte. */ .rooms__head > .arrow-link { justify-self: end; } } .room:first-of-type { border-block-start: 0; } .room__swatch img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* ==================================================== ce ne diferențiază Nouă puncte, așezate ca un text de citit, nu ca niște cartonașe: o singură coloană, îngustă cât să încapă un rând comod de citit, cu numerele atârnate în marginea din stânga și un fir de păr între puncte. Două coloane de cartonașe rupeau tocmai lucrul care contează aici — ochiul nu putea coborî pe o singură verticală, iar textele, foarte inegale ca lungime, lăsau goluri sub cele scurte. */ .diffs { display: grid; list-style: none; padding: 0; margin-inline: auto; max-inline-size: 52rem; border-block-start: 1px solid var(--rule); } .diff { display: grid; gap: 0.2rem; padding-block: var(--sp-lg); border-block-end: 1px solid var(--rule); } /* De la lățimea la care încap ambele: numărul iese în marginea din stânga, iar titlul și textul păstrează o singură margine comună. */ @media (min-width: 46em) { .diff { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--sp-lg); padding-block: var(--sp-xl); } } .diff__no { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; font-weight: 400; color: var(--ochre-deep); font-variant-numeric: lining-nums; font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 60; } /* Cifra e mai mare decât litera de titlu, deci coboară cu o idee ca cele două să pornească de pe aceeași linie optică. */ @media (min-width: 46em) { .diff__no { font-size: var(--fs-3xl); margin-block-start: -0.1em; } } .diff__title { font-size: var(--fs-xl); line-height: 1.18; letter-spacing: -0.022em; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72; text-wrap: balance; } .diff__body p { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--ink-soft); max-inline-size: 62ch; margin-block-start: 0.5em; } .diff__body p + p { margin-block-start: 0.8em; } /* ============================================================= approach */ .approach .quote { max-inline-size: 26ch; } /* From the tablet breakpoint up, the pull quote runs the full width of the panel and is sized to break across exactly two lines. Measured across 896–1920px: the largest size that still holds two lines is almost exactly (container width ÷ 25) at every width. The clamp below rides that ceiling at ~92%, which fills about nine tenths of the panel and leaves enough headroom that a font fallback or a stray wide glyph can't tip it onto a third line. `text-wrap: balance` on .quote__text then evens the two lines to within a few pixels of each other. Below 56em the sentence can't hold two lines at any readable size, so it reverts to the narrow measure and wraps normally. */ @media (min-width: 56em) { .approach .quote { max-inline-size: none; } .approach .quote__text { font-size: clamp(1.9rem, 0.29rem + 2.87vi, 2.875rem); line-height: 1.14; letter-spacing: -0.026em; } } /* ================================================================== cta */ .cta__inner { display: grid; gap: var(--sp-xl); align-items: start; } @media (min-width: 58em) { .cta__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-2xl); } } .cta__aside { display: grid; gap: var(--sp-sm); align-content: start; padding: var(--sp-md); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface-raised); justify-items: start; } .cta__aside .room__facts { inline-size: 100%; margin-block-start: 0; } /* =============================================================== drawer */ .drawer__foot { display: grid; gap: var(--sp-sm); justify-items: start; } .masthead__tel { display: none; } @media (min-width: 74em) { .masthead__tel { display: inline-flex; } } /* ============================================================= colophon */ .colophon__links { display: grid; gap: 0.42rem; font-size: var(--fs-sm); } .colophon__links a { text-decoration: none; opacity: 0.85; } .colophon__links a:hover { opacity: 1; text-decoration: underline; } /* A very faint fern watermark in the footer's bottom corner. */ .colophon::before { content: ""; position: absolute; inset-block-end: -4rem; inset-inline-end: -3rem; inline-size: 20rem; aspect-ratio: 1; background: var(--ochre); opacity: 0.05; border-radius: 0 100% 0 100%; rotate: 12deg; pointer-events: none; } /* ========================================================= inner pages */ .pagehead { padding-block: var(--sp-2xl) var(--sp-xl); position: relative; } .pagehead__title { font-size: var(--fs-7xl); line-height: 0.99; letter-spacing: -0.034em; font-weight: 430; font-variation-settings: "SOFT" 46, "WONK" 1, "opsz" 144; margin-block-start: var(--sp-sm); max-inline-size: 16ch; } .pagehead__lede { margin-block-start: var(--sp-md); } /* Antet centrat — folosit pe „Misiune și viziune”, care n-are coloană laterală și e o pagină de manifest, nu una de listat lucruri. */ .pagehead--centred { text-align: center; } .pagehead--centred .crumbs { justify-content: center; } .pagehead--centred .pagehead__title { max-inline-size: 22ch; margin-inline: auto; } .pagehead--centred .pagehead__lede { margin-inline: auto; } .crumbs { display: flex; gap: 0.5rem; align-items: center; font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-ghost); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--clay-deep); } /* ================================================================ fees */ .fees { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .fees caption { text-align: start; font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); padding-block-end: var(--sp-xs); } .fees th, .fees td { text-align: start; padding: 0.85rem 0.9rem 0.85rem 0; border-block-end: 1px solid var(--rule); vertical-align: baseline; } .fees thead th { font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); border-block-end-color: var(--rule-strong); } .fees tbody th { font-weight: 600; } .fees td:last-child, .fees th:last-child { text-align: end; padding-inline-end: 0; } .fees tbody tr:hover { background: color-mix(in oklab, var(--ochre) 10%, transparent); } .fees .fees__num { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; white-space: nowrap; } .table-wrap { overflow-x: auto; } /* ============================================================= article */ .article { font-size: var(--fs-md); line-height: var(--lh-loose); } .article > * + * { margin-block-start: 1.15em; } .article h2 { font-size: var(--fs-2xl); margin-block-start: 2em; letter-spacing: -0.02em; } .article h3 { font-size: var(--fs-lg); margin-block-start: 1.7em; } .article ul { padding-inline-start: 1.15em; display: grid; gap: 0.5em; } .article li::marker { color: var(--clay); } .article blockquote { padding-inline-start: var(--sp-md); border-inline-start: 2px solid var(--ochre); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; letter-spacing: -0.018em; font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 60; } .article figure { margin-block: 2em; } .article figcaption { margin-block-start: 0.7rem; font-size: var(--fs-2xs); color: var(--ink-faint); } .article hr { margin-block: 2.4em; } .article .dropcap::first-letter { float: inline-start; font-family: var(--font-display); font-size: 3.4em; line-height: 0.82; padding-inline-end: 0.08em; padding-block-start: 0.06em; color: var(--clay); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144; } /* Text pe o singură coloană, centrat pe pagină. */ .article--centred { text-align: center; max-inline-size: 48rem; margin-inline: auto; } /* Bara verticală a citatului n-are sens într-un text centrat: ar trage ochiul spre stânga. Devine o linie deasupra. */ .article--centred blockquote { padding-inline-start: 0; border-inline-start: 0; margin-block-start: 2em; padding-block-start: 1.1em; border-block-start: 2px solid var(--ochre); } /* Cap de secțiune centrat — folosit la galeria de pe prima pagină. */ .section__head--centred { display: grid; justify-items: center; text-align: center; gap: var(--sp-sm); } .section__head--centred h2 { max-inline-size: 20ch; } /* ============================================================== poze Grilă de fotografii. Cadrele au toate aceeași formă, ca rândurile să fie drepte deși pozele vin și pe lat, și pe înalt; `object-fit` taie din ele în loc să le turtească. */ .shots { display: grid; gap: var(--sp-2xs); /* Pe telefon două pe rând: una singură ar însemna douăzeci de ecrane de derulat pentru douăzeci de poze. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 40em) { .shots { gap: var(--sp-sm); grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); } } .shot { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--sky-wash); border: 1px solid var(--rule); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .shot:hover, .shot:focus-visible { transform: translateY(-3px); box-shadow: var(--lift); } /* ========================================================== fondatoarea Fotografia la stânga, textul la dreapta. Sub 48em cad una sub alta, cu fotografia prima — altfel poza ajunge un dreptunghi lat și turtit. */ .founder { display: grid; gap: var(--sp-lg); /* `start`, nu `center`: textul e lung, iar pe centru fotografia ar pluti undeva la mijlocul unei coloane de două ori mai înalte decât ea. */ align-items: start; } @media (min-width: 48em) { .founder { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--sp-2xl); } } .founder__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--sage-wash); box-shadow: var(--lift); } /* Fotografia rămâne în dreptul textului cât se citește, în loc să dispară după primul ecran de derulare. Scris după regula de mai sus: `sticky` și `relative` au aceeași greutate, deci contează ordinea. */ @media (min-width: 48em) { .founder__photo { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-md)); } } /* Desenul și fotografia stau unul peste altul; fotografia acoperă desenul cât timp există. */ .founder__photo svg, .founder__photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Întrebarea cu care începe textul, tratată ca un cap de secțiune mic. */ .founder__lead { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.25; font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 32; margin-block-start: var(--sp-xs); } .founder__text p { font-size: var(--fs-sm); line-height: 1.65; } .founder__intro { color: var(--ink); } /* Emoji-urile din text sunt deja marcatori de listă, deci lista nu-și mai pune și ea bulinele ei — ar ieși două semne pe fiecare rând. */ .founder__facts { display: grid; gap: var(--sp-xs); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); line-height: 1.6; } .founder__motto-label { font-weight: 600; letter-spacing: 0.04em; margin-block-start: var(--sp-xs); } .founder__motto { margin: 0; padding-inline-start: var(--sp-md); border-inline-start: 2px solid var(--sage-deep); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.35; font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 32; } .founder__motto p { font-size: inherit; line-height: inherit; } /* Etichetele, la fundul textului: se văd, dar nu concurează cu el. */ .founder__tags { margin-block-start: var(--sp-xs); color: var(--ink-ghost); word-spacing: 0.25em; } .founder__text .founder__tags { font-size: var(--fs-2xs); line-height: 1.7; } /* ============================================================== visit */ .visit__grid { display: grid; gap: var(--sp-xl); align-items: start; } @media (min-width: 62em) { .visit__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-2xl); } } .visit__aside { display: grid; gap: var(--sp-md); align-content: start; padding: var(--sp-md); border-radius: var(--r-lg); background: var(--paper-warm); border: 1px solid var(--rule); } .visit__aside dl { display: grid; gap: 0.5rem; font-size: var(--fs-sm); } .visit__aside dt { font-weight: 600; } .visit__aside dd { margin: 0; color: var(--ink-faint); } .contact-row { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); } .contact-row svg { inline-size: 1rem; color: var(--clay); flex: none; } /* Harta din coloana de detalii: aceeași rotunjire ca restul cutiilor. */ .visit__map { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); background: var(--sky-wash); } .visit__map iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; } /* ================================================== antet peste filmul erou Cât timp pagina nu e derulată, antetul stă peste film și trebuie să fie deschis la culoare. De la primul scroll `data-stuck` îi dă fundalul de hârtie și totul revine la cerneală. */ .has-hero-video .masthead:not([data-stuck="true"]) { color: var(--paper); } .has-hero-video .masthead:not([data-stuck="true"]) .mark { color: var(--paper); } .has-hero-video .masthead:not([data-stuck="true"]) .mark__glyph { color: var(--ochre); } .has-hero-video .masthead:not([data-stuck="true"]) .mark__sub { color: color-mix(in oklab, var(--paper) 66%, transparent); } .has-hero-video .masthead:not([data-stuck="true"]) .dash-trigger { color: color-mix(in oklab, var(--paper) 88%, transparent); border-color: color-mix(in oklab, var(--paper) 36%, transparent); } .has-hero-video .masthead:not([data-stuck="true"]) .dash-trigger:hover { color: var(--paper); border-color: var(--paper); background: color-mix(in oklab, var(--paper) 12%, transparent); } .has-hero-video .masthead:not([data-stuck="true"]) .dash-trigger kbd { color: color-mix(in oklab, var(--paper) 62%, transparent); border-color: color-mix(in oklab, var(--paper) 30%, transparent); } .has-hero-video .masthead:not([data-stuck="true"]) .burger { border-color: color-mix(in oklab, var(--paper) 36%, transparent); } .has-hero-video .masthead:not([data-stuck="true"]) .burger:hover { border-color: var(--paper); } .has-hero-video .masthead:not([data-stuck="true"]) .burger__bars span { background: var(--paper); } /* ============================================================== galerie Două pe rând, două rânduri. Filmările sunt verticale (9:16), așa că un card pe jumătate din coloana lată ar ajunge absurd de înalt — de aceea grila are propriul plafon de lățime în loc să umple `.u-wide`. */ .gallery { display: grid; gap: var(--sp-md); grid-template-columns: minmax(0, 1fr); max-inline-size: 20rem; margin-inline: auto; } @media (min-width: 34em) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 36rem; } } /* Toate patru pe un singur rând, blocul centrat în coloană. Cardurile sunt verticale (9:16), deci lățimea totală e plafonată — la lățimea întreagă a coloanei un rând de patru ar fi ajuns nefiresc de înalt. */ @media (min-width: 58em) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); max-inline-size: 52rem; gap: var(--sp-md); } .vidcard__note { font-size: var(--fs-2xs); } .vidcard__title { font-size: var(--fs-sm); } .vidcard__play::after { inline-size: 2.8rem; block-size: 2.8rem; } .vidcard__play svg { inline-size: 0.95rem; } } .vidcard { display: grid; gap: var(--sp-sm); align-content: start; } .vidcard__frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-deep); box-shadow: var(--lift); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .vidcard:hover .vidcard__frame { transform: translateY(-4px); box-shadow: var(--lift-lg); } .vidcard__frame video { inline-size: 100%; block-size: 100%; object-fit: cover; } /* Butonul acoperă tot cadrul: ținta de clic e filmul întreg. */ .vidcard__play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; color: var(--paper); background: linear-gradient(to top, color-mix(in oklab, var(--ink) 58%, transparent), transparent 46%); transition: background-color var(--dur) var(--ease-out); } .vidcard__play::after { content: ""; inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%; background: color-mix(in oklab, var(--paper) 88%, transparent); box-shadow: var(--lift); transition: transform var(--dur) var(--ease-spring), background-color var(--dur-fast) var(--ease-out); } .vidcard__play svg { position: absolute; inline-size: 1.15rem; color: var(--clay-deep); translate: 0.1rem 0; } .vidcard:hover .vidcard__play::after, .vidcard__play:focus-visible::after { transform: scale(1.12); background: var(--paper); } .vidcard__no { position: absolute; inset-block-start: var(--sp-sm); inset-inline-start: var(--sp-sm); font-family: var(--font-display); font-size: var(--fs-sm); color: color-mix(in oklab, var(--paper) 84%, transparent); letter-spacing: 0.1em; font-variant-numeric: lining-nums; } .vidcard__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.012em; } .vidcard__note { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.55; } /* ============================================================ tur virtual Un singur film, vertical, cu sunet și comenzi — nu o previzualizare mută ca în galerie, ci conținutul principal al paginii. Cadrul e cel mai mare folosit pentru media pe tot site-ul: umbra `--lift-lg` și un hairline pe muchie, aceeași limbă vizuală ca rama din eroul de pe index2.html. */ .tour__frame { position: relative; inline-size: min(100%, 23rem); margin-inline: auto; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: var(--lift-lg); } .tour__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); pointer-events: none; } .tour__frame video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .tour__facts { inline-size: 100%; } /* =========================================================== blog & auth */ .blog__grid { display: grid; gap: var(--sp-xl); align-items: start; } @media (min-width: 62em) { .blog__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-2xl); } .blog__rail { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-md)); } } .authbox { display: grid; gap: var(--sp-sm); padding: var(--sp-md); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--lift); } .authbox__title { font-size: var(--fs-lg); letter-spacing: -0.018em; } .authbox__error { font-size: var(--fs-2xs); font-weight: 600; color: var(--clay-deep); padding: 0.6rem 0.8rem; border-radius: var(--r-sm); background: color-mix(in oklab, var(--clay) 12%, transparent); } .authbox__hint { font-size: var(--fs-2xs); color: var(--ink-faint); line-height: 1.5; padding-block-start: var(--sp-xs); border-block-start: 1px dotted var(--rule-strong); } .authbox__hint code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.95em; background: var(--paper-deep); padding: 0.1em 0.35em; border-radius: var(--r-xs); } .authbox__who { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-sm); } .authbox__who::before { content: ""; inline-size: 2.3rem; block-size: 2.3rem; flex: none; border-radius: 50%; background: var(--sage-wash); border: 1px solid var(--sage); } .authbox__who strong { display: block; font-weight: 600; } .authbox__who span { font-size: var(--fs-2xs); color: var(--ink-faint); } /* Ce se vede depinde de sesiune: `data-state` stă pe [data-blog]. */ [data-blog][data-state="out"] [data-blog-session], [data-blog][data-state="out"] [data-blog-compose] { display: none; } [data-blog][data-state="in"] [data-blog-auth] { display: none; } .compose { display: grid; gap: var(--sp-sm); padding: var(--sp-md); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-warm); } .compose__status { font-size: var(--fs-2xs); font-weight: 600; padding: 0.6rem 0.8rem; border-radius: var(--r-sm); background: var(--sage-wash); color: var(--sage-deep); } .compose__status[data-tone="bad"] { background: color-mix(in oklab, var(--clay) 12%, transparent); color: var(--clay-deep); } .posts { display: grid; gap: var(--sp-lg); } .post { display: grid; gap: var(--sp-xs); padding-block-end: var(--sp-lg); border-block-end: 1px solid var(--rule); } .post:last-child { border-block-end: 0; padding-block-end: 0; } .post__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xs); } .post__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-ghost); } .post__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 450; letter-spacing: -0.022em; line-height: 1.14; } .post__body { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; max-inline-size: 62ch; } .post__body p + p { margin-block-start: 0.9em; } .post__foot { display: none; margin-block-start: var(--sp-2xs); } [data-blog][data-state="in"] .post__foot { display: block; } .blog__empty { padding: var(--sp-lg); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg); color: var(--ink-faint); font-size: var(--fs-sm); text-align: center; } /* ============================================================== întrebări */ .faq__group { display: grid; gap: var(--sp-sm); } .faq__group + .faq__group { margin-block-start: var(--sp-xl); } /* =========================================================== dă mai departe Ultima secțiune a paginii de acasă, chiar deasupra subsolului. E un singur cartonaș centrat, cu un degrade moale pe diagonală — nu un panou pe toată lățimea, ca să nu se lipească de banda de cerneală a subsolului. */ .share { display: grid; justify-items: center; text-align: center; gap: var(--sp-sm); padding: var(--sp-xl) var(--sp-md); border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: var(--lift-lg); background: radial-gradient(30rem 20rem at 8% 0%, color-mix(in oklab, var(--sky-wash) 85%, transparent), transparent 62%), radial-gradient(28rem 20rem at 94% 100%, color-mix(in oklab, var(--ochre-wash) 88%, transparent), transparent 60%), var(--surface-raised); } @media (min-width: 46em) { .share { padding: var(--sp-2xl) var(--sp-xl); } } .share__eyebrow { color: var(--clay); } .share__eyebrow svg { inline-size: 1.15em; block-size: 1.15em; flex: none; } .share__title { font-size: var(--fs-3xl); line-height: 1.12; letter-spacing: -0.026em; max-inline-size: 24ch; } .share__note { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); max-inline-size: 54ch; } /* Sub 40em butoanele stau unul sub altul, pe aceeași lățime — patru pastile de lățimi diferite, înghesuite pe două rânduri, arătau ca o grămadă. */ .share__buttons { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2xs); inline-size: 100%; max-inline-size: 20rem; margin-block-start: var(--sp-xs); } @media (min-width: 40em) { .share__buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-xs); max-inline-size: none; } } .share__btn svg { inline-size: 1.1em; block-size: 1.1em; flex: none; } /* Verdele și albastrul sunt cele ale mărcilor, coborâte până unde textul alb de deasupra trece de 4.5:1 — culorile de firmă, luate ca atare, lasă un alb care abia se citește. */ .share__btn--wa { --btn-bg: #0d823f; --btn-edge: #0d823f; --btn-fg: #fff; } .share__btn--wa:hover { --btn-bg: #0a6c34; --btn-edge: #0a6c34; } .share__btn--fb { --btn-bg: #1461c9; --btn-edge: #1461c9; --btn-fg: #fff; } .share__btn--fb:hover { --btn-bg: #0f4fa6; --btn-edge: #0f4fa6; } /* Locul în care scrie „Link copiat”. Stă gol și nu ia loc cât timp n-are ce spune, ca rândul de butoane să nu sară când apare mesajul. */ .share__said { font-size: var(--fs-2xs); color: var(--sage-deep); font-weight: 600; min-block-size: 1.4em; margin-block-start: calc(var(--sp-2xs) * -1); } /* ============================================================== print */ @media print { .masthead, .drawer, .to-top, .ticker, .cta, .hero__seal, .banner, .wa, .hero__controls, .vidcard__play, .authbox, .compose { display: none !important; } .hero { min-block-size: 0; background: #fff; color: #000; padding-block: 1cm; } .hero__media, .hero__scrim { display: none !important; } .hero__title, .hero__lede, .hero__figures .figure__n { color: #000 !important; } body { background: #fff; color: #000; font-size: 11pt; } body::after { display: none; } .panel--ink { background: #fff !important; color: #000 !important; } .panel--ink h1, .panel--ink h2, .panel--ink h3 { color: #000 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } .section { padding-block: 1.2cm; } } } /* ========================================================================== TOATE PAGINILE — fundal decorat Nu mai e o singură culoare întinsă peste tot. Sunt cinci straturi peste crem, toate desenate din pigmenții siglei: 1. arcul de curcubeu din stânga-jos — inele concentrice, ca sigla 2. arcul de curcubeu din dreapta-sus — același motiv, mai mic 3. confetti mare } cerculețe colorate, ca stelele din siglă 4. confetti mic } 5. dungi diagonale — banda de curcubeu, repetată în diagonală Totul stă pe `body::before`, fixat pe fereastră și cu `z-index: -1`, deci trece pe sub conținut fără să prindă vreun clic. Densitatea e ținută în frâu în zona centrală, unde stă textul: dungile sunt la ~8%, confettiul e mic, iar arcurile sunt împinse în colțuri, aproape ieșite din cadru. ========================================================================== */ @layer pages { body::before { background-image: /* 1 — arc curcubeu, colțul din stânga jos */ radial-gradient(circle at 0% 100%, transparent 0 236px, color-mix(in oklab, var(--clay) 30%, transparent) 236px 268px, color-mix(in oklab, var(--ochre) 30%, transparent) 268px 300px, color-mix(in oklab, var(--sage) 30%, transparent) 300px 332px, color-mix(in oklab, var(--sky) 30%, transparent) 332px 364px, color-mix(in oklab, var(--plum) 30%, transparent) 364px 396px, transparent 396px), /* 2 — arc curcubeu, colțul din dreapta sus */ radial-gradient(circle at 100% 0%, transparent 0 168px, color-mix(in oklab, var(--plum) 26%, transparent) 168px 194px, color-mix(in oklab, var(--sky) 26%, transparent) 194px 220px, color-mix(in oklab, var(--sage) 26%, transparent) 220px 246px, color-mix(in oklab, var(--ochre) 26%, transparent) 246px 272px, color-mix(in oklab, var(--clay) 26%, transparent) 272px 298px, transparent 298px), /* 3 — confetti mare */ radial-gradient(circle, color-mix(in oklab, var(--ochre) 55%, transparent) 3.5px, transparent 4px), /* 4 — confetti mic */ radial-gradient(circle, color-mix(in oklab, var(--sky) 48%, transparent) 2.5px, transparent 3px), /* 5 — dungi diagonale de curcubeu */ repeating-linear-gradient(135deg, color-mix(in oklab, var(--clay) 8%, transparent) 0 16px, color-mix(in oklab, var(--ochre) 8%, transparent) 16px 32px, color-mix(in oklab, var(--sage) 8%, transparent) 32px 48px, color-mix(in oklab, var(--sky) 8%, transparent) 48px 64px, color-mix(in oklab, var(--plum) 8%, transparent) 64px 80px, transparent 80px 300px); background-size: auto, auto, 168px 168px, 104px 104px, auto; background-position: 0 0, 0 0, 22px 34px, 70px 88px, 0 0; background-repeat: no-repeat, no-repeat, repeat, repeat, repeat; } /* Panglica de curcubeu din capul fiecărui panou. `panel--seam::before` e deja marginea ruptă de hârtie, deci banda intră pe `::after`. */ .is-home .panel--seam::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 5px; background: linear-gradient(90deg, var(--clay), var(--ochre), var(--sage), var(--sky), var(--plum)); } /* Banda derulantă capătă și ea culoare, în loc de crem pe crem. */ .is-home .ticker { background: linear-gradient(90deg, var(--clay-wash), var(--ochre-wash), var(--sage-wash), var(--sky-wash), var(--plum-wash)); border-block-color: color-mix(in oklab, var(--ink) 18%, transparent); } /* Sub 48em arcurile ar mânca jumătate de ecran: le strângem și rărim dungile, ca textul să rămână pe primul plan. */ @media (max-width: 48em) { body::before { background-size: auto, auto, 128px 128px, 84px 84px, auto; } } /* Pe hârtie nu are ce căuta niciun fundal. */ @media print { body::before { display: none !important; } .is-home .panel--seam::after { display: none !important; } } } /* ========================================================================== PRIMA PAGINĂ — butonul de sunet, vizibil ca atare Două cercuri identice unul lângă altul nu spun nimic: nu se vede care oprește filmul și care dă sunetul. Aici butonul de sunet devine o pastilă cu text, verde când sunetul e pornit, ca să nu existe dubiu. ========================================================================== */ @layer pages { .is-home .hero__sound { inline-size: auto; block-size: 2.6rem; grid-auto-flow: column; align-items: center; gap: 0.5rem; padding-inline: 0.85rem; border-radius: var(--r-pill); background-color: color-mix(in oklab, var(--ink) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .is-home .hero__sound-label { display: block; } /* Pe telefon rămâne doar pictograma — nu e loc de etichetă lângă bandă. */ @media (max-width: 30em) { .is-home .hero__sound { padding-inline: 0; inline-size: 2.6rem; } .is-home .hero__sound-label { display: none; } } }