daw/css/styles.scss

/***********************************************************
############################################################

	     .     . .              .       .  .
	. . ...-..-| |-. .-. .-.-..-| .-.. ...-|
	 ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-

url - https://davidawindham.com
git - https://github.com/windhamdavid/daw

need to test

############################################################
************************************************************/

/***********************************************************
################### Bootstrap Functions ####################
************************************************************/

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';


/***********************************************************
####################### Custom  ############################
************************************************************/

$body-bg: #d3d3d3;
$body-color: #232323;
$link-color: #67000a;
$theme-colors: (
  "dark": #535763,
);

$custom-colors: (
  'dw-blue-dark': #484C57,
  'dw-blue':#535763,
  'dw-light':#e2e2e2,
  'dw-bright':#e3e3e3,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors: map-remove($theme-colors, 'primary','secondary','success','warning', 'info');
$colors: map-remove($colors, 'white','black','gray','gray-dark','dark','blue','indigo','purple','pink', 'orange', 'yellow', 'green', 'teal', 'cyan');
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

$enable-negative-margins: true;


/***********************************************************
########## Bootstrap 5 — subset to used parts #############
   Being removed incrementally (Phases 1-3, 2026-07-13).
   Dropped (unused / migrated): dropdown, button-group, accordion,
   breadcrumb, progress, toasts, modal, tooltip, popover, spinners,
   placeholders, carousel (→ native .dw-carousel), tables, close,
   images, badge, alert, pagination (→ custom CSS below), helpers,
   and the whole utilities API (→ hand-rolled ~35-class layer below —
   the API generated hundreds of responsive variants; the theme uses ~35).
   Kept for now: grid + nav/navbar + forms/buttons + list-group + card.
   Phase 4 target: grid → WordPress block grid, then drop Bootstrap.
   (offcanvas nav is self-contained CSS via :target — see .dw-offcanvas.)
************************************************************/

@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/reboot';
@import '../node_modules/bootstrap/scss/type';

// ---- replacements for dropped Bootstrap partials (Phase 1 + 2) ----

// images partial: only .img-fluid was used (art page).
.img-fluid {
  max-width: 100%;
  height: auto;
}

// badge: last.fm stat counts (music) + analytics hit counts. Matches the
// former bootstrap/badge output exactly (incl. the theme's top:-1px nudge).
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
  position: relative;
  top: -1px;
}

// alert: contact-form success / error messages (inc/tweaks.php). The BS
// colour variants no longer compiled (theme-colors trimmed) — give them
// real green/red here.
.alert {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.alert-success {
  color: #0a3622;
  background-color: #d1e7dd;
  border-color: #a3cfbb;
}
.alert-danger {
  color: #58151c;
  background-color: #f8d7da;
  border-color: #f1aeb5;
}

// pagination: flex container only. WP paginate_links() emits .page-numbers /
// .pagination a, styled in style.css; margin/padding also live there.
.pagination {
  display: flex;
  list-style: none;
}

// ---- utilities (hand-rolled; replaces bootstrap utilities/api + helpers) ----
// Only the ~35 utility classes actually used in the theme markup; values match
// the former Bootstrap output exactly. Spacers: 1=.25 2=.5 3=1 4=1.5 5=3rem.
// Breakpoints: md=768px, lg=992px, xl=1200px. (mb-n1 was a no-op — BS doesn't
// generate negative margins by default — so it's intentionally omitted.)
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.d-flex { display: flex !important; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } // was in bootstrap/helpers (position); header navbar full-width fixed
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.float-end { float: right !important; }
.overflow-hidden { overflow: hidden !important; }
.fs-2 { font-size: calc(1.325rem + .9vw) !important; }
.fs-5 { font-size: 1.25rem !important; }
.fw-bold { font-weight: 700 !important; }
.fw-light { font-weight: 300 !important; }
.lh-base { line-height: 1.5 !important; }
.text-muted { color: rgba(33, 37, 41, .75) !important; }
.bg-dark { background-color: rgb(83, 87, 99) !important; }

@media (min-width: 768px) {
  .mt-md-0 { margin-top: 0 !important; }
  .text-md-start { text-align: left !important; }
  .text-md-end { text-align: right !important; }
}
@media (min-width: 992px) {
  .d-lg-block { display: block !important; }
}
@media (min-width: 1200px) {
  .fs-2 { font-size: 2rem !important; }
}

// ---- grid (hand-rolled 12-col flexbox; replaces bootstrap/grid + containers) ----
// .container base widths/padding are custom in style.css (fixed per breakpoint);
// only .container-fluid (full-width bands) + the flex grid live here.
.container-fluid {
  width: 100%;
  padding-right: .75rem;
  padding-left: .75rem;
  margin-right: auto;
  margin-left: auto;
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
$dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 66.666667%, 75%, 83.333333%, 91.666667%, 100%;
.col { flex: 1 0 0%; }
@for $i from 1 through 12 {
  .col-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
}
@each $bp, $w in (sm: 576px, md: 768px, lg: 992px) {
  @media (min-width: $w) {
    .col-#{$bp} { flex: 1 0 0%; }
    @for $i from 1 through 12 {
      .col-#{$bp}-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
    }
  }
}
@media (min-width: 768px) { .offset-md-1 { margin-left: 8.333333%; } }
@media (min-width: 992px) { .offset-lg-1 { margin-left: 8.333333%; } }

// ---- list-group (hand-rolled; replaces bootstrap/list-group) ----
// Base only; context overrides (ul.nav, .list-group-horizontal, #music) live in
// style.css. Resolved values: body-color #232323, body-bg #d3d3d3 (the gray
// rows on music/analytics), border #dee2e6, radius .375rem.
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.375rem;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: #232323;
  background-color: #d3d3d3;
  border: 1px solid #dee2e6;
  text-decoration: none;
}
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-horizontal { flex-direction: row; }
.list-group-horizontal > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: 0.375rem; border-top-right-radius: 0; }
.list-group-horizontal > .list-group-item:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-right-radius: 0.375rem; }

