/* ========================================================================== AvoLink · app design system — avocloud brand v2.9.1 blueprint / CAD monochrome + coral spark + glass Every component that appears on more than one page lives here. It used to live inline in each template, redefined per file — which is exactly how the old purple/rounded look survived a rebrand attempt (BRANDING.md §10). Depends on avocloud.css for the --avo-* tokens; load that first. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- Local aliases → brand tokens. The templates address colour through these short names in the markup they still carry inline. Mapping them here is what recolours the whole app from one place instead of 110 hardcoded hex values. -------------------------------------------------------------------------- */ :root { --font: var(--avo-font-display); --font-brand: var(--avo-font-brand); --font-mono: var(--avo-font-mono); --font-num: var(--avo-font-massive); --bg: var(--avo-bg); --bg-soft: var(--avo-bg-soft); --sidebar-bg: var(--avo-bg-soft); --surface: var(--avo-surface); --surface-2: #101010; --border: var(--avo-border); --border-strong: var(--avo-border-strong); --primary: var(--avo-primary); --primary-hover: var(--avo-primary-hover); --primary-on: var(--avo-primary-on); --primary-dim: rgba(255, 107, 74, 0.12); --text: var(--avo-text); --muted: var(--avo-text-muted); --muted-2: var(--avo-text-muted-2); --muted-hover: var(--avo-text-muted-2); --ok: var(--avo-success); --warn: var(--avo-warning); --err: var(--avo-error); } /* The canvas lives on , not , so the fixed blueprint layer can sit at z-index -1 between them. If body carried the background it would paint over that layer (in-flow backgrounds paint after negative-z children). */ html { background: var(--avo-bg); } html, body { height: 100%; } body { background: transparent; color: var(--avo-text); font-family: var(--font); font-size: 14px; display: flex; flex-direction: column; padding-top: 4px; -webkit-font-smoothing: antialiased; } h1, h2 { font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.015em; } h3, h4 { font-family: var(--font); font-weight: 600; } code, kbd, samp { font-family: var(--font-mono); } /* -------------------------------------------------------------------------- Blueprint ground — BRANDING.md §6. A fine 40px line grid plus a sparser 200px crosshair layer, both fixed. They are not meant to line up; two independent scales read as depth. -------------------------------------------------------------------------- */ .blueprint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px; } /* -------------------------------------------------------------------------- Top accent — the coral ramp (avo-topbar). Replaces the v1 purple/pink/yellow. -------------------------------------------------------------------------- */ .top-accent { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--avo-coral-700), var(--avo-coral-500), var(--avo-coral-300), var(--avo-coral-500), var(--avo-coral-700)); background-size: 300% 100%; z-index: 1000; animation: gradient-move 8s ease infinite; } @keyframes gradient-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* -------------------------------------------------------------------------- Brand mark — the locked 4c-h mark, drawn inline. Never recolour the brackets/chevron; only the caret is coral (logo/README.md). -------------------------------------------------------------------------- */ .avo-mark { display: block; color: #EDEDED; } .avo-mark .caret { fill: var(--avo-coral-500); } .wordmark { font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; } .wordmark .suffix { color: var(--avo-primary); } /* ========================================================================== Topbar — glass. BRANDING.md §6b: dark tint, low blur, a lit top edge. It should read as the page itself one layer forward, not as a grey panel. ========================================================================== */ .topbar { height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; background: linear-gradient(var(--avo-glass-tint), var(--avo-glass-tint-2)); -webkit-backdrop-filter: blur(var(--avo-glass-blur)); backdrop-filter: blur(var(--avo-glass-blur)); box-shadow: inset 0 1px 0 var(--avo-glass-edge); border-bottom: 1px solid var(--border); position: sticky; top: 4px; z-index: 1001; } .topbar-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .topbar-icon { width: 26px; height: 26px; flex-shrink: 0; } .topbar-icon svg { width: 26px; height: 26px; } .topbar-name { font-family: var(--font-brand); font-size: 0.98rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; text-transform: uppercase; } .topbar-name .suffix { color: var(--avo-primary); } .topbar-right { display: flex; align-items: center; gap: 0.75rem; } .topbar-username { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); } .topbar-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .topbar-avatar-placeholder { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--muted); } /* ========================================================================== Layout / sidebar ========================================================================== */ .layout { display: flex; flex: 1; min-height: 0; } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 0.5rem; margin-right: 0.5rem; } .mobile-menu-btn svg { width: 22px; height: 22px; } .sidebar { width: 215px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--border); overflow-y: auto; height: calc(100vh - 56px); position: sticky; top: 56px; transition: transform var(--avo-dur-ui) var(--avo-ease-out); } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 998; opacity: 0; transition: opacity var(--avo-dur-ui) var(--avo-ease-out); } .sidebar-overlay.open { opacity: 1; } .sidebar-nav { flex: 1; padding: 1rem 0.625rem; display: flex; flex-direction: column; gap: 1.5rem; } /* section kicker in the sidebar — "// LINKS" */ .nav-section-label { display: flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding: 0 0.5rem; margin-bottom: 0.35rem; } .nav-section-label::before { content: "//"; color: var(--avo-primary); letter-spacing: 0; } .nav-section { display: flex; flex-direction: column; gap: 1px; } /* Hover is a wipe, not a dim (BRANDING.md §5b) — a coral rule grows from the left edge. transform only, so it costs nothing. */ .nav-item { position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0.44rem 0.6rem; border-radius: var(--avo-radius-sm); color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out); cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font); overflow: hidden; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--avo-primary); transform: scaleY(0); transform-origin: top; transition: transform var(--avo-dur-micro) var(--avo-ease-out); } .nav-item svg { width: 14px; height: 14px; flex-shrink: 0; } .nav-item:hover { color: var(--text); background: rgba(255,255,255,0.035); } .nav-item:hover::before { transform: scaleY(1); } /* Colour is never the only signal (§12) — the active item carries the rule too. */ .nav-item.active { color: var(--text); background: rgba(255,107,74,0.10); } .nav-item.active::before { transform: scaleY(1); } .nav-item.active svg { color: var(--avo-primary); } .sidebar-footer { padding: 0.75rem 0.625rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; } .sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.6rem; margin-bottom: 0.25rem; } .sidebar-user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sidebar-user-avatar-placeholder { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); flex-shrink: 0; } .sidebar-user-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } .main { flex: 1; min-width: 0; overflow-y: auto; } .main::-webkit-scrollbar { width: 6px; } .main::-webkit-scrollbar-track { background: transparent; } .main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); } @media (max-width: 768px) { .mobile-menu-btn { display: block; } .sidebar { position: fixed; left: 0; top: 56px; height: calc(100vh - 56px); z-index: 999; transform: translateX(-100%); width: 260px; max-width: 85vw; } .sidebar.open { transform: translateX(0); } .sidebar-overlay.open { display: block; } .topbar-name { font-size: 0.9rem; } .topbar-right { gap: 0.5rem; } .topbar-username { display: none; } } /* ========================================================================== Page furniture ========================================================================== */ .dash { padding: 2rem 2.25rem 3rem; max-width: var(--avo-maxw); margin: 0 auto; } .greeting { margin-bottom: 2rem; } .greeting h1 { font-family: var(--font-brand); font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; } .greeting h1 .avo-hl { color: var(--avo-primary); } .greeting-sub { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-top: 0.45rem; letter-spacing: 0.02em; } /* Section kicker — "// LABEL" with a hairline rule trailing off right. The rule is a real element on the site so it can draw itself; here it is a pseudo-element because nothing animates it (BRANDING.md §6). */ .section-label { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .section-label::before { content: "//"; color: var(--avo-primary); letter-spacing: 0; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; } .divider { height: 1px; background: var(--border); border: none; margin: 1.5rem 0; } @media (max-width: 768px) { .dash { padding: 1rem 1.25rem 2rem; } .greeting h1 { font-size: 1.4rem; } .header-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* ========================================================================== Buttons — BRANDING.md §8. Primary is a solid coral fill with BLACK text; white-on-coral is ~2.8:1 and fails. Mono label, 6px corners. ========================================================================== */ .btn, .btn-primary, .btn-submit, .btn-create, .btn-shorten, .btn-save { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; background: var(--avo-primary); color: var(--avo-primary-on); border: 1px solid var(--avo-primary); border-radius: var(--avo-radius-sm); cursor: pointer; transition: background var(--avo-dur-micro) var(--avo-ease-out), border-color var(--avo-dur-micro) var(--avo-ease-out), transform 0.06s; } .btn:hover, .btn-primary:hover, .btn-submit:hover, .btn-create:hover, .btn-shorten:hover, .btn-save:hover:not(:disabled) { background: var(--avo-primary-hover); border-color: var(--avo-primary-hover); } .btn:active, .btn-primary:active, .btn-submit:active, .btn-create:active, .btn-shorten:active { transform: translateY(1px); } .btn svg, .btn-primary svg, .btn-create svg, .btn-submit svg { width: 13px; height: 13px; } .btn-shorten:disabled, .btn-save:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* ghost / secondary — hairline, coral on hover */ .btn-ghost, .btn-secondary, .btn-cancel { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--avo-radius-sm); color: var(--text); cursor: pointer; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out), color var(--avo-dur-micro) var(--avo-ease-out); } .btn-ghost:hover, .btn-secondary:hover, .btn-cancel:hover { border-color: var(--avo-primary); background: rgba(255,107,74,0.08); } .btn-secondary svg, .btn-ghost svg { width: 13px; height: 13px; } /* danger — red stays distinct from coral on purpose (§3): coral is brand, red is danger. */ .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.55rem 1rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; background: transparent; border: 1px solid rgba(220,56,56,0.5); border-radius: var(--avo-radius-sm); color: var(--err); cursor: pointer; transition: background var(--avo-dur-micro) var(--avo-ease-out), border-color var(--avo-dur-micro) var(--avo-ease-out); } .btn-danger:hover { background: rgba(220,56,56,0.12); border-color: var(--err); } .modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .modal-actions .btn-cancel, .modal-actions .btn-submit, .modal-actions .btn-danger { flex: 1; } .btn-group { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } /* small icon buttons in table rows / list rows */ .action-btn, .copy-btn, .icon-btn, .row-btn, .api-key-copy, .custom-link-btn, .back-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 1px solid transparent; border-radius: var(--avo-radius-sm); cursor: pointer; color: var(--muted); padding: 0.3rem; text-decoration: none; transition: color var(--avo-dur-micro) var(--avo-ease-out), border-color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out); } .action-btn svg, .copy-btn svg, .icon-btn svg, .row-btn svg, .api-key-copy svg, .custom-link-btn svg { width: 14px; height: 14px; } .copy-btn svg { width: 12px; height: 12px; } .action-btn:hover, .copy-btn:hover, .icon-btn:hover, .row-btn:hover, .api-key-copy:hover, .custom-link-btn:hover { color: var(--avo-primary); border-color: var(--border); background: rgba(255,107,74,0.07); } .action-btn.danger:hover, .row-btn.del:hover { color: var(--err); border-color: rgba(220,56,56,0.35); background: rgba(220,56,56,0.10); } .actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.2rem; } .back-btn { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.6rem; margin-bottom: 1rem; border-color: var(--border); } .back-btn svg { width: 12px; height: 12px; } .back-btn:hover { color: var(--avo-primary); border-color: var(--avo-primary); background: transparent; } /* ========================================================================== Surfaces — hairline box, 8px, coral corner registration marks on hover. The marks scale out of the corner they trace; their own bend is card-radius (8) − inset (4) = 4px, or they cut across the curve (§6). ========================================================================== */ .card, .stat-card, .table-card, .data-card, .chart-card, .meta-card, .shortener-card { position: relative; background: var(--avo-surface); border: 1px solid var(--border); border-radius: var(--avo-radius-md); transition: border-color var(--avo-dur-ui) var(--avo-ease-out); } .card:hover, .stat-card:hover, .table-card:hover, .data-card:hover, .chart-card:hover, .meta-card:hover { border-color: var(--border-strong); } /* faint blueprint scan grid, fading in on hover — same idea as the marks, subtler (§6) */ .card::after, .stat-card::after, .data-card::after, .chart-card::after, .meta-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; transition: opacity var(--avo-dur-ui) var(--avo-ease-out); } .card:hover::after, .stat-card:hover::after, .data-card:hover::after, .chart-card:hover::after, .meta-card:hover::after { opacity: 1; } .mk { position: absolute; width: 8px; height: 8px; opacity: 0; transform: scale(0.2); pointer-events: none; z-index: 2; transition: opacity var(--avo-dur-micro) var(--avo-ease-out), transform var(--avo-dur-ui) var(--avo-ease-spring); } .mk.tl { top: 4px; left: 4px; border-top: 1px solid var(--avo-primary); border-left: 1px solid var(--avo-primary); border-top-left-radius: 4px; transform-origin: top left; } .mk.br { bottom: 4px; right: 4px; border-bottom: 1px solid var(--avo-primary); border-right: 1px solid var(--avo-primary); border-bottom-right-radius: 4px; transform-origin: bottom right; } .card:hover .mk, .stat-card:hover .mk, .table-card:hover .mk, .data-card:hover .mk, .chart-card:hover .mk, .meta-card:hover .mk { opacity: 1; transform: scale(1); } .card { padding: var(--avo-space-5); } /* ========================================================================== Stats — Anton for the figure, per §4 (display numbers only, never body). ========================================================================== */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 2rem; } .stat-card { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.9rem; } .stat-icon { width: 34px; height: 34px; border-radius: var(--avo-radius-sm); border: 1px solid var(--border); background: rgba(255,107,74,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon svg { width: 15px; height: 15px; color: var(--avo-primary); } .stat-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 0.2rem; } .stat-value { font-family: var(--font-num); font-size: 1.7rem; font-weight: 400; color: var(--text); line-height: 1; letter-spacing: 0.01em; } @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } } /* ========================================================================== Tables ========================================================================== */ .table-card { overflow: hidden; } .table-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); } .table-card-header h2 { font-family: var(--font); font-size: 0.85rem; font-weight: 600; color: var(--text); letter-spacing: 0; } /* bracket chip: "[ 12 ]" — literal brackets in coral, not a rounded pill (§6) */ .table-count { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); border-radius: var(--avo-radius-sm); padding: 0.1rem 0.5rem; } .table-count::before { content: "["; color: var(--avo-primary); margin-right: 0.3em; opacity: 0.7; } .table-count::after { content: "]"; color: var(--avo-primary); margin-left: 0.3em; opacity: 0.7; } table { width: 100%; border-collapse: collapse; } thead th { padding: 0.55rem 1rem; text-align: left; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; } thead th:last-child { text-align: right; } tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background var(--avo-dur-micro) var(--avo-ease-out); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: rgba(255,255,255,0.025); } td { padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--text); vertical-align: middle; } td:last-child { text-align: right; } /* The table is wider than the 1180px measure on most pages, so it scrolls inside its own container at every width — not only under 768px. Without this the table pushes .dash past the viewport and the whole page scrolls sideways. (It used to be an inline style= on each page; when those were consolidated the desktop case was the one that got lost.) */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .slug-cell { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .slug-text { font-family: var(--font-mono); font-size: 0.77rem; color: var(--avo-primary); } .target-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; } @media (max-width: 768px) { .table-card-header { flex-direction: column; align-items: flex-start; padding: 0.75rem 1rem; } .table-wrap table { min-width: 700px; } td { padding: 0.6rem 0.75rem; font-size: 0.78rem; } } /* ========================================================================== Badges — mono. The pill is the one deliberately-rounded exception (§8). Semantic colours, not brand coral: coral marks, it never means (§12). ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: var(--avo-radius-pill); border: 1px solid transparent; } .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .badge-active { background: rgba(70,167,88,0.10); color: var(--ok); border-color: rgba(70,167,88,0.30); } .badge-active::before { background: var(--ok); } .badge-expired { background: rgba(220,56,56,0.10); color: var(--err); border-color: rgba(220,56,56,0.30); } .badge-expired::before { background: var(--err); } .badge-protected { background: rgba(255,107,74,0.10); color: var(--avo-primary); border-color: rgba(255,107,74,0.30); } .badge-protected::before { background: var(--avo-primary); } /* ========================================================================== Forms ========================================================================== */ .form-group { margin-bottom: 1rem; } .form-row { display: flex; gap: 0.75rem; } .form-row > * { flex: 1; } .form-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; } .form-label .req { color: var(--avo-primary); } .form-label .opt { opacity: 0.55; } .form-input, .social-input, .profile-link-input, .section-label-input, select.form-input, textarea.form-input { width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--avo-radius-sm); background: rgba(255,255,255,0.02); border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; outline: none; transition: border-color var(--avo-dur-micro) var(--avo-ease-out); } .form-input:focus, .social-input:focus, .profile-link-input:focus, .section-label-input:focus { border-color: var(--avo-primary); } .form-input::placeholder, .social-input::placeholder, .profile-link-input::placeholder, .section-label-input::placeholder { color: rgba(255,255,255,0.22); } textarea.form-input { font-family: var(--font); resize: vertical; } /* slug field: a mono prefix chip welded to the input */ .slug-input-wrap { display: flex; border: 1px solid var(--border-strong); border-radius: var(--avo-radius-sm); overflow: hidden; transition: border-color var(--avo-dur-micro) var(--avo-ease-out); } .slug-input-wrap:focus-within { border-color: var(--avo-primary); } .slug-input-wrap.error { border-color: var(--err); } .slug-input-wrap.error .slug-prefix { color: var(--err); background: rgba(220,56,56,0.06); } .slug-input-wrap.error .slug-input, .slug-input.error { color: var(--err); } .slug-prefix { padding: 0.55rem 0.6rem; background: rgba(255,255,255,0.03); color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; border-right: 1px solid var(--border); white-space: nowrap; } .slug-input { flex: 1; padding: 0.55rem 0.75rem; background: transparent; border: none; color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; outline: none; } .slug-input::placeholder { color: rgba(255,255,255,0.22); } .slug-error-msg { font-family: var(--font-mono); font-size: 0.68rem; color: var(--err); margin-top: 0.35rem; display: none; } .slug-error-msg.visible { display: block; } /* segmented toggle */ .slug-type-toggle { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .slug-type-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: var(--avo-radius-sm); border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out); } .slug-type-btn svg { width: 13px; height: 13px; } .slug-type-btn:hover:not(.active) { color: var(--text); border-color: var(--border-strong); } .slug-type-btn.active { color: var(--avo-primary); border-color: var(--avo-primary); background: rgba(255,107,74,0.08); } /* toggle switch */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; } .toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--text); } .toggle-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; } .toggle { position: relative; display: inline-block; flex-shrink: 0; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { display: block; width: 38px; height: 21px; border-radius: var(--avo-radius-pill); background: rgba(255,255,255,0.08); border: 1px solid var(--border-strong); cursor: pointer; transition: background var(--avo-dur-micro) var(--avo-ease-out), border-color var(--avo-dur-micro) var(--avo-ease-out); } .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: transform var(--avo-dur-ui) var(--avo-ease-spring), background var(--avo-dur-micro) var(--avo-ease-out); } .toggle input:checked + .toggle-track { background: var(--avo-primary); border-color: var(--avo-primary); } .toggle input:checked + .toggle-track::after { transform: translateX(17px); background: var(--avo-primary-on); } /* ========================================================================== Modals ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop.open { display: flex; } .modal-box { background: var(--avo-bg-soft); border: 1px solid var(--border-strong); border-radius: var(--avo-radius-md); box-shadow: inset 0 1px 0 var(--avo-glass-edge); padding: 1.5rem; width: 100%; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); display: inline-flex; align-items: center; gap: 0.55em; } .modal-title::before { content: "//"; color: var(--avo-primary); } .modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; transition: color var(--avo-dur-micro) var(--avo-ease-out); } .modal-close:hover { color: var(--avo-primary); } .modal-close svg { width: 17px; height: 17px; } @media (max-width: 540px) { .modal-backdrop { padding: 0.75rem; } .modal-box { padding: 1.25rem 1rem; max-height: 90vh; overflow-y: auto; } .modal-header { margin-bottom: 1rem; } } /* ========================================================================== Empty states ========================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem; gap: 0.5rem; text-align: center; } .empty-icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--avo-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem; } .empty-icon svg { width: 20px; height: 20px; color: var(--muted); } .empty-title { font-size: 0.9rem; font-weight: 600; color: var(--text); } .empty-sub { font-size: 0.8rem; color: var(--muted); } .empty-row { padding: 1.5rem 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } /* ========================================================================== Toasts ========================================================================== */ .toast, #copyToast, #profileToast { position: fixed; bottom: 1.5rem; right: 1.5rem; display: none; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: var(--avo-radius-sm); background: var(--avo-bg-soft); border: 1px solid var(--avo-primary); color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; z-index: 2000; } .toast.show, #copyToast.show, #profileToast.show { display: flex; } .toast svg, #copyToast svg, #profileToast svg { width: 14px; height: 14px; color: var(--avo-primary); } /* ========================================================================== Stats pages — meta grid, data lists, charts ========================================================================== */ .stats-wrap { padding: 2rem 2.25rem 3rem; max-width: var(--avo-maxw); margin: 0 auto; } .dest-row { display: flex; align-items: center; gap: 0.75rem; } .dest-icon { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--avo-radius-sm); background: rgba(255,107,74,0.07); display: flex; align-items: center; justify-content: center; } .dest-icon svg { width: 15px; height: 15px; color: var(--avo-primary); } .dest-info { min-width: 0; } .dest-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.15rem; } .dest-url { display: block; font-size: 0.85rem; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--avo-dur-micro) var(--avo-ease-out); } .dest-url:hover { color: var(--avo-primary); } .dest-slug { display: flex; align-items: baseline; gap: 0.5rem; } .dest-slug-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); } .dest-slug-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--avo-primary); } .meta-card { padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .meta-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.25rem; } .meta-value { font-size: 0.85rem; color: var(--text); font-weight: 500; } .meta-text { font-size: 0.85rem; color: var(--muted); } .bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .data-card { overflow: hidden; } .data-card-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border); } .card-title { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .card-title::before { content: "//"; color: var(--avo-primary); letter-spacing: 0; } .data-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); } .data-row:last-child { border-bottom: none; } .data-row-left { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1; } .data-row-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .data-name { font-size: 0.8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-name.muted { color: var(--muted); } .data-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--avo-primary); } .flag { font-size: 1rem; flex-shrink: 0; } .progress-bar { width: 60px; height: 3px; background: rgba(255,255,255,0.07); overflow: hidden; flex-shrink: 0; } .progress-fill { height: 100%; background: var(--avo-primary); } .chart-card { padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; } .chart-wrap { height: 220px; position: relative; } @media (max-width: 768px) { .stats-wrap { padding: 1rem 1.25rem 2rem; } .bottom-grid { grid-template-columns: 1fr; } } /* ========================================================================== Centred single-purpose pages (404 / expired / password) ========================================================================== */ .wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; gap: 1rem; } .icon-wrap { width: 52px; height: 52px; border: 1px solid var(--border-strong); border-radius: var(--avo-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .icon-wrap svg { width: 22px; height: 22px; color: var(--avo-primary); } .sub { font-size: 0.9rem; color: var(--muted); max-width: 42ch; } .cta-note { font-size: 0.8rem; color: var(--muted); } .footer-note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); padding: 1.5rem 1rem; text-align: center; } .footer-note span { color: var(--avo-primary); } .error { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--err); } .error svg { width: 14px; height: 14px; flex-shrink: 0; } /* ========================================================================== avocloud footer badge — bracket chip, not a purple pill ========================================================================== */ .avo-footer { padding: 1.5rem 1rem; text-align: center; margin-top: auto; } .avo-credit { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: var(--avo-radius-sm); color: var(--muted); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), color var(--avo-dur-micro) var(--avo-ease-out); } .avo-credit:hover { border-color: var(--avo-primary); color: var(--text); } .avo-credit svg { width: 14px; height: 14px; } .avo-credit strong { font-family: var(--font-brand); font-weight: 800; letter-spacing: 0.02em; color: var(--text); } .avo-credit strong .suffix { color: var(--avo-primary); } /* ========================================================================== Reduced motion — BRANDING.md §5b. Motion here is always decoration. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== QR customiser (base.html modal) ========================================================================== */ .qr-preview-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; } .qr-preview-img { width: 200px; height: 200px; object-fit: contain; border-radius: var(--avo-radius-md); background: #fff; display: block; } .qr-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.1rem; } .qr-style-tile input { position: absolute; opacity: 0; width: 0; height: 0; } .qr-style-tile-inner { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.6rem 0.4rem; border-radius: var(--avo-radius-sm); cursor: pointer; border: 1px solid var(--border); background: transparent; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out); } .qr-style-tile-inner svg { width: 28px; height: 28px; color: var(--muted); } .qr-style-tile-inner span { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } .qr-style-tile input:checked + .qr-style-tile-inner { border-color: var(--avo-primary); background: rgba(255,107,74,0.08); } .qr-style-tile input:checked + .qr-style-tile-inner svg, .qr-style-tile input:checked + .qr-style-tile-inner span { color: var(--avo-primary); } .qr-colors-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .qr-color-group { flex: 1; } .qr-color-group label { display: block; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.35rem; } .qr-color-input { width: 100%; height: 36px; border-radius: var(--avo-radius-sm); border: 1px solid var(--border-strong); cursor: pointer; background: none; padding: 2px; } /* ========================================================================== Misc app bits ========================================================================== */ .delete-icon-wrap { width: 40px; height: 40px; margin: 0 auto 0.75rem; border: 1px solid rgba(220,56,56,0.35); border-radius: var(--avo-radius-md); display: flex; align-items: center; justify-content: center; } .delete-icon-wrap svg { width: 18px; height: 18px; color: var(--err); } .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; } @media (max-width: 768px) { .quick-actions-grid { grid-template-columns: 1fr; } } /* ========================================================================== Landing page (welcome.html) ========================================================================== */ .header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--text); } .brand-icon { width: 30px; height: 30px; flex-shrink: 0; } .brand-icon svg { width: 30px; height: 30px; } .brand-name { font-family: var(--font-brand); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; } .brand-name .suffix { color: var(--avo-primary); } .header-actions { display: flex; gap: 0.65rem; align-items: center; } .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--avo-section-pad-y) var(--avo-container-pad); text-align: center; gap: 0; } .hero-subtitle { font-size: 1rem; color: var(--muted); max-width: var(--avo-measure); margin: 1.1rem 0 2.5rem; } .shortener-card { width: 100%; max-width: 560px; padding: 1.25rem; text-align: left; } .input-group { display: flex; gap: 0.5rem; } .url-input { flex: 1; padding: 0.7rem 0.9rem; border-radius: var(--avo-radius-sm); background: rgba(255,255,255,0.02); border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-mono); font-size: 0.85rem; outline: none; transition: border-color var(--avo-dur-micro) var(--avo-ease-out); } .url-input:focus { border-color: var(--avo-primary); } .url-input::placeholder { color: rgba(255,255,255,0.25); } .result-card { display: none; margin-top: 0.9rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(255,107,74,0.35); border-radius: var(--avo-radius-sm); align-items: center; gap: 0.75rem; } .result-card.show { display: flex; } .result-url { flex: 1; font-family: var(--font-mono); font-size: 0.82rem; color: var(--avo-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-copy { padding: 0.35rem 0.7rem; border-radius: var(--avo-radius-sm); background: transparent; border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), color var(--avo-dur-micro) var(--avo-ease-out); } .btn-copy:hover { border-color: var(--avo-primary); color: var(--avo-primary); } .btn-copy.copied { border-color: var(--ok); color: var(--ok); } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 3rem; width: 100%; max-width: 860px; } .feature { position: relative; text-align: left; padding: 1.25rem; } .feature-icon { width: 34px; height: 34px; margin-bottom: 0.9rem; border: 1px solid var(--border); border-radius: var(--avo-radius-sm); background: rgba(255,107,74,0.07); display: flex; align-items: center; justify-content: center; } .feature-icon svg { width: 16px; height: 16px; color: var(--avo-primary); } .feature-title { font-family: var(--font-brand); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; } .feature-desc { font-size: 0.82rem; color: var(--muted); } @media (max-width: 768px) { .header { padding: 1rem 1.25rem; } .features { grid-template-columns: 1fr; } .input-group { flex-direction: column; } .btn-shorten { width: 100%; } } /* ========================================================================== 404 ========================================================================== */ .header-tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--avo-radius-sm); padding: 0.2rem 0.5rem; } .header-tag::before { content: "["; color: var(--avo-primary); margin-right: 0.35em; opacity: 0.7; } .header-tag::after { content: "]"; color: var(--avo-primary); margin-left: 0.35em; opacity: 0.7; } .error-code { font-family: var(--font-num); font-size: clamp(4rem, 18vw, 9rem); line-height: 0.9; color: var(--text); letter-spacing: 0.02em; } .error-code span { color: var(--avo-primary); } .description { font-size: 0.9rem; color: var(--muted); max-width: 46ch; } .info-box { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 460px; margin-top: 0.5rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: var(--avo-radius-md); text-align: left; } .info-box svg { width: 15px; height: 15px; color: var(--avo-primary); flex-shrink: 0; margin-top: 1px; } .info-box p { font-size: 0.78rem; color: var(--muted); } .info-box code { color: var(--avo-primary); font-size: 0.76rem; } /* ========================================================================== Profile settings ========================================================================== */ .profile-page { padding: 2rem 2.25rem 7rem; max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .profile-page { padding: 1rem 1.25rem 7rem; } } .sub-heading { font-family: var(--font); font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } .card-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 1.25rem; } /* Space scale only (BRANDING §6): the page was running 1rem gaps between a kicker, its card, and the next kicker, so the three read as one column of undifferentiated blocks. */ .profile-page .section-label { margin-top: var(--avo-space-7); } .profile-page .section-label:first-of-type { margin-top: 0; } .profile-page > form > .card, .profile-page > .card { margin-bottom: 0; } .profile-page .card { padding: var(--avo-space-5); } .profile-url-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; } .profile-url-row a { color: var(--avo-primary); text-decoration: underline; text-underline-offset: 3px; } .profile-url-row a:hover { color: var(--avo-primary-hover); } .api-key-wrap { display: flex; gap: 0.5rem; align-items: stretch; } .api-key-display { flex: 1; padding: 0.55rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--avo-radius-sm); background: rgba(255,255,255,0.02); font-family: var(--font-mono); font-size: 0.78rem; color: var(--avo-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-key-copy { border-color: var(--border-strong); padding: 0.4rem 0.7rem; } .section-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; } .section-label-input { flex: 1; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; } .social-row { display: flex; align-items: center; gap: 0.55rem; } .social-icon { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--avo-radius-sm); display: flex; align-items: center; justify-content: center; } .social-icon svg { width: 15px; height: 15px; color: var(--muted); } .social-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 0.25rem; } /* ── Profile links list ───────────────────────────────────────────────── Three stacked lines per row (title / url / stats). They need a rhythm of their own or the row reads as one block of text with no hierarchy. */ .custom-link-row { display: flex; align-items: center; gap: 1rem; /* Indented against the section rows below, so a link reads as sitting under the heading above it. The list is flat in the DOM — sections and links are siblings — so the grouping has to come from the inset. */ padding: 0.85rem 0.25rem 0.85rem 1.1rem; border-bottom: 1px solid var(--border); } .custom-link-row:last-child { border-bottom: none; } .custom-link-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .custom-link-title { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.2; } .custom-link-url, .custom-link-desc { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-link-desc { font-family: var(--font); } .custom-link-stats { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); opacity: 0.75; } .custom-link-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; } /* A section divider is a heading in the list, not another link — give it air above so it reads as the start of a group. */ .custom-link-row.section-row { gap: 0.6rem; padding: 0.6rem 0.25rem; margin-top: 1.5rem; border-bottom: 1px solid var(--border-strong); } .custom-link-row.section-row:first-child { margin-top: 0; } .row-actions { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .inline-code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--avo-primary); padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; } /* theme / style / font pickers */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0.6rem; } .theme-swatch-label { display: block; cursor: pointer; text-align: center; } .theme-swatch-label input { position: absolute; opacity: 0; width: 0; height: 0; } .swatch-ring { display: block; height: 46px; border: 1px solid var(--border); border-radius: var(--avo-radius-md); padding: 4px; transition: border-color var(--avo-dur-micro) var(--avo-ease-out); } .swatch-inner { display: block; width: 100%; height: 100%; border-radius: 4px; } .swatch-name { display: block; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.35rem; } .theme-swatch-label input:checked + .swatch-ring { border-color: var(--avo-primary); } .theme-swatch-label input:checked ~ .swatch-name { color: var(--avo-primary); } .style-options, .font-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; } .style-opt-label, .font-opt-label { display: block; cursor: pointer; } .style-opt-label input, .font-opt-label input { position: absolute; opacity: 0; width: 0; height: 0; } .style-opt-box, .font-opt-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 0.5rem; border: 1px solid var(--border); border-radius: var(--avo-radius-sm); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted); text-align: center; transition: border-color var(--avo-dur-micro) var(--avo-ease-out), color var(--avo-dur-micro) var(--avo-ease-out), background var(--avo-dur-micro) var(--avo-ease-out); } .style-opt-box .opt-icon { font-size: 1.1rem; line-height: 1; } .style-opt-label input:checked + .style-opt-box, .font-opt-label input:checked + .font-opt-box { border-color: var(--avo-primary); color: var(--avo-primary); background: rgba(255,107,74,0.08); } /* ── Save bar ─────────────────────────────────────────────────────────── One save for the page, shown only while something is unsaved. Same shape as the Baxi dashboard's: parked below the bottom edge, slid up on .is-open. A bar that is always there reads as page furniture and stops meaning "you have changes". */ .avo-save-bar { position: fixed; bottom: 1.25rem; left: 50%; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.7rem 0.6rem 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--avo-radius-md); background: linear-gradient(var(--avo-glass-tint), var(--avo-glass-tint-2)); -webkit-backdrop-filter: blur(var(--avo-glass-blur)); backdrop-filter: blur(var(--avo-glass-blur)); box-shadow: inset 0 1px 0 var(--avo-glass-edge); /* translateX carries the centring, so both axes have to be restated in the open state. */ transform: translate(-50%, calc(100% + 1.25rem)); transition: transform var(--avo-dur-ui) var(--avo-ease-out); } .avo-save-bar.is-open { transform: translate(-50%, 0); } /* display:flex outranks the UA rule for [hidden], so the no-JS state has to be restated — otherwise the bar shows on a page whose script never ran. */ .avo-save-bar[hidden] { display: none; } /* Hidden from the tab order while parked: a button off the bottom of the screen that still takes focus is a keyboard trap you cannot see. */ .avo-save-bar:not(.is-open) { visibility: hidden; } .avo-save-bar__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } @media (max-width: 640px) { .avo-save-bar { left: 0; right: 0; bottom: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none; justify-content: space-between; transform: translateY(100%); } .avo-save-bar.is-open { transform: translateY(0); } } .btn-save--saved { background: var(--ok); border-color: var(--ok); color: #000; } .btn-save--error { background: var(--err); border-color: var(--err); color: #fff; } .spinner { width: 12px; height: 12px; border: 2px solid rgba(0,0,0,0.25); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn-save--saved .spinner, .btn-save--error .spinner { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* quick-action tiles */ .quick-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--text); } .quick-card-title { font-size: 0.88rem; font-weight: 600; } .quick-card-desc { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; } /* table cell helpers — replace the inline style= attributes the pages carried */ td.cell-muted { color: var(--muted); font-size: 0.8rem; white-space: nowrap; } td.cell-num { font-family: var(--font-mono); color: var(--text); } .cell-link { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--avo-primary); text-decoration: none; } .cell-link:hover { color: var(--avo-primary-hover); text-decoration: underline; text-underline-offset: 3px; } .table-more { text-align: center; padding: 0.9rem; border-top: 1px solid var(--border); }