/* * <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * * Script: HancockHistory-variables-root.scss * * Author: James A. Wilson * * Purpose: This modles uses a maxin to build the base color associated with * the named county/entity. * * Input: Enter the county/entity name in the @include maxin call to build * the base color and root variables for the site. * * Output: The hsl hue, sat, and lit values of the color for the county/entity. * Additionally, the root variables are include in the maxin code. * * <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */ :root { --base-color-hue: 108; --base-color-sat: 42%; --base-color-lit: 25%; } :root { --base-color: hsl(var(--base-color-hue), var(--base-color-sat), var(--base-color-lit)); --base-color-05: hsl(var(--base-color-hue), var(--base-color-sat), 05%); --base-color-10: hsl(var(--base-color-hue), var(--base-color-sat), 10%); --base-color-15: hsl(var(--base-color-hue), var(--base-color-sat), 15%); --base-color-20: hsl(var(--base-color-hue), var(--base-color-sat), 20%); --base-color-25: hsl(var(--base-color-hue), var(--base-color-sat), 25%); --base-color-30: hsl(var(--base-color-hue), var(--base-color-sat), 30%); --base-color-35: hsl(var(--base-color-hue), var(--base-color-sat), 35%); --base-color-40: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --base-color-45: hsl(var(--base-color-hue), var(--base-color-sat), 45%); --base-color-50: hsl(var(--base-color-hue), var(--base-color-sat), 50%); --base-color-55: hsl(var(--base-color-hue), var(--base-color-sat), 55%); --base-color-60: hsl(var(--base-color-hue), var(--base-color-sat), 60%); --base-color-65: hsl(var(--base-color-hue), var(--base-color-sat), 65%); --base-color-70: hsl(var(--base-color-hue), var(--base-color-sat), 70%); --base-color-75: hsl(var(--base-color-hue), var(--base-color-sat), 75%); --base-color-80: hsl(var(--base-color-hue), var(--base-color-sat), 80%); --base-color-85: hsl(var(--base-color-hue), var(--base-color-sat), 85%); --base-color-90: hsl(var(--base-color-hue), var(--base-color-sat), 90%); --base-color-95: hsl(var(--base-color-hue), var(--base-color-sat), 95%); --body-color-background: var(--base-color-95); --body-color-text: ar(--base-black); --base-white: White; --base-black: Black; --accent-red: #880000; --accent-green: #009900; --accent-blue: #000099; --accent-gray: #f1f1f1; --brand-primary: var(--base-color); --brand-accent: var(--accent-red); --brand-success: hsl(120, 39%, 54%); --brand-info: hsl(194, 66%, 61%); --brand-warning: hsl(059, 84%, 62%); --brand-danger: hsl(002, 64%, 58%); --brand-lite: hsl(var(--base-color-hue), var(--base-color-sat), 75%); --brand-dark: var(--base-color); --gray-darker: #9a9a9a; --gray-dark: #bbbbbb; --gray: #cccccc; --gray-light: #dddddd; --gray-lighter: #eaeaea; --box-shadow-style: 5px 5px 5px 0px #000000; --box-shadow-bg-png: url(../images/mis_images/paper_texture.png) repeat; --box-shadow-bg-gif: url(../images/mis_images/newspaper_bg.gif) repeat; --box-shadow-bg-mem: url(../images/mis_images/bg_hf_pattern.jpg) repeat; --box-shadow-bg-color: #b1ed9e; --search-bg-color: hsl(029, 100%, 75%); --link-color: hsl(var(--base-color-hue), var(--base-color-sat), 10%); --link-hover-color: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --link-hover-decoration: underline; --font-family-serif: "Roboto Serif", serif; --font-family-sans-serif: "Roboto", sans-serif; --font-family-table: var(--font-family-sans-serif); --font-family-monospace: "Roboto Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace; --font-family-base: var(--font-family-sans-serif); --font-family-menu: var(--font-family-sans-serif); --font-family-caption: var(--font-family-serif); --font-family-dropcap: "Brush Script MT", var(--font-serif); --font-family-memorial: "Brush Script MT", var(--font-family-sans-serif); --font-family-footer: var(--font-family-sans-serif); --font-size-base: 15px; --font-size-scale: 1.618; --font-size-default: 1rem; --font-size-whisper: 12px; --font-size-xl: 20px; --font-size-lg: 18px; --font-size-md: 16px; --font-size-sm: 14px; --font-size-xs: 12px; --font-size-h1: 36px; --font-size-h2: 30px; --font-size-h3: 24px; --font-size-h4: 21px; --font-size-h5: 18px; --font-size-table: var(--font-size-sm); --font-size-caption: calc(var(--font-size-base) - 3px); --photo-bg-color: var(--base-white); --photo-border-color-top: var(--base-color-60); --photo-border-color-left: var(--base-color-60); --photo-border-color-right: var(--base-color-40); --photo-border-color-bottom: var(--base-color-40); --photo-padding: 3px; --image-padding: 3px; --image-bg-color: var(--base-white); --image-border-default: 3px solid var(--brand-dark); --paper-bg-color: #FAEFD8; --paper-bg-pattern: url(../images/mis_images/paper_texture.png); --paper-border-default: 3px solid var(--brand-dark); --navbar-height: 48px; --navbar-width: 230px; --navbar-margin-bottom: var(--line-height-computed); --navbar-border-radius: var(--border-radius-base); --navbar-padding-horizontal: calc(var(--grid-gutter-width) / 2); --navbar-padding-vertical: calc((var(--navbar-height) - var(--line-height-computed)) / 2); --navbar-collapse-max-height: 340px; --navbar-default-color-base: var(--base-color); --navbar-default-color-bg: var(--navbar-default-color-base); --navbar-default-color-text: var(--base-white); --navbar-default-color-border: var(--navbar-default-color-bg); --navbar-default-link-color: #777; --navbar-default-link-hover-color: #333; --navbar-default-link-hover-bg: transparent; --navbar-default-link-active-color: #555; --navbar-default-link-active-bg: calc(var(--navbar-default-color-bg) * 6.5%); --navbar-default-link-disabled-color: #ccc; --navbar-default-link-disabled-bg: transparent; --navbar-default-brand-color: var(--navbar-default-link-color); --navbar-default-brand-hover-color: calc(var(--navbar-default-brand-color) * 10%); --navbar-default-brand-hover-bg: transparent; --navbar-default-toggle-hover-bg: #ddd; --navbar-default-toggle-icon-bar-bg: #888; --navbar-default-toggle-border-color: #ddd; --navbar-inverse-color: calc(var(--gray-light) * 15%); --navbar-inverse-bg: #222; --navbar-inverse-border: calc(var(--navbar-inverse-bg) * 10%); --navbar-inverse-link-color: calc(var(--gray-light) * 15%); --navbar-inverse-link-hover-color: var(--base-white); --navbar-inverse-link-hover-bg: transparent; --navbar-inverse-link-active-color: var(--navbar-inverse-link-hover-color); --navbar-inverse-link-active-bg: calc(var(--navbar-inverse-bg) * 10%); --navbar-inverse-link-disabled-color: #444; --navbar-inverse-link-disabled-bg: transparent; --navbar-inverse-brand-color: var(--navbar-inverse-link-color); --navbar-inverse-brand-hover-color: var(--base-white); --navbar-inverse-brand-hover-bg: transparent; --navbar-inverse-toggle-hover-bg: #333; --navbar-inverse-toggle-icon-bar-bg: var(--base-white); --navbar-inverse-toggle-border-color: #333; --nav-link-padding: 10px 15px; --nav-link-hover-bg: var(--gray-lighter); --nav-disabled-link-color: var(--gray-light); --nav-disabled-link-hover-color: var(--gray-light); --nav-tabs-border-color: #ddd; --nav-tabs-link-hover-border-color: var(--gray-lighter); --nav-tabs-active-link-hover-bg: var(--body-bg); --nav-tabs-active-link-hover-color: var(--gray); --nav-tabs-active-link-hover-border-color: #ddd; --nav-tabs-justified-link-border-color: #ddd; --nav-tabs-justified-active-link-border-color: var(--body-bg); --line-height-base: 1.428571429; --line-height-computed: calc(var(--font-size-base) * var(--line-height-base)); --well-height: 270px; --marker-width: 500px; --spacer-height: 1rem; --min-screen-size: 400; --max-screen-size: 800; --min-font-size: 16; --max-font-size: 24; --footer-height: 100px; --list-group-bg: var(--base-white); --list-group-border: #ddd; --list-group-border-radius: var(--border-radius-base); --list-group-hover-bg: #f5f5f5; --list-group-active-color: var(--component-active-color); --list-group-active-bg: var(--component-active-bg); --list-group-active-border: var(--list-group-active-bg); --list-group-active-body-color-text: calc(var(--list-group-active-bg) * 40%); --list-group-disabled-color: var(--gray-light); --list-group-disabled-bg: var(--gray-lighter); --list-group-disabled-body-color-text: var(--list-group-disabled-color); --list-group-link-color: #555; --list-group-link-hover-color: var(--list-group-link-color); --list-group-link-heading-color: #333; --padding-base-vertical: 6px; --padding-base-horizontal: 12px; --padding-lg-vertical: 10px; --padding-lg-horizontal: 16px; --padding-sm-vertical: 5px; --padding-sm-horizontal: 10px; --padding-xs-vertical: 1px; --padding-xs-horizontal: 5px; --line-height-lg: 1.3333333; --line-height-sm: 1.5; --border-radius-base: 4px; --border-radius-lg: 6px; --border-radius-sm: 3px; --border-color: var(--brand-dark); --border-style-1: 1px solid var(--border-color); --border-style-2: 2px solid var(--border-color); --border-style-3: 3px solid var(--border-color); --border-style-4: 4px solid var(--border-color); --border-style-5: 5px solid var(--border-color); --component-active-color: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --component-active-bg: var(--brand-primary); --caret-width-base: 4px; --caret-width-lg: 5px; --map-border-color: #020202; --map-border-weight: 2px; --map-color-this-state: Red; --map-color-same-state: Green; --map-color-next-state: Yellow; --map-color-town-name: var(--dark-grayj); --dropdown-bg: var(--base-white); --dropdown-border: hsl(0, 0%, 50%); --dropdown-fallback-border: #ccc; --dropdown-divider-bg: #e5e5e5; --dropdown-link-color: var(--gray-dark); --dropdown-link-hover-color: brightness(var(--gray-dark), 5%); --dropdown-link-hover-bg: #f5f5f5; --dropdown-link-active-color: var(--component-active-color); --dropdown-link-active-bg: var(--component-active-bg); --dropdown-link-disabled-color: var(--gray-light); --dropdown-header-color: -var(--gray-light); --dropdown-caret-color: var(--base-black); --zindex-navbar: 1000; --zindex-dropdown: 1000; --zindex-popover: 1060; --zindex-tooltip: 1070; --zindex-navbar-fixed: 1030; --zindex-modal-bg: 1040; --zindex-modal: 1050; --grid-columns: 12; --grid-gutter-width: 30px; --grid-float-breakpoint: var(--screen-sm-min); --grid-float-breakpoint-max: calc((var(--grid-float-breakpoint) - 1px)); --container-tablet: calc((720px + var(--grid-gutter-width))); --container-sm: var(--container-tablet); --container-desktop: calc((940px + var(--grid-gutter-width))); --container-md: var(--container-desktop); --container-lg-desktop: calc((1140px + var(--grid-gutter-width))); --container-lg: var(--container-lg-desktop); --pagination-color: var(--link-color); --pagination-bg: var(--base-white); --pagination-border: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --pagination-hover-color: var(--link-hover-color); --pagination-hover-bg: var(--gray-lighter); --pagination-hover-border: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --pagination-active-color: var(--base-white); --pagination-active-bg: var(--brand-primary); --pagination-active-border: var(--brand-primary); --pagination-disabled-color: var(--gray-light); --pagination-disabled-bg: var(--base-white); --pagination-disabled-border: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --pager-bg-color: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --pager-border-style: 1px solid var(--pager-bg-color); --pager-border-radius: 5px; --pager-hover-bg: var(--accent-red); --pager-active-bg: var(--pager-bg-color); --pager-active-color: var(--base-white); --pager-disabled-bg: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --pager-disabled-color: var(--gray-dark); --state-success-text: #3c763d; --state-success-bg: #dff0d8; --state-success-border: brightness(spin(var(--state-success-bg), -10), -5%); --state-info-text: #31708f; --state-info-bg: #d9edf7; --state-info-border: brightness(spin(var(--state-info-bg), -10), -7%); --state-warning-text: #8a6d3b; --state-warning-bg: #fcf8e3; --state-warning-border: brightness(spin(var(--state-warning-bg), -10), -5%); --state-danger-text: #a94442; --state-danger-bg: #f2dede; --state-danger-border: brightness(spin(var(--state-danger-bg), -10), -5%); --tooltip-max-width: 200px; --tooltip-color: var(--base-white); --tooltip-bg: var(--base-black); --tooltip-opacity: 0.9; --tooltip-arrow-width: 5px; --tooltip-arrow-color: var(--tooltip-bg); --popover-bg: var(--base-white); --popover-max-width: 276px; --popover-border-color: hsl(0, 0%, 20%); --popover-fallback-border-color: #ccc; --popover-title-bg: calc(var(--popover-bg) * 3%); --popover-arrow-width: 10px; --popover-arrow-color: var(--popover-bg); --popover-arrow-outer-width: (var(--popover-arrow-width) + 1); --popover-arrow-outer-color: fadein(var(--popover-border-color), 5%); --popover-arrow-outer-fallback-color: calc(var(--popover-fallback-border-color) * 20%); --modal-inner-padding: 15px; --modal-banner-background: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --modal-banner-body-color-text: var(--base-white); --modal-title-padding: 15px; --modal-title-line-height: var(--line-height-base); --modal-content-bg: var(--base-white); --modal-content-border-color: hsl(0, 0%, 20%); --modal-content-fallback-border-color: #999; --modal-backdrop-bg: var(--base-black); --modal-backdrop-opacity: .5; --modal-header-border-color: #e5e5e5; --modal-footer-border-color: var(--modal-header-border-color); --modal-width-sm: 400px; --modal-width-md: 600px; --modal-width-lg: 900px; --alert-padding: 15px; --alert-border-radius: var(--border-radius-base); --alert-link-font-weight: bold; --alert-success-bg: var(--state-success-bg); --alert-success-text: var(--state-success-text); --alert-success-border: var(--state-success-border); --alert-info-bg: var(--state-info-bg); --alert-info-text: var(--state-info-text); --alert-info-border: var(--state-info-border); --alert-warning-bg: var(--state-warning-bg); --alert-warning-text: var(--state-warning-text); --alert-warning-border: var(--state-warning-border); --alert-danger-bg: var(--state-danger-bg); --alert-danger-text: var(--state-danger-text); --alert-danger-border: var(--state-danger-border); --progress-bg: #f5f5f5; --progress-bar-color: var(--base-white); --progress-border-radius: var(--border-radius-base); --progress-bar-bg: var(--brand-primary); --progress-bar-success-bg: var(--brand-success); --progress-bar-warning-bg: var(--brand-warning); --progress-bar-danger-bg: var(--brand-danger); --progress-bar-info-bg: var(--brand-info); --panel-bg: var(--base-white); --panel-body-padding: 15px; --panel-heading-padding: 10px 15px; --panel-footer-padding: var(--panel-heading-padding); --panel-border-radius: var(--border-radius-base); --panel-inner-border: #ddd; --panel-footer-bg: #cccccc; --panel-default-text: var(--gray-dark); --panel-default-border: #ddd; --panel-default-heading-bg: #f5f5f5; --panel-primary-text: var(--base-white); --panel-primary-border: var(--brand-primary); --panel-primary-heading-bg: var(--brand-primary); --panel-success-text: var(--state-success-text); --panel-success-border: var(--state-success-border); --panel-success-heading-bg: var(--state-success-bg); --panel-info-text: var(--state-info-text); --panel-info-border: var(--state-info-border); --panel-info-heading-bg: var(--state-info-bg); --panel-warning-text: var(--state-warning-text); --panel-warning-border: var(--state-warning-border); --panel-warning-heading-bg: var(--state-warning-bg); --panel-danger-text: var(--state-danger-text); --panel-danger-border: var(--state-danger-border); --panel-danger-heading-bg: var(--state-danger-bg); --panel-button: calc(var(--base-color) * 25%); --panel-tplt: calc(var(--base-color) * 05%); --panel-rtbm: calc(var(--base-color) * 30%); --thumbnail-padding: 4px; --thumbnail-bg: var(--body-color-background); --thumbnail-border: #ddd; --thumbnail-border-radius: var(--border-radius-base); --thumbnail-caption-color: var(--body-color-text); --thumbnail-caption-padding: 9px; --well-bg: #f5f5f5; --well-border: calc(var(--well-bg) * 7%); --badge-color: var(--base-white); --badge-link-hover-color: var(--base-white); --badge-bg: var(--gray-light); --badge-active-color: var(--link-color); --badge-active-bg: var(--base-white); --badge-font-weight: bold; --badge-line-height: 1; --badge-border-radius: 10px; --breadcrumb-padding-vertical: 8px; --breadcrumb-padding-horizontal: 15px; --breadcrumb-bg: #f5f5f5; --breadcrumb-color: #ccc; --breadcrumb-active-color: var(--gray-light); --breadcrumb-separator: "/"; --carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); --carousel-control-color: var(--base-white); --carousel-control-width: 15%; --carousel-control-opacity: .5; --carousel-control-font-size: 20px; --carousel-indicator-active-bg: var(--base-white); --carousel-indicator-border-color: var(--base-white); --carousel-caption-color: var(--base-white); --close-font-weight: bold; --close-color: var(--base-black); --close-text-shadow: 0 1px 0 var(--base-white); --code-color: #c7254e; --code-bg: #f9f2f4; --kbd-color: var(--base-white); --kbd-bg: #333; --pre-bg: #f5f5f5; --pre-color: var(--gray-dark); --pre-border-color: #ccc; --pre-scrollable-max-height: 340px; --component-offset-horizontal: 180px; --text-muted: var(--gray-light); --abbr-border-color: var(--gray-light); --headings-sm-color: var(--gray-light); --blockquote-sm-color: var(--gray-light); --blockquote-font-size: (var(--font-size-base) * 1.25); --blockquote-border-color: var(--gray-lighter); --dl-horizontal-offset: var(--component-offset-horizontal); --dl-horizontal-breakpoint: var(--grid-float-breakpoint); --hr-border: var(--gray-lighter); --btn-color-primary: var(--base-color); --btn-active: hsl(var(--base-color-hue), var(--base-color-sat), 90%); --btn-border: hsl(var(--base-color-hue), var(--base-color-sat), 50%); --btn-current: hsl(var(--base-color-hue), var(--base-color-sat), 50%); --btn-disabled: hsl(var(--base-color-hue), var(--base-color-sat), 90%); --btn-empty: hsl(var(--base-color-hue), var(--base-color-sat), 70%); --btn-focus: hsl(var(--base-color-hue), var(--base-color-sat), 40%); --btn-paginate: var(--ltr-empty); --btn-text: hsl(var(--base-color-hue), var(--base-color-sat), 00%); --btn-border-style: 1px solid var(--btn-border); --btn-font-weight: normal; --btn-default-color: var(--base-white); --btn-default-bg: var(--brand-accent); --btn-default-border: var(--btn-default-bg); --btn-primary-color: var(--base-white); --btn-primary-bg: hsl(var(--base-color-hue), var(--base-color-sat), 35%); --btn-primary-border: var(--btn-primary-bg); --btn-success-color: var(--base-white); --btn-success-bg: var(--brand-success); --btn-success-border: var(--btn-success-bg); --btn-info-color: var(--base-white); --btn-info-bg: var(--brand-info); --btn-info-border: var(--btn-info-bg); --btn-warning-color: var(--base-white); --btn-warning-bg: var(--brand-warning); --btn-warning-border: var(--btn-warning-bg); --btn-danger-color: var(--base-white); --btn-danger-bg: var(--brand-danger); --btn-danger-border: var(--btn-danger-bg); --btn-link-disabled-color: var(--gray-light); --btn-border-radius-base: var(--border-radius-base); --btn-border-radius-lg: var(--border-radius-lg); --btn-border-radius-sm: var(--border-radius-sm); --ltr-active: var(--brand-dark); --ltr-empty: var(--brand-lite); --header-color: inherit; --header-height: 142px; --header-line-height: 1.1; --header-font-family: var(--font-family-serif); --header-font-weight: 700; --label-default-bg: var(--gray-light); --label-primary-bg: var(--brand-primary); --label-success-bg: var(--brand-success); --label-info-bg: var(--brand-info); --label-warning-bg: var(--brand-warning); --label-danger-bg: var(--brand-danger); --label-color: var(--base-white); --label-link-hover-color: var(--base-white); --input-bg: var(--base-white); --input-bg-disabled: var(--gray-lighter); --input-bg-color: var(--base-white); --input-bg-color-hover: hsl(var(--base-color-hue), var(--base-color-sat), 90%); --input-bg-color-focus: hsl(var(--base-color-hue), var(--base-color-sat), 95%); --input-bg-color-active: hsl(var(--base-color-hue), var(--base-color-sat), 95%); --input-bg-color-placeholder: var(--accent-red); --input-border-style-1: 1px solid hsl(var(--base-color-hue), var(--base-color-sat), 40%); --input-border-style-2: 2px solid hsl(var(--base-color-hue), var(--base-color-sat), 40%); --input-border-radius: var(--border-radius-base); --input-border-radius-lg: var(--border-radius-lg); --input-border-radius-sm: var(--border-radius-sm); --input-border-focus: var(--brand-dark); --input-height: 24px; --input-height-base: (var(--line-height-computed) + (var(--padding-base-vertical) * 2) + 2); --input-height-lg: (ceil(var(--font-size-lg) * var(--line-height-lg) + (var(--padding-lg-vertical)) * 2) + 2); --input-height-sm: (floor(var(--font-size-sm) * var(--line-height-sm) + (var(--padding-sm-vertical)) * 2) + 2); --form-background-color: var(--base-color-90); --form-group-margin-bottom: 15px; --legend-color: var(--gray-dark); --legend-border-color: #e5e5e5; --input-group-addon-bg: var(--gray-lighter); --input-group-addon-border-color: var(--input-border); --input-cursor-disabled: not-allowed; --nav-pills-border-radius: var(--border-radius-base); --nav-pills-active-link-hover-bg: var(--component-active-bg); --nav-pills-active-link-hover-color: var(--component-active-color); --table-width: 50%; --table-line-height: 28px; --table-font-size: 13px; --table-rollover: var(--base-color-60); --table-rollodd: var(--table-rollover); --table-rolleven: var(--table-rollover); --table-head-bg: var(--base-color-40); --table-button: var(--base-color-40); --table-rowodd: var(--base-color-90); --table-roweven: var(--base-color-70); --table-sortodd: hsla(var(--base-color-hue), var(--base-color-sat), 40%, 0.1); --table-sorteven: hsla(var(--base-color-hue), var(--base-color-sat), 40%, 0.1); --table-cell-padding: 8px; --table-condensed-cell-padding: 5px; --table-bg: transparent; --table-bg-accent: #f9f9f9; --table-bg-hover: #f5f5f5; --table-bg-active: var(--table-bg-hover); --table-border-color: #ddd; --table-row-selected: brightness(var(--brand-dark), 30%); --tab-default-body-color: var(--base-color-80); --tab-default-text-color: var(--brand-dark); --tab-default-border-color: var(--brand-dark); --tab-active-body-color: var(--form-background-color); --tab-active-text-color: var(--brand-dark); --tab-active-border-color: var(--brand-dark); --tab-hover-body-color: var(--accent-red); --tab-hover-text-color: var(--base-white); --tab-hover-border-color: var(--accent-red); --tab-border-top: #464336; --tab-border_bottom: #efede7; --tab-color-background: #d6d3c2; }