/** * Floodlight design system — portable, framework-agnostic CSS. * * Extracted verbatim from the Cricket Simulator app (app/globals.css + * tailwind.config.ts + app/layout.tsx). Works standalone in any project — * no Tailwind build step required. Every @apply rule from the original has * been hand-expanded to plain CSS below. * * Usage: * 1. Import/link this file (keep the @import for the 3 fonts, or self-host). * 2. Dark is the default theme. Add class="light" to to switch: * document.documentElement.classList.toggle('light') * 3. Use the component classes directly: .card .btn.btn-primary .chip .field * 4. Every accent/ink color is also a CSS custom property (--cherry, * --ink-900, ...) so you can reference them from your own CSS/JS. * * A Tailwind theme-mapping reference is included as a comment at the bottom, * only needed if your target project also uses Tailwind. */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---- Fonts ---- */ --font-display: "Anton", Impact, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ---- Accents (identical across both themes) ---- */ --cherry: #ff3b3b; --cherry-deep: #d61f1f; --cherry-soft: #ff6b6b; --amber: #ffc531; --amber-deep: #e0a516; --pitch: #2fd67a; --pitch-deep: #17b26a; --sky: #47c2ff; /* ---- "Ink" neutral scale (warm near-black) ---- */ --ink-900: #0b0d10; --ink-800: #14171d; --ink-700: #1b1f28; --ink-600: #242a35; /* ---- Dark theme (default) ---- --fg is a space-separated RGB triplet so it composes with alpha: color: rgb(var(--fg) / 0.4) */ --fg: 243 245 248; --bg: #0b0d10; --surface: rgba(20, 23, 29, 0.82); --elevated: rgba(11, 13, 16, 0.7); --bar: rgba(11, 13, 16, 0.85); --card-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9); --glow-1: rgba(230, 240, 255, 0.12); --glow-2: rgba(255, 197, 49, 0.13); --glow-3: rgba(255, 59, 59, 0.1); --grain-opacity: 0.05; --danger-fg: #fecaca; --warn-fg: #fcd34d; --ok-fg: #86efac; /* Accent-as-TEXT colours (kept readable on their own tints/surfaces) */ --cherry-ink: #ff6b6b; --amber-ink: #ffc531; --pitch-ink: #35d67a; --sky-ink: #5cc7ff; color-scheme: dark; } /* ---- Light theme — add class="light" to ---- */ html.light { --fg: 22 27 36; --bg: #eef1f6; --surface: rgba(255, 255, 255, 0.95); --elevated: #ffffff; --bar: rgba(248, 250, 252, 0.9); --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 14px 30px -18px rgba(16, 24, 40, 0.22); --glow-1: rgba(70, 130, 210, 0.1); --glow-2: rgba(245, 176, 40, 0.16); --glow-3: rgba(255, 80, 80, 0.08); --grain-opacity: 0.025; --danger-fg: #b42318; --warn-fg: #92400e; --ok-fg: #15803d; --cherry-ink: #c11414; --amber-ink: #8a5a00; --pitch-ink: #157f3c; --sky-ink: #0e6ba8; color-scheme: light; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; color: rgb(var(--fg)); background: var(--bg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3 { letter-spacing: -0.01em; } /* ---- "Floodlight" atmosphere — optional fixed background glow + grain. Delete this block if you just want the tokens/components without the signature dark broadcast backdrop. ---- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 12% -8%, var(--glow-1), transparent 60%), radial-gradient(820px 460px at 92% -6%, var(--glow-2), transparent 58%), radial-gradient(1100px 700px at 50% 118%, var(--glow-3), transparent 60%), var(--bg); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ COMPONENTS (hand-expanded from the original Tailwind @apply rules — no Tailwind build step required to use any of these) ============================================================ */ .card { border-radius: 1rem; /* rounded-2xl */ backdrop-filter: blur(4px); background: var(--surface); border: 1px solid rgb(var(--fg) / 0.08); box-shadow: var(--card-shadow); } .kicker { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.28em; color: rgb(var(--fg) / 0.4); } .btn { display: inline-flex; -webkit-user-select: none; user-select: none; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; /* rounded-xl */ padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.025em; min-height: 44px; border: none; cursor: pointer; transition: all 150ms ease; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: none; /* mimics Tailwind's ring + ring-offset stack */ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring-color, rgb(var(--fg) / 0.4)); } .btn:disabled { pointer-events: none; opacity: 0.4; } .btn-primary { color: #fff; background: linear-gradient(180deg, #ff5252, #e11d1d); box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.4), 0 8px 30px -6px rgba(255, 59, 59, 0.35); --ring-color: var(--cherry); } .btn-primary:hover { filter: brightness(1.1); } .btn-gold { color: var(--ink-900); background: var(--amber); --ring-color: var(--amber); } .btn-gold:hover { filter: brightness(1.1); } .btn-ghost { color: rgb(var(--fg)); background: rgb(var(--fg) / 0.05); border: 1px solid rgb(var(--fg) / 0.14); --ring-color: rgb(var(--fg) / 0.4); } .btn-ghost:hover { background: rgb(var(--fg) / 0.1); border-color: rgb(var(--fg) / 0.3); } .btn-pitch { color: var(--ink-900); background: var(--pitch); --ring-color: var(--pitch); } .btn-pitch:hover { filter: brightness(1.1); } .chip { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 0.375rem; /* rounded-md */ padding: 0.125rem 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; } .field { width: 100%; border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: rgb(var(--fg)); outline: none; background: var(--elevated); border: 1px solid rgb(var(--fg) / 0.14); min-height: 44px; transition: border-color 150ms ease, box-shadow 150ms ease; } .field::placeholder { color: rgb(var(--fg) / 0.35); } .field:focus { border-color: rgba(255, 59, 59, 0.7); box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.2); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .text-danger { color: var(--danger-fg); } .text-warn { color: var(--warn-fg); } .text-ok { color: var(--ok-fg); } .divider-crease { height: 1px; background-image: linear-gradient(90deg, transparent, rgb(var(--fg) / 0.14) 30%, rgb(var(--fg) / 0.14) 70%, transparent); } /* ============================================================ MOTION ============================================================ */ [data-reveal] { animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); } @keyframes fade-up { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes pop-in { 0% { opacity: 0; transform: scale(0.86) translateY(4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes tick { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes flash-cherry { 0% { background: rgba(255, 59, 59, 0.55); } 100% { background: transparent; } } @keyframes flash-pitch { 0% { background: rgba(47, 214, 122, 0.5); } 100% { background: transparent; } } @keyframes flash-amber { 0% { background: rgba(255, 197, 49, 0.5); } 100% { background: transparent; } } @keyframes spin-coin { 0% { transform: rotateY(0); } 100% { transform: rotateY(1800deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-up { animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-pop-in { animation: pop-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-tick { animation: tick 0.4s ease-out; } .animate-flash-cherry { animation: flash-cherry 0.7s ease-out; } .animate-flash-pitch { animation: flash-pitch 0.7s ease-out; } .animate-flash-amber { animation: flash-amber 0.7s ease-out; } .animate-spin-coin { animation: spin-coin 0.9s ease-out; } .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-thin::-webkit-scrollbar-thumb { background: rgb(var(--fg) / 0.18); border-radius: 8px; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ============================================================ REFERENCE ONLY — Tailwind theme mapping Only needed if your target project also uses Tailwind and you want utility classes like bg-cherry / text-fg/60 / font-display on top of the plain CSS above. Paste into tailwind.config.{js,ts} under theme.extend. Not required for anything above this point to work. colors: { fg: "rgb(var(--fg) / )", bg: "var(--bg)", surface: "var(--surface)", elevated: "var(--elevated)", bar: "var(--bar)", ink: { DEFAULT: "#0b0d10", 900: "#0b0d10", 800: "#14171d", 700: "#1b1f28", 600: "#242a35" }, cherry: { DEFAULT: "#ff3b3b", deep: "#d61f1f", soft: "#ff6b6b" }, amber: { DEFAULT: "#ffc531", deep: "#e0a516" }, pitch: { DEFAULT: "#2fd67a", deep: "#17b26a" }, sky: { DEFAULT: "#47c2ff" }, cherryInk: "var(--cherry-ink)", amberInk: "var(--amber-ink)", pitchInk: "var(--pitch-ink)", skyInk: "var(--sky-ink)", }, fontFamily: { display: ["var(--font-display)", "Impact", "sans-serif"], body: ["var(--font-body)", "system-ui", "sans-serif"], mono: ["var(--font-mono)", "ui-monospace", "monospace"], }, boxShadow: { card: "0 1px 0 0 rgba(255,255,255,0.06) inset, 0 18px 40px -24px rgba(0,0,0,0.9)", glow: "0 0 0 1px rgba(255,59,59,0.4), 0 8px 30px -6px rgba(255,59,59,0.35)", }, ============================================================ */