/* Static course mini-site — shares the dark immersive design language. Used by the Barba.js multi-page transition demo (skill: extended-3d-scroll:barba-js). */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap'); :root { --primary: #6B4CED; --primary-deep: #2D0F9E; --primary-light: #9A82FF; --primary-glow: rgba(107,76,237,0.55); --accent: #FF6B18; --accent-light: #FF9A52; --bg-primary: #07040F; --bg-secondary: #0E0825; --glass-bg: rgba(255,255,255,0.045); --glass-border: rgba(255,255,255,0.10); --glass-border-strong: rgba(255,255,255,0.18); --glass-blur: blur(16px) saturate(140%); --text-strong: #FFFFFF; --text-primary: #F1EEFC; --text-muted: #A89FCB; --gradient-brand: linear-gradient(135deg, #9A82FF, #FF6B18); --bg-gradient-hero: radial-gradient(ellipse 90% 70% at 70% 0%, #1E1050 0%, #0E0825 45%, #07040F 100%); --radius-md: 12px; --radius-lg: 18px; --radius-full: 9999px; --font-heading: 'Poppins', sans-serif; --font-body: 'Open Sans', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* Barba curtain */ .cv-curtain { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg-gradient-hero); transform: translateY(100%); } .cv-curtain__mark { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3rem, 12vw, 7rem); letter-spacing: -0.04em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Inline script raises this on first paint so the page arrives covered (seamless hand-off from the React app's curtain); courses.js then slides it away. */ html.cv-loading .cv-curtain { transform: translateY(0); } /* Course cards double as links on the index page. */ a.cv-card { display: block; } .cv-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 6vw; background: rgba(14,8,37,0.7); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); } .cv-nav__brand { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cv-nav__links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .cv-nav__links a { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--text-muted); transition: color .25s; } .cv-nav__links a:hover, .cv-nav__links a.is-active { color: var(--text-strong); } .cv-back { padding: 8px 18px; border-radius: var(--radius-full); background: var(--glass-bg); border: 1px solid var(--glass-border-strong); } .cv-container { max-width: 1000px; margin: 0 auto; padding: 0 24px; } .cv-hero { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 70px; background: var(--bg-gradient-hero); position: relative; } .cv-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-light); padding: 6px 16px; border-radius: var(--radius-full); background: rgba(255,107,24,.1); border: 1px solid rgba(255,107,24,.22); margin-bottom: 20px; } .cv-hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -.03em; color: var(--text-strong); margin-bottom: 18px; } .cv-hero h1 span { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cv-hero p { max-width: 640px; color: var(--text-muted); font-size: 1.1rem; } .cv-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .cv-meta span { font-family: var(--font-heading); font-weight: 600; font-size: .82rem; color: var(--primary-light); background: rgba(107,76,237,.14); border: 1px solid rgba(107,76,237,.22); padding: 8px 16px; border-radius: var(--radius-full); } .cv-section { padding: 64px 0; } .cv-section h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem,3vw,2.1rem); color: var(--text-strong); margin-bottom: 24px; } .cv-section h2 span { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .cv-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius-lg); padding: 24px; transition: border-color .3s, box-shadow .3s, transform .3s; } .cv-card:hover { border-color: var(--glass-border-strong); box-shadow: 0 0 0 1px rgba(107,76,237,.25), 0 8px 40px var(--primary-glow); transform: translateY(-4px); } .cv-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--text-strong); margin-bottom: 8px; } .cv-card p { font-size: .9rem; color: var(--text-muted); } .cv-modules { display: flex; flex-direction: column; gap: 12px; } .cv-module { display: flex; gap: 16px; align-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 16px 20px; } .cv-module b { font-family: var(--font-heading); color: var(--primary-light); font-size: 1.1rem; min-width: 30px; } .cv-cta { text-align: center; padding: 70px 24px; background: linear-gradient(135deg, rgba(67,24,209,.35), rgba(45,15,158,.5)); border: 1px solid var(--glass-border-strong); border-radius: var(--radius-lg); margin: 40px auto 70px; max-width: 1000px; } .cv-cta h2 { color: var(--text-strong); } .cv-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; padding: 15px 34px; border-radius: var(--radius-full); background: var(--accent); color: #fff; margin-top: 18px; box-shadow: 0 8px 40px rgba(255,107,24,.5); transition: transform .25s, background .25s; } .cv-btn:hover { background: #E05500; transform: translateY(-2px); } .cv-footer { padding: 30px 6vw; border-top: 1px solid var(--glass-border); text-align: center; color: var(--text-muted); font-size: .85rem; } @media (max-width: 600px) { .cv-nav { padding: 14px 20px; } .cv-nav__links { gap: 14px; } }