/* ============================================================ VISIT USA — in-page overlay (Sections 1 → 2 → 3) Rebuilt from image-data/Section-1.png · Section-2.png · Section-3.png Opened by the sticky bottom nav's "Visit USA" button. It is an OVERLAY, not a page: window.location is never touched, so the session / live-call state survives. Layout is MOBILE-FIRST (the mocks are portrait phone frames); the @media block only scales the same design up for wider screens. Everything is scoped under .vu-overlay and prefixed .vu- so it cannot collide with the existing .uh-* home skin. ============================================================ */ .vu-overlay { /* Palette lifted from the mocks */ --vu-cream: #f9f1e5; --vu-page: #131e42; --vu-navy: #072b65; --vu-navy-soft: #0a2e70; --vu-ink: #12305f; --vu-orange: #ff6a00; --vu-orange-deep: #ff5e00; --vu-band: #f1f4f8; --vu-white: #f5f8ff; --vu-ph-bg: #eceff4; --vu-peach: #f6c9ae; position: fixed; /* Starts below the app header: .text-window is a grid item with z-index:1, i.e. its own stacking context, so NO z-index here can lift the overlay above the header (z-index:100 on the shell grid). Offset it instead — the header stays visible and the bar below it is too. */ top: var(--header-height, 46px); left: 0; right: 0; bottom: 0; /* Below .uh-nav (z-index 900) on purpose: the sticky nav stays visible and usable while the overlay is open. */ z-index: 880; display: flex; flex-direction: column; background: var(--vu-page); font-family: 'Poppins', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; opacity: 0; transform: translateY(14px); transition: opacity 200ms ease, transform 200ms ease; } .vu-overlay.is-open { opacity: 1; transform: none; } /* Author display rules must not defeat the `hidden` attribute. */ .vu-overlay[hidden] { display: none !important; } /* A live "Ask Adam" call takes the screen back, like the other home chrome. The overlay is reparented to at boot (iOS Safari clips fixed elements inside the #text-window scroller), hence the :has() variant. */ .app-shell.home-apply.voice-chat-mode .vu-overlay { display: none !important; } body:has(.app-shell.home-apply.voice-chat-mode) .vu-overlay { display: none !important; } @media (prefers-reduced-motion: reduce) { .vu-overlay { transition: none; transform: none; } } /* ════════ SCROLL AREA ════════ */ .vu-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none; padding: 12px 0 0; /* clear the sticky nav that stays on top of the overlay */ padding-bottom: calc(var(--uh-nav-height, 86px) + 24px); } .vu-doc { max-width: 100%; } /* ════════ SHARED SECTION / TYPE SCALE ════════ */ /* Each section is its own rounded cream CARD floating on the navy page, with a navy gutter between cards — as in the design PDF. */ .vu-sec { position: relative; overflow: hidden; margin: 0 10px 14px; padding: 26px 18px 30px; background: var(--vu-cream); border-radius: 24px; } .vu-h1 { margin: 0 0 14px; font-size: 33px; line-height: 1.07; font-weight: 800; letter-spacing: -0.5px; } .vu-h1 > span { display: block; } .vu-h1 > span > span { display: inline; } .vu-h1-navy { color: var(--vu-navy); } .vu-h1-orange { color: var(--vu-orange); } .vu-rule { display: block; width: 58px; height: 4px; margin: 0 0 20px; border-radius: 999px; background: var(--vu-orange); } .vu-h2 { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 12px; font-size: 19px; line-height: 1.32; font-weight: 700; color: var(--vu-navy); } .vu-h2-icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--vu-navy); } .vu-h2-icon svg { display: block; width: 100%; height: 100%; } .vu-p { margin: 0 0 15px; font-size: 15px; line-height: 1.72; color: var(--vu-ink); } .vu-p:last-child { margin-bottom: 0; } .vu-p strong { color: var(--vu-navy); font-weight: 700; } /* ════════ IMAGE PLACEHOLDERS ════════ Drop-in slots: swap the

for an with the same aspect ratio when the real photography lands. */ .vu-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0 0 20px; padding: 14px; text-align: center; background: var(--vu-ph-bg); border: 1.5px dashed rgba(7, 43, 101, 0.26); border-radius: 20px; color: rgba(7, 43, 101, 0.62); } .vu-ph--wide { aspect-ratio: 16 / 9; } .vu-ph--43 { aspect-ratio: 4 / 3; } /* photo that butts directly onto a navy strip below it */ .vu-ph--flat { margin-bottom: 0; border-radius: 18px 18px 0 0; } .vu-ph svg { width: 36px; height: 36px; opacity: 0.5; } .vu-ph-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .vu-ph-hint { max-width: 26ch; font-size: 12px; line-height: 1.45; opacity: 0.85; } .vu-img { display: block; width: 100%; margin: 0 0 20px; border-radius: 20px; object-fit: cover; } /* image that butts directly onto a navy strip below it */ .vu-img--flat { margin-bottom: 0; aspect-ratio: 16 / 7; border-radius: 18px 18px 0 0; } /* ════════ SECTION 1 — AI-Powered Learning ════════ */ .vu-dots { position: absolute; top: 16px; right: 8px; width: 98px; height: 76px; background-image: radial-gradient(rgba(7, 43, 101, 0.18) 1.6px, transparent 1.7px); background-size: 11px 11px; pointer-events: none; } .vu-sec--1 .vu-h1 { position: relative; z-index: 1; } /* ════════ SECTION 2 — From Knowledge to Professional Confidence ════════ */ .vu-figwrap { position: relative; padding-left: 13px; margin-bottom: 22px; } .vu-figwrap .vu-ph, .vu-figwrap .vu-img { margin: 0; } .vu-strip { position: absolute; left: 0; top: 10px; bottom: 10px; width: 7px; border-radius: 999px; background: var(--vu-orange); } .vu-banner { margin: 0 0 24px; padding: 22px 18px 24px; background: var(--vu-navy); border-radius: 18px; color: #fff; font-size: 29px; font-weight: 800; line-height: 1.12; letter-spacing: -0.4px; } .vu-banner span { display: block; } .vu-banner-accent { color: var(--vu-orange); } /* Left timeline rail with circular nodes */ .vu-rail { position: relative; padding-left: 22px; } .vu-rail::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--vu-orange); } .vu-rail-node { position: relative; } .vu-rail-node::before { content: ''; position: absolute; left: -22px; top: 0.42em; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--vu-orange); } .vu-rail .vu-h2 { margin-top: 0; } /* ════════ SECTION 3 — From Semester One to the Marketplace ════════ */ .vu-h1--bar { position: relative; padding-left: 15px; } .vu-h1--bar::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 7px; width: 6px; border-radius: 999px; background: var(--vu-orange); } .vu-strap { margin: 0 0 22px; padding: 15px 36px 15px 16px; background: var(--vu-navy); color: var(--vu-white); font-size: 15px; font-weight: 600; line-height: 1.5; border-radius: 5px 0 0 5px; /* angled tab on the right edge, per the mock */ clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); } .vu-steps { position: relative; margin: 6px 0 20px; padding: 0; list-style: none; } /* navy connector running through the badge centres (badge = 36px → 18px) */ .vu-steps::before { content: ''; position: absolute; left: 17px; top: 26px; bottom: 26px; width: 2px; background: var(--vu-navy); opacity: 0.5; } .vu-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 0; border-radius: 12px; } .vu-step--band { background: var(--vu-band); } .vu-step-num { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vu-orange-deep); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 2px 6px rgba(255, 94, 0, 0.32); } .vu-step-label { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--vu-navy); } /* oversized decorative outline arrow, bottom-right, partially clipped */ .vu-arrow { position: absolute; right: -34px; bottom: -16px; width: 148px; height: 168px; color: #f6c18d; opacity: 0.45; pointer-events: none; } .vu-arrow svg { display: block; width: 100%; height: 100%; } .vu-sec--3 > *:not(.vu-arrow) { position: relative; z-index: 1; } /* ════════ SHARED — sections 6-9 ════════ */ /* bold lead sentence that sits under a headline */ .vu-lead { margin: 0 0 20px; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--vu-navy); } /* orange inline emphasis inside body copy */ .vu-em { color: var(--vu-orange); font-weight: 700; } /* horizontal rules */ .vu-hr { display: block; height: 2px; margin: 0 0 20px; border-radius: 2px; background: var(--vu-orange); } .vu-hr--split { height: 1.5px; margin: 22px 0; background: linear-gradient(to right, var(--vu-orange) 0 64px, #c9ced8 64px); } /* paragraph carrying the stacked square bullet motif (sections 8 & 9) */ .vu-note { position: relative; margin: 0 0 20px; padding-left: 32px; } .vu-note::before, .vu-note::after { content: ''; position: absolute; } .vu-note::before { left: 2px; top: 6px; width: 12px; height: 12px; border-radius: 2px; background: var(--vu-orange); } .vu-note::after { left: 9px; top: 13px; width: 13px; height: 13px; border-radius: 4px; background: var(--vu-navy); } .vu-note .vu-p { margin: 0; } /* navy curve closing a section, with the orange trim from the mocks */ .vu-wave { display: block; height: 46px; margin: 28px -18px -30px; background: var(--vu-navy); border-top: 3px solid var(--vu-orange); border-radius: 50% 50% 0 0 / 30px 30px 0 0; } /* decorative corner ornaments */ .vu-arc { position: absolute; top: -34px; right: -44px; width: 132px; height: 132px; border: 14px solid var(--vu-navy); border-radius: 50%; pointer-events: none; } .vu-arc::after { content: ''; position: absolute; inset: 5px; border: 11px solid var(--vu-orange); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; } .vu-dotgrid { position: absolute; top: 24px; right: 16px; width: 46px; height: 46px; background-image: radial-gradient(var(--vu-orange) 3px, transparent 3.2px); background-size: 16px 16px; opacity: 0.8; pointer-events: none; } /* ════════ SECTION 6 — Study Now. Repay After You Earn. ════════ */ /* photo in a navy L-frame with orange edge accents */ .vu-frame { position: relative; margin: 0 0 24px; padding: 0 14px 14px 0; } .vu-frame::before { content: ''; position: absolute; left: 10px; right: 0; top: 30px; bottom: 0; border: 5px solid var(--vu-navy); border-top: none; border-radius: 0 0 26px 6px; } .vu-frame::after { content: ''; position: absolute; left: 0; top: 34px; bottom: 40px; z-index: 2; width: 7px; border-radius: 999px; background: var(--vu-orange); } .vu-frame .vu-img { position: relative; z-index: 1; margin: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: 34% 58%; border-radius: 6px 20px 20px 6px; } /* ════════ SECTION 7 — A Home Away from Home for Girls ════════ */ .vu-hero-mask { margin: -26px -18px 20px; overflow: hidden; border-radius: 0 0 30px 30px; /* broad top, diagonal cut along the bottom, as in the mock */ clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .vu-hero-mask .vu-img { margin: 0; border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: 47% 52%; } .vu-feats { display: flex; margin: 0 0 24px; padding: 0; list-style: none; } .vu-feat { flex: 1 1 0; display: flex; align-items: center; gap: 7px; padding: 2px 8px; color: var(--vu-navy); } .vu-feat + .vu-feat { border-left: 1px solid #bfc7d3; } .vu-feat svg { flex: 0 0 auto; width: 23px; height: 23px; } .vu-feat span { font-size: 10px; font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; } /* ════════ SECTION 8 — Two Qualifications. One Four-Year Journey. ════════ */ .vu-card { margin: 0 0 24px; overflow: hidden; border-radius: 22px; background: var(--vu-navy); box-shadow: 0 10px 26px rgba(11, 36, 84, 0.14); } .vu-card-img { display: block; width: 100%; margin: 0; aspect-ratio: 21 / 10; object-fit: cover; object-position: 50% 52%; border-radius: 0; } .vu-timeline { padding: 18px 20px 20px; } .vu-tl-track { display: flex; align-items: center; gap: 10px; } .vu-tl-rail { flex: 1 1 auto; height: 2px; background: #a7b1c4; opacity: 0.65; } .vu-tl-dot { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 3px solid var(--vu-orange); border-radius: 50%; background: #fff; } .vu-tl-dot--check { background: var(--vu-orange); color: #fff; } .vu-tl-dot svg { width: 14px; height: 14px; } .vu-tl-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; } .vu-tl-labels > div { flex: 0 1 auto; } .vu-tl-labels > div:last-child { text-align: right; } .vu-tl-year { display: block; color: var(--vu-orange); font-size: 13px; font-weight: 800; letter-spacing: 0.09em; } .vu-tl-name { display: block; margin-top: 2px; color: #fff; font-size: 14.5px; font-weight: 700; } .vu-alert { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; background: #fff; border-left: 6px solid var(--vu-orange); border-radius: 14px; box-shadow: 0 6px 18px rgba(11, 36, 84, 0.10); } .vu-alert-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #ffe6d8; color: var(--vu-orange); font-size: 19px; font-weight: 800; } .vu-alert p { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--vu-navy); } /* ════════ SECTION 9 — Start in Lahore. International Degree. ════════ */ .vu-split { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 22px; background: #fff; box-shadow: 0 10px 26px rgba(11, 36, 84, 0.14); } /* two halves overlap slightly; the opposing diagonal clips leave the white seam running through the middle, as in the mock */ .vu-split-half { position: absolute; top: 0; bottom: 0; width: 53%; overflow: hidden; } .vu-split-half--l { left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%); } .vu-split-half--r { right: 0; clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%); } .vu-split-half .vu-ph { height: 100%; margin: 0; border: none; border-radius: 0; } .vu-split-half img, .vu-split-half .vu-img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; } .vu-split-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 11px; text-align: center; background: linear-gradient(to top, rgba(6, 26, 60, 0.88), rgba(6, 26, 60, 0)); } .vu-split-place { display: block; color: var(--vu-orange); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; } .vu-split-dur { display: block; margin-top: 1px; color: #fff; font-size: 12.5px; font-weight: 700; } .vu-split-badge { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 5px solid var(--vu-orange); border-radius: 50%; background: var(--vu-navy); color: #fff; } .vu-split-badge svg { width: 26px; height: 26px; } .vu-ribbon { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin: -16px 0 22px; padding: 13px 34px 13px 16px; background: var(--vu-navy); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; border-radius: 5px 0 0 5px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); } .vu-ribbon-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--vu-orange); } /* ════════ SHARED — two-tone progress bar closing several cards ════════ */ .vu-progress { display: flex; height: 4px; margin: 24px 0 0; border-radius: 999px; overflow: hidden; } .vu-progress::before, .vu-progress::after { content: ''; } .vu-progress::before { flex: 0 0 44%; background: var(--vu-orange); } .vu-progress::after { flex: 1 1 auto; background: var(--vu-navy); } .vu-progress--flip::before { flex-basis: 80%; background: var(--vu-navy); } .vu-progress--flip::after { background: var(--vu-orange); } /* ════════ SECTION 4 — From Learning to Earning Online. ════════ */ .vu-navypanel { position: relative; margin: -26px -18px 26px; padding: 26px 18px 30px; min-height: 250px; background: var(--vu-navy); overflow: hidden; } .vu-navypanel > *:not(.vu-navypanel-photo) { position: relative; z-index: 1; max-width: 44%; } .vu-navypanel .vu-h1-white { color: #fff; } .vu-navypanel .vu-lead { color: #e6ecf4; font-size: 13.5px; } /* photo sits on the right with a ~45° cut where it meets the navy. The cut is CSS, not baked into the file, so it always lands on the panel edge whatever the panel's size. */ .vu-navypanel-photo { position: absolute; right: 0; bottom: 0; z-index: 0; width: 54%; margin: 0; aspect-ratio: 1214 / 1166; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); } .vu-navypanel-photo img, .vu-navypanel-photo .vu-ph { display: block; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; object-fit: cover; object-position: 62% 50%; } @media (max-width: 320px) { .vu-navypanel > *:not(.vu-navypanel-photo) { max-width: 100%; } .vu-navypanel-photo { position: relative; width: calc(100% + 36px); margin: 20px -18px -30px; } } .vu-steps2 { position: relative; margin: 0; padding: 0; list-style: none; } .vu-step2 { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 0 0 16px; } .vu-step2 + .vu-step2 { border-top: 1.5px solid #f4c8a8; padding-top: 16px; } .vu-step2-num { flex: 0 0 auto; width: 52px; font-size: 40px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--vu-orange); text-stroke: 1.5px var(--vu-orange); } .vu-step2 .vu-p { margin: 0; font-size: 13.5px; } /* ════════ SECTION 5 — A Scholarship That Builds Your Career. ════════ */ /* navy icon slab + photo side by side, navy quote band beneath */ .vu-media { display: flex; margin: 0 0 24px; border-radius: 4px 26px 0 0; overflow: hidden; } .vu-media-slab { flex: 0 0 22%; display: flex; align-items: center; justify-content: center; background: var(--vu-navy); color: var(--vu-orange); } .vu-media-slab svg { width: 30px; height: 30px; } .vu-media-photo { flex: 1 1 auto; margin: 0; min-width: 0; } /* sections 5 and 6 are two frames of the same shoot, so they are cropped differently to stop them reading as one repeated picture */ .vu-media-photo img, .vu-media-photo .vu-ph { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 0; border: none; border-radius: 0; object-fit: cover; object-position: 72% 42%; } .vu-band { margin: -24px 0 24px; padding: 16px 18px 18px; background: var(--vu-navy); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.45; } .vu-band::after { content: ''; display: block; width: 60px; height: 3px; margin: 12px 0 0; border-radius: 999px; background: var(--vu-orange); } /* thin rules separating the three scholarship paragraphs */ .vu-p--ruled { padding-bottom: 15px; border-bottom: 1.5px solid #f3b98f; } /* ════════ SECTION 10 — Established by Law. ════════ */ /* photo with a navy icon slab overlaid on its left edge */ .vu-figslab { position: relative; margin: 0 0 0; } .vu-figslab img, .vu-figslab .vu-img, .vu-figslab .vu-ph { margin: 0; aspect-ratio: 16 / 6; object-fit: cover; border-radius: 18px 18px 0 0; } .vu-figslab-icon { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 18%; background: var(--vu-navy); color: var(--vu-orange); border-radius: 18px 0 0 0; } .vu-figslab-icon svg { width: 26px; height: 26px; } .vu-caption { margin: 0 0 22px; padding: 14px 18px 16px; background: var(--vu-navy); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 0 0 18px 18px; } /* ════════ SECTION 11 — Accredited Where It Matters ════════ */ .vu-tabs { display: flex; margin: 0 0 22px; padding: 0; list-style: none; background: var(--vu-navy); border-top: 3px solid var(--vu-orange); border-radius: 0 0 16px 16px; overflow: hidden; } .vu-tab { flex: 1 1 0; padding: 12px 4px 11px; text-align: center; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; } .vu-tab + .vu-tab { border-left: 1px solid #49678e; } .vu-tab::after { content: ''; display: block; width: 22px; height: 2px; margin: 5px auto 0; background: var(--vu-orange); } .vu-callout { margin: 0; padding: 20px 18px 22px; background: var(--vu-navy); border-top: 5px solid var(--vu-orange); border-radius: 4px 4px 20px 4px; color: var(--vu-white); font-size: 14px; line-height: 1.65; } .vu-callout strong { color: #fff; } .vu-callout .vu-em { color: #ff7a2a; } /* ════════ SECTION 12 — facilities collage ════════ */ .vu-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; text-align: center; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; background: linear-gradient(to top, rgba(6, 26, 60, 0.85), rgba(6, 26, 60, 0)); } .vu-collage3 { position: relative; display: grid; grid-template-columns: 1.75fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; margin: 0 0 22px; height: 210px; } .vu-collage3 > figure { position: relative; margin: 0; overflow: hidden; border-radius: 12px; } .vu-collage3 > figure:first-child { grid-row: 1 / 3; } .vu-collage3 img, .vu-collage3 .vu-img, .vu-collage3 .vu-ph { width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; object-fit: cover; } .vu-topcap, .vu-botcap { display: block; height: 34px; background: var(--vu-navy); } .vu-topcap { margin: -26px -18px 22px; border-radius: 0 0 50% 50% / 0 0 26px 26px; } .vu-botcap { margin: 26px -18px -30px; border-top: 3px solid var(--vu-orange); border-radius: 50% 50% 0 0 / 26px 26px 0 0; } /* ════════ SECTION 13 — Learn by Doing ════════ */ .vu-wavephoto { margin: 0 -18px; overflow: hidden; border-top: 4px solid var(--vu-orange); border-bottom: 4px solid var(--vu-orange); border-radius: 50% 50% 50% 50% / 26px 26px 26px 26px; } /* source photo is a tall portrait, so the band is deeper than the mock's banner and the crop is steered at the working cluster */ .vu-wavephoto img, .vu-wavephoto .vu-img, .vu-wavephoto .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 4 / 3; border: none; border-radius: 0; object-fit: cover; object-position: 52% 62%; } .vu-darkpanel { margin: 0 -18px -30px; padding: 24px 18px 26px; background: #0c2d59; color: #eaf0fa; font-size: 14px; line-height: 1.7; } .vu-darkpanel p { margin: 0; } .vu-darkpanel p + p { margin-top: 14px; } .vu-darkpanel strong { color: #fff; } .vu-darkpanel .vu-em { color: #ff7a2a; } .vu-darkpanel .vu-progress { margin-top: 22px; } /* ════════ SECTION 14 — sports ════════ */ .vu-photoribbon { position: relative; margin: 0; } .vu-photoribbon img, .vu-photoribbon .vu-img, .vu-photoribbon .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; } .vu-ribbon2 { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: -46px 6px 22px; padding: 14px 30px 14px 14px; background: var(--vu-navy); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; border-radius: 4px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); box-shadow: 0 8px 20px rgba(11, 36, 84, 0.28); } .vu-ribbon2::before { content: ''; flex: 0 0 auto; width: 5px; align-self: stretch; border-radius: 999px; background: var(--vu-orange); } /* ════════ SECTION 15 — clubs and societies ════════ */ .vu-photocircles { position: relative; margin: 0 -18px 0; } /* tall portrait source: deeper band, crop steered at the standing speaker */ .vu-photocircles img, .vu-photocircles .vu-img, .vu-photocircles .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 4 / 3; border: none; border-radius: 0; object-fit: cover; object-position: 50% 53%; } .vu-photocircles::before, .vu-photocircles::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; background: var(--vu-orange); } .vu-photocircles::before { top: 0; } .vu-photocircles::after { bottom: 0; } .vu-circle { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid var(--vu-orange); border-radius: 50%; background: var(--vu-navy); color: #fff; } .vu-circle svg { width: 18px; height: 18px; } .vu-circle--tl { left: 10px; top: 22%; } .vu-circle--bl { left: 10px; bottom: 18%; } .vu-circle--tr { right: 10px; top: 22%; } .vu-circle--br { right: 10px; bottom: 18%; } /* ════════ SECTION 16 — Turn Ideas into Action ════════ */ .vu-slab { margin: 0 -18px 22px 0; padding: 16px 18px; background: var(--vu-navy); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; border-radius: 0 14px 14px 0; max-width: 74%; } .vu-bullets { margin: 0 0 22px; padding: 0; list-style: none; } .vu-bullets li { position: relative; margin: 0 0 13px; padding-left: 28px; font-size: 14px; line-height: 1.6; color: var(--vu-ink); } .vu-bullets li::before, .vu-bullets li::after { content: ''; position: absolute; } .vu-bullets li::before { left: 0; top: 6px; width: 10px; height: 10px; border-radius: 2px; background: var(--vu-orange); } .vu-bullets li::after { left: 6px; top: 11px; width: 11px; height: 11px; border-radius: 3px; background: #a7c4e4; } /* diagonal chain of tilted photo tiles */ .vu-diag { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 4px; } .vu-diag > figure { margin: 0; overflow: hidden; border-radius: 14px; transform: rotate(-4deg); } .vu-diag > figure:nth-child(even) { transform: rotate(4deg); } .vu-diag > figure:last-child { grid-column: 1 / 3; } .vu-diag img, .vu-diag .vu-img, .vu-diag .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 4 / 5; border: none; border-radius: 0; object-fit: cover; object-position: 50% 38%; } /* ════════ SECTION 17 — Every Semester Comes Alive ════════ */ .vu-collage5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 0 0 20px; } .vu-collage5 > figure { margin: 0; overflow: hidden; border: 2px solid #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(11, 36, 84, 0.12); } .vu-collage5 > figure:nth-child(1) { grid-column: span 2; transform: rotate(-3deg); } .vu-collage5 > figure:nth-child(2) { grid-column: span 2; } .vu-collage5 > figure:nth-child(3) { grid-column: span 2; transform: rotate(3deg); } .vu-collage5 > figure:nth-child(4) { grid-column: span 3; transform: rotate(2deg); } .vu-collage5 > figure:nth-child(5) { grid-column: span 3; transform: rotate(-2deg); } .vu-collage5 img, .vu-collage5 .vu-img, .vu-collage5 .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 1 / 1; border: none; border-radius: 0; object-fit: cover; } .vu-collage5 > figure:nth-child(n + 4) img, .vu-collage5 > figure:nth-child(n + 4) .vu-ph, .vu-collage5 > figure:nth-child(n + 4) .vu-img { aspect-ratio: 3 / 2; } .vu-divider { display: block; height: 1.5px; margin: 0 0 18px; background: linear-gradient(to right, #b8c7da 0 40%, var(--vu-orange) 40% 60%, #b8c7da 60%); } .vu-chips { display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; } .vu-chip { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 3px 10px; background: #fff; border-radius: 12px; box-shadow: 0 3px 10px rgba(11, 36, 84, 0.10); color: var(--vu-ink); font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.2; } .vu-chip-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.6px solid var(--vu-orange); border-radius: 50%; color: var(--vu-orange); } .vu-chip-icon svg { width: 15px; height: 15px; } /* ════════ SECTION 18 — Experience the Professional World Early ════════ */ .vu-dots3 { display: flex; align-items: center; gap: 5px; margin: 0 0 14px; } .vu-dots3 span { width: 7px; height: 7px; border-radius: 50%; background: var(--vu-navy); } .vu-dots3 span:last-of-type { background: var(--vu-orange); } .vu-dots3::after { content: ''; width: 40px; height: 2px; margin-left: 4px; background: var(--vu-orange); } .vu-portrait { margin: 0 -18px 20px 0; overflow: hidden; border-radius: 20px 0 0 20px; } .vu-portrait img, .vu-portrait .vu-img, .vu-portrait .vu-ph { display: block; width: 100%; margin: 0; aspect-ratio: 4 / 3; border: none; border-radius: 0; object-fit: cover; object-position: 58% 40%; } .vu-minicards { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } .vu-minicard { flex: 1 1 0; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(11, 36, 84, 0.12); } .vu-minicard img, .vu-minicard .vu-ph, .vu-minicard .vu-img { display: block; width: 100%; margin: 0; aspect-ratio: 4 / 3; border: none; border-radius: 0; object-fit: cover; object-position: 50% 35%; } .vu-minicard-cap { display: block; padding: 10px 10px 12px; background: #123063; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; } .vu-minicard-cap::after { content: ''; display: block; width: 22px; height: 2px; margin-top: 7px; background: var(--vu-orange); } /* ════════ WIDER SCREENS — same design, scaled up ════════ */ @media (min-width: 700px) { .vu-doc { max-width: 740px; margin: 0 auto; } .vu-sec { margin: 0 16px 18px; padding: 40px 34px 46px; } .vu-h1 { font-size: 46px; } .vu-banner { font-size: 40px; padding: 30px 26px 32px; } .vu-h2 { font-size: 22px; } .vu-p { font-size: 16px; } .vu-lead { font-size: 19px; } .vu-strap { font-size: 16.5px; } .vu-step-label { font-size: 17px; } .vu-arrow { width: 200px; height: 224px; } .vu-feat span { font-size: 12px; } .vu-alert p { font-size: 16px; } .vu-ribbon { font-size: 14px; } .vu-hero-mask { margin: -40px -34px 24px; } .vu-wave { margin: 34px -34px -46px; } .vu-navypanel { margin: -40px -34px 32px; padding: 40px 34px 40px; } .vu-navypanel-photo { clip-path: polygon(140px 0, 100% 0, 100% 100%, 0 100%, 0 140px); } .vu-step2-num { width: 68px; font-size: 54px; } .vu-step2 .vu-p { font-size: 15.5px; } .vu-collage3 { height: 300px; } .vu-tab { font-size: 14px; } .vu-chip { font-size: 11px; } .vu-topcap { margin: -40px -34px 28px; } .vu-botcap { margin: 34px -34px -46px; } .vu-wavephoto { margin: 0 -34px; } .vu-darkpanel { margin: 0 -34px -46px; padding: 30px 34px 34px; } .vu-photocircles { margin: 0 -34px; } .vu-portrait { margin-right: -34px; } .vu-circle { width: 48px; height: 48px; } .vu-circle svg { width: 22px; height: 22px; } } /* ════════ DESKTOP (≥1024px) — 90% container + zig-zag sections ════════ Container spans 90% of the viewport (5% gutter each side). Sections that hold ONE media block become a two-column row, alternating text↔image down the page. Sections with a collage or an already-horizontal composite stay full width and act as rhythm breaks. Layout only — no markup changes. */ @media (min-width: 1024px) { .vu-scroll { padding-top: 22px; /* the nav is a centred pill at this width, so less bottom clearance */ padding-bottom: calc(var(--uh-nav-height, 86px) + 34px); } .vu-doc { width: 90%; max-width: none; margin: 0 auto; } .vu-sec { margin: 0 0 22px; padding: 48px 46px 54px; border-radius: 28px; } .vu-h1 { font-size: 48px; } .vu-banner { font-size: 42px; } .vu-h2 { font-size: 24px; } .vu-p, .vu-step2 .vu-p { font-size: 17px; line-height: 1.75; } .vu-lead { font-size: 21px; } .vu-strap, .vu-alert p { font-size: 18px; } /* full-bleed children follow the larger card padding */ .vu-hero-mask, .vu-navypanel, .vu-topcap { margin-left: -46px; margin-right: -46px; } .vu-wave, .vu-botcap { margin-left: -46px; margin-right: -46px; } .vu-wavephoto, .vu-photocircles { margin-left: -46px; margin-right: -46px; } .vu-darkpanel { margin: 0 -46px -54px; padding: 34px 46px 38px; } .vu-portrait { margin-right: -46px; } .vu-navypanel { padding: 46px 46px 46px; } /* the sources here are only ~816px wide, the smallest on the page, so the collage is capped to keep them from being scaled up */ .vu-collage3 { height: 360px; max-width: 1180px; margin-inline: auto; } .vu-chip { font-size: 12px; } .vu-chip-icon { width: 34px; height: 34px; } .vu-chip-icon svg { width: 18px; height: 18px; } /* ── zig-zag frame ─────────────────────────────────────────── row-gap stays 0: the media spans many implicit rows, so any gap would be multiplied by every empty row it crosses. */ .vu-sec--1, .vu-sec--2, .vu-sec--3, .vu-sec--5, .vu-sec--6, .vu-sec--7, .vu-sec--8, .vu-sec--10, .vu-sec--11, .vu-sec--13, .vu-sec--14, .vu-sec--15 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 46px; row-gap: 0; align-content: start; } /* text column (default) */ .vu-sec--1 > *, .vu-sec--2 > *, .vu-sec--3 > *, .vu-sec--5 > *, .vu-sec--6 > *, .vu-sec--7 > *, .vu-sec--8 > *, .vu-sec--10 > *, .vu-sec--11 > *, .vu-sec--13 > *, .vu-sec--14 > *, .vu-sec--15 > * { grid-column: 1; min-width: 0; } /* media column — spans the full height of the text beside it */ .vu-sec--1 > figure, .vu-sec--2 > .vu-figwrap, .vu-sec--3 > figure, .vu-sec--5 > .vu-media, .vu-sec--6 > .vu-frame, .vu-sec--7 > .vu-hero-mask, .vu-sec--8 > .vu-card, .vu-sec--10 > .vu-figslab, .vu-sec--11 > figure, .vu-sec--13 > .vu-wavephoto, .vu-sec--14 > .vu-photoribbon, .vu-sec--15 > .vu-photocircles { grid-column: 2; grid-row: 1 / span 30; /* fill the row instead of floating as a short slab in the middle of it; the cap keeps every photo at or below its native height */ align-self: stretch; /* both bounds track the column width, so neither a narrow desktop nor an ultra-wide one squeezes a photo into an extreme crop */ min-height: max(320px, 22vw); max-height: min(620px, 40vw); /* these bleed full-width on mobile — contain them in the column */ margin-left: 0; margin-right: 0; margin-bottom: 0; } /* ── reversed rows: media left, text right ── */ .vu-sec--2 > *, .vu-sec--5 > *, .vu-sec--7 > *, .vu-sec--10 > *, .vu-sec--13 > *, .vu-sec--15 > * { grid-column: 2; } .vu-sec--2 > .vu-figwrap, .vu-sec--5 > .vu-media, .vu-sec--7 > .vu-hero-mask, .vu-sec--10 > .vu-figslab, .vu-sec--13 > .vu-wavephoto, .vu-sec--15 > .vu-photocircles { grid-column: 1; } /* decorative full-bleed strips must cross both columns */ .vu-sec--7 > .vu-wave, .vu-sec--14 > .vu-topcap, .vu-sec--14 > .vu-botcap { grid-column: 1 / -1; margin-left: -46px; margin-right: -46px; } /* dark paragraph panels sit in the text column, so drop their bleed */ .vu-sec--13 > .vu-darkpanel, .vu-sec--15 > .vu-darkpanel { margin: 18px 0 0; padding: 30px 32px 34px; border-radius: 18px; } /* media that was masked/waved full-width needs its own rounding back */ .vu-sec--7 > .vu-hero-mask { border-radius: 22px; } .vu-sec--13 > .vu-wavephoto, .vu-sec--15 > .vu-photocircles { border-radius: 22px; overflow: hidden; } .vu-sec--14 > .vu-photoribbon { margin-bottom: 0; } /* the ribbon overlaps its photo on mobile; in two columns it reads better as a normal heading in the text column */ .vu-sec--14 > .vu-ribbon2 { margin: 0 0 18px; } /* ── let each photo absorb the height of its stretched wrapper ── */ .vu-sec--1 > figure, .vu-sec--2 > .vu-figwrap, .vu-sec--2 > .vu-figwrap > figure, .vu-sec--3 > figure, .vu-sec--6 > .vu-frame, .vu-sec--7 > .vu-hero-mask, .vu-sec--8 > .vu-card, .vu-sec--10 > .vu-figslab, .vu-sec--11 > figure, .vu-sec--14 > .vu-photoribbon { display: flex; flex-direction: column; } .vu-sec--2 > .vu-figwrap > figure { flex: 1 1 0; min-height: 0; } .vu-sec--5 > .vu-media > .vu-media-photo { display: flex; } /* the icon slab takes width off the column, so a full-height stretch would squeeze this wide photo into a near-square box and cut the left student */ /* a definite height (not stretch) so the slab and photo both fill it while the frame stays wide enough to keep all three faces in shot */ .vu-sec--5 > .vu-media { align-self: center; height: min(480px, 31vw); min-height: 0; max-height: none; } .vu-sec--5 > .vu-media > .vu-media-slab { flex: 0 0 90px; } .vu-sec--5 .vu-media-slab svg { width: 42px; height: 42px; } /* sections 5 and 6 no longer share a shoot, so the crop no longer has to be pushed right to tell them apart */ .vu-sec--5 .vu-media-photo img { object-position: 50% 45%; } /* the band is pulled up over the photo on mobile; in two columns it follows the headline instead, so that pull-up clipped the heading */ .vu-sec--5 > .vu-band { margin-top: 0; } /* these two sources are far wider than the rest (roughly 21:10 and 16:6), so a full-height frame would crop them down to a sliver */ .vu-sec--8 > .vu-card { min-height: 0; max-height: min(560px, 36vw); } .vu-sec--10 > .vu-figslab { min-height: 0; max-height: min(340px, 24vw); } .vu-sec--1 > figure > .vu-img, .vu-sec--2 > .vu-figwrap > figure > .vu-img, .vu-sec--3 > figure > .vu-img, .vu-sec--6 > .vu-frame > .vu-img, .vu-sec--7 > .vu-hero-mask > .vu-img, .vu-sec--8 > .vu-card > .vu-card-img, .vu-sec--10 > .vu-figslab > .vu-img, .vu-sec--11 > figure > .vu-img, .vu-sec--14 > .vu-photoribbon > img { flex: 1 1 0; width: 100%; min-height: 0; margin: 0; aspect-ratio: auto; object-fit: cover; } .vu-sec--5 > .vu-media .vu-media-photo > img { height: 100%; aspect-ratio: auto; } /* these butt onto a strip below them on mobile — in a column they need their bottom corners back */ .vu-sec--10 > .vu-figslab > .vu-img, .vu-sec--11 > figure > .vu-img { border-radius: 18px; } /* ── sections 13 and 15 use near 1:2 sources; a wide box threw away two thirds of each photo, so give them a narrow portrait frame instead ── */ .vu-sec--13 > .vu-wavephoto, .vu-sec--15 > .vu-photocircles { align-self: center; justify-self: center; width: 100%; max-width: 460px; min-height: 0; max-height: none; } .vu-sec--13 > .vu-wavephoto > img, .vu-sec--15 > .vu-photocircles > img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } /* ── section 14: the caps cross both columns, so while the photo held rows 1-30 they could not be placed beside it — auto-placement pushed them, the heading and the copy below the picture and emptied the left column ── */ .vu-sec--14 > .vu-photoribbon { grid-row: 2 / span 30; } .vu-sec--14 > .vu-topcap { grid-row: 1; } .vu-sec--14 > .vu-botcap { grid-row: 32; } /* ── section 4: the photo full-bleeds into the panel's right edge so the diagonal meets the navy, and the copy is centred against it instead of stacking at the top over a block of dead navy ── */ .vu-navypanel { display: flex; flex-direction: column; justify-content: center; /* tracks the width so the full-bleed photo keeps roughly its 4:3 shape instead of flattening into a letterbox on wide screens */ min-height: clamp(420px, 30vw, 820px); padding-right: 52%; } .vu-navypanel > *:not(.vu-navypanel-photo) { max-width: 100%; } /* the panel headline is 48px here, so the mobile 13.5px lead read as fine print */ .vu-navypanel .vu-lead { font-size: 20px; margin-bottom: 0; } .vu-navypanel-photo { top: 0; right: 0; bottom: 0; width: 46%; height: auto; aspect-ratio: auto; clip-path: polygon(200px 0, 100% 0, 100% 100%, 0 100%, 0 200px); } /* ── section 9: the mobile 16/11 frame made each half a portrait box fed a landscape photo, cropping away nearly half of it ── */ .vu-split { aspect-ratio: 16 / 7; max-width: 1900px; margin-inline: auto; } .vu-split-half { width: 52%; } .vu-split-half--l { clip-path: polygon(0 0, 100% 0, calc(100% - 96px) 100%, 0 100%); } .vu-split-half--r { clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%); } .vu-split-cap { padding: 44px 12px 20px; } .vu-split-place { font-size: 16px; } .vu-split-dur { font-size: 15px; } .vu-split-badge { width: 96px; height: 96px; border-width: 6px; } .vu-split-badge svg { width: 42px; height: 42px; } /* ── section 18: a 1086x1448 portrait was forced into a 4/3 landscape box and scaled past native size, slicing off the presenter's head ── */ .vu-sec--18 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 46px; row-gap: 0; align-content: start; } .vu-sec--18 > * { grid-column: 1; min-width: 0; } .vu-sec--18 > .vu-portrait { grid-column: 2; grid-row: 1 / span 20; align-self: center; justify-self: end; width: 100%; max-width: 720px; margin: 0; border-radius: 20px; } .vu-sec--18 > .vu-portrait img { aspect-ratio: 3 / 4; object-position: 50% 28%; } /* two columns stretched the last frame across the whole card, scaling it past native size and pushing its tilt over the edge — run all five in a row */ .vu-diag { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .vu-diag > figure:last-child { grid-column: auto; } } /* ════════ ULTRA-WIDE (≥1800px) — keep the measure readable ════════ */ @media (min-width: 1800px) { .vu-sec { padding: 56px 60px 62px; } .vu-h1 { font-size: 56px; } .vu-p, .vu-step2 .vu-p { font-size: 18px; } }