/* ===================================================================
AMUCA · Local Government Academy of Central Asia
Theme: lga
=================================================================== */
:root {
--c-navy: #1A365D;
--c-royal: #2B6CB0;
--c-teal: #319795;
--c-gold: #D69E2E;
--c-gold-strong: #B7791F;
--c-bg: #F7FAFC;
--c-surface: #FFFFFF;
--c-card: #EDF2F7;
--c-border: #E2E8F0;
--c-text: #2D3748;
--c-text-soft: #4A5568;
--c-text-mute: #718096;
--c-heading: #1A202C;
--c-success: #38A169;
--c-warning: #DD6B20;
--font-h: 'Montserrat', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
--font-body: 'Inter', 'Open Sans', system-ui, -apple-system, Segoe UI, sans-serif;
/* ===== Type scale (modular, fluid) ===== */
--fs-display: clamp(2.5rem, 3.5vw + 1rem, 4rem); /* 40-64px */
--fs-h1: clamp(2rem, 1.6vw + 1rem, 2.75rem); /* 32-44px */
--fs-h2: clamp(1.75rem, 1.2vw + 1rem, 2.25rem); /* 28-36px */
--fs-h3: 1.25rem; /* 20px */
--fs-h4: 1rem; /* 16px */
--fs-body-lg: 1.0625rem; /* 17px — section subtitles */
--fs-body: 1rem; /* 16px — default */
--fs-body-sm: 0.875rem; /* 14px — meta, secondary */
--fs-caption: 0.8125rem; /* 13px — tiny captions */
--fs-overline: 0.75rem; /* 12px — UPPERCASE eyebrows */
--fs-btn: 0.875rem; /* 14px — UI controls */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
--ls-tight: -0.02em;
--ls-snug: -0.01em;
--ls-normal: 0;
--ls-wide: 0.06em;
--ls-wider: 0.12em;
--r-sm: 6px;
--r-md: 12px;
--r-lg: 16px;
--r-pill: 9999px;
--sh-sm: 0 1px 3px rgba(15, 30, 65, .08);
--sh-md: 0 6px 18px rgba(15, 30, 65, .10);
--sh-lg: 0 18px 40px rgba(15, 30, 65, .14);
--container: 1200px;
--gap: 24px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.lga-body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-h);
color: var(--c-heading);
margin: 0;
line-height: var(--lh-tight);
letter-spacing: var(--ls-snug);
font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-body-sm); font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* ====== Buttons ====== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-btn);
line-height: 1;
letter-spacing: var(--ls-normal);
padding: 12px 22px;
border-radius: var(--r-pill);
border: 1.5px solid transparent;
cursor: pointer;
transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--c-gold); color: #fff; box-shadow: 0 8px 20px rgba(214, 158, 46, .35); }
.btn-gold:hover { background: var(--c-gold-strong); box-shadow: 0 12px 26px rgba(183, 121, 31, .45); }
.btn-white { background: #fff; color: var(--c-navy); }
.btn-white:hover { background: #f1f5fc; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-outline-navy { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.btn-outline-navy:hover { background: var(--c-navy); color: #fff; }
.btn-teal { background: var(--c-teal); color: #fff; box-shadow: 0 8px 20px rgba(49, 151, 149, .3); }
.btn-teal:hover { background: #2C7A7B; box-shadow: 0 12px 26px rgba(49, 151, 149, .4); }
/* ====== Top bar ====== */
.lga-topbar {
background: var(--c-navy);
color: rgba(255,255,255,.85);
font-size: var(--fs-caption);
padding: 10px 0;
border-bottom: 1px solid var(--c-gold); /* visible separator between topbar and nav */
box-shadow: 0 2px 0 rgba(15, 30, 65, .12);
position: relative;
z-index: 51; /* keep separator above sticky header */
}
.lga-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lga-topbar a { color: rgba(255,255,255,.85); transition: color .2s var(--ease); }
.lga-topbar a:hover { color: var(--c-gold); }
.lga-topbar-left { display: flex; gap: 24px; }
.lga-topbar-left a { display: inline-flex; align-items: center; gap: 8px; }
.lga-topbar-left svg { opacity: .75; }
.lga-topbar-right { display: flex; gap: 4px; align-items: center; }
.lga-lang { padding: 2px 8px; font-weight: 600; letter-spacing: .04em; border-radius: 4px; }
.lga-lang.is-active { color: var(--c-gold); }
.lga-lang-sep { color: rgba(255,255,255,.3); }
/* ====== Header / Nav ====== */
.lga-header {
background: #fff;
border-bottom: 1px solid var(--c-border);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--sh-sm);
}
/* Header uses the full viewport width — needed so the enlarged logo + 7 menu items + 3 full-size action buttons fit without overflow */
/* Header uses a wide framed container to fit the enlarged logo + 7 menu items + 3 full-size action buttons */
.lga-header > .container { max-width: 1400px; padding: 0 24px; }
.lga-nav {
display: flex;
align-items: center; /* vertical centering for all children */
justify-content: center; /* whole brand+menu+actions group is centered → equal margins left and right */
gap: 12px;
height: 84px; /* fixed — logo overflows instead of pushing nav */
overflow: visible;
}
.lga-nav > .lga-menu { flex: 0 1 auto; } /* menu sits between brand and actions, doesn't grab extra space */
.lga-header { overflow: visible; }
.lga-brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.lga-brand-img {
display: block;
height: 110px;
width: auto;
max-width: none; /* override the global `img { max-width: 100% }` rule */
aspect-ratio: 1750 / 900;
object-fit: contain;
transition: opacity .2s var(--ease);
/* logo is taller than the 84px nav row; negative vertical margins make
its flow box equal to the row height so flex/grid centering produces
SYMMETRIC overhang above and below */
margin-block: calc((84px - 110px) / 2); /* -13px top + -13px bottom */
}
.lga-brand:hover .lga-brand-img { opacity: .85; }
.lga-brand--on-dark .lga-brand-img {
height: 96px;
opacity: .95;
}
.lga-brand--on-dark:hover .lga-brand-img { opacity: 1; }
.lga-menu {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
text-align: center;
width: 100%;
}
.lga-menu a {
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-btn);
color: var(--c-text);
padding: 8px 2px;
position: relative;
transition: color .2s var(--ease);
white-space: nowrap;
letter-spacing: var(--ls-normal);
text-align: center;
}
.lga-menu a::after {
content: '';
position: absolute;
left: 4px; right: 4px; bottom: 2px;
height: 2px;
background: var(--c-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease);
}
.lga-menu a:hover { color: var(--c-navy); }
.lga-menu a:hover::after,
.lga-menu a.is-active::after { transform: scaleX(1); }
/* ===== Menu items with dropdown ===== */
.lga-menu-item.has-sub {
position: relative;
display: inline-flex;
align-items: center;
}
.lga-menu-item.has-sub > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--r-pill);
transition: background .2s var(--ease), color .2s var(--ease);
}
/* Hide the underline marker on dropdown triggers (gold pill replaces it) */
.lga-menu-item.has-sub > a::after { display: none; }
.lga-caret {
display: inline-block;
transition: transform .25s var(--ease);
opacity: .65;
}
/* Hover state — gold pill, like the live design */
.lga-menu-item.has-sub:hover > a,
.lga-menu-item.has-sub:focus-within > a {
background: var(--c-gold);
color: #1A202C;
}
.lga-menu-item.has-sub:hover .lga-caret,
.lga-menu-item.has-sub:focus-within .lga-caret {
transform: rotate(180deg);
opacity: 1;
}
/* ===== Dropdown panel ===== */
.lga-submenu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 4px);
margin-top: 16px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: 0 16px 48px rgba(15, 30, 65, .14), 0 2px 8px rgba(15, 30, 65, .06);
padding: 18px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .22s var(--ease),
transform .28s var(--ease),
visibility 0s linear .28s;
z-index: 60;
}
/* invisible bridge so cursor can travel from trigger to panel without it closing */
.lga-submenu::before {
content: '';
position: absolute;
top: -16px; left: 0; right: 0; height: 16px;
}
.lga-menu-item.has-sub:hover .lga-submenu,
.lga-menu-item.has-sub:focus-within .lga-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition:
opacity .22s var(--ease),
transform .28s var(--ease),
visibility 0s linear 0s;
}
.lga-submenu-list { list-style: none; padding: 0; margin: 0; }
.lga-submenu-list a {
display: block;
padding: 10px 14px;
border-radius: var(--r-md);
color: var(--c-text);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-body-sm);
transition: background .15s var(--ease), color .15s var(--ease);
white-space: nowrap;
}
.lga-submenu-list a:hover { background: var(--c-card); color: var(--c-navy); }
.lga-submenu-list a strong {
display: block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--c-heading);
line-height: var(--lh-snug);
margin-bottom: 2px;
}
.lga-submenu-list a span {
display: block;
font-size: var(--fs-overline);
color: var(--c-text-mute);
line-height: var(--lh-snug);
font-weight: 400;
}
/* --- Variants --- */
/* Rich (О нас): left feature panel + list */
.lga-submenu--rich {
display: grid;
grid-template-columns: 200px 1fr;
gap: 14px;
padding: 18px;
width: 520px;
}
.lga-submenu-feature {
background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-teal) 100%);
color: #fff;
border-radius: var(--r-md);
padding: 20px 18px;
display: flex; flex-direction: column; justify-content: center;
gap: 8px;
}
.lga-submenu-feature strong {
font-family: var(--font-h);
font-weight: 700;
font-size: 18px;
line-height: 1.2;
color: #fff;
}
.lga-submenu-feature span {
font-size: 13px;
line-height: 1.45;
color: rgba(255,255,255,.85);
}
/* Pair (Обучение): list with subtitles, narrower */
.lga-submenu--pair { width: 280px; }
/* Bare (Журнал): just labels, compact */
.lga-submenu--bare {
width: 200px;
padding: 10px;
}
.lga-submenu--bare .lga-submenu-list a {
padding: 10px 12px;
font-size: 14px;
}
/* ====== Mega menu (Библиотека) ====== */
/* Anchor the wide mega panel to the header container, not the trigger */
.lga-header > .container { position: relative; }
.lga-menu-item.has-mega { position: static; }
.lga-submenu--mega {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 4px); /* matches .lga-submenu (О нас) */
margin-top: 16px; /* matches .lga-submenu */
width: min(1040px, calc(100vw - 48px));
background: #fff;
border-radius: var(--r-lg);
box-shadow:
0 16px 48px rgba(15, 30, 65, .14), /* same shadow as .lga-submenu */
0 2px 8px rgba(15, 30, 65, .06);
padding: 18px; /* matches .lga-submenu */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: /* identical timings to .lga-submenu */
opacity .22s var(--ease),
transform .28s var(--ease),
visibility 0s linear .28s;
z-index: 60;
}
.lga-menu-item.has-mega:hover .lga-submenu--mega,
.lga-menu-item.has-mega:focus-within .lga-submenu--mega {
transition:
opacity .22s var(--ease),
transform .28s var(--ease),
visibility 0s linear 0s;
}
/* Wide bridge — needed because mega sits far below trigger; geometry
forces this even though the animation matches О нас exactly. */
.lga-submenu--mega::before {
content: '';
position: absolute;
top: -60px;
left: 0;
right: 0;
height: 60px;
}
.lga-menu-item.has-mega:hover .lga-submenu--mega,
.lga-menu-item.has-mega:focus-within .lga-submenu--mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition:
opacity .22s var(--ease),
transform .28s var(--ease),
visibility 0s linear 0s;
}
.lga-mega-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 10px 10px 18px;
border-bottom: 1px solid var(--c-border);
margin-bottom: 14px;
}
.lga-mega-col h4 {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-h4);
color: var(--c-navy);
margin: 0 0 10px;
padding: 0 14px;
}
.lga-mega-col h4 svg { color: var(--c-teal); }
.lga-mega-col ul { list-style: none; padding: 0; margin: 0; }
.lga-mega-col li { margin: 0; }
/* Items mirror .lga-submenu-list a styling (О нас) */
.lga-mega-col li a {
display: block;
padding: 10px 14px;
border-radius: var(--r-md);
color: var(--c-text);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-body-sm);
transition: background .15s var(--ease), color .15s var(--ease);
white-space: normal;
}
.lga-mega-col li a:hover {
background: var(--c-card);
color: var(--c-navy);
}
/* Feature card in column 1 */
.lga-mega-feature {
display: flex; align-items: center; gap: 12px;
margin-top: 14px;
padding: 14px;
background: rgba(49, 151, 149, .12);
border-radius: var(--r-md);
transition: background .2s var(--ease), transform .25s var(--ease);
}
.lga-mega-feature:hover {
background: rgba(49, 151, 149, .2);
transform: translateY(-2px);
}
.lga-mega-feature-icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--c-teal);
color: #fff;
display: grid; place-items: center;
}
.lga-mega-feature-body { line-height: 1.3; }
.lga-mega-feature-body strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: 13.5px;
}
.lga-mega-feature-body span {
display: block;
color: var(--c-teal);
font-size: 12.5px;
margin-top: 2px;
font-weight: 600;
}
/* Download row in column 4 */
.lga-mega-sep {
border: none;
border-top: 1px solid var(--c-border);
margin: 12px 0;
}
.lga-mega-download {
display: inline-flex; align-items: center; gap: 6px;
color: var(--c-teal);
font-family: var(--font-h);
font-weight: 600;
font-size: 14px;
transition: color .15s var(--ease);
}
.lga-mega-download:hover { color: var(--c-navy); }
/* Search bar at the bottom of mega */
.lga-mega-search {
display: flex; align-items: center; gap: 10px;
background: var(--c-card);
border-radius: var(--r-pill);
padding: 6px 6px 6px 18px;
}
.lga-mega-search > svg:first-child { color: var(--c-text-mute); flex-shrink: 0; }
.lga-mega-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 14px;
padding: 10px 0;
color: var(--c-text);
}
.lga-mega-search input::placeholder { color: var(--c-text-mute); }
.lga-mega-search button {
width: 38px; height: 38px;
border-radius: 50%;
border: none;
background: var(--c-teal);
color: #fff;
cursor: pointer;
display: grid; place-items: center;
transition: background .2s var(--ease), transform .15s var(--ease);
}
.lga-mega-search button:hover { background: var(--c-navy); transform: scale(1.05); }
.lga-nav-actions { display: flex; align-items: center; gap: 8px; }
.lga-search-btn {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--c-card);
border: none;
color: var(--c-navy);
cursor: pointer;
display: grid; place-items: center;
transition: background .2s var(--ease);
}
.lga-search-btn:hover { background: var(--c-border); }
/* nav action buttons use the default .btn sizing (same as hero "Каталог курсов") */
/* ====== Hero ====== */
.lga-hero {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(1200px 600px at 80% 10%, rgba(49,151,149,.55), transparent 60%),
radial-gradient(900px 600px at 0% 100%, rgba(43,108,176,.6), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 35%, #1F586E 70%, #277985 100%);
padding: 96px 0 120px;
}
.lga-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.lga-hero-inner {
position: relative;
text-align: center;
max-width: 880px;
margin: 0 auto;
z-index: 2;
}
.lga-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: var(--c-gold);
color: #1A202C;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-caption);
letter-spacing: var(--ls-normal);
margin-bottom: 28px;
box-shadow: 0 10px 24px rgba(214, 158, 46, .35);
}
.lga-hero h1 {
color: #fff;
font-size: var(--fs-display);
font-weight: 700;
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: 24px;
}
.lga-hero-sub {
color: rgba(255,255,255,.85);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
margin: 0 auto 40px;
max-width: 640px;
}
.lga-hero-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.lga-scroll-mouse {
position: absolute;
bottom: 32px; left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.7);
display: block;
line-height: 0;
}
.lga-scroll-mouse-dot {
animation: scrollMouse 1.8s var(--ease) infinite;
}
@keyframes scrollMouse {
0% { transform: translateY(0); opacity: 0; }
20% { opacity: 1; }
80% { transform: translateY(10px); opacity: 0; }
100% { transform: translateY(10px); opacity: 0; }
}
/* ====== Stats bar ====== */
.lga-stats {
background: var(--c-navy);
color: #fff;
padding: 56px 0;
}
.lga-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.lga-stat { text-align: center; }
.lga-stat-num {
font-family: var(--font-h);
font-weight: 700;
font-size: clamp(40px, 5vw, 56px);
color: var(--c-gold);
line-height: 1;
letter-spacing: -0.02em;
}
.lga-stat-num span {
font-size: .65em;
margin-left: 2px;
color: var(--c-gold);
opacity: .85;
}
.lga-stat-label {
margin-top: 12px;
font-size: var(--fs-body-sm);
color: rgba(255,255,255,.75);
letter-spacing: var(--ls-normal);
line-height: var(--lh-snug);
}
/* ====== Section base ====== */
.lga-section { padding: 96px 0; background: var(--c-bg); }
.lga-section.is-tight { padding: 64px 0; }
.lga-section.is-light { background: var(--c-bg); }
.lga-section.is-white { background: var(--c-bg); } /* match live: page bg is uniform; cards are white */
.lga-section#cert-verify { background: #EFFAF7; } /* pale mint tint for cert section */
.lga-section#courses { background: var(--c-card); } /* slightly darker muted gray, matches live */
.lga-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 48px;
}
.lga-section-head-text { max-width: 640px; }
.lga-eyebrow {
display: inline-block;
color: var(--c-teal);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin-bottom: 12px;
}
.lga-section-head h2 { font-weight: 700; }
.lga-section-head p {
color: var(--c-text-soft);
margin: 12px 0 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
}
.lga-link {
color: var(--c-royal);
font-family: var(--font-h);
font-weight: 600;
display: inline-flex; gap: 6px;
transition: gap .2s var(--ease);
}
.lga-link:hover { gap: 12px; }
/* ====== Quick access ====== */
.lga-quick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.lga-quick-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 28px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
display: flex; flex-direction: column;
min-height: 240px;
}
.lga-quick-card:hover {
transform: translateY(-6px);
box-shadow: var(--sh-lg);
border-color: transparent;
}
.lga-quick-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(43,108,176,.12), rgba(49,151,149,.12));
color: var(--c-royal);
display: grid; place-items: center;
margin-bottom: 20px;
transition: background .3s var(--ease), color .3s var(--ease);
}
.lga-quick-card:hover .lga-quick-icon { background: var(--c-gold); color: #fff; }
.lga-quick-card h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.lga-quick-card p { color: var(--c-text-soft); flex: 1; margin: 0 0 18px; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.lga-quick-card .lga-link { font-size: var(--fs-body-sm); }
/* ====== Featured courses ====== */
.lga-course-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.lga-course-card {
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--c-border);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
display: flex; flex-direction: column;
}
.lga-course-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
}
.lga-course-thumb {
aspect-ratio: 16 / 10;
background: var(--c-card);
position: relative;
overflow: hidden;
}
.lga-course-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.lga-course-card:hover .lga-course-thumb img { transform: scale(1.04); }
.lga-course-cat-badge {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
background: #fff;
color: var(--c-navy);
padding: 5px 12px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: 12px;
}
.lga-course-fmt-badge {
position: absolute;
top: 14px; right: 14px;
z-index: 2;
background: rgba(26, 32, 44, .85);
color: #fff;
padding: 5px 12px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 500;
}
.lga-course-body {
padding: 22px;
display: flex; flex-direction: column; flex: 1;
}
.lga-course-body h3 {
font-size: var(--fs-h4);
line-height: var(--lh-snug);
margin-bottom: 12px;
color: var(--c-heading);
}
.lga-course-meta {
display: flex; gap: 16px;
color: var(--c-text-mute);
font-size: var(--fs-caption);
margin-bottom: 16px;
}
.lga-course-meta span { display: inline-flex; gap: 6px; align-items: center; }
.lga-course-body p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 18px;
flex: 1;
}
.lga-course-foot {
border-top: 1px solid var(--c-border);
padding-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-h);
}
.lga-course-foot a {
color: var(--c-royal);
font-weight: 600;
font-size: var(--fs-body-sm);
}
.lga-course-status {
display: inline-flex; align-items: center; gap: 6px;
color: var(--c-success);
font-size: var(--fs-caption);
font-weight: 500;
}
.lga-course-status::before {
content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success);
box-shadow: 0 0 0 4px rgba(56, 161, 105, .15);
}
/* ====== Best practices ====== */
.lga-practices {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 56px;
align-items: center;
}
.lga-practices-left .lga-eyebrow { color: var(--c-gold); }
.lga-practices-left h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 18px; }
.lga-practices-left p { color: var(--c-text-soft); margin: 0 0 28px; }
.lga-practices-metrics { display: flex; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; }
.lga-practices-metrics > div {
display: flex; align-items: baseline; gap: 12px;
}
.lga-practices-metrics div strong {
display: block;
font-family: var(--font-h);
font-size: var(--fs-h1);
color: var(--c-navy);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.lga-practices-metrics div span {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-practices-metrics div span small {
display: block;
color: var(--c-text-mute);
font-size: var(--fs-overline);
margin-top: 2px;
}
.lga-practices-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.lga-practice-card {
background: #fff;
border-radius: var(--r-md);
padding: 24px;
border: 1px solid var(--c-border);
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-practice-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(15, 30, 65, .12);
}
.lga-practice-region {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: 500;
color: var(--c-text);
background: #fff;
padding: 4px 12px;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
margin-bottom: 14px;
}
.lga-practice-card h4 {
font-size: var(--fs-h4);
margin: 0 0 12px;
line-height: var(--lh-snug);
color: var(--c-heading);
font-weight: 700;
}
.lga-practice-card p {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin: 0;
}
.lga-practice-metric {
color: var(--c-text-mute);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body-sm);
}
/* ====== News ====== */
.lga-news-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
}
.lga-news-featured {
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--c-border);
display: flex; flex-direction: column;
}
.lga-news-featured-img {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #1A365D, #319795);
position: relative;
}
.lga-news-featured-img::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.15), transparent 50%);
}
.lga-news-featured-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.lga-news-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.lga-news-cat {
background: var(--c-gold);
color: #1A202C;
padding: 4px 12px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: 12px;
}
.lga-news-date { color: var(--c-text-mute); font-size: 13px; }
.lga-news-featured h3 { font-size: 24px; margin-bottom: 12px; line-height: 1.3; }
.lga-news-featured p { color: var(--c-text-soft); margin: 0 0 20px; flex: 1; }
.lga-news-list { display: flex; flex-direction: column; gap: 18px; }
.lga-news-item {
display: grid;
grid-template-columns: 96px 1fr;
gap: 16px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 16px;
transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.lga-news-item:hover { transform: translateX(4px); border-color: var(--c-teal); }
.lga-news-item-img {
aspect-ratio: 1; border-radius: var(--r-sm);
background: linear-gradient(135deg, var(--c-royal), var(--c-teal));
}
.lga-news-item:nth-child(2) .lga-news-item-img { background: linear-gradient(135deg, var(--c-gold), var(--c-warning)); }
.lga-news-item:nth-child(3) .lga-news-item-img { background: linear-gradient(135deg, var(--c-navy), var(--c-royal)); }
.lga-news-item-meta {
font-size: 11.5px; color: var(--c-text-mute);
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 4px;
font-family: var(--font-h); font-weight: 600;
}
.lga-news-item h4 { font-size: 14.5px; line-height: 1.4; color: var(--c-heading); }
/* ====== Partners ====== */
.lga-partners {
background: var(--c-navy);
color: #fff;
padding: 64px 0;
text-align: center;
}
.lga-partners h3 {
color: #fff;
font-family: var(--font-h);
font-size: var(--fs-h2);
font-weight: 700;
margin-bottom: 10px;
letter-spacing: var(--ls-snug);
text-transform: none;
}
.lga-partners-sub {
color: rgba(255,255,255,.7);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
margin: 0 0 36px;
}
.lga-partners-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
align-items: center;
}
.lga-partner {
height: 56px;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-md);
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 600;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.03);
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
font-size: var(--fs-body-sm);
padding: 0 12px;
text-align: center;
}
.lga-partner:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
/* ====== CTA ====== */
.lga-cta {
background:
linear-gradient(110deg,
#E8A23A 0%,
#D69E2E 22%,
#C28A40 38%,
#6B7BA3 60%,
#3B5998 78%,
#2B6CB0 100%);
color: #fff;
padding: 88px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.lga-cta::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(800px 360px at 18% 50%, rgba(255, 235, 180, .25), transparent 60%),
radial-gradient(700px 400px at 85% 50%, rgba(43, 108, 176, .35), transparent 60%);
pointer-events: none;
}
.lga-cta > .container { position: relative; z-index: 1; }
.lga-cta h2 { color: #fff; margin-bottom: 14px; }
.lga-cta p { color: rgba(255,255,255,.85); margin: 0 0 32px; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.lga-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lga-cta-phone {
margin-top: 20px;
color: rgba(255,255,255,.7);
font-size: var(--fs-body-sm);
}
.lga-cta-phone a {
color: var(--c-gold);
font-weight: 600;
margin-left: 4px;
}
.lga-cta-phone a:hover { color: #F6E05E; }
/* ====== Footer ====== */
.lga-footer {
background: #0F172A;
color: rgba(255,255,255,.7);
padding: 72px 0 28px;
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
.lga-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 48px;
margin-bottom: 56px;
}
.lga-footer h4 {
color: #fff;
font-size: var(--fs-overline);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-wider);
margin: 0 0 18px;
}
.lga-footer ul { list-style: none; padding: 0; margin: 0; }
.lga-footer li { margin-bottom: 10px; }
.lga-footer a { color: rgba(255,255,255,.7); transition: color .2s var(--ease); }
.lga-footer a:hover { color: var(--c-gold); }
.lga-footer .lga-brand { color: #fff; margin-bottom: 16px; }
.lga-footer .lga-brand .lga-brand-text strong { color: #fff; }
.lga-footer-about p { color: rgba(255,255,255,.6); margin: 0 0 18px; line-height: 1.65; }
.lga-social { display: flex; gap: 10px; }
.lga-social a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.06);
display: grid; place-items: center;
transition: background .2s var(--ease);
}
.lga-social a:hover { background: var(--c-gold); }
.lga-social svg { width: 16px; height: 16px; }
.lga-contact-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; color: rgba(255,255,255,.7); }
.lga-contact-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--c-gold); }
.lga-footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,.5);
font-size: 13px;
flex-wrap: wrap;
gap: 12px;
}
.lga-footer-bottom a { color: rgba(255,255,255,.6); }
.lga-footer-bottom a:hover { color: var(--c-gold); }
.lga-footer-langs { display: inline-flex; align-items: center; gap: 4px; }
.lga-footer-langs .lga-lang { padding: 2px 6px; font-weight: 600; }
.lga-footer-langs .lga-lang.is-active { color: var(--c-gold); }
.lga-footer-langs .lga-lang-sep { color: rgba(255,255,255,.25); }
/* ====== Certificate verification ====== */
.lga-cert {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 56px;
align-items: center;
}
.lga-cert-text .lga-eyebrow { color: var(--c-gold-strong); }
.lga-cert-text h2 { margin-bottom: 16px; }
.lga-cert-text p { color: var(--c-text-soft); margin: 0 0 24px; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.lga-cert-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lga-cert-features li {
display: flex; align-items: flex-start; gap: 10px;
color: var(--c-text);
font-size: var(--fs-body);
}
.lga-cert-features svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--c-success);
background: rgba(56, 161, 105, .12);
border-radius: 50%;
padding: 2px;
width: 22px; height: 22px;
}
.lga-cert-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: var(--sh-lg);
position: relative;
overflow: hidden;
}
.lga-cert-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-navy), var(--c-teal), var(--c-gold));
}
.lga-cert-label {
display: block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-text-soft);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.lga-cert-input {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.lga-cert-input input {
flex: 1;
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 14px 16px;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--c-text);
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-cert-input input::placeholder { color: var(--c-text-mute); }
.lga-cert-input input:focus {
border-color: var(--c-royal);
box-shadow: 0 0 0 4px rgba(43,108,176,.12);
}
.lga-cert-input .btn { padding: 12px 22px; }
.lga-cert-modes {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--c-border);
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
flex-wrap: wrap;
}
.lga-cert-mode { display: inline-flex; align-items: center; gap: 6px; }
.lga-cert-mode svg { color: var(--c-royal); }
.lga-cert-mode-sep { color: var(--c-border); }
/* ====== Responsive ====== */
@media (max-width: 1024px) {
.lga-menu { gap: 18px; }
.lga-quick-grid, .lga-course-grid { grid-template-columns: repeat(2, 1fr); }
.lga-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.lga-practices { grid-template-columns: 1fr; gap: 40px; }
.lga-news-grid { grid-template-columns: 1fr; }
.lga-partners-row { grid-template-columns: repeat(3, 1fr); }
.lga-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.lga-cert { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
.lga-section { padding: 64px 0; }
.lga-hero { padding: 64px 0 88px; }
.lga-nav { grid-template-columns: auto auto; }
.lga-menu { display: none; }
.lga-nav-actions .btn-outline-navy { display: none; }
.lga-section-head { flex-direction: column; align-items: flex-start; }
.lga-quick-grid, .lga-course-grid, .lga-partners-row { grid-template-columns: 1fr; }
.lga-stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.lga-footer-grid { grid-template-columns: 1fr; }
.lga-practices-cards { grid-template-columns: 1fr; }
.lga-practice-card:nth-child(n) { margin-top: 0; }
.lga-footer-bottom { flex-direction: column; text-align: center; }
}
/* ====== Scroll reveal ====== */
.lga-reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity .8s cubic-bezier(0.16, 1, 0.3, 1),
transform .8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.lga-reveal.is-in {
opacity: 1;
transform: none;
}
/* Stagger: each subsequent child waits N×80ms longer */
.lga-stagger > .lga-reveal:nth-child(1) { transition-delay: 0ms; }
.lga-stagger > .lga-reveal:nth-child(2) { transition-delay: 90ms; }
.lga-stagger > .lga-reveal:nth-child(3) { transition-delay: 180ms; }
.lga-stagger > .lga-reveal:nth-child(4) { transition-delay: 270ms; }
.lga-stagger > .lga-reveal:nth-child(5) { transition-delay: 360ms; }
.lga-stagger > .lga-reveal:nth-child(6) { transition-delay: 450ms; }
/* Variants */
.lga-reveal.is-left { transform: translateX(-32px); }
.lga-reveal.is-right { transform: translateX(32px); }
.lga-reveal.is-scale { transform: scale(.96); }
.lga-reveal.is-in.is-left,
.lga-reveal.is-in.is-right,
.lga-reveal.is-in.is-scale { transform: none; }
/* Sticky-header shadow on scroll */
.lga-header.is-scrolled {
box-shadow: 0 6px 24px rgba(15, 30, 65, .08);
border-bottom-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.lga-reveal { opacity: 1 !important; transform: none !important; }
}
/* ====== Auth (login / register / forgot / reset) ====== */
.lga-auth {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(360px, 5fr) minmax(420px, 7fr);
}
/* Left: brand panel */
.lga-auth-panel {
position: relative;
background:
radial-gradient(800px 500px at 80% 10%, rgba(49,151,149,.55), transparent 60%),
radial-gradient(700px 500px at 0% 100%, rgba(43,108,176,.55), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 35%, #1F586E 70%, #277985 100%);
color: #fff;
padding: 48px 56px;
display: flex; flex-direction: column;
overflow: hidden;
}
.lga-auth-panel::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.lga-auth-brand img {
display: block;
height: 60px;
width: auto;
filter: brightness(0) invert(1);
opacity: .95;
position: relative;
}
.lga-auth-panel-body {
flex: 1;
display: flex; flex-direction: column; justify-content: center;
max-width: 460px;
position: relative;
}
.lga-auth-panel-body .lga-eyebrow { color: var(--c-gold); }
.lga-auth-panel-body h1 {
color: #fff;
font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 12px 0 16px;
}
.lga-auth-panel-body p {
color: rgba(255,255,255,.85);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
margin: 0 0 28px;
}
.lga-auth-bullets {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
}
.lga-auth-bullets li {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.92);
font-size: var(--fs-body);
}
.lga-auth-bullets svg {
flex-shrink: 0;
width: 22px; height: 22px;
padding: 3px;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: var(--c-gold);
}
.lga-auth-back {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,.7);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
transition: color .2s var(--ease), gap .2s var(--ease);
position: relative;
width: max-content;
}
.lga-auth-back:hover { color: #fff; gap: 12px; }
/* Right: form */
.lga-auth-form-wrap {
display: flex; align-items: center; justify-content: center;
padding: 48px 24px;
background: var(--c-bg);
}
.lga-auth-form {
width: 100%;
max-width: 440px;
background: #fff;
border-radius: var(--r-lg);
padding: 40px;
box-shadow: 0 12px 36px rgba(15, 30, 65, .08);
border: 1px solid var(--c-border);
}
.lga-auth-form h2 {
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
margin: 0 0 8px;
}
.lga-auth-sub {
color: var(--c-text-soft);
font-size: var(--fs-body);
margin: 0 0 28px;
}
.lga-auth-alert {
background: rgba(229, 62, 62, .08);
border: 1px solid rgba(229, 62, 62, .2);
color: #C53030;
padding: 12px 14px;
border-radius: var(--r-md);
font-size: var(--fs-body-sm);
margin-bottom: 20px;
}
.lga-auth-alert > div + div { margin-top: 4px; }
.lga-auth-alert--ok {
background: rgba(56, 161, 105, .08);
border-color: rgba(56, 161, 105, .25);
color: #276749;
}
.lga-field {
display: block;
margin-bottom: 18px;
}
.lga-field-label {
display: block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--c-heading);
margin-bottom: 8px;
}
.lga-field input,
.lga-field textarea,
.lga-field select {
width: 100%;
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 12px 16px;
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--c-text);
background: #fff;
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-field textarea { resize: vertical; min-height: 96px; line-height: var(--lh-relaxed); }
.lga-field input[type="file"] {
padding: 10px 14px;
cursor: pointer;
}
.lga-field input::placeholder,
.lga-field textarea::placeholder { color: var(--c-text-mute); }
.lga-field input:focus,
.lga-field textarea:focus,
.lga-field select:focus {
border-color: var(--c-royal);
box-shadow: 0 0 0 4px rgba(43,108,176,.12);
}
.lga-field-label small {
color: var(--c-text-mute);
font-weight: 400;
font-size: var(--fs-overline);
margin-left: 6px;
}
.lga-checkbox--block {
display: flex;
width: 100%;
margin: 6px 0 14px;
color: var(--c-text);
}
.lga-auth-extra {
padding: 18px;
margin: 4px 0 18px;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 4px;
}
.lga-auth-extra.is-hidden { display: none; }
.lga-field-input-wrap {
position: relative;
display: block;
}
.lga-field-input-wrap input { padding-right: 44px; }
.lga-field-toggle {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
width: 34px; height: 34px;
border-radius: 50%;
color: var(--c-text-mute);
cursor: pointer;
display: grid; place-items: center;
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-field-toggle:hover { background: var(--c-card); color: var(--c-navy); }
.lga-field-toggle.is-shown { color: var(--c-royal); }
.lga-auth-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
margin: 4px 0 24px;
font-size: var(--fs-body-sm);
}
.lga-checkbox {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
color: var(--c-text-soft);
}
.lga-checkbox input {
width: 16px; height: 16px;
accent-color: var(--c-navy);
cursor: pointer;
}
.lga-auth-submit {
width: 100%;
padding: 14px 22px;
font-size: var(--fs-body);
}
.lga-auth-foot {
margin: 24px 0 0;
text-align: center;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
}
/* ====== Page head band (breadcrumbs + h1 on inner pages) ====== */
.lga-pagehead {
background:
radial-gradient(800px 400px at 75% 10%, rgba(49,151,149,.45), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 50%, #1F586E 100%);
color: #fff;
padding: 64px 0 56px;
position: relative;
overflow: hidden;
}
.lga-pagehead::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.lga-pagehead > .container { position: relative; z-index: 1; }
.lga-pagehead h1 {
color: #fff;
font-size: clamp(2rem, 2vw + 1rem, 3rem);
margin: 14px 0 12px;
letter-spacing: var(--ls-tight);
}
.lga-pagehead p {
color: rgba(255,255,255,.85);
font-size: var(--fs-body-lg);
margin: 0;
}
.lga-crumbs {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-h);
font-size: var(--fs-caption);
color: rgba(255,255,255,.75);
}
.lga-crumbs a {
color: rgba(255,255,255,.75);
transition: color .15s var(--ease);
}
.lga-crumbs a:hover { color: var(--c-gold); }
.lga-crumbs span[aria-hidden] { color: rgba(255,255,255,.4); }
.lga-crumbs span[aria-current] { color: #fff; }
/* ====== About: mission card ====== */
.lga-mission-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: 0 4px 14px rgba(15,30,65,.06);
max-width: 900px;
margin: 0 auto;
}
.lga-mission-card header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.lga-mission-card header h2 { font-size: var(--fs-h3); margin: 0; }
.lga-mission-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(43,108,176,.12), rgba(49,151,149,.12));
color: var(--c-royal);
display: grid; place-items: center;
}
.lga-mission-card p {
margin: 0;
color: var(--c-text-soft);
line-height: var(--lh-relaxed);
font-size: var(--fs-body);
}
/* ====== About: pillars (Чем мы занимаемся) ====== */
.lga-about-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.lga-pillar {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 28px;
text-align: center;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,30,65,.10); }
.lga-pillar-icon {
width: 56px; height: 56px;
margin: 0 auto 18px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(43,108,176,.12), rgba(49,151,149,.12));
color: var(--c-royal);
display: grid; place-items: center;
}
.lga-pillar h3 { font-size: var(--fs-h3); margin: 0 0 10px; }
.lga-pillar p {
margin: 0;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
/* ====== About: timeline ====== */
.lga-timeline {
list-style: none;
padding: 0; margin: 0;
max-width: 760px;
margin-inline: auto;
position: relative;
}
.lga-timeline::before {
content: '';
position: absolute;
left: 24px; top: 24px; bottom: 24px;
width: 2px;
background: linear-gradient(to bottom, var(--c-border), var(--c-royal), var(--c-border));
}
.lga-timeline li {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 16px 20px;
margin-bottom: 14px;
position: relative;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-timeline li:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(15,30,65,.08); }
.lga-timeline-mark {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--c-royal);
color: #fff;
font-family: var(--font-h);
font-weight: 700;
font-size: 17px;
display: grid; place-items: center;
position: relative;
z-index: 1;
}
.lga-timeline li.is-current .lga-timeline-mark {
background: var(--c-gold);
box-shadow: 0 0 0 6px rgba(214,158,46,.18);
font-size: 24px;
line-height: 1;
}
.lga-timeline-body h4 {
margin: 0 0 4px;
font-size: var(--fs-h4);
color: var(--c-heading);
}
.lga-timeline-body p {
margin: 0;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
/* ====== About: founders ====== */
.lga-founders {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.lga-founder {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 28px;
text-align: center;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-founder:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,30,65,.10); }
.lga-founder-icon {
width: 64px; height: 64px;
margin: 0 auto 18px;
border-radius: 16px;
background: linear-gradient(135deg, var(--c-navy), var(--c-teal));
color: #fff;
display: grid; place-items: center;
}
.lga-founder h3 { font-size: var(--fs-h3); margin: 0 0 10px; }
.lga-founder p {
margin: 0 0 16px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
/* ====== Partners: larger grid for /about ====== */
.lga-partners-row--lg {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
.lga-partners-row--lg { grid-template-columns: repeat(2, 1fr); }
}
/* ====== About responsive ====== */
@media (max-width: 900px) {
.lga-about-pillars { grid-template-columns: 1fr; }
.lga-founders { grid-template-columns: 1fr; }
.lga-timeline { padding-left: 8px; }
}
/* ====== Catalog (filters sidebar + courses grid) ====== */
.lga-catalog-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
/* ----- Filters sidebar ----- */
.lga-filters {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
position: sticky;
top: 100px;
}
.lga-filter-block {
border: none;
padding: 0;
margin: 0 0 20px;
}
.lga-filter-block + .lga-filter-block {
padding-top: 20px;
border-top: 1px solid var(--c-border);
}
.lga-filter-label,
.lga-filters legend {
display: block;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
color: var(--c-heading);
margin: 0 0 10px;
padding: 0;
}
.lga-filter-list {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 8px;
}
.lga-filter-list label {
display: flex; align-items: center; gap: 8px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
cursor: pointer;
padding: 4px 0;
transition: color .15s var(--ease);
}
.lga-filter-list label:hover { color: var(--c-navy); }
.lga-filter-list input[type="checkbox"],
.lga-filter-list input[type="radio"] {
width: 16px; height: 16px;
accent-color: var(--c-navy);
cursor: pointer;
}
.lga-radio input[type="radio"]:checked + span,
.lga-checkbox input[type="checkbox"]:checked + span {
color: var(--c-navy);
font-weight: 500;
}
.lga-filter-search-wrap {
position: relative;
display: block;
}
.lga-filter-search-wrap svg {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--c-text-mute);
}
.lga-filter-search-wrap input {
width: 100%;
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 10px 12px 10px 38px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
background: #fff;
color: var(--c-text);
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-filter-search-wrap input:focus {
border-color: var(--c-royal);
box-shadow: 0 0 0 4px rgba(43,108,176,.12);
}
.lga-filter-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.lga-filter-apply { width: 100%; padding: 10px 16px; }
/* ----- Catalog content header ----- */
.lga-catalog-content {
min-width: 0;
}
.lga-catalog-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
margin-bottom: 20px;
}
.lga-catalog-count {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
}
.lga-catalog-count strong {
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 700;
}
.lga-sort {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-body-sm);
color: var(--c-text-soft);
}
.lga-sort select {
border: 1.5px solid var(--c-border);
border-radius: var(--r-sm);
padding: 6px 30px 6px 12px;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--c-navy);
background: #fff url("data:image/svg+xml;utf8,") right 10px center / 10px no-repeat;
cursor: pointer;
appearance: none;
outline: none;
}
.lga-sort select:focus { border-color: var(--c-royal); box-shadow: 0 0 0 3px rgba(43,108,176,.12); }
/* ----- Course cards grid (3 columns, larger variant) ----- */
.lga-catalog-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.lga-course-card--lg .lga-course-body { padding: 20px 22px 22px; }
.lga-course-card--lg .lga-course-thumb { aspect-ratio: 16 / 10; }
.lga-course-meta-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.lga-course-rating {
display: inline-flex; align-items: center; gap: 4px;
color: var(--c-gold-strong);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
}
.lga-course-rating svg { color: var(--c-gold); }
.lga-course-price {
font-family: var(--font-h);
font-weight: 700;
color: var(--c-navy);
font-size: var(--fs-body-lg);
}
.lga-course-card--lg .lga-course-foot {
flex-direction: row;
align-items: center;
}
.lga-course-card--lg .lga-course-foot .btn { padding: 8px 16px; }
/* ----- Pagination ----- */
.lga-pagination {
margin-top: 28px;
display: flex;
justify-content: center;
}
.lga-pagination nav,
.lga-pagination ul.pagination {
display: inline-flex;
list-style: none;
padding: 0; margin: 0;
gap: 6px;
}
.lga-pagination .page-item .page-link,
.lga-pagination a, .lga-pagination span {
min-width: 38px; height: 38px;
padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
background: #fff;
border: 1px solid var(--c-border);
color: var(--c-text);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
transition: all .15s var(--ease);
}
.lga-pagination .page-item.active .page-link,
.lga-pagination .active a {
background: var(--c-navy);
color: #fff;
border-color: var(--c-navy);
}
.lga-pagination a:hover { border-color: var(--c-navy); color: var(--c-navy); }
/* ----- Catalog responsive ----- */
@media (max-width: 1024px) {
.lga-catalog-grid { grid-template-columns: 240px 1fr; gap: 24px; }
.lga-catalog-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.lga-catalog-grid { grid-template-columns: 1fr; }
.lga-filters { position: static; }
.lga-catalog-cards { grid-template-columns: 1fr; }
.lga-catalog-header { flex-direction: column; align-items: flex-start; }
}
/* ====== Newsroom (blog/news) ====== */
.lga-newsroom-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
align-items: start;
}
.lga-newsroom-content { min-width: 0; }
/* Featured article */
.lga-news-featured-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 28px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-news-featured-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(15, 30, 65, .10);
}
.lga-news-featured-img {
display: block;
aspect-ratio: 16 / 7;
overflow: hidden;
background: var(--c-card);
}
.lga-news-featured-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}
.lga-news-featured-card:hover .lga-news-featured-img img { transform: scale(1.03); }
.lga-news-featured-body { padding: 28px; }
.lga-news-featured-body h2 {
font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
margin: 12px 0 14px;
line-height: var(--lh-snug);
}
.lga-news-featured-body h2 a {
color: var(--c-heading);
transition: color .15s var(--ease);
}
.lga-news-featured-body h2 a:hover { color: var(--c-royal); }
.lga-news-featured-body p {
color: var(--c-text-soft);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
margin: 0 0 20px;
}
.lga-news-featured-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.lga-news-author {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
/* Meta row */
.lga-news-meta-top {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lga-news-cat {
background: var(--c-card);
color: var(--c-navy);
padding: 4px 12px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
}
.lga-news-cat--gold { background: var(--c-gold); color: #1A202C; }
.lga-news-date,
.lga-news-read {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
/* Category tabs */
.lga-news-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 6px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
margin-bottom: 22px;
}
.lga-news-tab {
padding: 8px 18px;
border-radius: var(--r-pill);
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
transition: background .2s var(--ease), color .2s var(--ease);
}
.lga-news-tab:hover { color: var(--c-navy); background: var(--c-card); }
.lga-news-tab.is-active {
background: var(--c-navy);
color: #fff;
}
/* Mini article cards (in grid) */
.lga-news-grid-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.lga-news-mini {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-news-mini:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 30, 65, .10); }
.lga-news-mini-img {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--c-card);
}
.lga-news-mini-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.lga-news-mini:hover .lga-news-mini-img img { transform: scale(1.04); }
.lga-news-mini-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.lga-news-mini-body h3 {
font-size: var(--fs-h4);
margin: 10px 0 8px;
line-height: var(--lh-snug);
}
.lga-news-mini-body h3 a {
color: var(--c-heading);
transition: color .15s var(--ease);
}
.lga-news-mini-body h3 a:hover { color: var(--c-royal); }
.lga-news-mini-body p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 12px;
flex: 1;
line-height: var(--lh-relaxed);
}
/* ----- Newsroom sidebar ----- */
.lga-newsroom-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 100px;
}
.lga-sidebar-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-sidebar-card h3 {
font-size: var(--fs-h4);
margin: 0 0 8px;
}
.lga-sidebar-card > p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 16px;
}
.lga-sidebar-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(43,108,176,.12), rgba(49,151,149,.12));
color: var(--c-royal);
display: grid; place-items: center;
margin-bottom: 14px;
}
/* Subscribe form */
.lga-subscribe {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.lga-subscribe input {
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 12px 14px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--c-text);
background: #fff;
outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-subscribe input:focus { border-color: var(--c-royal); box-shadow: 0 0 0 4px rgba(43,108,176,.12); }
.lga-subscribe .btn { width: 100%; padding: 10px 16px; }
.lga-subscribe-note {
display: block;
color: var(--c-text-mute);
font-size: var(--fs-overline);
line-height: var(--lh-snug);
}
/* Popular list */
.lga-popular-list {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 14px;
}
.lga-popular-list li {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
align-items: start;
}
.lga-popular-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-navy);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
display: grid; place-items: center;
flex-shrink: 0;
}
.lga-popular-list a {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
margin-bottom: 4px;
transition: color .15s var(--ease);
}
.lga-popular-list a:hover { color: var(--c-royal); }
.lga-popular-list time {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Tags cloud */
.lga-tags {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-wrap: wrap;
gap: 8px;
}
.lga-tags a {
display: inline-block;
padding: 6px 14px;
background: var(--c-card);
color: var(--c-text-soft);
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-tags a:hover { background: var(--c-navy); color: #fff; }
/* ----- Newsroom responsive ----- */
@media (max-width: 1024px) {
.lga-newsroom-grid { grid-template-columns: 1fr; }
.lga-newsroom-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
.lga-newsroom-sidebar > .lga-sidebar-card { flex: 1 1 280px; }
}
@media (max-width: 720px) {
.lga-news-grid-cards { grid-template-columns: 1fr; }
.lga-news-featured-body { padding: 22px; }
.lga-newsroom-sidebar { flex-direction: column; }
}
/* ====== Contacts page ====== */
.lga-contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
/* Form */
.lga-contact-form-wrap {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-contact-form-wrap h2 {
font-size: var(--fs-h3);
margin: 0 0 8px;
}
.lga-contact-form-sub {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 22px;
}
.lga-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lga-contact-form .lga-field { margin-bottom: 16px; }
.lga-req { color: #C53030; margin-left: 2px; }
.lga-contact-submit {
width: 100%;
padding: 14px 22px;
font-size: var(--fs-body);
margin-top: 4px;
}
/* Flash messages */
.lga-flash {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-radius: var(--r-md);
font-size: var(--fs-body-sm);
margin-bottom: 24px;
border: 1px solid;
}
.lga-flash--ok { background: rgba(56, 161, 105, .08); border-color: rgba(56, 161, 105, .25); color: #276749; }
.lga-flash--err { background: rgba(229, 62, 62, .08); border-color: rgba(229, 62, 62, .2); color: #C53030; }
/* Info side */
.lga-contact-info { display: flex; flex-direction: column; gap: 20px; }
.lga-contact-row {
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid var(--c-border);
}
.lga-contact-row:last-of-type { border-bottom: none; }
.lga-contact-ico {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-navy);
display: grid; place-items: center;
}
.lga-contact-row strong {
display: block;
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body-sm);
margin-bottom: 2px;
}
.lga-contact-row span,
.lga-contact-row a {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-contact-row a:hover { color: var(--c-navy); }
.lga-contact-social {
display: flex;
gap: 10px;
padding-top: 18px;
margin-top: 6px;
border-top: 1px solid var(--c-border);
}
.lga-contact-social a {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-navy);
display: grid; place-items: center;
transition: background .2s var(--ease), color .2s var(--ease);
}
.lga-contact-social a:hover { background: var(--c-navy); color: #fff; }
/* Map */
.lga-map {
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
aspect-ratio: 16 / 10;
}
.lga-map iframe {
display: block;
width: 100%; height: 100%;
border: none;
}
/* Regional representatives accordion */
.lga-regions {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 880px;
margin: 0 auto;
}
.lga-region {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-region:hover { border-color: var(--c-royal); }
.lga-region[open] {
border-color: var(--c-royal);
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-region summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
cursor: pointer;
list-style: none;
user-select: none;
}
.lga-region summary::-webkit-details-marker { display: none; }
.lga-region-name {
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body);
color: var(--c-heading);
}
.lga-region-chevron {
color: var(--c-text-mute);
transition: transform .25s var(--ease);
}
.lga-region[open] .lga-region-chevron { transform: rotate(180deg); color: var(--c-royal); }
.lga-region-body {
padding: 0 20px 20px 64px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
display: flex;
flex-direction: column;
gap: 6px;
}
.lga-region-body strong {
color: var(--c-heading);
margin-right: 4px;
font-weight: 600;
}
/* Select dropdown — same look as inputs */
.lga-field select {
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") right 14px center / 12px no-repeat;
padding-right: 38px;
cursor: pointer;
}
/* Contacts responsive */
@media (max-width: 900px) {
.lga-contacts-grid { grid-template-columns: 1fr; }
.lga-form-row { grid-template-columns: 1fr; }
}
/* ====== Library page ====== */
.lga-pagehead--lg { padding: 72px 0 80px; }
.lga-pagehead-search {
display: flex;
align-items: center;
gap: 8px;
margin-top: 28px;
background: #fff;
border-radius: var(--r-pill);
padding: 6px 6px 6px 22px;
max-width: 720px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}
.lga-pagehead-search > svg { color: var(--c-text-mute); flex-shrink: 0; }
.lga-pagehead-search input {
flex: 1;
border: none;
outline: none;
font-family: var(--font-body);
font-size: var(--fs-body);
padding: 12px 8px;
background: transparent;
color: var(--c-text);
}
.lga-pagehead-search input::placeholder { color: var(--c-text-mute); }
.lga-pagehead-search .btn { padding: 12px 22px; }
/* Region map */
.lga-regions-map {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
align-items: start;
}
.lga-regions-canvas {
position: relative;
aspect-ratio: 2 / 1;
background: linear-gradient(135deg, rgba(43,108,176,.04), rgba(49,151,149,.04));
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
}
.lga-regions-canvas svg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
}
.lga-region-pin {
position: absolute;
width: var(--size, 32px);
height: var(--size, 32px);
border-radius: 50%;
color: #fff;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: 12px;
line-height: 1;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.lga-region-pin::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: var(--pin-bg, currentColor);
opacity: .18;
z-index: -1;
animation: pinPulse 2.4s var(--ease) infinite;
}
.lga-region-pin:hover {
transform: translate(-50%, -50%) scale(1.12);
box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.lga-region-pin strong { font-size: 11px; }
@keyframes pinPulse {
0% { transform: scale(1); opacity: .25; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
.lga-regions-legend {
list-style: none;
padding: 24px;
margin: 0;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
display: flex; flex-direction: column;
gap: 4px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-regions-legend li {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 4px;
border-bottom: 1px solid var(--c-border);
}
.lga-regions-legend li:last-child { border-bottom: none; }
.lga-legend-dot {
width: 12px; height: 12px;
border-radius: 50%;
display: inline-block;
}
.lga-legend-name {
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
color: var(--c-text);
}
.lga-legend-count {
font-family: var(--font-h);
font-weight: 700;
color: var(--c-navy);
font-size: var(--fs-body-sm);
background: var(--c-card);
padding: 2px 10px;
border-radius: var(--r-pill);
}
/* Filter bar */
.lga-practices-filterbar {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 16px 20px;
margin-bottom: 28px;
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: 16px;
align-items: end;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-practices-filterbar label {
display: flex; flex-direction: column;
gap: 6px;
}
.lga-practices-filterbar label > span {
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-text-mute);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.lga-practices-filterbar select {
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 10px 36px 10px 14px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--c-text);
background: #fff url("data:image/svg+xml;utf8,") right 14px center / 10px no-repeat;
appearance: none;
cursor: pointer;
outline: none;
}
.lga-practices-filterbar select:focus { border-color: var(--c-royal); box-shadow: 0 0 0 4px rgba(43,108,176,.12); }
.lga-practices-filterbar .btn { padding: 10px 22px; height: 42px; }
/* Practice tile cards */
.lga-practices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.lga-practice-tile {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-practice-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 30, 65, .10); }
.lga-practice-tile-img {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--c-card);
}
.lga-practice-tile-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.lga-practice-tile:hover .lga-practice-tile-img img { transform: scale(1.05); }
.lga-practice-tile-region {
position: absolute;
top: 12px; left: 12px;
background: var(--c-teal);
color: #fff;
padding: 4px 12px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
z-index: 2;
}
.lga-practice-tile-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.lga-practice-tile-cat {
display: inline-block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-text-mute);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-bottom: 8px;
}
.lga-practice-tile-body h3 {
font-size: var(--fs-h4);
margin: 0 0 8px;
line-height: var(--lh-snug);
}
.lga-practice-tile-body h3 a {
color: var(--c-heading);
transition: color .15s var(--ease);
}
.lga-practice-tile-body h3 a:hover { color: var(--c-royal); }
.lga-practice-tile-body p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
margin: 0 0 14px;
flex: 1;
}
.lga-practice-tile-meta {
display: flex;
gap: 14px;
color: var(--c-text-mute);
font-size: var(--fs-caption);
margin-bottom: 14px;
}
.lga-practice-tile-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lga-practice-tile-foot {
display: flex; justify-content: space-between; align-items: center;
padding-top: 14px;
border-top: 1px solid var(--c-border);
}
.lga-practice-tile-metric {
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
}
/* Submit CTA */
.lga-cta-submit {
padding: 64px 0;
background: var(--c-bg);
}
.lga-cta-submit-card {
background:
linear-gradient(110deg, rgba(43,108,176,.05), rgba(49,151,149,.10) 50%, rgba(214,158,46,.08));
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 40px;
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 24px;
align-items: center;
}
.lga-cta-submit-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--c-gold);
color: #fff;
display: grid; place-items: center;
box-shadow: 0 8px 20px rgba(214, 158, 46, .3);
}
.lga-cta-submit-text h2 { font-size: var(--fs-h3); margin: 0 0 4px; }
.lga-cta-submit-text p {
color: var(--c-text-soft);
font-size: var(--fs-body);
margin: 0;
line-height: var(--lh-snug);
}
/* Library responsive */
@media (max-width: 1024px) {
.lga-regions-map { grid-template-columns: 1fr; }
.lga-practices-filterbar { grid-template-columns: repeat(2, 1fr); }
.lga-practices-filterbar .btn { grid-column: span 2; }
.lga-practices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.lga-practices-filterbar { grid-template-columns: 1fr; }
.lga-practices-filterbar .btn { grid-column: span 1; }
.lga-practices-grid { grid-template-columns: 1fr; }
.lga-cta-submit-card { grid-template-columns: 1fr; text-align: center; padding: 28px; }
.lga-cta-submit-icon { margin: 0 auto; }
}
/* ====== Journal page ====== */
.lga-journal-hero {
color: #fff;
padding: 80px 0 100px;
background:
radial-gradient(900px 600px at 80% 10%, rgba(49, 151, 149, .5), transparent 60%),
radial-gradient(700px 500px at 0% 100%, rgba(43, 108, 176, .55), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 35%, #1F586E 70%, #277985 100%);
position: relative;
overflow: hidden;
}
.lga-journal-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.lga-journal-hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: center;
}
.lga-journal-hero h1 {
color: #fff;
font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
font-weight: 800;
letter-spacing: var(--ls-tight);
margin: 12px 0 24px;
line-height: var(--lh-tight);
}
.lga-issue-quote {
font-family: 'Noto Serif', Georgia, serif;
font-style: italic;
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: rgba(255, 255, 255, .9);
padding: 16px 0 16px 22px;
border-left: 3px solid var(--c-gold);
margin: 0 0 32px;
}
.lga-issue-stats {
display: flex;
gap: 36px;
margin-bottom: 32px;
}
.lga-issue-stats > div {
display: flex; flex-direction: column;
gap: 4px;
}
.lga-issue-stats strong {
font-family: var(--font-h);
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
color: var(--c-gold);
font-weight: 700;
line-height: 1;
}
.lga-issue-stats span {
color: rgba(255, 255, 255, .75);
font-size: var(--fs-body-sm);
}
.lga-journal-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Cover card preview (tilted) */
.lga-journal-hero-cover {
display: flex;
justify-content: center;
align-items: center;
perspective: 1200px;
}
.lga-cover-card {
background: #fff;
color: var(--c-heading);
border-radius: var(--r-md);
padding: 28px 24px;
width: 280px;
box-shadow:
0 30px 60px rgba(0, 0, 0, .35),
0 6px 16px rgba(0, 0, 0, .15);
transform: rotate(4deg) rotateY(-6deg);
position: relative;
transition: transform .5s var(--ease);
}
.lga-cover-card:hover { transform: rotate(0deg) rotateY(0deg); }
.lga-cover-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-md);
border-top: 3px solid var(--c-gold);
}
.lga-cover-badge {
display: inline-block;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
color: var(--c-gold-strong);
background: rgba(214, 158, 46, .12);
padding: 4px 10px;
border-radius: var(--r-sm);
margin-bottom: 14px;
}
.lga-cover-title {
font-family: var(--font-h);
font-weight: 800;
font-size: 22px;
letter-spacing: 0.02em;
color: var(--c-navy);
margin-bottom: 6px;
}
.lga-cover-date {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin-bottom: 16px;
}
.lga-cover-list {
list-style: none;
padding: 14px 0 0;
margin: 0;
border-top: 1px dashed var(--c-border);
display: flex; flex-direction: column;
gap: 8px;
}
.lga-cover-list li {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
position: relative;
padding-left: 16px;
line-height: var(--lh-snug);
}
.lga-cover-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-teal);
}
/* Current issue grid */
.lga-issue-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
align-items: start;
}
.lga-issue-feature {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-issue-feature:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 30, 65, .10); }
.lga-issue-feature-img {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--c-card);
position: relative;
}
.lga-issue-feature-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.lga-issue-feature:hover .lga-issue-feature-img img { transform: scale(1.04); }
.lga-issue-feature-cat {
position: absolute;
top: 14px; left: 14px;
background: var(--c-gold);
color: #1A202C;
padding: 4px 12px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
}
.lga-issue-feature-body { padding: 24px; }
.lga-issue-feature-body h3 {
font-size: var(--fs-h3);
margin: 0 0 12px;
line-height: var(--lh-snug);
}
.lga-issue-feature-body h3 a { color: var(--c-heading); transition: color .15s var(--ease); }
.lga-issue-feature-body h3 a:hover { color: var(--c-royal); }
.lga-issue-feature-body p {
color: var(--c-text-soft);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
margin: 0 0 18px;
}
.lga-issue-feature-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--c-border);
}
.lga-issue-author { color: var(--c-text-mute); font-size: var(--fs-body-sm); }
/* Mini articles list */
.lga-issue-mini-list {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 10px;
}
.lga-issue-mini-list li a {
display: block;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-issue-mini-list li a:hover {
transform: translateX(4px);
border-color: var(--c-royal);
box-shadow: 0 6px 14px rgba(15, 30, 65, .06);
}
.lga-issue-mini-cat {
display: inline-block;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
padding: 3px 8px;
border-radius: var(--r-sm);
margin-bottom: 8px;
}
.lga-issue-mini-cat.is-teal { background: rgba(49,151,149,.12); color: #2C7A7B; }
.lga-issue-mini-cat.is-royal { background: rgba(43,108,176,.12); color: var(--c-royal); }
.lga-issue-mini-cat.is-purple { background: rgba(128,90,213,.12); color: #6B46C1; }
.lga-issue-mini-cat.is-gold { background: rgba(214,158,46,.15); color: var(--c-gold-strong); }
.lga-issue-mini-list strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body);
line-height: var(--lh-snug);
margin-bottom: 4px;
}
.lga-issue-mini-desc {
display: block;
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
/* Rubrics grid */
.lga-rubrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.lga-rubric-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 22px 20px;
text-align: left;
position: relative;
cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
border-top: 3px solid var(--rubric-color, var(--c-royal));
}
.lga-rubric-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(15, 30, 65, .10);
}
.lga-rubric-emoji {
display: block;
font-size: 28px;
line-height: 1;
margin-bottom: 12px;
}
.lga-rubric-card h3 {
font-size: var(--fs-h4);
margin: 0 0 6px;
color: var(--c-heading);
}
.lga-rubric-card p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
margin: 0 0 12px;
}
.lga-rubric-count {
display: inline-block;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-caption);
color: var(--rubric-color, var(--c-royal));
background: color-mix(in srgb, var(--rubric-color, var(--c-royal)) 12%, transparent);
padding: 4px 10px;
border-radius: var(--r-pill);
}
/* Archive cards */
.lga-archive-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.lga-archive-card {
aspect-ratio: 3 / 4;
color: #fff;
border-radius: var(--r-md);
padding: 18px;
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px rgba(15, 30, 65, .15);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-archive-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(15, 30, 65, .25);
}
.lga-archive-card::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 50%);
pointer-events: none;
}
.lga-archive-badge {
display: inline-block;
background: rgba(255,255,255,.18);
color: #fff;
padding: 3px 10px;
border-radius: var(--r-sm);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
width: max-content;
margin-bottom: auto;
}
.lga-archive-card strong {
font-family: var(--font-h);
font-weight: 800;
font-size: 15px;
letter-spacing: .04em;
margin-bottom: 4px;
z-index: 1;
}
.lga-archive-date {
color: rgba(255,255,255,.8);
font-size: var(--fs-body-sm);
z-index: 1;
}
.lga-archive-link {
position: absolute;
bottom: 14px; right: 14px;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.2);
color: #fff;
display: grid; place-items: center;
transition: background .2s var(--ease);
z-index: 2;
}
.lga-archive-link:hover { background: var(--c-gold); }
/* Subscription tiers */
.lga-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
margin-bottom: 32px;
}
.lga-tier {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 28px;
display: flex; flex-direction: column;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
position: relative;
}
.lga-tier:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15, 30, 65, .10); }
.lga-tier--featured {
border-color: var(--c-gold);
border-width: 2px;
transform: scale(1.02);
background: linear-gradient(180deg, rgba(214,158,46,.04), #fff 30%);
}
.lga-tier-ribbon {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--c-gold);
color: #1A202C;
padding: 5px 14px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
box-shadow: 0 8px 20px rgba(214, 158, 46, .3);
}
.lga-tier header { margin-bottom: 20px; }
.lga-tier-icon {
display: inline-grid; place-items: center;
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(43,108,176,.12), rgba(49,151,149,.12));
color: var(--c-royal);
margin-bottom: 14px;
}
.lga-tier--featured .lga-tier-icon { background: var(--c-gold); color: #fff; }
.lga-tier h3 { font-size: var(--fs-h3); margin: 0 0 6px; }
.lga-tier header p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0;
}
.lga-tier-price {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 24px;
}
.lga-tier-price strong {
font-family: var(--font-h);
font-weight: 700;
font-size: clamp(1.75rem, 1.2vw + 1rem, 2.5rem);
color: var(--c-navy);
letter-spacing: var(--ls-tight);
}
.lga-tier-price span { color: var(--c-text-mute); font-size: var(--fs-body-sm); }
.lga-tier-features {
list-style: none;
padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column;
gap: 10px;
flex: 1;
}
.lga-tier-features li {
display: flex; align-items: flex-start; gap: 10px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-tier-features svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--c-success);
background: rgba(56, 161, 105, .12);
border-radius: 50%;
padding: 2px;
width: 20px; height: 20px;
}
.lga-tier-cta { width: 100%; justify-content: center; padding: 12px 22px; }
/* Payment methods */
.lga-pay-methods {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 18px 0;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.lga-pay-label {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
.lga-pay-list { display: flex; gap: 10px; flex-wrap: wrap; }
.lga-pay-chip {
background: var(--c-card);
color: var(--c-text);
padding: 6px 14px;
border-radius: var(--r-sm);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
}
.lga-callout {
display: flex; align-items: center; gap: 12px;
background: rgba(43, 108, 176, .06);
border: 1px solid rgba(43, 108, 176, .15);
border-radius: var(--r-md);
padding: 16px 20px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
max-width: 760px;
margin: 0 auto;
}
.lga-callout svg { color: var(--c-royal); flex-shrink: 0; }
/* Journal responsive */
@media (max-width: 1024px) {
.lga-journal-hero-grid { grid-template-columns: 1fr; }
.lga-journal-hero-cover { order: -1; }
.lga-issue-grid { grid-template-columns: 1fr; }
.lga-rubrics-grid { grid-template-columns: repeat(2, 1fr); }
.lga-archive-grid { grid-template-columns: repeat(3, 1fr); }
.lga-tiers { grid-template-columns: 1fr; gap: 16px; }
.lga-tier--featured { transform: none; }
}
@media (max-width: 720px) {
.lga-rubrics-grid { grid-template-columns: 1fr; }
.lga-archive-grid { grid-template-columns: repeat(2, 1fr); }
.lga-issue-stats { gap: 24px; flex-wrap: wrap; }
}
/* ====== Course details page ====== */
.lga-coursehero {
color: #fff;
padding: 56px 0 64px;
background:
radial-gradient(800px 400px at 80% 10%, rgba(49, 151, 149, .4), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 50%, #1F586E 100%);
position: relative;
overflow: hidden;
}
.lga-coursehero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.lga-coursehero > .container { position: relative; z-index: 1; max-width: 900px; }
.lga-coursehero h1 {
color: #fff;
font-size: clamp(2rem, 2vw + 1rem, 3rem);
margin: 14px 0 16px;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.lga-coursehero-desc {
color: rgba(255,255,255,.85);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
margin: 0 0 24px;
max-width: 800px;
}
.lga-coursehero-badges {
display: inline-flex; flex-wrap: wrap; gap: 8px;
margin-top: 14px;
}
.lga-chip {
display: inline-flex; align-items: center;
padding: 5px 14px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.lga-chip--gold { background: var(--c-gold); color: #1A202C; }
.lga-chip--ghost { background: rgba(255,255,255,.12); color: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.18); }
.lga-coursehero-meta {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-top: 6px;
}
.lga-coursehero-rating,
.lga-coursehero-enroll {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,.85);
font-size: var(--fs-body);
}
.lga-coursehero-rating svg { color: var(--c-gold); }
.lga-coursehero-rating strong,
.lga-coursehero-enroll strong { color: #fff; font-family: var(--font-h); font-weight: 700; }
.lga-coursehero-rating span { color: rgba(255,255,255,.65); font-size: var(--fs-body-sm); }
.lga-coursehero-enroll svg { color: var(--c-gold); }
/* ----- Course page layout ----- */
.lga-coursepage { padding-top: 56px; padding-bottom: 56px; }
.lga-coursepage-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 32px;
align-items: start;
}
.lga-coursepage-content { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Generic section card */
.lga-section-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 28px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-section-card h2 {
font-size: var(--fs-h3);
margin: 0 0 16px;
}
.lga-section-card > p {
color: var(--c-text-soft);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
margin: 0;
}
/* Outcomes checklist */
.lga-outcomes {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
.lga-outcomes li {
display: flex; align-items: flex-start; gap: 10px;
color: var(--c-text);
font-size: var(--fs-body);
line-height: var(--lh-snug);
}
.lga-outcomes svg {
flex-shrink: 0; margin-top: 3px;
color: var(--c-success);
background: rgba(56, 161, 105, .12);
border-radius: 50%;
padding: 2px;
width: 22px; height: 22px;
}
/* Modules accordion */
.lga-modules { display: flex; flex-direction: column; gap: 10px; }
.lga-module {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lga-module:hover { border-color: var(--c-royal); }
.lga-module[open] {
background: #fff;
border-color: var(--c-royal);
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-module summary {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 20px;
cursor: pointer;
list-style: none;
user-select: none;
}
.lga-module summary::-webkit-details-marker { display: none; }
.lga-module-num {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--c-navy);
color: #fff;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body);
}
.lga-module[open] .lga-module-num { background: var(--c-gold); }
.lga-module-info { display: flex; flex-direction: column; gap: 2px; }
.lga-module-info strong {
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body);
}
.lga-module-meta {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
.lga-module-chevron {
color: var(--c-text-mute);
transition: transform .25s var(--ease);
}
.lga-module[open] .lga-module-chevron { transform: rotate(180deg); color: var(--c-royal); }
.lga-module-lessons {
list-style: none;
padding: 4px 20px 18px 76px;
margin: 0;
display: flex; flex-direction: column;
gap: 8px;
border-top: 1px dashed var(--c-border);
padding-top: 14px;
}
.lga-module-lessons li {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
align-items: center;
}
.lga-module-lesson-num {
color: var(--c-text-mute);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-caption);
}
.lga-module-lesson-time { color: var(--c-text-mute); font-size: var(--fs-overline); }
/* Audience */
.lga-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.lga-audience-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
color: var(--c-text);
font-size: var(--fs-body-sm);
}
.lga-audience-ico {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-royal);
display: grid; place-items: center;
}
/* Instructor */
.lga-instructor {
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
align-items: start;
}
.lga-instructor-avatar {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-navy), var(--c-teal));
color: #fff;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: 22px;
letter-spacing: .03em;
}
.lga-instructor-body h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.lga-instructor-role {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin: 0 0 12px;
}
.lga-instructor-bio {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
margin: 0 0 16px;
}
.lga-instructor-stats {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 24px;
border-top: 1px solid var(--c-border);
padding-top: 12px;
}
.lga-instructor-stats li {
display: flex; flex-direction: column;
}
.lga-instructor-stats strong {
font-family: var(--font-h);
font-size: var(--fs-h4);
color: var(--c-navy);
font-weight: 700;
line-height: 1;
}
.lga-instructor-stats span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
margin-top: 2px;
}
/* Reviews */
.lga-reviews-summary {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: center;
padding: 18px;
background: var(--c-bg);
border-radius: var(--r-md);
margin-bottom: 22px;
}
.lga-reviews-score { text-align: center; }
.lga-reviews-score strong {
display: block;
font-family: var(--font-h);
font-size: clamp(2.5rem, 2vw + 1rem, 3.5rem);
color: var(--c-navy);
font-weight: 700;
line-height: 1;
}
.lga-reviews-stars {
display: inline-flex; gap: 2px;
color: var(--c-gold);
margin: 6px 0;
}
.lga-reviews-score > span {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
.lga-reviews-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lga-reviews-bars li {
display: grid;
grid-template-columns: 40px 1fr 40px;
gap: 10px;
align-items: center;
font-size: var(--fs-caption);
color: var(--c-text-soft);
}
.lga-reviews-bar {
height: 8px;
background: var(--c-card);
border-radius: var(--r-pill);
overflow: hidden;
}
.lga-reviews-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
border-radius: var(--r-pill);
}
.lga-reviews-percent { text-align: right; color: var(--c-text-mute); }
.lga-reviews-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.lga-review {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
padding: 18px;
background: var(--c-bg);
border-radius: var(--r-md);
}
.lga-review-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--c-royal);
color: #fff;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
}
.lga-review-body header {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 8px;
}
.lga-review-body strong {
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body-sm);
}
.lga-review-role,
.lga-review-when {
color: var(--c-text-mute);
font-size: var(--fs-caption);
}
.lga-review-stars { color: var(--c-gold); display: inline-flex; gap: 1px; }
.lga-review-body p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
margin: 0;
}
/* ----- Enrollment sidebar ----- */
.lga-enroll {
display: flex; flex-direction: column;
gap: 16px;
position: sticky;
top: 100px;
}
.lga-enroll-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 30, 65, .08);
}
.lga-enroll-thumb {
aspect-ratio: 16 / 10;
background-color: var(--c-card);
background-size: cover;
background-position: center;
}
.lga-enroll-price {
padding: 18px 22px;
background: var(--c-navy);
color: #fff;
font-family: var(--font-h);
font-weight: 700;
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
letter-spacing: var(--ls-tight);
}
.lga-enroll-price small {
display: inline-block;
margin-left: 8px;
color: rgba(255,255,255,.6);
font-weight: 400;
font-size: var(--fs-body-sm);
letter-spacing: 0;
}
.lga-enroll-cta {
width: calc(100% - 32px);
margin: 18px 16px 6px;
padding: 14px 22px;
justify-content: center;
font-size: var(--fs-body);
}
.lga-enroll-facts {
list-style: none;
padding: 0;
margin: 12px 0 16px;
}
.lga-enroll-facts li {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
padding: 12px 22px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
border-top: 1px solid var(--c-border);
}
.lga-enroll-facts li svg { color: var(--c-royal); }
.lga-enroll-facts li strong { color: var(--c-heading); font-family: var(--font-h); font-weight: 600; }
.lga-enroll-facts li > span:first-of-type { color: var(--c-text-mute); }
.lga-enroll-seats {
padding: 0 22px;
}
.lga-enroll-seats header {
display: flex; justify-content: space-between;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin-bottom: 8px;
}
.lga-enroll-seats strong { color: var(--c-success); }
.lga-enroll-bar {
height: 8px;
background: var(--c-card);
border-radius: var(--r-pill);
overflow: hidden;
}
.lga-enroll-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--c-teal), var(--c-success));
border-radius: var(--r-pill);
transition: width .6s var(--ease);
}
.lga-enroll-actions {
display: flex; flex-direction: column;
gap: 2px;
padding: 14px 12px 18px;
margin-top: 14px;
border-top: 1px solid var(--c-border);
}
.lga-enroll-action {
display: flex; align-items: center; gap: 10px;
padding: 10px;
border-radius: var(--r-sm);
color: var(--c-text);
font-size: var(--fs-body-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-enroll-action:hover { background: var(--c-card); color: var(--c-navy); }
.lga-enroll-action svg { color: var(--c-royal); }
/* Related */
.lga-enroll-related { padding: 22px; }
.lga-enroll-related h3 { font-size: var(--fs-h4); margin: 0 0 14px; }
.lga-enroll-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lga-enroll-related a {
display: block;
padding: 10px;
border-radius: var(--r-sm);
transition: background .15s var(--ease);
}
.lga-enroll-related a:hover { background: var(--c-card); }
.lga-enroll-related strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
margin-bottom: 2px;
}
.lga-enroll-related span { color: var(--c-text-mute); font-size: var(--fs-overline); }
/* Course details responsive */
@media (max-width: 1024px) {
.lga-coursepage-grid { grid-template-columns: 1fr; }
.lga-enroll { position: static; }
.lga-outcomes { grid-template-columns: 1fr; }
.lga-audience { grid-template-columns: 1fr; }
.lga-reviews-summary { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 640px) {
.lga-instructor { grid-template-columns: 60px 1fr; }
.lga-instructor-avatar { width: 60px; height: 60px; font-size: 18px; }
.lga-instructor-stats { flex-wrap: wrap; gap: 18px; }
}
/* ====== Article (blog details) ====== */
.lga-article-head {
background:
radial-gradient(700px 360px at 80% 10%, rgba(49, 151, 149, .35), transparent 60%),
linear-gradient(135deg, #0F3057 0%, #1A365D 60%, #1F586E 100%);
color: #fff;
padding: 56px 0 48px;
position: relative;
overflow: hidden;
}
.lga-article-head::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, black 30%, black 80%, transparent);
}
.lga-article-head-inner { position: relative; z-index: 1; max-width: 880px; }
.lga-crumbs--dark a { color: rgba(255,255,255,.7); }
.lga-crumbs--dark a:hover { color: var(--c-gold); }
.lga-article-head h1 {
color: #fff;
font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 14px 0 24px;
font-weight: 700;
}
.lga-article-meta-top {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
.lga-article-meta-top .lga-news-date,
.lga-article-meta-top .lga-news-read {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255,255,255,.75);
}
.lga-article-byline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 20px;
}
.lga-article-author { display: inline-flex; align-items: center; gap: 12px; }
.lga-article-author-ava {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--c-gold);
color: #1A202C;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
flex-shrink: 0;
}
.lga-article-author-ava--lg {
width: 64px; height: 64px;
font-size: 22px;
background: linear-gradient(135deg, var(--c-navy), var(--c-teal));
color: #fff;
}
.lga-article-author > div { display: flex; flex-direction: column; line-height: 1.25; }
.lga-article-author strong {
color: #fff;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
}
.lga-article-author span {
color: rgba(255,255,255,.65);
font-size: var(--fs-caption);
}
.lga-article-share {
display: inline-flex;
gap: 6px;
}
.lga-article-share button {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.9);
cursor: pointer;
display: grid; place-items: center;
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lga-article-share button:hover { background: var(--c-gold); color: #1A202C; border-color: var(--c-gold); }
.lga-article-share button.is-copied {
background: var(--c-success);
border-color: var(--c-success);
color: #fff;
}
/* Hero image */
.lga-article-hero {
background: var(--c-bg);
padding: 32px 0;
}
.lga-article-hero figure {
margin: 0;
max-width: 1100px;
margin: 0 auto;
}
.lga-article-hero img {
width: 100%;
height: auto;
border-radius: var(--r-lg);
box-shadow: 0 16px 48px rgba(15, 30, 65, .14);
aspect-ratio: 16 / 9;
object-fit: cover;
}
.lga-article-hero figcaption {
text-align: center;
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
font-style: italic;
margin-top: 12px;
}
/* Article body layout (with sidebar) */
.lga-article-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 48px;
align-items: start;
}
.lga-article-body {
background: #fff;
border-radius: var(--r-lg);
border: 1px solid var(--c-border);
padding: 40px 48px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
font-family: var(--font-body);
color: var(--c-text);
line-height: var(--lh-relaxed);
font-size: 17px;
}
.lga-article-body > * + * { margin-top: 1.25em; }
.lga-article-body h2 {
font-size: 1.625rem;
margin-top: 2em;
margin-bottom: 0.6em;
color: var(--c-heading);
line-height: var(--lh-snug);
}
.lga-article-body h3 {
font-size: 1.25rem;
margin-top: 1.5em;
color: var(--c-heading);
}
.lga-article-body p { margin: 0; }
.lga-article-body ul,
.lga-article-body ol { padding-left: 22px; }
.lga-article-body li { margin-bottom: 8px; }
.lga-article-body a {
color: var(--c-royal);
text-decoration: underline;
text-decoration-color: rgba(43, 108, 176, .35);
text-underline-offset: 3px;
transition: text-decoration-color .15s var(--ease), color .15s var(--ease);
}
.lga-article-body a:hover { color: var(--c-navy); text-decoration-color: currentColor; }
.lga-lead {
font-size: 19px;
color: var(--c-text-soft);
line-height: var(--lh-relaxed);
font-weight: 500;
}
.lga-article-quote {
background: linear-gradient(135deg, rgba(43,108,176,.04), rgba(49,151,149,.06));
border-left: 4px solid var(--c-gold);
border-radius: var(--r-md);
padding: 24px 28px;
margin: 28px 0;
font-family: 'Noto Serif', Georgia, serif;
font-style: italic;
font-size: 18px;
line-height: var(--lh-relaxed);
color: var(--c-heading);
}
.lga-article-quote cite {
display: block;
margin-top: 12px;
font-style: normal;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--c-text-mute);
}
.lga-article-callout {
background: rgba(43, 108, 176, .06);
border: 1px solid rgba(43, 108, 176, .15);
border-radius: var(--r-md);
padding: 18px 22px;
display: flex; gap: 14px;
align-items: flex-start;
margin: 24px 0;
}
.lga-article-callout > svg {
color: var(--c-royal);
flex-shrink: 0;
margin-top: 2px;
}
.lga-article-callout strong {
display: block;
font-family: var(--font-h);
font-weight: 700;
color: var(--c-heading);
margin-bottom: 4px;
}
.lga-article-callout p {
margin: 0;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
.lga-article-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
margin: 24px 0;
}
.lga-article-stats > div { display: flex; flex-direction: column; gap: 4px; }
.lga-article-stats strong {
font-family: var(--font-h);
font-weight: 700;
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
color: var(--c-navy);
line-height: 1;
}
.lga-article-stats span {
color: var(--c-text-mute);
font-size: var(--fs-caption);
line-height: var(--lh-snug);
}
/* Tags row */
.lga-article-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0 0;
padding-top: 24px;
border-top: 1px solid var(--c-border);
}
.lga-article-tags > span {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin-right: 4px;
}
.lga-article-tags a {
display: inline-block;
padding: 5px 12px;
background: var(--c-card);
border-radius: var(--r-pill);
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
text-decoration: none;
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-article-tags a:hover { background: var(--c-navy); color: #fff; }
/* Author box */
.lga-article-author-box {
display: grid;
grid-template-columns: 80px 1fr;
gap: 18px;
padding: 24px;
margin-top: 32px;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
}
.lga-article-author-box strong {
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-h4);
color: var(--c-heading);
}
.lga-article-author-box > div > span {
display: block;
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin-bottom: 8px;
}
.lga-article-author-box p {
margin: 0 0 12px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
}
.lga-author-socials { display: flex; gap: 8px; }
.lga-author-socials a {
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-border);
color: var(--c-text);
display: grid; place-items: center;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lga-author-socials a:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
/* ===== Sidebar ===== */
.lga-article-sidebar {
display: flex; flex-direction: column;
gap: 16px;
position: sticky;
top: 100px;
}
.lga-toc {
list-style: decimal-leading-zero;
padding-left: 24px;
margin: 0;
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
.lga-toc li { padding: 6px 0; }
.lga-toc a {
color: var(--c-text);
transition: color .15s var(--ease);
}
.lga-toc a:hover { color: var(--c-royal); }
/* Recent (with thumb) */
.lga-recent {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 14px;
}
.lga-recent li a {
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
align-items: start;
}
.lga-recent-thumb {
grid-row: 1 / span 2;
width: 56px; height: 56px;
border-radius: var(--r-sm);
background-color: var(--c-card);
background-size: cover;
background-position: center;
}
.lga-recent-meta {
color: var(--c-text-mute);
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
font-family: var(--font-h);
font-weight: 600;
}
.lga-recent strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
margin-top: 2px;
transition: color .15s var(--ease);
}
.lga-recent li a:hover strong { color: var(--c-royal); }
.lga-sidebar-cta {
background: linear-gradient(160deg, rgba(43,108,176,.06), rgba(49,151,149,.10));
}
/* Article responsive */
@media (max-width: 1024px) {
.lga-article-grid { grid-template-columns: 1fr; }
.lga-article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
.lga-article-sidebar > .lga-sidebar-card { flex: 1 1 260px; }
.lga-article-body { padding: 32px; }
.lga-article-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.lga-article-head h1 { font-size: 1.625rem; }
.lga-article-body { padding: 24px; font-size: 16px; }
.lga-article-author-box { grid-template-columns: 1fr; text-align: left; }
.lga-article-author-box .lga-article-author-ava--lg { width: 60px; height: 60px; }
.lga-article-byline { flex-direction: column; align-items: flex-start; }
}
/* ====== Student dashboard ====== */
.lga-dashboard {
background: var(--c-bg);
padding: 32px 0 64px;
min-height: calc(100vh - 200px);
}
.lga-dashboard-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 28px;
align-items: start;
}
/* ----- Sidebar ----- */
.lga-dashside {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 20px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
position: sticky;
top: 120px;
display: flex; flex-direction: column;
gap: 18px;
}
.lga-dashside-user {
display: flex; align-items: center; gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid var(--c-border);
}
.lga-dashside-ava {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-navy), var(--c-teal));
color: #fff;
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.lga-dashside-userinfo { display: flex; flex-direction: column; min-width: 0; }
.lga-dashside-userinfo strong {
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
}
.lga-dashside-badge {
display: inline-block;
margin-top: 4px;
background: var(--c-card);
color: var(--c-navy);
padding: 2px 10px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
width: max-content;
max-width: 100%;
}
.lga-dashside-nav { display: flex; flex-direction: column; gap: 2px; }
.lga-dashside-link {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: var(--r-md);
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-dashside-link:hover {
background: var(--c-card);
color: var(--c-navy);
}
.lga-dashside-link.is-active {
background: var(--c-navy);
color: #fff;
}
.lga-dashside-link.is-active svg { color: var(--c-gold); }
.lga-dashside-count {
background: var(--c-gold);
color: #1A202C;
padding: 1px 8px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
}
.lga-dashside-link.is-active .lga-dashside-count { background: var(--c-gold); color: #1A202C; }
.lga-dashside-progress {
padding: 16px;
background: var(--c-bg);
border-radius: var(--r-md);
}
.lga-dashside-progress-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
}
.lga-dashside-progress-head strong {
color: var(--c-navy);
font-family: var(--font-h);
font-weight: 700;
}
.lga-dashside-progress-bar {
height: 8px;
background: var(--c-card);
border-radius: var(--r-pill);
overflow: hidden;
margin-bottom: 8px;
}
.lga-dashside-progress-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--c-teal), var(--c-success));
border-radius: var(--r-pill);
}
.lga-dashside-progress small {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
.lga-dashside-logout { padding-top: 4px; border-top: 1px solid var(--c-border); margin: 0; }
.lga-dashside-logout button {
width: 100%;
display: flex; align-items: center; gap: 12px;
background: transparent;
border: none;
padding: 10px 12px;
border-radius: var(--r-md);
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 500;
font-size: var(--fs-body-sm);
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
text-align: left;
}
.lga-dashside-logout button:hover { background: rgba(229, 62, 62, .08); color: #C53030; }
/* ----- Main content ----- */
.lga-dashboard-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Welcome banner */
.lga-dashwelcome {
background:
radial-gradient(600px 300px at 80% 0%, rgba(214, 158, 46, .15), transparent 60%),
linear-gradient(135deg, var(--c-navy), var(--c-teal));
color: #fff;
padding: 28px 32px;
border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
box-shadow: 0 8px 24px rgba(15, 30, 65, .12);
}
.lga-dashwelcome h1 {
color: #fff;
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
margin: 0 0 6px;
line-height: var(--lh-tight);
}
.lga-dashwelcome p {
color: rgba(255, 255, 255, .85);
font-size: var(--fs-body);
margin: 0;
line-height: var(--lh-snug);
}
/* Stat cards */
.lga-dashstats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.lga-dashstat {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 18px 20px;
display: flex; align-items: center; gap: 14px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-dashstat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 30, 65, .10); }
.lga-dashstat-ico {
width: 48px; height: 48px;
border-radius: 14px;
display: grid; place-items: center;
flex-shrink: 0;
}
.lga-dashstat strong {
display: block;
font-family: var(--font-h);
font-weight: 700;
font-size: 22px;
color: var(--c-navy);
line-height: 1;
}
.lga-dashstat span {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin-top: 4px;
}
/* Continue learning */
.lga-dashcontinue {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
display: grid;
grid-template-columns: 240px 1fr;
}
.lga-dashcontinue-thumb {
background-color: var(--c-card);
background-size: cover;
background-position: center;
}
.lga-dashcontinue-body { padding: 24px 28px; }
.lga-dashcontinue-body h3 { font-size: var(--fs-h3); margin: 8px 0 6px; }
.lga-dashcontinue-body p {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 18px;
}
.lga-dashcontinue-bar {
height: 10px;
background: var(--c-card);
border-radius: var(--r-pill);
overflow: hidden;
margin-bottom: 16px;
}
.lga-dashcontinue-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
border-radius: var(--r-pill);
transition: width .6s var(--ease);
}
.lga-dashcontinue-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex-wrap: wrap;
}
.lga-dashcontinue-foot > span {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
/* Two-col: courses list + side widgets */
.lga-dash-twocol {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
align-items: start;
}
.lga-dash-tabs-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 16px;
}
.lga-dash-tabs-head h2 { font-size: var(--fs-h3); margin: 0; }
.lga-dash-tabs {
display: inline-flex;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
padding: 4px;
}
.lga-dash-tab {
padding: 7px 16px;
border-radius: var(--r-pill);
border: none;
background: transparent;
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-dash-tab:hover { color: var(--c-navy); }
.lga-dash-tab.is-active { background: var(--c-navy); color: #fff; }
/* Course list rows */
.lga-dash-courses-list { display: flex; flex-direction: column; gap: 14px; }
.lga-dash-course {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
display: grid;
grid-template-columns: 200px 1fr;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-dash-course:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 30, 65, .08); }
.lga-dash-course-thumb {
background-color: var(--c-card);
background-size: cover;
background-position: center;
}
.lga-dash-course-body { padding: 18px 20px; display: flex; flex-direction: column; }
.lga-dash-course-cat {
display: inline-block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-royal);
background: rgba(43, 108, 176, .10);
padding: 3px 10px;
border-radius: var(--r-pill);
margin-bottom: 8px;
width: max-content;
}
.lga-dash-course-body h4 {
font-size: var(--fs-h4);
margin: 0 0 6px;
}
.lga-dash-course-next {
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
margin: 0 0 12px;
}
.lga-dash-course-next strong {
color: var(--c-heading);
font-weight: 600;
}
.lga-dash-course-progress {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.lga-dash-course-bar {
height: 6px;
background: var(--c-card);
border-radius: var(--r-pill);
overflow: hidden;
}
.lga-dash-course-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--c-teal), var(--c-success));
border-radius: var(--r-pill);
}
.lga-dash-course-progress > span {
color: var(--c-navy);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
}
.lga-dash-course-body footer {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin-top: auto;
}
.lga-dash-course-deadline {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
display: inline-flex; align-items: center; gap: 6px;
}
.lga-dash-course-body footer .btn { padding: 8px 16px; font-size: var(--fs-caption); }
/* Side widgets */
.lga-dash-widgets {
display: flex; flex-direction: column;
gap: 16px;
position: sticky;
top: 120px;
}
/* Events list */
.lga-events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lga-events li {
display: grid;
grid-template-columns: 52px 1fr;
gap: 12px;
align-items: start;
}
.lga-event-date {
width: 52px; height: 52px;
border-radius: var(--r-md);
background: var(--c-navy);
color: #fff;
display: grid; place-items: center;
text-align: center;
line-height: 1;
}
.lga-event-date strong {
display: block;
font-family: var(--font-h);
font-weight: 700;
font-size: 18px;
}
.lga-event-date span {
font-size: var(--fs-overline);
text-transform: uppercase;
color: rgba(255,255,255,.75);
margin-top: 2px;
}
.lga-event-date--warn { background: var(--c-warning); }
.lga-events > li > div { display: flex; flex-direction: column; gap: 2px; }
.lga-events strong {
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-events span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Achievements list */
.lga-achievements { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.lga-achievements li {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
}
.lga-achi-ico {
width: 40px; height: 40px;
border-radius: 50%;
color: #fff;
display: grid; place-items: center;
flex-shrink: 0;
}
.lga-achievements strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-achievements span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Notifications list */
.lga-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lga-notes li {
display: grid;
grid-template-columns: 10px 1fr;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--c-border);
}
.lga-notes li:last-child { border-bottom: none; }
.lga-note-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c-border);
margin-top: 6px;
flex-shrink: 0;
}
.lga-notes .is-unread .lga-note-dot { background: var(--c-gold); box-shadow: 0 0 0 4px rgba(214,158,46,.15); }
.lga-notes strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-notes span {
display: block;
color: var(--c-text-soft);
font-size: var(--fs-overline);
line-height: var(--lh-snug);
margin: 2px 0 4px;
}
.lga-notes small {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Dashboard responsive */
@media (max-width: 1100px) {
.lga-dashboard-grid { grid-template-columns: 1fr; }
.lga-dashside { position: static; }
.lga-dashside-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.lga-dashside-nav .lga-dashside-link { grid-template-columns: 22px 1fr; }
.lga-dashside-nav .lga-dashside-count { display: none; }
}
@media (max-width: 900px) {
.lga-dash-twocol { grid-template-columns: 1fr; }
.lga-dash-widgets { position: static; flex-direction: row; flex-wrap: wrap; }
.lga-dash-widgets > .lga-sidebar-card { flex: 1 1 280px; }
}
@media (max-width: 720px) {
.lga-dashstats { grid-template-columns: repeat(2, 1fr); }
.lga-dashcontinue { grid-template-columns: 1fr; }
.lga-dashcontinue-thumb { aspect-ratio: 16 / 9; }
.lga-dash-course { grid-template-columns: 1fr; }
.lga-dash-course-thumb { aspect-ratio: 16 / 9; }
.lga-dashside-nav { grid-template-columns: 1fr; }
}
/* ====== Course player ====== */
.lga-player-bar {
background: var(--c-heading);
color: #fff;
position: sticky;
top: 0;
z-index: 60;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.lga-player-bar-inner {
max-width: 100%;
padding: 0 24px;
display: grid;
grid-template-columns: auto 1fr auto 44px;
gap: 24px;
align-items: center;
height: 64px;
}
.lga-player-back {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,.85);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
padding: 8px 12px;
border-radius: var(--r-md);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-player-back:hover { background: rgba(255,255,255,.08); color: #fff; }
.lga-player-title {
display: flex; flex-direction: column;
line-height: 1.2;
overflow: hidden;
}
.lga-player-title strong {
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body);
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lga-player-title span {
color: rgba(255,255,255,.6);
font-size: var(--fs-caption);
margin-top: 2px;
}
.lga-player-progress {
display: inline-flex; align-items: center; gap: 10px;
min-width: 220px;
}
.lga-player-progress-bar {
flex: 1;
height: 6px;
background: rgba(255,255,255,.12);
border-radius: var(--r-pill);
overflow: hidden;
}
.lga-player-progress-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
border-radius: var(--r-pill);
transition: width .6s var(--ease);
}
.lga-player-progress strong {
color: var(--c-gold);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
min-width: 36px;
text-align: right;
}
.lga-player-exit {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
color: rgba(255,255,255,.7);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-player-exit:hover { background: rgba(229, 62, 62, .15); color: #FC8181; }
/* Layout */
.lga-player {
background: var(--c-bg);
padding: 24px 0 32px;
min-height: calc(100vh - 64px);
}
.lga-player-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}
.lga-player-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Video player */
.lga-player-video {
background: #000;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}
.lga-player-video-poster {
position: relative;
aspect-ratio: 16 / 9;
background-color: #000;
background-size: cover;
background-position: center;
}
.lga-player-video-poster::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15, 30, 65, .35), rgba(15, 30, 65, .55));
}
.lga-player-play {
position: absolute;
inset: 0;
margin: auto;
width: 84px; height: 84px;
border-radius: 50%;
border: none;
background: var(--c-gold);
color: #1A202C;
cursor: pointer;
display: grid; place-items: center;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 0 8px rgba(214, 158, 46, .25);
z-index: 1;
}
.lga-player-play:hover { transform: scale(1.08); }
.lga-player-controls {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: linear-gradient(180deg, #1A202C, #0F172A);
color: #fff;
}
.lga-player-controls button {
background: transparent;
border: none;
color: rgba(255,255,255,.85);
cursor: pointer;
padding: 6px 10px;
border-radius: var(--r-sm);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-player-controls button:hover { background: rgba(255,255,255,.1); color: var(--c-gold); }
.lga-player-time {
font-family: var(--font-h);
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,.85);
font-size: var(--fs-caption);
min-width: 44px;
text-align: center;
}
.lga-player-time--end { color: rgba(255,255,255,.6); }
.lga-player-scrub {
flex: 1;
height: 6px;
background: rgba(255,255,255,.15);
border-radius: var(--r-pill);
overflow: hidden;
cursor: pointer;
}
.lga-player-scrub > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--c-gold), var(--c-gold-strong));
border-radius: var(--r-pill);
}
/* Lesson header */
.lga-lesson-head {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 24px 28px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-lesson-module {
display: inline-block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-royal);
background: rgba(43, 108, 176, .10);
padding: 4px 12px;
border-radius: var(--r-pill);
margin-bottom: 12px;
}
.lga-lesson-head h1 {
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
color: var(--c-heading);
margin: 0 0 12px;
line-height: var(--lh-snug);
}
.lga-lesson-meta {
display: flex; gap: 18px;
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
}
.lga-lesson-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* Tabs */
.lga-lesson-tabs {
display: flex;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 4px;
gap: 4px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
overflow: auto;
}
.lga-lesson-tab {
padding: 9px 18px;
border-radius: var(--r-sm);
border: none;
background: transparent;
color: var(--c-text-soft);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
white-space: nowrap;
}
.lga-lesson-tab:hover { color: var(--c-navy); background: var(--c-card); }
.lga-lesson-tab.is-active { background: var(--c-navy); color: #fff; }
/* Body */
.lga-lesson-body {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px 36px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
color: var(--c-text);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
}
.lga-lesson-body > * + * { margin-top: 1.2em; }
.lga-lesson-body h2 {
font-size: 1.375rem;
margin-top: 1.6em;
color: var(--c-heading);
}
.lga-lesson-body ol,
.lga-lesson-body ul {
padding-left: 22px;
}
.lga-lesson-body li { margin-bottom: 8px; }
/* Resources list */
.lga-lesson-resources {
list-style: none !important;
padding: 0 !important;
margin: 0;
display: flex; flex-direction: column;
gap: 10px;
}
.lga-lesson-resources li {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
margin-bottom: 0 !important;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.lga-lesson-resources li:hover { border-color: var(--c-royal); background: #fff; }
.lga-res-ico {
width: 44px; height: 44px;
border-radius: var(--r-sm);
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
letter-spacing: .04em;
}
.lga-lesson-resources strong {
display: block;
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-lesson-resources span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Bottom action bar */
.lga-lesson-foot {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 18px 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-lesson-done {
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer;
color: var(--c-text);
font-size: var(--fs-body-sm);
}
.lga-lesson-done input {
width: 18px; height: 18px;
accent-color: var(--c-success);
cursor: pointer;
}
/* ===== Outline sidebar ===== */
.lga-player-outline {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
position: sticky;
top: 88px;
max-height: calc(100vh - 110px);
display: flex; flex-direction: column;
}
.lga-outline-head {
padding: 18px 20px;
border-bottom: 1px solid var(--c-border);
background: var(--c-bg);
display: flex; align-items: center; justify-content: space-between;
}
.lga-outline-head strong {
font-family: var(--font-h);
font-weight: 700;
color: var(--c-heading);
font-size: var(--fs-body);
}
.lga-outline-head span {
color: var(--c-text-mute);
font-size: var(--fs-caption);
}
.lga-outline {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
flex: 1;
}
.lga-outline-module {
border-bottom: 1px solid var(--c-border);
}
.lga-outline-module:last-child { border-bottom: none; }
.lga-outline-module details summary {
display: grid;
grid-template-columns: 30px 1fr 18px;
gap: 12px;
align-items: center;
padding: 14px 18px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background .15s var(--ease);
}
.lga-outline-module details summary::-webkit-details-marker { display: none; }
.lga-outline-module details summary:hover { background: var(--c-bg); }
.lga-outline-module-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-text-mute);
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-caption);
}
.lga-outline-module.is-done .lga-outline-module-num { background: var(--c-success); color: #fff; }
.lga-outline-module.is-current .lga-outline-module-num { background: var(--c-gold); color: #fff; }
.lga-outline-module.is-locked .lga-outline-module-num { background: var(--c-card); color: var(--c-text-mute); }
.lga-outline-module-text strong {
display: block;
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-outline-module.is-locked .lga-outline-module-text strong { color: var(--c-text-mute); }
.lga-outline-module-text span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
.lga-outline-chevron {
color: var(--c-text-mute);
transition: transform .25s var(--ease);
}
.lga-outline-module details[open] .lga-outline-chevron { transform: rotate(180deg); color: var(--c-royal); }
.lga-outline-lessons {
list-style: none;
padding: 0 0 12px;
margin: 0;
background: var(--c-bg);
}
.lga-outline-lessons li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: center;
padding: 4px 18px 4px 24px;
}
.lga-outline-lesson-mark {
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
color: var(--c-text-mute);
border: 1.5px solid var(--c-border);
display: grid; place-items: center;
flex-shrink: 0;
}
.lga-outline-lessons .is-done .lga-outline-lesson-mark { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.lga-outline-lessons .is-current .lga-outline-lesson-mark { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.lga-outline-lessons .is-locked .lga-outline-lesson-mark { background: var(--c-card); color: var(--c-text-mute); }
.lga-outline-lesson-link {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: var(--r-sm);
color: var(--c-text-soft);
transition: background .15s var(--ease), color .15s var(--ease);
}
.lga-outline-lesson-link:hover { background: #fff; color: var(--c-navy); }
.lga-outline-lessons .is-current .lga-outline-lesson-link {
background: rgba(214, 158, 46, .10);
color: var(--c-heading);
font-weight: 600;
}
.lga-outline-lessons .is-locked .lga-outline-lesson-link { color: var(--c-text-mute); cursor: not-allowed; }
.lga-outline-lesson-kind { color: var(--c-text-mute); display: inline-flex; }
.lga-outline-lessons .is-current .lga-outline-lesson-kind { color: var(--c-gold-strong); }
.lga-outline-lesson-title {
font-family: var(--font-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-outline-lesson-time {
color: var(--c-text-mute);
font-size: var(--fs-overline);
font-family: var(--font-h);
font-weight: 500;
}
/* Player responsive */
@media (max-width: 1100px) {
.lga-player-grid { grid-template-columns: 1fr; }
.lga-player-outline { position: static; max-height: none; }
}
@media (max-width: 720px) {
.lga-player-bar-inner { grid-template-columns: auto 1fr 44px; gap: 12px; padding: 0 12px; }
.lga-player-progress { display: none; }
.lga-player-back span { display: none; }
.lga-lesson-body { padding: 22px; font-size: var(--fs-body); }
.lga-lesson-head { padding: 20px; }
.lga-lesson-foot { flex-direction: column; align-items: stretch; }
.lga-lesson-foot .btn { width: 100%; justify-content: center; }
}
/* ====== Cart & checkout ====== */
/* Steps indicator */
.lga-steps {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
counter-reset: step;
}
.lga-steps li {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
color: var(--c-text-mute);
position: relative;
}
.lga-steps li.is-active {
border-color: var(--c-gold);
background: linear-gradient(180deg, rgba(214,158,46,.06), #fff 50%);
color: var(--c-heading);
}
.lga-step-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-text-mute);
display: grid; place-items: center;
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-body-sm);
}
.lga-steps .is-active .lga-step-num { background: var(--c-gold); color: #1A202C; }
.lga-step-label {
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
}
/* Cart layout */
.lga-cart-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 28px;
align-items: start;
}
.lga-cart-items { display: flex; flex-direction: column; gap: 14px; }
.lga-cart-items-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 16px;
}
.lga-cart-items-head h2 { font-size: var(--fs-h4); margin: 0; }
.lga-cart-item {
display: grid;
grid-template-columns: 180px 1fr auto;
gap: 20px;
align-items: center;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 16px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lga-cart-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 30, 65, .10); }
.lga-cart-item-img {
aspect-ratio: 16 / 10;
background-color: var(--c-card);
background-size: cover;
background-position: center;
border-radius: var(--r-md);
}
.lga-cart-item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lga-cart-item-cat {
display: inline-block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-overline);
color: var(--c-royal);
background: rgba(43, 108, 176, .10);
padding: 3px 10px;
border-radius: var(--r-pill);
width: max-content;
}
.lga-cart-item-body h3 { font-size: var(--fs-h4); margin: 0; line-height: var(--lh-snug); }
.lga-cart-item-instructor {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
margin: 0;
}
.lga-cart-item-instructor strong { color: var(--c-text); font-weight: 600; }
.lga-cart-item-meta {
display: flex; gap: 16px; flex-wrap: wrap;
color: var(--c-text-mute);
font-size: var(--fs-caption);
margin-top: 4px;
}
.lga-cart-item-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lga-cart-item-price {
display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
min-width: 130px;
text-align: right;
}
.lga-cart-item-amount {
display: flex; flex-direction: column;
line-height: 1.2;
}
.lga-cart-item-amount s {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
text-decoration-color: var(--c-text-mute);
}
.lga-cart-item-amount strong {
color: var(--c-navy);
font-family: var(--font-h);
font-weight: 700;
font-size: 22px;
letter-spacing: var(--ls-tight);
}
.lga-cart-item-remove {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--c-border);
color: var(--c-text-mute);
display: grid; place-items: center;
transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.lga-cart-item-remove:hover { background: rgba(229, 62, 62, .08); color: #C53030; border-color: rgba(229,62,62,.3); }
/* Trust badges */
.lga-cart-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 20px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
margin-top: 8px;
}
.lga-cart-trust > div { display: flex; gap: 12px; align-items: center; }
.lga-cart-trust-ico {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(56, 161, 105, .10);
color: var(--c-success);
display: grid; place-items: center;
flex-shrink: 0;
}
.lga-cart-trust strong {
display: block;
font-family: var(--font-h);
font-weight: 600;
color: var(--c-heading);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-cart-trust span {
color: var(--c-text-mute);
font-size: var(--fs-overline);
}
/* Empty state */
.lga-cart-empty {
text-align: center;
padding: 64px 24px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-cart-empty-ico {
display: inline-grid;
place-items: center;
width: 96px; height: 96px;
border-radius: 50%;
background: var(--c-card);
color: var(--c-text-mute);
margin-bottom: 20px;
}
.lga-cart-empty h2 { font-size: var(--fs-h3); margin: 0 0 8px; }
.lga-cart-empty p { color: var(--c-text-soft); margin: 0 0 24px; }
/* Summary sidebar */
.lga-cart-summary {
display: flex; flex-direction: column;
gap: 16px;
position: sticky;
top: 100px;
}
.lga-summary-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 30, 65, .08);
}
.lga-summary-card h3 { font-size: var(--fs-h4); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.lga-summary-rows {
list-style: none;
padding: 0; margin: 0 0 20px;
display: flex; flex-direction: column;
gap: 10px;
}
.lga-summary-rows > div {
display: flex; justify-content: space-between;
color: var(--c-text-soft);
font-size: var(--fs-body-sm);
}
.lga-summary-rows dt, .lga-summary-rows dd { margin: 0; }
.lga-summary-rows dd { color: var(--c-text); font-family: var(--font-h); font-weight: 600; }
.lga-summary-discount dd { color: var(--c-success) !important; }
.lga-summary-total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 16px 0;
border-top: 2px solid var(--c-border);
margin-bottom: 18px;
}
.lga-summary-total span { color: var(--c-text-mute); font-size: var(--fs-body); }
.lga-summary-total strong {
color: var(--c-navy);
font-family: var(--font-h);
font-weight: 700;
font-size: clamp(1.75rem, 1.2vw + 1rem, 2.25rem);
letter-spacing: var(--ls-tight);
}
.lga-summary-total strong small {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-body);
color: var(--c-text-mute);
margin-left: 6px;
}
.lga-summary-cta {
width: 100%;
padding: 14px 22px;
justify-content: center;
font-size: var(--fs-body);
margin-bottom: 18px;
}
.lga-summary-coupon { padding-top: 16px; border-top: 1px solid var(--c-border); }
.lga-summary-coupon label {
display: block;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
color: var(--c-heading);
margin-bottom: 8px;
}
.lga-summary-coupon-input { display: flex; gap: 8px; }
.lga-summary-coupon-input input {
flex: 1;
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 10px 14px;
font-family: var(--font-body);
font-size: var(--fs-body-sm);
color: var(--c-text);
outline: none;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lga-summary-coupon-input input:focus { border-color: var(--c-royal); box-shadow: 0 0 0 4px rgba(43,108,176,.12); }
.lga-summary-coupon-input button {
padding: 10px 16px;
border: 1.5px solid var(--c-navy);
background: var(--c-navy);
color: #fff;
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body-sm);
border-radius: var(--r-md);
cursor: pointer;
transition: background .15s var(--ease);
}
.lga-summary-coupon-input button:hover { background: #0F2D4A; }
.lga-summary-coupon-ok {
display: inline-block;
margin-top: 8px;
color: var(--c-success);
font-size: var(--fs-caption);
font-weight: 600;
}
.lga-summary-note {
color: var(--c-text-mute);
font-size: var(--fs-overline);
line-height: var(--lh-snug);
margin: 16px 0 0;
}
.lga-summary-pay {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 14px 18px;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.lga-summary-pay > span { color: var(--c-text-mute); font-size: var(--fs-body-sm); }
/* Checkout section */
.lga-checkout {
margin-top: 40px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: 0 4px 14px rgba(15, 30, 65, .06);
}
.lga-checkout-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--c-border); }
.lga-checkout-head h2 { font-size: var(--fs-h3); margin: 0 0 4px; }
.lga-checkout-head p { color: var(--c-text-soft); margin: 0; font-size: var(--fs-body-sm); }
.lga-checkout-form fieldset {
border: none;
padding: 0;
margin: 0 0 24px;
}
.lga-checkout-form legend {
font-family: var(--font-h);
font-weight: 700;
color: var(--c-heading);
font-size: var(--fs-h4);
margin-bottom: 16px;
padding: 0;
}
.lga-checkout-form .lga-field { margin-bottom: 16px; }
/* Payment methods grid */
.lga-pay-methods-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.lga-pay-option {
display: grid;
grid-template-columns: 20px 1fr;
gap: 14px;
align-items: start;
padding: 16px 18px;
background: var(--c-bg);
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.lga-pay-option:hover { border-color: var(--c-royal); }
.lga-pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.lga-pay-option-radio {
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid var(--c-border);
margin-top: 2px;
background: #fff;
transition: border-color .15s var(--ease), background .15s var(--ease);
position: relative;
}
.lga-pay-option.is-checked {
border-color: var(--c-gold);
background: linear-gradient(180deg, rgba(214,158,46,.05), #fff 50%);
}
.lga-pay-option.is-checked .lga-pay-option-radio {
border-color: var(--c-gold);
background: var(--c-gold);
}
.lga-pay-option.is-checked .lga-pay-option-radio::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: #fff;
}
.lga-pay-option > div { display: flex; flex-direction: column; gap: 4px; }
.lga-pay-option strong {
color: var(--c-heading);
font-family: var(--font-h);
font-weight: 600;
font-size: var(--fs-body);
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.lga-pay-option span {
color: var(--c-text-mute);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.lga-pay-rec {
background: var(--c-gold);
color: #1A202C;
padding: 2px 8px;
border-radius: var(--r-pill);
font-family: var(--font-h);
font-weight: 700;
font-size: var(--fs-overline);
letter-spacing: var(--ls-wide);
}
.lga-checkout-submit {
width: 100%;
padding: 16px 22px;
justify-content: center;
font-size: var(--fs-body);
margin-top: 8px;
}
/* Cart responsive */
@media (max-width: 1100px) {
.lga-cart-grid { grid-template-columns: 1fr; }
.lga-cart-summary { position: static; }
.lga-cart-trust { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.lga-steps { grid-template-columns: 1fr 1fr; }
.lga-cart-item { grid-template-columns: 1fr; gap: 12px; }
.lga-cart-item-img { aspect-ratio: 16 / 9; }
.lga-cart-item-price { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; min-width: 0; }
.lga-pay-methods-grid { grid-template-columns: 1fr; }
.lga-form-row { grid-template-columns: 1fr; }
.lga-checkout { padding: 20px; }
}
/* Auth responsive */
@media (max-width: 880px) {
.lga-auth { grid-template-columns: 1fr; }
.lga-auth-panel { padding: 32px; min-height: 280px; }
.lga-auth-panel-body h1 { font-size: 1.5rem; }
.lga-auth-form-wrap { padding: 32px 16px; }
.lga-auth-form { padding: 28px; }
}
/* ============================================================
LGA student-section additions (merged dashboard)
============================================================ */
.lga-dashwelcome--compact { padding: 24px 28px; }
.lga-dashwelcome--compact h1 { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); margin: 4px 0; }
.lga-dashwelcome--compact .lga-eyebrow { color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lga-dashwelcome--compact p { font-size: 14px; opacity: .85; margin: 4px 0 0; }
.lga-card { background: #fff; border: 1px solid var(--c-line, #eef0f5); border-radius: 16px; margin-bottom: 18px; }
.lga-card--padded { padding: 28px 32px; }
.lga-card h2 { font-size: 18px; margin: 0 0 18px; color: var(--c-text, #1a2138); }
.lga-card h3 { font-size: 16px; margin: 0 0 12px; }
.lga-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.lga-field { display: flex; flex-direction: column; gap: 6px; }
.lga-field-label { font-size: 13px; font-weight: 500; color: var(--c-text, #1a2138); }
.lga-field input, .lga-field select, .lga-field textarea {
padding: 10px 14px;
border: 1px solid var(--c-line, #eef0f5);
border-radius: 10px;
font-family: inherit;
font-size: 14px;
color: var(--c-text, #1a2138);
background: #fff;
transition: .15s;
width: 100%;
}
.lga-field input:focus, .lga-field select:focus, .lga-field textarea:focus {
outline: none;
border-color: var(--c-royal, #2B6CB0);
box-shadow: 0 0 0 3px rgba(43,108,176,.12);
}
.lga-field textarea { resize: vertical; min-height: 90px; }
.lga-table-wrap { overflow-x: auto; }
.lga-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.lga-table thead th {
background: #f6f8fb; font-size: 12px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; color: #5a647a;
padding: 14px 16px; border-bottom: 1px solid #e5e9f0; text-align: left;
}
.lga-table tbody td {
padding: 16px; border-bottom: 1px solid #eef0f5; vertical-align: middle;
font-size: 14px; color: var(--c-text, #1a2138);
}
.lga-table tbody tr:last-child td { border-bottom: 0; }
.lga-table tbody tr:hover { background: #fafbfd; }
.lga-table tbody td:last-child { text-align: right; }
.lga-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px;
border: 1px solid #dde2eb; background: #fff; color: #5a647a;
transition: all .15s ease; text-decoration: none;
}
.lga-iconbtn:hover { background: #f4f7fb; color: var(--c-royal, #2B6CB0); border-color: #c3cee0; transform: translateY(-1px); }
.lga-iconbtn.is-danger:hover { background: #fff5f5; color: #c53030; border-color: #fab0b0; }
.lga-flash { border-radius: 10px; padding: 14px 18px; margin: 0 0 18px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.lga-flash--ok { background: #ddf5e3; color: #1d6b2c; border: 1px solid #b5e4c0; }
.lga-flash--err { background: #fff0f0; color: #aa1f1f; border: 1px solid #f5b4b4; }
.lga-dashside-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 16px 0 0; padding: 12px 16px;
background: linear-gradient(135deg, var(--c-gold, #D69E2E), var(--c-gold-strong, #B7791F));
color: #fff; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 14px;
transition: .2s;
}
.lga-dashside-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(214,158,46,.3); color: #fff; }
img.lga-dashside-ava { object-fit: cover; }