/* ========================================================================== * PocketFund.in — Marketing-site styles * ========================================================================== * * Loaded by every marketing page (root + /marketing/, /company/, /legal/, * /resources/*, /auth/, /admin/) and by /cms.html. NOT loaded directly by * portal pages — they pull portal.css (which inherits the same tokens). * * -------------------------------------------------------------------------- * High-level layout * -------------------------------------------------------------------------- * 1. Tokens — :root design tokens (colours, spacing, shadows, fonts) * 2. Themes — 11 [data-theme] overrides (7 dark + 4 light) * 3. Light-theme readability pass — element-by-element fixes * 4. Atoms — buttons, chips, fit-mini, brand-logo lock, body bg * 5. Theme picker — palette button + popover swatch grid * 6. Layout primitives — html/body/container/img/a/button * 7. Navigation — top nav bar * 8. Buttons (primary/ghost/outline/lg variants) * 9. Hero sections * 10. Marketing sections (features, stats, stages, investor-types, steps, …) * 11. Footer * 12. Auth layout (login.html + signup.html shared shell) * 13. Discover page (filters, idea cards) * 14. About page (team grid, values, …) * 15. Pricing page (price cards) * 16. Article / guide / playbook layouts * 17. Workbook component (resources/workbooks/*) * 18. Breadcrumbs (sticky strip above hero) * 19. Responsive @media rules * * -------------------------------------------------------------------------- * Naming conventions * -------------------------------------------------------------------------- * - All design tokens live on :root and are consumed via var(--name). * - --brand-rgb / --brand-2-rgb / --accent-rgb hold raw RGB triplets so * rgba(var(--brand-rgb), .15) works inside any rule. * - .chip variants take a colour modifier: .chip.cyan, .chip.green, etc. * - .btn variants: .btn-primary, .btn-ghost, .btn-outline, .btn-lg. * - Component classes are flat (no BEM); spread is small enough to keep * ad-hoc class names readable. * * -------------------------------------------------------------------------- * Theme system * -------------------------------------------------------------------------- * theme.js sets on load. Each theme block in * section 2 overrides --brand, --brand-2, --accent, --bg, --bg-2 (and * the *-rgb triplets). Section 3 patches element-level rules whose dark- * theme defaults didn't translate cleanly to light backgrounds. * ========================================================================= */ /* ========================================================================== * 1. Design tokens * ========================================================================= */ :root { --bg: #0b0d17; --bg-2: #111427; --surface: #161a2e; --surface-2: #1c2139; --border: #252b47; --text: #eef0fb; --muted: #9aa3c7; --brand: #7c5cff; --brand-2: #4ad3ff; --accent: #ff7ac6; /* RGB triplets so rgba() / linear-gradients can be themed via tokens */ --brand-rgb: 124, 92, 255; --brand-2-rgb: 74, 211, 255; --accent-rgb: 255, 122, 198; --good: #22c55e; --warn: #f59e0b; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 12px 30px -10px rgba(0,0,0,.55); --shadow-lg: 0 30px 80px -20px rgba(50,30,120,.55); --maxw: 1180px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* ========================================================================== * 2. Themes * -------------------------------------------------------------------------- * Each [data-theme="..."] block overrides the brand tokens (and, where * useful, the background tint). theme.js sets the data-theme attribute on * on every page load. The default (no data-theme attribute) is * "aurora" — see :root tokens above. * * Adding a new theme: * 1. Add a block here with --brand / --brand-2 / --accent overrides. * 2. Update the *-rgb triplets too. * 3. Append the theme's id + label + mode + c1/c2 to THEMES in theme.js. * 4. If it's a light theme, also patch section 3 (readability rules). * ========================================================================= */ [data-theme="forest"] { --brand: #22c55e; --brand-2: #84cc16; --accent: #f59e0b; --brand-rgb: 34, 197, 94; --brand-2-rgb: 132, 204, 22; --accent-rgb: 245, 158, 11; --bg: #08120c; --bg-2: #0d1d12; } [data-theme="sunset"] { --brand: #f97316; --brand-2: #f59e0b; --accent: #ef4444; --brand-rgb: 249, 115, 22; --brand-2-rgb: 245, 158, 11; --accent-rgb: 239, 68, 68; --bg: #160c08; --bg-2: #1d130a; } [data-theme="ocean"] { --brand: #0ea5e9; --brand-2: #06b6d4; --accent: #6366f1; --brand-rgb: 14, 165, 233; --brand-2-rgb: 6, 182, 212; --accent-rgb: 99, 102, 241; --bg: #07111d; --bg-2: #0a1729; } [data-theme="midnight"] { --brand: #a855f7; --brand-2: #ec4899; --accent: #f43f5e; --brand-rgb: 168, 85, 247; --brand-2-rgb: 236, 72, 153; --accent-rgb: 244, 63, 94; --bg: #08070d; --bg-2: #100d18; } [data-theme="rose"] { --brand: #ec4899; --brand-2: #fb7185; --accent: #a855f7; --brand-rgb: 236, 72, 153; --brand-2-rgb: 251, 113, 133; --accent-rgb: 168, 85, 247; --bg: #160810; --bg-2: #200d18; } [data-theme="graphite"] { --brand: #94a3b8; --brand-2: #64748b; --accent: #cbd5e1; --brand-rgb: 148, 163, 184; --brand-2-rgb: 100, 116, 139; --accent-rgb: 203, 213, 225; --bg: #0a0c10; --bg-2: #0f1218; } /* ---- Light themes ---- Each light theme overrides the surface + text tokens for proper contrast, re-tints rgba() panels via a custom property, swaps option/select bg, and lifts the heading weight a notch so the type stays bold against bright backgrounds. Logo is locked via fixed-color gradients so it stays the PocketFund identity colours regardless of the active theme. */ [data-theme="daylight"] { --brand: #5b3df6; --brand-2: #0ea5e9; --accent: #db2777; --brand-rgb: 91, 61, 246; --brand-2-rgb: 14, 165, 233; --accent-rgb: 219, 39, 119; --bg: #f5f7fc; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f0f3fb; --border: #dbe1ee; --text: #0b0d17; --muted: #5b657f; } [data-theme="paper"] { --brand: #b45309; --brand-2: #c2410c; --accent: #be185d; --brand-rgb: 180, 83, 9; --brand-2-rgb: 194, 65, 12; --accent-rgb: 190, 24, 93; --bg: #fbf6ec; --bg-2: #fffaf0; --surface: #ffffff; --surface-2: #f6efe1; --border: #e6dcc6; --text: #1f160b; --muted: #6b5b46; } [data-theme="mint"] { --brand: #047857; --brand-2: #15803d; --accent: #b45309; --brand-rgb: 4, 120, 87; --brand-2-rgb: 21, 128, 61; --accent-rgb: 180, 83, 9; --bg: #ecf6ee; --bg-2: #f6fbf7; --surface: #ffffff; --surface-2: #e2efe5; --border: #cfe2d4; --text: #0c1810; --muted: #466856; } [data-theme="sky"] { --brand: #0369a1; --brand-2: #0d9488; --accent: #c026d3; --brand-rgb: 3, 105, 161; --brand-2-rgb: 13, 148, 136; --accent-rgb: 192, 38, 211; --bg: #eff6fb; --bg-2: #f7fbfe; --surface: #ffffff; --surface-2: #e3edf6; --border: #cfdcea; --text: #08111d; --muted: #44607b; } /* Light-theme adjustments — every place that used near-white tints over a dark background flips to near-black tints over a light background. */ [data-theme="daylight"], [data-theme="paper"], [data-theme="mint"], [data-theme="sky"] { color-scheme: light; } [data-theme="daylight"] .nav, [data-theme="paper"] .nav, [data-theme="mint"] .nav, [data-theme="sky"] .nav { background: rgba(255,255,255,.72); border-bottom: 1px solid var(--border); } [data-theme="daylight"] .sub-nav, [data-theme="paper"] .sub-nav, [data-theme="mint"] .sub-nav, [data-theme="sky"] .sub-nav { background: rgba(255,255,255,.6); border-bottom: 1px solid var(--border); } [data-theme="daylight"] select, [data-theme="paper"] select, [data-theme="mint"] select, [data-theme="sky"] select, [data-theme="daylight"] option, [data-theme="paper"] option, [data-theme="mint"] option, [data-theme="sky"] option { background-color: #ffffff !important; color: var(--text) !important; } /* Bolder headings on light themes for crisp readability */ [data-theme="daylight"] h1, [data-theme="paper"] h1, [data-theme="mint"] h1, [data-theme="sky"] h1, [data-theme="daylight"] h2, [data-theme="paper"] h2, [data-theme="mint"] h2, [data-theme="sky"] h2, [data-theme="daylight"] h3, [data-theme="paper"] h3, [data-theme="mint"] h3, [data-theme="sky"] h3 { font-weight: 800; } [data-theme="daylight"] body, [data-theme="paper"] body, [data-theme="mint"] body, [data-theme="sky"] body { font-weight: 500; } /* Cards and surfaces: replace transparent-white tints with a solid surface so the card actually appears against a light page background. */ [data-theme="daylight"] .card, [data-theme="paper"] .card, [data-theme="mint"] .card, [data-theme="sky"] .card, [data-theme="daylight"] .feature, [data-theme="paper"] .feature, [data-theme="mint"] .feature, [data-theme="sky"] .feature, [data-theme="daylight"] .itype, [data-theme="paper"] .itype, [data-theme="mint"] .itype, [data-theme="sky"] .itype, [data-theme="daylight"] .price-card, [data-theme="paper"] .price-card, [data-theme="mint"] .price-card, [data-theme="sky"] .price-card, [data-theme="daylight"] .stage-card, [data-theme="paper"] .stage-card, [data-theme="mint"] .stage-card, [data-theme="sky"] .stage-card, [data-theme="daylight"] .step, [data-theme="paper"] .step, [data-theme="mint"] .step, [data-theme="sky"] .step, [data-theme="daylight"] .idea-card, [data-theme="paper"] .idea-card, [data-theme="mint"] .idea-card, [data-theme="sky"] .idea-card, [data-theme="daylight"] .hv-card, [data-theme="paper"] .hv-card, [data-theme="mint"] .hv-card, [data-theme="sky"] .hv-card { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.08); } /* Footer + form fields */ [data-theme="daylight"] footer, [data-theme="paper"] footer, [data-theme="mint"] footer, [data-theme="sky"] footer { border-top-color: var(--border); } [data-theme="daylight"] input, [data-theme="paper"] input, [data-theme="mint"] input, [data-theme="sky"] input, [data-theme="daylight"] textarea, [data-theme="paper"] textarea, [data-theme="mint"] textarea, [data-theme="sky"] textarea { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="daylight"] .field input:focus, [data-theme="paper"] .field input:focus, [data-theme="mint"] .field input:focus, [data-theme="sky"] .field input:focus { background: rgba(var(--brand-rgb), .04) !important; } [data-theme="daylight"] .nav-links a, [data-theme="paper"] .nav-links a, [data-theme="mint"] .nav-links a, [data-theme="sky"] .nav-links a { color: var(--muted); } [data-theme="daylight"] .nav-links a:hover, [data-theme="paper"] .nav-links a:hover, [data-theme="mint"] .nav-links a:hover, [data-theme="sky"] .nav-links a:hover { color: var(--text); } [data-theme="daylight"] .btn-ghost, [data-theme="paper"] .btn-ghost, [data-theme="mint"] .btn-ghost, [data-theme="sky"] .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } /* ========================================================================== * 3. Light-theme readability pass * -------------------------------------------------------------------------- * Every place that used near-white tints over a dark background needs a * stronger ink colour on light backgrounds. This section is a long list * of element-level patches keyed off [data-theme="daylight"|"paper"| * "mint"|"sky"]. If you add a new light theme to section 2, add it to * each selector list below. * ========================================================================= */ /* (legacy comment retained for context): Most of the dark theme uses near-white text colours (#d6ccff, #b9a6ff, #c8bcff, #ffcce6 …) for muted accents — these vanish on pale backgrounds. Force them to the proper text/muted/brand tokens so every label, chip, and accent stays legible. The hero-title gradient is also forced to a dark stop so the headline shows as solid dark on light pages. */ [data-theme="daylight"], [data-theme="paper"], [data-theme="mint"], [data-theme="sky"] { /* tighten muted tone for higher contrast */ } [data-theme="daylight"] .hero-title .grad, [data-theme="paper"] .hero-title .grad, [data-theme="mint"] .hero-title .grad, [data-theme="sky"] .hero-title .grad { background: linear-gradient(120deg, var(--brand), var(--brand-2) 50%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Eyebrow chip — was light lavender */ [data-theme="daylight"] .eyebrow, [data-theme="paper"] .eyebrow, [data-theme="mint"] .eyebrow, [data-theme="sky"] .eyebrow { background: rgba(var(--brand-rgb), .1); border-color: rgba(var(--brand-rgb), .35); color: var(--brand); } [data-theme="daylight"] .eyebrow .dot, [data-theme="paper"] .eyebrow .dot, [data-theme="mint"] .eyebrow .dot, [data-theme="sky"] .eyebrow .dot { background: var(--brand); box-shadow: 0 0 8px rgba(var(--brand-rgb), .55); } /* Chips — coloured variants used near-white text. Push them to brand-coloured text on tinted backgrounds for high contrast on light pages. */ [data-theme="daylight"] .chip, [data-theme="paper"] .chip, [data-theme="mint"] .chip, [data-theme="sky"] .chip { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: var(--text); } [data-theme="daylight"] .chip.purple, [data-theme="paper"] .chip.purple, [data-theme="mint"] .chip.purple, [data-theme="sky"] .chip.purple { background: rgba(124,92,255,.12); border-color: rgba(124,92,255,.4); color: #5a3cf0; } [data-theme="daylight"] .chip.cyan, [data-theme="paper"] .chip.cyan, [data-theme="mint"] .chip.cyan, [data-theme="sky"] .chip.cyan { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.4); color: #0369a1; } [data-theme="daylight"] .chip.pink, [data-theme="paper"] .chip.pink, [data-theme="mint"] .chip.pink, [data-theme="sky"] .chip.pink { background: rgba(236,72,153,.1); border-color: rgba(236,72,153,.4); color: #be185d; } [data-theme="daylight"] .chip.green, [data-theme="paper"] .chip.green, [data-theme="mint"] .chip.green, [data-theme="sky"] .chip.green { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); color: #15803d; } [data-theme="daylight"] .chip.amber, [data-theme="paper"] .chip.amber, [data-theme="mint"] .chip.amber, [data-theme="sky"] .chip.amber { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #b45309; } /* Section eyebrow / lavender tag accents */ [data-theme="daylight"] .section-tag, [data-theme="paper"] .section-tag, [data-theme="mint"] .section-tag, [data-theme="sky"] .section-tag, [data-theme="daylight"] .step::before, [data-theme="paper"] .step::before, [data-theme="mint"] .step::before, [data-theme="sky"] .step::before, [data-theme="daylight"] .stage-card .label, [data-theme="paper"] .stage-card .label, [data-theme="mint"] .stage-card .label, [data-theme="sky"] .stage-card .label, [data-theme="daylight"] .price-card h3, [data-theme="paper"] .price-card h3, [data-theme="mint"] .price-card h3, [data-theme="sky"] .price-card h3 { color: var(--brand) !important; } /* Lavender heading tints inside cards */ [data-theme="daylight"] .price-card .price .px, [data-theme="paper"] .price-card .price .px, [data-theme="mint"] .price-card .price .px, [data-theme="sky"] .price-card .price .px { background: linear-gradient(180deg, var(--text), var(--brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Text on the auth-bullet / hero feature cards (the muted spans inside) */ [data-theme="daylight"] .signup-bullets li, [data-theme="paper"] .signup-bullets li, [data-theme="mint"] .signup-bullets li, [data-theme="sky"] .signup-bullets li, [data-theme="daylight"] .login-bullets li, [data-theme="paper"] .login-bullets li, [data-theme="mint"] .login-bullets li, [data-theme="sky"] .login-bullets li { background: var(--surface); border-color: var(--border); } /* Footer + footer-bottom border */ [data-theme="daylight"] footer, [data-theme="paper"] footer, [data-theme="mint"] footer, [data-theme="sky"] footer { color: var(--muted); } [data-theme="daylight"] .footer-col h5, [data-theme="paper"] .footer-col h5, [data-theme="mint"] .footer-col h5, [data-theme="sky"] .footer-col h5 { color: var(--text); } /* Sub-nav */ [data-theme="daylight"] .sub-nav-inner a, [data-theme="paper"] .sub-nav-inner a, [data-theme="mint"] .sub-nav-inner a, [data-theme="sky"] .sub-nav-inner a { color: var(--muted); } [data-theme="daylight"] .sub-nav-inner a:hover, [data-theme="paper"] .sub-nav-inner a:hover, [data-theme="mint"] .sub-nav-inner a:hover, [data-theme="sky"] .sub-nav-inner a:hover { color: var(--text); background: rgba(var(--brand-rgb), .08); border-color: rgba(var(--brand-rgb), .25); } /* hv-card meta line was using semi-transparent text */ [data-theme="daylight"] .hv-meta, [data-theme="paper"] .hv-meta, [data-theme="mint"] .hv-meta, [data-theme="sky"] .hv-meta, [data-theme="daylight"] .hv-card p, [data-theme="paper"] .hv-card p, [data-theme="mint"] .hv-card p, [data-theme="sky"] .hv-card p, [data-theme="daylight"] .feature p, [data-theme="paper"] .feature p, [data-theme="mint"] .feature p, [data-theme="sky"] .feature p, [data-theme="daylight"] .itype p, [data-theme="paper"] .itype p, [data-theme="mint"] .itype p, [data-theme="sky"] .itype p, [data-theme="daylight"] .step p, [data-theme="paper"] .step p, [data-theme="mint"] .step p, [data-theme="sky"] .step p, [data-theme="daylight"] .stage-card p, [data-theme="paper"] .stage-card p, [data-theme="mint"] .stage-card p, [data-theme="sky"] .stage-card p, [data-theme="daylight"] .section-head p, [data-theme="paper"] .section-head p, [data-theme="mint"] .section-head p, [data-theme="sky"] .section-head p, [data-theme="daylight"] .hero-sub, [data-theme="paper"] .hero-sub, [data-theme="mint"] .hero-sub, [data-theme="sky"] .hero-sub { color: var(--muted); } /* Stats strip — solid surface so the numbers pop */ [data-theme="daylight"] .stats, [data-theme="paper"] .stats, [data-theme="mint"] .stats, [data-theme="sky"] .stats { background: var(--surface); border-color: var(--border); } /* CTA banner needs a light counterpart so the text reads */ [data-theme="daylight"] .cta-banner, [data-theme="paper"] .cta-banner, [data-theme="mint"] .cta-banner, [data-theme="sky"] .cta-banner { background: radial-gradient(600px 300px at 20% 20%, rgba(var(--brand-rgb), .15), transparent), radial-gradient(500px 240px at 90% 80%, rgba(var(--brand-2-rgb), .12), transparent), var(--surface); border-color: var(--border); color: var(--text); } [data-theme="daylight"] .cta-banner h2, [data-theme="paper"] .cta-banner h2, [data-theme="mint"] .cta-banner h2, [data-theme="sky"] .cta-banner h2 { color: var(--text); } [data-theme="daylight"] .cta-banner p, [data-theme="paper"] .cta-banner p, [data-theme="mint"] .cta-banner p, [data-theme="sky"] .cta-banner p { color: var(--muted); } /* Logos bar on light pages */ [data-theme="daylight"] .logo-item, [data-theme="paper"] .logo-item, [data-theme="mint"] .logo-item, [data-theme="sky"] .logo-item { color: var(--muted); } [data-theme="daylight"] .logo-item b, [data-theme="paper"] .logo-item b, [data-theme="mint"] .logo-item b, [data-theme="sky"] .logo-item b { color: var(--text); } /* Trust strip, hint text */ [data-theme="daylight"] .trust, [data-theme="paper"] .trust, [data-theme="mint"] .trust, [data-theme="sky"] .trust, [data-theme="daylight"] .field .hint, [data-theme="paper"] .field .hint, [data-theme="mint"] .field .hint, [data-theme="sky"] .field .hint { color: var(--muted); } /* Discover-page filter card */ [data-theme="daylight"] .filter-card, [data-theme="paper"] .filter-card, [data-theme="mint"] .filter-card, [data-theme="sky"] .filter-card { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="daylight"] .filter-card h5, [data-theme="paper"] .filter-card h5, [data-theme="mint"] .filter-card h5, [data-theme="sky"] .filter-card h5 { color: var(--muted); } /* Search input on discover */ [data-theme="daylight"] .search, [data-theme="paper"] .search, [data-theme="mint"] .search, [data-theme="sky"] .search { background: var(--surface); border-color: var(--border); } [data-theme="daylight"] .search input, [data-theme="paper"] .search input, [data-theme="mint"] .search input, [data-theme="sky"] .search input { color: var(--text) !important; background: transparent !important; } /* Idea-card meta line + ask */ [data-theme="daylight"] .idea-card .blurb, [data-theme="paper"] .idea-card .blurb, [data-theme="mint"] .idea-card .blurb, [data-theme="sky"] .idea-card .blurb, [data-theme="daylight"] .idea-meta, [data-theme="paper"] .idea-meta, [data-theme="mint"] .idea-meta, [data-theme="sky"] .idea-meta { color: var(--muted); } [data-theme="daylight"] .idea-meta .ask, [data-theme="paper"] .idea-meta .ask, [data-theme="mint"] .idea-meta .ask, [data-theme="sky"] .idea-meta .ask { color: var(--text); } /* Login/signup quote-card */ [data-theme="daylight"] .quote-card, [data-theme="paper"] .quote-card, [data-theme="mint"] .quote-card, [data-theme="sky"] .quote-card { background: var(--surface); border-color: var(--border); } [data-theme="daylight"] .quote-card .who span, [data-theme="paper"] .quote-card .who span, [data-theme="mint"] .quote-card .who span, [data-theme="sky"] .quote-card .who span { color: var(--muted); } /* Lavender link defaults inside light theme should map to brand */ [data-theme="daylight"] a[style*="#b9a6ff"], [data-theme="paper"] a[style*="#b9a6ff"], [data-theme="mint"] a[style*="#b9a6ff"], [data-theme="sky"] a[style*="#b9a6ff"] { color: var(--brand) !important; } [data-theme="daylight"] .signup-card .muted, [data-theme="paper"] .signup-card .muted, [data-theme="mint"] .signup-card .muted, [data-theme="sky"] .signup-card .muted, [data-theme="daylight"] .login-card .muted, [data-theme="paper"] .login-card .muted, [data-theme="mint"] .login-card .muted, [data-theme="sky"] .login-card .muted { color: var(--muted); } /* Strong default body weight for crispness */ [data-theme="daylight"], [data-theme="paper"], [data-theme="mint"], [data-theme="sky"] { font-weight: 500; } /* ========================================================================== * 4. Atoms — fit-mini (red→green match-% card), brand-logo lock, body bg * ========================================================================== * * --- Compact match % card with red→green tracker. Lives on marketing-page idea cards as well as the portal. --- */ .fit-mini { display: inline-flex; flex-direction: column; gap: 3px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); min-width: 64px; vertical-align: middle; } .fit-mini .pct { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--fit-color, var(--brand)); } .fit-mini .pct b { font-weight: 900; } .fit-mini .pct span { font-size: 9.5px; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; margin-left: auto; font-weight: 600; } .fit-mini .track { width: 100%; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #22c55e); position: relative; overflow: hidden; } .fit-mini .track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--fit-pct, 0%); right: 0; background: rgba(11,13,23,.78); } [data-theme="daylight"] .fit-mini, [data-theme="paper"] .fit-mini, [data-theme="mint"] .fit-mini, [data-theme="sky"] .fit-mini { background: rgba(0,0,0,.04); border-color: var(--border); } [data-theme="daylight"] .fit-mini .track::after, [data-theme="paper"] .fit-mini .track::after, [data-theme="mint"] .fit-mini .track::after, [data-theme="sky"] .fit-mini .track::after { background: rgba(255,255,255,.85); } /* --- Logo lock — the brand mark always uses the canonical PocketFund gradient so the identity stays consistent across every theme. --- */ .brand-logo { background: conic-gradient(from 220deg, #7c5cff, #4ad3ff, #ff7ac6, #7c5cff) !important; box-shadow: 0 6px 18px rgba(124,92,255,.45) !important; } .brand-logo::before { background: linear-gradient(135deg, #7c5cff, #4ad3ff) !important; } /* Body background follows the theme tokens — radial brand+brand-2 tints. */ body { background: radial-gradient(1200px 700px at 85% -10%, rgba(var(--brand-rgb), .25), transparent 60%), radial-gradient(900px 600px at -10% 10%, rgba(var(--brand-2-rgb), .18), transparent 60%), var(--bg) !important; } /* ========================================================================== * 5. Theme picker (palette button + popover) * -------------------------------------------------------------------------- * Markup is built in theme.js. Mounted into either .nav-cta (marketing * pages) or .portal-user (portal pages). Two-tab popover (Dark / Light) * with a swatch grid. * ========================================================================= */ .theme-toggle { position: relative; display: inline-flex; align-items: center; } .nav-cta .theme-toggle { margin-right: 4px; } .theme-toggle .theme-btn { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; } .theme-toggle .theme-btn:hover { background: rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .4); color: var(--text); } .theme-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 280px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); display: none; z-index: 100; color: var(--text); } .theme-popover.open { display: block; } .theme-popover-head { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } /* Mode tabs (Dark / Light) */ .theme-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: rgba(var(--brand-rgb), .06); border: 1px solid var(--border); } .theme-mode { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: transparent; border: 0; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; } .theme-mode:hover { color: var(--text); } .theme-mode.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .theme-mode .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(var(--brand-rgb), .3); } .theme-mode .dot.dark { background: #0b0d17; } .theme-mode .dot.light { background: #ffffff; } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .theme-swatch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: inherit; font-size: 13px; transition: border-color .15s, background .15s; } .theme-swatch:hover { border-color: rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .06); } .theme-swatch.on { border-color: rgba(var(--brand-rgb), .7); background: rgba(var(--brand-rgb), .12); } .theme-swatch-bg { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; } .theme-swatch-tile { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); } .theme-swatch-label { font-weight: 600; } * { box-sizing: border-box; } :root { color-scheme: dark; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } select, option { background-color: #141833; color: #eef0fb; } option:checked, option:hover { background-color: #1c2139; color: #fff; } body { color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ========================================================================== * 6. Layout primitives + 7. Navigation * -------------------------------------------------------------------------- * .container caps the readable width. .nav is the top bar shared by every * marketing page. Mobile breakpoint collapses .nav-links into a hamburger * menu (toggled by main.js). * ========================================================================= */ /* ---- Navigation ---- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(11,13,23,.72); border-bottom: 1px solid rgba(255,255,255,.05); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.2px; } .brand-logo { width: 30px; height: 30px; border-radius: 9px; background: conic-gradient(from 220deg, var(--brand), var(--brand-2), var(--accent), var(--brand)); position: relative; box-shadow: 0 6px 18px rgba(var(--brand-rgb),.45); } .brand-logo::after { content: ""; position: absolute; inset: 6px; background: var(--bg); border-radius: 5px; } .brand-logo::before { content: ""; position: absolute; inset: 10px; z-index: 2; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-radius: 3px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 14.5px; color: var(--muted); font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-toggle { display: none; background: none; border: 0; color: var(--text); } /* Top-nav dropdown styles removed — the For founders / For investors submenus are no longer attached. */ /* Sub-nav strip — hidden by default; revealed on logged-in marketing pages so the founder/investor portal tabs (Projects · Discussions · Matches · …) are reachable from every marketing / resources / company / legal page. main.js (applyPortalSubNav) re-populates the inner with role-aware tabs; the CSS just toggles visibility. The HTML markup is left in place because removing it would touch ~50 page templates. */ .sub-nav { display: none; } /* Replicates the "stacked" portal-bar that portal.js builds via rebuildPortalNav() — marketing nav becomes the analog of .portal-top-row, .sub-nav becomes the analog of .portal-subnav-row. CSS rules below mirror .portal-subnav-row + .portal-subnav-links from portal.css 1:1, so the visual treatment is identical to the founder/investor portal-bar. main.js computes the sub-row's first-tab margin-left so it aligns under the matching "For founders" / "For investors" link in the nav above. */ body.is-logged-in .nav { border-bottom: 0; } body.is-logged-in .sub-nav { display: block; position: sticky; top: 68px; z-index: 49; backdrop-filter: blur(14px); background: rgba(11,13,23,.85); border-bottom: 1px solid rgba(255,255,255,.05); } [data-theme="daylight"] body.is-logged-in .sub-nav, [data-theme="paper"] body.is-logged-in .sub-nav, [data-theme="mint"] body.is-logged-in .sub-nav, [data-theme="sky"] body.is-logged-in .sub-nav { background: rgba(255,255,255,.78); border-bottom: 1px solid var(--border); } /* Mirror of .portal-subnav-row (portal.css) — height 50px, top border, same container metrics as .container so the strip lines up with the marketing nav above. */ body.is-logged-in .sub-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; height: 50px; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.05); } [data-theme="daylight"] body.is-logged-in .sub-nav-inner, [data-theme="paper"] body.is-logged-in .sub-nav-inner, [data-theme="mint"] body.is-logged-in .sub-nav-inner, [data-theme="sky"] body.is-logged-in .sub-nav-inner { border-top-color: var(--border); } /* Mirror of .portal-subnav-links + .portal-subnav-links a (portal.css). */ body.is-logged-in .sub-nav-inner .portal-subnav-links { display: flex; gap: 4px; flex-wrap: wrap; /* margin-left is set by main.js applyPortalSubNav() so the first tab sits under the matching "For founders" / "For investors" link. */ } body.is-logged-in .sub-nav-inner .portal-subnav-links a { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--muted); border: 1px solid transparent; white-space: nowrap; transition: all .15s; } body.is-logged-in .sub-nav-inner .portal-subnav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); } body.is-logged-in .sub-nav-inner .portal-subnav-links a.active { color: var(--text); background: rgba(var(--brand-rgb),.14); border-color: rgba(var(--brand-rgb),.35); } [data-theme="daylight"] body.is-logged-in .sub-nav-inner .portal-subnav-links a:hover, [data-theme="paper"] body.is-logged-in .sub-nav-inner .portal-subnav-links a:hover, [data-theme="mint"] body.is-logged-in .sub-nav-inner .portal-subnav-links a:hover, [data-theme="sky"] body.is-logged-in .sub-nav-inner .portal-subnav-links a:hover { background: rgba(var(--brand-rgb),.08); } /* Marketing top-link gets a gradient underline when its sub-row is the active context — identical to .portal-bar-stacked .portal-anchor::after. */ body.is-logged-in .nav-links a.portal-anchor { color: var(--text); } body.is-logged-in .nav-links a.portal-anchor::after { content: ""; display: block; height: 2px; margin-top: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 2px; } /* "Upgrade" link — injected by main.js (marketing pages) and by portal.js's rebuildPortalNav() (portal pages). Brand-coloured tint so it reads as a soft CTA without breaking the link-cluster cadence. The second selector pumps specificity above .portal-bar-stacked .portal-top-row .nav-links a in portal.css — without it portal pages would render the link in the default muted colour. */ .nav-links a.nav-upgrade, .portal-bar-stacked .portal-top-row .nav-links a.nav-upgrade { color: var(--brand-2); font-weight: 600; } .nav-links a.nav-upgrade:hover, .portal-bar-stacked .portal-top-row .nav-links a.nav-upgrade:hover { color: var(--text); } /* ========================================================================== * Marketing nav — logged-in user pill + popup * -------------------------------------------------------------------------- * main.js swaps the .nav-cta block for a .portal-user element when * pf.logged_in === "1". These rules duplicate the portal.css styling so * the avatar + name + popover render correctly on first paint, without * waiting for portal.css to lazy-load. Selectors mirror portal.css so the * two stylesheets stay in sync — when one changes, change the other too. * ========================================================================= */ .nav-cta.is-portal-user { gap: 0; } .nav-cta .portal-user { position: relative; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); } .nav-cta .portal-user .theme-toggle { margin-right: 4px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.08); } .nav-cta .portal-user .theme-toggle .theme-btn { width: 36px; height: 36px; } .nav-cta .portal-user .who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .nav-cta .portal-user .who b { color: var(--text); font-size: 13.5px; } .nav-cta .portal-user .who span { font-size: 11.5px; } .nav-cta .portal-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ffb057, var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; line-height: 0; border: 1px solid rgba(255,255,255,.08); cursor: pointer; } .nav-cta .portal-avatar.b { background: linear-gradient(135deg, var(--brand-2), var(--brand)); } .nav-cta .portal-avatar svg, .nav-cta .portal-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .nav-cta .user-popover { position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); display: none; z-index: 100; text-align: left; } .nav-cta .user-popover.open { display: block; } .nav-cta .user-popover-head { padding: 8px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; line-height: 1.3; } .nav-cta .user-popover-head b { display: block; font-size: 14px; color: var(--text); } .nav-cta .user-popover-head small { color: var(--muted); font-weight: 500; font-size: 11.5px; } .nav-cta .user-popover a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; } .nav-cta .user-popover a:hover { background: rgba(var(--brand-rgb), .1); } .nav-cta .user-popover a svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); } .nav-cta .user-popover a.logout { color: #ff8b8b; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; } .nav-cta .user-popover a.logout svg { color: #ff8b8b; } /* Hide the standalone Log in / Get started buttons that .nav-cta might still contain in mobile-menu mode below 960px when we've already replaced its content with .portal-user. Defensive — innerHTML swap already removes them, but this protects against any race where .is-portal-user is set without the swap having completed. */ .nav-cta.is-portal-user > .btn { display: none; } .sub-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .sub-nav-inner .label { color: var(--muted); letter-spacing: .5px; text-transform: uppercase; font-size: 11px; font-weight: 600; margin-right: 8px; } .sub-nav-inner a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; border: 1px solid transparent; transition: all .15s; } .sub-nav-inner a:hover { color: var(--text); background: rgba(var(--brand-rgb), .1); border-color: rgba(var(--brand-rgb), .25); } .sub-nav-inner .logout { margin-left: auto; color: var(--muted); font-size: 12px; cursor: pointer; } .sub-nav-inner .logout:hover { color: var(--text); } /* ========================================================================== * 8. Buttons * -------------------------------------------------------------------------- * Variants: .btn-primary (filled gradient), .btn-ghost (subtle bg), * .btn-outline (border only). Sizes: default, .btn-lg. * ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s, background .2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand)); color: white; box-shadow: 0 10px 24px -8px rgba(var(--brand-rgb),.6); } .btn-primary:hover { box-shadow: 0 14px 32px -8px rgba(var(--brand-rgb),.8); } .btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--text); } .btn-ghost:hover { background: rgba(255,255,255,.08); } .btn-outline { border-color: rgba(255,255,255,.14); color: var(--text); background: transparent; } .btn-lg { padding: 14px 22px; font-size: 15px; } /* ========================================================================== * 9. Hero sections (marketing landing-style headers) * -------------------------------------------------------------------------- * Used by index.html / for-founders.html / for-investors.html / pricing.html * / how-it-works.html / about.html / contact.html and most resource hubs. * Two-column on desktop (copy + visual), stacked on mobile. * ========================================================================= */ .hero { padding: 88px 0 60px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(var(--brand-rgb),.12); border: 1px solid rgba(var(--brand-rgb),.35); color: #d6ccff; font-size: 13px; font-weight: 500; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #b9a6ff; box-shadow: 0 0 10px #b9a6ff; } h1.hero-title { font-size: clamp(36px, 5vw, 62px); line-height: 1.05; letter-spacing: -1.5px; margin: 18px 0 18px; font-weight: 700; } .hero-title .grad { background: linear-gradient(120deg, #fff, #c8b9ff 40%, #89d7ff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--muted); font-size: 18px; max-width: 520px; } .hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; } .trust { margin-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .trust b { color: var(--text); font-weight: 700; } /* Hero cards — three idea cards laid out as a single horizontal row. On the hero, the row spans both columns; on narrow screens it wraps. */ .hero-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .hv-card { border-radius: 18px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); transition: transform .25s ease, border-color .2s; display: flex; flex-direction: column; } .hv-card:hover { transform: translateY(-3px); border-color: rgba(var(--brand-rgb),.35); } /* Reset the old absolute-positioning overrides */ .hv-1, .hv-2, .hv-3 { margin: 0; } @media (max-width: 720px) { .hero-visual { grid-template-columns: 1fr; } } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid rgba(255,255,255,.12); color: var(--text); background: rgba(255,255,255,.04); } .chip.purple { background: rgba(var(--brand-rgb),.18); border-color: rgba(var(--brand-rgb),.45); color: #d6ccff; } .chip.cyan { background: rgba(var(--brand-2-rgb),.14); border-color: rgba(var(--brand-2-rgb),.45); color: #bdebff; } .chip.pink { background: rgba(var(--accent-rgb),.14); border-color: rgba(var(--accent-rgb),.4); color: #ffcce6; } .chip.green { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); color: #bdf3cf; } .chip.amber { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #ffe1a8; } .hv-card h4 { margin: 8px 0 6px; font-size: 15px; } .hv-card p { margin: 0; color: var(--muted); font-size: 12.5px; } .hv-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: var(--muted); } .founder-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ffb057, var(--accent)); } /* ========================================================================== * 10. Marketing content sections * -------------------------------------------------------------------------- * The big mid-page blocks: section-head, features grid, stats strip, * stages, investor-types, steps, cta-banner, logos, plus the auth shell * (login/signup), discover (filters + idea cards), about (team/values), * pricing (price-cards), and footer. * * This is the longest section by far (>500 lines). Sub-headings inside * mark logical components. If you're hunting for a class, use editor * search — most class names are short and unique. * ========================================================================= */ section { padding: 96px 0; } .section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.8px; line-height: 1.15; margin: 14px 0 12px; } .section-head p { color: var(--muted); font-size: 17px; } .section-tag { display: inline-block; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #b9a6ff; font-weight: 600; } /* Stat strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 30px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); } .stat b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.5px; } .stat span { color: var(--muted); font-size: 13.5px; } /* Feature grid */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { padding: 26px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.07); transition: transform .2s, border-color .2s; } .feature:hover { transform: translateY(-3px); border-color: rgba(var(--brand-rgb),.35); } .feature .icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--brand-rgb),.25), rgba(var(--brand-2-rgb),.15)); border: 1px solid rgba(var(--brand-rgb),.35); display: grid; place-items: center; margin-bottom: 16px; color: #c8bcff; } .feature h3 { margin: 0 0 8px; font-size: 18px; } .feature p { margin: 0; color: var(--muted); font-size: 14.5px; } /* How it works */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; } .step { padding: 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); position: relative; } .step::before { counter-increment: step; content: "0" counter(step); font-size: 13px; font-weight: 700; color: #b9a6ff; letter-spacing: 1.5px; } .step h4 { margin: 10px 0 6px; font-size: 16.5px; } .step p { margin: 0; color: var(--muted); font-size: 14px; } /* Investor types */ .investor-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .itype { padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.07); } .itype h4 { margin: 4px 0 6px; font-size: 16px; display: flex; gap: 8px; align-items: center; } .itype h4 .chip { font-size: 10.5px; padding: 2px 8px; } .itype p { color: var(--muted); margin: 0 0 12px; font-size: 13.5px; } .itype .range { color: var(--text); font-weight: 600; font-size: 13.5px; } .itype .range span { color: var(--muted); font-weight: 500; } /* Stages */ .stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stage-card { padding: 20px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); } .stage-card .label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #b9a6ff; } .stage-card h4 { font-size: 16.5px; margin: 8px 0 6px; } .stage-card p { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; } .stage-card .progress { height: 4px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; } .stage-card .progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } /* CTA banner */ .cta-banner { margin: 80px 0; background: radial-gradient(600px 300px at 20% 20%, rgba(var(--brand-rgb),.35), transparent), radial-gradient(500px 240px at 90% 80%, rgba(var(--brand-2-rgb),.25), transparent), #141833; border: 1px solid rgba(255,255,255,.08); padding: 56px 44px; border-radius: var(--radius-lg); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } .cta-banner h2 { font-size: 32px; letter-spacing: -.6px; margin: 0 0 10px; } .cta-banner p { color: var(--muted); margin: 0 0 24px; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Logos */ .logos { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; opacity: .85; } .logo-item { color: var(--muted); font-weight: 600; font-size: 15px; letter-spacing: .5px; } .logo-item b { color: var(--text); } /* Footer */ footer { border-top: 1px solid rgba(255,255,255,.06); padding: 64px 0 40px; color: var(--muted); font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; } .footer-col h5 { color: var(--text); font-size: 13.5px; margin: 0 0 12px; letter-spacing: .5px; } .footer-col a { display: block; padding: 4px 0; color: var(--muted); transition: color .15s; } .footer-col a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; flex-wrap: wrap; gap: 16px; } /* Auth */ .auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px); } .auth-left { background: radial-gradient(500px 380px at 30% 30%, rgba(var(--brand-rgb),.3), transparent), radial-gradient(600px 380px at 80% 80%, rgba(var(--brand-2-rgb),.2), transparent), #111427; border-right: 1px solid rgba(255,255,255,.05); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } .auth-left h2 { font-size: 30px; letter-spacing: -.5px; margin: 12px 0; } .auth-left ul { list-style: none; padding: 0; color: var(--muted); } .auth-left li { padding: 8px 0; display: flex; gap: 10px; align-items: center; } .auth-left li::before { content: "✓"; color: #b9a6ff; font-weight: 700; } .auth-right { padding: 72px 56px; display: flex; align-items: center; justify-content: center; } .auth-card { width: 100%; max-width: 420px; } .auth-card h3 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.3px; } .auth-card .muted { color: var(--muted); margin-bottom: 28px; } .role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; } .role-switch .role { padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); cursor: pointer; transition: all .2s; display: flex; gap: 12px; align-items: center; } .role-switch .role b { font-size: 14.5px; display: block; } .role-switch .role span { color: var(--muted); font-size: 12.5px; } .role-switch .role.active { border-color: rgba(var(--brand-rgb),.7); background: rgba(var(--brand-rgb),.1); } .role .ico { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(var(--brand-rgb),.3), rgba(var(--brand-2-rgb),.15)); display: grid; place-items: center; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--text); font-size: 14.5px; font-family: inherit; transition: border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(var(--brand-rgb),.6); background: rgba(var(--brand-rgb),.05); } .field .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .divider { text-align: center; margin: 20px 0; color: var(--muted); font-size: 12.5px; position: relative; } .divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: rgba(255,255,255,.08); } .divider::before { left: 0; } .divider::after { right: 0; } .oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .btn-oauth { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--text); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-oauth:hover { background: rgba(255,255,255,.08); } /* Discover page */ .discover-top { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding-top: 40px; } .filter-card { padding: 20px; border-radius: var(--radius-lg); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); position: sticky; top: 90px; } .filter-card h5 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 16px 0 10px; } .filter-card h5:first-child { margin-top: 0; } .checks label { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); padding: 5px 0; cursor: pointer; } .checks input { accent-color: var(--brand); } .search { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 20px; } .search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-size: 14.5px; font-family: inherit; } .idea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .idea-card { padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.07); transition: transform .2s, border-color .2s; } .idea-card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.4); } .idea-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .idea-card h3 { margin: 0 0 6px; font-size: 18px; } .idea-card .blurb { color: var(--muted); font-size: 14px; margin: 0 0 16px; } .idea-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: var(--muted); } .idea-meta .ask { color: var(--text); font-weight: 600; } .icon-btn { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: var(--text); cursor: pointer; transition: all .15s; } .icon-btn:hover { background: rgba(var(--brand-rgb),.15); border-color: rgba(var(--brand-rgb),.4); } .icon-btn.pocketed { background: rgba(var(--brand-rgb),.3); border-color: rgba(var(--brand-rgb),.7); color: white; } /* Pricing */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .price-card { padding: 30px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); } .price-card.highlight { background: linear-gradient(180deg, rgba(var(--brand-rgb),.18), rgba(var(--brand-rgb),.04)); border-color: rgba(var(--brand-rgb),.5); position: relative; } .price-card.highlight::before { content: "Most popular"; position: absolute; top: -12px; left: 30px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: white; } .price-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #b9a6ff; letter-spacing: 1.5px; text-transform: uppercase; } .price-card .price { margin: 18px 0 14px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--brand-rgb),.18), rgba(var(--brand-rgb),.04)); border: 1px solid rgba(var(--brand-rgb),.35); display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .price-card .price .px { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--text); background: linear-gradient(180deg, #ffffff, #c8b9ff 70%, #89d7ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.04); } .price-card .price > span { font-size: 14px; color: var(--muted); font-weight: 500; } .price-card.highlight .price { background: linear-gradient(180deg, rgba(var(--brand-rgb),.28), rgba(var(--brand-2-rgb),.08)); border-color: rgba(var(--brand-rgb),.55); box-shadow: 0 12px 30px -12px rgba(var(--brand-rgb),.5); } .price-card ul { list-style: none; padding: 0; margin: 20px 0; } .price-card li { padding: 7px 0; font-size: 14px; color: var(--muted); display: flex; gap: 8px; } .price-card li::before { content: "✓"; color: var(--brand); font-weight: 700; } /* About */ .about-hero { padding: 80px 0 40px; } .about-hero h1 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -1.2px; line-height: 1.1; margin: 14px 0 18px; max-width: 780px; } .about-hero p { color: var(--muted); font-size: 18px; max-width: 640px; } .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .value-card { padding: 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); } .value-card h4 { margin: 0 0 6px; font-size: 17px; } .value-card p { color: var(--muted); margin: 0; font-size: 14px; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .member { padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); text-align: center; } .member .avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .member b { display: block; font-size: 15px; } .member span { color: var(--muted); font-size: 13px; } /* Mobile prototype grid */ .phone-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; padding: 20px 0 60px; } .phone-label { color: #b9a6ff; font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; display: block; } .phone-sublabel { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 16px; } .phone-wrap { aspect-ratio: 9/19; background: #0b0d17; border-radius: 40px; border: 10px solid #0b0d17; box-shadow: 0 0 0 2px #222846, 0 40px 80px -20px rgba(0,0,0,.7); overflow: hidden; position: relative; } .phone-wrap iframe { width: 100%; height: 100%; border: 0; background: #0b0d17; } .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 20px; background: #0b0d17; border-radius: 0 0 14px 14px; z-index: 5; } /* Utility */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } /* ========================================================================== * 19. Responsive @media rules * -------------------------------------------------------------------------- * Two breakpoints: * - 960px → tablet/mobile transition (grid 2-col → 1-col, hamburger nav) * - 560px → small mobile tightening (single-col everything) * Plus a print stylesheet at the bottom for workbook printouts. * ========================================================================= */ @media (max-width: 960px) { .nav-links { display: none; } .nav-toggle { display: block; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-visual { max-width: 360px; margin: 0 auto; } .stats { grid-template-columns: 1fr 1fr; } .features, .steps, .investor-types, .stages, .pricing, .values, .team-grid { grid-template-columns: 1fr 1fr; } .cta-banner { grid-template-columns: 1fr; padding: 40px 28px; } .footer-grid { grid-template-columns: 1fr 1fr; } .auth-wrap { grid-template-columns: 1fr; } .auth-left { padding: 44px 28px; } .auth-right { padding: 44px 28px; } .discover-top { grid-template-columns: 1fr; } .filter-card { position: static; } .idea-grid { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { section { padding: 64px 0; } .hero { padding: 56px 0 40px; } .features, .steps, .investor-types, .stages, .pricing, .values, .team-grid, .footer-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; padding: 20px; } .stat b { font-size: 22px; } .row2 { grid-template-columns: 1fr; } } /* ========================================================================== * 16. Long-form article (guide / playbook internal pages) * -------------------------------------------------------------------------- * Used by /resources/guides/* and /resources/playbooks/*. .article wraps * the body with a max-width; .ex-template formats inline code-block-style * boilerplate; .related-grid renders the sibling-link cards at the bottom * of every guide/playbook. * ========================================================================= */ .article { max-width: 760px; margin: 0 auto; } .article h2 { font-size: 22px; margin: 32px 0 10px; letter-spacing: -.2px; } .article h3 { font-size: 17px; margin: 22px 0 8px; } .article p, .article li { color: var(--muted); font-size: 14.5px; line-height: 1.75; } .article strong { color: var(--text); } .article .meta-row { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin: 6px 0 24px; } .article .callout { background: rgba(var(--brand-rgb), .08); border-left: 3px solid var(--brand); padding: 12px 16px; margin: 18px 0; border-radius: 0 8px 8px 0; color: var(--text); font-size: 14px; line-height: 1.65; } .article .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; } .article .related-grid a { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color .12s; } .article .related-grid a:hover { border-color: rgba(var(--brand-rgb), .35); } .article .related-grid a b { display: block; font-size: 14px; } .article .related-grid a span { color: var(--muted); font-size: 12.5px; } .article .ex-template { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin: 14px 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; } .article .slide-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin: 12px 0; } .article .slide-card .num { display: inline-block; background: var(--brand); color: #fff; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; margin-right: 10px; vertical-align: middle; } .article .slide-card h3 { display: inline; margin: 0; font-size: 16.5px; } .article .slide-card p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; } .article .slide-card .killers { margin-top: 8px; color: #fecaca; font-size: 12.5px; } /* ========================================================================== * 17. Workbook component * -------------------------------------------------------------------------- * Fillable interactive workbooks under /resources/workbooks/*. Inputs * auto-save to localStorage via assets/js/workbook.js. .wb-progress shows * the percentage; .wb-chapter wraps each chapter; .wb-exercise wraps each * fillable prompt + textarea. * ========================================================================= */ /* (legacy comment retained): Fillable interactive workbooks. Inputs auto-save to localStorage. Used by workbook-coffee-fundraising.html and workbook-zero-to-one.html. */ .wb-shell { max-width: 820px; margin: 0 auto; } .wb-header { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; } .wb-header h2 { margin: 0 0 6px; font-size: 18px; } .wb-header .wb-meta { color: var(--muted); font-size: 13px; } .wb-progress { text-align: right; min-width: 200px; } .wb-progress .wb-pct { font-size: 26px; font-weight: 700; color: var(--brand); display: block; } .wb-progress .wb-bar { height: 6px; border-radius: 99px; background: rgba(var(--brand-rgb), .12); margin-top: 8px; overflow: hidden; } .wb-progress .wb-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; width: 0%; transition: width .3s; } .wb-progress .wb-done { color: var(--muted); font-size: 12px; margin-top: 4px; } .wb-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .wb-toolbar .btn { padding: 7px 14px; font-size: 12.5px; width: auto; } .wb-chapter { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px; margin-bottom: 18px; } .wb-chapter > h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.2px; } .wb-chapter > h3 .ch-num { display: inline-block; background: var(--brand); color: #fff; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700; vertical-align: middle; margin-right: 10px; letter-spacing: .5px; } .wb-chapter > .ch-summary { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 6px 0 18px; } .wb-key-takeaway { background: rgba(var(--brand-rgb), .07); border-left: 3px solid var(--brand); padding: 10px 14px; margin: 14px 0; border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--text); line-height: 1.6; } .wb-key-takeaway b { color: var(--brand); } .wb-exercise { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 14px; } .wb-exercise > .ex-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; } .wb-exercise > .ex-prompt { font-size: 14.5px; color: var(--text); margin: 0 0 10px; line-height: 1.55; font-weight: 500; } .wb-exercise > .ex-hint { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; } .wb-exercise textarea, .wb-exercise input[type="text"] { width: 100%; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 60px; } .wb-exercise textarea:focus, .wb-exercise input[type="text"]:focus { outline: none; border-color: var(--brand); background: rgba(var(--brand-rgb), .04); } .wb-checkbox { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; font-size: 13.5px; line-height: 1.5; } .wb-checkbox input { margin-top: 3px; flex-shrink: 0; } [data-theme="daylight"] .wb-exercise, [data-theme="paper"] .wb-exercise, [data-theme="mint"] .wb-exercise, [data-theme="sky"] .wb-exercise { background: rgba(0,0,0,.02); } @media print { .nav, .sub-nav, .breadcrumb, footer, .wb-toolbar { display: none !important; } .wb-chapter, .wb-header, .wb-exercise { break-inside: avoid; } body { background: #fff; color: #000; } } /* ========================================================================== * 18. Breadcrumbs (marketing pages) * -------------------------------------------------------------------------- * Sits between the top nav and the hero on every marketing page. Mirrors * the .page-head .crumb look used by portal pages so the trail feels * consistent everywhere. * ========================================================================= */ /* (legacy comment retained): Sits between the top nav and the hero. Mirrors the .page-head .crumb look used by portal pages so the trail feels consistent everywhere. */ .breadcrumb { border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .015); } .breadcrumb-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; } .breadcrumb-inner a { color: var(--muted); text-decoration: none; transition: color .12s; } .breadcrumb-inner a:hover { color: var(--text); } .breadcrumb-inner .sep { color: rgba(255,255,255,.18); user-select: none; } .breadcrumb-inner [aria-current="page"] { color: var(--text); font-weight: 500; } /* Light themes need the divider darker to stay readable. */ [data-theme="daylight"] .breadcrumb, [data-theme="paper"] .breadcrumb, [data-theme="mint"] .breadcrumb, [data-theme="sky"] .breadcrumb { border-bottom-color: rgba(0, 0, 0, .08); background: rgba(0, 0, 0, .015); } [data-theme="daylight"] .breadcrumb-inner .sep, [data-theme="paper"] .breadcrumb-inner .sep, [data-theme="mint"] .breadcrumb-inner .sep, [data-theme="sky"] .breadcrumb-inner .sep { color: rgba(0,0,0,.22); } /* ========================================================================== * 20. Mobile-first refinements + Capacitor / PWA support * -------------------------------------------------------------------------- * Added 2026-05-07 alongside the PWA manifest and Capacitor app wrap. This * section is intentionally appended at the end of the file (rather than * mixed in throughout) so the existing desktop-first layout above keeps * working unchanged on desktop, and these rules act as targeted overrides * on phones/tablets and inside the Capacitor WebView. * * Why these specific patches * -------------------------- * - iOS auto-zooms text inputs whose font-size < 16px. The marketing form * fields were 14.5px, so a tap zoomed the page on every login attempt. * - Notched iPhones / Android edge-to-edge devices need * `env(safe-area-inset-*)` padding when display: standalone (PWA / Capacitor * wrap), otherwise the nav and footer slide under the system UI. * - Existing breakpoints kicked in at 560 / 720 / 960 px which is too late — * phones in the 360-414 px range had cramped grids before reflow. * - iOS Safari highlights every tap with a translucent black flash; we * replace it with a brand-tinted highlight or remove it for buttons. * - Capacitor adds so we can target * in-app rules without affecting the public website. * * Breakpoints used here * --------------------- * ≤ 600px → phones (single column everywhere, tighter padding) * ≤ 380px → tiny phones (iPhone SE 1st gen / older Androids) * ========================================================================= */ /* ============================================================ * 20a. Capacitor / PWA viewport + safe-area plumbing * ============================================================ */ /* Prevent the whole document from scrolling sideways on phones — one stray wide element used to push the body off-screen. */ html, body { overflow-x: hidden; } /* Reset iOS Safari's translucent black tap-highlight everywhere; we provide our own :active states on .btn and links that need feedback. */ * { -webkit-tap-highlight-color: transparent; } /* Honour the device safe area when running as an installed PWA or inside the Capacitor wrap (display-mode: standalone). The marketing site in a normal browser tab keeps its current padding because browsers ignore env() insets when there's no overlay UI. */ @media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .nav-inner { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); } } /* Capacitor sets body.platform-capacitor at runtime — same treatment as standalone PWA, but always-on regardless of display-mode. */ body.platform-capacitor { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ============================================================ * 20b. Touch-friendly defaults * ============================================================ */ /* WCAG / Apple HIG recommend 44x44 px minimum tap targets. The .btn was ~36 px tall on phones, so we bump min-height. min-height (not height) so long button text still wraps gracefully. */ .btn { min-height: 44px; } /* Larger inline tap surface for nav links on touch devices. Hover doesn't apply on touch, so we widen the click area instead. */ @media (hover: none) and (pointer: coarse) { .nav-links a, .nav-cta a, .footer-grid a { padding-block: 6px; } } /* ============================================================ * 20c. Form fields — prevent iOS auto-zoom * ============================================================ */ /* Bump every text-style input to 16px on phones so iOS Safari doesn't zoom in when the user taps a field. Above 600px we let the existing 14.5px stand because desktop forms look better tighter. */ @media (max-width: 600px) { .field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { font-size: 16px; } } /* ============================================================ * 20d. Phone breakpoint (≤ 600px) — earlier reflow than 720 * -------------------------------------------------------------- * The existing rules at 720 / 560 leave 600-720 px in a no-mans-land * where two-column grids are still squeezed. Patching here so feature / * stats / pricing grids stack at 600 instead of waiting for 560. * ============================================================ */ @media (max-width: 600px) { /* Section vertical padding — 96 → 56 keeps content closer to the viewport. */ section { padding: 56px 0; } .hero { padding: 40px 0 24px; } /* Container side padding — 22 → 18 reclaims a bit of horizontal room. */ .container { padding: 0 18px; } /* Hero typography — 64-ish marketing display sizes overflow on 360 px. */ .hero h1 { font-size: clamp(28px, 8vw, 38px); line-height: 1.15; } .hero p { font-size: 15px; } h2 { font-size: clamp(22px, 6vw, 28px); } /* Stack everything that was 2-up. */ .stats, .features, .steps, .investor-types, .stages, .pricing, .values, .team-grid, .footer-grid, .grid-2, .row2 { grid-template-columns: 1fr; } .stats { padding: 18px; } .stat b { font-size: 22px; } /* Stack the CTA banner button below its copy on phones. */ .cta-banner { grid-template-columns: 1fr; padding: 32px 22px; gap: 18px; } /* Auth shell — collapse the two-column hero to a single column earlier. */ .auth-wrap { grid-template-columns: 1fr; } .auth-left, .auth-right { padding: 36px 22px; } /* Article + workbook layouts overflow at ~360 px because of fixed paddings. */ .article { padding-left: 4px; padding-right: 4px; } .article .ex-template { font-size: 12px; padding: 12px 14px; } .wb-header { grid-template-columns: 1fr; gap: 12px; } .wb-progress { text-align: left; min-width: 0; } .wb-chapter { padding: 18px 16px; } /* Breadcrumb wraps to 2 lines on tiny screens but should stay tight. */ .breadcrumb-inner { padding: 10px 18px; font-size: 12.5px; } /* Discover page — filter card at the top, idea cards full-width. */ .discover-top { grid-template-columns: 1fr; } .filter-card { position: static; } .idea-grid { grid-template-columns: 1fr; } } /* ============================================================ * 20e. Tiny-phone breakpoint (≤ 380px) — iPhone SE 1, older Androids * ============================================================ */ @media (max-width: 380px) { .container { padding: 0 14px; } .nav-inner { padding: 12px 14px; } .hero h1 { font-size: 26px; } .btn { padding: 11px 14px; font-size: 14px; } .stats { grid-template-columns: 1fr; } .auth-left, .auth-right { padding: 28px 18px; } /* Stack the brand-logo + cta in nav so neither truncates. */ .nav-cta .portal-user .who { display: none; } } /* ============================================================ * 20f. Tablet breakpoint (≤ 900px) — iPad portrait + small landscape phones * -------------------------------------------------------------- * Pulling the nav into mobile mode here (instead of waiting for 960) gives * the hamburger room to breathe on iPad portrait and large phones in * landscape. The 960 breakpoint above still handles narrower 2-col → 1-col * grids; this only adjusts the nav. * ============================================================ */ @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } } /* ============================================================ * 20g. Reduced-motion preference — respect OS-level setting * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }