/* ========================================================= HOME: the storefront's front page Loaded after styles.css. This file is only the homepage's own layout; the design language it introduced (flat cards, one accent, no glows, no section labels, the commissions switch, the closing band) lives in styles.css and applies site-wide. Rules here either use the hm- prefix, which only exists in the home markup, or sit under .page[data-page="home"]. The one exception is the header search, which steps aside while the hero's own search is on screen. ========================================================= */ /* One search bar at a time: the header's hides while the hero's is on screen (main.js: hmWatchHeroSearch). The inline script in sets both flags before first paint on "/" so it never flashes. */ html[data-page="home"] #mkSearchForm{transition:opacity .25s var(--ease),visibility .25s;} html[data-page="home"].hm-hero-search-in-view #mkSearchForm{opacity:0;visibility:hidden;} /* ---------- shared pieces ---------- */ .page[data-page="home"] .hm-section{position:relative;z-index:2;padding:0 0 96px;} .page[data-page="home"] .hm-section-last{padding-bottom:40px;} .page[data-page="home"] .page-cta-band{margin-top:0;} .hm-head{ display:flex;align-items:baseline;justify-content:space-between; gap:12px 24px;flex-wrap:wrap;margin-bottom:24px; } .page[data-page="home"] h2{font-size:clamp(22px,2.3vw,28px);line-height:1.15;letter-spacing:-.02em;} .hm-more{ font-size:13.5px;color:var(--dim);white-space:nowrap;transition:color .2s; } .hm-more:hover{color:var(--white);} .hm-more-dim{color:var(--dimmer);} .hm-new{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0; color:var(--accent);vertical-align:middle; } .hm-price{ font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600; color:var(--white);white-space:nowrap;letter-spacing:-.01em; } .hm-price.is-free{color:var(--good);} /* ---------- free tools ---------- Six /tools cards (.tl-card, styles.css) in a fixed grid: three across, two on tablets and phones, one on very narrow screens. No carousel. */ .hm-tools-intro{min-width:0;max-width:720px;} .hm-tools-lede{margin-top:10px;font-size:15px;line-height:1.6;color:var(--dim);text-wrap:pretty;} .hm-tools-note{margin-top:4px;font-size:13px;color:var(--dimmer);} .hm-tools-all{flex:0 0 auto;} .hm-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;} /* Media plates share one quiet hover: a little brighter, never lifted. */ .hm-cover canvas,.hm-thumb canvas,.hm-plugin-media img,.hm-pack-media img{ transition:filter .3s var(--ease),transform .6s var(--ease); } /* ---------- hero ---------- */ .page[data-page="home"] .hm-hero{ position:relative;z-index:2; padding:calc(var(--header-h) + 28px) 0 64px; } /* Sized so the categories heading lands at the fold of an 800px-tall laptop screen. */ .hm-hero-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:72px;align-items:center; } /* (The status line above the wordmark is the global .status-line.) */ .hm-hero-title{margin:22px 0 0;line-height:0;} /* The chrome mark is dark gunmetal; on near-black it read as mud. Lifting its brightness keeps the metal and makes it legible, same as the header logo. A lighter chrome export would do this better than a filter. */ .hm-wordmark{ display:block;width:min(500px,100%);height:auto; filter:brightness(1.7) contrast(1.06); } .hm-hero-sub{ margin-top:20px;max-width:34ch; font-size:17px;line-height:1.55;color:var(--dim);text-wrap:balance; } .page[data-page="home"] .hm-hero .mk-search-big{margin:32px 0 0;max-width:540px;} .page[data-page="home"] .hm-hero .mk-search-big .mk-search-go{padding:0 20px;} .page[data-page="home"] .hm-hero .mk-suggest-chips{margin-top:14px;} /* The way to the free tools from the first screen: ink text with the rail's pink bolt, underlined so it reads as a link, not a chip. */ .hm-hero-tools{ display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 0; font-size:14.5px;font-weight:500;color:var(--white); text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px; transition:text-decoration-color .2s; } .hm-hero-tools svg{flex:0 0 auto;color:var(--accent);} .hm-hero-tools:hover{text-decoration-color:currentColor;} /* The work. Nine covers, the middle column dropped a little so the grid reads as a wall of prints rather than a spreadsheet. */ .hm-hero-copy,.hm-hero-art{min-width:0;} .hm-hero-art{position:relative;} .hm-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;} .hm-cover{ display:block;padding:0;border:0;cursor:pointer; aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--card); animation:hmRise .7s var(--ease) both;animation-delay:calc(var(--i, 0) * 45ms); } .hm-cover canvas{display:block;width:100%;height:100%;object-fit:cover;} .hm-cover:nth-child(3n+2){margin-top:24px;margin-bottom:-24px;} .hm-cover:hover canvas{transform:scale(1.035);filter:brightness(1.08);} .hm-covers-cap{ display:flex;justify-content:space-between;gap:16px;margin-top:40px; font-size:13px;color:var(--dimmer); } .hm-covers-cap a{color:var(--dim);transition:color .2s;} .hm-covers-cap a:hover{color:var(--white);} @keyframes hmRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion: reduce){ .hm-cover{animation:none;} } /* ---------- categories ---------- The tiles themselves are styled in styles.css (.mk-dept-*). An odd count makes the first tile a 2x2 feature (mkRenderDeptTiles sets --dept-cols) so the grid closes in exactly two rows. */ .hm-depts{ display:grid;grid-template-columns:repeat(var(--dept-cols,5),minmax(0,1fr)); gap:22px 16px; } /* Plugin art is a 16:9 screenshot with the name on the right; crop to that side so the tile shows the product, not half a knob. */ .page[data-page="home"] .mk-dept-tile[data-dept="vsts"] .mk-dept-art > img{object-position:right center;} .page[data-page="home"] .mk-dept-tile.is-feature{grid-column:span 2;grid-row:span 2;} .page[data-page="home"] .mk-dept-tile.is-feature .mk-dept-art{aspect-ratio:auto;flex:1 1 auto;min-height:0;} .page[data-page="home"] .mk-dept-tile.is-feature .mk-dept-name{font-size:17px;} /* ---------- plugins ---------- */ .hm-plugins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;} .hm-plugin{display:flex;flex-direction:column;gap:16px;min-width:0;} .hm-plugin-media{ display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--card); } .hm-plugin-media img{display:block;width:100%;height:100%;object-fit:cover;} .hm-plugin:hover .hm-plugin-media img{transform:scale(1.02);filter:brightness(1.06);} .hm-plugin-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;} .hm-plugin-text{min-width:0;} .hm-plugin-title{font-size:19px;line-height:1.25;} .hm-plugin-title a{transition:color .2s;} .hm-plugin-title a:hover{color:var(--dim);} .hm-plugin-sub{margin-top:5px;font-size:14px;line-height:1.5;color:var(--dim);max-width:46ch;} .hm-plugin-buy{display:flex;align-items:center;gap:14px;flex:0 0 auto;} .hm-plugin-buy .hm-price{font-size:17px;} /* ---------- new beats: a track list ---------- */ .hm-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px;} .hm-track{ display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px; padding:8px 10px 8px 8px;border-radius:12px;transition:background .2s; } .hm-track:hover{background:rgba(255,255,255,.04);} .hm-track-art{ position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden; display:grid;place-items:center;background:var(--card-2);color:var(--dimmer); } .hm-track-art img{width:100%;height:100%;object-fit:cover;display:block;} /* Play sits on the cover and shows on hover (always on touch screens). */ .page[data-page="home"] .hm-track .mk-preview-btn{ inset:0;margin:auto;right:auto;bottom:auto;width:34px;height:34px; opacity:0;transition:opacity .2s,background .2s; } .page[data-page="home"] .hm-track .mk-preview-btn:hover{transform:none;} .hm-track:hover .mk-preview-btn, .page[data-page="home"] .hm-track .mk-preview-btn.is-playing, .page[data-page="home"] .hm-track .mk-preview-btn:focus-visible{opacity:1;} @media (hover:none){ .page[data-page="home"] .hm-track .mk-preview-btn{opacity:1;} } .hm-track-main{min-width:0;display:flex;flex-direction:column;gap:3px;} .hm-track-title{ font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s; } .hm-track-title:hover{color:var(--dim);} .hm-track-sub{ display:flex;align-items:baseline;gap:12px;min-width:0; font-size:13px;color:var(--dimmer);white-space:nowrap;overflow:hidden; } /* The producer's name wins the space; tempo and key truncate first. */ .hm-track-sub a{flex:0 0 auto;max-width:60%;overflow:hidden;text-overflow:ellipsis;transition:color .2s;} .hm-track-sub a:hover{color:var(--white);} /* Mono only where a producer reads numbers: tempo and key. */ .hm-track-meta{ font-family:'JetBrains Mono',monospace;font-size:11.5px; flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; } .hm-track-end{display:flex;align-items:center;gap:12px;} .page[data-page="home"] .hm-track .mk-like{ padding:5px 9px;border-color:transparent;background:none;font-size:11.5px; } .page[data-page="home"] .hm-track .mk-like:hover{border-color:var(--line);} .hm-get{ display:grid;place-items:center;width:36px;height:36px;border-radius:50%; border:1px solid var(--line-strong);color:var(--white); transition:background .2s,color .2s,border-color .2s; } .hm-get:hover{background:var(--white);color:var(--black);border-color:var(--white);} .hm-get:active{transform:translateY(1px);} /* ---------- kits, presets & textures ---------- */ .hm-packs{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px 16px; } .hm-pack{display:flex;flex-direction:column;gap:5px;min-width:0;} .hm-pack-media{ display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--card); margin-bottom:7px; } .hm-pack-media img{display:block;width:100%;height:100%;object-fit:cover;} .hm-pack:hover .hm-pack-media img{transform:scale(1.03);filter:brightness(1.08);} .hm-pack-kind{font-size:12.5px;color:var(--dimmer);} .hm-pack-title{ font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em; line-height:1.3; } .hm-pack-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .hm-pack-by{font-size:13px;color:var(--dimmer);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ---------- custom design ---------- */ .hm-design{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start; } .hm-lede{margin-top:12px;max-width:44ch;font-size:15.5px;line-height:1.6;color:var(--dim);} .hm-services{margin-top:26px;} .hm-service{ display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:18px; padding:16px 2px;transition:color .2s; } .hm-service + .hm-service{border-top:1px solid var(--line);} .hm-service-text{display:flex;flex-direction:column;gap:3px;min-width:0;} .hm-service-name{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;letter-spacing:-.01em;} .hm-service-blurb{font-size:13.5px;color:var(--dimmer);line-height:1.45;} .hm-service-price{font-size:14px;color:var(--dim);white-space:nowrap;} .hm-service-go{color:var(--dimmer);transition:transform .25s var(--ease),color .2s;} .hm-service:hover .hm-service-go{color:var(--white);transform:translate(2px,-2px);} .hm-service:hover .hm-service-name{color:var(--white);} .hm-note{margin-top:22px;max-width:52ch;font-size:14px;line-height:1.65;color:var(--dim);} .hm-note + .hm-note{margin-top:10px;} .hm-note b{color:var(--white);font-weight:500;} .hm-more-inline{display:inline-block;margin-top:22px;} /* Three thumbnails: one wide on top, two beneath. Exactly as many cells as pieces. */ .hm-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .hm-thumb{ display:block;padding:0;border:0;cursor:pointer; aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--card); } .hm-thumb:first-child{grid-column:1 / -1;} .hm-thumb canvas{display:block;width:100%;height:100%;object-fit:cover;} .hm-thumb:hover canvas{transform:scale(1.02);filter:brightness(1.08);} /* ---------- producers: a row of name tags ---------- */ .hm-sellers{display:flex;flex-wrap:wrap;gap:10px;} .page[data-page="home"] .hm-sellers .mk-seller-card{ gap:10px;padding:5px 16px 5px 5px;border-radius:100px; background:var(--card);border:1px solid var(--line);max-width:100%; } .page[data-page="home"] .hm-sellers .mk-seller-card:hover{transform:none;border-color:var(--line-strong);background:var(--card-2);} .page[data-page="home"] .hm-sellers .mk-seller-avatar{width:34px;height:34px;border:0;} .page[data-page="home"] .hm-sellers .mk-seller-initial{font-size:14px;} .page[data-page="home"] .hm-sellers .mk-seller-name{font-size:14.5px;} .page[data-page="home"] .hm-sellers .mk-seller-count{margin-left:4px;font-size:12.5px;} /* ---------- reviews ---------- Cards and the column flow are the global .review-card rules; the home version puts the average on the heading line and caps each quote. */ .hm-rating{display:flex;align-items:center;gap:10px;} .hm-rating .rating-number{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;line-height:1;} .hm-rating .rating-detail{font-size:13.5px;color:var(--dim);} .hm-reviews{columns:3 280px;column-gap:18px;} /* A homepage quote is a glance, so four lines at most; the full text is one click away on /reviews. */ .page[data-page="home"] .hm-reviews .review-quote{ display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .hm-reviews-foot{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px;} /* ---------- KitTheme ---------- One tile since the free tools moved up to their own section. */ .hm-extras{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;} .hm-extra{ display:flex;align-items:center;gap:18px;min-width:0; padding:22px 24px;border-radius:16px;background:var(--card);border:1px solid var(--line); transition:border-color .2s,background .2s; } .hm-extra:hover{border-color:var(--line-strong);background:var(--card-2);} .hm-extra-logo{ flex:0 0 auto;display:grid;place-items:center;height:70px;padding:0 16px;border-radius:14px; background:var(--black-2); } .hm-extra-logo img{width:92px;height:auto;display:block;} .hm-extra-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;} .hm-extra-body b{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3;} .hm-extra-body small{font-size:13.5px;line-height:1.5;color:var(--dim);} .hm-extra-go{flex:0 0 auto;font-size:13.5px;color:var(--dim);white-space:nowrap;transition:color .2s;} .hm-extra:hover .hm-extra-go{color:var(--white);} /* ---------- tablet ---------- */ @media (max-width:1040px){ /* minmax(0,1fr): a bare 1fr won't shrink below the scrolling chip row's full width, which pushed the page past a phone screen. */ .hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;} .page[data-page="home"] .hm-hero{padding-bottom:80px;} /* The wall becomes one row of six under the search. */ .hm-covers{grid-template-columns:repeat(6,minmax(0,1fr));} .hm-cover:nth-child(n+7){display:none;} .hm-cover:nth-child(3n+2){margin:0;} .hm-covers-cap{margin-top:14px;} .hm-tracks{grid-template-columns:minmax(0,1fr);} .hm-design{grid-template-columns:minmax(0,1fr);gap:36px;} } /* ---------- phone ---------- */ @media (max-width:860px){ .page[data-page="home"] .hm-section{padding-bottom:64px;} .page[data-page="home"] .hm-hero{padding:calc(var(--header-h) + 22px) 0 56px;} .hm-hero-title{margin-top:16px;} .hm-wordmark{width:min(340px,82vw);} .hm-hero-sub{margin-top:14px;font-size:16px;} /* The app shell's .mk-search rule shrinks every search to 38px, which left the hero's 44px button hanging out of its pill. */ .page[data-page="home"] .hm-hero .mk-search-big{ height:50px;margin-top:22px;padding:0 6px 0 16px; } .page[data-page="home"] .hm-hero .mk-search-big .mk-search-go{width:38px;height:38px;padding:0;} /* Suggestions stay on one line and scroll, instead of stacking. */ .page[data-page="home"] .hm-hero .mk-suggest-chips{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin:12px -20px 0;padding:0 20px; } .page[data-page="home"] .hm-hero .mk-suggest-chips::-webkit-scrollbar{display:none;} .page[data-page="home"] .mk-chip{flex:0 0 auto;} /* Categories, plugins and packs become sideways shelves. */ .hm-depts,.hm-packs{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; gap:12px;margin:0 -20px;padding:0 20px 4px; /* Without this the snap pulls the first tile flush to the screen edge. */ scroll-padding-inline:20px; } .hm-depts::-webkit-scrollbar,.hm-packs::-webkit-scrollbar,.hm-sellers::-webkit-scrollbar{display:none;} .hm-sellers{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin:0 -20px;padding:0 20px 2px; } .page[data-page="home"] .hm-sellers .mk-seller-card{flex:0 0 auto;} .page[data-page="home"] .mk-dept-tile, .hm-pack{flex:0 0 42%;scroll-snap-align:start;} .page[data-page="home"] .mk-dept-tile.is-feature .mk-dept-art{aspect-ratio:1/1;flex:none;} .page[data-page="home"] .mk-dept-tile.is-feature .mk-dept-name{font-size:15px;} .hm-plugins{grid-template-columns:minmax(0,1fr);gap:32px;} .hm-plugin-row{flex-direction:column;gap:12px;} .hm-reviews{columns:1;} .hm-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px){ .hm-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .hm-cover:nth-child(n+4){display:none;} .hm-extra{padding:18px;gap:14px;align-items:flex-start;} .hm-extra-go{display:none;} .hm-extra-logo{height:56px;padding:0 10px;} .hm-extra-logo img{width:72px;} .hm-track{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:6px 4px;} .hm-track-art{width:48px;height:48px;} .page[data-page="home"] .hm-track .mk-like{display:none;} .hm-thumbs{gap:8px;} } /* Two columns of the full card leave ~80px for the words on a phone, so the card turns compact: icon and name on one row, the line under both. Below 360px it goes back to one full card per row. */ @media (max-width:560px){ .hm-tools-grid{gap:8px;} .hm-tools-grid .tl-card{ display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;align-content:start; column-gap:10px;row-gap:6px;padding:12px; } .hm-tools-grid .tl-card .mk-app-icon{width:32px;height:32px;border-radius:9px;} .hm-tools-grid .tl-card .mk-app-icon svg{width:18px;height:18px;} .hm-tools-grid .tl-card-text{display:contents;} .hm-tools-grid .tl-card-title{font-size:14px;} .hm-tools-grid .tl-card-desc{grid-column:1 / -1;font-size:12.5px;} } @media (max-width:359px){ .hm-tools-grid{grid-template-columns:minmax(0,1fr);} }