/* ========================================================================== Kaartdijin Oasis — rebrand prototype Design system: "Oasis Blue" — deep navy substrate, brand azure, signature red. ========================================================================== */ /* ------------------------------- 1. Tokens -------------------------------- */ :root{ /* brand */ --teal-100:#e3edfb; --teal-300:#87b4f5; --teal-400:#4d8ce8; --teal-500:#2f6fd0; --teal-600:#1a4383; --teal-900:#0a1e42; /* Signature red — #B53C40 is the value branding.docx specifies for the wordmark and the keyline. The scale around it is tint/shade of that one hue, so every red on the site is provably the brand red rather than the coral (#f0736a) the prototype shipped with. --gold-300 is the light tint used for text on dark, where the base is too dim to read as a link. */ --gold-300:#e6a9ab; --gold-400:#b53c40; --gold-500:#9c3236; --gold-600:#84292d; --violet-400:#3b6fc4; --violet-500:#17376e; /* dark surface scale (default theme) */ --bg:#050b18; --bg-2:#0a1526; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --text:#eef2f7; --muted:#a3adc2; --faint:#6f7a92; --grad-brand:linear-gradient(135deg,var(--teal-400) 0%,var(--teal-500) 40%,var(--violet-500) 100%); --grad-gold:linear-gradient(135deg,#c04448,var(--gold-400)); --grad-text:linear-gradient(100deg,#ffffff 0%,var(--teal-300) 45%,var(--gold-400) 100%); /* Squared off throughout. The scale is kept rather than deleted so the intent stays legible and one edit restores curvature — every surface still asks for the token it always asked for, the token simply answers 0 now. Pills (border-radius:99px on buttons and chips) are deliberately untouched: they are pills by design, not rounded rectangles. */ --radius-xs:0; --radius-sm:0; --radius:0; --radius-lg:0; --radius-xl:0; --shadow-sm:0 2px 10px rgba(0,0,0,.28); --shadow:0 18px 50px -18px rgba(0,0,0,.75); --shadow-glow:0 0 0 1px rgba(77,140,232,.25),0 18px 60px -20px rgba(77,140,232,.45); --logo-k:#ffffff; --logo-ring:#7ea6de; --logo-word:#f0736a; --footer-mark:url("../img/brand/skyline.02c6ffb55b9f.png"); --nav-h:74px; --maxw:1600px; --card-edge:var(--line-strong); /* leading stop of the faded card border */ --gutter:120px; /* locked side inset once the window can afford it */ --maxw-hard:2600px; /* absolute ceiling so 4K desktops still centre */ --ease:cubic-bezier(.22,1,.36,1); --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-display:'Sora',var(--font); } /* light theme */ html[data-theme="light"]{ --logo-k:#14356b; --logo-ring:#c3d2e8; --logo-word:#d9534f; --bg:#f4f7fc; --bg-2:#ffffff; --surface:rgba(9,16,32,.035); --surface-2:rgba(9,16,32,.06); --line:rgba(9,16,32,.10); --line-strong:rgba(9,16,32,.18); --text:#0b1220; --muted:#4d596e; --faint:#7b869b; --card-edge:rgba(9,16,32,.30); --grad-text:linear-gradient(100deg,#12305f 0%,#2f6fd0 42%,var(--gold-400) 100%); --shadow:0 18px 46px -22px rgba(11,18,32,.35); } /* ------------------------------- 2. Reset --------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html:focus-within{scroll-padding-top:calc(var(--nav-h) + 20px)} body{ font-family:var(--font);background:var(--bg);color:var(--text); line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased; overflow-x:hidden;min-height:100vh; transition:background .4s var(--ease),color .4s var(--ease); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ul,ol{list-style:none} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.025em;font-weight:700} ::selection{background:var(--teal-500);color:#fff} /* scrollbar */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--teal-500);background-clip:content-box} /* ------------------------------ 3. Layout --------------------------------- */ /* Container width. The naive `min(100% - 40px, var(--maxw))` centres the page inside a 1600px cap, which means the side gutter is (viewport - 1600) / 2 and therefore *grows every time the user zooms out* — 160px at 100% on a 1920 screen, 400px at 80%. That reads as the page drifting inward. This version locks the gutter to --gutter once the window is wide enough to spare it, so the indent is static across every realistic zoom level: narrow (<~1840px) fall back to the old 20px-a-side behaviour — a fixed 120px inset would strangle a 1280px laptop mid (~1840-2840px) gutter pinned at exactly --gutter ultrawide --maxw-hard takes over and re-centres, so line lengths stay readable on a 4K desktop at 100% .nav__inner uses the identical expression so the logo stays aligned with the hero headline and every section below it. */ .wrap{width:min(100% - 40px,max(var(--maxw),min(100% - var(--gutter) * 2,var(--maxw-hard))));margin-inline:auto} /* Section rhythm tightened from the prototype's clamp(64px,9vw,124px): at desktop widths that produced a 248px void between every pair of sections, which read as dead space rather than breathing room. 84px a side = 168px between sections. */ .section{padding:clamp(44px,5vw,72px) 0;position:relative} .section--tight{padding:clamp(30px,3.4vw,48px) 0} .grid{display:grid;gap:26px} .center{text-align:center} .stack-sm{display:flex;flex-direction:column;gap:10px} /* background field */ .bg-field{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .bg-field::after{ content:'';position:absolute;inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); opacity:.55; } .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 26s var(--ease) infinite alternate} .orb--1{width:52vw;height:52vw;background:radial-gradient(circle,rgba(77,140,232,.55),transparent 68%);top:-16vw;left:-12vw} .orb--2{width:44vw;height:44vw;background:radial-gradient(circle,rgba(23,55,110,.5),transparent 68%);top:6vw;right:-14vw;animation-delay:-8s} .orb--3{width:38vw;height:38vw;background:radial-gradient(circle,rgba(181,60,64,.38),transparent 68%);top:62vh;left:32vw;animation-delay:-15s} html[data-theme="light"] .orb{opacity:.32} @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4vw,5vh,0) scale(1.12)} 100%{transform:translate3d(-3vw,-4vh,0) scale(.94)} } #net{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5} html[data-theme="light"] #net{opacity:.28} /* ------------------------------ 4. Typography ----------------------------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:.735rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--teal-300);padding:7px 15px;border-radius:99px; border:1px solid var(--line-strong);background:var(--surface);backdrop-filter:blur(12px); } html[data-theme="light"] .eyebrow{color:var(--teal-600)} .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal-400);box-shadow:0 0 10px var(--teal-400);animation:pulse 2.2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} h1,.h1{font-size:clamp(2.5rem,6.2vw,4.6rem)} h2,.h2{font-size:clamp(1.95rem,4vw,3.05rem)} h3,.h3{font-size:clamp(1.2rem,2vw,1.55rem)} .lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:64ch} .section-head{max-width:760px;margin-bottom:clamp(26px,3.4vw,42px)} .section-head.center{margin-inline:auto} .section-head h2{margin:16px 0 14px} .gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .muted{color:var(--muted)} .small{font-size:.9rem} /* ------------------------------- 5. Buttons ------------------------------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:99px;font-weight:650;font-size:.96rem;letter-spacing:.005em; border:1px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s; } .btn:active{transform:scale(.97)} .btn--primary{background:var(--grad-brand);color:#fff;box-shadow:0 12px 34px -12px rgba(77,140,232,.75)} .btn--primary::after{ content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%); transform:translateX(-140%);transition:transform .8s var(--ease); } .btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 46px -12px rgba(77,140,232,.85)} .btn--primary:hover::after{transform:translateX(140%)} .btn--gold{background:var(--grad-gold);color:#fff;box-shadow:0 12px 34px -12px rgba(181,60,64,.7)} .btn--gold:hover{transform:translateY(-3px)} .btn--ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text);backdrop-filter:blur(12px)} .btn--ghost:hover{border-color:var(--teal-400);color:var(--teal-300);transform:translateY(-3px);background:var(--surface-2)} html[data-theme="light"] .btn--ghost:hover{color:var(--teal-600)} .btn--sm{padding:10px 18px;font-size:.86rem} .btn--lg{padding:17px 34px;font-size:1.02rem} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--teal-300);transition:gap .3s var(--ease)} html[data-theme="light"] .link-arrow{color:var(--teal-600)} .link-arrow:hover{gap:13px} /* -------------------------------- 6. Nav ---------------------------------- */ .nav{ position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:900; display:flex;align-items:center; transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s,height .35s var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border-bottom-color:var(--line);height:66px; } .nav__inner{width:min(100% - 40px,max(var(--maxw),min(100% - var(--gutter) * 2,var(--maxw-hard))));margin-inline:auto;display:flex;align-items:center;gap:22px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;flex-shrink:0} /* The white plate is gone: this is the logo itself now, not a badge containing one. That costs the guarantee the plate gave — a fixed light background under a fixed dark mark — so the mark is supplied twice instead, once per theme, and the pair below swaps them. Square, because nothing in this design is rounded any more. */ .brand__mark{ /* Sized by HEIGHT with the artwork's own ratio, not as a square. A square box forces the 600:652 mark to letterbox inside it, which left the image and the frame resolving their heights differently and overflowing the box. With the ratio on the box itself nothing letterboxes and the frame traces exactly where the artwork's keyline sat. */ height:70px;width:auto;aspect-ratio:600/652;display:grid;flex-shrink:0; border-radius:0;background:none;border:0; transition:width .3s var(--ease),height .3s var(--ease),transform .3s var(--ease); } /* The nav collapses to 66px once it sticks, which is exactly the mark's height — so at full size it filled the bar edge to edge and the K's apex looked sliced off. It steps down with the bar instead of overflowing it. */ .nav.is-stuck .brand__mark{height:56px} .brand:hover .brand__mark{transform:translateY(-1px)} /* One logo for both themes — the artwork's own colours everywhere. */ .brand__logo,.brand-art,.pnav__logo{width:100%;height:100%;object-fit:contain;display:block} /* --- the mark, its frame, and how the letters hold their own ------------- The white card is gone again, so the artwork sits directly on the page and the letters have to carry themselves. They are NOT recoloured and NOT haloed: they are bevelled. A light edge on one side and a dark one on the other is how a raised object reads, and it adds definition without putting a single pixel of new colour on the logo. Direction flips per theme because the light source has to come from the side that is brighter than the mark: on the dark ground the lift is white and the depth is black; on the pale ground it is the other way round. */ /* place-items:stretch, not the inherited `center`: with centred items a grid child is sized to its own content, so height:100% has no definite area to resolve against and the image fell back to its intrinsic ratio — overflowing the box and landing 14px off the frame. Stretched, the frame and the artwork occupy the identical grid area, and because the PNG (552x600) and the frame's viewBox (600x652) share the same ratio they letterbox in step. */ .brand__mark,.pnav__mark,.assistant__avatar,.brand-art__box{ position:relative;display:grid;place-items:stretch; } .brand__mark > *,.pnav__mark > *,.assistant__avatar > *,.brand-art__box > *{ grid-area:1/1;width:100%;height:100%; } .brand-art__box{width:clamp(211px,20vw,259px);aspect-ratio:600/652} /* The footer lockup matches the hero at 153px. Sized by HEIGHT so it is the same measure the hero uses — the aspect-ratio gives the width. Scoped to the footer so the portal sign-in page, which shares this partial, keeps its own size. */ .footer .brand-art__box{height:153px;width:auto} .brand-art{height:auto} .brand__frame{display:block;overflow:visible;pointer-events:none} /* Ribbon weight is per-mark. The hero logo is large enough to carry a 2px flat; at nav size that same 2px reads as a heavy box rather than a ribbon, so the small marks run at 1px. Both taper to the same 0.2px edge, and one keyframe set drives both through calc() against this variable. */ .brand__frame{--ribbon-max:1px} body[data-page="home"] .nav:not(.is-stuck) .brand__frame, .brand-art__box .brand__frame{--ribbon-max:1.5px} .brand__frame line{ vector-effect:non-scaling-stroke; /* widths in CSS px at any mark size */ animation:ribbon 9s linear infinite; } @media (prefers-reduced-motion:reduce){ /* Parked mid-flat, so the keyline rests at full width rather than vanishing. */ .brand__frame line{animation:none;stroke-width:var(--ribbon-max);opacity:1} } @keyframes ribbon{ 0.00%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*1.0000);opacity:1.000} 2.08%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9914);opacity:0.996} 4.17%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9659);opacity:0.985} 6.25%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9239);opacity:0.966} 8.33%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.8660);opacity:0.940} 10.42%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7934);opacity:0.907} 12.50%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7071);opacity:0.868} 14.58%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.6088);opacity:0.824} 16.67%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.5000);opacity:0.775} 18.75%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.3827);opacity:0.722} 20.83%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.2588);opacity:0.666} 22.92%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.1305);opacity:0.609} 25.00%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.0000);opacity:0.550} 27.08%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.1305);opacity:0.609} 29.17%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.2588);opacity:0.666} 31.25%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.3827);opacity:0.722} 33.33%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.5000);opacity:0.775} 35.42%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.6088);opacity:0.824} 37.50%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7071);opacity:0.868} 39.58%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7934);opacity:0.907} 41.67%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.8660);opacity:0.940} 43.75%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9239);opacity:0.966} 45.83%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9659);opacity:0.985} 47.92%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9914);opacity:0.996} 50.00%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*1.0000);opacity:1.000} 52.08%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9914);opacity:0.996} 54.17%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9659);opacity:0.985} 56.25%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9239);opacity:0.966} 58.33%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.8660);opacity:0.940} 60.42%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7934);opacity:0.907} 62.50%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7071);opacity:0.868} 64.58%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.6088);opacity:0.824} 66.67%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.5000);opacity:0.775} 68.75%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.3827);opacity:0.722} 70.83%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.2588);opacity:0.666} 72.92%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.1305);opacity:0.609} 75.00%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.0000);opacity:0.550} 77.08%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.1305);opacity:0.609} 79.17%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.2588);opacity:0.666} 81.25%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.3827);opacity:0.722} 83.33%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.5000);opacity:0.775} 85.42%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.6088);opacity:0.824} 87.50%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7071);opacity:0.868} 89.58%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.7934);opacity:0.907} 91.67%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.8660);opacity:0.940} 93.75%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9239);opacity:0.966} 95.83%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9659);opacity:0.985} 97.92%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*0.9914);opacity:0.996} 100.00%{stroke-width:calc(0.2px + (var(--ribbon-max) - 0.2px)*1.0000);opacity:1.000} } /* No filter on the mark, in either theme. The bevel put a dark edge on one side of every letterform, and against the film that read as a black outline drawn around the logo — visible enough that the client asked what it was. The artwork carries its own contrast; anything added around it is something that was not in the logo. Those pixels are transparent now. */ html:not([data-theme="light"]) .brand__logo, html:not([data-theme="light"]) .brand-art, html:not([data-theme="light"]) .pnav__logo{filter:none} /* No filter on the light theme. The page is near-white, the artwork carries its own contrast against it, and any shadow there only muddied the letterforms — the wordmark especially, which is thin. The dark theme keeps its bevel. */ html[data-theme="light"] .brand__logo, html[data-theme="light"] .brand-art, html[data-theme="light"] .pnav__logo{filter:none} /* Full lockup — the whole artwork, wordmark included. Used in the footer, where there is room for the wordmark to be legible. Bigger than it was, and with the plate dropped it needs no border to sit against either ground. */ .brand--lockup{display:block} .brand-art{ background:none;border-radius:0;border:0; } .brand__txt{display:flex;flex-direction:column;line-height:1.06} .brand__txt b{font-size:1.02rem} .brand__txt span{font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);font-weight:600} .nav__links{display:flex;align-items:center;gap:3px;margin-left:auto} .nav__link{ position:relative;padding:9px 14px;border-radius:99px;font-size:.925rem;font-weight:550;color:var(--muted); transition:color .25s,background .25s; } .nav__link:hover{color:var(--text);background:var(--surface)} .nav__link.is-active{color:var(--text)} .nav__link.is-active::after{ content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--grad-brand); } .nav__actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .icon-btn{ width:40px;height:40px;border-radius:0;display:grid;place-items:center; border:1px solid var(--line);background:var(--surface);transition:.25s; } .icon-btn:hover{border-color:var(--teal-400);color:var(--teal-300);transform:translateY(-2px)} .nav__burger{display:none} /* mobile drawer */ .drawer{ position:fixed;inset:0;z-index:950;background:color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:22px; transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto; } .drawer.is-open{transform:translateX(0)} .drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px} .drawer__links{display:flex;flex-direction:column;gap:4px} .drawer__links a{ padding:15px 16px;border-radius:0;font-family:var(--font-display);font-size:1.22rem;font-weight:650; border:1px solid transparent;transition:.25s; } .drawer__links a:hover,.drawer__links a.is-active{background:var(--surface);border-color:var(--line);color:var(--teal-300)} .drawer__foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:12px} /* ------------------------- 7a. Cinematic video hero ----------------------- */ .hero--video{padding-top:0;padding-bottom:0;min-height:100svh;display:flex;align-items:center} .hero__film{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--navy-fallback,#081428)} .hero__film video{width:100%;height:100%;object-fit:cover;filter:saturate(1) contrast(1.04) brightness(1.02)} .hero__film::after{ content:'';position:absolute;inset:0; background: linear-gradient(100deg, rgba(5,11,24,.92) 0%,rgba(5,11,24,.84) 18%,rgba(5,11,24,.62) 33%, rgba(5,11,24,.38) 46%,rgba(5,11,24,.18) 60%,rgba(5,11,24,.06) 74%, rgba(5,11,24,0) 88%), linear-gradient(to top,var(--bg) 1%,transparent 22%); } html[data-theme="light"] .hero__film video{filter:saturate(1.06) brightness(1.03) contrast(1.06)} html[data-theme="light"] .hero__film::after{ background: linear-gradient(100deg, rgba(244,247,252,.88) 0%,rgba(244,247,252,.80) 18%,rgba(244,247,252,.60) 33%, rgba(244,247,252,.34) 46%,rgba(244,247,252,.15) 60%,rgba(244,247,252,.04) 74%, rgba(244,247,252,0) 88%), linear-gradient(to top,var(--bg) 1%,transparent 22%); } .hero--video .wrap{position:relative;z-index:1;padding-top:var(--nav-h);padding-bottom:78px} .hero--video .wrap > div{position:relative} .hero--video .wrap > div::before{ content:'';position:absolute;inset:-46px -70px -40px -60px;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 78% 72% at 26% 50%,rgba(5,11,24,.72),rgba(5,11,24,.34) 55%,transparent 78%); filter:blur(6px); } html[data-theme="light"] .hero--video .wrap > div::before{ background:radial-gradient(ellipse 78% 72% at 26% 50%,rgba(244,247,252,.92),rgba(244,247,252,.6) 55%,transparent 78%); } .hero--video h1{text-shadow:0 2px 26px rgba(5,11,24,.55)} .hero--video h1 .gradient-text,.hero--video .gradient-text{text-shadow:none} .hero--video .lede,.hero--video .hero__trust{text-shadow:0 1px 16px rgba(5,11,24,.5)} html[data-theme="light"] .hero--video h1{text-shadow:0 1px 2px rgba(244,247,252,1),0 2px 20px rgba(244,247,252,.95)} html[data-theme="light"] .hero--video .lede, html[data-theme="light"] .hero--video .hero__trust{text-shadow:0 1px 14px rgba(244,247,252,.95)} .hero__grid--film{grid-template-columns:1fr;align-items:center} .hero__grid--film > div{max-width:780px} .scroll-cue{ position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--faint);font-size:.72rem; letter-spacing:.18em;text-transform:uppercase; } .scroll-cue span{display:block;width:1px;height:34px;background:linear-gradient(var(--teal-400),transparent);animation:cue 2s infinite} @keyframes cue{0%{opacity:0;transform:scaleY(.2)}45%{opacity:1}100%{opacity:0;transform:scaleY(1)}} .video-toggle{ position:absolute;right:26px;bottom:26px;z-index:2;display:flex;align-items:center;gap:8px; padding:9px 16px;border-radius:99px;border:1px solid var(--line-strong); background:color-mix(in srgb,var(--bg-2) 70%,transparent);backdrop-filter:blur(12px); font-size:.78rem;font-weight:600;color:var(--muted);transition:.28s var(--ease); } .video-toggle:hover{color:var(--text);border-color:var(--teal-400);transform:translateY(-2px)} @media (max-width:1040px){ .hero__grid--film{grid-template-columns:1fr} .hero--video{min-height:auto} .scroll-cue{display:none} } /* --------------------------------- 7. Hero -------------------------------- */ .hero{position:relative;padding-top:calc(var(--nav-h) + clamp(48px,7vw,92px));padding-bottom:clamp(56px,7vw,96px);overflow:hidden} .hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,64px);align-items:center} .hero h1{margin:20px 0 22px;font-size:clamp(2.05rem,4.9vw,3.6rem)} .hero__line{display:inline-block;white-space:nowrap} .hero__type{display:inline-block;text-align:left} @media (max-width:560px){.hero__line{white-space:normal}} .cursor{display:inline-block;width:3px;height:.92em;background:var(--teal-400);margin-left:4px;vertical-align:-.08em;animation:blink 1s steps(2) infinite;box-shadow:0 0 12px var(--teal-400)} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .hero__cta{margin:32px 0 26px} .hero__trust{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;color:var(--faint);font-size:.85rem} .hero__trust b{color:var(--muted);font-weight:600} /* hero visual */ .hero__visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center} .ring{position:absolute;border-radius:50%;border:1px solid var(--line-strong)} .ring--1{inset:2%;animation:spin 44s linear infinite} .ring--2{inset:14%;border-style:dashed;animation:spin 32s linear infinite reverse} .ring--3{inset:27%;border-color:rgba(77,140,232,.28)} @keyframes spin{to{transform:rotate(360deg)}} .ring__dot{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--teal-400);box-shadow:0 0 18px var(--teal-400)} .ring--2 .ring__dot{background:var(--gold-400);box-shadow:0 0 18px var(--gold-400)} .hero__core{ position:relative;width:47%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center; background:radial-gradient(circle at 32% 28%,rgba(77,140,232,.28),rgba(23,55,110,.18) 55%,transparent 72%); border:1px solid var(--line-strong);backdrop-filter:blur(8px); box-shadow:inset 0 0 60px rgba(77,140,232,.14),0 30px 80px -30px rgba(77,140,232,.55); animation:float 7s ease-in-out infinite; } @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .hero__core img{width:66%;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))} .hero__core .fallback{font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:-.02em;padding:0 14px} .chip-float{ position:absolute;display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:99px; background:color-mix(in srgb,var(--bg-2) 82%,transparent);border:1px solid var(--line-strong); backdrop-filter:blur(14px);font-size:.82rem;font-weight:600;box-shadow:var(--shadow);white-space:nowrap; animation:float 6s ease-in-out infinite; } .chip-float i{font-style:normal;font-size:1rem} .chip-float--a{top:8%;left:-2%;animation-delay:-1s} .chip-float--b{top:38%;right:-6%;animation-delay:-2.6s} .chip-float--c{bottom:12%;left:6%;animation-delay:-4s} .chip-float--d{bottom:26%;right:2%;animation-delay:-5s} /* ------------------------------- 8. Cards --------------------------------- */ .card{ position:relative;border-radius:var(--radius);border:1px solid var(--line); background:var(--surface);backdrop-filter:blur(14px);padding:26px;overflow:hidden; transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease),background .35s; } .card::before{ content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(77,140,232,.15),transparent 62%); } .card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)} .card:hover::before{opacity:1} .card__icon{ width:48px;height:48px;border-radius:0;display:grid;place-items:center;font-size:1.35rem;margin-bottom:18px; background:var(--surface-2);border:1px solid var(--line); } .card h3{margin-bottom:9px} .card p{color:var(--muted);font-size:.955rem} .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cards-2{grid-template-columns:repeat(2,minmax(0,1fr))} .cards-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (min-width:1440px){.cards-3{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:1100px){.cards-3,.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){.cards-2{grid-template-columns:1fr}} @media (max-width:620px){.cards-3,.cards-4{grid-template-columns:1fr}} /* banner header — replaces the emoji icon blocks */ .card--banner{padding:0;overflow:hidden} .banner{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--teal-900),#12203a)} .banner img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .card--banner:hover .banner img{transform:scale(1.06)} .banner::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,var(--bg-2) 4%,rgba(10,21,38,.55) 45%,rgba(10,21,38,.15) 100%), linear-gradient(105deg,rgba(23,55,110,.55),transparent 62%); } html[data-theme="light"] .banner::after{ background:linear-gradient(to top,var(--bg-2) 4%,rgba(10,21,38,.42) 48%,rgba(10,21,38,.08) 100%), linear-gradient(105deg,rgba(23,55,110,.42),transparent 62%); } .banner__badge{ position:absolute;left:20px;bottom:-24px;z-index:2;width:52px;height:52px;border-radius:0; display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-weight:800;font-size:1.05rem; border:3px solid var(--bg-2);box-shadow:0 12px 28px -10px rgba(23,55,110,.85); } .banner__badge--accent{background:var(--grad-gold);box-shadow:0 12px 28px -10px rgba(181,60,64,.85)} .banner__kicker{ position:absolute;left:20px;bottom:14px;z-index:2;color:#fff;font-family:var(--font-display); font-weight:700;font-size:1.12rem;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(5,11,24,.8); } .card--banner .card__body{padding:26px} .card--banner.has-badge .card__body{padding-top:38px} /* audience cards */ .aud{display:flex;flex-direction:column;gap:16px} .aud .card__body{display:flex;flex-direction:column;gap:14px;flex:1;text-align:center;align-items:center;padding:30px 26px} .aud .banner{aspect-ratio:16/11} .aud .banner__kicker{left:0;right:0;bottom:18px;text-align:center;font-size:clamp(1.15rem,1.7vw,1.45rem)} .aud ul{width:max-content;max-width:100%;margin-inline:auto;text-align:left} .aud li{justify-content:flex-start;text-align:left} .aud .btn{margin-top:auto;width:100%} .aud__top{display:flex;align-items:center;gap:14px} .aud__ico{width:52px;height:52px;border-radius:0;display:grid;place-items:center;font-size:1.5rem;background:var(--grad-brand);color:#fff;flex-shrink:0;box-shadow:0 10px 26px -10px rgba(77,140,232,.7)} .aud:nth-child(2) .aud__ico{background:var(--grad-gold);color:#fff;box-shadow:0 10px 26px -10px rgba(181,60,64,.7)} .aud:nth-child(3) .aud__ico{background:linear-gradient(135deg,var(--violet-400),var(--violet-500));color:#fff;box-shadow:0 10px 26px -10px rgba(23,55,110,.7)} .aud__lede{font-family:var(--font-display);font-size:1.06rem;font-weight:650;color:var(--text)} .aud ul{display:flex;flex-direction:column;gap:9px;margin-top:2px} .aud li{display:flex;gap:10px;font-size:.93rem;color:var(--muted)} .aud li::before{content:'▹';color:var(--teal-400);font-weight:700} .aud .btn{margin-top:auto} /* stat */ .stat{text-align:center;padding:26px 18px} .stat__num{font-family:var(--font-display);font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stat__label{font-weight:650;margin-top:8px;font-size:.98rem} .stat__note{color:var(--faint);font-size:.82rem;margin-top:4px} /* ------------------------------ 9. Programmes ----------------------------- */ .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:30px} .chip{ padding:9px 17px;border-radius:99px;border:1px solid var(--line);background:var(--surface); font-size:.875rem;font-weight:600;color:var(--muted);transition:.28s var(--ease); } .chip:hover{border-color:var(--teal-400);color:var(--text);transform:translateY(-2px)} .chip.is-active{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 10px 26px -12px rgba(77,140,232,.8)} .search{ display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:99px; border:1px solid var(--line);background:var(--surface);flex:1;min-width:220px;max-width:340px;margin-left:auto; } .search input{background:none;border:0;outline:0;width:100%;font-size:.9rem} .search input::placeholder{color:var(--faint)} .pcard{padding:0;display:flex;flex-direction:column} .pcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--teal-900),#141a2e);display:block} .pcard__media::before{ content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 22px; font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em; color:rgba(135,180,245,.5);z-index:0; } .pcard__media img{position:relative;z-index:1} .pcard__media.has-img::before{content:none} .pcard__media .pcard__tag,.pcard__media .pcard__award{z-index:3} .pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .pcard:hover .pcard__media img{transform:scale(1.07)} .pcard__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,13,.85),transparent 58%)} html[data-theme="light"] .pcard__media::after{background:linear-gradient(to top,rgba(5,7,13,.7),transparent 58%)} .pcard__tag{ position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:99px;font-size:.72rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(10px);border:1px solid var(--line-strong);color:var(--teal-300); } .pcard__award{ position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--grad-gold);color:#fff;font-size:.95rem;box-shadow:0 8px 20px -8px rgba(181,60,64,.9); } .pcard__body{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1} .pcard__meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.76rem;color:var(--faint)} .pcard__meta span{padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2)} .pcard h3{font-size:1.13rem} .pcard p{font-size:.92rem;color:var(--muted);flex:1} .pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid var(--line);margin-top:4px} .empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius)} /* -------------------------- 10. Journey / timeline ------------------------ */ /* The detail card used to float absolutely under whichever node was active, which forced 225px of reserved empty space and left two thirds of the row blank whenever a step near one end was selected. It now sits in flow, centred under the rail — the same arrangement the mobile breakpoint always used — so the section is compact and balanced at every width. */ .journey{position:relative;padding-top:22px;padding-bottom:0} /* rail */ .journey__rail{ position:absolute;top:52px;left:calc(100% / 12);right:calc(100% / 12);height:2px; background:var(--line-strong);border-radius:2px; } .journey__rail span{ position:absolute;inset:0 auto 0 0;width:0;border-radius:2px; background:linear-gradient(90deg,var(--teal-500),var(--teal-300)); box-shadow:0 0 18px rgba(77,140,232,.85); transition:width .9s var(--ease); } .journey__rail::after{ content:'';position:absolute;top:-3px;left:-10%;width:10%;height:8px;border-radius:99px; background:linear-gradient(90deg,transparent,rgba(135,180,245,.9),transparent); animation:flow 4.2s linear infinite; } @keyframes flow{0%{left:-12%}100%{left:102%}} /* minmax(0,…) is what stops long labels widening a column past the container */ .journey__track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;position:relative;z-index:1} /* step */ .jstep{ position:relative;text-align:center;padding:0 4px;cursor:pointer;background:none;width:100%; opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease); } .jstep.is-lit{opacity:.6;transform:none} .jstep.is-done{opacity:.85} .jstep.is-active{opacity:1} .jstep__node{position:relative;width:82px;height:82px;margin:0 auto 16px;display:grid;place-items:center} .jstep__ring{ position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(135,180,245,.45); opacity:0;transform:scale(.72);transition:opacity .5s var(--ease),transform .5s var(--ease); } .jstep.is-active .jstep__ring{opacity:1;transform:scale(1);animation:spin 9s linear infinite} .jstep__halo{ position:absolute;inset:11px;border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(77,140,232,.5),transparent 68%);transition:opacity .5s; } .jstep.is-active .jstep__halo{opacity:1;animation:halo 2.6s ease-in-out infinite} @keyframes halo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.28);opacity:.15}} .jstep__n{ position:relative;z-index:2; font-family:var(--font-display);font-size:.82rem;font-weight:800;letter-spacing:.08em;color:var(--muted); width:54px;height:54px;border-radius:50%;display:grid;place-items:center; background:var(--bg-2);border:2px solid var(--line-strong);transition:.55s var(--ease); } .jstep.is-done .jstep__n{background:var(--teal-600);border-color:var(--teal-500);color:#fff} .jstep.is-active .jstep__n{ background:var(--grad-brand);border-color:transparent;color:#fff;transform:scale(1.16); box-shadow:0 14px 34px -10px rgba(77,140,232,1); } .jstep:hover .jstep__n,.jstep:focus-visible .jstep__n{border-color:var(--teal-400);color:var(--text)} .jstep h3{font-size:1rem;transition:color .4s;overflow-wrap:anywhere} .jstep.is-active h3{color:var(--teal-300)} html[data-theme="light"] .jstep.is-active h3{color:var(--teal-600)} .jstep__hint{ display:block;margin-top:6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);opacity:0;transform:translateY(-4px);transition:.4s var(--ease); } .jstep.is-active .jstep__hint,.jstep:hover .jstep__hint{opacity:1;transform:none} /* popover */ .jpop{ position:relative;z-index:5;width:min(760px,100%);margin:38px auto 0; padding:26px 30px;border-radius:var(--radius-lg); background:color-mix(in srgb,var(--bg-2) 92%,transparent);border:1px solid var(--line-strong); backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow),0 0 0 1px rgba(77,140,232,.12); opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transform-origin:top center; transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s; pointer-events:none;text-align:left;display:grid;gap:2px; min-height:150px;align-content:center; } .jpop.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto} /* No arrow: the card is centred in flow rather than tethered to one node, so a pointer would aim at the wrong step. The active node's glow carries the link. */ .jpop::before{display:none} .jpop__inner{transition:opacity .28s var(--ease),transform .28s var(--ease)} .jpop.is-swapping .jpop__inner{opacity:0;transform:translateY(6px)} .jpop__step{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--teal-300)} html[data-theme="light"] .jpop__step{color:var(--teal-600)} .jpop h4{font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.45rem);margin:8px 0 10px} .jpop p{font-size:.98rem;color:var(--muted);max-width:62ch} .jpop__pin{ display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.74rem;font-weight:650; letter-spacing:.08em;text-transform:uppercase;color:var(--faint); } .jpop.is-pinned .jpop__pin{color:var(--gold-400)} /* controls */ .journey__ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px} .journey__ctrl .carousel__btn{width:42px;height:42px} .journey__count{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--faint);min-width:56px;text-align:center} .journey__count b{color:var(--text)} @media (max-width:900px){ .journey{padding-bottom:0} .journey__track{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 14px} .journey__rail{display:none} /* below the fold-out width the panel sits in flow, so it can never overlap */ .jpop{position:static;width:100%;margin-top:26px;transform:translateY(10px) scale(.98)} .jpop.is-open{transform:none} .jpop::before{display:none} } @media (max-width:560px){.journey__track{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ------------------------------ 11. Faculty ------------------------------- */ .fcard{padding:0;text-align:center} .fcard__media{position:relative;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,var(--teal-900),#171d33)} .fcard__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease),filter .5s} .fcard:hover .fcard__media img{transform:scale(1.06)} .fcard__ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:rgba(135,180,245,.5)} .fcard__media img{position:relative;z-index:1} .fcard__media.has-img .fcard__ph{display:none} .fcard__body{padding:20px} .fcard h3{font-size:1.06rem} .fcard__role{color:var(--teal-300);font-size:.86rem;font-weight:600;margin-top:3px} html[data-theme="light"] .fcard__role{color:var(--teal-600)} .fcard__years{color:var(--faint);font-size:.79rem;margin-top:3px} /* ------------------------------ 12. Modal --------------------------------- */ .modal{ position:fixed;inset:0;z-index:990;display:grid;place-items:center;padding:22px; background:rgba(2,4,9,.72);backdrop-filter:blur(10px); opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } .modal.is-open{opacity:1;visibility:visible} .modal__box{ width:min(720px,100%);max-height:86vh;overflow-y:auto;border-radius:var(--radius-lg); background:var(--bg-2);border:1px solid var(--line-strong);box-shadow:var(--shadow); transform:translateY(28px) scale(.97);transition:transform .45s var(--ease); } .modal.is-open .modal__box{transform:none} .modal__head{position:relative;padding:28px 30px 20px;border-bottom:1px solid var(--line)} .modal__close{position:absolute;top:18px;right:18px} .modal__body{padding:26px 30px 30px} /* ------------------------------- 13. Forms -------------------------------- */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:.86rem;font-weight:600;color:var(--muted)} .field input,.field select,.field textarea{ padding:13px 16px;border-radius:var(--radius-xs);border:1px solid var(--line); background:var(--surface);outline:0;transition:.25s;width:100%; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--teal-400);box-shadow:0 0 0 3px rgba(77,140,232,.16);background:var(--surface-2) } .field textarea{resize:vertical;min-height:120px} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3adc2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center} .field--err input,.field--err select,.field--err textarea{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.14)} .field__err{font-size:.78rem;color:#ff8f8f;display:none} .field--err .field__err{display:block} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .form-note{font-size:.8rem;color:var(--faint);margin-top:10px} /* stepper */ .stepper{display:flex;align-items:center;gap:0;margin-bottom:30px} .stepper__i{display:flex;align-items:center;gap:11px;flex:1} .stepper__i:last-child{flex:0} .stepper__dot{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; border:1px solid var(--line-strong);background:var(--surface);font-size:.85rem;font-weight:700;color:var(--muted);transition:.35s; } .stepper__i.is-done .stepper__dot,.stepper__i.is-active .stepper__dot{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(77,140,232,.8)} .stepper__lbl{font-size:.84rem;font-weight:600;color:var(--faint);white-space:nowrap} .stepper__i.is-active .stepper__lbl{color:var(--text)} .stepper__bar{height:2px;flex:1;background:var(--line);margin:0 12px;border-radius:2px;overflow:hidden} .stepper__bar span{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .5s var(--ease)} .step-panel{display:none;animation:fadeUp .5s var(--ease)} .step-panel.is-active{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px} .opt{ padding:16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface); cursor:pointer;text-align:left;transition:.28s var(--ease); } .opt:hover{border-color:var(--teal-400);transform:translateY(-2px)} .opt.is-sel{border-color:var(--teal-400);background:rgba(77,140,232,.09);box-shadow:0 0 0 3px rgba(77,140,232,.14)} .opt b{display:block;font-size:.95rem} .opt span{font-size:.8rem;color:var(--faint)} .success{text-align:center;padding:26px 10px} .success__tick{ width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:2rem; background:var(--grad-brand);color:#fff;box-shadow:0 16px 40px -14px rgba(77,140,232,.9);animation:pop .5s var(--ease) } @keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} /* ----------------------------- 14. Accordion ------------------------------ */ .acc{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;margin-bottom:12px;transition:border-color .3s} .acc.is-open{border-color:var(--line-strong)} .acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;text-align:left;font-weight:650;font-size:1rem} .acc__q i{font-style:normal;font-size:1.3rem;color:var(--teal-400);transition:transform .35s var(--ease);flex-shrink:0} .acc.is-open .acc__q i{transform:rotate(45deg)} .acc__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .acc__a p{padding:0 22px 20px;color:var(--muted);font-size:.95rem} /* --------------------------- 15. Testimonials ----------------------------- */ .tslider{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(14px)} .ttrack{display:flex;transition:transform .65s var(--ease)} .tslide{min-width:100%;padding:clamp(30px,5vw,56px);text-align:center} .tslide__q{font-family:var(--font-display);font-size:clamp(1.1rem,2.1vw,1.5rem);font-weight:600;line-height:1.5;max-width:62ch;margin:0 auto 22px} .tslide__q::before{content:'“';color:var(--teal-400)} .tslide__q::after{content:'”';color:var(--teal-400)} .tslide__n{font-weight:700} .tslide__r{color:var(--faint);font-size:.86rem} .tdots{display:flex;gap:8px;justify-content:center;padding-bottom:26px} .tdot{width:8px;height:8px;border-radius:99px;background:var(--line-strong);transition:.35s var(--ease)} .tdot.is-active{width:26px;background:var(--grad-brand)} /* ----------------------------- 15a. Carousel ------------------------------ */ .carousel{position:relative} .carousel__viewport{overflow:hidden;border-radius:var(--radius);padding-bottom:10px} .carousel__track{display:flex;gap:26px;transition:transform .7s var(--ease);will-change:transform;cursor:grab} .carousel__track.is-drag{transition:none;cursor:grabbing} .carousel__track > *{flex:0 0 var(--slide,calc((100% - 52px) / 3));min-width:0} .carousel__nav{display:flex;align-items:center;gap:12px;margin-top:26px;justify-content:center} .carousel__btn{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; border:1px solid var(--line-strong);background:var(--surface);backdrop-filter:blur(12px); transition:.3s var(--ease);font-size:1.05rem; } .carousel__btn:hover:not(:disabled){border-color:var(--teal-400);color:var(--teal-300);transform:translateY(-2px)} .carousel__btn:disabled{opacity:.32;cursor:not-allowed} .carousel__dots{display:flex;gap:8px} .carousel__dots button{width:8px;height:8px;border-radius:99px;background:var(--line-strong);transition:.35s var(--ease)} .carousel__dots button.is-active{width:28px;background:var(--grad-brand)} .carousel__bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:20px} .carousel__bar span{display:block;height:100%;background:var(--grad-brand);border-radius:2px;transition:width .7s var(--ease)} .carousel .card{height:100%} @media (max-width:1100px){.carousel__track > *{flex-basis:calc((100% - 26px) / 2)}} @media (max-width:700px){.carousel__track > *{flex-basis:100%}.carousel__track{gap:18px}} /* ------------------------------ 15b. Reviews ------------------------------ */ .reviews{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start} .rsummary{position:sticky;top:calc(var(--nav-h) + 20px)} .rscore{font-family:var(--font-display);font-size:3.6rem;font-weight:800;line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .stars{display:inline-flex;gap:3px;font-size:1.05rem;color:var(--gold-400);letter-spacing:1px} .stars--sm{font-size:.9rem} .rbars{margin:20px 0 22px;display:grid;gap:7px} .rbar{display:grid;grid-template-columns:34px 1fr 30px;gap:10px;align-items:center;font-size:.8rem;color:var(--faint)} .rbar__t{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden} .rbar__t span{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-gold);transition:width 1.1s var(--ease)} .rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .rcard{display:flex;flex-direction:column;gap:11px} .rcard__top{display:flex;align-items:center;gap:12px} .ravatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--grad-brand);color:#fff;font-weight:700;font-size:.9rem} .rcard__meta{flex:1;min-width:0} .rcard__name{font-weight:700;font-size:.96rem} .rcard__role{display:block;color:var(--muted);font-size:.79rem;font-weight:600;margin-top:1px;overflow-wrap:anywhere} /* Label/value grid on the public certificate-verification page. The portal has its own copy of this rule; that stylesheet is not loaded off /portal/. */ .pdetail__grid{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:8px 18px;margin:0;font-size:.94rem} .pdetail__grid dt{color:var(--faint);font-size:.84rem} .pdetail__grid dd{margin:0;color:var(--text);font-weight:600;overflow-wrap:anywhere} @media (max-width:560px){.pdetail__grid{grid-template-columns:1fr;gap:2px 0} .pdetail__grid dd{margin-bottom:8px}} .rcard__sub{color:var(--faint);font-size:.78rem} .rcard p{color:var(--muted);font-size:.94rem} /* The real feedback runs to a paragraph or more, and five cards of it buries the rest of the page. Clamped to six lines with a per-card toggle; site.js adds the button only to the cards that are actually cut off, so a short review never grows a "Read more" that does nothing. Clamped in CSS rather than truncated in the template so the whole text is in the HTML — search engines and anyone with JS off still get the review in full. */ .rcard__text{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6; overflow:hidden; } .rcard.is-open .rcard__text{display:block;-webkit-line-clamp:none;overflow:visible} .rcard__more{ align-self:flex-start;margin-top:-2px;padding:0;background:none;border:0; font:inherit;font-size:.85rem;font-weight:650;color:var(--teal-300); cursor:pointer;transition:color .2s var(--ease); } .rcard__more:hover{color:var(--teal-400)} html[data-theme="light"] .rcard__more{color:var(--teal-500)} .rcard__tag{font-size:.72rem;color:var(--teal-300);font-weight:650;letter-spacing:.04em;text-transform:uppercase} html[data-theme="light"] .rcard__tag{color:var(--teal-600)} .rnew{border-color:var(--gold-400)!important;box-shadow:0 0 0 3px rgba(181,60,64,.16)} /* Rating picker — large, centred and interactive. It is the one control in the form people actually enjoy using, so it gets the room. */ .star-pick{ display:flex;justify-content:center;gap:12px;margin:6px 0 4px; font-size:clamp(2.1rem,5.5vw,2.7rem);color:var(--line-strong); } .star-pick .star{ line-height:1;padding:0;background:none;border:0;cursor:pointer;color:inherit; transition:transform .22s var(--ease),color .22s var(--ease),filter .22s var(--ease); transform-origin:center bottom; } .star-pick .star:hover{transform:scale(1.22) rotate(-4deg)} .star-pick .star:focus-visible{outline:2px solid var(--teal-400);outline-offset:4px;border-radius:0} .star-pick .star.on{ color:var(--gold-400); filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--gold-400) 45%,transparent)); } /* the just-clicked star gets a brief pop */ .star-pick .star.is-pop{animation:starPop .42s var(--ease)} @keyframes starPop{ 0%{transform:scale(1)} 45%{transform:scale(1.42) rotate(-8deg)} 100%{transform:scale(1)} } .star-label{ text-align:center;font-family:var(--font-display);font-weight:700;font-size:.9rem; letter-spacing:.04em;color:var(--gold-400);min-height:1.3em; transition:opacity .22s var(--ease); } @media (prefers-reduced-motion:reduce){ .star-pick .star,.star-pick .star:hover{transition:none;transform:none} .star-pick .star.is-pop{animation:none} } .gnote{font-size:.78rem;color:var(--faint);margin-top:12px;line-height:1.55} @media (max-width:1040px){ .reviews{grid-template-columns:1fr} .rsummary{position:static} .rlist{grid-template-columns:1fr} } /* ------------------------------- 16. CTA ---------------------------------- */ .cta-band{ position:relative;border-radius:var(--radius-xl);padding:clamp(38px,6vw,72px);text-align:center;overflow:hidden; border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(77,140,232,.14),rgba(23,55,110,.14) 55%,rgba(181,60,64,.12)); backdrop-filter:blur(16px); } .cta-band::before{ content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(77,140,232,.22),transparent 30%); animation:spin 12s linear infinite; } .cta-band>*{position:relative} .cta-band h2{margin-bottom:14px} .cta-band .lede{margin:0 auto 28px} /* ------------------------------ 17. Footer -------------------------------- */ .footer{ position:relative;border-top:1px solid var(--line);margin-top:40px;overflow:hidden; background:color-mix(in srgb,var(--bg-2) 60%,transparent);backdrop-filter:blur(16px); } .footer::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--footer-mark); /* Wide skyline: size to the footer's width rather than its height, and sit it on the bottom edge. No grayscale — the artwork is already in the brand's navy and red, and desaturating it threw that away. */ background-size:min(1180px,94%) auto;background-position:center bottom;background-repeat:no-repeat; opacity:.14; mask-image:linear-gradient(to top,#000 55%,transparent 100%); -webkit-mask-image:linear-gradient(to top,#000 55%,transparent 100%); } html[data-theme="light"] .footer::before{opacity:.17} .footer > .wrap{position:relative;z-index:1} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding:clamp(44px,6vw,68px) 0 40px} .footer h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:700} .footer a{color:var(--muted);font-size:.93rem;transition:color .25s,padding-left .25s} .footer a:hover{color:var(--teal-300);padding-left:4px} html[data-theme="light"] .footer a:hover{color:var(--teal-600)} .footer__col ul{display:flex;flex-direction:column;gap:10px} .footer__about p{color:var(--muted);font-size:.93rem;margin:16px 0 20px;max-width:38ch} .socials{display:flex;gap:10px} .socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);transition:.28s} .socials a:hover{border-color:var(--teal-400);color:var(--teal-300);transform:translateY(-3px);padding-left:0} .footer__bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:20px 0 28px;border-top:1px solid var(--line);color:var(--faint);font-size:.84rem} .footer__bottom a{font-size:.84rem} /* --------------------------- 18. Page header ------------------------------ */ .phead{padding-top:calc(var(--nav-h) + clamp(40px,6vw,74px));padding-bottom:clamp(28px,4vw,44px);position:relative;overflow:hidden} .phead .wrap{position:relative;z-index:1} .phead__film{position:absolute;inset:0;z-index:0;overflow:hidden} .phead__film video{width:100%;height:100%;object-fit:cover;filter:saturate(.75)} .phead__film::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg,var(--bg) 0%,rgba(5,11,24,.93) 42%,rgba(5,11,24,.62) 100%), linear-gradient(to top,var(--bg) 4%,transparent 55%); } html[data-theme="light"] .phead__film::after{ background:linear-gradient(100deg,var(--bg) 0%,rgba(244,247,252,.93) 42%,rgba(244,247,252,.6) 100%), linear-gradient(to top,var(--bg) 4%,transparent 55%); } .phead h1{font-size:clamp(2.1rem,5vw,3.5rem);margin:16px 0 16px} .breadcrumb{display:flex;gap:9px;align-items:center;font-size:.83rem;color:var(--faint);margin-bottom:6px} .breadcrumb a:hover{color:var(--teal-300)} /* --------------------------- 19. Course detail ---------------------------- */ .detail{display:grid;grid-template-columns:1.6fr .9fr;gap:34px;align-items:start} .detail__hero{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:linear-gradient(135deg,var(--teal-900),#141a2e);margin-bottom:28px} .detail__hero img{width:100%;height:100%;object-fit:cover} .detail h2{margin:34px 0 16px;font-size:clamp(1.4rem,2.4vw,1.9rem)} .ticklist{display:grid;gap:12px} .ticklist li{display:flex;gap:12px;color:var(--muted);font-size:.97rem} .ticklist li::before{content:'✓';flex-shrink:0;width:24px;height:24px;border-radius:0;display:grid;place-items:center;background:rgba(77,140,232,.14);color:var(--teal-300);font-size:.8rem;font-weight:800;border:1px solid rgba(77,140,232,.3)} .modlist{counter-reset:m;display:grid;gap:10px} .modlist li{counter-increment:m;display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);transition:.3s var(--ease)} .modlist li:hover{border-color:var(--teal-400);transform:translateX(5px)} .modlist li::before{content:counter(m,decimal-leading-zero);font-family:var(--font-display);font-weight:800;color:var(--teal-400);font-size:.85rem;padding-top:2px} .sticky-card{position:sticky;top:calc(var(--nav-h) + 20px)} .spec{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:.9rem} .spec:last-of-type{border-bottom:0} .spec b{color:var(--muted);font-weight:600} .spec span{text-align:right;font-weight:600} /* --------------------------- 20. Utility bits ----------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.is-in{opacity:1;transform:none} .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--grad-brand);z-index:999;width:0;box-shadow:0 0 14px rgba(77,140,232,.8)} .fab{ position:fixed;right:22px;bottom:22px;z-index:880;display:flex;flex-direction:column;gap:12px;align-items:flex-end; } .fab a,.fab button{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--bg-2);border:1px solid var(--line-strong);box-shadow:var(--shadow); transition:.3s var(--ease); } .fab a:hover,.fab button:hover{transform:translateY(-4px) scale(1.06);border-color:var(--teal-400);color:var(--teal-300)} .fab .fab--wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;border-color:transparent} .fab .fab--wa:hover{color:#fff} #toTop{opacity:0;visibility:hidden} #toTop.is-show{opacity:1;visibility:visible} .toast{ position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);z-index:995; padding:14px 24px;border-radius:99px;background:var(--bg-2);border:1px solid var(--teal-400); box-shadow:var(--shadow-glow);font-size:.9rem;font-weight:600;transition:transform .5s var(--ease); display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px); } .toast.is-show{transform:translate(-50%,0)} .marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee__t{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite} .marquee:hover .marquee__t{animation-play-state:paused} .marquee span{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:650;color:var(--faint);white-space:nowrap;font-size:.95rem} .marquee span::after{content:'✦';color:var(--teal-400)} @keyframes slide{to{transform:translateX(-50%)}} /* --------------------------- 21. Responsive ------------------------------- */ @media (max-width:820px){ .chip-float--b,.chip-float--d{display:none} .chip-float{font-size:.76rem;padding:8px 12px} .chip-float--a{top:2%;left:0} .chip-float--c{bottom:4%;right:0;left:auto} } @media (max-width:560px){ .chip-float{display:none} .hero__visual{max-width:290px} } @media (max-width:1040px){ .nav__links{display:none} .nav__burger{display:grid} .hero__grid{grid-template-columns:1fr} .hero__visual{max-width:460px;margin-inline:auto;order:-1} .detail{grid-template-columns:1fr} .sticky-card{position:static} .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:400px){ .nav__actions .btn{display:none} .brand__mark{height:62px} .nav.is-stuck .brand__mark{height:53px} } @media (max-width:640px){ body{font-size:15.8px} .wrap{width:min(100% - 32px,var(--maxw))} .nav__inner{width:min(100% - 32px,var(--maxw));gap:12px} .nav__actions{gap:7px;margin-left:auto} .brand__txt span{display:none} .brand__txt b{font-size:.95rem} .icon-btn{width:38px;height:38px} .nav__actions .btn{padding:9px 14px;font-size:.82rem} .form-row{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr;gap:28px} .search{margin-left:0;max-width:none} .stepper__lbl{display:none} .fab{right:16px;bottom:16px} .modal__head,.modal__body{padding-inline:20px} .hero__trust{font-size:.8rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } @media print{.nav,.fab,.bg-field,#net,.progress-bar{display:none!important}} /* ------------------- 12. Faculty profile modal (post-prototype) ----------- Added after the prototype: the profile modal showed a name and a biography but no face. This puts the portrait beside the role at the top of the modal body, so it reads as a profile header and the bio stays above the fold. */ .fprofile{display:flex;gap:18px;align-items:center;margin-bottom:22px;flex-wrap:wrap} .fprofile__photo{ position:relative;width:104px;height:104px;flex-shrink:0; border-radius:0;overflow:hidden;border:1px solid var(--line); background:var(--surface-2);display:grid;place-items:center; font-weight:800;font-size:1.45rem;color:var(--teal-300); box-shadow:var(--shadow-sm); } .fprofile__photo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center top; } .fprofile__who{flex:1;min-width:180px} @media(max-width:480px){ .fprofile__photo{width:84px;height:84px;font-size:1.2rem} .fprofile{gap:14px;margin-bottom:18px} } /* ------------------------- 14. Floating actions -------------------------- WhatsApp is the institute's primary enquiry channel, so it outranks the back-to-top control and is sized accordingly. */ .fab .fab--wa{ /* Button stays the same 52px as the other controls; the brand glyph inside is what carries the weight. position:relative so the pulse ring's inset:0 resolves against the button — without it the ring anchors to the fixed .fab column and draws a giant ellipse over all three controls. */ position:relative; box-shadow:0 10px 28px -10px rgba(37,211,102,.6),var(--shadow); } .fab .fab--wa svg{width:64%;height:64%;display:block} .fab .fab--wa:hover{transform:translateY(-4px) scale(1.07)} .fab--wa__ping{ position:absolute;inset:0;border-radius:50%;border:2px solid #25d366; opacity:0;animation:waPing 3.4s var(--ease) infinite;pointer-events:none; } @keyframes waPing{ 0%{transform:scale(1);opacity:.55} 70%{transform:scale(1.45);opacity:0} 100%{transform:scale(1.45);opacity:0} } @media (prefers-reduced-motion:reduce){.fab--wa__ping{animation:none}} /* No mobile size override: the button matches the other FAB controls at every width now, so the shared .fab a rule is the single source of truth. */ /* ------------------------- 15. On-site assistant ------------------------- */ .fab .fab--chat{font-size:1.28rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s var(--ease)} .fab .fab--chat.is-show{opacity:1;visibility:visible;transform:none} .fab .fab--chat.is-active{border-color:var(--teal-400);color:var(--teal-300)} .assistant{ position:fixed;right:22px;bottom:104px;z-index:890; width:min(392px,calc(100vw - 44px));max-height:min(620px,calc(100vh - 150px)); display:flex;flex-direction:column;overflow:hidden; border-radius:var(--radius-lg);border:1px solid var(--line-strong); background:color-mix(in srgb,var(--bg-2) 94%,transparent); backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom right; transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s; } .assistant.is-open{opacity:1;visibility:visible;transform:none} .assistant__head{ display:flex;align-items:center;gap:12px;padding:16px 16px 14px; border-bottom:1px solid var(--line);flex-shrink:0; } .assistant__avatar{ height:58px;width:auto;aspect-ratio:600/652;border-radius:0;flex-shrink:0;display:grid; background:none;border:0; } .assistant__title{display:flex;flex-direction:column;line-height:1.25;min-width:0} .assistant__title b{font-family:var(--font-display);font-size:.96rem} .assistant__title span{font-size:.72rem;color:var(--faint)} .assistant__close{margin-left:auto;width:34px;height:34px;flex-shrink:0} .assistant__log{ flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px; scroll-behavior:smooth; } .amsg{max-width:88%;padding:11px 15px;border-radius:0;font-size:.9rem;line-height:1.55} .amsg--bot{ align-self:flex-start;background:var(--surface-2);border:1px solid var(--line); border-bottom-left-radius:5px;color:var(--text); } .amsg--user{ align-self:flex-end;background:var(--grad-brand);color:#fff; border-bottom-right-radius:5px;border:1px solid transparent; } .amsg a{color:var(--teal-300);text-decoration:underline;text-underline-offset:2px} html[data-theme="light"] .amsg--bot a{color:var(--teal-600)} .amsg--user a{color:#fff} .amsg__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px} .amsg__links a{ display:inline-flex;align-items:center;padding:6px 13px;border-radius:99px;font-size:.79rem; font-weight:650;text-decoration:none;border:1px solid var(--line-strong);color:var(--text); transition:.25s var(--ease); } .amsg__links a:hover{border-color:var(--teal-400);color:var(--teal-300)} .amsg--typing{display:flex;gap:5px;align-items:center;padding:14px 16px} .amsg--typing span{ width:7px;height:7px;border-radius:50%;background:var(--faint); animation:aType 1.3s ease-in-out infinite; } .amsg--typing span:nth-child(2){animation-delay:.18s} .amsg--typing span:nth-child(3){animation-delay:.36s} @keyframes aType{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .assistant__chips{ display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex-shrink:0; } .assistant__chips button{ padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface); font-size:.77rem;font-weight:600;color:var(--muted);transition:.25s var(--ease);text-align:left; } .assistant__chips button:hover{border-color:var(--teal-400);color:var(--teal-300)} .assistant__form{display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0} .assistant__form input{ flex:1;min-width:0;padding:11px 15px;border-radius:99px;border:1px solid var(--line-strong); background:var(--surface);font-size:.88rem; } .assistant__form input:focus{outline:none;border-color:var(--teal-400)} .assistant__note{padding:0 16px 14px;font-size:.7rem;color:var(--faint);line-height:1.5;flex-shrink:0} .assistant__note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} @media (max-width:520px){ .assistant{right:12px;left:12px;width:auto;bottom:96px;max-height:calc(100vh - 140px)} } @media (prefers-reduced-motion:reduce){ .amsg--typing span{animation:none} .assistant{transition:opacity .2s linear,visibility .2s} } /* ================= 16. Nav, hero and audience refinements ================= */ /* --- 16a. Nav legibility ------------------------------------------------- The nav previously sat fully transparent until scroll, so over the hero film the links competed with whatever frame was playing. It now always carries a scrim and a blur, in both themes (--bg flips, so one rule covers both), and deepens once stuck. */ /* Transparent while the visitor is still on the first screen, so the hero film reads edge to edge; the scrim only arrives once the nav sticks. Legibility over moving video is carried by a halo in the page's own background colour rather than by a bar, so it works in both themes without a panel. */ .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent} .nav:not(.is-stuck) .nav__link, .nav:not(.is-stuck) .brand__txt b, .nav:not(.is-stuck) .brand__txt span{ text-shadow:0 1px 3px color-mix(in srgb,var(--bg) 92%,transparent), 0 2px 16px color-mix(in srgb,var(--bg) 78%,transparent); } .nav.is-stuck{ background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border-bottom-color:var(--line); } .nav__link{color:var(--text);opacity:.82} .nav__link:hover,.nav__link.is-active{opacity:1} /* --- 16b. "Apply now" is redundant beside the hero's own CTA ------------- On the home page the hero already carries a full-size Apply button, so the nav copy of it only appears once that CTA has scrolled away. Every other page shows it immediately, because there is no hero CTA to duplicate. */ .nav__actions .btn--gold{ transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; } body[data-page="home"] .nav:not(.is-stuck) .nav__actions .btn--gold{ opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; } /* --- 16c. Hero trust line needs its own ground --------------------------- Set over moving video it was barely readable whatever the frame. A blurred pill keeps it legible without blocking the film. */ .hero--video .hero__trust{ display:inline-flex;width:max-content;max-width:100%; padding:11px 20px;border-radius:99px;margin-top:26px; background:color-mix(in srgb,var(--bg) 66%,transparent); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid color-mix(in srgb,var(--line-strong) 80%,transparent); text-shadow:none; } .hero--video .hero__trust b{color:var(--text)} /* --- 16d. Keep the scrolling strip inside the first screen --------------- The hero was a full 100svh, which pushed the credential strip below the fold on every laptop. Trimming it by the strip's own height means both are visible without scrolling. */ .hero--video{min-height:calc(100svh - 62px)} /* --- 16e. Audience section fits one screen ------------------------------ Heading plus three cards previously ran past the bottom of the viewport, so the cards were always cut in half. Tighter head, shallower banners and a capped grid width bring the whole section into a single screen. */ #audiences .section-head{margin-bottom:clamp(20px,2.4vw,30px)} #audiences .section-head h2{font-size:clamp(1.6rem,3.1vw,2.5rem)} #audiences .section-head .lede{font-size:.98rem} /* The old three-card audience grid is gone — it is a carousel now (section 22). #aud-grid is the carousel track, so the max-width that used to centre the grid was clamping every slide to 1240px inside a 1400px viewport. */ /* ------------------- 17. Native control theming (selects) ----------------- The theme is driven by a data-theme attribute, so the browser had no idea the page was dark and rendered native UI — most visibly the