/* * Padelbility Design System — CSS Tokens * Source of truth for all visual decisions. * Generated from /tmp/padelbility/project/theme.js * * Usage: Every component reads from these vars. To swap themes, update * [data-theme] on or . */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Instrument+Serif:ital@0;1&display=swap'); /* ── VOLT (default dark) ─────────────────────────────────────── */ :root, [data-theme="volt"][data-mode="dark"], [data-theme="volt"] { --pb-bg: #0B0D10; --pb-surface: #14171C; --pb-surface2: #1B1F26; --pb-line: rgba(255,255,255,0.08); --pb-line2: rgba(255,255,255,0.14); --pb-ink: #F4F5F7; --pb-mute: rgba(244,245,247,0.62); --pb-faint: rgba(244,245,247,0.38); --pb-accent: #DEFF4A; --pb-accent-ink: #0B0D10; --pb-good: #9CFF6B; --pb-warn: #FFB547; --pb-bad: #FF5B5B; } [data-theme="volt"][data-mode="light"] { --pb-bg: #F4F4F1; --pb-surface: #FFFFFF; --pb-surface2: #ECECE7; --pb-line: rgba(11,13,16,0.08); --pb-line2: rgba(11,13,16,0.16); --pb-ink: #0B0D10; --pb-mute: rgba(11,13,16,0.62); --pb-faint: rgba(11,13,16,0.38); --pb-accent: #DEFF4A; --pb-accent-ink: #0B0D10; --pb-good: #1E8A3C; --pb-warn: #A9690B; --pb-bad: #C13838; } /* ── CLAY ────────────────────────────────────────────────────── */ [data-theme="clay"][data-mode="dark"], [data-theme="clay"] { --pb-bg: #0F1410; --pb-surface: #181F19; --pb-surface2: #1F2820; --pb-line: rgba(255,255,255,0.07); --pb-line2: rgba(255,255,255,0.14); --pb-ink: #EFEBE2; --pb-mute: rgba(239,235,226,0.62); --pb-faint: rgba(239,235,226,0.38); --pb-accent: #1F3A2E; --pb-accent-ink: #F4F1EA; --pb-good: #9FE2A8; --pb-warn: #E8B774; --pb-bad: #E08B7A; } [data-theme="clay"][data-mode="light"] { --pb-bg: #F4F1EA; --pb-surface: #FFFCF5; --pb-surface2: #EAE5D8; --pb-line: rgba(31,58,46,0.10); --pb-line2: rgba(31,58,46,0.20); --pb-ink: #15201A; --pb-mute: rgba(21,32,26,0.62); --pb-faint: rgba(21,32,26,0.38); --pb-accent: #1F3A2E; --pb-accent-ink: #F4F1EA; --pb-good: #1F3A2E; --pb-warn: #8A5A18; --pb-bad: #A23B2A; } /* ── NIGHT COURT ─────────────────────────────────────────────── */ [data-theme="night"][data-mode="dark"], [data-theme="night"] { --pb-bg: #06121C; --pb-surface: #0E1D2C; --pb-surface2: #142638; --pb-line: rgba(255,255,255,0.08); --pb-line2: rgba(255,255,255,0.16); --pb-ink: #EAF2FA; --pb-mute: rgba(234,242,250,0.62); --pb-faint: rgba(234,242,250,0.38); --pb-accent: #4DE0FF; --pb-accent-ink: #06121C; --pb-good: #7AF0C6; --pb-warn: #FFC36B; --pb-bad: #FF7782; } [data-theme="night"][data-mode="light"] { --pb-bg: #EEF3F8; --pb-surface: #FFFFFF; --pb-surface2: #DDE6F0; --pb-line: rgba(6,18,28,0.08); --pb-line2: rgba(6,18,28,0.16); --pb-ink: #06121C; --pb-mute: rgba(6,18,28,0.62); --pb-faint: rgba(6,18,28,0.38); --pb-accent: #4DE0FF; --pb-accent-ink: #06121C; --pb-good: #0F7A57; --pb-warn: #955407; --pb-bad: #B33543; } /* ── COURT GREEN ─────────────────────────────────────────────── */ [data-theme="green"][data-mode="dark"], [data-theme="green"] { --pb-bg: #06140E; --pb-surface: #0D2018; --pb-surface2: #142B22; --pb-line: rgba(255,255,255,0.08); --pb-line2: rgba(255,255,255,0.16); --pb-ink: #E8F0EA; --pb-mute: rgba(232,240,234,0.62); --pb-faint: rgba(232,240,234,0.38); --pb-accent: #C9F25E; --pb-accent-ink: #06140E; --pb-good: #C9F25E; --pb-warn: #FFC36B; --pb-bad: #FF7782; } [data-theme="green"][data-mode="light"] { --pb-bg: #EFF1EC; --pb-surface: #FFFFFF; --pb-surface2: #E1E5DC; --pb-line: rgba(6,20,14,0.08); --pb-line2: rgba(6,20,14,0.16); --pb-ink: #06140E; --pb-mute: rgba(6,20,14,0.62); --pb-faint: rgba(6,20,14,0.38); --pb-accent: #C9F25E; --pb-accent-ink: #06140E; --pb-good: #1E6A3A; --pb-warn: #8A5A18; --pb-bad: #A23B2A; } /* ── EMBER ────────────────────────────────────────────────────── */ [data-theme="ember"][data-mode="dark"], [data-theme="ember"] { --pb-bg: #0E0907; --pb-surface: #1A0F0B; --pb-surface2: #241612; --pb-line: rgba(255,255,255,0.08); --pb-line2: rgba(255,255,255,0.16); --pb-ink: #F4ECE6; --pb-mute: rgba(244,236,230,0.62); --pb-faint: rgba(244,236,230,0.38); --pb-accent: #FF5B1F; --pb-accent-ink: #1A0905; --pb-good: #A8E37A; --pb-warn: #FFB547; --pb-bad: #FF5B5B; } [data-theme="ember"][data-mode="light"] { --pb-bg: #F6F2EE; --pb-surface: #FFFFFF; --pb-surface2: #E8E0D8; --pb-line: rgba(26,9,5,0.08); --pb-line2: rgba(26,9,5,0.16); --pb-ink: #1A0905; --pb-mute: rgba(26,9,5,0.62); --pb-faint: rgba(26,9,5,0.38); --pb-accent: #FF5B1F; --pb-accent-ink: #1A0905; --pb-good: #1E6A3A; --pb-warn: #8A5A18; --pb-bad: #A23B2A; } /* ── SHARED TOKENS ────────────────────────────────────────────── */ :root { --pb-radius-xs: 4px; --pb-radius-sm: 8px; --pb-radius-md: 12px; --pb-radius-lg: 18px; --pb-radius-xl: 28px; --pb-radius-pill: 9999px; --pb-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --pb-font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --pb-font-mono: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --pb-font-editorial: 'Instrument Serif', 'Times New Roman', Georgia, serif; --pb-space-1: 4px; --pb-space-2: 8px; --pb-space-3: 12px; --pb-space-4: 16px; --pb-space-6: 24px; --pb-space-8: 32px; --pb-space-12: 48px; --pb-space-16: 64px; } /* ── RESET & BASE ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--pb-font-body); background: var(--pb-bg); color: var(--pb-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; padding: 0; background: var(--pb-bg); color: var(--pb-ink); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } em { font-style: italic; } img, svg { display: block; } /* ── UTILITY CLASSES ─────────────────────────────────────────── */ /* Buttons */ .pb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--pb-radius-pill); font-family: var(--pb-font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; border: none; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; } .pb-btn:hover { opacity: 0.88; } .pb-btn:active { transform: scale(0.97); } .pb-btn--primary { background: var(--pb-accent); color: var(--pb-accent-ink); } .pb-btn--ghost { background: transparent; color: var(--pb-ink); border: 1px solid var(--pb-line2); } .pb-btn--lg { padding: 16px 30px; font-size: 15px; } .pb-btn--sm { padding: 8px 16px; font-size: 11px; } /* Cards / surfaces */ .pb-card { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: var(--pb-radius-lg); padding: 24px; } .pb-surface2 { background: var(--pb-surface2); border-radius: var(--pb-radius-md); } /* Badges */ .pb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pb-radius-pill); font-family: var(--pb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: var(--pb-surface2); color: var(--pb-mute); border: 1px solid var(--pb-line); } .pb-badge--accent { background: var(--pb-accent); color: var(--pb-accent-ink); border-color: transparent; } /* Float badges (hero overlays) */ .pb-float-badge { position: absolute; display: flex; align-items: center; gap: 6px; background: var(--pb-surface); border: 1px solid var(--pb-line2); padding: 10px 14px; border-radius: var(--pb-radius-pill); font-family: var(--pb-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--pb-ink); box-shadow: 0 8px 32px var(--pb-line); white-space: nowrap; } /* Typography helpers */ .pb-display { font-family: var(--pb-font-display); font-weight: 900; letter-spacing: -0.04em; line-height: 0.88; } .pb-label { font-family: var(--pb-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pb-mute); } .pb-editorial { font-family: var(--pb-font-editorial); font-style: italic; } .pb-mute { color: var(--pb-mute); } .pb-accent { color: var(--pb-accent); } /* Section container */ .pb-section { max-width: 1320px; margin: 0 auto; padding: 0 64px; } @media (max-width: 1024px) { .pb-section { padding: 0 32px; } } @media (max-width: 640px) { .pb-section { padding: 0 20px; } } /* Dot indicator (status / live) */ .pb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pb-accent); display: inline-block; } .pb-dot--good { background: var(--pb-good); } .pb-dot--warn { background: var(--pb-warn); } .pb-dot--bad { background: var(--pb-bad); } /* ── Ghost editor card width classes (required by Ghost validator) ── */ .gh-content .kg-width-wide { margin-left: -8vw; margin-right: -8vw; } .gh-content .kg-width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } @media (max-width: 640px) { .gh-content .kg-width-wide { margin-left: -20px; margin-right: -20px; } }