/* LOGO SIZE, 29 Jul 2026. These two content:url() swaps used to point at IWS_logo_white_trimmed.png (80 KB, 2858x1147) and IWS_logo_color_trimmed.png (78 KB, 2857x1147), rendered at 120x48. content:url() OVERRIDES the img src, so the browser downloaded the small file from src AND the huge file from here, and displayed the huge one. 158 KB for a 120px mark. Now pointed at the already-trimmed 5.5 KB and 6.9 KB versions the src attributes were already using. Do not re-point these at the originals: they are 24x the displayed size. */ /* ========================================================================== IWS site-wide design language. Loaded on EVERY page. Source of truth: IWS_DESIGN.md v1.0. Serif display type (Cormorant Garamond) and orange #FF9600 are RETIRED. READ THIS BEFORE EDITING THE HEADER RULES BELOW. WPCode snippet 37040 ("IWS Header", 142k chars) fights everything here. The three rules that matter, measured from the served page 25 Jul: .site-header .thim-ekits-menu__nav-link::after, .site-header .js_hover::after { content:none!important; display:none!important; } -> specificity (0,2,2) body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > .thim-ekits-menu__nav-link { color:#7BA7FF!important; } -> (0,6,2) .site-header .navbar-main-menu > li:hover > .thim-ekits-menu__nav-link { color:#0067E0!important; } -> (0,4,2) The first one is why two earlier attempts at a gradient underline rendered nothing: the background was being set on a pseudo-element that had been deleted. Beating a colour is not enough, the ::after has to be resurrected with content AND display, at higher specificity. The theme's JS also rewrites each label into P... so a colour set only on the is overpainted by the spans. Every colour rule here therefore targets the anchor, .js_hover, and .js_hover span. ========================================================================== */ :root{ /* ---- TYPE TOKENS, added 28 Jul 2026 ------------------------------------ Before this, font-family was hardcoded in 136 declarations across five files in FIFTEEN different spellings of two typefaces. Conflicts were settled with !important, and on 28 Jul that produced a real bug: the nav label rendered in Sora, then the theme's letter-split wrapper rendered the same label in Inter, so the nav changed typeface mid-load and shifted. One definition per face makes that class of bug impossible. Values are the dominant spellings already in use (72 and 27 occurrences), so tokenising resolves to exactly what shipped before. NOTE: the @font-face rules in iws-fonts.css must NEVER use these tokens - they declare the family names themselves, and a var() there breaks font loading outright. */ /* 'Sora Fallback' (iws-fonts.css, Task F fix 2, 30 Jul 2026) is a size-adjusted local stand-in, not a download: it occupies the same width Sora will once the woff2 lands, so the font-display:swap moment does not reflow the nav. Inter needed no such fix (measured 99.45%, see iws-fonts.css) so --iws-font-body is untouched. */ --iws-font-display:'Sora','Sora Fallback',ui-sans-serif,system-ui,sans-serif; --iws-font-body:'Inter',ui-sans-serif,system-ui,sans-serif; --iws-royal:#0A1776; --iws-sky:#0067E0; --iws-ink:#1C1917; --iws-amber:#D97706; --iws-navy:#070D2E; --iws-peri:#CFE0FF; --iws-ease:cubic-bezier(.22,.61,.36,1); /* The CTA gradient, quoted once and reused so the nav underline and the announcement bar can never drift from the button. */ --iws-grad:linear-gradient(90deg,#0A1776 0%,#0067E0 100%); /* The same ramp lifted for dark backgrounds. #0A1776 on a dark photograph is effectively invisible (about 1.4:1), so the transparent header and the hero use this instead. Same blue family, still reads as one gradient. */ --iws-grad-light:linear-gradient(90deg,#7BA7FF 0%,#CFE0FF 100%); --iws-bar-h:42px; } /* ---- Typography: Sora for structure, Inter for reading ------------------ */ /* body-prefixed to outrank the legacy footer snippet, which injects the retired serif with !important AFTER this sheet loads. Same importance, higher specificity, so this wins regardless of order. */ body h1,body h2,body h3,body h4,body h5,body h6, body .elementor-widget-heading .elementor-heading-title{ font-family:var(--iws-font-display)!important; } /* Retired gold eyebrow labels: Sky per IWS_DESIGN.md (gold is not an IWS colour). */ body .iws-prog .ey{color:var(--iws-sky)!important;} body,p,li,figcaption,blockquote,input,textarea,select,label{ font-family:var(--iws-font-body); } /* ========================================================================== ANNOUNCEMENT BAR Fixed above the header, which is itself position:fixed at top:0 z-index:9999. The bar takes 10000 and pushes the header down by its own height; body gets the same padding so static content is not hidden underneath. The hero subtracts the bar from its 100svh in iws-home.css so the accreditation band still sits below the fold. ========================================================================== */ .iwsbar{ position:fixed;top:0;left:0;right:0;z-index:10000; display:flex;align-items:center;justify-content:center; height:var(--iws-bar-h); background:var(--iws-grad); color:#fff;text-decoration:none; font-family:var(--iws-font-display); overflow:hidden; } /* The bar is a
since 27 Jul (two destinations, see functions.php), so the link states belong on its two anchors, not on the bar itself. */ .iwsbar a{color:#fff;text-decoration:none;} .iwsbar a:hover,.iwsbar a:focus-visible{color:#fff;text-decoration:none;} .iwsbar a:focus-visible{outline:2px solid #fff;outline-offset:-4px;} .iwsbar__inner{ display:flex;align-items:center;justify-content:center;gap:18px; width:100%;max-width:1180px;padding:0 24px; } /* The stage is a fixed-height window; messages stack inside it and only one is opaque at a time, so the bar never changes height as the text swaps. flex:1 1 auto is load-bearing, not cosmetic. Every child is absolutely positioned, so the stage has no content to size itself from: at 0 1 auto it computed to zero width, the messages' max-width:100% resolved to 0, and overflow:hidden rendered them as nothing at all. It has to be told to grow. */ .iwsbar__stage{ position:relative;display:block;flex:1 1 auto; height:var(--iws-bar-h);min-width:0; } .iwsbar__msg{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%) translateY(8px); width:max-content;max-width:100%; opacity:0;visibility:hidden; font-size:13px;font-weight:600;letter-spacing:.005em;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:opacity .45s var(--iws-ease),transform .45s var(--iws-ease); } .iwsbar__msg.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%) translateY(0);} .iwsbar__cta{ flex:0 0 auto;display:inline-flex;align-items:center;gap:7px; font-size:13px;font-weight:700; padding-left:18px;border-left:1px solid rgba(255,255,255,.28); } /* The divider in "IWS Families | Log In". Dimmed so it reads as a separator rather than a third word competing with the two labels either side. */ .iwsbar__sep{opacity:.45;font-weight:400;} .iwsbar__arw{transition:transform .22s var(--iws-ease);} .iwsbar__cta:hover .iwsbar__arw{transform:translateX(4px);} /* Everything below the fixed bar moves down by exactly its height. */ body{padding-top:var(--iws-bar-h);} html body #masthead.site-header{top:var(--iws-bar-h)!important;} @media (max-width:900px){ :root{--iws-bar-h:40px;} /* 27 Jul: the CTA now STAYS on mobile. It used to be hidden because it was a second route to /contact-us/, which the whole bar already linked to, so it cost width and added nothing. It is now the families login, a destination with no other entry point in the header, and a parent hunting for it on a phone is exactly who needs it. Trimmed rather than dropped: the label loses its arrow and tightens up so the message still has room beside it. */ .iwsbar__cta{padding-left:12px;gap:5px;font-size:12px;} .iwsbar__cta .iwsbar__arw{display:none;} .iwsbar__inner{padding:0 12px;gap:12px;} .iwsbar__msg{font-size:12px;} } @media (max-width:420px){ /* Below this the two cannot coexist without both truncating. The login wins here, because the messages are ambient and it is not. */ .iwsbar__stage{display:none;} .iwsbar__inner{justify-content:center;} .iwsbar__cta{padding-left:0;border-left:0;} } @media (prefers-reduced-motion:reduce){ .iwsbar__msg{transition:none;} } /* ========================================================================== NAVIGATION Gradient underline, and a label colour that never changes on hover. ========================================================================== */ /* --- 1. Resurrect the pseudo-element 37040 deleted ----------------------- */ /* (0,4,5) against its (0,2,2). content and display must BOTH be restored; setting only the background is exactly the bug this replaces. Top level only: the > li > child combinator keeps it off dropdown items. */ html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after{ content:""!important; display:block!important; position:absolute; left:0;right:0; /* top, NOT bottom. Both were tried and measured from rendered pixels: bottom:26px -> 28px above the label, read as a strikethrough bottom:-6px -> 89-91 on the four items that carry a dropdown chevron, but 102-104 on "For Schools", which has none, despite identical CSS and identical getComputedStyle values top:100% -> correct on all five Offsetting from the containing block's TOP edge resolves consistently; offsetting from its bottom did not. Do not "tidy" this back to bottom. Note also that .js_hover, the span wrapping the label characters, carries overflow:hidden for the theme's own animation, so the rule cannot live on that span: it gets clipped away entirely. The anchor is overflow:visible. */ top:calc(100% + 2px); height:3px;border-radius:3px; background:var(--iws-grad-light)!important; transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--iws-ease); pointer-events:none; opacity:1; } html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link{ position:relative!important; } /* Reveal on hover, on keyboard focus, and on the current page. */ html body .site-header .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after, html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link:focus-visible::after, html body .site-header .navbar-main-menu > li.current-menu-item > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after, html body .site-header .navbar-main-menu > li.current-menu-parent > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after, html body .site-header .navbar-main-menu > li.current-menu-ancestor > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after{ transform:scaleX(1); } /* On the white header the exact CTA gradient is used, because Royal has the contrast there that it lacks over a photograph. */ html body .site-header.iws-solid .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after{ background:var(--iws-grad)!important; } /* --- 2. Label colour never changes on hover ----------------------------- */ /* Transparent header over the hero photograph: white, and it stays white. (0,6,4) beats 37040's (0,6,2) hover rule. .js_hover and its per-character spans are covered because the theme's JS wraps the label after load. */ html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li.current-menu-item > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li.current-menu-parent > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li.current-menu-ancestor > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span{ color:#fff!important; } /* The dropdown chevron follows the label rather than turning blue. */ html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li > .thim-ekits-menu__icon.thim-ekits-menu__icon, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li > .thim-ekits-menu__icon.thim-ekits-menu__icon:before, html body.iws-transparent-hero .site-header:not(.iws-solid) .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon:before{ color:#fff!important;border-color:#fff!important; } /* Solid white header: Royal, and it stays Royal. */ html body .site-header.iws-solid .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body .site-header.iws-solid .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body .site-header.iws-solid .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body .site-header.iws-solid .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body .site-header.iws-solid .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span, html body .site-header.iws-solid .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span{ color:var(--iws-royal)!important; } html body .site-header.iws-solid .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon, html body .site-header.iws-solid .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon:before, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon, html body:not(.iws-transparent-hero) .site-header .navbar-main-menu > li:hover > .thim-ekits-menu__icon.thim-ekits-menu__icon:before{ color:var(--iws-royal)!important;border-color:var(--iws-royal)!important; } /* --- 2b. THE MOBILE DRAWER IS WHITE, SO THE LABELS CANNOT BE ------------- */ /* Regression caught 25 Jul after snippet 37040 was retired. The rules above lock the label to white while the header is transparent over the hero. On a phone the menu is not a transparent bar, it is a white fixed drawer (.width-navigation, background #fff, z-index 1002) and the header still is not .iws-solid at scroll top, so every item rendered white on white: present, correctly sized at 280x45, and completely invisible. 37040 used to carry its own mobile-menu colours, which is why this only appeared once it was off. #masthead#masthead is needed because a media query adds no specificity and the white rules above are (0,6,4) with !important. */ @media (max-width:900px){ html body #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link, html body #masthead#masthead .navbar-main-menu > li:hover > a.thim-ekits-menu__nav-link, html body #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link .js_hover, html body #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link .js_hover span, html body #masthead#masthead .navbar-main-menu .thim-ekits-menu__dropdown a{ color:var(--iws-royal)!important; } html body #masthead#masthead .navbar-main-menu > li > .thim-ekits-menu__icon, html body #masthead#masthead .navbar-main-menu > li > .thim-ekits-menu__icon:before{ color:var(--iws-royal)!important;border-color:var(--iws-royal)!important; } /* The sweep-in underline belongs to the desktop bar; in a stacked drawer it reads as a stray rule under every row. */ html body #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link::after{ display:none!important; } /* Comfortable rows and a clear divider, since there is no hover affordance. */ html body #masthead#masthead .navbar-main-menu > li > a.thim-ekits-menu__nav-link{ min-height:48px;display:flex!important;align-items:center; } html body #masthead#masthead .navbar-main-menu > li{ border-bottom:1px solid rgba(10,23,118,.10); } } /* --- 3. Slightly larger nav type ---------------------------------------- */ /* 16px -> 17px. Deliberately small: at 18px the five top-level items start to crowd the CTA between 1024 and 1180px. */ html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span{ font-size:17px!important; letter-spacing:.002em!important; } @media (max-width:1180px) and (min-width:901px){ html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link, html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover, html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link .js_hover span{ font-size:15.5px!important; } } @media (prefers-reduced-motion:reduce){ html body .site-header .navbar-main-menu > li > a.thim-ekits-menu__nav-link.thim-ekits-menu__nav-link::after{transition:none;} } /* ---- Logo ----------------------------------------------------------------- Snippet 37040 forces artwork through content:url(...) !important and adds a 37px margin that pushes the logo off the container edge. Both are matched at higher specificity. Trimmed artwork has no baked padding, so the mark sits on the same left edge as the hero copy. */ html body .site-header .phys-logo.phys-logo img, html body .site-header .width-logo.width-logo img, html body .phys-logo.phys-logo img, html body .width-logo.width-logo img{ content:url('/wp-content/uploads/2026/07/iws-logo-white-trimmed.png')!important; filter:none!important; height:clamp(46px,4.4vw,60px)!important; width:auto!important;max-width:none!important; object-fit:contain; } /* Solid header state and any non-hero page take the colour mark. */ html body .site-header.iws-solid .phys-logo.phys-logo img, html body .site-header.iws-solid .width-logo.width-logo img, html body:not(.iws-transparent-hero) .site-header .phys-logo.phys-logo img, html body:not(.iws-transparent-hero) .site-header .width-logo.width-logo img{ content:url('/wp-content/uploads/2026/07/iws-logo-navy-trimmed.png')!important; } /* Align the mark to the container edge so header and hero share one column. The doubled ID is deliberate. 37040 carries #masthead .width-logo.sm-logo{margin-left:37px!important} -> (1,1,2) inside a min-width:1025px query, so an ID is required to beat it. But an ID here also outranks any plain-class rule in a MEDIA query, because media queries contribute nothing to specificity. That is what silently broke the phone header: the desktop rule kept winning below 900px. Every rule in this pair therefore uses #masthead#masthead, so desktop and phone sit at equal specificity and source order decides, which is what was intended. */ html body #masthead#masthead .width-logo.sm-logo, html body #masthead#masthead .width-logo.width-logo, html body .site-header .width-logo.width-logo, html body .site-header .phys-logo.phys-logo{ margin-left:0!important;padding-left:0!important; } /* THE alignment fix. The header's container is .navigation.container with max-width:none and 20px padding, while the hero is 1180px centred, so the two could never share a left edge. Both now use one geometry. */ html body #masthead#masthead .navigation.container, html body #masthead#masthead .container, html body .site-header .navigation.container, html body .site-header .container{ max-width:1180px!important; margin-left:auto!important;margin-right:auto!important; padding-left:24px!important;padding-right:24px!important; } /* and nothing between the container edge and the mark */ html body #masthead#masthead .width-logo.width-logo, html body #masthead#masthead .width-logo.sm-logo{ margin:0!important;padding:0!important;max-width:none!important; } /* ---- Phone header --------------------------------------------------------- The menu toggle is the leftmost element on a phone, which pushed the mark about 28px off the copy column. The real class is .mobile-menu-container, confirmed from the served markup on 25 Jul; it had previously been guessed. Absolutely positioning it frees the mark to sit on the container edge. */ @media (max-width:900px){ html body #masthead#masthead .navigation.container{ position:relative; padding-left:20px!important;padding-right:20px!important; } /* The toggle moves to the RIGHT on phones. It was the leftmost element, which forced the mark about 28px inboard and made it impossible for the logo and the hero headline to share a left edge. Logo left, menu right is also the pattern people expect on a phone. */ html body #masthead#masthead .mobile-menu-container{ position:absolute!important;right:20px!important;left:auto!important; top:50%!important;transform:translateY(-50%)!important; margin:0!important;z-index:3; width:30px;height:30px; display:flex!important;flex-direction:column;justify-content:center;gap:5px; } /* Now the mark can sit on the container edge, level with the hero copy. */ html body #masthead#masthead .width-logo.width-logo, html body #masthead#masthead .width-logo.sm-logo{ margin-left:0!important; } html body #masthead#masthead .phys-logo.phys-logo img, html body #masthead#masthead .width-logo.width-logo img{ height:clamp(40px,10.5vw,48px)!important; } } /* ========================================================================== MARKER HIGHLIGHT (.hl) -------------------------------------------------------------------------- Ported verbatim from the courses site (Courses Site WordPress/iws-courses-theme/assets/css/home.css) at Burak's request, 25 Jul 2026: "use the highlight system we have in the courses website". It REPLACES the gradient underline that used to sit under every section heading. That underline is the navigation's device and the navigation's alone; repeating it on headings made one signal mean two things. Spec: IWS_DESIGN.md section 4.3b. A solid Royal-to-Sky block with WHITE text, never a pale tint behind coloured text, because a tint reads as faint shading rather than a deliberate object. White on Royal measures about 15:1. The block sweeps in from the left when the heading is scrolled to. The sweep is decoration only: before it arrives the phrase is already Royal Blue on white and carries the emphasis on its own, which is what keeps this safe under prefers-reduced-motion and safe if the JavaScript never runs. ========================================================================== */ .hl{ color:#fff; background-image:linear-gradient(90deg,var(--iws-royal,#0A1776) 0%,var(--iws-sky,#0067E0) 100%); background-repeat:no-repeat; background-position:0 0; background-size:0% 100%; padding:.04em .26em .1em; border-radius:.2em; transition:background-size .8s cubic-bezier(.22,.61,.36,1),color .5s ease .12s; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .hl:not(.is-in){color:var(--iws-royal,#0A1776);} .hl.is-in{background-size:100% 100%;color:#fff;} /* A headline carrying a marker needs room: section 4.3b requires at least 1.2 line height, otherwise the block fouls the descenders on the line above. */ h1:has(.hl),h2:has(.hl),h3:has(.hl){line-height:1.3;} /* The block hangs left by its own side padding so the GLYPHS land on the text column, not the block's outer edge. Aligning the edge pushes the words inward and the marked line reads as indented against the line above (4.3b). Only for left-aligned headings; a centred block is centred on its own text already. */ .hl--own{display:block;width:fit-content;margin-left:-.26em;} /* On dark ground the block inverts: periwinkle ground, Royal Blue text. */ .on-dark .hl,.iws-dark .hl,.iwshero .hl{ background-image:linear-gradient(90deg,var(--iws-peri,#CFE0FF) 0%,#EAF1FF 100%); } .on-dark .hl:not(.is-in),.iws-dark .hl:not(.is-in),.iwshero .hl:not(.is-in){color:#fff;} .on-dark .hl.is-in,.iws-dark .hl.is-in,.iwshero .hl.is-in{color:var(--iws-royal,#0A1776);} /* ⚠️ A MARKED PHRASE MUST NEVER BREAK ACROSS TWO LINES (4.3b), AND BELOW ABOUT 640px every centred section heading wraps, so an inline marker does exactly that. 4.3b's own remedy is the one applied here: "Where a headline runs to more than one line, the marked phrase starts its own line." Centred, not hung left, because these headings are centred; a LEFT-aligned heading uses .hl--own above, which hangs by its own padding so the glyphs land on the text column. Added 1 Aug 2026. It replaces the wrong fix from 31 Jul, which was to shorten each marked phrase until it fitted. That stopped the wrapping and left two markers sitting in the MIDDLE of their heading, which Burak ruled out flatly: "never highlight just the middle of a sentence." Fix the line, not the mark. */ @media (max-width:640px){ h1 .hl, h2 .hl{display:block;width:fit-content;margin-inline:auto;} /* ...but `margin-inline:auto` CENTRES the block, which is right only where the heading itself is centred. The info pages (/term-dates/, /computer-requirements/, /welcome/) set their headings to text-align:start, so measured at 360px on 1 Aug 2026 every one of the five markers on /term-dates/ sat 57 to 103px INSIDE its own heading's text column, while the unmarked words all began at 39px. That is failure mode 3 in IWS_DESIGN.md 4.3b, "align the block's text, not the block's edge", reintroduced by the fix for the wrapping. A left-aligned heading hangs its block left by its own padding instead. The one centred band inside the component, .ip-end, opts back in below. */ .iws-ip h1 .hl, .iws-ip h2 .hl{margin-left:-.26em;margin-right:auto;} .iws-ip .ip-end h2 .hl{margin-left:auto;margin-right:auto;} } @media (prefers-reduced-motion:reduce){ .hl{transition:none;background-size:100% 100%;color:#fff;} .on-dark .hl,.iws-dark .hl,.iwshero .hl{color:var(--iws-royal,#0A1776);} } /* ========================================================================== VIDEO LIGHTBOX (.iwsvid) -------------------------------------------------------------------------- Every YouTube link on the site opens here rather than swapping a small iframe into the card it was clicked from (Burak, 25 Jul 2026). A 240px-wide player inside a carousel card is not a way to watch a student tell you why they chose the school. Sizing note. aspect-ratio plus max-height does NOT preserve the ratio: with a specified width the height is derived, then clamped, and the width is never recomputed, so the frame ends up letterboxed inside itself. The width is therefore clamped by all three constraints at once with min(), including the width that a full-height frame would need. That keeps the ratio exact at every viewport with no JavaScript measuring anything. ========================================================================== */ .iwsvid{ position:fixed;inset:0;z-index:100000; display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,56px); opacity:0;visibility:hidden; transition:opacity .26s ease,visibility 0s linear .26s; } .iwsvid.is-open{opacity:1;visibility:visible;transition:opacity .26s ease,visibility 0s;} .iwsvid__scrim{ position:absolute;inset:0; background:rgba(4,8,28,.88); backdrop-filter:blur(10px) saturate(.85); -webkit-backdrop-filter:blur(10px) saturate(.85); } .iwsvid__frame{ position:relative;z-index:1; aspect-ratio:16/9; width:min(1140px,100%,calc(82vh * 16 / 9)); border-radius:14px;overflow:hidden; background:#000; box-shadow:0 40px 120px rgba(0,0,0,.6); transform:scale(.955) translateY(12px);opacity:0; transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease; } .iwsvid.is-open .iwsvid__frame{transform:none;opacity:1;} /* Shorts are 9:16. Sized off the viewport height first, because on a phone the height is what runs out. */ .iwsvid--portrait .iwsvid__frame{ aspect-ratio:9/16; width:min(420px,100%,calc(84vh * 9 / 16)); } .iwsvid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;} .iwsvid__close{ position:absolute;z-index:2; top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px); width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:#fff;cursor:pointer; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .2s ease,border-color .2s ease,transform .2s ease; } .iwsvid__close:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);transform:scale(1.06);} .iwsvid__close:focus-visible{outline:2px solid var(--iws-peri,#CFE0FF);outline-offset:3px;} .iwsvid__close svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;} .iwsvid__cap{ position:absolute;left:0;right:0;bottom:calc(-1 * clamp(30px,4vw,44px)); text-align:center;color:#fff; font-family:var(--iws-font-body); font-size:14px;line-height:1.4;opacity:.82; } @media (max-width:640px){.iwsvid__cap{display:none;}} /* Body lock. The padding compensates for the scrollbar the lock removes, otherwise the whole page jumps left the moment the video opens. */ html.iwsvid-lock,html.iwsvid-lock body{overflow:hidden;} @media (prefers-reduced-motion:reduce){ .iwsvid,.iwsvid__frame{transition:none;} .iwsvid__frame{transform:none;} } /* ========================================================================== MARKER HIGHLIGHT vs ELEMENTOR LAZY-LOAD — do not simplify these selectors -------------------------------------------------------------------------- Elementor injects this, at (0,5,0) and !important: .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important } The trailing " *" strips background-image off every descendant of the fourth top-level container onward until its own JavaScript marks it .e-lazyloaded. The marker highlight IS a background-image (a Royal-to-Sky gradient whose background-size animates from 0% to 100%), so measured on staging 25 Jul 2026 the block on the Three Pathways heading computed to background-image: none and the phrase rendered as plain Royal text with no block at all. This is a SITE-WIDE hazard, not a homepage one: any marked heading in the fourth section or later of any page loses its block the same way, so the override lives here rather than in iws-home.css. The selectors carry six repeated classes plus html and body to reach (0,6,2), which beats (0,5,0) honestly rather than by escalating importance. The optimisation exists to defer heavy photographs; it saves nothing on a gradient and only costs correctness. ========================================================================== */ /* :not(.hl--amber) added 26 Jul. This selector is .hl repeated six times to brute-force specificity past the legacy header snippet, and with !important it beat the amber variant at (0,2,0) no matter what. Excluding the variant here is cleaner than escalating: one hack, not two. */ html body .hl.hl.hl.hl.hl.hl:not(.hl--amber){ background-image:linear-gradient(90deg,var(--iws-royal,#0A1776) 0%,var(--iws-sky,#0067E0) 100%)!important; } html body .on-dark .hl.hl.hl.hl.hl.hl, html body .iws-dark .hl.hl.hl.hl.hl.hl, html body .iwshero .hl.hl.hl.hl.hl.hl{ background-image:linear-gradient(90deg,var(--iws-peri,#CFE0FF) 0%,#EAF1FF 100%)!important; } /* ========================================================================== THE EMPHASIS WORD (.em) IWS_DESIGN.md 4.3. The quieter of the two emphasis devices: colour only, no block. Sky Blue on light grounds, Periwinkle on dark. This is what most headings get. The marker block (.hl above) is reserved for the handful of headings carrying a real promise, because 4.3b caps it at one per view and warns that competing highlights cancel each other out. Putting the same loud device on fifteen headings is the mistake the gradient rule was removed for; repeating it in a different colour would not be an improvement. ========================================================================== */ .em{color:var(--iws-sky,#0067E0);} .on-dark .em,.iws-dark .em,.iwshero .em{color:var(--iws-peri,#CFE0FF);} /* ========================================================================== BENTO (.iwsb) Vanilla MagicBento: cursor spotlight, border glow, tilt, magnetism, ripple. Amber #D97706 at low alpha. IWS_DESIGN.md 3.4 calls amber "a whisper, never a statement", so it lights an edge and never fills anything. ========================================================================== */ [data-bento]{position:relative;} .iwsb{ --glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:320px; --tilt-x:0deg;--tilt-y:0deg;--mag-x:0px;--mag-y:0px;--lift:0px; /* Lift is its own translate rather than being folded into the magnetism with calc(). calc(0px + -14px) was dropped as invalid, which silently killed the WHOLE transform declaration: no lift, no tilt, no magnetism, computed identity matrix, and nothing in the console to say so. Separate functions compose the same way and cannot fail on a sign. */ transform: translate3d(var(--mag-x),var(--mag-y),0) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease; will-change:transform; } .iwsb:hover{--lift:-6px;} /* Border glow. The two masks cancel everything but the padding ring, so the gradient paints the border only and never washes over the card's contents. */ .iwsb::after{ content:"";position:absolute;inset:0;padding:1.5px; border-radius:inherit;pointer-events:none;z-index:2; background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(var(--glow-color,217,119,6),calc(var(--glow-intensity) * .95)) 0%, rgba(var(--glow-color,217,119,6),calc(var(--glow-intensity) * .45)) 32%, transparent 62%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; transition:opacity .3s ease; } .iwsb__spot{ position:absolute;width:640px;height:640px;border-radius:50%; pointer-events:none;z-index:0;opacity:0; transform:translate(-50%,-50%); transition:opacity .3s ease; background:radial-gradient(circle, rgba(var(--glow-color,217,119,6),.10) 0%, rgba(var(--glow-color,217,119,6),.055) 18%, rgba(var(--glow-color,217,119,6),.025) 34%, transparent 68%); } .iwsb__ripple{ position:absolute;border-radius:50%;pointer-events:none;z-index:3; transform:scale(0);opacity:.85; background:radial-gradient(circle, rgba(var(--glow-color,217,119,6),.32) 0%, rgba(var(--glow-color,217,119,6),.16) 30%, transparent 68%); transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease; } .iwsb__ripple.is-out{transform:scale(1);opacity:0;} @media (prefers-reduced-motion:reduce){ .iwsb{transform:none;transition:none;} .iwsb::after,.iwsb__spot,.iwsb__ripple{display:none;} } /* ========================================================================== ACCESSIBILITY FIXES, 25 Jul 2026 From a measured audit of the homepage. Two of the three were introduced the same day, when amber was added at Burak's request. AMBER SPLITS INTO TWO TOKENS. IWS_DESIGN.md 3.4 requires WCAG AA: 4.5:1 for body text, 3:1 for large text. Measured, #D97706 gives: on #FFFFFF 3.19:1 on #F8FAFC 3.04:1 That is fine for a rule, a ring or a border, which are non-text and need 3:1. It FAILS for text. The chapter numerals, the scrollytelling step numbers and the white-on-amber crown badge were all below the line. So: --iws-amber #D97706 objects only: rules, rings, borders, fills --iws-amber-ink #B45309 text on light grounds, measured 5.02:1 / 4.80:1 and the crown badge keeps its amber fill but takes Royal Blue text (4.72:1) rather than white (3.19:1), which needs no new colour at all. #B45309 is a darker step of the same amber and is FLAGGED for Mustafa under section 12. It is not a free choice: the palette's own AA rule forces it the moment amber carries a letter. ========================================================================== */ :root{ --iws-amber:#D97706; --iws-amber-ink:#B45309; } /* Skip link. (Rewritten 27 Jul 2026.) This block used to style our OWN `.iws-skip`, added in the belief that the site had no skip link. It has one -- the parent theme ships `a.skip-link` to `#primary-content`, and that target genuinely exists -- so every page was carrying two, and ours was the broken one (its `#content` target was never created). Ours is gone from functions.php; the theme's is styled here, which is the only part the theme actually got wrong: it was unstyled, so it either sat visible in the layout or vanished with no focus affordance. `.iws-skip` is kept in the selector list purely so the footer-underline :not() chains below keep working unchanged if it ever returns. */ .skip-link{ position:absolute;left:8px;top:-60px;z-index:100001; padding:12px 20px;border-radius:0 0 10px 10px; background:var(--iws-royal,#0A1776);color:#fff; font-family:var(--iws-font-display); font-size:14px;font-weight:600;text-decoration:none; transition:top .18s ease; } .skip-link:focus,.skip-link:focus-visible{top:0;color:#fff;} /* ---- Footer links: the same underline the navigation uses ----------------- Burak: "make the footer buttons get underlined like the nav bar when hovered over with mouse". Same gradient, same 2px offset, same grow-from-left. It is drawn on ::after, so it needs the anchor to be a positioned inline-block; footer anchors are inline by default and an inline box cannot carry it. */ /* ---- Footer links: the same underline the navigation uses ----------------- Burak, 26 Jul: "make the footer buttons get underlined like the nav bar when hovered over with mouse". Same gradient, same 2px offset, same grow-from- left. It lives here rather than in iws-home.css because the footer is on every page. The footer is NOT a