/* Nelnet — Cloud Center of Excellence brand kit. Default style for generated HTML. Dark charcoal body, green brand bar, blue/magenta/green accents. Self-contained (no external fonts/assets). */ :root { --bg:#2e323b; --card:#474c55; --line:#3c414b; --fg:#ffffff; --muted:#aeb3bc; --accent:#1f8ed0; --green:#8cc63f; --green-d:#39a848; --magenta:#c10e6b; } /* Light theme (toggled via data-theme="light" on ). Brand accents (green/blue/magenta) stay the same; only surfaces + text flip. */ :root[data-theme="light"] { --bg:#f4f6fa; --card:#ffffff; --line:#dfe4ec; --fg:#1b2330; --muted:#5b6472; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } a { color:var(--accent); } /* Brand bar: white nelnet logo left, "Cloud Center of Excellence" + dots right */ .brandbar { background:linear-gradient(100deg,var(--green) 0%,var(--green-d) 72%); padding:14px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid #a6d65b; } .brand svg, .brand-img { height:50px; display:block; } .brand-right { display:flex; align-items:center; gap:26px; } .brand-tag { color:#fff; font-weight:600; font-size:16px; letter-spacing:.02em; white-space:nowrap; } .dots { display:grid; grid-template-columns:repeat(10,1fr); gap:7px; opacity:.5; } .dots i { width:4px; height:4px; border-radius:50%; background:#fff; } .titlebar { padding:26px 32px 4px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } h1 { margin:0; font-size:30px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .sub { color:var(--muted); font-size:13px; margin-top:6px; } /* Nav links (Back / Home / theme toggle) — top-right, just under the brand bar. These sit on the page background, so use theme-aware colors. */ .nav-links { display:flex; gap:10px; align-items:center; flex:none; } .nav-link { display:inline-flex; align-items:center; gap:6px; color:var(--fg); text-decoration:none; font-size:13px; font-weight:600; border:1px solid var(--line); padding:6px 13px; border-radius:20px; white-space:nowrap; background:transparent; cursor:pointer; font-family:inherit; } .nav-link:hover { background:color-mix(in srgb,var(--fg) 8%,transparent); } .nav-link svg { display:block; } .theme-toggle { padding:6px 10px; } .theme-toggle .moon { display:none; } :root[data-theme="light"] .theme-toggle .sun { display:none; } :root[data-theme="light"] .theme-toggle .moon { display:block; } /* Full-width status banner */ .banner { margin:18px 32px 0; padding:12px 18px; border-radius:3px; font-weight:700; text-align:center; letter-spacing:.02em; } .banner-critical { background:var(--magenta); color:#fff; } .banner-ok { background:color-mix(in srgb,var(--green) 20%,var(--card)); color:var(--fg); border:1px solid var(--green); } main { padding:8px 32px 48px; } /* Stat tiles: colored left accent, big white number, muted label */ .summary { display:flex; gap:18px; padding:20px 32px 8px; flex-wrap:wrap; } .stat { background:var(--card); border-left:6px solid var(--accent); border-radius:3px; padding:16px 20px; min-width:180px; flex:1; box-shadow:0 2px 8px rgba(0,0,0,.28); } .stat.acc-magenta { border-left-color:var(--magenta); } .stat.acc-green { border-left-color:var(--green); } .stat .n { font-size:34px; font-weight:800; line-height:1; } .stat .l { color:var(--muted); font-size:13px; margin-top:8px; } /* Content cards */ .card { background:var(--card); border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:3px; margin:16px 0; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.22); } .card.acc-magenta { border-left-color:var(--magenta); } .card.acc-green { border-left-color:var(--green); } .card-head { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); } .card-head h2 { margin:0; font-size:16px; } .card-body { padding:16px 18px; } .count { margin-left:auto; color:var(--muted); font-size:13px; } /* Tables */ .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:13px; } th { text-align:left; padding:10px 14px; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; font-size:11px; } td { padding:10px 14px; border-bottom:1px solid var(--line); } th.num, td.num { text-align:right; white-space:nowrap; } tbody tr:last-child td { border-bottom:none; } /* Pills / misc */ .pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; } .pill.ok { background:color-mix(in srgb,var(--green) 22%,transparent); color:var(--green); } .pill.warn { background:color-mix(in srgb,var(--magenta) 22%,transparent); color:var(--magenta); } .pill.muted { background:color-mix(in srgb,var(--muted) 20%,transparent); color:var(--muted); } .mono, .num { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .empty { color:var(--muted); text-align:center; padding:20px; } footer { padding:20px 32px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }