daw/css/styles.css

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

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

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

need to test

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


/***********************************************************
########## Bootstrap fully removed (2026-07-13) ###########
   The theme no longer depends on the bootstrap npm package. Everything
   below is hand-rolled from the parts the theme actually used: a 12-col
   flex grid, ~35 utility classes, and the components (badge, alert,
   pagination, list-group, nav/navbar, card, forms, buttons).
   Dropped with no replacement: dropdown, button-group, accordion,
   breadcrumb, progress, toasts, modal, tooltip, popover, spinners,
   placeholders, carousel (→ native .dw-carousel), tables, close,
   transitions, helpers, the utilities API, root, reboot, type
   (base reset/typography come from the theme's own normalize + reset
   above and theme.json global styles).
   (offcanvas nav is self-contained CSS via :target — see .dw-offcanvas.)
************************************************************/

/* reboot provided body { color }; the theme's reset/bg cover the rest. */
body { color: #232323; }

/* ---- replacements for dropped Bootstrap partials ---- */

/* 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. Bootstrap badges had
   a colored background; without it the old color:#fff was near-invisible white text
   on the light .list-group-item. Use the site link red (matches the Studio admonition
   / search button) so the counts read on the light card. */
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--link, #67000a);
  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);
}
.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@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 {
  /* no position here — the header navbar is always .fixed-top (position:fixed);
     a `position: relative` would win on source order and drop it into flow,
     adding ~85px above the content and causing a scroll-jump (single.js). */
  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.45rem;
  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 */
}
.dw-carousel-track::-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;
  background: transparent;
  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: 40vh;
}
.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;
}