Spaces:
Sleeping
Sleeping
| /* Design tokens and component classes transcribed from | |
| T2AV_guideline_final_updated.html, reused across the Guideline, Training, | |
| and Evaluation pages so the whole app reads as one consistent system. */ | |
| :root { | |
| --paper: #f4f4f1; | |
| --surface: #ffffff; | |
| --ink: #16202c; | |
| --muted: #5b6672; | |
| --accent: #35507a; | |
| --pass: #1f7a4d; | |
| --fail: #c4362e; | |
| --line: #e4e4de; | |
| --pass-bg: #e7f2ec; | |
| --fail-bg: #fbe9e7; | |
| --chip: #16202c; | |
| --display: "Space Grotesk", sans-serif; | |
| --body: "Inter", sans-serif; | |
| --mono: "IBM Plex Mono", monospace; | |
| } | |
| .t2av-shell { | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: var(--body); | |
| min-height: 100vh; | |
| } | |
| .t2av-shell * { | |
| box-sizing: border-box; | |
| } | |
| .t2av-shell h1, | |
| .t2av-shell h2, | |
| .t2av-shell h3 { | |
| font-family: var(--display); | |
| } | |
| /* ---- guideline page layout ---- */ | |
| .g-wrap { | |
| display: grid; | |
| grid-template-columns: 248px minmax(0, 1fr); | |
| gap: 0; | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| } | |
| .g-aside { | |
| position: sticky; | |
| top: 0; | |
| align-self: start; | |
| height: 100vh; | |
| padding: 38px 24px 38px 32px; | |
| border-right: 1px solid var(--line); | |
| overflow-y: auto; | |
| } | |
| .g-brand { | |
| font-family: var(--display); | |
| font-weight: 700; | |
| font-size: 19px; | |
| letter-spacing: -0.02em; | |
| line-height: 1.25; | |
| margin-bottom: 4px; | |
| } | |
| .g-brand span { | |
| color: var(--accent); | |
| } | |
| .g-sub { | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| margin-bottom: 26px; | |
| } | |
| .g-aside nav a { | |
| display: block; | |
| font-size: 13.5px; | |
| color: var(--muted); | |
| text-decoration: none; | |
| padding: 5px 0 5px 12px; | |
| border-left: 2px solid transparent; | |
| transition: color 0.15s, border-color 0.15s; | |
| } | |
| .g-aside nav a .n { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| color: #aeb3b8; | |
| margin-right: 8px; | |
| } | |
| .g-aside nav a:hover { | |
| color: var(--ink); | |
| } | |
| .g-aside nav a.active { | |
| color: var(--ink); | |
| border-left-color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .g-aside nav a.active .n { | |
| color: var(--accent); | |
| } | |
| .g-main { | |
| padding: 56px 56px 120px; | |
| } | |
| .g-top { | |
| margin-bottom: 52px; | |
| } | |
| .eyebrow-g { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 14px; | |
| } | |
| .g-main h1 { | |
| font-weight: 700; | |
| font-size: 44px; | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| margin: 0 0 16px; | |
| } | |
| .g-lede { | |
| font-size: 17px; | |
| color: var(--muted); | |
| max-width: 60ch; | |
| margin: 0; | |
| } | |
| .g-meta { | |
| margin-top: 22px; | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .tag-chip { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| padding: 5px 11px; | |
| border: 1px solid var(--line); | |
| border-radius: 100px; | |
| color: var(--ink); | |
| background: var(--surface); | |
| } | |
| .g-section { | |
| scroll-margin-top: 24px; | |
| padding: 34px 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| .g-section:first-of-type { | |
| border-top: none; | |
| padding-top: 8px; | |
| } | |
| .g-section h2 { | |
| font-weight: 600; | |
| font-size: 26px; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 6px; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 14px; | |
| } | |
| .g-section h2 .num { | |
| font-family: var(--mono); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| flex: none; | |
| } | |
| .g-section h3 { | |
| font-weight: 600; | |
| font-size: 17px; | |
| margin: 26px 0 8px; | |
| } | |
| .g-section h4 { | |
| font-family: var(--display); | |
| font-weight: 600; | |
| font-size: 14.5px; | |
| margin: 20px 0 6px; | |
| } | |
| .g-section p { | |
| margin: 0 0 14px; | |
| } | |
| .muted { | |
| color: var(--muted); | |
| } | |
| .g-section ul { | |
| margin: 0 0 14px; | |
| padding-left: 22px; | |
| } | |
| .g-section li { | |
| margin-bottom: 6px; | |
| } | |
| .axis { | |
| font-family: var(--mono); | |
| font-weight: 600; | |
| display: inline-block; | |
| font-size: 12px; | |
| background: var(--chip); | |
| color: #fff; | |
| padding: 2px 8px; | |
| border-radius: 5px; | |
| letter-spacing: 0.02em; | |
| } | |
| .flow { | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| display: inline-block; | |
| margin: 2px 0 16px; | |
| } | |
| .flow b { | |
| color: var(--accent); | |
| } | |
| .pass, | |
| .fail { | |
| font-family: var(--mono); | |
| font-weight: 600; | |
| font-size: 12.5px; | |
| padding: 1px 7px; | |
| border-radius: 5px; | |
| white-space: nowrap; | |
| } | |
| .pass { | |
| color: var(--pass); | |
| background: var(--pass-bg); | |
| } | |
| .fail { | |
| color: var(--fail); | |
| background: var(--fail-bg); | |
| } | |
| .g-section table, | |
| .rtable { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 8px 0 18px; | |
| font-size: 14.5px; | |
| } | |
| .g-section th, | |
| .g-section td, | |
| .rtable th, | |
| .rtable td { | |
| text-align: left; | |
| padding: 11px 14px; | |
| border-bottom: 1px solid var(--line); | |
| vertical-align: top; | |
| } | |
| .g-section thead th, | |
| .rtable thead th { | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| border-bottom: 1.5px solid var(--ink); | |
| } | |
| .g-section tbody tr:last-child td, | |
| .rtable tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .callout { | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 8px; | |
| padding: 14px 18px; | |
| margin: 16px 0; | |
| font-size: 14.5px; | |
| } | |
| .callout .k { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| /* ---- worked example (also used on the Training page) ---- */ | |
| .example { | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 26px; | |
| margin-top: 12px; | |
| } | |
| .example .prompt { | |
| font-size: 14.5px; | |
| background: var(--paper); | |
| border-radius: 8px; | |
| padding: 15px 18px; | |
| margin-bottom: 20px; | |
| line-height: 1.6; | |
| } | |
| .example .prompt .lab { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| display: block; | |
| margin-bottom: 6px; | |
| } | |
| .example .tldr { | |
| font-style: italic; | |
| color: var(--muted); | |
| margin: 14px 0 18px; | |
| } | |
| .events-grid { | |
| display: grid; | |
| gap: 9px; | |
| margin: 0 0 10px; | |
| } | |
| .ev { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 14px; | |
| align-items: start; | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| padding: 12px 16px; | |
| } | |
| .ev .enum { | |
| font-family: var(--mono); | |
| font-weight: 600; | |
| font-size: 11.5px; | |
| color: #fff; | |
| background: var(--accent); | |
| border-radius: 6px; | |
| padding: 3px 9px; | |
| white-space: nowrap; | |
| margin-top: 2px; | |
| } | |
| .ev .etype { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| } | |
| .ev .edesc { | |
| font-size: 14.5px; | |
| margin: 1px 0 2px; | |
| } | |
| .ev .eaxes { | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .ev .eaxes b { | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| } | |
| .example .note { | |
| font-size: 13px; | |
| color: var(--muted); | |
| margin: 14px 0 4px; | |
| } | |
| .exgrid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 26px; | |
| align-items: start; | |
| } | |
| .rtable .why { | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .g-footer { | |
| margin-top: 60px; | |
| padding-top: 22px; | |
| border-top: 1px solid var(--line); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| /* ---- interactive PASS/FAIL toggle buttons (Training + Evaluation pages) ---- */ | |
| .verdict-toggle { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .verdict-btn { | |
| font-family: var(--mono); | |
| font-weight: 600; | |
| font-size: 12.5px; | |
| padding: 6px 14px; | |
| border-radius: 6px; | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| color: var(--muted); | |
| cursor: pointer; | |
| } | |
| .verdict-btn.pass-option.selected { | |
| color: var(--pass); | |
| background: var(--pass-bg); | |
| border-color: var(--pass); | |
| } | |
| .verdict-btn.fail-option.selected { | |
| color: var(--fail); | |
| background: var(--fail-bg); | |
| border-color: var(--fail); | |
| } | |
| .verdict-btn.correct { | |
| outline: 2px solid var(--pass); | |
| } | |
| .verdict-btn.incorrect { | |
| outline: 2px solid var(--fail); | |
| } | |
| .grade-mark { | |
| font-family: var(--mono); | |
| font-weight: 700; | |
| font-size: 13px; | |
| margin-left: 8px; | |
| } | |
| .grade-mark.ok { | |
| color: var(--pass); | |
| } | |
| .grade-mark.bad { | |
| color: var(--fail); | |
| } | |
| .explanation-box { | |
| background: var(--fail-bg); | |
| border: 1px solid var(--fail); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| margin-top: 8px; | |
| font-size: 13.5px; | |
| color: var(--ink); | |
| } | |
| /* ---- guideline overlay (opened from the Evaluation page) ---- */ | |
| .guideline-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| overflow-y: auto; | |
| } | |
| .guideline-overlay-close { | |
| position: fixed; | |
| top: 18px; | |
| right: 28px; | |
| z-index: 1001; | |
| width: 40px; | |
| height: 40px; | |
| padding: 0; | |
| border-radius: 50%; | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| color: var(--ink); | |
| font-size: 22px; | |
| line-height: 1; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 2px 10px rgba(22, 32, 44, 0.18); | |
| } | |
| .guideline-overlay-close:hover { | |
| background: var(--paper); | |
| } | |
| @media (max-width: 900px) { | |
| .g-wrap { | |
| grid-template-columns: 1fr; | |
| } | |
| .g-aside { | |
| position: static; | |
| height: auto; | |
| border-right: none; | |
| border-bottom: 1px solid var(--line); | |
| padding: 26px 24px; | |
| } | |
| .g-aside nav { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2px 18px; | |
| } | |
| .g-aside nav a { | |
| border-left: none; | |
| padding: 4px 0; | |
| } | |
| .g-aside nav a.active { | |
| border-left: none; | |
| } | |
| .g-main { | |
| padding: 36px 24px 80px; | |
| } | |
| .g-main h1 { | |
| font-size: 34px; | |
| } | |
| .exgrid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |