/* ========================================================================== Juniper — Colors & Type Foundation Born from the Lucky Egg orb: coral-pink core → orchid → periwinkle lilac. A radial light. Warm pink center, cool violet edge. ========================================================================== */ /* Fraunces, JetBrains Mono, Quicksand: Google Fonts. Nunito: self-hosted (brand). */ /* Fraunces + JetBrains Mono are enqueued from Google Fonts by inc/le-setup.php (one request). */ @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations'), url('../fonts/Nunito-VariableFont_wght.woff2') format('woff2'), url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2-variations'), url('../fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2'), url('../fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-style: italic; font-display: swap; } :root { /* ------------------------------------------------------------------------ CORE BRAND — sampled directly from the orb ------------------------------------------------------------------------ */ --juniper-core: #FC6E9E; /* orb center — coral-pink, the heart */ --juniper-rose: #F986C0; /* inner halo */ --juniper-orchid: #DA9AF0; /* mid halo */ --juniper-lilac: #B090EB; /* outer halo */ --juniper-periwinkle: #A38EEC; /* edge — coolest violet */ /* Deep variants — for text, pressed states, on-light type */ --juniper-ink: #2A1F52; /* headlines, body — deep periwinkle-ink */ --juniper-ink-soft: #5B4E87; /* secondary text — muted periwinkle */ --juniper-rose-deep: #B33D72; /* accessible pink for text/links */ --juniper-lilac-deep: #6E52C4; /* accessible violet for text/links */ /* ------------------------------------------------------------------------ SURFACES — cool neutrals, tinted toward the lilac edge of the orb ------------------------------------------------------------------------ */ --juniper-canvas: #F7F4FB; /* primary background — whisper of lilac */ --juniper-surface: #FFFFFF; /* cards, panels */ --juniper-surface-alt: #EFEAF6; /* elevated / inset — cool */ --juniper-soft-rose: #FDF2F6; /* warm tinted surface — paired with rose */ --juniper-hairline: #E4DBEE; /* dividers */ --juniper-white: #FFFFFF; /* ------------------------------------------------------------------------ SEMANTIC TOKENS ------------------------------------------------------------------------ */ --juniper-fg-1: var(--juniper-ink); --juniper-fg-2: var(--juniper-ink-soft); --juniper-fg-link: var(--juniper-lilac-deep); --juniper-bg: var(--juniper-canvas); --juniper-bg-elevated: var(--juniper-surface); --juniper-bg-soft: var(--juniper-surface-alt); --juniper-bg-warm: var(--juniper-soft-rose); --juniper-border: var(--juniper-hairline); /* Restrained semantic — never clinical */ --juniper-success: #7FB098; /* soft jade, cool-leaning */ --juniper-info: var(--juniper-lilac); --juniper-warning: var(--juniper-rose); --juniper-danger: #D45F85; /* desaturated rose, never red */ /* ------------------------------------------------------------------------ SIGNATURE GRADIENTS — the orb is the gradient Use as light: soft washes behind hero content, never as heavy decoration. ------------------------------------------------------------------------ */ --juniper-gradient-orb: radial-gradient(circle at 50% 50%, #FC6E9E 0%, #F986C0 18%, #DA9AF0 50%, #B090EB 78%, #A38EEC 100%); /* @kind color */ --juniper-gradient-halo: radial-gradient(circle at 50% 50%, rgba(252,110,158,0.55) 0%, rgba(218,154,240,0.35) 40%, rgba(163,142,236,0.18) 70%, rgba(163,142,236,0) 100%); /* @kind color */ --juniper-gradient-soft: linear-gradient(180deg, #FDF2F6 0%, #F7F4FB 60%, #EFEAF6 100%); /* @kind color */ --juniper-gradient-hero: linear-gradient(135deg, #FC6E9E 0%, #DA9AF0 55%, #A38EEC 100%); /* @kind color */ /* Tint overlays */ --juniper-tint-core: rgba(252,110,158,0.14); --juniper-tint-rose: rgba(249,134,192,0.18); --juniper-tint-orchid: rgba(218,154,240,0.20); --juniper-tint-lilac: rgba(176,144,235,0.20); --juniper-tint-periwinkle: rgba(163,142,236,0.22); /* ------------------------------------------------------------------------ TYPE ------------------------------------------------------------------------ */ --juniper-font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --juniper-font-serif: 'Fraunces', Georgia, serif; --juniper-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --juniper-font-wordmark: 'Quicksand', 'Nunito', sans-serif; /* logo lockup only */ --juniper-text-xs: 0.75rem; --juniper-text-sm: 0.8125rem; --juniper-text-base: 1rem; --juniper-text-md: 1.0625rem; --juniper-text-lg: 1.25rem; --juniper-text-xl: 1.5rem; --juniper-text-2xl: 2rem; --juniper-text-3xl: 2.75rem; --juniper-text-display: 3.5rem; --juniper-leading-tight: 1.2; --juniper-leading-snug: 1.35; --juniper-leading-normal: 1.55; --juniper-leading-relaxed: 1.65; --juniper-tracking-tight: -0.015em; --juniper-tracking-snug: -0.01em; --juniper-tracking-normal: 0; --juniper-tracking-wide: 0.04em; --juniper-tracking-wider: 0.08em; /* ------------------------------------------------------------------------ SHAPE, ELEVATION, MOTION ------------------------------------------------------------------------ */ --juniper-radius-sm: 8px; --juniper-radius-md: 14px; --juniper-radius-lg: 20px; --juniper-radius-xl: 28px; --juniper-radius-pill: 999px; --juniper-shadow-soft: 0 1px 2px rgba(42,31,82,0.05), 0 4px 14px rgba(42,31,82,0.08); --juniper-shadow-lifted: 0 2px 4px rgba(42,31,82,0.06), 0 10px 28px rgba(42,31,82,0.10); --juniper-shadow-glow: 0 0 0 1px rgba(176,144,235,0.25), 0 8px 32px rgba(252,110,158,0.22); --juniper-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --juniper-duration: 280ms; /* @kind other */ --juniper-space-1: 4px; --juniper-space-2: 8px; --juniper-space-3: 12px; --juniper-space-4: 16px; --juniper-space-5: 24px; --juniper-space-6: 32px; --juniper-space-7: 48px; --juniper-space-8: 64px; /* ------------------------------------------------------------------------ BACKWARD-COMPAT ALIASES Old token names from the v1 palette now point to the orb-born system. Prefer the canonical names above in new work. ------------------------------------------------------------------------ */ --juniper-warm-paper: var(--juniper-canvas); --juniper-soft-cream: var(--juniper-surface-alt); --juniper-blush-ivory: var(--juniper-surface); --juniper-charcoal: var(--juniper-ink); --juniper-neutral: var(--juniper-ink-soft); --juniper-lilac-pressed: var(--juniper-lilac-deep); --juniper-blush: var(--juniper-rose); --juniper-apricot: var(--juniper-core); --juniper-petal-glow: var(--juniper-rose); --juniper-gradient-glow: var(--juniper-gradient-halo); } /* ========================================================================== Semantic element styles ========================================================================== */ body.le-site { font-family: var(--juniper-font-sans); font-size: var(--juniper-text-base); line-height: var(--juniper-leading-normal); color: var(--juniper-fg-1); background-color: var(--juniper-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(.le-site) h1, .juniper-h1 { font-family: var(--juniper-font-sans); font-size: var(--juniper-text-3xl); font-weight: 600; line-height: var(--juniper-leading-tight); letter-spacing: var(--juniper-tracking-snug); color: var(--juniper-fg-1); } :where(.le-site) h2, .juniper-h2 { font-family: var(--juniper-font-sans); font-size: var(--juniper-text-2xl); font-weight: 600; line-height: var(--juniper-leading-tight); letter-spacing: var(--juniper-tracking-snug); color: var(--juniper-fg-1); } :where(.le-site) h3, .juniper-h3 { font-family: var(--juniper-font-sans); font-size: var(--juniper-text-xl); font-weight: 600; line-height: var(--juniper-leading-snug); color: var(--juniper-fg-1); } :where(.le-site) h4, .juniper-h4 { font-family: var(--juniper-font-sans); font-size: var(--juniper-text-lg); font-weight: 600; line-height: var(--juniper-leading-snug); color: var(--juniper-fg-1); } :where(.le-site) p { font-size: var(--juniper-text-base); line-height: var(--juniper-leading-normal); color: var(--juniper-fg-1); text-wrap: pretty; } :where(.le-site) small, .juniper-small { font-size: var(--juniper-text-sm); color: var(--juniper-fg-2); } :where(.le-site) a { color: var(--juniper-fg-link); text-decoration: none; transition: color var(--juniper-duration) var(--juniper-ease); } :where(.le-site) a:hover { color: var(--juniper-rose-deep); } /* Editorial — Dr. Lucky's voice. Warm serif against cool ink. */ .juniper-display, .juniper-guidance-headline { font-family: var(--juniper-font-serif); font-size: var(--juniper-text-display); font-weight: 500; line-height: var(--juniper-leading-tight); letter-spacing: var(--juniper-tracking-tight); color: var(--juniper-fg-1); } .juniper-serif { font-family: var(--juniper-font-serif); font-weight: 500; letter-spacing: var(--juniper-tracking-tight); } .juniper-data-label, :where(.le-site) code, :where(.le-site) kbd, :where(.le-site) samp { font-family: var(--juniper-font-mono); font-size: var(--juniper-text-xs); letter-spacing: var(--juniper-tracking-wide); text-transform: uppercase; color: var(--juniper-fg-2); } .juniper-eyebrow { font-family: var(--juniper-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: var(--juniper-tracking-wider); text-transform: uppercase; color: var(--juniper-fg-2); } .juniper-text-fg1 { color: var(--juniper-fg-1) !important; } .juniper-text-fg2 { color: var(--juniper-fg-2) !important; } .juniper-text-rose { color: var(--juniper-rose-deep) !important; } .juniper-text-lilac { color: var(--juniper-lilac-deep) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }