/* ========================================================================== APlus IT Institute — 2026 Design System Frontend only. No business logic, no markup semantics changed. Load order: bootstrap.min.css -> bootstrap-icons -> aos.css -> THIS FILE -------------------------------------------------------------------------- 1. Design tokens 2. Base / typography 3. Accessibility helpers 4. Layout primitives (section, container rhythm) 5. Buttons 6. Cards 7. Badges & pills 8. Forms 9. Navbar / topbar / mega menu / offcanvas 10. Hero & page hero 11. Course cards & sliders 12. Stats / counters 13. Stories, testimonials, seminar 14. Payments, subscribe 15. Footer 16. Floating actions (WhatsApp, back-to-top, seminar tab) 17. Tables, accordions, breadcrumbs 18. Slick slider theming 19. Utilities 20. Motion & print preferences ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ /* -------------------------------------------------------------------------- THEME SWITCH The primary ramp is driven by site_settings.theme_color, which the layout writes onto . Two options ship: "red" (default) and "black". Everything below consumes --ap-primary-*, so changing the ramp restyles buttons, links, nav, badges, footer accents and shadows at once. Defaults here are the RED theme, so the site renders red even if the attribute is missing or the setting holds an unknown value. -------------------------------------------------------------------------- */ :root { /* -- Brand palette (RED — default) -- */ --ap-primary: #FF0000; --ap-primary-700: #C40000; --ap-primary-500: #FF3B3B; --ap-primary-300: #FF9A9A; --ap-primary-100: #FFE3E3; --ap-primary-050: #FFF4F4; --ap-primary-rgb: 255, 0, 0; /* Deepest shade — used for large dark surfaces (footer, hero) where white text sits on top. #FF0000 and #C40000 are too light to carry body copy. */ --ap-primary-800: #A00000; --ap-primary-900: #7A0000; /* Text-on-white variant of the primary. #FF0000 measures 4.0:1 against white — fine for fills, icons and large text (3:1 threshold) but under the 4.5:1 WCAG AA bar for body-size text. Small text that sits directly on a white surface (inline links, .ap-text-primary) uses this deeper red at 6.5:1 instead. Buttons, badges and every filled surface keep pure #FF0000, so the brand colour is unchanged visually. */ --ap-primary-text: #C40000; --ap-secondary: #00C2A8; --ap-secondary-600: #009e8a; --ap-secondary-100: #e0f8f4; --ap-accent: #F97316; --ap-accent-600: #dd5f08; --ap-accent-100: #fff0e4; /* -- Neutrals -- */ --ap-bg: #F8FAFC; --ap-surface: #FFFFFF; --ap-ink: #1E293B; --ap-ink-soft: #475569; --ap-ink-muted: #64748B; --ap-line: #E2E8F0; --ap-line-soft: #EEF2F7; /* -- Status (kept accessible on white) -- */ --ap-success: #0f9d58; --ap-danger: #d92d20; --ap-warning: #b45309; /* -- Gradients — all derived from the primary ramp so the theme switch carries through automatically -- */ --ap-grad-primary: linear-gradient(135deg, var(--ap-primary) 0%, var(--ap-primary-500) 100%); --ap-grad-accent: linear-gradient(135deg, #F97316 0%, #fb9a4b 100%); --ap-grad-teal: linear-gradient(135deg, #00C2A8 0%, #4ad9c5 100%); --ap-grad-border: linear-gradient(135deg, var(--ap-primary) 0%, #00C2A8 55%, #F97316 100%); --ap-grad-hero: linear-gradient(140deg, var(--ap-primary-900) 0%, var(--ap-primary-800) 55%, var(--ap-primary-700) 100%); --ap-grad-surface: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); /* Footer surface — a deepened version of the active primary */ --ap-footer-bg: var(--ap-primary-900); /* -- Radii -- */ --ap-radius-sm: 10px; --ap-radius: 16px; --ap-radius-card: 20px; --ap-radius-lg: 28px; --ap-radius-pill: 999px; /* -- Soft shadows (layered, low-alpha brand tint) -- */ --ap-shadow-xs: 0 1px 2px rgba(var(--ap-primary-rgb), .06); --ap-shadow-sm: 0 2px 8px rgba(var(--ap-primary-rgb), .06), 0 1px 2px rgba(var(--ap-primary-rgb), .04); --ap-shadow: 0 6px 20px rgba(var(--ap-primary-rgb), .08), 0 2px 6px rgba(var(--ap-primary-rgb), .04); --ap-shadow-md: 0 14px 34px rgba(var(--ap-primary-rgb), .10), 0 4px 10px rgba(var(--ap-primary-rgb), .05); --ap-shadow-lg: 0 24px 60px rgba(var(--ap-primary-rgb), .14), 0 8px 18px rgba(var(--ap-primary-rgb), .06); --ap-shadow-accent: 0 10px 26px rgba(249, 115, 22, .32); --ap-shadow-primary: 0 10px 26px rgba(var(--ap-primary-rgb), .28); /* -- Typography -- */ --ap-font: 'Poppins', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif; --ap-fw-normal: 400; --ap-fw-medium: 500; --ap-fw-semi: 600; --ap-fw-bold: 700; /* -- Spacing scale -- */ --ap-space-1: .25rem; --ap-space-2: .5rem; --ap-space-3: .75rem; --ap-space-4: 1rem; --ap-space-5: 1.5rem; --ap-space-6: 2rem; --ap-space-7: 3rem; --ap-space-8: 4rem; --ap-section-y: clamp(3rem, 7vw, 6rem); /* -- Motion -- */ --ap-ease: cubic-bezier(.4, 0, .2, 1); --ap-ease-out: cubic-bezier(.16, 1, .3, 1); --ap-t-fast: .18s; --ap-t: .28s; --ap-t-slow: .45s; /* -- Chrome heights (used by sticky offsets) -- */ --ap-topbar-h: 40px; --ap-nav-h: 76px; --ap-z-nav: 1030; --ap-z-float: 1035; /* -- Bootstrap variable overrides (theme Bootstrap itself) -- */ --bs-body-font-family: var(--ap-font); --bs-body-color: var(--ap-ink); --bs-body-bg: var(--ap-bg); --bs-primary: var(--ap-primary); --bs-primary-rgb: var(--ap-primary-rgb); --bs-secondary-rgb: 0, 194, 168; --bs-link-color: var(--ap-primary-text); --bs-link-color-rgb: var(--ap-primary-rgb); --bs-link-hover-color: var(--ap-primary-700); --bs-border-color: var(--ap-line); --bs-border-radius: var(--ap-radius-sm); --bs-border-radius-lg: var(--ap-radius); --bs-border-radius-xl: var(--ap-radius-card); --bs-focus-ring-color: rgba(var(--ap-primary-rgb), .28); } /* -------------------------------------------------------------------------- Theme: RED (explicit). Same values as :root — present so that data-theme="red" is a valid, self-documenting state rather than relying on the absence of an attribute. -------------------------------------------------------------------------- */ :root[data-theme="red"] { --ap-primary: #FF0000; --ap-primary-700: #C40000; --ap-primary-500: #FF3B3B; --ap-primary-300: #FF9A9A; --ap-primary-100: #FFE3E3; --ap-primary-050: #FFF4F4; --ap-primary-rgb: 255, 0, 0; --ap-primary-800: #A00000; --ap-primary-900: #7A0000; --ap-primary-text: #C40000; } /* -------------------------------------------------------------------------- Theme: BLACK A near-black ramp rather than pure #000, so elevation and hover states stay readable. --ap-primary sits at 15.9:1 on white, well past WCAG AA. -------------------------------------------------------------------------- */ :root[data-theme="black"] { --ap-primary: #16181D; --ap-primary-700: #0A0B0E; --ap-primary-500: #2B2F36; --ap-primary-300: #9AA0A9; --ap-primary-100: #E4E6E9; --ap-primary-050: #F4F5F6; --ap-primary-rgb: 22, 24, 29; --ap-primary-800: #0F1115; --ap-primary-900: #06070A; /* Already 15.9:1 on white, so text can use the primary directly. */ --ap-primary-text: #16181D; /* Pure-neutral primary needs a slightly stronger shadow tint to read */ --ap-shadow-primary: 0 10px 26px rgba(var(--ap-primary-rgb), .34); } /* ========================================================================== 2. BASE / TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* keep anchor targets clear of the sticky navbar */ scroll-padding-top: calc(var(--ap-nav-h) + 16px); -webkit-text-size-adjust: 100%; } body { font-family: var(--ap-font); font-weight: var(--ap-fw-normal); font-size: 1rem; line-height: 1.75; color: var(--ap-ink); background-color: var(--ap-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ap-font); font-weight: var(--ap-fw-bold); color: var(--ap-ink); line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--ap-space-3); /* Bangla glyphs sit lower; a touch more leading keeps descenders clear */ word-break: break-word; } /* Fluid type scale — mobile first, no media queries needed */ h1, .h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.22; } h2, .h2 { font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.26; } h3, .h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); } h4, .h4 { font-size: clamp(1.1rem, .98rem + .55vw, 1.375rem); } h5, .h5 { font-size: 1.0625rem; font-weight: var(--ap-fw-semi); } h6, .h6 { font-size: .95rem; font-weight: var(--ap-fw-semi); } p { margin-bottom: var(--ap-space-4); color: var(--ap-ink-soft); } p:last-child { margin-bottom: 0; } a { color: var(--ap-primary-text); text-decoration: none; transition: color var(--ap-t) var(--ap-ease); } a:hover { color: var(--ap-primary-700); } img { max-width: 100%; height: auto; } /* Lead / eyebrow / muted text roles */ .ap-lead { font-size: clamp(1rem, .96rem + .25vw, 1.125rem); color: var(--ap-ink-soft); line-height: 1.8; } .ap-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: var(--ap-fw-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--ap-secondary-600); margin-bottom: var(--ap-space-3); } .ap-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--ap-grad-teal); } .ap-eyebrow--center::before { display: none; } .ap-text-muted { color: var(--ap-ink-muted) !important; } .ap-text-gradient { background: var(--ap-grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Clamp helpers — keep card text from breaking grid rhythm */ .ap-clamp-1, .ap-clamp-2, .ap-clamp-3, .ap-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .ap-clamp-1 { -webkit-line-clamp: 1; } .ap-clamp-2 { -webkit-line-clamp: 2; } .ap-clamp-3 { -webkit-line-clamp: 3; } .ap-clamp-4 { -webkit-line-clamp: 4; } /* ========================================================================== 3. ACCESSIBILITY ========================================================================== */ .ap-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; padding: .75rem 1.25rem; border-radius: var(--ap-radius-sm); background: var(--ap-primary); color: #fff; font-weight: var(--ap-fw-semi); box-shadow: var(--ap-shadow-md); transition: top var(--ap-t) var(--ap-ease); } .ap-skip-link:focus { top: 1rem; color: #fff; } /* Visible, consistent focus ring on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .ap-card:focus-visible { outline: 3px solid var(--ap-secondary); outline-offset: 2px; border-radius: var(--ap-radius-sm); } /* Screen-reader only, but restorable on focus */ .ap-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 4. LAYOUT PRIMITIVES ========================================================================== */ .ap-section { padding-block: var(--ap-section-y); position: relative; } .ap-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); } .ap-section--flush-top { padding-top: 0; } .ap-section--flush-bottom { padding-bottom: 0; } .ap-section--soft { background: var(--ap-primary-050); } .ap-section--tint { background: linear-gradient(180deg, #ffffff 0%, var(--ap-primary-050) 100%); } .ap-section--dark { background: var(--ap-grad-hero); color: #fff; } .ap-section--dark h1, .ap-section--dark h2, .ap-section--dark h3, .ap-section--dark h4, .ap-section--dark h5 { color: #fff; } .ap-section--dark p { color: rgba(255, 255, 255, .82); } /* Decorative soft blobs — purely visual, aria-hidden in markup */ .ap-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; } .ap-blob--teal { background: rgba(0, 194, 168, .28); } .ap-blob--orange { background: rgba(249, 115, 22, .22); } .ap-blob--blue { background: rgba(var(--ap-primary-rgb), .20); } .ap-section > .container, .ap-section > .container-fluid { position: relative; z-index: 1; } /* Section heading block */ .ap-heading { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .ap-heading--center { margin-inline: auto; text-align: center; } .ap-heading h2 { margin-bottom: var(--ap-space-3); } .ap-heading p { margin-bottom: 0; } /* ========================================================================== 5. BUTTONS ========================================================================== */ .btn { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-weight: var(--ap-fw-semi); --bs-btn-border-radius: var(--ap-radius-pill); font-family: var(--ap-font); font-size: .95rem; letter-spacing: .01em; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease), background-color var(--ap-t) var(--ap-ease), color var(--ap-t) var(--ap-ease); } .btn:active { transform: translateY(1px); } /* Ripple layer — driven by --ap-ripple-x/y set in JS on pointer down */ .btn .ap-ripple { position: absolute; inset: auto; left: var(--ap-ripple-x, 50%); top: var(--ap-ripple-y, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); opacity: .8; pointer-events: none; z-index: -1; animation: ap-ripple .6s var(--ap-ease-out) forwards; } .btn-outline-primary .ap-ripple, .btn-light .ap-ripple, .ap-btn-ghost .ap-ripple { background: rgba(var(--ap-primary-rgb), .22); } @keyframes ap-ripple { to { transform: scale(26); opacity: 0; } } /* Primary — gradient */ .ap-btn-primary, .btn.ap-btn-primary { background: var(--ap-grad-primary); border: 0; color: #fff; box-shadow: var(--ap-shadow-primary); } .ap-btn-primary:hover, .ap-btn-primary:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--ap-primary-rgb), .38); } /* Accent — the money CTA */ .ap-btn-accent, .btn.ap-btn-accent { background: var(--ap-grad-accent); border: 0; color: #fff; box-shadow: var(--ap-shadow-accent); } .ap-btn-accent:hover, .ap-btn-accent:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(249, 115, 22, .42); } /* Teal */ .ap-btn-teal { background: var(--ap-grad-teal); border: 0; color: #06342e; box-shadow: 0 10px 26px rgba(0, 194, 168, .3); } .ap-btn-teal:hover { color: #06342e; transform: translateY(-2px); } /* Outline */ .ap-btn-outline { background: transparent; border: 2px solid var(--ap-primary); color: var(--ap-primary); } .ap-btn-outline:hover { background: var(--ap-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--ap-shadow-primary); } /* Ghost / glass on dark hero */ .ap-btn-glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ap-btn-glass:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-2px); } /* Sizes */ .ap-btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 2rem; font-size: 1.03rem; } .ap-btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: 1.1rem; font-size: .85rem; } /* Icon-led link button */ .ap-link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: var(--ap-fw-semi); color: var(--ap-primary); } .ap-link-arrow i { transition: transform var(--ap-t) var(--ap-ease-out); } .ap-link-arrow:hover i { transform: translateX(4px); } /* ========================================================================== 6. CARDS ========================================================================== */ .ap-card { position: relative; display: flex; flex-direction: column; /* No height:100% here on purpose. A Bootstrap .col is a flex item that stretches to the tallest column in its .row, so a blanket height:100% makes EVERY stacked card in that column as tall as the whole column — several cards then overflow past the section (and into the footer). Cards that need to match a sibling's height opt in with .h-100. */ background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-sm); overflow: hidden; transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease), border-color var(--ap-t) var(--ap-ease); } .ap-card:hover, .ap-card:focus-within { transform: translateY(-6px); box-shadow: var(--ap-shadow-lg); border-color: transparent; } .ap-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; gap: .65rem; } .ap-card__footer { padding: .9rem 1.25rem; border-top: 1px solid var(--ap-line-soft); margin-top: auto; background: var(--ap-primary-050); } /* Gradient border — drawn as a pseudo-element so radius stays crisp */ .ap-card--gradient::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--ap-grad-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--ap-t) var(--ap-ease); pointer-events: none; z-index: 2; } .ap-card--gradient:hover::before, .ap-card--gradient:focus-within::before { opacity: 1; } /* Glassmorphism variant — only over imagery/gradient backgrounds */ .ap-glass { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-radius: var(--ap-radius-card); box-shadow: 0 8px 32px rgba(8, 32, 55, .18); } .ap-glass--light { background: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .9); color: var(--ap-ink); } /* Media wrapper — fixed ratio kills layout shift (CLS) */ .ap-card__media { position: relative; overflow: hidden; background: var(--ap-primary-100); aspect-ratio: 16 / 10; } .ap-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ap-t-slow) var(--ap-ease-out); } .ap-card:hover .ap-card__media img { transform: scale(1.06); } .ap-card__media--tall { aspect-ratio: 4 / 3; } .ap-card__media--wide { aspect-ratio: 21 / 9; } /* Icon tile used by feature/service cards */ .ap-icon-tile { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--ap-radius); font-size: 1.5rem; color: #fff; background: var(--ap-grad-primary); box-shadow: var(--ap-shadow-sm); transition: transform var(--ap-t) var(--ap-ease-out); } .ap-card:hover .ap-icon-tile { transform: rotate(-6deg) scale(1.06); } .ap-icon-tile--teal { background: var(--ap-grad-teal); color: #06342e; } .ap-icon-tile--accent { background: var(--ap-grad-accent); } .ap-icon-tile--soft { background: var(--ap-primary-100); color: var(--ap-primary); } .ap-icon-tile--lg { width: 72px; height: 72px; font-size: 2rem; } /* ========================================================================== 7. BADGES & PILLS ========================================================================== */ .ap-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--ap-radius-pill); font-size: .75rem; font-weight: var(--ap-fw-semi); line-height: 1.5; white-space: nowrap; } .ap-badge--primary { background: var(--ap-primary-100); color: var(--ap-primary-700); } .ap-badge--teal { background: var(--ap-secondary-100); color: #046b5e; } .ap-badge--accent { background: var(--ap-accent-100); color: #a8480a; } .ap-badge--dark { background: rgba(15, 23, 42, .78); color: #fff; } /* Floating badge over card media */ .ap-badge--float { position: absolute; top: .85rem; left: .85rem; z-index: 2; box-shadow: var(--ap-shadow-sm); } .ap-badge--float-end { left: auto; right: .85rem; } /* Discount ribbon — high-contrast accent */ .ap-badge--discount { background: var(--ap-grad-accent); color: #fff; box-shadow: var(--ap-shadow-accent); } /* Filter chips (course category tabs) */ .ap-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.15rem; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-pill); background: var(--ap-surface); color: var(--ap-ink-soft); font-size: .9rem; font-weight: var(--ap-fw-medium); cursor: pointer; transition: all var(--ap-t) var(--ap-ease); } .ap-chip:hover { border-color: var(--ap-primary-300); color: var(--ap-primary); transform: translateY(-2px); box-shadow: var(--ap-shadow-sm); } .ap-chip.is-active, .ap-chip[aria-selected="true"] { background: var(--ap-grad-primary); border-color: transparent; color: #fff; box-shadow: var(--ap-shadow-primary); } /* ========================================================================== 8. FORMS ========================================================================== */ .form-label { font-weight: var(--ap-fw-medium); font-size: .9rem; color: var(--ap-ink); margin-bottom: .4rem; } .form-control, .form-select { font-family: var(--ap-font); padding: .75rem 1rem; border: 1.5px solid var(--ap-line); border-radius: var(--ap-radius-sm); background-color: var(--ap-surface); color: var(--ap-ink); font-size: .95rem; transition: border-color var(--ap-t) var(--ap-ease), box-shadow var(--ap-t) var(--ap-ease); } .form-control::placeholder { color: var(--ap-ink-muted); opacity: 1; } .form-control:focus, .form-select:focus { border-color: var(--ap-primary-300); box-shadow: 0 0 0 4px rgba(var(--ap-primary-rgb), .12); background-color: var(--ap-surface); } textarea.form-control { min-height: 120px; resize: vertical; } /* Input with a leading icon */ .ap-field { position: relative; } .ap-field > i, .ap-field > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ap-ink-muted); pointer-events: none; font-size: 1.05rem; z-index: 3; } .ap-field .form-control, .ap-field .form-select { padding-left: 2.85rem; } /* Form card shell */ .ap-form-card { background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-md); padding: clamp(1.25rem, 3vw, 2.25rem); } /* Required marker */ .ap-req { color: var(--ap-danger); font-weight: var(--ap-fw-bold); } /* Modal polish */ .modal-content { border: 0; border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-lg); overflow: hidden; } .modal-header { background: var(--ap-grad-primary); color: #fff; border-bottom: 0; padding: 1.1rem 1.5rem; } .modal-header .modal-title { color: #fff; margin-bottom: 0; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; } .modal-body { padding: 1.5rem; } .modal-footer { border-top: 1px solid var(--ap-line-soft); padding: 1rem 1.5rem; } /* ========================================================================== 9. NAVBAR / TOPBAR / MEGA MENU ========================================================================== */ .ap-topbar { background: var(--ap-primary-700); color: rgba(255, 255, 255, .88); font-size: .82rem; padding: .4rem 0; position: relative; z-index: calc(var(--ap-z-nav) + 1); } .ap-topbar a { color: rgba(255, 255, 255, .88); display: inline-flex; align-items: center; gap: .4rem; } .ap-topbar a:hover { color: #fff; } .ap-topbar .ap-topbar__divider { width: 1px; height: 14px; background: rgba(255, 255, 255, .28); display: inline-block; } .ap-topbar__social a { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .12); transition: background var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .ap-topbar__social a:hover { background: var(--ap-secondary); color: #06342e; transform: translateY(-2px); } /* --- Sticky, transparent-to-solid navbar --- */ .ap-nav { position: sticky; top: 0; z-index: var(--ap-z-nav); background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(226, 232, 240, .8); transition: background var(--ap-t) var(--ap-ease), box-shadow var(--ap-t) var(--ap-ease), padding var(--ap-t) var(--ap-ease); padding-block: .5rem; } .ap-nav.is-stuck { background: rgba(255, 255, 255, .96); box-shadow: var(--ap-shadow); padding-block: .25rem; } .ap-nav__brand img { max-height: 52px; width: auto; transition: max-height var(--ap-t) var(--ap-ease); } .ap-nav.is-stuck .ap-nav__brand img { max-height: 44px; } .ap-nav .nav-link, .ap-nav .ap-nav__toggle { font-weight: var(--ap-fw-medium); font-size: .95rem; color: var(--ap-ink); padding: .6rem .85rem; border-radius: var(--ap-radius-sm); position: relative; background: transparent; border: 0; display: inline-flex; align-items: center; gap: .3rem; transition: color var(--ap-t) var(--ap-ease), background var(--ap-t) var(--ap-ease); } .ap-nav .nav-link::after, .ap-nav .ap-nav__toggle::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--ap-grad-teal); transform: scaleX(0); transform-origin: left; transition: transform var(--ap-t) var(--ap-ease-out); } .ap-nav .nav-link:hover, .ap-nav .ap-nav__toggle:hover, .ap-nav .nav-link.active { color: var(--ap-primary); } .ap-nav .nav-link:hover::after, .ap-nav .ap-nav__toggle:hover::after, .ap-nav .nav-link.active::after { transform: scaleX(1); } /* Bootstrap dropdown-toggle caret is added by BS; keep our own chevron tidy */ .ap-nav .dropdown-toggle::after { display: none; } .ap-nav .ap-nav__caret { font-size: .75rem; transition: transform var(--ap-t) var(--ap-ease); } .ap-nav .show > .ap-nav__caret, .ap-nav [aria-expanded="true"] .ap-nav__caret { transform: rotate(180deg); } .dropdown-menu { border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-md); padding: .5rem; margin-top: .5rem; min-width: 13rem; } .dropdown-item { border-radius: var(--ap-radius-sm); padding: .55rem .8rem; font-size: .92rem; font-weight: var(--ap-fw-medium); color: var(--ap-ink-soft); display: flex; align-items: center; gap: .55rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ap-primary-050); color: var(--ap-primary); } .dropdown-item i { color: var(--ap-secondary-600); } /* --- Mega menu (courses) --- */ .ap-mega { width: min(1080px, calc(100vw - 2rem)); padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--ap-radius-lg); /* Never taller than the viewport — long catalogues scroll inside the panel instead of running off the bottom of the screen. */ max-height: calc(100vh - var(--ap-nav-h) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; } .ap-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .5rem 1.5rem; align-items: start; } /* Each category is its own column, so the "all courses" link can be pinned to the bottom regardless of how many courses the column holds. */ .ap-mega__col { display: flex; flex-direction: column; min-height: 100%; } /* --- Column header --- */ .ap-mega__col-title { display: flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: var(--ap-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ap-ink); padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--ap-line-soft); /* Long category names stay on one line rather than pushing the column tall */ line-height: 1.4; } .ap-mega__col-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; background: var(--ap-primary-050); color: var(--ap-primary); font-size: .8rem; } .ap-mega__col-name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-mega__col-count { flex: 0 0 auto; font-size: .68rem; font-weight: var(--ap-fw-semi); letter-spacing: 0; color: var(--ap-ink-muted); background: var(--ap-line-soft); border-radius: var(--ap-radius-pill); padding: .1rem .45rem; } /* --- Course row: thumbnail + title + meta --- */ .ap-mega__course { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; border-radius: var(--ap-radius-sm); color: var(--ap-ink-soft); transition: background var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .ap-mega__course:hover, .ap-mega__course:focus-visible { background: var(--ap-primary-050); transform: translateX(2px); } .ap-mega__thumb { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: var(--ap-primary-100); transition: transform var(--ap-t) var(--ap-ease-out); } .ap-mega__course:hover .ap-mega__thumb { transform: scale(1.06); } .ap-mega__course-body { min-width: 0; } .ap-mega__course-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .855rem; font-weight: var(--ap-fw-medium); line-height: 1.4; color: var(--ap-ink); transition: color var(--ap-t) var(--ap-ease); } .ap-mega__course:hover .ap-mega__course-title { color: var(--ap-primary); } .ap-mega__course-meta { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: .715rem; color: var(--ap-ink-muted); line-height: 1.5; } .ap-mega__course-meta .ap-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; flex: 0 0 auto; } .ap-mega__price { font-weight: var(--ap-fw-semi); color: var(--ap-primary); } /* --- Column footer link, pinned to the bottom of the column --- */ .ap-mega__all { margin-top: auto; padding: .5rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: var(--ap-fw-semi); color: var(--ap-secondary-600); border-radius: var(--ap-radius-sm); transition: gap var(--ap-t) var(--ap-ease), background var(--ap-t) var(--ap-ease); } .ap-mega__all:hover { gap: .6rem; background: var(--ap-secondary-100); color: var(--ap-secondary-600); } /* --- Generic link (also used by the offcanvas + sidebars) --- */ .ap-mega__link { display: block; padding: .45rem .6rem; border-radius: var(--ap-radius-sm); font-size: .9rem; color: var(--ap-ink-soft); transition: background var(--ap-t) var(--ap-ease), color var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .ap-mega__link:hover { background: var(--ap-primary-050); color: var(--ap-primary); transform: translateX(3px); } .ap-mega__footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ap-line-soft); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; } /* Between lg and xl the panel would otherwise crowd; drop to 2 columns. */ @media (max-width: 1199.98px) { .ap-mega { width: min(760px, calc(100vw - 2rem)); } .ap-mega__grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } } /* --- Mobile bar + offcanvas --- */ .ap-mobilebar { position: sticky; top: 0; z-index: var(--ap-z-nav); background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ap-line); padding: .6rem 0; box-shadow: var(--ap-shadow-xs); } .ap-burger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-line); background: var(--ap-surface); color: var(--ap-primary); font-size: 1.3rem; } .ap-offcanvas { width: min(340px, 88vw); background: var(--ap-surface); border-right: 0; } .ap-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ap-line-soft); background: var(--ap-primary-050); } .ap-offcanvas .nav-link, .ap-offcanvas .accordion-button { font-weight: var(--ap-fw-medium); color: var(--ap-ink); padding: .8rem .25rem; font-size: 1rem; } .ap-offcanvas .accordion-item { border: 0; border-bottom: 1px solid var(--ap-line-soft); background: transparent; } .ap-offcanvas .accordion-button { background: transparent; box-shadow: none; border-radius: 0 !important; } .ap-offcanvas .accordion-button:not(.collapsed) { color: var(--ap-primary); background: transparent; } .ap-offcanvas .accordion-body { padding: 0 0 .5rem .75rem; } .ap-offcanvas .nav-item { border-bottom: 1px solid var(--ap-line-soft); } /* ========================================================================== 10. HERO & PAGE HERO ========================================================================== */ .ap-hero { position: relative; overflow: hidden; background: var(--ap-grad-hero); color: #fff; isolation: isolate; } .ap-hero::after { /* subtle dot grid texture */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 26px 26px; opacity: .6; z-index: 0; pointer-events: none; } .ap-hero > * { position: relative; z-index: 1; } /* Slider hero: full-bleed banner images, no forced crop on mobile */ .ap-hero-slider { background: var(--ap-primary-050); } .ap-hero-slider .slider-item img { width: 100%; height: auto; display: block; border-radius: 0; } /* Inner page hero */ .ap-page-hero { position: relative; overflow: hidden; background: var(--ap-grad-hero); color: #fff; padding-block: clamp(2.75rem, 6vw, 5rem); text-align: center; } .ap-page-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 26px 26px; opacity: .55; pointer-events: none; } .ap-page-hero > .container { position: relative; z-index: 1; } .ap-page-hero h1 { color: #fff; margin-bottom: .75rem; } .ap-page-hero p { color: rgba(255, 255, 255, .85); } /* Breadcrumb on dark */ .ap-breadcrumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: var(--ap-radius-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; list-style: none; margin: 0; } .ap-breadcrumb a { color: rgba(255, 255, 255, .85); } .ap-breadcrumb a:hover { color: #fff; } .ap-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: #fff; } .ap-breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, .5); } /* Hero trust strip */ .ap-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; } .ap-trust__item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255, 255, 255, .9); } .ap-trust__item i { color: var(--ap-secondary); font-size: 1.15rem; } /* ========================================================================== 11. COURSE CARDS & CATEGORY TILES ========================================================================== */ /* Category tile (Digital Marketing / Graphics / Spoken English / Web) */ .ap-cat-tile { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; padding: 1.5rem 1rem; height: 100%; background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-sm); color: var(--ap-ink); transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease), border-color var(--ap-t) var(--ap-ease); } .ap-cat-tile:hover { transform: translateY(-6px); box-shadow: var(--ap-shadow-md); border-color: var(--ap-primary-300); color: var(--ap-primary); } .ap-cat-tile__icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: var(--ap-radius); background: var(--ap-primary-050); overflow: hidden; flex: 0 0 auto; transition: transform var(--ap-t) var(--ap-ease-out); } .ap-cat-tile:hover .ap-cat-tile__icon { transform: scale(1.08) rotate(-4deg); } .ap-cat-tile__icon img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; } .ap-cat-tile h3 { font-size: .98rem; font-weight: var(--ap-fw-semi); margin: 0; line-height: 1.45; } /* Course card */ .ap-course-card { text-decoration: none; color: inherit; } .ap-course-card .ap-card__body { padding: 1.15rem 1.25rem 1rem; } .ap-course-card__title { font-size: 1.02rem; font-weight: var(--ap-fw-semi); line-height: 1.5; color: var(--ap-ink); margin: 0; min-height: 3.06em; /* 2 lines — keeps card tops aligned in a slider */ transition: color var(--ap-t) var(--ap-ease); } .ap-card:hover .ap-course-card__title { color: var(--ap-primary); } .ap-course-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; font-size: .8rem; color: var(--ap-ink-muted); list-style: none; padding: 0; margin: 0; } .ap-course-card__meta li { display: inline-flex; align-items: center; gap: .3rem; } .ap-course-card__stars { color: #f5b301; letter-spacing: -1px; } .ap-course-card__price { display: flex; align-items: baseline; gap: .4rem; font-weight: var(--ap-fw-bold); font-size: 1.15rem; color: var(--ap-primary); margin: 0; } .ap-course-card__price small { font-size: .78rem; font-weight: var(--ap-fw-medium); color: var(--ap-ink-muted); } /* Discount CTA inside a card — must stay a real button target */ .ap-discount-btn { width: 100%; border: 0; border-radius: var(--ap-radius-pill); background: var(--ap-grad-accent); color: #fff; font-size: .84rem; font-weight: var(--ap-fw-semi); padding: .6rem 1rem; line-height: 1.4; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 6px 16px rgba(249, 115, 22, .28); transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease); } .ap-discount-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--ap-shadow-accent); } /* Slider track spacing so shadows are not clipped */ .ap-slider { margin-inline: -.75rem; } .ap-slider .slick-slide { height: auto; } .ap-slider .slick-track { display: flex; align-items: stretch; padding-block: .5rem 1.75rem; } .ap-slider .slick-slide > div { height: 100%; } .ap-slide-pad { padding-inline: .75rem; height: 100%; } /* ========================================================================== 12. STATS / COUNTERS ========================================================================== */ .ap-stat { position: relative; text-align: center; padding: 1.75rem 1rem; border-radius: var(--ap-radius-card); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); height: 100%; transition: transform var(--ap-t) var(--ap-ease-out), background var(--ap-t) var(--ap-ease); } .ap-stat:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .16); } .ap-stat__icon { width: 60px; height: 60px; margin: 0 auto .9rem; display: grid; place-items: center; border-radius: var(--ap-radius); font-size: 1.7rem; background: rgba(255, 255, 255, .15); color: #fff; } .ap-stat__value { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); font-weight: var(--ap-fw-bold); line-height: 1.1; color: #fff; margin-bottom: .35rem; font-variant-numeric: tabular-nums; } .ap-stat__label { font-size: .92rem; font-weight: var(--ap-fw-medium); color: rgba(255, 255, 255, .82); margin: 0; } /* Light-surface variant */ .ap-stat--light { background: var(--ap-surface); border-color: var(--ap-line-soft); box-shadow: var(--ap-shadow-sm); backdrop-filter: none; } .ap-stat--light .ap-stat__value { color: var(--ap-primary); } .ap-stat--light .ap-stat__label { color: var(--ap-ink-soft); } .ap-stat--light .ap-stat__icon { background: var(--ap-primary-050); color: var(--ap-primary); } /* ========================================================================== 13. STORIES / TESTIMONIALS / SEMINAR ========================================================================== */ /* Success story card with responsive YouTube embed */ .ap-story-card .ap-story__video { position: relative; aspect-ratio: 16 / 9; background: #0b1e30; } .ap-story-card .ap-story__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ap-story__person { display: flex; align-items: center; gap: .75rem; } .ap-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--ap-surface); box-shadow: 0 0 0 2px var(--ap-primary-100); background: var(--ap-primary-100); } .ap-avatar--lg { width: 64px; height: 64px; } .ap-story__name { font-weight: var(--ap-fw-semi); font-size: .95rem; color: var(--ap-ink); line-height: 1.4; } .ap-story__role { font-size: .8rem; color: var(--ap-ink-muted); } /* Testimonial slide */ .ap-testimonial { display: grid; gap: 1.5rem; align-items: center; background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-lg); box-shadow: var(--ap-shadow-md); padding: clamp(1.25rem, 3vw, 2rem); height: 100%; } @media (min-width: 768px) { .ap-testimonial { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; } } .ap-testimonial__media { border-radius: var(--ap-radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ap-primary-100); } .ap-testimonial__media img { width: 100%; height: 100%; object-fit: cover; } .ap-testimonial__quote { position: relative; } .ap-testimonial__quote i.bi-quote { font-size: 2.5rem; line-height: 1; color: var(--ap-primary-100); display: block; margin-bottom: .25rem; } .ap-testimonial__text { color: var(--ap-ink-soft); font-size: 1rem; line-height: 1.85; } .ap-testimonial__text p { margin-bottom: .5rem; } /* Seminar schedule row */ .ap-seminar-row { background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-sm); padding: 1rem 1.15rem; transition: box-shadow var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .ap-seminar-row:hover { box-shadow: var(--ap-shadow-md); transform: translateY(-3px); } .ap-seminar-row__date { display: inline-flex; align-items: center; gap: .4rem; font-weight: var(--ap-fw-semi); font-size: .85rem; color: var(--ap-primary); background: var(--ap-primary-050); padding: .35rem .8rem; border-radius: var(--ap-radius-pill); } /* Countdown */ .ap-countdown { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; } .ap-countdown__unit { min-width: 74px; padding: .75rem .5rem; border-radius: var(--ap-radius); background: var(--ap-grad-primary); color: #fff; text-align: center; box-shadow: var(--ap-shadow-sm); } .ap-countdown__num { display: block; font-size: 1.4rem; font-weight: var(--ap-fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; margin: 0; color: #fff; } .ap-countdown__label { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin: 0; } /* ========================================================================== 14. PAYMENTS & SUBSCRIBE ========================================================================== */ .ap-payment { display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: 1.5rem 1rem; height: 100%; background: var(--ap-surface); border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-sm); text-align: center; transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease); } .ap-payment:hover { transform: translateY(-5px); box-shadow: var(--ap-shadow-md); } .ap-payment__logo { height: 54px; display: grid; place-items: center; } .ap-payment__logo img { max-height: 54px; width: auto; object-fit: contain; } .ap-payment__number { font-weight: var(--ap-fw-semi); font-size: 1.02rem; color: var(--ap-ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; background: var(--ap-primary-050); border-radius: var(--ap-radius-pill); padding: .4rem 1rem; } /* Subscribe / seminar registration band */ .ap-subscribe { position: relative; overflow: hidden; border-radius: var(--ap-radius-lg); background: var(--ap-grad-hero); color: #fff; padding: clamp(1.75rem, 5vw, 3.5rem); box-shadow: var(--ap-shadow-lg); } .ap-subscribe::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .ap-subscribe > * { position: relative; z-index: 1; } .ap-subscribe h2 { color: #fff; } .ap-subscribe .form-control { background: rgba(255, 255, 255, .95); border-color: transparent; } .ap-subscribe .form-control:focus { box-shadow: 0 0 0 4px rgba(0, 194, 168, .3); } /* ========================================================================== 15. FOOTER ========================================================================== */ .ap-footer { background: var(--ap-footer-bg); color: rgba(255, 255, 255, .88); padding-top: clamp(3rem, 6vw, 4.5rem); position: relative; overflow: hidden; } .ap-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ap-grad-border); } .ap-footer h5 { color: #fff; font-size: 1rem; font-weight: var(--ap-fw-semi); margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem; } .ap-footer h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px; background: var(--ap-grad-teal); } .ap-footer p { color: rgba(255, 255, 255, .82); } .ap-footer__brand img { max-height: 56px; width: auto; } .ap-footer__list { list-style: none; padding: 0; margin: 0; } .ap-footer__list li + li { margin-top: .55rem; } .ap-footer__list a { color: rgba(255, 255, 255, .86); font-size: .92rem; display: inline-flex; align-items: flex-start; gap: .5rem; transition: color var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .ap-footer__list a::before { content: "\F285"; /* bi-chevron-right */ font-family: "bootstrap-icons"; font-size: .7rem; line-height: 1.7; color: var(--ap-secondary); flex: 0 0 auto; } .ap-footer__list a:hover { color: #fff; transform: translateX(4px); } .ap-footer__contact { list-style: none; padding: 0; margin: 0; } .ap-footer__contact li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; font-size: .92rem; color: rgba(255, 255, 255, .86); line-height: 1.7; } .ap-footer__contact i { color: var(--ap-secondary); font-size: 1.05rem; margin-top: .2rem; flex: 0 0 auto; } .ap-footer__contact a { color: rgba(255, 255, 255, .86); word-break: break-word; } .ap-footer__contact a:hover { color: #fff; } .ap-social { display: flex; gap: .6rem; flex-wrap: wrap; } .ap-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.05rem; transition: transform var(--ap-t) var(--ap-ease-out), background var(--ap-t) var(--ap-ease); } .ap-social a:hover { transform: translateY(-3px); color: #fff; } .ap-social a.is-facebook:hover { background: #1877F2; } .ap-social a.is-linkedin:hover { background: #0A66C2; } .ap-social a.is-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .ap-social a.is-twitter:hover { background: #1d1f23; } .ap-social a.is-youtube:hover { background: #FF0000; } .ap-footer__bar { margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.15rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .88rem; color: rgba(255, 255, 255, .78); } /* ========================================================================== 16. FLOATING ACTIONS ========================================================================== */ .ap-fab-stack { position: fixed; right: clamp(.85rem, 2vw, 1.5rem); bottom: clamp(.85rem, 2vw, 1.5rem); z-index: var(--ap-z-float); display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; } .ap-fab { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; border: 0; box-shadow: var(--ap-shadow-md); transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease), opacity var(--ap-t) var(--ap-ease); } .ap-fab:hover { color: #fff; transform: translateY(-4px) scale(1.05); } .ap-fab--whatsapp { background: #25D366; } .ap-fab--whatsapp::after { /* soft attention pulse */ content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); animation: ap-pulse 2.4s var(--ap-ease-out) infinite; pointer-events: none; } .ap-fab--top { background: var(--ap-grad-primary); opacity: 0; visibility: hidden; transform: translateY(12px); } .ap-fab--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } @keyframes ap-pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* Vertical seminar tab (desktop only — too cramped on phones) */ .ap-side-tab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: var(--ap-z-float); writing-mode: vertical-rl; padding: 1.1rem .55rem; background: var(--ap-grad-accent); color: #fff; font-size: .82rem; font-weight: var(--ap-fw-semi); letter-spacing: .04em; border-radius: 0 var(--ap-radius) var(--ap-radius) 0; box-shadow: var(--ap-shadow-md); transition: padding var(--ap-t) var(--ap-ease); } .ap-side-tab:hover { color: #fff; padding-inline: .8rem; } @media (max-width: 991.98px) { .ap-side-tab { display: none; } } /* ========================================================================== 17. TABLES / ACCORDIONS / MISC BOOTSTRAP POLISH ========================================================================== */ .ap-table-wrap { overflow-x: auto; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); background: var(--ap-surface); box-shadow: var(--ap-shadow-sm); -webkit-overflow-scrolling: touch; } .ap-table-wrap > .table { margin-bottom: 0; } .table > :not(caption) > * > * { padding: .85rem 1rem; } .table thead th { background: var(--ap-primary-050); color: var(--ap-primary-700); font-weight: var(--ap-fw-semi); font-size: .88rem; letter-spacing: .02em; border-bottom-color: var(--ap-line); white-space: nowrap; } .table tbody td { color: var(--ap-ink-soft); font-size: .93rem; vertical-align: middle; } .accordion { --bs-accordion-border-color: var(--ap-line-soft); } .accordion-item { border-radius: var(--ap-radius) !important; overflow: hidden; margin-bottom: .75rem; border: 1px solid var(--ap-line-soft); box-shadow: var(--ap-shadow-xs); } .accordion-button { font-weight: var(--ap-fw-semi); font-size: .98rem; color: var(--ap-ink); background: var(--ap-surface); padding: 1rem 1.15rem; } .accordion-button:not(.collapsed) { background: var(--ap-primary-050); color: var(--ap-primary); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 4px rgba(var(--ap-primary-rgb), .12); } .accordion-body { color: var(--ap-ink-soft); font-size: .94rem; } .alert { border: 0; border-radius: var(--ap-radius); font-size: .93rem; } .alert-success { background: var(--ap-secondary-100); color: #046b5e; } .alert-danger { background: #fdecea; color: #9b1c13; } /* Prose block — rich-text from the CMS (course description etc.) */ .ap-prose { color: var(--ap-ink-soft); line-height: 1.9; } .ap-prose img { max-width: 100%; height: auto; border-radius: var(--ap-radius); margin-block: 1rem; } .ap-prose h1, .ap-prose h2, .ap-prose h3, .ap-prose h4 { margin-top: 1.75rem; } .ap-prose ul, .ap-prose ol { padding-left: 1.25rem; margin-bottom: 1rem; } .ap-prose li { margin-bottom: .4rem; } .ap-prose table { width: 100%; margin-bottom: 1rem; } .ap-prose iframe { max-width: 100%; border-radius: var(--ap-radius); } /* ========================================================================== 18. SLICK SLIDER THEMING ========================================================================== */ .slick-slider { position: relative; } /* --- Default arrows (course / story / testimonial carousels) --- */ .slick-prev, .slick-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; padding: 0; display: grid !important; place-items: center; border-radius: 50%; background: var(--ap-surface); color: var(--ap-primary); border: 1px solid var(--ap-line); box-shadow: var(--ap-shadow); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background var(--ap-t) var(--ap-ease), color var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } /* slick-theme.css draws its own "←/→" glyph via ::before — suppress it, the button already contains a Bootstrap Icon. */ .slick-prev::before, .slick-next::before { content: none; } .slick-prev { left: -4px; } .slick-next { right: -4px; } .slick-prev:hover, .slick-next:hover, .slick-prev:focus-visible, .slick-next:focus-visible { background: var(--ap-grad-primary); color: #fff; transform: translateY(-50%) scale(1.08); } /* --- Hero banner arrows --- The hero is full-bleed, so its arrows sit INSIDE the banner and are glass-on-image rather than white-on-page. */ .ap-hero-slider .slick-prev, .ap-hero-slider .slick-next { width: 52px; height: 52px; font-size: 1.35rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .ap-hero-slider .slick-prev { left: clamp(.75rem, 2vw, 2rem); } .ap-hero-slider .slick-next { right: clamp(.75rem, 2vw, 2rem); } .ap-hero-slider .slick-prev:hover, .ap-hero-slider .slick-next:hover, .ap-hero-slider .slick-prev:focus-visible, .ap-hero-slider .slick-next:focus-visible { background: rgba(255, 255, 255, .95); color: var(--ap-primary); border-color: transparent; } /* Before slick initialises, the buttons are plain block elements in the document flow. Keeping them hidden until .slick-initialized appears stops the brief flash of two stray boxes at the top-left of the page. */ .slider-section:not(.slick-initialized) .slick-prev, .slider-section:not(.slick-initialized) .slick-next { display: none !important; } @media (max-width: 575.98px) { .slick-prev, .slick-next { width: 38px; height: 38px; font-size: 1rem; } .slick-prev { left: -2px; } .slick-next { right: -2px; } .ap-hero-slider .slick-prev, .ap-hero-slider .slick-next { width: 40px; height: 40px; font-size: 1.05rem; } } .slick-dots { bottom: -6px; } .slick-dots li button::before { font-size: 10px; color: var(--ap-primary-300); opacity: 1; } .slick-dots li.slick-active button::before { color: var(--ap-primary); } /* ========================================================================== 19. UTILITIES ========================================================================== */ .ap-shadow-sm { box-shadow: var(--ap-shadow-sm) !important; } .ap-shadow { box-shadow: var(--ap-shadow) !important; } .ap-shadow-md { box-shadow: var(--ap-shadow-md) !important; } .ap-shadow-lg { box-shadow: var(--ap-shadow-lg) !important; } .ap-rounded { border-radius: var(--ap-radius-card) !important; } .ap-rounded-lg{ border-radius: var(--ap-radius-lg) !important; } .ap-bg-soft { background: var(--ap-primary-050) !important; } .ap-bg-grad { background: var(--ap-grad-primary) !important; } .ap-text-primary { color: var(--ap-primary-text) !important; } .ap-text-secondary { color: var(--ap-secondary-600) !important; } .ap-text-accent { color: var(--ap-accent-600) !important; } .ap-fw-semi { font-weight: var(--ap-fw-semi) !important; } .ap-hover-lift { transition: transform var(--ap-t) var(--ap-ease-out), box-shadow var(--ap-t) var(--ap-ease); } .ap-hover-lift:hover { transform: translateY(-5px); box-shadow: var(--ap-shadow-md); } .ap-divider { height: 1px; background: var(--ap-line); border: 0; opacity: 1; } /* Equal-height grid rows made of .ap-card */ .ap-grid { display: grid; gap: 1.5rem; } .ap-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .ap-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .ap-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } /* ========================================================================== 20. MOTION & PRINT PREFERENCES ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-aos] { opacity: 1 !important; transform: none !important; } .ap-fab--whatsapp::after { display: none; } } @media print { .ap-topbar, .ap-nav, .ap-mobilebar, .ap-fab-stack, .ap-side-tab, .ap-footer { display: none !important; } body { background: #fff; } .ap-card { box-shadow: none; border: 1px solid #ccc; } } /* Larger screens: widen the container so 4-up grids breathe */ @media (min-width: 1400px) { .container, .container-xxl { max-width: 1320px; } } /* ========================================================================== 21. LEGACY CLASS COMPATIBILITY -------------------------------------------------------------------------- The student dashboard pages (profile/*, exam/*) still use the original theme's class names. Rather than rewrite 18 templates and risk breaking their forms, those class names are mapped onto the design system here. Purely presentational — no markup or behaviour depends on this block. ========================================================================== */ /* Section rhythm */ .sptb { padding-block: var(--ap-section-y); } .sptb-2 { padding-block: clamp(2rem, 4vw, 3.5rem); } /* Legacy page banners ("Account details", "Orders", …) */ .bannerimg { position: relative; overflow: hidden; background: var(--ap-grad-hero); padding-block: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .bannerimg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .bannerimg .header-text { position: relative; z-index: 1; } .bannerimg h1, .bannerimg .header-text h1 { color: #fff !important; margin-bottom: .75rem; } .bannerimg .breadcrumb { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .45rem 1rem; margin: 0; border-radius: var(--ap-radius-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; } .bannerimg .breadcrumb-item, .bannerimg .breadcrumb-item a, .bannerimg .breadcrumb-item.active { color: rgba(255, 255, 255, .9) !important; } .bannerimg .breadcrumb-item a:hover { color: #fff !important; } .bannerimg .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); } /* Legacy simple page header ("blog-header") */ .blog-header { background: var(--ap-grad-hero); padding-block: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .blog-header h1 { color: #fff !important; margin-bottom: 0; } /* Bootstrap cards used by the legacy templates */ .card { border: 1px solid var(--ap-line-soft); border-radius: var(--ap-radius-card); box-shadow: var(--ap-shadow-sm); background: var(--ap-surface); transition: box-shadow var(--ap-t) var(--ap-ease); } .card:hover { box-shadow: var(--ap-shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--ap-line-soft); padding: 1rem 1.25rem; border-radius: var(--ap-radius-card) var(--ap-radius-card) 0 0; } .card-header .card-title { margin-bottom: 0; font-size: 1.05rem; } .card-footer { background: var(--ap-primary-050); border-top: 1px solid var(--ap-line-soft); border-radius: 0 0 var(--ap-radius-card) var(--ap-radius-card); } /* Legacy dashboard side menu */ .side-menu { list-style: none; padding: 0; margin: 0; } .side-menu__item { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.25rem; color: var(--ap-ink-soft); font-weight: var(--ap-fw-medium); font-size: .93rem; transition: background var(--ap-t) var(--ap-ease), color var(--ap-t) var(--ap-ease), transform var(--ap-t) var(--ap-ease-out); } .side-menu__item:hover { background: var(--ap-primary-050); color: var(--ap-primary); transform: translateX(3px); } .side-menu__item i { color: var(--ap-secondary-600); font-size: 1.15rem; } .doc-sidebar .side-menu > li + li { border-top: 1px solid var(--ap-line-soft); } /* Profile avatar block */ .item-user .profile-pic-img img, .profile-pic-img .brround { border-radius: 50%; object-fit: cover; border: 2px solid var(--ap-surface); box-shadow: 0 0 0 3px var(--ap-primary-100); } /* Legacy centred section title */ .section-title { margin-bottom: clamp(2rem, 4vw, 3rem); } .section-title h2 { margin-bottom: .5rem; } /* Legacy buttons in the student pages inherit the system shape */ .btn-primary:not(.ap-btn-primary) { background: var(--ap-grad-primary); border: 0; box-shadow: var(--ap-shadow-primary); } .btn-success:not(.ap-btn-teal) { background: var(--ap-grad-teal); border: 0; color: #06342e; } .btn-warning { background: var(--ap-grad-accent); border: 0; color: #fff; } .btn-danger { background: var(--ap-danger); border: 0; } /* Legacy form group spacing */ .form-group { margin-bottom: 1rem; } .form-label { display: block; } /* Tables inside legacy cards scroll rather than overflow the viewport */ .table-responsive { -webkit-overflow-scrolling: touch; } @media (max-width: 767.98px) { .table-responsive > .table { min-width: 620px; } }