@font-face { font-family: "MarkOT"; src: url("../fonts/MarkOT.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "MarkOT"; src: url("../fonts/MarkOT-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "MarkOT"; src: url("../fonts/MarkOT-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } :root { --bs-font-sans-serif: "MarkOT", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-primary: #169eb0; --bs-primary-rgb: 22, 158, 176; --bs-success: #169eb0; --bs-success-rgb: 22, 158, 176; --bs-link-color: #083a59; --bs-link-color-rgb: 8, 58, 89; --bs-link-hover-color: #169eb0; --bs-body-color: #45505d; --eodc-focus: #169eb0; /* * Served straight from the eodc.eu WordPress uploads - the same hero the * eodc.eu landing page uses. It is close to square (2554x2560), so `cover` * on a wide viewport crops it top and bottom and shows the middle band; * that is the pink-to-teal transition, which is the intended framing. */ --eodc-hero: url("https://eodc.eu/wp-content/uploads/2024/12/usgs-hoS3dzgpHzw-unsplash_ty-scaled.jpg"); --eodc-logo: url("https://eodc.eu/wp-content/uploads/2024/12/eodc_Logo_earth_white_400x400_rgb.png"); --eodc-cta: #8b6c32; /* * eodc.eu's CTA hover shifts gold text to white with a light-blue outline. * White works on the dark hero but would vanish on the light-mode wash, so * light mode shifts to the brand teal instead - same "gold to blue" move, * still legible. */ --eodc-cta-hover: #0e7c94; --eodc-cta-hover-border: #169eb0; } /* * Every token this block shares with :root above must be re-declared here. * custom.css loads after style.min.css and :root ties [data-bs-theme=dark] on * specificity, so :root beats Bootstrap's own dark values on source order - * a token omitted here silently keeps its light value in dark mode. That is * what made headings ("Server Options") dark-on-dark: --bs-body-color was * only set on :root. --bs-heading-color is `inherit` in Bootstrap, so body * color covers headings too. */ [data-bs-theme="dark"] { --bs-primary: #3cbee0; --bs-primary-rgb: 60, 190, 224; --bs-success: #3cbee0; --bs-success-rgb: 60, 190, 224; --bs-link-color: #a0d7e7; --bs-link-hover-color: #3cbee0; --bs-body-color: #f9f9f9; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(249, 249, 249, 0.75); --eodc-focus: #3cbee0; --eodc-cta: #d9c991; --eodc-cta-hover: #ffffff; --eodc-cta-hover-border: #40bee0; } body { font-family: var(--bs-font-sans-serif); background: transparent; } /* * The hero is EODC's own duotone satellite scene, loaded from the eodc.eu * WordPress uploads (see --eodc-hero). If eodc.eu is unreachable the image * simply does not paint and the gradient below shows on its own. * * Set on html, not body, and fixed so it paints exactly once relative to the * viewport: on body it tiles once body's box is shorter than the scrollable * page, which banded the short pages. * * darkmode.js sets data-bs-theme on documentElement, i.e. itself, so * the dark variant has to be html[data-bs-theme="dark"] - a descendant * selector such as `[data-bs-theme="dark"] html` can never match the root. * * Light mode washes the image out to near-white instead of reusing the dark * overlay: the default body/control/modal colours are dark-on-light, so a * dark hero there leaves stock components (white modals, white inputs) * illegible. */ html { background-image: linear-gradient(180deg, rgba(249, 249, 249, 0.82) 0%, rgba(219, 232, 236, 0.9) 100%), var(--eodc-hero); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* * Deliberately a near-neutral scrim, not the brand blue used before: a blue * tint shifts the hero's pink toward purple. Neutral darkening keeps the * pink/teal hues true while still holding enough contrast under the off-white * body text. Raise the alphas if text over the brighter areas reads weakly. */ html[data-bs-theme="dark"] { background-image: linear-gradient(180deg, rgba(3, 12, 18, 0.08) 0%, rgba(3, 12, 18, 0.35) 100%), var(--eodc-hero); } /* * With the scrim this light, text over the hero's bright pink and pale teal * areas needs its own contrast rather than relying on the backdrop. Applied at * body level so it reaches every floating element, then switched off inside * components that paint their own solid surface, where it would just blur. */ html[data-bs-theme="dark"] body { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .select__control, html[data-bs-theme="dark"] .select__menu, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .table, html[data-bs-theme="dark"] .terminal-container { text-shadow: none; } /* * Fully transparent banner - no fill and no backdrop blur, so the hero runs * unbroken behind it. page.html puts Bootstrap's bg-body-tertiary utility * directly on the