/* ========================================================================= plotyourcareer.com Transplanted from the after-school-guide bundle (pyc-edition.html), which is the agreed interface. Class names are kept exactly as authored there so the markup ports across unchanged. Additions for server-rendered pages are marked SERVER ADDITIONS at the end. ========================================================================= */ /* ========================================================================= plotyourcareer.com — calm reference Neutral surfaces, one accent, generous space, cards with hairline edges. No imagery: the figures carry the weight photography carries elsewhere. Written mobile-first here, because this edition is read on a phone: the single-column arrangement is the base and the reference layout is the enhancement. Same tokens, same furniture, same result at 1120px. Three theme states, not two: an explicit choice stamps data-theme, and the default "system" setting stamps nothing. ========================================================================= */ :root{ --page: #f3f4f6; --surface: #ffffff; --surface-2: #f8f9fa; --ink: #16191d; --ink-2: #4a5158; --ink-3: #767e87; --line: #e3e6ea; --line-2: #d4d9df; /* Two colours doing two jobs, rather than one doing both: navy carries the headings and the structure, teal carries anything you can act on. Taken from whitecoatguru.in — see candidate-ui/direction-1-whitecoat. */ --heading: #0a2651; /* A shade deeper than their #00898c, which lands at 4.3:1 against white and fails AA both as link text and under white button labels. This is 5.4:1 and still plainly the same teal. Their site has the same problem; that is not a reason to copy it onto a page read by fifteen-year-olds on phones. */ --accent: #00767a; --accent-ink: #00575a; --accent-wash: #e4f2f2; --on-accent: #ffffff; /* Severity, deliberately desaturated. These exams are difficult, not dangerous — a fifteen-year-old should feel informed, not warned off. */ --sev-reach: #1f7a52; --sev-tough: #8a6d1f; --sev-vtough: #9c5a2a; --sev-brutal: #7a4a63; --sev-reach-bg: #e8f3ee; --sev-tough-bg: #f7f1e0; --sev-vtough-bg: #f8eee6; --sev-brutal-bg: #f4ecf1; /* Heatmap depth ramp — the accent hue, five steps. Follows the accent: a blue ramp beside teal actions reads as two unrelated systems. */ --h0:#f1f3f5; --h1:#d8efee; --h2:#a6dbda; --h3:#63c0bf; --h4:#2f9b9c; --hatch: rgba(22,25,29,.16); --radius: 12px; --radius-lg: 18px; /* Large, soft and tinted navy rather than tight and grey: a card should look lifted off the page, not stencilled onto it. */ --shadow: 0 6px 18px -10px rgba(10,38,81,.18); --shadow-lift: 0 18px 46px -22px rgba(10,38,81,.28); --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace; --wrap: 1120px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page: #0f1215; --surface: #171b1f; --surface-2: #1c2126; --ink: #e9ecef; --ink-2: #b0b8c0; --ink-3: #858e97; --line: #272d33; --line-2: #333a41; /* Navy is the page here, not the heading, so headings take the ink colour and teal lifts for contrast. whitecoatguru.in ships no dark theme — this half is ours. */ --heading: #e9ecef; --accent: #35b3b5; --accent-ink: #5ecbcc; --accent-wash: #0c3a3b; --on-accent: #0f1215; --sev-reach: #6cc39a; --sev-tough: #d3b25c; --sev-vtough:#d8a077; --sev-brutal:#c3a0b6; --sev-reach-bg:#10241c; --sev-tough-bg:#241f10; --sev-vtough-bg:#251b13; --sev-brutal-bg:#221a20; --h0:#1b2126; --h1:#173634; --h2:#1f5654; --h3:#2a7d7c; --h4:#3fa6a6; --hatch: rgba(233,236,239,.18); --shadow: 0 6px 18px -10px rgba(0,0,0,.5); --shadow-lift: 0 18px 46px -22px rgba(0,0,0,.6); } } :root[data-theme="dark"]{ --page:#0f1215; --surface:#171b1f; --surface-2:#1c2126; --ink:#e9ecef; --ink-2:#b0b8c0; --ink-3:#858e97; --line:#272d33; --line-2:#333a41; --heading:#e9ecef; --accent:#35b3b5; --accent-ink:#5ecbcc; --accent-wash:#0c3a3b; --on-accent:#0f1215; --sev-reach:#6cc39a; --sev-tough:#d3b25c; --sev-vtough:#d8a077; --sev-brutal:#c3a0b6; --sev-reach-bg:#10241c; --sev-tough-bg:#241f10; --sev-vtough-bg:#251b13; --sev-brutal-bg:#221a20; --h0:#1b2126; --h1:#173634; --h2:#1f5654; --h3:#2a7d7c; --h4:#3fa6a6; --hatch: rgba(233,236,239,.18); --shadow:0 6px 18px -10px rgba(0,0,0,.5); --shadow-lift:0 18px 46px -22px rgba(0,0,0,.6); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--page); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } main{max-width:var(--wrap); margin:0 auto; padding:0 18px 4rem} /* No underline by default. Most links on this site are whole components — a card, a chip, a row heading, a star — and underlining a card underlines every line of it, which is what this rule exists to stop. Those components carry their own affordance: a border, a background, an arrow. Links inside running text are the exception and keep the underline. Colour alone is not enough to mark a link, and mid-sentence there is no shape to give it away. `:not([class])` is the test: anything with a class is a component and styles itself, anything without is prose. */ a{color:var(--accent); text-decoration:none} p a:not([class]), li a:not([class]), dd a:not([class]){ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px } h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--heading); text-wrap:balance } p{margin:0} ul,ol{margin:0; padding-left:1.15em} li{margin:.3em 0} :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px} button{font-family:inherit} /* ---------- masthead ---------- */ .mast{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20} .mast-in{ max-width:var(--wrap); margin:0 auto; padding:0 18px; min-height:56px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:600; letter-spacing:-.01em; cursor:pointer; background:none; border:0; padding:0; font-size:15px} .brand-mark{ width:26px; height:26px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:700; display:grid; place-items:center; flex:none; letter-spacing:.02em; } .brand-name span{color:var(--ink-3); font-weight:400} /* One way in, one way back — and, since every screen has exactly one parent, a trail showing what the current page is part of. The arrow stays for the narrow case, where the trail collapses to its last step. */ .backbtn{ width:36px; height:36px; flex:none; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:16px; } .backbtn[hidden]{display:none} .where{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em; display:flex; align-items:center; gap:6px; } .where[hidden]{display:none} .crumb{color:var(--ink-3); font-weight:500; flex:none} .crumb:hover{color:var(--accent)} /* The separator belongs to the crumb that follows it, so the current page never trails one. Marked presentational: a screen reader reading "chevron" between every step is noise, and