/* ============================================================ Direction D — Career Launchpad design system Terminal / cybersecurity aesthetic. Light + dark themes. Translated from "Career Launchpad - Direction D.dc.html" (Claude Design canvas) into a real, reusable stylesheet. Usage: every page links this FIRST, then dd-chrome.js LAST. Tokens default to DARK on :root; [data-theme="light"] on overrides. dd-chrome.js sets data-theme from the Store. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* ---------- THEME TOKENS ---------- */ :root, :root[data-theme="dark"] { --bg:#000; --cardbg:#0a0a0a; --surface:#0a0a0a; --fg:#ededed; --dim:#9a9a9a; --faint:#8a8a8a; /* faint AA-tuned per FE */ --line:#232323; --line2:#1a1a1a; --red:#ff2a1a; --green:#3ddc84; --btn:#ff2a1a; --btnfg:#000; --scan:rgba(255,255,255,0.04); --selbg:rgba(255,42,26,0.07); /* domain palette (mirrors content.js — Direction D values) */ --dom-grc:#3B6BFF; --dom-architecture:#16B886; --dom-threatVuln:#FF3B2F; --dom-secops:#9B6BFF; --dom-ot:#FF9F45; --font-sans:'Geist',system-ui,-apple-system,sans-serif; --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; } :root[data-theme="light"] { --bg:#f6f5f0; --cardbg:#ffffff; --surface:#f1efe8; --fg:#14130f; --dim:#56534c; --faint:#6e6b62; /* faint AA-tuned per FE */ --line:#dcdad1; --line2:#eceae2; --red:#e5231b; --green:#0e7c5a; --btn:#14130f; --btnfg:#f6f5f0; --scan:rgba(0,0,0,0.012); --selbg:rgba(229,35,27,0.06); } /* ---------- BASE ---------- */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} @keyframes dd-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}} ::selection{background:var(--red);color:#fff;} body{ min-height:100vh; background-color:var(--bg); background-image:repeating-linear-gradient(to bottom, var(--scan) 0, var(--scan) 1px, transparent 1px, transparent 3px); color:var(--fg); font-family:var(--font-sans); font-size:16px; line-height:1.5; transition:background-color .35s ease,color .35s ease; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} h1,h2,h3,h4{font-weight:600;letter-spacing:-0.02em;margin:0;} .dd-mono{font-family:var(--font-mono);} .dd-cursor{display:inline-block;width:7px;height:14px;background:var(--red); vertical-align:-1px;animation:dd-blink 1.1s step-end infinite;} .dd-red{color:var(--red);} .dd-green{color:var(--green);} .dd-dim{color:var(--dim);} .dd-faint{color:var(--faint);} .dd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* section label — `// step_01 :: overview` */ .dd-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em; color:var(--red);margin-bottom:14px;} /* ---------- SKIP LINK (a11y, kept from v2 brief) ---------- */ .dd-skip{position:absolute;left:-9999px;top:0;z-index:200; background:var(--btn);color:var(--btnfg);font-family:var(--font-mono); font-size:12px;padding:10px 16px;} .dd-skip:focus{left:8px;top:8px;} /* ---------- FOCUS ---------- */ :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--red);outline-offset:2px;} /* ============================================================ CHROME (injected by dd-chrome.js, styled here) ============================================================ */ .dd-topbar{display:flex;align-items:center;justify-content:space-between; padding:16px 32px;border-bottom:1px solid var(--line);font-family:var(--font-mono);} .dd-topbar__prompt{display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:0.06em;} .dd-topbar__nav{display:flex;align-items:center;gap:24px;font-size:11px;letter-spacing:0.1em;color:var(--faint);} .dd-topbar__nav a{cursor:pointer;} .dd-topbar__nav a:hover{color:var(--fg);} .dd-toggle{display:flex;border:1px solid var(--line);} .dd-toggle button{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em; padding:7px 12px;background:transparent;color:var(--faint);border:none;cursor:pointer;} .dd-toggle button + button{border-left:1px solid var(--line);} .dd-toggle button[aria-pressed="true"]{background:var(--btn);color:var(--btnfg);} .dd-stepnav{display:flex;border-bottom:1px solid var(--line);} .dd-stepnav__item{flex:1;padding:13px 14px;border:none;border-right:1px solid var(--line); border-bottom:2px solid transparent;background:transparent;color:var(--faint); font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-align:left; cursor:pointer;display:block;} .dd-stepnav__item:last-child{border-right:none;} .dd-stepnav__item:hover{color:var(--dim);} .dd-stepnav__item[aria-current="page"]{color:var(--fg);border-bottom-color:var(--red);} .dd-stepnav__item[aria-current="page"] .dd-stepnav__n{color:var(--red);} .dd-stepnav__n{color:var(--faint);} .dd-progress{display:flex;align-items:center;gap:14px;padding:10px 32px; border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10px; letter-spacing:0.12em;color:var(--faint);} .dd-progress__track{flex:1;max-width:420px;height:3px;background:var(--line);} .dd-progress__fill{height:100%;background:var(--red);transition:width .6s ease;width:0%;} .dd-footer{padding:22px 32px;border-top:1px solid var(--line);display:flex; flex-wrap:wrap;gap:10px;justify-content:space-between;font-family:var(--font-mono); font-size:10px;letter-spacing:0.08em;color:var(--faint);} .dd-footer a{cursor:pointer;} .dd-footer a:hover{color:var(--fg);} .dd-footer__disclaimer{flex-basis:100%;order:-1;padding-bottom:14px;margin-bottom:8px; border-bottom:1px solid var(--line);line-height:1.6;} .dd-footer__clearbtn{background:none;border:none;padding:0;margin:0;cursor:pointer; font:inherit;letter-spacing:inherit;color:var(--faint);text-decoration:underline;} .dd-footer__clearbtn:hover{color:var(--fg);} /* ============================================================ LAYOUT + COMPONENTS (reused by every page) ============================================================ */ .dd-screen{} /* a step screen wrapper */ .dd-section{padding:48px 44px;} .dd-section--tight{padding:40px 44px;} .dd-section + .dd-section{border-top:1px solid var(--line);} .dd-h1{font-size:clamp(34px,5vw,50px);line-height:1.02;font-weight:600;letter-spacing:-0.025em;} .dd-h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-0.02em;} .dd-lede{font-family:var(--font-mono);font-size:14px;line-height:1.7;color:var(--dim);} /* buttons */ .dd-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:0.05em; padding:14px 24px;background:var(--btn);color:var(--btnfg);border:none;cursor:pointer; display:inline-flex;align-items:center;gap:8px;} .dd-btn:hover{filter:brightness(1.08);} .dd-btn--ghost{background:transparent;color:var(--fg);padding:14px 6px; border-bottom:1px solid var(--red);} .dd-btn--ghost:hover{filter:none;color:var(--red);} .dd-btn:disabled{opacity:.45;cursor:not-allowed;filter:none;} /* grid of bordered cards (careers, certs, etc.) */ .dd-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-left:1px solid var(--line);border-top:1px solid var(--line);} .dd-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--cardbg);padding:20px;display:flex;flex-direction:column;gap:10px; font-family:var(--font-mono);} .dd-card--pad{padding:26px;} .dd-panel{border:1px solid var(--line);background:var(--cardbg);padding:26px;} /* domain dot */ .dd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;} /* filter / segmented control */ .dd-seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);width:fit-content;} .dd-seg__btn{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em; padding:9px 15px;border:none;border-right:1px solid var(--line);background:transparent; color:var(--dim);cursor:pointer;} .dd-seg__btn:last-child{border-right:none;} .dd-seg__btn[aria-pressed="true"],.dd-seg__btn.is-active{background:var(--red);color:#fff;} /* progressbar (in-content, e.g. assessment) */ .dd-bar{height:4px;border:1px solid var(--line);} .dd-bar__fill{height:100%;background:var(--red);transition:width .4s ease;} /* modal */ .dd-modal{position:fixed;inset:0;background:rgba(0,0,0,0.74);z-index:100; display:flex;align-items:center;justify-content:center;padding:40px;} .dd-modal__panel{width:680px;max-width:100%;max-height:88vh;overflow:auto; background:var(--bg);border:1px solid var(--line); background-image:repeating-linear-gradient(to bottom,var(--scan) 0,var(--scan) 1px,transparent 1px,transparent 3px);} .dd-modal__head{display:flex;justify-content:space-between;align-items:center; padding:20px 26px;border-bottom:1px solid var(--line);font-family:var(--font-mono);} /* timeline (roadmap) */ .dd-timeline__row{display:flex;gap:22px;align-items:stretch;} .dd-timeline__num{width:40px;height:40px;border:1px solid var(--red);border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:var(--font-mono); font-size:13px;color:var(--red);flex:none;} .dd-timeline__line{flex:1;width:1px;background:var(--line);margin:6px 0;} /* notice (persistence-blocked etc.) */ .dd-notice{font-family:var(--font-mono);font-size:12px;color:var(--dim); border:1px solid var(--line);border-left:2px solid var(--red);padding:10px 14px;margin:0 32px;} /* ---------- RESPONSIVE (980 / 760 / 520, mirroring the DD canvas) ---------- */ @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} .hero-grid > .hero-pane{border-right:none;border-bottom:1px solid var(--line);} .ident-grid{grid-template-columns:1fr;} .ident-grid > .ident-rail{border-right:none;border-bottom:1px solid var(--line);} .skills-grid{grid-template-columns:1fr;gap:34px;} .skills-grid .radar-wrap{max-width:340px;} .stat-grid{grid-template-columns:1fr 1fr;} } @media (max-width:760px){ .dd-topbar,.dd-progress{padding-left:18px;padding-right:18px;} .dd-section{padding:32px 18px;} .dd-stepnav{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-padding-inline:18px; mask-image:linear-gradient(to right,#000 92%,transparent 100%); -webkit-mask-image:linear-gradient(to right,#000 92%,transparent 100%);} /* min-width tuned so a 375px viewport shows 2 full tabs + a clearly partial 3rd (of 6) — signals more steps exist without needing JS or an arrow icon. */ .dd-stepnav__item{flex:0 0 auto;min-width:150px;} .dd-cardgrid,[data-cardgrid]{grid-template-columns:1fr 1fr;} .three-col{grid-template-columns:1fr;} .framework-row{flex-wrap:wrap;} .tool-row{flex-wrap:wrap;} } @media (max-width:520px){ .dd-cardgrid,[data-cardgrid]{grid-template-columns:1fr;} .dd-topbar{flex-wrap:wrap;gap:10px;} .hero-h1{font-size:38px;} } /* ---------- REDUCED MOTION ---------- Content is never gated at opacity:0 in CSS, so a no-JS / no-anime load still shows everything. Here we also collapse durations. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;transition-duration:.001ms !important;} .dd-cursor{animation:none;} }