/* ========================================================================== Onyx Renewal — Home Implemented from Figma "Onyx Renewal — Home" (node 1:6), plus the cart flyout, predictive search and mobile menu added since. Loaded only by the home page markup, so bare element selectors are safe. 1 Tokens + base 2 Type helpers 3 Nav + hamburger 4 Hero 5 Predictive search 6 Trust bar 7 Catalog 8 The Onyx standard 9 Reviews 10 FAQ 11 CTA 12 Footer 13 Cart flyout 14 Mobile menu flyout 15 Responsive ========================================================================== */ :root { --onyx-accent: #58a8e8; --onyx-muted: #98a2ae; --onyx-pad: clamp(20px, 5.55vw, 96px); --onyx-max: 1536px; --onyx-hex: url("https://onyxrenewal.com/wp-content/uploads/2026/08/onyx-hexagon-bg-scaled.jpg"); --onyx-hex-alt: url("https://onyxrenewal.com/wp-content/uploads/2026/08/onyx-hexagon-bg-alt-scaled.jpg"); } /* Lighter background files for narrow viewports. */ @media (max-width: 900px) { :root { --onyx-hex: url("https://onyxrenewal.com/wp-content/uploads/2026/08/onyx-hexagon-bg-1536x945.jpg"); --onyx-hex-alt: url("https://onyxrenewal.com/wp-content/uploads/2026/08/onyx-hexagon-bg-alt-1536x945.jpg"); } } /* The neon stroke rotates by animating this angle. Registering it is what makes the conic-gradient interpolate rather than snap; browsers without @property simply render the gradient at its initial angle. */ @property --onyx-spin { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes onyx-spin { to { --onyx-spin: 360deg; } } /* -------------------------------------------------------------------------- 1 Tokens + base -------------------------------------------------------------------------- */ html { background: #000; } body { margin: 0 !important; padding: 0 !important; background: #000 !important; color: #fff; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body .wp-site-blocks, body .wp-block-post-content, body .entry-content { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* The flyouts render outside .onyx-page (they are appended to ), so every base rule below lists them explicitly. */ .onyx-page, .onyx-page *, .onyx-drawer, .onyx-drawer *, .onyx-mnav, .onyx-mnav * { box-sizing: border-box; } .onyx-page { overflow-x: clip; } .onyx-page a, .onyx-drawer a, .onyx-mnav a { color: inherit; text-decoration: none; } .onyx-page img, .onyx-page svg, .onyx-drawer img, .onyx-drawer svg, .onyx-mnav img, .onyx-mnav svg { display: block; } .onyx-page a:focus-visible, .onyx-page button:focus-visible, .onyx-page summary:focus-visible, .onyx-page input:focus-visible, .onyx-drawer a:focus-visible, .onyx-drawer button:focus-visible, .onyx-mnav a:focus-visible, .onyx-mnav button:focus-visible { outline: 2px solid var(--onyx-accent); outline-offset: 3px; } .onyx-shell { max-width: var(--onyx-max); margin-inline: auto; } .onyx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 2 Type helpers -------------------------------------------------------------------------- */ .onyx-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 11.5px; letter-spacing: 0.92px; color: var(--onyx-accent); } .onyx-eyebrow svg { width: 6px; height: 6px; flex: none; } .onyx-h2 { margin: 18px 0 0; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: clamp(34px, 3.4vw, 58px); line-height: 1.04; letter-spacing: -0.01em; color: #fff; } .onyx-h2 b { font-weight: 300; color: var(--onyx-accent); } .onyx-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 100px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 1.5px; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease; } .onyx-btn--primary { padding: 21px 38px; background: var(--onyx-accent); color: #050d14; box-shadow: 0 8px 32px rgba(88, 168, 232, 0.35); } .onyx-btn--primary:hover { background: #74b8ee; } .onyx-btn--ghost { padding: 20px 36px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; } .onyx-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); } .onyx-textlink { display: inline-flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1.44px; color: #fff; } .onyx-textlink svg { width: 18px; height: 12px; flex: none; transition: transform 0.18s ease; } .onyx-textlink:hover svg { transform: translateX(4px); } /* Shared round icon button (cart close, menu close). */ .onyx-iconbtn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(255, 255, 255, 0.03); color: #98a2ae; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .onyx-iconbtn svg { width: 16px; height: 16px; } .onyx-iconbtn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); } /* -------------------------------------------------------------------------- 3 Nav + hamburger -------------------------------------------------------------------------- */ .onyx-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; padding-inline: var(--onyx-pad); background: #000; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .onyx-logo { display: block; position: relative; width: 140px; height: 46px; flex: none; } .onyx-logo__name { position: absolute; left: 30px; top: 0; margin: 0; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 25px; letter-spacing: 4px; color: #fff; white-space: nowrap; } .onyx-logo__sub { position: absolute; left: 32px; top: 30px; margin: 0; font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 9.5px; letter-spacing: 4.94px; color: var(--onyx-accent); white-space: nowrap; } .onyx-logo__rule { position: absolute; top: 36px; width: 24px; height: 1px; background: var(--onyx-accent); } .onyx-logo__rule--start { left: 0; } .onyx-logo__rule--end { left: 116px; } .onyx-logo__slash { position: absolute; left: 100px; top: 4px; width: 16px; height: 14px; } .onyx-nav__menu { display: flex; align-items: center; gap: 38px; margin: 0; padding: 0; list-style: none; } .onyx-nav__menu a { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: 1.61px; color: #b8c2cc; white-space: nowrap; transition: color 0.18s ease; } .onyx-nav__menu a:hover, .onyx-nav__menu .is-current a { color: #fff; } .onyx-nav__actions { display: flex; align-items: center; gap: 22px; } .onyx-nav__icon { display: inline-flex; width: 18px; height: 18px; } .onyx-cart { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 100px; background: rgba(88, 168, 232, 0.1); border: 1px solid rgba(88, 168, 232, 0.45); transition: background-color 0.18s ease; } .onyx-cart:hover { background: rgba(88, 168, 232, 0.2); } .onyx-cart svg { width: 15px; height: 15px; flex: none; } .onyx-cart__count { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.32px; color: var(--onyx-accent); white-space: nowrap; } /* Hamburger — the bars morph into a cross while the panel flies in. */ .onyx-burger { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.03); cursor: pointer; } .onyx-burger span { position: absolute; left: 12px; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease; } .onyx-burger span:nth-child(1) { top: 15px; } .onyx-burger span:nth-child(2) { top: 21px; } .onyx-burger span:nth-child(3) { top: 27px; } .onyx-burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); } .onyx-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } .onyx-burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* -------------------------------------------------------------------------- 4 Hero -------------------------------------------------------------------------- */ .onyx-hero { --onyx-hv: 1; position: relative; display: flex; align-items: center; gap: 40px; min-height: 800px; padding-inline: var(--onyx-pad); overflow: hidden; } .onyx-hero::before, .onyx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* The fixed attachment is the parallax: the hexagons stay put while the section scrolls over them. */ .onyx-hero::before { background-image: var(--onyx-hex); background-size: cover; background-position: center; background-attachment: fixed; } .onyx-hero::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), #000); } .onyx-hero > * { position: relative; z-index: 1; } /* min-width:0 lets the column keep its designed 760px ceiling instead of being stretched to the width of the non-wrapping headline, which would otherwise shove the product visual off the right edge. */ .onyx-hero__copy { flex: 1 1 auto; min-width: 0; max-width: 760px; } .onyx-hero__eyebrow { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.72px; white-space: pre-wrap; } /* Two lines, as designed — the headline is allowed to run past the column. */ .onyx-hero__title { margin: 28px 0 0; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: clamp(30px, 6.2vw, 92px); line-height: 0.92; letter-spacing: -0.01em; white-space: nowrap; color: #fff; } .onyx-hero__title b { display: block; font-weight: 600; color: var(--onyx-accent); } .onyx-hero__lede { max-width: 560px; margin: 30px 0 0; font-size: 17px; line-height: 1.7; color: var(--onyx-muted); } .onyx-hero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; } .onyx-stats { display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 64px; } .onyx-stat { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; } .onyx-stat__value { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 34px; letter-spacing: -0.01em; color: #fff; } .onyx-stat__label { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; font-size: 10px; letter-spacing: 0.8px; color: #6b7885; } .onyx-stats__sep { flex: none; width: 1px; height: 44px; margin-inline: 40px; background: rgba(255, 255, 255, 0.12); } /* Hero visual: the composition keeps its designed pixel geometry and is scaled as a whole so nothing drifts out of alignment. */ .onyx-hero__visual { position: relative; flex: 0 0 auto; width: calc(736px * var(--onyx-hv)); height: calc(780px * var(--onyx-hv)); } .onyx-hero__canvas { position: absolute; top: 0; left: 0; width: 736px; height: 780px; transform: scale(var(--onyx-hv)); transform-origin: top left; } .onyx-hero__glow { position: absolute; left: 0; top: 20px; width: 760px; height: 760px; } .onyx-deco { position: absolute; display: flex; align-items: center; justify-content: center; } .onyx-deco svg { transform: rotate(-90deg); } .onyx-deco--a { left: 218px; top: -26px; width: 79.12px; height: 86px; } .onyx-deco--b { left: 224px; top: 446px; width: 68.08px; height: 74px; } .onyx-deco--c { left: 370px; top: -50px; width: 64.4px; height: 70px; } .onyx-deco--d { left: 418px; top: 512px; width: 80.96px; height: 88px; } .onyx-hero__photo { position: absolute; left: 104px; top: 46px; width: 566px; height: 687px; filter: drop-shadow(0 44px 80px rgba(0, 0, 0, 0.75)); } .onyx-hero__photo img { position: absolute; left: 2.11%; top: 4.58%; width: 83.57%; height: 88.22%; object-fit: contain; } .onyx-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 18px; border-radius: 100px; background: rgba(14, 17, 20, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.63px; color: #fff; white-space: pre; } .onyx-chip--a { left: 4px; top: 250px; } .onyx-chip--b { left: 462px; top: 158px; } .onyx-chip--c { left: 22px; top: 566px; } .onyx-chip__dot { position: relative; flex: none; width: 7px; height: 7px; } .onyx-chip__dot svg { position: absolute; left: -8px; top: -8px; width: 23px; height: 23px; } /* -------------------------------------------------------------------------- 5 Predictive search -------------------------------------------------------------------------- */ /* z-index:0 makes this a stacking context so the field's blurred bloom (z-index:-1) paints above this section's background instead of under it. */ .onyx-search { position: relative; z-index: 0; padding: clamp(44px, 5vw, 68px) var(--onyx-pad); background: #000; } .onyx-search__form { position: relative; max-width: 720px; margin-inline: auto; } .onyx-search__label { display: flex; justify-content: center; margin: 0 0 18px; } .onyx-search__field { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 22px; border-radius: 100px; background: #0a0c0f; } /* The rotating neon stroke: a conic gradient masked down to a 2px ring. */ .onyx-search__field::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: conic-gradient( from var(--onyx-spin), rgba(88, 168, 232, 0) 0deg, rgba(88, 168, 232, 0) 35deg, #58a8e8 95deg, #dcefff 120deg, #58a8e8 145deg, rgba(88, 168, 232, 0) 205deg, rgba(88, 168, 232, 0) 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: onyx-spin 4.5s linear infinite; pointer-events: none; } /* …and the same gradient blurred behind it for the neon bloom. */ .onyx-search__field::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 100px; background: conic-gradient( from var(--onyx-spin), rgba(88, 168, 232, 0) 0deg, rgba(88, 168, 232, 0) 35deg, #58a8e8 95deg, #dcefff 120deg, #58a8e8 145deg, rgba(88, 168, 232, 0) 205deg, rgba(88, 168, 232, 0) 360deg ); filter: blur(16px); opacity: 0.55; animation: onyx-spin 4.5s linear infinite; pointer-events: none; } .onyx-search__icon { flex: none; width: 18px; height: 18px; color: var(--onyx-accent); } .onyx-search__field input { flex: 1 1 auto; min-width: 0; padding-block: 14px; border: 0; outline: none; background: none; font-family: "Inter", sans-serif; font-size: 15.5px; color: #fff; -webkit-appearance: none; appearance: none; } .onyx-search__field input::placeholder { color: #6b7887; } .onyx-search__field input::-webkit-search-cancel-button { display: none; } .onyx-search__go { flex: none; padding: 14px 26px; border: 0; border-radius: 100px; background: var(--onyx-accent); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.32px; color: #050d14; cursor: pointer; transition: background-color 0.18s ease; } .onyx-search__go:hover { background: #74b8ee; } .onyx-search__list { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 6; margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: #0a0c0f; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .onyx-search__list[hidden] { display: none; } .onyx-search__item a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; transition: background-color 0.15s ease; } .onyx-search__item a:hover, .onyx-search__item.is-active a { background: rgba(88, 168, 232, 0.12); } .onyx-search__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; background: radial-gradient( ellipse 45.45% 45.45% at 50% 61.82%, #1a2636 0%, #121a24 27.5%, #0b0e12 55%, #030405 100% ); } .onyx-search__thumb img { width: 100%; height: 100%; object-fit: cover; } .onyx-search__name { min-width: 0; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 14px; color: #fff; } .onyx-search__price { margin-left: auto; padding-left: 12px; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 17px; letter-spacing: -0.01em; color: #fff; white-space: nowrap; } .onyx-search__note { margin: 0; padding: 16px 12px; font-size: 13.5px; color: var(--onyx-muted); } /* -------------------------------------------------------------------------- 6 Trust bar -------------------------------------------------------------------------- */ .onyx-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 86px; padding: 18px var(--onyx-pad); background: #050608; border-top: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .onyx-trust span { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.88px; color: #bac4cf; white-space: nowrap; } .onyx-trust__sep { display: inline-flex; justify-content: center; flex: none; width: clamp(30px, 5vw, 73px); height: 5px; } /* -------------------------------------------------------------------------- 7 Catalog -------------------------------------------------------------------------- */ .onyx-catalog { padding: clamp(72px, 9vw, 132px) var(--onyx-pad); background: #000; } .onyx-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .onyx-sechead__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; } .onyx-sechead__aside p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--onyx-muted); } .onyx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; margin-top: 54px; } /* No overflow:hidden here — it would clip the neon ring, so the image corners are clipped on .onyx-card__media instead. */ .onyx-card { position: relative; display: flex; flex-direction: column; background: #0a0c0f; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; box-shadow: 0 0 22px rgba(88, 168, 232, 0.1); transition: box-shadow 0.25s ease, border-color 0.25s ease; } /* Same rotating stroke as the search field. */ .onyx-card::before { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: 21px; background: conic-gradient( from var(--onyx-spin), rgba(88, 168, 232, 0) 0deg, rgba(88, 168, 232, 0) 45deg, #58a8e8 100deg, #dcefff 125deg, #58a8e8 150deg, rgba(88, 168, 232, 0) 205deg, rgba(88, 168, 232, 0) 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: onyx-spin 7s linear infinite; opacity: 0.85; pointer-events: none; } .onyx-card:hover { border-color: rgba(88, 168, 232, 0.28); box-shadow: 0 0 34px rgba(88, 168, 232, 0.26); } /* Figma showed a typeset label panel here; the shipped card uses the real product photograph from the catalogue. */ .onyx-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 366 / 272; border-radius: 19px 19px 0 0; background: radial-gradient( ellipse 45.45% 45.45% at 50% 61.82%, #1a2636 0%, #121a24 27.5%, #0b0e12 55%, #030405 100% ); } .onyx-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .onyx-card__info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px; } .onyx-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .onyx-card__name { margin: 0; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16.5px; letter-spacing: 0.165px; color: #fff; } .onyx-badge { flex: none; padding: 5px 10px; border-radius: 4px; background: rgba(88, 168, 232, 0.12); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 8.5px; letter-spacing: 0.68px; color: var(--onyx-accent); white-space: nowrap; } .onyx-card__spec { margin: 9px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.6px; color: #6b7887; white-space: pre; } .onyx-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; } .onyx-price { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 27px; letter-spacing: -0.01em; color: #fff; } .onyx-add { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 100px; background: var(--onyx-accent); box-shadow: 0 6px 22px rgba(88, 168, 232, 0.35); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: 1.26px; color: #050d14; white-space: nowrap; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .onyx-add:hover { background: #74b8ee; box-shadow: 0 8px 28px rgba(88, 168, 232, 0.5); } .onyx-add.is-busy { opacity: 0.55; pointer-events: none; } /* -------------------------------------------------------------------------- 8 The Onyx standard -------------------------------------------------------------------------- */ .onyx-why { position: relative; padding: clamp(72px, 8.5vw, 128px) var(--onyx-pad); background: #060709; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; text-align: center; } .onyx-why::before { content: ""; position: absolute; inset: 0; background-image: var(--onyx-hex-alt); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.2; pointer-events: none; } .onyx-why > * { position: relative; z-index: 1; } .onyx-why .onyx-h2 { margin-top: 22px; font-size: clamp(32px, 3.3vw, 56px); line-height: 1.1; } .onyx-why__sub { max-width: 700px; margin: 20px auto 0; font-size: 16.5px; line-height: 1.7; color: var(--onyx-muted); } .onyx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 74px; text-align: left; } .onyx-tile { display: flex; flex-direction: column; padding: 34px 32px 38px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .onyx-tile__bar { width: 34px; height: 2px; border-radius: 2px; background: var(--onyx-accent); } .onyx-tile__num { margin: 26px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.88px; color: #5c6978; } .onyx-tile__title { margin: 16px 0 0; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0.68px; color: #fff; } .onyx-tile p { margin: 16px 0 0; font-size: 14px; line-height: 1.72; color: var(--onyx-muted); } /* -------------------------------------------------------------------------- 9 Reviews -------------------------------------------------------------------------- */ .onyx-reviews { padding: clamp(72px, 8.5vw, 128px) var(--onyx-pad); background: #000; } .onyx-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .onyx-rating__row { display: flex; align-items: center; gap: 14px; } .onyx-rating__score { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 44px; letter-spacing: -0.02em; color: #fff; } .onyx-stars { display: flex; gap: 5px; } .onyx-stars svg { width: 15px; height: 15px; } .onyx-rating__meta { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.84px; color: #6b7887; } .onyx-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 70px; } .onyx-review { display: flex; flex-direction: column; padding: 36px 36px 34px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .onyx-review__quote { margin: 24px 0 0; font-size: 16px; line-height: 1.78; color: #fff; } .onyx-review__rule { height: 1px; margin-top: 30px; background: rgba(255, 255, 255, 0.14); } .onyx-review__name { margin: 24px 0 0; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 1.25px; color: #fff; } .onyx-review__role { margin: 9px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.6px; color: #6b7887; white-space: pre; } .onyx-review__tag { align-self: flex-start; margin-top: 16px; padding: 6px 12px; border-radius: 4px; background: rgba(88, 168, 232, 0.11); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 9px; letter-spacing: 0.72px; color: var(--onyx-accent); } /* -------------------------------------------------------------------------- 10 FAQ -------------------------------------------------------------------------- */ .onyx-faq { display: flex; gap: 110px; padding: clamp(72px, 8.5vw, 128px) var(--onyx-pad); background: #060709; border-top: 1px solid rgba(255, 255, 255, 0.08); } .onyx-faq__intro { flex: none; width: 480px; } .onyx-faq__intro .onyx-h2 { margin-top: 22px; font-size: clamp(32px, 3.1vw, 52px); line-height: 1.06; } .onyx-faq__intro p { max-width: 400px; margin: 26px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--onyx-muted); } .onyx-faq__contact { margin-top: 36px; padding: 19px 32px; } .onyx-faq__contact svg { width: 16px; height: 11px; flex: none; } .onyx-faq__list { flex: 1 1 auto; min-width: 0; } .onyx-faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.11); } .onyx-faq__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.11); } .onyx-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; list-style: none; cursor: pointer; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 18.5px; line-height: 1.5; color: #d9e0e8; transition: color 0.18s ease; } .onyx-faq__item summary::-webkit-details-marker { display: none; } .onyx-faq__item summary:hover { color: #fff; } .onyx-faq__item[open] summary { padding-bottom: 0; font-weight: 600; color: #fff; } .onyx-faq__icon { position: relative; flex: none; width: 20px; height: 20px; } .onyx-faq__icon svg { position: absolute; inset: 0; } .onyx-faq__item[open] .onyx-faq__icon .onyx-i-plus, .onyx-faq__item:not([open]) .onyx-faq__icon .onyx-i-minus { opacity: 0; } .onyx-faq__item p { max-width: 820px; margin: 18px 0 30px; font-size: 15.5px; line-height: 1.8; color: var(--onyx-muted); } /* -------------------------------------------------------------------------- 11 CTA -------------------------------------------------------------------------- */ .onyx-cta { position: relative; padding: clamp(90px, 10vw, 150px) var(--onyx-pad); background: #000; overflow: hidden; text-align: center; } .onyx-cta::before { content: ""; position: absolute; inset: 0; background-image: var(--onyx-hex); background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.2; pointer-events: none; } .onyx-cta__glow { position: absolute; left: 50%; top: -240px; width: 1500px; max-width: none; height: 760px; transform: translateX(-50%); pointer-events: none; } .onyx-cta > *:not(.onyx-cta__glow) { position: relative; z-index: 1; } .onyx-cta__title { margin: 28px 0 0; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: clamp(38px, 4.4vw, 72px); letter-spacing: -0.02em; color: #fff; } .onyx-cta__title b { font-weight: 300; color: var(--onyx-accent); } .onyx-cta p:not(.onyx-cta__fine) { max-width: 680px; margin: 26px auto 0; font-size: 17px; line-height: 1.72; color: var(--onyx-muted); } .onyx-cta__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 46px; } .onyx-cta__actions .onyx-btn--primary { padding: 22px 40px; box-shadow: 0 10px 36px rgba(88, 168, 232, 0.4); } .onyx-cta__actions .onyx-btn--ghost { padding: 21px 38px; background: rgba(255, 255, 255, 0.04); } .onyx-cta__fine { margin: 34px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.84px; color: #616e7d; white-space: pre-wrap; } /* -------------------------------------------------------------------------- 12 Footer -------------------------------------------------------------------------- */ .onyx-footer { padding: 104px var(--onyx-pad) 52px; background: #040507; border-top: 1px solid rgba(255, 255, 255, 0.09); } .onyx-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .onyx-footer__brand { width: 430px; max-width: 100%; } .onyx-footer__tag { margin: 24px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 1.05px; color: #5c6673; } .onyx-footer__blurb { max-width: 380px; margin: 30px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--onyx-muted); } .onyx-footer__label { margin: 34px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.8px; color: #5c6673; } .onyx-signup { display: flex; align-items: center; gap: 8px; width: 420px; max-width: 100%; margin-top: 14px; padding: 6px 6px 6px 24px; border-radius: 100px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); } .onyx-signup input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; font-family: "Inter", sans-serif; font-size: 14.5px; color: #fff; } .onyx-signup input::placeholder { color: #707a87; } .onyx-signup button { flex: none; padding: 15px 26px; border: 0; border-radius: 100px; background: var(--onyx-accent); font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.32px; color: #050d14; cursor: pointer; } .onyx-signup__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #707a87; } .onyx-signup__note[hidden] { display: none; } .onyx-fcol h2 { margin: 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 1.05px; color: #fff; } .onyx-fcol ul { display: flex; flex-direction: column; gap: 15px; margin: 26px 0 0; padding: 0; list-style: none; } .onyx-fcol a { font-size: 14.5px; color: var(--onyx-muted); white-space: nowrap; transition: color 0.18s ease; } .onyx-fcol a:hover { color: #fff; } .onyx-footer__rule { height: 1px; margin-top: 86px; background: rgba(255, 255, 255, 0.1); } .onyx-footer__legal { margin: 34px 0 0; font-size: 12.5px; line-height: 1.8; color: #525c69; } .onyx-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 30px; } .onyx-copy { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.8px; color: #5c6673; white-space: pre; } .onyx-pay { display: flex; gap: 10px; flex-wrap: wrap; } .onyx-pay span { padding: 7px 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 9.5px; letter-spacing: 0.57px; color: #8c96a3; } /* -------------------------------------------------------------------------- 13 Cart flyout — desktop only Populated from the WooCommerce Store API by onyx-home.js. -------------------------------------------------------------------------- */ .onyx-drawer { position: fixed; inset: 0; z-index: 100; } .onyx-drawer[hidden] { display: none; } .onyx-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.32s ease; } .onyx-drawer__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(440px, 100vw); height: 100%; background: #0a0c0f; border-left: 1px solid rgba(255, 255, 255, 0.09); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6); transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } .onyx-drawer.is-open .onyx-drawer__scrim { opacity: 1; } .onyx-drawer.is-open .onyx-drawer__panel { transform: none; } .onyx-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none; padding: 28px 28px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .onyx-drawer__title { margin: 0; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1.68px; color: #fff; } .onyx-drawer__meta { margin: 8px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.8px; color: #6b7887; } .onyx-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 28px 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; transition: opacity 0.15s ease; } .onyx-drawer__body::-webkit-scrollbar { width: 6px; } .onyx-drawer__body::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .onyx-drawer.is-busy .onyx-drawer__body { opacity: 0.5; pointer-events: none; } .onyx-line { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .onyx-line:last-child { border-bottom: 0; } .onyx-line__media { display: block; flex: none; width: 76px; height: 76px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: radial-gradient( ellipse 45.45% 45.45% at 50% 61.82%, #1a2636 0%, #121a24 27.5%, #0b0e12 55%, #030405 100% ); } .onyx-line__media img { width: 100%; height: 100%; object-fit: cover; } .onyx-line__main { flex: 1 1 auto; min-width: 0; } .onyx-line__name { display: block; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.35; color: #fff; } .onyx-line__name:hover { color: var(--onyx-accent); } .onyx-line__spec { margin: 6px 0 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 9.5px; letter-spacing: 0.6px; color: #6b7887; } .onyx-line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .onyx-qty { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 100px; background: rgba(255, 255, 255, 0.03); } .onyx-qty button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: #98a2ae; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1; cursor: pointer; transition: color 0.18s ease; } .onyx-qty button:hover:not(:disabled) { color: #fff; } .onyx-qty button:disabled { opacity: 0.35; cursor: default; } .onyx-qty span { min-width: 22px; text-align: center; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 11px; color: #fff; } .onyx-line__total { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 18px; letter-spacing: -0.01em; color: #fff; } .onyx-line__remove { margin-top: 12px; padding: 0; border: 0; background: none; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 9px; letter-spacing: 0.72px; color: #5c6978; cursor: pointer; transition: color 0.18s ease; } .onyx-line__remove:hover { color: #e07b7b; } .onyx-drawer__empty { padding: 64px 0; text-align: center; } .onyx-drawer__empty-title { margin: 0; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1.56px; color: #fff; } .onyx-drawer__empty p { margin: 12px auto 0; max-width: 260px; font-size: 14px; line-height: 1.7; color: var(--onyx-muted); } .onyx-drawer__empty .onyx-btn { margin-top: 26px; } .onyx-drawer__error { margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(224, 123, 123, 0.3); border-radius: 10px; background: rgba(224, 123, 123, 0.1); font-size: 13px; line-height: 1.6; color: #f0a8a8; } .onyx-drawer__foot { flex: none; padding: 22px 28px 28px; border-top: 1px solid rgba(255, 255, 255, 0.09); background: #08090c; } .onyx-drawer__foot[hidden] { display: none; } .onyx-drawer__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .onyx-drawer__row-label { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.8px; color: #6b7887; } .onyx-drawer__sum { font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 27px; letter-spacing: -0.01em; color: #fff; } .onyx-drawer__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #5c6978; } .onyx-drawer__cta { width: 100%; justify-content: center; margin-top: 20px; } .onyx-drawer__link { display: block; margin-top: 14px; text-align: center; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.32px; color: var(--onyx-muted); transition: color 0.18s ease; } .onyx-drawer__link:hover { color: #fff; } /* The flyout is a desktop affordance; narrower screens keep the plain link through to the full cart page. */ @media (max-width: 1023px) { .onyx-drawer { display: none !important; } } /* -------------------------------------------------------------------------- 14 Mobile menu flyout — below the desktop breakpoint only -------------------------------------------------------------------------- */ .onyx-mnav { position: fixed; inset: 0; z-index: 120; } .onyx-mnav[hidden] { display: none; } .onyx-mnav__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .onyx-mnav__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(380px, 88vw); height: 100%; padding: 24px 26px 30px; background: #0a0c0f; border-left: 1px solid rgba(255, 255, 255, 0.09); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6); transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } .onyx-mnav.is-open .onyx-mnav__scrim { opacity: 1; } .onyx-mnav.is-open .onyx-mnav__panel { transform: none; } .onyx-mnav__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; margin-bottom: 34px; } .onyx-mnav__eyebrow { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: 10px; letter-spacing: 1.05px; color: #5c6673; } .onyx-mnav__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow-y: auto; } /* Each link flies in behind the panel, staggered down the list. */ .onyx-mnav__links a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 25px; letter-spacing: 0.5px; color: #fff; opacity: 0; transform: translateX(28px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s ease; } .onyx-mnav.is-open .onyx-mnav__links a { opacity: 1; transform: none; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(1) a { transition-delay: 0.1s; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(2) a { transition-delay: 0.15s; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(3) a { transition-delay: 0.2s; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(4) a { transition-delay: 0.25s; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(5) a { transition-delay: 0.3s; } .onyx-mnav.is-open .onyx-mnav__links li:nth-child(6) a { transition-delay: 0.35s; } .onyx-mnav__links a:hover { color: var(--onyx-accent); } .onyx-mnav__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 30px; opacity: 0; transform: translateY(18px); transition: opacity 0.45s ease 0.34s, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.34s; } .onyx-mnav.is-open .onyx-mnav__ctas { opacity: 1; transform: none; } .onyx-mnav__ctas .onyx-btn { width: 100%; justify-content: center; padding-block: 19px; } @media (min-width: 1024px) { .onyx-mnav { display: none !important; } } /* -------------------------------------------------------------------------- 15 Responsive -------------------------------------------------------------------------- */ @media (max-width: 1560px) { .onyx-hero { --onyx-hv: 0.88; } } @media (max-width: 1400px) { .onyx-hero { --onyx-hv: 0.76; } .onyx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1240px) { .onyx-hero { --onyx-hv: 0.64; } .onyx-faq { gap: 64px; } } /* Below this the header collapses to the hamburger. */ @media (max-width: 1023px) { .onyx-nav__menu { display: none; } .onyx-burger { display: block; } } @media (max-width: 1100px) { .onyx-faq { flex-direction: column; gap: 56px; } .onyx-faq__intro { width: auto; } .onyx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .onyx-review-grid { grid-template-columns: 1fr; } } @media (max-width: 1080px) { .onyx-hero { --onyx-hv: 0.8; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; padding-block: 96px 72px; } .onyx-hero__copy { max-width: none; } .onyx-hero__visual { align-self: center; } } @media (max-width: 960px) { .onyx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .onyx-hero { --onyx-hv: 0.62; } .onyx-sechead { flex-direction: column; align-items: flex-start; } .onyx-sechead__aside { align-items: flex-start; text-align: left; } .onyx-rating { align-items: flex-start; } .onyx-footer__rule { margin-top: 56px; } .onyx-search__go { padding: 14px 18px; font-size: 10px; letter-spacing: 1px; } } @media (max-width: 640px) { .onyx-tiles { grid-template-columns: 1fr; } .onyx-stats { gap: 26px 32px; } .onyx-stats__sep { display: none; } .onyx-trust span { font-size: 10px; } } /* Two columns on phones. Everything inside the card tightens to suit the ~155px column rather than dropping information. */ @media (max-width: 560px) { .onyx-hero { --onyx-hv: 0.44; } .onyx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 40px; } .onyx-card__info { padding: 15px; } .onyx-card__row { gap: 8px; } .onyx-card__name { font-size: 13px; line-height: 1.3; } .onyx-badge { padding: 4px 8px; font-size: 7.5px; letter-spacing: 0.5px; } .onyx-card__spec { margin-top: 7px; font-size: 8.5px; letter-spacing: 0.4px; } .onyx-card__buy { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; } .onyx-price { font-size: 21px; } .onyx-add { justify-content: center; padding: 12px 14px; font-size: 9.5px; letter-spacing: 1px; } .onyx-btn, .onyx-hero__ctas .onyx-btn, .onyx-cta__actions .onyx-btn { justify-content: center; width: 100%; } .onyx-search__field { padding-left: 18px; gap: 8px; } .onyx-search__field input { font-size: 15px; } } /* Touch devices and reduced-motion users get the background without the fixed-attachment repaint cost. */ @media (hover: none), (prefers-reduced-motion: reduce) { .onyx-hero::before, .onyx-why::before, .onyx-cta::before { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .onyx-drawer__scrim, .onyx-drawer__panel, .onyx-mnav__scrim, .onyx-mnav__panel, .onyx-mnav__links a, .onyx-mnav__ctas, .onyx-burger span { transition: none; } .onyx-search__field::before, .onyx-search__field::after, .onyx-card::before { animation: none; } } /* -------------------------------------------------------------------------- 16 Cascade correction The link reset in section 1 is written as `.onyx-page a` (0-1-1), which out-specifies the single-class component rules (0-1-0) that set a link's colour — so `color: inherit` was winning and every solid blue button rendered white text instead of #050d14. The reset should have been wrapped in :where() to hold it at zero specificity; restating the affected colours here is the equivalent fix without re-cutting the whole file. If another coloured link variant is added later, either wrap the reset in :where() or add the variant below. -------------------------------------------------------------------------- */ :is(.onyx-page, .onyx-drawer, .onyx-mnav) a.onyx-btn--primary, :is(.onyx-page, .onyx-drawer, .onyx-mnav) a.onyx-add { color: #050d14; } .onyx-drawer a.onyx-drawer__link { color: var(--onyx-muted); } .onyx-drawer a.onyx-drawer__link:hover { color: #fff; } /* -------------------------------------------------------------------------- 17 Revisions Adjustments to rules defined earlier in this file. They live here because the deployment bridge only writes whole files; fold them back into their home sections next time the stylesheet is re-cut. -------------------------------------------------------------------------- */ /* Search band sits closer under the hero (see section 5). The hero clears its artwork by ~139px, so pulling up this far never collides with it. */ .onyx-search { margin-top: clamp(-36px, -1.6vw, -8px); padding-top: clamp(8px, 1vw, 16px); } /* Quicker sweep on the neon stroke. */ .onyx-search__field::before, .onyx-search__field::after { animation-duration: 2s; } /* Cards idle flat — no ambient glow — then grow and light up on hover. Keeping the ring paused until hover also keeps eight simultaneous conic gradients off the paint budget. */ .onyx-card { box-shadow: none; transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease; } .onyx-card::before { opacity: 0; animation-duration: 4s; animation-play-state: paused; transition: opacity 0.28s ease; } .onyx-card:hover, .onyx-card:focus-within { z-index: 2; transform: scale(1.035); border-color: rgba(88, 168, 232, 0.28); box-shadow: 0 0 38px rgba(88, 168, 232, 0.28); } .onyx-card:hover::before, .onyx-card:focus-within::before { opacity: 0.9; animation-play-state: running; } /* Small accent-blue text moves off JetBrains Mono / Montserrat onto Inter. Larger blue text (headings) and the non-blue mono labels are unchanged. */ .onyx-eyebrow, .onyx-hero__eyebrow, .onyx-badge, .onyx-review__tag, .onyx-cart__count { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } .onyx-hero__eyebrow { font-weight: 500; } @media (prefers-reduced-motion: reduce) { .onyx-card:hover, .onyx-card:focus-within { transform: none; } } /* -------------------------------------------------------------------------- 18 Focus rings + sticky glass header -------------------------------------------------------------------------- */ /* Twenty Twenty-Five's theme.json ships `:where(.wp-site-blocks :focus) { outline-width: 2px; outline-style: solid }` with no outline-color, so focus fell back to currentColor — a white 2px box on this palette — and it keys off :focus, so a plain mouse click triggered it. Pointer focus now draws nothing; keyboard focus keeps the accent ring from section 1. The theme rule is inside :where(), so it carries zero specificity and anything here outranks it. */ .onyx-page :focus:not(:focus-visible), .onyx-drawer :focus:not(:focus-visible), .onyx-mnav :focus:not(:focus-visible) { outline: none; } /* Same idea for the grey flash Safari/Chrome paint over tapped elements. */ .onyx-page, .onyx-drawer, .onyx-mnav { -webkit-tap-highlight-color: transparent; } /* Frosted header that tightens once the page moves. `top` follows the admin bar so the logged-in view doesn't slide underneath it; the variable resolves to 0 for visitors. */ .onyx-nav { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); background: rgba(6, 8, 11, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transition: height 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .onyx-nav .onyx-logo, .onyx-nav .onyx-cart { transition: transform 0.28s ease, padding 0.28s ease; } .onyx-nav.is-stuck { height: 64px; background: rgba(6, 8, 11, 0.88); border-bottom-color: rgba(255, 255, 255, 0.14); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); } .onyx-nav.is-stuck .onyx-logo { transform: scale(0.86); transform-origin: left center; } .onyx-nav.is-stuck .onyx-cart { padding-block: 9px; } @media (prefers-reduced-motion: reduce) { .onyx-nav, .onyx-nav .onyx-logo, .onyx-nav .onyx-cart { transition: none; } } /* -------------------------------------------------------------------------- 19 Cart flyout on mobile Section 13 hid the flyout below the desktop breakpoint. It now runs at every width, so that rule is neutralised here. Overriding with `:not([hidden])` rather than a blanket `display: block` matters: the original declaration is !important, so a blanket override would also beat `[hidden]` and leave the panel permanently on screen. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .onyx-drawer:not([hidden]) { display: block !important; } /* Leave a strip of scrim so the panel still reads as an overlay and there is somewhere to tap to dismiss it. */ .onyx-drawer__panel { width: min(440px, 92vw); } } @media (max-width: 480px) { .onyx-drawer__head { padding: 22px 20px 18px; } .onyx-drawer__body { padding: 6px 20px 20px; } .onyx-drawer__foot { padding: 20px 20px 24px; } .onyx-line__media { width: 64px; height: 64px; } } /* -------------------------------------------------------------------------- 20 Hero video background Sits between the still hexagon layer (section 4's ::before, which stays as the poster/fallback) and the dark gradient (::after), so the overlay still reads over the footage. No z-index juggling is needed: ::before, the video and ::after all paint in tree order at the same level, and the hero's content sits above them at z-index 1. -------------------------------------------------------------------------- */ .onyx-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Reduced-motion users fall back to the still hexagon layer underneath. */ @media (prefers-reduced-motion: reduce) { .onyx-hero__video { display: none; } } /* -------------------------------------------------------------------------- 21 Mobile hero + search refinements -------------------------------------------------------------------------- */ @media (max-width: 1080px) { /* Section 4's clamp bottoms out at 30px, so phones got the minimum. Below the stacked breakpoint the headline can run far larger: Montserrat Light measures 9.04px of width per 1px of font-size, so 9.6vw is the most that still holds "PREMIUM GRADE" on one line down to a 320px screen. */ .onyx-hero__title { font-size: clamp(28px, 9.6vw, 92px); } /* Let the product visual bleed into the page gutters so the vials can use the full viewport width instead of the padded column. */ .onyx-hero__visual { margin-inline: calc(var(--onyx-pad) * -1); } } /* Vial scale, stepped so each bucket still fits its narrowest screen with the chips intact (the artwork spans x=4..687 of the 736px canvas). */ @media (max-width: 760px) { .onyx-hero { --onyx-hv: 0.8; } } @media (max-width: 620px) { .onyx-hero { --onyx-hv: 0.7; } } @media (max-width: 520px) { .onyx-hero { --onyx-hv: 0.58; } } @media (max-width: 430px) { .onyx-hero { --onyx-hv: 0.52; } } @media (max-width: 380px) { .onyx-hero { --onyx-hv: 0.46; } } @media (max-width: 340px) { .onyx-hero { --onyx-hv: 0.41; } } /* Keep the three stats on one row; the labels wrap rather than the row. */ @media (max-width: 640px) { .onyx-stats { flex-wrap: nowrap; gap: 14px; margin-top: 44px; } .onyx-stat { flex: 1 1 0; min-width: 0; gap: 6px; white-space: normal; } .onyx-stat__value { font-size: 23px; } .onyx-stat__label { font-size: 7.5px; letter-spacing: 0.4px; line-height: 1.35; } } /* No filled panel behind the neon ring on phones — just the glowing outline. */ @media (max-width: 1023px) { .onyx-search__field { background: transparent; } } /* Focusing the field drew the accent ring from section 1 as a hard rectangle on top of the round neon stroke. The stroke thickens and the bloom lifts instead, which still signals focus without the box. */ .onyx-page .onyx-search__field input:focus-visible { outline: none; } .onyx-search__field:focus-within::before { padding: 3px; } .onyx-search__field:focus-within::after { opacity: 0.85; } /* -------------------------------------------------------------------------- 22 Mobile header fit + search glow Measured on a 390px viewport: the header row carried 412px of content (140px logo + 272px of actions), so the hamburger was pushed clean off the canvas and clipped by .onyx-page's overflow. Everything below trims that row back under the narrowest screen we support. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .onyx-nav { gap: 10px; } .onyx-nav__actions { gap: 12px; } /* The search icon is redundant — the full search field sits just below the hero on the same screen. */ .onyx-nav__actions .onyx-nav__icon:first-child { display: none; } .onyx-cart { gap: 7px; padding: 9px 13px; } .onyx-cart__count { font-size: 10px; letter-spacing: 0.8px; } .onyx-burger { width: 40px; height: 40px; } .onyx-burger span { left: 11px; } .onyx-burger span:nth-child(1) { top: 14px; } .onyx-burger span:nth-child(2) { top: 20px; } .onyx-burger span:nth-child(3) { top: 26px; } .onyx-burger.is-open span:nth-child(1), .onyx-burger.is-open span:nth-child(3) { top: 20px; } /* Section 5's bloom is a blurred pseudo-element parked at z-index:-1 inside a stacking context — a combination several mobile browsers composite as an opaque black rectangle behind the field. A box-shadow gives the same halo with no filter and no negative layer. */ .onyx-search__field::after { display: none; } .onyx-search__field { box-shadow: 0 0 26px rgba(88, 168, 232, 0.32); } .onyx-search__field:focus-within { box-shadow: 0 0 34px rgba(88, 168, 232, 0.5); } } /* The "CART (n)" label is what tips the row over on a phone; the pill keeps its icon and still opens the flyout. */ @media (max-width: 430px) { .onyx-cart__count { display: none; } .onyx-cart { padding: 9px 11px; } } /* -------------------------------------------------------------------------- 23 Desktop-only hero video + horizontal overflow lock -------------------------------------------------------------------------- */ /* Phones fall back to the still hexagon layer from section 4. The source URL also lives in a data attribute so the file is never fetched here — see wireHeroVideo() in onyx-home.js. */ @media (max-width: 1023px) { .onyx-hero__video { display: none; } } /* Belt and braces against sideways drift. Chrome reports no horizontal overflow, but two clipping containers hold transformed children that overhang the viewport by a long way — the scaled hero canvas, and the 1500px CTA glow at translateX(-50%), which sticks out ~563px each side. Neither container was a stacking context, and iOS Safari is known to let transformed descendants escape overflow clipping in exactly that case. Isolating them keeps the clip honest. */ .onyx-hero, .onyx-cta, .onyx-why { isolation: isolate; } /* Root-level stop, so nothing that slips through can scroll the page sideways. `clip` is used rather than `hidden` because `hidden` would turn the root into a scroll container and can disturb position: sticky. */ html { overflow-x: clip; } @supports not (overflow: clip) { html { overflow-x: hidden; } } /* -------------------------------------------------------------------------- 24 Mobile parallax Section 4 gets its parallax from `background-attachment: fixed`, and the media query further up this file turned that off for `(hover: none)` — every touch device — to avoid the fixed-attachment repaint cost. That is why the hexagons scroll flat with the page on a phone. Removing that rule alone would not fix it: iOS Safari ignores `background-attachment: fixed` on a scrolling page and paints it as `scroll` regardless. So touch devices get the effect from a transform on the background layer instead, driven by onyx-home.js, which works in every mobile engine and stays on the compositor. The layer is grown by --onyx-par-range at the top and bottom so it always covers the section however far it has travelled; the section already clips with overflow: hidden, so the overhang never shows. Desktop is untouched and keeps the cheaper fixed attachment. -------------------------------------------------------------------------- */ :root { --onyx-par-range: 70px; } @media (hover: none) { .onyx-hero::before, .onyx-why::before, .onyx-cta::before { top: calc(var(--onyx-par-range) * -1); bottom: calc(var(--onyx-par-range) * -1); background-attachment: scroll; transform: translate3d(0, var(--onyx-par, 0px), 0); will-change: transform; } } /* Reduced motion wins over the touch rule: the layer sits still and flush. */ @media (prefers-reduced-motion: reduce) { .onyx-hero::before, .onyx-why::before, .onyx-cta::before { top: 0; bottom: 0; transform: none; will-change: auto; } }