/* Colour theme "steel" of the finsec.localdomain website (chosen from five: midnight, graphite, crimson, steel, daylight).
   themes-base.css (generated by websites/mkthemes.py) applies these variables to every colour of the template. */
html[data-theme="steel"] {      /* slate blue-grey with the logo blue and red */
  --primary: #4aa3f0; --secondary: #e83338; --bg-card: #1a2230; --bg-alt: #141b27; --bg-dark: #0d131d;
  --text: #e9eef5; --muted: #9aa8bb; --border: #2b3750; --brand-systems: #ffffff; --hero-filter: grayscale(1) brightness(.9); --hero-img-opacity: .16; --on-dark: #ffffff; --primary-dark: #2a82d0; --hover: #8cc8ff; --circle-1: #1d3556; --circle-2: #3a1a24; --primary-rgb: 74,163,240; --secondary-rgb: 232,51,56; --bg-dark-rgb: 13,19,29; color-scheme: dark;
}
/* the parts the template does not colour through the variables above */
html[data-theme] body { color: var(--muted); }
html[data-theme] input, html[data-theme] textarea, html[data-theme] select { color: var(--text); }
html[data-theme] .form-input { background: transparent; }
html[data-theme] .rd-navbar-fixed .rd-navbar-nav-wrap, html[data-theme] .rd-navbar--is-stuck, html[data-theme] .rd-navbar--is-clone { background: var(--bg-card); }
html[data-theme] ::selection { background: var(--primary); color: #fff; }

/* the template's photo sections are teal: on the dark themes they become a dark panel with the polygons as a faint texture */
html[data-theme] .parallax-container, html[data-theme] .bg-accent { background-color: var(--bg-dark); }
html[data-theme] .parallax-container, html[data-theme] .bg-accent { background-image: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg-dark) 100%); }
html[data-theme] .material-parallax img { filter: var(--hero-filter); opacity: var(--hero-img-opacity); }
html[data-theme] #signup { background-blend-mode: normal; }
html[data-theme] #signup { background-image: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg-dark) 100%) !important; }
html[data-theme] .bg-overlay-3::before, html[data-theme] .bg-overlay-4::before { background: transparent; }
/* text on those panels, and the buttons in the header */
html[data-theme] .page-header-2 .text-default, html[data-theme] .bg-accent p, html[data-theme] .context-dark p { color: var(--on-dark); opacity: .85; }
html[data-theme] .rd-navbar-element .button-default-outline { color: var(--on-dark); border-color: var(--on-dark); }
html[data-theme] .rd-navbar-element .button-default-outline:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme] .button-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme] .button-primary:hover, html[data-theme] .button-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
/* closing banner: the template's blue gradient becomes a glow of the theme colour */
html[data-theme] .section-decoration-4::before { background: linear-gradient(to top, rgba(var(--primary-rgb), .22) 0%, rgba(var(--primary-rgb), 0) 100%); }
html[data-theme] .section-decoration-4 .layer { filter: var(--hero-filter); opacity: .5; }
html[data-theme] .page-header-2-inner h2, html[data-theme] .page-header-2-inner h4 { color: #fff; }
/* no box behind the Evaluate button in the header, no panel behind the platform tabs */
html[data-theme] .rd-navbar-element, html[data-theme] .rd-navbar-element.bg-accent { background: transparent !important; }
html[data-theme] .nav-tabs .nav-link, html[data-theme] .nav-tabs .nav-link.active, html[data-theme] .nav-tabs .nav-item.show .nav-link,
html[data-theme] .tabs-line .nav-link, html[data-theme] .tabs-line .nav-link.active, html[data-theme] .tabs-features .nav-link { background: transparent !important; }
html[data-theme] .tabs-line_1 .nav-link:not(.active):not(:hover) span::after { background: transparent; }