/* ===================================================================== Learnify — Modern Design System ===================================================================== */ :root { /* Brand colours. Admin → Settings → Appearance overrides these on every page (partials/theme). */ --lf-primary: #4f46e5; --lf-primary-rgb: 79,70,229; --lf-primary-2: #7c3aed; --lf-primary-2-rgb: 124,58,237; --lf-primary-dark: #4338ca; --lf-primary-mid: color-mix(in srgb, var(--lf-primary) 50%, var(--lf-primary-2)); --bs-primary: var(--lf-primary); --bs-primary-rgb: var(--lf-primary-rgb); --bs-link-color: var(--lf-primary); --bs-link-color-rgb: var(--lf-primary-rgb); --bs-link-hover-color: var(--lf-primary-dark); --bs-link-hover-color-rgb: var(--lf-primary-rgb); --lf-ink: #0f172a; --lf-muted: #64748b; --lf-bg: #f7f8fc; --lf-card: #ffffff; --lf-border: #eceef3; --lf-radius: 16px; --lf-radius-lg: 22px; --lf-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05); --lf-shadow: 0 10px 34px rgba(15,23,42,.07); --lf-shadow-lg: 0 24px 60px rgba(var(--lf-primary-rgb),.16); --lf-grad: linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-2) 100%); --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } body { font-family: var(--bs-body-font-family); color: var(--lf-ink); background-color: var(--lf-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold { font-weight: 700; letter-spacing: -0.02em; } /* Website templates (public/css/templates/*.css) set --lf-font-heading on ; the default inherits the body face. */ h1, h2, h3, h4, h5, h6 { font-family: var(--lf-font-heading, inherit); } .display-1, .display-2, .display-3, .display-4, .display-5 { font-weight: 800; letter-spacing: -0.035em; } a { text-decoration: none; } :focus-visible { outline: 3px solid var(--lf-primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ---------- Buttons ---------- */ .btn { font-weight: 600; border-radius: 12px; padding: .6rem 1.3rem; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn-lg { padding: .85rem 1.8rem; border-radius: 14px; } .btn-sm { border-radius: 9px; padding: .4rem .85rem; } .btn-primary, .bg-primary { background-color: var(--lf-primary) !important; border-color: var(--lf-primary) !important; } .btn-primary { background-image: var(--lf-grad); border: 0 !important; box-shadow: 0 8px 20px rgba(var(--lf-primary-rgb),.28); } .btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--lf-primary-rgb),.38); background-image: var(--lf-grad); } .btn-light { box-shadow: 0 6px 18px rgba(15,23,42,.08); border: 0; } .btn-light:hover { transform: translateY(-2px); } .text-primary { color: var(--lf-primary) !important; } .btn-outline-primary { color: var(--lf-primary); border-color: var(--lf-primary); border-width: 1.5px; } .btn-outline-primary:hover { background-color: var(--lf-primary); border-color: var(--lf-primary); transform: translateY(-2px); } .btn-outline-light:hover { transform: translateY(-2px); } /* ---------- Cards ---------- */ .card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); box-shadow: var(--lf-shadow-sm); } .shadow-sm { box-shadow: var(--lf-shadow-sm) !important; } .shadow, .shadow-lg { box-shadow: var(--lf-shadow) !important; } .rounded-4 { border-radius: var(--lf-radius-lg) !important; } /* ---------- Brand ---------- */ .navbar-brand { font-weight: 800; letter-spacing: -0.03em; } .brand-logo { color: var(--lf-primary); } /* ---------- Storefront header ---------- */ /* Utility strip above the header — only templates that ask for one render it (partials/frontend/topbar). */ .lf-topstrip { background: #0f172a; color: #cbd5e1; font-size: .8rem; } .lf-topstrip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; } .lf-topstrip-contact, .lf-topstrip-links { display: flex; align-items: center; gap: 1.25rem; } .lf-topstrip a { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; opacity: .85; transition: opacity .15s ease; } .lf-topstrip a:hover { opacity: 1; color: #fff; } .lf-topstrip-cta { font-weight: 700; } .lf-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } /* Only once the page has moved does the bar separate itself from the hero. */ .lf-header.is-scrolled { border-bottom-color: var(--bs-border-color); box-shadow: 0 6px 24px rgba(15,23,42,.06); } .lf-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .lf-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: 0 0 auto; } .lf-brand img { height: 34px; width: auto; max-width: 180px; object-fit: contain; } /* Uploaded logos (Admin → Settings → General). The light/dark pair swaps with the theme toggle. */ .lf-logo-dark { display: none; } [data-bs-theme="dark"] .lf-logo-light { display: none; } [data-bs-theme="dark"] .lf-logo-dark { display: inline-block; } .lf-auth-logo { max-height: 40px; max-width: 200px; width: auto; object-fit: contain; } .lf-logo-knockout { filter: brightness(0) invert(1); } /* no dark logo uploaded: knock the light one out to white */ .lf-footer-logo img { max-height: 40px; max-width: 200px; width: auto; object-fit: contain; } .lf-site-logo { max-height: 34px; max-width: 180px; width: auto; object-fit: contain; vertical-align: middle; } .lf-brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--lf-grad); color: #fff; font-size: 1.05rem; } .lf-brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.12rem; color: var(--bs-emphasis-color); } .lf-nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: .5rem; } .lf-nav-link { padding: .5rem .8rem; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--bs-secondary-color); text-decoration: none; transition: color .15s ease, background .15s ease; } .lf-nav-link:hover { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); } .lf-nav-link.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .10); } .lf-header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; min-width: 0; } /* When the bar gets tight the search box gives way; the chips (EN · USD, the user's name) never break onto two lines. */ .lf-header-actions .lf-searchbox { flex: 0 1 210px; min-width: 130px; } .lf-header-actions .lf-searchbox:focus-within { flex-basis: 300px; } .lf-nav-btn-text, .lf-user-name { white-space: nowrap; } .lf-nav { flex: 0 0 auto; } /* Search: a pill that grows when it has focus. */ .lf-searchbox { display: flex; align-items: center; gap: .5rem; background: var(--bs-tertiary-bg); border: 1px solid transparent; border-radius: 999px; padding: .4rem .7rem .4rem .85rem; width: 210px; transition: width .18s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .lf-searchbox:focus-within { width: 300px; background: var(--bs-body-bg); border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14); } .lf-searchbox i { color: var(--bs-secondary-color); font-size: .9rem; } .lf-searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: .9rem; color: var(--bs-body-color); } .lf-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; } .lf-searchbox kbd { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 6px; color: var(--bs-secondary-color); font-size: .68rem; padding: .05rem .35rem; line-height: 1.4; } .lf-searchbox:focus-within kbd { display: none; } /* Public demo: "Home ▾" lists the website templates as homepage styles (partials/frontend/demo-menu). ONE background on the group — the link and the caret are transparent inside it — so it reads as a single pill. */ .lf-nav-demos { position: relative; display: inline-flex; align-items: stretch; border-radius: 10px; transition: background .15s ease; } .lf-nav-demos .lf-nav-link, .lf-nav-demos .lf-nav-link.is-active { background: transparent; border-radius: 0; padding-inline-end: .3rem; } .lf-nav-caret { display: inline-grid; place-items: center; align-self: stretch; padding: 0 .5rem 0 .1rem; border: 0; border-radius: 0; background: transparent; color: var(--bs-secondary-color); font-size: .7rem; transition: color .15s ease, transform .15s ease; } .lf-nav-demos:hover, .lf-nav-demos:has(.lf-nav-caret[aria-expanded="true"]) { background: var(--bs-tertiary-bg); } .lf-nav-demos:hover .lf-nav-link, .lf-nav-demos:hover .lf-nav-caret, .lf-nav-caret[aria-expanded="true"] { color: var(--bs-emphasis-color); } .lf-nav-demos.is-active, .lf-nav-demos.is-active:hover { background: rgba(var(--bs-primary-rgb), .10); } .lf-nav-demos.is-active .lf-nav-link, .lf-nav-demos.is-active .lf-nav-caret, .lf-nav-demos.is-active:hover .lf-nav-link, .lf-nav-demos.is-active:hover .lf-nav-caret { color: var(--bs-primary); } .lf-nav-demos:hover .lf-nav-caret i, .lf-nav-caret[aria-expanded="true"] i { transform: translateY(1px); } .lf-demo-menu { min-width: 260px; padding: .4rem; border-radius: 14px; margin-top: .35rem !important; } /* Positioned by CSS, not Popper (the toggle is data-bs-display="static"), so hover and click open it in the same place: directly under "Home". Without this an absolutely-positioned child of the flex group sits at its static position — vertically centred on the link. */ .lf-nav-demos > .lf-demo-menu { top: 100%; inset-inline-start: 0; inset-inline-end: auto; bottom: auto; } /* Hover opens on a mouse; Bootstrap's toggle still handles touch and keyboard. */ @media (hover: hover) and (min-width: 992px) { .lf-nav-demos:hover > .lf-demo-menu { display: block; } .lf-nav-demos::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; } /* bridge the gap so the menu does not close on the way down */ } .lf-demo-menu-head { display: flex; flex-direction: column; padding: .45rem .6rem .35rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); } .lf-demo-menu-head span { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .72rem; } .lf-demo-item { display: flex; align-items: center; gap: .7rem; border-radius: 9px; padding: .5rem .6rem; } .lf-demo-item.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); } .lf-demo-item.is-active small { color: var(--bs-primary) !important; opacity: .8; } .lf-demo-swatch { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .lf-chip .lf-demo-swatch { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; margin-inline-end: .35rem; vertical-align: -2px; } .lf-drawer-demos .lf-chip { display: inline-flex; align-items: center; } /* Icon buttons in the header cluster. */ .lf-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 38px; height: 38px; padding: 0 .55rem; border: 0; border-radius: 11px; background: transparent; color: var(--bs-secondary-color); font-size: 1rem; font-weight: 600; text-decoration: none; transition: color .15s ease, background .15s ease; } .lf-nav-btn:hover, .lf-nav-btn:focus-visible, .lf-nav-btn[aria-expanded="true"] { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); } .lf-nav-btn-text { font-size: .8rem; letter-spacing: .01em; } .lf-cart { position: relative; } .lf-cart-count { position: absolute; top: 3px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bs-body-bg); } /* Auth buttons: a quiet one and a loud one. */ .lf-btn-ghost, .lf-btn-solid { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 1rem; border-radius: 11px; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .lf-btn-ghost { color: var(--bs-emphasis-color); background: transparent; border: 1px solid var(--bs-border-color); } .lf-btn-ghost:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } .lf-btn-solid { color: #fff; border: 0; background: var(--lf-grad); box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .28); } .lf-btn-solid:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--bs-primary-rgb), .34); } /* Signed-in chip. */ .lf-user { display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .5rem 0 .35rem; border: 0; border-radius: 999px; background: transparent; color: var(--bs-emphasis-color); font-weight: 600; font-size: .88rem; } .lf-user:hover, .lf-user[aria-expanded="true"] { background: var(--bs-tertiary-bg); } .lf-user img { border-radius: 50%; object-fit: cover; } .lf-user i { font-size: .7rem; color: var(--bs-secondary-color); } .lf-user-menu { min-width: 250px; padding: .4rem; border-radius: 14px; } .lf-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 9px; padding: .5rem .6rem; } .lf-user-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; } .lf-user-head img { border-radius: 50%; object-fit: cover; } /* Language + currency menu. */ .lf-region-menu { min-width: 240px; border-radius: 14px; overflow: hidden; } .lf-region-sec { padding: .4rem; } .lf-region-sec + .lf-region-sec { border-top: 1px solid var(--bs-border-color); } .lf-region-head { padding: .35rem .6rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); } .lf-region-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px; background: transparent; color: var(--bs-body-color); font-size: .88rem; text-align: start; } .lf-region-item:hover { background: var(--bs-tertiary-bg); } .lf-region-item.is-active { color: var(--bs-primary); font-weight: 600; background: rgba(var(--bs-primary-rgb), .08); } .lf-region-code { font-weight: 700; } /* Inline variant used inside the drawer. */ .lf-region-group + .lf-region-group { margin-top: .9rem; } .lf-region-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-bottom: .4rem; } .lf-region-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .lf-chip { border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 600; } .lf-chip.is-active { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); } /* Mobile drawer. */ .lf-drawer { width: min(340px, 88vw); } .lf-drawer .offcanvas-header { border-bottom: 1px solid var(--bs-border-color); } .lf-drawer .lf-searchbox { width: 100%; } .lf-drawer .lf-searchbox:focus-within { width: 100%; } .lf-drawer-nav { display: flex; flex-direction: column; gap: .1rem; } .lf-drawer-nav a { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: 10px; color: var(--bs-body-color); font-weight: 600; font-size: .95rem; text-decoration: none; } .lf-drawer-nav a:hover { background: var(--bs-tertiary-bg); } .lf-drawer-nav a.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .10); } .lf-drawer-foot { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; } /* Laptop widths: the desktop nav is still shown, so trim what can be trimmed rather than let the bar overflow. */ @media (max-width: 1399.98px) { .lf-user-name { display: none; } /* avatar + caret; the name is in the menu head */ .lf-header-actions .lf-searchbox { flex-basis: 170px; } } @media (max-width: 1199.98px) { .lf-header-inner { gap: .6rem; } .lf-nav { margin-inline-start: 0; gap: 0; } .lf-nav-link { padding: .5rem .55rem; font-size: .88rem; } .lf-header-actions { gap: .2rem; } .lf-header-actions .lf-searchbox { flex-basis: 140px; min-width: 120px; } } @media (max-width: 991.98px) { .lf-header-inner { min-height: 60px; gap: .5rem; } .lf-searchbox { width: 180px; } .lf-searchbox:focus-within { width: 220px; } } @media (max-width: 575.98px) { .lf-brand-name { display: none; } } /* Rounded pill input, used by the newsletter form. */ .lf-search { background: var(--bs-tertiary-bg); border: 1px solid transparent; border-radius: 999px; } .lf-search:focus { background: var(--bs-body-bg); border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14); } /* ---------- Hero ---------- */ .hero { position: relative; color: #fff; background: radial-gradient(60% 80% at 85% 10%, rgba(var(--lf-primary-2-rgb),.55) 0%, transparent 60%), radial-gradient(50% 70% at 10% 90%, rgba(56,189,248,.35) 0%, transparent 55%), linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%); overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 22px 22px; opacity: .4; pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); border-radius: 999px; } /* Hero v2 — aurora orbs, glass search, social proof, floating course card */ .hero--v2 { --hero-ink: #fff; isolation: isolate; } .hero--v2::after { opacity: .28; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; animation: lfOrb 14s ease-in-out infinite alternate; } .hero-orb--a { width: 560px; height: 560px; right: -140px; top: -220px; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(var(--lf-primary-2-rgb),.0) 65%); } .hero-orb--b { width: 460px; height: 460px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(56,189,248,.6), transparent 65%); animation-delay: -7s; } .hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); } @keyframes lfOrb { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px,30px,0) scale(1.12); } } .hero-badge--live { box-shadow: 0 8px 24px rgba(0,0,0,.12); } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: lfPulse 1.8s ease-out infinite; } @keyframes lfPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.65); } 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } } .hero-title { line-height: 1.05; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; } .hero-hl { position: relative; color: #fde68a; white-space: nowrap; } .hero-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .32em; z-index: -1; border-radius: 4px; background: rgba(253,230,138,.16); transform: skewX(-8deg); } .hero-lede { color: rgba(255,255,255,.78); max-width: 560px; font-size: 1.15rem; } .hero-search { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); box-shadow: 0 22px 50px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.12); max-width: 560px; align-items: center; transition: box-shadow .2s, transform .2s; } .hero-search:focus-within { box-shadow: 0 26px 60px rgba(0,0,0,.28), 0 0 0 6px rgba(255,255,255,.22); transform: translateY(-1px); } .hero-search-ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lf-primary); font-size: 1.05rem; flex: 0 0 40px; margin-left: .35rem; } .hero-search .form-control { box-shadow: none; padding-left: .25rem; font-size: 1rem; } .hero-search .btn { box-shadow: 0 8px 20px rgba(var(--lf-primary-rgb),.35); } .hero-chip { display: inline-flex; align-items: center; padding: .28rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); transition: background .15s, transform .15s; } .hero-chip:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-1px); } .hero-faces { align-items: center; } .hero-faces img, .hero-face-more { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.9); object-fit: cover; margin-left: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .hero-faces img:first-child { margin-left: 0; } .hero-face-more { display: grid; place-items: center; background: #0f172a; color: #fff; font-size: .68rem; font-weight: 800; } .hero-stars { color: #fbbf24; letter-spacing: -1px; } .hero-stat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); } .hero-visual { position: relative; padding: 28px 24px 52px; perspective: 1400px; } .hero-glow { position: absolute; inset: 10% 8%; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); filter: blur(30px); } .hero-card { position: relative; display: block; width: min(420px, 100%); margin: 0 auto; background: #fff; color: var(--lf-ink); border-radius: 24px; padding: 10px; box-shadow: 0 40px 90px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.35) inset; transform: rotateY(-10deg) rotateX(4deg) rotate(1.5deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; animation: lfFloat 7s ease-in-out infinite; } .hero-card:hover { transform: rotateY(0) rotateX(0) rotate(0) translateY(-6px); box-shadow: 0 50px 100px rgba(0,0,0,.4); } .hero-card-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; } .hero-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; } .hero-card:hover .hero-card-media img { transform: scale(1.04); } .hero-card-pill { position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,.92); color: var(--lf-primary); font-weight: 700; font-size: .72rem; padding: .28rem .65rem; border-radius: 999px; backdrop-filter: blur(4px); } .hero-card-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: var(--lf-primary); background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(0,0,0,.28); padding-left: 4px; } .hero-card-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: lfRing 2.2s ease-out infinite; } @keyframes lfRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } .hero-card-body { padding: .9rem .6rem .5rem; } .hero-card-rating { color: #f59e0b; font-weight: 700; } .hero-card-title { font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero-card-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .hero-card-price { font-weight: 800; color: var(--lf-primary); font-size: 1.05rem; } .hero-float { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem .7rem .7rem; border-radius: 18px; color: var(--lf-ink); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 44px rgba(0,0,0,.22); animation: lfFloat 6s ease-in-out infinite; } .hero-float--tr { top: 0; right: -6px; animation-delay: -2s; } .hero-float--bl { bottom: 22px; left: -10px; animation-delay: -4s; } .hero-float--br { bottom: -6px; right: -2px; animation-delay: -1s; } .hero-float-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: var(--lf-grad); box-shadow: 0 8px 18px rgba(var(--lf-primary-rgb),.35); } .hero-float-ico--green { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 8px 18px rgba(16,185,129,.35); } .hero-float-ring { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--lf-primary); background: conic-gradient(var(--lf-primary) calc(var(--p) * 1%), rgba(var(--lf-primary-rgb),.12) 0); } .hero-float-ring span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; } @keyframes lfFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @media (prefers-reduced-motion: reduce) { .hero-card, .hero-float, .hero-orb, .hero-dot, .hero-card-play::before { animation: none; } } [data-bs-theme="dark"] .hero-card, [data-bs-theme="dark"] .hero-float, [data-bs-theme="dark"] .hero-float-ring span { background: #131c31; color: #e2e8f0; border-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .hero-float .text-muted, [data-bs-theme="dark"] .hero-card .text-muted { color: #8b95ab !important; } [data-bs-theme="dark"] .hero-search { background: rgba(19,28,49,.94); } [data-bs-theme="dark"] .hero-search .form-control { color: #e2e8f0 !important; } /* Hero layouts (Admin → Homepage → Hero → Layout) */ .hero-card--flat { transform: none; animation: none; width: 100%; box-shadow: 0 18px 44px rgba(0,0,0,.18); } .hero-card--flat:hover { transform: translateY(-4px); } .hero-card--sm { width: 100%; padding: 8px; border-radius: 20px; animation: none; } .hero-card--sm .hero-card-media { border-radius: 14px; } .hero-card--sm .hero-card-body { padding: .7rem .4rem .3rem; } .hero-card--sm .hero-card-title { font-size: .95rem; } .hero-card--sm .hero-card-play { width: 46px; height: 46px; font-size: 1.3rem; } /* Centered: three cards fanned out, the middle one lifted */ .hero--centered .container { padding-bottom: 0 !important; } .hero-showcase { display: flex; justify-content: center; align-items: flex-end; gap: 1.25rem; margin: 3rem auto 0; max-width: 1040px; perspective: 1600px; position: relative; z-index: 1; } .hero-showcase .hero-card { flex: 1 1 0; max-width: 340px; transform-style: preserve-3d; } .hero-showcase .hero-card--n1 { transform: rotateY(14deg) translateY(28px); } .hero-showcase .hero-card--n2 { transform: translateY(0) scale(1.06); z-index: 2; box-shadow: 0 46px 90px rgba(0,0,0,.4); } .hero-showcase .hero-card--n3 { transform: rotateY(-14deg) translateY(28px); } .hero-showcase .hero-card:hover { transform: translateY(-8px) scale(1.06); z-index: 3; } .hero-statbar { position: relative; z-index: 2; margin-top: 3.5rem; padding: 1.4rem 0; background: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); } .hero-statbar .hero-stats { gap: 2.5rem 4rem !important; } @media (max-width: 767.98px) { .hero-statbar { margin-top: 2rem; } } /* Photo: full-bleed image with a dark-to-brand shade and a glass panel */ .hero--photo { background: #0f172a; } .hero--photo::after { display: none; } .hero-photo-bg { position: absolute; inset: 0; background: var(--hero-photo) center / cover no-repeat; transform: scale(1.04); animation: lfKen 24s ease-in-out infinite alternate; } @keyframes lfKen { to { transform: scale(1.12) translate(-1.5%, -1%); } } .hero-photo-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.72) 45%, rgba(var(--lf-primary-rgb),.35) 100%), linear-gradient(0deg, rgba(15,23,42,.6) 0%, transparent 40%); } .hero--photo .hero-lede { color: rgba(255,255,255,.72); } .hero-glass { padding: 1.25rem; border-radius: 28px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.35); color: #fff; } .hero-glass-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .4rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .74rem; font-weight: 600; text-align: center; } .hero-glass-tile i { font-size: 1.15rem; color: #fde68a; } /* Bento: light surface, gradient headline, tile grid */ .hero--bento { color: var(--lf-ink); background: radial-gradient(60% 70% at 90% 0%, rgba(var(--lf-primary-2-rgb),.16) 0%, transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(56,189,248,.14) 0%, transparent 55%), var(--lf-bg); } .hero--bento::after { background-image: radial-gradient(rgba(var(--lf-primary-rgb),.16) 1px, transparent 1px); opacity: .5; } .hero--bento .hero-orb { opacity: .35; } .hero--bento .hero-orb--a { background: radial-gradient(circle, rgba(var(--lf-primary-2-rgb),.5), transparent 65%); } .hero--bento .hero-badge { background: rgba(var(--lf-primary-rgb),.08); border-color: rgba(var(--lf-primary-rgb),.18); color: var(--lf-primary); box-shadow: none; } .hero--bento .hero-title { color: var(--lf-ink); } .hero--bento .hero-hl { color: transparent; background: var(--lf-grad); -webkit-background-clip: text; background-clip: text; } .hero--bento .hero-hl::after { background: rgba(var(--lf-primary-rgb),.14); } .hero--bento .hero-lede { color: var(--lf-muted); } .hero--bento .hero-search { box-shadow: 0 18px 44px rgba(var(--lf-primary-rgb),.16), 0 0 0 1px var(--lf-border); } .hero--bento .hero-chip { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); border-color: rgba(var(--lf-primary-rgb),.16); } .hero--bento .hero-chip:hover { background: rgba(var(--lf-primary-rgb),.16); color: var(--lf-primary); } .hero--bento .hero-faces img, .hero--bento .hero-faces .hero-face-more { border-color: var(--lf-card); } .hero--bento .opacity-75 { color: var(--lf-muted); opacity: 1 !important; } .hero-bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto auto; gap: .9rem; } .hero-bento-tile { position: relative; overflow: hidden; padding: 1.1rem; border-radius: 20px; background: var(--lf-card); border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow-sm); transition: transform .2s, box-shadow .2s; } .hero-bento-tile:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); } .hero-bento-tile--course { grid-row: 1 / 3; padding: 0; border: 0; background: transparent; box-shadow: none; } .hero-bento-tile--course:hover { transform: none; box-shadow: none; } .hero-bento-tile--grad { grid-column: 2 / 4; color: #fff; background: var(--lf-grad); border: 0; box-shadow: 0 16px 34px rgba(var(--lf-primary-rgb),.3); } .hero-bento-tile--wide { grid-column: 1 / 4; } .hero-bento-tile--grad .opacity-75 { color: rgba(255,255,255,.82); } .hero-bento-bg { position: absolute; right: -10px; bottom: -18px; font-size: 6rem; opacity: .16; } .hero--bento .hero-card { border: 1px solid var(--lf-border); } [data-bs-theme="dark"] .hero--bento { background: radial-gradient(60% 70% at 90% 0%, rgba(var(--lf-primary-2-rgb),.22) 0%, transparent 60%), #0b1120; } [data-bs-theme="dark"] .hero--bento .hero-search { box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px var(--lf-border); } /* ---------- Section helpers ---------- */ .section { padding: 5rem 0; } .eyebrow { color: var(--lf-primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; } .text-gradient { background: var(--lf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Category tiles ---------- */ .category-tile { background:#fff; border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 1.25rem; transition: transform .15s, box-shadow .15s, border-color .15s; height: 100%; } .category-tile:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); border-color: transparent; } .category-ico { width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 1.4rem; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); } /* ---------- Course card ---------- */ .course-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; background: var(--lf-card); } .course-card:hover { transform: translateY(-6px); box-shadow: var(--lf-shadow-lg); } .course-thumb-wrap { position: relative; overflow: hidden; } .course-thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .4s ease; } .course-card:hover .course-thumb { transform: scale(1.06); } .course-cat-pill { position:absolute; top:.7rem; left:.7rem; background: rgba(255,255,255,.92); color: var(--lf-primary); font-weight:600; font-size:.72rem; padding:.25rem .6rem; border-radius:999px; backdrop-filter: blur(4px); } .price-pill { font-weight: 800; color: var(--lf-ink); } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Avatars / misc ---------- */ .avatar-ring { padding: 3px; background: var(--lf-grad); border-radius: 50%; } .avatar-ring img { border: 2px solid #fff; border-radius: 50%; } .stat-bubble { font-weight: 800; } /* ===================================================================== PANEL (dashboard / admin / instructor / student) — modern shell ===================================================================== */ :root { --lf-sb-w: 268px; --lf-sb-w-min: 78px; --lf-sb-bg: linear-gradient(180deg, #0f172a 0%, #111a33 100%); --lf-sb-text: #b7c0d3; --lf-topbar-h: 68px; --lf-input-border: #dfe3ec; } html.lf-sb-collapsed { --lf-sb-w: var(--lf-sb-w-min); } body.lf-panel { background: var(--lf-bg); color: var(--lf-ink); } /* Sidebar */ .lf-sidebar { width: var(--lf-sb-w); height: 100vh; position: fixed; top: 0; left: 0; z-index: 1040; background: var(--lf-sb-bg); color: #fff; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.06); transition: width .2s ease, transform .22s ease; } [dir="rtl"] .lf-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid rgba(255,255,255,.06); } .lf-sb-brand { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.25rem .9rem; color: #fff; min-height: var(--lf-topbar-h); } .lf-sb-brand .lf-brand-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--lf-grad); display: grid; place-items: center; font-size: 1.25rem; box-shadow: 0 10px 24px rgba(var(--lf-primary-rgb),.45); } .lf-sb-brand .lf-brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; white-space: nowrap; color: #fff; } .lf-sb-brand img { max-height: 36px; max-width: 170px; } .lf-sb-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } .lf-sb-scroll::-webkit-scrollbar { width: 6px; } .lf-sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; } .lf-sidebar .sidebar-heading { color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 1.1rem .75rem .35rem; white-space: nowrap; } .lf-sidebar .nav { display: block; } .lf-sidebar .nav li { list-style: none; } .lf-sidebar .nav-link { display: flex; align-items: center; gap: .65rem; color: var(--lf-sb-text); border-radius: 12px; padding: .58rem .75rem; margin: .1rem 0; font-size: .92rem; font-weight: 500; white-space: nowrap; position: relative; transition: background .15s, color .15s; } .lf-sidebar .nav-link i { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; font-size: 1.02rem; background: rgba(255,255,255,.04); transition: background .15s, color .15s; } .lf-sidebar .nav-link:hover, .lf-sidebar .nav-link:focus-visible { background: rgba(255,255,255,.06); color: #fff; } .lf-sidebar .nav-link:hover i { background: rgba(255,255,255,.1); } .lf-sidebar .nav-link.active { background: var(--lf-grad); color: #fff; box-shadow: 0 10px 24px rgba(var(--lf-primary-rgb),.35); } .lf-sidebar .nav-link.active i { background: rgba(255,255,255,.18); } .lf-sidebar .nav-link .lf-nav-badge { margin-left: auto; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.14); border-radius: 999px; padding: .12rem .5rem; } .lf-sb-user { border-top: 1px solid rgba(255,255,255,.07); padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; } .lf-sb-user img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: 0 0 40px; } .lf-sb-user .lf-sb-user-name { font-weight: 700; font-size: .9rem; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .lf-sb-user .lf-sb-user-role { font-size: .72rem; color: #8b95ab; text-transform: capitalize; } .lf-sb-user .lf-icon-btn { color: #8b95ab; background: transparent; margin-left: auto; } .lf-sb-user .lf-icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); } /* Sidebar styles (Admin → Settings → Appearance) */ html[data-lf-sidebar="primary"] { --lf-sb-bg: linear-gradient(180deg, var(--lf-primary-dark) 0%, var(--lf-primary-2) 100%); --lf-sb-text: rgba(255,255,255,.82); } html[data-lf-sidebar="primary"] .lf-sidebar .sidebar-heading { color: rgba(255,255,255,.55); } html[data-lf-sidebar="primary"] .lf-sidebar .nav-link.active { background: rgba(255,255,255,.16); box-shadow: none; } html[data-lf-sidebar="primary"] .lf-sb-user .lf-sb-user-role, html[data-lf-sidebar="primary"] .lf-sb-user .lf-icon-btn { color: rgba(255,255,255,.7); } html[data-lf-sidebar="light"] { --lf-sb-bg: var(--lf-card); --lf-sb-text: #475569; } html[data-lf-sidebar="light"] .lf-sidebar { color: var(--lf-ink); border-right-color: var(--lf-border); } html[data-lf-sidebar="light"][dir="rtl"] .lf-sidebar { border-left-color: var(--lf-border); } html[data-lf-sidebar="light"] .lf-sb-brand, html[data-lf-sidebar="light"] .lf-sb-brand .lf-brand-name, html[data-lf-sidebar="light"] .lf-sb-user .lf-sb-user-name { color: var(--lf-ink); } html[data-lf-sidebar="light"] .lf-sb-brand .lf-logo-dark { display: none; } html[data-lf-sidebar="light"] .lf-sb-brand .lf-logo-light { display: inline-block; } html[data-lf-sidebar="light"] .lf-sidebar .sidebar-heading { color: #94a3b8; } html[data-lf-sidebar="light"] .lf-sidebar .nav-link i { background: rgba(var(--lf-primary-rgb),.06); } html[data-lf-sidebar="light"] .lf-sidebar .nav-link:hover, html[data-lf-sidebar="light"] .lf-sidebar .nav-link:focus-visible { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); } html[data-lf-sidebar="light"] .lf-sidebar .nav-link:hover i { background: rgba(var(--lf-primary-rgb),.12); } html[data-lf-sidebar="light"] .lf-sidebar .nav-link .lf-nav-badge { background: rgba(var(--lf-primary-rgb),.12); color: var(--lf-primary); } html[data-lf-sidebar="light"] .lf-sidebar .nav-link.active .lf-nav-badge { background: rgba(255,255,255,.2); color: #fff; } html[data-lf-sidebar="light"] .lf-sb-user { border-top-color: var(--lf-border); } html[data-lf-sidebar="light"] .lf-sb-user .lf-sb-user-role, html[data-lf-sidebar="light"] .lf-sb-user .lf-icon-btn { color: var(--lf-muted); } html[data-lf-sidebar="light"] .lf-sb-user .lf-icon-btn:hover { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); } html[data-lf-sidebar="light"] .lf-sb-scroll { scrollbar-color: rgba(15,23,42,.18) transparent; } html[data-lf-sidebar="light"] .lf-sb-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); } html[data-lf-sidebar="light"].lf-sb-collapsed .lf-sidebar .sidebar-heading::before { background: var(--lf-border); } [data-bs-theme="dark"] html[data-lf-sidebar="light"], html[data-lf-sidebar="light"][data-bs-theme="dark"] { --lf-sb-bg: #131c31; --lf-sb-text: #b7c0d3; } /* Collapsed (desktop) */ @media (min-width: 992px) { html.lf-sb-collapsed .lf-sidebar .lf-nav-text, html.lf-sb-collapsed .lf-sidebar .sidebar-heading, html.lf-sb-collapsed .lf-sidebar .lf-brand-name, html.lf-sb-collapsed .lf-sidebar .lf-nav-badge, html.lf-sb-collapsed .lf-sb-user > div, html.lf-sb-collapsed .lf-sb-user .lf-icon-btn { display: none; } html.lf-sb-collapsed .lf-sidebar .nav-link { justify-content: center; padding: .55rem 0; } html.lf-sb-collapsed .lf-sb-brand { justify-content: center; padding-left: 0; padding-right: 0; } html.lf-sb-collapsed .lf-sb-user { justify-content: center; } html.lf-sb-collapsed .lf-sidebar .sidebar-heading + li { margin-top: .6rem; } html.lf-sb-collapsed .lf-sidebar .sidebar-heading::before { content: ""; display: block; height: 1px; background: rgba(255,255,255,.08); margin: 0 .5rem; } html.lf-sb-collapsed .lf-sidebar .sidebar-heading { display: block; padding: .5rem 0; font-size: 0; } html.lf-sb-collapsed .lf-sidebar .nav-link .lf-nav-text { display: none; } } .lf-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 1035; display: none; } @media (max-width: 991.98px) { .lf-sidebar { transform: translateX(-100%); width: 280px; box-shadow: 0 0 60px rgba(0,0,0,.4); } [dir="rtl"] .lf-sidebar { transform: translateX(100%); } .lf-sidebar.show { transform: translateX(0); } .lf-sidebar.show ~ .lf-sidebar-backdrop { display: block; } .lf-content { margin-left: 0 !important; margin-right: 0 !important; } } /* Content + topbar */ .lf-content { margin-left: var(--lf-sb-w); min-height: 100vh; transition: margin .2s ease; } [dir="rtl"] .lf-content { margin-left: 0; margin-right: var(--lf-sb-w); } .lf-topbar { position: sticky; top: 0; z-index: 1020; min-height: var(--lf-topbar-h); display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--lf-border); } .lf-topbar .lf-page-title h1 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.2; } .lf-crumbs { font-size: .74rem; color: var(--lf-muted); display: flex; align-items: center; gap: .35rem; } .lf-crumbs a { color: var(--lf-muted); } .lf-crumbs a:hover { color: var(--lf-primary); } .lf-icon-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #475569; font-size: 1.1rem; position: relative; transition: background .15s, color .15s, transform .15s; text-decoration: none; padding: 0; } .lf-icon-btn:hover { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); } /* Bootstrap Icons vary in how much of the em box they fill; pin the glyph box so every topbar control reads as the same size. */ .lf-icon-btn > .bi { font-size: 1.1rem; line-height: 1; display: block; } .lf-icon-btn .lf-dot { position: absolute; top: 8px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; } .lf-topbar .btn-light.border { background: #f1f3f9; border-color: transparent !important; box-shadow: none; border-radius: 10px; font-weight: 600; } .lf-topsearch { display: flex; align-items: center; gap: .5rem; background: #f1f3f9; border: 1px solid transparent; border-radius: 12px; padding: .35rem .5rem .35rem .85rem; width: 300px; transition: all .15s; } .lf-topsearch:focus-within { background: #fff; border-color: var(--lf-primary); box-shadow: 0 0 0 .2rem rgba(var(--lf-primary-rgb),.12); } .lf-topsearch input { border: 0; background: transparent; outline: none; flex: 1; font-size: .9rem; color: var(--lf-ink); min-width: 0; } .lf-topsearch i { color: var(--lf-muted); } .lf-topsearch kbd { font-size: .68rem; background: #fff; border: 1px solid var(--lf-input-border); color: var(--lf-muted); border-radius: 6px; padding: .1rem .4rem; } .lf-user-chip { display: flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .3rem; border-radius: 12px; color: inherit; } .lf-user-chip:hover { background: rgba(var(--lf-primary-rgb),.08); } .lf-user-chip img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; } .lf-user-chip .name { font-weight: 700; font-size: .86rem; line-height: 1.1; } .lf-user-chip .role { font-size: .7rem; color: var(--lf-muted); text-transform: capitalize; } .lf-page { padding: 1.5rem 1.25rem 3rem; } @media (min-width: 992px) { .lf-page { padding: 1.75rem 1.75rem 3rem; } .lf-topbar { padding: .6rem 1.75rem; } } .lf-page > .lf-alerts .alert { margin-bottom: 1.25rem; } /* Panel components (scoped) */ body.lf-panel .card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); box-shadow: var(--lf-shadow-sm); background: var(--lf-card); } body.lf-panel .card.border-0 { border: 1px solid var(--lf-border) !important; } body.lf-panel .card-header { background: transparent !important; border-bottom: 1px solid var(--lf-border); padding: .95rem 1.25rem; font-weight: 700; letter-spacing: -.01em; } body.lf-panel .card-header:first-child { border-radius: var(--lf-radius) var(--lf-radius) 0 0; } body.lf-panel .card-footer { background: transparent; border-top: 1px solid var(--lf-border); } body.lf-panel .card-body { padding: 1.25rem; } body.lf-panel .card > .table-responsive:last-child, body.lf-panel .card > .list-group:last-child { border-radius: 0 0 var(--lf-radius) var(--lf-radius); overflow: hidden; } body.lf-panel .card > .table-responsive:first-child { border-radius: var(--lf-radius) var(--lf-radius) 0 0; } body.lf-panel .table { --bs-table-border-color: var(--lf-border); margin-bottom: 0; } body.lf-panel .table > thead th, body.lf-panel .table-light th, body.lf-panel .table > :not(caption) > * > th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lf-muted); font-weight: 700; border-bottom-width: 1px; background: #f7f8fc; padding: .8rem 1rem; white-space: nowrap; } body.lf-panel .table-light { --bs-table-bg: #f7f8fc; --bs-table-color: var(--lf-muted); } body.lf-panel .table > tbody > tr > td { padding: .85rem 1rem; vertical-align: middle; } body.lf-panel .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(var(--lf-primary-rgb),.035); } body.lf-panel .table tbody tr:last-child td { border-bottom: 0; } body.lf-panel .badge { border-radius: 999px; font-weight: 600; padding: .38em .72em; letter-spacing: .01em; } body.lf-panel .badge.bg-primary { background: rgba(var(--lf-primary-rgb),.12) !important; color: var(--lf-primary) !important; } body.lf-panel .badge.bg-success { background: rgba(16,185,129,.14) !important; color: #047857 !important; } body.lf-panel .badge.bg-warning { background: rgba(245,158,11,.16) !important; color: #b45309 !important; } body.lf-panel .badge.bg-danger { background: rgba(239,68,68,.13) !important; color: #b91c1c !important; } body.lf-panel .badge.bg-info { background: rgba(14,165,233,.14) !important; color: #0369a1 !important; } body.lf-panel .badge.bg-secondary { background: rgba(100,116,139,.14) !important; color: #475569 !important; } body.lf-panel .badge.bg-dark { background: rgba(15,23,42,.9) !important; color: #fff !important; } body.lf-panel .badge.bg-light { background: #f1f3f9 !important; color: #334155 !important; } body.lf-panel .badge.text-dark { color: #334155; } body.lf-panel .form-control, body.lf-panel .form-select { border-radius: 11px; border-color: var(--lf-input-border); padding: .58rem .9rem; font-size: .93rem; } body.lf-panel .form-control-sm, body.lf-panel .form-select-sm { padding: .38rem .7rem; border-radius: 9px; font-size: .85rem; } body.lf-panel .form-control:focus, body.lf-panel .form-select:focus { border-color: var(--lf-primary); box-shadow: 0 0 0 .22rem rgba(var(--lf-primary-rgb),.12); } body.lf-panel .form-label { font-weight: 600; font-size: .86rem; color: #334155; margin-bottom: .4rem; } body.lf-panel .form-text { font-size: .78rem; } body.lf-panel .input-group-text { border-radius: 11px; border-color: var(--lf-input-border); background: #f7f8fc; } body.lf-panel .form-check-input { border-color: #c7cddb; } body.lf-panel .form-check-input:checked { background-color: var(--lf-primary); border-color: var(--lf-primary); } body.lf-panel .form-switch .form-check-input { width: 2.4em; height: 1.3em; } body.lf-panel .btn-light { background: #f1f3f9; border: 1px solid transparent; color: #334155; box-shadow: none; } body.lf-panel .btn-light:hover { background: #e6e9f2; transform: none; color: var(--lf-ink); } body.lf-panel .btn-outline-secondary { border-color: var(--lf-input-border); color: #475569; } body.lf-panel .btn-outline-secondary:hover { background: #f1f3f9; color: var(--lf-ink); border-color: var(--lf-input-border); } body.lf-panel .btn-primary:hover { transform: translateY(-1px); } body.lf-panel .btn-success { background: #10b981; border-color: #10b981; } body.lf-panel .btn-danger { background: #ef4444; border-color: #ef4444; } body.lf-panel .btn-group-sm > .btn, body.lf-panel .btn-sm { border-radius: 9px; } body.lf-panel .list-group-item { border-color: var(--lf-border); padding: .9rem 1.25rem; background: transparent; } body.lf-panel .list-group-item-action:hover { background: rgba(var(--lf-primary-rgb),.035); } body.lf-panel .nav-tabs { border-bottom: 1px solid var(--lf-border); gap: .25rem; } body.lf-panel .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--lf-muted); font-weight: 600; padding: .65rem 1rem; border-radius: 0; margin-bottom: -1px; } body.lf-panel .nav-tabs .nav-link:hover { color: var(--lf-ink); } body.lf-panel .nav-tabs .nav-link.active { color: var(--lf-primary); border-bottom-color: var(--lf-primary); background: transparent; } body.lf-panel .card-header-tabs { margin: -.95rem -1.25rem -.96rem; padding: 0 1rem; } body.lf-panel .nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: #475569; padding: .5rem .95rem; } body.lf-panel .nav-pills .nav-link:hover { background: rgba(var(--lf-primary-rgb),.07); color: var(--lf-primary); } body.lf-panel .nav-pills .nav-link.active { background: var(--lf-grad); color: #fff; box-shadow: 0 8px 18px rgba(var(--lf-primary-rgb),.28); } body.lf-panel .pagination { gap: .3rem; } body.lf-panel .page-link { border-radius: 10px !important; border-color: var(--lf-border); color: #475569; font-weight: 600; min-width: 38px; text-align: center; } body.lf-panel .page-item.active .page-link { background: var(--lf-grad); border-color: transparent; color: #fff; } body.lf-panel .alert { border: 0; border-radius: 14px; padding: .9rem 1.1rem; font-weight: 500; } body.lf-panel .alert-success { background: rgba(16,185,129,.12); color: #047857; } body.lf-panel .alert-danger { background: rgba(239,68,68,.1); color: #b91c1c; } body.lf-panel .alert-info { background: rgba(14,165,233,.12); color: #0369a1; } body.lf-panel .alert-warning { background: rgba(245,158,11,.14); color: #b45309; } body.lf-panel .alert-light { background: var(--lf-card); border: 1px dashed var(--lf-input-border) !important; color: var(--lf-muted); } body.lf-panel .dropdown-menu { border-radius: 14px; border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow); padding: .4rem; } body.lf-panel .dropdown-item { border-radius: 9px; padding: .5rem .75rem; font-weight: 500; font-size: .9rem; } body.lf-panel .dropdown-item:hover, body.lf-panel .dropdown-item:focus { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); } body.lf-panel .dropdown-item.active { background: var(--lf-grad); } body.lf-panel .modal-content { border: 0; border-radius: 20px; box-shadow: var(--lf-shadow-lg); } body.lf-panel .modal-header, body.lf-panel .modal-footer { border-color: var(--lf-border); } body.lf-panel .progress { height: 8px; border-radius: 999px; background: rgba(var(--lf-primary-rgb),.1); } body.lf-panel .progress-bar { background: var(--lf-grad); border-radius: 999px; } body.lf-panel .progress-bar.bg-success { background: #10b981 !important; } body.lf-panel .accordion-item { border-color: var(--lf-border); } body.lf-panel .accordion-button { font-weight: 600; } body.lf-panel .accordion-button:not(.collapsed) { background: rgba(var(--lf-primary-rgb),.06); color: var(--lf-primary); box-shadow: none; } body.lf-panel h5.mb-0, body.lf-panel .h5 { letter-spacing: -.02em; } body.lf-panel .text-muted { color: var(--lf-muted) !important; } body.lf-panel .bg-light:not(.badge):not(.alert) { background-color: #f7f8fc !important; } body.lf-panel .border-0.shadow-sm { box-shadow: var(--lf-shadow-sm) !important; } body.lf-panel .object-fit-cover, body.lf-panel img.rounded { object-fit: cover; } body.lf-panel .table img.rounded { border-radius: 8px !important; } /* Stat tiles */ .stat-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); } .stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--lf-primary-rgb),.08), transparent 70%); pointer-events: none; } .stat-card .stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .stat-card .stat-label { color: var(--lf-muted); font-size: .8rem; font-weight: 600; } .stat-card .stat-trend { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .15rem .5rem; } .stat-card .stat-trend.up { background: rgba(16,185,129,.14); color: #047857; } .stat-card .stat-trend.down { background: rgba(239,68,68,.12); color: #b91c1c; } .stat-card .stat-trend.flat { background: #f1f3f9; color: var(--lf-muted); } .stat-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 15px; font-size: 1.35rem; flex: 0 0 52px; } .stat-icon.bg-primary { background: var(--lf-grad) !important; color: #fff !important; box-shadow: 0 10px 22px rgba(var(--lf-primary-rgb),.3); } .stat-icon.bg-success { background: linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(16,185,129,.28); } .stat-icon.bg-warning { background: linear-gradient(135deg,#f59e0b,#f97316) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(245,158,11,.28); } .stat-icon.bg-info { background: linear-gradient(135deg,#0ea5e9,#6366f1) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(14,165,233,.28); } .stat-icon.bg-danger { background: linear-gradient(135deg,#ef4444,#ec4899) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(239,68,68,.28); } .stat-icon.bg-secondary, .stat-icon.bg-dark { background: linear-gradient(135deg,#334155,#0f172a) !important; color:#fff !important; } .stat-icon.bg-opacity-10 { opacity: 1; } /* Welcome / hero band inside panel */ .lf-welcome { position: relative; overflow: hidden; border-radius: var(--lf-radius-lg); color: #fff; padding: 1.75rem 1.75rem; background: radial-gradient(70% 90% at 90% 0%, rgba(var(--lf-primary-2-rgb),.6) 0%, transparent 60%), radial-gradient(50% 70% at 5% 100%, rgba(56,189,248,.35) 0%, transparent 55%), linear-gradient(135deg, var(--lf-primary-dark) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%); box-shadow: var(--lf-shadow-lg); } .lf-welcome::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 20px 20px; opacity: .35; pointer-events: none; } .lf-welcome > * { position: relative; z-index: 1; } .lf-welcome .btn-light { background: #fff; color: var(--lf-primary); border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.15); } .lf-welcome .btn-light:hover { background: #fff; transform: translateY(-2px); } .lf-welcome .btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; } .lf-welcome .btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; } .lf-welcome .lf-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .25rem .75rem; font-size: .78rem; font-weight: 600; backdrop-filter: blur(6px); } @media (max-width: 767.98px) { .lf-welcome { padding: 1.35rem 1.25rem; } .lf-welcome h2 { font-size: 1.3rem; } } @media (max-width: 575.98px) { .lf-welcome { padding: 1.15rem 1rem; } .lf-welcome h2 { font-size: 1.15rem; } .lf-welcome p.opacity-75 { font-size: .85rem; } /* Quick actions share the row evenly instead of trailing off into a lone button on its own line. */ .lf-welcome .d-flex.flex-wrap.gap-2 .btn { flex: 1 1 auto; font-size: .8rem; } /* The three stat pills get squeezed hardest — shrink type and padding so longer values (currency amounts) don't clip or force a second line. */ .lf-welcome .row.g-2.text-center .h4 { font-size: 1rem; } .lf-welcome .row.g-2.text-center .rounded-4 { padding: .6rem .35rem !important; } .lf-welcome .row.g-2.text-center .small { font-size: .66rem; } } .lf-ring { --p: 0; --size: 92px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.22) 0); } .lf-ring > span { width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); border-radius: 50%; background: rgba(67,56,202,.85); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; } /* Misc panel helpers */ .lf-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .lf-section-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: .5rem; } .lf-empty { text-align: center; color: var(--lf-muted); padding: 2.5rem 1rem; } .lf-empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: #c7cddb; } .lf-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; } .lf-avatar-sm { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; } .lf-course-mini { display: flex; gap: .85rem; align-items: center; } .lf-course-mini img { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 84px; } /* The enrollment badge must never shrink below its own number — otherwise a longer count (e.g. "1,532") gets squeezed narrower than its text and the overflow spills past the card's rounded-corner clip instead of wrapping. */ .lf-course-mini .badge { flex-shrink: 0; } .lf-kpi-chart { height: 280px; } .lf-timeline { position: relative; padding-left: 1.25rem; } .lf-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--lf-border); } .lf-timeline-item { position: relative; padding-bottom: 1rem; } .lf-timeline-item::before { content: ""; position: absolute; left: -1.25rem; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--lf-grad); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(var(--lf-primary-rgb),.2); } .lf-soft-primary { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); } .lf-soft-success { background: rgba(16,185,129,.12); color: #047857; } .lf-soft-warning { background: rgba(245,158,11,.14); color: #b45309; } .lf-soft-info { background: rgba(14,165,233,.12); color: #0369a1; } .lf-soft-danger { background: rgba(239,68,68,.1); color: #b91c1c; } .lf-ico-tile { width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 1.15rem; flex: 0 0 42px; } .lf-course-progress-card { border-radius: var(--lf-radius); overflow: hidden; border: 1px solid var(--lf-border); background: var(--lf-card); transition: transform .15s, box-shadow .15s; height: 100%; display: flex; flex-direction: column; } .lf-course-progress-card:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); } .lf-course-progress-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } /* Auth pages */ .lf-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .lf-auth { grid-template-columns: minmax(380px, 46%) 1fr; } } .lf-auth-side { position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(60% 80% at 85% 10%, rgba(var(--lf-primary-2-rgb),.55) 0%, transparent 60%), radial-gradient(50% 70% at 10% 90%, rgba(56,189,248,.35) 0%, transparent 55%), linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%); } .lf-auth-side::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; opacity: .4; pointer-events: none; } .lf-auth-side > * { position: relative; z-index: 1; } .lf-auth-feature { display: flex; gap: .9rem; align-items: flex-start; } .lf-auth-feature i { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-size: 1.15rem; } .lf-auth-quote { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 1.25rem; backdrop-filter: blur(8px); } .lf-auth-main { display: flex; flex-direction: column; padding: 1.5rem; } .lf-auth-card { width: 100%; max-width: 460px; margin: auto; } .lf-auth-card .form-control, .lf-auth-card .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: var(--lf-input-border); font-size: .95rem; } .lf-auth-card .form-control:focus, .lf-auth-card .form-select:focus { border-color: var(--lf-primary); box-shadow: 0 0 0 .22rem rgba(var(--lf-primary-rgb),.12); } .lf-auth-card .form-label { font-weight: 600; font-size: .86rem; } .lf-auth-card .btn-lg { padding: .8rem 1.4rem; border-radius: 13px; } .lf-pass-wrap { position: relative; } .lf-pass-wrap .form-control { padding-right: 3rem; } .lf-pass-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--lf-muted); padding: .3rem; } .lf-role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .lf-role-pick label { border: 1.5px solid var(--lf-input-border); border-radius: 14px; padding: .9rem; cursor: pointer; transition: all .15s; display: flex; gap: .75rem; align-items: center; } .lf-role-pick label i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); font-size: 1.1rem; flex: 0 0 38px; } .lf-role-pick input { display: none; } .lf-role-pick input:checked + label { border-color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); box-shadow: 0 0 0 3px rgba(var(--lf-primary-rgb),.12); } .lf-demo-chip { border: 1px dashed var(--lf-input-border); background: transparent; border-radius: 999px; padding: .25rem .7rem; font-size: .75rem; font-weight: 600; color: #475569; transition: all .15s; } .lf-demo-chip:hover { border-color: var(--lf-primary); color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.06); } /* ---------- Animations ---------- */ @keyframes lfFadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none; } } .lf-fade-up { animation: lfFadeUp .6s ease both; } /* ---------- Dark mode ---------- */ [data-bs-theme="dark"] { --lf-bg: #0b1120; --lf-card: #131c31; --lf-ink: #e2e8f0; --lf-border: #24304a; } [data-bs-theme="dark"] body.bg-light, [data-bs-theme="dark"] .bg-light { background-color: #0b1120 !important; color: #e2e8f0; } [data-bs-theme="dark"] .lf-topbar { background: #131c31 !important; border-color: #24304a !important; } [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .navbar.bg-white { background-color: #131c31 !important; } [data-bs-theme="dark"] .card { background-color: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .category-tile { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .text-dark { color: #e2e8f0 !important; } [data-bs-theme="dark"] .table { --bs-table-bg: #131c31; --bs-table-color: #e2e8f0; } [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border { border-color: #24304a !important; } [data-bs-theme="dark"] .course-cat-pill { background: rgba(19,28,49,.9); } /* ---------- Dark mode: panel ---------- */ [data-bs-theme="dark"] { --lf-input-border: #2b3650; --lf-muted: #8b95ab; --lf-sb-bg: linear-gradient(180deg, #0a1020 0%, #0d1428 100%); } [data-bs-theme="dark"] body.lf-panel { background: #0b1120; color: #e2e8f0; } [data-bs-theme="dark"] .lf-topbar { background: rgba(19,28,49,.85) !important; border-color: #24304a !important; } [data-bs-theme="dark"] .lf-icon-btn { color: #cbd5e1; } [data-bs-theme="dark"] .lf-icon-btn .lf-dot { border-color: #131c31; } [data-bs-theme="dark"] .lf-topsearch, [data-bs-theme="dark"] .lf-topbar .btn-light.border { background: #0b1120; color: #e2e8f0; } [data-bs-theme="dark"] .lf-topsearch:focus-within { background: #0b1120; } [data-bs-theme="dark"] .lf-topsearch kbd { background: #131c31; border-color: #2b3650; } [data-bs-theme="dark"] .lf-topbar .lf-page-title h1 { color: #f1f5f9; } [data-bs-theme="dark"] body.lf-panel .card-header { border-color: #24304a; } [data-bs-theme="dark"] body.lf-panel .table > thead th, [data-bs-theme="dark"] body.lf-panel .table > :not(caption) > * > th { background: #0f172a; color: #8b95ab; } [data-bs-theme="dark"] body.lf-panel .table-light { --bs-table-bg: #0f172a; } [data-bs-theme="dark"] body.lf-panel .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255,255,255,.03); } [data-bs-theme="dark"] body.lf-panel .badge.bg-success { color: #34d399 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-warning { color: #fbbf24 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-danger { color: #f87171 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-info { color: #38bdf8 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-primary { color: #a5b4fc !important; background: rgba(129,140,248,.18) !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-secondary { color: #cbd5e1 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-light { background: #1e293b !important; color: #e2e8f0 !important; } [data-bs-theme="dark"] body.lf-panel .badge.text-dark { color: #e2e8f0 !important; } [data-bs-theme="dark"] body.lf-panel .form-label { color: #cbd5e1; } [data-bs-theme="dark"] body.lf-panel .input-group-text { background: #0f172a; } [data-bs-theme="dark"] body.lf-panel .btn-light { background: #1e293b; color: #e2e8f0; } [data-bs-theme="dark"] body.lf-panel .btn-light:hover { background: #273449; color: #fff; } [data-bs-theme="dark"] body.lf-panel .btn-outline-secondary { color: #cbd5e1; } [data-bs-theme="dark"] body.lf-panel .btn-outline-secondary:hover { background: #1e293b; } [data-bs-theme="dark"] body.lf-panel .bg-light:not(.badge):not(.alert) { background-color: #0f172a !important; } [data-bs-theme="dark"] body.lf-panel .alert-success { color: #34d399; } [data-bs-theme="dark"] body.lf-panel .alert-danger { color: #f87171; } [data-bs-theme="dark"] body.lf-panel .alert-info { color: #38bdf8; } [data-bs-theme="dark"] body.lf-panel .alert-warning { color: #fbbf24; } [data-bs-theme="dark"] body.lf-panel .alert-light { background: #131c31; } [data-bs-theme="dark"] body.lf-panel .nav-pills .nav-link { color: #cbd5e1; } [data-bs-theme="dark"] body.lf-panel .page-link { background: #131c31; color: #cbd5e1; border-color: #24304a; } [data-bs-theme="dark"] body.lf-panel .list-group-item { color: #e2e8f0; border-color: #24304a; } [data-bs-theme="dark"] body.lf-panel .dropdown-menu { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] body.lf-panel .dropdown-item { color: #e2e8f0; } [data-bs-theme="dark"] body.lf-panel .modal-content { background: #131c31; } [data-bs-theme="dark"] body.lf-panel .progress { background: rgba(129,140,248,.15); } [data-bs-theme="dark"] .stat-card::after { background: radial-gradient(circle, rgba(129,140,248,.12), transparent 70%); } [data-bs-theme="dark"] .stat-card .stat-trend.flat { background: #1e293b; } [data-bs-theme="dark"] .lf-empty i { color: #334155; } [data-bs-theme="dark"] .lf-timeline-item::before { border-color: #131c31; } [data-bs-theme="dark"] .lf-course-progress-card { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .lf-soft-primary { background: rgba(129,140,248,.16); color: #a5b4fc; } [data-bs-theme="dark"] .lf-soft-success { color: #34d399; } [data-bs-theme="dark"] .lf-soft-warning { color: #fbbf24; } [data-bs-theme="dark"] .lf-soft-info { color: #38bdf8; } [data-bs-theme="dark"] .lf-soft-danger { color: #f87171; } [data-bs-theme="dark"] .lf-user-chip .name { color: #f1f5f9; } [data-bs-theme="dark"] .lf-demo-chip { color: #cbd5e1; } [data-bs-theme="dark"] .lf-role-pick label { border-color: #2b3650; } [data-bs-theme="dark"] body.lf-panel .card-header.bg-white, [data-bs-theme="dark"] body.lf-panel .bg-white { background-color: transparent !important; } [data-bs-theme="dark"] body.lf-panel .text-dark { color: #e2e8f0 !important; } [data-bs-theme="dark"] .lf-auth-main { background: #0b1120; } /* ===================================================================== HOMEPAGE — section system Every homepage section renders inside .lf-sec. Admins pick the surface (page / surface / tint / dark) and the spacing per section from Admin > Homepage, so the page rhythm is editable without code. ===================================================================== */ .lf-sec { position: relative; padding: 5.5rem 0; } .lf-sec--compact { padding: 3.25rem 0; } .lf-sec--roomy { padding: 7.5rem 0; } .lf-sec--surface { background: var(--lf-card); } .lf-sec--tint { background: linear-gradient(180deg, rgba(var(--lf-primary-rgb),.05) 0%, rgba(var(--lf-primary-2-rgb),.03) 100%); } .lf-sec--dark { background: #0f172a; color: #e2e8f0; } .lf-sec--dark .text-muted { color: #94a3b8 !important; } .lf-sec--dark .lf-sec-title, .lf-sec--dark h2, .lf-sec--dark h3, .lf-sec--dark h5, .lf-sec--dark h6 { color: #f8fafc; } .lf-sec--dark .card, .lf-sec--dark .lf-tile { background: #172033; border-color: #24304a; } /* Hairline between two same-coloured sections so the page never looks like one long slab. */ .lf-sec + .lf-sec:not(.lf-sec--dark)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1140px, 90%); height: 1px; background: var(--lf-border); opacity: .8; } .lf-sec--surface + .lf-sec--surface::before, .lf-sec--tint + .lf-sec--tint::before { opacity: 1; } .lf-sec--surface + .lf-sec:not(.lf-sec--surface)::before, .lf-sec:not(.lf-sec--surface) + .lf-sec--surface::before, .lf-sec--tint + .lf-sec:not(.lf-sec--tint)::before, .lf-sec:not(.lf-sec--tint) + .lf-sec--tint::before { display: none; } .lf-sec--dark + .lf-sec::before { display: none; } /* ---------- Section header ---------- */ .lf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .lf-sec-head--center { flex-direction: column; align-items: center; text-align: center; } .lf-sec-head--center .lf-sec-lead { margin-inline: auto; } .lf-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .85rem; background: rgba(var(--lf-primary-rgb),.09); color: var(--lf-primary); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; padding: .35rem .8rem; border-radius: 999px; } .lf-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .lf-sec--dark .lf-eyebrow { background: rgba(129,140,248,.18); color: #a5b4fc; } .lf-sec-title { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: 0; } .lf-sec-lead { color: var(--lf-muted); margin: .8rem 0 0; max-width: 620px; font-size: 1.02rem; } .lf-sec-link { font-weight: 700; color: var(--lf-primary); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .lf-sec-link i { transition: transform .18s ease; } .lf-sec-link:hover i { transform: translateX(4px); } /* ---------- Generic tile ---------- */ .lf-tile { background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); padding: 1.6rem; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .lf-tile--hover:hover { transform: translateY(-5px); box-shadow: var(--lf-shadow); border-color: rgba(var(--lf-primary-rgb),.25); } .lf-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); flex: 0 0 54px; transition: background .18s ease, color .18s ease, transform .18s ease; } .lf-ico--grad { background: var(--lf-grad); color: #fff; box-shadow: 0 12px 26px rgba(var(--lf-primary-rgb),.3); } .lf-tile--hover:hover .lf-ico { transform: scale(1.06) rotate(-3deg); } .lf-sec--dark .lf-ico { background: rgba(129,140,248,.16); color: #a5b4fc; } /* ---------- Feature cards ---------- */ .lf-feature { display: flex; flex-direction: column; gap: .9rem; } .lf-feature h3 { font-size: 1.06rem; font-weight: 700; margin: 0; letter-spacing: -.02em; } .lf-feature p { color: var(--lf-muted); font-size: .93rem; margin: 0; line-height: 1.6; } /* ---------- Category tiles ---------- */ .lf-cat { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; height: 100%; background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .lf-cat:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); border-color: rgba(var(--lf-primary-rgb),.3); } .lf-cat .lf-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; font-size: 1.2rem; } .lf-cat-name { font-weight: 700; font-size: .96rem; color: var(--lf-ink); margin: 0; line-height: 1.25; } .lf-cat-count { font-size: .8rem; color: var(--lf-muted); } .lf-cat-go { margin-left: auto; color: var(--lf-muted); opacity: 0; transform: translateX(-6px); transition: all .18s ease; } .lf-cat:hover .lf-cat-go { opacity: 1; transform: none; color: var(--lf-primary); } /* ---------- Course card ---------- */ .course-card { display: flex; flex-direction: column; } .course-card:hover { border-color: transparent; } .lf-badge-row { position: absolute; top: .75rem; left: .75rem; right: .75rem; z-index: 1; display: flex; gap: .5rem; align-items: flex-start; pointer-events: none; } .lf-badge-group { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; max-width: calc(100% - 4.5rem); } .lf-badge { display: inline-flex; align-items: center; justify-content: center; max-width: 9.4rem; min-height: 1.7rem; font-size: .7rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px; line-height: 1.05; background: rgba(255,255,255,.94); color: var(--lf-primary); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(15,23,42,.12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lf-badge--free { background: #10b981; color: #fff; } .lf-badge--deal { background: #f43f5e; color: #fff; } .lf-badge--auto { position: absolute; top: 0; right: 0; min-width: 3.25rem; } /* Wishlist heart on course cards + detail button */ .lf-wishlist-form { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; pointer-events: auto; } .course-thumb-wrap > .lf-wishlist-btn { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; } .lf-wishlist-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.96); color: #475569; font-size: .95rem; line-height: 1; backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(15,23,42,.12); cursor: pointer; text-decoration: none; transition: transform .12s ease, color .12s ease, background .12s ease; } .lf-wishlist-btn .bi { color: currentColor; } .lf-wishlist-btn:hover { transform: scale(1.08); color: #f43f5e; } .lf-wishlist-btn:active { transform: scale(.94); } .lf-wishlist-btn.is-wishlisted { color: #f43f5e; } .lf-wishlist-btn:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; } .lf-wishlist-detail.is-wishlisted { color: #f43f5e; border-color: #f43f5e; } .lf-wishlist-detail.is-wishlisted:hover { color: #fff; background: #f43f5e; border-color: #f43f5e; } .lf-course-meta { display: flex; align-items: center; gap: .8rem; font-size: .78rem; color: var(--lf-muted); font-weight: 600; } .lf-course-meta i { font-size: .82rem; margin-right: .2rem; } .lf-rating { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; } .lf-rating .bi { color: #f59e0b; font-size: .76rem; } .lf-rating .lf-rating-count { color: var(--lf-muted); font-weight: 500; } .lf-course-title { font-size: .98rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; margin: 0; } .lf-course-title a { color: var(--lf-ink); } .course-card:hover .lf-course-title a { color: var(--lf-primary); } .lf-price { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; } .lf-price-old { font-size: .82rem; color: var(--lf-muted); text-decoration: line-through; font-weight: 500; } .lf-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: linear-gradient(180deg, rgba(15,23,42,.1), rgba(15,23,42,.45)); transition: opacity .2s ease; } .lf-play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--lf-primary); display: grid; place-items: center; font-size: 1.3rem; transform: scale(.85); transition: transform .2s ease; } .course-card:hover .lf-play { opacity: 1; } .course-card:hover .lf-play span { transform: none; } /* ---------- Steps (how it works) ---------- */ .lf-steps { counter-reset: lfstep; position: relative; } .lf-step { text-align: center; position: relative; } .lf-step-num { width: 68px; height: 68px; margin: 0 auto 1.15rem; border-radius: 22px; display: grid; place-items: center; font-size: 1.7rem; background: var(--lf-grad); color: #fff; box-shadow: 0 14px 30px rgba(var(--lf-primary-rgb),.32); position: relative; } .lf-step h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; } .lf-step p { color: var(--lf-muted); margin: 0; font-size: .93rem; line-height: 1.65; } /* dashed connector between steps on wide screens */ @media (min-width: 768px) { .lf-step::after { content: ""; position: absolute; top: 34px; left: calc(50% + 52px); right: calc(-50% + 52px); height: 2px; background-image: linear-gradient(90deg, var(--lf-border) 55%, transparent 0); background-size: 11px 2px; background-repeat: repeat-x; } .lf-step:last-child::after { display: none; } } /* ---------- Stats band ---------- */ .lf-stats { display: grid; gap: 1px; background: var(--lf-border); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); overflow: hidden; } .lf-stat { background: var(--lf-card); padding: 2rem 1.25rem; text-align: center; } .lf-stat-num { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; } .lf-stat-label { color: var(--lf-muted); font-size: .84rem; font-weight: 600; margin-top: .5rem; } .lf-stat .lf-ico { margin: 0 auto .9rem; } /* ---------- Instructor card ---------- */ .lf-person { text-align: center; padding: 1.75rem 1rem; } .lf-person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; } .lf-person .avatar-ring { display: inline-block; margin-bottom: 1rem; } .lf-person h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; color: var(--lf-ink); } .lf-person .lf-person-role { font-size: .82rem; color: var(--lf-muted); display: block; } .lf-person .lf-person-stat { font-size: .78rem; font-weight: 700; color: var(--lf-primary); margin-top: .6rem; display: inline-block; } /* ---------- Testimonials ---------- */ .lf-quote { position: relative; padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; height: 100%; } .lf-quote::before { content: "\201C"; position: absolute; top: .35rem; right: 1.25rem; font-size: 5rem; line-height: 1; font-family: Georgia, serif; color: var(--lf-primary); opacity: .12; } .lf-quote p { font-size: .97rem; line-height: 1.75; flex: 1 1 auto; margin: 0 0 1.5rem; } .lf-quote-stars { color: #f59e0b; font-size: .85rem; margin-bottom: .9rem; letter-spacing: .1em; } .lf-quote-person { display: flex; align-items: center; gap: .8rem; } .lf-quote-person img, .lf-quote-person .lf-initial { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; } .lf-initial { display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); font-weight: 800; } /* ---------- Partner marquee ---------- */ .lf-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lf-marquee-track { display: flex; gap: 3.5rem; align-items: center; width: max-content; animation: lfMarquee 32s linear infinite; } .lf-marquee:hover .lf-marquee-track { animation-play-state: paused; } .lf-marquee img { height: 34px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; } .lf-marquee a:hover img { filter: none; opacity: 1; } .lf-marquee-name { font-weight: 700; color: var(--lf-muted); font-size: 1.05rem; white-space: nowrap; } @keyframes lfMarquee { to { transform: translateX(-50%); } } /* ---------- CTA / newsletter bands ---------- */ .lf-band { position: relative; overflow: hidden; border-radius: var(--lf-radius-lg); padding: 3.25rem 2rem; } .lf-band--gradient { background: var(--lf-grad); color: #fff; box-shadow: var(--lf-shadow-lg); } .lf-band--dark { background: #0f172a; color: #fff; } .lf-band--light { background: var(--lf-card); border: 1px solid var(--lf-border); } .lf-band--gradient::after, .lf-band--dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 20px 20px; opacity: .4; } .lf-band > * { position: relative; z-index: 1; } .lf-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .6rem; } .lf-band--gradient p, .lf-band--dark p { color: rgba(255,255,255,.78); } /* ---------- Storefront footer ---------- */ .lf-footer { background: #0b1120; color: #cbd5e1; } .lf-footer-newsletter { background: var(--lf-grad); } .lf-footer-newsletter-copy { color: #ede9fe; font-weight: 500; } .lf-footer-heading { color: #f8fafc; letter-spacing: .02em; } .lf-footer-copy, .lf-footer-link { color: #cbd5e1; font-weight: 500; line-height: 1.65; } .lf-footer-link { transition: color .15s ease; } .lf-footer-link:hover, .lf-footer-link:focus-visible { color: #fff; } .lf-footer-copy i { color: #a5b4fc; } .lf-footer-social { width: 38px; height: 38px; border-radius: 10px; color: #f8fafc; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.10); transition: color .15s ease, background-color .15s ease, transform .15s ease; } .lf-footer-social:hover, .lf-footer-social:focus-visible { color: #fff; background: rgba(255,255,255,.20); transform: translateY(-2px); } .lf-footer-divider { border-color: #475569; opacity: .65; } .lf-footer-copyright { color: #aeb9ca; font-weight: 500; } /* ---------- FAQ ---------- */ .lf-faq .accordion-item { border: 1px solid var(--lf-border); border-radius: var(--lf-radius) !important; margin-bottom: .8rem; overflow: hidden; background: var(--lf-card); } .lf-faq .accordion-button { font-weight: 700; padding: 1.15rem 1.35rem; background: transparent; box-shadow: none; } .lf-faq .accordion-button:not(.collapsed) { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); } .lf-faq .accordion-body { color: var(--lf-muted); padding-top: 0; line-height: 1.75; } /* ---------- Scroll reveal ---------- */ .lf-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .lf-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lf-reveal { opacity: 1; transform: none; transition: none; } .lf-marquee-track { animation: none; } .course-card:hover, .lf-tile--hover:hover, .lf-cat:hover { transform: none; } } /* ---------- Homepage dark mode ---------- */ [data-bs-theme="dark"] .lf-sec--surface { background: #131c31; } [data-bs-theme="dark"] .lf-sec--tint { background: linear-gradient(180deg, rgba(99,102,241,.1) 0%, rgba(var(--lf-primary-2-rgb),.05) 100%); } [data-bs-theme="dark"] .lf-sec--dark { background: #080d18; } [data-bs-theme="dark"] .lf-tile, [data-bs-theme="dark"] .lf-cat, [data-bs-theme="dark"] .lf-stat { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .lf-stats { background: #24304a; border-color: #24304a; } [data-bs-theme="dark"] .lf-eyebrow { background: rgba(129,140,248,.16); color: #a5b4fc; } [data-bs-theme="dark"] .lf-ico { background: rgba(129,140,248,.16); color: #a5b4fc; } [data-bs-theme="dark"] .lf-ico--grad { background: var(--lf-grad); color: #fff; } [data-bs-theme="dark"] .lf-badge { background: rgba(19,28,49,.94); color: #a5b4fc; } [data-bs-theme="dark"] .lf-badge--free { background: #10b981; color: #fff; } [data-bs-theme="dark"] .lf-badge--deal { background: #f43f5e; color: #fff; } [data-bs-theme="dark"] .lf-wishlist-btn { background: rgba(255,255,255,.96); color: var(--lf-primary); box-shadow: 0 8px 20px rgba(0,0,0,.28); } [data-bs-theme="dark"] .lf-wishlist-btn:hover { color: #f43f5e; } [data-bs-theme="dark"] .lf-cat-name, [data-bs-theme="dark"] .lf-course-title a, [data-bs-theme="dark"] .lf-person h3 { color: #e2e8f0; } [data-bs-theme="dark"] .lf-band--light { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .lf-faq .accordion-item { background: #131c31; border-color: #24304a; } [data-bs-theme="dark"] .lf-faq .accordion-button { background: transparent; color: #e2e8f0; } [data-bs-theme="dark"] .lf-faq .accordion-button:not(.collapsed) { background: rgba(129,140,248,.1); color: #a5b4fc; } [data-bs-theme="dark"] .lf-initial { background: rgba(129,140,248,.16); color: #a5b4fc; } /* ---------- "See all" filler tile (completes a short grid row) ---------- */ .lf-more { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .85rem; border-style: dashed; border-width: 1.5px; background: transparent; text-align: left; } .lf-more:hover { background: var(--lf-card); border-style: solid; } .lf-more-label { font-weight: 700; font-size: 1.02rem; color: var(--lf-ink); letter-spacing: -.02em; } .lf-more-note { color: var(--lf-muted); font-size: .88rem; line-height: 1.55; } .lf-cat--more { border-style: dashed; border-width: 1.5px; background: transparent; } .lf-cat--more:hover { background: var(--lf-card); border-style: solid; } [data-bs-theme="dark"] .lf-more:hover, [data-bs-theme="dark"] .lf-cat--more:hover { background: #131c31; } [data-bs-theme="dark"] .lf-more-label { color: #e2e8f0; } /* ---------- Stacked bands (CTA + newsletter) ---------- */ /* Two full-width bands in a row would otherwise sit ~11rem apart. */ .lf-sec--band + .lf-sec--band { padding-top: 0; } .lf-sec--band + .lf-sec--band::before { display: none; } .lf-sec--band + .lf-sec--band > .container > .lf-band { margin-top: 1.5rem; } .lf-sec--band:last-child { padding-bottom: 3.5rem; } /* ---------- SweetAlert2 confirmations ---------- */ .lf-swal.swal2-popup { border-radius: var(--lf-radius-lg); border: 1px solid var(--lf-border); box-shadow: 0 30px 70px rgba(15,23,42,.22); padding: 2rem 2rem 1.5rem; font-family: var(--bs-body-font-family); max-width: 440px; } .lf-swal .lf-swal-title { font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; padding: 0; } .lf-swal .lf-swal-text { font-size: .96rem; color: var(--lf-muted); line-height: 1.65; margin: .6rem 0 0; } .lf-swal .swal2-actions { margin-top: 1.75rem; gap: .5rem; } .lf-swal .swal2-icon { width: 62px; height: 62px; margin: .25rem auto 1.1rem; border-width: 3px; } .lf-swal .swal2-icon .swal2-icon-content { font-size: 2.2rem; } .lf-swal .swal2-icon.swal2-warning { border-color: rgba(245,158,11,.4); color: #f59e0b; } .lf-swal .swal2-icon.swal2-question { border-color: rgba(var(--lf-primary-rgb),.35); color: var(--lf-primary); } .lf-swal .btn-light { background: #f1f3f9; color: #334155; } .lf-swal .btn-light:hover { background: #e6e9f2; color: var(--lf-ink); } .lf-swal .btn-danger { background: linear-gradient(135deg,#ef4444,#dc2626); border: 0; box-shadow: 0 8px 20px rgba(239,68,68,.3); } .lf-swal .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(239,68,68,.38); } .swal2-container { backdrop-filter: blur(3px); } /* Toasts are transient and non-blocking — never blur the page behind them (the blur above is only wanted for modal confirmations). Swal tags toast containers (and ) with swal2-toast-shown; cover both selectors. */ .swal2-container.swal2-toast-shown, body.swal2-toast-shown .swal2-container { backdrop-filter: none; } /* Flash messages: hidden until learnify-toast.js turns them into toasts (it un-hides them when SweetAlert is missing). */ .lf-flash-pending { display: none !important; } .lf-flash-wrap:empty { display: none; } /* Toasts (top right): a card with a coloured rail per type. */ .lf-toast.swal2-popup { border-radius: 14px; padding: .9rem 1rem .9rem 1.1rem; box-shadow: 0 18px 44px rgba(15,23,42,.18), 0 0 0 1px var(--lf-border); border-inline-start: 4px solid var(--lf-primary); width: auto; max-width: min(420px, calc(100vw - 32px)); } .lf-toast--success.swal2-popup { border-inline-start-color: #10b981; } .lf-toast--error.swal2-popup { border-inline-start-color: #ef4444; } .lf-toast--warning.swal2-popup { border-inline-start-color: #f59e0b; } .lf-toast--info.swal2-popup { border-inline-start-color: #0ea5e9; } .lf-toast .swal2-icon { width: 26px; height: 26px; min-width: 26px; margin: 0 .75rem 0 0; border-width: 2px; } .lf-toast .swal2-icon .swal2-icon-content { font-size: 1rem; } .lf-toast .swal2-icon.swal2-success [class^="swal2-success-line"] { height: 2px; } .lf-toast .swal2-icon.swal2-success .swal2-success-line-tip { width: .5em; left: .3em; top: .85em; } .lf-toast .swal2-icon.swal2-success .swal2-success-line-long { width: .9em; right: .15em; top: .7em; } .lf-toast .lf-toast-text { margin: 0; padding: 0 1.5rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.45; text-align: start; } .lf-toast .lf-toast-list { margin: 0; padding-inline-start: 1.1rem; font-weight: 500; } .lf-toast .lf-toast-list li + li { margin-top: .2rem; } .lf-toast .lf-toast-close { position: absolute; top: .35rem; inset-inline-end: .35rem; width: 1.6rem; height: 1.6rem; font-size: 1.3rem; color: var(--lf-muted); } .lf-toast .lf-toast-close:hover { color: var(--lf-ink); background: transparent; } .lf-toast .swal2-timer-progress-bar { background: rgba(var(--lf-primary-rgb), .35); height: 3px; } .swal2-container.swal2-top-end { padding-top: 84px; } /* clear the sticky header */ @media (max-width: 575.98px) { .swal2-container.swal2-top-end { padding-top: 70px; } } [data-bs-theme="dark"] .lf-toast.swal2-popup { box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px #24304a; } [data-bs-theme="dark"] .lf-swal.swal2-popup { border-color: #24304a; box-shadow: 0 30px 70px rgba(0,0,0,.55); } [data-bs-theme="dark"] .lf-swal .lf-swal-text { color: #94a3b8; } [data-bs-theme="dark"] .lf-swal .btn-light { background: #1e293b; color: #e2e8f0; } [data-bs-theme="dark"] .lf-swal .btn-light:hover { background: #273449; color: #fff; } /* ========================================================================== Responsive layer -------------------------------------------------------------------------- The storefront and panel were built desktop-first; everything below tunes them for phones and tablets and stops any single element from pushing the page sideways. ========================================================================== */ /* ---------- Overflow safety ---------- */ html { -webkit-text-size-adjust: 100%; } /* `clip` rather than `hidden`: it stops sideways scroll without breaking position:sticky. The panel is scoped to its own content column so the fixed sidebar is never affected. */ body:not(.lf-panel) { overflow-x: clip; } body.lf-panel .lf-content { overflow-x: clip; } img, svg, video, canvas, iframe { max-width: 100%; } img, svg, video { height: auto; } /* A long unbroken word (a URL, an email, a German noun) must wrap rather than widen the page. */ h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, label, .lf-course-title, .lf-sec-title { overflow-wrap: break-word; } pre, code { overflow-x: auto; max-width: 100%; } /* Bootstrap tables do not shrink; any table that was not already wrapped gets its own scroller instead of stretching the layout. */ .table-responsive { -webkit-overflow-scrolling: touch; } /* ---------- Fluid display headings ---------- */ /* Bootstrap's .display-* are fixed rem sizes, which are far too big on a phone. */ .display-1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); } .display-2 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.5rem); } .display-3 { font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4rem); } .display-4 { font-size: clamp(1.9rem, 1.25rem + 3vw, 3.5rem); } .display-5 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem); } .display-6 { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem); } @media (max-width: 575.98px) { .lead { font-size: 1rem; } } /* ---------- Section rhythm ---------- */ @media (max-width: 991.98px) { .lf-sec { padding: 3.5rem 0; } .section { padding: 3.5rem 0; } .lf-sec-head { margin-bottom: 1.75rem; } } @media (max-width: 575.98px) { .lf-sec { padding: 2.75rem 0; } .section { padding: 2.75rem 0; } .lf-stat { padding: 1.5rem 1rem; } } /* ---------- Hero ---------- */ @media (max-width: 991.98px) { .hero .container { padding-top: 2.5rem; padding-bottom: 2.5rem; } .hero .row { --bs-gutter-y: 2rem; } } @media (max-width: 575.98px) { /* Search collapses to a stacked field + full-width button. */ .hero form.rounded-pill { border-radius: var(--lf-radius, 14px) !important; flex-direction: column; gap: .5rem; padding: .75rem !important; } .hero form.rounded-pill .form-control { text-align: center; } .hero form.rounded-pill .btn { width: 100%; border-radius: 999px; } .hero .d-flex.flex-wrap.gap-4 { gap: 1.25rem !important; margin-top: 2rem !important; } .hero-search { border-radius: var(--lf-radius, 14px) !important; flex-direction: column; gap: .5rem; padding: .75rem !important; } .hero-search-ico { display: none; } .hero-search .form-control { text-align: center; } .hero-search .btn { width: 100%; } .hero-title { font-size: 2.6rem; } .hero-orb { display: none; } .hero-glass { padding: .9rem; } } @media (max-width: 991.98px) { .hero-bento { grid-template-columns: 1fr 1fr; } .hero-bento-tile--course { grid-column: 1 / 3; grid-row: auto; } .hero-bento-tile--grad, .hero-bento-tile--wide { grid-column: 1 / 3; } } /* ---------- Cards & grids ---------- */ @media (max-width: 575.98px) { .card-body { padding: 1rem; } .lf-tile { padding: 1.1rem; } .lf-person { padding: 1.25rem .75rem; } } /* ---------- Panel (dashboard) ---------- */ @media (max-width: 767.98px) { .lf-page { padding: 1rem 1rem 2.5rem; } .lf-topbar { padding: .5rem .85rem; } .lf-page-title h1 { font-size: 1.05rem; } /* Toolbars above a table wrap instead of squeezing. */ .lf-page .card-header { flex-wrap: wrap; gap: .5rem; } /* Action buttons in a table row keep their tap target. */ .table .btn-sm { padding: .3rem .5rem; } } @media (max-width: 575.98px) { .lf-user-chip .name, .lf-user-chip .role { display: none; } .lf-page > .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; } .pagination { flex-wrap: wrap; } } /* Panel filter toolbars: wrap and let fixed-width controls shrink. */ @media (max-width: 575.98px) { .lf-page form.d-flex { flex-wrap: wrap; } .lf-page form.d-flex > *, .lf-page form.d-flex .form-control, .lf-page form.d-flex .form-select { min-width: 0 !important; } } /* "All My Courses" rows: on a narrow phone the course title, status badge, and Open button all fighting for one line leaves almost nothing for the title. Let the course info take its own line and the badge/button wrap to the next instead of truncating hard. */ @media (max-width: 575.98px) { .lf-enrollment-row { flex-wrap: wrap; } .lf-enrollment-row .lf-course-mini { flex: 1 1 100%; } } /* ---------- Forms ---------- */ @media (max-width: 575.98px) { /* iOS zooms the page when a field's text is under 16px. */ .form-control, .form-select { font-size: 16px; } .form-control-sm, .form-select-sm { font-size: 15px; } /* Stacked button groups read better than a squashed row. */ .card-footer .btn + .btn { margin-top: .4rem; } } /* ---------- Auth & explainer ---------- */ @media (max-width: 575.98px) { .lf-auth-card { padding-inline: 0; } .lf-hiw-toggle { padding: .6rem .7rem; } } /* ---------- Demo accounts box (login screen) ---------- */ /* Amber on purpose: it must read as a temporary, non-production aid and stand apart from the indigo UI without competing with the Login button. */ .lf-demo-box { position: relative; border: 1.5px solid rgba(245, 158, 11, .45); background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.04)); border-radius: var(--lf-radius); padding: 1.1rem 1rem .9rem; } .lf-demo-tag { position: absolute; top: -.65rem; left: 1rem; background: #f59e0b; color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(245,158,11,.35); } .lf-demo-head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .85rem; } .lf-demo-head > i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(245,158,11,.18); color: #b45309; font-size: 1rem; } .lf-demo-head strong { display: block; font-size: .92rem; line-height: 1.3; } .lf-demo-head span { display: block; font-size: .78rem; color: var(--lf-muted); line-height: 1.45; } .lf-demo-head code { background: rgba(245,158,11,.16); color: #b45309; padding: 0 .3rem; border-radius: 5px; font-weight: 700; } .lf-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; } .lf-demo-box .lf-demo-chip { display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%; border: 1px solid rgba(245,158,11,.35); border-radius: 11px; background: var(--lf-card); padding: .55rem .7rem; color: var(--lf-ink); transition: transform .15s, box-shadow .15s, border-color .15s; } .lf-demo-box .lf-demo-chip:disabled { opacity: .55; cursor: default; } .lf-demo-box .lf-demo-chip.is-busy { opacity: 1; border-color: var(--lf-primary); color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); } .lf-demo-box .lf-demo-chip:hover { border-color: #f59e0b; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(245,158,11,.22); background: var(--lf-card); color: var(--lf-ink); } .lf-demo-box .lf-demo-chip > i { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(245,158,11,.15); color: #b45309; font-size: .95rem; } .lf-demo-box .lf-demo-chip .role { display: block; font-weight: 700; font-size: .82rem; line-height: 1.2; } .lf-demo-box .lf-demo-chip .desc { display: block; font-size: .68rem; color: var(--lf-muted); line-height: 1.3; } [data-bs-theme="dark"] .lf-demo-box { border-color: rgba(245,158,11,.4); background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.05)); } [data-bs-theme="dark"] .lf-demo-head > i, [data-bs-theme="dark"] .lf-demo-box .lf-demo-chip > i, [data-bs-theme="dark"] .lf-demo-head code { color: #fbbf24; } [data-bs-theme="dark"] .lf-demo-box .lf-demo-chip { background: #131c31; color: #e2e8f0; } [data-bs-theme="dark"] .lf-demo-box .lf-demo-chip:hover { background: #172033; color: #f1f5f9; } /* ===== Certificate designer (Admin → Certificate Templates → Visual designer) ===== */ .cert-canvas-editor { position: relative; width: 100%; aspect-ratio: 1000 / 700; background: #fff center / cover no-repeat; container-type: inline-size; overflow: hidden; outline: none; box-shadow: 0 6px 24px rgba(17,24,39,.12); border-radius: 4px; user-select: none; } .cert-canvas-editor .ce { position: absolute; box-sizing: border-box; cursor: move; word-wrap: break-word; min-height: 4px; } .cert-canvas-editor .ce:hover { outline: 1px dashed rgba(var(--lf-primary-rgb),.6); } .cert-canvas-editor .ce.ce-selected { outline: 2px solid var(--lf-primary); } .cert-canvas-editor .ce img { width: 100%; height: auto; display: block; pointer-events: none; } .cert-canvas-editor .ce-ph { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 6px, #e5e7eb 6px, #e5e7eb 12px); color: #6b7280; font: 600 1.2cqw/1 Arial, sans-serif; letter-spacing: .1em; border: 1px dashed #9ca3af; } .cert-canvas-editor .ce-resize { position: absolute; right: -6px; top: 50%; width: 10px; height: 18px; margin-top: -9px; background: var(--lf-primary); border-radius: 3px; cursor: ew-resize; display: none; } .cert-canvas-editor .ce.ce-selected .ce-resize { display: block; } .cert-canvas-editor .ce-line { pointer-events: auto; } .cert-canvas-editor .ce-line::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; } /* easier to grab a 2px line */ [data-bs-theme=dark] .cert-canvas-editor { box-shadow: 0 6px 24px rgba(0,0,0,.5); } /* ===== Checkout (cart → payment) ===== */ .lf-checkout-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .lf-checkout-head h1 { margin: 0; } .lf-checkout-head .lf-checkout-sub { font-size: .88rem; color: var(--lf-muted); margin: .2rem 0 0; } .lf-secure-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #15803d; background: rgba(34,197,94,.12); border-radius: 999px; padding: .4rem .8rem; white-space: nowrap; } /* Stepper: Cart → Payment → Done */ .lf-steps { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; font-weight: 600; color: var(--lf-muted); } .lf-steps li { display: flex; align-items: center; gap: .45rem; } .lf-steps li + li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--lf-border); margin: 0 .35rem; } .lf-steps li.done + li::before { background: #22c55e; } .lf-steps li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--lf-card); border: 1.5px solid var(--lf-border); } .lf-steps li.done > span { background: rgba(34,197,94,.14); border-color: transparent; color: #15803d; } .lf-steps li.active { color: var(--lf-ink); } .lf-steps li.active > span { background-image: var(--lf-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(var(--lf-primary-rgb),.3); } /* Card shell used by every checkout panel */ .lf-checkout-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); background: var(--lf-card); box-shadow: var(--lf-shadow-sm); } .lf-checkout-stack > * + * { margin-top: 1.25rem; } /* cards in a column, whether or not a

wraps one */ .lf-cc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--lf-border); } .lf-cc-head h2 { font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: .65rem; } .lf-cc-head h2 > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); font-size: .95rem; } .lf-cc-head .lf-cc-hint { font-size: .8rem; color: var(--lf-muted); } .lf-cc-body { padding: 1.4rem; } /* Order bump */ .lf-bump { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-radius: var(--lf-radius-lg); border: 1px solid rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03) 60%, transparent); } .lf-bump img { width: 84px; height: 56px; object-fit: cover; border-radius: 12px; box-shadow: var(--lf-shadow-sm); } .lf-bump .lf-bump-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; background: rgba(245,158,11,.18); border-radius: 999px; padding: .2rem .6rem; margin-bottom: .3rem; } .lf-bump .lf-bump-title { font-weight: 700; line-height: 1.3; } .lf-bump .lf-bump-price { font-size: .84rem; color: var(--lf-muted); } .lf-bump .lf-bump-actions { display: flex; flex-direction: column; align-items: center; gap: .15rem; } .lf-bump .lf-bump-dismiss { color: var(--lf-muted); font-weight: 600; text-decoration: none; padding: .1rem .5rem; } .lf-bump .lf-bump-dismiss:hover { color: var(--lf-ink); text-decoration: underline; } .lf-bump .lf-bump-price s { margin-right: .3rem; } .lf-bump .lf-bump-price strong { color: #15803d; } .lf-bump .btn { white-space: nowrap; } /* Payment method picker */ .lf-pay-group-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--lf-muted); margin: 1.25rem 0 .65rem; } .lf-pay-group-title:first-child { margin-top: 0; } .lf-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .lf-pay-option { position: relative; display: flex; align-items: center; gap: .85rem; margin: 0; padding: .85rem 1rem; border: 1.5px solid var(--lf-border); border-radius: 14px; background: var(--lf-card); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s; } .lf-pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .lf-pay-option:hover { border-color: rgba(var(--lf-primary-rgb),.45); transform: translateY(-1px); box-shadow: var(--lf-shadow-sm); } .lf-pay-option:has(input:focus-visible) { outline: 3px solid var(--lf-primary); outline-offset: 2px; } .lf-pay-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: #f1f3f9; color: var(--lf-ink); transition: background .15s, color .15s; } .lf-pay-text { min-width: 0; flex: 1; } .lf-pay-label { display: block; font-weight: 700; font-size: .92rem; line-height: 1.25; } .lf-pay-sub { display: block; font-size: .75rem; color: var(--lf-muted); margin-top: .15rem; line-height: 1.35; } .lf-pay-check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1.5px solid var(--lf-border); display: grid; place-items: center; color: #fff; font-size: .7rem; transition: background .15s, border-color .15s; } .lf-pay-check::before { content: "\f633"; font-family: "bootstrap-icons"; opacity: 0; transition: opacity .15s; } .lf-pay-option.is-selected, .lf-pay-option:has(input:checked) { border-color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); box-shadow: 0 0 0 3px rgba(var(--lf-primary-rgb),.12); } .lf-pay-option.is-selected .lf-pay-ico, .lf-pay-option:has(input:checked) .lf-pay-ico { background-image: var(--lf-grad); color: #fff; } .lf-pay-option.is-selected .lf-pay-check, .lf-pay-option:has(input:checked) .lf-pay-check { background-image: var(--lf-grad); border-color: transparent; } .lf-pay-option.is-selected .lf-pay-check::before, .lf-pay-option:has(input:checked) .lf-pay-check::before { opacity: 1; } .lf-pay-option.is-disabled { opacity: .55; cursor: not-allowed; } .lf-pay-option.is-disabled:hover { transform: none; border-color: var(--lf-border); box-shadow: none; } .lf-pay-option .lf-pay-flag { position: absolute; top: -9px; right: 12px; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .18rem .5rem; border-radius: 999px; background-image: var(--lf-grad); color: #fff; } /* Extra fields that belong to one method (invoice / PO) */ .lf-pay-panel { display: none; margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px dashed rgba(var(--lf-primary-rgb),.4); border-radius: 14px; background: rgba(var(--lf-primary-rgb),.03); } .lf-pay-panel.show { display: block; animation: lfFadeUp .3s ease both; } .lf-pay-panel .form-label { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; } /* Trust chips under the picker */ .lf-trust-row { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--lf-border); font-size: .78rem; color: var(--lf-muted); } .lf-trust-row span { display: inline-flex; align-items: center; gap: .4rem; } .lf-trust-row i { color: #16a34a; } /* Items in this order */ .lf-order-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--lf-border); } .lf-order-item:first-child { padding-top: 0; } .lf-order-item:last-child { border-bottom: 0; padding-bottom: 0; } .lf-order-item .lf-order-price { font-weight: 700; white-space: nowrap; } /* Summary column (sticky on desktop) */ .lf-summary { position: sticky; top: 96px; } .lf-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; font-size: .92rem; } .lf-summary-row .lf-sr-label { color: var(--lf-muted); display: inline-flex; align-items: center; gap: .5rem; } .lf-summary-row.is-discount { color: #15803d; } .lf-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .9rem; margin-top: .5rem; border-top: 1px solid var(--lf-border); } .lf-summary-total .lf-total-amt { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .lf-summary-total small { display: block; font-size: .74rem; color: var(--lf-muted); margin-top: .35rem; font-weight: 500; } .lf-coupon-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; background: rgba(34,197,94,.14); color: #15803d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; } .lf-coupon-toggle { background: none; border: 0; padding: 0; font-size: .84rem; font-weight: 600; color: var(--lf-primary); display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; } .lf-coupon-toggle i { transition: transform .2s; } .lf-coupon-toggle[aria-expanded="true"] i { transform: rotate(180deg); } .lf-coupon-form { margin-top: .75rem; } .lf-coupon-form .form-control { border-radius: 12px 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; } .lf-coupon-form .btn { border-radius: 0 12px 12px 0; } .lf-pay-btn { padding: .9rem 1.2rem; font-size: 1rem; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: .5rem; } .lf-summary-foot { text-align: center; font-size: .76rem; color: var(--lf-muted); margin-top: .85rem; } .lf-summary-foot a { color: var(--lf-muted); text-decoration: underline; } /* What the buyer gets — fills the column under the summary */ .lf-perks { display: grid; gap: .9rem; } .lf-perk { display: flex; gap: .85rem; align-items: flex-start; } .lf-perk > i { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; } .lf-perk strong { display: block; font-size: .88rem; line-height: 1.3; } .lf-perk span { display: block; font-size: .78rem; color: var(--lf-muted); line-height: 1.4; margin-top: .1rem; } .lf-help-line { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--lf-border); font-size: .8rem; color: var(--lf-muted); } .lf-help-line a { font-weight: 600; } /* Sticky pay bar on phones (the summary card scrolls away) */ .lf-checkout-bar { display: none; position: sticky; bottom: 0; z-index: 1020; margin: 1rem -12px 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--lf-border); box-shadow: 0 -10px 30px rgba(15,23,42,.08); } .lf-checkout-bar .lf-bar-total { line-height: 1.15; } .lf-checkout-bar .lf-bar-total small { display: block; font-size: .7rem; color: var(--lf-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .lf-checkout-bar .lf-bar-total strong { font-size: 1.15rem; } @media (max-width: 991.98px) { .lf-summary { position: static; } .lf-checkout-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } } @media (max-width: 575.98px) { .lf-pay-grid { grid-template-columns: 1fr; } .lf-cc-body, .lf-cc-head { padding-left: 1rem; padding-right: 1rem; } .lf-steps li > em { display: none; } .lf-steps li.active > em { display: inline; } .lf-bump .btn { width: 100%; } } [data-bs-theme="dark"] .lf-pay-ico { background: #1c2640; color: #e2e8f0; } [data-bs-theme="dark"] .lf-pay-option:has(input:checked), [data-bs-theme="dark"] .lf-pay-option.is-selected { background: rgba(var(--lf-primary-rgb),.12); } [data-bs-theme="dark"] .lf-pay-panel { background: rgba(var(--lf-primary-rgb),.08); } [data-bs-theme="dark"] .lf-secure-tag, [data-bs-theme="dark"] .lf-coupon-tag, [data-bs-theme="dark"] .lf-steps li.done > span { color: #4ade80; background: rgba(34,197,94,.16); } [data-bs-theme="dark"] .lf-summary-row.is-discount { color: #4ade80; } [data-bs-theme="dark"] .lf-coupon-toggle { color: #a5b4fc; } [data-bs-theme="dark"] .lf-bump { border-color: rgba(245,158,11,.4); background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.04) 60%, transparent); } [data-bs-theme="dark"] .lf-bump .lf-bump-tag { color: #fbbf24; } [data-bs-theme="dark"] .lf-bump .lf-bump-price strong { color: #4ade80; } [data-bs-theme="dark"] .lf-checkout-bar { background: rgba(19,28,49,.92); }