/** * AIPressRoom Events Calendar — stylesheet * * Scope: every selector is prefixed with `body .aipr-events-calendar` (or * the page-specific wrapper) and most declarations carry !important. Both * are necessary, not defensive: the Bimber theme styles bare element * selectors, and a direct rule beats an inherited one no matter how * specific the inherited one is. * * The one rule that must never be broken: NO `display: … !important` on * anything JavaScript toggles. The filter engine sets display with * setProperty(…, 'important') and an equally-important stylesheet rule * would win over it on the wrong side. */ /* ========== FONT ========== */ /* Self-hosted rather than loaded from Google Fonts. Two reasons, in order: Google's font host is unreachable from mainland China, which is a stated part of this calendar's readership; and the page already carries ~50 theme scripts, so one fewer third-party origin is worth having. Variable woff2, latin + latin-ext only. One face, not two. 3.0 set every figure in JetBrains Mono; 3.1 drops it. Of nine event listing pages measured on 2026-09-13 (Luma, TechCrunch, Axios, The Information, dev.events, confs.tech, Cerebral Valley, Bloomberg Live, YC) not one sets its metadata in a monospace, Inter's `tabular-nums` aligns a date column just as well, and the second face cost 40KB and a preload of its own. */ @font-face { font-family: 'AIPR Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'AIPR Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========== TOKENS ========== */ /* Defined on :root, not on the calendar wrapper, because the subscribe menu is re-parented to (it has to be: Bimber transforms the page wrapper on mobile, which breaks position:fixed for any descendant). The --aipr- prefix keeps that safe. */ :root { --aipr-ink: #16151C; --aipr-ink-2: #45424F; --aipr-muted: #6E6A7B; --aipr-surface: #FFFFFF; --aipr-surface-2: #FAFAFB; --aipr-line: #E7E5EC; --aipr-line-2: #D3D0DC; /* One accent, spent on one thing: the current state. #6c5ce7 since 3.1, not the old #4B0082: the hub locked the site-wide purple to this value on 2026-09-12 and named this calendar as the side that migrates. 4.9:1 on white, so label text on it passes AA. */ --aipr-accent: #6c5ce7; --aipr-accent-hover: #5747d0; --aipr-accent-soft: #EFEDFC; /* Semantic, and separate from the accent. Both darkened from the original brand values so label text passes AA on its own tint. */ --aipr-gold: #8A5A08; --aipr-gold-rule: #C08A2A; --aipr-gold-soft: #FFFCF5; --aipr-green: #17614E; --aipr-green-rule: #2ECC71; --aipr-green-soft: #F4FBF8; --aipr-live: #A8261C; --aipr-live-soft: #FCF0EE; --aipr-sans: 'AIPR Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Grid for one event row: date, name, location, type. Date leads because a calendar is scanned by date, and a column of monospaced dates is what makes the page read as a timetable rather than a list of links. */ --aipr-row-grid: 140px minmax(0, 1fr) 230px 128px; /* Where an expanded panel's text starts: date column + grid gap + row padding, so the description sits under the event name rather than under the dateline. */ --aipr-panel-indent: 170px; } /* ========== BASE ========== */ /* Both pages, one set of rules. `:is(a, b)` takes the specificity of its most specific argument, and both arguments here are a single class — so every selector below keeps exactly the specificity it had when it named only the calendar, and nothing in the calendar's cascade shifts. This is how the submit page gets the container, masthead, buttons and chips rather than a second copy of their values: 3.1.2 shipped 32 hex literals and 49 token references in the submit section against 7 and 246 in the calendar's, which is what made one page look like a different website. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) { /* 1264px is the site-ui container. The top bar and this page share a left edge once that plugin is live; 1120 did not line up with it. */ max-width: 1264px !important; /* Not optional. Bimber's #page is `display:flex; flex-direction:column` from 1025px up, and a flex item with auto cross-axis margins is sized to its content rather than stretched — so without this the calendar was as wide as its widest visible row: full width with 88 rows on screen, 675px with the six of "This week". */ width: 100% !important; min-width: 0 !important; /* The `*` rule below covers descendants only; the wrapper needs its own, or width:100% plus 48px of padding overflows the viewport by 48px. */ box-sizing: border-box !important; margin: 0 auto !important; padding: 32px 24px 96px !important; font-family: var(--aipr-sans) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--aipr-ink) !important; -webkit-font-smoothing: antialiased !important; font-feature-settings: 'cv05' 1, 'ss03' 1 !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) *, body :is(.aipr-events-calendar, .aipr-ec-submit-page) *::before, body :is(.aipr-events-calendar, .aipr-ec-submit-page) *::after { box-sizing: border-box !important; } /* Bimber styles bare `button` — a 4px radius on every one, and a drop shadow on :hover. The plugin overrode background and border but never those two, so the horizon items and the Date heading grew a white floating pill under the cursor and the accent underline's ends turned round. Cancel both once, here, rather than per component. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) button, body :is(.aipr-events-calendar, .aipr-ec-submit-page) button:hover, body :is(.aipr-events-calendar, .aipr-ec-submit-page) button:focus, body :is(.aipr-events-calendar, .aipr-ec-submit-page) button:active { box-shadow: none !important; text-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; min-height: 0 !important; z-index: auto !important; } body .aipr-events-calendar .aipr-ec-horizon-item, body .aipr-events-calendar .aipr-ec-sort-btn { border-radius: 0 !important; } /* Every `display` in this file carries !important to survive the theme, which also beats the user-agent rule behind the `hidden` attribute — so `el.hidden = true` silently does nothing. Restore it once, here, rather than reaching for a class wherever something needs hiding. The attribute selector is repeated deliberately. `body .aipr-events-calendar [hidden]` and `body .aipr-events-calendar .aipr-ec-badge` have identical specificity, so with both !important the later rule in the file wins and a hidden badge stays visible — which is exactly what happened to the Live badge. Doubling the attribute raises specificity without depending on this block staying at the bottom of the file. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) [hidden][hidden], body .aipr-ec-subscribe-menu [hidden][hidden], body .aipr-ec-filter-pop[hidden][hidden] { display: none !important; } /* Bimber styles label/button/input/h1 directly, and a direct rule beats an inherited font-family however deep the inheritance. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) h1, body :is(.aipr-events-calendar, .aipr-ec-submit-page) h2, body :is(.aipr-events-calendar, .aipr-ec-submit-page) p, body :is(.aipr-events-calendar, .aipr-ec-submit-page) a, body :is(.aipr-events-calendar, .aipr-ec-submit-page) span, body :is(.aipr-events-calendar, .aipr-ec-submit-page) div, body :is(.aipr-events-calendar, .aipr-ec-submit-page) label, body :is(.aipr-events-calendar, .aipr-ec-submit-page) button, body :is(.aipr-events-calendar, .aipr-ec-submit-page) input, body :is(.aipr-events-calendar, .aipr-ec-submit-page) select, body :is(.aipr-events-calendar, .aipr-ec-submit-page) textarea, body :is(.aipr-events-calendar, .aipr-ec-submit-page) li { font-family: var(--aipr-sans) !important; } /* Digits that sit in a column must not dance as they change. */ body .aipr-events-calendar .aipr-ec-num { font-family: var(--aipr-sans) !important; font-variant-numeric: tabular-nums !important; font-feature-settings: 'tnum' 1 !important; } /* ========== PREVIEW BANNER ========== */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-preview-banner { background: #FFF8E1 !important; border: 1px solid #F0D48A !important; border-radius: 6px !important; padding: 10px 14px !important; margin-bottom: 24px !important; font-family: var(--aipr-sans) !important; font-size: 12px !important; letter-spacing: 0.02em !important; color: #6B5300 !important; } /* ========== MASTHEAD ========== */ /* The old header spent 87% of a 900px desktop viewport explaining the page before the first event appeared: title, two paragraphs, slogan, updated line, toolbar, then five rows of filter pills. This one states what the page is once and gets out of the way. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-masthead { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 28px !important; padding-bottom: 22px !important; border-bottom: 1px solid var(--aipr-line) !important; margin-bottom: 20px !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-masthead-text { min-width: 0 !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-title { margin: 0 0 10px !important; font-size: 38px !important; font-weight: 650 !important; line-height: 1.15 !important; letter-spacing: -0.024em !important; color: var(--aipr-ink) !important; text-align: left !important; text-wrap: balance !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-lead { margin: 0 !important; /* Wide enough that the sentence sits on one line at desktop widths: a second line here pushes every listing down by its full leading. */ max-width: 78ch !important; font-size: 18px !important; line-height: 1.5 !important; color: var(--aipr-ink-2) !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-masthead-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; padding-top: 6px !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-btn { display: inline-flex !important; align-items: center !important; height: 42px !important; padding: 0 18px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; border-radius: 8px !important; border: 1px solid var(--aipr-line-2) !important; background: var(--aipr-surface) !important; color: var(--aipr-ink) !important; text-decoration: none !important; cursor: pointer !important; white-space: nowrap !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-btn:hover { border-color: var(--aipr-ink) !important; color: var(--aipr-ink) !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-btn-solid { background: var(--aipr-accent) !important; border-color: var(--aipr-accent) !important; color: #fff !important; font-weight: 600 !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-btn-solid:hover { background: var(--aipr-accent-hover) !important; border-color: var(--aipr-accent-hover) !important; color: #fff !important; } /* Standing facts about the calendar, in the data face. "Added this week" is here because it is the one number that says the page is maintained, and it is also what the weekly digest is selling. */ body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-meta { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 22px !important; margin: 0 0 18px !important; font-family: var(--aipr-sans) !important; font-variant-numeric: tabular-nums !important; font-size: 14.5px !important; line-height: 1.5 !important; color: var(--aipr-muted) !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-meta strong { font-weight: 600 !important; color: var(--aipr-ink) !important; } /* ========== COMMAND BAR ========== */ /* One input where five rows of pills used to be. It takes a keyword today and a sentence once the interpreter is wired in; the chips underneath show what it understood, and stay removable either way. */ body .aipr-events-calendar .aipr-ec-command { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; height: 54px !important; padding: 0 16px !important; border: 1px solid var(--aipr-line-2) !important; border-radius: 12px !important; background: var(--aipr-surface) !important; transition: border-color 0.12s ease !important; } body .aipr-events-calendar .aipr-ec-command.is-focused, body .aipr-events-calendar .aipr-ec-command:focus-within { border-color: var(--aipr-accent) !important; box-shadow: 0 0 0 3px var(--aipr-accent-soft) !important; } body .aipr-events-calendar .aipr-ec-command-icon { flex: 0 0 auto !important; color: var(--aipr-muted) !important; } body .aipr-events-calendar .aipr-ec-search { flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; padding: 0 !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; font-size: 17px !important; line-height: 1.4 !important; color: var(--aipr-ink) !important; } /* The ring for the search box is drawn on the box (`.aipr-ec-command:focus-within`), never on the input inside it. 3.1.0 added the box ring but left the input in the shared :focus-visible list above, so both drew. */ body .aipr-events-calendar .aipr-ec-search:focus, body .aipr-events-calendar .aipr-ec-search:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; } body .aipr-events-calendar .aipr-ec-search::placeholder { color: var(--aipr-muted) !important; opacity: 1 !important; } body .aipr-events-calendar .aipr-ec-command-hint { flex: 0 0 auto !important; font-family: var(--aipr-sans) !important; font-size: 12.5px !important; line-height: 1 !important; padding: 3px 7px !important; border: 1px solid var(--aipr-line) !important; border-radius: 5px !important; color: var(--aipr-muted) !important; } body .aipr-events-calendar .aipr-ec-command-spinner { flex: 0 0 auto !important; width: 14px !important; height: 14px !important; border: 2px solid var(--aipr-line-2) !important; border-top-color: var(--aipr-accent) !important; border-radius: 50% !important; animation: aipr-ec-spin 0.7s linear infinite !important; } @keyframes aipr-ec-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body .aipr-events-calendar .aipr-ec-command-spinner { animation-duration: 2s !important; } } body .aipr-events-calendar .aipr-ec-command-clear { flex: 0 0 auto !important; width: 24px !important; height: 24px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: var(--aipr-line) !important; color: var(--aipr-ink-2) !important; font-size: 15px !important; line-height: 1 !important; cursor: pointer !important; } body .aipr-events-calendar .aipr-ec-command-clear:hover { background: var(--aipr-line-2) !important; } /* ========== CHIP ROW ========== */ /* The chips are built by calendar.js, and on this site the script runs after the load event (Cloudflare Rocket Loader), so the row arrived empty and then grew by one chip height, pushing everything under it down 34px on first paint — the first half of the 0.37 desktop CLS measured 2026-09-28. The row now holds that height from the start. The page shows at least three chips at every width (a facet page locks one axis); if they wrap to a second line on a very narrow phone, that line still arrives late, as before. */ body .aipr-events-calendar .aipr-ec-chiprow { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 12px 0 0 !important; min-height: 34px !important; } body .aipr-events-calendar .aipr-ec-chiprow-label { font-family: var(--aipr-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--aipr-muted) !important; margin-right: 2px !important; } body :is(.aipr-events-calendar, .aipr-ec-submit-page) .aipr-ec-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 34px !important; padding: 0 14px !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1 !important; /* A chip is a