:root{ --bg:#05080d;--bg2:#08101a;--panel:#0a121d;--panel2:#0d1723;--ink:#f2f6fa;--muted:#8d9bac;--dim:#586777; --blue:#28a8ff;--blue2:#0474c8;--amber:#ff9f23;--amber2:#ff6d00;--line:rgba(142,185,219,.14);--line2:rgba(142,185,219,.25); --shell:min(1240px,calc(100vw - 72px)); } *{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.shell{width:var(--shell);margin-inline:auto}.skip-link{position:fixed;left:12px;top:-100px;z-index:999;padding:10px 14px;background:#fff;color:#000;border-radius:8px}.skip-link:focus{top:12px} /* TrueJam integration with canonical NeuroBios Universal App Nav */ body{padding-top:var(--nb-appnav-height,52px)} @media(max-width:800px){body{padding-top:var(--nb-appnav-height,48px)}} .site-header{background:rgba(5,8,13,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;}.truejam-header-emblem{ display:inline-grid; place-items:center; justify-self:start; width:144px; height:144px; line-height:0; } .truejam-header-emblem img{ display:block; width:128px; height:128px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(40,168,255,.16)); }.site-nav{display:flex;gap:34px; }.site-nav a:hover{ }.dev-state{justify-self:end;color:#7c8997;font-size:8px;letter-spacing:.17em;text-transform:uppercase}.dev-state i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(255,159,35,.8)} .hero{position:relative;overflow:hidden;padding:52px 0 64px;background:radial-gradient(circle at 18% 35%,rgba(255,121,20,.08),transparent 28%),radial-gradient(circle at 77% 40%,rgba(35,147,255,.12),transparent 33%),linear-gradient(180deg,#05080d 0%,#07101a 100%)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(112,157,195,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(112,157,195,.035) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,transparent,black 22%,black 75%,transparent)}.hero-glow{position:absolute;width:580px;height:580px;border-radius:50%;right:-170px;top:30px;background:radial-gradient(circle,rgba(29,150,255,.14),transparent 68%);filter:blur(10px)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.84fr 1.16fr;gap:56px;}.hero-copy{position:relative;padding-top:4px}.hero-mark{position:absolute;left:-62px;top:-20px;width:235px;opacity:.12;filter:saturate(.8)}.hero-mark img{width:100%;display:block}.eyebrow{display:flex;align-items:center;gap:10px; text-transform:uppercase;letter-spacing:.19em;font-size:8px;font-weight:720;margin:0 0 24px}.eyebrow span{width:20px;height:1px;background:linear-gradient(90deg,var(--blue),var(--amber))}.hero h1,.section h2,.closing h2{margin:0;letter-spacing:-.055em;font-weight:510}.hero h1{font-size:clamp(48px,5vw,72px);line-height:1.02;max-width:620px}.hero h1 strong,.section h2 strong{font-weight:610;background:linear-gradient(90deg,#31adff 0%,#51c7ff 42%,#ffb13a 100%);-webkit-background-clip:text;color:transparent}.hero-lead{max-width:580px;color:#a9b4c0;font-size:17px;line-height:1.72;margin:28px 0 0}.hero-actions{display:flex;gap:11px;margin-top:30px}.hero-actions a{border-radius:999px;padding:11px 18px;font-size:10px;font-weight:760}.hero-actions .primary{background:linear-gradient(135deg,#dff4ff,#fff0d9);color:#071019}.hero-actions .secondary{border:1px solid var(--line2);color:#a8b7c6}.hero-micro{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.hero-micro span{ border:1px solid var(--line); background:rgba(255,255,255,.015)} .play-surface{position:relative;padding:17px 18px 13px;border-radius:27px;border:1px solid transparent;background:linear-gradient(180deg,rgba(11,25,39,.965),rgba(4,10,16,.985)) padding-box,linear-gradient(135deg,rgba(46,184,255,.74) 0%,rgba(46,184,255,.25) 28%,rgba(255,160,49,.34) 54%,rgba(46,184,255,.16) 78%,rgba(46,184,255,.48) 100%) border-box;box-shadow:0 28px 70px rgba(0,0,0,.52),0 0 55px rgba(31,157,244,.10),0 0 30px rgba(255,142,32,.035),inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(41,168,255,.05);overflow:hidden}.play-surface:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 58% 34%,rgba(30,164,255,.15),transparent 39%),radial-gradient(circle at 8% 12%,rgba(255,142,27,.055),transparent 27%),radial-gradient(circle at 88% 88%,rgba(255,127,20,.075),transparent 25%),linear-gradient(90deg,rgba(46,184,255,.03) 1px,transparent 1px),linear-gradient(rgba(46,184,255,.025) 1px,transparent 1px);background-size:auto,auto,auto,38px 38px,38px 38px;pointer-events:none}.play-surface>*{position:relative}.play-surface:after{content:"";position:absolute;inset:7px;border-radius:21px;border:1px solid rgba(150,214,255,.035);box-shadow:inset 12px 0 24px rgba(32,165,255,.025),inset -12px 0 24px rgba(255,146,30,.018);pointer-events:none}.play-surface__brand{display:flex;align-items:center;border-bottom:1px solid rgba(89,141,179,.13);padding-bottom:9px;color:#dbeaf4}.play-surface__brand img{width:27px;height:27px;object-fit:contain;margin-right:8px;filter:drop-shadow(0 0 9px rgba(255,153,32,.16))}.play-surface__brand span{font-size:8px;letter-spacing:.18em;font-weight:820}.play-surface__brand em{margin-left:auto;font-style:normal;font-size:7px; letter-spacing:.14em}.track-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;margin-top:12px}.album-art{width:56px;height:56px;border-radius:14px;background:linear-gradient(145deg,#0b1a2b,#173d5f 58%,#d56819);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.album-art span{font-size:22px;font-weight:800;color:#fff}.track-copy small{font-size:6px; letter-spacing:.17em}.track-copy h2{font-size:20px;margin:3px 0 2px;letter-spacing:-.04em}.track-copy p{margin:0;font-size:10px; }.heart{border:0;background:transparent;color:#8190a2;font-size:28px}.song-progress{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:9px;margin-top:10px;font-size:7px;color:#627182}.progress-line{height:3px;background:#172430;border-radius:999px;position:relative}.progress-line i{ left:0;top:0; width:30.2%;border-radius:999px;background:linear-gradient(90deg,var(--blue),#8fd9ff)}.progress-line b{position:absolute;left:30.2%;top:50%; border-radius:50%;background:#dff6ff;transform:translate(-50%,-50%); }.section-row{display:flex;justify-content:space-between;margin-top:12px;font-size:7px;letter-spacing:.14em; }.section-row span:last-child{letter-spacing:.05em;color:#73889c}.chord-karaoke{display:grid;grid-template-columns:.76fr 1.34fr .76fr;gap:10px;align-items:center;margin-top:8px}.side-chord,.now-chord{border:1px solid var(--line);background:rgba(3,9,14,.5);border-radius:18px;text-align:center}.side-chord{padding:15px 7px;opacity:.6}.side-chord small,.now-chord small{display:block;font-size:6px;letter-spacing:.16em;color:#607082;margin-bottom:8px}.side-chord strong{display:block;font-size:22px}.side-chord span{display:block;font-size:7px; margin-top:5px;letter-spacing:.08em}.now-chord{min-height:166px;display:flex;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(circle,rgba(29,160,255,.15),rgba(3,9,14,.65) 62%);border-color:rgba(48,172,255,.35)}.now-chord:after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,161,41,.1);border-radius:15px}.now-chord strong{font-size:88px;line-height:.82;letter-spacing:-.08em;color:#d7e2ea;text-shadow:0 0 24px rgba(35,165,255,.14)}.now-chord>span{font-size:8px;color:#8fb5cc;margin-top:7px;letter-spacing:.11em}.beat-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}.beat-dots i{width:5px;height:5px;border-radius:50%;background:#243343}.beat-dots i.is-on{background:var(--amber);box-shadow:0 0 11px rgba(255,157,35,.85)}.cue-row{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:center;margin-top:8px}.cue-row>span{font-size:6px;letter-spacing:.16em;color:#5f6d7c}.strums{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.strums b{height:23px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:#6b7988;font-size:13px}.strums b.is-on{ background:rgba(255,134,18,.09); }.transport{display:grid;grid-template-columns:1fr 1fr 54px 1fr 1fr;gap:7px;align-items:center;margin-top:10px}.mini-control,.speed{height:36px;border:1px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.015);color:#92a2b2}.mini-control span{font-size:14px;margin-right:5px}.mini-control strong{font-size:8px}.mini-control.is-active{border-color:rgba(255,150,31,.55);color:#ffb04f;background:rgba(255,136,17,.07)}.play-button{width:54px;height:54px;border-radius:50%;border:1px solid rgba(103,203,255,.65);background:radial-gradient(circle at 40% 35%,#35b3ff,#087cc8 68%,#035c9a);justify-self:center;position:relative;box-shadow:0 0 30px rgba(21,147,229,.24)}.play-button span{position:absolute;left:22px;top:17px;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:17px solid #fff}.play-button.is-playing span{left:18px;top:16px;width:18px;height:21px;border:0;background:linear-gradient(90deg,#fff 0 33%,transparent 33% 66%,#fff 66%)}.speed{display:flex;flex-direction:column;align-items:center;justify-content:center}.speed strong{font-size:10px}.speed span{font-size:5px;letter-spacing:.15em;color:#5f6f80}.surface-foot{border-top:1px solid rgba(89,141,179,.13);padding-top:8px;margin-top:10px;display:flex;justify-content:space-between; font-size:6px;letter-spacing:.06em}.surface-foot i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#2cb2ff;margin-right:5px;box-shadow:0 0 9px rgba(44,178,255,.7)}.play-surface.chord-hit .now-chord{animation:chordHit .28s ease}.play-surface.is-playing .play-surface__brand em{color:#ffac42} .section{padding:110px 0;border-top:1px solid var(--line)}.section h2{font-size:clamp(42px,4.4vw,66px);line-height:1.04}.principle-section{background:#070b11}.principle-grid{display:grid;grid-template-columns:1fr .8fr;gap:85px;align-items:start}.principle-copy{padding-top:8px; font-size:13px;line-height:1.8}.principle-copy .lead,.spatial-copy .lead,.companion-copy .lead{color:#b4c0cb;font-size:17px;line-height:1.7;margin-top:0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);}.feature-grid article{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }.feature-grid article>span{font-size:23px;color:#37b4ff}.feature-grid article:nth-child(2)>span,.feature-grid article:nth-child(3)>span{color:#ff9c2b}.feature-grid small{position:absolute; font-size:8px}.feature-grid h3{ }.feature-grid p{ margin:0} .spatial-section{background:radial-gradient(circle at 76% 50%,rgba(29,148,255,.11),transparent 35%),#05090e}.spatial-grid{display:grid;align-items:center}.spatial-copy p:not(.eyebrow){ font-size:13px;line-height:1.8}.spatial-art{margin:0;border-radius:26px;overflow:hidden;border:1px solid rgba(82,166,225,.26);background:#05070a;box-shadow:0 30px 80px rgba(0,0,0,.45)}.spatial-art img{display:block;width:100%;height:auto}.spatial-art figcaption{padding:12px 15px 14px; font-size:9px;letter-spacing:.04em;border-top:1px solid var(--line)}.vision-pills{display:flex;margin-top:26px}.vision-pills span{border:1px solid var(--line);background:rgba(255,255,255,.015); } .companion-section{background:#070b11}.companion-grid{display:grid;grid-template-columns:1fr .85fr;gap:82px;align-items:center}.companion-visual{position:relative;display:grid;place-items:center}.companion-crest{position:absolute;width:400px;max-width:90%;opacity:.13;filter:blur(.2px) saturate(.8)}.coach-card{position:relative;width:min(420px,88%);border:1px solid rgba(77,166,225,.29);border-radius:22px;background:rgba(8,16,25,.92);padding:28px;box-shadow:0 28px 75px rgba(0,0,0,.4)}.coach-card small{ font-size:7px;letter-spacing:.17em}.coach-card p{font-size:21px;line-height:1.4;color:#c9d5df;margin:16px 0 9px}.coach-card strong{font-size:16px}.coach-card div{display:flex;gap:8px;margin-top:22px}.coach-card button{border:0;border-radius:999px;background:linear-gradient(135deg,#dff4ff,#ffe9ce);color:#071019;padding:9px 13px;font-size:9px;font-weight:760}.coach-card button+button{background:transparent;border:1px solid var(--line2);color:#8494a4}.companion-copy p:not(.eyebrow){ font-size:13px;line-height:1.8} .closing{padding:105px 0 125px;text-align:center;border-top:1px solid var(--line);background:linear-gradient(180deg,#05080d,#040609)}.closing-inner{display:flex;flex-direction:column;align-items:center}.closing img{height:auto;display:block;}.closing h2{ }.closing p{ margin:14px 0 0}.site-footer{background:#030508;padding:39px 0 22px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1fr auto;}.footer-grid strong{ }.footer-grid p{ margin:7px 0 0}.footer-links{ }.footer-base{border-top:1px solid var(--line);display:flex;justify-content:space-between; } /* v4.1 desktop viewport refinement */ @media(min-width:981px) and (max-height:900px){ .hero h1{font-size:clamp(44px,4.55vw,65px)} .hero-lead{margin-top:22px;font-size:16px;line-height:1.62} .hero-actions{margin-top:24px} .hero-micro{margin-top:18px} .play-surface{padding-top:15px;padding-bottom:11px} .now-chord{min-height:154px} .now-chord strong{font-size:82px} .side-chord{padding-top:13px;padding-bottom:13px} } @keyframes chordHit{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}} @media(max-width:980px){ :root{--shell:min(780px,calc(100vw - 34px))}.site-header__inner{grid-template-columns:1fr auto}.site-nav{display:none}.hero-grid{grid-template-columns:1fr;gap:46px}.hero-copy{max-width:680px}.play-surface{max-width:780px}.principle-grid,.spatial-grid,.companion-grid{grid-template-columns:1fr;gap:45px}.feature-grid{grid-template-columns:1fr 1fr}.spatial-copy{max-width:680px}.companion-grid{display:flex;flex-direction:column-reverse}.companion-visual{width:100%} } @media(max-width:640px){ :root{--shell:calc(100vw - 26px)}.truejam-header-emblem{width:100px;height:100px}.truejam-header-emblem img{width:92px;height:92px}.dev-state{font-size:6px}.hero{padding:48px 0 72px}.hero h1{font-size:43px}.hero-lead{font-size:15px}.hero-mark{width:190px;left:-45px;opacity:.09}.play-surface{padding:16px 12px 14px;border-radius:22px}.track-row{grid-template-columns:50px 1fr auto}.album-art{width:50px;height:50px;border-radius:12px}.track-copy h2{font-size:18px}.chord-karaoke{grid-template-columns:.72fr 1.45fr .72fr;gap:6px}.side-chord{padding:16px 4px}.side-chord strong{font-size:18px}.now-chord{min-height:172px}.now-chord strong{font-size:76px}.transport{grid-template-columns:1fr 1fr 58px 1fr}.mini-control{height:38px}.mini-control strong{display:none}.transport .speed{display:none}.play-button{width:58px;height:58px}.play-button span{left:24px;top:19px}.speed{height:38px}.surface-foot{font-size:5px}.section{padding:76px 0}.section h2{font-size:39px}.principle-copy .lead,.spatial-copy .lead,.companion-copy .lead{font-size:16px}.feature-grid{grid-template-columns:1fr;}.spatial-art{border-radius:18px}.coach-card{padding:22px}.coach-card p{font-size:18px}.closing{padding:85px 0 92px}.closing h2{font-size:46px}.footer-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.footer-base{flex-direction:column;gap:6px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} /* TRUEJAM PLAYER MUSICAL HIERARCHY v1 */ /* -------------------------------------------------------------- CURRENT CHORD — soft central illumination -------------------------------------------------------------- */ .now-chord{ isolation:isolate; overflow:hidden; box-shadow: 0 0 0 1px rgba(48,172,255,.05) inset, 0 0 34px rgba(30,145,225,.055); } .now-chord::before{ content:""; position:absolute; z-index:0; inset:8% 10% 10%; border-radius:50%; background: radial-gradient( circle at 50% 44%, rgba(53,174,255,.17) 0%, rgba(30,139,221,.085) 30%, rgba(20,103,177,.025) 52%, transparent 70% ), radial-gradient( circle at 67% 78%, rgba(255,159,47,.055) 0%, transparent 46% ); filter:blur(13px); pointer-events:none; } .now-chord > *{ position:relative; z-index:1; } .now-chord::after{ z-index:2; } /* -------------------------------------------------------------- PREVIOUS → CURRENT → NEXT hierarchy -------------------------------------------------------------- */ .side-chord{ transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease; } .side-chord.previous{ opacity:.50; transform:scale(.965); border-color:rgba(96,124,145,.16); } .side-chord.next{ opacity:.72; transform:scale(.982); border-color:rgba(78,143,184,.22); background:rgba(4,12,19,.58); } .side-chord.previous strong{ color:#9aa6b1; } .side-chord.next strong{ color:#aeb9c3; } .side-chord.previous span{ color:#526474; } .side-chord.next span{ color:#607486; } /* -------------------------------------------------------------- STRUM — active beat + visual look-ahead -------------------------------------------------------------- */ .strums b{ transition: opacity .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Current stroke */ .strums b.is-on{ opacity:1; color:#eef7fb; transform:translateY(-1px); border-color:rgba(255,157,37,.55); background:rgba(255,142,22,.11); box-shadow: 0 0 0 1px rgba(255,157,37,.08) inset, 0 0 16px rgba(255,139,25,.10); } /* One stroke ahead */ .strums b.is-on + b{ opacity:.78; color:#8caabd; border-color:rgba(65,161,220,.24); background:rgba(38,146,210,.025); } /* Two strokes ahead */ .strums b.is-on + b + b{ opacity:.60; color:#788d9d; } /* Wrap-around look-ahead */ .strums:has(b:nth-child(6).is-on) b:nth-child(1){ opacity:.78; color:#8caabd; border-color:rgba(65,161,220,.24); background:rgba(38,146,210,.025); } .strums:has(b:nth-child(6).is-on) b:nth-child(2), .strums:has(b:nth-child(5).is-on) b:nth-child(1){ opacity:.60; color:#788d9d; } /* TRUEJAM FIXED STRUM PLAYHEAD v1 */ /* The third of six slots is the permanent NOW/playhead position. */ .strums b{ position:relative; opacity:.42; } /* Past */ .strums b:nth-child(1){ opacity:.25; } .strums b:nth-child(2){ opacity:.43; } /* Fixed current position */ .strums b:nth-child(3){ opacity:.88; } /* Future — strongest nearest the playhead */ .strums b:nth-child(4){ opacity:.80; } .strums b:nth-child(5){ opacity:.62; } .strums b:nth-child(6){ opacity:.48; } .strums b.tj-now{ opacity:1; color:#edf5f8; transform:translateY(-1px); border-color:rgba(255,157,37,.58) !important; background:rgba(255,143,24,.11) !important; box-shadow: 0 0 0 1px rgba(255,157,37,.08) inset, 0 0 17px rgba(255,139,25,.11); } /* Tiny fixed playhead marker */ .strums b.tj-now::before{ content:""; position:absolute; left:50%; top:-8px; width:5px; height:5px; border-radius:50%; background:#ff9d25; box-shadow:0 0 8px rgba(255,157,37,.72); transform:translateX(-50%); } /* The original moving class is now only an input signal for JS. */ .strums b.is-on{ transform:none; } /* TRUEJAM CAPO + BEAT-DOT CLEANUP */ /* Current-chord four-beat dots removed from the visual design. */ [data-beat]{ display:none !important; } /* Song setup metadata */ .capo-pill{ display:inline-flex; align-items:center; justify-content:center; margin-left:8px; padding:3px 7px; border:1px solid rgba(255,164,62,.30); border-radius:999px; background:rgba(255,151,40,.055); color:#d6b27d; font-size:8px; font-weight:700; line-height:1; letter-spacing:.11em; vertical-align:2px; white-space:nowrap; } /* TRUEJAM — remove redundant fixed-strum dot */ .strums b.tj-now::before{ display:none !important; } /* TRUEJAM MUSICAL PROGRESS BAR v1 */ .progress-line{ position:relative; overflow:visible; background: linear-gradient( 90deg, rgba(31,55,73,.88), rgba(24,42,56,.82) ); } /* Quiet waveform / beat texture */ .progress-line::before{ position:absolute; left:0; top:50%; transform:translateY(-50%); background-image: linear-gradient( 90deg, transparent 0 1.6%, rgba(103,178,220,.22) 1.6% 1.85%, transparent 1.85% 3.9%, rgba(103,178,220,.11) 3.9% 4.15%, transparent 4.15% 6.4%, rgba(103,178,220,.18) 6.4% 6.7%, transparent 6.7% 9.2%, rgba(103,178,220,.09) 9.2% 9.45%, transparent 9.45% 12% ); background-size:84px 100%; background-repeat:repeat-x; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 50%, rgba(0,0,0,.55) 78%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.55) 22%, #000 50%, rgba(0,0,0,.55) 78%, transparent 100% ); } /* Existing elapsed line — slightly more musical/luminous */ .progress-line i{ z-index:1; height:3px; background: linear-gradient( 90deg, #28adff 0%, #56c7ff 58%, #a6e3ff 100% ); box-shadow: 0 0 7px rgba(44,178,255,.16), 0 0 2px rgba(135,219,255,.32); } /* Smaller luminous playhead */ .progress-line b{ z-index:2; background:#d9f2fb; } /* TRUEJAM MUSICAL PROGRESS BAR v2 Override v1 texture with a clearer restrained waveform. */ .progress-line::before{ content:""; position:absolute; z-index:0; left:0; right:0; top:50%; height:14px; transform:translateY(-50%); pointer-events:none; background-image: linear-gradient(rgba(92,184,235,.24),rgba(92,184,235,.24)), linear-gradient(rgba(92,184,235,.15),rgba(92,184,235,.15)), linear-gradient(rgba(92,184,235,.22),rgba(92,184,235,.22)), linear-gradient(rgba(92,184,235,.11),rgba(92,184,235,.11)), linear-gradient(rgba(92,184,235,.19),rgba(92,184,235,.19)), linear-gradient(rgba(92,184,235,.13),rgba(92,184,235,.13)); background-size: 1px 5px, 1px 9px, 1px 13px, 1px 7px, 1px 11px, 1px 6px; background-position: 0 50%, 6px 50%, 12px 50%, 18px 50%, 24px 50%, 30px 50%; background-repeat:repeat-x; -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,.65), #000 12%, #000 88%, rgba(0,0,0,.65) ); mask-image: linear-gradient( 90deg, rgba(0,0,0,.65), #000 12%, #000 88%, rgba(0,0,0,.65) ); } /* Keep the actual timeline visually dominant over the waveform. */ .progress-line{ background:#172430; } .progress-line i{ position:absolute; z-index:2; } /* Small luminous playhead, now clearly separated from the waveform. */ .progress-line b{ z-index:3; width:5px; height:5px; background:#dff5fc; box-shadow: 0 0 0 2px rgba(76,190,248,.10), 0 0 7px rgba(66,194,255,.80), 0 0 14px rgba(66,194,255,.25); } /* TRUEJAM PROGRESS BAR — unplayed timeline refinement */ /* Recede the unplayed timeline into the player shell. */ .progress-line{ background:#101b24; } /* Preserve the musical texture, but stop it glaring. */ .progress-line::before{ opacity:.28; } /* Played section remains deliberately brighter. */ .progress-line i{ opacity:1; } /* TRUEJAM LOCAL NAV VISIBILITY v1 */ .site-nav{ letter-spacing:.01em; } .site-nav a{ color:inherit; opacity:1; transition: color .18s ease, text-shadow .18s ease; } .site-nav a:hover, .site-nav a:focus-visible{ color:#f0f7fc; text-shadow:0 0 12px rgba(64,178,245,.18); } .site-nav a:focus-visible{ outline:1px solid rgba(90,190,255,.40); outline-offset:5px; border-radius:4px; } /* TRUEJAM GLOBAL READABILITY BASELINE v1 */ /* -------------------------------------------------------------- LOCAL HEADER Give the local navigation a little breathing room above player. -------------------------------------------------------------- */ @media (min-width:641px){ } /* -------------------------------------------------------------- SECONDARY BODY COPY Readable, but still subordinate to primary headings. -------------------------------------------------------------- */ .principle-copy, .spatial-copy p:not(.eyebrow), .companion-copy p:not(.eyebrow), .feature-grid p{ color:#9ba9b7; } /* -------------------------------------------------------------- SMALL SUPPORTING TEXT Establish a minimum contrast floor throughout TrueJam. -------------------------------------------------------------- */ .track-copy small, .track-copy p, .section-row, .side-chord small, .side-chord span, .now-chord small, .cue-row > span, .surface-foot, .feature-grid small, .closing p, .footer-grid p, .footer-links, .footer-base{ color:#8e9dac; } /* -------------------------------------------------------------- HERO / VISION PILLS These should be readable without demanding attention. -------------------------------------------------------------- */ .hero-micro span, .vision-pills span{ color:#9cabb9; border-color:rgba(124,151,174,.30); background:rgba(255,255,255,.025); } /* Slightly strengthen the three important hero principles. */ .hero-micro span{ } /* -------------------------------------------------------------- EYEBROWS / MICRO LABELS -------------------------------------------------------------- */ .eyebrow{ } /* -------------------------------------------------------------- PLAYER MICROCOPY -------------------------------------------------------------- */ .play-surface__brand span{ color:#d5e3ed; } .play-surface__brand em{ color:#72c7fa; } .surface-foot{ } /* -------------------------------------------------------------- FEATURE CARDS -------------------------------------------------------------- */ .feature-grid h3{ } .feature-grid p{ } /* -------------------------------------------------------------- FOOTER -------------------------------------------------------------- */ .footer-grid p, .footer-links{ color:#8494a3; } .footer-base{ } /* TRUEJAM LOCAL NAV — definitive player separation */ @media (min-width:641px){ } /* TRUEJAM LOCAL HEADER TWO-STATE v1 */ /* Structural reset: stop using translated nav positions as layout authority. */ .site-header{ background:#05090e; border-bottom:1px solid rgba(105,145,178,.18); transition: height .22s ease, background-color .22s ease, box-shadow .22s ease; } .site-header__inner{ position:relative; } .site-nav{ color:#c4d0db; font-size:12px; font-weight:620; } .dev-state{ align-self:center; } /* Large app identity while sitting at page top. */ .truejam-header-emblem, .truejam-header-emblem img{ transition: width .22s ease, height .22s ease, filter .22s ease; } /* -------------------------------------------------------------- COMPACT SCROLLED STATE -------------------------------------------------------------- */ .site-header.is-scrolled{ background:rgba(4,8,13,.985); box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 1px 0 rgba(83,151,198,.12); -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%); } .site-header.is-scrolled .site-nav{ transform:none !important; } .site-header.is-scrolled .dev-state{ opacity:.88; } @media(max-width:640px){ } /* TRUEJAM PRINCIPLE SECTION COMPOSITION v1 */ /* -------------------------------------------------------------- SECTION ATMOSPHERE -------------------------------------------------------------- */ .principle-section{ position:relative; overflow:hidden; background: radial-gradient( circle at 18% 74%, rgba(36,169,255,.055), transparent 30% ), radial-gradient( circle at 78% 78%, rgba(255,151,38,.040), transparent 28% ), #070b11; } .principle-section::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(48,165,235,.020) 1px, transparent 1px ), linear-gradient( rgba(48,165,235,.015) 1px, transparent 1px ); background-size:48px 48px; opacity:.45; } .principle-section > *{ position:relative; z-index:1; } /* -------------------------------------------------------------- FEATURE GRID — tighter composition -------------------------------------------------------------- */ .feature-grid{ position:relative; } /* Flow line running behind all four stages */ .feature-grid::before{ content:""; position:absolute; z-index:0; left:5%; right:5%; top:51px; height:1px; background: linear-gradient( 90deg, rgba(46,178,255,.10), rgba(46,178,255,.34) 18%, rgba(255,157,42,.28) 48%, rgba(255,157,42,.24) 68%, rgba(46,178,255,.30) 88%, rgba(46,178,255,.08) ); box-shadow: 0 0 11px rgba(50,169,239,.07); } /* -------------------------------------------------------------- CARDS -------------------------------------------------------------- */ .feature-grid article{ z-index:1; padding:21px 22px 20px; background: linear-gradient( 180deg, rgba(255,255,255,.030), rgba(255,255,255,.010) ); border-color:rgba(105,138,164,.23); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 36px rgba(0,0,0,.075); transition: transform .20s ease, border-color .20s ease, background-color .20s ease; } .feature-grid article:hover{ transform:translateY(-2px); border-color:rgba(116,164,197,.34); } /* Thin stage identity on each card */ .feature-grid article::before{ content:""; position:absolute; left:21px; right:21px; top:-1px; height:1px; opacity:.60; } .feature-grid article:nth-child(1)::before, .feature-grid article:nth-child(4)::before{ background: linear-gradient( 90deg, transparent, rgba(48,179,255,.70), transparent ); } .feature-grid article:nth-child(2)::before, .feature-grid article:nth-child(3)::before{ background: linear-gradient( 90deg, transparent, rgba(255,158,42,.65), transparent ); } /* -------------------------------------------------------------- ICONS / NUMBERS / COPY -------------------------------------------------------------- */ .feature-grid article > span{ position:relative; z-index:2; display:inline-block; min-height:27px; } .feature-grid small{ top:21px; right:21px; font-size:8px; font-weight:620; letter-spacing:.08em; } .feature-grid h3{ margin:30px 0 8px; color:#edf2f6; font-size:15px; } .feature-grid p{ } /* -------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------- */ @media(max-width:980px){ .feature-grid::before{ display:none; } } @media(max-width:640px){ .feature-grid article{ padding:20px; } .feature-grid h3{ margin-top:24px; } } /* TRUEJAM READABILITY LOCK v1 */ :root{ --tj-readable-body:#aeb9c4; --tj-readable-small:#9eafbd; --tj-readable-micro:#93a6b6; } /* -------------------------------------------------------------- HERO MICRO PILLS -------------------------------------------------------------- */ .hero-micro span{ border-color:rgba(160,188,210,.46) !important; background:rgba(255,255,255,.030) !important; } /* -------------------------------------------------------------- SECTION BODY COPY -------------------------------------------------------------- */ .principle-copy, .principle-copy p, .spatial-copy p:not(.eyebrow), .companion-copy p:not(.eyebrow){ color:var(--tj-readable-body) !important; } /* -------------------------------------------------------------- FOUR PLAY-ALONG CARDS -------------------------------------------------------------- */ .feature-grid p{ color:#aab7c3 !important; font-size:11px !important; line-height:1.58 !important; } .feature-grid small{ color:#98aab9 !important; } /* -------------------------------------------------------------- PILLS / LABELS ELSEWHERE -------------------------------------------------------------- */ .vision-pills span{ border-color:rgba(135,161,183,.34) !important; background:rgba(255,255,255,.025) !important; } /* -------------------------------------------------------------- IMAGE CAPTIONS / COMPANION MICROCOPY -------------------------------------------------------------- */ .spatial-art figcaption, .coach-card small{ color:var(--tj-readable-micro) !important; } /* -------------------------------------------------------------- PLAYER SUPPORTING COPY -------------------------------------------------------------- */ .track-copy p, .section-row, .cue-row > span, .surface-foot{ color:var(--tj-readable-micro) !important; } /* -------------------------------------------------------------- CLOSING / FOOTER -------------------------------------------------------------- */ .closing p, .footer-grid p, .footer-links{ color:#94a4b2 !important; } .footer-base{ color:#d7e2eb !important; font-weight:500 !important; } .footer-base span:first-child, .footer-base span:last-child{ color:#d7e2eb !important; } /* -------------------------------------------------------------- EYEBROWS -------------------------------------------------------------- */ .eyebrow{ color:#a5b6c4 !important; } /* TRUEJAM CANONICAL INFO PILLS v1 */ /* One visual language for all informational / capability pills. Muted enough to remain secondary, bright enough to read instantly. */ .hero-micro span, .vision-pills span{ color:#d5e1ea !important; font-size:9px !important; font-weight:560 !important; line-height:1 !important; letter-spacing:.01em !important; padding:7px 10px !important; border:1px solid rgba(145,170,191,.40) !important; border-radius:999px !important; background: linear-gradient( 180deg, rgba(255,255,255,.040), rgba(255,255,255,.020) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } /* Preserve slightly tighter layout on narrow screens. */ @media(max-width:640px){ } /* TRUEJAM SPATIAL SECTION BALANCE v1 */ @media(min-width:981px){ } /* -------------------------------------------------------------- CLOSING HEADLINE — around 12% smaller -------------------------------------------------------------- */ .closing h2{ } /* Supporting line remains readable but subordinate */ .closing p{ font-size:13px; } /* -------------------------------------------------------------- FOOTER — increase presence -------------------------------------------------------------- */ .footer-grid strong{ font-size:15px; } .footer-grid p{ font-size:10px; line-height:1.55; } .footer-links{ font-size:10px; } .footer-base{ font-size:10px; } /* -------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------- */ @media(max-width:980px){ } @media(max-width:640px){ } /* -------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------- */ @media(max-width:980px){ } @media(max-width:640px){ } /* TRUEJAM CLOSING HEADLINE — final scale refinement */ .closing h2{ } /* TRUEJAM CLOSING GRADIENT v1 */ /* Preserve the final scale; change only visual treatment. */ .closing h2{ font-size:clamp(36px,3.9vw,54px) !important; background: linear-gradient( 90deg, #29aaff 0%, #56bdf0 32%, #a9c8c0 66%, #f3a63b 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important; text-shadow: 0 0 18px rgba(53,170,244,.055); } /* Keep the supporting line calm but clearly readable. */ .closing p{ color:#93a4b2 !important; } /* TRUEJAM CLOSING COPY STRUCTURAL FIX v1 */ .truejam-closing-copy{ position:relative !important; z-index:10 !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; visibility:visible !important; opacity:1 !important; /* Lockup is visually translated down 64px. Compensate here so copy starts beneath its VISUAL bottom. */ padding:0 24px; text-align:center; } .truejam-closing-title{ display:block !important; visibility:visible !important; opacity:1 !important; margin:0 !important; font-size:clamp(34px,3.6vw,50px) !important; line-height:1.02 !important; letter-spacing:-.04em !important; font-weight:640 !important; /* readable fallback */ color:#69bff0 !important; background: linear-gradient( 90deg, #29aaff 0%, #58bef0 32%, #acc9bd 66%, #f3a63b 100% ) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } .truejam-closing-sub{ display:block !important; visibility:visible !important; opacity:1 !important; margin:20px 0 0 !important; color:#98a9b7 !important; font-size:13px !important; line-height:1.5 !important; letter-spacing:.005em !important; } @media(max-width:640px){ .truejam-closing-copy{ padding:0 18px; } .truejam-closing-title{ font-size:clamp(34px,9vw,46px) !important; } } /* TRUEJAM FOOTER LINK PILLS v1 */ .footer-links{ display:flex; align-items:center; justify-content:flex-end; } .footer-links a{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 14px; color:#b8c6d2 !important; font-size:10px !important; font-weight:540; line-height:1; text-decoration:none; border:1px solid rgba(135,165,190,.34); border-radius:999px; background: linear-gradient( 180deg, rgba(255,255,255,.035), rgba(255,255,255,.018) ); transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } .footer-links a:hover{ color:#e0ebf3 !important; border-color:rgba(73,181,244,.52); background: rgba(47,160,225,.07); transform:translateY(-1px); } .footer-links a:focus-visible{ outline:1px solid rgba(73,181,244,.55); outline-offset:3px; } @media(max-width:640px){ .footer-links{ justify-content:flex-start; flex-wrap:wrap; } .footer-links a{ min-height:32px; padding:0 12px; font-size:9px !important; } } /* TRUEJAM HERO — RESTORE LOCKED LOAD POSITION */ .hero, .hero-section, .hero-grid{ margin-top:0 !important; } .hero, .hero-section{ padding-top:20px !important; } /* TRUEJAM CANONICAL LAYOUT AUTHORITY v1 --------------------------------------------------------------- AUTHORITATIVE GEOMETRY ONLY. Future layout edits must be made HERE rather than by appending another competing override elsewhere in the stylesheet. --------------------------------------------------------------- */ :root{ --tj-header-open:112px; --tj-header-compact:62px; --tj-section-y:64px; --tj-closing-top:58px; --tj-closing-bottom:62px; --tj-footer-top:28px; --tj-footer-bottom:16px; } /* ============================================================== LOCAL TRUEJAM HEADER ============================================================== */ .site-header{ position:sticky !important; top:var(--nb-appnav-height,52px) !important; z-index:55 !important; height:var(--tj-header-open) !important; overflow:visible !important; } .site-header__inner{ height:100% !important; align-items:center !important; } .site-nav{ transform:none !important; align-self:center !important; justify-self:center !important; } .site-header.is-scrolled{ height:var(--tj-header-compact) !important; } .site-header.is-scrolled .truejam-header-emblem{ width:58px !important; height:58px !important; } .site-header.is-scrolled .truejam-header-emblem img{ width:58px !important; height:58px !important; } /* ============================================================== HERO / FIRST LOAD Critical product requirement: the player remains substantially visible in the initial viewport. ============================================================== */ .hero{ margin-top:0 !important; padding-top:20px !important; padding-bottom:46px !important; } .hero-grid{ margin-top:0 !important; min-height:calc(100vh - 190px) !important; align-items:center !important; } @media(min-width:981px){ .hero-grid{ top:-40px !important; } } /* ============================================================== MAJOR SECTION RHYTHM ============================================================== */ .section, .principle-section, .spatial-section, .companion-section{ padding-top:var(--tj-section-y) !important; padding-bottom:var(--tj-section-y) !important; } /* Principle / feature system */ .feature-grid{ margin-top:26px !important; gap:14px !important; } .feature-grid article{ min-height:184px !important; } /* Spatial / glasses section */ .spatial-grid{ grid-template-columns:.82fr 1.18fr !important; gap:52px !important; } .spatial-art{ width:92% !important; justify-self:end !important; } .vision-pills{ flex-wrap:nowrap !important; gap:7px !important; } .vision-pills span{ white-space:nowrap !important; } /* Companion */ .companion-visual{ min-height:360px !important; } /* ============================================================== CLOSING COMPOSITION — CANONICAL LOCK Final approved desktop geometry: 27/09/2026. Includes final requested +5px copy adjustment: 58px -> 63px. Do not alter these geometry values independently. ============================================================== */ .closing{ padding-top:var(--tj-closing-top) !important; padding-bottom:var(--tj-closing-bottom) !important; } .closing-inner{ margin-top:-135px !important; } .closing img{ width:min(580px,70vw) !important; height:auto; display:block; margin-top:-18px !important; margin-bottom:-42px !important; transform:translateY(69px) !important; } .truejam-closing-copy{ width:100% !important; max-width:980px !important; margin:58px auto 0 !important; padding-inline:24px !important; } /* TRUEJAM CLOSING — NARROW DESKTOP/TABLET LOCK Preserve approved desktop geometry until mobile takeover. */ @media (min-width:641px) and (max-width:980px){ .closing img{ width:min(580px,calc(100vw - 34px)) !important; } } /* Mobile closing lock — independently approved */ @media(max-width:640px){ .closing-inner{ margin-top:0 !important; } .closing img{ width:min(520px,100%) !important; margin-top:0 !important; margin-bottom:24px !important; transform:none !important; } .truejam-closing-copy{ margin-top:0 !important; padding-inline:18px !important; } } /* ============================================================== FOOTER ============================================================== */ .site-footer{ padding-top:var(--tj-footer-top) !important; padding-bottom:var(--tj-footer-bottom) !important; } .footer-grid{ gap:22px !important; } .footer-links{ gap:10px !important; } .footer-base{ margin-top:18px !important; padding-top:12px !important; } /* ============================================================== ANCHOR CLEARANCE ============================================================== */ #top{ scroll-margin-top:calc(var(--nb-appnav-height,52px) + var(--tj-header-open)) !important; } #spatial, #companion{ scroll-margin-top:calc(var(--nb-appnav-height,52px) + var(--tj-header-compact) + 12px) !important; } /* ============================================================== TABLET ============================================================== */ @media(max-width:980px){ :root{ --tj-section-y:56px; } .spatial-grid{ grid-template-columns:1fr !important; gap:45px !important; } .spatial-art{ width:100% !important; justify-self:stretch !important; } .vision-pills{ flex-wrap:wrap !important; } } /* ============================================================== MOBILE ============================================================== */ @media(max-width:640px){ :root{ --tj-section-y:46px; --tj-header-open:76px; --tj-header-compact:56px; --tj-closing-top:48px; --tj-closing-bottom:52px; } .site-header{ top:var(--nb-appnav-height,48px) !important; } .site-header.is-scrolled .truejam-header-emblem, .site-header.is-scrolled .truejam-header-emblem img{ width:48px !important; height:48px !important; } .hero{ padding-top:28px !important; } .feature-grid{ margin-top:28px !important; } .feature-grid article{ min-height:auto !important; } .truejam-closing-copy{ padding-inline:18px !important; } /* Mobile closing composition: desktop negative geometry must not carry into narrow viewports. */ .closing-inner{ margin-top:0 !important; } .closing img{ width:min(520px,100%) !important; margin-top:0 !important; margin-bottom:24px !important; transform:none !important; } .closing h2{ position:relative; z-index:2; } } /* ============================================================== TRUEJAM EDITIONS CTA STYLING v1 ============================================================== */ .tj-editions-cta{ padding:20px 24px 30px; background:#05090e; } .tj-editions-cta__inner{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; } .tj-editions-cta__label{ color:#93a6b6; font-size:9px; font-weight:650; letter-spacing:.14em; } .tj-editions-cta__link{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border:1px solid rgba(145,170,191,.38); border-radius:999px; background:rgba(255,255,255,.025); color:#d6e0e8; font-size:11px; font-weight:700; text-decoration:none; } .tj-editions-cta__link:hover{ border-color:rgba(70,182,255,.55); background:rgba(70,182,255,.05); } @media(max-width:640px){ .tj-editions-cta{ padding:18px 20px 26px; } .tj-editions-cta__inner{ gap:12px; } } /* TRUEJAM EDITIONS WORDMARK v1 */ .tj-editions-cta__wordmark{ display:block; width:auto; height:43px; object-fit:contain; } @media(max-width:640px){ .tj-editions-cta__wordmark{ height:34px; } } /* TRUEJAM HERO KICKER READABILITY — CANONICAL */ html body main#main section.hero .hero-copy > p.eyebrow { color:#afbdc9 !important; -webkit-text-fill-color:#afbdc9 !important; opacity:1 !important; filter:none !important; } /* END TRUEJAM HERO KICKER READABILITY */