/* ==========================================================================
Causey Audio - blue theme
==========================================================================
Repaints the whole site in the palette the launch page uses, without
touching style.css, navigation.css or footer.css. Those files are almost
entirely variable-driven, so overriding the custom properties does most of
the work; the handful of rules below it are the six places that hardcoded a
light colour and therefore cannot be reached through a variable.
Loaded LAST in every , so it wins on specificity ties. Deleting this
one restores the original light theme exactly.
========================================================================== */
:root {
/* Surfaces. --bg is the page itself; --bg-soft and --bg-tint are the
raised panels and alternating bands that used to be off-white. */
--bg: #050a16;
--bg-soft: #0b1730;
--bg-tint: #0d1a36;
/* Type. Pure white body text on a dark background is harsh over long
paragraphs, so the base ink is very slightly cooled and softened. */
--text: #e8eefc;
--muted: rgba(226, 234, 250, 0.72);
--muted-light: rgba(197, 211, 236, 0.45);
/* Rules and borders have to be light-on-dark now, so they are built from
the accent hue rather than from black at low opacity - a dark line on a
dark surface simply disappears. */
--line: rgba(120, 160, 240, 0.16);
--line-strong: rgba(120, 160, 240, 0.32);
/* The accent is lifted a little from the original #4a7cff: the same blue
reads dimmer against dark than it did against white. */
--accent: #5b8cf0;
--accent-strong: #3a6ad4;
--accent-soft: rgba(91, 140, 240, 0.14);
/* Status colours brightened for contrast against a dark surface. */
--ok: #3fbf87;
--ok-soft: rgba(63, 191, 135, 0.14);
--warn: #e0a23c;
--warn-soft: rgba(224, 162, 60, 0.14);
--err: #f0938a;
--err-soft: rgba(224, 87, 76, 0.14);
}
/* The same two-layer background the launch page uses: a soft blue glow near
the top over a navy base that falls away toward the bottom. Fixed so it does
not slide under long pages, but released on small screens where fixed
attachment is expensive and makes scrolling stutter. */
body {
color: var(--text);
background:
radial-gradient(ellipse 900px 620px at 50% 8%,
rgba(47, 91, 196, 0.26) 0%,
rgba(47, 91, 196, 0.09) 42%,
transparent 72%),
linear-gradient(168deg, #132444 0%, #0b1730 38%, #050a16 100%);
background-attachment: fixed;
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
}
@media (max-width: 40rem) {
body { background-attachment: scroll; }
}
/* -- The six hardcoded light colours ------------------------------------- */
/* Form fields were solid #ffffff, which stayed a white box on every dark page.
*
* The selector list here mirrors style.css exactly, attribute selectors and
* all. That is not stylistic: style.css targets input[type="password"], which
* outranks a bare `input`, so an override written the short way loses and the
* field keeps its white background while inheriting the theme's near-white
* text - light characters on a white box, effectively invisible. Matching the
* original specificity is what makes the override actually apply. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
background: rgba(5, 10, 22, 0.62);
border-color: var(--line-strong);
/* Explicit rather than inherited, so the masking dots in a password field
are always high-contrast against the field behind them. */
color: #f2f6ff;
caret-color: #9fc0ff;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
color: rgba(197, 211, 236, 0.40);
}
/* Password dots are drawn in the field's text colour, so they follow the rule
above. Letter-spacing thickens the row of dots slightly, which is what makes
them read as solid rather than as faint specks at small sizes. */
input[type="password"] {
letter-spacing: 0.08em;
}
/* Chrome and Safari repaint autofilled fields with their own pale yellow and
dark text, which would undo everything above the moment a password manager
fills the form. The inset shadow is the only way to override that background. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #f2f6ff;
-webkit-box-shadow: 0 0 0 1000px #0a1428 inset;
caret-color: #9fc0ff;
}
/* The sticky header and its dropdown panel. */
.site-header,
.site-header-inner {
background: rgba(8, 16, 36, 0.88);
border-bottom-color: var(--line);
/* Keeps body text from showing through the bar while it is scrolled over. */
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
}
.site-nav,
.nav-menu {
background: #0b1730;
border-color: var(--line);
}
.nav-menu {
box-shadow: 0 18px 44px rgba(3, 7, 18, 0.7);
}
/* Footer social buttons inverted to a light-on-dark hover. */
.footer-social a:hover {
background: rgba(120, 160, 240, 0.16);
color: var(--text);
}
/* -- Surfaces that assumed a white page --------------------------------- */
.panel,
.card,
.product-tile,
.hero-card {
background: rgba(12, 24, 50, 0.55);
border-color: var(--line);
}
.panel-soft {
background: rgba(19, 36, 68, 0.5);
}
.band {
background: transparent;
border-color: var(--line);
}
/* Images of the plugin are dark already; product art on a pale tile would be
the one place a light surface still makes sense, so it is left alone. */
.product-visual {
background: rgba(5, 10, 22, 0.5);
border-color: var(--line);
}
/* Secondary buttons drew a dark outline that vanished against navy. */
.btn {
border-color: var(--line-strong);
color: var(--text);
}
.btn:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.btn-primary {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
border-color: rgba(140, 175, 245, 0.45);
color: #ffffff;
}
.btn-primary:hover {
background: linear-gradient(180deg, #6f9df5 0%, #4276e4 100%);
}
/* Code and keyboard spans were tinted off-white. */
.mono,
code,
kbd,
pre {
background: rgba(5, 10, 22, 0.6);
border-color: var(--line);
color: #cfe0ff;
}
/* Tables striped with a near-white tint. */
tbody tr:nth-child(odd) {
background: rgba(120, 160, 240, 0.04);
}
th {
border-bottom-color: var(--line);
}
td {
border-bottom-color: rgba(120, 160, 240, 0.08);
}
/* The brand mark in the header ships in a black-on-transparent version, which
is invisible here. The white version is swapped in via CSS so no page markup
has to change, and the is left in place for anyone with images off. */
.brand-logo {
content: url("../img/ca/logo-white-md.png");
}
/* Focus rings need to be visible against navy rather than against white. */
:focus-visible {
outline: 2px solid #6f9df5;
outline-offset: 2px;
}