Design &
Pattern Library
TYPOGRAPHY
:root {
--font-primary: 'Roboto', sans-serif;
--font-headlines: 'Roboto Condensed', sans-serif;
--font-tertiary: 'Playfair Display', serif;
}
/* Font Helper Classes */
.roboto { font-family: 'Roboto', sans-serif!important; }
.roboto-condensed { font-family: 'Roboto Condensed', sans-serif!important; }
.playfair-display { font-family: 'Playfair Display', serif!important; }
.playfair-display-italic { font-family: 'Playfair Display', serif!important; font-style: italic; }
/* Gutenberg Helper Classes */
.uppercase { text-transform: uppercase!important; }
/* Font Weight Helper Classes */
.fw-100,
.fw-100i {
font-weight: 100;
}
.fw-300,
.fw-300i {
font-weight: 300;
}
.fw-400,
.fw-400i {
font-weight: 400;
}
.fw-500,
.fw-500i {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700,
.fw-700i {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}
.fw-900,
.fw-900i {
font-weight: 900;
}SPACING
/* Size Variables */
:root {
--spacer-sm: .5rem;
--spacer-med: 1rem;
--spacer-lg: 2rem;
--spacer-xl: 2.5rem;
}
/* Spacing */
.m-auto { margin: auto!important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacer-sm)!important; }
.mt-2 { margin-top: var(--spacer-med)!important; }
.mt-3 { margin-top: var(--spacer-lg)!important; }
.mt-4 { margin-top: var(--spacer-xl)!important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacer-sm)!important; }
.mr-2 { margin-right: var(--spacer-med)!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: var(--spacer-sm)!important; }
.mb-2 { margin-bottom: var(--spacer-med)!important; }
.mb-3 { margin-bottom: var(--spacer-lg)!important; }
.mb-4 { margin-bottom: var(--spacer-xl)!important; }
.ml-0 { margin-left: 0!important; }
.ml-1 { margin-left: var(--spacer-sm)!important; }
.ml-2 { margin-left: var(--spacer-med)!important; }
.ml-3 { margin-left: var(--spacer-lg)!important; }
.ml-4 { margin-left: var(--spacer-xl)!important; }
.p-all-1 { padding: var(--spacer-sm)!important; }
.p-all-2 { padding: var(--spacer-med)!important; }
.p-all-3 { padding: var(--spacer-lg)!important; }
.p-all-4 { padding: var(--spacer-xl)!important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacer-sm)!important; }
.pt-2 { padding-top: var(--spacer-med)!important; }
.pt-3 { padding-top: var(--spacer-lg)!important; }
.pt-4 { padding-top: var(--spacer-xl)!important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacer-sm)!important; }
.pr-2 { padding-right: var(--spacer-med)!important; }
.pr-3 { padding-right: var(--spacer-lg)!important; }
.pr-4 { padding-right: var(--spacer-xl)!important; }
.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: var(--spacer-sm)!important; }
.pb-2 { padding-bottom: var(--spacer-med)!important; }
.pb-3 { padding-bottom: var(--spacer-lg)!important; }
.pb-4 { padding-bottom: var(--spacer-xl)!important; }
.pl-0 { padding-left: 0!important; }
.pl-1 { padding-left: var(--spacer-sm)!important; }
.pl-2 { padding-left: var(--spacer-med)!important; }
.pl-3 { padding-left: var(--spacer-lg)!important; }
.pl-4 { padding-left: var(--spacer-xl)!important; }
COLORS
/* --------------------------------------------------------------------------
## Color Variables and Helper Classes
-------------------------------------------------------------------------- */
:root {
--color-primary: #222;
--color-accent: #536ba2;
--color-accent-dark: #37476b;
--color-accent-light: #a4acbd;
--color-accent-secondary: #b58e31;
--color-white: #fff !important;
--color-white-opacity: rgba(255,255,255, 0.9) !important;
--color-black: #222 !important;
--color-black-opacity: rgba(0,0,0, 0.9) !important;
--color-success: #80A343;
--color-feedback: #b58e31;
--color-alert: #CC2723;
--color-gray-light: #F0F2E9;
--color-gray-dark: #7f807b;
--border-color: #D6D6D6;
--border-color-dark: #40403E;
--border-color-accent-secondary: #b58e31;
--box-shadow: 0 6px 9px 0 rgba(50,54,65,0.05);
--box-shadow-dark: 0 8px 60px 0 rgba(0,0,0,0.25), 0 12px 90px 0 rgba(0,0,0,0.25);
}
/* Block Color Palette Colors
* declared in inc/theme-options.php
*/
.has-accent-color { color: var(--color-accent)!important; }
.has-accent-dark-color { color: var(--color-accent-dark)!important; }
.has-accent-light-color { color: var(--color-accent-light)!important; }
.has-accent-secondary-color { color: var(--color-accent-secondary)!important; }
.has-dark-gray-color { color: var(--color-gray-dark)!important; }
.has-light-gray-color { color: var(--color-gray-light)!important; }
.background-client-variable { background-color: #00629c!important; }
.has-black-color,
.has-black-color p {
color: var(--color-black);
}
.has-white-background-color { background-color: var(--color-white)!important; }
.has-black-background-color { background-color: var(--color-black)!important; }
.has-accent-background-color { background-color: var(--color-accent)!important; }
.has-accent-dark-background-color { background-color: var(--color-accent-dark)!important; }
.has-accent-light-background-color { background-color: var(--color-accent-light)!important; }
.has-accent-secondary-background-color { background-color: var(--color-accent-secondary)!important; }
.has-dark-gray-background-color { background-color: var(--color-gray-dark)!important; }
.has-light-gray-background-color { background-color: var(--color-gray-light)!important; }
BORDER
/* Border Color Variables */
:root {
/* Color - Blue */
--color-accent: #536ba2;
--color-accent-dark: #37476b;
--color-accent-light: #a4acbd;
/* Color - Gold */
--color-accent-secondary: #b58e31;
/* Border - Gray */
--border-color: #D6D6D6;
--border-color-dark: #40403E;
}
/* Border Helper Classes */
.border-color-dark { border-color: var(--border-color-dark)!important; }
.border-accent-color { border-color: var(--color-accent)!important; }
.border-accent-color-secondary { border-color: var(--color-accent-secondary)!important; }
.border-accent-light { border-color: var(--color-accent-light)!important; }
.border-accent-dark { border-color: var(--color-accent-dark)!important; }
.border { border: 1px solid var(--border-color); }
.bt { border-top: 1px solid var(--border-color); }
.br { border-right: 1px solid var(--border-color); }
.bb { border-bottom: 1px solid var(--border-color); padding-bottom: 30px!important; }
.bl { border-left: 1px solid var(--border-color); }
.b-0 { border: 0 !important; }
.bt-0 { border-top: 0 !important; }
.br-0 { border-right: 0 !important; }
.bb-0 { border-bottom: 0 !important; }
.bl-0 { border-left: 0 !important; }
.bt-small { border-top: 2px solid var(--border-color); }
.br-small { border-right: 2px solid var(--border-color); }
.bb-small { border-bottom: 2px solid var(--border-color); }
.bl-small { border-left: 2px solid var(--border-color); }
.bt-medium { border-top: 5px solid var(--border-color); }
.br-medium { border-right: 5px solid var(--border-color); }
.bb-medium { border-bottom: 5px solid var(--border-color); }
.bl-medium { border-left: 5px solid var(--border-color); }
.bt-large { border-top: 10px solid var(--border-color); }
.br-large { border-right: 10px solid var(--border-color); }
.bb-large { border-bottom: 10px solid var(--border-color); }
.bl-large { border-left: 10px solid var(--border-color); }LINE STYLING
/* Line Styling */
.line-styling { position: relative; padding-top: 12px!important; }
.line-styling::before { content: '';
position: absolute; top: 0; left: 0;
width: 16px; height: 4px;
background: var(--color-accent-secondary);
}ANIMATIONS
/* Animate Scale */
.animate-scale { overflow: hidden; }
.animate-scale img { backface-visibility: hidden;
transition: all .35s;
transform: scale(1);
}
.animate-scale:hover img {
transform: scale(1.0125);
opacity: .9;
}