/* ============================================================ CareerShift IT Academy — Design System Signature: terminal/build-pipeline motif grounded in QA & dev ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* Color tokens */ --ink: #0B1320; --ink-soft: #121B2E; --ink-line: #243450; --paper: #F7F5EF; --paper-soft: #FFFFFF; --text: #0B1320; --slate: #5C6B82; --line: #E4E1D8; --teal: #00C2A8; --teal-dark: #00A892; --amber: #F2A93B; --amber-dark: #D98F1F; --violet: #8B5CF6; --violet-soft: #A78BFA; --danger: #E5484D; /* Type */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Layout */ --container: 1140px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-card: 0 8px 30px rgba(11, 19, 32, 0.07); --shadow-pop: 0 16px 50px rgba(11, 19, 32, 0.18); } /* ---------- Dark theme override (toggled via [data-theme="dark"] on ) ---------- */ [data-theme="dark"] { --paper: #0E1422; --paper-soft: #16203A; --text: #EDEFF4; --slate: #9AA7BE; --line: #29395A; --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-pop: 0 16px 50px rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { /* overflow-x: hidden here would silently break position:sticky on every descendant, including .site-header — hidden/auto/scroll on ANY axis removes an element from the normal viewport-relative sticky context. `clip` prevents the same horizontal-scroll bleed without that side effect. This is what was actually causing the header to scroll away instead of staying fixed. */ overflow-x: clip; max-width: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.01em; } p { margin: 0 0 1em; color: var(--slate); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1560px; margin: 0 auto; padding: 0 32px; } .section { padding: 38px 0; } .section-tight { padding: 16px 0; } .section-reduced-top { padding-top: 18px; } @media (max-width: 768px) { .section { padding: 30px 0; } .section-tight { padding: 14px 0; } } .eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--teal-dark); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; } .eyebrow::before { content: '$'; opacity: .6; } .section-head { max-width: 640px; margin: 0 0 24px; } .section-head h2 { font-size: clamp(28px, 4vw, 38px); } .section-head.center { margin-inline: auto; text-align: center; } /* These two specific headings ("Four tracks. One destination..." and "How a mentorship engagement runs") should never wrap onto a second line — wider max-width and a font size that shrinks a bit more aggressively on narrow screens instead of breaking mid-phrase. */ .section-head-nowrap { max-width: 900px; } .section-head-nowrap h2 { white-space: nowrap; font-size: clamp(18px, 3.6vw, 38px); } @media (max-width: 480px) { .section-head-nowrap h2 { font-size: clamp(15px, 4.6vw, 22px); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-amber { background: var(--amber); color: var(--ink); } .btn-amber:hover { background: var(--amber-dark); box-shadow: var(--shadow-card); } .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; } .btn-outline:hover { background: rgba(255,255,255,0.08); } /* Theme-aware outline variant for buttons sitting on card backgrounds (e.g. the "Get it for Free" button on product cards) — .btn-outline's fixed white text/border is meant for dark hero/banner backgrounds and is invisible on a light card. This uses var(--text)/var(--line), which already adapt correctly between light and dark themes. */ .btn-outline-card { border-color: var(--line); color: var(--text); } .btn-outline-card:hover { background: rgba(128,128,128,0.12); } .btn-outline-dark { border-color: var(--ink-line); color: var(--ink); } .btn-outline-dark:hover { background: rgba(11,19,32,0.04); } .btn-teal { background: var(--teal); color: var(--ink); } .btn-teal:hover { background: var(--teal-dark); } .btn-block { width: 100%; } .btn-sm { padding: 10px 18px; font-size: 13px; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 250; background: rgba(11,19,32,0.97); border-bottom: 1px solid rgba(255,255,255,0.06); transition: box-shadow .25s ease; } .site-header.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .site-header .container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: 76px; gap: 10px; transition: height .25s ease; } .site-header.scrolled .container { height: 54px; } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo-img { height: 48px; width: auto; display: block; transition: height .25s ease; } .site-header.scrolled .logo-img { height: 34px; } .main-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; min-width: 0; overflow: hidden; } .main-nav a { color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 500; transition: color .15s; white-space: nowrap; } .main-nav a:hover { color: #fff; } .main-nav a.nav-highlight { color: var(--violet-soft); font-weight: 700; animation: nav-highlight-glow 2.4s ease-in-out infinite; } .main-nav a.nav-highlight:hover { color: #fff; } @keyframes nav-highlight-glow { 0%, 100% { text-shadow: 0 0 0 rgba(167,139,250,0); } 50% { text-shadow: 0 0 10px rgba(167,139,250,0.85), 0 0 18px rgba(167,139,250,0.35); } } /* My Journey / My Account already live in header-actions next to the profile icon on desktop — these duplicate entries only appear once the nav collapses into the mobile hamburger menu (see the 920px breakpoint below), so they aren't lost on smaller screens. */ .nav-mobile-only { display: none; } .header-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; flex-shrink: 0; } /* Registration ID badge — pinned as the rightmost item in the header bar (i.e. the top-right end of the screen), wrapped across two lines ("REG ID :" then the ID itself) and styled with a solid, high-contrast background rather than the old transparent gradient text, so it stays clearly legible instead of blending into the dark header. Visible on every screen size — only shrinks slightly on mobile instead of hiding, since the registration ID should always be findable. */ .header-reg-id-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; text-align: center; white-space: nowrap; font-family: var(--font-mono); font-weight: 800; background: var(--teal); color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 4px 10px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,194,168,0.35); } .header-reg-id-badge .header-reg-id-label { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; color: rgba(255,255,255,0.85); } .header-reg-id-badge .header-reg-id-value { font-size: 13px; font-weight: 800; color: #fff; } @media (max-width: 920px) { .header-reg-id-badge { padding: 3px 7px; } .header-reg-id-badge .header-reg-id-label { font-size: 8px; } .header-reg-id-badge .header-reg-id-value { font-size: 11px; } } /* ---- Notification bell ---- */ .notif-bell-btn { background: none; border: none; font-size: 18px; cursor: pointer; position: relative; padding: 4px 6px; line-height: 1; } .notif-bell-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; background: #E5484D; border-radius: 50%; border: 2px solid var(--ink); } .notif-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 336px; max-height: 440px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; z-index: 600; box-shadow: 0 20px 50px rgba(0,0,0,0.18); } .notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--paper-soft, #fafaf7); } .notif-dropdown-title { font-size: 13.5px; font-weight: 800; color: var(--ink); } .notif-clear-all-btn { background: #fff; border: 1px solid var(--line); color: var(--teal-dark); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 999px; transition: background .15s ease, border-color .15s ease; } .notif-clear-all-btn:hover:not(:disabled) { background: rgba(0,194,168,0.08); border-color: var(--teal); } .notif-clear-all-btn:disabled { color: var(--slate); opacity: 0.5; cursor: default; } .notif-list { overflow-y: auto; } .notif-empty { padding: 34px 20px; text-align: center; color: var(--slate); font-size: 13px; margin: 0; } .notif-empty-icon { font-size: 26px; margin-bottom: 8px; } .notif-empty p { margin: 0 0 3px; font-weight: 700; color: var(--ink); font-size: 13.5px; } .notif-empty .muted { font-size: 12px; } .notif-item { padding: 14px 16px; border-bottom: 1px solid var(--line); position: relative; } .notif-item:last-child { border-bottom: none; } .notif-item.is-unread { background: rgba(0,194,168,0.06); } .notif-item-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; padding-right: 20px; } .notif-item-body { font-size: 12.5px; color: var(--slate); line-height: 1.5; padding-right: 20px; } .notif-action-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--teal-dark); font-weight: 700; } .notif-dismiss-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 16px; cursor: pointer; color: var(--slate); line-height: 1; } .notif-dismiss-btn:hover { color: var(--danger, #E5484D); } .notif-toast { position: fixed; bottom: 24px; right: 24px; z-index: 5000; max-width: 320px; background: var(--ink); color: #fff; padding: 16px 20px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; border-left: 4px solid var(--teal); } .notif-toast.show { opacity: 1; transform: translateY(0); } .notif-toast-title { font-size: 13.5px; font-weight: 800; margin-bottom: 3px; } .notif-toast-body { font-size: 12.5px; color: rgba(255,255,255,0.7); } .header-journey-link { color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--violet-soft), var(--teal)); background-size: 200% 100%; animation: journey-link-gradient 4s ease infinite, journey-link-pulse 2.4s ease-in-out infinite; transition: transform .15s ease; } .header-journey-link:hover { color: var(--ink); transform: translateY(-1px) scale(1.04); } @keyframes journey-link-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes journey-link-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,169,59,0.45); } 50% { box-shadow: 0 0 0 6px rgba(242,169,59,0); } } @media (max-width: 920px) { .header-journey-link { display: none; } } /* falls back into the mobile nav menu instead */ .nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; line-height: 1; padding: 4px 6px; } .nav-toggle.is-close { font-size: 30px; font-weight: 300; } .theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; color: #fff; font-size: 15px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--teal); } .user-pill-wrap { position: relative; display: none; } .user-pill-wrap.show { display: block; } #userPill { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; font-family: var(--font-mono); white-space: nowrap; background: none; border: none; padding: 0; cursor: pointer; } .user-pill-chevron { transition: transform .15s ease; opacity: .7; } #userPill[aria-expanded="true"] .user-pill-chevron { transform: rotate(180deg); } #loginNavBtn.hide { display:none; } .user-dropdown { display: none; position: absolute; top: calc(100% + 12px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); min-width: 170px; overflow: hidden; z-index: 300; } .user-dropdown.show { display: block; } .user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 11px 16px; font-size: 13.5px; color: var(--ink); text-decoration: none; cursor: pointer; font-family: var(--font-body); } .user-dropdown a:hover, .user-dropdown button:hover { background: var(--paper-soft); } .user-dropdown button#logoutBtnHeader { border-top: 1px solid var(--line); color: var(--danger); } @media (max-width: 920px) { .main-nav { position: fixed; inset: 0; z-index: 500; background: var(--ink); flex-direction: column; align-items: stretch; padding: 96px 24px 30px; gap: 6px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; } .main-nav.open { transform: translateX(0); } .main-nav a { font-size: 18px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-mobile-only { display: block; } .nav-toggle { display: block; } .header-actions { position: relative; z-index: 600; } .header-actions .btn-amber { padding: 10px 16px; font-size: 13.5px; } #userPill .user-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; } /* Belt-and-suspenders: an explicit, unambiguously-high z-index directly on the toggle button itself, on top of .header-actions already having a higher z-index than the open menu overlay — so there's no dependency on stacking-context subtleties for this to stay clickable and visible above the open mobile menu. */ #navToggle { position: relative; z-index: 700; } /* When the full-screen menu is open, pin the toggle/close button to a fixed spot on the viewport instead of leaving it in normal flow inside the (position:sticky) header. Some mobile browsers mis-place position:fixed descendants of a sticky ancestor once the page has been scrolled, which was making the × close button disappear when the menu was opened mid-scroll instead of from the very top. */ body.nav-open #navToggle { position: fixed; top: 18px; right: 18px; z-index: 800; background: var(--ink); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } } @media (max-width: 360px) { .header-actions { gap: 6px; } .user-pill-wrap { display: none !important; } } /* ============================================================ HERO + TERMINAL ============================================================ */ .hero { background: #F7F5EF; color: #0B1320; padding: 0 0 34px; overflow: hidden; position: relative; } .hero-container-full { display: block; position: relative; z-index: 1; padding-top: 28px; } /* Still used by the .page-banner eyebrow on every other page (account, products, book-appointment, my-journey, all 4 track pages) — only removed from the homepage hero's own HTML, not from here. */ .hero-eyebrow { color: var(--teal); } .hero-eyebrow::before { color: var(--teal); } /* Not-a-course strip — a slow, continuously moving gradient sweep across the background (brand teal → violet → amber → teal) gives it life without being distracting, plus the existing pulsing live dot and a subtle shimmer on the key phrase. */ .not-a-course-strip { position: relative; z-index: 1; background: linear-gradient(270deg, #0B1320, #0d2a26, #1a1040, #2a1f0a, #0B1320); background-size: 400% 400%; animation: noc-gradient-flow 12s ease infinite; padding: 10px 24px; overflow: hidden; } @keyframes noc-gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .not-a-course-strip-inner { display: flex; align-items: flex-start; gap: 10px; max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; } .noc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; margin-top: 5px; animation: noc-pulse 1.6s ease-in-out infinite; } @keyframes noc-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(242,169,59,0.55); } 50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(242,169,59,0); } } .noc-text { font-size: 14px; color: #FFE3B0; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; } .noc-text strong { color: var(--amber); font-weight: 800; background: linear-gradient(90deg, var(--amber) 0%, #fff 50%, var(--amber) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: noc-shimmer 3.5s linear infinite; } @keyframes noc-shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } @media (prefers-reduced-motion: reduce) { .not-a-course-strip { animation: none; } .noc-live-dot { animation: none; } .noc-text strong { animation: none; -webkit-text-fill-color: currentColor; } } @media (max-width: 768px) { .not-a-course-strip { padding: 8px 16px; } .noc-text { font-size: 13px; } } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: stretch; } .hero-text-col { display: flex; flex-direction: column; justify-content: flex-start; } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(34px, 5vw, 54px); color: var(--ink); } .hero h1 .hl { color: var(--teal-dark); } /* Hero H1 slideshow — a genuine left-to-right sliding animation. Every slide stays position:absolute at all times (this is what makes the transform-based slide-in/slide-out predictable — mixing in position:relative for the active one, like the earlier crossfade version did, doesn't work for this technique). The container has a real FIXED height (em-based, so it scales with the responsive font-size) with overflow hidden, so nothing below it on the page ever shifts regardless of slide content length, and off-screen slides stay invisible without needing opacity tricks. ============================================================ */ .hero-slideshow-outer { position: relative; padding: 14px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(0,194,168,0.08), rgba(139,92,246,0.08), rgba(242,169,59,0.08)); border: 1.5px solid rgba(0,194,168,0.35); box-shadow: 0 0 0 4px rgba(0,194,168,0.06); margin: 0 -20px 4px; } .hero h1.hero-slideshow { position: relative; overflow: hidden; height: 6.4em; line-height: 1.32; font-size: clamp(24px, 3.6vw, 36px); } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; transform: translateX(-100%); transition: transform .4s ease; display: flex; align-items: center; height: 100%; } .hero-slide.is-active { transform: translateX(0); } .hero-slide.is-prev { transform: translateX(100%); } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } .hero-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; padding: 0; } .hero-slide-arrow:hover { background: var(--paper-soft); } .hero-slide-arrow-left { left: -16px; } .hero-slide-arrow-right { right: -2px; } @media (max-width: 480px) { .hero-slideshow-outer { padding: 12px 30px; margin: 0 -6px 4px; } .hero-slide-arrow-left { left: 4px; } .hero-slide-arrow-right { right: 4px; } .hero-slide-arrow { width: 27px; height: 27px; font-size: 15px; } } .hero-ai-badge { display: block; background: rgba(139,92,246,0.08); border-left: 3px solid var(--violet); color: rgba(11,19,32,0.85); font-size: 15.5px; line-height: 1.6; padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 34px 0 12px; } .hero-ai-badge strong { color: var(--violet); } .hero p.lead { font-size: 16.5px; line-height: 1.6; color: var(--slate); margin-bottom: 0; } .hero-ctas { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; } .hero-visual-col { display: flex; flex-direction: column; gap: 20px; } .team-banner { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); width: 100%; } .team-banner img { width: 100%; height: 260px; object-fit: cover; object-position: center 78%; display: block; } .team-banner-caption { display: block; background: var(--ink); color: rgba(255,255,255,0.8); font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 10px 12px; } /* Stats presented as distinct bordered cards, spanning the full width below the two-column split above — reads as "attractive UI elements" rather than plain inline text. */ .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hero-trust-item { font-family: var(--font-mono); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; } .hero-trust-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); } .hero-trust-item strong { display: block; font-size: 22px; color: var(--ink); font-family: var(--font-display); white-space: nowrap; } .hero-trust-item span { font-size: 12px; color: var(--slate); line-height: 1.45; display: block; margin-top: 4px; } /* Third stat spans both columns on its own row, and reads slightly larger/more prominent — "expanded" per request, not just wider. */ .hero-trust-item:nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 26px; } .hero-trust-item:nth-child(3) strong { font-size: 26px; } .hero-trust-item:nth-child(3) span { margin-top: 0; font-size: 13px; } @media (max-width: 560px) { .hero-trust { grid-template-columns: 1fr; } .hero-trust-item:nth-child(3) { flex-direction: column; align-items: flex-start; gap: 4px; } } .terminal { background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden; } .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--ink-line); } .terminal-dot { width: 11px; height: 11px; border-radius: 50%; } .terminal-dot.red { background: #FF5F57; } .terminal-dot.yellow { background: #FEBC2E; } .terminal-dot.green { background: #28C840; } .terminal-title { margin-left: 8px; font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.45); } .terminal-body { font-family: var(--font-mono); font-size: 13.5px; padding: 22px 20px; min-height: 290px; color: #C7D2E3; } .terminal-body .line { margin-bottom: 9px; white-space: pre-wrap; word-break: break-word; } .terminal-body .prompt { color: var(--teal); } .terminal-body .ok { color: var(--teal); } .crystal-panel { background: #fff; border: 1px solid var(--ink-line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden; } .crystal-panel canvas.crystal-canvas { display: block; width: 100%; height: 290px; } .crystal-panel-caption { display: block; background: var(--ink-soft); color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 10px 12px; } .terminal-body .muted-line { color: #5C6B82; } .terminal-body .status-line { color: var(--amber); font-weight: 600; } .cursor { display: inline-block; width: 7px; height: 14px; background: var(--teal); vertical-align: middle; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 920px) { .hero .container { grid-template-columns: 1fr; } .terminal-body { min-height: 230px; } } /* ============================================================ AUDIENCE / TRACK CARDS ============================================================ */ .card-grid { display: grid; gap: 24px; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cols-3, .cols-4 { grid-template-columns: 1fr; } } .audience-card { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 30px 26px; transition: transform .2s, box-shadow .2s; } .audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .audience-card .icon-chip { width: 46px; height: 46px; border-radius: 12px; background: rgba(0,194,168,0.12); display:flex; align-items:center; justify-content:center; margin-bottom: 18px; font-size: 22px; } .audience-card h3 { font-size: 18px; } .audience-card p { font-size: 14.5px; margin-bottom: 0; } /* ---------- Track cards (services) ---------- */ .track-card { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 26px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; } .track-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 20px 45px rgba(0,194,168,0.25), 0 4px 14px rgba(0,0,0,0.2); } .track-card .track-cta-link { margin-top: auto; } .track-card::after { content:''; position:absolute; inset:auto -40px -60px auto; width:180px; height:180px; background: radial-gradient(circle, rgba(0,194,168,.25), transparent 70%); pointer-events: none; } .track-card .track-tag { font-family: var(--font-mono); font-size: 11px; color: var(--teal); border: 1px solid rgba(0,194,168,.4); border-radius: 999px; padding: 3px 10px; display: inline-block; margin-bottom: 12px; } .track-card .track-tag-flagship { color: var(--violet-soft); border-color: rgba(139,92,246,.45); background: rgba(139,92,246,0.1); } .track-card h3 { font-size: 19px; color: #fff; margin-bottom: 4px; } .track-card p { color: rgba(255,255,255,0.65); font-size: 13.5px; line-height: 1.5; } .track-card ul { margin: 12px 0 16px; display: flex; flex-direction: column; gap: 6px; } .track-card ul li { font-size: 13px; color: rgba(255,255,255,0.82); display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } .track-card ul li::before { content: '✓'; color: var(--teal); font-weight: 700; } .track-card .track-price { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 800; color: var(--amber); margin-bottom: 12px; } .track-card .track-price .track-price-loading { font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500; } /* ============================================================ AI ENGINEERING — flagship highlighted banner ============================================================ */ .ai-banner { position: relative; background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(0,194,168,0.10)), var(--ink); border: 1px solid rgba(139,92,246,0.35); border-radius: var(--radius-lg); padding: 26px 40px; overflow: hidden; animation: ai-glow 4s ease-in-out infinite; } @keyframes ai-glow { 0%, 100% { box-shadow: 0 0 0 rgba(139,92,246,0); } 50% { box-shadow: 0 0 60px rgba(139,92,246,0.25); } } .ai-banner::after { content: ''; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%); pointer-events: none; } .ai-banner-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.45); color: var(--violet-soft); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .ai-banner h2 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); max-width: 720px; } .ai-banner h2 .hl-violet { color: var(--violet-soft); } .ai-banner > p.ai-banner-sub { color: rgba(255,255,255,0.72); font-size: 15px; max-width: 900px; margin-bottom: 20px; line-height: 1.5; } .ai-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; position: relative; z-index: 1; } .ai-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; } .ai-banner-ctas { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: 20px; } .ai-tools-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; } .ai-tools-row span.ai-tools-label { color: rgba(255,255,255,0.5); font-family: var(--font-mono); font-size: 12px; } .tool-badge { display: inline-block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); padding: 5px 12px; border-radius: 7px; } .ai-trademark-note { color: rgba(255,255,255,0.35); font-size: 11.5px; margin-top: 16px; position: relative; z-index: 1; } @media (max-width: 768px) { .ai-banner { padding: 26px 22px; } } /* ============================================================ ROADMAP (numbered — genuine sequence) ============================================================ */ .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; position: relative; } /* Used by the track-*.html detail pages' phase roadmaps — 2 per row (reduces overall page height vs. 1-per-row), collapsing to a single column on narrow screens. */ .roadmap-2col { grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 640px) { .roadmap-2col { grid-template-columns: 1fr; } } @media (max-width: 920px) { .roadmap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .roadmap { grid-template-columns: 1fr; } } /* Animated "flow" connector running behind the step numbers, showing this as one continuous sequence rather than 4 unrelated cards. Hidden once the grid drops to 2/1 columns (a single top-line stops making visual sense once steps wrap to multiple rows). */ .roadmap-connector { position: absolute; top: 45px; left: 6%; right: 6%; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; z-index: 0; } .roadmap-connector-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), var(--violet-soft), var(--amber), var(--teal)); background-size: 300% 100%; animation: roadmap-flow 7s linear infinite; } @keyframes roadmap-flow { 0% { background-position: 0% 0; } 100% { background-position: -300% 0; } } @media (max-width: 920px) { .roadmap-connector { display: none; } } .roadmap-step { position: relative; z-index: 1; padding: 28px 22px; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md); } /* Default .step-num: a text-label pill (e.g. "PHASE 01 · ~2 WEEKS"), used by the track-*.html detail pages' phase roadmaps. */ .roadmap-step .step-num { display: inline-block; width: auto; height: auto; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--teal-dark); border: 1px solid rgba(0,194,168,.4); padding: 4px 12px; margin-bottom: 14px; box-shadow: none; background: transparent; } /* Homepage-only override: the "How a mentorship engagement runs" 4-step flow uses short single digits (1/2/3/4) sitting on the animated connector line, so THAT specific instance becomes a small circular badge instead — scoped to #roadmap so it never affects the track pages' longer "PHASE 0X · ~duration" text above, which would otherwise overlap and get clipped inside a fixed-size circle. */ #roadmap .roadmap-step .step-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--teal); border: none; font-size: 14px; font-weight: 700; padding: 0; box-shadow: 0 0 0 4px var(--paper-soft); } .roadmap-step h4 { font-size: 16.5px; margin-top: 0; } .roadmap-step p { font-size: 14px; margin-bottom: 12px; } .roadmap-points { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; } .roadmap-points li { font-size: 13px; color: var(--slate); display: flex; gap: 7px; align-items: flex-start; line-height: 1.4; } .roadmap-points li::before { content: '✓'; color: var(--teal-dark); font-weight: 700; flex-shrink: 0; } /* ============================================================ STORE / PRODUCTS ============================================================ */ .product-card { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; } .product-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); } .product-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ink), var(--ink-soft)); display:flex; align-items:center; justify-content:center; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } .product-thumb .thumb-fallback { font-family: var(--font-mono); color: var(--teal); font-size: 13px; text-align:center; padding: 0 20px; } .product-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } .product-cat { font-family: var(--font-mono); font-size: 11.5px; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .04em; } .product-body h3 { font-size: 16.5px; margin-bottom: 4px; } .product-body p { font-size: 13.5px; flex-grow: 1; } .product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .product-price { font-family: var(--font-display); font-weight: 700; font-size: 19px; } .booking-summary-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 18px; overflow: hidden; } .booking-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .booking-summary-row:last-child { border-bottom: none; } .booking-summary-label { font-size: 12.5px; color: var(--slate); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .booking-summary-value { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; } .booking-summary-price-row { padding-top: 13px; } .booking-summary-price { font-family: var(--font-display); font-size: 18px; color: var(--teal-dark); } /* ============================================================ BOOKING ============================================================ */ .duration-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 768px) { .duration-grid { grid-template-columns: repeat(2, 1fr); } } .duration-card { border: 2px solid var(--line); border-radius: var(--radius-md); padding: 11px 14px; text-align: center; cursor: pointer; background: var(--paper-soft); transition: border-color .15s, background .15s; } .duration-card.selected { border-color: var(--teal); background: rgba(0,194,168,0.06); } .duration-card .dur-mins { font-family: var(--font-display); font-weight: 700; font-size: 17px; } .duration-card .dur-price { font-family: var(--font-mono); color: var(--teal-dark); font-size: 12px; margin-top: 2px; } .booking-panel { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-card); } .calendar-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .day-pill { flex: 0 0 auto; min-width: 78px; border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; cursor: pointer; background: var(--paper-soft); scroll-snap-align: start; } .day-pill.selected { border-color: var(--teal); background: rgba(0,194,168,0.06); } .day-pill .d-name { font-size: 12px; color: var(--slate); display:block; } .day-pill .d-num { font-family: var(--font-display); font-weight: 700; font-size: 18px; display:block; margin-top: 2px; } .day-pill .d-month { font-size: 10px; color: var(--slate); text-transform: uppercase; letter-spacing: .4px; display: block; margin-top: 1px; } .slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; } @media (max-width: 640px) { .slot-grid { grid-template-columns: repeat(3, 1fr); } } .slot-btn { border: 1.5px solid var(--line); background: var(--paper-soft); border-radius: var(--radius-sm); padding: 10px 6px; font-family: var(--font-mono); font-size: 13.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; } .slot-btn.selected { border-color: var(--teal); background: var(--teal); color: var(--ink); font-weight: 600; } .slot-btn[disabled] { background: #E9E7E0; color: #9B9686; border-color: #E9E7E0; opacity: .85; cursor: not-allowed; } .slot-btn.booked .slot-time-text { text-decoration: line-through; } .slot-btn.booked .slot-booked-label { color: var(--danger); font-weight: 800; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; } [data-theme="dark"] .slot-btn[disabled] { background: #1C2538; color: #4A5A75; border-color: #1C2538; } /* ============================================================ FORMS ============================================================ */ .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .compact-form .form-field { margin-bottom: 11px; gap: 4px; } .compact-form .form-grid-2 { gap: 0 16px; } .auto-grow-textarea { resize: none; overflow: hidden; min-height: 44px; transition: height .08s ease; } .form-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 15px; padding: 13px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; color: var(--ink); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal); outline: none; } /* Eye-icon toggle to reveal/hide a password field's contents — wraps just the (not the label) so the icon can be positioned absolutely inside it, on the signup form, login popup, forgot-password flow, and My Account's change-password modal alike. */ .password-field-wrap { position: relative; display: flex; } .password-field-wrap input { flex: 1; padding-right: 42px !important; } .password-toggle-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 8px; color: var(--slate); display: flex; align-items: center; justify-content: center; } .password-toggle-btn:hover { color: var(--ink); } /* Slightly smaller text boxes for the signup form's First/Last Name and Location fields specifically (item 3) — other forms on the site keep the default size. */ #suFirstName, #suLastName, #suLocation { padding: 9px 12px; font-size: 14px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } } .form-note { font-size: 13px; color: var(--slate); } .form-error { color: var(--danger); font-size: 13.5px; margin-top: -6px; margin-bottom: 12px; display:none; } .admin-alert { padding: 14px 18px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; font-family: var(--font-mono); } .admin-alert-error { background: #FDEDED; color: #B3261E; border: 1px solid rgba(229,72,77,0.3); } .admin-alert-success { background: rgba(0,194,168,0.1); color: var(--teal-dark); border: 1px solid rgba(0,194,168,0.3); } .form-success-box { background: rgba(0,194,168,0.08); border: 1px solid rgba(0,194,168,0.35); border-radius: var(--radius-sm); padding: 16px; color: var(--teal-dark); font-weight: 600; display:none; } /* ============================================================ CONTACT / QUERY SECTION ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; } @media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } } .contact-quick { display: flex; flex-direction: column; gap: 16px; } .quick-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper-soft); } .quick-card .quick-icon { width: 46px; height: 46px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size: 22px; flex-shrink:0; } .quick-icon.wa { background: #dcf8e9; } .quick-icon.mail { background: #e6f0ff; } .quick-card h4 { margin: 0 0 2px; font-size: 15.5px; } .quick-card p { margin: 0; font-size: 13px; } .quick-card .btn { margin-left: auto; } .form-card { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); } /* ============================================================ FAQ ============================================================ */ .faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; } .faq-q { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; font-size: 16px; } .faq-q .faq-plus { font-family: var(--font-mono); font-size: 20px; color: var(--teal-dark); transition: transform .2s; } .faq-item.open .faq-plus { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .faq-item.open .faq-a { max-height: 300px; } .faq-a p { padding-top: 12px; font-size: 14.5px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--ink); color: rgba(255,255,255,0.6); padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-grid h5 { color: #fff; font-size: 13.5px; font-family: var(--font-mono); margin-bottom: 16px; letter-spacing: .03em; } .footer-grid a, .footer-grid li { font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,0.6); } .footer-grid a:hover { color: var(--teal); } .footer-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } /* ============================================================ FLOATING ACTION BUTTONS — Book a Session, WhatsApp, Quick Query Each is an icon circle with a small always-visible caption underneath, plus the existing hover tooltip. Deliberate visual hierarchy: Book (top, amber, pulsing — the primary CTA) > WhatsApp (green, pulsing, instantly recognizable) > Query (neutral outline — tertiary). ============================================================ */ .fab-stack { position: fixed; bottom: 24px; right: 10px; z-index: 200; display: flex; flex-direction: column; gap: 16px; align-items: center; } .fab-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; border: none; background: none; cursor: pointer; font-family: var(--font-body); padding: 0; } .fab-icon-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px; box-shadow: 0 8px 22px rgba(0,0,0,0.25); transition: transform .18s ease, box-shadow .18s ease; } .fab-item:hover .fab-icon-circle { transform: translateY(-2px) scale(1.05); } .fab-caption { font-size: 11px; font-weight: 700; color: var(--ink); background: #fff; padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow-card); white-space: nowrap; line-height: 1.5; } .fab-icon-book { background: linear-gradient(135deg, var(--amber), var(--amber-dark)); box-shadow: 0 8px 24px rgba(242,169,59,0.55); animation: pulse-book 2.4s infinite; } @keyframes pulse-book { 0%,100% { box-shadow: 0 8px 24px rgba(242,169,59,0.55); } 50% { box-shadow: 0 8px 32px rgba(242,169,59,0.85); } } .fab-icon-wa { background: #25D366; box-shadow: 0 8px 24px rgba(37,211,102,0.45); animation: pulse-wa 2.4s infinite; } @keyframes pulse-wa { 0%,100% { box-shadow: 0 8px 24px rgba(37,211,102,0.45); } 50% { box-shadow: 0 8px 30px rgba(37,211,102,0.7); } } .fab-icon-wa svg { width: 25px; height: 25px; } .fab-icon-query { background: #fff; border: 2px solid var(--ink-line); color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } .back-to-top { position: fixed; bottom: 24px; left: 24px; z-index: 200; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Tooltips for floating action buttons */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; right: 100%; margin-right: 12px; top: 50%; transform: translateY(-50%); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; font-family: var(--font-body); padding: 7px 12px; border-radius: 7px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; box-shadow: var(--shadow-card); } [data-tooltip]:hover::after { opacity: 1; visibility: visible; } @media (max-width: 640px) { [data-tooltip]::after { display: none; } /* tooltips are a hover convenience; not useful on touch */ } @media (max-width: 640px) { .fab-stack { bottom: 16px; right: 6px; gap: 10px; } .fab-icon-circle { width: 42px; height: 42px; font-size: 18px; } .fab-icon-wa svg { width: 21px; height: 21px; } .fab-caption { font-size: 9.5px; padding: 2px 7px; } .back-to-top { bottom: 16px; left: 16px; width: 42px; height: 42px; font-size: 17px; } } /* ============================================================ TOAST / TOP BANNER NOTIFICATIONS ============================================================ */ .toast-banner { position: fixed; top: 14px; left: 50%; z-index: 600; transform: translateX(-50%) translateY(-30px); background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .toast-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast-banner.error { background: var(--danger); } .toast-banner.success { background: var(--teal-dark); } .toast-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 16px; padding: 0 0 0 6px; flex-shrink: 0; } .welcome-toast { position: fixed; top: 18px; right: 18px; z-index: 4500; max-width: 320px; background: linear-gradient(120deg, var(--ink), #1a2740); color: #fff; padding: 16px 20px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease; border-left: 4px solid var(--teal); } .welcome-toast.show { opacity: 1; transform: translateX(0); } .welcome-toast-title { font-size: 14.5px; font-weight: 800; margin-bottom: 3px; } .welcome-toast-sub { font-size: 12.5px; color: rgba(255,255,255,0.75); } @media (max-width: 480px) { .welcome-toast { right: 10px; left: 10px; max-width: none; top: 10px; } } /* ============================================================ RESOURCES HIGHLIGHT + FREE/PAID PRODUCT EXTRAS ============================================================ */ .section-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--amber); color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; } .resource-highlight { border: 2px solid var(--amber); background: linear-gradient(135deg, rgba(242,169,59,0.07), transparent 60%); border-radius: var(--radius-lg); padding: 36px 28px; } .free-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(0,194,168,0.15); color: var(--teal-dark); padding: 3px 10px; border-radius: 999px; } .product-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn-icon-sm { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: var(--paper-soft); font-size: 15px; } .btn-icon-sm:hover { border-color: var(--teal); } /* ============================================================ MODAL (Login / Generic) ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(11,19,32,0.65); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.show { display: flex; } .modal-box { background: var(--paper-soft); border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 420px; position: relative; box-shadow: var(--shadow-pop); max-height: 90vh; overflow-y: auto; overflow-x: hidden; } .modal-box.modal-wide { max-width: 640px; } .modal-close { position: absolute; top: 18px; right: 18px; font-size: 22px; border: none; background: none; color: var(--slate); z-index: 5; } .modal-box h3 { font-size: 20px; } .modal-box p.modal-sub { font-size: 14px; margin-bottom: 22px; } #recaptcha-container { margin: 14px 0; } .otp-input { display: flex; gap: 8px; } .otp-input input { width: 44px; height: 52px; text-align: center; font-size: 20px; } .auth-mode-toggle { text-align: center; font-size: 13.5px; color: var(--slate); margin-top: 16px; } .auth-mode-toggle button { background: none; border: none; color: var(--teal-dark); font-weight: 700; cursor: pointer; padding: 0; font-size: 13.5px; } .auth-mode-toggle button:hover { text-decoration: underline; } .auth-warning { background: rgba(242,169,59,0.12); border: 1px solid rgba(242,169,59,0.4); color: var(--amber-dark); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; display: none; } .auth-warning.show { display: block; } .usertype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } @media (max-width: 480px) { .usertype-grid { grid-template-columns: 1fr; } } .usertype-card { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--paper-soft); } .usertype-card.selected { border-color: var(--teal); background: rgba(0,194,168,0.08); color: var(--teal-dark); } .conditional-fields { display: none; } .conditional-fields.show { display: block; } .profile-detail-grid.show { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; } @media (max-width: 640px) { .profile-detail-grid.show { grid-template-columns: 1fr; } } /* Profile icon + name in the header */ .profile-icon { width: 22px; height: 22px; flex-shrink: 0; } .profile-icon path { fill: #fff; } /* ============================================================ UTILITIES ============================================================ */ .text-center { text-align: center; } .mt-24 { margin-top: 24px; } .muted { color: var(--slate); } .hidden { display: none !important; } .otp-resend-row { margin-top: 12px; text-align: center; font-size: 13px; color: var(--slate); } .otp-resend-row #otpResendCountdown { color: var(--ink); font-variant-numeric: tabular-nums; } .unlock-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(11,19,32,0.72); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .unlock-overlay-box { background: #fff; border-radius: 16px; padding: 40px 44px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.35); max-width: 360px; } .unlock-overlay-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 18px 0 6px; } .unlock-overlay-sub { font-size: 13.5px; color: var(--slate); margin: 0; } .link-btn { background: none; border: none; padding: 0; color: var(--teal-dark); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; } .link-btn:hover { color: var(--violet); } .link-btn:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; } .email-verify-row { display: flex; gap: 8px; flex-wrap: wrap; } .email-verify-row input { flex: 1; min-width: 0; } .email-verify-row .btn-sm { flex-shrink: 0; white-space: nowrap; } .email-otp-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .email-otp-row input { flex: 1; min-width: 0; } .email-verified-badge { margin-top: 8px; color: var(--teal-dark); font-weight: 700; font-size: 13px; } .verified-badge-inline { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; background: rgba(0,194,168,0.12); color: var(--teal-dark); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; } .input-invalid { border-color: var(--danger) !important; background: rgba(229,72,77,0.04); } .doubt-popup-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .doubt-popup-contact-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--slate); margin: 6px 0 14px; font-family: var(--font-mono); } .doubt-popup-record-btns { display: flex; gap: 6px; } .doubt-record-icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .doubt-record-icon-btn:hover { background: rgba(0,194,168,0.12); border-color: var(--teal); } .doubt-record-status { display: flex; align-items: center; gap: 8px; background: rgba(229,72,77,0.08); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; color: var(--danger); font-weight: 600; } .doubt-record-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: doubt-record-blink 1s infinite; } @keyframes doubt-record-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .doubt-existing-recording { margin-bottom: 12px; } .doubt-popup-past-list { max-height: 220px; overflow-y: auto; margin-bottom: 6px; } .doubt-popup-past-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .doubt-popup-past-item.is-clarified { background: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.25); } .doubt-popup-past-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .doubt-status-pill { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; } .doubt-status-pill.is-pending { background: rgba(245,183,0,0.16); color: #92620a; } .doubt-status-pill.is-clarified { background: rgba(34,197,94,0.14); color: #0a7a3f; } .refer-friend-btn { margin-top: 8px; padding: 9px 14px; border-radius: 10px; border: none; cursor: pointer; background: linear-gradient(90deg, var(--amber), var(--violet-soft)); background-size: 200% 100%; color: var(--ink); font-weight: 700; font-size: 12.5px; text-align: center; animation: refer-btn-pulse 2s ease-in-out infinite, refer-btn-gradient 3s ease infinite; } @keyframes refer-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,169,59,0.5); } 50% { box-shadow: 0 0 0 8px rgba(242,169,59,0); } } @keyframes refer-btn-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display:inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .badge { display:inline-block; font-family: var(--font-mono); font-size: 11px; padding: 3px 10px; border-radius: 999px; background: rgba(0,194,168,0.12); color: var(--teal-dark); font-weight:600; } .skeleton { background: linear-gradient(90deg, #ECE9E0 25%, #F5F3EC 37%, #ECE9E0 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Page header banner for inner pages (store/booking) */ .page-banner { background: var(--ink); color: #fff; padding: 26px 0 30px; position: relative; overflow: hidden; } .page-banner .container { position: relative; z-index: 1; } .page-banner h1 { color: #fff; font-size: clamp(24px,3.4vw,32px); margin: 6px 0 8px; } .page-banner p { color: rgba(255,255,255,0.65); max-width: 560px; font-size: 14.5px; margin-bottom: 0; } /* Used only by the track-*.html detail pages — the enroll button needs a touch more room than the other pages' banners, but still much smaller than the pre-reduction default. */ .page-banner-compact { padding: 22px 0 26px; } .page-banner-compact h1 { font-size: clamp(20px, 2.8vw, 26px); margin: 6px 0 6px; } .page-banner-compact p { font-size: 13.5px; margin-bottom: 14px; } /* my-journey.html dropped its eyebrow line (item 8) and wants a shorter info bar overall — scoped so other pages using .page-banner-compact (which still have their eyebrow) are unaffected. */ .journey-banner-slim { padding: 12px 0 14px; } .journey-banner-slim h1 { margin: 0 0 4px; font-size: clamp(18px, 2.4vw, 24px); } .journey-banner-slim p { margin-bottom: 0; } .journey-banner-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .journey-banner-actions-fab { display: flex; align-items: center; gap: 10px; } .journey-fab-item .fab-icon-circle { width: 34px; height: 34px; font-size: 15px; } .journey-fab-item .fab-caption { display: none; } .journey-last-login { font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; } .mentor-chat-persistent-icon { position: relative; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.14); color: #fff; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .mentor-chat-persistent-icon:hover { background: rgba(255,255,255,0.24); } .mentor-chat-persistent-icon.is-online { background: rgba(52,211,153,0.22); } .mentor-chat-persistent-icon.is-offline { background: rgba(229,72,77,0.18); } .mentor-persistent-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; border: 2px solid var(--ink); } .mentor-persistent-dot.online { background: #34d399; animation: mentor-dot-blink 1.1s infinite; } .mentor-persistent-dot.offline { background: #E5484D; } /* ---- Live mentor chat (My Journey page only) ---- */ .mentor-available-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; } .mentor-available-badge.is-online { background: rgba(16,185,129,0.16); color: #34d399; border: 1px solid rgba(52,211,153,0.4); } .mentor-available-badge.is-offline { background: rgba(229,72,77,0.14); color: #ff8087; border: 1px solid rgba(229,72,77,0.4); } .mentor-available-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: mentor-dot-blink 1.1s infinite; } .mentor-available-badge.is-offline .mentor-available-dot { background: #E5484D; animation: none; } @keyframes mentor-dot-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); } 50% { opacity: .5; box-shadow: 0 0 0 5px rgba(52,211,153,0); } } .mentor-chat-fab { position: fixed; right: 20px; bottom: 24px; z-index: 500; max-width: 90px; background: var(--ink); color: #fff; border: none; border-radius: 16px; padding: 8px 10px; font-size: 10.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.3); line-height: 1.25; white-space: normal; text-align: center; } .mentor-chat-fab:hover { background: #1a2740; } .mentor-fab-wave { animation: mentor-fab-wave-move 2.2s ease-in-out infinite; } @keyframes mentor-fab-wave-move { 0%, 100% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-4px) rotate(-4deg); } 40% { transform: translateY(0) rotate(3deg); } 60% { transform: translateY(-3px) rotate(-2deg); } 80% { transform: translateY(0) rotate(1deg); } } .mentor-chat-widget { position: fixed; right: 20px; bottom: 90px; z-index: 900; width: 360px; max-width: calc(100vw - 40px); height: 440px; max-height: 70vh; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; } .mentor-chat-widget-head { background: var(--ink); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 700; } .mentor-chat-widget-head button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; } .mentor-chat-widget-status { padding: 6px 16px; font-size: 11px; color: var(--slate); background: var(--paper); } .mentor-chat-widget-status.is-online { color: #0a8a3f; } .mentor-chat-widget-status.is-offline { color: var(--danger); font-weight: 600; } .mentor-chat-widget-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .mentor-chat-bubble-row { display: flex; } .mentor-chat-bubble-row.from-admin { justify-content: flex-start; } .mentor-chat-bubble-row.from-user { justify-content: flex-end; } .mentor-chat-bubble { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13px; background: var(--paper); } .mentor-chat-bubble-row.from-user .mentor-chat-bubble { background: var(--teal); color: #fff; } .mentor-chat-widget-reply { display: flex; gap: 5px; padding: 10px 10px; border-top: 1px solid var(--line); align-items: center; } .mentor-chat-attach-btn { flex-shrink: 0; } .mentor-chat-attach-btn { background: none; border: none; font-size: 15px; cursor: pointer; padding: 4px; flex-shrink: 0; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .mentor-chat-attach-btn:hover { background: var(--paper); } .mentor-chat-record-status, .chat-panel-record-status { display: flex; align-items: center; gap: 8px; background: rgba(229,72,77,0.08); border-radius: 8px; padding: 6px 12px; font-size: 12px; margin: 0 12px 8px; color: var(--danger); font-weight: 600; } .chat-attach-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; border-radius: 50%; } .chat-attach-btn:hover { background: var(--paper); } .mentor-chat-widget-reply input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; } .mentor-chat-widget-reply button { background: var(--teal); color: #fff; border: none; width: 32px; height: 32px; min-width: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; flex-shrink: 0; } @media (max-width: 480px) { .mentor-chat-widget { right: 10px; left: 10px; width: auto; bottom: 80px; } } .journey-banner-actions { display: flex; gap: 8px; } .journey-banner-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 15px; cursor: pointer; transition: background .15s ease; text-decoration: none; } .journey-banner-icon-btn:hover { background: rgba(255,255,255,0.22); } .hide-global-fab .fab-stack { display: none; } /* ============================================================ PARTICLE NETWORK BACKGROUND CANVAS (hero + page banners) ============================================================ */ .particle-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ============================================================ MY JOURNEY — progress bar, stage rail, material list, viewer ============================================================ */ .journey-summary-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding: 10px 14px; background: var(--paper); border-radius: 10px; border: 1px solid var(--line); } .journey-progress-bar-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .journey-info-tiles { display: flex; flex-wrap: wrap; gap: 6px; } .journey-tile { display: flex; flex-direction: row; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; line-height: 1.3; } .journey-tile-label { color: var(--slate); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; } .journey-tile-value { color: var(--ink); font-weight: 700; } .journey-tile-done { background: rgba(0,168,146,0.08); border-color: rgba(0,168,146,0.3); } .journey-tile-used { background: rgba(229,72,77,0.07); border-color: rgba(229,72,77,0.28); } .journey-tile-used .journey-tile-value { color: var(--danger); } .journey-tile-available { background: rgba(0,168,146,0.08); border-color: rgba(0,168,146,0.3); } .journey-tile-available .journey-tile-value { color: #0a8a3f; } .journey-resume-loading-screen { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(249,250,251,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .journey-resume-loading-screen.show { opacity: 1; pointer-events: auto; } .journey-resume-loading-box { background: #fff; border-radius: 18px; padding: 30px 40px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.18); display: flex; flex-direction: column; align-items: center; gap: 12px; } .journey-resume-loading-box p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); } .journey-progress-bar { width: 130px; height: 17px; border-radius: 999px; background: var(--line); overflow: hidden; } .journey-progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--violet-soft)); border-radius: 999px; transition: width .3s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; font-weight: 800; color: #fff; white-space: nowrap; min-width: 26px; box-sizing: border-box; } /* Always a single scrollable row (item 2.6) — with many stages, this scrolls horizontally instead of wrapping to multiple lines, and the current stage is scrolled into view automatically on load. */ .journey-stage-rail { display: flex; gap: 18px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 18px; position: relative; padding: 4px 4px 10px; scroll-behavior: smooth; } .journey-stage-timestamps { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 16px; padding: 10px 14px; background: rgba(0,194,168,0.06); border-left: 3px solid var(--teal-dark); border-radius: 0 8px 8px 0; font-family: var(--font-mono); font-size: 12px; color: var(--slate); } .journey-stage-pill { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); transition: border-color .15s ease, background .15s ease; position: relative; z-index: 1; } .journey-stage-pill:disabled { cursor: not-allowed; opacity: .55; } .journey-stage-pill.selected { border-color: var(--teal); background: rgba(0,194,168,0.08); } .journey-stage-pill.journey-stage-done { color: #0a7a3f; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); } .journey-stage-pill.journey-stage-current { color: #92620a; background: rgba(245,183,0,0.16); border-color: rgba(245,183,0,0.55); } .journey-stage-pill.journey-stage-locked { color: var(--slate); } /* The connecting "path" line running behind each pill to the previous one — solid teal once that earlier stage is done, dashed grey while it's still ahead of you, giving the rail a genuine roadmap-path feel instead of a flat, disconnected row of buttons. */ .journey-stage-pill:not(:first-child)::before { content: ''; position: absolute; top: 50%; right: 100%; width: 18px; height: 2px; background: var(--line); z-index: -1; } .journey-stage-pill.journey-stage-done:not(:first-child)::before, .journey-stage-pill.selected:not(:first-child)::before { background: var(--teal); } /* Prev/Next now sit on the SAME line as the stage heading (inside the stage window itself), flanking it left/right, with the stage name + status tag centered between them. */ .journey-stage-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .journey-stage-header-row .stage-detail-heading { flex: 1; min-width: 0; } .journey-topics-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .journey-topic-item label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #fff; transition: background .15s ease; } .journey-topic-item label:has(input:disabled) { cursor: default; opacity: .75; } .journey-topic-item:hover label:has(input:not(:disabled)) { background: rgba(255,255,255,0.06); } .journey-topic-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; cursor: pointer; } .journey-topic-item input[type="checkbox"]:disabled { cursor: default; } .journey-topic-item.is-checked span { color: rgba(255,255,255,0.55); text-decoration: line-through; } .journey-materials { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-line); display: flex; flex-direction: column; gap: 8px; } .journey-material-item { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 11px 14px; color: #fff; font-size: 14px; cursor: pointer; transition: background .15s ease; } .journey-material-item:hover { background: rgba(255,255,255,0.12); } .journey-material-icon { font-size: 18px; } /* ============================================================ STAGE DETAIL PANEL (My Journey) — a light theme, deliberately separate from the dark .track-card used on the homepage and track detail pages, so this doesn't affect those. ============================================================ */ .stage-detail-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-card); } .stage-detail-heading { margin: 0; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; } .stage-info-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14px; } .stage-info-table th, .stage-info-table td { padding: 9px 14px; border: 1px solid var(--line); text-align: left; } .stage-info-table th { background: var(--paper); color: var(--slate); font-weight: 600; width: 140px; } .stage-info-table td { color: var(--ink); font-weight: 600; } /* Compact combined Started/Completed/Phase/Duration table (item 4) — two label/value pairs per row instead of a full-width single-column table. */ .stage-compact-table.stage-info-table { font-size: 12.5px; margin-bottom: 18px; } .stage-compact-table th { width: auto; padding: 7px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .stage-compact-table td { padding: 7px 12px; font-family: var(--font-mono); font-size: 12.5px; } .stage-stat-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .stage-stat-chip { display: flex; flex-direction: column; gap: 1px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; font-size: 12px; } .stage-stat-chip-label { color: var(--slate); font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; } .stage-stat-chip-value { color: var(--ink); font-weight: 700; font-family: var(--font-mono); } .stage-pct-chip { font-weight: 700; } .stage-pct-chip.is-progress { background: rgba(245,183,0,0.16); border-color: rgba(245,183,0,0.5); } .stage-pct-chip.is-progress .stage-stat-chip-value { color: #92620a; } .stage-pct-chip.is-complete { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.45); } .stage-pct-chip.is-complete .stage-stat-chip-value { color: #0a7a3f; } .journey-materials-general { margin: 0 0 18px; padding: 14px; background: var(--paper); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; } .journey-materials-general .journey-material-item { background: #fff; border: 1px solid var(--line); color: var(--ink); } .journey-materials-general .journey-material-item:hover { background: var(--paper-soft); } /* ---- Topic toolbar: Doubts + Mark as Completed, for the currently selected topic (item 5) ---- */ .stage-topic-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 12px 0 10px; padding: 7px 14px; background: var(--paper); border-radius: 10px; } .stage-topic-toolbar-title { font-size: 13.5px; color: var(--slate); } .stage-topic-toolbar-title strong { color: var(--ink); } .stage-topic-toolbar-actions { display: flex; align-items: center; gap: 12px; } .stage-complete-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--slate); cursor: pointer; } .stage-complete-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; } .stage-complete-toggle.is-complete { color: var(--teal-dark); } /* ---- Two-panel layout: topics list on the left, materials for the selected topic on the right (item 5) ---- */ .stage-topic-layout { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 400px; } .stage-topic-list { background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; max-height: 74vh; overflow-y: auto; } .stage-topic-list-item { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); cursor: pointer; transition: background .12s ease; } .stage-topic-list-item:last-child { border-bottom: none; } .stage-topic-list-item:hover { background: var(--paper-soft); } .stage-topic-list-item.active { background: rgba(0,194,168,0.1); font-weight: 700; } .stage-topic-list-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #fff; border: 1.5px solid var(--line); color: var(--slate); } .stage-topic-list-item.done .stage-topic-list-check { background: var(--teal); border-color: var(--teal); color: #fff; } .stage-topic-list-label { flex: 1; min-width: 0; } .stage-topic-materials { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; } .stage-topic-materials .journey-material-item { background: var(--paper); border: 1px solid var(--line); color: var(--ink); } .stage-topic-materials .journey-material-item:hover { background: var(--paper-soft); } .material-tab-row { display: flex; flex-wrap: wrap; gap: 6px; } .material-tab { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--slate); cursor: pointer; } .material-tab.active { background: rgba(0,194,168,0.12); border-color: var(--teal); color: var(--teal-dark); } .material-inline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .material-inline-title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .material-inline-actions { display: flex; align-items: center; gap: 10px; } .material-mark-read-btn.is-read { color: var(--teal-dark); background: rgba(0,194,168,0.1); border-color: var(--teal); } .journey-mark-done-btn { padding: 8px 18px; font-size: 13px; display: block; margin-left: auto; } .journey-nav-arrow-btn { padding: 6px 12px; font-size: 12.5px; flex-shrink: 0; } .journey-track-status-badge { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: middle; } .journey-track-status-badge.is-complete { background: rgba(34,197,94,0.15); color: #0a7a3f; } .journey-track-status-badge.is-revising { background: rgba(245,183,0,0.18); color: #92620a; } .journey-track-status-badge.is-progress { background: rgba(59,130,246,0.14); color: #1d4ed8; } .material-inline-body { min-height: 320px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 4px; } @media (min-width: 900px) { .material-inline-body { max-height: 68vh; } } @media (max-width: 640px) { .stage-topic-layout { grid-template-columns: 1fr; } .stage-topic-list { border-right: none; border-bottom: 1px solid var(--line); max-height: 220px; } } .journey-material-link { display: block; background: none; border: none; padding: 2px 0; text-align: left; color: var(--teal-dark); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; } .journey-doubt-btn { white-space: nowrap; padding: 6px 13px; font-size: 12px; font-weight: 600; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--slate); cursor: pointer; transition: background .15s ease; } .journey-doubt-btn:hover:not(:disabled) { background: var(--paper-soft); } .journey-doubt-btn:disabled { cursor: default; opacity: .6; } .journey-doubt-btn.has-doubt { background: rgba(242,169,59,0.15); color: #9a6a12; border-color: rgba(242,169,59,0.4); } .btn-danger-small { background: none; border: 1px solid rgba(229,72,77,0.35); color: var(--danger); font-weight: 600; font-size: 13px; cursor: pointer; padding: 9px 16px; border-radius: 8px; } .btn-danger-small:hover { background: rgba(229,72,77,0.08); } .material-viewer-box { background: #fff; border-radius: var(--radius-md); padding: 24px 28px 28px; width: 94vw; max-width: 1500px; height: 92vh; overflow-y: auto; position: relative; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.35); } .material-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .material-viewer-toolbar h3 { margin: 0; color: var(--teal-dark); font-size: 15px; } .material-viewer-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .material-viewer-icon-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .material-viewer-icon-btn:hover { background: var(--paper-soft); } .material-viewer-icon-btn.has-doubt { border-color: var(--amber); background: rgba(242,169,59,0.15); } .material-viewer-icon-btn.is-read { border-color: var(--teal); background: rgba(0,194,168,0.12); color: var(--teal-dark); } .material-viewer-icon-btn.material-viewer-close-btn { font-size: 18px; color: var(--slate); } .material-viewer-icon-btn.material-viewer-close-btn:hover { background: rgba(229,72,77,0.1); color: var(--danger); } .material-viewer-body { position: relative; min-height: 300px; } .material-viewer-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; } .spinner-lg { width: 40px; height: 40px; border-width: 4px; border-color: rgba(11,19,32,0.15); border-top-color: var(--teal); } .material-protected { position: relative; user-select: none; -webkit-user-select: none; } .material-protected canvas { display: block; } .material-watermark { z-index: 5; } .doc-viewer { font-size: 14.5px; line-height: 1.7; color: var(--ink); max-height: 65vh; overflow-y: auto; padding: 4px 2px; } .doc-viewer table { border-collapse: collapse; width: 100%; font-size: 13px; } .doc-viewer table td, .doc-viewer table th { border: 1px solid var(--line); padding: 6px 10px; } .doc-viewer img { max-width: 100%; } /* ============================================================ CELEBRATION POPUP — brief, centered, auto-closes itself ============================================================ */ .celebration-popup-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(11,19,32,0.35); opacity: 0; pointer-events: none; transition: opacity .12s ease; } .celebration-popup-overlay.show { opacity: 1; pointer-events: auto; } .celebration-popup { background: #fff; border-radius: 20px; padding: 36px 48px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform .18s cubic-bezier(.34,1.56,.64,1); } .celebration-popup-overlay.show .celebration-popup { transform: scale(1); } .celebration-popup-emoji { font-size: 52px; line-height: 1; margin-bottom: 12px; animation: celebration-bounce 1s ease-in-out infinite; } .celebration-popup-text { font-size: 20px; font-weight: 800; color: var(--ink); } @keyframes celebration-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .celebration-popup-emoji { animation: none; } } /* ============================================================ COURSE COMPLETE POPUP — confetti/"birthday shower", exactly 3s (item 4) ============================================================ */ .course-complete-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(11,19,32,0.55); opacity: 0; pointer-events: none; transition: opacity .15s ease; overflow: hidden; } .course-complete-overlay.show { opacity: 1; pointer-events: auto; } .confetti-layer { position: absolute; inset: 0; overflow: hidden; } .confetti-piece { position: absolute; top: -20px; border-radius: 2px; animation-name: confetti-fall; animation-timing-function: ease-in; animation-iteration-count: 1; } @keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0.9; } } .course-complete-box { background: #fff; border-radius: 22px; padding: 44px 52px; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,0.4); transform: scale(0.85); transition: transform .25s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 2; max-width: 420px; } .course-complete-overlay.show .course-complete-box { transform: scale(1); } .course-complete-emoji { font-size: 48px; margin-bottom: 14px; animation: celebration-bounce 1s ease-in-out infinite; } .course-complete-box h2 { margin: 0 0 8px; font-size: 24px; color: var(--ink); } .course-complete-box p { margin: 0; font-size: 14px; color: var(--slate); } /* Keeps these specific texts on a single line on tablet/desktop (items 28, 31, 32) via a fluid font-size that shrinks as the viewport narrows. Below 640px, some of these sentences are simply too long to stay on one line without becoming illegible or forcing horizontal scroll, so normal wrapping is restored there — the safer choice for actual readability. */ .nowrap-fluid-text { white-space: nowrap; font-size: clamp(11px, 1.7vw, 100%); } @media (max-width: 640px) { .nowrap-fluid-text { white-space: normal; font-size: inherit; } } .products-resource-sub { max-width: 980px; line-height: 1.55; } .whatsapp-consent-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); margin: 14px 0; cursor: pointer; background: rgba(37,211,102,0.08); border: 1px solid rgba(37,211,102,0.25); border-radius: 10px; padding: 10px 14px; } .whatsapp-consent-row input { cursor: pointer; flex-shrink: 0; } /* ---- My Account: table action buttons + status pills (item 6) ---- */ .account-action-btn { border: none; border-radius: 8px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer; color: #fff; margin: 2px 3px 2px 0; white-space: nowrap; transition: opacity .15s ease; } .account-action-btn:hover { opacity: .88; } .account-action-btn:disabled { opacity: .6; cursor: not-allowed; } .account-action-btn.is-download { background: #2563EB; } .account-action-btn.is-email { background: #7C3AED; } .account-action-btn.is-whatsapp { background: #16A34A; } .account-status-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .account-status-pill.is-confirmed { background: rgba(37,99,235,0.14); color: #1d4ed8; } .account-status-pill.is-completed { background: rgba(34,197,94,0.15); color: #0a7a3f; } .account-status-pill.is-cancelled { background: rgba(229,72,77,0.14); color: var(--danger); } .account-status-pill.is-pending { background: rgba(245,183,0,0.16); color: #92620a; } /* ---- Refer a Friend modal (item 15) — larger, more attractive ---- */ .refer-modal-box { max-width: 640px; padding: 0 40px 40px; } .refer-modal-banner { margin: 0 -36px 22px; padding: 30px 36px 24px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(120deg, var(--amber), var(--violet-soft), var(--teal)); background-size: 200% 200%; animation: refer-modal-gradient 6s ease infinite; text-align: center; } .refer-modal-banner h3 { color: #fff; font-size: 22px; margin: 4px 0 10px; text-shadow: 0 2px 8px rgba(0,0,0,0.15); } .refer-modal-banner .modal-sub { color: rgba(255,255,255,0.92); font-size: 13.5px; max-width: 420px; margin: 0 auto; } .refer-modal-banner-emoji { font-size: 40px; animation: celebration-bounce 1.6s ease-in-out infinite; } @keyframes refer-modal-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- My Account tables (item 2) — bookings, purchases, completed courses ---- */ .table-scroll { overflow-x: auto; } .account-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border-radius: var(--radius-md); overflow: hidden; } .account-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--slate); padding: 12px 14px; border-bottom: 2px solid var(--line); white-space: nowrap; background: var(--paper); } .account-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .account-table tr:last-child td { border-bottom: none; } .account-table .muted { color: var(--slate); font-size: 12.5px; } .account-table .small-mono { font-family: var(--font-mono); font-size: 12px; }