/* ------------------------------------------------------------------------------------------
AuxBox product pages — shared styles.
Extracted from auxbox/index.php once a second and third page (register, videos) needed the
same design language. Everything is scoped under .ax because the site's global rules render
every as an uppercase, bold, letter-spaced block, which would wreck these layouts.
Palette and type come from the retail SLEEVE: black ground, silver ONSONG, gold AUXBOX, teal
for every heading, rule and icon.
Sizes are in pt, and deliberately NOT rem: styles.css sets `html { font-size: 62.5% }`, so a
rem here resolves against a 10px root and lands ~40% smaller than intended.
------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------
AuxBox product page — palette and type taken from the retail sleeve.
Everything is scoped under .ax because the site's global rules render every
as an uppercase, bold, letter-spaced block, which would wreck this layout.
------------------------------------------------------------------------------ */
.ax {
--ax-ink: #000000;
--ax-panel: #202023; /* the site's own body background, so the bands match the rest of onsongapp.com */
--ax-teal: #45C4BE; /* sleeve headings, rules, icons */
--ax-teal-deep: #16A085; /* the enclosure itself */
--ax-text: #FFFFFF;
--ax-muted: rgba(255,255,255,0.68);
--ax-rule: rgba(69,196,190,0.35);
background: var(--ax-ink);
color: var(--ax-text);
font-size: 15pt;
line-height: 1.5;
/* `clip`, NOT `hidden`. overflow-x:hidden turns this element into a scroll container,
which silently kills position:sticky on the nav inside it — no error, the bar just
scrolls away. `clip` contains the same overflow without creating that container. */
overflow-x: clip;
}
.ax * { box-sizing: border-box; }
/* Roomy bands. Note rem resolves against a 10px root here (styles.css sets 62.5%), so the
previous 3.6rem was only 36px — far tighter than it read in the source. */
.ax section { padding: 72px 24px; position: relative; }
.ax .wrap { max-width: 1240px; margin: 0 auto; }
/* A wider measure for bands of chips, which want room to breathe across rather than a
comfortable reading width. */
.ax .wrap.wide { max-width: 1460px; }
.ax h1, .ax h2, .ax h3 { line-height: 1.05; margin: 0 0 .4em 0; text-wrap: balance; }
/* Soft halo behind section titles — no offset, wide blur, so it grounds the type without
reading as a cast shadow. */
.ax h2, .ax .punch { text-shadow: 0 0 26px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.75); }
.ax h2 { font-size: clamp(24pt, 4.4vw, 40.5pt); letter-spacing: -0.015em; color: var(--ax-teal); }
.ax h3 { font-size: 14.2pt; letter-spacing: .04em; text-transform: uppercase; color: var(--ax-teal); }
.ax p { margin: 0 0 .7em 0; font-size: 15pt; }
.ax .lede { font-size: clamp(15pt, 2.2vw, 19.5pt); line-height: 1.45; color: var(--ax-muted); }
/* The wordmark is real artwork now — see .hero .lockup img. The CSS gradient text that stood
in for it has been removed rather than left behind to rot. */
/* Sections alternate between flat black and a flat raised panel — no texture. */
.ax section.band { background-color: var(--ax-panel); }
.ax .rule { height: 1px; background: var(--ax-rule); margin: 1.8rem 0; }
/* Centred section headers. `.lede.center` needs the auto margins as well as the alignment: it
carries a max-width, so text-align alone would centre the words inside a block still sitting
hard left. */
/* Generic, so `class="center"` works on anything — it was previously bound to h2 and .lede
only, which silently did nothing on every other element that asked for it. */
.ax .center { text-align: center; }
.ax .lede.center, .ax .footnote.center { margin-left: auto; margin-right: auto; }
.ax .capabilities.center { justify-content: center; }
/* ---------------- Product nav ---------------- */
.ax .ax-nav {
position: sticky; top: 0; z-index: 40;
background: rgba(32,32,35,.88);
-webkit-backdrop-filter: saturate(160%) blur(12px);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid rgba(255,255,255,.09);
padding: .85rem 1.5rem;
}
.ax .ax-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ax .ax-nav .home img { height: 22px; display: block; }
.ax .ax-nav-links { display: flex; align-items: center; gap: 1.6rem; }
.ax .ax-nav-links a {
color: var(--ax-muted); font-family: inherit; font-weight: 500; font-size: 12.8pt;
letter-spacing: 0; text-transform: none; margin: 0; text-decoration: none;
}
.ax .ax-nav-links a:hover { color: var(--ax-text); }
.ax a.btn.small { padding: .55rem 1.5rem; font-size: 12.8pt; border-width: 1.5pt; }
.ax a.btn.small:hover { transform: none; }
@media (max-width: 620px) {
/* On a phone the text links are the first thing to go — the logo home and the buy
button are what the bar is actually for. */
.ax .ax-nav-links a:not(.btn) { display: none; }
}
/* ---------------- Hero ---------------- */
.ax .hero {
text-align: center;
padding-top: 2.4rem;
/* A "shelf", not a glow. Two stacked gradients, and the stops are measured rather than
guessed: within this section the product image runs 17.8%–61.4%, its body starts at
~34% and its base lands at ~55%.
Layer 1 (on top) is the surface — nothing until just above the unit's base, brightest
right where it sits down, gone again below. Abstract enough to read as a shelf without
drawing a horizon line.
Layer 2 carries the header colour down and dissolves it to pure black by 30%, so the
product meets black on every side before the surface picks it back up.
If the hero's height or the image's size changes, RE-MEASURE. These percentages describe
one specific composition. */
background:
linear-gradient(to bottom,
transparent 44%,
rgba(150,170,168,0.10) 52%,
rgba(160,182,180,0.15) 56%,
rgba(120,140,138,0.07) 63%,
rgba(60,70,70,0.02) 70%,
transparent 78%),
linear-gradient(to bottom,
var(--ax-panel) 0%,
#14181A 14%,
#000000 30%,
#000000 100%);
}
.ax .hero .lockup { margin: 0 0 1.1rem 0; }
/* Diffuse, no offset. drop-shadow (not box-shadow) so it follows the artwork's alpha rather
than boxing the transparent PNG. */
.ax .hero .lockup img {
width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto;
filter: drop-shadow(0 0 28px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(0,0,0,.7));
}
.ax .hero .tagline { color: var(--ax-teal); font-size: clamp(12.8pt, 2.2vw, 18.8pt); font-weight: 700; margin: 0 0 2.2rem 0; }
.ax .hero .tagline .tm { font-size: .45em; vertical-align: super; font-weight: 400; }
/* A true cut-out with real alpha — the wire fades are transparency, not a white matte,
so it needs no mask to sit on black. */
.ax .hero img.product { width: 100%; max-width: 1000px; height: auto; margin: 0 auto 1.5rem auto; display: block; }
.ax .hero .lede { max-width: 76ch; margin: 0 auto; text-wrap: balance; }
/* ---------------- Domains strip ---------------- */
.ax .domains { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; margin-top: 2.8rem; }
.ax .domain { text-align: center; }
.ax .domain .ring {
width: 74px; height: 74px;
margin: 0 auto .5rem auto;
}
.ax .domain .l { font-size: 12pt; letter-spacing: .18em; text-transform: uppercase; color: var(--ax-muted); }
/* Icons are supplied artwork with the teal ring baked in, so nothing here draws a circle or
recolours a glyph — the container just reserves the space. */
.ax .ring img { width: 100%; height: 100%; display: block; }
/* ---------------- Buttons ---------------- */
.ax .cta { margin: 3.2rem 0 1.5rem 0; }
.ax .cta form { margin: 0; }
.ax button.btn { font-family: inherit; cursor: pointer; }
.ax a.btn, .ax button.btn {
display: inline-block; padding: 1rem 2.5rem; border-radius: 999px;
background: var(--ax-teal); color: #04120F; font-weight: 800; font-size: 15pt;
text-decoration: none; font-family: inherit; letter-spacing: 0; text-transform: none;
margin: 0; border: 2px solid var(--ax-teal); transition: transform .15s ease, background .15s ease;
}
.ax a.btn:hover, .ax button.btn:hover { transform: translateY(-2px); background: #6FE0DA; border-color: #6FE0DA; }
.ax a.btn.ghost, .ax button.btn.ghost { background: transparent; color: var(--ax-text); border-color: rgba(255,255,255,.28); }
.ax a.btn.ghost:hover { background: rgba(255,255,255,.08); border-color: var(--ax-text); }
.ax a.btn[aria-disabled="true"] { background: transparent; color: var(--ax-muted); border-color: rgba(255,255,255,.22); cursor: default; }
.ax a.btn[aria-disabled="true"]:hover { transform: none; background: transparent; }
/* A line's worth of air below the button, and dimmer than body copy: this is a footnote to the
action above it, not a second message competing with it. */
.ax .price { display: block; margin-top: 2.4rem; color: rgba(255,255,255,0.45); font-size: 14.2pt; }
/* ---------------- Capability column ---------------- */
.ax .capabilities { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
/* Dim teal pills. Every property the global `a` rule would impose — display, weight,
spacing, transform, margin — is set explicitly so a linked chip and an unlinked one
are visually identical. */
.ax .capabilities .chip {
display: inline-flex; align-items: center; gap: .5rem;
padding: .62rem 1.35rem; margin: 0; border-radius: 999px;
background: rgba(69,196,190,.13);
border: 1px solid rgba(69,196,190,.30);
color: var(--ax-text); font-family: inherit; font-weight: 700;
font-size: 12.8pt; line-height: 1.15; letter-spacing: .09em;
text-transform: uppercase; text-decoration: none;
}
.ax .capabilities .chip { cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.ax .capabilities .chip:hover { background: rgba(69,196,190,.26); border-color: var(--ax-teal); transform: translateY(-1px); }
.ax .capabilities .chip .play { width: 13px; height: 13px; fill: var(--ax-teal); flex: 0 0 auto; }
/* ---------------- Features ---------------- */
.ax .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.7rem 2.6rem; margin-top: 2.2rem; }
.ax .feature { display: flex; gap: 1.1rem; }
.ax .feature .ring {
flex: 0 0 auto; width: 54px; height: 54px;
}
.ax .feature h3 { margin: .25rem 0 .35rem 0; font-size: 13.5pt; letter-spacing: .07em; }
.ax .feature p { margin: 0; color: var(--ax-muted); font-size: 15pt; line-height: 1.42; }
/* ---------------- Recipes ---------------- */
.ax .recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.ax .recipe { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 18px 18px 26px 18px; background: var(--ax-ink); }
/* Centred title with air beneath it, so the heading reads as a label for the list rather than
the first item in it. */
.ax .recipe h3 { text-align: center; margin: 2px 0 18px 0; }
/* A real list with real markers — square, teal, and generously spaced. The previous
treatment faked bullets with a ::before arrow, which read as cramped and left the
markup claiming to be a list while looking like nothing of the sort. */
.ax .recipe ul { list-style: square; margin: 0; padding-left: 1.2em; }
/* list-style-type must be set on the LI, not just the UL: styles.css declares
`li { list-style: none }` globally, and a rule on the element itself beats the value
it would otherwise inherit from its parent — which is why the markers vanished. */
.ax .recipe li { list-style-type: square; color: var(--ax-muted); font-size: 13.5pt; line-height: 1.4; margin: .95rem 0; padding-left: .35em; }
.ax .recipe li::marker { color: var(--ax-teal); font-size: 1.1em; }
/* ---------------- Box + specs ---------------- */
.ax .two { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3.5rem; }
.ax ul.box { list-style: none; margin: 0; padding: 0; }
/* Explicit, because everything else on the page is sized in rem (root 16px) while .ax's
own 19px base only reaches elements with no size of their own — leaving these list
items noticeably larger than their neighbours. */
.ax ul.box li { padding: .6rem 0; font-size: 16.5pt; line-height: 1.35; border-bottom: 0.8pt solid rgba(255,255,255,.1); }
.ax ul.box li span { display: block; color: var(--ax-muted); font-size: 12.8pt; }
.ax table.spec { width: 100%; border-collapse: collapse; font-size: 13.5pt; }
.ax table.spec th, .ax table.spec td { text-align: left; padding: .48rem 0; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: top; }
.ax table.spec th { color: var(--ax-muted); font-weight: 400; width: 30%; padding-right: 1.5rem; }
.ax .footnote { color: var(--ax-muted); font-size: 12pt; margin-top: 1.4rem; }
.ax .origin { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: 12pt; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-muted); }
/* ---------------- Close ---------------- */
/* Closes on a panel band so the alternation holds to the end — the section before it is
black, and two black bands running together would lose the rhythm. */
.ax .close { text-align: center; background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(22,160,133,.25), transparent 70%), var(--ax-panel); }
.ax .close .links { margin-top: 2rem; }
.ax .close .links a { color: var(--ax-teal); font-family: inherit; font-weight: 400; font-size: 13.5pt; letter-spacing: 0; text-transform: none; margin: 0 .8rem; text-decoration: underline; }
@media (max-width: 700px) {
.ax section { padding: 48px 20px; }
.ax .domains { gap: 1.5rem; }
}
/* ---------------- What it replaces ---------------- */
.ax table.compare { width: 100%; max-width: 720px; margin: 2.4rem auto 0 auto; border-collapse: collapse; font-size: 14pt; }
/* Uniform row height and zebra banding. The height is set on the cells rather than the row so
it holds even when a long product name wraps on a narrow screen. */
.ax table.compare th, .ax table.compare td { text-align: left; height: 52px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 400; }
.ax table.compare tr:nth-child(odd) { background: rgba(255,255,255,.035); }
.ax table.compare th { color: var(--ax-text); }
.ax table.compare td { color: var(--ax-muted); text-align: right; white-space: nowrap; }
/* The sum of the pile, and then ours — the two rows the whole section exists to put side by side. */
.ax table.compare tr.total th, .ax table.compare tr.total td { font-weight: 700; color: var(--ax-text); border-bottom-width: 2px; }
.ax table.compare tr.ours th, .ax table.compare tr.ours td { font-weight: 700; color: var(--ax-teal); font-size: 17pt; height: 64px; border-bottom: 0; }
/* The punchline the table builds to — the one line someone repeats to a bandmate. Given room
above and below so it reads as a verdict on the table rather than another table row. */
.ax .punch {
display: block;
text-align: center;
color: var(--ax-teal);
font-weight: 800;
font-size: clamp(20pt, 3vw, 27pt);
line-height: 1.25;
letter-spacing: -0.01em;
/* The line breaks are authored in the markup, so nothing here should second-guess them:
no balancing, no width that could force a different wrap. */
margin: 3.4rem auto 3rem auto;
}
/* Shipping scope, stated where someone decides to buy rather than discovered at the address form. */
.ax .ships { text-align: center; color: rgba(255,255,255,0.45); font-size: 12pt; margin: 1.2rem 0 0 0; }