/* ===== 0) Theme colours (from your app) ===== */ :root { /* store channels as space-separated numbers so we can do rgb(var(--x)) */ --body: 218 217 217; --inputBG: 255 255 255; --text: 76 76 76; --primary: 76 76 76; --secondary: 255 255 255; --accent: 255 255 255; --accent2: 255 255 255; --icons: 2 2 2; --iconInactive: 131 131 131; --report2: 165 160 150; --signIn: 187 185 185; --centerBtn: 76 76 76; --title: 255 255 255; --modalSecondary: 198 198 198; --mainTitle: 93 93 93; --segmentSeparator:159 155 148; --homeSection: 134 128 113; } /* ===== 1) Custom font ===== */ @font-face { font-family: 'SoleFont'; src: url('/assets/new.ttf') format('truetype'); /* add woff2 if you have it */ font-weight: 400; font-style: normal; font-display: swap; } /* ===== 2) Base reset + default stack (works fine with Tailwind) ===== */ html, body { margin: 0; padding: 0; } body { line-height: 1.5; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* If you DON'T override via Tailwind classes on , these apply: */ background: rgb(var(--body)); color: rgb(var(--text)); } /* ===== 3) Logo text ===== */ .sole-logo { font-family: 'SoleFont', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.2px; color: rgb(var(--mainTitle)); } /* ===== 4) Small utilities (use anywhere) ===== */ .rounded-5 { border-radius: 5px; } /* Buttons that match your theme (optional; use if you want CSS classes) */ .btn-primary { background: rgb(var(--primary)); color: rgb(var(--title)); border: 1px solid transparent; border-radius: 12px; padding: 0.75rem 1.25rem; } .btn-primary:hover { filter: brightness(0.95); } .btn-outline { background: transparent; color: rgb(var(--primary)); border: 1px solid rgb(var(--primary)); border-radius: 12px; padding: 0.75rem 1.25rem; } .btn-outline:hover { background: color-mix(in srgb, rgb(var(--secondary)) 60%, transparent); } /* Card look that matches your app neutrals */ .card { background: rgb(var(--secondary)); border: 1px solid rgb(var(--report2)); border-radius: 16px; } /* Optional soft background glow for the hero */ .hero-gradient { background: radial-gradient(1200px 600px at 60% 40%, rgba(0,0,0,0.06), transparent 60%); }