/* Generated by scripts/build_site.cjs from css/fonts.css, css/styles.css, css/joy.css, css/landing.css - do not edit. */ /* ---- css/fonts.css ---- */ /* Self-hosted web fonts (SIL Open Font License 1.1; licenses in css/fonts/*-OFL.txt). * Served from this origin so no visitor IP address or page URL is sent to a font CDN * (docs/PRIVACY.md §4: the SPA makes no third-party requests by default). */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/css/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/css/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("/css/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url("/css/fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("/css/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url("/css/fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url("/css/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url("/css/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---- css/styles.css ---- */ :root { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f2f5; --border: #dfe3e8; --text: #1b2330; --muted: #5d6878; --accent: #2459d6; --accent-soft: #e5edff; /* WCAG AA (4.5:1): darkened from the original brand #1f8a4c/#b7791f/#c43d3d so text set in these colors on their -soft backgrounds (badges, tier labels, pills) stays readable. */ --ok: #196e3d; --ok-soft: #e1f4e8; --warn: #8f5e18; --warn-soft: #fcf1dc; --danger: #b03737; --danger-soft: #fbe5e5; --shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 16px rgba(20, 30, 50, .06); --radius: 10px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --s-planned: #6b7a90; --s-studying: #2459d6; --s-scheduled: #b7791f; --s-passed: #1f8a4c; --s-onhold: #9aa3b0; --s-interested: #7d4fc4; /* Solid-fill variants for white text on a colored background (status pills, filled badges). The plain --ok/--warn/--danger/--accent tokens above are tuned for text-on-tint contrast; a further 40% black mix keeps white text at ≥4.5:1 on top of them in both themes. */ --ok-solid: color-mix(in srgb, var(--ok) 60%, #000); --warn-solid: color-mix(in srgb, var(--warn) 60%, #000); --danger-solid: color-mix(in srgb, var(--danger) 60%, #000); --accent-solid: color-mix(in srgb, var(--accent) 60%, #000); --planned-solid: color-mix(in srgb, var(--s-planned) 60%, #000); --onhold-solid: color-mix(in srgb, var(--s-onhold) 60%, #000); --interested-solid: color-mix(in srgb, var(--s-interested) 60%, #000); } :root[data-theme="dark"] { --bg: #0f1319; --surface: #171c24; --surface-2: #1f2530; --border: #2c3441; --text: #e5e9ef; --muted: #97a2b3; --accent: #6d98ff; --accent-soft: #1d2a47; --ok: #4cc27f; --ok-soft: #173024; --warn: #e3a948; --warn-soft: #362a14; --danger: #ef6b6b; --danger-soft: #3a1c1c; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25); --s-planned: #8d9bb0; --s-studying: #6d98ff; --s-scheduled: #e3a948; --s-passed: #4cc27f; --s-onhold: #667080; --s-interested: #a78bfa; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Links inline in a sentence must not rely on color alone (WCAG 1.4.1): underline them. Nav, buttons, cards and chips style their own links and are unaffected (different selectors). */ .hint a, p a, dd a, li a, td a, a[target="_blank"] { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; } h2 { font-size: 20px; } h3 { font-size: 15px; } button, input, select, textarea { font: inherit; color: inherit; } /* ---------- layout ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; white-space: nowrap; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, #cf3a3a, #d9761a 35%, #2e9d57 65%, #2459d6); color: #fff; font-size: 14px; } .topbar-actions { display: flex; gap: 6px; } main { max-width: 1480px; margin: 0 auto; padding: 22px 20px 60px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-head p { margin: 4px 0 0; color: var(--muted); max-width: 760px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; } .card + .card { margin-top: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .card-head .sub { color: var(--muted); font-size: 12px; } .grid { display: grid; gap: 16px; } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } @media (max-width: 960px) { .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); } } /* minmax(0,…): wide tables must scroll inside their card, not widen the page */ .muted { color: var(--muted); } .small { font-size: 12px; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .spacer { flex: 1; } .empty { padding: 28px; text-align: center; color: var(--muted); } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 500; white-space: nowrap; } .btn:hover { background: var(--surface-2); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { filter: brightness(1.08); } .btn.danger { color: var(--danger); } .btn.sm { padding: 4px 9px; font-size: 12px; } .btn.icon { padding: 6px 9px; } .btn[disabled] { opacity: .45; cursor: default; } input[type=text], input[type=number], input[type=date], input[type=search], input[type=url], input[type=email], input[type=password], input[type=tel], select, textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; min-width: 0; } textarea { width: 100%; min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; } label.field > input, label.field > select { color: var(--text); font-size: 14px; } .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .toolbar input[type=search] { width: 260px; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .seg button { border: 0; background: var(--surface); padding: 6px 12px; cursor: pointer; } .seg button + button { border-inline-start: 1px solid var(--border); } .seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* ---------- badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .badge.tier-beginner { background: var(--ok-soft); color: var(--ok); } .badge.tier-intermediate { background: var(--warn-soft); color: var(--warn); } .badge.tier-expert { background: var(--danger-soft); color: var(--danger); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .status-pill { color: #fff; } .st-planned { background: var(--planned-solid); } .st-studying { background: var(--accent-solid); } .st-scheduled { background: var(--warn-solid); } .st-passed { background: var(--ok-solid); } .st-onhold { background: var(--onhold-solid); } /* ---------- KPI ---------- */ .kpi { padding: 14px 16px; } .kpi .label { color: var(--muted); font-size: 12px; font-weight: 500; } .kpi .value { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; } .kpi .hint { color: var(--muted); font-size: 12px; } .bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* ---------- roadmap chart ---------- */ .legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 5px; } .chart-wrap { overflow-x: auto; } .chart { display: grid; grid-template-columns: 34px repeat(8, minmax(150px, 1fr)); gap: 6px; min-width: 1320px; } .chart .dhead { padding: 10px 8px; border-radius: 8px 8px 0 0; color: #fff; font-weight: 600; font-size: 12px; line-height: 1.25; min-height: 52px; display: flex; align-items: flex-end; cursor: help; /* --dh is the domain's brand hue (js/app.js); mixed with black so white text stays ≥4.5:1 regardless of how light the source hue is. */ background: color-mix(in srgb, var(--dh, #2459d6) 60%, #000); } .chart .tier-label { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-radius: 8px; } .chart .tier-label.expert { background: var(--danger-soft); color: var(--danger); } .chart .tier-label.intermediate { background: var(--warn-soft); color: var(--warn); } .chart .tier-label.beginner { background: var(--ok-soft); color: var(--ok); } .chart .cell { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 40px; } .subgroup-title { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-top: 2px; } .chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { --c: #888; position: relative; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--text); padding: 2px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.5; white-space: nowrap; } .chip:hover { background: color-mix(in srgb, var(--c) 26%, var(--surface)); } .chip.dim { opacity: .18; } .chip.tracked { box-shadow: inset 0 -3px 0 var(--sc, var(--s-planned)); } .chip.passed { background: color-mix(in srgb, var(--c) 60%, #000); color: #fff; border-color: var(--c); } .chip.passed::after { content: "✓"; margin-inline-start: 4px; } .chip .span-mark { font-weight: 400; opacity: .6; margin-inline-start: 3px; } /* ---------- table ---------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; position: sticky; top: 0; background: var(--surface); cursor: pointer; user-select: none; } table.data tr:hover td { background: var(--surface-2); } table.data td.num, table.data th.num { text-align: end; font-variant-numeric: tabular-nums; } .clickable { cursor: pointer; } /* ---------- career paths ---------- */ .paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .path-card { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--c); } .path-card .title { display: flex; gap: 10px; align-items: center; } .path-card .title .ico { font-size: 22px; } .phase { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: start; } .phase .pname { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 3px; } .path-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); } .path-progress .bar { flex: 1; } /* ---------- blueprint ---------- */ .plan-list { display: flex; flex-direction: column; gap: 6px; } .plan-item { display: grid; grid-template-columns: 26px 24px minmax(180px, 2fr) 110px 110px 120px 90px auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .plan-item.dragging { opacity: .4; } .plan-item.drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .plan-item .handle { cursor: grab; color: var(--muted); text-align: center; user-select: none; } .plan-item .idx { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .plan-item .name b { cursor: pointer; } .plan-item .name div { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .plan-item { grid-template-columns: 22px minmax(160px, 1fr) auto; } .plan-item .idx, .plan-item .hide-sm { display: none; } } .gantt { position: relative; overflow-x: auto; } .gantt-inner { min-width: 900px; } .gantt-scale { display: flex; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); margin-inline-start: 170px; } .gantt-scale div { flex: 1; padding: 4px 6px; border-inline-start: 1px solid var(--border); white-space: nowrap; overflow: hidden; } .gantt-row { display: flex; align-items: center; height: 30px; border-bottom: 1px dashed var(--border); } .gantt-row .lbl { width: 170px; flex: none; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 8px; cursor: pointer; } .gantt-row .track { position: relative; flex: 1; height: 100%; } .gantt-bar { position: absolute; top: 6px; height: 18px; border-radius: 5px; font-size: 10.5px; color: #fff; padding: 0 6px; line-height: 18px; overflow: hidden; white-space: nowrap; cursor: pointer; } .gantt-bar.late { outline: 2px solid var(--danger); } .gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .6; pointer-events: none; } /* ---------- tracker board ---------- */ .board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; } .col { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; } .col.drop-target { outline: 2px dashed var(--accent); } .col-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 2px 2px 4px; } .col-head .count { margin-inline-start: auto; color: var(--muted); font-weight: 500; } .tcard { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; border-inline-start: 4px solid var(--c); box-shadow: var(--shadow); } .tcard:hover { border-color: var(--accent); border-inline-start-color: var(--c); } .tcard .t { display: flex; justify-content: space-between; gap: 6px; font-weight: 700; } .tcard .n { font-size: 12px; color: var(--muted); margin: 2px 0 8px; } .tcard .meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; } /* ---------- coverage matrix ---------- */ .coverage { display: grid; grid-template-columns: minmax(160px, 1.6fr) repeat(3, 1fr); gap: 4px; font-size: 12px; } .coverage .h { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; padding: 4px 6px; } .coverage .d { display: flex; align-items: center; gap: 6px; padding: 6px; font-weight: 600; } .coverage .c { border-radius: 6px; padding: 6px; text-align: center; background: var(--surface-2); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; } .coverage .c.p1 { background: color-mix(in srgb, var(--s-studying) 18%, var(--surface)); color: var(--s-studying); } .coverage .c.p2 { background: var(--ok-solid); color: #fff; } .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: 0; } /* ---------- drawer ---------- */ .overlay { position: fixed; inset: 0; background: rgba(10, 15, 25, .35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .15s; } .overlay.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(620px, 100vw); z-index: 50; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0, 0, 0, .15); transform: translateX(100%); transition: transform .2s ease, visibility 0s linear .2s; display: flex; flex-direction: column; /* closed (aria-hidden) drawer: out of the tab order and the accessibility tree once it has slid out */ visibility: hidden; } .drawer.open { transform: none; visibility: visible; transition: transform .2s ease; } .drawer-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); border-top: 5px solid var(--c, var(--accent)); } .drawer-body { padding: 16px 20px 40px; overflow-y: auto; flex: 1; } .drawer-body section { margin-bottom: 22px; } .drawer-body section > h4, .drawer-body section > h3 { font-family: var(--font, inherit); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; } .kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .kv dd .badge { white-space: normal; } .check { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .check input[type=text] { flex: 1; border-color: transparent; background: transparent; padding: 3px 6px; } .check input[type=text]:hover, .check input[type=text]:focus { border-color: var(--border); background: var(--surface); } .check.done input[type=text] { text-decoration: line-through; color: var(--muted); } .status-buttons { display: flex; gap: 4px; flex-wrap: wrap; } .status-buttons button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 12px; font-weight: 600; } .status-buttons button.on { color: #fff; border-color: transparent; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-weight: 500; opacity: 0; transition: all .2s; z-index: 60; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%); } .callout { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; } .callout.warn { background: var(--warn-soft); } svg text { fill: var(--muted); font-size: 10px; font-family: var(--font); } /* ---------- print ---------- */ @media print { .topbar, .toolbar, .no-print, .drawer, .overlay, .toast { display: none !important; } body { background: #fff; color: #000; } main { padding: 0; max-width: none; } .card { box-shadow: none; break-inside: avoid; } .plan-item { break-inside: avoid; } } /* ================= v2: navigation, journey, palette, lifecycle ================= */ :root { --g-learn: #7aa2f7; --g-labs: #e0af68; --g-review: #9ece6a; } kbd { font: 11px var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface-2); color: var(--muted); } /* lifecycle journey stepper */ .journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .jstep { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); position: relative; } .jstep:hover { text-decoration: none; border-color: var(--accent); } .jstep b { display: block; font-size: 13px; } .jstep small { color: var(--muted); font-size: 11.5px; } .jnum { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 15px; } .jstep.done .jnum { background: var(--ok-solid); color: #fff; font-weight: 700; } .jstep.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .jstep.current .jnum { background: var(--accent); color: #fff; } @media (max-width: 900px) { .journey { grid-template-columns: 1fr 1fr; } } .tile { display: flex; flex-direction: column; gap: 8px; color: var(--text); } .tile:hover { text-decoration: none; border-color: var(--accent); } .tile p { margin: 0; flex: 1; } .tile-ico { font-size: 28px; } .tile .btn { align-self: flex-start; } /* roadmap domain tabs */ .domain-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; } .dtab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; font-size: 12.5px; font-weight: 500; } .dtab:hover { background: var(--surface-2); } .dtab.on { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); font-weight: 700; } .coverage a.d { color: var(--text); } /* priorities */ .badge.prio-high { background: var(--danger-soft); color: var(--danger); } .badge.prio-medium { background: var(--accent-soft); color: var(--accent); } .badge.prio-low { background: var(--surface-2); color: var(--muted); } .prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); margin-inline-start: 4px; vertical-align: middle; } .prio-dot.prio-high { background: var(--danger); } .prio-dot.prio-medium { background: var(--accent); } .prio-dot.prio-low { background: var(--s-onhold); } .prio-select { padding: 3px 6px; font-size: 12px; font-weight: 600; } .prio-select.prio-high { color: var(--danger); } .prio-select.prio-medium { color: var(--accent); } .plan-item { grid-template-columns: 26px 24px minmax(180px, 2fr) 100px 90px 105px 150px auto; } /* schedule mode cards */ .card.mode { text-align: start; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px; } .card.mode .value { font-size: 22px; font-weight: 700; } .card.mode.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .card.mode:hover { border-color: var(--accent); } .path-card.target { box-shadow: 0 0 0 3px var(--accent-soft); } /* gantt v2 */ .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-inline-end: 6px; } .gantt-scale .yr { border-inline-start: 2px solid var(--muted); font-weight: 700; color: var(--text); } .gantt-row { cursor: pointer; } .gantt-row:hover { background: var(--surface-2); } .gantt-row .lbl { display: flex; align-items: center; gap: 5px; } .gantt-seg { position: absolute; top: 8px; height: 14px; } .gantt-seg.ph-learn { background: var(--g-learn); border-radius: 4px 0 0 4px; } .gantt-seg.ph-labs { background: var(--g-labs); } .gantt-seg.ph-review { background: var(--g-review); } .gantt-seg.late { box-shadow: 0 -2px 0 var(--danger) inset, 0 2px 0 var(--danger); } .gantt-exam { position: absolute; top: 7px; width: 14px; height: 14px; transform: translateX(-7px) rotate(45deg); border: 2px solid var(--surface); z-index: 2; } .gantt-maint { position: absolute; top: 14px; height: 0; border-top: 3px solid; opacity: .45; } .gantt-done { position: absolute; top: 4px; transform: translateX(-9px); font-size: 15px; z-index: 2; } /* tracker */ .board { grid-template-columns: repeat(6, minmax(200px, 1fr)); } .col-hint { font-size: 11px; color: var(--muted); margin: -6px 2px 2px; } /* vertical journey timeline (drawer) */ .vtl { list-style: none; margin: 0; padding-block: 0; padding-inline: 18px 0; border-inline-start: 2px solid var(--border); } .vtl li { position: relative; padding-block: 4px 10px; padding-inline: 10px 0; font-size: 13px; } .vtl li::before { content: ""; position: absolute; inset-inline-start: -25px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); } .vtl li.past::before { background: var(--ok); border-color: var(--ok); } .vtl li.k-exam::before { border-color: var(--s-scheduled); border-radius: 2px; transform: rotate(45deg); } .vtl li.k-renew::before { border-color: var(--danger); } .vtl li.k-fee::before, .vtl li.k-cpe::before { border-color: var(--warn); } .vtl .vdate { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* command palette */ .palette { position: fixed; inset: 0; z-index: 70; background: rgba(10, 15, 25, .35); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; } .palette.open { display: flex; } .pbox { width: min(640px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; } .pbox input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 16px; font-size: 16px; outline: none; } .plist { max-height: 50vh; overflow-y: auto; padding: 6px; } .pitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .pitem.on, .pitem:hover { background: var(--accent-soft); } .pico { width: 18px; text-align: center; } .plabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .psub { color: var(--muted); font-size: 12px; white-space: nowrap; } .pfoot { padding: 8px 14px; border-top: 1px solid var(--border); } @media (max-width: 640px) { main { padding: 16px 16px 60px; } .topbar { padding: 8px 12px; gap: 8px; } .brand span:last-child { display: none; } .toolbar input[type=search] { width: 100%; } } /* retired / new certifications, fee breakdown */ /* Full opacity so the text keeps its normal contrast; grayscale still reads as "muted"/retired. */ .chip.retired { color: var(--muted); border-color: var(--border); text-decoration: line-through; filter: grayscale(.8); } .chip.is-new::before { content: "NEW"; font-size: 8.5px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 3px; padding: 0 3px; margin-inline-end: 4px; vertical-align: 1px; } .badge.retired-badge { background: var(--danger-soft); color: var(--danger); } .badge.new-badge { background: var(--accent-solid); color: #fff; } .fee-table td { padding: 6px 8px; } .cost-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .cost-sum > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; } .cost-sum b { font-size: 17px; font-variant-numeric: tabular-nums; } .credly-embed { width: 150px; height: 270px; border: 0; margin-top: 10px; } .badge-img { width: 120px; height: 120px; object-fit: contain; margin-top: 10px; } /* ================= v3: visual polish & engagement ================= */ :root { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 14px; --brand-grad: linear-gradient(135deg, #2459d6 0%, #7d4fc4 45%, #cf3a3a 100%); } body { background: radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, #7d4fc4 8%, transparent), transparent 70%), var(--bg); background-attachment: fixed; } /* frosted top bar: the blur lives on a pseudo-element, because backdrop-filter on .topbar itself would make it the containing block of the fixed sidebar (#nav) inside it (css/nav.css) */ .topbar { background: transparent; } .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); } .brand-mark { background: var(--brand-grad); box-shadow: 0 4px 12px color-mix(in srgb, #2459d6 35%, transparent); } .brand span:last-child { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .search-btn { color: var(--muted); } h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } h3 { font-weight: 700; letter-spacing: -.01em; } .card { transition: box-shadow .2s, transform .2s, border-color .2s; } a.card:hover, .card.tile:hover, .path-card:hover, .card.mode:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20, 30, 50, .12); } .btn { border-radius: 10px; transition: transform .08s, background .15s, box-shadow .15s; } .btn:active { transform: scale(.97); } .btn.primary { background: var(--brand-grad); border: 0; box-shadow: 0 4px 12px color-mix(in srgb, #2459d6 30%, transparent); } .kpi .value { letter-spacing: -.02em; } .fade-in { animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } .card, .btn, .toast { transition: none; } } /* hero */ .hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 22px 24px; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #2459d6 14%, var(--surface)), color-mix(in srgb, #7d4fc4 12%, var(--surface)) 55%, color-mix(in srgb, #cf3a3a 8%, var(--surface))); border: 1px solid var(--border); box-shadow: var(--shadow); } .hero::after { content: "🛡️"; position: absolute; inset-inline-end: -20px; bottom: -40px; font-size: 180px; opacity: .06; pointer-events: none; } .hero-hi { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .hero-msg { font-size: 15px; margin-top: 4px; } .level { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 10px; align-items: center; margin-top: 14px; max-width: 520px; } .level .lv { background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 10px; } .level .bar { height: 10px; } .level .bar span { background: var(--brand-grad); } .level .small { grid-column: 1 / -1; } .tip { margin-top: 12px; font-size: 13px; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 10px; padding: 8px 12px; max-width: 640px; } .hero-rings { display: flex; gap: 18px; } .hr { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); } .ring { position: relative; } .ring svg circle { transition: stroke-dashoffset .8s ease; } .ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .ring-in b { font-size: 18px; color: var(--text); } .ring-in small { font-size: 11px; color: var(--muted); } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-rings { justify-content: space-around; } } @media (max-width: 480px) { .hero-rings .ring { transform: scale(.8); } } /* achievements */ .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* Locked (not yet earned): full-opacity text at --muted keeps it readable; only the icon is dimmed/desaturated so the "locked" look doesn't wash out the name/description contrast. */ .ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 12px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); } .ach.on { background: linear-gradient(160deg, color-mix(in srgb, #f5b942 22%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #f5b942 45%, transparent); } .ach-ico { font-size: 26px; filter: grayscale(1); opacity: .55; } .ach.on .ach-ico { filter: none; opacity: 1; } .ach b { font-size: 12.5px; color: var(--muted); } .ach.on b { color: var(--text); } .ach small { font-size: 11px; color: var(--muted); line-height: 1.3; } /* confetti */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; } .confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .9; } } .hide-sm { } @media (max-width: 760px) { .hide-sm { display: none !important; } } /* ================= v4: icons, climb map, momentum ================= */ .ico { flex: none; vertical-align: -3px; } .card-head h3 { display: inline-flex; align-items: center; gap: 8px; } .card-head h3 .ico { color: var(--accent); } a.brand { color: inherit; text-decoration: none; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; } .jnum .ico { width: 17px; height: 17px; } .tile-ico { color: var(--accent); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); } .hero { grid-template-columns: auto 1fr auto; } .hero::after { content: none; } .hero-art { width: 150px; height: auto; } @media (max-width: 1100px) { .hero-art { display: none; } .hero { grid-template-columns: 1fr auto; } } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } } .g-climb { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } @media (max-width: 1100px) { .g-climb { grid-template-columns: minmax(0, 1fr); } } .climb-wrap { overflow-x: auto; } .climb-svg { width: 100%; min-width: 640px; height: auto; display: block; } .trail { fill: none; stroke: var(--border); stroke-width: 5; stroke-dasharray: 2 10; stroke-linecap: round; } .trail-done { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; } .cnode { cursor: pointer; } .cnode:hover circle, .cnode:focus circle { filter: brightness(1.1); } .cnode:focus { outline: none; } .cnode:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 50%; } .cnode .pulse { opacity: .25; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(1.5); opacity: 0; } } .climb-svg text { fill: var(--text); font-family: var(--font); } .climb-svg .clabel { font-size: 13px; font-weight: 700; } .climb-svg .csub { font-size: 10.5px; fill: var(--muted); } @media (prefers-reduced-motion: reduce) { .cnode .pulse { animation: none; } } .momentum { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(160deg, color-mix(in srgb, #f97316 9%, var(--surface)), var(--surface) 60%); } .momentum .card-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 0; } .momentum .card-head h3 .ico { color: #f97316; } .mission { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .mission.done { border-color: var(--ok); background: var(--ok-soft); } .mission-title { font-size: 15px; display: flex; align-items: center; gap: 6px; } .mission-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .momentum-stats { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .momentum-stats > div { display: flex; align-items: center; gap: 6px; } .momentum-stats .ico { color: var(--muted); } .momentum-stats .up { color: var(--ok); font-weight: 600; font-size: 12px; } .momentum-stats .down { color: var(--danger); font-weight: 600; font-size: 12px; } .fresh { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--muted); background: var(--ok-soft); border-radius: 8px; padding: 6px 10px; } .fresh .ico { color: var(--ok); margin-top: 1px; } .fresh.stale { background: var(--warn-soft); } .fresh.stale .ico { color: var(--warn); } /* legal */ .legal section { margin-bottom: 14px; } .legal h3 { font-size: 15px; margin-bottom: 4px; } .legal p { margin: 0; line-height: 1.6; } .legal-banner { position: fixed; inset-inline-start: 16px; inset-inline-end: 16px; bottom: 16px; z-index: 65; max-width: 980px; margin: 0 auto; display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--warn); border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 13px; } .legal-banner .btn { flex: none; } @media (max-width: 640px) { .legal-banner { flex-direction: column; align-items: stretch; } } .site-footer { max-width: 1480px; margin: 0 auto; padding: 18px 20px 90px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); } .legal-dialog { position: fixed; inset: 0; z-index: 200; background: rgba(10,15,25,.5); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 16px; } .legal-dialog-box { background: var(--bg); border-radius: 14px; padding: 20px; max-width: 900px; width: 100%; } /* verticals (industries) */ .vert-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; } .vtab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 8px 14px; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 13px; } .vtab .ico { color: var(--c, var(--accent)); } .vtab:hover { background: var(--surface-2); } .vtab.on { border-color: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 18%, transparent); background: color-mix(in srgb, var(--c, var(--accent)) 8%, var(--surface)); } .vert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .vert-card { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--c); } .vert-card p { margin: 0; } .vert-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); } @media (max-width: 520px) { /* phones: the 160px domain column + 3 tier columns overflowed a 390px screen */ .coverage { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } .coverage .h { font-size: 9.5px; letter-spacing: 0; padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; } .coverage .d { min-width: 0; overflow: hidden; } } .coverage .vhead { font-weight: 800; font-size: 12px; padding: 10px 6px 2px; display: flex; align-items: center; gap: 6px; } /* ================= tables: alignment, density, sticky, pagination ================= */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); } .card > .pager:last-child { border-bottom: 0; border-top: 1px solid var(--border); } .table-scroll { max-height: 70vh; overflow: auto; } table.data { font-variant-numeric: tabular-nums; } table.data thead th { z-index: 2; box-shadow: inset 0 -1px 0 var(--border); white-space: nowrap; } table.data th.num, table.data td.num { text-align: end; white-space: nowrap; } table.data tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); } table.data tbody tr:hover td { background: var(--accent-soft); } table.data td { vertical-align: middle; } table.data td .badge + .badge { margin-inline-start: 4px; } table.data.dense th, table.data.dense td { padding: 4px 8px; font-size: 12.5px; } .rm-table td:nth-child(2) { min-width: 240px; max-width: 420px; } .rm-table td:nth-child(3) { white-space: nowrap; } .rm-table .actions-col, .rm-table td:last-child { width: 1%; white-space: nowrap; text-align: end; } .sticky-col { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); } thead .sticky-col { z-index: 3; } table.data tbody tr:nth-child(even) td.sticky-col { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); } @media (max-width: 760px) { .rm-table td:nth-child(2) { min-width: 180px; } .toolbar > * { flex: 1 1 140px; } .toolbar .seg { flex: 0 0 auto; } } .rm-table td:nth-child(4) > .row { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: flex; } .rm-table td:nth-child(4) { max-width: 280px; } .gantt-inner { position: relative; } .gantt-scale2 { position: relative; height: 24px; margin-inline-start: 170px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); } .gantt-scale2 span { position: absolute; top: 4px; transform: translateX(4px); white-space: nowrap; } .gantt-scale2 span.yr { font-weight: 800; color: var(--text); } .gantt-grid { position: absolute; top: 24px; bottom: 0; inset-inline-start: 170px; inset-inline-end: 0; pointer-events: none; } .gantt-grid i { position: absolute; top: 0; bottom: 0; border-inline-start: 1px dashed var(--border); } .gantt-grid i.yr { border-inline-start: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); } .gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .55; } /* phones: room for the bottom tab bar (#mnav, css/nav.css) */ @media (max-width: 760px) { main { padding-bottom: 90px; } .legal-banner { bottom: 76px; } .toast { bottom: 84px; } } /* spending */ .spend-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .spend-sum > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; } .spend-sum span { font-size: 11.5px; color: var(--muted); } .spend-sum b { font-size: 16px; font-variant-numeric: tabular-nums; } .spend-sum .tot { background: var(--accent-soft); } .spend-sum .tot b { color: var(--accent); } @media (max-width: 520px) { .spend-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .expense-form { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } :root { --sp-prep: #7aa2f7; --sp-exam: #d9761a; --sp-maint: #1f8a4c; } :root[data-theme="dark"] { --sp-prep: #8fb0ff; --sp-exam: #f0a050; --sp-maint: #4cc27f; } .legend-sp i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-block: 0; margin-inline: 10px 4px; vertical-align: -1px; } .spending svg text { fill: var(--muted); font-size: 10px; } .drawer .spend-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .drawer .expense-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* cards laid out by a grid/flex container must not get the stacked-card top margin */ :is(.grid, .paths, .vert-grid, .tiers, .board, .ach-grid, [class*="-grid"], [class*="grid-"]) > .card + .card { margin-top: 0; } /* skills */ :root { --sk-plan: #9db8f5; } :root[data-theme="dark"] { --sk-plan: #3d5a99; } .sk-bars { display: grid; gap: 8px; } .sk-row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr 150px; gap: 12px; align-items: center; } .sk-name { font-size: 13.5px; font-weight: 600; } .sk-track { position: relative; height: 14px; border-radius: 99px; background: var(--surface-2); overflow: visible; } .sk-track span { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; border-radius: 99px; } .sk-plan { background: repeating-linear-gradient(135deg, var(--sk-plan) 0 6px, transparent 6px 10px); border: 1px solid var(--sk-plan); } .sk-held { background: var(--ok); } .sk-need { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--danger); } .sk-lv { color: var(--muted); text-align: end; } @media (max-width: 700px) { .sk-row { grid-template-columns: 1fr; gap: 4px; } .sk-lv { text-align: start; } } .legend-sk i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-block: 0; margin-inline: 10px 4px; vertical-align: -1px; } .legend-sk i.h { background: var(--ok); } .legend-sk i.p { border: 1px solid var(--sk-plan); background: repeating-linear-gradient(135deg, var(--sk-plan) 0 4px, transparent 4px 7px); } .legend-sk i.n { width: 3px; background: var(--danger); } .sk-gaps { display: grid; gap: 12px; } .sk-gap { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; } .sk-rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: var(--surface-2); } .sk-nice { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .sk-nice-cat { padding: 10px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 4px; } .sk-nice-cat .bar { height: 6px; } /* credly import dialog */ .ci-modal { max-width: 860px; width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto; } .ci-table { max-height: 50vh; overflow: auto; } .ci-table select { max-width: 320px; } .ci-link { user-select: all; word-break: break-all; } .auth-modal.ci-modal { max-width: 880px; width: calc(100vw - 32px); } .ci-modal input[type="checkbox"] { width: auto; min-width: 0; flex: none; margin-top: 3px; } .ci-modal label.row { flex-wrap: nowrap; } /* brand */ .brand-mark { background: none !important; box-shadow: none !important; width: 30px; height: 30px; } .brand .brand-name { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); font-weight: 800; letter-spacing: -.02em; } .brand .bn-cert { font-weight: 600; } .brand .bn-ascent { color: var(--accent); } .brand .brand-name, .brand .brand-name span { background: none !important; -webkit-text-fill-color: currentColor; } .brand .brand-name { color: var(--text); } .brand .brand-name .bn-ascent { color: var(--accent); } @media (max-width: 640px) { .brand .brand-name { display: none; } } /* long URLs and identifiers in running text must wrap instead of widening the page on phones */ #view p, #view li, #view dd, .legal-dialog-box p, .legal-dialog-box li { overflow-wrap: anywhere; } /* collapsed audit trail under a certification's verification line (build_data.py verifyNotes) */ .verify-notes { margin: 4px 0 0; } .verify-notes summary { cursor: pointer; width: fit-content; } .verify-notes p { margin: 4px 0 0; overflow-wrap: anywhere; } /* ---- screen-reader / assistive-tech pass (docs/ACCESSIBILITY.md §5) ---- */ /* sortable roadmap table headers are real buttons (aria-sort on the ) that still look like header text */ .th-sort { all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; } .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* the certification name that opens its drawer from a table row (was plain bold text on a clickable row) */ .rm-open { font-weight: 700; color: inherit; text-decoration: none; } .rm-open:hover { text-decoration: underline; } /* programmatic focus targets (page h1 after navigation, dialogs, result headings) aren't Tab stops: no ring */ #view h1[tabindex="-1"]:focus, #drawer:focus, .auth-gate [tabindex="-1"]:focus { outline: none; } /* Windows High Contrast / forced colors: backgrounds are replaced by system colours, so every state that was shown with a fill (selected toggle, current page, progress, status dots, the open drawer's edge) gets a border or a system colour that survives. */ @media (forced-colors: active) { .btn, .chip, .dtab, .vtab, .seg button, .status-buttons button, .pitem, .res-chip, .study-tab, .org-tab, .seg-btn, .tcard, .card { border: 1px solid CanvasText; } [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="step"], .pitem.on, .seg button.on, .status-buttons button.on, .dtab.on, .vtab.on { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; border-color: Highlight !important; } .bar { border: 1px solid CanvasText; } .bar > span { forced-color-adjust: none; background: Highlight !important; } .dot, .ndot, .sync-dot, .prio-dot { forced-color-adjust: none; background: CanvasText !important; } .ring svg circle:last-child { stroke: Highlight; } .drawer, .pbox, .msheet, .tour, .auth-modal, .toast { border: 2px solid CanvasText; } :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; } .sr-only { forced-color-adjust: auto; } } /* Reflow at 320 CSS px (WCAG 1.4.10, = 1280px at 400% zoom) and text-spacing overrides (1.4.12): grid tracks may not be wider than their container, spanning form fields collapse to one column. */ .paths { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } .fields { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } .support-help { min-width: 0; } .support-side { grid-template-columns: minmax(0, 1fr); } .chips > .chip { min-width: 0; } .phase { grid-template-columns: 88px minmax(0, 1fr); } @media (max-width: 480px) { .chip { white-space: normal; } } .support-help .card-head { flex-wrap: wrap; } .support-inline { min-width: 0; max-width: 100%; } .support-inline select { max-width: 100%; } .chip { max-width: 100%; overflow-wrap: anywhere; } @media (max-width: 480px) { .btn { white-space: normal; max-width: 100%; } .hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; } .hero-rings { flex-wrap: wrap; justify-content: center; gap: 8px; } .fields > [style*="grid-column"] { grid-column: 1 / -1 !important; } .list-item { flex-wrap: wrap; row-gap: 2px; } } /* a table header row that exists only for screen readers (its cells hold .sr-only text) */ thead.sr-head th { padding: 0; border: 0; height: 0; line-height: 0; box-shadow: none; } /* skip link: off-screen until it has keyboard focus */ .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--surface); color: var(--text); border: 2px solid var(--accent); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 12px; } /* ---- css/joy.css ---- */ /* ================================================================ CertAscent visual layer: page identity, friendlier type, delight (loaded last; uses theme tokens so light and dark both work) ================================================================ */ :root { --display: "Plus Jakarta Sans", var(--font); --route-hue: #2459d6; --summit: #f5a83a; /* --route-hue is a wide, per-route brand palette (tour.js) not tuned for contrast. Two derived, WCAG-safe variants: -text for the hue used as small text on --surface (direction flips with theme), -solid for the hue used as a background with white text on top (always darkened). */ --route-hue-text: color-mix(in srgb, var(--route-hue) 75%, #000); --route-hue-solid: color-mix(in srgb, var(--route-hue) 75%, #000); } :root[data-theme="dark"] { --route-hue-text: color-mix(in srgb, var(--route-hue) 65%, #fff); } /* ---------- friendlier type ---------- */ h1, h2, h3, .hero-hi, .kpi .value, .brand .brand-name { font-family: var(--display); } h2 { font-weight: 800; letter-spacing: -.025em; } h3 { font-weight: 700; } /* ---------- page identity: hero header ---------- */ .page-head.hero-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--summit) 16%, transparent), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--route-hue) 14%, var(--surface)), color-mix(in srgb, var(--route-hue) 4%, var(--surface)) 70%); border: 1px solid color-mix(in srgb, var(--route-hue) 22%, var(--border)); overflow: hidden; } .page-head.hero-head::after { /* subtle summit contour, decorative */ content: ""; position: absolute; inset-inline-end: -10px; bottom: -18px; width: 220px; height: 90px; pointer-events: none; opacity: .18; background: linear-gradient(to top right, transparent 49%, var(--route-hue) 50%, transparent 51%) 0 100% / 110px 90px no-repeat, linear-gradient(to top left, transparent 49%, var(--route-hue) 50%, transparent 51%) 110px 100% / 110px 90px no-repeat; } .hero-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--route-hue), color-mix(in srgb, var(--route-hue) 60%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--route-hue) 35%, transparent); } .page-head.hero-head > div:not(.row) p { margin-top: 4px; } .page-head.hero-head > .row { justify-content: flex-end; } .hero-next { border-color: color-mix(in srgb, var(--route-hue) 40%, var(--border)); color: var(--route-hue-text); font-weight: 700; background: var(--surface); } .hero-next:hover { background: color-mix(in srgb, var(--route-hue) 10%, var(--surface)); text-decoration: none; } .page-head.hero-head > .hero-next { justify-self: end; } @media (max-width: 760px) { .page-head.hero-head { grid-template-columns: auto 1fr; } .page-head.hero-head > .row, .page-head.hero-head > .hero-next { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; } } /* grouped navigation (sidebar, flyouts, sibling tabs, bottom bar + sheet): css/nav.css */ /* ---------- KPI tiles & cards ---------- */ .card.kpi { position: relative; overflow: hidden; } .card.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--route-hue), var(--summit)); opacity: .85; } .card.kpi .value { letter-spacing: -.03em; } @media (hover: hover) { .card.kpi:hover, .grid > .card.tile:hover, .path-card:hover, .vert-card:hover, .sk-gap:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20, 30, 50, .12); } .chip:hover { transform: translateY(-1px) scale(1.04); } } .card, .chip, .btn { transition: transform .18s ease, box-shadow .18s ease, background .15s, border-color .15s; } /* ---------- progress that feels alive ---------- */ .bar > span { animation: bar-grow .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; } @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- staggered entrance ---------- */ .fade-in .grid > .card, .fade-in .paths > .card, .fade-in .vert-grid > .card { animation: rise .45s ease both; } .fade-in .grid > .card:nth-child(2), .fade-in .paths > .card:nth-child(2) { animation-delay: .04s; } .fade-in .grid > .card:nth-child(3), .fade-in .paths > .card:nth-child(3) { animation-delay: .08s; } .fade-in .grid > .card:nth-child(4), .fade-in .paths > .card:nth-child(4) { animation-delay: .12s; } .fade-in .grid > .card:nth-child(5), .fade-in .paths > .card:nth-child(5) { animation-delay: .16s; } .fade-in .grid > .card:nth-child(n+6), .fade-in .paths > .card:nth-child(n+6) { animation-delay: .2s; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- friendly empty states (small summit illustration) ---------- */ /* block (not flex) so a sentence with an inline link stays one line of text instead of splitting into separate flex items; text-align:center comes from styles.css */ .empty { display: block; } .empty::before { content: ""; display: block; margin: 0 auto 10px; width: 72px; height: 48px; opacity: .9; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 48'%3E%3Ccircle cx='55' cy='12' r='6' fill='%23F5A83A'/%3E%3Cpath d='M4 44 L26 12 L38 28 L46 18 L68 44 Z' fill='%236D3FC0' fill-opacity='.18' stroke='%236D3FC0' stroke-opacity='.55' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M20 32 L25 37 L34 27' fill='none' stroke='%23F5A83A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } td.empty::before, .list .empty::before { display: none; } /* ---------- buttons & chips: a little rounder, a little warmer ---------- */ .btn { border-radius: 12px; } .btn.primary { background: linear-gradient(135deg, #2459d6, #6d3fc0); } .btn.primary:hover { filter: brightness(1.08) saturate(1.05); } .badge { border-radius: 999px; } /* ---------- tables: calmer rhythm ---------- */ table.data th { font-family: var(--font); } table.data tbody tr { transition: background .12s; } /* ---------- guided tour ---------- */ .tour { position: fixed; z-index: 120; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); } .tour.arrow::before { content: ""; position: absolute; top: -8px; left: calc(50% - 8px); width: 16px; height: 16px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .tour h4, .tour h2 { margin: 4px 0 6px; font-family: var(--display); font-size: 16px; } .tour p { margin: 0 0 12px; color: var(--muted); font-size: 14px; } .tour-step { font: 600 11px var(--font); color: var(--route-hue-text); letter-spacing: .06em; } .tour-target { outline: 3px solid var(--summit); outline-offset: 3px; border-radius: 10px; position: relative; z-index: 110; } @media (prefers-reduced-motion: reduce) { .bar > span, .fade-in .grid > .card, .fade-in .paths > .card, .fade-in .vert-grid > .card { animation: none !important; } .card, .chip, .btn { transition: none !important; } } /* wordmark: beat the older gradient-text rule on `.brand span:last-child` */ .brand > span.brand-name.brand-name { color: var(--text); -webkit-text-fill-color: var(--text); background: none; } .brand > span.brand-name > span.bn-cert { color: var(--text); -webkit-text-fill-color: var(--text); } .brand > span.brand-name > span.bn-ascent { color: var(--accent); -webkit-text-fill-color: var(--accent); } /* "What is my level?" explainer under the hero level bar */ .level-help { margin-top: 6px; max-width: 60ch; } .level-help summary { cursor: pointer; color: var(--accent); width: fit-content; } .level-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .level-help p { margin: 6px 0 0; } /* ---- css/landing.css ---- */ /* Landing, pricing & billing — reuses base classes from styles.css (.card, .card-head, .btn, * .badge, .callout, .row, .spacer, .muted, .small, .empty, .fields, .field, .bar). CSS vars only * (dark mode via [data-theme]). Illustrations are HTML/CSS/inline SVG — no external images. * Mobile-first; every interactive control is a real