/* ===================================================================== EwizPro — design tokens + base theme (Phase 0 SHELL) --------------------------------------------------------------------- PLACEHOLDER tokens. These get replaced by Tavishi's Admin-Zone mockup tokens (Blueprint Amendment B). The token NAMES are the contract; only the values change when her design lands — components below won't move. Two knobs drive everything: --brand / --brand-2 : the per-tenant colour, injected inline on by the themed layout from the resolved tenant. [data-theme] : "light" | "dark" surface palette. ===================================================================== */ :root { /* Brand (per-tenant; overridden inline on ) */ --brand: #1f6feb; --brand-2: #0b3d91; --on-brand: #ffffff; /* Type */ --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --fs-2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); --fs-body: 1rem; --fs-sm: 0.8125rem; --lh: 1.6; /* Spacing / shape */ --space: 1rem; --radius: 14px; --radius-sm: 9px; --maxw: 1120px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 28px -12px rgba(16,24,40,.18); --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); } /* ---- Light surface (default) ---- */ :root, [data-theme="light"] { --bg: #f6f8fb; --surface: #ffffff; --surface-2:#f1f4f9; --border: #e4e9f2; --text: #131a2a; --text-2: #566074; --text-3: #8a93a6; } /* ---- Dark surface ---- */ [data-theme="dark"] { --bg: #0b1020; --surface: #121a2e; --surface-2:#0f1626; --border: #24304b; --text: #eef2fb; --text-2: #a9b4cc; --text-3: #6b7590; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.6); } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background .3s var(--ease), color .3s var(--ease); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } /* ---- App bar ---- */ .appbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); } .appbar__inner { display: flex; align-items: center; gap: 1rem; height: 64px; } .brand { display: flex; align-items: center; gap: .625rem; font-weight: 600; color: var(--text); } .brand__dot { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow); } .brand__name { font-size: 1.0625rem; letter-spacing: -.01em; } .brand__sub { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; } .appbar__spacer { flex: 1; } /* ---- Theme toggle ---- */ .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .icon-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .icon-btn:focus-visible { outline: none; box-shadow: var(--ring); } [data-theme="light"] .icon-btn .i-sun { display: none; } [data-theme="dark"] .icon-btn .i-moon { display: none; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: .9375rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .05s var(--ease), filter .2s var(--ease), background .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn--brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); box-shadow: var(--shadow); } .btn--brand:hover { filter: brightness(1.06); text-decoration: none; } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); text-decoration: none; } /* ---- Hero ---- */ .hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 2.5rem; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: color-mix(in srgb, var(--brand) 92%, var(--text)); font-size: var(--fs-sm); font-weight: 600; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); } .hero h1 { font-size: var(--fs-1); line-height: 1.08; letter-spacing: -.025em; margin: 1rem 0 .75rem; } .hero p.lead { font-size: 1.125rem; color: var(--text-2); max-width: 60ch; margin: 0 0 1.75rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---- Cards / grid ---- */ .grid { display: grid; gap: 1rem; } @media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); } .card h3 { margin: .2rem 0 .4rem; font-size: 1.0625rem; letter-spacing: -.01em; } .card p { margin: 0; color: var(--text-2); font-size: .9375rem; } .card__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-size: 1.1rem; } /* ---- Chips / meta ---- */ .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: .3rem .65rem; border-radius: 999px; } .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); } /* ---- Footer ---- */ .foot { border-top: 1px solid var(--border); margin-top: 3.5rem; padding: 1.75rem 0; color: var(--text-3); font-size: var(--fs-sm); } .section { padding: 1rem 0; } .stack > * + * { margin-top: var(--space); } .muted { color: var(--text-3); } /* ===================================================================== Facility Admin zone (Phase 1). Same tokens — swaps with Tavishi's set. ===================================================================== */ .authwrap { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; } .authcard { width: 100%; max-width: 400px; } .authcard .brand { justify-content: center; margin-bottom: 1.25rem; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: .35rem; } .input { width: 100%; padding: .65rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .9375rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); } .btn--block { width: 100%; justify-content: center; } .alert { padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 1rem; background: color-mix(in srgb, #e5484d 14%, transparent); color: #b42318; border: 1px solid color-mix(in srgb, #e5484d 30%, transparent); } [data-theme="dark"] .alert { color: #ffb4ab; } .adminbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .adminbar__inner { display: flex; align-items: center; gap: 1rem; height: 60px; } .adminbar__title { font-weight: 600; letter-spacing: -.01em; } .adminbar__title small { display: block; font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; } .kpi h3 { font-size: 2rem; letter-spacing: -.02em; margin: .1rem 0 0; } .kpi .kpi__label { color: var(--text-3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; } .pagehead { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 1rem; } .pagehead h1 { font-size: var(--fs-2); letter-spacing: -.02em; margin: 0; } /* ---- Admin tables + flash + toolbar (Phase 1 CRUD) ---- */ .toolbar { display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 1rem; } .toolbar h1 { font-size: var(--fs-2); letter-spacing: -.02em; margin: 0; } .toolbar .appbar__spacer { flex: 1; } .flash { padding: .65rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 1rem; background: color-mix(in srgb, #0284c7 14%, transparent); color: #0369a1; border: 1px solid color-mix(in srgb, #0284c7 30%, transparent); } [data-theme="dark"] .flash { color: #7dd3fc; } .tablecard { padding: 0; overflow: hidden; } .table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .table th, .table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--border); } .table th { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); } .table .row-actions { display: flex; gap: .4rem; justify-content: flex-end; } .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2); } .badge--on { color: #0369a1; background: color-mix(in srgb, #0284c7 12%, transparent); border-color: color-mix(in srgb, #0284c7 26%, transparent); } .badge--star { color: color-mix(in srgb, var(--brand) 92%, var(--text)); background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 24%, transparent); } .btn--sm { padding: .38rem .7rem; font-size: .82rem; } .btn--danger { background: var(--surface); color: #b42318; border-color: color-mix(in srgb, #e5484d 30%, var(--border)); } .btn--danger:hover { background: color-mix(in srgb, #e5484d 12%, transparent); text-decoration: none; } .empty { text-align: center; padding: 3rem 1rem; color: var(--text-3); } .field-error { color: #b42318; font-size: var(--fs-sm); margin-top: .3rem; } [data-theme="dark"] .field-error { color: #ffb4ab; } .checkline { display: flex; align-items: center; gap: .5rem; } .checkline input { width: 18px; height: 18px; accent-color: var(--brand); } .formgrid { display: grid; gap: 0; } @media (min-width: 640px) { .formgrid--2 { grid-template-columns: 1fr 1fr; gap: 0 1rem; } } .navlinks { display: flex; gap: .3rem; } .navlinks a { padding: .4rem .7rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; font-weight: 500; } .navlinks a:hover, .navlinks a.is-active { background: var(--surface-2); color: var(--text); text-decoration: none; } /* ---- Public facility site: coach card ---- */ .p-person { display: flex; align-items: center; gap: 1rem; } .p-avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; font-weight: 700; color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .p-avatar img { width: 100%; height: 100%; object-fit: cover; }