341 lines
13 KiB
CSS
341 lines
13 KiB
CSS
/* ============================================
|
|
CLAVITOR DESIGN SYSTEM — v0.1
|
|
Violet #7C3AED + Figtree + JetBrains Mono
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Brand */
|
|
--brand-black: #0A0A0A;
|
|
--brand-accent: #7C3AED;
|
|
--brand-accent-light: #8B5CF6;
|
|
--brand-accent-dark: #6D28D9;
|
|
|
|
/* Core Colors */
|
|
--bg-primary: #FFFFFF;
|
|
--bg-secondary: #F5F5F5;
|
|
--bg-tertiary: #E5E5E5;
|
|
--bg-inverse: #0A0A0A;
|
|
|
|
--text-primary: #171717;
|
|
--text-secondary: #525252;
|
|
--text-tertiary: #737373;
|
|
--text-inverse: #FFFFFF;
|
|
|
|
--border-default: #E5E5E5;
|
|
--border-strong: #D4D4D4;
|
|
|
|
/* Semantic */
|
|
--success: #16A34A;
|
|
--warning: #CA8A04;
|
|
--error: #DC2626;
|
|
|
|
/* Typography */
|
|
--font-family: "Figtree", system-ui, sans-serif;
|
|
|
|
/* Wordmark */
|
|
--wordmark-font: "Figtree", system-ui, sans-serif;
|
|
--wordmark-weight: 700;
|
|
--wordmark-spacing: 0.25em;
|
|
|
|
/* Spacing */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* Motion */
|
|
--duration-fast: 100ms;
|
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
font-family: var(--font-family);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
background: var(--bg-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ============================================
|
|
LAYOUT
|
|
============================================ */
|
|
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
|
.section { margin-bottom: 64px; }
|
|
.max-width { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
/* Grid */
|
|
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
|
.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; overflow: visible; }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
.grid-3-equal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
|
|
.grid-4-equal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
|
|
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
|
|
|
|
/* Flex */
|
|
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
|
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
|
|
|
/* ============================================
|
|
TYPOGRAPHY
|
|
============================================ */
|
|
|
|
h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
|
|
h2 { font-size: 56px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
|
|
h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.019em; }
|
|
h4 { font-size: 28px; font-weight: 500; }
|
|
|
|
.text-sm { font-size: 16px; }
|
|
.text-xs { font-size: 14px; }
|
|
.text-lg { font-size: 18px; }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-tertiary { color: var(--text-tertiary); }
|
|
.text-inverse { color: var(--text-inverse); }
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.font-semibold { font-weight: 600; }
|
|
.font-mono { font-family: "JetBrains Mono", monospace; }
|
|
|
|
/* Wordmark */
|
|
.wordmark { font-size: 18px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
|
|
.wordmark-lg { font-size: 32px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }
|
|
|
|
/* ============================================
|
|
BRAND ELEMENTS
|
|
============================================ */
|
|
|
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
|
.black-square-sm { width: 48px; height: 48px; background: var(--brand-black); }
|
|
|
|
/* Logo Lockup — The Trinity */
|
|
.logo-lockup { display: inline-flex; gap: 20px; align-items: stretch; }
|
|
.logo-lockup-square { width: 80px; height: 80px; background: var(--brand-black); flex-shrink: 0; }
|
|
.logo-lockup-text { display: flex; flex-direction: column; justify-content: space-between; height: 80px; }
|
|
.logo-lockup-wordmark { font-family: var(--font-family); font-size: 56px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
|
|
.logo-lockup-tagline { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: -2px; }
|
|
|
|
/* ============================================
|
|
NAVIGATION (New)
|
|
============================================ */
|
|
|
|
.nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid var(--border-default); }
|
|
.nav-links { display: flex; gap: 32px; align-items: center; }
|
|
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 100ms ease; }
|
|
.nav-links a:hover { color: var(--text-primary); }
|
|
|
|
/* ============================================
|
|
SECTION PATTERNS (vault1984 style)
|
|
============================================ */
|
|
|
|
.section-vault { padding: 80px 0; }
|
|
.section-vault-dark { padding: 80px 0; background: var(--bg-inverse); color: var(--text-inverse); }
|
|
|
|
/* ============================================
|
|
HERO (New)
|
|
============================================ */
|
|
|
|
.hero { padding: 80px 0; }
|
|
.hero-content { max-width: 600px; }
|
|
|
|
/* ============================================
|
|
COMPONENTS
|
|
============================================ */
|
|
|
|
/* Pills */
|
|
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; overflow: visible; }
|
|
.pill {
|
|
display: inline-flex; align-items: center;
|
|
height: 32px; padding: 0 16px;
|
|
white-space: nowrap;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: 9999px;
|
|
font-size: 14px; font-weight: 500;
|
|
}
|
|
.pill-accent { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }
|
|
|
|
/* Feature Cards */
|
|
.feature-card { background: var(--bg-secondary); border-radius: 12px; padding: 32px; }
|
|
.feature-card-dark { background: var(--bg-inverse); color: var(--text-inverse); border-radius: 12px; padding: 32px; }
|
|
|
|
/* Stats */
|
|
.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
|
|
.stat-label { font-size: 14px; color: var(--text-secondary); }
|
|
|
|
/* Section Title */
|
|
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
font-family: inherit; font-size: 16px; font-weight: 500;
|
|
text-decoration: none; border: none; border-radius: 8px;
|
|
cursor: pointer; transition: all 100ms ease;
|
|
height: 40px; padding: 0 16px;
|
|
}
|
|
.btn:focus { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-accent); }
|
|
.btn-primary { background: var(--brand-black); color: white; }
|
|
.btn-primary:hover { background: #262626; }
|
|
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
|
|
.btn-secondary:hover { background: var(--bg-secondary); }
|
|
.btn-accent { background: var(--brand-accent); color: white; }
|
|
.btn-accent:hover { background: var(--brand-accent-light); }
|
|
.btn-ghost { background: transparent; color: var(--text-primary); }
|
|
.btn-ghost:hover { background: var(--bg-secondary); }
|
|
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
|
|
.btn-lg { height: 48px; padding: 0 20px; }
|
|
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
/* Inputs */
|
|
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
|
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
|
.input {
|
|
height: 40px; padding: 0 12px;
|
|
font-family: inherit; font-size: 16px;
|
|
color: var(--text-primary); background: var(--bg-primary);
|
|
border: 1px solid var(--border-strong); border-radius: 8px;
|
|
transition: all 100ms ease;
|
|
}
|
|
.input:hover { border-color: var(--text-tertiary); }
|
|
.input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
|
|
.input::placeholder { color: var(--text-tertiary); }
|
|
.input-error { border-color: var(--error); }
|
|
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
|
.input-error-text { font-size: 12px; color: var(--error); }
|
|
|
|
/* Cards */
|
|
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
|
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
|
.card-header { margin-bottom: 16px; }
|
|
.card-title { font-size: 18px; font-weight: 600; }
|
|
|
|
/* Badges */
|
|
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
|
|
.badge-default { background: var(--bg-tertiary); color: var(--text-secondary); }
|
|
.badge-primary { background: var(--brand-black); color: white; }
|
|
.badge-accent { background: var(--brand-accent); color: white; }
|
|
.badge-success { background: rgba(22, 163, 74, 0.1); color: var(--success); }
|
|
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
|
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
|
|
|
/* Alerts */
|
|
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
|
|
.alert-accent { background: rgba(124, 58, 237, 0.05); }
|
|
.alert-success { background: rgba(22, 163, 74, 0.05); }
|
|
.alert-error { background: rgba(220, 38, 38, 0.05); }
|
|
|
|
/* Tables */
|
|
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
|
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
|
|
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
|
|
.table tr:hover td { background: var(--bg-secondary); }
|
|
|
|
/* Code */
|
|
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
|
|
|
/* Colors utility */
|
|
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
|
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
|
.color-block { height: 80px; }
|
|
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
|
|
.color-label code { font-family: "JetBrains Mono", monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
|
|
|
/* ============================================
|
|
UTILITY CLASSES
|
|
============================================ */
|
|
|
|
/* Spacing (margin-top) */
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-1 { margin-top: 4px; }
|
|
.mt-2 { margin-top: 8px; }
|
|
.mt-3 { margin-top: 12px; }
|
|
.mt-4 { margin-top: 16px; }
|
|
.mt-5 { margin-top: 20px; }
|
|
.mt-6 { margin-top: 24px; }
|
|
.mt-8 { margin-top: 32px; }
|
|
.mt-10 { margin-top: 40px; }
|
|
.mt-12 { margin-top: 48px; }
|
|
.mt-16 { margin-top: 64px; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-1 { margin-bottom: 4px; }
|
|
.mb-2 { margin-bottom: 8px; }
|
|
.mb-3 { margin-bottom: 12px; }
|
|
.mb-4 { margin-bottom: 16px; }
|
|
.mb-5 { margin-bottom: 20px; }
|
|
.mb-6 { margin-bottom: 24px; }
|
|
.mb-8 { margin-bottom: 32px; }
|
|
.mb-10 { margin-bottom: 40px; }
|
|
.mb-12 { margin-bottom: 48px; }
|
|
.mb-16 { margin-bottom: 64px; }
|
|
|
|
/* Auto margins */
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
.ml-auto { margin-left: auto; }
|
|
.mr-auto { margin-right: auto; }
|
|
|
|
/* Flex/alignment */
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.items-center { align-items: center; }
|
|
.items-start { align-items: flex-start; }
|
|
.items-end { align-items: flex-end; }
|
|
|
|
/* Border utilities */
|
|
.border-top { border-top: 1px solid var(--border-default); }
|
|
.border-bottom { border-bottom: 1px solid var(--border-default); }
|
|
.border-left { border-left: 1px solid var(--border-default); }
|
|
.border-right { border-right: 1px solid var(--border-default); }
|
|
|
|
/* Width/height */
|
|
.w-full { width: 100%; }
|
|
.h-full { height: 100%; }
|
|
|
|
/* Max-width */
|
|
.max-w-prose { max-width: 65ch; }
|
|
.max-w-md { max-width: 600px; }
|
|
|
|
/* ============================================
|
|
RESPONSIVE BREAKPOINTS
|
|
============================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
h1 { font-size: 48px; }
|
|
h2 { font-size: 36px; }
|
|
h3 { font-size: 28px; }
|
|
|
|
.grid-2-equal { grid-template-columns: 1fr; gap: 32px; }
|
|
.grid-3-equal { grid-template-columns: 1fr; gap: 24px; }
|
|
.grid-4-equal { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
|
|
|
.nav { flex-direction: column; gap: 16px; align-items: flex-start; }
|
|
.nav-links { flex-wrap: wrap; gap: 16px; }
|
|
|
|
.hero { padding: 48px 0; }
|
|
.section-vault { padding: 48px 0; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
h1 { font-size: 36px; }
|
|
h2 { font-size: 28px; }
|
|
|
|
.grid-4-equal { grid-template-columns: 1fr; }
|
|
.pill-row { gap: 8px; }
|
|
.pill { padding: 0 12px; font-size: 13px; }
|
|
|
|
.btn-lg { height: 44px; padding: 0 16px; }
|
|
}
|