/* CPS auth service — house theme with a light/dark toggle (mirrors the shared Builder stylesheet). Bump ?v=N in layouts/default.php whenever this changes. Default palette = dark; an explicit data-theme on overrides it. */ :root { --radius: 8px; --max: 80rem; /* default content width (+25%) — platform-wide */ --nav-h: 3.4rem; /* pinned nav height — matches the shared design system */ color-scheme: dark light; --bg: #0e1116; --bg-elev: #151a21; --surface: #11161d; --fg: #e6e8eb; --muted: #8a93a0; --rule: #1f262f; --accent: #c8a96a; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --bg-elev: #151a21; --surface: #11161d; --fg: #e6e8eb; --muted: #8a93a0; --rule: #1f262f; --accent: #c8a96a; } :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --bg-elev: #ffffff; --surface: #ffffff; --fg: #171b21; --muted: #5b6671; --rule: #e3e7ec; --accent: #8a6d2f; } /* Web Awesome theming: map the CETA brand tokens onto Web Awesome's design tokens so wa-* components inherit the house style and follow the light/dark toggle (they reference our --accent/--surface/etc., which switch per theme). */ :root { --wa-color-brand-fill-loud: var(--accent); --wa-color-brand-fill-normal: var(--accent); --wa-color-brand-fill-quiet: color-mix(in srgb, var(--accent) 16%, transparent); --wa-color-brand-border-loud: var(--accent); --wa-color-brand-border-normal: var(--accent); --wa-color-brand-on-loud: var(--bg); /* Outlined/quiet brand buttons (appearance="outlined") were falling back to Web Awesome's own blue in BOTH themes, because only the loud/fill tokens were mapped. Affects the three existing outlined brand buttons (client item preview, admin project "Add note", admin material preview) as well as the developers page. */ --wa-color-brand-on-quiet: var(--accent); --wa-color-brand-on-normal: var(--accent); --wa-color-surface-default: var(--surface); --wa-color-surface-raised: var(--bg-elev); --wa-color-surface-lowered: var(--bg); --wa-color-surface-border: var(--rule); --wa-color-text-normal: var(--fg); --wa-color-text-quiet: var(--muted); --wa-color-text-link: var(--accent); /* Webfonts loaded from Google Fonts in the page so the site renders identically on every OS. Inter for body/UI, Space Grotesk for headings. */ --wa-font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wa-font-family-heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wa-border-radius-m: var(--radius); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--wa-font-family-body); background: var(--bg); color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; } a:hover { color: var(--accent); } .container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; width: 100%; } main { flex: 1 0 auto; padding: 2.5rem 0; } h1, h2, h3, h4, .brand-mark { font-family: var(--wa-font-family-heading); letter-spacing: -0.01em; } h1 { font-size: 1.6rem; margin: 0 0 0.25rem; } h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; } .muted { color: var(--muted); } /* Nav — matches the shared Builder design system (style.css.j2): a theme-driven background (color-mix on --bg) so it turns white in light mode, with the same brand sizing as the generated apps (cps-web/frametrack). */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; gap: 1.25rem; height: var(--nav-h); padding: 0 1.5rem; max-width: var(--max); margin: 0 auto; } .brand { margin-right: auto; } .brand { font-size: 1.1rem; text-transform: uppercase; border-bottom: none; display: inline-flex; align-items: center; gap: 0.65em; color: var(--fg); } .brand-mark { color: var(--accent); letter-spacing: 0.3em; font-weight: 800; } .brand-sep { color: var(--muted); font-weight: 300; opacity: 0.7; } .brand-sub { color: var(--fg); letter-spacing: 0.2em; font-weight: 400; } /* Nav links — same treatment as the shared design system. */ .nav-links { display: flex; align-items: center; gap: 1.75rem; } .nav-links a { border-bottom: none; color: var(--muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; } .nav-links a:hover { color: var(--fg); } .nav-links a.active { color: var(--accent); } .signout { display: inline-flex; align-items: center; gap: 0.75rem; margin: 0; } .signout .who { color: var(--muted); font-size: 0.85rem; } .signout button { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; border-bottom: 1px solid transparent; } .signout button:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Right-hand nav cluster + light/dark toggle */ .nav-right { display: flex; align-items: center; gap: 1rem; } .theme-toggle { background: transparent; border: 1px solid var(--rule); color: var(--muted); border-radius: var(--radius); padding: 0.3rem 0.55rem; cursor: pointer; font: inherit; line-height: 1; height: auto; block-size: auto; min-height: 0; min-block-size: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle::before { content: "\2600"; } /* ☀ in dark */ :root[data-theme="light"] .theme-toggle::before { content: "\263E"; } /* ☾ in light */ /* Generic form controls (in addition to .auth-form), themed for both palettes. */ input, select, textarea { background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem; font: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } /* Footer */ footer { flex-shrink: 0; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.85rem; padding: 1.5rem 0; } /* Login panel. The fields are Web Awesome components (wa-input/wa-button), which style themselves; we own the rhythm between them with a flex column. */ .panel { max-width: 24rem; margin: 3rem auto; } .panel h1 { margin-bottom: 0.35rem; } .auth-form { max-width: 22rem; margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .auth-form wa-input { width: 100%; } .auth-form wa-button { margin-top: 0.5rem; } .auth-err { margin-bottom: 1.5rem; } /* Profile / account form. A roomy column gap so each field's label clearly belongs to the input below it, not the one above. */ .stacked-form { max-width: 26rem; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.6rem; } .stacked-form wa-input { width: 100%; } .stacked-form wa-button { margin-top: 0.25rem; align-self: flex-start; } /* Tab labels (admin client page): breathing room before the count badge. */ wa-tab wa-badge { margin-inline-start: 0.5rem; } /* Public contact form. */ .contact { max-width: 34rem; margin: 3rem auto; } .contact h1 { margin-bottom: 0.35rem; } .contact .lead { color: var(--muted); margin: 0 0 1.75rem; } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; } .contact-form wa-input, .contact-form wa-textarea { width: 100%; } .contact-form wa-button { margin-top: 0.5rem; align-self: flex-start; } /* Admin create forms — inline row of fields under each list. */ .admin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; max-width: 52rem; margin: 1rem 0 2.5rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 55%, transparent); } .admin-form wa-input, .admin-form wa-select { flex: 1 1 12rem; } .admin-form.stacked { flex-direction: column; align-items: stretch; max-width: 30rem; } .admin-form.stacked wa-input, .admin-form.stacked wa-select { flex: none; width: 100%; } .admin-form.stacked wa-button { align-self: flex-start; } /* Admin section sub-nav (Clients · Messages). */ .admin-subnav { display: flex; gap: 1.25rem; margin: 0.25rem 0 1.75rem; border-bottom: 1px solid var(--rule); } .admin-subnav a { border-bottom: 2px solid transparent; padding: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } .admin-subnav a:hover { color: var(--fg); } .admin-subnav a.active { color: var(--accent); border-bottom-color: var(--accent); } /* Client detail: per-user access cards. */ .user-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 0 0 0.85rem; } .user-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; } .access-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.1rem; } .access-row { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.35rem 0.7rem; } /* Account profile. */ .panel-wide { max-width: 36rem; margin: 1rem 0 2rem; } .profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.85rem 2rem; margin: 1.25rem 0 1.5rem; } .profile dt { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .profile dd { margin: 0.15rem 0 0; } /* Nav user menu — keep the trigger inline with the nav links. */ .user-menu::part(trigger) { border-bottom: none; } /* Honeypot — kept in the DOM for bots, off-screen for people and AT. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Portal cards */ /* wa-card draws its own box (border/padding/radius); we only space them out. */ .card { display: block; margin: 1rem 0; } .card h2 { margin-top: 0; } .iterations { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } .iterations li { display: inline-flex; align-items: center; gap: 0.5rem; } .badge { background: var(--accent); color: var(--bg); border-radius: 999px; font-size: 0.7rem; padding: 0.05rem 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; } /* Admin tables */ .grid { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .grid th, .grid td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); } .grid th { color: var(--muted); font-weight: 600; } .count { color: var(--muted); font-size: 0.85rem; font-weight: 400; } .pill { display: inline-block; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.8rem; margin: 0 0.25rem 0.25rem 0; } /* Builder capabilities — doc-like reference page (admin/capabilities). */ .doc { max-width: 64rem; } .doc h2 { margin-top: 2.5rem; } .doc .doc-lead { font-size: 1rem; line-height: 1.7; max-width: 50rem; } .doc-list { line-height: 1.7; padding-left: 1.1rem; } .doc-list li { margin: 0.4rem 0; } .doc .grid { margin: 0.5rem 0 1rem; } .doc .grid td code, .doc p code { background: var(--surface); border: 1px solid var(--rule); border-radius: 0.3rem; padding: 0.05rem 0.35rem; font-size: 0.85em; } .doc-tags, .doc .grid wa-tag { margin: 0 0 0.25rem; } .doc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin: 1rem 0 1.5rem; } .doc-step { flex: 1 1 14rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; background: color-mix(in srgb, var(--surface) 55%, transparent); } .doc-step p { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); } .doc-step-n { font-weight: 700; color: var(--accent); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .doc-arrow { align-self: center; color: var(--muted); font-size: 1.4rem; } .doc-code { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.55; } .doc-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; } @media (max-width: 700px) { .doc-arrow { display: none; } } /* In-app document preview (wa-dialog modal) — shared click-to-popup viewer for Materials + ticket attachments, matching the generated apps (FrameTrack). */ .doc-preview { --width: 90vw; } .doc-preview::part(dialog) { max-width: 1100px; } .doc-preview-body { display: flex; justify-content: center; align-items: center; min-height: 40vh; background: var(--surface); } .doc-preview-img { max-width: 100%; max-height: 78vh; display: block; } .doc-preview-frame { width: 100%; height: 78vh; border: 0; background: #fff; } .doc-preview-body p { padding: 2rem; margin: 0; } .attachment-chip { cursor: pointer; } /* ── Developers page (admin/developers) ────────────────────────────────────── Scoped to .devs so nothing here touches the client pages. The generic .user-card carries only a border, and in BOTH themes --surface sits within a hair of --bg (#fff on #f7f8fa; #11161d on #0e1116) — so a bordered card on a flat page reads as one continuous slab and three people run together. Depth here comes from a raise/recess pair rather than from a single fill: the person card is RAISED (--bg-elev + shadow + an accent stripe keyed to whether they are a developer), and the grants panel inside it is RECESSED (--bg). That contrast survives both palettes, where a lighter-still fill would not. */ .devs .dev-card { background: var(--bg-elev); border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 24px -18px rgb(0 0 0 / 45%); padding: 1.15rem 1.35rem 1.35rem; margin: 0 0 1.5rem; } /* The stripe is the at-a-glance answer to "can this person reach the Studio?" */ .devs .dev-card.is-dev { border-left-color: var(--accent); } .devs .dev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule); } .devs .dev-ident { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .devs .dev-email { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .devs .dev-name { color: var(--muted); } .devs .dev-meta { color: var(--muted); font-size: 0.82rem; display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 1.1rem; } .devs .dev-meta code { color: var(--fg); } /* Fields on one grid so Name / OS username / GitHub stop staggering. */ .devs .dev-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; align-items: start; margin: 0 0 1.1rem; max-width: 52rem; } .devs .dev-fields .dev-actions { align-self: end; } /* Recessed: the grants are a distinct zone inside the person's card. */ .devs .dev-access { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1.1rem 1.1rem; } .devs .dev-access-head { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.85rem; } .devs .dev-access-head strong { color: var(--fg); } .devs .dev-grants { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .devs .dev-grant { display: flex; flex-direction: column; gap: 0.4rem; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.75rem; } .devs .dev-grant-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .devs .dev-grant-name { font-weight: 600; font-size: 0.92rem; } .devs .dev-grant-slug { color: var(--muted); font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Access level as its own colour language, deliberately NOT the brand accent: the accent already means "is a developer" on the card stripe. */ .devs .lvl { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .devs .lvl-lead { color: #d9a441; background: color-mix(in srgb, #d9a441 15%, transparent); } .devs .lvl-dev { color: #4bb3a0; background: color-mix(in srgb, #4bb3a0 15%, transparent); } .devs .lvl-read { color: #7f92a8; background: color-mix(in srgb, #7f92a8 15%, transparent); } .devs .lvl-none { color: var(--muted); border-color: var(--rule); border-style: dashed; } .devs .dev-note { color: var(--muted); font-size: 0.88rem; margin: 0.9rem 0 0; } .devs .dev-add { margin-top: 2.25rem; }