/* ==========================================================================
Advantage Analysis — dark theme override
Drop-in stylesheet. No markup changes required.
Load LAST in _Layout.cshtml, after Bootstrap / site.css:
Fonts (add to , or keep system fallbacks below):
========================================================================== */
:root {
--aa-bg: #0a0c0c;
--aa-bg-raised: #0c0f0f;
--aa-bg-sunken: #080a0a;
--aa-bg-panel: #101414;
--aa-line: #1c2322;
--aa-text: #d6dbda;
--aa-text-hi: #f4f7f6;
--aa-text-mid: #b6bfbd;
--aa-text-dim: #7d8886;
--aa-teal: #108D83;
--aa-teal-hi: #2ec4b6;
--aa-teal-lo: rgba(16, 141, 131, 0.32);
--aa-display: "Barlow Condensed", "Arial Narrow", sans-serif;
--aa-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
--aa-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}
/* --- base ---------------------------------------------------------------- */
html { background: var(--aa-bg); }
body {
background: var(--aa-bg);
color: var(--aa-text);
font-family: var(--aa-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--aa-teal); color: #04100f; }
a { color: var(--aa-teal-hi); text-decoration: none; }
a:hover,
a:focus { color: #6fded3; text-decoration: none; }
hr {
border: 0;
height: 1px;
background: var(--aa-teal);
opacity: 0.32;
margin: 44px 0;
}
img { max-width: 100%; }
/* --- typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--aa-display);
font-weight: 600;
color: var(--aa-text-hi);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.1;
}
/* article title (Details.cshtml renders it as .h3) */
.h3 {
display: block;
font-size: clamp(52px, 8vw, 50px);
line-height: 0.92;
margin: 56px 0 0;
padding-bottom: 18px;
}
/* timestamp under the title (.h5) */
.h5 {
display: block;
font-family: var(--aa-mono);
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: 0.04em;
color: var(--aa-text-dim);
padding-bottom: 22px;
border-bottom: 2px solid var(--aa-teal);
margin: 0 0 48px;
}
/* section headings inside the rendered post body */
h4, .h4 { font-size: 28px; margin: 44px 0 14px; }
h5, .h5 + h5 { font-size: 22px; }
p {
color: var(--aa-text-mid);
max-width: 74ch;
text-wrap: pretty;
margin: 0 0 18px;
}
strong, b { color: var(--aa-text-hi); font-weight: 600; }
em, i { color: var(--aa-text); }
blockquote {
margin: 28px 0;
padding: 4px 0 4px 22px;
border-left: 2px solid var(--aa-teal);
color: var(--aa-text);
}
ul, ol { color: var(--aa-text-mid); padding-left: 22px; }
li { margin-bottom: 8px; }
ul li::marker { color: var(--aa-teal); }
code, pre, samp, kbd {
font-family: var(--aa-mono);
color: var(--aa-text-hi);
background: var(--aa-bg-panel);
border: 1px solid var(--aa-line);
}
code { padding: 1px 6px; font-size: 0.9em; }
pre { padding: 16px 18px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }
/* --- layout shell ------------------------------------------------------- */
.container,
.container-fluid { max-width: 1120px; }
/* --- header / nav (Bootstrap navbar) ------------------------------------ */
.navbar,
.navbar-default,
.navbar-inverse,
header {
background: var(--aa-bg-raised);
background-image: none;
border: 0;
border-bottom: 1px solid var(--aa-line);
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
.navbar-brand img,
header img[src*="logo"] {
filter: brightness(0) invert(1) opacity(0.92);
}
.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.nav-link {
font-family: var(--aa-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9aa5a3;
background: none;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.nav-link:hover,
.nav-link.active {
color: var(--aa-text-hi);
background: none;
}
.navbar-toggle,
.navbar-toggler {
border-color: var(--aa-line);
background: transparent;
}
.navbar-toggle .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar { background: var(--aa-text); }
.dropdown-menu {
background: var(--aa-bg-raised);
border: 1px solid var(--aa-line);
border-radius: 0;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.dropdown-menu > li > a,
.dropdown-item { color: var(--aa-text-mid); }
.dropdown-menu > li > a:hover,
.dropdown-item:hover {
background: var(--aa-bg-panel);
color: var(--aa-text-hi);
}
.dropdown-menu .divider { background: var(--aa-line); }
/* --- buttons ------------------------------------------------------------ */
.btn,
button,
input[type="submit"],
input[type="button"] {
font-family: var(--aa-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 0;
padding: 9px 20px;
background-image: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-default,
.btn-secondary,
button,
input[type="button"] {
background: transparent;
color: var(--aa-text);
border: 1px solid var(--aa-line);
}
.btn-default:hover,
.btn-secondary:hover,
button:hover,
input[type="button"]:hover {
background: var(--aa-bg-panel);
color: var(--aa-text-hi);
border-color: var(--aa-teal);
}
.btn-primary,
.btn-success,
input[type="submit"] {
background: var(--aa-teal);
border: 1px solid var(--aa-teal);
color: #04100f;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
input[type="submit"]:hover {
background: #14a89c;
border-color: #14a89c;
color: #04100f;
}
.btn-link { color: var(--aa-teal-hi); }
/* --- tables (technical levels, data grids) ------------------------------ */
table,
.table {
width: 100%;
color: var(--aa-text);
border-collapse: collapse;
background: transparent;
margin: 24px 0 32px;
}
.table > thead > tr > th,
table th {
font-family: var(--aa-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--aa-text-dim);
text-align: left;
padding: 12px 18px;
background: var(--aa-bg-raised);
border: 0;
border-bottom: 1px solid var(--aa-teal-lo);
white-space: nowrap;
}
.table > tbody > tr > td,
table td {
padding: 13px 18px;
border: 0;
border-top: 1px solid var(--aa-line);
background: var(--aa-bg-panel);
vertical-align: baseline;
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) { background: #0d1211; }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover { background: #131918; }
/* numeric cells read as data, never wrapped mid-value */
td:not(:first-child),
.table td:not(:first-child) { font-variant-numeric: tabular-nums; }
td.num, td[align="right"], .text-right td, td.text-right {
font-family: var(--aa-mono);
color: var(--aa-text-hi);
white-space: nowrap;
}
/* --- forms -------------------------------------------------------------- */
label,
.control-label {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aa-text-dim);
font-weight: 500;
}
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
background: var(--aa-bg-panel);
border: 1px solid var(--aa-line);
border-radius: 0;
color: var(--aa-text-hi);
font-family: var(--aa-body);
box-shadow: none;
padding: 9px 12px;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
background: var(--aa-bg-panel);
border-color: var(--aa-teal);
color: var(--aa-text-hi);
outline: 0;
box-shadow: 0 0 0 1px var(--aa-teal);
}
::placeholder { color: #5d6866; opacity: 1; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--aa-teal); }
/* Chrome autofill would otherwise repaint the field white */
input:-webkit-autofill,
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--aa-text-hi);
-webkit-box-shadow: 0 0 0 1000px var(--aa-bg-panel) inset;
}
/* --- panels, cards, wells, alerts -------------------------------------- */
.panel,
.card,
.well,
.jumbotron,
.list-group-item {
background: var(--aa-bg-panel);
border: 1px solid var(--aa-line);
border-radius: 0;
box-shadow: none;
color: var(--aa-text);
}
.panel-heading,
.card-header,
.panel-footer,
.card-footer {
background: var(--aa-bg-raised);
border-color: var(--aa-line);
color: var(--aa-text-hi);
}
.alert {
border-radius: 0;
border: 1px solid var(--aa-line);
border-left: 2px solid var(--aa-teal);
background: var(--aa-bg-panel);
color: var(--aa-text);
}
.alert-danger,
.validation-summary-errors,
.field-validation-error {
color: #e8817a;
background: rgba(232, 129, 122, 0.06);
border-left-color: #e8817a;
}
.input-validation-error { border-color: #e8817a !important; }
.badge, .label {
background: var(--aa-teal);
color: #04100f;
border-radius: 0;
font-weight: 500;
letter-spacing: 0.06em;
}
.pagination > li > a,
.page-link {
background: var(--aa-bg-panel);
border-color: var(--aa-line);
color: var(--aa-text-mid);
border-radius: 0;
}
.pagination > .active > a,
.page-item.active .page-link {
background: var(--aa-teal);
border-color: var(--aa-teal);
color: #04100f;
}
/* --- footer ------------------------------------------------------------- */
footer,
.footer {
background: var(--aa-bg-sunken);
border-top: 1px solid var(--aa-line);
color: var(--aa-text-dim);
margin-top: 64px;
padding: 36px 0 44px;
}
footer p,
.footer p {
color: #6d7876;
font-size: 12.5px;
line-height: 1.7;
max-width: 92ch;
}
footer a,
.footer a { color: var(--aa-teal); }
/* --- text utility recolors (Bootstrap helpers) ------------------------- */
.text-muted { color: var(--aa-text-dim); }
.text-primary, .text-info { color: var(--aa-teal-hi); }
.text-dark, .text-black { color: var(--aa-text-hi); }
.bg-white, .bg-light { background: var(--aa-bg-panel); color: var(--aa-text); }
/* --- responsive --------------------------------------------------------- */
@media (max-width: 767px) {
body { font-size: 15px; }
.h3 { margin-top: 32px; }
h4, .h4 { font-size: 24px; }
table, .table { display: block; overflow-x: auto; }
}
/* --- print -------------------------------------------------------------- */
@media print {
html, body { background: #fff; color: #111; }
h1, h2, h3, h4, .h3, .h4, strong { color: #000; }
p, li { color: #222; }
.navbar, .navbar-nav, footer .btn { display: none; }
a { color: #000; }
}