/* ========================================================================== Major Mixing — Homepage v2 (per client spec, 2026-08-12) Built section-by-section: S1+S2 only in this pass. See memory/DECISIONS.md. ========================================================================== */ @font-face{ font-family:'Archivo'; src:url('../fonts/Archivo-Variable.woff2') format('woff2-variations'), url('../fonts/Archivo-Variable.woff2') format('woff2'); font-weight:100 900; font-display:swap; } @font-face{ font-family:'Roboto Mono'; src:url('../fonts/RobotoMono-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face{ font-family:'Avenir Next'; src:url('../fonts/AvenirNext-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face{ font-family:'Avenir Next'; src:url('../fonts/AvenirNext-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face{ font-family:'Avenir Next'; src:url('../fonts/AvenirNext-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } /* ---------- 3.1 Color tokens ---------- */ #mm-home{ --mm-paper: #FFFFFF; --mm-paper-2: #F5F4F1; --mm-paper-3: #EBE9E4; --mm-ink: #0E0E10; --mm-ink-2: #17171A; --mm-ink-3: #232328; --mm-t-primary: #0E0E10; --mm-t-secondary: #55555E; --mm-t-muted: #7A7A85; --mm-t-inv: #F7F6F3; --mm-t-inv-dim: #A8A8B0; --mm-blue: #0B5FFF; --mm-blue-deep: #0A3FB0; --mm-blue-hover: #0949CC; --mm-blue-soft: #E8EFFF; --mm-amber: #C8791A; --mm-amber-on-dark:#E8A33D; --mm-green: #0F7A4A; /* ---------- 3.2 Type ---------- */ --font-display:'Archivo',-apple-system,'Segoe UI',sans-serif; --font-body:'Avenir Next',-apple-system,'Segoe UI',sans-serif; --font-mono:'Roboto Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --fs-h2: clamp(2.0rem, 3.8vw, 3.25rem); --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem); --fs-lede: clamp(1.0625rem, 1.3vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-caption: 0.8125rem; --fs-label: 0.75rem; --fs-price: clamp(1.75rem, 2.4vw, 2.25rem); --fs-counter: clamp(2.75rem, 5vw, 4.5rem); /* line-height scale — review/04-design-system.md: 4 values covered every real use in the file, just never had names. */ --lh-tight: 1.05; /* h1/h2 display headings */ --lh-snug: 1.2; /* short titles / label stacks */ --lh-body: 1.55; /* base paragraph */ --lh-relaxed: 1.65; /* longer readable copy */ /* ---------- 3.3 Grid & space ---------- */ --mm-wrap: 1280px; --mm-wrap-text: 820px; --mm-edge-d: 40px; --mm-edge-t: 32px; --mm-edge-m: 20px; /* spacing scale — review/04-design-system.md: same numbers were already being hand-typed independently 3-7x each across the file; naming them doesn't change any current layout, just gives the next edit something to reference instead of retyping a literal. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px; --mm-space-section-y: clamp(72px, 9vw, 128px); /* ---------- 3.4 Radii & shadow ---------- */ --r-sm: 4px; --r-md: 6px; --r-lg: 12px; --sh-card: 0 1px 2px rgba(14,14,16,.05), 0 8px 24px -12px rgba(14,14,16,.12); --sh-lift: 0 2px 4px rgba(14,14,16,.06), 0 16px 40px -16px rgba(14,14,16,.18); background:var(--mm-paper); color:var(--mm-t-primary); font-family:var(--font-body); -webkit-font-smoothing:antialiased; } #mm-home, #mm-home *{box-sizing:border-box;} #mm-home img{max-width:100%;display:block;} #mm-home a{color:inherit;text-decoration:none;} #mm-home .mm-wrap{max-width:var(--mm-wrap);margin:0 auto;padding-inline:var(--mm-edge-m);} @media(min-width:768px){#mm-home .mm-wrap{padding-inline:var(--mm-edge-t);}} @media(min-width:1280px){#mm-home .mm-wrap{padding-inline:var(--mm-edge-d);}} #mm-home section{position:relative;} #mm-home h1,#mm-home h2,#mm-home h3{font-family:var(--font-display);margin:0;} #mm-home p{margin:0;} /* full-bleed helper used by photo bands, guarded against horizontal scroll */ #mm-home{overflow-x:clip;} #mm-home .mm-bleed{width:100%;margin-inline:calc(50% - 50vw);} /* ---------- 7.1 Buttons (rectangular, no pill) ---------- */ #mm-home .mm-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-weight:700;font-size:var(--fs-body); padding:14px 28px;min-height:48px;border-radius:var(--r-md); border:1px solid transparent;cursor:pointer;letter-spacing:0; transition:background 160ms, border-color 160ms; } #mm-home .mm-btn:active{transform:translateY(1px);} #mm-home .mm-btn:focus-visible{outline:2px solid var(--mm-blue);outline-offset:3px;} #mm-home .mm-btn--primary{background:var(--mm-blue);color:#fff;} #mm-home .mm-btn--primary:hover{background:var(--mm-blue-hover);} #mm-home .mm-btn--ghost{background:transparent;color:var(--mm-t-primary);border-color:var(--mm-t-primary);} #mm-home .mm-btn--ghost:hover{background:var(--mm-paper-2);} #mm-home .mm-btn--ghost-inv{background:transparent;color:var(--mm-t-inv);border-color:var(--mm-ink-3);} #mm-home .mm-btn--ghost-inv:hover{background:var(--mm-ink-2);} /* ---------- 7.3 Eyebrow ---------- */ #mm-home .mm-eyebrow{ display:inline-block;font-family:var(--font-body);font-weight:700; font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase; color:var(--mm-blue-deep); } #mm-home .mm-dark .mm-eyebrow{color:var(--mm-amber-on-dark);} /* ---------- 8. Motion ---------- */ #mm-home .mm-r{opacity:0;transform:translateY(12px);transition:opacity 400ms cubic-bezier(.2,.7,.3,1), transform 400ms cubic-bezier(.2,.7,.3,1);} #mm-home .mm-r.mm-in{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ #mm-home *, #mm-home *::before, #mm-home *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } #mm-home .mm-r{opacity:1 !important; transform:none !important;} } /* ========================================================================== S1 — STICKY HEADER (CSS override only — header.php is parent, untouched) ========================================================================== */ .home #masthead{ background:rgba(255,255,255,.86) !important; -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color 160ms ease; height:72px; } .home #masthead.mm-scrolled{border-bottom-color:var(--mm-paper-3, #EBE9E4);} .home #masthead, .home #masthead a, .home #masthead .head-wrap{color:#0E0E10 !important;} .home #masthead nav a{ font-family:'Avenir Next',-apple-system,sans-serif !important; font-size:.875rem !important;font-weight:500 !important; color:#55555E !important; } .home #masthead nav a:hover{color:#0E0E10 !important;} /* the parent theme's logo asset is white, built for the old black header — invert it so it reads on the new light sticky header without touching header.php itself. */ .home #masthead .menu_logo__img{filter:invert(1) brightness(0.15);} @media(max-width:767px){.home #masthead{height:60px;}} /* Client ask (2026-08-21): "Samples"/"Testimonials"/"Services" nav links land on the homepage but don't settle on the right section — worse from another page, where it looked like nothing scrolled at all. #masthead above is `position:fixed`, so it floats OVER whatever the browser (or any JS) scrolls to — every #samples/#reviews/#pricing anchor jump was landing with the target's real top edge hidden right under the fixed 72px/60px bar, which on a tall hero-adjacent section can look like the scroll never happened at all. scroll-padding-top is what browsers themselves consult when resolving a URL fragment (and what scrollIntoView() honors too) — it's the standards-based fix for exactly "fixed header covers the anchor target", so both the browser's own native jump AND the homepage.js re-scroll fallback below land past the header instead of underneath it. Scoped to this file only, which itself is enqueued solely for the homepage. */ html{scroll-padding-top:100px;} @media(max-width:767px){html{scroll-padding-top:80px;}} /* Mobile menu button + drawer — the S1 pass above lightened the header BAR but missed two things client caught 2026-08-20: (1) the hamburger icon's 3 lines are hardcoded stroke="#fff" in header.php (parent, untouched) — invisible on this new light header, same white-on-white problem the logo already had; (2) the open drawer (#primary-menu) still carries the parent theme's original solid-black background, while its link color was already overridden dark by the ".home #masthead nav a" rule above — net result was low-contrast dark-grey text on a black box. Both fixed here, drawer restyled in the same paper/blue language as the rest of the redesign instead of the old cramped black slide-out. */ .home #masthead .menu-toggle line{stroke:#0E0E10;} @media(max-width:991.1px){ .home #primary-menu{ background:var(--mm-paper, #fff) !important; width:min(320px, 84vw); padding:100px 28px 32px; box-shadow:-16px 0 48px rgba(14,14,16,.18); overflow-y:auto; } .home #primary-menu li{width:100%;} .home #primary-menu li a{ display:block;width:100%; padding:16px 4px !important; border-bottom:1px solid var(--mm-paper-3, #EBE9E4); transition:color 150ms ease; } .home #primary-menu li:last-child a{border-bottom:none;} .home #primary-menu li a:hover, .home #primary-menu li a:focus-visible{color:var(--mm-blue, #0B5FFF) !important;} } /* ========================================================================== S2 — HERO Client override (2026-08-12, confirmed via AskUserQuestion after the split-layout version was shown): full-bleed photo, text on top with a moderate overlay — NOT the split "text never touches photo" layout the original ТЗ v2 spec S2 described. The one thing carried over from that spec's own reasoning: the overlay must stay light enough that the photo is still visible — the previous (pre-ТЗ-v2) round's mistake was a 97% black overlay that hid the photo entirely. This gradient tops out much lower and is concentrated behind the text, not the whole frame. ========================================================================== */ #mm-home .mm-hero{ position:relative;isolation:isolate; min-height:min(66vh,600px); display:flex;align-items:center; padding-block:72px; /* #masthead is `position:fixed` (parent theme), so it's out of flow and doesn't push this section down on its own — clear its real rendered height explicitly instead of guessing via padding-block alone. */ margin-top:88px; background:var(--mm-ink); overflow:hidden; } @media(max-width:767px){#mm-home .mm-hero{margin-top:76px;}} #mm-home .mm-hero-bg{ position:absolute;inset:0;z-index:0; } #mm-home .mm-hero-bg picture, #mm-home .mm-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block;} #mm-home .mm-hero-bg::after{ content:"";position:absolute;inset:0; /* darkest left (where text sits), fading out toward the right so most of the frame keeps showing real photo, not a black scrim */ background:linear-gradient(90deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.68) 30%, rgba(8,8,10,.28) 56%, rgba(8,8,10,.06) 74%, transparent 88%); } #mm-home .mm-hero-grid{position:relative;z-index:1;width:100%;} #mm-home .mm-hero-text{max-width:34rem;} #mm-home .mm-hero h1{ /* real ACF headline (custom_h1) is a full sentence, not a short tagline — sized down from the spec's --fs-display (built for 2-4 word headlines) so a 7-word sentence doesn't wrap into an oversized four-line block */ font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:800;line-height:1.12; letter-spacing:-.015em;color:#fff;text-wrap:balance; } #mm-home .mm-hero-sub{ font-size:var(--fs-body);line-height:1.55;color:rgba(247,246,243,.82); max-width:38ch;margin-top:16px;text-wrap:pretty; } #mm-home .mm-hero-sub a{color:#BFD1FF;} #mm-home .mm-hero-sub-accent{color:#BFD1FF;font-weight:600;} #mm-home .mm-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;} #mm-home .mm-hero-ctas .mm-btn svg{flex:none;} #mm-home .mm-hero-ctas .mm-btn--ghost{color:#fff;border-color:rgba(255,255,255,.7);} #mm-home .mm-hero-ctas .mm-btn--ghost:hover{background:rgba(255,255,255,.12);} #mm-home .mm-trust-row{ display:flex;flex-wrap:wrap;column-gap:22px;row-gap:10px; margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22); max-width:38rem; } #mm-home .mm-trust-item{ display:flex;align-items:center;gap:7px;font-size:var(--fs-caption); font-weight:500;color:rgba(247,246,243,.82);white-space:nowrap; } #mm-home .mm-trust-item svg{flex:none;color:#BFD1FF;width:14px;height:14px;} /* real Apple Digital Masters / Dolby Atmos marks — cropped from the same badge artwork already used in the footer (see functions.php-adjacent img/ files), not the full logo+wordmark lockup, so they slot into the row exactly like the other icon+label items instead of sitting apart as a wide standalone graphic. */ #mm-home .mm-trust-mark{flex:none;width:auto;height:14px;display:block;opacity:.92;} /* Left-justified wrapping made the trust row's last (partial) line sit ragged-left under the fuller line(s) above it on wide viewports — client flagged it as "стоїть криво" 2026-08-20. Centering each wrapped line as a block reads balanced instead; mobile is already single-column (below) so it's untouched. */ @media(min-width:768px){ #mm-home .mm-trust-row{justify-content:center;} } @media(max-width:767px){ #mm-home .mm-hero{min-height:auto;padding-block:64px 40px;align-items:flex-end;} #mm-home .mm-hero h1{font-size:clamp(1.75rem,7vw,2.25rem);} #mm-home .mm-hero-text{max-width:none;} #mm-home .mm-trust-row{flex-direction:column;} } /* ---------- Shared section scaffold (S3+) ---------- */ #mm-home .mm-section{padding-block:clamp(72px,9vw,128px);} #mm-home .mm-section.mm-tight{padding-block:clamp(48px,6vw,80px);} #mm-home .mm-section.mm-dark{background:var(--mm-ink);color:var(--mm-t-inv);} #mm-home .mm-section-head{margin-bottom:48px;} #mm-home .mm-section-head h2{ font-size:var(--fs-h2);font-weight:800;line-height:1.02;letter-spacing:-.025em; color:var(--mm-t-primary);text-wrap:balance;margin-top:10px; } #mm-home .mm-dark .mm-section-head h2{color:var(--mm-t-inv);} #mm-home .mm-section-head .mm-lede{ font-size:var(--fs-lede);line-height:1.5;color:var(--mm-t-secondary); max-width:60ch;margin-top:16px; } #mm-home .mm-dark .mm-section-head .mm-lede{color:var(--mm-t-inv-dim);} #mm-home .mm-section-head.mm-center{text-align:center;} #mm-home .mm-section-head.mm-center .mm-lede{margin-inline:auto;} /* ========================================================================== S3 — CLIENT LOGO MARQUEE ========================================================================== */ #mm-home .mm-clients{background:var(--mm-paper-2);padding-block:48px;} #mm-home .mm-clients-top{ display:flex;justify-content:space-between;align-items:baseline; margin-bottom:28px;flex-wrap:wrap;gap:12px; } #mm-home .mm-clients-top span{font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-t-muted);} #mm-home .mm-clients-top a{font-size:var(--fs-small);font-weight:700;color:var(--mm-blue-deep);} #mm-home .mm-clients-top a:hover{text-decoration:underline;} #mm-home .mm-marquee-mask{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } #mm-home .mm-marquee{display:flex;width:max-content;animation:mm-scroll 34s linear infinite;} #mm-home .mm-marquee:hover{animation-play-state:paused;} #mm-home .mm-marquee-group{display:flex;align-items:center;gap:64px;padding-right:64px;} #mm-home .mm-marquee img{ height:36px;width:auto;max-width:170px;object-fit:contain; filter:grayscale(.4) opacity(.8);transition:filter 200ms ease; } #mm-home .mm-marquee img:hover{filter:grayscale(0) opacity(1);} @keyframes mm-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){ #mm-home .mm-marquee{animation:none;flex-wrap:nowrap;overflow-x:auto;} } /* ========================================================================== S4 — BEFORE / AFTER SAMPLES (main proof) One stage, genre tabs pick which real .player is visible. Real samples stay mounted (the engine binds once on load); JS only toggles .is-active to show/hide panels — see homepage.js. "Channel Strip" look: dark hardware fader card sitting on the real studio photo background (samples_background_image). Previous pass (numbered rail + pulsing button ring) had the ring's max expansion (inset:-16px) landing inside the 16px gap to the Before button, i.e. visibly overlapping it — replaced with effects that stay inside their own box (box-shadow, not inset pseudo-elements) so nothing can bleed into a neighbour regardless of spacing. ========================================================================== */ /* real studio photo background — same photo/overlay/parallax technique as the original site (background-attachment:fixed on desktop, degrading to scroll on tablet/mobile since fixed-attachment perf is poor on touch). */ #mm-home .mm-samples-photo{position:relative;overflow:hidden;padding-block:0;} #mm-home .mm-samples-photo__bg{ position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat; background-attachment:fixed;z-index:0; } #mm-home .mm-samples-photo__overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.82) 40%, rgba(10,10,12,.88) 100%); } #mm-home .mm-samples-photo__content{position:relative;z-index:2;padding-block:clamp(72px,9vw,128px);} #mm-home .mm-samples-photo .mm-eyebrow{color:var(--mm-blue-soft);} #mm-home .mm-samples-photo #samples-h2{color:#fff;} #mm-home .mm-samples-photo .mm-lede{color:var(--mm-t-inv-dim);} @media(max-width:1366px){#mm-home .mm-samples-photo__bg{background-attachment:scroll;}} @media(max-width:767px){#mm-home .mm-samples-photo__bg{background-attachment:scroll;background-position:center;}} #mm-home .mm-sample-tabs-wrap{display:flex;align-items:center;gap:6px;margin-bottom:16px;} #mm-home .mm-tabs-arrow{ flex:none;display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);color:#fff;cursor:pointer;padding:0; transition:background .15s ease,border-color .15s ease,opacity .15s ease; } #mm-home .mm-tabs-arrow:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);} #mm-home .mm-tabs-arrow:disabled{opacity:0;pointer-events:none;} #mm-home .mm-tabs-arrow svg{flex:none;} #mm-home .mm-sample-tabs{ display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;flex:1;min-width:0; -webkit-overflow-scrolling:touch;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; cursor:grab; /* Fade-edge scroll affordance — the arrow buttons exist at every width, but on narrow screens they can read as decorative rather than functional; this makes "more tabs this way" legible without them. */ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); } #mm-home .mm-sample-tabs::-webkit-scrollbar{display:none;} #mm-home .mm-sample-tabs-wrap.is-dragging .mm-sample-tabs{scroll-behavior:auto;cursor:grabbing;user-select:none;} #mm-home .mm-sample-tabs-wrap.is-dragging .mm-sample-tab{pointer-events:none;} #mm-home .mm-sample-tab{ font-family:var(--font-body);font-size:var(--fs-small);font-weight:700;flex:none;white-space:nowrap; padding:10px 16px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);color:var(--mm-t-inv-dim);cursor:pointer;text-transform:uppercase;letter-spacing:.02em; transition:background .15s ease,border-color .15s ease,color .15s ease; } #mm-home .mm-sample-tab:hover{border-color:rgba(255,255,255,.4);color:#fff;} #mm-home .mm-sample-tab.is-active{background:var(--mm-blue);border-color:var(--mm-blue);color:#fff;} #mm-home .mm-sample-panel{display:none;} #mm-home .mm-sample-panel.is-active{display:block;} #mm-home .mm-sample-stage.module-player{background:transparent;border:0;padding:0;} /* worn analog console skin — client ref: SSL 4000 / Neve 5088, aged decades, not fresh off the line: light-to-mid grey aluminum yellowed warm by UV/handling, uneven patina blotches, a couple of scuff scratches near the screws (the highest-touch spot on a real panel). Screws sit only at the TOP corners since the button row bleeds flush to the bottom edge with zero padding. */ /* Chassis, take 4. Round 2 (cool grey) read as "generic digital panel"; round 3 (warm tan/khaki, heavy patina blobs) read as "wood" and, per client, "cheap" — too many competing gradient layers with no consistent light source, which reads as dirty rather than machined. This version: one light source (top-left), warm-neutral GREY (not tan) so it stays metal, not wood, a single confident directional gradient instead of five overlapping patina patches, a real bevel (bright top edge, dark bottom edge) so the whole card reads as a physical object with thickness, and a tighter drop shadow so it feels like it's sitting proud of the page rather than pasted flat. */ #mm-home .mm-sample-panels{ position:relative;border-radius:var(--r-lg);padding:22px 22px 0;overflow:hidden; background-color:#84807a; background-image: radial-gradient(circle at 16px 16px, #45423d 0 1.4px, rgba(0,0,0,.3) 1.4px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 16px) 16px, #45423d 0 1.4px, rgba(0,0,0,.3) 1.4px 2.2px, transparent 2.6px), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 36%, rgba(255,255,255,.03) 42%, transparent 50%), repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), linear-gradient(160deg, #9d988f 0%, #86817a 32%, #6c6862 68%, #524f4a 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.28), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.15), 0 28px 48px -26px rgba(0,0,0,.6); border:1px solid rgba(0,0,0,.3); } #mm-home .mm-sample-panel{position:relative;} /* small engraved brand plate — same restrained detail language as the corner screws; a real console module always names itself. */ #mm-home .mm-sample-panels::before{ content:'MAJOR MIXING'; position:absolute;top:9px;left:50%;translate:-50% 0;z-index:1; font-family:var(--font-mono);font-size:.5625rem;font-weight:500;letter-spacing:.22em; color:rgba(0,0,0,.32);text-shadow:0 1px 0 rgba(255,255,255,.35); pointer-events:none; } /* real per-track waveform — actual amplitude peaks extracted from each before/after mp3 (56 bars mirrored top/bottom into one SVG polygon — see functions.php mm_wave_polygon_points() and /scratchpad/extract_waveform.py — no live audio-analysis pipeline exists, so this is precomputed once and stored as postmeta _mm_wave_before/_mm_wave_after, not invented or randomized). Styled as a period-correct CRT oscilloscope trace — dark phosphor screen, graticule grid, scanlines, glowing green trace — the reference the client asked for (studio 'scopes of the SSL/Neve era). "Before" is a dim unlit trace, "after" the full bright phosphor glow. */ #mm-home .mm-scope{ position:relative;height:128px;margin-bottom:16px;border-radius:6px;overflow:hidden; background:radial-gradient(ellipse at center, #0e1f16 0%, #081410 70%, #050b08 100%); box-shadow: inset 0 0 24px rgba(0,0,0,.85), inset 0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.25); } #mm-home .mm-scope::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); } /* fixed "now" marker — the client's own mental model: "точка стоїть на місці, а хвиля рухається зліва" (the point stays still, the wave moves). Tracks a REAL position (2026-08-20): homepage.js reads the playing