/* Community Events Calendar — front-end styles Dark / neon aesthetic: near-black surfaces, hot-pink borders & labels, lime CTAs, bold uppercase display type. Brand colors are CSS custom properties set inline from Settings > Community Calendar, so the palette can be changed without touching this file. */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;700&display=swap'); .cec-calendar-wrap, .cec-events-wrap, .cec-upcoming-wrap, .cec-submit-form, .cec-single-event, .cec-taxonomy-archive, .cec-auth-form { --cec-radius: 12px; --cec-pill: 100px; --cec-card: #1b1826; --cec-card-alt: #211d2e; --cec-muted: #a9a6bb; --cec-border-soft: rgba(255, 255, 255, 0.08); color: var(--cec-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-sizing: border-box; max-width: 100%; /* No-op for anything still at 100% width (calendar/events/upcoming — these fill whatever column they're dropped into either way), but self-centers .cec-submit-form/.cec-auth-form's own narrower max-width wherever they land — including a plain page with no Elementor column to do that centering for them, e.g. this plugin's own auto-created pages. */ margin: 0 auto; } .cec-calendar-wrap *, .cec-events-wrap *, .cec-upcoming-wrap *, .cec-submit-form *, .cec-single-event *, .cec-taxonomy-archive *, .cec-auth-form * { box-sizing: border-box; } /* Not .cec-single-event here — it has a position:sticky sidebar, and overflow-x:hidden on an ancestor silently breaks sticky positioning. */ .cec-calendar-wrap, .cec-events-wrap, .cec-upcoming-wrap, .cec-submit-form, .cec-taxonomy-archive, .cec-auth-form { overflow-x: hidden; } /* These two are rendered by the plugin's own page templates (not built in Elementor), so unlike shortcode output dropped into an Elementor page, nothing else paints a dark background behind them — the active theme's default (often white) would otherwise show through. */ .cec-single-event, .cec-taxonomy-archive { background: var(--cec-bg); padding: 32px 24px 60px; max-width: 1100px; margin: 0 auto; } body.cec-plugin-page { background: var(--cec-bg) !important; } .cec-calendar-wrap h1, .cec-calendar-wrap h2, .cec-calendar-wrap h3, .cec-events-wrap h1, .cec-events-wrap h2, .cec-events-wrap h3, .cec-single-event h1, .cec-single-event h3, .cec-taxonomy-archive h1 { font-family: 'Archivo Black', 'Arial Black', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; color: var(--cec-primary); } .cec-btn { display: inline-block; padding: 12px 26px; border-radius: var(--cec-pill); text-decoration: none; cursor: pointer; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Inter', sans-serif; transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Every button variant keeps a solid, filled background and dark text in its resting state, full stop — hover/focus only adds a glow/lift, never a color swap or a transparent background. This is deliberate: a transparent/outline resting state is exactly what caused buttons to become unreadable against certain backgrounds. !important on background/border/color here guards against the active theme's own default styling for native