/* URU Coach — layout + components on top of uru.css (the design-system sheet). Every colour/size/spacing here is a --uru-* token; see style-guide/README.md. uru.css + uru-fonts.css are committed COPIES of style-guide/ at the repo root (Vercel builds from coach/ only) — re-copy when the style guide bumps. */ :root { /* nice-forms.css re-themed onto the URU ramp (overrides its :root defaults). */ --nf-input-background-color: var(--uru-raise); --nf-input-color: var(--uru-t1); --nf-input-placeholder-color: var(--uru-t3); --nf-input-border-color: var(--uru-frame); --nf-input-focus-border-color: var(--uru-frame-hi); --nf-label-color: var(--uru-t3); --nf-input-size: 1rem; --nf-invalid-input-border-bottom-color: var(--uru-spec-1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; } .row, .columns { display: flex; } .columns { flex-direction: column; } /* ── Header — sticky nav is an elevated surface (raise) ─────────────────── */ header { background: var(--uru-raise); display: flex; align-items: center; flex-wrap: wrap; gap: var(--uru-s1); padding: var(--uru-s2) var(--uru-s4); border-bottom: 1px solid var(--uru-frame); } header .brand, header .brand:hover, header .brand:visited { display: inline-flex; align-items: center; gap: var(--uru-s2); text-decoration: none; background: transparent; padding: var(--uru-s2) var(--uru-s2); margin-right: var(--uru-s3); } header .brand-light { font-family: var(--uru-display); font-size: var(--uru-fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--uru-t3); } header logo { display: inline-block; height: 16px; width: 74px; background: left center no-repeat url('./logo.svg'); background-size: contain; } header a.button, header a.button:visited { color: var(--uru-t2); display: flex; align-items: center; gap: var(--uru-s1); padding: var(--uru-s2) var(--uru-s3); border-radius: var(--uru-r-sm); font-size: var(--uru-fs-body); font-weight: 500; text-decoration: none; } header a.button:hover { background: var(--uru-frame); color: var(--uru-t1); } header > a:last-child { margin-left: auto; } /* ── Page scaffold ──────────────────────────────────────────────────────── */ #container { flex: 1 1 auto; padding: var(--uru-s6) var(--uru-s4) var(--uru-s8); } /* Each routed page is a custom element (groups/group/member/programs).columns */ #container > * { width: 100%; max-width: 1080px; margin: 0 auto; gap: var(--uru-s6); } /* Login stays vertically centered; .nicebg is set on for that screen. */ .nicebg #container { justify-content: center; } h1 { font-family: var(--uru-display); font-size: var(--uru-fs-h1); font-weight: 500; letter-spacing: -.01em; line-height: 1.12; color: var(--uru-t1); } h2 { font-family: var(--uru-display); font-size: var(--uru-fs-h2); font-weight: 400; line-height: 1.15; color: var(--uru-t1); } a, a:visited { cursor: pointer; color: var(--uru-t2); text-decoration: underline; text-decoration-color: var(--uru-frame); text-underline-offset: 2px; } a:hover { color: var(--uru-t1); text-decoration-color: var(--uru-frame-hi); } .muted { color: var(--uru-t3); } .error { /* Spectrum endpoint standing alone as the semantic "wrong" marker — the same carve-out the mobile styleGuide makes for its danger token. */ color: var(--uru-spec-1); } /* Sections are labelled with eyebrows; give them air above their content. */ .uru-eyebrow { display: block; } section.columns { gap: var(--uru-s3); } /* ── Buttons — secondary by default, one yellow lead action per screen ──── */ button { background: var(--uru-frame); color: var(--uru-t1); border: none; border-radius: 14px; padding: var(--uru-s2) var(--uru-s4); font-family: var(--uru-font); font-size: var(--uru-fs-body); font-weight: 500; cursor: pointer; } button:hover, button:active { background: var(--uru-frame-hi); } button:disabled { opacity: var(--uru-disabled-opacity); cursor: default; } button.uru-btn-action { background: var(--uru-action); color: var(--uru-bg); font-weight: 700; letter-spacing: .04em; padding: 13px 18px; } button.uru-btn-action:hover { background: var(--uru-action); } button.uru-btn-action:active { filter: brightness(.85); } /* Destructive confirm — mirrors mobile styleGuide `danger` (spectrum endpoint promoted to the one destructive chrome colour). */ button.remove { background: var(--uru-spec-1); color: var(--uru-t1); } button.remove:hover { background: var(--uru-spec-1); filter: brightness(.85); } /* ── Inputs outside nice-form-group (program builder table) ─────────────── */ input:not([type=checkbox]):not([type=radio]), select, textarea { background: var(--uru-raise); color: var(--uru-t1); border: 1px solid var(--uru-frame); border-radius: var(--uru-r-md); padding: var(--uru-s2) var(--uru-s3); font-family: var(--uru-font); font-size: var(--uru-fs-body); } input::placeholder { color: var(--uru-t3); } input:hover, select:hover, textarea:hover { border-color: var(--uru-frame-hi); } /* ── Group sub-screen tabs ──────────────────────────────────────────────── */ .tabbar { display: flex; flex-wrap: wrap; gap: var(--uru-s2); } .tabbar a.tab, .tabbar a.tab:visited { display: inline-block; padding: var(--uru-s2) var(--uru-s4); border: 1px solid var(--uru-frame); border-radius: var(--uru-r-pill); color: var(--uru-t3); font-size: var(--uru-fs-body); font-weight: 500; text-decoration: none; } .tabbar a.tab:hover { border-color: var(--uru-frame-hi); color: var(--uru-t1); } .tabbar a.tab.active { background: var(--uru-frame); border-color: var(--uru-frame); color: var(--uru-t1); } /* ── Cards ──────────────────────────────────────────────────────────────── */ .uru-card { display: flex; flex-direction: column; gap: var(--uru-s3); } form.uru-card, .uru-card form { display: flex; flex-direction: column; gap: var(--uru-s3); } /* Tight header block: title + meta + back link without the section gap */ .pagehead { display: flex; flex-direction: column; gap: var(--uru-s1); align-items: flex-start; } p strong, td strong { color: var(--uru-t1); font-weight: 500; } .uru-card .nice-form-group { margin-top: 0; } .btnrow { display: flex; gap: var(--uru-s2); align-items: center; } /* ── Login ──────────────────────────────────────────────────────────────── */ #login { align-self: center; width: 100%; max-width: 420px; background: transparent; border: 1px solid var(--uru-frame); border-radius: var(--uru-r-lg); padding: var(--uru-s8); margin: var(--uru-s8) 0; } #login h1 { font-size: var(--uru-fs-h2); font-weight: 400; margin-bottom: var(--uru-s2); } #login button { width: 100%; justify-content: center; text-align: center; margin-top: var(--uru-s2); } /* ── Join screen ────────────────────────────────────────────────────────── */ /* What the coach projects to the class. QR tile and code deliberately keep the louder pre-restyle look (white tile, big heavy monospace code) — an agreed exception to the token sheet for at-distance readability. */ .joinhero { display: flex; flex-direction: column; align-items: center; gap: var(--uru-s3); padding: var(--uru-s6) 0; text-align: center; } .joincode-qr { background: #fff; padding: 16px; border-radius: 8px; line-height: 0; } .joincode-text { font-size: 3.5rem; letter-spacing: 0.35em; font-weight: 700; font-family: ui-monospace, monospace; color: var(--uru-t1); user-select: all; } .programcard { width: 100%; max-width: 560px; align-self: center; } /* Inline join code in the groups table */ code { font-family: var(--uru-font); font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--uru-t1); background: var(--uru-frame); border-radius: var(--uru-r-sm); padding: var(--uru-s1) var(--uru-s2); } /* ── Live class board ───────────────────────────────────────────────────── */ .live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--uru-s3); } a.live-card, a.live-card:visited { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: var(--uru-s1); text-align: center; } .live-card .uru-display { margin: var(--uru-s1) 0 0; color: var(--uru-t1); } .live-name { font-size: var(--uru-fs-body); font-weight: 500; color: var(--uru-t1); } .live-detail { font-size: var(--uru-fs-caption); color: var(--uru-t2); margin-top: var(--uru-s2); } .live-ago { font-size: var(--uru-fs-caption); color: var(--uru-t3); } /* ── Tables (rendered as CSS grid; tr = display:contents) ───────────────── */ table { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); border: 1px solid var(--uru-frame); border-radius: var(--uru-r-lg); overflow: hidden; } table.two { grid-template-columns: auto 1fr; } table.three { grid-template-columns: repeat(3, auto); } table.four { grid-template-columns: repeat(4, auto); } table.five { grid-template-columns: repeat(5, auto); } table.six { grid-template-columns: repeat(6, auto); } thead, tbody, tr { display: contents; } th { font-family: var(--uru-display); font-size: var(--uru-fs-eyebrow); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--uru-t3); background: var(--uru-raise); padding: var(--uru-s3); border-bottom: 1px solid var(--uru-frame); } td { display: flex; align-items: center; flex-wrap: wrap; gap: var(--uru-s2); color: var(--uru-t2); padding: var(--uru-s2) var(--uru-s3); border-bottom: 1px solid var(--uru-frame); } tr:last-child td { border-bottom: none; } th.right, td.right { text-align: right; } td a { white-space: nowrap; } /* Compact controls inside table cells */ td button { padding: var(--uru-s1) var(--uru-s3); border-radius: var(--uru-r-sm); } td input, td select { width: 100%; min-width: 64px; } /* Drill-down row: spans all grid columns (colspan is a no-op in grid tables) */ td.expand { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: var(--uru-s2); background: var(--uru-raise); padding: var(--uru-s3) var(--uru-s4); } .setblock { display: flex; flex-direction: column; gap: var(--uru-s2); } .setblock strong { color: var(--uru-t1); font-weight: 500; } /* Nested per-set tables in the member drill-down */ td table { border-radius: var(--uru-r-md); margin: 0; } /* Simple list (existing programs) styled as card rows */ ul.rowlist { list-style: none; border: 1px solid var(--uru-frame); border-radius: var(--uru-r-lg); overflow: hidden; } ul.rowlist li { color: var(--uru-t2); padding: var(--uru-s3) var(--uru-s4); border-bottom: 1px solid var(--uru-frame); } ul.rowlist li:last-child { border-bottom: none; } /* ── Spinner ────────────────────────────────────────────────────────────── */ @keyframes spinner-loader { to { transform: rotate(360deg); } } .loading-spinner { position: relative; height: 50px; } .loading-spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; border-radius: 50%; border: 4px solid var(--uru-frame); border-top-color: var(--uru-t3); animation: spinner-loader .6s linear infinite; }