/* ── TOKENS ── */ :root { --bg: #0F0F0F; --surface: #181818; --surface-2: #202020; --accent: #C8F135; --accent-dim: #9BBF1A; --accent-property: #4ECDC4; --accent-contractor: #FF9F45; --text: #F0F0F0; --text-muted: #888; --text-faint: #444; --border: #2A2A2A; --red: #FF4444; --font-display: 'Bebas Neue', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html { /* body already sets overflow-x:hidden, but the scroll was happening on . `clip` prevents the sideways drift without creating a scroll container. */ overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; } /* grain overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: 0.4; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4 { line-height: 1.05; } .display { font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; } .mono { font-family: var(--font-mono); } /* ── LAYOUT ── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .container--wide { max-width: 1300px; margin: 0 auto; padding: 0 24px; } section { padding: 100px 0; } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s; } nav.scrolled { background: rgba(15,15,15,0.95); border-color: var(--border); backdrop-filter: blur(12px); } .nav-logo { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.08em; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-logo-mark { width: 32px; height: 32px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; color: var(--bg); letter-spacing: 0; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--accent) !important; color: var(--bg) !important; padding: 10px 20px !important; font-weight: 700 !important; letter-spacing: 0.05em; } .nav-cta:hover { background: var(--accent-dim) !important; } /* ── HERO ── */ .hero { padding: 80px 0 100px; position: relative; } .hero-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--accent); } .hero-headline { font-family: var(--font-display); font-size: clamp(52px, 9vw, 110px); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 16px; max-width: 900px; } .hero-headline .accent { color: var(--accent); } .hero-sub-quote { font-family: var(--font-display); font-size: clamp(18px, 3vw, 28px); color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 40px; max-width: 700px; border-left: 3px solid var(--accent); padding-left: 20px; } .hero-body { font-size: 18px; color: var(--text-muted); max-width: 580px; margin-bottom: 48px; line-height: 1.7; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 48px; } .btn-primary { background: var(--accent); color: var(--bg); padding: 16px 32px; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.06em; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.1s; border: none; cursor: pointer; } .btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text); padding: 15px 32px; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.06em; text-decoration: none; display: inline-block; border: 1px solid var(--border); transition: border-color 0.2s; } .btn-secondary:hover { border-color: var(--text-muted); } .hero-meta { display: flex; gap: 32px; flex-wrap: wrap; } .hero-meta-item { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .hero-meta-item::before { content: '✓'; color: var(--accent); } /* ── DIVIDER ── */ .divider { height: 1px; background: var(--border); margin: 0; } /* ── THE PROBLEM ── */ .problem { padding: 100px 0; } .section-label { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 48px; display: flex; align-items: center; gap: 16px; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); max-width: 200px; } .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .problem-item { background: var(--bg); padding: 40px; position: relative; } .problem-item:hover { background: var(--surface); } .problem-number { font-family: var(--font-display); font-size: 72px; color: var(--text-faint); line-height: 1; margin-bottom: 16px; display: block; } .problem-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text); } .problem-item p { color: var(--text-muted); font-size: 15px; line-height: 1.65; } /* ── STORY ── */ .story { padding: 120px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .story-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .story-label-col { position: sticky; top: 120px; } .story-big-label { font-family: var(--font-display); font-size: 80px; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-faint); writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg); } .story-body p { font-size: 18px; line-height: 1.8; color: var(--text-muted); margin-bottom: 28px; } .story-body p strong { color: var(--text); font-weight: 600; } .story-pullquote { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin: 48px 0; line-height: 1; border-left: 4px solid var(--accent); padding-left: 28px; } /* ── BS MACHINE STAMP ── */ .bs-stamp { display: inline-block; border: 3px solid var(--accent); padding: 4px 12px; font-family: var(--font-display); font-size: 28px; letter-spacing: 0.1em; color: var(--accent); position: relative; margin: 0 4px; vertical-align: middle; transform: rotate(-1deg); text-transform: uppercase; } .bs-stamp::before { content: 'FORMERLY'; position: absolute; top: -10px; left: 8px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-faint); background: var(--surface); padding: 0 4px; } /* ── THREE MODES ── */ .modes { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); } .mode-panel { padding: 80px 60px; position: relative; min-height: 500px; } .mode-panel--maker { background: var(--bg); border-right: 1px solid var(--border); } .mode-panel--property { background: var(--surface); border-right: 1px solid var(--border); } .mode-panel--contractor { background: var(--bg); } .mode-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 12px; margin-bottom: 32px; display: inline-block; font-weight: 700; } .mode-tag--maker { background: var(--accent); color: var(--bg); } .mode-tag--property { background: var(--accent-property); color: var(--bg); } .mode-tag--contractor { background: var(--accent-contractor); color: var(--bg); } .mode-panel h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 24px; line-height: 1; } .mode-panel--maker h2 { color: var(--accent); } .mode-panel--property h2 { color: var(--accent-property); } .mode-panel--contractor h2 { color: var(--accent-contractor); } .mode-panel p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 32px; } .mode-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .mode-list li { font-size: 14px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; } .mode-list li::before { content: '→'; flex-shrink: 0; margin-top: 1px; } .mode-panel--maker .mode-list li::before { color: var(--accent); } .mode-panel--property .mode-list li::before { color: var(--accent-property); } /* ── FEATURES ── */ .features { padding: 100px 0; } .features-header { margin-bottom: 64px; } .features-header h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin-bottom: 20px; } .features-header p { color: var(--text-muted); font-size: 18px; max-width: 500px; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .feature-card { background: var(--bg); padding: 40px 36px; transition: background 0.2s; } .feature-card:hover { background: var(--surface); } .feature-icon { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .feature-icon::before { content: ''; display: block; width: 20px; height: 1px; background: var(--accent); } .feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text); line-height: 1.3; } .feature-card p { color: var(--text-muted); font-size: 14px; line-height: 1.65; } .feature-card--property .feature-icon { color: var(--accent-property); } .feature-card--property .feature-icon::before { background: var(--accent-property); } .feature-card--contractor .feature-icon { color: var(--accent-contractor); } .feature-card--contractor .feature-icon::before { background: var(--accent-contractor); } /* ── CAPEX WIDGET ── */ .capex-section { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .capex-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .capex-text h2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; margin-bottom: 24px; color: var(--accent-property); } .capex-text p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; } .capex-widget { background: var(--bg); border: 1px solid var(--border); padding: 32px; font-family: var(--font-mono); } .capex-widget-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .capex-property { font-size: 13px; color: var(--text-faint); margin-bottom: 8px; letter-spacing: 0.05em; } .capex-property strong { color: var(--text); } .capex-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; margin-top: 24px; } .capex-bar { height: 8px; background: var(--border); position: relative; margin-bottom: 24px; } .capex-bar-fill { height: 100%; background: var(--red); width: 26%; transition: width 1s ease; } .capex-bar-fill.healthy { background: var(--accent-property); width: 78%; } .capex-status { padding: 16px; font-size: 13px; letter-spacing: 0.05em; display: flex; align-items: flex-start; gap: 12px; } .capex-status--danger { background: rgba(255,68,68,0.08); border: 1px solid rgba(255,68,68,0.3); color: #FF8888; } .capex-status--ok { background: rgba(78,205,196,0.08); border: 1px solid rgba(78,205,196,0.3); color: var(--accent-property); } .capex-status-icon { font-size: 16px; flex-shrink: 0; } .capex-row { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); } .capex-row:last-child { border-bottom: none; } .capex-row strong { color: var(--text); } .capex-row .positive { color: var(--accent-property); } .capex-row .negative { color: var(--red); } /* ── THE MATH ── */ .math-section { padding: 100px 0; } .math-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .math-callout { font-family: var(--font-display); font-size: clamp(56px, 8vw, 100px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.9; } .math-callout .price { color: var(--accent); } .math-callout .crossed { color: var(--text-faint); text-decoration: line-through; font-size: 0.5em; } .math-text p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; } .math-text p strong { color: var(--text); } /* ── PRICING ── */ .pricing { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); } .pricing-header { margin-bottom: 64px; } .pricing-header h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin-bottom: 16px; } .pricing-header p { color: var(--text-muted); font-size: 18px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 48px; } .pricing-card { background: var(--bg); padding: 48px 40px; } .pricing-card--featured { background: var(--surface-2); position: relative; } .pricing-card--featured::before { content: 'START HERE'; position: absolute; top: -1px; left: 40px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; background: var(--accent); color: var(--bg); padding: 4px 10px; font-weight: 700; } .pricing-tier { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .pricing-price { font-family: var(--font-display); font-size: 72px; letter-spacing: 0.02em; line-height: 1; color: var(--text); margin-bottom: 4px; } .pricing-card--featured .pricing-price { color: var(--accent); } .pricing-cadence { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; margin-bottom: 32px; text-transform: uppercase; } .pricing-desc { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin-bottom: 32px; } .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; } .pricing-features li { font-size: 14px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; } .pricing-features li::before { content: '✓'; color: var(--accent); flex-shrink: 0; font-weight: 700; } .pricing-card .btn-primary { width: 100%; text-align: center; font-size: 18px; padding: 14px; } .pricing-card .btn-secondary { width: 100%; text-align: center; font-size: 18px; padding: 13px; } .addons { border: 1px solid var(--border); padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .addon-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .addon-info p { color: var(--text-muted); font-size: 14px; } .addon-price { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } /* ── LOCAL FIRST ── */ .local-section { padding: 100px 0; border-top: 1px solid var(--border); } .local-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .local-text h2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; margin-bottom: 24px; } .local-text p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; } .local-specs { background: var(--surface); border: 1px solid var(--border); padding: 32px; font-family: var(--font-mono); } .local-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .local-spec-row:last-child { border-bottom: none; } .local-spec-label { color: var(--text-muted); letter-spacing: 0.05em; } .local-spec-value { color: var(--accent); font-weight: 700; } /* ── FINE PRINT ── */ .finePrint { padding: 60px 0; border-top: 1px solid var(--border); background: var(--surface); } .finePrint-inner { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; justify-content: center; } .finePrint-item { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .finePrint-item::before { content: '✓'; color: var(--accent); } /* ── CTA BAND ── */ .cta-band { padding: 120px 0; text-align: center; } .cta-band h2 { font-family: var(--font-display); font-size: clamp(48px, 8vw, 100px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; margin-bottom: 24px; } .cta-band h2 .accent { color: var(--accent); } .cta-band p { color: var(--text-muted); font-size: 18px; margin-bottom: 48px; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-band .btn-primary { font-size: 24px; padding: 20px 48px; } /* ── FOOTER ── */ footer { background: var(--bg); border-top: 1px solid var(--border); padding: 48px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .footer-left { display: flex; flex-direction: column; gap: 8px; } .footer-logo { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.08em; color: var(--text); } .footer-tagline { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; } .footer-links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: var(--text-faint); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s; } .footer-links a:hover { color: var(--text-muted); } .footer-right { text-align: right; } .footer-copy { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.08em; line-height: 1.8; } .footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; } .footer-copy a:hover { color: var(--text-muted); } .footer-disclaimer { font-size: 11px; color: var(--text-faint); margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border); font-style: italic; text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; } /* ── LIVE PRODUCT PROOF ── */ .live-proof { padding: 72px 0 96px; background: var(--surface); } .live-proof-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: 34px; align-items: center; } .live-window { position: relative; margin: 0; border: 1px solid var(--border); background: #0d1014; padding: 10px; box-shadow: 0 28px 80px rgba(0,0,0,.46); } .live-window::before { content: 'THE ACTUAL APP'; position: absolute; z-index: 2; top: -13px; left: 18px; padding: 6px 10px; background: var(--accent); color: var(--bg); font: 700 9px/1 var(--font-mono); letter-spacing: .16em; } .live-window img { display: block; width: 100%; height: auto; } .live-copy h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); line-height: .94; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 18px; } .live-copy h2 span { color: var(--accent); } .live-copy p { color: var(--text-muted); font-size: 15px; line-height: 1.72; margin-bottom: 14px; } .live-copy strong { color: var(--text); } .proof-list { list-style: none; margin-top: 22px; display: grid; gap: 10px; } .proof-list li { color: var(--text); font: 12px/1.5 var(--font-mono); letter-spacing: .04em; } .proof-list li::before { content: '→'; color: var(--accent); margin-right: 9px; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } .story-inner { grid-template-columns: 1fr; } .story-label-col { display: none; } .modes { grid-template-columns: 1fr; } .mode-panel--maker { border-right: none; border-bottom: 1px solid var(--border); } .mode-panel--property { border-right: none; border-bottom: 1px solid var(--border); } .features-grid { grid-template-columns: 1fr 1fr; } .capex-inner { grid-template-columns: 1fr; } .math-inner { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .local-inner { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-right { text-align: left; } .nav-links { display: none; } .addons { flex-direction: column; align-items: flex-start; } .live-proof-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { section { padding: 64px 0; } .features-grid { grid-template-columns: 1fr; } .hero-headline { font-size: 52px; } .mode-panel { padding: 56px 32px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ Shared components added when the site went from one page to four. ═══════════════════════════════════════════════════════════════════════ */ /* ── Page header (used by every page except the home page) ───────────── */ .page-head { padding: 170px 0 70px; border-bottom: 1px solid var(--border); } .page-head h1 { font-family: var(--font-display); font-size: clamp(52px, 8vw, 104px); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 22px; } .page-head .lede { font-size: 19px; line-height: 1.62; color: var(--text-muted); max-width: 640px; } .page-head .lede strong { color: var(--text); font-weight: 500; } /* ── Navigation across pages ─────────────────────────────────────────── */ .nav-links a.current { color: var(--accent); } /* ── Screenshots ─────────────────────────────────────────────────────── */ .shot { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); } .shot img { display: block; width: 100%; height: auto; } .shot figcaption { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--text-muted); padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg); } .shot figcaption b { color: var(--text); font-weight: 400; } .shot-wide { margin: 42px 0; } .shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 22px; margin: 42px 0; /* Each figure sizes to its own screenshot instead of stretching to match the tallest one, which left a band of empty card under the short ones. */ align-items: start; } /* ── Gallery with its own tab strip ──────────────────────────────────── */ .gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .gallery-tab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .gallery-tab:hover { color: var(--text); border-color: var(--text-faint); } .gallery-tab[aria-selected="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); } .gallery-panel[hidden] { display: none; } /* ── Spec tables ─────────────────────────────────────────────────────── */ .spec { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; } .spec caption { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 12px; } .spec th, .spec td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--border); vertical-align: top; } .spec th { font-weight: 500; color: var(--text-muted); width: 34%; white-space: nowrap; } .spec td { color: var(--text); } .spec td code, .spec td .mono { font-family: var(--font-mono); font-size: 13.5px; color: var(--accent); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } @media (max-width: 620px) { .spec th, .spec td { display: block; width: auto; padding-right: 0; } .spec th { border-bottom: 0; padding-bottom: 4px; } } /* ── Long-form article sections ──────────────────────────────────────── */ .doc { padding: 80px 0; border-bottom: 1px solid var(--border); } .doc:last-of-type { border-bottom: 0; } .doc h2 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 54px); letter-spacing: 0.015em; text-transform: uppercase; margin-bottom: 8px; } .doc h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 12px; } .doc h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 34px 0 10px; } .doc p { font-size: 16.5px; line-height: 1.68; color: var(--text-muted); max-width: 74ch; margin-bottom: 16px; } .doc p strong { color: var(--text); font-weight: 500; } .doc ul, .doc ol { margin: 0 0 20px 20px; max-width: 74ch; } .doc li { font-size: 16px; line-height: 1.62; color: var(--text-muted); margin-bottom: 9px; padding-left: 4px; } .doc li strong { color: var(--text); font-weight: 500; } .doc code { font-family: var(--font-mono); font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--accent); } .doc pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; overflow-x: auto; margin: 20px 0; } .doc pre code { background: none; border: 0; padding: 0; color: var(--text); font-size: 13px; line-height: 1.7; } .doc a { color: var(--accent); } /* ── Two-column split inside a doc section ───────────────────────────── */ .doc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; } @media (max-width: 900px) { .doc-split { grid-template-columns: 1fr; gap: 30px; } } /* ── Callout ─────────────────────────────────────────────────────────── */ .callout { border-left: 2px solid var(--accent); background: var(--surface); padding: 20px 24px; margin: 28px 0; border-radius: 0 8px 8px 0; } .callout p { margin-bottom: 0; } .callout p + p { margin-top: 12px; } .callout--warn { border-left-color: var(--accent-contractor); } .callout--property { border-left-color: var(--accent-property); } /* ── Step list ───────────────────────────────────────────────────────── */ .steps { counter-reset: step; list-style: none; margin: 30px 0 0; padding: 0; } .steps > li { counter-increment: step; position: relative; padding: 0 0 30px 58px; margin: 0; border-left: 1px solid var(--border); margin-left: 16px; } .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: -17px; top: -3px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px; color: var(--accent); } .steps h3 { margin: 0 0 8px; font-size: 18px; } .steps p { margin-bottom: 10px; } /* ── Requirement banner ──────────────────────────────────────────────── */ .req-banner { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 36px 0; } .req-banner > div { flex: 1 1 190px; padding: 22px 24px; border-right: 1px solid var(--border); } .req-banner > div:last-child { border-right: 0; } .req-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .req-value { font-size: 17px; font-weight: 500; color: var(--text); } .req-value.yes { color: var(--accent); } .req-value.no { color: var(--text-muted); } .req-note { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; } /* ── Download button block ───────────────────────────────────────────── */ .dl-block { border: 1px solid var(--accent); border-radius: 12px; padding: 34px; background: linear-gradient(140deg, rgba(200,241,53,0.06), transparent 60%); margin: 40px 0; } .dl-block h3 { margin: 0 0 10px; font-size: 24px; } .dl-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 16px; } /* ── In-page contents rail ───────────────────────────────────────────── */ .toc { position: sticky; top: 100px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; } .toc a { display: block; color: var(--text-muted); text-decoration: none; padding: 7px 0 7px 14px; border-left: 1px solid var(--border); transition: color 0.15s, border-color 0.15s; } .toc a:hover { color: var(--text); border-left-color: var(--text-faint); } .toc-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .with-toc { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 60px; align-items: start; } @media (max-width: 900px) { .with-toc { grid-template-columns: 1fr; gap: 0; } .toc { display: none; } } /* ── Page-to-page footer navigation ──────────────────────────────────── */ .next-page { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--border); padding: 44px 0; } .next-page .np-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .next-page .np-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 0.02em; text-transform: uppercase; } /* ── Small print rows ────────────────────────────────────────────────── */ .faq { border-top: 1px solid var(--border); } .faq details { border-bottom: 1px solid var(--border); padding: 20px 0; } .faq summary { cursor: pointer; font-size: 17px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--accent); font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq details p { font-size: 16px; line-height: 1.65; color: var(--text-muted); margin: 14px 0 0; max-width: 74ch; } /* ── Screenshot gallery on the home page ─────────────────────────────── */ .gallery { padding: 100px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); } .gallery .shot { background: var(--bg); }