Starter CSS

styles.css

/** TABLE OF CONTENTS
---------------------------------------------------------------------------/


1.0 - Global Styles
  1.1 - General
  1.2 - Selection Highlight
  1.3 - Buttons
  1.4 - Typography
  1.5 - Custom Font Face
  1.6 - Hero Styles
  1.7 - Forms

2.0 - Layout + Themer
  2.1 - Header
  2.2 - Navigation
  2.3 - Footer

3.0 - Page Specific CSS
  3.1 - Homepage

4.0 - Admin Branding
  4.1 - Admin Bar
  4.2 - Builder Styles

5.0 - Tablet Only Styles

6.0 - Tablet + Mobile Styles

7.0 - Mobile Only Styles

8.0 - Accessibility Styles


/// END TABLE OF CONTENTS
--------------------------------------------------------------------------*/

/** 1.0 - Global Settings
--------------------------------------------------------------------------*/

/* =========================
   1.1 - General
   ========================= */

:root {
  --clr-primary: #878787;
  --clr-primary-rgb: 135 135 135;

  --clr-secondary: #595959;
  --clr-secondary-rgb: 89 89 89;

  --ff-serif: "Times New Roman", serif;
  --ff-sans-serif: Helvetica, sans-serif;

  --tr: 0.2s ease-in-out;

  --bs: 0 5px 10px rgb(0 0 0 / 0.25);
  --bs-small: 0 3px 8px rgb(0 0 0 / 0.25);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes */

.wrapcenter {
  text-align: center !important;
}

.centeralign {
  margin: 0 auto;
  display: block;
}

.inlineblock {
  display: inline-block;
}

.flow,
.float {
  display: inline-block;
  position: relative;
}

/* Flexbox */

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.align-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}

