.
The few non-token declarations at the end are scoped to
.be-surface (a wrapper class), never to bare element selectors,
so this file is safe to load globally on staging without
affecting unrelated pages.
Conventions
-----------------------------------------------------------------------------
Every token is namespaced with a `--be-` prefix.
Color tokens use the editorial-neutral palette from the model
folder design references, kept verbatim because the palette is
the single most important driver of the premium feel.
Topic accent tokens map a small set of color buckets to the
eventual topic groups; the mapping from a specific event_topic
slug to a bucket is the responsibility of the consuming layer
(the card component picks a bucket via a slug → bucket helper).
============================================================ */
/* === Tokens (project-wide) ================================== */
:root {
/* — Surface palette — */
--be-bg: #f7f5ef; /* warm parchment background */
--be-bg-sunken: #f1eee6; /* recessed sections, page-level alt rows */
--be-surface: #fdfbf6; /* default card surface */
--be-surface-2: #f4f1e8; /* hover state, tonal blocks */
/* — Ink scale (text) — */
--be-ink: #18171a; /* primary heading / strong body */
--be-ink-2: #46433f; /* secondary body */
--be-ink-3: #7a756d; /* tertiary / meta */
--be-ink-4: #a39d92; /* hint / placeholder */
/* — Borders & dividers — */
--be-border: #e6e0d1; /* default card border */
--be-border-strong: #cfc6b1; /* hover, input focus rest state */
--be-divider: #ede7d8; /* dashed/dotted internal separators */
/* — Saddle accent (paid Featured + headline highlight) —
P5.5c-a2 (2026-05-22) — promoted to primary accent token for headline
highlights ("professional events" line, archive eyebrow, etc.). The
previous cyan accent (--be-accent-cyan*) was removed in this phase
after the visual reset away from the dark-navy / cyan SaaS direction
toward a warm editorial palette. See
notes/BIGEVENT_PRODUCTION_P5_5C_A2_VISUAL_TOKEN_RESET.md. */
--be-accent: #4B4FD8; /* P5.35 — Deep Indigo (v6 handoff §1.4); was saddle #8a5a2b */
--be-accent-ink: #25235C;
--be-accent-soft: #ECECFF;
--be-accent-line: #c7c8f4;
/* — Dark surface palette (FOOTER ONLY) —
P5.5c-a2 — re-tuned from #0a1224 (dark navy SaaS) to #1a1816
(warm editorial near-black) so the dark footer reads as the
editorial ink-on-parchment opposite of the light shell. No
hero or header uses --be-bg-dark anymore. */
--be-bg-dark: #1a1816; /* warm editorial near-black */
--be-bg-dark-soft: rgba(255, 255, 255, 0.06);
--be-ink-on-dark: #ffffff;
--be-ink-on-dark-soft: rgba(255, 255, 255, 0.72);
--be-ink-on-dark-mute: rgba(255, 255, 255, 0.52);
--be-border-on-dark: rgba(255, 255, 255, 0.10);
/* — Status palette (very muted) — */
--be-positive: #4a6b3a;
--be-positive-soft: #e8efde;
--be-warn: #8a6a17;
/* — Format tokens (in_person / virtual / hybrid) — */
--be-format-in_person-ink: var(--be-ink-3);
--be-format-in_person-soft: transparent; /* in-person is the default; no badge background */
--be-format-virtual-ink: #2a4d6b;
--be-format-virtual-soft: #e3edf5;
--be-format-virtual-line: #b6cadb;
--be-format-hybrid-ink: #5a3a73;
--be-format-hybrid-soft: #ece4f1;
--be-format-hybrid-line: #c9b8d4;
/* — Topic accent buckets —
Six muted buckets mapped to the major event_topic clusters.
The card layer maps a specific topic slug to a bucket; an
unmapped topic falls back to the `--neutral` bucket. */
--be-topic-ai-ink: #3a5a72;
--be-topic-ai-soft: #e6edf3;
--be-topic-dev-ink: #2e5a4b;
--be-topic-dev-soft: #e2ede8;
--be-topic-business-ink: #5a4a30;
--be-topic-business-soft: #ece6d8;
--be-topic-security-ink: #6b3a3a;
--be-topic-security-soft: #f1e3e3;
--be-topic-creative-ink: #5a3a73;
--be-topic-creative-soft: #ece4f1;
--be-topic-neutral-ink: var(--be-ink-3);
--be-topic-neutral-soft: var(--be-surface-2);
/* — Typography families — */
--be-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
--be-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
--be-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* — Type scale (px) — */
--be-text-eyebrow: 11px; /* mono caps small labels */
--be-text-meta: 11.5px; /* mono small metadata */
--be-text-xs: 12px;
--be-text-sm: 13px;
--be-text-body: 14px;
--be-text-lg: 15px;
--be-text-h-card: 22px; /* card heading */
--be-text-h-featured: 26px; /* featured card heading */
--be-text-h-section: 28px; /* section heading */
--be-text-h-display: 44px; /* page hero */
/* — Line-height — */
--be-lh-tight: 1.18;
--be-lh-snug: 1.35;
--be-lh-base: 1.5;
--be-lh-loose: 1.6;
/* — Letter-spacing — */
--be-ls-tight: -0.015em;
--be-ls-card: -0.005em;
--be-ls-eyebrow: 0.08em;
--be-ls-meta: 0.02em;
/* — Spacing scale (px) — */
--be-space-1: 4px;
--be-space-2: 8px;
--be-space-3: 12px;
--be-space-4: 16px;
--be-space-5: 20px;
--be-space-6: 24px;
--be-space-7: 32px;
--be-space-8: 40px;
--be-space-9: 56px;
--be-space-10: 72px;
/* — Radius scale — */
--be-radius-sm: 4px; /* chip-mini, small inputs */
--be-radius: 6px; /* buttons, inputs */
--be-radius-md: 10px; /* cards */
--be-radius-lg: 14px; /* Featured modules */
--be-radius-pill: 100px; /* pills, search field */
/* — Shadows (intentionally subtle) — */
--be-shadow-card: 0 1px 0 rgba(24,23,26,0.02), 0 1px 2px rgba(24,23,26,0.03);
--be-shadow-hover: 0 1px 0 rgba(24,23,26,0.02), 0 6px 16px -10px rgba(24,23,26,0.12);
--be-shadow-featured: 0 1px 0 rgba(138,90,43,0.06), 0 6px 18px -10px rgba(138,90,43,0.18);
--be-shadow-pop: 0 6px 24px -8px rgba(24,23,26,0.12), 0 2px 6px rgba(24,23,26,0.04);
/* — Motion — */
--be-ease: cubic-bezier(0.2, 0.0, 0, 1);
--be-dur-fast: 120ms;
--be-dur-base: 160ms;
--be-dur-slow: 220ms;
/* — Focus ring (a11y) — */
--be-focus-ring: 0 0 0 3px rgba(24,23,26,0.18);
/* — Container widths — CANONICAL STRUCTURAL GRID (approved mockup .wrap: --max 1280 / --gut 60).
Batch A consolidation: one authoritative structural container consumed by header + every
content section. Was 1240 (legacy) competing with 1280 (RADAR modules) and 1200 (archives). */
--be-container: 1280px; /* was 1240px — retired to the mockup canonical (--max) */
--be-container-narrow: 980px;
--be-gutter: 60px; /* canonical desktop structural gutter (mockup --gut) */
}
/* Canonical RESPONSIVE gutter — mirrors the approved mockup (60 → 40 → 18). Every structural
container uses padding: 0 var(--be-gutter), so all BigEvent surfaces degrade uniformly. */
@media ( max-width: 1080px ) { :root { --be-gutter: 40px; } }
@media ( max-width: 959px ) { :root { --be-gutter: 18px; } } /* aligns with the header's ≤959 mobile switch */
/* === Tokens (local re-scope) =================================
The same tokens re-declared inside .be-surface so a parent
element can carry a brand-scoped context independent of :root.
Useful when BigEvent surfaces are embedded in a non-BigEvent
page (e.g. homepage featured-conferences block inside a Kadence
row): wrap them in
to keep BigEvent
styling within those bounds and reduce specificity collisions.
============================================================ */
.be-surface {
--be-bg: #f7f5ef;
--be-bg-sunken: #f1eee6;
--be-surface: #fdfbf6;
--be-surface-2: #f4f1e8;
--be-ink: #18171a;
--be-ink-2: #46433f;
--be-ink-3: #7a756d;
--be-ink-4: #a39d92;
--be-border: #e6e0d1;
--be-border-strong: #cfc6b1;
--be-divider: #ede7d8;
--be-accent: #4B4FD8; /* P5.35 — Deep Indigo (v6 handoff §1.4); was saddle #8a5a2b */
--be-accent-ink: #25235C;
--be-accent-soft: #ECECFF;
--be-accent-line: #c7c8f4;
--be-positive: #4a6b3a;
--be-positive-soft: #e8efde;
--be-warn: #8a6a17;
}
/* === Surface base ============================================
Light wrapper styling for the BigEvent surface region only.
Does not style anything outside .be-surface, and does not
reset global element styles. Intentionally minimal.
============================================================ */
.be-surface {
color: var(--be-ink);
font-family: var(--be-font-sans);
font-size: var(--be-text-body);
line-height: var(--be-lh-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.be-surface *,
.be-surface *::before,
.be-surface *::after {
box-sizing: border-box;
}
/* Visible focus ring on any focusable inside a BigEvent surface.
Scoped so it never overrides global focus styles outside. */
.be-surface :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--be-focus-ring);
border-radius: var(--be-radius-sm);
}
/* === Typography primitives (utility classes) =================
Optional, used by composing layers. Not required for cards
to render. Keep names verbose to avoid collision.
============================================================ */
.be-surface .be-eyebrow {
font-family: var(--be-font-mono);
font-size: var(--be-text-eyebrow);
font-weight: 500;
letter-spacing: var(--be-ls-eyebrow);
text-transform: uppercase;
color: var(--be-ink-3);
}
.be-surface .be-meta {
font-family: var(--be-font-mono);
font-size: var(--be-text-meta);
letter-spacing: var(--be-ls-meta);
color: var(--be-ink-3);
}
.be-surface .be-serif-italic {
font-family: var(--be-font-serif);
font-style: italic;
font-weight: 400;
color: var(--be-ink);
}
/* === Reduced-motion ========================================== */
@media (prefers-reduced-motion: reduce) {
.be-surface * {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
/* -------------------------------------------------------
Title: Newsletter Popup – Popup Maker + WPForms Styling
Description: Defines theme tokens and full styling for
the bigevent.io popup (Popup Maker) and embedded WPForms:
card layout, typography, inputs, CTA button, and responsive.
------------------------------------------------------- */
/* ========= Theme tokens ========= */
:root{
--be-bg:#0E223F; /* fond principal (navy clair) */
--be-bg-2:#12284A; /* variante */
--be-text:#ffffff; /* texte principal */
--be-muted:#d1d5db; /* texte secondaire */
--be-cta-1:#22D3EE; /* cyan clair CTA */
--be-cta-2:#0891B2; /* teal soutenu CTA */
--be-link:#7dd3fc; /* liens */
--be-ico:#22D3EE; /* puces / icônes */
--be-w:520px; /* largeur commune des blocs internes */
}
/* ========= Overlay & container ========= */
.pum-overlay{ backdrop-filter: blur(2px); }
.pum-container{
max-width:560px;
padding:0 !important;
border-radius:14px;
background: var(--be-bg) !important;
color: var(--be-text);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.04),
0 14px 40px rgba(0,0,0,.35);
}
/* ========= Card interne & typo ========= */
.be-card{
padding:24px 22px;
font-family:var(--global-body-font-family, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
@media (min-width:640px){ .be-card{ padding:28px 32px; }}
/* ========= Largeur commune & alignement ========= */
.be-head, .be-points, .be-form, .be-legal{
max-width: var(--be-w);
margin-left: auto;
margin-right: auto;
}
.be-head h2, .be-head p{ text-align: left; }
/* ========= Header ========= */
.be-head h2{
margin:0 0 .4rem 0;
line-height:1.15;
font-size:clamp(24px,3vw,34px);
letter-spacing:.2px;
color:var(--be-text);
}
.be-head p{
margin:0 0 14px 0;
color:var(--be-muted);
font-size:16px;
}
/* ========= Liste bénéfices ========= */
.be-points{
list-style:none;
padding:0;
margin:10px auto 12px;
}
.be-points li{
list-style:none;
position:relative;
padding-left:26px;
margin:6px 0;
font-size:16px; line-height:1.5; color:var(--be-text);
}
.be-ico{
position:absolute;
left:2px; top:6px;
color:var(--be-ico);
display:inline-flex;
width:16px; height:16px;
}
/* ========= Bloc formulaire ========= */
.be-form, .be-legal{ max-width:var(--be-w); }
/* Reset WPForms dans le popup */
.pum-container .wpforms-container-full,
.pum-container .wpforms-form{
margin:0 !important;
padding:0 !important;
}
/* Labels WPForms */
.pum-container .wpforms-field-label,
.pum-container .wpforms-field-sublabel { color:#eef2ff; }
/* Champs WPForms */
.pum-container .wpforms-form .wpforms-field{ margin-bottom:8px; }
.pum-container .wpforms-form input[type="text"],
.pum-container .wpforms-form input[type="email"],
.pum-container .wpforms-form select,
.pum-container .wpforms-form textarea{
width:100% !important; box-sizing:border-box;
background:#ffffff; color:#0b1220;
border:1px solid #d1d5db;
border-radius:10px; padding:12px 14px;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.pum-container .wpforms-form input::placeholder,
.pum-container .wpforms-form textarea::placeholder{ color:#6b7280; }
/* Focus */
.pum-container .wpforms-form input:focus,
.pum-container .wpforms-form select:focus,
.pum-container .wpforms-form textarea:focus{
outline:none;
border-color: var(--be-cta-2);
box-shadow: 0 0 0 3px rgba(34,211,238,.28);
}
/* Select caret */
.pum-container .wpforms-form select{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
background-image: linear-gradient(45deg, transparent 50%, #93a3b8 50%),
linear-gradient(135deg, #93a3b8 50%, transparent 50%),
linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px),
100% 0;
background-size: 6px 6px, 6px 6px, 2.5rem 100%;
background-repeat: no-repeat;
}
/* Bouton submit */
.pum-container .wpforms-submit-container{ margin-top:8px !important; }
.pum-container .wpforms-submit{
width:100%;
border-radius:12px;
padding:14px 18px;
font-weight:800;
font-size:16px;
color:#fff;
background: linear-gradient(180deg, var(--be-cta-1), var(--be-cta-2)) !important;
box-shadow: 0 12px 28px rgba(8,145,178,.45);
transition: transform .04s ease, box-shadow .2s ease, filter .2s ease;
}
.pum-container .wpforms-submit:hover{
filter: brightness(1.08);
box-shadow: 0 14px 36px rgba(8,145,178,.55);
}
.pum-container .wpforms-submit:active{ transform: translateY(1px); }
/* Confirmation WPForms */
.pum-container .wpforms-confirmation-container-full{
background: var(--be-bg-2);
color:#e6edf7;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:14px;
}
/* ========= Mentions & liens ========= */
.be-legal{
text-align:left;
font-size:12px;
color:var(--be-muted);
opacity:.95;
margin-top:12px;
}
.be-legal a{ color:var(--be-link); text-decoration: underline; }
/* ========= Bouton Close ========= */
.pum-theme-default-theme .pum-close{
background: var(--be-cta-2);
color:#fff;
border-radius:6px;
padding:8px 10px;
font-size:12px;
line-height:1;
}
.pum-theme-default-theme .pum-close:hover{ filter: brightness(1.08); }
/* ========= Responsive ========= */
@media (max-width:480px){
.pum-container{ border-radius:12px; }
.be-card{ padding:22px 16px; }
.be-head h2{ font-size:24px; }
}