/* ========================================================================== CogniFit Micro Games — shared visual system Plain CSS, zero build step. Every game links this before its own styles.css so it can override/extend without duplicating tokens or components. ========================================================================== */ :root { /* Backgrounds */ --cf-bg-950: #020B2D; --cf-bg-900: #06164A; --cf-bg-850: #071B63; --cf-bg-panel: rgba(7, 25, 79, 0.78); --cf-bg-panel-strong: rgba(6, 20, 66, 0.92); --cf-bg-overlay: rgba(2, 8, 34, 0.66); /* Brand & actions */ --cf-blue-500: #2F6BFF; --cf-blue-400: #4F82FF; --cf-cyan-400: #27D7FF; --cf-cyan-300: #5CE7FF; --cf-violet-500: #8E5BFF; --cf-violet-400: #A36CFF; /* Reward & success */ --cf-gold-500: #FFC83D; --cf-gold-400: #FFD75F; --cf-success-500: #35D07F; /* Error & warning */ --cf-error-500: #FF5E6C; --cf-warning-500: #FF9F43; /* Text */ --cf-text-primary: #F7FAFF; --cf-text-secondary: #B8C5E8; --cf-text-muted: #7F90B9; --cf-text-dark: #07112F; /* Lines & surfaces */ --cf-border-soft: rgba(126, 159, 255, 0.22); --cf-border-medium: rgba(111, 150, 255, 0.42); --cf-white-08: rgba(255, 255, 255, 0.08); --cf-white-12: rgba(255, 255, 255, 0.12); --cf-white-18: rgba(255, 255, 255, 0.18); /* Gradients */ --cf-gradient-page: radial-gradient(circle at 20% 15%, rgba(47, 107, 255, .22), transparent 32%), radial-gradient(circle at 85% 75%, rgba(142, 91, 255, .20), transparent 36%), linear-gradient(180deg, #06164A 0%, #020B2D 100%); --cf-gradient-primary: linear-gradient(100deg, #7049F7 0%, #2F6BFF 52%, #27D7FF 100%); --cf-gradient-purple-card: linear-gradient(145deg, #6D39D8 0%, #3A1C91 100%); --cf-gradient-gold-card: linear-gradient(145deg, #FFCA2E 0%, #C97800 100%); --cf-gradient-panel: linear-gradient(180deg, rgba(13, 35, 105, .92) 0%, rgba(4, 16, 57, .88) 100%); /* Typography vmin = whichever of width/height is smaller. Sizing off it means text shrinks correctly on short landscape screens too, not just narrow ones. */ --cf-font-ui: Inter, "SF Pro Display", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cf-type-display: clamp(28px, 6vmin, 48px); --cf-type-h1: clamp(22px, 5vmin, 36px); --cf-type-h2: clamp(20px, 4.5vmin, 30px); --cf-type-body-lg: clamp(16px, 3.5vmin, 22px); --cf-type-body: clamp(16px, 3vmin, 19px); --cf-type-label: clamp(13px, 2.5vmin, 16px); --cf-type-metric: clamp(20px, 4.5vmin, 38px); /* Spacing (4px scale) */ --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; /* Radii */ --cf-radius-sm: 10px; --cf-radius-md: 16px; --cf-radius-lg: 24px; --cf-radius-xl: 32px; --cf-radius-pill: 999px; /* Shadows */ --cf-shadow-panel: 0 14px 40px rgba(0, 6, 35, .42), inset 0 1px 0 rgba(255, 255, 255, .10); --cf-shadow-blue: 0 0 0 1px rgba(79, 130, 255, .65), 0 0 22px rgba(47, 107, 255, .38), 0 12px 30px rgba(0, 0, 0, .34); --cf-shadow-purple: 0 0 0 1px rgba(177, 111, 255, .78), 0 0 22px rgba(142, 91, 255, .45), 0 12px 26px rgba(0, 0, 0, .35); --cf-shadow-gold: 0 0 0 1px rgba(255, 214, 80, .90), 0 0 24px rgba(255, 190, 30, .55), 0 12px 26px rgba(0, 0, 0, .35); /* Motion */ --cf-motion-fast: 120ms; --cf-motion-base: 200ms; --cf-motion-slow: 320ms; --cf-ease-standard: cubic-bezier(.2, .8, .2, 1); /* Layout — how much of .cf-app/.screen's edges to leave clear of content. Defaults are just each side's own safe-area inset; the host embedding a game (e.g. the CogniFit feed) can override any of these at runtime via Utils.setPaddings({top, right, bottom, left}), to also clear its own UI drawn on top of the game (see Utils.setPaddings in utils.js). */ --cf-pad-top: max(clamp(10px, 3vmin, 16px), env(safe-area-inset-top)); --cf-pad-right: max(16px, env(safe-area-inset-right)); --cf-pad-bottom: max(clamp(10px, 3vmin, 18px), env(safe-area-inset-bottom)); --cf-pad-left: max(16px, env(safe-area-inset-left)); } /* ---- Reset & base ---------------------------------------------------- */ * { box-sizing: border-box; touch-action: manipulation; } html, body { height: 100%; } body { margin: 0; overflow: hidden; font-family: var(--cf-font-ui); color: var(--cf-text-primary); background: var(--cf-gradient-page); background-color: var(--cf-bg-950); user-select: none; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--cf-cyan-400); outline-offset: 2px; } /* Reduced motion still gets a state change, just a much quicker one — a flip or a modal that plays over 0.001ms reads as "broken", not "reduced". */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 100ms !important; transition-duration: 100ms !important; } } /* There is deliberately no matching (prefers-reduced-motion: no-preference) rule. There used to be one clamping everything to 300ms, which is the default case — so it silently overrode every duration in this file and in every game, --cf-motion-* tokens included. No preference means "give me the motion as written", so nothing needs saying here. */ /* ---- App shell -------------------------------------------------------- Every game's (or its top-level screen container) gets .cf-app. Screens are absolutely stacked, only `.active` is interactive/visible — same pattern GRIDFLIP already used, just restyled. A screen is a column: an optional .cf-topbar (fixed height, in normal flow — never overlapping content) followed by .cf-screen-body, which takes the remaining space and centers its own content. Sizes throughout this file scale with vmin so content fits without ever needing to scroll — no scrollbars, on any screen, at any size. ------------------------------------------------------------------- */ .cf-app, .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: var(--cf-pad-top) var(--cf-pad-right) var(--cf-pad-bottom) var(--cf-pad-left); } .screen { opacity: 0; pointer-events: none; transform: scale(0.98); transition: opacity var(--cf-motion-slow) var(--cf-ease-standard), transform var(--cf-motion-slow) var(--cf-ease-standard); } .screen.active { opacity: 1; pointer-events: auto; transform: scale(1); } /* ---- Top bar / HUD ----------------------------------------------------- */ .cf-topbar { position: relative; width: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: var(--cf-space-3); margin-bottom: clamp(6px, 1.5vmin, 12px); } .cf-screen-body { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Also used as a link back to the game picker (root index.html), top-left on every screen — same look whether it's a
or an . */ .cf-brand { display: flex; align-items: center; gap: var(--cf-space-2); min-width: 0; font-weight: 700; font-size: var(--cf-type-label); color: var(--cf-text-secondary); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: color var(--cf-motion-base) var(--cf-ease-standard); } .cf-brand:hover { color: var(--cf-text-primary); } .cf-brand svg { width: 20px; height: 20px; color: var(--cf-cyan-400); flex-shrink: 0; } .cf-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.is-embedded .cf-brand { display: none; } .cf-topbar-left { display: flex; align-items: center; gap: var(--cf-space-2); min-width: 0; } /* ---- Language switcher ------------------------------------------------- Always sits beside the brand mark, top-left, on every screen where the brand shows. It's a styled button with a real