.align-flex-start,
.align-flex-start .fl-row-content-wrap,
.align-flex-start.fl-row-custom-height.fl-row-align-center
  .fl-row-content-wrap {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.justify-flex-start,
.justify-flex-start .fl-row-content-wrap,
.justify-flex-start.fl-row-custom-height.fl-row-align-center
  .fl-row-content-wrap {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
.align-flex-center,
.align-flex-center .fl-row-content-wrap,
.align-flex-center.fl-row-custom-height.fl-row-align-center
  .fl-row-content-wrap {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}
.justify-flex-center,
.justify-flex-center .fl-row-content-wrap,
.justify-flex-center.fl-row-custom-height.fl-row-align-center
  .fl-row-content-wrap {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.align-flex-end,
.align-flex-end .fl-row-content-wrap,
.align-flex-end.fl-row-custom-height.fl-row-align-center .fl-row-content-wrap {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-align-items: flex-end;
}
.justify-flex-end,
.justify-flex-end .fl-row-content-wrap,
.justify-flex-end.fl-row-custom-height.fl-row-align-center
  .fl-row-content-wrap {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

/* Sticky Column for Desktop */
@media (min-width: 993px) {
  .sticky-col {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 125px;
  }
}

/* Fixes margins for when modules pull content from another saved module. */
.fl-builder-module-template {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Fixes pixel shifting for row shape layers */
.fl-builder-shape-layer > svg {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* =========================
   1.2 - Selection Highlight
   ========================= */

::-moz-selection {
  background: rgb(var(--clr-primary-rgb) / 0.75);
  color: white;
  -webkit-text-fill-color: white;
  text-shadow: none;
}

::selection {
  background: rgb(var(--clr-primary-rgb) / 0.75);
  color: white;
  -webkit-text-fill-color: white;
  text-shadow: none;
}

/* =========================
   1.3 - Buttons
   ========================= */

button:active,
input[type="button"]:active,
input[type="submit"]:active,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.fl-builder-content .fl-button:active {
  top: inherit;
}

/* =========================
   1.4 - Typography
   ========================= */

.ff-sans-serif,
.ff-sans-serif span {
  font-family: var(--ff-ss);
}
.ff-serif,
.ff-serif span {
  font-family: var(--ff-serif);
}

.two-col .fl-rich-text p {
	-webkit-column-count:2;
	   -moz-column-count:2;
	        column-count:2;
	-webkit-column-gap:40px;
	   -moz-column-gap:40px;
	        column-gap:40px;
}

.two-col .fl-rich-text ul{
	position: relative;
	-webkit-column-count: 2;
		 -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 40px;
		 -moz-column-gap: 40px;
          column-gap: 40px;
}
.two-col .fl-rich-text li{
	position: relative;
  -webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	page-break-inside: avoid;
	     break-inside: avoid;
	line-height:1.4;
	margin-bottom:15px;
}

/* =========================
   1.5 - Custom Font Face
   ========================= */

@font-face {
  font-family: "Font Name";
  src: url("/wp-content/themes/bb-theme-child/fonts/font.woff2") format("woff2"),
    url("/wp-content/themes/bb-theme-child/fonts/font.woff") format("woff");
  font-weight: normal;
}

/* =========================
   1.6 - Hero Styles
   ========================= */

.hero:not(.home-hero) .fl-row-content-wrap {
  min-height: 300px;
}

@media (min-width: 768px) and (max-width: 992px) {
  .hero:not(.home-hero) .fl-row-content-wrap {
    min-height: 250px;
  }
}

@media (max-width: 767px) {
  .hero:not(.home-hero) .fl-row-content-wrap {
    min-height: 200px;
  }
}

/* =========================
   1.7 - Forms
   ========================= */




/** END Global Settings
--------------------------------------------------------------------------*/

/** 2.0 - Layout + Themer
--------------------------------------------------------------------------*/

/* =========================
   2.1 - Header
   ========================= */

header {
  position: relative;
}

.fl-page-header-wrap {
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

/* =========================
   2.2 - Navigation
   ========================= */

.menu-item a {
  -webkit-transition: var(--tr);
  transition: var(--tr);
}

/* =========================
   2.3 - Footer
   ========================= */




/** END Layout
--------------------------------------------------------------------------*/




/** 3.0 - Page Specific CSS
--------------------------------------------------------------------------*/

/* =========================
   3.1 - Homepage
   ========================= */




/** END Page Specific CSS
--------------------------------------------------------------------------*/

/** 4.0 - Admin Branding
--------------------------------------------------------------------------*/

/* =========================
   4.1 - Admin Bar
   ========================= */

#wpadminbar {
  background-color: var(--clr-primary);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
  background-color: var(--clr-secondary);
}

#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
  background-color: var(--clr-secondary);
}

#wp-admin-bar-wp-logo,
#wp-admin-bar-rank-math,
#wpadminbar #wp-admin-bar-site-name > .ab-item:before {
  display: none;
}

li#wp-admin-bar-wlcms-admin-logo img {
  max-width: 30px;
}

/* =========================
   4.2 - Builder Styles
   ========================= */

.fl-builder-bar-title-icon,
#fl-builder-toggle-notifications {
  display: none;
}

.fl-builder-bar-title-area {
  padding: 4px 4px 4px 15px;
}

/** END Admin Branding
--------------------------------------------------------------------------*/

/** 5.0 - Tablet Only Styles
--------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 992px) {
  .tabletcenter {
    text-align: center !important;
    float: none !important;
  }
}

/** 6.0 - Tablet + Mobile Styles
--------------------------------------------------------------------------*/

@media (max-width: 992px) {
  /* For reverse tablet, must add tablet_reversed class to ROW */
  .tablet_reversed .fl-col-group.fl-col-group-responsive-reversed {
    display: -moz-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-box-orient: horizontal;
  }
  .tablet_reversed .fl-col-group-responsive-reversed .fl-col:nth-of-type(1) {
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }

  /* Typography */
  .two-col .fl-rich-text {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
  }
}

/** 7.0 - Mobile Only Styles
--------------------------------------------------------------------------*/

@media (max-width: 767px) {
  .mobilecenter {
    text-align: center !important;
    float: none !important;
  }
}

/** 8.0 - Accessibility Styles
--------------------------------------------------------------------------*/

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-delay: 0.01ms !important;
            animation-delay: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    -webkit-transition-delay: 0.01ms !important;
            transition-delay: 0.01ms !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
  }
}