/*! * Festivo brand tokens + auth-surface components. * * Single source of truth for the visual language shared by every * auth/onboarding surface a Festivo user touches before reaching the * dashboard SPA: the C5 login + register pages (rendered through this * theme) and the standalone server-rendered invitation-register + * email-confirm templates (rendered without theme chrome — they have * no place for the Coffeeshop public-site header). * * Plain CSS rather than a SCSS module so the standalone templates can * link this file directly with no webpack-mix or theme-build coupling. * Values mirror festivo_backend/src/assets/style/_variables.scss * (Switzer palette, Inter, radii, shadows) so /login and /festivo * feel like the same product. */ :root, .festivo-auth-surface { --festivo-bg: #f4f7fe; --festivo-card: #ffffff; --festivo-card-border: #e2e8f0; --festivo-text: #2a3544; --festivo-muted: #6b7077; --festivo-border: #e2e8f0; --festivo-input-bg: #ffffff; --festivo-input-disabled-bg: #f7f9fc; --festivo-primary: #008aca; --festivo-primary-hover: #0073aa; --festivo-primary-soft: rgba(0, 138, 202, 0.10); --festivo-focus-ring: rgba(0, 138, 202, 0.22); --festivo-danger-bg: #fde9e6; --festivo-danger-border: #f3b8b0; --festivo-danger-text: #8a1f12; --festivo-radius-sm: 8px; --festivo-radius-md: 12px; --festivo-radius-lg: 16px; --festivo-shadow-card: 0 18px 40px rgba(112, 144, 176, 0.16); --festivo-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body.festivo-auth-surface { margin: 0; min-height: 100vh; background: var(--festivo-bg); color: var(--festivo-text); font-family: var(--festivo-font-family); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * `body.festivo-auth-surface` already gets `min-height: 100vh` plus * the Festivo background, which fills the viewport even when the card * is shorter — no class needed. The shell wrapper centers the * card vertically and horizontally inside that body. */ .festivo-auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; box-sizing: border-box; } .festivo-auth-card { background: var(--festivo-card); border: 1px solid var(--festivo-card-border); border-radius: var(--festivo-radius-lg); box-shadow: var(--festivo-shadow-card); max-width: 480px; width: 100%; padding: 40px 32px; box-sizing: border-box; } .festivo-auth-card *, .festivo-auth-card *::before, .festivo-auth-card *::after { box-sizing: border-box; } .festivo-auth-card__brand { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--festivo-muted); margin-bottom: 24px; } .festivo-auth-card__title { font-size: 24px; font-weight: 600; margin: 0 0 8px; line-height: 1.25; color: var(--festivo-text); } .festivo-auth-card__lead { color: var(--festivo-muted); margin: 0 0 24px; font-size: 15px; line-height: 1.55; } .festivo-auth-card__lead strong { color: var(--festivo-text); font-weight: 600; } .festivo-auth-meta { font-size: 13px; color: var(--festivo-muted); background: var(--festivo-input-disabled-bg); border-radius: var(--festivo-radius-sm); padding: 12px 14px; margin: 0 0 24px; } .festivo-auth-field { display: block; margin-bottom: 16px; } .festivo-auth-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--festivo-text); } .festivo-auth-hint { display: block; font-size: 12px; color: var(--festivo-muted); margin-top: 6px; } .festivo-auth-input { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--festivo-border); border-radius: var(--festivo-radius-sm); font: inherit; color: var(--festivo-text); background: var(--festivo-input-bg); transition: border-color 120ms ease, box-shadow 120ms ease; } .festivo-auth-input:focus { outline: none; border-color: var(--festivo-primary); box-shadow: 0 0 0 4px var(--festivo-focus-ring); } .festivo-auth-input[readonly], .festivo-auth-input[disabled] { background: var(--festivo-input-disabled-bg); color: var(--festivo-muted); cursor: not-allowed; } .festivo-auth-btn { display: inline-block; width: 100%; padding: 12px 16px; border: 0; border-radius: var(--festivo-radius-sm); background: var(--festivo-primary); color: var(--festivo-card); font: inherit; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; margin-top: 8px; transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .festivo-auth-btn:hover { background: var(--festivo-primary-hover); } .festivo-auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--festivo-focus-ring); } .festivo-auth-btn--secondary { background: transparent; color: var(--festivo-text); border: 1px solid var(--festivo-border); } .festivo-auth-btn--secondary:hover { background: var(--festivo-primary-soft); color: var(--festivo-text); } .festivo-auth-errors { background: var(--festivo-danger-bg); border: 1px solid var(--festivo-danger-border); border-radius: var(--festivo-radius-sm); padding: 12px 14px; margin: 0 0 16px; color: var(--festivo-danger-text); } .festivo-auth-errors ul { margin: 0; padding-left: 18px; } .festivo-auth-errors li + li { margin-top: 4px; } .festivo-auth-accent { width: 56px; height: 4px; background: var(--festivo-primary); border-radius: 2px; margin: 0 auto 24px auto; } .festivo-auth-accent--danger { background: var(--festivo-danger-text); } /* * Theme-page integration overrides. * * /login and /register render inside the Coffeeshop theme with its * full chrome (header, navigation, footer). When the page body * carries `.festivo-auth-surface`, hide the public-site chrome and * center the inner form card so the visual matches the standalone * surfaces. The hidden selectors target the Coffeeshop header / * footer wrappers; if either renames, this selector list needs * updating. */ body.festivo-auth-surface header, body.festivo-auth-surface footer, body.festivo-auth-surface .ccm-block-header-navigation, body.festivo-auth-surface #header, body.festivo-auth-surface #footer { display: none !important; } body.festivo-auth-surface .login-page, body.festivo-auth-surface .register-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 16px; } body.festivo-auth-surface .login-page > .container, body.festivo-auth-surface .register-page > .container { width: 100%; background: var(--festivo-card); border: 1px solid var(--festivo-card-border); border-radius: var(--festivo-radius-lg); box-shadow: var(--festivo-shadow-card); padding: 20px 32px; } body.festivo-auth-surface .login-page-title h2, body.festivo-auth-surface .register-page h1 { font-weight: 600; color: var(--festivo-text); } body.festivo-auth-surface .login-page-title .logo img { max-height: 40px; width: auto; display: block; margin: 0 auto 16px; } body.festivo-auth-surface .form-control, body.festivo-auth-surface input[type="text"], body.festivo-auth-surface input[type="email"], body.festivo-auth-surface input[type="password"] { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--festivo-border); border-radius: var(--festivo-radius-sm); font-family: var(--festivo-font-family); font-size: 16px; color: var(--festivo-text); background: var(--festivo-input-bg); } body.festivo-auth-surface .form-control:focus, body.festivo-auth-surface input:focus { outline: none; border-color: var(--festivo-primary); box-shadow: 0 0 0 4px var(--festivo-focus-ring); } body.festivo-auth-surface .btn-primary, body.festivo-auth-surface button[type="submit"] { background: var(--festivo-primary); border-color: var(--festivo-primary); border-radius: var(--festivo-radius-sm); font-weight: 600; padding: 12px 16px; color: var(--festivo-card); } body.festivo-auth-surface .btn-primary:hover, body.festivo-auth-surface button[type="submit"]:hover { background: var(--festivo-primary-hover); border-color: var(--festivo-primary-hover); color: var(--festivo-card); } body.festivo-auth-surface .form-check-input { padding: .25rem; }