442 lines
7.9 KiB
CSS
442 lines
7.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||
|
||
:root {
|
||
--color-primary: #0066cc;
|
||
--color-primary-hover: #0077ee;
|
||
--color-brand: #e62525;
|
||
--color-success: #28a745;
|
||
--color-success-text: #00ff00;
|
||
--color-success-bg: #00ff0020;
|
||
--color-success-border: #00ff00;
|
||
--color-error: #ff6666;
|
||
--color-error-bg: #ff000020;
|
||
--color-error-border: #ff0000;
|
||
--color-warning: #ffcc44;
|
||
--color-warning-bg: #3a2e00;
|
||
--color-warning-border: #aa7700;
|
||
--color-danger: #cc6666;
|
||
--color-danger-border: #884444;
|
||
|
||
--color-bg: #1a1a1a;
|
||
--color-bg-elevated: #242424;
|
||
--color-bg-card: #333;
|
||
--color-bg-section: #2a2a2a;
|
||
|
||
--color-border: #444;
|
||
--color-border-light: #333;
|
||
--color-border-section: #3a3a3a;
|
||
|
||
--color-text: white;
|
||
--color-text-muted: #b3b3b3;
|
||
--color-text-dimmed: #808080;
|
||
--color-text-subtle: #999;
|
||
--color-text-label: #ccc;
|
||
|
||
--radius-sm: 3px;
|
||
--radius-md: 4px;
|
||
--radius-lg: 6px;
|
||
--radius-xl: 8px;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
font-size: 14px;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Nunito', sans-serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 200;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: 'Nunito', sans-serif;
|
||
font-weight: 200;
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea,
|
||
button {
|
||
font-family: 'Nunito', sans-serif;
|
||
font-size: 1rem;
|
||
font-weight: 200;
|
||
}
|
||
|
||
/* ── Page Layouts ─────────────────────────────────────────── */
|
||
|
||
.page {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.page--wide {
|
||
max-width: 1400px;
|
||
}
|
||
|
||
/* ── Cards & Sections ─────────────────────────────────────── */
|
||
|
||
.card {
|
||
padding: 1rem;
|
||
background-color: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 1.5rem;
|
||
padding: 1rem;
|
||
background-color: var(--color-bg-section);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-border-section);
|
||
}
|
||
|
||
/* ── Form Controls ────────────────────────────────────────── */
|
||
|
||
.form-field {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.form-field--last {
|
||
margin-bottom: 1.75rem;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-label);
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
font-size: 1rem;
|
||
background-color: var(--color-bg-elevated);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
|
||
}
|
||
|
||
.form-control--mono {
|
||
font-family: monospace;
|
||
}
|
||
|
||
.form-select {
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
font-size: 1rem;
|
||
background-color: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* ── Buttons ──────────────────────────────────────────────── */
|
||
|
||
.btn {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 1rem;
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
color: var(--color-text);
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn--primary {
|
||
background-color: var(--color-primary);
|
||
}
|
||
|
||
.btn--success {
|
||
background-color: var(--color-success);
|
||
}
|
||
|
||
.btn--secondary {
|
||
background-color: #6c757d;
|
||
}
|
||
|
||
.btn--danger {
|
||
background-color: transparent;
|
||
border: 1px solid var(--color-danger-border);
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
.btn--ghost {
|
||
background-color: transparent;
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text-subtle);
|
||
}
|
||
|
||
.btn--sm {
|
||
padding: 0.25rem 0.6rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.btn--lg {
|
||
padding: 0.75rem 1.5rem;
|
||
}
|
||
|
||
/* ── Feedback Alerts ──────────────────────────────────────── */
|
||
|
||
.alert {
|
||
padding: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.alert--error {
|
||
background-color: var(--color-error-bg);
|
||
border: 1px solid var(--color-error-border);
|
||
color: var(--color-error);
|
||
}
|
||
|
||
.alert--success {
|
||
background-color: var(--color-success-bg);
|
||
border: 1px solid var(--color-success-border);
|
||
color: var(--color-success-text);
|
||
}
|
||
|
||
.alert--warning {
|
||
background-color: var(--color-warning-bg);
|
||
border: 1px solid var(--color-warning-border);
|
||
color: var(--color-warning);
|
||
}
|
||
|
||
/* ── Lists ────────────────────────────────────────────────── */
|
||
|
||
.list-unstyled {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.list-item--card {
|
||
padding: 1rem;
|
||
margin-bottom: 0.5rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--color-bg-card);
|
||
}
|
||
|
||
/* ── Typography Helpers ───────────────────────────────────── */
|
||
|
||
.text-muted {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.text-dimmed {
|
||
color: var(--color-text-dimmed);
|
||
}
|
||
|
||
.text-mono {
|
||
font-family: monospace;
|
||
}
|
||
|
||
.text-bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text-error {
|
||
color: red;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 1.035rem;
|
||
}
|
||
|
||
.text-xs {
|
||
font-size: 0.978rem;
|
||
}
|
||
|
||
.help-link {
|
||
color: var(--color-primary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* ── Flex Utilities ───────────────────────────────────────── */
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex--between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex--center {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex--column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex--wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.gap-xs {
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.gap-sm {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.gap-md {
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.gap-lg {
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* ── Spacing Helpers ──────────────────────────────────────── */
|
||
|
||
.mb-0 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.mb-sm {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.mb-md {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.mb-lg {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.mb-xl {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.mt-0 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.mt-md {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.text-white {
|
||
color: white;
|
||
}
|
||
|
||
.text-white-sm {
|
||
color: white;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* ── Responsive Breakpoints ──────────────────────────────── */
|
||
/* Mobile: <= 480px */
|
||
/* Tablet: 481px – 768px */
|
||
/* Laptop: 769px – 1024px */
|
||
/* Desktop: >= 1025px (default styles above) */
|
||
|
||
/* Laptop & below */
|
||
@media (max-width: 1024px) {
|
||
.page--wide {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Tablet & below */
|
||
@media (max-width: 768px) {
|
||
html {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.page {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.btn--lg {
|
||
padding: 0.6rem 1.2rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.15rem;
|
||
}
|
||
}
|
||
|
||
/* Tier-locked: greyed out, non-interactive overlay for features above the user's plan */
|
||
.tier-locked {
|
||
opacity: 0.45;
|
||
pointer-events: none;
|
||
filter: grayscale(40%);
|
||
user-select: none;
|
||
}
|
||
|
||
/* Mobile */
|
||
@media (max-width: 480px) {
|
||
html {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.page {
|
||
background-color: var(--color-bg);
|
||
height: 920px;
|
||
padding: 1rem 0.75rem;
|
||
}
|
||
|
||
.form-control,
|
||
.form-select {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.45rem 0.85rem;
|
||
font-size: 1.45rem !important;
|
||
}
|
||
|
||
.btn--lg {
|
||
padding: 0.55rem 1rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.section {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.mb-lg {
|
||
color: white;
|
||
}
|
||
} |