/* ======================================================================== LUDO — theme foundation Concept: "Migration as a track." Editorial-technical, board-game undertone. Two themes: Daylight (light, default) · Terminal (dark). Font pairings switched via [data-pairing] on . ======================================================================== */ /* ----- Font pairings ----- */ :root { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } html[data-pairing="space"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } html[data-pairing="plex"] { --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ----- The Ludo quartet — codes the four license combos ----- */ :root { --ludo-green: #1f9d6b; /* Community → Community */ --ludo-blue: #2f6be3; /* Enterprise → Enterprise */ --ludo-amber: #d8902a; /* Community → Enterprise */ --ludo-coral: #e0573a; /* Enterprise → Community */ } /* ----- Daylight (default, light) ----- */ :root, html[data-theme="daylight"] { --paper: #f4f1e9; /* page background, warm */ --paper-2: #efebe0; /* recessed panels */ --surface: #fbfaf5; /* raised cards */ --surface-2:#ffffff; --ink: #1a1813; /* primary text, warm near-black */ --ink-2: #57534a; /* secondary text */ --ink-3: #8c887c; /* tertiary / captions */ --line: #d8d3c5; /* hairlines */ --line-2: #c5bfae; /* stronger lines */ --accent: #4b3df0; /* brand action color (violet) */ --accent-ink:#ffffff; /* text on accent */ --accent-soft:#e9e6fd; /* accent tint surface */ --on-paper-token: rgba(26,24,19,.04); --shadow-sm: 0 1px 2px rgba(26,24,19,.06), 0 1px 1px rgba(26,24,19,.04); --shadow-md: 0 4px 14px rgba(26,24,19,.08), 0 1px 3px rgba(26,24,19,.05); --shadow-lg: 0 24px 60px -20px rgba(26,24,19,.28), 0 8px 22px -12px rgba(26,24,19,.18); --grain-opacity: .035; color-scheme: light; } /* ----- Terminal (dark) ----- */ html[data-theme="terminal"] { --paper: #100f14; --paper-2: #16151c; --surface: #1a1922; --surface-2:#211f2b; --ink: #f3f1ec; --ink-2: #b3afc2; --ink-3: #76728a; --line: #2c2a38; --line-2: #3a3850; --accent: #9b8bff; --accent-ink:#15131f; --accent-soft:#241f3d; --on-paper-token: rgba(255,255,255,.05); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.45); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7), 0 10px 24px -12px rgba(0,0,0,.5); --grain-opacity: .05; color-scheme: dark; } /* Accent override applied inline via --accent on from tweaks */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01"; overflow-x: hidden; } /* Grain / paper texture overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: var(--grain-blend, multiply); } html[data-theme="terminal"] body::before { --grain-blend: screen; } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; } /* ---------------- Typography ---------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.96; } .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--line-2); } .mono { font-family: var(--font-mono); } .num { font-variant-numeric: tabular-nums; } /* ---------------- Layout ---------------- */ .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 940px; } section { position: relative; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; padding: 13px 20px; border-radius: 11px; border: 1px solid transparent; background: var(--surface); color: var(--ink); transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .btn--primary:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); } .btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); } .btn--ghost:hover { background: var(--on-paper-token); border-color: var(--ink-3); } .btn--lg { padding: 16px 26px; font-size: 14px; border-radius: 13px; } .btn .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------------- Pieces / tokens ---------------- */ /* The Ludo "piece": a rounded-square chip with a dot. */ .piece { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; } .piece::after { content: ""; width: 8px; height: 8px; border-radius: 3px; background: rgba(255,255,255,.92); } /* ---------------- Track motif ---------------- */ .track { position: relative; display: flex; align-items: center; } .track__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background-image: linear-gradient(90deg, var(--line-2) 0 60%, transparent 60%); background-size: 12px 2px; background-repeat: repeat-x; } /* ---------------- Cards ---------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; } /* ---------------- Tags / badges ---------------- */ .tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); } .tag .dot { width: 7px; height: 7px; border-radius: 50%; } /* ---------------- Focus ---------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------- Reveal-on-load animation ---------------- */ @keyframes ludo-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: ludo-rise .7s cubic-bezier(.2,.7,.2,1) both; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } * { scroll-behavior: auto !important; } } html { scroll-behavior: smooth; }