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 #############
   Dropped (unused in the theme): dropdown, button-group,
   accordion, breadcrumb, progress, toasts, modal, tooltip,
   popover, spinners, placeholders.
   Kept: grid + carousel + nav/navbar + forms/buttons + tables
   + list-group + card + pagination + alert + badge (last.fm stat
   counts) + the utilities API. (offcanvas nav is now self-contained
   CSS via :target — see .dw-offcanvas in Overrides.)
   (Was the full ~200 KB framework.)
************************************************************/

@import '../node_modules/bootstrap/scss/utilities';
@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/reboot';
@import '../node_modules/bootstrap/scss/type';
@import '../node_modules/bootstrap/scss/images';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/tables';
@import '../node_modules/bootstrap/scss/forms';
@import '../node_modules/bootstrap/scss/buttons';
@import '../node_modules/bootstrap/scss/transitions';
@import '../node_modules/bootstrap/scss/nav';
@import '../node_modules/bootstrap/scss/navbar';
@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/pagination';
@import '../node_modules/bootstrap/scss/alert';
@import '../node_modules/bootstrap/scss/list-group';
@import '../node_modules/bootstrap/scss/badge';
@import '../node_modules/bootstrap/scss/close';
@import '../node_modules/bootstrap/scss/carousel';
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/utilities/api';

/* 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="#offcanvasNav">, 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: 100px;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out, visibility 0.3s;
  overflow-y: auto;
}
.dw-offcanvas:target {
  visibility: visible;
  transform: none;
}
.dw-offcanvas-close {
  position: absolute;
  top: 0.25rem;
  right: 0.75rem;
  font-size: 1.75rem;
  line-height: 1;
  color: inherit;
  text-decoration: 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;
}