. ============================================================ */ .landing { --header-bg: rgba(8, 8, 15, 0.9); --bg-color: #08080f; --surface-color: #0e0e1a; --surface-muted: #14142a; --text-color: #f0f0ff; --muted-color: #7070a0; --muted-strong: #9090bb; --border-color: #1e1e30; --border-soft: #15152a; --accent-color: #009fe3; --accent-strong: #1d71b8; --accent-alt: #e6007e; --grad-brand: linear-gradient(135deg, #00c0ff 0%, #ff0090 100%); --shadow-color: rgba(0, 0, 0, 0.4); --shadow-landing-card: 0 32px 80px rgba(0, 0, 0, 0.6); /* Hero glow channels — separate from --accent so editorial can override */ --hero-cyan-rgb: 0, 159, 227; --hero-magenta-rgb: 230, 0, 126; --hero-grid-color: rgba(255, 255, 255, .012); --hero-glow: .12; } /* ============================================================ COLOR — Editorial (marketing variant on warm paper) Override applied via .surface-editorial. Used for long-form reading: docs, blog, "Sobre Halves", legal. Accent shifts to #0099cc to maintain AA contrast on paper. Magenta is preserved only inside the brand gradient (clip on hero ); the radial glow is nearly imperceptible. ============================================================ */ .surface-editorial { --header-bg: rgba(250, 250, 247, 0.92); --bg-color: #fafaf7; --surface-color: #ffffff; --surface-muted: #f1f1ec; --text-color: #0d0d1a; --muted-color: #6b6b80; --muted-strong: #4a4a5e; --border-color: #e6e6e0; --border-soft: #efefe9; --accent-color: #1d71b8; --accent-strong: #155a9a; --accent-alt: #cc0055; --grad-brand: linear-gradient(135deg, #1d71b8 0%, #cc0055 100%); --shadow-color: rgba(13, 13, 26, 0.10); --shadow-landing-card: 0 32px 80px rgba(13, 13, 26, 0.10); --hero-cyan-rgb: 29, 113, 184; --hero-magenta-rgb: 204, 0, 85; --hero-grid-color: rgba(13, 13, 26, .025); --hero-glow: .055; } /* ============================================================ THEME TOGGLE — html-level overrides html.theme-dark body / html.theme-light body tienen especificidad (0,1,2) > body.landing (0,1,1). El toggle del usuario siempre gana sobre el default de superficie. localStorage key: 'halves-theme' values: 'dark' | 'light' ============================================================ */ html.theme-dark { color-scheme: dark; } html.theme-light { color-scheme: light; } html.theme-dark body { --header-bg: rgba(8, 8, 15, 0.9); --bg-color: #08080f; --surface-color: #0e0e1a; --surface-muted: #14142a; --text-color: #f0f0ff; --muted-color: #7070a0; --muted-strong: #9090bb; --border-color: #1e1e30; --border-soft: #15152a; --accent-color: #009fe3; --accent-strong: #1d71b8; --accent-alt: #e6007e; --shadow-color: rgba(0, 0, 0, 0.4); --grad-brand: linear-gradient(135deg, #009fe3 0%, #e6007e 100%); --hero-cyan-rgb: 0, 159, 227; --hero-magenta-rgb: 230, 0, 126; } html.theme-light body { --header-bg: rgba(250, 250, 247, 0.92); --bg-color: #fafaf7; --surface-color: #ffffff; --surface-muted: #f1f1ec; --text-color: #0d0d1a; --muted-color: #6b6b80; --muted-strong: #4a4a5e; --border-color: #e6e6e0; --border-soft: #efefe9; --accent-color: #1d71b8; --accent-strong: #155a9a; --accent-alt: #cc0055; --grad-brand: linear-gradient(135deg, #1d71b8 0%, #cc0055 100%); --shadow-color: rgba(13, 13, 26, 0.10); --hero-cyan-rgb: 29, 113, 184; --hero-magenta-rgb: 204, 0, 85; } /* ============================================================ SHAPE & ELEVATION ============================================================ */ :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px var(--shadow-color); --shadow-lg: 0 4px 16px var(--shadow-color); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent); } /* ============================================================ SPACING ============================================================ */ :root { --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; --space-24: 96px; } /* ============================================================ MOTION ============================================================ */ :root { --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 0.12s; --t-base: 0.15s; --t-med: 0.22s; --t-slow: 0.3s; } /* ============================================================ TYPOGRAPHY ============================================================ */ :root { /* WordPress theme + halves.io marketing share Plus Jakarta Sans. The operations console (app shell inside halves-io) still uses Inter — declared locally in halves-io/frontend, not centralized here. */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.9rem; --fs-md: 1rem; --fs-lg: 1.05rem; --fs-xl: 1.5rem; --fs-h2: clamp(1.5rem, 2vw, 2rem); } /* ============================================================ BASE TYPOGRAPHIC PRIMITIVES Shared semantic elements. Components are defined per-consumer. ============================================================ */ body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.75; color: var(--text-color); background: var(--bg-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { margin: 0; font-family: var(--font-sans); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 200; line-height: 1.75; letter-spacing: -0.04em; text-wrap: balance; } h2, .h2 { margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .landing h2, .surface-editorial h2, .h2--display { font-size: clamp(2rem, 4vw, 3rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; margin-bottom: var(--space-6); } h3, .h3 { margin: 0; font-size: 1.25rem; font-weight: 200; line-height: 1.75; } .landing h3, .surface-editorial h3 { margin-bottom: var(--space-4); } .eyebrow { margin: 0 0 4px; color: var(--muted-strong); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .landing .eyebrow, .surface-editorial .eyebrow, .eyebrow--accent { color: var(--accent-color); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; opacity: 0.9; } p, .body { margin: 0; font-size: var(--fs-base); line-height: 1.75; color: var(--text-color); } .body-lg { font-size: 1.05rem; line-height: 1.75; color: var(--muted-color); } .muted { color: var(--muted-color); } small, .small { font-size: var(--fs-sm); color: var(--muted-color); } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.82em; background: var(--surface-muted); border-radius: var(--radius-sm); padding: 1px 5px; } .tabular { font-variant-numeric: tabular-nums; } .text-gradient { background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-bottom: 0.15em; } /* ============================================================ BRAND LOCKUP — "halves for " See lockup.md for the full spec. ============================================================ */ .hv-lockup { --hv-mark-h: 28px; display: inline-block; font-family: var(--font-sans); line-height: 1; white-space: nowrap; color: inherit; } .hv-lockup .hv-mark { display: inline-block; vertical-align: baseline; } .hv-lockup .hv-mark svg { display: block; height: var(--hv-mark-h); width: auto; fill: currentColor; overflow: visible; } .hv-lockup .hv-caption { display: inline-block; margin-inline-start: 0.5em; font-size: 20px; font-weight: 600; color: var(--fg-muted); vertical-align: baseline; } /* ============================================================ BUTTONS Base classes compartidas. Aplicar directamente o mapear desde clases de plataforma (.wp-block-button__link, etc.). ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; line-height: 1; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: opacity var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); white-space: nowrap; } .btn:disabled, button:disabled { opacity: 0.4; cursor: not-allowed; } .btn:not(:disabled):hover { transform: translateY(-1px); } /* Primary — solid accent, no gradient. Color adapts to surface for AA contrast. */ .btn-primary { background: var(--accent-color); color: var(--bg-color); border-color: transparent; } .btn-primary:not(:disabled):hover { background: var(--accent-strong); opacity: 1; } /* Secondary — ghost with accent border */ .btn-secondary { background: transparent; color: var(--accent-color); border-color: var(--accent-color); } .btn-secondary:not(:disabled):hover { background: color-mix(in srgb, var(--accent-color) 10%, transparent); } /* ============================================================ RESETS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } .wp-block-list li { line-height: 1.75; list-style-type: square; margin-bottom: var(--space-2); } .wp-block-list { padding-left: var(--space-6); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } button:disabled { cursor: not-allowed; opacity: 0.6; } a { color: var(--accent-color); text-decoration: none; } a:hover { color: var(--accent-strong); } ::selection { background: color-mix(in srgb, var(--accent-color) 25%, transparent); color: var(--text-color); }