/* ========================================================================== Public & sign-in pages on the ONE Bellegestion style (docs/style-guide.md). Loaded after the theme on every page whose has class « bgp » (login, sign-up, password, PIN, activation, contact, tour booking, public forms). Tokens come from ui.css (loaded just before). Maps the theme's Bootstrap classes onto the app's look so the pages' markup and scripts stay as they are. Prefix: bgp. ========================================================================== */ body.bgp, body.bgp h1, body.bgp h2, body.bgp h3, body.bgp h4, body.bgp h5, body.bgp h6, body.bgp .btn, body.bgp .form-control, body.bgp .form-select, body.bgp input, body.bgp select, body.bgp textarea, body.bgp button { font-family: var(--ui-font) !important; } body.bgp { color: var(--ui-text); -webkit-font-smoothing: antialiased; } /* ── sign-in card (on the daycare photo) ─────────────────────────────── */ body.bgp .authentication-inner .card { border: 0 !important; border-radius: 20px !important; box-shadow: 0 24px 60px rgba(20, 16, 15, 0.28), 0 2px 8px rgba(20, 16, 15, 0.12) !important; } body.bgp .authentication-inner .card-body { padding: 2.25rem 2rem 2rem; } body.bgp .login-title, body.bgp .authentication-inner .card h2, body.bgp .authentication-inner .card h3, body.bgp .authentication-inner .card h4 { font-weight: 900 !important; letter-spacing: -0.01em !important; color: var(--ui-text) !important; } body.bgp .login-title { font-size: 1.85rem; } /* titles of the stand-alone public cards (contact, activation…) */ body.bgp .page-title { font-weight: 900 !important; letter-spacing: -0.01em !important; color: var(--ui-text) !important; } body.bgp .page-subtitle, body.bgp .subtitle { color: var(--ui-muted) !important; font-weight: 600; } body.bgp .authentication-inner .card p, body.bgp .authentication-inner .card .text-muted { color: var(--ui-muted) !important; font-weight: 600; } /* ── fields = .ui-input ─────────────────────────────────────────────── */ body.bgp .form-control, body.bgp .form-select { background-color: var(--ui-surface) !important; border: 1.5px solid var(--ui-border-strong) !important; border-radius: var(--ui-radius-sm) !important; color: var(--ui-text) !important; font-weight: 600; min-height: 44px; padding: 0.6rem 0.9rem; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; } body.bgp .form-control::placeholder { color: var(--ui-faint); font-weight: 600; } body.bgp .form-control:focus, body.bgp .form-select:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-ring) !important; } body.bgp .form-control.is-invalid { border-color: var(--ui-red) !important; } body.bgp .input-group-merge .form-control:not(:last-child) { border-right: 0 !important; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm) !important; } body.bgp .input-group-text { background-color: var(--ui-surface) !important; border: 1.5px solid var(--ui-border-strong) !important; border-left: 0 !important; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0 !important; color: var(--ui-muted); } body.bgp .input-group-merge:focus-within .form-control, body.bgp .input-group-merge:focus-within .input-group-text { border-color: var(--ui-accent) !important; } body.bgp .form-label, body.bgp label.form-label { font-weight: 800; font-size: .8125rem; color: var(--ui-text); } /* ── checkboxes = the app's (ui.css) ─────────────────────────────────── */ body.bgp .form-check-input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: 0.15rem; border: 2px solid var(--ui-border-strong) !important; border-radius: 5px !important; background: var(--ui-surface) !important; background-image: none !important; box-shadow: none !important; position: relative; cursor: pointer; } body.bgp .form-check-input[type="checkbox"]:hover { border-color: var(--ui-accent) !important; } body.bgp .form-check-input[type="checkbox"]:checked { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; } body.bgp .form-check-input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 0; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } body.bgp .form-check-input:focus { box-shadow: 0 0 0 3px var(--ui-accent-ring) !important; } body.bgp .form-check-label { font-weight: 600; color: var(--ui-text); } /* ── buttons = .ui-btn ──────────────────────────────────────────────── */ body.bgp .btn { font-weight: 800 !important; border-radius: var(--ui-radius-sm) !important; letter-spacing: 0 !important; } body.bgp .btn-login, body.bgp .btn-primary, body.bgp .btn-bg-primary { background-color: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; min-height: 44px; box-shadow: none !important; } body.bgp .btn-login:hover, body.bgp .btn-primary:hover, body.bgp .btn-bg-primary:hover, body.bgp .btn-login:focus, body.bgp .btn-primary:focus, body.bgp .btn-bg-primary:focus { background-color: var(--ui-accent-dark) !important; border-color: var(--ui-accent-dark) !important; } body.bgp .btn-outline-primary, body.bgp .btn-bg-outline, body.bgp .btn-outline-secondary { background: var(--ui-surface) !important; color: var(--ui-accent-dark) !important; border: 1.5px solid var(--ui-accent-border) !important; } body.bgp .btn-outline-primary:hover, body.bgp .btn-bg-outline:hover, body.bgp .btn-outline-secondary:hover { background: var(--ui-accent-light) !important; border-color: var(--ui-accent) !important; } /* ── links, alerts ──────────────────────────────────────────────────── */ body.bgp .authentication-inner a:not(.btn):not(.app-brand-link), body.bgp .login-links a { color: var(--ui-accent-dark) !important; font-weight: 700; } body.bgp .alert { border-radius: 12px; font-weight: 600; border: 0; } body.bgp .alert-danger { background: var(--ui-red-light); color: #b91c1c; } body.bgp .alert-success { background: var(--ui-green-light); color: #047857; } body.bgp .alert-warning { background: var(--ui-amber-light); color: var(--ui-amber); } body.bgp .alert-info { background: var(--ui-blue-light); color: #1d4ed8; } @media (max-width: 575px) { body.bgp .authentication-inner .card-body { padding: 1.75rem 1.25rem 1.5rem; } } /* stand-alone public cards (thank-you, activation…): the app's card */ body.bgp .success-card .card, body.bgp .success-card.card { border: 0; border-radius: 20px; box-shadow: var(--ui-shadow-lg); } body.bgp .success-card h1, body.bgp .success-card h2, body.bgp .success-card h3, body.bgp .success-card h4 { font-weight: 900; color: var(--ui-text); letter-spacing: -0.01em; } body.bgp .alert-primary { background: var(--ui-accent-light); color: var(--ui-accent-dark); border: 0; } body.bgp .alert-primary a, body.bgp .alert-primary strong { color: var(--ui-accent-dark); }