/* ============================================================================= 360 Player App — STYLES The gets data-theme="darts" at login. Palettes come straight from 360's brand kit (brand-kit.md). ============================================================================ */ /* Task reminder — shows the player's current task above each AAI rating question on the Monthly check-in, so they rate against their actual task. */ .field.task-reminder { margin-bottom: 10px; } .task-reminder-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; } .task-reminder-pill { display: inline-block; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .task-reminder-name { margin-top: 5px; font-weight: 600; font-size: 0.98rem; color: var(--text); } .task-reminder-rule { margin-top: 3px; font-style: italic; color: var(--accent); font-size: 0.86rem; } .task-reminder-what { margin-top: 6px; color: var(--muted); font-size: 0.82rem; line-height: 1.45; } /* Static inline form helper note. */ .field.form-note { margin-bottom: 12px; } .field.form-note p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--border); color: var(--muted); font-size: 0.84rem; line-height: 1.5; } :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 (Masters green + gold) ----------------------------------- */ /* Deep pine base, Masters-green accent for buttons/active states, antique gold preserved as premium trim (win cards etc. read var(--gold)) to match the all-gold 360 Golf badge. */ body[data-theme="golf"] { --bg: #0A1611; --bg-2: #0E1E16; --card: #12271C; --border: #2C4B3A; --text: #F5F3EE; --muted: #9DAAA0; /* Gold is the ACCENT (buttons, active states, highlights) so there's a clear differentiator on the green base — Masters green + gold. Green lives in the bg/cards/borders; gold drives the CTAs. */ --accent: #C8A44A; --accent-soft: rgba(200,164,74,0.16); --green: #1B7A52; --gold: #C8A44A; --gold-light: #d4b36a; } * { 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; } /* "Recommended by your coach" featured Skool post — gentle gold accent, themed per sport via the theme-aware --gold variable. */ .card.featured-post { border-color: var(--gold); background: radial-gradient(120% 120% at 90% -10%, var(--accent-soft), transparent 55%), var(--card); } .card.featured-post:active { opacity: .92; } .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; -webkit-appearance: none; appearance: none; 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; } /* Horizontal button row: .btn defaults to width:100%, which overflows a flex row (a flex:none button keeps 100% and shoves its sibling off-screen). This resets the buttons to share the row evenly and kills the stacked-sibling top margin. */ .btn-row { display: flex; gap: 8px; margin-top: 16px; } .btn-row .btn { flex: 1 1 0; width: auto; margin-top: 0; min-width: 0; } .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; } /* One question, one block (2026-07-11). With everything tappable, a step's questions ran together into a single wall — label, chips, label, chips — and a player couldn't see where one ended and the next began. A hairline plus real breathing room separates them without adding a box around every question (boxes would make a 5-step form feel heavier, not lighter). The rule carries a short accent tip at the left and fades out to the right, so it reads as a divider, not a table border. */ .form-section > .field + .field { margin-top: 20px; padding-top: 20px; position: relative; } .form-section > .field + .field::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0, var(--border) 14%, var(--border) 55%, transparent 100%); opacity: .55; } /* Notes and reminders aren't questions — they don't earn a divider. */ .form-section > .field.form-note + .field::before, .form-section > .field.task-reminder + .field::before, .form-section > .field + .field.form-note::before, .form-section > .field + .field.task-reminder::before { display: none; } .form-section > .field + .field.form-note, .form-section > .field + .field.task-reminder { padding-top: 0; } /* The question itself anchors its block — slightly heavier than the answer copy under it, so the eye lands on "what am I being asked" first. */ .field label { display: block; font-size: 0.92rem; font-weight: 600; 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); } /* helper line under a field label */ .field-hint { font-size: 0.8rem; color: var(--muted, #9a9aa7); margin: -2px 0 8px; line-height: 1.4; } /* utility: hide a conditional field (showIf) / collapsible panel */ .hide { display: none !important; } /* scale 1–10 — legacy button grid (kept for any non-slider scale) */ .scale:not(.slider-scale) { display: flex; gap: 6px; flex-wrap: wrap; } .scale:not(.slider-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:not(.slider-scale) button.on { background: var(--accent); color: #0c0c10; border-color: var(--accent); } /* scale 1–10 — styled slider with a big live value (matches the mockup) */ .slider-scale { display: block; } .slider-scale .scaleval { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--accent); text-align: center; line-height: 1; } .slider-scale .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; margin: 12px 0 6px; cursor: pointer; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--border) var(--p, 50%)); } .slider-scale .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .slider-scale .slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; } .slider-scale .scale-ends { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } /* number stepper (+/-) */ .stepper { display: flex; align-items: center; gap: 10px; } .stepper .stepper-btn { width: 42px; height: 42px; flex: none; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; } .stepper .stepper-btn:active { transform: scale(0.94); } .stepper input[type="number"] { text-align: center; -moz-appearance: textfield; } .stepper input[type="number"]::-webkit-outer-spin-button, .stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* guided multi-step onboarding: progress bar + step chip + nav */ .stepchip { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 2px 0 8px; } .prog { display: flex; gap: 6px; margin: 4px 0 4px; } .prog .seg { flex: 1; height: 4px; border-radius: 999px; background: var(--border); transition: background .25s ease; } .prog .seg.on { background: var(--accent); } .step-nav { display: flex; gap: 10px; margin-top: 18px; } .step-nav .btn { margin-top: 0; } .step-nav .step-back { flex: 0 0 36%; } .step-nav .step-next { flex: 1; } /* check-in intro microcopy (mockup one-liner above the form) */ .checkin-intro { margin: 0 0 18px; font-family: var(--font-display); font-size: 1.06rem; line-height: 1.35; color: var(--text); } /* Quick-answer chips (Lock In + post-comp). These are the primary way a player answers now, so they have to LOOK tappable. The old style was transparent + muted text + a faint hairline — it read as a label, not a button, and on a phone in a venue it disappeared into the card. Unselected = raised surface, readable text, real border, 44px tap target. Selected = filled accent + tick, so "tapped" is obvious at a glance. */ .chipsfield .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chipsfield .chip { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.02em; font-weight: 600; line-height: 1.2; min-height: 44px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--chip-border, rgba(255,255,255,.22)); background: var(--chip-bg, rgba(255,255,255,.07)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.25); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .chipsfield .chip:hover { border-color: var(--accent); background: rgba(255,255,255,.11); } .chipsfield .chip:active { transform: scale(0.96); } .chipsfield .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .chipsfield .chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 2px 8px rgba(0,0,0,.28); } /* The tick is the confirmation — colour alone shouldn't carry the state (colour-blind players, bright venue lighting, cheap screens). */ .chipsfield .chip.on::before { content: "✓"; margin-right: 6px; font-weight: 700; } /* confirming submit state (set after a successful submit) */ .btn.submit-checkin.done { background: var(--bg-2); color: var(--muted); border: 1px solid var(--border); cursor: default; } .btn.submit-checkin.done .t { color: #3DB87A; } /* image upload */ .imgfield input[type="file"] { display: none; } .imgfield .drop { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); cursor: pointer; text-align: center; font-size: 0.85rem; transition: border-color .15s ease, background .15s ease; } .imgfield .drop:hover { border-color: var(--accent); background: var(--accent-soft); } .imgfield .drop .drop-ico { font-size: 1.5rem; } .imgfield .drop .drop-cta { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .imgfield .drop .drop-hint { font-size: 0.78rem; color: var(--muted); } .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; } /* ---- report viewer: header --------------------------------------------- */ .report-head { margin: 2px 0 14px; } .report-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .report-title { font-size: 1.55rem; margin: 0; } .report-sub { font-size: 0.78rem; color: var(--muted); margin-top: 5px; } .pill.type { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .pill.rstat-new { color: var(--accent); border-color: var(--accent); } /* report viewer: player-safe snapshot card */ .snapshot { background: radial-gradient(120% 120% at 90% -10%, var(--accent-soft), transparent 55%), var(--card); } .snapshot .label { display: block; margin-bottom: 4px; } .snap-aai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .snap-aai-pill { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 8px; text-align: center; } .snap-aai-name { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; } .snap-aai-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin-top: 4px; } .snap-aai-val .snap-aai-max { font-size: 0.66rem; color: var(--muted); font-weight: 400; margin-left: 1px; } .snap-tasks { margin-top: 14px; } .snap-mini-label { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .snap-task { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-size: 0.92rem; } .snap-task .snap-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; } .snap-focus { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; margin-top: 8px; } .snap-foot { font-size: 0.72rem; color: var(--muted); margin-top: 14px; } /* report viewer: read-receipt card */ .got-it .btn { max-width: 260px; margin: 0 auto; } .got-it-done { display: inline-flex; gap: 12px; align-items: center; text-align: left; justify-content: center; } .got-it-tick { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--accent); color: #0c0c10; font-size: 1.05rem; font-weight: 700; } /* report viewer: prev/next navigation */ .report-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .report-nav .rnav-btn { margin-top: 0; flex: 1; } .report-nav-pos { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; flex: none; min-width: 64px; text-align: center; } /* report viewer: loading skeleton */ .sk { background: linear-gradient(90deg, var(--bg-2) 25%, var(--border) 50%, var(--bg-2) 75%); background-size: 200% 100%; border-radius: 8px; animation: sk-shimmer 1.3s infinite; } .sk-line { height: 12px; margin-bottom: 10px; } .sk-title { height: 26px; margin-bottom: 12px; } .sk-block { height: 180px; border-radius: 12px; } .skeleton-head { margin: 2px 0 14px; } @keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- 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; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-family: var(--font-label); font-size: 0.56rem; letter-spacing: 0.04em; padding: 4px 2px; text-transform: uppercase; white-space: nowrap; } .tabbar button svg { width: 21px; height: 21px; 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; } /* --- AAI dashboard card (three pillars) --- */ .aai-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .aai-pill { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; } .aai-pill .aai-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } .aai-name { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; } .aai-val { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1.1; margin-top: 4px; } .aai-val .aai-max { font-size: 0.7rem; color: var(--muted); font-weight: 400; margin-left: 1px; } .aai-trend { display: inline-block; font-family: var(--font-label); font-size: 0.62rem; margin-top: 4px; } .aai-trend.up { color: var(--attention); } .aai-trend.down { color: #d9694a; } .aai-trend.flat { color: var(--muted); } /* AAI chart legend */ .aai-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; } .aai-legend span { display: inline-flex; align-items: center; font-size: 0.72rem; color: var(--muted); } .aai-legend .aai-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } /* Foundation gate: caption under a locked check-in button */ .lock-cap { font-size: 0.74rem; text-align: center; margin: 6px 0 12px; } /* Chart containment — EVERY chart canvas lives in a fixed-height box so Chart.js (responsive + maintainAspectRatio:false) can't enter the grow-forever loop. */ .chart-box { position: relative; width: 100%; height: 210px; } .chart-box.sm { height: 168px; } .chart-box > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* small button (course cards etc.) */ .btn.sm { padding: 7px 12px; font-size: 0.8rem; width: auto; display: inline-block; } /* ---- Updates feed -------------------------------------------------------- */ .upd-card .upd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .upd-tag { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); } .upd-tag.all { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .upd-tag.darts { color: var(--accent); border-color: var(--accent); } .upd-card .upd-date { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--muted); margin-left: auto; } .upd-card .upd-title { margin: 0 0 6px; } .upd-card .upd-body { font-size: 0.92rem; color: var(--text); margin: 0; line-height: 1.6; } .upd-card .upd-body .upd-p { margin: 0 0 0.7em; } .upd-card .upd-body .upd-p:last-child { margin-bottom: 0; } /* Collapsed update tiles — title + short teaser, expand with Read more. Keeps the feed scannable so one long post never buries the rest. */ .upd-card .upd-teaser { font-size: 0.9rem; color: var(--muted); line-height: 1.5; margin: 4px 0 0; } .upd-card .upd-full { display: none; } .upd-card.open .upd-full { display: block; margin-top: 10px; } .upd-card.open .upd-teaser { display: none; } .upd-more { margin-top: 10px; background: none; border: 0; padding: 4px 0 0; cursor: pointer; font-family: inherit; font-size: 0.86rem; font-weight: 600; color: var(--gold, #C8A44A); display: inline-flex; align-items: center; gap: 5px; } .upd-more::after { content: "▾"; font-size: 0.9em; line-height: 1; } .upd-card.open .upd-more::after { content: "▴"; } .upd-card .upd-body h3 { font-size: 0.98rem; margin: 0.9em 0 0.3em; } .upd-card .upd-body ul, .upd-card .upd-body ol { margin: 0.2em 0 0.7em; padding-left: 1.2em; } .upd-card .upd-body li { margin: 0.15em 0; } /* channels: technical feed (#1) + Head Coach Corner (#5) */ .upd-chan { font-family: var(--font-label); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); } .upd-chan-technical { color: var(--accent); border-color: var(--accent); } .upd-chan-head_coach { color: var(--gold); border-color: var(--gold); background: var(--accent-soft, transparent); } .upd-img { width: 100%; border-radius: 10px; margin: 10px 0 2px; display: block; } .upd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .upd-chip { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.04em; padding: 6px 13px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); } .upd-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, transparent); font-weight: 600; } /* pinned update (sticky/highlighted, e.g. the how-to intro) */ .upd-card.upd-pinned { border-color: var(--gold); background: var(--accent-soft, var(--card)); } .upd-pin { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--gold); color: var(--gold); } .upd-watch { width: auto; display: inline-flex; align-items: center; } /* "watch the app intro" header entry on the Updates screen */ .upd-watch-again { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent-soft, var(--card)); border: 1px solid var(--gold); color: var(--gold); border-radius: var(--radius); padding: 13px 16px; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; margin-bottom: 14px; -webkit-appearance: none; appearance: none; transition: transform .08s ease; } .upd-watch-again:active { transform: scale(.99); } /* responsive 16:9 video embed (updates feed + intro modal) */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* aspect-ratio fallback for older webviews */ @supports not (aspect-ratio: 1 / 1) { .video-embed { height: 0; padding-bottom: 56.25%; aspect-ratio: auto; } } /* ---- My Reports list ----------------------------------------------------- */ .rep-card .rep-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .rep-card .rep-title { margin: 0 0 10px; } .rep-card .rep-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rep-card .rep-foot .meta { margin-top: 0; } .rep-card .rep-cta { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); flex: none; } .rep-card .rep-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex: none; } .rep-card .rep-dot.new { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .rep-card .rep-dot.read { background: var(--border); } .rep-card .rep-dot.pending { background: var(--muted); animation: rep-pulse 1.6s ease-in-out infinite; } .rep-card.is-new { border-color: var(--accent); } .rep-card.rep-pending { opacity: 0.92; } @keyframes rep-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ---- Profile ------------------------------------------------------------- */ .prof-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .prof-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .prof-identity .prof-id-meta { min-width: 0; } .prof-identity .prof-id-meta .meta { margin-top: 2px; word-break: break-word; } .prof-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } /* --- 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; } /* ---- check-in chooser / hub --------------------------------------------- */ .chooser { display: flex; flex-direction: column; gap: 12px; } .choose-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; color: inherit; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; transition: transform .08s ease, border-color .15s ease; } .choose-card:active { transform: scale(.99); } button.choose-card:hover { border-color: var(--accent); } .choose-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); } .choose-ico svg { width: 24px; height: 24px; stroke: var(--accent, #C8A44A); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* inline icons inside buttons / labels keep the text colour */ .btn svg, .winshare-btn svg, .label svg, h2 svg, h3 svg { width: 18px; height: 18px; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .gameday-btn svg { width: 20px; height: 20px; vertical-align: -4px; } .empty-ico svg { width: 40px; height: 40px; stroke: var(--accent, #C8A44A); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 6px; } .home-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; margin-bottom: 14px; } .social-row { display: flex; gap: 8px; flex-wrap: wrap; } .social-btn { flex: 1; min-width: 90px; text-align: center; text-decoration: none; color: var(--text, #F5F3EE); background: var(--bg-2, #13131A); border: 1px solid var(--accent, #C8A44A); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .86rem; } .social-btn:hover { background: var(--accent-soft, rgba(200,164,74,.14)); } .parent-nudge { border: 1px solid var(--accent, #C8A44A); background: var(--accent-soft, rgba(200,164,74,.12)); } .choose-body { flex: 1; min-width: 0; } .choose-title { font-weight: 700; font-size: 1.02rem; } .choose-sub { color: var(--muted); font-size: .82rem; margin-top: 3px; line-height: 1.4; } .choose-go { flex: none; color: var(--accent); font-size: 1.5rem; font-weight: 700; opacity: .8; } .choose-card.done, .choose-card.locked { opacity: .62; cursor: default; } .choose-card.done .choose-ico { color: var(--accent); } /* ---- modal overlay + first-time welcome --------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 22px; animation: fadein .18s ease; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--gold); border-radius: 18px; padding: 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: center; /* A flex-centred child that is taller than the overlay overflows BOTH ends and there is nothing to scroll — the buttons end up below the fold, unreachable. That is what happened to the What's-new modal on a phone. Every modal now scrolls inside itself, so the CTAs are always tappable. dvh (not vh) because iOS Safari's toolbar makes 100vh taller than the visible viewport. */ max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .welcome-globe { width: 52px; height: 52px; margin: 0 auto 10px; display: block; filter: drop-shadow(0 4px 16px rgba(212,175,55,.22)); } .welcome-h { font-size: 1.3rem; font-weight: 800; } .welcome-sub { color: var(--muted); font-size: .9rem; margin: 8px 0 18px; line-height: 1.45; } .welcome-steps { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 16px; } .welcome-step { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .welcome-step .ws-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: var(--accent-soft, var(--card)); color: var(--gold); border: 1px solid var(--gold); } .welcome-step strong { font-size: .96rem; } .welcome-step .muted { font-size: .78rem; } .welcome-foot { color: var(--muted); font-size: .82rem; margin: 4px 0 16px; } .modal .btn + .btn { margin-top: 8px; } /* how-to intro video modal (a touch wider so the 16:9 video breathes) */ .modal.intro-modal { max-width: 460px; } .intro-eyebrow { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .modal.intro-modal .video-embed { margin-top: 14px; } /* ---- What's new (the July 2026 monthly-autofill change) ------------------ Reuses the dark modal shell + .intro-eyebrow. Left-aligned body copy: this one is READ, not glanced at — it's explaining that a form they used to fill in has gone away and something else does the work now. Centred text at this length is a wall. */ .modal.whatsnew-modal { max-width: 470px; text-align: left; } .modal.whatsnew-modal .welcome-h, .modal.whatsnew-modal .welcome-sub { text-align: left; } .wn-step { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .wn-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--accent-soft, var(--card)); color: var(--gold); border: 1px solid var(--gold); margin-top: 1px; } .wn-h { font-size: .95rem; font-weight: 700; margin: 0 0 3px; } .wn-p { color: var(--muted); font-size: .84rem; line-height: 1.45; margin: 0 0 6px; } .wn-p:last-child { margin-bottom: 0; } .wn-p b { color: var(--text); font-weight: 600; } /* The honest catch. Said out loud, not buried — a player who logs nothing and gets a thin monthly must know WHY, or they'll decide the app is broken. */ .wn-warn { background: rgba(212,175,55,.07); border-left: 2px solid var(--gold); padding: 7px 10px; border-radius: 0 6px 6px 0; margin-top: 8px; } .wn-deal { text-align: center; font-size: .88rem; color: var(--muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); } .wn-deal b { color: var(--gold); font-weight: 700; } /* The modal scrolls (see .modal). Pin the CTAs to the bottom of it so a player who hasn't scrolled to the end can still act — an unread prompt they can't dismiss is worse than no prompt. The negative margins + padding let it sit flush over the modal's own 22px/26px padding without a see-through gutter. */ .wn-actions { position: sticky; bottom: -26px; z-index: 1; margin: 14px -22px -26px; padding: 12px 22px 26px; background: linear-gradient(180deg, rgba(0,0,0,0), var(--card) 30%, var(--card)); } .wn-actions .btn + .btn { margin-top: 8px; } /* ---- player card (black/gold collectible) ------------------------------- */ .pcard { position: relative; width: 100%; max-width: 360px; margin: 0 auto; min-height: 440px; background: radial-gradient(120% 90% at 50% 12%, rgba(255,255,255,.04), transparent 60%), linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid rgba(200,164,74,.30); border-radius: 14px; padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: center; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.4); } .pcard::after { /* inner gold frame */ content: ""; position: absolute; inset: 12px; border: 1px solid rgba(200,164,74,.22); border-radius: 8px; pointer-events: none; } .pcard-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold); z-index: 2; } .pcard-corner.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; } .pcard-corner.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; } .pcard-corner.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; } .pcard-corner.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; } .pcard-top { position: absolute; top: 26px; left: 26px; right: 26px; display: flex; justify-content: space-between; z-index: 3; } .pcard-age { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; line-height: 1; } .pcard-age-n { font-family: var(--font-display, serif); font-size: 1.4rem; font-weight: 700; color: var(--cream, #f5f3ee); } .pcard-age-l { font-family: var(--font-label, monospace); font-size: .5rem; letter-spacing: .14em; color: var(--gold); margin-top: 2px; } .pcard-flag { display: flex; flex-direction: column; align-items: center; gap: 3px; } .pcard-flag-ico { font-size: 1.3rem; } .pcard-flag-img { width: 30px; height: 20px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(200,164,74,.5); box-shadow: 0 1px 3px rgba(0,0,0,.4); display: block; } .pcard-flag-c { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .12em; color: var(--gold); } .pcard-photo { margin-top: 18px; width: 138px; height: 138px; flex: none; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(200,164,74,.08); overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #20202a, var(--bg-2)); } .pcard-photo img { width: 100%; height: 100%; object-fit: cover; } .pcard-photo-ph { font-family: var(--font-label, monospace); font-size: .56rem; letter-spacing: .18em; color: var(--muted); } .pcard-name { font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 700; margin-top: 14px; text-align: center; color: var(--cream, #f5f3ee); } .pcard-status { font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 6px; } .pcard-hl-h { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; position: relative; } .pcard-hl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; width: 100%; } .pcard-hl-i { font-size: .76rem; line-height: 1.3; color: var(--cream, #ece8df); display: flex; gap: 6px; } .pcard-hl-i .dia { color: var(--gold); font-size: .6rem; margin-top: 3px; flex: none; } .pcard-headline { margin-top: auto; padding-top: 14px; font-family: var(--font-display, serif); font-size: .92rem; font-weight: 600; color: var(--gold); text-align: center; letter-spacing: .02em; } .pcard-foot { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(200,164,74,.18); } .pcard-foot-l { font-family: var(--font-label, monospace); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pcard-tag { text-align: right; } .pcard-tag-l { display: block; font-family: var(--font-label, monospace); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .pcard-tag-v { font-family: var(--font-display, serif); font-style: italic; font-size: .9rem; color: var(--gold); } .pcard-photo-ph, .pcard-hl-i { text-align: left; } /* ---- tasks: tappable rows on home + the detail screen ------------------- */ .card-explain { font-size: .82rem; margin: 6px 0 4px; line-height: 1.4; } .tasks-card .task-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--border); padding: 14px 0 13px; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } .tasks-card .task-row:first-of-type { border-top: 0; } .task-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; align-self: flex-start; background: var(--accent); } .task-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .task-pillar { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--accent); } .task-name { font-weight: 600; font-size: .98rem; } .task-rule { color: var(--muted); font-size: .82rem; font-style: italic; } .task-go { flex: none; color: var(--accent); font-size: 1.4rem; font-weight: 700; opacity: .75; align-self: center; } .task-tag { display: inline-block; font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft, var(--bg-2)); color: var(--accent); border: 1px solid var(--accent); margin-bottom: 10px; } .task-example { display: flex; gap: 11px; align-items: flex-start; background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; } .task-example-ico { flex: none; font-size: 1.05rem; } .task-example p { font-size: .92rem; line-height: 1.5; margin: 0; } .task-search { margin-top: 10px; } /* ---- reports: collapsible sections -------------------------------------- */ .rep-pending-wrap { margin-bottom: 16px; } .rep-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; overflow: hidden; } .rep-group > .rep-group-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 16px; font-family: var(--font-label, monospace); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .rep-group > .rep-group-sum::-webkit-details-marker { display: none; } .rep-group-title { flex: 1; } .rep-group-count { background: var(--accent-soft, var(--bg-2)); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 9px; font-size: .7rem; } .rep-group-chev { transition: transform .2s ease; font-size: 1rem; } .rep-group[open] .rep-group-chev { transform: rotate(180deg); } .rep-group-sub { color: var(--muted); font-size: .8rem; margin: 0 16px 10px; line-height: 1.4; } .rep-group .rep-card { margin: 0 12px 12px; } .rep-group .rep-card:first-of-type { margin-top: 2px; } /* ---- goal-setting quote (profile) --------------------------------------- */ .goal-quote { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); border-left: 3px solid var(--accent); } .goal-quote-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .goal-quote-v { font-family: var(--font-display, serif); font-size: 1.12rem; line-height: 1.4; font-style: italic; margin: 6px 0 0; color: var(--text, #f5f3ee); } /* ---- check-in streak: live running banner ------------------------------- */ .streak-banner { overflow: hidden; white-space: nowrap; margin: 14px 0; padding: 9px 0; border-top: 1px solid rgba(200,164,74,.25); border-bottom: 1px solid rgba(200,164,74,.25); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .streak-track { display: inline-block; white-space: nowrap; will-change: transform; animation: streakScroll 22s linear infinite; } .streak-seg { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.4rem; font-size: .82rem; color: var(--gold-light, #d4b36a); } .streak-seg strong { color: var(--text, #fff); font-weight: 700; } @keyframes streakScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .streak-track { animation: none; } } /* ---- check-in streak chip (legacy) -------------------------------------- */ .streak-chip { display: flex; align-items: center; gap: 11px; background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; } .streak-flame { font-size: 1.2rem; flex: none; } .streak-body { font-size: .86rem; color: var(--text); } .streak-body strong { color: var(--accent); } .streak-dot { color: var(--muted); margin: 0 7px; } /* ---- nudge banners (calm, supportive, dismissable) ---------------------- */ .nudge-stack { display: flex; flex-direction: column; gap: 10px; } .nudge-stack:empty { display: none; } .nudge { display: flex; gap: 12px; align-items: flex-start; background: radial-gradient(120% 120% at 100% -20%, var(--accent-soft), transparent 60%), var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; padding: 13px 14px; margin-bottom: 14px; } .nudge-body { flex: 1; min-width: 0; } .nudge-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--text); } .nudge-text { font-size: .86rem; color: var(--muted); line-height: 1.5; margin-top: 3px; } .nudge-link { display: inline-block; margin-top: 9px; font-family: var(--font-label); font-size: .76rem; letter-spacing: .04em; color: var(--accent); text-decoration: none; } .nudge-link:hover { text-decoration: underline; } .nudge-x { flex: none; background: none; border: 0; color: var(--muted); font-size: .95rem; cursor: pointer; padding: 2px 2px; line-height: 1; align-self: flex-start; } /* ---- consistency / accountability strip (supportive, never punitive) ---- */ .consist-rows { margin-top: 12px; display: flex; flex-direction: column; } .consist-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .consist-row:first-child { border-top: 0; padding-top: 4px; } .consist-ico { flex: none; font-size: 1rem; width: 1.2rem; text-align: center; } .consist-l { font-size: .86rem; color: var(--muted); } .consist-v { margin-left: auto; font-weight: 600; font-size: .88rem; color: var(--text); text-align: right; } .consist-v.good { color: var(--attention); } .consist-streak { margin-top: 10px; font-size: .84rem; color: var(--text); } .consist-foot { font-size: .74rem; margin-top: 10px; line-height: 1.45; } /* ---- per-task trend + "on this since" (on the home task rows) ------------ */ .task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 5px; } .task-since { font-family: var(--font-label, monospace); font-size: .66rem; letter-spacing: .03em; color: var(--muted); } .task-trend { display: inline-flex; align-items: center; gap: 4px; } .task-trend-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border); font-family: var(--font-label, monospace); font-size: .72rem; color: var(--muted); line-height: 1; } .task-trend-chip.now { background: var(--accent-soft, var(--bg-2)); border-color: var(--accent); color: var(--accent); font-weight: 600; } .task-trend-arrow { color: var(--muted); font-size: .72rem; opacity: .7; } /* ---- game day ----------------------------------------------------------- */ .gameday-btn { margin-top: 12px; background: transparent; color: var(--accent); border: 1px solid var(--accent); } .gd-head { margin-bottom: 18px; } .gd-eyebrow { font-family: var(--font-label, monospace); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .gd-title { font-size: 1.9rem; margin-top: 4px; } .gd-cue { background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; padding: 18px 20px; } .gd-cue-l { font-family: var(--font-label, monospace); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .gd-cue-v { font-family: var(--font-display, serif); font-size: 1.5rem; line-height: 1.25; margin: 8px 0 0; color: var(--text, #f5f3ee); } .gd-task { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; margin-bottom: 10px; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; } .gd-task-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; align-self: flex-start; margin-top: 5px; } .gd-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gd-task-name { font-weight: 600; font-size: .98rem; } .gd-task-rule { color: var(--muted); font-size: .82rem; font-style: italic; } .gd-goal { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); text-align: center; } .gd-goal-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .gd-goal-v { font-family: var(--font-display, serif); font-style: italic; font-size: 1.2rem; line-height: 1.4; margin: 8px 0 0; color: var(--text, #f5f3ee); } /* ---- task reflection ---------------------------------------------------- */ .reflect-status { font-size: .9rem; line-height: 1.45; margin-bottom: 12px; color: var(--text); } .reflect-status strong { color: var(--accent); } .reflect-note { width: 100%; margin-bottom: 12px; } /* ---- progress: since you started ---------------------------------------- */ .since-card { } .since-sub { font-size: .82rem; margin: 6px 0 14px; } .since-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .since-row:first-of-type { border-top: 0; } .since-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .since-name { flex: 1; font-weight: 600; font-size: .94rem; } .since-vals { color: var(--muted); font-size: .92rem; } .since-vals strong { color: var(--text); } .since-arrowto { opacity: .6; } .since-up { color: var(--attention); font-weight: 600; font-size: .86rem; } .since-down { color: #d98a8a; font-weight: 600; font-size: .86rem; } .since-flat { color: var(--muted); font-size: .86rem; } .since-best { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .since-best-v { font-family: var(--font-display, serif); font-size: 1.8rem; font-weight: 700; color: var(--accent); } .since-best-l { color: var(--muted); font-size: .82rem; } .since-insight { margin-top: 12px; font-size: .9rem; line-height: 1.5; color: var(--text); } .since-insight strong { color: var(--accent); } /* ---- My Progress: personal-best tiles (private, own data only) ---------- */ .pb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .pb-tile { background: var(--card, #16161f); border: 1px solid var(--line, #2a2a35); border-radius: 12px; padding: 12px 10px; text-align: center; } .pb-val { font-family: var(--font-display, serif); font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1.1; } .pb-lbl { color: var(--text); font-size: .82rem; margin-top: 3px; } .pb-when { color: var(--muted); font-size: .7rem; margin-top: 2px; } @media (min-width: 520px) { .pb-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- share a win -------------------------------------------------------- */ .winshare-btn { margin-top: 8px; } .wincard { position: relative; background: linear-gradient(180deg, var(--card), var(--bg-2)); border: 1px solid var(--accent); border-radius: 14px; padding: 30px 26px 24px; text-align: center; overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,.4); min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .win-eyebrow { font-family: var(--font-label, monospace); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .win-title { font-family: var(--font-display, serif); font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--cream, #f5f3ee); } .win-line { font-family: var(--font-display, serif); font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,.82); margin-top: 12px; line-height: 1.4; } .win-foot { width: 100%; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; } .win-name { font-family: var(--font-display, serif); font-weight: 700; font-size: 1.15rem; color: var(--cream, #f5f3ee); } .win-brand { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } /* ---- updates: tab badge + new dot --------------------------------------- */ .tabbar button { position: relative; } .tab-badge { position: absolute; top: 4px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #d9534f; color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } .upd-newdot { color: #d9534f; font-size: .6rem; margin-left: 2px; } .upd-card.upd-new { border-color: rgba(200,164,74,.4); } /* ---- home: smart next-step banner --------------------------------------- */ .nextstep { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; margin-bottom: 14px; background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--accent); border-radius: var(--radius); padding: 15px 16px; } .nextstep-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: var(--card); border: 1px solid var(--border); } .nextstep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .nextstep-t { font-weight: 700; font-size: .98rem; color: var(--text); } .nextstep-s { color: var(--muted); font-size: .82rem; } .nextstep-go { flex: none; color: var(--accent); font-size: 1.5rem; font-weight: 700; } /* ---- help / FAQ --------------------------------------------------------- */ .faq { border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 10px; overflow: hidden; } .faq > .faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; font-weight: 600; font-size: .96rem; } .faq > .faq-q::-webkit-details-marker { display: none; } .faq-chev { color: var(--accent); transition: transform .2s ease; } .faq[open] .faq-chev { transform: rotate(180deg); } .faq-a { padding: 0 16px 15px; font-size: .92rem; line-height: 1.55; color: var(--text); } .faq-a p { margin: 0 0 10px; } .faq-a p:last-child { margin-bottom: 0; } .faq-list { margin: 0 0 10px; padding-left: 18px; } .faq-list li { margin-bottom: 6px; line-height: 1.45; } /* ---- accessibility ------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- photo cropper ------------------------------------------------------ */ .modal.cropper { max-width: 340px; text-align: center; } .crop-stage { position: relative; width: 260px; height: 260px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: #111; touch-action: none; cursor: grab; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px var(--accent-soft, rgba(200,164,74,.12)); } .crop-stage:active { cursor: grabbing; } .crop-stage img { position: absolute; top: 0; left: 0; user-select: none; -webkit-user-drag: none; max-width: none; } .crop-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .crop-zoom { width: 100%; margin: 0 0 16px; } .task-title { font-size: 1.5rem; line-height: 1.15; margin-bottom: 14px; } .task-cue { display: flex; flex-direction: column; gap: 3px; background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; } .task-cue-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .task-cue-v { font-family: var(--font-display, serif); font-size: 1.2rem; font-weight: 600; color: var(--text, #fff); } .task-cue-tip { font-size: .78rem; color: var(--muted); } .task-sec { margin-top: 22px; } .task-sec-h { font-size: 1.04rem; margin-bottom: 2px; } .task-sec-explain { color: var(--muted); font-size: .8rem; margin: 0 0 10px; line-height: 1.4; } .task-p { font-size: .95rem; line-height: 1.55; } .task-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: step; } .task-steps li { position: relative; padding: 0 0 0 38px; margin-bottom: 12px; font-size: .94rem; line-height: 1.45; counter-increment: step; } .task-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-label, monospace); font-size: .82rem; font-weight: 600; background: var(--accent-soft, var(--bg-2)); color: var(--accent); border: 1px solid var(--accent); } /* resource (Skool) preview cards */ .res-card { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color .15s ease; } .res-card:hover { border-color: var(--accent); } .res-ico { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: .9rem; color: var(--accent); background: var(--accent-soft, var(--bg-2)); border: 1px solid var(--border); } .res-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .res-title { font-weight: 600; font-size: .92rem; line-height: 1.3; } .res-preview { color: var(--muted); font-size: .8rem; line-height: 1.4; } .res-go { flex: none; align-self: flex-start; font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .06em; color: var(--accent); white-space: nowrap; margin-top: 2px; } /* monthly feedback prompt */ .fb-q { margin: 14px 0 6px; } .fb-l { display:block; font-size:.9rem; margin-bottom:8px; opacity:.95; } .fb-scale { display:flex; gap:8px; } .fb-dot { flex:1; padding:10px 0; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:transparent; color:#9a9aa7; font-weight:700; cursor:pointer; font-size:1rem; } .fb-dot.on { background: var(--accent, #C8A44A); color:#0D0D12; border-color: var(--accent, #C8A44A); } /* --- Milestones (voice-note #4 scaffold) — player win/milestone timeline --- */ .ms-timeline { margin-top: 4px; } .ms-group { margin-bottom: 22px; } .ms-month { font-family: var(--font-label); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9a9aa7); margin: 0 0 10px 4px; } .ms-item { display: flex; align-items: flex-start; gap: 12px; position: relative; background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; } .ms-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border-radius: 10px; background: rgba(255,255,255,.05); } .ms-body { flex: 1; min-width: 0; } .ms-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ms-kind { font-family: var(--font-label); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #C8A44A); } .ms-date { font-size: .72rem; color: var(--muted, #9a9aa7); flex: none; } .ms-title { font-weight: 700; margin-top: 2px; line-height: 1.3; word-break: break-word; } .ms-note { font-size: .86rem; color: var(--muted, #9a9aa7); margin-top: 4px; line-height: 1.4; word-break: break-word; } .ms-del { flex: none; background: none; border: none; color: var(--muted, #9a9aa7); font-size: .9rem; cursor: pointer; padding: 2px 4px; line-height: 1; opacity: .6; } .ms-del:hover { opacity: 1; color: #d66; } .ms-kind-row { display: flex; gap: 8px; } .ms-kind-pick { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--muted, #9a9aa7); font-weight: 600; cursor: pointer; font-size: .82rem; } .ms-kind-pick.on { background: var(--accent, #C8A44A); color: #0D0D12; border-color: var(--accent, #C8A44A); } /* --- Recognition from coach (voice-note #7 scaffold) — coach-awarded kudos, private to the player. Read-only card on the Profile; a touch of gold so it reads as a special, coach-given moment (vs the neutral milestone timeline). */ .reco-list { margin-top: 4px; } .reco-item { display: flex; align-items: flex-start; gap: 12px; background: linear-gradient(180deg, rgba(200,164,74,.10), rgba(200,164,74,.03)); border: 1px solid rgba(200,164,74,.30); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; } .reco-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border-radius: 10px; background: rgba(200,164,74,.12); } .reco-body { flex: 1; min-width: 0; } .reco-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .reco-kind { font-family: var(--font-label); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #C8A44A); } .reco-date { font-size: .72rem; color: var(--muted, #9a9aa7); flex: none; } .reco-title { font-weight: 700; margin-top: 2px; line-height: 1.3; word-break: break-word; } .reco-note { font-size: .86rem; color: var(--muted, #9a9aa7); margin-top: 4px; line-height: 1.4; word-break: break-word; } .reco-by { font-size: .76rem; color: var(--muted, #9a9aa7); margin-top: 6px; font-style: italic; } /* --- post Q&A (player -> coach only, voice-note #2 scaffold) ------------- */ /* Small + collapsible so it never clutters the feed. Shows the player's OWN questions + the coach's answers; never another player's (RLS-enforced). */ .pq { margin-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,.1)); padding-top: 10px; } .pq-toggle { background: none; border: none; padding: 4px 0; cursor: pointer; color: var(--accent, #C8A44A); font-weight: 600; font-size: .82rem; font-family: var(--font-body); } .pq-toggle.on { opacity: .75; } .pq-panel { margin-top: 8px; } .pq-input { width: 100%; box-sizing: border-box; background: var(--bg-2, #13131A); border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 10px; color: var(--text, #F5F3EE); font-family: var(--font-body); font-size: .92rem; padding: 9px 11px; resize: vertical; } .pq-send { margin-top: 8px; font-size: .85rem; padding: 9px 14px; } .pq-thread { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .pq-item { background: var(--accent-soft, rgba(200,164,74,.1)); border-radius: 10px; padding: 9px 11px; } .pq-q { font-weight: 600; font-size: .9rem; color: var(--text, #F5F3EE); } .pq-a { margin-top: 6px; font-size: .88rem; color: var(--text, #F5F3EE); line-height: 1.45; } .pq-a-lbl { display: inline-block; font-family: var(--font-label, monospace); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #C8A44A); margin-right: 8px; } .pq-pending { margin-top: 6px; font-size: .8rem; color: var(--muted, #9a9aa7); font-style: italic; } /* --- leaderboard (voice-note #6 scaffold) -------------------------------- */ .lb-consent-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lb-toggle { flex: none; width: 46px; height: 26px; border-radius: 999px; border: none; background: var(--bg-2, #13131A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; cursor: pointer; transition: background .18s ease; padding: 0; } .lb-toggle.on { background: var(--accent, #C8A44A); box-shadow: none; } .lb-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .lb-toggle.on .lb-knob { transform: translateX(20px); } .lb-empty { text-align: center; } .lb-board { padding: 6px 0; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); } .lb-row:last-child { border-bottom: none; } .lb-row.me { background: var(--accent-soft, rgba(200,164,74,.14)); border-radius: 10px; } .lb-rank { flex: none; width: 30px; text-align: center; font-weight: 800; font-size: 1.02rem; color: var(--gold, #C8A44A); } .lb-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-you { font-family: var(--font-label, monospace); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent, #C8A44A); border: 1px solid var(--accent, #C8A44A); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } .lb-pts { flex: none; font-weight: 800; font-size: 1.05rem; color: var(--text, #F5F3EE); } .lb-pts span { font-weight: 600; font-size: .68rem; color: var(--muted, #9a9aa7); margin-left: 3px; } /* --- skill challenges (voice-note #7 scaffold) --------------------------- */ .ch-card { margin-bottom: 12px; } .ch-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ch-period { flex: none; font-family: var(--font-label, monospace); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9a9aa7); } .ch-cta { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ch-in { font-size: .78rem; color: var(--accent, #C8A44A); font-weight: 600; } /* --- coaching area: coach profiles + content library -------------------- */ /* Coaches tab = three specialists, and the screen is theirs (2026-07-11). Stuart came off this tab, so what's left is a short list that used to sit squashed at the top of an empty screen. Give each coach room: a bigger photo, a bio that actually gets read, and cards that spread down the page instead of huddling. */ .co-list { display: flex; flex-direction: column; gap: 12px; } .co-card { display: flex; align-items: center; gap: 15px; background: var(--card, #17171F); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 17px 15px; } .co-photo, .co-avatar { flex: none; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; } .co-avatar { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; color: var(--bg, #0D0D12); background: var(--accent, #C8A44A); } .co-meta { flex: 1; min-width: 0; } .co-name { font-weight: 700; } .co-role { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #C8A44A); border: 1px solid var(--accent, #C8A44A); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } .co-spec { font-size: .82rem; color: var(--accent, #C8A44A); margin-top: 3px; } .co-bio { font-size: .84rem; color: var(--muted, #9a9aa7); margin-top: 4px; line-height: 1.45; } .lib-item { display: flex; align-items: center; gap: 12px; } .lib-by { display: inline-block; font-size: .72rem; color: var(--muted, #9a9aa7); margin-top: 6px; font-style: italic; } .lib-search-wrap { position: relative; margin-bottom: 12px; } .lib-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted, #9a9aa7); fill: none; stroke-width: 1.7; } .lib-search { width: 100%; box-sizing: border-box; background: var(--bg-2, #13131A); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: var(--text, #F5F3EE); font-family: var(--font-body); font-size: .92rem; padding: 11px 12px 11px 38px; } .lib-group { margin-bottom: 16px; } .lib-group-h { font-family: var(--font-label, monospace); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent, #C8A44A); margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; } .lib-group-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,164,74,.35), transparent 85%); } /* themed module tiles (library sections) — darts-board cover + brand accents */ .lib-tile { display: block; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)), var(--card, #17171F); transition: transform .12s ease, border-color .12s ease; } .lib-tile + .lib-tile { margin-top: 10px; } .lib-tile:active { transform: scale(.99); border-color: rgba(200,164,74,.4); } .lib-tile-cover { width: 100%; aspect-ratio: 16 / 9; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); background: radial-gradient(circle at 50% 42%, rgba(200,164,74,.30), rgba(200,164,74,0) 58%), #0c0c12; } .lib-tile-cover::before { content: ""; position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(200,164,74,.35); box-shadow: 0 0 0 7px rgba(200,164,74,.07), inset 0 0 0 6px rgba(200,164,74,.10); } .lib-tile-cover::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #C8A44A); opacity: .9; } .lib-tile-num { position: relative; z-index: 1; font-family: var(--font-display, serif); font-size: 1.5rem; font-weight: 600; color: var(--gold-light, #d4b36a); text-shadow: 0 1px 6px rgba(0,0,0,.6); } .lib-tile-body { min-width: 0; padding: 14px 14px 13px; } .lib-tile-title { font-family: var(--font-display, serif); font-size: 1.16rem; font-weight: 600; margin: 0 0 3px; line-height: 1.15; } .lib-tile-desc { color: var(--muted, #9a9aa7); font-size: .84rem; line-height: 1.45; margin: 0; } .lib-tile-meta { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; } .lib-tile-count { color: var(--accent, #C8A44A); border: 1px solid rgba(200,164,74,.4); border-radius: 6px; padding: 2px 7px; } .lib-tile-go { color: var(--muted, #9a9aa7); margin-left: auto; } .lib-tile-soon { color: #c79a4f; border: 1px solid rgba(199,154,79,.4); border-radius: 6px; padding: 2px 7px; background: rgba(199,154,79,.08); } .lib-tile.is-soon { opacity: .82; } .lib-tile.is-soon .lib-tile-cover { filter: grayscale(.4) brightness(.8); } .lib-tile[data-accent="1"] .lib-tile-cover { background: radial-gradient(circle at 50% 42%, rgba(74,144,217,.28), rgba(74,144,217,0) 58%), #0c0c12; } .lib-tile[data-accent="1"] .lib-tile-cover::before { border-color: rgba(74,144,217,.4); box-shadow: 0 0 0 7px rgba(74,144,217,.07), inset 0 0 0 6px rgba(74,144,217,.10); } .lib-tile[data-accent="1"] .lib-tile-cover::after { background: #4A90D9; } .lib-tile[data-accent="2"] .lib-tile-cover { background: radial-gradient(circle at 50% 42%, rgba(61,184,122,.26), rgba(61,184,122,0) 58%), #0c0c12; } .lib-tile[data-accent="2"] .lib-tile-cover::before { border-color: rgba(61,184,122,.4); box-shadow: 0 0 0 7px rgba(61,184,122,.07), inset 0 0 0 6px rgba(61,184,122,.10); } .lib-tile[data-accent="2"] .lib-tile-cover::after { background: #3DB87A; } .lib-tile[data-accent="3"] .lib-tile-cover { background: radial-gradient(circle at 50% 42%, rgba(212,122,58,.26), rgba(212,122,58,0) 58%), #0c0c12; } .lib-tile[data-accent="3"] .lib-tile-cover::before { border-color: rgba(212,122,58,.42); box-shadow: 0 0 0 7px rgba(212,122,58,.07), inset 0 0 0 6px rgba(212,122,58,.10); } .lib-tile[data-accent="3"] .lib-tile-cover::after { background: #d47a3a; } .lib-tile[data-accent="4"] .lib-tile-cover { background: radial-gradient(circle at 50% 42%, rgba(176,103,209,.26), rgba(176,103,209,0) 58%), #0c0c12; } .lib-tile[data-accent="4"] .lib-tile-cover::before { border-color: rgba(176,103,209,.4); box-shadow: 0 0 0 7px rgba(176,103,209,.07), inset 0 0 0 6px rgba(176,103,209,.10); } .lib-tile[data-accent="4"] .lib-tile-cover::after { background: #b067d1; } .lib-link { color: var(--accent, #C8A44A); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .lib-tile-cover.has-img { background-size: cover; background-position: center; width: 100%; aspect-ratio: 16 / 9; } .lib-tile-cover.has-img::before, .lib-tile-cover.has-img::after { display: none; } /* --- rich lesson rendering (library item reader) ----------------------- */ /* Lesson hero: show the WHOLE image (diagrams, charts, portraits) — never crop. A fixed 16/9 + object-fit:cover was chopping wide diagrams (e.g. the Performance Matrix labels). height:auto lets each image keep its own ratio; max-height stops a very tall image dominating; contain + white letterbox keeps diagrams (usually on white) looking clean. */ .les-hero { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 16px; background: #fff; border: 1px solid rgba(255,255,255,.08); margin: 4px 0 14px; display: block; } /* Any image inside lesson/coach body HTML (Skool-imported content) — fit width, keep ratio, never overflow the column. */ .les-body img, .cxl-good img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 12px auto; } /* Coach/Stuart-inserted inline lesson image (block editor + "add image into write-up"). */ .les-body img.les-img { max-height: 60vh; object-fit: contain; } .les-title { font-family: var(--font-display, serif); font-size: 1.7rem; line-height: 1.12; margin: 0 0 6px; } .les-body { margin-top: 4px; } .les-p { font-size: 1rem; line-height: 1.72; color: #d7d4cc; margin: 0 0 14px; } .les-h { font-family: var(--font-display, serif); font-size: 1.3rem; font-weight: 600; color: var(--text, #F5F3EE); margin: 22px 0 8px; padding-left: 12px; border-left: 3px solid var(--accent, #C8A44A); line-height: 1.2; } .les-ul, .les-ol { margin: 0 0 14px; padding-left: 0; list-style: none; } .les-ul li, .les-ol li { position: relative; padding-left: 24px; margin: 0 0 9px; line-height: 1.6; color: #d7d4cc; font-size: .98rem; } .les-ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #C8A44A); } .les-ol { counter-reset: les; } .les-ol li { counter-increment: les; } .les-ol li::before { content: counter(les); position: absolute; left: 0; top: .05em; width: 20px; height: 20px; font-family: var(--font-label, monospace); font-size: .7rem; font-weight: 600; color: var(--bg, #0D0D12); background: var(--accent, #C8A44A); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .les-quote { font-family: var(--font-display, serif); font-size: 1.4rem; line-height: 1.35; font-style: italic; color: var(--gold-light, #d4b36a); margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent, #C8A44A); } /* S26 — subheading for coach block-authored lessons. A

, not an , so a Heading→Subheading pair survives sanitizeLessonHtml's empty-heading pruning. */ .les-sub { font-family: var(--font-display, serif); font-size: 1.05rem; font-weight: 600; color: var(--gold-light, #d4b36a); margin: 14px 0 2px; } .les-call { border-radius: 14px; padding: 14px 16px 4px; margin: 18px 0; border: 1px solid rgba(255,255,255,.07); background: var(--card, #17171F); } .les-call-h { font-family: var(--font-label, monospace); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .les-call-h::before { content: ""; width: 9px; height: 9px; border-radius: 50%; } .les-call .les-p, .les-call li { color: #cfccc4; } .les-call .les-p:last-child { margin-bottom: 14px; } .les-obj { background: linear-gradient(180deg, rgba(200,164,74,.10), rgba(200,164,74,.02)); border-color: rgba(200,164,74,.28); } .les-obj .les-call-h { color: var(--gold-light, #d4b36a); } .les-obj .les-call-h::before { background: var(--accent, #C8A44A); } .les-reflect { background: linear-gradient(180deg, rgba(74,144,217,.10), rgba(74,144,217,.02)); border-color: rgba(74,144,217,.28); } .les-reflect .les-call-h { color: #7bb0e8; } .les-reflect .les-call-h::before { background: #4A90D9; } .les-week { background: linear-gradient(180deg, rgba(61,184,122,.10), rgba(61,184,122,.02)); border-color: rgba(61,184,122,.28); } .les-week .les-call-h { color: #5fd09b; } .les-week .les-call-h::before { background: #3DB87A; } .les-check { background: linear-gradient(180deg, rgba(200,164,74,.08), rgba(0,0,0,0)); border-color: rgba(200,164,74,.22); } .les-check .les-call-h { color: var(--gold-light, #d4b36a); } .les-check .les-call-h::before { background: var(--accent, #C8A44A); } .les-check .les-ul li::before { content: "✓"; background: none; color: var(--accent, #C8A44A); font-size: .82rem; top: .12em; left: 2px; width: auto; height: auto; } .upd-coach { font-family: var(--font-label, monospace); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9a9aa7); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 1px 6px; } /* --- post likes + comments ---------------------------------------------- */ .pa-actions { display: flex; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); } .pa-like, .pa-cbtn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--muted, #9a9aa7); font-size: .82rem; font-weight: 600; } .pa-like .pa-heart { color: var(--muted, #9a9aa7); transition: color .15s ease; } .pa-like.on { border-color: var(--accent, #C8A44A); color: var(--accent, #C8A44A); } .pa-like.on .pa-heart { color: var(--accent, #C8A44A); } .pa-comments { margin-top: 10px; } .pa-cmt-list { display: flex; flex-direction: column; gap: 8px; } .pa-cmt { background: var(--bg-2, #13131A); border-radius: 10px; padding: 8px 11px; } .pa-cmt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pa-cmt-name { font-weight: 700; font-size: .82rem; color: var(--accent, #C8A44A); } .pa-cmt-del { background: none; border: none; color: var(--muted, #9a9aa7); font-size: .72rem; cursor: pointer; padding: 0; text-decoration: underline; } .pa-cmt-body { font-size: .9rem; line-height: 1.4; margin-top: 2px; word-break: break-word; } .pa-cmt-add { margin-top: 10px; } .pa-cmt-add textarea { width: 100%; box-sizing: border-box; background: var(--bg-2, #13131A); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: var(--text, #F5F3EE); font-family: var(--font-body); font-size: .9rem; padding: 9px 11px; resize: vertical; } .pa-cmt-send { margin-top: 8px; font-size: .82rem; padding: 8px 14px; } /* --- parent / guardian (read-only) view banner -------------------------- */ .guardian-bar { background: var(--accent-soft, rgba(200,164,74,.14)); color: var(--text, #F5F3EE); border: 1px solid var(--accent, #C8A44A); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: .82rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .guardian-switch { background: var(--bg-2, #13131A); color: var(--text, #F5F3EE); border: 1px solid var(--accent, #C8A44A); border-radius: 8px; padding: 3px 8px; font-size: .8rem; } /* --- Share-a-win → feed -------------------------------------------------- */ /* The "put this win in the feed?" prompt summary */ .winfeed-modal .winfeed-sum { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--accent, #C8A44A); border-radius: 12px; background: var(--accent-soft, rgba(200,164,74,.14)); text-align: center; } .winfeed-eyebrow { display: inline-block; font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #C8A44A); } .winfeed-title { font-family: var(--font-display, serif); font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin: 4px 0 0; color: var(--text, #F5F3EE); } .winfeed-line { font-family: var(--font-display, serif); font-style: italic; font-size: .98rem; color: rgba(255,255,255,.8); margin-top: 6px; } /* A coach-approved player win, shown in the Updates feed */ .win-feed-card { border-color: var(--gold, #C8A44A); background: radial-gradient(120% 120% at 90% -10%, var(--accent-soft, rgba(200,164,74,.14)), transparent 55%), var(--card); } .win-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label, monospace); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #C8A44A); border: 1px solid var(--accent, #C8A44A); border-radius: 999px; padding: 2px 9px; } .win-badge svg { width: 13px; height: 13px; } .win-feed-card .winfeed-eyebrow { margin-top: 10px; } .win-by { margin-top: 12px; font-family: var(--font-label, monospace); font-size: .68rem; letter-spacing: .04em; color: var(--muted, #9a958c); } /* =========================================================================== IN-APP DIAGNOSTIC TOOLS — launcher + instant-result screens (CDL / Performance Diagnostic / Organise Your Energy). Band colours are shared: green/low = good, amber/watch = caution, red/high = flag. =========================================================================== */ .tband-green, .tband-low { --tb: #34A853; } .tband-amber, .tband-watch { --tb: #E8A12F; } .tband-red, .tband-high { --tb: #E5484D; } /* launcher card inside a course */ .tool-launch { display: flex; align-items: center; gap: 14px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent-soft); margin-bottom: 14px; text-align: left; width: 100%; } .tool-launch:active { transform: scale(0.99); } .tool-launch-tag { display: inline-block; font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; } /* result hero card */ .tool-result { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 20px; text-align: center; margin-bottom: 16px; border-top: 4px solid var(--tb, var(--accent)); } .tool-result.diag, .tool-result.energy { text-align: left; } .tool-band { display: inline-block; font-family: var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: #fff; background: var(--tb); border-radius: 999px; padding: 3px 14px; margin-bottom: 12px; } .tool-score { font-family: var(--font-head, var(--font-body)); font-size: 3rem; font-weight: 700; color: var(--text); line-height: 1; } .tool-score span { font-size: 1.1rem; color: var(--muted); font-weight: 500; } .tool-headline { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-top: 8px; } .tool-line { color: var(--muted); margin: 6px 0 0; line-height: 1.5; } /* per-area rows (diagnostic) */ .tool-areas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .tool-area { display: grid; grid-template-columns: 1fr 84px auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); } .ta-label { font-size: 0.9rem; color: var(--text); } .ta-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; } .ta-bar i { display: block; height: 100%; background: var(--tb); border-radius: 999px; } .ta-band { font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tb); justify-self: end; white-space: nowrap; } .tool-note { font-size: 0.78rem; line-height: 1.5; margin: 0 0 4px; } /* energy profile */ .en-window { display: flex; gap: 10px; margin: 12px 0 4px; } .en-window span { flex: 1; text-align: center; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); color: var(--muted); font-size: 0.86rem; } .en-window b { display: block; font-size: 1.6rem; color: var(--text); } .enw-best { border-color: #34A853 !important; } .enw-worst { border-color: #E5484D !important; } .en-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); } .en-fact b { color: var(--muted); font-weight: 600; font-size: 0.82rem; } .en-fact span { color: var(--text); font-size: 0.88rem; text-align: right; } .tool-cta { margin-top: 6px; } .tool-disclaim { font-size: 0.74rem; text-align: center; margin-top: 14px; line-height: 1.5; } /* Imported-HTML lessons (Skool player-type courses): style raw tags to match the hand-written .les-* lessons so both read identically. */ .les-body h2, .les-body h3, .les-body h4 { font-family: var(--font-display, serif); font-weight: 700; line-height: 1.3; margin: 30px 0 12px; } .les-body > :first-child { margin-top: 0; } /* The first heading is usually the lesson's own title repeated — keep it bold/white; the in-body section headings get the academy gold so the lesson has rhythm and colour instead of flat white-on-black. A thin gold rule sits under each. */ .les-body h2 { font-size: 1.34rem; color: var(--text, #F5F3EE); } .les-body h3, .les-body h4 { color: var(--accent, #C8A44A); padding-bottom: 7px; position: relative; } .les-body h3 { font-size: 1.18rem; } .les-body h4 { font-size: 1.08rem; } .les-body h3::after, .les-body h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: var(--accent, #C8A44A); border-radius: 2px; opacity: .55; } .les-body p { font-size: 1.02rem; line-height: 1.74; color: #e3e0d8; margin: 0 0 15px; } .les-body strong { color: var(--text, #F5F3EE); font-weight: 700; } .les-body em { font-style: italic; } .les-body ul, .les-body ol { margin: 0 0 14px; padding-left: 22px; } .les-body ul li, .les-body ol li { line-height: 1.6; color: #d7d4cc; font-size: .98rem; margin: 0 0 8px; } .les-body ul li::marker { color: var(--accent, #C8A44A); } .les-body ol li::marker { color: var(--accent, #C8A44A); font-weight: 700; } .les-body blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent, #C8A44A); background: var(--accent-soft); border-radius: 8px; color: #d7d4cc; font-style: italic; } .les-body a { color: var(--accent, #C8A44A); } .les-body br { line-height: 1; } /* Player-type pill on the profile — gold-filled to stand out from the grey pills. */ .pill.type-pill { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 700; } /* Lesson progress tracker */ .lesson-done.is-done { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .lesson-done { margin-top: 18px; } .lib-item.is-done h3 { opacity: .72; } .lib-item.is-done { border-color: rgba(52,168,83,.4); } .choose-ico.lesson-tick { background: #34A853; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .lib-progress { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .lib-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .86rem; } .lib-progress-done { color: #34A853; font-weight: 700; font-size: .8rem; } .lib-progress-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; } .lib-progress-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; } /* ============================================================================= COACH SUB-APP — premium, mockup-grade components (.cx-*) A distinct, interactive "app-front" treatment for the coach spaces (Neil's technical sub-app, Stuart's life-coaching pathways) — deliberately NOT the flat library look. Gradient heroes + glow, glassy cards, conic progress rings, a real Watch·Listen·Do·Reflect stepper. Themed via the gold accent vars. ============================================================================ */ .cx-back { background:none; border:0; color:var(--muted); font-family:var(--font-label); font-size:.72rem; letter-spacing:.06em; padding:2px 0 14px; cursor:pointer; } .cx-back:hover { color:var(--accent); } /* gradient hero */ .cx-hero { position:relative; overflow:hidden; border-radius:20px; padding:20px 20px 22px; margin-bottom:6px; background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 42%, #7c611f 100%); box-shadow:0 16px 40px rgba(200,164,74,.30), inset 0 0 0 1px rgba(255,255,255,.08); } .cx-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.13); } .cx-hero::before { content:""; position:absolute; left:-30px; bottom:-50px; width:130px; height:130px; border-radius:50%; background:rgba(0,0,0,.10); } .cx-hero .cx-row { position:relative; display:flex; align-items:center; gap:13px; } .cx-hero .cx-av { flex:none; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--gold); background:#12100a; box-shadow:0 4px 14px rgba(0,0,0,.35); } .cx-hero .cx-lab { font-family:var(--font-label); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(20,15,5,.7); } .cx-hero h2 { color:#16110a; margin:3px 0 1px; font-size:1.4rem; letter-spacing:-.01em; } .cx-hero .cx-sub { color:rgba(20,15,5,.78); font-size:.84rem; font-family:var(--font-body); } .cx-hero .cx-go { position:relative; margin-top:14px; display:inline-flex; align-items:center; gap:7px; background:#100e09; color:var(--gold-light); font-family:var(--font-label); font-weight:500; font-size:.7rem; letter-spacing:.06em; padding:9px 15px; border-radius:999px; text-transform:uppercase; } .cx-eyebrow { font-family:var(--font-label); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:22px 2px 11px; display:flex; align-items:center; gap:.7em; } .cx-eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); display:inline-block; opacity:.7; } .cx-intro { color:var(--muted); font-size:.86rem; line-height:1.55; margin:2px 2px 14px; } /* glassy area / pathway cards */ .cx-area { position:relative; display:flex; align-items:center; gap:14px; padding:15px 16px; margin-bottom:11px; border-radius:15px; cursor:pointer; background:linear-gradient(180deg, rgba(200,164,74,.06), rgba(200,164,74,.02)); border:1px solid var(--border); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .cx-area:hover, .cx-area:active { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 26px rgba(200,164,74,.10); } .cx-area.soon { opacity:.62; } .cx-area .cx-badge { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#12100a; background:linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow:0 5px 16px rgba(200,164,74,.28); } .cx-area .cx-badge.ghost { color:var(--accent); background:rgba(200,164,74,.10); box-shadow:none; border:1px solid var(--border); } .cx-area .cx-meta { flex:1; min-width:0; } .cx-area .cx-meta h3 { font-size:1.05rem; margin:0 0 2px; color:var(--text); } .cx-area .cx-meta p { margin:0; font-size:.8rem; color:var(--muted); } .cx-area .cx-count { font-family:var(--font-label); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } .cx-area .cx-arrow { flex:none; color:var(--accent); font-size:1.3rem; opacity:.7; } /* problem-picker chips */ .cx-chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px; } .cx-chip { font-family:var(--font-body); font-size:.82rem; color:var(--text); background:rgba(200,164,74,.06); border:1px solid var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .15s ease; } .cx-chip:hover { border-color:var(--accent); color:#fff; box-shadow:0 0 18px rgba(200,164,74,.16); } /* conic progress ring */ .cx-ringwrap { display:flex; align-items:center; gap:14px; } .cx-ring { flex:none; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--accent) calc(var(--p,0) * 1%), rgba(255,255,255,.08) 0); } .cx-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--bg); } .cx-ring b { position:relative; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); } /* Watch · Listen · Do · Reflect stepper */ .cx-loop { position:relative; margin-top:6px; } .cx-beat { position:relative; display:flex; gap:15px; padding:0 0 16px; } .cx-beat:last-child { padding-bottom:0; } .cx-beat::after { content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--border); } .cx-beat:last-child::after { display:none; } .cx-beat .cx-node { flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; position:relative; z-index:2; font-family:var(--font-label); font-size:.62rem; font-weight:600; letter-spacing:.02em; background:rgba(200,164,74,.06); border:1.5px solid var(--border); color:var(--muted); transition:all .3s ease; } .cx-beat.done .cx-node { background:linear-gradient(135deg, var(--gold-light), var(--gold)); border-color:var(--gold); color:#12100a; } .cx-beat.active .cx-node { border-color:var(--accent); color:var(--accent); box-shadow:0 0 20px rgba(200,164,74,.30); } .cx-beat .cx-bbody { flex:1; min-width:0; padding-top:2px; } .cx-beat .cx-blab { font-family:var(--font-label); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .cx-beat .cx-bt { font-size:1.02rem; color:var(--text); margin:1px 0 2px; } .cx-beat .cx-bm { font-size:.76rem; color:var(--muted); font-family:var(--font-label); letter-spacing:.02em; } .cx-beat .cx-bstate { margin-left:auto; flex:none; align-self:center; font-size:1.1rem; color:var(--muted); } .cx-beat.done .cx-bstate { color:var(--accent); } /* glassy panel + streak */ .cx-panel { background:linear-gradient(180deg, rgba(200,164,74,.05), rgba(200,164,74,.015)); border:1px solid var(--border); border-radius:15px; padding:15px 16px; margin-bottom:12px; } .cx-panel.glow { border-left:3px solid var(--accent); } .cx-panel .cx-pt { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); margin-bottom:6px; } .cx-panel p { margin:0; font-size:.85rem; color:var(--muted); line-height:1.5; } .cx-streak { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:.72rem; letter-spacing:.04em; color:var(--accent); margin-bottom:10px; } .cx-week { display:flex; align-items:flex-end; gap:7px; height:52px; padding:2px 0 0; } .cx-week .d { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; } .cx-week .d i { width:100%; max-width:22px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, var(--gold-light), var(--gold)); } .cx-week .d.off i { background:rgba(255,255,255,.09); } .cx-week .d span { font-family:var(--font-label); font-size:.5rem; color:var(--muted); } /* big watch/listen hero player (placeholder) */ .cx-player { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; display:grid; place-items:center; background:radial-gradient(420px 220px at 50% 0, rgba(200,164,74,.16), transparent 70%), var(--card); margin:4px 0 12px; } .cx-player .play { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:#12100a; font-size:1.2rem; box-shadow:0 8px 24px rgba(200,164,74,.34); } /* ============================================================================= COACH SPACE — LIGHT "sub-app" theme, matched to the concept mockups exactly. A warm paper surface, dark brand header bar, white cards, gold actions. Full-bleed inside .view (which has 8px/20px padding) via negative margins. ============================================================================ */ .cxl-space { min-height:100vh; background:#ece3cf; display:flex; flex-direction:column; font-family:var(--font-body); } .cxl-top { background:#0d0d12; color:#fff; padding:13px 16px 12px; position:relative; text-align:center; } .cxl-topback { position:absolute; left:8px; top:9px; background:none; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; padding:6px 11px; } .cxl-coach { font-family:var(--font-label); font-weight:600; letter-spacing:.10em; text-transform:uppercase; font-size:.88rem; color:#fff; padding:4px 32px 0; } .cxl-pwr { display:flex; align-items:center; justify-content:center; gap:7px; margin:11px auto 0; width:max-content; max-width:92%; font-family:var(--font-label); font-size:.6rem; letter-spacing:.05em; color:#8f8c96; background:#1c1c25; border-radius:999px; padding:6px 15px; } .cxl-pwr i { width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; } .cxl-body { flex:1; padding:18px 16px 44px; } /* hero */ .cxl-hero { background:#fff; border-radius:16px; padding:16px; box-shadow:0 10px 26px rgba(60,45,15,.10); margin-bottom:20px; } .cxl-hrow { display:flex; align-items:center; gap:13px; } .cxl-av { flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--gold); background:#f4ecd5; } .cxl-hero h2 { color:#15110a; font-size:1.32rem; margin:0; line-height:1.08; } .cxl-hero .cxl-sub { color:#7a7062; font-size:.84rem; } .cxl-watch { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:15px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border:0; width:100%; border-radius:12px; padding:14px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; cursor:pointer; box-shadow:0 7px 18px rgba(200,164,74,.30); } .cxl-watch .pl { width:30px; height:30px; border-radius:50%; background:#15110a; color:#fff; display:grid; place-items:center; font-size:.62rem; flex:none; } /* labels */ .cxl-q { font-size:1.04rem; color:#3a342b; font-family:var(--font-display); font-weight:600; margin:6px 2px 13px; } .cxl-areatitle { color:#15110a; font-size:1.5rem; font-family:var(--font-display); font-weight:700; margin:0 0 2px; line-height:1.1; } .cxl-areasub { color:#8a8170; font-size:.88rem; margin:0 0 16px; } .cxl-intro { color:#6b6151; font-size:.86rem; line-height:1.5; margin:0 2px 16px; } /* hub area grid */ .cxl-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; } .cxl-card { background:#fff; border-radius:15px; padding:16px 15px; box-shadow:0 7px 18px rgba(60,45,15,.09); cursor:pointer; transition:transform .14s ease; } .cxl-card:active { transform:scale(.98); } .cxl-card.soon { opacity:.55; } .cxl-card .cxl-ic { width:26px; height:26px; margin-bottom:18px; display:block; } .cxl-card .cxl-ic svg { width:26px; height:26px; stroke:#15110a; fill:none; stroke-width:1.8; } .cxl-card h3 { color:#15110a; font-size:1.02rem; margin:0 0 2px; line-height:1.1; font-family:var(--font-display); font-weight:700; } .cxl-card p { color:#8a8170; font-size:.8rem; margin:0; } /* chips panel */ .cxl-panel { background:#ddd0ad; border-radius:16px; padding:16px; margin-bottom:16px; } .cxl-panel .cxl-ph { color:#6f5d33; font-family:var(--font-display); font-weight:700; font-size:1.04rem; margin-bottom:13px; } .cxl-chips { display:flex; flex-wrap:wrap; gap:9px; } .cxl-chip { background:#fff; color:#2a251c; border:0; border-radius:999px; padding:9px 15px; font-family:var(--font-body); font-size:.86rem; box-shadow:0 2px 7px rgba(60,45,15,.09); cursor:pointer; } .cxl-chip:active { transform:scale(.97); } /* actions row (drill page) */ .cxl-actions { display:flex; gap:10px; margin-top:2px; } .cxl-send { flex:1; display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border:0; border-radius:13px; padding:15px 13px; font-family:var(--font-display); font-weight:700; font-size:.95rem; cursor:pointer; box-shadow:0 7px 18px rgba(200,164,74,.30); } .cxl-mark { flex:1; display:flex; align-items:center; justify-content:center; gap:9px; background:#fff; color:#15110a; border:1px solid #d8cdb0; border-radius:13px; padding:15px 13px; font-family:var(--font-display); font-weight:700; font-size:.95rem; cursor:pointer; box-shadow:0 4px 12px rgba(60,45,15,.06); } .cxl-mark.done { background:#f4ecd5; } /* drill list rows (area screen) */ .cxl-drill { display:flex; align-items:center; gap:14px; background:#fff; border-radius:14px; padding:13px 14px; margin-bottom:12px; box-shadow:0 6px 16px rgba(60,45,15,.08); cursor:pointer; } .cxl-play { flex:none; width:48px; height:48px; border-radius:12px; background:#f4ecd5; display:grid; place-items:center; } .cxl-play b { width:30px; height:30px; border-radius:50%; background:#0d0d12; color:#fff; display:grid; place-items:center; font-size:.62rem; } /* No video attached → neutral doc badge, not the black play button. */ .cxl-play.no-video { background:#efe9da; } .cxl-play.no-video b { background:transparent; color:#8a8170; font-size:.95rem; } .cxl-dmeta { flex:1; min-width:0; } .cxl-dmeta h4 { color:#15110a; font-size:1rem; margin:0 0 3px; font-family:var(--font-display); font-weight:700; line-height:1.12; } .cxl-dmeta p { color:#8a8170; font-size:.78rem; margin:0; } .cxl-darr { flex:none; color:#15110a; font-size:1.2rem; opacity:.5; } /* drill screen — video player + what good looks like */ .cxl-video { position:relative; aspect-ratio:16/9; background:#0d0d12; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; overflow:hidden; } .cxl-video .pbtn { width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; font-size:.85rem; } .cxl-video .dur { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.62); color:#fff; font-family:var(--font-label); font-size:.66rem; padding:3px 8px; border-radius:6px; } .cxl-drilltitle { color:#15110a; font-size:1.38rem; font-family:var(--font-display); font-weight:700; margin:0 0 2px; line-height:1.12; } .cxl-drillsub { color:#8a8170; font-size:.84rem; margin:0 0 16px; } .cxl-good { background:#fff; border-radius:14px; padding:15px 16px; box-shadow:0 6px 16px rgba(60,45,15,.08); margin-bottom:16px; } .cxl-good .lab { font-family:var(--font-label); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#9a7c2e; margin-bottom:8px; } .cxl-good p { color:#2a251c; font-size:.95rem; line-height:1.55; margin:0; } .cxl-good .les-body { color:#2a251c; } /* send-throw form (light) */ .cxl-drop { border:2px dashed #c7ba98; border-radius:16px; background:#fff; text-align:center; padding:26px 18px; margin-bottom:14px; } .cxl-drop .ico { color:#15110a; margin-bottom:10px; display:flex; justify-content:center; } .cxl-drop h3 { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin:0 0 4px; } .cxl-drop p { color:#8a8170; font-size:.82rem; margin:0; } .cxl-field2 { background:#fff; border-radius:13px; padding:13px 15px; margin-bottom:12px; box-shadow:0 4px 12px rgba(60,45,15,.06); } .cxl-field2 .lab { color:#8a8170; font-size:.78rem; margin-bottom:3px; } .cxl-field2 .val { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1.02rem; } .cxl-field2 textarea { width:100%; border:0; background:none; color:#15110a; font-family:var(--font-body); font-size:.95rem; resize:none; outline:none; } .cxl-field2 textarea::placeholder { color:#b3a98f; font-style:italic; } .cxl-privacy { display:flex; gap:11px; align-items:flex-start; background:#efe7d0; border-radius:13px; padding:13px 15px; margin-bottom:16px; } .cxl-privacy .plk { color:#9a7c2e; flex:none; margin-top:1px; } .cxl-privacy p { color:#7c6a3f; font-size:.82rem; line-height:1.45; margin:0; } .cxl-bigsend { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border:0; border-radius:14px; padding:16px; font-family:var(--font-display); font-weight:700; font-size:1.08rem; cursor:pointer; box-shadow:0 8px 20px rgba(200,164,74,.32); } /* reviews (light) */ .cxl-revcard { background:#fff; border-radius:16px; box-shadow:0 8px 20px rgba(60,45,15,.09); margin-bottom:14px; overflow:hidden; } .cxl-revhead { display:flex; align-items:center; gap:13px; padding:14px; border-bottom:1px solid #efe7d0; } .cxl-revthumb { flex:none; width:54px; height:48px; border-radius:10px; background:#0d0d12; display:grid; place-items:center; color:#fff; } .cxl-revhead .rh { flex:1; min-width:0; } .cxl-revhead h4 { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1rem; margin:0; } .cxl-revhead p { color:#8a8170; font-size:.78rem; margin:0; } .cxl-revpill { font-family:var(--font-label); font-size:.62rem; letter-spacing:.05em; color:#6f5d33; background:#f4ecd5; border-radius:999px; padding:5px 11px; } .cxl-revbody { padding:14px; } .cxl-revfb { display:flex; align-items:center; gap:9px; margin-bottom:8px; } .cxl-revfb .av { width:30px; height:30px; border-radius:50%; background:#f4ecd5; color:var(--gold); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.62rem; } .cxl-revfb b { color:#15110a; font-family:var(--font-display); } .cxl-revtext { color:#2a251c; font-size:.92rem; line-height:1.55; margin:0 0 12px; } .cxl-empty { background:#fff; border-radius:14px; padding:22px 16px; text-align:center; color:#8a8170; box-shadow:0 6px 16px rgba(60,45,15,.07); } /* --- LIFE COACHING (light) specifics --- */ .cxl-pathcard { display:flex; align-items:center; gap:14px; background:#fff; border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 6px 16px rgba(60,45,15,.08); cursor:pointer; } .cxl-pathnum { flex:none; width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; } .cxl-pathcard .pm { flex:1; min-width:0; } .cxl-pathcard .pm h4 { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1.02rem; margin:0 0 2px; line-height:1.12; } .cxl-pathcard .pm p { color:#8a8170; font-size:.78rem; margin:0; } .cxl-pathcard .pa { flex:none; color:#15110a; opacity:.5; font-size:1.2rem; } /* the W·L·D·R loop */ .cxl-loopcard { display:flex; align-items:center; gap:13px; background:#fff; border-radius:14px; padding:13px 14px; margin-bottom:12px; box-shadow:0 6px 16px rgba(60,45,15,.08); cursor:pointer; } .cxl-loopcard .node { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-label); font-size:.58rem; font-weight:600; background:#f4ecd5; color:#9a7c2e; border:1.5px solid #e3d6b3; } .cxl-loopcard.done .node { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border-color:var(--gold); } .cxl-loopcard.active .node { border-color:var(--gold); color:#9a7c2e; } .cxl-loopcard .lm { flex:1; min-width:0; } .cxl-loopcard .lm .lab { font-family:var(--font-label); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:#9a7c2e; } .cxl-loopcard .lm h4 { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1rem; margin:1px 0; line-height:1.1; } .cxl-loopcard .lm p { color:#8a8170; font-size:.74rem; margin:0; } .cxl-loopcard .st { flex:none; color:#9a7c2e; font-size:1.1rem; } /* meditation player */ .cxl-med { background:#fff; border-radius:18px; padding:26px 20px; text-align:center; box-shadow:0 8px 22px rgba(60,45,15,.10); margin-bottom:16px; } .cxl-med .mlab { font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#9a7c2e; } .cxl-med h2 { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin:8px 0 6px; } .cxl-med .msub { color:#8a8170; font-size:.85rem; margin:0 0 20px; } .cxl-med .mplay { width:66px; height:66px; border-radius:50%; margin:0 auto 16px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; display:grid; place-items:center; font-size:1.3rem; box-shadow:0 10px 26px rgba(200,164,74,.32); } .cxl-med .mbar { height:5px; border-radius:999px; background:#eadfc4; overflow:hidden; margin:0 0 6px; } .cxl-med .mbar i { display:block; height:100%; width:38%; background:var(--gold); border-radius:999px; } .cxl-med .mtime { display:flex; justify-content:space-between; font-family:var(--font-label); font-size:.66rem; color:#8a8170; } .cxl-med .mnote { color:#7a7062; font-size:.82rem; margin:16px 0 0; } /* values exercise */ .cxl-vals { display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 16px; } .cxl-val { background:#fff; color:#2a251c; border:1.5px solid #e3d6b3; border-radius:999px; padding:9px 16px; font-size:.88rem; cursor:pointer; } .cxl-val.on { background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border-color:var(--gold); } .cxl-becoming { background:#fff; border-radius:13px; padding:14px; box-shadow:0 5px 14px rgba(60,45,15,.07); color:#3a342b; font-style:italic; margin-bottom:14px; } /* journal */ .cxl-jprompt { background:#ddd0ad; border-radius:14px; padding:15px; margin-bottom:14px; } .cxl-jprompt .lab { font-family:var(--font-label); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#6f5d33; margin-bottom:6px; } .cxl-jprompt p { color:#3a342b; font-size:.92rem; margin:0; } .cxl-jentry { background:#fff; border-radius:13px; padding:14px; margin-bottom:11px; box-shadow:0 5px 14px rgba(60,45,15,.07); } .cxl-jentry .q { color:#15110a; font-family:var(--font-display); font-weight:700; font-size:1rem; } .cxl-jentry .m { color:#8a8170; font-size:.74rem; margin-top:3px; } /* accountability streak */ .cxl-streakbar { display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#15110a; border-radius:13px; padding:13px 16px; font-family:var(--font-display); font-weight:700; margin-bottom:14px; } .cxl-commit { display:flex; align-items:center; gap:11px; background:#fff; border-radius:12px; padding:13px 14px; margin-bottom:10px; box-shadow:0 5px 14px rgba(60,45,15,.07); } .cxl-commit .ck { width:22px; height:22px; border-radius:7px; flex:none; display:grid; place-items:center; background:#2fb673; color:#fff; font-size:.66rem; } .cxl-commit.todo .ck { background:#fff; border:1.5px solid #d8cdb0; color:transparent; } .cxl-commit span { color:#2a251c; font-size:.9rem; } .cxl-commit.todo span { color:#8a8170; } .cxl-nextbtn { display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:#9a7c2e; font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer; padding:4px 0; } /* ============================================================================= HOME DASHBOARD — futuristic combined layout (identity hero · AAI rings · streak · quick-action grid). Space Grotesk + DM Mono on the dark gold/black theme. Everything below it (tasks, coaching, feed…) is preserved. ============================================================================ */ .hd-lab { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:18px 2px 9px; display:flex; align-items:center; gap:7px; } .hd-lab::before { content:""; width:15px; height:1px; background:var(--gold); opacity:.6; } .hd-hero { background:linear-gradient(135deg,#221c0e,#191822 72%); border:1px solid rgba(200,164,74,.34); border-radius:18px; padding:16px; margin-bottom:13px; } .hd-hero .hd-ey { font-family:'DM Mono',monospace; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } .hd-hero .hd-q { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; line-height:1.32; margin-top:7px; color:#fff; } .hd-hero .hd-q em { color:var(--gold); font-style:normal; } .hd-aai { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:15px 14px 16px; margin-bottom:11px; } .hd-aai .hd-top { display:flex; justify-content:space-between; align-items:baseline; } .hd-aai .hd-l { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); } .hd-up { font-family:'DM Mono',monospace; font-size:.64rem; color:#3DB87A; } .hd-dn { font-family:'DM Mono',monospace; font-size:.64rem; color:#d98a8a; } .hd-fl { font-family:'DM Mono',monospace; font-size:.64rem; color:var(--muted); } .hd-ringrow { display:flex; justify-content:space-around; gap:6px; margin-top:10px; } .hd-rng { text-align:center; } .hd-rng .o { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; position:relative; margin:0 auto 6px; } .hd-rng .o::before { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--bg); } .hd-rng.a .o { background:conic-gradient(#4A90D9 var(--p),rgba(255,255,255,.07) 0); } .hd-rng.t .o { background:conic-gradient(#3DB87A var(--p),rgba(255,255,255,.07) 0); } .hd-rng.i .o { background:conic-gradient(var(--gold) var(--p),rgba(255,255,255,.07) 0); } .hd-rng .o b { position:relative; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:var(--text); } .hd-rng .nm { font-family:'DM Mono',monospace; font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .hd-streak { display:flex; align-items:center; gap:11px; background:linear-gradient(135deg,rgba(200,164,74,.13),rgba(200,164,74,.03)); border:1px solid rgba(200,164,74,.36); border-radius:14px; padding:12px 14px; margin-bottom:2px; } .hd-streak svg { width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.8; flex:none; } .hd-streak b { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.98rem; color:var(--text); display:block; } .hd-streak span { font-size:.78rem; color:var(--muted); display:block; } .hd-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:13px; } .hd-cell { background:var(--card); border:1px solid var(--border); border-radius:15px; padding:14px; text-align:left; cursor:pointer; transition:transform .14s ease, border-color .14s ease; } .hd-cell:active { transform:scale(.98); } .hd-cell .hd-ic { display:block; width:25px; height:25px; margin-bottom:15px; } .hd-cell .hd-ic svg { width:25px; height:25px; fill:none; stroke-width:1.9; } .hd-cell.due .hd-ic svg { stroke:#4A90D9; } .hd-cell.learn .hd-ic svg { stroke:var(--gold); } .hd-cell.game .hd-ic svg { stroke:#3DB87A; } .hd-cell.log .hd-ic svg { stroke:var(--muted); } .hd-cell b { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.92rem; display:block; line-height:1.1; color:var(--text); margin-bottom:2px; } .hd-cell span { font-size:.74rem; color:var(--muted); } /* ---- My Reports: tiled hub + check-in look-back (S38) -------------------- */ .rep-hub { margin-top:4px; margin-bottom:6px; } .hd-cell.rep-tile .hd-ic { margin-bottom:10px; } .hd-cell.rep-tile .hd-ic svg { stroke:var(--gold); } .hd-cell.rep-tile .rep-count { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; line-height:1; color:var(--text); display:block; margin-bottom:4px; } .hd-cell.rep-tile.is-empty { opacity:.5; } .hd-cell.rep-tile.is-empty .hd-ic svg { stroke:var(--muted); } .ci-item { padding:0; overflow:hidden; } .ci-item .ci-sum { display:flex; align-items:center; gap:9px; padding:13px 14px; cursor:pointer; list-style:none; } .ci-item .ci-sum::-webkit-details-marker { display:none; } .ci-item .ci-title { flex:1; font-weight:600; font-size:.9rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ci-item .ci-date { font-size:.74rem; color:var(--muted); white-space:nowrap; } .ci-item .ci-detail { padding:4px 14px 14px; border-top:1px solid var(--border); } .ci-row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); } .ci-row:last-child { border-bottom:none; } .ci-k { color:var(--muted); font-size:.78rem; } .ci-v { color:var(--text); font-size:.82rem; text-align:right; max-width:62%; } /* ---- Tier status badges (Layer 1) --------------------------------------- */ /* A tiny inline badge next to a name: profile, feed comments, leaderboard, card. Free = no badge. Standard = silver dot · Premium = gold dot · Elite = gold star · Signature = crown. Pure presentation. */ .tier-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:.72em; line-height:1; vertical-align:middle; margin-left:.15em; transform:translateY(-1px); } .tier-badge .tb-txt{ font-size:.82em; font-weight:700; margin-left:.28em; letter-spacing:.02em; } .tb-standard{ color:#AEB4BE; text-shadow:0 0 2px rgba(174,180,190,.5); } .tb-premium { color:#D4AF37; text-shadow:0 0 3px rgba(212,175,55,.55); } .tb-elite { color:#D4AF37; font-size:.85em; text-shadow:0 0 4px rgba(212,175,55,.7); } .tb-signature{ color:#E8C349; font-size:.9em; text-shadow:0 0 5px rgba(232,195,73,.8); } /* card is dark → keep badges bright on it */ .pcard-name .tier-badge{ transform:translateY(-2px); } /* ---- Life Coaching lessons: restore spacing the global * reset strips, and stop worksheet tables forcing horizontal overflow on phones ---- */ .life-lesson { overflow-wrap:break-word; word-break:break-word; } .life-lesson p { margin:0 0 14px; } .life-lesson h4 { margin:24px 0 8px; font-family:var(--font-head, "Cormorant Garamond", Georgia, serif); font-size:1.18rem; font-weight:600; line-height:1.35; color:#3a3427; } .life-lesson ul { margin:12px 0 14px; padding-left:22px; } .life-lesson li { margin:7px 0; line-height:1.55; } .life-lesson .ws-q { margin:14px 0 0; } .life-lesson .ws-q label { display:block; margin:0 0 4px; color:#4a4436; } .life-lesson .ws-cap { margin:16px 0 4px; } /* worksheet grids (scorecard / 7-day tracker) — fixed layout so columns share the width instead of stretching the page; inputs must be allowed to shrink */ .life-lesson .ws-grid { table-layout:fixed; width:100%; max-width:100%; } .life-lesson .ws-grid th, .life-lesson .ws-grid td { overflow-wrap:break-word; word-break:break-word; } .life-lesson .ws-cell, .life-lesson .ws-in { min-width:0; max-width:100%; } /* ── COACH RECOMMENDATION (2026-07-11) ────────────────────────────────────── The "Coach Stuart recommends…" card, pinned on home until the player opens it. Accented so it reads as a message FROM a person, not another app tile. */ .rec-card{ border:1px solid var(--accent, #16C8E6); cursor:pointer; } .rec-top{ display:flex; align-items:center; gap:8px; } .rec-pill{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--accent, #16C8E6); color:#04222a; } .rec-title{ font-size:1.02rem; font-weight:700; margin-top:10px; } .rec-note{ font-size:.85rem; opacity:.85; margin-top:6px; font-style:italic; } /* ── CONDITIONAL FORM FIELD (showIf) ──────────────────────────────────────── e.g. "where does it hurt?" — only opens when the pain score is low. */ .cond-field{ animation:condIn .18s ease-out; } .cond-field.hide{ display:none; } @keyframes condIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} } /* ── THE OTHER FOUR CORNERS — readiness (2026-07-11) ──────────────────────── Five ratings, one axis, one direction: up is better (pain included — 10 means nothing hurt). Tiles are tinted by band, not by which metric it is. */ .rd-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } .rd-tile{ text-align:center; padding:10px 4px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid transparent; } .rd-tile.rd-low{ border-color:rgba(224,108,117,.45); background:rgba(224,108,117,.08); } .rd-tile.rd-high{ border-color:rgba(76,175,125,.35); background:rgba(76,175,125,.07); } .rd-val{ font-size:1.25rem; font-weight:800; line-height:1.1; } .rd-lbl{ font-size:.66rem; opacity:.75; margin-top:3px; letter-spacing:.02em; } .rd-nudge{ margin-top:10px; padding:10px 12px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.04); border-left:3px solid var(--accent,#16C8E6); } .rd-nudge-head{ font-size:.82rem; } .rd-nudge-cta{ font-size:.82rem; font-weight:700; margin-top:4px; color:var(--accent,#16C8E6); } .rd-body-note{ margin-top:10px; font-size:.8rem; line-height:1.45; padding:10px 12px; border-radius:10px; background:rgba(224,108,117,.08); border-left:3px solid #E06C75; } /* ── CHIPS + "say it your own way" (Lock In, 2026-07-11) ──────────────────── The custom box sits under the presets. Tapping and typing both write the same field, so a player can do either, or both. */ .chip-custom{ width:100%; margin-top:8px; } .chipsfield .field-hint{ margin-bottom:6px; } /* ========================================================================== S26 — COACH'S VOICE + THE 12h SPEED DASHBOARD -------------------------------------------------------------------------- Stuart's words must NOT look like the app's words. `.field-hint` is the software talking; `.coach-prompt` is a person talking. They sit next to each other under the same question, so if they share a style the player learns to skim both. Hence: his own colour (attitude blue, not the gold the app uses everywhere), a left rule, and his name on it. ========================================================================== */ .coach-prompt { display: flex; flex-direction: column; gap: 3px; background: rgba(74,144,217,.08); border: 1px solid rgba(74,144,217,.28); border-left: 3px solid var(--attitude, #4A90D9); border-radius: 10px; padding: 9px 11px; margin: 2px 0 10px; } .coach-prompt-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--attitude, #4A90D9); } .coach-prompt-v { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text, #f5f3ee); } .coach-prompt-tip { font-size: .74rem; color: var(--muted, #9a9aa7); line-height: 1.4; } /* The power-words override — his words, so they carry his weight. */ .coach-prompt.is-override .coach-prompt-v { font-family: var(--font-display, serif); font-size: 1.25rem; font-weight: 600; } /* Standing advice — step 1 of every Lock In, framing the whole warm-up. */ .coach-advice { background: rgba(74,144,217,.08); border: 1px solid rgba(74,144,217,.28); border-left: 3px solid var(--attitude, #4A90D9); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; } .coach-advice-l { font-family: var(--font-label, monospace); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--attitude, #4A90D9); } .coach-advice-v { margin: 6px 0 0; font-size: .92rem; line-height: 1.5; color: var(--text, #f5f3ee); } /* --- The speed dashboard: Home, for 12h after a Lock In ------------------- Read at a venue, at arm's length, under bad light, in a hurry. Big words, short rows, no chrome. */ .lockin-dash { border: 1px solid rgba(200,164,74,.55); background: linear-gradient(135deg, rgba(200,164,74,.14), rgba(200,164,74,.04)); margin-bottom: 18px; } .ld-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ld-chip { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #C8A44A); border: 1px solid rgba(200,164,74,.5); border-radius: 999px; padding: 3px 9px; } .ld-meta { font-size: .74rem; color: var(--muted, #9a9aa7); } .ld-words { text-align: center; padding: 6px 0 12px; } .ld-words-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #C8A44A); } .ld-words-v { font-family: var(--font-display, serif); font-size: 1.9rem; line-height: 1.2; margin: 6px 0 0; color: var(--text, #f5f3ee); } .ld-success { border-top: 1px solid var(--border, rgba(255,255,255,.1)); padding: 10px 0; } .ld-success-v { margin: 4px 0 0; font-size: .92rem; line-height: 1.45; color: var(--text, #f5f3ee); } .ld-grid { border-top: 1px solid var(--border, rgba(255,255,255,.1)); padding: 8px 0; } .ld-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; } .ld-l { font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #9a9aa7); flex: 0 0 74px; } .ld-v { font-size: .88rem; line-height: 1.4; color: var(--text, #f5f3ee); } .ld-foot { margin-top: 10px; } .ld-foot .btn { width: 100%; } /* --- THROW ANALYSIS (Neil's 1-to-1 review) ------------------------------- */ /* The "door" — a dark service panel on a technical coach's (cream) hub, so it reads as a service, not content. Spec SPEC-THROW-ANALYSIS-2026-07-13 §04. */ .throw-door { background: #15130f; color: #f4ecd8; border-radius: 18px; padding: 20px 18px; margin: 0 0 18px; box-shadow: 0 8px 26px rgba(0,0,0,.20); } .throw-door .td-eyebrow { font-family: var(--font-mono, "DM Mono", monospace); letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; color: #c8a44a; margin-bottom: 9px; } .throw-door .td-h { margin: 0 0 8px; font-family: var(--font-display, serif); font-size: 1.3rem; line-height: 1.14; color: #fff; } .throw-door .td-p { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; color: rgba(244,236,216,.82); } .throw-door .td-btn { display: block; width: 100%; text-align: center; background: #c8a44a; color: #15130f; font-weight: 700; border: 0; border-radius: 12px; padding: 13px; font-size: .98rem; cursor: pointer; } .throw-door .td-btn span { margin-right: 4px; } .throw-door .td-link { display: block; width: 100%; text-align: center; margin-top: 9px; background: transparent; color: #f4ecd8; border: 1px solid rgba(244,236,216,.28); border-radius: 12px; padding: 11px; font-size: .9rem; cursor: pointer; } /* Locked = a paid 1-to-1 service, not included in membership. Reads as a service, not a teaser. */ .throw-door.locked { background: #17150f; border: 1px solid rgba(200,164,74,.22); box-shadow: none; } .throw-door.locked .td-h { display: flex; align-items: center; gap: 8px; } .throw-door .td-lock { font-size: 1rem; opacity: .85; } .throw-door .td-locknote { margin: 4px 0 0; font-size: .82rem; color: #c8a44a; border-top: 1px solid rgba(244,236,216,.12); padding-top: 12px; } /* "How to film it" numbered rules */ .tg-rule { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.08); } .tg-rule:first-of-type { border-top: 0; } .tg-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #c8a44a; color: #15130f; font-weight: 700; font-size: .82rem; display: grid; place-items: center; margin-top: 2px; } .tg-rule h4 { margin: 0 0 2px; font-size: .95rem; color: #2c2720; } .tg-rule p { margin: 0; font-size: .84rem; line-height: 1.5; color: #6b6357; } /* In-app clip player (replaces window.open — spec principle 1) */ .clip-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 16px; } .clip-modal video { width: 100%; max-width: 640px; max-height: 82vh; border-radius: 10px; background: #000; } .clip-modal .clip-x { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; } /* ---- profile quick-link tiles ------------------------------------------- */ .prof-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .prof-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; width: 100%; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; } .prof-tile-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(200,164,74,.12); color: var(--accent, #C8A44A); } .prof-tile-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--accent, #C8A44A); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .prof-tile-t { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.2; } /* ---- floating feedback / report-an-issue button ------------------------- */ .fab-feedback { position: fixed; z-index: 30; right: max(16px, calc(50% - (var(--maxw, 480px) / 2) + 16px)); bottom: calc(72px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 7px; background: var(--accent, #C8A44A); color: #161611; border: 0; border-radius: 999px; padding: 11px 16px; font-size: .82rem; font-weight: 700; font-family: inherit; box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; } .fab-feedback svg { display: block; } @media (max-width: 400px) { .fab-feedback span { display: none; } .fab-feedback { padding: 12px; } } /* === GOLF SCORECARD + COURSE PICKER (golf_round) — restored 2026-07-23 === */ .hide { display: none !important; } .coursefield .cf-other { margin-top: 8px; } .cf-add { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); } .cf-add-row { display: flex; gap: 8px; } .cf-add-row > * { flex: 1; } .sc-wrap { margin-top: 4px; } .sc-empty { color: var(--muted, #9a9aa7); font-size: .88rem; padding: 16px; border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; text-align: center; } .sc-card { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; background: var(--card, #17171F); } .sc-head, .sc-row { display: grid; grid-template-columns: 1fr 50px 34px 34px 50px; gap: 6px; align-items: center; padding: 6px 10px; } .sc-head { font-family: var(--font-label, monospace); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9a9aa7); background: rgba(255,255,255,.03); padding: 9px 10px; } .sc-head span { text-align: center; } .sc-head span:first-child { text-align: left; } .sc-row { border-top: 1px solid rgba(255,255,255,.05); } .sc-row.under { box-shadow: inset 3px 0 0 #3DB87A; } .sc-row.over { box-shadow: inset 3px 0 0 rgba(212,122,58,.75); } .sc-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .sc-num { font-weight: 700; font-size: .95rem; } .sc-par { font-family: var(--font-label, monospace); font-size: .54rem; letter-spacing: .03em; color: var(--muted, #9a9aa7); } .sc-cell { width: 100%; box-sizing: border-box; text-align: center; background: var(--bg-2, #13131A); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: var(--text, #F5F3EE); font-family: var(--font-body); font-size: .95rem; padding: 7px 2px; } .sc-cell:focus { outline: none; border-color: var(--accent, #C8A44A); } .sc-tog { height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: var(--bg-2, #13131A); color: var(--muted, #9a9aa7); font-family: var(--font-label, monospace); font-size: .7rem; font-weight: 600; cursor: pointer; padding: 0; } .sc-tog.on { background: var(--accent, #C8A44A); border-color: var(--accent, #C8A44A); color: var(--bg, #0D0D12); } .sc-tog.na { opacity: .25; cursor: default; } .sc-sub { padding: 5px 10px; font-family: var(--font-label, monospace); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #C8A44A); background: rgba(200,164,74,.06); border-top: 1px solid rgba(255,255,255,.05); } .sc-totals { display: flex; gap: 6px; padding: 11px 10px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.18); position: sticky; bottom: 0; } .sc-tot { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; } .sc-tl { font-family: var(--font-label, monospace); font-size: .54rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #9a9aa7); } .sc-tv { font-family: var(--font-display, serif); font-size: 1.2rem; font-weight: 600; color: var(--text, #F5F3EE); } .hole-grid { display: grid; grid-template-columns: 24px 1fr 1fr 1fr; gap: 5px; align-items: center; } .hole-grid .hg-h { text-align: center; font-family: var(--font-label, monospace); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #9a9aa7); } .hole-grid .hg-n { font-weight: 700; color: var(--text, #F5F3EE); text-align: center; font-size: .9rem; } .hole-grid input { width: 100%; box-sizing: border-box; text-align: center; background: var(--bg-2, #13131A); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: var(--text, #F5F3EE); font-family: var(--font-body); font-size: .9rem; padding: 6px 2px; } .hole-grid input:focus { outline: none; border-color: var(--accent, #C8A44A); } /* Date input — calendar icon was blending into the dark field; make it visible (gold-tinted) and the whole field tappable to open the picker. */ .field input[type="date"].date-input { cursor: pointer; } .field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(74%) sepia(52%) saturate(430%) hue-rotate(3deg) brightness(92%); opacity: 1; cursor: pointer; }