/* ========================================================================== website.css — public site styles -------------------------------------------------------------------------- One stylesheet for the public website, extracted from the style blocks that used to sit inline in the PHP pages. The admin, branch and student panels are NOT covered here — they run on AdminLTE and are untouched. LOAD ORDER: must be linked AFTER css/style.css. The two share 171 identical rules but 31 that differ (padding, gaps, body background), and the inline blocks won simply by appearing later in the document. Loading this second reproduces the original cascade. SCOPING: each page's rules carry a class on (html.page-home, html.page-about, ...) that header.php derives from the script name. Without it, home.php's generic selectors would apply everywhere — tried unscoped, that visibly broke the card layout on courses.php. The class is on rather than so `html {}` and `body {}` rules keep separate identities. The design tokens in :root are intentionally left global. RESPONSIVE: the @media blocks below are scoped too, so a page's mobile rules travel with its desktop rules. Site-wide responsive fixes live in the final section of this file. TO ADD A PAGE: add a section scoped to html.page-. header.php emits that class automatically; nothing else to wire up. ========================================================================== */ /* ========================================================================== HOME PAGE — was inline in home.php Scoped because these selectors (.section, .btn, .course-card, nav) also exist in style.css with different values, and before extraction they only ever applied on the home page. Left unscoped they visibly broke the card layout on courses.php. ========================================================================== */ /* ══════════════════════════════════════════════════ RESET & ROOT ═══════════════════════════════════════════════════ */ /* The universal reset that lived here has been removed on purpose. style.css already applies exactly `*,*::before,*::after{box-sizing: border-box;margin:0;padding:0}` globally, so this was a duplicate — and a harmful one once scoped: `html.page-home *` has specificity (0,1,0) instead of the (0,0,0) a bare `*` carries. That let the reset tie with, and then beat, ordinary class rules defined in style.css. It stripped the padding off `.mobile-nav-drawer`, so the mobile menu's links sat flush against both screen edges. Scoping a universal selector changes what it outranks; the reset belongs in style.css, unscoped, where it already is. */ :root { --bg:#f7f5f0; --bg2:#eeecea; --white:#ffffff; --ink:#1c1c1a; --ink2:#4a4845; --ink3:#8c8a84; --accent:#c8401a; --accent2:#e86a35; --accent3:#f5a623; --green:#1a7a4a; --blue:#1a4fa0; --border:#dedad2; --card:#ffffff; --shadow:0 2px 16px rgba(0,0,0,.07); --shadow-lg:0 8px 40px rgba(0,0,0,.12); --gold:#d4a017; --gold-bg:#fffbf0; --silver:#9aa0a6; --silver-bg:#f8f9fa; --bronze:#a0522d; --bronze-bg:#fff5eb; --radius:14px; --font-serif:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-sans:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-display:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-opensans:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-price:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-mono:'Roboto Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace; } html.page-home { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; background: #1c1c1a !important; background-color: #1c1c1a !important; } html.page-home body { font-family: var(--font-sans); background: #1c1c1a !important; background-color: #1c1c1a !important; color: var(--ink); line-height: 1.7; font-size: 15px; margin: 0 !important; padding: 0 !important; width: 100% !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; overflow-x: hidden !important; } /* ── SHARED ── */ html.page-home a {color:inherit;text-decoration:none} html.page-home img {max-width:100%;display:block} html.page-home .section {padding:80px 5%} html.page-home .section-header {text-align:center;margin-bottom:50px} html.page-home .section-tag { font-size:.78rem;font-weight:700; color:var(--accent);letter-spacing:.14em; text-transform:uppercase;margin-bottom:10px; font-family:var(--font-sans); } html.page-home .section-title { font-family:var(--font-display); font-size:clamp(1.9rem,3.5vw,2.75rem); font-weight:800;color:var(--ink); letter-spacing:-.01em;line-height:1.15; } html.page-home .section-desc { color:var(--ink2);max-width:600px; margin:12px auto 0;font-size:1.05rem; font-family:var(--font-sans);font-weight:300; } /* ── BUTTONS ── */ html.page-home .btn, html.page-home .btn-outline, html.page-home .btn-primary { display:inline-flex;align-items:center;gap:8px; padding:11px 28px;border-radius:8px; font-size:.95rem;font-weight:700; cursor:pointer;text-decoration:none; transition:all .2s;font-family:var(--font-sans); letter-spacing:.02em; } html.page-home .btn-primary { border:none;background:var(--accent);color:var(--white); box-shadow:0 3px 14px rgba(200,64,26,.28); } html.page-home .btn-primary:hover {background:#a83214;transform:translateY(-2px);box-shadow:0 6px 20px rgba(200,64,26,.35)} html.page-home .btn-outline { border:2px solid var(--ink);background:transparent;color:var(--ink); } html.page-home .btn-outline:hover {background:var(--ink);color:var(--white)} html.page-home .btn-white { border:2px solid rgba(255,255,255,.7);background:transparent;color:#fff; padding:11px 26px;border-radius:8px;font-size:.92rem;font-weight:700; cursor:pointer;display:inline-flex;align-items:center;gap:8px; transition:all .2s;font-family:var(--font-sans); } html.page-home .btn-white:hover {background:rgba(255,255,255,.15)} /* ══════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════ */ html.page-home nav { position:sticky;top:0;z-index:200; background:rgba(247,245,240,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:0 5%; display:flex;align-items:center;justify-content:space-between; height:68px; } html.page-home .nav-logo { font-family:var(--font-display); font-weight:800;font-size:1.45rem; color:var(--ink);text-decoration:none; display:flex;align-items:center;gap:8px; letter-spacing:-.01em; } html.page-home .nav-logo .dot {width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0} html.page-home .nav-logo span {color:var(--accent)} html.page-home .nav-links {display:flex;align-items:center;gap:12px} html.page-home .nav-links a { font-family:var(--font-sans); text-decoration:none;color:var(--ink2); font-size:.9rem;font-weight:700; letter-spacing:.02em; padding:7px 16px; border-radius:8px; transition:all .2s ease; } html.page-home .nav-links a:hover { color:var(--accent); background:rgba(200,64,26,0.08); } html.page-home .nav-links a.active { color:#ffffff !important; background:var(--accent) !important; box-shadow:0 3px 12px rgba(200,64,26,0.3); } html.page-home .nav-cta {display:flex;align-items:center;gap:10px} /* User dropdown */ html.page-home .user-menu-wrap {position:relative} html.page-home .user-menu-btn { display:flex;align-items:center;gap:9px; background:var(--white);border:1.5px solid var(--border); border-radius:40px;padding:5px 14px 5px 5px; cursor:pointer;font-family:var(--font-sans); font-size:.85rem;font-weight:700;color:var(--ink); transition:all .2s;box-shadow:var(--shadow); } html.page-home .user-menu-btn:hover {border-color:var(--accent)} html.page-home .user-av-sm { width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;font-size:.88rem;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0; } html.page-home .user-dname {max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.page-home .user-dropdown { display:none;position:absolute;top:calc(100% + 10px);right:0; background:var(--white);border:1px solid var(--border); border-radius:12px;padding:8px;min-width:200px; box-shadow:0 12px 40px rgba(0,0,0,.13);z-index:300; animation:dropFade .18s ease; } html.page-home .user-dropdown.open {display:block} @keyframes dropFade {from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} html.page-home .dd-item { display:flex;align-items:center;gap:10px; padding:9px 14px;border-radius:8px; text-decoration:none;color:var(--ink2); font-size:.875rem;font-weight:600;transition:all .15s; font-family:var(--font-sans); } html.page-home .dd-item:hover {background:var(--bg2);color:var(--ink)} html.page-home .dd-divider {height:1px;background:var(--border);margin:5px 0} html.page-home .dd-logout {color:#c0392b} html.page-home .dd-logout:hover {background:#fef2f2;color:#c0392b} /* ══════════════════════════════════════════════════ FULL WIDTH HERO BANNER SLIDER ═══════════════════════════════════════════════════ */ html.page-home .full-hero-slider-section { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; } html.page-home .full-hero-slider { position: relative; width: 100vw; /* The banner images are about 2.74:1 (1600x583) and object-fit is fill, so a box shorter than that shape stretches them sideways: at 540px on a 1920 screen the banner was being drawn 30% wider than it really is, and 73% wider at 2560. 33vw brings that down to about 10% everywhere while leaving two thirds of the screen for the content below. The 1080px ceiling only starts to bite past a 3270px viewport. */ height: clamp(260px, 33vw, 1080px); overflow: hidden; } html.page-home .full-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; } html.page-home .full-hero-slide.active { opacity: 1; visibility: visible; z-index: 2; } html.page-home .full-hero-img { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: fill !important; display: block !important; } html.page-home .full-hero-container { position: relative; z-index: 3; max-width: 1100px; width: 90%; margin: 0 auto; text-align: center; color: #ffffff; padding: 40px 20px; background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html.page-home .full-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 30px; background: rgba(200, 64, 26, 0.35); border: 1px solid rgba(232, 106, 53, 0.6); color: #ff9d76; font-size: 0.85rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; } html.page-home .pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff6b35; box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); } } html.page-home .full-hero-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.8vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: #ffffff; text-shadow: 0 3px 12px rgba(0,0,0,0.8); } html.page-home .full-hero-sub { font-family: var(--font-sans); font-size: clamp(0.95rem, 1.8vw, 1.18rem); color: rgba(255, 255, 255, 0.92); max-width: 760px; margin: 0 auto 28px; font-weight: 300; line-height: 1.7; } html.page-home .full-hero-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } html.page-home .btn-outline-light { display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; border-radius: 8px; font-size: 1.02rem; font-weight: 700; cursor: pointer; text-decoration: none; background: rgba(255, 255, 255, 0.12); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); transition: all 0.25s ease; } html.page-home .btn-outline-light:hover { background: #ffffff; color: var(--ink); border-color: #ffffff; } /* Hero Controls */ html.page-home .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); border: none; color: #ffffff; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; backdrop-filter: blur(4px); transition: all 0.2s ease; user-select: none; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } html.page-home .hero-arrow:hover { background: rgba(200, 64, 26, 0.9); transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } html.page-home .hero-arrow.prev-arrow { left: 16px; } html.page-home .hero-arrow.next-arrow { right: 16px; } html.page-home .full-hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } html.page-home .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } html.page-home .hero-dot.active { background: var(--accent); width: 28px; border-radius: 10px; } /* Tablet & Mobile Responsiveness */ @media (max-width: 992px) { html.page-home .hero-arrow { width: 40px; height: 40px; font-size: 1.3rem; } html.page-home .hero-arrow.prev-arrow { left: 12px; } html.page-home .hero-arrow.next-arrow { right: 12px; } } @media (max-width: 600px) { html.page-home .hero-arrow { width: 36px; height: 36px; font-size: 1.1rem; background: rgba(0, 0, 0, 0.5); display: flex !important; } html.page-home .hero-arrow.prev-arrow { left: 8px; } html.page-home .hero-arrow.next-arrow { right: 8px; } html.page-home .full-hero-dots { bottom: 10px; gap: 8px; } } /* ── MARQUEE ── */ html.page-home .marquee-wrap {background:var(--ink);color:#fff;padding:14px 0;overflow:hidden} html.page-home .marquee {display:flex;gap:50px;animation:marquee 28s linear infinite;width:max-content} @keyframes marquee {from{transform:translateX(0)}to{transform:translateX(-50%)}} html.page-home .marquee-item {display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;white-space:nowrap;font-family:var(--font-sans)} html.page-home .marquee-item .dot {color:var(--accent2)} /* ══════════════════════════════════════════════════ COMBINED LEADERBOARD ═══════════════════════════════════════════════════ */ html.page-home .lb-section {background:var(--bg2);padding:80px 5%} html.page-home .lb-two-col {display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1200px;margin:0 auto} html.page-home .lb-panel { background:var(--white);border-radius:var(--radius); border:1px solid var(--border);overflow:hidden; box-shadow:var(--shadow);display:flex;flex-direction:column; } /* Shown in place of a panel when no completed attempt qualifies for it. */ html.page-home .lb-empty { display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;padding:56px 24px;text-align:center;flex:1; } html.page-home .lb-empty-icon {font-size:2.4rem;opacity:.35;line-height:1} html.page-home .lb-empty p { margin:0;color:var(--ink2);font-family:var(--font-sans); font-size:.9rem;line-height:1.6; } html.page-home .lb-ph {display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border)} html.page-home .lb-ph-dark {background:linear-gradient(135deg,var(--ink) 0%,#2a2a26 100%);color:#fff} html.page-home .lb-ph-orange {background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);color:#fff} html.page-home .lb-ph-icon {font-size:1.5rem} html.page-home .lb-ph-title {font-family:var(--font-display);font-size:1.15rem;font-weight:800} html.page-home .lb-ph-sub {font-size:.72rem;opacity:.75;margin-top:2px;font-family:var(--font-sans)} html.page-home .lb-badge { margin-left:auto;padding:4px 12px;border-radius:20px; font-size:.68rem;font-weight:700;letter-spacing:.04em; white-space:nowrap;display:flex;align-items:center;gap:5px; background:rgba(255,255,255,.18);color:#fff;font-family:var(--font-sans); } html.page-home .live-dot {width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite;flex-shrink:0} /* ── Top places, laid out along the row ────────────────────────────────── Was a stepped podium of three narrow blocks (.mini-podium / .mp-*) on the left panel and a tall spotlight card on the right (.today-spot / .spot-*). Between them a name had to be cut to its first word and only one figure fitted. One horizontal card serves both panels now. */ /* Mini podium inside left panel */ html.page-home .mini-podium { display:flex;justify-content:center;align-items:flex-end; gap:16px;padding:38px 16px 18px; background:var(--bg);border-bottom:1px solid var(--border); } html.page-home .mp-item { display:flex;flex-direction:column;align-items:center; border-radius:10px 10px 0 0;padding:14px 8px 10px; position:relative;text-align:center;flex:1;max-width:150px; transition:transform .25s; } html.page-home .mp-item:hover {transform:translateY(-4px)} /* Each bar is 13px taller than it was to hold the place line under the name. */ html.page-home .mp-1 {height:185px;background:var(--gold-bg);border:1.5px solid var(--gold);border-bottom:none} html.page-home .mp-2 {height:159px;background:var(--silver-bg);border:1.5px solid var(--silver);border-bottom:none} html.page-home .mp-3 {height:145px;background:var(--bronze-bg);border:1.5px solid var(--bronze);border-bottom:none} html.page-home .mp-av { width:50px;height:50px;border-radius:50%; background:var(--ink);color:#fff; font-family:var(--font-serif);font-size:1.1rem;font-weight:700; display:flex;align-items:center;justify-content:center; position:absolute;top:-25px; border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15); } html.page-home .mp-1 .mp-av {width:60px;height:60px;top:-30px;border-color:var(--gold)} html.page-home .mp-2 .mp-av {border-color:var(--silver)} html.page-home .mp-3 .mp-av {border-color:var(--bronze)} html.page-home .mp-medal {position:absolute;top:-8px;right:-4px;font-size:.9rem} html.page-home .mp-1 .mp-medal {font-size:1.05rem} html.page-home .mp-name { font-family:var(--font-sans);font-size:.75rem;font-weight:700; color:var(--ink);margin-top:22px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; } html.page-home .mp-1 .mp-name {margin-top:28px;font-size:.82rem} /* The city or state, as the table rows show it. Quieter than the name so the card still reads name first, and clipped rather than wrapped: a long place must not push the figures out of the bar. */ html.page-home .mp-place { font-family:var(--font-sans);font-size:.58rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--ink3); margin:1px 0 3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; } html.page-home .mp-speed {font-family:var(--font-serif);font-size:1.05rem;font-weight:700;color:var(--green);line-height:1.2} html.page-home .mp-speed small {display:block;font-size:.55rem;color:var(--ink3);font-weight:700;letter-spacing:.05em;line-height:1.2} /* Net keeps the big green figure it always had; gross and backspace join it underneath as labelled rows. The bars are taller than they were (118/92/76) because there are two more lines to hold. */ html.page-home .mp-stats { width:100%;margin-top:6px; display:flex;flex-direction:column;gap:2px; font-family:var(--font-sans); } html.page-home .mp-row {display:flex;justify-content:space-between;align-items:baseline;gap:4px;line-height:1.3} html.page-home .mp-k {font-size:.56rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3)} html.page-home .mp-v {font-size:.68rem;font-weight:700;color:var(--ink2);white-space:nowrap} /* List rows */ html.page-home .lb-list {flex:1} html.page-home .lb-row { display:grid;grid-template-columns:36px 38px 1fr 64px 52px; align-items:center;gap:10px;padding:11px 18px; border-bottom:1px solid rgba(0,0,0,.05);transition:background .15s; } html.page-home .lb-row:last-child {border-bottom:none} html.page-home .lb-row:hover {background:var(--bg2)} html.page-home .lb-av { width:36px;height:36px;border-radius:50%; color:#fff;font-family:var(--font-serif);font-size:.9rem;font-weight:700; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent2)); } /* ── LEADERBOARD TABLE ── */ html.page-home .lb-table-wrap {width:100%;overflow-x:auto} html.page-home .lb-table {width:100%;border-collapse:collapse;font-family:var(--font-sans)} html.page-home .lb-table th { background:var(--bg2);color:var(--ink2); font-size:.7rem;font-weight:800;text-transform:uppercase; letter-spacing:.05em;padding:9px 12px;border-bottom:1.5px solid var(--border); } html.page-home .lb-table td {padding:9px 7px;border-bottom:1px solid rgba(0,0,0,.05);vertical-align:middle} html.page-home .lb-table th {padding:9px 7px} /* The unit moves into the header so the cells can be bare numbers -- six columns do not fit a half-width panel otherwise. */ html.page-home .th-unit {display:block;font-size:.56rem;font-weight:600;opacity:.7;letter-spacing:.02em} html.page-home .lb-table tr:hover {background:var(--bg2)} html.page-home .lb-table tr:last-child td {border-bottom:none} html.page-home .td-rnum {font-weight:800;font-size:.82rem;color:var(--ink3);text-align:center} html.page-home .td-student {display:flex;align-items:center;gap:10px} /* The student cell takes whatever is left and ellipsises, so the four number columns are never pushed off the right edge. max-width:0 is the usual way to make a table cell shrinkable. */ html.page-home .lb-table td:nth-child(2), html.page-home .lb-table th:nth-child(2) {max-width:0;width:100%} html.page-home .td-student {min-width:0} html.page-home .td-sinfo {min-width:0;flex:1} html.page-home .td-sinfo {display:flex;flex-direction:column;min-width:0} html.page-home .td-name {font-weight:700;font-size:.85rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.page-home .td-meta {font-size:.68rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.page-home .td-gross {font-family:var(--font-opensans);font-size:.88rem;font-weight:700;color:var(--ink2);text-align:right;white-space:nowrap} html.page-home .td-gross small {font-size:.62rem;color:var(--ink3);font-weight:400} html.page-home .td-net {font-family:var(--font-opensans);font-size:.95rem;font-weight:800;color:var(--green);text-align:right;white-space:nowrap} html.page-home .td-net small {font-size:.62rem;color:var(--ink3);font-weight:400} html.page-home .td-acc {font-size:.8rem;font-weight:700;color:var(--ink2);text-align:right;white-space:nowrap} html.page-home .td-bs {font-size:.78rem;font-weight:700;color:var(--ink3);text-align:right;white-space:nowrap} /* On a phone six columns cannot all shrink: the student name was being squeezed to nothing and the header wrapped one letter per line. Give the table a floor and let .lb-table-wrap scroll, which it already does, rather than losing the names. */ @media (max-width:640px) { html.page-home .lb-table {min-width:500px} html.page-home .mini-podium {gap:9px;padding:38px 8px 18px} html.page-home .mp-item {padding:14px 5px 10px} html.page-home .mp-k {font-size:.5rem;letter-spacing:0} html.page-home .mp-v {font-size:.62rem} } /* ── First place on the latest board ────────────────────────────────────── Replaces the tall centred spotlight (.today-spot / .spot-*). Same facts, laid along the row, each under its own label. Rank 1 only. */ html.page-home .tp-card { display:flex;align-items:center;gap:18px; padding:18px 20px; background:linear-gradient(160deg,#fff8f5,#fff); border-bottom:1px solid var(--border); } html.page-home .tp-face {flex-shrink:0;line-height:0} /* The avatar helper writes its border and shadow inline, so these have to win to give first place a heavier ring than a table row gets. */ html.page-home .tp-face img, html.page-home .tp-face .lb-av { border:4px solid #fff !important; box-shadow:0 6px 18px rgba(200,64,26,.22) !important; } html.page-home .tp-body {flex:1;min-width:0} html.page-home .tp-line {display:flex;align-items:center;gap:9px;flex-wrap:wrap} html.page-home .tp-medal { width:27px;height:27px;border-radius:50%;flex-shrink:0; background:linear-gradient(145deg,#ffd75e,#efa300); color:#6b4000;font-family:var(--font-display);font-weight:800;font-size:.85rem; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 7px rgba(239,163,0,.5); } html.page-home .tp-name { font-family:var(--font-display);font-weight:800;font-size:1.35rem; color:var(--ink);line-height:1.15; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } html.page-home .tp-pill { padding:3px 11px;border-radius:20px;white-space:nowrap; background:#ffe7dd;color:var(--accent); font-family:var(--font-sans);font-size:.68rem;font-weight:700; } html.page-home .tp-sub { font-family:var(--font-sans);font-size:.76rem;color:var(--ink3); margin-top:6px; } html.page-home .tp-stats {display:flex;align-items:flex-end;margin-top:15px} html.page-home .tp-stat { flex:1 1 auto;min-width:0;padding:0 10px; border-left:1px solid var(--border); display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center; } html.page-home .tp-stat:first-child {padding-left:0;border-left:0} html.page-home .tp-lab { font-family:var(--font-sans);font-size:.58rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--ink3); white-space:normal;line-height:1.25;max-width:100%; } html.page-home .tp-val { font-family:var(--font-display);font-weight:800;font-size:1.15rem; color:var(--ink);line-height:1;white-space:nowrap; } html.page-home .tp-stat-hero .tp-val {font-size:1.95rem;color:var(--accent)} /* On a phone the four figures cannot sit in one row beside a face: the labels are longer than the numbers. The face goes above, and the figures share two rows of two. */ @media (max-width:560px) { html.page-home .tp-card {flex-direction:column;align-items:flex-start;gap:12px} html.page-home .tp-stats {flex-wrap:wrap;width:100%;row-gap:14px} html.page-home .tp-stat {flex:0 0 50%;padding:0 8px} html.page-home .tp-stat:nth-child(odd) {border-left:0;padding-left:0} html.page-home .tp-stat-hero .tp-val {font-size:1.7rem} } html.page-home .today-cta { padding:14px 22px;background:#fff6f3; border-top:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; } html.page-home .today-cta p {font-size:.82rem;color:var(--ink2);font-weight:600;font-family:var(--font-sans)} /* ══════════════════════════════════════════════════ COURSES SECTION ═══════════════════════════════════════════════════ */ html.page-home .courses-section {background:var(--white);padding:60px 5%} html.page-home .courses-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px;max-width:1340px;margin:0 auto; } @media(max-width:1100px) { html.page-home .courses-grid {grid-template-columns:repeat(2,1fr);} } @media(max-width:600px) { html.page-home .courses-grid {grid-template-columns:1fr;} } html.page-home .course-card { background:var(--white);border-radius:10px; border:1px solid var(--border);overflow:hidden; transition:all .3s;text-decoration:none;color:inherit; display:flex;flex-direction:column; box-shadow:0 2px 10px rgba(0,0,0,.05); } html.page-home .course-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)} html.page-home .course-thumb { height:135px;display:flex;align-items:center;justify-content:center; font-size:2.4rem;color:#fff;position:relative;overflow:hidden; flex-shrink:0;background:#ffffff;border-bottom:1px solid var(--border); } html.page-home .course-thumb img { width:100%;height:100%;object-fit:contain; padding:8px 12px;background:#ffffff; transition:transform .4s ease; } html.page-home .course-card:hover .course-thumb img {transform:scale(1.06)} html.page-home .course-thumb-fallback { width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:2.6rem; } html.page-home .course-overlay { position:absolute;top:8px;right:8px; display:flex;gap:5px; } html.page-home .course-lang-badge { background:rgba(0,0,0,.6);color:#fff; font-size:.6rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:3px 7px;border-radius:4px; font-family:var(--font-sans);backdrop-filter:blur(4px); } html.page-home .course-body {padding:14px 16px;flex:1;display:flex;flex-direction:column} html.page-home .course-dept { font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--accent);margin-bottom:3px;font-family:var(--font-sans); } html.page-home .course-title { font-family:var(--font-serif);font-size:1.05rem;font-weight:700; color:var(--ink);margin-bottom:6px;line-height:1.25; } html.page-home .course-desc { font-size:.8rem;color:var(--ink2);line-height:1.5;margin-bottom:10px; flex:1;font-family:var(--font-sans);font-weight:300; } html.page-home .course-specs { display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap; } html.page-home .spec-chip { display:inline-flex;align-items:center;gap:4px; background:var(--bg2);border-radius:5px; padding:3px 8px;font-size:.7rem;font-weight:600; color:var(--ink2);font-family:var(--font-sans); } html.page-home .course-footer { display:flex;align-items:center;justify-content:space-between; gap:8px;padding-top:10px;border-top:1px solid var(--border); flex-wrap:wrap; } html.page-home .course-price-wrap {display:flex;align-items:baseline;gap:6px;font-family:var(--font-opensans);} html.page-home .price-now { font-family:var(--font-opensans);font-size:1.35rem;font-weight:800; color:var(--accent); } html.page-home .price-orig { font-size:.8rem;color:var(--ink3);text-decoration:line-through; font-family:var(--font-opensans); } html.page-home .price-save { font-size:.68rem;font-weight:700;color:var(--green); background:rgba(26,122,74,.1);padding:2px 6px;border-radius:4px; font-family:var(--font-opensans); } html.page-home .course-actions {display:flex;gap:6px;align-items:center} html.page-home .btn-buy { background:var(--accent);color:#fff; padding:6px 14px;border-radius:6px; font-size:.78rem;font-weight:700; border:none;cursor:pointer;text-decoration:none; transition:all .2s;display:inline-flex;align-items:center;gap:4px; font-family:var(--font-sans); } html.page-home .btn-buy:hover {background:#a83214;transform:translateY(-1px)} html.page-home .btn-detail { background:transparent;color:var(--ink2); padding:5px 10px;border-radius:6px; font-size:.78rem;font-weight:600; border:1.5px solid var(--border);cursor:pointer;text-decoration:none; transition:all .2s;display:inline-flex;align-items:center;gap:4px; font-family:var(--font-sans); } html.page-home .btn-detail:hover {border-color:var(--ink);color:var(--ink)} /* ══════════════════════════════════════════════════ WHY US (Stats) ═══════════════════════════════════════════════════ */ html.page-home .why-section {padding:80px 5%;background:var(--bg)} html.page-home .why-inner {display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:center;max-width:1150px;margin:0 auto} html.page-home .why-left h2 {font-family:var(--font-display);font-size:2.2rem;font-weight:800;line-height:1.2;margin-bottom:14px} html.page-home .why-left p {font-size:.95rem;color:var(--ink2);font-weight:300;line-height:1.8;margin-bottom:24px;font-family:var(--font-sans)} html.page-home .stats-bento {display:grid;grid-template-columns:1fr 1fr;gap:14px} html.page-home .stat-tile { background:var(--white);border-radius:12px; border:1px solid var(--border);padding:18px 16px; display:flex;align-items:center;gap:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:all .25s; } html.page-home .stat-tile:hover {transform:translateY(-3px);box-shadow:var(--shadow)} html.page-home .stat-icon-wrap { width:48px;height:48px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:1.4rem; } html.page-home .stat-num { font-family:var(--font-display);font-size:1.85rem;font-weight:800; line-height:1;margin-bottom:2px; } html.page-home .stat-lbl {font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-sans)} /* ══════════════════════════════════════════════════ JOIN BANNER ═══════════════════════════════════════════════════ */ html.page-home .join-banner { margin:0 5% 0; background:linear-gradient(135deg,#1565c0,#1a88d8); border-radius:20px;padding:0;overflow:hidden; display:grid;grid-template-columns:1fr auto;align-items:center; position:relative; } html.page-home .join-banner-bg { position:absolute;inset:0; background:url('data:image/svg+xml,'); background-size:cover;pointer-events:none; } html.page-home .join-content {padding:44px 48px;position:relative;z-index:1} html.page-home .join-content h2 { font-family:var(--font-display);font-size:2rem;font-weight:800; color:#fff;margin-bottom:10px;line-height:1.2; } html.page-home .join-content p {font-size:.95rem;color:rgba(255,255,255,.85);margin-bottom:6px;font-family:var(--font-sans);font-weight:400} html.page-home .join-phone { font-size:1.15rem;font-weight:700;color:#fff; font-family:var(--font-sans);margin-bottom:24px; display:flex;align-items:center;gap:6px; } html.page-home .join-img { width:320px;height:100%; background:url('https://images.unsplash.com/photo-1587829741301-dc798b83add3?auto=format&fit=crop&w=600&q=80') center/cover; min-height:200px;position:relative; } html.page-home .join-img::before { content:'';position:absolute;inset:0; background:linear-gradient(90deg,#1565c0 0%,transparent 40%); } /* Yellow decoration blobs */ html.page-home .blob { position:absolute;border-radius:50%;background:var(--accent3); opacity:.7; } html.page-home .blob-1 {width:60px;height:60px;bottom:-15px;right:100px} html.page-home .blob-2 {width:35px;height:35px;top:20px;right:60px} /* ══════════════════════════════════════════════════ OBJECTIVE / ABOUT ═══════════════════════════════════════════════════ */ html.page-home .obj-section { background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.82)), url('https://images.unsplash.com/photo-1573164574572-cb89e39749b4?auto=format&fit=crop&w=1400&q=80') center/cover fixed; padding:90px 5%;color:#fff; } html.page-home .obj-inner {max-width:1100px;margin:0 auto} html.page-home .obj-tag {font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);margin-bottom:14px;font-family:var(--font-sans)} html.page-home .obj-title {font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.6rem);font-weight:800;margin-bottom:40px;line-height:1.2} html.page-home .obj-grid {display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:36px} html.page-home .obj-grid p { font-family:var(--font-sans);font-size:.95rem; color:rgba(255,255,255,.82);line-height:1.85;font-weight:300; } html.page-home .obj-grid p em {color:var(--accent2);font-style:normal;font-weight:700} /* ══════════════════════════════════════════════════ VISION & MISSION SECTION WITH ANIMATIONS ═══════════════════════════════════════════════════ */ html.page-home .vm-section { padding: 90px 5%; background: linear-gradient(180deg, #1c1c1a 0%, #121210 100%); color: #ffffff; position: relative; overflow: hidden; } html.page-home .vm-section::before { content: ''; position: absolute; top: -150px; left: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(200,64,26,0.18) 0%, transparent 70%); pointer-events: none; } html.page-home .vm-section::after { content: ''; position: absolute; bottom: -150px; right: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(232,106,53,0.15) 0%, transparent 70%); pointer-events: none; } html.page-home .vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; max-width: 1150px; margin: 40px auto 0; position: relative; z-index: 2; } html.page-home .vm-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border-radius: 20px; padding: 34px 28px; position: relative; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(40px); } html.page-home .vm-card.animate-in { opacity: 1; transform: translateY(0); } html.page-home .vm-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 20px 40px rgba(200, 64, 26, 0.25); background: rgba(255, 255, 255, 0.06); } html.page-home .vm-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } html.page-home .vm-icon-wrapper { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, rgba(200,64,26,0.25), rgba(232,106,53,0.25)); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 0 20px rgba(200,64,26,0.3); animation: pulseGlow 3s infinite alternate; flex-shrink: 0; } @keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(200,64,26,0.2); } 100% { box-shadow: 0 0 25px rgba(232,106,53,0.5); } } html.page-home .vm-title { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; color: #ffffff; letter-spacing: 0.02em; line-height: 1.2; } html.page-home .vm-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent2); margin-bottom: 3px; font-family: var(--font-sans); } html.page-home .vm-main-statement { background: rgba(200, 64, 26, 0.1); border-left: 3.5px solid var(--accent); padding: 14px 18px; border-radius: 0 12px 12px 0; font-size: 0.88rem; line-height: 1.65; color: #e2e2e2; margin-bottom: 24px; font-family: var(--font-sans); font-weight: 400; } html.page-home .vm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } html.page-home .vm-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #cccccc; line-height: 1.6; padding: 10px 14px; background: rgba(255, 255, 255, 0.025); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.25s ease; font-family: var(--font-sans); } html.page-home .vm-item:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(232, 106, 53, 0.35); transform: translateX(6px); color: #ffffff; } html.page-home .vm-num-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #ffffff; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(200, 64, 26, 0.4); font-family: var(--font-sans); } html.page-home .vm-item-text { flex: 1; } html.page-home .vm-item-text strong { color: #ffffff; font-weight: 700; } /* ══════════════════════════════════════════════════ TESTIMONIALS SLIDER ═══════════════════════════════════════════════════ */ html.page-home .testimonials-section {background:var(--white);padding:80px 3%;position:relative;overflow:hidden} html.page-home .test-slider-outer {max-width:1550px;margin:0 auto;position:relative;padding:25px 48px 0} html.page-home .test-slider-track-wrap {overflow:hidden;border-radius:var(--radius);padding-top:35px} html.page-home .test-slider-track {display:flex;transition:transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);gap:24px} html.page-home .test-card { flex:0 0 calc(25% - 18px); min-width:240px; background:#e8fdf5; border-radius:var(--radius);padding:28px 20px 20px; position:relative;overflow:visible;display:flex;flex-direction:column; box-shadow:0 4px 16px rgba(0,0,0,.04); border:1px solid rgba(26,122,74,.12); } @media(max-width:1200px) { html.page-home .test-card {flex:0 0 calc(33.333% - 16px)} } @media(max-width:992px) { html.page-home .test-card {flex:0 0 calc(50% - 12px)} } @media(max-width:600px) { html.page-home .test-card {flex:0 0 100%} html.page-home .test-slider-outer {padding:25px 10px 0} } html.page-home .test-av { width:68px;height:68px;border-radius:50%; border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.15); overflow:hidden;position:absolute;top:-34px;left:24px; background:linear-gradient(135deg,#1a7a4a,#2dd4a2); display:flex;align-items:center;justify-content:center; } html.page-home .test-av-img {width:100%;height:100%;object-fit:cover;border-radius:50%} html.page-home .test-av-initial { font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:#fff; display:flex;align-items:center;justify-content:center;width:100%;height:100%; } html.page-home .test-stars {color:#f5a623;font-size:.9rem;margin-top:28px;margin-bottom:12px} html.page-home .test-text { font-family:var(--font-sans);font-size:.88rem;color:var(--ink2); line-height:1.8;flex:1;margin-bottom:18px;font-weight:300; font-style:italic; } html.page-home .test-footer {display:flex;align-items:center;justify-content:space-between;gap:8px} html.page-home .test-name {font-family:var(--font-serif);font-weight:700;font-size:.92rem;color:var(--ink)} html.page-home .test-city {font-size:.72rem;color:var(--ink3);font-family:var(--font-sans)} html.page-home .test-exam-badge { background:rgba(26,122,74,.12);color:var(--green); padding:3px 9px;border-radius:5px;font-size:.68rem; font-weight:700;font-family:var(--font-sans);letter-spacing:.04em;white-space:nowrap; } html.page-home .quote-icon { position:absolute;bottom:16px;right:20px; font-size:2.8rem;color:rgba(26,122,74,.12);line-height:1;pointer-events:none; } /* Slider Controls */ html.page-home .test-slider-btn { position:absolute;top:58%;transform:translateY(-50%); width:42px;height:42px;border-radius:50%; background:var(--white);border:1.5px solid var(--border); color:var(--ink);font-size:1.1rem; display:flex;align-items:center;justify-content:center; cursor:pointer;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.1); transition:all .2s ease; } html.page-home .test-slider-btn:hover { background:var(--accent);color:#fff;border-color:var(--accent); box-shadow:0 6px 18px rgba(200,64,26,.3); } html.page-home .test-slider-btn.prev-btn {left:0} html.page-home .test-slider-btn.next-btn {right:0} html.page-home .test-slider-dots {display:flex;justify-content:center;gap:8px;margin-top:28px} html.page-home .test-dot {width:10px;height:10px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .25s ease} html.page-home .test-dot.active {background:var(--accent);width:24px;border-radius:10px} /* ══════════════════════════════════════════════════ CONTACT SECTION ═══════════════════════════════════════════════════ */ html.page-home .contact-section {background:var(--bg);padding:80px 5%} html.page-home .contact-info-row { display:grid;grid-template-columns:repeat(3,1fr); gap:20px;margin-bottom:50px;max-width:1000px;margin-left:auto;margin-right:auto; } html.page-home .ci-card { background:var(--white);border:1px solid var(--border); border-radius:var(--radius);padding:28px 24px; transition:all .25s; } html.page-home .ci-card:hover {transform:translateY(-3px);box-shadow:var(--shadow)} html.page-home .ci-icon { width:44px;height:44px;border-radius:10px; background:var(--bg2); display:flex;align-items:center;justify-content:center; font-size:1.35rem;margin-bottom:16px; border:1px solid var(--border); } html.page-home .ci-label { font-family:var(--font-serif);font-size:1rem;font-weight:700; margin-bottom:6px;color:var(--ink); } html.page-home .ci-value {font-family:var(--font-sans);font-size:.88rem;color:var(--ink2);font-weight:300;line-height:1.6} html.page-home .contact-grid { display:grid;grid-template-columns:1fr 1fr; gap:32px;max-width:1000px;margin:0 auto; } html.page-home .contact-form-wrap {background:var(--white);border-radius:var(--radius);padding:32px;border:1px solid var(--border)} html.page-home .form-section-tag {font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-family:var(--font-sans)} html.page-home .form-title {font-family:var(--font-serif);font-size:1.5rem;font-weight:700;margin-bottom:24px;color:var(--ink)} html.page-home .form-row {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} html.page-home .form-group {display:flex;flex-direction:column;gap:5px;margin-bottom:14px} html.page-home .form-label {font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-sans)} html.page-home .form-input, html.page-home .form-textarea { padding:10px 14px;border:1.5px solid var(--border); border-radius:8px;font-family:var(--font-sans);font-size:.9rem; color:var(--ink);background:var(--bg);outline:none; transition:border-color .2s; } html.page-home .form-input:focus, html.page-home .form-textarea:focus {border-color:var(--accent);background:#fff} html.page-home .form-textarea {resize:vertical;min-height:110px} html.page-home .btn-send { background:var(--accent);color:#fff; border:none;padding:12px 28px;border-radius:8px; font-family:var(--font-sans);font-size:.9rem;font-weight:700; cursor:pointer;transition:all .2s;letter-spacing:.03em; } html.page-home .btn-send:hover {background:#a83214;transform:translateY(-1px)} html.page-home .map-wrap {border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)} html.page-home .map-wrap iframe {width:100%;height:100%;min-height:400px;border:none;display:block} /* ══════════════════════════════════════════════════ FAQ ═══════════════════════════════════════════════════ */ html.page-home .faq-section {background:var(--white);padding:80px 5%} html.page-home .faq-list {max-width:820px;margin:0 auto 30px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} html.page-home .faq-item {border-bottom:1px solid var(--border);cursor:pointer} html.page-home .faq-item:last-child {border-bottom:none} html.page-home .faq-item.open {background:var(--bg)} html.page-home .faq-q { display:flex;align-items:center;justify-content:space-between; padding:18px 22px;gap:16px;font-weight:700;font-size:.95rem; color:var(--ink);user-select:none;font-family:var(--font-sans); } html.page-home .faq-q span {flex:1} html.page-home .faq-icon { width:30px;height:30px;border-radius:50%; background:var(--bg2);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--ink2);transition:all .3s; } html.page-home .faq-item.open .faq-icon {background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(180deg)} html.page-home .faq-a {max-height:0;overflow:hidden;transition:max-height .35s ease} html.page-home .faq-item.open .faq-a {max-height:200px} html.page-home .faq-a p {padding:0 22px 18px;font-size:.9rem;color:var(--ink2);line-height:1.8;font-family:var(--font-sans);font-weight:300} html.page-home .faq-help { max-width:820px;margin:0 auto; background:linear-gradient(135deg,var(--ink),#2a2a26); border-radius:var(--radius);padding:34px;text-align:center;color:#fff; } html.page-home .faq-help h4 {font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin-bottom:8px} html.page-home .faq-help p {font-size:.88rem;color:rgba(255,255,255,.65);font-family:var(--font-sans)} /* ══════════════════════════════════════════════════ WHY FEATURES (dark) ═══════════════════════════════════════════════════ */ html.page-home .features-dark { background:var(--ink);color:#fff; padding:80px 5%; } html.page-home .features-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px;margin-top:48px;max-width:1100px;margin-left:auto;margin-right:auto} html.page-home .feat-item { padding:26px;border-radius:12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); transition:all .25s; } html.page-home .feat-item:hover {background:rgba(255,255,255,.08);transform:translateY(-3px)} html.page-home .feat-icon {font-size:2rem;margin-bottom:14px} html.page-home .feat-title {font-family:var(--font-serif);font-size:1.05rem;font-weight:700;margin-bottom:8px} html.page-home .feat-desc {font-size:.85rem;color:rgba(255,255,255,.6);font-family:var(--font-sans);font-weight:300;line-height:1.7} /* ── CTA BANNER ── */ html.page-home .cta-banner { margin:0 5% 80px; background:linear-gradient(135deg,var(--accent) 0%,#e06030 50%,var(--accent2) 100%); border-radius:20px;padding:60px;text-align:center;color:#fff; } html.page-home .cta-banner h2 {font-family:var(--font-display);font-size:2.4rem;font-weight:800;margin-bottom:14px} html.page-home .cta-banner p {font-size:1.05rem;margin-bottom:28px;opacity:.9;font-family:var(--font-sans);font-weight:300} /* ── FOOTER ── */ html.page-home footer {background:var(--ink);color:#fff;padding:60px 5% 30px} html.page-home .footer-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} html.page-home .footer-brand p {font-size:.88rem;color:rgba(255,255,255,.5);margin-top:14px;font-family:var(--font-sans);font-weight:300;line-height:1.7} html.page-home .footer-col h4 {font-family:var(--font-serif);font-size:1rem;font-weight:700;margin-bottom:18px} html.page-home .footer-col a {display:block;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:10px;font-size:.88rem;font-family:var(--font-sans);font-weight:400;transition:color .2s} html.page-home .footer-col a:hover {color:var(--accent2)} html.page-home .footer-bottom {border-top:1px solid rgba(255,255,255,.1);padding-top:18px;text-align:center;font-size:.82rem;color:rgba(255,255,255,.4);font-family:var(--font-sans)} /* ── MOBILE ── */ @media(max-width:1000px) { html.page-home .lb-two-col, html.page-home .why-inner, html.page-home .obj-grid, html.page-home .contact-grid {grid-template-columns:1fr} html.page-home .join-banner {grid-template-columns:1fr} html.page-home .join-img {display:none} html.page-home .contact-info-row {grid-template-columns:1fr} html.page-home .footer-grid {grid-template-columns:1fr 1fr} } @media(max-width:768px) { html.page-home .hero {grid-template-columns:1fr;text-align:center;padding:40px 5%} html.page-home .hero-sub, html.page-home .hero-btns {max-width:100%} html.page-home .hero-btns {justify-content:center} html.page-home .nav-links {display:none} html.page-home .stats-bento {grid-template-columns:1fr} html.page-home .form-row {grid-template-columns:1fr} } @media(max-width:600px) { html.page-home .footer-grid {grid-template-columns:1fr} html.page-home .lb-acc {display:none} html.page-home .join-content {padding:32px 24px} } /* ========================================================================== ABOUT PAGE — was inline in about.php Selectors are page-unique, but scoped anyway so future edits cannot leak. ========================================================================== */ /* ══════════════════════════════════════════════════ ABOUT US PAGE STYLING (JTC OFFICIAL) ═══════════════════════════════════════════════════ */ html.page-about .about-hero { background: linear-gradient(135deg, #1c1c1a 0%, #121210 100%); padding: 70px 5% 50px; text-align: center; color: #ffffff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); } html.page-about .about-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 650px; height: 320px; background: radial-gradient(circle, rgba(200,64,26,0.22) 0%, transparent 70%); pointer-events: none; } html.page-about .about-tag { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent2); margin-bottom: 12px; background: rgba(232,106,53,0.12); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(232,106,53,0.3); font-family: var(--font-sans); } html.page-about .about-title { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; margin-bottom: 14px; line-height: 1.2; } html.page-about .about-desc { font-family: var(--font-sans); font-size: 1.05rem; color: rgba(255,255,255,0.8); max-width: 780px; margin: 0 auto; line-height: 1.65; } /* OFFICIAL OVERVIEW BANNER */ html.page-about .jtc-overview-section { padding: 70px 5%; background: var(--white); } html.page-about .jtc-overview-card { max-width: 1150px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 40px 45px; box-shadow: var(--shadow); } html.page-about .jtc-overview-card h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); margin-bottom: 16px; line-height: 1.2; } html.page-about .jtc-overview-card p { font-family: var(--font-sans); font-size: 1rem; color: var(--ink2); line-height: 1.85; margin-bottom: 18px; } html.page-about .jtc-highlights-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 25px; } html.page-about .jtc-hl-box { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; border-left: 4px solid var(--accent); } html.page-about .jtc-hl-title { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } html.page-about .jtc-hl-text { font-size: 0.88rem; color: var(--ink); font-weight: 700; font-family: var(--font-sans); } /* LEADERSHIP SECTION */ html.page-about .leadership-section { padding: 80px 5%; background: var(--bg); } html.page-about .leadership-container { max-width: 1150px; margin: 0 auto; } html.page-about .leader-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; margin-bottom: 40px; } @media (max-width: 992px) { html.page-about .leader-card { grid-template-columns: 1fr; padding: 25px; } } html.page-about .leader-img-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.12); border: 4px solid var(--white); background: #f4f4f4; height: 380px; position: relative; } html.page-about .leader-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } html.page-about .leader-badge { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(28,28,26,0.95), rgba(28,28,26,0)); padding: 25px 16px 16px; color: #ffffff; text-align: center; } html.page-about .leader-badge h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin-bottom: 2px; } html.page-about .leader-badge p { font-size: 0.8rem; color: var(--accent2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-sans); } html.page-about .leader-quote-box { background: rgba(200,64,26,0.04); border-left: 4px solid var(--accent); padding: 20px 24px; border-radius: 0 14px 14px 0; margin-bottom: 20px; } html.page-about .leader-quote-text { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.75; color: var(--ink); font-style: italic; margin-bottom: 8px; } html.page-about .leader-quote-author { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 800; color: var(--accent); text-transform: uppercase; } /* MENTOR MESSAGES — the two-across cards under the leadership section. Follows the .leader-card look (white card, 20px radius, --shadow-lg) but stacks image over text so the pair can sit side by side on desktop. minmax(0,1fr) rather than 1fr: grid tracks default to min-width:auto, which would let the long message paragraphs push the row wider than the page. */ html.page-about .mentors-section { padding: 0 5% 80px; background: var(--bg); } html.page-about .mentors-inner { max-width: 1150px; margin: 0 auto; } html.page-about .mentors-heading { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--ink); margin-top: 6px; } html.page-about .mentors-sub { font-family: var(--font-sans); color: var(--ink2); font-size: 0.95rem; margin-top: 8px; } html.page-about .mentors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; } html.page-about .mentor-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* Dark panel: both portraits are cut-outs on black, so they blend into it. The initial sits underneath as a fallback — the img carries onerror="this.remove()", so a missing photo reveals the letter instead of a broken-image icon. */ html.page-about .mentor-img-wrap { position: relative; height: 360px; overflow: hidden; background: linear-gradient(135deg, var(--ink) 0%, #2a2a26 100%); } html.page-about .mentor-img-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } html.page-about .mentor-initial { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 5rem; font-weight: 800; color: rgba(255, 255, 255, 0.22); } html.page-about .mentor-body { padding: 28px 30px 32px; } html.page-about .mentor-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; } html.page-about .mentor-role { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } html.page-about .mentor-text { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.85; color: var(--ink2); } html.page-about .mentors-quote { margin: 34px 0 0; padding: 34px 40px; border-radius: 20px; text-align: center; color: #ffffff; background: linear-gradient(135deg, var(--accent) 0%, #e06030 50%, var(--accent2) 100%); } html.page-about .mentors-quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; line-height: 1.7; margin: 0; } @media (max-width: 860px) { html.page-about .mentors-grid { grid-template-columns: 1fr; } html.page-about .mentor-img-wrap { height: 320px; } } @media (max-width: 560px) { html.page-about .mentors-heading { font-size: 1.8rem; } html.page-about .mentor-body { padding: 24px 20px 26px; } html.page-about .mentors-quote { padding: 26px 20px; } html.page-about .mentors-quote p { font-size: 1.02rem; } } /* NATION LEADING TRACKS SECTION */ html.page-about .tracks-section { padding: 80px 5%; background: var(--white); } html.page-about .tracks-grid { max-width: 1150px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } html.page-about .track-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 28px 22px; transition: all 0.3s ease; } html.page-about .track-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-lg); } html.page-about .track-title { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } html.page-about .track-desc { font-size: 0.88rem; color: var(--ink2); line-height: 1.65; font-family: var(--font-sans); } /* COURSES GRID SECTION */ html.page-about .courses-overview-section { padding: 80px 5%; background: var(--bg); } html.page-about .courses-grid-4 { max-width: 1150px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } html.page-about .c-box { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 24px; text-align: center; box-shadow: var(--shadow); transition: all 0.3s ease; } html.page-about .c-box:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-lg); } html.page-about .c-box h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; } html.page-about .c-box p { font-size: 0.85rem; color: var(--ink2); line-height: 1.5; font-family: var(--font-sans); } /* STATS BAR */ html.page-about .stats-bar { background: linear-gradient(135deg, #1c1c1a 0%, #121210 100%); padding: 50px 5%; color: #ffffff; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } html.page-about .stats-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; } html.page-about .stat-number { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--accent2); line-height: 1; margin-bottom: 8px; } html.page-about .stat-label { font-family: var(--font-sans); font-size: 0.85rem; color: rgba(255,255,255,0.75); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================================== ACHIEVEMENTS PAGE — was inline in achievements.php Gallery, video rail and news cards. ========================================================================== */ /* ══════════════════════════════════════════════════ ACHIEVEMENTS PAGE STYLING & ANIMATIONS ═══════════════════════════════════════════════════ */ html.page-achievements .ach-hero { background: linear-gradient(135deg, #1c1c1a 0%, #121210 100%); padding: 65px 5% 45px; text-align: center; color: #ffffff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); } html.page-achievements .ach-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(circle, rgba(200,64,26,0.2) 0%, transparent 70%); pointer-events: none; } html.page-achievements .ach-tag { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent2); margin-bottom: 10px; background: rgba(232,106,53,0.12); padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(232,106,53,0.3); } html.page-achievements .ach-title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; margin-bottom: 12px; line-height: 1.2; } html.page-achievements .ach-desc { font-family: var(--font-sans); font-size: 1rem; color: rgba(255,255,255,0.75); max-width: 650px; margin: 0 auto 30px; } /* SECTION TABS NAV */ html.page-achievements .ach-tabs-nav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } html.page-achievements .ach-tab-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #ffffff; padding: 10px 24px; border-radius: 30px; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } html.page-achievements .ach-tab-btn:hover, html.page-achievements .ach-tab-btn.active { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: 0 4px 15px rgba(200,64,26,0.4); transform: translateY(-2px); } /* MAIN LAYOUT GRID */ html.page-achievements .ach-layout { padding: 50px 5%; background: var(--bg); min-height: 80vh; } html.page-achievements .ach-grid-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: flex-start; } @media (max-width: 992px) { html.page-achievements .ach-grid-wrap { grid-template-columns: 1fr; } } /* LEFT COLUMN STYLES */ html.page-achievements .section-block-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--border); } /* PHOTO GALLERY GRID */ html.page-achievements .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 50px; } html.page-achievements .gallery-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: all 0.35s ease; cursor: pointer; display: flex; flex-direction: column; } html.page-achievements .gallery-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); } html.page-achievements .gallery-img-wrap { height: 170px; position: relative; overflow: hidden; background: #f0f0f0; } html.page-achievements .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } html.page-achievements .gallery-card:hover .gallery-img-wrap img { transform: scale(1.08); } html.page-achievements .gallery-cat-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #ffffff; font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(4px); } html.page-achievements .gallery-body { padding: 16px; flex: 1; display: flex; flex-direction: column; } html.page-achievements .gallery-date { font-size: 0.72rem; color: var(--ink3); margin-bottom: 4px; font-weight: 600; } html.page-achievements .gallery-title { font-family: var(--font-serif); font-size: 0.98rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.35; } html.page-achievements .gallery-desc { font-size: 0.8rem; color: var(--ink2); line-height: 1.5; font-weight: 300; } /* VIDEO CAROUSEL SLIDER */ html.page-achievements .video-slider-wrap { position: relative; margin-bottom: 50px; background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } html.page-achievements .video-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; scrollbar-width: thin; } html.page-achievements .video-card { min-width: 280px; max-width: 320px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-shrink: 0; transition: all 0.3s ease; cursor: pointer; } html.page-achievements .video-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); } html.page-achievements .video-thumb { height: 160px; position: relative; background: #000; } html.page-achievements .video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } html.page-achievements .play-btn-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 15px rgba(200,64,26,0.5); transition: transform 0.3s ease; } html.page-achievements .video-card:hover .play-btn-overlay { transform: translate(-50%, -50%) scale(1.15); } html.page-achievements .video-info { padding: 14px; } html.page-achievements .video-info h4 { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 6px; } html.page-achievements .video-duration { font-size: 0.75rem; color: var(--ink3); display: flex; align-items: center; gap: 4px; } /* RIGHT COLUMN - CONTINUOUS SCROLLING NEWS & EVENTS */ html.page-achievements .news-sticky-card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-lg); position: sticky; top: 90px; overflow: hidden; } html.page-achievements .news-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid var(--border); margin-bottom: 16px; } html.page-achievements .news-header-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; } html.page-achievements .live-pulse-dot { width: 10px; height: 10px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; animation: pulseDot 1.5s infinite; } @keyframes pulseDot { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } } /* INFINITE VERTICAL SCROLLER */ html.page-achievements .news-scroll-container { height: 480px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%); } html.page-achievements .news-scroll-track { display: flex; flex-direction: column; gap: 16px; animation: continuousVerticalScroll 24s linear infinite; } html.page-achievements .news-scroll-container:hover .news-scroll-track { animation-play-state: paused; } @keyframes continuousVerticalScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } html.page-achievements .news-item-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; transition: all 0.25s ease; } html.page-achievements .news-item-card:hover { border-color: var(--accent); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateX(4px); } html.page-achievements .news-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } html.page-achievements .news-tag { font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; background: rgba(200,64,26,0.1); color: var(--accent); } html.page-achievements .news-date { font-size: 0.72rem; color: var(--ink3); font-weight: 600; } html.page-achievements .news-item-title { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 6px; } html.page-achievements .news-item-desc { font-size: 0.78rem; color: var(--ink2); line-height: 1.5; } /* LIGHTBOX MODAL */ html.page-achievements .lightbox-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; } html.page-achievements .lightbox-modal.active { display: flex; } html.page-achievements .lightbox-content { max-width: 850px; width: 100%; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; } html.page-achievements .lightbox-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; z-index: 10; } html.page-achievements .lightbox-body { display: flex; flex-direction: column; } html.page-achievements .lightbox-img-wrap { width: 100%; max-height: 500px; background: #000; display: flex; align-items: center; justify-content: center; } html.page-achievements .lightbox-img-wrap img, html.page-achievements .lightbox-img-wrap iframe { width: 100%; max-height: 500px; object-fit: contain; } html.page-achievements .lightbox-details { padding: 20px; } html.page-achievements .lightbox-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; } html.page-achievements .lightbox-text { font-size: 0.88rem; color: var(--ink2); line-height: 1.6; } /* ========================================================================== STUDENT DASHBOARD (website account area) — was inline in dashboard.php The website account page, not the admin panel dashboard. ========================================================================== */ html.page-dashboard .dash-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; max-width: 1200px; margin: 0 auto; } html.page-dashboard .profile-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: var(--shadow); } html.page-dashboard .avatar-circle { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-family: var(--font-display); font-weight: 800; margin: 0 auto 15px; border: 4px solid var(--bg2); } html.page-dashboard .profile-meta-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink2); margin-bottom: 12px; text-align: left; border-bottom: 1px dashed var(--border); padding-bottom: 8px; } html.page-dashboard .profile-meta-item:last-child { border: none; margin-bottom: 0; } html.page-dashboard .enrolled-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; display: flex; gap: 20px; align-items: center; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } html.page-dashboard .enrolled-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } html.page-dashboard .course-thumb-box { width: 70px; height: 70px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; overflow: hidden; border: 1px solid var(--border); } html.page-dashboard .course-thumb-box img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { html.page-dashboard .dash-grid { grid-template-columns: 1fr; gap: 30px; } } /* ========================================================================== CHECKOUT — was inline in checkout.php Standalone page; restyles body. ========================================================================== */ html.page-checkout body { font-family: var(--font-sans); background: #f5f3ee; padding:20px; } html.page-checkout .checkout-container { max-width: 1000px; margin: auto; display: flex; gap: 20px; flex-wrap: wrap; } html.page-checkout .box { background: #fff; padding: 30px; border-radius: 10px; flex: 1 1 320px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);} html.page-checkout input { width: 95%; padding: 10px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #ccc;} html.page-checkout .btn-pay { background: #004c8f; color: white; padding: 15px; border: none; width: 100%; border-radius: 5px; cursor: pointer; font-size: 1rem;} html.page-checkout .line { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eee; font-size:.92rem;} html.page-checkout .total { display:flex; justify-content:space-between; padding-top:14px; font-weight:700; font-size:1.1rem;} /* ========================================================================== PAYMENT SUCCESS — was inline in payment-success.php Standalone page; restyles body. ========================================================================== */ html.page-payment-success body { font-family: var(--font-sans); background-color: #f5f3ee; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } html.page-payment-success .success-box { background: white; padding: 50px 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); text-align: center; max-width: 500px; width: 100%; border: 1px solid #dddbd2; } html.page-payment-success .success-icon { font-size: 5rem; color: #16a34a; margin-bottom: 20px; line-height: 1; animation: pop 0.5s ease; } html.page-payment-success h1 { font-family: var(--font-sans); font-size: 2.2rem; color: #1a1a18; margin-bottom: 15px; } html.page-payment-success p { color: #8a8a82; margin-bottom: 30px; font-size: 1.05rem; } html.page-payment-success .order-id { background: #f5f3ee; padding: 12px 25px; border-radius: 30px; font-family: var(--font-mono); font-size: 1.1rem; color: #4a4a45; display: inline-block; margin-bottom: 35px; border: 1px dashed #ccc; } html.page-payment-success .btn-dash { background-color: #e85d26; color: white; padding: 14px 35px; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-block; font-size: 1.1rem; transition: all 0.2s; box-shadow: 0 4px 15px rgba(232, 93, 38, 0.2); } html.page-payment-success .btn-dash:hover { background-color: #cf4d1c; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 93, 38, 0.3); color: white; } @keyframes pop { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } /* ========================================================================== PAYMENT FAILED — was inline in payment-fail.php Standalone page; restyles body. ========================================================================== */ html.page-payment-fail body { font-family: var(--font-sans); background-color: #f5f3ee; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } html.page-payment-fail .fail-box { background: white; padding: 50px 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); text-align: center; max-width: 450px; width: 100%; border: 1px solid #dddbd2; } html.page-payment-fail .fail-icon { font-size: 5rem; color: #dc2626; margin-bottom: 20px; line-height: 1; } html.page-payment-fail h1 { font-family: var(--font-sans); font-size: 2rem; color: #1a1a18; margin-bottom: 15px; } html.page-payment-fail p { color: #8a8a82; margin-bottom: 30px; font-size: 1rem; } html.page-payment-fail .btn-retry { background-color: #1a1a18; color: white; padding: 12px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-block; font-size: 1rem; transition: background 0.2s; width: 100%; } html.page-payment-fail .btn-retry:hover { background-color: #4a4a45; color: white; } /* ========================================================================== FOOTER — GLOBAL, KEEP LAST — was inline in footer.php Deliberately NOT scoped: the footer is shared chrome on every page, and this block was the last style block in the document. Every rule is !important and overrides the footer styling above, so it must stay last. ========================================================================== */ /* ── ABSOLUTE EDGE-TO-EDGE & ZERO BOTTOM MARGIN FOOTER ── */ html { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; background: #1c1c1a !important; background-color: #1c1c1a !important; } body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; overflow-x: hidden !important; background: #1c1c1a !important; background-color: #1c1c1a !important; } footer { background: #1c1c1a !important; color: #ffffff !important; padding: 60px 5% 40px !important; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: auto !important; margin-bottom: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1350px; margin: 0 auto 40px; } .footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-top: 14px; font-family: var(--font-sans, sans-serif); font-weight: 300; line-height: 1.7; } .footer-col h4 { font-family: var(--font-serif, Georgia, serif); font-size: 1rem; font-weight: 700; margin-bottom: 18px; color: #ffffff; } .footer-col a { display: block; color: rgba(255,255,255,0.65); text-decoration: none; margin-bottom: 10px; font-size: 0.88rem; font-family: var(--font-sans, sans-serif); font-weight: 400; transition: color 0.2s; } .footer-col a:hover { color: var(--accent2, #e86a35); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; padding-bottom: 5px; text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); font-family: var(--font-sans, sans-serif); max-width: 1350px; margin: 0 auto; } @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== SITE HEADER — DEMO BUTTON (global: header.php renders on every page) -------------------------------------------------------------------------- Deliberately NOT scoped to a page class. Unlike the sections above, which came from one page's inline