/* * * DEFINE CSS VARIABLES HERE * * also custom breakpoints * * IN bootstrap 4 breakpoints are as follows: * xxs : 0 * xs : 305 * sm : 576 * md : 768 * lg : 992 * xl : 1200 * xxl : 1360 * xxxl : 1680 * * These breakpoints were modified from the defaults found on bootstraps docs * */ /********************************* * * * Mixins * * */ /****************** Animation mixins ********************/ /* Use in stylesheet: #intro_animated_image { @include transform_test($skew: (0, 30deg)); } output in chrome dev tools: #intro_animated_image { -ms-transform: scale(1, 1) translate(0, 0) skew(0, 30deg) rotate(0) perspective(0); -webkit-transform: scale(1, 1) translate(0, 0) skew(0, 30deg) rotate(0) perspective(0); transform: scale(1, 1) translate(0, 0) skew(0, 30deg) rotate(0) perspective(0); -moz-transform: scale(1, 1) translate(0, 0) skew(0, 30deg) rotate(0) perspective(0); } */ /* * Automates the conversion of pixels to vw measurements for all screen break points. * * After importing Bootstrap, create a list of screen sizes you want to use: * $screen-sizes: $screen-xxs, $screen-xs-min, $screen-sm-min, $screen-md-min, $screen-lg-min, $screen-xlg-min, $screen-xxlg-min; * * Ideally your list would be smaller than this; if you're converting pixels at every break point you may as well just use pixels * * The last screen size in the list will be the size your screen will max out to. * */ /* Yaltown2.0 Variables */ /* To include proprietary fonts, do as below: @include font-face ('TT Norms', 'TT Norms Medium', '../fonts/tt_norms/', 'TTNorms-Regular',400, normal); @include font-face ('TT Norms', 'TT Norms Medium Italic', '../fonts/tt_norms/', 'TTNorms-MediumItalic',400, italic); @include font-face ('TT Norms', 'TT Norms Light', '../fonts/tt_norms/', 'TTNorms-Light',300, normal); */ /*---------------------------- dark background template (bleah) ----------------------------*/ /********************************* * * * Functions * * */ /** * Returns the text color based on the bg color given. * NOTE: rgba colors are treated as alpha 1, i.e. for rgba(0,0,0,0.2), * even though it's displayed almost as #fff, it's still considered #000. * * @param $bg_color - the bg color to be analyzed * @param $alt_dark_color - * @param $alt_light_color - * * @return the hex code for the text color */ :root { /* * reduce the pixels based on whether or not the current breakpoint is less than * the mobile break point. */ /* * If it isn't: * Set the next index, grab the index key, set the pixels based on * Google's accessibility standards. */ /* * reduce the pixels based on whether or not the current breakpoint is less than * the mobile break point. */ /* * If it isn't: * Set the next index, grab the index key, set the pixels based on * Google's accessibility standards. */ /* * reduce the pixels based on whether or not the current breakpoint is less than * the mobile break point. */ /* * If it isn't: * Set the next index, grab the index key, set the pixels based on * Google's accessibility standards. */ /* * reduce the pixels based on whether or not the current breakpoint is less than * the mobile break point. */ --default-font-size: calc(14px + 4 * ((100vw - 768px) / 911)); --default-line-height: 1.428571429; --title-font: 'Manrope', sans-serif; --subtitle-font: 'Manrope', sans-serif; --base-font: 'Manrope', sans-serif; --font-weight-light: 300 ; --font-weight-regular: 400 ; --font-weight-medium: 500 ; --font-weight-semibold: 600 ; --font-weight-bold: 700 ; --font-weight-xbold: 800 ; --font-weight-black: 900 ; --body-weight: 400; --#007bff-blue-color: ; --#6610f2-indigo-color: ; --#6f42c1-purple-color: ; --#e83e8c-pink-color: ; --#dc3545-red-color: ; --#fd7e14-orange-color: ; --#ffc107-yellow-color: ; --#28a745-green-color: ; --#20c997-teal-color: ; --#17a2b8-cyan-color: ; --#fff-white-color: ; --#6c757d-gray-color: ; --#343a40-gray-dark-color: ; --primary-brand-color: #415364; --secondary-brand-color: #3D4543; --dark-brand-color: #000; --accent-brand-color: #D8D8D8; --light-brand-color: #9B9B9B; --sold-brand-color: #EC0928; --brandlight-brand-color: #758592; --brandlighter-brand-color: #BECCD5; --lightgreencolor-brand-color: #AAC6C9; --greencolor-brand-color: #007A8A; --browncolor-brand-color: #B6A999; --lightbrown-brand-color: #D6D1CA; --black-overlay-color: rgba(0, 0, 0, 0.7); --white-overlay-color: rgba(255, 255, 255, 0.7); --primary-overlay-color: rgba(65, 83, 100, 0.7); --secondary-overlay-color: rgba(61, 69, 67, 0.7); --dark-overlay-color: rgba(0, 0, 0, 0.7); --accent-overlay-color: rgba(216, 216, 216, 0.7); --light-overlay-color: rgba(155, 155, 155, 0.7); --sold-overlay-color: rgba(236, 9, 40, 0.7); --brandlight-overlay-color: rgba(117, 133, 146, 0.7); --brandlighter-overlay-color: rgba(190, 204, 213, 0.7); --lightgreencolor-overlay-color: rgba(170, 198, 201, 0.7); --greencolor-overlay-color: rgba(0, 122, 138, 0.7); --browncolor-overlay-color: rgba(182, 169, 153, 0.7); --lightbrown-overlay-color: rgba(214, 209, 202, 0.7); --logo-width: 22.2222222222rem; --logo-height: 8.8333333333rem; --header-link-color: #3D4543; --brokeragelogo-width: 236px; --footerlogo-width: get-rem(27px); --default-padding: 1rem; --default-margin: 1rem; --listing-gallery-w: 640; --listing-gallery-h: 544; --bldg-gallery-w: 640; --bldg-gallery-h: 544; --transition: 0.3s; --fv-body-bg: #ffffff; --light-bg: #f9f9f9; --hover-link-color: #6c869f; --hover-button-color: #556d83; --social-icon-margin: 0.5rem; --social-icon-width: 2.2222222222rem; --top-image-margin: 0; } @media only screen and (min-width: 305px) { :root { --font-size: calc(13.5px + 2.5 * ((100vw - 305px) / 271)); } } @media only screen and (min-width: 576px) { :root { --font-size: calc(13.5px + 3.5 * ((100vw - 576px) / 416)); } } @media only screen and (min-width: 992px) { :root { --font-size: calc(12px + 6 * ((100vw - 992px) / 688)); } } @media only screen and (min-width: 1680px) { :root { --font-size: 18px; } } @media only screen and (min-width: 1680px) { :root { --font-size: 18px; } } @media only screen and (min-width: 768px) { :root { --top-image-margin: 6rem; } } /*# sourceMappingURL=root.css.map */