:root { --primary-blue: #0067f3; --bg-white: #fdfdfd; --accent-yellow: #f3e139; --text-black: #111111; --muted-text: #5b6474; --surface: #f4f8ff; --surface-alt: #edf2fa; --section-eyebrow-size: 0.74rem; --section-eyebrow-line-height: 1.1; --section-eyebrow-letter-spacing: 0.22em; --section-eyebrow-letter-spacing-tight: 0.1em; --section-eyebrow-color: #2b6fd2; --section-title-size: clamp(2rem, 3.2vw, 2.5rem); --section-title-line-height: 1.15; --section-title-letter-spacing: -0.02em; --section-title-color: #132545; --section-title-weight: 800; --brand-premium-gradient: radial-gradient(circle at 0% 0%, #0a3c8372, transparent 28%), radial-gradient( circle at 100% 100%, rgba(255, 255, 255, 0.2), transparent 30% ), linear-gradient(140deg, #0b53ba, #0067f3 56%, #0d8eff 100%); --shadow-soft: 0 12px 32px rgba(8, 30, 66, 0.08); --shadow-hover: 0 18px 44px rgba(0, 80, 196, 0.16); --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --transition-fast: 220ms ease; --transition-mid: 280ms ease; /* Card design tokens — single source of truth for all card components */ --card-bg: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%); --card-border: 1px solid rgba(0, 103, 243, 0.12); --card-border-hover: rgba(0, 103, 243, 0.28); --card-radius: 24px; --card-shadow: 0 16px 38px rgba(8, 30, 66, 0.09); --card-shadow-hover: 0 24px 52px rgba(0, 80, 196, 0.14); /* Shared page background — applied to all inner pages */ --page-bg: radial-gradient( circle at 10% -10%, rgba(0, 103, 243, 0.13), transparent 34% ), radial-gradient( circle at 94% 14%, rgba(243, 225, 57, 0.15), transparent 25% ), linear-gradient(180deg, #f8fbff 0%, #fdfdfd 52%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: radial-gradient( circle at 12% 0%, #eaf2ff 0%, #f7f9fe 18%, var(--bg-white) 48% ); color: var(--text-black); line-height: 1.6; overflow-x: clip; } body.notice-open { overflow: hidden; } /* Scroll lock while mobile nav is open — set on to leave body sticky intact */ html.mob-nav-open { overflow: hidden; } html.mob-nav-open .mobile-menu { touch-action: none; } body.page-home { background: radial-gradient( circle at 12% 0%, #eaf2ff 0%, #f7f9fe 18%, var(--bg-white) 48% ); } body.page-about, body.page-pathways, body.page-destinations, body.page-contact, body.page-activities, body.page-leadership, body.page-blog, body.explore-page, body.page-error { background: var(--page-bg); } body.page-pathways { overflow-x: clip; } .page-error .error-main { min-height: calc(100vh - 260px); display: grid; place-items: center; padding: 72px 0 88px; } .page-error .error-shell { width: min(840px, 100%); background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: clamp(28px, 4.5vw, 54px); } .page-error .error-code { margin: 0 0 10px; font-size: clamp(2.8rem, 8vw, 5.2rem); font-weight: 800; line-height: 0.95; letter-spacing: 0.03em; color: transparent; background: linear-gradient(130deg, #0b53ba 0%, #0d8eff 55%, #2f77e0 100%); -webkit-background-clip: text; background-clip: text; } .page-error .error-title { margin: 0; max-width: 640px; font-size: clamp(1.65rem, 3.5vw, 2.35rem); color: #132545; } .page-error .error-copy { margin: 16px 0 0; max-width: 680px; color: #4f5e78; } .page-error .error-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } .page-error .error-button, .page-error .error-link { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 999px; font-size: 0.93rem; font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .page-error .error-button { color: #fff; background: linear-gradient(145deg, #0067f3, #1f88ff); box-shadow: 0 12px 22px rgba(0, 103, 243, 0.24); } .page-error .error-link { color: #0d4ea9; border: 1px solid rgba(13, 78, 169, 0.28); background: rgba(255, 255, 255, 0.78); } .page-error .error-button:hover, .page-error .error-link:hover { transform: translateY(-1px); } .page-error .error-button:hover { box-shadow: 0 14px 26px rgba(0, 103, 243, 0.3); } .page-error .error-link:hover { border-color: rgba(13, 78, 169, 0.55); color: #0b3f88; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; height: auto; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .eyebrow { letter-spacing: var(--section-eyebrow-letter-spacing); line-height: var(--section-eyebrow-line-height); font-size: var(--section-eyebrow-size); text-transform: uppercase; color: var(--section-eyebrow-color); font-weight: 600; margin-bottom: 10px; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; } p { margin: 0; color: var(--muted-text); } .centered-head { text-align: center; margin-inline: auto; } .brand-gradient-text { color: transparent; background: var(--brand-premium-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body main > section:not(.hero) { background-color: var(--surface); } h2 { font-size: var(--section-title-size); line-height: var(--section-title-line-height); letter-spacing: var(--section-title-letter-spacing); color: var(--section-title-color); font-weight: var(--section-title-weight); } .eyebrow-tight { letter-spacing: var(--section-eyebrow-letter-spacing-tight); margin-bottom: 8px; } .eyebrow-tight-sm { letter-spacing: var(--section-eyebrow-letter-spacing-tight); margin-bottom: 6px; } .eyebrow-light { color: #fff; opacity: 0.86; } .copy-top-8 { margin-top: 8px; } .copy-top-10 { margin-top: 10px; } .copy-top-12 { margin-top: 12px; } .copy-top-14 { margin-top: 14px; } .copy-centered { max-width: 760px; margin: 0 auto; } .copy-max-700 { max-width: 700px; } .head-wide { max-width: none; margin-bottom: 0; } .site-notice[hidden] { display: none; } .site-notice { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(10, 21, 44, 0.56); backdrop-filter: blur(10px); } .site-notice-panel { width: min(100%, 640px); border-radius: var(--card-radius); padding: 28px; background: radial-gradient( circle at 100% 0%, rgba(243, 225, 57, 0.16), transparent 28% ), var(--card-bg); border: var(--card-border); box-shadow: 0 28px 60px rgba(8, 30, 66, 0.24); } .site-notice-panel h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 12px; } .site-notice-panel p + p { margin-top: 10px; } .site-notice-actions { margin-top: 24px; display: flex; justify-content: flex-end; } .site-notice-button { border: none; border-radius: 999px; padding: 12px 20px; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--primary-blue), #0a84ff); box-shadow: 0 14px 24px rgba(0, 103, 243, 0.24); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .site-notice-button:hover { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(0, 103, 243, 0.3); } .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(253, 253, 253, 0.88); border-bottom: 1px solid rgba(17, 17, 17, 0.08); } .nav-wrap { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 10px; } .brand-logo { width: auto; height: 34px; object-fit: contain; flex: 0 0 auto; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: #30384a; position: relative; transition: color var(--transition-fast); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--primary-blue); transition: width var(--transition-fast); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--primary-blue); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-links a.nav-contact-pill { padding: 8px 14px; border-radius: 999px; color: #fff; font-weight: 700; background: linear-gradient(145deg, #0067f3, #1f88ff); box-shadow: 0 8px 18px rgba(0, 103, 243, 0.22); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .nav-links a.nav-contact-pill::after { display: none; } .nav-links a.nav-contact-pill:hover, .nav-links a.nav-contact-pill:focus-visible { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0, 103, 243, 0.28); filter: saturate(1.05); } .nav-group { position: relative; } .nav-dropdown, .nav-submenu { position: absolute; top: calc(100% + 9px); left: 0; min-width: 250px; padding: 8px; border-radius: 14px; border: 1px solid rgba(0, 103, 243, 0.2); background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 20; } .nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown, .submenu-group:hover > .nav-submenu, .submenu-group:focus-within > .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a, .nav-submenu a, .submenu-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; color: #34405c; padding: 8px 10px; border-radius: 9px; } .nav-dropdown a::after, .nav-submenu a::after, .submenu-trigger::after { display: none; } .nav-dropdown a:hover, .nav-submenu a:hover, .submenu-trigger:hover { background: rgba(0, 103, 243, 0.09); color: var(--primary-blue); } .submenu-group { position: relative; } .nav-submenu { left: calc(100% + 8px); top: -8px; min-width: 210px; } /* ── Hamburger button ─────────────────────────────────── */ .menu-btn { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: 8px; flex-shrink: 0; transition: background 200ms; } .menu-btn:hover { background: rgba(0, 103, 243, 0.06); } .ham-bar { display: block; width: 22px; height: 2px; background: var(--text-black, #111827); border-radius: 2px; transform-origin: center; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, width 200ms ease; } .menu-btn[aria-expanded="true"] .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn[aria-expanded="true"] .ham-bar:nth-child(2) { opacity: 0; width: 0; } .menu-btn[aria-expanded="true"] .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile nav overlay ───────────────────────────────── */ .mobile-menu { position: fixed; inset: 0; z-index: 998; background: rgba(8, 16, 40, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 340ms cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu.open { opacity: 1; pointer-events: auto; } /* ── Drawer panel ─────────────────────────────────────── */ .mob-inner { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #fff; display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(8, 16, 40, 0.18); transform: translateX(100%); transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu.open .mob-inner { transform: translateX(0); } /* ── Drawer header ────────────────────────────────────── */ .mob-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); flex-shrink: 0; } .mob-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .mob-brand .brand-logo { width: 30px; height: 30px; object-fit: contain; } .mob-brand span { font-size: 0.85rem; font-weight: 700; color: var(--text-black, #111827); line-height: 1.2; letter-spacing: -0.01em; } .mob-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.06); border: none; border-radius: 8px; cursor: pointer; color: #555; flex-shrink: 0; transition: background 180ms, color 180ms; } .mob-close:hover { background: rgba(0, 0, 0, 0.1); color: #111; } /* ── Nav list ─────────────────────────────────────────── */ .mob-nav { flex: 1; padding: 10px 0 16px; display: flex; flex-direction: column; } .mob-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 20px; font-size: 0.97rem; font-weight: 600; color: #1a2642; text-decoration: none; background: transparent; border: none; font-family: inherit; cursor: pointer; text-align: left; letter-spacing: -0.01em; transition: background 160ms, color 160ms; } .mob-link:hover, .mob-trigger[aria-expanded="true"] { background: rgba(0, 103, 243, 0.05); color: var(--primary-blue, #0067f3); } .mob-chevron { flex-shrink: 0; color: #9aacbf; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms; } .mob-trigger[aria-expanded="true"] .mob-chevron { transform: rotate(180deg); color: var(--primary-blue, #0067f3); } /* ── Sub-menu accordion ───────────────────────────────── */ .mob-sub { overflow: hidden; max-height: 0; transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1); background: rgba(0, 103, 243, 0.025); border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .mob-sub.is-open { max-height: 400px; border-color: rgba(0, 0, 0, 0.05); } .mob-sub-link { display: flex; align-items: center; gap: 8px; padding: 11px 20px 11px 32px; font-size: 0.88rem; font-weight: 500; color: #4a5a7a; text-decoration: none; transition: color 160ms, background 160ms; } .mob-sub-link::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.45; flex-shrink: 0; } .mob-sub-link:hover { color: var(--primary-blue, #0067f3); background: rgba(0, 103, 243, 0.06); } /* ── Stagger-in animation for nav items ───────────────── */ .mob-nav > * { opacity: 0; transform: translateX(18px); transition: opacity 0ms, transform 0ms; } .mobile-menu.open .mob-nav > *:nth-child(1) { opacity: 1; transform: none; transition: opacity 300ms 110ms ease-out, transform 300ms 110ms ease-out; } .mobile-menu.open .mob-nav > *:nth-child(2) { opacity: 1; transform: none; transition: opacity 300ms 165ms ease-out, transform 300ms 165ms ease-out; } .mobile-menu.open .mob-nav > *:nth-child(3) { opacity: 1; transform: none; transition: opacity 300ms 220ms ease-out, transform 300ms 220ms ease-out; } .mobile-menu.open .mob-nav > *:nth-child(4) { opacity: 1; transform: none; transition: opacity 300ms 275ms ease-out, transform 300ms 275ms ease-out; } .mobile-menu.open .mob-nav > *:nth-child(5) { opacity: 1; transform: none; transition: opacity 300ms 330ms ease-out, transform 300ms 330ms ease-out; } /* ── Footer CTA ───────────────────────────────────────── */ .mob-footer { padding: 18px 20px 24px; border-top: 1px solid rgba(0, 0, 0, 0.07); flex-shrink: 0; } .mob-cta { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--primary-blue, #0067f3); color: #fff; padding: 13px 20px; border-radius: 10px; font-weight: 700; font-size: 0.93rem; text-decoration: none; letter-spacing: -0.01em; transition: opacity 200ms, transform 200ms; } .mob-cta:hover { opacity: 0.88; transform: translateY(-1px); } .mob-cta::after { content: "→"; font-size: 1em; } .site-footer { text-align: center; padding: 20px 0 20px; color: #65718a; font-size: 0.88rem; border-top: 1px solid rgba(17, 17, 17, 0.08); } .site-footer > p { margin: 0; } .site-footer .container { display: grid; gap: 18px; } .site-footer-card { width: 100%; margin: 0 auto; padding: 34px 28px; text-align: center; border-radius: 24px; background: var(--brand-premium-gradient); box-shadow: 0 24px 40px rgba(0, 103, 243, 0.22); } .site-footer .site-footer-card h2, .site-footer .site-footer-card p { color: #fff; } .site-footer-card h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } .site-footer-card > p:not(.eyebrow) { max-width: 680px; margin: 14px auto 0; opacity: 0.9; } .site-footer-actions { margin-top: 24px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } .site-footer-button, .site-footer-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .site-footer-button { background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); color: #352506; box-shadow: 0 14px 28px rgba(243, 225, 57, 0.28); } .site-footer-link { color: #fff; border: 1px solid rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.08); } .site-footer-button:hover, .site-footer-link:hover { transform: translateY(-2px); } .site-footer-button:hover { background: linear-gradient(150deg, #f7e95a 0%, #fff2a7 60%, #f7e95a 100%); color: #2d2206; } .site-footer-link:hover { background: #fff; color: var(--primary-blue); } .site-footer-meta { text-align: center; color: #65718a; font-size: 0.88rem; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 620ms ease, transform 620ms ease; } .reveal.show { opacity: 1; transform: translateY(0); } .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 540ms ease, transform 540ms ease; } .stagger.show > * { opacity: 1; transform: translateY(0); } .stagger.show > *:nth-child(1) { transition-delay: 40ms; } .stagger.show > *:nth-child(2) { transition-delay: 110ms; } .stagger.show > *:nth-child(3) { transition-delay: 180ms; } .stagger.show > *:nth-child(4) { transition-delay: 250ms; } .btn-primary, .btn-outline, .circle-btn, .btn, .card-link, .card-link-Green, .card-link-Blue { font-family: inherit; } /* Home */ .page-home main > section { padding: 60px 0; } .page-home .section-head { max-width: 700px; margin-bottom: 34px; } .page-contact .hero .eyebrow, .page-contact .container > .reveal > .eyebrow { color: var(--section-eyebrow-color); } .page-destinations h2, .page-contact .hero h1, .page-contact h2 { color: var(--section-title-color); } .page-home .hero { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 64px; } .page-home .hero::before, .page-home .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-home .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-home .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-home .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; } .page-home .hero h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 800; max-width: 720px; margin-bottom: 18px; } .page-home .hero-sub { max-width: 620px; font-size: 1.03rem; } .page-home .home-hero-actions { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .page-home .home-hero-actions .btn-primary { width: 220px; justify-content: center; } .page-home .btn-primary, .page-blog .btn-primary, .page-contact .btn-primary, .page-home .btn-outline, .page-home .circle-btn, .page-pathways .btn-outline, .page-destinations .btn, .page-about .btn { border: none; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .page-home .btn-primary, .page-blog .btn-primary, .page-contact .btn-primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, var(--primary-blue), #0a84ff); color: #fff; font-weight: 600; font-size: 0.92rem; border-radius: 999px; padding: 12px 21px; box-shadow: 0 14px 24px rgba(0, 103, 243, 0.24); } .page-home .btn-primary::after, .page-blog .btn-primary::after, .page-contact .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70% ); transform: translateX(-140%) skewX(-18deg); transition: transform 360ms ease; pointer-events: none; } .page-home .btn-primary:hover, .page-blog .btn-primary:hover, .page-contact .btn-primary:hover { transform: scale(1.03); box-shadow: 0 18px 30px rgba(0, 103, 243, 0.3); } .page-home .btn-primary:hover::after, .page-blog .btn-primary:hover::after, .page-contact .btn-primary:hover::after { transform: translateX(140%) skewX(-18deg); } .page-home .hero-visual { min-height: 330px; border-radius: 22px; padding: 22px; position: relative; background: linear-gradient(155deg, #f3f7ff, #e1edff); border: 1px solid rgba(0, 103, 243, 0.14); overflow: hidden; } .page-home .hero-visual .orb { position: absolute; border-radius: 50%; } .page-home .orb-1 { width: 170px; height: 170px; top: 24px; right: 34px; background: radial-gradient(circle at 28% 28%, #5ca6ff, #0067f3); box-shadow: 0 20px 44px rgba(0, 103, 243, 0.26); } .page-home .orb-2 { width: 110px; height: 110px; bottom: 24px; left: 12px; background: radial-gradient(circle at 35% 35%, #fff89a, #f3e139); box-shadow: 0 14px 24px rgba(243, 225, 57, 0.28); } .page-home .visual-card { position: absolute; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(17, 17, 17, 0.08); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-soft); font-size: 0.85rem; color: #32405f; } .page-home .visual-card strong { display: block; font-size: 1rem; color: #0f1f3a; margin-top: 2px; } .page-home .visual-card.one { top: 24px; left: 20px; } .page-home .visual-card.two { bottom: 22px; right: 20px; } .page-home #about { position: relative; padding: 24px 0 56px; } .page-home .about-head { max-width: 760px; margin: 0 auto 28px; } .page-home .about-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .page-home .stat-card { position: relative; overflow: hidden; min-height: 300px; border-radius: var(--card-radius); padding: 24px 22px 22px; background: radial-gradient( circle at 100% 100%, rgba(99, 148, 230, 0.14), transparent 22% ), var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-home .stat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.4), transparent 48% ); } .page-home .stat-card::after { content: ""; position: absolute; right: -42px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: rgba(181, 209, 255, 0.45); pointer-events: none; } .page-home .stat-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-home .stat-card.is-featured { background: linear-gradient(160deg, #0c62e8 0%, #0f73f2 52%, #2c8cff 100%); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 28px 50px rgba(0, 103, 243, 0.32); color: #fff; } .page-home .stat-card.is-featured::after { right: 18px; bottom: 16px; width: 160px; height: 160px; background: radial-gradient( circle at 68% 68%, rgba(255, 211, 77, 0.9) 0 6px, transparent 7px ), radial-gradient( circle at 40% 40%, rgba(255, 255, 255, 0.18), transparent 58% ); opacity: 0.5; } .page-home .stat-card.is-featured .stat-icon { background: rgba(255, 255, 255, 0.18); color: #fff; } .page-home .stat-card.is-featured .stat-number, .page-home .stat-card.is-featured .stat-label, .page-home .stat-card.is-featured .stat-copy { color: #fff; } .page-home .stat-card.is-featured .stat-pill { position: absolute; top: 26px; right: 22px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #ffe36a; color: #2d4d86; font-size: 0.78rem; font-weight: 700; z-index: 2; } .page-home .stat-card.is-featured .stat-swoosh { position: absolute; right: 42px; bottom: 28px; width: 68px; height: 68px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.5); border-left-color: transparent; transform: rotate(18deg); opacity: 0.6; } .page-home .stat-icon { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--primary-blue); box-shadow: 0 10px 22px rgba(12, 45, 94, 0.08); font-size: 1.5rem; position: relative; z-index: 2; } .page-home .stat-dot { position: absolute; top: 34px; right: 24px; width: 9px; height: 9px; border-radius: 50%; background: #146ff2; box-shadow: 0 0 0 6px rgba(20, 111, 242, 0.08); } .page-home .stat-number { position: relative; z-index: 1; margin-top: 22px; color: #132545; font-size: clamp(2.7rem, 4vw, 3rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; } .page-home .stat-label { position: relative; z-index: 1; margin-top: 12px; color: #17274a; font-size: 1.02rem; line-height: 1.15; font-weight: 700; } .page-home .stat-copy { position: relative; z-index: 1; margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(25, 44, 77, 0.08); color: #5e6c86; font-size: 0.92rem; line-height: 1.55; } .page-home .stat-card.is-featured .stat-copy { border-top-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.92); } .page-home .about-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; overflow: hidden; border-radius: 26px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 103, 243, 0.08); box-shadow: 0 18px 34px rgba(8, 30, 66, 0.07); } .page-home .about-strip-item { display: flex; align-items: flex-start; gap: 12px; padding: 20px 18px; min-height: 92px; } .page-home .about-strip-item + .about-strip-item { border-left: 1px solid rgba(0, 103, 243, 0.08); } .page-home .about-strip-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 145deg, rgba(0, 103, 243, 0.08), rgba(255, 255, 255, 0.95) ); color: var(--primary-blue); box-shadow: 0 8px 18px rgba(12, 45, 94, 0.06); font-size: 0.95rem; } .page-home .about-strip-item strong { display: block; color: #132545; font-size: 0.92rem; margin-bottom: 4px; } .page-home .about-strip-item p { color: #5e6c86; font-size: 0.82rem; line-height: 1.35; } .page-home .cards-grid { display: grid; gap: 18px; } .page-home .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-home .panel-card { border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); padding: 28px; box-shadow: var(--card-shadow); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-home .panel-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-home .panel-card h3 { font-size: 1.4rem; margin-bottom: 10px; } .page-home .panel-card-editorial { position: relative; overflow: hidden; background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); } .page-home .panel-card-editorial::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 0; width: 5px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, #1360cd 0%, #0067f3 56%, #395ef3 100%); } .page-home .panel-card-editorial .eyebrow.eyebrow-tight-sm { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; border-radius: 7px; color: #6f5608; background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); } .page-home .panel-card-editorial h3 { color: #132545; } .page-home .country-card-porcelain { position: relative; overflow: hidden; background: radial-gradient( circle at 100% 0%, rgba(243, 225, 57, 0.16), transparent 42% ), var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); } .page-home .country-card-porcelain::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, rgba(0, 103, 243, 0.85), rgba(59, 138, 248, 0.85) ); } .page-home .country-card-porcelain h4 { color: #17325b; } .page-home .country-card-porcelain p { color: #4f5e79; } .page-home .pathway-head, .page-home .articles-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; } .page-home .arrow-group { display: flex; gap: 10px; } .page-home .circle-btn { width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(0, 103, 243, 0.22); background: #fff; color: var(--primary-blue); font-weight: 700; } .page-home .circle-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 103, 243, 0.18); background: var(--primary-blue); color: #fff; } .page-home .pathway-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 16px; margin: 28px -20px 0; padding: 20px max(16px, calc(50% - 38vw)) 40px; -webkit-mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); } .page-home .pathway-grid::-webkit-scrollbar { display: none; } .page-home .pathway-card { flex: 0 0 clamp(260px, 76vw, 340px); scroll-snap-align: center; scroll-snap-stop: always; transform-origin: center center; will-change: transform, opacity; background: #fff; border-radius: var(--radius-lg); border: 1px solid rgba(17, 17, 17, 0.08); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 380ms ease; opacity: 0.58; transform: scale(0.9); filter: blur(4px); } .page-home .pathway-card.carousel-active { opacity: 1; transform: scale(1); filter: none; box-shadow: 0 10px 36px rgba(0, 103, 243, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08); } .page-home .pathway-card:hover { transform: scale(1.02) translateY(-5px); border-color: rgba(0, 103, 243, 0.48); box-shadow: 0 20px 35px rgba(0, 103, 243, 0.2); } .page-home .pathway-art { height: 180px; background: linear-gradient(140deg, #dceaff, #b7d8ff); position: relative; overflow: hidden; } .page-home .pathway-art::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -20px; top: -16px; background: rgba(255, 255, 255, 0.52); } .page-home .pathway-art::after { content: ""; position: absolute; width: 74px; height: 74px; border-radius: 50%; left: 20px; bottom: 20px; background: rgba(243, 225, 57, 0.78); } .page-home .pathway-body { padding: 20px; } .page-home .pathway-body h3 { font-size: 1.2rem; margin-bottom: 8px; } .page-home .destination-experience { margin-top: 24px; display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.35fr); align-items: stretch; } .page-home .destination-copy { align-self: center; max-width: 400px; } .page-home .destination-copy-note { margin-top: 24px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(82, 120, 220, 0.22); background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(32, 67, 138, 0.08); max-width: 345px; } .page-home .destination-copy-note-icon { width: 65px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.1rem; font-weight: 700; color: #1d5ed9; background: linear-gradient(135deg, #ffffff 0%, #e6f0ff 50%, #d0e2ff 100%); border: 1px solid rgba(70, 121, 216, 0.35); box-shadow: 0 4px 12px rgba(45, 100, 201, 0.15); } .page-home .destination-copy-note span:last-child { color: #355171; font-size: 0.94rem; font-weight: 500; line-height: 1.4; } .page-home .destination-copy-cta { margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 16px; border: 2px solid #2b6fd2; color: #fff; font-weight: 700; font-size: 0.96rem; background: linear-gradient(135deg, #2b6fd2 0%, #1d5ed9 100%); box-shadow: 0 8px 20px rgba(43, 111, 210, 0.28); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); cursor: pointer; } .page-home .destination-copy-cta:hover { transform: translateY(-2px); background: linear-gradient(135deg, #1d5ed9 0%, #164fb8 100%); box-shadow: 0 12px 28px rgba(43, 111, 210, 0.36); } .page-home .destination-visual { position: relative; min-height: 640px; border-radius: 28px; padding: 10px 12px; background: radial-gradient( circle at 65% 35%, rgba(225, 240, 255, 0.4) 0%, transparent 35% ), radial-gradient( circle at 75% 65%, rgba(200, 225, 255, 0.25) 0%, transparent 40% ), linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%); border: 1px solid rgba(100, 150, 230, 0.12); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 3px rgba(0, 0, 0, 0.02); overflow: visible; backdrop-filter: blur(2px); } .page-home .destination-visual::before { content: ""; position: absolute; inset: -80px; background: radial-gradient( circle at 50% 45%, rgba(82, 140, 230, 0.08) 0%, transparent 60% ); border-radius: 50%; pointer-events: none; z-index: 0; } .page-home .destination-visual::after { content: ""; position: absolute; inset: -120px; background: conic-gradient( from 0deg at 50% 50%, rgba(75, 130, 220, 0.05) 0deg, transparent 60deg, transparent 180deg, rgba(75, 130, 220, 0.03) 360deg ); border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0.5; } .page-home .destination-blob { position: absolute; border-radius: 999px; filter: blur(40px); pointer-events: none; opacity: 0.4; } .page-home .blob-a { display: block; width: 320px; height: 320px; left: -80px; top: 40px; background: linear-gradient( 135deg, rgba(75, 130, 220, 0.15) 0%, transparent 70% ); } .page-home .blob-b { display: block; width: 280px; height: 280px; right: -40px; bottom: 80px; background: linear-gradient( 225deg, rgba(75, 130, 220, 0.12) 0%, transparent 70% ); } .page-home .blob-c { display: block; width: 240px; height: 240px; left: 50%; top: -60px; transform: translateX(-50%); background: radial-gradient( circle, rgba(82, 140, 230, 0.1) 0%, transparent 70% ); } .page-home .soft-globe { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); width: clamp(335px, 41vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle at 28% 28%, #d8edff 0%, #b9dcff 18%, #8ec7ff 40%, #669df2 68%, #4b7fd9 85%, #2d5cb8 100% ); box-shadow: inset -28px -32px 68px rgba(20, 60, 140, 0.24), inset 24px 20px 48px rgba(255, 255, 255, 0.36), inset -8px -8px 16px rgba(0, 0, 0, 0.08), 0 0 60px rgba(45, 92, 184, 0.22), 0 40px 80px rgba(30, 70, 160, 0.2), 0 0 120px rgba(75, 130, 220, 0.12); z-index: 2; animation: globeFloat 6s ease-in-out infinite; } @keyframes globeFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } } .page-home .soft-globe::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 8px rgba(255, 255, 255, 0.4), 0 0 2px rgba(0, 0, 0, 0.1); } .page-home .soft-globe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle at 32% 28%, rgba(255, 255, 255, 0.25) 0%, transparent 25% ), radial-gradient( circle at 35% 32%, rgba(255, 255, 255, 0.15) 0%, transparent 20% ); box-shadow: inset -60px -60px 100px rgba(10, 30, 90, 0.1), inset 40px 30px 60px rgba(255, 255, 255, 0.15); } .page-home .globe-sheen { position: absolute; width: 48%; height: 34%; top: 8%; left: 10%; border-radius: 999px; background: radial-gradient( ellipse at 40% 35%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70% ); transform: rotate(-20deg); z-index: 1; filter: blur(1px); box-shadow: 0 0 40px rgba(255, 255, 255, 0.3) inset; } .page-home .globe-map { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 8px 16px rgba(15, 50, 140, 0.18)) brightness(1.02) contrast(1.08) saturate(1.05) hue-rotate(2deg); opacity: 0.96; } .page-home .destination-spot-card { position: absolute; z-index: 4; width: min(230px, 42vw); border-radius: 20px; padding: 16px 16px 14px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 100% ); border: 1px solid rgba(120, 160, 240, 0.24); box-shadow: 0 8px 24px rgba(20, 50, 130, 0.12), 0 32px 64px rgba(20, 50, 130, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .page-home .destination-spot-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(20, 50, 130, 0.16), 0 40px 80px rgba(20, 50, 130, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9); border-color: rgba(100, 140, 240, 0.36); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.84) 100% ); } .page-home .destination-spot-card.is-active { transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 28px rgba(43, 111, 210, 0.18), 0 36px 72px rgba(43, 111, 210, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 0 20px rgba(255, 214, 51, 0.08); border: 1px solid rgba(75, 130, 220, 0.36); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 100% ); } .page-home .destination-spot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .page-home .destination-spot-head strong { color: #0f1f37; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; } .page-home .spot-dot { width: 12px; height: 12px; border-radius: 50%; background: #ffd633; box-shadow: 0 0 0 4px rgba(255, 214, 51, 0.2), 0 0 12px rgba(255, 214, 51, 0.48), inset 0 1px 2px rgba(255, 255, 255, 0.4); flex-shrink: 0; } .page-home .destination-spot-card p { margin: 10px 0 0; color: #547499; font-size: 0.82rem; line-height: 1.5; font-weight: 400; } /* Arch layout: left col = Europe/Malaysia/Thailand, right col = Japan/Taiwan/Singapore */ .page-home .spot-europe { top: 52px; left: -4%; } .page-home .spot-malaysia { top: 248px; left: -5%; } .page-home .spot-thailand { top: 436px; left: -4%; } .page-home .spot-japan { top: 52px; right: -4%; } .page-home .spot-taiwan { top: 248px; right: -5%; } .page-home .spot-singapore { top: 436px; right: -4%; } .page-home .destination-mascot { position: absolute; right: 2%; bottom: -70px; width: clamp(190px, 22vw, 340px); z-index: 5; filter: drop-shadow(0 20px 40px rgba(12, 58, 132, 0.24)); pointer-events: none; animation: mascotFloat 5s ease-in-out infinite; } @keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .page-home .destination-info-card { position: absolute; width: min(300px, calc(100% - 40px)); top: 50%; right: 12px; transform: translateY(-50%); border-radius: 22px; padding: 20px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(137, 162, 235, 0.26); box-shadow: 0 18px 42px rgba(25, 53, 108, 0.16); backdrop-filter: blur(10px); transition: top var(--transition-mid), left var(--transition-mid), right var(--transition-mid), transform var(--transition-mid); } .page-home .destination-info-card.align-left { right: auto; left: 12px; } .page-home .destination-info-card.align-right { left: auto; right: 12px; } .page-home .destination-side-rail { position: absolute; width: min(250px, calc(100% - 40px)); top: 50%; left: 12px; transform: translateY(-50%); border-radius: 20px; padding: 17px 16px; background: rgba(248, 252, 255, 0.88); border: 1px solid rgba(137, 162, 235, 0.22); box-shadow: 0 14px 34px rgba(25, 53, 108, 0.12); backdrop-filter: blur(8px); transition: left var(--transition-mid), right var(--transition-mid), transform var(--transition-mid), opacity var(--transition-fast); } .page-home .destination-side-rail.align-left { left: 12px; right: auto; } .page-home .destination-side-rail.align-right { right: 12px; left: auto; } .page-home .destination-side-kicker { margin: 0; letter-spacing: 0.13em; text-transform: uppercase; font-size: 0.67rem; color: #687ea8; font-weight: 700; } .page-home .destination-side-rail h3 { margin-top: 7px; font-size: 1.02rem; color: #14315d; } .page-home .destination-side-list { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .page-home .destination-side-list li a { display: block; padding: 8px 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(118, 148, 216, 0.2); color: #2a4776; font-size: 0.83rem; font-weight: 600; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .page-home .destination-side-list li a:hover { transform: translateX(2px); border-color: rgba(79, 122, 214, 0.42); background: rgba(255, 255, 255, 0.96); } .page-home .destination-side-cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; color: #0b57ca; font-size: 0.82rem; font-weight: 700; } .page-home .destination-side-cta::after { content: "->"; font-size: 0.74rem; } .page-home .destination-card-kicker { display: inline-flex; align-items: center; width: fit-content; padding: 5px 11px; border-radius: 999px; background: linear-gradient( 150deg, rgba(255, 235, 146, 0.62), rgba(255, 247, 216, 0.98) ); color: #6f5507; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; } .page-home .destination-info-card h3 { margin-top: 12px; font-size: 1.28rem; color: #12274b; } .page-home .destination-info-card p { margin-top: 8px; color: #4c5f80; } .benefit-list, .opportunity-list { margin-top: 10px; padding-left: 0; list-style: none; } .benefit-list li, .opportunity-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: #4f5f78; } .benefit-list li::before, .opportunity-list li::before { content: "•"; position: absolute; left: 0; color: #0067f3; font-size: 1.2rem; } .page-home .destination-card-cta { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; padding: 11px 18px; background: linear-gradient(140deg, #0a5cd2, #2f8cff); color: #fff; font-size: 0.9rem; font-weight: 700; box-shadow: 0 12px 24px rgba(12, 81, 196, 0.28); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); cursor: pointer; } .page-home .destination-card-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70% ); transform: translateX(-140%) skewX(-18deg); transition: transform 360ms ease; pointer-events: none; } .page-home .destination-card-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(12, 81, 196, 0.34); } .page-home .destination-card-cta:hover::after { transform: translateX(140%) skewX(-18deg); } .page-home .articles-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 16px; margin: 28px -20px 0; padding: 20px max(16px, calc(50% - 38vw)) 40px; -webkit-mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); } .page-home .articles-grid::-webkit-scrollbar { display: none; } .page-home .article-card { flex: 0 0 clamp(260px, 76vw, 340px); scroll-snap-align: center; scroll-snap-stop: always; transform-origin: center center; will-change: transform, opacity; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 380ms ease; opacity: 0.58; transform: scale(0.9); filter: blur(4px); } .page-home .article-card.carousel-active { opacity: 1; transform: scale(1); filter: none; box-shadow: 0 10px 36px rgba(0, 103, 243, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08); } .page-home .article-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } /* ── Desktop: pathway + articles grids → static layout (no carousel) ── */ @media (min-width: 769px) { .page-home .pathway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; } .page-home .pathway-card { flex: unset; width: auto; scroll-snap-align: none; opacity: 1; transform: none; filter: none; transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } .page-home .pathway-card:hover { transform: translateY(-5px); border-color: rgba(0, 103, 243, 0.4); box-shadow: 0 20px 35px rgba(0, 103, 243, 0.18); } .page-home .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; } .page-home .article-card { flex: unset; width: auto; scroll-snap-align: none; opacity: 1; transform: none; filter: none; transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } .page-home .article-card:hover { transform: translateY(-5px); } } .page-home .article-thumb { aspect-ratio: 16 / 10; background: linear-gradient(150deg, #d8e8ff, #afccff); position: relative; } .page-home .article-thumb::after { content: ""; position: absolute; width: 42%; height: 5px; border-radius: 999px; right: 14px; bottom: 16px; background: rgba(255, 255, 255, 0.52); } .page-home .article-body { padding: 20px; } .page-home .article-body h3 { font-size: 1.14rem; margin-bottom: 8px; } .page-home .read-link { margin-top: 12px; display: inline-flex; color: var(--primary-blue); font-weight: 600; font-size: 0.9rem; position: relative; } .page-home .read-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: var(--primary-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-fast); } .page-home .article-card:hover .read-link::after { transform: scaleX(1); } .page-home .cta { padding-top: 0; } .page-home .cta-wrap, .page-pathways .cta-wrap, .page-destinations .cta-wrap, .page-about .cta-wrap { border-radius: 24px; padding: 52px 28px; text-align: center; background: radial-gradient( circle at 90% -20%, rgba(255, 255, 255, 0.22), transparent 35% ), radial-gradient( circle at 12% 120%, rgba(255, 255, 255, 0.22), transparent 30% ), linear-gradient(140deg, #0067f3, #238cff); box-shadow: 0 25px 40px rgba(0, 103, 243, 0.28); } .page-home .cta-wrap h2, .page-home .cta-wrap p, .page-pathways .cta-wrap h2, .page-pathways .cta-wrap p, .page-destinations .cta-wrap h2, .page-destinations .cta-wrap p, .page-about .cta-wrap h2, .page-about .cta-wrap p { color: #fff; } .page-home .cta-wrap p, .page-pathways .cta-wrap p { max-width: 680px; margin: 12px auto 0; opacity: 0.9; } .page-home .btn-outline, .page-pathways .btn-outline { margin-top: 24px; display: inline-flex; background: #fff; color: var(--primary-blue); border-radius: 999px; font-weight: 700; padding: 12px 22px; box-shadow: 0 14px 28px rgba(10, 48, 113, 0.18); } .page-home .btn-outline:hover, .page-pathways .btn-outline:hover, .page-destinations .btn:hover, .page-about .btn:hover { transform: scale(1.04); box-shadow: 0 16px 30px rgba(10, 48, 113, 0.25); } /* About */ .page-about section { padding: 60px 0; } .page-about .hero { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 64px; } .page-about .hero::before, .page-about .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-about .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-about .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-about .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center; } .page-about .hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); margin-bottom: 14px; } .page-about .hero-art img { position: absolute; z-index: 2; } .page-about .hero-art, .page-pathways .hero-art { min-height: 430px; border-radius: 22px; position: relative; overflow: hidden; } .page-about .hero-art::before, .page-pathways .hero-art::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: 30px; top: 24px; background: radial-gradient(circle at 35% 35%, #fff89a, #f3e139); box-shadow: 0 18px 40px var(--accent-yellow); filter: blur(4px); } /* .page-about .hero-art::after, .page-pathways .hero-art::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; left: 44px; bottom: -60px; z-index: 3; background: radial-gradient(circle at 35% 35%, #fff89a, #f3e139); box-shadow: 0 18px 50px var(--accent-yellow); filter: blur(2px); } */ .page-about .section-head, .page-pathways .section-head { max-width: 700px; margin-bottom: 32px; } .page-about .cards-grid { display: grid; gap: 18px; } .page-about .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* .page-about .left .timeline-card-grid { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 18px; align-items: stretch; } */ .page-about .timeline-card-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 18px; align-items: stretch; } .page-about .timeline-icons { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: #fff; color: var(--primary-blue); fill: var(--primary-blue); border: 1px solid rgba(0, 103, 243, 0.18); box-shadow: 0 5px 11px rgba(12, 45, 94, 0.08); font-size: 2.5rem; } .page-about .timeline { position: relative; display: grid; gap: 18px; } .page-about .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient( 180deg, rgba(0, 103, 243, 0.18), rgba(0, 103, 243, 0.48), rgba(0, 103, 243, 0.18) ); } .page-about .timeline-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: center; } .page-about .timeline-card { grid-column: 1; } .page-about .timeline-card { position: relative; background: var(--card-bg); padding: 24px; border-radius: var(--card-radius); border: var(--card-border); box-shadow: var(--card-shadow); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-about .timeline-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-about .timeline-card::before { content: ""; position: absolute; top: 15%; left: 0; width: 5px; height: 70%; border-radius: 0 999px 999px 0; background: var(--primary-blue); } /* .page-about .left .timeline-card::before { content: ""; position: absolute; top: 15%; right: 0; width: 5px; height: 70%; border-radius: 999px 0 0 999px; background: var(--primary-blue); } */ .page-about .timeline-card h3 { font-size: 1.45rem; line-height: 1.1; margin: 0 0 14px; } .page-about .timeline-card p { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0, 103, 243, 0.12); } .page-about .timeline-card .eyebrow.eyebrow-tight { display: flex; align-items: center; width: fit-content; padding: 4px 10px; border-radius: 6px; background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); color: #352506; font-weight: 700; letter-spacing: 0.08em; } .page-about .timeline-item.right .timeline-card { grid-column: 3; } .page-about .timeline-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--primary-blue); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(0, 103, 243, 0.14); z-index: 1; } .page-about .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-about .card { background: var(--card-bg); border-radius: var(--card-radius); border: var(--card-border); box-shadow: var(--card-shadow); padding: 24px; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } /*.page-about .values-desc-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; } .page-about .value-card::after { right: -23px; bottom: -23px; }*/ .page-about .values-icons { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: #fff; color: var(--primary-blue); border: 1px solid rgba(0, 103, 243, 0.18); box-shadow: 0 5px 11px rgba(12, 45, 94, 0.08); font-size: 2.5rem; } .page-about .value-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: var(--card-border); position: relative; overflow: hidden; min-height: 140px; padding: 24px 22px 22px; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } /*.page-about .value-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.4), transparent 48% ); }*/ .page-about .value-card::before { content: ""; position: absolute; left: 24px; width: 52px; top: 0; height: 3px; border-radius: 0 0 999px 999px; background: var(--primary-blue); } .page-about .value-head-grid { display: grid; grid-template-columns: 0.2fr 1.8fr; gap: 14px; align-items: center; } /*.page-about .value-card::after { content: ""; position: absolute; right: -42px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: var(--brand-premium-gradient); pointer-events: none; }*/ /* .page-about .values-desc-grid { display: grid; grid-template-columns: 1.8fr 0.2fr; gap: 14px; align-items: center; } .page-about .values-icons { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; border-radius: var(--radius-lg); color: var(--primary-blue); font-size: 1.5rem; position: relative; z-index: 2; } */ .page-about .value-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-about .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .page-about .value-card h3 { position: relative; z-index: 1; color: #17274a; font-size: 1.82rem; line-height: 1.15; font-weight: 700; } .page-about .value-card p { position: relative; z-index: 1; padding-top: 12px; border-top: 1px solid rgba(25, 44, 77, 0.08); color: #5e6c86; font-size: 0.92rem; line-height: 1.55; } .page-about .panel p { color: #fff; } .page-about .panel h3 { position: relative; z-index: 1; font-size: 1.82rem; line-height: 1.15; font-weight: 700; } .page-about .panel .desc { position: relative; z-index: 1; padding-top: 12px; /* border-top: 1px solid rgba(25, 44, 77, 0.08); */ border-top: 2px solid rgba(235, 238, 241, 0.08); color: #fff; /* color: #5e6c86; */ font-size: 0.92rem; line-height: 1.55; } .page-about .panel.is-featured { background: linear-gradient(160deg, #0c62e8 0%, #0f73f2 52%, #2c8cff 100%); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 28px 50px rgba(0, 103, 243, 0.32); color: #fff; } .page-home .panel.is-featured::after { right: 18px; bottom: 16px; width: 160px; height: 160px; background: radial-gradient( circle at 68% 68%, rgba(255, 211, 77, 0.9) 0 6px, transparent 7px ), radial-gradient( circle at 40% 40%, rgba(255, 255, 255, 0.18), transparent 58% ); opacity: 0.5; } .split-grid-main { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 24px; } .page-about .split-side-grid { display: grid; grid-template-rows: 1fr; gap: 16px; } .page-about .split-grid-1 { display: grid; grid-template-columns: 0.2fr 1.8fr; gap: 16px; } .page-about .split-grid-2 { display: grid; grid-template-columns: 0.2fr 1.8fr; gap: 16px; } .page-about .panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 103, 243, 0.18); border-radius: 24px; position: relative; overflow: hidden; border-radius: 28px; padding: 24px 22px 22px; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } /*.page-about .main-panel::before { content: ""; position: absolute; top: 15%; left: 0; width: 5px; height: 70%; border-radius: 0 999px 999px 0; background: var(--primary-blue); }*/ .page-about .main-panel { background-color: var(--primary-blue); } .page-about .main-panel img { width: 100%; height: 100%; object-fit: cover; } .page-about .MV-icons { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: #fff; color: var(--primary-blue); border: 1px solid rgba(0, 103, 243, 0.18); box-shadow: 0 5px 11px rgba(12, 45, 94, 0.08); font-size: 2rem; } .page-about .btn, .page-destinations .btn { display: inline-flex; margin-top: 20px; padding: 12px 22px; border-radius: 999px; font-weight: 700; background: #fff; color: var(--primary-blue); box-shadow: 0 14px 28px rgba(10, 48, 113, 0.18); } /* Pathways */ .page-pathways section { padding: 72px 0; } .page-pathways .hero { position: relative; overflow: hidden; padding-top: 78px; padding-bottom: 78px; } .page-pathways .hero::before, .page-pathways .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-pathways .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-pathways .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-pathways .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); gap: clamp(28px, 4vw, 54px); align-items: center; } .page-pathways .pathways-hero-copy { position: relative; max-width: 620px; } .page-pathways .hero h1 { font-size: clamp(2.45rem, 4.7vw, 4.45rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 11ch; margin-bottom: 18px; color: #132545; } .page-pathways .hero p:not(.eyebrow) { max-width: 560px; font-size: 1.02rem; color: #4e6079; } .page-pathways .pathways-hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; } .page-pathways .pathways-hero-signals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .page-pathways .pathways-hero-signals span { padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 103, 243, 0.12); box-shadow: 0 18px 34px rgba(12, 51, 112, 0.08); color: #274160; font-size: 0.84rem; font-weight: 600; } .page-pathways .pathway-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: start; } .page-pathways .pathway-grid:has(.pathway-card:hover) .pathway-card { opacity: 0.6; filter: saturate(0.82); } .page-pathways .pathway-grid:has(.pathway-card:hover) .pathway-card:hover { opacity: 1; filter: saturate(1); } .page-pathways .pathway-card { position: relative; overflow: hidden; isolation: isolate; grid-column: span 4; display: flex; flex-direction: column; padding: 22px; border-radius: var(--card-radius); border: var(--card-border); background: radial-gradient( circle at 0% 0%, rgba(255, 214, 51, 0.18), transparent 32% ), var(--card-bg); box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.88); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid), opacity var(--transition-fast), filter var(--transition-fast); } .page-pathways .pathway-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35), transparent 40%, rgba(255, 214, 51, 0.1) 100% ); opacity: 0.7; pointer-events: none; } .page-pathways .pathway-card::after { content: ""; position: absolute; inset: auto 18px 18px; height: 1px; background: linear-gradient( 90deg, rgba(43, 111, 210, 0), rgba(43, 111, 210, 0.36), rgba(243, 225, 57, 0) ); pointer-events: none; } .page-pathways .pathway-card:hover { transform: translateY(-8px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .page-pathways .pathway-card-featured { grid-column: span 4; background: radial-gradient( circle at 18% 18%, rgba(255, 234, 124, 0.36), transparent 28% ), radial-gradient( circle at 82% 12%, rgba(101, 176, 255, 0.3), transparent 26% ), linear-gradient(145deg, #0f4cab 0%, #1a6fe8 56%, #0d8eff 100%); border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 28px 60px rgba(10, 54, 125, 0.25), 0 60px 100px rgba(10, 54, 125, 0.12); } .page-pathways .pathway-card-featured .pathway-body h3, .page-pathways .pathway-card-featured .pathway-body h4, .page-pathways .pathway-card-featured .pathway-body p, .page-pathways .pathway-card-featured .benefit-list li, .page-pathways .pathway-card-featured .pathway-meta span, .page-pathways .pathway-card-featured .pathway-kicker { color: #fff; } .page-pathways .pathway-card-featured .pathway-tag { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.26); color: #fff8c5; } .page-pathways .pathway-card-igcse { background: var(--brand-premium-gradient); } .page-pathways .pathway-card-igcse::before { background: radial-gradient( circle at 78% 26%, rgba(255, 255, 255, 0.24), transparent 20% ), linear-gradient( 135deg, rgba(255, 255, 255, 0.12), transparent 42%, rgba(255, 214, 51, 0.1) 100% ); } .page-pathways .pathway-card-igcse .pathway-body { gap: 0; color: #f8fbff; } .page-pathways .pathway-card-igcse .pathway-body h3, .page-pathways .pathway-card-igcse .pathway-body h4, .page-pathways .pathway-card-igcse .pathway-body p, .page-pathways .pathway-card-igcse .benefit-list li, .page-pathways .pathway-card-igcse .pathway-meta span, .page-pathways .pathway-card-igcse .pathway-kicker { color: #f8fbff; text-shadow: 0 1px 2px rgba(8, 33, 81, 0.18); } .page-pathways .pathway-card-igcse .pathway-meta span { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.18); } .page-pathways .pathway-card-igcse .benefit-list li::before { color: #fff4a9; } .page-pathways .pathway-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .page-pathways .pathway-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(43, 111, 210, 0.14); color: #32517e; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .page-pathways .pathway-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(43, 111, 210, 0.12); box-shadow: 0 16px 32px rgba(12, 51, 112, 0.08); } .page-pathways .pathway-card-featured .pathway-icon { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } .page-pathways .pathway-icon svg { width: 24px; height: 24px; fill: #1f5fcc; } .page-pathways .pathway-card-featured .pathway-icon svg { fill: #fff4a9; } .page-pathways .pathway-body { position: relative; z-index: 1; padding: 0; display: flex; flex-direction: column; flex: 1; } .page-pathways .pathway-kicker { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4b72a7; } .page-pathways .pathway-body h3 { position: relative; display: block; font-size: 1.45rem; line-height: 1.08; margin: 0 0 12px; color: #14325d; } .page-pathways .pathway-body h3::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 72px; height: 3px; border-radius: 999px; background: #f3e139; } .page-pathways .pathway-body h4, .page-destinations .country-body h4 { margin: 12px 0 8px; font-size: 0.9rem; color: #1f2a44; } .page-pathways .benefit-list, .page-destinations .benefit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .page-pathways .benefit-list li, .page-destinations .benefit-list li { position: relative; padding-left: 20px; font-size: 0.92rem; color: var(--muted-text); } .page-pathways .pathway-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .page-pathways .pathway-meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; background: rgba(17, 85, 195, 0.06); border: 1px solid rgba(17, 85, 195, 0.08); font-size: 0.78rem; font-weight: 600; color: #45618d; } .page-pathways .pathway-card .pathway-body h4 { background: linear-gradient(150deg, #f7e95a 0%, #fff2a7 60%, #f7e95a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: auto; } .page-pathways .benefit-list li::before, .page-destinations .benefit-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--primary-blue); font-weight: 700; } .page-pathways .card-link, .page-destinations .card-link { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; margin-top: 18px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: none; background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); color: #352506; font-size: 0.92rem; font-weight: 700; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); box-shadow: 0 14px 28px rgba(243, 225, 57, 0.28); } .page-pathway-detail .card-link-Blue { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 14px; border-radius: var(--radius-lg); background: var(--primary-blue); /* background: #f0f5fc; */ border: 1px solid var(--primary-blue); /* color: var(--primary-blue); */ color: #fff; font-size: 0.92rem; font-weight: 600; width: auto; /* max-width: fit-content; */ } .page-country-detail .card-link-Green { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 14px; border-radius: var(--radius-lg); background: #f5fcf7; border: 1px solid #00c48c; color: #00c48c; font-size: 0.92rem; font-weight: 600; width: auto; /* max-width: fit-content; */ } .page-country-detail .card-link-Green:hover { background: #00c48c; border-color: #f5fcf7; color: #fff; box-shadow: 0 14px 28px rgba(0, 196, 140, 0.28); transform: translateY(-2px); } .page-country-detail .card-link-Blue:hover { /* background: var(--primary-blue); */ border-color: #f0f5fc; background: #f0f5fc; color: var(--primary-blue); /* color: #fff; */ border: 1px solid var(--primary-blue); box-shadow: 0 14px 28px rgba(48, 140, 252, 0.28); transform: translateY(-2px); } .page-country-detail .card-link-Blue { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 14px; border-radius: var(--radius-lg); background: var(--primary-blue); /* background: #f0f5fc; */ border: 1px solid var(--primary-blue); /* color: var(--primary-blue); */ color: #fff; font-size: 0.92rem; font-weight: 600; width: auto; /* max-width: fit-content; */ } .page-pathway-detail .card-link-Green { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 14px; border-radius: 999px; background: #f5fcf7; border: 1px solid #00c48c; color: #00c48c; font-size: 0.92rem; font-weight: 600; max-width: fit-content; } .page-destinations .card-link-full { display: flex; width: 100%; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; margin-top: 14px; padding: 12px 21px; border-radius: 999px; border: none; background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); color: #352506; font-size: 0.92rem; font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); box-shadow: 0 14px 24px rgba(243, 225, 57, 0.28); } /* .page-destinations .card-link-Blue{ display: flex; width: 100%; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; margin-top: 14px; padding: 12px 21px; border-radius: 999px; background: #f0f5fc; border: 1px solid var(--primary-blue); color: var(--primary-blue); font-size: 0.92rem; font-weight: 600; } */ .page-destinations .card-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70% ); opacity: 0; transform: translateX(-140%) skewX(-18deg); transition: transform 360ms ease, opacity 220ms ease; pointer-events: none; } .page-pathways .card-link:hover, .page-destinations .card-link:hover { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(243, 225, 57, 0.34); background: linear-gradient(150deg, #f7e95a 0%, #fff2a7 60%, #f7e95a 100%); color: #2d2206; } .page-destinations .card-link:hover::after { opacity: 1; transform: translateX(140%) skewX(-18deg); } .page-pathways .hero-art { min-height: 520px; border-radius: 34px; background: radial-gradient( circle at 18% 16%, rgba(255, 255, 255, 0.42), transparent 32% ), radial-gradient( circle at 84% 18%, rgba(140, 205, 255, 0.42), transparent 34% ), linear-gradient( 150deg, rgba(30, 112, 226, 0.94) 0%, rgba(59, 145, 244, 0.9) 52%, rgba(24, 84, 181, 0.9) 100% ); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 44px rgba(15, 66, 145, 0.16), 0 54px 96px rgba(15, 66, 145, 0.1); position: relative; overflow: hidden; padding: 34px; } .page-pathways .hero-art::before { content: ""; position: absolute; inset: 16px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) ); } .page-pathways .hero-art::after { content: ""; position: absolute; inset: auto -8% -10% auto; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, rgba(255, 239, 163, 0.24), transparent 64% ); } .page-pathways .journey-glow { position: absolute; border-radius: 50%; filter: blur(8px); opacity: 0.75; } .page-pathways .journey-glow.glow-one { width: 168px; height: 168px; top: 34px; right: 34px; background: radial-gradient( circle, rgba(255, 243, 176, 0.46), transparent 74% ); } .page-pathways .journey-glow.glow-two { width: 184px; height: 184px; bottom: 40px; left: 44px; background: radial-gradient( circle, rgba(170, 222, 255, 0.34), transparent 72% ); } .page-pathways .journey-track { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 440px; } .page-pathways .journey-track::before { content: ""; position: absolute; left: 74px; right: 88px; top: 47%; height: 2px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.08), rgba(255, 214, 51, 0.9) 22%, rgba(255, 255, 255, 0.84) 52%, rgba(127, 202, 255, 0.82) 78%, rgba(255, 255, 255, 0.06) ); box-shadow: 0 0 22px rgba(255, 214, 51, 0.22); } .page-pathways .journey-track::after { content: ""; position: absolute; right: 82px; top: calc(47% - 7px); width: 14px; height: 14px; border-top: 2px solid rgba(255, 255, 255, 0.8); border-right: 2px solid rgba(255, 255, 255, 0.8); transform: rotate(45deg); } .page-pathways .journey-node, .page-pathways .journey-capstone, .page-pathways .journey-stat, .page-pathways .journey-mini-card { position: absolute; z-index: 1; } .page-pathways .journey-node { width: 170px; padding: 16px 16px 14px; border-radius: 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px); box-shadow: 0 18px 30px rgba(8, 33, 81, 0.18); color: #fff; } .page-pathways .journey-node strong, .page-pathways .journey-capstone strong, .page-pathways .journey-stat strong, .page-pathways .journey-mini-card strong { display: block; } .page-pathways .journey-node p, .page-pathways .journey-capstone p, .page-pathways .journey-stat span, .page-pathways .journey-mini-card .mini-card-label { margin: 0; font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.76); } .page-pathways .journey-node-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff8c5; font-size: 0.78rem; font-weight: 700; } .page-pathways .node-foundation { top: 54px; left: 10px; } .page-pathways .node-specialise { top: 182px; left: 178px; } .page-pathways .node-progress { top: 86px; right: 124px; } .page-pathways .journey-capstone { right: 8px; bottom: 82px; width: 188px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); box-shadow: 0 22px 38px rgba(8, 33, 81, 0.18); color: #fff; } .page-pathways .journey-capstone-ring, .page-pathways .cta-core-ring { display: inline-block; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 28%, transparent 29% ), linear-gradient(145deg, #ffe36e, #f3e139 55%, #fff3ae); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08), 0 14px 28px rgba(243, 225, 57, 0.2); } .page-pathways .journey-stat, .page-pathways .journey-mini-card { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); box-shadow: 0 18px 30px rgba(8, 33, 81, 0.15); color: #fff; } .page-pathways .stat-left { left: 34px; bottom: 30px; width: 176px; } .page-pathways .stat-right { right: 176px; top: 28px; width: 182px; } .page-pathways .mini-card-uni { right: 30px; top: 172px; width: 184px; } .page-pathways .mini-card-scholarship { left: 116px; bottom: 138px; width: 212px; } .page-pathways .pathways-catalog-section { position: relative; } .page-pathways .pathways-catalog-section::before { content: ""; position: absolute; inset: 40px 0 auto; height: 320px; background: radial-gradient( circle at 18% 20%, rgba(96, 163, 255, 0.12), transparent 26% ), radial-gradient( circle at 82% 0%, rgba(243, 225, 57, 0.12), transparent 20% ); pointer-events: none; } .page-pathways .pathways-section-head { max-width: 760px; margin-bottom: 38px; } .page-pathways .pathways-section-head p:not(.eyebrow) { color: #5a6c87; } .page-pathways .pathways-cta-card { position: relative; overflow: hidden; padding: 38px 36px; text-align: left; } .page-pathways .pathways-cta-glow { position: absolute; border-radius: 50%; filter: blur(12px); pointer-events: none; } .page-pathways .pathways-cta-glow.glow-left { width: 220px; height: 220px; left: -34px; bottom: -46px; background: radial-gradient( circle, rgba(255, 245, 179, 0.34), transparent 70% ); } .page-pathways .pathways-cta-glow.glow-right { width: 260px; height: 260px; right: -24px; top: -32px; background: radial-gradient( circle, rgba(120, 191, 255, 0.24), transparent 70% ); } .page-pathways .pathways-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: 28px; align-items: center; } .page-pathways .pathways-cta-copy p:not(.eyebrow) { max-width: 580px; } .page-pathways .pathways-cta-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .page-pathways .pathways-cta-pills span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.82rem; font-weight: 600; } .page-pathways .pathways-cta-visual { position: relative; min-height: 280px; border-radius: 26px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); overflow: hidden; } .page-pathways .cta-route { position: absolute; border-top: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; } .page-pathways .route-one { width: 180px; height: 120px; left: 22px; top: 34px; transform: rotate(6deg); } .page-pathways .route-two { width: 170px; height: 160px; right: 44px; top: 64px; transform: rotate(-18deg); } .page-pathways .route-three { width: 220px; height: 110px; left: 92px; bottom: 30px; transform: rotate(-4deg); } .page-pathways .cta-node, .page-pathways .cta-focus-core { position: absolute; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 16px 28px rgba(8, 33, 81, 0.14); } .page-pathways .cta-node span { display: block; margin-top: 3px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.76); } .page-pathways .node-one { top: 26px; left: 18px; } .page-pathways .node-two { top: 122px; right: 24px; } .page-pathways .node-three { bottom: 20px; left: 98px; } .page-pathways .cta-focus-core { left: 50%; top: 50%; width: 142px; height: 142px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; text-align: center; } .page-pathways .cta-focus-core strong { max-width: 80px; line-height: 1.15; } @media (max-width: 1040px) { .page-pathways .hero { padding-top: 62px; padding-bottom: 58px; } .page-pathways .hero h1 { max-width: none; font-size: clamp(2.3rem, 7vw, 3.7rem); } .page-pathways .hero-art { min-height: 470px; padding: 26px; } .page-pathways .journey-track { min-height: 410px; } .page-pathways .journey-track::before { left: 62px; right: 70px; } .page-pathways .node-foundation { left: 4px; } .page-pathways .node-specialise { left: 144px; } .page-pathways .node-progress { right: 88px; } .page-pathways .journey-capstone { right: 0; } .page-pathways .stat-right { right: 124px; } .page-pathways .mini-card-scholarship { left: 58px; } .page-pathways .pathway-card, .page-pathways .pathway-card-featured { grid-column: auto; } .page-pathways .pathways-cta-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .page-pathways section { padding: 58px 0; } .page-pathways .pathways-hero-actions, .page-pathways .pathways-hero-signals { gap: 10px; } .page-pathways .hero-art { min-height: 420px; padding: 20px; border-radius: 28px; } .page-pathways .journey-node { width: 138px; padding: 14px; } .page-pathways .journey-node strong, .page-pathways .journey-capstone strong { font-size: 0.95rem; } .page-pathways .node-foundation { top: 40px; left: 0; } .page-pathways .node-specialise { top: 168px; left: 90px; } .page-pathways .node-progress { top: 72px; right: 46px; } .page-pathways .journey-capstone { width: 158px; right: 0; bottom: 64px; padding: 14px; } .page-pathways .journey-stat, .page-pathways .journey-mini-card { display: none; } .page-pathways .journey-track::before { left: 46px; right: 44px; top: 46%; } .page-pathways .journey-track::after { right: 36px; } .page-pathways .pathway-grid { grid-template-columns: 1fr; } .page-pathways .pathway-card, .page-pathways .pathway-card-featured { grid-column: auto; } .page-pathways .pathways-cta-card { padding: 30px 22px; } .page-pathways .pathways-cta-visual { min-height: 250px; } .page-pathways .cta-node { padding: 12px 13px; } } /* Destinations */ .page-destinations section { padding: 64px 0; } .page-destinations .hero { position: relative; overflow: hidden; padding-top: 76px; padding-bottom: 78px; } .page-destinations .hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.65rem); line-height: 1.03; letter-spacing: -0.03em; margin-bottom: 16px; max-width: 16ch; } .page-destinations .hero::before, .page-destinations .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-destinations .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-destinations .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-destinations .destinations-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(16px, 2.8vw, 34px); align-items: start; } .page-destinations .destinations-hero-copy > p:not(.eyebrow) { max-width: 58ch; color: #4c5f7c; } .page-destinations .destinations-hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; } .page-destinations .destinations-hero-actions .site-footer-link { color: #1f4d88; border: 1px solid rgba(33, 105, 217, 0.3); background: rgba(255, 255, 255, 0.84); } .page-destinations .destinations-hero-actions .site-footer-link:hover { background: #1f5ec8; color: #fff; } .page-destinations .destination-filter-pills { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .page-destinations .destination-filter-pills span { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(43, 111, 210, 0.14); box-shadow: 0 14px 28px rgba(10, 46, 102, 0.08); color: #2f4f79; font-size: 0.78rem; font-weight: 600; } .page-destinations .destinations-hero-visual { position: relative; min-height: 420px; } .page-destinations .destinations-hero-visual.reveal { opacity: 1; transform: none; } .page-destinations .hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; } .page-destinations .hero-glow.glow-a { width: 220px; height: 220px; top: 28px; right: 18px; background: radial-gradient( circle, rgba(255, 240, 164, 0.46), rgba(255, 240, 164, 0) ); } .page-destinations .hero-glow.glow-b { width: 260px; height: 260px; left: 30px; bottom: 36px; background: radial-gradient( circle, rgba(156, 219, 255, 0.34), rgba(156, 219, 255, 0) ); } .page-destinations .discovery-globe-wrap { position: absolute; inset: 0; } .page-destinations .discovery-globe { width: clamp(320px, 37vw, 490px); aspect-ratio: 1; border-radius: 50%; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.26); background: radial-gradient( circle at 28% 28%, #dbf0ff 0%, #9fd0ff 24%, #6eaef9 48%, #2f78da 75%, #1f4f9f 100% ); box-shadow: inset -34px -30px 70px rgba(18, 56, 126, 0.28), inset 26px 24px 52px rgba(255, 255, 255, 0.26), 0 34px 78px rgba(18, 56, 126, 0.22), 0 0 90px rgba(57, 136, 232, 0.18); overflow: hidden; } .page-destinations .discovery-globe::before, .page-destinations .discovery-globe::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); } .page-destinations .discovery-globe::after { inset: 32%; } .page-destinations .globe-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.9; } .page-destinations .orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.24); } .page-destinations .orbit-a { inset: 8%; } .page-destinations .orbit-b { inset: 22%; } .page-destinations .route-line { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.34); border-radius: 999px; } .page-destinations .line-a { width: 210px; height: 130px; left: 7%; top: 17%; transform: rotate(-8deg); } .page-destinations .line-b { width: 220px; height: 120px; right: 4%; top: 34%; transform: rotate(12deg); } .page-destinations .line-c { width: 160px; height: 92px; right: 30%; bottom: 7%; transform: rotate(-16deg); } .page-destinations .marker { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28), 0 0 0 7px rgba(255, 255, 255, 0.14); } .page-destinations .marker-germany { left: 34%; top: 38%; } .page-destinations .marker-netherlands { left: 31%; top: 35%; } .page-destinations .marker-italy { left: 38%; top: 48%; } .page-destinations .marker-japan { left: 74%; top: 39%; } .page-destinations .marker-singapore { left: 63%; top: 57%; } .page-destinations .floating-card { position: absolute; min-width: 182px; padding: 14px 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(109, 157, 232, 0.28); box-shadow: 0 18px 40px rgba(12, 50, 110, 0.13); backdrop-filter: blur(10px); } .page-destinations .floating-card p { margin: 0 0 4px; color: #5273a0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; } .page-destinations .floating-card strong { color: #183860; font-size: 0.86rem; } .page-destinations .float-eu { left: 0; top: 16%; } .page-destinations .float-asia { right: 0; bottom: 12%; } .page-destinations .region-section { position: relative; } .page-destinations .region-head { max-width: 760px; margin-bottom: 34px; } .page-destinations .region-head p:not(.eyebrow) { color: #586d8b; } .page-destinations .region-showcase { display: grid; gap: 20px; } .page-destinations .destination-feature-card, .page-destinations .destination-editorial-card { position: relative; overflow: hidden; border-radius: var(--card-radius); border: var(--card-border); background: radial-gradient( circle at 0 0, rgba(255, 230, 120, 0.16), transparent 30% ), var(--card-bg); box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.82); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-destinations .destination-feature-card:hover, .page-destinations .destination-editorial-card:hover { transform: translateY(-6px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .page-destinations .destination-feature-card { display: grid; grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr); } .page-destinations .country-grid { margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .page-destinations .destination-editorial-card.is-wide { grid-column: span 2; } .page-destinations .destination-media { position: relative; min-height: 158px; background: linear-gradient( 160deg, rgba(18, 85, 188, 0.96), rgba(15, 64, 145, 0.9) ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 22px ); border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .page-destinations .destination-feature-card .destination-media { min-height: 100%; } .page-destinations .destination-media::after { content: ""; position: absolute; inset: auto 0 0; /* height: 42%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(6, 26, 64, 0.36)); */ } .page-destinations .flag-accent { position: absolute; top: 12px; left: 12px; z-index: 1; min-width: 34px; min-height: 34px; padding: 4px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 1.2rem; } .page-destinations .flag-accent img { display: block; width: 22px; height: auto; border-radius: 2px; } .page-destinations .destination-content { padding: 18px; display: grid; gap: 10px; } .page-destinations .destination-content h3 { margin: 0; font-size: 1.22rem; color: #17375f; } .page-destinations .destination-content p { margin: 0; color: #576c89; font-size: 0.92rem; } .page-destinations .destination-tags { display: flex; flex-wrap: wrap; gap: 8px; } .page-destinations .destination-tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: rgba(33, 105, 217, 0.08); border: 1px solid rgba(33, 105, 217, 0.14); color: #315b91; font-size: 0.74rem; font-weight: 700; } .page-destinations .destination-metrics { margin-top: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .page-destinations .destination-metrics span { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(84, 140, 226, 0.16); } .page-destinations .destination-metrics strong { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: #5d7aa1; } .page-destinations .destination-metrics em { font-style: normal; color: #15365f; font-weight: 700; font-size: 0.77rem; } .page-destinations .destination-content .card-link { justify-self: start; margin-top: 4px; } .page-destinations .art-germany { background: linear-gradient(145deg, #2d71d7, #1f4f9f); } .page-destinations .art-belgium { background: linear-gradient(145deg, #2e6ccc, #204f9e); } .page-destinations .art-czech { background: linear-gradient(145deg, #357cde, #244f9a); } .page-destinations .art-hungary { background: linear-gradient(145deg, #2f6ccb, #203f82); } .page-destinations .art-italy { background: linear-gradient(145deg, #2d75d6, #2a589f); } .page-destinations .art-netherlands { background: linear-gradient(145deg, #3077dc, #24529f); } .page-destinations .art-sweden { background: linear-gradient(145deg, #2f6ecc, #21468c); } .page-destinations .art-japan { background: linear-gradient(145deg, #2d72d8, #1f4b98); } .page-destinations .art-thailand { background: linear-gradient(145deg, #2e73d4, #24539b); } .page-destinations .art-taiwan { background: linear-gradient(145deg, #3379dd, #225196); } .page-destinations .art-indonesia { background: linear-gradient(145deg, #326fcd, #215096); } .page-destinations .art-malaysia { background: linear-gradient(145deg, #347be0, #24529d); } .page-destinations .art-singapore { background: linear-gradient(145deg, #2f70cf, #1f4f99); } /* Contact */ .page-contact section { padding: 64px 0; } .page-contact .contact-hero { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 18px; } .page-contact .contact-hero::before, .page-contact .contact-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-contact .contact-hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-contact .contact-hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-contact .hero-grid { display: grid; grid-template-columns: 0.75fr 0.25fr; gap: 28px; align-items: center; } .page-contact .contact-hero-copy { padding: 12px 0 0; } .page-contact .contact-hero h1 { max-width: 680px; margin: 0 0 14px; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.12; } .page-contact .contact-hero-intro { max-width: 620px; font-size: 0.98rem; color: #50607a; } .page-contact .contact-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; } .page-contact .hero-image { display: flex; align-items: center; justify-content: center; } .page-contact .hero-img { width: min(100%, 280px); height: auto; object-fit: contain; } .page-contact .contact-secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(19, 37, 69, 0.14); color: #16345d; background: rgba(255, 255, 255, 0.84); font-weight: 600; box-shadow: 0 12px 24px rgba(8, 30, 66, 0.06); } .page-contact .contact-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .page-contact .contact-trust-pill { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(0, 103, 243, 0.1); color: #21436d; font-size: 0.88rem; font-weight: 600; } .page-contact .contact-channel-card, .page-contact .contact-channel-card, .page-contact .contact-form-card, .page-contact .contact-process-card, .page-contact .contact-visit-card, .page-contact .contact-faq-card { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(0, 103, 243, 0.1); background: radial-gradient( circle at 100% 0%, rgba(243, 225, 57, 0.12), transparent 28% ), linear-gradient( 165deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.94) 100% ); box-shadow: 0 24px 56px rgba(8, 30, 66, 0.08); } .page-contact .contact-channel-card h2, .page-contact .contact-form-card h2, .page-contact .contact-visit-card h2, .page-contact .contact-faq-card h2 { font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: var(--section-title-line-height); letter-spacing: var(--section-title-letter-spacing); color: var(--section-title-color); margin-bottom: 12px; } .page-contact .contact-process-card span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; margin-bottom: 14px; color: #fff; font-size: 0.9rem; background: linear-gradient(145deg, #0b53ba, #0d8eff); box-shadow: 0 12px 24px rgba(0, 103, 243, 0.2); } .page-contact .contact-hub-section { padding-top: 18px; } .page-contact .contact-hub { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; } .page-contact .contact-channel-card, .page-contact .contact-form-card, .page-contact .contact-visit-card, .page-contact .contact-faq-card { padding: 30px; } .page-contact label { font-size: 0.88rem; font-weight: 600; display: block; margin-bottom: 7px; color: #2f3750; } .page-contact input, .page-contact select, .page-contact textarea { width: 100%; max-width: 100%; min-width: 0; border: 1px solid rgba(17, 17, 17, 0.18); border-radius: var(--radius-sm); padding: 12px 13px; font-family: inherit; font-size: 0.92rem; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: rgba(255, 255, 255, 0.88); } .page-contact textarea { display: block; resize: vertical; min-height: 190px; } .page-contact input:focus, .page-contact select:focus, .page-contact textarea:focus { border-color: rgba(0, 103, 243, 0.6); box-shadow: 0 0 0 3px rgba(0, 103, 243, 0.12); } .page-contact .field { margin-top: 14px; } .page-contact .contact-section-copy { max-width: 620px; color: #50607a; } .page-contact .contact-channel-list { display: grid; gap: 14px; margin-top: 24px; } .page-contact .contact-channel-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 20px; border: 1px solid rgba(0, 103, 243, 0.12); background: rgba(247, 251, 255, 0.92); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .page-contact .contact-channel-item:hover, .page-contact .contact-channel-item:focus-visible { transform: translateY(-2px); border-color: rgba(0, 103, 243, 0.24); box-shadow: 0 16px 28px rgba(8, 30, 66, 0.08); } .page-contact .contact-channel-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px; background: linear-gradient( 145deg, rgba(0, 103, 243, 0.12), rgba(13, 142, 255, 0.18) ); color: #15365f; } .page-contact .contact-channel-icon svg { width: 20px; height: 20px; fill: currentColor; } .page-contact .contact-channel-item strong, .page-contact .contact-format-item strong { display: block; color: #1f2a44; margin-bottom: 4px; } .page-contact .contact-channel-item small { display: block; margin-bottom: 6px; color: #6a7489; font-size: 0.82rem; } .page-contact .contact-channel-item em { display: block; font-style: normal; color: #16345d; font-weight: 600; } .page-contact .contact-channel-item span, .page-contact .contact-form-actions p { overflow-wrap: anywhere; word-break: break-word; } .page-contact .contact-channel-note { display: grid; gap: 4px; margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(19, 37, 69, 0.04); color: #4a5973; } .page-contact .contact-form-layout { margin-top: 24px; } .page-contact .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .page-contact .contact-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; } .page-contact .contact-form-actions .btn-primary { min-width: 220px; } .page-contact .contact-form-actions p { max-width: 380px; font-size: 0.9rem; color: #627088; } .page-contact .contact-process-section { position: relative; } .page-contact .contact-process-head { max-width: 780px; margin-bottom: 34px; } .page-contact .contact-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .page-contact .contact-process-card { padding: 26px 24px; min-height: 100%; } .page-contact .contact-process-card h3 { margin-bottom: 10px; color: #15365f; } .page-contact .contact-bottom-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; } .page-contact .contact-format-list, .page-contact .contact-faq-list { margin-top: 24px; } .page-contact .contact-format-list { display: grid; gap: 14px; } .page-contact .contact-format-item { padding: 18px; border-radius: 18px; background: rgba(247, 251, 255, 0.92); border: 1px solid rgba(0, 103, 243, 0.12); } .page-contact .faq { display: grid; gap: 12px; } .page-contact .faq details { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 18px; box-shadow: var(--shadow-soft); padding: 16px 18px; } .page-contact .faq summary { cursor: pointer; font-weight: 600; color: #2f3750; } .page-contact .faq p { margin-top: 10px; } /* Activities */ .page-activities section { padding: 58px 0; } .page-activities .hero { position: relative; overflow: hidden; padding-top: 70px; padding-bottom: 62px; } .page-activities .hero::before, .page-activities .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-activities .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-activities .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-activities .hero-grid { display: grid; grid-template-columns: 0.75fr 0.25fr; gap: 28px; align-items: center; } .page-activities .hero h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); margin-bottom: 14px; } .page-activities .hero p { max-width: 680px; } .page-activities .section-head { max-width: 760px; margin-bottom: 30px; } /* .page-activities .achievement-card:nth-child(odd) { border-top: 4px solid rgba(0, 103, 243, 0.36); } .page-activities .achievement-card:nth-child(even) { border-top: 4px solid rgba(243, 225, 57, 0.85); background: linear-gradient(160deg, #ffffff 0%, #fffef2 100%); } */ .page-activities .gallery-stack { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center; } .page-activities .gallery-photo { display: block; height: auto; width: auto; max-height: 320px; border-radius: 14px; border: 1px solid rgba(17, 17, 17, 0.08); box-shadow: var(--shadow-soft); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-activities .gallery-photo:hover { transform: translateY(-4px); border-color: rgba(0, 103, 243, 0.46); box-shadow: var(--shadow-hover); } .page-activities .gallery-empty { width: 100%; text-align: center; background: #fff; border: 1px dashed rgba(0, 103, 243, 0.3); border-radius: var(--radius-md); padding: 16px; } .page-activities .achievements-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr; gap: 0; align-items: stretch; overflow: hidden; border-radius: var(--card-radius); background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); } .page-activities .achievement-card { display: flex; align-items: flex-start; gap: 12px; padding: 20px 18px; min-height: 240px; backdrop-filter: blur(6px); border-left: 1px solid rgba(0, 103, 243, 0.08); } /* .page-activities .achievements-grid .achievement-sub-grid { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 12px; } */ .page-activities .achievements-grid .achievements-icons { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 145deg, rgba(0, 103, 243, 0.08), rgba(255, 255, 255, 0.95) ); color: var(--primary-blue); box-shadow: 0 8px 18px rgba(12, 45, 94, 0.06); font-size: 0.95rem; } /* .page-activities .achievements-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .page-activities .achievement-card { position: relative; overflow: hidden; min-height: 100px; border-radius: 28px; padding: 24px 22px 22px; border-top: 1px var(--primary-blue) solid; background: radial-gradient(circle at 100% 100%, rgba(99, 148, 230, 0.18), transparent 22%), linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); border: 1px solid rgba(0, 103, 243, 0.08); box-shadow: 0 22px 40px rgba(8, 30, 66, 0.08); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); backdrop-filter: blur(6px); } */ .page-activities .achievement-card p { border-top-color: rgba(255, 255, 255, 0.22); } /* .page-activities .achievement-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } */ .page-activities .achievement-value { position: relative; z-index: 1; margin-top: 22px; color: #132545; font-size: clamp(2.7rem, 4vw, 3rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; } .page-activities .achievement-title { position: relative; z-index: 1; margin-top: 12px; color: #17274a; font-size: 1.02rem; line-height: 1.15; font-weight: 700; } .page-activities .achievement-desc { position: relative; z-index: 1; padding-top: 12px; border-top: 1px solid var(--accent-yellow); color: #5e6c86; font-size: 0.92rem; line-height: 1.55; } .page-activities .showcase-container { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; } .page-activities .showcase-wrap { background: #fff; border-radius: 22px; border: 1px solid rgba(17, 17, 17, 0.08); box-shadow: var(--shadow-soft); padding: 24px; } .page-activities .showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .page-activities .showcase-list { margin-top: 20px; padding: 0; list-style: none; display: grid; gap: 11px; } .page-activities .showcase-list li { position: relative; padding-left: 20px; color: var(--muted-text); } .page-activities .showcase-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--primary-blue); font-size: 1.05rem; font-weight: 700; } .page-activities .showcase-panel { border-radius: var(--card-radius); border: var(--card-border); background: var(--card-bg); padding: 20px; } .page-activities .badge-row { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .page-activities .badge { display: inline-flex; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(0, 103, 243, 0.24); color: #2455a8; background: rgba(255, 255, 255, 0.8); font-size: clamp(0.46rem, 2.2vw, 0.82rem); font-weight: 600; } .page-activities .cta-wrap p { max-width: 680px; margin: 12px auto 0; opacity: 0.9; } .page-activities .btn-outline { margin-top: 24px; display: inline-flex; background: #fff; color: var(--primary-blue); border-radius: 999px; font-weight: 700; padding: 12px 22px; box-shadow: 0 14px 28px rgba(10, 48, 113, 0.18); } .page-activities .btn-outline:hover { transform: scale(1.04); box-shadow: 0 16px 30px rgba(10, 48, 113, 0.25); } /* Leadership */ .page-leadership section { padding: 58px 0; } .page-leadership .hero-section { display: flex; flex-direction: column; justify-content: center; text-align: center; } .page-leadership .hero { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 64px; } .page-leadership .hero::before, .page-leadership .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; } .page-leadership .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-leadership .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-leadership .hero h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); margin-bottom: 14px; } .page-leadership .hero-art { min-height: 320px; border-radius: 22px; background: radial-gradient( circle at 18% 16%, rgba(255, 255, 255, 0.42), transparent 32% ), linear-gradient(145deg, #c9e0ff, #8ebdff 55%, #5ea2ff 100%); border: 1px solid rgba(0, 103, 243, 0.2); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .page-leadership .hero-art::before { content: ""; position: absolute; width: 182px; height: 182px; border-radius: 50%; right: -30px; top: -26px; background: rgba(255, 255, 255, 0.48); } .page-leadership .hero-art::after { content: ""; position: absolute; width: 102px; height: 102px; border-radius: 50%; left: 24px; bottom: 24px; background: rgba(243, 225, 57, 0.82); } .page-leadership .section-head { max-width: 760px; margin-bottom: 30px; } .page-leadership .spotlight-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 24px; } .page-leadership .leader-portrait { min-height: 280px; border-radius: 18px; background: radial-gradient( circle at 28% 24%, rgba(255, 255, 255, 0.5), transparent 30% ), linear-gradient(145deg, #d7e8ff, #a8cfff 55%, #7ab3ff 100%); border: 1px solid rgba(0, 103, 243, 0.16); position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } .page-leadership .leader-portrait::after { content: "CEO"; position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.84); color: #184488; font-size: 0.82rem; font-weight: 700; } .page-leadership .spotlight-copy h3, .page-leadership .team-card h3, .page-leadership .stream-card h3 { color: #152749; } .page-leadership .spotlight-copy .eyebrow { color: #2b6fd2; } .page-leadership .leadership-grid, .page-leadership .stream-grid { display: grid; gap: 18px; } .page-leadership .leadership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .leadership-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .leadership-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leadership-grid.cols-1 { grid-template-columns: 1fr; } .leadership-grid.is-loading { opacity: 0.7; pointer-events: none; position: relative; } .page-leadership .leadership-grid.is-loading::after { content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100% ); animation: shimmer-move 1.2s infinite; } @keyframes shimmer-move { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } .page-leadership .stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-leadership .team-card, .page-leadership .stream-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 22px; border: var(--card-border); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-leadership .supervisor-avatar-image { width: 90px; height: 90px; aspect-ratio: 1/1; object-fit: cover; margin-right: 8px; border-radius: var(--radius-lg); border: 1px solid rgba(0, 103, 243, 0.18); } .page-leadership .supervisor-profile { margin-top: 10px; display: flex; align-items: center; } .page-leadership .supervisor-desc { line-height: 2; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(2em - 1px), rgba(0, 103, 243, 0.18) calc(2em - 1px), rgba(0, 103, 243, 0.18) 2em ); } .page-leadership .team-card:hover, .page-leadership .stream-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } /* .page-leadership .team-card, .page-leadership .stream-card { background: #fff; border: 1px solid rgba(17, 17, 17, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 22px; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-leadership .team-card:nth-child(odd), .page-leadership .stream-card:nth-child(odd) { border-top: 4px solid rgba(0, 103, 243, 0.38); } .page-leadership .team-card:nth-child(even), .page-leadership .stream-card:nth-child(even) { border-top: 4px solid rgba(243, 225, 57, 0.86); background: linear-gradient(160deg, #ffffff 0%, #fffef2 100%); } .page-leadership .team-card:hover, .page-leadership .stream-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .page-leadership .supervisor-profile { margin-top: 10px; display: flex; align-items: center; gap: 12px; } .page-leadership .supervisor-avatar { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px; background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.88) 0 14px, transparent 14px), radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.88) 0 18px, transparent 18px), linear-gradient(145deg, #90b9ff, #5f8ff3); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.52), 0 10px 18px rgba(26, 72, 160, 0.24); } .page-leadership .supervisor-avatar-image { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px; object-fit: cover; box-shadow: 0 10px 18px rgba(26, 72, 160, 0.24); } */ .page-leadership .supervisor-meta { border-radius: 24px; border-radius: var(--radius-lg); border: 1px solid rgba(0, 103, 243, 0.18); padding: 8px 16px 8px 16px; width: -webkit-fill-available; width: -moz-available; width: stretch; min-height: 90px; display: flex; flex-direction: column; justify-content: center; } .page-leadership .supervisor-meta h3 { font-size: 1.08rem; color: transparent; background: var(--brand-premium-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .page-leadership .supervisor-role { margin: 3px 0 0; color: #4c6795; font-size: 0.86rem; font-weight: 600; } .page-leadership .team-card ul, .page-leadership .stream-card ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .page-leadership .team-card li, .page-leadership .stream-card li { position: relative; padding-left: 18px; color: var(--muted-text); } .page-leadership .team-card li::before, .page-leadership .stream-card li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--primary-blue); font-weight: 700; } .page-leadership .leadership-status-card { grid-column: 1 / -1; text-align: center; } .page-leadership .leadership-skeleton-card { border-top: 4px solid rgba(0, 103, 243, 0.18); } .page-leadership .skeleton-line, .page-leadership .skeleton-avatar { position: relative; overflow: hidden; background: linear-gradient(120deg, #e9eef7 0%, #f4f7fc 40%, #e9eef7 80%); } .page-leadership .skeleton-line::after, .page-leadership .skeleton-avatar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.72) 50%, transparent 100% ); animation: leadership-shimmer 1.4s ease-in-out infinite; } .page-leadership .skeleton-line { display: block; border-radius: 999px; height: 11px; margin: 0; } .page-leadership .skeleton-line-sm { width: 36%; } .page-leadership .skeleton-line-md { width: 72%; margin-top: 2px; } .page-leadership .skeleton-line-lg { width: 100%; } .page-leadership .supervisor-meta .skeleton-line-sm { width: 56%; margin-top: 9px; } .page-leadership .skeleton-avatar { box-shadow: none; } @keyframes leadership-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .page-leadership .skeleton-line::after, .page-leadership .skeleton-avatar::after { animation: none; } } .page-leadership .cta-wrap p { max-width: 680px; margin: 12px auto 0; opacity: 0.9; } .page-leadership .btn-outline { margin-top: 24px; display: inline-flex; background: #fff; color: var(--primary-blue); border-radius: 999px; font-weight: 700; padding: 12px 22px; box-shadow: 0 14px 28px rgba(10, 48, 113, 0.18); } .page-leadership .btn-outline:hover { transform: scale(1.04); box-shadow: 0 16px 30px rgba(10, 48, 113, 0.25); } /* Blog */ .page-blog section { padding: 58px 0; } .page-blog .hero { padding-top: 68px; text-align: center; } .page-blog .hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 14px; color: #132545; } .page-blog .hero .eyebrow, .page-blog .section-head .eyebrow { color: var(--section-eyebrow-color); } .page-blog .section-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-bottom: 30px; } .page-blog .section-head-copy { flex: 1; min-width: 0; max-width: 760px; } .page-blog .search-box { margin-top: 0; margin-left: auto; display: flex; align-items: center; align-self: flex-end; gap: 10px; height: 60px; width: clamp(180px, 100%, 280px); background: #fff; border-radius: 999px; border: 1px solid rgba(0, 103, 243, 0.2); padding: 7px; box-shadow: var(--shadow-soft); } .page-blog .search-box input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 10px 14px; font-size: 0.95rem; font-family: inherit; cursor: text; } .page-blog .search-box input::-webkit-search-cancel-button, .page-blog .search-box input::-webkit-search-decoration, .page-blog .search-box input::-webkit-search-results-button, .page-blog .search-box input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; } .page-blog .blog-search-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; padding: 12px; } .page-blog .blog-search-button svg { width: 18px; height: 18px; fill: currentColor; } @media (max-width: 900px) { .page-blog .section-head { grid-template-columns: 1fr; } } .page-blog .hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } .page-blog .hero-grid .blog-card { grid-row: span 2; } .page-blog .blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .page-blog .podcast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .page-blog .blog-card.is-hidden, .page-blog .podcast-card.is-hidden { display: none; } .page-blog .blog-search-empty { margin: 26px 0 0; text-align: center; color: #50627d; font-size: 0.96rem; } .page-blog .blog-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-blog .blog-card-link { display: grid; color: inherit; text-decoration: none; } .page-blog .podcast-card { background: var(--brand-premium-gradient); border-radius: var(--card-radius); border: none; overflow: hidden; box-shadow: var(--card-shadow); } .page-blog .podcast-card-body { padding: 20px; } .page-blog .podcast-card-body h3 { color: var(--bg-white); font-size: 1.2rem; margin-bottom: 8px; } .page-blog .blog-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-blog .podcast-card:hover { transform: translateY(-4px); } .page-blog .blog-card-art { position: relative; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; transition: filter var(--transition-fast); } .page-blog .podcast-card-art { position: relative; aspect-ratio: 16 / 9; display: grid; transition: filter var(--transition-fast); } .page-blog .blog-tag { position: absolute; left: 12px; top: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #352506; background: linear-gradient(150deg, #f3e139 0%, #ffe947 58%, #ffe99b 100%); z-index: 2; } .page-blog .blog-art-icon { font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 1; filter: drop-shadow(0 10px 14px rgba(8, 50, 120, 0.28)); } .page-blog .blog-art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-blog .blog-card-copy { display: grid; gap: 10px; padding: 18px; background: #ffffff; } .page-blog .blog-card-date { margin: 0; color: #5b6780; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; } .page-blog .blog-card-copy h3 { margin: 0; color: #152749; font-size: 1.08rem; line-height: 1.3; line-clamp: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .page-blog .blog-card-excerpt { margin: 0; color: #465066; font-size: 0.95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .page-blog .read-link { display: inline-flex; align-items: center; gap: 8px; color: #1d63cf; font-weight: 600; font-size: 0.86rem; transition: gap var(--transition-fast), color var(--transition-fast); } .page-blog .read-link:hover { gap: 14px; color: #0e4da8; } .page-blog .blog-card:hover .blog-card-art { filter: brightness(0.84); } .page-blog-post .blog-post-article { max-width: 860px; margin-top: 20px; display: grid; gap: 14px; } .page-blog-post .blog-post-tag { position: static; width: fit-content; } .page-blog-post .blog-post-article h1 { margin: 0; color: #132545; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; } .page-blog-post .blog-post-meta { margin: 0; color: #5c6f8d; font-size: 0.9rem; } .page-blog-post .blog-post-cover { width: 100%; border-radius: 18px; border: 1px solid rgba(0, 103, 243, 0.12); box-shadow: var(--shadow-soft); aspect-ratio: 16 / 9; object-fit: cover; } .page-blog-post .blog-post-content { color: #20324f; font-size: 1rem; line-height: 1.8; display: grid; gap: 12px; } .page-blog-post .blog-post-content h2, .page-blog-post .blog-post-content h3 { margin: 8px 0 0; color: #132545; } .page-blog-post .blog-post-content p, .page-blog-post .blog-post-content blockquote, .page-blog-post .blog-post-content figure { margin: 0; } .page-blog-post .blog-post-content blockquote { border-left: 4px solid #2b6fd2; padding: 8px 0 8px 14px; color: #35527f; } .page-blog-post .blog-post-content figure img { width: 100%; border-radius: 14px; border: 1px solid rgba(0, 103, 243, 0.1); } /* Responsive */ @media (max-width: 1040px) { .page-home .hero-grid, .page-about .hero-grid, .page-pathways .hero-grid, .page-contact .hero-grid, .page-destinations .hero-grid, .page-activities .hero-grid, .page-leadership .hero-grid { grid-template-columns: 1fr; } .page-home .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-about .timeline-grid, .page-about .value-grid, .page-about .split-grid, .page-destinations .country-grid, .page-pathways .pathway-grid, .page-activities .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-about .main-panel { display: none; } .page-about .hero-art { display: none; } .page-home .destination-experience { grid-template-columns: 1fr; gap: 22px; } .page-home .about-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home .destination-copy { max-width: none; } .page-home .destination-visual { min-height: 560px; } .page-home .destination-spot-card { width: min(210px, 40vw); } .page-home .spot-europe { top: 48px; left: -2%; } .page-home .spot-malaysia { top: 226px; left: -2%; } .page-home .spot-thailand { top: 402px; left: -2%; } .page-home .spot-japan { top: 48px; right: -2%; } .page-home .spot-taiwan { top: 226px; right: -2%; } .page-home .spot-singapore { top: 402px; right: -2%; } .page-home .soft-globe { left: 50%; transform: translate(-50%, -52%); } .page-home .destination-info-card { top: auto; bottom: 20px; transform: none; } .page-home .destination-side-rail { display: none; } .page-leadership .leadership-grid, .page-leadership .stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-leadership .spotlight-card { grid-template-columns: 1fr; } .page-activities .showcase-grid { grid-template-columns: 1fr; } .page-blog .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-blog .section-head { align-items: stretch; } .page-home .soft-globe, .page-destinations .globe { margin: 0 auto; } .page-destinations .destinations-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); } .page-destinations .destinations-hero-visual { min-height: 420px; } .page-destinations .discovery-globe { left: 50%; width: clamp(300px, 66vw, 450px); } .page-destinations .line-a { left: 2%; } .page-destinations .line-b { right: 2%; } .page-destinations .float-eu { left: 2%; top: 9%; } .page-destinations .float-asia { right: 2%; bottom: 7%; } .page-destinations .destination-feature-card { grid-template-columns: 1fr; } .page-destinations .destination-feature-card .destination-media { min-height: 220px; } .page-destinations .destination-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-destinations .destination-editorial-card.is-wide { grid-column: auto; } } @media (max-width: 900px) { .page-destinations .destinations-hero-grid { grid-template-columns: 1fr; } .page-destinations .destinations-hero-visual { min-height: 500px; } } @media (max-width: 900px) { .page-destinations section { padding: 52px 0; } .page-destinations .hero { padding-top: 56px; padding-bottom: 56px; } .page-destinations .hero h1 { font-size: clamp(1.95rem, 10vw, 2.6rem); max-width: none; } .page-destinations .destinations-hero-copy > p:not(.eyebrow) { font-size: 1.02rem; line-height: 1.55; } .page-destinations .destinations-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .page-destinations .destinations-hero-actions .site-footer-button, .page-destinations .destinations-hero-actions .site-footer-link { width: 100%; justify-content: center; text-align: center; } .page-destinations .destination-filter-pills { gap: 8px; } .page-destinations .destination-filter-pills span { font-size: 0.72rem; min-height: 30px; padding: 5px 10px; } .page-destinations .destinations-hero-visual { min-height: 400px; margin-top: 8px; } .page-destinations .discovery-globe { width: min(88vw, 340px); } .page-destinations .floating-card { min-width: 0; max-width: min(78vw, 260px); padding: 10px 12px; border-radius: 14px; } .page-destinations .float-eu { left: 6%; top: 8%; } .page-destinations .float-asia { right: 6%; bottom: 6%; } .page-destinations .destination-metrics { grid-template-columns: 1fr; } .page-home .about-stats-grid { grid-template-columns: 1fr; } .page-home .about-strip { grid-template-columns: 1fr 1fr; } .page-home .about-strip-item + .about-strip-item { border-left: none; border-top: 1px solid rgba(0, 103, 243, 0.08); } .page-home .about-strip-item { min-height: auto; } } /* pathway detail */ .page-pathway-detail .hero { position: relative; overflow: hidden; padding-top: 70px; padding-bottom: 58px; } .page-pathway-detail .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; } .page-pathway-detail .hero::before, .page-pathway-detail .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; } .page-pathway-detail .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-pathway-detail .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-pathway-detail .hero h1 { font-size: clamp(2.2rem, 4.7vw, 4rem); max-width: 640px; margin-bottom: 16px; } .page-pathway-detail .hero p:not(.eyebrow) { max-width: 620px; } .page-pathway-detail .hero-facts-strip { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 800px; } .page-pathway-detail .hero-fact { display: grid; grid-template-columns: 0.8fr 1.2fr; position: relative; padding: 18px 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 118, 209, 0.12); box-shadow: 0 18px 34px rgba(35, 77, 150, 0.1); backdrop-filter: blur(12px); } .page-pathway-detail .hero-fact .hero-fact-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .page-pathway-detail .hero-fact strong { display: block; color: #132545; font-size: 0.78rem; line-height: 1.25; letter-spacing: -0.01em; } .page-pathway-detail .hero-fact:nth-child(1) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(42, 116, 255, 0.12), rgba(159, 211, 255, 0.32) ); } .page-pathway-detail .hero-fact:nth-child(2) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(243, 225, 57, 0.14), rgba(255, 243, 163, 0.35) ); } .page-pathway-detail .hero-fact:nth-child(3) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(34, 197, 94, 0.12), rgba(134, 239, 172, 0.32) ); } .page-pathway-detail .country-hero-visual { position: relative; min-height: 450px; } .page-pathway-detail .country-hero-visual .hero-image { width: min(360px, 72vw); margin-top: 28px; } .page-pathway-detail .pathway-floating-card { position: absolute; max-width: 260px; border-radius: 24px; padding: 20px; backdrop-filter: blur(10px); box-shadow: 0 20px 44px rgba(21, 48, 97, 0.16); } .page-pathway-detail .pathway-floating-card-accent { right: 8px; bottom: 20px; background: radial-gradient( circle at 100% 0%, rgba(243, 225, 57, 0.24), transparent 34% ), linear-gradient( 160deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.94) ); border: 1px solid rgba(0, 103, 243, 0.16); } .page-pathway-detail .country-floating-card h3 { margin-top: 12px; margin-bottom: 8px; } .page-pathway-detail .pathway-floating-stat { margin: 0; color: #0d57c4; font-size: 1.4rem; line-height: 1.8; flex: 0 0 auto; font-weight: 800; } .page-pathway-detail .detail-link { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; margin-top: 18px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-size: 0.92rem; font-weight: 700; border: 1px solid rgba(0, 103, 243, 0.16); background: rgba(255, 255, 255, 0.76); color: #184488; box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .page-pathway-detail .detail-link:hover { transform: translateY(-2px); border-color: rgba(0, 103, 243, 0.32); box-shadow: var(--shadow-hover); color: var(--primary-blue); } .page-pathway-detail .overview-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 18px; } .page-pathway-detail .requirement-card, .page-pathway-detail .detail-card, .page-pathway-detail .journey-card { position: relative; overflow: hidden; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 24px; box-shadow: var(--card-shadow); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-pathway-detail .journey-card::before { content: ""; position: absolute; top: 24px; left: 0px; bottom: 24px; width: 5px; height: auto; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #2a74ff, #87c2ff); } .page-pathway-detail .journey-grid, .page-pathway-detail .opportunity-grid { display: grid; gap: 18px; } .page-pathway-detail .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-pathway-detail .journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-pathway-detail .opportunity-head { display: grid; grid-template-columns: 0.4fr 1.6fr; gap: 16px; margin-bottom: 16px; } .page-pathway-detail .opportunity-head .opportunity-icon { width: 100%; height: 100%; display: flex; align-items: center; background: #fff; justify-content: center; border: 1px solid rgba(0, 103, 243, 0.14); border-radius: var(--radius-lg); color: var(--primary-blue); font-size: 1.6rem; position: relative; } .page-pathway-detail .detail-card:hover, .page-pathway-detail .requirement-card:hover, .page-pathway-detail .journey-card:hover, .page-pathway-detail .opportunity-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-pathway-detail .journey-card .journey-desc, .page-pathway-detail .benefit-list, .page-pathway-detail .opportunity-list { padding-top: 8px; border-top: 1px solid rgba(0, 103, 243, 0.16); } .page-pathway-detail .opportunity-card { position: relative; overflow: hidden; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); padding: 22px; border: 1px solid rgba(0, 103, 243, 0.18); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-pathway-detail .opportunity-card::before, .requirement-card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 4px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #2a74ff, #87c2ff); } .page-pathway-detail #journey-process .pathway-floating-stat { margin: 0; color: #0d57c4; font-size: 2.3rem; line-height: 0.9; flex: 0 0 auto; font-weight: 800; } .page-pathway-detail #journey-process .pathway-floating-stat .stat-first-number { opacity: 0.8; } .page-pathway-detail .pathway-detail-actions { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .page-pathway-detail .pathway-detail-strip { border-top: 1px solid rgba(0, 103, 243, 0.18); margin-top: 26px; padding-top: 26px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } /* Country detail */ .page-country-detail .hero { position: relative; overflow: hidden; padding-top: 70px; padding-bottom: 58px; } .page-country-detail .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; } .page-country-detail .hero::before, .page-country-detail .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; } .page-country-detail .hero::before { width: 440px; height: 440px; top: -130px; left: -110px; background: radial-gradient( circle, rgba(0, 103, 243, 0.22), rgba(0, 103, 243, 0) ); } .page-country-detail .hero::after { width: 360px; height: 360px; right: -80px; bottom: -130px; background: radial-gradient( circle, rgba(243, 225, 57, 0.24), rgba(243, 225, 57, 0) ); } .page-country-detail .hero h1 { font-size: clamp(2.2rem, 4.7vw, 4rem); max-width: 640px; margin-bottom: 16px; } .page-country-detail .hero p:not(.eyebrow) { max-width: 620px; } .page-country-detail .hero-facts-strip { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 800px; } .page-country-detail .hero-fact { display: grid; grid-template-columns: 0.8fr 1.2fr; position: relative; padding: 18px 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(72, 118, 209, 0.12); box-shadow: 0 18px 34px rgba(35, 77, 150, 0.1); backdrop-filter: blur(12px); } .page-country-detail .hero-fact .hero-fact-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .page-country-detail .hero-fact strong { display: block; color: #132545; font-size: 0.78rem; line-height: 1.25; letter-spacing: -0.01em; } .page-country-detail .hero-fact:nth-child(1) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(42, 116, 255, 0.12), rgba(159, 211, 255, 0.32) ); } .page-country-detail .hero-fact:nth-child(2) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(243, 225, 57, 0.14), rgba(255, 243, 163, 0.35) ); } .page-country-detail .hero-fact:nth-child(3) .hero-icons { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 18px; background: linear-gradient( 145deg, rgba(34, 197, 94, 0.12), rgba(134, 239, 172, 0.32) ); } .page-country-detail .country-hero-visual { position: relative; min-height: 450px; } .page-country-detail .country-hero-visual .globe { width: min(360px, 72vw); margin-top: 28px; } .page-country-detail .country-floating-card { position: absolute; max-width: 260px; border-radius: 24px; padding: 20px; backdrop-filter: blur(10px); box-shadow: 0 20px 44px rgba(21, 48, 97, 0.16); } .page-country-detail .country-floating-card-accent { right: 8px; bottom: 20px; background: radial-gradient( circle at 100% 0%, rgba(243, 225, 57, 0.24), transparent 34% ), linear-gradient( 160deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.94) ); border: 1px solid rgba(0, 103, 243, 0.16); } .page-country-detail .country-floating-card h3 { margin-top: 12px; margin-bottom: 8px; } .page-country-detail .country-floating-stat { margin: 0; color: #0d57c4; font-size: 1.4rem; line-height: 1.8; flex: 0 0 auto; font-weight: 800; } .page-country-detail .requirement-card, .page-blog-detail .detail-card, .page-country-detail .detail-card, .page-country-detail .visa-card { position: relative; overflow: hidden; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .page-country-detail #visa-process { position: relative; overflow: visible; } .page-country-detail #visa-process .container { position: relative; z-index: 1; } .page-country-detail #visa-process .container > svg[aria-hidden="true"] { position: absolute; top: 0; /* left: min(calc(50% + 188px), calc(100% - 360px)); */ right: 0; width: clamp(230px, 30vw, 347px); pointer-events: none; opacity: 0.95; z-index: 0; display: block; height: auto; width: 280px; } .page-country-detail .country-detail-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } .page-country-detail .overview-section { margin-bottom: 20px; } .page-country-detail .overview-desc { padding-top: 8px; border-top: 1px solid rgba(0, 103, 243, 0.16); } .page-country-detail .opportunity-head { display: grid; grid-template-columns: 0.4fr 1.6fr; gap: 16px; margin-bottom: 16px; } .page-country-detail .opportunity-head .opportunity-icon { width: 100%; height: 100%; display: flex; align-items: center; background: #fff; justify-content: center; border: 1px solid rgba(0, 103, 243, 0.14); border-radius: var(--radius-lg); color: var(--primary-blue); font-size: 1.6rem; position: relative; } .page-country-detail .detail-link { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate; margin-top: 18px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-size: 0.92rem; font-weight: 700; border: 1px solid rgba(0, 103, 243, 0.16); background: rgba(255, 255, 255, 0.76); color: #184488; box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .page-country-detail .detail-link:hover { transform: translateY(-2px); border-color: rgba(0, 103, 243, 0.32); box-shadow: var(--shadow-hover); color: var(--primary-blue); } .page-country-detail .journey-grid, .page-country-detail .opportunity-grid { margin-top: 10px; display: grid; gap: 18px; } .page-country-detail .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-country-detail .journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-country-detail .detail-card { overflow: hidden; } .page-country-detail .detail-card:hover, .page-country-detail .requirement-card:hover, .page-country-detail .visa-card:hover, .page-country-detail .opportunity-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: var(--card-border-hover); } .page-country-detail #visa-process .country-floating-stat { margin: 0; color: #0d57c4; font-size: 2.3rem; line-height: 0.9; flex: 0 0 auto; font-weight: 800; } .page-country-detail #visa-process .country-floating-stat .stat-first-number { opacity: 0.8; } .page-country-detail .detail-card-no-accent::before { display: none; } /* .page-blog-detail .detail-card-feature .detail-card-body, */ .page-country-detail .detail-card-feature .detail-card-body, .page-country-detail .requirement-card, .page-country-detail .visa-card { padding: 24px; } .page-country-detail .section-card-meta { gap: 8px; padding-bottom: 4px; margin-bottom: 4px; } .page-country-detail .visa-card .section-card-meta h3 { margin-top: 4px; font-size: 1.3rem; font-weight: 800; flex: 0 0 auto; } .page-country-detail .visa-card .visa-desc, .page-country-detail .benefit-list, .page-country-detail .opportunity-list { padding-top: 8px; border-top: 1px solid rgba(0, 103, 243, 0.16); } .page-country-detail .section-card-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; color: #0f5fce; } .page-country-detail .section-card-icon svg { width: 40px; height: 40px; display: block; fill: currentColor; } .page-country-detail .section-head { margin-bottom: 32px; } .page-country-detail .country-detail-actions { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .page-country-detail .detail-link:hover { transform: translateY(-2px); border-color: rgba(0, 103, 243, 0.32); box-shadow: var(--shadow-hover); color: var(--primary-blue); } .page-country-detail .visa-card::before { content: ""; position: absolute; top: 24px; left: 0px; bottom: 24px; width: 5px; height: auto; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #2a74ff, #87c2ff); } .page-country-detail .opportunity-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; width: auto; height: 5px; z-index: 2; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #2a74ff, #87c2ff); } .page-country-detail .opportunity-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 22px; border: 1px solid rgba(0, 103, 243, 0.18); border-radius: 24px; transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .detail-grid .detail-card:first-child { grid-column: 1 / -1; } .detail-card-feature { grid-row: span 2; } #overview .section-head { margin-left: auto; margin-right: auto; text-align: center; } .page-country-detail .overview-grid { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 18px; padding: 30px; } .page-country-detail .overview-icons { display: flex; align-items: center; justify-content: center; border-radius: 18px; } .page-country-detail .overview-icons img { aspect-ratio: 1/1; border-radius: 18px; width: 140px; border: 1px solid rgba(0, 103, 243, 0.14); } @media (max-width: 1100px) { .menu-btn { display: flex; } .nav-links { display: none; } } @media (max-width: 900px) { .page-home section, .page-about section, .page-pathways section, .page-contact section, .page-activities section, .page-leadership section, .page-blog section { padding: 48px 0; } .page-destinations section { padding: 46px 0; } .page-destinations .hero { padding-top: 58px; padding-bottom: 52px; } .page-destinations .hero h1 { max-width: none; font-size: clamp(2rem, 10vw, 2.9rem); } .page-contact .contact-hero { padding-top: 54px; padding-bottom: 10px; } .page-contact .contact-hero-copy { padding-top: 0; text-align: center; } .page-contact .contact-hero h1 { font-size: clamp(1.95rem, 9vw, 2.75rem); margin-left: auto; margin-right: auto; } .page-contact .contact-hero-intro { margin-left: auto; margin-right: auto; } .page-contact .contact-hero-actions, .page-contact .contact-form-actions { flex-direction: column; align-items: stretch; } .page-contact .hero-image { order: -1; } .page-contact .hero-img { width: min(100%, 220px); } .page-contact .contact-secondary-link, .page-contact .contact-form-actions .btn-primary { width: 100%; } .page-contact .contact-channel-card, .page-contact .contact-form-card, .page-contact .contact-visit-card, .page-contact .contact-faq-card, .page-contact .contact-process-card { border-radius: 22px; } .page-destinations .destinations-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .page-destinations .destinations-hero-actions .site-footer-button, .page-destinations .destinations-hero-actions .site-footer-link { width: 100%; justify-content: center; text-align: center; } .page-destinations .destination-filter-pills { gap: 8px; } .page-destinations .destination-filter-pills span { font-size: 0.72rem; min-height: 30px; padding: 5px 10px; } .page-destinations .destinations-hero-visual { min-height: 430px; } .page-destinations .floating-card { min-width: 0; max-width: min(78vw, 260px); padding: 10px 12px; border-radius: 14px; } .page-destinations .float-eu { left: 6%; top: 8%; } .page-destinations .float-asia { right: 6%; bottom: 6%; } .page-destinations .destination-metrics { grid-template-columns: 1fr; } .page-home .about-stats-grid { grid-template-columns: 1fr; } .page-home .about-strip { grid-template-columns: 1fr 1fr; } .page-home .about-strip-item + .about-strip-item { border-left: none; border-top: 1px solid rgba(0, 103, 243, 0.08); } .page-home .about-strip-item { min-height: auto; } } .page-blog-detail .blog-content { margin-top: 20px; } .blog-detail-hero-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); } .blog-card { position: relative; overflow: hidden; border-radius: 8px; background: #f0f0f0; } .blog-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-detail-hero-grid.items-1 { grid-template-columns: 1fr; } .items-1 .blog-card { aspect-ratio: 1 / 1; } .items-2 { grid-template-columns: repeat(2, 1fr); } .items-2 .blog-card { aspect-ratio: 1 / 1; } .items-3 { grid-template-columns: 2fr 1fr; } .items-3 .blog-card:first-child { grid-row: span 2; } .items-3 .blog-card:nth-child(2), .items-3 .blog-card:nth-child(3) { grid-column: 2; } .items-4 { grid-template-columns: repeat(2, 1fr); } .items-4 .blog-card { aspect-ratio: 1 / 1; } .more-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 600; } .fb-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; } .fb-lightbox[hidden] { display: none !important; } .fb-lightbox-image { max-width: 90%; max-height: 85%; object-fit: contain; border-radius: 6px; } .fb-close { position: absolute; top: 20px; right: 24px; font-size: 28px; color: #fff; background: none; border: none; cursor: pointer; } .fb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; color: #fff; background: none; border: none; cursor: pointer; } .fb-prev { left: 20px; } .fb-next { right: 20px; } @media (max-width: 900px) { .page-home section, .page-about section, .page-pathways section, .page-contact section, .page-activities section, .page-leadership section, .page-blog section { padding: 48px 0; } .page-destinations section { padding: 46px 0; } .page-destinations .hero { padding-top: 58px; padding-bottom: 52px; } .page-destinations .hero h1 { max-width: none; font-size: clamp(2rem, 10vw, 2.9rem); } .page-destinations .destinations-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .page-destinations .destinations-hero-actions .site-footer-button, .page-destinations .destinations-hero-actions .site-footer-link { width: 100%; justify-content: center; text-align: center; } .page-destinations .destination-filter-pills { gap: 8px; } .page-destinations .destination-filter-pills span { font-size: 0.72rem; min-height: 30px; padding: 5px 10px; } .page-destinations .destinations-hero-visual { min-height: 430px; } .page-destinations .floating-card { min-width: 0; max-width: min(78vw, 260px); padding: 10px 12px; border-radius: 14px; } .page-destinations .float-eu { left: 6%; top: 8%; } .page-destinations .float-asia { right: 6%; bottom: 6%; } .page-destinations .destination-metrics { grid-template-columns: 1fr; } .page-home .about-stats-grid { grid-template-columns: 1fr; } .page-home .about-strip { grid-template-columns: 1fr 1fr; } .page-home .about-strip-item + .about-strip-item { border-left: none; border-top: 1px solid rgba(0, 103, 243, 0.08); } .page-home .about-strip-item { min-height: auto; } .page-contact .contact-hub-grid { grid-template-columns: 1fr; } } /* ================================================================ MOBILE — additional responsive patches ================================================================ */ /* 1040px — missing hero-grids and grid collapses */ @media (max-width: 1040px) { .page-blog .hero-grid, .page-country-detail .hero-grid, .page-pathway-detail .hero-grid { grid-template-columns: 1fr; } .page-country-detail .hero-facts-strip, .page-pathway-detail .hero-facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .page-blog .podcast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-grid-main { grid-template-columns: 1fr; } .page-pathway-detail .overview-grid { grid-template-columns: 1fr; } .page-pathway-detail .journey-grid, .page-country-detail .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-pathway-detail .opportunity-grid, .page-country-detail .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-pathway-detail .pathway-detail-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-grid { grid-template-columns: 1fr; } .detail-grid .detail-card:first-child { grid-column: auto; } .page-country-detail .country-detail-grid { grid-template-columns: 1fr; } } /* 900px — tablet + mobile layout overrides */ @media (max-width: 900px) { /* About — smaller cards, keep 2-column grid layout */ .page-about .value-card { padding: 16px 14px 14px; min-height: 110px; } .page-about .value-card h3 { font-size: 1.35rem; } .page-about .card, .page-about .timeline-card { padding: 16px; } .page-about .timeline-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .page-about .cards-grid { gap: 12px; } /* About — linearize the centre-line timeline into a left-rail layout */ .page-about .timeline::before { left: 22px; transform: none; } .page-about .timeline-item { grid-template-columns: 1fr; padding-left: 44px; } .page-about .timeline-card, .page-about .timeline-item.right .timeline-card { grid-column: 1; } .page-about .timeline-dot { left: 22px; top: 28px; transform: translateX(-50%); } .page-about .main-panel { display: none; } /* Blog — stack section-head so search box wraps below the heading */ .page-blog .section-head { flex-direction: column; align-items: stretch; gap: 16px; } .page-blog .search-box { width: 100%; min-width: 0; margin-left: 0; } /* Country / Pathway detail pages */ .page-country-detail .hero-facts-strip, .page-pathway-detail .hero-facts-strip { grid-template-columns: 1fr; max-width: none; } .page-pathway-detail .journey-grid, .page-pathway-detail .opportunity-grid, .page-pathway-detail .pathway-detail-strip, .page-country-detail .journey-grid, .page-country-detail .opportunity-grid, .page-country-detail .country-detail-grid { grid-template-columns: 1fr; } .page-country-detail .overview-grid { grid-template-columns: 1fr; padding: 20px; } /* Keep destination visual from causing horizontal scroll */ .page-home .destination-visual { overflow: hidden; } /* Hide Destination Spotlight on mobile */ .page-home #destination { display: none; } /* Contact — stack form fields and content grids */ .page-contact .contact-form-grid, .page-contact .contact-bottom-grid { grid-template-columns: 1fr; } .page-contact .contact-process-grid { grid-template-columns: 1fr; } } /* Article card link — full-card clickable for CMS-rendered cards */ .page-home .article-card-link { display: block; color: inherit; text-decoration: none; } /* ================================================================ ABOUT PAGE — Mobile-specific layout (≤ 768px) ================================================================ */ @media (max-width: 768px) { /* General section spacing */ .page-about section { padding: 40px 0; } /* ── Hero ────────────────────────────────────────────────────── */ .page-about .hero { padding-top: 32px; padding-bottom: 28px; } .page-about .hero::before { width: 180px; height: 180px; top: -50px; left: -50px; } .page-about .hero::after { width: 150px; height: 150px; right: -40px; bottom: -40px; } .page-about .hero h1 { font-size: clamp(1.65rem, 5.8vw, 2.1rem); line-height: 1.25; margin-bottom: 10px; } .page-about .hero h1 br { display: none; } .page-about .hero-art { display: none; } /* ── Mission & Vision ──────────────────────────────────────── */ .page-about .main-panel { display: none; } .split-grid-main { gap: 0; } .page-about .split-side-grid { gap: 12px; } .page-about .panel { padding: 18px 16px; } .page-about .panel h3 { font-size: 1.2rem; line-height: 1.3; } .page-about .split-grid-1, .page-about .split-grid-2 { gap: 10px; align-items: center; } .page-about .MV-icons { width: 44px; height: 44px; font-size: 1.35rem; flex-shrink: 0; } .page-about .panel .desc { font-size: 0.87rem; padding-top: 10px; } /* ── Timeline ──────────────────────────────────────────────── */ .page-about .timeline { gap: 10px; } .page-about .timeline::before { left: 19px; transform: none; } .page-about .timeline-item { grid-template-columns: 1fr; padding-left: 40px; } .page-about .timeline-card, .page-about .timeline-item.right .timeline-card { grid-column: 1; } .page-about .timeline-dot { left: 19px; top: 24px; transform: translateX(-50%); } .page-about .timeline-card { padding: 14px 14px 14px 16px; } .page-about .timeline-card-grid { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; } .page-about .timeline-icons { width: 44px; height: 44px; font-size: 1.15rem; aspect-ratio: 1 / 1; align-self: start; } .page-about .timeline-card h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 6px; } .page-about .timeline-card p { margin-top: 8px; padding-top: 8px; font-size: 0.86rem; line-height: 1.5; } .page-about .timeline-card .eyebrow.eyebrow-tight { font-size: 0.68rem; padding: 3px 8px; margin-bottom: 5px; } /* ── Core Values ───────────────────────────────────────────── */ .page-about .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .page-about .value-card { padding: 18px 14px 14px; min-height: 115px; } .page-about .value-card h3 { font-size: 1.2rem; line-height: 1.2; } .page-about .value-card p { font-size: 0.85rem; line-height: 1.5; } /* ── Section heads ─────────────────────────────────────────── */ .page-about .section-head { margin-bottom: 20px; } } /* 360px — prevent nav overflow on the smallest phones */ @media (max-width: 360px) { .brand > span { display: none; } } /* 480px — small phone single-column collapses */ @media (max-width: 480px) { .page-home .stats-grid { grid-template-columns: 1fr; } .page-home .about-strip { grid-template-columns: 1fr; } .page-home .about-strip-item + .about-strip-item { border-left: none; border-top: 1px solid rgba(0, 103, 243, 0.08); } .page-blog .blog-grid, .page-blog .podcast-grid, .page-blog .hero-grid { grid-template-columns: 1fr; } .page-leadership .spotlight-card { grid-template-columns: 1fr; } .page-leadership .leader-portrait { min-height: 180px; } .page-leadership .leadership-grid, .page-leadership .stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-activities .achievements-grid { grid-template-columns: 1fr; } .page-country-detail .hero-facts-strip, .page-pathway-detail .hero-facts-strip { grid-template-columns: 1fr; } .page-destinations .country-grid { grid-template-columns: 1fr; } } /* ── Destinations dest-stats: hidden by default (mobile-only) ─── */ .dest-stats { display: none; } /* ═══════════════════════════════════════════════════════ Destinations — Mobile redesign (≤640px) Compact hero · 2-col card grid · horizontal feature card ═══════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Hero: minimal destination-browser strip */ .page-destinations .hero { padding: 22px 0 16px; } .page-destinations .destinations-hero-grid { grid-template-columns: 1fr; gap: 0; } .page-destinations .destinations-hero-visual { display: none; } /* Strip marketing copy — leave only headline + single CTA */ .page-destinations .destinations-hero-copy .eyebrow { display: none; } .page-destinations .hero h1 { font-size: clamp(1.45rem, 6vw, 1.85rem); max-width: none; margin-bottom: 12px; line-height: 1.25; } .page-destinations .destinations-hero-copy > p:not(.eyebrow) { display: none; } .page-destinations .destination-filter-pills { display: none; } .page-destinations .destinations-hero-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; margin-top: 0; grid-template-columns: none; } /* Hide secondary CTA — single action only on mobile */ .page-destinations .destinations-hero-actions .site-footer-link { display: none; } .page-destinations .destinations-hero-actions .site-footer-button { width: auto; font-size: 0.84rem; padding: 10px 22px; } /* Anchor offset: account for sticky header */ #destinations-europe, #destinations-asia { scroll-margin-top: 70px; } /* Region sections */ .page-destinations .region-section { padding: 22px 0 26px; } .page-destinations .region-head { margin-bottom: 12px; } .page-destinations .region-head h2 { font-size: clamp(1.15rem, 5.5vw, 1.4rem); margin-bottom: 2px; } .page-destinations .region-head p:not(.eyebrow) { font-size: 0.81rem; } /* 2-column grid — region-showcase hosts all cards directly */ .page-destinations .region-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Flatten country-grid so its children join the parent showcase grid */ .page-destinations .country-grid { display: contents; } /* Remove wide-span override — equal columns on mobile */ .page-destinations .destination-editorial-card.is-wide { grid-column: auto; } /* ── Feature card: horizontal full-width strip ────── */ .page-destinations .destination-feature-card { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: stretch; } .page-destinations .destination-feature-card .destination-media { width: 80px; min-height: auto; flex-shrink: 0; align-self: stretch; } .page-destinations .destination-feature-card .destination-content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 14px 14px; gap: 5px; } .page-destinations .destination-feature-card .destination-content h3 { font-size: 1rem; line-height: 1.2; } .page-destinations .destination-feature-card .destination-content > p { font-size: 0.78rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .page-destinations .destination-feature-card .destination-metrics { display: none; } .page-destinations .destination-feature-card .card-link { font-size: 0.78rem; align-self: flex-start; margin-top: auto; } /* ── Editorial cards: vertical portrait ──────────── */ .page-destinations .destination-editorial-card { display: flex; flex-direction: column; } .page-destinations .destination-editorial-card .destination-media { min-height: 68px; width: 100%; } .page-destinations .destination-editorial-card .destination-content { display: flex; flex-direction: column; flex: 1; padding: 9px 10px; gap: 5px; } .page-destinations .destination-editorial-card .destination-content h3 { font-size: 0.92rem; line-height: 1.2; } /* Hide body text on narrow grid cards */ .page-destinations .destination-editorial-card .destination-content > p { display: none; } .page-destinations .destination-editorial-card .card-link { display: inline-flex; width: fit-content; min-height: 28px; padding: 4px 10px; font-size: 0.65rem; align-self: flex-start; margin-top: auto; } /* Flag accent: centered in feature card strip (not carousel cards) */ .page-destinations .destination-feature-card .flag-accent { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Carousel cards override — restore full size (carousel cards are ~76vw wide, not grid tiles) */ .page-destinations .region-showcase > .destination-editorial-card .destination-media { min-height: 150px; } .page-destinations .region-showcase > .destination-editorial-card .destination-content { padding: 14px 16px; gap: 8px; } .page-destinations .region-showcase > .destination-editorial-card .destination-content > p { display: block; } .page-destinations .region-showcase > .destination-editorial-card .destination-content h3 { font-size: 0.92rem; } .page-destinations .region-showcase > .destination-editorial-card .card-link { min-height: 36px; padding: 7px 16px; font-size: 0.75rem; width: fit-content; align-self: flex-start; } /* Tags: smaller pills */ .page-destinations .destination-tags { gap: 4px; } .page-destinations .destination-tags span { font-size: 0.65rem; padding: 2px 7px; min-height: 20px; } /* ── Quick-stat badges (tuition · work rights) ────── */ .page-destinations .dest-stats { display: flex; gap: 5px; flex-wrap: wrap; } .page-destinations .dest-stats span { display: inline-flex; align-items: center; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.01em; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 103, 243, 0.18); color: #1c4f9c; white-space: nowrap; } /* Suppress hover lift on touch devices */ .page-destinations .destination-feature-card:hover, .page-destinations .destination-editorial-card:hover { transform: none; box-shadow: var(--card-shadow); border-color: var(--card-border); } } /* ── Hero art + hero responsive rules (≤900px) ───────── */ @media (max-width: 900px) { :root { --section-title-size: clamp(1.35rem, 5vw, 1.7rem); } /* Hide all decorative hero visuals */ .page-home .hero-visual, .page-about .hero-art, .page-pathways .hero-art, .page-leadership .hero-art, .page-destinations .destinations-hero-visual, .page-country-detail .country-hero-visual, .page-pathway-detail .country-hero-visual, .page-activities .hero-img, .page-contact .hero-img { display: none; } /* Home hero: compact padding, scaled headline, stacked search */ .page-home .hero { padding-top: 44px; padding-bottom: 40px; } .page-home .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); max-width: none; margin-bottom: 12px; } .page-home .hero-sub { font-size: 0.88rem; max-width: none; } .page-home .home-hero-actions { margin-top: 20px; } /* About hero: reduce padding, scale headline */ .page-about .hero { padding-top: 44px; padding-bottom: 36px; } .page-about .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); max-width: none; } /* Pathways hero */ .page-pathways .hero { padding-top: 44px; padding-bottom: 36px; } .page-pathways .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); max-width: none; } /* Contact hero */ .page-contact .hero { padding-top: 44px; padding-bottom: 36px; } /* Activities hero */ .page-activities .hero { padding-top: 44px; padding-bottom: 36px; } /* Country / pathway detail hero */ .page-country-detail .hero, .page-pathway-detail .hero { padding-top: 40px; padding-bottom: 32px; } .page-country-detail .hero h1, .page-pathway-detail .hero h1 { font-size: clamp(1.45rem, 6.5vw, 1.9rem); max-width: none; } } /* ═══════════════════════════════════════════════════════ Pathways listing — snap carousel (all viewports) Mirrors the home page Apple-style carousel exactly ═══════════════════════════════════════════════════════ */ .page-pathways .pathway-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 16px; margin: 28px -20px 0; padding: 20px max(16px, calc(50% - 38vw)) 40px; -webkit-mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); } .page-pathways .pathway-grid::-webkit-scrollbar { display: none; } .page-pathways .pathway-card, .page-pathways .pathway-card-featured { flex: 0 0 clamp(286px, 83.6vw, 374px); scroll-snap-align: center; scroll-snap-stop: always; transform-origin: center center; will-change: transform, opacity; transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 380ms ease; opacity: 0.58; transform: scale(0.9); filter: blur(4px); } .page-pathways .pathway-card.carousel-active, .page-pathways .pathway-card-featured.carousel-active { opacity: 1; transform: scale(1); filter: none; box-shadow: 0 10px 36px rgba(0, 103, 243, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08); } /* ═══════════════════════════════════════════════════════ Destinations listing — snap carousel (all viewports) Mirrors the home page Apple-style carousel exactly ═══════════════════════════════════════════════════════ */ .page-destinations .region-showcase { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 16px; margin: 0 -20px; padding: 20px max(16px, calc(50% - 38vw)) 40px; -webkit-mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); mask-image: linear-gradient( to right, transparent, black 12%, black 88%, transparent ); } .page-destinations .region-showcase::-webkit-scrollbar { display: none; } .page-destinations .region-showcase > .destination-editorial-card { flex: 0 0 clamp(220px, 76vw, 300px); display: flex; flex-direction: column; scroll-snap-align: center; scroll-snap-stop: always; transform-origin: center center; will-change: transform, opacity; transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 380ms ease; opacity: 0.58; transform: scale(0.9); filter: blur(4px); } .page-destinations .region-showcase > .destination-editorial-card.carousel-active { opacity: 1; transform: scale(1); filter: none; box-shadow: 0 10px 36px rgba(0, 103, 243, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08); } .page-destinations .region-showcase .dest-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.77rem; color: #576c89; } /* ═══════════════════════════════════════════════════════ Leadership — Mobile responsive (≤640px · ≤480px) ═══════════════════════════════════════════════════════ */ @media (max-width: 640px) { .page-leadership section { padding: 36px 0; } .page-leadership .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); } .page-leadership .section-head { margin-bottom: 20px; } .page-leadership .spotlight-card { padding: 16px; gap: 14px; } .page-leadership .leader-portrait { min-height: 120px; } .page-leadership .spotlight-copy h3 { font-size: 1.2rem; } .page-leadership .leadership-grid, .page-leadership .stream-grid { gap: 12px; } .page-leadership .team-card, .page-leadership .stream-card { padding: 14px; } .page-leadership .supervisor-profile { flex-direction: column; align-items: flex-start; gap: 8px; } .page-leadership .supervisor-avatar-image { width: 56px; height: 56px; margin-right: 0; } .page-leadership .supervisor-meta { padding: 8px 12px; min-height: unset; } .page-leadership .supervisor-meta h3 { font-size: 0.92rem; } .page-leadership .supervisor-role { font-size: 0.76rem; } } @media (max-width: 480px) { .page-leadership .leadership-grid, .page-leadership .stream-grid { grid-template-columns: 1fr; } }