/* ======================== Base & Reset ======================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --surface: #f8f9fa; --text: #111111; --text-secondary: #666666; --border: #e5e7eb; --nav-bg: rgba(18, 30, 23, 0.96); --accent: #16a34a; } @media (prefers-color-scheme: dark) { :root { --bg: #0d0d0d; --surface: #1a1a1a; --text: #ffffff; --text-secondary: #888888; --border: #2a2a2a; } } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ======================== Per-app accent color (set on of each app page) ======================== */ body.jl { --accent: #16a34a; } body.fd { --accent: #2563eb; } @media (prefers-color-scheme: dark) { body.jl { --accent: #4ade80; } body.fd { --accent: #818cf8; } } /* ======================== Nav ======================== */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .nav-inner { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { color: white; font-weight: 800; font-size: 0.875rem; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .nav-links a { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; transition: color 0.15s; } .nav-links a:hover { color: white; } /* ======================== Footer ======================== */ .footer { border-top: 1px solid var(--border); } .footer-inner { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } @media (min-width: 640px) { .footer-inner { flex-direction: row; justify-content: space-between; } } .footer-copy { font-size: 0.875rem; color: var(--text-secondary); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: 0.875rem; color: var(--text-secondary); } .footer-links a:hover { text-decoration: underline; } /* ======================== Home — Split Hero ======================== */ .split-hero { display: flex; flex-direction: column; min-height: calc(100vh - 57px); } @media (min-width: 768px) { .split-hero { flex-direction: row; } } .hero-half { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 4rem; } @media (max-width: 767px) { .hero-half { padding: 2.5rem 1.5rem; } } .hero-jl { background: linear-gradient(160deg, #1c3028 0%, #0d1f15 100%); } .hero-fd { background: linear-gradient(160deg, #1a2540 0%, #0d1525 100%); } .split-divider-v { width: 1px; background: rgba(255, 255, 255, 0.06); display: none; } @media (min-width: 768px) { .split-divider-v { display: block; } } .split-divider-h { height: 1px; background: rgba(255, 255, 255, 0.06); } @media (min-width: 768px) { .split-divider-h { display: none; } } .app-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1rem; display: block; } .jl-label { color: #4ade80; } .fd-label { color: #818cf8; } .hero-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: white; line-height: 1.2; margin-bottom: 0.75rem; max-width: 20rem; } .hero-sub { color: rgba(255, 255, 255, 0.6); font-size: 1rem; margin-bottom: 2rem; max-width: 20rem; line-height: 1.6; } .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } @media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: center; } } /* ======================== App Store Badge ======================== */ .badge-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; transition: opacity 0.15s; cursor: pointer; } .badge-btn:hover { opacity: 0.9; } .badge-jl { background: #4ade80; color: #000; } .badge-fd { background: #818cf8; color: #fff; } .learn-more { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); transition: color 0.15s; padding: 0.625rem 0; } .learn-more:hover { color: white; } /* ======================== App Detail — Hero ======================== */ .app-hero { padding: 5rem 1.5rem; } .app-hero-jl { background: linear-gradient(160deg, #1c3028 0%, #0d1f15 100%); } .app-hero-fd { background: linear-gradient(160deg, #1a2540 0%, #0d1525 100%); } .app-hero-inner { max-width: 48rem; margin: 0 auto; text-align: center; } .app-hero-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; display: block; margin-bottom: 0.75rem; } .app-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: white; line-height: 1.15; margin-bottom: 1rem; } .app-hero-sub { color: rgba(255, 255, 255, 0.6); font-size: 1.125rem; max-width: 36rem; margin: 0 auto 2rem; line-height: 1.6; } .app-hero-badge { display: flex; justify-content: center; } /* ======================== Page Sections ======================== */ .section { padding: 4rem 1.5rem; max-width: 56rem; margin: 0 auto; } .section + .section { padding-top: 0; } .section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3rem 1.5rem; } .section-alt-inner { max-width: 40rem; margin: 0 auto; text-align: center; } .section-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; } /* ======================== Screenshot Gallery ======================== */ .screenshot-gallery { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .screenshot-slot { flex: 0 0 12rem; width: 12rem; border-radius: 1.25rem; border: 1px solid var(--border); scroll-snap-align: start; } div.screenshot-slot { aspect-ratio: 9 / 19.5; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); } img.screenshot-slot { height: auto; display: block; object-fit: cover; } /* ======================== Feature Grid ======================== */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } } .feature-card { padding: 1.25rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--surface); } .feature-icon { margin-bottom: 0.75rem; color: var(--accent); } .feature-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; } .feature-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } /* ======================== CTA Section ======================== */ .cta-section { padding: 4rem 1.5rem; text-align: center; } .cta-note { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.5rem; } /* ======================== Who It's For ======================== */ .who-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .who-text { line-height: 1.7; color: var(--text-secondary); } /* ======================== Support Page ======================== */ .support-wrap { max-width: 40rem; margin: 0 auto; padding: 4rem 1.5rem; } .page-title { font-size: 1.875rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; } .page-intro { color: var(--text-secondary); margin-bottom: 3rem; } .faq-section { margin-bottom: 3rem; } .faq-section-title { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 0.75rem; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 500; color: var(--text); gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--text-secondary); } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-answer { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); } .contact-section { margin-top: 1rem; } .contact-section-title { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .contact-sub { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .mailto-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--text); border: 1px solid var(--border); background: var(--surface); padding: 0.75rem 1.25rem; border-radius: 0.5rem; transition: border-color 0.15s; } .mailto-link:hover { border-color: var(--text-secondary); } /* ======================== Privacy Page ======================== */ .privacy-wrap { max-width: 40rem; margin: 0 auto; padding: 4rem 1.5rem; } .privacy-updated { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 3rem; } .privacy-intro { margin-bottom: 2.5rem; line-height: 1.7; color: var(--text-secondary); } .privacy-section { margin-bottom: 2.5rem; } .privacy-h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .privacy-body { display: flex; flex-direction: column; gap: 1rem; } .privacy-body p { font-size: 0.875rem; line-height: 1.7; color: var(--text-secondary); } .privacy-body strong { color: var(--text); } .privacy-link { color: var(--text); text-decoration: underline; }