/* EuroThetic academy pages — free-flowing editorial components (blueprint mock). Styles the .et-* markup placed in page content; works inside the theme's .prose wrapper. No boxes: whitespace, thin dividers, light headings. */ /* Mobile horizontal-scroll fix. The theme sets overflow-x:hidden on only; iOS Safari + many Android browsers ignore that unless also clips, so off-canvas elements (the slide-in mobile menu) and full-bleed media (hero image, wrinkle strip) let the page scroll sideways. overflow-x:clip clips horizontally WITHOUT creating a scroll container, so the homepage's sticky/GSAP hero is unaffected; overflow-x:hidden is the fallback for older browsers. */ html{overflow-x:hidden;overflow-x:clip} /* The theme puts overflow-x:hidden on ; per CSS that forces body's overflow-y to compute to `auto`, making a scroll container — which breaks the homepage's position:sticky hero pin (it scrolls away, leaving a blank second screen). overflow-x:clip clips horizontally WITHOUT becoming a scroll container, so the pin holds. !important to beat the Tailwind class. */ body{overflow-x:clip !important} html,body{max-width:100%} /* The 200vh scroll-hero (portrait pan + rotating circle) is the homepage signature. On every OTHER page it just pushes content two screens down — a big empty gap. Collapse the intro to a single screen on inner pages; the homepage keeps the full experience (body.home only). The hero's own noscript/reduced-motion fallback is already min-h-screen, so one screen is a supported, clean size. */ body:not(.home) .min-h-\[200vh\]{min-height:100vh} /* long words / URLs must wrap rather than force the column wider than the screen */ .et-page,.et-home{overflow-wrap:break-word;word-break:break-word} .et-page img,.et-home img,.et-page svg,.et-page video,.et-page table{max-width:100%} /* Editorial column + base typography for every academy page body. */ .et-page{max-width:820px;margin:0 auto;color:#1F2528;font-family:"Inter",ui-sans-serif,system-ui,sans-serif} /* Clear hierarchy: H1/H2 charcoal (size+weight steps), H3 blue-grey subheading, body graphite */ .et-page > h1{font-weight:300;letter-spacing:-.01em;color:#1F2528;line-height:1.14} .et-page > h2{font-size:1.75rem;font-weight:400;color:#1F2528;line-height:1.2;margin:2em 0 .5em} .et-page > h3{font-size:1.05rem;font-weight:500;color:#6F8F95;line-height:1.3;margin:1.7em 0 .4em;letter-spacing:.01em} .et-page > p:not([class]){font-size:1rem;line-height:1.78;color:#3a4347;margin:0 0 1.1em} .et-page ul{margin:0 0 1.2em;padding-left:1.1em;list-style:none} .et-page ul li{position:relative;padding-left:1.1em;margin:.5em 0;line-height:1.65;color:#3a4347;font-size:.97rem} .et-page ul li::before{content:"";position:absolute;left:0;top:.7em;width:.4em;height:1px;background:#88A7AC} .et-page blockquote{font-style:italic;font-weight:300;font-size:1.3rem;line-height:1.55;color:#1F2528;border-left:2px solid #88A7AC;padding-left:1.1rem;margin:1.8em 0} .et-page a{color:#6F8F95;text-decoration:none;border-bottom:1px solid #C9D5D4} .et-page a:hover{border-color:#6F8F95} .et-page strong{font-weight:500;color:#1F2528} /* Contact (CF7) form: fill the editorial column and left-align with the heading/ text, instead of floating narrow (576px) and centered which looked offset. */ .et-page .wpcf7-form{max-width:none !important;width:100%;margin-left:0 !important;margin-right:0 !important} .et-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#88A7AC;font-weight:500;margin:0 0 .6em} .et-page .et-h1{font-size:2.6rem;line-height:1.12;font-weight:300;letter-spacing:-.01em;margin:.1em 0 .4em;color:#1F2528} .et-lead{font-size:1.12rem;line-height:1.75;color:#566366;font-weight:300;max-width:42rem;margin:1em 0} .et-think{font-style:italic;font-weight:300;font-size:1.4rem;color:#1F2528;margin:1.1em 0 .5em} .et-seq{font-size:.92rem;color:#1F2528;margin:.2em 0 0} .et-seq b{font-weight:500}.et-seq span{color:#88A7AC;margin:0 .35em} .et-rule{border:0;border-top:1px solid #D9DEDD;margin:2.4em 0} .et-steps{margin:1.6em 0} .et-step{display:flex;gap:1.25rem;padding:1.4em 0;border-top:1px solid #E4E2DB} .et-step:first-child{border-top:0} .et-step .et-num{flex:0 0 auto;font-size:.85rem;font-weight:500;color:#88A7AC;padding-top:.25em;min-width:1.6rem} .et-step .et-name{font-size:1.18rem;font-weight:400;color:#1F2528;margin:0;display:flex;align-items:center;gap:.6rem} .et-step .et-desc{font-size:.92rem;line-height:1.6;color:#566366;margin:.45em 0 0} .et-step .et-msg{font-size:.92rem;color:#1F2528;margin:.45em 0 0} .et-step--key{border-left:2px solid #6F8F95;padding-left:1.1rem;margin-left:-1.1rem} .et-step--key .et-name{color:#1F2528} .et-tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#6F8F95;border:1px solid #88A7AC;padding:.18em .5em;font-weight:500;white-space:nowrap} .et-dims{background:#E1E6C6;margin:2.4em 0;padding:1.8em 1.6em} .et-dims .et-eyebrow{color:#5e6b3f} .et-dim-grid{display:flex;gap:1rem;margin-top:1.1em;flex-wrap:wrap} .et-dim{flex:1;min-width:13rem;background:#F8F6F1;padding:1.1em 1.1em} .et-dim .et-d{font-size:1.4rem;font-weight:300;color:#6F8F95} .et-dim .et-dt{font-size:.95rem;font-weight:500;margin:.2em 0 .35em;color:#1F2528} .et-dim .et-dx{font-size:.82rem;line-height:1.55;color:#566366} .et-quote{font-style:italic;font-weight:300;font-size:1.32rem;line-height:1.55;color:#1F2528;max-width:40rem;margin:2.2em 0} /* Pathway rows (image + caption + link) and captioned media */ .et-prow{display:flex;gap:1.6rem;align-items:center;padding:1.5em 0;border-top:1px solid #E4E2DB} .et-prow:first-of-type{border-top:1px solid #D9DEDD;margin-top:1.4em} .et-prow img{width:180px;height:120px;object-fit:cover;object-position:center;flex:0 0 auto} .et-prow .pn{font-size:1.15rem;font-weight:400;color:#1F2528;line-height:1.2} .et-prow .pn a{color:#1F2528;border-bottom:0} .et-prow .pc{font-size:.9rem;color:#566366;line-height:1.55;margin:.4em 0 .55em} .et-prow .pgo{font-size:.85rem;color:#6F8F95;font-weight:500;border-bottom:1px solid #88A7AC;padding-bottom:2px} .et-figcap{font-size:.8rem;color:#566366;line-height:1.5;margin:.5em 0 0;font-style:italic} @media(max-width:640px){.et-prow{flex-direction:column;align-items:flex-start;gap:.8rem}.et-prow img{width:100%;height:190px}} /* Faculty bio rows: portrait + name/bio, stacks on mobile */ .et-bio{display:flex;gap:1.8rem;align-items:flex-start;margin:1.8em 0;padding-top:1.6em;border-top:1px solid #E4E2DB} .et-bio:first-of-type{border-top:1px solid #D9DEDD;margin-top:1.4em} .et-bio-img{width:240px;height:auto;object-fit:cover;flex:0 0 auto} .et-bio-text{flex:1} .et-bio-text h3{margin-top:0} @media(max-width:640px){.et-bio{flex-direction:column;gap:.8rem}.et-bio-img{width:100%;max-width:360px}} .et-cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin:2.4em 0 1em} .et-cta-row a{font-size:.9rem;padding:.85em 1.5em;text-decoration:none;display:inline-block} .et-btn-dark{background:#1F2528;color:#F8F6F1} .et-btn-ghost{border:1px solid #6F8F95;color:#1F2528} /* Homepage gateway sections */ .et-sec-h{font-size:2.4rem;font-weight:300;letter-spacing:-.01em;color:#1F2528;margin:.1em 0 .5em;line-height:1.15} .et-link{display:inline-block;margin-top:1em;font-size:.92rem;color:#6F8F95;font-weight:500;border-bottom:1px solid #88A7AC;padding-bottom:2px} .et-routes{display:flex;margin:1.6em 0 .5em;border-top:1px solid #D9DEDD} .et-route{flex:1;padding:1.5em 1.4em 0;border-right:1px solid #D9DEDD} .et-route:last-child{border-right:0} .et-route .rl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#88A7AC;font-weight:500} .et-route .rh{font-size:1.12rem;font-weight:400;line-height:1.3;margin:.6em 0 .5em;color:#6F8F95} .et-route .rp{font-size:.88rem;line-height:1.6;color:#566366} .et-feat{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1em 0;border-top:1px solid #E4E2DB} .et-feat .fc{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#88A7AC;font-weight:500} .et-feat .ft{font-size:1.15rem;font-weight:300;color:#1F2528;margin:.25em 0} .et-feat .fm{font-size:.82rem;color:#566366} .et-feat .fa{font-size:.82rem;color:#6F8F95;white-space:nowrap;border-bottom:1px solid #88A7AC;padding-bottom:2px} /* Inner pages are content-first (no full-screen hero). The fixed header gets a solid charcoal bar so the white nav stays readable over light content, plus a spacer so content clears it. The homepage (body.home) keeps its transparent nav floating over the portrait+circle hero. */ body:not(.home) header{background:#1F2528} body:not(.home) .et-nav-logo,body:not(.home) .et-nav-links a,body:not(.home) .et-nav-cta{color:#fff} .et-top-spacer{height:4.75rem} @media(min-width:1024px){.et-top-spacer{height:5.25rem}} /* Hero header + hero content — explicit CSS (the theme's Tailwind build is precompiled, so new utility classes have no styles; we define our own). */ .et-nav{display:none} @media(min-width:1024px){ .et-nav{display:flex;align-items:center;justify-content:space-between;max-width:80rem;margin:0 auto;padding:1.4rem 1.7rem;color:#fff;font-weight:300} } .et-nav-logo{font-size:1rem;letter-spacing:.2em;color:#fff;text-decoration:none;display:flex;align-items:center} .et-nav-logo span{color:#88A8AC} /* Brand logo image — header (every page) + footer. White wordmark on dark bg. */ .et-logo-img{height:24px;width:auto;display:block} .et-logo-img-mobile{height:26px;width:auto;display:block} /* Mobile header wordmark is a home link — make it inherit colour, no underline */ .et-mobile-logo{color:inherit;text-decoration:none;display:inline-block} .et-footer-logo{display:inline-block;margin:0 0 2.2rem} .et-footer-logo img{height:26px;width:auto;display:block;opacity:.92} .et-nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0} .et-nav-links li{margin:0} .et-nav-links a{color:#fff;text-decoration:none;font-size:.86rem;transition:color .2s} .et-nav-links a:hover{color:#88A8AC} .et-nav-cta{color:#fff;text-decoration:none;font-size:.86rem;border:1px solid rgba(255,255,255,.5);padding:.55em 1.15em;transition:background .2s} .et-nav-cta:hover{background:rgba(255,255,255,.12)} /* Hero scrim REMOVED 2026-06-14 per user request. To restore, delete the `display:none` line below and uncomment this original rule: .et-hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 65% 55% at 50% 46%, rgba(20,28,32,.62), rgba(20,28,32,.12) 72%, rgba(20,28,32,.42))} (Full pre-removal stylesheet also backed up at theme-edits/academy.css.bak-with-scrim) */ .et-hero-scrim{display:none} .et-hero-ring{width:18.75rem} /* Cap the ring to viewport height so on short/zoomed screens it can't grow into the nav (full 26rem on normal-height screens, shrinks only when space is tight). */ @media(min-width:1024px){.et-hero-ring{width:clamp(18rem,44vh,26rem);max-width:26rem}} /* Mobile/tablet: bigger ring so the rotating step-text clears the centred wordmark, and lift it up a little so the hero feels less congested. */ @media(max-width:1023px){.et-hero-ring{width:min(21rem,86vw);max-width:86vw;margin-bottom:2.4rem}} .et-hero-tagwrap{color:#fff;text-align:center;padding:1.5rem 0 6rem} .et-hero-tag{font-size:1.7rem;font-weight:300;font-style:italic;margin:0;text-shadow:0 1px 14px rgba(20,28,32,.6)} .et-hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem} .et-hero-btn-solid{background:#F8F6F1;color:#1F2528;font-size:.86rem;padding:.9em 1.7em;text-decoration:none;transition:opacity .2s} .et-hero-btn-solid:hover{opacity:.9} .et-hero-btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff;font-size:.86rem;padding:.9em 1.7em;text-decoration:none;transition:background .2s} .et-hero-btn-ghost:hover{background:rgba(255,255,255,.12)} .et-hero-cue{font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,.6);margin-top:2.2rem} .et-hero-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#fff;text-align:center} .et-hero-wm{font-size:2.1rem;font-weight:300;line-height:1;letter-spacing:.02em;text-shadow:0 1px 18px rgba(20,28,32,.75)} .et-hero-wm span{color:#A8C3C6} .et-hero-sub{font-size:.62rem;letter-spacing:.32em;margin-top:.6rem;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(20,28,32,.7)} @media(min-width:768px){.et-hero-wm{font-size:2.9rem}.et-hero-tag{font-size:2rem}.et-hero-sub{font-size:.7rem}} /* Site-wide pre-footer CTA band + editorial footer (matching the mock) */ .et-precta{background:#1F2528;color:#F8F6F1;text-align:center;padding:5rem 1.5rem} .et-precta .wm{font-size:1.3rem;letter-spacing:.18em;font-weight:300;color:#F8F6F1;margin-bottom:1.4rem} .et-precta .wm b{color:#88A7AC;font-weight:300} .et-precta h2{font-size:2.2rem;font-weight:200;color:#F8F6F1;margin:0 0 .6rem;letter-spacing:-.01em} .et-precta p{font-size:.95rem;color:#aab6b6;font-weight:300;max-width:36rem;margin:0 auto;line-height:1.6} .et-precta a.cta{display:inline-block;margin-top:1.9rem;background:#F8F6F1;color:#1F2528;font-size:.9rem;padding:.95em 1.9em;text-decoration:none} .et-footer{background:#171C1F;color:#9fadad;padding:3.6rem 1.5rem;font-family:"Inter",ui-sans-serif,system-ui,sans-serif} .et-footer-cols{display:flex;justify-content:space-between;gap:2rem;max-width:1100px;margin:0 auto;flex-wrap:wrap} .et-footer .col h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#88A7AC;margin:0 0 1rem;font-weight:500} .et-footer .col a{display:block;font-size:.82rem;margin:0 0 .55rem;color:#9fadad;text-decoration:none;font-weight:300} .et-footer .col a:hover{color:#F8F6F1} @media(max-width:640px){.et-footer-cols{gap:1.4rem}.et-footer .col{flex:1 1 40%}} /* Homepage (wider editorial container + section components matching the mock) */ .et-home{max-width:1100px;margin:0 auto;color:#1F2528;font-family:"Inter",ui-sans-serif,system-ui,sans-serif} .et-home .et-lead{max-width:46rem} .et-home p:not([class]){font-size:1rem;line-height:1.78;color:#3a4347;max-width:46rem;margin:0 0 1.1em} .et-hsteps{display:flex;margin:2em 0 0;border-top:1px solid #D9DEDD} .et-hstep{flex:1;padding:1.2em .9em 0;border-right:1px solid #D9DEDD} .et-hstep:last-child{border-right:0} .et-hstep .n{font-size:.72rem;color:#88A7AC;font-weight:500} .et-hstep .nm{font-size:1.02rem;font-weight:400;margin:.5em 0 .3em;color:#1F2528} .et-hstep.key .nm{color:#6F8F95} .et-hstep .ln{font-size:.76rem;line-height:1.45;color:#566366} .et-wrinkle{display:block;width:100vw;position:relative;left:50%;transform:translateX(-50%);height:130px;object-fit:cover;object-position:center;opacity:.9;margin:3.2em 0} /* Site-wide brand strip: full-width wrinkle wave (blended into the page) with the eurothetic mark */ .et-strip{position:relative;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#F8F6F1;margin:0} .et-strip-img{width:100%;height:160px;object-fit:cover;object-position:center;opacity:.85;display:block} .et-strip-mark{position:absolute;font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:1.7rem;letter-spacing:.22em;font-weight:300;color:#1F2528;pointer-events:none} .et-strip-mark span{color:#6F8F95} .et-faculty{display:flex;gap:2.6rem;align-items:center;margin:1.6em 0} .et-faculty img{width:46%;max-width:520px;height:340px;object-fit:cover;object-position:right center;flex:0 0 auto} .et-faculty .ft{flex:1} .et-faculty .nm{font-size:1.4rem;font-weight:300;color:#1F2528;margin:.3em 0 .5em} .et-mgrid{display:flex;gap:1rem;margin:1.8em 0 1em} .et-mgrid .tile{flex:1;display:flex;flex-direction:column} .et-mgrid .tile img{width:100%;height:230px;object-fit:cover} .et-mgrid .tile .cap{font-size:.8rem;color:#566366;line-height:1.5;margin-top:.65em} .et-cap{font-size:.82rem;color:#566366;margin-top:1em} @media(max-width:640px){.et-mgrid{flex-direction:column}.et-mgrid .tile img{height:200px}} @media(max-width:640px){ .et-page .et-h1{font-size:2rem} .et-dim-grid{flex-direction:column} .et-step{gap:.8rem} .et-routes{flex-direction:column} .et-route{border-right:0;border-bottom:1px solid #D9DEDD;padding-bottom:1.2em} .et-feat{flex-direction:column;align-items:flex-start;gap:.3rem} .et-hsteps{flex-wrap:wrap} .et-hstep{flex:1 1 33%;border-bottom:1px solid #D9DEDD;padding-bottom:1em} .et-faculty{flex-direction:column}.et-faculty img{width:100%} .et-mgrid{flex-direction:column}.et-mgrid .tile{height:180px} }