/* ---- Theme tokens --------------------------------------------------------- Defaults are light. Dark values apply when either the OS prefers dark (and the user hasn't chosen) or [data-theme="dark"] is set on . The explicit data-theme attribute always wins over the media query. */ :root { --bg: #ffffff; --surface: #f9fafb; --card: #ffffff; --fg: #111827; --muted: #5b6472; --accent: #f48638; /* app "Rust" accent (light) */ --accent-strong: #d96c1f; --border: #e6e8eb; --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(244, 134, 56, .14), transparent 70%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1220; --surface: #111827; --card: #131b2b; --fg: #f3f4f6; --muted: #9aa4b2; --accent: #f9974f; /* app "Rust" accent, brightened for dark */ --accent-strong: #f48638; --border: #26303f; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(244, 134, 56, .18), transparent 70%); } } :root[data-theme="dark"] { --bg: #0b1220; --surface: #111827; --card: #131b2b; --fg: #f3f4f6; --muted: #9aa4b2; --accent: #f9974f; --accent-strong: #f48638; --border: #26303f; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(244, 134, 56, .18), transparent 70%); } /* ---- Base ----------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; } .wrap { max-width: 960px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } a { color: var(--accent-strong); } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; } /* ---- Top bar -------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none; } .brand img { border-radius: 7px; display: block; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; display: inline-grid; place-items: center; transition: border-color .15s ease, background .15s ease; } .theme-toggle:hover { border-color: var(--accent); } /* Sun in light, moon in dark — drawn with a single element. */ .theme-toggle__icon { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 -11px 0 -8px var(--accent), 0 11px 0 -8px var(--accent), -11px 0 0 -8px var(--accent), 11px 0 0 -8px var(--accent), -8px -8px 0 -8px var(--accent), 8px 8px 0 -8px var(--accent), -8px 8px 0 -8px var(--accent), 8px -8px 0 -8px var(--accent); transition: box-shadow .2s ease; } :root[data-theme="dark"] .theme-toggle__icon, :root:not([data-theme="light"]) .theme-toggle__icon { background: transparent; box-shadow: inset -6px -3px 0 0 var(--accent); transform: rotate(-25deg); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle__icon { background: var(--accent); box-shadow: 0 -11px 0 -8px var(--accent), 0 11px 0 -8px var(--accent), -11px 0 0 -8px var(--accent), 11px 0 0 -8px var(--accent), -8px -8px 0 -8px var(--accent), 8px 8px 0 -8px var(--accent), -8px 8px 0 -8px var(--accent), 8px -8px 0 -8px var(--accent); transform: none; } } /* ---- Hero ----------------------------------------------------------------- */ .hero { text-align: center; padding-top: 3rem; padding-bottom: 3.5rem; background: var(--hero-glow); } .hero__icon { border-radius: 26px; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .hero__title { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; margin: 0 0 .35rem; } .hero__tagline { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; color: var(--accent-strong); margin: 0 0 1.25rem; } .hero__lead { max-width: 40rem; margin: 0 auto 1.75rem; color: var(--muted); font-size: 1.075rem; } .hero__cta { margin-bottom: 1rem; } .hero__note { color: var(--muted); font-size: .9rem; margin: 0; } /* ---- Official Apple "Download on the App Store" badge --------------------- */ .appstore-badge { display: inline-block; line-height: 0; transition: transform .15s ease, opacity .15s ease; } .appstore-badge:hover { transform: translateY(-1px); opacity: .9; } .appstore-badge__img { height: 52px; width: auto; } /* Black badge on light backgrounds, white badge on dark. Mirrors the theme logic below: explicit data-theme wins; otherwise fall back to the OS. */ .appstore-badge__img--dark { display: none; } .appstore-badge__img--light { display: inline-block; } :root[data-theme="dark"] .appstore-badge__img--light { display: none; } :root[data-theme="dark"] .appstore-badge__img--dark { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appstore-badge__img--light { display: none; } :root:not([data-theme="light"]) .appstore-badge__img--dark { display: inline-block; } } /* ---- Sections ------------------------------------------------------------- */ .section { padding-top: 3.5rem; padding-bottom: 1rem; } .section__title { text-align: center; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; margin: 0 0 2rem; } /* ---- Feature grid --------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.4rem; box-shadow: var(--shadow); } .card__icon { font-size: 1.6rem; line-height: 1; margin-bottom: .75rem; } .card h3 { font-size: 1.15rem; margin: 0 0 .5rem; } .card p { margin: 0; color: var(--muted); font-size: .98rem; } /* ---- Pricing -------------------------------------------------------------- */ .pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 760px; margin: 0 auto; } .plan { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem 1.6rem; box-shadow: var(--shadow); } .plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .plan__flag { position: absolute; top: -.7rem; left: 1.6rem; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; } .plan__name { font-size: 1.25rem; margin: 0 0 .25rem; } .plan__price { font-size: 1.8rem; font-weight: 800; margin: 0; } .plan__desc { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; } .plan__list { list-style: none; margin: 0; padding: 0; } .plan__list li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: .98rem; } .plan__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .3rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* ---- Closing CTA ---------------------------------------------------------- */ .cta { text-align: center; padding-top: 4rem; padding-bottom: 4rem; } .cta h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 .5rem; } .cta p { color: var(--muted); margin: 0 0 1.5rem; } /* ---- Footer --------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); padding-top: 2rem; padding-bottom: 3rem; text-align: center; } .footer__links { margin-bottom: .75rem; } .footer__links a { color: var(--muted); text-decoration: none; margin: 0 .75rem; font-size: .95rem; } .footer__links a:hover { color: var(--accent-strong); } .footer__copy { color: var(--muted); font-size: .85rem; margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }