/* ============================================================ Evidentia University — MSc Behavioral Economics landing Brand-faithful restyle: classic-academic, modernized. Type: Cormorant Garamond (display serif) + Jost (sans) Color palette (restricted): white · black/navy #192436 · blue #2897e9 Layout: full-bleed bands + wide centered .inner ============================================================ */ :root{ --navy:#192436; --navy-d:#10172a; --navy-l:#27344c; --blue:#2897e9; --blue-d:#1c80d6; --blue-soft:#eaf4fd; --red:#2897e9; /* CTAs use the brand blue (no red in palette) */ --red-d:#1c80d6; --ink:#192436; --gray:#5a6577; --gray-l:#8b94a3; --line:#e3e8ef; --line2:#d2d9e3; --paper:#f4f7fa; --paper2:#eef2f7; --white:#ffffff; --err:#192436; /* Single typeface: Jost for everything (display + body), weight does the work */ --serif:'Jost',system-ui,-apple-system,Segoe UI,sans-serif; --sans:'Jost',system-ui,-apple-system,Segoe UI,sans-serif; --r:7px; --r2:14px; --t:.22s ease; --e-out:cubic-bezier(.16,1,.3,1); /* ease-out-expo — fluid deceleration */ --e-soft:cubic-bezier(.22,.61,.36,1); /* ease-out-quad for hovers */ --nav-h:74px; --shadow:0 18px 48px rgba(20,30,55,.12),0 4px 14px rgba(20,30,55,.06); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.65;font-size:16.5px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:var(--sans)} /* ── Headings: serif ── */ h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.14;letter-spacing:-.015em;text-wrap:balance} em{font-style:normal} .sec-lead,.hero-h1 .block2{text-wrap:pretty} /* ── Focus ── */ :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px} .on-dark :focus-visible,#hero :focus-visible,.sec-dark :focus-visible,#cta-bottom :focus-visible{outline-color:#2897e9} .skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--red);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 8px 0} .skip:focus{left:0} /* ── Reveal on scroll: children cascade up in sequence (only hidden when JS is active) ── */ .js .reveal>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)} .js .reveal.in>*{opacity:1;transform:none} .js .reveal.in>*:nth-child(2){transition-delay:.07s} .js .reveal.in>*:nth-child(3){transition-delay:.14s} .js .reveal.in>*:nth-child(4){transition-delay:.2s} .js .reveal.in>*:nth-child(n+5){transition-delay:.26s} /* List items cascade in one-by-one when the list scrolls into view */ .js .reveal-li>li{opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)} .js .reveal-li.in>li{opacity:1;transform:none} .js .reveal-li.in>li:nth-child(1){transition-delay:.04s} .js .reveal-li.in>li:nth-child(2){transition-delay:.12s} .js .reveal-li.in>li:nth-child(3){transition-delay:.2s} .js .reveal-li.in>li:nth-child(4){transition-delay:.28s} .js .reveal-li.in>li:nth-child(5){transition-delay:.36s} .js .reveal-li.in>li:nth-child(6){transition-delay:.44s} .js .reveal-li.in>li:nth-child(7){transition-delay:.52s} .js .reveal-li.in>li:nth-child(8){transition-delay:.6s} .js .reveal-li.in>li:nth-child(n+9){transition-delay:.68s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal>*,.js .reveal-li>li{opacity:1!important;transform:none!important;transition:none!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ── Wide inner container (the §1 fix) ── */ .inner{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)} @media(min-width:1600px){.inner{max-width:1400px}} @media(min-width:1920px){.inner{max-width:1480px}} /* ── SVG icon defaults ── */ svg.ico{width:24px;height:24px;display:block;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ─── STICKY (mobile CTA bar) ─── */ #sticky{ position:fixed;bottom:0;left:0;right:0;z-index:900; background:#2897e9; padding:13px 32px calc(13px + env(safe-area-inset-bottom)); display:flex;align-items:center;justify-content:center;gap:22px; box-shadow:0 -6px 26px rgba(0,0,0,.22); transform:translateY(110%);opacity:0;transition:transform .35s ease,opacity .35s ease; border-top:2px solid var(--blue); } #sticky.on{transform:translateY(0);opacity:1} #sticky p{font-weight:500;color:#fff;font-size:.95rem;letter-spacing:.01em} #sticky a{ background:var(--navy);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; padding:12px 24px;border-radius:var(--r);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center; transition:background var(--t),transform var(--t); } #sticky a:hover{background:var(--navy-d)} #sticky a:active{transform:scale(.96)} /* ─── NAV (top bar only — scoped so it never styles the footer's