/* ============================================================ Catalyst Calendar — tools/pipeline/ Design source: Claude Design "Catalyst Calendar v2" (project 617e3793; BuyandBill design system 24bdeddf). Navy #004973 primary · sky #7EC8E3 accent · Sora display / Poppins UI. Event-kind colors live on .cc-k-* modifiers. ============================================================ */ .cc-page { font-family:'Poppins',sans-serif; color:#2d3e4f; background:#f7f9fc; } /* Scoped to the tool's OWN regions, not to .cc-page — .cc-page is on , so `.cc-page a` (0,1,1) also claimed every anchor in the shared header and footer and outranked their own rules: it repainted the account dropdown navy over .bb-hdr-acct-item's #0F2B3D, the nav links over their white, the footer links over their sky, and the red Logout item. 51 anchors captured to colour 3. Keep the same specificity so nothing inside the tool moves. */ .cc-hero a, .cc-main a, .cc-drawer a, .cc-guide a { color:#004973; } .cc-hero a:hover, .cc-main a:hover, .cc-drawer a:hover, .cc-guide a:hover { color:#005f95; } @keyframes ccFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes ccFadeIn { from { opacity:0; } to { opacity:1; } } /* ---- Navy command header ---------------------------------------------- */ /* The hero pins beneath the sticky site header with a measured negative top (--cc-hdr = header stuck height, --cc-heroext = title-row height; both set in JS), so the toolbar + legend stay visible while the title slides away. The 9999px fallback keeps it from ever pinning before JS measures. */ /* Scroll anchoring off: pinning the hero collapses the legend (~34px height change at the viewport top), and Chrome's anchoring compensated scrollY for it — which re-crossed the pin threshold and oscillated the stuck state. */ body.cc-page { overflow-anchor:none; } .cc-hero { background:linear-gradient(165deg,#004973 0%,#003052 68%,#00506e 100%); padding:26px 0 24px; position:sticky; top:calc(var(--cc-hdr, 0px) - var(--cc-heroext, 9999px)); z-index:60; } /* Pinned state is condensed: tighter bottom padding and slimmer controls so the bar steals as little vertical space as possible. */ .cc-hero.is-stuck { box-shadow:0 12px 32px rgba(0,20,50,0.35); padding-bottom:9px; } .cc-hero.is-stuck .cc-search__input { padding:7px 0; } .cc-hero.is-stuck .cc-tab { padding:5px 16px; } .cc-hero.is-stuck .cc-nav__btn { width:30px; height:30px; } .cc-wrap { max-width:1640px; margin:0 auto; padding:0 40px; } .cc-hero__row { display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .cc-hero__titleline { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .cc-hero__title { font:700 22px 'Sora',sans-serif; letter-spacing:-0.02em; color:rgba(255,255,255,0.95); margin:0; } .cc-hero__fresh { display:flex; align-items:center; gap:6px; font:600 10px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#7EC8E3; } .cc-hero__freshdot { width:7px; height:7px; border-radius:99px; background:#4ade80; } .cc-hero__fresh.is-delayed { color:#f5c163; } .cc-hero__fresh.is-delayed .cc-hero__freshdot { background:#f5a623; } .cc-hero__stats { display:flex; gap:28px; margin-left:auto; flex-wrap:wrap; align-items:center; } .cc-stat { display:flex; align-items:baseline; gap:7px; } .cc-stat__n { font:700 16px 'Sora'; color:#fff; } .cc-stat__label { font:500 11px 'Poppins'; color:rgba(255,255,255,0.7); transition:color .15s ease; } .cc-stat--link { background:none; border:0; padding:0; cursor:pointer; position:relative; } .cc-stat--link:hover .cc-stat__label { color:rgba(255,255,255,0.85); } .cc-stat--link.is-solo::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:99px; background:#7EC8E3; } .cc-stat--next { display:flex; align-items:center; gap:8px; background:rgba(126,200,227,0.12); border:1px solid rgba(126,200,227,0.4); border-radius:99px; padding:5px 14px; cursor:pointer; transition:background .15s ease; } .cc-stat--next:hover { background:rgba(126,200,227,0.22); } .cc-stat__nextlabel { font:600 9.5px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#7EC8E3; } .cc-stat__nextval { font:600 12px 'Poppins'; color:#fff; white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis; } /* Toolbar (on dark) */ .cc-toolbar { display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; } .cc-tabs { display:flex; background:rgba(255,255,255,0.12); border-radius:12px; padding:3px; } .cc-tab { background:transparent; border:0; color:rgba(255,255,255,0.75); font:600 13px 'Poppins'; padding:8px 20px; border-radius:9px; cursor:pointer; transition:all .18s ease; user-select:none; } .cc-tab.is-on { background:#fff; color:#004973; box-shadow:0 2px 8px rgba(0,20,50,0.25); } .cc-search { flex:1; max-width:560px; min-width:220px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:12px; padding:0 16px; transition:border-color .18s ease; } .cc-search:focus-within { border-color:rgba(126,200,227,0.6); } .cc-search svg { flex:none; } .cc-search__input { flex:1; background:transparent; border:0; outline:0; font:400 13.5px 'Poppins'; color:#fff; padding:11px 0; min-width:0; } .cc-search__input::placeholder { color:rgba(255,255,255,0.6); } .cc-nav { margin-left:auto; display:flex; align-items:center; gap:6px; } .cc-nav__btn { width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,0.22); background:transparent; display:flex; align-items:center; justify-content:center; color:#fff; font:400 17px 'Poppins'; cursor:pointer; user-select:none; transition:background .18s ease, transform .12s ease; } .cc-nav__btn:hover { background:rgba(255,255,255,0.12); } .cc-nav__btn:active { transform:scale(0.92); } .cc-nav__range { font:600 15px 'Sora'; color:#fff; padding:0 8px; white-space:nowrap; } /* Search spans twelve months, not the focused one — the stepper is inert while one is open, and says so rather than sitting live over a label ("August 2026") that no longer describes what is on screen. */ .cc-nav__btn:disabled { opacity:0.35; cursor:default; } .cc-nav__btn:disabled:hover { background:transparent; } .cc-nav__range.is-search { font-size:13px; color:rgba(255,255,255,0.8); } /* Email-alerts button + popover (assets/alerts.js; prefs via alerts-prefs.php) */ .cc-nav { position:relative; } .cc-nav__alerts { display:flex; align-items:center; gap:7px; font:600 13px 'Poppins'; color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.32); padding:8px 15px; border-radius:10px; cursor:pointer; transition:background .18s ease; } .cc-nav__alerts:hover { background:rgba(255,255,255,0.12); } .cc-nav__alerts[aria-expanded="true"] { background:rgba(255,255,255,0.16); } .cc-hero.is-stuck .cc-nav__alerts { padding:5px 12px; } .cc-alertspop { position:absolute; top:calc(100% + 10px); right:0; z-index:400; width:340px; background:#fff; border-radius:14px; box-shadow:0 16px 44px rgba(0,20,50,0.28); padding:18px 20px 16px; text-align:left; } .cc-alertspop__title { font:700 15px 'Sora'; color:#0f2a3d; } .cc-alertspop__sub { font:500 12px 'Poppins'; color:#5a6b7a; margin:2px 0 12px; overflow-wrap:anywhere; } .cc-alertspop__row { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid #eef2f6; cursor:pointer; } .cc-alertspop__row input { margin-top:3px; accent-color:#004973; flex:none; } .cc-alertspop__row strong { display:block; font:600 13px 'Poppins'; color:#153643; } .cc-alertspop__row small { display:block; font:400 12px 'Poppins'; color:#7b8b9a; line-height:1.45; margin-top:1px; } .cc-alertspop__foot { display:flex; align-items:center; gap:12px; margin-top:12px; } .cc-alertspop__save { font:600 13px 'Poppins'; color:#fff; background:#004973; border:0; padding:9px 20px; border-radius:9px; cursor:pointer; transition:opacity .15s ease; } .cc-alertspop__save:hover { opacity:0.92; } .cc-alertspop__save:disabled { opacity:0.6; cursor:default; } .cc-alertspop__status { font:500 12px 'Poppins'; color:#1a7f4e; } .cc-alertspop__status.is-err { color:#b3403a; } /* "How it works" button — same box as the alerts button so the toolbar row height (which the sticky-hero measurement depends on) is unchanged. */ .cc-nav__help { display:flex; align-items:center; gap:7px; font:600 13px 'Poppins'; color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.32); padding:8px 15px; border-radius:10px; cursor:pointer; transition:background .18s ease; } .cc-nav__help:hover { background:rgba(255,255,255,0.12); } .cc-hero.is-stuck .cc-nav__help { padding:5px 12px; } /* Legend row (on dark) — SMALL SCREENS ONLY. Every chip here is a duplicate: the sidebar's Event type group renders the same kinds, the same dots, the same counts and the same state.hidden toggle (renderLegend and the typeRows half of renderSidebar are two views of one state). Wherever the sidebar sits BESIDE the calendar the row is pure repetition, so it is hidden — Matt, 2026-08-27. It survives below 1100px because the sidebar stacks BELOW the month grid there (see the .cc-side order:2 rule and its comment), which would otherwise leave a phone with no event-type filter and no colour key until it had scrolled past the whole month. */ .cc-legend { display:none; } .cc-legend__chip { display:flex; align-items:center; gap:8px; padding:6px 13px; border-radius:99px; border:0; cursor:pointer; user-select:none; background:rgba(255,255,255,0.14); transition:all .18s ease; } .cc-legend__chip:hover { background:rgba(255,255,255,0.2); } .cc-legend__chip.is-off { opacity:0.4; background:transparent; } .cc-legend__dot { width:8px; height:8px; border-radius:99px; } .cc-legend__label { font:500 12.5px 'Poppins'; color:rgba(255,255,255,0.92); } .cc-legend__count { font:600 11px 'Poppins'; color:rgba(255,255,255,0.5); } /* Watching chip: amber-accented, and unlike the kind chips its "off" state is still fully lit — an off kind chip means hidden, an off watch chip just means the filter isn't applied. */ .cc-legend__chip--watch { background:rgba(245,166,35,0.16); } .cc-legend__chip--watch:hover { background:rgba(245,166,35,0.26); } .cc-legend__chip--watch.is-filtering { background:#f5a623; } .cc-legend__chip--watch.is-filtering .cc-legend__label { color:#1c2733; } .cc-legend__chip--watch.is-filtering .cc-legend__count { color:rgba(28,39,51,0.6); } .cc-legend__star { font-size:11px; color:#f5c163; line-height:1; } .cc-legend__chip--watch.is-filtering .cc-legend__star { color:#1c2733; } /* Compact "Data through …" shown only while the hero is pinned — the full-size one in the title row has scrolled away by then. */ .cc-legend__fresh { display:none; align-items:center; gap:6px; font:600 10px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#7EC8E3; white-space:nowrap; margin-left:auto; } .cc-legend__fresh.is-delayed { color:#f5c163; } .cc-legend__fresh.is-delayed .cc-hero__freshdot { background:#f5a623; } .cc-hero.is-stuck .cc-legend__fresh { display:flex; } /* ---- Body layout -------------------------------------------------------- */ .cc-main { max-width:1640px; margin:26px auto 0; padding:0 40px 56px; position:relative; z-index:5; } .cc-cols { display:flex; gap:20px; align-items:flex-start; } .cc-content { flex:1; min-width:0; } .cc-card { background:#fff; border:1px solid #c9d5e2; border-radius:16px; box-shadow:0 12px 36px rgba(0,20,50,0.16); } /* ---- Filter sidebar ----------------------------------------------------- */ /* The panel pins beneath the sticky site header AND the pinned hero bar (--cc-barh = the hero's visible stuck height, measured in JS); the max-height keeps a panel taller than the viewport scrollable in place. */ .cc-side { width:274px; flex:none; background:#fff; border:1px solid #c9d5e2; border-radius:16px; box-shadow:0 12px 36px rgba(0,20,50,0.16); padding:20px 20px 22px; position:sticky; top:calc(var(--cc-hdr, 0px) + var(--cc-barh, 0px) + 20px); max-height:calc(100vh - var(--cc-hdr, 0px) - var(--cc-barh, 0px) - 40px); overflow-y:auto; } .cc-side__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; } .cc-side__title { font:700 15px 'Sora'; letter-spacing:-0.01em; color:#111e2b; } .cc-side__clear { font:600 11.5px 'Poppins'; color:#004973; cursor:pointer; background:none; border:0; padding:0; } .cc-side__clear:hover { color:#005f95; } .cc-side__group { margin-bottom:18px; } .cc-side__grouptitle { font:600 10px 'Poppins'; letter-spacing:0.13em; text-transform:uppercase; color:#a5b4c4; margin-bottom:9px; } .cc-side__items { display:flex; flex-direction:column; gap:7px; } .cc-facet { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; border-radius:8px; margin:0 -6px; padding:3px 6px; transition:background .15s ease; background:none; border:0; text-align:left; width:calc(100% + 12px); } .cc-facet:hover { background:#f5f8fb; } .cc-facet__box { width:16px; height:16px; border-radius:5px; background:#fff; border:1.5px solid #c6d2de; display:flex; align-items:center; justify-content:center; flex:none; transition:all .15s ease; } .cc-facet.is-on .cc-facet__box { background:#004973; border-color:#004973; } .cc-facet__box svg { display:none; } .cc-facet.is-on .cc-facet__box svg { display:block; } .cc-facet__dot { width:8px; height:8px; border-radius:99px; flex:none; } .cc-facet__label { font:500 12.5px 'Poppins'; color:#2d3e4f; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cc-facet__count { font:600 10.5px 'Poppins'; color:#a5b4c4; } .cc-facet--watch .cc-facet__star { font-size:11px; color:#f5a623; flex:none; } /* Same treatment the legend chip gave an unreadable lane, on the row that replaced it above 1100px: dimmed, and titled with why the count is '—'. */ .cc-facet.is-unavailable { opacity:0.55; } /* Sub-facet pills nested under their parent event-type row (one row per dimension — e.g. approvals get application-type and priority rows). */ /* Sub-facet pill rows nested under their parent event-type row (one row per dimension). Lit = shown — these are inclusion checklists, so the pill state always tells the truth. */ .cc-subfacets { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 8px 25px; } .cc-pill { display:inline-flex; align-items:center; gap:5px; border:1px solid #c6d2de; background:transparent; border-radius:99px; font:600 11px 'Poppins'; color:#5a6b7d; padding:4px 11px; cursor:pointer; user-select:none; transition:all .15s ease; } .cc-pill:hover { border-color:#004973; color:#004973; } .cc-pill.is-on { background:#004973; border-color:#004973; color:#fff; box-shadow:0 2px 6px rgba(0,73,115,0.25); } .cc-pill__count { font:600 10px 'Poppins'; color:#a5b4c4; } .cc-pill.is-on .cc-pill__count { color:#7EC8E3; } /* Sponsor group extras: inline search + show-all expander */ .cc-sponsorsearch { box-sizing:border-box; width:100%; border:1px solid #c9d5e2; border-radius:8px; background:#fff; font:400 11.5px 'Poppins'; color:#2d3e4f; padding:6px 10px; margin-bottom:8px; outline:none; transition:border-color .15s ease; } .cc-sponsorsearch:focus { border-color:#7EC8E3; } .cc-sponsorsearch::placeholder { color:#a5b4c4; } .cc-side__more { background:none; border:0; cursor:pointer; font:600 11px 'Poppins'; color:#004973; padding:5px 0 0; text-align:left; } /* ---- Search results view ------------------------------------------------ */ .cc-searchhead { display:flex; align-items:baseline; gap:14px; margin:0 0 14px; flex-wrap:wrap; } .cc-searchhead__n { font:700 16px 'Sora'; letter-spacing:-0.01em; color:#111e2b; } /* Pushes everything after it to the right, so the buttons stay right-aligned whether or not the "hidden by filters" one is present. */ .cc-searchhead__range { font:500 11.5px 'Poppins'; color:#7a8a9b; margin-right:auto; } .cc-searchhead__clear { background:#fff; border:1px solid #c9d5e2; border-radius:8px; padding:5px 12px; font:600 11.5px 'Poppins'; color:#004973; cursor:pointer; transition:border-color .15s ease; } .cc-searchhead__clear:hover { border-color:#004973; } /* Results the active filters are holding back — amber so it reads as "there is more here", not as an error. */ .cc-searchhead__showall { background:#fdf4e3; border:1px solid #e6c98d; border-radius:8px; padding:5px 12px; font:600 11.5px 'Poppins'; color:#8a5a12; cursor:pointer; transition:background .15s ease; } .cc-searchhead__showall:hover { background:#f8e9cd; } .cc-agrow__date { flex:none; width:80px; font:600 11px 'Poppins'; color:#5a6b7d; } .cc-search-divider { font:600 10px 'Poppins'; letter-spacing:0.13em; text-transform:uppercase; color:#a5b4c4; padding:18px 24px 4px; border-top:1px solid #e3eaf2; margin-top:6px; } /* Drawer program-list search (month-est readouts) */ .cc-drawersearch { box-sizing:border-box; width:100%; border:1px solid #c9d5e2; border-radius:8px; background:#fff; font:400 12px 'Poppins'; color:#2d3e4f; padding:8px 12px; margin:0 0 10px; outline:none; transition:border-color .15s ease; } .cc-drawersearch:focus { border-color:#7EC8E3; } .cc-drawersearch::placeholder { color:#a5b4c4; } .cc-side__more:hover { color:#005f95; text-decoration:underline; } .cc-side__empty { font:400 11px 'Poppins'; color:#a5b4c4; padding:2px 0 4px; } .cc-facet--watch .cc-facet__x { font:600 10px 'Poppins'; color:#c6d2de; flex:none; opacity:0; transition:opacity .15s ease; } .cc-facet--watch:hover .cc-facet__x { opacity:1; color:#b91c1c; } .cc-side__note { border-top:1px solid #dce4ed; padding-top:13px; font:400 10.5px/1.6 'Poppins'; color:#a5b4c4; } /* ---- Event-kind palette ------------------------------------------------- */ .cc-k-approval { --k:#004973; --k-tint:rgba(0,73,115,0.08); --k-txt:#00456d; --k-head:rgba(0,73,115,0.05); } .cc-k-pdufa { --k:#d9831f; --k-tint:rgba(217,131,31,0.12); --k-txt:#96590e; --k-head:rgba(217,131,31,0.07); } .cc-k-readout { --k:#38a3cf; --k-tint:rgba(126,200,227,0.20);--k-txt:#0c6a92; --k-head:rgba(126,200,227,0.12); } .cc-k-crl { --k:#ef4444; --k-tint:rgba(239,68,68,0.10); --k-txt:#b91c1c; --k-head:rgba(239,68,68,0.06); } .cc-k-adcomm { --k:#8b5cf6; --k-tint:rgba(139,92,246,0.11); --k-txt:#6d28d9; --k-head:rgba(139,92,246,0.06); } .cc-k-filing { --k:#0d9488; --k-tint:rgba(13,148,136,0.10); --k-txt:#0f766e; --k-head:rgba(13,148,136,0.06); } /* announce = FDA's own word that a product cleared. Green rather than navy: it sits beside the approvals lane, and most of what it carries (CBER cell and gene therapies, vaccines, blood products) is precisely what Drugs@FDA does NOT have, so it must not read as the same source. reported = the sponsor's word, before FDA's data catches up. Deliberately the filing lane's teal, one step lighter: same wire, same press-release provenance, and the chip is dashed because the claim is provisional. */ .cc-k-announce { --k:#15803d; --k-tint:rgba(21,128,61,0.10); --k-txt:#15803d; --k-head:rgba(21,128,61,0.06); } .cc-k-reported { --k:#14b8a6; --k-tint:rgba(20,184,166,0.10); --k-txt:#0f766e; --k-head:rgba(20,184,166,0.06); } .cc-k-routine { --k:#b8c7d6; --k-tint:#f0f4f8; --k-txt:#5a7080; --k-head:#f7fafc; } /* A lane whose data source this server cannot read: dimmed, and its count reads "—" rather than a zero it never actually measured. */ .cc-legend__chip.is-unavailable { opacity:0.5; } /* ---- Month-estimates band ----------------------------------------------- */ .cc-estband { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:12px; padding:11px 16px; background:rgba(126,200,227,0.12); border:1.5px dashed rgba(56,163,207,0.45); border-radius:12px; cursor:pointer; text-align:left; font:500 12.5px 'Poppins'; color:#0c6a92; transition:background .15s ease, border-color .15s ease; animation:ccFadeUp .25s ease; } .cc-estband:hover { background:rgba(126,200,227,0.2); border-color:rgba(56,163,207,0.7); } .cc-estband__dot { width:8px; height:8px; border-radius:99px; background:#38a3cf; flex:none; } .cc-estband__txt { flex:1; min-width:0; } .cc-estband__txt small { font:400 11.5px 'Poppins'; color:#5a8aa3; } .cc-estband__cta { font:600 12px 'Poppins'; color:#004973; white-space:nowrap; } /* ---- Month view --------------------------------------------------------- */ /* The entry animation belongs to a NEW range or view. A filter toggle also replaces this subtree, and replaying the fade there reads as the whole calendar flashing; render() sets .cc-nofade when the range and view are unchanged. The loading shimmer and load bar keep their animations. */ .cc-nofade .cc-monthwrap, .cc-nofade .cc-agenda, .cc-nofade .cc-horizon, .cc-nofade .cc-lock, .cc-nofade .cc-estband { animation:none; } .cc-monthwrap { overflow:hidden; animation:ccFadeUp .25s ease; } .cc-monthscroll { overflow-x:auto; } .cc-month { min-width:840px; } /* minmax(0,1fr): a grid item's min-width defaults to auto, so one long nowrap chip label would force its column wider than 1fr and push the Saturday column off the card — the "days combining" blowout. */ .cc-dows { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:#004973; border-radius:16px 16px 0 0; } .cc-dow { font:600 10.5px 'Poppins'; letter-spacing:0.12em; color:rgba(255,255,255,0.85); text-transform:uppercase; padding:12px 14px 11px; } .cc-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:#c9d5e2; } .cc-day { position:relative; background:#fff; min-height:128px; min-width:0; padding:10px 10px 11px; transition:background .18s ease; } .cc-day:hover { background:#fafcff; } .cc-day.is-weekend { background:#f9fbfd; } .cc-day.is-dim { background:#f5f8fb; } .cc-day__num { width:26px; height:26px; border-radius:99px; display:flex; align-items:center; justify-content:center; font:600 12.5px 'Poppins'; color:#5a7080; background:transparent; margin:0 0 5px; border:0; cursor:pointer; } .cc-day.is-dim .cc-day__num { color:#c6d2de; cursor:default; } .cc-day__num:hover { background:#eef2f7; } .cc-day.is-today .cc-day__num { color:#fff; background:#004973; } .cc-day__events { display:flex; flex-direction:column; gap:3px; } .cc-chip { display:flex; align-items:center; gap:6px; background:var(--k-tint); border:1px solid transparent; font:500 11px 'Poppins'; color:var(--k-txt); padding:3px 7px; border-radius:6px; white-space:nowrap; overflow:hidden; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; text-align:left; width:100%; } .cc-chip:hover { transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,20,50,0.1); } /* Tiered weight: the rare confirmed events (PDUFA / CRL / AdComm) fill solid so the eye finds them first; approvals/filings keep the tint; estimates go quiet. Estimates stay dashed — a projection must never read as scheduled. */ .cc-chip.cc-k-pdufa, .cc-chip.cc-k-crl, .cc-chip.cc-k-adcomm { background:var(--k); color:#fff; font-weight:600; } .cc-chip.cc-k-pdufa .cc-chip__dot, .cc-chip.cc-k-crl .cc-chip__dot, .cc-chip.cc-k-adcomm .cc-chip__dot { background:rgba(255,255,255,0.85); } .cc-chip.cc-k-readout { background:transparent; color:#56718a; border-style:dashed; border-color:rgba(56,163,207,0.5); } /* A sponsor-reported approval is a claim FDA's own data has not published yet, so it takes the same dashed "not confirmed" treatment as an estimate — the one visual rule on this calendar that means exactly that. */ .cc-chip.cc-k-reported { background:transparent; color:#0f766e; border-style:dashed; border-color:rgba(20,184,166,0.6); } .cc-hzcard.cc-k-reported { border-left-style:dashed; } /* A cancelled/postponed AdComm must never read as scheduled (contract §6) — in any view, so the horizon card gets the same treatment as the chip. A dead meeting also drops out of the solid tier: emphasis would misread. */ .cc-chip--dead { opacity:0.72; } .cc-chip--dead.cc-k-adcomm { background:var(--k-tint); color:var(--k-txt); font-weight:500; } .cc-chip--dead.cc-k-adcomm .cc-chip__dot { background:var(--k); } .cc-chip--dead .cc-chip__txt { text-decoration:line-through; text-decoration-thickness:1px; } .cc-hzcard--dead { opacity:0.75; border-left-style:dashed; } .cc-hzcard--dead .cc-hzcard__name { text-decoration:line-through; text-decoration-thickness:1px; } .cc-chip__dot { width:6px; height:6px; border-radius:99px; background:var(--k); flex:none; } .cc-chip__txt { overflow:hidden; text-overflow:ellipsis; } /* Watched markers: amber star, readable on tint and solid chips alike. */ .cc-chip__star { font-size:10px; line-height:1; color:#f5a623; flex:none; } .cc-chip.cc-k-pdufa .cc-chip__star, .cc-chip.cc-k-crl .cc-chip__star, .cc-chip.cc-k-adcomm .cc-chip__star { color:#ffd479; } .cc-agrow__star { font-size:11px; color:#f5a623; margin-right:5px; } .cc-day__more, .cc-day__routine { font:500 11px 'Poppins'; color:#8a9db5; padding:3px 8px; cursor:pointer; border-radius:6px; transition:all .15s ease; background:none; border:0; text-align:left; } .cc-day__more:hover, .cc-day__routine:hover { color:#004973; background:#f0f4f8; } /* ---- Agenda view -------------------------------------------------------- */ .cc-agenda { overflow:hidden; animation:ccFadeUp .25s ease; max-width:1100px; } .cc-agenda__day { border-bottom:1px solid #dce4ed; } .cc-agenda__day:last-child { border-bottom:0; } .cc-agenda__head { display:flex; align-items:baseline; gap:12px; padding:18px 28px 4px; } .cc-agenda__date { font:700 13px 'Sora'; letter-spacing:0.02em; color:#8a9db5; text-transform:uppercase; } .cc-agenda__day.is-today .cc-agenda__date { color:#004973; } .cc-agenda__meta { font:400 11.5px 'Poppins'; color:#b0bfce; } .cc-agenda__list { padding:8px 16px 14px; } .cc-agrow { display:flex; align-items:center; gap:16px; padding:12px 12px; border-radius:12px; cursor:pointer; transition:background .15s ease; background:none; border:0; width:100%; text-align:left; } .cc-agrow:hover { background:#f7fafc; } .cc-agrow__bar { width:3px; height:34px; border-radius:99px; background:var(--k); flex:none; } .cc-agrow__main { flex:1; min-width:0; display:flex; flex-direction:column; } .cc-agrow__name { display:block; font:600 14px 'Poppins'; color:#111e2b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cc-agrow__name small { font:400 12.5px 'Poppins'; color:#8a9db5; } .cc-agrow__sub { display:block; font:400 12px 'Poppins'; color:#8a9db5; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cc-agrow__tag { background:var(--k-tint); color:var(--k-txt); font:600 10px 'Poppins'; letter-spacing:0.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; flex:none; white-space:nowrap; } .cc-agrow__chev { color:#c6d2de; font:400 16px 'Poppins'; } .cc-agrow--routine .cc-agrow__bar { background:#dce4ed; height:20px; } .cc-agrow--routine .cc-agrow__sub { font:500 12.5px 'Poppins'; } .cc-agrow__show { font:600 12px 'Poppins'; color:#004973; flex:none; } .cc-empty { padding:56px 32px; text-align:center; } .cc-empty__title { font:600 15px 'Sora'; color:#111e2b; margin-bottom:6px; } .cc-empty__sub { font:400 12.5px 'Poppins'; color:#8a9db5; } .cc-empty__btn { margin-top:16px; font:600 12.5px 'Poppins'; color:#004973; background:rgba(0,73,115,0.08); border:0; border-radius:9px; padding:9px 18px; cursor:pointer; } .cc-empty__btn:hover { background:rgba(0,73,115,0.14); } /* ---- Horizon view ------------------------------------------------------- */ .cc-horizon { animation:ccFadeUp .25s ease; padding:24px 28px 26px; overflow-x:auto; } .cc-hz { min-width:1050px; } .cc-hz__months, .cc-hz__lane, .cc-hz__density { display:grid; grid-template-columns:150px repeat(6,1fr); gap:10px; } .cc-hz__months { margin-bottom:12px; } .cc-hz__mon { font:600 12px 'Poppins'; letter-spacing:0.1em; text-transform:uppercase; color:#8a9db5; padding:6px 4px; border-bottom:2px solid #e4eaf1; } .cc-hz__mon.is-cur { color:#004973; border-bottom-color:#004973; } .cc-hz__mon small { font:500 10.5px 'Poppins'; color:#b0bfce; text-transform:none; letter-spacing:0; } .cc-hz__lane { margin-bottom:14px; } .cc-hz__lanehead { display:flex; align-items:flex-start; gap:9px; padding-top:8px; } .cc-hz__lanedot { width:9px; height:9px; border-radius:99px; background:var(--k); margin-top:5px; flex:none; } .cc-hz__lanename { font:600 13px 'Sora'; color:#111e2b; } .cc-hz__lanesub { font:400 11px 'Poppins'; color:#b0bfce; } .cc-hz__cell { display:flex; flex-direction:column; gap:6px; min-height:56px; } .cc-hzcard { background:#fff; border:1px solid #dce4ed; border-radius:10px; padding:9px 12px; box-shadow:0 1px 3px rgba(0,20,50,0.04); cursor:pointer; transition:all .15s ease; border-left:3px solid var(--k); text-align:left; width:100%; } .cc-hzcard:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,20,50,0.1); } .cc-hzcard__name { font:600 12.5px 'Poppins'; color:#111e2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cc-hzcard__sub { font:400 11px 'Poppins'; color:#8a9db5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cc-hz__more { font:500 11px 'Poppins'; color:#8a9db5; background:none; border:0; cursor:pointer; text-align:left; padding:2px 4px; border-radius:6px; } .cc-hz__more:hover { color:#004973; background:#f0f4f8; } .cc-hz__density { margin-top:4px; padding-top:16px; border-top:1px solid #dce4ed; } .cc-hz__dhead .cc-hz__lanename { font:600 13px 'Sora'; } .cc-hz__dcell { padding:2px 4px; } .cc-hz__dnum { font:700 15px 'Sora'; color:#004973; } .cc-hz__dbar { height:4px; background:#e4eaf1; border-radius:99px; margin-top:6px; overflow:hidden; } .cc-hz__dfill { height:4px; background:linear-gradient(90deg,#004973,#7EC8E3); border-radius:99px; } /* ---- Footnote ----------------------------------------------------------- */ .cc-footnote { font:400 11.5px/1.65 'Poppins'; color:#8a9db5; padding:16px 6px 0; max-width:920px; } /* ---- Detail drawer ------------------------------------------------------ */ .cc-scrim { position:fixed; inset:0; background:rgba(17,30,43,0); z-index:1029; pointer-events:none; transition:background .25s ease; } .cc-scrim.is-on { background:rgba(17,30,43,0.18); pointer-events:auto; } .cc-drawer { position:fixed; top:0; right:0; bottom:0; width:440px; max-width:96vw; background:#fff; z-index:1030; transform:translateX(460px); transition:transform .28s cubic-bezier(0.32,0.72,0.28,1); box-shadow:-16px 0 48px rgba(0,20,50,0.14); display:flex; flex-direction:column; } .cc-drawer.is-open { transform:translateX(0); } .cc-drawer__head { padding:24px 28px 20px; border-bottom:1px solid #dce4ed; background:var(--k-head,#f7fafc); } .cc-drawer__toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; } .cc-drawer__badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-right:auto; } .cc-drawer__back { font:600 12px 'Poppins'; color:#004973; cursor:pointer; margin-right:2px; background:none; border:0; padding:0; } .cc-drawer__back:hover { color:#005f95; } .cc-badge { font:600 10px 'Poppins'; letter-spacing:0.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; background:rgba(0,73,115,0.08); color:#004973; } .cc-badge--solid { background:var(--k,#004973); color:#fff; } .cc-badge--warn { background:#d9831f; color:#fff; } .cc-badge--warntint { background:rgba(217,131,31,0.12); color:#96590e; } .cc-drawer__watch { display:flex; align-items:center; gap:6px; font:600 11.5px 'Poppins'; color:#5a7080; background:#fff; border:1px solid #c9d5e2; border-radius:99px; padding:6px 13px; cursor:pointer; flex:none; transition:all .15s ease; } .cc-drawer__watch:hover { border-color:#f5a623; color:#96590e; } .cc-drawer__watch.is-on { background:rgba(245,166,35,0.14); border-color:rgba(245,166,35,0.55); color:#96590e; } .cc-drawer__watchstar { font-size:12px; line-height:1; color:#f5a623; } .cc-drawer__close { width:32px; height:32px; border-radius:99px; display:flex; align-items:center; justify-content:center; color:#5a7080; cursor:pointer; transition:background .15s ease; flex:none; background:none; border:0; font:400 14px 'Poppins'; } .cc-drawer__close:hover { background:rgba(0,20,50,0.06); } .cc-drawer__title { font:700 22px 'Sora'; letter-spacing:-0.02em; color:#111e2b; overflow-wrap:break-word; } .cc-drawer__sub { font:400 13px 'Poppins'; color:#5a7080; margin-top:3px; } /* Brand + route, hoisted out of the molecule card to sit under the title. White chips on the tinted head band, per the cards-only-white rule. The slot ships empty on every drawer open and fills when the profile fetch lands, so :empty is what keeps a profile-less drawer from growing a gap. */ .cc-drawer__ident { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .cc-drawer__ident:empty { display:none; } .cc-ident { display:inline-flex; align-items:baseline; gap:8px; background:#fff; border:1px solid #dce4ed; border-radius:9px; padding:6px 12px; animation:ccFadeIn .3s ease; } .cc-ident__k { font:600 9px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#a5b4c4; flex:none; } .cc-ident__v { font:600 13px 'Poppins'; color:#111e2b; } .cc-ident__note { font:400 10.5px 'Poppins'; color:#8a9db5; } .cc-drawer__body { flex:1; overflow-y:auto; padding:22px 28px 28px; } .cc-drawer__loading { font:400 12.5px 'Poppins'; color:#8a9db5; padding:8px 0 20px; animation:ccFadeIn .3s ease; } .cc-sectitle { font:600 10px 'Poppins'; letter-spacing:0.14em; text-transform:uppercase; color:#a5b4c4; margin:0 0 12px; } .cc-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:24px; } /* Indications and read-from-the-filing application types run to several lines; in one half-width column they leave the other half blank for the whole height of the paragraph. Over ~70 chars the field spans the row. */ .cc-fields > .cc-field--wide { grid-column:1 / -1; } .cc-field__k { font:600 9.5px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#a5b4c4; } .cc-field__v { font:500 13.5px 'Poppins'; color:#111e2b; margin-top:3px; overflow-wrap:break-word; } .cc-tl { display:flex; flex-direction:column; margin-bottom:24px; } .cc-tl__row { display:flex; gap:14px; } .cc-tl__rail { display:flex; flex-direction:column; align-items:center; width:14px; flex:none; } .cc-tl__dot { width:11px; height:11px; border-radius:99px; background:#1f8a5b; border:2.5px solid #1f8a5b; flex:none; } .cc-tl__row.is-pending .cc-tl__dot { background:#fff; border-color:#d9831f; } .cc-tl__line { width:2px; flex:1; background:#eef2f7; min-height:22px; } .cc-tl__body { padding-bottom:15px; min-width:0; } .cc-tl__label { font:600 13px 'Poppins'; color:#2d3e4f; } .cc-tl__row.is-pending .cc-tl__label { color:#b06210; } .cc-tl__date { font:400 11.5px 'Poppins'; color:#a5b4c4; margin-top:1px; } .cc-progcard { background:#f7fafc; border-radius:12px; padding:13px 15px; transition:background .15s ease; margin-bottom:8px; } .cc-progcard:hover { background:#f0f5f9; } .cc-progcard__name { font:600 13.5px 'Sora'; color:#111e2b; margin-bottom:8px; } .cc-progcard__row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .cc-pill { background:rgba(0,73,115,0.08); color:#004973; font:600 10.5px 'Poppins'; padding:3px 10px; border-radius:99px; } .cc-pill--est { border:1.5px dashed #7EC8E3; background:transparent; color:#0c6a92; font-weight:500; padding:2px 10px; } /* border:0 is load-bearing. `.cc-pill` is declared twice — the sidebar copy near the top of this file carries `border:1px solid #c6d2de`, and this drawer copy overrides its background, padding and font but not its border. With padding:0 that leftover border collapses tight around the text and every "plain" pill renders as a cramped outline. */ .cc-pill--plain { background:transparent; border:0; color:#8a9db5; font:400 11.5px 'Poppins'; padding:0; } .cc-table { border:1px solid #dce4ed; border-radius:12px; overflow:hidden; margin-bottom:24px; } .cc-table__head, .cc-table__row { display:grid; grid-template-columns:1fr 1.4fr 0.7fr 0.4fr; gap:8px; padding:9px 14px; } .cc-table__head { background:#f7fafc; } .cc-table__row { border-top:1px solid #eef2f7; padding:10px 14px; } .cc-table__h { font:600 9px 'Poppins'; letter-spacing:0.12em; color:#8a9db5; text-transform:uppercase; } .cc-table__brand { font:600 11.5px 'Poppins'; color:#111e2b; overflow-wrap:break-word; } .cc-table__cell { font:400 11px 'Poppins'; color:#5a7080; overflow-wrap:break-word; } .cc-table__te { font:600 11px 'Poppins'; color:#1f8a5b; } .cc-quote { background:#f7fafc; border-left:3px solid #7EC8E3; border-radius:0 10px 10px 0; padding:12px 15px; } .cc-quote--crl { border-left-color:#ef4444; } .cc-quote--adcomm { border-left-color:#8b5cf6; } .cc-quote--filing { border-left-color:#0d9488; } .cc-quote--announce { border-left-color:#15803d; } /* The PDUFA filing passage behind "show the source": long, unquoted, and scrolls rather than pushing the rest of the drawer out of reach. */ .cc-quote--ctx { max-height:230px; overflow-y:auto; margin-bottom:24px; border-left-color:#d9831f; } .cc-morebtn { display:inline-block; margin-bottom:10px; } /* ---- Molecule card (drug_profiles) -------------------------------------- */ .cc-mol { background:#f7fafc; border:1px solid #e4ebf2; border-radius:12px; padding:15px 17px 14px; margin-bottom:24px; } /* Prose written without an FDA label in front of it gets a visible amber edge — the reader has to be able to tell grounded from ungrounded at a glance, not by reading to the footnote. */ .cc-mol.is-ungrounded { border-left:3px solid #d9831f; } .cc-mol__head { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:9px; } .cc-mol__name { font:600 15px 'Sora'; letter-spacing:-0.01em; color:#111e2b; } .cc-mol__alt { font:400 11.5px 'Poppins'; color:#8a9db5; } .cc-mol__meta { display:flex; align-items:center; gap:8px 11px; flex-wrap:wrap; margin-bottom:11px; } .cc-mol__desc { font:400 11.5px/1.5 'Poppins'; color:#7b8b9a; } /* The one pill on the card, because approval_status is the one field the ETL derived from the lanes rather than the model writing it. Molecule-level: an approved drug with a pending supplement still reads "approved". */ .cc-mol__status { font:600 9.5px 'Poppins'; letter-spacing:0.07em; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:#eef2f7; color:#5a7080; white-space:nowrap; } .cc-mol__status.is-approved { background:rgba(31,138,91,0.11); color:#1a7a50; } .cc-mol__status.is-pending { background:rgba(217,131,31,0.12); color:#96590e; } .cc-mol__status.is-not_approved { background:rgba(239,68,68,0.10); color:#b91c1c; } .cc-mol__status.is-investigational { background:rgba(56,163,207,0.13); color:#0c6a92; } .cc-mol__what { font:400 12.5px/1.65 'Poppins'; color:#2d3e4f; margin:0 0 9px; } .cc-mol__pending { font:400 12px/1.6 'Poppins'; color:#8a9db5; margin:0; } .cc-mol__mech { font:400 12px/1.6 'Poppins'; color:#5a7080; margin-bottom:9px; } .cc-mol__mechk { display:block; font:600 9px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#a5b4c4; margin-bottom:2px; } .cc-mol__inds { display:flex; gap:6px; flex-wrap:wrap; } .cc-mol__ind { font:500 11px 'Poppins'; color:#00456d; background:rgba(0,73,115,0.07); border-radius:99px; padding:3px 10px; } .cc-mol__links { margin:11px 0 0; } .cc-mol__prov { font:400 10.5px/1.55 'Poppins'; color:#a5b4c4; border-top:1px solid #e4ebf2; margin-top:11px; padding-top:9px; } /* ---- CRL: why FDA could not approve ------------------------------------- */ .cc-why { background:rgba(239,68,68,0.05); border-left:3px solid #ef4444; border-radius:0 10px 10px 0; padding:13px 15px; margin-bottom:24px; } .cc-why__txt { font:400 12.5px/1.6 'Poppins'; color:#3d5163; margin:0; } .cc-why__cats { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } /* Discrete tags, not a text run: these are a fixed vocabulary the extraction chose from, and running them together reads as one long phrase. */ .cc-why__cat { font:500 10.5px 'Poppins'; color:#b91c1c; background:rgba(239,68,68,0.09); border-radius:99px; padding:3px 10px; white-space:nowrap; } .cc-why__prov { font:400 10.5px 'Poppins'; color:#a5b4c4; margin-top:9px; } /* ---- Approval drawer: corroborating announcements ----------------------- */ /* Partner-row callout: this date belongs to another drug's application. It leads the drawer because it changes how every field under it reads, and it is amber-tinted rather than red — a component row is correct data, not a warning. */ .cc-combo { background:rgba(217,131,31,0.07); border:1px solid rgba(217,131,31,0.25); border-radius:12px; padding:14px 16px; margin-bottom:22px; } .cc-combo__k { font:600 9.5px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#96590e; margin-bottom:5px; } .cc-combo__v { font:400 12.5px/1.65 'Poppins'; color:#3d5163; } .cc-combo__v strong { font-weight:600; color:#111e2b; } .cc-combo__go { display:inline-block; margin-top:11px; font:600 12px 'Poppins'; color:#004973; background:#fff; border:1px solid #c9d5e2; border-radius:99px; padding:7px 14px; cursor:pointer; transition:all .15s ease; } .cc-combo__go:hover { border-color:#7EC8E3; color:#005f95; } .cc-also { display:flex; flex-direction:column; gap:11px; margin-bottom:24px; } .cc-also__row { background:#f7fafc; border-radius:10px; padding:11px 14px; } .cc-also__k { font:600 9.5px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#a5b4c4; margin-bottom:3px; } .cc-also__v { font:400 12px/1.6 'Poppins'; color:#3d5163; overflow-wrap:break-word; } .cc-quote__text { font:italic 400 12.5px/1.55 'Poppins'; color:#3d5163; white-space:pre-line; overflow-wrap:break-word; } .cc-quote__row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:9px 0 24px; } .cc-quote__cite { font:500 11px 'Poppins'; color:#8a9db5; } .cc-quote__link { font:600 12px 'Poppins'; color:#004973; cursor:pointer; text-decoration:none; background:none; border:0; padding:0; white-space:nowrap; } .cc-quote__link:hover { color:#005f95; } .cc-doclinks { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; } .cc-doclink { font:600 11.5px 'Poppins'; color:#004973; background:rgba(0,73,115,0.06); border-radius:8px; padding:7px 13px; text-decoration:none; transition:background .15s ease; } .cc-doclink:hover { background:rgba(0,73,115,0.12); color:#004973; } .cc-dayrow { display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:10px; cursor:pointer; transition:background .15s ease; background:none; border:0; width:100%; text-align:left; } .cc-dayrow:hover { background:#f7fafc; } .cc-dayrow__dot { width:8px; height:8px; border-radius:99px; background:var(--k,#c6d2de); flex:none; } .cc-dayrow__main { flex:1; min-width:0; display:flex; flex-direction:column; } .cc-dayrow__name { display:block; font:600 12.5px 'Poppins'; color:#111e2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cc-dayrow__sponsor { display:block; font:400 11px 'Poppins'; color:#a5b4c4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Same pill treatment as the agenda tags — the old faded plain text was unreadable. Rows carry cc-k-* so the pill takes the kind's tint/text. */ .cc-dayrow__kind { background:var(--k-tint, #f0f4f8); color:var(--k-txt, #5a7080); font:600 10px 'Poppins'; letter-spacing:0.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; flex:none; white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis; } .cc-dayrow__kind.is-ta { background:rgba(217,131,31,0.12); color:#96590e; } .cc-dayrow__chev { color:#c6d2de; font:400 14px 'Poppins'; } .cc-drawer__note { font:400 11px/1.6 'Poppins'; color:#a5b4c4; border-top:1px solid #eef2f7; padding-top:14px; margin-top:4px; } /* ---- Loading / error ---------------------------------------------------- */ .cc-loadbar { position:relative; overflow:hidden; height:3px; background:rgba(0,73,115,0.10); border-radius:99px; animation:ccFadeIn .2s ease; margin-bottom:12px; } .cc-loadbar::after { content:''; position:absolute; top:0; bottom:0; left:0; width:38%; background:linear-gradient(90deg,#7EC8E3,#004973); border-radius:99px; animation:ccLoadbar 1.1s cubic-bezier(0.45,0,0.3,1) infinite; } @keyframes ccLoadbar { from { transform:translateX(-110%); } to { transform:translateX(380%); } } @keyframes ccShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } } .cc-skelchip { display:block; height:20px; border-radius:6px; background:linear-gradient(90deg,#eef2f7 25%,#f8fafd 45%,#eef2f7 65%); background-size:200% 100%; animation:ccShimmer 1.3s linear infinite; } .cc-skelpanel { padding:24px 28px; display:flex; flex-direction:column; gap:14px; } .cc-skelpanel .cc-skelchip { height:16px; } .cc-error { background:#fff; border:1px solid #f3c1c1; border-radius:12px; padding:18px 22px; margin-bottom:16px; display:flex; align-items:center; gap:14px; } .cc-error__msg { font:500 13px 'Poppins'; color:#b91c1c; flex:1; } .cc-error__retry { font:600 12px 'Poppins'; color:#004973; background:rgba(0,73,115,0.08); border:0; border-radius:8px; padding:8px 16px; cursor:pointer; } /* ---- "How it works" guide modal ----------------------------------------- */ /* Own overlay rather than the drawer's scrim: the two can never be open at once, but the guide sits above everything (including a drawer left open underneath) and closes independently. Markup: _guide.php, JS: guide.js. */ .cc-guide { position:fixed; inset:0; z-index:1040; display:flex; align-items:center; justify-content:center; padding:28px 20px; background:rgba(9,22,35,0.46); animation:ccFadeIn .18s ease; } .cc-guide[hidden] { display:none; } .cc-guide__box { width:100%; max-width:940px; max-height:100%; background:#fff; border-radius:18px; box-shadow:0 32px 80px rgba(0,20,50,0.34); display:flex; flex-direction:column; overflow:hidden; animation:ccFadeUp .22s ease; } /* flex:none on both fixed rows — the box runs at max-height, so without it the header and the chip rail shrink to fit and eat their own padding. */ .cc-guide__head { flex:none; display:flex; align-items:flex-start; gap:16px; padding:24px 28px 18px; background:linear-gradient(165deg,#004973 0%,#003052 100%); } .cc-guide__headmain { flex:1; min-width:0; } .cc-guide__title { font:700 21px 'Sora'; letter-spacing:-0.02em; color:#fff; margin:0; } .cc-guide__sub { font:400 13px 'Poppins'; color:rgba(255,255,255,0.72); margin:5px 0 0; } .cc-guide__close { width:34px; height:34px; flex:none; border-radius:99px; border:0; background:rgba(255,255,255,0.12); color:#fff; font:400 14px 'Poppins'; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .cc-guide__close:hover { background:rgba(255,255,255,0.24); } .cc-guide__jump { flex:none; display:flex; gap:9px; align-items:center; padding:15px 28px 14px; border-bottom:1px solid #dce4ed; background:#f7fafc; overflow-x:auto; } .cc-guide__chip { flex:none; font:600 11.5px 'Poppins'; color:#5a6b7d; background:#fff; border:1px solid #c9d5e2; border-radius:99px; padding:7px 15px; cursor:pointer; white-space:nowrap; transition:all .15s ease; } .cc-guide__chip:hover { border-color:#004973; color:#004973; } .cc-guide__chip.is-on { background:#004973; border-color:#004973; color:#fff; } /* position:relative so the sections' offsetTop is measured against the scroll container — the jump chips and the scrollspy both read it. */ .cc-guide__body { flex:1; overflow-y:auto; padding:26px 28px 30px; outline:none; position:relative; } .cc-gsec { padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid #eef2f7; scroll-margin-top:8px; } .cc-gsec__h { font:700 16px 'Sora'; letter-spacing:-0.01em; color:#111e2b; margin:0 0 10px; } .cc-gsec__p { font:400 13.5px/1.68 'Poppins'; color:#41546a; margin:0 0 10px; max-width:88ch; } .cc-gsec__p strong { font-weight:600; color:#1d2f42; } .cc-gsec__p em { font-style:italic; } /* The one thing that explains everything else: no official pending list. */ .cc-gnote { background:rgba(217,131,31,0.08); border-left:3px solid #d9831f; border-radius:0 10px 10px 0; padding:13px 16px; margin:0 0 14px; } .cc-gnote__tag { display:inline-block; font:600 9.5px 'Poppins'; letter-spacing:0.12em; text-transform:uppercase; color:#96590e; margin-bottom:5px; } .cc-gnote p { font:500 13px/1.6 'Poppins'; color:#5c4415; margin:0; } .cc-gsrc { display:flex; flex-direction:column; border:1px solid #dce4ed; border-radius:12px; overflow:hidden; } .cc-gsrc__row { display:flex; gap:16px; padding:11px 15px; border-top:1px solid #eef2f7; } .cc-gsrc__row:first-child { border-top:0; } .cc-gsrc__n { flex:none; width:180px; font:600 12.5px 'Poppins'; color:#004973; } .cc-gsrc__d { flex:1; min-width:0; font:400 12.5px/1.6 'Poppins'; color:#5a6b7d; } .cc-gkinds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px; } .cc-gkind { background:#fff; border:1px solid #dce4ed; border-left:3px solid var(--k,#c9d5e2); border-radius:12px; padding:13px 16px 14px; } .cc-gkind__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px; } .cc-gkind__dot { width:8px; height:8px; border-radius:99px; background:var(--k); flex:none; } .cc-gkind__name { font:600 13.5px 'Poppins'; color:#111e2b; } .cc-gkind__tag { font:600 9.5px 'Poppins'; letter-spacing:0.09em; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:var(--k-tint); color:var(--k-txt); margin-left:auto; white-space:nowrap; } /* Estimates read as provisional here exactly as they do on the grid. */ .cc-gkind__tag--est { background:transparent; border:1.5px dashed rgba(56,163,207,0.6); padding:2px 8px; } .cc-gkind__tag--done { background:#eef2f7; color:#5a7080; } .cc-gkind__what { font:500 12.5px/1.6 'Poppins'; color:#2d3e4f; margin:0 0 6px; } .cc-gkind__src { font:400 12px/1.6 'Poppins'; color:#7b8b9a; margin:0; } .cc-gkind--wide { grid-column:1 / -1; } .cc-gviews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .cc-gview { background:#f7fafc; border-radius:12px; padding:13px 15px; } .cc-gview__n { display:block; font:700 13px 'Sora'; color:#004973; margin-bottom:4px; } .cc-gview__d { display:block; font:400 12.5px/1.6 'Poppins'; color:#5a6b7d; } .cc-glist { margin:0; padding-left:18px; } .cc-glist li { font:400 13px/1.7 'Poppins'; color:#41546a; margin-bottom:5px; } .cc-glist strong { font-weight:600; color:#1d2f42; } .cc-grules { list-style:none; margin:0; padding:0; counter-reset:ccrule; display:flex; flex-direction:column; gap:9px; } .cc-grule { position:relative; background:#fff; border:1px solid #dce4ed; border-radius:12px; padding:13px 16px 14px 46px; font:400 12.5px/1.65 'Poppins'; color:#5a6b7d; counter-increment:ccrule; } .cc-grule::before { content:counter(ccrule); position:absolute; left:15px; top:13px; width:20px; height:20px; border-radius:99px; background:rgba(239,68,68,0.10); color:#b91c1c; font:700 11px 'Poppins'; display:flex; align-items:center; justify-content:center; } .cc-grule b { display:block; font:600 13px 'Poppins'; color:#111e2b; margin-bottom:3px; } .cc-guide__foot { font:400 11.5px/1.65 'Poppins'; color:#a5b4c4; margin:0; } .cc-gsec:last-of-type { border-bottom:0; margin-bottom:14px; padding-bottom:0; } /* ---- Responsive --------------------------------------------------------- */ /* The pinned panel is its own scroll container, and its last element is a footnote — with no cue, a panel taller than the viewport reads as a card with a sentence cut off rather than one with more below. Local-attachment gradients only show the shadow on the side that still has content. */ @media (min-width: 1101px) { .cc-side { background: linear-gradient(#fff 32%, rgba(255,255,255,0)) top / 100% 26px no-repeat local, linear-gradient(rgba(255,255,255,0), #fff 68%) bottom / 100% 26px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0,20,50,0.13), rgba(0,20,50,0)) top / 100% 9px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0,20,50,0.13), rgba(0,20,50,0)) bottom / 100% 9px no-repeat scroll, #fff; } } @media (max-width: 1100px) { .cc-wrap, .cc-main { padding-left:20px; padding-right:20px; } /* align-items:stretch is not cosmetic here: the base rule's flex-start is a CROSS-axis rule, so once the columns stack it stops meaning "top" and starts meaning "shrink-to-fit". .cc-content then takes the month grid's 840px min-width as its own and the whole page scrolls sideways, taking the site header and footer with it — .cc-monthscroll never gets to. */ .cc-cols { flex-direction:column; align-items:stretch; } /* box-sizing: width:100% here is 100% + 40px padding + 2px border, and the tool has no box-sizing reset — the panel pushed the page sideways. order: stacked, the panel would otherwise sit between the toolbar and the calendar — a screen and a half of filters before the first event. */ .cc-side { box-sizing:border-box; width:100%; order:2; position:static; max-height:none; overflow:visible; } /* The one width where the legend earns its space: the sidebar is stacked under the calendar here, so these chips are the only event-type filter and colour key above the grid. No height cap — the hero is static below this breakpoint and never pins, and a cap would only clip the rows the chips wrap onto, hiding half the event kinds behind an edge. */ .cc-legend { display:flex; align-items:center; gap:6px; margin-top:16px; flex-wrap:wrap; } .cc-hero { position:static; } .cc-hero__stats { margin-left:0; } .cc-nav { margin-left:0; } } @media (max-width: 860px) { .cc-gkinds, .cc-gviews { grid-template-columns:minmax(0,1fr); } .cc-gsrc__row { flex-direction:column; gap:3px; } .cc-gsrc__n { width:auto; } } @media (max-width: 767px) { .cc-hero { padding:20px 0 22px; } .cc-search { box-sizing:border-box; min-width:100%; order:3; } .cc-drawer { width:100vw; max-width:100vw; } .cc-agenda__head, .cc-agenda__list { padding-left:14px; padding-right:14px; } .cc-guide { padding:0; } .cc-guide__box { max-width:100%; height:100%; max-height:100%; border-radius:0; } .cc-guide__head, .cc-guide__jump, .cc-guide__body { padding-left:18px; padding-right:18px; } .cc-gkind__tag { margin-left:0; } /* Phone: the help button drops to its icon (aria-label carries the name) so the nav row still fits beside the month stepper and Alerts. */ .cc-nav { flex-wrap:wrap; } .cc-nav__helptxt { display:none; } .cc-nav__help { padding:8px 11px; } } @media (prefers-reduced-motion: reduce) { .cc-page *, .cc-page *::before, .cc-page *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } /* ===== Plan gating — Pro's withheld future + the locked teaser ============ Pro (subscription_type_num 10) receives the historical record only; the server hands back per-kind counts of the future and the JS draws placeholder chips from them. Free / Basic / logged-out get the whole page as a static blurred teaser (_locked.php). Nothing under a blur is real. */ /* The blurred chips inside a locked cell look exactly like the shimmer skeletons the same grid draws while a range is in flight. The mark sits on .cc-day, outside .cc-day__events, so the blur never reaches it. */ .cc-day.is-locked { background:#f7f9fc; } .cc-day.is-locked::after { content:''; position:absolute; top:11px; right:10px; width:13px; height:13px; opacity:.5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V7.5a5 5 0 0 1 10 0V11' fill='none' stroke='%235a7080' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='3.5' y='10' width='17' height='11.5' rx='2.5' fill='%235a7080'/%3E%3C/svg%3E") center/contain no-repeat; } .cc-day.is-locked .cc-day__num { cursor:default; color:#b4c2d0; } .cc-day.is-locked .cc-day__num:hover { background:transparent; } .cc-day.is-locked .cc-day__events { filter:blur(4px) saturate(.65); opacity:.55; pointer-events:none; user-select:none; } .cc-chip--locked { cursor:default; pointer-events:none; } .cc-chip--locked:hover { transform:none; box-shadow:none; } .cc-monthwrap.is-locked { position:relative; } .cc-monthwrap.is-locked .cc-grid, .cc-monthwrap.is-locked .cc-dows { filter:blur(5px) saturate(.65); opacity:.5; pointer-events:none; user-select:none; } .cc-monthwrap.is-locked .cc-day { min-height:112px; } .cc-lock { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #c9d5e2; border-radius:14px; padding:16px 20px; box-shadow:0 12px 36px rgba(0,20,50,0.12); animation:ccFadeUp .25s ease; } .cc-lock--band { margin-bottom:12px; } .cc-lock--slim { padding:12px 18px; box-shadow:none; background:rgba(0,73,115,0.04); } .cc-lock--whole { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(560px, calc(100% - 48px)); flex-direction:column; text-align:center; padding:30px 34px; box-shadow:0 24px 64px rgba(0,20,50,0.22); z-index:2; } .cc-lock__icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:rgba(0,73,115,0.08); color:#004973; flex:none; } .cc-lock--slim .cc-lock__icon { width:34px; height:34px; border-radius:9px; } .cc-lock--slim .cc-lock__icon svg { width:16px; height:16px; } .cc-lock__main { flex:1; min-width:0; } .cc-lock__title { font:600 15px 'Sora'; color:#111e2b; margin-bottom:4px; } .cc-lock--whole .cc-lock__title { font-size:18px; margin-bottom:8px; } .cc-lock__sub { font:400 12.5px/1.6 'Poppins'; color:#4f6478; } .cc-lock--whole .cc-lock__sub { font-size:13.5px; max-width:460px; margin:0 auto; } /* The gradient is darker than it was: white on the old #1a8cbf stop was 3.8:1, under AA for 13px text. #0077B6 is 4.9:1 and it lands on the brand navy. */ .cc-lock__cta { display:inline-block; flex:none; font:600 13px 'Poppins'; color:#fff; background:linear-gradient(135deg,#0077B6 0%,#004973 100%); border-radius:10px; padding:10px 20px; text-decoration:none; white-space:nowrap; box-shadow:0 6px 18px rgba(0,73,115,0.30); transition:transform .15s ease, box-shadow .15s ease; } .cc-lock__cta:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(0,73,115,0.36); color:#fff; } .cc-lock--whole .cc-lock__cta { margin-top:6px; padding:12px 26px; font-size:14px; } .cc-lock__ctas { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; } .cc-lock__cta--ghost { background:rgba(0,73,115,0.08); color:#004973; box-shadow:none; } .cc-lock__cta--ghost:hover { color:#004973; box-shadow:none; background:rgba(0,73,115,0.14); } /* Why these two need the extra weight and nothing else does: .cc-page a { color:#004973 } is (0,1,1) and outranks a bare .cc-lock__cta, so the solid CTA rendered navy-on-blue at rest and only turned white on :hover (which is (0,2,0)). Colour only — raising the whole rule would outrank .cc-lock--whole .cc-lock__cta and steal its padding and font-size. */ .cc-page a.cc-lock__cta { color:#fff; } .cc-page a.cc-lock__cta--ghost { color:#004973; } .cc-lock__fine { font:400 11.5px/1.6 'Poppins'; color:#8a9db5; margin-top:12px; max-width:460px; } .cc-lock__fine a { color:#004973; font-weight:600; text-decoration:none; } .cc-agenda__locked { position:relative; padding:18px 18px 12px; } .cc-agenda__locked .cc-lock--whole { position:relative; top:auto; left:auto; transform:none; width:auto; margin:0 auto; } .cc-agenda__lockrows { filter:blur(4px) saturate(.65); opacity:.5; pointer-events:none; user-select:none; margin-top:14px; } .cc-agrow--locked { cursor:default; } .cc-agrow--locked .cc-agrow__name { display:block; overflow:hidden; } /* Locked page (Free / Basic / logged-out): the hero stats, legend, sidebar and a static month grid are all decorative texture under one card. */ .cc-page.is-locked .cc-hero__stats, .cc-page.is-locked .cc-legend, .cc-page.is-locked .cc-side__body { filter:blur(4px); opacity:.55; pointer-events:none; user-select:none; } .cc-page.is-locked .cc-tab, .cc-page.is-locked .cc-search__input, .cc-page.is-locked .cc-nav__btn { pointer-events:none; opacity:.6; } .cc-page.is-locked .cc-side { pointer-events:none; } .cc-lockgrid { position:relative; } .cc-lockgrid .cc-monthscroll { filter:blur(5px) saturate(.65); opacity:.5; pointer-events:none; user-select:none; } .cc-lockgrid .cc-day { min-height:112px; } @media (max-width: 767px) { .cc-lock { flex-direction:column; align-items:flex-start; } .cc-lock--whole { position:relative; top:auto; left:auto; transform:none; width:auto; margin:16px; align-items:center; } .cc-lock__cta { width:100%; text-align:center; } } /* new-global-styles.css styles bare — keep links inside the notes on the note's own type. `font` is a shorthand and resets font-weight, so every selector that takes it has to restate the weight AFTER it — .cc-lock__fine a is in this list rather than on its own line for exactly that reason. */ .cc-footnote a, .cc-lock__sub a, .cc-lock__fine a { font:inherit; color:#004973; font-weight:600; text-decoration:none; }