/* ITlearnHub — console theme display: Space Grotesk · body: Inter · data/code: JetBrains Mono Per-cert accent is injected as --accent on 's :root override. */ :root{ --bg:#0d1117; --surface:#161b22; --surface-2:#1c2330; --surface-3:#222b39; --border:#2d333b; --border-bright:#3d4654; --text:#e6edf3; --muted:#8b949e; --muted-2:#6b7480; --accent:#6366f1; --radius:14px; --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(99,102,241,.06), transparent 60%), var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; line-height:1.55; min-height:100vh; display:flex; flex-direction:column; } a{color:inherit; text-decoration:none} /* ---------- top bar ---------- */ .topbar{ display:flex; align-items:center; gap:2rem; padding:.85rem 1.4rem; border-bottom:1px solid var(--border); background:rgba(13,17,23,.8); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; } .brand{display:flex; align-items:baseline; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em} .brand-mark{ background:var(--accent); color:#0d1117; padding:.05em .35em; border-radius:6px; margin-right:.12em; font-weight:700; } .brand-word{color:var(--text)} .topnav{display:flex; gap:1.3rem; font-size:.92rem} .topnav a{color:var(--muted); transition:color .15s} .topnav a:hover{color:var(--text)} /* ---------- layout ---------- */ .wrap{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:2.2rem 1.4rem 3rem} .crumbs{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted-2); margin-bottom:1.4rem} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--text)} .crumbs .sep{margin:0 .5rem; color:var(--border-bright)} /* ---------- hero ---------- */ .hero{margin-bottom:2.6rem} .hero .eyebrow{font-family:'JetBrains Mono',monospace; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.7rem} .hero h1{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 .6rem} .hero p{color:var(--muted); max-width:46ch; margin:0; font-size:1.02rem} .hero .accent{color:var(--accent)} /* ---------- track grid (landing) ---------- */ .tracks{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem} .track{ position:relative; display:flex; flex-direction:column; gap:.9rem; padding:1.4rem; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg,var(--surface),var(--surface) 60%, color-mix(in srgb,var(--surface),var(--bg) 30%)); box-shadow:var(--shadow); transition:transform .16s, border-color .16s; overflow:hidden; } .track::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c)} .track.live:hover{transform:translateY(-3px); border-color:var(--border-bright)} .track .row{display:flex; align-items:center; justify-content:space-between; gap:.6rem} .track .icon{font-size:1.7rem; line-height:1} .track .code{font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--muted-2); border:1px solid var(--border); padding:.15em .5em; border-radius:6px; white-space:nowrap} .track h3{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.22rem; margin:0; letter-spacing:-.01em} .track .tag{color:var(--muted); font-size:.92rem; margin:0; flex:1} .track .meta{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.3rem} .track .count{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--c)} .track .go{font-size:.85rem; color:var(--muted); font-weight:500} .track.live:hover .go{color:var(--text)} .track.soon{opacity:.62} .track.soon::after{content:"Coming soon"; position:absolute; top:.9rem; right:.9rem; font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)} .track.soon .code{opacity:0} /* ---------- exam strip ---------- */ .exam-strip{display:flex; flex-wrap:wrap; gap:1.8rem; padding:1rem 1.2rem; margin-bottom:2.2rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)} .exam-strip .stat .k{font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2)} .exam-strip .stat .v{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem} /* ---------- domain cards (cert dashboard) ---------- */ .domains{display:flex; flex-direction:column; gap:1rem} .domain{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:1.2rem 1.3rem; transition:border-color .16s; } .domain:hover{border-color:var(--border-bright)} .domain-head{display:flex; align-items:flex-start; gap:1rem; margin-bottom:.95rem} .domain-num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.95rem; color:var(--accent); border:1px solid var(--border-bright); border-radius:8px; padding:.25rem .55rem; flex-shrink:0} .domain-title{flex:1} .domain-title h3{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.1rem; margin:0 0 .45rem; letter-spacing:-.01em} /* signature: real CompTIA domain weight as a priority bar */ .weight{display:flex; align-items:center; gap:.6rem} .weight .bar{flex:1; max-width:220px; height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden} .weight .bar span{display:block; height:100%; background:var(--accent); border-radius:99px} .weight .pct{font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--muted)} .weight .big{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--accent); letter-spacing:.05em; text-transform:uppercase} /* item list */ .items{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.5rem} .item{display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); transition:background .14s, border-color .14s} .item:hover{background:var(--surface-3); border-color:var(--border-bright)} .item .glyph{color:var(--accent); font-size:.9rem; width:1em; text-align:center; flex-shrink:0} .item .it-title{font-size:.92rem; font-weight:500; line-height:1.25} .item .it-type{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-left:auto; flex-shrink:0} .empty-note{color:var(--muted-2); font-size:.88rem; font-style:italic} /* resources */ .res{margin-top:2.4rem} .res h2{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; margin:0 0 .9rem; color:var(--muted)} .res ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem} .res li a{display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:.92rem; color:var(--text); transition:border-color .14s} .res li a:hover{border-color:var(--border-bright)} .res .warn{color:#f0b429; font-family:'JetBrains Mono',monospace; font-size:.72rem; margin-left:auto} /* ---------- tool wrapper ---------- */ .tool-bar{display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem; border-bottom:1px solid var(--border); background:var(--surface)} .tool-bar .back{font-size:.9rem; color:var(--muted)} .tool-bar .back:hover{color:var(--text)} .tool-bar .t-name{font-family:'Space Grotesk',sans-serif; font-weight:600} .tool-bar .t-type{font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--border-bright); padding:.12em .5em; border-radius:6px} .tool-frame{width:100%; border:0; display:block; background:#fff; min-height:calc(100vh - 52px)} /* ---------- footer ---------- */ .foot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.4rem; border-top:1px solid var(--border); color:var(--muted-2); font-size:.82rem} .foot-note{font-family:'JetBrains Mono',monospace} /* ---------- a11y / motion ---------- */ a:focus-visible,.track:focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} @media (max-width:640px){ .topnav{gap:.9rem; font-size:.84rem} .topbar{gap:1rem; padding:.7rem 1rem} .wrap{padding:1.6rem 1rem 2.4rem} .domain-head{gap:.7rem} } /* ---------- accounts: forms, panels, flashes ---------- */ .topnav-right{margin-left:auto; display:flex; gap:1.1rem; align-items:center; font-size:.9rem} .topnav-right a{color:var(--muted)} .topnav-right a:hover{color:var(--text)} .btn-sm{background:var(--accent); color:#0d1117; padding:.32em .8em; border-radius:7px; font-weight:600; font-size:.85rem} .btn-sm:hover{filter:brightness(1.08)} .who{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted-2)} .auth{max-width:420px; margin:3rem auto 0} .card-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow)} .card-panel h1{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; margin:0 0 .35rem; letter-spacing:-.01em} .card-panel .sub{color:var(--muted); margin:0 0 1.4rem; font-size:.94rem} .field{margin-bottom:1rem} .field label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:.35rem; font-weight:500} .field input{width:100%; background:var(--bg); border:1px solid var(--border-bright); border-radius:9px; padding:.65rem .8rem; color:var(--text); font-size:.98rem; font-family:inherit} .field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)} .field .help{font-size:.76rem; color:var(--muted-2); margin-top:.3rem} .btn{display:inline-block; width:100%; background:var(--accent); color:#0d1117; border:0; border-radius:9px; padding:.7rem 1rem; font-weight:600; font-size:.98rem; cursor:pointer; font-family:inherit; transition:filter .14s} .btn:hover{filter:brightness(1.08)} .auth-foot{margin-top:1.3rem; font-size:.88rem; color:var(--muted); text-align:center} .auth-foot a{color:var(--accent)} .flash{padding:.7rem .9rem; border-radius:9px; margin-bottom:1rem; font-size:.9rem; border:1px solid} .flash-info{background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.35); color:#c7d2fe} .flash-error{background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.4); color:#fca5a5} .flash-success{background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.4); color:#86efac} /* ---------- progress (student dashboard) ---------- */ .pcard{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:1.3rem 1.4rem; margin-bottom:1rem} .pcard h3{font-family:'Space Grotesk',sans-serif; font-weight:600; margin:0 0 .2rem; font-size:1.15rem} .pcard .code{font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--muted-2)} .ring-row{display:flex; align-items:center; gap:1.2rem; margin-top:.9rem; flex-wrap:wrap} .dbar{flex:1; min-width:220px} .dbar .lab{display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:.25rem} .dbar .lab .muted{color:var(--muted-2)} .dbar .track{height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden} .dbar .fill{height:100%; background:var(--accent); border-radius:99px} .readiness{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2rem} /* ---------- instructor tables ---------- */ .tbl{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:1rem} .tbl th,.tbl td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--border)} .tbl th{font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2)} .tbl tr:hover td{background:var(--surface-2)} .pill{font-family:'JetBrains Mono',monospace; font-size:.78rem; background:var(--surface-3); border:1px solid var(--border-bright); border-radius:6px; padding:.1em .5em} .codebox{font-family:'JetBrains Mono',monospace; font-size:1.1rem; letter-spacing:.05em; background:var(--bg); border:1px dashed var(--border-bright); border-radius:8px; padding:.5rem .8rem; display:inline-block; color:var(--accent)} /* ---------- markdown (podcast scripts) ---------- */ .md{font-size:.94rem; line-height:1.7; color:var(--text)} .md h2{font-family:'Space Grotesk',sans-serif; font-size:1.2rem; margin:1.2rem 0 .4rem} .md h3{font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin:1rem 0 .3rem} .md h4{font-size:.95rem; margin:.9rem 0 .3rem; color:var(--muted)} .md p{margin:.5rem 0} .md strong{color:var(--text)} .md em{color:var(--muted)} .md hr{border:0; border-top:1px solid var(--border); margin:1rem 0} .md blockquote{border-left:3px solid var(--accent); margin:.6rem 0; padding:.3rem 0 .3rem .9rem; color:var(--muted)} .md ul{margin:.5rem 0 .5rem 1.2rem} .md li{margin:.2rem 0} /* ---------- resources / link library ---------- */ .lgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .lcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem} .lcard-h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;margin-bottom:.2rem} .lcard-note{font-size:.76rem;color:var(--muted-2);margin-bottom:.5rem} .lcard-list{display:flex;flex-direction:column;gap:.1rem;margin-top:.5rem} .lcard-list a{color:var(--accent);padding:.32rem 0;font-size:.92rem;border-bottom:1px solid transparent} .lcard-list a:hover{border-bottom-color:var(--border-bright)} .lcard-list .missing{color:var(--muted-2);padding:.32rem 0;font-size:.92rem} .lcard-list .missing em{font-size:.74rem;color:#d97706} /* ---------- chapters grouped by domain (accordion) ---------- */ .chgroup{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:.7rem;overflow:hidden} .chgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;font-family:'Space Grotesk',sans-serif;font-weight:600;user-select:none} .chgroup>summary::-webkit-details-marker{display:none} .chgroup>summary:hover{background:var(--surface-2)} .chgroup-dot{width:26px;height:26px;flex:0 0 26px;border-radius:7px;display:grid;place-items:center;color:#0d1117;font-weight:800;font-size:.82rem} .chgroup-title{flex:1} .chgroup-count{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted-2);background:var(--surface-3);border-radius:99px;padding:.1em .6em} .chgroup[open]>summary{border-bottom:1px solid var(--border)} .chgroup-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:1rem 1.1rem} .chcard{margin:0;text-decoration:none;display:block;padding:.85rem .95rem;transition:border-color .14s,transform .14s} .chcard:hover{border-color:var(--accent);transform:translateY(-1px)} /* ---------- members-only gate ---------- */ .gate{max-width:460px;margin:3rem auto;text-align:center} .gate .lock{font-size:2.4rem} .gate h1{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;margin:.5rem 0 .3rem} .gate p{color:var(--muted);margin:0 0 1.2rem} .gate .btn-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap} /* ---------- footer auth links ---------- */ .hub-footer{border-top:1px solid var(--border);margin-top:3rem;padding:1.4rem 0;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;justify-content:center;font-size:.85rem;color:var(--muted-2)} .hub-footer a{color:var(--muted)}.hub-footer a:hover{color:var(--text)} /* ---------- chapters nested inside a domain ---------- */ .dom-chapters{margin:.9rem 0 .2rem} .dom-sub{font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:.5rem} .dom-chapters .chgroup-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}