/* ============================================================ oncall-sim — skin (agreed direction: "NOC at 3 a.m.", see DESIGN.md) Loaded after frame.css. Everything inside the 1280×800 screen is styled here; frame.css only draws the desk and the device frame. The hub's Templ views map these classes 1:1 (internal/CLAUDE.md § Design system). Add a class here → add a line to DESIGN.md. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* surfaces & ink — cool charcoal, hue ≈ 215 */ --paper:#0E1116; /* screen background */ --raised:#151A21; /* cards, dialog */ --raised-2:#1C232C; /* hover, popover surface */ --slab:#0A0D11; /* the pager card body — darker than the page */ --ink:#E6EBF0; --body:#C3CBD4; /* long-form text (descriptions) */ --muted:#8B97A5; --faint:#4E5A68; /* disabled, tertiary */ --rule:#232B35; --rule-strong:#34404D; --desk:#06080B; --bezel:#000; /* one color, one meaning */ --accent:#F5B335; /* pager LED amber: primary action, active state, timer */ --accent-ink:#14100A; /* text on amber */ --alert:#E5484D; /* ONLY the severity badge and a fired alert in a replay report */ --pass:#3DD68C; /* a passed stage, "Cleared" */ --amber-band:#1F1A10; /* banner ground */ --amber-band-rule:#4A3A14; --display:"Archivo Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --radius:2px; /* hardware-sharp; the exception is the status dot (round) */ --margin:20px; } /* the frame is dark too */ .frame{background:var(--paper)} .screen{font:13px/1.45 var(--sans);color:var(--ink);background:var(--paper)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---------- chrome: the top bar every page opens with ---------- */ .hub{display:flex;flex-direction:column;min-height:100%;position:relative} .topbar{flex:none;height:48px;display:flex;align-items:center;gap:28px; padding:0 var(--margin);border-bottom:1px solid var(--rule);background:var(--paper)} .brand{font:600 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .brand b{color:var(--accent);font-weight:600} .nav{display:flex;gap:22px;height:100%} .nav a{display:flex;align-items:center;height:100%;font-size:13px;font-weight:500;color:var(--muted); border-bottom:2px solid transparent;margin-bottom:-1px} .nav a.on{color:var(--ink);border-bottom-color:var(--accent)} .nav a.dis{color:var(--faint);cursor:default} .nav a:not(.on):not(.dis):hover{color:var(--ink)} .chip{margin-left:auto;display:flex;align-items:center;gap:10px;height:28px;padding:0 10px; border:1px solid var(--rule-strong);border-radius:var(--radius);font:500 12px var(--mono); font-variant-numeric:tabular-nums;color:var(--ink)} .chip.idle{color:var(--faint);border-color:var(--rule)} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite} .chip .id{color:var(--muted)} .chip .t{color:var(--accent)} .chip a{color:var(--muted);font-family:var(--sans);font-weight:500;padding-left:10px;border-left:1px solid var(--rule-strong)} .chip a:hover{color:var(--ink)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} /* ---------- banner (degraded hub) ---------- */ .banner{flex:none;display:flex;align-items:baseline;gap:14px;padding:9px var(--margin); background:var(--amber-band);border-bottom:1px solid var(--amber-band-rule);font-size:12.5px;color:var(--body)} .banner .k{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .banner .r{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11.5px} /* ---------- page body ---------- */ .page{flex:1;padding:26px var(--margin) 40px} .page-head{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--rule)} .page-head h1{font:600 34px/1 var(--display);letter-spacing:.02em;text-transform:uppercase} .page-head .sub{color:var(--muted);font-size:12.5px} .page-head .sub b{color:var(--ink);font-weight:500} /* tier bands (CTFd's "category" rows) */ .tier{margin-top:26px} .tier-head{display:flex;align-items:center;gap:14px;margin-bottom:12px} .tier-no{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .tier-head hr{flex:1;border:0;border-top:1px solid var(--rule)} .tier-note{font-size:11.5px;color:var(--faint);white-space:nowrap} .tier.locked .tier-no{color:var(--faint)} /* ---------- challenge card (also the future tree node, S-16) ---------- */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .card{display:flex;flex-direction:column;gap:10px;min-height:156px;padding:14px 16px 12px; background:var(--raised);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);text-align:left} .card:hover{background:var(--raised-2);border-color:var(--rule-strong)} .card .top{display:flex;align-items:center;justify-content:space-between;gap:10px} .card .slug{font:500 11.5px var(--mono);color:var(--muted)} .card h3{font:600 21px/1.15 var(--display);letter-spacing:.005em;text-wrap:balance} .card .meta{display:flex;gap:14px;font:400 11.5px var(--mono);color:var(--muted)} .card .meta b{font-weight:500;color:var(--body)} .card .state{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:10px; border-top:1px solid var(--rule);font-size:12px;color:var(--muted)} .card .state .sq{width:8px;height:8px;background:var(--faint)} .card.available .state .sq{background:var(--pass)} .card.available .state{color:var(--body)} .card.active{border-color:var(--accent)} .card.active .state{color:var(--accent)} .card.active .state .sq{background:var(--accent);animation:pulse 1.6s ease-in-out infinite} .card.active .state .t{margin-left:auto;font:500 12.5px var(--mono);font-variant-numeric:tabular-nums} .card.locked{border-style:dashed;background:transparent;color:var(--faint);cursor:default} .card.locked:hover{background:transparent;border-color:var(--rule)} .card.locked .slug,.card.locked .meta,.card.locked .meta b,.card.locked .state{color:var(--faint)} .card.locked h3{color:var(--muted)} .card.locked .tag{border-color:var(--rule);color:var(--faint)} .card.locked .state svg{flex:none} .card .state .req{color:var(--muted)} .tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border:1px solid var(--rule-strong); border-radius:var(--radius);font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* empty state */ .empty{margin-top:26px;padding:46px 20px;border:1px dashed var(--rule-strong);border-radius:var(--radius);text-align:center} .empty h2{font:600 22px/1.1 var(--display);letter-spacing:.02em;color:var(--muted)} .empty p{margin-top:8px;color:var(--faint);font-size:12.5px} .empty code{font-family:var(--mono);color:var(--muted)} /* ---------- the signature: pager card ---------- */ .pager{background:var(--slab);border:1px solid var(--rule-strong);border-top:2px solid var(--accent); border-radius:var(--radius);padding:12px 14px 11px;display:flex;flex-direction:column;gap:7px} .pager .row{display:flex;align-items:center;gap:10px} .pager .fired{margin-left:auto;display:flex;align-items:center;gap:7px;font:500 11.5px var(--mono);color:var(--muted)} .pager .fired .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite} .pager .name{font:500 17px/1.2 var(--mono);color:var(--ink)} .pager .summary{font-size:12.5px;color:var(--body)} .pager .foot{display:flex;align-items:baseline;gap:14px;margin-top:2px} .pager .foot .expr{font:400 11px var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pager .foot .dash{flex:none;margin-left:auto;font:400 11px var(--mono);color:var(--muted);white-space:nowrap} .pager .foot a{margin-left:auto;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--accent); border-bottom:1px solid transparent} .pager .foot a:hover{border-bottom-color:var(--accent)} .badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--radius); font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase} .badge.critical{background:var(--alert);color:#fff} /* the one-meaning red */ /* ---------- challenge dialog (CTFd-style modal) ---------- */ .dialog-backdrop{position:absolute;inset:0;background:rgba(6,8,11,.74);display:flex;align-items:flex-start; justify-content:center;padding-top:64px} .dialog{width:680px;background:var(--raised);border:1px solid var(--rule-strong);border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column} .dialog .d-head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 0} .dialog .kicker{display:flex;align-items:center;gap:12px;font:500 11.5px var(--mono);color:var(--muted)} .dialog .kicker .sep{color:var(--faint)} .dialog .x{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;color:var(--muted); border:1px solid transparent;border-radius:var(--radius)} .dialog .x:hover{color:var(--ink);border-color:var(--rule-strong)} .dialog h2{font:600 30px/1.05 var(--display);letter-spacing:.005em;padding:8px 22px 0;text-wrap:balance} .dialog .d-body{display:flex;flex-direction:column;gap:16px;padding:14px 22px 18px} .dialog .desc{font-size:13.5px;line-height:1.55;color:var(--body);text-wrap:pretty} .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .fact{padding:10px 14px 11px 0;display:flex;flex-direction:column;gap:3px} .fact + .fact{padding-left:14px;border-left:1px solid var(--rule)} .fact .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .fact .v{font-size:12.5px;color:var(--body)} .fact .v b{font-weight:500;color:var(--ink)} .dialog .d-foot{display:flex;align-items:center;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--rule)} .dialog .d-foot .note{font-size:11.5px;color:var(--faint);max-width:330px;line-height:1.4} .dialog .d-foot .btn:first-of-type{margin-left:auto} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 16px; border:1px solid var(--rule-strong);border-radius:var(--radius);font:500 13px var(--sans);color:var(--ink);white-space:nowrap} .btn:hover{background:var(--raised-2)} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600} .btn.primary:hover{background:#FFC24B;border-color:#FFC24B} .btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed} .btn[disabled]:hover,.btn.disabled:hover{background:transparent} .btn.primary[disabled]:hover{background:var(--accent)} /* session block inside the dialog (active challenge) */ .session-kv{display:grid;grid-template-columns:110px 1fr;row-gap:8px;column-gap:14px;align-items:center} .session-kv dt{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .session-kv dd{display:flex;align-items:center;gap:8px;font:400 12.5px var(--mono);color:var(--ink);min-width:0} .session-kv dd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .session-kv dd .t{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums} .copy{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--muted); border:1px solid var(--rule);border-radius:var(--radius)} .copy:hover{color:var(--ink);border-color:var(--rule-strong)} /* stage strip: the fixed trio pending / active / passed */ .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .stage-seg{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--rule); border-radius:var(--radius);font-size:12px;color:var(--faint)} .stage-seg .n{font:500 11px var(--mono);color:var(--faint)} .stage-seg.active{border-color:var(--accent);color:var(--ink)} .stage-seg.active .n{color:var(--accent)} .stage-seg.passed{color:var(--body)} .stage-seg.passed .n{color:var(--pass)} .stage-seg .r{margin-left:auto;font:400 11px var(--mono);color:var(--muted)} /* ============================================================ Session page (mock 02) — added 2026-09-09 ============================================================ */ .session-head{display:flex;align-items:flex-end;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--rule)} .session-head .kicker{display:flex;gap:12px;align-items:center;font:500 11.5px var(--mono);color:var(--muted);margin-bottom:7px} .session-head .kicker .sep{color:var(--faint)} .session-head h1{font:600 30px/1 var(--display);letter-spacing:.005em} .session-head .acts{margin-left:auto;display:flex;align-items:center;gap:10px} .session-head .deadline{font:400 11.5px var(--mono);color:var(--muted);margin-right:6px} .cols{display:grid;grid-template-columns:400px minmax(0,1fr);gap:20px;margin-top:20px;align-items:start} .side{display:flex;flex-direction:column;gap:14px} .box{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--raised)} .box .session-kv{grid-template-columns:84px 1fr} .hint{font-size:11.5px;color:var(--faint);line-height:1.45} /* the three stage panels: the fixed trio pending / active / passed, same meaning as .stage-seg */ .panels{display:flex;flex-direction:column;gap:10px} .panel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--raised)} .panel.pending{background:transparent} .panel.active{border-color:var(--accent)} .panel-head{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px} .panel-head .n{font:500 11px var(--mono);color:var(--faint)} .panel-head h2{font:600 15px var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .panel-head .status{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint)} .panel.active .panel-head .n,.panel.active .panel-head .status{color:var(--accent)} .panel.active .panel-head h2{color:var(--ink)} .panel.passed .panel-head .n,.panel.passed .panel-head .status{color:var(--pass)} .panel.passed .panel-head h2{color:var(--body)} .panel-body{padding:0 14px 14px;border-top:1px solid var(--rule)} .panel.pending .panel-body{padding:10px 14px 11px;font-size:12px;color:var(--faint)} .panel.passed .panel-body{padding:10px 14px 11px} .outcome{display:flex;align-items:baseline;gap:12px;font-size:12.5px;color:var(--body)} .outcome .mono{color:var(--ink)} .outcome .when{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint)} /* diagnose form */ .form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding-top:12px} .field{display:flex;flex-direction:column;gap:5px;min-width:0} .field.wide{grid-column:1/-1} .field label{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .select,.textarea{background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius);color:var(--ink); font:400 13px var(--sans);padding:0 10px;height:34px;display:flex;align-items:center;gap:8px} .select .d{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .select svg{margin-left:auto;flex:none;color:var(--muted)} .textarea{height:auto;min-height:84px;padding:8px 10px;align-items:flex-start;line-height:1.5;color:var(--body);font-size:12.5px} .form .foot{grid-column:1/-1;display:flex;align-items:center;gap:14px} .form .foot .note{font-size:11.5px;color:var(--faint)} .form .foot .btn{margin-left:auto} .rejected{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);display:flex;flex-direction:column;gap:6px} .rejected .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .rejected .row{display:flex;gap:12px;align-items:baseline;font-size:12.5px} .rejected .row s{font-family:var(--mono);font-size:12px;color:var(--muted)} .rejected .row .msg{color:var(--body)} .rejected .row .when{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint)} /* fix: push result */ .result{display:flex;flex-direction:column;gap:10px;padding-top:12px} .result .head{display:flex;align-items:baseline;gap:12px} .result .head .hash{font:500 13px var(--mono);color:var(--ink)} .result .head .verdict{font-weight:500;color:var(--ink)} .result .head .when{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint)} .log{background:var(--slab);border:1px solid var(--rule);border-radius:var(--radius);padding:10px 12px; font:400 11.5px/1.55 var(--mono);color:var(--muted);overflow:hidden;white-space:pre} .log .fail{color:var(--ink)} .log .ok{color:var(--pass)} .history{display:flex;gap:16px;font:400 11.5px var(--mono);color:var(--faint)} .history b{font-weight:500;color:var(--muted)} /* replay */ .replay{display:flex;flex-direction:column;gap:12px;padding-top:12px} .replay .head{display:flex;align-items:baseline;gap:10px} .replay .head .t{font:500 24px var(--mono);font-variant-numeric:tabular-nums;color:var(--accent)} .replay .head .of{font:400 13px var(--mono);color:var(--muted)} .replay .head .live{margin-left:auto;font-size:12.5px;color:var(--body)} .progress{height:6px;background:var(--rule);border-radius:1px;overflow:hidden} .progress i{display:block;height:100%;background:var(--accent)} .report{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border:1px solid var(--rule);border-radius:var(--radius);font-size:12.5px;color:var(--muted)} .report .n{font:500 11px var(--mono);color:var(--faint)} .report .fired{color:var(--alert);font-weight:500} /* the one-meaning red: a fired alert in a replay report */ .report .quiet{color:var(--pass);font-weight:500} .report .when{margin-left:auto;font:400 11.5px var(--mono);color:var(--faint)} /* ============================================================ Result page (mock 03) — added 2026-09-09 ============================================================ */ .verdict{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:28px;align-items:center;margin-top:20px; padding:16px 20px;background:var(--slab);border:1px solid var(--rule-strong);border-top:2px solid var(--pass);border-radius:var(--radius)} .verdict .word{font:600 30px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--pass)} .verdict .word small{display:block;margin-top:6px;font:400 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)} .verdict .big{display:flex;flex-direction:column;gap:2px;padding:0 28px;border-left:1px solid var(--rule-strong);border-right:1px solid var(--rule-strong)} .verdict .big .t{font:500 34px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)} .verdict .big .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .verdict .big .par{font:400 12px var(--mono);color:var(--muted)} .verdict .stats{display:grid;grid-template-columns:repeat(3,auto);gap:22px} .stat{display:flex;flex-direction:column;gap:3px} .stat .v{font:500 20px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)} .stat .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .sec-head{display:flex;align-items:center;gap:14px;margin-bottom:10px} .sec-head .n{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .sec-head hr{flex:1;border:0;border-top:1px solid var(--rule)} .sec-head .note{font:400 11.5px var(--mono);color:var(--faint);white-space:nowrap} .sec + .sec{margin-top:18px} .explanation{font-size:12.5px;line-height:1.55;color:var(--body);margin-top:8px} .reports{display:flex;flex-direction:column;gap:6px} .diff{white-space:pre;line-height:1.45;tab-size:4;color:var(--muted)} .diff .more{color:var(--faint)} .diff .file{color:var(--ink)} .diff .hunk{color:var(--accent)} .diff .add{color:var(--pass)} .diff .del{color:var(--faint)} .diff-foot{display:flex;gap:16px;margin-top:8px;font:400 11.5px var(--mono);color:var(--faint)} .diff-foot b{font-weight:500;color:var(--muted)} /* a report row in the narrow column: verdict line + detail line */ .report.stack{flex-wrap:wrap;row-gap:4px} .report.stack .n,.report.stack .fired,.report.stack .quiet{white-space:nowrap} .report.stack .detail{flex:1 0 100%;font:400 11.5px var(--mono);color:var(--muted)} /* 2026-09-11 — added with T-18 (Result page): the mockup papered over these with inline styles, which Templ views may not use. Siblings of .diff-foot and .verdict. */ .diff-foot a{margin-left:auto;color:var(--accent)} .verdict.muted{border-top-color:var(--rule-strong)} .verdict.muted .word{color:var(--muted)} /* ============================================================ hub additions — appended by internal/web/gencss.go. Everything above is design/oncall.css VERBATIM. Edit the skin there and re-run cd hub/app && go generate ./internal/web. ============================================================ */ /* structure the mockups take from design/frame.css (not served) */ *{box-sizing:border-box;margin:0;padding:0} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* real form controls: the mockups drew the Diagnose selects and textarea as divs, so design/oncall.css styles .select and .textarea and knows nothing about