144 lines
4.3 KiB
CSS
144 lines
4.3 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: 'BallPill';
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url('/fonts/BallPill-light.otf') format('opentype');
|
|
}
|
|
|
|
@theme {
|
|
--font-sans: "Space Grotesk", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--color-teal: #1F5560;
|
|
--color-teal-900: #183E46;
|
|
--color-teal-700: #2A6C78;
|
|
--color-purple: #5C1DD8;
|
|
--color-purple-700: #4A17AE;
|
|
--color-sage: #CDD8BB;
|
|
--color-peri: #AFC0FF;
|
|
--color-tan: #B1A089;
|
|
--color-cream: #ECE9E9;
|
|
--color-ink: #3C3A3A;
|
|
--color-paper: #FFFFFF;
|
|
|
|
--color-fg: var(--color-ink);
|
|
--color-fg-muted: rgba(60,58,58,0.65);
|
|
--color-fg-subtle: rgba(60,58,58,0.45);
|
|
--color-bg: var(--color-paper);
|
|
--color-bg-warm: var(--color-cream);
|
|
--color-bg-dark: var(--color-teal);
|
|
--color-accent: var(--color-purple);
|
|
--color-accent-soft: var(--color-peri);
|
|
--color-success: var(--color-sage);
|
|
|
|
--spacing-1: 4px;
|
|
--spacing-2: 8px;
|
|
--spacing-3: 12px;
|
|
--spacing-4: 16px;
|
|
--spacing-5: 24px;
|
|
--spacing-6: 32px;
|
|
--spacing-7: 48px;
|
|
--spacing-8: 64px;
|
|
--spacing-9: 96px;
|
|
--spacing-10: 144px;
|
|
|
|
--radius-sm: 12px;
|
|
--radius-md: 22px;
|
|
--radius-lg: 28px;
|
|
--radius-xl: 40px;
|
|
--radius-2xl: 56px;
|
|
--radius-pill: 9999px;
|
|
--radius-org: 48% 52% 62% 38% / 50% 44% 56% 50%;
|
|
--radius-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;
|
|
|
|
--shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
|
|
--shadow-soft: 0 12px 40px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
:root {
|
|
/* Keeping original variables for direct var() usage */
|
|
--teal: #1F5560;
|
|
--teal-900: #183E46;
|
|
--teal-700: #2A6C78;
|
|
--purple: #5C1DD8;
|
|
--purple-700: #4A17AE;
|
|
--sage: #CDD8BB;
|
|
--peri: #AFC0FF;
|
|
--tan: #B1A089;
|
|
--cream: #ECE9E9;
|
|
--ink: #3C3A3A;
|
|
--paper: #FFFFFF;
|
|
|
|
--fg: var(--ink);
|
|
--fg-muted: rgba(60,58,58,0.65);
|
|
--fg-subtle: rgba(60,58,58,0.45);
|
|
--bg: var(--paper);
|
|
--bg-warm: var(--cream);
|
|
--bg-dark: var(--teal);
|
|
--accent: var(--purple);
|
|
--accent-soft: var(--peri);
|
|
--success: var(--sage);
|
|
|
|
--font-sans: "Space Grotesk", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--t-display: clamp(44px, 8vw, 112px);
|
|
--t-h1: clamp(40px, 5.5vw, 72px);
|
|
--t-h2: clamp(32px, 4vw, 52px);
|
|
--t-h3: 26px;
|
|
--t-lead: 19px;
|
|
--t-body: 17px;
|
|
--t-small: 15px;
|
|
--t-label: 11px;
|
|
--label-ls: 0.14em;
|
|
|
|
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
|
|
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
|
|
--s-9: 96px; --s-10: 144px;
|
|
|
|
--r-sm: 12px;
|
|
--r-md: 22px;
|
|
--r-lg: 28px;
|
|
--r-xl: 40px;
|
|
--r-2xl: 56px;
|
|
--r-pill: 9999px;
|
|
--r-org: 48% 52% 62% 38% / 50% 44% 56% 50%;
|
|
--r-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;
|
|
|
|
--shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
|
|
--shadow-soft: 0 12px 40px rgba(0,0,0,0.08);
|
|
|
|
--max: 1320px;
|
|
--sec-y: clamp(80px, 10vw, 144px);
|
|
}
|
|
|
|
body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); margin: 0; padding: 0; }
|
|
h1 { font: 700 var(--t-h1)/0.98 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
|
|
h2 { font: 700 var(--t-h2)/1.0 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
|
|
h3 { font: 700 var(--t-h3)/1.15 var(--font-sans); color: var(--teal); }
|
|
p { font: 400 var(--t-body)/1.6 var(--font-sans); margin-top: 0; margin-bottom: 1rem; }
|
|
code, .mono { font-family: var(--font-mono); }
|
|
.label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--label-ls); text-transform: uppercase; }
|
|
|
|
::selection { background: var(--purple); color: var(--paper); }
|
|
|
|
/* ─── R42 chatbot mark animations ────────────────────────────── */
|
|
@keyframes dotBounce {
|
|
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
|
|
40% { transform: translateY(-4px); opacity: 1; }
|
|
}
|
|
.r42-mark .dot { animation: dotBounce 1.2s ease-in-out infinite; transform-origin: center; }
|
|
.r42-mark .dot:nth-child(2) { animation-delay: 0.15s; }
|
|
.r42-mark .dot:nth-child(3) { animation-delay: 0.3s; }
|
|
|
|
@keyframes r42Shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
20%, 60% { transform: translateX(-2px); }
|
|
40%, 80% { transform: translateX(2px); }
|
|
}
|
|
.r42-mark.shake { animation: r42Shake 0.5s ease-in-out; }
|