/* ============================================ FOOTYFACEOFF — BASE / RESET v2 Full brand system applied ============================================ */ @import './tokens.css'; /* Google Fonts loaded in — referenced here for clarity */ /* Bungee — screen titles (H1) */ /* Bangers — headings, CTAs, team names */ /* Helvetica Neue Condensed — labels, body */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; -webkit-text-size-adjust: 100%; height: 100%; } body { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-white); background-color: var(--color-bg); /* Stadium bg image — persists across all screens */ background-image: var(--bg-image); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; } input, textarea, select { font-family: inherit; outline: none; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } /* ============================================ BACKGROUND OVERLAY Applied to #app so the bg shows through all screens consistently ============================================ */ #app { max-width: var(--max-width); margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; /* Semi-transparent overlay over the bg image */ background-color: var(--bg-overlay); } /* ============================================ SCREENS ============================================ */ .screen { /* HIDE — this must beat any display rule on child classes */ display: none !important; position: absolute; inset: 0; /* top/right/bottom/left all 0 = exact container fit */ z-index: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: transparent; } .screen.active { display: flex !important; flex-direction: column; } .screen-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 80px 24px 100px; } .screen-content--no-bottom-bar { padding-bottom: 48px; } /* ============================================ TOP BAR ============================================ */ .top-bar { display: flex; align-items: center; justify-content: space-between; height: var(--top-bar-h); padding: 0 var(--space-4); background: rgba(0, 73, 7, 0.9); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; flex-shrink: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .top-bar__logo { font-family: var(--font-display); font-size: var(--font-size-lg); text-transform: uppercase; color: var(--color-white); letter-spacing: 0.5px; } .top-bar__logo span { color: var(--color-yellow); } .top-bar__action { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-badge); color: var(--color-white); font-size: 20px; } .top-bar__action:active { background: rgba(255,255,255,0.1); } /* ============================================ TYPOGRAPHY — 4-LEVEL HIERARCHY (strict) H1: Bungee 32px uppercase — one per screen H2: Bangers 22px uppercase — subtitle only Body: Helvetica 16px sentence case Label: Helvetica condensed 12px uppercase ============================================ */ /* H1 — Bungee, 32px */ .title-h1 { font-family: var(--font-display); font-size: 32px; font-weight: 400; text-transform: uppercase; line-height: 1.1; color: var(--color-white); letter-spacing: 0.02em; } /* H2 — Bangers, 22px */ .title-h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; color: var(--color-yellow); } /* Body copy — Helvetica, 16px, sentence case */ .body-copy { font-family: var(--font-body); font-size: 16px; font-weight: var(--font-weight-regular); line-height: 1.6; color: var(--color-text-muted); } /* Label — condensed Helvetica, 12px, uppercase */ .label-condensed { font-family: var(--font-condensed); font-stretch: condensed; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-green-primary); } /* Utility classes */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-base { font-size: var(--font-size-base); } .text-md { font-size: var(--font-size-md); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .font-black { font-weight: var(--font-weight-black); } .font-display { font-family: var(--font-display); text-transform: uppercase; } .font-heading { font-family: var(--font-heading); text-transform: uppercase; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.05em; } .tracking-wider { letter-spacing: 0.1em; } .text-muted { color: var(--color-text-muted); } .text-dim { color: var(--color-text-dim); } .text-green { color: var(--color-green-primary); } .text-yellow { color: var(--color-yellow); } .text-magenta { color: var(--color-magenta); } .text-danger { color: var(--color-danger); } .text-white { color: var(--color-white); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* ============================================ BUTTONS — Pill shape, NO exceptions ============================================ */ /* Primary CTA — yellow fill */ .btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; border-radius: var(--radius-pill); cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast); border: none; outline: none; } .btn:active { transform: scale(0.97); } .btn--cta { background: var(--color-yellow); color: var(--color-yellow-text); font-family: var(--font-heading); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 32px; } .btn--cta:active { background: var(--color-cta-pressed); box-shadow: var(--shadow-glow-yellow); } /* Secondary CTA — yellow outline */ .btn--outline { background: transparent; color: var(--color-yellow); border: 2px solid var(--color-yellow); font-family: var(--font-heading); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 32px; } .btn--outline:active { background: rgba(234,255,0,0.08); } /* Ghost / text */ .btn--ghost { background: transparent; color: var(--color-white); font-family: var(--font-body); font-size: 14px; text-decoration: underline; padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); } .btn--ghost:active { opacity: 0.7; } /* Green primary */ .btn--primary { background: var(--color-green-primary); color: var(--color-white); font-family: var(--font-heading); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 32px; } .btn--primary:active { background: var(--color-green-muted); } /* Magenta */ .btn--magenta { background: var(--color-magenta); color: var(--color-white); font-family: var(--font-heading); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 32px; } .btn--magenta:active { background: var(--color-magenta-dark); } /* Danger outline */ .btn--danger { background: transparent; color: var(--color-red); border: 2px solid var(--color-red); font-family: var(--font-heading); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 28px; } /* Size modifiers */ .btn--sm { font-size: 16px; padding: 12px 20px; } .btn--lg { font-size: 24px; padding: 20px 32px; } .btn:disabled { opacity: 0.4; pointer-events: none; } .btn__spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.2); border-top-color: rgba(0,0,0,0.7); border-radius: 50%; animation: spin 0.7s linear infinite; display: none; flex-shrink: 0; } .btn.loading .btn__spinner { display: block; } .btn.loading .btn__label { opacity: 0.6; } /* ============================================ SOCIAL BUTTONS ============================================ */ .btn-social { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: 14px var(--space-4); background: rgba(0, 92, 9, 0.6); border: 2px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-white); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .btn-social:active { border-color: var(--color-border-active); background: rgba(0,92,9,0.8); } .btn-social__icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } /* ============================================ FORM ELEMENTS ============================================ */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-family: var(--font-condensed); font-stretch: condensed; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-green-primary); margin-bottom: 2px; } .form-input { width: 100%; padding: 14px 16px; background: var(--color-bg-input); border: 2px solid var(--color-border); border-radius: var(--radius-input); color: var(--color-white); font-family: var(--font-body); font-size: 16px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input::placeholder { color: var(--color-text-dim); } .form-input:focus { border-color: var(--color-border-active); box-shadow: var(--shadow-glow-green); background: var(--color-bg-input); } .form-input.error { border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(255,61,61,0.2); } .form-hint { font-size: var(--font-size-xs); color: var(--color-text-dim); line-height: 1.4; } .form-error { font-size: var(--font-size-xs); color: var(--color-red); line-height: 1.4; } /* ============================================ TOGGLE SWITCH — fully custom, no browser default ============================================ */ .toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } /* Hide actual checkbox */ .toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* The visible track */ .toggle__track { width: 56px; height: 30px; background: var(--color-bg-input); border: 2px solid var(--color-border); border-radius: var(--radius-pill); position: relative; display: inline-flex; align-items: center; transition: background var(--transition-base), border-color var(--transition-base); cursor: pointer; } /* The knob */ .toggle__track::after { content: ''; position: absolute; width: 22px; height: 22px; background: var(--color-green-primary); border-radius: 50%; left: 2px; transition: left var(--transition-base), background var(--transition-base); } /* ON state */ .toggle input:checked + .toggle__track { background: var(--color-green-primary); border-color: var(--color-border-active); } .toggle input:checked + .toggle__track::after { background: var(--color-yellow); left: 30px; } /* Disabled */ .toggle input:disabled + .toggle__track { opacity: 0.5; cursor: not-allowed; } /* ============================================ CARDS ============================================ */ .card { background: rgba(0, 92, 9, 0.7); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .card--elevated { background: rgba(0, 73, 7, 0.85); box-shadow: var(--shadow-md); } /* ============================================ DIVIDER ============================================ */ .divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); font-family: var(--font-body); } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); opacity: 0.5; } /* ============================================ BADGE ============================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-badge); font-family: var(--font-condensed); font-stretch: condensed; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .badge--green { background: rgba(0,146,15,0.25); color: var(--color-border-active); border: 1px solid var(--color-green-primary); } .badge--yellow { background: rgba(234,255,0,0.15); color: var(--color-yellow); border: 1px solid rgba(234,255,0,0.4); } .badge--magenta { background: rgba(255,0,170,0.15); color: var(--color-magenta); border: 1px solid rgba(255,0,170,0.4); } .badge--muted { background: rgba(0,73,7,0.5); color: var(--color-text-muted); border: 1px solid var(--color-border); } .badge--cta { background: rgba(234,255,0,0.15); color: var(--color-yellow); border: 1px solid rgba(234,255,0,0.4); } /* ============================================ TOAST / SNACKBAR ============================================ */ #toast-container { position: fixed; bottom: calc(var(--bottom-bar-h) + var(--space-4)); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-2); width: calc(100% - var(--space-8)); max-width: 380px; pointer-events: none; } .toast { background: rgba(0, 73, 7, 0.95); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-white); box-shadow: var(--shadow-lg); animation: toastIn var(--transition-base) ease forwards; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .toast--success { border-color: var(--color-border-active); } .toast--error { border-color: var(--color-red); } .toast--warning { border-color: var(--color-orange); } .toast.removing { animation: toastOut var(--transition-base) ease forwards; } /* ============================================ MODAL / OVERLAY ============================================ */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 100; display: none; align-items: flex-end; justify-content: center; } .overlay.active { display: flex; } .modal { background: rgba(0, 73, 7, 0.97); border-radius: var(--radius-card) var(--radius-card) 0 0; border: 1px solid var(--color-border); border-bottom: none; width: 100%; max-width: var(--max-width); padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); max-height: 90vh; overflow-y: auto; animation: slideUp var(--transition-slow) ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .modal__handle { width: 36px; height: 4px; background: var(--color-border); border-radius: 2px; margin: 0 auto var(--space-5); } /* ============================================ LOADING SPINNER ============================================ */ .spinner { width: 28px; height: 28px; border: 3px solid rgba(0,146,15,0.3); border-top-color: var(--color-yellow); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner--sm { width: 16px; height: 16px; border-width: 2px; } /* ============================================ OTP / PIN INPUT ROW ============================================ */ .otp-input-row { display: flex; gap: var(--space-2); justify-content: center; } .otp-input-row input { width: 46px; height: 58px; text-align: center; font-family: var(--font-display); font-size: var(--font-size-xl); background: var(--color-bg-input); border: 2px solid var(--color-border); border-radius: var(--radius-input); color: var(--color-yellow); caret-color: var(--color-yellow); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .otp-input-row input:focus { border-color: var(--color-border-active); box-shadow: var(--shadow-glow-green); } /* ============================================ PASSWORD STRENGTH BARS ============================================ */ .password-strength { display: flex; gap: 4px; margin-top: 8px; } .password-strength__bar { flex: 1; height: 4px; background: var(--color-bg-input); border-radius: 2px; border: 1px solid var(--color-border); transition: background var(--transition-base); } .password-strength__bar.active-weak { background: var(--color-red); border-color: var(--color-red); } .password-strength__bar.active-fair { background: var(--color-orange); border-color: var(--color-orange); } .password-strength__bar.active-strong { background: var(--color-border-active); border-color: var(--color-border-active); } /* ============================================ SAFE AREA ============================================ */ .safe-top { padding-top: env(safe-area-inset-top); } .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } /* ============================================ ANIMATIONS ============================================ */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes ballBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(18deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }