/* ctrl8.com — shared styles */ :root { color-scheme: light dark; /* Dark theme (default) */ --bg: #0e0e10; --bg-soft: #141416; --card: #18181f; --card-hi: #202028; --line: #2b2a32; --line-hi: #3b3a49; --text: #e9ebf0; --text-soft: #cdd2db; --muted: #9aa1ad; --faint: #6b7280; --accent: #76adff; --accent-2: #b092fa; --accent-3: #34d399; --accent-hover: #84b6ff; --btn-primary-text: #07101f; --header-bg: rgba(14,14,16,.78); --keycap-top: #20242f; --keycap-bottom: #14171f; --kbd-bg: #1b1f29; --page-texture: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px); --page-glow: radial-gradient(60% 70% at 50% -10%, rgba(118,173,255,.13), transparent 68%), radial-gradient(44% 52% at 78% 6%, rgba(255,176,108,.055), transparent 72%); --card-shadow: none; --card-shadow-hi: none; --radius: 14px; --maxw: 1080px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; } /* Light theme — macOS-style mid-grey: a clear grey window background so the lighter cards lift off it, with crisper separators and a soft elevation shadow. Driven by the data-theme attribute, which the inline script sets from the ?theme= URL param (saved to localStorage), or from the system appearance when no override is set. Dark is the :root default above. */ :root[data-theme="light"] { color-scheme: light; --bg: #c1c5cc; --bg-soft: #d0d4db; --card: #e9ebef; --card-hi: #f3f5f7; --line: #a6adb8; --line-hi: #8f97a5; --text: #191b20; --text-soft: #353b45; --muted: #4e5662; --faint: #646b77; --accent: #2b5ddc; --accent-2: #7849d8; --accent-3: #0e8f60; --accent-hover: #1a47c4; --btn-primary-text: #ffffff; --header-bg: rgba(193,197,204,.82); --keycap-top: #f0f2f5; --keycap-bottom: #cdd2da; --kbd-bg: #d6dae1; --page-texture: repeating-linear-gradient(135deg, rgba(0,0,0,.018) 0 1px, transparent 1px 18px); --page-glow: radial-gradient(58% 66% at 50% -12%, rgba(43,93,220,.07), transparent 70%), radial-gradient(42% 50% at 82% 4%, rgba(118,128,145,.045), transparent 74%); --card-shadow: 0 1px 2px rgba(20,28,46,.08), 0 8px 22px rgba(20,28,46,.10); --card-shadow-hi: 0 3px 6px rgba(20,28,46,.10), 0 16px 34px rgba(20,28,46,.16); } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); background: var(--page-texture), var(--page-glow), var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; color: var(--text); font-size: 1.05rem; letter-spacing: .2px; } .brand:hover { text-decoration: none; } .nav a { color: var(--muted); margin-left: 22px; font-size: .94rem; font-weight: 500; } .nav a:hover { color: var(--text); text-decoration: none; } .theme-toggle { margin-left: 20px; width: 34px; height: 30px; padding: 0; vertical-align: middle; display: inline-grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; transition: color .14s ease, border-color .14s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--line-hi); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* Keycap motif */ .keycap { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--text); background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom)); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; } .keycap.lg { min-width: 56px; height: 56px; font-size: 1.5rem; border-radius: 12px; border-bottom-width: 4px; } /* ---------- Hero ---------- */ .hero { padding: 84px 0 58px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% 0 auto 0; height: 520px; background: radial-gradient(60% 60% at 50% 0%, rgba(118,173,255,.14), transparent 70%), radial-gradient(48% 50% at 80% 10%, rgba(255,176,108,.075), transparent 72%); pointer-events: none; } .hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 18px 0 14px; letter-spacing: -.02em; } .hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 640px; margin: 0 auto; } .hero .keys { display: inline-flex; align-items: center; gap: 8px; } .hero .plus { color: var(--faint); font-weight: 700; } /* ---------- Section ---------- */ section { padding: 30px 0; } .section-title { font-size: 1.4rem; margin: 0 0 6px; letter-spacing: -.01em; } .section-sub { color: var(--muted); margin: 0 0 26px; } /* ---------- Cards grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--card-shadow); transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .card:hover { transform: translateY(-3px); border-color: var(--line-hi); background: var(--card-hi); box-shadow: var(--card-shadow-hi); text-decoration: none; } .card .card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; } .card .mono-icon { width: 46px; height: 46px; flex: none; border-radius: 11px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: #0c0d11; } /* Real app icons (macOS squircle artwork) */ .app-icon { width: 46px; height: 46px; flex: none; border-radius: 22%; display: block; } .app-icon.lg { width: 64px; height: 64px; } .card h3 { margin: 0; font-size: 1.16rem; color: var(--text); } .card .tag { color: var(--muted); font-size: .95rem; margin: 0 0 14px; flex: 1; } .card .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; } /* Badges */ .badge { font-family: var(--mono); font-size: .72rem; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .badge.accent { color: var(--accent); border-color: rgba(110,168,254,.35); } .badge.green { color: var(--accent-3); border-color: rgba(52,211,153,.32); } .badge.purple { color: var(--accent-2); border-color: rgba(167,139,250,.35); } /* ---------- "Which tool" chooser ---------- */ .chooser { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 760px; } .chooser li { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px 18px; transition: border-color .16s ease; } .chooser li:hover { border-color: var(--line-hi); } .chooser-need { color: var(--text-soft); } .chooser li a { flex: none; font-weight: 600; font-family: var(--mono); font-size: .9rem; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(110,168,254,.32); color: var(--accent); } .chooser li a:hover { text-decoration: none; background: var(--bg-soft); } @media (max-width: 520px) { .chooser li { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ---------- Program detail page ---------- */ .prog-hero { padding: 60px 0 34px; } .prog-hero .crumb { color: var(--faint); font-size: .9rem; margin-bottom: 20px; } .prog-hero .crumb a { color: var(--muted); } .prog-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .prog-head .mono-icon { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 15px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: #0c0d11; flex: none; } .prog-head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; } .prog-head .tagline { color: var(--muted); font-size: 1.15rem; margin: 4px 0 0; } .prog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 4px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: .95rem; border: 1px solid var(--line); color: var(--text); background: var(--card); } .btn:hover { text-decoration: none; border-color: var(--line-hi); background: var(--card-hi); } .btn.primary { background: var(--accent); color: var(--btn-primary-text); border-color: transparent; } .btn.primary:hover { background: var(--accent-hover); } .prose { max-width: 760px; } .prose h2 { font-size: 1.3rem; margin: 38px 0 12px; letter-spacing: -.01em; } .prose p { color: var(--text-soft); } .feature-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 11px; } .feature-list li { position: relative; padding-left: 28px; color: var(--text-soft); } .feature-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(110,168,254,.12); } /* ---------- Public stats ---------- */ .stats-panel { margin: 18px 0 12px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; } .stats-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .stats-head h3 { margin: 0 0 4px; font-size: 1rem; } .stats-head p { margin: 0; color: var(--muted); font-size: .94rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .stat { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); } .stat-label { display: block; color: var(--muted); font-size: .78rem; font-family: var(--mono); margin-bottom: 4px; } .stat strong { display: block; font-size: 1.35rem; line-height: 1.1; } .stats-table-wrap { overflow-x: auto; } .stats-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .stats-table th, .stats-table td { text-align: left; padding: 8px 7px; border-top: 1px solid var(--line); vertical-align: middle; } .stats-table th { color: var(--muted); font-family: var(--mono); font-size: .74rem; font-weight: 600; } @media (max-width: 620px) { .stats-head { flex-direction: column; } .stats-grid { grid-template-columns: 1fr; } } kbd { font-family: var(--mono); font-size: .82em; color: var(--text); background: var(--kbd-bg); border: 1px solid var(--line); border-bottom-width: 2px; padding: 1px 6px; border-radius: 6px; } /* ---------- Status pill ---------- */ .status { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--muted); } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); } .status.alpha::before { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.14); } .status.stable::before { background: var(--accent-3); box-shadow: 0 0 0 4px rgba(52,211,153,.14); } .status.concept::before { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(167,139,250,.14); } /* ---------- Screenshot frame (real images) ---------- */ .shot { margin: 30px 0 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 12px 34px rgba(0,0,0,.18); } .shot-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .shot-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-hi); display: block; } .shot-bar span { margin-left: 8px; font-family: var(--mono); font-size: .72rem; color: var(--faint); } .shot img { display: block; width: 100%; height: auto; } .shot.portrait img { max-width: 420px; margin: 0 auto; } .shot figcaption { padding: 11px 16px; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); } /* Floating screenshot — a real app window (transparent PNG, its own chrome) that sits directly on the page background with a soft drop shadow. */ .float { margin: 30px 0 8px; } .float-shot { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.16)) drop-shadow(0 16px 34px rgba(0,0,0,.26)); } .float figcaption { margin-top: 16px; font-size: .85rem; color: var(--muted); } /* ---------- Honest illustration panels ---------- */ .demo { margin: 28px 0 8px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--card), var(--bg-soft)); padding: 24px; } .demo-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 0 0 18px; } .xform { display: grid; gap: 13px; } .xform-row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .xform .tok { font-family: var(--mono); font-size: 1rem; padding: 6px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); } .xform .arrow { color: var(--accent); font-weight: 700; font-size: 1.1rem; } .xform .tok.out { border-color: rgba(110,168,254,.42); color: var(--accent); background: transparent; font-weight: 600; } .flow { display: grid; gap: 11px; } .flow-step { display: flex; gap: 14px; align-items: flex-start; } .flow-tag { flex: none; width: 78px; padding-top: 11px; font-family: var(--mono); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); } .flow-body { flex: 1; padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--text-soft); } .flow-body .pill { display: inline-block; font-family: var(--mono); font-size: .78rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-hi); color: var(--accent-2); } .flow-step.is-out .flow-body { border-color: rgba(110,168,254,.42); color: var(--text); } .stack { display: grid; gap: 9px; } .stack-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); } .stack-type { flex: none; min-width: 50px; text-align: center; font-family: var(--mono); font-size: .67rem; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-hi); color: var(--muted); } .stack-text { color: var(--text-soft); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Soft "coming soon" tag */ .soon { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); padding: 9px 0; } .soon b { color: var(--text-soft); font-weight: 600; } /* Download note — under a Download CTA */ .dlnote { font-size: .85rem; color: var(--muted); margin: 12px 0 0; } .dlnote b { color: var(--accent-3); font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 50px; padding: 34px 0; color: var(--faint); font-size: .9rem; } .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .site-footer a { color: var(--muted); } .site-footer .links a { margin-left: 18px; } .site-footer .legal { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.6; color: var(--faint); max-width: 920px; } .site-footer .legal strong { color: var(--muted); font-weight: 600; } @media (max-width: 560px) { .nav a { margin-left: 14px; } .site-footer .wrap { flex-direction: column; align-items: flex-start; } .site-footer .links a { margin: 0 18px 0 0; } }