/* ════════════════════════════════════════════════════════════════════ Tech6Sense — Design System v2.0 • Dark mode: same rich green as light (not pale mint) • Glassmorphism throughout • SAP pages: [data-sap] bluish theme • Modern micro-interactions & depth ════════════════════════════════════════════════════════════════════ */ /* ── Google Fonts ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── Design tokens: Light mode ────────────────────────────────── */ :root { /* Backgrounds */ --bg-primary: #f8fafb; --bg-secondary: #eef1f5; --bg-card: #ffffff; --bg-nav: rgba(255,255,255,0.82); --bg-glass: rgba(255,255,255,0.60); --bg-glass-hover: rgba(255,255,255,0.80); /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; /* Brand — rich forest green */ --accent: #0d6e56; --accent-2: #059669; --accent-hover: #065f46; --accent-light: #d1fae5; --accent-text: #064e3b; --accent-glow: rgba(13,110,86,0.18); /* Borders & shadows */ --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); --shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 8px 24px rgba(0,0,0,0.10); --shadow-lg: 0 20px 48px rgba(0,0,0,0.14); --shadow-glow: 0 0 0 3px var(--accent-glow); /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; /* Layout */ --nav-h: 86px; --sidebar-w: 268px; /* Typography */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Transitions */ --transition: 0.18s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.35s cubic-bezier(0.4,0,0.2,1); /* Glass blur */ --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(24px); } /* ── Design tokens: Dark mode ─────────────────────────────────── */ [data-theme="dark"] { --bg-primary: #0a0e1a; --bg-secondary: #111827; --bg-card: #1a2235; --bg-nav: rgba(10,14,26,0.85); --bg-glass: rgba(26,34,53,0.70); --bg-glass-hover: rgba(26,34,53,0.90); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; /* Same rich green in dark — NOT pale mint */ --accent: #0d6e56; --accent-2: #10b981; --accent-hover: #0a5642; --accent-light: #052e20; --accent-text: #6ee7b7; --accent-glow: rgba(13,110,86,0.30); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 20px 48px rgba(0,0,0,0.60); --shadow-glow: 0 0 0 3px var(--accent-glow); } /* ── SAP theme — applied via [data-sap] on or section ─── */ [data-sap], body.sap-page { --accent: #0070f3; --accent-2: #0058cc; --accent-hover: #0050b3; --accent-light: #e0f0ff; --accent-text: #003380; --accent-glow: rgba(0,112,243,0.20); } [data-theme="dark"][data-sap], [data-theme="dark"] body.sap-page, [data-theme="dark"] [data-sap] { --accent: #2196f3; --accent-2: #42a5f5; --accent-hover: #1976d2; --accent-light: #0a1929; --accent-text: #90caf9; --accent-glow: rgba(33,150,243,0.28); } /* ════════════════════════════════════════════════════════════════ BASE RESET ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--transition-slow), color var(--transition); min-height: 100vh; } /* Subtle grid background texture */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(13,110,86,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(13,110,86,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } [data-theme="dark"] body::before { background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } button { cursor: pointer; font-family: var(--font-sans); border: none; background: none; } input, textarea, select { font-family: var(--font-sans); } /* ── Typography ───────────────────────────────────────────────── */ h1 { font-size: clamp(1.8rem, 4.5vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; line-height: 1.3; } h4 { font-size: 1.1rem; font-weight: 600; } p { color: var(--text-secondary); line-height: 1.75; } /* Gradient text utility */ .text-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ════════════════════════════════════════════════════════════════ LAYOUT â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘ */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } .container--wide { max-width: 1440px; } .container--narrow { max-width: 860px; } .section { padding: 80px 0; } .section--sm { padding: 48px 0; } .section--xs { padding: 28px 0; } .nav__dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--bg-glass-hover); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: 200; animation: dropIn 0.15s ease; } /* Transparent bridge fills the gap so hover stays active while mouse moves down */ .nav__avatar::after { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 10px; background: transparent; } .nav__avatar:hover .nav__dropdown, .nav__avatar:focus-within .nav__dropdown { display: block; } @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Avatar position */ .nav__avatar { position: relative; } /* â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘ GLASSMORPHISM CARD BASE â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘â•‘ */ .glass { background: var(--bg-glass); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); border-radius: var(--radius-lg); } .glass--strong { background: var(--bg-glass-hover); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); } /* ════════════════════════════════════════════════════════════════ NAVIGATION — glassmorphism sticky nav ════════════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 1000; min-height: var(--nav-h); height: auto; background: var(--bg-nav); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border-bottom: 1px solid var(--border); transition: all var(--transition); } .nav__inner { display: flex; align-items: center; gap: 6px; height: 54px; max-width: 1440px; margin: 0 auto; padding: 0 24px; } .nav__logo { display: flex; align-items: center; gap: 10px; margin-right: 16px; text-decoration: none; } .nav__logo-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.85rem; color: #fff; box-shadow: 0 4px 12px var(--accent-glow); flex-shrink: 0; transition: transform var(--transition), box-shadow var(--transition); } .nav__logo:hover .nav__logo-icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 6px 20px var(--accent-glow); } .nav__logo-text { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; white-space: nowrap; } .nav__logo-text span { color: var(--accent); } .nav__links { display: flex; align-items: center; gap: 2px; flex: 1; } .nav__link { padding: 5px 10px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition); white-space: nowrap; position: relative; } .nav__link:hover { color: var(--accent); background: var(--accent-light); } .nav__link--active { color: var(--accent); background: var(--accent-light); font-weight: 600; } .nav__subnav { position: relative; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-nav) 92%, var(--bg-secondary)); } .nav__subnav-cue { position: absolute; top: 0; bottom: 0; z-index: 2; width: 42px; display: none; align-items: center; justify-content: center; color: var(--text-secondary); pointer-events: none; } .nav__subnav-cue--left { left: 0; background: linear-gradient(90deg, var(--bg-nav) 0%, color-mix(in srgb, var(--bg-nav) 82%, transparent) 58%, transparent 100%); } .nav__subnav-cue--right { right: 0; background: linear-gradient(270deg, var(--bg-nav) 0%, color-mix(in srgb, var(--bg-nav) 82%, transparent) 58%, transparent 100%); } .nav__subnav-cue svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); } .nav__subnav-scroll { max-width: 1440px; min-height: 34px; margin: 0 auto; padding: 4px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav__subnav-scroll::-webkit-scrollbar { display: none; } .nav__subnav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 11px; border-radius: 999px; color: var(--text-secondary); font-size: .78rem; font-weight: 650; line-height: 1.2; white-space: nowrap; border: 1px solid transparent; transition: color var(--transition), background var(--transition), border-color var(--transition); } .nav__subnav-link:hover, .nav__subnav-link--active { color: var(--accent); background: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } /* SAP nav marker: visible without the heavy filled blue pill */ .nav__link--sap { color: var(--text-secondary) !important; background: transparent; font-weight: 650; } .nav__link--sap::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #0070f3; box-shadow: 0 0 0 3px rgba(0,112,243,0.10); flex: 0 0 auto; } .nav__link--sap:hover { opacity: 1; color: var(--accent) !important; background: color-mix(in srgb, var(--accent-light) 70%, transparent); } .nav__link--sap.nav__link--active { color: var(--accent) !important; background: transparent; box-shadow: inset 0 -2px 0 var(--accent); } .nav__link--sap.nav__link--active::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Search pill */ .nav__search { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 50px; padding: 7px 14px; transition: all var(--transition); } .nav__search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-glow); background: var(--bg-card); } .nav__search input { background: none; border: none; outline: none; font-size: 0.875rem; color: var(--text-primary); width: 150px; } .nav__search input::placeholder { color: var(--text-muted); } .nav__search svg { color: var(--text-muted); flex-shrink: 0; width: 15px; height: 15px; } @media (max-width: 1220px) { .nav__inner { padding: 0 16px; } .nav__logo { margin-right: 8px; } .nav__link { padding: 7px 9px; font-size: .82rem; } .nav__search input { width: 118px; } .nav__subnav-scroll { padding-inline: 16px; justify-content: flex-start; } } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition); font-size: 1rem; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: rotate(20deg); } .nav__dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--accent-light); } .nav__dropdown-name { font-weight: 700; font-size: 0.875rem; color: var(--text-primary); } .nav__dropdown-email { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .nav__dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.875rem; color: var(--text-primary); transition: background var(--transition); } .nav__dropdown-item:hover { background: var(--bg-secondary); } .nav__dropdown-item svg { width: 15px; height: 15px; color: var(--text-muted); } .nav__dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; } /* Hamburger */ .nav__hamburger { display: none; padding: 7px; border-radius: var(--radius-sm); color: var(--text-primary); transition: background var(--transition); } .nav__hamburger:hover { background: var(--bg-secondary); } /* Mobile drawer */ .nav__mobile { display: none; position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); overscroll-behavior: contain; overflow: hidden; touch-action: auto; } .nav__mobile-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 88vw); background: var(--bg-card); padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; max-height: 100dvh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; box-shadow: var(--shadow-lg); } .nav__mobile.open { display: block; } .nav__mobile.open .nav__mobile-drawer { transform: translateX(0); } .nav__mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .nav__mobile-brand { display: inline-flex; align-items: center; min-width: 0; } .nav__mobile-brand-img { display: block; width: 145px; max-width: 100%; height: auto; } .nav__mobile-brand-img--light { display: none; } [data-theme="dark"] .nav__mobile-brand-img--dark { display: none; } [data-theme="dark"] .nav__mobile-brand-img--light { display: block; } .nav__mobile-close { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: background var(--transition), transform var(--transition), border-color var(--transition); } .nav__mobile-close:hover { background: var(--accent-light); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); transform: translateY(-1px); } .nav__mobile-user, .nav__mobile-guest { border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 76%, transparent), transparent 78%), var(--bg-card); box-shadow: 0 12px 30px rgba(2, 6, 23, .06); margin-bottom: 18px; } .nav__mobile-user { display: flex; align-items: center; gap: 12px; padding: 13px; } .nav__mobile-user-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; } .nav__mobile-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .nav__mobile-user-meta { min-width: 0; } .nav__mobile-user-name { font-size: .9rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__mobile-user-email { margin-top: 2px; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__mobile-guest { padding: 14px; } .nav__mobile-guest strong, .nav__mobile-guest span { display: block; } .nav__mobile-guest strong { color: var(--text-primary); font-size: .95rem; } .nav__mobile-guest span { margin: 4px 0 12px; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; } .nav__mobile-section { margin-bottom: 16px; } .nav__mobile-section-title { margin: 0 0 8px; color: var(--text-muted); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } .nav__mobile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nav__mobile-tile { min-width: 0; min-height: 70px; display: flex; flex-direction: column; justify-content: space-between; gap: 9px; padding: 11px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-secondary); color: var(--text-primary); font-size: .86rem; font-weight: 800; transition: transform var(--transition), border-color var(--transition), background var(--transition); } .nav__mobile-tile:hover, .nav__mobile-tile--active { background: var(--accent-light); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); transform: translateY(-1px); } .nav__mobile-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--bg-card); color: var(--accent); } .nav__mobile-link { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid transparent; border-radius: 14px; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); transition: all var(--transition); } .nav__mobile-link:hover { background: var(--accent-light); color: var(--accent); } .nav__mobile-link--active { color: var(--accent); background: var(--accent-light); font-weight: 700; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .nav__mobile-link > span:last-child { min-width: 0; display: grid; gap: 2px; } .nav__mobile-link strong { font-size: .88rem; line-height: 1.25; } .nav__mobile-link small { color: var(--text-muted); font-size: .72rem; line-height: 1.25; font-weight: 600; } .nav__mobile-link-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--bg-secondary); color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .02em; } .nav__mobile-link-icon svg { width: 17px; height: 17px; } html.nav-lock, body.nav-lock { overflow: hidden; overscroll-behavior: none; } body.nav-lock #t6PopupHost, body.nav-lock #t6PopupLauncher, body.nav-lock #t6PopupCard { pointer-events: none !important; visibility: hidden !important; } .nav__mobile-section--account { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); } .nav__mobile-account-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nav__mobile-account-btn, .nav__mobile-signout { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; font-size: .84rem; font-weight: 800; } .nav__mobile-account-btn { border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); } .nav__mobile-account-btn--wide, .nav__mobile-signout { width: 100%; margin-top: 8px; } .nav__mobile-signout { border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border)); background: color-mix(in srgb, #ef4444 8%, transparent); color: #ef4444; } /* ════════════════════════════════════════════════════════════════ ANNOUNCEMENT BAR ════════════════════════════════════════════════════════════════ */ .announce-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; padding: 5px 24px; text-align: center; font-size: 0.8rem; font-weight: 500; position: relative; z-index: 1; } .announce-bar a { color: #fff; font-weight: 700; text-decoration: underline; } .announce-bar .dismiss { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; color: #fff; cursor: pointer; font-size: 1rem; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .announce-bar .dismiss:hover { background: rgba(255,255,255,0.35); } /* ════════════════════════════════════════════════════════════════ /* HERO — base (overridden per section by .hero--home etc.) */ .hero { position: relative; overflow: hidden; } /* Remove old gradient/padding so .hero--home can define its own */ .hero--home { /* all styles defined in the homepage hero block below */ } /* Dot grid (kept for non-homepage heroes) */ .hero-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } .hero__content { position: relative; z-index: 2; max-width: 660px; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* ════════════════════════════════════════════════════════════════ /* ════════════════════════════════════════════════════════════════ BUTTONS — unified design system ════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; font-family: var(--font-sans); border: 1px solid transparent; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .15s ease, color .15s ease; white-space: nowrap; line-height: 1.25; position: relative; overflow: hidden; text-decoration: none; user-select: none; -webkit-user-select: none; } /* Shimmer on hover */ .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%); transform: translateX(-100%); transition: transform .45s ease; pointer-events: none; } .btn:hover::after { transform: translateX(100%); } /* Variants */ .btn--primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(13,110,86,0.28); } .btn--primary:hover { background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%); color: #fff; box-shadow: 0 4px 16px rgba(13,110,86,0.38); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(13,110,86,0.25); } .btn--outline { border-color: var(--border-strong); color: var(--text-primary); background: transparent; } .btn--outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .btn--white { background: #fff; color: var(--accent); border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,0.10); } .btn--white:hover { background: #f0fdf4; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.14); } .btn--glass { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.22); color: #fff; } .btn--glass:hover { background: rgba(255,255,255,0.22); color: #fff; } .btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn--ghost:hover { background: var(--bg-secondary); color: var(--text-primary); } .btn--danger { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(220,38,38,0.25); } .btn--danger:hover { box-shadow: 0 4px 14px rgba(220,38,38,0.35); transform: translateY(-1px); } /* Sizes */ .btn--sm { padding: 5px 13px; font-size: 0.8rem; border-radius: 7px; gap: 5px; } .btn--lg { padding: 11px 26px; font-size: 0.95rem; border-radius: 9px; } .btn--xl { padding: 13px 32px; font-size: 1rem; border-radius: 9px; } .btn--icon { width: 36px; height: 36px; padding: 0; border-radius: 8px; flex-shrink: 0; } /* Full-width only when explicitly requested */ .btn--full { width: 100%; justify-content: center; } /* ════════════════════════════════════════════════════════════════ CARDS — glassmorphism & depth ════════════════════════════════════════════════════════════════ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); } /* Glass card variant */ .card--glass { background: var(--bg-glass); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); } .card--glass:hover { background: var(--bg-glass-hover); } /* Accent top border on hover */ .card--accent { border-top: 3px solid transparent; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card--accent:hover { border-top-color: var(--accent); box-shadow: 0 8px 32px var(--accent-glow), var(--shadow-md); } /* Course cards */ .course-card { display: flex; flex-direction: column; height: 100%; } .course-card__thumb { aspect-ratio: 16/9; min-height: 88px; max-height: 112px; background: var(--bg-secondary); position: relative; overflow: hidden; } .course-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .course-card:hover .course-card__thumb img { transform: scale(1.04); } .course-card__badge { position: absolute; top: 9px; left: 9px; padding: 3px 9px; border-radius: 50px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; backdrop-filter: blur(8px); } .badge--free { background: rgba(220,252,231,0.92); color: #15803d; } .badge--premium { background: rgba(254,243,199,0.92); color: #92400e; } .badge--new { background: rgba(219,234,254,0.92); color: #1d4ed8; } .badge--sap { background: rgba(0,112,243,0.15); color: #0070f3; border: 1px solid rgba(0,112,243,0.3); } .course-card__body { padding: 11px; flex: 1; display: flex; flex-direction: column; } .course-card__type { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); margin-bottom: 5px; } .course-card__title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; min-height: 2.45em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-card__desc { font-size: .74rem; line-height: 1.42; color: var(--text-secondary); margin-bottom: 7px; min-height: 2.05em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-card__meta { display: flex; gap: 8px; min-height: 24px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 0.68rem; color: var(--text-muted); align-items: center; flex-wrap: wrap; } .course-card__footer, .material-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; } .course-card .btn--sm { padding: 7px 10px; font-size: .76rem; } .course-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 248px)); gap: 18px; align-items: stretch; justify-content: start; } .price-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; } .price-stack__current { font-size: .8rem; font-weight: 800; color: var(--text-primary); } .price-stack__original { font-size: .66rem; font-weight: 650; color: var(--text-muted); text-decoration: line-through; } .material-card__desc { font-size: .82rem; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ════════════════════════════════════════════════════════════════ GRIDS ════════════════════════════════════════════════════════════════ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; } /* ════════════════════════════════════════════════════════════════ SECTION HEADERS ════════════════════════════════════════════════════════════════ */ .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; } .section-header h2 { margin: 0; } .section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 8px; } .section-label::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; } /* ════════════════════════════════════════════════════════════════ POST / JOB CARDS ════════════════════════════════════════════════════════════════ */ .post-card { display: flex; gap: 16px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all var(--transition); } .post-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); transform: translateX(4px); } .post-card__thumb { width: 76px; height: 58px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } .post-card__content { flex: 1; min-width: 0; } .post-card__title { font-size: 0.925rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; line-height: 1.4; } .post-card__meta { font-size: 0.78rem; color: var(--text-muted); } /* ════════════════════════════════════════════════════════════════ PROGRESS BAR ════════════════════════════════════════════════════════════════ */ .progress-bar { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; } .progress-bar__fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.7s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; } .progress-bar__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: progress-shimmer 1.8s infinite; } @keyframes progress-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ════════════════════════════════════════════════════════════════ TAGS & BADGES ════════════════════════════════════════════════════════════════ */ .tag { display: inline-block; padding: 4px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 50px; font-size: 0.78rem; color: var(--text-secondary); transition: all var(--transition); font-weight: 500; } .tag:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } /* ════════════════════════════════════════════════════════════════ FORMS ════════════════════════════════════════════════════════════════ */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .form-label span { color: #ef4444; } .form-control { width: 100%; padding: 11px 14px; background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.9rem; transition: all var(--transition); } .form-control:focus { outline: none; border-color: var(--accent); background: var(--bg-card); box-shadow: var(--shadow-glow); } .form-control::placeholder { color: var(--text-muted); } .form-control--error { border-color: #ef4444; } textarea.form-control { resize: vertical; min-height: 110px; } select.form-control { appearance: auto; } .form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; } .form-error { font-size: 0.78rem; color: #ef4444; margin-top: 5px; } /* ════════════════════════════════════════════════════════════════ ALERTS & FLASH ════════════════════════════════════════════════════════════════ */ .alert { padding: 13px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; } .alert--success { background: #f0fdf4; color: #15803d; border-color: #86efac; } .alert--error { background: #fef2f2; color: #991b1b; border-color: #fca5a5; } .alert--info { background: #eff6ff; color: #1e40af; border-color: #93c5fd; } .alert--warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; } [data-theme="dark"] .alert--success { background: #052e20; color: #6ee7b7; border-color: #065f46; } [data-theme="dark"] .alert--error { background: #3b0a0a; color: #fca5a5; border-color: #7f1d1d; } [data-theme="dark"] .alert--info { background: #0c1a3d; color: #93c5fd; border-color: #1d4ed8; } [data-theme="dark"] .alert--warning { background: #2d1a00; color: #fcd34d; border-color: #92400e; } /* ════════════════════════════════════════════════════════════════ CODE BLOCKS — dark theme always ════════════════════════════════════════════════════════════════ */ .code-block { background: #0d1117; border-radius: var(--radius-md); overflow: hidden; margin: 20px 0; border: 1px solid #21262d; box-shadow: var(--shadow-md); } .code-block__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #161b22; border-bottom: 1px solid #21262d; } .code-block__dots { display: flex; gap: 6px; } .code-block__dots span { width: 12px; height: 12px; border-radius: 50%; } .code-block__dots span:nth-child(1) { background: #ff5f57; } .code-block__dots span:nth-child(2) { background: #febc2e; } .code-block__dots span:nth-child(3) { background: #28c840; } .code-block__lang { font-size: 0.75rem; font-weight: 600; color: #8b949e; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .code-block__body { padding: 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.75; color: #e6edf3; } .code-block__output { padding: 12px 18px; background: #010409; border-top: 1px solid #21262d; font-family: var(--font-mono); font-size: 0.85rem; color: #3fb950; min-height: 44px; white-space: pre-wrap; } .code-block__output.error { color: #f85149; } /* ════════════════════════════════════════════════════════════════ QUIZ ════════════════════════════════════════════════════════════════ */ .quiz-wrap { max-width: 780px; margin: 0 auto; } .quiz-header { margin-bottom: 36px; } .quiz-timer { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-light); color: var(--accent-text); padding: 7px 18px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; border: 1px solid var(--accent); } .quiz-timer.warning { background: #fffbeb; color: #92400e; border-color: #f59e0b; } .quiz-timer.danger { background: #fef2f2; color: #991b1b; border-color: #ef4444; animation: pulse-red 1s infinite; } @keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.7} } .question-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 26px; margin-bottom: 20px; transition: border-color var(--transition); } .question-card:focus-within { border-color: var(--accent); } .question-num { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; } .question-text { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 18px; line-height: 1.55; } .question-options { display: flex; flex-direction: column; gap: 10px; } .option-btn { width: 100%; text-align: left; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; font-family: var(--font-sans); transition: all var(--transition); display: flex; align-items: center; gap: 12px; cursor: pointer; } .option-btn:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); } .option-btn.selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); } .option-btn.correct { border-color: #22c55e; background: #f0fdf4; color: #15803d; } .option-btn.wrong { border-color: #ef4444; background: #fef2f2; color: #991b1b; } [data-theme="dark"] .option-btn.correct { background: #052e20; color: #4ade80; border-color: #22c55e; } [data-theme="dark"] .option-btn.wrong { background: #2d0a0a; color: #f87171; border-color: #ef4444; } .option-letter { width: 30px; height: 30px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; transition: background var(--transition); } /* ════════════════════════════════════════════════════════════════ LESSON LAYOUT ════════════════════════════════════════════════════════════════ */ .lesson-layout { display: grid; grid-template-columns: 1fr var(--sidebar-w); gap: 0; min-height: calc(100vh - var(--nav-h)); } .lesson-sidebar { border-left: 1px solid var(--border); background: var(--bg-card); position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; } .lesson-sidebar__head { padding: 18px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.85rem; background: var(--bg-secondary); } .lesson-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer; border-left: 3px solid transparent; transition: all var(--transition); } .lesson-item:hover { background: var(--bg-secondary); color: var(--text-primary); } .lesson-item.active { border-left-color: var(--accent); background: var(--accent-light); color: var(--accent-text); font-weight: 600; } .lesson-item.done { color: var(--accent); } .lesson-item__icon { width: 16px; height: 16px; flex-shrink: 0; } .lesson-main { padding: 36px; max-width: 840px; } /* ════════════════════════════════════════════════════════════════ DASHBOARD ════════════════════════════════════════════════════════════════ */ .dashboard-layout { display: grid; grid-template-columns: 228px 1fr; min-height: calc(100vh - var(--nav-h)); } .dashboard-nav { border-right: 1px solid var(--border); background: var(--bg-card); padding: 28px 14px; position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; } .dashboard-nav__section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 16px 12px 6px; } .dashboard-nav__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition); margin-bottom: 2px; } .dashboard-nav__item:hover { background: var(--bg-secondary); color: var(--text-primary); } .dashboard-nav__item.active { background: var(--accent-light); color: var(--accent-text); font-weight: 700; } .dashboard-content { padding: 36px; } /* Stat cards — glassmorphism */ .stat-card { background: var(--bg-glass); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 20px; text-align: center; transition: all var(--transition); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0; transition: opacity var(--transition); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat-card:hover::before { opacity: 1; } .stat-card__value { font-size: 2.1rem; font-weight: 800; color: var(--text-primary); } .stat-card__label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; font-weight: 500; } .stat-card__sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; } /* ════════════════════════════════════════════════════════════════ TABLE ════════════════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); } table { width: 100%; border-collapse: collapse; } th { padding: 12px 16px; text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--text-primary); vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--transition); } tbody tr:hover td { background: var(--bg-secondary); } /* ════════════════════════════════════════════════════════════════ ADMIN LAYOUT ════════════════════════════════════════════════════════════════ */ .admin-layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; } .admin-sidebar { background: var(--bg-card); border-right: 1px solid var(--border); padding: 14px 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .admin-content { padding: 20px 24px; min-width: 0; } .admin-sidebar__logo { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .admin-sidebar__logo img { width: 26px; height: 26px; object-fit: contain; } .admin-sidebar__logo span { font-size: .88rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; } .admin-nav__group { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: 10px 6px 3px; } .admin-nav__item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 6px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1px; transition: background .14s, color .14s; text-decoration: none; } .admin-nav__item svg { flex-shrink: 0; opacity: .65; } .admin-nav__item:hover { background: var(--bg-secondary); color: var(--text-primary); } .admin-nav__item:hover svg { opacity: 1; } .admin-nav__item.active { background: var(--accent-light); color: var(--accent); font-weight: 600; } .admin-nav__item.active svg { opacity: 1; } .admin-nav__spacer { flex: 1; min-height: 12px; } .admin-nav__footer { border-top: 1px solid var(--border); padding-top: 8px; } /* Topbar */ .admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px; } .admin-topbar h1 { font-size: 1.1rem; font-weight: 800; margin: 0; } .admin-topbar__right { display: flex; gap: 8px; align-items: center; } .admin-user-pill { display: flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--bg-secondary); border-radius: 50px; border: 1px solid var(--border); font-size: .75rem; font-weight: 600; color: var(--text-secondary); } .admin-user-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } /* Sub-tabs (hash-based) */ .atab-nav { display: flex; gap: 0; border-bottom: 1.5px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; } .atab-btn { padding: 6px 14px; font-size: .8rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; cursor: pointer; transition: color .14s, border-color .14s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .atab-btn:hover { color: var(--text-primary); } .atab-btn.atab-active { color: var(--accent); border-bottom-color: var(--accent); } .atab-panel { display: none; } .atab-panel.atab-active { display: block; } /* Toast flash messages */ .admin-toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .admin-toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; font-size: .82rem; font-weight: 600; max-width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,.2); pointer-events: all; animation: toast-in .22s ease forwards; } .admin-toast--success { background: #166534; color: #dcfce7; border-left: 3px solid #4ade80; } .admin-toast--error { background: #7f1d1d; color: #fee2e2; border-left: 3px solid #f87171; } @keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes toast-out { to { opacity:0; transform:translateY(10px); } } .admin-toast.toast-out { animation: toast-out .25s ease forwards; } /* Compact admin table */ .admin-content .table-wrap { overflow-x:auto; border-radius:8px; border:1px solid var(--border); } .admin-content table { width:100%; border-collapse:collapse; font-size:.8rem; } .admin-content thead th { background:var(--bg-secondary); padding:7px 12px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); text-align:left; white-space:nowrap; } .admin-content tbody td { padding:7px 12px; border-top:1px solid var(--border); vertical-align:middle; } .admin-content tbody tr:hover td { background:var(--bg-secondary); } .admin-content .form-control { padding:6px 10px; font-size:.82rem; } .admin-content .btn--sm { padding:4px 10px; font-size:.75rem; } /* Admin stat chips */ .admin-stat-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .admin-stat-chip { background:var(--bg-secondary); border:1px solid var(--border); border-radius:7px; padding:8px 14px; min-width:88px; } .admin-stat-chip__val { font-size:1.25rem; font-weight:800; line-height:1; } .admin-stat-chip__lbl { font-size:.68rem; color:var(--text-muted); margin-top:3px; } /* ════════════════════════════════════════════════════════════════ PAGINATION ════════════════════════════════════════════════════════════════ */ .pagination { display: flex; justify-content: center; margin-top: 48px; } .pagination__list { display: flex; list-style: none; gap: 6px; flex-wrap: wrap; justify-content: center; } .pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; border: 1.5px solid var(--border); color: var(--text-secondary); background: var(--bg-card); transition: all var(--transition); text-decoration: none; } .pagination__btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .pagination__btn--active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px var(--accent-glow); } .pagination__ellipsis { display: inline-flex; align-items: center; color: var(--text-muted); padding: 0 4px; } /* ════════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════════ */ .footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 56px 0 28px; position: relative; z-index: 1; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer__brand-name { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.02em; } .footer__brand-name span { color: var(--accent); } .footer__brand-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.75; } .footer__heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; } .footer__link { display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 9px; transition: color var(--transition); } .footer__link:hover { color: var(--accent); } .footer__bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer__copy { font-size: 0.8rem; color: var(--text-muted); } /* Footer social icons */ .footer__socials { display: flex; gap: 10px; margin-top: 18px; } .footer__social-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); font-size: 0.9rem; } .footer__social-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); } /* ════════════════════════════════════════════════════════════════ AUTH PAGES — full-page glassmorphism ════════════════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 50%, var(--accent-glow) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(16,185,129,0.1) 0%, transparent 50%), var(--bg-primary); } /* Animated floating blobs */ .auth-page__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; animation: float-blob 8s ease-in-out infinite; pointer-events: none; } .auth-page__blob--1 { width: 400px; height: 400px; background: var(--accent); top: -100px; left: -100px; animation-delay: 0s; } .auth-page__blob--2 { width: 300px; height: 300px; background: var(--accent-2); bottom: -80px; right: -80px; animation-delay: -3s; } .auth-page__blob--3 { width: 200px; height: 200px; background: #059669; top: 50%; right: 15%; animation-delay: -5s; } @keyframes float-blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(20px,-30px) scale(1.05); } 66% { transform: translate(-15px,15px) scale(0.95); } } [data-theme="dark"] .auth-page__blob { opacity: 0.18; } .auth-card { position: relative; z-index: 10; width: 100%; max-width: 440px; background: var(--bg-glass-hover); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 44px 40px; box-shadow: var(--shadow-lg); animation: card-rise 0.4s cubic-bezier(0.4,0,0.2,1); } @keyframes card-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .auth-card__logo { text-align: center; margin-bottom: 28px; } .auth-card__logo-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-weight: 900; font-size: 1.2rem; color: #fff; box-shadow: 0 8px 24px var(--accent-glow); } .auth-card__title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); text-align: center; margin-bottom: 6px; letter-spacing: -0.02em; } .auth-card__sub { font-size: 0.9rem; color: var(--text-muted); text-align: center; margin-bottom: 32px; } /* Google sign-in button */ .btn--google { width: 100%; justify-content: center; padding: 13px 20px; border: 1.5px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; gap: 12px; transition: all var(--transition); box-shadow: var(--shadow-sm); } .btn--google:hover { border-color: var(--accent); background: var(--bg-glass-hover); box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-glow); transform: translateY(-2px); color: var(--text-primary); } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text-muted); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-benefits { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .auth-benefit { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); } .auth-benefit__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; } /* ════════════════════════════════════════════════════════════════ SAP SPECIAL SECTIONS ════════════════════════════════════════════════════════════════ */ .sap-hero { background: linear-gradient(135deg, #0070f3 0%, #0041b3 60%, #002880 100%); } .sap-hero::before { background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); } .sap-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(0,112,243,0.12); border: 1px solid rgba(0,112,243,0.3); border-radius: 50px; font-size: 0.72rem; font-weight: 700; color: #0070f3; text-transform: uppercase; letter-spacing: 0.06em; } [data-theme="dark"] .sap-badge { color: #60a5fa; border-color: rgba(96,165,250,0.3); background: rgba(96,165,250,0.1); } /* SAP stat accent strip */ .sap-strip { background: linear-gradient(90deg, #0070f3, #0041b3); padding: 1px; border-radius: var(--radius-md); } .sap-strip > * { border-radius: calc(var(--radius-md) - 1px); } /* ════════════════════════════════════════════════════════════════ SKELETON LOADING ════════════════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75% ); background-size: 200% 100%; border-radius: var(--radius-sm); animation: shimmer 1.5s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ════════════════════════════════════════════════════════════════ UTILITIES ════════════════════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between{ justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); font-size: 0.875rem; } .text-accent { color: var(--accent); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.78rem; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .divider { height: 1px; background: var(--border); margin: 24px 0; } .rounded-full { border-radius: 9999px; } .w-full { width: 100%; } .hidden { display: none !important; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } /* Glow highlight on focus */ .focus-ring:focus { outline: none; box-shadow: var(--shadow-glow); } /* ════════════════════════════════════════════════════════════════ PRISM CODE HIGHLIGHT OVERRIDE ════════════════════════════════════════════════════════════════ */ pre[class*="language-"] { background: #0d1117 !important; border-radius: var(--radius-md) !important; font-family: var(--font-mono) !important; font-size: 0.875rem !important; margin: 18px 0 !important; border: 1px solid #21262d !important; } code[class*="language-"] { font-family: var(--font-mono) !important; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(3,1fr); } .footer__grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .lesson-layout { grid-template-columns: 1fr; } .lesson-sidebar { display: none; } .dashboard-layout { grid-template-columns: 1fr; } /* Nav becomes a fixed slide-in drawer on mobile — JS in dashboard-nav.php handles toggle */ .dashboard-nav { display: block; position: fixed !important; top: 0; left: 0; width: 270px; height: 100vh !important; z-index: 400; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 24px rgba(0,0,0,.18); overflow-y: auto; padding-top: 0 !important; } .dashboard-nav.dash-open { transform: translateX(0); } .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-content { padding: 24px; } } @media (max-width: 768px) { :root { --nav-h: 86px; } .grid-3 { grid-template-columns: repeat(2,1fr); gap: 16px; } .grid-2 { grid-template-columns: 1fr; } .nav__links { display: none; } .nav__search { display: none; } .nav__hamburger { display: flex; } .nav__inner { height: 58px; padding: 0 14px; } .nav__logo { margin-right: 8px; } .nav__logo-text { font-size: 1.08rem; } .nav__subnav-scroll { justify-content: flex-start; min-height: 44px; padding: 7px 44px 8px; gap: 7px; } .nav__subnav-cue { display: flex; } .nav__subnav-link { min-height: 30px; padding: 6px 11px; font-size: .76rem; } .section { padding: 56px 0; } .section--sm{ padding: 36px 0; } .hero { padding: 68px 0 60px; } .lesson-main { padding: 22px; } .auth-card { padding: 32px 24px; } body::before { display: none; } /* remove grid texture on mobile for perf */ } @media (max-width: 480px) { .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .hero__cta { flex-direction: column; } .btn--lg { width: 100%; justify-content: center; } .container { padding: 0 16px; } .auth-card { padding: 28px 20px; border-radius: var(--radius-lg); } .nav__actions .btn { display: none; } .nav__logo-icon { width: 34px; height: 34px; } .theme-toggle { width: 34px; height: 34px; } } /* ════════════════════════════════════════════════════════════════ SCROLL BAR STYLING ════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ════════════════════════════════════════════════════════════════ SELECTION ════════════════════════════════════════════════════════════════ */ ::selection { background: var(--accent-light); color: var(--accent-text); } /* ════════════════════════════════════════════════════════════════ SHARED POST PAGE STYLES (used by blog/show.php AND updates/show.php) ════════════════════════════════════════════════════════════════ */ .post-page { min-height: 100vh; } /* Hero */ .post-hero { position: relative; padding: 56px 0 48px; overflow: hidden; } .post-hero__img { position: absolute; inset: 0; } .post-hero__img img { width:100%;height:100%;object-fit:cover; } .post-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(5,30,20,0.72),rgba(5,30,20,0.88)); } .post-hero__content { position: relative; z-index: 1; } .post-hero__title { color: #fff; font-size: clamp(1.5rem,4vw,2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 20px; max-width: 820px; text-shadow: 0 2px 16px rgba(0,0,0,.3); } .post-hero__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.88); } .post-hero__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.35); flex-shrink: 0; } .post-hero__avatar--initials { display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.2);font-weight:800;font-size:1rem; } /* Breadcrumb */ .post-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(255,255,255,.65); margin-bottom: 18px; flex-wrap: wrap; } .post-breadcrumb a { color:rgba(255,255,255,.65);transition:color var(--transition); } .post-breadcrumb a:hover { color:#fff; } .post-breadcrumb svg { flex-shrink:0;opacity:.5; } /* Category pill */ .post-category-pill { display: inline-block; padding: 4px 14px; background: var(--accent); color: #fff; border-radius: 50px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; text-decoration: none; } /* Share buttons */ .post-share { display:flex;align-items:center;gap:6px; } .post-share__btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all var(--transition); cursor: pointer; } .post-share__btn:hover { background:rgba(255,255,255,.3);color:#fff;transform:translateY(-2px); } /* Post layout */ .post-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; padding-bottom: 64px; } /* Article */ .post-article { min-width: 0; } .post-ad { border-radius:var(--radius-md);overflow:hidden;text-align:center; } .post-ad--top { margin-bottom:32px; } .post-ad--mid { margin:40px 0; } .post-ad--bottom { margin-top:40px; } /* Prose */ .prose-content { font-size:1.05rem;line-height:1.9;color:var(--text-secondary); } .prose-content h2 { font-size:1.45rem;font-weight:700;color:var(--text-primary);margin:36px 0 14px;padding-top:8px;border-top:1px solid var(--border) } .prose-content h3 { font-size:1.2rem;font-weight:700;color:var(--text-primary);margin:28px 0 10px } .prose-content h4 { font-size:1rem;font-weight:700;color:var(--text-primary);margin:22px 0 8px } .prose-content p { margin-bottom:20px } .prose-content ul,.prose-content ol { margin:14px 0 20px 26px } .prose-content li { margin-bottom:7px } .prose-content strong { color:var(--text-primary);font-weight:700 } .prose-content a { color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:500 } .prose-content a:hover { color:var(--accent-hover) } .prose-content a.btn { color: #fff; text-decoration: none; text-underline-offset: 0; font-weight: 700; } .prose-content a.btn:hover, .prose-content a.btn:focus-visible { color: #fff; } .prose-content blockquote { border-left:4px solid var(--accent);padding:16px 20px;background:var(--accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;color:var(--accent-text);font-style:italic } .prose-content img { max-width:100%;border-radius:var(--radius-md);margin:24px 0;border:1px solid var(--border) } .prose-content pre { background:#0d1117;border-radius:var(--radius-md);padding:20px;overflow-x:auto;font-family:var(--font-mono);font-size:.875rem;color:#e6edf3;margin:22px 0;border:1px solid #21262d } .prose-content code { font-family:var(--font-mono);background:var(--bg-secondary);color:var(--accent);padding:2px 7px;border-radius:4px;font-size:.875em } .prose-content pre code { background:none;padding:0;color:inherit;font-size:inherit } .prose-content table { width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem } .prose-content th { background:var(--bg-secondary);padding:11px 16px;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--border);color:var(--text-muted) } .prose-content td { padding:11px 16px;border-bottom:1px solid var(--border) } .prose-content tr:last-child td { border-bottom:none } .prose-content hr { border:none;border-top:1px solid var(--border);margin:36px 0 } /* Tags */ .post-tags { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:36px 0;padding-top:24px;border-top:1px solid var(--border) } .post-tags__label { font-size:.8rem;font-weight:700;color:var(--text-muted);margin-right:4px } /* Author card */ .post-author-card { display:flex;gap:18px;align-items:flex-start;padding:24px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin:36px 0 } .post-author-card__avatar { width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--border) } .post-author-card__avatar--initials { display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--accent-text);font-weight:800;font-size:1.4rem } .post-author-card__name { font-weight:700;font-size:1rem;margin-bottom:6px } .post-author-card__bio { font-size:.875rem;color:var(--text-muted);line-height:1.65 } /* Related */ .post-related { margin-top:48px;padding-top:32px;border-top:1px solid var(--border) } .post-related__title { font-size:1.25rem;font-weight:700;margin-bottom:20px } .post-related__grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,280px));gap:18px;justify-content:start } .post-related__card { text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition) } .post-related__card:hover { box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border-strong) } .post-related__card img { width:100%;aspect-ratio:16/9;object-fit:cover } .post-related__card-placeholder { aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--bg-secondary) } .post-related__card-body { padding:14px } .post-related__card-title { font-size:.875rem;font-weight:600;line-height:1.4;margin-bottom:6px } .post-related__card-meta { font-size:.75rem;color:var(--text-muted) } /* Sidebar */ .post-sidebar { position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:20px;align-self:start } .post-sidebar__ad { background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-align:center;min-height:80px } .post-sidebar__toc { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px } .post-sidebar__toc-title { display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px } #toc-nav a { display:block;font-size:.84rem;color:var(--text-secondary);padding:5px 0 5px 10px;border-left:2px solid transparent;text-decoration:none;transition:all var(--transition);line-height:1.4 } #toc-nav a:hover,#toc-nav a.toc-active { color:var(--accent);border-left-color:var(--accent) } #toc-nav a.toc-active { font-weight:600 } #toc-nav a.toc-h3 { padding-left:22px;font-size:.8rem } .post-sidebar__more { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px } .post-sidebar__more-title { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px } .post-sidebar__more-item { display:block;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--border);transition:color var(--transition) } .post-sidebar__more-item:last-of-type { border-bottom:none } .post-sidebar__more-item:hover .post-sidebar__more-title-text { color:var(--accent) } .post-sidebar__more-title-text { font-size:.85rem;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:3px;transition:color var(--transition) } .post-sidebar__more-date { font-size:.75rem;color:var(--text-muted) } @media (max-width:1024px) { .post-layout { grid-template-columns:1fr!important; } .post-sidebar { position:static; } } @media (max-width:600px) { .post-hero { padding:40px 0 32px; } .post-hero__title { font-size:1.4rem; } .post-share { display:none; } .prose-content { font-size:.975rem; } } /* ════════════════════════════════════════════════════════════════ HOMEPAGE — HERO (Theme-aware, clean redesign) ════════════════════════════════════════════════════════════════ */ /* ── Base shell ── */ .hero--home { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; /* Reduced top padding — banner merges into same bg zone */ padding: 20px 0 64px; background: #020c14; } /* ── LIGHT THEME override ── */ [data-theme="light"] .hero--home { background: #f0fdf8; } /* ── Mesh gradients (dark) ── */ .hero--home::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 75% 35%, rgba(13,110,86,0.40) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 18% 75%, rgba(5,150,105,0.25) 0%, transparent 55%); z-index: 0; transition: opacity .4s ease; } [data-theme="light"] .hero--home::before { background: radial-gradient(ellipse 70% 55% at 75% 35%, rgba(13,110,86,0.12) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 18% 75%, rgba(5,150,105,0.08) 0%, transparent 55%); } /* ── Grid texture ── */ .hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(13,110,86,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,110,86,0.07) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%); } [data-theme="light"] .hero__grid { background-image: linear-gradient(rgba(13,110,86,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(13,110,86,0.05) 1px, transparent 1px); } /* ── Orbs ── */ .hero__orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; } .hero__orb--1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(13,110,86,0.22) 0%, transparent 70%); top: -100px; right: -60px; animation: heroOrb 10s ease-in-out infinite; } .hero__orb--2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(5,150,105,0.18) 0%, transparent 70%); bottom: -60px; left: 4%; animation: heroOrb 13s ease-in-out infinite reverse 2s; } .hero__orb--3 { width: 160px; height: 160px; background: radial-gradient(circle, rgba(110,231,183,0.10) 0%, transparent 70%); top: 35%; left: 42%; animation: heroOrb 8s ease-in-out infinite 1s; } [data-theme="light"] .hero__orb--1 { background: radial-gradient(circle, rgba(13,110,86,0.10) 0%, transparent 70%); } [data-theme="light"] .hero__orb--2 { background: radial-gradient(circle, rgba(5,150,105,0.08) 0%, transparent 70%); } [data-theme="light"] .hero__orb--3 { background: radial-gradient(circle, rgba(110,231,183,0.06) 0%, transparent 70%); } @keyframes heroOrb { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.05); } } /* ── Stars (dark only) ── */ .hero__stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: 0; animation: starBlink var(--dur, 3s) ease-in-out infinite var(--delay, 0s); } [data-theme="light"] .hero__star { display: none; } @keyframes starBlink { 0%,100% { opacity: 0; } 50% { opacity: var(--op, 0.7); } } /* ── Content wrapper ── */ .hero__wrap { position: relative; z-index: 10; width: 100%; } /* ── Two-column ── */ .hero__layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } /* ══════ LEFT COLUMN ══════ */ /* Live badge */ .hero__live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 28px; width: fit-content; /* dark */ background: rgba(13,110,86,0.18); border: 1px solid rgba(13,110,86,0.40); color: #6ee7b7; } [data-theme="light"] .hero__live { background: rgba(13,110,86,0.08); border: 1px solid rgba(13,110,86,0.25); color: #065f46; } .hero__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); animation: liveDot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes liveDot { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.22); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } } /* Headline */ .hero__headline { font-size: clamp(2.3rem, 5.2vw, 3.8rem); font-weight: 900; line-height: 1.14; letter-spacing: -0.035em; margin-bottom: 22px; overflow: visible; /* dark */ color: #f1f5f9; } [data-theme="light"] .hero__headline { color: #0f172a; } .hero__headline-line2 { display: inline-block; line-height: 1.12; padding-bottom: .08em; background: linear-gradient(135deg, #6ee7b7 0%, #34d399 40%, #059669 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% auto; animation: gradMove 5s ease infinite; } [data-theme="light"] .hero__headline-line2 { background: linear-gradient(135deg, #059669 0%, #0d6e56 60%, #064e3b 100%); -webkit-background-clip: text; background-clip: text; } @keyframes gradMove { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Sub */ .hero__sub { font-size: 1.05rem; line-height: 1.75; margin-bottom: 34px; max-width: 500px; color: rgba(241,245,249,0.75); } [data-theme="light"] .hero__sub { color: #374151; } .hero__sub strong { font-weight: 700; color: #34d399; } [data-theme="light"] .hero__sub strong { color: #059669; } /* CTA row */ .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; } .hero__btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: linear-gradient(135deg, #0d6e56, #059669); color: #fff; border-radius: 9px; font-size: .88rem; font-weight: 700; text-decoration: none; box-shadow: 0 3px 14px rgba(13,110,86,0.38); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; width: auto; } .hero__btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform .5s ease; } .hero__btn-primary:hover::after { transform: translateX(100%); } .hero__btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(13,110,86,0.55); } .hero__btn-yt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 9px; font-size: .88rem; font-weight: 600; text-decoration: none; transition: all .2s ease; width: auto; /* dark */ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); } [data-theme="light"] .hero__btn-yt { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.12); color: #1f2937; } .hero__btn-yt:hover { background: rgba(255,0,0,0.12); border-color: rgba(255,0,0,0.35); color: #fff; transform: translateY(-2px); } [data-theme="light"] .hero__btn-yt:hover { color: #ff2020; } .hero__btn-yt svg { color: #ff3333; flex-shrink: 0; } /* Divider */ .hero__divider { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .hero__divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); } [data-theme="light"] .hero__divider-line { background: rgba(0,0,0,0.10); } .hero__divider-text { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.30); } [data-theme="light"] .hero__divider-text { color: #9ca3af; } /* Stats row */ .hero__stats { display: flex; gap: 28px; flex-wrap: wrap; } .hero__stat-item { display: flex; flex-direction: column; gap: 3px; } .hero__stat-num { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -.03em; line-height: 1; } [data-theme="light"] .hero__stat-num { color: #0f172a; } .hero__stat-num span { color: #34d399; } [data-theme="light"] .hero__stat-num span { color: #059669; } .hero__stat-label { font-size: .67rem; font-weight: 600; color: rgba(255,255,255,0.38); letter-spacing: .07em; text-transform: uppercase; } [data-theme="light"] .hero__stat-label { color: #6b7280; } /* ══════ RIGHT COLUMN ══════ */ .hero__right { display: flex; flex-direction: column; gap: 14px; position: relative; } /* Floating notification pills */ .hero__notif, .hero__notif2 { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 50px; font-size: .73rem; font-weight: 600; white-space: nowrap; z-index: 20; pointer-events: none; /* dark */ background: rgba(2,12,20,0.85); border: 1px solid rgba(13,110,86,0.40); color: rgba(255,255,255,0.85); } [data-theme="light"] .hero__notif, [data-theme="light"] .hero__notif2 { background: rgba(255,255,255,0.95); border: 1px solid rgba(13,110,86,0.25); color: #1f2937; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .hero__notif { top: -18px; right: 0; animation: pillFloat 4s ease-in-out infinite; } .hero__notif2 { bottom: -18px; left: 0; animation: pillFloat 5s ease-in-out infinite 1.8s; } @keyframes pillFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .hero__notif-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: liveDot 2s infinite; } .hero__notif-text strong, .hero__notif2-text strong { color: #34d399; } [data-theme="light"] .hero__notif-text strong, [data-theme="light"] .hero__notif2-text strong { color: #059669; } .hero__notif2-icon { font-size: .9rem; line-height: 1; } /* ── Main course card ── */ .hero__course-card { border-radius: 16px; padding: 22px 20px; position: relative; overflow: hidden; transition: transform .3s ease; /* dark */ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); } [data-theme="light"] .hero__course-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .hero__course-card:hover { transform: translateY(-3px); } .hero__course-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #059669, #34d399, #059669); background-size: 200%; animation: gradMove 3s ease infinite; } .hero__cc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 50px; font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; /* dark */ background: rgba(13,110,86,0.22); border: 1px solid rgba(13,110,86,0.35); color: #6ee7b7; } [data-theme="light"] .hero__cc-tag { background: rgba(13,110,86,0.08); border: 1px solid rgba(13,110,86,0.2); color: #065f46; } .hero__cc-tag svg { flex-shrink: 0; } .hero__cc-title { font-size: 1rem; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: #f1f5f9; } [data-theme="light"] .hero__cc-title { color: #0f172a; } .hero__cc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .76rem; margin-bottom: 14px; color: rgba(255,255,255,0.45); } [data-theme="light"] .hero__cc-meta { color: #6b7280; } .hero__cc-meta span { display: inline-flex; align-items: center; gap: 4px; } .hero__cc-progress-label { display: flex; justify-content: space-between; font-size: .7rem; margin-bottom: 6px; color: rgba(255,255,255,0.40); } [data-theme="light"] .hero__cc-progress-label { color: #9ca3af; } .hero__cc-progress-label span:last-child { color: #34d399; font-weight: 700; } [data-theme="light"] .hero__cc-progress-label span:last-child { color: #059669; } .hero__cc-progress-bar { height: 5px; border-radius: 50px; overflow: hidden; margin-bottom: 14px; background: rgba(255,255,255,0.08); } [data-theme="light"] .hero__cc-progress-bar { background: #e5e7eb; } .hero__cc-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #059669, #34d399); border-radius: 50px; animation: progressAnim 1.4s ease .5s forwards; } @keyframes progressAnim { to { width: 72%; } } .hero__cc-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hero__cc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: .8rem; font-weight: 700; text-decoration: none; transition: all .2s ease; /* dark */ background: rgba(13,110,86,0.22); border: 1px solid rgba(13,110,86,0.40); color: #6ee7b7; } [data-theme="light"] .hero__cc-btn { background: rgba(13,110,86,0.08); border: 1px solid rgba(13,110,86,0.25); color: #065f46; } .hero__cc-btn:hover { background: rgba(13,110,86,0.45); color: #fff; } [data-theme="light"] .hero__cc-btn:hover { background: #059669; color: #fff; border-color: #059669; } .hero__cc-free { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 50px; font-size: .72rem; font-weight: 800; /* dark */ background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25); color: #4ade80; } [data-theme="light"] .hero__cc-free { background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.2); color: #059669; } /* ── 2×2 mini cards (SVG icons, no emoji) ── */ .hero__cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hero__mini-card { display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none; transition: all .2s ease; /* dark */ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } [data-theme="light"] .hero__mini-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .hero__mini-card:hover { border-color: rgba(13,110,86,0.45); background: rgba(13,110,86,0.10); transform: translateY(-2px); } [data-theme="light"] .hero__mini-card:hover { border-color: #059669; background: rgba(5,150,105,0.04); box-shadow: 0 4px 16px rgba(5,150,105,0.1); } .hero__mini-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; } .hero__mini-label { font-size: .8rem; font-weight: 700; margin-bottom: 2px; color: rgba(255,255,255,0.88); } [data-theme="light"] .hero__mini-label { color: #111827; } .hero__mini-count { font-size: .68rem; color: rgba(255,255,255,0.35); } [data-theme="light"] .hero__mini-count { color: #9ca3af; } /* ── Company strip ── */ .hero__companies { margin-top: 52px; position: relative; z-index: 10; } .hero__companies-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; text-align: center; color: rgba(255,255,255,0.25); } [data-theme="light"] .hero__companies-label { color: #9ca3af; } .hero__companies-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .hero__company-pill { padding: 5px 14px; border-radius: 50px; font-size: .76rem; font-weight: 600; transition: all .2s ease; /* dark */ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.45); } [data-theme="light"] .hero__company-pill { background: #fff; border: 1px solid #d1fae5; color: #374151; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .hero__company-pill:hover { border-color: rgba(13,110,86,0.5); color: #6ee7b7; background: rgba(13,110,86,0.1); } [data-theme="light"] .hero__company-pill:hover { border-color: #059669; color: #065f46; background: rgba(5,150,105,0.06); } /* ── Wave ── */ .hero__wave { position: absolute; bottom: -2px; left: 0; right: 0; line-height: 0; z-index: 10; pointer-events: none; } .hero__wave svg { width: 100%; height: 64px; display: block; } /* ── Responsive ── */ @media(max-width:1100px){ .hero__layout { grid-template-columns: 1fr 1fr; gap: 36px; } } @media(max-width:900px){ .hero__layout { grid-template-columns: 1fr; } .hero--home { padding: 48px 0 48px; min-height: auto; } .hero__sub { max-width: 100%; } .hero__right { max-width: 460px; margin: 0 auto; width: 100%; } .hero__notif { right: 0; } .hero__notif2 { left: 0; } } @media(max-width:640px){ .hero--home { padding: 40px 0 40px; } .hero__headline { font-size: clamp(2rem, 8vw, 2.6rem); } .hero__sub { font-size: .96rem; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__btn-primary, .hero__btn-yt { width: 100%; justify-content: center; align-self: auto; } .hero__stats { gap: 18px; } .hero__notif, .hero__notif2 { display: none; } .hero__companies-strip { gap: 6px; } } @media(max-width:400px){ .hero__cards-row { grid-template-columns: 1fr; } .hero__headline { font-size: 1.8rem; } } /* ════════════════════════════════════════════════════════════════ STATS BAR ════════════════════════════════════════════════════════════════ */ .stats-bar { background:var(--bg-card);border-bottom:1px solid var(--border); } .stats-bar__grid { display:grid;grid-template-columns:repeat(4,1fr); } .stat-item { padding:22px 20px;text-align:center;border-right:1px solid var(--border);transition:background var(--transition); } .stat-item:last-child { border-right:none; } .stat-item:hover { background:var(--bg-secondary); } .stat-item__num { font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;letter-spacing:-.03em;color:var(--accent);line-height:1;margin-bottom:5px; } .stat-item__label { font-size:.78rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; } /* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• CATEGORY STRIP â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• */ .cat-scroll { display:grid;grid-template-columns:repeat(5,1fr);gap:18px; } .cat-card { border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); } .cat-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent); } .cat-card--sap { border-top:3px solid #0070f3; } .cat-card__img { aspect-ratio:4/3;overflow:hidden;position:relative; } .cat-card__img img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease; } .cat-card:hover .cat-card__img img { transform:scale(1.07); } .cat-card__overlay { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.5) 100%);transition:opacity var(--transition); } .cat-card:hover .cat-card__overlay { opacity:.7; } .cat-card__body { padding:14px 16px;display:flex;flex-direction:column;gap:4px; } .cat-card__icon { width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:background var(--transition),color var(--transition); } .cat-card:hover .cat-card__icon { background:var(--accent);color:#fff; } .cat-card__title { font-size:.9rem;font-weight:700;color:var(--text-primary);margin:0; } .cat-card__sub { font-size:.75rem;color:var(--text-muted);margin:0; } /* ════════════════════════════════════════════════════════════════════════ COURSES — TABS ════════════════════════════════════════════════════════════════════════ */ .cit-tabs { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-secondary) 60%, var(--bg-card)); border-radius: 20px 20px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overflow-x: auto; } .cit-tabs::-webkit-scrollbar { display: none; } .course-tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px; } .course-tab { display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--transition);white-space:nowrap; } .course-tab:hover { background:var(--bg-secondary);color:var(--text-primary); } .course-tab--active { background:var(--accent);color:#fff!important;box-shadow:0 4px 14px var(--accent-glow); } .course-panel { display:none;animation:fadeInPanel .25s ease; } .course-panel--active { display:block; } @keyframes fadeInPanel { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } .course-card__stars { font-size:.82rem;color:#f59e0b;margin-bottom:8px; } /* ════════════════════════════════════════════════════════════════════════ FEATURES SECTION ════════════════════════════════════════════════════════════════════════ */ .features-section { position:relative;overflow:hidden; } .features-section__bg { position:absolute;inset:0;background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-secondary) 100%);z-index:0; } [data-theme="dark"] .features-section__bg { background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%); } .features-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; } .features-layout__media { display:flex;align-items:center;justify-content:center; } .yt-channel-card { position:relative;width:100%;max-width:340px;margin:0 auto; } .yt-channel-card__inner { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px 28px;box-shadow:var(--shadow-lg);text-align:center;position:relative;z-index:1; } .yt-channel-card__badge { display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(255,0,0,.2);margin-bottom:16px; } .yt-channel-card__logo { width:80px;height:auto;margin:0 auto 12px;border-radius:var(--radius-sm); } .yt-channel-card__name { font-size:1.5rem;font-weight:900;letter-spacing:-.02em;margin-bottom:4px;color:var(--text-primary); } .yt-channel-card__name span { color:var(--accent); } .yt-channel-card__handle { font-size:.875rem;color:var(--text-muted);margin-bottom:20px; } .yt-channel-card__stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .yt-channel-stat__num { font-size:1.2rem;font-weight:900;color:var(--accent);letter-spacing:-.02em; } .yt-channel-stat__label { font-size:.7rem;color:var(--text-muted);font-weight:500; } .yt-channel-card__float { position:absolute;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;font-size:.78rem;font-weight:700;color:var(--accent);box-shadow:var(--shadow-sm);white-space:nowrap;z-index:2; } .yt-channel-card__float--1 { top:-16px;right:-20px;animation:floatBadge 4s ease-in-out infinite; } .yt-channel-card__float--2 { bottom:-16px;left:-20px;animation:floatBadge 5s ease-in-out infinite 1s; } @keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } .feature-list { display:flex;flex-direction:column;gap:16px; } .feature-item { display:flex;gap:16px;align-items:flex-start;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition); } .feature-item:hover { box-shadow:var(--shadow-sm);transform:translateX(4px);border-color:var(--border-strong); } .feature-item__icon { width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center; } .feature-item__body h4 { font-size:.95rem;font-weight:700;margin-bottom:4px;color:var(--text-primary); } .feature-item__body p { font-size:.83rem;color:var(--text-muted);margin:0;line-height:1.6; } /* ════════════════════════════════════════════════════════════════════════ TESTIMONIALS ════════════════════════════════════════════════════════════════════════ */ .testimonials-section { background:var(--bg-secondary); } .testimonials-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } .testimonial-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;position:relative;transition:box-shadow var(--transition),transform var(--transition); } .testimonial-card:hover { box-shadow:var(--shadow-md);transform:translateY(-3px); } .testimonial-card__quote { font-size:3rem;font-weight:900;line-height:1;margin-bottom:12px;color:var(--accent);opacity:.3; } .testimonial-card__text { font-size:.9rem;line-height:1.75;color:var(--text-secondary);margin-bottom:20px; } .testimonial-card__author { display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border); } .testimonial-card__avatar { width:40px;height:40px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:.875rem;font-weight:800;display:flex;align-items:center;justify-content:center; } .testimonial-card__name { font-size:.875rem;font-weight:700;color:var(--text-primary);margin-bottom:2px; } .testimonial-card__role { font-size:.75rem;color:var(--text-muted); } .testimonial-card__stars { margin-left:auto;color:#f59e0b;font-size:.85rem;flex-shrink:0; } /* ════════════════════════════════════════════════════════════════════════ FAQ ════════════════════════════════════════════════════════════════════════ */ .faq-section { background:var(--bg-primary); } .faq-layout { display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start; } .faq-layout__header { position:sticky;top:84px; } .faq-list { display:flex;flex-direction:column;gap:10px; } .faq-item { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition); } .faq-item[open] { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow); } .faq-item__q { padding:18px 22px;font-size:.95rem;font-weight:700;color:var(--text-primary);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background var(--transition); } .faq-item__q::-webkit-details-marker { display:none; } .faq-item__q::after { content:"+";font-size:1.3rem;font-weight:300;color:var(--accent);flex-shrink:0;transition:transform .25s ease; } .faq-item[open] .faq-item__q::after { transform:rotate(45deg); } .faq-item:hover .faq-item__q { background:var(--bg-secondary); } .faq-item__a { padding:0 22px 18px;font-size:.875rem;color:var(--text-secondary);line-height:1.75;border-top:1px solid var(--border);padding-top:14px; } /* ════════════════════════════════════════════════════════════════════════ SAP CTA BANNER ════════════════════════════════════════════════════════════════════════ */ .sap-cta-banner { position:relative;overflow:hidden;padding:64px 0; } .sap-cta-banner__bg { position:absolute;inset:0;background:linear-gradient(135deg,#0070f3 0%,#0058cc 50%,#003380 100%);z-index:0; } .sap-cta-banner__bg::before { content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:24px 24px; } .sap-cta-banner .container { position:relative;z-index:1; } .sap-cta-banner__inner { display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap; } .sap-cta-banner__left { flex:1;min-width:280px; } .sap-cta-banner__right { display:flex;flex-direction:column;align-items:flex-end;gap:20px; } .sap-cta-banner__badges { display:flex;flex-direction:column;gap:8px; } .sap-badge { display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50px;font-size:.82rem;font-weight:600;color:#fff;backdrop-filter:blur(8px); } /* ════════════════════════════════════════════════════════════════════════ PLACEMENT TICKER ════════════════════════════════════════════════════════════════════════ */ .placement-ticker { background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden; } .placement-ticker .container { display:flex;align-items:center;gap:20px; } .placement-ticker__label { font-size:.78rem;font-weight:700;color:var(--text-muted);white-space:nowrap;flex-shrink:0; } .placement-ticker__track { display:flex;gap:24px;overflow:hidden;flex:1;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent); } .placement-ticker__item { white-space:nowrap;font-size:.82rem;font-weight:700;color:var(--text-secondary);padding:4px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;animation:tickerScroll 25s linear infinite;flex-shrink:0;transition:color var(--transition),border-color var(--transition); } .placement-ticker__item:hover { color:var(--accent);border-color:var(--accent); } @keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .content-card__title { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: var(--text-primary); text-decoration: none; display: block; } /* ════════════════════════════════════════════════════════════════════════ HERO — UPDATES TICKER BOX ════════════════════════════════════════════════════════════════════════ */ .hero__updates-box { border-radius: 16px; overflow: hidden; position: relative; /* dark */ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); } [data-theme="light"] .hero__updates-box { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .hero__updates-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #059669, #34d399, #059669); background-size: 200%; animation: gradMove 3s ease infinite; } /* Header */ .hero__updates-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); } [data-theme="light"] .hero__updates-header { border-bottom-color: #f3f4f6; } .hero__updates-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); animation: liveDot 2s ease-in-out infinite; } .hero__updates-title { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,0.7); flex: 1; } [data-theme="light"] .hero__updates-title { color: #374151; } /* Track wrapper — fixed height, clipped */ .hero__updates-track-wrap { height: 192px; overflow: hidden; position: relative; /* Fade top & bottom */ mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); } .hero__updates-track-wrap:hover .hero__updates-track { animation-play-state: paused; } /* Scrolling list */ .hero__updates-track { list-style: none; margin: 0; padding: 6px 0; animation: updatesScroll 18s linear infinite; } .hero__updates-track.no-scroll { animation: none; } @keyframes updatesScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } /* Each item */ .hero__update-item { padding: 2px 0; } .hero__update-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; text-decoration: none; transition: background .15s ease; border-radius: 0; } .hero__update-link:hover { background: rgba(13,110,86,0.08); } [data-theme="light"] .hero__update-link:hover { background: rgba(5,150,105,0.05); } .hero__update-type { font-size: .63rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; min-width: 44px; /* color set inline */ } .hero__update-text { font-size: .8rem; font-weight: 500; line-height: 1.4; flex: 1; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="light"] .hero__update-text { color: #374151; } .hero__update-link:hover .hero__update-text { color: rgba(255,255,255,0.95); } [data-theme="light"] .hero__update-link:hover .hero__update-text { color: #059669; } .hero__update-arrow { color: rgba(255,255,255,0.25); flex-shrink: 0; } [data-theme="light"] .hero__update-arrow { color: #d1d5db; } .hero__update-link:hover .hero__update-arrow { color: #34d399; } /* Footer */ .hero__updates-footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: flex-end; } [data-theme="light"] .hero__updates-footer { border-top-color: #f3f4f6; } .hero__updates-all { display: inline-flex; align-items: center; gap: 4px; font-size: .73rem; font-weight: 600; text-decoration: none; color: #34d399; transition: color .2s, gap .2s; } [data-theme="light"] .hero__updates-all { color: #059669; } .hero__updates-all:hover { gap: 7px; } /* ════════════════════════════════════════════════════════════════════════ FLOATING COURSE POPUP WIDGET ════════════════════════════════════════════════════════════════════════ */ #t6PopupHost { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } /* Launcher button */ #t6PopupLauncher { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #059669 0%, #0d6e56 100%); box-shadow: 0 6px 20px rgba(5,150,105,0.45); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s ease, box-shadow .25s ease; position: relative; } #t6PopupLauncher:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(5,150,105,0.55); } #t6PopupLauncher svg { width: 22px; height: 22px; stroke: #fff; fill: none; } #t6PopupLauncher::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(5,150,105,0.4); animation: t6Pulse 2.2s ease-in-out infinite; } @keyframes t6Pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.18); opacity: .2; } } .t6-badge-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; border: 2px solid #020c14; font-size: .55rem; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; animation: t6BadgePop .4s cubic-bezier(0.34,1.56,0.64,1) 1.5s both; } [data-theme="light"] .t6-badge-dot { border-color: #fff; } @keyframes t6BadgePop { from { transform: scale(0); } to { transform: scale(1); } } /* Popup card */ #t6PopupCard { width: 296px; border-radius: 16px; overflow: hidden; transform: translateY(24px) scale(0.93); opacity: 0; transition: transform .36s cubic-bezier(0.34,1.56,0.64,1), opacity .28s ease; pointer-events: none; /* dark */ background: #0d1b26; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 20px 56px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.2); } [data-theme="light"] #t6PopupCard { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08); } #t6PopupCard.t6-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; } #t6PopupCard.t6-hidden { transform: translateY(24px) scale(0.9); opacity: 0; pointer-events: none; } /* Card header */ .t6-popup-header { background: linear-gradient(135deg, #0d6e56 0%, #059669 100%); padding: 12px 14px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .t6-popup-header-left { display: flex; align-items: center; gap: 9px; } .t6-popup-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .t6-popup-avatar img { width: 100%; height: 100%; object-fit: cover; } .t6-popup-hname { color:#fff; font-size:.8rem; font-weight:700; line-height:1.2; } .t6-popup-hsub { color:rgba(255,255,255,.7); font-size:.67rem; line-height:1.2; margin-top:1px; } /* Avatar dropdown */ .nav__avatar { position: relative; } .nav__avatar-btn { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); background: var(--accent-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); font-weight: 700; font-size: 0.875rem; color: var(--accent); } .nav__avatar-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .nav__avatar-btn img { width: 100%; height: 100%; object-fit: cover; } .t6-popup-close { background: rgba(255,255,255,0.15); border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s; } .t6-popup-close:hover { background: rgba(255,255,255,0.3); } .t6-popup-close svg { width: 13px; height: 13px; stroke: #fff; fill: none; } /* Card tabs */ .t6-popup-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.07); } [data-theme="light"] .t6-popup-tabs { border-bottom-color: #e5e7eb; } .t6-popup-tab { flex: 1; padding: 9px 6px; font-size: .72rem; font-weight: 700; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } [data-theme="light"] .t6-popup-tab { color: #9ca3af; } .t6-popup-tab.t6-tab-active { color: #34d399; border-bottom-color: #34d399; } [data-theme="light"] .t6-popup-tab.t6-tab-active { color: #059669; border-bottom-color: #059669; } /* Card panels */ .t6-popup-panel { display: none; } .t6-popup-panel.t6-panel-active { display: block; } /* Course list */ .t6-course-list { list-style: none; margin: 0; padding: 6px 0; max-height: 220px; overflow-y: auto; } .t6-course-list::-webkit-scrollbar { width: 3px; } .t6-course-list::-webkit-scrollbar-thumb { background: rgba(13,110,86,.4); border-radius: 2px; } .t6-course-item a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; transition: background .15s; } .t6-course-item a:hover { background: rgba(13,110,86,0.10); } [data-theme="light"] .t6-course-item a:hover { background: rgba(5,150,105,0.06); } .t6-course-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); } [data-theme="light"] .t6-course-thumb { background: #f3f4f6; } .t6-course-info { flex: 1; min-width: 0; } .t6-course-name { font-size: .78rem; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="light"] .t6-course-name { color: #111827; } .t6-course-meta { font-size: .67rem; color: rgba(255,255,255,.35); margin-top: 2px; } [data-theme="light"] .t6-course-meta { color: #9ca3af; } .t6-course-free { font-size: .62rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.25); } [data-theme="light"] .t6-course-free { background: rgba(5,150,105,0.08); color: #059669; border-color: rgba(5,150,105,0.2); } /* Card footer */ .t6-popup-footer { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: space-between; gap: 8px; } [data-theme="light"] .t6-popup-footer { border-top-color: #e5e7eb; background: #f9fafb; } .t6-footer-text { font-size: .72rem; color: rgba(255,255,255,.4); } [data-theme="light"] .t6-footer-text { color: #6b7280; } .t6-footer-cta { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; background: #059669; color: #fff; font-size: .72rem; font-weight: 700; text-decoration: none; transition: background .2s, transform .15s; } .t6-footer-cta:hover { background: #047857; color: #fff; transform: translateY(-1px); } /* Mobile */ @media(max-width:480px){ #t6PopupHost { bottom: 16px; right: 12px; } #t6PopupCard { width: calc(100vw - 24px); max-width: 296px; } } /* ════════════════════════════════════════════════════════════════════════ COMPREHENSIVE MOBILE RESPONSIVENESS — Homepage & Global Breakpoints: 1100px | 900px | 768px | 640px | 480px | 360px ════════════════════════════════════════════════════════════════════════ */ /* ── 1100px — Large tablet / small laptop ── */ @media (max-width: 1100px) { .hero__layout { grid-template-columns: 1fr 1fr; gap: 32px; } .hero__headline { font-size: clamp(2.1rem, 4.5vw, 3.2rem); } .hero__updates-box { max-height: 340px; } } /* ── 900px — Tablet portrait, hero goes single column ── */ @media (max-width: 900px) { .hero--home { padding: 44px 0 48px; } .hero__layout { grid-template-columns: 1fr; gap: 32px; } .hero__headline { font-size: clamp(1.9rem, 6vw, 2.8rem); } .hero__sub { font-size: .97rem; max-width: 100%; } .hero__right { max-width: 520px; width: 100%; margin: 0 auto; } /* Course tabs — scroll on tablet */ .course-tabs__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; } .course-tabs__nav::-webkit-scrollbar { height: 2px; } /* Features layout */ .features-layout { grid-template-columns: 1fr; gap: 32px; } .features-layout__media { order: 2; } /* Stats bar */ .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr 1fr; } /* FAQ */ .faq-grid { grid-template-columns: 1fr; } } /* ── 768px — General tablet / nav collapses ── */ @media (max-width: 768px) { /* Nav adjustments */ .nav__links { display: none; } .nav__search { display: none; } .nav__hamburger { display: flex; } /* Section spacing */ .section { padding: 48px 0; } .section--sm { padding: 28px 0; } /* Hero */ .hero--home { padding: 40px 0 44px; } .hero__headline { font-size: clamp(1.8rem, 7vw, 2.5rem); } .hero__stats { gap: 16px; } .hero__stat-num { font-size: 1.3rem; } .hero__companies-strip { gap: 6px; } .hero__company-pill { font-size: .7rem; padding: 4px 10px; } /* Cards grid */ .hero__cards-row { grid-template-columns: 1fr 1fr; gap: 8px; } .hero__mini-card { padding: 11px 12px; } .hero__mini-label { font-size: .75rem; } .hero__mini-count { font-size: .64rem; } /* Updates box */ .hero__updates-track-wrap { height: 160px; } .hero__update-link { padding: 7px 12px; gap: 6px; } .hero__update-text { font-size: .76rem; } /* Course cards grid */ .courses-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .cat-scroll { gap: 8px; } .cat-card { min-width: 130px; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; } /* SAP CTA banner */ .sap-cta-banner { flex-direction: column; text-align: center; gap: 16px; } .sap-cta-banner__actions { justify-content: center; flex-wrap: wrap; } /* Popup widget */ #t6PopupCard { width: calc(100vw - 32px); max-width: 300px; } #t6PopupHost { bottom: 16px; right: 12px; } } /* ── 640px — Large phone (iPhone Pro Max, etc.) ── */ @media (max-width: 640px) { :root { --nav-h: 54px; } .container { padding: 0 16px; } /* Hero single-column, compact */ .hero--home { padding: 32px 0 40px; min-height: auto; } .hero__headline { font-size: clamp(1.7rem, 8vw, 2.3rem); letter-spacing: -.02em; } .hero__sub { font-size: .9rem; margin-bottom: 24px; } .hero__live { font-size: .66rem; padding: 5px 12px; margin-bottom: 20px; } /* Buttons — stacked on mobile */ .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; } .hero__btn-primary, .hero__btn-yt { width: 100%; justify-content: center; align-self: auto; padding: 12px 20px; } /* Stats — 2 columns */ .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .hero__stat-num { font-size: 1.25rem; } .hero__stat-label { font-size: .63rem; } /* Mini cards — 2 columns */ .hero__cards-row { grid-template-columns: 1fr 1fr; gap: 8px; } .hero__mini-icon { width: 28px; height: 28px; border-radius: 6px; } /* Updates box — more compact */ .hero__updates-track-wrap { height: 148px; } .hero__updates-header { padding: 10px 12px 8px; } .hero__updates-footer { padding: 8px 12px; } .hero__update-link { padding: 6px 12px; gap: 5px; } .hero__update-type { font-size: .6rem; min-width: 38px; } .hero__update-text { font-size: .74rem; } /* Companies strip — wrap more tightly */ .hero__companies { margin-top: 32px; } .hero__companies-strip { gap: 5px; } .hero__company-pill { font-size: .68rem; padding: 3px 8px; } /* Course section */ .courses-grid { grid-template-columns: 1fr; gap: 14px; } .course-tabs__nav { gap: 4px; padding: 0 4px; } .course-tab-btn { padding: 7px 14px; font-size: .78rem; } /* Stats bar */ .stats-bar { padding: 28px 0; } .stats-bar__grid { grid-template-columns: 1fr 1fr; gap: 16px; } .stats-bar__num { font-size: 1.8rem; } .stats-bar__label { font-size: .72rem; } /* Categories scroll */ .cat-scroll { gap: 8px; padding: 0 16px; } .cat-card { min-width: 120px; padding: 14px; } .cat-card__icon { width: 36px; height: 36px; font-size: 1.1rem; } /* Features */ .feature-list { gap: 14px; } .feature-item { gap: 12px; } .feature-item__icon { width: 36px; height: 36px; flex-shrink: 0; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; gap: 12px; } .testimonial-card { padding: 18px; } /* FAQ */ .faq-item { padding: 14px 16px; } .faq-item h3 { font-size: .92rem; } /* Section headings */ .section h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); } .section-label { font-size: .68rem; } /* Placement ticker */ .placement-ticker { padding: 12px 0; } .placement-ticker__label { font-size: .72rem; } /* Footer */ .footer__grid { grid-template-columns: 1fr; gap: 28px; } .footer__bottom { flex-direction: column; gap: 10px; text-align: center; } /* Popup */ #t6PopupHost { bottom: 12px; right: 10px; } #t6PopupLauncher { width: 46px; height: 46px; } #t6PopupCard { width: calc(100vw - 20px); max-width: 280px; } .t6-popup-tab { padding: 8px 4px; font-size: .68rem; } .t6-course-name { font-size: .74rem; } .t6-course-meta { font-size: .63rem; } } /* ── 480px — Standard phones ── */ @media (max-width: 480px) { .hero--home { padding: 28px 0 36px; } .hero__headline { font-size: clamp(1.55rem, 9vw, 2rem); } /* Mini cards — still 2 col but more compact */ .hero__mini-card { padding: 10px 10px; } .hero__mini-label { font-size: .72rem; } .hero__mini-count { font-size: .62rem; } .hero__mini-icon { width: 26px; height: 26px; } .hero__mini-icon svg { width: 13px; height: 13px; } /* Nav inner spacing */ .nav__inner { padding: 0 14px; gap: 4px; } .nav__logo-name { font-size: .88rem; } /* Ticker compact */ .hero__updates-track-wrap { height: 132px; } /* Courses grid */ .courses-grid { grid-template-columns: 1fr; } .course-card { border-radius: 12px; } /* Stats */ .stats-bar__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .stats-bar__num { font-size: 1.6rem; } /* YouTube card compact */ .yt-channel-card__inner { padding: 20px 16px; } .yt-channel-card__stats { gap: 12px; } /* Sections */ .section { padding: 36px 0; } } /* ── 360px — Minimum supported screen ── */ @media (max-width: 360px) { .hero__headline { font-size: 1.45rem; } .hero__sub { font-size: .85rem; } .hero__cards-row { grid-template-columns: 1fr 1fr; gap: 6px; } .hero__mini-card { padding: 8px; } .hero__mini-label { font-size: .68rem; } .hero__mini-count { display: none; } .hero__company-pill { display: none; } .hero__companies-strip .hero__company-pill:nth-child(-n+5) { display: inline-flex; } .nav__inner { padding: 0 10px; } .container { padding: 0 12px; } } /* ── Touch / hover media ── */ @media (hover: none) { /* Remove hover transforms on touch to prevent stuck states */ .hero__mini-card:hover { transform: none; } .btn:hover { transform: none; } .course-card:hover { transform: none; } .hero__btn-primary:hover { transform: none; } } /* ── Overflow safety — prevent horizontal scroll everywhere ── */ html, body { overflow-x: hidden; max-width: 100vw; } .hero__companies-strip, .cat-scroll, .course-tabs__nav, .placement-ticker__track, .hero__updates-track { -webkit-overflow-scrolling: touch; } /* ════════════════════════════════════════════════════════════════════════ NAV DROPDOWN MEGAS — hover menus with dropdowns ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ NAV DROPDOWN MEGAS — keyboard + hover accessible ════════════════════════════════════════════════════════════════════════ */ .nav__dropdown-wrap { position: relative; } /* Invisible bridge fills the gap so cursor can move into the dropdown */ .nav__dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 24px; background: transparent; } .nav__link--has-dropdown { display: inline-flex; align-items: center; gap: 3px; } .nav__chevron { opacity: 0.55; transition: transform .2s ease; flex-shrink: 0; } .nav__dropdown-wrap:hover .nav__chevron { transform: rotate(180deg); } .nav__mega { position: absolute; top: calc(100% + 14px); /* shifted down to sit below the bridge */ left: 50%; transform: translateX(-50%) translateY(4px); min-width: 248px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 6px; box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 500; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Invisible extension so the dropdown itself has a hover zone */ .nav__mega::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: transparent; } .nav__dropdown-wrap:hover .nav__mega, .nav__dropdown-wrap:focus-within .nav__mega { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); } .nav__mega-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: background .13s ease; } .nav__mega-item:hover { background: var(--bg-secondary); } .nav__mega-item--soon { opacity: 0.5; pointer-events: none; } .nav__mega-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); border-radius: 7px; color: var(--accent); flex-shrink: 0; } [data-theme="light"] .nav__mega-icon { background: rgba(13,110,86,0.08); } .nav__mega-title { font-size: .83rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; line-height: 1.2; } .nav__mega-sub { font-size: .71rem; color: var(--text-muted); margin-top: 1px; } .nav__mega-badge { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: .6rem; font-weight: 700; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: .04em; } .nav__mega-badge--soon { background: #f59e0b; } .nav__link--active { color: var(--accent) !important; font-weight: 700; } /* Divider between groups in mega */ .nav__mega-sep { height: 1px; background: var(--border); margin: 5px 10px; } /* ════════════════════════════════════════════════════════════════════════ HERO MARQUEE — infinite horizontal scroll for companies ════════════════════════════════════════════════════════════════════════ */ .hero__marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .hero__marquee-track { display: flex; gap: 10px; width: max-content; animation: marqueeScroll 20s linear infinite; } .hero__marquee-track:hover { animation-play-state: paused; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / 3)); } } /* Pill style stays the same */ .hero__company-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 50px; font-size: .75rem; font-weight: 600; color: rgba(255,255,255,0.82); white-space: nowrap; transition: background .15s; flex-shrink: 0; } .course-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .course-feature { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent-light) 40%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); font-size: .92rem; color: var(--text-secondary); line-height: 1.5; overflow: hidden; word-break: break-word; } .course-feature > span:last-child { min-width: 0; flex: 1; word-break: break-word; overflow-wrap: break-word; } [data-theme="light"] .hero__company-pill { background: rgba(13,110,86,0.06); border-color: rgba(13,110,86,0.15); color: var(--text-secondary); } .hero__company-pill:hover { background: rgba(255,255,255,0.12); } /* ── Hero gap: ensure zero padding at top (sticky nav = no offset needed) ── */ .hero--home { padding-top: 0 !important; padding-bottom: 60px; } .hero__wrap { padding-top: 48px; } /* Hide old companies-strip if it still exists */ .hero__companies-strip { display: none !important; } /* Nav mega responsive — hide on tablet */ @media (max-width: 1100px) { .nav__mega { min-width: 220px; } } @media (max-width: 900px) { .nav__dropdown-wrap { display: none; } } /* ════════════════════════════════════════════════════════════════════════════════════════════════ AD ZONES — AdSense placement styling ════════════════════════════════════════════════════════════════════════════════════════════════ */ .ad-zone { position: relative; margin: 32px 0; text-align: center; overflow: hidden; } .ad-zone__label { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); opacity: 0.5; margin-bottom: 6px; } .ad-zone--horizontal { max-width: 100%; } .ad-zone--square { display: flex; flex-direction: column; align-items: center; } .ad-zone--multiplex { margin: 40px 0; } .cit-tabs { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-secondary) 60%, var(--bg-card)); border-radius: 20px 20px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overflow-x: auto; } .cit-tabs::-webkit-scrollbar { display: none; } .ad-zone--inline { margin: 24px 0; } /* ════════════════════════════════════════════════════════════════════════════════════════════════ PAGE HERO — shared banner for all inner pages ════════════════════════════════════════════════════════════════════════════════════════════════ */ .page-hero { position: relative; padding: 52px 0 44px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(13,110,86,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 10% 50%, rgba(13,110,86,0.05) 0%, transparent 55%); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero__breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); margin-bottom: 16px; flex-wrap: wrap; } .page-hero__breadcrumb a { color: var(--text-muted); text-decoration: none; } .page-hero__breadcrumb a:hover { color: var(--accent); } .page-hero__breadcrumb svg { opacity: 0.4; } .page-hero__label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--accent-light); color: var(--accent); border-radius: 50px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } .page-hero__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; line-height: 1.15; } .page-hero__sub { font-size: .96rem; color: var(--text-secondary); max-width: 560px; line-height: 1.7; } .page-hero__actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════════ CONTENT GRID — main + sticky sidebar layout ════════════════════════════════════════════════════════════════ */ .content-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; } .content-grid__sidebar { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 24px; } @media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } .content-grid__sidebar { position: static; } } /* ════════════════════════════════════════════════════════════════ FILTER TABS — category/type tab strips ════════════════════════════════════════════════════════════════ */ .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 50px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); transition: all .15s ease; cursor: pointer; } .filter-tab:hover { border-color: var(--accent); color: var(--accent); } .filter-tab--active { background: var(--accent); color: #fff !important; border-color: var(--accent); } /* ════════════════════════════════════════════════════════════════ CARD SYSTEM — unified card for blog/courses/jobs/placement ════════════════════════════════════════════════════════════════ */ .content-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .content-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.10); border-color: rgba(13,110,86,0.3); } .content-card__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-secondary); } .content-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .content-card:hover .content-card__thumb img { transform: scale(1.04); } .content-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-light), var(--bg-secondary)); color: var(--accent); } .content-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; } .content-card__badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; width: fit-content; } .content-card__badge--sap { background: rgba(59,130,246,0.12); color: #3b82f6; } .content-card__badge--iot { background: rgba(16,185,129,0.12); color: #10b981; } .content-card__badge--job { background: rgba(245,158,11,0.12); color: #f59e0b; } .content-card__badge--blog { background: rgba(139,92,246,0.12); color: #8b5cf6; } .content-card__badge--course { background: rgba(13,110,86,0.12); color: var(--accent); } .content-card__badge--placement { background: rgba(239,68,68,0.12); color: #ef4444; } .content-card__badge--tech { background: rgba(6,182,212,0.12); color: #06b6d4; } .content-card__title:hover { color: var(--accent); } .content-card__excerpt { font-size: .84rem; color: var(--text-muted); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .content-card__meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .75rem; color: var(--text-muted); flex-wrap: wrap; } .content-card__meta-dot { opacity: 0.4; } .content-card__footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .grid-3 > .content-card, .grid-3 > .course-card, .grid-3 > .placement-card, .discover-grid > .content-card, .opportunity-grid > a, .opportunity-grid > .content-card { height: 100%; } .opportunity-grid { align-items: stretch; } .opportunity-grid--featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .opportunity-card { height: 100%; position: relative; } .opportunity-card--featured { border: 2px solid var(--accent); background: linear-gradient(145deg, var(--bg-card) 80%, rgba(13,110,86,.04)); } .opportunity-card__flag { position: absolute; top: 0; right: 0; z-index: 2; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800; padding: 4px 11px; border-bottom-left-radius: 8px; letter-spacing: .04em; text-transform: uppercase; } .opportunity-card__thumb { aspect-ratio: 16 / 8.5; min-height: 132px; } .opportunity-card__placeholder { background: radial-gradient(circle at 18% 24%, rgba(20,184,166,.28), transparent 28%), radial-gradient(circle at 88% 18%, rgba(59,130,246,.22), transparent 30%), linear-gradient(135deg, rgba(15,23,42,.92), rgba(13,110,86,.46)); } [data-theme="light"] .opportunity-card__placeholder { background: radial-gradient(circle at 18% 24%, rgba(13,110,86,.18), transparent 28%), radial-gradient(circle at 88% 18%, rgba(59,130,246,.14), transparent 30%), linear-gradient(135deg, #eef8f5, #dbeafe); } .opportunity-card__placeholder span { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(13,110,86,.9); color: #fff; font-weight: 900; letter-spacing: .04em; box-shadow: 0 12px 30px rgba(0,0,0,.18); } .opportunity-card__body { min-height: 250px; } .opportunity-card__topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .opportunity-card__date { color: var(--text-muted); font-size: .72rem; white-space: nowrap; line-height: 1.5; } .opportunity-card__company { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 36px; } .opportunity-card__company span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 650; color: var(--text-secondary); } .opportunity-card__logo { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--accent-light), rgba(13,110,86,.12)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .78rem; color: var(--accent); flex-shrink: 0; border: 1px solid rgba(13,110,86,.15); } .opportunity-card__new { flex-shrink: 0; font-size: .65rem; font-weight: 800; background: #fff3cd; color: #856404; padding: 2px 7px; border-radius: 50px; border: 1px solid #ffc107; } .opportunity-card__title { min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; } .opportunity-card__excerpt { min-height: 3.15em; margin-bottom: 0; } .opportunity-card__cta { margin-top: auto; width: 100%; justify-content: center; } /* ════════════════════════════════════════════════════════════════ DISCOVER SECTIONS — "You May Also Like", "Latest", "Related" ════════════════════════════════════════════════════════════════ */ .discover-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); } .discover-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 12px; } .discover-section__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; } .discover-section__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; } .discover-section__link { font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; } .discover-section__link:hover { text-decoration: underline; } .discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .discover-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .discover-grid { grid-template-columns: 1fr; } } /* Horizontal scroll strip */ .discover-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .discover-scroll::-webkit-scrollbar { height: 3px; } .discover-scroll .content-card { min-width: 260px; max-width: 280px; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════ SIDEBAR WIDGETS ════════════════════════════════════════════════════════════════ */ .sidebar-widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .sidebar-widget__head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .sidebar-widget__head svg { color: var(--accent); } .sidebar-widget__body { padding: 12px 0; } .sidebar-post { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; text-decoration: none; transition: background .13s; } .sidebar-post:hover { background: var(--bg-secondary); } .sidebar-post__thumb { width: 52px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } .sidebar-post__title { font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-post__date { font-size: .7rem; color: var(--text-muted); margin-top: 3px; } /* ════════════════════════════════════════════════════════════════ SHARE STRIP ════════════════════════════════════════════════════════════════ */ .share-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 32px 0; padding: 20px 24px; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border); } .share-strip__label { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: .78rem; font-weight: 600; text-decoration: none; transition: all .15s ease; border: none; cursor: pointer; } .share-btn--whatsapp { background: #25d366; color: #fff; } .share-btn--linkedin { background: #0077b5; color: #fff; } .share-btn--twitter { background: #000; color: #fff; } .share-btn--copy { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } .share-btn:hover { opacity: 0.88; transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════ JOB CARD — horizontal list layout ════════════════════════════════════════════════════════════════ */ .job-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; gap: 20px; padding: 20px 24px; transition: box-shadow .18s, border-color .18s, transform .18s; text-decoration: none; } .job-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); border-color: rgba(13,110,86,.3); transform: translateY(-2px); } .job-card__logo { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); padding: 6px; } .job-card__logo-placeholder { width: 52px; height: 52px; border-radius: 10px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--accent); flex-shrink: 0; } .job-card__body { flex: 1; min-width: 0; } .job-card__company { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 3px; } .job-card__title { font-size: .98rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-card__pills { display: flex; flex-wrap: wrap; gap: 6px; } .job-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: .67rem; font-weight: 600; background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } .job-pill--urgent { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.2); } .job-pill--remote { background: rgba(16,185,129,.1); color: #10b981; border-color: rgba(16,185,129,.2); } .job-card__action { flex-shrink: 0; } @media (max-width: 640px) { .job-card { flex-wrap: wrap; gap: 14px; } .job-card__action { width: 100%; } .job-card__action .btn { width: 100%; justify-content: center; } } /* ════════════════════════════════════════════════════════════════ PLACEMENT COMPANY CARD ════════════════════════════════════════════════════════════════ */ .placement-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .placement-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,.12); border-color: rgba(13,110,86,.35); } .placement-card__img { aspect-ratio: 16/8; overflow: hidden; background: var(--bg-secondary); } .placement-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .placement-card:hover .placement-card__img img { transform: scale(1.05); } .placement-card__body { padding: 20px; } .placement-card__company { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 6px; } .placement-card__title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; line-height: 1.4; } .placement-card__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .placement-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; } /* ════════════════════════════════════════════════════════════════ BREADCRUMB ════════════════════════════════════════════════════════════════ */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); margin-bottom: 16px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color .15s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb svg { opacity: 0.4; flex-shrink: 0; } .breadcrumb__sep { opacity: 0.4; } /* ════════════════════════════════════════════════════════════════ EMPTY STATE ════════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 80px 24px; color: var(--text-muted); } .empty-state__icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--bg-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .empty-state h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); } .empty-state p { font-size: .88rem; max-width: 320px; margin: 0 auto 20px; } /* Protected course access */ .access-prompt { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 64px 20px; } .access-prompt__panel { width: min(100%, 620px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: clamp(28px, 5vw, 44px); } .access-prompt__eyebrow { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; } .access-prompt h1 { max-width: 520px; margin-bottom: 12px; } .access-prompt p { font-size: .95rem; color: var(--text-secondary); } .access-prompt__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; } .access-prompt__meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: .78rem; font-weight: 700; } .access-prompt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .access-prompt__note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .82rem !important; color: var(--text-muted) !important; } @media (max-width: 520px) { .access-prompt { padding: 36px 14px; align-items: start; } .access-prompt__actions, .access-prompt__actions form, .access-prompt__actions .btn { width: 100%; } .access-prompt__actions .btn { justify-content: center; } } /* Final mobile polish for the current homepage/nav shell */ .hero__layout, .hero__left, .hero__right, .hero__updates-box, .hero__cards-row, .hero__mini-card { min-width: 0; } @media (max-width: 768px) { :root { --nav-h: 86px; } .nav { min-height: var(--nav-h); } .nav__inner { height: 58px; } .hero--home { min-height: auto; align-items: flex-start; padding-top: 0 !important; padding-bottom: 36px; } .hero__wrap { padding-top: 34px; overflow: hidden; } .hero__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .hero__live { max-width: 100%; white-space: normal; line-height: 1.3; } .hero__headline { font-size: 2.12rem; line-height: 1.13; letter-spacing: 0; } .hero__sub { max-width: 100%; overflow-wrap: anywhere; } .hero__cta { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); } .hero__btn-primary, .hero__btn-yt { width: 100%; max-width: 100%; justify-content: center; text-align: center; min-width: 0; } .hero__divider { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: left; } .hero__divider-line { display: none; } .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .hero__right { width: 100%; max-width: 100%; margin: 0; } .hero__updates-box { width: 100%; border-radius: 14px; } .hero__updates-track-wrap { height: 152px; } .hero__update-link { min-width: 0; } .hero__update-text { min-width: 0; max-width: 100%; } .hero__cards-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; margin-inline: -2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .hero__mini-card { flex: 0 0 min(78vw, 260px); scroll-snap-align: start; } .hero__companies { margin-top: 30px; } } /* Home category cards: keep icon and text on the same visual row */ .cat-card__body { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon title" "icon sub"; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 92px !important; } .cat-card__icon { grid-area: icon; margin: 0 !important; align-self: center; flex-shrink: 0; } .cat-card__title { grid-area: title; min-width: 0; font-size: clamp(.82rem, 1.1vw, .96rem) !important; line-height: 1.18 !important; overflow-wrap: anywhere; } .cat-card__sub { grid-area: sub; min-width: 0; font-size: clamp(.68rem, .9vw, .78rem) !important; line-height: 1.3 !important; overflow-wrap: anywhere; } /* Home jobs section */ .home-jobs-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr); gap: 28px; align-items: stretch; } .home-jobs-media { position: relative; min-height: 320px; border-radius: 18px; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .home-jobs-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .home-jobs-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(2,6,23,.62) 100%); } .home-jobs-media__badge { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.45); } [data-theme="dark"] .home-jobs-media__badge { background: rgba(10,14,26,.82); } .home-jobs-media__badge span { font-size: .72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; } .home-jobs-media__badge strong { font-size: .86rem; color: var(--text-primary); text-align: right; } .home-jobs-panel { min-width: 0; padding: 24px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .home-jobs-header { margin-bottom: 18px; } .home-jobs-panel .jobs-strip { gap: 10px; } .home-jobs-panel .job-pill { min-height: 54px; padding: 12px 14px; } .home-jobs-panel .job-pill__text { min-width: 0; font-size: clamp(.78rem, 1vw, .9rem); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { .home-jobs-layout { grid-template-columns: 1fr; } .home-jobs-media, .home-jobs-media img { min-height: 240px; } } @media (max-width: 520px) { .cat-card__body { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; min-height: 88px !important; } .cat-card__icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; } .home-jobs-panel { padding: 18px; } .home-jobs-header { align-items: flex-start; } .home-jobs-header .btn { width: auto; } .home-jobs-media, .home-jobs-media img { min-height: 210px; } .home-jobs-media__badge { align-items: flex-start; flex-direction: column; } } @media (max-width: 420px) { :root { --nav-h: 86px; } .container { padding-inline: 16px; } .nav__logo-text { font-size: 1rem; } .nav__actions { gap: 6px; } .hero__wrap { padding-top: 28px; } .hero__headline { font-size: 1.92rem; } .hero__sub { font-size: .92rem; line-height: 1.65; } .hero__stat-num { font-size: 1.35rem; } .hero__stat-label { font-size: .64rem; } .hero__updates-track-wrap { height: 142px; } .hero__mini-card { flex-basis: min(82vw, 245px); } #t6PopupHost { right: 12px; bottom: 12px; } #t6PopupLauncher { width: 46px; height: 46px; } } /* Brand assets and homepage section polish */ .nav__logo { min-width: 0; } .nav__logo-img { width: clamp(142px, 13vw, 178px); height: 42px; object-fit: contain; object-position: left center; display: none; } .nav__logo-img--dark { display: block; } .nav__logo-img--light { display: none; } [data-theme="dark"] .nav__logo-img--dark { display: none; } [data-theme="dark"] .nav__logo-img--light { display: block; } .nav__logo-text--fallback { display: none; } .nav__mobile-brand { display: inline-flex; align-items: center; min-width: 0; max-width: 210px; } .nav__mobile-brand-img { width: 168px; height: 42px; object-fit: contain; object-position: left center; display: none; } .nav__mobile-brand-img--dark { display: block; } .nav__mobile-brand-img--light { display: none; } [data-theme="dark"] .nav__mobile-brand-img--dark { display: none; } [data-theme="dark"] .nav__mobile-brand-img--light { display: block; } .footer__brand-logo { width: 190px; height: 52px; object-fit: contain; object-position: left center; margin-bottom: 12px; display: none; } .footer__brand-logo--dark { display: block; } .footer__brand-logo--light { display: none; } [data-theme="dark"] .footer__brand-logo--dark { display: none; } [data-theme="dark"] .footer__brand-logo--light { display: block; } .cat-scroll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .cat-card { position: relative; padding: 0 !important; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, var(--accent-light)) 0%, var(--bg-card) 100%); border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%); box-shadow: 0 10px 32px rgba(2, 6, 23, .08); overflow: hidden; transform: translateY(0); isolation: isolate; } .cat-card::before { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%); transition: opacity .22s ease; pointer-events: none; } .cat-card:hover::before { opacity: 1; } .cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(2, 6, 23, .14); } .cat-card__img { margin: 14px 14px 0; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--bg-secondary); } .cat-card__img img { filter: saturate(1.04) contrast(1.02); } .cat-card__overlay { background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.18) 100%); } .cat-card__body { min-height: 132px; padding: 16px 18px 18px; } .cat-card__icon { width: 40px; height: 40px; border-radius: 12px; margin: 0 0 14px; background: color-mix(in srgb, var(--accent-light) 86%, var(--bg-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); } .cat-card__title { font-size: .98rem; line-height: 1.25; } .cat-card__sub { font-size: .78rem; line-height: 1.55; } .testimonials-section { overflow: hidden; } .testimonials-marquee { position: relative; overflow: hidden; margin-inline: calc((100vw - min(100vw, 1200px)) / -2); padding: 6px 0 12px; mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .testimonials-track { display: flex; gap: 18px; width: max-content; animation: testimonialMarquee 38s linear infinite; } .testimonials-marquee:hover .testimonials-track { animation-play-state: paused; } .testimonial-card { width: min(86vw, 360px); flex: 0 0 auto; border-radius: 14px; } .testimonial-card__author > div:not(.testimonial-card__avatar):not(.testimonial-card__stars) { min-width: 0; } .testimonial-card__stars { letter-spacing: 1px; } @keyframes testimonialMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } } .faq-list { gap: 12px; } .faq-item { padding: 0 !important; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--accent-light)) 0%, var(--bg-card) 100%); } .faq-item__q { min-height: 74px; padding: 20px 22px; } .faq-item__q::after { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-light) 76%, transparent); font-size: 1.05rem; } .faq-item__a { display: grid; grid-template-rows: 1fr; padding: 0 22px 20px; animation: faqAnswerIn .18s ease both; } @keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .section-label, .cat-card, .testimonial-card, .faq-item, .hero__mini-card, .content-card { animation: t6SoftAppear .45s ease both; } @keyframes t6SoftAppear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .testimonials-track, .section-label, .cat-card, .testimonial-card, .faq-item, .hero__mini-card, .content-card { animation: none !important; } } @media (max-width: 900px) { .nav__logo-img { width: 150px; height: 38px; } .cat-scroll { display: flex; overflow-x: auto; gap: 14px; padding: 2px 4px 14px; margin-inline: -4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .cat-card { min-width: min(76vw, 250px); flex: 0 0 min(76vw, 250px); scroll-snap-align: start; } .cat-card__body { min-height: 124px; } } @media (max-width: 520px) { .nav__logo-img { width: 132px; height: 36px; } .nav__mobile-brand-img { width: 154px; height: 38px; } .cat-card { min-width: min(78vw, 238px); flex-basis: min(78vw, 238px); } .cat-card__img { margin: 12px 12px 0; } .cat-card__body { min-height: 118px; padding: 14px 16px 16px; } .faq-layout { gap: 24px; } .faq-item__q { min-height: 68px; padding: 18px; font-size: .92rem; } .faq-item__a { padding: 0 18px 18px; font-size: .84rem; } .testimonial-card { width: min(86vw, 320px); padding: 22px 20px; } } /* Course detail page */ .course-page { background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), var(--bg-primary); min-height: 100vh; } /* ── COURSE PAGE: unified layout ─────────────────────── */ /* Breadcrumb strip at the very top */ .course-breadcrumb-bar { padding: 10px 0; } /* Main two-column grid: left content + right sticky card */ .course-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; max-width: 1220px; margin: 0 auto; padding: 0 24px 64px; align-items: start; } .course-page-left { min-width: 0; display: flex; flex-direction: column; } /* Hero copy area inside left column */ .course-hero-copy { padding: 14px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .course-hero-copy h1 { max-width: 720px; margin: 0 0 12px; font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1; } .course-hero-copy p { max-width: 660px; color: var(--text-secondary); font-size: clamp(.96rem, 1.3vw, 1.1rem); line-height: 1.75; margin: 0; } /* Sidebar starts at same level as hero copy, stays fixed */ .course-sidebar { position: sticky; top: calc(var(--nav-h, 64px) + 16px); display: grid; gap: 16px; align-self: start; min-width: 0; padding-top: 0; } .course-hero { border-bottom: 1px solid var(--border); padding: 42px 0 34px; } .course-hero__inner { max-width: 1220px; } .course-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-muted); font-size: .86rem; margin-bottom: 16px; } .course-breadcrumb a { color: var(--accent); font-weight: 700; } .course-hero__content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; } .course-hero__copy { max-width: 780px; } .course-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .course-kicker span { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); background: color-mix(in srgb, var(--accent-light) 72%, transparent); color: var(--accent); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } .course-hero h1 { max-width: 780px; margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; } .course-hero p { max-width: 720px; color: var(--text-secondary); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.75; margin: 0; } .course-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .course-meta span { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 88%, transparent); color: var(--text-secondary); font-size: .84rem; font-weight: 700; } .course-hero__summary { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px; margin-top: 22px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 92%, transparent); box-shadow: 0 8px 28px rgba(2, 6, 23, .06); } .course-hero__summary div { min-width: 0; padding: 12px 10px; border-radius: 13px; background: var(--bg-secondary); } .course-hero__summary strong, .course-hero__summary span { display: block; } .course-hero__summary strong { color: var(--text-primary); font-size: 1.12rem; line-height: 1.2; } .course-hero__summary span { color: var(--text-muted); font-size: .74rem; font-weight: 700; margin-top: 4px; text-transform: uppercase; } .course-shell { max-width: 1220px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 34px; align-items: start; padding-top: 34px; padding-bottom: 70px; } .course-main { display: grid; gap: 22px; min-width: 0; } .course-panel, .course-progress-card, .course-related, .course-sidebar-card, .course-ad-block { animation: courseFadeUp .42s ease both; } .course-panel { display: block; /* override tab-panel system's display:none */ border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb, var(--bg-card) 96%, transparent); box-shadow: 0 16px 42px rgba(2, 6, 23, .07); padding: 24px; overflow: hidden; } .course-panel__head { margin-bottom: 18px; } .course-panel__head--split { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .course-panel__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .course-panel__eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 999px; background: var(--accent); } .course-panel h2, .course-related h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.16; } .course-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--bg-secondary); font-size: .82rem; font-weight: 800; } .course-objectives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .course-objective { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent) 26%); border-radius: 14px; background: color-mix(in srgb, var(--accent-light) 36%, var(--bg-card)); color: var(--text-secondary); line-height: 1.5; font-size: .92rem; } .course-check { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-contrast, #fff); } /* ── Requirements panel ── */ .course-requirements { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .course-requirements li { padding: 12px 16px 12px 44px; position: relative; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); font-size: .92rem; color: var(--text-secondary); line-height: 1.5; word-break: break-word; overflow-wrap: break-word; } .course-requirements li::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .8; } /* ── Features panel ── */ .course-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .course-feature { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent-light) 40%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%); font-size: .92rem; color: var(--text-secondary); line-height: 1.5; } .course-feature__icon { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; margin-top: 1px; } /* ── Course Info Tabs (cit) ── */ .cit-section { padding: 0; overflow: visible; } .cit-tabs { display: flex; gap: 4px; padding: 16px 20px 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-secondary) 60%, var(--bg-card)); border-radius: 20px 20px 0 0; flex-wrap: nowrap; overflow-x: auto; } .cit-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; font-size: .875rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-bottom: 2.5px solid transparent; border-radius: 10px 10px 0 0; cursor: pointer; transition: color .18s, border-color .18s, background .18s; margin-bottom: -1px; white-space: nowrap; } .cit-tab svg { opacity: .7; flex-shrink: 0; } .cit-tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent-light) 50%, transparent); } .cit-tab--active { color: var(--accent); border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent-light) 30%, var(--bg-card)); } .cit-tab--active svg { opacity: 1; } .cit-panel { display: none; padding: 24px; animation: citFadeIn .22s ease; } .cit-panel--active { display: block; } @keyframes citFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* responsive: stack tabs on small screens */ @media (max-width: 520px) { .cit-tabs { padding: 12px 12px 0; gap: 2px; } .cit-tab { padding: 9px 12px; font-size: .82rem; } .cit-panel { padding: 16px; } } .course-progress-card { border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 82%, var(--bg-card)), var(--bg-card)); padding: 18px 20px; } .course-progress-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--accent); font-weight: 800; } .course-ad-block { border-radius: 18px; } .course-ad-block .ad-slot, .course-sidebar-ad .ad-slot { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-card); } .course-ad-block__placeholder { min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 22px; border: 1px dashed color-mix(in srgb, var(--border) 70%, var(--accent) 30%); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 42%, transparent), transparent), var(--bg-card); color: var(--text-secondary); } .course-ad-block__placeholder span { color: var(--text-muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .course-ad-block__placeholder strong { color: var(--text-primary); font-size: .96rem; } .course-ad-block__placeholder--side { min-height: 220px; text-align: center; align-items: center; } /* ── Hero feature card (right column of hero) ──────────────── */ .course-hero__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 12px 40px rgba(2,6,23,.1); padding: 22px; display: flex; flex-direction: column; gap: 16px; } .course-hero__card-price { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .course-hero__card-price strong { font-size: 1.8rem; font-weight: 900; color: var(--text-primary); line-height: 1; } .course-hero__card-price span { font-size: .82rem; color: var(--text-muted); font-weight: 600; } .course-hero__card-price del { color: var(--text-muted); font-size: .9rem; font-weight: 600; } .course-hero__card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .course-hero__card-list li { display: flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 600; color: var(--text-secondary); } .course-hero__card-list li svg { flex: 0 0 14px; color: var(--accent); } .course-hero__card-cta { width: 100%; justify-content: center; min-height: 44px; } .course-lessons { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-card); } .course-lesson { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); transition: background-color .18s ease, transform .18s ease; } .course-lesson:last-child { border-bottom: 0; } .course-lesson:hover { background: color-mix(in srgb, var(--accent-light) 35%, transparent); } .course-lesson__num { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .82rem; font-weight: 900; } .course-lesson__body { min-width: 0; overflow: hidden; word-break: break-word; min-width: 0; } .course-lesson__body h3 { margin: 0; color: var(--text-primary); font-size: .98rem; line-height: 1.35; } .course-lesson__body p { margin: 4px 0 0; color: var(--text-muted); font-size: .8rem; } .course-lesson__action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; } .course-lock { color: var(--text-muted); font-size: .78rem; font-weight: 800; } .course-empty { padding: 28px; text-align: center; color: var(--text-muted); } .course-quiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .course-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 16px; justify-content: start; align-items: stretch; } .related-compact-grid, .grid-2.related-compact-grid, .grid-3.related-compact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 16px; justify-content: start; } .related-compact-grid .content-card, .related-compact-grid .course-card, .related-compact-grid .post-related__card { width: 100%; max-width: 280px; } .course-quiz-card { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-secondary); padding: 18px; } .course-quiz-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .course-quiz-card h3 { margin: 0; font-size: 1rem; } .course-quiz-card__top span { flex: 0 0 auto; color: var(--accent); font-size: .78rem; font-weight: 900; } .course-quiz-card p, .course-instructor p { color: var(--text-secondary); line-height: 1.6; font-size: .9rem; } .course-instructor__row { display: flex; align-items: center; gap: 16px; } .course-instructor__row img, .course-instructor__avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; } .course-instructor__avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); font-size: 1.5rem; font-weight: 900; } .course-instructor h3 { margin: 0 0 4px; } .course-related { margin-top: 8px; } .course-related .course-card { width: 100%; max-width: 280px; } .course-related .course-card__thumb { aspect-ratio: 16 / 8.8; } .course-related .course-card__body { padding: 14px; } .course-related .course-card__title { font-size: .92rem; margin-bottom: 6px; } .course-related .course-card__desc { -webkit-line-clamp: 2; margin-bottom: 10px; } .course-related .course-card__meta { display: none; } .course-sidebar { position: sticky; top: calc(var(--nav-h, 64px) + 18px); display: grid; gap: 16px; min-width: 0; align-self: start; } .course-sidebar-card { border: 1px solid var(--border); border-radius: 22px; background: var(--bg-card); box-shadow: 0 18px 50px rgba(2, 6, 23, .1); padding: 18px; } .course-sidebar-card__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin-bottom: 18px; background: var(--bg-secondary); } .course-price { display: grid; gap: 4px; margin-bottom: 16px; } .course-price strong { color: var(--text-primary); font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1; } .course-price del { color: var(--text-muted); font-weight: 700; } .course-price span { color: var(--text-muted); font-size: .86rem; font-weight: 700; } .course-sidebar-card__cta { width: 100%; justify-content: center; min-height: 46px; } .course-feature-list { list-style: none; display: grid; gap: 11px; margin: 18px 0 0; padding: 0; color: var(--text-secondary); font-size: .88rem; } .course-feature-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; } .course-feature-list li span { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); } .course-sidebar-ad { min-width: 0; } @keyframes courseFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .course-panel, .course-progress-card, .course-related, .course-sidebar-card, .course-ad-block { animation: none !important; } } @media (max-width: 980px) { /* Hero: collapse to single column, hide right card (mobile bar takes over) */ .course-hero__content { grid-template-columns: 1fr; } .course-hero__card { display: none; } /* Shell: single column */ .course-shell { grid-template-columns: 1fr; padding-bottom: 88px; /* space for sticky mobile bar */ } .course-sidebar { position: static; } } /* ── Mobile sticky enroll bar ──────────────────────────────── */ .course-mobile-bar { display: none; /* hidden on desktop */ } @media (max-width: 980px) { .course-mobile-bar { display: flex; align-items: center; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -4px 24px rgba(2,6,23,.14); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .course-mobile-bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .course-mobile-bar__name { font-size: .8rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-mobile-bar__price { font-size: .92rem; font-weight: 900; color: var(--accent); line-height: 1; } .course-mobile-bar__btn { flex: 0 0 auto; white-space: nowrap; min-height: 42px; padding: 0 20px; font-size: .88rem; } } @media (max-width: 680px) { .course-hero { padding: 28px 0 26px; } .course-shell { padding-top: 22px; padding-bottom: 44px; gap: 22px; } .course-hero h1 { font-size: clamp(2rem, 12vw, 3rem); } .course-hero__summary, .course-objectives, .course-quiz-grid { grid-template-columns: 1fr; } .course-related__grid, .related-compact-grid, .grid-2.related-compact-grid, .grid-3.related-compact-grid { display: flex; overflow-x: auto; gap: 14px; padding: 2px 4px 14px; margin-inline: -4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .course-related .course-card, .related-compact-grid .content-card, .related-compact-grid .course-card, .related-compact-grid .post-related__card { flex: 0 0 min(78vw, 270px); max-width: min(78vw, 270px); scroll-snap-align: start; } .course-panel, .course-sidebar-card { border-radius: 16px; padding: 18px; } .course-panel__head--split { align-items: flex-start; flex-direction: column; } .course-lesson { grid-template-columns: 32px minmax(0, 1fr); align-items: flex-start; padding: 14px; } .course-lesson__action { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; } .course-instructor__row { align-items: flex-start; } } /* ═══════════════════════════════════════════════════════════════════════ Placement Quiz Cards — MCQ (Capgemini / Accenture) ═══════════════════════════════════════════════════════════════════════ */ .quiz-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; margin-bottom: 24px; transition: box-shadow 0.2s; } .quiz-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); } .quiz-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .quiz-num { background: var(--accent); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; } .quiz-badge { padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; letter-spacing: .3px; } .badge-easy { background: #d1fae5; color: #065f46; } .badge-medium { background: #fef3c7; color: #92400e; } .badge-hard { background: #fee2e2; color: #991b1b; } .quiz-question { font-size: 1rem; font-weight: 600; margin: 0 0 12px; line-height: 1.6; color: var(--text-primary); } .quiz-code { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 12px 0; overflow-x: auto; } .quiz-code pre { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: .85rem; line-height: 1.65; } .quiz-options { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; } .quiz-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .quiz-option:hover { border-color: var(--accent); background: rgba(13, 110, 86, 0.05); } .quiz-opt-letter { background: var(--accent); color: #fff; border-radius: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; } .quiz-opt-text { font-size: .9rem; line-height: 1.4; } .quiz-reveal { margin-top: 14px; } .quiz-reveal-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; cursor: pointer; font-size: .875rem; font-weight: 600; transition: opacity 0.2s, transform 0.15s; } .quiz-reveal-btn:hover { opacity: .85; transform: translateY(-1px); } .quiz-answer { margin-top: 12px; padding: 14px 16px; background: var(--bg-card); border-left: 4px solid #22c55e; border-radius: 0 10px 10px 0; animation: quizFadeIn 0.25s ease; } .quiz-correct-label { display: block; font-weight: 700; color: #16a34a; margin-bottom: 6px; font-size: .95rem; } .quiz-explanation { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--text-secondary); } .quiz-section-title { font-size: 1.25rem; font-weight: 700; margin: 28px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--border); color: var(--text-primary); } @keyframes quizFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════ TCS NQT Coding Question Cards ═══════════════════════════════════════════════════════════════════════ */ .tcs-question-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 28px; overflow: hidden; transition: box-shadow 0.2s; } .tcs-question-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); } .tcs-question-header { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 16px 20px; } .tcs-question-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .tcs-q-num { background: var(--accent); color: #fff; padding: 4px 13px; border-radius: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .4px; } .tcs-q-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; } .tcs-question-body { padding: 18px 20px; } .tcs-section { margin-bottom: 16px; } .tcs-section h5 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin: 0 0 7px; } .tcs-section-body { font-size: .9rem; line-height: 1.65; color: var(--text-primary); } .tcs-section-body ul { padding-left: 18px; margin: 4px 0; } .tcs-section-body li { margin-bottom: 4px; } .tcs-code { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 8px 0 0; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: .85rem; line-height: 1.65; white-space: pre; } .tcs-approach { background: rgba(13, 110, 86, 0.06); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 16px; margin-top: 12px; } .tcs-approach h5 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin: 0 0 8px; } .tcs-approach-body { font-size: .875rem; line-height: 1.65; } .tcs-approach-body ul { padding-left: 18px; margin: 4px 0; } .tcs-approach-body li { margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════ COURSE PAGE — RESPONSIVE (must be after base styles) ══════════════════════════════════════════════════════════════ */ /* -- Tablet / large mobile (<=980px): collapse grid, hide sidebar card -- */ @media (max-width: 980px) { .course-page-grid { grid-template-columns: 1fr; padding: 0 16px 100px; gap: 20px; } .course-sidebar { display: none; } .course-hero-copy { padding: 12px 0 18px; margin-bottom: 16px; } .course-hero__content, .course-shell { grid-template-columns: 1fr; } .course-hero__card { display: none; } .course-shell { padding-bottom: 100px; gap: 18px; } } /* Mobile sticky enroll bar */ .course-mobile-bar { display: none; } @media (max-width: 980px) { .course-mobile-bar { display: flex; align-items: center; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -4px 24px rgba(2,6,23,.14); padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .course-mobile-bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .course-mobile-bar__name { font-size: .8rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .course-mobile-bar__price { font-size: .9rem; font-weight: 900; color: var(--accent); line-height: 1; } .course-mobile-bar__btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; padding: 0 18px; font-size: .86rem; } } /* -- Mobile (<=680px): compact all content sections -- */ @media (max-width: 680px) { .course-page-grid { padding: 0 12px 100px; gap: 16px; } .course-hero-copy { padding: 10px 0 14px; margin-bottom: 14px; } .course-kicker { gap: 6px; margin-bottom: 6px; } .course-kicker span { font-size: .7rem; padding: 3px 9px; min-height: 22px; } .course-hero h1, .course-hero-copy h1 { font-size: clamp(1.5rem,7vw,2.4rem); margin-bottom: 6px; line-height: 1.1; } .course-hero p, .course-hero-copy p { font-size: .92rem; line-height: 1.65; } .course-meta { gap: 6px; margin-top: 10px; } .course-meta span { font-size: .78rem; padding: 3px 8px; min-height: 24px; } .course-progress-card { padding: 14px 16px; border-radius: 14px; } .course-panel { border-radius: 14px; padding: 16px; } .course-panel__head { margin-bottom: 12px; } .course-panel__head--split { flex-direction: column; align-items: flex-start; gap: 6px; } .course-panel__eyebrow { font-size: .7rem; } .course-panel h2 { font-size: 1rem; } .cit-tabs { padding: 10px 12px 0; gap: 2px; } .cit-tab { font-size: .78rem; padding: 8px 10px; gap: 5px; } .cit-panel { padding: 14px; } .course-objectives, .course-quiz-grid { grid-template-columns: 1fr; } .course-objective { padding: 8px 10px; } .course-features { grid-template-columns: 1fr; } .course-lessons { border-radius: 12px; } .course-lesson { grid-template-columns: 28px minmax(0,1fr); align-items: flex-start; padding: 12px; gap: 10px; } .course-lesson__num { width: 28px; height: 28px; font-size: .78rem; } .course-lesson__body h3 { font-size: .9rem; } .course-lesson__body p { font-size: .76rem; } .course-lesson__action { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .course-quiz-card { padding: 14px; border-radius: 12px; } .course-quiz-card__top span { font-size: .74rem; } .course-instructor__row { flex-direction: column; align-items: flex-start; gap: 12px; } .course-instructor__row img, .course-instructor__avatar { width: 48px; height: 48px; flex: 0 0 48px; font-size: 1.2rem; } .course-related__grid, .related-compact-grid { display: flex; overflow-x: auto; gap: 12px; padding: 2px 2px 14px; margin-inline: -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .course-related__grid::-webkit-scrollbar, .related-compact-grid::-webkit-scrollbar { display: none; } .course-related .course-card, .related-compact-grid .content-card, .related-compact-grid .course-card { flex: 0 0 min(75vw,240px); max-width: min(75vw,240px); scroll-snap-align: start; } .course-main { gap: 14px; } } /* -- Small phones (<=420px) -- */ @media (max-width: 420px) { .course-page-grid { padding: 0 10px 100px; } .course-hero h1, .course-hero-copy h1 { font-size: clamp(1.35rem,8vw,2rem); } .course-kicker span { font-size: .68rem; padding: 2px 8px; } .course-lesson { padding: 10px; gap: 8px; } .course-panel { padding: 12px; } .course-mobile-bar__name { font-size: .75rem; } .course-mobile-bar__btn { padding: 0 14px; font-size: .82rem; min-height: 38px; } } /* ══ Phase 4: Mobile content overflow & font size fixes ══ */ @media (max-width: 680px) { /* Prevent any child from blowing out the layout */ .course-page-left, .course-main, .course-panel, .cit-section, .course-progress-card, .course-lessons { max-width: 100%; overflow: hidden; } /* Lesson body text wraps */ .course-lesson__body { min-width: 0; overflow: hidden; word-break: break-word; } .course-lesson__body h3 { font-size: .88rem; white-space: normal; } .course-lesson__body p { font-size: .75rem; white-space: normal; } /* Requirements list text wraps */ .course-requirements li { word-break: break-word; overflow-wrap: break-word; font-size: .86rem; } /* Objective text wraps */ .course-objective { font-size: .86rem; overflow: hidden; } .course-objective > * { min-width: 0; } /* Feature text wraps */ .course-feature { overflow: hidden; font-size: .86rem; } /* Tab text smaller so all fit */ .cit-tab { font-size: .76rem; padding: 10px 12px; gap: 4px; white-space: nowrap; } .cit-tab svg { width: 14px; height: 14px; } /* Panel headings */ .course-panel h2 { font-size: .96rem; } .course-panel__eyebrow { font-size: .68rem; } /* Progress card */ .course-progress-card { font-size: .84rem; } /* Prevent breadcrumb from overflowing */ .breadcrumb { flex-wrap: wrap; gap: 4px; font-size: .78rem; } } @media (max-width: 420px) { .cit-tab { font-size: .72rem; padding: 9px 10px; } .course-lesson__body h3 { font-size: .82rem; } .course-panel h2 { font-size: .9rem; } } /* Course detail mobile hardening */ @media (max-width: 680px) { html, body { overflow-x: hidden; } .course-page { min-width: 0; } .course-breadcrumb-bar { padding: 6px 0; } .course-breadcrumb { margin-bottom: 8px; font-size: .74rem; line-height: 1.4; } .course-page-grid { width: 100%; max-width: 100%; padding-inline: 10px; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } .course-hero-copy h1 { max-width: 100%; font-size: clamp(1.42rem, 7.2vw, 2rem); line-height: 1.08; overflow-wrap: anywhere; } .course-hero-copy p { max-width: 100%; font-size: .9rem; line-height: 1.58; overflow-wrap: anywhere; } .course-meta { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .course-meta::-webkit-scrollbar { display: none; } .course-meta span { flex: 0 0 auto; max-width: 82vw; font-size: .74rem; white-space: nowrap; } .course-main { gap: 12px; } .course-panel, .course-progress-card, .course-related { width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(2, 6, 23, .06); } .course-panel { padding: 14px 12px; } .course-progress-card { padding: 14px 16px; } .course-progress-card__top strong { display: none; } .cit-section { padding: 0; overflow: hidden; } .cit-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 10px 0; overflow: visible; } .cit-tab { min-width: 0; justify-content: center; gap: 4px; padding: 9px 4px; font-size: clamp(.64rem, 2.7vw, .74rem); line-height: 1.15; text-align: center; white-space: normal; } .cit-tab svg { width: 12px; height: 12px; flex: 0 0 12px; } .cit-panel { padding: 12px; } .course-objectives { gap: 10px; } .course-objective, .course-feature, .course-requirements li { min-width: 0; overflow: hidden; font-size: .83rem; line-height: 1.42; } .course-objective { padding: 9px 10px; gap: 8px; } .course-objective > span:last-child, .course-feature > span:last-child { min-width: 0; overflow-wrap: anywhere; } .course-check { width: 22px; height: 22px; flex-basis: 22px; } .course-lessons { border-radius: 13px; } .course-lesson { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 12px 10px; } .course-lesson__num { width: 30px; height: 30px; font-size: .78rem; } .course-lesson__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; line-height: 1.32; } .course-lesson__body p { font-size: .74rem; line-height: 1.35; } .course-lesson__action { grid-column: 2; width: 100%; justify-content: flex-start; gap: 8px; margin-top: 4px; } .course-lesson__action .btn, .course-lesson__action .badge--free, .course-lesson__action .course-lock { min-height: 28px; padding: 5px 10px; font-size: .74rem; } .course-quiz-grid { gap: 10px; } .course-quiz-card { padding: 14px; } .course-quiz-card__top { flex-direction: column; gap: 6px; } .course-quiz-card h3 { font-size: .92rem; line-height: 1.3; } .course-quiz-card p { margin: 0 0 10px; font-size: .82rem; } .course-related { overflow: visible; } .course-related .course-panel__head { padding-inline: 0; } .course-related__grid, .related-compact-grid { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; margin-inline: -10px; padding: 2px 10px 14px; scroll-padding-inline: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; } .course-related__grid .course-card, .related-compact-grid .course-card, .related-compact-grid .content-card { flex: 0 0 clamp(190px, 64vw, 230px); width: clamp(190px, 64vw, 230px); max-width: clamp(190px, 64vw, 230px); min-height: 0; scroll-snap-align: start; } .course-related .course-card__thumb { aspect-ratio: 16 / 9.4; } .course-related .course-card__body { padding: 12px; } .course-related .course-card__title { font-size: .86rem; line-height: 1.25; } .course-related .course-card__desc { font-size: .76rem; line-height: 1.42; } .course-mobile-bar { gap: 8px; padding: 9px 12px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); } .course-mobile-bar__info { max-width: calc(100vw - 150px); } .course-mobile-bar__name { font-size: .74rem; } .course-mobile-bar__price { font-size: .84rem; } .course-mobile-bar__btn { min-width: 88px; min-height: 38px; padding-inline: 14px; font-size: .8rem; } } @media (max-width: 380px) { .course-page-grid { padding-inline: 8px; } .course-panel { padding: 12px 10px; } .cit-tab { font-size: .62rem; padding-inline: 2px; } .cit-tab svg { display: none; } .course-mobile-bar__info { max-width: calc(100vw - 132px); } .course-mobile-bar__btn { min-width: 82px; padding-inline: 12px; } } /* Course detail final mobile overflow fixes */ @media (max-width: 680px) { .course-page-grid, .course-page-left, .course-main, .course-panel, .cit-section, .course-progress-card, .course-lessons, .course-related { max-width: 100% !important; } .course-panel, .cit-section, .course-progress-card, .course-lessons, .course-related { overflow: visible !important; } .cit-tabs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 10px !important; border-bottom: 1px solid var(--border); } .cit-tab { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; border: 1px solid transparent; border-radius: 10px !important; border-bottom-width: 1px !important; margin-bottom: 0 !important; padding: 9px 6px !important; font-size: clamp(.68rem, 2.6vw, .76rem) !important; line-height: 1.2 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .cit-tab:nth-child(3):last-child { flex-basis: 100% !important; } .cit-tab--active { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); border-bottom-color: var(--accent) !important; } .course-objective { display: grid !important; grid-template-columns: 22px minmax(0, 1fr); align-items: start; overflow: visible !important; } .course-objective > span:last-child, .course-feature > span:last-child, .course-requirements li { display: block !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; overflow-wrap: anywhere !important; } .course-ad-block, .course-ad-block__placeholder, .course-ad-block__placeholder strong { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere !important; } .course-lesson { grid-template-columns: 30px minmax(0, 1fr) !important; align-items: start !important; } .course-lesson__body, .course-lesson__body h3, .course-lesson__body p { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } .course-lesson__body h3 { display: block !important; -webkit-line-clamp: initial !important; -webkit-box-orient: initial !important; } .course-lesson__action { grid-column: 2 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } .course-related__grid, .related-compact-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; overflow: visible !important; margin-inline: 0 !important; padding: 0 !important; scroll-snap-type: none !important; } .course-related__grid .course-card, .related-compact-grid .course-card, .related-compact-grid .content-card, .course-related .course-card { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: initial !important; } .course-related .course-card__thumb { aspect-ratio: 16 / 10 !important; } .course-related .course-card__body { padding: 10px !important; } .course-related .course-card__title { font-size: .78rem !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } .course-related .course-card__desc { display: none !important; } .course-related .course-card__footer { margin-top: 8px !important; gap: 6px !important; } } @media (max-width: 380px) { .course-related__grid, .related-compact-grid { grid-template-columns: 1fr !important; } } /* Course detail compact mobile rhythm */ @media (max-width: 680px) { .course-panel { padding: 12px !important; border-radius: 13px !important; } .course-panel__head { margin-bottom: 10px !important; } .course-panel__eyebrow { gap: 6px !important; margin-bottom: 6px !important; font-size: .68rem !important; letter-spacing: .07em !important; } .course-panel__eyebrow::before { width: 22px !important; } .course-panel h2, .course-related h2 { font-size: 1.08rem !important; line-height: 1.18 !important; } .course-count { padding: 6px 10px !important; font-size: .76rem !important; } .course-lessons { border-radius: 12px !important; } .course-lesson { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 8px !important; padding: 10px !important; } .course-lesson__num { width: 28px !important; height: 28px !important; font-size: .74rem !important; } .course-lesson__body h3 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: .86rem !important; line-height: 1.22 !important; overflow-wrap: normal !important; word-break: normal !important; } .course-lesson__body p { margin-top: 3px !important; font-size: .74rem !important; line-height: 1.25 !important; } .course-lesson__action { grid-column: 2 !important; gap: 8px !important; margin-top: 5px !important; } .course-lesson__action .badge--free, .course-lesson__action .course-lock { min-height: 24px !important; padding: 3px 9px !important; border-radius: 7px !important; font-size: .72rem !important; line-height: 1 !important; } .course-lesson__action .btn { min-height: 24px !important; padding: 2px 8px !important; border-radius: 7px !important; font-size: .73rem !important; line-height: 1 !important; } .course-quiz-card { padding: 12px !important; } .course-quiz-card h3 { font-size: .9rem !important; } .course-related { overflow: hidden !important; margin-top: 4px !important; } .course-related .course-panel__head { margin-bottom: 10px !important; } .course-related__grid, .related-compact-grid { display: flex !important; grid-template-columns: none !important; gap: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; margin-inline: -12px !important; padding: 0 12px 12px !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 12px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } .course-related__grid .course-card, .related-compact-grid .course-card, .related-compact-grid .content-card, .course-related .course-card { flex: 0 0 clamp(184px, 62vw, 224px) !important; width: clamp(184px, 62vw, 224px) !important; max-width: clamp(184px, 62vw, 224px) !important; scroll-snap-align: start !important; } .course-related .course-card__thumb { aspect-ratio: 16 / 9 !important; } .course-related .course-card__body { padding: 9px !important; } .course-related .course-card__type { font-size: .62rem !important; margin-bottom: 5px !important; } .course-related .course-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.25em !important; font-size: .78rem !important; line-height: 1.22 !important; } .course-related .course-card__footer { align-items: center !important; margin-top: 7px !important; } .course-related .course-card__footer .btn, .course-related .course-card .btn--sm { min-height: 28px !important; padding: 4px 9px !important; font-size: .7rem !important; } } @media (max-width: 380px) { .course-related__grid .course-card, .related-compact-grid .course-card, .related-compact-grid .content-card, .course-related .course-card { flex-basis: 70vw !important; width: 70vw !important; max-width: 70vw !important; } } /* ══════════════════════════════════════════════════════════════ DASHBOARD — Professional layout (Udemy/Coursera style) ══════════════════════════════════════════════════════════════ */ /* Layout */ .dashboard-wrap { max-width: 1220px; margin: 0 auto; padding: 32px 24px 80px; } .dashboard-layout { display: grid; grid-template-columns: 224px 1fr; gap: 28px; align-items: start; } /* Sidebar */ .dashboard-nav { position: sticky; top: calc(var(--nav-h,64px) + 16px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; } .dashboard-nav__section { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; padding: 6px 10px 4px; margin-top: 8px; } .dashboard-nav__section:first-child { margin-top: 0; } .dashboard-nav__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background .15s, color .15s; } .dashboard-nav__item svg { opacity: .65; flex-shrink: 0; } .dashboard-nav__item:hover { background: var(--bg-secondary); color: var(--text-primary); } .dashboard-nav__item:hover svg { opacity: 1; } .dashboard-nav__item.active { background: color-mix(in srgb, var(--accent-light) 70%, var(--bg-card)); color: var(--accent); font-weight: 600; } .dashboard-nav__item.active svg { opacity: 1; } .dashboard-nav__divider { height: 1px; background: var(--border); margin: 8px 0; } /* Avatar */ .dash-avatar { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent-light) 80%, var(--bg-card)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: var(--accent); flex-shrink: 0; overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent) 20%, var(--border)); } .dash-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Welcome banner */ .dash-welcome { display: flex; align-items: center; gap: 18px; padding: 24px 28px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--bg-card)), color-mix(in srgb, var(--accent) 3%, var(--bg-secondary))); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 18px; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; } .dash-welcome__text h1 { font-size: 1.3rem; margin: 0 0 4px; font-weight: 700; } .dash-welcome__text p { font-size: .84rem; color: var(--text-muted); margin: 0; } .dash-welcome__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } /* Stat cards */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .dash-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; transition: box-shadow .2s; } .dash-stat:hover { box-shadow: var(--shadow-sm); } .dash-stat__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .dash-stat__icon--blue { background: rgba(59,130,246,.12); color: #3b82f6; } .dash-stat__icon--green { background: rgba(16,185,129,.12); color: #10b981; } .dash-stat__icon--purple { background: rgba(139,92,246,.12); color: #8b5cf6; } .dash-stat__icon--orange { background: rgba(245,158,11,.12); color: #f59e0b; } .dash-stat__body { min-width: 0; } .dash-stat__value { font-size: 1.7rem; font-weight: 800; line-height: 1; margin-bottom: 4px; } .dash-stat__label { font-size: .76rem; color: var(--text-muted); font-weight: 500; } .dash-stat__sub { font-size: .7rem; color: var(--accent); margin-top: 2px; } /* Section heading */ .dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dash-section-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; } /* Learning cards */ .dash-course-card { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s; } .dash-course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .dash-course-card__thumb { width: 88px; height: 88px; flex-shrink: 0; object-fit: cover; display: block; } .dash-course-card__thumb--placeholder { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-light), color-mix(in srgb, var(--accent) 20%, var(--bg-secondary))); color: var(--accent); } .dash-course-card__body { padding: 14px 18px; min-width: 0; } .dash-course-card__type { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 4px; } .dash-course-card__title { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); margin-bottom: 6px; } .dash-course-card__meta { font-size: .75rem; color: var(--text-muted); margin-bottom: 8px; } .dash-course-card__progress { display: flex; align-items: center; gap: 8px; } .dash-course-card__bar { flex: 1; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; } .dash-course-card__bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); } .dash-course-card__pct { font-size: .72rem; font-weight: 700; color: var(--accent); min-width: 30px; text-align: right; } .dash-course-card__action { padding: 14px 18px; flex-shrink: 0; } /* Empty state */ .dash-empty { text-align: center; padding: 48px 24px; background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: 18px; margin-bottom: 28px; } .dash-empty__icon { font-size: 2.5rem; margin-bottom: 12px; } .dash-empty h3 { font-size: 1rem; margin-bottom: 6px; } .dash-empty p { font-size: .84rem; color: var(--text-muted); margin-bottom: 18px; } /* Quiz / cert list rows */ .dash-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .dash-list__row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background .15s; } .dash-list__row:last-child { border-bottom: none; } .dash-list__row:hover { background: var(--bg-secondary); } .dash-list__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; } .dash-list__body { flex: 1; min-width: 0; } .dash-list__title { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-list__sub { font-size: .74rem; color: var(--text-muted); margin-top: 2px; } .dash-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 700; } .dash-badge--pass { background: #dcfce7; color: #15803d; } .dash-badge--fail { background: #fee2e2; color: #991b1b; } [data-theme="dark"] .dash-badge--pass { background: rgba(21,128,61,.2); color: #4ade80; } [data-theme="dark"] .dash-badge--fail { background: rgba(153,27,27,.2); color: #f87171; } /* Profile completion bar */ .dash-profile-nudge { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 14px; margin-bottom: 24px; font-size: .84rem; } .dash-profile-nudge__bar { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; min-width: 80px; } .dash-profile-nudge__fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s; } /* Certificate card */ .dash-cert-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; transition: box-shadow .2s; } .dash-cert-card:hover { box-shadow: var(--shadow-sm); } .dash-cert-card__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#f59e0b,#ef4444); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; } .dash-cert-card__body { flex: 1; min-width: 0; } .dash-cert-card__title { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-cert-card__date { font-size: .74rem; color: var(--text-muted); margin-top: 2px; } /* Mobile nav tabs (replaces sidebar on small screens) */ .dashboard-mobile-tabs { display: none; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); position: sticky; top: var(--nav-h,64px); z-index: 50; } .dashboard-mobile-tabs::-webkit-scrollbar { display: none; } .dashboard-mobile-tab { flex-shrink: 0; padding: 8px 16px; border-radius: 99px; font-size: .8rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); text-decoration: none; white-space: nowrap; transition: all .15s; } .dashboard-mobile-tab:hover, .dashboard-mobile-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Dashboard mobile responsive */ @media (max-width: 860px) { .dashboard-layout { display: block; } .dashboard-nav { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 270px !important; height: 100vh !important; z-index: 600 !important; transform: translateX(-100%); transition: transform .27s cubic-bezier(.4,0,.2,1); box-shadow: 6px 0 32px rgba(0,0,0,.2); overflow-y: auto; padding-top: 0 !important; border-radius: 0 !important; } .dashboard-nav.dash-open { transform: translateX(0) !important; } .dashboard-content { padding: 16px !important; min-width: 0; } .dash-mob-topbar { display: flex !important; } .dash-nav-overlay.dash-open { display: block; } .dashboard-mobile-tabs { display: none !important; } } @media (max-width: 520px) { .dashboard-content { padding: 12px !important; } } /* Dashboard stat grid responsiveness */ @media (max-width: 580px) { .dashboard-content div[style*="grid-template-columns:repeat(4,1fr)"], .dashboard-content div[style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; } .dashboard-content div[style*="grid-template-columns:1fr 1fr 1fr"], .dashboard-content div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* Edit profile grid fix */ .dashboard-content form div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ── Admin stat grid ── */ .admin-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 900px) { .admin-stat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); } } .admin-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; } .admin-stat-card__label { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; } .admin-stat-card__icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-stat-card__value { font-size: 1.45rem; font-weight: 800; color: var(--text-primary); line-height: 1; } /* ── Badge pass/fail ── */ .badge-pass, .badge-fail { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; } .badge-pass { background: #dcfce7; color: #15803d; } .badge-fail { background: #fee2e2; color: #991b1b; } /* ========================================================= Admin compact component classes (icon buttons, badges, tables) ========================================================= */ /* ── Icon-only action buttons ───────────────────────────── */ .aicon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: background .12s, color .12s, border-color .12s; text-decoration: none; flex-shrink: 0; } .aicon-btn:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong); } .aicon-btn--edit:hover { background: #1e3a5f; color: #60a5fa; border-color: #3b82f6; } .aicon-btn--del:hover { background: #3b0a0a; color: #f87171; border-color: #ef4444; } .aicon-btn--ok:hover { background: #052e16; color: #4ade80; border-color: #22c55e; } /* ── Compact text buttons ───────────────────────────────── */ .abtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 5px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; white-space: nowrap; } .abtn--primary { background: var(--accent); color: #fff; border-color: var(--accent); } .abtn--primary:hover { opacity: .88; } .abtn--secondary { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .abtn--secondary:hover { background: var(--bg-card); } .abtn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .abtn--ghost:hover { background: var(--bg-secondary); } .abtn--danger { background: #991b1b; color: #fff; border-color: #7f1d1d; } .abtn--danger:hover { background: #7f1d1d; } /* ── Compact form input ─────────────────────────────────── */ .ainput { padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-secondary); color: var(--text-primary); font-size: .79rem; outline: none; transition: border-color .12s; } .ainput:focus { border-color: var(--accent); } /* ── Compact table ──────────────────────────────────────── */ .atbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; } .atbl { width: 100%; border-collapse: collapse; font-size: .79rem; } .atbl thead th { background: var(--bg-secondary); padding: 7px 10px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); } .atbl tbody td { padding: 6px 10px; border-top: 1px solid var(--border); vertical-align: middle; } .atbl tbody tr:hover td { background: var(--bg-secondary); } .atbl-title { font-weight: 600; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atbl-muted { color: var(--text-muted); font-size: .74rem; white-space: nowrap; } .atbl-actions { white-space: nowrap; } .atbl-actions > * { margin-right: 3px; } .atbl-actions > *:last-child { margin-right: 0; } .atbl-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: .8rem; } /* ── Status badges ──────────────────────────────────────── */ .abadge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .abadge--green { background: #052e16; color: #4ade80; } .abadge--yellow { background: #1c1400; color: #fbbf24; } .abadge--red { background: #3b0a0a; color: #f87171; } .abadge--blue { background: #0c1a2e; color: #60a5fa; } .abadge--gray { background: var(--bg-secondary); color: var(--text-muted); } /* ── Tab count pill ─────────────────────────────────────── */ .atab-count { display: inline-block; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; font-size: .66rem; font-weight: 700; margin-left: 4px; line-height: 1.6; } /* ── Solid stat chips (fully colored background) ── */ .astat-chip { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 7px; min-width: 90px; } .astat-chip__val { font-size: 1.3rem; font-weight: 800; line-height: 1; } .astat-chip__lbl { font-size: .68rem; font-weight: 600; margin-top: 4px; opacity: .8; } .astat-chip--blue { background: #1e3a5f; color: #93c5fd; } .astat-chip--teal { background: #0d3330; color: #5eead4; } .astat-chip--red { background: #3b0a0a; color: #fca5a5; } .astat-chip--gray { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } .astat-chip--green { background: #052e16; color: #86efac; } .astat-chip--amber { background: #1c1400; color: #fcd34d; }