/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #200a04 #241a16 #faf4f1 #e8481c #b74017 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #faf4f1; --surface: #fdfaf9; --surface-2: #efe8e5; --border: #dbd3d0; --border-strong: #b9aeaa; --ink: #241a16; --muted: #706865; --accent: #e8481c; --accent-hover: #c53d18; --accent-ink: #200a04; --accent-text: #b74017; --accent-strong: #b43816; --accent-soft: #f7dcd3; --accent-border: #f2a791; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe6db; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e1d5; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2dad7; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #110603; --surface: #291f1c; --surface-2: #1d1210; --border: #322926; --border-strong: #58514f; --ink: #faf4f1; --muted: #9d9592; --accent: #e8481c; --accent-hover: #eb633e; --accent-ink: #200a04; --accent-text: #e8481c; --accent-strong: #ec643f; --accent-soft: #401509; --accent-border: #72240e; --success: #15803d; --success-ink: #ffffff; --success-soft: #122110; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #351704; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #360b09; --danger-strong: #d16969; } /* ==================================================================== * app.css — IronPulse * * Character: bold, high-energy gym console. Slightly tighter radii than the * default so cards read as sturdy rather than soft, a bit more air between * sections, and a punchier shadow on anything raised above the page. * ==================================================================== */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --s-6: 26px; --s-7: 34px; --s-8: 42px; --shadow: 0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent); --shadow-raised: 0 16px 40px color-mix(in srgb, var(--ink) 16%, transparent); } /* ---- Hero band on the dashboard --------------------------------------- */ .hero-photo { position: relative; overflow: hidden; background-image: url("/media/hero"); background-size: cover; background-position: top center; min-height: 260px; display: flex; align-items: flex-end; } .hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 45%, color-mix(in srgb, var(--ink) 20%, transparent) 100% ); } .hero-overlay { position: relative; z-index: 1; } .on-photo { color: var(--accent-ink); } /* ---- Member check-in QR image ------------------------------------------ */ .qr-panel { position: relative; display: inline-flex; padding: var(--s-6); border-radius: var(--radius-lg); overflow: hidden; background-image: url("/media/checkin-bg"); background-size: cover; background-position: center; } .qr-panel::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); } .qr-code { position: relative; z-index: 1; border-radius: var(--radius); border: 1px solid var(--border); padding: var(--s-3); background: var(--surface); box-shadow: var(--shadow); } /* ---- Camera scan frame -------------------------------------------------- */ .scan-frame { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--ink) 90%, transparent); } .scan-frame video { width: 100%; height: 100%; object-fit: cover; } .scan-frame::after { content: ""; position: absolute; inset: 12%; border: 2px solid color-mix(in srgb, var(--accent) 80%, transparent); border-radius: var(--radius); pointer-events: none; } /* ---- Stat card numbers get a touch more presence ------------------------ */ .card .tabular-nums { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .hero-photo, .scan-frame { transition: none; } }