/* ============================================================ ICPA Homepage — standalone implementation of the "ICPA Homepage -02-03 flipped-" design. Responsive: desktop (≥1200px), tablet (768–1199px), mobile (<768px) ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* scrollbar-color disables ::-webkit-scrollbar-* styling in Chrome/Edge, so keep it Firefox-only */ @supports (-moz-appearance:none){html{scrollbar-color:var(--icpa-accent) var(--icpa-ink-2)}} ::-webkit-scrollbar{width:14px;height:14px;background:var(--icpa-ink-2)} ::-webkit-scrollbar-track{background:var(--icpa-ink-2);border-left:1px solid var(--icpa-ink-hairline)} ::-webkit-scrollbar-thumb{background:var(--icpa-gold-gradient);border:3px solid var(--icpa-ink-2);border-radius:7px} ::-webkit-scrollbar-thumb:hover{background:var(--icpa-gold-gradient);border-width:2px} ::-webkit-scrollbar-corner{background:var(--icpa-ink-2)} ::-webkit-scrollbar-button{width:14px;height:14px;background-color:var(--icpa-ink-2);background-repeat:no-repeat;background-position:center;background-size:8px 8px} ::-webkit-scrollbar-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A17'/%3E%3Cstop offset='.3' stop-color='%23C9A227'/%3E%3Cstop offset='.5' stop-color='%23F3DA8C'/%3E%3Cstop offset='.7' stop-color='%23C9A227'/%3E%3Cstop offset='1' stop-color='%238A6A17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M5 1.5 9.2 8H.8z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A17'/%3E%3Cstop offset='.3' stop-color='%23C9A227'/%3E%3Cstop offset='.5' stop-color='%23F3DA8C'/%3E%3Cstop offset='.7' stop-color='%23C9A227'/%3E%3Cstop offset='1' stop-color='%238A6A17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M5 8.5.8 2h8.4z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:horizontal:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A17'/%3E%3Cstop offset='.3' stop-color='%23C9A227'/%3E%3Cstop offset='.5' stop-color='%23F3DA8C'/%3E%3Cstop offset='.7' stop-color='%23C9A227'/%3E%3Cstop offset='1' stop-color='%238A6A17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M1.5 5 8 .8v8.4z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:horizontal:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A6A17'/%3E%3Cstop offset='.3' stop-color='%23C9A227'/%3E%3Cstop offset='.5' stop-color='%23F3DA8C'/%3E%3Cstop offset='.7' stop-color='%23C9A227'/%3E%3Cstop offset='1' stop-color='%238A6A17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M8.5 5 2 9.2V.8z'/%3E%3C/svg%3E")} body{ margin:0; background:var(--icpa-ink); color:var(--text-body); font:var(--type-body); -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden; } h1,h2,h3,h4{margin:0;font-family:var(--font-sans)} p{margin:0} a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)} a:hover{color:var(--text-link-hover)} img{max-width:100%} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---------- browser-drawn surfaces ---------- Selection, the caret and underline metrics ship with browser defaults that belong to no design system: the stock selection blue is the one un-branded rectangle a reader can produce on any page here. Themed once, site-wide. Selection uses the light-blue tint at full strength so the ink registers keep white text legible through it. */ ::selection{background:var(--icpa-light-blue);color:var(--icpa-dark-navy)} /* On the ink/navy bands the same tint would wash out; hold the gold register. */ .nav ::selection,.hero ::selection,.phero ::selection, .join ::selection,.footer ::selection,.icpa-dark ::selection{ background:var(--icpa-accent);color:var(--icpa-accent-ink); } /* Text caret follows the brand rather than the OS default black. */ input,textarea,select,[contenteditable]{caret-color:var(--icpa-navy)} /* Underlines only ever appear on hover/focus in this system; when they do, clear the descenders instead of striking through them. */ a{text-underline-offset:3px;text-decoration-thickness:1px} /* ---------- link colour on the ink bands ---------- `a`/`a:hover` above resolve --text-link/--text-link-hover from the light register, which is navy #30588F over #101B2E (2.0:1) and dark navy #232460 on hover (1.2:1) -- a link that all but disappears at the moment the reader points at it. Every band that paints itself dark re-points the two tokens at the dark register, so a link with no component rule of its own still lands legible. Component rules keep winning on specificity; nothing styled today changes appearance. */ .nav,.hero,.phero,.join,.footer,.skip-link{ --text-link:#9CB4D8; --text-link-hover:var(--off-white); } /* keyboard users: first tab stop jumps past nav + rail */ .skip-link{ position:fixed;top:12px;left:12px;z-index:100;transform:translateY(-250%); background:var(--icpa-ink-2);color:var(--off-white);border:1px solid var(--icpa-accent); border-radius:var(--radius-sm);padding:10px 18px; font-family:var(--font-sans);font-size:.875rem;font-weight:var(--weight-semibold); transition:var(--transition-control); } .skip-link:focus{transform:none} /* ---------- layout scaffolding ---------- */ :root{ /* Full-bleed shell: backgrounds span the viewport, content sits inside the gutters. They used to be fixed at 64/132, which let the home page run nearly edge to edge on a wide monitor; they now track --frame (tokens/spacing.css) and never fall below the old 64px floor. The right gutter keeps its extra 68px of scroll-rail clearance. */ --pad-l:max(64px, var(--frame)); /* left content gutter */ --pad-r:calc(max(64px, var(--frame)) + 68px); /* right gutter incl. rail clearance */ --rail-w:104px; /* 104, not 96: see .rail__label — "COMMUNITY" needs 78.67px */ } .shell{position:relative} .pad{padding-left:var(--pad-l);padding-right:var(--pad-r)} /* ---------- shared components ---------- */ .eyebrow{ font:var(--type-caption); font-weight:var(--weight-bold); font-size:var(--size-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--text-meta); } .eyebrow--accent{color:var(--icpa-accent-bright)} .eyebrow--accent-light{color:var(--icpa-accent-on-light)} .eyebrow--reverse{color:#9CB4D8} /* eyebrow spacing (replaces inline margin spacers) */ .eyebrow-row{margin-bottom:20px} .eyebrow-row--tight{margin-bottom:14px} /* card / panel heads are real headings for screen-reader outline; visual style stays eyebrow */ .card__head{margin:0 0 14px} .card__head--flush{margin-bottom:0} .panel__head{margin:0 0 12px} .panel__more{display:inline-block;margin-top:16px} .panel__links{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .panel__links .panel__more{margin-top:0} .panel__links{margin-top:16px} .focus__head{margin:0} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-sans);font-weight:var(--weight-semibold); border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0; padding:10px 22px;font-size:1rem;border:1px solid transparent; transition:var(--transition-control);text-decoration:none; } .btn--lg{padding:14px 30px;font-size:1.0625rem} /* Option C: metallic light-sweep gradient — buttons, plus scrollbar thumb/arrows and rail dots */ .btn--gold{background:var(--icpa-gold-gradient);color:var(--icpa-accent-ink);border-color:transparent} .btn--gold:hover{background:var(--icpa-gold-gradient);border-color:transparent;color:var(--icpa-accent-ink);filter:brightness(1.08)} .btn--gold:active{filter:brightness(.94)} .btn--navy{background:var(--icpa-dark-navy);color:var(--white);border-color:var(--icpa-dark-navy)} .btn--navy:hover{background:var(--icpa-ink-navy-hover);border-color:var(--icpa-ink-navy-hover);color:var(--white)} .btn--navy:active{background:var(--icpa-ink-navy-active);border-color:var(--icpa-ink-navy-active)} /* numeric roles: tabular figures so columns of numbers and dates align */ .ledger,.events__date,.stat__big,.stat__mid,.brief__date{font-variant-numeric:tabular-nums} /* ---------- standalone "go" links ---------- The arrow links that close a card or panel are the section's actual exit, but at 13px they rendered a 20px-tall target -- under the 24px floor WCAG 2.5.8 sets for a pointer target. They are laid out as their own line, so the height can grow without shifting anything around them; the text baseline does not move. Inline links inside a paragraph are deliberately untouched: there the surrounding line spacing carries the exemption. */ .partners__link a,.events__all a,.cert a,.pillar a,.link-dim,.panel__more{ display:inline-flex;align-items:center;min-height:24px; } /* lucide line icon via CSS mask (inherits currentColor) */ .icon{ display:inline-block;width:20px;height:20px;flex:0 0 auto; background-color:currentColor; -webkit-mask-image:var(--i);mask-image:var(--i); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; } .icon--15{width:15px;height:15px} .icon--14{width:14px;height:14px} .icon--22{width:22px;height:22px} .icon--24{width:24px;height:24px} .chip{ display:inline-flex;align-items:center;gap:8px;padding:6px 12px; border-radius:var(--radius-pill);border:1px solid #33445F; background:rgba(255,255,255,.03);color:var(--off-white); font:var(--type-caption);font-weight:var(--weight-semibold);white-space:nowrap; } .chip__dot{width:8px;height:8px;border-radius:50%;background:var(--status-monitoring);flex:0 0 auto} /* visually hidden, screen-reader available */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- the ink cap + the floating nav ---------- Decision of 2026-08-17, built 2026-08-23. The header is two rows: a 36px solid ink utility cap pinned to the very top, and the primary nav floating transparent on the dark hero beneath it. Why the cap exists rather than a pure-transparent header: the nav can be transparent because every hero on this site is already ink, but the 12.5px utility type has no such guarantee the moment the header scrolls off the hero or a page ships without one. A solid 36px strip gives that type a ground it keeps in all three states, and the header's silhouette is then identical floating, scrolled and hero-less. .siteheader wraps both rows so the scrolled state is one position change on one element instead of two elements kept in sync. Absolute at rest (over the hero, out of flow, exactly as .nav was on its own) and fixed once the page scrolls -- at scrollY 0 the two render identically, so the swap has no jump to hide. */ .siteheader{position:absolute;top:0;left:0;right:0;z-index:6} /* ---- the cap ---- */ .utilcap{ /* above the nav row: the open search panel hangs down out of the cap and has to clear the dropdown menus, which are positioned and later in DOM order and would otherwise paint over it. */ position:relative;z-index:2; /* One child, right-aligned: the cap is a utility row, not a two-sided bar. The support@ address that used to hold the left end came off on 2026-08-23 -- Contact Us four items along goes to the real form, and two ways to say the same thing in a 36px strip is one too many. */ display:flex;align-items:center;justify-content:flex-end;gap:24px; min-height:36px;padding:0 var(--pad-r) 0 var(--pad-l); /* A shade under --icpa-ink, not equal to it. Every hero on this site opens on --icpa-ink, so a cap painted in the token disappears into the hero and only the hairline says it is there -- which was the whole failure mode the cap was meant to avoid. Going one step darker makes the strip read as its own band against the hero and still reads as ink against white. */ background:#050A13; border-bottom:1px solid var(--icpa-ink-hairline); font-size:.78125rem;line-height:1; /* 12.5px */ font-weight:var(--weight-semibold); color:#8FA0B8; } .utilcap__right{display:flex;align-items:center;gap:6px;min-width:0} /* Every cap control is the same shape: a 34px-tall text button that lights up on hover. 34 rather than the 44 the nav buttons use because the row is 36 tall by decision; these are pointer-only controls (below the drawer breakpoint the drawer carries full-size versions of all of them). */ .utilcap__link{ display:inline-flex;align-items:center;gap:7px; min-height:34px;padding:0 10px;border-radius:3px; color:#B7C4D6;white-space:nowrap; transition:var(--transition-control); } .utilcap__link:hover{background:rgba(255,255,255,.07);color:#FCFCFC} .utilcap__link .icon{width:13px;height:13px} .utilcap__sep{width:1px;height:16px;background:var(--icpa-ink-hairline);flex:0 0 auto;margin:0 4px} /* social -- square icon buttons, one shade quieter than the text links so four marks in a row do not out-shout Contact Us next to them. */ .utilcap__soc{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-width:30px;min-height:30px;padding:0 7px;border-radius:3px; color:#8FA0B8;white-space:nowrap; transition:var(--transition-control); } .utilcap__soc:hover{background:rgba(255,255,255,.07);color:#FCFCFC} .utilcap__soc .icon{width:15px;height:15px} /* The LinkedIn group takes a word: it and the LinkedIn page are two real, different destinations, and two identical marks side by side would make the reader hover to find out which is which. */ .utilcap__soc--label{padding-right:10px} /* the member state -- the one cap item that reads as a control, not a link */ .utilcap__login{ display:inline-flex;align-items:center;gap:7px; min-height:26px;padding:0 12px;border-radius:3px; border:1px solid rgba(255,255,255,.24); color:#D8E2EE;white-space:nowrap; transition:var(--transition-control); } .utilcap__login:hover{background:rgba(255,255,255,.1);border-color:#FCFCFC;color:#FCFCFC} .utilcap__login .icon{width:12px;height:12px} /* Signed in, the same pill becomes the greeting. Both halves are in the markup and this picks one, so with JS off the cap shows "Log in" -- the safe half. .is-member is set from body.logged-in, the same signal js/login.js and every gate on the site already read. */ .utilcap__me{ display:none;align-items:center;gap:7px; min-height:26px;padding:0 12px;border-radius:3px; border:1px solid rgba(255,255,255,.24); color:#D8E2EE;white-space:nowrap; transition:var(--transition-control); } .utilcap__me:hover{background:rgba(255,255,255,.1);border-color:#FCFCFC;color:#FCFCFC} .utilcap__me .icon{width:13px;height:13px;color:var(--icpa-accent)} .siteheader.is-member .utilcap__login{display:none} .siteheader.is-member .utilcap__me{display:inline-flex} /* Search moves out of the nav row and into the cap. The markup, its ids and its classes are unchanged, so js/main.js binds to it exactly as before -- only the box it sits in and the direction the panel opens are new. */ .utilcap .nav__searchtoggle{min-width:34px;min-height:34px;padding:0 9px;border:0;color:#B7C4D6} .utilcap .nav__searchtoggle:hover{background:rgba(255,255,255,.07);border:0;color:#FCFCFC} .utilcap .nav__searchtoggle .icon{width:15px;height:15px} /* The open field is taller than the 36px row, so in the cap it hangs below the strip onto the hero instead of centring on it and overflowing both edges. */ .utilcap .nav__searchform{top:calc(100% - 2px);transform:none;width:min(420px,44vw)} /* ---- the nav, now floating under the cap ---- */ .siteheader .nav{position:static;padding-top:22px;padding-bottom:22px;z-index:auto} /* the two controls the cap took over */ .siteheader .nav .nav__search,.siteheader .nav .nav__login{display:none} /* ---- scrolled state ---- Fixed, and the nav row takes the cap's ground so the pair reads as one solid bar once there is page content behind it. */ .siteheader{ transition:background-color 200ms var(--ease-standard),box-shadow 200ms var(--ease-standard); } .siteheader .nav{transition:padding 200ms var(--ease-standard),background-color 200ms var(--ease-standard)} .siteheader.is-stuck{position:fixed;box-shadow:0 10px 30px rgba(4,10,20,.45)} .siteheader.is-stuck .nav{ padding-top:12px;padding-bottom:12px; background:var(--icpa-ink); border-bottom:1px solid var(--icpa-ink-hairline); } .siteheader.is-stuck .nav__logo{width:150px} @media (prefers-reduced-motion:reduce){ .siteheader,.siteheader .nav{transition:none} } /* ---- the hero-less fallback ---- Nothing on the site ships without a dark hero today, so this is defensive: put .siteheader--solid on the wrapper and the floating row gets the cap's ground from the start, which is exactly the scrolled state standing still. */ .siteheader--solid .nav{background:var(--icpa-ink);border-bottom:1px solid var(--icpa-ink-hairline)} @media (max-width:1379px){ /* The nav collapses to the drawer here, but the cap does not: Contact, search and the member state stay one tap away on tablet instead of going behind the burger with everything else. */ .utilcap{padding-right:var(--pad-r)} } @media (max-width:767px){ .utilcap{padding-left:var(--pad-l);gap:8px} .utilcap__me{padding:0 10px} .utilcap .nav__search{display:none} /* the drawer carries a full-size field */ .utilcap__soc,.utilcap__sep{display:none} } /* ---------- nav ---------- */ .nav{ position:absolute;top:0;left:0;right:0;z-index:6; display:flex;align-items:center;justify-content:space-between;gap:32px; padding:28px var(--pad-r) 0 var(--pad-l); } .nav__home{display:block;flex:0 0 auto} .nav__logo{width:190px;height:auto;display:block} .nav__group{display:flex;align-items:center;gap:20px} .nav__links{display:flex;align-items:center;gap:22px;margin-right:64px;font-size:.875rem;font-weight:600;color:#C4D0DF} /* dropdown menus */ .nav__item{position:relative} .nav__link{ display:inline-flex;align-items:center;gap:5px;padding:0; background:none;border:0;cursor:pointer; font:inherit;color:inherit;white-space:nowrap; transition:var(--transition-control); } .nav__link:hover,.nav__item.is-open .nav__link{color:#FCFCFC} .nav__link .icon{transition:transform 200ms var(--ease-standard)} .nav__item.is-open .nav__link .icon{transform:rotate(180deg)} .nav__menu{ position:absolute;top:calc(100% + 14px);left:-14px;min-width:236px; background:var(--icpa-ink-2);border:1px solid var(--icpa-ink-hairline); border-radius:6px;padding:10px;box-shadow:var(--shadow-card); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity 160ms var(--ease-standard),transform 160ms var(--ease-standard),visibility 160ms; } /* invisible bridge so the pointer can cross the gap without closing the menu */ .nav__menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .nav__item.is-open .nav__menu{opacity:1;visibility:visible;transform:none} @media (prefers-reduced-motion:reduce){.nav__menu,.nav__link .icon{transition:none}} .nav__menu--wide{min-width:280px} .nav__menu--right{left:auto;right:-14px} .nav__menu a{ display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:4px; font-size:.875rem;font-weight:500;color:#C4D0DF;white-space:nowrap; } .nav__menu a:hover{background:rgba(255,255,255,.06);color:#FCFCFC} .nav__menu-label{ margin:10px 12px 4px;padding-top:12px;border-top:1px solid var(--icpa-ink-hairline); font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--icpa-accent-bright); } .nav__lock{width:12px;height:12px;margin-left:auto;color:var(--icpa-accent)} /* flat top-level links (Jobs) — .nav__link is shared by