/* ============================================================================
Scoreflection — Marketing Components (LANDING PAGE ONLY)
----------------------------------------------------------------------------
Navigation, hero, listening-engine explainer, instrument-family cards, music
flourishes, pricing, testimonial, CTA banner, footer. Specific to the
marketing site — the future web app does NOT load this file.
Requires: tokens.css + base.css (load them BEFORE this file).
============================================================================ */
/* ---------- Navigation --------------------------------------------------- */
.sf-nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in oklch, var(--sf-bg) 75%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--sf-outline-variant);
}
.sf-nav__inner {
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.sf-nav__brand {
display: inline-flex; align-items: center; gap: var(--sf-s-3);
font-family: var(--sf-font-display);
font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
color: var(--sf-on-surface);
}
.sf-nav__brand:hover { color: var(--sf-on-surface); }
.sf-nav__links { display: none; gap: var(--sf-s-7); align-items: center; }
.sf-nav__links a {
color: var(--sf-on-surface-variant);
font-weight: 500; font-size: 15px;
position: relative; padding: 6px 0;
}
.sf-nav__links a:hover { color: var(--sf-on-surface); }
.sf-nav__links a.is-active { color: var(--sf-primary); }
.sf-nav__cta { display: flex; gap: var(--sf-s-3); align-items: center; }
/* Language switcher (EN | DE) */
.sf-lang {
display: inline-flex; align-items: center;
padding: 2px; gap: 2px;
border: 1px solid var(--sf-outline-variant);
border-radius: var(--sf-r-full);
}
.sf-lang__opt {
font: 600 12px/1 var(--sf-font-ui); letter-spacing: 0.04em;
padding: 6px 10px; border-radius: var(--sf-r-full);
color: var(--sf-on-surface-variant);
}
.sf-lang__opt:hover { color: var(--sf-on-surface); }
.sf-lang__opt.is-active {
color: var(--sf-on-primary); background: var(--sf-primary);
}
@media (min-width: 880px) {
.sf-nav__links { display: flex; }
}
/* On a narrow phone the brand + language switcher + toggle + button don't fit on
one row: the nav grew wider than the viewport and pushed the whole document
sideways. Shrink the wordmark and drop the nav button — the hero repeats the
same call to action a few hundred pixels below it. */
@media (max-width: 620px) {
.sf-nav__brand { font-size: 19px; gap: var(--sf-s-2); }
.sf-nav__cta > .sf-btn:last-child { display: none; }
}
/* Brand mark — the Clefbot badge, assets/clefbot-mark.svg.
It's an ![]()
, not a lettermark: the antenna, ears and face are all part of
the artwork, so this needs no pseudo-elements. The 10px radius matches the
rounded square drawn inside the SVG, so the shadow hugs the corners. */
.sf-mark {
width: 36px; height: 36px;
flex: none;
border-radius: 10px;
box-shadow: 0 2px 10px color-mix(in oklch, var(--sf-primary) 32%, transparent);
}
/* ---------- Hero --------------------------------------------------------- */
.sf-hero {
position: relative; overflow: hidden;
padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 120px);
}
.sf-hero__grid {
display: grid; gap: clamp(40px, 6vw, 80px);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 980px) {
.sf-hero__grid { grid-template-columns: 1.15fr 1fr; }
}
.sf-hero__title { font-size: var(--sf-display-l); }
.sf-hero__sub {
font-size: clamp(17px, 1.4vw, 20px);
color: var(--sf-on-surface-variant);
max-width: 52ch; margin-top: var(--sf-s-5);
text-wrap: pretty;
}
.sf-hero__cta { display: flex; gap: var(--sf-s-3); margin-top: var(--sf-s-8); flex-wrap: wrap; }
.sf-hero__meta {
display: flex; gap: var(--sf-s-7); margin-top: var(--sf-s-9);
flex-wrap: wrap;
}
.sf-hero__meta-item { display: flex; flex-direction: column; gap: 2px; }
.sf-hero__meta-num {
font-family: var(--sf-font-display);
font-size: 36px; font-weight: 500; letter-spacing: -0.025em;
color: var(--sf-on-surface);
}
/* For a stat whose "number" is actually a phrase. At 36px a few words swamp the
real figures beside them and wrap the row onto two lines. */
.sf-hero__meta-num--word { font-size: 24px; letter-spacing: -0.01em; }
.sf-hero__meta-label {
font-size: var(--sf-label-m); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--sf-on-surface-variant);
font-weight: 600;
}
/* Hero stage — three real screenshots fanned out, the way the pitch deck does it:
the session result front and centre, the library and the score tucked behind.
These are photos of the actual app, not a mockup; see assets/screenshots/. */
.sf-phones {
position: relative;
aspect-ratio: 1 / 1;
display: grid; place-items: center;
isolation: isolate;
}
/* Soft halo behind the fan, so the phones sit on something rather than float */
.sf-phones::before {
content: "";
position: absolute; inset: 4% -4% 2%;
border-radius: 50%;
background: radial-gradient(closest-side,
color-mix(in oklch, var(--sf-primary) 45%, transparent) 0%,
color-mix(in oklch, var(--sf-primary) 18%, transparent) 55%,
transparent 78%);
filter: blur(28px);
z-index: 0;
}
.sf-phone {
position: absolute;
width: 52%;
margin: 0;
padding: 4px;
background: oklch(20% 0.03 280); /* the bezel */
border-radius: 22px;
box-shadow: 0 18px 44px var(--sf-shadow-strong);
overflow: hidden;
}
.sf-phone img {
display: block; width: 100%; height: auto;
border-radius: 18px;
}
.sf-phone--center { z-index: 3; width: 58%; }
.sf-phone--left { z-index: 1; transform: translate(-57%, 7%) rotate(-6deg) scale(0.88); }
.sf-phone--right { z-index: 2; transform: translate( 57%, 7%) rotate( 6deg) scale(0.88); }
/* On a phone the fan is too cramped to read — show the payoff shot alone. */
@media (max-width: 560px) {
.sf-phones { aspect-ratio: 3 / 4; }
.sf-phone--left,
.sf-phone--right { display: none; }
.sf-phone--center { width: 72%; }
}
/* ---------- Section dividers (full-bleed SVG bands) ---------------------- */
/* Works for both an 
and an inlined