/* ============================================================ Vibrance Events — Frontend CSS v2 Thème sombre / clair via [data-vib-theme] sur ============================================================ */ /* ── VARIABLES ─────────────────────────────────────────── */ :root, [data-vib-theme="dark"] { --vib-bg: #0d0d0d; --vib-surface: #141414; --vib-surface2: #1c1c1c; --vib-border: rgba(255,255,255,.14); --vib-text: #ffffff; --vib-muted: #aaaaaa; --vib-accent: #ff2d78; --vib-accent-fg: #ffffff; --vib-tag-bg: #ff2d78; --vib-tag-fg: #ffffff; --vib-ph: #444; --vib-input-bg: #141414; --vib-cta-bg: #ff2d78; --vib-cta-fg: #ffffff; --vib-card-hover: #1a1a1a; } [data-vib-theme="light"] { --vib-bg: #fafaf8; --vib-surface: #ffffff; --vib-surface2: #f2f2f0; --vib-border: rgba(0,0,0,.1); --vib-text: #0d0d0d; --vib-muted: #999; --vib-accent: #ff2d78; --vib-accent-fg: #ffffff; --vib-tag-bg: #0d0d0d; --vib-tag-fg: #fafaf8; --vib-ph: #ccc; --vib-input-bg: #fafaf8; --vib-cta-bg: #0d0d0d; --vib-cta-fg: #fafaf8; --vib-card-hover: #f5f5f3; } /* ── RESET SCOPED ──────────────────────────────────────── */ .vib-calendar *, .vib-form-wrap * { box-sizing: border-box; } /* ── CALENDAR WRAPPER ──────────────────────────────────── */ .vib-calendar { background: var(--vib-bg); color: var(--vib-text); transition: background .25s, color .25s; } /* ── FILTERS ────────────────────────────────────────────── */ .vib-cat-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 0 8px; } .vib-tag { display: inline-block; padding: 4px 13px; border-radius: 100px; font-size: 12px; font-weight: 500; border: 1px solid var(--vib-border); color: var(--vib-text); text-decoration: none; transition: all .14s; white-space: nowrap; } .vib-tag:hover { border-color: var(--vib-text); } .vib-tag.on { background: var(--vib-tag-bg); color: var(--vib-tag-fg); border-color: var(--vib-tag-bg); } .vib-tag small { opacity: .6; font-size: 10px; } .vib-period-filters { display: flex; gap: 3px; flex-wrap: wrap; padding: 8px 0 18px; border-bottom: 1px solid var(--vib-border); } .vib-period-btn { display: inline-block; padding: 4px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--vib-text); text-decoration: none; opacity: .55; transition: opacity .13s; } .vib-period-btn:hover { opacity: .85; } .vib-period-btn.on { opacity: 1; background: var(--vib-surface2); border: 1px solid var(--vib-border); } .vib-clear { display:inline-block; padding:4px 10px; font-size:12px; color:var(--vib-muted); text-decoration:none; } .vib-clear:hover { color: var(--vib-accent); } /* ── GRID ───────────────────────────────────────────────── */ .vib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1px; background: var(--vib-border); margin-top: 1px; } /* ── CARD ───────────────────────────────────────────────── */ .vib-card { background: var(--vib-bg); display: flex; flex-direction: column; transition: background .18s; } .vib-card:hover { background: var(--vib-card-hover); } .vib-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; position: relative; } .vib-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .35s; } .vib-card:hover .vib-card-img img { transform: scale(1.04); } .vib-card-no-img { width:100%; height:100%; background: var(--vib-surface2); } .vib-card-badges { position: absolute; bottom: 10px; left: 12px; display: flex; gap: 6px; } .vib-badge { padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .vib-badge-today { background: var(--vib-accent); color: var(--vib-accent-fg); } .vib-badge-free { background: transparent; color: var(--vib-text); border: 1px solid var(--vib-text); } .vib-card-body { padding: 14px 16px 12px; flex: 1; } .vib-card-cats { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px; } .vib-cat { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--vib-tag-bg); color: var(--vib-tag-fg); } .vib-card-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 9px; } .vib-card-title a { color: var(--vib-text); text-decoration: none; } .vib-card-title a:hover { color: var(--vib-accent); } .vib-card-meta { display:flex; flex-direction:column; gap:3px; } .vib-meta-date, .vib-meta-place { font-size: 12px; color: var(--vib-text); opacity: .82; } .vib-card-cta { display: block; margin: 0 16px 16px; padding: 9px; text-align: center; background: var(--vib-cta-bg); color: var(--vib-cta-fg); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 4px; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; } .vib-card:hover .vib-card-cta { opacity: 1; transform: none; } .vib-empty { padding: 60px; text-align: center; color: var(--vib-muted); } /* ── FORM ───────────────────────────────────────────────── */ .vib-form-wrap { max-width: 680px; margin: 0 auto; padding: 50px 0 80px; color: var(--vib-text); } .vib-alert { padding: 13px 18px; border-radius: 6px; margin-bottom: 28px; font-weight: 500; } .vib-ok { background: rgba(74,222,128,.1); color: #4ade80; border: 1px solid rgba(74,222,128,.3); } .vib-err { background: rgba(255,45,120,.1); color: var(--vib-accent); border: 1px solid rgba(255,45,120,.3); } /* Email caché — obligatoire mais invisible */ .vib-field-hidden { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } .vib-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; } .vib-field { display: flex; flex-direction: column; gap: 5px; } .vib-full { grid-column: 1/-1; } .vib-field label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vib-text); opacity: .7; } .vib-field label .req { color: var(--vib-accent); opacity: 1; } .vib-field label em.vib-hint { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; opacity: .6; } .vib-field input, .vib-field select, .vib-field textarea { background: var(--vib-input-bg); border: 1px solid var(--vib-border); border-radius: 5px; padding: 10px 13px; font-size: 14px; color: var(--vib-text); font-family: inherit; transition: border-color .14s; width: 100%; } .vib-field input::placeholder, .vib-field textarea::placeholder { color: var(--vib-ph); } .vib-field input:focus, .vib-field select:focus, .vib-field textarea:focus { outline: none; border-color: var(--vib-accent); } .vib-field select option { background: var(--vib-surface2); } .vib-field textarea { resize: vertical; } .vib-file { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--vib-border); border-radius: 5px; padding: 13px; cursor: pointer; transition: border-color .14s; } .vib-file:hover { border-color: var(--vib-text); } .vib-file input { display: none; } .vib-file-icon { font-size: 20px; opacity: .4; } .vib-file-text strong { display:block; font-size:13px; color:var(--vib-text); margin-bottom:2px; } .vib-file-text small { font-size:11px; color:var(--vib-muted); } .vib-filename { font-size:11px; color:var(--vib-accent); margin-top:5px; display:none; } /* Embed preview */ .vib-embed-preview { margin-top: 10px; border-radius: 6px; overflow: hidden; display: none; } .vib-embed-preview.active { display: block; } .vib-embed-preview iframe { width:100%; border:none; display:block; border-radius:6px; } .vib-bc-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--vib-border); border-radius:6px; background:var(--vib-surface); } .vib-bc-card .icon { font-size:24px; } .vib-bc-card strong { display:block; font-size:13px; color:var(--vib-text); } .vib-bc-card a { font-size:11px; color:var(--vib-accent); word-break:break-all; } .vib-submit-row { text-align: right; } .vib-submit-row button { background: var(--vib-cta-bg); color: var(--vib-cta-fg); border: none; padding: 13px 36px; border-radius: 5px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: opacity .14s; } .vib-submit-row button:hover { opacity: .82; } /* ── SINGLE EVENT ───────────────────────────────────────── */ .vib-single { max-width: 780px; margin: 0 auto; padding: 0 20px 60px; color: var(--vib-text); } .vib-single-hero img { width:100%; border-radius:10px; margin-bottom:28px; } .vib-single h1 { font-size: 28px; font-weight: 700; margin-bottom: 18px; } .vib-single-meta { background: var(--vib-surface); border-radius: 8px; padding: 18px 22px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 9px; } .vib-single-meta-row { font-size: 14px; color: var(--vib-text); } .vib-single-content { font-size: 16px; line-height: 1.75; } .vib-single-embed { margin: 28px 0; border-radius: 8px; overflow: hidden; } .vib-single-embed iframe { width:100%; border:none; display:block; } .vib-btn-back { display:inline-block; margin-top:28px; color:var(--vib-muted); text-decoration:none; font-size:13px; } .vib-btn-back:hover { color:var(--vib-text); } .vib-btn-ext { display:inline-block; margin-top:20px; padding:11px 24px; background:var(--vib-cta-bg); color:var(--vib-cta-fg); border-radius:5px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; } @media(max-width:640px) { .vib-grid { grid-template-columns:1fr; } .vib-form { grid-template-columns:1fr; } .vib-full { grid-column:1; } }