/* ============================================================ Components — built once, reused on every page ============================================================ */ /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--font-body); font-weight:700; font-size:1rem; line-height:1; text-decoration:none; border-radius:var(--r-btn); border:1.5px solid transparent; padding:.85rem 1.5rem; min-height:50px; cursor:pointer; white-space:nowrap; transition:transform var(--t-fast) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .btn svg{ width:1.2em; height:1.2em; flex:none; } .btn:hover{ text-decoration:none; } .btn-primary{ background:var(--green-700); color:#fff; border-color:var(--green-700); } .btn-primary:hover{ background:var(--green-900); border-color:var(--green-900); color:#fff; box-shadow:var(--shadow-green); transform:scale(1.02); } .btn-amber{ background:var(--amber-500); color:var(--navy-700); border-color:var(--amber-500); } .btn-amber:hover{ background:#FFC76E; border-color:#FFC76E; color:var(--navy-700); box-shadow:var(--shadow-amber); transform:scale(1.02); } .btn-secondary{ background:transparent; border-color:var(--green-700); color:var(--green-700); } .btn-secondary:hover{ background:var(--green-700); color:#fff; } .btn-onდark,.btn-ondark{ background:#fff; color:var(--navy-700); border-color:#fff; } .btn-ondark:hover{ background:var(--amber-500); border-color:var(--amber-500); color:var(--navy-700); } .btn-ghost{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; background:transparent; border:0; color:var(--green-700); padding:.5rem .9rem; min-height:44px; border-radius:var(--r-chip); cursor:pointer; } .btn-ghost:hover{ color:var(--green-900); background:var(--green-50); } .btn-ghost svg{ width:1.2em; height:1.2em; flex:none; } .btn-sm{ min-height:42px; padding:.55rem 1rem; font-size:.9rem; } .btn-block{ width:100%; } .btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none !important; } @media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none !important; } } /* ---------- Top-bar banner (admin-managed, single flat color #FFB547) ---------- */ .demo-ribbon{ background:var(--amber-500); color:var(--navy-700); font-weight:600; font-size:.88rem; text-align:center; padding:.5rem 2.5rem .5rem 1rem; position:relative; line-height:1.4; } .demo-ribbon strong{ color:var(--navy-700); } .demo-ribbon__close{ position:absolute; right:.4rem; top:50%; transform:translateY(-50%); background:transparent; border:0; color:var(--navy-700); font-size:1.3rem; width:36px; height:36px; border-radius:50%; line-height:1; } .demo-ribbon__close:hover{ background:rgba(17,37,65,.12); } .demo-ribbon[hidden]{ display:none; } .demo-ribbon:not([hidden]){ animation: ribbonIn .45s ease both; } @keyframes ribbonIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .demo-ribbon:not([hidden]){ animation:none; } } /* All banner types share the same color; the icon + label tell them apart. */ .demo-ribbon--loading{ font-style:italic; opacity:.85; } .demo-ribbon__ico{ display:inline-flex; vertical-align:-.16em; margin-right:.35rem; } .demo-ribbon__ico svg{ width:1.05em; height:1.05em; } /* Bill stage tracker */ .billsteps{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; padding:0; margin:var(--s-3) 0 0; } .billstep{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-600); } .billstep__dot{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; background:var(--bg-soft); color:var(--ink-600); border:1px solid var(--line); flex:none; } .billstep.is-done{ color:var(--green-700); } .billstep.is-done .billstep__dot{ background:var(--green-100); color:var(--green-700); border-color:var(--green-100); } .billstep.is-current{ color:var(--navy-700); font-weight:700; } .billstep.is-current .billstep__dot{ background:var(--amber-500); color:var(--navy-700); border-color:var(--amber-500); } /* Dashboard grant CTA (dark, high-visibility) */ /* Muted from a solid navy block to a standard aside card (UAT-5): heavy contrast on the dashboard is reserved for Hub banner alerts. */ .grant-cta{ background:#fff; color:var(--ink-900); border:1px solid var(--line); border-top:4px solid var(--navy-700); border-radius:var(--r-2); padding:var(--s-5); box-shadow:var(--shadow-1); } .grant-cta__eyebrow{ display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-700); margin-bottom:.4rem; } .grant-cta h3{ margin:0 0 .4rem; color:var(--ink-900); font-size:1.15rem; } .grant-cta p{ margin:0 0 var(--s-4); color:var(--ink-300); font-size:.95rem; } .grant-cta__btn{ background:var(--amber-500); color:var(--navy-700); border-color:var(--amber-500); font-weight:800; } .grant-cta__btn:hover{ filter:brightness(1.05); } .grant-cta__add{ background:transparent; color:var(--navy-700); border:1px solid var(--line); margin-top:var(--s-2); } .grant-cta__add:hover{ background:var(--bg-soft, #F6F5F1); } /* ---------- Top nav ---------- */ .nav{ position:sticky; top:0; z-index:90; height:var(--nav-h); background:rgba(255,255,255,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav__inner{ height:100%; display:flex; align-items:center; gap:var(--s-4); max-width:1320px; margin-inline:auto; padding-inline:var(--s-5); } .brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none; } .brand:hover{ color:inherit; text-decoration:none; } .brand__mark{ width:74px; height:74px; flex:none; } .brand__mark img{ width:100%; height:100%; object-fit:contain; } .brand__sub em{ font-style:italic; font-weight:400; } .brand__name{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem; color:var(--navy-700); line-height:1; } .brand__sub{ display:block; font-family:var(--font-body); font-weight:600; text-transform:none; letter-spacing:.01em; font-size:.72rem; color:var(--ink-300); margin-top:2px; } @media (max-width:520px){ .brand__sub{ display:none; } } .nav__links{ display:flex; align-items:center; gap:.1rem; margin-left:var(--s-4); } .nav__link{ font-weight:600; font-size:.95rem; color:var(--ink-600); text-decoration:none; padding:.5rem .7rem; border-radius:var(--r-chip); white-space:nowrap; } .nav__link:hover{ color:var(--green-700); background:var(--green-50); text-decoration:none; } .nav__link[aria-current="page"]{ background:var(--green-100); color:var(--green-700); } .nav__tools{ display:flex; align-items:center; gap:.5rem; margin-left:auto; } /* search */ .nav__search{ position:relative; } .nav__search input{ width:200px; max-width:38vw; border:1.5px solid var(--line); border-radius:var(--r-chip); background:var(--bg-soft); padding:.55rem .9rem .55rem 2.4rem; min-height:42px; color:var(--ink-900); transition:border-color var(--t-base) var(--ease); } .nav__search input:focus{ outline:0; background:#fff; border-color:var(--green-700); box-shadow:0 0 0 3px rgba(0,108,75,.16); } .nav__search svg{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-300); pointer-events:none; } @media (max-width:1140px){ .nav__search{ display:none; } } /* icon button (bell etc.) */ .icon-btn{ position:relative; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-600); display:grid; place-items:center; } .icon-btn:hover{ border-color:var(--green-700); color:var(--green-700); } .icon-btn svg{ width:21px; height:21px; } .icon-btn__badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-chip); background:#FFB547; color:#3A2A00; font-size:.72rem; font-weight:700; display:grid; place-items:center; } .icon-btn__badge[hidden]{ display:none; } /* dropdown panels (notifications, user menu) */ .pop{ position:relative; } .pop__panel{ position:absolute; right:0; top:calc(100% + 10px); width:360px; max-width:92vw; max-height:72vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); z-index:120; } .pop__panel[hidden]{ display:none; } .pop__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:5; box-shadow:0 1px 0 var(--line); } .notif{ background:#fff; } /* Bell section labels: to-do items vs heads-up (UAT session 2, Sep 2026). */ .notif-sec{ margin:0; padding:.45rem var(--s-5) .3rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-600); background:var(--bg-soft); border-bottom:1px solid var(--line); } /* Bell tabs: Needs your attention / Heads-up, 5 unread each (UAT, Sep 2026). Each tab has its own accent - green for to-dos, teal for heads-up - and tints the list behind its rows, so a glance says which pile you're in. */ .notif-tabs{ display:flex; gap:.4rem; position:sticky; top:0; background:#fff; padding:.55rem .6rem; border-bottom:1px solid var(--line); z-index:4; } .notif-tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; background:transparent; border:1px solid transparent; border-radius:999px; padding:.42rem .5rem; font-size:.78rem; font-weight:700; color:var(--ink-600); cursor:pointer; line-height:1.1; white-space:nowrap; } .notif-tab:hover{ background:var(--bg-soft); } .notif-tab--act.is-on{ background:var(--green-100); border-color:var(--green-700); color:var(--green-700); } .notif-tab--fyi.is-on{ background:var(--teal-100); border-color:var(--teal-700); color:var(--teal-700); } .notif-tab__n{ display:inline-block; min-width:1.45em; padding:.08rem .32rem; border-radius:999px; background:var(--ink-600); color:#fff; font-size:.7rem; font-weight:800; text-align:center; } .notif-tab--act.is-on .notif-tab__n{ background:var(--green-700); } .notif-tab--fyi.is-on .notif-tab__n{ background:var(--teal-700); } /* Tinted body per tab; rows float as white cards on it - airier than a solid divided list (UAT UX feedback, Sep 2026). */ .notif-body{ padding:.55rem .6rem .6rem; display:grid; gap:.45rem; } .notif-body--act{ background:#F5FAF7; } .notif-body--fyi{ background:#F2F8F8; } .notif-body .notif{ border:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:12px; padding:.6rem .7rem; background:#fff; box-shadow:0 1px 2px rgba(17,37,65,.05); } .notif-body .notif:hover{ background:#fff; border-color:var(--green-700); box-shadow:0 2px 8px rgba(17,37,65,.1); } .notif-body--fyi .notif:hover{ border-color:var(--teal-700); } .notif-body .notif .notif__icon{ width:32px; height:32px; border-radius:9px; } .notif-body .notif .notif__icon svg{ width:17px; height:17px; } .notif-body .notif .notif__text{ font-size:.88rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .notif-body .notif .notif__time{ font-size:.72rem; } .notif-empty{ text-align:center; padding:var(--s-5) var(--s-4); color:var(--ink-600); } .notif-empty svg{ width:26px; height:26px; color:var(--green-700); } .notif-empty p{ margin:.35rem 0 .1rem; font-weight:700; font-size:.9rem; color:var(--ink-900); } .notif-empty .caption{ display:block; } .notif-more{ display:block; padding:var(--s-3) var(--s-5); font-size:.85rem; font-weight:700; text-align:center; border-top:1px solid var(--line); background:#fff; } .pop__head h3{ margin:0; font-size:1.05rem; } .pop__head button{ background:transparent; border:0; color:var(--green-700); font-weight:700; font-size:.85rem; } .pop__head button:hover{ text-decoration:underline; } .pop__foot{ padding:var(--s-3) var(--s-5); border-top:1px solid var(--line); text-align:center; } .pop__foot a{ font-weight:700; font-size:.9rem; } /* notification item */ .notif{ display:flex; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); text-decoration:none; color:inherit; position:relative; } .notif:last-child{ border-bottom:0; } .notif:hover{ background:var(--bg-soft); text-decoration:none; color:inherit; } .notif__icon{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; } .notif__icon svg{ width:20px; height:20px; } .notif__icon--reply{ background:var(--green-100); color:var(--green-700); } .notif__icon--mention{ background:var(--teal-100); color:var(--teal-700); } .notif__icon--event{ background:var(--amber-100); color:var(--amber-700); } .notif__icon--resource{ background:var(--navy-100); color:var(--navy-700); } .notif__icon--policy{ background:var(--urgent-100); color:var(--urgent); } .notif__icon--connect{ background:var(--green-100); color:var(--green-700); } .notif__body{ min-width:0; } .notif__text{ margin:0; font-size:.95rem; color:var(--ink-900); line-height:1.4; } .notif__text b{ font-weight:700; } .notif__time{ font-size:.82rem; color:var(--ink-300); font-weight:600; margin-top:2px; display:block; } .notif__dot{ width:9px; height:9px; border-radius:50%; background:var(--green-700); flex:none; align-self:center; } .notif.is-read{ opacity:.62; } .notif.is-read .notif__dot{ visibility:hidden; } /* user menu */ .usermenu-btn{ display:flex; align-items:center; gap:.5rem; flex:none; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-chip); padding:.25rem .6rem .25rem .25rem; min-height:44px; max-width:230px; } .usermenu-btn:hover{ border-color:var(--green-700); } .usermenu-btn .avatar{ width:34px; height:34px; font-size:.8rem; } /* max-width so a long member name ellipsizes instead of pushing the whole nav row (and with it the page) past the right edge of the viewport. */ .usermenu-btn__meta{ text-align:left; line-height:1.15; min-width:0; max-width:150px; overflow:hidden; } .usermenu-btn__meta strong{ display:block; font-size:.85rem; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .usermenu-btn__meta span{ display:block; font-size:.72rem; color:var(--ink-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .usermenu-btn > svg{ width:18px; height:18px; flex:none; color:var(--ink-300); } @media (max-width:980px){ .usermenu-btn__meta{ display:none; } } .menu-list{ padding:var(--s-2); } .menu-list a, .menu-list button{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:transparent; border:0; border-radius:10px; padding:.65rem .7rem; color:var(--ink-900); font-weight:600; font-size:.95rem; text-decoration:none; } .menu-list a:hover, .menu-list button:hover{ background:var(--bg-soft); color:var(--green-700); text-decoration:none; } .menu-list svg{ width:18px; height:18px; color:var(--ink-300); flex:none; } .menu-list a:hover svg, .menu-list button:hover svg{ color:var(--green-700); } .menu-sep{ border:0; border-top:1px solid var(--line); margin:var(--s-2) 0; } /* hamburger */ .nav__hamburger{ display:none; background:#fff; border:1px solid var(--line); border-radius:12px; width:44px; height:44px; align-items:center; justify-content:center; } .nav__hamburger svg{ width:24px; height:24px; } /* 1560px down to 1340: the signed-in bar is ~1450px wide - more than its 1320px shell - so on common 1366-1536 laptop widths it bled past the right edge, clipping the user chip and adding a sideways scrollbar (cross-browser QA, Sep 2026). Shrink links, search, and the user meta through this band so the bar always fits its shell. */ @media (max-width:1560px){ .nav__link{ padding:.5rem .55rem; font-size:.9rem; } .nav__search input{ width:160px; } .usermenu-btn__meta{ max-width:120px; } .nav__inner{ gap:var(--s-3); } } @media (max-width:1340px){ .nav__link{ padding:.5rem .5rem; font-size:.9rem; } .nav__search input{ width:160px; } } /* ~1300px down to the hamburger collapse the full row is 20-ish px too wide, which bled past the viewport and made every page scroll sideways — shrink the search box through that band so the bar always fits. */ @media (max-width:1320px){ .nav__search input{ width:110px; } .nav__inner{ gap:var(--s-3); } } @media (max-width:1080px){ .nav__links{ display:none; } .nav__hamburger{ display:inline-flex; } } /* Phone widths: the brand block is flex:none, so without shrinking it the bar ran ~84px past a 375px screen and every page scrolled sideways. */ @media (max-width:600px){ .nav__inner{ gap:var(--s-2); padding-inline:var(--s-3); } .brand__mark{ width:46px; height:46px; } .brand__name{ font-size:.92rem; } .nav__tools{ gap:.35rem; } .usermenu-btn__meta{ display:none; } .usermenu-btn > svg{ display:none; } .usermenu-btn{ padding:4px; } } /* The very smallest phones: the program mark alone identifies the Hub, and the dashboard compose row wraps instead of forcing the column wider. */ @media (max-width:380px){ .brand__name{ display:none; } .compose{ flex-wrap:wrap; } .compose__input{ min-width:0; } } /* mobile overlay nav */ .mobile-nav{ position:fixed; inset:0; z-index:200; background:#fff; padding:var(--s-5); display:flex; flex-direction:column; overflow:auto; } .mobile-nav[hidden]{ display:none; } .mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s-5); } .mobile-nav__close{ background:#fff; border:1px solid var(--line); border-radius:12px; width:46px; height:46px; font-size:1.6rem; } .mobile-nav a.m-link{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:1.5rem; font-weight:700; color:var(--navy-700); text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--line); } .mobile-nav a.m-link:hover{ color:var(--green-700); } .mobile-nav .m-tools{ margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); } /* ---------- Quick-action ribbon (member entry points) ---------- */ .quickbar{ background:var(--green-50); border-bottom:1px solid var(--line); } .quickbar__inner{ max-width:1320px; margin-inline:auto; padding:var(--s-3) var(--s-5); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); } .quickbar__btn{ display:flex; align-items:center; gap:.6rem; min-height:54px; padding:.6rem 1rem; background:#fff; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--navy-700); font-weight:700; font-size:.98rem; line-height:1.2; transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .quickbar__btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--green-700); color:var(--navy-700); text-decoration:none; } .quickbar__btn svg{ width:26px; height:26px; flex:none; border-radius:9px; padding:4px; } /* UAT session 3 (Sep 2026): the pale icon chips read as decoration, not as action buttons — solid brand fills give each create action real weight. */ .qi-green{ background:var(--green-700); color:#fff; } /* Informational quick link (Grant Alerts). UAT session 7: the amber wash read as "you are ON the Grant Alerts page" — the button is now neutral white like its three siblings (the amber icon disc keeps its identity); urgency stays with the horizontal deadline banner. */ .quickbar__btn--info{ background:#fff; } .quickbar__btn--info:hover{ border-color:var(--amber-500); } .quickbar__sub{ display:block; font-weight:600; font-size:.78rem; color:var(--ink-600); margin-top:1px; } .qi-info{ background:var(--amber-500); color:var(--navy-900); border-radius:9px; display:inline-flex; } .qi-amber{ background:var(--amber-500); color:var(--navy-900); } .qi-teal{ background:var(--teal-700); color:#fff; } .qi-navy{ background:var(--navy-700); color:#fff; } .qi-red{ background:var(--red-700); color:#fff; } @media (prefers-reduced-motion: reduce){ .quickbar__btn:hover{ transform:none; } } @media (max-width:820px){ .quickbar__inner{ grid-template-columns:1fr 1fr; } } @media (max-width:460px){ .quickbar__inner{ grid-template-columns:1fr; } } /* UAT session 6: inner pages keep every quick action, one step quieter — a labeled strip of pills instead of four full-size buttons, so the page's own content leads while the actions stay one glance away. */ .quickbar--compact .quickbar__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.45rem var(--s-5); } .quickbar--compact .quickbar__inner::before{ content:"Quick actions"; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-300); margin-right:.35rem; } .quickbar--compact .quickbar__btn{ min-height:34px; padding:.28rem .8rem .28rem .4rem; gap:.45rem; font-size:.86rem; border-radius:999px; } .quickbar--compact .quickbar__btn:hover{ transform:none; box-shadow:var(--shadow-1); } .quickbar--compact .quickbar__btn svg{ width:22px; height:22px; padding:3px; border-radius:50%; } .quickbar--compact .quickbar__btn--info{ border-left-width:1px; border-left-color:#EED9B2; } .quickbar--compact .quickbar__sub{ display:none; } /* Full-width page head (UAT session 6 follow-up): title + lede on the left, the space-distinction note as a card on the right, instead of one tall half-width stack. */ .pagehead__cols{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:var(--s-6) var(--s-8); align-items:start; } @media (max-width:920px){ .pagehead__cols{ grid-template-columns:1fr; } } .space-note{ background:#EEF6F4; border:1px solid var(--line); border-left:4px solid var(--teal-700); border-radius:var(--r-2); padding:var(--s-4) var(--s-5); } .space-note__head{ display:flex; align-items:center; gap:.45rem; font-weight:800; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-700); margin-bottom:.5rem; } .space-note__head svg{ width:16px; height:16px; flex:none; } .space-note p{ font-size:.95rem; line-height:1.5; color:var(--ink-600); max-width:none; margin:0 0 .45rem; } .space-note p:last-child{ margin-bottom:0; } /* "New here?" page tip (UAT session 6) — links a busy page to its own Help Center how-to. Soft amber wash so it is actually noticed (UAT-6 follow-up); it disappears for that browser once opened or dismissed. */ .page-tip{ margin:var(--s-3) 0 0; display:flex; flex-wrap:wrap; gap:.5rem; } .page-tip__item{ display:inline-flex; align-items:center; gap:.15rem; background:var(--amber-100, #FBF3E2); border:1px solid #EED9B2; border-radius:999px; padding:.16rem .3rem .16rem .75rem; } .page-tip__link{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:var(--navy-700); font-weight:700; font-size:.82rem; } .page-tip__link:hover{ text-decoration:underline; text-underline-offset:2px; } .page-tip__link svg{ width:14px; height:14px; color:var(--amber-600, #c07f18); } .page-tip__x{ background:none; border:0; cursor:pointer; color:var(--ink-300); font-size:1.05rem; line-height:1; padding:.1rem .4rem; border-radius:50%; } .page-tip__x:hover{ color:var(--navy-700); } /* "Will you be there?" attendance CTA on event dialogs (UAT-7 restyle): a warm panel with one clear action, flipping to a confirmed state. */ .attend-cta{ display:flex; gap:var(--s-4); align-items:center; margin-top:var(--s-4); background:linear-gradient(120deg, var(--green-50, #F1F8F5), #EAF4F2); border:1px solid #D8E8E0; border-radius:14px; padding:var(--s-4) var(--s-5); } .attend-cta__ic{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--green-700); color:#fff; display:grid; place-items:center; } .attend-cta__ic svg{ width:22px; height:22px; } .attend-cta__txt{ flex:1; min-width:0; } .attend-cta__txt strong{ display:block; color:var(--navy-700); font-size:1.02rem; } .attend-cta__count{ display:block; margin-top:.1rem; font-size:.85rem; color:var(--ink-600); } .attend-cta--in{ background:linear-gradient(120deg, #E3F2ED, var(--green-50, #F1F8F5)); border-color:var(--green-500); } .attend-cta--in .attend-cta__txt strong{ color:var(--green-700); } /* ---------- Chips & badges ---------- */ .chip{ display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.85rem; padding:.32em .8em; border-radius:var(--r-chip); background:var(--bg-soft); color:var(--ink-600); } .chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; flex:none; } .chip--green{ background:var(--green-100); color:var(--green-700); } .chip--amber{ background:var(--amber-100); color:var(--amber-700); } .chip--teal{ background:var(--teal-100); color:var(--teal-700); } .chip--navy{ background:var(--navy-100); color:var(--navy-700); } .chip--red{ background:var(--red-100); color:var(--red-700); } .chip--plain::before{ display:none; } .chip svg{ width:1em; height:1em; } /* filter chip (button) */ .fchip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; min-height:42px; border:1.5px solid var(--line); border-radius:var(--r-chip); background:#fff; font-weight:600; color:var(--ink-600); cursor:pointer; } .fchip:hover{ border-color:var(--green-700); color:var(--green-700); } .fchip[aria-pressed="true"], .fchip.is-active{ background:var(--green-100); border-color:var(--green-700); color:var(--green-700); } .badge{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .65rem; border-radius:var(--r-chip); background:var(--navy-100); color:var(--navy-700); } .badge--green{ background:var(--green-100); color:var(--green-700); } .badge--amber{ background:var(--amber-100); color:var(--amber-700); } .badge--teal{ background:var(--teal-100); color:var(--teal-700); } .badge--red{ background:var(--red-100); color:var(--red-700); } /* status pill (label + dot) */ .status{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.8rem; padding:.3rem .75rem; border-radius:var(--r-chip); background:var(--bg-soft); color:var(--ink-900); white-space:nowrap; } .status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-300); flex:none; } .status--enacted{ background:var(--green-100); color:var(--green-700); } .status--enacted::before{ background:var(--green-700); } .status--committee{ background:var(--amber-100); color:var(--amber-700); } .status--committee::before{ background:var(--amber-500); } .status--pending{ background:var(--bg-soft); color:var(--ink-600); } .status--pending::before{ background:var(--ink-300); } .status--urgent{ background:var(--red-100); color:var(--red-700); } .status--urgent::before{ background:var(--red-700); } /* ---------- Cards ---------- */ .card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-6); box-shadow:var(--shadow-1); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .card--lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:rgba(0,108,75,.4); } @media (prefers-reduced-motion: reduce){ .card--lift:hover{ transform:none; } } .card--pad-sm{ padding:var(--s-5); } a.card{ text-decoration:none; color:inherit; display:block; } a.card:hover{ color:inherit; text-decoration:none; } .card h3{ margin-bottom:var(--s-2); } .card p:last-child{ margin-bottom:0; } .card__icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--green-100); color:var(--green-700); margin-bottom:var(--s-4); } .card__icon svg{ width:26px; height:26px; } .card__icon--amber{ background:var(--amber-100); color:var(--amber-700); } .card__icon--teal{ background:var(--teal-100); color:var(--teal-700); } .card__icon--navy{ background:var(--navy-100); color:var(--navy-700); } .card__link{ margin-top:var(--s-4); font-weight:700; color:var(--green-700); display:inline-flex; align-items:center; gap:.3rem; } .card__link svg{ width:1.1em; height:1.1em; } /* topbar accent cards (color personality) */ .card--top{ border-top:5px solid var(--green-700); } .card--top-amber{ border-top-color:var(--amber-500); } .card--top-teal{ border-top-color:var(--teal-500); } .card--top-navy{ border-top-color:var(--navy-700); } .card--top-red{ border-top-color:var(--red-700); } /* light-wash cards (dashboard quick-access, third row) */ .card--wash-green{ background:linear-gradient(160deg, var(--green-100) 0%, #fff 62%); } .card--wash-amber{ background:linear-gradient(160deg, var(--amber-100) 0%, #fff 62%); } .card--wash-teal{ background:linear-gradient(160deg, var(--teal-100) 0%, #fff 62%); } .card--wash-green .card__icon, .card--wash-amber .card__icon, .card--wash-teal .card__icon{ background:#fff; } /* ---------- Avatars ---------- */ .avatar{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1rem; background:var(--green-100); color:var(--green-700); } .avatar--sm{ width:34px; height:34px; font-size:.8rem; } .avatar--lg{ width:72px; height:72px; font-size:1.5rem; } .avatar--xl{ width:104px; height:104px; font-size:2.1rem; } .avatar--amber{ background:var(--amber-100); color:var(--amber-700); } .avatar--teal{ background:var(--teal-100); color:var(--teal-700); } .avatar--navy{ background:var(--navy-100); color:var(--navy-700); } .avatar--red{ background:var(--red-100); color:var(--red-700); } /* ---------- Stat ---------- */ .stat__num{ font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(2.6rem,5vw,3.8rem); color:var(--green-700); line-height:1; } .stat__label{ color:var(--ink-600); font-weight:600; margin-top:var(--s-2); } .statbar{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); } .statbar .stat{ text-align:center; padding:var(--s-4); position:relative; } .statbar .stat+.stat::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line); } @media (max-width:680px){ .statbar{ grid-template-columns:1fr; } .statbar .stat+.stat::before{ display:none; } .statbar .stat+.stat{ border-top:1px solid var(--line); } } /* ---------- Callout ---------- */ .callout{ border-radius:14px; padding:var(--s-5); border-left:4px solid; display:flex; gap:var(--s-3); } .callout svg{ width:24px; height:24px; flex:none; margin-top:2px; } .callout p:last-child{ margin-bottom:0; } .callout--info{ background:var(--info-100); border-color:var(--info); color:#22405e; } .callout--info svg{ color:var(--info); } .callout--ok{ background:var(--green-100); border-color:var(--green-700); color:var(--green-900); } .callout--ok svg{ color:var(--green-700); } .callout--warn{ background:var(--amber-100); border-color:var(--amber-500); color:var(--amber-700); } .callout--warn svg{ color:var(--amber-700); } /* ---------- Forms ---------- */ .field{ margin-bottom:var(--s-5); } .field>label, .field__label{ display:block; font-weight:700; color:var(--ink-900); margin-bottom:var(--s-2); } .field .hint{ color:var(--ink-600); font-size:.95rem; margin:0 0 var(--s-2); } .input,.select,.textarea{ width:100%; border:1.5px solid var(--line); border-radius:var(--r-input); padding:.8rem 1rem; min-height:50px; background:#fff; color:var(--ink-900); } .input::placeholder,.textarea::placeholder{ color:var(--ink-300); } .input:focus,.select:focus,.textarea:focus{ outline:0; border-color:var(--green-700); box-shadow:0 0 0 3px rgba(0,108,75,.16); } .textarea{ min-height:130px; resize:vertical; line-height:1.5; } .input-icon{ position:relative; } .input-icon svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-300); pointer-events:none; } .input-icon .input{ padding-left:2.7rem; } fieldset{ border:0; margin:0; padding:0; } legend{ font-weight:700; color:var(--ink-900); font-size:1.15rem; padding:0; } .checkrow{ display:flex; align-items:flex-start; gap:.6rem; padding:.35rem 0; font-weight:600; color:var(--ink-600); cursor:pointer; } .checkrow input{ width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:var(--green-700); flex:none; } .fileupload{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); border:2px dashed var(--sage-300); border-radius:14px; padding:var(--s-8); text-align:center; background:var(--bg-soft); color:var(--ink-600); cursor:pointer; } .fileupload:hover{ border-color:var(--green-700); background:var(--green-50); } .fileupload svg{ width:34px; height:34px; color:var(--green-700); margin:0 auto var(--s-2); } /* ---------- Tabs (radiogroup) ---------- */ .segmented{ display:inline-flex; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-chip); padding:4px; gap:4px; flex-wrap:wrap; } .segmented [role="radio"]{ border:0; background:transparent; border-radius:var(--r-chip); padding:.6rem 1.1rem; min-height:44px; font-weight:700; color:var(--ink-600); } .segmented [role="radio"][aria-checked="true"]{ background:#fff; color:var(--green-700); box-shadow:var(--shadow-1); } .segmented--full{ display:flex; width:100%; flex-wrap:wrap; gap:4px; } /* Admin: vertical section nav beside the content (more room for both) */ .admin-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:var(--s-6); align-items:start; margin-top:var(--s-5); } .segmented--vert{ display:flex; flex-direction:column; align-items:stretch; width:100%; border-radius:0; position:sticky; top:calc(var(--nav-h) + 14px); } .segmented--vert [role="radio"]{ text-align:left; white-space:normal; padding:.65rem .9rem; min-height:42px; font-size:.95rem; border-radius:10px; } /* Group headings inside the admin rail: a rule + small caps label. */ .segmented--vert .segmented__label{ font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500,#68727e); padding:.85rem .9rem .3rem; margin-top:.4rem; border-top:1px solid var(--line); } .segmented--vert .segmented__label:first-child{ border-top:0; margin-top:0; padding-top:.45rem; } @media (max-width:900px){ .admin-layout{ grid-template-columns:1fr; } .segmented--vert{ position:static; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; } .segmented--vert [role="radio"]{ white-space:nowrap; flex:none; } /* The narrow layout turns the rail into a horizontal scroll strip — group headings become vertical dividers there. */ .segmented--vert .segmented__label{ border-top:0; border-left:1px solid var(--line); margin:.3rem 0 .3rem .35rem; padding:.45rem .6rem .45rem .8rem; align-self:center; white-space:nowrap; } .segmented--vert .segmented__label:first-child{ border-left:0; margin-left:0; padding-left:.6rem; } } /* Many tabs (e.g. the admin dashboard): wrap as compact pills so they all stay visible and never overflow the container, rather than stretching to fill. */ .segmented--full [role="radio"]{ flex:0 1 auto; text-align:center; white-space:nowrap; padding:.5rem .9rem; min-height:40px; font-size:.95rem; } .tabpanel[hidden]{ display:none; } /* ---------- Accordion ---------- */ .accordion{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; } .accordion+.accordion{ margin-top:var(--s-3); } .accordion__btn{ width:100%; text-align:left; background:#fff; border:0; padding:var(--s-5); font-weight:700; font-size:1.15rem; color:var(--ink-900); display:flex; justify-content:space-between; gap:var(--s-3); align-items:center; } .accordion__btn:hover{ background:var(--bg-soft); } .accordion__btn .acc-ico{ width:22px; height:22px; flex:none; transition:transform var(--t-base) var(--ease); color:var(--green-700); } .accordion__btn[aria-expanded="true"] .acc-ico{ transform:rotate(180deg); } .accordion__panel{ padding:0 var(--s-5) var(--s-5); } .accordion__panel[hidden]{ display:none; } /* ---------- Modal ---------- */ .modal{ position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; padding:var(--s-5); } .modal[hidden]{ display:none; } .modal__scrim{ position:absolute; inset:0; background:rgba(17,37,65,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .modal__panel{ position:relative; background:#fff; border-radius:18px; max-width:560px; width:100%; padding:var(--s-8); box-shadow:var(--shadow-2); max-height:90vh; overflow:auto; } .modal__panel--lg{ max-width:760px; } .modal__close{ position:absolute; right:1rem; top:1rem; background:var(--bg-soft); border:0; border-radius:50%; width:44px; height:44px; font-size:1.4rem; color:var(--ink-600); } .modal__close:hover{ background:var(--line); } .modal h2{ margin-bottom:var(--s-3); } /* ---------- Toast ---------- */ /* pointer-events:none — toasts are pure status (no buttons); without it a toast parked over a control (e.g. the CoCo Assist switches) silently swallows clicks for 4.5s and the control feels randomly dead. */ /* Top-center under the nav (UAT, Sep 2026: bottom toasts went unnoticed). */ .toast-wrap{ position:fixed; left:50%; top:calc(var(--nav-h, 64px) + 12px); transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:var(--s-2); width:min(480px,92vw); pointer-events:none; } .toast{ display:flex; align-items:flex-start; gap:.7rem; background:var(--navy-700); color:#fff; border-radius:14px; padding:var(--s-4) var(--s-5); box-shadow:var(--shadow-2); animation:toastin var(--t-base) var(--ease); } .toast svg{ width:22px; height:22px; flex:none; color:var(--amber-500); margin-top:1px; } .toast strong{ color:#fff; display:block; } .toast p{ margin:0; color:#D7DEE8; font-size:.92rem; } @keyframes toastin{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .toast{ animation:none; } } /* ---------- Compose box (community) ---------- */ .compose{ display:flex; align-items:center; gap:var(--s-3); background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-4); box-shadow:var(--shadow-1); } .compose__input{ flex:1; text-align:left; background:var(--bg-soft); border:1.5px solid var(--line); border-radius:var(--r-chip); padding:.85rem 1.2rem; min-height:50px; color:var(--ink-300); font-weight:600; } .compose__input:hover{ border-color:var(--green-700); color:var(--ink-600); } /* ---------- Activity feed ---------- */ .feed{ display:flex; flex-direction:column; gap:var(--s-4); } .feed-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-5); box-shadow:var(--shadow-1); } .feed-item__head{ display:flex; gap:var(--s-3); align-items:flex-start; } .feed-item__who{ font-weight:700; color:var(--ink-900); } .feed-item__meta{ font-size:.88rem; color:var(--ink-300); font-weight:600; } .feed-item__verb{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; padding:.2rem .6rem; border-radius:var(--r-chip); margin-left:auto; } .feed-item__verb svg{ width:1em; height:1em; } .fv-resource{ background:var(--navy-100); color:var(--navy-700); } .fv-thread{ background:var(--green-100); color:var(--green-700); } .fv-event{ background:var(--amber-100); color:var(--amber-700); } .fv-policy{ background:var(--red-100); color:var(--red-700); } .fv-mentor{ background:var(--teal-100); color:var(--teal-700); } .feed-item__title{ font-weight:700; color:var(--ink-900); font-size:1.1rem; margin:var(--s-3) 0 var(--s-2); } .feed-item__title a{ color:inherit; } .feed-item__body{ margin:0 0 var(--s-3); color:var(--ink-600); } .feed-item__foot{ display:flex; align-items:center; gap:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line); } .react{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:0; color:var(--ink-600); font-weight:600; font-size:.92rem; padding:.3rem .2rem; border-radius:10px; } .react:hover{ color:var(--green-700); } .react.is-on{ color:var(--green-700); } .react svg{ width:1.15em; height:1.15em; } /* ---------- Section header ---------- */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6); flex-wrap:wrap; } .sec-head h2{ margin:0; } .sec-head a{ font-weight:700; white-space:nowrap; } /* ---------- Page header ---------- */ .pagehead{ padding-block:var(--s-8) var(--s-6); } .pagehead .breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.88rem; color:var(--ink-300); margin-bottom:var(--s-3); } .pagehead .breadcrumb a{ color:var(--ink-300); font-weight:600; } .pagehead .breadcrumb a:hover{ color:var(--green-700); } .pagehead h1{ margin-bottom:var(--s-3); } .pagehead p{ font-size:1.15rem; color:var(--ink-600); max-width:70ch; margin:0; } /* ---------- Footer ---------- */ .footer{ background:var(--navy-700); color:#C7D0DC; padding-block:var(--s-10) var(--s-6); } .footer a{ color:#E2E8F0; } .footer a:hover{ color:var(--amber-500); } .footer__grid{ display:grid; gap:var(--s-8); } @media (min-width:820px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } } .footer__brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s-3); } .footer__brand .brand__mark{ width:74px; height:74px; } .footer__brand strong{ color:#fff; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem; line-height:1.15; } .footer__brandsub{ display:block; font-family:var(--font-body); font-weight:600; text-transform:none; letter-spacing:.01em; font-size:.85rem; color:#C7D0DC; } .footer__brandsub em{ font-style:italic; font-weight:400; } /* Required funding acknowledgement — verbatim on every page (CFSC, 7/22/2026). */ .footer__ack{ font-size:.8rem; color:#9DB3C2; line-height:1.55; margin-top:var(--s-3); max-width:56ch; } /* Funder logo strip (landing + About) — artwork as provided, white/light backgrounds only. */ .funder-strip{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(2rem,6vw,5rem); margin-top:var(--s-6); } .funder-strip img{ height:170px; width:auto; } @media (max-width:900px){ .funder-strip img{ height:120px; } } .funder-strip--card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s-6) var(--s-5); box-shadow:var(--shadow-1); } @media (max-width:560px){ .funder-strip img{ height:92px; } } .footer h4{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--s-3); } .footer ul{ list-style:none; padding:0; margin:0; } .footer li{ margin-bottom:var(--s-2); } .footer__bottom{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.15); display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between; font-size:.9rem; } .footer__badges{ display:flex; gap:.5rem; flex-wrap:wrap; } .footer__badges .badge{ background:rgba(255,255,255,.1); color:#E2E8F0; } /* ---------- Hero ---------- */ .hero{ padding-block:var(--s-12) var(--s-10); position:relative; overflow:hidden; } .hero__art{ width:100%; height:auto; } @media (max-width:919px){ .hero__art{ max-width:460px; margin-inline:auto; } } /* ---------- misc ---------- */ .divider{ border:0; border-top:1px solid var(--line); margin-block:var(--s-8); } .tag-row{ display:flex; flex-wrap:wrap; gap:.5rem; } .meta-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; color:var(--ink-300); font-size:.9rem; font-weight:600; } .meta-row svg{ width:1.05em; height:1.05em; vertical-align:-.15em; } .layout-aside{ display:grid; gap:var(--s-8); } @media (min-width:980px){ .layout-aside{ grid-template-columns:1fr 340px; } } .pagination{ display:flex; gap:.4rem; justify-content:center; margin-top:var(--s-8); } .pagination a,.pagination button{ min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; border-radius:11px; color:var(--ink-600); font-weight:700; text-decoration:none; padding:0 .8rem; } .pagination .is-current{ background:var(--green-700); color:#fff; border-color:var(--green-700); } .pagination a:hover, .pagination button:hover:not(:disabled):not(.is-current){ border-color:var(--green-700); color:var(--green-700); cursor:pointer; } .pagination button:disabled{ opacity:.45; cursor:default; } .pagination__gap{ min-width:24px; display:grid; place-items:center; color:var(--ink-300); font-weight:700; } /* print */ @media print{ .demo-ribbon,.nav,.quickbar,.footer,.modal,.toast-wrap,.no-print{ display:none !important; } body{ font-size:12pt; color:#000; } .card{ box-shadow:none; border:1px solid #999; break-inside:avoid; } } /* ============================================================ Guided tour — in-app onboarding / announcements (tour.js) A dimming spotlight over one target at a time + a single card. Sequential and blocking, so steps never all appear at once. ============================================================ */ .tour-open{ overflow:hidden; } .tour{ position:fixed; inset:0; z-index:9999; pointer-events:none; } /* Transparent click-catcher: the page underneath stays inert during a step. */ .tour__block{ position:fixed; inset:0; pointer-events:auto; background:transparent; } /* Centered steps (welcome / finish) dim the whole screen. */ .tour--center .tour__block{ background:rgba(12,27,48,.55); } /* Spotlight: a hole punched in a full-screen scrim via a huge box-shadow. */ .tour__spot{ position:fixed; border-radius:14px; box-shadow:0 0 0 9999px rgba(12,27,48,.55); transition:top var(--t-base) var(--ease), left var(--t-base) var(--ease), width var(--t-base) var(--ease), height var(--t-base) var(--ease); pointer-events:none; } .tour__card{ position:fixed; width:min(340px, calc(100vw - 32px)); background:var(--bg); color:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-2); padding:var(--s-5); pointer-events:auto; opacity:0; transform:translateY(6px); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .tour__card.is-in{ opacity:1; transform:none; } .tour__step{ font:700 .7rem/1 var(--font-body); letter-spacing:.07em; text-transform:uppercase; color:var(--green-700); margin:0 0 var(--s-2); } .tour__title{ font:800 1.15rem/1.2 var(--font-display); margin:0 0 var(--s-2); color:var(--navy-700); } .tour__body{ font:400 .95rem/1.5 var(--font-body); color:var(--ink-600); margin:0 0 var(--s-4); } .tour__dots{ display:flex; gap:6px; margin:0 0 var(--s-4); } .tour__dot{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background var(--t-fast) var(--ease); } .tour__dot.is-on{ background:var(--green-700); } .tour__actions{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); } .tour__skip{ background:none; border:none; color:var(--ink-300); font:600 .85rem/1 var(--font-body); cursor:pointer; padding:6px 2px; } .tour__skip:hover{ color:var(--ink-600); text-decoration:underline; } .tour__nav{ display:flex; gap:var(--s-2); } @media (prefers-reduced-motion: reduce){ .tour__spot, .tour__card{ transition:none; } } /* ---------- Feedback survey (non-blocking slide-in) ---------- */ .msg-survey{ position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:9998; width:min(340px, calc(100vw - 32px)); background:var(--bg); color:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-2); padding:var(--s-5); opacity:0; transform:translateY(12px); transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .msg-survey.is-in{ opacity:1; transform:none; } .msg-survey__close{ position:absolute; top:8px; right:10px; background:none; border:none; font-size:1.35rem; line-height:1; color:var(--ink-300); cursor:pointer; } .msg-survey__close:hover{ color:var(--ink-600); } .msg-survey__eyebrow{ font:700 .7rem/1 var(--font-body); letter-spacing:.07em; text-transform:uppercase; color:var(--teal-700); margin:0 0 var(--s-2); } .msg-survey__q{ font:700 1rem/1.35 var(--font-body); color:var(--navy-700); margin:0 0 var(--s-4); } .msg-survey__thanks{ font:600 .95rem/1.4 var(--font-body); color:var(--green-700); margin:var(--s-2) 0 0; } .msg-scale{ display:flex; gap:6px; flex-wrap:wrap; } .msg-scale__btn{ flex:1 1 auto; min-width:38px; padding:8px 0; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink-900); font:700 .95rem/1 var(--font-body); cursor:pointer; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .msg-scale__btn:hover{ background:var(--green-50); border-color:var(--green-500); color:var(--green-900); } .msg-choices{ display:flex; flex-direction:column; gap:var(--s-2); align-items:stretch; } .msg-choices .msg-choice{ text-align:left; } @media (prefers-reduced-motion: reduce){ .msg-survey{ transition:none; } } /* Loading skeletons (progressive section loading) */ .skel-card, .skel-row{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-1); padding:var(--s-5); margin-bottom:var(--s-4); } .skel-row{ padding:var(--s-4); } .skel-line{ height:12px; border-radius:6px; margin:10px 0; background:linear-gradient(90deg, var(--bg-soft) 25%, rgba(17,37,65,.06) 37%, var(--bg-soft) 63%); background-size:400% 100%; animation:skelshimmer 1.3s ease infinite; } .skel-line--title{ height:17px; width:60%; margin-top:0; } .skel-line--short{ width:38%; } @keyframes skelshimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } } @media (prefers-reduced-motion: reduce){ .skel-line{ animation:none; } } /* ---------- Topographic divider (OPTIONAL accent, pending CFSC review) ---------- Terrain-contour motif in brand green above the footer on every page, per the Design Direction's optional accent. TO REMOVE: delete this block and the .topo-band divs (one per page, directly before each