/* ============================================================================= ITS Education Asia — BTEC HND Business (Management) Page Stylesheet ============================================================================= Brand palette (ITS Education Asia): --blue: #0067AC Primary brand blue --dark-blue: #003A63 Navy / headings --light-blue: #00A4E4 Accent light blue --gold: #CEA82C Gold accent / CTA highlight border --orange: #CC4E00 CTA button fill --tint: #E8F4FC Light blue background tint --ink: #2b2f33 Main body text colour --grey: #5b6168 Secondary / muted text Typography: Headings — Montserrat (Google Fonts, loaded in ) Body/UI — Poppins, Open Sans, Segoe UI (fallback stack) File structure (in order): 1. CSS custom properties (:root) 2. Reset & base 3. Header & navigation 4. Hero section 5. Buttons 6. Breadcrumb 7. Quick info bar 8. Main layout 9. Content sections 10. Key facts cards 11. Desc bullet points 12. Tabs 13. Units table 14. Accordion / unit detail 15. Assessment section 16. Pathway / progression cards 17. Sidebar 18. Language toggle button ← bilingual feature 19. CTA fixed bar 20. Chinese disclaimer bar ← bilingual feature 21. Footer 22. Responsive breakpoints (5 steps: ≤1100 / ≤900 / ≤768 / ≤480 / ≤360) 23. Page nav (section strip) 24. Hours grid 25. Info blocks & requirement grid 26. Doc list 27. Year block 28. Unit tagline 29. Optional units (collapsible) 30. Grading cards 31. Progression section 32. Placeholder blocks 33. Document notice / LO source note 34. Utility: scroll-margin, transition consolidation, reveal animation ============================================================================= */ /* ============================================================================= 1. CSS CUSTOM PROPERTIES All brand colours and tints in one place. To change the look sitewide, edit values here only — do not hard-code hex values elsewhere unless absolutely necessary (e.g. rgba() with opacity). ============================================================================= */ :root { /* ── Primary colours — ITS brand ── */ --blue: #0067AC; --dark-blue: #003A63; --light-blue: #00A4E4; --green: #01A355; --purple: #6B1FAD; --orange: #CC4E00; --teal: #168CA1; --gold: #CEA82C; /* ── Derived tints (light backgrounds for cards/sections) ── */ --tint: #E6F4FC; /* blue tint — most widely used */ --green-tint: #E9F8EF; --purple-tint: #F3EBFC; --orange-tint: #FFF3EB; --teal-tint: #E6F5F7; --gold-tint: #FDF6E4; /* ── Derived darks (hover states, gradients) ── */ --green-dark: #016B38; --purple-dark: #4A1578; --orange-dark: #993B00; --teal-dark: #0E6171; --gold-dark: #8B721D; /* ── Neutrals ── */ --ink: #2b2f33; /* primary body text */ --grey: #5b6168; /* secondary / muted text */ } /* ============================================================================= 2. RESET & BASE Minimal normalisation. box-sizing: border-box is applied globally so padding and border are included in declared widths — prevents layout surprises. body padding-bottom reserves space for the fixed CTA bar (#cta-banner). ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* smooth anchor scrolling */ font-size: 16px; /* 1rem baseline */ } body { font-family: 'Poppins', 'Open Sans', 'Segoe UI', Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.7; /* Reserve space at the bottom so content is not hidden under #cta-banner. Updated to 80px on ≤768px (see responsive section). */ padding-bottom: 72px; } a { color: var(--blue); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--orange); } ul, ol { list-style: none; } img { max-width: 100%; display: block; } address { font-style: normal; } /* Centred content wrapper — max 1280px wide */ .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* ============================================================================= 3. HEADER & NAVIGATION #main-header is sticky (z-index: 1000) so it stays above page content. #lang-toggle-btn is z-index: 1100 (see section 18) to appear above the header. ============================================================================= */ #main-header { background: #fff; box-shadow: 0 2px 12px rgba(0, 58, 99, 0.12); position: sticky; top: 0; z-index: 1000; border-bottom: 3px solid var(--blue); } #main-nav { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; } /* Standalone CTA button inside the nav bar */ .nav-cta-standalone { padding: 9px 22px; font-size: 0.88rem; background: var(--orange); border-color: var(--orange); } .nav-cta-standalone:hover { background: #a83e00; border-color: #a83e00; color: #fff; } #logo { display: flex; align-items: center; gap: 8px; } /* "ITS" badge block in the logo */ #logo-its { background: var(--blue); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; padding: 4px 10px; letter-spacing: 2px; border-radius: 2px; } /* "Education Asia" text next to the ITS badge */ #logo-text { color: var(--dark-blue); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; line-height: 1.2; letter-spacing: 0.3px; } #nav-links { display: flex; align-items: center; gap: 4px; } #nav-links li a { display: block; padding: 8px 14px; font-size: 0.88rem; font-weight: 600; color: var(--ink); border-radius: 4px; white-space: nowrap; transition: all 0.2s; } #nav-links li a:hover, #nav-links li a.active { color: var(--blue); background: var(--tint); } /* Orange CTA link inside the nav list */ #nav-links li a.nav-cta { background: var(--orange); color: #fff; padding: 8px 18px; border-radius: 4px; } #nav-links li a.nav-cta:hover { background: #a83e00; color: #fff; } /* Hamburger button — hidden on desktop, shown via responsive rules */ #mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } #mobile-menu-btn span { display: block; width: 26px; height: 3px; background: var(--blue); border-radius: 2px; transition: all 0.3s; } /* ============================================================================= 4. HERO SECTION Full-width gradient banner with decorative pseudo-element circles. The gold bottom border matches the ITS brand accent line. ============================================================================= */ #hero-section { position: relative; background: linear-gradient(170deg, #005a9a 0%, var(--dark-blue) 100%); color: #fff; padding: 44px 0 50px; overflow: hidden; border-bottom: 4px solid var(--gold); } /* Decorative circles removed — cleaner, more institutional look */ #hero-section::before { display: none; } #hero-section::after { display: none; } /* Overlay div — currently transparent; kept for future tinting if needed */ .hero-overlay { position: absolute; inset: 0; background: transparent; } /* Hero text content — sits above pseudo-element decorations (z-index: 2) */ #hero-content { position: relative; z-index: 2; max-width: 780px; } /* Gold pill badge above the heading (e.g. "Pearson Accredited Qualification") */ #hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(206, 168, 44, 0.15); border: 1px solid rgba(206, 168, 44, 0.5); color: var(--gold); padding: 5px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; } #hero-content h1 { font-family: 'Montserrat', sans-serif; font-size: 3.2rem; font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 6px; } #hero-content h2 { font-family: 'Montserrat', sans-serif; font-size: 1.7rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 22px; } #hero-subtitle { font-size: 1.02rem; color: var(--grey); max-width: 620px; margin-bottom: 36px; } /* Small statistic pills row (e.g. "2 Years", "240 Credits") */ #hero-stats { display: flex; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .hero-stat { text-align: center; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 10px 18px; min-width: 72px; backdrop-filter: blur(4px); } .stat-number { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1; } .stat-label { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; } #hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================================================= 5. BUTTONS .btn is the base class; combine with a variant class for colour/style. Variant classes: .btn-primary, .btn-outline, .btn-white, .btn-outline-white On the hero (blue bg), btn-primary is overridden to a white solid button so it remains legible against the dark gradient background. ============================================================================= */ #main-content .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 5px; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: all 0.25s ease; border: 2px solid transparent; text-decoration: none; letter-spacing: 0.3px; } /* Blue solid button */ .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); } .btn-primary:hover { background: var(--dark-blue); border-color: var(--dark-blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 58, 99, 0.30); } /* Ghost button (white border) — used on dark backgrounds */ .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.75); } .btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; } /* White solid button */ .btn-white { background: #fff; color: var(--blue); border-color: #fff; } .btn-white:hover { background: var(--tint); color: var(--dark-blue); border-color: var(--tint); } /* Ghost button with white border (alias of .btn-outline — kept for HTML compatibility) */ .btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); } .btn-outline-white:hover { background: rgba(255,255,255,0.15); color: #fff; } /* On the hero section (blue gradient bg), primary button becomes white solid so it stands out against the dark background. */ #hero-actions .btn-primary { background: #fff; color: var(--blue); border-color: #fff; } #hero-actions .btn-primary:hover { background: var(--tint); color: var(--dark-blue); border-color: var(--tint); box-shadow: 0 4px 16px rgba(0,0,0,0.15); } /* Full-width button modifier */ .btn-full { width: 100%; justify-content: center; } /* ============================================================================= 6. BREADCRUMB ============================================================================= */ #breadcrumb { background: #f4f7fb; border-bottom: 1px solid #dde6f5; padding: 10px 0; } .breadcrumb-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: #6b7c93; } .breadcrumb-list a { color: #114B97; } .breadcrumb-list a:hover { color: #E8820C; } .breadcrumb-list i { font-size: 0.65rem; color: #aab8cc; } .breadcrumb-list li[aria-current="page"] { color: #2c3e50; font-weight: 600; } /* ============================================================================= 7. QUICK INFO BAR 5-column grid of course key facts (Level, Credits, Duration, etc.). Collapses to 3-col at ≤1100px, 2-col at ≤900px, 1-col at ≤768px. ============================================================================= */ #quick-info-bar { background: #114B97; color: #fff; padding: 22px 0; } .quick-info-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .quick-info-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-right: 1px solid rgba(255,255,255,0.15); } .quick-info-item:last-child { border-right: none; } .quick-info-item > i { font-size: 1.5rem; color: #7ecfef; flex-shrink: 0; } .quick-info-item div { display: flex; flex-direction: column; gap: 2px; } /* Label row (e.g. "LEVEL") */ .quick-info-item strong { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255,255,255,0.65); } /* Value row (e.g. "Level 5") */ .quick-info-item span { font-size: 0.88rem; font-weight: 600; color: #fff; } /* ============================================================================= 8. MAIN LAYOUT Single-column layout wrapper. Max-width matches the quick-info and CTA bars (1100px) rather than the global .container (1280px) for a tighter editorial column feel on large screens. ============================================================================= */ #main-content { padding: 50px 0 0; background: #f4f8fc; } .main-layout { display: block; max-width: 1100px; margin: 0 auto; } /* ============================================================================= 9. CONTENT SECTIONS White rounded cards that group related content. Each major page section (Overview, Curriculum, Assessment…) lives in one .content-section. ============================================================================= */ .content-section { background: #fff; border-radius: 6px; padding: 36px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0, 58, 99, 0.06), 0 2px 12px rgba(0, 58, 99, 0.04); border: 1px solid #e8eef6; } /* Section heading — no icon; clean rule line for academic look */ .section-title { font-family: 'Montserrat', sans-serif; font-size: 1.22rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid #d8e4f0; letter-spacing: 0.15px; } .section-desc { color: var(--grey); margin-bottom: 24px; font-size: 0.95rem; } .content-section p { margin-bottom: 14px; color: var(--ink); line-height: 1.75; } .content-section p:last-child { margin-bottom: 0; } /* ============================================================================= 10. KEY FACTS CARDS GRID Colourful 3-column stat cards (e.g. "240 Credits", "2 Years"). The pseudo-element ::before adds a subtle decorative circle in each card. ============================================================================= */ .key-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .kf-card { border-radius: 6px; padding: 18px 16px; text-align: center; border: 1px solid transparent; transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; overflow: hidden; } /* Decorative circle — top-right of each card */ .kf-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.12); pointer-events: none; } .kf-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,58,99,0.15); } /* Card colour themes — flat solid colours, no gradients */ .kf-blue { background: var(--blue); border-color: #005a9a; } .kf-teal { background: var(--teal); border-color: #107080; } .kf-green { background: var(--green); border-color: #018042; } .kf-orange { background: var(--orange); border-color: #a33c00; } .kf-navy { background: var(--dark-blue); border-color: #002040; } .kf-purple { background: var(--purple); border-color: #4a0f90; } .kf-icon { font-size: 1.45rem; color: rgba(255,255,255,0.85); margin-bottom: 6px; } .kf-num { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; } .kf-label { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.92); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .kf-sub { font-size: 0.72rem; color: rgba(255,255,255,0.65); line-height: 1.35; } /* ============================================================================= 11. DESC BULLET POINTS Used inside accordion body panels to list unit description points. Each
  • has a subtle bottom border for visual separation. The override strips bold so emphasis does not break flow. ============================================================================= */ .desc-points { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 8px; margin-bottom: 4px; padding: 0; background: transparent; border: none; border-radius: 0; } .desc-points li { display: flex; align-items: baseline; gap: 9px; font-size: 0.9rem; color: #3a4a5c; line-height: 1.65; padding: 5px 0; border-bottom: 1px solid #eef2f8; } .desc-points li:last-child { border-bottom: none; } /* Strip bold inside bullets — prevents text weight inconsistency */ .desc-points li strong { font-weight: 400; color: inherit; } .desc-points li i { color: var(--blue); flex-shrink: 0; font-size: 0.7rem; margin-top: 1px; } /* Sub-section heading inside content cards */ .sub-section-title { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--dark-blue); border-bottom: 1px solid #d0deee; padding-bottom: 8px; margin-bottom: 16px; } /* ============================================================================= 12. TABS Year 1 / Year 2 tab panels inside the Curriculum section. Only .tab-content.active is displayed; JS toggles the class. ============================================================================= */ .tab-container { margin-top: 4px; } .tab-nav { display: flex; gap: 4px; border-bottom: 3px solid #dde6f5; margin-bottom: 24px; } .tab-btn { background: #f4f7fb; border: none; border-bottom: 3px solid transparent; color: #506070; font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 12px 22px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; border-radius: 6px 6px 0 0; margin-bottom: -3px; /* overlap the nav border-bottom */ } .tab-btn:hover { background: #e8eef7; color: #114B97; } .tab-btn.active { background: #fff; color: #114B97; border-bottom-color: #114B97; font-weight: 700; } /* Only the active panel is shown */ .tab-content { display: none; } .tab-content.active { display: block; } /* Intro banner at the top of each tab panel */ .tab-intro { background: #f4f7fb; border-radius: 6px; padding: 14px 18px; margin-bottom: 18px; font-size: 0.92rem; color: #3a4a5c; } /* ============================================================================= 13. UNITS TABLE Summary table of units (Unit No., Name, Credits, Type) shown before the accordion detail. Horizontally scrollable on small screens via .table-wrapper. ============================================================================= */ .table-wrapper { overflow-x: auto; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); } .units-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .units-table thead { background: #114B97; color: #fff; } .units-table thead th { padding: 13px 16px; text-align: left; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; } .units-table tbody tr { border-bottom: 1px solid #edf2f9; transition: background 0.15s; } .units-table tbody tr:hover { background: #f4f8ff; } .units-table tbody td { padding: 12px 16px; color: #3a4a5c; vertical-align: middle; } .units-table tfoot td { padding: 12px 16px; background: #eef3fb; font-weight: 600; color: #0A2E5C; border-top: 2px solid #c5d8f5; } .unit-num { color: #114B97; font-weight: 700; width: 40px; } .unit-name { font-weight: 600; } .unit-credits { font-weight: 700; color: #114B97; text-align: center; width: 70px; } /* Unit type badges (Mandatory Core / Specialist / Optional) */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .badge-mandatory { background: #e8f0fe; color: #114B97; } .badge-core { background: #fff3e0; color: #c67200; } .badge-specialist { background: #e8f5e9; color: #2e7d32; } .badge-optional { background: #f3e5f5; color: #7b1fa2; } /* ============================================================================= 14. ACCORDION / UNIT DETAIL Each unit has a collapsible accordion item. The .open state on the parent item drives all state changes: header bg, icon rotation, body max-height. max-height animation trick: the body transitions from 0 → 1000px. 1000px is a safe upper bound for any unit's content height. If content ever exceeds 1000px, increase this value. The unit-detail-grid splits the accordion body into: - Left column: description, learning outcomes, key topics - Right column: unit info card (Level / Credits / GLH / Type) The right column moves to the top on ≤900px (order: -1). ============================================================================= */ .accordion { display: flex; flex-direction: column; gap: 8px; } .accordion-item { border: 1px solid #d0deee; border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s; } .accordion-item:hover { box-shadow: 0 2px 10px rgba(0, 58, 99, 0.1); } .accordion-header { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border: none; cursor: pointer; text-align: left; transition: background 0.2s; font-family: 'Poppins', sans-serif; } .accordion-header:hover { background: var(--tint); } /* Active/open state: light tint + underline, not full blue fill */ .accordion-item.open .accordion-header { background: #eef4ff; color: var(--dark-blue); border-bottom: 2px solid var(--blue); } /* Unit number pill */ .acc-unit-num { background: var(--tint); color: var(--blue); font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } /* Inverted colours when open */ .accordion-item.open .acc-unit-num { background: var(--blue); color: #fff; } .acc-title { flex: 1; font-size: 0.95rem; font-weight: 600; color: var(--dark-blue); } .accordion-item.open .acc-title { color: var(--dark-blue); font-weight: 700; } /* Credits badge on the right of the header */ .acc-credits { font-size: 0.8rem; font-weight: 600; color: var(--blue); background: var(--tint); padding: 3px 10px; border-radius: 12px; white-space: nowrap; } .accordion-item.open .acc-credits { background: var(--tint); color: var(--blue); } /* Chevron icon — rotates 180° when open */ .acc-icon { color: var(--blue); transition: transform 0.3s; flex-shrink: 0; font-size: 0.85rem; } .accordion-item.open .acc-icon { transform: rotate(180deg); color: var(--blue); } /* Collapsible body — max-height animation */ .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .accordion-item.open .accordion-body { max-height: 1000px; /* safe upper bound; increase if content is taller */ } /* Two-column grid inside the accordion body */ .unit-detail-grid { display: grid; grid-template-columns: 1fr 220px; gap: 24px; padding: 24px; background: #f8fbff; border-top: 1px solid #d0deee; } /* Sub-headings inside the detail left column */ .unit-detail-main h4 { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--dark-blue); text-transform: none; letter-spacing: 0; margin-bottom: 10px; margin-top: 20px; padding: 6px 10px; background: var(--tint); border-left: 3px solid var(--blue); border-radius: 0 4px 4px 0; } .unit-detail-main h4:first-of-type { margin-top: 14px; } .unit-detail-main p { font-size: 0.9rem; color: var(--ink); line-height: 1.7; margin-bottom: 4px; } /* Numbered learning outcomes list */ .learning-outcomes { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; margin-top: 8px; margin-bottom: 4px; padding-right: 4px; } .learning-outcomes li { font-size: 0.88rem; color: var(--ink); line-height: 1.6; padding-left: 4px; } /* Bullet list of key topics */ .key-topics { display: flex; flex-direction: column; gap: 5px; } .key-topics li { font-size: 0.88rem; color: #3a4a5c; padding-left: 16px; position: relative; } .key-topics li::before { content: '•'; color: #114B97; position: absolute; left: 0; font-weight: 700; } /* ── Unit Info Card (right column of unit-detail-grid) ── Shows Level / Credits / GLH / Type for each unit. Each row's has data-i18n so labels switch with the language toggle. Each row's also has data-i18n for values that have translations (e.g. "60 hours" → "60小時", "Mandatory Core" → "必修核心"). ──────────────────────────────────────────────────────── */ .unit-info-card { background: #fff; border: 1px solid #d0deee; border-radius: 8px; overflow: hidden; height: fit-content; } .unit-info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--tint); font-size: 0.85rem; } .unit-info-row:last-child { border-bottom: none; } .unit-info-row strong { color: var(--grey); font-size: 0.8rem; } .unit-info-row span { color: var(--dark-blue); font-weight: 600; text-align: right; } /* ============================================================================= 15. ASSESSMENT SECTION 2-column grid of assessment method cards + a grading breakdown box. ============================================================================= */ .assessment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; } .assessment-card { background: #f4f7fb; border: 1px solid #dde6f5; border-radius: 10px; padding: 24px; text-align: center; transition: all 0.25s; } .assessment-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(17, 75, 151, 0.09); border-color: #114B97; } .assessment-icon { width: 56px; height: 56px; background: #114B97; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .assessment-icon i { color: #fff; font-size: 1.3rem; } .assessment-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: #0A2E5C; margin-bottom: 8px; } /* !important overrides the .content-section p rule above */ .assessment-card p { font-size: 0.85rem; color: #506070; margin-bottom: 0 !important; } /* Grading summary box (Pass / Merit / Distinction) */ .grading-box { background: #f4f7fb; border: 1px solid #dde6f5; border-radius: 10px; padding: 24px; } .grading-box h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: #0A2E5C; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .grading-box h3 i { color: #E8820C; } .grading-box > p { margin-bottom: 16px !important; color: #506070; font-size: 0.9rem; } .grade-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf2f9; font-size: 0.9rem; color: #3a4a5c; } .grade-row:last-child { border-bottom: none; } .grade-badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; min-width: 90px; text-align: center; white-space: nowrap; } .grade-pass { background: #e3f6e8; color: #01A355; } .grade-merit { background: #fef7e0; color: #CEA82C; } .grade-distinction { background: var(--tint); color: var(--blue); } /* ============================================================================= 16. PATHWAY / PROGRESSION CARDS 2-column grid. The primary pathway card spans both columns. ============================================================================= */ .pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .pathway-card { background: #f4f7fb; border: 1px solid #dde6f5; border-radius: 10px; padding: 24px; transition: all 0.25s; } .pathway-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(17, 75, 151, 0.08); } /* Full-width featured pathway card */ .pathway-card.pathway-primary { grid-column: span 2; background: linear-gradient(135deg, #eef3fb, #e8f0fe); border-color: #114B97; } .pathway-icon { width: 50px; height: 50px; background: #114B97; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .pathway-icon i { color: #fff; font-size: 1.2rem; } .pathway-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.98rem; font-weight: 700; color: #0A2E5C; margin-bottom: 8px; } .pathway-card p { font-size: 0.88rem; color: #3a4a5c; line-height: 1.65; margin-bottom: 0 !important; } /* Example universities / institutions note */ .pathway-examples { margin-top: 10px; font-size: 0.84rem; color: #506070; background: rgba(17, 75, 151, 0.07); padding: 8px 12px; border-radius: 6px; } /* ============================================================================= 17. SIDEBAR Currently only contains the Related Programmes card. Uses position: sticky so it stays visible as the user scrolls the main column. ============================================================================= */ #sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 44px; } .sidebar-card { background: #fff; border-radius: 6px; padding: 24px; box-shadow: 0 1px 4px rgba(0, 58, 99, 0.05); border: 1px solid #e8eef6; } .sidebar-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .sidebar-card h3 i { color: var(--blue); } .sidebar-card p { font-size: 0.88rem; color: #506070; margin-bottom: 18px; line-height: 1.6; } /* Enquiry card variant — orange top accent */ .sidebar-enquiry { border-top-color: var(--orange); } .sidebar-enquiry h3 i { color: var(--orange); } /* ── Enquiry Form ── */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: #3a4a5c; margin-bottom: 5px; } .form-group input, .form-group textarea { width: 100%; padding: 10px 13px; border: 1.5px solid #dde6f5; border-radius: 6px; font-family: 'Open Sans', sans-serif; font-size: 0.88rem; color: #2c3e50; background: #fafcff; transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 172, 0.12); background: #fff; } .form-group textarea { resize: vertical; min-height: 90px; } /* Success message shown after form submit */ .form-success { display: flex; align-items: center; gap: 10px; background: #e3f6e8; border: 1px solid #a5d6b0; color: #1b6b30; border-radius: 6px; padding: 12px 16px; font-size: 0.9rem; font-weight: 600; margin-top: 14px; } /* ── Sidebar Lists ── */ .sidebar-list { display: flex; flex-direction: column; gap: 9px; } .sidebar-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.87rem; color: #3a4a5c; } .sidebar-list i { color: #114B97; margin-top: 2px; flex-shrink: 0; font-size: 0.8rem; } /* ── Contact block ── */ .sidebar-contact .contact-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f4fb; font-size: 0.87rem; color: #3a4a5c; } .sidebar-contact .contact-item:last-child { border-bottom: none; } .sidebar-contact .contact-item i { color: #114B97; margin-top: 3px; flex-shrink: 0; } .sidebar-contact a { color: #114B97; font-weight: 600; } .sidebar-contact a:hover { color: #E8820C; } /* ── Related Courses list ── */ .related-courses { display: flex; flex-direction: column; gap: 8px; } .related-courses li a { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--blue); padding: 8px 10px; border-radius: 6px; transition: all 0.2s; } .related-courses li a:hover { background: var(--tint); color: var(--dark-blue); padding-left: 14px; /* subtle indent on hover */ } /* ============================================================================= 18. LANGUAGE TOGGLE BUTTON (#lang-toggle-btn) ───────────────────────────────────────────────────────────────────────────── BILINGUAL FEATURE — managed by js/lang.js ───────────────────────────────────────────────────────────────────────────── The button is fixed at the top-right of the viewport. It is intentionally placed ABOVE both the sticky header (z-index: 1000) and the fixed CTA bar (z-index: 1000) using z-index: 1100. Responsive behaviour: Default (>768px): pill shape with globe icon + text label ≤768px: smaller pill (see responsive section) ≤480px: hides the .lang-label text; becomes a circular icon button The button's HTML structure expected in index.html: ───────────────────────────────────────────────────────────────────────────── NOTE: the responsive overrides for this button live inside the @media (max-width: 768px) and @media (max-width: 480px) blocks below. ============================================================================= */ #lang-toggle-btn { position: fixed; top: 65px; right: 20px; z-index: 1100; /* above sticky header (1000) and fixed CTA bar (1000) */ display: flex; align-items: center; gap: 6px; background: rgba(0, 58, 99, 0.88); /* semi-transparent dark-blue */ color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 20px; padding: 7px 16px; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; /* backdrop-filter creates the frosted-glass effect on supported browsers */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari prefix */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); transition: background 0.2s, border-color 0.2s, transform 0.15s; white-space: nowrap; text-decoration: none; outline: none; } #lang-toggle-btn:hover { background: var(--blue); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-1px); } #lang-toggle-btn:active { transform: translateY(0); /* snap back on click */ } #lang-toggle-btn .lang-icon { font-size: 1rem; line-height: 1; } #lang-toggle-btn .lang-label { line-height: 1; } /* ============================================================================= 19. CTA FIXED BAR (#cta-banner) Persistent call-to-action strip pinned to the viewport bottom. z-index: 1000 — same level as the header, below the language toggle (1100). body padding-bottom (72px / 80px on mobile) prevents page content from being permanently hidden beneath it. ============================================================================= */ #cta-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(90deg, var(--dark-blue) 0%, var(--blue) 100%); border-top: 3px solid var(--gold); box-shadow: 0 -4px 24px rgba(0,0,0,0.22); padding: 14px 32px; } .cta-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-bar-inner h2 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0; white-space: nowrap; } .cta-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; } /* Eyebrow label above the heading (not currently rendered in the fixed bar, kept for potential use in the full-page CTA section) */ .cta-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.9); font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: 30px; margin-bottom: 16px; } /* Main CTA button inside the fixed bar */ .btn-cta-main { font-size: 0.9rem; padding: 10px 24px; } /* Small disclaimer line below the CTA button. The !important flags override the generic .content-section p rules. */ .cta-note { font-size: 0.78rem !important; color: rgba(255,255,255,0.5) !important; margin-top: 4px !important; margin-bottom: 0 !important; display: flex; align-items: center; justify-content: center; gap: 6px; } /* ============================================================================= 20. CHINESE DISCLAIMER BAR (#zh-disclaimer) ───────────────────────────────────────────────────────────────────────────── BILINGUAL FEATURE — shown only when Chinese is active ───────────────────────────────────────────────────────────────────────────── The bar is HIDDEN by default via display:none. It becomes visible through the CSS :lang(zh-HK) selector, which is triggered when js/lang.js sets document.documentElement.lang = 'zh-HK'. This is a pure-CSS toggle — no JS class manipulation needed for visibility. The lang attribute on is already set for accessibility and SEO reasons, so we piggyback on it here. The disclaimer text is set by the data-i18n="disclaimer.zh" key in lang.js. The English value is intentionally empty ("") because the bar should not appear in English mode at all. ───────────────────────────────────────────────────────────────────────────── HTML structure expected in index.html (placed just before #lang-toggle-btn):
    ============================================================================= */ #zh-disclaimer { display: none; /* hidden in English mode */ align-items: center; gap: 8px; background: rgba(0, 58, 99, 0.06); border-top: 1px solid rgba(0, 103, 172, 0.15); padding: 10px 32px; font-size: 0.78rem; color: var(--grey); line-height: 1.55; } #zh-disclaimer i { color: var(--blue); flex-shrink: 0; font-size: 0.82rem; margin-top: 1px; } /* Activated when js/lang.js sets */ :lang(zh-HK) #zh-disclaimer { display: flex; } @media (max-width: 768px) { #zh-disclaimer { padding: 10px 16px; font-size: 0.74rem; } } /* ============================================================================= 21. FOOTER 4-column grid on desktop, 2-col at ≤1100px, 1-col at ≤768px. ============================================================================= */ #main-footer { background: var(--dark-blue); color: #b8cce4; padding: 50px 0 20px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 36px; margin-bottom: 36px; } .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-logo-its { background: var(--blue); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; padding: 3px 8px; border-radius: 2px; } .footer-logo-text { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.88rem; } .footer-brand p { font-size: 0.85rem; line-height: 1.65; color: #7a9bba; } .footer-col h4 { font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-col ul li { margin-bottom: 8px; } .footer-col ul li a, .footer-col address a { color: #7a9bba; font-size: 0.87rem; transition: color 0.2s; } .footer-col ul li a:hover, .footer-col address a:hover { color: #E8820C; } .footer-col address p { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: #7a9bba; margin-bottom: 10px; line-height: 1.55; } .footer-col address i { color: #009EDB; margin-top: 3px; flex-shrink: 0; font-size: 0.82rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; text-align: center; } .footer-bottom p { font-size: 0.8rem; color: #5a7a99; margin-bottom: 4px; } .footer-bottom a { color: #5a7a99; transition: color 0.2s; } .footer-bottom a:hover { color: #E8820C; } /* Italic note about Pearson accreditation */ .pearson-note { font-size: 0.75rem !important; color: #4a6a88 !important; font-style: italic; } /* ============================================================================= 22. RESPONSIVE BREAKPOINTS Five breakpoints, from widest to narrowest: ≤1100px Tablet wide — reflow footer & quick-info grid ≤900px Tablet — collapse hours/req/optional grids, shrink hero ≤768px Mobile — stack most grids, shrink typography, update lang button ≤480px Small mobile — icon-only lang button, hide hero badge ≤360px Extra small — further reductions WHY !important ON SOME GRID OVERRIDES: Certain grid rules (e.g. .hours-grid, .req-grid, .optional-grid) are defined later in this file (after the media queries, due to feature grouping). Because later rules normally win, the mobile single-column overrides use !important to ensure they are applied regardless of source order. If the file is ever reorganised so these grids appear before the media queries, the !important flags can be removed. ============================================================================= */ /* ── Tablet wide (≤1100px) ── */ @media (max-width: 1100px) { .main-layout { max-width: 100%; padding: 0; } #lang-toggle-btn {top: 30%; right: 0; border-radius: 20px 0 0 20px; padding: 10px; transition: transform 0.3s ease-in-out; } #lang-toggle-btn:hover .lang-label {display: block;} #lang-toggle-btn .lang-label {display: none;} /* #lang-toggle-btn:hover {transform: translateX(-10px);} */ /* Quick info bar: 5-col → 3-col (items 3 and 4 get border adjustments) */ .quick-info-grid { grid-template-columns: repeat(3, 1fr); } .quick-info-item:nth-child(3) { border-right: none; } .quick-info-item:nth-child(4) { border-right: 1px solid rgba(255,255,255,0.15); } /* Footer: 4-col → 2-col */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } /* ── Tablet (≤900px) ── */ @media (max-width: 900px) { .container { padding: 0 20px; } /* Single-column overrides (see !important note above) */ .hours-grid { grid-template-columns: 1fr !important; } .req-grid { grid-template-columns: 1fr !important; } .optional-grid { grid-template-columns: 1fr !important; } .doc-list.two-col { gap: 6px; } /* Key facts: 3-col → 2-col */ .key-facts-grid { grid-template-columns: repeat(2, 1fr); } /* Shrink hero headings */ #hero-content h1 { font-size: 2.2rem; } #hero-content h2 { font-size: 1.3rem; } /* Quick info bar: 3-col → 2-col */ .quick-info-grid { grid-template-columns: repeat(2, 1fr); } .quick-info-item:nth-child(2) { border-right: none; } .quick-info-item:nth-child(4) { border-right: none; } .content-section { padding: 28px 24px; } /* Unit detail: side panel stacks above main (order: -1) */ .unit-detail-grid { grid-template-columns: 1fr; } .unit-detail-side { order: -1; } /* Progression / assessment: 2-col → 1-col */ .pathway-card.pathway-primary { grid-column: span 1; } .assessment-grid { grid-template-columns: 1fr; } } /* ── Mobile (≤768px) ── */ @media (max-width: 768px) { /* Global spacing */ .container { padding: 0 16px; } body { padding-bottom: 80px; } /* slightly taller CTA bar on mobile */ /* ── Language toggle: shrink pill ── */ /* #lang-toggle-btn { top: 10px; right: 12px; padding: 5px 12px; font-size: 0.76rem; } #lang-toggle-btn .lang-icon { font-size: 0.9rem; } */ /* ── Page-nav: horizontal scroll strip (hide scrollbar) ── */ #page-nav { overflow: hidden; } #page-nav-links { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding: 0 4px; } #page-nav-links::-webkit-scrollbar { display: none; } #page-nav-links li a { font-size: 0.78rem; padding: 10px 12px; white-space: nowrap; } /* ── Hero ── */ #hero-section { padding: 28px 0 32px; } #hero-content h1 { font-size: 1.65rem; line-height: 1.2; } #hero-content h2 { font-size: 1rem; margin-bottom: 18px; } #hero-badge { font-size: 0.72rem; padding: 4px 11px; } /* Stack CTA buttons full-width on mobile */ #hero-actions { flex-direction: column; gap: 10px; } #hero-actions .btn { width: 100%; justify-content: center; padding: 13px 20px; font-size: 0.9rem; } #hero-stats { gap: 8px; } .hero-stat { min-width: 68px; padding: 8px 12px; } .stat-number { font-size: 1.3rem; } .stat-label { font-size: 0.62rem; } /* ── Main content ── */ #main-content { padding: 20px 0 0; } .content-section { padding: 20px 16px; border-radius: 10px; margin-bottom: 16px; } .section-title { font-size: 1.1rem; gap: 8px; margin-bottom: 16px; } /* ── Key facts: keep 2-col on mobile ── */ .key-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kf-num { font-size: 1.6rem; } .kf-label { font-size: 0.72rem; } .kf-sub { font-size: 0.66rem; } .kf-icon { font-size: 1.2rem; } /* ── Hours grid: 1-col, horizontal card layout ── */ .hours-grid { grid-template-columns: 1fr !important; gap: 10px; } .hours-card { padding: 16px; display: flex; align-items: center; gap: 14px; text-align: left; } .hours-icon { font-size: 1.3rem; margin-bottom: 0; flex-shrink: 0; } .hours-num { font-size: 1.6rem; margin-bottom: 2px; } .hours-label { font-size: 0.78rem; } /* ── Tabs: horizontal scroll (no wrapping) ── */ .tab-nav { gap: 2px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { padding: 9px 12px; font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; } /* ── Units table ── */ .table-wrapper { border-radius: 6px; } .units-table { font-size: 0.8rem; } .units-table thead th, .units-table tbody td { padding: 9px 10px; } /* ── Accordion / unit detail ── */ .accordion-header { padding: 12px 14px; } .acc-title { font-size: 0.86rem; line-height: 1.4; } .unit-detail-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px 14px; } .unit-detail-side { order: -1; } .unit-detail-main h4 { font-size: 0.78rem; padding: 5px 9px; margin-top: 14px; } .unit-detail-main p, .learning-outcomes li, .key-topics li, .desc-points li { font-size: 0.84rem; } /* ── Grading ── */ .grading-cards { grid-template-columns: 1fr !important; gap: 10px; } .grading-card { padding: 18px 16px; gap: 8px; } .grading-card-title { font-size: 1rem; } .grade-row { flex-direction: column; align-items: flex-start; gap: 6px; } .note-text { font-size: 0.82rem; padding: 8px 12px 8px 32px; } /* ── Progression section ── */ #progression-section { padding: 20px 0 28px; margin-top: -16px; } .prog-wrapper-card { padding: 18px 16px; border-radius: 12px; } .prog-section-header { padding-bottom: 16px; margin-bottom: 16px; } .prog-section-intro { font-size: 0.87rem; } .progression-grid { grid-template-columns: 1fr !important; gap: 12px; } .prog-card { padding: 18px 16px; } .prog-card-icon { width: 42px; height: 42px; font-size: 1.1rem; margin-bottom: 12px; } .prog-card h3 { font-size: 0.95rem; } .prog-card > p { font-size: 0.85rem; } .prog-list li { font-size: 0.82rem; gap: 8px; } .progression-cta { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; } .progression-cta .btn { width: 100%; justify-content: center; } /* ── CTA fixed bar: stack on mobile ── */ #cta-banner { padding: 10px 16px; } .cta-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; } .cta-bar-inner h2 { font-size: 0.88rem; text-align: center; white-space: normal; } .cta-actions { justify-content: center; gap: 8px; } .btn-cta-main { font-size: 0.82rem; padding: 9px 16px; flex: 1; justify-content: center; text-align: center; } /* ── Info blocks ── */ .info-block { padding: 16px 14px; } .req-grid { grid-template-columns: 1fr; gap: 8px; } /* ── Misc ── */ .pathway-grid { grid-template-columns: 1fr; } .pathway-card.pathway-primary { grid-column: auto; } .assessment-grid { grid-template-columns: 1fr; } .quick-info-grid { grid-template-columns: 1fr; } .quick-info-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); } .quick-info-item:last-child { border-bottom: none; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 767px) { #page-nav {top:0 !important;} #lang-toggle-btn {top:35%} } /* ── Small mobile (≤480px) ── */ @media (max-width: 480px) { .container { padding: 0 12px; } /* Language toggle — hide text label, collapse to a circular icon button. The globe icon (fa-globe) remains visible as the sole indicator. */ /* #lang-toggle-btn .lang-label { display: none; } #lang-toggle-btn { padding: 6px 10px; border-radius: 50%; gap: 0; } #lang-toggle-btn .lang-icon { font-size: 1rem; } */ #hero-content h1 { font-size: 1.45rem; } #hero-content h2 { font-size: 0.92rem; } #hero-badge { display: none; } /* too wide for very small screens */ /* Key facts: still 2-col but smaller padding */ .key-facts-grid { gap: 8px; } .kf-card { padding: 14px 10px; } .kf-num { font-size: 1.4rem; } /* CTA bar: ultra-compact */ #cta-banner { padding: 8px 12px; } .cta-bar-inner h2 { font-size: 0.8rem; } .btn-cta-main { font-size: 0.78rem; padding: 8px 12px; } .content-section { padding: 16px 14px; } .section-title { font-size: 1rem; } /* .accordion-header { padding: 11px 12px; } */ .accordion-header { display: grid; grid-template-columns: repeat(2, auto); grid-template-areas: "year title" "credits arrow"; gap: 8px 12px; align-items: center; padding: 20px; } .optional-collapsible .opt-toggle { display: grid !important; } .opt-toggle-left { display: grid !important; grid-template-columns: repeat(2, auto); } .acc-title { font-size: 0.83rem; } .prog-wrapper-card { padding: 14px 12px; } .acc-icon { grid-area: arrow; justify-self: end; } } /* ── Extra small (≤360px) ── */ @media (max-width: 360px) { .container { padding: 0 10px; } #hero-content h1 { font-size: 1.3rem; } .key-facts-grid { grid-template-columns: 1fr; } /* single col on tiny screens */ .cta-actions { flex-direction: column; } .btn-cta-main { width: 100%; } } /* ============================================================================= 23. PAGE NAV (section strip) Sticky horizontal nav strip that highlights the current section on scroll. z-index: 900 — below the main header (1000) and language toggle (1100). On mobile, the strip becomes horizontally scrollable with hidden scrollbar. ============================================================================= */ #page-nav { background: #fff; border-bottom: 1px solid #d0deee; position: sticky; top: 55px; z-index: 900; box-shadow: 0 2px 8px rgba(0,58,99,0.06); } #page-nav-links { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } #page-nav-links::-webkit-scrollbar { display: none; } #page-nav-links li a { display: block; padding: 13px 18px; font-size: 0.84rem; font-weight: 600; color: var(--grey); white-space: nowrap; border-bottom: 3px solid transparent; transition: all 0.2s; } #page-nav-links li a:hover, #page-nav-links li a.active { color: var(--blue); border-bottom-color: var(--blue); } /* ============================================================================= 24. HOURS GRID 3-column grid of total / guided / independent learning hours. Each card has a gradient background using a different brand colour. Collapses to 1-col at ≤900px via the !important override in the media query. ============================================================================= */ .hours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; } .hours-card { border-radius: 10px; padding: 22px 18px; text-align: center; border: 1px solid #dde6f5; } /* Card colour themes */ .hours-total { background: linear-gradient(135deg,var(--blue),var(--dark-blue)); border-color:#004d80; } .hours-guided { background: linear-gradient(135deg,#02c066,var(--green)); border-color:var(--green-dark); } .hours-independent { background: linear-gradient(135deg,var(--purple),var(--purple-dark)); border-color:#2e0a60; } .hours-icon { font-size:1.6rem; margin-bottom:8px; color:rgba(255,255,255,0.88); } .hours-num { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; color: #fff; margin-bottom: 6px; } .hours-label { font-size: 0.8rem; color: rgba(255,255,255,0.88); font-weight: 600; line-height: 1.3; } /* ============================================================================= 25. INFO BLOCKS & REQUIREMENT GRID .info-block is a highlighted callout box with a coloured left border. Three accent variants: TQT (blue), GLH (green), ILH (purple). .req-grid inside info blocks shows English requirements (IELTS, etc.) in a 2-column grid of mini cards. ============================================================================= */ .info-block { background: #f8fbff; border: 1px solid #d0deee; border-left: 4px solid var(--blue); border-radius: 8px; padding: 22px 24px; margin-top: 20px; } .info-block h3 { font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .info-block p { font-size: 0.9rem; color: var(--ink); margin-bottom: 10px; line-height: 1.7; } .info-block p:last-child { margin-bottom: 0; } /* English requirements 2-column grid */ .req-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } .req-item { background: #fff; border: 1px solid #d0deee; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .req-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--blue); } .req-value { font-size: 0.95rem; font-weight: 700; color: var(--dark-blue); } .req-value small { font-size: 0.78rem; font-weight: 400; color: #506070; } /* Left border accent colours per info-block type */ .info-block-tqt { border-left-color: var(--blue); } .info-block-tqt h3 i { color: var(--blue); } .info-block-glh { border-left-color: var(--green); } .info-block-glh h3 i { color: var(--green); } .info-block-ilh { border-left-color: var(--purple); } .info-block-ilh h3 i { color: var(--purple); } /* Compact variant — less padding, smaller heading */ .info-block-compact { padding: 14px 18px; margin-top: 14px; } .info-block-compact h3 { font-size: 0.9rem; margin-bottom: 8px; } /* Inline header layout: heading + note on the same line */ .info-block-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .info-block-header h3 { margin-bottom: 0; flex-shrink: 0; } .info-block-note { font-size: 0.82rem; color: #506070; line-height: 1.4; } /* Inline req-grid (zero top-margin) */ .req-grid-inline { gap: 8px; margin-top: 0; } /* Small req-item with less padding */ .req-item-sm { padding: 8px 12px; } /* Larger value text */ .req-value-lg { font-size: 1.05rem; } /* Compact body paragraph inside info blocks */ .info-compact-text { font-size: 0.87rem !important; color: #3a4a5c !important; line-height: 1.6 !important; margin-bottom: 8px !important; } /* Highlighted note with icon (e.g. "Note: …") */ .note-text { font-size: 0.83rem !important; color: var(--grey) !important; display: block; background: var(--tint); padding: 8px 12px 8px 34px; border-radius: 6px; margin-top: 10px !important; position: relative; line-height: 1.65; } .note-text i { color: var(--blue); position: absolute; left: 12px; top: 10px; font-size: 0.85rem; } /* ============================================================================= 26. DOC LIST Bullet list used for document / application checklist items. .two-col variant is a simple single-column stacked list (the "two-col" name is historical — the layout was changed to single-column for readability). ============================================================================= */ .doc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .doc-list li { padding-left: 18px; position: relative; font-size: 0.92rem; color: var(--ink); line-height: 1.65; } .doc-list li::before { content: '•'; color: var(--blue); font-weight: 700; position: absolute; left: 0; } /* Two-col variant — currently renders as single column */ .doc-list.two-col { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } /* ============================================================================= 27. YEAR BLOCK Wraps each academic year's content in the Curriculum section. .year-header contains the year tag, title, and credit count. ============================================================================= */ .year-block { margin-bottom: 40px; } .year-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid #dde6f5; } /* "Year 1" / "Year 2" pill tag */ .year-tag { background: var(--blue); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; } /* Year 2 uses dark-blue instead of primary blue */ .year-tag-2 { background: var(--dark-blue); } .year-header h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dark-blue); flex: 1; } /* Credit count pill on the right */ .year-credits { font-size: 0.82rem; font-weight: 600; color: var(--grey); background: var(--tint); padding: 4px 12px; border-radius: 12px; white-space: nowrap; } .year-intro { font-size: 0.92rem; color: var(--grey); margin-bottom: 18px; line-height: 1.6; } /* ============================================================================= 28. UNIT TAGLINE Short italicised descriptor line at the top of a unit's accordion body. ============================================================================= */ .unit-tagline { font-size: 0.9rem !important; color: var(--blue) !important; font-style: italic; font-weight: 600 !important; margin-bottom: 12px !important; padding: 8px 12px; background: var(--tint); border-radius: 6px; } /* ============================================================================= 29. OPTIONAL UNITS (COLLAPSIBLE) A collapsible section that reveals optional unit choices. JS toggles the .is-open class on .optional-collapsible. The opt-body uses the same max-height animation as the main accordion. The icon rotates 45° when open (+ → × effect). ============================================================================= */ .optional-units-box { background: #f8fafd; border: 1px solid #dde6f5; border-radius: 10px; padding: 0; margin-top: 20px; overflow: hidden; } .optional-units-box h4 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: #0A2E5C; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .optional-units-box h4 i { color: #E8820C; } .optional-units-box p { font-size: 0.9rem; color: #3a4a5c; margin-bottom: 14px; line-height: 1.65; } /* Toggle button (full-width) */ .optional-collapsible .opt-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #fff; border: none; cursor: pointer; text-align: left; font-family: 'Poppins', sans-serif; transition: background 0.2s; border-radius: 10px; } .optional-collapsible.is-open .opt-toggle { background: var(--tint); border-radius: 10px 10px 0 0; /* bottom corners become square when body opens */ } .optional-collapsible .opt-toggle:hover { background: var(--tint); } /* Left side of toggle: icon + title + badge */ .opt-toggle-left { display: flex; align-items: center; gap: 12px; flex: 1; } /* Circular icon that rotates to × when open */ .opt-toggle-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; transition: background 0.2s, transform 0.3s; } .optional-collapsible.is-open .opt-toggle-icon { background: var(--blue); transform: rotate(45deg); /* + → × */ } .opt-toggle-title { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--dark-blue); } /* Unit count badge */ .opt-toggle-badge { background: var(--tint); color: var(--blue); font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; white-space: nowrap; } .optional-collapsible.is-open .opt-toggle-badge { background: var(--blue); color: #fff; } /* "Click to expand" hint — fades out when open */ .opt-toggle-hint { font-size: 0.75rem; color: #8a9bb0; font-style: italic; white-space: nowrap; transition: opacity 0.2s; } .optional-collapsible.is-open .opt-toggle-hint { opacity: 0; } /* Collapsible body — same max-height animation as main accordion */ .opt-body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .optional-collapsible.is-open .opt-body { max-height: 800px; /* safe upper bound; increase if more units are added */ } /* Inner padding revealed when body opens */ .opt-body-inner { padding: 18px 20px 20px; border-top: 1px solid #dde6f5; animation: fadeIn 0.3s ease; } /* Fade-in animation for body content */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Intro paragraph inside the optional body */ .opt-intro { font-size: 0.88rem !important; color: #3a4a5c !important; margin-bottom: 12px !important; line-height: 1.6 !important; } /* 2-column grid of optional unit items */ .optional-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } /* Individual optional unit card */ .optional-item { background: #fff; border: 1px solid #d0deee; border-radius: 6px; padding: 9px 13px; font-size: 0.86rem; color: var(--ink); transition: all 0.2s; } .optional-item:hover { border-color: var(--blue); background: var(--tint); color: var(--blue); } /* Document download link button */ .doc-link { display: inline-flex; align-items: center; gap: 7px; background: var(--blue); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 9px 16px; border-radius: 6px; transition: background 0.2s; } .doc-link:hover { background: var(--dark-blue); color: #fff; } /* ============================================================================= 30. GRADING CARDS 3-column cards for Pass / Merit / Distinction. Each has a coloured background, icon, title, and description. Collapses to 1-col on ≤768px via !important in the media query. ============================================================================= */ .grading-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 18px; } .grading-card { border-radius: 4px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; border: 1px solid transparent; transition: transform 0.22s, box-shadow 0.22s; } .grading-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,58,99,0.10); } /* Card background / border colours */ .grading-pass { background: #eef8f3; border-color:#a8d5b3; } .grading-merit { background: #fef8e6; border-color:#e8d47a; } .grading-distinction { background: #eef4fc; border-color:#9ecfee; } /* Circular icon */ .grading-card-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .grading-pass .grading-card-icon { background: var(--green); color: #fff; } .grading-merit .grading-card-icon { background: var(--gold); color: #fff; } .grading-distinction .grading-card-icon { background: var(--blue); color: #fff; } /* Grade name heading */ .grading-card-title { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 800; display: block; margin-bottom: 4px; } .grading-pass .grading-card-title { color: var(--green); } .grading-merit .grading-card-title { color: #8a6e00; } .grading-distinction .grading-card-title { color: var(--blue); } /* Body text — !important overrides .content-section p rules */ .grading-card-body p { font-size: 0.87rem !important; color: var(--ink) !important; line-height: 1.65 !important; margin: 0 !important; } /* ============================================================================= 31. PROGRESSION SECTION Full-width section below the main white content area. Uses the same #f4f8fc page background. Content is wrapped in .prog-wrapper-card (a white card with shadow) that visually separates it from the background. Inside the card: - .prog-section-header — title + intro text - .progression-grid — 2x2 cards (University / Professional / Career / HK) - .progression-cta — "Speak to an advisor" highlighted callout Progression card themes (4 colour accents by top border): .prog-university — blue .prog-professional — gold .prog-careers — green .prog-hk — teal The .prog-list inside each card contains bullet items with coloured icons that match the card's theme colour. ============================================================================= */ #progression-section { background: #f4f8fc; padding: 28px 0 50px; margin-top: -28px; } #progression-section .container { max-width: 1100px; } /* White wrapper card */ .prog-wrapper-card { background: #fff; border-radius: 6px; padding: 36px; box-shadow: 0 1px 4px rgba(0,58,99,0.05); border: 1px solid #dde6f5; } /* Header area inside the wrapper card */ .prog-section-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #eef2f8; } .prog-section-intro { font-size: 0.95rem; color: var(--grey); line-height: 1.75; margin-top: 8px; max-width: 800px; } /* 2-column grid of progression pathway cards */ .progression-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; } /* Individual progression card */ .prog-card { background: #f8fbff; border-radius: 4px; padding: 24px; border: 1px solid #dde6f5; box-shadow: none; transition: transform 0.25s, box-shadow 0.25s; } .prog-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(0,58,99,0.08); } /* Top border accent colours (matches the theme icon colour) */ .prog-university { border-top-color: var(--blue); } .prog-professional { border-top-color: var(--gold); } .prog-careers { border-top-color: var(--green); } .prog-hk { border-top-color: var(--teal); } /* Rounded icon box at the top of each card */ .prog-card-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px; } /* Icon background and colour per theme */ .prog-university .prog-card-icon { background: var(--tint); color: var(--blue); } .prog-professional .prog-card-icon { background: rgba(206,168,44,0.12); color: #8a6e00; } .prog-careers .prog-card-icon { background: rgba(1,163,85,0.10); color: var(--green); } .prog-hk .prog-card-icon { background: rgba(22,140,161,0.10); color: var(--teal); } .prog-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 10px; } .prog-card > p { font-size: 0.9rem; color: var(--ink); line-height: 1.7; margin-bottom: 14px; } /* Source attribution line (e.g. "Source: UCAS") */ .prog-source { font-size: 0.78rem !important; color: var(--grey) !important; margin-top: 12px !important; margin-bottom: 0 !important; display: flex; align-items: center; gap: 6px; } .prog-source i { color: var(--blue); font-size: 0.72rem; flex-shrink: 0; } .prog-source a { color: var(--blue); text-decoration: underline; font-size: 0.78rem; } /* ── Progression regions (UK / AU / HK sub-blocks) ── */ .prog-regions { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; } .prog-region { background: #f8fbff; border: 1px solid #d8e8f5; border-radius: 8px; padding: 14px 16px; } /* Region sub-heading */ .prog-region-header { display: flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--dark-blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #d0deee; } .prog-region-header i { color: var(--blue); font-size: 0.85rem; } .prog-region .prog-source { margin-top: 10px !important; } /* ── Career blocks inside the Employment / Careers card ── */ .career-blocks { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .career-block { background: #f8fbff; border: 1px solid #d8e8f5; border-radius: 8px; padding: 14px 16px; } /* Career sub-heading */ .career-block-title { display: flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--dark-blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #d0deee; } .career-block-title i { color: var(--blue); font-size: 0.85rem; } /* Tag cloud of job role / skills tags */ .career-tags { display: flex; flex-wrap: wrap; gap: 6px; } .career-tags span { background: var(--tint); border: 1px solid #c0d8ef; color: var(--dark-blue); font-size: 0.8rem; font-weight: 500; padding: 4px 11px; border-radius: 20px; line-height: 1.4; } /* ── Bullet list inside progression cards (.prog-list) ── Each card theme colours its own list icons via descendant selectors below. */ .prog-list { list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 0; } .prog-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--ink); line-height: 1.5; } /* Icon colour per card theme */ .prog-university .prog-list li i { color: var(--blue); flex-shrink: 0; margin-top: 3px; } .prog-professional .prog-list li i { color: #8a6e00; flex-shrink: 0; margin-top: 3px; } .prog-careers .prog-list li i { color: var(--green); flex-shrink: 0; margin-top: 3px; } .prog-hk .prog-list li i { color: var(--teal); flex-shrink: 0; margin-top: 3px; } /* ── "Speak to an advisor" highlighted callout ── */ .progression-cta { display: flex; align-items: center; gap: 16px; background: var(--tint); border: 1px solid #c0d8ee; border-left: 5px solid var(--blue); border-radius: 10px; padding: 18px 24px; flex-wrap: wrap; margin-top: 0; } .progression-cta i { color: var(--blue); font-size: 1.2rem; flex-shrink: 0; } .progression-cta span { flex: 1; font-size: 0.9rem; color: var(--ink); line-height: 1.6; } .progression-cta .btn { flex-shrink: 0; white-space: nowrap; } /* ============================================================================= 32. PLACEHOLDER BLOCKS Used as "coming soon" or empty-state indicators during development. Should be replaced with real content before going live. ============================================================================= */ .placeholder-block { display: flex; align-items: center; gap: 12px; background: #f8f9fa; border: 2px dashed #c8d6e8; border-radius: 8px; padding: 20px 24px; color: #7a8fa6; font-size: 0.9rem; font-style: italic; } .placeholder-block i { color: #b0c0d4; font-size: 1.2rem; flex-shrink: 0; } /* Inline variant for use inside text content */ .placeholder-inline { display: inline-flex; align-items: center; gap: 8px; color: #7a8fa6; font-size: 0.85rem; font-style: italic; } .placeholder-inline i { color: #b0c0d4; } /* Table row placeholder */ .placeholder-row td { padding: 18px 16px !important; text-align: center; background: #fafcff; } /* ============================================================================= 33. DOCUMENT NOTICE BOX & LO SOURCE NOTE .doc-notice — yellow warning box (e.g. "Document pending update"). .lo-source-note — dashed info box below learning outcomes tables. ============================================================================= */ .doc-notice { display: flex; align-items: flex-start; gap: 10px; background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid #f9a825; border-radius: 6px; padding: 12px 16px; margin-bottom: 24px; font-size: 0.85rem; color: #5d4037; line-height: 1.55; } .doc-notice i { color: #f9a825; margin-top: 2px; flex-shrink: 0; } /* Source attribution note below learning outcome tables */ .lo-source-note { display: flex; align-items: center; gap: 8px; background: #f3f4f6; border: 1px dashed #c0cfe4; border-radius: 6px; padding: 10px 14px; color: #6b7c93; font-size: 0.85rem; font-style: italic; margin-top: 8px !important; margin-bottom: 0 !important; } .lo-source-note i { color: #114B97; flex-shrink: 0; font-style: normal; } /* ============================================================================= 34. UTILITY ───────────────────────────────────────────────────────────────────────────── scroll-margin-top The #enquire-now anchor target is inside the fixed CTA bar area. scroll-margin-top: 80px pushes the scroll position down so the target is not hidden behind the fixed header + page-nav when jumped to. Consolidated transition rule Shared transition for interactive cards. Grouped here to avoid repetition in individual component rules. Scroll reveal animation (.reveal / .reveal.visible) Elements with class="reveal" start invisible and slide up. JavaScript (main.js or IntersectionObserver) adds .visible when the element enters the viewport. ============================================================================= */ /* Scroll anchor offset for the enquiry section */ #enquire-now { scroll-margin-top: 80px; } /* Shared hover transitions for interactive card components */ .accordion-item, .assessment-card, .pathway-card, .sidebar-card { transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } /* Scroll-reveal: initial hidden state */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } /* Scroll-reveal: JS adds .visible when element enters viewport */ .reveal.visible { opacity: 1; transform: translateY(0); }