/* ===================================================================== CogniPath design system ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Cinzel:wght@500;600;700;800&family=Jost:wght@300;400;500;600;700&display=swap'); :root{ --ink-900:#0f1224; --ink-800:#171b34; --ink-700:#242a4d; --indigo-600:#4f46e5; --indigo-500:#6366f1; --indigo-400:#818cf8; --violet-500:#8b5cf6; --teal-400:#2dd4bf; --amber-400:#fbbf24; --rose-500:#f43f5e; --green-500:#22c55e; --paper:#f7f7fb; --paper-2:#ffffff; --line:#e6e6f0; --text-900:#14162b; --text-600:#565b7a; --text-400:#8b8fa8; --radius-lg:20px; --radius-md:14px; --radius-sm:10px; --shadow-sm:0 1px 2px rgba(15,18,36,.06); --shadow-md:0 8px 24px rgba(15,18,36,.08); --shadow-lg:0 20px 48px rgba(15,18,36,.14); --grad-brand:linear-gradient(135deg,#4f46e5 0%,#8b5cf6 55%,#2dd4bf 120%); --grad-warm:linear-gradient(135deg,#fbbf24 0%,#f43f5e 100%); --font-display:'Sora',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-royal:'Cinzel',serif; --font-futura:'Jost',system-ui,sans-serif; --space-900:#05061a; --space-800:#0b0e2a; --space-700:#141a42; } /* Light/dark mode — the toggle in the nav sets data-theme on . Everything below the (always-dark) hero responds to these; the hero keeps its own permanent space theme in both modes by design. */ [data-theme="dark"]{ --paper:#0a0c1e; --paper-2:#141833; --line:#2c3061; --text-900:#f2f1ff; --text-600:#c4c5e8; --text-400:#9496c4; } [data-theme="dark"] .topnav{background:rgba(10,12,30,.88)} [data-theme="dark"] .brand-word{background:linear-gradient(90deg,#818cf8 0%,#a78bfa 45%,#e879f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent} [data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#12152e;color:var(--text-900);border-color:var(--line)} [data-theme="dark"] .q-option:hover{background:#1c2044} [data-theme="dark"] .q-option.selected{background:#232853} [data-theme="dark"] .upload-box:hover{background:#171b3a} [data-theme="dark"] .upload-box.dragover{background:#1f244a} [data-theme="dark"] .course-card, [data-theme="dark"] .story-card, [data-theme="dark"] .custom-doc-card, [data-theme="dark"] a.video-card, [data-theme="dark"] a.ref-card{background:#12152e;border-color:var(--line)} [data-theme="dark"] .theme-toggle .icon-sun{display:none} [data-theme="dark"] .theme-toggle .icon-moon{display:inline} .theme-toggle .icon-moon{display:none} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); background:var(--paper); color:var(--text-900); -webkit-font-smoothing:antialiased; transition:background .2s, color .2s; } h1,h2,h3,h4,.font-display{font-family:var(--font-display)} a{color:inherit} img{max-width:100%;display:block} button{font-family:inherit} ::selection{background:var(--indigo-400);color:#fff} .container{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- Top nav ---------- */ .topnav{ position:sticky;top:0;z-index:50; background:rgba(247,247,251,.85);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .topnav-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:10px 0;gap:16px} /* Stacked lockup — logo, then the CogniPath wordmark, then the slogan caption — instead of a wide single row, so it never collides with the nav links/CTA next to it at normal viewport widths. */ .brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;flex-shrink:0} .brand-mark{width:34px;height:34px;border-radius:10px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:var(--shadow-sm)} .brand-logo{height:32px;width:auto;display:block;margin-bottom:2px} .brand-logo-dark{height:40px;margin-bottom:0} .brand-divider{display:none} .brand-word{ background:linear-gradient(90deg,#1e3a8a 0%,#312e81 40%,#701a75 75%,#86198f 100%); -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;line-height:1.1; } .brand-slogan{ font-family:var(--font-royal);font-size:10.5px;font-weight:600;letter-spacing:.01em; color:var(--text-400);line-height:1.2;white-space:nowrap; } .brand-word-dark{background:linear-gradient(90deg,#818cf8 0%,#a78bfa 45%,#e879f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .auth-logo{height:64px;width:auto;margin:0 auto 18px;display:block} .footer-brand{display:flex;align-items:center;gap:8px} .footer-logo{height:26px;width:auto;opacity:.9} .admin-side-subtitle{color:#8b8fa8;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:-4px 0 26px 2px} .nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:600;color:var(--text-600)} .nav-links a{text-decoration:none;transition:color .15s} .nav-links a:hover{color:var(--indigo-600)} .nav-cta{display:flex;align-items:center;gap:12px} .theme-toggle{ width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2); display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;padding:0;flex-shrink:0; } .section-surface{background:var(--paper-2)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:999px;border:none;cursor:pointer; font-weight:700;font-size:14.5px;transition:transform .15s, box-shadow .15s, background .15s; text-decoration:none;white-space:nowrap; } .btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.28)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(79,70,229,.36)} .btn-outline{background:var(--paper-2);color:var(--text-900);border:1.5px solid var(--line)} .btn-outline:hover{border-color:var(--indigo-400);color:var(--indigo-600)} .btn-ghost{background:transparent;color:var(--text-600)} .btn-ghost:hover{color:var(--indigo-600)} .btn-sm{padding:8px 16px;font-size:13px} .btn-block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important} .btn-danger{background:var(--paper-2);color:var(--rose-500);border:1.5px solid #fecdd3} .btn-danger:hover{background:#fff1f2} [data-theme="dark"] .btn-danger:hover{background:#3a1622} .google-btn{ display:inline-flex;align-items:center;gap:10px;background:var(--paper-2);color:var(--text-900); border:1.5px solid var(--line);padding:12px 20px;border-radius:999px;font-weight:700;font-size:14.5px; cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s, transform .15s; } .google-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)} .google-g{width:20px;height:20px} /* ---------- Hero ---------- * Light by default, matching the rest of the site; switches to the full dark "space" scene (stars, vivid nebula glows) only under [data-theme="dark"]. The decorative shapes/orbits/cobwebs stay in both modes — they just get gentler glow/contrast treatment in light mode so a handful of pastel confetti shapes over a bright gradient doesn't look muddy the way a dark-mode neon glow would. */ .hero{ position:relative;overflow:hidden;padding:96px 0 72px; font-family:var(--font-futura); background:var(--paper); } [data-theme="dark"] .hero{background:var(--space-900)} .hero-bg{ position:absolute;inset:0;z-index:-1; background: radial-gradient(700px 400px at 15% -10%, rgba(99,102,241,.14), transparent 60%), radial-gradient(700px 400px at 85% 0%, rgba(45,212,191,.14), transparent 60%), var(--paper); } [data-theme="dark"] .hero-bg{ background: radial-gradient(900px 500px at 15% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(900px 500px at 85% 0%, rgba(217,70,239,.28), transparent 60%), radial-gradient(700px 500px at 50% 110%, rgba(45,212,191,.16), transparent 65%), linear-gradient(160deg, var(--space-900) 0%, var(--space-800) 55%, var(--space-700) 100%); } /* A quiet starfield — only makes sense against the dark scene. */ .hero-bg::after{ content:"";position:absolute;inset:0;opacity:0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9) 100%, transparent), radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,.7) 100%, transparent), radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,.8) 100%, transparent), radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6) 100%, transparent), radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,.7) 100%, transparent), radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.6) 100%, transparent), radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,.5) 100%, transparent); background-repeat:no-repeat; transition:opacity .2s; } [data-theme="dark"] .hero-bg::after{opacity:.5} /* Corner blob glows — soft blue/magenta washes fading to nothing by default (light mode); brighter, more saturated "nebula" glows in dark mode where they need to read against near-black. */ .hero-blob{position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px)} .hero-blob-tl{top:-240px;left:-240px;background:radial-gradient(circle, rgba(99,102,241,.22) 0%, rgba(99,102,241,.09) 42%, transparent 70%)} .hero-blob-tr{top:-260px;right:-220px;background:radial-gradient(circle, rgba(217,70,239,.2) 0%, rgba(217,70,239,.08) 42%, transparent 70%)} .hero-blob-bl{bottom:-260px;left:-200px;background:radial-gradient(circle, rgba(217,70,239,.16) 0%, rgba(217,70,239,.06) 42%, transparent 70%)} .hero-blob-br{bottom:-240px;right:-240px;background:radial-gradient(circle, rgba(45,212,191,.16) 0%, rgba(45,212,191,.06) 42%, transparent 70%)} [data-theme="dark"] .hero-blob-tl{background:radial-gradient(circle, rgba(99,102,241,.45) 0%, rgba(99,102,241,.18) 42%, transparent 70%)} [data-theme="dark"] .hero-blob-tr{background:radial-gradient(circle, rgba(217,70,239,.4) 0%, rgba(217,70,239,.16) 42%, transparent 70%)} [data-theme="dark"] .hero-blob-bl{background:radial-gradient(circle, rgba(217,70,239,.32) 0%, rgba(217,70,239,.13) 42%, transparent 70%)} [data-theme="dark"] .hero-blob-br{background:radial-gradient(circle, rgba(45,212,191,.32) 0%, rgba(45,212,191,.13) 42%, transparent 70%)} .hero .container{position:relative;z-index:1} /* Shimmering particle network — a lightweight canvas animation (no library) of drifting dots that link up with faint lines when close together. */ .network-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} /* Visible orbit contours with a dot actually traveling the path — the "moving across, as if in space" effect. Each ring is a plain circle outline; the dot's parent rotates around the ring's own center so the dot traces the circumference exactly. */ .orbit-ring{position:absolute;border:1px dashed rgba(79,70,229,.2);border-radius:50%;pointer-events:none;z-index:0} [data-theme="dark"] .orbit-ring{border-color:rgba(199,197,255,.22)} .orbit-1{width:340px;height:340px;top:-40px;right:6%} .orbit-2{width:520px;height:520px;top:-120px;right:-4%} .orbit-3{width:230px;height:230px;bottom:-30px;left:6%} .orbit-4{width:260px;height:260px;top:32%;left:-90px} .orbit-5{width:190px;height:190px;bottom:-50px;right:22%} .orbit-spin{position:absolute;inset:0;animation:orbitSpin linear infinite} .orbit-1 .orbit-spin{animation-duration:22s} .orbit-2 .orbit-spin{animation-duration:38s;animation-direction:reverse} .orbit-3 .orbit-spin{animation-duration:16s} .orbit-4 .orbit-spin{animation-duration:27s;animation-direction:reverse} .orbit-5 .orbit-spin{animation-duration:19s} .orbiter{position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;transform:translateX(-50%)} /* Orbiters shaped as a triangle / a mini ringed "saturn", so it isn't only plain dots traveling the orbit contours. */ .orbiter-triangle{ width:0;height:0;background:none!important;top:-7px; border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid currentColor; filter:drop-shadow(0 0 5px currentColor); } .orbiter-saturn{width:11px;height:11px;background:currentColor;filter:drop-shadow(0 0 5px currentColor)} .orbiter-saturn::before{ content:"";position:absolute;top:50%;left:50%;width:230%;height:60%; border:1.5px solid currentColor;border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);opacity:.8; } @keyframes orbitSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.orbit-spin{animation:none}} /* Pastel "spheres" — a shaded radial-gradient gives each one a soft 3D ball look; the same keyframe both drifts them a little and rotates them a full turn, so they read as spinning slowly on their own axis while moving, not just floating flat shapes. */ .spheres{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .sphere{position:absolute;border-radius:50%;opacity:.85;animation:sphereFloat ease-in-out infinite} .sp1{width:22px;height:22px;top:22%;left:22%;animation-duration:17s;background:radial-gradient(circle at 32% 30%, #fff 0%, #c7b8ff 45%, #9f8ae0 100%)} .sp2{width:14px;height:14px;top:64%;left:34%;animation-duration:13s;animation-delay:-4s;background:radial-gradient(circle at 32% 30%, #fff 0%, #b8f5e6 45%, #6bd9c0 100%)} .sp3{width:30px;height:30px;top:12%;left:64%;animation-duration:21s;animation-delay:-8s;background:radial-gradient(circle at 32% 30%, #fff 0%, #ffd6b8 45%, #f2a969 100%)} .sp4{width:18px;height:18px;top:70%;left:70%;animation-duration:15s;animation-delay:-2s;background:radial-gradient(circle at 32% 30%, #fff 0%, #b8d9ff 45%, #6fa8e8 100%)} .sp5{width:16px;height:16px;top:40%;left:90%;animation-duration:19s;animation-delay:-11s;background:radial-gradient(circle at 32% 30%, #fff 0%, #ffc2d9 45%, #ec7fab 100%)} @keyframes sphereFloat{ 0%{transform:translate(0,0) rotate(0deg)} 50%{transform:translate(14px,-16px) rotate(180deg)} 100%{transform:translate(0,0) rotate(360deg)} } @media (prefers-reduced-motion: reduce){.sphere{animation:none}} /* Shooting stars — a bright dot with a fading trail, streaking left to right and looping with staggered delays/heights/speeds. */ .shooting-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .shooting-star{position:absolute;top:0;left:-6%;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:0;animation:shootAcross linear infinite} .shooting-star::before{content:"";position:absolute;top:50%;right:100%;width:80px;height:1.5px;background:linear-gradient(90deg, transparent, currentColor);transform:translateY(-50%)} .ss1{top:16%;color:#6366f1;animation-duration:7s;animation-delay:.5s} .ss2{top:38%;color:#d946ef;animation-duration:9s;animation-delay:3.5s} .ss3{top:60%;color:#2dd4bf;animation-duration:8s;animation-delay:6s} [data-theme="dark"] .shooting-star{color:#e0f2fe} @keyframes shootAcross{ 0%{transform:translate(0,0);opacity:0} 4%{opacity:1} 30%{opacity:1} 38%{transform:translate(112vw,70px);opacity:0} 100%{transform:translate(112vw,70px);opacity:0} } @media (prefers-reduced-motion: reduce){.shooting-star{animation:none;opacity:0}} /* Drifting shapes — circles/squares/triangles/ringed "saturns" in varied colors, gently floating and rotating so the whole scene simmers. */ .floating-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .shape{position:absolute;opacity:.85;animation:floatShape 15s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(15,18,54,.14))} [data-theme="dark"] .shape{opacity:.55;filter:drop-shadow(0 0 10px currentColor)} .shape-circle{border-radius:50%;background:currentColor} .shape-square{border-radius:6px;background:currentColor;transform:rotate(12deg)} .shape-triangle{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:34px solid currentColor;background:none!important} .shape-saturn{border-radius:50%;background:currentColor} .shape-saturn::before{ content:"";position:absolute;top:50%;left:50%;width:220%;height:60%; border:2px solid currentColor;border-radius:50%; transform:translate(-50%,-50%) rotate(-24deg);opacity:.75; } .s1{width:44px;height:44px;top:14%;left:8%;animation-duration:16s;color:var(--indigo-400)} .s2{width:26px;height:26px;top:66%;left:12%;animation-duration:12s;animation-delay:-3s;color:#f472b6} .s3{top:18%;left:86%;animation-duration:18s;animation-delay:-6s;color:#2dd4bf} .s4{width:30px;height:30px;top:56%;left:80%;animation-duration:20s;animation-delay:-9s;color:#fbbf24} .s5{width:20px;height:20px;top:82%;left:56%;animation-duration:10s;animation-delay:-2s;color:#818cf8} .s6{top:10%;left:44%;animation-duration:15s;animation-delay:-5s;color:#d946ef} .s7{width:16px;height:16px;top:32%;left:6%;animation-duration:13s;animation-delay:-4s;color:#34d399} .s8{top:76%;left:30%;animation-duration:19s;animation-delay:-7s;color:#fb7185} .s9{width:34px;height:34px;top:44%;left:92%;animation-duration:21s;animation-delay:-10s;color:#a78bfa} @keyframes floatShape{ 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(14px,-18px) rotate(8deg)} 50%{transform:translate(-10px,10px) rotate(-6deg)} 75%{transform:translate(8px,16px) rotate(10deg)} } @media (prefers-reduced-motion: reduce){.shape{animation:none}.orbit-spin{animation:none}} /* Cobwebs in the corners — a single quarter-web SVG anchored at local (0,0), mirrored per corner via CSS transforms so all four hang correctly. */ .cobweb{position:absolute;width:130px;height:130px;opacity:.14;pointer-events:none;z-index:0} .cobweb-tl{top:0;left:0} .cobweb-tr{top:0;right:0;transform:scaleX(-1)} .cobweb-bl{bottom:0;left:0;transform:scaleY(-1)} .cobweb-br{bottom:0;right:0;transform:scale(-1,-1)} .cobweb-web{stroke:#8f90c9} [data-theme="dark"] .cobweb-web{stroke:#c7c5ff} .eyebrow{ display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line); padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--indigo-600); box-shadow:var(--shadow-sm); } [data-theme="dark"] .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(199,197,255,.22);color:#c7c5ff;box-shadow:none;backdrop-filter:blur(6px)} .hero h1{font-family:var(--font-royal);color:var(--text-900);font-size:52px;line-height:1.14;letter-spacing:-.01em;margin:26px 0 20px;max-width:840px;font-weight:700} .hero h1 .accent{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} [data-theme="dark"] .hero h1 .accent{background:linear-gradient(90deg,#a5b4fc,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent} .slogan{ font-family:var(--font-royal);font-size:30px;font-weight:600; background:linear-gradient(90deg,#4338ca 0%,#7c3aed 45%,#c026d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent; margin:0 0 24px;letter-spacing:.01em;position:relative;padding:0 6px; } [data-theme="dark"] .slogan{background:linear-gradient(90deg,#93c5fd 0%,#c4b5fd 45%,#f0abfc 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .slogan::before,.slogan::after{font-family:var(--font-royal);color:#c026d3;opacity:.55;font-size:.8em} [data-theme="dark"] .slogan::before,[data-theme="dark"] .slogan::after{color:#f0abfc;opacity:.6} .slogan::before{content:"“";margin-right:2px} .slogan::after{content:"”";margin-left:2px} .hero p.lead{font-size:18px;line-height:1.7;color:var(--text-600);max-width:620px;margin:0 0 34px;font-weight:300} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-note{margin-top:14px;font-size:13px;color:var(--text-400)} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px} .stat-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-sm)} [data-theme="dark"] .stat-card{background:rgba(255,255,255,.05);border-color:rgba(199,197,255,.14);box-shadow:none;backdrop-filter:blur(6px)} .stat-num{font-family:var(--font-display);font-weight:800;font-size:28px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} [data-theme="dark"] .stat-num{background:linear-gradient(90deg,#a5b4fc,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-label{font-size:13px;color:var(--text-600);margin-top:6px;line-height:1.4} /* ---------- Sections ---------- */ section{padding:72px 0} #how,#fields,#ai-impact,#job-risk-section{scroll-margin-top:88px} .section-head{max-width:640px;margin:0 auto 44px;text-align:center} .section-tag{color:var(--indigo-600);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em} .section-head h2{font-size:34px;margin:12px 0 10px;letter-spacing:-.02em} .section-head p{color:var(--text-600);font-size:16px;line-height:1.6} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);transition:box-shadow .2s, transform .2s} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .icon-box{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px} .card h3{font-size:17px;margin:0 0 8px} .card p{font-size:14.5px;color:var(--text-600);line-height:1.6;margin:0} .cluster-card .cluster-why{margin-top:10px;font-size:13px;color:var(--text-600)} .cluster-card .cluster-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} .cluster-card .cluster-demand{font-size:11.5px;font-weight:700;color:var(--indigo-600);background:#eef0ff;padding:4px 10px;border-radius:999px} .how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .how-step{position:relative;padding:24px 20px} .how-num{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--indigo-400);opacity:.5} .how-step h4{margin:8px 0 6px;font-size:16px} .how-step p{margin:0;font-size:13.5px;color:var(--text-600);line-height:1.55} /* ---------- Job AI-vulnerability checker ---------- */ .job-risk-card{max-width:820px;margin:0 auto;padding:32px} .job-risk-input-row{display:flex;gap:12px;flex-wrap:wrap} .job-risk-input-row input{flex:1;min-width:260px;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit} .job-risk-loading{padding:24px 0;text-align:center;color:var(--text-600);font-size:14.5px} .job-risk-result{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .job-risk-head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .job-risk-role{font-family:var(--font-display);font-weight:800;font-size:19px;margin-right:6px;display:block;margin-bottom:8px} .job-risk-summary{font-size:14.5px;line-height:1.7;color:var(--text-700)} .safer-role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px} .safer-role-card{border:1.5px solid #bbf7d0;background:#f0fdf4;border-radius:var(--radius-md);padding:14px 16px} .safer-role-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} .safer-role-name{font-weight:700;font-size:14.5px;color:var(--text-900)} .safer-role-why,.safer-role-how{font-size:13px;line-height:1.55;color:var(--text-600);margin:0 0 4px} @media (max-width: 640px){.safer-role-grid{grid-template-columns:1fr}} /* ---------- Profile / My roadmaps ---------- */ .profile-item{margin-bottom:14px} .profile-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} .profile-item-title{font-family:var(--font-display);font-weight:700;font-size:17px} footer{border-top:1px solid var(--line);padding:40px 0;color:var(--text-400);font-size:13px} .footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} /* ---------- Auth screen ---------- */ .auth-wrap{min-height:calc(100vh - 92px);display:flex;align-items:center;justify-content:center;padding:40px 20px} .auth-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:44px;max-width:420px;width:100%;text-align:center} .auth-card .brand-mark{margin:0 auto 18px;width:52px;height:52px;font-size:22px;border-radius:14px} .auth-card h2{margin:0 0 8px;font-size:22px} .auth-card p{color:var(--text-600);font-size:14.5px;margin:0 0 28px} .auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-400);font-size:12.5px} .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)} .mini-form input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;margin-bottom:10px} .legal-note{font-size:12px;color:var(--text-400);margin-top:18px;line-height:1.5} /* ---------- App shell (questionnaire + dashboard) ---------- */ .app-shell{display:flex;min-height:calc(100vh - 92px)} .app-progress{position:sticky;top:92px;background:var(--paper-2);border-bottom:1px solid var(--line);z-index:20} .progress-bar-track{height:5px;background:var(--line)} .progress-bar-fill{height:100%;background:var(--grad-brand);transition:width .35s ease} .progress-meta{display:flex;justify-content:space-between;padding:14px 0;font-size:13px;color:var(--text-600);font-weight:600} .q-wrap{max-width:720px;margin:0 auto;padding:52px 24px 90px} .q-section-label{color:var(--indigo-600);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .q-title{font-size:26px;font-weight:700;margin:0 0 28px;letter-spacing:-.01em} .q-options{display:flex;flex-direction:column;gap:12px} .q-option{ display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line); border-radius:var(--radius-md);cursor:pointer;background:var(--paper-2);transition:all .15s;font-size:15px;font-weight:500; } .q-option:hover{border-color:var(--indigo-400);background:#f5f5fe} .q-option.selected{border-color:var(--indigo-600);background:#eef0ff;box-shadow:0 0 0 3px rgba(99,102,241,.12)} .q-option .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center} .q-option.selected .dot{border-color:var(--indigo-600)} .q-option.selected .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--indigo-600)} .q-option textarea{width:100%;margin-top:10px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical;min-height:44px} .q-option-body{flex:1} .q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px} /* Resume/profile upload step */ .upload-box{border:2px dashed var(--line);border-radius:var(--radius-lg);padding:36px;text-align:center;background:var(--paper-2);cursor:pointer;transition:border-color .15s, background .15s} .upload-box:hover{border-color:var(--indigo-400);background:#f8f8ff} .upload-box.dragover{border-color:var(--indigo-600);background:#eef0ff} .upload-box .icon{font-size:34px;margin-bottom:10px} .file-chip{display:inline-flex;align-items:center;gap:8px;background:#eef0ff;color:var(--indigo-600);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-top:14px} .textarea-field{width:100%;min-height:160px;border:1.5px solid var(--line);border-radius:var(--radius-md);padding:16px;font-family:inherit;font-size:14.5px;line-height:1.6;resize:vertical} .field-label{font-weight:700;font-size:14px;margin:22px 0 8px;display:block} /* ---------- Loading / analyzing ---------- */ .analyzing{text-align:center;padding:100px 24px} .spinner{width:56px;height:56px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--indigo-600);margin:0 auto 26px;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .analyzing h3{font-size:20px;margin:0 0 8px} .analyzing p{color:var(--text-600);font-size:14.5px} /* ---------- Paywall / billing ---------- */ .paywall{text-align:center;padding:8px 0} .paywall-icon{font-size:34px;margin-bottom:10px} .paywall h3{margin:0 0 6px;font-size:19px} .paywall-tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} .paywall-tier{border:1.5px solid var(--line);border-radius:var(--radius-md);padding:18px 16px;background:var(--paper-2)} .paywall-tier-label{font-weight:800;font-size:14px;color:var(--text-900);margin-bottom:4px} .paywall-tier-price{font-family:var(--font-display);font-weight:800;font-size:24px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px} .paywall-qty{width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;margin-bottom:10px;text-align:center;font-size:14px} @media (max-width:520px){.paywall-tiers{grid-template-columns:1fr}} .upgrade-banner{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; background:#fffbeb;border:1.5px solid #fde68a;color:#78350f;border-radius:12px; padding:12px 16px;font-size:13.5px;font-weight:600;margin-bottom:16px; } [data-theme="dark"] .upgrade-banner{background:#2a2410;border-color:#5b4a12;color:#fde68a} .analyzing-steps{max-width:340px;margin:26px auto 0;text-align:left;font-size:13.5px;color:var(--text-400)} .analyzing-steps li{padding:6px 0;transition:color .3s} .analyzing-steps li.active{color:var(--indigo-600);font-weight:700} .analyzing-steps li.done{color:var(--green-500)} /* ---------- Results / roadmap ---------- */ .results-wrap{max-width:960px;margin:0 auto;padding:48px 24px 100px} .results-hero{background:var(--grad-brand);border-radius:var(--radius-lg);padding:40px;color:#fff;margin-bottom:32px;position:relative;overflow:hidden} .results-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)} .results-hero .tag{background:rgba(255,255,255,.2);display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:14px} .results-hero h2{font-size:30px;margin:0 0 10px;letter-spacing:-.02em} .results-hero p{font-size:15px;opacity:.92;max-width:620px;line-height:1.6;margin:0} .path-tabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap} .path-tab{padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper-2);font-weight:700;font-size:13.5px;cursor:pointer;color:var(--text-600)} .path-tab.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)} .rm-section{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;margin-bottom:22px;box-shadow:var(--shadow-sm)} .rm-section h3{font-size:17px;margin:0 0 14px;display:flex;align-items:center;gap:10px} .rm-section h3 .num{width:28px;height:28px;border-radius:8px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0} .rm-section p{color:var(--text-700);font-size:14.5px;line-height:1.7;margin:0 0 10px} .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700} .badge-low{background:#dcfce7;color:#166534} .badge-med{background:#fef3c7;color:#92400e} .badge-high{background:#fee2e2;color:#991b1b} .data-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px} .data-table th{text-align:left;color:var(--text-400);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)} .data-table td{padding:10px 10px;border-bottom:1px solid #f0f0f7} .data-table tr:last-child td{border-bottom:none} /* ---------- AI-risk spiderweb / radar chart ---------- */ /* Light by default (matches the rest of the site); switches to the dark "space" look only when the site itself is in dark mode. */ .radar-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:24px;align-items:center} [data-theme="dark"] .radar-card{background:var(--space-900);border-color:rgba(199,197,255,.14)} .radar-chart-wrap{display:flex;justify-content:center} .radar-svg{width:100%;height:auto;max-width:520px} .radar-grid{stroke:rgba(79,70,229,.18)} [data-theme="dark"] .radar-grid{stroke:rgba(199,197,255,.16)} .radar-web{fill:rgba(217,70,239,.18);stroke:#c026d3} [data-theme="dark"] .radar-web{fill:rgba(217,70,239,.22);stroke:#e879f9} .radar-dot{stroke:#fff} [data-theme="dark"] .radar-dot{stroke:#0b0e2a} .radar-label{fill:#2a2d55;font-family:'Jost',sans-serif} [data-theme="dark"] .radar-label{fill:#dcdcff} .radar-legend{display:flex;flex-direction:column;gap:10px} .radar-legend-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:rgba(79,70,229,.05)} [data-theme="dark"] .radar-legend-item{background:rgba(255,255,255,.04)} .radar-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .radar-legend-role{font-weight:700;font-size:13.5px;color:var(--text-900);flex:1;min-width:110px} .radar-legend-timeline{font-size:12px;color:var(--text-600)} @media (max-width:860px){.radar-card{grid-template-columns:1fr}} /* ---------- Journey timeline: horizontal, multi-lane, time-headered ---------- A time axis across the top (Today → approx. milestones → Beyond), with separate colored "swimlanes" running underneath it — one for the career/academic path, one each for technical skills, soft skills and courses. Each lane is its own colored connecting line with pastel boxes sitting on top of it, so the different tracks read as distinct parallel threads rather than one crowded card per step. Horizontally scrollable so longer paths (more steps) don't get squeezed. No icons; big, legible type throughout. */ .hz-timeline{overflow-x:auto;margin-top:14px;padding-bottom:10px} .hz-inner{min-width:calc(var(--tl-cols, 5) * 200px)} .tl-headers{display:flex} .tl-lane-label-spacer{width:190px;flex-shrink:0} .tl-headers-track{display:flex;flex:1} .tl-col-header{flex:1;min-width:200px;text-align:center;padding:0 8px 16px} .tl-col-header span{ display:inline-block;background:#eef0ff;color:var(--indigo-600); font-weight:800;font-size:14.5px;padding:8px 18px;border-radius:999px;letter-spacing:.02em; } .tl-col-header.tl-col-current span{background:#dcfce7;color:#166534} .tl-col-header.tl-col-desired span{background:#f3e8ff;color:#7e22ce} .tl-lane{display:flex;align-items:stretch;margin-bottom:8px} .tl-lane-label{ width:190px;flex-shrink:0;display:flex;align-items:center; font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em; color:var(--text-600);padding-right:14px;line-height:1.35; position:sticky;left:0;background:var(--paper-2);z-index:3; } .tl-lane-track{display:flex;flex:1;position:relative;padding:14px 0} .tl-lane-track::before{ content:"";position:absolute;top:50%;left:14px;right:14px;height:4px; border-radius:4px;transform:translateY(-50%);z-index:0; } .tl-lane-milestone .tl-lane-track::before{background:linear-gradient(90deg,#86efac,#a5b4fc 15%,#a5b4fc 85%,#d8b4fe)} .tl-lane-tech .tl-lane-track::before{background:#93c5fd} .tl-lane-soft .tl-lane-track::before{background:#f9a8d4} .tl-lane-course .tl-lane-track::before{background:#5eead4} .tl-cell{flex:1;min-width:200px;display:flex;justify-content:center;padding:0 8px;position:relative;z-index:1} .tl-box{ border-radius:14px;padding:13px 16px;width:100%;text-align:center; border:1.5px solid transparent;box-shadow:var(--shadow-sm); } .tl-box-current{background:#dcfce7;border-color:#bbf7d0} .tl-box-desired{background:#f3e8ff;border-color:#e9d5ff} .tl-box-milestone{background:#eef0ff;border-color:#dfe1ff;text-align:left} .tl-box-skill{background:#dbeafe;border-color:#bfdbfe;font-size:14.5px;font-weight:600;color:var(--text-900);line-height:1.6} .tl-lane-soft .tl-box-skill{background:#fce7f3;border-color:#fbcfe8} .tl-lane-course .tl-box-skill{background:#ccfbf1;border-color:#99f6e4} .tl-box-empty{background:transparent;border:1.5px dashed var(--line);color:var(--text-400);box-shadow:none;font-size:13px;padding:13px} .tl-box-title{font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;color:var(--indigo-600)} .tl-box-current .tl-box-title{color:#166534} .tl-box-desired .tl-box-title{color:#7e22ce} .tl-box-text{font-size:16px;font-weight:700;color:var(--text-900);line-height:1.4} .tl-box-sub{font-size:13.5px;color:var(--text-600);margin-top:5px;font-weight:500;line-height:1.5} @media (max-width: 640px){ .tl-lane-label,.tl-lane-label-spacer{width:130px} .tl-lane-label{font-size:12px;padding-right:8px} .tl-col-header,.tl-cell{min-width:170px} .hz-inner{min-width:calc(var(--tl-cols, 5) * 170px)} .tl-box-text{font-size:14.5px} } .rm-highlight{ display:flex;align-items:flex-start;gap:8px;background:#fffbeb;border:1.5px solid #fde68a;color:#78350f; border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;line-height:1.5;margin:0 0 16px; } [data-theme="dark"] .rm-highlight{background:#2a2410;border-color:#5b4a12;color:#fde68a} .rm-bullets{margin:0 0 10px;padding-left:20px;color:var(--text-700);font-size:14.5px;line-height:1.7} .rm-bullets li{margin-bottom:5px} .course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px} .course-card{border:1.5px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;background:#fbfbff} .course-format{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--indigo-600);background:#eef0ff;padding:3px 9px;border-radius:6px;margin-bottom:8px} .course-name{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:2px} .course-provider{font-size:12.5px;font-weight:600;color:var(--text-400);margin-bottom:8px} .course-desc{margin:0;font-size:13.5px;color:var(--text-600);line-height:1.6} @media (max-width: 640px){.course-grid{grid-template-columns:1fr}} /* Relevant-videos section — cards link out to a live YouTube search rather than a fixed embed, so nothing can ever point at a deleted/wrong video. */ .video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px} .video-card{ display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--radius-md); padding:16px 18px;background:#fbfbff;text-decoration:none;color:inherit;transition:box-shadow .15s, transform .15s; } .video-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--indigo-400)} .video-play{ flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--grad-brand);color:#fff; display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:var(--shadow-sm); } .video-title{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:4px} .video-desc{margin:0 0 8px;font-size:13.5px;color:var(--text-600);line-height:1.55} .video-query{font-size:12px;color:var(--indigo-600);font-weight:600} @media (max-width: 640px){.video-grid{grid-template-columns:1fr}} /* Real video cards (YOUTUBE_API_KEY configured) — thumbnail + live stats */ .video-card-real{flex-direction:column;gap:0;padding:0;overflow:hidden} .video-thumb{ position:relative;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center; background-color:#e6e6f0;flex-shrink:0; } .video-thumb-play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:20px;color:#fff;background:rgba(15,18,36,.28);opacity:0;transition:opacity .15s; } .video-card-real:hover .video-thumb-play{opacity:1} .video-card-real .video-body{padding:14px 16px} .video-channel{font-size:12.5px;color:var(--text-400);font-weight:600;margin-bottom:4px} .video-stats{font-size:12.5px;color:var(--indigo-600);font-weight:700} /* References — PDFs & websites shelf */ .ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px} .ref-card{ display:block;border:1.5px solid var(--line);border-radius:var(--radius-md);padding:14px 16px; background:#fbfbff;text-decoration:none;color:inherit;transition:box-shadow .15s, transform .15s; } .ref-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--indigo-400)} .ref-kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--indigo-600);margin-bottom:6px} .ref-title{font-size:14px;font-weight:700;color:var(--text-900);line-height:1.4;margin-bottom:4px} .ref-meta{font-size:12px;color:var(--text-400);font-weight:600} @media (max-width: 900px){.ref-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 640px){.ref-grid{grid-template-columns:1fr}} /* Real success stories — sourced, not AI-generated, to keep every claim about a real person accurate and attributable. */ .story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px} .story-card{border:1.5px solid var(--line);border-radius:var(--radius-md);padding:18px 20px;background:#fbfbff;display:flex;flex-direction:column} .story-headline{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--indigo-600);margin-bottom:8px;line-height:1.4} .story-name{font-size:15px;font-weight:700;color:var(--text-900);margin-bottom:8px} .story-text{font-size:13.5px;line-height:1.6;color:var(--text-600);margin:0 0 12px;flex:1} .story-source{font-size:11.5px;color:var(--text-400);font-weight:600;text-decoration:none} .story-source:hover{color:var(--indigo-600);text-decoration:underline} @media (max-width: 900px){.story-grid{grid-template-columns:1fr}} .skill-chips{display:flex;flex-wrap:wrap;gap:8px} .skill-chip{background:#f0f1ff;color:var(--indigo-600);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600} .source-list{font-size:12.5px;color:var(--text-400);line-height:1.9} .source-list a{color:var(--indigo-500);text-decoration:none} .source-list a:hover{text-decoration:underline} .custom-doc-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;background:#fbfbff;margin-bottom:12px} .custom-doc-card h4{margin:0 0 6px;font-size:14.5px} .custom-doc-card p{margin:0;font-size:13.5px;color:var(--text-600);white-space:pre-wrap} /* ---------- Admin ---------- */ .admin-shell{display:flex;min-height:100vh} .admin-side{width:250px;background:var(--ink-900);color:#fff;padding:24px 18px;flex-shrink:0} .admin-side .brand{color:#fff;margin-bottom:30px} .admin-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:#c6c9e6;text-decoration:none;font-size:14px;font-weight:600;margin-bottom:4px;cursor:pointer} .admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff} .admin-nav a.active{background:var(--grad-brand);color:#fff} .admin-main{flex:1;background:var(--paper);padding:36px 40px;overflow-y:auto} .admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px} .admin-header h1{font-size:24px;margin:0} .admin-header p{color:var(--text-600);font-size:14px;margin:4px 0 0} .admin-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin-bottom:22px} .admin-panel h2{font-size:16px;margin:0 0 18px} .admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px} .kpi-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px} .kpi-num{font-family:var(--font-display);font-weight:800;font-size:26px} .kpi-label{font-size:12.5px;color:var(--text-600);margin-top:4px} .admin-table{width:100%;border-collapse:collapse;font-size:13.5px} .admin-table th{text-align:left;padding:10px;background:#f7f7fb;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-400)} .admin-table td{padding:12px 10px;border-bottom:1px solid var(--line)} .form-row{margin-bottom:16px} .form-row label{display:block;font-weight:700;font-size:13px;margin-bottom:6px} .form-row input,.form-row textarea,.form-row select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px} .form-row textarea{min-height:100px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pill-select{display:flex;gap:8px;flex-wrap:wrap} .pill-select span{padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;cursor:pointer;font-weight:600;color:var(--text-600)} .pill-select span.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)} .admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink-900)} .tag-badge{display:inline-block;background:#eef0ff;color:var(--indigo-600);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin:2px} .status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px} .status-dot.on{background:var(--green-500);box-shadow:0 0 0 3px rgba(34,197,94,.18)} .status-dot.off{background:var(--text-400)} .modal-overlay{position:fixed;inset:0;background:rgba(15,18,36,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px} .modal-box{background:var(--paper-2);border-radius:var(--radius-lg);max-width:820px;width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)} .modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)} .modal-header h3{margin:0;font-size:16px} .modal-json{margin:0;padding:20px 22px;overflow:auto;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word} /* ---------- utility ---------- */ .hidden{display:none!important} .flex{display:flex} .flex-between{display:flex;justify-content:space-between;align-items:center} .gap-8{gap:8px} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .text-muted{color:var(--text-600)} .text-small{font-size:13px} .divider{height:1px;background:var(--line);margin:20px 0} /* ---------- Responsive ---------- */ @media (max-width: 980px){ .grid-3,.grid-4,.how-steps,.stat-row{grid-template-columns:repeat(2,1fr)} .admin-grid{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:40px} .nav-links{display:none} .admin-side{width:80px;padding:20px 10px} .admin-nav a span.label{display:none} .two-col{grid-template-columns:1fr} } @media (max-width: 640px){ .grid-3,.grid-4,.how-steps,.stat-row{grid-template-columns:1fr} .hero h1{font-size:32px} .hero p.lead{font-size:16px} .slogan{font-size:16px} .hero-blob{width:340px;height:340px} .results-hero{padding:26px} .rm-section{padding:20px} } /* ---------- Print / Save as PDF ---------- Landscape gives the wide "Your Journey" timeline the most room; hiding chrome (nav, footer, tabs, theme toggle) avoids it repeating oddly across pages. The timeline itself is switched from horizontal-scroll to a JS-computed transform:scale (see Results.prepareTimelineForPrint in app.js) so however many steps a path has, the WHOLE row is shrunk to fit the printable width instead of being cut off past the page edge. */ @media print{ @page{ size: landscape; margin: 12mm; } body{ background:#fff !important; color:#14162b !important } .topnav, footer, .theme-toggle, #navHomeBtn{ display:none !important } .path-tabs .path-tab:not(.active){ display:none !important } .path-tabs{ border:none !important; box-shadow:none !important; background:transparent !important } .path-tabs button{ display:none !important } .results-wrap{ padding:0 !important } .rm-section{ box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; page-break-inside:avoid } .card,.stat-card{ box-shadow:none !important } .hz-timeline{ overflow:visible !important; } .hz-inner{ transform-origin:top left; } }