/* MPTree website. * * Plain CSS, no build step, no dependencies. Colour, type, radius and motion * come from assets/tokens.css, copied from Branding/tokens. * * The site commits to the dark ground on purpose: dark is MPTree's home and the * vinyl hero only reads there, which is why carries data-theme="dark" * instead of following the operating system. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--mp-bg); color: var(--mp-text); font-family: var(--mp-font-sans); font-size: var(--mp-text-body); line-height: var(--mp-leading-normal); letter-spacing: var(--mp-track-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .skip { position: absolute; left: -9999px; background: var(--mp-accent); color: var(--mp-on-accent); padding: 10px 16px; border-radius: var(--mp-radius-sm); } .skip:focus { left: 16px; top: 16px; z-index: 100; } :focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; } /* The mark ships as white SVG. Flip it if the ground is ever light. */ :root[data-theme="light"] .mark { filter: invert(1); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--mp-accent); color: var(--mp-on-accent); border: 1px solid var(--mp-accent); border-radius: var(--mp-radius-sm); font-family: inherit; font-weight: var(--mp-weight-bold); letter-spacing: -0.01em; cursor: pointer; transition: opacity var(--mp-motion-fast) var(--mp-ease); } .btn:hover { opacity: 0.86; } .btn-sm { padding: 8px 14px; font-size: var(--mp-text-small); } .btn-lg { padding: 15px 24px; font-size: 16px; } /* Windows, not shipping yet. Reads as a real button but is inert. */ .btn-soon { background: transparent; color: var(--mp-muted); border-color: var(--mp-border); cursor: default; } .btn-soon:hover { opacity: 1; } .soon { font-size: 11px; font-weight: var(--mp-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-muted); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-pill); padding: 3px 9px; } /* ── Top bar ──────────────────────────────────────────────────────────── */ .bar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--mp-bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mp-border); } .bar-in { display: flex; align-items: center; justify-content: space-between; height: 62px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--mp-weight-heavy); letter-spacing: -0.03em; font-size: 17px; } .bar-nav { display: flex; align-items: center; gap: 20px; } .bar-nav a { color: var(--mp-muted); font-size: var(--mp-text-small); font-weight: var(--mp-weight-medium); } .bar-nav a:hover { color: var(--mp-text); } .bar-nav .btn, .bar-nav .btn:hover { color: var(--mp-on-accent); } /* ── Hero. The record is the background layer, the copy sits over it. ─── */ .hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 78vh; padding: 96px 0 104px; overflow: hidden; } .hero-copy { position: relative; z-index: 1; width: 100%; } /* Kicker: tells a first-time visitor what MPTree is before they read anything else. */ .kicker { margin: 0 0 14px; font-family: var(--mp-font-mono); font-size: var(--mp-text-label); letter-spacing: var(--mp-track-label); text-transform: uppercase; color: var(--mp-muted); font-weight: var(--mp-weight-medium); } .hero h1 { margin: 0; font-size: clamp(40px, 7vw, 76px); font-weight: var(--mp-weight-heavy); letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; } .lede { margin: 20px 0 0; max-width: 42ch; font-size: 17px; color: var(--mp-text-sub); } .cta { margin-top: 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cta-center { justify-content: center; } .cta-sub { margin: 14px 0 0; font-size: var(--mp-text-small); color: var(--mp-muted); } /* The record. Sits behind the copy, bleeding off the right edge, turning on its spindle. The source image is a true top-down record whose centre is the image centre, so rotating about that centre reads as a record playing rather than an object tumbling. */ .hero-disc { position: absolute; z-index: 0; top: 50%; right: -12%; width: min(760px, 82vw); aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; } .disc { grid-area: 1 / 1; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; /* site.js sets --rot from scroll position. */ transform: rotate(var(--rot, 0deg)); will-change: transform; } .disc img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The label stays still while the record turns, exactly as a real one does. A solid white panel, per the brand rule about never placing the mark directly onto a photograph. */ .disc-label { grid-area: 1 / 1; width: 17%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; z-index: 1; } .disc-label img { width: 42%; height: auto; } /* ── Sections ─────────────────────────────────────────────────────────── */ .section { padding: 78px 24px; border-top: 1px solid var(--mp-border); } .section h2 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); font-weight: var(--mp-weight-heavy); letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; } .section-lede { margin: 16px 0 0; max-width: 58ch; color: var(--mp-text-sub); } /* ── Feature grid ─────────────────────────────────────────────────────── */ .grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mp-border); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-md); overflow: hidden; } .grid li { background: var(--mp-bg); padding: 24px 22px 26px; } .grid h3 { margin: 0 0 7px; font-size: 16px; font-weight: var(--mp-weight-bold); letter-spacing: -0.02em; } .grid p { margin: 0; font-size: var(--mp-text-small); color: var(--mp-text-sub); line-height: 1.6; } /* ── Phone mockup, matched to the real app ────────────────────────────── */ .phone-row { margin-top: 42px; display: flex; justify-content: center; } .phone { width: 320px; flex-shrink: 0; border: 1px solid var(--mp-border); border-radius: 30px; background: #000; padding: 9px; } .phone-screen { background: #000; border-radius: 23px; padding: 8px 0 10px; height: 580px; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Floating header card */ .ui-card-head { margin: 0 9px; background: var(--mp-player); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); padding: 7px 11px 10px; } .ui-top { display: flex; align-items: center; gap: 8px; } .ui-top .mark { width: 34px; height: 34px; } .ui-tabs { display: flex; gap: 2px; margin: 0 auto; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 17px; padding: 3px; } .ui-tabs span { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 14px; color: var(--mp-muted); } .ui-tabs .on { background: var(--mp-accent); color: var(--mp-on-accent); } .ui-gear { width: 16px; height: 16px; flex-shrink: 0; border: 1.6px solid var(--mp-muted); border-radius: 50%; position: relative; } .ui-gear::after { content: ""; position: absolute; inset: 3.5px; border: 1.6px solid var(--mp-muted); border-radius: 50%; } .ui-searchrow { display: flex; gap: 7px; margin-top: 7px; } .ui-search { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-sm); padding: 0 10px; height: 34px; font-size: 11.5px; color: var(--mp-muted); } .ui-mag { width: 10px; height: 10px; flex-shrink: 0; border: 1.5px solid var(--mp-muted); border-radius: 50%; position: relative; } .ui-mag::after { content: ""; position: absolute; right: -3px; bottom: -2px; width: 4px; height: 1.5px; background: var(--mp-muted); transform: rotate(45deg); } .ui-plus { width: 34px; height: 34px; flex-shrink: 0; background: var(--mp-accent); border-radius: var(--mp-radius-sm); position: relative; } .ui-plus::before, .ui-plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--mp-on-accent); } .ui-plus::before { width: 11px; height: 2px; } .ui-plus::after { width: 2px; height: 11px; } .ui-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .ui-meta > span:first-child { font-size: 10.5px; color: var(--mp-muted); } .ui-chip { font-size: 10.5px; font-weight: 600; color: #ccc; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 4px 10px; } /* Song list. Album art colours use the app's real formula: hsl(hue,45%,28%) fill, hsl(hue,45%,38%) border, hsl(hue,60%,85%) letter. */ .ui-list { list-style: none; margin: 8px 0 0; padding: 0; flex: 1; overflow: hidden; } .ui-list li { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "art title dur" "art artist dur"; gap: 0 10px; align-items: center; padding: 6px 14px; } .ui-list i { grid-area: art; width: 36px; height: 36px; border-radius: 8px; background: hsl(var(--h), 45%, 28%); border: 2px solid hsl(var(--h), 45%, 38%); color: hsl(var(--h), 60%, 85%); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: -0.02em; } .ui-list b { grid-area: title; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; } .ui-list em { grid-area: artist; font-style: normal; font-size: 11px; color: var(--mp-text-sub); } .ui-list u { grid-area: dur; text-decoration: none; font-size: 10.5px; color: var(--mp-muted); font-variant-numeric: tabular-nums; } /* Shuffle FAB. Violet is allowed here: it is shuffle state. */ .ui-fab { position: absolute; right: 16px; bottom: 132px; width: 40px; height: 40px; border-radius: 50%; background: var(--mp-state-shuffle); box-shadow: 0 0 16px rgba(124, 58, 237, 0.45); display: grid; place-items: center; } .ui-fab svg { width: 19px; height: 19px; } /* Mini player */ .ui-player { margin: 0 9px; background: var(--mp-player); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); padding: 14px 12px 12px; position: relative; } .ui-handle { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; border-radius: 2px; background: var(--mp-dim); } .ui-prog { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ui-prog .t { font-size: 9.5px; color: var(--mp-muted); font-variant-numeric: tabular-nums; } .ui-prog .track { flex: 1; height: 3px; border-radius: 2px; background: var(--mp-dim); position: relative; } .ui-prog .dot { position: absolute; left: 7%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; } .ui-now { display: flex; align-items: center; gap: 9px; } .ui-now i { width: 34px; height: 34px; border-radius: 8px; background: hsl(var(--h), 45%, 28%); border: 2px solid hsl(var(--h), 45%, 38%); color: hsl(var(--h), 60%, 85%); font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; } .ui-now-t { min-width: 0; flex: 1; } .ui-now-t b { display: block; font-size: 11.5px; font-weight: 700; } .ui-now-t em { display: block; font-style: normal; font-size: 10px; color: var(--mp-muted); } .ui-ctl { display: flex; align-items: center; gap: 7px; } .ui-ctl .sh { width: 14px; height: 14px; flex-shrink: 0; color: var(--mp-state-shuffle); display: grid; place-items: center; } .ui-ctl .sh svg { width: 14px; height: 14px; } .ui-ctl .pv, .ui-ctl .nx { width: 0; height: 0; flex-shrink: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .ui-ctl .pv { border-right: 7px solid var(--mp-muted); } .ui-ctl .nx { border-left: 7px solid var(--mp-muted); } .ui-ctl .pl { width: 30px; height: 30px; border-radius: 50%; background: var(--mp-accent); position: relative; flex-shrink: 0; } .ui-ctl .pl::after { content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--mp-on-accent); } /* ── Feedback ─────────────────────────────────────────────────────────── */ .fb { margin-top: 28px; max-width: 680px; } .fb-label { display: block; margin-bottom: 8px; font-family: var(--mp-font-mono); font-size: var(--mp-text-label); letter-spacing: var(--mp-track-label); text-transform: uppercase; color: var(--mp-muted); font-weight: var(--mp-weight-medium); } .fb textarea { width: 100%; background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-md); padding: 14px 16px; font-family: inherit; font-size: var(--mp-text-body); line-height: 1.6; resize: vertical; } .fb textarea::placeholder { color: var(--mp-muted); } .fb textarea:focus { outline: none; border-color: var(--mp-text-sub); } .fb-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; } .fb-note { font-size: var(--mp-text-small); color: var(--mp-muted); } /* ── Download block ───────────────────────────────────────────────────── */ .claim { max-width: 700px; } .get { border: 1px solid var(--mp-border); border-radius: var(--mp-radius-md); padding: 46px 36px; text-align: center; background: var(--mp-surface); } .get h2 { margin: 0 0 10px; } .get p { margin: 0 auto; max-width: 46ch; color: var(--mp-text-sub); font-size: var(--mp-text-small); } /* Three plain install steps, left aligned so they read as instructions rather than marketing. Sideloading is unfamiliar, so spell it out. */ .steps { list-style: none; margin: 34px auto 0; padding: 0; max-width: 520px; text-align: left; display: flex; flex-direction: column; gap: 14px; } .steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--mp-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-sm); padding: 16px 16px; } .step-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--mp-accent); color: var(--mp-on-accent); font-size: 13px; font-weight: var(--mp-weight-bold); display: grid; place-items: center; font-variant-numeric: tabular-nums; } .steps b { display: block; font-size: 14px; font-weight: var(--mp-weight-bold); letter-spacing: -0.01em; } .steps li p { margin: 4px 0 0; max-width: none; font-size: 13px; color: var(--mp-text-sub); line-height: 1.55; } /* ── Footer ───────────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--mp-border); padding: 38px 0 60px; } .foot-in { display: flex; flex-direction: column; gap: 10px; } .foot p { margin: 0; font-size: var(--mp-text-small); color: var(--mp-muted); max-width: 62ch; } .foot .fine { font-size: var(--mp-text-caption); opacity: 0.75; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 780px) { .hero { min-height: 0; padding: 64px 0 72px; } /* On a narrow screen the record sits behind the copy and dims so the headline keeps its contrast. It is lifted and pushed right so the white label never lands behind the download button. */ .hero-disc { top: 34%; right: -46%; width: 124vw; opacity: 0.38; } .section { padding: 56px 24px; } .bar-nav { gap: 14px; } .bar-nav a:not(.btn) { display: none; } } @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .get { padding: 32px 20px; } .cta .btn { width: 100%; justify-content: center; } }