/* ========================================================================== EVENTS EXPLAINER - "What counts as an event?" trigger + modal Loaded ONLY by index.html (pricing section) and pricing.html, like the savings slider, so a change here never cascades across the whole site. Two parts: 1. The TRIGGER, which lives inside the plan card's events line (`.plan .sub` on the homepage, `.plan-card__sub` on /pricing). Those cards are re-pinned white in dark mode by components.css, so the trigger can safely use theme tokens - they resolve to the light values inside the card. 2. The MODAL, which is appended to , i.e. OUTSIDE the re-pinned cards. It therefore hardcodes its light colours, like the blog boxes, so it looks identical in light and dark. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TRIGGER (inside the plan card) -------------------------------------------------------------------------- */ /* The events line becomes a flex row so the pill can sit beside the number and wrap cleanly under it on a narrow card. */ .plan .sub, .plan-card__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } /* Keeps "10,000 events / month" as ONE flex item, so the slash stays tight against the number instead of picking up the row gap. */ .events-count { display: inline; } /* The event count itself. It stays clickable, but carries NO underline (Fahir, 2026-08-09 - the dotted line under the number was removed); the pill beside it is what advertises the explainer. */ .events-term { font: inherit; font-weight: 500; color: var(--color-text-muted); background: none; border: 0; padding: 0; cursor: pointer; transition: color .15s ease; } .events-term:hover, .events-term:focus-visible { color: var(--color-brand); } /* The pill asks the question out loud - that is what makes people click, where a bare icon gets ignored. */ .events-pill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--color-brand); background: rgba(34, 51, 255, .08); border: 1px solid rgba(34, 51, 255, .25); border-radius: 999px; padding: 7px 13px 7px 11px; cursor: pointer; white-space: nowrap; position: relative; transition: background .15s ease, border-color .15s ease; } .events-pill:hover, .events-pill:focus-visible { background: rgba(34, 51, 255, .14); border-color: var(--color-brand); } .events-pill__q { width: 17px; height: 17px; flex: none; border-radius: 50%; background: var(--color-brand); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } /* A short, finite pulse draws the eye once without behaving like a banner. */ .events-pill::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--color-brand); opacity: 0; pointer-events: none; animation: events-pill-pulse 2.2s ease-out 3; } @keyframes events-pill-pulse { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1.14); } } @media (prefers-reduced-motion: reduce) { .events-pill::after { animation: none; } } /* -------------------------------------------------------------------------- 2. MODAL (appended to - fixed colours, identical light + dark) -------------------------------------------------------------------------- */ .events-modal[hidden] { display: none; } .events-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 11, 71, .55); } .events-modal__panel { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 32px 32px 28px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 70px rgba(11, 11, 71, .35); text-align: left; animation: events-modal-pop .18s ease-out; } @keyframes events-modal-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .events-modal__panel { animation: none; } } .events-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #F1F3FA; color: #2E3340; font-size: 19px; line-height: 1; cursor: pointer; transition: background .15s ease; } .events-modal__close:hover { background: #E4E8F7; } .events-modal h2 { margin: 0 0 10px; padding-right: 36px; font-size: 24px; color: #0F0F0F; } /* base.css colours every

with --color-text, which flips in dark mode outside the re-pinned cards - these rules (0,2,0) hold the light look. */ .events-modal p, .events-modal li, .events-modal span { color: #2E3340; } .events-modal .events-modal__lead { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #0F0F0F; } .events-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 20px; padding: 16px 18px; background: #F6F7FE; border-radius: 14px; } .events-modal__grid span { display: flex; gap: 8px; font-size: 15px; } .events-modal__grid span::before { content: "\2713"; color: #10B981; font-weight: 700; } .events-modal__example { margin: 0 0 20px; padding: 18px 20px; background: #E1E6FF; border-radius: 14px; } .events-modal__example h3 { margin: 0 0 10px; font-size: 16px; color: #0B0B47; } .events-modal__example ol { margin: 0 0 12px; padding-left: 20px; } .events-modal__example li { font-size: 15px; line-height: 1.7; color: #242A45; } .events-modal__example .events-modal__total { margin: 0; font-size: 16px; font-weight: 700; color: #2233FF; } .events-modal__math { margin: 0 0 20px; padding: 14px 18px; border: 1px solid #D5DAEB; border-radius: 14px; font-size: 15px; line-height: 1.55; } .events-modal__math b { color: #0F0F0F; } .events-modal__fineprint { margin: 0; font-size: 14px; line-height: 1.5; color: #4B5160; } @media (max-width: 420px) { .events-modal { padding: 16px; } .events-modal__panel { padding: 26px 20px 22px; } .events-modal h2 { font-size: 21px; } .events-modal__grid { grid-template-columns: 1fr; } }