/* =========================================================================== kofai — design system Bright, clean "private-banking" aesthetic. Light canvas, one bold green accent, generous whitespace, tabular numbers everywhere. Mobile-first. =========================================================================== */ :root { /* surfaces — warm-neutral near-whites, not flat #fff everywhere */ --bg: #F1F2F0; /* app canvas */ --bg-soft: #E9EBE8; --card: #FFFFFF; --card-2: #F7F8F6; /* nested fills */ /* ink — slightly green-warmed near-black for cohesion */ --ink: #0C1110; --ink-2: #5A625E; --ink-3: #949B96; --line: rgba(12,17,16,0.075); --line-2: rgba(12,17,16,0.12); /* accent — confident green, readable on white */ --accent: #00A656; --accent-deep: #00854A; --accent-press: #009650; --accent-tint: rgba(0,166,86,0.10); --accent-tint-2: rgba(0,166,86,0.16); --on-accent: #FFFFFF; /* semantic */ --pos: #00A656; --pos-tint: rgba(0,166,86,0.10); --neg: #E5484D; --neg-tint: rgba(229,72,77,0.10); --warn: #D98A0B; --warn-tint: rgba(217,138,11,0.12); /* book identities */ --bk-betsson: #F4811F; --bk-7bet: #11A697; --bk-topsport: #E5484D; --bk-optibet: #6FA80E; /* radii */ --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --r-pill: 999px; /* shadows — soft, layered, low-contrast (premium light UI) */ --sh-xs: 0 1px 2px rgba(12,17,16,0.05); --sh-sm: 0 1px 2px rgba(12,17,16,0.05), 0 2px 6px -2px rgba(12,17,16,0.06); --sh-md: 0 1px 2px rgba(12,17,16,0.04), 0 10px 24px -14px rgba(12,17,16,0.20); --sh-lg: 0 2px 4px rgba(12,17,16,0.04), 0 24px 48px -20px rgba(12,17,16,0.28); --sh-accent: 0 10px 24px -10px rgba(0,166,86,0.55); --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --ease: cubic-bezier(0.22, 0.8, 0.28, 1); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } .kf-app { position: absolute; inset: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; flex-direction: column; overflow: hidden; } /* Overlays (Toast, BankrollSheet, BetSheet, SettleSheet, paywall) mount as siblings of .kf-app, so the .kf-app rule below never reaches them — they inherit from , which without this resolves to the browser default (a serif in many environments). Pin the brand face on body so EVERY node, in-app or sibling overlay, renders in Hanken Grotesk. */ body, body * { font-family: var(--font); } .kf-app, .kf-app * { font-family: var(--font); } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; } /* generic scroll region for screens */ .kf-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kf-scroll::-webkit-scrollbar { width: 0; display: none; } /* mobile screen scrollers (feed/bets/profile) reserve room for the absolute bottom TabBar so the last card (e.g. the Pro / upgrade card) never hides under it. Detail/desktop set their own inline padding and are unaffected. */ .kf-screenpad { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } /* status-bar safe top spacer. height = the OS-reported safe area (notch / Dynamic Island / status bar — 0 in a plain browser tab where the URL bar already covers it) + a fixed breathing gap. The inset adapts per device (needs viewport-fit=cover, set in index.html); --kf-topgap is the only knob — it's the design gap between the system clock and the kofai logo. */ .kf-statusgap { height: calc(env(safe-area-inset-top, 0px) + var(--kf-topgap, 12px)); flex: none; } /* ---- buttons ---- */ .kf-btn { font-family: var(--font); font-weight: 700; font-size: 16px; border: none; cursor: pointer; border-radius: var(--r-md); padding: 15px 20px; transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .kf-btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-accent); } .kf-btn-primary:active { transform: scale(.975); background: var(--accent-press); } .kf-btn-ghost { background: var(--card); color: var(--ink); box-shadow: var(--sh-sm); } .kf-btn-ghost:active { transform: scale(.975); } .kf-btn:disabled { opacity: .5; cursor: default; } /* ---- pressable ---- */ .press { transition: transform .14s var(--ease); } .press:active { transform: scale(.97); } /* fade/slide entrance for routed screens */ @keyframes kf-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes kf-detail-in { from { transform: translateX(22px); } to { transform: none; } } @keyframes kf-rise { from { transform: translateY(9px); } to { transform: none; } } .kf-rise { animation: kf-rise .4s var(--ease) both; } /* count-up shimmer used on hero numbers */ @keyframes kf-pop { 0% { transform: scale(.96); opacity: .4; } 100% { transform: scale(1); opacity: 1; } } @keyframes kf-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } /* live ping */ .kf-ping { animation: kf-ping 1.8s var(--ease) infinite; } @keyframes kf-ping { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.4); opacity: 0; } } .kf-hscroll::-webkit-scrollbar { display: none; height: 0; } /* =========================================================================== freemium / lock treatments =========================================================================== */ /* selectively blur sensitive numbers on a locked card */ .kf-blur { filter: blur(6.5px); -webkit-filter: blur(6.5px); user-select: none; pointer-events: none; opacity: 0.92; } .kf-blur-soft { filter: blur(4px); -webkit-filter: blur(4px); user-select: none; } /* redaction bar — a solid pill standing in for hidden text */ .kf-redact { display: inline-block; height: 13px; border-radius: 7px; background: var(--line-2); vertical-align: middle; } /* locked card hover lift (desktop) */ .kf-lockcard { transition: transform .16s var(--ease), box-shadow .2s var(--ease); } .kf-lockcard:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } /* unlock reveal — used when a card transitions free→pro */ @keyframes kf-unlock { 0% { transform: scale(.985); filter: blur(5px); opacity: .4; } 100% { transform: none; filter: blur(0); opacity: 1; } } .kf-unlock { animation: kf-unlock .55s var(--ease) both; } /* count-up ring for the success moment */ @keyframes kf-ring-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .kf-ring-pop { animation: kf-ring-pop .5s var(--ease) both; } /* subtle diagonal sheen on dark Pro surfaces */ .kf-prosheen { position: relative; overflow: hidden; } .kf-prosheen::after { content: ''; position: absolute; top: -40%; right: -10%; width: 50%; height: 180%; background: radial-gradient(closest-side, rgba(0,166,86,0.20), transparent 70%); pointer-events: none; }