/* ============================================================ CIRCULARIS — page-local components Layered ON TOP of the SAGROD design system (assets/system.css, kept verbatim from design.ddnet.ro so it stays replaceable). Every value below is taken from the system's existing idiom: clamp() section rhythm, 14/18/20px radii, 18-22px grid gaps. ============================================================ */ /* logo used in place of the letter .seal */ .seal-img{width:42px;height:42px;border-radius:50%;background:var(--surface);object-fit:contain;flex:none;padding:2px;border:1px solid var(--line)} .hub-top .seal-img{width:40px;height:40px} /* ---------- hero ---------- */ .hero{padding:clamp(40px,6vw,88px) 0 clamp(44px,6vw,80px);border-bottom:1px solid var(--line)} .hero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.02;margin:18px 0 22px;max-width:19ch} .hero h1 em{font-style:normal;color:var(--brand)} .hero .lead{font-size:clamp(16.5px,1.5vw,20px);color:var(--muted);max-width:62ch} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} /* ---------- stat strip ---------- */ .stats{display:flex;gap:clamp(22px,4vw,48px);flex-wrap:wrap;margin-top:36px} .stats div b{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);color:var(--brand);display:block;line-height:1} .stats div span{font-size:13px;color:var(--muted);font-weight:600} /* ---------- sections ---------- */ .sec{padding-block:clamp(48px,6vw,84px)} .sec-head{max-width:60ch} .sec-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px} .sec-head .lead{font-size:17.5px;color:var(--muted);margin-top:14px} /* ---------- card grid ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px} .cards.two{grid-template-columns:repeat(2,1fr)} .card{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surface)} .card .ico{width:44px;height:44px;border-radius:12px;background:var(--halo);color:var(--brand);display:grid;place-items:center;margin-bottom:16px} .card .ico svg{width:22px;height:22px} .card h3{font-size:18.5px;margin-bottom:8px} .card p{font-size:14.5px;color:var(--muted)} /* ---------- numbered direction list ---------- */ .dirs{display:grid;gap:14px;margin-top:38px} .dir{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--surface);transition:border-color .2s} .dir:hover{border-color:var(--brand)} .dir .n{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--brand);letter-spacing:.1em;padding-top:3px;flex:none;min-width:36px} .dir h3{font-size:19px;margin-bottom:7px} .dir p{font-size:14.5px;color:var(--muted);max-width:70ch} /* ---------- call-to-action band ---------- */ .band{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(26px,3.4vw,40px); display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:8px} .band .txt{flex:1 1 340px} .band h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px} .band p{color:var(--muted);font-size:15.5px;max-width:56ch} .band .act{display:flex;gap:12px;flex-wrap:wrap} /* ---------- press announcement ---------- */ .press{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,3vw,40px);align-items:start;margin-top:38px} .press figure{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)} .press figure img{width:100%;height:auto} .press figcaption{font-size:12.5px;color:var(--muted);padding:12px 14px;border-top:1px solid var(--line)} .press .body h3{font-size:20px;margin-bottom:12px} .press .body p{color:var(--muted);font-size:15.5px;margin-bottom:14px} .press .body .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} /* ---------- theme/accent widget: hidden on this microsite ---------- theme.js is kept verbatim upstream (it still applies the default palette/mode from the attributes); only its floating control surface is suppressed. */ #sg-fab,#sg-panel{display:none!important} /* ---------- mandatory visibility band (MIV PR Nord-Est) ---------- Always on white, in both light and dark mode: the official logos are supplied for light reproduction and one of them (ADR) ships without transparency, so a themed background would put a white box on a dark surface. Heights are set per logo because the lockups differ — the EU mark carries its caption inside the file, so it needs more height to read at the same optical weight as the rest. */ /* Full-bleed white strip at the very top of the page, above the utility bar: the four marks are the first thing on the page, at a size that reads. */ .viz-top{background:#fff;border-bottom:1px solid var(--line)} .viz-band{padding:16px 26px;background:#fff;display:flex;align-items:center; justify-content:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap} .viz-band img{width:auto;display:block} .viz-band .l-eu{height:74px} .viz-band .l-gov{height:62px} .viz-band .l-regio{height:48px} .viz-band .l-adr{height:48px} /* Four marks never fit one narrow row without shrinking below legibility, so they go 2x2 instead of 3+1 orphan. */ @media (max-width:520px){ .viz-band{display:grid;grid-template-columns:1fr 1fr;justify-items:center; align-items:center;gap:18px 24px;padding:18px 20px} .viz-band .l-eu{height:62px} .viz-band .l-gov{height:53px} .viz-band .l-regio,.viz-band .l-adr{height:41px} } /* ---------- project key data (start date, duration, EU support) ---------- Three headline tiles for the facts the funding rules require to be visible, then the full financial breakdown as a definition list. */ .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px} .fact{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--surface)} .fact .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .fact .v{font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.2;margin-top:10px} .fact .s{font-size:13.5px;color:var(--muted);margin-top:8px} .fact.hi{border-color:var(--brand)} .fact.hi .v{color:var(--brand)} .ftable{margin-top:24px;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:var(--surface)} .ftable .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:14px 24px;border-top:1px solid var(--line);font-size:15px} .ftable .r:first-child{border-top:0} .ftable dt{color:var(--muted)} .ftable dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .ftable .note{font-size:13px;color:var(--muted);padding:14px 24px;border-top:1px solid var(--line)} @media (max-width:900px){ .facts{grid-template-columns:1fr} .ftable .r{flex-direction:column;gap:4px} .ftable dd{text-align:left} } /* ---------- footer EU visibility note ---------- */ .eu-note{margin-top:40px;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--bg)} .eu-note p{font-size:13.5px;line-height:1.65;margin-bottom:10px} .eu-note p:last-child{margin-bottom:0} /* .foot a is display:block in system.css — keep these inline so the line reads as one */ .eu-note a{display:inline;margin:0;opacity:1;color:var(--brand);text-decoration:underline;text-underline-offset:3px} .eu-note .slogan{font-weight:700;color:var(--brand)} .eu-note .slogan a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media (max-width:900px){ .cards{grid-template-columns:1fr 1fr} .press{grid-template-columns:1fr} .press figure{max-width:340px} } @media (max-width:600px){ .cards,.cards.two{grid-template-columns:1fr} .dir{flex-direction:column;gap:10px} }