@charset "utf-8"; /* CSS Document */ /* CUSTOM VARIABLES */ :root { /* font sizes */ --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem); --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem); --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem); --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem); --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem); --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem); --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem); /* Branding */ --color-brand-light: hsla(194,100%,47%,1.00); --color-brand-dark: hsla(145,79%,32%,1.00); --bg-page: hsla(160,3%,20%,1.00); /* body/page background: */ /* fonts & text */ --body-headings-font: "Nevison"; --body-sub-headings-font: "Nevison"; /* h2, h3, h4 + tagline */ --body-headings-weight: 400; --body-text-font: "Lato", sans-serif; --drop-cap-font: "Nevison"; --body-text-weight: 300; --body-text-letter-spacing: 0; --color-body-headings: hsla(0,0%,74%,1.00); --color-body-text: hsla(0,0%,74%,.8); --color-body-text-bold: inherit; --color-body-text-drop-cap: hsla(0,0%,84%,.8); --color-news-header: hsla(0,0%,100%,.7); --color-testimonial-header: hsla(0,0%,100%,.7); --color-testimonial-text: hsla(0,0%,20%,0.90); --color-testimonial-text-name: hsla(0,0%,16%,0.70); --color-testimonial-quotes: hsla(0,0%,38%,0.60); --color-videos-header: hsla(0,0%,100%,.7); --font-size-mobile: 1.2rem; --line-height-mobile: 1.4; --font-size-large: 1.4rem; --line-height-large: 1.3; --font-weight-bold: 500; /* --color-light: #fff; --color-medium: #A3A3A3; --color-dark: #008A58;*/ /* lists */ --list-item-margin-bottom-mobile: 10px; --list-item-margin-bottom-large: 10px; --line-height-bullet-large: 1.4; --line-height-bullet-mobile: 1.3; /* buttons */ --button-text-default: #FFFFFF; --button-text-home: #747474; --button-text-contact: #FFFFFF; --button-text-news: #C4C4C4; /* also sets color of News box */ --button-text-questions: #fff; /* sidebar */ --button-text-emphasize: #fff; --button-secondary-text-emphasize: #fff; --button-text-alternate: #fff; /* secondary menu */ --button-text-dropdownup: #fff; --button-text-hover: #0A0A0A; /* links */ --button-text-rev-hover: #FFFFFF; /* links on opposite background color */ --button-text-active: #fff; --button-txt-default-not-hovered: hsla(0,0%,23%,1.00); --button-bg-default: hsla(145,50%,32%,1.00); /* also text link color */ --button-bg-rev-default: #FFFFFF; /* links on dark bg */ --button-bg-home: hsla(0,0%,100%,1.00); --button-bg-contact: hsla(145,50%,32%,1.00); --button-bg-news: hsla(0,0%,74%,.3); /* sets bg color of news section as well */ --button-bg-questions: #464A97; --button-bg-jobs: hsl(201,100%,31%); --button-bg-emphasize: hsla(102,10%,30%,1.00); --button-secondary-bg-emphasize: hsl(218,34%,61%); /* used for Resources on FAQ pages */ --button-bg-alternate: hsla(145,50%,34%,1.00); /* buttons originating from drop-up menu button */ --button-bg-dropdownup: hsla(145,50%,32%,1.00); --button-bg-default-hover: hsla(145,30%,50%,1.00); /* --button-bg-on-click: hsl(195,60%,20%); */ --button-bg-default-not-hovered: #bdd3ce; /* fades out buttons not hovered */ --button-bg-rev-default-hover: #fff; --button-bg-active: hsla(0,0%,37%,1.00); --button-ouline: #fff; /* if button parent has box-style applied to make the button stand out */ /* Announcements/News */ /* background color controlled by --button-bg-news */ --news-title-color: hsl(180,100%,10%); --news-text-color: hsl(180,100%,16%); /* box styles - backgrounds */ --box-padding: 15px 20px 20px 20px; --box-1_bg-base: hsla(0,0%,79%,0.10); --box-1_bg-highlight: hsla(218,64%,61%,.4); --box-1_text-heading: hsla(0,0%,100%,.8); --box-1_text-content: hsla(218,50%,21%,.8); --box-1_border-top: hsla(194,70%,47%,.7); --box-1_border-bottom: hsla(194,70%,47%,.7); --box-1-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */ --box-1-li_bg-hover: hsla(0,0%,100%,0.5); --box-1-li_heading-base: hsla(218,50%,21%,.8); --box-1-li_heading-hover: hsla(218,70%,21%,1); --box-1-li_text-base: hsla(200,98%,18%,1.00); --box-1-li_text-hover: hsla(200,98%,18%,1.00); --box-2_bg-base: hsla(194,60%,70%,.7); --box-2_bg-highlight: hsla(194,80%,40%,.2); --box-2_text-heading: hsla(218,50%,31%,1); --box-2_text-content: hsla(218,50%,31%,.8); --box-2_border-top: hsla(194,70%,47%,.7); --box-2_border-bottom: hsla(194,70%,47%,.7); --box-2-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */ --box-2-li_bg-hover: hsla(0,0%,100%,0.5); --box-2-li_text-hover: hsla(218,50%,31%,.8); --box-3_bg-base: hsla(194,60%,70%,.7); --box-3_bg-highlight: hsla(194,80%,40%,.2); --box-3_text-heading: hsla(218,50%,31%,1); --box-3_text-content: hsla(218,50%,31%,.8); --box-3_border-top: hsla(194,70%,47%,.7); --box-3_border-bottom: hsla(194,70%,47%,.7); --box-3-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */ --box-3-li_bg-hover: hsla(0,0%,100%,0.5); --box-3-li_text-hover: hsla(218,50%,31%,.8); --box-4_bg-base: hsla(218,60%,85%,.7); --box-4_bg-highlight: hsla(218,64%,61%,.4); --box-4_text-heading: hsla(218,50%,21%,1); --box-4_text-content: hsla(218,50%,21%,.8); --box-4_border-top: hsla(194,70%,47%,.7); --box-4_border-bottom: hsla(194,70%,47%,.7); --box-4-li_bg-base: hsla(0,0%,100%,0.20); /* with shadow-box class */ --box-4-li_bg-hover: hsla(0,0%,100%,0.5); --box-4-li_heading-base: hsla(218,50%,21%,.8); --box-4-li_heading-hover: hsla(218,70%,21%,1); --box-4-li_text-base: hsla(218,50%,21%,.7); --box-4-li_text-hover: hsla(218,50%,21%,1); --bg-light: #fff; --bg-light-1: #EFEFEF; --bg-light-2: #EFEFEF; --bg-light-3: #EFEFEF; --bg-medium: #A8A8A8; --bg-medium-1: #A8A8A8; --bg-medium-2: #A8A8A8; --bg-medium-3: #A8A8A8; --bg-dark: #122949; --bg-dark-1: #122949; --bg-dark-2: #122949; --bg-dark-3: #122949; --bg-caution: #7C0000; --bg-light_hover: #E3E3E3; --bg-medium_hover: rgba(0,64,69,0.10); --bg-dark_hover: rgba(0,64,69,0.10); --box-border-width: 0px; --box-border-radius: 6px; --box-higlight-left: 50%; --box-higlight-top: 200%; /* Random Content */ --wrapper-bg-random-content: hsla(218,65%,86%,.8); --color-random-content-title: hsla(218,54%,35%,.9); --color-random-content-text: hsla(0,0%,75%,0.80); --random-content-text-size-mobile: 1.2rem; --random-content-text-size-large: 1.3rem; /* box text colors */ --box-text-on-white: #333333; --box-text-on-light: #4F4F4F; --box-text-on-medium: #FFFFFF; --box-text-on-dark: #FFFFFF; --box-text-on-caution: #FFFFFF; /* decorations */ --deco-color-light: hsla(0,0%,100%,.5); /* underline */ --deco-color-dark: hsla(0,0%,23%,0.3); --fill-icon-color-1: #DCDCDC; --fill-icon-color-2: #C88200; --fill-icon-color-3: #658B32; --fill-icon-color-4: #82160B; --fill-icon-page-header: hsla(0,0%,100%,0.80); /* SVG superimposed on header background photo on sub-pages */ /* dividers */ /* transparent: fill = --bg-page */ /* triangle */ --triangle-height-large: 40px; --triangle-height-mobile: 40px; --shape-accent-color: #B4B4B4; /* hero bottom shape --> /* bullets */ --bullet-light: hsl(162, 10%, 100%); --bullet-medium: hsl(162, 40%, 40%); --bullet-dark: hsla(200,40%,30%,1); --bullet-warning: hsla(0,100%,33%,1.00); --bullet-sub: hsl(162, 5%, 50%); --bullet-sub-size: .8rem; /* nav cards with SVG */ /* default fill color of icon is the same as button bg color --button-bg-default */ --card-bg: hsla(145,20%,30%,1.00); /* card bg color default */ --card-bg-empasize: #FFF; --card-circle-default: hsla(0,0%,100%,1.00); /* outmost circle outline color. Needs contrast to 'inside circle-default' */ --card-inner-circle-default: hsla(0,0%,50%,1.00); /* inside circle-default */ --card-svg-default: hsla(0,0%,45%,1.00); /* color of SVG */ --card-svg-hover: hsla(0,0%,25%,1.00); /* color of SVG when card is hovered */ --card-bg-hover: hsla(145,40%,20%,1.00); /* circle bg color default + card bg color on hover */ --card-circle-bg-default: #C0C0C0; /* background behind SVG */ --card-circle-bg-hover: #E9E9E9; --card-circle-outline: hsla(0,0%,85%,1.00); --card-circle-outline-hover: #fff; --card-text: hsl(162, 0%, 100%); --card-text-hover: #fff; --card-spacing: 16px; /* if the color scheme for boxes should be different, assign classes to the main anchor tags */ /* Profile Cards */ --profile-card-bg: hsla(102,5%,80%,.5); --profile-card-header: hsla(194,30%,20%,.8); --profile-card-text: hsla(194,30%,20%,.9); --profile-card-icons: hsla(0,0%,100%,1.00); --profile-card-clr-scheme-1: hsla(218,30%,30%,1.00); --profile-card-clr-scheme-2: hsla(158,30%,20%,1.00); --profile-card-clr-scheme-3: hsla(218,80%,36%,1.00); --profile-card-clr-scheme-4: hsla(39,60%,40%,1.00); --profile-card-header-size-small: 1.5rem; --profile-card-header-size-large: 1.4rem; /* Feature Cards - full-width image with text superimposed in insert */ --feature-card-title-color: #ccc; --feature-card-text-color: #ccc; --feature-card-text-bg: hsla(0,0%,0%,0.6); /* outlines */ --border-light: #ccc; --border-dark: #7E7E7E; --border-menu-buttons: #fff; /* includes secondary and tertiary */ --border-gallery-mobile-button: #ffffff; /* Accordions / Drop-Down Buttons / FAQ */ /* Headings only */ --faq-category-text-size-mobile: 1.2rem; /* FAQ only */ --faq-category-text-size-large: 1.3rem; --faq-category-bg-default: hsla(37,80%,94%,1.00); --faq-category-bg-hover: hsla(37,80%,94%,1.00); --faq-category-text: hsla(102,10%,30%,.8); /* p */ --faq-category-text-hover: hsla(102,10%,46%,1); /* Common Accordions */ --accordion-title-radius: 3px; --accordion-title-text: #2D2D2D; /* hover state set by default buttons */ --accordion-title-text-weight: 500; --accordion-title-bg-default: hsla(0,0%,70%,1.00); /* bar default color, also sets the border color of the answer. hover state set by default buttons */ /* hover: controlled by --button-bg-default-hover */ --accordion-title-text-FAQ-emphasize: #fff; /* example resources to make stand out. Also controls FAQ menu when class FAQ-emphasize is added */ --accordion-title-bg-FAQ-emphasize: hsla(37,20%,40%,1.00); --accordion-content-title: hsl(162, 0%, 20%); /* h3 */ --accordion-content-text: hsla(0,0%,20%,1.00); --accordion-content-bg: hsla(0,0%,85%,1.00); --font-size-mobile_accordion: 1.1rem; /* includes list text */ --font-size-mobile_accordion-header: 1.3rem; /* h3 */ --font-size-large_accordion: 1.1rem; --font-size-mobile_accordion-header: 1.3rem; /* h3 */ /* Element fill colors */ --bg-social-bar: #fff; --social-icons: hsla(0,0%,47%,1.00); --bg-logo-bar: hsla(0,0%,100%,0); /* logo background on scroll down. Social icon list uses same bg color */ --bg-testimonials: #ACACAC; --bg-logos: #fff; /* sliding logo carousel */ --bg-videos: hsla(218,54%,21%,1.00); --bg-footer: hsla(145,20%,24%,1.00); /* SVG fill colors: add class to SVG wrapper */ --fill-default: hsla(0,0%,40%,1); /* icons used on pages */ --fill-light: #fff; --fill-medium: hsla(194,40%,67%,.4); --fill-dark: hsla(194,40%,57%,.6); --fill-page-header: hsl(162, 0%, 70%, 0.3); --fill-hours: #ACACAC; /* footer clock */ --fill-announcement: #fff; --fill-footer: #fff; /* --fill-testimonials: --bg-testimonials */ /* --fill-videos: --bg-videos */ /* logo - on scroll down add classes --main-page-shrink-margin-top: -2px; --main-page-shrink-max-width: 200px; --sub-page-shrink-margin-top: -2px; --sub-page-shrink-max-width: 140px; --sub-page-hide-shrink-margin-top: -210px; --sub-page-hide-shrink-max-width: 200px; */ /* Slider */ --slider-text-title: #013d5a; --slider-text-description: #013d5a; --slider-bg-title: hsla(0,0%,100%,.8); --slider-bg-description: hsla(0,0%,100%,.8); --slider-bg-border-width: 0px; --slider-bg-border-color: #fff; /* Menus */ --button-padding-mobile: 14px 15px; /* Secondary */ --button-padding-large: 8px 15px; /* Side navigation */ --nav-edge-font-size-mobile: 1rem; /* side navigation: left and bottom */ --nav-edge-font-size-large: 1.2rem; --nav-edge-font-size_drop-up: 97%; /* make font smaller for buttons originating from drop-up */ --nav-edge-font-weight: 700; --nav-edge-padding-mobile: 16px; /* defines top and bottom */ --nav-edge-padding-large: 10px; --nav-edge-button-radius: 6px; --nav-edge-side-spacing-mobile: 10px; --nav-edge-side-spacing-large: 6px; --nav-edge-bottom-spacing-mobile: 2px; --nav-edge-bottom-spacing-large: 6px; --nav-edge-letter-spacing: 0px; --nav-edge-font-weight: 500; --nav-edge-button-shadow: 2px 2px 4px -1px rgba(0,0,0,0.60); /* includes sticky logo */ /* Form - wrapper and element spacing in custom.css */ --form-max-width: 1200px; --form-description: #5F5F5F; --form-label: hsla(216,27%,20%,1.00) --form-headings-color: hsla(216,27%,20%,1.00); --form-bg-color: hsla(0,0%,70%,1.00); --form-divider-color: hsla(0,0%,37%,.4); --form-label-color: #fff; /* options = color-body-text */ /* Scrollbars */ --scrollbar-color: #909089; --scrollbar-color-hover: #B7B8AE; --scrollwatcher-color-main: hsla(145,30%,32%,1.00); /* horizontal progress bar at top of page that grows when scrolling down */ --scrollwatcher-color-bg: hsla(42,15%,90%,1.00); /* bg color to act as separation */ /* Content padding */ --mobile-maxcol-size-left-padding: 30px; /* how wide content can get on mobile, accounting for width of side buttons */ --mobile-maxcol-size-right-padding: 30px; --large-maxcol-size-left-padding: 20px; /* how wide content can get on large screens */ --large-maxcol-size-right-padding: 20px; /* Video Player */ /* thumb outlines specified in jQuery script: thumbsBorderColorON + thumbsBorderColorOFF */ /* suggested: make all the same - choose complementary bg color: borderColor, thumbsBorderColorOFF, thumbsWrapperBg */ /* Timeline / Process */ --timeline-vertical-bar-color: hsla(37,10%,40%,1); --timeline-dot-color: hsla(37,40%,20%,1); --timeline-dot-outline-color: hsla(37,80%,94%,1.00); --timeline-card-bg-left: hsla(37,25%,50%,.9); --timeline-card-bg-right: hsla(37,35%,30%,.8); /* Tooltips */ --tooltip-text-color: #FFFFFF; --tooltip-bg-color: hsla(0,0%,18%,1.00); /* Cards - image / text side by side or stacked */ --card-bg-color: #555555; --card-text-color: #E1E1E1; --card-border-width: 2px; --card-border-color: hsla(0,0%,100%,.1); --card-image-title-color: #A0A0A0; /* Miscellaneous */ --text-color-tagline: hsl(0,0%,100%); --carousel-width: 900px; --shadow-text: 2px 2px 2px rgba(0,0,0,0.50); /* on text */ --shadow-box: rgba(30, 30, 73, 0.25) 0px 8px 10px -3px, rgba(0, 0, 0, 0.3) 0px 8px 12px -6px; /* on boxes */ --edge-fade-amount: 15px; /* carousel content fading into transparent https://www.youtube.com/watch?v=Ca8L8iqnmdw */ --deco-svg-size-mobile: 80px; /* width/size of decorative SVG icons */ --deco-svg-size-large: 120px; /* link colors: --button-text-hover + --button-text-rev-hover */ --testimonial-shape-height: 120px; /* defines curvatures/slant - SVG shapes */ --card-slant: 20%; --card-slant_margin: 2rem; --card-slant_padding: 2rem; /* scroll tp[ */ --scroll-top-bg: hsla(160,3%,10%,1.00); --scroll-top-arrow: hsla(0,0%,100%,.5); --scroll-top-bg-hover: hsla(160,3%,10%,1.00); --scroll-top-arrow-hover: hsla(0,0%,100%,.8); --transition-all: 0.5s ease-in-out; --transition-side-images: 1s ease-in-out; } /* logo sizes default */ #header_logo-center .main-page img { margin-top: 15px; margin-right: auto; margin-left: auto; max-width: 260px; /*shape-outside: url("images/logos/Traffic-Services.png"); filter: drop-shadow(2px 2px 2px #000);*/ /* hor (+ = right) vert (+ = down) blur spread */ /* adds to the drop shadow of the shape after scroll down */ } #header_logo-center .sub-page img, #header_logo-center .sub-page_hide img { max-width: 250px; margin-top: 10px; } /* on scroll down */ #header_logo-center .shrink-logo { /* padding: 10px 10px 6px 10px; make top padding larger so the logo can be pulled up to hide the drop shadow */ padding: 0; border: 0px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } #header_logo-center .main-page .shrink-logo { margin-top: 8px!important; /* where is stops after scrolling down */ max-width: 130px; } #header_logo-center .sub-page .shrink-logo { /* docked at top */ margin-top: -4px!important; /* where is stops after scrolling down */ max-width: 140px; } #header_logo-center .sub-page_hide .shrink-logo { /* move out of view */ margin-top: -100px!important; /* where is stops after scrolling down */ } /* variables CANNOT be used in media queries so use regular css */ @media (min-width: 660px) { /* logo sizes default */ #header_logo-center .main-page img { margin-top: 10px; max-width: 460px; margin-right: auto; margin-left: auto; } #header_logo-center .sub-page img, #header_logo-center .sub-page_hide img { max-width: 380px; } /* on scroll */ #header_logo-center .main-page .shrink-logo, #header_logo-center .sub-page .shrink-logo { margin-top: 4px!important; /* where is stops after scrolling down. Pull up the amount of drop shadow */ max-width: 220px; } #header_logo-center .sub-page_hide .shrink-logo { /* move out of view */ margin-top: -200px!important; /* where is stops after scrolling down */ } }