/* Infinite Commerce — storefront commerce block (drops into the dark theme) */ .ic-commerce{ --ic-line:rgba(255,255,255,.12); --ic-muted:rgba(255,255,255,.55); --ic-faint:rgba(255,255,255,.30); --ic-btn:rgba(255,255,255,.07); --ic-btn-h:rgba(255,255,255,.16); color:inherit;max-width:560px;line-height:1.6; } .ic-commerce .ic-price-row{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;flex-wrap:wrap} .ic-commerce .ic-price-now{font-size:1.5em;font-variant-numeric:tabular-nums} .ic-commerce .ic-price-was{opacity:.4;text-decoration:line-through;font-size:1.05em} .ic-commerce .ic-price-save{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ic-line);border-radius:999px;padding:3px 10px;opacity:.85;align-self:center} .ic-commerce .ic-own{border:1px solid var(--ic-line);border-radius:4px;padding:14px 16px;margin:0 0 22px;background:rgba(255,255,255,.015)} .ic-commerce .ic-own-line{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.08em;font-size:.78em} .ic-commerce .ic-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;flex:0 0 auto} .ic-commerce .ic-segs{display:flex;gap:6px;margin:13px 0 6px} .ic-commerce .ic-segs i{flex:1;height:5px;border-radius:3px;background:currentColor;opacity:.16} .ic-commerce .ic-segs i.ic-on{opacity:1} .ic-commerce .ic-meter{height:3px;border-radius:3px;background:var(--ic-btn);margin:12px 0 5px;overflow:hidden} .ic-commerce .ic-meter span{display:block;height:100%;background:currentColor;opacity:.85} .ic-commerce .ic-own-sub{text-transform:uppercase;letter-spacing:.1em;font-size:.72em;opacity:.55} .ic-commerce .ic-cta{ display:inline-flex;align-items:center;gap:.55em; text-transform:uppercase;letter-spacing:.22em;font-size:.72em; border:1px solid var(--ic-line);border-radius:999px;padding:13px 30px; color:inherit;text-decoration:none;background:var(--ic-btn);cursor:pointer; transition:background .2s,border-color .2s; } .ic-commerce .ic-cta:hover{background:var(--ic-btn-h);border-color:rgba(255,255,255,.22)} .ic-commerce .ic-cta bdi{font-variant-numeric:tabular-nums} .ic-commerce .ic-note{font-size:.8em;opacity:.55;margin:10px 0 0;letter-spacing:.03em} .ic-commerce .ic-xsell{margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);opacity:.72;font-size:.95em} .ic-commerce .ic-xsell a{color:inherit;border-bottom:1px solid var(--ic-faint);text-decoration:none} .ic-commerce .ic-xsell a:hover{border-color:currentColor} .ic-commerce .ic-owned{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.2em;font-size:.8em;opacity:.9} .ic-commerce .ic-owned svg{width:15px;height:15px} /* licensing modal */ .ic-overlay{position:fixed;inset:0;z-index:99999;background:rgba(4,4,6,.8);display:flex;align-items:center;justify-content:center;padding:24px} .ic-overlay[hidden]{display:none} .ic-modal{width:100%;max-width:520px;background:#0d0d10;color:#e9e8ea;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:38px;position:relative;font-family:inherit;animation:icRise .32s cubic-bezier(.2,.7,.2,1)} @keyframes icRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .ic-modal .ic-x{position:absolute;top:14px;right:18px;cursor:pointer;opacity:.5;font-size:22px;line-height:1} .ic-modal .ic-x:hover{opacity:1} .ic-modal h3{font-weight:400;font-size:1.5em;margin:0 0 6px} .ic-modal .ic-lead{opacity:.6;font-size:.95em;margin:0 0 24px} .ic-modal .ic-lic{display:flex;gap:13px;align-items:flex-start;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:14px 16px;margin-bottom:22px;cursor:pointer} .ic-modal .ic-lic input{margin-top:5px} .ic-modal .ic-lic-t{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:.78em} .ic-modal .ic-lic-d{display:block;opacity:.6;font-size:.92em;margin-top:3px} .ic-modal .ic-b2b{font-size:.9em;opacity:.7;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:12px 14px;margin-bottom:24px} .ic-modal .ic-b2b a{color:inherit} .ic-modal .ic-actions{display:flex;justify-content:flex-end;gap:12px} .ic-modal .ic-ghost{background:transparent} /* --- Pack auto-page: scoped to .ic-pack-page so other product types are untouched --- */ /* Theme hides h1.entry-title globally; show the pack title in the header. */ .ic-pack-page .header-station .entry-title{display:block} /* Port the album (.single-station) row tweaks. */ .ic-pack-page .block-loop-index.block-loop-row .block-loop-item:before{content:'' !important;display:none} .ic-pack-page .block-loop-index.block-loop-row .block-loop-item .post-thumbnail{margin-right:20px !important} /* Hide the default WooCommerce single-product chrome on pack pages: the empty summary column, the single "Description" tab bar + heading, and related products. The pack page is composed entirely inside the description tab. */ .ic-pack-page .summary.entry-summary{display:none} .ic-pack-page .woocommerce-tabs ul.tabs{display:none} .ic-pack-page .woocommerce-Tabs-panel--description>h2{display:none} .ic-pack-page .related.products{display:none} /* Align the track listing with the header: give .entry-content the same horizontal padding the header (.header-station) already uses, so the filters and rows don't hug the sidebar. Bump --x-gap if you want more overall inset. */ .ic-pack-page .entry-content{padding-left:var(--x-gap);padding-right:var(--x-gap)} /* Header spacing: cap the description like the album and give the pricing room. */ .ic-pack-page .header-station .station-content{max-width:28rem;margin-bottom:1.25rem} .ic-pack-page .header-station .station-content>p:last-child{margin-bottom:0} .ic-pack-page .header-station .ic-commerce{margin-top:0.25rem} .ic-pack-page .ic-owned{display:inline-flex;align-items:center;gap:.5rem;margin-top:.25rem} /* A little gap between the filter bar and the first track row. */ .ic-pack-page .block-loop-items{padding-top:1.5rem} /* Filter pills: inside the .woocommerce wrapper, WooCommerce's `a.button` rules (bg #444, large padding, its own radius) repaint the loop-block filter toggles, so they no longer match the album. Re-assert the theme's button look using the theme's own variables. !important is needed to beat WooCommerce's button selectors on a product page. */ .ic-pack-page .loop-filter a.dropdown-toggle.button{ background-color:var(--color-grey-600) !important; color:#fff !important; border:1px solid var(--color-border) !important; border-radius:var(--button-radius) !important; padding:0.53125rem 0.5rem !important; font-size:0.875rem !important; line-height:1.5; } .ic-pack-page .loop-filter a.dropdown-toggle.button:hover{ border-color:var(--color-primary) !important; } /* Disable the theme's sticky/collapse-on-scroll header on pack pages entirely. The theme adds .scrolled to the body and turns .header-station into a compact sticky bar (small thumbnail + title, box-shadow, hidden description). On the pack page that looks broken, so neutralise every scrolled-state change back to the normal header. Variables use `inherit` so they fall back to the responsive :root/body values without hardcoding. Covers .scrolled on body or an ancestor. */ .ic-pack-page.scrolled .header-station, .scrolled .ic-pack-page .header-station{ position:static !important; background-color:transparent !important; box-shadow:none !important; padding:var(--x-gap) var(--x-gap) 1.5rem !important; grid-gap:var(--header-x-gap) !important; margin-bottom:0 !important; --header-image-size:inherit; --header-title-size:inherit; } .ic-pack-page.scrolled .header-station .station-content, .ic-pack-page.scrolled .header-station .entry-info, .ic-pack-page.scrolled .header-station .entry-tag, .scrolled .ic-pack-page .header-station .station-content{ visibility:visible !important; opacity:1 !important; position:static !important; } .ic-pack-page.scrolled .header-station .entry-title, .scrolled .ic-pack-page .header-station .entry-title{ display:block !important; -webkit-line-clamp:none !important; } /* --- Bundle page: pack/instrument card grid (scoped to .ic-bundle-page) --- Bundle pages also carry .ic-pack-page, so the intro/chrome/sticky rules above are shared; only the grid is bundle-specific. */ .ic-bundle-page .ic-bundle{margin-top:0} .ic-bundle-page .ic-bundle-head{ display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap; margin:clamp(2.5rem,6vw,4.5rem) 0 1.75rem; padding-top:2.5rem;border-top:1px solid var(--color-border); } .ic-bundle-page .ic-bundle-title{ margin:0;text-transform:uppercase;letter-spacing:.18em; font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.2; } .ic-bundle-page .ic-bundle-count{ font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary-color,#8b8d90); } .ic-bundle-page .ic-bundle-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2.5rem); } @media (max-width:980px){.ic-bundle-page .ic-bundle-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.ic-bundle-page .ic-bundle-grid{grid-template-columns:1fr}} .ic-bundle-page .ic-bundle-card{ display:flex;flex-direction:column;align-items:center;text-align:center; text-decoration:none;color:inherit; } .ic-bundle-page .ic-bundle-card-cover{ width:100%;aspect-ratio:1;overflow:hidden;border-radius:2px; background:var(--color-grey-600);position:relative; display:flex;align-items:center;justify-content:center; transition:transform .35s ease; } .ic-bundle-page .ic-bundle-card-cover .ic-bundle-card-img{ width:100%;height:100%;object-fit:cover;display:block; } .ic-bundle-page .ic-bundle-card-fallback{ padding:0 1rem;text-transform:uppercase;letter-spacing:.28em;font-size:13px; color:var(--text-secondary-color,#9a9c9f); } .ic-bundle-page .ic-bundle-card:hover .ic-bundle-card-cover{transform:translateY(-4px)} .ic-bundle-page .ic-bundle-card-caption{ margin-top:1.25rem;text-transform:uppercase;letter-spacing:.18em; font-size:12px;color:#cfd1d2; } .ic-bundle-page .ic-bundle-card-view{ margin-top:1rem;text-transform:uppercase;letter-spacing:.28em;font-size:11px; color:var(--text-secondary-color,#8b8d90); border:1px solid var(--color-border);border-radius:var(--button-radius); padding:.55rem 1.6rem;transition:border-color .2s ease,color .2s ease; } .ic-bundle-page .ic-bundle-card:hover .ic-bundle-card-view{ border-color:var(--color-primary);color:#eaeaea; } /* Owned state — shown in place of the add-to-cart button when the buyer already owns the product outright (see Infinite_Commerce_Storefront::owned_notice). */ .ic-owned-state{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0;} .ic-owned-state .ic-owned{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.2em;font-size:.8em;opacity:.9;} .ic-owned-state .ic-owned svg{width:15px;height:15px;flex:0 0 15px;} .ic-owned-state .ic-owned-cta{text-transform:uppercase;letter-spacing:.2em;font-size:.8em;text-decoration:underline;opacity:.7;} .ic-owned-state .ic-owned-cta:hover{opacity:1;} /* Queued WooCommerce notices surfaced on single product pages. */ /* ---- Product-page notices -------------------------------------------- * WooCommerce prints these as a red box with a warning glyph, which is a * different design language to everything around it, and reads as a failure. * Most of what lands here is not a failure -- "already in your basket" is a * fact -- so it is set as a quiet inset panel: message left, action right. * * Selectors carry .woocommerce-error as well as the wrapper because style.css * sets `border: 1px solid red !important` on `.woocommerce-error a.button`, * which is the same weight as a single-class rule here and loads later. The * extra class wins it outright rather than relying on load order. */ .ic-product-notices{max-width:720px;margin:0 auto 24px;padding:0 20px;} /* Fallback placement only: a notice left at the top of a hand-built page would sit under the fixed header, so it clears it. */ .ic-product-notices--clear{position:relative;z-index:6;padding-top:118px;} /* Normal hand-built placement: the notice follows the hero and just needs room. */ .ic-product-notices--below-hero{position:relative;z-index:6;margin-top:38px;} /* ---- The notice, wherever it appears -------------------------------- * * This started as product-page-only styling, which left the basket, the * checkout, the shop archive and the account pages showing the theme's * fallback: a transparent box with a 1px PURE WHITE border. On a black page * that is the highest-contrast edge available, so the notice ended up being * the loudest thing on a design whose whole argument is restraint. * * One system now covers all of them. * * SPECIFICITY, deliberately. style.css sets * .woocommerce-info, .woocommerce-message { border: 1px solid #fff !important } * which is one class plus !important. Every selector below carries two * classes, so it wins on specificity rather than on load order — which is not * something a plugin stylesheet can rely on. */ .ic-product-notices .woocommerce-error, .ic-product-notices .woocommerce-message, .ic-product-notices .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info{ margin:0 0 12px !important;padding:15px 20px !important;list-style:none; background:rgba(255,255,255,.035) !important; border:0.5px solid rgba(255,255,255,.1) !important;border-radius:0 !important; color:rgba(255,255,255,.72) !important;line-height:1.55; font-family:'adobe-garamond-pro',Georgia,serif;font-size:16px; } /* Woo's tick / warning glyph does not belong in this design. */ .ic-product-notices .woocommerce-error::before, .ic-product-notices .woocommerce-message::before, .ic-product-notices .woocommerce-info::before, .woocommerce-notices-wrapper .woocommerce-error::before, .woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before{display:none !important;} /* Message left, action right. Wraps to two lines on a narrow screen rather than crushing the message. */ .ic-product-notices .woocommerce-error li, .ic-product-notices .woocommerce-message li, .ic-product-notices .woocommerce-info li, .woocommerce-notices-wrapper .woocommerce-error li, .woocommerce-notices-wrapper .woocommerce-message li, .woocommerce-notices-wrapper .woocommerce-info li, .woocommerce .woocommerce-error li, .woocommerce .woocommerce-message li, .woocommerce .woocommerce-info li{ display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap; width:100%;margin:0;padding:0;list-style:none;text-align:left; } /* ---- The state mark ------------------------------------------------- * * A hairline disc carrying one character. WooCommerce gives us no element to * put it in, so it is a pseudo-element on the
  • — which also means it * cannot be lost to a plugin update rewriting the message string. * * The point of it is that the three states differ in SHAPE as well as in * colour. A red border alone is invisible to a meaningful number of people * and disappears entirely in a greyscale screenshot; a "!" does not. */ .ic-product-notices .woocommerce-error li::before, .ic-product-notices .woocommerce-message li::before, .ic-product-notices .woocommerce-info li::before, .woocommerce-notices-wrapper .woocommerce-error li::before, .woocommerce-notices-wrapper .woocommerce-message li::before, .woocommerce-notices-wrapper .woocommerce-info li::before, .woocommerce .woocommerce-error li::before, .woocommerce .woocommerce-message li::before, .woocommerce .woocommerce-info li::before{ content:"\2022"; /* • — a statement of fact */ flex:0 0 auto;width:23px;height:23px;border-radius:50%; border:0.5px solid rgba(255,255,255,.28); display:flex;align-items:center;justify-content:center; font-family:'adobe-garamond-pro',Georgia,serif;font-size:12px;line-height:1; color:rgba(255,255,255,.75); } .ic-product-notices .woocommerce-message li::before, .woocommerce-notices-wrapper .woocommerce-message li::before, .woocommerce .woocommerce-message li::before{ content:"\2713"; /* ✓ — something was done */ font-size:11px; } .ic-product-notices .woocommerce-error li::before, .woocommerce-notices-wrapper .woocommerce-error li::before, .woocommerce .woocommerce-error li::before{ content:"!"; /* ! — something was refused */ font-size:13px; } /* The message takes the remaining width so the action can sit hard right without justify-content, which would have separated a wrapped line badly. */ .ic-product-notices .woocommerce-error li, .ic-product-notices .woocommerce-message li, .ic-product-notices .woocommerce-info li, .woocommerce-notices-wrapper .woocommerce-error li, .woocommerce-notices-wrapper .woocommerce-message li, .woocommerce-notices-wrapper .woocommerce-info li, .woocommerce .woocommerce-error li, .woocommerce .woocommerce-message li, .woocommerce .woocommerce-info li{ justify-content:flex-start; } /* ---- The action ------------------------------------------------------ * * `order:2` and `margin-left:auto` rather than putting it last in the source, * because WooCommerce writes the link BEFORE the sentence in some messages * and after it in others. Ordering it here means the design does not depend * on which message happened to fire. */ .ic-product-notices .woocommerce-error a.button, .ic-product-notices .woocommerce-message a.button, .ic-product-notices .woocommerce-info a.button, .ic-product-notices .woocommerce-error a.wc-forward, .ic-product-notices .woocommerce-message a.wc-forward, .ic-product-notices .woocommerce-info a.wc-forward, .woocommerce-notices-wrapper .woocommerce-error a.button, .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-info a.button, .woocommerce-notices-wrapper .woocommerce-error a.wc-forward, .woocommerce-notices-wrapper .woocommerce-message a.wc-forward, .woocommerce-notices-wrapper .woocommerce-info a.wc-forward, .woocommerce .woocommerce-error a.button, .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-info a.button, .woocommerce .woocommerce-error a.wc-forward, .woocommerce .woocommerce-message a.wc-forward, .woocommerce .woocommerce-info a.wc-forward{ order:2;margin-left:auto !important;flex:none; padding:9px 16px !important;height:auto !important;line-height:1.2 !important; background:transparent !important;border-radius:0 !important; border:0.5px solid rgba(255,255,255,.28) !important; color:#fff !important;font-family:inherit; font-size:10px !important;letter-spacing:.2em;text-transform:uppercase;font-weight:600; transition:border-color .18s ease,background-color .18s ease; } .ic-product-notices .woocommerce-error a.button:hover, .ic-product-notices .woocommerce-message a.button:hover, .ic-product-notices .woocommerce-info a.button:hover, .ic-product-notices .woocommerce-error a.wc-forward:hover, .ic-product-notices .woocommerce-message a.wc-forward:hover, .ic-product-notices .woocommerce-info a.wc-forward:hover, .woocommerce-notices-wrapper .woocommerce-error a.button:hover, .woocommerce-notices-wrapper .woocommerce-message a.button:hover, .woocommerce-notices-wrapper .woocommerce-info a.button:hover, .woocommerce-notices-wrapper .woocommerce-error a.wc-forward:hover, .woocommerce-notices-wrapper .woocommerce-message a.wc-forward:hover, .woocommerce-notices-wrapper .woocommerce-info a.wc-forward:hover, .woocommerce .woocommerce-error a.button:hover, .woocommerce .woocommerce-message a.button:hover, .woocommerce .woocommerce-info a.button:hover, .woocommerce .woocommerce-error a.wc-forward:hover, .woocommerce .woocommerce-message a.wc-forward:hover, .woocommerce .woocommerce-info a.wc-forward:hover{ border-color:#fff !important;background-color:rgba(255,255,255,.05) !important;color:#fff !important; } /* An error is the same component with a warmer edge, not a different one. #C77B62 rather than red: it reads as attention on a black ground without becoming the only colour on a monochrome site. */ .ic-product-notices .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce .woocommerce-error{ border-color:rgba(199,123,98,.55) !important; color:rgba(255,255,255,.82) !important; } .ic-product-notices .woocommerce-error li::before, .woocommerce-notices-wrapper .woocommerce-error li::before, .woocommerce .woocommerce-error li::before{ border-color:rgba(199,123,98,.7);color:#C77B62; } @media (max-width:600px){ /* The action drops under the message rather than squeezing it. */ .ic-product-notices .woocommerce-message a.button, .ic-product-notices .woocommerce-message a.wc-forward, .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-message a.wc-forward, .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-message a.wc-forward{ margin-left:37px !important; /* aligns under the message, past the mark */ } } @media (max-width:782px){ .ic-product-notices--clear{padding-top:96px;} } /* Instruments are redeemed, not downloaded. */ .ic-dl-native{opacity:.6;font-size:.8em;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;} /* --------------------------------------------------------------------------- * Company team page, and the company request block. * * Both reuse .ic-own, .ic-note and .ic-cta from above, so what is here is only * what those cannot do: a