/* ============================================================ Interview Mastery — 20-hour training course Long-form lesson design system. Warm-paper light + dark. Pure CSS variables, toggled via [data-theme] on . Shared by the curriculum index and every module page. ============================================================ */ /* ---------- Design tokens ---------- */ :root { --font-display: "Fraunces", Georgia, serif; --font-body: "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem); --step-0: clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem); --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem); --step-2: clamp(1.5rem, 1.32rem + 0.8vw, 2.1rem); --step-3: clamp(2.1rem, 1.7rem + 1.7vw, 3.3rem); --content-width: 760px; --radius: 18px; --radius-sm: 10px; --gap: clamp(1rem, 2.5vw, 1.6rem); --t-fast: 140ms; --t-med: 240ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Light theme (warm paper) ---------- */ :root, :root[data-theme="light"] { --bg: #f6f1e9; --bg-grad: radial-gradient(120% 90% at 50% -10%, #fcf8f1 0%, #f6f1e9 55%); --surface: #fffdf9; --surface-2: #f2ebe0; --ink: #211c17; --ink-soft: #564d43; --ink-faint: #897d6e; --line: #e4d9c8; --line-strong: #d2c4ae; --accent: #b54417; --accent-ink: #ffffff; --accent-soft: #f5e3d7; --accent-deep: #8f3411; --good: #2f7d54; --good-soft: #dff0e5; --warn: #9a6a12; --warn-soft: #f6ead2; --info: #2f6d8f; --info-soft: #dcebf3; --shadow: 0 1px 2px rgba(60,40,20,.05), 0 16px 40px -20px rgba(80,50,25,.30); --shadow-sm: 0 1px 2px rgba(60,40,20,.06), 0 6px 18px -12px rgba(80,50,25,.22); --code-bg: #2b2620; --code-ink: #f4ede0; } /* ---------- Dark theme ---------- */ :root[data-theme="dark"] { --bg: #161310; --bg-grad: radial-gradient(120% 90% at 50% -10%, #221d18 0%, #161310 55%); --surface: #211c17; --surface-2: #2a241e; --ink: #f3ece1; --ink-soft: #c8bdad; --ink-faint: #8d8175; --line: #362f27; --line-strong: #463d32; --accent: #e0763f; --accent-ink: #1a120c; --accent-soft: #3a281d; --accent-deep: #f0915f; --good: #61c08a; --good-soft: #1f3128; --warn: #d9a441; --warn-soft: #352a16; --info: #6cb0d4; --info-soft: #162a35; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 46px -22px rgba(0,0,0,.72); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.6); --code-bg: #100d0a; --code-ink: #f4ede0; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.72; color: var(--ink); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--ink); } p { margin: 0 0 1.05rem; } a { color: var(--accent); text-underline-offset: 3px; } strong { font-weight: 650; } code, pre, kbd { font-family: var(--font-mono); } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------- Buttons ---------- */ .btn { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: .7em 1.3em; border-radius: 999px; display: inline-flex; align-items: center; gap: .5em; text-decoration: none; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .btn:hover { transform: translateY(-1px); border-color: var(--accent); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 8px 20px -10px var(--accent); } .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn--ghost:hover { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ---------- Top reading-progress bar ---------- */ .progress-bar { position: fixed; inset: 0 0 auto 0; height: 4px; background: var(--line); z-index: 60; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width 90ms linear; } @media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2rem); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar .home-link { font-weight: 600; text-decoration: none; color: var(--ink-soft); white-space: nowrap; } .topbar .home-link:hover { color: var(--accent); } .topbar .tb-title { font-family: var(--font-display); font-weight: 560; font-size: var(--step-0); color: var(--ink); } .topbar .spacer { flex: 1; } .topbar .tb-meta { font-size: var(--step--1); color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .theme-toggle { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); width: 40px; height: 40px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .theme-toggle:hover { border-color: var(--accent); transform: rotate(-12deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle:hover { transform: none; } } /* ============================================================ LESSON LAYOUT — sticky TOC + reading column ============================================================ */ .lesson-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 4vw, 2rem) 6rem; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); } .lesson-main { max-width: var(--content-width); min-width: 0; } /* Table of contents */ .toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; font-size: var(--step--1); padding-right: .5rem; } .toc .toc-label { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint); font-size: .72rem; margin-bottom: .8rem; } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; counter-reset: toc; } .toc a { display: block; text-decoration: none; color: var(--ink-soft); padding: .34em .6em .34em .9em; border-radius: 8px; border-left: 2px solid transparent; line-height: 1.4; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .toc a:hover { color: var(--accent); background: var(--surface-2); } .toc a.is-active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .toc .toc-progress { margin-top: 1.2rem; font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* ---------- Lesson hero ---------- */ .lesson-hero { margin-bottom: 2.4rem; } .lesson-hero .kicker { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; } .lesson-hero .modnum { font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent); padding: .15em .55em; border-radius: 8px; font-weight: 700; } .lesson-hero h1 { font-size: var(--step-3); margin-bottom: .5rem; } .lesson-hero .standfirst { font-size: var(--step-1); color: var(--ink-soft); max-width: 56ch; } .lesson-hero .hero-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.3rem; font-size: var(--step--1); color: var(--ink-faint); font-variant-numeric: tabular-nums; } .lesson-hero .hero-meta strong { color: var(--ink); } .goals { margin: 1.6rem 0 0; padding: 1.2rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .goals .goals-title { font-weight: 700; margin: 0 0 .6rem; font-family: var(--font-body); } .goals ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; } .goals li { margin: 0; } /* ---------- Section ---------- */ .section { scroll-margin-top: 90px; margin: 2.8rem 0; } .section > h2 { font-size: var(--step-2); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); } .section > h2 .secnum { color: var(--accent); font-size: .8em; margin-right: .5rem; font-variant-numeric: tabular-nums; } .section h3 { font-size: var(--step-1); margin: 1.8rem 0 .7rem; } .section ul, .section ol { padding-left: 1.3rem; } .section li { margin: .4rem 0; } .section li::marker { color: var(--accent); } .lead-in { font-size: var(--step-1); color: var(--ink-soft); font-family: var(--font-display); line-height: 1.4; } /* Inline code */ .lesson-main :not(pre) > code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .08em .4em; font-size: .88em; } /* ---------- Callouts ---------- */ .callout { margin: 1.4rem 0; padding: 1.1rem 1.3rem 1.1rem 1.4rem; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 4px solid var(--ink-faint); background: var(--surface); } .callout .co-label { display: flex; align-items: center; gap: .5em; font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; margin-bottom: .4rem; font-family: var(--font-body); } .callout p:last-child { margin-bottom: 0; } .callout .co-icon { font-size: 1.05em; } .callout--why { border-left-color: var(--info); background: var(--info-soft); } .callout--why .co-label { color: var(--info); } .callout--interview { border-left-color: var(--accent); background: var(--accent-soft); } .callout--interview .co-label { color: var(--accent-deep); } .callout--interview .say { font-style: italic; } .callout--trap { border-left-color: var(--warn); background: var(--warn-soft); } .callout--trap .co-label { color: var(--warn); } .callout--deep { border-left-color: var(--good); background: var(--good-soft); } .callout--deep .co-label { color: var(--good); } /* ---------- Diagram (Mermaid) ---------- */ .diagram { margin: 1.6rem 0; padding: 1.4rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .diagram .mermaid { text-align: center; overflow-x: auto; } .diagram figcaption { margin-top: .9rem; text-align: center; color: var(--ink-soft); font-style: italic; font-size: var(--step--1); } /* ---------- Code block ---------- */ .codeblock { margin: 1.4rem 0; } .codeblock pre[class*="language-"] { border-radius: var(--radius-sm); border: 1px solid var(--line); margin: 0; font-size: .88rem; } .codeblock .cb-note { margin-top: .5rem; color: var(--ink-soft); font-size: var(--step--1); } :root[data-theme="light"] pre[class*="language-"], :root[data-theme="light"] code[class*="language-"] { background: var(--code-bg); } /* ---------- Comparison table ---------- */ .lesson-main .table-wrap { overflow-x: auto; margin: 1.4rem 0; } .lesson-main table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .lesson-main th, .lesson-main td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; } .lesson-main thead th { color: var(--accent); border-bottom: 2px solid var(--line-strong); font-family: var(--font-body); } .lesson-main tbody tr:last-child td { border-bottom: none; } /* ---------- Recap ---------- */ .recap { margin-top: 3rem; padding: 1.6rem 1.7rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .recap h2 { font-size: var(--step-1); margin-bottom: .8rem; } .recap ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; } /* ---------- Self-check ---------- */ .selfcheck { margin-top: 2.4rem; } .selfcheck h2 { font-size: var(--step-1); margin-bottom: .4rem; } .selfcheck .sc-sub { color: var(--ink-faint); font-size: var(--step--1); margin-bottom: 1rem; } .qa { padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .qa:last-of-type { border-bottom: none; } .qa .q { font-weight: 600; margin: 0 0 .7rem; } .qa .q::before { content: "Q "; color: var(--accent); font-weight: 800; } .qa .reveal { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); padding: .4em 1em; border-radius: 999px; transition: border-color var(--t-fast) var(--ease); } .qa .reveal:hover { border-color: var(--accent); } .qa .a { margin: .8rem 0 0; padding-left: 1rem; border-left: 3px solid var(--good); color: var(--ink-soft); } .qa .a::before { content: "A "; color: var(--good); font-weight: 800; } /* ---------- Lesson footer / next ---------- */ .lesson-foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .lesson-foot .next-card { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; padding: 1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .lesson-foot .next-card:hover { border-color: var(--accent); transform: translateY(-2px); } .lesson-foot .next-card .nc-label { font-size: var(--step--1); color: var(--ink-faint); } .lesson-foot .next-card .nc-title { font-family: var(--font-display); font-weight: 560; color: var(--ink); } @media (prefers-reduced-motion: reduce) { .lesson-foot .next-card:hover { transform: none; } } .mark-done { font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--good); background: transparent; color: var(--good); padding: .6em 1.2em; border-radius: 999px; display: inline-flex; align-items: center; gap: .5em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .mark-done.is-done { background: var(--good); color: #fff; } /* ============================================================ CURRICULUM LANDING (index.html) ============================================================ */ .site-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 5rem; } .hero { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.6rem, 4vw, 2.6rem); } .hero .kicker { font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .hero h1 { font-size: var(--step-3); margin-bottom: .5rem; } .hero .purpose { font-size: var(--step-1); color: var(--ink-soft); max-width: 54ch; margin: 0 auto 1.6rem; } .hero .meta { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: center; color: var(--ink-faint); font-size: var(--step--1); margin-bottom: 1.6rem; font-variant-numeric: tabular-nums; } .hero .meta strong { color: var(--ink); } .hero .cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .overall { max-width: 560px; margin: 2.2rem auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); } .overall .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; } .overall .row .label { font-weight: 600; } .overall .row .count { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .overall .track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .overall .track > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width 600ms var(--ease); } .part-head { display: flex; align-items: baseline; gap: 1rem; margin: clamp(2.4rem, 6vw, 3.6rem) 0 .4rem; } .part-head h2 { font-size: var(--step-2); margin: 0; } .part-head .rule { flex: 1; height: 1px; background: var(--line); } .part-sub { color: var(--ink-faint); font-size: var(--step--1); margin: 0 0 1.3rem; } .mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gap); } .mod-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.2rem; text-decoration: none; color: inherit; box-shadow: var(--shadow); overflow: hidden; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .mod-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line-strong); transition: background var(--t-fast) var(--ease); } .mod-card:hover { transform: translateY(-3px); border-color: var(--accent); } .mod-card:hover::before { background: var(--accent); } .mod-card.is-completed::before { background: var(--good); } .mod-card.is-progress::before { background: var(--accent); } @media (prefers-reduced-motion: reduce) { .mod-card:hover { transform: none; } } .mod-card .mc-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; } .mod-card .num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); font-weight: 700; background: var(--accent-soft); padding: .2em .55em; border-radius: 8px; } .mod-card .track-tag { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line-strong); padding: .2em .55em; border-radius: 999px; } .mod-card h3 { font-size: var(--step-1); margin: 0 0 .45rem; } .mod-card .blurb { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 1rem; flex: 1; } .mod-card .mc-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--step--1); color: var(--ink-faint); } .mod-card .state { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; } .mod-card.is-completed .state { color: var(--good); } .mod-card.is-progress .state { color: var(--accent); } .mod-card--optional { border-style: dashed; background: var(--surface-2); } .optional-badge { position: absolute; top: 0; right: 0; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: .3em .7em; border-bottom-left-radius: 10px; } .site-footer { text-align: center; color: var(--ink-faint); font-size: var(--step--1); margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } /* ---------- Utility ---------- */ [hidden] { display: none !important; } .skip-link { position: absolute; left: -999px; top: .5rem; background: var(--accent); color: var(--accent-ink); padding: .5em 1em; border-radius: 8px; z-index: 100; } .skip-link:focus { left: .5rem; } /* ---------- Responsive ---------- */ @media (max-width: 940px) { .lesson-wrap { grid-template-columns: 1fr; } .toc { display: none; } }