/* ============================================================ Zaal 22 - culture-first foundation Static, dependency-free stylesheet ============================================================ */ /* ---------- Fonts ---------- */ @font-face{font-family:"Aktiv";src:url("fonts/AktivGrotesk-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Aktiv";src:url("fonts/AktivGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Aktiv";src:url("fonts/AktivGrotesk-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Aktiv";src:url("fonts/AktivGrotesk-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Aktiv";src:url("fonts/AktivGrotesk-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap} /* ---------- Tokens ---------- */ :root{ --paper:#F4EEE1; --paper-2:#EDE5D3; --ink:#211D1E; --ink-soft:#5A524E; --terra:#F05426; --terra-deep:#CC401A; --line:rgba(33,29,30,.14); --line-strong:rgba(33,29,30,.28); --maxw:1180px; --pad:clamp(20px,5vw,64px); --star:url("assets/star.svg"); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Aktiv",system-ui,sans-serif; font-weight:400; font-size:clamp(16px,1.05vw,18px); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* language visibility - toggled by data-lang on */ [data-show]{display:none} html[data-lang="en"] [data-show="en"]{display:revert} html[data-lang="nl"] [data-show="nl"]{display:revert} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(244,238,225,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:30px;width:auto} .nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)} .nav a{ font-weight:500;font-size:.95rem;letter-spacing:.01em; color:var(--ink-soft);padding:6px 0;position:relative;transition:color .18s; } .nav a:hover{color:var(--ink)} .nav a.active{color:var(--ink)} .nav a.active::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--terra) } .lang{display:flex;align-items:center;gap:8px;margin-left:6px} .lang button{ font-family:inherit;font-weight:600;font-size:.8rem;letter-spacing:.06em; background:none;border:0;color:var(--ink-soft);cursor:pointer;padding:4px; } .lang button.active{color:var(--terra)} .lang .sep{color:var(--line-strong)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s} /* ---------- Type ---------- */ .eyebrow{ font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--terra-deep);margin:0 0 18px; } h1,h2,h3{margin:0;font-weight:900;line-height:1.04;letter-spacing:-.02em} h1{font-size:clamp(2.6rem,6.5vw,5.4rem)} h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.015em} h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.01em} .lead{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.5;font-weight:400;color:var(--ink)} p{margin:0 0 1.1em;color:var(--ink-soft);max-width:62ch} p.ink{color:var(--ink)} strong{font-weight:700;color:var(--ink)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero .container{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px)} .hero h1{max-width:16ch} .hero .lead{max-width:54ch;margin-top:28px} .hero-mark{ position:absolute;right:-6%;top:50%;transform:translateY(-50%); width:min(46vw,560px);aspect-ratio:130/117; background:var(--terra); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; opacity:.12;pointer-events:none; } .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:14px 26px;border-radius:999px;border:1px solid var(--ink); transition:.18s;cursor:pointer; } .btn:hover{transform:translateY(-1px)} .btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn-solid:hover{background:var(--terra);border-color:var(--terra)} .btn-ghost{background:transparent;color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} /* ---------- Sections ---------- */ .section{padding-block:clamp(56px,8vw,110px);border-bottom:1px solid var(--line)} .section.tight{padding-block:clamp(40px,5vw,70px)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:start} .grid-12{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:start} .stack>*+*{margin-top:1.1em} /* labelled feature list with star bullets */ .feature-list{list-style:none;margin:0;padding:0} .feature-list li{ position:relative;padding:18px 0 18px 40px;border-top:1px solid var(--line); font-size:1.06rem;color:var(--ink); } .feature-list li:last-child{border-bottom:1px solid var(--line)} .feature-list li::before{ content:"";position:absolute;left:0;top:22px;width:18px;height:16px; background:var(--terra); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; } /* two-column program cards */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)} .card{ background:var(--paper-2);border:1px solid var(--line);border-radius:18px; padding:clamp(26px,3vw,40px); } .card h3{margin-bottom:18px} .card .feature-list li{border-color:var(--line-strong);font-size:1rem;padding-left:36px} .card .feature-list li::before{width:15px;height:13px;top:21px} /* definition / details rows */ .dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 40px;margin:0} .dl dt{font-weight:600;color:var(--ink)} .dl dd{margin:0;color:var(--ink-soft)} /* people */ .people{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px} .person{border-top:1px solid var(--line);padding-top:16px} .person .name{font-weight:700;color:var(--ink);font-size:1.15rem} .person .role{color:var(--terra-deep);font-weight:500;font-size:.92rem;letter-spacing:.02em} /* doc blocks (anbi) */ .doc{border-top:1px solid var(--line);padding:22px 0} .doc:last-child{border-bottom:1px solid var(--line)} .doc h3{margin-bottom:8px} /* section heading helper */ .section-head{max-width:60ch;margin-bottom:clamp(30px,4vw,56px)} .section-head .lead{margin-top:18px} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px)} .contact-line{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:700;letter-spacing:-.01em;line-height:1.2} .contact-line a:hover{color:var(--terra)} .muted{color:var(--ink-soft);font-size:.95rem} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:#D9D2C7;padding-block:clamp(48px,6vw,80px)} .site-footer a{color:#D9D2C7} .site-footer a:hover{color:var(--terra)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px} .site-footer .logo{height:32px;margin-bottom:20px} .site-footer h4{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9B9286;margin:0 0 16px;font-weight:600} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:10px} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12); color:#8E867B;font-size:.85rem} /* ---------- Page header band ---------- */ .page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero .container{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)} .page-hero h1{font-size:clamp(2.2rem,5vw,4rem);max-width:18ch} .page-hero .lead{margin-top:24px;max-width:56ch} .page-hero .hero-mark{opacity:.09;width:min(38vw,460px)} /* ---------- Responsive ---------- */ @media(max-width:860px){ .grid-2,.grid-12,.cards,.contact-grid,.people,.footer-grid{grid-template-columns:1fr} .footer-grid{gap:32px} .nav{ position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:flex-start; gap:4px;background:var(--paper);border-bottom:1px solid var(--line); padding:14px var(--pad) 24px;transform:translateY(-130%);transition:transform .28s ease; } .nav.open{transform:translateY(0)} .nav a{width:100%;padding:12px 0;font-size:1.1rem;border-bottom:1px solid var(--line)} .nav a.active::after{display:none} .nav .lang{margin:14px 0 0} .nav-toggle{display:block} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:520px){ .dl{grid-template-columns:1fr;gap:2px 0} .dl dd{margin-bottom:12px} }