/* ============================================================ SQLISM — LEARNING PATHS (paths/*.php) Studio design system: lime -> cyan -> violet gradient, dark hero card, light paper canvas below. Full light/dark theme support via [data-theme="dark"] on , matching the palette used across challenge.css / quiz.css. ============================================================ */ :root{ --sk-violet: #7c5cff; --sk-violet-deep: #5b3ee0; --sk-lime: #a3e635; --sk-cyan: #22d3ee; --sk-coral: #ff6b57; --sk-amber: #ffb020; --sk-ease: cubic-bezier(0.22, 1, 0.36, 1); --sk-grad: linear-gradient(120deg, #a3e635, #22d3ee 55%, #7c5cff); --bg-primary: #f3f1ea; --bg-card: #ffffff; --text-primary: #12141f; --text-secondary: #3a4054; --text-muted: #6a6f81; --border: #e3e5ec; --shadow: rgba(10, 13, 26, 0.12); --shadow-lg: rgba(10, 13, 26, 0.28); --check-empty-bg: #ffffff; --inline-code-bg: rgba(124, 92, 255, 0.09); --inline-code-text: #5b3ee0; --link-color: #5b3ee0; --link-color-hover: #7c5cff; --takeaway-bg: rgba(255, 176, 32, 0.08); --takeaway-border: rgba(255, 176, 32, 0.25); --takeaway-text: #5c4419; } [data-theme="dark"]{ --bg-primary: #0f172a; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --shadow: rgba(0, 0, 0, 0.3); --shadow-lg: rgba(0, 0, 0, 0.5); --check-empty-bg: #16213a; --inline-code-bg: rgba(124, 92, 255, 0.2); --inline-code-text: #c4b5fd; --link-color: #b9a6ff; --link-color-hover: #d8ccff; --takeaway-bg: rgba(255, 176, 32, 0.12); --takeaway-border: rgba(255, 176, 32, 0.35); --takeaway-text: #ffdb99; } *{box-sizing:border-box;} body[data-page="paths"]{ background:var(--bg-primary); font-family:'Inter',sans-serif; color:var(--text-primary); margin:0; transition:background-color .3s ease, color .3s ease; } /* ---------- Hero (always dark, by design — same on both themes) ---------- */ .path-hero{ position:relative; margin:clamp(16px,3vw,30px) clamp(12px,4vw,48px); padding:clamp(38px,6vw,68px) clamp(22px,4vw,48px); border-radius:24px; text-align:center; color:#fff; overflow:hidden; border:1px solid rgba(255,255,255,0.08); background: radial-gradient(120% 130% at 10% -10%, rgba(124,92,255,0.40), transparent 60%), radial-gradient(90% 120% at 100% 112%, rgba(34,211,238,0.22), transparent 58%), linear-gradient(158deg,#0c1024 0%,#0a0d1a 55%,#090b16 100%); box-shadow:0 40px 90px -42px rgba(10,13,26,0.55), inset 0 1px 0 rgba(255,255,255,0.06); } .path-hero::before{ content:''; position:absolute; inset:0; opacity:1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%); } .path-hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;} .path-hero-kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); color:rgba(226,232,240,0.85); font-weight:600; font-size:0.82rem; letter-spacing:0.02em; margin-bottom:20px; } .path-hero-kicker i{color:var(--sk-lime);} .path-hero h1{ font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.1; color:#fff; margin:0 0 18px; } .path-grad{ background:var(--sk-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .path-hero-lede{ font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.7; color:rgba(226,232,240,0.82); max-width:640px; margin:0 auto; } .path-hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px;} .path-stat{ display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(8px); color:#e7eaf5; font-weight:600; font-size:0.92rem; transition:transform .2s var(--sk-ease), border-color .2s ease, background .2s ease; } .path-stat:hover{transform:translateY(-2px);border-color:rgba(124,92,255,0.5);background:rgba(124,92,255,0.14);} .path-stat i{color:var(--sk-lime);} .path-hero-progress{max-width:420px;margin:34px auto 0;} .path-progress-track{ height:8px;border-radius:999px;background:rgba(255,255,255,0.1);overflow:hidden;margin-bottom:10px; } .path-progress-fill{ height:100%;width:0%;border-radius:999px;background:var(--sk-grad); transition:width .4s var(--sk-ease); } #pathProgressLabel{font-size:0.86rem;color:rgba(226,232,240,0.75);font-weight:600;} /* ---------- Shell / layout ---------- */ .path-shell{max-width:820px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,24px) 80px;} .path-intro{ font-size:1.05rem;line-height:1.8;color:var(--text-secondary);margin:0 0 40px; } /* ---------- Modules ---------- */ .path-modules{list-style:none;margin:0 0 56px;padding:0;display:flex;flex-direction:column;gap:20px;} .path-module{ background:var(--bg-card);border:1px solid var(--border);border-radius:20px; padding:clamp(20px,3vw,32px); box-shadow:0 18px 40px -30px var(--shadow-lg); transition:transform .25s var(--sk-ease), box-shadow .25s var(--sk-ease), background-color .3s ease, border-color .3s ease; } .path-module:hover{transform:translateY(-2px);box-shadow:0 24px 50px -28px var(--shadow-lg);} .path-module.is-complete{border-color:rgba(163,230,53,0.5);} .path-module-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;} .path-module-num{ flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.05rem;color:#fff; background:var(--sk-grad); } .path-module-title{flex:1;min-width:0;} .path-module-title h2{ font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:-0.01em; margin:0 0 4px;color:var(--text-primary); } .path-module-meta{font-size:0.82rem;color:var(--text-muted);font-weight:600;} .path-module-meta i{margin-right:5px;} .path-check{flex:none;position:relative;display:inline-flex;cursor:pointer;} .path-check input{position:absolute;opacity:0;width:1px;height:1px;} .path-check span{ width:26px;height:26px;border-radius:8px;border:2px solid var(--border);background:var(--check-empty-bg); display:flex;align-items:center;justify-content:center; transition:all .2s ease; } .path-check span::after{ content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:0.72rem;color:#fff;opacity:0;transition:opacity .15s ease; } .path-check input:checked + span{background:var(--sk-grad);border-color:transparent;} .path-check input:checked + span::after{opacity:1;} .path-check input:focus-visible + span{outline:2px solid var(--sk-violet);outline-offset:2px;} .path-module p{font-size:0.98rem;line-height:1.75;color:var(--text-secondary);margin:0 0 16px;} .path-module code{ background:var(--inline-code-bg);color:var(--inline-code-text);padding:2px 6px;border-radius:5px;font-size:0.88em; font-family:'SFMono-Regular',Consolas,monospace; } .path-code{ background:#0c1024;border-radius:14px;padding:18px 20px;overflow-x:auto;margin:0 0 16px; font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-size:0.88rem; line-height:1.7; border:1px solid rgba(255,255,255,0.06); } .path-code code{background:none;color:#c9cee0;padding:0;} .sql-tok-kw{color:var(--sk-violet);font-weight:600;} .sql-tok-type{color:var(--sk-cyan);} .sql-tok-fn{color:var(--sk-coral);} .sql-tok-str{color:var(--sk-amber);} .sql-tok-num{color:var(--sk-lime);} .sql-tok-com{color:rgba(226,232,240,0.45);font-style:italic;} .path-takeaway{ position:relative;display:block;background:var(--takeaway-bg);border:1px solid var(--takeaway-border); border-radius:12px;padding:12px 16px 12px 44px;font-size:0.92rem;line-height:1.6;color:var(--takeaway-text);margin:0 0 18px; transition:background-color .3s ease, border-color .3s ease, color .3s ease; } /* Icon is positioned, not a flex sibling — the icon + the mix of loose text and inline that follows it in the markup are NOT put in a flex row together, since flex would turn each text run and the into separate wrapping items instead of one flowing paragraph (that mismatch was the cause of the broken NOT/NULL wrapping). */ .path-takeaway i{position:absolute;left:16px;top:14px;color:var(--sk-amber);} .path-takeaway code{background:rgba(120,90,20,0.14);color:var(--takeaway-text);white-space:normal;} .path-links{display:flex;flex-wrap:wrap;gap:10px 20px;padding-top:14px;border-top:1px dashed var(--border);} .path-links a{ font-size:0.88rem;font-weight:600;color:var(--link-color);text-decoration:none;display:inline-flex;align-items:center;gap:6px; transition:gap .2s ease, color .2s ease; } .path-links a:hover{gap:9px;color:var(--link-color-hover);} .path-links a i{font-size:0.72rem;} /* ---------- Capstone / interview sections ---------- */ .path-capstone, .path-interview{margin-bottom:56px;} .path-section-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;} .path-section-head i{ width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--sk-grad);color:#fff;font-size:0.95rem;flex:none; } .path-section-head h2{ font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:800;letter-spacing:-0.01em;margin:0;color:var(--text-primary); } .path-capstone > p, .path-interview > p{font-size:0.98rem;line-height:1.7;color:var(--text-secondary);margin:0 0 22px;} .path-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;} .path-resource-card{ display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px; text-decoration:none;color:inherit;box-shadow:0 14px 34px -28px var(--shadow-lg); transition:transform .22s var(--sk-ease), box-shadow .22s var(--sk-ease), border-color .22s ease, background-color .3s ease; } .path-resource-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px var(--shadow-lg);border-color:rgba(124,92,255,0.4);} .path-resource-card i{font-size:1.3rem;color:var(--sk-violet);margin-bottom:12px;display:block;} .path-resource-card h3{font-size:1rem;font-weight:700;margin:0 0 6px;color:var(--text-primary);} .path-resource-card p{font-size:0.86rem;line-height:1.55;color:var(--text-muted);margin:0;} .path-final-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;} .path-btn{ display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:12px;font-weight:700;font-size:0.95rem; text-decoration:none;transition:transform .2s var(--sk-ease), box-shadow .2s ease, background-color .3s ease, border-color .3s ease; } .path-btn:active{transform:translateY(0) scale(0.97);} .path-btn-primary{background:var(--sk-grad);color:#0a0d1a;box-shadow:0 14px 30px -14px rgba(124,92,255,0.5);} .path-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(124,92,255,0.55);} .path-btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);} .path-btn-secondary:hover{transform:translateY(-2px);border-color:rgba(124,92,255,0.4);} /* ---------- Other paths nav ---------- */ .path-other-paths{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:28px;border-top:1px solid var(--border); font-size:0.9rem;color:var(--text-muted); } .path-other-paths a{color:var(--link-color);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;} .path-other-paths a:hover{color:var(--link-color-hover);} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .path-module, .path-stat, .path-resource-card, .path-btn, .path-progress-fill, body[data-page="paths"]{transition:none;} } /* ---------- Validation quiz ---------- */ .path-quiz-section{margin-bottom:40px;} .path-quiz-section > p{font-size:0.98rem;line-height:1.7;color:var(--text-secondary);margin:0 0 22px;} .path-quiz-gate{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:26px; box-shadow:0 14px 34px -28px var(--shadow-lg); } .path-quiz-gate-icon{ flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:var(--gold-soft); color:var(--gold);font-size:1.3rem; } /* The quiz gate's CTA is always "Get Sqlism Pro" (see paths/*.php — the quiz itself is Pro-gated as of 2026-08-23), but .path-btn-primary is shared with plain non-Pro buttons elsewhere on this page (e.g. "Take a quiz" in the final CTA section), so this is scoped to just the button inside .path-quiz-gate rather than recoloring the shared class. Part of a sitewide Pro-branding gold pass. */ .path-quiz-gate .path-btn-primary{background:linear-gradient(135deg,#fbbf24,#d97706);color:#422006;box-shadow:0 14px 30px -14px rgba(217,119,6,0.5);} .path-quiz-gate .path-btn-primary:hover{box-shadow:0 18px 36px -14px rgba(217,119,6,0.55);} .path-quiz-gate-copy{flex:1;min-width:200px;} .path-quiz-gate-copy h3{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0 0 4px;} .path-quiz-gate-copy p{font-size:0.9rem;color:var(--text-muted);margin:0;} .path-quiz-app{ background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:clamp(20px,3vw,32px); box-shadow:0 18px 40px -30px var(--shadow-lg); } .path-quiz-loading, .path-quiz-error{ text-align:center;padding:30px 10px;color:var(--text-muted);font-weight:600;font-size:0.95rem; } .path-quiz-error{color:var(--sk-coral);} .path-quiz-error i{margin-right:6px;} .path-quiz-start{text-align:center;padding:10px;} .path-quiz-meta{font-size:0.92rem;color:var(--text-muted);margin:0 0 20px;} .path-quiz-banner{ display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap; padding:12px 18px;border-radius:12px;font-size:0.9rem;font-weight:600;margin:0 0 20px; } .path-quiz-banner.is-earned{background:rgba(163,230,53,0.12);color:#5c7a12;border:1px solid rgba(163,230,53,0.35);} [data-theme="dark"] .path-quiz-banner.is-earned{background:rgba(163,230,53,0.14);color:#d5f39a;} .path-quiz-banner.is-fail{background:var(--takeaway-bg);color:var(--takeaway-text);border:1px solid var(--takeaway-border);} .path-quiz-banner a{color:inherit;text-decoration:underline;} .path-quiz-progress{display:flex;align-items:center;gap:14px;margin-bottom:24px;} .path-quiz-progress-track{flex:1;height:6px;border-radius:999px;background:var(--border);overflow:hidden;} .path-quiz-progress-fill{height:100%;width:0%;border-radius:999px;background:var(--sk-grad);transition:width .3s var(--sk-ease);} .path-quiz-progress-label{flex:none;font-size:0.82rem;font-weight:700;color:var(--text-muted);white-space:nowrap;} .path-quiz-question h3{ font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:700;line-height:1.5; color:var(--text-primary);margin:0 0 20px; } .path-quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;} .path-quiz-option{ text-align:left;padding:14px 18px;border-radius:12px;border:1.5px solid var(--border);background:var(--check-empty-bg); color:var(--text-secondary);font-size:0.94rem;font-weight:500;cursor:pointer; transition:border-color .18s ease, background-color .18s ease, transform .12s ease; } .path-quiz-option:hover{border-color:rgba(124,92,255,0.5);} .path-quiz-option:active{transform:scale(0.99);} .path-quiz-option.is-selected{ border-color:var(--sk-violet);background:rgba(124,92,255,0.1);color:var(--text-primary);font-weight:700; } .path-quiz-nav{display:flex;justify-content:flex-end;gap:12px;} .path-btn:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;transform:none !important;} .path-quiz-result{text-align:center;padding:10px;} .path-quiz-score{ font-family:'Plus Jakarta Sans',sans-serif;font-size:3rem;font-weight:800;letter-spacing:-0.02em; background:var(--sk-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; line-height:1; } .path-quiz-score-sub{font-size:0.92rem;color:var(--text-muted);margin:8px 0 20px;font-weight:600;} .path-quiz-result-actions{display:flex;justify-content:center;margin-bottom:22px;} .path-quiz-review-toggle{ background:none;border:none;color:var(--link-color);font-weight:700;font-size:0.88rem;cursor:pointer; display:inline-flex;align-items:center;gap:7px;padding:8px; } .path-quiz-review-toggle:hover{color:var(--link-color-hover);} .path-quiz-review{text-align:left;margin-top:16px;display:flex;flex-direction:column;gap:12px;} .path-quiz-review-item{ border-radius:12px;padding:14px 16px;border:1px solid var(--border);background:var(--check-empty-bg); } .path-quiz-review-item.is-correct{border-color:rgba(163,230,53,0.4);} .path-quiz-review-item.is-incorrect{border-color:rgba(255,107,87,0.4);} .path-quiz-review-q{font-size:0.92rem;font-weight:700;color:var(--text-primary);margin:0 0 6px;} .path-quiz-review-q i{margin-right:6px;} .path-quiz-review-item.is-correct .path-quiz-review-q i{color:var(--sk-lime);} .path-quiz-review-item.is-incorrect .path-quiz-review-q i{color:var(--sk-coral);} .path-quiz-review-a{font-size:0.86rem;color:var(--text-secondary);line-height:1.6;margin:0;} .path-quiz-review-a strong{color:var(--text-primary);} @media (max-width: 640px){ .path-quiz-gate{flex-direction:column;text-align:center;} .path-quiz-options{gap:8px;} .path-quiz-nav{flex-wrap:wrap;} .path-quiz-score{font-size:2.4rem;} } /* ---------- Responsive ---------- */ @media (max-width: 640px){ .path-hero{margin:10px;border-radius:18px;} .path-module-head{flex-wrap:wrap;} .path-check{order:3;margin-left:54px;} .path-card-grid{grid-template-columns:1fr;} .path-final-cta{flex-direction:column;} .path-btn{justify-content:center;} }