/* Brendan Dower • Freelance AV • UI Style Guide (Core CSS) Notes: - Light/Dark via [data-theme="light|dark"] on - Prefer semantic variables (e.g. --surface-1) over raw colors. */ :root{ /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --leading-tight: 1.2; --leading-normal: 1.55; /* Layout */ --container: 1120px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 8px 22px rgba(0,0,0,.14); --shadow-lg: 0 18px 50px rgba(0,0,0,.20); /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; /* Color tokens (HSL for easy tweaks) */ --h-bg: 225; --s-bg: 24%; --h-brand: 208; --s-brand: 90%; --h-success: 150; --s-success: 60%; --h-warning: 38; --s-warning: 90%; --h-danger: 358; --s-danger: 76%; /* Light theme defaults */ --bg: hsl(var(--h-bg) var(--s-bg) 98%); --surface-1: hsl(var(--h-bg) var(--s-bg) 100%); --surface-2: hsl(var(--h-bg) var(--s-bg) 96%); --surface-3: hsl(var(--h-bg) var(--s-bg) 93%); --text: hsl(222 25% 12%); --muted: hsl(223 14% 38%); --border: hsl(223 18% 85%); --ring: hsla(var(--h-brand) var(--s-brand) 50% / .45); --brand: hsl(var(--h-brand) var(--s-brand) 50%); --brand-2: hsl(244 84% 60%); --success: hsl(var(--h-success) var(--s-success) 38%); --warning: hsl(var(--h-warning) var(--s-warning) 45%); --danger: hsl(var(--h-danger) var(--s-danger) 52%); --link: hsl(var(--h-brand) var(--s-brand) 42%); --code-bg: hsl(222 30% 96%); --code-border: hsl(222 18% 86%); --focus-outline: 3px; color-scheme: light; } html[data-theme="dark"]{ --bg: hsl(var(--h-bg) 18% 9%); --surface-1: hsl(var(--h-bg) 18% 12%); --surface-2: hsl(var(--h-bg) 18% 16%); --surface-3: hsl(var(--h-bg) 18% 20%); --text: hsl(0 0% 96%); --muted: hsl(225 10% 72%); --border: hsl(225 14% 26%); --ring: hsla(var(--h-brand) var(--s-brand) 55% / .40); --brand: hsl(var(--h-brand) var(--s-brand) 55%); --brand-2: hsl(244 84% 68%); --success: hsl(var(--h-success) 55% 48%); --warning: hsl(var(--h-warning) 90% 55%); --danger: hsl(var(--h-danger) 75% 62%); --link: hsl(var(--h-brand) var(--s-brand) 66%); --code-bg: hsl(225 18% 14%); --code-border: hsl(225 14% 24%); color-scheme: dark; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text); background: radial-gradient(1200px 700px at 25% 0%, hsla(var(--h-brand) var(--s-brand) 50% / .08), transparent 55%), radial-gradient(900px 600px at 80% 10%, hsla(244 84% 60% / .08), transparent 60%), var(--bg); } img{ max-width:100%; height:auto; } a{ color: var(--link); text-decoration: none; } a:hover{ text-decoration: underline; } code, pre{ font-family: var(--font-mono); } :focus-visible{ outline: var(--focus-outline) solid var(--ring); outline-offset: 3px; } .container{ max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-4); } .stack > * + *{ margin-top: var(--space-4); } .row{ display:flex; gap: var(--space-4); flex-wrap:wrap; align-items:center; } .grid{ display:grid; gap: var(--space-6); } .grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 900px){ .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px){ .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; } } hr{ border: none; height: 1px; background: var(--border); margin: var(--space-8) 0; } .topbar{ position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in oklab, var(--surface-1) 75%, transparent); border-bottom: 1px solid var(--border); } .topbar-inner{ max-width: var(--container); margin: 0 auto; padding: var(--space-3) var(--space-4); display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); } .brand{ display:flex; align-items:center; gap: var(--space-3); min-width: 220px; } .brand-badge{ width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow-sm); } .brand h1{ margin:0; font-size: var(--text-lg); line-height: var(--leading-tight); } .brand small{ color: var(--muted); display:block; margin-top: 2px; font-size: var(--text-xs); } .nav{ display:flex; gap: var(--space-2); flex-wrap:wrap; justify-content:flex-end; } .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface-1) 80%, transparent); color: var(--text); font-size: var(--text-sm); } .pill:hover{ text-decoration:none; background: var(--surface-2); } .h0{ font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1.05; margin: 0; letter-spacing: -0.02em; } .h1{ font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.15; margin: 0; letter-spacing: -0.01em; } .h2{ font-size: 1.25rem; line-height: 1.2; margin: 0; } .h3{ font-size: 1.05rem; line-height: 1.25; margin: 0; } .lead{ font-size: var(--text-lg); color: var(--muted); max-width: 70ch; } .muted{ color: var(--muted); } .kbd{ font-family: var(--font-mono); font-size: 0.85em; padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--surface-2); border-radius: 8px; } .card{ border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card.pad{ padding: var(--space-6); } .card.pad-sm{ padding: var(--space-4); } .card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .badge{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; } .badge.dot::before{ content:""; width:8px; height:8px; border-radius: 999px; background: var(--muted); } .badge.success{ border-color: color-mix(in oklab, var(--success) 40%, var(--border)); background: color-mix(in oklab, var(--success) 14%, var(--surface-2)); } .badge.success.dot::before{ background: var(--success); } .badge.warning{ border-color: color-mix(in oklab, var(--warning) 40%, var(--border)); background: color-mix(in oklab, var(--warning) 16%, var(--surface-2)); } .badge.warning.dot::before{ background: var(--warning); } .badge.danger{ border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); background: color-mix(in oklab, var(--danger) 12%, var(--surface-2)); } .badge.danger.dot::before{ background: var(--danger); } .badge.brand{ border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); background: color-mix(in oklab, var(--brand) 16%, var(--surface-2)); } .badge.brand.dot::before{ background: var(--brand); } .btn{ appearance:none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 10px 14px; font-weight: 650; font-size: var(--text-sm); line-height: 1; display:inline-flex; align-items:center; justify-content:center; gap: 10px; cursor:pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); user-select:none; } .btn:hover{ background: var(--surface-3); text-decoration:none; } .btn:active{ transform: translateY(1px); } .btn[disabled]{ opacity:.55; cursor:not-allowed; } .btn.primary{ border-color: color-mix(in oklab, var(--brand) 55%, var(--border)); background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 92%, black), var(--brand-2)); color: white; } .btn.primary:hover{ filter: brightness(1.03); } .btn.ghost{ background: transparent; } .btn.danger{ border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); background: color-mix(in oklab, var(--danger) 16%, var(--surface-2)); } .btn.sm{ padding: 8px 12px; font-size: var(--text-xs); } .btn.lg{ padding: 12px 18px; font-size: var(--text-md); } .btn-group{ display:flex; gap: var(--space-2); flex-wrap:wrap; } .field{ display:flex; flex-direction:column; gap: 8px; } .label{ font-weight: 650; font-size: var(--text-sm); } .hint{ color: var(--muted); font-size: var(--text-xs); } .input, .select, .textarea{ width: 100%; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius: 14px; padding: 12px 12px; font-size: var(--text-md); outline: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .input:focus, .select:focus, .textarea:focus{ border-color: color-mix(in oklab, var(--brand) 50%, var(--border)); box-shadow: 0 0 0 4px var(--ring); } .textarea{ min-height: 120px; resize: vertical; } .inline{ display:flex; gap: var(--space-3); align-items:center; flex-wrap:wrap; } .check{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface-1); border-radius: 14px; } .check input{ width: 18px; height: 18px; } .table-wrap{ width:100%; overflow:auto; border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .table{ width:100%; border-collapse: collapse; min-width: 720px; } .table th, .table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); text-align:left; vertical-align: top; } .table th{ font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); } .table tr:hover td{ background: color-mix(in oklab, var(--surface-2) 50%, transparent); } .table .num{ text-align:right; white-space:nowrap; } .alert{ border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); } .alert-title{ font-weight: 750; margin: 0 0 6px; } .alert p{ margin: 0; color: var(--muted); } .alert.success{ border-color: color-mix(in oklab, var(--success) 45%, var(--border)); background: color-mix(in oklab, var(--success) 10%, var(--surface-1)); } .alert.warning{ border-color: color-mix(in oklab, var(--warning) 55%, var(--border)); background: color-mix(in oklab, var(--warning) 10%, var(--surface-1)); } .alert.danger{ border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); background: color-mix(in oklab, var(--danger) 10%, var(--surface-1)); } .code{ border: 1px solid var(--code-border); background: var(--code-bg); border-radius: var(--radius-lg); padding: var(--space-4); overflow:auto; } .code pre{ margin:0; font-size: 0.9rem; line-height: 1.45; } .tabs{ display:flex; gap: var(--space-2); flex-wrap:wrap; } .tab{ border: 1px solid var(--border); background: var(--surface-1); color: var(--text); padding: 8px 12px; border-radius: 999px; cursor:pointer; font-size: var(--text-sm); font-weight: 650; } .tab[aria-selected="true"]{ border-color: color-mix(in oklab, var(--brand) 50%, var(--border)); background: color-mix(in oklab, var(--brand) 16%, var(--surface-1)); } .tabpanels{ margin-top: var(--space-4); } .acc{ border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background: var(--surface-1); } .acc-item + .acc-item{ border-top: 1px solid var(--border); } .acc-btn{ width:100%; background: transparent; border: none; color: var(--text); text-align:left; padding: var(--space-4) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); cursor:pointer; font-weight: 750; } .acc-btn:hover{ background: var(--surface-2); } .acc-panel{ padding: 0 var(--space-5) var(--space-4); color: var(--muted); } .acc-chevron{ width: 18px; height: 18px; border-radius: 8px; border: 1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-size: 12px; } .modal{ position: fixed; inset: 0; display:none; align-items:center; justify-content:center; padding: var(--space-6); background: rgba(0,0,0,.45); } .modal[aria-hidden="false"]{ display:flex; } .modal-dialog{ width: min(720px, 100%); border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; } .modal-header{ padding: var(--space-5); display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--surface-1) 80%, transparent); } .modal-title{ margin:0; font-size: var(--text-lg); } .modal-body{ padding: var(--space-5); } .modal-footer{ padding: var(--space-5); border-top: 1px solid var(--border); display:flex; justify-content:flex-end; gap: var(--space-2); flex-wrap:wrap; background: color-mix(in oklab, var(--surface-1) 80%, transparent); } .toasts{ position: fixed; right: var(--space-4); bottom: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3); z-index: 30; } .toast{ width: min(380px, calc(100vw - 2rem)); border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); } .toast-title{ margin:0; font-weight: 800; } .toast-msg{ margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); } .token{ border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--space-4); display:flex; flex-direction:column; gap: 10px; } .token-top{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); } .token-name{ font-family: var(--font-mono); font-size: 0.86rem; color: var(--muted); } .swatch{ width: 100%; height: 42px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b)); } .token-value{ font-family: var(--font-mono); font-size: 0.9rem; } .footer{ margin-top: var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); } .u-right{ margin-left:auto; } .u-center{ display:flex; align-items:center; justify-content:center; } .u-nowrap{ white-space:nowrap; } .u-w-100{ width:100%; } .u-mt-0{ margin-top:0; } .u-mt-2{ margin-top: var(--space-2); } .u-mt-4{ margin-top: var(--space-4); } .u-mt-6{ margin-top: var(--space-6); } .u-mb-0{ margin-bottom:0; } .u-mb-2{ margin-bottom: var(--space-2); } .u-mb-4{ margin-bottom: var(--space-4); } .u-mb-6{ margin-bottom: var(--space-6); } @media print{ .topbar, .toasts{ display:none !important; } body{ background: white; } .card, .table-wrap{ box-shadow:none; } }