/* ────────────────────────────────────────────────────────────── Stacklight marketing site Plain CSS, no framework, no build step. Theme system mirrors the app: - data-theme="minimalist" (default) - data-theme="retro" - data-theme="neon" - data-theme="it" Each theme exposes a full token set for both color schemes. The user's prefers-color-scheme picks the initial light/dark. The theme-toggle script just flips data-theme on . ────────────────────────────────────────────────────────────── */ /* Reset (Eric Meyer minimal + box-sizing) */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; font: inherit; color: inherit; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; } /* ────────────────────────────────────────────────────────────── Theme tokens Naming matches Color+Tokens.swift in the iOS app so the site and app feel like siblings: --bg-primary, --bg-secondary, --bg-tertiary --text-primary, --text-secondary, --text-tertiary --accent --status-ok, --status-warn, --status-down, --status-unknown --divider plus: --font, --radius-s, --radius-m, --radius-l, --radius-xl ────────────────────────────────────────────────────────────── */ /* Default: Minimalist, dark. Homelab audience reads at night. */ :root { --bg-primary: #0E0E10; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --text-primary: #F2F2F2; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; --accent: #0A84FF; --status-ok: #30D158; --status-warn: #FF9F0A; --status-down: #FF453A; --status-unknown: #98989D; --divider: #38383A; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 22px; --max-w: 64rem; /* 1024px */ --max-w-prose: 42rem; } /* Minimalist, light */ @media (prefers-color-scheme: light) { :root:not([data-theme]), :root[data-theme="minimalist"]:not([data-scheme="dark"]) { --bg-primary: #F7F7F8; --bg-secondary: #FFFFFF; --bg-tertiary: #EDEDEF; --text-primary: #1A1A1A; --text-secondary: #6B7280; --text-tertiary: #A1A1AA; --accent: #0A84FF; --status-ok: #34C759; --status-warn: #FF9500; --status-down: #FF3B30; --status-unknown: #8E8E93; --divider: #E5E7EB; } } /* When the user explicitly toggles via the button, --data-scheme on wins regardless of prefers-color-scheme. */ :root[data-scheme="dark"][data-theme="minimalist"], :root[data-scheme="dark"]:not([data-theme]) { --bg-primary: #0E0E10; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --text-primary: #F2F2F2; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; --accent: #0A84FF; --status-ok: #30D158; --status-warn: #FF9F0A; --status-down: #FF453A; --status-unknown: #98989D; --divider: #38383A; } :root[data-scheme="light"][data-theme="minimalist"], :root[data-scheme="light"]:not([data-theme]) { --bg-primary: #F7F7F8; --bg-secondary: #FFFFFF; --bg-tertiary: #EDEDEF; --text-primary: #1A1A1A; --text-secondary: #6B7280; --text-tertiary: #A1A1AA; --accent: #0A84FF; --status-ok: #34C759; --status-warn: #FF9500; --status-down: #FF3B30; --status-unknown: #8E8E93; --divider: #E5E7EB; } /* ───── Theme: Retro Tech ───── */ :root[data-theme="retro"] { --bg-primary: #0A0907; --bg-secondary: #161210; --bg-tertiary: #221C15; --text-primary: #FFB000; --text-secondary: #C28A00; --text-tertiary: #7A5A14; --accent: #FFCC33; --status-ok: #33FF33; --status-warn: #FFCC00; --status-down: #FF4040; --status-unknown: #7A6F40; --divider: #3A3320; --font: var(--font-mono); --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-xl: 6px; } :root[data-theme="retro"][data-scheme="light"] { --bg-primary: #F5EFE0; --bg-secondary: #FFF8E6; --bg-tertiary: #E8DDC4; --text-primary: #2A1F0F; --text-secondary: #5C4A2D; --text-tertiary: #8B7556; --accent: #B85A00; --status-ok: #4A7B3A; --status-warn: #C28800; --status-down: #8B2C1A; --status-unknown: #6B6055; --divider: #C9B98A; } /* ───── Theme: Neon (was Cyberpunk) ───── */ :root[data-theme="neon"] { --bg-primary: #0A0017; --bg-secondary: #14082E; --bg-tertiary: #1F0F45; --text-primary: #F0E6FF; --text-secondary: #B095DC; --text-tertiary: #7060A5; --accent: #FF00C8; --status-ok: #00FFA3; --status-warn: #FFD60A; --status-down: #FF0055; --status-unknown: #6A6A8C; --divider: #2D1A5C; --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-xl: 20px; } :root[data-theme="neon"][data-scheme="light"] { --bg-primary: #F5F0FF; --bg-secondary: #FFFFFF; --bg-tertiary: #ECE3FF; --text-primary: #1A0033; --text-secondary: #4A2B7A; --text-tertiary: #7B6FA0; --accent: #FF2D95; --status-ok: #00C853; --status-warn: #FFAB00; --status-down: #FF1744; --status-unknown: #5C5C7A; --divider: #D9CFFF; } /* ───── Theme: IT Department ───── Light variant uses the same navy DNA as the dark variant: cool blue-tinted page background, white cards that "lift" off it, and navy text/accent. Pure white + neutral grey would feel generic and wouldn't visually rhyme with the dark variant the way it does now. Keep these light values in sync with Theme.swift's itDepartment. */ :root[data-theme="it"] { --bg-primary: #0E1A2B; --bg-secondary: #182437; --bg-tertiary: #243349; --text-primary: #F4F4F4; --text-secondary: #C6C6C6; --text-tertiary: #8D8D8D; --accent: #78A9FF; --status-ok: #42BE65; --status-warn: #F1C21B; --status-down: #FA4D56; --status-unknown: #6F6F6F; --divider: #2E3A50; --radius-s: 2px; --radius-m: 4px; --radius-l: 6px; --radius-xl: 8px; } :root[data-theme="it"][data-scheme="light"] { --bg-primary: #F0F4FA; --bg-secondary: #FFFFFF; --bg-tertiary: #DCE3EE; --text-primary: #161616; --text-secondary: #4A5466; --text-tertiary: #708099; --accent: #002D9C; --status-ok: #198038; --status-warn: #F1C21B; --status-down: #DA1E28; --status-unknown: #708099; --divider: #C8D2DF; } /* ────────────────────────────────────────────────────────────── Base typography & body ────────────────────────────────────────────────────────────── */ html { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; background: var(--bg-primary); } h1, h2, h3, h4 { color: var(--text-primary); letter-spacing: -0.015em; line-height: 1.15; font-weight: 700; } h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { color: var(--text-secondary); } strong { color: var(--text-primary); font-weight: 600; } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--accent); } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Selection: soften so it doesn't fight the theme */ ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text-primary); } /* ────────────────────────────────────────────────────────────── Layout primitives ────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1.25rem; } .prose { max-width: var(--max-w-prose); } .section { padding-block: clamp(3rem, 8vw, 6rem); border-bottom: 1px solid var(--divider); } .section:last-of-type { border-bottom: 0; } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--text-secondary); max-width: 38rem; line-height: 1.55; } /* ────────────────────────────────────────────────────────────── Header / nav ────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--divider); } .nav { display: flex; align-items: center; gap: 1rem; padding-block: 0.85rem; } .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } /* Brand mark: the real app icon as an . CSS just sizes it, applies the iOS-style rounded-square mask, and prevents flex shrinkage. Same class is reused in the footer at the same size. */ .brand-mark { width: 32px; height: 32px; border-radius: 8px; display: block; flex-shrink: 0; /* Subtle separator against the dark background, mostly visible only on the lightest theme variants where the icon and bg both edge toward white. */ box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--text-primary) 8%, transparent); } .nav-spacer { flex: 1; } .nav-link { color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; padding: 0.4rem 0.5rem; border-radius: var(--radius-s); } .nav-link:hover { color: var(--text-primary); text-decoration: none; } /* ────────────────────────────────────────────────────────────── Theme switcher (the show-don't-tell gimmick) ────────────────────────────────────────────────────────────── */ .theme-switch { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: var(--radius-m); } .theme-swatch { width: 22px; height: 22px; border-radius: calc(var(--radius-m) - 4px); border: 1px solid var(--divider); cursor: pointer; display: grid; place-items: center; position: relative; } .theme-swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-swatch[data-theme-target="minimalist"] { background: linear-gradient(135deg, #1C1C1E 50%, #0A84FF 50%); } .theme-swatch[data-theme-target="retro"] { background: linear-gradient(135deg, #161210 50%, #FFB000 50%); } .theme-swatch[data-theme-target="neon"] { background: linear-gradient(135deg, #14082E 50%, #FF00C8 50%); } .theme-swatch[data-theme-target="it"] { background: linear-gradient(135deg, #182437 50%, #78A9FF 50%); } .scheme-toggle { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-s); color: var(--text-secondary); } .scheme-toggle:hover { background: var(--bg-secondary); color: var(--text-primary); } .scheme-toggle svg { width: 18px; height: 18px; } /* ────────────────────────────────────────────────────────────── Hero ────────────────────────────────────────────────────────────── */ .hero { padding-block: clamp(4rem, 9vw, 7rem); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(40% 35% at 10% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%); pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { margin-bottom: 1rem; } .hero h1 .accent { color: var(--accent); } .hero .lead { margin-bottom: 1.75rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.05rem; border-radius: var(--radius-m); font-weight: 600; font-size: 0.97rem; transition: transform 0.08s ease, background 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--bg-primary); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, white); } .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--divider); } .btn-secondary:hover { background: var(--bg-tertiary); } /* Placeholder block. Visually distinct from real content so Fatih can see at a glance what still needs an asset. */ .placeholder { background: repeating-linear-gradient( 45deg, var(--bg-secondary), var(--bg-secondary) 10px, var(--bg-tertiary) 10px, var(--bg-tertiary) 20px ); border: 1px dashed var(--divider); border-radius: var(--radius-l); display: grid; place-items: center; padding: 2rem 1rem; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.85rem; text-align: center; } .placeholder.aspect-iphone { aspect-ratio: 9 / 19.5; } .placeholder.aspect-watch { aspect-ratio: 1 / 1; } .placeholder.aspect-screen { aspect-ratio: 9 / 16; } /* Hero device frame: keeps the iPhone aspect while we wait for real PNGs */ .device-frame { background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: 36px; padding: 14px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5); } .device-frame .placeholder { border-radius: 24px; } /* ────────────────────────────────────────────────────────────── Privacy-by-architecture principle cards ────────────────────────────────────────────────────────────── */ .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 760px) { .principles { grid-template-columns: 1fr; } } .principle { background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: var(--radius-l); padding: 1.5rem; } .principle h3 { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 0.55rem; } /* Green check icon. Colored via currentColor on an inline SVG would be neater, but a CSS-only ::before keeps the markup clean and the check picks up the per-theme --status-ok automatically. */ .principle h3::before { content: "✓"; color: var(--status-ok); font-weight: 800; font-size: 1.05em; line-height: 1; flex-shrink: 0; } .principle p { font-size: 0.95rem; } /* ────────────────────────────────────────────────────────────── Integration grid (the 23-services showcase) ────────────────────────────────────────────────────────────── */ .integrations { display: grid; gap: 1.5rem; } .integration-category { background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: var(--radius-l); padding: 1.25rem 1.5rem; } .integration-category h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.85rem; font-weight: 600; } .integration-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 1.5rem; } .integration-list li { font-size: 0.97rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.55rem; padding-block: 0.15rem; } /* Brand-icon SVG inside each li. Sized at 22px so it visually rhymes with the iOS dashboard's row icons (22pt there). aspect-ratio keeps non-square logos rendered properly. */ .integration-list li > img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; /* The selfh.st SVGs are designed for any background but a couple (Plex's near-black tile in particular) blend into dark theme bg. A 1px outline at very low opacity defines the edge without being visible against icons that have their own painted backgrounds. */ } /* Fallback dot for services with no brand asset (currently just Bitaxe). Keeps the row visually aligned with its iconed siblings. */ .integration-list li.no-icon::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--status-ok) 25%, transparent); border: 1px solid color-mix(in srgb, var(--status-ok) 50%, transparent); flex-shrink: 0; } /* Avatar-style stack for the *arr row: Sonarr / Radarr / Lidarr / Readarr ship under one ServiceType in the app but are visibly four distinct apps, so the website renders all four logos overlapping left-to-right. Sonarr (first child) sits on top so the visual order rhymes with the text order; each subsequent app peeks out ~12px to the right. */ .integration-list .arr-stack { display: inline-flex; flex-shrink: 0; align-items: center; } .integration-list .arr-stack img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; /* Card-background-colored ring separates overlapping tiles. The ring is invisible against the card itself and visible only where it crosses a neighbor — the classic Slack/Discord avatar-stack trick. */ box-shadow: 0 0 0 1.5px var(--bg-secondary); } .integration-list .arr-stack img + img { /* -4px keeps the avatar-stack effect (icons clearly overlap, ring separates them) while leaving ~18 of each icon's 22px visible — enough to recognize each *arr logo's distinctive colors and glyph. -10px hid too much of Radarr / Lidarr / Readarr. */ margin-left: -4px; } .integration-list .arr-stack img:nth-child(1) { z-index: 4; } .integration-list .arr-stack img:nth-child(2) { z-index: 3; } .integration-list .arr-stack img:nth-child(3) { z-index: 2; } .integration-list .arr-stack img:nth-child(4) { z-index: 1; } /* iOS-only badge on Gitea, NPM, OPNsense. Same look as before. */ .integration-list li.unique::after { content: "iOS-only"; font-size: 0.7rem; font-family: var(--font-mono); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); padding: 0.05rem 0.4rem; border-radius: 999px; margin-left: 0.25rem; } /* ────────────────────────────────────────────────────────────── Themes section ────────────────────────────────────────────────────────────── */ .theme-showcase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 760px) { .theme-showcase { grid-template-columns: repeat(2, 1fr); } } .theme-card { background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; } .theme-card .label { padding: 0.85rem 1rem; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; } .theme-card .label strong { font-size: 0.95rem; } .theme-card .label .tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); } .theme-card .placeholder.aspect-screen { border: 0; border-radius: 0; margin: 0; flex: 1; } /* ────────────────────────────────────────────────────────────── Feature blocks (Watch) ────────────────────────────────────────────────────────────── */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .feature + .feature { margin-top: clamp(3rem, 7vw, 5rem); } .feature.reverse > :first-child { order: 2; } @media (max-width: 760px) { .feature { grid-template-columns: 1fr; } .feature.reverse > :first-child { order: 0; } } .feature h2 { margin-bottom: 0.85rem; } /* ────────────────────────────────────────────────────────────── FAQ ────────────────────────────────────────────────────────────── */ .faq { max-width: var(--max-w-prose); } .faq details { border-bottom: 1px solid var(--divider); padding-block: 1.1rem; } .faq summary { font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--text-tertiary); font-size: 1.3rem; font-weight: 400; transition: transform 0.15s; } .faq details[open] summary::after { content: "−"; } .faq details p { margin-top: 0.75rem; color: var(--text-secondary); } /* ────────────────────────────────────────────────────────────── Footer ────────────────────────────────────────────────────────────── */ .site-footer { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--divider); background: var(--bg-primary); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-grid h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.65rem; font-weight: 600; } .footer-grid a { color: var(--text-secondary); font-size: 0.95rem; display: block; padding-block: 0.2rem; } .footer-grid a:hover { color: var(--text-primary); } .footer-legal { font-size: 0.85rem; color: var(--text-tertiary); border-top: 1px solid var(--divider); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* ────────────────────────────────────────────────────────────── Prose pages (privacy, support) ────────────────────────────────────────────────────────────── */ .prose-page { padding-block: clamp(3rem, 7vw, 5rem); } .prose-page h1 { margin-bottom: 0.5rem; } .prose-page .updated { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 2.5rem; } .prose-page h2 { font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: 0.6rem; } .prose-page h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.4rem; } .prose-page p, .prose-page li { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); } .prose-page p + p, .prose-page ul + p, .prose-page p + ul { margin-top: 0.85rem; } .prose-page ul { margin-block: 0.85rem; padding-left: 1.25rem; } .prose-page ul li { list-style: disc; margin-bottom: 0.35rem; padding-left: 0.25rem; } .prose-page strong { color: var(--text-primary); } .prose-page code { background: var(--bg-secondary); border: 1px solid var(--divider); padding: 0.1em 0.4em; border-radius: 4px; } /* Compact callout used on Support page */ .callout { background: var(--bg-secondary); border: 1px solid var(--divider); border-left: 3px solid var(--accent); border-radius: var(--radius-m); padding: 1rem 1.15rem; margin-block: 1.25rem; font-size: 0.95rem; } .callout.warn { border-left-color: var(--status-warn); } /* ────────────────────────────────────────────────────────────── Accessibility helpers ────────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }