/* ========================================================================== AMZEI. CARTIER DESCHIS · pagina de eveniment (comuna RO + EN) Folosita de /zilele-bucurestiului/ (RO) si /zilele-bucurestiului/en/ (EN). La orice modificare aici, creste ?v= in AMBELE pagini, altfel browserele pot tine versiunea veche din cache. Sistem: Amzei Block Party (GHID_LMBSC_AMZEI_BLOCK_PARTY.md) ATENTIE FONTURI: LMBSC_resurse.zip nu a fost atasat in sesiune si Radikal-Bold nu exista in pachet (decizia D2). Stiva de mai jos e PROVIZORIE. Cand exista WOFF2, se decomenteaza blocul @font-face si se aplica remaparea ro_radikal() pe textul randat in Radikal. ========================================================================== */ /* @font-face { font-family:"Radikal"; src:url("fonts/Radikal-Bold.woff2") format("woff2"); font-weight:700; font-display:block; } @font-face { font-family:"Radikal"; src:url("fonts/Radikal-Regular.woff2") format("woff2"); font-weight:400; font-display:block; } @font-face { font-family:"Radikal"; src:url("fonts/Radikal-Light.woff2") format("woff2"); font-weight:300; font-display:block; } @font-face { font-family:"Macklin Display"; src:url("fonts/MacklinDisplay-Light.woff2") format("woff2"); font-weight:300; font-display:block; } */ /* Culori de brand (fixe) + culori de rol (se schimba intre teme). Tema implicita e cea inchisa; o comuta pe fundal alb. */ :root{ --navy:#2C308C; --magenta:#EC008C; --cyan:#00AEEF; --orange:#F8992F; --alb:#FFFFFF; --font-eveniment:"Radikal","Helvetica Neue",Arial,sans-serif; --font-casa:"Macklin Display",Georgia,serif; --masura:64ch; --fundal:var(--navy); --text:var(--alb); --text-70:rgba(255,255,255,.70); --text-45:rgba(255,255,255,.45); --linie:rgba(255,255,255,.18); --accent-text:var(--magenta); --focus:var(--cyan); --voal:44,48,140; --umbra-text:rgba(20,21,70,.55); } :root[data-tema="light"]{ --fundal:#FFFFFF; --text:var(--navy); --text-70:rgba(44,48,140,.80); --text-45:rgba(44,48,140,.64); --linie:rgba(44,48,140,.16); --accent-text:#C4007C; --focus:var(--magenta); --voal:255,255,255; --umbra-text:rgba(255,255,255,.75); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--fundal); color:var(--text); font-family:var(--font-eveniment); font-weight:400; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1080px;margin:0 auto;padding:0 28px} section{padding:64px 0} section + section{border-top:1px solid var(--linie)} p{margin:0 0 1em;max-width:var(--masura)} a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} a:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* ---------- antet ---------- */ .antet{ position:relative; min-height:min(860px,92vh); display:flex;flex-direction:column;justify-content:flex-end; padding:44px 0 56px;overflow:hidden; } .antet .foto-fond{ position:absolute;inset:0; background-image:url("img/hero-amzei-aerian.jpg"); background-size:cover;background-position:50% 50%; } .antet .voal{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(var(--voal),.55) 0%, rgba(var(--voal),.06) 26%, rgba(var(--voal),.28) 46%, rgba(var(--voal),.68) 66%, rgba(var(--voal),.88) 100%); } /* voal mai subtire: umbra discreta tine textul lizibil peste zonele luminoase ale fotografiei */ .antet h1,.antet .nume-eveniment,.antet .date-cheie{text-shadow:0 1px 18px var(--umbra-text)} .antet .wrap{position:relative;width:100%} @media (max-width:820px){ .antet{min-height:94svh;padding:32px 0 44px} .antet .foto-fond{background-position:50% 50%} } .supratitlu{ font-weight:400;text-transform:uppercase;letter-spacing:.14em; font-size:12px;color:var(--text-70);margin:0 0 28px;max-width:none; } h1{ font-family:var(--font-eveniment); font-weight:700;text-transform:uppercase; font-size:clamp(34px,10vw,132px); line-height:.88;letter-spacing:-.015em; margin:0; } .nume-eveniment{ font-weight:700;text-transform:uppercase; font-size:clamp(20px,4.4vw,50px); line-height:1;letter-spacing:-.005em; color:var(--magenta); margin:22px 0 0;max-width:none; } .nume-eveniment .punct{color:var(--text)} .date-cheie{ margin-top:32px;display:grid;gap:2px 40px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:1px solid var(--linie);padding-top:24px; } .date-cheie div{padding:8px 0} .date-cheie dt,.eticheta{ font-weight:400;text-transform:uppercase;letter-spacing:.12em; font-size:11px;color:var(--text-45);margin:0 0 6px; } .date-cheie dd{margin:0;font-weight:700;text-transform:uppercase;font-size:16px;line-height:1.3} /* ---------- panglica ---------- */ .panglica{ background:var(--magenta);color:var(--alb); padding:14px 0; } .panglica-continut{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline; font-weight:700;text-transform:uppercase;letter-spacing:.08em; font-size:14px;line-height:1.3; } .panglica-continut li{white-space:nowrap} .panglica-continut li + li::before{content:"•";padding:0 14px} @media (max-width:760px){ .panglica-continut{ display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;text-align:center; } .panglica-continut li + li::before{content:none} } @media (max-width:580px){ .panglica-continut{grid-template-columns:1fr;gap:6px} } /* ---------- text ---------- */ h2{ font-weight:700;text-transform:uppercase; font-size:clamp(24px,3.6vw,40px);line-height:1;letter-spacing:-.01em; margin:0 0 28px; } h3{ font-weight:700;text-transform:uppercase; font-size:15px;letter-spacing:.1em;margin:0 0 18px; } /* introducerea are marimea textului obisnuit (ca la Masa Nesfarsita) */ .intro p:first-child{font-weight:500} /* ---------- foto ---------- */ figure{margin:0} .foto img{display:block;width:100%;height:auto} figcaption{ font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--text-45);padding-top:10px; } .foto-lat{padding:0} .foto-lat .wrap{padding:0} /* pozele din corpul paginii: jumatate din latimea coloanei (1080 -> 540), centrate; pe telefon raman pe toata latimea */ .foto-lat .foto{max-width:540px;margin:0 auto} .foto-lat,.foto-lat + section{border-top:0} /* poza + text intr-un singur bloc doar pe web (>820px): text stanga, poza dreapta (.bloc-foto.invers = poza stanga); pe mobil raman una sub alta, poza intai, ca inainte */ .bloc-foto + section{border-top:1px solid var(--linie)} @media (min-width:821px){ section + .bloc-foto{border-top:1px solid var(--linie)} .bloc-foto-grid{ max-width:1080px;margin:0 auto;padding:64px 28px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:center; } .bloc-foto-grid > section{grid-row:1;grid-column:1;padding:0;border-top:0} .bloc-foto-grid > .foto-lat{grid-column:2} .bloc-foto-grid .wrap{padding:0;max-width:none} .bloc-foto .foto{max-width:none} .bloc-foto .foto img{aspect-ratio:4/5;object-fit:cover} .bloc-foto.invers .bloc-foto-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr)} .bloc-foto.invers .bloc-foto-grid > section{grid-column:2} .bloc-foto.invers .bloc-foto-grid > .foto-lat{grid-column:1} } /* ---------- citat (pe toata latimea coloanei) ---------- */ blockquote{ margin:0;max-width:none; font-style:italic; } .semnatura{ margin-top:22px;font-family:var(--font-eveniment); font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-70); } /* ---------- despre ARCEN (pe toata latimea coloanei) + linkuri ---------- */ #arcen p{max-width:none} .linkuri-externe{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px} .linkuri-externe a{ display:inline-flex;align-items:center;gap:10px;min-height:44px; padding:10px 18px;border:1px solid var(--text-45);color:var(--text);text-decoration:none; font-size:13px;letter-spacing:.1em;text-transform:uppercase; } .linkuri-externe svg{width:18px;height:18px;flex:none} @media (hover:hover){.linkuri-externe a:hover{background:var(--magenta);border-color:var(--magenta);color:var(--alb)}} /* ---------- program ---------- */ .zile{display:grid;gap:56px;grid-template-columns:1fr 1fr} .zi-titlu{ font-weight:700;text-transform:uppercase;font-size:20px; margin:0 0 4px; } .zi-nota{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 0 20px} .rand{ display:grid;grid-template-columns:96px 1fr;gap:16px; padding:12px 0;border-top:1px solid var(--linie);align-items:baseline; } .ora{font-weight:700;font-size:15px;letter-spacing:.02em} .activitate{font-weight:400;text-transform:uppercase;font-size:15px;line-height:1.3;letter-spacing:.01em} .artist{ display:block;font-size:11px;letter-spacing:.1em; color:var(--text-70);margin-top:5px;text-transform:uppercase;font-weight:300; } .detaliu{ display:block;text-transform:none;font-size:13px;line-height:1.4; color:var(--text-70);margin-top:6px;letter-spacing:0; } .permanent .rand{grid-template-columns:96px 1fr} .cheie .activitate{color:var(--accent-text)} /* ---------- moment cheie ---------- */ .moment{ padding:0;margin:8px 0 0; } .moment h3{margin-bottom:10px} .moment p{max-width:52ch;margin:0} .moment .mare{ font-weight:700;text-transform:uppercase; font-size:clamp(22px,3vw,34px);line-height:1.05;margin:0 0 14px; } /* ---------- info ---------- */ .info{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .info p{font-size:15px} /* ---------- subsol ---------- */ footer{padding:56px 0 72px;border-top:1px solid var(--linie)} .acces{ font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.06em; margin:0 0 34px; } footer .supratitlu{margin:0} .contact{font-size:12px;letter-spacing:.06em;color:var(--text-70);margin-top:34px} @media (max-width:820px){ .zile{grid-template-columns:1fr;gap:44px} section{padding:48px 0} .wrap{padding:0 20px} .rand{grid-template-columns:96px 1fr;gap:12px} } /* ---------- newsletter ---------- */ .newsletter h2{margin-bottom:12px} .nl-lead{margin:0 0 32px} .nl-form{max-width:760px} .nl-campuri{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px} .nl-camp{display:block} .nl-camp .eticheta{display:block} .nl-camp .optional{text-transform:none;letter-spacing:0} .nl-camp input{ display:block;width:100%;margin:0; background:transparent;color:var(--text); border:0;border-bottom:1px solid var(--text-45);border-radius:0; font:inherit;font-size:17px;padding:8px 0 10px; } .nl-camp input:focus{outline:none;border-bottom-color:var(--magenta);box-shadow:0 1px 0 0 var(--magenta)} .nl-acord{display:flex;gap:12px;align-items:flex-start;margin:28px 0 0;font-size:15px;line-height:1.5;cursor:pointer;max-width:62ch} .nl-acord input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--magenta);cursor:pointer} .nl-trimite{ margin-top:28px;cursor:pointer; background:var(--magenta);color:var(--alb);border:0; font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px; padding:16px 32px; } @media (hover:hover){.nl-trimite:hover{background:var(--text);color:var(--fundal)}} .nl-trimite:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .nl-trimite[disabled]{opacity:.6;cursor:wait} .nl-mesaj{margin:24px 0 0;padding:14px 18px;border-left:4px solid var(--magenta);background:var(--linie);font-weight:700;max-width:62ch} .nl-mesaj ul{margin:0;padding-left:18px;font-weight:400} .nl-capcana{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} @media (max-width:640px){ .nl-campuri{grid-template-columns:1fr;gap:20px} .nl-trimite{width:100%} } /* ---------- retele sociale (subsol) ---------- */ .social{display:flex;gap:14px;margin:28px 0 0} .social a{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%; border:1px solid var(--text-45);color:var(--text);text-decoration:none; } @media (hover:hover){.social a:hover{background:var(--magenta);border-color:var(--magenta);color:var(--alb)}} .social svg{width:20px;height:20px} /* ---------- COOKIE: inceput (Consent Mode v2, v2) ---------- */ .cookie{ position:fixed;left:16px;right:16px;bottom:16px;z-index:100; max-width:880px;margin:0 auto; background:var(--alb);color:var(--navy); border-top:4px solid var(--magenta); padding:20px 22px; box-shadow:0 12px 40px rgba(20,21,70,.35); display:grid;grid-template-columns:1fr auto;gap:14px 24px;align-items:center; } .cookie[hidden]{display:none} .cookie-titlu{ font-weight:400;text-transform:uppercase; font-size:11px;letter-spacing:.12em;color:var(--magenta);margin:0 0 6px;max-width:none; } .cookie-text{font-weight:400;font-size:14px;line-height:1.5;margin:0;max-width:60ch} .cookie-butoane{display:flex;gap:10px} .cookie button{ font-family:var(--font-eveniment);font-weight:700;text-transform:uppercase; font-size:14px;letter-spacing:.08em; min-width:112px;padding:12px 18px;cursor:pointer; border:1.5px solid var(--navy);background:transparent;color:var(--navy); } .cookie button.accept{background:var(--navy);color:var(--alb)} .cookie button:focus-visible{outline:3px solid var(--magenta);outline-offset:2px} .link-cookie{ font:inherit;color:var(--text-70);background:none;border:0;padding:0;cursor:pointer; text-decoration:underline;text-underline-offset:3px; } @media (max-width:560px){ .cookie{grid-template-columns:1fr;left:10px;right:10px;bottom:10px;padding:18px} .cookie-butoane button{flex:1} } /* ---------- COOKIE: sfarsit ---------- */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* ---------- meniu one-page (fix sus): tema · sigla · linkuri · Fii la curent · RO / EN ---------- */ .meniu{ position:fixed;top:0;left:0;right:0;z-index:90; padding-top:env(safe-area-inset-top,0px); background:var(--fundal);border-bottom:1px solid var(--linie); } /* bara e mai lata decat coloana de continut (1280 fata de 1080), ca sa incapa tot pe un rand */ .meniu-bara{display:flex;align-items:center;gap:20px;min-height:72px;padding-block:10px;max-width:1280px} .meniu a{text-decoration:none} .meniu .sigla{display:block;margin-right:auto;flex:none} .meniu .sigla img{display:block;height:52px;width:auto} .sigla-navy{display:none!important} :root[data-tema="light"] .sigla-alb{display:none!important} :root[data-tema="light"] .sigla-navy{display:block!important} .meniu-lista{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px} .meniu-lista a,.meniu-buton,.meniu .meniu-cta,.limba a{ font-family:var(--font-eveniment);font-weight:400;text-transform:uppercase; font-size:13px;letter-spacing:.1em;color:var(--text);white-space:nowrap; } @media (hover:hover){.meniu-lista a:hover,.limba a:not([aria-current]):hover{text-decoration:underline}} .meniu .meniu-cta{ display:inline-block;background:var(--magenta);color:var(--alb); padding:10px 16px;flex:none; } .meniu-buton{display:none} .meniu-buton{background:none;border:1px solid var(--text-45);padding:9px 14px;cursor:pointer} .meniu-buton svg{display:none;width:20px;height:20px} .meniu-buton:focus-visible,.tema-buton:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* comutator de tema: stanga sus, inaintea siglei */ .tema-buton{ flex:none;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer; background:none;border:1px solid var(--text-45);color:var(--text); } .tema-buton svg{width:18px;height:18px} .tema-buton .icon-luna{display:none} :root[data-tema="light"] .tema-buton .icon-soare{display:none} :root[data-tema="light"] .tema-buton .icon-luna{display:block} @media (hover:hover){.tema-buton:hover{border-color:var(--magenta)}} /* RO / EN: dupa Fii la curent, cu distanta */ .limba{display:flex;align-items:center;gap:6px;margin-left:14px;flex:none;color:var(--text-45);font-size:13px} .limba a{color:var(--text-70);padding:6px 2px} .limba a[aria-current]{color:var(--text);font-weight:700} .meniu-lista .li-limba{display:none} .antet{padding-top:116px} section[id]{scroll-margin-top:72px} @media (max-width:1180px){ .meniu .meniu-cta{padding:9px 12px} .meniu-bara{gap:10px 14px;min-height:60px;padding-block:8px} .meniu .sigla img{height:44px} .js .meniu-buton{display:inline-block} .js .meniu-lista{display:none} .meniu-lista{flex-wrap:wrap;gap:8px 20px} .meniu.deschis .meniu-lista{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;top:100%;left:0;right:0; background:var(--fundal);padding:4px 20px 16px;border-bottom:1px solid var(--linie); } .meniu.deschis .meniu-lista a{display:block;padding:14px 0;font-size:14px} .meniu.deschis .meniu-lista li + li{border-top:1px solid var(--linie)} .antet{padding-top:92px} section[id]{scroll-margin-top:60px} } /* pe ecrane inguste RO / EN trece din bara in lista deschisa din Meniu */ @media (max-width:600px){ .meniu-bara > .limba{display:none} .meniu-lista .li-limba{display:block} .meniu-lista .li-limba .limba{margin-left:0;padding:10px 0} .meniu.deschis .meniu-lista .li-limba .limba a{display:inline-block;padding:4px 2px} } @media (max-width:480px){ .meniu-bara{gap:8px} .meniu .sigla img{height:36px} .tema-buton{width:34px;height:34px} .tema-buton svg{width:16px;height:16px} .js .meniu-buton{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;padding:0} .meniu-buton .meniu-text{display:none} .meniu-buton svg{display:block} .meniu .meniu-cta{font-size:12px;padding:8px 10px} } /* ---------- ateliere copii: descriere + inscriere gratuita (16 sep 2026) ---------- Formularul foloseste clasele newsletterului (.nl-*); aici doar ce e in plus. Locurile libere vin din /ateliere/locuri (pagina.js). */ .at-supratitlu{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px} .ateliere h2{margin-bottom:14px} .at-public{font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 20px} .at-cand{font-weight:700} .at-sesiuni{border:0;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;min-width:0} .at-sesiuni legend{padding:0;margin-bottom:12px} .at-sesiune{display:block;position:relative;cursor:pointer} .at-sesiune input{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;margin:0} .at-sesiune span{display:block;border:1px solid var(--text-45);padding:14px 16px;font-size:15px;line-height:1.35} .at-sesiune b{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:13px} .at-locuri{display:block;font-size:12px;color:var(--text-70);margin-top:4px} .at-locuri:empty{display:none} .at-sesiune input:checked + span{background:var(--magenta);border-color:var(--magenta);color:var(--alb)} .at-sesiune input:checked + span .at-locuri{color:var(--alb)} .at-sesiune input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px} .at-sesiune input:disabled + span{opacity:.5;cursor:not-allowed} @media (hover:hover){.at-sesiune input:not(:disabled):not(:checked) + span:hover{border-color:var(--magenta)}} .at-form .nl-acord + .nl-acord{margin-top:16px} @media (max-width:640px){.at-sesiuni{grid-template-columns:1fr}} /* meniu: „Inscriere ateliere" e butonul plin; „Fii la curent" devine buton cu contur, iar pe telefon trece in lista din Meniu. „Ateliere copii" apare doar in lista pliata. */ .meniu .meniu-cta-sec{background:none;color:var(--text);box-shadow:inset 0 0 0 1px var(--text-45)} @media (hover:hover){.meniu .meniu-cta-sec:hover{box-shadow:inset 0 0 0 1px var(--magenta)}} .meniu-lista .li-nl,.meniu-lista .li-at{display:none} @media (max-width:1180px){.meniu-lista .li-at{display:list-item}} @media (max-width:600px){ .meniu .meniu-cta-sec{display:none} .meniu-lista .li-nl{display:list-item} } /* ---------- ateliere v2 (16 sep 2026): carduri + buton Inscriere + popup ---------- Fara JavaScript popup-ul sta deschis in pagina (html fara .js), cu toate sesiunile. */ .at-carduri{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0} .at-card{border:1px solid var(--linie);padding:24px;display:flex;flex-direction:column;align-items:flex-start} .at-card h3{text-transform:none;letter-spacing:0;font-size:22px;line-height:1.15;margin:0 0 8px} .at-card p{font-size:15px} .at-card-varsta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 0 8px} .at-card-ore{font-weight:700;margin:0 0 12px} .at-card .at-buton{margin-top:auto} .at-buton{ display:inline-block;margin-top:12px;cursor:pointer;text-decoration:none; background:var(--magenta);color:var(--alb);border:0; font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px; padding:14px 28px; } @media (hover:hover){.at-buton:hover{background:var(--text);color:var(--fundal)}} .at-buton:focus-visible{outline:3px solid var(--focus);outline-offset:3px} @media (max-width:720px){.at-carduri{grid-template-columns:1fr}.at-buton{width:100%;text-align:center}} .at-dialog{ width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 24px); padding:0;border:1px solid var(--linie); background:var(--fundal);color:var(--text); } .at-dialog::backdrop{background:rgba(10,12,40,.72)} .at-dialog .at-form{max-width:none;padding:24px 28px 28px} .at-dialog-cap{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin:0 0 20px} .at-dialog-cap .at-supratitlu{margin:0 0 6px} .at-dialog-titlu{font-weight:700;text-transform:uppercase;font-size:clamp(18px,3vw,24px);line-height:1.1;margin:0} .at-inchide{ flex:none;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0;cursor:pointer; background:none;border:1px solid var(--text-45);color:var(--text); } .at-inchide svg{width:20px;height:20px} .at-inchide:focus-visible{outline:3px solid var(--focus);outline-offset:2px} .at-dialog .at-sesiuni{max-width:none;margin-bottom:24px} .at-dialog .nl-campuri{gap:18px 28px} .at-dialog .nl-acord{margin-top:20px;font-size:14px} .at-dialog .nl-acord + .nl-acord{margin-top:12px} .at-sesiuni[hidden]{display:none} html:not(.js) .at-dialog{display:block;position:static;margin:0 auto 64px;width:auto;max-width:1024px;max-height:none} html:not(.js) .at-inchide{display:none} body.at-deschis{overflow:hidden} @media (max-width:640px){ .at-dialog{width:100%;max-width:100%;max-height:100dvh;height:100dvh;margin:0;border:0} .at-dialog .at-form{padding:16px 16px 24px} } /* ---------- ateliere v3 (16 sep 2026, varianta 1 din proiectul #12): un singur bloc, trei carduri; click -> fereastra cu detaliile (.at-detalii), din care „Inscriere" deschide popup-ul de inscriere (#inscriere). ---------- */ .at-v1-intro{margin:0} .at-v1-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px} .at-card-v1{ all:unset;box-sizing:border-box;cursor:pointer; display:flex;flex-direction:column;gap:8px;padding:22px;min-height:230px; border:1px solid var(--linie);border-top:4px solid var(--acc);color:var(--text); } @media (hover:hover){.at-card-v1:hover{background:var(--linie);border-color:var(--acc)}} .at-card-v1:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .at-card-v1 .at-card-varsta{margin:0} .at-v1-titlu{font-weight:700;font-size:22px;line-height:1.15} .at-v1-ore{font-weight:700;font-size:14px} .at-v1-scurt{font-size:15px;line-height:1.45;color:var(--text-70)} .at-v1-mai{margin-top:auto;padding-top:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)} section[id] .at-card-v1[id]{scroll-margin-top:90px} .at-detalii{ width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:28px; border:1px solid var(--linie);border-top:4px solid var(--acc); background:var(--fundal);color:var(--text); } .at-detalii::backdrop{background:rgba(10,12,40,.72)} .at-detalii .at-inchide{float:right;margin:0 0 12px 16px} .at-detalii .at-card-varsta{margin:0 0 6px} .at-detalii-titlu{text-transform:none;letter-spacing:0;font-size:26px;line-height:1.1;margin:0 0 10px} .at-detalii-meta{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px} .at-detalii-meta li + li::before{content:"·";margin-right:14px;color:var(--text-45)} .at-detalii p{font-size:16px} .at-detalii-locuri{font-weight:700;font-size:14px!important;color:var(--accent-text)} .at-detalii .at-buton{margin-top:4px} html:not(.js) .at-detalii{display:block;position:static;margin:0 auto 24px;width:auto;max-width:1024px;max-height:none} html:not(.js) .at-detalii .at-inchide{display:none} @media (max-width:820px){.at-v1-grid{grid-template-columns:1fr}.at-card-v1{min-height:0}} @media (max-width:640px){.at-detalii{width:100%;max-width:100%;max-height:100dvh;height:100dvh;margin:0;border-left:0;border-right:0;border-bottom:0;padding:20px 16px}} .ateliere .at-supratitlu{max-width:none} .at-detalii p.at-card-varsta{font-size:12px}