/* ============================================================ Componente de conținut — Pas 2 (static, zero JS/animație). Toate formele/umbrele/razele respectă tokenii moșteniți (§2.2). Reveal-urile, hover-ul animat, highlight-ul de marker etc. (§4) se leagă în Pas 4+ — aici doar starea finală, statică. ============================================================ */ .section{padding:96px 0} .section-head{max-width:680px;margin-bottom:48px} .section-head .eyebrow{margin-bottom:16px} .section-head h2{margin-bottom:14px} .section-head p{color:var(--slate);font-size:1.05rem;max-width:56ch} .center{margin-inline:auto;text-align:center} .center p{margin-inline:auto} .card{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card); box-shadow:var(--shadow-card); } /* A5: hover card (persona, nivel, resursă) — ridicare 4-6px, umbră mai adâncă, arc scurt la intrare, decelerare moale la ieșire (curbe diferite = "fără să salte") */ .persona-card,.road-card,.team-card,.res-card,.audience-card,.process-step,.curriculum-item,.chaos-diff-note{ transition:transform .25s var(--ease-signature),box-shadow .3s ease; } .persona-card:hover,.road-card:hover,.team-card:hover, .res-card:hover,.audience-card:hover,.process-step:hover,.curriculum-item:hover,.chaos-diff-note:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); } /* ---------- hero ---------- */ .hero{padding:64px 0 88px} .hero h1{margin:20px 0 16px} .hero .sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink);max-width:48ch;margin-bottom:28px} .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .cta-col{display:flex;flex-direction:column;gap:6px} .cta-note{display:flex;align-items:flex-start;gap:6px;padding-left:18px;white-space:nowrap;color:var(--slate)} .cta-note svg{flex:none;margin-top:-2px} .hand-note{font-family:var(--font-hand);font-weight:500;font-size:1.2rem} .hero-stats{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap} .hero-stat b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--navy);line-height:1} .hero-stat span{font-size:.82rem;color:var(--slate);font-weight:500} .hl{ background-image:linear-gradient(104deg,var(--marker-soft) 0%,var(--marker-soft) 100%); background-repeat:no-repeat;background-size:100% 46%;background-position:0 82%; padding:0 .1em;margin:0 -.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone; } /* ---------- ilustrație de hero — pagini secundare (v3 Pas 6) ---------- Chrome comun pentru ilustrațiile statice generate (§3.2): width/height explicite în marcaj + aspect-ratio aici = zero CLS; loading="lazy" = nu concurează cu H1/text pentru LCP. */ .hero-illustration{ width:100%;height:auto;aspect-ratio:1312/816;object-fit:cover; border-radius:var(--radius-card);box-shadow:var(--shadow-card); border:1px solid var(--line); } /* ---------- hero „Tabla care se umple" (v3 Pas 3, Plan B DOM/SVG) ---------- Starea de bază (fără JS / touch / reduced-motion): layout static, toate bătăile de text vizibile, tabla în starea finală. Layout-ul de scrub se activează prin html.hero-scrub, pusă din înainte de primul paint (zero CLS) — vezi comentariul din index.njk. */ .hero-board-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} .hero-boardface{ /* width explicit: copiii sunt toți absolut poziționați (lățime intrinsecă ~0), iar ca grid item cu margin-inline:auto s-ar strânge la 2px fără asta */ position:relative;width:100%;aspect-ratio:10/9;overflow:hidden; background-color:var(--white);border:1px solid var(--line); border-radius:var(--radius-card);box-shadow:var(--shadow-card); } .hb-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* rotația de repaus stă pe wrapperul static (--r); JS animă doar .hb-note-in */ .hb-note{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;transform:rotate(var(--r))} .hb-note-in{ display:block;width:100%;height:100%;border-radius:3px; background:var(--c);box-shadow:var(--shadow-postit);position:relative; } /* „scris" de marker sugerat — două bare, fără text real */ .hb-note-in::before,.hb-note-in::after{ content:"";position:absolute;left:15%;height:4px;border-radius:2px; background:rgba(22,40,60,.32); } .hb-note-in::before{top:32%;width:58%} .hb-note-in::after{top:52%;width:36%} /* --- varianta scrubbed (desktop, pointer fin, fără reduced-motion) --- */ html.hero-scrub .hero-board{ padding:0;min-height:calc(100vh - 76px); display:flex;align-items:center; } html.hero-scrub .hero-beats{display:grid} html.hero-scrub .hero-beat{grid-area:1/1;align-self:start} /* bătăile 2-3 pornesc ascunse și în CSS (nu doar din GSAP) — dacă motion.js nu se încarcă, textele nu se suprapun; GSAP le arată prin autoAlpha inline */ html.hero-scrub .hero-beat:nth-child(n+2){opacity:0;visibility:hidden} html.hero-scrub .hero-boardface{width:min(100%,60vh);margin-left:auto} /* ---------- persoane (pentru cine) — post-it-uri colorate v3 (§1.3/§2.1) ---------- */ .persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .persona-card{ padding:34px 26px 30px;position:relative;border:none;border-radius:3px; background:var(--postit);box-shadow:var(--shadow-postit); --tilt:-1deg;transform:rotate(var(--tilt)); } .persona-card:nth-child(4n+1){--postit:var(--postit-yellow);--tilt:-1.1deg;--tape-tilt:-2deg} .persona-card:nth-child(4n+2){--postit:var(--postit-blue);--tilt:1deg;--tape-tilt:3deg} .persona-card:nth-child(4n+3){--postit:var(--postit-pink);--tilt:-1.4deg;--tape-tilt:-3deg} .persona-card:nth-child(4n+4){--postit:var(--postit-mint);--tilt:1.2deg;--tape-tilt:2deg} .persona-grid .persona-card:hover{transform:rotate(var(--tilt)) translateY(-5px)} .persona-card .doodle-tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(var(--tape-tilt,-3deg))} .persona-icon{ width:52px;height:52px;border-radius:var(--radius-sm);background:rgba(255,255,255,.55); display:grid;place-items:center;margin-bottom:20px; } .persona-icon svg{width:26px;height:26px} .persona-card h3{margin-bottom:10px;font-size:1.1rem;color:var(--ink)} .persona-card p{color:var(--ink);font-size:.95rem} .persona-close{ margin-top:44px;text-align:center;font-family:var(--font-hand);font-weight:500; font-size:clamp(1.2rem,2vw,1.5rem);color:var(--slate); max-width:60ch;margin-inline:auto; } /* ---------- drumul / niveluri (preview de pe Acasă) ---------- */ .road-wrap{position:relative;padding-top:52px} .road-thread{position:absolute;pointer-events:none} .road-thread-h{top:0;left:0;width:100%;height:56px;display:block} .road-thread-v{top:0;left:-28px;width:24px;height:100%;display:none} /* nodurile drumului —
HTML, nu SVG (vezi comentariul din index.njk) */ .road-dot{ position:absolute;width:26px;height:26px;border-radius:50%; background:var(--white);border:2px solid var(--line);pointer-events:none; } .road-dot-1{background:var(--postit-yellow);border-color:var(--postit-yellow)} .road-dot-2{background:var(--postit-blue);border-color:var(--postit-blue)} .road-dot-3{background:var(--postit-mint);border-color:var(--postit-mint)} .road-dot-v{display:none} .road-dot-h.road-dot-1{top:9px;left:calc(4% - 13px)} .road-dot-h.road-dot-2{top:9px;left:calc(50% - 13px)} .road-dot-h.road-dot-3{top:9px;left:calc(96% - 13px)} .road-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative} .road-card{ padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px; border-top:5px solid var(--lvl,var(--line)); } .road-card[data-nivel="fundamente"]{--lvl:var(--postit-yellow)} .road-card[data-nivel="practician"]{--lvl:var(--postit-blue)} .road-card[data-nivel="avansat"]{--lvl:var(--postit-mint)} .road-card .num{ font-family:var(--font-display);font-weight:600;font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:8px; } .road-card .num::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lvl,var(--line));flex:none} .road-card h3{font-size:1.3rem} .road-card .durata{color:var(--slate);font-size:.9rem} .road-card .takeaway{color:var(--ink);font-size:.93rem;flex:1} .road-card a{ font-family:var(--font-display);font-weight:600;color:var(--navy);text-decoration:none; font-size:.93rem; } .road-card a:hover{text-decoration:underline} .road-hint{margin-top:40px;text-align:center} /* ---------- aranjează sala (registrul interactiv, v3 Pas 4) ---------- Fallback vizibil implicit (fără JS): 4 diagrame statice, complete cu text — nu un schelet gol. Interactivul (taburi + 21 puncte-DOM) stă ascuns până motion.js (initRoomArranger) pune data-enhanced pe wrapper; fără JS nu poate funcționa deloc (spre deosebire de
la FAQ). */ .arranger-interactive{display:none} .arranger[data-enhanced] .arranger-interactive{display:block} .arranger[data-enhanced] .arranger-fallback{display:none} .arranger-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px} .arranger-tab{ font-family:var(--font-display), 'Oswald Fallback', sans-serif;font-weight:600;font-size:.88rem; color:var(--navy);background:var(--white);border:2px solid var(--line);border-radius:999px; padding:10px 20px;cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--ease-signature); } .arranger-tab:hover{border-color:var(--navy);transform:translateY(-2px)} .arranger-tab[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .arranger-body{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .arranger-mat{ position:relative;width:100%;aspect-ratio:1;background-color:var(--white); border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card); overflow:hidden; } /* poziționate în % de JS (initRoomArranger) — vezi FORMATIONS din motion.js */ .room-dot{ position:absolute;left:0;top:0;width:6.5%;aspect-ratio:1;border-radius:50%; background:var(--postit-yellow);box-shadow:var(--shadow-postit); transform:translate(-50%,-50%); } .room-dot-facilitator{ width:8.5%;background:var(--navy);box-shadow:0 0 0 3px var(--white),var(--shadow-postit); z-index:1; } .arranger-copy{display:flex;flex-direction:column;gap:8px} .arranger-desc{color:var(--slate);font-size:1.05rem;max-width:42ch} .arranger-hand{color:var(--navy);margin-top:4px;font-size:1.3rem} /* „tu" — etichetă Caveat + săgeată, urmărește punctul-facilitator (v3 R1 #9). Offset-ul (-40px) trebuie să depășească raza punctului-facilitator (~24px + inel alb) ca eticheta să nu cadă navy-pe-navy, invizibilă. */ .arranger-tu{ position:absolute;left:0;top:0;z-index:2;pointer-events:none; display:flex;flex-direction:row-reverse;align-items:flex-end;gap:3px; transform:translate(-50%,-50%) translate(-40px,-42px); } .arranger-tu .doodle-arrow{flex:none;transform:rotate(205deg)} .arranger-tu .hand-note{font-size:1.2rem;color:var(--navy);white-space:nowrap;line-height:1} /* „tablă/flipchart" discretă — vizibilă doar la formațiile care privesc spre ea */ .arranger-board-doodle{ position:absolute;top:8%;left:50%;width:24%;aspect-ratio:4/3; transform:translateX(-50%);opacity:0;transition:opacity .35s ease;pointer-events:none; } .arranger[data-formation="u"] .arranger-board-doodle, .arranger[data-formation="fishbowl"] .arranger-board-doodle{opacity:1} .arranger-fallback{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} .arranger-static{ background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card); padding:16px 16px 20px; } .arranger-static svg{aspect-ratio:1;margin-bottom:12px} .arranger-static figcaption{font-size:.88rem;color:var(--slate)} .arranger-static figcaption b{color:var(--navy);font-family:var(--font-display), 'Oswald Fallback', sans-serif;font-weight:600} .arranger-static figcaption .hand-note{display:block;margin-top:4px;font-size:1.05rem;color:var(--navy)} .arranger-cta{margin-top:40px;text-align:center} .arranger-cta a{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display), 'Oswald Fallback', sans-serif;font-weight:600;color:var(--navy); text-decoration:none;font-size:1rem; } .arranger-cta a:hover{text-decoration:underline} /* ---------- autoevaluare (bandă navy-adânc) ---------- */ .lead-band{ background-color:var(--navy-deep);color:#fff; --dot-grid-color:rgba(255,255,255,.07); } .lead-band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative} .lead-band h2{color:#fff;margin-bottom:18px} .lead-band p{color:rgba(255,255,255,.82);font-size:1.05rem;max-width:50ch;margin-bottom:28px} .lead-band .eyebrow{color:#fff;margin-bottom:14px} .lead-band .eyebrow::before{background:var(--marker)} /* post-it „cadou" — link spre Kit-ul live pe /resurse/ (Pas R2 #1: Kit-ul e activ din Pas 7) */ .lead-col-dims{display:flex;flex-direction:column;gap:24px;align-items:flex-start} .lead-gift{ display:block;position:relative;margin-top:0;padding:16px 20px 14px; max-width:270px;border-radius:6px;background:var(--postit-yellow); box-shadow:var(--shadow-postit);transform:rotate(-3deg); text-decoration:none;transition:transform .2s ease; } .lead-gift:hover{transform:rotate(-3deg) translateY(-5px)} .lead-gift .doodle-tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-4deg)} .lead-gift p{margin:0;color:var(--ink);font-size:1.1rem;line-height:1.3} .dims{list-style:none;display:grid;gap:12px} .dims li{ display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:13px 18px; font-weight:600;font-size:.96rem; } .dims .num-badge{ font-family:var(--font-display);font-weight:600;font-size:.78rem; width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14); display:grid;place-items:center;flex:none; } .lead-meta{display:flex;gap:20px;margin-top:22px;font-size:.88rem;color:rgba(255,255,255,.72);flex-wrap:wrap} /* ---------- de la haos la plan (registrul cinematic-scroll, v3 Pas 5) ---------- .chaos-pin e complet ascuns implicit (mobil/touch/reduced-motion/no-JS): .chaos-fallback (4 carduri statice, reveal standard) rămâne vizibilă. html.chaos-scrub (decis în , aceeași condiție ca hero-scrub din Pas 3) dezvăluie .chaos-pin și ascunde fallback-ul. Tabla (.chaos-board) stă pe loc tot timpul pin-ului; „orizontalul" cerut de plan stă în banda de text (.chaos-rail/.chaos-track), care culisează sub tablă. */ .chaos-pin{display:none} .chaos-fallback{display:grid;gap:16px;margin-top:8px} html.chaos-scrub .chaos-fallback{display:none} html.chaos-scrub .chaos-pin{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:36px;min-height:calc(100vh - 76px); } .chaos-board{ position:relative;width:min(100%,420px);aspect-ratio:1;flex:none; background-color:var(--white);border:1px solid var(--line); border-radius:var(--radius-card);box-shadow:var(--shadow-card); } /* poziția de repaus (Haos) stă în CSS, pe --x/--y/--r — dacă motion.js nu se încarcă dar html.chaos-scrub tot s-a pus din , tabla arată corect, static, în starea „Haos" (același principiu ca .hb-note, Pas 3) */ .cp-note{ position:absolute;left:var(--x);top:var(--y);width:15%;aspect-ratio:1; border-radius:3px;background:var(--c);box-shadow:var(--shadow-postit); transform:translate(-50%,-50%) rotate(var(--r)); } .cp-note::before,.cp-note::after{ content:"";position:absolute;left:15%;height:4px;border-radius:2px; background:rgba(22,40,60,.32); } .cp-note::before{top:32%;width:58%} .cp-note::after{top:52%;width:36%} .cp-label{ position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); font-family:var(--font-hand);font-weight:500;font-size:1.12rem;color:var(--ink); white-space:nowrap;opacity:0; } .cp-vote{position:absolute;left:var(--x);top:var(--y);width:7.5%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0} .cp-vote svg{width:100%;height:100%} .cp-check{position:absolute;left:var(--x);top:var(--y);width:7%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0} .chaos-rail{width:min(100%,640px);overflow:hidden} .chaos-track{display:flex;width:400%} .chaos-panel{flex:0 0 25%;padding:0 12px;text-align:center} .chaos-panel-num{ display:grid;place-items:center;width:34px;height:34px;margin:0 auto 16px; border-radius:50%;background:var(--marker);color:var(--ink); font-family:var(--font-display);font-weight:600;font-size:.95rem; } .chaos-panel h3{margin-bottom:8px} .chaos-panel p{color:var(--slate);font-size:1rem;max-width:36ch;margin-inline:auto} .chaos-fallback-card{ display:flex;gap:20px;align-items:flex-start;padding:26px 28px; background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card); border-left:5px solid var(--accent,var(--line)); } .chaos-fallback-card[data-state="clarificare"]{--accent:var(--postit-yellow)} .chaos-fallback-card[data-state="decizie"]{--accent:var(--postit-blue)} .chaos-fallback-card[data-state="plan"]{--accent:var(--postit-mint)} .chaos-fallback-card .chaos-panel-num{margin:0;flex:none} .chaos-fallback-card h3{margin-bottom:6px;font-size:1.08rem} .chaos-fallback-card p{color:var(--slate);font-size:.94rem} .chaos-diff-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px} .chaos-diff-note{ position:relative;padding:24px 22px;border:none; --tilt:-0.6deg;transform:rotate(var(--tilt)); background:color-mix(in srgb, var(--diff,var(--postit-yellow)) 16%, var(--white)); } .chaos-diff-row .chaos-diff-note:nth-child(4n+1){--diff:var(--postit-yellow);--tilt:-0.7deg} .chaos-diff-row .chaos-diff-note:nth-child(4n+2){--diff:var(--postit-blue);--tilt:0.6deg} .chaos-diff-row .chaos-diff-note:nth-child(4n+3){--diff:var(--postit-pink);--tilt:-0.5deg} .chaos-diff-row .chaos-diff-note:nth-child(4n+4){--diff:var(--postit-mint);--tilt:0.8deg} .chaos-diff-row .chaos-diff-note:hover{transform:rotate(var(--tilt)) translateY(-5px)} .chaos-diff-note .doodle-tape{position:absolute;top:-11px;left:24px;transform:rotate(-3deg)} .diff-icon{ width:44px;height:44px;border-radius:var(--radius-sm);background:var(--navy); display:grid;place-items:center;margin-bottom:16px; } .diff-icon svg{width:22px;height:22px} .chaos-diff-note h3{font-size:.98rem;margin-bottom:6px} .chaos-diff-note p{color:var(--slate);font-size:.88rem} /* ---------- echipă ---------- */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px} .team-card{padding:30px 26px;text-align:center} .avatar{ width:88px;height:88px;border-radius:50%;margin:0 auto 16px; display:grid;place-items:center;font-family:var(--font-display);font-weight:600; font-size:1.5rem;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy-deep)); } .team-card h3{font-size:1.05rem;margin-bottom:4px} .team-card .rol{font-size:.85rem;color:var(--slate);margin-bottom:10px} .team-card .bio{font-size:.9rem;color:var(--slate);margin-bottom:14px} /* fundal-scenă discret pe cardul lui Bogdan (§2.2) — același dot-grid de „tablă" folosit pe tot site-ul, nu o ilustrație nouă; se stinge spre partea de jos ca textul biografiei să rămână perfect lizibil. */ .team-card-scene{position:relative;isolation:isolate;overflow:hidden} .team-card-scene::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(var(--dot-grid-color) 1.5px, transparent 1.5px); background-size:var(--dot-grid-size) var(--dot-grid-size); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.05) 75%); mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.05) 75%); } .badge-iaf{ display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600; font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase; color:var(--navy);background:var(--navy-soft);border-radius:999px;padding:6px 13px; } .badge-iaf svg{width:13px;height:13px} .team-bio-full{font-size:1.02rem;color:var(--ink);max-width:64ch;margin-top:8px;line-height:1.7} /* ---------- resurse ---------- */ /* align-items:start (Pas R2 #3): cardurile nu se mai întind la înălțimea celui mai înalt (Kit-ul, cu imagine+formular) */ .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px;align-items:start} .res-card{ border-radius:var(--radius-card);padding:38px 34px;background:var(--white);border:1px solid var(--line); display:flex;flex-direction:column;gap:16px; } .res-card .tool-icon{ width:58px;height:58px;border-radius:var(--radius-sm);background:var(--navy);display:grid;place-items:center; } .res-card .tool-icon svg{width:28px;height:28px} .res-card h3{font-size:1.3rem} .res-card p{color:var(--slate);flex:1} .res-card .btn{align-self:flex-start} .res-card-img{width:100%;height:auto;aspect-ratio:1312/816;object-fit:cover;border-radius:var(--radius-sm)} .res-soon-badge{ align-self:flex-start;display:inline-flex;align-items:center;gap:6px; background:var(--postit-yellow);color:var(--ink);font-weight:600;font-size:.86rem; padding:8px 14px;border-radius:999px; } /* slotul 3 — „Kit-ul primului workshop" (Pas 7): formular AcumbaMail, restilizat doar în partea vizibilă; card mai îngust decât .apply-form standard (niveluri). */ .res-card-kit .apply-form{max-width:none;margin-inline:0;gap:10px} .res-card-kit .apply-form label{font-size:.86rem} .kit-form-note{font-size:.82rem;color:var(--slate)} .res-soon{ text-align:center;color:var(--slate);font-size:.95rem;display:flex; align-items:center;justify-content:center;gap:10px; } .res-soon::before,.res-soon::after{content:"";height:1px;width:56px;background:var(--line)} /* ---------- FAQ ---------- */ .faq-list{max-width:760px;margin-inline:auto;display:grid;gap:12px} .faq-item{overflow:hidden} .faq-q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px; background:none;border:0;cursor:pointer;text-align:left; font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--navy); padding:20px 24px; } .faq-q .ico{ flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy-soft); display:grid;place-items:center;transition:background .2s ease; } .faq-q .ico svg{width:13px;height:13px} .faq-item:not([open]) .faq-q:hover .ico{background:var(--marker)} .faq-item[open] .faq-q .ico{background:var(--navy)} .faq-item[open] .faq-q .ico svg path{stroke:#fff} .faq-a{padding:0 24px 22px;color:var(--slate);font-size:.96rem;max-width:62ch;overflow:hidden} /* ---------- CTA final ---------- */ .final{ background-color:var(--navy-deep);color:#fff;text-align:center; --dot-grid-color:rgba(255,255,255,.07); } .final h2{color:#fff;max-width:20ch;margin:0 auto 32px} .final-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ---------- pagini de nivel ---------- */ /* culoare-semnătură per nivel (§1.3/§2.2), aceeași paletă/mapare ca .road-card[data-nivel] de pe Acasă. Pusă pe
(base.njk), NU doar pe .level-hero — trebuie să cascadeze și spre secțiunile-surori (curriculum, mini-drum), nu doar spre hero. */ main[data-nivel="fundamente"]{--lvl:var(--postit-yellow)} main[data-nivel="practician"]{--lvl:var(--postit-blue)} main[data-nivel="avansat"]{--lvl:var(--postit-mint)} .level-hero{padding:64px 0 72px;background:var(--paper)} .level-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .level-hero h1{margin:16px 0} .level-hero .promisiune{font-size:1.15rem;color:var(--ink);max-width:46ch;margin-bottom:32px} .level-hero .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lvl,var(--navy));flex:none} .level-hero-side{display:flex;flex-direction:column;gap:28px} .mini-road{display:flex;flex-direction:column;gap:0;align-items:flex-start} .mini-road-node{display:flex;align-items:center;gap:14px} .mini-road-node .dot{ width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center; font-family:var(--font-display);font-weight:600;font-size:.85rem; border:2px solid var(--line);color:var(--slate);background:var(--white); } .mini-road-node.active .dot{background:var(--lvl,var(--marker));border-color:var(--lvl,var(--marker));color:var(--ink)} .mini-road-node.done .dot{background:var(--navy);border-color:var(--navy);color:#fff} .mini-road-node span.label{font-size:.88rem;color:var(--slate);font-weight:600} .mini-road-node.active span.label{color:var(--navy)} .mini-road-line{width:2px;height:28px;background:var(--line);margin-left:16px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px} .two-col .card{padding:32px} .two-col h3{margin-bottom:12px;font-size:1.05rem} .two-col.no p{color:var(--slate)} .card-yes{border-left:4px solid var(--navy)} .card-no{border-left:4px solid var(--line)} /* agendă de flipchart, nu listă (§2.2): foi ușor înclinate, cu bandă adezivă și un accent de sus în culoarea nivelului — nu carduri albe */ .curriculum-list{display:grid;gap:20px} .curriculum-item{ position:relative;display:flex;gap:20px;padding:28px 26px 26px; border:none;border-top:5px solid var(--lvl,var(--navy));border-radius:3px; box-shadow:var(--shadow-postit);--tilt:-0.4deg;transform:rotate(var(--tilt)); } .curriculum-list .curriculum-item:nth-child(2n){--tilt:0.35deg} .curriculum-list .curriculum-item:hover{transform:rotate(var(--tilt)) translateY(-5px)} .curriculum-item .doodle-tape{position:absolute;top:-11px;left:40px;transform:rotate(-3deg)} .curriculum-item .zi-marker{ flex:none;width:44px;height:44px;border-radius:50%;background:var(--lvl,var(--navy-soft)); display:grid;place-items:center;font-family:var(--font-display);font-weight:600; font-size:.8rem;color:var(--ink);text-align:center; } .curriculum-item h3{font-size:1.05rem;margin-bottom:8px} .curriculum-item .zi-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);font-weight:600;margin-bottom:4px} .curriculum-item ul{list-style:none;display:grid;gap:6px} .curriculum-item li{display:flex;gap:10px;font-size:.94rem;color:var(--slate)} .curriculum-item li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lvl,var(--navy));flex:none;margin-top:8px} .takeaway-card{ background:var(--marker-soft);border-radius:var(--radius-card);padding:24px 28px; font-size:1rem; } .takeaway-card b{color:var(--navy)} .practical-card{padding:36px;text-align:center} .practical-card h3{margin-bottom:10px} .practical-card p{color:var(--slate);max-width:52ch;margin-inline:auto;margin-bottom:24px} .apply-form{display:grid;gap:16px;max-width:520px;margin-inline:auto} .apply-form label{display:grid;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink);text-align:left} .apply-form input,.apply-form textarea{ font-family:var(--font-body);font-size:1rem;padding:12px 16px;border-radius:var(--radius-sm); border:1px solid var(--line);background:var(--white);color:var(--ink); } .apply-form input:focus,.apply-form textarea:focus{outline:2px solid var(--navy);outline-offset:1px} .bridge-note{ text-align:center;margin-top:36px;color:var(--slate);font-size:1rem; } .bridge-note a{color:var(--navy);font-weight:600;text-decoration-color:rgba(29,90,150,.35);text-underline-offset:4px} /* ---------- pentru organizații ---------- */ .hero-with-img{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px} .audience-card{padding:32px 26px} .audience-card h3{margin-bottom:10px;font-size:1.1rem} .audience-card p{color:var(--slate);font-size:.94rem} /* „Cum lucrăm" — 4 pași ca post-it-uri pe un fir de marker (§2.2), nu carduri albe; firul e pur decorativ/static (fără scrub — Pas 6 nu introduce module noi de animație). */ .process-thread{position:relative;margin-top:16px} .process-thread-line{position:absolute;top:6px;left:0;width:100%;height:40px;display:block} .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative} .process-step{ position:relative;padding:30px 22px 24px;border:none;border-radius:3px; background:var(--postit);box-shadow:var(--shadow-postit); --tilt:-0.6deg;transform:rotate(var(--tilt)); } .process-step:nth-child(4n+1){--postit:var(--postit-yellow);--tilt:-0.8deg} .process-step:nth-child(4n+2){--postit:var(--postit-blue);--tilt:0.6deg} .process-step:nth-child(4n+3){--postit:var(--postit-pink);--tilt:-0.5deg} .process-step:nth-child(4n+4){--postit:var(--postit-mint);--tilt:0.9deg} .process-steps .process-step:hover{transform:rotate(var(--tilt)) translateY(-5px)} .process-step .doodle-tape{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg)} .process-step .step-num{ font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.85rem; letter-spacing:.08em;margin-bottom:8px;display:block; } .process-step h3{font-size:1rem;margin-bottom:6px;color:var(--ink)} .process-step p{font-size:.9rem;color:var(--ink)} /* ---------- legal ---------- */ .legal-content{max-width:70ch} .legal-content p{margin-bottom:16px;color:var(--slate)} .legal-pending{ background:var(--navy-soft);border-radius:var(--radius-card);padding:24px 28px; color:var(--ink);margin-bottom:24px; } /* ---------- responsive ---------- */ @media (max-width:1020px){ .persona-grid{grid-template-columns:repeat(2,1fr)} .road-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto} .road-wrap{padding-top:0;padding-left:32px;max-width:560px;margin-inline:auto} .road-thread-h{display:none} .road-thread-v{display:block} .road-dot-h{display:none} .road-dot-v{display:block} .road-dot-v.road-dot-1{top:8px;left:-31px} .road-dot-v.road-dot-2{top:calc(50% - 13px);left:-31px} .road-dot-v.road-dot-3{top:calc(100% - 40px);left:-31px} .hero-board-grid{grid-template-columns:1fr;gap:40px} .hero-boardface{max-width:520px;margin-inline:auto} .arranger-body{grid-template-columns:1fr;gap:28px} .arranger-mat{max-width:420px;margin-inline:auto} .lead-band-grid{grid-template-columns:1fr;gap:40px} .res-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .level-hero-grid{grid-template-columns:1fr;gap:32px} .two-col{grid-template-columns:1fr} .hero-with-img{grid-template-columns:1fr;gap:32px} .audience-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .process-thread-line{display:none} .process-steps{grid-template-columns:repeat(2,1fr)} .chaos-diff-row{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .section{padding:64px 0} .hero{padding:40px 0 56px} .persona-grid{grid-template-columns:1fr} .chaos-diff-row{grid-template-columns:1fr} .chaos-fallback-card{padding:22px 20px} .hero-ctas .btn{width:100%} .cta-col{width:100%} .final-ctas{flex-direction:column;align-items:stretch} .final-ctas .btn{width:100%} .hero-stats{gap:22px} .process-steps{grid-template-columns:1fr} .curriculum-item{flex-direction:column} }