:root { --primary: #6c63ff; --primary-dark: #4f46e5; --primary-light: #ede9fe; --dark: #0f0d1a; --dark-2: #1a1635; --text: #1a1a2e; --muted: #64748b; --border: #e2e8f0; --bg: #ffffff; --bg-alt: #f8f7ff; --radius: 12px; --shadow: 0 4px 24px rgba(108, 99, 255, 0.1); --shadow-lg: 0 12px 40px rgba(108, 99, 255, 0.18); --danger: #dc2626; --success: #16a34a; --chrome-nav-height: 64px; /* Theme-dependent surfaces. Light is the default: the dark set below only applies when a `dark` class is present, which is never the case unless the visitor asked for it. Deliberately NOT keyed off prefers-color-scheme — the product default is light regardless of OS. */ --page-bg: var(--bg); --surface: #ffffff; /* cards, modals, inputs */ --text-soft: #334155; /* long-form body copy */ --faint: #cbd5e1; /* disabled dashes and placeholders */ --chip-bg: #e2e8f0; /* inert pills, e.g. "current plan" */ --nav-bg: rgba(255,255,255,0.95); --nav-border: #e2e8f0; --nav-text: #64748b; --nav-strong: #1a1a2e; --nav-hover-bg: #f8f7ff; } /* Gradio puts its `dark` class on or depending on version, and the marketing pages set it on from the head script — so both are matched here. Note --dark / --dark-2 are absent on purpose: the hero, the final CTA, the Enterprise card and the footer are dark surfaces in *both* themes, and their light-on-dark text is already correct. */ html.dark, body.dark { --bg: #0f0d1a; --bg-alt: #14121f; --text: #e8e4ff; --muted: #94a3b8; --border: rgba(255,255,255,0.10); --surface: #191631; --text-soft: #c7c3e0; --faint: #4b5563; --chip-bg: rgba(255,255,255,0.10); --primary-light: rgba(108,99,255,0.18); /* Violet-tinted shadows vanish against a dark page; go darker instead. */ --shadow: 0 4px 24px rgba(0,0,0,0.45); --shadow-lg: 0 12px 40px rgba(0,0,0,0.60); --nav-bg: rgba(20,18,31,0.95); --nav-border: rgba(255,255,255,0.10); --nav-text: #94a3b8; --nav-strong: #e8e4ff; --nav-hover-bg: rgba(255,255,255,0.06); } html.dark { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); line-height: 1.7; font-size: 16px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; transition: all 0.18s; text-decoration: none; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); color: white; transform: translateY(-1px); box-shadow: var(--shadow); } .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: var(--primary-light); text-decoration: none; } .btn-lg { padding: 15px 36px; font-size: 1.05rem; border-radius: 12px; } .btn-sm { padding: 8px 18px; font-size: 0.85rem; border-radius: 8px; } /* Forms & flash messages */ .form-field { margin-bottom: 18px; text-align: left; } .form-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .form-field input { width: 100%; padding: 11px 14px; font-size: 0.95rem; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; color: var(--text); background: var(--surface); } .form-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,99,255,0.15); } .form-hint { font-size: 0.78rem; color: var(--muted); margin-top: 5px; } .flash { padding: 12px 16px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 20px; text-align: left; } .flash-error { background: rgba(220,38,38,0.10); color: var(--danger); border: 1px solid rgba(220,38,38,0.35); } .flash-success { background: rgba(22,163,74,0.10); color: var(--success); border: 1px solid rgba(22,163,74,0.35); } .flash-info { background: rgba(108,99,255,0.10); color: var(--primary); border: 1px solid rgba(108,99,255,0.35); } /* ---- Shell geometry -------------------------------------------------- */ /* Both page types put exactly three children in : the nav wrapper, one growing content element, and the footer wrapper. The header is fixed to the viewport (never `sticky` — inside Gradio its wrapper is only as tall as the bar, leaving no distance to stick over) and the footer is pushed down by the flex column, so it sits at the bottom even when content is short. */ /* Gradio picks its own body background from its theme and falls back to prefers-color-scheme, which showed through the header clearance strip below as a black band on a light page. Pinning the surface to our own themed variable settles it: `!important` beats Gradio's rule, and because the value is a custom property it still follows the light/dark switch. */ html, body { background: var(--page-bg) !important; } html { min-height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; /* Clears the fixed header. Gradio sets `padding: 0` inline on and the marketing reset zeroes it too, so this has to outrank both. */ padding-top: var(--chrome-nav-height) !important; } body > gradio-app, body > .page-main { flex: 1 0 auto; min-width: 0; } .site-chrome-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .site-chrome-footer { flex: 0 0 auto; margin-top: auto; } .site-chrome-nav, .site-chrome-footer { box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.7; font-size: 16px; } /* ---- Header ---------------------------------------------------------- */ .site-chrome-nav nav { background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border); padding: 0 5%; height: var(--chrome-nav-height); } .site-chrome-nav .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--chrome-nav-height); } .site-chrome-nav .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.18rem; color: var(--nav-strong); text-decoration: none; } .site-chrome-nav .nav-logo:hover { text-decoration: none; } .site-chrome-nav .nav-links { display: flex; align-items: center; gap: 8px; } .site-chrome-nav .nav-links a { padding: 6px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--nav-text); transition: all 0.15s; text-decoration: none; } .site-chrome-nav .nav-links a:hover { color: var(--nav-strong); background: var(--nav-hover-bg); text-decoration: none; } .site-chrome-nav .nav-links .btn-primary { background: var(--primary); color: white; border-radius: 8px; padding: 7px 18px; } .site-chrome-nav .nav-links .btn-primary:hover { background: var(--primary-dark); color: white; } .site-chrome-nav .nav-plan { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); background: var(--primary-light); border-radius: 20px; padding: 3px 10px; } /* Theme toggle. Light is the default; this only offers the switch. */ .site-chrome-nav .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; border: 1px solid var(--nav-border); border-radius: 8px; background: transparent; color: var(--nav-text); cursor: pointer; font-size: 0.95rem; line-height: 1; font-family: inherit; padding: 0; transition: all 0.15s; } .site-chrome-nav .theme-toggle:hover { color: var(--nav-strong); background: var(--nav-hover-bg); } .site-chrome-nav .theme-toggle .icon-dark { display: none; } html.dark .site-chrome-nav .theme-toggle .icon-dark, body.dark .site-chrome-nav .theme-toggle .icon-dark { display: inline; } html.dark .site-chrome-nav .theme-toggle .icon-light, body.dark .site-chrome-nav .theme-toggle .icon-light { display: none; } /* ---- Footer ---------------------------------------------------------- */ .site-chrome-footer footer { background: var(--dark); color: #94a3b8; padding: 60px 5% 30px; } .site-chrome-footer .footer-inner { max-width: 1200px; margin: 0 auto; } .site-chrome-footer .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); } .site-chrome-footer .footer-brand { display: flex; flex-direction: column; gap: 12px; } .site-chrome-footer .footer-brand-name { display: flex; align-items: center; gap: 10px; color: white; font-weight: 700; font-size: 1.1rem; } .site-chrome-footer .footer-tagline { font-size: 0.88rem; line-height: 1.6; } .site-chrome-footer .footer-col h4 { color: white; font-size: 0.85rem; font-weight: 600; margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .site-chrome-footer .footer-col a { display: block; font-size: 0.9rem; color: #94a3b8; margin-bottom: 8px; text-decoration: none; } .site-chrome-footer .footer-col a:hover { color: white; text-decoration: none; } .site-chrome-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 24px; font-size: 0.82rem; } /* ---- Responsive ------------------------------------------------------ */ @media (max-width: 768px) { .site-chrome-footer .footer-top { grid-template-columns: 1fr 1fr; } .site-chrome-footer .footer-col:first-child { grid-column: 1 / -1; } } @media (max-width: 480px) { .site-chrome-footer .footer-top { grid-template-columns: 1fr; } .site-chrome-nav .nav-links a:not(.btn-primary) { display: none; } }