/* ANEW — Project Compliance & Funding Package (demo) * * Styles for the overlay in anew-finance-report.js. Everything is scoped under * .afr- because this loads alongside a React bundle whose CSS we cannot see. * * This site has no source repo (see _headers), so the overlay mounts itself onto * , OUTSIDE #root, where React cannot re-render it away. Bump the ?v= in * index.html on every edit — these files are deliberately not cache-frozen. */ /* The end-of-journey bar. Hidden until the last lesson unlocks — see atJourneyEnd() — then docked across the foot of the screen so it reads as the close of the audit rather than a widget floating over the whole app. */ .afr-launch { display: none; } .afr-launch.afr-show { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px)); border: 0; cursor: pointer; text-align: center; font: 600 0.92rem/1.25 Inter, system-ui, -apple-system, sans-serif; letter-spacing: 0.01em; color: #0d1a12; background: linear-gradient(96deg, #f5c723, #4ba84b); box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.45); animation: afrRise 0.5s cubic-bezier(0.16, 0.9, 0.24, 1) both; } @keyframes afrRise { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .afr-launch.afr-show { animation: none; } } .afr-launch:hover { filter: brightness(1.06); } .afr-launch .afr-lead { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; } .afr-launch .afr-cta { font-weight: 800; } .afr-launch .afr-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(13, 26, 18, 0.22); } @media (max-width: 560px) { .afr-launch.afr-show { flex-direction: column; gap: 4px; font-size: 0.86rem; } } .afr-overlay { position: fixed; inset: 0; z-index: 2147483001; display: none; overflow-y: auto; background: rgba(4, 10, 7, 0.82); backdrop-filter: blur(6px); font: 400 15px/1.5 Inter, system-ui, -apple-system, sans-serif; } .afr-overlay.afr-open { display: block; } .afr-sheet { max-width: 940px; margin: 34px auto; padding: 0 18px 60px; color: #16241c; } .afr-paper { background: #fff; border-radius: 14px; padding: clamp(22px, 4vw, 46px); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); } .afr-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-bottom: 14px; } .afr-btn { padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 0.82rem/1 inherit; } .afr-btn:hover { background: rgba(255, 255, 255, 0.2); } .afr-btn-primary { background: #f5c723; border-color: #f5c723; color: #14210f; } .afr-btn-primary:hover { background: #ffd644; } /* Sample-data banner. Must stay loud, and must survive printing. */ .afr-sample { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 11px 15px; margin: 0 0 22px; border-radius: 10px; background: #fff4d6; border: 1px solid #e2c163; font-size: 0.82rem; line-height: 1.5; color: #5a4408; } .afr-sample b { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; } .afr-head { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; } .afr-head h1 { margin: 0 0 4px; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.18; } .afr-head p { margin: 0; font-size: 0.85rem; color: #56685e; } .afr-meta { font-size: 0.78rem; color: #56685e; text-align: right; line-height: 1.7; } .afr-meta b { color: #16241c; } .afr-sec { margin-top: 28px; } .afr-sec > h2 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #6c7d73; padding-bottom: 7px; border-bottom: 2px solid #e7ece9; } .afr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 26px; } .afr-f { padding: 8px 0; border-bottom: 1px solid #eef2f0; } .afr-f span { display: block; font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: #7d8e84; } .afr-f b { display: block; margin-top: 2px; font-size: 0.92rem; font-weight: 600; } .afr-f.afr-wide { grid-column: 1 / -1; } .afr-tbl { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .afr-tbl th, .afr-tbl td { padding: 9px 10px 9px 0; text-align: left; vertical-align: top; } .afr-tbl thead th { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: #7d8e84; border-bottom: 1px solid #d9e0dc; } .afr-tbl tbody tr { border-bottom: 1px solid #eef2f0; } .afr-tbl .afr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .afr-tbl tfoot td { padding-top: 12px; font-weight: 700; border-top: 2px solid #d9e0dc; } .afr-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .afr-ok { background: #e3f3e8; color: #1f5c34; } .afr-wait { background: #fdf0d8; color: #7a5a11; } .afr-tba { background: #eef1f0; color: #5d6f65; font-style: normal; } .afr-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 8px; } .afr-sign div { padding-top: 34px; border-top: 1px solid #16241c; font-size: 0.78rem; color: #56685e; } .afr-legal { margin-top: 26px; padding-top: 14px; border-top: 1px solid #e7ece9; font-size: 0.72rem; line-height: 1.62; color: #6c7d73; } .afr-legal p { margin: 0 0 7px; } @media print { .afr-launch, .afr-bar { display: none !important; } .afr-overlay { position: static !important; inset: auto !important; display: block !important; overflow: visible !important; background: #fff !important; backdrop-filter: none !important; } .afr-sheet { margin: 0 !important; padding: 0 !important; max-width: none !important; } .afr-paper { box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .afr-sec, .afr-sign div, .afr-sample { break-inside: avoid; } @page { margin: 15mm; } }