/* =========================================================================== COUNTERPIVOT HUB, DESIGN SYSTEM (brand name lives only in config.js + logo.svg) DIRECTION: "THE MIDNIGHT DOCKET" This market runs on coded instruments: a solicitation is a title, an identifier, a NAICS code and a closing clock. The whole site now works the way that market is actually watched: after hours, on a dark desk, on a live board. One continuous midnight ground runs under every page; sections are not stacked rectangles of different colours but pools of light on the same material. Panels are glass lifted off the ground; every coded value is set in the data face and the data itself is what glows. THREE TYPEFACES, THREE JOBS (unchanged) --f-display Archivo, widened (wdth 112..120) and heavy. Monumental, signage-derived. Headlines and figures only. --f-body Public Sans. The U.S. Web Design System's own face, the typeface of the government this curriculum is about. --f-mono JetBrains Mono. Every coded value: tier codes, counts, prices, deadlines, opportunity numbers. Never used decoratively. COLOUR CounterPivot's navy / green / grey, redistributed again. Navy is now the room itself. Green is the live signal: grants, active state, progress, the light the board runs on. A steel blue within the navy family marks the contract half of the market. Gold stays reserved for the certificate register, and nothing else. Paper survives only where a thing IS a document: the certificate cards, lit like paper on the dark desk. CONTRAST RULES (re-derived for the dark ground, still enforced) · green-500 and gold-500 remain FILLS AND ICON SHAPES on light surfaces · on the dark ground, measured on the glass panel (#192739 effective): on-navy 11.5:1 · on-navy-soft 8.1:1 · on-navy-mute 6.2:1 green-400 8.5:1 · gold-500 7.0:1 · steel 7.1:1 · danger-300 6.8:1 · button ink #08172A on green-500 7.5:1, on gold-500 8.4:1 · every text/background pair is >= 4.5:1, every meaningful icon >= 3:1 DEPTH No surface is a flat fill. The ground carries two fixed off-axis glows and a grain plate; heroes and deep sections add a ruled plotting grid; every raised panel is a translucent glass step with a lit top edge and a doubled shadow. Light arrives from the content, not from a lamp. =========================================================================== */ :root{ color-scheme:dark; /* ------------------------------------------------ navy: the room itself */ --abyss:#050C17; /* the floor beneath everything */ --navy-950:#08172A; --navy-900:#0E2038; /* opaque panels: modals, menus, form controls */ --navy-800:#132B48; --navy-700:#1B3A5C; --navy-600:#27527E; /* the blue glow partner, never text */ --navy-100:#DDE5F1; --navy-050:#EAEFF7; --navy-line:#C2CFE0; /* --------------------------------------- steel: the contract half, blue */ /* The navy family, promoted to a signal. Text-safe on every dark surface: 8.5:1 on navy-950, 7.1:1 on the glass panel. */ --steel-400:#A9CBEF; /* contract figures, the brighter step */ --steel-500:#8FB6E0; /* contract accent: dots, spines, chips */ /* ------------------------------------------------------- brand green */ --green-500:#79B928; /* THE brand green: fills, progress, logo emblem */ --green-400:#94D53C; /* green as text on dark, 8.5:1 on the glass panel */ --green-700:#456E15; /* green as text on the light document cards */ --green-800:#3E6612; --green-050:#EFF7E2; --green-line:#CCE2A8; /* --------------------------- gold: the certificate register, and nothing else */ --gold-500:#E8A33D; /* seals, ratings, badges; text-safe on dark, 7.0:1 */ --gold-300:#F2C784; /* gold prose on dark gold-tinted panels, 7.7:1 */ --gold-600:#B8801F; --gold-700:#9A6A15; --gold-800:#8A5D10; /* the only gold usable as text on the gold tint */ --gold-050:#FCF3E5; --gold-line:#EBD2A0; /* ------------------------------------------------------------ surfaces */ /* The glass steps. Two translucent lifts over the ground, plus one opaque panel for the things that must not let the page bleed through: modals, dropdown menus, form controls. */ --panel:linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); --panel-2:linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); --panel-solid:#0E2038; --panel-line:rgba(255,255,255,.13); /* the standing hairline on glass */ --panel-line-strong:rgba(255,255,255,.22); --hairline:rgba(255,255,255,.10); /* section separations */ /* Paper survives as the material of DOCUMENTS: certificate cards only. */ --paper:#E7EBF1; --paper-2:#DDE3EC; --white:#FFFFFF; --page:var(--paper); --cream:var(--paper-2); /* ---------------------------------------------------------------- text */ --ink-900:#0C1A2B; /* body text on the paper documents */ --ink-700:#33465B; --ink-500:#556577; --line:#CBD3DF; /* hairline on the paper documents */ --neutral-050:#E4E8EF; --danger:#B3261E; /* danger on light (document) surfaces */ --danger-300:#F2948C; /* danger as text on dark, 6.8:1 on the glass panel */ --on-navy:#D6E2F0; /* body text on the ground, 13.7:1 */ --on-navy-soft:#AEC0D6;/* secondary, 9.7:1 */ --on-navy-mute:#93A8C2;/* tertiary and coded labels, 7.4:1 */ /* -------------------------------------------------------- atmosphere */ /* One grain plate, held once and reused. feTurbulence rather than an image so nothing is fetched and it costs no request from file://. */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* The ruled plotting field behind heroes and deep pools: a form grid, not decoration. */ --rule-dark:rgba(255,255,255,.05); --rule-light:rgba(12,26,43,.045); /* --------------------------------------------------------- elevation */ /* Two shadows per step: a tight contact shadow and a wide ambient one. Deeper than the light build; shadow has to work harder on a dark ground. */ --shadow-xs:0 1px 1px rgba(0,0,0,.25); --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 3px 9px -1px rgba(0,0,0,.28); --shadow-md:0 1px 2px rgba(0,0,0,.32), 0 12px 28px -8px rgba(0,0,0,.5); --shadow-lg:0 2px 6px rgba(0,0,0,.36), 0 30px 64px -16px rgba(0,0,0,.62); --shadow-glow:0 0 0 1px rgba(121,185,40,.32), 0 10px 36px -8px rgba(121,185,40,.3); --shadow-glow-steel:0 0 0 1px rgba(143,182,224,.3), 0 10px 36px -8px rgba(143,182,224,.22); --edge:inset 0 1px 0 rgba(255,255,255,.85); /* lit top edge of paper */ --edge-dark:inset 0 1px 0 rgba(255,255,255,.09); /* lit top edge of glass */ --ring:0 0 0 3px rgba(121,185,40,.30); /* Modest radii with lit edges. Zero-radius reads as a broadsheet template; a big pill reads as decoration. This is precision, not either of those. */ --r:10px; --r-sm:7px; --r-lg:16px; --r-btn:6px; --ease:cubic-bezier(.22,.68,.24,1); --ease-out:cubic-bezier(.16,1,.3,1); /* --------------------------------------------------------- typography */ --f-display:'Archivo','Archivo Expanded','Helvetica Neue',Arial,sans-serif; --f-body:'Public Sans','Libre Franklin','Helvetica Neue',Arial,sans-serif; --f-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace; /* One scale, stated once. Every heading on the site is drawn from it. */ --t-hero:clamp(37px,5.5vw,74px); --t-h1:clamp(31px,4.8vw,60px); --t-h2:clamp(25px,3.5vw,44px); --t-h3:clamp(17px,1.5vw,20px); --t-lede:clamp(16.5px,1.75vw,21px); --t-code:11.5px; --wrap:1220px; --gut:clamp(18px,3.6vw,40px); --nav-h:70px; } /* --------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--abyss)} body{ margin:0;color:var(--on-navy); font-family:var(--f-body);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; /* The room: one continuous midnight ground under every page. Two fixed off-axis glows (the green working light top right, the blue ambient low left) so scrolling moves the content through the light rather than sliding a backdrop behind it. */ background: radial-gradient(110% 70% at 86% -4%, rgba(121,185,40,.11), transparent 55%), radial-gradient(120% 80% at -6% 104%, rgba(39,82,126,.38), transparent 60%), linear-gradient(172deg, var(--navy-950) 0%, var(--abyss) 62%, #030910 100%); background-attachment:fixed; } /* Grain over the whole room, at the threshold of visibility. It is what stops a large dark area from reading as a dead #hex swatch. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:var(--grain);background-size:160px 160px; opacity:.05;mix-blend-mode:overlay; } body>*{position:relative;z-index:1} img,svg{max-width:100%} img{height:auto;display:block} a{color:var(--green-400);text-underline-offset:2px} a:hover{color:#fff} h1,h2,h3,h4{ font-family:var(--f-display);color:#fff;margin:0 0 .45em; font-weight:800;font-stretch:114%;line-height:1.06;letter-spacing:-.032em; text-wrap:balance; } /* PAGE AND SECTION TITLES take the course player's own heading treatment: Archivo at its heaviest, uppercase, wide. It is the most distinctive setting in the product, so the marketing pages now open the same way a course does. Card titles (h3/h4) stay mixed case: at 15-17px, uppercase stops being readable and starts being decoration. */ h1,h2, .hero h1,.detail-hero h1,.sec-head h2,.track-head h2,.tier-head h2{ font-weight:900;text-transform:uppercase;letter-spacing:-.015em; } .hero h1{letter-spacing:-.02em} h1{font-size:var(--t-h1);margin-bottom:.32em} h2{font-size:var(--t-h2)} h3,h4{font-stretch:104%;letter-spacing:-.022em;line-height:1.2} h3{font-size:var(--t-h3)} p{margin:0 0 1em;text-wrap:pretty} /* The standing intro paragraph under a page title. One rule, so a page head never has to carry its own inline type. */ .lede{font-size:var(--t-lede);color:var(--on-navy-soft);max-width:62ch;line-height:1.56} /* A heading that labels a band inside a page rather than opening it. */ .sub-head{margin-bottom:16px} .sub-head h2,h2.sub-h{font-size:19px;margin:0} button{font-family:inherit} b,strong{font-weight:700} ::selection{background:var(--green-500);color:#08172A} :focus-visible{outline:2.5px solid var(--green-400);outline-offset:2px;border-radius:5px} /* The paper documents are the one light surface left, so they carry the light-safe focus ring. */ .cert :focus-visible,.tier-cert :focus-visible{outline-color:var(--green-700)} /* anchors land below the sticky nav */ :target{scroll-margin-top:calc(var(--nav-h) + 20px)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .narrow{max-width:920px} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green-500);color:#08172A;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700;text-decoration:none} .skip:focus{left:0} .hr{height:1px;background:var(--hairline);border:0;margin:0} /* =========================================================================== MOTION, the page-load orchestration --------------------------------------------------------------------------- The load sequence is pure CSS with animation-fill-mode:both, so the initial (hidden) state comes from the keyframe itself. Nothing depends on JS: if assets/motion.js never arrives, every element still animates in. JS is only used for scroll reveals, and there it ADDS the hidden state before observing, so a JS failure leaves the page fully visible rather than blank. Elements opt in with .rise and order themselves with --d (their beat in the sequence). One rhythm, one easing, used everywhere. =========================================================================== */ @keyframes rise{ from{opacity:0;transform:translate3d(0,22px,0);filter:blur(7px)} to {opacity:1;transform:none;filter:blur(0)} } @keyframes draw{ from{transform:scaleX(0)} to{transform:scaleX(1)} } @keyframes bloom{ from{opacity:0;transform:scale(.82)} to {opacity:1;transform:none} } @keyframes gridin{ from{opacity:0} to{opacity:1} } /* The urgency pulse: a ring of light leaving a critical deadline's dot. Used only where the data itself is urgent; a pulse everywhere is a pulse nowhere. */ @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(242,148,140,.55)} 75%{box-shadow:0 0 0 8px rgba(242,148,140,0)} 100%{box-shadow:0 0 0 0 rgba(242,148,140,0)} } .rise{animation:rise .82s var(--ease-out) both;animation-delay:var(--d,0ms)} /* Scroll reveals. .reveal is inert until motion.js marks the document, so the content is visible by default and only becomes animated once JS is running. */ /* The reveal moves elements with `translate`, NOT `transform`. Several of the things that reveal also carry a transform of their own (the ladder's --drop offset, a card's hover lift) and a `transform:none` on the revealed state would silently cancel them. The individual property composes instead. */ [data-motion="on"] .reveal{opacity:0;translate:0 26px;filter:blur(6px)} [data-motion="on"] .reveal.in{ opacity:1;translate:none;filter:blur(0); transition:opacity .78s var(--ease-out),translate .78s var(--ease-out),filter .78s var(--ease-out); transition-delay:calc(var(--i,0) * 70ms); } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-delay:0ms!important; transition-duration:.001ms!important;transition-delay:0ms!important; } [data-motion="on"] .reveal{opacity:1;translate:none;filter:none} } /* ============================================================== TOP NAV */ /* Dark glass over the room. min-height is reserved so the JS-rendered nav cannot shift the page. */ .nav{ position:sticky;top:0;z-index:100;min-height:var(--nav-h); background:rgba(5,12,23,.72); -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--hairline); transition:box-shadow .25s var(--ease),background .25s var(--ease); animation:rise .6s var(--ease-out) both; } .nav.is-scrolled{box-shadow:0 1px 0 rgba(255,255,255,.06),0 18px 40px -18px rgba(0,0,0,.7);background:rgba(5,12,23,.88)} .nav-in{display:flex;align-items:center;gap:14px;height:var(--nav-h)} .logo-link{display:flex;align-items:center;flex:none;text-decoration:none;border-radius:6px} /* The lockup is real markup, not an image: the emblem inherits colour and the wordmark renders in the display face at any size. */ .lockup{display:inline-flex;align-items:center;gap:10px;line-height:1} .lockup .emblem{width:34px;height:22.2px;flex:none;color:var(--green-500);display:block; filter:drop-shadow(0 0 10px rgba(121,185,40,.35))} .lockup .word{ font-family:var(--f-display);font-size:19px;font-weight:500;font-stretch:108%; letter-spacing:-.03em;color:#fff;white-space:nowrap; } .lockup .word b{font-weight:800} .lockup.on-dark .word{color:#fff} @media (max-width:400px){ .lockup .word{font-size:17px} .lockup .emblem{width:30px;height:19.6px} } /* The Academy pair, left of the search box. Same dress as the right-hand links, so the bar reads as one row of doors split by the search field. */ .nav-left{display:flex;align-items:center;gap:2px;flex:none} .search{position:relative;flex:1;max-width:480px;min-width:150px} .search input{ width:100%;font:inherit;font-size:14px;padding:11px 16px 11px 42px; border:1px solid var(--panel-line);border-radius:999px; background:rgba(255,255,255,.055);color:#fff; transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease); } .search input::placeholder{color:var(--on-navy-mute)} .search input:hover{border-color:var(--panel-line-strong);background:rgba(255,255,255,.08)} .search input:focus{outline:none;border-color:var(--green-500);background:rgba(255,255,255,.08);box-shadow:var(--ring)} .search .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--on-navy-mute);pointer-events:none} .search button[type=submit]{position:absolute;left:-9999px} .nav-right{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none} .nav-right a,.nav-right button.linky,.nav-left a{ font-size:13.5px;font-weight:600;color:var(--on-navy);text-decoration:none; padding:9px 9px;border-radius:var(--r-sm);background:none;border:0;cursor:pointer;white-space:nowrap; transition:background .15s var(--ease),color .15s var(--ease); } .nav-right a:hover,.nav-right button.linky:hover,.nav-left a:hover{background:rgba(255,255,255,.08);color:#fff} /* The current page is marked with the accent rule, not a grey pill: the same "you are here" device the eyebrow rule uses further down the page. */ .nav-right a[aria-current="page"],.nav-left a[aria-current="page"]{color:#fff;position:relative} .nav-right a[aria-current="page"]::after,.nav-left a[aria-current="page"]::after{ content:"";position:absolute;left:9px;right:9px;bottom:2px;height:2px; background:var(--green-500);border-radius:2px; box-shadow:0 0 8px rgba(121,185,40,.6); } /* The Academy pair is duplicated into the burger drawer and hidden above it; below the burger width the pair beside the search box hides instead. */ .nav-right .only-sm{display:none} .nav-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--panel-line);border-radius:var(--r-sm);width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;color:#fff} /* Six sections plus a search box outgrew the page's 1220px measure, so the toolbar gets its own wider cap; body copy keeps the reading width. */ .nav .wrap{max-width:1560px} @media (max-width:1500px){ .nav-right a,.nav-right button.linky,.nav-left a{padding:9px 9px;font-size:13.5px} } /* SLED joined the bar, so the rooms tighten before any of them are dropped. Losing a whole product to a breakpoint is worse than losing two pixels of padding, and between here and the burger there is room for both. */ @media (max-width:1320px){ .nav-in{gap:11px} .nav-right{gap:0} .nav-right a,.nav-right button.linky,.nav-left a{padding:9px 7px;font-size:13px} } /* Between here and the burger there is no honest room for the search box; a pill squeezed into a circle is worse than no box. The catalog page carries its own search and its own filters, which is where browsing by tier and category belongs. */ @media (max-width:1420px){ .nav .search{display:none} } /* Only now, with the padding already spent, do the two quietest rooms step out. They come straight back in the burger drawer below 880. */ @media (max-width:1120px){ .nav-right .hide-md{display:none} } @media (max-width:880px){ .nav-in{gap:10px} .nav-toggle{display:inline-flex} .nav-left,.search{display:none} .nav-right{display:none;position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column; align-items:stretch;gap:0;background:rgba(8,23,42,.98);border-bottom:1px solid var(--panel-line); box-shadow:var(--shadow-lg);padding:8px var(--gut) 18px;max-height:calc(100dvh - var(--nav-h));overflow-y:auto} .nav-right.open{display:flex} .nav-right a,.nav-right button.linky{padding:14px 6px;border-bottom:1px solid var(--hairline);border-radius:0;text-align:left} .nav-right a[aria-current="page"]::after{left:0;right:auto;width:18px;bottom:10px} .nav-right .btn{margin-top:14px;text-align:center;justify-content:center} .nav-right .hide-md{display:block} .nav-right .only-sm{display:block} .m-search{display:block!important} } .m-search{display:none;padding:10px 0 14px} /* The catalog's in-page filter wears the same search dress at every width; only the nav's mobile search hides and shows. */ .search.page-filter{display:block;max-width:520px;margin:20px 0 18px;padding:10px 0 14px} /* ============================================================== BUTTONS */ /* On a dark ground the accent itself is the primary fill, everywhere: the strongest call any page makes, in the colour that carries live state. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--f-body);font-weight:700;font-size:14.5px;line-height:1;letter-spacing:-.005em; padding:13px 22px;border-radius:var(--r-btn);border:1.5px solid var(--green-500);cursor:pointer; text-decoration:none;background:var(--green-500);color:#08172A;position:relative;overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.4),0 12px 30px -10px rgba(121,185,40,.45); transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease), transform .18s var(--ease),box-shadow .22s var(--ease); } /* The sweep: a lighter plate crossing the fill on hover, arriving rather than just switching on. z-index:-1 inside the button's own stacking context, so the sweep paints over the fill but under the label, which is often a bare text node and so cannot be lifted with a z-index of its own. */ .btn{isolation:isolate} .btn::after{ content:"";position:absolute;inset:0;z-index:-1;background:#fff; transform:translate3d(-101%,0,0);transition:transform .38s var(--ease-out); } .btn:hover{color:#08172A;transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.4),0 16px 38px -10px rgba(121,185,40,.6)} .btn:hover::after{transform:none} .btn:active{transform:translateY(0)} .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none} .btn.ghost::after{background:#fff} .btn.ghost:hover{color:var(--navy-950);border-color:#fff;box-shadow:var(--shadow-sm)} .btn.dark{background:var(--abyss);border-color:var(--abyss);color:#fff} .btn.dark::after{background:var(--green-500)} .btn.dark:hover{color:#08172A} .btn.sm{padding:9px 15px;font-size:13px} .btn.lg{padding:17px 32px;font-size:16px} .btn.block{width:100%} .btn[disabled],.btn.is-disabled{opacity:.42;cursor:not-allowed;pointer-events:none} .btn-row{display:flex;flex-wrap:wrap;gap:11px} .on-dark .btn.ghost,.sec.dark .btn.ghost,.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.36)} .on-dark .btn.ghost::after,.sec.dark .btn.ghost::after,.hero .btn.ghost::after{background:#fff} .on-dark .btn.ghost:hover,.sec.dark .btn.ghost:hover,.hero .btn.ghost:hover{color:var(--navy-950);border-color:#fff} /* ================================================================ CHIPS */ /* Every chip is a coded value, so every chip is set in the data face. */ .chip{ display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);text-transform:uppercase; font-size:11px;font-weight:500;letter-spacing:.04em; padding:5px 11px;border-radius:999px;border:1px solid var(--panel-line); background:rgba(255,255,255,.055);color:var(--on-navy-soft);white-space:nowrap; } .chip.free{background:rgba(121,185,40,.14);border-color:rgba(148,213,60,.38);color:var(--green-400);font-weight:600} .chip.live{background:rgba(143,182,224,.12);border-color:rgba(143,182,224,.3);color:var(--steel-400)} .chip.program{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:var(--navy-950);font-weight:600} .chip.soon,.chip.production{background:rgba(255,255,255,.04);border-color:var(--hairline);color:var(--on-navy-mute)} .chip.gold{background:rgba(232,163,61,.12);border-color:rgba(232,163,61,.36);color:var(--gold-500)} .chip.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .chip.free.dot::before{background:var(--green-500);box-shadow:0 0 7px rgba(121,185,40,.8)} /* filter chips */ .filters{display:flex;flex-wrap:wrap;gap:8px} .fchip{ font-family:var(--f-mono);text-transform:uppercase;font-size:12.5px;font-weight:500;letter-spacing:.01em; padding:9px 15px;border-radius:999px; border:1px solid var(--panel-line);background:rgba(255,255,255,.045);color:var(--on-navy);cursor:pointer;white-space:nowrap; box-shadow:var(--shadow-xs); transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease), box-shadow .16s var(--ease),transform .16s var(--ease); } .fchip:hover{border-color:var(--panel-line-strong);color:#fff;background:rgba(255,255,255,.09);transform:translateY(-1px)} .fchip:active{transform:translateY(0) scale(.97)} .fchip[aria-pressed="true"]{background:var(--green-500);border-color:var(--green-500);color:#08172A;font-weight:600; box-shadow:0 0 0 1px rgba(121,185,40,.3),0 6px 18px -6px rgba(121,185,40,.55)} /* ============================================================ SECTIONS */ /* Sections are pools of light on one continuous ground, separated by hairlines rather than by changes of material. */ .sec{padding:clamp(48px,6.4vw,96px) 0;position:relative} .sec.tight{padding:clamp(30px,4vw,52px) 0} /* The lifted band: one glass step up from the room, with its own hairlines, so it reads as a distinct plate without breaking the material. */ .sec.tint{ background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border-block:1px solid var(--hairline); } .sec.accent{background:rgba(121,185,40,.07);border-block:1px solid rgba(148,213,60,.22)} /* The deep pool: the room's darkest reach, with its own glow field, the ruled plotting grid, and grain. Three layers, none of them a flat fill. */ .sec.dark{ background: radial-gradient(90% 120% at 88% 0%, rgba(121,185,40,.14), transparent 58%), radial-gradient(80% 110% at 4% 100%, rgba(39,82,126,.4), transparent 62%), linear-gradient(170deg, rgba(0,0,0,.22), rgba(0,0,0,.42)); color:var(--on-navy);position:relative;overflow:hidden;isolation:isolate; border-block:1px solid var(--hairline); } .sec.dark::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(var(--rule-dark) 1px,transparent 1px), linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px); background-size:74px 74px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%); } .sec.dark::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:160px 160px;opacity:.05; } .sec.dark h1,.sec.dark h2,.sec.dark h3{color:#fff} .sec.dark a{color:var(--green-400)} /* A link that is a button keeps the button's ink; without this, the deep pool's link colour outranks .btn and paints green text on the green fill. */ .sec.dark a.btn{color:#08172A} /* -------------------------------------------------- the docket rail */ /* A section that carries a code gets the rail: the eyebrow sits alone in a narrow left column and the heading is indented past it. This is the one structural device the page repeats, and it only appears where a section is actually coded; a head with no eyebrow stays a plain block. */ /* Scoped to a DIRECT eyebrow child on purpose: .head-row keeps its eyebrow one level down inside a wrapper, and must stay a flex row with its action button pinned to the far end rather than becoming a rail. */ .sec-head{margin-bottom:clamp(24px,3.2vw,44px)} .sec-head:has(>.eyebrow){ display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:4px clamp(20px,3.4vw,56px);align-items:start; } .sec-head:has(>.eyebrow)>.eyebrow{grid-column:1;grid-row:1;margin:0;padding-top:.7em} .sec-head:has(>.eyebrow)>h1,.sec-head:has(>.eyebrow)>h2{grid-column:2;grid-row:1} .sec-head:has(>.eyebrow)>p{grid-column:2} @media (max-width:820px){ .sec-head:has(>.eyebrow){grid-template-columns:minmax(0,1fr)} .sec-head:has(>.eyebrow)>.eyebrow{grid-column:1;grid-row:auto;padding-top:0;margin-bottom:12px} .sec-head:has(>.eyebrow)>h1,.sec-head:has(>.eyebrow)>h2,.sec-head:has(>.eyebrow)>p{grid-column:1;grid-row:auto} } .sec-head h1,.sec-head h2{font-size:var(--t-h2);margin:0 0 12px} .sec-head p:not(.eyebrow){color:var(--on-navy-soft);margin:0;max-width:64ch;font-size:15.5px;line-height:1.62} .sec.dark .sec-head p:not(.eyebrow){color:var(--on-navy-soft)} /* The eyebrow is a docket code: the data face, and a rule that draws itself in on load. The rule is the site's smallest recurring gesture. */ .eyebrow{ display:flex;align-items:center;gap:11px; font-family:var(--f-mono);text-transform:uppercase;font-size:var(--t-code);font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--green-400);margin:0 0 14px;line-height:1.4; } .eyebrow::before{ content:"";width:26px;height:2px;flex:none;border-radius:2px;background:var(--green-500); box-shadow:0 0 8px rgba(121,185,40,.5); transform-origin:left center;animation:draw .7s var(--ease-out) both;animation-delay:var(--d,120ms); } .sec.dark .eyebrow,.hero .eyebrow,.detail-hero .eyebrow{color:var(--green-400)} .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap} .head-row>div{min-width:0} /* =============================================================== CARDS */ .grid{display:grid;gap:20px} .g-cards{grid-template-columns:repeat(auto-fill,minmax(266px,1fr))} /* A five-course shelf rides one clean row on wide screens instead of leaving an orphan on a second line; below that it wraps 3+2. */ @media (min-width:1180px){.g-cards.g-five{grid-template-columns:repeat(5,minmax(0,1fr))}} @media (min-width:760px) and (max-width:1179.98px){.g-cards.g-five{grid-template-columns:repeat(3,minmax(0,1fr))}} /* The launch-week featured pair: two wide cards, front and center. */ .g-cards.g-feat{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px} @media (max-width:700px){.g-cards.g-feat{grid-template-columns:minmax(0,1fr)}} .tier-featured{ padding:22px 24px 26px;border:1px solid var(--panel-line);border-radius:var(--r-lg); background:linear-gradient(135deg, rgba(121,185,40,.07), rgba(143,182,224,.06) 55%, transparent), var(--panel); box-shadow:var(--edge-dark); } .tier-featured .tier-head{margin-bottom:4px} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} /* A card is a pane of glass lifted off the room. No backdrop-filter here on purpose: sixty of these scroll on the finder, and a blur per card is the difference between sleek and stuttering. */ .card{ display:flex;flex-direction:column;background:var(--panel); border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden; text-decoration:none;color:inherit;position:relative; box-shadow:var(--shadow-sm),var(--edge-dark); transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease); } /* The accent spine: it grows from the top edge on hover, so a hovered card is marked with the same green that marks an active anything else. */ .card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3; background:var(--green-500);box-shadow:0 0 12px rgba(121,185,40,.55); transform:scaleY(0);transform-origin:top; transition:transform .34s var(--ease-out); } a.card:hover{box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:rgba(148,213,60,.4);transform:translateY(-4px)} a.card:hover::before{transform:scaleY(1)} .card.is-program{border-color:rgba(232,163,61,.4)} .card.is-program::before{background:var(--gold-500);box-shadow:0 0 12px rgba(232,163,61,.5);transform:scaleY(1);opacity:.9} .thumb{position:relative;aspect-ratio:16/9;background:var(--navy-800);overflow:hidden;flex:none;contain:paint} .thumb svg{position:absolute;inset:0;width:100%;height:100%;display:block; transition:transform .5s var(--ease-out)} a.card:hover .thumb svg{transform:scale(1.035)} .thumb .badge{ position:absolute;left:12px;top:12px;z-index:2;font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:5px; background:rgba(255,255,255,.95);color:var(--navy-900);box-shadow:var(--shadow-sm); } /* Free and launch-week ribbons are live things: green register, never gold. Gold stays reserved for the certificate shelf. */ .thumb .badge.free{background:var(--green-500);color:#08172A} .card-body{padding:17px 18px 18px;display:flex;flex-direction:column;flex:1} .provider{display:flex;align-items:center;gap:8px;margin-bottom:10px} .provider .mini{width:22px;height:22px;border-radius:var(--r-sm);background:rgba(255,255,255,.07); border:1px solid var(--panel-line);flex:none;display:flex;align-items:center;justify-content:center} .provider .mini svg{width:14px;height:auto;display:block;color:var(--green-500)} .provider span{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-mute)} /* Titles clamp to 2 lines and blurbs to 2, so every card in a row is the same shape and the eye can compare them. .meta takes the slack instead. */ .card h3{ font-size:16.5px;line-height:1.28;margin:0 0 8px;font-weight:700;font-stretch:104%;letter-spacing:-.024em; color:#fff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; overflow-wrap:break-word; } .card .sub{ font-size:13.5px;color:var(--on-navy-soft);margin:0 0 13px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .meta{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--on-navy-mute); display:flex;flex-wrap:wrap;gap:4px 8px;margin:auto 0 12px;text-transform:uppercase} .meta .sep{opacity:.45} .card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; margin-top:auto;padding-top:13px;border-top:1px solid var(--panel-line)} .price{font-family:var(--f-display);font-weight:800;font-stretch:100%;font-size:17px; letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums} /* rating: gold star ICON, figure in white */ .rating{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);text-transform:uppercase;font-size:12px;color:#fff;font-weight:600} .rating svg{color:var(--gold-500);flex:none} .rating .learners{color:var(--on-navy-mute);font-weight:400} /* program part checklist */ .parts{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px} .parts li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--on-navy)} .parts li svg{flex:none;margin-top:2px} .parts li.done svg{color:var(--green-400)} .parts li.pending{color:var(--on-navy-mute)} .parts li.pending svg{color:var(--on-navy-mute);opacity:.6} /* ====================================================== CATEGORY TILES */ /* 172px keeps all six categories on one row at the 1220px wrap. */ .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:14px} .cat{ display:flex;flex-direction:column;padding:22px 19px;border-radius:var(--r);text-decoration:none; background:var(--panel);border:1px solid var(--panel-line);color:var(--on-navy);position:relative;overflow:hidden; box-shadow:var(--shadow-xs),var(--edge-dark); transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease); } .cat:hover{border-color:rgba(148,213,60,.38);color:var(--on-navy);transform:translateY(-3px);box-shadow:var(--shadow-md),var(--edge-dark)} .cat .ic{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(121,185,40,.13); border:1px solid rgba(148,213,60,.32);display:flex;align-items:center;justify-content:center;margin-bottom:14px; transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .cat .ic svg{color:var(--green-400)} .cat:hover .ic{background:var(--green-500);border-color:var(--green-500);box-shadow:0 0 16px rgba(121,185,40,.5)} .cat:hover .ic svg{color:#08172A} .cat b{display:block;font-family:var(--f-display);font-weight:700;font-stretch:106%;font-size:15.5px;margin-bottom:6px;letter-spacing:-.024em;line-height:1.2;color:#fff} .cat span{font-size:13px;color:var(--on-navy-soft);line-height:1.45;display:block} /* margin-top:auto pins the count to the bottom, so a two-line title cannot knock one tile out of alignment with the rest of the row */ .cat .n{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--green-400);font-weight:600;margin-top:auto;padding-top:14px;display:block} /* =============================================================== TIERS */ /* The catalog is a ladder: one .tier section per rung, each with its own card grid, its certificate promise, and, for a rung that is announced but not built, a dashed panel instead of an empty grid. */ .tiers{display:block} .tier{margin:0 0 clamp(40px,5.4vw,72px)} .tier:last-child{margin-bottom:0} /* The catalog is banded by funding instrument before it is banded by tier. The band head opens a ladder rather than sitting on one, so it reads as a chapter plate: a drawn rule above, the eyebrow code, and the band title at near-page scale over a breathing space. */ .track-head{ margin:0 0 34px;padding-top:clamp(30px,4vw,52px);position:relative; } .track-head::before{ content:"";position:absolute;left:0;top:0;height:1px;width:100%; background:linear-gradient(90deg,rgba(148,213,60,.5),var(--hairline) 32%,var(--hairline)); } .tiers > .track-head:first-child{padding-top:0} .tiers > .track-head:first-child::before{display:none} .track-head h2{font-size:clamp(26px,3.6vw,42px);margin:0 0 10px;letter-spacing:-.036em} .track-head > p:last-child{color:var(--on-navy-soft);margin:0;max-width:64ch;font-size:14.5px;line-height:1.6} .tier-head{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 34px;align-items:start; padding-bottom:20px;margin-bottom:26px;border-bottom:2px solid rgba(255,255,255,.82); } @media (max-width:860px){.tier-head{grid-template-columns:minmax(0,1fr)}} .tier-head h2{font-size:clamp(23px,3.1vw,36px);margin:0 0 10px} .tier-head .blurb{color:var(--on-navy-soft);margin:0;max-width:62ch;font-size:14.5px;line-height:1.6} .tier-head .tier-n{margin:14px 0 0;font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;font-weight:500;color:var(--on-navy-mute); display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* The certificate promise: a piece of paper on the dark desk. It is the gold register, and deliberately the one warm, light object in the band. */ .tier-cert{ display:flex;align-items:center;gap:14px; background:linear-gradient(160deg,#FDF7EC,var(--gold-050)); border:1px solid var(--gold-line);border-radius:var(--r);padding:14px 17px; max-width:350px;justify-self:start;box-shadow:var(--shadow-md),var(--edge); color:var(--ink-700); } .tier-cert .seal{ width:42px;height:42px;border-radius:50%;background:var(--gold-500);color:#08172A; display:flex;align-items:center;justify-content:center;flex:none; box-shadow:0 2px 10px -2px rgba(232,163,61,.7); } .tier-cert .seal svg{width:23px;height:23px} .tier-cert b{ display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--gold-800);margin-bottom:4px; } .tier-cert > span > span{display:block;font-size:12.5px;color:var(--ink-500);line-height:1.45} /* a tier that awards a credential it has not named yet: promised, not sold, so it stays an outline on the desk rather than a document */ .tier-cert.pending{background:transparent;border-style:dashed;border-color:var(--panel-line-strong);box-shadow:none;color:var(--on-navy-soft)} .tier-cert.pending .seal{background:rgba(255,255,255,.08);color:var(--on-navy-mute);box-shadow:none} .tier-cert.pending b{color:var(--on-navy-mute)} .tier-cert.pending > span > span{color:var(--on-navy-mute)} /* an announced tier with nothing in it yet */ .tier-locked .tier-head{border-bottom-color:var(--hairline);border-bottom-width:1px;padding-bottom:14px;margin-bottom:16px} .tier-locked .tier-head .blurb{display:none} .tier-soon{ border:1.5px dashed var(--panel-line-strong);border-radius:var(--r);background:rgba(255,255,255,.025); padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:minmax(0,1fr) auto; gap:18px 28px;align-items:center; } @media (max-width:720px){.tier-soon{grid-template-columns:minmax(0,1fr)}} .tier-soon h3{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:9px;color:var(--on-navy-soft)} .tier-soon h3 svg{color:var(--on-navy-mute);flex:none} .tier-soon p{margin:0;color:var(--on-navy-mute);font-size:14px;max-width:60ch} /* the tier chip: quiet, because it repeats on every card in a labelled section */ .chip.tierchip{background:rgba(143,182,224,.12);border-color:rgba(143,182,224,.3);color:var(--steel-400);font-weight:600} /* a package card states its size instead of enumerating its parts; the parts are revealed on the package's own page, never beside it in the catalog */ .packline{ display:flex;align-items:center;gap:9px;margin:0 0 13px;padding:8px 11px; border:1px solid rgba(148,213,60,.32);background:rgba(121,185,40,.12);border-radius:var(--r-sm); font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.045em;text-transform:uppercase; font-weight:500;color:var(--green-400); } .packline svg{flex:none;color:var(--green-400)} /* ---------------------------------------------- the ladder, on the homepage */ /* Five rungs, three tiers plus the two shelves, on one row at the wrap. The row literally steps upward, because the thing it is describing is a ladder: the offset is the content, not an effect. It is dropped the moment the row wraps, where a stagger would read as a misalignment instead. */ .rungs{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:16px;align-items:stretch} .rung{ display:flex;flex-direction:column;padding:24px 21px;border-radius:var(--r); background:var(--panel);border:1px solid var(--panel-line);color:var(--on-navy);text-decoration:none; position:relative;box-shadow:var(--shadow-xs),var(--edge-dark); transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease); } .rung::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r) var(--r) 0 0; background:var(--green-500);box-shadow:0 0 12px rgba(121,185,40,.5); transform:scaleX(0);transform-origin:left; transition:transform .34s var(--ease-out); } .rung:hover{border-color:rgba(148,213,60,.4);box-shadow:var(--shadow-md),var(--edge-dark);color:var(--on-navy);transform:translateY(-4px)} .rung:hover::before{transform:scaleX(1)} .rung.locked{background:rgba(255,255,255,.02);border-style:dashed;border-color:var(--panel-line-strong);box-shadow:none} .rung.locked::before{background:var(--on-navy-mute);box-shadow:none} /* The rung's code and its status chip share one row, and "Outside the ladder" is long enough to need two lines in a 206px column. Let the chip wrap onto its own line rather than squeezing the code into a three-line stack. */ .rung-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px 10px;margin-bottom:8px;flex-wrap:wrap} .rung-top .eyebrow{margin:0;flex:1 1 auto;min-width:0;font-size:10px;letter-spacing:.13em} .rung-top .eyebrow::before{width:16px} .rung-top .chip{flex:none} .rung b{display:block;font-family:var(--f-display);font-size:20px;font-weight:800;font-stretch:108%;letter-spacing:-.03em;margin-bottom:9px;line-height:1.14;color:#fff} .rung .rb{display:block;font-size:13.5px;color:var(--on-navy-soft);line-height:1.52} .rung-foot{display:block;margin-top:auto;padding-top:18px} .rung .rc{ display:flex;align-items:center;gap:9px;font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500);margin-bottom:9px;line-height:1.35; } .rung .rc svg{width:19px;height:19px;flex:none;color:var(--gold-500)} .rung .rc.pending,.rung .rc.pending svg{color:var(--on-navy-mute)} .rung .n{display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.05em;font-weight:600;color:var(--green-400)} .rung.locked .n{color:var(--on-navy-mute)} /* --drop is written by app.js from the catalog itself: a tier that awards a tier-level credential is a rung and steps up in sequence; a shelf that awards none sits at ground level beside the ladder. So the row rearranges correctly if tiers are added or removed, and nothing here has to know how many there are. */ @media (min-width:1060px){ .rungs>.rung{transform:translateY(calc(var(--drop,0) * 1px))} .rungs>.rung:hover{transform:translateY(calc(var(--drop,0) * 1px - 4px))} .rungs{margin-bottom:52px} } /* =============================================================== HERO */ /* The brightest pool in the room: the working light. The green glow sits behind the docket panel on the right, so the accent lights the thing it is pointing at. The base stays translucent; the room continues underneath. */ .hero{ padding:clamp(56px,8vw,116px) 0 clamp(48px,6.4vw,96px); position:relative;overflow:hidden;isolation:isolate;color:var(--on-navy); border-bottom:1px solid var(--hairline); background: radial-gradient(78% 92% at 84% 14%, rgba(121,185,40,.2), transparent 58%), radial-gradient(86% 100% at 6% 96%, rgba(39,82,126,.45), transparent 64%); } .hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(var(--rule-dark) 1px,transparent 1px), linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px); background-size:82px 82px; -webkit-mask-image:radial-gradient(115% 88% at 46% 4%,#000 18%,transparent 76%); mask-image:radial-gradient(115% 88% at 46% 4%,#000 18%,transparent 76%); animation:gridin 1.5s var(--ease-out) both; } .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:160px 160px;opacity:.055; } .hero .wrap{position:relative;z-index:1} .hero h1{ font-size:var(--t-hero);letter-spacing:-.045em;line-height:.94;margin:0 0 22px; max-width:15ch;color:#fff;font-weight:800;font-stretch:118%;text-wrap:balance; } /* On the homepage the promise no longer shares the row with a panel, so a 15ch measure at full hero size pushed the figures and the call below the fold — four lines of display type and nothing to click. Wider and a step down lands it in two lines with the evidence and the button under it. */ .page[data-page="index"] .hero h1{ font-size:clamp(34px,4.3vw,58px);max-width:26ch; } /* The accent half of the promise, in the accent colour, carrying its own light. It is the only place the display face is set in green, so it lands. */ .hero h1 .t{color:var(--green-400);text-shadow:0 0 34px rgba(121,185,40,.35)} .hero .lede{font-size:var(--t-lede);color:var(--on-navy-soft);max-width:50ch;margin:0 0 30px;line-height:1.56} /* One column, one decision. The fold used to be a promise beside a price list; the price list is gone, so the copy keeps the whole width and the measure is held by h1/lede rather than by a grid track. */ .hero-copy{padding-top:clamp(0px,1.2vw,18px)} .hero-cta{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;margin-top:30px} /* a plain, obvious secondary route; a second button would compete with the first */ .textlink{ font-weight:700;font-size:15px;color:#fff;text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.3);padding-bottom:2px; transition:border-color .18s var(--ease),color .18s var(--ease); } .textlink:hover{border-bottom-color:var(--green-400);color:var(--green-400)} .sec.dark .textlink{color:#fff;border-bottom-color:rgba(255,255,255,.3)} .sec.dark .textlink:hover{color:var(--green-400);border-bottom-color:var(--green-400)} /* the hero's primary button is the sitewide primary; nothing to invert now */ .hero .btn.ghost{background:transparent;box-shadow:none} /* ---------------------------------------- the load sequence, stated in one place */ /* The hero is the site's one orchestrated moment: the ruled field fades up under everything, then the promise, the explanation, the call, and last the package it is offering. Pure CSS with fill-mode:both; nothing here waits on a script, so the sequence survives motion.js failing to load. */ .hero-copy>*{animation:rise .84s var(--ease-out) both} .hero-copy>h1{animation-delay:110ms} .hero-copy>.lede{animation-delay:250ms} .hero-copy>.hero-cta{animation-delay:380ms} /* social proof */ .proof{display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap;padding:22px 0} /* Mono, uppercase and widely tracked, this label is far wider than it reads. flex:none kept it from wrapping and it was the one thing pushing a 320px viewport into horizontal scroll. */ .proof p{margin:0;font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--on-navy-mute);flex:1 1 auto;min-width:0;line-height:1.5} .proof .marks{display:flex;gap:20px;flex-wrap:wrap;align-items:center} .proof .mark{height:24px;width:80px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid var(--panel-line)} .proof .mark:nth-child(2){width:62px} .proof .mark:nth-child(3){width:94px} .proof .mark:nth-child(4){width:70px} .proof .mark:nth-child(5){width:86px} /* ====================================================== PROGRAM SPOTLIGHT */ .spot{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,60px);align-items:center} @media (max-width:900px){.spot{grid-template-columns:minmax(0,1fr)}} .spot>div:first-child h2{font-size:var(--t-h2);margin:0 0 14px} .spot>div:first-child>p:not(.eyebrow){color:var(--on-navy-soft);font-size:15.5px;max-width:56ch} .spot-card{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:var(--r-lg); padding:8px 24px;box-shadow:var(--shadow-md),var(--edge-dark)} .spot-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .spot-parts li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--panel-line)} .spot-parts li:last-child{border-bottom:0} .spot-parts .tick{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; background:var(--green-500);color:#08172A;box-shadow:0 0 12px rgba(121,185,40,.4)} .spot-parts li.pending .tick{background:rgba(255,255,255,.08);color:var(--on-navy-mute);box-shadow:none} .spot-parts .t{min-width:0} .spot-parts .t b{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;font-stretch:104%;letter-spacing:-.02em;line-height:1.25;margin-bottom:2px;color:#fff} .spot-parts .t span{font-size:12.5px;color:var(--on-navy-soft);line-height:1.45} .spot-parts .st{margin-left:auto;flex:none} /* below ~440px the title, the meta line and the chip fight for one row; drop the chip onto its own line, aligned with the text column */ @media (max-width:440px){ .spot-parts li{flex-wrap:wrap;row-gap:8px} .spot-parts .t{flex:1 1 100%} .spot-parts .st{margin-left:42px} } /* ============================================================= PRICING */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;align-items:stretch} .plan{ display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-line); border-radius:var(--r);padding:26px 23px;position:relative; box-shadow:var(--shadow-xs),var(--edge-dark); transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease); } .plan:hover{box-shadow:var(--shadow-md),var(--edge-dark);transform:translateY(-3px);border-color:var(--panel-line-strong)} /* The recommended plan holds its own light: an opaque deep plate in the green working glow. The hierarchy is made of light, not of a 2px border. */ .plan.feat{ background: radial-gradient(90% 70% at 88% 0%, rgba(121,185,40,.2), transparent 62%), linear-gradient(168deg, var(--navy-800), var(--navy-950)); border-color:rgba(148,213,60,.42);color:var(--on-navy); box-shadow:var(--shadow-lg),var(--shadow-glow),var(--edge-dark); } .plan.feat h3{color:var(--on-navy-mute)} .plan.feat .amt{color:#fff} .plan.feat .cad,.plan.feat .blurb{color:var(--on-navy-soft)} .plan.feat li{color:var(--on-navy)} .plan.feat li svg{color:var(--green-400)} .plan .flag{ position:absolute;top:-11px;left:22px;font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--navy-950);padding:5px 11px;border-radius:999px; box-shadow:var(--shadow-sm); } .plan.feat .flag{background:var(--green-500);color:#08172A;box-shadow:0 0 14px rgba(121,185,40,.5)} .plan.start .flag{background:var(--green-500);color:#08172A} .plan h3{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; margin:0 0 12px;color:var(--on-navy-mute)} .plan .amt{font-family:var(--f-display);font-weight:800;font-stretch:104%;font-size:clamp(34px,3.4vw,44px); letter-spacing:-.045em;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:break-word;color:#fff} /* "Contact us" is a route, not a figure; set at figure size it wraps to two lines and reads as a price with a typo. app.js tags any non-numeric amount. */ .plan .amt.is-words{font-size:clamp(22px,2.1vw,26px);letter-spacing:-.03em;line-height:1.12;padding-top:4px} .plan .cad{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--on-navy-mute);margin-bottom:16px} .plan .blurb{font-size:13.5px;color:var(--on-navy-soft);margin:0 0 18px;line-height:1.5} .plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1;display:flex;flex-direction:column;gap:10px} .plan li{display:flex;gap:10px;font-size:13.5px;align-items:flex-start;line-height:1.45;color:var(--on-navy)} .plan li svg{color:var(--green-400);flex:none;margin-top:3px} /* ======================================================= HOW IT WORKS */ /* Three steps that are a real sequence, so they are numbered. */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px} .step{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:22px; box-shadow:var(--shadow-xs),var(--edge-dark)} .sec.dark .step{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);box-shadow:var(--edge-dark)} .step .n{width:34px;height:34px;border-radius:9px;background:var(--green-500);color:#08172A; display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);text-transform:uppercase;font-weight:600;font-size:14px;margin-bottom:15px; box-shadow:0 0 14px rgba(121,185,40,.35)} .step h3{font-size:16px;margin:0 0 7px;font-weight:700;color:#fff} .step p{font-size:13.5px;color:var(--on-navy-soft);margin:0;line-height:1.55} .step p:last-child{margin:0} /* These steps are deliberately NOT offset. They are already a numbered sequence, and the page only earns one structural device of this kind: the tier ladder, where the offset is the subject rather than an effect. */ /* ========================================================= TESTIMONIALS */ .tst{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:24px; box-shadow:var(--shadow-xs),var(--edge-dark);position:relative} .tst .stars{color:var(--gold-500);margin-bottom:14px;display:flex;gap:2px} .tst p{font-size:15px;margin:0 0 16px;line-height:1.6;color:var(--on-navy)} .tst .who{font-size:12.5px;color:var(--on-navy-mute)} .tst .who b{display:block;color:#fff;font-weight:700;font-family:var(--f-display);font-stretch:104%;letter-spacing:-.018em;font-size:14px;margin-bottom:1px} /* ============================================================== BANNER */ /* The free on-ramp: the one block that sits fully inside the green working light, so it reads as an offer rather than as another panel. */ .banner{ background: radial-gradient(85% 130% at 88% -20%, rgba(121,185,40,.24), transparent 60%), var(--panel-2); border:1px solid rgba(148,213,60,.32);border-radius:var(--r-lg); padding:clamp(26px,3.6vw,42px);position:relative;overflow:hidden; display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:26px;align-items:center; box-shadow:var(--shadow-md),var(--edge-dark); } .banner::before{ content:"";position:absolute;right:-8%;top:-60%;width:56%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(121,185,40,.2),transparent 68%);pointer-events:none; } .banner>*{position:relative} @media (max-width:800px){.banner{grid-template-columns:minmax(0,1fr)}} .banner h2{margin:0 0 10px;font-size:clamp(21px,2.8vw,32px);color:#fff} .banner p:not(.eyebrow){margin:0;color:var(--on-navy-soft);font-size:14.5px;line-height:1.6;max-width:56ch} .banner .btn-row{justify-content:flex-start} @media (min-width:801px){.banner .btn-row{justify-content:flex-end}} /* ======================================================== COURSE DETAIL */ .detail-hero{ color:var(--on-navy);padding:clamp(34px,4.8vw,60px) 0;position:relative;overflow:hidden;isolation:isolate; border-bottom:1px solid var(--hairline); background: radial-gradient(70% 100% at 86% 0%, rgba(121,185,40,.16), transparent 60%), radial-gradient(80% 110% at 4% 100%, rgba(39,82,126,.42), transparent 64%); } .detail-hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(var(--rule-dark) 1px,transparent 1px), linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px); background-size:74px 74px; -webkit-mask-image:radial-gradient(110% 92% at 44% 0%,#000 16%,transparent 76%); mask-image:radial-gradient(110% 92% at 44% 0%,#000 16%,transparent 76%); } .detail-hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:160px 160px;opacity:.05; } .detail-hero .wrap{position:relative;z-index:1} .detail-hero .crumb{font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;color:var(--on-navy-mute);margin-bottom:18px;line-height:1.7} .detail-hero .crumb a{color:var(--on-navy);text-decoration:none} .detail-hero .crumb a:hover{color:var(--green-400);text-decoration:underline} .detail-hero h1{color:#fff;font-size:var(--t-h1);margin:0 0 14px;max-width:19ch;letter-spacing:-.04em;font-stretch:116%} .detail-hero .sub{color:var(--on-navy-soft);font-size:var(--t-lede);max-width:58ch;margin:0 0 22px;line-height:1.55} .detail-hero .facts{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center; font-family:var(--f-mono);text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--on-navy)} .detail-hero .facts>span{display:inline-flex;align-items:center;gap:6px} .detail-hero .chip{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:var(--on-navy)} .detail-hero .chip.free{background:rgba(121,185,40,.18);border-color:rgba(148,213,60,.45);color:var(--green-400)} .detail-hero .chip.program{background:var(--green-500);border-color:var(--green-500);color:#08172A} .detail-hero .rating{color:#fff} .detail-hero .rating svg{color:var(--gold-500)} .detail-hero .rating .learners{color:var(--on-navy-mute)} .detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:clamp(24px,3.6vw,52px);align-items:start;padding:clamp(30px,4vw,52px) 0} /* Grid items default to min-width:auto, so the scrollable .tabs row inflates the 1fr track past the viewport. Pin them to 0 so the track can shrink. */ .detail-grid>*{min-width:0} @media (max-width:1000px){.detail-grid{grid-template-columns:minmax(0,1fr)}} /* sticky enrollment card: the one structural pane of glass on this page */ .enroll{ position:sticky;top:calc(var(--nav-h) + 20px);background:var(--panel-2); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid var(--panel-line-strong);border-radius:var(--r-lg); box-shadow:var(--shadow-lg),var(--edge-dark);overflow:hidden; } @media (max-width:1000px){.enroll{position:static;margin-bottom:8px}} .enroll .top{aspect-ratio:16/9;position:relative;background:var(--navy-800)} .enroll .top svg{position:absolute;inset:0;width:100%;height:100%} .enroll .in{padding:22px} .enroll .amt{font-family:var(--f-display);font-weight:800;font-stretch:104%;font-size:34px;letter-spacing:-.045em;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;color:#fff} .enroll .amt-note{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--on-navy-mute);margin-bottom:18px;line-height:1.5} .enroll ul{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--panel-line);display:flex;flex-direction:column;gap:12px} .enroll li{display:flex;gap:10px;font-size:13.5px;align-items:flex-start;color:var(--on-navy);line-height:1.45} .enroll li svg{color:var(--green-400);flex:none;margin-top:3px} .enroll .fine{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.04em;color:var(--on-navy-mute);margin:16px 0 0;text-align:center;line-height:1.5} /* tabs */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline);margin-bottom:28px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .tabs button{ font-family:var(--f-body);font-size:14px;font-weight:700;color:var(--on-navy-mute);background:none;border:0; padding:14px 16px;cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap; transition:color .16s var(--ease),border-color .16s var(--ease); } .tabs button:hover{color:#fff} .tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--green-500)} .panel[hidden]{display:none} .panel h2{font-size:clamp(21px,2.4vw,27px);margin:0 0 14px} .panel h3{font-size:16.5px;margin:26px 0 9px} .panel>p:not(.eyebrow){color:var(--on-navy-soft);max-width:72ch} /* learn grid (checkmarks) */ .learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:13px 28px;list-style:none;margin:0;padding:0} .learn-grid li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start;line-height:1.5;color:var(--on-navy)} .learn-grid li svg{color:var(--green-400);flex:none;margin-top:4px} /* syllabus accordion */ .acc{border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-xs),var(--edge-dark);background:var(--panel)} .acc details{border-bottom:1px solid var(--panel-line)} .acc details:last-child{border-bottom:0} .acc summary{ list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:13px; font-family:var(--f-display);font-weight:700;font-stretch:104%;font-size:15px;letter-spacing:-.02em;color:#fff; transition:background .15s var(--ease); } .acc summary::-webkit-details-marker{display:none} .acc summary>span:not(.cnt):not(.tick){min-width:0;overflow-wrap:break-word} .acc summary:hover{background:rgba(255,255,255,.05)} .acc details[open] summary{background:rgba(255,255,255,.06);border-left:3px solid var(--green-500);padding-left:15px} .acc .car{flex:none;color:var(--on-navy-mute);transition:transform .2s var(--ease);margin-left:auto} .acc details[open] .car{transform:rotate(90deg)} .acc .cnt{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-mute);font-weight:500;flex:none} .acc .bd{padding:4px 18px 20px} .acc .bd>p{font-size:13.5px;color:var(--on-navy-soft);margin:0 0 14px;max-width:72ch;line-height:1.6} .acc ol{list-style:none;margin:0;padding:0} .acc ol li{display:flex;gap:13px;padding:10px 0;border-top:1px solid var(--hairline);font-size:14px;line-height:1.45;color:var(--on-navy)} .acc ol li .ln{color:var(--green-400);font-weight:600;font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;min-width:24px;flex:none;padding-top:3px} .acc ol li .lt{font-weight:600;color:var(--on-navy)} .acc ol li .ls{color:var(--on-navy-mute)} /* certificate preview: a document. The one warm, light object in the room, lit like paper on the desk. Its text is scoped back to ink on purpose. */ .cert{ border:1px solid var(--gold-line); background: radial-gradient(80% 60% at 50% 0%, rgba(232,163,61,.14), transparent 62%), linear-gradient(170deg,#FDF8EE,var(--gold-050)); border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);text-align:center; box-shadow:var(--shadow-lg),var(--edge);color:var(--ink-700); } .cert .seal{width:58px;height:58px;border-radius:50%;background:var(--gold-500);color:#08172A; display:flex;align-items:center;justify-content:center;margin:0 auto 16px; box-shadow:0 4px 18px -4px rgba(232,163,61,.8)} .cert h3{font-size:20px;margin:0 0 8px;color:var(--ink-900)} .cert .issuer{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-800);font-weight:600;margin-bottom:18px} .cert ul{list-style:none;margin:0;padding:0;display:inline-flex;flex-direction:column;gap:9px;text-align:left;max-width:100%} .cert li{display:flex;gap:10px;font-size:13.5px;align-items:flex-start;line-height:1.45;color:var(--ink-900)} .cert li svg{color:var(--gold-800);flex:none;margin-top:3px} .cert .fine{font-size:12px;color:var(--ink-500);margin:18px 0 0} /* Two credentials, side by side: the one this course issues, and the advanced one its tier issues when every course in that tier is complete. */ .cert-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px} .cert .kicker{ font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-500);margin:0 0 8px; } .cert.is-tier{ background: radial-gradient(80% 60% at 50% 0%, rgba(232,163,61,.18), transparent 62%), linear-gradient(168deg, var(--navy-900), var(--abyss)); border-color:rgba(232,163,61,.32);color:var(--on-navy);box-shadow:var(--shadow-lg),var(--edge-dark); } .cert.is-tier h3{color:#fff} .cert.is-tier .kicker{color:var(--on-navy-mute)} .cert.is-tier .issuer{color:var(--gold-500)} .cert.is-tier li{color:var(--on-navy)} .cert.is-tier li svg{color:var(--gold-500)} .cert.is-tier li.pending{color:var(--on-navy-mute)} .cert.is-tier li.here span{font-weight:700;color:#fff} .cert.is-tier li em{font-style:normal;color:var(--on-navy-mute);font-weight:400} .cert.is-tier .fine{color:var(--on-navy-mute)} /* FAQ */ .faq details{border-bottom:1px solid var(--hairline);padding:2px 0} .faq summary{cursor:pointer;padding:17px 0;font-weight:700;font-family:var(--f-display);font-stretch:104%; letter-spacing:-.02em;font-size:15.5px;list-style:none;display:flex;align-items:flex-start;gap:14px;line-height:1.35;color:#fff} .faq summary::-webkit-details-marker{display:none} .faq summary .car{margin-left:auto;color:var(--on-navy-mute);transition:transform .22s var(--ease);flex:none;margin-top:3px} .faq details[open] summary{color:var(--green-400)} .faq details[open] summary .car{transform:rotate(45deg);color:var(--green-400)} .faq .bd{padding:0 0 18px;font-size:14.5px;color:var(--on-navy-soft);max-width:74ch;line-height:1.62} /* ============================================================ DASHBOARD */ .demo-badge{ display:flex;align-items:flex-start;gap:13px; background:rgba(232,163,61,.09); border:1px solid rgba(232,163,61,.32);border-radius:var(--r);padding:15px 18px;margin-bottom:26px; box-shadow:var(--shadow-xs),var(--edge-dark); } .demo-badge .chip{background:var(--gold-500);border-color:var(--gold-500);color:#08172A;flex:none;font-weight:600} .demo-badge p{margin:0;font-size:13.5px;color:var(--gold-300);line-height:1.55} .dash-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px} .dash-head .av{width:54px;height:54px;border-radius:14px;color:#fff;flex:none; background:linear-gradient(150deg,var(--navy-600),var(--navy-950)); border:1px solid var(--panel-line); display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:17px; box-shadow:var(--shadow-md),var(--edge-dark)} .dash-head>div{min-width:0} .dash-head h1{font-size:clamp(23px,3vw,34px);margin:0 0 4px} .dash-head .sub{font-family:var(--f-mono);text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--on-navy-mute)} .enrolled{display:flex;flex-direction:column;gap:14px} .erow{ display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:22px;align-items:center; background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:17px; box-shadow:var(--shadow-xs),var(--edge-dark); transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } .erow:hover{border-color:var(--panel-line-strong);box-shadow:var(--shadow-md),var(--edge-dark)} .erow>*{min-width:0} @media (max-width:820px){.erow{grid-template-columns:minmax(0,1fr);gap:14px}.erow .ethumb{max-width:240px}} .ethumb{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;position:relative;background:var(--navy-800);contain:paint} .ethumb svg{position:absolute;inset:0;width:100%;height:100%} .erow h3{font-size:17px;margin:0 0 5px;overflow-wrap:break-word;color:#fff} .erow .m{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-mute);margin-bottom:14px} /* Progress is light in a channel: the green fill carries its own glow. */ .bar{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-700),var(--green-400));border-radius:99px; box-shadow:0 0 12px rgba(121,185,40,.55); transition:width .8s var(--ease-out)} .bar.navy i{background:linear-gradient(90deg,var(--navy-600),var(--steel-500));box-shadow:0 0 12px rgba(143,182,224,.4)} .bar.gold i{background:linear-gradient(90deg,var(--gold-700),var(--gold-500));box-shadow:0 0 12px rgba(232,163,61,.5)} .bar-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--on-navy-mute);margin-top:9px;flex-wrap:wrap} .certcard{ color:var(--on-navy);border-radius:var(--r-lg);padding:28px;position:relative;overflow:hidden;isolation:isolate; border:1px solid rgba(232,163,61,.28); background: radial-gradient(70% 90% at 88% 0%, rgba(232,163,61,.2), transparent 60%), linear-gradient(166deg, var(--navy-900) 0%, var(--navy-950) 58%, var(--abyss) 100%); display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center; box-shadow:var(--shadow-lg),var(--edge-dark); } .certcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:160px 160px;opacity:.05} @media (max-width:720px){.certcard{grid-template-columns:minmax(0,1fr)}} .certcard .eyebrow{color:var(--gold-500);margin:0 0 10px} .certcard .eyebrow::before{background:var(--gold-500);box-shadow:0 0 8px rgba(232,163,61,.5)} .certcard h3{color:#fff;margin:0 0 8px;font-size:clamp(19px,2.2vw,24px)} .certcard p:not(.eyebrow){color:var(--on-navy-soft);font-size:13.5px;margin:0 0 16px;line-height:1.55;max-width:60ch} .certcard .bar{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)} .certcard .seal{width:68px;height:68px;border-radius:50%;background:var(--gold-500);color:#08172A; display:flex;align-items:center;justify-content:center;flex:none; box-shadow:0 6px 24px -4px rgba(232,163,61,.65)} /* rail */ .rail{display:flex;gap:16px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .rail>*{flex:0 0 268px;scroll-snap-align:start} /* =============================================================== MODAL */ .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal-back{position:absolute;inset:0;background:rgba(2,6,12,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:gridin .3s var(--ease-out) both} .modal-box{position:relative;background:var(--panel-solid);border:1px solid var(--panel-line-strong); border-radius:var(--r-lg);max-width:460px;width:100%;color:var(--on-navy); box-shadow:var(--shadow-lg),var(--edge-dark);max-height:92dvh;overflow-y:auto;animation:rise .42s var(--ease-out) both} .modal-in{padding:30px} .modal-close{position:absolute;right:12px;top:12px;background:none;border:0;cursor:pointer;color:var(--on-navy-mute);padding:7px;border-radius:8px;line-height:0;z-index:2} .modal-close:hover{background:rgba(255,255,255,.08);color:#fff} .modal-box h2{font-size:clamp(20px,2.4vw,24px);margin:0 0 10px;padding-right:28px} .modal-box p{font-size:14px;color:var(--on-navy-soft);line-height:1.55} .field{display:block;margin-top:18px} .field span{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-mute);display:block;margin-bottom:7px} .field input{width:100%;font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--panel-line-strong);border-radius:var(--r-sm); background:rgba(255,255,255,.055);color:#fff; transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} .field input::placeholder{color:var(--on-navy-mute)} .field input:focus{outline:none;border-color:var(--green-500);box-shadow:var(--ring)} .err{color:var(--danger-300);font-size:13px;margin:9px 0 0;display:none} /* The Terms tick on the Join form. Green like every live control; the linked words underline like the legal-line's. */ .check-line{display:flex;align-items:flex-start;gap:10px;margin-top:18px; font-size:13px;line-height:1.55;color:var(--on-navy-soft);cursor:pointer} .check-line input{flex:none;width:16px;height:16px;margin-top:2px; accent-color:var(--green-500);cursor:pointer} .check-line input:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px} .check-line a{color:inherit;text-decoration:underline;text-underline-offset:2px} .check-line a:hover{color:var(--green-400)} .err.show{display:block} .ok-tick{width:56px;height:56px;border-radius:50%;background:var(--green-500);color:#08172A;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 18px -4px rgba(121,185,40,.8)} .srow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--panel-line);font-size:14px} .srow:last-of-type{border-bottom:0} .srow b{font-family:var(--f-mono);text-transform:uppercase;font-weight:600;font-variant-numeric:tabular-nums;color:#fff} .fine{font-size:12px;color:var(--on-navy-mute);text-align:center;margin:14px 0 0} /* =============================================================== FOOTER */ .foot{ color:var(--on-navy);padding:clamp(46px,5.4vw,72px) 0 0;margin-top:auto; position:relative;overflow:hidden;isolation:isolate; border-top:1px solid var(--hairline); background: radial-gradient(70% 90% at 92% 0%, rgba(121,185,40,.11), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(39,82,126,.35), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)); } .foot::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(var(--rule-dark) 1px,transparent 1px), linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px); background-size:74px 74px; -webkit-mask-image:radial-gradient(110% 80% at 50% 0%,#000 12%,transparent 72%); mask-image:radial-gradient(110% 80% at 50% 0%,#000 12%,transparent 72%); } /* Four columns since the Academy left for its own domain and took the Categories column (a catalog filter in disguise) with it. */ .foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px;padding-bottom:38px} /* The Academy's address before its site is up: printed, not linked. */ .foot-soon{color:var(--on-navy-mute);font-size:14px} @media (max-width:1060px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:840px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}} .foot h4{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-400);margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:10px} .foot a{color:var(--on-navy);text-decoration:none;font-size:14px; transition:color .15s var(--ease)} .foot a:hover{color:var(--green-400)} .foot .foot-motto{font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--on-navy);margin:16px 0 0} .foot .blurb{font-size:13.5px;color:var(--on-navy-mute);margin:12px 0 0;max-width:34ch;line-height:1.6} .foot-bot{border-top:1px solid var(--hairline);padding:20px 0 26px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--on-navy-mute);line-height:1.6} .foot-bot .built{opacity:.65} /* ================================================================ MISC */ .page{min-height:100dvh;display:flex;flex-direction:column} .page>main{flex:1} .count-line{font-family:var(--f-mono);text-transform:uppercase;font-size:12.5px;letter-spacing:.03em;color:var(--on-navy-mute);margin:0;line-height:1.7} .empty{text-align:center;padding:72px 20px;color:var(--on-navy-mute)} .empty h3{margin-bottom:8px;font-size:20px;color:#fff} .note{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--on-navy-mute);line-height:1.7} .tick-list{list-style:none;margin:0;padding:0} .tick-list li{display:flex;gap:11px;font-size:14.5px;margin-bottom:11px;align-items:flex-start;line-height:1.5;color:var(--on-navy)} .tick-list li svg{color:var(--green-400);flex:none;margin-top:4px} .on-dark .tick-list li{color:var(--on-navy)} .on-dark .tick-list li svg{color:var(--green-400)} /* A long unbroken token (a course id, a NAICS string, an agency acronym run together) must never be the thing that sets a column's minimum width. */ h1,h2,h3,h4,p,li,summary,td,th{overflow-wrap:break-word} /* ======================================================= FUNDING FINDER */ /* The live board, and the room's showpiece: this is the page the whole midnight direction is built around. Everything here is namespaced `gf-` so the imported tools cannot collide with the course platform's own components, and every colour comes from the palette above. ONE COLOUR DECISION RUNS THROUGH THE WHOLE BOARD grants (.s-g) green : assistance, the money you are awarded contracts (.s-c) steel : acquisition, the work you are bought for It appears on the source tabs, the KPI tiles, the provenance dots, the card spine and the card's first chip, so the half of the market a row belongs to is legible from any one of them alone and never has to be read. */ .gf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap} .gf-head h1{font-size:var(--t-h1);margin:0 0 12px;max-width:22ch} .gf-head .gf-sub{font-size:14.5px;color:var(--on-navy-soft);margin:0;max-width:74ch;line-height:1.6} .gf-head .gf-sub b{font-family:var(--f-mono);text-transform:uppercase;color:#fff;font-weight:600;font-variant-numeric:tabular-nums} /* Provenance strip: where the numbers came from and when. */ .gf-source{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px; margin:20px 0 0;padding:12px 15px;border:1px solid var(--panel-line); border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow-xs),var(--edge-dark); font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.03em;color:var(--on-navy-mute); } /* Each entry is a run of prose with values inside it, so it has to stay a TEXT box. As an inline-flex row every text run and every became its own flex item, and the line shattered into spaced fragments the moment the strip was too narrow to hold an entry whole. The dot is positioned out of flow instead of being a flex sibling. */ .gf-source .gf-src{display:block;position:relative;padding-left:15px;min-width:0;max-width:100%} .gf-source .gf-src b{color:var(--on-navy);font-weight:600;white-space:nowrap} .gf-source .gf-src::before{ content:"";position:absolute;left:0;top:.52em; width:7px;height:7px;border-radius:50%;background:var(--on-navy-mute); } /* Narrow enough that two entries cannot share a line: stack them rather than letting one wrap under the other's dot. */ @media (max-width:680px){ .gf-source{flex-direction:column;align-items:stretch;gap:9px} } .gf-source .gf-src.s-g::before{background:var(--green-500);box-shadow:0 0 8px rgba(121,185,40,.6)} .gf-source .gf-src.s-c::before{background:var(--steel-500);box-shadow:0 0 8px rgba(143,182,224,.5)} /* Caveats the pull jobs report about themselves. Gold = "read this", not "error". Two feeds produce several of these, so they collect into one openable panel; stacked banners would push the board off the screen, and the summary line still states how many gaps there are while collapsed. */ .gf-notice{ margin:12px 0 0;padding:12px 16px; border:1px solid rgba(232,163,61,.34);background:rgba(232,163,61,.08); border-radius:var(--r);box-shadow:var(--shadow-xs),var(--edge-dark); font-size:13.5px;color:var(--gold-300); } .gf-notice summary{ display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none; font-size:13.5px;color:var(--gold-300); } .gf-notice summary::-webkit-details-marker{display:none} .gf-notice summary b{color:var(--gold-300);font-weight:600} .gf-notice summary .n{font-family:var(--f-mono);text-transform:uppercase;color:var(--gold-500);font-size:11.5px;letter-spacing:.03em} .gf-notice summary .chev{margin-left:auto;transition:transform .16s var(--ease)} .gf-notice[open] summary .chev{transform:rotate(180deg)} .gf-notice summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:var(--r-sm)} .gf-notice ul{margin:11px 0 2px;padding:0 0 0 18px;display:grid;gap:8px} .gf-notice li{line-height:1.55} .gf-notice li::marker{color:var(--gold-500)} .gf-notice b{color:var(--gold-300)} .gf-notice svg{flex:none;color:var(--gold-500)} /* ------------------------------------------------------------- KPI row */ /* Five instruments on the desk. The figures are the light source: each coloured tile glows in its own signal colour, and the number carries a halo of the same light. */ .gf-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0} /* The Atlas row grows a fourth tile when the member data is in; only above the stacking breakpoints, so phones keep their two-then-one wrap. */ @media (min-width:661px){.gf-kpis.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}} .gf-kpi{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:17px 17px; box-shadow:var(--shadow-xs),var(--edge-dark);min-width:0; transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .gf-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--edge-dark)} .gf-kpi .v{font-family:var(--f-display);font-size:clamp(24px,2.7vw,34px);font-weight:800;font-stretch:104%; letter-spacing:-.042em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.04;overflow-wrap:break-word} .gf-kpi .l{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--on-navy-mute);margin-top:7px;line-height:1.4} .gf-kpi.urgent{background:radial-gradient(120% 130% at 50% -20%, rgba(214,69,58,.16), transparent 70%),var(--panel); border-color:rgba(242,148,140,.34)} .gf-kpi.urgent .v{color:var(--danger-300);text-shadow:0 0 22px rgba(214,69,58,.5)} /* The two source tiles carry the board's source colours so the split reads from the KPI row before anyone reaches the switch below it. */ .gf-kpi.grant{background:radial-gradient(120% 130% at 50% -20%, rgba(121,185,40,.17), transparent 70%),var(--panel); border-color:rgba(148,213,60,.34)} .gf-kpi.grant .v{color:var(--green-400);text-shadow:0 0 22px rgba(121,185,40,.45)} .gf-kpi.contract{background:radial-gradient(120% 130% at 50% -20%, rgba(143,182,224,.15), transparent 70%),var(--panel); border-color:rgba(143,182,224,.32)} .gf-kpi.contract .v{color:var(--steel-400);text-shadow:0 0 22px rgba(143,182,224,.4)} /* A card whose official link has not been extracted yet says so in a button that cannot be pressed, rather than linking to nothing. */ .gf-wait{opacity:.5;cursor:default;pointer-events:none} /* The ™ that rides the brand lockups while the applications are pending: quiet by design, a claim rather than a badge. */ sup.tm{font-size:.42em;line-height:0;vertical-align:super;opacity:.72; margin-left:2px;letter-spacing:0;font-weight:400} /* The clickwrap line under the auth buttons: quiet, but its links are real. */ .legal-line{margin-top:10px;text-align:center} .legal-line a{color:inherit;text-decoration:underline;text-underline-offset:2px} .legal-line a:hover{color:var(--green-400)} /* The lead tile carries the whole-year figure, the board's loudest number: both source colours at once and a value a step larger than its peers. */ .gf-kpi.total{background: radial-gradient(120% 130% at 18% -20%, rgba(121,185,40,.16), transparent 65%), radial-gradient(120% 130% at 82% -20%, rgba(143,182,224,.15), transparent 65%), var(--panel); border-color:rgba(148,213,60,.3)} .gf-kpi.total .v{font-size:clamp(30px,3.4vw,44px);text-shadow:0 0 26px rgba(121,185,40,.35)} /* The agencies tile is rendered as a link to the category cheat sheet. Same glass as its neighbours, plus a spoken invitation, because a tile that navigates has to say so rather than rely on the cursor. */ a.gf-kpi{display:block;color:inherit;text-decoration:none} a.gf-kpi:hover{border-color:rgba(148,213,60,.5);box-shadow:var(--shadow-md),var(--edge-dark)} a.gf-kpi:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow-md)} .gf-kpi .go{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--green-400);margin-top:8px;line-height:1.4} .gf-kpi .go span{display:inline-block;transition:transform .18s var(--ease)} a.gf-kpi:hover .go span{transform:translateX(3px)} @media (max-width:660px){.gf-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:400px){.gf-kpis{grid-template-columns:minmax(0,1fr)}} /* --------------------------------------------------- source switch (tabs) */ /* The first decision on the page, and the one that changes what every other control means: a full-width band above the layout rather than one more select in the filter row. */ .gf-switch{ display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap; margin-top:26px;padding:15px 17px;border:1px solid var(--panel-line); border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-sm),var(--edge-dark); } .gf-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:none} .gf-tab{ display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);text-transform:uppercase;font-size:12.5px;font-weight:500; letter-spacing:.02em;color:var(--on-navy);background:rgba(255,255,255,.045);border:1px solid var(--panel-line); border-radius:999px;padding:9px 15px 9px 14px;cursor:pointer; transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease), box-shadow .14s var(--ease),transform .14s var(--ease); } .gf-tab:active{transform:scale(.97)} .gf-tab::before{ content:"";width:9px;height:9px;border-radius:50%;background:var(--on-navy-mute); flex:none;opacity:.5;transition:opacity .12s var(--ease),background .12s var(--ease),box-shadow .12s var(--ease); } .gf-tab.s-g::before{background:var(--green-500)} .gf-tab.s-c::before{background:var(--steel-500)} .gf-tab .ct{ font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums; background:rgba(255,255,255,.07);border:1px solid var(--panel-line);border-radius:999px;padding:1px 8px; } .gf-tab:hover{border-color:var(--panel-line-strong);color:#fff;background:rgba(255,255,255,.09)} /* The live tab is the lit tab: an opaque white plate, the brightest object in the switch, with the source dot glowing on it. */ .gf-tab[aria-selected="true"]{background:rgba(255,255,255,.93);border-color:rgba(255,255,255,.93);color:var(--navy-950);font-weight:600;box-shadow:var(--shadow-md)} .gf-tab[aria-selected="true"]::before{opacity:1} .gf-tab[aria-selected="true"].s-g::before{background:var(--green-500);box-shadow:0 0 7px rgba(121,185,40,.7)} .gf-tab[aria-selected="true"].s-c::before{background:var(--navy-600);box-shadow:0 0 7px rgba(39,82,126,.6)} .gf-tab[aria-selected="true"] .ct{background:rgba(8,23,42,.08);border-color:rgba(8,23,42,.18);color:var(--navy-950)} .gf-switch-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--on-navy-mute);flex:1;min-width:250px} .gf-switch-note b{color:var(--on-navy);font-weight:600} @media (max-width:700px){.gf-switch{flex-direction:column;align-items:stretch}} /* --------------------------------------------------------- page layout */ /* minmax(0,1fr), not 1fr: a bare `1fr` cannot shrink below the results column's min-content width, and a long agency name or opportunity number was enough to push the whole board past the page gutter. */ .gf-layout{display:grid;grid-template-columns:292px minmax(0,1fr);gap:26px;align-items:start;margin-top:26px} @media (max-width:1040px){.gf-layout{grid-template-columns:minmax(0,1fr)}} .gf-panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg);padding:19px; box-shadow:var(--shadow-xs),var(--edge-dark)} .gf-rail{position:sticky;top:calc(var(--nav-h) + 16px);max-height:calc(100dvh - var(--nav-h) - 32px);overflow-y:auto} @media (max-width:1040px){.gf-rail{position:static;max-height:none;overflow:visible}} .gf-rail h2,.gf-filters h2{ font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--on-navy-mute);margin:0 0 14px; } /* Archetype rail: the ten funding themes CounterPivot maps clients against. Each row's bar is a channel of light, sized to the live count. */ .gf-arow{ display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px; width:100%;text-align:left;padding:8px 9px;border-radius:var(--r-sm); border:1px solid transparent;background:transparent;cursor:pointer;font-family:inherit; transition:background .12s var(--ease),border-color .12s var(--ease); } .gf-arow:hover{background:rgba(255,255,255,.06)} .gf-arow[aria-pressed="true"]{background:rgba(255,255,255,.09);border-color:var(--panel-line-strong)} .gf-arow .let{ font-family:var(--f-mono);text-transform:uppercase;font-weight:600;font-size:12.5px;color:var(--steel-400); text-align:center;line-height:1; } .gf-arow[aria-pressed="true"] .let{color:#fff} .gf-arow.uni .let{color:var(--green-400)} .gf-arow .nm{font-size:13px;line-height:1.3;color:var(--on-navy)} .gf-arow .ct{font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;font-weight:600;color:var(--on-navy-mute);font-variant-numeric:tabular-nums} .gf-arow .bar{grid-column:2/4;height:4px;border-radius:3px;background:rgba(255,255,255,.09);margin-top:6px;overflow:hidden} .gf-arow .bar>i{display:block;height:100%;background:var(--green-500);border-radius:3px;box-shadow:0 0 8px rgba(121,185,40,.55)} .gf-arow[aria-pressed="true"] .bar>i{background:var(--green-400)} .gf-arow .bar{box-shadow:none} .gf-clear{ width:100%;margin-top:10px;padding:9px;border:1px dashed var(--panel-line-strong);background:transparent; color:var(--on-navy-mute);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;font-size:12.5px; } .gf-clear{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em} .gf-clear:hover:not(:disabled){border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)} .gf-clear:disabled{opacity:.45;cursor:default} /* ------------------------------------------------------------- filters */ .gf-filters{margin-bottom:16px} .gf-frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .gf-field{display:flex;flex-direction:column;gap:5px;min-width:0} .gf-field label{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--on-navy-mute)} /* Opaque controls: the native dropdown inherits the dark scheme, and the page must never bleed through a value someone is trying to read. */ .gf-field select,.gf-field input[type=search],.gf-field input[type=date]{ font-family:inherit;font-size:13.5px;color:#fff;background:var(--panel-solid); border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:9px 11px;min-height:40px;max-width:100%; transition:border-color .15s var(--ease),box-shadow .15s var(--ease); } /* The browser's own calendar popover follows the control's colour scheme; without this it opens as a white flashbang over the dark panel. */ .gf-field input[type=date]{color-scheme:dark} .gf-field input[type=search]::placeholder{color:var(--on-navy-mute)} .gf-field select:focus-visible,.gf-field input[type=search]:focus-visible,.gf-field input[type=date]:focus-visible{border-color:var(--green-500);box-shadow:var(--ring);outline:none} /* On a narrow screen the search field is the only control worth full width; a 220px minimum was enough to push the toolbar off a 360px viewport. */ .gf-field input[type=search]{min-width:min(220px,100%)} @media (max-width:560px){.gf-frow>.gf-field{flex:1 1 100%;min-width:0}.gf-frow>.gf-field select{max-width:none;width:100%}} /* Agency names run to "National Aeronautics and Space Administration", and an auto-sized select takes its width from the longest option, which alone pushed the toolbar onto three rows. Capped here, not in the advanced panel, where the selects are deliberately full-width. */ .gf-frow>.gf-field select{max-width:230px} .gf-field select:hover,.gf-field input[type=search]:hover,.gf-field input[type=date]:hover{border-color:rgba(255,255,255,.4)} .gf-check{ display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--on-navy-soft); cursor:pointer;user-select:none;margin-top:12px; } .gf-check input{accent-color:var(--green-500);width:15px;height:15px} .gf-fbottom{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--panel-line)} .gf-count{font-family:var(--f-mono);text-transform:uppercase;font-size:12.5px;letter-spacing:.03em;color:var(--on-navy-mute);margin:0 0 14px;line-height:1.6} .gf-count b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums} /* --------------------------------------------------- opportunity cards */ /* The spine does the work the chip repeats: scanning a mixed list, the eye picks up the colour of the left edge long before it reads a label. On the dark board the spine is a strip of light with its own halo. */ .gf-card{ position:relative;overflow:hidden; background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg); padding:19px 21px 19px 25px;margin-bottom:12px;box-shadow:var(--shadow-xs),var(--edge-dark); transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease); } /* The board deals its first hand: the top cards rise in sequence on each render. Only the first eight animate; everything deeper arrives instantly, so paging in 60 more never replays the whole list. */ #gf-list .gf-card{animation:none} #gf-list .gf-card:nth-child(-n+8){animation:rise .5s var(--ease-out) both} #gf-list .gf-card:nth-child(1){animation-delay:0ms} #gf-list .gf-card:nth-child(2){animation-delay:45ms} #gf-list .gf-card:nth-child(3){animation-delay:90ms} #gf-list .gf-card:nth-child(4){animation-delay:135ms} #gf-list .gf-card:nth-child(5){animation-delay:180ms} #gf-list .gf-card:nth-child(6){animation-delay:225ms} #gf-list .gf-card:nth-child(7){animation-delay:270ms} #gf-list .gf-card:nth-child(8){animation-delay:315ms} .gf-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--panel-line-strong)} .gf-card.s-g::before{background:linear-gradient(180deg,var(--green-400),var(--green-700));box-shadow:0 0 14px rgba(121,185,40,.5)} .gf-card.s-c::before{background:linear-gradient(180deg,var(--steel-400),var(--navy-600));box-shadow:0 0 14px rgba(143,182,224,.4)} /* State and local rows ride the same board in gold: a third source of money, not a third kind of card. */ .gf-card.s-s::before{background:linear-gradient(180deg,var(--gold-300),var(--gold-700));box-shadow:0 0 14px rgba(232,163,61,.42)} .gf-card:hover{border-color:var(--panel-line-strong);box-shadow:var(--shadow-md),var(--edge-dark);transform:translateY(-2px)} .gf-card.s-g:hover{border-color:rgba(148,213,60,.36)} .gf-card.s-c:hover{border-color:rgba(143,182,224,.36)} .gf-card.s-s:hover{border-color:rgba(232,163,61,.36)} .gf-ct{display:flex;justify-content:space-between;gap:10px 16px;align-items:flex-start;flex-wrap:wrap} /* A basis rather than flex:1: below ~240px of title room the badge, which can never wrap, takes its own line instead of crushing the title into a column of single letters. */ .gf-cthead{flex:1 1 240px;min-width:0} .gf-ct>.gf-badge{flex:none;margin-left:auto} .gf-card h3{font-size:16.5px;line-height:1.28;margin:0 0 6px;overflow-wrap:break-word;letter-spacing:-.024em} .gf-card h3 a{color:#fff;text-decoration:none;transition:color .14s var(--ease)} .gf-card h3 a:hover{color:var(--green-400);text-decoration:underline} .gf-card.s-c h3 a:hover{color:var(--steel-400)} .gf-agency{font-size:13.5px;color:var(--on-navy-mute);margin:0 0 12px} .gf-agency .fc{color:var(--on-navy-mute);font-style:italic} /* Deadline badge. Red at <=30 days, gold at 31 to 60, green further out: the same urgency language the certificate/rating chips already use. The critical dot pulses; it is the only thing on the board allowed to. */ .gf-badge{ white-space:nowrap;font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.04em; padding:5px 11px;border-radius:999px; display:inline-flex;align-items:center;gap:7px;border:1px solid transparent; } .gf-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .gf-b-crit{background:rgba(214,69,58,.14);color:var(--danger-300);border-color:rgba(242,148,140,.38)} .gf-b-crit .dot{animation:pulse 2.2s var(--ease) infinite} .gf-b-warn{background:rgba(232,163,61,.12);color:var(--gold-500);border-color:rgba(232,163,61,.38)} .gf-b-soon{background:rgba(121,185,40,.13);color:var(--green-400);border-color:rgba(148,213,60,.38)} .gf-b-far,.gf-b-rolling{background:rgba(255,255,255,.05);color:var(--on-navy-mute);border-color:var(--panel-line)} .gf-b-closed{background:rgba(255,255,255,.04);color:var(--on-navy-mute);border-color:var(--panel-line)} /* The year view keeps closed rows readable but visibly off the clock. */ .gf-card.is-closed{opacity:.62;transition:opacity .16s var(--ease)} .gf-card.is-closed:hover{opacity:1} /* The coverage switch sits beside the source tabs, separated by a hairline so the two axes read as two questions. */ .gf-scope{border-left:1px solid var(--hairline);padding-left:12px;margin-left:2px} @media (max-width:700px){.gf-scope{border-left:0;padding-left:0;margin-left:0}} .gf-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 12px} .gf-meta>div{min-width:0} .gf-meta .k{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--on-navy-mute)} .gf-meta .val{font-family:var(--f-mono);text-transform:uppercase;font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:break-word} /* NAICS codes and notice types mean nothing to a new entrant on their own, so the plain-English gloss travels with the code rather than in a tooltip. */ .gf-meta .val .hint{font-family:var(--f-body);font-weight:400;color:var(--on-navy-mute);font-size:12.5px} .gf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .gf-chip{ font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;line-height:1.6;padding:3px 9px;border-radius:var(--r-sm); background:rgba(255,255,255,.05);border:1px solid var(--panel-line);color:var(--on-navy-mute); } .gf-chip.arch{background:rgba(143,182,224,.12);border-color:rgba(143,182,224,.3);color:var(--steel-400);font-weight:600} .gf-chip.uni{background:rgba(121,185,40,.12);border-color:rgba(148,213,60,.34);color:var(--green-400);font-weight:600} /* The calendar pointer is a chip that goes somewhere: green like every live control, and it answers hover like the link it is. */ a.gf-chip.evt{background:rgba(121,185,40,.12);border-color:rgba(148,213,60,.34);color:var(--green-400); font-weight:600;text-decoration:none;cursor:pointer; transition:border-color .15s var(--ease),background .15s var(--ease)} a.gf-chip.evt:hover{border-color:rgba(148,213,60,.6);background:rgba(121,185,40,.2)} a.gf-chip.evt:focus-visible{outline:none;box-shadow:var(--ring)} /* The source chip is the only solid-filled chip on a card, and it always comes first, so "which market is this" is answered before the eye starts reading. */ .gf-chip.src{font-weight:700;letter-spacing:.01em} .gf-chip.src.s-g{background:var(--green-500);border-color:var(--green-500);color:#08172A} .gf-chip.src.s-c{background:var(--steel-500);border-color:var(--steel-500);color:#08172A} .gf-chip.src.s-s{background:var(--gold-500);border-color:var(--gold-500);color:#08172A} .gf-chip.sa{background:rgba(232,163,61,.12);border-color:rgba(232,163,61,.34);color:var(--gold-500);font-weight:600} .gf-chip.broad{border-style:dashed;background:transparent} .gf-desc{font-size:13.5px;color:var(--on-navy-soft);line-height:1.6;margin:12px 0 0} .gf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} /* Sixty cards must not mean sixty green buttons: on a card, the outbound link is a quiet ghost, and the green sweep only arrives on hover. */ .gf-foot .btn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none} .gf-foot .btn::after{background:var(--green-500)} .gf-foot .btn:hover{color:#08172A;border-color:var(--green-500);box-shadow:var(--shadow-sm)} /* A SAM.gov "opportunity number" is sometimes a 60-character underscore-joined sentence with no break opportunity in it, which on its own set the minimum width of the entire results column. It has to be allowed to break. */ .gf-num{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;color:var(--on-navy-mute);font-variant-numeric:tabular-nums; display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0; overflow-wrap:anywhere} .gf-num a{color:var(--green-400);overflow-wrap:anywhere} .gf-num .sep{color:var(--panel-line-strong)} /* The one place a learner crosses from the dashboard back into the courses. */ .gf-bridge{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center; color:var(--on-navy);border-radius:var(--r-lg);padding:30px 32px;margin-top:8px; position:relative;overflow:hidden;isolation:isolate; border:1px solid var(--panel-line); background: radial-gradient(70% 100% at 90% 0%, rgba(121,185,40,.18), transparent 60%), linear-gradient(166deg, var(--navy-900) 0%, var(--navy-950) 58%, var(--abyss) 100%); box-shadow:var(--shadow-lg),var(--edge-dark); } .gf-bridge::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(var(--rule-dark) 1px,transparent 1px), linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px); background-size:74px 74px; -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000 15%,transparent 75%); mask-image:radial-gradient(120% 100% at 80% 0%,#000 15%,transparent 75%); } .gf-bridge::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:160px 160px;opacity:.05} .gf-bridge h2{color:#fff;font-size:clamp(21px,2.5vw,30px);margin:0 0 10px} .gf-bridge p:not(.eyebrow){color:var(--on-navy-soft);font-size:14.5px;margin:0;max-width:62ch} @media (max-width:780px){.gf-bridge{grid-template-columns:minmax(0,1fr)}} .gf-lbl{ font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--on-navy-mute);align-self:center;margin-right:2px; } /* ------------------------------------------- grant finder: advanced filters */ /* Pinned to the right of the filter row so the panel, which hangs off that edge, always opens inside the card rather than over the archetype rail. */ .gf-adv-wrap{position:relative;display:flex;align-items:flex-end;margin-left:auto} .gf-advbtn{ display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);text-transform:uppercase;font-size:12.5px;font-weight:600; letter-spacing:.02em;color:#fff;background:var(--panel-solid);border:1px solid rgba(255,255,255,.2); border-radius:var(--r-sm);padding:9px 13px;min-height:40px;cursor:pointer;white-space:nowrap; transition:border-color .15s var(--ease),background .15s var(--ease); } .gf-advbtn:hover{background:var(--navy-800);border-color:rgba(255,255,255,.4)} .gf-advbtn[aria-expanded="true"]{background:var(--navy-800);border-color:rgba(255,255,255,.4)} .gf-advbtn[aria-expanded="true"] svg{transform:rotate(180deg)} .gf-advbtn svg{transition:transform .18s var(--ease)} .gf-advbtn.has-filters{border-color:rgba(148,213,60,.5)} .gf-advcount{ display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px; border-radius:999px;background:var(--green-500);color:#08172A;font-size:11px;font-weight:700; box-shadow:0 0 10px rgba(121,185,40,.5); } /* Anchored to the button and right-aligned so it never runs off the panel. Opaque: a filter panel floating over sixty cards cannot be translucent. */ .gf-adv{ position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(520px,calc(100vw - 2 * var(--gut))); background:var(--panel-solid);border:1px solid var(--panel-line-strong);border-radius:var(--r-lg); box-shadow:var(--shadow-lg),var(--edge-dark);padding:19px;animation:rise .3s var(--ease-out) both; /* Two source groups make this panel tall enough to run off a laptop screen. */ max-height:min(72vh,640px);overflow-y:auto; } .gf-adv h3{font-size:14px;margin:0 0 14px;color:#fff} .gf-advgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px} .gf-advnote{font-size:12px;color:var(--on-navy-mute);line-height:1.55;margin:10px 0 0} /* Launch week: the plan strip above the open board, and the note that stands where the export buttons will. */ .gf-planpanel{ background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg); padding:22px 22px 18px;margin-bottom:18px; } .gf-planhead h3{margin:2px 0 8px} .gf-planhead p{font-size:13.5px;color:var(--on-navy-soft);line-height:1.6;max-width:640px;margin:0 0 16px} .gf-planpanel .gf-tiers{margin:0} .gf-tier-soon{ display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-mute); text-align:center;padding:9px 0 2px; } /* The launch-week sell line where the export buttons will stand. It is the pitch, not a footnote, so it wears the live-green neon. */ .gf-freenote{ display:inline-block;font-family:var(--f-mono);text-transform:uppercase; font-size:12px;font-weight:600;letter-spacing:.09em;color:var(--green-400); padding:9px 18px;border:1px solid rgba(121,185,40,.5);border-radius:999px; text-shadow:0 0 14px rgba(148,213,60,.55); box-shadow:0 0 20px rgba(121,185,40,.18),inset 0 0 14px rgba(121,185,40,.07); } /* Launch week keeps the door visible and the handle locked: the listing button and the point of contact render where they will live, dimmed, and a mono line under the button names the plans that carry them. */ .gf-lockwrap{display:inline-flex;flex-direction:column;align-items:flex-end;gap:5px} .gf-lockbtn{opacity:.5;cursor:default;pointer-events:none;user-select:none} .gf-locknote{ font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:500; letter-spacing:.08em;color:var(--on-navy-mute);text-align:right; } .gf-lockbit{display:inline-flex;align-items:center;gap:5px;vertical-align:middle} .gf-lockbit svg{flex:none;opacity:.7} .gf-advgrid .gf-field select{width:100%} @media (max-width:560px){.gf-advgrid{grid-template-columns:1fr}} /* Half these filters only mean something to one of the two markets. Dimming the group that does not apply, rather than hiding it, keeps an active filter visible instead of letting it silently empty the board. */ .gf-advgroup{margin-bottom:16px} .gf-advgh{ display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap; font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-mute); } .gf-advgh .dot{width:8px;height:8px;border-radius:50%;flex:none} .gf-advgroup[data-for="g"] .gf-advgh .dot{background:var(--green-500);box-shadow:0 0 7px rgba(121,185,40,.6)} .gf-advgroup[data-for="c"] .gf-advgh .dot{background:var(--steel-500);box-shadow:0 0 7px rgba(143,182,224,.5)} .gf-advgh .off{display:none;text-transform:none;letter-spacing:0;font-weight:500;color:var(--gold-500)} .gf-advgroup.is-off{opacity:.5} .gf-advgroup.is-off .gf-advgh .off{display:inline} .gf-advgroup.is-off select{cursor:not-allowed} .gf-advfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px; padding-top:14px;border-top:1px solid var(--panel-line)} .gf-linkbtn{ background:none;border:0;padding:0;font-family:var(--f-mono);text-transform:uppercase;font-size:12px;font-weight:500;letter-spacing:.02em; color:var(--green-400);cursor:pointer;text-decoration:underline;text-underline-offset:3px; } .gf-linkbtn:hover{color:#fff} /* ------------------------------------------------ grant finder: export & picking */ .gf-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} .gf-actions .gf-count{margin:0} .gf-actbtns{display:flex;gap:9px;flex-wrap:wrap} .gf-actbtns .btn{display:inline-flex;align-items:center} .gf-selbar{ position:sticky;top:calc(var(--nav-h) + 10px);z-index:50; display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; background:linear-gradient(160deg,var(--navy-800),var(--navy-950));color:#fff; border:1px solid rgba(148,213,60,.42); border-radius:var(--r);padding:13px 17px;margin-bottom:14px; box-shadow:var(--shadow-lg),var(--shadow-glow);animation:rise .32s var(--ease-out) both; } .gf-selbar b{font-family:var(--f-display);font-weight:800;font-stretch:104%;font-size:16px;letter-spacing:-.03em} /* A shortlist that spans both markets is the point of the export, so the bar says what the mix is before the sheet is opened. */ .gf-selbar .mix{color:var(--on-navy-soft);font-size:13px;margin-left:8px} .gf-selbar .btn{display:inline-flex;align-items:center} .gf-selbar .gf-linkbtn{color:var(--on-navy)} .gf-selbar .gf-linkbtn:hover{color:#fff} .gf-pick{display:flex;align-items:center;flex:none;padding:2px 4px 0 0;cursor:pointer} .gf-pick input{width:17px;height:17px;accent-color:var(--green-500);cursor:pointer} /* The star saves a card to the Funding Tracker. Green, not gold: a starred opportunity is live pipeline, and gold stays reserved for the certificate register. */ .gf-star{flex:none;width:34px;height:34px;margin-left:2px;border-radius:8px; border:1px solid var(--panel-line);background:transparent;color:var(--on-navy-mute); display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:color .15s var(--ease),border-color .15s var(--ease), background .15s var(--ease),transform .15s var(--ease)} .gf-star svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round} .gf-star:hover{color:var(--green-400);border-color:rgba(148,213,60,.45);transform:translateY(-1px)} .gf-star:focus-visible{outline:none;box-shadow:var(--ring)} .gf-star[aria-pressed="true"]{color:var(--green-400);border-color:rgba(148,213,60,.5); background:radial-gradient(120% 130% at 50% -20%, rgba(121,185,40,.2), transparent 70%)} .gf-star[aria-pressed="true"] svg path{fill:currentColor} /* ==================================================== FUNDING ATLAS */ /* The catalog wears the board's clothes; only the program-specific trims are its own. The number is set as a coded value because it IS one. */ .ga-num{font-family:var(--f-mono);text-transform:uppercase;font-size:13px;font-weight:600;color:var(--green-400); letter-spacing:.03em;margin-right:2px} .ga-pop{color:var(--on-navy-mute);font-style:italic} .ga-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:2px 0 10px} .ga-fact{font-size:13px;color:var(--on-navy-soft);line-height:1.5} .ga-fact b{display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-mute);margin-bottom:2px} a.gf-badge.ga-open{text-decoration:none;cursor:pointer} a.gf-badge.ga-open:hover{filter:brightness(1.15)} .ga-more{margin:4px 0 10px} .ga-more summary{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--on-navy-mute);cursor:pointer;list-style:none; display:inline-flex;align-items:center;gap:6px} .ga-more summary::-webkit-details-marker{display:none} .ga-more summary::after{content:"+";color:var(--green-400);font-size:13px} .ga-more[open] summary::after{content:"–"} .ga-more summary:hover{color:var(--on-navy-soft)} .ga-more p{font-size:13px;color:var(--on-navy-soft);line-height:1.6;margin:9px 0 0} .ga-more p b{color:var(--on-navy)} /* A grant card's pointer back to its parent program on the Atlas. */ .gf-allink{font-family:var(--f-mono);text-transform:uppercase;font-size:11.5px;color:var(--green-400); text-decoration:none;border-bottom:1px dotted rgba(148,213,60,.5)} .gf-allink:hover{border-bottom-style:solid} /* ================================================== FUNDING TRACKER */ /* The tracker is the board's sibling and borrows its whole wardrobe; only the closed shelf is its own. A gone card stays readable but visibly off the clock. */ .gt-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .gt-shelf{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--on-navy-mute);margin:34px 0 14px; padding-top:18px;border-top:1px solid var(--hairline)} .gf-card.gt-gone{opacity:.62;transition:opacity .16s var(--ease)} .gf-card.gt-gone:hover{opacity:1} @media (max-width:660px){.gt-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:400px){.gt-kpis{grid-template-columns:minmax(0,1fr)}} /* --------------------------------------------- the two strips under the KPIs */ /* Where things stand, and what the book of work is worth. Both are printed from fields the member typed, so both are allowed to read as empty. */ .gt-strip{margin-top:20px} .gt-striplab{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.11em;color:var(--on-navy-mute);margin:0 0 9px} .gt-stagerow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .gt-stagecell{ display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left; background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-sm); padding:12px 12px 11px;cursor:pointer;font-family:inherit;min-width:0; transition:border-color .15s var(--ease),transform .15s var(--ease),background .15s var(--ease); } .gt-stagecell:hover{border-color:var(--panel-line-strong);transform:translateY(-2px)} .gt-stagecell .v{font-family:var(--f-display);font-size:23px;font-weight:800;font-stretch:104%; letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums} .gt-stagecell .n{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-mute);line-height:1.3;overflow-wrap:anywhere} .gt-stagecell .sub{font-size:11px;color:var(--on-navy-soft);line-height:1.35;margin-top:2px} /* The stage colours walk from watching to decided: grey, steel, steel bright, green, then the settled gold of a decision made. */ .gt-stagecell.st-q{border-color:rgba(143,182,224,.22)} .gt-stagecell.st-p{border-color:rgba(143,182,224,.34)} .gt-stagecell.st-p .v{color:var(--steel-400)} .gt-stagecell.st-s{border-color:rgba(148,213,60,.34)} .gt-stagecell.st-s .v{color:var(--green-400)} .gt-stagecell.st-d{border-color:rgba(232,163,61,.3)} .gt-stagecell.st-d .v{color:var(--gold-300)} .gt-moneyrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .gt-moneyrow.three{grid-template-columns:repeat(3,minmax(0,1fr))} .gt-fine{font-size:12.5px;color:var(--on-navy-mute);line-height:1.65;margin:10px 0 0} .gt-fine b{color:var(--on-navy);font-weight:600;font-variant-numeric:tabular-nums} .gt-late{color:var(--danger-300)} .gt-syncnote{margin-top:14px} .gt-syncnote[hidden]{display:none} @media (max-width:760px){ .gt-stagerow{grid-template-columns:repeat(3,minmax(0,1fr))} .gt-moneyrow,.gt-moneyrow.three{grid-template-columns:minmax(0,1fr)} } @media (max-width:430px){.gt-stagerow{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ------------------------------------------------------------- the views */ .gt-viewbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px} .gt-view{ font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-mute);background:transparent;cursor:pointer; border:1px solid var(--panel-line);border-radius:999px;padding:8px 15px; transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease); } .gt-view:hover{color:var(--on-navy);border-color:var(--panel-line-strong)} .gt-view[aria-pressed="true"]{color:var(--green-400);border-color:rgba(148,213,60,.45); background:rgba(121,185,40,.1)} .gt-filterbar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--on-navy-soft); background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-sm); padding:11px 14px;margin:0 0 16px; } .gt-filterbar b{color:#fff;font-weight:600} .gt-group{margin:30px 0 14px;padding-top:18px;border-top:1px solid var(--hairline)} .gt-group:first-child{margin-top:0;padding-top:0;border-top:0} .gt-group h2{font-family:var(--f-display);font-size:17px;font-weight:800;font-stretch:104%; text-transform:uppercase;letter-spacing:.02em;margin:0;display:flex;align-items:center;gap:10px} .gt-group h2 .ct{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em; color:var(--on-navy-mute);border:1px solid var(--panel-line);border-radius:999px;padding:2px 9px} .gt-group p{font-size:12.5px;color:var(--on-navy-mute);margin:5px 0 0} .gt-group.st-s h2{color:var(--green-400)} .gt-group.st-d h2{color:var(--gold-300)} /* ------------------------------------------- the member's own fields, on a card */ .gt-work{margin-top:11px;padding-top:11px;border-top:1px solid var(--hairline)} .gt-wchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .gt-stage,.gt-val,.gt-cf,.gt-own{ font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.08em; border:1px solid var(--panel-line-strong);border-radius:999px;padding:3px 9px;color:var(--on-navy-soft); } .gt-stage{background:rgba(255,255,255,.06);color:var(--on-navy)} .gt-stage.st-p{border-color:rgba(143,182,224,.4);color:var(--steel-400)} .gt-stage.st-s{border-color:rgba(148,213,60,.42);color:var(--green-400)} .gt-stage.st-d{border-color:rgba(232,163,61,.4);color:var(--gold-300)} .gt-stage.sb-won{background:rgba(121,185,40,.14);border-color:rgba(148,213,60,.5);color:var(--green-400)} .gt-stage.sb-lost{background:rgba(214,69,58,.12);border-color:rgba(242,148,140,.4);color:var(--danger-300)} .gt-val{color:#fff;border-color:rgba(255,255,255,.28);font-variant-numeric:tabular-nums} .gt-cf.cf-h{color:var(--green-400);border-color:rgba(148,213,60,.4)} .gt-cf.cf-l{color:var(--on-navy-mute)} .gt-own{text-transform:none;letter-spacing:.01em;font-family:inherit;font-size:12px} .gt-next{font-size:13.5px;color:var(--on-navy);margin:9px 0 0;line-height:1.5} .gt-next .gf-lbl{margin-right:7px} .gt-next .gt-due{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.08em;color:var(--on-navy-mute);margin-left:9px} .gt-next.is-late{color:var(--danger-300)} .gt-next.is-late .gt-due{color:var(--danger-300)} .gt-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .gt-link{ font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.08em; color:var(--steel-400);border:1px solid rgba(143,182,224,.3);border-radius:999px;padding:3px 9px; text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease); } .gt-link:hover{color:#fff;border-color:rgba(143,182,224,.6)} .gt-link.evt{color:var(--green-400);border-color:rgba(148,213,60,.34)} .gt-link.evt:hover{color:#fff;border-color:rgba(148,213,60,.62)} .gt-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .gt-editbtn{ font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.1em; color:var(--on-navy-mute);background:transparent;border:1px solid var(--panel-line); border-radius:var(--r-sm);padding:7px 12px;cursor:pointer; transition:color .15s var(--ease),border-color .15s var(--ease); } .gt-editbtn:hover{color:#fff;border-color:var(--panel-line-strong)} .gt-editbtn[aria-expanded="true"]{color:var(--green-400);border-color:rgba(148,213,60,.45)} .gt-edit{margin-top:13px;padding-top:14px;border-top:1px dashed var(--panel-line-strong)} .gt-edit[hidden]{display:none} .gt-egrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px} .gt-egrid .gf-field select,.gt-egrid .gf-field input{width:100%;max-width:none} .gt-egrid .gt-wide{grid-column:1/-1} .gt-post{ margin-top:11px;font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.08em;color:var(--on-navy-mute);background:transparent;cursor:pointer; border:1px dashed var(--panel-line-strong);border-radius:var(--r-sm);padding:7px 12px; } .gt-post:hover{color:#fff;border-color:rgba(255,255,255,.4)} /* ------------------------------------------------------------ the value view */ .gt-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .gt-vgrid .gf-panel h3,.gt-vtable h3{font-size:15px;margin:0 0 14px} .gt-vtable{margin-top:16px} .gt-vrows{display:flex;flex-direction:column;gap:2px} .gt-vrow{ display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr); gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--hairline); } .gt-vrow:last-child{border-bottom:0} .gt-vrow.head{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-mute);padding-bottom:8px} .gt-vrow .t{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--on-navy);min-width:0} .gt-vrow .t a{color:#fff;text-decoration:none} .gt-vrow .t a:hover{color:var(--green-400);text-decoration:underline} .gt-vrow .ty{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:600; letter-spacing:.09em;color:var(--on-navy-mute)} .gt-vrow .n{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums;color:#fff; text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end} .gt-vrow .n .cf{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--on-navy-mute);font-weight:600} @media (max-width:640px){ .gt-vrow{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);row-gap:6px} .gt-vrow.head{display:none} .gt-vrow .n{text-align:left;align-items:flex-start} } /* The SLED board's rows carry a star of their own, sitting on the title line. */ .sl-t{display:flex;align-items:flex-start;gap:8px} .sl-t .gf-star{flex:none;margin-top:1px} .gf-card.is-picked{border-color:rgba(148,213,60,.55); background:linear-gradient(168deg, rgba(121,185,40,.13), rgba(121,185,40,.05)); box-shadow:var(--shadow-xs),0 0 0 1px rgba(121,185,40,.22),var(--edge-dark)} .gf-card.is-picked::before{background:var(--green-500);box-shadow:0 0 14px rgba(121,185,40,.6)} .gf-card.is-picked:hover{border-color:var(--green-400)} /* A `display` rule outranks the hidden attribute's UA style, so anything the Grant Finder toggles with [hidden] has to say so explicitly. */ .gf-advcount[hidden],.gf-selbar[hidden],.gf-adv[hidden]{display:none} /* ================================================ FINDER: LOCKED TEASER */ /* Non-members see the same board rendered from ten public sample rows, blurred, with the unlock panel floating in the green working light. */ .gf-locked #gf-list{filter:blur(9px) saturate(.8);pointer-events:none;user-select:none} .gf-locked .gf-selbar{display:none} .gf-lockhost{position:relative} .gf-unlock{position:absolute;inset:0;z-index:6;display:flex;justify-content:center; align-items:flex-start;padding:110px var(--gut) 0;pointer-events:none} .gf-unlock-card{pointer-events:auto;max-width:440px;text-align:center;padding:30px 28px; border-radius:var(--r-lg); background:radial-gradient(120% 140% at 50% -20%, rgba(121,185,40,.16), transparent 65%),var(--navy-900); border:1px solid rgba(148,213,60,.4); box-shadow:var(--shadow-lg),var(--shadow-glow),var(--edge-dark)} .gf-unlock-card .eyebrow{justify-content:center} .gf-unlock-card h3{font-size:22px;margin-bottom:10px} .gf-unlock-card p:not(.eyebrow){color:var(--on-navy-soft);font-size:14px;line-height:1.6} .gf-unlock-card .btn-row{justify-content:center;margin-top:16px} /* The subscription wall: three plan cards inside the unlock overlay. The middle card carries the accent, the same green the board is lit with. */ .gf-unlock-wide{max-width:760px} .gf-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; margin-top:18px;text-align:left} .gf-tier{position:relative;background:var(--panel);border:1px solid var(--panel-line); border-radius:var(--r);padding:16px 14px;display:flex;flex-direction:column;gap:8px} .gf-tier.feat{border-color:rgba(148,213,60,.45); background:radial-gradient(120% 130% at 50% -20%, rgba(121,185,40,.14), transparent 70%),var(--panel)} .gf-tier h4{font-size:15px;margin:0} .gf-tier-flag{position:absolute;top:-9px;left:50%;transform:translateX(-50%); font-family:var(--f-mono);text-transform:uppercase;font-size:9px;font-weight:600;letter-spacing:.1em; background:var(--green-500);color:#08172A;border-radius:20px;padding:2px 9px;white-space:nowrap} .gf-tier-amt{font-family:var(--f-display);font-size:24px;font-weight:800;color:#fff} .gf-tier-amt span{font-size:12px;font-weight:500;color:var(--on-navy-mute)} .gf-tier ul{list-style:none;margin:0;padding:0;flex:1} .gf-tier li{font-size:12px;line-height:1.5;color:var(--on-navy-soft);padding:3px 0 3px 16px; position:relative} .gf-tier li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px; border-radius:50%;background:var(--green-400);opacity:.7} .gf-tier .btn{margin-top:6px} @media (max-width:700px){.gf-tiers{grid-template-columns:minmax(0,1fr)}.gf-unlock{overflow:auto}} /* The Academy sneak peek: the module list wears the board's blur while the courses are in development. The veil card floats over the fogged outline. */ .dev-blur{position:relative;min-height:220px} .dev-fog{filter:blur(6px);opacity:.5;pointer-events:none;user-select:none} .dev-veil{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start; justify-content:center;padding-top:28px} .dev-veil .gf-unlock-card{pointer-events:auto} /* The catalog's launch veil: a locked card is a poster rather than a door. The title and the mark stay sharp so the reader knows exactly what is coming; the sell beneath them sits under the fog; the foot names the day. The blur is static and the grid holds a dozen cards, so it stays cheap. */ .card.is-lockcard{cursor:default} .card.is-lockcard .thumb{opacity:.8} .card-fog{display:block;filter:blur(4px);opacity:.55;pointer-events:none;user-select:none} .lockline{ display:inline-flex;align-items:center;gap:6px; font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-soft); padding:5px 10px;border:1px solid var(--panel-line-strong);border-radius:999px; } .lockline svg{flex:none;opacity:.8} .cat-locknote{margin:0 0 18px} /* ============================================== ACADEMY: LADDER TABS */ /* The two ladders are alternatives, not a sequence, so they are tabs rather than one very long stacked page. The shelves below belong to neither and stay visible under whichever ladder is open. */ .ladder-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 34px} .ladder-tab{ flex:1 1 220px;text-align:left;cursor:pointer; padding:16px 18px;border-radius:var(--r); background:var(--panel);border:1px solid var(--panel-line); color:var(--on-navy-soft);font-family:inherit; transition:border-color .16s var(--ease),background .16s var(--ease), transform .16s var(--ease),box-shadow .16s var(--ease); } .ladder-tab b{ display:block;font-family:var(--f-display);font-weight:800;font-stretch:110%; font-size:19px;letter-spacing:-.03em;color:#fff;margin-bottom:5px; } .ladder-tab .lt-n{ font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--on-navy-mute); } .ladder-tab:hover{border-color:var(--panel-line-strong);transform:translateY(-2px)} .ladder-tab[aria-selected="true"]{ background:radial-gradient(120% 160% at 50% -30%, rgba(121,185,40,.16), transparent 65%),var(--panel-2); border-color:rgba(148,213,60,.45); box-shadow:var(--shadow-md),var(--shadow-glow); } .ladder-tab[aria-selected="true"] .lt-n{color:var(--green-400)} @media (max-width:560px){.ladder-tab{flex:1 1 100%}} /* ==================================== FINDER: THE CATEGORY CHEAT SHEET */ /* One docket card per funding category, in the board's own order, each read as four labelled rows. The grants and contracts rows carry the source colours so the two markets read apart here exactly as they do on the board itself. */ .cs-list{display:grid;gap:16px;margin-top:8px} .cs-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg); padding:22px 26px 10px;box-shadow:var(--shadow-sm),var(--edge-dark)} .cs-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px} .cs-n{font-family:var(--f-mono);text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--green-400)} .cs-card h2{font-family:var(--f-display);font-weight:800;font-stretch:112%;text-transform:uppercase; letter-spacing:.01em;font-size:clamp(17px,2vw,21px);line-height:1.15;color:#fff;margin:0} .cs-note{margin:-6px 0 16px;font-size:13.5px;color:var(--on-navy-mute);line-height:1.6} .cs-row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px; padding:12px 0;border-top:1px solid var(--hairline)} .cs-tag{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--on-navy-mute);line-height:1.5;padding-top:3px} .cs-row.g .cs-tag{color:var(--green-400)} .cs-row.c .cs-tag{color:var(--steel-400)} .cs-row.f .cs-tag{color:var(--on-navy-soft)} .cs-row p{margin:0;font-size:13.5px;color:var(--on-navy-soft);line-height:1.62} .cs-row.f p{color:var(--on-navy)} @media (max-width:640px){ .cs-row{grid-template-columns:minmax(0,1fr);gap:5px;padding:11px 0} .cs-card{padding:18px 18px 8px} } /* ------------------------------------------------ the data source credit */ /* A quiet details fold at the foot of the data pages: who publishes the record, and who we are not. Civil, never a warning. */ .src-credit{border-top:1px solid var(--panel-line);padding:18px 0 6px} .src-credit summary{ font-family:var(--f-mono);text-transform:uppercase;font-size:11px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-mute);cursor:pointer;list-style:none; display:inline-flex;align-items:center;gap:8px; } .src-credit summary::-webkit-details-marker{display:none} .src-credit summary::after{content:"\25BE";font-size:10px;transition:transform .15s var(--ease)} .src-credit[open] summary::after{transform:rotate(180deg)} .src-credit summary:hover{color:var(--on-navy-soft)} .src-credit p{font-size:12.5px;line-height:1.65;color:var(--on-navy-mute);max-width:760px;margin:12px 0 0} /* ================================================= FUNDING CALENDAR */ /* The board wears cards; the calendar wears a ledger. Days stack down the page behind a date stamp, and each event is a slat that reads the way a morning does: when, what, where to be. Chips, tiles and panels are the board's own (gf- classes); only the docket bones are new. */ .cal-docket{margin-top:6px} .cal-month{font-family:var(--f-mono);text-transform:uppercase;font-size:12px;font-weight:600; letter-spacing:.16em;color:var(--on-navy-mute);margin:36px 0 14px;padding-bottom:10px; border-bottom:1px solid var(--hairline)} .cal-docket .cal-month:first-child{margin-top:8px} .cal-day{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 18px;margin-bottom:14px} .cal-date{position:sticky;top:calc(var(--nav-h) + 18px);align-self:start;text-align:center; padding:10px 6px 12px;border:1px solid var(--panel-line);border-radius:var(--r-sm); background:var(--panel)} .cal-date .dow{display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px; font-weight:600;letter-spacing:.14em;color:var(--on-navy-mute)} .cal-date b{display:block;font-family:var(--f-display);font-size:27px;font-weight:900; color:#fff;line-height:1.15} .cal-date .mon{display:block;font-family:var(--f-mono);text-transform:uppercase;font-size:10px; font-weight:600;letter-spacing:.14em;color:var(--green-400)} .cal-day.is-today .cal-date{border-color:rgba(148,213,60,.5); background:radial-gradient(120% 130% at 50% -20%, rgba(121,185,40,.16), transparent 70%),var(--panel)} .cal-today{display:block;font-family:var(--f-mono);font-size:8.5px;font-weight:600; letter-spacing:.12em;background:var(--green-500);color:#08172A;border-radius:7px; padding:2px 4px 1px;margin:7px 4px 0} .cal-slats{display:flex;flex-direction:column;gap:10px;min-width:0} .cal-slat{display:grid;grid-template-columns:122px minmax(0,1fr) auto;gap:16px;align-items:start; padding:14px 16px;border:1px solid var(--panel-line);border-radius:var(--r-sm); background:var(--panel);transition:border-color .15s var(--ease),transform .15s var(--ease)} .cal-slat:hover{border-color:var(--panel-line-strong);transform:translateY(-1px)} .cal-when{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.05em;padding-top:2px} .cal-when b{display:block;font-size:12px;font-weight:600;color:var(--green-400)} .cal-when span{display:block;font-size:9.5px;font-weight:500;color:var(--on-navy-mute);margin-top:3px} .cal-body{min-width:0} .cal-body h3{font-size:15px;margin:0 0 4px;line-height:1.45} .cal-body h3 a{color:#fff;text-decoration:none} .cal-body h3 a:hover{color:var(--green-400)} .cal-body h3 a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px} .cal-de{font-size:12.5px;color:var(--on-navy-soft);margin:0 0 9px;line-height:1.55} .cal-chips{display:flex;flex-wrap:wrap;gap:6px} .cal-go{align-self:center;white-space:nowrap;font-family:var(--f-mono);text-transform:uppercase; font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--green-400);text-decoration:none} .cal-go span{display:inline-block;transition:transform .18s var(--ease)} .cal-go:hover span{transform:translateX(3px)} .cal-go:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px} /* The locked page's peek: the next three sittings, plainly dated. */ .cal-peek{margin:18px auto 0;max-width:560px;text-align:left} .cal-peek-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline; padding:9px 0;border-top:1px solid var(--hairline);font-size:13px;color:var(--on-navy-soft)} .cal-peek-row b{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.06em;color:var(--green-400);white-space:nowrap} .cal-peek-tm{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px; color:var(--on-navy-mute);white-space:nowrap} @media (max-width:720px){ .cal-day{grid-template-columns:minmax(0,1fr)} .cal-date{position:static;display:flex;align-items:baseline;gap:8px;text-align:left; padding:7px 12px;margin-bottom:9px} .cal-date b{font-size:19px} .cal-today{margin:0 0 0 auto;align-self:center} .cal-slat{grid-template-columns:minmax(0,1fr)} .cal-when{display:flex;gap:8px;align-items:baseline;padding-top:0} .cal-when span{margin-top:0} .cal-go{align-self:start;margin-top:2px} } /* ==================================================== CHART ENGINE */ /* The wardrobe for assets/charts.js: thin marks, rounded data-ends, recessive grid, text in text tokens. Steel is the contracts register, green the grants register, exactly as the board wears them. */ .ch-tip{position:fixed;z-index:400;display:none;pointer-events:none;max-width:320px; background:#0B1B30;border:1px solid var(--panel-line-strong);border-radius:var(--r-sm); padding:10px 12px;box-shadow:var(--shadow-md);font-size:12px;line-height:1.5;color:var(--on-navy-soft)} .ch-tip b{display:block;color:#fff;font-size:12.5px;margin-bottom:2px} .ch-tip em{font-style:normal;font-family:var(--f-mono);color:var(--on-navy);margin-left:6px} .ch-tip em.steel{color:var(--steel-400)} .ch-tip em.green{color:var(--green-400)} .ch-tip span{display:block} .ch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:baseline} .ch-dot.steel{background:#8FB6E0} .ch-dot.green{background:#94D53C} /* horizontal bars */ .ch-hbars{display:flex;flex-direction:column;gap:9px} .ch-row{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:10px;align-items:center} .ch-lab{display:flex;align-items:baseline;gap:8px;min-width:0} .ch-rank{font-family:var(--f-mono);font-size:10px;font-weight:600;color:var(--on-navy-mute);flex:none;width:16px} .ch-name{font-size:12.5px;color:var(--on-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-sub{font-family:var(--f-mono);text-transform:uppercase;font-size:9px;color:var(--on-navy-mute);flex:none} .ch-track{position:relative;display:flex;align-items:center;gap:8px;min-width:0} .ch-bar{height:12px;border-radius:0 4px 4px 0;min-width:3px; /* The longest bar is 100% of the track, and the value sits beside it, so a bar that refuses to shrink pushes the figure off the page. Let it yield; the proportions between bars survive because they all yield by the same amount. */ flex:0 1 auto;max-width:100%; transition:width .5s var(--ease)} .ch-bar.steel{background:linear-gradient(90deg, rgba(143,182,224,.35), #8FB6E0)} .ch-bar.green{background:linear-gradient(90deg, rgba(121,185,40,.35), #94D53C)} .ch-val{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--on-navy-soft); white-space:nowrap;flex:none} /* two-series line */ .ch-line{position:relative} .ch-line svg{display:block;width:100%;height:auto} .ch-grid{stroke:rgba(255,255,255,.07);stroke-width:1} .ch-cross{stroke:rgba(255,255,255,.25);stroke-width:1;stroke-dasharray:3 3} .ch-xt{display:none} .ch-end{font-family:var(--f-mono);font-size:11px;font-weight:600;fill:var(--on-navy)} .ch-legend{display:flex;gap:16px;font-size:12px;color:var(--on-navy-soft);margin-bottom:8px} .ch-xticks{position:relative;height:16px;margin-top:2px} .ch-xticks span{position:absolute;transform:translateX(-50%);font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;color:var(--on-navy-mute);white-space:nowrap} /* compact category strip */ .ch-cats{display:flex;align-items:flex-end;gap:10px} .ch-cat{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0} .ch-cat i{display:block;width:100%;max-width:26px;border-radius:4px 4px 0 0; background:linear-gradient(180deg, #94D53C, rgba(121,185,40,.35))} .ch-cat .k{font-family:var(--f-mono);font-size:9.5px;font-weight:600;color:var(--on-navy-mute)} .ch-cat .v{font-family:var(--f-mono);font-size:9px;color:var(--on-navy-soft)} /* ==================================================== FUNDING LEDGER */ /* The intelligence deck: where the board lists and the calendar stacks, the ledger composes - a bento of instruments over one dark chart of the money itself. Steel carries contracts, green carries grants. */ .intel-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0} .intel-tabs a{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.1em;color:var(--on-navy-mute);text-decoration:none;padding:7px 12px; border:1px solid var(--panel-line);border-radius:999px; transition:color .15s var(--ease),border-color .15s var(--ease)} .intel-tabs a:hover{color:var(--on-navy);border-color:var(--panel-line-strong)} .intel-tabs a[aria-current="page"]{color:var(--green-400);border-color:rgba(148,213,60,.45); background:rgba(121,185,40,.1)} .intel-tabs .demo-tag{font-size:8.5px;margin-left:6px;padding:1px 5px;border-radius:6px; background:rgba(143,182,224,.18);color:var(--steel-400)} .intel-tabs .demo-tag.soon{background:rgba(255,255,255,.07);color:var(--on-navy-mute)} /* A room that is built but not yet open. Dimmed, not disabled: it can still be walked into, it just does not pretend to be for sale. */ .nav-right a.is-soon{color:var(--on-navy-mute)} .nav-right a.is-soon::before{content:"";display:inline-block;width:5px;height:5px; border-radius:50%;background:var(--on-navy-mute);margin-right:6px;vertical-align:middle} .nav-right a.is-soon:hover{color:var(--on-navy)} .preview-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;font-weight:600;letter-spacing:.1em; color:var(--on-navy-mute);border:1px dashed var(--panel-line-strong);border-radius:999px; padding:5px 11px;margin-top:14px} .preview-chip i{width:6px;height:6px;border-radius:50%;background:var(--green-500);flex:none} .lg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:22px} .lg-tile{grid-column:span 6;background:var(--panel);border:1px solid var(--panel-line); border-radius:var(--r-lg);padding:18px 20px;min-width:0;box-shadow:var(--edge-dark)} .lg-tile.wide{grid-column:span 12} .lg-tile.third{grid-column:span 4} .lg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px} .lg-head h3{font-size:15px;margin:0} .lg-kick{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px;font-weight:600; letter-spacing:.12em;color:var(--on-navy-mute)} .lg-kick.steel{color:var(--steel-400)} .lg-kick.green{color:var(--green-400)} .lg-kick a{color:inherit;text-decoration:underline;text-underline-offset:2px} .lg-kick a:hover{color:var(--green-400)} .lg-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px} .lg-counter{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg); padding:18px 20px 16px} .lg-counter .v{font-family:var(--f-display);font-size:clamp(26px,3vw,40px);font-weight:900; color:#fff;line-height:1.05;font-stretch:110%} .lg-counter .v small{font-size:.55em;font-weight:800;color:var(--on-navy-soft)} .lg-counter .l{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.11em;color:var(--on-navy-mute);margin-top:6px} .lg-counter.steel .v{color:var(--steel-400)} .lg-counter.green .v{color:var(--green-400)} .fy-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .fy-chips button{font-family:var(--f-mono);text-transform:uppercase;font-size:10.5px;font-weight:600; letter-spacing:.08em;color:var(--on-navy-mute);background:transparent; border:1px solid var(--panel-line);border-radius:999px;padding:7px 14px;cursor:pointer; transition:color .15s var(--ease),border-color .15s var(--ease)} .fy-chips button:hover{color:var(--on-navy);border-color:var(--panel-line-strong)} .fy-chips button[aria-pressed="true"]{color:#08172A;background:var(--green-500);border-color:var(--green-500)} .fy-chips button:focus-visible{outline:none;box-shadow:var(--ring)} /* forecast rail rows */ .fr-row{padding:11px 0;border-top:1px solid var(--hairline)} .fr-row:first-child{border-top:0;padding-top:2px} .fr-row a{color:#fff;text-decoration:none;font-size:13px;line-height:1.5} .fr-row a:hover{color:var(--green-400)} .fr-row .t{color:var(--on-navy);font-size:13px;line-height:1.5} .fr-meta{display:flex;gap:10px;font-family:var(--f-mono);text-transform:uppercase; font-size:9.5px;letter-spacing:.07em;color:var(--on-navy-mute);margin-top:4px;flex-wrap:wrap} .fr-meta b{color:var(--green-400);font-weight:600} /* vendor lookup */ .vl-input{display:flex;gap:10px} .vl-input input{flex:1;font:inherit;font-size:14px;padding:11px 13px;color:#fff; background:rgba(255,255,255,.05);border:1px solid var(--panel-line-strong);border-radius:var(--r-sm)} .vl-input input:focus{outline:none;border-color:var(--green-500);box-shadow:var(--ring)} .vl-input button{flex:none} .vl-note{font-size:11.5px;color:var(--on-navy-mute);margin-top:8px} .vl-list{margin-top:14px} .vl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px; padding:11px 0;border-top:1px solid var(--hairline)} .vl-row .t{font-size:13px;color:#fff;line-height:1.45} .vl-row .t a{color:inherit;text-decoration:none} .vl-row .t a:hover{color:var(--green-400)} .vl-row .amt{font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--steel-400);white-space:nowrap} .vl-row .m{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;color:var(--on-navy-mute)} /* The wall a locked visitor meets where the deck would be: the same tile, in the green working light, holding the pitch instead of the rows. */ .lg-wall{border-color:rgba(148,213,60,.3); background:linear-gradient(180deg,rgba(121,185,40,.07),rgba(255,255,255,.01)),var(--panel); padding:28px 30px 26px} .lg-wall h3{font-size:22px;margin-bottom:10px} .lg-wall p{color:var(--on-navy-soft);font-size:14px;line-height:1.65;max-width:70ch} .lg-wall p:last-child{margin-bottom:0} .lg-wall .btn-row{margin-top:20px} .ft-wall-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline)} .ft-wall-fig b{display:block;font-family:var(--f-display);font-size:24px;font-weight:900; font-stretch:110%;color:var(--green-400);line-height:1.1} .ft-wall-fig span{display:block;font-family:var(--f-mono);text-transform:uppercase; font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--on-navy-mute); margin-top:6px;line-height:1.5} @media (max-width:960px){ .lg-tile,.lg-tile.third{grid-column:span 12} .lg-counters{grid-template-columns:minmax(0,1fr)} .ch-row{grid-template-columns:minmax(0,1fr)} .ch-lab{margin-bottom:-4px} .lg-wall{padding:22px 20px} } /* =========================================================== SLED BOARD */ /* A row is a deadline first: what closes soonest is what a bid team can still act on, so the date holds the left rail and the title follows. */ .sl-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 20px; padding:16px 0;border-top:1px solid var(--hairline)} .sl-row:first-child{border-top:0} .sl-when{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .sl-when b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.04em; color:var(--on-navy);text-transform:uppercase;line-height:1.4} .sl-t{font-size:15px;line-height:1.4;margin:0 0 5px} .sl-t a{color:#fff;text-decoration:none} .sl-t a:hover{color:var(--green-400)} .sl-de{font-size:13px;color:var(--on-navy-soft);line-height:1.55;margin:0 0 7px;max-width:78ch} .sl-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;color:var(--on-navy-mute)} .sl-meta b{color:var(--green-400);font-weight:600} .sl-juris{color:#08172A;background:var(--green-500);border-radius:4px;padding:1px 6px;font-weight:700} .sl-kind{color:var(--steel-400);border:1px solid var(--panel-line-strong); border-radius:4px;padding:1px 6px} @media (max-width:720px){ .sl-row{grid-template-columns:minmax(0,1fr);gap:8px} .sl-when{flex-direction:row;align-items:center;gap:10px} } /* ====================================================== HOME, THE FOLD */ /* Four live figures under the promise. The board's own numbers, at a size that reads as evidence rather than decoration. */ .hero-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 4px} .hero-stat b{display:block;font-family:var(--f-display);font-size:clamp(24px,3.1vw,34px); font-weight:900;font-stretch:110%;line-height:1;color:#fff; text-shadow:0 0 26px rgba(121,185,40,.28)} .hero-stat:first-child b{color:var(--green-400)} .hero-stat span{display:block;font-family:var(--f-mono);text-transform:uppercase; font-size:9.5px;font-weight:600;letter-spacing:.11em;color:var(--on-navy-mute);margin-top:7px} @media (max-width:520px){ .hero-stats{gap:12px 22px} } /* The four boards, as cards you can feel the edge of. The track count is set rather than auto-fit: four cards under auto-fit fall to three-and-an-orphan through most of the laptop range, and the orphan reads as an afterthought — which is exactly the wrong thing to say about the board coming next. */ .prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;margin-top:26px} @media (max-width:1080px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.prod-grid{grid-template-columns:minmax(0,1fr)}} .prod{position:relative;display:flex;flex-direction:column;gap:9px;padding:24px 24px 22px; border:1px solid var(--panel-line);border-radius:var(--r-lg);background:var(--panel); text-decoration:none;overflow:hidden;box-shadow:var(--edge-dark); transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} /* A wash of the working light that only wakes on approach. */ .prod::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(120% 90% at 0% 0%, rgba(121,185,40,.16), transparent 62%); transition:opacity .25s var(--ease)} .prod:hover{transform:translateY(-3px);border-color:rgba(148,213,60,.42); box-shadow:0 18px 44px -22px rgba(0,0,0,.85)} .prod:hover::before{opacity:1} .prod-ic{position:relative;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:11px;color:var(--green-400); background:rgba(121,185,40,.12);border:1px solid rgba(148,213,60,.28)} .prod b{position:relative;font-family:var(--f-display);font-size:17.5px;font-weight:800; font-stretch:106%;letter-spacing:-.02em;color:#fff} .prod-fig{position:relative;font-family:var(--f-display);font-size:30px;font-weight:900; font-stretch:110%;line-height:1;color:var(--green-400)} .prod-fig.sm{font-size:0} .prod-fig em{display:block;font-family:var(--f-mono);font-style:normal;font-size:9.5px; font-weight:600;text-transform:uppercase;letter-spacing:.11em; color:var(--on-navy-mute);margin-top:6px} .prod-b{position:relative;font-size:13.5px;line-height:1.6;color:var(--on-navy-soft);flex:1} .prod-go{position:relative;font-family:var(--f-mono);text-transform:uppercase;font-size:10px; font-weight:600;letter-spacing:.12em;color:var(--green-400);margin-top:4px} .prod:hover .prod-go span{display:inline-block;transform:translateX(3px);transition:transform .18s var(--ease)} /* A board that is not open yet still stands in the row, and says so on its face: the working light comes off it, and the label is the neutral chip the rest of the site uses for announced-but-closed. */ .prod.is-soon .prod-ic{color:var(--steel-400);background:rgba(143,182,224,.1); border-color:rgba(143,182,224,.26)} .prod.is-soon .prod-go{color:var(--steel-400)} .prod.is-soon::before{background:radial-gradient(120% 90% at 0% 0%, rgba(143,182,224,.14), transparent 62%)} .prod.is-soon:hover{border-color:rgba(143,182,224,.4)} .prod-soon{display:inline-block;vertical-align:2px;margin-left:8px; font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--steel-400);padding:3px 8px;border-radius:999px; background:rgba(143,182,224,.1);border:1px solid rgba(143,182,224,.28)} /* ============================================================ 990 BOARD */ /* A foundation is read as a name and a number: who they are on the left, what they hold on the right, in the size that makes the ranking legible without a chart. */ .fd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px; align-items:center;padding:15px 0;border-top:1px solid var(--hairline)} .fd-row:first-child{border-top:0} .fd-t{font-size:15px;line-height:1.4;margin:0 0 6px;color:#fff} .fd-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;color:var(--on-navy-mute)} .fd-ein{color:var(--on-navy)} .fd-field{color:var(--steel-400)} .fd-filed{color:var(--green-400)} .fd-figs{display:flex;gap:22px;align-items:baseline;justify-content:flex-end} .fd-a,.fd-i{text-align:right;white-space:nowrap} .fd-a{font-family:var(--f-display);font-size:19px;font-weight:800;font-stretch:106%;color:#fff} .fd-i{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--on-navy-soft)} .fd-a span,.fd-i span{display:block;font-family:var(--f-mono);font-weight:600; text-transform:uppercase;font-size:9px;letter-spacing:.1em;color:var(--on-navy-mute);margin-top:3px} /* A row is a door. It says so on hover and it turns its chevron when open. */ .fd-row{cursor:pointer;transition:background .14s var(--ease)} .fd-row:hover{background:rgba(255,255,255,.025)} .fd-row:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)} .fd-open{color:var(--on-navy-mute);display:inline-flex;align-items:center; transition:transform .2s var(--ease),color .14s var(--ease)} .fd-row:hover .fd-open{color:var(--green-400)} .fd-row[aria-expanded="true"] .fd-open{transform:rotate(180deg);color:var(--green-400)} .fd-row[aria-expanded="true"]{background:rgba(121,185,40,.05)} .fd-detail{padding:4px 0 20px;border-top:0} .fd-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 26px;margin:0 0 18px} .fd-dl dt{font-family:var(--f-mono);text-transform:uppercase;font-size:9px; font-weight:600;letter-spacing:.1em;color:var(--on-navy-mute);margin-bottom:3px} .fd-dl dd{margin:0 0 2px;font-size:13.5px;color:#fff;line-height:1.5} .fd-acts{display:flex;flex-wrap:wrap;gap:9px} .fd-note{font-size:11.5px;color:var(--on-navy-mute);margin:14px 0 0;max-width:74ch;line-height:1.6} @media (max-width:640px){ .fd-row{grid-template-columns:minmax(0,1fr)} .fd-figs{justify-content:flex-start;gap:18px} .fd-a,.fd-i{text-align:left} } /* The source list: the page saying out loud where every row came from. */ .src-table{margin-top:20px;border-top:1px solid var(--hairline)} .src-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.9fr); gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--hairline);align-items:baseline} .src-name{font-size:13.5px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px} .src-name a{color:#fff;text-decoration:none} .src-name a:hover{color:var(--green-400)} .src-juris{font-family:var(--f-mono);font-size:9px;font-weight:700;color:#08172A; background:var(--green-500);border-radius:4px;padding:1px 5px;flex:none} .src-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--f-mono); text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;color:var(--on-navy-mute)} .src-meta b{color:var(--on-navy);font-weight:600} .src-lic{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em; color:var(--green-400);line-height:1.5} @media (max-width:860px){ .src-row{grid-template-columns:minmax(0,1fr)} .src-lic{color:var(--green-400)} } /* ====================================================== FRONTIER */ /* The state lights. The registry index cards that used to sit here went out with the third-party 990 window they were built for. */ .ft-h4{font-family:var(--f-mono);text-transform:uppercase;font-size:10px;font-weight:600; letter-spacing:.12em;color:var(--on-navy-mute);margin:16px 0 10px} .ft-h4:first-of-type{margin-top:4px} .ft-states{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px; max-width:560px;margin-top:22px} .ft-st{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em; text-align:center;padding:6px 0;border-radius:6px;color:var(--on-navy-mute); border:1px solid var(--panel-line);opacity:.45} .ft-st.lit{opacity:1;color:#08172A;background:var(--green-500);border-color:var(--green-500)} @media (max-width:560px){.ft-states{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px} .ft-st{font-size:8px;padding:4px 0}} /* the homepage market pulse strip */ .home-pulse{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap} .home-pulse .ch-cats{flex:1;min-width:260px;max-width:520px} .home-pulse .hp-note{font-family:var(--f-mono);text-transform:uppercase;font-size:9.5px; letter-spacing:.1em;color:var(--on-navy-mute);line-height:1.7} /* --------------------------------------------------------------------------- ACADEMY ONLY. The one nav link that leaves this site for the Hub, marked so it does not read as another room of this one. */ .nav-right a.off-site::after{content:"↗";margin-left:5px;font-size:11px;opacity:.65}