/* ============================================================================= AAORIDP - DESIGN SYSTEM ============================================================================= Structura fișierului: 1. Variabile (culori, spațieri) - aici schimbi paleta 2. Reset & bază 3. Header / navigație 4. Butoane, chips, badges 5. Secțiuni & titluri 6. Carduri & grile 7. Hero-uri 8. Galerii, carusel, lightbox 9. Componente de conținut (tabele, fapte, documente) 10. Footer 11. Widget aspect, cookie 12. Mobil (media queries) ============================================================================= */ /* ============================ 1. VARIABILE ================================ */ :root{ /* --accent și --accent-2 vin din config.php, injectate în */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1200px; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --ease: cubic-bezier(.2,.7,.2,1); } /* ---- temă luminoasă (implicită) ---- */ html[data-theme="light"]{ --bg: #f7f9fc; --bg2: #eef2f8; --surface: #ffffff; --surface-2: #f4f7fb; --surface-3: #e9eef6; --border: #e2e8f0; --border-2: #cbd5e1; --text: #0f172a; --text-2: #475569; --muted: #64748b; --faint: #94a3b8; --accent-ink:#ffffff; --grid: rgba(29,78,216,.055); --grid-major:rgba(29,78,216,.10); --shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.07); --shadow-lg: 0 4px 8px rgba(15,23,42,.05), 0 24px 56px rgba(15,23,42,.11); --mesh-op: .30; --head-bg: rgba(255,255,255,.88); } /* ---- temă întunecată ---- */ html[data-theme="dark"]{ --bg: #070c16; --bg2: #030711; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075); --surface-3: rgba(255,255,255,.11); --border: rgba(255,255,255,.10); --border-2: rgba(255,255,255,.18); --text: #eef4ff; --text-2: #b6c6df; --muted: #93a5c2; --faint: #6b7f9e; --accent-ink:#ffffff; --grid: rgba(120,170,255,.07); --grid-major:rgba(120,170,255,.13); --shadow: 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 28px 64px rgba(0,0,0,.6); --mesh-op: .55; --head-bg: rgba(7,12,22,.82); } /* ============================ 2. RESET & BAZĂ ============================= */ *,*::before,*::after{ box-sizing:border-box } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.6; color:var(--text); background:var(--bg); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .4s ease, color .3s ease; } /* stratul de grilă din fundal */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, var(--bg) 0%, var(--bg2) 75%); } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9; -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 45%, transparent 95%); mask-image:radial-gradient(130% 100% at 50% 0%, #000 45%, transparent 95%); } html[data-pattern="grid"] body::after{ background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:44px 44px; } html[data-pattern="blueprint"] body::after{ background-image: linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px), linear-gradient(var(--grid-major) 1.2px,transparent 1.2px),linear-gradient(90deg,var(--grid-major) 1.2px,transparent 1.2px); background-size:36px 36px,36px 36px,180px 180px,180px 180px; } html[data-pattern="dots"] body::after{ background-image:radial-gradient(var(--grid-major) 1.2px,transparent 1.4px); background-size:28px 28px; } html[data-pattern="none"] body::after{ opacity:0 } #bgmesh{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; opacity:var(--mesh-op); pointer-events:none } html[data-motion="off"] #bgmesh{ display:none } a{ color:inherit; text-decoration:none } img{ max-width:100%; display:block; height:auto } h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.022em; font-weight:800 } p{ margin:0 0 1em } p:last-child{ margin-bottom:0 } .wrap{ width:min(var(--wrap),100%); margin-inline:auto; padding-inline:clamp(16px,4vw,28px) } .pad{ padding-block:clamp(48px,7vw,84px) } .pad-sm{ padding-block:clamp(32px,4.5vw,52px) } .pad-t0{ padding-top:0 } section{ position:relative } .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:12px 20px; border-radius:0 0 8px 0 } .skip:focus{ left:0 } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px } /* apariție la scroll */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease) } .reveal.in{ opacity:1; transform:none } .reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s } .reveal.d3{ transition-delay:.18s } .reveal.d4{ transition-delay:.24s } html[data-motion="off"] .reveal{ opacity:1; transform:none; transition:none } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } html{ scroll-behavior:auto } } /* ============================ 3. HEADER ================================== */ .site-head{ position:sticky; top:0; z-index:60; background:var(--head-bg); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); border-bottom:1px solid var(--border); transition:box-shadow .3s ease; } .site-head.scrolled{ box-shadow:0 1px 0 var(--border), 0 8px 28px rgba(15,23,42,.06) } .head-top{ border-bottom:1px solid var(--border); font-size:12px; color:var(--muted) } .head-top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; padding-block:6px } .ht-left{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .ht-right{ display:flex; align-items:center; gap:14px; flex:none } .ht-mail{ color:var(--muted) } .ht-mail:hover{ color:var(--accent) } .lang{ display:flex; gap:2px; font-weight:700; font-size:11.5px; font-family:var(--mono) } .lang a{ padding:3px 7px; border-radius:6px; color:var(--faint) } .lang a:hover{ background:var(--surface-2); color:var(--text) } .lang a.on{ color:var(--accent-ink); background:var(--accent) } .head-main{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px } .brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:none } .brand .mark{ width:44px; height:44px; border-radius:12px; flex:none; overflow:hidden; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); } .brand .mark img{ width:100%; height:100%; object-fit:cover } .brand-txt{ min-width:0 } .brand-txt b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.03em; line-height:1.1 } .brand-txt > span{ display:block; font-size:11px; line-height:1.25; color:var(--muted); font-weight:500; max-width:32ch; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .nav{ display:flex; align-items:center; gap:0 } .nav > a, .nav-group > a{ position:relative; display:flex; align-items:center; gap:2px; padding:8px 9px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text-2); transition:color .2s, background .2s; white-space:nowrap; letter-spacing:-.005em; } .nav > a:hover, .nav-group > a:hover{ color:var(--text); background:var(--surface-2) } .nav a.is-active{ color:var(--accent) } .nav a.is-active::after{ content:""; position:absolute; left:9px; right:9px; bottom:1px; height:2px; border-radius:2px; background:var(--accent); } .caret{ font-size:8px; opacity:.55; margin-top:1px; transition:transform .2s } .nav-group:hover .caret{ transform:rotate(180deg); opacity:.9 } /* ---- submeniu la hover ---- */ .nav-group{ position:relative } /* punte invizibilă: mouse-ul poate traversa spațiul până la submeniu */ .nav-group::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px } .dropdown{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:236px; max-width:330px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:.2s var(--ease); z-index:70; } .nav-group:hover .dropdown, .nav-group:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) } .dropdown a{ display:block; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dropdown a:hover{ background:var(--surface-2); color:var(--accent) } .dropdown a.dd-all{ margin-top:4px; padding-top:11px; border-top:1px solid var(--border); border-radius:0 0 9px 9px; font-weight:650; color:var(--accent); font-size:13px; } .dropdown a.dd-all:hover{ background:var(--surface-2) } .nav-toggle{ display:none; width:44px; height:44px; border-radius:11px; flex:none; border:1px solid var(--border); background:var(--surface); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4.5px; } .nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--text); transition:.28s var(--ease) } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) } .nav-mobile{ display:none; flex-direction:column; padding-bottom:14px } .nav-mobile a{ padding:12px 14px; border-radius:10px; font-weight:600; color:var(--text-2); font-size:15.5px } .nav-mobile a.sub{ padding-left:30px; font-weight:500; font-size:14.5px; color:var(--muted) } .nav-mobile a.is-active{ color:var(--accent); background:var(--surface-2) } .nav-mobile-foot{ display:flex; gap:8px; padding:12px 14px 0; margin-top:8px; border-top:1px solid var(--border) } .mlang{ padding:8px 14px !important; border:1px solid var(--border); border-radius:999px; font-size:13px !important } .mlang.on{ background:var(--accent); color:var(--accent-ink) !important; border-color:transparent } /* ============================ 4. BUTOANE & PILULE ======================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:11px; font-weight:650; font-size:14.5px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); cursor:pointer; transition:.22s var(--ease); white-space:nowrap; } .btn:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 26px rgba(29,78,216,.16) } .btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent } .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 12px 30px rgba(29,78,216,.32) } .btn-ghost{ background:transparent } .btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:9px } .arrow{ transition:transform .22s var(--ease); display:inline-block } /* săgeata pentru linkuri care se deschid în altă filă */ .ext{ font-size:.85em; opacity:.75; transition:transform .2s var(--ease) } .btn:hover .ext{ transform:translate(2px,-2px); opacity:1 } .btn:hover .arrow, .card:hover .arrow, .sec-link:hover .arrow{ transform:translateX(4px) } .pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap; } .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none } .s-live{ color:#b45309; background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.42) } .s-done{ color:#047857; background:rgba(16,185,129,.15); border-color:rgba(16,185,129,.38) } .s-plan{ color:var(--text-2); background:var(--surface-2); border-color:var(--border-2) } html[data-theme="dark"] .s-live{ color:#fbbf24 } html[data-theme="dark"] .s-done{ color:#34d399 } .chip{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:650; white-space:nowrap; color:var(--chip,var(--accent)); background:color-mix(in srgb, var(--chip,var(--accent)) 11%, transparent); border:1px solid color-mix(in srgb, var(--chip,var(--accent)) 26%, transparent); } a:hover > .chip{ background:color-mix(in srgb, var(--chip,var(--accent)) 20%, transparent) } html[data-theme="dark"] .chip{ filter:brightness(1.45) saturate(.9) } .kicker{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } /* filtre */ .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px } .fbtn{ padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--text-2); transition:.2s; } .fbtn:hover{ border-color:var(--border-2); color:var(--text) } .fbtn.on{ background:var(--accent); color:var(--accent-ink); border-color:transparent } /* ============================ 5. SECȚIUNI =============================== */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap } .sec-title{ font-size:clamp(23px,3.1vw,34px) } .sec-lead{ margin:10px 0 0; color:var(--text-2); max-width:62ch; font-size:16px } .sec-link{ font-weight:650; font-size:14px; color:var(--accent); flex:none; display:inline-flex; gap:6px; align-items:center } .sub-title{ font-size:clamp(19px,2.4vw,24px); margin:40px 0 16px } .sub-title:first-child{ margin-top:0 } /* ============================ 6. CARDURI & GRILE ======================== */ .grid{ display:grid; gap:22px } .g2{ grid-template-columns:repeat(2,minmax(0,1fr)) } .g3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .g4{ grid-template-columns:repeat(4,minmax(0,1fr)) } .g-auto{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) } .card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .28s var(--ease), border-color .28s, box-shadow .28s; } .card:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow-lg) } .card-pad{ padding:24px } .card-item{ display:flex; flex-direction:column; color:inherit } .card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-3) } .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease) } .card-item:hover .card-media img{ transform:scale(1.045) } .card-badge{ position:absolute; top:12px; left:12px; z-index:2 } /* Peste o fotografie, pastila trebuie să fie plină și cu text alb - o pastilă translucidă cu text colorat dispare pur și simplu pe fundaluri variate. */ .card-badge .pill{ padding:7px 14px; font-size:12px; font-weight:750; letter-spacing:.01em; color:#fff; border-color:transparent; box-shadow:0 2px 12px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.22) inset; text-shadow:0 1px 2px rgba(0,0,0,.22); } .card-badge .s-live{ background:#c2620a } .card-badge .s-done{ background:#047857 } .card-badge .s-plan{ background:#475569 } .card-badge .pill .dot{ width:7px; height:7px; background:#fff; opacity:.92 } html[data-theme="dark"] .card-badge .s-live{ background:#b45309; color:#fff } html[data-theme="dark"] .card-badge .s-done{ background:#03694b; color:#fff } html[data-theme="dark"] .card-badge .s-plan{ background:#334155; color:#fff } .card-tall .card-media{ aspect-ratio:4/5 } .card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; gap:8px } .card-meta{ font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--faint); letter-spacing:.02em } .card-body h3{ font-size:17.5px; font-weight:700; line-height:1.3 } .card-body p{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55 } .card-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px } .more{ margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:650; font-size:14px } .cover-ph{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg, var(--c), color-mix(in srgb,var(--c) 55%, #000)); position:relative; overflow:hidden; } .cover-ph::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px); background-size:26px 26px; } .cover-ph span{ font-size:38px; font-weight:800; color:rgba(255,255,255,.9); letter-spacing:-.04em; z-index:1 } /* card colorat cu tematică (grila de pe prima pagină) */ .topic-card{ display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-height:180px; padding:22px; border-radius:var(--radius); color:#fff; overflow:hidden; position:relative; background:linear-gradient(150deg, var(--c), color-mix(in srgb,var(--c) 62%, #000)); transition:transform .3s var(--ease), box-shadow .3s; } .topic-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px color-mix(in srgb,var(--c) 34%, transparent) } .topic-card::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:30px 30px; } .topic-card > *{ position:relative } .topic-card h3{ font-size:18px; font-weight:750 } .topic-card p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.8) } .topic-card .tc-count{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72) } /* statistici */ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px } .stat{ padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border) } .stat b{ display:block; font-size:clamp(28px,4vw,38px); font-weight:800; letter-spacing:-.04em; color:var(--accent); line-height:1 } .stat span{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted) } .empty{ border:1px dashed var(--border-2); border-radius:var(--radius); padding:44px 24px; text-align:center; color:var(--muted); font-size:14.5px; background:var(--surface); } /* ============================ 7. HERO =================================== */ .hero{ position:relative; padding-block:clamp(48px,8vw,96px); overflow:hidden } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:center } .hero h1{ font-size:clamp(32px,5.4vw,60px); letter-spacing:-.035em; line-height:1.04 } .hero h1 .accent{ background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-lead{ margin:22px 0 0; font-size:clamp(16px,1.9vw,18.5px); color:var(--text-2); max-width:56ch; line-height:1.62 } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px } .hero-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:26px; border-top:1px solid var(--border) } /* ---- emblema din hero ---- Sigla asociației în centru, cu cele opt domenii de activitate orbitând în jur. Am ales asta în locul roților dințate: asociația lucrează pe opt domenii, nu doar pe mecanică, iar o roată dințată spune exact invers. Culorile punctelor vin din config.php, deci rămân sincronizate cu site-ul. */ .hero-panel{ position:relative; display:grid; place-items:center; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-lg); aspect-ratio:1/1; } /* grilă fină de fundal, estompată spre margini */ .hero-panel::before{ content:""; position:absolute; inset:0; opacity:.55; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(72% 72% at 50% 50%, #000 35%, transparent 100%); mask-image:radial-gradient(72% 72% at 50% 50%, #000 35%, transparent 100%); } /* --size în unități absolute: punctele se așază pe cerc cu calc() pe baza ei. Un procent nu ar merge aici, fiindcă în translateY s-ar raporta la punct. */ .hero-emblem{ --size: clamp(210px, 26vw, 330px); position:relative; width:var(--size); height:var(--size); display:grid; place-items:center; } /* inelul punctat pe care stau domeniile */ .he-ring{ position:absolute; inset:4%; border-radius:50%; border:1px dashed color-mix(in srgb, var(--accent) 30%, transparent); } /* orbita se rotește, purtând punctele cu ea */ .he-orbit{ position:absolute; inset:0; animation:he-spin 46s linear infinite } .he-dot{ position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--c); /* rotim pe poziție, împingem pe rază, apoi rotim înapoi ca punctul să rămână drept */ transform:rotate(var(--a)) translateY(calc(var(--size) * -0.46)) rotate(calc(-1 * var(--a))); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent), 0 3px 10px color-mix(in srgb, var(--c) 38%, transparent); } /* sigla din mijloc, rotindu-se lent în sens invers */ .he-logo{ position:relative; width:53%; height:53%; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--border); box-shadow:0 10px 34px rgba(15,23,42,.16); animation:he-spin-back 64s linear infinite; } .he-logo img{ width:100%; height:100%; object-fit:contain; padding:11% } @keyframes he-spin { from{ transform:rotate(0) } to{ transform:rotate(360deg) } } @keyframes he-spin-back { from{ transform:rotate(0) } to{ transform:rotate(-360deg) } } /* fără animații: totul rămâne pe loc, la fel de lizibil */ html[data-motion="off"] .he-orbit, html[data-motion="off"] .he-logo{ animation:none } @media (prefers-reduced-motion: reduce){ .he-orbit, .he-logo{ animation:none } } @media (max-width:940px){ .hero-emblem{ --size: clamp(200px, 52vw, 300px) } } /* antet pagină interioară */ .page-hero{ padding-block:clamp(36px,5.5vw,64px) clamp(24px,3.5vw,36px); border-bottom:1px solid var(--border) } .page-title{ font-size:clamp(28px,4.6vw,46px); letter-spacing:-.033em } .page-lead{ margin:16px 0 0; font-size:clamp(15.5px,1.8vw,17.5px); color:var(--text-2); max-width:68ch; line-height:1.62 } .crumbs{ border-bottom:1px solid var(--border); background:var(--surface-2) } .crumbs .wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-block:11px; font-size:13px; color:var(--muted) } .crumbs a{ color:var(--muted) } .crumbs a:hover{ color:var(--accent) } .crumbs .sep{ color:var(--faint) } .crumbs .cur{ color:var(--text); font-weight:600 } /* ============================ 8. GALERII ================================ */ .gallery{ display:grid; gap:12px } .gallery.g-2{ grid-template-columns:repeat(2,1fr) } .gallery.g-3{ grid-template-columns:repeat(3,1fr) } .gallery.g-4{ grid-template-columns:repeat(4,1fr) } .gitem{ position:relative; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; background:var(--surface-3); aspect-ratio:4/3; transition:transform .25s var(--ease), box-shadow .25s; } .gitem:hover{ transform:translateY(-3px); box-shadow:var(--shadow) } .gitem img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) } .gitem:hover img{ transform:scale(1.06) } .gcap{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; text-align:left; font-size:12.5px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.78)); opacity:0; transition:opacity .25s; } .gitem:hover .gcap{ opacity:1 } .carousel{ display:grid; gap:12px } .carousel-main{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface-3); aspect-ratio:16/10 } .carousel-main img{ width:100%; height:100%; object-fit:cover } .cbtn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--head-bg); backdrop-filter:blur(10px); color:var(--text); font-size:24px; line-height:1; cursor:pointer; transition:.2s; } .cbtn:hover{ background:var(--accent); color:var(--accent-ink); border-color:transparent } .cprev{ left:12px } .cnext{ right:12px } .ccount{ position:absolute; top:12px; right:12px; padding:5px 11px; border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:700; background:var(--head-bg); border:1px solid var(--border); backdrop-filter:blur(10px); } .ccaption{ position:absolute; left:0; right:0; bottom:0; padding:30px 16px 12px; color:#fff; font-size:13.5px; background:linear-gradient(transparent,rgba(0,0,0,.75)) } .ccaption:empty{ display:none } .thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin } .thumbs button{ flex:none; width:88px; aspect-ratio:4/3; padding:0; border-radius:9px; overflow:hidden; border:2px solid transparent; background:none; cursor:pointer; opacity:.55; transition:.2s; } .thumbs button:hover{ opacity:.85 } .thumbs button.on{ opacity:1; border-color:var(--accent) } .thumbs img{ width:100%; height:100%; object-fit:cover } .lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(5,10,20,.93); backdrop-filter:blur(6px); padding:5vh 6vw; } .lightbox[hidden]{ display:none } .lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:8px } .lb-close,.lb-nav{ position:absolute; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; border-radius:50%; display:grid; place-items:center; transition:.2s; } .lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.2) } .lb-close{ top:20px; right:20px; width:44px; height:44px; font-size:26px } .lb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px } .lb-prev{ left:16px } .lb-next{ right:16px } .lb-cap{ position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(255,255,255,.85); font-size:14px; padding-inline:20px } /* ============================ 9. CONȚINUT =============================== */ .prose{ max-width:74ch; font-size:16.5px; line-height:1.72; color:var(--text-2) } .prose.wide{ max-width:none } .prose h2{ font-size:clamp(21px,2.6vw,27px); color:var(--text); margin:2em 0 .6em } .prose h3{ font-size:clamp(17.5px,2vw,20px); color:var(--text); margin:1.7em 0 .5em; font-weight:700 } .prose h2:first-child,.prose h3:first-child{ margin-top:0 } .prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.35em } .prose li{ margin-bottom:.45em } .prose li::marker{ color:var(--accent) } .prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px } .prose a:hover{ text-decoration-thickness:2px } .prose strong{ color:var(--text); font-weight:650 } .prose img{ border-radius:var(--radius-sm); margin:1.5em 0; border:1px solid var(--border) } .prose figure{ margin:1.6em 0 } .prose figcaption{ margin-top:8px; font-size:13px; color:var(--faint); text-align:center } .prose blockquote{ margin:1.6em 0; padding:4px 0 4px 20px; border-left:3px solid var(--accent); color:var(--text); font-size:17px; font-style:italic; } .prose code{ font-family:var(--mono); font-size:.88em; padding:2px 6px; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) } .prose hr{ border:0; border-top:1px solid var(--border); margin:2.4em 0 } .callout{ margin:1.6em 0; padding:18px 20px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); font-size:15px } .callout-info{ border-left:3px solid var(--accent) } .callout-warn{ border-left:3px solid #f59e0b; background:rgba(245,158,11,.07) } .callout-eu{ border-left:3px solid #003399; background:rgba(0,51,153,.05) } .callout p:last-child{ margin-bottom:0 } .table-wrap{ overflow-x:auto; margin:1.6em 0; border:1px solid var(--border); border-radius:var(--radius-sm) } table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px } th,td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border) } th{ background:var(--surface-2); font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted) } tr:last-child td{ border-bottom:0 } /* listă de fapte (buget, perioadă, program) */ .facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; margin:0; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden } .fact{ padding:18px 20px; background:var(--surface) } .fact dt{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px } .fact dd{ margin:0; font-size:15px; font-weight:600; color:var(--text); line-height:1.45 } /* documente descărcabile */ .doclist{ list-style:none; margin:0; padding:0; display:grid; gap:10px } .doclist a{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); transition:.2s var(--ease); } .doclist a:hover{ border-color:var(--accent); transform:translateX(3px) } .doctype{ flex:none; padding:5px 9px; border-radius:6px; font-family:var(--mono); font-size:10.5px; font-weight:700; background:var(--surface-3); color:var(--muted); } .dt-pdf{ background:rgba(220,38,38,.12); color:#dc2626 } .dt-docx,.dt-doc{ background:rgba(37,99,235,.12); color:#2563eb } .dt-xlsx,.dt-xls{ background:rgba(5,150,105,.12); color:#059669 } .docname{ flex:1; font-weight:600; font-size:14.5px; min-width:0 } .docsize{ flex:none; font-family:var(--mono); font-size:11.5px; color:var(--faint) } /* banda de finanțare: sigla programului + prioritatea proiectului */ .funding{ display:flex; align-items:center; gap:clamp(18px,3vw,34px); flex-wrap:wrap; margin-top:18px; padding:22px 26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); } .fund-logo{ flex:none; padding:12px 16px; border-radius:10px; background:#fff; border:1px solid var(--border); transition:.2s } .fund-logo:has(a):hover{ border-color:var(--accent); box-shadow:0 6px 18px rgba(29,78,216,.14) } .fund-logo img{ height:44px; width:auto; object-fit:contain } .fund-prog a{ color:inherit; text-decoration:underline; text-decoration-color:var(--border-2); text-underline-offset:3px; transition:.2s } .fund-prog a:hover{ color:var(--accent); text-decoration-color:var(--accent) } .fund-body{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); flex-wrap:wrap; flex:1; min-width:0 } .fund-label{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; } .fund-prog{ font-size:15px; font-weight:650; color:var(--text); line-height:1.35 } .fund-prio{ display:flex; align-items:center; gap:14px; min-width:0 } .fund-icon{ flex:none; width:46px; height:46px; object-fit:contain; border-radius:50% } .fund-prio-txt{ font-size:14.5px; font-weight:600; color:var(--text-2); line-height:1.4 } @media (max-width:620px){ .funding{ padding:18px 20px; gap:16px } .fund-logo img{ height:36px } .fund-body{ gap:16px } } /* nota UE */ .eu-notice{ display:flex; align-items:center; gap:18px; padding:20px 24px; margin-top:8px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-2); } .eu-notice p{ margin:0; font-size:13px; line-height:1.6; color:var(--muted) } .eu-flag{ flex:none; width:66px; height:44px; border-radius:5px; object-fit:cover } .eu-flag-ph{ background:#003399; display:grid; place-items:center; color:#FFCC00; font-size:20px } /* linia timpului */ .timeline{ position:relative; padding-left:30px } .timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border) } .tl-item{ position:relative; padding-bottom:30px } .tl-item:last-child{ padding-bottom:0 } .tl-item::before{ content:""; position:absolute; left:-29px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); } .tl-year{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.06em } .tl-item h3{ font-size:17px; margin:4px 0 6px } .tl-item p{ margin:0; color:var(--text-2); font-size:14.5px } /* paginare */ .pager{ display:flex; justify-content:center; gap:6px; margin-top:40px; flex-wrap:wrap } .pbtn{ min-width:40px; height:40px; padding:0 12px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); font-weight:650; font-size:14px; color:var(--text-2); } .pbtn:hover{ border-color:var(--border-2); color:var(--text) } .pbtn.on{ background:var(--accent); color:var(--accent-ink); border-color:transparent } /* bandă CTA */ .cta-band{ border-radius:var(--radius-lg); padding:clamp(32px,5vw,56px); position:relative; overflow:hidden; background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .cta-band::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:36px 36px; } .cta-band > *{ position:relative } .cta-band h2{ font-size:clamp(22px,3.2vw,32px); max-width:22ch } .cta-band p{ margin:12px 0 0; color:rgba(255,255,255,.86); max-width:56ch; font-size:16px } .cta-band .btn{ background:#fff; color:var(--accent); border-color:transparent } .cta-band .btn:hover{ box-shadow:0 12px 32px rgba(0,0,0,.22) } /* banda e un link întreg - săgeata din dreapta ține loc de buton */ a.cta-band{ color:#fff; transition:transform .25s var(--ease), box-shadow .25s var(--ease) } a.cta-band:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(29,78,216,.28) } .cta-arrow{ flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); transition:transform .25s var(--ease), background .25s; } a.cta-band:hover .cta-arrow{ transform:translateX(4px); background:rgba(255,255,255,.26) } /* logo-uri parteneri */ .partner-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; align-items:center } .partner-logo{ display:grid; place-items:center; padding:22px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); min-height:100px; transition:.25s; } .partner-logo:hover{ border-color:var(--border-2); box-shadow:var(--shadow) } .partner-logo img{ max-height:56px; width:auto; object-fit:contain } html[data-theme="dark"] .partner-logo img{ filter:brightness(0) invert(1); opacity:.82 } /* ============================ 10. FOOTER ================================ */ .site-foot{ margin-top:clamp(56px,8vw,96px); border-top:1px solid var(--border); background:var(--surface-2) } .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:36px; padding-block:clamp(40px,5vw,60px) } .foot-brand .brand{ margin-bottom:16px } .foot-brand p{ font-size:14px; color:var(--text-2); margin-bottom:8px; max-width:42ch } .foot-tag{ color:var(--muted) !important; font-size:13.5px !important } .foot-social{ display:flex; gap:8px; margin-top:16px } .foot-social a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:700; color:var(--muted); } .foot-social a:hover{ border-color:var(--accent); color:var(--accent) } .foot-col h4{ font-size:12px; font-family:var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; font-weight:700 } .foot-col a{ display:block; padding:5px 0; font-size:14.5px; color:var(--text-2) } .foot-col a:hover{ color:var(--accent) } .foot-contact address{ font-style:normal; font-size:14.5px; color:var(--text-2); line-height:1.7; margin-bottom:12px } .foot-eu{ padding:20px 0; border-top:1px solid var(--border) } .foot-eu p{ margin:0; font-size:12px; line-height:1.65; color:var(--faint); max-width:110ch } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:20px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); } .foot-links a{ color:var(--muted) } .foot-links a:hover{ color:var(--accent) } /* ============================ 11. WIDGET ASPECT ========================= */ .appearance{ position:fixed; right:18px; bottom:18px; z-index:70 } .app-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-2); box-shadow:var(--shadow); transition:.24s var(--ease); } .app-btn:hover{ color:var(--accent); border-color:var(--accent); transform:rotate(35deg) } .app-panel{ position:absolute; right:0; bottom:56px; width:250px; padding:16px; border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px) scale(.97); transition:.24s var(--ease); } .app-panel.open{ opacity:1; visibility:visible; transform:none } .app-row{ margin-bottom:14px } .app-row:last-child{ margin-bottom:0 } .app-row label{ display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:8px } .seg{ display:flex; gap:4px; padding:4px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border) } .seg button{ flex:1; padding:7px 6px; border-radius:7px; border:0; background:none; cursor:pointer; font-size:12.5px; font-weight:650; color:var(--muted); font-family:inherit; transition:.18s; } .seg button:hover{ color:var(--text) } .seg button.on{ background:var(--accent); color:var(--accent-ink) } .cookie{ position:fixed; left:18px; bottom:18px; z-index:75; max-width:400px; padding:18px 20px; border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-lg); display:flex; gap:14px; align-items:center; } .cookie[hidden]{ display:none } .cookie p{ margin:0; font-size:13px; color:var(--text-2); line-height:1.55 } .cookie button{ flex:none; padding:9px 16px; border-radius:9px; border:0; cursor:pointer; background:var(--accent); color:var(--accent-ink); font-weight:650; font-size:13px; font-family:inherit; } /* ============================ 12. MOBIL ================================= */ @media (max-width:1180px){ /* meniul are multe intrări: eliberăm lățime ascunzând subtitlul din siglă */ .brand-txt > span{ display:none } .nav > a, .nav-group > a{ padding:8px 7px; font-size:13px } } @media (max-width:1080px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:32px } .g4{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:940px){ .nav{ display:none } .nav-toggle{ display:flex } .nav-mobile.open{ display:flex } .hero-grid{ grid-template-columns:1fr; gap:36px } .hero-panel{ max-width:440px; margin-inline:auto; width:100% } .g3{ grid-template-columns:repeat(2,minmax(0,1fr)) } .gallery.g-4{ grid-template-columns:repeat(3,1fr) } .ht-left{ display:none } } @media (max-width:720px){ body{ font-size:15.5px } .g2,.g3,.g4,.g-auto{ grid-template-columns:1fr } .gallery.g-3,.gallery.g-4{ grid-template-columns:repeat(2,1fr) } .foot-grid{ grid-template-columns:1fr; gap:28px } .brand-txt > span{ display:none } .head-top .wrap{ justify-content:flex-end } .cta-band{ flex-direction:column; align-items:flex-start } .sec-head{ flex-direction:column; align-items:flex-start; gap:14px } .facts{ grid-template-columns:1fr } .eu-notice{ flex-direction:column; align-items:flex-start; gap:12px } .cookie{ left:12px; right:12px; max-width:none; flex-direction:column; align-items:stretch; text-align:left } .appearance{ right:12px; bottom:12px } .lb-nav{ width:44px; height:44px; font-size:24px } .lb-prev{ left:6px } .lb-next{ right:6px } .prose{ font-size:16px } } @media (max-width:420px){ .gallery.g-2,.gallery.g-3,.gallery.g-4{ grid-template-columns:1fr } .thumbs button{ width:70px } } @media print{ .site-head,.site-foot,.appearance,.cookie,.filters,.pager,#bgmesh,body::after{ display:none !important } body{ background:#fff; color:#000 } .reveal{ opacity:1 !important; transform:none !important } }