/* OneAxiom 2026 brand — see branding/BRANDING.md. All colors come from the --oa-* tokens (branding/oneaxiom-theme.css); components never hardcode hex. Dark is the default theme; light activates via data-theme="light" on . White-label brands may override the accent tokens at runtime (app.js). */ :root { --oa-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --oa-mono: "Cascadia Mono", Consolas, "SF Mono", monospace; /* ── DARK (default): teal-cast near-black ground ── */ --oa-canvas: linear-gradient(180deg, #0d2724 0%, #0a1f1c 55%, #071614 100%); --oa-canvas-flat: #0a1f1c; color-scheme: dark; --oa-text: #eef4f1; --oa-text-2: #9fb5ad; --oa-text-3: #6f8b83; --oa-panel: linear-gradient(180deg, #143430, #102a25); --oa-panel-solid: #112a26; --oa-border: rgba(90, 190, 150, 0.16); --oa-border-hover: rgba(0, 194, 150, 0.65); --oa-tint: rgba(0, 194, 150, 0.07); --oa-tint-hover: rgba(0, 194, 150, 0.1); --oa-accent: #00C296; /* highlighted text ONLY — never body text */ --oa-accent-hover: #2fd9ae; --oa-btn: #00A983; /* primary button fill; text is ALWAYS white */ --oa-btn-hover: #00C296; --oa-btn-ink: #ffffff; --oa-link: #00C296; --oa-link-hover: #2fd9ae; --oa-ok: #00c26a; --oa-warn: #f59e0b; --oa-warn-border: rgba(245, 158, 11, .5); --oa-danger: #ef4444; --oa-danger-border: rgba(239, 68, 68, .5); --oa-focus: rgba(0, 194, 150, 0.5); --oa-input-bg: rgba(7, 22, 20, 0.6); --oa-radius: 6px; } :root[data-theme="light"] { --oa-canvas: linear-gradient(180deg, #f8f9fa 0%, #f2f4f4 100%); --oa-canvas-flat: #f6f7f8; color-scheme: light; --oa-text: #16201d; --oa-text-2: #5f6f6a; --oa-text-3: #8a9793; --oa-panel: linear-gradient(180deg, #ffffff, #fcfdfd); --oa-panel-solid: #ffffff; --oa-border: #e4e8e7; --oa-border-hover: rgba(0, 152, 115, 0.6); --oa-tint: #e8f5ee; --oa-tint-hover: rgba(0, 71, 60, 0.06); /* #00C296 fails contrast for small text on white — text/links use the darkened variant; fills and buttons keep the true colors. */ --oa-accent: #009873; --oa-accent-hover: #008061; --oa-btn: #00A983; --oa-btn-hover: #00C296; --oa-btn-ink: #ffffff; --oa-link: #009873; --oa-link-hover: #008061; --oa-ok: #15803d; --oa-warn: #a15c00; --oa-danger: #b3261e; --oa-focus: rgba(0, 169, 131, 0.35); --oa-input-bg: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--oa-canvas-flat); background-image: var(--oa-canvas); background-attachment: fixed; color: var(--oa-text); font: 16px/1.55 var(--oa-font); min-height: 100vh; /* Sticky footer: main absorbs spare height so the footer sits at the bottom of the viewport even on short pages. */ display: flex; flex-direction: column; } main { flex: 1; } /* Include :visited or this rule repaints anchor-based buttons/chips (BRANDING.md rule 9). */ a, a:visited { color: var(--oa-link); } a:hover { color: var(--oa-link-hover); } header { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--oa-panel-solid); border-bottom: 1px solid var(--oa-border); } header .logo { display: flex; text-decoration: none; align-self: center; font-weight: 800; font-size: 26px; letter-spacing: -0.5px; color: var(--oa-text); line-height: 1; } /* Wordmark images (never redrawn): white on dark, green on light — swap per theme. */ header .logo img { height: 26px; display: block; } header .logo .logo-light { display: none; } :root[data-theme="light"] header .logo .logo-dark { display: none; } :root[data-theme="light"] header .logo .logo-light { display: block; } header .tag { font: 600 0.72rem var(--oa-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oa-text-3); align-self: center; padding-top: 3px; } header .spacer { flex: 1; } header .who { color: var(--oa-text-2); font-size: 14px; margin-left: 6px; } header a.btn-link, header a.btn-link:visited { color: var(--oa-accent); text-decoration: none; font-size: 14px; font-weight: 600; } #theme-btn, #help-btn { border: 1px solid var(--oa-border); background: transparent; color: var(--oa-text-2); border-radius: var(--oa-radius); width: 30px; height: 30px; cursor: pointer; font-size: 14px; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } #theme-btn:hover, #help-btn:hover { border-color: var(--oa-border-hover); color: var(--oa-accent); } main { max-width: 720px; margin: 32px auto; padding: 0 16px; width: 100%; } .card { background: var(--oa-panel); border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 30px 32px; margin-bottom: 18px; } h1 { font-size: 22px; margin: 0 0 14px; letter-spacing: -0.2px; } h2 { font-size: 18px; } p.lead { color: var(--oa-text-2); margin-top: 0; } /* wizard stepper */ .stepper { display: flex; align-items: center; gap: 10px; margin: 0 0 38px; font-size: 15px; } .stepper .step { display: flex; align-items: center; gap: 8px; color: var(--oa-text-3); } .stepper .dot { width: 26px; height: 26px; border-radius: var(--oa-radius); display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--oa-mono); border: 1px solid var(--oa-border); color: var(--oa-text-3); background: var(--oa-tint); } .stepper .step.active .dot { border-color: var(--oa-btn); background: var(--oa-btn); color: var(--oa-btn-ink); } .stepper .step.active { color: var(--oa-text); font-weight: 600; } .stepper .step.done .dot { border-color: var(--oa-btn); background: var(--oa-btn); color: var(--oa-btn-ink); } .stepper .bar { flex: 1; height: 1px; background: var(--oa-border); min-width: 24px; } textarea, input[type="text"], input[type="email"], input[type="password"], select { width: 100%; padding: 10px 12px; border: 1px solid var(--oa-border); border-radius: var(--oa-radius); background: var(--oa-input-bg); color: var(--oa-text); font: 0.95rem var(--oa-font); } textarea { min-height: 150px; resize: vertical; margin-top: 6px; } label.opt { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 15px; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; } .row > label { font-size: 14px; color: var(--oa-text-2); } button.primary { background: var(--oa-btn); color: var(--oa-btn-ink); border: 0; border-radius: var(--oa-radius); padding: 11px 22px; font: 600 0.9rem var(--oa-font); cursor: pointer; } button.primary:hover { background: var(--oa-btn-hover); } button.primary:disabled { opacity: 0.5; cursor: default; } button.secondary { background: transparent; color: var(--oa-accent); border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 10px 18px; font: 600 0.9rem var(--oa-font); cursor: pointer; } button.secondary:hover { border-color: var(--oa-border-hover); } .actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; } .linkbox { display: flex; gap: 8px; align-items: center; background: var(--oa-input-bg); border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 12px 14px; margin: 18px 0; } .linkbox code { flex: 1; overflow-wrap: anywhere; font: 13px var(--oa-mono); } .notice { border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 12px 14px; margin: 20px 0; font-size: 14px; background: var(--oa-tint); } .notice.ok { border-color: var(--oa-border-hover); color: var(--oa-accent); } .notice.warn { border-color: var(--oa-warn-border); background: transparent; color: var(--oa-warn); } .notice.danger { border-color: var(--oa-danger-border); background: transparent; color: var(--oa-danger); } .notice.info { color: var(--oa-text-2); } .secretbox { background: var(--oa-input-bg); border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px var(--oa-mono); } .bigchoice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .bigchoice button { padding: 28px 18px; font: 600 17px var(--oa-font); border-radius: var(--oa-radius); border: 1px solid var(--oa-border); background: var(--oa-panel); color: var(--oa-text); cursor: pointer; } .bigchoice button:hover { border-color: var(--oa-border-hover); color: var(--oa-accent); } .bigchoice small { display: block; font-weight: 400; color: var(--oa-text-2); margin-top: 6px; } .presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .presets button { border: 1px solid var(--oa-border); background: var(--oa-tint); color: var(--oa-text); border-radius: var(--oa-radius); padding: 7px 14px; font: 0.875rem var(--oa-font); cursor: pointer; } .presets button:hover { border-color: var(--oa-border-hover); color: var(--oa-accent); } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .chips .chip { background: var(--oa-tint); border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 3px 10px; font-size: 13px; } .chips .chip button { border: 0; background: none; color: var(--oa-text-2); cursor: pointer; } dialog { border: 1px solid var(--oa-border); border-radius: var(--oa-radius); width: min(780px, 94vw); background: var(--oa-panel-solid); color: var(--oa-text); padding: 0; } dialog::backdrop { background: rgba(0,0,0,.45); } dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--oa-border); } dialog .dlg-body { padding: 8px 20px 20px; height: 70vh; overflow-y: auto; font-size: 15px; color: var(--oa-text-2); } dialog .dlg-body h3 { color: var(--oa-accent); } dialog .dlg-body ol li, dialog .dlg-body ul li { margin: 6px 0; } .muted { color: var(--oa-text-2); font-size: 14px; } footer { text-align: center; color: var(--oa-text-3); font-size: 13px; padding: 24px; } [hidden] { display: none !important; } details { border: 1px solid var(--oa-border); border-radius: var(--oa-radius); margin: 10px 0; padding: 0 14px; } details summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--oa-accent); } details[open] summary { border-bottom: 1px solid var(--oa-border); } textarea:focus, input:focus, select:focus { outline: none; border-color: var(--oa-accent); box-shadow: 0 0 0 3px var(--oa-focus); } button:focus-visible, a:focus-visible { outline: 2px solid var(--oa-accent); outline-offset: 2px; } /* deliver step: A-or-B radio choice */ .deliver-nokey { margin-bottom: 30px; } .radio-choice { border: 1px solid var(--oa-border); border-radius: var(--oa-radius); padding: 16px 18px; margin: 12px 0; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .radio-choice.sel { border-color: var(--oa-border-hover); background: var(--oa-tint); } .radio-choice input[type="radio"] { margin-top: 5px; accent-color: var(--oa-btn); } .radio-choice .body { flex: 1; } .radio-choice .body > b { display: block; margin-bottom: 8px; } .radio-choice .controls { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; } .radio-choice .controls.dim { opacity: 0.45; } .chip { border: 1px solid var(--oa-border); background: var(--oa-tint); color: var(--oa-text); border-radius: var(--oa-radius); padding: 8px 16px; font: 0.875rem var(--oa-font); cursor: pointer; } .chip:hover, .chip.sel { border-color: var(--oa-border-hover); color: var(--oa-accent); } /* grouped-section form layout (compose/request) — uppercase mono labels are a signature brand detail (BRANDING.md rule 6). */ .sect-head { font: 600 0.72rem var(--oa-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oa-text-3); margin: 0 0 12px; } .hr { height: 1px; background: var(--oa-border); margin: 28px 0; border: 0; } .optrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; } .optrow .lbl b { display: block; font-size: 15px; font-weight: 600; } .optrow .lbl .muted { display: block; } .optrow select, .optrow input[type="text"] { width: auto; } .switch { position: relative; width: 40px; height: 22px; flex: none; cursor: pointer; } .switch input { display: none; } .switch span { position: absolute; inset: 0; border-radius: 22px; background: var(--oa-tint); border: 1px solid var(--oa-border); transition: .15s; } .switch span::after { content: ""; position: absolute; top: 2px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--oa-text-3); transition: .15s; } .switch input:checked + span { background: var(--oa-btn); border-color: var(--oa-btn); } .switch input:checked + span::after { transform: translateX(17px); background: #fff; } .switch input:disabled + span { opacity: .5; } .seg { display: inline-flex; border: 1px solid var(--oa-border); border-radius: var(--oa-radius); overflow: hidden; } .seg button { border: 0; background: transparent; color: var(--oa-text-2); padding: 8px 18px; font: 600 0.9rem var(--oa-font); cursor: pointer; } .seg button.on { background: var(--oa-btn); color: var(--oa-btn-ink); } /* get-link hero layout */ .bigcopy { display: flex; gap: 12px; align-items: stretch; } .bigcopy .linkbox { flex: 1; margin: 0; } .bigcopy .primary { min-width: 130px; font-size: 16px; } .ok-inline { color: var(--oa-ok); } details.rcpt { margin-top: 20px; } details.rcpt summary { cursor: pointer; color: var(--oa-accent); font-size: 14px; list-style: none; } details.rcpt summary::before { content: "\25B8 "; } details.rcpt[open] summary::before { content: "\25BE "; } .btn-stack { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; } .btn-stack small { font-size: 11px; opacity: .75; font-weight: 400; } footer a, footer a:visited { color: var(--oa-accent); text-decoration: none; } footer { line-height: 2; } /* dashed "Optional" subgroup */ .optional-group { position: relative; border: 1px dashed var(--oa-border); border-radius: var(--oa-radius); padding: 22px 18px 16px; margin: 18px 0 4px; } .optional-group .opt-tag { position: absolute; top: -9px; left: 14px; background: var(--oa-panel-solid); padding: 0 8px; font: 600 0.66rem var(--oa-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oa-text-3); } /* ---- admin view ---- */ .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .admin-table th, .admin-table td { padding: 6px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--oa-border); } .admin-table th { color: var(--oa-text-3); font-weight: 600; }