@import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Tinos'); :root { /* convenience colors */ --transparent-black: rgba(0 0 0 / 75%); --transparent-orange: rgba(211 105 5 / 30%); --transparent-brown: rgba(38 17 12 / 90%); --custom-yellow: #f8a120; --custom-orange: #D36905; --custom-brown: #2B0F03; /* darken and lighten default values */ --border-darken: 93.5%; --hover-color: 88%; --hover-background: 90%; --hover-border: 88%; /* font family defaults */ --serif-font-family-fallback: "Tinos", "Georgia", "Times New Roman", "Times", "serif"; --sans-serif-font-family-fallback: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; --header-font-family: var(--sans-serif-font-family-fallback); --text-font-family: var(--sans-serif-font-family-fallback); --font-size-base: 14px; /* background color of the entire page */ --body-background: #26110c; --body-font-family: var(--text-font-family); /* user profile bar fixed to the top */ --user-menu-text-color: var(--custom-yellow); --user-menu-background: rgba(43 15 03 / 80%); --user-menu-border: color-mix(in hsl, var(--custom-orange) var(--border-darken), black); /* color-mix(in hsl, var(--user-menu-background) var(--border-darken), black); */ --user-menu-link-color: var(--user-menu-text-color); --user-menu-link-hover-color: color-mix(in hsl, var(--user-menu-text-color) var(--hover-color), black); --user-menu-link-hover-background: transparent; --user-menu-link-active-color: color-mix(in hsl, var(--user-menu-text-color) 80%, black); --user-menu-link-active-background: transparent; --user-menu-link-disabled-color: #777777; --user-menu-link-disabled-background: transparent; --user-menu-brand-color: var(--user-menu-link-color); --user-menu-brand-hover-color: color-mix(in hsl, var(--user-menu-brand-color) var(--hover-color), black); --user-menu-brand-hover-background: transparent; --user-menu-image-border-color: #ff9900; --user-menu-image-border-active-color: #ffff01; --user-menu-image-border-hover-color: #ffcc73; /* color and border around banner, menu bar, breadcrumbs and content */ --body-panel-background: #441f16; --body-panel-border: color-mix(in hsl, var(--body-panel-background) var(--border-darken), black); --body-panel-text-color: var(--custom-yellow); /* not used cause it never happens */ --body-panel-heading-border: #000000; /* not used cause it never happens */ --banner-text-color: var(--custom-brown); --banner-background: #AD3300; /*var(--transparent-black);*/ --banner-border: color-mix(in hsl, var(--banner-background) var(--border-darken), black); --banner-header-color: var(--custom-yellow); /* this is for the site's name if shown */ --banner-header-font-family: var(--header-font-family); --mainmenu-text-color: var(--custom-yellow); --mainmenu-background: var(--custom-orange); --mainmenu-border: color-mix(in hsl, var(--mainmenu-background) var(--border-darken), black); --mainmenu-font-family: var(--header-font-family); --mainmenu-font-size: calc(var(--font-size-base) * 2); --mainmenu-link-color: var(--mainmenu-text-color); --mainmenu-link-hover-color: var(--custom-brown); --mainmenu-link-hover-background: transparent; --mainmenu-link-active-color: var(--mainmenu-link-hover-color); --mainmenu-link-active-background: var(--custom-yellow); --mainmenu-link-disabled-color: color-mix(in hsl, var(--mainmenu-link-hover-color) 80%, black); --mainmenu-link-disabled-background: transparent; /* probly not used? */ --mainmenu-brand-color: var(--mainmenu-link-color); --mainmenu-brand-hover-color: color-mix(in hsl, var(--mainmenu-brand-color) var(--hover-color), black); --mainmenu-brand-hover-background: transparent; --dropdown-font-family: var(--header-font-family); --dropdown-font-size: var(--mainmenu-font-size); --dropdown-background: var(--mainmenu-background); --dropdown-border: var(--mainmenu-border); --dropdown-divider-background: var(--mainmenu-border); --dropdown-link-color: var(--mainmenu-link-color); --dropdown-link-hover-color: var(--mainmenu-link-hover-color); --dropdown-link-hover-background: var(--mainmenu-link-hover-background); --dropdown-link-active-color: var(--mainmenu-link-active-color); --dropdown-link-active-background: var(--mainmenu-link-active-background); --dropdown-link-disabled-color: var(--mainmenu-link-disabled-color); --dropdown-header-font-family: var(--dropdown-font-family); --dropdown-header-font-size: var(--dropdown-font-size); --dropdown-header-color: var(--dropdown-link-color); --xs-banner-text-color: var(--banner-text-color); --xs-banner-background: var(--banner-background); --xs-banner-border: var(--banner-border); --xs-banner-header-color: var(--banner-header-color); --xs-banner-header-font-family: var(--banner-header-font-family); --xs-menu-text-color: var(--mainmenu-text-color); --xs-menu-background: color-mix(in srgb, var(--mainmenu-background) 30%, black); /*var(--mainmenu-background);*/ --xs-menu-header-background: color-mix(in srgb, var(--mainmenu-background) 50%, black); /*var(--mainmenu-background);*/ --xs-menu-border: color-mix(in hsl, var(--xs-menu-background) var(--border-darken), black); /* var(--mainmenu-border); */ --xs-menu-link-color: var(--mainmenu-link-color); --xs-menu-link-hover-color: var(--mainmenu-link-active-color); --xs-menu-link-hover-background: var(--mainmenu-link-active-background); --xs-menu-link-active-color: var(--mainmenu-link-active-color); --xs-menu-link-active-background: var(--mainmenu-link-active-background); --xs-menu-link-disabled-color: var(--mainmenu-link-disabled-color); --xs-menu-link-disabled-background: var(--mainmenu-link-disabled-background); --xs-menu-brand-color: var(--mainmenu-link-color); --xs-menu-brand-border-color: transparent; --xs-menu-brand-hover-color: var(--xs-menu-brand-color); /*var(--mainmenu-link-hover-color);*/ --xs-menu-brand-hover-background: var(--mainmenu-link-hover-background); --xs-menu-toggle-background: color-mix(in srgb, var(--custom-orange) 75%, black); --xs-menu-toggle-hover-background: var(--custom-orange); /*color-mix(in hsl, var(--xs-menu-toggle-background) var(--hover-background), black);*/ --xs-menu-toggle-icon-bar-background: var(--custom-yellow); --xs-menu-toggle-border-color: var(--xs-menu-text-color); --xs-menu-divider-background: var(--dropdown-divider-background); --xs-menu-avatar-border-color: transparent; --breadcrumb-text-color: #D8BA88; /* "current" location, not clickable */ --breadcrumb-background: #AD3300; --breadcrumb-border: color-mix(in hsl, var(--breadcrumb-background) var(--border-darken), black); --breadcrumb-divider: " · "; --breadcrumb-divider-color: var(--breadcrumb-text-color); --breadcrumb-link-color: var(--custom-yellow); /* "parent" paths, clickable */ --breadcrumb-link-hover-color: var(--custom-red); --main-content-text-color: #D8BA88; --main-content-background: color-mix(in hsl, #441f16 90%, white); --main-content-border: color-mix(in hsl, #441f16 var(--border-darken), white); --main-content-header-color: #EF9100; --main-content-header-font-family: var(--header-font-family); --main-content-header-font-size-base: var(--font-size-base); --main-content-header-hover-color: var(--main-content-header-color); --main-content-header-hover-background: transparent; --main-content-divider-color: #D36905; --main-content-link-color: #D36905; --main-content-link-hover-color: color-mix(in hsl, var(--main-content-link-color) var(--hover-color), black); /* 85% */ --main-content-link-hover-background: transparent; --main-content-muted-color: #99492E; /*color-mix(in hsl, #000000 53.3%, white);*/ --main-content-muted-link-color: var(--main-content-muted-color); --main-content-muted-link-hover-color: var(--main-content-muted-link-color); --main-content-muted-link-hover-background: transparent; --main-content-icon-link-color: var(--main-content-link-color); --main-content-icon-link-hover-color: var(--main-content-link-hover-color); --main-content-icon-link-hover-background: transparent; --main-content-panel-heading-color: var(--main-content-header-color); --main-content-panel-heading-background: var(--main-content-background); --main-content-panel-heading-border: var(--main-content-border); --main-content-panel-body-border: var(--main-content-border); --main-content-article-image-border: var(--main-content-border); --btn-default-color: var(--custom-yellow); --btn-default-bg: var(--custom-orange); --btn-default-border: var(--custom-yellow); --btn-default-hover-color: var(--btn-default-color); --btn-default-hover-bg: color-mix(in hsl, var(--btn-default-bg) var(--hover-background), black); --btn-default-hover-border: color-mix(in hsl, var(--btn-default-border) var(--hover-border), black); /* large button displayable across entire content, only visible in xs (mobile) */ --btn-hero-color: var(--custom-yellow); --btn-hero-bg: var(--xs-menu-toggle-background); --btn-hero-border-color: var(--xs-menu-toggle-icon-bar-background); --btn-hero-hover-color: var(--btn-hero-color); --btn-hero-hover-bg: color-mix(in hsl, var(--btn-hero-bg) var(--hover-background), black); --btn-hero-hover-border-color: color-mix(in hsl, var(--btn-hero-border-color) var(--hover-border), black); --input-color: var(--custom-yellow); --input-background: var(--custom-brown); /*var(--mainmenu-link-active-background);*/ --input-border: var(--custom-yellow); --input-group-addon-background: var(--input-background); --input-group-addon-border-color: var(--input-border); --label-color: var(--input-color); --login-background: var(--main-content-background); --menu-card-border-color: var(--main-content-link-color); --menu-card-border-hover-color: var(--main-content-link-hover-color); --table-background: var(--body-background); --table-background-accent: color-mix(in hsl, var(--table-background) 88%, white); --table-caption-color: var(--main-content-text-color); --table-caption-background: transparent; --table-head-color: var(--main-content-text-color); --table-head-background: var(--transparent-red); /* transparent; */ --table-border-color: #D36905; /* @btn-default-border; */ --table-hover-background: color-mix(in hsl, var(--table-background-accent) 88%, white); /* not currently used */ --pager-background: #593906; --pager-border: color-mix(in hsl, var(--input-background) 95%, black); --pager-link-color: #BE9A54; --pager-link-hover-color: color-mix(in hsl, var(--pager-link-color) var(--hover-color), black); --pager-link-hover-background: #593906; --pager-link-hover-border: #BE9A54; --pager-link-disabled-color: color-mix(in hsl, var(--pager-link-color) 80%, white); --sidebar-left-color: var(--main-content-text-color); --sidebar-left-background: var(--main-content-background); --sidebar-left-border: var(--main-content-border); --sidebar-left-header-color: var(--main-content-header-color); --sidebar-left-header-font-family: var(--header-font-family); --sidebar-left-header-font-size-base: calc(var(--font-size-base) * 2); --sidebar-left-divider-color: var(--main-content-divider-color); --sidebar-left-link-color: var(--main-content-link-color); --sidebar-left-link-hover-color: var(--main-content-link-hover-color); --sidebar-left-link-hover-background: var(--main-content-link-hover-background); --sidebar-left-navbar-link-color: var(--sidebar-left-link-color); --sidebar-left-navbar-link-hover-color: var(--sidebar-left-link-hover-color); --sidebar-left-navbar-link-hover-background: var(--sidebar-left-link-hover-background); --sidebar-left-navbar-link-active-color: var(--mainmenu-link-active-color); --sidebar-left-navbar-link-active-background: var(--mainmenu-link-active-background); --sidebar-left-navbar-link-disabled-color: var(--mainmenu-link-disabled-color); --sidebar-left-navbar-link-disabled-background: var(--mainmenu-link-disabled-background); --sidebar-right-color: var(--main-content-text-color); --sidebar-right-background: var(--main-content-background); --sidebar-right-border: var(--main-content-border); --sidebar-right-header-color: var(--main-content-header-color); --sidebar-right-header-font: var(--header-font-family); --sidebar-right-header-font-size-base: calc(var(--font-size-base) * 2); --sidebar-right-divider-color: var(--main-content-divider-color); --sidebar-right-link-color: var(--main-content-link-color); --sidebar-right-link-hover-color: var(--main-content-link-hover-color); --sidebar-right-link-hover-background: var(--main-content-link-hover-background); --sidebar-right-navbar-link-color: var(--sidebar-right-link-color); --sidebar-right-navbar-link-hover-color: var(--sidebar-right-link-hover-color); --sidebar-right-navbar-link-hover-background: var(--sidebar-right-link-hover-background); --sidebar-right-navbar-link-active-color: var(--mainmenu-link-active-color); --sidebar-right-navbar-link-active-background: var(--mainmenu-link-active-background); --sidebar-right-navbar-link-disabled-color: var(--mainmenu-link-disabled-color); --sidebar-right-navbar-link-disabled-background: var(--mainmenu-link-disabled-background); --footer-outer-background: transparent; --footer-outer-border: transparent; --footer-inner-background: var(--transparent-black); /* transparent; */ --footer-inner-border: var(--transparent-grey); /* transaparent; */ --footer-text-color: var(--custom-yellow); /* var(--main-content-text-color); */ --footer-link-color: var(--custom-orange); /* var(--main-content-link-color); */ --footer-link-hover-color: var(--custom-orange); /* color-mix(in hsl, var(--mainmenu-link-color) var(--hover-color), black);*/ --footer-link-hover-background: var(--transparent-orange); /* var(--footer-link-background); */ --footer-header-color: var(--main-content-header-color); --social-badges-color: var(--custom-yellow); --social-badges-background: transparent; --social-badges-hover-color: var(--custom-yellow); --social-badges-hover-background: var(--transparent-brown); --footer-back-top-text-color: var(--footer-text-color); --footer-back-top-background: var(--footer-outer-background); --footer-back-top-link-color: var(--footer-link-color); --footer-back-top-link-hover-color: var(--footer-link-hover-color); --footer-back-top-link-hover-background: var(--footer-link-hover-background); --footer-thumbnail-caption-color: var(--footer-link-color); --footer-thumbnail-background: var(--main-content-background); --footer-thumbnail-border: color-mix(in hsl, var(--footer-thumbnail-background) var(--border-darken), black); --footer-xs-outer-background: var(--footer-outer-background); --footer-xs-outer-border: var(--footer-outer-border); --footer-xs-inner-background: var(--footer-inner-background); --footer-xs-inner-border: var(--footer-inner-border); --footer-xs-text-color: var(--footer-text-color); --footer-xs-link-color: var(--footer-link-color); --footer-xs-link-hover-color: var(--footer-link-hover-color); --footer-xs-link-hover-background: var(--footer-link-hover-background); --footer-xs-header-color: var(--footer-header-color); --footer-xs-back-top-color: var(--footer-xs-text-color); --footer-xs-back-top-background: var(--footer-xs-outer-background); --footer-xs-back-top-link-color: var(--footer-xs-link-color); --footer-xs-back-top-link-hover-color: var(--footer-xs-link-hover-color); --footer-xs-back-top-link-hover-background: var(--footer-xs-link-hover-background); --footer-xs-thumbnail-border: var(--footer-thumbnail-border); --footer-xs-thumbnail-caption-color: var(--footer-thumbnail-caption-color); --footer-xs-thumbnail-background: var(--footer-thumbnail-background); --debug-caption-color: var(--footer-header-color); }