// ---- nav / navbar / card (hand-rolled; replaces those partials) ----
// Base only; the theme customizes navbar heavily (.navbar.fixed/.visible,
// .navbar .container, .site-title a) and self-styles the front-page .card.
// transitions partial dropped entirely (no .fade/.collapse used).
.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  white-space: nowrap;
  text-decoration: none;
}
.card { // front-page only; matches former bootstrap output (bg = body-bg #d3d3d3)
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  color: #232323;
  background-color: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
}

// ---- forms + buttons (hand-rolled; replaces those partials) ----
// Only used classes. btn-default/btn-danger never compiled (theme-colors
// trimmed) so they fall back to the base .btn, same as before.
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #232323;
  background-color: #d3d3d3;
  background-clip: padding-box;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
  color: #232323;
  background-color: #d3d3d3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #232323;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-dark {
  color: #fff;
  background-color: #535763;
  border-color: #535763;
}
.btn-dark:hover {
  color: #fff;
  background-color: #6d707a;
  border-color: #646873;
}
.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* Bootstrap Icons font dropped (2026-06-19): the header's 8 nav icons are now
   inline SVG in parts/header.html, so the full icon font + its ~2000 CSS rules
   are no longer imported. */

/***********************************************************
##################### Overrides ############################
************************************************************/

// Bootstrap 5.3 changed .table to default --bs-table-bg to --bs-body-bg
// (it was transparent in 5.2). Keep the About icon grid transparent.
.table.icons {
  --bs-table-bg: transparent;
}

// Sprite icons (dw_icon() / <use href="#dw-…">, from the FA Pro kit → icons.svg).
// Sized like a font icon: 1em square, inherits text color.
.dw-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}
// Social icons (was fa-2x). Baseline-aligned since they stand alone.
.dw-icon-2x {
  width: 2em;
  height: 2em;
  vertical-align: middle;
}

// Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas
// component + JS). The brand link is <a href="#nav">, so :target drives
// the open state; a backdrop <a href="#"> and the × link close it. Tradeoffs vs
// the BS JS version: no ESC-to-close, no focus-trap, no body-scroll-lock.
.dw-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1045; // above .navbar.fixed-top (1030)
  display: flex;
  flex-direction: column;
  height: 85px;              // match the scroll-up navbar dropdown (~84.6px)
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out, visibility 0.3s;
  overflow-y: auto;
  background: rgba(72, 76, 87, 0.7); // footer color (#484c57), translucent
  backdrop-filter: blur(6px);
}
.dw-offcanvas:target {
  visibility: visible;
  transform: none;
}
.dw-offcanvas-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040; // below .dw-offcanvas
  background: rgba(0, 0, 0, 0.4);
}
.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .dw-offcanvas {
    transition: none;
  }
}

// Gallery carousel — CSS scroll-snap (replaces the Bootstrap carousel on the
// art page). Swipe / trackpad / scrollbar natively; prev-next + arrow keys via
// a tiny vanilla script (js/art.js). No autoplay (was 5s) by design.
.dw-carousel {
  position: relative;
}
.dw-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; // Firefox
  &::-webkit-scrollbar {
    display: none; // WebKit
  }
}
.dw-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
}
.dw-carousel-prev,
.dw-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.dw-carousel-prev {
  left: 1rem;
}
.dw-carousel-next {
  right: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .dw-carousel-track {
    scroll-behavior: auto;
  }
}

// Studio hero — vanilla fade-carousel (replaces Bootstrap carousel-fade + the
// backstretch background). #studio-caro keeps its caro-grad* solid-colour
// classes + 1s transition from style.css; the bg layer / <video> show through
// when the gradient is caro-grad5 (transparent). Driven by js/studio.js.
#studio-caro {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
}
.dw-studio-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.dw-studio-video,
.dw-studio-tv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; // shown per-slide by studio.js (camera → Media, tv → fact intro)
}
.dw-studio-tv {
  filter: saturate(0); // grayscale, as it was behind the About fact slides
}
.dw-fade-carousel {
  position: relative;
  z-index: 1;
}
.dw-fade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}
.dw-fade-slide.active {
  position: relative; // the active slide defines the track height
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .dw-fade-slide {
    transition: none;
  }
}

// Studio tab panes — vanilla show/hide (replaces Bootstrap Tab).
#studio-tab .tab-pane {
  display: none;
}
#studio-tab .tab-pane.active {
  display: block;
}

// About fade-carousel indicator dots (replaces Bootstrap .carousel-indicators).
.dw-fade-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.dw-fade-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
}
.dw-fade-dot.active {
  background: #fff;
  opacity: 1;
}