default layout is replaced by the landing sections. */ .landing-body main { display: none; } /* ==================== Hero ==================== */ /* Hero fills the visible viewport under the sticky nav so the fold lands exactly where the hero ends. Uses 100svh (small viewport height) where supported to avoid iOS Safari's URL-bar-collapse jump. The nav is ~56px tall; subtract via calc so the hero's bottom edge sits on the fold line. */ .landing-hero { background: var(--chartreuse); color: var(--ink); /* Extend the hero up behind the fixed nav so the chartreuse covers the 56px body-padding strip that would otherwise show body bg (bone). Negative top margin pulls the box up by the nav height; matching extra padding-top keeps the inner content in the same place it was before. Visual result: one continuous chartreuse surface from the top of the viewport to the fold — no bone band peeking through behind the nav. */ margin-top: calc(var(--nav-h) * -1); padding: calc(clamp(40px, 6vw, 80px) + var(--nav-h)) var(--rail-x) clamp(40px, 6vw, 80px); /* Fill the viewport to the fold. Nav height is already baked into the negative margin + padding above, so the box stretches from y=0 to y=100svh instead of starting below the nav. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .landing-hero-inner { max-width: var(--rail); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 32px; } .landing-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin: 0; padding: 8px 12px; background: var(--ink); color: var(--chartreuse); border-radius: 999px; align-self: flex-start; } .landing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chartreuse); } .landing-headline { font-size: clamp(2.25rem, 8vw, 5.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; margin: 0; color: var(--ink); max-width: 18ch; /* Allow the long words in the headline to wrap where needed on ultra-narrow viewports. */ overflow-wrap: break-word; } .landing-subhead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55; color: var(--ink); max-width: 56ch; margin: 0; opacity: 0.78; } .landing-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; } /* Tier-aware primary CTA. All three variants are rendered; the html class (seeded pre-paint by Base.astro's inline script) shows exactly one. Default-hidden so no variant flashes in before the class resolves — the head script runs synchronously during parse, so the class is always set by the time these rules apply. */ .hero-cta-guest, .hero-cta-free, .hero-cta-pro { display: none; } html.is-guest .hero-cta-guest, html.is-free .hero-cta-free, html.is-pro .hero-cta-pro { display: inline-flex; } /* Pro tier has two primary-CTA variants. Default is "Download plugin" — only flips to "Start signing" once the user has actually grabbed the installer (auth.js sets html.has-plugin after a successful /api/plugin-download). Both rules override the .hero-cta-pro display:inline-flex above so only one ever shows. */ html.is-pro .hero-cta-pro-installed { display: none; } html.is-pro.has-plugin .hero-cta-pro-need-install { display: none; } html.is-pro.has-plugin .hero-cta-pro-installed { display: inline-flex; } .landing-hero-ctas .primary-button, .landing-hero-ctas .secondary-button { min-height: 48px; padding-inline: 22px; } @media (max-width: 480px) { .landing-hero-ctas { flex-direction: column; width: 100%; } .landing-hero-ctas .primary-button, .landing-hero-ctas .secondary-button { width: 100%; } } /* On chartreuse the primary button inverts — ink bg, so it still reads as the strongest affordance. */ .landing-hero-ctas .primary-button { background: var(--ink); color: var(--chartreuse); } .landing-hero-ctas .primary-button:hover { background: #1a1a1a; color: var(--chartreuse); } .landing-hero-ctas .secondary-button { border-color: var(--ink); color: var(--ink); } .landing-hero-ctas .secondary-button:hover { background: rgba(10, 10, 10, 0.08); } /* Optional waveform decoration at the bottom of the hero. The SVG inherits currentColor → ink stroke on chartreuse. */ .landing-hero-wave { width: 100%; max-width: 640px; margin: 16px 0 0; color: var(--ink); } .landing-hero-wave svg { width: 100%; height: auto; display: block; } /* ==================== Feature grid ==================== */ .landing-section { padding: clamp(64px, 10vw, 128px) var(--rail-x); max-width: calc(var(--rail) + 2 * var(--rail-x)); margin: 0 auto; } .landing-section-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px; max-width: 880px; } @media (max-width: 720px) { .landing-section-head { gap: 16px; } } .landing-section-label { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); font-size: 0.72rem; margin: 0 0 12px; } .landing-section-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--ink); } .landing-section-lede { color: var(--fg-dim); font-size: 1.05rem; line-height: 1.55; margin: 0; max-width: 48ch; } .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .landing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color 120ms ease, transform 120ms ease; } .landing-card:hover { border-color: var(--ink); } .landing-card-num { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); margin: 0; } .landing-card-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .landing-card-body { color: var(--fg-dim); font-size: 0.92rem; line-height: 1.55; margin: 0; } /* ==================== How-it-works strip (ink section) ==================== */ .landing-how { background: var(--ink); color: var(--bone); } .landing-how .landing-section-title { color: var(--bone); } .landing-how .landing-section-label { color: rgba(240, 238, 233, 0.55); } .landing-how .landing-section-lede { color: rgba(240, 238, 233, 0.72); } .landing-how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; } @media (max-width: 820px) { .landing-how-steps { grid-template-columns: 1fr; } } .landing-how-step { padding: 28px; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; } .landing-how-step-num { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chartreuse); font-size: 0.7rem; margin: 0; } .landing-how-step-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); margin: 0; } .landing-how-step-body { color: rgba(240, 238, 233, 0.72); font-size: 0.92rem; line-height: 1.55; margin: 0; } /* ==================== CTA ==================== */ .landing-cta { padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 48px); text-align: center; background: var(--bone); } .landing-cta-inner { max-width: 640px; margin: 0 auto; } .landing-cta-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0 0 16px; } .landing-cta-body { font-size: 1.05rem; color: var(--fg-dim); margin: 0 0 32px; } .landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .landing-cta-plugin { margin: 8px 0 0; color: var(--fg-dim); font-size: 0.88rem; } .landing-cta-plugin-link { appearance: none; background: transparent; border: none; color: var(--ink); cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 600; padding: 0 4px; text-decoration: underline; } .landing-cta-plugin-link:hover { color: var(--ink); } .landing-cta-plugin-note { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); } /* ==================== Footer ==================== */ .landing-footer { padding: 40px clamp(24px, 5vw, 48px); text-align: center; } .landing-footer p { margin: 0; color: var(--fg-dim); font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; } /* ==================== Responsive ==================== */ @media (max-width: 820px) { .landing-section-head { gap: 12px; margin-bottom: 40px; } .landing-how-steps { grid-template-columns: 1fr; } } @media (max-width: 640px) { .landing-grid { grid-template-columns: 1fr; } .landing-card { padding: 22px; } } @media (max-width: 480px) { .landing-eyebrow { font-size: 0.64rem; padding: 6px 10px; } .landing-subhead { font-size: 0.95rem; } .landing-hero { /* Account for the mobile nav bar's shorter height. */ padding: clamp(28px, 5vw, 64px) 20px; } .landing-section { padding: clamp(48px, 8vw, 96px) 20px; } .landing-section-title { font-size: clamp(1.5rem, 5vw, 2rem); } .landing-cta { padding: clamp(64px, 10vw, 120px) 20px; } .landing-cta-title { font-size: clamp(1.75rem, 8vw, 2.5rem); } } /* ================================================================== NEW PRIMITIVES (homepage + /plugin redesign) Added as part of the Apple-polish content redesign. Everything below is reusable across pages, not scoped to /. ================================================================== */ /* ----- §5 Plugin block (ink) -------------------------------------- The homepage plugin section lives inside the .landing-how ink shell but composes multiple inner blocks (landing-split, landing-grid, landing-library-preview, CTA row). Each block needs its colours flipped for ink context + sensible spacing so the section reads as one coherent pitch, not a stack of unrelated rows. ------------------------------------------------------------------ */ /* Copy paragraphs inside the intro split, ink variant. */ .landing-how .landing-split-copy p { color: rgba(240, 238, 233, 0.72); } /* Art-placeholder + library preview, ink variants. */ .landing-how .art-placeholder { color: rgba(240, 238, 233, 0.55); border-color: rgba(240, 238, 233, 0.24); } .landing-how .landing-library-preview { background: #141414; border-color: rgba(255, 255, 255, 0.08); } /* Vertical rhythm between the inner blocks of the plugin section — split, cards, library preview, tail, CTA. */ .landing-how .landing-split { margin-top: 56px; } .landing-how .landing-plugin-cards { margin-top: 56px; } .landing-how .landing-plugin-library { margin-top: 56px; } .landing-how .landing-plugin-tail { margin: 32px auto 0; color: rgba(240, 238, 233, 0.72); font-size: 1rem; line-height: 1.6; max-width: 640px; text-align: center; } .landing-how .landing-plugin-tail a { color: var(--chartreuse); text-decoration: underline; text-underline-offset: 3px; } .landing-how .landing-plugin-cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .landing-how .landing-plugin-cta-row .accent-button { min-height: 48px; padding-inline: 28px; } /* ----- .landing-split --------------------------------------------- Two-column text/image section, 1fr:1fr. Stacks at 820px. Used on homepage §1 (Passive signing) and reusable on any feature row that pairs copy with a static visual. ------------------------------------------------------------------ */ .landing-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .landing-split-copy h2 { margin: 0 0 16px; } .landing-split-copy p { margin: 0 0 14px; color: var(--fg-dim); line-height: 1.6; } .landing-split-copy p:last-child { margin-bottom: 0; } .landing-split-visual { position: relative; aspect-ratio: 16 / 10; width: 100%; } @media (max-width: 820px) { .landing-split { grid-template-columns: 1fr; gap: 32px; } .landing-split-visual { order: -1; } } /* ----- .landing-library-preview ----------------------------------- Single 16:9 framed card sitting below a section-head. Used on homepage §2 (The library). ------------------------------------------------------------------ */ .landing-library-preview { width: 100%; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; } /* ----- .landing-accent -------------------------------------------- Full-bleed chartreuse breather section. Used once on homepage §4 (per-recipient). Centred inner content, 720px max. ------------------------------------------------------------------ */ .landing-accent { background: var(--chartreuse); color: var(--ink); padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 48px); } .landing-accent-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .landing-accent-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(10, 10, 10, 0.72); margin: 0; } /* Solid-ink PRO pill that sits ABOVE the eyebrow mono label on the chartreuse per-recipient section. Stacked vertically — pill on its own row, eyebrow directly below. Tight 8px gap handled via negative margin so the section's larger accent-inner gap doesn't push them apart. */ .landing-accent-pro-pill { display: inline-flex; align-items: center; align-self: center; padding: 5px 11px; background: var(--ink); color: var(--chartreuse); border-radius: 999px; font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.12em; } .landing-accent-pro-pill + .landing-accent-eyebrow { margin-top: -16px; } .landing-accent-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: 20ch; } .landing-accent-sub { font-size: 1.05rem; line-height: 1.55; margin: 0; max-width: 52ch; color: var(--ink); opacity: 0.78; } .landing-accent-visual { width: 100%; max-width: 720px; aspect-ratio: 24 / 10; margin: 8px 0 0; } /* ----- .landing-spec-row ------------------------------------------ Horizontal Geist-Mono key/value strip. No cards, no borders — just typographic restraint. Wraps to a two-up grid at 720px. Used on homepage §7 (Built for the DAW). ------------------------------------------------------------------ */ .landing-spec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 32px; padding-top: 8px; border-top: 1px solid var(--border); } .landing-spec-row > div { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; } .landing-spec-row dt, .landing-spec-row-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); margin: 0; } .landing-spec-row dd, .landing-spec-row-value { font-size: 0.98rem; font-weight: 500; color: var(--ink); margin: 0; line-height: 1.45; } /* ----- .plug-feature-split ---------------------------------------- 60/40 two-column row. Text left, visual right. Used on plugin §4 (Collaborators). General enough to reuse on homepage. ------------------------------------------------------------------ */ .plug-feature-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: center; } @media (max-width: 820px) { .plug-feature-split { grid-template-columns: 1fr; gap: 28px; } } /* ----- .plug-daw-card --------------------------------------------- Compact DAW coverage card with status pill. Used on plugin §5. ------------------------------------------------------------------ */ .plug-daw-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; } .plug-daw-card-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .plug-daw-card-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .plug-daw-pill { font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; } .plug-daw-pill--harness { background: var(--chartreuse); color: var(--ink); } .plug-daw-pill--tested { background: transparent; color: rgba(240, 238, 233, 0.72); border: 1px solid rgba(240, 238, 233, 0.24); } .plug-daw-card-formats { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(240, 238, 233, 0.6); margin: 0; } /* ----- .plug-meta-list -------------------------------------------- Two-column spec list (mono field name / prose description) with 1px row separators. Used on plugin §8 (What's captured). ------------------------------------------------------------------ */ .plug-meta-list { display: grid; grid-template-columns: minmax(180px, max-content) 1fr; column-gap: 32px; row-gap: 0; border-top: 1px solid rgba(240, 238, 233, 0.12); margin: 0; padding: 0; } .plug-meta-list > dt, .plug-meta-list > dd { padding: 14px 0; border-bottom: 1px solid rgba(240, 238, 233, 0.08); margin: 0; } .plug-meta-list > dt { font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem; color: var(--chartreuse); letter-spacing: 0; text-transform: none; } .plug-meta-list > dd { color: rgba(240, 238, 233, 0.82); font-size: 0.94rem; line-height: 1.5; } @media (max-width: 640px) { .plug-meta-list { grid-template-columns: 1fr; } .plug-meta-list > dt { border-bottom: none; padding-bottom: 2px; } .plug-meta-list > dd { padding-top: 4px; } } /* ----- .landing-how-steps--four ----------------------------------- 4-column variant of the ink-section step grid. Used on plugin §3. ------------------------------------------------------------------ */ .landing-how-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .landing-how-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .landing-how-steps--four { grid-template-columns: 1fr; } } /* ----- .landing-grid--on-ink -------------------------------------- Flips .landing-card surface + text for use inside ink sections. Applied on plugin §2, §6, §9. ------------------------------------------------------------------ */ .landing-grid--on-ink .landing-card { background: #141414; border-color: rgba(255, 255, 255, 0.08); } .landing-grid--on-ink .landing-card:hover { border-color: rgba(212, 224, 48, 0.6); } .landing-grid--on-ink .landing-card-num { color: var(--chartreuse); } .landing-grid--on-ink .landing-card-title { color: var(--bone); } .landing-grid--on-ink .landing-card-body { color: rgba(240, 238, 233, 0.72); } /* Re-tint section heads + spec rows when they live inside an ink-themed plugin section wrapper. */ .plugin-ink-body .landing-section-title { color: var(--bone); } .plugin-ink-body .landing-section-label { color: rgba(240, 238, 233, 0.55); } .plugin-ink-body .landing-section-lede { color: rgba(240, 238, 233, 0.72); } .plugin-ink-body .landing-split-copy p { color: rgba(240, 238, 233, 0.72); } .plugin-ink-body .landing-split-copy p code { background: rgba(240, 238, 233, 0.12); color: var(--bone); } .plugin-ink-body .landing-spec-row { border-top-color: rgba(240, 238, 233, 0.12); } .plugin-ink-body .landing-spec-row-label, .plugin-ink-body .landing-spec-row dt { color: rgba(240, 238, 233, 0.55); } .plugin-ink-body .landing-spec-row-value, .plugin-ink-body .landing-spec-row dd { color: var(--bone); } /* ----- .art-placeholder ------------------------------------------- Dashed-border caption box to hold the aspect-ratio slot until real SVG / screenshot imagery replaces it. Every visual on the new pages wraps one of these so layouts render correctly and we have a grep-able slot marker. ------------------------------------------------------------------ */ .art-placeholder { width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); box-sizing: border-box; } .plugin-ink-body .art-placeholder { color: rgba(240, 238, 233, 0.55); border-color: rgba(240, 238, 233, 0.24); } /* ================================================================== Plugin page ink body theme ================================================================== Applied at on /plugin only. The hero block (below) is chartreuse; everything else inherits the ink base. Nav stays chartreuse because Nav.astro sets its own background. Footer picks up the dark variant via body.footer-dark. ================================================================== */ .plugin-ink-body { background: var(--ink); color: var(--bone); } .plugin-ink-body main { background: transparent; } .plugin-ink-body .plug-section, .plugin-ink-body .plug-section-wrap { background: var(--ink); color: var(--bone); padding: clamp(64px, 10vw, 128px) var(--rail-x); } .plugin-ink-body .plug-section-inner { max-width: var(--rail); margin: 0 auto; } /* Ink-theme final CTA (plugin §11 reuses .landing-cta structure) */ .plug-cta-ink.landing-cta { background: var(--ink); } .plug-cta-ink .landing-cta-title { color: var(--bone); } .plug-cta-ink .landing-cta-body { color: rgba(240, 238, 233, 0.72); } .plug-cta-ink .landing-cta-plugin { color: rgba(240, 238, 233, 0.72); } .plug-cta-ink .landing-cta-plugin-link, .plug-cta-ink .landing-cta-plugin-link:hover { color: var(--bone); } .plug-cta-ink .landing-cta-plugin-note { color: rgba(240, 238, 233, 0.55); }