/* ============================================ JKV ROBOTICS RESEARCH LAB — DESIGN SYSTEM ============================================ */ /* Fonts are loaded via in each page's (single request, preconnected). Do not @import here — it duplicates the fetch and is render-blocking. */ /* ============================================ 1. CSS CUSTOM PROPERTIES ============================================ */ :root { /* Typography */ --font-display: 'Space Grotesk', 'Sora', sans-serif; --font-heading: 'Sora', 'Space Grotesk', sans-serif; --font-body: 'Inter', 'Plus Jakarta Sans', sans-serif; --font-accent: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-hero: clamp(2.5rem, 5vw, 4rem); --font-h2: clamp(1.75rem, 3.5vw, 2.75rem); --font-h3: clamp(1.25rem, 2vw, 1.5rem); --font-h4: clamp(1.1rem, 1.5vw, 1.25rem); --font-body-size: 1rem; --font-body-line: 1.7; --font-caption: 0.875rem; --font-eyebrow: 0.75rem; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Colors — Deep Navy base (dark-adapted) with Amber accent + Orange secondary Plan palette: Deep Navy #0A101F · Amber #F5A623 · Orange #FF8A00 · Off-white #F7F8FA */ --bg-base: #0A101F; --bg-surface: #0E1628; --bg-surface-alt: #14203A; --bg-card: rgba(18, 28, 50, 0.55); /* JKV brand — teal/cyan (matches official logo) */ --jkv-teal: #40C7BB; --jkv-teal-bright: #7DE3D6; --jkv-teal-dim: rgba(64, 199, 187, 0.14); --jkv-teal-muted: rgba(64, 199, 187, 0.32); --cyan: #22D3EE; --cyan-bright: #A5F3FC; --cyan-dim: rgba(34, 211, 238, 0.14); --cyan-glow: rgba(34, 211, 238, 0.20); /* Accent — Amber/Orange, used sparingly at full intensity */ --accent: #FF8A00; --accent-bright: #FFC933; --accent-dim: rgba(255, 138, 0, 0.14); --accent-muted: rgba(255, 138, 0, 0.30); --accent-glow: rgba(255, 138, 0, 0.18); --orange: #FF8A00; --orange-bright: #FFB02E; /* Secondary — Graphite / muted blue-grey */ --secondary: #44546A; --secondary-dim: rgba(68, 84, 106, 0.18); --secondary-muted: rgba(68, 84, 106, 0.30); /* Circuit accents — amber → orange, used for decorative gradients, testimonials, gallery active pills and certificate highlights */ --accent-teal: #F5A623; --accent-teal-bright: #FFC933; --accent-teal-dim: rgba(245, 166, 35, 0.14); --accent-violet: #FF8A00; --accent-violet-bright: #FFA94D; --accent-violet-dim: rgba(255, 138, 0, 0.20); --gradient-circuit: linear-gradient(135deg, var(--accent-teal), var(--accent-violet)); /* Hero design tokens — primary = amber, secondary = orange */ --accent-primary: var(--accent); --accent-secondary: var(--accent-violet); /* Warm accent — soft amber, site-wide accent family (savings badges, seat-urgency pills, conversions) */ --accent-warm: #F5A623; --accent-warm-bright: #FFC933; --accent-warm-dim: rgba(245, 166, 35, 0.14); --accent-warm-muted: rgba(245, 166, 35, 0.38); /* Text */ --text-primary: #F7F8FA; --text-secondary: #C9D1DE; --text-muted: #8FA0BF; --text-dim: #5C6B8A; /* Borders */ --border-color: rgba(255, 255, 255, 0.07); --border-light: rgba(255, 255, 255, 0.12); --border-accent: rgba(255, 138, 0, 0.30); --white: #ffffff; --black: #000000; --danger: #ff4d6a; --success: #35C3D9; /* Course accent themes (per-course, set on card / overlay) */ --course-accent: #FF8A00; --course-accent-bright: #FFC933; --course-accent-dim: rgba(255, 138, 0, 0.12); /* Spacing */ --section-padding-desktop: 120px; --section-padding-mobile: 64px; --card-padding: 32px; --card-padding-mobile: 24px; --grid-gap: 24px; --grid-gap-mobile: 16px; --container-max: 1280px; --container-padding: 24px; /* Radius */ --radius-card: 16px; --radius-button: 8px; --radius-pill: 50px; --radius-sm: 8px; /* Transitions */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* Shadows */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 12px 44px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 30px rgba(255, 138, 0, 0.18); } /* ============================================ 2. RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--font-body); font-size: var(--font-body-size); line-height: var(--font-body-line); color: var(--text-primary); background-color: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"), linear-gradient(rgba(148, 176, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 176, 255, 0.035) 1px, transparent 1px); background-size: 140px 140px, 64px 64px, 64px 64px; background-repeat: repeat, repeat, repeat; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); opacity: 0.55; } body::after { content: ''; position: fixed; inset: -10%; z-index: -3; pointer-events: none; background: radial-gradient(620px 480px at 10% 6%, rgba(34, 211, 238, 0.11), transparent 60%), radial-gradient(720px 560px at 92% 10%, rgba(255, 138, 0, 0.10), transparent 60%), radial-gradient(660px 500px at 45% 108%, rgba(255, 138, 0, 0.10), transparent 62%), radial-gradient(560px 440px at 82% 55%, rgba(64, 199, 187, 0.09), transparent 60%), radial-gradient(520px 420px at 18% 70%, rgba(34, 211, 238, 0.07), transparent 60%), radial-gradient(480px 380px at 65% 20%, rgba(76, 111, 255, 0.08), transparent 62%); animation: bgDrift 46s ease-in-out infinite alternate; } @keyframes bgDrift { from { transform: translate3d(-1.2%, -0.8%, 0); } to { transform: translate3d(1.2%, 0.8%, 0); } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* ============================================ 2b. LOADING SCREEN ============================================ */ .loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(640px 480px at 50% 42%, rgba(64, 199, 187, 0.10), transparent 65%), radial-gradient(520px 420px at 78% 30%, rgba(255, 138, 0, 0.08), transparent 60%), linear-gradient(180deg, #0A101F, #070C18); transition: opacity 0.55s ease, visibility 0.55s ease; } .loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 320px; } .loader__logo { position: relative; z-index: 2; width: 240px; height: auto; filter: drop-shadow(0 0 24px rgba(64, 199, 187, 0.6)); animation: loaderLogoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } .loader__halo { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(64, 199, 187, 0.35), transparent 70%); filter: blur(18px); animation: loaderHalo 2.4s ease-in-out infinite; } .loader__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid transparent; pointer-events: none; } .loader__ring--1 { width: 270px; height: 270px; border-top-color: rgba(64, 199, 187, 0.8); border-right-color: rgba(64, 199, 187, 0.15); animation: loaderSpin 2.2s linear infinite; } .loader__ring--2 { width: 310px; height: 310px; border-top-color: rgba(255, 138, 0, 0.7); border-left-color: rgba(255, 138, 0, 0.12); animation: loaderSpin 3.4s linear infinite reverse; } .loader__ring--3 { width: 350px; height: 350px; border-bottom-color: rgba(34, 211, 238, 0.5); border-left-color: rgba(34, 211, 238, 0.1); animation: loaderSpin 5s linear infinite; } .loader__bar { position: relative; z-index: 2; width: 180px; height: 2px; margin-top: 44px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .loader__bar span { display: block; height: 100%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, #40C7BB, #22D3EE, #FF8A00); animation: loaderBar 1.4s ease-in-out infinite; } .loader__text { position: relative; z-index: 2; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px; color: rgba(154, 165, 177, 0.8); animation: loaderText 1.6s ease-in-out infinite; } @keyframes loaderLogoIn { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes loaderHalo { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } } @keyframes loaderSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loaderBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } @keyframes loaderText { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .loader__ring, .loader__halo, .loader__bar span, .loader__text, .loader__logo { animation: none; } .hc-blob, .hc-spark, .hc-orb, .hk-chip, .jkv-holo, .jkv-core-logo, .jkv-particle-canvas { animation: none !important; } .hk-chip { --px: 0px; --py: 0px; } } /* Pause all hero (re)animation while the stage is off-screen or the tab is hidden — the SMIL + keyframe + blur work runs continuously otherwise and burns CPU/GPU. Toggled by initHeroIdle() in main.js. */ .jkv-hero-stage.is-idle * { animation: none !important; filter: none; } /* ---- Lucide icon baseline (icons only — never style arbitrary svg) ---- */ svg.lucide { display: inline-block; vertical-align: middle; flex: 0 0 auto; fill: none; stroke: currentColor; pointer-events: none; } /* ============================================ 3. TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: var(--font-hero); } h2 { font-size: var(--font-h2); } h3 { font-size: var(--font-h3); } h4 { font-size: var(--font-h4); } p { color: var(--text-muted); line-height: var(--font-body-line); } /* Eyebrow label — small uppercase accent text above headings */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--font-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); margin-bottom: 16px; } .section-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin-top: 16px; } /* ============================================ 4. LAYOUT UTILITIES ============================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .section { position: relative; padding: var(--section-padding-desktop) 0; } /* Ambient glows behind sections — alternate sides for scroll rhythm */ .section::before { content: ''; position: absolute; top: 12%; left: 0; width: 55%; height: 76%; background: radial-gradient(ellipse at left center, var(--accent-dim) 0%, transparent 70%); pointer-events: none; z-index: 0; } .section--alt::before { left: auto; right: 0; background: radial-gradient(ellipse at right center, var(--accent-violet-dim) 0%, transparent 70%); } .section .container { position: relative; z-index: 1; } .section--alt { background-color: var(--bg-surface); } .text-center { text-align: center; } .text-center .section-subtitle { margin-left: auto; margin-right: auto; } /* Grid utilities */ .grid { display: grid; gap: var(--grid-gap); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .workshop-grid { gap: 20px; } @media (min-width: 1280px) { .workshop-grid { grid-template-columns: repeat(4, 1fr); } } /* Flex utilities */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: 12px; } .gap-md { gap: 24px; } .gap-lg { gap: 32px; } /* ============================================ 5. NAVBAR ============================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base); } .navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), rgba(255, 138, 0, 0.45), transparent); opacity: 0; transition: opacity var(--transition-base); } .navbar.scrolled { background: linear-gradient(180deg, rgba(10, 16, 31, 0.82), rgba(10, 16, 31, 0.72)); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.04); padding: 12px 0; } .navbar.scrolled::after { opacity: 1; } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .navbar__brand { display: flex; align-items: center; position: relative; z-index: 1001; } .navbar__brand img { height: 44px; width: auto; object-fit: contain; filter: drop-shadow(0 0 14px rgba(64, 199, 187, 0.35)); transition: transform var(--transition-base), filter var(--transition-base); } .navbar__brand:hover img { filter: drop-shadow(0 0 22px rgba(64, 199, 187, 0.6)); transform: translateY(-1px); } .navbar__links { display: flex; align-items: center; gap: 32px; } .navbar__links a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: color var(--transition-fast); position: relative; } .navbar__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transform: scaleX(0); transform-origin: left center; transition: transform var(--transition-base); } .navbar__links a:hover, .navbar__links a.active { color: var(--text-primary); } .navbar__links a:hover::after, .navbar__links a.active::after { transform: scaleX(1); } .navbar__cta { margin-left: 8px; } /* Mobile hamburger */ .navbar__toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; z-index: 1001; } .navbar__toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition-base); } .navbar__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .navbar__toggle.active span:nth-child(2) { opacity: 0; } .navbar__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ============================================ 6. BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: var(--font-accent); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.4px; border-radius: 12px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; cursor: pointer; border: none; white-space: nowrap; position: relative; isolation: isolate; will-change: transform; } .btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.38) 50%, transparent 68%); background-size: 220% 100%; background-position: 130% 0; transition: background-position 0.65s ease; pointer-events: none; z-index: -1; } .btn:hover::after { background-position: -30% 0; } .btn:active { transform: translateY(0) scale(0.97); } .btn--primary { background: linear-gradient(135deg, #FFC933, #FFB02E 45%, #FF8A00); color: #0A101F; box-shadow: 0 10px 26px rgba(255, 138, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); } .btn--primary:hover { background: linear-gradient(135deg, #FFD97A, #FFC933 45%, #FF9A1F); box-shadow: 0 14px 38px rgba(255, 138, 0, 0.42), 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 26px rgba(34, 211, 238, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45); transform: translateY(-2px) scale(1.02); } .btn--primary.navbar__cta { background: linear-gradient(90deg, #FFB800, #FF8A00); color: #05131c; box-shadow: 0 10px 26px rgba(255, 138, 0, 0.35); border-radius: 12px; } .btn--primary.navbar__cta:hover { background: linear-gradient(90deg, #FFC933, #FF9A1F); box-shadow: 0 10px 30px rgba(255, 138, 0, 0.45), 0 0 22px rgba(34, 211, 238, 0.25); transform: translateY(-2px); } .btn--secondary { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: var(--radius-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--secondary:hover { border-color: var(--cyan); color: var(--cyan-bright); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 211, 238, 0.18); transform: translateY(-2px) scale(1.02); } .btn--ghost { background: transparent; color: var(--accent); padding: 8px 0; } .btn--ghost:hover { color: var(--accent-bright); } .btn--sm { padding: 10px 20px; font-size: 0.85rem; } .btn--pill { border-radius: var(--radius-pill); } .btn--full { width: 100%; } /* ============================================ 7. CARDS ============================================ */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: var(--card-padding); transition: all var(--transition-base); } .card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-card-hover), 0 0 34px var(--accent-glow); transform: translateY(-4px); } .card__icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--bg-surface-alt), var(--bg-surface)); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card:hover .card__icon { transform: scale(1.05); box-shadow: 0 0 30px var(--accent-glow); } .card__icon i, .card__icon svg.lucide { width: 24px; height: 24px; stroke-width: 1.8; } .card__title { font-size: var(--font-h4); margin-bottom: 12px; color: var(--text-primary); } .card__text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; } /* ============================================ 8. STAT COUNTERS ============================================ */ .stat-counter { text-align: center; padding: 24px; } .stat-counter__number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 8px; } .stat-counter__label { font-size: var(--font-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } /* ============================================ 9. BADGES ============================================ */ .badge { display: inline-block; padding: 4px 14px; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 1px; } .badge--accent { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-accent); } .badge--upcoming { background: rgba(245, 166, 35, 0.20); color: var(--accent-bright); border: 1px solid rgba(255, 201, 51, 0.45); backdrop-filter: blur(4px); } .badge--past { background: rgba(10, 16, 31, 0.55); color: var(--text-secondary); border: 1px solid var(--border-light); backdrop-filter: blur(4px); } .badge--trending, .badge--new, .badge--popular { background: rgba(245, 166, 35, 0.20); color: var(--accent-bright); border: 1px solid rgba(255, 201, 51, 0.45); backdrop-filter: blur(4px); } /* ============================================ 10. HERO SECTION ============================================ */ .jkv-hero { position: relative; overflow: hidden; background: #0a0e14; padding-top: 100px; padding-bottom: 60px; } .jkv-hero-bg-glow { position: absolute; top: -200px; right: -100px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(64,199,187,0.18) 0%, rgba(34,211,238,0.10) 40%, transparent 70%); filter: blur(60px); pointer-events: none; z-index: 0; } .jkv-hero::after { content: ''; position: absolute; left: -180px; bottom: -220px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(76, 111, 255, 0.16) 0%, rgba(110, 139, 255, 0.07) 45%, transparent 70%); filter: blur(70px); pointer-events: none; z-index: 0; } .jkv-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(34,211,238,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 62% 40%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse at 62% 40%, #000 18%, transparent 78%); pointer-events: none; z-index: 0; } .jkv-hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 40px 24px; } .jkv-hero-eyebrow { color: #22D3EE; font-weight: 600; letter-spacing: 3px; font-size: 13px; display: inline-flex; align-items: center; gap: 10px; } .jkv-hero-eyebrow::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #22D3EE); } .jkv-hero-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; color: #ffffff; line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0; } .jkv-gradient-text { background: linear-gradient(90deg, #40C7BB, #22D3EE 60%, #4C6FFF); -webkit-background-clip: text; background-clip: text; color: transparent; } .jkv-hero-desc { color: #9aa5b1; font-size: 17px; line-height: 1.7; max-width: 520px; margin-bottom: 32px; } .jkv-hero-ctas { display: flex; gap: 16px; margin-bottom: 40px; } .jkv-btn-primary, .jkv-btn-secondary { display: inline-flex; align-items: center; gap: 9px; } .jkv-btn-primary i, .jkv-btn-secondary i, .jkv-btn-primary svg, .jkv-btn-secondary svg { width: 17px; height: 17px; stroke-width: 2.2; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .jkv-btn-primary:hover i, .jkv-btn-primary:hover svg, .jkv-btn-secondary:hover i, .jkv-btn-secondary:hover svg { opacity: 1; transform: translateX(0); } .jkv-btn-primary { background: linear-gradient(90deg, #FFB800, #FF8A00); color: #05131c; font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.4px; padding: 15px 30px; border-radius: 999px; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 rgba(255,138,0,0); transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .jkv-btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); background-size: 220% 100%; background-position: 130% 0; transition: background-position 0.65s ease; z-index: -1; } .jkv-btn-primary:hover { box-shadow: 0 10px 34px rgba(255,138,0,0.45), 0 0 24px rgba(34,211,238,0.25); transform: translateY(-2px); } .jkv-btn-primary:hover::after { background-position: -30% 0; } .jkv-btn-secondary { border: 1px solid rgba(255,255,255,0.25); color: #ffffff; font-family: var(--font-accent); font-weight: 600; letter-spacing: 0.4px; padding: 15px 30px; border-radius: 999px; text-decoration: none; backdrop-filter: blur(8px); transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .jkv-btn-secondary:hover { border-color: #22D3EE; color: #22D3EE; box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 20px rgba(34,211,238,0.16); transform: translateY(-2px); } .jkv-hero-stats { display: flex; gap: 36px; } .jkv-stat strong { display: block; font-size: 22px; color: #40C7BB; font-family: var(--font-heading); } .jkv-stat span { font-size: 13px; color: #9aa5b1; } .jkv-hero-right { position: relative; height: 500px; } .jkv-hero-stage { position: relative; width: 100%; height: 100%; } .jkv-holo { width: 100%; height: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4)); } .jkv-particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .jkv-holo { position: relative; z-index: 1; } /* ---- JKV logo at the core ---- */ .jkv-core-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46%; z-index: 3; pointer-events: none; animation: hcLogoBreath 7s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(64,199,187,0.55)) drop-shadow(0 8px 24px rgba(0,0,0,0.55)); } .jkv-core-logo img { width: 100%; height: auto; display: block; } .hc-logo-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42%; aspect-ratio: 6.2; background: radial-gradient(50% 100% at 50% 50%, rgba(64,199,187,0.5), rgba(34,211,238,0.12) 60%, transparent 100%); filter: blur(28px); z-index: 2; pointer-events: none; } @keyframes hcLogoBreath { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } } /* ---- hero elements ---- */ .hc-blob { animation: hcBlobDrift 16s ease-in-out infinite alternate; } .hc-blob--violet { animation-delay: -6s; animation-duration: 22s; } @keyframes hcBlobDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-14px, 12px, 0); } } .hc-node { animation: hcNodePulse 3s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; } .hc-node circle { fill: #40C7BB; } @keyframes hcNodePulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } .hc-net-dot { fill: #22D3EE; filter: drop-shadow(0 0 6px rgba(34,211,238,0.9)); transform-box: fill-box; transform-origin: center; animation: hcNetPulse 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); } .hc-net-dot--o { fill: #FF8A00; filter: drop-shadow(0 0 6px rgba(255,138,0,0.9)); } @keyframes hcNetPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.55); opacity: 1; } } .hc-pulse-ring { transform-box: fill-box; transform-origin: center; animation: hcPulseRing 3.2s ease-out infinite; } @keyframes hcPulseRing { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } .hc-flow { stroke-dasharray: 6 8; animation: hcDashFlow 1.4s linear infinite; } @keyframes hcDashFlow { to { stroke-dashoffset: -14; } } .hc-scan { transform-box: fill-box; transform-origin: center; animation: hcScan 2.4s ease-in-out infinite; } @keyframes hcScan { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(30deg); } } .hc-core-ring { transform-box: fill-box; transform-origin: center; animation: hcSpin 26s linear infinite; } .hc-core-links { stroke-linecap: round; } @keyframes hcSpin { to { transform: rotate(360deg); } } .hc-pulse { stroke: #22D3EE; stroke-width: 2; fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: hcPulse 3.6s ease-out infinite; } @keyframes hcPulse { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } } .hc-spark { fill: #22D3EE; filter: drop-shadow(0 0 5px rgba(34,211,238,0.9)); transform-box: fill-box; transform-origin: center; animation: hcSpark 5s ease-in-out infinite; animation-delay: var(--d, 0s); } .hc-spark--violet { fill: #4C6FFF; filter: drop-shadow(0 0 5px rgba(76,111,255,0.9)); } @keyframes hcSpark { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; } 50% { transform: translate(-4px, 6px) scale(0.7); opacity: 0.35; } } /* floating hardware chips / modules */ .hc-chip-icon { transform-box: fill-box; transform-origin: center; animation: hcChipFloat 7s ease-in-out infinite; } .hc-chip-icon--t { animation-delay: 0s; } .hc-chip-icon--l { animation-delay: -2.2s; } .hc-chip-icon--r { animation-delay: -4.4s; } .hc-chip-icon--b { animation-delay: -3.1s; } .hc-arm { animation: hcArmSway 9s ease-in-out infinite; transform-box: fill-box; transform-origin: 452px 402px; } @keyframes hcArmSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes hcChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hc-hud { transform-box: fill-box; transform-origin: center; animation: hcHudFloat 6.5s ease-in-out infinite; } @keyframes hcHudFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; } 50% { transform: translateY(-7px) rotate(-1.2deg); opacity: 0.92; } } .hk-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 22px 44px rgba(0,0,0,0.45); animation: hkChipFloat 6s ease-in-out infinite; } .hk-chip--t { top: 34px; left: 6px; animation-delay: 0s; } .hk-chip--r { top: 96px; right: 0; animation-delay: -1.6s; } .hk-chip--l { bottom: 108px; left: -6px; animation-delay: -3.2s; } .hk-chip--b { bottom: 26px; right: 12px; animation-delay: -4.4s; } .hk-chip__icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; } .hk-chip__icon svg { width: 20px; height: 20px; stroke-width: 2; } .hk-chip__icon--cyan { color: #22D3EE; background: rgba(34,211,238,0.14); border: 1px solid rgba(34,211,238,0.35); box-shadow: inset 0 0 14px rgba(34,211,238,0.18); } .hk-chip__icon--blue { color: #6E8BFF; background: rgba(76,111,255,0.14); border: 1px solid rgba(76,111,255,0.35); box-shadow: inset 0 0 14px rgba(76,111,255,0.18); } .hk-chip__icon--violet { color: #8B9CFF; background: rgba(110,139,255,0.16); border: 1px solid rgba(110,139,255,0.4); box-shadow: inset 0 0 14px rgba(110,139,255,0.2); } .hk-chip__text { display: flex; flex-direction: column; line-height: 1.25; } .hk-chip__text b { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: #fff; } .hk-chip__text small { font-size: 10.5px; font-weight: 500; color: rgba(154,165,177,0.85); letter-spacing: 0.5px; text-transform: uppercase; } @keyframes hkChipFloat { 0%, 100% { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); } 50% { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 8px), 0); } } @media (max-width: 900px) { .jkv-hero-right { height: 420px; } .hk-chip__text small { display: none; } .hk-chip--l { display: none; } } .jkv-marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 0; position: relative; z-index: 1; } .jkv-marquee-track { display: inline-flex; animation: jkvMarqueeScroll 25s linear infinite; } .jkv-marquee-track span { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: rgba(154,165,177,0.5); padding-right: 40px; } @keyframes jkvMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 900px) { .jkv-hero-content { grid-template-columns: 1fr; } .jkv-hero-right { height: 320px; margin-top: 20px; } .jkv-core-logo { width: 52%; } } /* Page hero (inner pages) */ .page-hero { padding: 160px 0 80px; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { margin-bottom: 16px; } .page-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* ============================================ 11. WORKSHOP CARD — compact ============================================ */ .workshop-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; transition: all var(--transition-base); cursor: pointer; display: flex; flex-direction: column; } .workshop-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-card-hover); transform: translateY(-4px); } .workshop-card__banner { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-surface-alt); } /* Uniform crop regardless of source image dimensions */ .workshop-card__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; } /* Subtle dark overlay (bottom-to-top) so badges/text stay readable on any image */ .workshop-card__banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(10, 16, 31, 0.72) 0%, rgba(10, 16, 31, 0.28) 40%, rgba(10, 16, 31, 0) 72% ); pointer-events: none; } .workshop-card:hover .workshop-card__image { transform: scale(1.03); } .workshop-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 0.65rem; padding: 3px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .workshop-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .workshop-card__date { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .workshop-card__date i, .workshop-card__date svg.lucide { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; stroke-width: 2; } .workshop-card__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .workshop-card__badges { display: flex; align-items: center; gap: 6px; } .card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.02em; color: var(--text-secondary); background: var(--bg-surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; } .card-badge i, .card-badge svg.lucide { width: 12px; height: 12px; color: var(--accent); stroke-width: 2; flex-shrink: 0; } .card-badge:hover { border-color: var(--border-accent); box-shadow: 0 0 16px var(--accent-glow); color: var(--text-primary); } .workshop-card__title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .workshop-card__desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .workshop-card__details { margin-top: auto; padding-top: 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-teal-bright); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color var(--transition-fast), gap var(--transition-fast); } .workshop-card__details svg { width: 14px; height: 14px; transition: transform var(--transition-fast); } .workshop-card__details:hover { color: var(--accent); gap: 9px; } /* ============================================ 12. COURSE CARD — premium grid ============================================ */ .course-grid { gap: 28px; } .course-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; transition: all var(--transition-base); display: flex; flex-direction: column; cursor: pointer; } .course-card:hover { border-color: var(--course-accent, var(--border-accent)); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); transform: translateY(-6px); } /* --- Media / thumbnail header --- */ .course-card__media { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; overflow: hidden; } .course-card__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; transition: transform 300ms ease, filter 300ms ease; } .course-card:hover .course-card__art { transform: scale(1.03); filter: brightness(1.07) saturate(1.05); } @media (prefers-reduced-motion: no-preference) { .art-float { transform-box: fill-box; transform-origin: 50% 50%; animation: artFloat 5.5s ease-in-out infinite; } .art-float--slow { animation-duration: 7.5s; animation-delay: -2s; } .art-cursor { animation: artBlink 1.1s steps(1, end) infinite; } @keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes artBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } } .course-modal-icon-badge { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.12) 100%); border: 1px solid rgba(255,255,255,0.30); box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 6px rgba(255,255,255,0.05); transition: transform var(--transition-base), box-shadow var(--transition-base); width: 136px; height: 136px; border-radius: 34px; } .course-modal-icon-badge svg { width: 56px; height: 56px; color: var(--course-accent-bright, #fff); } .course-modal-icon-badge svg * { stroke-width: 1.4; } .course-card__cat { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(245, 166, 35, 0.18); color: #FFD97A; border-color: rgba(255, 201, 51, 0.4); backdrop-filter: blur(8px); } .course-card__tag { position: absolute; top: 12px; right: 12px; z-index: 2; } /* Per-course theme — set on the card root so every child can inherit */ .course-card--embedded { --course-accent: #F5A623; --course-accent-bright: #FFC933; } .course-card--iot { --course-accent: #F5A623; --course-accent-bright: #FFC933; } .course-card--python { --course-accent: #FF8A00; --course-accent-bright: #FFC933; } .course-card--networking { --course-accent: #FFB800; --course-accent-bright: #FFD97A; } .course-card--vlsi { --course-accent: #FF8A00; --course-accent-bright: #FFC933; } .course-card--marketing { --course-accent: #F5A623; --course-accent-bright: #FFD97A; } /* Gradient variants — deep navy canvas for the artwork */ .course-card__media--embedded { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #2b2408 140%); } .course-card__media--iot { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #2b2408 140%); } .course-card__media--python { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #2b1d08 140%); } .course-card__media--networking { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #2b2008 140%); } .course-card__media--vlsi { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #2b1d08 140%); } .course-card__media--marketing { background: linear-gradient(160deg, #0e1628 0%, #182240 55%, #33290a 140%); } /* --- Body --- */ .course-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .course-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.72rem; font-weight: 500; color: var(--text-muted); } .course-card__meta-item { display: inline-flex; align-items: center; gap: 5px; } .course-card__meta-item i, .course-card__meta-item svg.lucide { width: 13px; height: 13px; color: var(--accent); stroke-width: 2; } .course-card__rating { color: #e8c069; } .course-card__rating i, .course-card__rating svg.lucide { color: #e8c069; fill: currentColor; } .course-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .course-card__desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .course-card__topics { display: flex; flex-wrap: wrap; gap: 6px; } .course-card__topic { padding: 4px 10px; font-size: 0.68rem; font-weight: 500; border-radius: var(--radius-pill); background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: var(--text-muted); } .course-card__footer { border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .course-card__price { display: flex; flex-direction: column; line-height: 1.25; } .course-card__price-from { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .course-card__price-value { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent); } .course-card__meta-item i, .course-card__meta-item svg.lucide { color: var(--course-accent, var(--accent)); } /* --- Bestseller: gradient border + bottom ribbon --- */ .course-card--bestseller { border: 1.5px solid transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, var(--accent-warm) 0%, var(--accent) 48%, var(--accent-violet) 100%) border-box; } .course-card--bestseller:hover { border-color: transparent; } .course-card__ribbon { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: linear-gradient(90deg, rgba(232, 155, 92, 0.96), var(--accent-warm-bright)); color: #2A1A05; text-align: center; font-size: 0.62rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; padding: 5px 0; } /* --- Urgency / scarcity pill (warm accent) --- */ .course-card__urgency { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-secondary); padding: 7px 12px; border-radius: 10px; background: var(--accent-warm-dim); border: 1px solid var(--accent-warm-muted); margin-top: 4px; } .course-card__urgency strong { color: var(--accent-warm); font-weight: 700; } .course-card__urgency-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-dim); animation: urgencyPulse 1.6s ease-in-out infinite; flex-shrink: 0; } .course-card__urgency-sep { opacity: 0.45; margin: 0 2px; } @keyframes urgencyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --- Social proof: avatars + enrollment count --- */ .course-card__social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .course-card__avatars { display: flex; align-items: center; } .course-card__avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); margin-left: -7px; flex-shrink: 0; } .course-card__avatar:first-child { margin-left: 0; } .course-card__avatar--more { background: var(--bg-surface-alt); color: var(--text-muted); border-color: var(--border-light); font-size: 0.62rem; } .course-card__enrolled { font-size: 0.72rem; color: var(--text-muted); } .course-card__enrolled strong { color: var(--text-secondary); font-weight: 600; } /* --- Price anchoring: old price strikethrough + save badge --- */ .course-card__price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .course-card__old-price { font-size: 0.78rem; color: var(--text-dim); text-decoration: line-through; } .course-card__saving { font-size: 0.6rem; font-weight: 700; color: var(--accent-warm); background: var(--accent-warm-dim); border: 1px solid var(--accent-warm-muted); padding: 2px 8px; border-radius: var(--radius-pill); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; } /* --- CTA microcopy arrow --- */ .btn-arrow { display: inline-block; transition: transform var(--transition-fast); } .js-enroll:hover .btn-arrow { transform: translateX(3px); } /* Filter states */ .course-card.is-hidden { display: none; } .course-card.is-showing { animation: coursePop 0.45s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes coursePop { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Icon chip used in course modal header */ .course-card__icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-surface-alt), var(--bg-surface)); border: 1px solid var(--border-color); color: var(--accent); flex-shrink: 0; box-shadow: 0 0 16px var(--accent-glow); } .course-card__icon i, .course-card__icon svg.lucide, .course-card__icon svg { width: 24px; height: 24px; stroke-width: 1.8; } /* Modal category badge — violet (category color) */ #courseModalCategory { background: rgba(124, 91, 184, 0.2); color: var(--accent-violet-bright); border-color: rgba(124, 91, 184, 0.45); } /* ============================================ 12b. COURSE FILTER TABS ============================================ */ .course-filters { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: flex-start; margin-bottom: 44px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%); } .course-filters::-webkit-scrollbar { display: none; } @media (min-width: 901px) { .course-filters { justify-content: center; mask-image: none; -webkit-mask-image: none; } } .course-filter { padding: 9px 20px; border-radius: var(--radius-pill); border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .course-filter:hover { border-color: var(--border-accent); color: var(--text-primary); transform: translateY(-1px); } .course-filter.active { background: var(--accent); color: var(--bg-base); border-color: var(--accent); box-shadow: 0 6px 18px var(--accent-glow); } /* ============================================ 12b2. WHY LEARN WITH US — course stats bar ============================================ */ .course-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; } .course-stats__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 28px 16px; } .course-stats__item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: var(--border-color); } .course-stats__item i, .course-stats__item svg.lucide, .course-stats__item svg { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.8; margin-bottom: 4px; } .course-stats__num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0; } .course-stats__label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } @media (max-width: 700px) { .course-stats { grid-template-columns: repeat(2, 1fr); } .course-stats__item:nth-child(2)::after { display: none; } } /* ============================================ 12c. ENROLLMENT MODAL ============================================ */ .modal--enroll { max-width: 540px; } .enroll__header { margin-bottom: 24px; } .enroll__header h2 { margin-bottom: 8px; } .enroll__summary { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } .enroll__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .enroll__plan-select { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .enroll-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-surface-alt); cursor: pointer; transition: all var(--transition-fast); } .enroll-plan:hover { border-color: var(--border-accent); } .enroll-plan.selected { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); } .enroll-plan__name { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; } .enroll-plan__type { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } .enroll-plan__price { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .enroll-plan__radio { position: absolute; opacity: 0; pointer-events: none; } /* ============================================ 13. DIRECTOR / ABOUT SECTION ============================================ */ .director-card { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 48px; } .director-card__image { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-card); } .director-card__name { font-size: var(--font-h2); margin-bottom: 4px; } .director-card__role { font-size: 1rem; color: var(--accent); margin-bottom: 20px; } .director-card__bio { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.8; } .director-card__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .director-card__tag { padding: 6px 16px; font-size: 0.8rem; font-weight: 500; border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent); } .director-card__socials { display: flex; gap: 16px; } .director-card__socials a { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--text-muted); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .director-card__socials a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 120%, rgba(34, 211, 238, 0.25), transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .director-card__socials a i, .director-card__socials a svg { position: relative; z-index: 1; width: 18px; height: 18px; stroke-width: 2; } .director-card__socials a:hover { color: #fff; border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(34, 211, 238, 0.3); transform: translateY(-4px) scale(1.06); } .director-card__socials a:hover::before { opacity: 1; } /* ============================================ 14. TIMELINE ============================================ */ .timeline { position: relative; padding-left: 32px; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-color); } .timeline__item { position: relative; padding-bottom: 32px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ''; position: absolute; left: -37px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-base); } .timeline__year { font-size: var(--font-caption); color: var(--accent); font-weight: 600; margin-bottom: 4px; } .timeline__title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .timeline__org { font-size: 0.85rem; color: var(--text-muted); } /* ============================================ 16. CTA SECTION ============================================ */ .cta-section { position: relative; padding: var(--section-padding-desktop) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: radial-gradient(ellipse at 15% 0%, var(--accent-dim) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, var(--accent-violet-dim) 0%, transparent 55%); } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 860px; height: 860px; background: radial-gradient(circle, var(--accent-muted) 0%, transparent 65%); border-radius: 50%; pointer-events: none; filter: blur(10px); } .cta-section::after { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 62%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: 0.65; pointer-events: none; } .cta-section .container { position: relative; z-index: 1; } .cta-section h2 { margin-bottom: 16px; } .cta-section p { max-width: 500px; margin: 0 auto 32px; } /* ============================================ 17. CONTACT FORM ============================================ */ .contact-form { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 48px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.95rem; transition: border-color var(--transition-fast); outline: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-group textarea { resize: vertical; min-height: 120px; } .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238892a4' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .form-group select option { background: var(--bg-surface); color: var(--text-primary); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-error { font-size: 0.8rem; color: var(--danger); margin-top: 6px; display: none; } .form-group.error input, .form-group.error textarea, .form-group.error select { border-color: var(--danger); } .form-group.error .form-error { display: block; } .form-success { text-align: center; padding: 32px; } .form-success h3 { color: var(--accent); margin-bottom: 8px; } /* ============================================ 18. CONTACT INFO ============================================ */ .contact-info { display: flex; flex-direction: column; gap: 24px; } .contact-info__item { display: flex; gap: 16px; align-items: flex-start; } .contact-info__icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--bg-surface-alt), var(--bg-surface)); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; line-height: 1; box-shadow: 0 0 15px var(--accent-glow); } .contact-info__icon svg.lucide { display: block; width: 20px; height: 20px; stroke-width: 1.8; margin: 0; } /* Contact + footer icons must render as white stroke icons. Leaked global `svg.lucide` color/fill rules (e.g. .course-fact i, svg.lucide) otherwise paint every lucide icon accent-orange with a solid fill. */ .contact-info__icon svg.lucide, .footer__contact-item span:first-child svg.lucide { color: #fff; fill: none; stroke: currentColor; } .contact-info__label { font-size: var(--font-caption); color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .contact-info__value { font-size: 0.95rem; color: var(--text-primary); } .contact-info__value a { color: var(--text-primary); } .contact-info__value a:hover { color: var(--accent); } /* Map */ .contact-map { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-color); margin-top: 32px; } .contact-map iframe { width: 100%; height: 300px; border: none; filter: grayscale(0.5) brightness(0.7); } /* ============================================ 19. FOOTER — Codenix-matching structure ============================================ */ .footer { position: relative; background: radial-gradient(900px 340px at 50% -120px, rgba(64, 199, 187, 0.08), transparent 70%), radial-gradient(700px 300px at 92% 0%, rgba(255, 138, 0, 0.05), transparent 70%), linear-gradient(180deg, rgba(10, 16, 31, 0.6), var(--bg-surface)); border-top: 1px solid var(--border-color); padding: 72px 0 0; overflow: hidden; } .footer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 140px); mask-image: linear-gradient(180deg, transparent, #000 140px); } /* Subtle border-glow line along the top edge */ .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #40C7BB, #22D3EE, #FF8A00, transparent); opacity: 0.7; pointer-events: none; } .footer > .container { position: relative; z-index: 1; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr 1.4fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--border-color); margin-bottom: 28px; } .footer__logo img { height: 46px; width: auto; object-fit: contain; filter: drop-shadow(0 0 16px rgba(64, 199, 187, 0.35)); transition: filter var(--transition-base), transform var(--transition-base); } .footer__logo:hover img { filter: drop-shadow(0 0 24px rgba(64, 199, 187, 0.6)); transform: translateY(-1px); } .footer__desc { margin-top: 18px; font-size: 0.9rem; line-height: 1.75; color: var(--text-muted); max-width: 320px; } .footer__socials { display: flex; gap: 10px; margin-top: 22px; } .footer__socials a { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--text-muted); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .footer__socials a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 120%, rgba(34, 211, 238, 0.25), transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .footer__socials a svg { position: relative; z-index: 1; display: block; width: 17px; height: 17px; } .footer__socials a:hover { color: #fff; border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(34, 211, 238, 0.3); transform: translateY(-4px) scale(1.06); } .footer__socials a:hover::before { opacity: 1; } /* Brand-aware social icon hovers (official brand colors) */ .footer__socials a[aria-label="LinkedIn"]:hover, .director-card__socials a[aria-label="LinkedIn"]:hover { color: #0A66C2; border-color: #0A66C2; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(10, 102, 194, 0.45); } .footer__socials a[aria-label="YouTube"]:hover, .director-card__socials a[aria-label="YouTube"]:hover { color: #FF0000; border-color: #FF0000; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 0, 0, 0.4); } .footer__socials a[aria-label="X (Twitter)"]:hover, .director-card__socials a[aria-label="X (Twitter)"]:hover { color: #E7E9EA; border-color: rgba(231, 233, 234, 0.7); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(231, 233, 234, 0.25); } .footer__socials a[aria-label="Instagram"]:hover, .director-card__socials a[aria-label="Instagram"]:hover { color: #E4405F; border-color: #E4405F; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(228, 64, 95, 0.45); } .footer__socials a[aria-label="GitHub"]:hover, .director-card__socials a[aria-label="GitHub"]:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 255, 255, 0.2); } .director-card__socials a[aria-label="Email"]:hover { color: #22D3EE; border-color: #22D3EE; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 20px rgba(34, 211, 238, 0.35); } .footer__col { min-width: 0; } .footer__heading { font-family: var(--font-accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-primary); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; } .footer__heading::before { content: ''; width: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22D3EE, #FF8A00); } .footer__links li { margin-bottom: 10px; } .footer__links a { position: relative; font-size: 0.86rem; color: var(--text-muted); transition: color var(--transition-fast), padding-left var(--transition-fast); } .footer__links a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: linear-gradient(90deg, #22D3EE, #FF8A00); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; } .footer__links a:hover { color: var(--text-primary); padding-left: 4px; } .footer__links a:hover::after { transform: scaleX(1); } .footer__contact-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); } .footer__contact-item a { color: var(--text-muted); transition: color var(--transition-fast); } .footer__contact-item a:hover { color: var(--cyan-bright); } .footer__contact-item span:first-child { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all var(--transition-fast); } .footer__contact-item:hover span:first-child { border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 16px rgba(34, 211, 238, 0.25); transform: translateY(-1px); } .footer__contact-item span:first-child svg.lucide { display: block; width: 16px; height: 16px; stroke-width: 2; margin: 0; } .footer__newsletter .footer__nl-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; } .footer__nl-form { position: relative; display: flex; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 12px; padding: 4px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .footer__nl-form:focus-within { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); } .footer__nl-form input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; padding: 10px 12px; font-size: 0.86rem; color: var(--text-primary); } .footer__nl-form input::placeholder { color: var(--text-dim); } .footer__nl-btn { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #40C7BB, #22D3EE); color: #06131a; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; flex-shrink: 0; } .footer__nl-btn svg { width: 16px; height: 16px; stroke-width: 2.2; } .footer__nl-btn:hover { transform: translateX(2px) scale(1.05); box-shadow: 0 0 18px rgba(34, 211, 238, 0.45); } .footer__nl-msg { margin-top: 10px; font-size: 0.8rem; min-height: 1.2em; color: var(--success); } .footer__nl-msg.is-error { color: var(--danger); } .footer__bottom { padding: 22px 0 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; } .footer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .footer__copyright { font-size: 0.8rem; color: var(--text-dim); } .footer__meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); opacity: 0.55; flex-shrink: 0; } .footer__legal { display: flex; gap: 20px; } .footer__legal a { position: relative; font-size: 0.8rem; color: var(--text-muted); transition: color var(--transition-fast); } .footer__legal a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: linear-gradient(90deg, #22D3EE, #FF8A00); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; } .footer__legal a:hover { color: var(--text-primary); } .footer__legal a:hover::after { transform: scaleX(1); } .footer__credit-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 14px; text-decoration: none; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .footer__credit-badge img { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; background: rgba(255, 255, 255, 0.10); filter: drop-shadow(0 0 6px rgba(64, 199, 187, 0.35)); transition: transform var(--transition-fast), filter var(--transition-fast); } .footer__credit-badge-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: nowrap; } .footer__credit-badge-label { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); } .footer__credit-badge-name { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-primary); transition: color var(--transition-fast); } .footer__credit-badge:hover { border-color: rgba(64, 199, 187, 0.45); box-shadow: 0 0 20px rgba(64, 199, 187, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: translateY(-1px); } .footer__credit-badge:hover .footer__credit-badge-name { color: var(--jkv-teal-bright, #7DE3D6); } .footer__credit-badge:hover img { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(64, 199, 187, 0.5)); } /* Scroll-to-top */ .back-to-top { position: fixed; right: 22px; bottom: 26px; z-index: 900; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #A5F3FC; background: linear-gradient(160deg, rgba(34, 211, 238, 0.14), rgba(64, 199, 187, 0.08)); border: 1px solid rgba(34, 211, 238, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 260ms ease, transform 260ms ease, visibility 260ms ease, box-shadow 260ms ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 185, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-3px); } .back-to-top:active { transform: translateY(0) scale(0.96); } .back-to-top svg { width: 18px; height: 18px; stroke-width: 2.2; } /* Navbar logo */ .navbar__logo { height: 44px; width: auto; object-fit: contain; } /* ============================================ 20. SCROLL REVEAL ANIMATIONS ============================================ */ /* Reveal is purely decorative: content is ALWAYS visible by default. The fade-up animation only plays when JS confirms the element is in view. If JS fails to load or IntersectionObserver is unavailable, the page still shows full content - it can never appear blank. */ .reveal { opacity: 1; transform: none; } .js .reveal.reveal-played { animation: reveal-up 0.65s ease both; } @keyframes reveal-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .js .reveal-delay-1.reveal-played { animation-delay: 0.1s; } .js .reveal-delay-2.reveal-played { animation-delay: 0.2s; } .js .reveal-delay-3.reveal-played { animation-delay: 0.3s; } .js .reveal-delay-4.reveal-played { animation-delay: 0.4s; } /* ============================================ 21. WORKSHOP DETAIL PAGE ============================================ */ .workshop-banner { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--radius-card); margin-bottom: 48px; } .workshop-detail__meta { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; } .workshop-detail__meta-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-muted); } .workshop-detail__meta-item span:first-child { color: var(--accent); } .workshop-detail h2 { margin-bottom: 16px; } .workshop-detail h3 { margin-bottom: 12px; margin-top: 32px; } .workshop-detail ul { padding-left: 0; } .workshop-detail ul li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--text-muted); font-size: 0.95rem; } .workshop-detail ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .schedule-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .schedule-table th, .schedule-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border-color); } .schedule-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); font-weight: 600; background: var(--bg-surface-alt); } .schedule-table td { font-size: 0.9rem; color: var(--text-muted); } .schedule-table tr:hover td { background: var(--bg-surface-alt); } /* ============================================ 22. RESPONSIVE — MOBILE FIRST ============================================ */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .workshop-grid { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } .footer__newsletter { grid-column: 1 / -1; } .director-card { grid-template-columns: 1fr; gap: 32px; padding: 32px; } .director-card__image { max-width: 300px; margin: 0 auto; } } /* Footer bottom bar: switch to a stacked, centered layout before the two groups would collide and wrap awkwardly. */ @media (max-width: 880px) { .footer__bottom { flex-direction: column; text-align: center; } .footer__meta { flex-direction: column; gap: 8px; } .footer__meta-sep { display: none; } } @media (max-width: 768px) { :root { --section-padding-desktop: 80px; --section-padding-mobile: 56px; --card-padding: 24px; --grid-gap: 20px; } .section { padding: var(--section-padding-mobile) 0; } .navbar__links { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--bg-surface); flex-direction: column; align-items: flex-start; padding: 80px 32px 32px; gap: 24px; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3); transition: right var(--transition-base); z-index: 999; } .navbar__links.open { right: 0; } .navbar__links a { font-size: 1rem; } .navbar__toggle { display: flex; } .navbar__cta { display: none; } .grid-2, .grid-3, .grid-4, .workshop-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer__columns { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__top { text-align: center; } .footer__top .navbar__brand { justify-content: center; } .footer__tagline { max-width: none; } .footer__top .footer__socials { justify-content: center; } .footer__bottom { flex-direction: column; text-align: center; } .footer__meta { flex-direction: column; gap: 8px; } .footer__meta-sep { display: none; } .page-hero { padding: 120px 0 60px; } .director-card { padding: 24px; } .contact-form { padding: 32px 24px; } .workshop-detail__meta { flex-direction: column; gap: 12px; } } @media (max-width: 480px) { :root { --container-padding: 16px; } .stat-counter__number { font-size: 2rem; } .footer__columns { grid-template-columns: 1fr; } } /* ============================================ 23. MOBILE NAV OVERLAY ============================================ */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .nav-overlay.active { opacity: 1; pointer-events: auto; } /* ============================================ 24. LIGHTBOX — dark theme with prev/next ============================================ */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5, 8, 18, 0.94); backdrop-filter: blur(6px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .lightbox.active { opacity: 1; pointer-events: auto; } .lightbox__figure { max-width: 88%; max-height: 84vh; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lightbox__figure img { max-width: 100%; max-height: 76vh; border-radius: var(--radius-card); border: 1px solid var(--border-color); box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); } .lightbox__caption { font-size: 0.85rem; color: var(--text-secondary); letter-spacing: 0.3px; } .lightbox__close, .lightbox__nav { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); background: rgba(22, 35, 61, 0.7); border: 1px solid var(--border-light); transition: all var(--transition-fast); } .lightbox__close { top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; } .lightbox__close:hover { color: var(--white); border-color: var(--border-accent); box-shadow: 0 0 18px var(--accent-glow); } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; } .lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; } .lightbox__nav i, .lightbox__nav svg.lucide { width: 20px; height: 20px; } .lightbox__nav:hover { color: var(--accent); border-color: var(--border-accent); box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-50%) scale(1.06); } .lightbox__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 1px; color: var(--text-dim); background: rgba(22, 35, 61, 0.7); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 5px 14px; } /* ============================================ 25. PRICING TABLE (Courses) ============================================ */ .pricing-table { width: 100%; border-collapse: collapse; margin-top: 16px; } .pricing-table th, .pricing-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } .pricing-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); font-weight: 600; } .pricing-table td { color: var(--text-muted); } .pricing-table td:last-child { color: var(--accent); font-weight: 600; } /* ============================================ 26. SCROLLBAR STYLING ============================================ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--bg-surface-alt); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ============================================ 27. WORKSHOP MODAL ============================================ */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 40px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; overflow-y: auto; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-card); width: 100%; max-width: 700px; position: relative; transform: translateY(12px) scale(0.97); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active .modal { transform: translateY(0) scale(1); } .modal__close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all var(--transition-fast); } .modal__close:hover { background: var(--accent); color: var(--bg-base); border-color: var(--accent); } .modal__banner { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-card) var(--radius-card) 0 0; } .modal__banner-placeholder { width: 100%; height: 280px; background: linear-gradient(135deg, var(--accent-dim), var(--bg-surface-alt)); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card) var(--radius-card) 0 0; } .modal__banner-placeholder span { font-size: 5rem; } .modal__course-header { display: flex; align-items: center; gap: 16px; } .modal__body { padding: 32px; } .modal__body h2 { margin-bottom: 16px; font-size: var(--font-h2); } .modal__body h3 { margin-bottom: 12px; margin-top: 32px; font-size: var(--font-h3); } .modal__body p { margin-bottom: 12px; } .modal__body ul { padding-left: 0; } .modal__body ul li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--text-muted); font-size: 0.95rem; } .modal__body ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .modal__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .modal__meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); } .modal__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; } .modal__gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--transition-base); } .modal__gallery img:hover { transform: scale(1.03); } @media (max-width: 768px) { .modal-overlay { padding: 40px 8px 20px; } .modal__body { padding: 20px 16px; } .modal__banner, .modal__banner-placeholder { height: 200px; } .modal__gallery { grid-template-columns: repeat(2, 1fr); } .modal__gallery img { height: 120px; } .modal__course-header { flex-direction: column; align-items: flex-start; } } /* ============================================ 28. SECTION HEADING — reusable center style ============================================ */ .section--heading { text-align: center; margin-bottom: 48px; } .section--heading h2 { position: relative; } .section--heading h2::after { content: ''; display: block; width: 68px; height: 3px; margin: 16px auto 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-violet)); } .section--heading .section-subtitle { margin-left: auto; margin-right: auto; } /* ============================================ 29. PRINT ============================================ */ @media print { .navbar, .footer, .cta-section, .modal-overlay { display: none; } body { background: white; color: black; } } /* ============================================ 31. GALLERY — uniform grid + caption overlays ============================================ */ .gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; } .gallery-filter { padding: 8px 22px; border-radius: var(--radius-pill); border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; transition: all var(--transition-base); } .gallery-filter:hover { color: var(--accent-teal-bright); border-color: var(--accent-teal); } /* Active = teal fill pill; inactive = outline */ .gallery-filter.active { background: var(--accent-teal); color: var(--bg-base); border-color: var(--accent-teal); box-shadow: 0 4px 18px var(--accent-teal-dim); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .gallery-item { position: relative; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-color); aspect-ratio: 4/3; cursor: pointer; background: var(--bg-surface); transition: all var(--transition-base); } .gallery-item:hover { border-color: var(--accent-teal); box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45), 0 0 26px var(--accent-teal-dim); transform: translateY(-3px); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .gallery-item:hover img { transform: scale(1.06); } /* Dark overlay + caption fade-in on hover */ .gallery-item__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, transparent 45%, rgba(6, 10, 22, 0.86) 100%); opacity: 0; transition: opacity var(--transition-base); } .gallery-item:hover .gallery-item__overlay { opacity: 1; } .gallery-item__caption { font-size: 0.82rem; font-weight: 600; color: var(--white); transform: translateY(8px); transition: transform var(--transition-base); } .gallery-item:hover .gallery-item__caption { transform: translateY(0); } .gallery-item.is-hidden { display: none; } /* Failed images fall back to a dark-themed placeholder SVG */ .gallery-item img.img-fallback, .modal__gallery img.img-fallback, .workshop-card__image.img-fallback, .modal__banner.img-fallback { object-fit: cover; background: var(--bg-surface); } /* Workshops loaded from Supabase: loading / empty states */ .workshop-status { grid-column: 1 / -1; text-align: center; padding: 44px 0; color: var(--text-muted); font-size: 0.95rem; } /* ============================================ 32. TESTIMONIAL CAROUSEL ============================================ */ .carousel { max-width: 820px; margin: 0 auto; overflow: hidden; } .carousel__track { display: flex; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-slide { flex: 0 0 100%; padding: 0 4px; } .testimonial-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 40px; transition: all var(--transition-base); } .testimonial-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-card-hover), 0 0 30px var(--accent-glow); } /* Large quote icon — accent colored, not a plain text glyph */ .testimonial-card__quote { position: absolute; top: 32px; right: 36px; width: 34px; height: 34px; color: var(--accent); stroke-width: 1.4; opacity: 0.8; filter: drop-shadow(0 0 12px var(--accent-glow)); } .testimonial-card__avatar { position: absolute; top: 40px; left: 40px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gradient-circuit); color: var(--white); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; box-shadow: 0 0 0 3px var(--bg-surface), 0 0 22px var(--accent-teal-dim); } .testimonial-card__text { font-size: 1rem; color: var(--text-secondary); font-style: italic; margin: 0 0 20px; padding-left: 64px; padding-top: 4px; } .testimonial-card__author { padding-left: 64px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .testimonial-card__role { padding-left: 64px; font-size: 0.82rem; color: var(--text-dim); } .carousel__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; } .carousel__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .carousel__arrow:hover { border-color: var(--border-accent); color: var(--accent); } .carousel__arrow i, .carousel__arrow svg.lucide { width: 18px; height: 18px; } .carousel__dots { display: flex; gap: 8px; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-surface-alt); border: 1px solid var(--border-color); transition: all var(--transition-fast); } .carousel-dot.active { background: var(--accent); width: 22px; border-radius: var(--radius-pill); } /* ============================================ 33. CERTIFICATE SHOWCASE ============================================ */ .cert-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; width: 100%; } .cert-showcase__visual, .cert-showcase__copy { min-width: 0; } #certificate { overflow-x: hidden; } .cert-showcase__visual { position: relative; } /* Soft circuit glow behind the certificate */ .cert-showcase__visual::before { content: ''; position: absolute; inset: -8%; background: radial-gradient(circle at 30% 20%, var(--accent-teal-dim) 0%, transparent 55%), radial-gradient(circle at 80% 80%, var(--accent-violet-dim) 0%, transparent 55%); filter: blur(18px); pointer-events: none; } .cert-card { position: relative; background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-card) 100%); border: 1px solid var(--border-accent); border-radius: var(--radius-card); padding: 32px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-accent), 0 0 46px var(--accent-glow), var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--transition-base); } .cert-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--border-accent), 0 0 70px var(--accent-glow), var(--shadow-card-hover); } /* Paper texture — fine dot grid + soft vignette */ .cert-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--border-light) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.35; pointer-events: none; } /* Accent wash overlay */ .cert-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-dim), transparent 50%); pointer-events: none; } /* Corner ribbon — "Sample" */ .cert-card__ribbon { position: absolute; top: 20px; right: 20px; z-index: 3; padding: 5px 16px; border-radius: var(--radius-pill); background: var(--gradient-circuit); color: var(--white); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transform: rotate(6deg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .cert-card__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-light); } .cert-card__logo { width: 44px; height: 44px; object-fit: contain; } .cert-card__org { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; font-size: 0.85rem; } .cert-card__body { position: relative; z-index: 1; text-align: center; padding: 32px 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .cert-card__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; } .cert-card__line { color: var(--text-muted); font-size: 0.85rem; } .cert-card__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: 4px; color: var(--text-primary); } .cert-card__course { font-family: var(--font-display); font-weight: 600; color: var(--text-secondary); } .cert-card__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px dashed var(--border-light); font-size: 0.8rem; color: var(--text-muted); } .cert-card__foot span:first-child { font-weight: 600; color: var(--text-secondary); } .cert-showcase__copy h3 { margin-bottom: 12px; } .cert-showcase__copy p { color: var(--text-muted); margin-bottom: 20px; } /* Teal feature list with badge-check icons */ .cert-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .cert-features li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 0.92rem; } .cert-features i, .cert-features svg.lucide, .cert-features svg { width: 20px; height: 20px; color: var(--accent-teal); flex-shrink: 0; margin-top: 3px; filter: drop-shadow(0 0 8px var(--accent-teal-dim)); } /* Reusable glow CTA */ .btn--glow { box-shadow: 0 0 24px var(--accent-glow); } .btn--glow:hover { box-shadow: 0 0 38px var(--accent-muted); } /* ============================================ 34. BLOG CARDS — gradient media headers ============================================ */ .blog-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; transition: all var(--transition-base); } .blog-card:hover { transform: translateY(-5px); border-color: var(--border-accent); box-shadow: var(--shadow-card-hover), 0 0 30px var(--accent-glow); } .blog-card__media { position: relative; height: 150px; overflow: hidden; background: linear-gradient(155deg, #0e1628 0%, #182240 58%, #2b2008 135%); } .blog-card--trends .blog-card__media { background: linear-gradient(155deg, #0e1628 0%, #182240 58%, #2b2008 135%); } .blog-card--recap .blog-card__media { background: linear-gradient(155deg, #0e1628 0%, #182240 58%, #2b1d08 135%); } .blog-card--career .blog-card__media { background: linear-gradient(155deg, #0e1628 0%, #182240 58%, #2b2208 135%); } .blog-card__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; transition: transform 300ms ease, filter 300ms ease; } .blog-card:hover .blog-card__art { transform: scale(1.04); filter: brightness(1.08); } .blog-card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 14px; border-radius: var(--radius-pill); background: rgba(10, 16, 31, 0.7); color: var(--white); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); } .blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; } .blog-card__title { font-size: 1.05rem; line-height: 1.4; } .blog-card__excerpt { font-size: 0.88rem; color: var(--text-muted); flex: 1; } .blog-card__meta { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); padding-top: 4px; border-top: 1px dashed var(--border-color); } .blog-card__meta i, .blog-card__meta svg { width: 14px; height: 14px; color: var(--accent); } /* ============================================ 35. FAQ ACCORDION — pro UI ============================================ */ /* Circuit-trace decoration on the section background */ #faq { position: relative; overflow: hidden; } #faq::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(245, 166, 35, 0.06) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } #faq::after { content: ''; position: absolute; top: 96px; left: 0; right: 0; height: 2px; background-image: repeating-linear-gradient( 90deg, var(--border-accent) 0 12px, transparent 12px 30px ); opacity: 0.4; pointer-events: none; animation: circuitFlow 16s linear infinite; } @keyframes circuitFlow { to { background-position-x: 240px; } } #faq .container { position: relative; z-index: 1; } .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .faq-item:hover { border-color: var(--border-accent); box-shadow: 0 0 26px var(--accent-glow); } .faq-item:focus-within { border-color: var(--border-accent); box-shadow: 0 0 26px var(--accent-glow); } .faq-item.open { border-color: var(--border-accent); box-shadow: var(--shadow-card-hover); } /* Left accent gradient bar on the expanded item */ .faq-item.open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-card) 0 0 var(--radius-card); background: var(--gradient-circuit); z-index: 1; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; color: var(--text-primary); font-weight: 600; font-size: 0.95rem; text-align: left; background: none; border: none; cursor: pointer; line-height: 1.5; } .faq-question__text { display: flex; flex-direction: column; gap: 8px; } .faq-tag { align-self: flex-start; padding: 3px 12px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-accent); } .faq-question__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: var(--accent); transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base); } .faq-question__icon svg { width: 16px; height: 16px; stroke-width: 2; } .faq-item.open .faq-question__icon { transform: rotate(180deg); background: var(--accent-dim); border-color: var(--border-accent); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 24px; } .faq-item.open .faq-answer { max-height: 320px; padding: 0 24px 22px; } .faq-answer p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; } @media (max-width: 768px) { .faq-question { padding: 18px 18px; font-size: 0.9rem; } .faq-answer { padding: 0 18px; } .faq-item.open .faq-answer { padding: 0 18px 18px; } } /* ============================================ 36. BOOK A WORKSHOP ============================================ */ .book-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 48px; max-width: 860px; margin: 0 auto; } /* ============================================ 37. WHATSAPP FLOAT ============================================ */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 2000; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; background: linear-gradient(160deg, #2EEb72 0%, #25D366 45%, #1FB959 100%); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(37, 211, 102, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 14px rgba(0, 0, 0, 0.18); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; animation: waFloat 4.5s ease-in-out infinite; } .whatsapp-float__icon { display: flex; align-items: center; justify-content: center; color: #ffffff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28)); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .whatsapp-float__ripple { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.75); pointer-events: none; animation: waRipple 2.8s ease-out infinite; } .whatsapp-float__ripple::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.5); animation: waRipple 2.8s ease-out infinite 1.4s; } .whatsapp-float__tooltip { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; padding: 8px 14px; border-radius: 10px; background: rgba(10, 16, 31, 0.9); border: 1px solid rgba(37, 211, 102, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #eaf6ff; font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 44px rgba(37, 211, 102, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .whatsapp-float:hover .whatsapp-float__icon { transform: rotate(-8deg) scale(1.06); } .whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } .whatsapp-float:active { transform: scale(0.94); } @keyframes waRipple { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes waFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ============================================ 40. COURSE DETAIL OVERLAY ============================================ */ .modal--course { max-width: 900px; } .course-detail__media { height: 180px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-card) var(--radius-card) 0 0; position: relative; overflow: hidden; } .course-detail__media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.35; } .course-detail__media .course-modal-icon-badge svg { width: 56px; height: 56px; } .course-detail__media .course-modal-icon-badge svg * { stroke-width: 1.4; } .course-detail__media .course-modal__art { display: block; width: auto; height: 100%; max-width: 100%; z-index: 2; flex-shrink: 0; pointer-events: none; } .course-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; } .course-fact { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .course-fact i, .course-fact svg.lucide { width: 18px; height: 18px; color: var(--course-accent, var(--accent)); flex-shrink: 0; margin-top: 2px; } .course-fact__label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; } .course-fact__value { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; } /* Tabs */ .course-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border-color); margin-top: 24px; } .course-tab { padding: 12px 20px; font-weight: 600; font-size: 0.88rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--transition-fast); } .course-tab:hover { color: var(--text-primary); } .course-tab.active { color: var(--course-accent, var(--accent)); border-bottom-color: var(--course-accent, var(--accent)); } /* Panels */ .course-panel { display: none; padding-top: 8px; } .course-panel.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .course-block { margin-top: 20px; } .course-block h3 { font-size: 1rem; margin-bottom: 12px; } .course-check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .course-check-list li { position: relative; padding-left: 28px; color: var(--text-muted); font-size: 0.92rem; } .course-check-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--border-accent); } .course-check-list li::after { content: '✓'; position: absolute; left: 0; top: 2px; width: 16px; text-align: center; font-size: 0.68rem; color: var(--accent); } .course-check-list--accent li::before { background: var(--course-accent-dim, var(--accent-dim)); } .course-check-list--accent li::after { color: var(--course-accent, var(--accent)); } .course-modules { list-style: none; counter-reset: module; display: flex; flex-direction: column; gap: 10px; } .course-modules li { position: relative; padding-left: 40px; color: var(--text-secondary); font-size: 0.92rem; counter-increment: module; } .course-modules li::before { content: counter(module, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-surface-alt); border: 1px solid var(--border-accent); color: var(--course-accent, var(--accent)); font-family: var(--font-mono); font-size: 0.72rem; display: flex; align-items: center; justify-content: center; } /* Pricing cards */ .plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .plan-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 24px; cursor: pointer; transition: all var(--transition-base); display: flex; flex-direction: column; gap: 8px; } .plan-card:hover { border-color: var(--border-light); transform: translateY(-3px); } .plan-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); } .plan-card--featured:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-card-hover); } .plan-card.selected { border-color: var(--accent); } .plan-card__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--bg-base); font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: 0 6px 18px var(--accent-glow); } .plan-card__name { font-family: var(--font-display); font-size: 1.05rem; margin-top: 6px; } .plan-card__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .plan-card__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; color: var(--accent); } .plan-card__old-price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim); text-decoration: line-through; } .plan-card__saving { font-size: 0.6rem; font-weight: 700; color: var(--accent-warm); background: var(--accent-warm-dim); border: 1px solid var(--accent-warm-muted); padding: 2px 8px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .plan-card__trust { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 12px; padding-top: 10px; border-top: 1px dashed var(--border-color); } .plan-card__trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--text-muted); } .plan-card__trust i, .plan-card__trust svg.lucide, .plan-card__trust svg { width: 12px; height: 12px; color: var(--course-accent, var(--accent)); stroke-width: 2; } .plan-card__enroll { width: 100%; } .plan-card__tag { font-size: 0.75rem; color: var(--text-secondary); } .plan-card__includes { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .plan-card__includes li { position: relative; padding-left: 22px; font-size: 0.85rem; color: var(--text-muted); } .plan-card__includes li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .plan-emi { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--accent-dim); border: 1px dashed var(--border-accent); color: var(--text-secondary); font-size: 0.85rem; text-align: center; } /* ============================================ 41. COMPARE MODAL ============================================ */ .modal--wide { max-width: 1080px; } .table-scroll { overflow-x: auto; } .compare-table { width: 100%; border-collapse: collapse; min-width: 720px; } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.88rem; vertical-align: top; } .compare-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; } .compare-table th.col-popular { color: var(--accent); background: var(--accent-dim); } .compare-table td.col-popular { background: var(--accent-dim); } .compare-table tr:hover td { background: var(--bg-card); } .compare-course strong { display: block; color: var(--text-primary); font-size: 0.95rem; } .compare-course span { color: var(--text-dim); font-size: 0.78rem; } .compare-price { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: 1rem; } .compare-tag { display: block; font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } .compare-popular-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent); color: var(--bg-base); font-size: 0.6rem; font-weight: 700; } /* ============================================ 42. RESPONSIVE — new components ============================================ */ @media (max-width: 1199px) { .cert-showcase { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 900px) { .plan-cards { grid-template-columns: repeat(2, 1fr); } .plan-card--featured { order: -1; } } @media (max-width: 560px) { .plan-cards { grid-template-columns: 1fr; } } @media (max-width: 768px) { .book-card { padding: 24px 16px; } .testimonial-card { padding: 28px 20px; } .testimonial-card__avatar { top: 28px; left: 20px; } .testimonial-card__quote { top: 24px; right: 20px; width: 26px; height: 26px; } .testimonial-card__text { padding-left: 0; padding-top: 48px; padding-right: 20px; } .testimonial-card__author, .testimonial-card__role { padding-left: 0; } .course-detail__facts { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; } .lightbox__figure { max-width: 92%; } .blog-card__media { height: 130px; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } .lightbox__nav { width: 42px; height: 42px; top: auto; bottom: 60px; transform: none; } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox__nav:hover { transform: scale(1.06); } .lightbox__counter { bottom: 16px; } .whatsapp-float { bottom: 18px; right: 18px; width: 54px; height: 54px; } .modal-overlay { padding: 0; align-items: stretch; } .modal--course { max-width: 100%; max-height: 100%; border-radius: 0; border: none; border-left: none; border-right: none; } }