/* --bb-wall-pink background rather than the body's default gold, matching the plain red wall on /home's 3D scene that links here. Set on this wrapper rather than , since base.html.twig has no per-page body class mechanism. */ .contact-page { background: var(--bb-wall-pink); padding: 2rem 0 3rem; } /* Dark green rather than white: white only reaches 2.74:1 on this light pink background (below AA). --bb-green-deep reaches 4.89:1 (AA), already the default heading color elsewhere on light backgrounds. */ .contact-page, .contact-page h1, .contact-page h2 { color: var(--bb-green-deep); } .contact-header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem; text-align: center; margin: 0 0 2rem; } /* Transparent background (see contact-mascotte.js): no frame/shadow like a photo, the character sits directly on the pink behind it. */ .contact-header canvas { width: 180px; height: 220px; } .contact-header h1 { font-family: "Bungee", "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.8rem; margin: 0; } /* A centered flex that lets panels spread 3/2/1 per row depending on width rather than a single column; align-items:flex-start avoids forcing a common height between the short form and the tall HelloAsso widgets (up to 750px). */ .contact-flyers { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem; width: min(94vw, 1600px); margin: 0 auto; } /* White cards with a gold border, to stand out from the pink background behind them. */ .contact-card { width: min(100%, 500px); background: var(--bb-white); border: 2px solid var(--bb-gold); border-radius: 12px; box-shadow: var(--bb-shadow-soft); padding: 1.5rem; color: var(--bb-ink); } .contact-card h2 { display: flex; align-items: center; gap: 0.4rem; font-family: "Bungee", "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.1rem; color: var(--bb-green-deep); } /* Red icons before card titles, same convention as .event-card h3 i on /schedule. */ .contact-card h2 i { color: var(--bb-red); } /* The generic green/black form styling (app.css) is meant for a floating popup, so it's overridden here to sit flush with the white card instead of nesting a box inside a box. */ .contact-card form { margin-top: 1rem; background: none; border: none; padding: 0; color: var(--bb-ink); } .contact-card .form-group { margin-bottom: 1.1rem; } .contact-card label { display: block; margin-bottom: 0.35rem; font-weight: 600; color: var(--bb-green-deep); } .contact-card .form-control { border: 1.5px solid var(--bb-green-mid); border-radius: 8px; padding: 0.55rem 0.75rem; color: var(--bb-ink); background: var(--bb-white); } .contact-card .form-control::placeholder { color: rgba(22, 20, 15, 0.45); } .contact-card .form-control:focus { border-color: var(--bb-gold); box-shadow: 0 0 0 3px rgba(var(--bb-gold-rgb), 0.35); outline: none; } /* The default error color (--bb-gold-pale) assumes a dark green background, unreadable on this card's white. --bb-red-dark instead, AAA on white. */ .contact-card .contact-status.is-error { color: var(--bb-red-dark); } /* Width is fixed by the HelloAsso widget itself; height is adjusted dynamically by contact.js via postMessage once the content loads. Any internal scrollbar is cross-origin HelloAsso content and can't be restyled from this page. */ .ha-widget { width: 100%; height: 750px; border: none; margin-top: 1rem; border-radius: 8px; } /* The page's own scrollbar, themed via :has() since there's no per-page class on / to target otherwise. Degrades gracefully (native scrollbar) on browsers without :has() support. */ html:has(.contact-page) { scrollbar-width: thin; scrollbar-color: var(--bb-green-deep) var(--bb-wall-pink); } html:has(.contact-page)::-webkit-scrollbar { width: 10px; } html:has(.contact-page)::-webkit-scrollbar-track { background: var(--bb-wall-pink); } html:has(.contact-page)::-webkit-scrollbar-thumb { background: var(--bb-green-deep); border-radius: 5px; } html:has(.contact-page)::-webkit-scrollbar-thumb:hover { background: var(--bb-red); }