/* ============================================================================ axion.css -- Axion Software standard theme Canonical source: axion_lib/static/axion.css (rsync into each product). Dark-first house theme: the brand cyan/blue/violet ramp over a near-black navy ground, Oswald for headings and Inter for body. Extracted from the legacy admin base template, whose palette already matched notify/static/nexus.css -- this file makes that agreement explicit so the next product does not re-derive it by eye. USAGE Load the fonts with a , not @import. The original template had its @import sitting below :root, where the spec requires every browser to ignore it -- the pages were silently falling back to system-ui the whole time. A also parallelises with the stylesheet instead of blocking on it. TOKENS are namespaced --ax-*. Products (as-www especially) already define bare --text/--border/--blue at different values, and an unprefixed theme would win or lose by load order. If a page wants the bare names anyway, add class="axion-legacy-vars" to to opt into the alias block at the bottom of this file. PER-PRODUCT ACCENT: override --ax-accent (and the -bright pair) in a product stylesheet loaded after this one. Everything accent-coloured keys off that one token. ========================================================================= */ /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tokens ──────────────────────────────────────────────────────────────── */ :root { /* Brand ramp */ --ax-cyan: #00cfff; --ax-cyan-bright: #71e5ff; --ax-blue: #3b6ff5; --ax-blue-bright: #527ff7; --ax-violet: #8b3ff5; --ax-violet-bright: #9b59f7; /* The accent is what links, focus rings and highlights use. Cyan by default; a product overrides this one token to re-key the whole theme. */ --ax-accent: var(--ax-cyan); --ax-accent-bright: var(--ax-cyan-bright); --ax-accent-rgb: 0, 207, 255; /* for rgba() tints -- keep in sync */ --ax-gradient: linear-gradient(135deg, var(--ax-blue), var(--ax-violet)); --ax-gradient-hover: linear-gradient(135deg, var(--ax-blue-bright), var(--ax-violet-bright)); --ax-gradient-text: linear-gradient(90deg, var(--ax-blue), var(--ax-violet)); /* Semantic status */ --ax-red: #cc0000; --ax-red2: #e50000; --ax-green: #22c55e; --ax-amber: #f59e0b; --ax-indigo: #6366f1; /* Ground and elevation. Each step is a lift, not a lighten-by-feel: bg is the page, surface a panel, surface2 an input well, surface3 a control, surface4 that control under the cursor. */ --ax-bg: #080b12; --ax-surface: #111622; --ax-surface2: #151b29; --ax-surface3: #1b2333; --ax-surface4: #252d40; --ax-border: #202a3b; --ax-border2: #2d3950; /* Type colour */ --ax-text: #eef2fa; --ax-muted: #9aa6ba; --ax-dim: #657188; --ax-radius: 6px; --ax-radius-lg: 10px; --ax-radius-pill: 999px; --ax-font-head: 'Oswald', system-ui, sans-serif; --ax-font-body: 'Inter', system-ui, sans-serif; --ax-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --ax-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); --ax-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); --ax-focus: 0 0 0 3px rgba(var(--ax-accent-rgb), 0.12); --ax-transition: 0.15s ease; --ax-z-sticky: 100; --ax-z-overlay: 3000; --ax-z-toast: 4000; } /* ── Base ────────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { background: var(--ax-bg); color: var(--ax-text); font-family: var(--ax-font-body); font-size: 14px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--ax-font-head); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; } h1 { font-size: 30px; } h2 { font-size: 22px; } h3 { font-size: 17px; } h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ax-muted); } a { color: var(--ax-accent); text-decoration: none; transition: color var(--ax-transition); } a:hover { color: var(--ax-accent-bright); } img, svg, video { max-width: 100%; display: block; } code, kbd, pre { font-family: var(--ax-font-mono); font-size: 0.92em; } hr { border: none; border-top: 1px solid var(--ax-border); margin: 18px 0; } /* Keyboard focus is visible everywhere; pointer focus stays quiet. Components below restyle :focus for their own look, but this is the floor. */ :focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; } ::selection { background: rgba(var(--ax-accent-rgb), 0.25); color: var(--ax-text); } /* ── Text helpers ────────────────────────────────────────────────────────── */ .ax-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ax-accent); } .ax-gradient-text { background: var(--ax-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ax-muted { color: var(--ax-muted); } .ax-dim { color: var(--ax-dim); } .ax-mono { font-family: var(--ax-font-mono); } /* ── Layout ──────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; } .stack > * + * { margin-top: 12px; } .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ── Cards and panels ────────────────────────────────────────────────────── */ .card { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); padding: 18px; } .card-hoverable { transition: border-color var(--ax-transition), transform var(--ax-transition); } .card-hoverable:hover { border-color: var(--ax-border2); transform: translateY(-2px); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -18px -18px 16px; padding: 14px 18px; border-bottom: 1px solid var(--ax-border); } .card-title { font-family: var(--ax-font-head); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; } .panel { background: var(--ax-surface2); border: 1px solid var(--ax-border); border-radius: var(--ax-radius); padding: 14px; } /* ── Forms ───────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 11px; font-weight: 500; color: var(--ax-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .form-control { width: 100%; background: var(--ax-surface2); border: 1px solid var(--ax-border2); color: var(--ax-text); border-radius: var(--ax-radius); padding: 9px 12px; font-family: var(--ax-font-body); font-size: 13px; line-height: 1.4; outline: none; transition: border-color var(--ax-transition), box-shadow var(--ax-transition); } .form-control::placeholder { color: var(--ax-dim); } .form-control:focus { border-color: var(--ax-accent); box-shadow: var(--ax-focus); } .form-control:disabled { opacity: 0.5; cursor: not-allowed; } .form-control.is-invalid { border-color: var(--ax-red2); box-shadow: 0 0 0 3px rgba(229, 0, 0, 0.12); } textarea.form-control { min-height: 92px; resize: vertical; } select.form-control { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ax-muted) 50%), linear-gradient(135deg, var(--ax-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form-hint { font-size: 11px; color: var(--ax-dim); margin-top: 4px; } .form-error { font-size: 11px; color: #ff8888; margin-top: 4px; } .form-row { display: flex; gap: 12px; } .form-row > .form-group { flex: 1; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: var(--ax-radius); font-size: 13px; font-weight: 500; font-family: var(--ax-font-body); line-height: 1.2; cursor: pointer; border: 1px solid var(--ax-border2); background: var(--ax-surface3); color: var(--ax-text); text-decoration: none; white-space: nowrap; transition: background var(--ax-transition), border-color var(--ax-transition), color var(--ax-transition), opacity var(--ax-transition); } /* The template hovered to #252525 -- a flat grey off the navy ramp, which read as a rendering bug next to the surrounding surfaces. surface4 is the same lift on-palette. */ .btn:hover { background: var(--ax-surface4); border-color: var(--ax-border2); color: var(--ax-text); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background: var(--ax-gradient); border-color: transparent; color: #fff; } .btn-primary:hover { background: var(--ax-gradient-hover); border-color: transparent; color: #fff; } .btn-ghost { background: transparent; border-color: var(--ax-border2); color: var(--ax-muted); } .btn-ghost:hover { background: var(--ax-surface3); color: var(--ax-text); } .btn-danger { background: var(--ax-red); border-color: transparent; color: #fff; } .btn-danger:hover { background: var(--ax-red2); border-color: transparent; color: #fff; } .btn-link { background: none; border-color: transparent; color: var(--ax-accent); padding: 4px 6px; } .btn-link:hover { background: none; color: var(--ax-accent-bright); } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-lg { padding: 13px 26px; font-size: 15px; } .btn-full { width: 100%; } .btn-icon { padding: 8px; width: 34px; height: 34px; } .btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; } /* ── Alerts ──────────────────────────────────────────────────────────────── */ .alert { padding: 10px 14px; border-radius: var(--ax-radius); font-size: 13px; margin-bottom: 12px; border: 1px solid transparent; } .alert-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #4ade80; } .alert-error { background: rgba(204, 0, 0, 0.12); border-color: rgba(204, 0, 0, 0.35); color: #ff8888; } .alert-warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #fcd34d; } .alert-info { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.30); color: #a5b4fc; } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: var(--ax-radius-pill); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge-green { background: rgba(34, 197, 94, 0.12); color: #4ade80; } .badge-red { background: rgba(204, 0, 0, 0.15); color: #ff8888; } .badge-amber { background: rgba(245, 158, 11, 0.12); color: #fcd34d; } .badge-blue { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; } .badge-cyan { background: rgba(var(--ax-accent-rgb), 0.14); color: var(--ax-cyan-bright); } .badge-gray { background: rgba(154, 166, 186, 0.14); color: var(--ax-muted); } /* ── Toggle ──────────────────────────────────────────────────────────────── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ax-border); } .toggle-row:last-child { border-bottom: none; } .toggle-name { font-size: 13px; color: var(--ax-text); font-weight: 500; } .toggle-desc { font-size: 11px; color: var(--ax-dim); margin-top: 2px; } .toggle-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--ax-surface3); border: 1px solid var(--ax-border2); border-radius: var(--ax-radius-pill); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: var(--ax-dim); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--ax-blue); border-color: var(--ax-blue); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: #fff; } .toggle-switch input:focus-visible + .toggle-slider { box-shadow: var(--ax-focus); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.45; cursor: not-allowed; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ax-muted); padding: 10px 14px; background: var(--ax-surface2); border-bottom: 1px solid var(--ax-border); white-space: nowrap; } .table td { padding: 11px 14px; border-bottom: 1px solid var(--ax-border); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .table-num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Tabs ────────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-border); overflow-x: auto; } .tab { padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--ax-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--ax-transition), border-color var(--ax-transition); } .tab:hover { color: var(--ax-text); } .tab.active { color: var(--ax-text); border-bottom-color: var(--ax-accent); } /* ── Modal and bottom sheet ──────────────────────────────────────────────── */ /* House rule: no confirm()/alert(). Desktop confirmations use .modal, the mobile surfaces use .sheet -- same markup inside, different envelope. */ .modal-backdrop { position: fixed; inset: 0; z-index: var(--ax-z-overlay); background: rgba(8, 11, 18, 0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; } .modal { width: 100%; max-width: 460px; background: var(--ax-surface); border: 1px solid var(--ax-border2); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-lg); padding: 20px; } .modal-title { font-family: var(--ax-font-head); font-size: 17px; font-weight: 600; margin-bottom: 8px; } .modal-body { font-size: 13px; color: var(--ax-muted); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ax-z-overlay); background: var(--ax-surface); border-top: 1px solid var(--ax-border2); border-radius: var(--ax-radius-lg) var(--ax-radius-lg) 0 0; box-shadow: var(--ax-shadow-lg); /* Clears the iOS home indicator without leaving a gap on other devices. */ padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; } .sheet-handle { width: 36px; height: 4px; border-radius: var(--ax-radius-pill); background: var(--ax-border2); margin: 0 auto 14px; } /* ── Misc ────────────────────────────────────────────────────────────────── */ .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ax-gradient); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; } .divider { height: 1px; background: var(--ax-border); margin: 16px 0; } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ax-border2); border-top-color: var(--ax-accent); animation: ax-spin 0.7s linear infinite; } @keyframes ax-spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 36px 18px; color: var(--ax-dim); font-size: 13px; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { flex-direction: column; gap: 0; } .container { padding: 0 14px; } /* iOS zooms the viewport when a focused input is under 16px. The 13px control is right on desktop and wrong on a phone, so it grows here rather than being compromised everywhere. */ .form-control { font-size: 16px; padding: 11px 12px; } /* Thumb-sized targets on the small surfaces. */ .btn { padding: 12px 20px; } .btn-sm { padding: 9px 14px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Legacy bare-name aliases (opt-in) ───────────────────────────────────── */ /* For pages still written against --text / --border / --blue. Add class="axion-legacy-vars" to . Not on :root, because as-www defines several of these names at different values and load order would decide the winner. Delete a product's use of this class once its templates move to --ax-*. */ .axion-legacy-vars { --axion-cyan: var(--ax-cyan); --axion-blue: var(--ax-blue); --axion-violet: var(--ax-violet); --red: var(--ax-red); --red2: var(--ax-red2); --bg: var(--ax-bg); --surface: var(--ax-surface); --surface2: var(--ax-surface2); --surface3: var(--ax-surface3); --border: var(--ax-border); --border2: var(--ax-border2); --text: var(--ax-text); --muted: var(--ax-muted); --dim: var(--ax-dim); --green: var(--ax-green); --amber: var(--ax-amber); --radius: var(--ax-radius); --radius-lg: var(--ax-radius-lg); --font-head: var(--ax-font-head); --font-body: var(--ax-font-body); } /* ── Sign-in ─────────────────────────────────────────────────────────────── */ /* The standalone sign-in shell: a centred card on the brand ground, used by every product's login page (as-nexus, as-login) so they stop each other drifting. Only the shell lives here -- the form inside is plain .card / .form-group / .btn-primary from the sections above, so a login page that loads axion.css needs no stylesheet of its own. The page is deliberately dark-only. A login carries no chrome and no theme toggle, so there is nothing to read a stored preference from. */ .ax-login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 20px calc(32px + env(safe-area-inset-bottom, 0px)); padding-top: calc(32px + env(safe-area-inset-top, 0px)); /* Cyan off the top-left, violet off the top-right -- the brand ramp as light on the ground rather than as another painted panel. */ background: radial-gradient(760px 460px at 15% -12%, rgba(0, 207, 255, 0.13), transparent 68%), radial-gradient(820px 520px at 88% 6%, rgba(139, 63, 245, 0.14), transparent 70%), var(--ax-bg); } .ax-login-box { width: 100%; max-width: 400px; } /* ── Head ── */ .ax-login-head { text-align: center; margin-bottom: 26px; } .ax-login-mark { width: 60px; height: 60px; margin: 0 auto 14px; display: block; border-radius: 14px; object-fit: contain; } .ax-login-title { font-family: var(--ax-font-head); font-size: 27px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.15; color: var(--ax-text); } .ax-login-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ax-dim); margin-top: 7px; } /* ── Card ── */ /* Rounder and more lifted than a content .card -- it is the only object on the page, so it reads as a slab rather than one panel among many. */ .ax-login-card { background: var(--ax-surface); border: 1px solid var(--ax-border2); border-radius: 18px; padding: 28px 26px; box-shadow: var(--ax-shadow-lg); } /* Roomier than the 13px content control: this is the one thing on the page the visitor has to hit, and the card has the space to give it. */ .ax-login-card .form-control { border-radius: var(--ax-radius-lg); padding: 12px 14px; font-size: 14px; } .ax-login-card .form-group { margin-bottom: 16px; } .ax-login-card .form-label { font-size: 11px; letter-spacing: 0.07em; } .ax-login-card .btn-primary { border-radius: var(--ax-radius-lg); padding: 13px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; margin-top: 4px; } /* ── Password reveal ── */ .ax-login-pw { position: relative; } .ax-login-pw .form-control { padding-right: 46px; } .ax-login-pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--ax-dim); transition: color var(--ax-transition); -webkit-tap-highlight-color: transparent; } .ax-login-pw-toggle:hover { color: var(--ax-muted); } .ax-login-pw-toggle:active { color: var(--ax-text); } /* A logo uploaded in product settings, which is free-form: it may be a square mark or a wide wordmark, so it is bounded on both axes and centred rather than forced into the square .ax-login-mark box. Screen-blended like the bundled art, since the Axion logo files all ship on a black plate. */ .ax-login-logo { display: block; width: auto; max-width: 300px; max-height: 175px; height: auto; margin: 0 auto 14px; object-fit: contain; mix-blend-mode: screen; } /* A wordmark logo spells the product out itself, so it stands in for the .ax-login-title line rather than sitting above it. Same screen blend as the powered-by badge: this art also ships on an opaque black plate. */ .ax-login-wordmark { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 14px; mix-blend-mode: screen; } /* ── Foot ── */ .ax-login-foot { text-align: center; margin-top: 20px; font-size: 11px; color: var(--ax-dim); } /* The powered-by badge ships as an opaque black plate. `screen` drops the black to nothing and leaves the glow sitting on the ground, which is why the page has to stay dark -- on a light surface screen would wash it out. */ .ax-login-powered { display: block; width: 100%; max-width: 210px; height: auto; margin: 24px auto 0; mix-blend-mode: screen; opacity: 0.85; transition: opacity var(--ax-transition); } .ax-login-powered:hover { opacity: 1; } /* ── Small screens ── */ @media (max-width: 480px) { .ax-login { padding-left: 16px; padding-right: 16px; } .ax-login-card { padding: 22px 18px; border-radius: 16px; } .ax-login-title { font-size: 24px; } .ax-login-mark { width: 54px; height: 54px; } /* 16px on the control comes from the global responsive block above -- it is what stops iOS zooming the viewport on focus. */ .ax-login-card .form-control { padding: 13px 14px; } .ax-login-logo { max-width: 230px; max-height: 140px; } .ax-login-wordmark { max-width: 230px; } .ax-login-powered { max-width: 180px; } } @media (max-height: 620px) { .ax-login { align-items: flex-start; } }