/* Infinite Solutions — Certification Tracker. Design system shared with the PTO dashboard: same Executive palette tokens, same masthead, same light/dark handling (theme.js sets data-theme on ). Two rules drive this sheet: 1. Exactly ONE sticky layer (the tab bar). Anything below it offsets by --tabbar-h, measured at runtime by app.js — a hardcoded guess is what put the headline figures underneath it. 2. Structure carries the meaning, colour only labels it. Every view leads with a count and a proportion bar so coverage is legible before any name is read; names are quiet tags, not the loudest thing on the page. */ :root{ --canvas:#F2EEE5; --paper:#FFFFFF; --ink:#1E1A15; --muted:#6F6757; --rule:#E7E1D6; --blue:#014A73; --on-blue:#F4EFE6; --blueline:rgba(255,255,255,.15); --bluesub:#AFCADB; --on-blue-hot:#FFCE94; --accent:#C33E1D; --moss:#1D7A44; --amber:#A9701A; --amber-bg:#FBF0DA; --amber-line:#E9D3A6; --amber-ink:#7A5214; --green-bg:#E9F1EC; --green-ink:#1B6E43; --green-line:#C8DCD0; --red-bg:#F8E9E4; --red-ink:#8F2A13; --red-line:#EBCCC2; --track:#ECE6DA; --hover:#EAF1F5; --tint:#FAF8F4; --ms-bg:#EBF2F6; --ms-ink:#01547F; --ms-line:#CBDDE8; --cisco-bg:#E6F2F2; --cisco-ink:#0E6B72; --cisco-line:#C4E0E1; --oth-bg:#F0ECF8; --oth-ink:#5B3FA8; --oth-line:#DBD0EF; --band-track:#014A73; --note-bg:#EDEFF3; --note-ink:#414A5C; --note-line:#D5DAE3; --radius:12px; --shadow:0 1px 2px rgba(26,26,26,.04), 0 3px 10px rgba(26,26,26,.05); --tabbar-h:57px; --mxrow1-h:25px; /* both measured at runtime by app.js */ } @media (prefers-color-scheme: dark){ :root{ --canvas:#14120F; --paper:#211E19; --ink:#ECE6DB; --muted:#A79E90; --rule:#332E27; --blue:#0F3B58; --on-blue:#EAF2F8; --bluesub:#8FB6CE; --blueline:rgba(255,255,255,.12); --on-blue-hot:#F5C489; --accent:#E0682F; --moss:#4CAE6E; --amber:#E0A24A; --amber-bg:#38290F; --amber-line:#574021; --amber-ink:#F2C79E; --green-bg:#1B2A21; --green-ink:#8FD3A6; --green-line:#2F463A; --red-bg:#38211B; --red-ink:#F0A88F; --red-line:#523229; --track:#3A342B; --hover:#26221C; --tint:#1A1713; --ms-bg:#1B2733; --ms-ink:#9CC0D6; --ms-line:#2B3E4E; --cisco-bg:#15302F; --cisco-ink:#7CC7C0; --cisco-line:#244843; --oth-bg:#292235; --oth-ink:#C0AEE8; --oth-line:#3D3350; --band-track:#0F3B58; --note-bg:#20242C; --note-ink:#AEB8C8; --note-line:#333A45; --shadow:0 2px 6px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.28); } } :root[data-theme="dark"]{ --canvas:#14120F; --paper:#211E19; --ink:#ECE6DB; --muted:#A79E90; --rule:#332E27; --blue:#0F3B58; --on-blue:#EAF2F8; --bluesub:#8FB6CE; --blueline:rgba(255,255,255,.12); --on-blue-hot:#F5C489; --accent:#E0682F; --moss:#4CAE6E; --amber:#E0A24A; --amber-bg:#38290F; --amber-line:#574021; --amber-ink:#F2C79E; --green-bg:#1B2A21; --green-ink:#8FD3A6; --green-line:#2F463A; --red-bg:#38211B; --red-ink:#F0A88F; --red-line:#523229; --track:#3A342B; --hover:#26221C; --tint:#1A1713; --ms-bg:#1B2733; --ms-ink:#9CC0D6; --ms-line:#2B3E4E; --cisco-bg:#15302F; --cisco-ink:#7CC7C0; --cisco-line:#244843; --oth-bg:#292235; --oth-ink:#C0AEE8; --oth-line:#3D3350; --band-track:#0F3B58; --note-bg:#20242C; --note-ink:#AEB8C8; --note-line:#333A45; --shadow:0 2px 6px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.28); } :root[data-theme="light"]{ --canvas:#F2EEE5; --paper:#FFFFFF; --ink:#1E1A15; --muted:#6F6757; --rule:#E7E1D6; --blue:#014A73; --on-blue:#F4EFE6; --bluesub:#AFCADB; --blueline:rgba(255,255,255,.15); --on-blue-hot:#FFCE94; --accent:#C33E1D; --moss:#1D7A44; --amber:#A9701A; --amber-bg:#FBF0DA; --amber-line:#E9D3A6; --amber-ink:#7A5214; --green-bg:#E9F1EC; --green-ink:#1B6E43; --green-line:#C8DCD0; --red-bg:#F8E9E4; --red-ink:#8F2A13; --red-line:#EBCCC2; --track:#ECE6DA; --hover:#EAF1F5; --tint:#FAF8F4; --ms-bg:#EBF2F6; --ms-ink:#01547F; --ms-line:#CBDDE8; --cisco-bg:#E6F2F2; --cisco-ink:#0E6B72; --cisco-line:#C4E0E1; --oth-bg:#F0ECF8; --oth-ink:#5B3FA8; --oth-line:#DBD0EF; --band-track:#014A73; --note-bg:#EDEFF3; --note-ink:#414A5C; --note-line:#D5DAE3; --shadow:0 1px 2px rgba(26,26,26,.04), 0 3px 10px rgba(26,26,26,.05); } *{ box-sizing:border-box; } html{ scrollbar-gutter:stable; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none!important; animation:none!important; } } body{ margin:0; font-family:'Hanken Grotesk',system-ui,sans-serif; background:var(--canvas); color:var(--ink); font-size:15px; line-height:1.5; } .disp{ font-family:'Bricolage Grotesque',serif; letter-spacing:-.02em; } .num{ font-variant-numeric:tabular-nums; } .wrap{ max-width:1500px; margin:0 auto; padding-inline:clamp(1rem,3vw,2rem); } :where(a,button,input,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---- Masthead ---- */ .mh{ background:var(--paper); border-bottom:1px solid var(--rule); } /* Masthead height is the PTO dashboard's clamp verbatim, so the white bar is the same depth on all three internal pages and the logo does not jump when you switch tabs. PTO's sheet is deliberately viewport-height-driven, so matching its clamp keeps the three aligned at every window height instead of only at one. */ .mh-in{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; min-height:clamp(52px,7vh,76px); padding-block:clamp(.42rem,1vh,.8rem); } .mh-l{ display:flex; align-items:center; gap:.9rem; min-width:0; } .mh-logo{ height:32px; width:auto; display:block; } :root[data-theme="dark"] .mh-logo{ filter:brightness(1.55); } @media (prefers-color-scheme: dark){ .mh-logo{ filter:brightness(1.55); } } :root[data-theme="light"] .mh-logo{ filter:none; } .mh-div{ width:1px; height:26px; background:var(--rule); } .mh-title{ font-size:1.2rem; font-weight:700; } .mh-title span{ font-weight:400; color:var(--muted); font-style:italic; } .mh-r{ margin-left:auto; display:flex; align-items:center; gap:.5rem; } .theme-btn{ background:var(--paper); border:1px solid var(--rule); color:var(--muted); border-radius:8px; padding:.4rem .55rem; cursor:pointer; font-size:.85rem; } .theme-btn:hover{ background:var(--hover); } /* ---- Hero band, above the sticky bar so it scrolls away cleanly ---- */ /* These metrics are the org chart's hero verbatim, so the blue band is the same depth on both pages at every window height. Matching in the other direction was not an option: the org chart fits one viewport with no slack, so growing its hero would have made it scroll. Keep the two in step if either changes. */ .hero{ background:var(--blue); color:var(--on-blue); } .hero-in{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(.5rem,1.3vh,1.25rem) 2.5rem; flex-wrap:wrap; padding-block:clamp(.35rem,.85vh,1.15rem) clamp(.4rem,.95vh,1.25rem); } .hero h1{ font-size:clamp(1.1rem,2.35vh,1.9rem); margin:0; font-weight:500; line-height:1.15; } .hero h1 em{ font-style:normal; color:var(--on-blue-hot); } .hero .sub{ color:var(--bluesub); font-size:clamp(.72rem,1.5vh,.9rem); margin:clamp(.1rem,.3vh,.3rem) 0 0; max-width:82ch; } /* Same rule as the org chart: under 800px of viewport this sentence is the one piece of text carrying no data, so it is what gives way. The h1 still names the page. */ @media(max-height:800px){ .hero .sub{ display:none; } } .figs{ display:flex; gap:clamp(1.1rem,3vw,2.4rem); flex-wrap:wrap; } .fig .v{ font-size:clamp(1.2rem,2.6vh,2.1rem); line-height:1; font-weight:400; } .fig .lab{ font-size:clamp(.6rem,1.2vh,.72rem); color:var(--bluesub); margin-top:clamp(.1rem,.3vh,.3rem); text-transform:uppercase; letter-spacing:.07em; } .fig.hot .v{ color:var(--on-blue-hot); } /* ---- Sticky tab bar (the only sticky layer) ---- */ .tabsbar{ position:sticky; top:0; z-index:40; background:var(--canvas); border-bottom:1px solid var(--rule); } .tb-in{ display:flex; gap:.25rem; padding-block:.55rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .tb-in::-webkit-scrollbar{ display:none; } .tab{ font:inherit; font-size:.92rem; font-weight:600; color:var(--blue); background:transparent; border:1px solid transparent; border-radius:999px; padding:.45rem 1rem; cursor:pointer; white-space:nowrap; flex:0 0 auto; } :root[data-theme="dark"] .tab{ color:var(--bluesub); } .tab:hover{ background:var(--hover); } .tab[aria-selected="true"]{ background:var(--blue); color:var(--on-blue); cursor:default; } /* ---- Page shell ---- */ /* Tight top: the active tab already names the page, so panels carry no heading, and the guidance note is one line. Both were pushing the real content into the scroll. */ .container{ max-width:1500px; margin:0 auto; padding:.85rem clamp(1rem,3vw,2rem) .75rem; } .panel{ display:none; } .panel.show{ display:block; } h2{ font-family:'Bricolage Grotesque',serif; font-size:1.2rem; margin:0 0 .3rem; letter-spacing:-.01em; font-weight:500; } .h-note{ color:var(--muted); font-size:.88rem; margin:0 0 .8rem; max-width:none; } .card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:.8rem 1rem; box-shadow:var(--shadow); } .lab{ font-size:.8rem; font-weight:600; color:var(--muted); } /* ---- Shared: proportion bar. Every view leads with one of these so coverage reads as a shape before it reads as a list of names. ---- */ /* The caption lives INSIDE the meter rather than as a sibling span, so it can never be overlapped by the meter overflowing at a font width this environment cannot render. Text wraps rather than colliding. */ .meter{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; color:var(--muted); } .meter .bar{ width:64px; height:5px; border-radius:99px; background:var(--track); overflow:hidden; flex:0 0 auto; } .meter .bar i{ display:block; height:100%; background:var(--moss); border-radius:99px; } .meter .bar i.part{ background:var(--amber); } .meter b{ color:var(--ink); font-weight:600; } .meter .mtxt{ min-width:0; } /* Per-certification rows show a coverage STATE against the two-holder standard, not a headcount: "13 of 34" invited reading a step with 14 holders as better than one with 2, and a bar on all 49 steps competed with the track bars that carry the shape. */ .state{ font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.12rem .5rem; white-space:nowrap; } .state.ok{ background:var(--green-bg); color:var(--green-ink); border:1px solid var(--green-line); } .state.thin{ background:var(--amber-bg); color:var(--amber-ink); border:1px solid var(--amber-line); } .state.none{ background:var(--tint); color:var(--muted); border:1px solid var(--rule); } /* ---- Name tags: quiet by design. Bordered pills at this density read as noise, so holders get a tint and no outline. ---- */ .who-tag{ font:inherit; font-size:.77rem; border:none; border-radius:6px; padding:.1rem .45rem; background:var(--green-bg); color:var(--green-ink); text-decoration:none; display:inline-block; } .who-tag.prog{ background:var(--amber-bg); color:var(--amber-ink); } .who-tag.none{ background:transparent; color:var(--muted); font-style:italic; padding-left:0; } a.who-tag:hover{ text-decoration:underline; } .whos{ display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.4rem; } /* ---- In Progress: grouped by target exam, so the clusters are visible ("four people are converging on SC-300") instead of 12 identical cards. ---- */ .pursuit{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:.75rem 1rem; margin-bottom:.7rem; } .pursuit-head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; } .pursuit-code{ font-weight:700; font-size:.95rem; } .pursuit-name{ color:var(--muted); font-size:.88rem; } .pursuit-n{ margin-left:auto; font-size:.76rem; font-weight:600; color:var(--amber-ink); background:var(--amber-bg); border-radius:999px; padding:.1rem .6rem; white-space:nowrap; } .pursuit .whos{ margin-top:.5rem; } .pursuit .who-tag{ padding:.25rem .55rem; font-size:.8rem; } .pursuit .note{ font-size:.76rem; color:var(--muted); margin-top:.35rem; } /* ---- By Person: multi-column masonry. A CSS grid sizes each row by its tallest card, so one 12-cert card left ~4,400px of holes beside the short cards next to it. Multicol packs by column instead, which removes the holes entirely. Reading order becomes column-major (a directory), which suits an alphabetical roster. ---- */ .people{ column-width:300px; column-gap:.85rem; } .person{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; display:inline-block; width:100%; margin:0 0 .85rem; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:.8rem .95rem; box-shadow:var(--shadow); } .person .name{ font-weight:700; font-size:1rem; display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; } .count{ font-size:.72rem; font-weight:600; color:var(--muted); background:var(--tint); border:1px solid var(--rule); padding:.08rem .5rem; border-radius:999px; white-space:nowrap; } /* vendor mix at a glance, so a card has a shape before it has a list */ .vbar{ display:flex; height:4px; border-radius:99px; overflow:hidden; background:var(--track); margin:.55rem 0 .1rem; } .vbar i{ display:block; height:100%; } .vbar i.comptia{ background:var(--red-ink); } .vbar i.microsoft{ background:var(--ms-ink); } .vbar i.cisco{ background:var(--cisco-ink); } .vbar i.other{ background:var(--oth-ink); } .vbar i.progress{ background:var(--amber); } .chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; } .chip{ font:inherit; text-align:left; cursor:pointer; font-size:.79rem; font-weight:400; border-radius:7px; padding:.2rem .5rem; border:1px solid transparent; line-height:1.35; display:inline-block; } .chip b{ font-weight:700; } .chip .yr{ font-size:.72rem; opacity:.75; white-space:nowrap; } .chip.comptia{ background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line); } .chip.microsoft{ background:var(--ms-bg); color:var(--ms-ink); border-color:var(--ms-line); } .chip.cisco{ background:var(--cisco-bg); color:var(--cisco-ink); border-color:var(--cisco-line); } .chip.other{ background:var(--oth-bg); color:var(--oth-ink); border-color:var(--oth-line); } .chip.progress{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line); border-style:dashed; } .chip.arch{ background:var(--tint); color:var(--muted); border-color:var(--rule); } button.chip:hover{ filter:brightness(.97); } :root[data-theme="dark"] button.chip:hover{ filter:brightness(1.25); } .tag{ font-size:.66rem; font-weight:700; border-radius:999px; padding:0 .35rem; margin-left:.2rem; background:var(--tint); color:var(--muted); border:1px solid var(--rule); } .tag.warn{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line); } /* Vendor mix bar is opt-in; it sat under the name and competed with it. */ body.no-vbar .vbar{ display:none; } .vtoggle{ display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; color:var(--muted); cursor:pointer; white-space:nowrap; } .empty-note{ margin-top:.5rem; font-size:.85rem; color:var(--muted); font-style:italic; } .no-results{ color:var(--muted); padding:2rem 0; text-align:center; display:none; } .toolbar{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; } .search{ flex:1 1 220px; min-width:200px; max-width:340px; border:1px solid var(--rule); border-radius:999px; background:var(--paper); color:var(--ink); padding:.55rem 1rem; font:inherit; font-size:.92rem; } .count-note{ font-size:.84rem; color:var(--muted); } .legend{ display:flex; gap:.4rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-left:auto; } .lg{ display:inline-flex; align-items:center; gap:.35rem; background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:.15rem .6rem; } .dot{ width:9px; height:9px; border-radius:50%; } .dot.comptia{ background:var(--red-ink); } .dot.microsoft{ background:var(--ms-ink); } .dot.cisco{ background:var(--cisco-ink); } .dot.other{ background:var(--oth-ink); } .dot.progress{ background:var(--amber); } .nocerts{ margin-top:.2rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; } .nocerts .names{ font-weight:600; } .nocerts .why{ font-size:.84rem; color:var(--muted); } .fix-link{ display:inline-block; margin-top:.55rem; padding:.3rem .65rem; font-size:.77rem; font-weight:600; color:var(--blue); background:transparent; text-decoration:none; border:1px solid var(--rule); border-radius:999px; } :root[data-theme="dark"] .fix-link{ color:var(--bluesub); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fix-link{ color:var(--bluesub); } } a.fix-link:hover{ background:var(--hover); border-color:var(--blue); } /* ---- Past employees: dense archive table ---- */ .archive{ padding:0; overflow:hidden; } .arch-tbl{ width:100%; border-collapse:collapse; font-size:.9rem; } .arch-tbl th{ text-align:left; font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--tint); padding:.5rem 1rem; border-bottom:1px solid var(--rule); } .arch-tbl td{ padding:.55rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; } .arch-tbl tr:last-child td{ border-bottom:none; } .arch-tbl tbody tr:hover{ background:var(--hover); } .arch-tbl .nm{ font-weight:600; white-space:nowrap; } .arch-tbl .n{ color:var(--muted); font-size:.8rem; text-align:right; white-space:nowrap; } .arch-tbl .chips{ margin-top:0; } /* ---- Matrix. table-layout:fixed with a bounded name column: letting the browser size columns gave the names a wide ragged gutter and squeezed the exam columns into an unreadable strip. Now the exams get every spare pixel, split evenly, and the family groups are separated by tone rather than a rule. ---- */ .matrix-scroll{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); } .mx{ border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; font-size:.8rem; } .mx col.who{ width:168px; } .mx thead th{ position:sticky; z-index:3; background:var(--blue); color:var(--on-blue); font-weight:600; padding:.4rem .15rem; text-align:center; } .mx thead tr:first-child th{ top:var(--tabbar-h); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--blueline); } /* The second header row offsets by the FIRST row's measured height (app.js sets --mxrow1-h). A hardcoded 25px drifted the two sticky rows apart or overlapped them as soon as the real webfont changed the row height. */ .mx thead tr:last-child th{ top:calc(var(--tabbar-h) + var(--mxrow1-h)); font-size:.67rem; letter-spacing:-.01em; } .mx thead th.who{ text-align:left; padding-left:.8rem; z-index:4; } .mx thead th.grp{ border-left:1px solid var(--blueline); } .mx th.hcell{ padding:0; } .mx th.hcell button{ font:inherit; font-size:.67rem; font-weight:600; color:inherit; background:transparent; border:0; width:100%; padding:.4rem .1rem; cursor:pointer; letter-spacing:-.01em; } .mx th.hcell button:hover{ background:rgba(255,255,255,.14); } .mx tbody th{ text-align:left; font-weight:600; font-size:.82rem; padding:.3rem .8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid var(--rule); background:var(--paper); } .mx tbody th .n{ color:var(--muted); font-weight:400; font-size:.74rem; margin-left:.3rem; } .mx tbody td{ border-bottom:1px solid var(--rule); height:32px; text-align:center; vertical-align:middle; } /* family bands: alternate tone so 28 columns stay navigable without vertical rules */ .mx td.band, .mx tfoot td.band{ background:var(--tint); } .mx tbody tr:hover th, .mx tbody tr:hover td{ background:var(--hover); } .mx tfoot td, .mx tfoot th{ position:sticky; bottom:0; background:var(--canvas); border-top:1px solid var(--rule); font-size:.72rem; color:var(--muted); text-align:center; height:26px; } .mx tfoot th{ text-align:left; padding-left:.8rem; font-weight:600; white-space:nowrap; } .mx tfoot td.zero{ color:var(--accent); font-weight:700; } .mx tfoot td.thin{ color:var(--amber-ink); font-weight:700; } .mark{ display:inline-block; width:19px; height:19px; border-radius:5px; line-height:19px; font-weight:700; font-size:.72rem; } .mark.done{ background:var(--moss); color:#fff; } .mark.sched{ background:var(--amber); color:#fff; font-size:.6rem; } .matrix-note{ margin-top:.7rem; font-size:.84rem; color:var(--muted); } @media(max-width:1200px){ .matrix-scroll{ overflow:auto; max-height:76vh; } .mx{ table-layout:auto; } .mx tbody td{ width:34px; } .mx thead tr:first-child th{ top:0; } .mx thead tr:last-child th{ top:25px; } .mx tbody th, .mx thead th.who, .mx tfoot th{ position:sticky; left:0; z-index:2; } .mx thead th.who{ z-index:5; } } /* ---- Architecture ---- */ /* Seven tracks, so seven equal columns rather than auto-fit — at minmax(200px) the seventh wrapped onto a row of its own. */ .overview{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.5rem; margin-bottom:1.1rem; } @media(max-width:1120px){ .overview{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } } .ov{ background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:.55rem .7rem; text-decoration:none; color:inherit; box-shadow:var(--shadow); } .ov:hover{ background:var(--hover); border-color:var(--blue); } .ov .t{ font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .ov .n{ font-family:'Bricolage Grotesque',serif; font-size:.88rem; line-height:1.2; margin-top:.1rem; } /* Stacked block rows, not an inline-flex meter beside a separate caption span. At real font widths the nowrap meter overflowed and printed on top of the caption; the verification pane substitutes narrower fallback fonts and hid it. */ .ov-bar{ height:5px; border-radius:99px; background:var(--track); overflow:hidden; margin:.5rem 0 .3rem; } .ov-bar i{ display:block; height:100%; background:var(--moss); border-radius:99px; } .ov-cap{ font-size:.7rem; line-height:1.3; color:var(--muted); } .ov-cap b{ color:var(--ink); font-weight:600; } .jump{ position:sticky; top:var(--tabbar-h); z-index:30; background:var(--canvas); border-bottom:1px solid var(--rule); margin:0 0 1rem; padding:.5rem 0; display:flex; gap:.3rem; flex-wrap:wrap; } .jump a{ font-size:.78rem; font-weight:600; text-decoration:none; color:var(--muted); background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:.25rem .7rem; white-space:nowrap; } .jump a:hover{ background:var(--hover); color:var(--ink); } .jump a.here{ background:var(--blue); color:var(--on-blue); border-color:var(--blue); } /* Each track opens with a brand-colour banner so the seven sections separate at a glance while scrolling. Phase 1 Core Foundation gets the green band; the six specialised tracks get Infinite blue. */ .track{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:0; overflow:hidden; margin-bottom:.9rem; scroll-margin-top:calc(var(--tabbar-h) + 60px); } .track-head{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; background:var(--band-track); color:var(--on-blue); padding:.55rem 1.1rem; } /* Recessed (dark) rather than raised (light): a white overlay LIGHTENS the band, and the brand moss is already light enough that near-white pill text fell to 3.3:1 on it. Darkening works on both bands without altering a brand colour. */ .track-num{ font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--on-blue); background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.12rem .6rem; white-space:nowrap; } .track-title{ font-family:'Bricolage Grotesque',serif; font-size:1.1rem; font-weight:500; color:var(--on-blue); } .track-head .meter{ margin-left:auto; color:var(--on-blue); } .track-head .meter b{ color:var(--on-blue); } .track-head .meter .bar{ background:rgba(255,255,255,.25); } .track-head .meter .bar i{ background:var(--on-blue-hot); } .track-body{ padding:.6rem 1.1rem .8rem; } .track-sub{ color:var(--muted); font-size:.86rem; margin:0 0 .2rem; } .ladder{ list-style:none; margin:.2rem 0 0; padding:0; } /* level | exam + coverage | names — a three-part row so the ladder shape is visible */ .step{ padding:.5rem 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:86px 1fr; gap:.15rem .7rem; align-items:start; } .step:first-child{ border-top:none; } .lvl{ font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:5px; padding:.16rem .4rem; text-align:center; margin-top:.1rem; } .lvl.fund{ background:var(--cisco-bg); color:var(--cisco-ink); } .lvl.inter{ background:var(--ms-bg); color:var(--ms-ink); } .lvl.expert{ background:var(--oth-bg); color:var(--oth-ink); } .lvl.spec{ background:var(--track); color:var(--muted); } .step-top{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; } /* padding keeps this above the 24px tap minimum: the exam code is now the way in to a certification's detail, not decoration */ .step-code{ font:inherit; font-weight:700; font-size:.87rem; background:transparent; border:0; padding:.2rem 0; cursor:pointer; color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-decoration-thickness:2px; text-underline-offset:3px; } .step-code:hover{ text-decoration-color:var(--blue); } .step-sep{ font-weight:700; font-size:.87rem; color:var(--muted); } .step-name{ color:var(--muted); font-size:.86rem; } /* Coverage state pinned right, so the states line up in a column down each track instead of trailing whatever length the exam name happened to be. */ .step-top .meter, .step-state{ margin-left:auto; } .step-state{ flex:0 0 auto; } /* Exam-change notices get their own slate colour. Amber means "a person is working on this"; a retirement or replacement is a fact about the exam, not a status, and sharing amber made the two read as the same kind of thing. */ .step .note{ font-size:.76rem; color:var(--note-ink); background:var(--note-bg); border:1px solid var(--note-line); border-left:3px solid var(--note-ink); border-radius:6px; padding:.08rem .45rem; display:inline-block; margin-top:.3rem; } /* Someone holding the retired predecessor: same slate family, because it is the same idea — information about a superseded exam, not coverage of its replacement. */ .who-tag.legacy{ background:var(--note-bg); color:var(--note-ink); } /* ---- Cert detail dialog ---- */ .sheet{ border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper); color:var(--ink); padding:0; max-width:560px; width:calc(100vw - 2rem); box-shadow:var(--shadow); } .sheet::backdrop{ background:rgba(10,8,6,.45); } .sheet-head{ display:flex; align-items:flex-start; gap:.7rem; padding:1rem 1.1rem .7rem; border-bottom:1px solid var(--rule); } .sheet-head .id{ min-width:0; } .sheet-code{ font-family:'Bricolage Grotesque',serif; font-size:1.3rem; letter-spacing:-.02em; } .sheet-sub{ color:var(--muted); font-size:.88rem; margin-top:.1rem; } .sheet-badges{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; } .sheet-close{ margin-left:auto; background:transparent; border:1px solid var(--rule); color:var(--muted); border-radius:8px; font:inherit; font-size:1rem; line-height:1; padding:.35rem .55rem; cursor:pointer; flex:0 0 auto; } .sheet-close:hover{ background:var(--hover); } .sheet-body{ padding:.85rem 1.1rem 1.1rem; } .sheet-row{ padding:.6rem 0; border-top:1px solid var(--rule); } .sheet-row:first-child{ border-top:none; padding-top:.2rem; } .sheet-row .k{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; } .sheet-row .v{ font-size:.9rem; } .sheet .meter .bar{ width:110px; } .sheet-warn{ color:var(--amber-ink); background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:8px; padding:.4rem .6rem; font-size:.85rem; } .sheet-next{ font-size:.9rem; } .sheet-next b{ font-weight:700; } /* ---- Footer ---- */ .foot{ max-width:1500px; margin:0 auto; color:var(--muted); font-size:.82rem; font-style:italic; padding:.5rem clamp(1rem,3vw,2rem) 2rem; } @media(max-width:700px){ /* At 375px the brand block plus a 1.5rem gap plus the theme button overran the row by three pixels, wrapping the masthead onto two lines and costing ~48px of height. */ .mh-in{ gap:.75rem; } .hero-in{ padding-block:.7rem; gap:.5rem; } /* figure and label side by side, wrapping as a compact list: stacked big numerals took two rows and pushed the real content past half the viewport */ .figs{ width:100%; gap:.1rem .9rem; } .fig{ display:flex; align-items:baseline; gap:.3rem; } .fig .v{ font-size:1.1rem; } .fig .lab{ margin-top:0; font-size:.68rem; letter-spacing:.04em; } .step{ grid-template-columns:1fr; } .step-top .meter, .track-head .meter{ margin-left:0; } /* The colour legend is the first thing to go on a phone: every chip already names its vendor in its own text, so the swatch key is a nice-to-have that was costing two rows above the cards. */ .legend{ display:none; } .arch-tbl .nm{ white-space:normal; } .people{ column-width:auto; column-count:1; } }