/* splash.css — Landing + Login screens (background-image driven, Memphis/Bold Block style) Created: 20260421 */ /* ── Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@400;500;600;700&display=swap'); :root { --splash-green: #7BE495; --splash-green-strong: #52d08b; --splash-dark: #111111; --splash-dark-card: rgba(17, 17, 17, 0.92); --splash-dark-soft: rgba(17, 17, 17, 0.78); --splash-text: #ffffff; --splash-text-muted: rgba(255,255,255,0.78); --splash-radius-card: 18px; --splash-radius-pill: 999px; --splash-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.22); --splash-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22); --splash-font-display: 'Bebas Neue', 'Oswald', Impact, system-ui, sans-serif; --splash-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ══════════════════════════════════════════════════════ 1. Splash body (shared by landing + login) ══════════════════════════════════════════════════════ */ /* Global box-sizing so tilted cards and pill buttons respect container width instead of overflowing horizontally (padding counted inside width). */ *, *::before, *::after { box-sizing: border-box; } /* Put the background image on so it always covers the entire scrollable height of the document — avoids the gray strip below content on mobile when the body is taller than the viewport. */ html { min-height: 100%; background-color: var(--splash-dark); background-image: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.14) 40%, rgba(0,0,0,0.48) 100%), url('/img/splash-bg.jpg'); background-size: auto, cover; background-position: 0 0, center top; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; } /* iOS Safari ignores background-attachment: fixed reliably — fall back to scroll on touch devices so the image still covers the full document. */ @media (hover: none) and (pointer: coarse), (max-width: 767px) { html { background-attachment: scroll, scroll; background-size: auto, 100% auto; background-position: 0 0, center top; } } body.splash-body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--splash-font-body); color: var(--splash-text); background: transparent; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* A11y utility — visually hide but keep available to assistive tech */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.splash-body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.12) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 55%); pointer-events: none; z-index: 0; } .splash-shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(16px, 4vw, 32px); max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════════════ 2. Top-corner utility buttons (host-reg, info) ══════════════════════════════════════════════════════ */ .splash-corner-btn { position: absolute; top: clamp(14px, 3vw, 26px); display: inline-flex; align-items: center; gap: 8px; background: var(--splash-dark-card); color: var(--splash-text); text-decoration: none; padding: 12px 16px; border-radius: 14px; font-family: var(--splash-font-display); font-size: 17px; letter-spacing: 0.04em; line-height: 1; box-shadow: var(--splash-shadow-sm); border: 0; cursor: pointer; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease; min-height: 44px; min-width: 44px; justify-content: center; z-index: 3; } .splash-corner-btn:hover, .splash-corner-btn:focus-visible { transform: translateY(-2px); box-shadow: var(--splash-shadow); color: var(--splash-text); outline: none; } .splash-corner-btn:focus-visible { box-shadow: var(--splash-shadow), 0 0 0 3px rgba(123, 228, 149, 0.6); } .splash-corner-btn.tl { left: clamp(14px, 3vw, 26px); transform: rotate(-5deg); } .splash-corner-btn.tl:hover { transform: rotate(-5deg) translateY(-2px); } .splash-corner-btn.tr { right: clamp(14px, 3vw, 26px); } .splash-corner-btn .bi { font-size: 20px; } .splash-corner-btn .corner-label { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.05; } .splash-corner-btn .corner-label small { font-family: var(--splash-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; opacity: 0.75; text-transform: uppercase; } /* Circular variant for info / help */ .splash-corner-btn.circle { padding: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; } /* ══════════════════════════════════════════════════════ 3. Brand (logo + wordmark) ══════════════════════════════════════════════════════ */ .splash-brand { text-align: center; margin-top: clamp(60px, 14vh, 120px); margin-bottom: clamp(16px, 3vh, 28px); } .splash-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; background: var(--splash-dark); border-radius: 18px; color: #fff; box-shadow: var(--splash-shadow); margin-bottom: 10px; transform: rotate(-4deg); } .splash-brand-mark svg { width: 52px; height: 52px; display: block; } .splash-brand-word { font-family: var(--splash-font-display); font-size: clamp(28px, 6vw, 36px); letter-spacing: 0.08em; color: var(--splash-dark); background: #fff; padding: 4px 14px; display: inline-block; border-radius: 6px; text-shadow: none; line-height: 1.1; } /* ══════════════════════════════════════════════════════ 4. Landing page tilted action cards ══════════════════════════════════════════════════════ */ .splash-actions { display: flex; flex-direction: column; gap: clamp(14px, 3vh, 26px); margin-top: clamp(8px, 2vh, 16px); padding-bottom: clamp(60px, 10vh, 100px); } .action-card { background: var(--splash-dark-card); color: var(--splash-text); padding: 22px 24px; border-radius: var(--splash-radius-card); box-shadow: var(--splash-shadow); text-decoration: none; display: block; transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease; border: 0; cursor: pointer; width: 100%; text-align: left; font-family: var(--splash-font-body); } .action-card:hover, .action-card:focus-visible { box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42); outline: none; } .action-card:focus-visible { box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(123, 228, 149, 0.7); } .action-card .card-title { font-family: var(--splash-font-display); font-size: clamp(28px, 7vw, 40px); letter-spacing: 0.04em; line-height: 1; margin: 0 0 10px; color: #fff; } .action-card .card-body-text { font-size: 14px; color: var(--splash-text-muted); line-height: 1.35; margin: 0; } .action-card .card-qr { display: flex; justify-content: center; margin: 6px 0 8px; } .action-card .card-qr svg { width: 96px; height: 96px; } .action-card .card-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; width: 100%; padding: 12px 18px; border-radius: var(--splash-radius-pill); font-family: var(--splash-font-display); font-size: 20px; letter-spacing: 0.06em; transition: background 180ms ease, transform 180ms ease; } .action-card:hover .card-cta { background: rgba(255,255,255,0.2); } .action-card .card-cta .bi { margin-left: 8px; font-size: 18px; } /* Green accent variant (primary login action) */ .action-card.accent .card-cta { background: var(--splash-green); border-color: var(--splash-green-strong); color: var(--splash-dark); } .action-card.accent:hover .card-cta { background: var(--splash-green-strong); } /* Tilted geometric flourish */ .action-card.tilt-left { transform: rotate(-2.2deg); } .action-card.tilt-right { transform: rotate(2.2deg); } .action-card.tilt-left:hover, .action-card.tilt-left:focus-visible { transform: rotate(-2.2deg) translateY(-3px); } .action-card.tilt-right:hover, .action-card.tilt-right:focus-visible { transform: rotate(2.2deg) translateY(-3px); } @media (prefers-reduced-motion: reduce) { .action-card, .action-card.tilt-left, .action-card.tilt-right, .splash-corner-btn.tl, .splash-brand-mark { transform: none !important; } } /* ══════════════════════════════════════════════════════ 5. Login card (step 1 / step 2) ══════════════════════════════════════════════════════ */ .login-shell { margin-top: clamp(12px, 3vh, 24px); padding-bottom: clamp(60px, 10vh, 100px); } .login-card-v2 { background: var(--splash-dark-card); color: var(--splash-text); border-radius: var(--splash-radius-card); padding: 26px 24px 28px; box-shadow: var(--splash-shadow); transform: rotate(-1.2deg); } .login-card-v2 h1 { font-family: var(--splash-font-display); font-size: clamp(32px, 8vw, 44px); letter-spacing: 0.04em; line-height: 0.95; text-align: center; margin: 0 0 4px; color: #fff; transform: rotate(1.2deg); } .login-card-v2 h1 span { display: block; font-size: clamp(26px, 6.5vw, 36px); margin-top: 4px; } .login-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--splash-radius-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); margin-top: 20px; font-size: 15px; color: var(--splash-text-muted); } .login-field .wa-badge { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--splash-green); color: var(--splash-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .login-field .field-label { font-family: var(--splash-font-body); font-weight: 500; letter-spacing: 0.02em; } .login-input-pill { display: block; width: 100%; margin-top: 10px; padding: 14px 20px; background: var(--splash-green); color: var(--splash-dark); border: 1px solid var(--splash-green-strong); border-radius: var(--splash-radius-pill); font-family: var(--splash-font-display); font-size: clamp(22px, 5.5vw, 28px); letter-spacing: 0.04em; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); min-height: 52px; box-sizing: border-box; } .login-input-pill::placeholder { color: rgba(17, 17, 17, 0.5); font-weight: 500; } .login-input-pill:focus { outline: none; border-color: #2f8b55; box-shadow: 0 0 0 3px rgba(123, 228, 149, 0.45), inset 0 1px 0 rgba(255,255,255,0.4); background: #a4f0b9; } .login-submit { display: block; width: 60%; margin: 18px auto 0; padding: 12px 20px; background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 14px; font-family: var(--splash-font-display); font-size: 20px; letter-spacing: 0.08em; cursor: pointer; transition: background 180ms ease, transform 180ms ease; min-height: 46px; } .login-submit:hover, .login-submit:focus-visible { background: rgba(255,255,255,0.22); outline: none; transform: translateY(-1px); } .login-submit:focus-visible { box-shadow: 0 0 0 3px rgba(123, 228, 149, 0.6); } .login-submit .bi { margin-right: 6px; } .login-meta { margin-top: 14px; text-align: center; font-size: 13px; color: var(--splash-text-muted); } .login-meta a { color: #c8e7ff; text-decoration: none; font-weight: 600; } .login-meta a:hover { text-decoration: underline; } .login-step2-head { font-size: 13px; color: var(--splash-text-muted); text-align: center; margin: 14px 0 6px; } .login-step2-head strong { color: #fff; } /* Alerts inside login card */ .login-alert { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; } .login-alert.danger { background: rgba(239, 68, 68, 0.18); color: #fecaca; border: 1px solid rgba(239,68,68,0.3); } .login-alert.success { background: rgba(34, 197, 94, 0.18); color: #bbf7d0; border: 1px solid rgba(34,197,94,0.3); } /* ══════════════════════════════════════════════════════ 6. Language toggle (compact pills) ══════════════════════════════════════════════════════ */ .splash-lang { position: absolute; bottom: clamp(12px, 3vh, 20px); left: 50%; transform: translateX(-50%); display: inline-flex; background: rgba(0,0,0,0.55); border-radius: var(--splash-radius-pill); padding: 4px; z-index: 3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .splash-lang button { background: transparent; border: 0; color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; padding: 6px 12px; border-radius: var(--splash-radius-pill); cursor: pointer; min-height: 32px; min-width: 44px; } .splash-lang button.active, .splash-lang button:hover { background: rgba(255,255,255,0.16); color: #fff; } /* ══════════════════════════════════════════════════════ 7. Info modal (vanilla dialog, no bootstrap dependency) ══════════════════════════════════════════════════════ */ .splash-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1050; padding: 20px; } .splash-modal-backdrop.open { display: flex; } .splash-modal { background: #fff; color: #111; border-radius: 18px; padding: 24px 24px 20px; max-width: 360px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.45); font-family: var(--splash-font-body); } .splash-modal h3 { font-family: var(--splash-font-display); font-size: 26px; letter-spacing: 0.04em; margin: 0 0 8px; } .splash-modal p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; } .splash-modal .modal-actions { display: flex; gap: 10px; margin-top: 14px; } .splash-modal .modal-actions .btn { flex: 1; padding: 10px 12px; border-radius: var(--splash-radius-pill); font-family: var(--splash-font-display); font-size: 16px; letter-spacing: 0.04em; border: 0; cursor: pointer; text-align: center; text-decoration: none; } .splash-modal .btn.primary { background: var(--splash-dark); color: #fff; } .splash-modal .btn.ghost { background: rgba(0,0,0,0.06); color: #111; } /* Event-code input (inside "New Guest" modal) */ .event-code-input { width: 100%; padding: 12px 16px; margin-top: 12px; border: 1.5px solid rgba(0,0,0,0.15); border-radius: 12px; font-family: var(--splash-font-display); font-size: 20px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .event-code-input:focus { outline: none; border-color: var(--splash-green-strong); box-shadow: 0 0 0 3px rgba(123, 228, 149, 0.4); } /* ══════════════════════════════════════════════════════ 8. Responsive tweaks ══════════════════════════════════════════════════════ */ @media (min-width: 480px) { .action-card .card-title { font-size: 42px; } } @media (max-height: 680px) { .splash-brand { margin-top: 78px; } .splash-brand-mark { width: 64px; height: 64px; } .splash-brand-mark svg { width: 40px; height: 40px; } }