/* Kymar marketing site — palette lifted from the app's Studio theme
so the web identity matches the iOS one (same bg, accent, type). */
:root {
/* Default = Studio (dark) palette. Mirrors `Palette.studio` from
the iOS app at /Users/vittorio/Kymar-Swift/Kymar/Core/Theme.swift. */
--bg: #0a0b0f;
--surface: #141620;
--surface-hi: #1d2030;
--text: #e9ecf1;
--text-dim: #8a90a3;
--accent: #c8ff4d;
--secondary: #5ab9ff;
--divider: #2a2e3e;
--danger: #ff6b6b;
--success: #7ee787;
/* Ambient-blob tint variables — pulled out so the Olive theme can
swap them to warmer hues that read on cream paper without
clashing with the forest-green accent. */
--blob-1: rgba(200, 255, 77, 0.55); /* accent glow */
--blob-2: rgba(90, 185, 255, 0.45); /* secondary glow */
/* Sticky-header translucent backdrop. Per-theme so the blur reads
against each palette's bg without going grey. */
--header-bg: rgba(10, 11, 15, 0.85);
/* Phone-frame "bezel" gradient (the thin border around the
screenshot). On Studio it's a dark-navy gradient; on Olive it
becomes a warm cream so the phone reads as a real device on
paper, not a misplaced dark cell. */
--phone-bezel: linear-gradient(180deg, #232735, #14161e);
--radius: 14px;
--radius-sm: 9px;
--max: 1080px;
}
/* Olive (light/day) theme — toggled by the .theme-toggle button in
the header, which sets `data-theme="olive"` on . Mirrors
`Palette.olive` from the iOS app: cream paper bg, forest-green
accent, near-black text. The blob tints shift to amber + soft
olive so they read on the lighter background. */
html[data-theme="olive"] {
--bg: #ece7d6;
--surface: #f4f0e2;
--surface-hi: #fbf8ed;
--text: #1c211a;
--text-dim: #5b5d4f;
--accent: #355d20;
--secondary: #2e5876;
--divider: #dfd9c5;
--danger: #9c3530;
--success: #1f6e5a;
--blob-1: rgba(53, 93, 32, 0.28);
--blob-2: rgba(46, 88, 118, 0.20);
--header-bg: rgba(236, 231, 214, 0.85);
--phone-bezel: linear-gradient(180deg, #b8a987, #8e7e5d);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Inter", system-ui, "Segoe UI", "Helvetica Neue",
Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Smooth fade between Studio + Olive when the theme toggle flips
the data-theme attribute. Otherwise the whole page snaps and
feels broken. */
transition: background-color 0.35s ease, color 0.35s ease;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container {
max-width: var(--max);
margin: 0 auto;
padding: 0 20px;
}
/* — Header — */
.site-header {
position: sticky; top: 0; z-index: 10;
background: var(--header-bg);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--divider);
transition: background 0.35s ease, border-color 0.35s ease;
}
.header-inner {
display: flex; align-items: center; gap: 16px;
min-height: 56px;
}
.brand {
display: flex; align-items: center; gap: 10px;
color: var(--text); font-weight: 700; font-size: 17px;
letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
width: 28px; height: 28px;
border-radius: 7px;
/* The brand mark is now the actual iOS app icon (favicon-32.png).
`object-fit: cover` keeps it from squishing if it's served at
non-square aspect. The subtle border + shadow give it the
"device-rendered" look it has on the iOS home screen. */
object-fit: cover;
border: 1px solid var(--divider);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
vertical-align: middle;
}
.site-nav {
margin-left: auto;
display: flex; gap: 20px;
}
.site-nav a {
color: var(--text-dim);
font-size: 14px;
font-weight: 500;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.lang-switch {
color: var(--text-dim);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border: 1px solid var(--divider);
border-radius: 6px;
}
.lang-switch:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
/* Day/night theme toggle pill — sits next to the lang switch in the
header. Same shape as `.lang-switch` so the two read as a pair
instead of competing widgets. The glyph (☾ / ☀) is swapped by
app.js when the user flips themes. */
.theme-toggle {
appearance: none;
background: transparent;
color: var(--text-dim);
font-family: inherit;
font-size: 14px;
line-height: 1;
border: 1px solid var(--divider);
border-radius: 6px;
width: 30px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
color: var(--text);
border-color: var(--text-dim);
}
/* — Hero — */
.hero {
padding: 80px 0 60px;
text-align: center;
/* Anchor for the two ambient blobs below + clip them so they
don't push the page width and trigger horizontal scroll. */
position: relative;
overflow: hidden;
}
/* Two slowly drifting blurred radial gradients ("blobs") behind the
hero. Static gradient meshes look flat; animated ones read as
"this page is alive". Period is intentionally long (45s+50s, out
of phase) so the motion is ambient rather than distracting.
Pointer-events: none keeps them inert under the CTA buttons.
Visibility-bumped (opacity inside `--blob-X`, blur 50px not 80px)
so they actually read against the bg instead of dissolving. */
.hero::before,
.hero::after {
content: '';
position: absolute;
width: 80vw; height: 80vw;
max-width: 820px; max-height: 820px;
border-radius: 50%;
filter: blur(50px);
pointer-events: none;
z-index: 0;
will-change: transform, opacity;
}
.hero::before {
top: -15vw; left: -20vw;
background: radial-gradient(circle at center, var(--blob-1) 0%, transparent 65%);
animation: blobDrift1 45s ease-in-out infinite;
}
.hero::after {
bottom: -20vw; right: -20vw;
background: radial-gradient(circle at center, var(--blob-2) 0%, transparent 65%);
animation: blobDrift2 50s ease-in-out infinite;
}
.hero .container { position: relative; z-index: 1; }
@keyframes blobDrift1 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
33% { transform: translate(8vw, 4vw) scale(1.1); opacity: 1; }
66% { transform: translate(-4vw, 6vw) scale(0.95); opacity: 0.75; }
}
@keyframes blobDrift2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
40% { transform: translate(-6vw, -4vw) scale(1.15); opacity: 0.95; }
75% { transform: translate(4vw, -8vw) scale(0.9); opacity: 0.6; }
}
.hero h1 {
font-size: clamp(36px, 6vw, 64px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 20px;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.hero-sub {
font-size: clamp(15px, 2vw, 18px);
color: var(--text-dim);
max-width: 580px;
margin: 0 auto 36px;
}
.hero-cta {
margin-bottom: 60px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.btn-store {
display: inline-flex; align-items: center;
padding: 14px 24px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
/* Springy hover — the cubic-bezier overshoots past 1.0 so the badge
springs forward and settles. Lift + accent-tinted shadow reads as
"press me" without going as far as a bubble animation. */
.btn-store:hover {
text-decoration: none;
transform: translateY(-6px) scale(1.03);
box-shadow: 0 12px 28px rgba(200, 255, 77, 0.18);
}
.btn-store:active {
transform: translateY(-2px) scale(0.99);
transition-duration: 0.12s;
}
.btn-store .badge-text { display: inline-block; text-align: left; }
/* Apple logo glyph that prefixes the App Store badge — matches the
visual structure of Apple's official "Download on the App Store"
artwork. Uses the Apple Logo character () which renders on iOS,
macOS and modern browsers with Apple Color Emoji or SF Pro fonts.
On systems without it the character is invisible (still works,
just less iconic). */
.btn-store .badge-glyph {
font-size: 22px;
margin-right: 10px;
line-height: 1;
display: inline-flex;
align-items: center;
}
.btn-store strong { font-size: 18px; font-weight: 800; }
/* Primary CTA — iOS, filled */
.btn-appstore { background: var(--text); color: var(--bg); }
/* Secondary CTA — Android announcement, outlined to read as "not yet" */
.btn-playstore {
background: transparent;
color: var(--text);
border: 1px solid var(--divider);
}
.btn-playstore strong { color: var(--accent, var(--text)); }
/* — Hero screenshot placeholder — */
.hero-screen {
display: flex; justify-content: center;
/* Perspective lives on the parent so the phone-frame can pivot
in 3D when the parallax JS sets rotateX/rotateY on it. 900px
reads as gentle parallax — go lower and the tilt feels like a
fish-eye, go higher and you stop seeing depth. */
perspective: 900px;
}
.phone-frame {
width: min(280px, 70vw);
padding: 10px;
background: var(--phone-bezel);
border-radius: 36px;
border: 1px solid var(--divider);
box-shadow: 0 30px 80px rgba(0,0,0,0.6),
0 4px 12px rgba(200, 255, 77, 0.08);
/* Smooth easing back to neutral when the mouse leaves the
hero-screen, otherwise the snap-back looks janky. */
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.phone-screen {
aspect-ratio: 9 / 19.5;
background: var(--bg);
border-radius: 28px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.screen-placeholder {
display: flex; flex-direction: column; align-items: center; gap: 12px;
color: var(--text-dim);
}
.placeholder-glyph {
font-size: 64px; color: var(--accent);
font-family: ui-rounded, sans-serif;
}
.placeholder-text {
font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; font-weight: 600;
}
/* When a phone-screen contains a real screenshot (instead of the
placeholder), make the ![]()
fill the rounded screen rect. */
.phone-screen img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
}
/* — Why Kymar — four-up pitch grid sitting between hero and the
screenshots marquee. Cards use the same surface/divider tokens as
the rest of the site, so flipping between Studio and Olive themes
inverts them along with everything else. The per-card visuals are
inline SVGs that style themselves via `var(--accent)` / `var(--text)`
etc., so the illustrations track the theme too — no asset swap
needed for day/night. */
.why-kymar {
padding: 96px 0 64px;
border-top: 1px solid var(--divider);
}
.why-kymar-inner {
display: flex;
flex-direction: column;
gap: 48px;
}
.why-kymar-head {
text-align: left;
max-width: 720px;
}
.why-kymar-pill {
/* Reuse the existing pill chip styling already used by other
section labels. Defined inline here in case .pill isn't already
a global utility. */
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--divider);
color: var(--text);
font-size: 11px; font-weight: 700;
letter-spacing: 1.6px;
font-family: ui-monospace, Menlo, "SF Mono", monospace;
}
.why-kymar-pill::before {
/* Small green dot to anchor the eye to the section start. */
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
}
.why-kymar-title {
font-size: clamp(36px, 5vw, 56px);
line-height: 1.04;
letter-spacing: -0.025em;
font-weight: 800;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
margin: 16px 0 16px;
color: var(--text);
}
.why-kymar-sub {
color: var(--text-dim);
font-size: 17px;
line-height: 1.55;
margin: 0;
max-width: 560px;
}
/* Two-column grid on desktop, single column on phones. CSS Grid
keeps every card the same height even when bodies wrap to
different line counts. */
.why-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 720px) {
.why-grid { grid-template-columns: 1fr; gap: 20px; }
.why-kymar { padding: 64px 0 40px; }
.why-kymar-title { font-size: clamp(28px, 7vw, 36px); }
}
.why-card {
background: var(--surface);
border: 1px solid var(--divider);
border-radius: 20px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.25s ease, border-color 0.25s ease,
box-shadow 0.25s ease;
}
.why-card:hover {
/* Mirrors the active-accent border the user saw on the second
card in the design — a subtle hover state instead of a static
"highlighted card" so all four feel reachable. */
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.why-card-visual {
background: var(--surface-hi);
border: 1px solid var(--divider);
border-radius: 14px;
padding: 18px 22px;
min-height: 152px;
display: flex;
align-items: center;
justify-content: center;
}
.why-svg {
width: 100%;
height: auto;
max-height: 130px;
display: block;
}
.why-card-label {
/* Mini pill identical in shape to .why-kymar-pill but smaller and
without the dot — keeps the 01/02/03/04 numbering visually
grouped without competing with the section pill above. */
align-self: flex-start;
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
background: var(--surface-hi);
border: 1px solid var(--divider);
color: var(--text-dim);
font-size: 10px; font-weight: 700;
letter-spacing: 1.4px;
font-family: ui-monospace, Menlo, "SF Mono", monospace;
margin-top: 4px;
}
.why-card-title {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 800;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
margin: 4px 0 2px;
color: var(--text);
}
.why-card-body {
color: var(--text-dim);
font-size: 14.5px;
line-height: 1.55;
margin: 0;
}
/* Compose-card chord pill mock. Five rectangles in a row, middle
one filled in accent green to read as "this is the chord currently
selected on the Compose pad". */
.why-chords {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.chord-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: 12px 14px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--divider);
color: var(--text);
font-size: 13px;
font-weight: 700;
font-family: ui-monospace, Menlo, "SF Mono", monospace;
}
.chord-pill.is-active {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
/* — Screens marquee (auto-scrolling carousel) — */
.screens {
padding: 80px 0 40px;
border-top: 1px solid var(--divider);
}
.screens h2 {
font-size: clamp(28px, 4vw, 40px);
text-align: center;
margin: 0 0 12px;
font-weight: 800;
letter-spacing: -0.02em;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.screens-sub {
text-align: center; color: var(--text-dim);
max-width: 560px; margin: 0 auto 36px;
font-size: 15px; line-height: 1.55;
}
/* Full-bleed marquee viewport — escapes the .container so the strip
appears edge-to-edge. The gradient mask fades the leftmost and
rightmost ~6% to transparent so cards flow in/out cleanly instead
of being chopped at the viewport edge. */
.marquee {
overflow: hidden;
padding: 16px 0 28px;
-webkit-mask-image: linear-gradient(to right,
transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* The track holds 15 figures (5 unique × 3 identical sets). The
loop translates by 1 set's worth per cycle (-33.3333% of 3
sets = exactly 1 set = 5 × (220 + 28) = 1240px).
Why 3 sets and not 2: with 2 sets the half-track stride is
1240px. At wrap-time the visible viewport shows track-x ∈
[1240, 1240 + viewport-width]. On any monitor wider than 1240
that overruns the right end of the track and leaves an empty
strip of bg visible — which on the next loop iteration "fills
back in" with cards, giving the user the unmistakable
"photos disappear and reappear" effect. Three sets push the
safe-viewport ceiling from 1240 to 2480, covering everything
short of an ultrawide. Each figure is 248px wide (220 phone-
frame + 28 right margin) — fixed via `flex: 0 0 220px` so the
stride is byte-precise regardless of figcaption text length. */
.marquee-track {
display: flex;
width: max-content;
animation: kymar-scroll 45s linear infinite;
will-change: transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
animation-play-state: paused;
}
@keyframes kymar-scroll {
from { transform: translateX(0); }
/* -33.3333% of the 3-set track = exactly 1 set worth = 1240px. */
to { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.marquee {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-left: 22px; padding-right: 22px;
}
.marquee figure { scroll-snap-align: center; }
}
.marquee figure {
margin: 0 28px 0 0; /* spacing between cards — applied even to
the last figure so the half-track stride
equals "5 cards + 5 gaps" (see kymar-scroll
keyframe comment above). */
/* Fixed width via flex-basis (NOT `flex: 0 0 auto`). With `auto`
the figure shrinks to its content's intrinsic width, which is
`max(phone-frame, figcaption)` — but figcaption text length
varies per card, so each figure's effective width could differ
by a few sub-pixels. After 10 figures those rounding errors
accumulate and the -50% wrap lands a couple of px off, which
reads visually as cards "popping in/out" at the loop point.
Pinning every figure to exactly 220px guarantees the half-track
stride is 5 × (220 + 28) = 1240px, byte-precise. */
flex: 0 0 220px;
width: 220px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.marquee .phone-frame {
width: 100%; /* fill the figure's 220px so the bezel
and figcaption share the same width. */
transition: transform .25s ease, box-shadow .25s ease;
}
.marquee .phone-frame:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 40px 90px rgba(0,0,0,0.7),
0 6px 24px rgba(200, 255, 77, 0.15);
}
.marquee figcaption {
font-size: 12px; color: var(--text-dim); text-align: center;
max-width: 220px; line-height: 1.45;
}
.marquee figcaption strong {
display: block; color: var(--text);
font-size: 14px; font-weight: 700; letter-spacing: 0.1px;
margin-bottom: 2px;
}
/* — Modules section ("Inside Kymar — Eight modules. One routine.") —
Matches the design comp exactly: left-aligned heading at display
scale, 4×2 grid of square-ish tiles, M# tag top-right, optional
"PRO · MICROTONAL" badge in the bottom-right corner.
The padding-bottom on each card is intentionally generous so the
badge has its own real estate and doesn't crowd the description. */
.modules {
padding: 90px 0 100px;
border-top: 1px solid var(--divider);
}
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--divider);
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
background: var(--surface);
margin-bottom: 26px;
}
.section-label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
}
.modules-h {
font-size: clamp(44px, 7vw, 80px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.02;
margin: 0 0 26px;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.section-sub {
margin: 0 0 56px;
font-size: clamp(15px, 1.4vw, 17px);
color: var(--text-dim);
max-width: 560px;
line-height: 1.5;
}
.module-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.module-card {
position: relative;
background: var(--surface);
border: 1px solid var(--divider);
border-radius: 18px;
padding: 22px 22px 22px;
min-height: 200px;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, border-color 0.25s ease,
box-shadow 0.25s ease;
}
.module-card:hover {
/* Punchier than .why-card:hover because module cards are taller
(~200pt min vs ~150pt) — same -2pt lift looked muted on the bigger
surface area. Same direction of treatment (accent border + lift +
soft shadow), just dialled to compensate for card scale so the
hover reads from the same distance as the Why-Kymar cards. */
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
.module-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 30px;
}
.module-icon {
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.module-icon svg { width: 30px; height: 30px; stroke-width: 2; }
.module-tag {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--text-dim);
}
.module-card h3 {
margin: 0 0 14px;
font-size: 25px;
font-weight: 800;
letter-spacing: -0.02em;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
color: var(--text);
}
.module-card p {
margin: 0;
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.55;
}
@media (max-width: 980px) {
.module-grid { grid-template-columns: repeat(2, 1fr); }
.modules-h { font-size: clamp(36px, 7vw, 56px); }
}
@media (max-width: 540px) {
.module-grid { grid-template-columns: 1fr; }
.modules { padding: 70px 0 80px; }
.module-card { min-height: 220px; padding: 24px 22px 60px; }
}
.pro-tag {
display: inline-block;
background: var(--accent); color: var(--bg);
font-size: 9px; font-weight: 800;
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: 4px;
vertical-align: 2px;
margin-left: 4px;
}
/* — Pricing — */
.pricing { padding: 80px 0; border-top: 1px solid var(--divider); }
.pricing h2 {
font-size: clamp(28px, 4vw, 40px);
text-align: center;
margin: 0 0 50px;
font-weight: 800;
letter-spacing: -0.02em;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
max-width: 720px;
margin: 0 auto;
}
.plan {
background: var(--surface);
border: 1px solid var(--divider);
border-radius: var(--radius);
padding: 28px;
}
.plan-featured {
border-color: var(--accent);
background: linear-gradient(180deg, var(--surface) 0%, rgba(200, 255, 77, 0.04) 100%);
}
.plan h3 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 800;
}
.plan-price {
margin: 0 0 20px;
font-size: 28px;
font-weight: 800;
color: var(--accent);
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.plan ul {
list-style: none; padding: 0; margin: 0 0 16px;
}
.plan li {
padding: 8px 0;
border-bottom: 1px solid var(--divider);
font-size: 14px;
color: var(--text-dim);
}
.plan li:last-child { border-bottom: none; }
.plan-note {
margin: 16px 0 0;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.04em;
}
/* Inline unit ("/mo") next to the headline monthly price. Smaller +
dimmer so the $2.99 dominates and the "/mo" reads as a footnote. */
.plan-price-unit {
font-size: 16px;
font-weight: 600;
color: var(--text-dim);
font-family: inherit;
}
/* Yearly + Lifetime line directly under the monthly price — sells
the lifetime tier without bumping it into a separate card. */
.plan-price-alt {
margin: -10px 0 18px;
font-size: 13px;
color: var(--text-dim);
}
.plan-price-alt strong {
color: var(--text);
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
/* Reuses the hero-cta layout but sits at the bottom of the pricing
section so the user has a download button in reach after reading
features + pricing — without scrolling all the way back to the
hero. Slight top margin separates it from the plan grid. */
.pricing-cta {
margin-top: 36px;
justify-content: center;
}
/* — Footer — */
.site-footer {
padding: 50px 0 30px;
border-top: 1px solid var(--divider);
margin-top: 40px;
}
.footer-inner {
display: flex; flex-direction: column; gap: 20px;
align-items: center;
}
.footer-brand {
display: flex; align-items: center; gap: 10px;
color: var(--text); font-weight: 700;
}
.footer-nav {
display: flex; flex-wrap: wrap; gap: 18px;
justify-content: center;
}
.footer-nav a {
color: var(--text-dim);
font-size: 13px;
}
.footer-nav a:hover { color: var(--text); text-decoration: none; }
.copyright {
font-size: 11px;
color: var(--text-dim);
opacity: 0.7;
margin: 0;
}
/* — 404 — */
.center-page {
min-height: 70vh;
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
padding: 60px 20px;
}
.center-page h1 {
font-size: clamp(40px, 8vw, 80px);
margin: 0 0 12px;
font-weight: 800;
color: var(--accent);
font-family: ui-rounded, sans-serif;
}
.center-page p { color: var(--text-dim); margin: 0 0 24px; }
.center-page a.btn-home {
display: inline-block;
padding: 12px 22px;
background: var(--accent); color: var(--bg);
border-radius: 10px;
font-weight: 700;
font-size: 14px;
}
.center-page a.btn-home:hover { text-decoration: none; transform: translateY(-1px); }
/* — Small screens — */
@media (max-width: 640px) {
.site-nav { gap: 14px; }
.site-nav a { font-size: 13px; }
.hero { padding: 50px 0 40px; }
.features, .pricing { padding: 60px 0; }
}
/* — FAQ accordion (native /) — */
.faq {
padding: 50px 0 80px;
}
.faq .container { max-width: 760px; }
.faq h2 {
text-align: center;
font-size: clamp(28px, 4vw, 38px);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 30px;
font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
.faq-list {
display: grid;
gap: 10px;
}
.faq details {
background: var(--surface);
border: 1px solid var(--divider);
border-radius: 12px;
padding: 4px 18px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.faq details[open] {
background: var(--surface-hi);
border-color: var(--accent);
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 14px 0;
font-weight: 600;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
/* Trailing chevron — rotates 180° when the details is open. Uses a
CSS-rendered triangle so we don't need an SVG asset. */
.faq summary::after {
content: '';
width: 8px; height: 8px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-right: 4px;
}
.faq details[open] summary::after {
transform: rotate(-135deg);
border-color: var(--accent);
}
.faq details > p {
margin: 0 0 14px;
padding-top: 4px;
color: var(--text-dim);
font-size: 14px;
line-height: 1.6;
border-top: 1px solid var(--divider);
padding-top: 14px;
}
.faq details > p a { color: var(--accent); }
/* Respect the user's reduced-motion preference: freeze the ambient
blobs and the phone-tilt easing. Important for vestibular-
sensitive users. */
@media (prefers-reduced-motion: reduce) {
.hero::before, .hero::after { animation: none; }
.phone-frame, .faq details, .faq summary::after { transition: none; }
}
/* ---------- Scroll reveal ----------
Blocks fade + rise into place as they scroll into view instead of all
appearing at once. The `.reveal` class is added by app.js to below-the-
fold targets only (so the deferred init can't cause a flash); `.is-visible`
is toggled on entry by an IntersectionObserver. Honours reduced-motion
(app.js also skips the whole thing there, belt and braces). */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
transform .7s cubic-bezier(.16, 1, .3, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}