/* src/style.css — Gaffer Time custom styles */ /* tokens.css is imported in index.html BEFORE this file so --ink-slate / --chalk / --gold are available here. */ :root { /* Pitch ground now uses the warm-slate canonical token. */ --pitch-bg: var(--ink-slate); /* Legacy glow tokens — route through the new gold axis. */ --gold-glow: rgba(197, 138, 48, 0.35); --threat: var(--oxblood); --threat-glow: rgba(138, 47, 42, 0.4); } * { box-sizing: border-box; } body { font-family: var(--font-body); } ::selection { background: rgba(197, 138, 48, 0.25); } /* Display / wordmark / H1 — Clash Display 700 (brand refresh 2026). */ .font-black, h1.font-black, h2.font-black, [class*="font-black"] { font-family: var(--font-display); } /* Data / stats / mono readouts */ .font-mono { font-family: var(--font-mono); } /* ── PITCH ── */ .pitch-container { background-color: var(--pitch-bg); background-image: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(20,70,20,0.45) 0%, transparent 100%), linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; position: relative; aspect-ratio: 3/4; border: 2px solid #1a2e1a; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 100px rgba(0,0,0,0.85), 0 25px 80px rgba(0,0,0,0.4); } /* ── PLAYER NODES ── */ .player-node { position: absolute; transform: translate(-50%,-50%); transition: top 1.1s cubic-bezier(0.34,1.56,0.64,1), left 1.1s cubic-bezier(0.34,1.56,0.64,1), width 0.25s ease, height 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 7px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 8px; border-width: 2px; border-style: solid; cursor: pointer; user-select: none; touch-action: manipulation; /* faster tap response on mobile */ } @keyframes playerBounce { 0% { transform: translate(-50%,-50%) scale(1.45); } 55% { transform: translate(-50%,-50%) scale(0.87); } 78% { transform: translate(-50%,-50%) scale(1.08); } 100% { transform: translate(-50%,-50%) scale(1); } } .bouncing { animation: playerBounce 0.52s cubic-bezier(0.22,1,0.36,1) forwards !important; } @keyframes flashFade { 0% { opacity:1 } 100% { opacity:0 } } #trailCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; border-radius:18px; } /* TWO TEAMS. TWO SHAPES. */ .p-friendly { width:30px; height:30px; border-radius:50%!important; z-index:20; background:#1c1917; border-color:rgba(197,138,48,0.55); color:#fafaf9; } .p-friendly:hover { transform:translate(-50%,-50%) scale(1.3); z-index:30; filter:brightness(1.4); } .r-gk,.r-def,.r-cdm,.r-cam,.r-fwd { background:#1c1917; border-color:rgba(197,138,48,0.55); color:#fafaf9; } .p-opponent { width:22px; height:22px; border-radius:4px!important; z-index:10; cursor:pointer; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.28); color:#a8a29e; } .p-opponent:hover { transform:translate(-50%,-50%) scale(1.3); z-index:30; filter:brightness(1.5); } .o-gk,.o-def,.o-mid,.o-cam,.o-fwd { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.28); color:#a8a29e; } /* Active states */ .p-active { width:36px!important; height:36px!important; border-radius:50%!important; background:var(--gt-gold)!important; border-color:var(--gt-gold)!important; color:#1c1917!important; z-index:40!important; font-size:8px!important; animation:pulseGold 2.5s ease-in-out infinite; box-shadow:0 0 0 4px rgba(143,90,26,0.2); } .o-active { background:rgba(239,68,68,0.12)!important; border-color:#ef4444!important; color:#fca5a5!important; animation:pulseRed 2s ease-in-out infinite; } @keyframes pulseGold { 0%,100%{ box-shadow:0 0 0 4px rgba(143,90,26,0.2),0 0 12px var(--gold-glow); } 50%{ box-shadow:0 0 0 7px rgba(143,90,26,0.15),0 0 32px var(--gold-glow); } } @keyframes pulseRed { 0%,100%{ box-shadow:0 0 0 3px rgba(239,68,68,0.15),0 0 10px var(--threat-glow); } 50%{ box-shadow:0 0 0 6px rgba(239,68,68,0.1),0 0 28px var(--threat-glow); } } /* ── PHASE PILLS ── */ .phase-pill { flex:1; padding:6px 4px; border-radius:10px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; transition:background-color 0.45s ease-out, color 0.45s ease-out, border-color 0.45s ease-out; border:none; cursor:pointer; color:#78716c; background:transparent; touch-action:manipulation; min-height:44px; } .phase-pill.active-build { background:rgba(143,90,26,0.10); color:#a8a29e; } .phase-pill.active-attack { background:rgba(143,90,26,0.25); color:var(--gt-gold); } .phase-pill.active-defend { background:rgba(28,25,23,0.95); color:#78716c; } .phase-pill.active-transition { background:rgba(143,90,26,0.18); color:var(--gt-gold-fill); } .phase-pill:not([class*="active"]):hover { background:rgba(255,255,255,0.08); color:#d6d3d1; } /* ── FORMATION TABS ── */ .form-tab { flex:1; padding:8px; border-radius:10px; font-size:10px; font-weight:800; letter-spacing:0.05em; transition:background-color 0.2s, color 0.2s, box-shadow 0.2s; cursor:pointer; border:none; text-transform:uppercase; color:#78716c; background:transparent; touch-action:manipulation; min-height:44px; } .form-tab.active { background:white; color:#1c1917; box-shadow:0 2px 8px rgba(0,0,0,0.12); } .form-tab:not(.active):hover { background:rgba(255,255,255,0.15); color:#d6d3d1; } /* ── PHILOSOPHY BUTTONS ── */ .phil-btn { flex:0 0 auto; padding:7px 10px; border-radius:10px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; border:none; cursor:pointer; transition:background-color 0.2s, color 0.2s; color:#6b7280; background:transparent; touch-action:manipulation; min-height:44px; white-space:nowrap; } .phil-btn.active-klopp { background:#7f1d1d; color:#fca5a5; } .phil-btn.active-guardiola { background:#292524; color:#d6d3d1; } .phil-btn.active-cruyff { background:#78350f; color:#e8c88a; } .phil-btn.active-mourinho { background:#1f2937; color:#9ca3af; } .phil-btn.active-ancelotti { background:#064e3b; color:#a7f3d0; } .phil-btn:not([class*="active"]):hover { background:rgba(255,255,255,0.07); color:#d6d3d1; } .phil-scroll { overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .phil-scroll::-webkit-scrollbar { display:none; } /* ── INTEL CARDS ── */ .intel-self { background:linear-gradient(135deg,#6f4414 0%,#5c3910 100%); } .intel-threat { background:linear-gradient(135deg,#dc2626 0%,#991b1b 100%); } .intel-klopp { background:linear-gradient(135deg,#991b1b 0%,#7f1d1d 100%); } .intel-guardiola { background:linear-gradient(135deg,#1e40af 0%,#0c4a6e 100%); } .intel-cruyff { background:linear-gradient(135deg,#5c3910 0%,#78350f 100%); } .intel-mourinho { background:linear-gradient(135deg,#374151 0%,#1f2937 100%); } .intel-ancelotti { background:linear-gradient(135deg,#047857 0%,#064e3b 100%); } .intel-card { position:relative; overflow:hidden; } .intel-card::after { content:attr(data-watermark); position:absolute; bottom:-10px; right:-4px; font-size:5rem; font-weight:900; color:rgba(0,0,0,0.08); line-height:1; pointer-events:none; } /* ── EXPLORE VIEW — light-mode tactical board (B×E hybrid) ── */ /* Formation tabs on parchment bg */ .explore-view .form-tab { color: #3d2e1a; } .explore-view .form-tab.active { background: var(--ink-slate); color: var(--chalk); box-shadow: 0 2px 10px rgba(0,0,0,0.18); } .explore-view .form-tab:not(.active):hover { background: rgba(0,0,0,0.06); color: var(--ink-slate); } /* Phase pills: border-only active style */ .explore-view .phase-pill { color: #7a6f5c; } .explore-view .phase-pill.active-build { background: rgba(143,90,26,0.08); border: 2px solid var(--gt-leather); color: var(--gt-ink); } .explore-view .phase-pill.active-attack { background: rgba(143,90,26,0.12); border: 2px solid var(--gt-leather); color: var(--gt-leather); } .explore-view .phase-pill.active-defend { background: rgba(51,65,85,0.07); border: 2px solid #334155; color: #334155; } .explore-view .phase-pill.active-transition { background: rgba(124,45,163,0.07); border: 2px solid #7c2da3; color: #7c2da3; } .explore-view .phase-pill:not([class*="active"]):hover { background: rgba(0,0,0,0.05); color: #3d2e1a; } /* Philosophy buttons: light tints on parchment bg */ .explore-view .phil-btn { color: #8c7e60; } .explore-view .phil-btn.active-klopp { background: rgba(220,38,38,0.08); border-left: 3px solid #dc2626; color: #991b1b; } .explore-view .phil-btn.active-guardiola { background: rgba(37,99,235,0.08); border-left: 3px solid #2563eb; color: #1d4ed8; } .explore-view .phil-btn.active-cruyff { background: rgba(217,119,6,0.10); border-left: 3px solid #6f4414; color: #4a2d0c; } .explore-view .phil-btn.active-mourinho { background: rgba(51,65,85,0.08); border-left: 3px solid #334155; color: #1e293b; } .explore-view .phil-btn.active-ancelotti { background: rgba(5,150,105,0.08); border-left: 3px solid #059669; color: #065f46; } .explore-view .phil-btn:not([class*="active"]):hover { background: rgba(0,0,0,0.05); color: #3d2e1a; } /* Intel cards: white paper with left accent border */ .explore-view .intel-card { background: var(--gt-paper); box-shadow: 0 2px 16px rgba(0,0,0,0.07); border-left: 4px solid var(--gt-leather); } .explore-view .intel-self { background: var(--gt-paper); border-left: 4px solid var(--gt-leather); } .explore-view .intel-threat { background: #ffffff; border-left: 4px solid #ef4444; } .explore-view .intel-klopp { background: #ffffff; border-left: 4px solid #dc2626; } .explore-view .intel-guardiola { background: #ffffff; border-left: 4px solid #2563eb; } .explore-view .intel-cruyff { background: #ffffff; border-left: 4px solid #6f4414; } .explore-view .intel-mourinho { background: #ffffff; border-left: 4px solid #334155; } .explore-view .intel-ancelotti { background: #ffffff; border-left: 4px solid #059669; } .explore-view .intel-card::after { color: rgba(0,0,0,0.04); } /* Intel card text — override white-on-dark Tailwind classes */ .explore-view #intelMode, .explore-view #intelPosition, .explore-view #philLensHeader { color: #8c7e60; } .explore-view #intelTag { background: rgba(0,0,0,0.06); color: #7a6f5c; } .explore-view #intelTitle, .explore-view #philLensBody { color: var(--ink-slate); } .explore-view #intelTitle { font-family: var(--gt-font-display); font-style: italic; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.05; font-variation-settings: "SOFT" 100, "opsz" 144; } .explore-view #intelBody, .explore-view #threatCounter, .explore-view #matchupBody { color: #3d2e1a; } .explore-view #matchupLabel { color: #8c7e60; } .explore-view #threatExtras, .explore-view #matchupExtras { border-top-color: rgba(0,0,0,0.08); } /* Player nodes: leather fill for friendly, paper + leather ring for active */ .explore-view .p-friendly { background: var(--gt-leather); border-color: var(--gt-leather); color: var(--gt-parchment); } .explore-view .r-gk,.explore-view .r-def,.explore-view .r-cdm,.explore-view .r-cam,.explore-view .r-fwd { background: var(--gt-leather); border-color: var(--gt-leather); color: var(--gt-parchment); } .explore-view .p-active { background: var(--gt-paper) !important; border-color: var(--gt-leather) !important; border-width: 3px !important; color: var(--gt-ink) !important; box-shadow: 0 2px 14px rgba(143,90,26,0.45), 0 0 0 4px rgba(143,90,26,0.15) !important; animation: exploreRoleGlow 2.5s ease-in-out infinite !important; } @keyframes exploreRoleGlow { 0%,100% { box-shadow: 0 2px 14px rgba(143,90,26,0.45), 0 0 0 4px rgba(143,90,26,0.15); } 50% { box-shadow: 0 2px 22px rgba(143,90,26,0.65), 0 0 0 7px rgba(143,90,26,0.22), 0 0 28px rgba(143,90,26,0.3); } } .explore-view .p-opponent { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.22); color: #666; } /* Pitch: brighter lines on dark green surface */ .explore-view .pitch-container { border: 3px solid rgba(255,255,255,0.28); box-shadow: inset 0 0 80px rgba(0,0,0,0.5), 0 4px 24px rgba(0,0,0,0.22); } /* ── MISC ── */ .stat-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; font-size:9px; font-weight:700; } .chart-wrap { position:relative; height:175px; width:100%; } /* Tablet: slightly taller pitch */ @media(max-width:1023px){ .pitch-container{ aspect-ratio:4/5; max-height:60vh; } } /* ── MOBILE ───────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Pitch: let it fill the screen width naturally — no height cap */ .pitch-container { aspect-ratio: 3/4; max-height: none; border-radius: 14px; } /* Bigger tap targets for player nodes — 32px min for thumbs */ .p-friendly { width: 32px !important; height: 32px !important; font-size: 7px !important; } .p-opponent { width: 24px !important; height: 24px !important; font-size: 6px !important; } .p-active { width: 40px !important; height: 40px !important; font-size: 8px !important; } /* Phase pills: taller, readable text */ .phase-pill { min-height: 44px; font-size: 10px; padding: 8px 4px; } /* Formation + phil tabs: taller */ .form-tab, .phil-btn { min-height: 44px; font-size: 11px; } /* Intel cards: comfortable reading size */ .intel-card { font-size: 14px; } /* Voice command chips: bigger tap zone */ .vocal-chip { min-height: 44px; padding: 12px 14px !important; font-size: 13px !important; } } /* ── TOAST ── */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; z-index: 9999; pointer-events: none; background: #1c1917; color: #d6d3d1; font-size: 11px; font-weight: 700; padding: 10px 18px; border-radius: 999px; border: 1px solid #292524; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ── AUTH MODAL ── */ .auth-overlay { transition: opacity 0.3s ease; } .auth-overlay.hidden { opacity:0; pointer-events:none; } /* ── NAV LINKS ── */ .nav-link { padding: 6px 12px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #78716c; background: transparent; border: none; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; touch-action: manipulation; min-height: 44px; display: inline-flex; align-items: center; } .nav-link:hover { color: #e7e5e4; background: rgba(255,255,255,0.07); } /* ── SUPER-ADMIN PILL ── * Gold-on-slate ADMIN chip in the top nav. Shown ONLY when * _profile.role_admin === 'super_admin' (see setNavAdmin in main.js). * Exists to answer the "am I actually in admin mode?" question at a glance. * Clicking it jumps to /#/admin/users. Breathing glow draws the eye without * being loud enough to distract from the primary nav. */ .gt-admin-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--gold); color: var(--ink-slate); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid rgba(20, 17, 14, 0.25); box-shadow: 0 0 0 0 rgba(197, 138, 48, 0.55); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.6s ease; animation: gt-admin-pulse 2.8s ease-in-out infinite; min-height: 32px; touch-action: manipulation; } .gt-admin-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(197, 138, 48, 0.35); } .gt-admin-pill:active { transform: translateY(0); } .gt-admin-pill svg { flex-shrink: 0; } @keyframes gt-admin-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(197, 138, 48, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(197, 138, 48, 0); } } /* ── VIEW FADE ANIMATION ── */ @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } .animate-fade, #app > * { animation: fadeIn 0.25s ease forwards; } /* ── LOADING SPINNER ── */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 0.7s linear infinite; } /* ── POSITION NOTE CARD transitions ── */ .note-area { transition: opacity 0.2s ease; } /* ── SAFE AREA (notch / home bar) ── */ .pb-safe { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }