application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Arvo:400');

$font-family-sans-serif: brandon-grotesque,'Brandon Grotesque', Futura,sans-serif;
$font-family-serif: brandon-grotesque,'Brandon Grotesque', Futura,sans-serif;

$font-family-base: $font-family-serif;
$headings-font-family: $font-family-sans-serif;

$body-bg: #fdf8f7;
$body-color: rgba(28, 13, 10, 0.7);
$headings-color: rgba(28, 13, 10, 0.7);

//$theme-colors: (
//        "primary": #f9ad81,
//        "secondary": #b18f3a,
//        "tertiary": #eabf8b,
//        "quaternary": #50b796,
//        "quinary": #e4f1e0,
//        "senary": #f9ded8,
//        "septenary": #7f73ba,
//        "octonary": #fdf8f7
//);

$theme-colors: (
        "primary": #a34829,
        "secondary": #d17220,
        "tertiary": #df9453,
        "quaternary": #41766e,
        "quinary": #216975,
        "senary": #09454f,
        "septenary": #7f73ba,
        "octonary": #F7F7F7
);

$enable-rounded: false;

@import "bootstrap";
@import "welcome";

body {
  font-feature-settings: "kern","liga","pnum";
  -webkit-font-smoothing: antialiased;
  font-size: 1.1rem;
}

h1 {
  color: theme-color("primary");
  font-size: 60px;
  font-weight: 200;
  letter-spacing: 0.0833333em;
  text-transform: uppercase;
}

h2 {
  color: theme-color("primary");
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: .5em;
  margin-bottom: .5em;

  svg {
    fill: currentColor;
    margin: 0 auto;
    height: 100px;
  }
}

h4 {
  font-family: 'Surveyor Display', 'Surveyor Display A', 'Surveyor Display B', serif;
  font-size: 1.575rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.container-fluid {
  padding-top: 2em;
  padding-bottom: 3em;
}

.wedding-cta-btn {
  letter-spacing: 2px;
  padding: 0.75rem 1.5rem;
}

.wedding-required {
  color: theme-color("primary");
}

.btn {
  font-size: 1.2em !important;
}

//nav {
//  max-width: 100vw;
//}

.navbar-nav {
  width: 100vw;
  background: $body-bg;

  li {
    letter-spacing: 0.12em;
    font-size: .775em;
  }

  a.nav-link {
    color: theme-color("secondary") !important;
  }
}

.sans-caps {
  letter-spacing: .12em;
}

.larger {
  font-size: 1.5em;
}

.title-section {
  margin-bottom: 2em;
}

*[class^="iconoir-"], *[class*=" iconoir-"] {
  margin-left: auto;
  margin-right: auto;
  width: 1em;
  font-size: 2em;
}

.underline {
  display: block;
  width: 60px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #333;
  margin-left: auto;
  margin-right: auto;
}

div.scroll {
  letter-spacing: 0.12em;
  padding-bottom: 3em;
  position: absolute;
  bottom: 0;
}

.rounded {
  border-radius: 100% !important;
}

.home_video {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  justify-content: center;
  object-fit: cover;
  top: 0;
  z-index: -2;
  filter: brightness(40%);
}