/* ========================================================================== HUNT EDUCATION OVERSEAS — Design System Concept: the boarding pass / departures board. Studying abroad starts as a ticket — this system borrows the material language of air travel (departure boards, perforated stubs, coded labels) to make that literal without leaning on stock photography. Everything is keyed to the logo: the globe's royal-blue west hemisphere, crimson-to-magenta east hemisphere and copper stand supply the palette; the wordmark's geometric caps (Montserrat) and the airy letterspaced tagline supply the two typographic voices used site-wide. Fonts loaded via in each page : Montserrat, Inter. ========================================================================== */ /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; } button { cursor: pointer; background: none; border: none; } /* ---- Tokens --------------------------------------------------------------- */ :root { /* Brand — sampled straight off the logo */ --blue: #1533CB; --blue-bright: #2A4BE8; --blue-dark: #0C2196; --blue-soft: #E3E8FD; --crimson: #D80B41; --crimson-dark: #B00733; --crimson-soft: #FDE3EA; --magenta: #EE1490; --magenta-dark: #C60F76; --copper: #E08A3C; --copper-light: #F5A75C; --copper-dark: #B96D22; --copper-soft: #FDEEDD; /* The logo's own left-to-right sweep, reusable as a fill */ --grad-brand: linear-gradient(100deg, var(--blue) 0%, var(--magenta) 55%, var(--crimson) 100%); --grad-warm: linear-gradient(100deg, var(--copper-light) 0%, var(--magenta) 100%); /* Surfaces — near-black carries a blue cast so it sits under the mark. The --navy-* names are historic; the values are the brand's ink scale. */ --navy-950: #0B0E1F; --navy-900: #121732; --navy-800: #1B2247; --navy-700: #29325F; --navy-line: rgba(255,255,255,0.14); --paper: #F4F6FB; --paper-dim: #E7EBF6; --white: #FFFFFF; --ink: #0F1220; --ink-soft: #565C77; --ink-faint: #888EA8; --line: rgba(15,18,32,0.12); /* Type — Montserrat for the wordmark voice, Inter for reading, Montserrat-tracked-caps for every label (the tagline voice). */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-label: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-mono: var(--font-label); /* legacy alias */ --track-label: 0.18em; --fs-display: clamp(2.4rem, 4.2vw + 1rem, 4.9rem); --fs-h1: clamp(2rem, 2.6vw + 1rem, 3.1rem); --fs-h2: clamp(1.6rem, 1.6vw + 1rem, 2.25rem); --fs-h3: clamp(1.15rem, 0.6vw + 1rem, 1.45rem); --fs-lg: clamp(1.05rem, 0.3vw + 1rem, 1.2rem); /* Shape / elevation */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --shadow-sm: 0 2px 10px rgba(11,14,31,0.07); --shadow-md: 0 14px 34px rgba(11,14,31,0.10); --shadow-lg: 0 28px 64px rgba(11,14,31,0.20); --shadow-brand: 0 14px 30px rgba(216,11,65,0.30); --ease: cubic-bezier(.16,.84,.44,1); --container: 1200px; } /* ---- Base ----------------------------------------------------------------- */ body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; } p { color: var(--ink-soft); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } @media (min-width: 860px) { .container { padding-inline: 40px; } } .section { padding-block: 88px; background: var(--section-bg, var(--paper)); position: relative; } @media (max-width: 640px) { .section { padding-block: 64px; } } .section--navy { --section-bg: var(--navy-950); color: var(--white); } .section--navy p { color: rgba(255,255,255,0.68); } .section--navy h2, .section--navy h3 { color: var(--white); } .section--tight { padding-block: 56px; } .section--white { --section-bg: var(--white); } /* The tagline voice: wide-tracked caps, used for every eyebrow and label. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; } .section--navy .eyebrow { color: var(--copper-light); } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .section-head { max-width: 640px; margin-bottom: 48px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { margin-top: 14px; font-size: var(--fs-lg); } /* ---- Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 15px 28px; border-radius: var(--r-pill); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-position 0.45s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); white-space: nowrap; } .btn:active { transform: scale(0.97); } /* Primary carries the logo's own gradient; hover slides it rather than swapping colour, so the sweep stays legible as the brand's. */ .btn--primary { background-image: var(--grad-brand); background-size: 190% 100%; background-position: 0% 0; color: var(--white); box-shadow: var(--shadow-brand); } .btn--primary:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(216,11,65,0.38); } .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } .section--navy .btn--ghost, .hero .btn--ghost, .pagehead .btn--ghost { color: var(--white); border-color: var(--navy-line); } .section--navy .btn--ghost:hover, .hero .btn--ghost:hover, .pagehead .btn--ghost:hover { border-color: var(--white); color: var(--white); } .btn--sm { padding: 11px 20px; font-size: 0.85rem; } .btn--block { width: 100%; } .btn svg { width: 18px; height: 18px; } /* ---- Navbar ----------------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: 18px; transition: padding 0.35s var(--ease), background 0.35s var(--ease), box-shadow .35s var(--ease); } .nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(244,246,251,0); backdrop-filter: blur(0px); transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease), box-shadow .35s var(--ease); } .nav.is-scrolled { padding-block: 11px; } .nav.is-scrolled::before { background: rgba(244,246,251,0.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); } .nav__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* ---- Brand lockup ------------------------------------------------------------ Mirrors the logo: globe mark, geometric caps wordmark, tracked tagline. Swap assets/img/logo-mark.svg for the master artwork and this still holds. */ .brand { display: flex; align-items: center; gap: 4px; color: var(--ink); } .brand__mark { flex-shrink: 0; width: 38px; height: 38px; } .brand__mark img, .brand__mark svg { width: 100%; height: 100%; object-fit: contain; } .brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; } .brand__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(0.74rem, 2.4vw, 1.02rem); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; } .brand__tag { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; font-size: 0.5rem; letter-spacing: 0.24em; line-height: 1; white-space: nowrap; background: #F06F6A; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @media (max-width: 400px) { .brand__tag { display:inline; } .brand__mark { width: 32px; height: 32px; } } .footer .brand__name { color: var(--white); } .nav__links { display: none; align-items: center; gap: 2px; font-size: 0.82rem; font-weight: 500; } .nav__links a { padding: 9px 11px; border-radius: var(--r-pill); white-space: nowrap; transition: background .2s, color .2s; } @media (min-width: 1280px) { .nav__links { display: flex; } } /* Every page opens with a dark hero/pagehead under the transparent nav, so the bar starts in its light-on-dark state and flips to ink once it fogs over. */ .nav .brand__name { color: var(--white); } .nav .nav__links a { color: rgba(255,255,255,0.74); } .nav .nav__links a:hover, .nav .nav__links a.is-active { background: rgba(255,255,255,0.12); color: var(--white); } .nav .nav__toggle { background: rgba(255,255,255,0.12); color: var(--white); box-shadow: none; } .nav.is-scrolled .brand__name { color: var(--ink); } .nav.is-scrolled .nav__links a { color: var(--ink-soft); } .nav.is-scrolled .nav__links a:hover, .nav.is-scrolled .nav__links a.is-active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } .nav.is-scrolled .nav__toggle { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } .nav__mobile.is-open .brand__name{color:var(--white)} .nav__actions { display: flex; align-items: center; gap: 12px; } .nav__actions .btn--primary { display: none; } @media (min-width: 640px) { .nav__actions .btn--primary { display: inline-flex; } } .nav__toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); } @media (min-width: 1280px) { .nav__toggle { display: none; } } .nav__toggle svg { width: 20px; height: 20px; } .nav__toggle .icon-close { display: none; } .nav__toggle.is-open .icon-open { display: none; } .nav__toggle.is-open .icon-close { display: block; } .nav__mobile { position: fixed; inset: 0; z-index: 99; display: flex; justify-content: flex-end; visibility: hidden; transition: visibility 0s linear 0.42s; } .nav__mobile.is-open { visibility: visible; transition-delay: 0s; } .nav__mobile-backdrop { position: absolute; inset: 0; background: rgba(9, 12, 26, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .nav__mobile.is-open .nav__mobile-backdrop { opacity: 1; } .nav__mobile-panel { position: relative; width: min(86vw, 380px); height: calc(100% - 28px); margin: 14px 14px 14px 0; padding: clamp(16px, 4vw, 22px) clamp(16px, 4vw, 22px) calc(clamp(20px, 5vw, 26px) + env(safe-area-inset-bottom, 0px)); border-radius: 26px; background: rgba(15, 20, 40, 0.68); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 24px 60px rgba(4, 6, 16, 0.4); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateX(28px); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .nav__mobile.is-open .nav__mobile-panel { opacity: 1; transform: translateX(0); } .nav__mobile-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(10px, 3vw, 18px); } .nav__mobile-brand.brand { gap: 8px; } .nav__mobile-brand .brand__mark { width: 28px; height: 28px; } .nav__mobile-brand .brand__name { color: var(--white); font-size: 0.7rem; } .nav__mobile-brand .brand__tag { display: inline; font-size: 0.42rem; } .nav__mobile .brand__name{color:var(--white)} .nav__mobile-close { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); color: var(--white); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); transition: background .2s, transform .2s; } .nav__mobile-close:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); } .nav__mobile-close svg { width: 18px; height: 18px; } .nav__mobile-links { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav__mobile a { opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.35s ease, background .2s, color .2s; } .nav__mobile-links a { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.98rem, 3.6vw, 1.12rem); letter-spacing: -0.01em; color: var(--white); padding: clamp(11px, 3vw, 14px) 4px; } .nav__mobile-links a svg { width: 20px; height: 20px; flex-shrink: 0; color: rgba(255,255,255,0.75); } .nav__mobile-links a:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.10); } .nav__mobile-links a:hover { color: var(--copper-light, #F2C29B); } .nav__mobile.is-open a { opacity: 1; transform: translateX(0); } .nav__mobile.is-open .nav__mobile-links a:nth-child(1) { transition-delay: 0.04s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(2) { transition-delay: 0.08s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(3) { transition-delay: 0.12s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(4) { transition-delay: 0.16s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(5) { transition-delay: 0.20s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(6) { transition-delay: 0.24s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(7) { transition-delay: 0.28s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(8) { transition-delay: 0.32s; } .nav__mobile.is-open .nav__mobile-links a:nth-child(9) { transition-delay: 0.36s; } .nav__mobile.is-open .nav__mobile-cta { transition-delay: 0.40s; } .nav__mobile-cta.btn { flex: 0 0 auto; margin-top: 14px; justify-content: center; } @media (max-height: 700px) { .nav__mobile-head { margin-bottom: 8px; } .nav__mobile-links a { padding: 8px 4px; font-size: 0.96rem; } .nav__mobile-links a svg { width: 18px; height: 18px; } .nav__mobile-cta.btn { margin-top: 10px; padding: 12px 24px; } } @media (max-height: 560px) { .nav__mobile-panel { padding-top: 12px; padding-bottom: 14px; } .nav__mobile-links a { padding: 6px 4px; font-size: 0.9rem; } } /* ---- Ticket card (signature component) -------------------------------------- Two-column stub layout with a dashed perforation + punched notches. Set --section-bg on the parent section so the notches read as real holes. */ .ticket { position: relative; display: flex; background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: visible; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .ticket:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .ticket__stub { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 8px; font-family: var(--font-label); } .ticket__stub-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--blue-soft); display: grid; place-items: center; color: var(--blue-dark); } .ticket__stub-icon svg { width: 20px; height: 20px; } .ticket__stub-code { font-size: 0.6rem; font-weight: 600; letter-spacing: var(--track-label); color: var(--ink-faint); writing-mode: vertical-rl; text-transform: uppercase; } .ticket__perf { flex: 0 0 1px; position: relative; border-left: 2px dashed var(--line); margin-block: 14px; } .ticket__perf::before, .ticket__perf::after { content: ''; position: absolute; left: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--section-bg, var(--paper)); transform: translateX(-50%); } .ticket__perf::before { top: -10px; } .ticket__perf::after { bottom: -10px; } .ticket__body { flex: 1; padding: 24px 24px 24px 22px; min-width: 0; } .ticket__body h3 { margin-bottom: 8px; } .ticket__body p { font-size: 0.94rem; } .ticket--dark { background: var(--navy-800); border-color: var(--navy-line); } .ticket--dark .ticket__stub-icon { background: rgba(255,255,255,0.07); color: var(--copper-light); } .ticket--dark .ticket__stub-code { color: rgba(255,255,255,0.4); } .ticket--dark .ticket__perf { border-color: var(--navy-line); } .ticket--dark .ticket__body h3 { color: var(--white); } .ticket--dark .ticket__body p { color: rgba(255,255,255,0.66); } /* ---- Hero --------------------------------------------------------------- */ .hero { background: var(--navy-950); color: var(--white); padding-top: 148px; padding-bottom: 96px; position: relative; overflow: hidden; isolation: isolate; } /* The logo's three lights, thrown across the dark: blue west, magenta meridian, crimson east. */ .hero::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 78%; z-index: -1; background: radial-gradient(55% 60% at 22% 18%, rgba(21,51,203,0.42), transparent 70%), radial-gradient(45% 55% at 62% 4%, rgba(238,20,144,0.20), transparent 70%), radial-gradient(45% 50% at 92% 14%, rgba(216,11,65,0.24), transparent 70%); } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%); } .hero__grid { display: grid; gap: 56px; align-items: center; } /* The headline column takes the larger share so "Next stop: somewhere beyond borders." sets in three lines rather than four — at four, the primary CTA lands within a few pixels of the fold on a 720px-tall laptop. */ @media (min-width: 980px) { .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: 40px; } } .hero__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); margin-bottom: 22px; } .hero__kicker::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--grad-warm); } .hero h1 { font-size: var(--fs-display); font-weight: 800; margin-bottom: 22px; } .hero h1 em { font-style: normal; background: linear-gradient(96deg, var(--copper-light) 0%, var(--magenta) 72%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero p.lead { font-size: var(--fs-lg); color: rgba(255,255,255,0.7); max-width: 46ch; margin-bottom: 34px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; } .hero__note { font-size: 0.85rem; color: rgba(255,255,255,0.5); } .hero__proof { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--navy-line); } .hero__proof-item { display: flex; flex-direction: column; gap: 4px; } .hero__proof-item strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--white); } .hero__proof-item span { font-size: 0.8rem; color: rgba(255,255,255,0.55); } /* ---- Split-flap departures board (signature element) --------------------- */ .board { background: var(--navy-900); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lg); } .board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px dashed var(--navy-line); font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(255,255,255,0.5); } .board__head .dot-live { display: inline-flex; align-items: center; gap: 7px; color: var(--copper-light); white-space: nowrap; } .board__head .dot-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--copper-light); animation: pulse 1.6s infinite; } .board__cols { display: grid; grid-template-columns: 1.4fr 1.8fr 1fr; gap: 10px; padding: 0 14px 10px; font-family: var(--font-label); font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: rgba(255,255,255,0.35); } .board__rows { display: flex; flex-direction: column; gap: 6px; perspective: 800px; } .flap-row { display: grid; grid-template-columns: 1.4fr 1.8fr 1fr; gap: 10px; align-items: center; background: var(--navy-800); border-radius: var(--r-sm); padding: 14px; } .flap-row__route { font-family: var(--font-label); font-weight: 700; color: var(--copper-light); font-size: 0.85rem; letter-spacing: 0.06em; } .flap-row__dest { position: relative; height: 1.35em; overflow: hidden; } .flap-row__dest span { display: block; font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: 0.95rem; transform-origin: 50% 100%; backface-visibility: hidden; } .flap-row__dest span.is-leaving { animation: flapOut 0.5s var(--ease) forwards; } .flap-row__dest span.is-entering { animation: flapIn 0.5s var(--ease) forwards; } .flap-row__status { font-family: var(--font-label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: right; } .flap-row__status.is-open { color: #5FD98C; } /* Below ~480px the 3-column layout leaves too little room for destination names ("United Kingdom") and cycled alt-text ("Co-op + PR pathway") before the flip animation's overflow:hidden clips them — drop status, widen dest. */ @media (max-width: 480px) { .board__cols { grid-template-columns: auto 1fr; } .board__cols span:last-child { display: none; } .flap-row { grid-template-columns: auto 1fr; } .flap-row__status { display: none; } .flap-row__dest span { font-size: 0.85rem; } } @keyframes flapOut { 0% { transform: rotateX(0deg); opacity: 1; } 100% { transform: rotateX(-90deg); opacity: 0; } } @keyframes flapIn { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---- Marquee ------------------------------------------------------------ */ .marquee { border-block: 1px solid var(--line); overflow: hidden; background: var(--white); } .marquee__track { display: flex; width: max-content; gap: 48px; padding-block: 18px; animation: marquee 32s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .marquee__item svg { width: 16px; height: 16px; color: var(--crimson); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- Process rail (boarding-pass stages) --------------------------------- */ .process { display: grid; gap: 16px; } @media (min-width: 780px) { .process { grid-template-columns: repeat(5, 1fr); gap: 0; } } .stage { position: relative; padding: 28px 20px 20px; } @media (min-width: 780px) { .stage { border-top: 2px solid var(--navy-line); } .stage::before { content: ''; position: absolute; top: -6px; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--copper-light); } } .stage__code { font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); display: block; margin-bottom: 10px; } .stage h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 8px; } .stage p { font-size: 0.88rem; color: rgba(255,255,255,0.6); } /* ---- Grids ---------------------------------------------------------------- */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(1, 1fr); } .grid--3 { grid-template-columns: repeat(1, 1fr); } .grid--4 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 600px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ---- Destination card ------------------------------------------------------ */ .dest { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-950); color: var(--white); padding: 26px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.4s var(--ease), box-shadow .4s var(--ease); cursor: pointer; width: 100%; text-align: left; font: inherit; -webkit-appearance: none; appearance: none; } .dest.is-active { box-shadow: 0 0 0 3px var(--magenta), 0 0 28px rgba(238,20,144,0.35); } .dest.is-active .dest__chevron { background: var(--magenta); } .dest:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .dest::before { content: ''; position: absolute; inset: 0; opacity: 0.9; background: var(--dest-grad, linear-gradient(160deg, var(--navy-800), var(--navy-950))); } .dest > * { position: relative; z-index: 1; } .dest__top { display: flex; align-items: flex-start; justify-content: space-between; } .dest__flag { font-size: 1.8rem; line-height: 1; } .dest__code { font-family: var(--font-label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); border: 1px solid var(--navy-line); border-radius: var(--r-pill); padding: 5px 11px; } .dest h3 { font-size: 1.35rem; margin-top: 18px; } .dest__meta { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-top: 6px; } .dest__chevron { position: absolute; bottom: 22px; right: 22px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; transition: background .3s, transform .3s; } .dest:hover .dest__chevron { background: var(--magenta); transform: rotate(45deg); } .dest__chevron svg { width: 16px; height: 16px; } .dest-detail__grid { display: grid; gap: 24px; } @media (min-width: 720px) { .dest-detail__grid { grid-template-columns: repeat(3, 1fr); } } .dest-detail h4 { font-family: var(--font-label); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--crimson); margin-bottom: 12px; } .dest-detail ul { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); } .dest-detail__note { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 0.8rem; color: var(--ink-faint); display: flex; gap: 8px; } .dest-detail__note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--crimson); } /* ---- Destination modal ------------------------------------------------------ Independent fixed overlay layer — deliberately outside #destGrid so opening a country's detail can never reflow or reorder the card grid behind it. */ .dest-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 15, 40, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s; } .dest-modal-overlay.is-open { opacity: 1; visibility: visible; } .dest-modal-overlay[hidden] { display: flex; } .dest-modal { position: relative; width: min(82vw, 960px); max-height: 88vh; overflow-y: auto; background: #FFFDF9; border-radius: 28px; padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 44px) clamp(24px, 3vw, 32px); box-shadow: 0 30px 80px rgba(11,14,31,0.25), 0 0 0 1px rgba(238,20,144,0.06), 0 0 50px rgba(238,20,144,0.10); opacity: 0; transform: scale(0.96); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .dest-modal-overlay.is-open .dest-modal { opacity: 1; transform: scale(1); } .dest-modal__handle { display: none; } .dest-modal__close { position: absolute; top: clamp(20px, 3vw, 28px); right: clamp(20px, 3vw, 28px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); transition: background .2s, color .2s, transform .2s; } .dest-modal__close:hover { background: var(--crimson-soft); color: var(--crimson); transform: scale(1.05); } .dest-modal__close svg { width: 17px; height: 17px; } .dest-modal__head { display: flex; align-items: center; gap: 16px; padding-right: 48px; margin-bottom: clamp(20px, 3vw, 28px); } .dest-modal__flag { font-size: 2.6rem; line-height: 1; } .dest-modal__head h2 { font-size: 1.7rem; } .dest-modal__tagline { color: var(--crimson); font-weight: 600; font-size: 0.92rem; margin-top: 4px; } .dest-modal__body .dest-detail__grid { margin-bottom: 0; } .dest-modal__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .dest-modal__navbtn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); padding: 10px 14px; border-radius: var(--r-pill); transition: background .2s, color .2s; } .dest-modal__navbtn:hover { background: var(--paper-dim); color: var(--ink); } .dest-modal__navbtn svg { width: 14px; height: 14px; } .dest-modal__count { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-faint); white-space: nowrap; } @media (max-width: 767px) { .dest-modal-overlay { align-items: flex-end; padding: 0; } .dest-modal { width: 100%; max-width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0; padding: 14px 22px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(28px); } .dest-modal-overlay.is-open .dest-modal { transform: translateY(0); } .dest-modal__handle { display: block; width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line); margin: 0 auto 14px; } .dest-modal__close { top: 14px; right: 16px; } .dest-modal__head { padding-right: 44px; margin-bottom: 18px; } .dest-modal__flag { font-size: 2.1rem; } .dest-modal__head h2 { font-size: 1.4rem; } } /* ---- Chips / institutions -------------------------------------------------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 500; box-shadow: var(--shadow-sm); } .chip strong { font-family: var(--font-display); font-weight: 700; } .chip__flag { font-size: 1.1rem; } /* ---- Stat strip ------------------------------------------------------------ */ .statline { display: flex; flex-wrap: wrap; gap: 14px 40px; } .statline__item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); } .statline__item svg { width: 18px; height: 18px; color: var(--crimson); flex-shrink: 0; } /* ---- Testimonials ----------------------------------------------------------- */ .quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; } .quote__stars { display: flex; gap: 3px; color: var(--copper); margin-bottom: 16px; } .quote__stars svg { width: 15px; height: 15px; } .quote p.quote__text { color: var(--ink); font-size: 1rem; flex: 1; margin-bottom: 20px; } .quote__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--white); flex-shrink: 0; } .quote__by-name { font-weight: 600; font-size: 0.9rem; } .quote__by-meta { font-size: 0.72rem; font-family: var(--font-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* ---- FAQ --------------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--line); } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; text-align: left; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; } .faq-trigger__icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.3s var(--ease), background .3s, border-color .3s, color .3s; } .faq-trigger__icon svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); } .faq-item.is-open .faq-trigger__icon { background: var(--blue); border-color: var(--blue); color: var(--white); } .faq-item.is-open .faq-trigger__icon svg { transform: rotate(45deg); } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); } .faq-panel__inner { padding: 0 4px 22px; max-width: 68ch; font-size: 0.95rem; color: var(--ink-soft); } /* ---- Forms ------------------------------------------------------------------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; color: var(--ink); } .field .hint { font-weight: 400; color: var(--ink-faint); } .field input, .field textarea, .field select { width: 100%; padding: 15px 18px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--white); font-size: 0.95rem; line-height: 1.4; transition: border-color 0.2s, box-shadow 0.2s; } /* Native selects draw their own arrow at their own inset, so a row of inputs and selects never lines up and the arrow sits tighter to the edge than the text does. Draw our own chevron at exactly the same 18px inset as the text, and reserve room so a long value can't run underneath it. */ .field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 42px; 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='%23888EA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 14px; } .field select::-ms-expand { display: none; } /* An unchosen select should read like a placeholder, not like an answer. */ .field select:has(option[value=""]:checked) { color: var(--ink-faint); } .field select option { color: var(--ink); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field textarea { padding-block: 14px; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); outline: none; } .field textarea { resize: vertical; min-height: 110px; } .field-row { display: grid; gap: 18px; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .check-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; } .check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; } .check-row label { font-size: 0.84rem; color: var(--ink-soft); font-weight: 400; } .form-success { display: none; text-align: center; padding: 40px 20px; } .form-success.is-visible { display: block; } .form-success__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; margin: 0 auto 20px; } .form-success__icon svg { width: 26px; height: 26px; } /* ---- Footer ------------------------------------------------------------------- */ .footer { position: relative; background: var(--navy-950); color: rgba(255,255,255,0.65); padding-top: 88px; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24px; transform: translateY(-50%); background-image: radial-gradient(circle at 12px 12px, var(--navy-950) 12px, transparent 13px); background-size: 24px 24px; background-repeat: repeat-x; background-position: center; } .footer__grid { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--navy-line); } @media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; } } .footer__brand p { margin-top: 16px; max-width: 32ch; font-size: 0.9rem; } .footer h4 { font-family: var(--font-label); font-size: 0.64rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 16px; } .footer ul { display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; } .footer ul a:hover { color: var(--white); } .footer__base { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-block: 26px; font-size: 0.8rem; } .footer__socials { display: flex; gap: 10px; } .footer__socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--navy-line); display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; } .footer__socials a:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white); } .footer__socials svg { width: 16px; height: 16px; } /* ---- WhatsApp FAB --------------------------------------------------------------- */ .fab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .fab { display: flex; align-items: center; gap: 10px; background: #25D366; color: #0B3B22; font-weight: 700; font-size: 0.9rem; padding: 14px 18px; border-radius: var(--r-pill); box-shadow: 0 14px 30px rgba(37,211,102,0.4); transition: transform 0.25s var(--ease); } .fab:hover { transform: translateY(-3px) scale(1.02); } .fab svg { width: 20px; height: 20px; } /* Icon-only on narrow screens — the full pill can sit directly over a full-width primary CTA (e.g. the contact form submit button). */ @media (max-width: 600px) { .fab-wrap { right: 16px; bottom: 16px; } .fab { padding: 14px; width: 48px; height: 48px; } .fab span { display: none; } } /* ---- Reveal on scroll ------------------------------------------------------------ Gated behind html.js (set synchronously in ) so content stays visible by default when JS is blocked, slow, or absent — e.g. crawlers, no-JS. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .js .reveal-stagger.is-visible > * { animation: fadeUp 0.6s var(--ease) both; } .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0s; } .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; } .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; } .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; } .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.32s; } .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.4s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---- Page header (inner pages) --------------------------------------------------- */ .pagehead { background: var(--navy-950); color: var(--white); padding-top: 152px; padding-bottom: 72px; position: relative; overflow: hidden; } .pagehead::before { content: ''; position: absolute; inset: -30% -10% auto -10%; height: 80%; background: radial-gradient(50% 50% at 18% 18%, rgba(21,51,203,0.40), transparent 70%), radial-gradient(45% 50% at 68% 0%, rgba(238,20,144,0.18), transparent 70%), radial-gradient(45% 50% at 95% 10%, rgba(216,11,65,0.20), transparent 70%); } .pagehead > .container { position: relative; } .pagehead h1 { font-size: var(--fs-h1); font-weight: 800; max-width: 18ch; } .pagehead p.lead { margin-top: 16px; font-size: var(--fs-lg); color: rgba(255,255,255,0.68); max-width: 56ch; } .crumb { font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px; display: flex; gap: 10px; align-items: center; } .crumb a:hover { color: var(--white); } /* ---- Check list (services "what's included") ------------------------------------- */ .check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; } .check-list svg { width: 16px; height: 16px; color: var(--crimson); flex-shrink: 0; margin-top: 3px; } .ticket--wide .ticket__body { padding-block: 30px; } .ticket--wide .ticket__body p { font-size: 0.96rem; } /* ---- Skip link -------------------------------------------------------------------- */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: var(--white); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; z-index: 200; } .skip-link:focus { left: 0; } /* ---- Misc utilities --------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; } .max-w-prose { max-width: 62ch; } /* align-self keeps the pill shrink-wrapped inside column-flex parents (.quote). */ .tag { display: inline-flex; align-items: center; align-self: flex-start; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); background: var(--crimson-soft); color: var(--crimson-dark); font-weight: 600; } .divider-dashed { border: none; border-top: 1px dashed var(--line); margin-block: 48px; } /* ========================================================================== PLATFORM LAYER — added when Hunt widened from "study abroad consultancy" to an international-mobility platform. Same airport language throughout: each service is a route on the board, live ones are boarding, the rest are scheduled. ========================================================================== */ /* ---- Nav: wider row so nine routes + brand + CTA fit without crushing ----- */ .nav .container { max-width: 1360px; } /* ---- Status badge (Boarding now / Scheduled) ------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-label); font-size: 0.58rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge--live { background: rgba(37,170,105,0.12); color: #1B7A4B; } .badge--live::before { animation: pulse 1.8s infinite; } .badge--soon { background: var(--copper-soft); color: var(--copper-dark); } .section--navy .badge--live, .dest .badge--live { background: rgba(95,217,140,0.14); color: #5FD98C; } .section--navy .badge--soon, .dest .badge--soon { background: rgba(245,167,92,0.16); color: var(--copper-light); } /* ---- Vertical card — one per service line on the platform ----------------- */ .vertical { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; height: 100%; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } a.vertical:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; } .vertical__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .vertical__icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--blue-soft); color: var(--blue-dark); display: grid; place-items: center; flex-shrink: 0; } .vertical__icon svg { width: 21px; height: 21px; } .vertical--soon .vertical__icon { background: var(--copper-soft); color: var(--copper-dark); } .vertical h3 { font-size: 1.12rem; } .vertical p { font-size: 0.92rem; } .vertical__more { margin-top: auto; padding-top: 6px; font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--crimson); display: inline-flex; align-items: center; gap: 7px; } .vertical__more svg { width: 13px; height: 13px; transition: transform .3s var(--ease); } a.vertical:hover .vertical__more svg { transform: translateX(4px); } .vertical--soon .vertical__more { color: var(--copper-dark); } /* ---- Coming-soon board --------------------------------------------------- A departures row that hasn't been called yet: the gate exists, the time doesn't. Keeps the promise honest without looking unfinished. */ .soon-panel { background: var(--navy-900); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-lg); } .soon-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px dashed var(--navy-line); } .soon-panel__head h2 { font-size: 1.5rem; color: var(--white); } .soon-list { display: grid; gap: 12px; } @media (min-width: 700px) { .soon-list { grid-template-columns: 1fr 1fr; } } .soon-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.93rem; color: rgba(255,255,255,0.72); } .soon-list svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--copper-light); } /* ---- Counsellor card + profile ------------------------------------------- Built as a repeatable unit from day one — adding counsellor #2 is a new .counsellor block, not a redesign. */ .counsellor { display: grid; gap: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); } @media (min-width: 800px) { .counsellor { grid-template-columns: 260px 1fr; gap: 36px; align-items: start; } .counsellor__photo { max-width: none; } } .counsellor__photo { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; /* Stacked on mobile a full-width 4:5 block is a huge slab of empty space, especially while the initials placeholder is still standing in. */ max-width: 260px; background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); display: grid; place-items: center; } .counsellor__photo img { width: 100%; height: 100%; object-fit: cover; } .counsellor__photo-fallback { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; color: rgba(255,255,255,0.22); letter-spacing: 0.02em; } .counsellor__role { font-family: var(--font-label); font-size: 0.64rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--crimson); margin-bottom: 8px; } .counsellor h2, .counsellor h3 { font-size: 1.7rem; margin-bottom: 12px; } .counsellor > div > p + p { margin-top: 14px; } .counsellor__meta { display: grid; gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--line); } @media (min-width: 620px) { .counsellor__meta { grid-template-columns: 1fr 1fr; } } .counsellor__meta h4 { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } .counsellor__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ---- Booking ------------------------------------------------------------- */ /* The booking card is the page's primary action, so it lifts up over the pagehead's lower edge instead of butting flush against the colour change — flush reads as a rendering bug. The pagehead carries extra bottom padding so the overlap can never reach the lead paragraph. */ .booking { position: relative; z-index: 2; margin-top: -72px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-lg); overflow: hidden; } @media (max-width: 700px) { .booking { margin-top: -56px; } } .booking iframe { width: 100%; min-height: 720px; border: 0; border-radius: var(--r-md); display: block; } .booking__fallback { padding: 44px 28px; text-align: center; } .booking__fallback h3 { margin-bottom: 10px; } .booking__fallback p { max-width: 46ch; margin-inline: auto; margin-bottom: 22px; } .booking-steps { display: grid; gap: 14px; counter-reset: step; } @media (min-width: 780px) { .booking-steps { grid-template-columns: repeat(3, 1fr); } } .booking-steps li { position: relative; padding: 20px 20px 20px 56px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 0.92rem; color: var(--ink-soft); } .booking-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font-family: var(--font-label); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--crimson); } .booking-steps strong { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 0.98rem; } /* ---- Notice / disclaimer ------------------------------------------------- Regulatory honesty, styled as an airline advisory rather than fine print nobody reads. */ .notice { display: flex; gap: 14px; align-items: flex-start; background: var(--copper-soft); border: 1px solid rgba(224,138,60,0.32); border-radius: var(--r-md); padding: 18px 20px; } .notice svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--copper-dark); } .notice p { font-size: 0.88rem; color: #7A4A14; margin: 0; } .notice strong { color: #5E3608; } .notice--dark { background: rgba(245,167,92,0.10); border-color: rgba(245,167,92,0.28); } .notice--dark svg { color: var(--copper-light); } .notice--dark p { color: rgba(255,255,255,0.74); } .notice--dark strong { color: var(--copper-light); } /* ---- Prose (legal + long-form) -------------------------------------------- */ .prose { max-width: 74ch; } .prose h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 12px; } .prose h3 { font-size: 1.08rem; margin-top: 26px; margin-bottom: 8px; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin-bottom: 14px; font-size: 0.96rem; } .prose ul { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .prose ul li { position: relative; padding-left: 20px; font-size: 0.96rem; color: var(--ink-soft); } .prose ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); } .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .prose__updated { font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 28px; } /* ---- 404 ------------------------------------------------------------------ */ .lost { min-height: 78vh; display: grid; place-items: center; text-align: center; padding-top: 140px; padding-bottom: 80px; } .lost__code { font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); margin-bottom: 18px; } .lost h1 { font-size: var(--fs-h1); color: var(--white); margin-bottom: 14px; } .lost p { max-width: 48ch; margin-inline: auto; margin-bottom: 30px; } .lost__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ---- Misc ----------------------------------------------------------------- */ .stack-sm > * + * { margin-top: 12px; } .stack-md > * + * { margin-top: 24px; } .muted { color: var(--ink-faint); font-size: 0.85rem; } .section--navy .muted { color: rgba(255,255,255,0.45); } /* Button pairs that must wrap cleanly on narrow screens. */ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row--center { justify-content: center; } /* The ticket stub is sized for 2- and 3-up grids. At 4-up it eats most of the card and the body text ends up 2 words wide — so shrink the stub and drop the vertical code, which is decorative rather than load-bearing. */ .grid--4 .ticket__stub { flex: 0 0 56px; padding: 18px 6px; gap: 0; } .grid--4 .ticket__stub-icon { width: 34px; height: 34px; } .grid--4 .ticket__stub-icon svg { width: 17px; height: 17px; } .grid--4 .ticket__stub-code { display: none; } .grid--4 .ticket__body { padding: 20px 20px 20px 18px; } .grid--4 .ticket__body h3 { font-size: 1.02rem; } .grid--4 .ticket__body p { font-size: 0.88rem; } /* Long CTA labels ("Talk to a counsellor about the United Kingdom") are wider than a 375px screen. Let them wrap rather than push the page sideways. */ @media (max-width: 620px) { .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; } } /* Long unbroken strings (the email address, policy links) must not push a narrow phone layout sideways. */ .footer ul li, .footer ul a, .prose a, .prose li, .check-list a { overflow-wrap: anywhere; } /* When two sections share a background they read as one continuous surface, so 88px of bottom padding meeting 88px of top padding stacks into 176px of dead air at an invisible seam. Between different backgrounds the colour change justifies that space; here it just looks like a gap. Collapse to one unit. */ .section--white + .section--white, .section--navy + .section--navy { padding-top: 0; }