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 "../../node_modules/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 "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/variables-dark";

// Include any default map overrides here

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

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

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

// Utilities
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/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;
}

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

:target::before {
  content: "";
  display: block;
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
}

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

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

h1,
h2 {
  font-family: 'Century Gothic',
  var(--#{$prefix}font-sans-serif);
}

h3,
h4,
h5,
h6 {
  font-family: 'Eras ITC',
  var(--#{$prefix}font-sans-serif);
}

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);
}

.navbar {
  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;
}

.nav-item,
.nav-link {
  @extend .text-white;
  font-family: 'Eras ITC',
  var(--#{$prefix}font-sans-serif);
}

.navbar-nav .btn {
  margin-left: var(--bs-navbar-nav-link-padding-x);
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}

.hero {
  height: 100vh;
}

main {
  @extend .mt-3;
}

main>* {
  @extend .pt-5;
  @extend .pb-3;
}

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

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

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

.card {
  overflow: hidden;
}

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

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

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

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