/* ============================================ AFA9 Website Styles ============================================ */ /* Playfair Display draws & as an ornate Et-ligature. unicode-range pulls just that one character from a plain face and leaves everything else alone. */ @font-face { font-family: 'AmpersandFix'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Segoe UI'), local('Liberation Sans'), local('DejaVu Sans'); unicode-range: U+0026; } :root { --primary-blue: #123f92; --deep-blue: #0c2f6b; --accent-gold: #c9a84c; --gold-soft: rgba(201, 168, 76, 0.14); --white: #ffffff; --light-gray: #f6f8fb; --dark-gray: #262d3d; --text-gray: #55607a; --hairline: rgba(18, 63, 146, 0.09); /* Typography */ --serif-font: 'AmpersandFix', 'Playfair Display', 'Georgia', 'Garamond', serif; --sans-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================ RESET & BASE STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--sans-font); color: var(--dark-gray); background-color: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--serif-font); color: var(--primary-blue); font-weight: 700; line-height: 1.2; } h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; margin-bottom: var(--spacing-md); } h3 { font-size: 1.2rem; letter-spacing: -0.01em; } p { color: var(--text-gray); margin-bottom: var(--spacing-md); } a { color: var(--primary-blue); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--accent-gold); } /* ============================================ CONTAINER & LAYOUT ============================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); } section { padding: var(--spacing-2xl) 0; } /* centred section heading with a small gold rule beneath */ .section-head { text-align: center; max-width: 640px; margin: 0 auto var(--spacing-2xl); } .section-head h2::after { content: ""; display: block; width: 56px; height: 3px; margin: var(--spacing-sm) auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent-gold), rgba(201, 168, 76, 0.25)); } .section-subtitle { color: var(--text-gray); font-size: 1.05rem; margin: var(--spacing-md) 0 0; } /* ============================================ SCROLL REVEAL The .js-reveal class is added to by app.js, so with JavaScript off or broken every element stays visible instead of stuck at opacity 0. ============================================ */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out); transition-delay: var(--reveal-delay, 0s); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* ============================================ HEADER & NAVIGATION ============================================ */ .header { background-color: var(--white); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 100; transition: box-shadow 0.3s ease; } .header.is-scrolled { box-shadow: 0 6px 26px rgba(18, 63, 146, 0.09); } /* wider than the body container so the wordmark sits nearer the edge */ .header .container { max-width: 1560px; } .nav-container { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; } .logo-section { flex-shrink: 0; } .logo { display: inline-block; transition: transform 0.3s ease; } .logo:hover { transform: scale(1.03); } .logo-img { display: block; height: 44px; width: auto; /* the artwork's tassel weights it visually high, so nudge it down to sit on the same optical line as the nav links */ transform: translateY(4px); } .nav-links { display: flex; list-style: none; gap: var(--spacing-xl); } .nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--dark-gray); transition: color 0.3s ease; } .nav-links a:hover { color: var(--primary-blue); } .nav-actions { display: flex; align-items: center; gap: var(--spacing-sm); } /* ---- language switcher ---- */ .lang-switch { display: flex; align-items: center; border: 1px solid rgba(18, 63, 146, 0.18); border-radius: 999px; overflow: hidden; } .lang-switch button { border: 0; background: transparent; cursor: pointer; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: var(--text-gray); transition: background-color 0.25s ease, color 0.25s ease; } .lang-switch button:hover { color: var(--primary-blue); } .lang-switch button.is-active { background-color: var(--primary-blue); color: var(--white); } /* ---- mobile menu button ---- */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; border: 1px solid rgba(18, 63, 146, 0.18); border-radius: 8px; background: transparent; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background-color: var(--primary-blue); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; overflow: hidden; background-color: var(--deep-blue); background-image: url('images/hero/graduation.jpg'); background-image: image-set(url('images/hero/graduation.avif') type('image/avif'), url('images/hero/graduation.jpg') type('image/jpeg')); background-size: cover; background-position: center 62%; color: var(--white); padding: calc(var(--spacing-2xl) + 1.5rem) 0; } /* soft light pooling behind the visual, keeps the flat block from reading dead */ .hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 55% at 76% 28%, rgba(201, 168, 76, 0.22), transparent 62%), radial-gradient(45% 45% at 10% 88%, rgba(255, 255, 255, 0.10), transparent 60%); } /* photo scrim: a brand-blue wash plus vertical darkening at the top and bottom, so the graduates stay readable behind the copy */ .hero .hero-glow { background: radial-gradient(65% 55% at 50% 20%, rgba(201, 168, 76, 0.16), transparent 68%), linear-gradient(180deg, rgba(12, 47, 107, 0.88) 0%, rgba(18, 63, 146, 0.74) 46%, rgba(12, 47, 107, 0.93) 100%); } .hero .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-2xl); align-items: center; } .hero-eyebrow { display: block; margin-bottom: var(--spacing-sm); color: var(--accent-gold); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .hero h1 { color: var(--white); margin-bottom: var(--spacing-sm); } .hero-subtitle { font-family: var(--serif-font); font-size: clamp(1.15rem, 2vw, 1.5rem); font-style: italic; color: var(--accent-gold); margin-bottom: var(--spacing-md); } .hero-description { color: rgba(255, 255, 255, 0.86); font-size: 1.05rem; line-height: 1.8; max-width: 34rem; margin-bottom: var(--spacing-lg); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .hero-trust { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; margin: 0; } /* ---- hero visual ---- Single column until the photograph is in place. Dropping the .hero--solo class from the markup restores the two column layout below. */ .hero--solo { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; } .hero--solo .hero-description { margin-inline: auto; } .hero--solo .hero-actions, .hero--solo .hero-trust { justify-content: center; } .hero-visual { position: relative; display: grid; place-items: center; min-height: 400px; } .hero-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; border: 1px solid rgba(201, 168, 76, 0.3); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================ BUTTONS ============================================ */ .cta-button { display: inline-block; padding: 0.85rem var(--spacing-lg); border: 2px solid var(--accent-gold); border-radius: 8px; background-color: var(--accent-gold); color: var(--primary-blue); font-weight: 600; transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201, 168, 76, 0.32); color: var(--primary-blue); } .cta-button.primary { background-color: var(--accent-gold); color: var(--primary-blue); } .cta-button.secondary, .cta-button.ghost { background-color: transparent; color: var(--accent-gold); } .cta-button.ghost { border-color: rgba(255, 255, 255, 0.35); color: var(--white); } .cta-button.secondary:hover, .cta-button.ghost:hover { background-color: var(--accent-gold); border-color: var(--accent-gold); color: var(--primary-blue); box-shadow: 0 12px 28px rgba(201, 168, 76, 0.28); } /* ============================================ SERVICES SECTION ============================================ */ .services { background-color: var(--light-gray); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); } .service-card { display: flex; flex-direction: column; background-color: var(--white); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(18, 63, 146, 0.05); transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease; } .service-card:hover { transform: translateY(-8px); border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 26px 52px rgba(18, 63, 146, 0.16); } .service-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--light-gray); } .service-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease-out); } .service-card:hover .service-media img { transform: scale(1.07); } /* keeps the icon readable whatever the photograph is doing underneath */ .service-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 47, 107, 0.74) 0%, rgba(12, 47, 107, 0.16) 46%, transparent 72%); transition: opacity 0.45s ease; } .service-card:hover .service-media::after { opacity: 0.82; } .service-icon { position: absolute; z-index: 1; bottom: 0.85rem; inset-inline-start: 0.9rem; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.95); font-size: 1.35rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transition: transform 0.45s var(--ease-out); } .service-card:hover .service-icon { transform: translateY(-3px) scale(1.05); } .service-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--spacing-md); } .service-card h3 { font-size: 1.08rem; line-height: 1.35; margin-bottom: var(--spacing-xs); } .service-card p { font-size: 0.92rem; line-height: 1.7; margin-bottom: 0; } /* ============================================ UNIVERSITIES ============================================ */ .universities { background-color: var(--white); } /* auto-fill rather than auto-fit: with 11 cards the final row is short, and auto-fit would stretch those two across the full width */ .uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-md); } .uni-card { display: flex; flex-direction: column; background-color: var(--white); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(18, 63, 146, 0.05); transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease; } .uni-card:hover { transform: translateY(-10px); border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 28px 56px rgba(18, 63, 146, 0.18); } .uni-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--light-gray); } .uni-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease-out); } .uni-card:hover .uni-media img { transform: scale(1.07); } /* keeps the monogram legible whatever the photograph is doing underneath */ .uni-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 47, 107, 0.78) 0%, rgba(12, 47, 107, 0.18) 44%, transparent 72%); transition: opacity 0.45s ease; } .uni-card:hover .uni-media::after { opacity: 0.8; } .uni-mono { position: absolute; z-index: 1; bottom: 0.85rem; inset-inline-start: 0.9rem; display: inline-grid; place-items: center; min-width: 64px; height: 38px; padding: 0 0.7rem; border-radius: 10px; background-color: rgba(255, 255, 255, 0.95); color: var(--primary-blue); font-family: var(--serif-font); font-size: 0.95rem; font-weight: 700; letter-spacing: 1.5px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transition: transform 0.45s var(--ease-out), background 0.45s ease, color 0.45s ease; } .uni-card:hover .uni-mono { transform: translateY(-3px); background: linear-gradient(140deg, #b3902f, var(--accent-gold)); color: var(--white); } .uni-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--spacing-md); } .uni-city { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-gray); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .uni-city::before { content: "📍"; font-size: 0.74rem; } .uni-card h3 { font-size: 1.05rem; line-height: 1.35; margin: 0.3rem 0 0.5rem; } .uni-card p { flex-grow: 1; font-size: 0.9rem; line-height: 1.7; margin-bottom: var(--spacing-md); } .uni-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; } .uni-tags li { padding: 0.28rem 0.7rem; border: 1px solid rgba(18, 63, 146, 0.13); border-radius: 999px; background-color: var(--light-gray); color: var(--primary-blue); font-size: 0.75rem; font-weight: 600; transition: background-color 0.35s ease, border-color 0.35s ease; } .uni-card:hover .uni-tags li { background-color: var(--gold-soft); border-color: rgba(201, 168, 76, 0.35); } .uni-note { max-width: 640px; margin: var(--spacing-xl) auto 0; text-align: center; font-size: 0.95rem; font-style: italic; margin-bottom: 0; } /* ============================================ SCHOLARSHIP ============================================ */ .scholarship { position: relative; overflow: hidden; background: linear-gradient(158deg, #14459e 0%, var(--primary-blue) 50%, var(--deep-blue) 100%); color: var(--white); } .scholarship .container { position: relative; z-index: 1; } .scholarship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items: center; } .scholarship h2 { color: var(--white); margin-bottom: var(--spacing-sm); } .scholarship p { color: rgba(255, 255, 255, 0.85); line-height: 1.8; } .benefit-list { list-style: none; display: grid; gap: var(--spacing-sm); } .benefit-list li { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-md); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background-color: rgba(255, 255, 255, 0.07); transition: transform 0.35s var(--ease-out), background-color 0.35s ease, border-color 0.35s ease; } .benefit-list li:hover { transform: translateX(6px); background-color: rgba(255, 255, 255, 0.11); border-color: rgba(201, 168, 76, 0.4); } .benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background-color: var(--gold-soft); font-size: 1.25rem; } .benefit-list strong { display: block; color: var(--white); font-size: 1rem; margin-bottom: 0.15rem; } .benefit-list small { color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; line-height: 1.6; } .scholarship-note { max-width: 700px; margin: var(--spacing-xl) auto 0; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, 0.62) !important; } /* ============================================ PROCESS SECTION A dark band in the page rhythm, with a vertical spine that fills to match scroll progress and cards alternating either side of it. ============================================ */ .process { position: relative; overflow: hidden; background: linear-gradient(168deg, #14459e 0%, var(--primary-blue) 48%, var(--deep-blue) 100%); color: var(--white); } .process .container { position: relative; z-index: 1; } .process .section-head h2 { color: var(--white); } .process .section-subtitle { color: rgba(255, 255, 255, 0.72); } .steps { position: relative; max-width: 960px; margin: 0 auto; } .steps-track { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.16); border-radius: 2px; } /* height is driven by --progress, set from scroll position in app.js */ .steps-fill { display: block; width: 100%; height: calc(var(--progress, 0) * 100%); border-radius: 2px; background: linear-gradient(180deg, var(--accent-gold), #e2c56d); box-shadow: 0 0 18px rgba(201, 168, 76, 0.65); } .step { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; margin-bottom: var(--spacing-xl); } .step:last-child { margin-bottom: 0; } .step-marker { grid-column: 2; justify-self: center; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background-color: var(--deep-blue); border: 1px solid rgba(201, 168, 76, 0.45); color: var(--accent-gold); font-family: var(--serif-font); font-size: 1.05rem; font-weight: 700; transition: transform 0.45s var(--ease-out), background 0.45s ease, color 0.45s ease, box-shadow 0.45s ease; } .step-card { position: relative; grid-column: 1; padding: var(--spacing-lg); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background-color: rgba(255, 255, 255, 0.06); overflow: hidden; transition: transform 0.45s var(--ease-out), background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; } .step--right .step-card { grid-column: 3; } .step-index { position: absolute; top: -0.8rem; inset-inline-end: 0.5rem; font-family: var(--serif-font); font-size: 4.8rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.07); pointer-events: none; } .step-card h3, .step-card p { position: relative; } .step-card h3 { color: var(--white); margin-bottom: var(--spacing-xs); } .step-card p { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.75; margin-bottom: 0; } .step:hover .step-card { transform: translateY(-4px); background-color: rgba(255, 255, 255, 0.1); border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3); } .step:hover .step-marker { transform: scale(1.09); background: linear-gradient(145deg, #e2c56d, var(--accent-gold)); color: var(--primary-blue); box-shadow: 0 0 0 8px rgba(201, 168, 76, 0.14), 0 12px 26px rgba(201, 168, 76, 0.4); } /* steps slide in from the side they sit on */ .js-reveal .step--left { transform: translateX(-36px); } .js-reveal .step--right { transform: translateX(36px); } .js-reveal .step.is-visible { transform: none; } [dir="rtl"] .js-reveal .step--left { transform: translateX(36px); } [dir="rtl"] .js-reveal .step--right { transform: translateX(-36px); } /* ============================================ WHY AFA9 SECTION Bento rather than four equal boxes: a dark feature tile, two squares, then a wide closer. ============================================ */ .why-afa9 { background-color: var(--light-gray); } .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .why-item--feature, .why-item--wide { grid-column: span 2; } .why-item { position: relative; display: flex; flex-direction: column; padding: var(--spacing-lg); background-color: var(--white); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease; } .why-item:hover { transform: translateY(-6px); border-color: rgba(201, 168, 76, 0.4); box-shadow: 0 22px 44px rgba(18, 63, 146, 0.14); } .why-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--spacing-md); border-radius: 14px; background: linear-gradient(140deg, rgba(201, 168, 76, 0.2), rgba(18, 63, 146, 0.07)); color: #a9821f; transition: background 0.4s ease, color 0.4s ease, transform 0.4s var(--ease-out); } .why-icon svg { width: 26px; height: 26px; } .why-item:hover .why-icon { background: linear-gradient(140deg, #b3902f, var(--accent-gold)); color: var(--white); transform: translateY(-2px) rotate(-5deg); } .why-item h3 { margin-bottom: var(--spacing-xs); } .why-item p { font-size: 0.93rem; line-height: 1.7; margin-bottom: 0; } /* ---- the dark feature tile ---- */ .why-item--feature { background: linear-gradient(150deg, #14459e 0%, var(--primary-blue) 45%, var(--deep-blue) 100%); border-color: rgba(201, 168, 76, 0.28); } .why-item--feature h3 { color: var(--white); font-size: clamp(1.35rem, 2.4vw, 1.75rem); } .why-item--feature p { color: rgba(255, 255, 255, 0.82); font-size: 1rem; max-width: 46rem; } .why-item--feature .why-icon { width: 62px; height: 62px; background-color: rgba(201, 168, 76, 0.18); color: var(--accent-gold); } .why-item--feature .why-icon svg { width: 30px; height: 30px; } .why-item--feature:hover .why-icon { background: linear-gradient(140deg, #e2c56d, var(--accent-gold)); color: var(--primary-blue); } /* ---- the wide closer, a warm tint rather than plain white ---- */ .why-item--wide { background: linear-gradient(115deg, rgba(201, 168, 76, 0.12), var(--white) 58%); } .why-item--wide p { max-width: 46rem; } /* ============================================ CTA SECTION ============================================ */ .cta-section { position: relative; overflow: hidden; background: linear-gradient(158deg, #14459e 0%, var(--primary-blue) 50%, var(--deep-blue) 100%); color: var(--white); text-align: center; } .cta-section .container { position: relative; z-index: 1; } .cta-section h2 { color: var(--white); } .cta-section h2::after { background: linear-gradient(90deg, var(--accent-gold), rgba(201, 168, 76, 0.3)); } .cta-deadline { display: block; margin-bottom: var(--spacing-sm); color: var(--accent-gold); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .cta-section p { color: rgba(255, 255, 255, 0.86); font-size: 1.05rem; } .cta-subtitle { max-width: 620px; margin: 0 auto var(--spacing-lg); } /* the application form is the primary action, so it gets a panel of its own and WhatsApp / email sit underneath it as the secondary route */ .form-card { max-width: 620px; margin: 0 auto var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid rgba(201, 168, 76, 0.38); border-radius: 20px; background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22); } .form-step { display: inline-block; margin-bottom: var(--spacing-xs); color: var(--accent-gold); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .form-card h3 { color: var(--white); font-size: 1.4rem; margin-bottom: var(--spacing-xs); } .form-card p { font-size: 0.97rem; margin-bottom: var(--spacing-md); } .form-help { margin: var(--spacing-sm) 0 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 0.86rem !important; } .cta-buttons { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; } /* ============================================ SOCIAL LINKS One component, used twice: in the contact section and in the footer. Both sit on the dark blue, so a single set of rules covers them. The brand glyphs are solid rather than the outline style used elsewhere on the page, because an outlined Facebook or WhatsApp stops reading as the logo it is. ============================================ */ .social-links { display: flex; align-items: center; gap: 0.65rem; list-style: none; } .social-links a { display: grid; place-items: center; /* 44px is the minimum comfortable touch target, and it is why the chips are this size rather than as small as the glyphs would allow. */ width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background-color: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.88); transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out); } .social-links a:hover, .social-links a:focus-visible { transform: translateY(-3px); border-color: var(--accent-gold); background-color: rgba(201, 168, 76, 0.16); color: var(--accent-gold); } .social-links svg { width: 18px; height: 18px; fill: currentColor; } /* Contact section: centred under the two buttons, with a gold eyebrow. */ .social-invite { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-xl); } .social-label { color: var(--accent-gold); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* Footer: left aligned under the brand blurb, mirrored for Arabic by flex. */ .footer .social-links { margin-top: var(--spacing-md); } /* ============================================ FOOTER ============================================ */ .footer { background-color: var(--deep-blue); color: var(--white); padding: var(--spacing-2xl) 0 var(--spacing-lg); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); } /* The footer used to pair mark.png with a separate wordmark, on the theory that the cap kept its gold on a dark ground. It does not: the cap body is navy on navy and collapses into a smudge with a floating gold tassel. logo-reverse.png keeps the cap exactly as it is — its navy sits a shade above --deep-blue and the gold outline draws the shape, which is what mark.png did here before — and turns only the AFA9 wordmark white, the way the old footer set the name beside mark.png. Recolouring the whole lockup drained the brand out of it. Regenerate it with tools/make-reverse-logo.py whenever logo.png changes. */ .footer-brand { margin-bottom: var(--spacing-sm); } .footer-lockup { width: auto; height: 58px; } .footer-section h4 { color: var(--accent-gold); font-family: var(--serif-font); font-size: 1.05rem; margin-bottom: var(--spacing-md); } .footer-section p { color: rgba(255, 255, 255, 0.72); font-size: 0.93rem; margin-bottom: var(--spacing-xs); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: var(--spacing-xs); } .footer-section a { color: rgba(255, 255, 255, 0.82); font-size: 0.93rem; } .footer-section a:hover { color: var(--accent-gold); } .footer-bottom { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: var(--spacing-lg); color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; } .footer-bottom p { margin-bottom: 0; color: inherit; } /* ============================================ LEGAL PAGES ============================================ */ .legal-back { font-size: 0.9rem; font-weight: 500; color: var(--text-gray); } .legal-page { padding: var(--spacing-2xl) 0; } .legal-page .container { max-width: 780px; } .legal-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--spacing-xs); } .legal-page h2 { font-size: 1.35rem; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-sm); } .legal-updated { color: var(--text-gray); font-size: 0.9rem; margin-bottom: var(--spacing-lg); } .legal-notice { background-color: #fdf6e3; border-inline-start: 4px solid var(--accent-gold); border-radius: 8px; padding: var(--spacing-md); color: var(--dark-gray); font-size: 0.95rem; line-height: 1.7; } .legal-page ul { margin: 0 0 var(--spacing-md); padding-inline-start: 1.25rem; color: var(--text-gray); } .legal-page li { margin-bottom: var(--spacing-xs); line-height: 1.7; } .legal-back-link { margin-top: var(--spacing-xl); padding-top: var(--spacing-md); border-top: 1px solid var(--hairline); font-weight: 500; } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* four across gets cramped before the layout is ready to go single column */ @media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); text-align: center; } .hero-description { margin-inline: auto; } .hero-actions, .hero-trust { justify-content: center; } /* copy leads on narrow screens — the visual follows, so the headline and CTAs stay above the fold instead of being pushed off by a full-width medallion */ .hero-visual { min-height: 0; } .hero-photo { max-width: 420px; aspect-ratio: 4 / 3; } /* spine moves to the edge and every card sits beside it */ .steps-track { left: 27px; } .step { grid-template-columns: 54px 1fr; gap: var(--spacing-sm); } .step-marker { grid-column: 1; width: 54px; height: 54px; font-size: 0.95rem; } .step-card, .step--right .step-card { grid-column: 2; } .js-reveal .step--left, .js-reveal .step--right, [dir="rtl"] .js-reveal .step--left, [dir="rtl"] .js-reveal .step--right { transform: translateY(24px); } [dir="rtl"] .steps-track { left: auto; right: 27px; transform: translateX(50%); } .scholarship-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } } @media (max-width: 768px) { .container { padding: 0 var(--spacing-md); } .nav-toggle { display: flex; } /* the panel drops out of the sticky header, which is its containing block */ .nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--white); border-bottom: 1px solid var(--hairline); box-shadow: 0 12px 24px rgba(18, 63, 146, 0.08); padding: var(--spacing-xs) 0 var(--spacing-sm); } .nav-panel.is-open { display: block; } .nav-links { flex-direction: column; gap: 0; } .nav-links a { display: block; padding: 0.85rem var(--spacing-md); font-size: 1rem; } .logo-img { height: 36px; } .services-grid, .why-grid, .uni-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .cta-button { display: block; text-align: center; } section { padding: var(--spacing-xl) 0; } } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; } .service-icon { width: 48px; height: 48px; font-size: 1.3rem; } .step-marker { width: 46px; height: 46px; font-size: 0.85rem; } .steps-track { left: 23px; } .step { grid-template-columns: 46px 1fr; } .step-index { font-size: 3.4rem; } } /* ============================================ ARABIC / RTL dir="rtl" is set on by app.js, so flexbox and grid mirror themselves — only direction-specific decoration needs overriding. ============================================ */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } [dir="rtl"] body { line-height: 1.9; } [dir="rtl"] .hero-subtitle { font-style: normal; } [dir="rtl"] .hero-eyebrow { letter-spacing: normal; } [dir="rtl"] .social-label { letter-spacing: normal; } /* ============================================ ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* never leave revealed content stranded at opacity 0 */ .js-reveal .reveal { opacity: 1; transform: none; } } /* Focus styles for keyboard navigation */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 4px; } /* High contrast mode support */ @media (prefers-contrast: more) { .cta-button { border-width: 3px; } .service-card { border-color: var(--accent-gold); } }