/* ============================================================ Chiral Audio — product-rethink.css Shared styles for the "instrument bench" product template. Per-product accent is set on . Pair with chiral.css (tokens/nav/footer) + hero-field.js. ============================================================ */ body { background:#05080a; padding-bottom:84px; } /* ---- cinematic hero with canvas field ---- */ .cine { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; } .cine canvas.field { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } .cine-veil { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(5,8,10,0.55) 0%, transparent 26%, rgba(5,8,10,0.25) 64%, #05080a 100%); } .cine-inner { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; padding:0 clamp(1.5rem,4vw,3.5rem) clamp(120px,18vh,200px); } .cine-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(var(--acc),1); margin-bottom:20px; } .cine-name { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(3.2rem,10vw,8.5rem); line-height:0.86; letter-spacing:-0.02em; } .cine-tag { font-family:var(--font-heading); font-weight:300; font-size:clamp(1.3rem,2.6vw,2rem); color:hsl(var(--foreground)/0.86); margin:18px 0 0; max-width:30ch; } .cine-eq { font-family:var(--font-mono); font-size:14px; color:rgba(var(--acc),1); margin-top:22px; } .scrollcue { position:absolute; left:50%; bottom:104px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:hsl(var(--foreground)/0.5); } .scrollcue .bar { width:1px; height:34px; background:linear-gradient(180deg, rgba(var(--acc),0.9), transparent); position:relative; overflow:hidden; } .scrollcue .bar::after { content:""; position:absolute; left:0; top:-34px; width:1px; height:34px; background:rgba(255,255,255,0.9); animation:cuefall 2.2s ease-in-out infinite; } @keyframes cuefall { 0%{transform:translateY(0)} 60%,100%{transform:translateY(68px)} } @media (prefers-reduced-motion: reduce){ .scrollcue .bar::after{ animation:none; display:none; } } /* keep the whole hero block (through the equation) above the fold. Fire on width OR height so a portrait phone stays compact even as the URL bar toggles its height mid-scroll (no font/padding reflow seam). */ @media (max-width: 720px), (max-height: 820px){ .cine-name { font-size:clamp(2.8rem,8.5vh,5.2rem); } .cine-tag { font-size:1.15rem; margin-top:12px; } .cine-eq { margin-top:14px; } /* clear the fixed buy dock (2-row, ~107px on mobile) so the equation is not tucked underneath it; the svh hero keeps this honest on real phones. */ .cine-inner { padding-bottom:132px; } .scrollcue { display:none; } } /* ---- shell ---- */ .shell { max-width:1320px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3.5rem); } .bench { margin:90px 0; } .bench-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid hsl(var(--foreground)/0.12); margin-bottom:36px; } .bench-head h2 { font-family:var(--font-heading); font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-0.025em; } .bench-head h2 em { font-family:var(--font-display); font-style:italic; color:rgba(var(--acc),1); } .bench-head .tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(var(--acc),1); border:1px solid rgba(var(--acc),0.4); padding:5px 11px; border-radius:999px; white-space:nowrap; } /* bench: figure + live readout */ .bench-grid { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; } .bench-fig { position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(var(--acc),0.3); box-shadow:0 60px 130px -60px #000, 0 0 100px rgba(var(--acc),0.10); } .bench-fig img { width:100%; display:block; } .bench-anno { position:absolute; z-index:2; font-family:var(--font-mono); font-size:10px; color:#fff; background:rgba(8,12,16,0.78); border:1px solid rgba(var(--acc),0.5); padding:5px 9px; border-radius:6px; display:flex; gap:7px; align-items:center; } .bench-fig .anno-lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .bench-fig .anno-lines line { stroke:rgba(var(--acc),0.75); stroke-width:1; vector-effect:non-scaling-stroke; } .bench-anno::before { content:""; width:6px; height:6px; border-radius:50%; background:rgba(var(--acc),1); box-shadow:0 0 8px rgba(var(--acc),1); } .readout { border:1px solid hsl(var(--foreground)/0.12); border-radius:14px; padding:22px; background:rgba(255,255,255,0.02); } .readout .rh { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:hsl(var(--foreground)/0.5); margin-bottom:16px; } .readout .big { font-family:var(--font-display); font-style:italic; font-size:48px; line-height:1; color:rgba(var(--acc),1); } .readout .big small { font-family:var(--font-mono); font-style:normal; font-size:12px; color:hsl(var(--foreground)/0.5); display:block; margin-top:6px; letter-spacing:0.04em; } .readout .ctrl { margin-top:22px; } .readout .ctrl label { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:hsl(var(--foreground)/0.7); margin-bottom:7px; } .readout .track { height:6px; border-radius:999px; background:hsl(var(--foreground)/0.1); position:relative; } .readout .track i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, rgba(var(--acc),0.4), rgba(var(--acc),1)); } .readout .track i::after { content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(var(--acc),0.8); } .readout .note { margin-top:20px; font-size:12px; color:hsl(var(--foreground)/0.55); line-height:1.5; } /* steps grid */ .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:hsl(var(--foreground)/0.1); border:1px solid hsl(var(--foreground)/0.1); border-radius:12px; overflow:hidden; } .step { background:#070b0e; padding:26px 22px; } .step .sn { font-family:var(--font-mono); font-size:11px; color:rgba(var(--acc),1); } .step h4 { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:21px; margin:12px 0 8px; } .step p { font-size:13px; color:hsl(var(--foreground)/0.6); line-height:1.5; } /* controls / differentiators list */ .diffs { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .diff { border:1px solid hsl(var(--foreground)/0.1); border-radius:12px; padding:24px; background:rgba(255,255,255,0.012); } .diff .dt { font-weight:500; margin-bottom:8px; } .diff .db { font-size:14px; color:hsl(var(--foreground)/0.6); line-height:1.5; } /* demos */ .demos { display:flex; flex-direction:column; gap:10px; } .drow { display:grid; grid-template-columns:auto 1fr 1.3fr auto; gap:18px; align-items:center; padding:16px 20px; border:1px solid hsl(var(--foreground)/0.1); border-radius:12px; background:rgba(255,255,255,0.012); } .dplay { width:44px; height:44px; border-radius:50%; background:rgba(var(--acc),1); color:#06100f; display:grid; place-items:center; } .dplay svg { width:16px; height:16px; } .dinfo .t { font-weight:500; font-size:15px; } .dinfo .s { font-size:12px; color:hsl(var(--foreground)/0.55); } .dwave { height:30px; background:repeating-linear-gradient(90deg, rgba(var(--acc),0.5) 0 2px, transparent 2px 6px); border-radius:3px; opacity:.55; } .dtoggle { display:flex; gap:4px; background:hsl(var(--foreground)/0.06); padding:3px; border-radius:999px; } .dtoggle button { padding:6px 13px; border-radius:999px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:hsl(var(--foreground)/0.6); } .dtoggle button.on { background:rgba(var(--acc),1); color:#06100f; } /* spec table */ .spectable { border:1px solid hsl(var(--foreground)/0.1); border-radius:12px; overflow:hidden; } .spectable .srow { display:grid; grid-template-columns:180px 1fr; gap:24px; padding:16px 22px; border-bottom:1px solid hsl(var(--foreground)/0.07); } .spectable .srow:last-child { border-bottom:none; } .spectable .sk { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:hsl(var(--foreground)/0.5); } .spectable .sv { font-size:14px; color:hsl(var(--foreground)/0.82); line-height:1.5; } /* cross-sell */ .xsell { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .xcard { border:1px solid hsl(var(--foreground)/0.1); border-radius:12px; overflow:hidden; transition:transform 200ms, border-color 200ms; } .xcard:hover { transform:translateY(-3px); border-color:rgba(var(--acc),0.4); } .xcard img { width:100%; aspect-ratio:16/10; object-fit:cover; } .xcard .xb { padding:16px 18px; } .xcard .xn { font-family:var(--font-display); font-style:italic; font-size:21px; } .xcard .xm { font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:hsl(var(--foreground)/0.45); margin-top:3px; } .xcard .xp { font-family:var(--font-mono); font-size:12px; color:hsl(var(--foreground)/0.7); margin-top:10px; } .xcard .xp strong { font-family:var(--font-display); font-style:italic; font-size:18px; color:hsl(var(--foreground)); } /* docked buy bar */ .dock { position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(10,12,16,0.86); backdrop-filter:blur(24px); border-top:1px solid hsl(var(--foreground)/0.12); } .dock-inner { max-width:1320px; margin:0 auto; padding:14px clamp(1.5rem,4vw,3.5rem); display:flex; align-items:center; gap:20px; } .dock img { width:42px; height:42px; border-radius:10px; } .dock .dn { font-family:var(--font-display); font-style:italic; font-size:22px; } .dock .dm { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(var(--acc),1); } .dock .dprice { margin-left:auto; font-family:var(--font-mono); font-size:13px; color:hsl(var(--foreground)/0.5); } .dock .dprice strong { font-family:var(--font-display); font-style:italic; font-size:28px; color:hsl(var(--foreground)); margin-right:5px; } .dock .dprice s { text-decoration:line-through; opacity:.6; } .dock .dadd { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; background:rgba(var(--acc),1); color:#06100f; font-family:var(--font-heading); font-weight:600; font-size:14px; } .dock .dadd svg { width:15px; height:15px; } @media(max-width:980px){ .bench-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .diffs,.xsell{grid-template-columns:1fr} .drow{grid-template-columns:auto 1fr; row-gap:12px} .dock .dm{display:none} } /* Mobile: keep the docked buy bar a single compact row (the Add label wrapped to ~150px tall otherwise, crowding the hero) and hide the scroll cue, which overlaps the equation on tall-but-narrow phones where the height guard is off. */ @media (max-width:600px){ .scrollcue { display:none; } /* Two rows: logo + name + price on top, full-width Add button below. Keeps the product name and price visible while the long Add label can't fit on one line with them at phone widths. */ .dock-inner { flex-wrap:wrap; gap:7px 12px; padding:10px 16px; } .dock-inner > div { min-width:0; } /* let a long name truncate, not push the row */ .dock img { width:36px; height:36px; flex-shrink:0; } .dock .dn { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dock .dprice { margin-left:auto; font-size:12px; } .dock .dprice strong { font-size:21px; margin-right:4px; } .dock .dadd { flex-basis:100%; justify-content:center; padding:12px; font-size:14px; } } /* ============================================================ Targeted adjustments — 2026-06-20 (Blake review round) ============================================================ */ /* #3 — larger step eyebrows ("01 · seed") */ .step .sn { font-size:13px; letter-spacing:0.02em; } /* #4 — tighten the gap between the hero and the first bench (the figure section), and trim the inter-section rhythm a touch */ .bench { margin:64px 0; } .shell > .bench:first-of-type { margin-top:34px; } /* #6 — small trademark mark on the hero product name */ .cine-name .cine-tm { font-family:var(--font-mono); font-style:normal; font-weight:400; font-size:0.24em; vertical-align:0.95em; letter-spacing:0; margin-left:0.04em; color:hsl(var(--foreground)/0.5); } /* #7 — soft fill on the spec table + cross-sell cards (were a bare border on dark, reading as loose text) */ .spectable { background:rgba(255,255,255,0.018); } .xcard { background:rgba(255,255,255,0.018); } /* #8 — show the cross-sell renders in full instead of cropping them; the renders are ~4:3, so match the frame to keep letterboxing minimal */ .xcard img { aspect-ratio:4/3; object-fit:contain; background:#0a1014; } /* #9 — drop the Sign-up CTA on phones so the nav pill fits the viewport */ @media (max-width:640px){ #navWrap .nav-cta { display:none; } } /* #10 — keep the hero eyebrow/title legible over a busy field on phones (autocatalysis, boltzmann). A strong scrim behind the text block plus a per-glyph shadow so it holds up even where the bars run bright. */ @media (max-width:700px){ .cine-inner { position:relative; } .cine-inner::before { content:""; position:absolute; left:0; right:0; top:-56px; bottom:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(5,8,10,0.58) 13%, rgba(5,8,10,0.8) 58%, rgba(5,8,10,0.9) 100%); } .cine-eyebrow, .cine-name, .cine-tag, .cine-eq { text-shadow: 0 1px 12px rgba(5,8,10,0.92), 0 0 30px rgba(5,8,10,0.7); } } /* A — hide the chassis annotations on phones/tablets. The base rule sets .bench-anno{display:flex} and loads after each page's inline hide, so the hide has to live here (later, same specificity) to actually win. C — stack the spec-table rows so the description isn't crushed into a narrow second column (matches foxfire, the standard). */ @media (max-width:720px){ .bench-anno, .anno-lines { display:none; } .spectable .srow { grid-template-columns:1fr; gap:8px; } /* stack the section heading + its tag chip so the chip stops squeezing the title into a ragged vertical wrap (e.g. boltzmann "Hear it warm up.") */ .bench-head { flex-direction:column; align-items:flex-start; gap:10px; } .bench-head .tag { white-space:normal; max-width:100%; } }