Vandevliet.AerialShots.Website/src/scss/styles.scss

// Toggle global options
// $enable-gradients: true;
// $enable-shadows: true;

// Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/scss/functions";

// scss-docs-start color-variables
$red: #cc2929; // Default: #dc3545

// scss-docs-start theme-color-variables
$primary: $red; // Default: $blue

// Include remainder of required Bootstrap stylesheets
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// Include any default map overrides here
$carousel-indicator-active-bg-dark: $white;
$carousel-caption-color-dark: $white;
$carousel-control-icon-filter-dark: unset;
$accordion-icon-width: 1rem;

// Include remainder of required parts
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

// Utilities
@import "bootstrap/scss/utilities";

// Include any other parts as needed
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar"; // Requires nav
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/images";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/accordion";
// @import "bootstrap/scss/alert";
// @import "bootstrap/scss/badge";
// @import "bootstrap/scss/breadcrumb";
// @import "bootstrap/scss/button-group";
// @import "bootstrap/scss/close";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/forms";
// @import "bootstrap/scss/modal"; // Requires transitions
// @import "bootstrap/scss/offcanvas"; // Requires transitions
// @import "bootstrap/scss/pagination";
// @import "bootstrap/scss/placeholders";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/progress";
// @import "bootstrap/scss/spinners";
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/toasts";
// @import "bootstrap/scss/tooltip";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities API
@import "bootstrap/scss/utilities/api";

//
// Custom styles
//

@font-face {
  font-family: 'Century Gothic';
  src: url('../font/GOTHICB.TTF') format('truetype');
  font-display: fallback;
}

@font-face {
  font-family: 'Eras ITC';
  src: url('../font/ERASMD.TTF') format('truetype');
  font-display: fallback;
}

$ff-header: 'Century Gothic',
var(--#{$prefix}font-sans-serif);
$ff-subheader: 'Eras ITC',
var(--#{$prefix}font-sans-serif);

main {
  @extend .pt-3;
  @extend .pb-4;
  @extend .flex-grow-1;
}

section,
main>* {
  @extend .pt-4;
  @extend .pb-3;
}

header {
  min-height: 4.5rem;
}

::selection {
  @extend .text-dark;
  background-color: $red-200;
}

:target {
  scroll-margin-top: 4.5rem;
}

.anchor-link {
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.ff-header,
h1,
h2 {
  font-family: $ff-header;
}

.ff-subheader,
h3,
h4,
h5,
h6 {
  font-family: $ff-subheader;
}

h1,
h2 {
  @extend .mb-0;

  &:not(:first-child) {
    @extend .mt-4;
  }
}

h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote,
dl,
dt,
dd {
  @extend .mb-0;

  &:not(:first-child) {
    @extend .mt-3;
  }
}

h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link {
  opacity: 1;
}

.text-shadow {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.4),
    -1px 0px 0 rgba(0, 0, 0, 0.4),
    -1px 1px 0 rgba(0, 0, 0, 0.4),
    0px -1px 0 rgba(0, 0, 0, 0.4),
    0px 0px 0 rgba(0, 0, 0, 0.4),
    0px 1px 0 rgba(0, 0, 0, 0.4),
    1px -1px 0 rgba(0, 0, 0, 0.4),
    1px 0px 0 rgba(0, 0, 0, 0.4),
    1px 1px 0 rgba(0, 0, 0, 0.4);
}

.text-dark.text-shadow {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.4),
    -1px 0px 0 rgba(255, 255, 255, 0.4),
    -1px 1px 0 rgba(255, 255, 255, 0.4),
    0px -1px 0 rgba(255, 255, 255, 0.4),
    0px 0px 0 rgba(255, 255, 255, 0.4),
    0px 1px 0 rgba(255, 255, 255, 0.4),
    1px -1px 0 rgba(255, 255, 255, 0.4),
    1px 0px 0 rgba(255, 255, 255, 0.4),
    1px 1px 0 rgba(255, 255, 255, 0.4);
}

:not(a)>.fa-regular,
:not(a)>.fa-solid {
  color: var(--bs-primary);
}

.navbar,
.hero-body {
  background-image: none !important;
  background-color: rgba(22, 23, 25, 0.6) !important;
  transition: background-color 0.5s;
}

body.is-scrolled .navbar {
  background-color: rgba(22, 23, 25, 1.0) !important;
}

.navbar-collapse:not(.collapsing):not(.show) {
  max-width: fit-content;
}

.hero-body {
  width: 100%;
  padding: 1rem;
  @extend .h5;
  @extend .text-center;
  @extend .text-white;
}

.nav-item {

  .nav-link,
  .btn {
    // @extend .text-white;
    font-family: $ff-header;
  }
}

.btn {
  @extend .text-white;
  font-family: $ff-header;

  .fa-regular,
  .fa-solid {
    color: inherit;
  }
}

.socials {
  display: flex;
  gap: .5rem;
}

.navbar-nav {
  .btn {
    border: none;
    padding-top: var(--bs-nav-link-padding-y);
    padding-bottom: var(--bs-nav-link-padding-y);
  }

  .socials {
    @extend .justify-content-center;
  }

  // navbar-expand-lg
  @include media-breakpoint-up(lg) {

    .btn:not(.btn+.btn),
    .socials a:not(a+a) {
      margin-left: var(--bs-navbar-nav-link-padding-x);
    }

    .socials {
      gap: 0;
    }
  }
}

.row {
  margin-top: unset;
  --bs-gutter-y: var(--bs-gutter-x);
}

img.grayscale-effect {
  transition: filter 0.2s;
}

:not(:hover) img.grayscale-effect {
  filter: grayscale(80%);
}

.gradient-to-top-light {
  position: relative;
}

.gradient-to-top-light::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%);
  z-index: 1;
}

.parallax,
.cover,
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.parallax {
  position: absolute;
  height: 100vh;
}

.card {
  border: none;
  overflow: hidden;
}

.card-img-overlay {
  position: unset;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.carousel-caption {
  right: unset;
  left: unset;
  bottom: 0;
  // @extend .text-shadow;
}

.carousel-indicators {
  position: unset;
  border-bottom-left-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.carousel-caption,
.carousel-indicators {
  width: 100%;
  background-color: rgba(22, 23, 25, 0.6) !important;
  @extend .m-0;
  @extend .p-0;
}

.accordion-button:not(.accordion .accordion-button) {
  @extend .accordion;

  padding: unset;
  color: unset;
  background-color: unset;
  box-shadow: unset;
  border: 0;

  &::after {
    width: var(--#{$prefix}accordion-btn-icon-width);
    height: var(--#{$prefix}accordion-btn-icon-width);
    margin-left: .5rem;
    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
  }
}

.list-group-item {
  background-color: inherit;
  border: solid var(--bs-body-bg);
  border-width: 3px 0 0 0 !important;
}

.scrollto-highlight {
  position: relative;
  overflow: hidden;
  animation: highlight-fade 1s ease;
}

.scrollto-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.20);
  pointer-events: none;
  animation: highlight-overlay-fade 1s ease-in-out forwards;
}

@keyframes highlight-overlay-fade {

  0% {
    opacity: 0;
  }

  5%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}