/* TenancyKit marketing site - Mobile-first - Light/dark via prefers-color-scheme - Tweak palette in :root vars */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* App-ish palette (tweak freely) */ --accent: #5b7cff; /* primary */ --accent-2: #7c4dff; /* secondary */ --success: #23c483; /* Light theme defaults */ --bg: #f7f8ff; --surface: rgba(255, 255, 255, 0.92); --surface-2: rgba(245, 247, 255, 0.92); --card: #ffffff; --text: #0b1020; --muted: #4a5568; --border: rgba(17, 24, 39, 0.10); --shadow: 0 16px 50px rgba(17, 24, 39, 0.10); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 12px; --container: 1120px; } /* Theme overrides - Default: light - System dark: applies when there's no forced light override - Forced themes: set via [data-theme] on */ :root[data-theme="dark"] { --bg: #060812; /* Dark mode surfaces are intentionally more opaque to avoid background gradients showing through (which can look like sections are overlapping). */ --surface: rgba(12, 14, 28, 0.88); --surface-2: rgba(255, 255, 255, 0.07); /* Cards should be more opaque than general surfaces to avoid gradient bleed */ --card: rgba(12, 14, 28, 0.94); --text: #eef2ff; --muted: rgba(238, 242, 255, 0.75); --border: rgba(255, 255, 255, 0.10); /* Keep shadows tight in dark mode so they don't 'bleed' into the next section */ --shadow: 0 10px 22px rgba(0, 0, 0, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #060812; /* Dark mode surfaces are intentionally more opaque to avoid background gradients showing through (which can look like sections are overlapping). */ --surface: rgba(12, 14, 28, 0.88); --surface-2: rgba(255, 255, 255, 0.07); /* Cards should be more opaque than general surfaces to avoid gradient bleed */ --card: rgba(12, 14, 28, 0.94); --text: #eef2ff; --muted: rgba(238, 242, 255, 0.75); --border: rgba(255, 255, 255, 0.10); /* Keep shadows tight in dark mode so they don't 'bleed' into the next section */ --shadow: 0 10px 22px rgba(0, 0, 0, 0.32); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .container { width: min(var(--container), calc(100% - 2rem)); margin-inline: auto; } /* Navbar */ .nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--border); } .nav__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.9rem 0; } .brand { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; letter-spacing: -0.02em; } .brand__logo { width: 40px; height: 40px; display: block; } .brand__mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; box-shadow: 0 10px 24px rgba(91,124,255,0.25); font-size: 0.95rem; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 0.55rem 0.9rem; font-weight: 600; } .nav__links { grid-column: 1 / -1; display: none; list-style: none; padding: 0.5rem 0 0; margin: 0; gap: 0.25rem; } .nav__links[data-open="true"] { display: grid; } .nav__link { display: block; padding: 0.7rem 0.85rem; border-radius: 999px; border: 1px solid transparent; color: var(--muted); font-weight: 600; } .nav__link.is-active { color: var(--text); background: var(--surface-2); border-color: var(--border); text-decoration: none; } .nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; } .nav__theme:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); } .nav__theme:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; } .material-symbols-rounded { font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } .nav__theme .material-symbols-rounded { font-size: 20px; line-height: 1; display: block; } .nav__cta { display: none; } @media (min-width: 860px) { .nav__inner { grid-template-columns: auto 1fr auto; } .nav__toggle { display: none; } .nav__links { display: flex; grid-column: auto; justify-content: center; align-items: center; padding: 0; gap: 0.25rem; } .nav__cta { display: inline-flex; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; padding: 0.85rem 1.15rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,0.08); } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { border-color: rgba(91,124,255,0.35); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent-2)); color: white; box-shadow: 0 18px 45px rgba(91,124,255,0.22); } .btn--ghost { background: transparent; } .btn--sm { padding: 0.65rem 0.9rem; font-size: 0.95rem; } /* Hero */ .hero { position: relative; padding: 3.4rem 0 1.6rem; } /* Top-only gradient background (avoid repeating/banding down the page) */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 600px at 20% -10%, rgba(91,124,255,0.12), transparent 55%), radial-gradient(1000px 520px at 90% 0%, rgba(124,77,255,0.10), transparent 60%), radial-gradient(800px 500px at 60% 40%, rgba(35,196,131,0.08), transparent 55%); } @media (prefers-color-scheme: dark) { .hero::before { background: /* Fade the whole hero glow into the page background to avoid a visible edge line. */ linear-gradient(to bottom, transparent 0%, var(--bg) 92%), radial-gradient(1200px 600px at 20% -10%, rgba(91,124,255,0.22), transparent 55%), radial-gradient(1000px 520px at 90% 0%, rgba(124,77,255,0.18), transparent 60%), radial-gradient(800px 500px at 60% 40%, rgba(35,196,131,0.10), transparent 55%); } } .hero__inner { position: relative; z-index: 1; display: grid; gap: 1rem; } .eyebrow { margin: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 80%, var(--text)); font-size: 0.78rem; } .hero__title { margin: 0; letter-spacing: -0.04em; line-height: 1.05; font-size: clamp(2.1rem, 4.6vw, 3.6rem); } .hero__tagline { margin: 0; max-width: 62ch; color: var(--muted); font-size: 1.05rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.25rem; } .hero__glow { position: absolute; inset: -60px 0 auto 0; height: 260px; background: radial-gradient(closest-side, rgba(91,124,255,0.16), transparent 70%); filter: blur(12px); } .main { padding: 1.6rem 0 4rem; } /* Sections + components */ .section { position: relative; margin-top: 3rem; /* extra breathing room so shadows never visually collide */ padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .section--flat { background: transparent; border: none; box-shadow: none; padding: 0; } .h2 { margin: 0 0 0.5rem; font-size: 1.35rem; letter-spacing: -0.02em; } .p { margin: 0.25rem 0 0; color: var(--muted); } .grid { display: grid; gap: 1rem; } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } } .card { display: block; /* cards are sometimes , sometimes
*/ padding: 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); } /* Clickable cards should look clickable. */ a.card { cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } a.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 18px 50px rgba(0,0,0,0.10); text-decoration: none; } a.card:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 3px; } .card__cta { margin-top: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--text) 70%, var(--muted)); } .card:hover .card__cta { color: var(--text); } .card__title { margin: 0 0 0.25rem; font-weight: 800; letter-spacing: -0.02em; } .card__text { margin: 0; color: var(--muted); } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; padding: 0.15rem 0.4rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); } /* Footer */ .footer { border-top: 1px solid var(--border); padding: 2.25rem 0; background: color-mix(in srgb, var(--bg) 74%, transparent); } .footer__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } @media (min-width: 720px) { .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } /* Desktop: copyright left, links right (always). */ .footer__brand { order: 1; text-align: left; } .footer__links { order: 2; margin-left: auto; justify-content: flex-end; } } .footer__brand { margin: 0; color: var(--muted); } .footer__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; } /* Match copyright typography (size + weight). */ .footer__link { color: var(--muted); font-weight: inherit; font-size: inherit; } .footer__link:hover { color: var(--text); } /* Utility */ .small { font-size: 0.95rem; color: var(--muted); }