:root { --pfl-color: #188d1c; --bg-pfl-color: #59af5c; --pfl-primary-bg-subtle: #cbf7cd; --pfl-primary-text: var(--bg-pfl-color); --pfl-primary-border-subtle: #6db770; --bs-nav-tabs-link-active-color: var(--bs-dropdown-link-color); --bs-heading-color: #000; --pfl-logo: url('/static/light.png'); --pfl-home-background: url('/static/home/home-light.webp'); } :root[data-bs-theme='dark'] { --pfl-primary-bg-subtle: #183119; --pfl-primary-text: #5aac5d; --pfl-primary-border-subtle: var(--pfl-color); --bs-heading-color: #fff; --pfl-logo: url('/static/dark.png'); --pfl-home-background: url('/static/home/home-dark.webp'); } .btn-pfl { --bs-btn-color: #fff; --bs-btn-bg: var(--pfl-color); --bs-btn-border-color: var(--pfl-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #117314; --bs-btn-hover-border-color: var(--pfl-color); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--pfl-color); --bs-btn-active-border-color: #0a53be; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--pfl-color); --bs-btn-disabled-border-color: var(--pfl-color); } .bg-pfl { --bs-bg-opacity: 1; background-color: var(--pfl-color) !important; } .text-bg-pfl { color: #fff; --bs-bg-opacity: 1; background-color: var(--pfl-color) !important; } .alert-pfl { --bs-alert-color: var(--pfl-primary-text); --bs-alert-bg: var(--pfl-primary-bg-subtle); --bs-alert-border-color: var(--pfl-primary-border-subtle); --bs-alert-link-color: var(--pfl-primary-text); } a { color: var(--pfl-primary-text); text-decoration: none; } .nav-tabs .nav-link { color: var(--pfl-primary-text) } .pfl-logo { height: 2rem; width: 2rem; background-image: var(--pfl-logo); background-size: contain; } .home-background { background-image: var(--pfl-home-background); background-size: cover; background-position: center; } .home-opaque { background-color: rgba(var(--bs-tertiary-bg-rgb), 0.75) !important; } .dropdown-menu { --bs-dropdown-link-active-bg: var(--pfl-color) } .offer-img { object-fit: cover; object-position: center; width: 100%; height: 25rem !important; } .pfl-home-logo { max-width: 20rem; min-height: 15rem; background: var(--pfl-logo); background-repeat: no-repeat; background-position: center; background-size: contain; }