:root body .design-picker{display:none!important} :root{--navy:#062d58;--navy2:#0a3c70;--blue:#066bf6;--text:#071b3a;--muted:#5d6c82;--line:#dde6f0;--panel:#fff;--bg:#f5f9fc;--shadow:0 2px 10px rgba(30,65,100,.08);--radius:12px;--sidebar:210px;--top:66px;--container-width:1440px;--font-organizational:"Segoe UI",Aptos,"Helvetica Neue",Arial,sans-serif} :root body{font-size:17px} :root body .sidebar nav a,:root body .side-bottom a{font-size:16px} :root body .nav-icon{width:26px;font-size:23px} :root body .top-nav a{gap:8px;font-size:16px} :root body .top-nav .nav-icon{width:22px;font-size:20px} :root body .top-actions button{font-size:23px} :root body .icon-list li>span{font-size:21px} :root body .mail{font-size:20px} :root body .page-title h1,:root body .page-hero h1,:root body .dept-banner h1{font-size:38px} :root body .home-hero h1{font-size:40px} :root body .page-title p,:root body .page-hero p,:root body .dept-banner p{font-size:17px} :root body .section-head h2,:root body .card h2{font-size:19px} :root body .ic{font-size:31px} :root body .cat-icon{width:46px;height:46px;font-size:25px} :root body .sq{width:40px;height:40px;font-size:20px} :root body .service-actions .bigicon{font-size:36px} :root body .icon-list li,:root body .link-list li,:root body .resource-list li{font-size:15px} :root body .event>b{font-size:12px} :root body .event b strong{font-size:22px} :root body .pill{font-size:12px} :root body .skills,:root body .muted{font-size:14px} :root body .home-announcement-preview{display:grid;gap:12px} :root body .announcement-meta,:root body .home-event-time{display:block;color:var(--muted);font-size:13px} :root body .home-more{display:flex;justify-content:space-between;align-items:center;color:#0875f6;font-weight:700;font-size:14px} :root body .home-event-title{display:block;font-size:15px;line-height:1.35} :root body .news-highlight{display:grid;grid-template-columns:.9fr 1.1fr;min-height:230px;overflow:hidden;background:#eaf3f4;border:1px solid #dbe8e8;border-radius:10px} :root body .news-highlight-art{min-height:230px;display:flex;align-items:flex-start;padding:20px;background:linear-gradient(135deg,#286a70 0 34%,#8cb8a2 34% 51%,#d3e5d7 51% 68%,#e7c36c 68%);} :root body .news-highlight-art span{padding:7px 10px;background:#fff;color:#194e54;font-size:12px;font-weight:800} :root body .news-highlight-copy{align-self:center;padding:28px 34px} :root body .eyebrow{font-size:12px;color:#148080;font-weight:800} :root body .news-highlight-copy h2,:root body .calendar-feature h2{font-size:27px;line-height:1.2;margin:8px 0} :root body .news-highlight-copy p,:root body .calendar-feature p{font-size:16px;color:var(--muted);line-height:1.55} :root body .news-highlight-copy a{color:#0875f6;font-weight:700} :root body .sample-label{color:var(--muted);font-size:14px} :root body .announcement-list{gap:14px} :root body .announcement-item{display:grid;grid-template-columns:210px 1fr;min-height:170px;background:#fff;border:1px solid #dfe7ef;border-radius:9px;overflow:hidden} :root body .announcement-art{background:linear-gradient(145deg,#2a668c,#a3d0eb);position:relative;overflow:hidden} :root body .announcement-item:nth-child(2) .announcement-art{background:linear-gradient(140deg,#d8ebe5,#759b78)} :root body .announcement-item:nth-child(3) .announcement-art{background:linear-gradient(145deg,#e8ded1,#ae947a)} :root body .announcement-item:nth-child(4) .announcement-art{background:linear-gradient(145deg,#f1d8b6,#d28e64)} :root body .announcement-copy{padding:18px 22px;display:flex;flex-direction:column;justify-content:center} :root body .announcement-kicker,:root body .announcement-byline{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:13px} :root body .announcement-kicker span{color:#087975;font-weight:750} :root body .announcement-copy h2,:root body .event-detail-copy h2{font-size:20px;line-height:1.3;margin:9px 0 5px} :root body .announcement-copy p,:root body .event-detail-copy p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 12px} :root body .announcement-byline{border-top:1px solid #edf1f4;padding-top:10px} :root body .calendar-feature{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 30px;background:#edf6f4;border-left:5px solid #16877f} :root body .calendar-stat{display:grid;justify-items:center;min-width:145px} :root body .calendar-stat strong{font-size:50px;line-height:1;color:#147d79} :root body .calendar-stat span{color:var(--muted);font-size:13px} :root body .event-list{gap:10px} :root body .event-detail{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:18px;padding:17px 20px;background:#fff;border:1px solid #dfe7ef;border-radius:9px} :root body .event-date{width:62px;min-height:68px;display:grid;align-content:center;justify-items:center;background:#fff1e9;color:#d6573f;border-radius:8px} :root body .event-date span{font-size:12px;font-weight:800} :root body .event-date strong{font-size:27px;color:#1c3858;line-height:1.1} :root body .event-type{color:#148080;font-size:12px;font-weight:800;text-transform:uppercase} :root body .event-detail-copy h2{margin:3px 0 4px} :root body .event-detail-copy p{margin:0} :root body .event-action{color:#0875f6;font-weight:700;white-space:nowrap} @media(max-width:900px){ :root body .topbar .top-nav{position:fixed;left:0;right:0;top:var(--top);height:46px;display:flex;align-items:center;gap:22px;padding:0 14px;overflow-x:auto;white-space:nowrap;background:#fff;border-bottom:1px solid #dfe7ef;z-index:7} :root body .topbar .top-nav a{display:flex;align-items:center;height:100%;color:#30445f;font-size:15px;flex:none} .topbar .top-nav a.active{color:#066bf6;font-weight:750;border-bottom:3px solid #066bf6} :root body main{padding-top:calc(var(--top) + 62px)!important} :root body .announcement-item{grid-template-columns:170px 1fr} } /* Design 2: translucent hairlines distinguish flush components without adding gutters. */ :root body.design-b{--design-b-separator:rgba(83,105,130,.2)} :root body.design-b main .page-title,:root body.design-b main .page-hero:not(.home-hero),:root body.design-b main .dept-banner,:root body.design-b main .portal-hero{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-breadcrumb{border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .card,:root body.design-b main .article-card,:root body.design-b main .person-card,:root body.design-b main .service-actions a,:root body.design-b main .quick-links a,:root body.design-b main .course-grid article,:root body.design-b main .recommended a,:root body.design-b main .category-row a,:root body.design-b main .portal-stat,:root body.design-b main .portal-link-card,:root body.design-b main .portal-guide,:root body.design-b main .event-detail,:root body.design-b main .announcement-item,:root body.design-b main .training-certification{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-hero-icon,:root body.design-b main .portal-related-links,:root body.design-b main .announcement-byline{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-guide{border-left:1px solid var(--design-b-separator)} :root body.design-b main .quick-actions a{border:1px solid var(--design-b-separator)} :root body.design-b main .inner-search.wide{border:1px solid var(--design-b-separator)} :root body.design-b main .filter-row{gap:0} :root body.design-b main .filter-row button{border:1px solid var(--design-b-separator);background:#fff} :root body.design-b main .results-label{padding:10px 20px;border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .tabs{border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .tabs a.active{box-shadow:inset 0 -2px #1769d2} :root body.design-b main .icon-list li,:root body.design-b main .link-list li,:root body.design-b main .resource-list li{border-bottom:1px solid var(--design-b-separator)} :root body.design-b .top-search{border:1px solid var(--design-b-separator)} :root body.design-b .topbar{border-bottom:1px solid var(--design-b-separator)} @media(min-width:641px) and (max-width:900px){ :root body.design-b main .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ :root body.design-b main .portal-guide{border-left:1px solid var(--design-b-separator);border-top:1px solid var(--design-b-separator)} } @media(max-width:640px){ .topbar{padding:0 12px} .top-search{width:46vw} .top-actions{gap:2px} .topbar .top-nav{gap:18px} :root body .page-title h1,:root body .page-hero h1,:root body .dept-banner h1{font-size:32px} :root body .home-hero h1{font-size:34px} :root body .news-highlight{grid-template-columns:1fr} :root body .news-highlight-art{min-height:120px} :root body .news-highlight-copy{padding:20px} :root body .news-highlight-copy h2,:root body .calendar-feature h2{font-size:23px} :root body .announcement-item{grid-template-columns:1fr} :root body .announcement-art{min-height:115px} :root body .announcement-copy{padding:16px} :root body .announcement-copy h2,:root body .event-detail-copy h2{font-size:18px} :root body .calendar-feature{padding:18px;align-items:flex-start} :root body .calendar-stat{min-width:88px} :root body .calendar-stat strong{font-size:40px} :root body .event-detail{grid-template-columns:58px 1fr;gap:12px;padding:14px} :root body .event-date{width:54px;min-height:62px} :root body .event-action{grid-column:2} :root body .filter-row{flex-wrap:wrap} :root body .filter-row span{display:none} :root body .tabs{max-width:100%;min-width:0;overflow-x:auto;white-space:nowrap} :root body .recommended{grid-template-columns:minmax(0,1fr)} :root body .recommended a{min-width:0} :root body .home-columns,:root body .people-grid,:root body .ops-grid,:root body .split.two-thirds{grid-template-columns:1fr} } :root body.width-container .app-shell>main.container-fluid{width:min(var(--container-width),calc(100% - var(--sidebar)));max-width:none;margin-left:max(var(--sidebar),calc(var(--sidebar) + (100% - var(--sidebar) - var(--container-width))/2));margin-right:0;padding:calc(var(--top) + 18px) 28px 40px} :root body.width-container .topbar{width:min(var(--container-width),calc(100% - var(--sidebar)));right:auto;left:max(var(--sidebar),calc(var(--sidebar) + (100% - var(--sidebar) - var(--container-width))/2))} :root body.width-full .app-shell>main.container-fluid{width:calc(100% - var(--sidebar));max-width:none;margin-left:var(--sidebar);margin-right:0;padding:calc(var(--top) + 18px) 28px 40px} :root body .design-picker{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:flex-end;border-radius:12px} :root body .width-picker{display:flex;align-items:center;gap:7px;padding-left:8px;border-left:1px solid rgba(255,255,255,.25)} :root body .width-picker>span{font-weight:700;white-space:nowrap} :root body .design-picker .width-picker button{width:auto;min-width:64px;height:30px;padding:0 9px;border:1px solid rgba(255,255,255,.5);border-radius:5px;background:transparent;color:#fff;font-size:12px;font-weight:700} :root body .design-picker .width-picker button.selected{background:#fff;color:#0a3765} :root body .topbar .top-nav a{gap:8px;font-size:16px} @media(max-width:900px){ :root body.width-container .app-shell>main.container-fluid,:root body.width-full .app-shell>main.container-fluid{width:100%;max-width:none;margin-left:0!important;margin-right:0;padding:calc(var(--top) + 62px) 14px 40px} :root body.width-container .topbar,:root body.width-full .topbar{width:auto;left:0!important;right:0!important} :root body .design-picker{right:12px;bottom:12px;gap:6px} :root body .width-picker{gap:4px;padding-left:6px} :root body .design-picker .width-picker button{min-width:54px;padding:0 6px} } @media(min-width:901px) and (max-width:1200px){ :root body.design-a .topbar{padding-left:16px;padding-right:16px} :root body.design-a .topbar .top-brand{width:122px} :root body.design-a .topbar .top-nav{flex:1;min-width:0;overflow-x:auto;gap:10px} :root body.design-a .topbar .top-nav a{font-size:14px} :root body.design-a .topbar .top-actions{margin-left:12px} } :root body{font-family:var(--font-organizational)} :root body .portal-breadcrumb{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--muted);font-size:14px} :root body .portal-breadcrumb a{color:#0875f6;font-weight:700} :root body .portal-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;margin-bottom:18px;background:linear-gradient(105deg,#edf7f8,#eff7ff 68%,#e8f5f1);border:1px solid #dce9ed;border-left:5px solid #159a9c;border-radius:8px} :root body .portal-hero-copy{max-width:820px} :root body .portal-eyebrow{display:block;color:#148080;font-size:12px;font-weight:800;text-transform:uppercase} :root body .portal-hero h1{font-size:38px;line-height:1.12;margin:7px 0} :root body .portal-hero p{margin:0;max-width:760px;color:var(--muted);font-size:17px;line-height:1.55} :root body .portal-hero-icon{width:76px;height:76px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid #d5e6e4;border-radius:12px;color:#087c7e;font-size:42px;font-weight:750} :root body .portal-stats{margin:0 0 22px} :root body .portal-stat{height:100%;min-height:128px;padding:17px;background:#fff;border:1px solid #e0e8ef;border-radius:8px} :root body .portal-stat>strong{display:block;color:#0b6e73;font-size:27px;line-height:1.2} :root body .portal-stat h2{font-size:15px;margin:8px 0 4px} :root body .portal-stat p{color:var(--muted);font-size:13px;margin:0} :root body .portal-content-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.8fr);gap:22px;align-items:start} :root body .portal-section-head{margin:4px 0 12px} :root body .portal-section-head h2{font-size:21px;margin:0 0 4px} :root body .portal-section-head p{margin:0;color:var(--muted);font-size:14px} :root body .portal-item-grid{margin-top:0} :root body .portal-link-card{display:flex;align-items:flex-start;gap:14px;padding:17px;background:#fff;border:1px solid #e0e8ef;border-radius:8px} :root body .portal-item-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;background:#eaf4f6;border-radius:8px;color:#087b80;font-size:23px;font-weight:700} :root body .portal-item-copy{min-width:0} :root body .portal-item-meta{color:#13807e;font-size:12px;font-weight:800} :root body .portal-item-copy h3{font-size:17px;line-height:1.3;margin:5px 0} :root body .portal-item-copy p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 10px} :root body .portal-item-copy a,:root body .portal-related-links a{color:#0875f6;font-size:14px;font-weight:700} :root body .portal-guide{padding:20px;background:#f0f6f7;border-top:3px solid #159a9c} :root body .portal-guide h2{font-size:19px;margin:8px 0} :root body .portal-guide p{color:#52687a;font-size:14px;line-height:1.55} :root body .portal-related-links{display:grid;gap:10px;padding-top:13px;border-top:1px solid #d9e5e7} :root body .portal-related-links a{display:flex;justify-content:space-between;gap:12px} :root body .full-row-link{display:flex;width:100%;min-height:inherit;align-items:center;gap:10px;color:inherit;text-decoration:none} :root body .full-row-link:hover,:root body .full-card-link:hover{color:#0875f6} :root body .full-card-link{display:block;color:inherit;text-decoration:none} :root body .page-operations .team-row>.full-row-link,:root body .page-operations .update-row>.full-row-link{flex:1} :root body .training-certifications{margin:12px 0 20px} :root body .training-certification{height:100%;display:flex;align-items:flex-start;gap:12px;padding:16px;background:#fff;border:1px solid #e0e8ef;border-radius:8px} :root body .training-certification h3{font-size:16px;margin:2px 0 5px} :root body .training-certification p{font-size:14px;color:var(--muted);margin:0 0 8px} :root body .training-certification a{font-size:14px;font-weight:700;color:#0875f6} @media(max-width:900px){:root body .portal-content-layout{grid-template-columns:1fr}:root body .portal-guide{order:-1}} @media(max-width:640px){:root body .portal-hero{padding:20px;align-items:flex-start}:root body .portal-hero h1{font-size:31px}:root body .portal-hero p{font-size:15px}:root body .portal-hero-icon{width:54px;height:54px;font-size:30px}:root body .portal-link-card{padding:14px;gap:10px}:root body .portal-item-icon{width:36px;height:36px;font-size:20px}} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text);background:#f4f8fc}a{text-decoration:none;color:inherit;cursor:pointer}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#fff;border-right:1px solid #e4ebf3;padding:20px 16px;z-index:10}.brand,.top-brand{display:flex;align-items:center;gap:10px;height:38px}.brandmark{width:26px;height:24px;position:relative;display:inline-block}.brandmark i{position:absolute;background:#159a9c;width:10px;height:18px;border-radius:2px;transform:skewY(-30deg)}.brandmark i:first-child{left:2px;top:3px}.brandmark i:last-child{left:11px;top:0;background:#0f7e82}.sidebar nav{display:flex;flex-direction:column;gap:6px;margin-top:30px}.sidebar nav a,.side-bottom a{height:42px;padding:0 12px;display:flex;align-items:center;gap:12px;border-radius:8px;font-size:14px;color:#30445f}.sidebar nav a.active{background:#e9f3ff;color:#066bf6;font-weight:700}.nav-icon{width:19px;text-align:center}.side-bottom{position:absolute;left:16px;right:16px;bottom:20px}.side-bottom a{margin-top:3px}.topbar{position:fixed;left:var(--sidebar);right:0;top:0;height:var(--top);background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;padding:0 24px;z-index:8;box-shadow:0 1px 3px rgba(20,50,80,.03)}.top-brand,.top-nav{display:none}.top-search{height:38px;width:510px;border:1px solid #cfdbe8;background:#f9fbfd;border-radius:9px;display:flex;align-items:center;gap:9px;padding:0 13px;color:#75879c}.top-search input,.hero-search input,.inner-search input{border:0;outline:0;background:transparent;flex:1;color:var(--text)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.top-actions button{border:0;background:transparent;color:#27405f;font-size:18px}.user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e2b291,#69452f);color:white;font-weight:800;border:2px solid #fff;box-shadow:0 0 0 1px #ccd7e3}.design-picker{position:fixed;right:20px;bottom:20px;z-index:50;background:#092e56;color:white;border-radius:999px;padding:6px 7px 6px 12px;display:flex;gap:4px;align-items:center;box-shadow:0 8px 28px rgba(0,32,72,.25);font-size:12px}.design-picker button{border:0;width:28px;height:28px;border-radius:50%;background:#fff;color:#0a3765;font-weight:800}.design-picker button.selected{background:#1b80ff;color:#fff}:root body:not(.theme-workhub) .app-shell > main.container-fluid:not(.admin-main-content){margin-left:var(--sidebar);padding:calc(var(--top) + 18px) 28px 40px;max-width:var(--container-width)}.container-width{width:min(100%,var(--container-width));margin-inline:auto}.full-width{width:100%;max-width:none}.page-title{margin:4px 0 16px}.page-title h1,.page-hero h1,.dept-banner h1{font-size:32px;line-height:1.1;margin:0 0 6px}.page-title p,.page-hero p,.dept-banner p{margin:0;color:var(--muted);font-size:15px}.page-hero{background:linear-gradient(105deg,#f4fbff 0,#eff7ff 70%,#e8f5f1 100%);border:1px solid #e0eaf2;border-radius:var(--radius);min-height:174px;padding:30px 32px;display:flex;justify-content:space-between;position:relative;overflow:hidden}.page-hero.compact{min-height:150px}.inner-search{margin-top:20px;width:min(640px,70vw);height:42px;background:#fff;border:1px solid #cad9e7;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 13px;box-shadow:0 2px 8px rgba(30,60,100,.03)}.inner-search.wide{width:100%;margin:0 0 14px}.home-hero{height:230px;border-radius:0;margin:-18px -28px 0;background:linear-gradient(180deg,#2e6497,#173f6a);color:white;padding:44px 70px}.home-hero h1{font-size:34px;margin-bottom:6px}.home-hero p{color:white;font-size:17px}.hero-overlay{z-index:2;width:62%;text-align:center;margin:0 auto}.hero-search{height:46px;background:white;border-radius:9px;color:#456177;display:flex;align-items:center;gap:8px;padding:0 13px;margin-top:24px}.hero-scene{position:absolute;inset:0;opacity:.65;background:linear-gradient(180deg,transparent,#0c2946)}.mountains span{position:absolute;bottom:-40px;width:420px;height:190px;background:#163c5a;clip-path:polygon(0 100%,28% 32%,47% 75%,69% 9%,100% 100%)}.mountains span:nth-child(1){left:-30px}.mountains span:nth-child(2){left:30%;transform:scale(1.25);background:#204f75}.mountains span:nth-child(3){right:-20px;background:#13334f}.quick-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:-28px 0 18px;position:relative;z-index:3;padding:0 18px}.quick-actions a{height:94px;background:white;border:1px solid #e0e6ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow)}.quick-actions a:first-child{border-radius:10px 0 0 10px}.quick-actions a:last-child{border-radius:0 10px 10px 0}.ic{font-size:24px}.blue{color:#086bf2}.cyan{color:#08a6b4}.purple,.violet{color:#844eee}.pink{color:#e84580}.green{color:#0fa66f}.orange{color:#f29118}.coral{color:#ef765e}.mint{color:#139d82}.slate{color:#65758b}.home-columns{display:grid;grid-template-columns:.9fr 1.05fr .9fr;gap:18px}.card{background:#fff;border:1px solid #e1e9f0;border-radius:10px;padding:18px;box-shadow:0 1px 4px rgba(30,55,85,.03)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-head h2,.card h2{font-size:16px;margin:0 0 14px}.section-head a{font-size:12px;color:#0875f6;font-weight:600}.section-head.big{margin:22px 0 11px}.section-head.big h2{font-size:17px;margin:0}.icon-list,.link-list,.resource-list{list-style:none;padding:0;margin:0}.icon-list li{height:40px;border-bottom:1px solid #eff2f5;display:flex;align-items:center;gap:11px;font-size:14px}.icon-list li em{margin-left:auto;background:#ea5b42;color:white;border-radius:12px;font-size:11px;padding:2px 6px;font-style:normal}.photo-office{height:110px;border-radius:6px;background:linear-gradient(145deg,#2a668c,#a3d0eb);position:relative;overflow:hidden}.news-card h3{font-size:15px;margin:10px 0 5px}.muted{color:var(--muted);font-size:13px}.sk{height:7px;background:#a7b4c2;border-radius:5px;display:block;margin:7px 0}.sk.short{width:54%;background:#d3dbe4}.event{display:flex;gap:13px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f4}.event>b{width:47px;background:#fff1e9;color:#e65336;border-radius:7px;text-align:center;padding:5px;font-size:10px}.event b strong{font-size:19px;color:#1c3858}.event>div{flex:1}.books-art{width:210px;height:120px;position:relative;align-self:flex-end}.books-art i{position:absolute;right:46px;width:105px;height:18px;border-radius:8px;background:#19a6a6;bottom:14px;box-shadow:0 -22px 0 #e3a649,0 -44px 0 #82b8d7}.books-art span{position:absolute;right:2px;bottom:0;width:52px;height:94px;border-radius:60% 0 60% 20%;background:#70b8a8;transform:rotate(18deg);opacity:.7}.category-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px}.category-row a{height:105px;border:1px solid #e1e8ef;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;font-weight:650;font-size:13px}.cat-icon,.sq{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#eef5ff;font-size:20px}.cat-icon.mint,.sq.mint{background:#e4f8f2}.cat-icon.orange,.sq.orange{background:#fff0d9}.cat-icon.violet,.sq.violet{background:#eee8ff}.cat-icon.coral{background:#fff0ec}.cat-icon.slate{background:#eef1f5}.feature-grid{display:grid;gap:16px}.feature-grid.three{grid-template-columns:repeat(3,1fr)}.article-card{background:#fff;border:1px solid #e0e7ee;border-radius:10px;padding:0 0 16px;overflow:hidden;position:relative}.thumb{height:130px;background:#d7e3ea}.thumb.building{background:linear-gradient(145deg,#d8e5ec 0 45%,#89a8b8 45% 52%,#eef4f6 52%)}.thumb.plants{background:linear-gradient(140deg,#d8ebe5,#759b78)}.thumb.desk{background:linear-gradient(145deg,#e8ded1,#ae947a)}.article-card h3{font-size:15px;margin:13px 14px 8px}.article-card .lines{padding:0 14px}.arrow{position:absolute;right:14px;bottom:12px;color:#0875f6}.filter-row{display:flex;gap:10px;margin-bottom:12px}.filter-row button{border:1px solid #d4dfeb;background:#fff;border-radius:8px;height:36px;padding:0 13px;color:#30445e}.filter-row .filter-more{border:0;background:transparent;color:#1d4f7d}.filter-row span{flex:1}.results-label{font-weight:700;font-size:13px;margin:8px 0}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.person-card{min-height:175px;border:1px solid #dfe7ef;background:white;border-radius:10px;padding:14px;position:relative}.portrait{width:56px;height:56px;border-radius:50%;background:linear-gradient(#f2d4bf 0 45%,#d9eef4 45%);position:relative;overflow:hidden;float:left;margin-right:12px}.portrait:after{content:"";position:absolute;left:15px;top:8px;width:28px;height:28px;border-radius:50%;background:#7a4a34}.portrait:before{content:"";position:absolute;left:7px;bottom:-10px;width:44px;height:36px;border-radius:50% 50% 0 0;background:#4b77a5}.p2:after{background:#644b3c}.p2:before{background:#798f64}.p3:after{background:#554238}.p3:before{background:#8b6daa}.p4:after{background:#513d32}.p4:before{background:#3e7ca7}.p5:after{background:#774b37}.p5:before{background:#b37d56}.p6:after{background:#3b2e29}.p6:before{background:#4f8b83}.person-card h3{font-size:13px;font-weight:500;margin:10px 0 8px;clear:both}.fake-name{padding-top:5px;overflow:hidden}.fake-name .sk{height:6px;margin:4px}.pill{display:inline-block;padding:4px 8px;border-radius:14px;font-size:11px;background:#edf3fb;color:#46617d}.pill.mint,.pill.green{background:#e3f7ee;color:#23805f}.pill.violet{background:#efe7ff;color:#704ac0}.pill.blue{background:#e6f1ff;color:#146ecb}.pill.orange{background:#fff0d6;color:#bb7212}.pill.slate{background:#edf0f3;color:#5d6874}.skills{margin-top:10px;color:#62738a;font-size:11px}.mail{position:absolute;right:11px;bottom:10px;border:0;background:transparent;color:#0b6fe9}.laptop-art{width:240px;position:relative;z-index:2}.laptop-art span{position:absolute;right:45px;bottom:22px;width:110px;height:70px;background:#304e70;border:7px solid #0f3158;border-radius:5px;transform:skew(-8deg)}.laptop-art span:after{content:"";position:absolute;left:-18px;right:-18px;bottom:-18px;height:14px;background:#8aa5bd;border-radius:3px}.service-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.service-actions a{height:130px;border:1px solid #e0e8f0;background:white;border-radius:10px;padding:18px;position:relative;display:flex;flex-direction:column;gap:7px}.service-actions .bigicon{font-size:30px}.service-actions b{font-size:14px}.service-actions small{color:#5d6c82}.service-actions i{position:absolute;right:13px;bottom:13px;color:#0b73e8}.split{display:grid;gap:15px}.split.two-thirds{grid-template-columns:2fr 1fr}.request,.update-row,.team-row{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid #eef2f5}.request .grow,.update-row .grow,.team-row .grow{flex:1}.request time,.update-row time{font-size:11px;color:#718096}.link-list li,.resource-list li{min-height:42px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #eef2f5;font-size:13px}.link-list li b,.resource-list li b{margin-left:auto;color:#477094}.quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-links a{height:54px;border:1px solid #dfe7ef;background:white;border-radius:9px;display:grid;place-items:center;font-size:13px}.dept-banner{min-height:170px;background:linear-gradient(105deg,#f4f8fb 0 48%,#d8dad4 49%,#f0ede7 100%);border-radius:10px;border:1px solid #e1e8ee;padding:42px 34px;position:relative;overflow:hidden}.office-art{position:absolute;right:0;top:0;width:48%;height:100%;background:linear-gradient(180deg,#d8d7d1,#f5f2ec)}.office-art i{position:absolute;bottom:18px;width:70px;height:45px;border:3px solid #778695}.office-art i:nth-child(1){left:35px}.office-art i:nth-child(2){left:130px;width:90px}.office-art i:nth-child(3){right:30px;height:80px;border-radius:60% 60% 10% 10%;border:0;background:#96aa8f}.tabs{height:54px;display:flex;align-items:flex-end;gap:34px;border-bottom:1px solid #dfe7ee;padding-left:12px}.tabs a{height:54px;display:grid;place-items:center;padding:0 3px;font-size:13px;color:#435a73}.tabs a.active{color:#076cf2;border-bottom:3px solid #076cf2;font-weight:700}.ops-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:15px;margin-top:16px}.sq{width:32px;height:32px;border-radius:8px;font-size:16px;flex:none}.portrait.small{width:38px;height:38px;float:none;margin:0}.portrait.small:after{left:10px;top:5px;width:19px;height:19px}.portrait.small:before{left:5px;width:30px;height:26px}.progress-card{margin-top:16px}.progress-wrap{display:grid;grid-template-columns:90px 1fr auto;gap:22px;align-items:center}.donut{width:78px;height:78px;border-radius:50%;background:conic-gradient(#36a37e 60%,#e7eef1 0);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:58px;height:58px;background:white;border-radius:50%}.donut span{z-index:1;font-weight:800}.progress{height:9px;border-radius:9px;background:#e3e9ee;overflow:hidden}.progress i{display:block;height:100%;background:#36a37e;border-radius:9px}.progress-wrap button{border:0;background:#e8f2ff;color:#0b6ee8;font-weight:700;border-radius:8px;padding:10px 14px}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.course-grid article{border:1px solid #e0e8ef;background:white;border-radius:10px;padding:0 0 14px;overflow:hidden}.course-thumb{height:85px;background:linear-gradient(135deg,#f6dccd,#cf9274)}.course-thumb.c2{background:linear-gradient(135deg,#d4eee8,#82b7a6)}.course-thumb.c3{background:linear-gradient(135deg,#f7d8e3,#d788a9)}.course-grid h3{font-size:13px;margin:10px 12px 8px}.course-grid .pill{margin-left:12px}.progress.mini{height:5px;margin:9px 12px 0}.recommended{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.recommended a{height:88px;background:white;border:1px solid #e0e8f0;border-radius:10px;display:flex;align-items:center;gap:12px;padding:14px}.recommended a i{margin-left:auto;color:#0873ea} /* DESIGN A: top navigation / first generated concept */ body.design-a{--sidebar:0px;--top:64px;background:#f7f9fb}.design-a .sidebar{display:none}.design-a .topbar{left:0;background:#072e58;color:white;padding:0 24px}.design-a .top-brand,.design-a .top-nav{display:flex}.design-a .top-brand{width:160px}.design-a .top-nav{gap:26px;height:100%;align-items:center}.design-a .top-nav a{font-size:12px;color:#fff;opacity:.9;height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.design-a .top-nav a.active{border-color:#48a7ff}.design-a .top-search{display:none}.design-a .top-actions button{color:white}.design-a main{margin-left:0;padding:calc(var(--top) + 20px) 34px 40px;max-width:1500px}.design-a .home-hero{margin:-20px -34px 0;height:220px}.design-a .page-hero,.design-a .dept-banner,.design-a .card,.design-a .article-card,.design-a .person-card,.design-a .service-actions a,.design-a .quick-links a,.design-a .course-grid article,.design-a .recommended a{border-radius:7px} /* DESIGN B: dark WorkHub sidebar / second generated concept */ body.design-b{--sidebar:198px;--top:64px;background:#f3f8fc}.design-b .sidebar{background:linear-gradient(180deg,#0e3c69,#082a4f);color:white;border:0}.design-b .brand{color:white}.design-b .brandmark i:first-child{background:#35a7ff}.design-b .brandmark i:last-child{background:#1d73db}.design-b .sidebar nav a,.design-b .side-bottom a{color:#fff;opacity:.92}.design-b .sidebar nav a.active{background:#0b66bc;color:#fff}.design-b .topbar{left:var(--sidebar);background:#fff}.design-b .top-search{display:flex}.design-b .top-brand,.design-b .top-nav{display:none}.design-b main{padding-left:22px;padding-right:22px}.design-b .page-hero,.design-b .dept-banner{border-radius:8px}.design-b .home-hero{margin:0;height:188px;border-radius:8px;padding:30px 36px}.design-b .quick-actions{margin:12px 0 18px;padding:0;gap:10px;grid-template-columns:repeat(6,1fr)}.design-b .quick-actions a{border-radius:8px!important;height:86px}.design-b .card,.design-b .article-card,.design-b .person-card,.design-b .service-actions a,.design-b .quick-links a,.design-b .course-grid article,.design-b .recommended a{box-shadow:var(--shadow)} /* DESIGN C: light modern sidebar / third generated concept */ body.design-c{--sidebar:210px;--top:66px}.design-c .topbar{left:var(--sidebar)} @media(max-width:900px){.sidebar{transform:translateX(-100%)}.topbar{left:0!important}.top-search{width:min(60vw,430px)}main{margin-left:0!important;padding-left:14px!important;padding-right:14px!important}.quick-actions,.category-row{grid-template-columns:repeat(3,1fr)}.home-columns,.people-grid,.feature-grid.three,.service-actions,.course-grid,.recommended,.quick-links,.ops-grid,.split.two-thirds{grid-template-columns:1fr 1fr}.home-hero{margin-left:-14px!important;margin-right:-14px!important}.design-a .top-nav{display:none}} /* Shared finish: calm surfaces, clear focus, and responsive controls. */ :root{--text:#17212f;--muted:#647386;--line:#e3e8ef;--panel:#fff;--bg:#f5f7fa;--shadow:0 8px 24px rgba(18,35,55,.055);--radius:12px} :root body{background:#f5f7fa;color:#17212f;font-size:16px;line-height:1.55;letter-spacing:0} :root body .app-shell{background:#f5f7fa} :root body .sidebar{background:rgba(255,255,255,.96);border-right-color:#e7ebf0} :root body .brand{font-size:17px;letter-spacing:0} :root body .sidebar nav{gap:4px;margin-top:26px} :root body .sidebar nav a,:root body .side-bottom a{height:44px;border-radius:8px;color:#455366;font-size:15px;transition:background-color .16s ease,color .16s ease} :root body .sidebar nav .nav-group{display:grid;gap:4px} :root body .sidebar nav .nav-group+.nav-group{margin-top:14px} :root body .sidebar nav .nav-group-label{padding:3px 12px;margin:4px 0;border-radius:5px;background:#f2f5f8;color:#8994a3;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:.08em} :root body .sidebar nav .nav-group-items{display:grid;gap:4px} :root body .sidebar nav .nav-group:first-child .nav-group-items{margin-bottom:4px} :root body .sidebar nav a:hover,:root body .side-bottom a:hover{background:#f2f5f8;color:#17212f} :root body .sidebar nav a.active{background:#edf4ff;color:#1769d2;font-weight:650} :root body .topbar{background:rgba(255,255,255,.94);border-bottom-color:#e7ebf0;box-shadow:0 2px 12px rgba(18,35,55,.035);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} :root body .sidebar nav .nav-icon,:root body .top-nav .nav-icon{display:none!important} :root body .top-nav a{gap:0} :root body .top-search{height:40px;background:#f4f6f8;border-color:transparent;border-radius:10px} :root body .top-search:focus-within{background:#fff;border-color:#b9cdea;box-shadow:0 0 0 3px rgba(35,112,210,.12)} :root body .top-actions button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:19px} :root body .top-actions button:hover{background:#f0f3f7} :root body .user-avatar{width:34px;height:34px} :root body:not(.theme-workhub) .app-shell > main.container-fluid{padding-bottom:56px} :root body .page-title{margin:6px 0 24px} :root body .page-title h1,:root body .page-hero h1,:root body .dept-banner h1{font-size:36px;line-height:1.12;font-weight:650;letter-spacing:0} :root body .page-title p,:root body .page-hero p,:root body .dept-banner p{color:#657386;font-size:16px;line-height:1.55} :root body .section-head.big{margin:28px 0 14px} :root body .section-head.big h2,:root body .portal-section-head h2{font-size:21px;line-height:1.3;font-weight:650;letter-spacing:0} :root body .card,:root body .article-card,:root body .person-card,:root body .service-actions a,:root body .quick-links a,:root body .course-grid article,:root body .recommended a{border-color:#e5e9ef;border-radius:10px;box-shadow:0 1px 3px rgba(18,35,55,.035);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} :root body .article-card:hover,:root body .person-card:hover,:root body .service-actions a:hover,:root body .quick-links a:hover,:root body .course-grid article:hover,:root body .recommended a:hover{transform:translateY(-2px);border-color:#d6dfe9;box-shadow:0 8px 22px rgba(18,35,55,.08)} :root body a:focus-visible,:root body button:focus-visible,:root body input:focus-visible{outline:3px solid rgba(36,112,213,.42);outline-offset:3px} :root body .portal-breadcrumb{margin-bottom:20px;font-size:13px} :root body .portal-breadcrumb a{font-weight:600} :root body .portal-hero{padding:32px 36px;margin-bottom:20px;background:linear-gradient(115deg,#f0f5fa,#f4f8fb 62%,#eff6f4);border:1px solid #e3e9ef;border-left:3px solid #159a9c;border-radius:12px} :root body .portal-eyebrow{font-size:11px;letter-spacing:.08em;color:#55717c} :root body .portal-hero h1{font-size:36px;font-weight:650;letter-spacing:0} :root body .portal-hero p{font-size:16px;line-height:1.6} :root body .portal-hero-icon{width:62px;height:62px;background:rgba(255,255,255,.75);border-color:#e1e9ec;border-radius:14px;color:#197c7b;font-size:30px} :root body .portal-stats{margin-bottom:26px} :root body .portal-stat{min-height:112px;padding:18px 20px;border-color:#e6eaf0;border-radius:10px;box-shadow:0 1px 3px rgba(18,35,55,.025)} :root body .portal-stat>strong{color:#176e70;font-size:25px;font-weight:650} :root body .portal-stat h2{font-size:14px;font-weight:600} :root body .portal-stat p{font-size:13px;color:#738093} :root body .portal-content-layout{gap:28px} :root body .portal-section-head{margin:2px 0 14px} :root body .portal-section-head h2{font-size:20px;font-weight:650} :root body .portal-section-head p{font-size:14px;color:#718093} :root body .portal-link-card{gap:14px;padding:18px;background:#fff;border-color:#e6eaf0;border-radius:10px;box-shadow:0 1px 3px rgba(18,35,55,.025);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} :root body .portal-link-card:hover{transform:translateY(-2px);border-color:#d8e1ec;box-shadow:0 8px 22px rgba(18,35,55,.075)} :root body .portal-item-icon{width:38px;height:38px;background:#f1f5f8;border-radius:10px;color:#52697d;font-size:18px} :root body .portal-item-meta{font-size:11px;font-weight:650;letter-spacing:.015em;color:#58717b} :root body .portal-item-copy h3{font-size:16px;font-weight:650;letter-spacing:0} :root body .portal-item-copy p{font-size:14px;line-height:1.55;color:#68778a} :root body .portal-item-copy a,:root body .portal-related-links a{color:#1769d2;font-weight:600} :root body .portal-item-copy a:hover,:root body .portal-related-links a:hover{color:#0e4eaa} :root body .portal-guide{padding:20px;background:#f1f5f6;border:1px solid #e3eaeb;border-top:2px solid #159a9c;border-radius:10px} :root body .portal-guide h2{font-size:18px;font-weight:650} :root body .portal-guide p{color:#5e6e7e;line-height:1.6} :root body .portal-related-links{border-top-color:#dfe7e8} :root body .design-picker{gap:8px;padding:8px 10px;background:rgba(255,255,255,.94);color:#344255;border:1px solid rgba(215,222,230,.9);border-radius:14px;box-shadow:0 8px 28px rgba(20,35,55,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:12px} :root body .design-picker button{width:30px;height:30px;background:#f0f3f6;color:#344255} :root body .design-picker button:hover{background:#e7edf4} :root body .design-picker button.selected{background:#1769d2;color:#fff} :root body .width-picker{border-left-color:#e0e5eb} :root body .design-picker .width-picker button{min-width:60px;height:30px;border-color:#d9e0e8;background:#f5f7f9;color:#3e4b5d} :root body .design-picker .width-picker button.selected{background:#1769d2;border-color:#1769d2;color:#fff} :root body .design-picker .display-toggle{display:none} :root body .home-hero{background:linear-gradient(115deg,#285b7c,#244969);} :root body .home-quick a{transition:transform .16s ease,box-shadow .16s ease} :root body .home-quick a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,35,55,.1)} @media(max-width:900px){ :root body .topbar .top-nav{gap:10px;padding:0 12px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} :root body .topbar .top-nav a{gap:6px;padding:0 8px;font-size:14px} :root body .topbar .top-nav .nav-icon{width:18px;font-size:16px} :root body .topbar .top-nav{scrollbar-width:none} :root body .topbar .top-nav::-webkit-scrollbar{display:none} :root body .design-picker{right:12px;bottom:12px;left:auto;width:auto;max-width:calc(100vw - 24px);margin-left:0;padding:5px;background:rgba(255,255,255,.92);gap:4px} :root body .design-picker>span,:root body .design-picker>button[data-design],:root body .design-picker .width-picker{display:none} :root body .design-picker .display-toggle{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#1769d2;color:white;font-size:16px} :root body .design-picker.is-open{left:auto;width:max-content;padding:7px 8px;gap:5px} :root body .design-picker.is-open>span{display:inline} :root body .design-picker.is-open>button[data-design]{display:block} :root body .design-picker.is-open .width-picker{display:flex} :root body .design-picker.is-open .display-toggle{background:#edf1f5;color:#344255} :root body .design-picker button{width:28px;height:28px} :root body .design-picker .width-picker{gap:4px;padding-left:6px} :root body .design-picker .width-picker button{min-width:54px;height:28px} :root body:not(.theme-workhub) .app-shell > main.container-fluid{padding-bottom:112px!important} :root body .portal-hero{padding:26px 24px} :root body .portal-stats{row-gap:10px!important} } @media(max-width:640px){ :root body .topbar{height:58px;padding:0 12px} :root body .top-search{width:min(53vw,230px);height:36px} :root body .top-actions{gap:0} :root body .top-actions button{width:34px;height:34px;font-size:17px} :root body .portal-hero{padding:22px 18px;gap:12px} :root body .portal-hero h1{font-size:30px} :root body .portal-hero-icon{width:48px;height:48px;font-size:23px} :root body .portal-stat{min-height:96px;padding:15px 16px} :root body .portal-stat>strong{font-size:23px} :root body .portal-link-card{padding:16px} :root body .portal-content-layout{gap:20px} :root body .design-picker{flex-wrap:wrap} } @media(prefers-reduced-motion:reduce){:root body *,:root body *::before,:root body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* DESIGN D: Reading layout */ :root body.design-d{--sidebar:224px;--top:66px;background:#fff;color:#202a34;font-size:17px;line-height:1.65} :root body.design-d .app-shell,:root body.design-d main{background:#fff} :root body.design-d .sidebar{background:#fff;border-right:1px solid #e1e5e9} :root body.design-d .sidebar nav a,:root body.design-d .side-bottom a{min-height:46px;height:auto;padding:10px 12px;font-size:16px;line-height:1.4} :root body.design-d .sidebar nav .nav-group-label{padding:4px 12px;background:#f1f3f5;color:#43505d;font-size:16px;letter-spacing:0} :root body.design-d .topbar{background:#fff;border-bottom:1px solid #e1e5e9;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} :root body.design-d .top-search{background:#f6f7f8;border:1px solid #cbd2d9;box-shadow:none} :root body.design-d .top-actions button{color:#243342} :root body.design-d main{padding-top:calc(var(--top) + 24px);padding-bottom:64px} :root body.design-d .page-title h1,:root body.design-d .page-hero h1,:root body.design-d .dept-banner h1,:root body.design-d .portal-hero h1{font-size:34px;line-height:1.2;font-weight:650} :root body.design-d .page-title p,:root body.design-d .page-hero p,:root body.design-d .dept-banner p,:root body.design-d .portal-hero p{max-width:72ch;font-size:17px;line-height:1.65;color:#4c5966} :root body.design-d .section-head.big{margin:30px 0 12px} :root body.design-d .section-head.big h2,:root body.design-d .portal-section-head h2{font-size:23px;line-height:1.35;font-weight:650} :root body.design-d .home-columns,:root body.design-d .feature-grid.three,:root body.design-d .people-grid,:root body.design-d .service-actions,:root body.design-d .quick-links,:root body.design-d .ops-grid,:root body.design-d .split.two-thirds,:root body.design-d .course-grid,:root body.design-d .recommended,:root body.design-d .category-row{grid-template-columns:minmax(0,1fr);gap:0} :root body.design-d .filter-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:16px 0} :root body.design-d .filter-row button{width:100%;min-width:0;min-height:44px;height:auto;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #cbd2d9;border-radius:4px;background:#fff;color:#243342;text-align:left} :root body.design-d .filter-row span{display:none} :root body.design-d .portal-content-layout{grid-template-columns:minmax(0,1fr);gap:24px} :root body.design-d .portal-stats,:root body.design-d .portal-item-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0!important} :root body.design-d .portal-stats>[class*="col-"],:root body.design-d .portal-item-grid>[class*="col-"]{width:100%;max-width:none} :root body.design-d .card,:root body.design-d .article-card,:root body.design-d .person-card,:root body.design-d .service-actions a,:root body.design-d .quick-links a,:root body.design-d .course-grid article,:root body.design-d .recommended a,:root body.design-d .category-row a,:root body.design-d .quick-actions a,:root body.design-d .portal-stat,:root body.design-d .portal-link-card,:root body.design-d .portal-guide,:root body.design-d .training-certification,:root body.design-d .event-detail,:root body.design-d .announcement-item{min-width:0;height:auto;min-height:0;padding:18px 0;background:transparent;border:0;border-bottom:1px solid #dce1e5;border-radius:0;box-shadow:none;transform:none;transition:none} :root body.design-d .home-columns .card{padding:20px 0} :root body.design-d .article-card{overflow:visible} :root body.design-d .article-card .thumb,:root body.design-d .announcement-art{display:none} :root body.design-d .article-card h3{margin:0 0 8px;padding:0;font-size:19px} :root body.design-d .article-card .lines{padding:0} :root body.design-d .person-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"portrait name mail" "portrait role department" "portrait skills skills";align-items:center;column-gap:14px;row-gap:2px} :root body.design-d .person-card .portrait{grid-area:portrait;float:none;margin:0} :root body.design-d .person-card .fake-name{grid-area:name;min-width:0;padding:0;font-weight:700} :root body.design-d .person-card h3{grid-area:role;clear:none;margin:0;font-size:15px} :root body.design-d .person-card .pill{grid-area:department;justify-self:end} :root body.design-d .person-card .skills{grid-area:skills;margin:0;font-size:14px} :root body.design-d .person-card .mail{grid-area:mail;position:static;min-width:40px;min-height:40px} :root body.design-d .service-actions a,:root body.design-d .quick-links a,:root body.design-d .recommended a,:root body.design-d .category-row a,:root body.design-d .quick-actions a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;text-align:left;font-size:16px} :root body.design-d .service-actions .bigicon,:root body.design-d .cat-icon,:root body.design-d .sq,:root body.design-d .portal-item-icon{width:30px;height:30px;flex:none;background:transparent;border:0;border-radius:0;color:#43586c;font-size:18px} :root body.design-d .service-actions i,:root body.design-d .recommended a i{position:static;margin-left:auto;color:#1769a6} :root body.design-d .portal-item-copy{min-width:0} :root body.design-d .portal-item-copy h3{font-size:19px;line-height:1.35} :root body.design-d .portal-item-copy p,:root body.design-d .portal-guide p{max-width:75ch;font-size:16px;line-height:1.65;color:#4c5966} :root body.design-d .portal-guide{border-top:1px solid #dce1e5} :root body.design-d .portal-related-links a,:root body.design-d .portal-item-copy a{display:flex;align-items:center;gap:8px;min-height:44px;font-size:16px} :root body.design-d .portal-hero,:root body.design-d .page-hero,:root body.design-d .dept-banner,:root body.design-d .calendar-feature{padding:24px 0;background:#fff;border:0;border-bottom:1px solid #dce1e5;border-radius:0} :root body.design-d .portal-hero{border-left:0} :root body.design-d .portal-hero-icon{background:transparent;border:0;border-radius:0;color:#43586c} :root body.design-d .event-detail{grid-template-columns:72px minmax(0,1fr) auto;gap:16px} :root body.design-d .announcement-copy{padding:0} :root body.design-d .announcement-copy p,:root body.design-d .event-detail-copy p{max-width:75ch;font-size:16px;line-height:1.65;color:#4c5966} :root body.design-d .announcement-kicker,:root body.design-d .announcement-byline{font-size:14px} :root body.design-d .announcement-byline{margin-top:8px} :root body.design-d .event-action,:root body.design-d .section-head a,:root body.design-d .home-more{font-size:15px;font-weight:700} :root body.design-d .icon-list li,:root body.design-d .link-list li,:root body.design-d .resource-list li{min-height:48px;height:auto;font-size:16px} :root body.design-d .icon-list li>span{width:24px;flex:none;color:#43586c} :root body.design-d .quick-actions{margin:8px 0 18px;padding:0;grid-template-columns:minmax(0,1fr)} :root body.design-d .quick-actions a{box-shadow:none} :root body.design-d .tabs{gap:24px;overflow-x:auto;white-space:nowrap} :root body.design-d .tabs a{min-height:48px;font-size:15px} /* Design 2: extend the white canvas to the viewport while retaining the existing content inset. */ :root body.design-b .app-shell>main.container-fluid{width:100%;max-width:none;margin:0;padding-left:0;padding-right:0;background:#fff} :root body.design-b.width-container .app-shell>main.container-fluid>*{margin-left:max(calc(var(--sidebar) + 28px),calc((100% - var(--container-width) + var(--sidebar))/2 + 28px));margin-right:calc(28px + max(0px,(100% - var(--sidebar) - var(--container-width))/2))} :root body.design-b.width-full .app-shell>main.container-fluid>*{margin-left:calc(var(--sidebar) + 28px);margin-right:28px} @media(max-width:900px){ :root body.design-b .app-shell>main.container-fluid{margin:0!important;padding-left:0!important;padding-right:0!important} :root body.design-b.width-container .app-shell>main.container-fluid>*,:root body.design-b.width-full .app-shell>main.container-fluid>*{margin-left:14px!important;margin-right:14px!important} :root body.design-b .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0} } /* Design 2: use a continuous, square-cornered canvas with consistent page headings. */ :root body.design-b .sidebar{border-right:1px solid rgba(255,255,255,.16)} :root body.design-b .app-shell>main.container-fluid{background:#fff} :root body.design-b .app-shell>main.container-fluid>*{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important} :root body.design-b main .page-title,:root body.design-b main .page-hero:not(.home-hero),:root body.design-b main .dept-banner,:root body.design-b main .portal-hero{min-height:0;padding:24px 28px;background:#f5f7fa;border:0;border-bottom:1px solid #e9edf1;border-radius:0;box-shadow:none} :root body.design-b main .page-title h1,:root body.design-b main .page-hero h1,:root body.design-b main .dept-banner h1,:root body.design-b main .portal-hero h1{margin:0 0 6px;font-size:34px;line-height:1.2;font-weight:650} :root body.design-b main .page-title p,:root body.design-b main .page-hero p,:root body.design-b main .dept-banner p,:root body.design-b main .portal-hero p{margin:0;font-size:16px;line-height:1.5;color:#647386} :root body.design-b main .portal-breadcrumb{padding:14px 28px;margin:0!important;background:#fff;border-bottom:1px solid #e9edf1} :root body.design-b main .home-hero{min-height:188px;height:188px;padding:30px 36px;background:linear-gradient(115deg,#285b7c,#244969);border:0;border-radius:0} :root body.design-b main .news-highlight,:root body.design-b main .calendar-feature{border:0;border-radius:0;box-shadow:none} :root body.design-b main .section-head.big{margin:0!important;padding:20px 28px 12px} :root body.design-b main .home-columns,:root body.design-b main .category-row,:root body.design-b main .feature-grid,:root body.design-b main .people-grid,:root body.design-b main .service-actions,:root body.design-b main .quick-links,:root body.design-b main .ops-grid,:root body.design-b main .split,:root body.design-b main .course-grid,:root body.design-b main .recommended,:root body.design-b main .portal-content-layout{gap:0!important} :root body.design-b main .announcement-list,:root body.design-b main .event-list,:root body.design-b main .training-certification-grid{gap:0!important} :root body.design-b main .portal-content-layout{grid-template-columns:minmax(0,1.8fr) minmax(250px,.8fr)} :root body.design-b main .portal-stats.row,:root body.design-b main .portal-item-grid.row,:root body.design-b main .announcement-list.row,:root body.design-b main .event-list.row{--bs-gutter-x:0;--bs-gutter-y:0} :root body.design-b main .training-certification-grid.row{--bs-gutter-x:0;--bs-gutter-y:0} :root body.design-b main .card,:root body.design-b main .article-card,:root body.design-b main .person-card,:root body.design-b main .service-actions a,:root body.design-b main .quick-links a,:root body.design-b main .course-grid article,:root body.design-b main .recommended a,:root body.design-b main .category-row a,:root body.design-b main .portal-stat,:root body.design-b main .portal-link-card,:root body.design-b main .portal-guide,:root body.design-b main .event-detail,:root body.design-b main .announcement-item,:root body.design-b main .training-certification{min-width:0;border:0;border-radius:0;box-shadow:none;transform:none} :root body.design-b main .card,:root body.design-b main .article-card,:root body.design-b main .person-card,:root body.design-b main .service-actions a,:root body.design-b main .quick-links a,:root body.design-b main .course-grid article,:root body.design-b main .recommended a,:root body.design-b main .category-row a,:root body.design-b main .portal-stat,:root body.design-b main .portal-link-card,:root body.design-b main .portal-guide,:root body.design-b main .event-detail,:root body.design-b main .announcement-item,:root body.design-b main .training-certification{padding:20px} :root body.design-b main .portal-guide{background:#f5f7fa;border-top:0} :root body.design-b main .portal-item-icon,:root body.design-b main .cat-icon,:root body.design-b main .sq{border-radius:0} :root body.design-b main .quick-actions{gap:0!important;padding:0;margin:0!important} :root body.design-b main .quick-actions a{height:96px;padding:14px;border-radius:0!important;box-shadow:none;border:0;border-right:1px solid #e9edf1;border-bottom:1px solid #e9edf1} :root body.design-b main .quick-actions a:last-child{border-right:0} :root body.design-b main .tabs{margin:0!important;border:0} :root body.design-b main .tabs a{border:0;border-radius:0} :root body.design-b main .tabs a.active{color:#1769d2;font-weight:700} :root body.design-b main .page-title,:root body.design-b main .page-hero:not(.home-hero),:root body.design-b main .dept-banner,:root body.design-b main .portal-hero{border-bottom:0} :root body.design-b main .portal-breadcrumb{margin-top:0!important;margin-bottom:0!important;border-bottom:0} :root body.design-b main .inner-search.wide{width:auto;max-width:none} :root body.design-b main .quick-actions a{border:0} :root body.design-b main .inner-search,:root body.design-b main .hero-search,:root body.design-b main .filter-row button{border:0;border-radius:0;background:#f3f5f7;box-shadow:none} :root body.design-b main .announcement-byline,:root body.design-b main .portal-related-links,:root body.design-b main .portal-hero-icon{border:0} :root body.design-b .sidebar nav a,:root body.design-b .side-bottom a,:root body.design-b .sidebar nav .nav-group-label,:root body.design-b .top-search,:root body.design-b .top-actions button,:root body.design-b .user-avatar,:root body.design-b .design-picker,:root body.design-b .design-picker button,:root body.design-b .design-picker .width-picker button{border-radius:0} :root body.design-b .sidebar nav .nav-group-label{background:transparent} :root body.design-b .topbar{border-bottom:0;box-shadow:none} :root body.design-b .design-picker{box-shadow:none} :root body.design-b main .portal-hero-icon,:root body.design-b main .portal-item-icon,:root body.design-b main .cat-icon,:root body.design-b main .sq,:root body.design-b main .event-date,:root body.design-b main .pill{border-radius:0} :root body.design-b main .icon-list li,:root body.design-b main .link-list li,:root body.design-b main .resource-list li{border:0} @media(max-width:900px){ :root body.design-b main .page-title,:root body.design-b main .page-hero:not(.home-hero),:root body.design-b main .dept-banner,:root body.design-b main .portal-hero{padding:22px 18px} :root body.design-b main .section-head.big{padding:18px} :root body.design-b main .portal-content-layout{grid-template-columns:1fr} :root body.design-b main .portal-guide{order:-1} :root body.design-b main .home-columns,:root body.design-b main .people-grid,:root body.design-b main .feature-grid.three,:root body.design-b main .service-actions,:root body.design-b main .course-grid,:root body.design-b main .recommended,:root body.design-b main .quick-links,:root body.design-b main .ops-grid,:root body.design-b main .split.two-thirds{grid-template-columns:1fr} :root body.design-b main .category-row{grid-template-columns:repeat(2,minmax(0,1fr))} } :root body.design-d .design-picker{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} @media(max-width:640px){ :root body.design-d .person-card{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;padding:16px 0} :root body.design-d .person-card .portrait{width:44px;height:44px} :root body.design-d .event-detail{grid-template-columns:54px minmax(0,1fr);gap:10px} :root body.design-d .event-action{grid-column:2;justify-self:start} :root body.design-d .calendar-feature{align-items:flex-start;gap:12px} :root body.design-d .calendar-stat{min-width:76px} :root body.design-d .page-title h1,:root body.design-d .page-hero h1,:root body.design-d .dept-banner h1,:root body.design-d .portal-hero h1{font-size:30px} } /* Design 2 separators override the flat base reset; borders add no gutters. */ :root body.design-b{--design-b-separator:rgba(83,105,130,.24)} :root body.design-b main .page-title,:root body.design-b main .page-hero:not(.home-hero),:root body.design-b main .dept-banner,:root body.design-b main .portal-hero{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-breadcrumb{border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .card,:root body.design-b main .article-card,:root body.design-b main .person-card,:root body.design-b main .service-actions a,:root body.design-b main .quick-links a,:root body.design-b main .course-grid article,:root body.design-b main .recommended a,:root body.design-b main .category-row a,:root body.design-b main .portal-stat,:root body.design-b main .portal-link-card,:root body.design-b main .portal-guide,:root body.design-b main .event-detail,:root body.design-b main .announcement-item,:root body.design-b main .training-certification{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-hero-icon,:root body.design-b main .portal-related-links,:root body.design-b main .announcement-byline{border:1px solid var(--design-b-separator)} :root body.design-b main .portal-guide{border-left:1px solid var(--design-b-separator)} :root body.design-b main .quick-actions a{border:1px solid var(--design-b-separator)} :root body.design-b main .inner-search.wide,:root body.design-b main .filter-row button{border:1px solid var(--design-b-separator)} :root body.design-b main .filter-row{gap:0} :root body.design-b main .filter-row button{background:#fff} :root body.design-b main .results-label{border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .tabs{border-bottom:1px solid var(--design-b-separator)} :root body.design-b main .tabs a.active{box-shadow:inset 0 -2px #1769d2} :root body.design-b main .icon-list li,:root body.design-b main .link-list li,:root body.design-b main .resource-list li{border-bottom:1px solid var(--design-b-separator)} :root body.design-b .top-search,:root body.design-b .topbar{border-color:var(--design-b-separator)} @media(min-width:641px) and (max-width:900px){:root body.design-b main .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Design 2 enterprise shell and People Directory. */ :root body.design-b .top-actions{display:none!important} :root body.design-b .top-search{width:min(640px,calc(100% - 40px));max-width:640px;flex:1;margin-right:auto} :root body.design-b .top-search input{font-size:15px} :root body.design-b .directory-toolbar{display:grid;grid-template-columns:minmax(200px,240px) minmax(160px,190px) minmax(0,1fr);align-items:stretch;border:1px solid var(--design-b-separator)} :root body.design-b .directory-control{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px;border-right:1px solid var(--design-b-separator);font-size:13px;font-weight:600;color:#526174} :root body.design-b .directory-control select{width:100%;min-width:0;min-height:34px;padding:4px 24px 4px 0;border:0;border-radius:0;background:transparent;color:#263548;font:inherit} :root body.design-b .directory-results{display:flex;align-items:center;justify-content:flex-end;padding:10px 16px;font-size:13px;color:#617084} :root body.design-b .directory-table-wrap{width:auto;max-width:none;overflow:visible} :root body.design-b .directory-table{width:100%;border-collapse:collapse;border:1px solid var(--design-b-separator);font-size:14px} :root body.design-b .directory-table th{padding:12px 16px;background:#f5f7f9;border-bottom:1px solid var(--design-b-separator);color:#536174;text-align:left;font-size:12px;font-weight:700} :root body.design-b .directory-table td{padding:14px 16px;border-bottom:1px solid var(--design-b-separator);color:#455366;vertical-align:middle} :root body.design-b .directory-table tbody tr:last-child td{border-bottom:0} :root body.design-b .directory-table tbody tr:hover{background:#f7f9fb} :root body.design-b .directory-table td strong{color:#1d2938;font-weight:650} :root body.design-b .directory-table .directory-contact{width:48px;text-align:center} :root body.design-b .directory-contact a{display:inline-grid;width:34px;height:34px;place-items:center;color:#1769d2;text-decoration:none} :root body.design-b .directory-contact a:hover{background:#edf4ff} :root body.design-b .directory-empty{padding:24px!important;text-align:center;color:#69778a!important} :root body.design-b .app-shell{background:#fff} :root body.design-b .app-shell>main{min-height:100vh} @media(max-width:900px){ :root body.design-b .directory-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :root body.design-b .directory-results{grid-column:1/-1;justify-content:flex-start;border-top:1px solid var(--design-b-separator)} } @media(max-width:640px){ :root body.design-b .top-search{width:auto;max-width:none} :root body.design-b .directory-toolbar{grid-template-columns:minmax(0,1fr)} :root body.design-b .directory-control{min-height:50px;border-right:0;border-bottom:1px solid var(--design-b-separator)} :root body.design-b .directory-results{grid-column:auto;border-top:0} :root body.design-b .directory-table,:root body.design-b .directory-table tbody,:root body.design-b .directory-table tr,:root body.design-b .directory-table td{display:block;width:100%} :root body.design-b .directory-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root body.design-b .directory-table tr{display:grid;grid-template-columns:minmax(0,1fr) 40px;padding:12px 14px;border-bottom:1px solid var(--design-b-separator)} :root body.design-b .directory-table td{width:auto;padding:3px 0;border:0;font-size:13px} :root body.design-b .directory-table td[data-label]:not([data-label="Name"])::before{content:attr(data-label) ": ";color:#778496;font-size:12px} :root body.design-b .directory-table .directory-contact{grid-column:2;grid-row:1/5;align-self:start;justify-self:end} :root body.design-b .directory-table .directory-contact a{width:36px;height:36px} } /* Design 2 top navigation: same theme; sidebar destinations move into a two-tier header. */ .topbar-brand,.topbar-utility{display:none} :root body:not(.design-b) .design-picker .nav-picker{display:none!important} :root body.design-b.nav-top{--sidebar:0px;--nav-row:48px;--header-inset:28px} :root body.design-b.nav-top .sidebar{display:none} @media(min-width:901px){ :root body.design-b.nav-top.width-container{--header-inset:max(28px,calc((100% - var(--container-width))/2 + 28px))} :root body.design-b.nav-top .topbar,:root body.design-b.nav-top.width-container .topbar,:root body.design-b.nav-top.width-full .topbar{left:0;right:0;width:auto;gap:32px;padding:0 var(--header-inset);background:linear-gradient(180deg,#0e3c69,#0b3560);color:#fff;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} :root body.design-b.nav-top .topbar-brand{display:flex;align-items:center;gap:10px;flex:none;height:40px;color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em} :root body.design-b.nav-top .topbar-brand:hover{color:#fff} :root body.design-b.nav-top .top-search{width:auto;max-width:560px;flex:1;margin-right:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.78);transition:background-color .18s cubic-bezier(.16,1,.3,1),border-color .18s cubic-bezier(.16,1,.3,1)} :root body.design-b.nav-top .top-search input{color:#fff} :root body.design-b.nav-top .top-search input::placeholder{color:rgba(255,255,255,.74)} :root body.design-b.nav-top .top-search:hover{background:rgba(255,255,255,.14)} :root body.design-b.nav-top .top-search:focus-within{background:#fff;border-color:#fff;color:#5d6c82;box-shadow:none} :root body.design-b.nav-top .top-search:focus-within input{color:var(--text)} :root body.design-b.nav-top .top-search:focus-within input::placeholder{color:#5d6c82} :root body.design-b.nav-top .topbar-utility{display:flex;align-items:center;gap:2px;flex:none;margin-right:-12px} :root body.design-b.nav-top .topbar-utility a{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;transition:background-color .18s cubic-bezier(.16,1,.3,1)} :root body.design-b.nav-top .topbar-utility a:hover{background:rgba(255,255,255,.1);color:#fff} :root body.design-b.nav-top .topbar-utility .bi{font-size:15px;opacity:.85} :root body.design-b.nav-top .topbar a:focus-visible,:root body.design-b.nav-top .top-search input:focus-visible{outline-color:rgba(255,255,255,.7)} :root body.design-b.nav-top .topbar .top-nav{position:fixed;left:0;right:0;top:var(--top);height:var(--nav-row);display:flex;align-items:stretch;gap:4px;padding:0 calc(var(--header-inset) - 12px);overflow-x:auto;white-space:nowrap;background:#fff;border-bottom:1px solid var(--design-b-separator);scrollbar-width:none;z-index:7} :root body.design-b.nav-top .topbar .top-nav::-webkit-scrollbar{display:none} :root body.design-b.nav-top .topbar .top-nav a{display:flex;align-items:center;flex:none;height:auto;padding:0 12px;border:0;color:#30445f;font-size:15px;font-weight:500;opacity:1;transition:color .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1)} :root body.design-b.nav-top .topbar .top-nav a:hover{color:#1769d2;box-shadow:inset 0 -2px rgba(23,105,210,.28)} :root body.design-b.nav-top .topbar .top-nav a.active{color:#1769d2;font-weight:650;box-shadow:inset 0 -2px #1769d2} :root body.design-b.width-container .app-shell>main.container-fluid>.portal-breadcrumb,:root body.design-b.width-container .app-shell>main.container-fluid>.tabs{margin-left:max(calc(var(--sidebar) + 28px),calc((100% - var(--container-width) + var(--sidebar))/2 + 28px))!important;margin-right:calc(28px + max(0px,(100% - var(--sidebar) - var(--container-width))/2))!important} :root body.design-b.width-full .app-shell>main.container-fluid>.portal-breadcrumb,:root body.design-b.width-full .app-shell>main.container-fluid>.tabs{margin-left:calc(var(--sidebar) + 28px)!important;margin-right:28px!important} :root body.design-b.nav-top .topbar .top-nav a:focus-visible{outline-offset:-3px;outline-color:rgba(36,112,213,.55)} :root body.design-b.nav-top.width-container .app-shell>main.container-fluid,:root body.design-b.nav-top.width-full .app-shell>main.container-fluid{padding-top:calc(var(--top) + var(--nav-row) + 18px)!important} } /* Repositories: standalone directory, department hub panels, and nav group. */ :root body .sidebar nav .nav-group-divided{padding-top:14px;border-top:1px solid var(--line)} :root body.design-b .sidebar nav .nav-group-divided{border-top-color:var(--design-b-separator)} :root body .repo-toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0 0 14px} :root body .repo-search{flex:1 1 360px;min-width:0;display:flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:0 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:border-color .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1)} :root body .repo-search:focus-within{border-color:#1769d2;box-shadow:0 0 0 3px rgba(23,105,210,.14)} :root body .repo-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:15px} :root body .repo-search input::placeholder{color:#5d6c82} :root body .repo-search input:focus-visible{outline:0} :root body .repo-views{flex:none;display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)} :root body .repo-views button{min-height:44px;padding:0 16px;border:0;background:transparent;color:#3e4b5d;font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .18s cubic-bezier(.16,1,.3,1),color .18s cubic-bezier(.16,1,.3,1)} :root body .repo-views button+button{border-left:1px solid var(--line)} :root body .repo-views button:hover{background:#f0f4f9} :root body .repo-views button.selected{background:#1769d2;color:#fff} :root body .repo-views button:focus-visible{outline-offset:-3px} :root body .repo-status{margin:0 0 12px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums} :root body .repo-loading{color:var(--muted)} :root body .repo-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} :root body .repo-index a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;background:var(--panel);border:1px solid var(--line);border-radius:999px;color:#30445f;font-size:14px;font-weight:550;transition:border-color .18s cubic-bezier(.16,1,.3,1),color .18s cubic-bezier(.16,1,.3,1)} :root body .repo-index a span{color:#5d6c82;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums} :root body .repo-index a:hover{border-color:#1769d2;color:#1769d2} :root body .repo-index a[aria-current]{background:#e9f2ff;border-color:#1769d2;color:#1769d2;font-weight:650} :root body .repo-group{scroll-margin-top:calc(var(--top) + var(--nav-row,0px) + 20px);margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} :root body .repo-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)} :root body .repo-group-head h2{margin:0;font-size:18px;font-weight:650;line-height:1.3} :root body .repo-group-head span{color:var(--muted);font-size:13px;white-space:nowrap} :root body .repo-list{container-type:inline-size;margin:0;padding:0;list-style:none} :root body .repo-row{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(190px,230px) minmax(130px,170px);align-items:start;gap:4px 18px;padding:15px 20px;border-top:1px solid var(--line)} :root body .repo-row:first-child{border-top:0} :root body .repo-type-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#eef4fb;color:#1769d2;font-size:16px} :root body .repo-row.is-restricted .repo-type-icon{background:#f4f1ea;color:#7a5a1e} :root body .repo-name{display:inline;color:var(--text);font-size:15.5px;font-weight:650;line-height:1.35} :root body .repo-name .bi{margin-left:6px;color:#5d6c82;font-size:11px;vertical-align:1px} :root body .repo-name:hover{color:#1769d2;text-decoration:underline;text-underline-offset:3px} :root body .repo-main p{max-width:68ch;margin:3px 0 0;color:#5d6c82;font-size:14px;line-height:1.5} :root body .repo-facts{display:grid;gap:3px;padding-top:2px;color:#5d6c82;font-size:13px;line-height:1.45} :root body .repo-meta{color:#30445f;font-weight:600} :root body .repo-owner a,:root body .repo-table td[data-label="Owner"] a,:root body .repo-request{color:#1769d2;font-weight:600} :root body .repo-owner a:hover,:root body .repo-table td[data-label="Owner"] a:hover,:root body .repo-request:hover{text-decoration:underline;text-underline-offset:3px} :root body .repo-access{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-top:2px;font-size:13px} :root body .repo-row .repo-open{display:none} :root body .repo-open{color:#5d6c82} :root body .repo-restricted{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:#fbf1de;color:#7a4a00;font-size:12px;font-weight:700;letter-spacing:.01em} :root body .repo-restricted .bi{font-size:11px} @container (max-width:760px){ :root body .repo-row{grid-template-columns:36px minmax(0,1fr)} :root body .repo-facts,:root body .repo-access{grid-column:2} :root body .repo-facts{display:flex;flex-wrap:wrap;gap:2px 16px;padding-top:6px} :root body .repo-access{flex-direction:row;align-items:center;gap:12px;padding-top:4px} :root body .repo-access:not(:has(.repo-restricted)){display:none} } :root body .repo-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0} :root body .repo-filters label{display:grid;gap:1px;min-width:0;margin:0;padding:8px 14px;color:#5d6c82;font-size:12px;font-weight:600} :root body .repo-filters label+label{border-left:1px solid var(--line)} :root body .repo-filters select{width:100%;min-width:0;min-height:30px;padding:2px 0;border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer} :root body .repo-table-wrap{background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);overflow:hidden} :root body .repo-table{width:100%;border-collapse:collapse;font-size:14px} :root body .repo-table th{padding:11px 16px;background:#f5f7f9;border-bottom:1px solid var(--line);color:#536174;font-size:12px;font-weight:700;text-align:left;white-space:nowrap} :root body .repo-table td{padding:13px 16px;border-bottom:1px solid var(--line);color:#455366;vertical-align:top} :root body .repo-table tbody tr:last-child td{border-bottom:0} :root body .repo-table tbody tr:hover{background:#f7f9fb} :root body .repo-table td:first-child{min-width:240px} :root body .repo-purpose{display:block;max-width:52ch;margin-top:3px;color:#5d6c82;font-size:13px;line-height:1.45} :root body .repo-type{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} :root body .repo-type .bi{color:#1769d2} :root body .repo-table td.repo-access{display:table-cell} :root body .repo-table td.repo-access .repo-request{display:block;margin-top:5px} :root body .repo-empty{padding:44px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-align:center} :root body .repo-empty h2{margin:0 0 6px;font-size:19px;font-weight:650} :root body .repo-empty p{max-width:56ch;margin:0 auto 18px;color:#5d6c82;font-size:14.5px;line-height:1.55} :root body .repo-empty code{color:#30445f;font-size:13px} :root body .repo-clear{min-height:40px;padding:0 18px;background:transparent;border:1px solid #1769d2;border-radius:8px;color:#1769d2;font-size:14px;font-weight:650;transition:background-color .18s cubic-bezier(.16,1,.3,1)} :root body .repo-clear:hover{background:#e9f2ff} :root body .repo-sample-note{margin:16px 0 0;color:#5d6c82;font-size:12.5px} :root body .repo-panel{margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} :root body .repo-panel .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:16px 20px;border-bottom:1px solid var(--line)} :root body .repo-panel .section-head h2{margin:0} :root body .repo-panel .section-head a{color:#1769d2;font-size:14px;font-weight:600;white-space:nowrap} :root body .repo-panel-empty{margin:0;padding:18px 20px;color:#5d6c82} @media(max-width:900px){ :root body .repo-group{scroll-margin-top:calc(var(--top) + 66px)} :root body .repo-filters{grid-template-columns:repeat(2,minmax(0,1fr))} :root body .repo-filters label:nth-child(3){border-left:0} :root body .repo-filters label:nth-child(n+3){border-top:1px solid var(--line)} } @media(max-width:640px){ :root body .repo-toolbar{flex-direction:column} :root body .repo-search{flex-basis:auto} :root body .repo-views button{flex:1} :root body .repo-group-head{padding:14px 16px} :root body .repo-row{padding:14px 16px;column-gap:14px} :root body .repo-filters{grid-template-columns:minmax(0,1fr)} :root body .repo-filters label+label{border-left:0;border-top:1px solid var(--line)} :root body .repo-table,:root body .repo-table tbody,:root body .repo-table tr,:root body .repo-table td{display:block;width:100%} :root body .repo-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root body .repo-table tr{padding:12px 16px;border-bottom:1px solid var(--line)} :root body .repo-table tbody tr:last-child{border-bottom:0} :root body .repo-table td,:root body .repo-table td.repo-access{display:block;min-width:0!important;padding:2px 0;border:0;font-size:13px} :root body .repo-table td[data-label]:not([data-label="Name"]):not([data-label="Access"])::before{content:attr(data-label) ": ";color:#5d6c82} :root body .repo-table td[data-label="Name"]{padding-bottom:6px} :root body .repo-table td.repo-access .repo-open{display:none} } /* Design 2: flush square surfaces divided by faint separators. */ :root body.design-b main .repo-toolbar{gap:0;border:1px solid var(--design-b-separator);border-top:0} :root body.design-b main .repo-search{border:0;border-radius:0;background:#fff;box-shadow:none} :root body.design-b main .repo-search:focus-within{box-shadow:inset 0 -2px #1769d2} :root body.design-b main .repo-views{border:0;border-left:1px solid var(--design-b-separator);border-radius:0} :root body.design-b main .repo-views button+button{border-left-color:var(--design-b-separator)} :root body.design-b main .repo-status{margin:0;padding:10px 20px;border:1px solid var(--design-b-separator);border-top:0;background:#f5f7fa} :root body.design-b main .repo-index{gap:0;margin:0;border:1px solid var(--design-b-separator);border-top:0} :root body.design-b main .repo-index a{min-height:44px;padding:0 18px;border:0;border-right:1px solid var(--design-b-separator);border-radius:0;background:#fff} :root body.design-b main .repo-index a:hover{background:#f7f9fb} :root body.design-b main .repo-index a[aria-current]{background:#fff;box-shadow:inset 0 -2px #1769d2} :root body.design-b main .repo-group{margin:0;border:1px solid var(--design-b-separator);border-top:0;border-radius:0} :root body.design-b main .repo-group-head{padding:14px 20px;background:#f5f7fa;border-bottom-color:var(--design-b-separator)} :root body.design-b main .repo-row{border-top-color:var(--design-b-separator)} :root body.design-b main .repo-type-icon,:root body.design-b main .repo-restricted{border-radius:0} :root body.design-b main .repo-filters{border:1px solid var(--design-b-separator);border-top:0;border-radius:0} :root body.design-b main .repo-filters label+label{border-color:var(--design-b-separator)} :root body.design-b main .repo-table-wrap{border-color:var(--design-b-separator);border-radius:0} :root body.design-b main .repo-table th,:root body.design-b main .repo-table td,:root body.design-b main .repo-table tr{border-color:var(--design-b-separator)} :root body.design-b main .repo-empty{border:1px solid var(--design-b-separator);border-top:0;border-radius:0} :root body.design-b main .repo-clear{border-radius:0} :root body.design-b main .repo-sample-note{margin:0;padding:14px 0 32px} :root body.design-b main .repo-panel{margin-top:0;border:1px solid var(--design-b-separator);border-radius:0} :root body.design-b main .repo-panel .section-head{background:#f5f7fa;border-bottom-color:var(--design-b-separator)} @media(max-width:900px){ :root body.design-b main .repo-filters label:nth-child(n+3){border-top-color:var(--design-b-separator)} } @media(max-width:640px){ :root body.design-b main .repo-views{border-left:0;border-top:1px solid var(--design-b-separator)} :root body.design-b main .repo-index a{flex:1 1 50%;justify-content:space-between;border-bottom:1px solid var(--design-b-separator)} } /* ==== Site-wide page system (overhaul) ==== */ :root{--accent:#1769d2;--accent-soft:#e9f2ff;--ink-2:#30445f;--ink-3:#5d6c82;--ease:cubic-bezier(.16,1,.3,1)} :root body ::selection{background:#cfe2ff;color:#071b3a} :root body .skip-link{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;background:#071b3a;color:#fff;font-weight:650;border-radius:6px;transition:top .2s var(--ease)} :root body .skip-link:focus{top:12px} :root body main{scroll-margin-top:calc(var(--top) + 20px)} :root body .is-targeted{animation:target-flash 2.4s var(--ease) 1} @keyframes target-flash{0%,30%{background:#fff6d6}100%{background:transparent}} /* Header search + suggestions */ :root body .top-search{position:relative;margin:0} :root body .top-search>.bi-search{color:#6b7a8d;font-size:14px} :root body .top-search input{min-width:0;height:100%} :root body .top-search input::-webkit-search-cancel-button{cursor:pointer} :root body .search-popover{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;max-height:min(70vh,520px);overflow:auto;padding:6px;background:#fff;border:1px solid #d7dee7;border-radius:10px;box-shadow:0 18px 40px rgba(15,35,60,.18),0 2px 6px rgba(15,35,60,.08);color:var(--text);text-align:left} :root body .search-group+.search-group{margin-top:4px;padding-top:4px;border-top:1px solid #edf1f5} :root body .search-group-label{padding:8px 10px 4px;color:var(--ink-3);font-size:12px;font-weight:700} :root body .search-group-label span{margin-left:4px;padding:0 6px;border-radius:999px;background:#eef2f6;font-variant-numeric:tabular-nums} :root body .search-option,:root body .search-all{display:flex;align-items:center;gap:12px;min-height:46px;padding:7px 10px;border-radius:7px;color:var(--text)} :root body .search-option[aria-selected="true"],:root body .search-option:hover,:root body .search-all[aria-selected="true"],:root body .search-all:hover{background:var(--accent-soft)} :root body .search-option-icon{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:7px;background:#f0f4f8;color:var(--accent);font-size:14px} :root body .search-option-copy{display:grid;min-width:0} :root body .search-option-copy strong{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap} :root body .search-option-copy span{overflow:hidden;color:var(--ink-3);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap} :root body .search-popover mark,:root body .search-results mark{padding:0;background:transparent;color:inherit;text-decoration:underline;text-decoration-color:#79a8e6;text-decoration-thickness:2px;text-underline-offset:2px} :root body .search-all{margin-top:4px;border-top:1px solid #edf1f5;border-radius:0 0 7px 7px;color:var(--accent);font-size:13.5px;font-weight:650} :root body .search-none{margin:0;padding:12px 10px;color:var(--ink-3);font-size:14px} /* Page title actions and buttons */ :root body .page-title-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} :root body .action{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:650;line-height:1.2;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)} :root body .action:hover{background:#0f57b3;border-color:#0f57b3;color:#fff} :root body .action.secondary{background:#fff;border-color:#c9d5e3;color:var(--ink-2)} :root body .action.secondary:hover{border-color:var(--accent);color:var(--accent);background:#fff} /* Panels and layouts */ :root body .panel{min-width:0;margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} :root body .panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} :root body .panel-head h2{margin:0;font-size:18px;font-weight:650;line-height:1.3} :root body .panel-head>a{flex:none;color:var(--accent);font-size:14px;font-weight:600} :root body .panel-head>a:hover{text-decoration:underline;text-underline-offset:3px} :root body .panel-head.stacked{display:block} :root body .panel-head.stacked p{margin:4px 0 0;color:var(--ink-3);font-size:14px} :root body .panel-note{flex:none;color:var(--ink-3);font-size:12.5px} :root body .split-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:18px;align-items:start} :root body .panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch} :root body .panel-grid>.panel,:root body .split-layout>.panel{margin-bottom:0} :root body .split-layout,:root body .panel-grid{margin-bottom:18px} :root body .home-block{margin:0 0 18px} :root body .home-block>.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px} :root body .home-block>.section-head h2{margin:0;font-size:19px;font-weight:650} /* Link rows */ :root body .link-rows,:root body .link-grid,:root body .feed-list,:root body .ticket-list,:root body .status-list,:root body .course-list,:root body .article-list{margin:0;padding:0;list-style:none} :root body .link-rows>li+li{border-top:1px solid var(--line)} :root body .link-row{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:14px;padding:13px 20px;color:var(--text);transition:background-color .18s var(--ease)} :root body .link-row:hover{background:#f6f9fc} :root body .link-row:hover strong{color:var(--accent)} :root body .link-row-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#eef4fb;color:var(--accent);font-size:15px} :root body .link-row-copy{display:grid;gap:2px;min-width:0} :root body .link-row-copy strong{font-size:15px;font-weight:650;line-height:1.35;transition:color .18s var(--ease)} :root body .link-row-copy>span{color:var(--ink-3);font-size:13.5px;line-height:1.45} :root body .link-row-copy .link-row-meta{color:#46586f;font-size:12.5px;font-weight:600} :root body .link-row-go{color:#9aa7b6;font-size:12px;transition:transform .2s var(--ease),color .2s var(--ease)} :root body .link-row:hover .link-row-go{color:var(--accent);transform:translateX(2px)} :root body .link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} :root body .link-grid>li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0} :root body .link-grid.inset{border:0;border-radius:0 0 var(--radius) var(--radius)} :root body .link-grid .link-row{height:100%;align-items:start} /* Home */ :root body .home-intro{display:grid;gap:18px;margin:0 0 4px;padding:34px 36px 30px;background:linear-gradient(120deg,#0e3c69,#0b3155 70%,#0d4775);border-radius:var(--radius);color:#fff} :root body .home-intro h1{margin:0;color:#fff;font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-.01em} :root body .home-intro-copy p{max-width:62ch;margin:8px 0 0;color:#d3e1f0;font-size:16px;line-height:1.5} :root body .home-search{position:relative;display:flex;align-items:center;gap:10px;max-width:760px;min-height:54px;padding:0 6px 0 16px;background:#fff;border-radius:10px;color:#5d6c82;box-shadow:0 10px 30px rgba(3,20,40,.25)} :root body .home-search input{flex:1;min-width:0;height:52px;border:0;outline:0;background:transparent;color:var(--text);font-size:16px} :root body .home-search input::placeholder{color:#6b7a8d} :root body .home-search button{flex:none;min-height:42px;padding:0 20px;border:0;border-radius:7px;background:var(--accent);color:#fff;font-weight:650;transition:background-color .18s var(--ease)} :root body .home-search button:hover{background:#0f57b3} :root body .home-search:focus-within{box-shadow:0 0 0 3px rgba(121,168,230,.65),0 10px 30px rgba(3,20,40,.25)} :root body .home-search input:focus-visible{outline:0} :root body .home-popular{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;color:#b9cde2;font-size:13.5px} :root body .home-popular a{padding:3px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;transition:background-color .18s var(--ease)} :root body .home-popular a:hover{background:rgba(255,255,255,.12)} :root body .home-intro a:focus-visible,:root body .home-intro button:focus-visible{outline-color:rgba(255,255,255,.8)} :root body .home-quick{margin:0!important} /* Feeds: news and events */ :root body .feed-item{display:flex;align-items:flex-start;gap:14px;padding:14px 20px} :root body .feed-item+.feed-item{border-top:1px solid var(--line)} :root body .feed-item .event-date{flex:none;width:54px;min-height:58px} :root body .feed-copy{min-width:0;flex:1} :root body .feed-meta{display:block;color:var(--ink-3);font-size:12.5px;font-weight:600} :root body .feed-title{display:block;margin-top:2px;color:var(--text);font-size:15.5px;font-weight:650;line-height:1.35} :root body .feed-title:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} :root body .feed-copy p{margin:4px 0 0;color:var(--ink-3);font-size:14px;line-height:1.5} :root body .feed-list.large .feed-item{padding:18px 22px;align-items:center} :root body .feed-list.large .feed-title{font-size:17px} :root body .feed-action{flex:none;align-self:center;padding:7px 14px;border:1px solid #c9d5e3;border-radius:8px;color:var(--ink-2);font-size:13.5px;font-weight:650;transition:border-color .18s var(--ease),color .18s var(--ease)} :root body .feed-action:hover{border-color:var(--accent);color:var(--accent)} /* Articles */ :root body .article-row{padding:22px 24px;scroll-margin-top:calc(var(--top) + 70px)} :root body .article-row+.article-row{border-top:1px solid var(--line)} :root body .article-row h2{max-width:60ch;margin:6px 0 6px;font-size:20px;font-weight:650;line-height:1.3} :root body .article-row p{max-width:72ch;margin:0;color:#46586f;font-size:15px;line-height:1.6} :root body .article-byline{display:block;margin-top:10px;color:var(--ink-3);font-size:13px} :root body .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} :root body .filter-chips button{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-2);font-size:14px;font-weight:550;transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease)} :root body .filter-chips button:hover{border-color:var(--accent);color:var(--accent)} :root body .filter-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} :root body .feed-item[id],:root body .article-row[id]{scroll-margin-top:calc(var(--top) + 70px)} /* IT */ :root body .service-actions{margin-bottom:18px} :root body .service-actions a{color:var(--text)} :root body .ticket-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:start;gap:14px;padding:14px 20px} :root body .ticket-row+.ticket-row{border-top:1px solid var(--line)} :root body .ticket-row .pill{justify-self:start;margin-top:1px;white-space:nowrap} :root body .ticket-copy{display:grid;gap:3px;min-width:0} :root body .ticket-copy a{color:var(--text);font-size:15px;font-weight:650} :root body .ticket-copy a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} :root body .ticket-copy span{color:var(--ink-3);font-size:13px} :root body .status-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:12px 20px} :root body .status-row+.status-row{border-top:1px solid var(--line)} :root body .status-row strong{display:block;font-size:14.5px;font-weight:600} :root body .status-row div span{display:block;margin-top:2px;color:var(--ink-3);font-size:13px} :root body .status-dot{width:9px;height:9px;border-radius:50%;background:#1f9d63;transform:translateY(-1px)} :root body .status-label{color:#16754b;font-size:13px;font-weight:650} :root body .status-degraded .status-dot{background:#d98a00} :root body .status-degraded .status-label{color:#8a5300} :root body .status-maintenance .status-dot{background:#6b7a8d} :root body .status-maintenance .status-label{color:#4a5a6d} /* Learning */ :root body .course-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(150px,220px) auto;align-items:center;gap:16px;padding:14px 20px} :root body .course-row+.course-row{border-top:1px solid var(--line)} :root body .course-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eef4fb;color:var(--accent);font-size:15px} :root body .course-row.is-done .course-mark{background:#e3f4ea;color:#16754b} :root body .course-copy{display:grid;gap:2px;min-width:0} :root body .course-copy strong{font-size:15px;font-weight:650} :root body .course-copy span,:root body .course-status{color:var(--ink-3);font-size:13px} :root body .course-progress{display:grid;gap:5px} :root body .progress-line{height:6px;overflow:hidden;border-radius:999px;background:#e6ecf2} :root body .progress-line i{display:block;height:100%;border-radius:inherit;background:var(--accent)} :root body .course-row.is-done .progress-line i{background:#1f9d63} :root body .course-action{padding:7px 14px;border:1px solid #c9d5e3;border-radius:8px;color:var(--ink-2);font-size:13.5px;font-weight:650;white-space:nowrap;transition:border-color .18s var(--ease),color .18s var(--ease)} :root body .course-action:hover{border-color:var(--accent);color:var(--accent)} :root body .course-list.compact .course-row{grid-template-columns:34px minmax(0,1fr) auto} :root body .course-list.compact .course-progress{grid-column:2} :root body .course-list.compact .course-action{grid-column:3;grid-row:1} /* Help strip */ :root body .help-strip{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:16px 20px;background:#f3f7fb;border:1px solid var(--line);border-radius:var(--radius)} :root body .help-strip>.bi{color:var(--accent);font-size:20px} :root body .help-strip p{flex:1;margin:0;color:#46586f;font-size:14.5px} :root body .help-strip a{flex:none;color:var(--accent);font-weight:650} /* People directory (all themes) */ :root body .directory-toolbar{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(170px,.8fr) minmax(150px,.7fr) auto;align-items:stretch;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0} :root body .directory-search{display:flex;align-items:center;gap:10px;margin:0;padding:0 16px;border-right:1px solid var(--line);color:var(--ink-3)} :root body .directory-search input{flex:1;min-width:0;min-height:50px;border:0;outline:0;background:transparent;color:var(--text);font-size:15px} :root body .directory-search:focus-within{box-shadow:inset 0 -2px var(--accent)} :root body .directory-control{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin:0;padding:8px 14px;border-right:1px solid var(--line);color:var(--ink-3);font-size:13px;font-weight:600} :root body .directory-control select{width:100%;min-width:0;min-height:34px;border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer} :root body .directory-results{display:flex;align-items:center;justify-content:flex-end;margin:0;padding:0 16px;color:var(--ink-3);font-size:13px;white-space:nowrap} :root body .directory-table-wrap{margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);overflow:hidden} :root body .directory-table{width:100%;border-collapse:collapse;font-size:14px} :root body .directory-table th{padding:11px 16px;background:#f5f7f9;border-bottom:1px solid var(--line);color:#536174;font-size:12px;font-weight:700;text-align:left} :root body .directory-table td{padding:12px 16px;border-bottom:1px solid var(--line);color:#455366;vertical-align:middle} :root body .directory-table tbody tr:last-child td{border-bottom:0} :root body .directory-table tbody tr:hover{background:#f7f9fb} :root body .person-cell{display:inline-flex;align-items:center;gap:10px} :root body .person-cell strong{color:var(--text);font-weight:650} :root body .initials{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e4eefb;color:#174a8c;font-size:12px;font-weight:700} :root body .directory-contact{width:56px;text-align:center} :root body .directory-contact a{display:inline-grid;width:36px;height:36px;place-items:center;border-radius:8px;color:var(--accent)} :root body .directory-contact a:hover{background:var(--accent-soft)} :root body .directory-empty{padding:28px!important;text-align:center;color:var(--ink-3)!important} /* Template pages */ :root body .portal-breadcrumb [data-page-category]{color:var(--ink-3)} :root body .fact-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} :root body .fact{display:grid;gap:2px;padding:16px 20px} :root body .fact+.fact{border-left:1px solid var(--line)} :root body .fact strong{color:var(--text);font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums} :root body .fact span{color:var(--ink-2);font-size:14px;font-weight:600} :root body .fact small{color:var(--ink-3);font-size:12.5px} :root body .guide-panel{background:#f7f9fc} :root body .guide-text{margin:0;padding:16px 20px 6px;color:#46586f;font-size:14.5px;line-height:1.6} :root body .guide-links{display:grid;padding:6px 8px 12px} :root body .guide-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:7px;color:var(--accent);font-size:14px;font-weight:600} :root body .guide-links a:hover{background:var(--accent-soft)} :root body .preferences{display:grid;gap:4px;padding:6px 20px 18px;border-bottom:1px solid var(--line)} :root body .preferences fieldset{min-width:0;margin:0;padding:14px 0 6px;border:0} :root body .preferences legend{float:left;width:100%;margin:0 0 10px;padding:0;color:var(--text);font-size:15px;font-weight:650} :root body .pref-hint{clear:both;margin:-4px 0 10px;color:var(--ink-3);font-size:13px} :root body .pref-options{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} :root body .pref-option{position:relative;display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease)} :root body .pref-option:hover{border-color:#9dbbe2} :root body .pref-option input{margin-top:3px;accent-color:var(--accent)} :root body .pref-option strong{display:block;font-size:14px;font-weight:650} :root body .pref-option small{display:block;margin-top:1px;color:var(--ink-3);font-size:12.5px} :root body .pref-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} :root body .pref-option:has(input:disabled){cursor:not-allowed;opacity:.55} :root body .pref-option:has(input:focus-visible){outline:3px solid rgba(36,112,213,.42);outline-offset:2px} /* Search page */ :root body .search-page-form{display:flex;align-items:center;gap:10px;max-width:760px;min-height:54px;margin:0 0 18px;padding:0 6px 0 16px;background:var(--panel);border:1px solid #c9d5e3;border-radius:10px;color:var(--ink-3)} :root body .search-page-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,105,210,.14)} :root body .search-page-form input{flex:1;min-width:0;min-height:50px;border:0;outline:0;background:transparent;color:var(--text);font-size:16px} :root body .search-page-form button{min-height:42px;padding:0 20px;border:0;border-radius:7px;background:var(--accent);color:#fff;font-weight:650} :root body .search-empty{padding:28px 24px} :root body .search-empty h2{margin:0 0 6px;font-size:19px} :root body .search-empty p{margin:0;color:var(--ink-3)} :root body .search-empty a{color:var(--accent);font-weight:600} /* Design 1: restore the navy top bar, add search and utility links. */ :root body.design-a .topbar{gap:22px;background:#072e58;color:#fff;border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} :root body.design-a .topbar-brand{display:flex;align-items:center;gap:10px;flex:none;height:40px;color:#fff;font-size:17px;font-weight:700} :root body.design-a .topbar .top-nav{flex:1;min-width:0;gap:2px;overflow-x:auto;scrollbar-width:none} :root body.design-a .topbar .top-nav::-webkit-scrollbar{display:none} :root body.design-a .topbar .top-nav a{padding:0 10px;color:rgba(255,255,255,.86);font-size:13.5px;font-weight:550;opacity:1;white-space:nowrap;border-bottom:2px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)} :root body.design-a .topbar .top-nav a:hover{color:#fff;border-bottom-color:rgba(72,167,255,.5)} :root body.design-a .topbar .top-nav a.active{color:#fff;font-weight:650;border-bottom-color:#48a7ff} :root body.design-a .top-search{display:flex;flex:0 1 230px;width:auto;height:38px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:rgba(255,255,255,.75)} :root body.design-a .top-search>.bi-search{color:rgba(255,255,255,.75)} :root body.design-a .top-search input{color:#fff} :root body.design-a .top-search input::placeholder{color:rgba(255,255,255,.72)} :root body.design-a .top-search:focus-within{background:#fff;border-color:#fff} :root body.design-a .top-search:focus-within input{color:var(--text)} :root body.design-a .top-search:focus-within input::placeholder,:root body.design-a .top-search:focus-within>.bi-search{color:#5d6c82} :root body.design-a .topbar-utility{display:flex;flex:none;gap:2px} :root body.design-a .topbar-utility a{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;color:rgba(255,255,255,.9);font-size:16px} :root body.design-a .topbar-utility a:hover{background:rgba(255,255,255,.12);color:#fff} :root body.design-a .topbar-utility a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} :root body.design-a .topbar a:focus-visible,:root body.design-a .top-search input:focus-visible{outline-color:rgba(255,255,255,.75)} @media(min-width:901px){ :root body.design-a .topbar,:root body.design-a.width-container .topbar,:root body.design-a.width-full .topbar{left:0;right:0;width:auto;padding:0 max(24px,calc((100% - var(--container-width))/2 + 24px))} :root body.design-a.width-full .topbar{padding:0 24px} :root body.design-a .topbar .top-nav a{height:100%;display:flex;align-items:center} } @media(max-width:1400px) and (min-width:901px){ :root body.design-a .top-search{flex-basis:44px;padding:0;justify-content:center;background:transparent;border-color:transparent;cursor:text} :root body.design-a .top-search input{position:absolute;right:0;top:0;width:0;height:38px;padding:0;opacity:0} :root body.design-a .top-search:focus-within input{width:280px;padding:0 12px 0 34px;opacity:1;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(3,20,40,.25)} :root body.design-a .top-search:focus-within>.bi-search{position:absolute;right:252px;z-index:1} :root body.design-a .search-popover{left:auto;width:340px} } @media(max-width:900px){ :root body.design-a .topbar{gap:10px} :root body.design-a .topbar .top-nav{display:flex!important;background:#fff} :root body.design-a .topbar .top-nav a{height:100%;color:#30445f;border-bottom:3px solid transparent} :root body.design-a .topbar .top-nav a.active{color:var(--accent);border-bottom-color:var(--accent)} :root body.design-a .top-search{flex:1 1 auto} :root body.design-a .topbar-brand b{display:none} } /* Header details for the other themes */ :root body.design-c .top-search,:root body.design-d .top-search{flex:0 1 520px} :root body:not(.design-a):not(.nav-top) .topbar-utility{display:none} /* Responsive */ @media(max-width:1100px){ :root body .link-grid{grid-template-columns:repeat(2,minmax(0,1fr))} :root body .course-row{grid-template-columns:34px minmax(0,1fr) auto} :root body .course-row .course-progress{grid-column:2} :root body .course-row .course-action{grid-column:3;grid-row:1} } @media(max-width:900px){ :root body .split-layout,:root body .panel-grid{grid-template-columns:minmax(0,1fr)} :root body .split-layout>.panel+.panel,:root body .panel-grid>.panel+.panel{margin-top:0} :root body .directory-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :root body .directory-search{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)} :root body .directory-results{grid-column:1/-1;justify-content:flex-start;padding:8px 16px;border-top:1px solid var(--line)} :root body .home-intro{padding:26px 22px} :root body .home-intro h1{font-size:27px} } @media(max-width:640px){ :root body .link-grid{grid-template-columns:minmax(0,1fr)} :root body .link-row{padding:12px 16px} :root body .panel-head{padding:14px 16px} :root body .feed-item,:root body .ticket-row,:root body .status-row,:root body .course-row{padding-left:16px;padding-right:16px} :root body .ticket-row{grid-template-columns:minmax(0,1fr);gap:6px} :root body .feed-list.large .feed-item{flex-wrap:wrap;padding:16px} :root body .feed-action{margin-left:68px} :root body .article-row{padding:18px 16px} :root body .article-row h2{font-size:18px} :root body .fact+.fact{border-left:0;border-top:1px solid var(--line)} :root body .pref-options,:root body .pref-options.two{grid-template-columns:minmax(0,1fr)} :root body .preferences{padding:4px 16px 16px} :root body .help-strip{flex-wrap:wrap} :root body .home-search{padding-left:12px} :root body .home-search button{padding:0 14px} :root body .page-title-actions .action{flex:1 1 auto;justify-content:center} :root body .directory-toolbar{grid-template-columns:minmax(0,1fr)} :root body .directory-control{border-right:0;border-bottom:1px solid var(--line)} :root body .directory-results{border-top:0} :root body .directory-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root body .directory-table,:root body .directory-table tbody,:root body .directory-table tr,:root body .directory-table td{display:block;width:100%} :root body .directory-table tr{display:grid;grid-template-columns:minmax(0,1fr) 44px;padding:12px 16px;border-bottom:1px solid var(--line)} :root body .directory-table td{padding:2px 0;border:0;font-size:13px} :root body .directory-table td[data-label]:not([data-label="Name"])::before{content:attr(data-label) ": ";color:var(--ink-3)} :root body .directory-table .directory-contact{grid-column:2;grid-row:1/5;align-self:center;width:auto} } /* Design 2: flush square surfaces divided by faint separators. */ :root body.design-b .design-picker{display:none!important} :root body.design-b main .panel,:root body.design-b main .help-strip,:root body.design-b main .fact-strip,:root body.design-b main .link-grid,:root body.design-b main .directory-table-wrap,:root body.design-b main .search-page-form{margin:0;border:1px solid var(--design-b-separator);border-top:0;border-radius:0;box-shadow:none} :root body.design-b main .directory-toolbar{border:1px solid var(--design-b-separator);border-top:0;border-radius:0} :root body.design-b main .split-layout,:root body.design-b main .panel-grid{gap:0;margin:0} :root body.design-b main .split-layout>.panel+.panel{border-left:0} :root body.design-b main .panel-grid>.panel:nth-child(2n){border-left:0} :root body.design-b main .panel-head{background:#f5f7fa;border-bottom-color:var(--design-b-separator)} :root body.design-b main .link-rows>li+li,:root body.design-b main .feed-item+.feed-item,:root body.design-b main .ticket-row+.ticket-row,:root body.design-b main .status-row+.status-row,:root body.design-b main .course-row+.course-row,:root body.design-b main .article-row+.article-row,:root body.design-b main .fact+.fact{border-color:var(--design-b-separator)} :root body.design-b main .link-grid>li{border-color:var(--design-b-separator)} :root body.design-b main .link-grid.inset{border:0} :root body.design-b main .link-row-icon,:root body.design-b main .search-option-icon,:root body.design-b main .action,:root body.design-b main .feed-action,:root body.design-b main .course-action,:root body.design-b main .filter-chips button,:root body.design-b main .pref-option,:root body.design-b main .search-page-form button,:root body.design-b main .home-search,:root body.design-b main .home-search button,:root body.design-b main .home-popular a{border-radius:0} :root body.design-b main .home-intro{border-radius:0;margin:0} :root body.design-b main .home-block>.section-head{margin:0;padding:20px 0 12px} :root body.design-b main .home-block .quick-actions{border:1px solid var(--design-b-separator)} :root body.design-b main .home-block .quick-actions a{border-right:1px solid var(--design-b-separator)} :root body.design-b main .home-block .quick-actions a:last-child{border-right:0} :root body.design-b main .home-block{margin:0} :root body.design-b main .home-feed{margin-top:20px;border-top:1px solid var(--design-b-separator)} :root body.design-b main .home-block .link-grid{border-top:1px solid var(--design-b-separator)} :root body.design-b main .tabs{padding:0 16px;background:#fff;border:1px solid var(--design-b-separator)!important;border-top:0!important} :root body.design-b main .tabs a[aria-current]{color:#1769d2;font-weight:700;box-shadow:inset 0 -2px #1769d2} :root body.design-b main .filter-chips{gap:0;margin:0;border:1px solid var(--design-b-separator);border-top:0;background:#fff} :root body.design-b main .filter-chips button{min-height:44px;border:0;border-right:1px solid var(--design-b-separator)} :root body.design-b main .filter-chips button[aria-pressed="true"]{background:#fff;color:#1769d2;font-weight:700;box-shadow:inset 0 -2px #1769d2} :root body.design-b main .service-actions{margin:0;border:1px solid var(--design-b-separator);border-top:0} :root body.design-b main .service-actions a{border:0;border-right:1px solid var(--design-b-separator)} :root body.design-b main .service-actions a:last-child{border-right:0} :root body.design-b main .search-page-form{max-width:none;border-top:0} :root body.design-b main .search-results{display:grid} :root body.design-b main .page-title-actions .action.secondary{background:#fff} :root body.design-b main .guide-panel{background:#f7f9fb} :root body.design-b main .preferences{border-bottom-color:var(--design-b-separator)} :root body.design-b main .portal-breadcrumb{border:1px solid var(--design-b-separator);border-bottom:0} :root body.design-b main>:last-child{margin-bottom:32px!important} @media(max-width:900px){ :root body.design-b main .split-layout>.panel+.panel,:root body.design-b main .panel-grid>.panel:nth-child(2n){border-left:1px solid var(--design-b-separator)} :root body.design-b main .service-actions a:nth-child(2n){border-right:0} :root body.design-b main .service-actions a{border-bottom:1px solid var(--design-b-separator)} } /* Design 4: larger reading sizes for the new components. */ :root body.design-d .link-row-copy strong,:root body.design-d .feed-title,:root body.design-d .ticket-copy a,:root body.design-d .course-copy strong{font-size:17px} :root body.design-d .link-row-copy>span,:root body.design-d .feed-copy p,:root body.design-d .article-row p{font-size:16px} :root body.design-d .panel-head h2{font-size:21px} :root body .page-title p,:root body.design-b main .page-title p{color:#56657a} /* Sidebar: keep utility links in flow so they never overlap the nav on short windows. */ :root body .sidebar{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin} :root body .sidebar .side-bottom{position:static;margin-top:auto;padding-top:16px} /* ==== Design 2 line system ==== One rule colour. Sections are separated by a single full-width horizontal rule, columns by a single vertical rule, rows inside a section by a lighter rule. No surface draws side borders, so edges never double up or end ragged. */ :root body.design-b{--rule:rgba(83,105,130,.22);--rule-soft:rgba(83,105,130,.12)} :root body.design-b main.container-fluid .page-title, :root body.design-b main.container-fluid .portal-breadcrumb, :root body.design-b main.container-fluid .tabs, :root body.design-b main.container-fluid .panel, :root body.design-b main.container-fluid .help-strip, :root body.design-b main.container-fluid .fact-strip, :root body.design-b main.container-fluid .directory-toolbar, :root body.design-b main.container-fluid .directory-table-wrap, :root body.design-b main.container-fluid .directory-table, :root body.design-b main.container-fluid .service-actions, :root body.design-b main.container-fluid .filter-chips, :root body.design-b main.container-fluid .search-page-form, :root body.design-b main.container-fluid .link-grid, :root body.design-b main.container-fluid .quick-actions, :root body.design-b main.container-fluid .split-layout, :root body.design-b main.container-fluid .panel-grid, :root body.design-b main.container-fluid .repo-panel, :root body.design-b main.container-fluid .repo-toolbar, :root body.design-b main.container-fluid .repo-status, :root body.design-b main.container-fluid .repo-index, :root body.design-b main.container-fluid .repo-group, :root body.design-b main.container-fluid .repo-filters, :root body.design-b main.container-fluid .repo-table-wrap, :root body.design-b main.container-fluid .repo-empty{border:0!important;border-radius:0!important;box-shadow:none!important;margin-top:0!important;margin-bottom:0!important} /* Primary rules: under each section. */ :root body.design-b main.container-fluid>.page-title, :root body.design-b main.container-fluid>.tabs, :root body.design-b main.container-fluid>.panel, :root body.design-b main.container-fluid>.help-strip, :root body.design-b main.container-fluid>.fact-strip, :root body.design-b main.container-fluid>.directory-toolbar, :root body.design-b main.container-fluid>.directory-table-wrap, :root body.design-b main.container-fluid>.service-actions, :root body.design-b main.container-fluid>.filter-chips, :root body.design-b main.container-fluid>.search-page-form, :root body.design-b main.container-fluid>.split-layout, :root body.design-b main.container-fluid>.repo-panel, :root body.design-b main.container-fluid>.repo-toolbar, :root body.design-b main.container-fluid .repo-status, :root body.design-b main.container-fluid .repo-index, :root body.design-b main.container-fluid .repo-group, :root body.design-b main.container-fluid .repo-filters, :root body.design-b main.container-fluid .repo-table-wrap, :root body.design-b main.container-fluid .repo-empty, :root body.design-b main.container-fluid .search-results>.panel, :root body.design-b main.container-fluid .panel-grid>.panel{border-bottom:1px solid var(--rule)!important} /* Page header band: tinted, no frame. */ :root body.design-b main.container-fluid>.page-title{background:#f5f7fa} :root body.design-b main.container-fluid>.portal-breadcrumb{padding:14px 28px 0;background:#f5f7fa} /* Columns: stretch to equal height, one vertical rule between them. */ :root body.design-b main.container-fluid .split-layout,:root body.design-b main.container-fluid .panel-grid{align-items:stretch;gap:0} :root body.design-b main.container-fluid .split-layout>.panel+.panel,:root body.design-b main.container-fluid .panel-grid>.panel:nth-child(2n){border-left:1px solid var(--rule)!important} :root body.design-b main.container-fluid .split-layout>.panel{border-bottom:0!important} :root body.design-b main.container-fluid .guide-panel{background:#f8fafc} /* Section headings sit on the white canvas; rows use the lighter rule. */ :root body.design-b main.container-fluid .panel-head,:root body.design-b main.container-fluid .repo-group-head,:root body.design-b main.container-fluid .repo-panel .section-head{padding:18px 20px 10px;background:transparent;border-bottom:1px solid var(--rule-soft)} :root body.design-b main.container-fluid .panel-head.stacked{padding-bottom:12px} :root body.design-b main.container-fluid .link-rows>li+li, :root body.design-b main.container-fluid .feed-item+.feed-item, :root body.design-b main.container-fluid .ticket-row+.ticket-row, :root body.design-b main.container-fluid .status-row+.status-row, :root body.design-b main.container-fluid .course-row+.course-row, :root body.design-b main.container-fluid .article-row+.article-row, :root body.design-b main.container-fluid .repo-row, :root body.design-b main.container-fluid .directory-table th, :root body.design-b main.container-fluid .directory-table td, :root body.design-b main.container-fluid .repo-table th, :root body.design-b main.container-fluid .repo-table td, :root body.design-b main.container-fluid .preferences{border-color:var(--rule-soft)!important} :root body.design-b main.container-fluid .repo-row:first-child{border-top:0} :root body.design-b main.container-fluid .directory-table th,:root body.design-b main.container-fluid .repo-table th{background:#f8fafc} /* Internal column dividers keep the main rule colour. */ :root body.design-b main.container-fluid .fact+.fact, :root body.design-b main.container-fluid .directory-search, :root body.design-b main.container-fluid .directory-control, :root body.design-b main.container-fluid .repo-filters label+label, :root body.design-b main.container-fluid .repo-views, :root body.design-b main.container-fluid .repo-index a, :root body.design-b main.container-fluid .service-actions a, :root body.design-b main.container-fluid .quick-actions a{border-color:var(--rule)!important} /* Tile rows (home requests, IT requests): rules above and below, dividers between. */ :root body.design-b main.container-fluid .quick-actions{border-top:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important} :root body.design-b main.container-fluid .quick-actions a{border:0!important;border-right:1px solid var(--rule)!important} :root body.design-b main.container-fluid .quick-actions a:last-child,:root body.design-b main.container-fluid .service-actions a:last-child{border-right:0!important} :root body.design-b main.container-fluid .service-actions a{border:0!important;border-right:1px solid var(--rule)!important} /* Link grid: internal dividers only, rules above and below. */ :root body.design-b main.container-fluid .link-grid{border-top:1px solid var(--rule-soft)!important;border-bottom:1px solid var(--rule)!important} :root body.design-b main.container-fluid .link-grid.inset{border-bottom:0!important} :root body.design-b main.container-fluid .link-grid>li{border-color:var(--rule-soft)!important} /* Home: heading rhythm between bands. */ :root body.design-b main.container-fluid .home-block>.section-head{padding:24px 0 12px} :root body.design-b main.container-fluid .home-feed{margin-top:24px!important;border-top:1px solid var(--rule)!important;border-bottom:1px solid var(--rule)!important} /* Tabs and filter chips: one underline row. */ :root body.design-b main.container-fluid .tabs,:root body.design-b main.container-fluid .filter-chips{padding:0 12px;background:#fff} :root body.design-b main.container-fluid .filter-chips button{border:0!important} :root body.design-b main.container-fluid .tabs a,:root body.design-b main.container-fluid .filter-chips button{min-height:46px} /* Repositories: index as an underline row; table header row tinted. */ :root body.design-b main.container-fluid .repo-index a{border:0!important;border-right:1px solid var(--rule)!important} :root body.design-b main.container-fluid .repo-status{background:transparent;padding:12px 20px} :root body.design-b main.container-fluid .repo-group-head h2,:root body.design-b main.container-fluid .panel-head h2{font-size:17px} :root body.design-b main.container-fluid .repo-group-head span{font-size:12.5px} /* Directory table and repositories table share the toolbar's rule above. */ :root body.design-b main.container-fluid .directory-search{border-right:1px solid var(--rule)!important} :root body.design-b main.container-fluid .directory-control{border-right:1px solid var(--rule)!important} @media(max-width:900px){ :root body.design-b main.container-fluid .split-layout>.panel+.panel,:root body.design-b main.container-fluid .panel-grid>.panel:nth-child(2n){border-left:0!important;border-top:1px solid var(--rule)!important} :root body.design-b main.container-fluid .split-layout>.panel{border-bottom:0!important} :root body.design-b main.container-fluid .service-actions a{border-bottom:1px solid var(--rule-soft)!important} :root body.design-b main.container-fluid .service-actions a:nth-child(2n){border-right:0!important} :root body.design-b main.container-fluid .directory-search{border-right:0!important;border-bottom:1px solid var(--rule)!important} } @media(max-width:640px){ :root body.design-b main.container-fluid .directory-control{border-right:0!important;border-bottom:1px solid var(--rule-soft)!important} :root body.design-b main.container-fluid .quick-actions a:nth-child(3n){border-right:0!important} :root body.design-b main.container-fluid .quick-actions a{border-bottom:1px solid var(--rule-soft)!important} } :root body.design-b main.container-fluid .repo-search,:root body.design-b main.container-fluid .directory-search,:root body.design-b main.container-fluid>.search-page-form{background:#f3f6f9!important} :root body.design-b main.container-fluid .repo-search:focus-within,:root body.design-b main.container-fluid .directory-search:focus-within,:root body.design-b main.container-fluid>.search-page-form:focus-within{background:#fff!important;box-shadow:inset 0 -2px #1769d2!important} @media(min-width:901px){:root body.design-b main.container-fluid .directory-toolbar{grid-template-columns:minmax(220px,1.4fr) minmax(170px,.8fr) minmax(150px,.7fr) auto}} /* ==== Design 5 · Clean ==== Structure from space and surface, not lines. White surfaces sit on a light canvas with a soft shadow; hairlines appear only where they aid reading (table rows, the sidebar and header edges, form controls). Left navigation only. */ :root body.design-e{--sidebar:248px;--top:64px;--canvas:#f5f6f8;--hair:#e6e8ec;--hair-soft:#eef0f3;--ink:#101828;--ink-2:#344054;--ink-3:#5b6474;--accent:#1769d2;--accent-soft:#eaf2fd;--radius:12px;--line:#e6e8ec;--panel:#fff;--text:#101828;--muted:#5b6474;--surface-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);--lift-shadow:0 4px 12px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.06);background:var(--canvas);color:var(--ink);font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif} :root body.design-e .app-shell,:root body.design-e .app-shell>main.container-fluid{background:var(--canvas)} :root body.design-e .design-picker{display:none!important} /* Sidebar */ :root body.design-e .sidebar{width:var(--sidebar);padding:18px 14px 16px;background:#fbfbfc;border-right:1px solid var(--hair);box-shadow:none;color:var(--ink-2)} :root body.design-e .sidebar .brand{height:36px;padding:0 8px;color:var(--ink);font-size:16px;font-weight:700} :root body.design-e .brandmark i:first-child{background:#3b8cf0} :root body.design-e .brandmark i:last-child{background:#1769d2} :root body.design-e .sidebar nav{gap:0;margin-top:22px} :root body.design-e .sidebar nav .nav-group{gap:1px} :root body.design-e .sidebar nav .nav-group+.nav-group{margin-top:20px} :root body.design-e .sidebar nav .nav-group-divided{padding-top:0;border-top:0} :root body.design-e .sidebar nav .nav-group-items{gap:1px} :root body.design-e .sidebar nav .nav-group-label{margin:0 0 6px;padding:0 10px;background:transparent;border-radius:0;color:#6b7383;font-size:11.5px;font-weight:650;letter-spacing:.07em;line-height:1.4} :root body.design-e .sidebar nav a,:root body.design-e .side-bottom a{height:36px;padding:0 10px;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:500;opacity:1;transition:background-color .15s var(--ease),color .15s var(--ease)} :root body.design-e .sidebar nav a:hover,:root body.design-e .side-bottom a:hover{background:#eff1f4;color:var(--ink)} :root body.design-e .sidebar nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600} :root body.design-e .side-bottom a .bi{color:#6b7383;font-size:15px} /* Header */ :root body.design-e .topbar{left:var(--sidebar);height:var(--top);padding:0 28px;background:#fff;border-bottom:1px solid var(--hair);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} :root body.design-e .top-search{width:auto;flex:0 1 560px;height:40px;padding:0 14px;background:#f2f4f7;border:1px solid transparent;border-radius:10px;color:#5b6474;transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)} :root body.design-e .top-search:hover{background:#eceff3} :root body.design-e .top-search:focus-within{background:#fff;border-color:#9cc0ef;box-shadow:0 0 0 3px rgba(23,105,210,.12)} :root body.design-e .top-search input{font-size:14.5px} :root body.design-e .top-search input:focus-visible{outline:0} :root body.design-e .search-popover{border-color:var(--hair);border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06)} /* Canvas rhythm */ :root body.design-e.width-container .app-shell>main.container-fluid,:root body.design-e.width-full .app-shell>main.container-fluid{padding-top:calc(var(--top) + 28px);padding-bottom:56px} :root body.design-e main .page-title{margin:0 0 22px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none} :root body.design-e main .page-title h1{margin:0;color:var(--ink);font-size:28px;font-weight:650;line-height:1.2;letter-spacing:-.015em} :root body.design-e main .page-title p{max-width:70ch;margin:6px 0 0;color:var(--ink-3);font-size:15px;line-height:1.55} :root body.design-e main .page-title-actions{margin-top:16px} :root body.design-e main .portal-breadcrumb{margin:0 0 10px;padding:0;background:transparent;border:0;font-size:13px} :root body.design-e main .portal-breadcrumb a{color:var(--accent);font-weight:600} /* Surfaces: no borders, soft elevation */ :root body.design-e main .panel,:root body.design-e main .repo-panel,:root body.design-e main .repo-group,:root body.design-e main .fact-strip,:root body.design-e main .directory-table-wrap,:root body.design-e main .repo-table-wrap,:root body.design-e main .repo-empty,:root body.design-e main .search-page-form{border:0;border-radius:var(--radius);background:#fff;box-shadow:var(--surface-shadow)} :root body.design-e main .panel,:root body.design-e main .repo-panel,:root body.design-e main .fact-strip,:root body.design-e main .help-strip{margin:0 0 20px} :root body.design-e main .repo-group{margin:0 0 16px;overflow:hidden} :root body.design-e main .split-layout,:root body.design-e main .panel-grid{gap:20px;margin-bottom:20px;align-items:start} :root body.design-e main .panel-grid{align-items:stretch} :root body.design-e main .split-layout>.panel,:root body.design-e main .panel-grid>.panel{margin:0} /* Section headings: type, no rule */ :root body.design-e main .panel-head,:root body.design-e main .repo-group-head,:root body.design-e main .repo-panel .section-head{padding:18px 20px 8px;background:transparent;border:0} :root body.design-e main .panel-head h2,:root body.design-e main .repo-group-head h2,:root body.design-e main .repo-panel .section-head h2{color:var(--ink);font-size:16px;font-weight:650} :root body.design-e main .panel-head.stacked p{margin-top:4px} :root body.design-e main .panel-note,:root body.design-e main .repo-group-head span{color:#6b7383;font-size:12.5px} :root body.design-e main .home-block>.section-head{margin:32px 0 12px} :root body.design-e main .home-block>.section-head h2{color:var(--ink);font-size:17px;font-weight:650} /* Lists: whitespace and hover instead of separators */ :root body.design-e main .link-rows{padding:2px 8px 10px} :root body.design-e main .link-rows>li+li{border:0} :root body.design-e main .link-row{padding:10px 12px;border-radius:9px} :root body.design-e main .link-row:hover{background:#f5f7fa} :root body.design-e main .link-row-icon{border-radius:9px;background:var(--accent-soft)} :root body.design-e main .feed-list{padding:2px 8px 10px} :root body.design-e main .feed-item{padding:10px 12px;border-radius:9px} :root body.design-e main .feed-item+.feed-item{border:0} :root body.design-e main .feed-list.large .feed-item{padding:14px 14px} :root body.design-e main .ticket-list,:root body.design-e main .status-list,:root body.design-e main .course-list{padding:2px 8px 10px} :root body.design-e main .ticket-row,:root body.design-e main .status-row,:root body.design-e main .course-row{padding:11px 12px;border-radius:9px} :root body.design-e main .ticket-row+.ticket-row,:root body.design-e main .status-row+.status-row,:root body.design-e main .course-row+.course-row{border:0} :root body.design-e main .article-row{padding:22px 24px} :root body.design-e main .article-row+.article-row{border-top:1px solid var(--hair-soft)} :root body.design-e main .event-date{border-radius:10px} :root body.design-e main .pill{border-radius:999px} /* Repository rows have four columns: a faint hairline keeps them scannable. */ :root body.design-e main .repo-list{padding:0 8px 8px} :root body.design-e main .repo-row{padding:13px 12px;border-top:1px solid var(--hair-soft)} :root body.design-e main .repo-row:first-child{border-top:0} :root body.design-e main .repo-type-icon{border-radius:9px} /* Tiles: separate cards with breathing room */ :root body.design-e main .quick-actions,:root body.design-e main .service-actions{display:grid;gap:12px;margin:0 0 20px!important;padding:0;border:0;background:transparent} :root body.design-e main .quick-actions{grid-template-columns:repeat(6,minmax(0,1fr))} :root body.design-e main .service-actions{grid-template-columns:repeat(4,minmax(0,1fr))} :root body.design-e main .quick-actions a,:root body.design-e main .service-actions a{border:0!important;border-radius:var(--radius)!important;background:#fff;box-shadow:var(--surface-shadow);transform:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)} :root body.design-e main .quick-actions a:hover,:root body.design-e main .service-actions a:hover{box-shadow:var(--lift-shadow);transform:translateY(-1px)} :root body.design-e main .quick-actions a{height:96px;color:var(--ink);font-size:14px;font-weight:550} /* Link grid: cards on the canvas, plain columns inside a panel */ :root body.design-e main .link-grid{gap:12px;overflow:visible;background:transparent;border:0;border-radius:0} :root body.design-e main .link-grid>li{margin:0;border:0} :root body.design-e main .link-grid:not(.inset) .link-row{height:100%;padding:16px;background:#fff;border-radius:var(--radius);box-shadow:var(--surface-shadow);transition:box-shadow .2s var(--ease)} :root body.design-e main .link-grid:not(.inset) .link-row:hover{background:#fff;box-shadow:var(--lift-shadow)} :root body.design-e main .link-grid.inset{gap:2px 8px;padding:2px 8px 10px} /* Home band */ :root body.design-e main .home-intro{margin:0 0 4px;border-radius:16px;background:linear-gradient(125deg,#0f3f6e,#0b2f55 65%,#12508a)} :root body.design-e main .home-search{border-radius:12px} :root body.design-e main .home-search button{border-radius:9px} /* Tabs: segmented pill switcher, no rule */ :root body.design-e main .tabs{display:inline-flex;max-width:100%;gap:2px;margin:0 0 20px;padding:4px;background:#eaecf0;border:0;border-radius:11px;box-shadow:none} :root body.design-e main .tabs a{display:flex;align-items:center;min-height:34px;height:auto;padding:0 14px;border:0;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:550;box-shadow:none;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)} :root body.design-e main .tabs a:hover{color:var(--ink)} :root body.design-e main .tabs a.active,:root body.design-e main .tabs a[aria-current]{background:#fff;color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(16,24,40,.1)} /* Filter chips */ :root body.design-e main .filter-chips{margin:0 0 16px;gap:8px} :root body.design-e main .filter-chips button{border:0;background:#fff;box-shadow:var(--surface-shadow);color:var(--ink-2)} :root body.design-e main .filter-chips button:hover{color:var(--accent)} :root body.design-e main .filter-chips button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none} /* Toolbars float above their table: separate fields, no frame. */ :root body.design-e main .directory-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:0;background:transparent;border:0;border-radius:0} :root body.design-e main .directory-search,:root body.design-e main .repo-search{flex:1 1 300px;min-height:44px;padding:0 14px;background:#fff;border:1px solid var(--hair);border-radius:10px;box-shadow:none} :root body.design-e main .directory-search input,:root body.design-e main .repo-search input{min-height:42px} :root body.design-e main .directory-search:focus-within,:root body.design-e main .repo-search:focus-within{border-color:#9cc0ef;box-shadow:0 0 0 3px rgba(23,105,210,.12)} :root body.design-e main .directory-control{flex:0 1 230px;min-height:44px;padding:0 12px;background:#fff;border:1px solid var(--hair);border-radius:10px} :root body.design-e main .directory-results{flex:1 0 auto;padding:0 4px;border:0} :root body.design-e main .directory-table-wrap,:root body.design-e main .repo-table-wrap{border:0;border-radius:var(--radius);overflow:hidden} :root body.design-e main .directory-table,:root body.design-e main .repo-table{border:0} :root body.design-e main .directory-table th,:root body.design-e main .repo-table th{background:#f9fafb;border-bottom:1px solid var(--hair);color:#5b6474} :root body.design-e main .directory-table td,:root body.design-e main .repo-table td{border-bottom:1px solid var(--hair-soft)} :root body.design-e main .directory-table tbody tr:hover,:root body.design-e main .repo-table tbody tr:hover{background:#fafbfc} :root body.design-e main .repo-toolbar{gap:10px;margin:0 0 12px;border:0} :root body.design-e main .repo-views{border:0;border-radius:11px;padding:4px;gap:2px;background:#eaecf0} :root body.design-e main .repo-views button{min-height:36px;border:0!important;border-radius:8px;color:var(--ink-2)} :root body.design-e main .repo-views button:hover{background:transparent;color:var(--ink)} :root body.design-e main .repo-views button.selected{background:#fff;color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(16,24,40,.1)} :root body.design-e main .repo-status{margin:0 0 12px;padding:0;background:transparent;border:0} :root body.design-e main .repo-index{gap:8px;margin:0 0 16px;border:0} :root body.design-e main .repo-index a{border:0;background:#fff;box-shadow:var(--surface-shadow);border-radius:999px} :root body.design-e main .repo-index a[aria-current]{background:var(--accent-soft);color:var(--accent);box-shadow:none} :root body.design-e main .repo-filters{gap:10px;margin:0 0 14px;background:transparent;border:0;border-radius:0} :root body.design-e main .repo-filters label{padding:6px 12px;background:#fff;border:1px solid var(--hair)!important;border-radius:10px} :root body.design-e main .repo-table-wrap{border-top:0} /* Template details */ :root body.design-e main .fact+.fact{border-left:0} :root body.design-e main .fact{padding:18px 20px} :root body.design-e main .guide-panel{background:#fff} :root body.design-e main .guide-text{padding-top:4px} :root body.design-e main .preferences{border-bottom:1px solid var(--hair-soft)} :root body.design-e main .pref-option{border-color:var(--hair);border-radius:10px} :root body.design-e main .help-strip{border:0;border-radius:var(--radius);background:var(--accent-soft)} :root body.design-e main .search-page-form{border:0;max-width:none} :root body.design-e main .search-page-form:focus-within{box-shadow:0 0 0 3px rgba(23,105,210,.14),var(--surface-shadow)} :root body.design-e main .search-page-form button{border-radius:9px} :root body.design-e main .action{border-radius:9px} :root body.design-e main .action.secondary{border-color:#d0d5dd} :root body.design-e main .feed-action,:root body.design-e main .course-action{border-color:#d0d5dd;border-radius:9px} @media(max-width:1100px){ :root body.design-e main .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))} :root body.design-e main .service-actions{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ :root body.design-e .topbar{padding:0 14px} :root body.design-e main .tabs{display:flex;overflow-x:auto} :root body.design-e.width-container .app-shell>main.container-fluid,:root body.design-e.width-full .app-shell>main.container-fluid{padding-top:calc(var(--top) + 64px)!important} } @media(max-width:640px){ :root body.design-e main .page-title h1{font-size:24px} :root body.design-e main .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} :root body.design-e main .service-actions{grid-template-columns:minmax(0,1fr)} :root body.design-e main .directory-control{flex:1 1 100%} :root body.design-e main .directory-table tr{border-bottom:1px solid var(--hair-soft)} } :root body.design-e main .split-layout:not(.template-layout){align-items:stretch} /* ==== Design 6 · Flush ==== Design 5 (body also carries .design-e) with no margins or gaps between elements. Sections sit edge to edge on one white sheet; spacing comes only from each element's own padding. Hairlines stay where Design 5 uses them (tables, form fields). */ :root body.design-f{--canvas:#fff} :root body.design-f .app-shell,:root body.design-f .app-shell>main.container-fluid{background:#fff} /* Surfaces: flush, no elevation, no rounding. */ :root body.design-f main .panel, :root body.design-f main .repo-panel, :root body.design-f main .repo-group, :root body.design-f main .fact-strip, :root body.design-f main .help-strip, :root body.design-f main .directory-table-wrap, :root body.design-f main .repo-table-wrap, :root body.design-f main .repo-empty, :root body.design-f main .home-intro, :root body.design-f main .quick-actions a, :root body.design-f main .service-actions a, :root body.design-f main .link-grid:not(.inset) .link-row{margin:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important} /* No gaps between laid-out elements. */ :root body.design-f main .split-layout, :root body.design-f main .panel-grid, :root body.design-f main .quick-actions, :root body.design-f main .service-actions, :root body.design-f main .link-grid, :root body.design-f main .home-block, :root body.design-f main .home-feed{gap:0!important;margin:0!important} /* Remove outer margins; spacing that separated sections moves into padding. */ :root body.design-f main .page-title{margin:0!important;padding:0 0 22px} :root body.design-f main .portal-breadcrumb{margin:0!important;padding:0 0 10px} :root body.design-f main .tabs{margin:0!important} :root body.design-f main .filter-chips,:root body.design-f main .repo-index{margin:0!important;padding:0 0 4px} :root body.design-f main .repo-toolbar,:root body.design-f main .directory-toolbar,:root body.design-f main .repo-filters{margin:0!important;padding:0 0 14px} :root body.design-f main .repo-status{margin:0!important;padding:0 0 12px} :root body.design-f main .home-block>.section-head{margin:0!important;padding:32px 0 12px} :root body.design-f main .home-feed{padding-top:12px} :root body.design-f main .help-strip{padding:18px 20px} /* Inner spacing that used margins. */ :root body.design-f main .page-title-actions{margin:0;padding-top:16px} :root body.design-f main .page-title p{margin:0;padding-top:6px} :root body.design-f main .search-page-form{margin:0!important;border:1px solid var(--hair);border-radius:10px;box-shadow:none} /* Tiles: one continuous strip; hover tints instead of lifting. */ :root body.design-f main .quick-actions a:hover,:root body.design-f main .service-actions a:hover,:root body.design-f main .link-grid:not(.inset) .link-row:hover{background:#f5f7fa;box-shadow:none!important} :root body.design-f main .repo-index a,:root body.design-f main .filter-chips button:not([aria-pressed="true"]){box-shadow:none;background:#f2f4f7} :root body.design-f main .repo-sample-note{margin:0!important;padding:16px 0 0} /* ==== Design 6 polish ==== One left edge: headings, row content, facts, and articles align with the page title. Row hover tints and table header bands bleed 12–16px past that edge so text stays aligned. Column gutters and section rhythm come from padding, never margins. */ :root body.design-f{--d6-gutter:20px;--d6-bleed:12px} /* Headings flush to the edge */ :root body.design-f main .panel-head,:root body.design-f main .repo-group-head,:root body.design-f main .repo-panel .section-head{padding-left:0;padding-right:0} :root body.design-f main .link-rows,:root body.design-f main .feed-list,:root body.design-f main .ticket-list,:root body.design-f main .status-list,:root body.design-f main .course-list,:root body.design-f main .repo-list{padding:0!important;margin:0 calc(var(--d6-bleed) * -1)!important} :root body.design-f main .link-grid.inset{padding:0!important;margin:0!important} :root body.design-f main .feed-list.large .feed-item{padding-left:12px;padding-right:12px} :root body.design-f main .panel,:root body.design-f main .repo-panel,:root body.design-f main .repo-group{padding-bottom:16px} :root body.design-f main .repo-row{border-radius:9px} /* Facts, articles, guide, preferences: no side padding */ :root body.design-f main .fact{padding:16px 32px 18px 0} :root body.design-f main .fact+.fact{padding-left:32px!important} :root body.design-f main .article-row{padding:22px 0} :root body.design-f main .guide-text{padding:4px 0 8px} :root body.design-f main .guide-links{margin:0 calc(var(--d6-bleed) * -1);padding:0} :root body.design-f main .preferences{padding:0 0 18px} :root body.design-f main .panel-head.stacked{padding-bottom:12px} /* Tables bleed so cell text meets the edge */ :root body.design-f main .directory-table-wrap,:root body.design-f main .repo-table-wrap{margin:0 -16px!important;border-radius:0!important} /* Column gutters from padding */ :root body.design-f main .split-layout>.panel:first-child,:root body.design-f main .panel-grid>.panel:nth-child(2n+1){padding-right:var(--d6-gutter)} :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel:nth-child(2n){padding-left:var(--d6-gutter)} :root body.design-f main .split-layout>.guide-panel{padding-left:calc(var(--d6-gutter) + 8px)} /* Tile rows: one tinted strip, thin white dividers */ :root body.design-f main .quick-actions,:root body.design-f main .service-actions{background:#f5f6f8!important;overflow:hidden} :root body.design-f main .quick-actions a,:root body.design-f main .service-actions a{background:transparent!important;box-shadow:inset -1px -1px 0 #fff!important;transition:background-color .15s var(--ease)} :root body.design-f main .quick-actions a:hover,:root body.design-f main .service-actions a:hover{background:#eceff3!important} :root body.design-f main .service-actions{margin-bottom:0!important} :root body.design-f main .service-actions+.split-layout{padding-top:8px} /* Narrow certification rows: action drops below the progress bar */ :root body.design-f main .course-list.compact .course-row{grid-template-columns:34px minmax(0,1fr)} :root body.design-f main .course-list.compact .course-progress,:root body.design-f main .course-list.compact .course-action{grid-column:2;grid-row:auto} :root body.design-f main .course-list.compact .course-action{justify-self:start} @media(max-width:900px){ :root body.design-f main .split-layout>.panel,:root body.design-f main .panel-grid>.panel{padding-left:0!important;padding-right:0!important} :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel+.panel{padding-top:8px} :root body.design-f main .directory-table-wrap,:root body.design-f main .repo-table-wrap{margin:0!important} } :root body.design-f main .link-grid:not(.inset){margin:0 calc(var(--d6-bleed) * -1)!important} :root body.design-f main .link-grid:not(.inset) .link-row{padding:12px} :root body .home-search input::placeholder{color:#5d6c82} /* ==== Design 6: full-bleed elements, padded content ==== main has no side padding; every element spans the full width (and columns the full height) of the content area. Each element pads its own content to one shared inset, --d6-pad, so text lines up down the page while bands and strips run edge to edge. */ :root body.design-f{--d6-pad:32px} :root body.design-f.width-container .app-shell>main.container-fluid,:root body.design-f.width-full .app-shell>main.container-fluid{padding:var(--top) 0 0!important} :root body.design-f .topbar{padding-left:var(--d6-pad);padding-right:var(--d6-pad)} /* Generic: direct children span the width and pad their content. */ :root body.design-f main.container-fluid>*{width:auto;max-width:none;margin:0!important;padding-left:var(--d6-pad)!important;padding-right:var(--d6-pad)!important} /* Page header */ :root body.design-f main.container-fluid>.portal-breadcrumb{padding-top:22px!important;padding-bottom:0!important} :root body.design-f main.container-fluid>.page-title{padding-top:28px!important;padding-bottom:24px!important} :root body.design-f main.container-fluid>.portal-breadcrumb+.page-title{padding-top:8px!important} /* Tinted full-width bands */ :root body.design-f main.container-fluid>.tabs{display:flex;width:auto;gap:4px;padding-top:6px!important;padding-bottom:6px!important;background:#f5f6f8;border-radius:0} :root body.design-f main.container-fluid>.fact-strip{background:#f5f6f8!important} :root body.design-f main.container-fluid>.help-strip{padding-top:20px!important;padding-bottom:20px!important;background:var(--accent-soft)!important} :root body.design-f main.container-fluid>.home-intro{padding-top:44px!important;padding-bottom:40px!important} /* Search page field becomes a full-width band */ :root body.design-f main.container-fluid>.search-page-form{min-height:68px;border:0!important;border-radius:0;background:#f5f6f8;box-shadow:none!important} :root body.design-f main.container-fluid>.search-page-form:focus-within{background:#fff;box-shadow:inset 0 -2px var(--accent)!important} :root body.design-f main.container-fluid>.search-page-form button{margin-left:auto} /* Strips run edge to edge; their tiles carry their own padding. */ :root body.design-f main.container-fluid>.service-actions,:root body.design-f main .home-block .quick-actions{padding-left:0!important;padding-right:0!important} :root body.design-f main.container-fluid>.home-block{padding-left:0!important;padding-right:0!important} :root body.design-f main .home-block>.section-head{padding:32px var(--d6-pad) 14px!important} :root body.design-f main .home-block>.link-grid{margin:0!important;padding:0 calc(var(--d6-pad) - 12px) 28px!important} /* Column layouts: wrapper spans the width, each column fills the row height and pads itself. */ :root body.design-f main.container-fluid>.split-layout,:root body.design-f main.container-fluid>.panel-grid,:root body.design-f main .search-results{padding-left:0!important;padding-right:0!important;align-items:stretch!important} :root body.design-f main .split-layout>.panel,:root body.design-f main .panel-grid>.panel,:root body.design-f main .split-layout>.panel:first-child,:root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel:nth-child(2n),:root body.design-f main .panel-grid>.panel:nth-child(2n+1),:root body.design-f main .search-results>.panel{padding-left:var(--d6-pad)!important;padding-right:var(--d6-pad)!important} :root body.design-f main .split-layout>.guide-panel{background:#f7f8fa!important;padding-top:6px} :root body.design-f main .home-feed{padding-top:8px} /* Tables: the table spans the width; first and last cells carry the inset. */ :root body.design-f main.container-fluid>.directory-table-wrap,:root body.design-f main .repo-table-wrap{margin:0!important;padding:0!important} :root body.design-f main .directory-table th:first-child,:root body.design-f main .directory-table td:first-child,:root body.design-f main .repo-table th:first-child,:root body.design-f main .repo-table td:first-child{padding-left:var(--d6-pad)} :root body.design-f main .directory-table th:last-child,:root body.design-f main .directory-table td:last-child,:root body.design-f main .repo-table th:last-child,:root body.design-f main .repo-table td:last-child{padding-right:var(--d6-pad)} :root body.design-f main.container-fluid>#repositories{padding-left:0!important;padding-right:0!important} :root body.design-f main #repositories>.repo-status,:root body.design-f main #repositories .repo-index,:root body.design-f main #repositories .repo-filters,:root body.design-f main #repositories>.repo-empty{padding-left:var(--d6-pad)!important;padding-right:var(--d6-pad)!important} :root body.design-f main #repositories .repo-group,:root body.design-f main .repo-group{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;width:100%!important;border:0!important;border-radius:0!important;background:transparent!important} :root body.design-f main #repositories .repo-index{padding-bottom:8px!important} :root body.design-f main.container-fluid>.repo-panel{padding-left:0!important;padding-right:0!important} /* Toolbars and filter rows */ :root body.design-f main.container-fluid>.directory-toolbar,:root body.design-f main.container-fluid>.repo-toolbar{padding-top:4px!important;padding-bottom:16px!important} :root body.design-f main.container-fluid>.filter-chips{padding-bottom:12px!important} :root body.design-f main.container-fluid>:last-child:not(.split-layout):not(.panel-grid){padding-bottom:40px!important} :root body.design-f main.container-fluid>.split-layout:last-child>.panel,:root body.design-f main.container-fluid>.panel-grid:last-child>.panel{padding-bottom:40px} @media(max-width:900px){ :root body.design-f{--d6-pad:16px} :root body.design-f.width-container .app-shell>main.container-fluid,:root body.design-f.width-full .app-shell>main.container-fluid{padding:calc(var(--top) + 46px) 0 0!important} :root body.design-f .topbar{padding-left:var(--d6-pad);padding-right:var(--d6-pad)} :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel+.panel{padding-top:8px} } /* No movement on hover, in every theme: hover changes colour or shadow only. */ :root body .article-card:hover,:root body .person-card:hover,:root body .service-actions a:hover,:root body .quick-links a:hover,:root body .course-grid article:hover,:root body .recommended a:hover,:root body .portal-link-card:hover,:root body .home-quick a:hover,:root body .quick-actions a:hover,:root body .link-row:hover,:root body.design-e main .quick-actions a:hover,:root body.design-e main .service-actions a:hover{transform:none!important} :root body .link-row:hover .link-row-go{transform:none} /* Home: the request tiles no longer have a heading; keep breathing room where themes use gaps. */ :root body:not(.design-b):not(.design-f) main .home-requests{margin-top:20px!important} /* Left navigation group labels: larger and easier to read (Designs 5 and 6). */ :root body.design-e .sidebar nav .nav-group-label{margin-bottom:8px;color:#4b5565;font-size:13px;font-weight:700;letter-spacing:.06em} /* People toolbar (Designs 5 and 6): keep search, filters, and the count on one row. */ :root body.design-e main .directory-search{flex:1 1 260px} :root body.design-e main .directory-control{flex:0 1 210px} :root body.design-e main .directory-results{flex:0 0 auto;margin-left:auto} /* Design 6: square controls, no outlines on buttons. */ :root body.design-f main .action, :root body.design-f main .feed-action, :root body.design-f main .course-action, :root body.design-f main .repo-clear, :root body.design-f main .tabs, :root body.design-f main .tabs a, :root body.design-f main .filter-chips button, :root body.design-f main .repo-views, :root body.design-f main .repo-views button, :root body.design-f main .repo-index a, :root body.design-f main .directory-search, :root body.design-f main .directory-control, :root body.design-f main .repo-search, :root body.design-f main .repo-filters label, :root body.design-f main .pref-option, :root body.design-f main .home-search, :root body.design-f main .home-search button, :root body.design-f main .home-popular a, :root body.design-f main .search-page-form button, :root body.design-f main .link-row, :root body.design-f main .repo-row, :root body.design-f main .feed-item, :root body.design-f main .ticket-row, :root body.design-f main .status-row, :root body.design-f main .course-row, :root body.design-f main .link-row-icon, :root body.design-f main .repo-type-icon, :root body.design-f main .event-date, :root body.design-f main .guide-links a, :root body.design-f .top-search, :root body.design-f .sidebar nav a, :root body.design-f .side-bottom a{border-radius:0!important} :root body.design-f main .action.secondary,:root body.design-f main .feed-action,:root body.design-f main .course-action{border-color:transparent;background:#f2f4f7;color:var(--ink-2)} :root body.design-f main .action.secondary:hover,:root body.design-f main .feed-action:hover,:root body.design-f main .course-action:hover{border-color:transparent;background:#e7eaef;color:var(--ink)} :root body.design-f main .filter-chips button:not([aria-pressed="true"]):hover,:root body.design-f main .repo-index a:hover{background:#e7eaef} :root body.design-e main .directory-control{min-width:220px} @media(max-width:640px){:root body.design-e main .directory-control{min-width:0}} /* ==== Page header: one static block on every page ==== Title plus one line of description, nothing else. Same height, background, and rule on every page within a theme, so moving between pages only changes the words. */ :root body main .page-title{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:var(--page-header-h,104px);margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--line)} :root body main .page-title>:not(h1):not(p):not(.portal-breadcrumb){display:none!important} :root body main .page-title h1{margin:0;font-size:30px;font-weight:650;line-height:1.2;letter-spacing:-.01em} :root body main .page-title p{margin:6px 0 0;padding:0;max-width:none;font-size:15.5px;line-height:1.5} @media(min-width:901px){:root body main .page-title p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} /* Design 2: tinted band, flush with the canvas. */ :root body.design-b main.container-fluid>.page-title{--page-header-h:112px;margin-top:0!important;margin-bottom:0!important;padding:24px 28px!important;background:#f5f7fa;border-bottom:1px solid var(--rule,rgba(83,105,130,.22))!important} /* Design 5: on the canvas with a hairline below. */ :root body.design-e main .page-title{--page-header-h:96px;margin:0 0 22px;padding:0 0 18px;background:transparent;border-bottom:1px solid var(--hair)} :root body.design-e main .page-title h1{font-size:28px} /* Design 6: full-width tinted band with a hairline below. */ :root body.design-f main.container-fluid>.page-title{--page-header-h:116px;margin:0!important;padding-top:24px!important;padding-bottom:22px!important;background:#f5f6f8;border-bottom:1px solid var(--hair)} :root body.design-f main.container-fluid>.portal-breadcrumb{background:#f5f6f8} :root body.design-f main.container-fluid>.portal-breadcrumb+.page-title{padding-top:6px!important;--page-header-h:96px} :root body.design-f main.container-fluid>.page-title+*{padding-top:20px!important} :root body.design-f main.container-fluid>.page-title+.tabs{padding-top:6px!important} :root body.design-f main.container-fluid>.page-title+.split-layout,:root body.design-f main.container-fluid>.page-title+.panel-grid{padding-top:0!important} :root body.design-f main.container-fluid>.page-title+.service-actions{padding-top:0!important} /* Design 4: larger reading type, same structure. */ :root body.design-d main .page-title h1{font-size:32px} /* Sidebar contact button: one per page, separate from Settings and Help. */ :root body .side-bottom .side-contact{display:flex;align-items:center;gap:10px;height:40px;margin:0 0 10px;padding:0 12px;overflow:hidden;background:#e9f2ff;color:#1769d2;font-size:13.5px;font-weight:650;white-space:nowrap;border-radius:8px;opacity:1;transition:background-color .15s ease} :root body .side-bottom .side-contact span{overflow:hidden;text-overflow:ellipsis} :root body .side-bottom .side-contact:hover{background:#d9e8fc;color:#0f57b3} :root body .side-bottom .side-contact .bi{flex:none;color:inherit;font-size:14px} :root body.design-f .side-bottom .side-contact{border-radius:0} /* Header utility (contact, settings, help) as icons where the sidebar is hidden. */ :root body .topbar-utility .side-contact{background:transparent} @media(max-width:900px){ :root body .topbar-utility,:root body:not(.design-a):not(.nav-top) .topbar-utility{display:flex!important;flex:none;gap:0;margin-left:auto} :root body .topbar-utility a{display:grid;place-items:center;width:38px;height:38px;padding:0;color:#4b5565;font-size:16px;background:transparent} :root body.design-a .topbar-utility a{color:rgba(255,255,255,.9)} :root body .topbar-utility a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} :root body .topbar .top-search{flex:1 1 auto;min-width:0;width:auto} } /* Reserve scrollbar space on every page so the header never shifts between short and long pages. */ html{scrollbar-gutter:stable} /* ==== Design 6: hairline structure and second-level heading bands ==== 1px rules separate sections, columns, and list items; section headings (h2) sit on a tinted band that spans the full width of their column. */ :root body.design-f{--d6-rule:#cbd5e1;--d6-rule-soft:#eef0f3;--d6-head-bg:#f3f5f8} /* Second-level heading band */ :root body.design-f main .panel-head, :root body.design-f main .repo-group-head, :root body.design-f main .repo-panel .section-head, :root body.design-f main .home-block>.section-head{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0!important;padding:12px var(--d6-pad)!important;background:var(--d6-head-bg);border-top:1px solid var(--d6-rule);border-bottom:1px solid var(--d6-rule)} :root body.design-f main .home-block>.section-head{margin:0!important} :root body.design-f main .panel-head h2,:root body.design-f main .repo-group-head h2,:root body.design-f main .repo-panel .section-head h2,:root body.design-f main .home-block>.section-head h2{margin:0;font-size:15.5px;font-weight:650;letter-spacing:0} :root body.design-f main .panel-head.stacked{display:block} :root body.design-f main .panel,:root body.design-f main .repo-panel,:root body.design-f main .repo-group{padding-top:0!important} /* Columns: one vertical hairline between them; headings meet edge to edge. */ :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel:nth-child(2n){border-left:1px solid var(--d6-rule)!important} :root body.design-f main .panel-grid>.panel:nth-child(n+3) .panel-head{border-top:0} :root body.design-f main .split-layout>.panel+.panel .panel-head,:root body.design-f main .panel-grid>.panel:nth-child(2n) .panel-head{margin-left:0!important;padding-left:var(--d6-pad)!important} /* Sections: hairline where one ends and the next begins. */ :root body.design-f main.container-fluid>.split-layout,:root body.design-f main.container-fluid>.panel-grid,:root body.design-f main.container-fluid>.panel,:root body.design-f main.container-fluid>.repo-panel{border-bottom:1px solid var(--d6-rule)} :root body.design-f main .home-feed{padding-top:0!important} :root body.design-f main .home-block+.home-block>.section-head,:root body.design-f main .home-feed+.home-block>.section-head{border-top:0} :root body.design-f main .home-requests .quick-actions{border-bottom:1px solid var(--d6-rule)} /* List items: lighter hairline between items, starting at the text edge. */ :root body.design-f main .feed-item+.feed-item, :root body.design-f main .link-rows>li+li, :root body.design-f main .ticket-row+.ticket-row, :root body.design-f main .status-row+.status-row, :root body.design-f main .course-row+.course-row{border-top:1px solid var(--d6-rule-soft)!important} :root body.design-f main .feed-item,:root body.design-f main .ticket-row,:root body.design-f main .status-row,:root body.design-f main .course-row{padding-top:14px;padding-bottom:14px} /* Around the intranet: cells divided by hairlines. */ :root body.design-f main .home-block>.link-grid{padding:0!important;margin:0!important;border-bottom:1px solid var(--d6-rule)} :root body.design-f main .home-block>.link-grid>li{border-right:1px solid var(--d6-rule-soft)!important;border-bottom:1px solid var(--d6-rule-soft)!important;margin:0 -1px -1px 0!important} :root body.design-f main .home-block>.link-grid .link-row{padding:16px var(--d6-pad)!important} :root body.design-f main .home-block>.link-grid{overflow:hidden} @media(max-width:900px){ :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel:nth-child(2n){border-left:0!important} :root body.design-f main .split-layout>.panel+.panel .panel-head,:root body.design-f main .panel-grid>.panel:nth-child(2n) .panel-head{margin-left:calc(var(--d6-pad) * -1)!important;padding-left:var(--d6-pad)!important} :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel+.panel{padding-top:0!important} } :root body .side-bottom .side-contact.active{background:#1769d2;color:#fff} /* Open requests: the whole row is the link, like help-topic rows (all themes). */ :root body .ticket-row{grid-template-columns:118px minmax(0,1fr) 16px;align-items:center;color:var(--text);transition:background-color .15s ease} :root body .ticket-row:hover{background:#f5f7fa} :root body .ticket-row:hover .ticket-copy strong{color:var(--accent,#1769d2)} :root body .ticket-row:hover .link-row-go{color:var(--accent,#1769d2)} :root body .ticket-row .pill{align-self:start;margin-top:2px} :root body .ticket-copy strong{color:var(--text);font-size:15px;font-weight:650;line-height:1.35;transition:color .15s ease} :root body .ticket-row+.ticket-row{border-top:0} :root body .ticket-list>li+li{border-top:1px solid var(--line)} :root body.design-b main.container-fluid .ticket-list>li+li{border-color:var(--rule-soft,rgba(83,105,130,.12))} :root body.design-e main .ticket-list>li+li{border-top:0} :root body.design-f main .ticket-list>li+li{border-top:1px solid var(--d6-rule-soft)!important} :root body.design-f main .ticket-row{border-radius:0} /* Design 6 IT tiles: icon to the left, spanning the title and description. */ :root body.design-f main .service-actions a{display:grid!important;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:2px;height:auto;min-height:88px;padding:18px var(--d6-pad)!important;text-align:left} :root body.design-f main .service-actions .bigicon{position:static!important;grid-row:1/3;grid-column:1;display:grid;place-items:center;width:44px;height:44px;margin:0;font-size:26px;transform:none} :root body.design-f main .service-actions a b{grid-column:2;grid-row:1;align-self:end;margin:0} :root body.design-f main .service-actions a small{grid-column:2;grid-row:2;align-self:start;margin:0} /* Design 6: no gap between the tile strip and the section below. */ :root body.design-f main.container-fluid>.service-actions+.split-layout,:root body.design-f main.container-fluid>.service-actions+*{padding-top:0!important} /* Design 6: the column divider continues through the heading band, a shade darker. */ :root body.design-f{--d6-col-rule:#d5dae1} :root body.design-f main .split-layout>.panel+.panel,:root body.design-f main .panel-grid>.panel:nth-child(2n){border-left-color:var(--d6-col-rule)!important} :root body.design-f main .split-layout>.panel+.panel .panel-head,:root body.design-f main .panel-grid>.panel:nth-child(2n) .panel-head{margin-left:calc(var(--d6-pad) * -1)!important;padding-left:var(--d6-pad)!important} @media(max-width:900px){ :root body.design-f main .service-actions a{padding:16px var(--d6-pad)!important} } :root body.design-f main .service-actions .bigicon i{position:static!important;inset:auto!important;transform:none!important;margin:0!important;line-height:1;color:inherit} :root body.design-f main .service-actions a{grid-template-columns:38px minmax(0,1fr);column-gap:12px;padding:18px 16px 18px var(--d6-pad)!important} :root body.design-f main .service-actions .bigicon{width:38px;height:38px;font-size:24px} :root body.design-f main .service-actions a b{font-size:14.5px} :root body.design-f main .service-actions a small{font-size:13px;line-height:1.4} /* Whole-row hover and click for list rows whose title is the link (all themes). The title's link is stretched over the row; secondary links (RSVP, owner, request access) sit above it and stay independently clickable. Hover shades the row and colours the title; no underline. */ :root body .feed-item,:root body .repo-row,:root body .repo-table tbody tr{position:relative;transition:background-color .15s ease} :root body .feed-item:hover,:root body .repo-row:hover,:root body .repo-table tbody tr:hover{background:#f5f7fa} :root body .feed-title::after,:root body .repo-row .repo-name::after,:root body .repo-table .repo-name::after{content:"";position:absolute;inset:0;z-index:0} :root body .feed-item a:not(.feed-title),:root body .repo-row a:not(.repo-name),:root body .repo-table a:not(.repo-name){position:relative;z-index:1} :root body .feed-title,:root body .feed-title:hover,:root body .repo-name,:root body .repo-name:hover{text-decoration:none} :root body .feed-item:hover .feed-title,:root body .repo-row:hover .repo-name,:root body .repo-table tbody tr:hover .repo-name{color:var(--accent,#1769d2)} :root body .feed-item:hover .repo-name .bi,:root body .repo-row:hover .repo-name .bi{color:var(--accent,#1769d2)} :root body .feed-title:focus-visible,:root body .repo-name:focus-visible{outline:0} :root body .feed-item:has(.feed-title:focus-visible),:root body .repo-row:has(.repo-name:focus-visible),:root body .repo-table tbody tr:has(.repo-name:focus-visible){outline:3px solid rgba(36,112,213,.42);outline-offset:-3px} :root body .feed-item{cursor:pointer} :root body main .page-title .title-parent{color:inherit;text-decoration:none;transition:color .15s ease} :root body main .page-title .title-parent:hover{color:var(--accent,#1769d2)} :root body main .page-title .title-sep{margin:0 .35em;color:#8a94a3;font-weight:400} /* Design 6 tab bar: its own bottom rule on every page, and tabs that fill the bar from the header rule to the bar's bottom rule (no padding around the tab boxes). */ :root body.design-f main.container-fluid>.tabs, :root body.design-f main.container-fluid>.page-title+.tabs{display:flex;align-items:stretch;gap:0;min-height:48px;padding-top:0!important;padding-bottom:0!important;border-top:1px solid #e5e7eb!important;border-bottom:1px solid #e5e7eb!important;box-shadow:none} :root body.design-f main.container-fluid>.tabs a{display:flex;align-items:center;min-height:0;height:auto;margin:0;padding:0 18px;border-radius:0!important;box-shadow:none!important} :root body.design-f main.container-fluid>.tabs a.active,:root body.design-f main.container-fluid>.tabs a[aria-current]{background:#fff;box-shadow:none!important} :root body.design-f main.container-fluid>.tabs a:first-child{margin-left:-18px} /* Avoid a double rule where a section heading band follows the tab bar. */ :root body.design-f main.container-fluid>.tabs+.panel-grid>.panel:nth-child(-n+2)>.panel-head, :root body.design-f main.container-fluid>.tabs+.split-layout>.panel>.panel-head, :root body.design-f main.container-fluid>.tabs+.panel>.panel-head{border-top:0} :root body.design-f main.container-fluid>.tabs+*{padding-top:0!important} :root body.design-f main.container-fluid>.tabs+.fact-strip{padding-top:0!important} /* Design 6: interactive rows and tabs span their full container; text keeps its inset through internal padding (--d6-pad), so hover/selected fills reach edge to edge. */ /* Tabs: first tab box starts at the content edge; its text stays aligned with the title. */ :root body.design-f main.container-fluid>.tabs{padding-left:0!important;padding-right:0!important} :root body.design-f main.container-fluid>.tabs a:first-child{margin-left:0!important;padding-left:var(--d6-pad)!important;padding-right:18px} /* Lists bleed to the column edges; rows pad their own content back to the inset. */ :root body.design-f main .link-rows, :root body.design-f main .feed-list, :root body.design-f main .ticket-list, :root body.design-f main .status-list, :root body.design-f main .course-list, :root body.design-f main .repo-list, :root body.design-f main .guide-links{margin:0 calc(var(--d6-pad) * -1)!important;padding:0!important} :root body.design-f main .link-grid.inset{margin:0!important;padding:0!important;width:100%!important} :root body.design-f main .link-row, :root body.design-f main .feed-item, :root body.design-f main .feed-list.large .feed-item, :root body.design-f main .ticket-row, :root body.design-f main .status-row, :root body.design-f main .course-row, :root body.design-f main .repo-row, :root body.design-f main .guide-links a{padding-left:var(--d6-pad)!important;padding-right:var(--d6-pad)!important;border-radius:0!important} :root body.design-f main .link-row,:root body.design-f main .feed-item,:root body.design-f main .ticket-row,:root body.design-f main .course-row,:root body.design-f main .repo-row{padding-top:14px!important;padding-bottom:14px!important} :root body.design-f main .status-row{padding-top:12px!important;padding-bottom:12px!important} :root body.design-f main .guide-links a{padding-top:12px!important;padding-bottom:12px!important} /* Rows start directly under the heading band and end on the section's bottom rule. */ :root body.design-f main .panel-head,:root body.design-f main .repo-group-head,:root body.design-f main .repo-panel .section-head{margin-bottom:0!important} :root body.design-f main .panel,:root body.design-f main .repo-panel,:root body.design-f main .repo-group{padding-bottom:0!important} :root body.design-f main .panel-head.stacked+.link-rows,:root body.design-f main .panel-head.stacked+.preferences{margin-top:0!important} /* Inset link grid (e.g., IT help topics): each cell spans its column. */ :root body.design-f main .link-grid.inset>li{margin:0!important} :root body.design-f main .link-grid.inset .link-row{height:100%} /* Guide column text keeps the inset; its links bleed like rows. */ :root body.design-f main .guide-text{padding:16px 0 8px!important} :root body.design-f main .guide-links{border-top:1px solid var(--d6-rule-soft)} :root body.design-f main .guide-links a+a{border-top:1px solid var(--d6-rule-soft)} :root body.design-f main .guide-links a:hover{background:#f5f7fa} /* ==== Typeface: Inter, everywhere ==== Inter is loaded from Google Fonts on every page (optical sizes 14–32, weights 400–700). All themes read --font-organizational; system fonts remain the fallback. */ :root{--font-organizational:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif} :root body,:root body.design-a,:root body.design-b,:root body.design-c,:root body.design-d,:root body.design-e,:root body.design-f{font-family:var(--font-organizational);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} :root body button,:root body input,:root body select,:root body textarea{font-family:inherit} /* Inter reads best slightly tighter at display sizes and with tabular figures in data. */ :root body h1,:root body .home-intro h1{letter-spacing:-.022em} :root body h2,:root body .panel-head h2{letter-spacing:-.011em} :root body .fact strong,:root body .event-date strong,:root body .directory-results,:root body .repo-status,:root body .repo-index a span,:root body .ticket-copy span,:root body .status-label,:root body .directory-table td,:root body .repo-table td{font-variant-numeric:tabular-nums} :root body.design-a .topbar .top-nav a{padding:0 7px;font-size:13px} :root body.design-a .topbar{gap:16px} :root body .home-intro{grid-template-columns:minmax(0,1fr)} :root body .home-intro>*{min-width:0} :root body .home-search input{min-width:0} :root body .side-bottom a.active:not(.side-contact){background:#e9f2ff;color:#1769d2;font-weight:600} :root body .side-bottom a.active:not(.side-contact) .bi{color:#1769d2} :root body .sidebar a.brand{color:inherit;text-decoration:none;border-radius:8px;transition:opacity .15s ease} :root body .sidebar a.brand:hover{opacity:.8} :root body.design-f .sidebar a.brand{border-radius:0} @media(max-width:900px){:root body .topbar .topbar-brand{display:flex!important;flex:none;align-items:center;height:38px;padding-right:4px;color:inherit}:root body .topbar .topbar-brand b{display:none}} @media(max-width:900px){:root body .topbar .topbar-brand{margin-right:10px}} /* Design 6 sidebar: items span the full sidebar width; inner padding keeps text in place (logo at 22px, labels and links at 24px from the edge). Group labels get a darker band. */ :root body.design-f .sidebar{padding-left:0;padding-right:0} :root body.design-f .sidebar .brand{margin:0;padding:0 22px} :root body.design-f .sidebar nav .nav-group,:root body.design-f .sidebar nav .nav-group-items{gap:0} :root body.design-f .sidebar nav a,:root body.design-f .side-bottom a{margin:0;padding:0 24px;border-radius:0!important} :root body.design-f .sidebar nav .nav-group-label{margin:0 0 2px;padding:7px 24px;background:#e9ecf0;color:#3f4957;border-radius:0} :root body.design-f .sidebar nav .nav-group+.nav-group{margin-top:18px} :root body.design-f .side-bottom{padding-left:0;padding-right:0} :root body.design-f .side-bottom .side-contact{margin:0 0 6px;padding:0 24px} :root body.design-f .side-bottom a{margin-top:0} /* Design 1 has no sidebar; keep it hidden over the shared sidebar layout rule. */ :root body.design-a .sidebar{display:none!important} /* Design 6 sidebar: no vertical gaps; rows, labels, and groups sit flush. */ :root body.design-f .sidebar nav .nav-group+.nav-group{margin-top:0} :root body.design-f .sidebar nav .nav-group-label{margin:0} :root body.design-f .sidebar nav .nav-group:first-child .nav-group-items{margin-bottom:0} :root body.design-f .side-bottom .side-contact{margin:0} /* Design 6 sidebar: a little more height per row so the flush list does not feel condensed. */ :root body.design-f .sidebar nav a,:root body.design-f .side-bottom a,:root body.design-f .side-bottom .side-contact{height:42px} :root body.design-f .sidebar nav .nav-group-label{padding-top:10px;padding-bottom:10px} /* Short "HR" label in Design 1's single-row bar on narrow desktop widths. */ :root body .top-nav .label-short{display:none} @media(max-width:1200px) and (min-width:901px){ :root body.design-a .top-nav .label-long{display:none} :root body.design-a .top-nav .label-short{display:inline} :root body.design-a .topbar .top-nav a{padding:0 5px} } @media(max-width:1040px) and (min-width:901px){:root body.design-a .topbar .top-nav a{font-size:12.5px;padding:0 4px}:root body.design-a .topbar{gap:12px}} /* Design 1 single-row bar: always use short names for long departments. */ :root body.design-a .top-nav .label-long{display:none} :root body.design-a .top-nav .label-short{display:inline} @media(max-width:1040px) and (min-width:901px){:root body.design-a .topbar .top-nav a{padding:0 3px}}