/* ============================================================================= 360 Player App — STYLES One app, two themes. The gets data-theme="darts" | "golf" at login. Palettes come straight from 360's brand kit (brand-kit.md). ============================================================================ */ :root { /* shared spine */ --gold: #C8A44A; --gold-light: #d4b36a; --paper: #F5F3EE; --radius: 16px; --maxw: 480px; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Libre Baskerville", Georgia, serif; --font-label: "DM Mono", ui-monospace, monospace; /* AAI pillars */ --attitude: #4A90D9; --attention: #3DB87A; --intention: #C8A44A; } /* ---- DARTS theme (near-black + gold) ------------------------------------- */ body[data-theme="darts"] { --bg: #0D0D12; --bg-2: #13131A; --card: #17171F; --border: #262630; --text: #F5F3EE; --muted: #9a97a3; --accent: #C8A44A; --accent-soft: rgba(200,164,74,0.14); } /* ---- GOLF theme (deep green + gold) -------------------------------------- */ body[data-theme="golf"] { --bg: #0D0F08; --bg-2: #111A0F; --card: #162010; --border: #1E3020; --text: #EEE8D5; --muted: #8ba086; --accent: #F4C542; --accent-soft: rgba(244,197,66,0.13); --sage: #40916C; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; font-size: 16px; /* keeps content clear of iPhone notch / home bar when installed */ padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; } /* App is a single column, phone-width, centred on desktop. */ #app { max-width: var(--maxw); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; } /* ---- typography ---------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } .label { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .muted { color: var(--muted); } a { color: var(--accent); } /* ---- top bar ------------------------------------------------------------- */ .topbar { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; position: sticky; top: 0; z-index: 10; background: linear-gradient(var(--bg), var(--bg) 70%, transparent); } .topbar .mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--border); font-family: var(--font-label); font-size: 0.62rem; color: var(--accent); letter-spacing: 0.04em; } .topbar .who { flex: 1; min-width: 0; } .topbar .who .name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1; } .topbar .who .sub { font-size: 0.72rem; color: var(--muted); } /* ---- screens / views ----------------------------------------------------- */ .view { flex: 1; padding: 8px 20px 96px; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .view.center { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; } /* ---- cards --------------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; } .card h3 { margin-bottom: 6px; } .card .meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; } .hero { background: radial-gradient(120% 120% at 90% -10%, var(--accent-soft), transparent 55%), var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; } .hero .focus { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; margin: 8px 0 4px; } /* ---- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 18px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent); color: #0c0c10; font-weight: 500; cursor: pointer; text-decoration: none; transition: transform .08s ease, opacity .15s ease; } .btn:active { transform: scale(0.985); } .btn.secondary { background: transparent; color: var(--accent); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn + .btn { margin-top: 10px; } .btn[disabled] { opacity: 0.5; pointer-events: none; } .cta-row { display: flex; gap: 10px; } .cta-row .btn { margin-top: 0; } /* ---- forms --------------------------------------------------------------- */ .form-section { margin-bottom: 22px; } .form-section > .label { display: block; margin-bottom: 10px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.92rem; margin-bottom: 7px; color: var(--text); } .field .req { color: var(--accent); } .field input[type="text"], .field input[type="number"], .field input[type="date"], .field select, .field textarea { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; } .field textarea { min-height: 84px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } /* scale 1–10 */ .scale { display: flex; gap: 6px; flex-wrap: wrap; } .scale button { flex: 1 0 auto; min-width: 34px; padding: 10px 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font-label); cursor: pointer; } .scale button.on { background: var(--accent); color: #0c0c10; border-color: var(--accent); } /* image upload */ .imgfield input[type="file"] { display: none; } .imgfield .drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); cursor: pointer; text-align: center; font-size: 0.85rem; } .imgfield .previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .imgfield .previews .thumb { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); } /* ---- report viewer ------------------------------------------------------- */ .report-body { font-size: 0.98rem; } .report-body h2 { margin: 4px 0 8px; } .report-body h3 { color: var(--accent); margin: 18px 0 6px; } .report-body .lede { color: var(--muted); font-style: italic; margin-bottom: 6px; } .report-body ul { margin: 4px 0 4px 18px; } .report-body li { margin-bottom: 4px; } .report-body .next { margin-top: 16px; padding: 14px; background: var(--accent-soft); border-radius: 10px; } /* ---- pills / status ------------------------------------------------------ */ .pill { display: inline-block; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); } .pill.ready { color: var(--accent); border-color: var(--accent); } /* ---- bottom tab bar ------------------------------------------------------ */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--maxw); display: flex; justify-content: space-around; background: var(--bg-2); border-top: 1px solid var(--border); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 20; } .tabbar button { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.06em; padding: 4px 10px; text-transform: uppercase; } .tabbar button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; } .tabbar button.on { color: var(--accent); } /* ---- misc ---------------------------------------------------------------- */ .list-empty { text-align: center; color: var(--muted); padding: 40px 20px; } .toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); background: var(--accent); color: #0c0c10; padding: 12px 20px; border-radius: 99px; font-family: var(--font-label); font-size: 0.78rem; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: fade .2s ease; } .brandline { text-align: center; font-size: 0.66rem; color: var(--muted); margin-top: 28px; } .back { background: none; border: none; color: var(--accent); font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 4px 0 14px; } /* install hint banner */ .install-hint { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 0.82rem; color: var(--text); margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; } .install-hint .x { margin-left: auto; color: var(--muted); cursor: pointer; background: none; border: none; font-size: 1rem; } /* --- My Progress screen --- */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .stat-card { background: var(--card, #16161f); border: 1px solid var(--line, #2a2a35); border-radius: 12px; padding: 14px 10px; text-align: center; } .stat-num { font-size: 1.5rem; font-weight: 800; color: var(--gold, #D4AF37); line-height: 1.1; } .stat-lbl { font-size: 0.66rem; color: var(--muted, #9a9aa7); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; } /* small button (course cards etc.) */ .btn.sm { padding: 7px 12px; font-size: 0.8rem; width: auto; display: inline-block; } /* --- Brand: login / install hero + AI ORCA credit --- */ .brand-hero { text-align: center; margin: 6px 0 16px; } .brand-globe { width: 116px; height: 116px; display: block; margin: 0 auto 14px; filter: drop-shadow(0 6px 22px rgba(212,175,55,0.18)); } .brand-title { font-size: 1.34rem; font-weight: 800; letter-spacing: .01em; } .brand-tag { color: var(--muted, #9a9aa7); font-size: .9rem; margin-top: 6px; line-height: 1.45; } .brand-sports { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .brand-sports img { height: 64px; width: auto; } .brand-sports .dot { color: var(--gold, #D4AF37); font-size: 1.4rem; opacity: .55; } .aiorca-credit { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 24px 0 6px; opacity: .72; } .aiorca-credit span { font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted, #9a9aa7); } .aiorca-credit img { height: 30px; width: auto; }