/* ============================================================ SETS LMS - Theme (palette matched to the SETS atom+circuit logo: royal blue + vivid orange, with a gold accent for variety) Light/Dark via [data-theme] on . 100% offline fonts. ============================================================ */ :root { --primary: #2E4BD6; --primary-dark: #2438B0; --secondary: #F7941E; --secondary-dark: #D97B0A; --accent: #FBBF24; --accent-dark: #D69E0A; --bg: #F8FAFC; --dark: #0F172A; --card: #ffffff; --success: #22C55E; --danger: #EF4444; --warning: #F59E0B; --text: #1e293b; --muted: #64748b; --border: #e2e8f0; --glass: rgba(255, 255, 255, .72); --shadow: 0 10px 30px rgba(15, 23, 42, .08); --radius: 1rem; } [data-theme="dark"] { --bg: #0B1120; --card: #111a2e; --text: #e2e8f0; --muted: #94a3b8; --border: #1e293b; --glass: rgba(17, 26, 46, .72); --shadow: 0 10px 30px rgba(0, 0, 0, .45); /* Retint Bootstrap's own dark-mode palette (activated via data-bs-theme) to match our navy theme, so components we don't hand-style (accordion, dropdown, modal, pagination, popover, list-group, toast…) don't look like a different app. */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-secondary-bg: var(--card); --bs-tertiary-bg: var(--card); --bs-emphasis-color: var(--text); } html { scroll-behavior: smooth; } body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); transition: background .3s ease, color .3s ease; } h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -.02em; } a { text-decoration: none; } /* ---------- Buttons ---------- */ .btn-primary { background: var(--primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-dark); color: #fff; } .btn { border-radius: .65rem; transition: all .2s ease; font-weight: 600; } /* ---------- Cards / glass ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); } .glass { background: var(--glass); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); } .card-hover { transition: transform .25s ease, box-shadow .25s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(46,75,214, .15); } /* ---------- Public navbar ---------- */ .navbar-sets { position: sticky; top: 0; z-index: 1030; padding: .25rem 0; } .navbar-sets .nav-link { color: var(--text); font-weight: 600; } .navbar-sets .nav-link:hover { color: var(--primary); } .brand-mark { width: 38px; height: 38px; border-radius: .8rem; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 800; } /* Header logo. Uses the real logo (admin-uploaded, or dropped in at assets/img/logo.png) the moment one exists; sized by height so a wide wordmark logo (icon + name lockup) scales correctly without distortion. Sized generously because the actual SETS logo file has a lot of built-in padding around the visible graphic, so it needs a bigger box to read as "large". */ .brand-logo-nav { height: 210px; width: auto; max-width: 720px; object-fit: contain; display: block; flex-shrink: 0; } .brand-logo-nav-mark { width: 210px; height: 210px; border-radius: 1.5rem; font-size: 4.8rem; flex-shrink: 0; } .navbar-brand-lockup { display: inline-flex; flex-direction: row; align-items: center; gap: .7rem; padding: 0; text-decoration: none; } .navbar-brand-identity { display: inline-flex; align-items: center; gap: .75rem; } .navbar-brand-slogan { display: inline-flex; align-items: center; gap: .42rem; flex: 0 0 auto; padding: .52rem .72rem; color: #fff; background: linear-gradient(135deg,#f7941e,#ea6813); border: 1px solid rgba(255,255,255,.22); border-radius: .72rem; box-shadow: 0 7px 18px rgba(247,148,30,.28); font-size: .76rem; font-weight: 900; letter-spacing: .035em; line-height: 1; white-space: nowrap; } .navbar-brand-slogan i { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; color: #f7941e; background: #fff; border-radius: 50%; font-size: .65rem; } @media (max-width: 767.98px) { .brand-logo-nav { height: 108px; max-width: 420px; } .brand-logo-nav-mark { width: 108px; height: 108px; font-size: 2.5rem; border-radius: 1.2rem; } .navbar-brand-lockup { gap: .35rem; } .navbar-brand-slogan { padding: .4rem .5rem; font-size: .6rem; } .navbar-brand-slogan i { width: 1.05rem; height: 1.05rem; font-size: .5rem; } } /* compact logo for the sidebar and footer brand rows */ .brand-logo-compact { height: 62px; width: auto; max-width: 220px; object-fit: contain; display: block; flex-shrink: 0; } /* ---------- Hero (signature: learning orbit) ---------- */ .hero { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; } .hero-orbit { position: absolute; inset: -20% -10% auto auto; width: 560px; height: 560px; border-radius: 50%; background: conic-gradient(from 90deg, var(--primary), var(--secondary), var(--accent), var(--primary)); filter: blur(90px); opacity: .28; animation: orbit 18s linear infinite; z-index: 0; } .hero-orbit-2 { inset: auto auto -30% -12%; width: 420px; height: 420px; background: conic-gradient(from 200deg, var(--secondary), var(--primary), var(--secondary)); opacity: .18; animation-duration: 24s; animation-direction: reverse; } .hero-mesh { position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(rgba(46,75,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,75,214,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 65% 55% at 65% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 65% 55% at 65% 30%, #000 40%, transparent 100%); } @keyframes orbit { to { transform: rotate(360deg); } } .hero .container { position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 999px; background: rgba(46,75,214, .1); color: var(--primary); font-weight: 700; font-size: .85rem; } .hero-badge-animate { animation: heroPulseIn .8s cubic-bezier(.22,1,.36,1) both; } .hero-badge-animate i { animation: heroBadgeIconSpin 2.6s ease-in-out .8s infinite; display: inline-block; } @keyframes heroPulseIn { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 70% { opacity: 1; transform: translateY(-2px) scale(1.03); } 100% { opacity: 1; transform: none; } } @keyframes heroBadgeIconSpin { 0%, 85%, 100% { transform: rotate(0deg); } 92% { transform: rotate(-14deg); } } /* Hero heading: big, bold, entrance-animated the instant the page opens (not scroll-triggered) */ .hero-title { font-size: 3.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; margin: 0; } .hero-title-animate { opacity: 0; animation: heroTitleIn .9s .15s cubic-bezier(.22,1,.36,1) forwards; } @keyframes heroTitleIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } } .hero-fade-in-1 { opacity: 0; animation: heroFadeUp .8s .35s cubic-bezier(.22,1,.36,1) forwards; } .hero-fade-in-2 { opacity: 0; animation: heroFadeUp .8s .5s cubic-bezier(.22,1,.36,1) forwards; } .hero-fade-in-3 { opacity: 0; animation: heroFadeUp .8s .65s cubic-bezier(.22,1,.36,1) forwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (max-width: 991.98px) { .hero-title { font-size: 2.6rem; } } .hero-slogan-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.2rem 0.6rem .9rem; border-radius: 999px; background: linear-gradient(90deg, rgba(46,75,214,.1), rgba(247,148,30,.14)); border: 1px solid rgba(247,148,30,.35); color: var(--text); font-size: .92rem; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .hero-slogan-pill i { color: var(--secondary); } .hero-slogan-pill strong { color: var(--secondary); } .hero-slogan-pill:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(247,148,30,.25); color: var(--text); } @media (prefers-reduced-motion: reduce) { .hero-badge-animate, .hero-badge-animate i, .hero-title-animate, .hero-fade-in-1, .hero-fade-in-2, .hero-fade-in-3 { animation: none !important; opacity: 1 !important; } } .hero-stat-icon { width: 34px; height: 34px; margin: 0 auto .5rem; display: grid; place-items: center; border-radius: .6rem; background: rgba(46,75,214,.1); color: var(--primary); font-size: .95rem; } .hero-proof { display: flex; align-items: center; gap: .9rem; margin-top: 1.75rem; } .avatar-stack { display: flex; } .avatar-chip { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: 2px solid var(--bg); margin-left: -10px; } .avatar-chip:first-child { margin-left: 0; } .avatar-chip-lg { width: 44px; height: 44px; font-size: 1rem; border: none; margin-left: 0; flex-shrink: 0; } .text-gradient { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Homepage sections ---------- */ .section-tint { background: var(--bg); } .section-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 999px; background: rgba(46,75,214,.1); color: var(--primary); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; } .feature-card { height: 100%; padding: 1.75rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(46,75,214,.3); } .feature-icon { width: 52px; height: 52px; border-radius: 1rem; display: grid; place-items: center; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(46,75,214,.14), rgba(247,148,30,.14)); color: var(--primary); font-size: 1.3rem; } .cert-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 24px rgba(251,191,36,.35); } /* payment proof preview modal */ .proof-frame { border-radius: .75rem; overflow: hidden; background: var(--bg); border: 1px solid var(--border); min-height: 220px; display: flex; align-items: center; justify-content: center; } .proof-img { width: 100%; max-height: 60vh; object-fit: contain; display: block; } .proof-pdf { width: 100%; height: 60vh; border: 0; display: block; } .category-tile { display: block; text-align: center; padding: 1.75rem 1rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: all .25s ease; } .category-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(46,75,214,.3); color: var(--text); } .category-tile-icon { width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.4rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; } .course-thumb { aspect-ratio: 16 / 9; border-radius: 1rem 1rem 0 0; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; } .course-thumb i { font-size: 2.4rem; opacity: .55; position: relative; z-index: 1; } .course-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%); } .course-thumb-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .course-thumb-secondary { background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)); } .course-thumb-accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); } .course-thumb-success { background: linear-gradient(135deg, var(--success), #15803d); } .badge-soft-secondary { background: rgba(247,148,30,.12); color: var(--secondary); } .gallery-thumb-btn { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; border: 0; padding: 0; background: var(--bg); cursor: pointer; } .gallery-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .gallery-thumb-btn:hover img { transform: scale(1.08); } .gallery-thumb-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .75rem; font-size: .8rem; color: #fff; text-align: left; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); } .steps-row { position: relative; } .step-card { height: 100%; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); transition: transform .25s ease, box-shadow .25s ease; } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .step-number { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; } .testimonial-card { position: relative; height: 100%; padding: 2rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); } .testimonial-quote { position: absolute; top: 1.5rem; right: 1.75rem; font-size: 1.8rem; color: rgba(46,75,214,.14); } .cta-banner { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 3.5rem 2.5rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark) 55%, var(--secondary)); } .cta-banner-glow { position: absolute; inset: -40% -10% auto auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); filter: blur(10px); } /* ============================================================ Flagship programs: a book that actually opens on its spine — not a flashcard flip. Layers, bottom to top: 1. ambient ground shadow 2. the open pages (icon page + content page) 3. the cover, hinged at the left edge, swinging away on hover/tap. ============================================================ */ .book3d { position: relative; height: 380px; perspective: 2200px; cursor: pointer; outline: none; animation: book3dFloat 5s ease-in-out infinite; } .book3d:hover, .book3d.is-open, .book3d:focus-visible { animation-play-state: paused; } @keyframes book3dFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .book3d-shadow { position: absolute; left: 10%; right: 10%; bottom: -16px; height: 26px; border-radius: 50%; z-index: 0; background: radial-gradient(ellipse, rgba(15,23,42,.4), transparent 72%); filter: blur(7px); transition: all .7s cubic-bezier(.34,1.56,.64,1); } .book3d:hover .book3d-shadow, .book3d.is-open .book3d-shadow { bottom: -26px; transform: scaleX(1.1); opacity: .8; } /* the open book underneath the cover */ .book3d-block { position: absolute; inset: 0; z-index: 1; display: flex; border-radius: .5rem; background: var(--card); border: 1px solid var(--border); box-shadow: 0 20px 45px rgba(15,23,42,.16); overflow: hidden; } .book3d-page { position: relative; padding: 1.75rem; display: flex; flex-direction: column; } .book3d-page-left { width: 38%; align-items: center; justify-content: center; background: var(--bg); flex-shrink: 0; } .book3d-page-right { width: 62%; } .book3d-gutter { position: absolute; left: 38%; top: 0; bottom: 0; width: 22px; margin-left: -11px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent); } .book3d-pages-edge { position: absolute; top: 5px; bottom: 5px; right: 0; width: 8px; z-index: 2; background: repeating-linear-gradient(180deg, #fff 0 2px, #dfe3ea 2px 4px); box-shadow: inset 2px 0 5px rgba(0,0,0,.1); } /* cursor-follow glow, revealed once the cover has swung open */ .book3d-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%); } .book3d.is-open .book3d-glow, .book3d:hover .book3d-glow { opacity: 1; } .book3d-page-icon { width: 76px; height: 76px; border-radius: 1.1rem; display: grid; place-items: center; font-size: 2rem; color: #fff; } .book3d-tint-primary { background: linear-gradient(155deg, var(--primary), var(--primary-dark)); } .book3d-tint-secondary { background: linear-gradient(155deg, var(--secondary), var(--secondary-dark)); } .book3d-tint-accent { background: linear-gradient(155deg, var(--accent), var(--accent-dark)); } .book3d-eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; } .book3d-page-right .btn { align-self: flex-start; margin-top: auto; } /* the cover, hinged at the spine (left edge) */ .book3d-cover { position: absolute; inset: 0; z-index: 3; transform-origin: 0% 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.34,1.56,.64,1); } .book3d:hover .book3d-cover, .book3d.is-open .book3d-cover, .book3d:focus-visible .book3d-cover { transform: rotateY(-155deg); } .book3d-cover-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: .5rem; } .book3d-cover-front { color: #fff; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: -10px 0 30px rgba(0,0,0,.2), 0 22px 45px rgba(15,23,42,.28); } .book3d-front-primary { background: linear-gradient(155deg, var(--primary), var(--primary-dark)); } .book3d-front-secondary { background: linear-gradient(155deg, var(--secondary), var(--secondary-dark)); } .book3d-front-accent { background: linear-gradient(155deg, var(--accent), var(--accent-dark)); } .book3d-cover-front::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.25); border-radius: .35rem; pointer-events: none; } .book3d-cover-icon { width: 60px; height: 60px; border-radius: 1rem; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); } .book3d-hint { font-size: .8rem; opacity: .85; display: inline-flex; align-items: center; gap: .4rem; } .book3d-cover-inside { background: linear-gradient(155deg, var(--card), var(--bg)); transform: rotateY(180deg); border: 1px solid var(--border); } .book3d-ribbon { position: absolute; top: -6px; right: 30px; width: 20px; height: 60px; z-index: 1; background: rgba(255,255,255,.4); box-shadow: 0 6px 12px rgba(0,0,0,.18); clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); } @media (prefers-reduced-motion: reduce) { .book3d { animation: none; } .book3d-cover, .book3d-shadow { transition: none; } } @media (max-width: 575.98px) { .book3d { height: 420px; } .book3d-block { flex-direction: column; } .book3d-page-left, .book3d-page-right { width: 100%; } .book3d-page-left { padding: 1.25rem; } .book3d-gutter { left: 0; right: 0; top: 30%; bottom: auto; width: auto; height: 18px; margin: -9px 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.14), transparent); } } /* ============================================================ 2026 visual polish layer A restrained motion and depth system shared by the public site and LMS panels. Kept at the end so it safely improves legacy UI. ============================================================ */ :root { --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06); --shadow-lg: 0 24px 65px rgba(15, 23, 42, .12); --ease-out: cubic-bezier(.22, 1, .36, 1); } body { min-height: 100vh; background-image: radial-gradient(circle at 8% 4%, rgba(46,75,214,.055), transparent 24rem), radial-gradient(circle at 92% 28%, rgba(247,148,30,.045), transparent 22rem); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(46,75,214,.2); color: var(--text); } :focus-visible { outline: 3px solid rgba(46,75,214,.35); outline-offset: 3px; } /* Correct the oversized wordmark and make the header feel intentional. */ .brand-logo-nav { height: 68px; max-width: 245px; transition: transform .35s var(--ease-out); } .brand-logo-nav-mark { width: 48px; height: 48px; border-radius: .9rem; font-size: 1.25rem; } .navbar-brand:hover .brand-logo-nav { transform: scale(1.025); } .navbar-sets { min-height: 76px; padding: .35rem 0; border-radius: 0; border-width: 0 0 1px; transition: min-height .3s ease, box-shadow .3s ease, background .3s ease; } .navbar-sets.is-scrolled { min-height: 64px; box-shadow: 0 12px 36px rgba(15,23,42,.09); } .navbar-sets .nav-link { position: relative; padding: .55rem .7rem !important; font-size: .92rem; } .navbar-sets .nav-link::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg,var(--primary),var(--secondary)); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease-out); } .navbar-sets .nav-link:hover::after, .navbar-sets .nav-link:focus-visible::after { transform: scaleX(1); } .hero { padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem); } .hero::after { content: ''; position: absolute; inset: auto 0 0; height: 120px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 0; } .hero-title { font-size: clamp(2.65rem, 5.3vw, 4.75rem); max-width: 13ch; letter-spacing: -.045em; } .hero-title-animate { background: linear-gradient(100deg, var(--text) 5%, var(--primary) 48%, var(--secondary) 80%, var(--text) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: heroTitleIn .9s .15s var(--ease-out) forwards, premiumGradient 9s 1.2s ease-in-out infinite; } @keyframes premiumGradient { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } .hero .glass { border-color: rgba(46,75,214,.16); box-shadow: var(--shadow-lg); } .hero .glass:hover { transform: translateY(-4px); box-shadow: 0 30px 75px rgba(46,75,214,.16); } .btn { position: relative; overflow: hidden; box-shadow: none; } .btn::before { content: ''; position: absolute; top: -80%; left: -55%; width: 35%; height: 260%; background: linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform: rotate(18deg); transition: left .65s var(--ease-out); pointer-events: none; } .btn:hover::before { left: 125%; } .btn-primary { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow: 0 8px 22px rgba(46,75,214,.22); } .btn-primary:hover { box-shadow: 0 13px 30px rgba(46,75,214,.3); } .card, .feature-card, .category-tile, .step-card, .testimonial-card, .contact-info-card { box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; } .card-hover:hover, .feature-card:hover, .category-tile:hover, .step-card:hover, .testimonial-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: rgba(46,75,214,.24); } .feature-icon, .category-tile-icon, .step-number { transition: transform .4s var(--ease-out), box-shadow .4s ease; } .feature-card:hover .feature-icon, .category-tile:hover .category-tile-icon, .step-card:hover .step-number { transform: translateY(-3px) rotate(-4deg) scale(1.07); box-shadow: 0 12px 26px rgba(46,75,214,.2); } .course-thumb i { transition: transform .45s var(--ease-out), opacity .45s ease; } .course-card:hover .course-thumb i, .card-hover:hover .course-thumb i { transform: scale(1.15) rotate(-4deg); opacity: .85; } .section-badge { box-shadow: inset 0 0 0 1px rgba(46,75,214,.06); } .section-badge i { transition: transform .35s var(--ease-out); } .section-badge:hover i { transform: rotate(-8deg) scale(1.16); } .section-tint { position: relative; background: linear-gradient(180deg,rgba(46,75,214,.025),rgba(247,148,30,.025)); border-block: 1px solid rgba(148,163,184,.09); } .cta-banner { box-shadow: 0 28px 70px rgba(46,75,214,.25); } .cta-banner-glow { animation: ctaGlow 7s ease-in-out infinite alternate; } @keyframes ctaGlow { to { transform: translate(-28px,24px) scale(1.14); } } .gallery-thumb-btn { box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .gallery-thumb-btn::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 0 rgba(255,255,255,.35); transition:box-shadow .35s ease; } .gallery-thumb-btn:hover::after { box-shadow:inset 0 0 0 5px rgba(255,255,255,.5); } .gallery-thumb-btn:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Dashboard refinement */ .sidebar { box-shadow: 18px 0 45px rgba(2,6,23,.14); } .sidebar a.side-link { position: relative; overflow: hidden; transition: background .25s ease, color .25s ease, transform .25s var(--ease-out); } .sidebar a.side-link:hover { transform: translateX(4px); } .topbar { box-shadow: var(--shadow-sm); position: sticky; top: 1rem; z-index: 1020; } .page-body { animation: pageEnter .55s var(--ease-out) both; } @keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity:1; transform:none; } } .form-control, .form-select { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .form-control:focus, .form-select:focus { transform: translateY(-1px); box-shadow: 0 0 0 .22rem rgba(46,75,214,.12), 0 8px 24px rgba(15,23,42,.06); } .table tbody tr { transition: background .2s ease, transform .2s ease; } .table tbody tr:hover { background: rgba(46,75,214,.035); } .reveal { transform: translateY(30px) scale(.985); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } @media (max-width: 991.98px) { .brand-logo-nav { height: 58px; max-width: 190px; } .brand-logo-nav-mark { width: 44px; height: 44px; font-size: 1.1rem; } .navbar-sets { min-height: 66px; } .navbar-sets .navbar-collapse { padding: .75rem 0 1rem; } .hero-title { max-width: 15ch; } } @media (max-width: 575.98px) { .hero { padding: 3.5rem 0; } .cta-banner { padding: 2.5rem 1.25rem; border-radius: 1.25rem; } .page-body { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* Book stage: a stack of "ghost" books behind the main one, plus floating accent badges, so a single featured book still reads as a rich, animated visual moment. */ .book3d-stage { position: relative; } .book3d-stage .book3d { position: relative; z-index: 1; } .book3d-ghost { position: absolute; inset: 16px -10px -16px 10px; border-radius: .5rem; z-index: 0; background: linear-gradient(155deg, var(--card), var(--bg)); border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(15,23,42,.10); } .book3d-ghost-1 { transform: rotate(3deg); opacity: .85; } .book3d-ghost-2 { transform: rotate(-4deg) translate(4px, 8px); opacity: .5; } .book3d-float-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: .9rem; background: var(--card); border: 1px solid var(--border); box-shadow: 0 16px 32px rgba(15,23,42,.16); font-size: .82rem; font-weight: 700; white-space: nowrap; animation: book3dBadgeFloat 5.5s ease-in-out infinite; } .book3d-float-badge i { color: var(--secondary); } .book3d-float-badge-1 { top: -16px; right: -14px; animation-delay: .2s; } .book3d-float-badge-2 { bottom: 20px; left: -22px; animation-delay: 1.4s; } @keyframes book3dBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .book3d-float-badge { animation: none; } } @media (max-width: 767.98px) { .book3d-float-badge, .book3d-ghost { display: none; } } /* Larger showcase variant — used for the two spotlighted flagship-program "books" */ .book3d-lg { height: 460px; perspective: 2600px; } .book3d-lg .book3d-page { padding: 2.25rem; } .book3d-lg .book3d-page-icon { width: 100px; height: 100px; font-size: 2.75rem; border-radius: 1.4rem; } .book3d-lg .book3d-eyebrow { font-size: .8rem; } .book3d-lg .book3d-page-right h5 { font-size: 1.5rem; } .book3d-lg .book3d-page-right p { font-size: 1rem; } .book3d-lg .book3d-cover-front { padding: 2.5rem; } .book3d-lg .book3d-cover-icon { width: 76px; height: 76px; font-size: 2rem; } .book3d-lg .book3d-cover-front h4 { font-size: 1.7rem; } @media (max-width: 767.98px) { .book3d-lg { height: 440px; } } @media (max-width: 575.98px) { .book3d-lg { height: 480px; } } /* Alternating showcase rows: tag pill, highlight bullets, Dream 2 Business spotlight strip */ .flagship-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .flagship-tag-primary { background: rgba(46,75,214,.1); color: var(--primary); } .flagship-tag-secondary { background: rgba(247,148,30,.12); color: var(--secondary); } .flagship-tag-accent { background: rgba(251,191,36,.15); color: var(--accent-dark); } .flagship-highlight-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .65rem; } .flagship-highlight-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .96rem; } .flagship-highlight-list i { color: var(--success); margin-top: .2rem; } /* Flagship course advertising - intentionally distinct from the book shop */ .flagship-campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.25rem);max-width:1060px;margin:0 auto 1rem} .course-campaign{position:relative;min-height:455px;overflow:hidden;display:flex;flex-direction:column;padding:1.25rem;border:1px solid rgba(255,255,255,.16);border-radius:1.4rem;background:linear-gradient(145deg,#182b71,#3157ce 62%,#203b99);box-shadow:0 28px 65px rgba(20,36,85,.25);color:#fff;isolation:isolate} .course-campaign-secondary{background:linear-gradient(145deg,#70320f,#e87919 55%,#243e9c)} .campaign-grid{position:absolute;inset:0;z-index:-1;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 85%)} .campaign-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.62rem;font-weight:800;letter-spacing:.1em}.campaign-top>span:first-child{display:flex;align-items:center;gap:.45rem}.campaign-live{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:99px;background:rgba(255,255,255,.12);letter-spacing:0;text-transform:none}.campaign-live i{color:#53e789;font-size:.45rem} .campaign-visual{position:relative;min-height:170px;display:grid;place-items:center}.campaign-icon{width:105px;height:105px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:1.4rem;background:rgba(255,255,255,.13);box-shadow:0 18px 38px rgba(0,0,0,.18);font-size:2.8rem;backdrop-filter:blur(10px)} .campaign-play{position:absolute;right:16%;bottom:12%;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--primary);box-shadow:0 10px 25px rgba(0,0,0,.24)}.campaign-play i{margin-left:2px}.campaign-orbit{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}.campaign-orbit-one{width:155px;height:155px}.campaign-orbit-two{width:205px;height:205px;border-style:dashed;animation:campaignSpin 18s linear infinite}@keyframes campaignSpin{to{transform:rotate(360deg)}} .campaign-copy{margin-top:auto;padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:rgba(8,17,48,.28);backdrop-filter:blur(12px)}.campaign-kicker{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#ffd3a7}.course-campaign-primary .campaign-kicker{color:#c8d5ff}.campaign-copy h4{margin:.35rem 0 .5rem;color:#fff;font-size:1.45rem;line-height:1.15}.campaign-copy p{margin:0;color:rgba(255,255,255,.72);font-size:.75rem;line-height:1.55}.campaign-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:1rem 0}.campaign-metrics span{padding:.5rem;border-radius:.55rem;background:rgba(255,255,255,.09);font-size:.56rem;text-align:center;color:rgba(255,255,255,.68)}.campaign-metrics strong{display:block;color:#fff;font-size:.67rem}.campaign-action .btn{border-color:rgba(255,255,255,.65);background:#fff;color:#182b71}.campaign-action .btn:hover{background:#f5f7ff;color:#182b71;transform:translateY(-2px)} @media(max-width:575.98px){.course-campaign{min-height:430px}.campaign-top{align-items:flex-start}.campaign-live{white-space:nowrap}.campaign-metrics{grid-template-columns:1fr 1fr}.campaign-metrics span:last-child{grid-column:1/-1}} @media(max-width:767.98px){.flagship-campaign-grid{grid-template-columns:1fr;max-width:520px}} .flagship-spotlight { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem 2rem; border-radius: 1.25rem; background: linear-gradient(120deg, rgba(251,191,36,.12), rgba(46,75,214,.06)); border: 1px solid var(--border); } .flagship-spotlight-icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 1rem; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(155deg, var(--accent), var(--accent-dark)); } @media (max-width: 575.98px) { .flagship-spotlight { flex-direction: column; text-align: center; } } /* ============================================================ Homepage slider (admin/sliders.php): big image on one side, headline + CTA on the other, crossfading with a slow Ken Burns zoom on the image and a staggered fade-up on the text. ============================================================ */ .hero-slider { position: relative; height: 560px; border-radius: 1.75rem; overflow: hidden; box-shadow: 0 30px 70px rgba(15,23,42,.16); background: var(--card); } .hero-slider-track { position: relative; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; z-index: 1; transition: opacity .9s ease, visibility 0s linear .9s; } .hero-slide.active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s ease; } .hero-slide-reverse { flex-direction: row-reverse; } .hero-slide-media { position: relative; flex: 0 0 56%; overflow: hidden; background: var(--bg); } .hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; } .hero-slide.active .hero-slide-img { transform: scale(1.16); } .hero-slide-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.06), transparent 30%); } .hero-slide-reverse .hero-slide-media::after { background: linear-gradient(270deg, rgba(15,23,42,.06), transparent 30%); } .hero-slide-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 3rem 3.5rem; min-width: 0; } .hero-slide-eyebrow { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; padding: .35rem .85rem; border-radius: 999px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(46,75,214,.1); color: var(--primary); opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .hero-slide-text h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; margin: 0; line-height: 1.15; opacity: 0; transform: translateY(14px); transition: opacity .6s ease .1s, transform .6s ease .1s; } .hero-slide-text p { color: var(--muted); max-width: 30rem; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s ease .2s, transform .6s ease .2s; } .hero-slide-text .btn { align-self: flex-start; opacity: 0; transform: translateY(14px); transition: opacity .6s ease .3s, transform .6s ease .3s; } .hero-slide.active .hero-slide-eyebrow, .hero-slide.active .hero-slide-text h2, .hero-slide.active .hero-slide-text p, .hero-slide.active .hero-slide-text .btn { opacity: 1; transform: translateY(0); } .hero-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(15,23,42,.35); color: #fff; backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; transition: background .25s ease, transform .25s ease; } .hero-slider-arrow:hover { background: rgba(15,23,42,.55); transform: translateY(-50%) scale(1.08); } .hero-slider-arrow-prev { left: 20px; } .hero-slider-arrow-next { right: 20px; } .hero-slider-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: .5rem; } .hero-slider-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s ease, background .3s ease; } .hero-slider-dot.active { width: 26px; background: #fff; } .hero-slider-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255,255,255,.2); } .hero-slider-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--secondary)); } .hero-slider-progress-fill.running { animation: heroSliderProgress linear; animation-duration: var(--hero-slider-duration, 6s); } @keyframes heroSliderProgress { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .hero-slide-img { transition: none; } .hero-slider-progress-fill.running { animation: none; width: 0; } } @media (max-width: 991.98px) { .hero-slider { height: 620px; } .hero-slide, .hero-slide-reverse { flex-direction: column; } .hero-slide-media { flex: 0 0 46%; } .hero-slide-text { padding: 1.75rem 1.75rem 2.25rem; gap: .6rem; } .hero-slider-arrow { display: none; } } @media (max-width: 575.98px) { .hero-slider { height: 560px; } .hero-slide-media { flex: 0 0 40%; } .hero-slide-text { padding: 1.25rem 1.25rem 1.75rem; } } /* ---------- About page prose ---------- */ .about-story { font-size: 1.1rem; line-height: 1.85; color: var(--text); } .about-story p { margin-bottom: 1.4rem; } .about-story p:first-of-type::first-letter { float: left; font-size: 3.4rem; font-weight: 800; line-height: 1; padding: .1rem .6rem 0 0; color: var(--primary); } .about-story a { color: var(--primary); font-weight: 600; } /* ---------- Founder / leadership portrait ---------- */ .founder-photo-frame { position: relative; width:min(350px,90vw); height:440px; border-radius: 1.5rem; overflow: hidden; background: linear-gradient(155deg, var(--primary), var(--secondary)); padding: 5px; box-shadow: 0 25px 55px rgba(15,23,42,.2); } .founder-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1.35rem; } .founder-photo-fallback { width: 100%; height: 100%; border-radius: 1.35rem; background: var(--card); display: grid; place-items: center; font-size: 5rem; font-weight: 800; background: linear-gradient(155deg, var(--card), var(--bg)); color: var(--primary); } .contact-info-card { padding: 2rem; border-radius: var(--radius); background: linear-gradient(155deg, var(--dark), #1e293b); color: #cbd5e1; height: 100%; } .contact-info-card h3 { color: #fff; } .contact-info-icon { width: 40px; height: 40px; border-radius: .7rem; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--secondary); flex-shrink: 0; } /* ---------- Panel layout ---------- */ .panel-wrap { display: flex; min-height: 100vh; } .sidebar { width: 264px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, var(--dark), #1e293b); color: #cbd5e1; padding: 1.25rem 1rem; } .sidebar .brand { color: #fff; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; } .sidebar a.side-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; margin-bottom: .25rem; border-radius: .7rem; color: #cbd5e1; font-weight: 600; font-size: .93rem; transition: all .2s; } .sidebar a.side-link i { width: 20px; text-align: center; } .sidebar a.side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; } .sidebar a.side-link.active { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 6px 18px rgba(46,75,214,.4); } .sidebar .side-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; margin: 1.1rem 0 .4rem .4rem; } .panel-main { flex: 1; min-width: 0; } .topbar { padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .page-body { padding: 1.5rem; } /* stat cards */ .dash-welcome { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; } .stat-icon { width: 52px; height: 52px; border-radius: .9rem; display: grid; place-items: center; font-size: 1.3rem; color: #fff; } .stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .stat-label { color: var(--muted); font-size: .85rem; font-weight: 600; } /* tables */ .table { color: var(--text); } .table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom-width: 2px; } .table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--border); } .badge-soft-success { background: rgba(34,197,94,.12); color: var(--success); } .badge-soft-warning { background: rgba(245,158,11,.14); color: var(--warning); } .badge-soft-danger { background: rgba(239,68,68,.12); color: var(--danger); } .badge-soft-primary { background: rgba(46,75,214,.12); color: var(--primary); } /* forms */ .form-control, .form-select { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: .65rem; padding: .6rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(46,75,214,.15); background: var(--card); color: var(--text); } label.form-label { font-weight: 600; font-size: .88rem; } /* auth pages */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(1000px 500px at 80% -10%, rgba(46,75,214,.18), transparent), radial-gradient(800px 400px at -10% 110%, rgba(247,148,30,.15), transparent), var(--bg); } .auth-card { width: 100%; max-width: 440px; padding: 2.25rem; } /* video player */ .player-shell { background: #000; border-radius: var(--radius); overflow: hidden; position: relative; } .player-shell video, .player-shell iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; } .watermark { position: absolute; top: 12px; right: 14px; color: rgba(255,255,255,.45); font-size: .8rem; font-weight: 700; pointer-events: none; z-index: 5; } .lesson-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: .7rem; color: var(--text); font-size: .92rem; } .lesson-item:hover { background: rgba(46,75,214,.08); } .lesson-item.active { background: rgba(46,75,214,.14); color: var(--primary); font-weight: 700; } .lesson-item .fa-circle-check { color: var(--success); } .add-lesson-box { background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .js-upload-bar { transition: width .2s ease; } /* lesson thumbnails: fixed 16:9 box everywhere, so any uploaded image displays consistently */ .thumb-preview { width: 96px; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1.2rem; } /* admin site-logo preview: wide box (matches the recommended 3:1-4:1 logo ratio) */ .logo-preview { width: 160px; height: 60px; border-radius: .6rem; overflow: hidden; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1.3rem; } .logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; } .founder-photo-preview { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1.6rem; } .founder-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .founder-slot-preview { height:150px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:.8rem;background:var(--bg); } .founder-slot-preview img { width:100%;height:100%;object-fit:cover;object-position:center top; } .thumb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .lesson-thumb { width: 64px; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); } .lesson-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lesson-thumb-sm { width: 44px; } .lesson-thumb-check { position: absolute; bottom: -3px; right: -3px; color: var(--success); background: var(--card); border-radius: 50%; font-size: .8rem; box-shadow: 0 0 0 1px var(--card); } /* skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, rgba(148,163,184,.25) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: .6rem; } @keyframes shimmer { to { background-position: -200% 0; } } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: all .6s cubic-bezier(.22,1,.36,1); } .reveal.in { opacity: 1; transform: none; } /* progress ring */ .progress { height: 8px; border-radius: 999px; background: var(--border); } .progress-bar { background: linear-gradient(90deg, var(--primary), var(--secondary)); } footer.site-footer { background: var(--dark); color: #94a3b8; padding: 3rem 0 1.5rem; margin-top: 4rem; } footer.site-footer a { color: #cbd5e1; } footer.site-footer a:hover { color: #fff; } .footer-bottom-row{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem}.footer-bottom-row>.small{order:2;text-align:center;color:#718078} .rur-powered-badge{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;width:100%;min-height:285px;padding:2.25rem;overflow:hidden;border:1px solid rgba(132,255,0,.28);border-radius:1.25rem;background:linear-gradient(120deg,#020403 0%,#080d09 54%,#040705 100%);box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035);color:#fff!important;text-align:center;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .rur-powered-badge::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(rgba(132,255,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(132,255,0,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 72%);pointer-events:none}.rur-powered-badge::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#74d900 0%,#a5ff42 30%,rgba(132,255,0,.08) 78%,transparent);pointer-events:none}.rur-powered-badge:hover{transform:translateY(-3px);border-color:rgba(132,255,0,.48);box-shadow:0 22px 52px rgba(0,0,0,.38),0 0 0 1px rgba(132,255,0,.05)} .rur-powered-copy{position:relative;z-index:1;display:flex;align-self:stretch;align-items:center;flex-direction:column;width:100%;max-width:650px;margin-inline:auto;line-height:1.3;text-align:center}.rur-powered-copy small{display:flex;align-items:center;justify-content:center;gap:.9rem;width:100%;margin-bottom:.7rem;color:#aab3ad;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-align:center;text-transform:uppercase}.rur-powered-copy small::before,.rur-powered-copy small::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(181,190,184,.42))}.rur-powered-copy small::after{background:linear-gradient(90deg,rgba(181,190,184,.42),transparent)}.rur-powered-copy strong{display:block;width:100%;margin:.2rem 0;color:#fff;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.25;letter-spacing:-.02em;text-align:center}.rur-powered-copy em{display:block;width:100%;margin-top:.3rem;color:#a8b3ac;font-size:1rem;font-style:normal;letter-spacing:.02em;text-align:center}.rur-powered-badge img{position:relative;z-index:1;width:520px;max-width:72%;max-height:125px;object-fit:contain;filter:none} .rur-powered-copy,.rur-powered-copy small,.rur-powered-copy strong,.rur-powered-copy em{text-align:center} .auth-wrap-modern{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;min-height:100vh;padding:2rem;background:radial-gradient(circle at 12% 12%,rgba(48,82,210,.2),transparent 34%),radial-gradient(circle at 88% 84%,rgba(255,125,20,.12),transparent 32%),#050914} .login-shell{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);width:min(1220px,100%);min-height:720px;overflow:hidden;border:1px solid rgba(148,163,184,.17);border-radius:1.75rem;background:#0a1020;box-shadow:0 30px 90px rgba(0,0,0,.42)} .login-brand-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:2.5rem;overflow:hidden;background:linear-gradient(145deg,rgba(16,28,54,.98),rgba(7,13,27,.98))}.login-brand-panel::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(rgba(62,95,190,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(62,95,190,.07) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(135deg,#000,transparent 85%)} .login-sets-logo{display:inline-flex;width:max-content}.login-logo-image{display:block;width:300px;max-width:70%;height:105px;object-fit:contain;object-position:left center}.login-brand-message{margin:auto 0;padding:3rem 0}.login-brand-message span{display:inline-block;margin-bottom:1rem;color:#ff9a35;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.login-brand-message h1{max-width:650px;margin:0;color:#fff;font-size:clamp(2.25rem,4vw,4.25rem);font-weight:800;line-height:1.02;letter-spacing:-.055em}.login-brand-message p{max-width:560px;margin:1.35rem 0 0;color:#aab5c8;font-size:1rem;line-height:1.75} .login-partner-badge{min-height:178px;padding:1.35rem 1.75rem;gap:.65rem;border-radius:1.1rem}.login-partner-badge img{width:330px;max-height:76px}.login-partner-badge .rur-powered-copy{width:min(500px,100%)}.login-partner-badge .rur-powered-copy small{margin-bottom:.3rem;font-size:.62rem}.login-partner-badge .rur-powered-copy strong{font-size:1.08rem}.login-partner-badge .rur-powered-copy em{font-size:.78rem} .login-partner-external{width:min(1220px,100%);flex:0 0 auto} .register-shell{min-height:780px}.register-form-panel{padding:2.25rem 3rem}.register-auth-card{max-width:500px}.register-benefits{display:flex;flex-wrap:wrap;gap:.75rem}.register-benefits span{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.045);color:#c2ccdc;font-size:.78rem}.register-benefits i{color:#7dde22}.register-auth-card .form-label{margin-bottom:.4rem;font-size:.82rem;font-weight:700} .login-form-panel{display:grid;place-items:center;padding:3rem;background:linear-gradient(160deg,#fff,#f5f7fb)}[data-theme="dark"] .login-form-panel{background:linear-gradient(160deg,#111827,#090e19)}.login-auth-card{max-width:430px;padding:0;background:transparent;border:0;box-shadow:none}.login-form-heading{margin-bottom:2rem}.login-secure-label{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1rem;padding:.4rem .7rem;border-radius:999px;background:rgba(48,82,210,.1);color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.login-form-heading h2{margin:0 0 .45rem;font-size:2rem;font-weight:800;letter-spacing:-.035em}.login-form-heading p{margin:0;color:var(--muted)}.login-input-wrap{position:relative}.login-input-wrap>i{position:absolute;z-index:2;left:1rem;top:50%;transform:translateY(-50%);color:#8792a5}.login-input-wrap .form-control{height:54px;padding-left:2.85rem;border-radius:.8rem}.login-submit{display:flex;align-items:center;justify-content:center;gap:.65rem;height:54px;border-radius:.8rem;font-weight:800;box-shadow:0 12px 25px rgba(48,82,210,.22)}.login-form-footer{margin-top:1.75rem;padding-top:1.35rem;border-top:1px solid var(--border);text-align:center}.login-form-footer p{margin:0 0 .75rem;color:var(--muted);font-size:.9rem}.login-form-footer p a{font-weight:800}.login-back{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.84rem} .course-list-cover{overflow:hidden;border-radius:1rem 1rem 0 0;background:linear-gradient(135deg,var(--primary),var(--secondary))}.course-list-cover img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .45s var(--ease-out)}.course-list-cover>i{display:grid;place-items:center;color:rgba(255,255,255,.65);font-size:2rem}.card-hover:hover .course-list-cover img{transform:scale(1.045)} @media(max-width:991.98px){.auth-wrap-modern{padding:1rem}.login-shell{grid-template-columns:1fr;min-height:0}.login-brand-panel{padding:1.5rem}.login-brand-message{padding:2rem 0}.login-brand-message h1{font-size:clamp(2rem,7vw,3.4rem)}.login-form-panel{padding:2.5rem 1.5rem}.login-partner-badge{min-height:165px}.login-logo-image{height:90px}} @media(max-width:575.98px){.auth-wrap-modern{padding:0}.login-shell{border:0;border-radius:0}.login-brand-message p{font-size:.9rem}.login-partner-badge img{width:280px}.login-form-panel{padding:2.25rem 1.25rem}.login-form-heading h2{font-size:1.7rem}} .footer-partner-admin-preview{display:grid;place-items:center;width:min(420px,100%);height:100px;padding:.75rem;border-radius:.7rem;background:#030604;border:1px solid #243022}.footer-partner-admin-preview img{width:100%;height:100%;object-fit:contain} @media(max-width:991.98px){.rur-powered-badge{min-height:250px;padding:1.75rem}.rur-powered-badge img{width:440px;max-width:85%}} @media(max-width:420px){.rur-powered-badge{min-height:230px;padding:1.35rem}.rur-powered-badge img{width:100%;max-width:100%;max-height:88px}.rur-powered-copy small{font-size:.62rem;gap:.55rem}.rur-powered-copy strong{font-size:1.15rem}.rur-powered-copy em{font-size:.85rem}} @media (max-width: 991.98px) { .sidebar { position: fixed; left: -280px; transition: left .3s ease; z-index: 1040; } .sidebar.open { left: 0; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; display: none; } .sidebar-backdrop.show { display: block; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ Technology Partner Showcase (admin-managed, premium pre-footer section) ============================================================ */ .dev-showcase { position: relative; overflow: hidden; padding: 6.5rem 0; isolation: isolate; } .dev-showcase-bg { position: absolute; inset: 0; z-index: 0; background: var(--dev-bg, #060b18); background-size: cover; background-position: center; } .dev-showcase .aurora { position: absolute; inset: -20% -10% auto -10%; height: 62%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--dev-accent, var(--primary)) 55%, transparent), color-mix(in srgb, var(--secondary) 45%, transparent), transparent); filter: blur(70px); opacity: .55; mix-blend-mode: screen; animation: dev-aurora-drift 16s ease-in-out infinite; } @keyframes dev-aurora-drift { 0%, 100% { transform: translateX(-8%) rotate(-3deg); } 50% { transform: translateX(8%) rotate(3deg); } } .dev-showcase .mesh-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 40%, transparent 100%); } .dev-showcase .glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; } .dev-showcase .glow-1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, var(--dev-accent, var(--primary)), transparent 70%); } .dev-showcase .glow-2 { width: 460px; height: 460px; bottom: -180px; right: -100px; background: radial-gradient(circle, var(--secondary), transparent 70%); animation: dev-glow-drift 14s ease-in-out infinite alternate; } @keyframes dev-glow-drift { from { transform: translate(0, 0); } to { transform: translate(40px, -30px); } } /* background style variants */ .dev-showcase.bgstyle-mesh .aurora { display: none; } .dev-showcase.bgstyle-minimal .aurora, .dev-showcase.bgstyle-minimal .mesh-grid, .dev-showcase.bgstyle-minimal .particles { display: none; } .dev-showcase.bgstyle-minimal .glow { opacity: .25; } .dev-showcase .particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .dev-showcase .particle { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(96,165,250,.7); box-shadow: 0 0 8px rgba(96,165,250,.8); animation: dev-particle-rise linear infinite; } @keyframes dev-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .5; } 100% { transform: translateY(-560px) translateX(var(--dev-drift, 20px)); opacity: 0; } } /* ---------- section header ---------- */ .dev-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; position: relative; z-index: 1; } .dev-heading { font-size: 2.7rem; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: .3rem 0 1rem; } .dev-section-desc { color: #94a3b8; font-size: 1.08rem; margin-bottom: 0; } /* ---------- badge pills (eyebrow + trust badges) ---------- */ .dev-badge-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; font-size: .85rem; font-weight: 600; backdrop-filter: blur(8px); transition: transform .25s ease, background .25s ease, border-color .25s ease; } .dev-badge-pill i { color: var(--success); } .dev-badge-eyebrow { margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; background: color-mix(in srgb, var(--dev-accent, var(--primary)) 16%, transparent); border-color: color-mix(in srgb, var(--dev-accent, var(--primary)) 42%, transparent); color: #bfdbfe; } .dev-badge-eyebrow i { color: #bfdbfe; } .dev-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.75rem; position: relative; z-index: 1; } .dev-badges .dev-badge-pill { animation: dev-badge-in .6s ease both; animation-delay: calc(var(--i, 0) * .07s); } .dev-badges .dev-badge-pill:hover { transform: translateY(-3px); color: #fff; background: color-mix(in srgb, var(--dev-accent, var(--primary)) 20%, rgba(255,255,255,.06)); border-color: color-mix(in srgb, var(--dev-accent, var(--primary)) 50%, transparent); } @keyframes dev-badge-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- main glass card ---------- */ .dev-card { position: relative; z-index: 1; border-radius: 1.75rem; padding: 3rem; background: linear-gradient(155deg, rgba(17,26,46,.88), rgba(9,13,26,.92)); border: 1px solid rgba(148,163,184,.14); box-shadow: 0 30px 80px rgba(2,6,23,.55), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; will-change: transform; } .dev-card:hover { box-shadow: 0 40px 100px color-mix(in srgb, var(--dev-accent, var(--primary)) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.06); } .dev-card-content { z-index: 2; } .dev-card-border { position: absolute; inset: 0; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none; z-index: 1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; transition: opacity .4s ease; } .dev-card-border::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, var(--dev-accent, var(--primary)), var(--secondary), var(--accent), var(--dev-accent, var(--primary))); animation: dev-spin 7s linear infinite; } .dev-card:hover .dev-card-border { opacity: 1; } @keyframes dev-spin { to { transform: rotate(360deg); } } /* cursor-follow glow + glass shine sweep */ .dev-card-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--dev-accent, var(--primary)) 30%, transparent), transparent 70%); } .dev-card:hover .dev-card-glow { opacity: 1; } .dev-card-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .dev-card-shine::before { content: ''; position: absolute; top: -60%; left: -60%; width: 35%; height: 220%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.12), transparent); transform: rotate(20deg); transition: left .9s ease; } .dev-card:hover .dev-card-shine::before { left: 130%; } /* ---------- left column: brand identity ---------- */ .dev-brand-row { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.3rem; } .dev-logo-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; } .dev-logo-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--dev-accent, var(--primary)) 55%, transparent), transparent 70%); filter: blur(20px); animation: dev-pulse 4s ease-in-out infinite; } @keyframes dev-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .dev-logo-frame { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 1.1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px rgba(0,0,0,.4); animation: dev-float 5s ease-in-out infinite; } .dev-logo-frame img { max-width: 66%; max-height: 66%; object-fit: contain; } .dev-logo-fallback { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--dev-accent, var(--primary)), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes dev-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .dev-company-name { font-size: 1.9rem; font-weight: 800; color: #fff; margin: 0 0 .2rem; letter-spacing: -.02em; } .dev-tagline { color: #cbd5e1; font-size: 1rem; max-width: 480px; } .dev-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: #a5b4cb; font-size: .9rem; margin-bottom: 1.25rem; } .dev-meta a, .dev-meta span { color: #a5b4cb; display: inline-flex; align-items: center; gap: .45rem; } .dev-meta i { color: var(--secondary); } .dev-meta a:hover { color: #fff; } .dev-socials { display: flex; gap: .6rem; margin-bottom: 1.6rem; } .dev-socials a { width: 38px; height: 38px; border-radius: .7rem; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; transition: all .25s ease; } .dev-socials a:hover { background: linear-gradient(135deg, var(--dev-accent, var(--primary)), var(--secondary)); color: #fff; transform: translateY(-3px); border-color: transparent; } /* buttons with animated underline + ripple */ .dev-cta { display: flex; flex-wrap: wrap; gap: .9rem; } .dev-btn { position: relative; overflow: hidden; padding: .85rem 1.6rem; border-radius: .85rem; font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .55rem; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .dev-btn::after { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; bottom: .55rem; height: 2px; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .dev-btn:hover::after { transform: scaleX(1); } .dev-btn-primary { background: linear-gradient(135deg, var(--dev-accent, var(--primary)), var(--secondary)); color: #fff; box-shadow: 0 12px 30px color-mix(in srgb, var(--dev-accent, var(--primary)) 40%, transparent); } .dev-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--dev-accent, var(--primary)) 55%, transparent); color: #fff; } .dev-btn-outline { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); color: #e2e8f0; } .dev-btn-outline:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); color: #fff; } .dev-btn .fa-arrow-right { transition: transform .25s ease; } .dev-btn:hover .fa-arrow-right { transform: translateX(4px); } .dev-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: dev-ripple-anim .6s ease-out; pointer-events: none; } @keyframes dev-ripple-anim { to { transform: scale(3); opacity: 0; } } /* ---------- right column: animated tech showcase ---------- */ .dev-banner-frame { border-radius: 1.4rem; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 25px 60px rgba(0,0,0,.4); } .dev-banner-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .dev-visual { position: relative; height: 360px; z-index: 2; } .dev-stage-glow { position: absolute; left: 50%; top: 54%; width: 62%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(40px); animation: dev-pulse 4s ease-in-out infinite; background: radial-gradient(circle, color-mix(in srgb, var(--dev-accent, var(--primary)) 45%, transparent), transparent 70%); } .dev-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dev-link { fill: none; stroke: url(#devLinkGrad); stroke-width: .6; stroke-linecap: round; filter: url(#devLinkGlow); opacity: .5; stroke-dasharray: 3 5; animation: dev-link-flow 2.4s linear infinite; } @keyframes dev-link-flow { to { stroke-dashoffset: -16; } } .dev-laptop { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: 54%; max-width: 230px; z-index: 4; animation: dev-float 6s ease-in-out infinite; } .dev-laptop-screen { background: linear-gradient(160deg, #111a2e, #0b1120); border: 1px solid rgba(255,255,255,.12); border-radius: .9rem .9rem .25rem .25rem; padding: .55rem; aspect-ratio: 16 / 10; box-shadow: 0 25px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); display: flex; flex-direction: column; gap: .35rem; } .dev-screen-topbar { display: flex; gap: .25rem; } .dev-screen-topbar span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); } .dev-screen-chart { flex: 1; display: flex; align-items: flex-end; gap: 4px; padding: .3rem .2rem 0; } .dev-screen-chart .bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--dev-accent, var(--primary)), transparent); animation: dev-bar-grow 3.2s ease-in-out infinite; transform-origin: bottom; } .dev-screen-chart .bar:nth-child(2n) { background: linear-gradient(180deg, var(--secondary), transparent); animation-delay: .4s; } .dev-screen-chart .bar:nth-child(3n) { animation-delay: .8s; } @keyframes dev-bar-grow { 0%, 100% { transform: scaleY(.85); } 50% { transform: scaleY(1); } } .dev-laptop-base { height: 12px; margin: 0 -9%; border-radius: 0 0 .7rem .7rem; position: relative; background: linear-gradient(180deg, #2a3a56, #0b1120); border: 1px solid rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.25); box-shadow: 0 16px 30px rgba(0,0,0,.5); } .dev-laptop-base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 24%; height: 4px; background: rgba(255,255,255,.2); border-radius: 0 0 5px 5px; } .dev-float-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: .9rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: 0 16px 34px rgba(0,0,0,.35); font-size: .78rem; color: #e2e8f0; animation: dev-float 5s ease-in-out infinite; } .dev-float-card strong { display: block; font-size: .95rem; line-height: 1.2; } .dev-float-card span { color: #94a3b8; } .dev-float-card i { font-size: 1rem; color: var(--success); } .fc-1 { left: 6%; top: 24%; animation-duration: 5.5s; } .fc-2 { right: 4%; top: 64%; animation-duration: 6.2s; animation-delay: .6s; } .dev-sparkline { width: 46px; height: 20px; } .dev-sparkline polyline { fill: none; stroke: var(--secondary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: dev-pulse 3s ease-in-out infinite; } .tech-chip { position: absolute; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 1.1rem; backdrop-filter: blur(6px); box-shadow: 0 12px 28px rgba(0,0,0,.4); z-index: 6; transform: translate(-50%, -50%); animation: dev-float-icon 6s ease-in-out infinite; } .tc-1 { left: 4%; top: 6%; color: var(--dev-accent, var(--primary)); animation-duration: 5s; } .tc-2 { left: 94%; top: 8%; color: var(--secondary); animation-duration: 6.4s; animation-delay: .3s; } .tc-3 { left: 2%; top: 50%; color: var(--accent); animation-duration: 5.6s; animation-delay: .6s; } .tc-4 { left: 96%; top: 50%; color: #a78bfa; animation-duration: 6.8s; animation-delay: .9s; } .tc-5 { left: 6%; top: 94%; color: #34d399; animation-duration: 6.1s; animation-delay: 1.2s; } .tc-6 { left: 92%; top: 94%; color: #f472b6; animation-duration: 5.9s; animation-delay: 1.5s; } @keyframes dev-float-icon { 0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); } 50% { transform: translate(-50%, -50%) translateY(-10px) rotate(6deg); } } .dev-showcase.no-anim .dev-card-border::before, .dev-showcase.no-anim .glow-2, .dev-showcase.no-anim .aurora, .dev-showcase.no-anim .dev-logo-glow, .dev-showcase.no-anim .dev-logo-frame, .dev-showcase.no-anim .dev-laptop, .dev-showcase.no-anim .dev-float-card, .dev-showcase.no-anim .dev-stage-glow, .dev-showcase.no-anim .dev-screen-chart .bar, .dev-showcase.no-anim .dev-sparkline polyline, .dev-showcase.no-anim .dev-link, .dev-showcase.no-anim .tech-chip, .dev-showcase.no-anim .dev-badge-pill, .dev-showcase.no-anim .particle { animation: none !important; } @media (max-width: 991.98px) { .dev-card { padding: 2.25rem; } .dev-heading { font-size: 2.1rem; } .dev-visual { height: 280px; margin-top: 1.5rem; } .dev-company-name { font-size: 1.6rem; } } @media (max-width: 575.98px) { .dev-cta { flex-direction: column; align-items: stretch; } .dev-cta .dev-btn { justify-content: center; } .dev-showcase { padding: 4rem 0; } .dev-brand-row { flex-direction: column; align-items: flex-start; } } /* Final cascade guarantees for the shared polish layer. */ .reveal { opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.in { opacity: 1; transform: none; } .form-control:focus, .form-select:focus { border-color: var(--primary); background: var(--card); color: var(--text); transform: translateY(-1px); box-shadow: 0 0 0 .22rem rgba(46,75,214,.12), 0 8px 24px rgba(15,23,42,.06); } @media (max-width: 575.98px) { .page-body { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ SETS Design System v2 — calmer, clearer, product-led UI ============================================================ */ :root { --primary: #3b5ccc; --primary-dark: #2846ad; --secondary: #f28b2c; --secondary-dark: #d76e13; --bg: #f6f8fc; --dark: #101828; --text: #182230; --muted: #667085; --border: #e4e9f2; --glass: rgba(255,255,255,.9); --radius: .9rem; --shadow: 0 8px 28px rgba(16,24,40,.07); } [data-theme="dark"] { --bg: #0c111d; --card: #151c2c; --text: #f1f5f9; --muted: #98a2b3; --border: #263248; --glass: rgba(21,28,44,.9); } body { line-height: 1.6; letter-spacing: -.005em; } .container { --bs-gutter-x: 2rem; } h1,h2,h3 { line-height: 1.14; } h2 { font-size: clamp(1.8rem,3vw,2.55rem); } .text-secondary { color: var(--muted) !important; } /* Navigation */ .navbar-sets { background: var(--glass); backdrop-filter: blur(18px) saturate(140%); } .navbar-sets .nav-link { color: var(--muted); border-radius: .55rem; } .navbar-sets .nav-link:hover { color: var(--text); background: rgba(59,92,204,.06); } .navbar-sets .nav-link.active { color: var(--primary); background: rgba(59,92,204,.09); } .navbar-sets .nav-link::after { display: none; } .navbar-toggler { border: 1px solid var(--border); border-radius: .65rem; padding: .45rem .6rem; } /* Homepage hero */ .hero { background: linear-gradient(180deg,rgba(59,92,204,.035),transparent 78%); } .hero-mesh { opacity: .38; background-size: 54px 54px; } .hero-orbit { opacity: .16; filter: blur(110px); } .hero-badge { background: var(--card); border: 1px solid rgba(59,92,204,.16); box-shadow: 0 5px 18px rgba(16,24,40,.05); } .hero-title-animate { background: none; color: var(--text); animation: heroTitleIn .8s .12s var(--ease-out) forwards; } .hero-title-animate::first-line { color: var(--text); } .hero .lead { font-size: 1.08rem; line-height: 1.75; } .hero-slogan-pill { position: relative; display: inline-flex; align-items: center; gap: .9rem; padding: .85rem 1.15rem .85rem .85rem; overflow: hidden; background: linear-gradient(115deg, #102f8f 0%, #2858d8 58%, #1743b5 100%); border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; color: #fff; box-shadow: 0 14px 34px rgba(26,67,181,.32), 0 4px 12px rgba(247,148,30,.18) !important; text-decoration: none; isolation: isolate; } .hero-slogan-pill::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 12% 20%, rgba(255,184,77,.38), transparent 28%); } .hero-slogan-pill:hover { color: #fff; transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 44px rgba(26,67,181,.4), 0 7px 18px rgba(247,148,30,.26) !important; } .hero-slogan-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .8rem; background: linear-gradient(135deg,#ffad32,#f36f18); box-shadow: 0 7px 16px rgba(0,0,0,.2); font-size: 1.15rem; } .hero-slogan-pill > span:nth-child(2) { display: grid; gap: .12rem; text-align: left; } .hero-slogan-pill small { color: rgba(255,255,255,.72); font-size: .65rem; font-weight: 800; letter-spacing: .13em; line-height: 1; text-transform: uppercase; } .hero-slogan-pill strong { color: #fff; font-size: 1.4rem; font-weight: 900; letter-spacing: .01em; line-height: 1.08; } .hero-slogan-arrow { margin-left: .35rem; color: #ffc563 !important; transition: transform .25s ease; } .hero-slogan-pill:hover .hero-slogan-arrow { transform: translateX(5px); } @media (max-width: 575.98px) { .hero-slogan-pill { width: 100%; } .hero-slogan-pill strong { font-size: 1.2rem; } .hero-slogan-arrow { margin-left: auto; } } .learning-preview { position: relative; max-width: 470px; margin: 1.5rem auto; border-radius: 1.35rem; overflow: visible; background: var(--card); border: 1px solid rgba(59,92,204,.14); box-shadow: 0 35px 90px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.05); } .learning-preview::before { content: ''; position: absolute; z-index: -1; inset: 12% -9% -9% 9%; border-radius: 1.6rem; background: linear-gradient(145deg,rgba(59,92,204,.14),rgba(242,139,44,.1)); filter: blur(1px); transform: rotate(3deg); } .learning-preview-top { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-bottom:1px solid var(--border); font-size:.82rem; } .preview-logo { width:30px;height:30px;display:grid;place-items:center;border-radius:.55rem;color:#fff;background:linear-gradient(135deg,var(--primary),#6e83dd); } .preview-live { display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border-radius:99px;background:rgba(34,197,94,.09);color:#178b43;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em; } .preview-live span { width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12); } .preview-video { position:relative; height:210px; overflow:hidden; background:linear-gradient(135deg,#18213a,#304da9 58%,#e7832b); } .preview-video::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.22),transparent 35%); } .preview-video-grid { position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);background-size:30px 30px;transform:perspective(300px) rotateX(55deg) scale(1.5);transform-origin:bottom; } .preview-play { position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:#fff;color:var(--primary);box-shadow:0 12px 35px rgba(0,0,0,.25); } .preview-play i { margin-left:3px; } .preview-duration { position:absolute;right:.75rem;bottom:.65rem;padding:.2rem .45rem;border-radius:.35rem;background:rgba(0,0,0,.55);color:#fff;font-size:.7rem; } .preview-content { padding:1.15rem 1.2rem 1.25rem; } .preview-kicker { color:var(--primary);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em; } .preview-content h5 { margin:.25rem 0 .85rem;font-size:1rem; } .preview-progress-copy { display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem;margin-bottom:.4rem; } .preview-progress-copy strong { color:var(--text); } .preview-progress { height:7px;border-radius:99px;background:var(--border);overflow:hidden; } .preview-progress span { display:block;width:68%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#7187df); } .preview-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:1rem; } .preview-metrics div { display:grid;grid-template-columns:auto 1fr;column-gap:.4rem;align-items:center;padding:.65rem;border-radius:.65rem;background:var(--bg); } .preview-metrics i { grid-row:1/3;color:var(--primary);font-size:.85rem; } .preview-metrics strong { font-size:.85rem;line-height:1; } .preview-metrics span { color:var(--muted);font-size:.62rem;line-height:1.2; } .preview-float { position:absolute;display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;border-radius:.8rem;background:var(--card);border:1px solid var(--border);box-shadow:0 16px 36px rgba(16,24,40,.14); } .preview-float i { width:32px;height:32px;border-radius:.6rem;display:grid;place-items:center;background:rgba(242,139,44,.12);color:var(--secondary); } .preview-float strong,.preview-float small { display:block;line-height:1.3; } .preview-float strong { font-size:.75rem; }.preview-float small { color:var(--muted);font-size:.61rem; } .preview-float-certificate { left:-3.5rem;bottom:4.5rem; } .preview-float-rating { right:-2.5rem;top:5.2rem;gap:.35rem; } .preview-float-rating i { width:auto;height:auto;background:none;color:#f5a623; } /* Content sections */ .section-tint { background:#f0f4fb; } [data-theme="dark"] .section-tint { background:#101827; } .section-badge { padding:.4rem .8rem;background:rgba(59,92,204,.08);letter-spacing:.09em;box-shadow:none; } .feature-card,.category-tile,.step-card,.testimonial-card { padding:1.5rem;border-radius:1rem;box-shadow:none; } .feature-card:hover,.category-tile:hover,.step-card:hover,.testimonial-card:hover { transform:translateY(-4px);box-shadow:0 15px 35px rgba(16,24,40,.08); } .feature-icon,.category-tile-icon { border-radius:.8rem; } .book3d { animation:none; } .book3d-float-badge { animation:none !important; } .flagship-spotlight { border-radius:1rem;background:var(--card);box-shadow:var(--shadow); } .hero-slider { height:500px;border-radius:1.25rem;box-shadow:0 20px 55px rgba(16,24,40,.12); } .cta-banner { border-radius:1.25rem;background:linear-gradient(125deg,#2846ad,#3b5ccc 60%,#526fd2);box-shadow:0 22px 55px rgba(40,70,173,.22); } .cta-banner-glow { animation:none; } /* Forms and admin */ .form-control,.form-select { min-height:44px;border-radius:.65rem;background:var(--card); } textarea.form-control { min-height:auto; } .card { box-shadow:0 3px 14px rgba(16,24,40,.045); } .panel-main { background:var(--bg); } .sidebar { width:250px;background:#101828;border-right:1px solid rgba(255,255,255,.06);box-shadow:none; } .sidebar a.side-link { color:#98a2b3;font-weight:550;border-radius:.55rem; } .sidebar a.side-link:hover { transform:none;background:rgba(255,255,255,.055); } .sidebar a.side-link.active { background:#263f99;box-shadow:none; } .topbar { border-radius:.8rem;background:var(--card);backdrop-filter:none; } .table thead th { padding-top:.9rem;padding-bottom:.9rem;background:rgba(59,92,204,.035); } .table > :not(caption) > * > * { padding:.85rem .75rem;vertical-align:middle; } .stat-card { border:0;border-left:3px solid var(--primary); } footer.site-footer { margin-top:0;padding-top:4rem;background:#101828; } footer.site-footer h6 { margin-bottom:1rem; } footer.site-footer a { transition:color .2s ease,transform .2s ease;display:inline-block; } footer.site-footer a:hover { transform:translateX(2px); } @media (max-width:1199.98px) { .navbar-sets .nav-link { padding:.5rem .45rem !important;font-size:.86rem; } .preview-float-certificate { left:-1.5rem; } .preview-float-rating { right:-1rem; } } @media (max-width:991.98px) { .navbar-sets .nav-link { padding:.65rem .8rem !important; } .learning-preview { margin-top:2rem; } .preview-float-certificate { left:-.75rem; }.preview-float-rating { right:-.5rem; } .hero-slider { height:590px; } } @media (max-width:575.98px) { .container { --bs-gutter-x:1.35rem; } .learning-preview { margin-inline:.25rem; } .preview-video { height:175px; } .preview-float { display:none; } .preview-metrics div { padding:.5rem .35rem; } .hero .btn-lg { width:100%; } } /* Student learning tracker */ .learning-focus-card { position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem; padding:2rem 2.25rem;border-radius:1.15rem;color:#fff; background:linear-gradient(125deg,#182d72,#3455bf 62%,#4969ca); box-shadow:0 20px 50px rgba(40,70,173,.2); } .learning-focus-card::after { content:'';position:absolute;width:330px;height:330px;border-radius:50%;right:-130px;top:-190px;background:rgba(255,255,255,.08); } .learning-focus-copy,.learning-focus-progress { position:relative;z-index:1; } .learning-focus-copy h3 { max-width:28ch; } .learning-focus-copy p { max-width:42rem; } .learning-focus-eyebrow { display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .7rem;border-radius:99px;background:rgba(255,255,255,.12);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; } .learning-focus-progress { display:flex;align-items:center;gap:1.25rem; } .focus-ring { --size:118px;position:relative;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:conic-gradient(#fff calc(var(--progress) * 1%),rgba(255,255,255,.18) 0); } .focus-ring::before { content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:#314faa; } .focus-ring > div { position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;line-height:1.15; } .focus-ring strong { font-size:1.35rem; }.focus-ring span { font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;opacity:.72; } .focus-lesson-meta { display:flex;flex-direction:column;gap:.65rem;min-width:145px; } .focus-lesson-meta span { display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:rgba(255,255,255,.78); } .focus-lesson-meta i { width:16px;color:#fff; } .learning-timeline { position:relative;display:flex;flex-direction:column; } .learning-timeline::before { content:'';position:absolute;left:16px;top:20px;bottom:20px;width:1px;background:var(--border); } .learning-timeline-item { position:relative;display:flex;gap:.8rem;padding:.7rem 0;color:var(--text); } .learning-timeline-item:hover strong { color:var(--primary); } .timeline-check { position:relative;z-index:1;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#eaf8ef;border:4px solid var(--card);color:#179447;font-size:.62rem; } [data-theme="dark"] .timeline-check { background:#163325; } .learning-timeline-item strong,.learning-timeline-item small { display:block;line-height:1.35; } .learning-timeline-item strong { font-size:.82rem;transition:color .2s ease; }.learning-timeline-item small { margin-top:.2rem;color:var(--muted);font-size:.69rem; } .student-empty-mini { min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:.82rem; } .student-empty-mini i { width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:.8rem;background:rgba(34,197,94,.1);color:#18a04b;font-size:1.1rem; } @media (max-width:991.98px) { .learning-focus-card { grid-template-columns:1fr;padding:1.75rem; } .learning-focus-progress { justify-content:flex-start; } } @media (max-width:575.98px) { .learning-focus-card { padding:1.4rem;gap:1.4rem; } .learning-focus-progress { align-items:flex-start; } .focus-ring { --size:100px; }.focus-ring::before { width:80px;height:80px; } .focus-lesson-meta { min-width:0; } } /* Homepage positioning statement + restored visual stories */ .hero .row { min-height:620px; } .hero-title.hero-title-animate { max-width:14ch;font-size:clamp(3.15rem,5.8vw,5.65rem);line-height:1.03;letter-spacing:-.05em; background:none;color:var(--text);overflow:visible;padding-inline:.04em;text-wrap:balance; } .hero-supporting-title { margin:1.2rem 0 0;color:var(--primary);font-size:.8rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; } .hero-badge { color:var(--secondary-dark);background:rgba(242,139,44,.08);border-color:rgba(242,139,44,.2); } .hero-badge i { color:var(--secondary); } .hero-trust-strip { position:relative;z-index:2;margin-top:-1.25rem; } .hero-trust-grid { display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 16px 45px rgba(16,24,40,.08);overflow:hidden; } .hero-trust-grid > div { display:flex;align-items:center;gap:.85rem;padding:1.2rem 1.25rem;border-right:1px solid var(--border); } .hero-trust-grid > div:last-child { border-right:0; } .hero-trust-grid > div > span { width:42px;height:42px;border-radius:.72rem;display:grid;place-items:center;flex-shrink:0;background:rgba(59,92,204,.09);color:var(--primary); } .hero-trust-grid p,.hero-trust-grid strong,.hero-trust-grid small { display:block;margin:0;line-height:1.3; } .hero-trust-grid strong { font-size:.82rem; }.hero-trust-grid small { margin-top:.18rem;color:var(--muted);font-size:.68rem; } .slider-section-heading { max-width:1180px;margin-inline:auto; } .hero-slider { border:1px solid var(--border); } .hero-slide-text { position:relative;background:var(--card); } .hero-slide-text::before { content:'';position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:3px;background:linear-gradient(var(--primary),var(--secondary)); } .hero-slide-text h2 { font-size:clamp(1.9rem,3vw,2.8rem);letter-spacing:-.04em; } .hero-slide-text p { font-size:1rem;line-height:1.7; } .hero-slide-media::after { background:linear-gradient(90deg,transparent 65%,rgba(16,24,40,.08)); } .hero-slide-reverse .hero-slide-media::after { background:linear-gradient(270deg,transparent 65%,rgba(16,24,40,.08)); } @media (max-width:1199.98px) { .hero .row { min-height:560px; } .hero-title.hero-title-animate { font-size:clamp(3rem,5vw,4.7rem); } .hero-trust-grid { grid-template-columns:repeat(2,1fr); } .hero-trust-grid > div:nth-child(2) { border-right:0; }.hero-trust-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--border); } } @media (max-width:991.98px) { .hero .row { min-height:0; } .hero-title.hero-title-animate { max-width:14ch;font-size:clamp(3rem,10vw,4.75rem); } .hero-trust-strip { margin-top:0; } .hero-slide-text::before { left:1.25rem;right:1.25rem;top:0;bottom:auto;width:auto;height:3px; } } @media (max-width:575.98px) { .hero-title.hero-title-animate { font-size:clamp(2.75rem,13vw,3.75rem);line-height:1.02; } .hero-trust-grid { grid-template-columns:1fr; } .hero-trust-grid > div { border-right:0;border-bottom:1px solid var(--border);padding:1rem; } .hero-trust-grid > div:nth-child(2) { border-bottom:1px solid var(--border); }.hero-trust-grid > div:last-child { border-bottom:0; } .slider-section-heading .btn { width:100%; } } /* Founder authority and book commerce */ .founder-proof-row { display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.25rem; } .founder-proof-row span { display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border:1px solid var(--border);border-radius:.6rem;background:var(--card);font-size:.72rem;color:var(--muted); } .founder-proof-row strong,.founder-proof-row i { color:var(--primary); } .book-admin-cover { width:46px;height:62px;border-radius:.35rem;overflow:hidden;display:grid;place-items:center;background:var(--bg);border:1px solid var(--border);color:var(--primary);flex-shrink:0; } .book-admin-cover img { width:100%;height:100%;object-fit:cover; } .book-detail-hero { position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(59,92,204,.06),transparent); } .book-detail-cover { width:min(330px,80vw);aspect-ratio:3/4;margin:auto;border-radius:.7rem 1.2rem 1.2rem .7rem;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;background:linear-gradient(145deg,var(--primary-dark),var(--primary) 60%,var(--secondary));color:#fff;box-shadow:-12px 14px 0 rgba(16,24,40,.12),0 30px 65px rgba(16,24,40,.22);transform:perspective(900px) rotateY(7deg); } .book-detail-cover img { width:100%;height:100%;object-fit:cover; } .book-detail-cover iframe { width:100%;height:100%;border:0;background:#fff;pointer-events:none; } .book-detail-cover i { font-size:3rem;opacity:.8; }.book-detail-cover strong { font-size:1.35rem; } .book-purchase-panel { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem;margin-top:1.8rem;padding:1.2rem;border:1px solid var(--border);border-radius:1rem;background:var(--card);box-shadow:var(--shadow); } .related-course-note { display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding:.9rem 1rem;border-radius:.8rem;background:rgba(59,92,204,.07); } .related-course-note>i { color:var(--primary);font-size:1.25rem; }.related-course-note div { flex:1; }.related-course-note strong,.related-course-note span { display:block; }.related-course-note span { color:var(--muted);font-size:.78rem; }.related-course-note a { font-size:.78rem;font-weight:700; } .book-preview-frame { max-width:950px;height:720px;margin:auto;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:#525659;box-shadow:0 25px 60px rgba(16,24,40,.14); } .book-preview-frame iframe { width:100%;height:100%;border:0; } .order-status-box { display:flex;align-items:flex-start;gap:1rem;padding:1.2rem;border-radius:.85rem;background:var(--bg);border:1px solid var(--border); } .order-status-box>i { width:44px;height:44px;border-radius:.7rem;display:grid;place-items:center;background:rgba(59,92,204,.1);color:var(--primary); } @media(max-width:767.98px){.book-preview-frame{height:560px}.book-purchase-panel .btn{width:100%}.related-course-note{align-items:flex-start;flex-wrap:wrap}.related-course-note a{width:100%;padding-left:2.05rem}} /* SETS identity and future-skills positioning */ .sets-identity-section { position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg),rgba(59,92,204,.045)); } .sets-identity-card { position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:2rem;align-items:stretch;padding:clamp(1.5rem,4vw,3.5rem);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:1.5rem;background:linear-gradient(125deg,#101b3f 0%,#263f91 62%,#345ac8 100%);box-shadow:0 28px 70px rgba(18,35,82,.2);color:#fff; } .sets-identity-card::before { content:'';position:absolute;width:410px;height:410px;right:-145px;top:-245px;border-radius:50%;background:rgba(255,255,255,.08); } .sets-identity-card::after { content:'';position:absolute;width:240px;height:240px;left:36%;bottom:-190px;border-radius:50%;background:rgba(242,139,44,.18);filter:blur(4px); } .sets-identity-copy,.identity-founder { position:relative;z-index:1; } .sets-since { display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.15rem;padding:.48rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:99px;background:rgba(255,255,255,.1);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; } .sets-since::before { content:'';width:7px;height:7px;border-radius:50%;background:#ffad54;box-shadow:0 0 0 5px rgba(242,139,44,.14); } .sets-identity-copy h2 { max-width:16ch;margin-bottom:1rem;color:#fff;font-size:clamp(2.25rem,4.4vw,4.5rem);line-height:1.02;letter-spacing:-.055em;text-wrap:balance; } .sets-identity-copy>p { max-width:690px;margin:0;color:rgba(255,255,255,.76);font-size:clamp(.95rem,1.35vw,1.08rem);line-height:1.75; } .identity-pillars { display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem; } .identity-pillars span { display:inline-flex;align-items:center;gap:.5rem;padding:.62rem .78rem;border:1px solid rgba(255,255,255,.17);border-radius:.72rem;background:rgba(255,255,255,.08);font-size:.76rem;font-weight:700; } .identity-pillars i { color:#ffad54; } .identity-founder { display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:1.5rem;border:1px solid rgba(255,255,255,.17);border-radius:1.15rem;background:rgba(255,255,255,.1);backdrop-filter:blur(12px); } .identity-founder-photo { width:160px;height:190px;margin-bottom:1.2rem;overflow:hidden;display:grid;place-items:center;border:3px solid rgba(255,255,255,.75);border-radius:1.15rem;background:linear-gradient(145deg,#f28b2c,#ffb35e);box-shadow:0 18px 38px rgba(0,0,0,.24);color:#fff;font-size:2rem;font-weight:800; } .identity-founder-photo img { width:100%;height:100%;object-fit:cover; } .identity-founder small { color:#ffbd76;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; } .identity-founder h3 { margin:.4rem 0 .2rem;color:#fff;font-size:1.45rem; } .identity-founder p { margin:0 0 1rem;color:rgba(255,255,255,.68);font-size:.78rem; } .identity-founder a { color:#fff;font-size:.75rem;font-weight:700;text-decoration:none; } .identity-founder a:hover { color:#ffbd76; } @media(max-width:991.98px){.sets-identity-card{grid-template-columns:1fr}.identity-founder{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}.identity-founder-photo{grid-row:1/5;margin:0}.identity-founder p{margin-bottom:.55rem}} @media(max-width:575.98px){.sets-identity-card{padding:1.3rem;border-radius:1.1rem}.sets-identity-copy h2{font-size:2.35rem}.identity-pillars{display:grid}.identity-founder{display:flex;align-items:flex-start}.identity-founder-photo{width:130px;height:155px;margin-bottom:.85rem}} /* Premium two-book showcase */ .books-showcase-section { position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg),rgba(46,75,214,.055),var(--bg)); } .books-showcase-section::before { content:'';position:absolute;width:430px;height:430px;left:-260px;top:12%;border-radius:50%;background:rgba(46,75,214,.08);filter:blur(10px); } .books-showcase-heading { position:relative;z-index:1; } .books-showcase-heading h2 { max-width:780px;margin-inline:auto;font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.045em;text-wrap:balance; } .books-showcase-heading p { max-width:760px;font-size:1.02rem;line-height:1.75; } .books-premium-grid { position:relative;z-index:1;display:grid;gap:2rem; } .premium-book-card { display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);align-items:center;min-height:440px;padding:clamp(1.35rem,3vw,2.6rem);border:1px solid var(--border);border-radius:1.5rem;background:var(--card);box-shadow:0 24px 65px rgba(15,23,42,.1);overflow:hidden; } .premium-book-card:nth-child(even) { grid-template-columns:minmax(0,1.28fr) minmax(250px,.72fr); } .premium-book-card:nth-child(even) .premium-book-visual { order:2; } .premium-book-visual { position:relative;min-height:360px;display:grid;place-items:center; } .premium-book-cover { position:relative;width:230px;height:320px;overflow:hidden;border-radius:.45rem 1rem 1rem .45rem;transform:perspective(900px) rotateY(7deg);box-shadow:-10px 12px 0 rgba(15,23,42,.1),0 25px 45px rgba(15,23,42,.23);transition:transform .4s ease; } .premium-book-card:hover .premium-book-cover { transform:perspective(900px) rotateY(2deg) translateY(-7px); } .premium-book-cover img,.premium-book-cover iframe { width:100%;height:100%;object-fit:cover;border:0;display:block; } .premium-book-cover iframe { pointer-events:none;background:#fff; } .premium-book-cover-copy { height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;color:#fff;background:linear-gradient(145deg,#17255b,#3155c6 64%,#1b2e70); } .premium-book-orange .premium-book-cover-copy { background:linear-gradient(145deg,#712f0e,#e77b20 62%,#263d98); } .premium-book-cover-copy::before { content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.13),transparent 36%); } .premium-book-cover-copy i { margin-bottom:auto;font-size:2.4rem;opacity:.9; }.premium-book-cover-copy small { font-weight:800;letter-spacing:.16em;opacity:.72; }.premium-book-cover-copy strong { margin:.4rem 0;font-size:1.5rem;line-height:1.12; }.premium-book-cover-copy span { font-size:.78rem;opacity:.75; } .premium-book-edition { position:absolute;right:5%;bottom:4%;padding:.55rem .7rem;border-radius:.6rem;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.18);color:#178344;font-size:.7rem;font-weight:800; } .premium-book-content { padding:1rem clamp(.5rem,3vw,2rem); }.premium-book-kicker { color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }.premium-book-orange .premium-book-kicker { color:var(--secondary-dark); } .premium-book-content h3 { margin:.55rem 0 .65rem;font-size:clamp(1.65rem,3vw,2.55rem);letter-spacing:-.04em; }.premium-book-author { color:var(--muted);font-size:.82rem; }.premium-book-author i { color:var(--secondary); } .premium-book-content>p.text-secondary { max-width:620px;line-height:1.75; }.premium-book-benefits { display:flex;flex-wrap:wrap;gap:.55rem;margin:1.25rem 0; }.premium-book-benefits span { padding:.5rem .65rem;border-radius:.55rem;background:var(--bg);border:1px solid var(--border);font-size:.7rem;font-weight:700; }.premium-book-benefits i { color:#1c9a4c;margin-right:.3rem; } .premium-book-actions { display:flex;align-items:center;flex-wrap:wrap;gap:1rem; }.premium-book-actions>span { color:var(--muted);font-size:.72rem; }.premium-book-actions>span i { color:var(--primary); } .premium-page-strip { display:flex;gap:.55rem;margin:1.25rem 0; }.premium-page-strip a { width:58px;height:76px;overflow:hidden;border:2px solid #fff;border-radius:.45rem;background:#fff;box-shadow:0 5px 14px rgba(15,23,42,.16);transition:transform .2s ease; }.premium-page-strip a:hover { transform:translateY(-4px) rotate(-1deg); }.premium-page-strip img { width:100%;height:100%;object-fit:cover;object-position:top; } .book-pages-showcase { background:linear-gradient(180deg,rgba(46,75,214,.055),transparent); }.book-page-gallery { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;align-items:start; }.book-page-shot { position:relative;display:block;padding:.45rem;border-radius:.9rem;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.15);transition:transform .3s ease; }.book-page-shot:nth-child(even){margin-top:2rem}.book-page-shot:hover{transform:translateY(-8px)}.book-page-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:.55rem}.book-page-shot span{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;justify-content:space-between;padding:.48rem .65rem;border-radius:.5rem;background:rgba(15,23,42,.82);color:#fff;font-size:.7rem;font-weight:700;backdrop-filter:blur(8px)} .book-preview-admin-thumb{height:125px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--border);border-radius:.55rem;background:var(--bg);color:var(--muted);font-weight:800}.book-preview-admin-thumb img{width:100%;height:100%;object-fit:cover;object-position:top} @media(max-width:767.98px){.book-page-gallery{grid-template-columns:repeat(2,1fr);gap:.75rem}.book-page-shot:nth-child(even){margin-top:1rem}} /* Clean public books catalogue */ .books-catalog{background:linear-gradient(180deg,rgba(46,75,214,.045),transparent)} .books-catalog-grid{display:grid;gap:2.2rem;max-width:1120px;margin:auto} .catalog-book-card{display:grid;grid-template-columns:360px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.25rem,3vw,2.5rem);border:1px solid var(--border);border-radius:1.5rem;background:var(--card);box-shadow:0 25px 65px rgba(15,23,42,.11)} .catalog-book-card:nth-child(even){grid-template-columns:minmax(0,1fr) 360px}.catalog-book-card:nth-child(even) .catalog-book-cover{order:2} .catalog-book-cover{position:relative;display:block;height:470px;overflow:hidden;border-radius:.85rem;background:#fff;box-shadow:0 22px 48px rgba(15,23,42,.22);transition:transform .3s ease}.catalog-book-cover:hover{transform:translateY(-7px)} .catalog-book-cover>img{width:100%;height:100%;object-fit:cover;object-position:top}.catalog-cover-fallback{height:100%;display:grid;place-items:center;padding:2rem;text-align:center;background:linear-gradient(145deg,var(--primary-dark),var(--primary));color:#fff}.catalog-cover-fallback i{font-size:3rem}.catalog-cover-fallback span{font-size:1.5rem;font-weight:800} .catalog-look-inside{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border-radius:.6rem;background:rgba(15,23,42,.86);color:#fff;font-size:.72rem;font-weight:800;backdrop-filter:blur(10px)} .catalog-book-copy{min-width:0}.catalog-book-title{display:block;color:var(--text)}.catalog-book-title:hover{color:var(--primary)}.catalog-book-title h2{margin:0 0 .65rem;font-size:clamp(1.75rem,3.2vw,2.8rem);line-height:1.12;letter-spacing:-.04em;overflow-wrap:anywhere}.catalog-author{color:var(--muted);font-size:.82rem}.catalog-author i{color:var(--secondary)}.catalog-description{max-width:620px;line-height:1.75} .catalog-page-peek{display:flex;gap:.5rem;margin:1.35rem 0}.catalog-page-peek img{width:58px;height:76px;object-fit:cover;object-position:top;border:2px solid #fff;border-radius:.4rem;box-shadow:0 5px 14px rgba(15,23,42,.16)} .catalog-book-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}.catalog-book-footer>strong{font-size:1.35rem;color:var(--primary)} @media(max-width:991.98px){.catalog-book-card,.catalog-book-card:nth-child(even){grid-template-columns:280px minmax(0,1fr)}.catalog-book-card:nth-child(even) .catalog-book-cover{order:0}.catalog-book-cover{height:390px}} @media(max-width:767.98px){.catalog-book-card,.catalog-book-card:nth-child(even){grid-template-columns:1fr}.catalog-book-cover{width:min(330px,100%);height:auto;aspect-ratio:3/4;margin:auto}.catalog-book-footer{align-items:stretch;flex-direction:column}.catalog-book-footer .btn{width:100%}} @media(max-width:767.98px){.premium-book-card,.premium-book-card:nth-child(even){grid-template-columns:1fr}.premium-book-card:nth-child(even) .premium-book-visual{order:0}.premium-book-cover{width:210px;height:292px}.premium-book-content{padding:.5rem 0}.premium-book-actions .btn{width:100%}.founder-photo-frame{height:420px}} /* Wide brand logo and branded loading screen */ .navbar-sets { min-height:92px; } .brand-logo-nav { width:auto;height:240px;max-width:min(990px,100%);object-fit:contain; } .site-loader { position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#17295f 0,#0d1735 48%,#080e20 100%);opacity:1;visibility:visible;transition:opacity .45s ease,visibility .45s ease; } .site-loader.is-hidden { opacity:0;visibility:hidden;pointer-events:none; } .site-loader-inner { width:min(560px,86vw);display:flex;flex-direction:column;align-items:center;gap:1.35rem;animation:loaderLogoIn .7s cubic-bezier(.22,1,.36,1) both; } .site-loader-logo { display:block;width:min(520px,82vw);height:auto;max-height:230px;object-fit:contain;filter:drop-shadow(0 16px 35px rgba(0,0,0,.32)); } .site-loader-line { position:relative;width:min(300px,60vw);height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.15); } .site-loader-line::after { content:'';position:absolute;inset:0;width:42%;border-radius:inherit;background:linear-gradient(90deg,#2e68f0,#f7941e);animation:loaderSweep 1.05s ease-in-out infinite; } @keyframes loaderLogoIn { from{opacity:0;transform:scale(.88) translateY(10px)} to{opacity:1;transform:none} } @keyframes loaderSweep { from{transform:translateX(-120%)} to{transform:translateX(340%)} } @media(max-width:1199.98px){.brand-logo-nav{height:204px;max-width:min(810px,100%)}.navbar-sets{min-height:80px}} @media(max-width:575.98px){.brand-logo-nav{height:174px;max-width:min(660px,100%)}.navbar-sets{min-height:70px}.site-loader-logo{width:88vw}} @media(prefers-reduced-motion:reduce){.site-loader-inner,.site-loader-line::after{animation:none}} /* Allow the enlarged logo and navigation to wrap without overlap. */ .navbar-sets > .container { flex-wrap:wrap; } .navbar-brand-lockup { max-width:100%;flex-wrap:wrap; } .navbar-brand-identity { min-width:0;max-width:100%; } @media(min-width:992px){.navbar-sets .navbar-collapse{flex-basis:100%;}}