365 lines
9.4 KiB
CSS
365 lines
9.4 KiB
CSS
/* ── Waggle Landing Page — Warm-Hive Design System ── */
|
|
/* No Tailwind — pure CSS custom properties + CSS Modules per component. */
|
|
/* Token VALUES are the warm-Hive palette (PR8), 1:1 with the product app. */
|
|
/* Canonical source: docs/design_handoff_waggle_app/design-files/styles/waggle.css §7 */
|
|
|
|
:root {
|
|
/* Warm graphite hive scale (replaces the cool blue-grey scale) */
|
|
--hive-950: #0e0c07;
|
|
--hive-900: #14110b;
|
|
--hive-850: #1a160f;
|
|
--hive-800: #1f1a12;
|
|
--hive-700: #272117;
|
|
--hive-600: #4a4030;
|
|
--hive-500: #6b6250;
|
|
--hive-400: #948a73;
|
|
--hive-300: #c8bfa9;
|
|
--hive-200: #d8cfba;
|
|
--hive-100: #ece3d0;
|
|
--hive-50: #f6f1e4;
|
|
/* Honey accent (warmer, replaces the prior honey family) */
|
|
--honey-600: #c07e16;
|
|
--honey-500: #e9a52c;
|
|
--honey-400: #f6c45a;
|
|
--honey-300: #f9d27e;
|
|
--honey-glow: rgba(233, 165, 44, 0.12);
|
|
--honey-pulse: rgba(233, 165, 44, 0.06);
|
|
--shadow-honey: 0 0 24px rgba(233,165,44,0.12), 0 0 4px rgba(233,165,44,0.08);
|
|
--shadow-elevated: 0 4px 16px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
|
|
|
|
/* Named warm tokens (from waggle.css section 7) */
|
|
--bg: #14110b;
|
|
--bg-2: #1a160f;
|
|
--surface: #1f1a12;
|
|
--surface-2: #272117;
|
|
--surface-3: #322a1d;
|
|
--line: #38301f;
|
|
--line-soft: #2a2417;
|
|
--line-strong: #4a4030;
|
|
--text: #f6f1e4;
|
|
--text-2: #c8bfa9;
|
|
--text-muted: #948a73;
|
|
--text-dim: #6b6250;
|
|
--honey: #e9a52c;
|
|
--honey-bright: #f6c45a;
|
|
--honey-deep: #c07e16;
|
|
--honey-wash: rgba(233, 165, 44, 0.10);
|
|
--honey-line: rgba(233, 165, 44, 0.28);
|
|
--work: #7aa6d6;
|
|
--intel: #b196dd;
|
|
--healthy: #6cb78c;
|
|
--attention: #e9a52c;
|
|
--risk: #db8068;
|
|
--status-ai: #b196dd;
|
|
--status-healthy: #6cb78c;
|
|
--r-sm: 8px;
|
|
--r: 12px;
|
|
--r-lg: 18px;
|
|
--r-xl: 26px;
|
|
--sans: var(--font-hanken), 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--mono: var(--font-mono), 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
|
|
|
|
/* ── Type scale (marketing foundation) ── */
|
|
--text-display: clamp(2.5rem, 5.4vw, 4.25rem); /* hero h1 */
|
|
--text-h2: clamp(1.75rem, 3.1vw, 2.5rem); /* section headline */
|
|
--text-h3: clamp(1.125rem, 1.6vw, 1.3125rem); /* card / step titles */
|
|
--text-lead: clamp(1.0625rem, 1.5vw, 1.1875rem); /* section subhead */
|
|
--text-body: 1rem;
|
|
--text-small: 0.875rem;
|
|
--text-xs: 0.75rem;
|
|
|
|
/* ── Layout rhythm ── */
|
|
--container: 1120px;
|
|
--container-wide: 1200px;
|
|
--section-pad: clamp(80px, 11vw, 144px);
|
|
--gutter: 24px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--sans);
|
|
background: var(--hive-950);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background: var(--hive-950);
|
|
font-family: var(--sans);
|
|
}
|
|
|
|
/* ── Scrollbar — thin warm overlay (the stock Windows scrollbar reads as
|
|
chrome on the hero). Standard properties cover Firefox + modern
|
|
Chromium; the ::-webkit-* rules cover Safari + older Chromium. ── */
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--hive-600) transparent;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--hive-600);
|
|
border-radius: 999px;
|
|
/* Transparent border + padding-box clip = a slimmer overlay-style thumb. */
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--hive-500);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--sans);
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
text-wrap: balance;
|
|
}
|
|
h1 { letter-spacing: -0.03em; }
|
|
|
|
p { text-wrap: pretty; }
|
|
|
|
::selection {
|
|
background: rgba(233, 165, 44, 0.28);
|
|
color: var(--hive-50);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--honey-500);
|
|
outline-offset: 3px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Fixed 64px navbar: anchor-jump targets (/#pricing, /#personas, …) must
|
|
land with their headline clear of the nav, not occluded under it. */
|
|
[id] {
|
|
scroll-margin-top: 80px;
|
|
}
|
|
|
|
/* ── Skip link (a11y) ── */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -48px;
|
|
left: 16px;
|
|
z-index: 200;
|
|
padding: 10px 18px;
|
|
border-radius: var(--r-sm);
|
|
background: var(--honey-500);
|
|
color: var(--hive-950);
|
|
font-size: var(--text-small);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: top 0.15s ease;
|
|
}
|
|
.skip-link:focus-visible {
|
|
top: 12px;
|
|
}
|
|
|
|
/* ── Shared layout primitives ── */
|
|
.container {
|
|
max-width: var(--container);
|
|
margin: 0 auto;
|
|
padding-left: var(--gutter);
|
|
padding-right: var(--gutter);
|
|
}
|
|
.container-wide {
|
|
max-width: var(--container-wide);
|
|
margin: 0 auto;
|
|
padding-left: var(--gutter);
|
|
padding-right: var(--gutter);
|
|
}
|
|
|
|
.section {
|
|
padding-top: var(--section-pad);
|
|
padding-bottom: var(--section-pad);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--mono);
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--honey-500);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-headline {
|
|
font-size: var(--text-h2);
|
|
font-weight: 700;
|
|
line-height: 1.12;
|
|
color: var(--hive-50);
|
|
max-width: 22em;
|
|
}
|
|
|
|
.section-lead {
|
|
font-size: var(--text-lead);
|
|
line-height: 1.6;
|
|
color: var(--hive-300);
|
|
max-width: 40em;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* Machine-truth line: mono, muted — the signature device for verifiable facts */
|
|
.mono-line {
|
|
font-family: var(--mono);
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.02em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 14px 28px;
|
|
border-radius: var(--r);
|
|
font-family: var(--sans);
|
|
font-size: var(--text-small);
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: background 0.15s ease, border-color 0.15s ease,
|
|
color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
|
|
}
|
|
.btn:active { transform: scale(0.97); }
|
|
|
|
.btn-primary {
|
|
background: var(--honey-500);
|
|
color: var(--hive-950);
|
|
box-shadow: var(--shadow-honey);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--honey-400);
|
|
box-shadow: 0 0 32px rgba(233, 165, 44, 0.2), 0 0 6px rgba(233, 165, 44, 0.12);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--hive-100);
|
|
border-color: var(--line-strong);
|
|
}
|
|
.btn-ghost:hover {
|
|
border-color: var(--hive-500);
|
|
background: rgba(236, 227, 208, 0.04);
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 9px 18px;
|
|
border-radius: var(--r-sm);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ── Card ── */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-lg);
|
|
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.card:hover {
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
/* ── Honeycomb Background ── */
|
|
.honeycomb-bg {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e9a52c' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ── Animations ── */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
@keyframes honey-pulse {
|
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
|
50% { opacity: 0.8; transform: scale(1.05); }
|
|
}
|
|
|
|
@keyframes card-enter {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.float { animation: float 3s ease-in-out infinite; }
|
|
.honey-pulse { animation: honey-pulse 3s ease-in-out infinite; }
|
|
.card-enter { animation: card-enter 0.6s ease-out both; }
|
|
|
|
.card-enter-1 { animation-delay: 0.1s; }
|
|
.card-enter-2 { animation-delay: 0.2s; }
|
|
.card-enter-3 { animation-delay: 0.3s; }
|
|
.card-enter-4 { animation-delay: 0.4s; }
|
|
|
|
/* ── Scroll reveal (used via <Reveal>) ──
|
|
Gated behind html.js (set by an inline script in layout.tsx) so content
|
|
stays fully visible when JavaScript is unavailable. */
|
|
html.js .reveal {
|
|
opacity: 0;
|
|
transform: translateY(14px);
|
|
transition: opacity 0.55s ease, transform 0.55s ease;
|
|
}
|
|
html.js .reveal.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.reveal-d1 { transition-delay: 0.06s; }
|
|
.reveal-d2 { transition-delay: 0.12s; }
|
|
.reveal-d3 { transition-delay: 0.18s; }
|
|
.reveal-d4 { transition-delay: 0.24s; }
|
|
.reveal-d5 { transition-delay: 0.3s; }
|
|
|
|
/* ── Card hover lift (legacy — kept for existing components) ── */
|
|
.card-lift {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
.card-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-honey);
|
|
border-color: var(--honey-500) !important;
|
|
}
|
|
|
|
/* ── Button press (legacy — kept for existing components) ── */
|
|
.btn-press:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
/* ── Reduced motion: disable all non-essential animation ── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
.float,
|
|
.honey-pulse,
|
|
.card-enter {
|
|
animation: none;
|
|
}
|
|
html.js .reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
.card-lift,
|
|
.btn,
|
|
.card {
|
|
transition: none;
|
|
}
|
|
}
|