/* ───────────────────────────────────────────────────────────────── Fournine Labs — Design Tokens & Base Styles Brand dots: orange-red, lime-green, teal (wordmark), blue Type: Space Grotesk (display+body), JetBrains Mono (telemetry) ───────────────────────────────────────────────────────────────── */ :root { /* Brand palette — pulled from logo */ --brand-teal: #14B8AC; /* wordmark, primary */ --brand-orange: #E94C3E; --brand-lime: #8FC640; --brand-blue: #2D7FE6; /* Tints */ --brand-teal-soft: color-mix(in oklab, var(--brand-teal) 18%, transparent); --brand-orange-soft: color-mix(in oklab, var(--brand-orange) 18%, transparent); --brand-lime-soft: color-mix(in oklab, var(--brand-lime) 18%, transparent); --brand-blue-soft: color-mix(in oklab, var(--brand-blue) 18%, transparent); /* Neutrals */ --ink-900: #0A1018; /* near-black navy, used for dark sections */ --ink-800: #11192A; --ink-700: #1A2438; --ink-600: #2A3450; --ink-300: #8794A8; --ink-200: #C7CFDB; --ink-100: #E6EAF0; --paper: #F6F5F1; /* cream body */ --paper-2: #ECEAE2; --white: #FFFFFF; /* Semantic */ --bg: var(--paper); --fg: var(--ink-900); --muted: var(--ink-300); --line: color-mix(in oklab, var(--ink-900) 10%, transparent); /* Type */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif; /* Spacing density */ --density: 1; --pad-section: calc(120px * var(--density)); --gutter: clamp(12px, 2.4vw, 34px); --maxw: 1280px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; } /* DARK MODE — applied to when toggled */ html.dark { --bg: var(--ink-900); --fg: #F0F4F9; --paper: var(--ink-900); --paper-2: var(--ink-800); --white: var(--ink-800); --muted: #8B97AE; --line: rgba(255,255,255,.10); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--brand-teal); color: white; } /* ── Layout helpers ──────────────────────────────────────────── */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: var(--pad-section); } .section--dark { background: var(--ink-900); color: #F0F4F9; --fg: #F0F4F9; --muted: #8B97AE; --line: rgba(255,255,255,.10); } /* ── Typography ──────────────────────────────────────────────── */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--brand-teal); box-shadow: 0 0 0 4px var(--brand-teal-soft); } .eyebrow--orange::before { background: var(--brand-orange); box-shadow: 0 0 0 4px var(--brand-orange-soft); } .eyebrow--lime::before { background: var(--brand-lime); box-shadow: 0 0 0 4px var(--brand-lime-soft); } .eyebrow--blue::before { background: var(--brand-blue); box-shadow: 0 0 0 4px var(--brand-blue-soft); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; margin: 0; } .h-display { font-size: clamp(48px, 7.2vw, 104px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.96; } .h-section { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.028em; line-height: 1.02; } .h-card { font-size: clamp(22px, 1.7vw, 28px); letter-spacing: -0.018em; font-weight: 500; } .lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 56ch; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 99px; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--brand-teal); color: #02201E; } .btn--primary:hover { background: color-mix(in oklab, var(--brand-teal) 88%, white); } .btn--ghost { background: transparent; color: currentColor; border-color: color-mix(in oklab, currentColor 22%, transparent); } .btn--ghost:hover { border-color: currentColor; } .btn--dark { background: var(--ink-900); color: white; } .btn-arrow { display: inline-block; transition: transform .2s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ── Brand dot motif ─────────────────────────────────────────── */ .dot-row { display: inline-flex; align-items: center; gap: 4px; } .dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; } .dot--teal { background: var(--brand-teal); } .dot--orange { background: var(--brand-orange); } .dot--lime { background: var(--brand-lime); } .dot--blue { background: var(--brand-blue); } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } html.dark .card { background: var(--ink-800); } /* ── NAV ─────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; } .nav__links { display: flex; gap: 28px; align-items: center; } .nav__links a { font-size: 17px; color: var(--fg); opacity: .72; transition: opacity .15s; font-weight: 500; } .nav__links a:hover { opacity: 1; } .nav__cta { display: flex; gap: 12px; align-items: center; } @media (max-width: 880px) { .nav__links { display: none; } } /* ── Telemetry / sparkline shared styles ─────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; background: var(--brand-teal-soft); color: var(--brand-teal); font-weight: 500; } .tag--orange { background: var(--brand-orange-soft); color: var(--brand-orange); } .tag--lime { background: var(--brand-lime-soft); color: #4F8E13; } .tag--blue { background: var(--brand-blue-soft); color: var(--brand-blue); } html.dark .tag--lime { color: var(--brand-lime); } /* status badge for OK / WARN / FAULT */ .status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 25%, transparent); } .status--ok { color: var(--brand-lime); } .status--warn { color: #F2A93B; } .status--fault{ color: var(--brand-orange); } /* ── animated grid background for hero & dark panels ─────────── */ .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%); pointer-events: none; } /* light-section grid for soft texture */ .grid-bg--light { background-image: linear-gradient(to right, rgba(10,16,24,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,16,24,0.05) 1px, transparent 1px); } /* ── animations ──────────────────────────────────────────────── */ @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.55; } } @keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes flow-dash { to { stroke-dashoffset: -28; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .pulse { animation: pulse-dot 2.4s ease-in-out infinite; } .blink { animation: blink 1.6s ease-in-out infinite; } /* ── helper grid for solutions etc. ──────────────────────────── */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } :root { --pad-section: 72px; } } /* ── focus rings ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; border-radius: 6px; } /* ── Section divider with corner tick marks (like blueprint) ─ */ .tick-frame { position: relative; } .tick-frame::before, .tick-frame::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: currentColor; opacity: .4; } .tick-frame::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; } .tick-frame::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; } /* ── tooltip / coords for hero ───────────────────────────────── */ .coord { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.45); letter-spacing: 0; }