/* * Aflon Digital Academy — Brand design tokens. * * Subject: a computer-technology nursery / primary / secondary school in * Kuje-Abuja. Audience: Nigerian parents (mostly on phones) evaluating * schools for 2026/2027. The job of every page on this site: prove the * school is serious, technical, and well-run — without sounding like a * template school site. * * Palette honours the school's stated brand (Burgundy, Navy, Gold) — those * colours are non-negotiable. The neutrals are cool, not warm cream, so the * page reads as a precise tech school rather than a heritage institution. * * ground #F7F8FA cool near-white, technical paper * text #0D1330 very deep navy — scholarly ink, never pure black * accent #6B1F2C burgundy — the school's primary mark * accent-2 #C99B3D gold — hairlines, numerals, sparing only * ink #15294B navy block colour for headers / footer * * Typography: Fraunces (display serif, with character) + IBM Plex Sans * (body) + IBM Plex Mono (numerals, captions, codes). Aim: every page * reads as "we hired a typographer, not a template." */ /* * Display: Lora — a Garamond-family humanist serif. Pronounced contrast, * confident italics, reads as "established academic publication" rather * than "contemporary editorial". Replaces Fraunces, whose ink-trap * detailing was too distinctive for an institutional school identity. * Body: IBM Plex Sans (kept). Mono: IBM Plex Mono (kept). */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap'); :root { /* Core palette */ --aflon-ground: #F7F8FA; --aflon-text: #0D1330; --aflon-text-muted: #4A5470; --aflon-hairline: #DDE1E8; --aflon-accent: #6B1F2C; /* burgundy */ --aflon-accent-h: #5A1822; /* burgundy hover (darker) */ --aflon-accent-2: #C99B3D; /* gold */ --aflon-ink: #15294B; /* navy block */ --aflon-ink-2: #0D1B36; /* navy darker */ /* House colours, used decoratively in one place only */ --aflon-house-emerald: #4E7F4A; --aflon-house-diamond: #3E5BA9; --aflon-house-platinum: #B33A3A; --aflon-house-pearl: #D6B43A; /* Typography */ --aflon-display: 'Lora', 'Georgia', 'Times New Roman', serif; --aflon-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --aflon-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace; /* Scale */ --aflon-sp-1: 4px; --aflon-sp-2: 8px; --aflon-sp-3: 12px; --aflon-sp-4: 16px; --aflon-sp-5: 24px; --aflon-sp-6: 32px; --aflon-sp-7: 48px; --aflon-sp-8: 64px; --aflon-sp-9: 96px; --aflon-radius-sm: 6px; --aflon-radius-md: 10px; --aflon-radius-lg: 16px; --aflon-shadow-soft: 0 1px 2px rgba(13,19,48,.04), 0 4px 16px rgba(13,19,48,.06); --aflon-shadow-lift: 0 2px 6px rgba(13,19,48,.06), 0 12px 32px rgba(13,19,48,.10); } /* Scoped utilities — class-prefixed so they never clash with the legacy theme. */ /* * Full-bleed sections: every .aflon-section escapes the enclosing * Bootstrap .container so its background extends edge to edge on any * viewport. The inner .aflon-container re-centers the content. Body * carries the ground colour so a section without an explicit background * still reads as continuous with the page. * * overflow-x: hidden on body prevents the -50vw margin from producing a * horizontal scrollbar on any browser. */ /* * Global font + surface for the public theme. Applied to so every * page inside the yellow theme picks it up — including CMS-authored pages * (Admissions, About-us, etc.) that don't declare their own typography. * Headings use the Lora display serif with tightened tracking. Base text * size is 16.5px for comfortable reading; leading is 1.6 for body copy. */ body { background: var(--aflon-ground); overflow-x: hidden; font-family: var(--aflon-body); font-size: 16.5px; line-height: 1.6; color: var(--aflon-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--aflon-display); font-weight: 600; color: var(--aflon-text); letter-spacing: -0.01em; line-height: 1.2; } p, li { line-height: 1.65; } /* * Widen the Bootstrap layout container that layout.php wraps everything in. * Its default max-width of ~1200px is what makes CMS pages look clipped in * the middle on 2560/3440px monitors. Match the aflon-container's * ultrawide-friendly clamp so ALL pages — CMS and brand-authored — sit * inside a container that adapts to the viewport. The .adm-* exception * excludes any admission-page container that already uses its own * width tokens. */ .aflon-chrome ~ .container, .aflon-chrome ~ * .container, body > .container, .container.spacet50, .container.spaceb50, main .container { max-width: clamp(1180px, 92vw, 1720px) !important; } /* * Tables inherit the brand feel: mono headers, generous padding, * hairline dividers, subtle zebra. CMS-authored fee/placement tables * benefit from this without needing to touch their HTML. */ main table, .aflon-about main table, .adm-info table { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--aflon-sp-5) 0; background: #FFFFFF; border-radius: var(--aflon-radius-sm); overflow: hidden; } main table th, .aflon-about main table th, .adm-info table th { font-family: var(--aflon-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aflon-text); background: #FAFAFA; padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--aflon-hairline); font-weight: 500; } main table td, .aflon-about main table td, .adm-info table td { padding: 12px 16px; border-bottom: 1px solid var(--aflon-hairline); color: var(--aflon-text); vertical-align: top; } main table tr:last-child td { border-bottom: 0; } main table tr:nth-child(even) td { background: #FBFBFC; } .aflon-section { padding: var(--aflon-sp-8) 0; position: relative; width: 100vw; left: 50%; margin-left: -50vw; } .aflon-section--tight { padding: var(--aflon-sp-7) 0; } .aflon-section--block { background: var(--aflon-ink); color: #FFFFFF; } .aflon-section--block .aflon-eyebrow { color: var(--aflon-accent-2); } .aflon-section--white { background: #FFFFFF; } /* * Container width tuning. Sections should feel expansive on wide monitors * without letting body text run past a comfortable reading measure. * * The container itself scales up to 1720px on ultrawide. Reading-width * caps live on the individual text elements (lede, feature body, leader * body, etc.) so paragraphs stay under ~72 characters even when the grid * around them is 1700px wide. * * viewport → container width * 1280px → 1180px (min guard) * 1600px → 1472px * 1920px → 1720px (max) * 2560px → 1720px * 3440px → 1720px */ .aflon-container { max-width: clamp(1180px, 92vw, 1720px); margin: 0 auto; padding: 0 var(--aflon-sp-5); } .aflon-eyebrow { font-family: var(--aflon-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aflon-accent); margin: 0 0 var(--aflon-sp-3); display: inline-block; } .aflon-display { font-family: var(--aflon-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--aflon-text); margin: 0 0 var(--aflon-sp-5); } .aflon-display--xxl { font-size: clamp(40px, 6vw, 84px); font-weight: 700; } .aflon-display--xl { font-size: clamp(32px, 4.6vw, 56px); } .aflon-display--lg { font-size: clamp(26px, 3.4vw, 40px); } .aflon-display--md { font-size: clamp(22px, 2.6vw, 30px); } .aflon-lede { font-family: var(--aflon-body); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--aflon-text-muted); margin: 0 0 var(--aflon-sp-6); max-width: 56ch; } .aflon-body { font-family: var(--aflon-body); color: var(--aflon-text); line-height: 1.6; } .aflon-muted { color: var(--aflon-text-muted); } /* Buttons */ .aflon-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--aflon-body); font-size: 15px; font-weight: 600; line-height: 1; padding: 14px 22px; border-radius: var(--aflon-radius-sm); border: 1px solid transparent; text-decoration: none; transition: background-color .18s, transform .12s, box-shadow .18s, border-color .18s; cursor: pointer; } .aflon-btn:focus-visible { outline: 2px solid var(--aflon-accent-2); outline-offset: 3px; } .aflon-btn--primary { background: var(--aflon-accent); color: #FFFFFF; } .aflon-btn--primary:hover { background: var(--aflon-accent-h); color: #FFFFFF; text-decoration: none; box-shadow: var(--aflon-shadow-soft); } .aflon-btn--ghost { background: transparent; color: var(--aflon-text); border-color: var(--aflon-hairline); } .aflon-btn--ghost:hover { border-color: var(--aflon-accent); color: var(--aflon-accent); text-decoration: none; } .aflon-btn--gold { background: var(--aflon-accent-2); color: var(--aflon-text); } .aflon-btn--gold:hover { background: #BA8E2E; color: var(--aflon-text); text-decoration: none; } /* Gold rule — small horizontal accent used to mark structural breaks. Three pixels. */ .aflon-rule { width: 56px; height: 3px; background: var(--aflon-accent-2); border: 0; margin: var(--aflon-sp-5) 0; } .aflon-rule--center { margin-left: auto; margin-right: auto; } /* Numeric / data style — IBM Plex Mono, tabular figures, faint accent. */ .aflon-data { font-family: var(--aflon-mono); font-variant-numeric: tabular-nums; color: var(--aflon-text); } /* Hairline rule used between sections to mark structure without shouting. */ .aflon-hairline { border: 0; border-top: 1px solid var(--aflon-hairline); margin: 0; } /* Stat block — used in the "At a glance" strip on home. */ .aflon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--aflon-sp-6); align-items: end; } .aflon-stat__num { font-family: var(--aflon-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--aflon-accent-2); letter-spacing: -0.02em; } .aflon-stat__label { font-family: var(--aflon-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: var(--aflon-sp-3); } .aflon-section--block .aflon-stat__num { color: var(--aflon-accent-2); } /* Feature row — used in "What makes Aflon different". Each row is one true thing. */ .aflon-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--aflon-sp-7); padding: var(--aflon-sp-7) 0; border-top: 1px solid var(--aflon-hairline); align-items: start; } .aflon-feature:last-child { border-bottom: 1px solid var(--aflon-hairline); } .aflon-feature__meta { color: var(--aflon-text-muted); font-family: var(--aflon-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .aflon-feature__title { font-family: var(--aflon-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: var(--aflon-text); margin: 0 0 var(--aflon-sp-3); letter-spacing: -0.015em; max-width: 22ch; } .aflon-feature__body { font-family: var(--aflon-body); font-size: 16px; line-height: 1.65; color: var(--aflon-text-muted); margin: 0; max-width: 68ch; } @media (max-width: 720px) { .aflon-feature { grid-template-columns: 1fr; gap: var(--aflon-sp-3); padding: var(--aflon-sp-6) 0; } } /* Leadership cards. */ .aflon-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--aflon-sp-5); } .aflon-leader { background: #FFFFFF; border: 1px solid var(--aflon-hairline); border-radius: var(--aflon-radius-md); padding: var(--aflon-sp-5); } .aflon-leader__role { font-family: var(--aflon-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aflon-accent); margin: 0 0 var(--aflon-sp-3); } .aflon-leader__name { font-family: var(--aflon-display); font-size: 22px; font-weight: 600; color: var(--aflon-text); margin: 0 0 var(--aflon-sp-3); letter-spacing: -0.01em; } .aflon-leader__body { max-width: 64ch; } .aflon-leader__body p { font-family: var(--aflon-body); font-size: 15px; line-height: 1.6; color: var(--aflon-text-muted); margin: 0; } /* Closing CTA block — burgundy as the one bold moment per page. */ .aflon-cta { background: var(--aflon-accent); color: #FFFFFF; padding: var(--aflon-sp-8) var(--aflon-sp-5); border-radius: var(--aflon-radius-lg); text-align: center; } .aflon-cta h2 { font-family: var(--aflon-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; margin: 0 0 var(--aflon-sp-4); letter-spacing: -0.02em; } .aflon-cta p { font-size: 17px; line-height: 1.6; opacity: .92; margin: 0 auto var(--aflon-sp-6); max-width: 52ch; } .aflon-cta .aflon-btn--gold { background: var(--aflon-accent-2); color: var(--aflon-text); } /* House dots — minute decorative use of the school's house colours, one row. */ .aflon-houses { display: flex; gap: var(--aflon-sp-4); align-items: center; flex-wrap: wrap; font-family: var(--aflon-mono); font-size: 13px; color: var(--aflon-text-muted); } .aflon-house { display: inline-flex; align-items: center; gap: 8px; } .aflon-house::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--aflon-hairline); } .aflon-house--emerald::before { background: var(--aflon-house-emerald); } .aflon-house--diamond::before { background: var(--aflon-house-diamond); } .aflon-house--platinum::before { background: var(--aflon-house-platinum); } .aflon-house--pearl::before { background: var(--aflon-house-pearl); } /* Respect reduced motion — no slide-in animations for users who opt out. */ @media (prefers-reduced-motion: reduce) { .aflon-btn, .aflon-fade-in { transition: none !important; animation: none !important; } } /* Visible focus — never rely on the default browser ring alone. */ .aflon-link:focus-visible, .aflon-btn:focus-visible { outline: 2px solid var(--aflon-accent-2); outline-offset: 3px; } /* * Legacy chrome overrides — hide the original .toparea (social + cart + login * dropdowns) and the home banner slider on public pages so the new identity * isn't fighting two stacked old strips above it. Login access is preserved * via the small dropdown inside the new utility strip in header.php. */ body .toparea { display: none !important; } body #bootstrap-touch-slider, body .bootstrap-touch-slider, body .bs-slider { display: none !important; } /* * Admission announcement strip — top-of-page band, gold ground, navy text. * Renders only when there is an active admission_period inside its open * window. Slides down on first paint. Day counter pulses subtly to draw * the eye without being noisy. One-off animation — runs once, then settles. */ .aflon-announce { background: linear-gradient(90deg, var(--aflon-accent-2) 0%, #D5AB58 50%, var(--aflon-accent-2) 100%); color: var(--aflon-ink-2); font-family: var(--aflon-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(13, 27, 75, .08); transform: translateY(-100%); animation: aflonAnnounceIn .6s cubic-bezier(.2,.65,.25,1) .25s forwards; position: relative; overflow: hidden; } .aflon-announce::after { /* Faint sheen sweeping right — animates once on first paint then stops. */ content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-100%); animation: aflonAnnounceSheen 1.6s ease-out 1s forwards; pointer-events: none; } @keyframes aflonAnnounceIn { to { transform: translateY(0); } } @keyframes aflonAnnounceSheen { to { transform: translateX(100%); } } .aflon-announce__inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px max(20px, calc((100vw - 1480px) / 2)); text-align: center; } .aflon-announce__dot { display: inline-block; width: 7px; height: 7px; background: var(--aflon-accent); border-radius: 50%; animation: aflonAnnouncePulse 1.6s ease-in-out infinite; } @keyframes aflonAnnouncePulse { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(107,31,44,.5); } 50% { transform: scale(1.25); opacity: .85; box-shadow: 0 0 0 6px rgba(107,31,44,0); } } .aflon-announce__session { font-weight: 600; } .aflon-announce__session em { color: var(--aflon-accent); font-style: normal; font-weight: 700; } .aflon-announce__sep { color: rgba(13,27,75,.4); } .aflon-announce__count { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; } .aflon-announce__count strong { font-family: var(--aflon-display); font-size: 16px; font-weight: 700; color: var(--aflon-accent); font-style: italic; line-height: 1; } .aflon-announce__cta { color: var(--aflon-ink-2); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--aflon-ink-2); padding-bottom: 1px; transition: color .15s, border-color .15s, transform .15s; display: inline-flex; align-items: center; gap: 6px; } .aflon-announce__cta:hover { color: var(--aflon-accent); border-bottom-color: var(--aflon-accent); } .aflon-announce__cta i { transition: transform .2s; } .aflon-announce__cta:hover i { transform: translateX(4px); } @media (max-width: 720px) { .aflon-announce { font-size: 11px; } .aflon-announce__inner { padding: 8px 14px; gap: 10px; } .aflon-announce__sep { display: none; } } @media (prefers-reduced-motion: reduce) { .aflon-announce { transform: none; animation: none; } .aflon-announce::after { animation: none; display: none; } .aflon-announce__dot { animation: none; } } /* Login dropdown inside the new utility strip. */ .aflon-chrome__login { position: relative; } .aflon-chrome__login-toggle { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 5px 12px; border-radius: 999px; font-family: var(--aflon-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .aflon-chrome__login-toggle:hover { border-color: var(--aflon-accent-2); color: var(--aflon-accent-2); } .aflon-chrome__login-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--aflon-hairline); border-radius: var(--aflon-radius-sm); box-shadow: var(--aflon-shadow-soft); min-width: 200px; padding: 6px 0; display: none; z-index: 60; } .aflon-chrome__login.is-open .aflon-chrome__login-menu { display: block; } .aflon-chrome__login-menu a { display: block; padding: 9px 16px; font-family: var(--aflon-body); font-size: 13px; color: var(--aflon-text); text-decoration: none; } .aflon-chrome__login-menu a:hover { background: var(--aflon-ground); color: var(--aflon-accent); } .aflon-chrome__login-menu i { width: 16px; color: var(--aflon-accent); margin-right: 6px; }