/**
* Tree IT Systems — design layer over Cassiopeia.
*
* Strategy: redefine the custom properties Cassiopeia and Bootstrap already
* expose, then add a short list of rules for the few places where tokens are
* not enough. Nothing here fights the parent's markup, so a Joomla update to
* Cassiopeia cannot break the design.
*
* Loaded after the parent's template.css, so these declarations win.
*
* @copyright (C) 2026 Tree IT Systems e.K.
* @license GNU General Public License version 2 or later
*/
/* ---------------------------------------------------------------- font
Montserrat, self-hosted: variable weight axis 400–700, Latin + German
glyphs, one 30 KB file. SIL Open Font License 1.1 (see fonts/OFL.txt).
Never fonts.googleapis.com — no third-party request, no visitor IP
leaving the site. */
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-latin-400-700.woff2") format("woff2-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201A,
U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044,
U+20AC, U+2122, U+2192, U+2212;
}
/* metric-matched fallback: same x-height and line box, so the swap shifts
nothing (CLS stays flat) */
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
size-adjust: 101%;
ascent-override: 96.8%;
descent-override: 25.1%;
line-gap-override: 0%;
}
/* ---------------------------------------------------------------- tokens */
:root {
color-scheme: light dark;
/* --- the five company colours, verbatim --------------------------------
red #6f1009 · dark red #570f07 · silver #eceff3 · off-white #f5f5f5 ·
graphite #3f4445. Red is the first colour, silver the second; everything
below is derived from these and nothing else. */
--tree-red: #6f1009;
--tree-red-dark: #570f07;
--tree-silver: #eceff3;
--tree-silver-2: #f5f5f5;
--tree-graphite: #3f4445;
/* roles — revised 2026-09-12: in light mode the site uses the **dark red**
everywhere the red is read as a colour (text, links, glyphs, prices) and
everywhere it is a filled surface (buttons, the step discs, the map pin).
#6f1009 is kept for dark mode, where #570f07 is indistinguishable from
the background. */
--tree-accent: var(--tree-red-dark); /* red text, glyphs, focus rings */
--tree-accent-h: var(--tree-graphite); /* …and what they turn on hover */
/* ⚠ Links have their own token, because the accent cannot follow them into
dark mode. Company dark red on black measures **1.75:1** — not a close
call, three times short of the 4.5:1 a body link needs — and the two
lighter reds tried instead were rejected on sight ("icons look awful").
So in dark mode a link is silver, exactly the decision already taken for
the hosting prices, and the underline carries the "this is a link" signal
that the colour used to. Light mode is unchanged: dark red. */
--tree-link: var(--tree-accent);
--tree-link-h: var(--tree-accent-h);
--tree-fill: var(--tree-red-dark); /* red as a filled surface */
--tree-on-accent: #ffffff;
--tree-ink: #1f2325; /* graphite, one step darker for body text */
--tree-ink-2: var(--tree-graphite);
--tree-bg: #ffffff;
--tree-bg-alt: var(--tree-silver);
--tree-hairline: #d7dbe1; /* silver, one step darker for hairlines */
/* An icon badge is now the same object as a numbered step disc: the company
red filled, the glyph white. Decided 2026-09-12 — "adjust the icon
colouring to the number colouring". It also settles dark mode, where a
dark red *glyph* is a smudge but a dark red *pane* is a colour. */
--tree-ico-bg: var(--tree-fill); /* the pane behind a glyph */
--tree-ico-fg: #ffffff; /* the glyph itself */
/* A marker or a large figure drawn straight onto the page, with nothing
behind it to carry a colour. Dark red on white is 13.4:1; on black it is
1.9:1, and every red that passes there reads as pink or orange — both were
tried and both were rejected. So on a dark ground these turn white. Red
where the ground allows it, white where it does not. */
--tree-mark: var(--tree-red-dark); /* ticks, rules, years, contact glyphs */
--tree-display: var(--tree-red-dark); /* the hosting price, the domain endings */
--tree-logo-disc: var(--tree-red);
--tree-logo-tree: #ffffff;
--tree-font: "Montserrat", "Montserrat Fallback", -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--tree-container: 1120px;
--tree-gutter: clamp(1.25rem, 4vw, 2.5rem);
--tree-section: clamp(3.5rem, 8vw, 6.5rem);
/* --- Cassiopeia's own hooks --- */
--template-bg-light: var(--tree-bg-alt);
--template-text-dark: var(--tree-ink);
--template-text-light: #ffffff;
--template-special-color: var(--tree-accent);
--template-link-color: var(--tree-link);
/* --- Bootstrap/Cassiopeia base --- */
--body-bg: var(--tree-bg);
--body-color: var(--tree-ink);
--body-font-family: var(--tree-font);
--body-font-size: 1.0625rem;
--body-font-weight: 400;
--body-line-height: 1.62;
--link-color: var(--tree-link);
--link-hover-color: var(--tree-link-h);
--border-color: var(--tree-hairline);
--border-color-translucent: var(--tree-hairline);
--border-radius: 12px;
--border-radius-sm: 8px;
--border-radius-lg: 16px;
--border-radius-xl: 20px;
--border-radius-xxl: 24px;
--border-radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Dark mode keeps the company red for filled surfaces, where white type
sits on it, and uses a light tint of it for text and links — #6f1009 as
link colour on black is 1.6:1 and unreadable. */
--tree-accent: #d98078; /* tint of --tree-red, for text and links */
--tree-accent-h: #e8a19a;
--tree-link: var(--tree-silver-2);
--tree-link-h: #ffffff;
--tree-fill: var(--tree-red); /* on black the brighter red is the surface */
--tree-on-accent: #ffffff;
--tree-ink: var(--tree-silver-2);
--tree-ink-2: #a8adb3;
--tree-bg: #000000;
--tree-bg-alt: #131517;
--tree-hairline: #2b2f33;
--tree-ico-bg: var(--tree-fill);
--tree-ico-fg: #ffffff;
--tree-mark: #ffffff;
/* Large red text on black was tried three ways: the brand reds (1.75:1,
invisible), `#bf3626` (3.77:1, reads orange) and `#b02a1f` (3.20:1, the
darkest red that clears the floor). Decided 2026-09-13 to use the second
company colour instead — silver is unambiguous on black and the red
stays where it belongs, on the light theme. */
--tree-display: var(--tree-silver);
--tree-logo-disc: var(--tree-red);
--tree-logo-tree: var(--tree-silver-2);
--template-text-dark: var(--tree-ink);
}
}
:root[data-theme="dark"] {
--tree-accent: #d98078;
--tree-accent-h: #e8a19a;
--tree-link: var(--tree-silver-2);
--tree-link-h: #ffffff;
--tree-fill: var(--tree-red);
--tree-on-accent: #ffffff;
--tree-ink: var(--tree-silver-2);
--tree-ink-2: #a8adb3;
--tree-bg: #000000;
--tree-bg-alt: #131517;
--tree-hairline: #2b2f33;
--tree-ico-bg: var(--tree-fill);
--tree-ico-fg: #ffffff;
--tree-mark: #ffffff;
--tree-display: var(--tree-silver);
--tree-logo-disc: var(--tree-red);
--tree-logo-tree: var(--tree-silver-2);
--template-text-dark: var(--tree-ink);
}
/* the tokens above are consumed here, so both themes resolve as a set */
body {
background: var(--tree-bg);
color: var(--tree-ink);
font-family: var(--tree-font);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
}
/* ---------------------------------------------------------------- type */
h1, h2, h3, h4, .page-header h1, .page-header h2 {
font-family: var(--tree-font);
font-weight: 600;
color: var(--tree-ink);
text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.028em; line-height: 1.1; }
h3 { font-size: 1.3125rem; letter-spacing: -0.015em; line-height: 1.3; }
/* Measure: decided 2026-09-12 to let running text use the column it is in.
The container is already capped at 1120 px, which is the real limit; a
second cap on the paragraph left a third of every section empty. Documents
keep a reading measure (`.tree-legal`), and a lead keeps a short one,
because those are the two places where a narrow column is the point. */
p { max-width: none; }
a { text-decoration: none; }
.container-header a, .container-footer a, .mod-menu a, .mod-breadcrumbs a { text-decoration: none; }
.container-component a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.container-component .mod-menu a, .container-component .mod-breadcrumbs a { text-decoration: none; }
.mod-menu a:hover, .container-footer a:hover { text-decoration: none; }
/* ---------------------------------------------------------------- layout */
.site-grid,
.container-header > .grid-child,
.container-footer > .grid-child {
max-width: var(--tree-container);
margin-inline: auto;
padding-inline: var(--tree-gutter);
}
/* ⚠ Do not set a gap on .site-grid: Cassiopeia's grid keeps rows for the
containers that hold no modules, and a row-gap there adds blank space at the
top of every page (144 px, measured). Space belongs on the sections. */
.site-grid { gap: 0; }
.container-component { padding-block: clamp(2rem, 5vw, 3.5rem) var(--tree-section); }
.container-component > * + * { margin-top: 2rem; }
/* section rhythm inside article bodies */
.container-component h2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.container-component h2 + p,
.container-component h2 + .row { margin-top: 1.25rem; }
.container-component h3 { margin-top: 0; }
.container-component .lead {
font-size: var(--fs-lead, clamp(1.09rem, 1.6vw, 1.375rem));
color: var(--tree-ink-2);
line-height: 1.5;
max-width: 62ch;
margin-top: 1.25rem;
}
.container-component h1 + .lead { margin-top: 1.25rem; }
.container-component .lead + p { margin-top: 2rem; }
/* ---------------------------------------------------------------- header */
/* ⚠ Cassiopeia forces `position: relative !important` on the header below
992 px, which would drop the sticky bar — and with it the menu toggle — as
soon as a phone user scrolls. Same media query, same weight, later. */
@media (width <= 991.98px) {
.container-header { position: sticky !important; }
}
.container-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--tree-bg) 78%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--tree-hairline);
box-shadow: none;
}
/* Stock Cassiopeia stacks the header: the brand `.grid-child` on one row, the
`.container-nav` `.grid-child` underneath (its menu carries `flex:1 0 100%`).
This design wants one row — logo left, module menu right — so the header
itself becomes the flex row and holds the 1120 px measure, and the two
grid-children stop constraining their own width. Below 992 px the nav is
allowed to wrap onto its own full-width line. Markup untouched: what appears
in the bar is whatever module is published in the `menu` position. */
.container-header {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 1.5rem;
padding-inline: max(var(--tree-gutter), (100% - var(--tree-container)) / 2);
}
.container-header > .grid-child {
display: flex;
align-items: center;
gap: 1.5rem;
min-height: 60px;
padding-block: 0;
padding-inline: 0;
margin-inline: 0;
max-width: none;
width: auto; /* Cassiopeia's .grid-child is width:100% — two of those cannot share a row */
flex: 0 1 auto;
}
.container-header > .container-nav {
flex: 0 1 auto;
margin-left: auto;
padding-bottom: 0;
}
/* Cassiopeia gives the header menu `flex: 1 0 100%` for its stacked layout. */
.container-header .mod-menu { flex: 0 1 auto; }
@media (width <= 991.98px) {
.container-header > .container-nav { flex: 1 1 100%; margin-left: 0; }
}
.navbar-brand { margin: 0; }
.navbar-brand a,
.brand-logo {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--tree-ink);
font-weight: 600;
letter-spacing: -0.02em;
font-size: 1rem;
}
.navbar-brand img, .brand-logo img, .container-header img.logo {
height: 34px;
width: auto;
max-height: none;
max-width: none;
}
/* The brand mark is a single monochrome (black) SVG served through the
template style's Brand → Logo parameter. One element cannot swap its
src from CSS, so dark mode inverts it to white instead of shipping a second
file. If a COLOURED logo is ever configured, delete this block — inverting
a coloured mark produces wrong hues. */
/* `brightness(0) invert(1)` turns any monochrome mark white, whatever colour
the file uses — cleaner than `invert(1)`, which turned the brand grey into
a muddy warm grey. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .navbar-brand img,
:root:not([data-theme="light"]) .brand-logo img,
:root:not([data-theme="light"]) .container-header img.logo,
:root:not([data-theme="light"]) .container-footer img.tree-footer-logo { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .navbar-brand img,
:root[data-theme="dark"] .brand-logo img,
:root[data-theme="dark"] .container-header img.logo,
:root[data-theme="dark"] .container-footer img.tree-footer-logo { filter: brightness(0) invert(1); }
/* Cassiopeia paints header text with --template-text-light (for its dark
header); this header is light, so the colour is set explicitly. */
.container-header,
.container-header a,
.container-header .site-title,
.container-header .site-description { color: var(--tree-ink); }
.container-header a:hover { color: var(--tree-ink); }
.navbar-brand .site-title {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.02em;
text-transform: none;
margin: 0;
}
.navbar-brand .site-description { display: none; }
.container-header .container-nav { margin-left: auto; }
/* main navigation (mod_menu, core markup untouched) */
/* Cassiopeia paints the header menu white (`.container-header .mod-menu{color:#fff}`)
and its links inherit that through `currentColor`, because its own header is
dark. This header is light, so the colour is restored at the same place, with
the same specificity, later in the cascade. Without this the menu items are
white on white — invisible. */
.container-header .mod-menu { color: var(--tree-ink); }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span { color: var(--tree-ink); }
.container-header .mod-menu .mod-menu__sub {
background-color: var(--tree-bg);
border: 1px solid var(--tree-hairline);
border-radius: var(--border-radius-lg, 12px);
padding: .5rem 0;
}
.container-nav .mod-menu {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.container-nav .mod-menu .nav-item { margin: 0; }
.container-nav .mod-menu a {
padding: 0;
font-size: .9375rem;
color: var(--tree-ink);
opacity: .82;
border: 0;
background: none;
transition: opacity 180ms ease;
}
.container-nav .mod-menu a:hover { opacity: 1; text-decoration: none; }
.container-nav .mod-menu .current > a { opacity: 1; font-weight: 500; }
/* Below 992 px Cassiopeia turns the menu into a full-height stacked column
(its own rule, `.container-header .mod-menu{flex-direction:column}`), which
pushes the content of the page down by roughly 300 px on a phone. Same
specificity, later in the cascade: keep it a row that wraps onto a second
line. No markup and no JavaScript, so the menu stays whatever the module
publishes. */
@media (width <= 991.98px) {
.container-header .mod-menu {
flex-direction: row;
flex-wrap: wrap;
gap: .35rem 1.1rem;
}
.container-nav .mod-menu { justify-content: flex-start; }
.container-header .container-nav nav,
.container-nav .container-search { margin-top: .5rem; }
.container-nav { padding-bottom: .5em; }
}
/* -------------------------------------------------- mobile menu (no JS)
The shell comes from the mod_menu layout override: a button with
`popovertarget` and a panel with `popover`. The browser does the opening,
the Esc key, the click-outside dismissal and the focus handling — there is
no script. The item list inside the panel is core's own output.
Default state below is "no shell at all": button and close hidden, panel
transparent to layout (`display: contents`), so the desktop row and any
browser without popover support show the plain list. */
.tree-navtoggle { display: none; }
.tree-navpanel { display: contents; }
@media (width <= 991.98px) {
@supports selector(:popover-open) {
/* the hamburger, drawn in CSS — no icon font, no image */
.tree-navtoggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-inline-start: auto;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
color: var(--tree-ink);
cursor: pointer;
}
.tree-navtoggle__bars,
.tree-navtoggle__bars::before,
.tree-navtoggle__bars::after {
display: block;
width: 19px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
}
.tree-navtoggle__bars { position: relative; }
.tree-navtoggle__bars::before,
.tree-navtoggle__bars::after {
content: "";
position: absolute;
left: 0;
}
.tree-navtoggle__bars::before { top: -6px; }
.tree-navtoggle__bars::after { top: 6px; }
/* the header row keeps one line: logo left, hamburger right */
.container-header > .container-nav { flex: 0 1 auto; margin-left: auto; }
.container-nav { padding-bottom: 0; }
/* the hamburger becomes an X while the panel is open. The panel is a later
sibling, so :has() on the container is what makes this possible without
a script. Browsers without :has() simply keep the three bars. */
.container-nav:has(.tree-navpanel:popover-open) .tree-navtoggle__bars {
background: transparent;
}
.container-nav:has(.tree-navpanel:popover-open) .tree-navtoggle__bars::before {
top: 0;
rotate: 45deg;
}
.container-nav:has(.tree-navpanel:popover-open) .tree-navtoggle__bars::after {
top: 0;
rotate: -45deg;
}
.tree-navtoggle__bars::before,
.tree-navtoggle__bars::after { transition: top .2s ease, rotate .2s ease; }
/* the panel: everything below the header bar, in the browser's top layer,
so the logo and the toggle stay visible and usable above it */
.tree-navpanel {
display: none;
position: fixed;
inset: 60px 0 0 0;
width: 100%;
height: calc(100dvh - 60px);
max-width: none;
max-height: none;
margin: 0;
padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--tree-bg);
color: var(--tree-ink);
opacity: 0;
translate: 0 -.5rem;
transition:
opacity .24s ease,
translate .24s ease,
display .24s allow-discrete,
overlay .24s allow-discrete;
}
.tree-navpanel:popover-open {
display: block;
opacity: 1;
translate: 0 0;
}
/* the state the panel animates *from* — native, no script */
@starting-style {
.tree-navpanel:popover-open { opacity: 0; translate: 0 -.5rem; }
}
/* No ::backdrop tint: the panel already covers everything below the bar,
and a tint would also darken the header, which stays visible. */
.tree-navpanel::backdrop { background: none; }
/* the item list inside the panel: stacked, tappable, hairline separated */
.tree-navpanel .mod-menu {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 0;
width: 100%;
max-width: 30rem;
}
.tree-navpanel .mod-menu > li { border-block-start: 1px solid var(--tree-hairline); }
.tree-navpanel .mod-menu > li:first-child { border-block-start: 0; }
.tree-navpanel .mod-menu > li > a,
.tree-navpanel .mod-menu > li > span {
display: flex;
align-items: center;
min-height: 56px;
padding-block: .5rem;
font-size: 1.375rem;
font-weight: 500;
letter-spacing: -0.02em;
opacity: 1;
}
.tree-navpanel .mod-menu .current > a { color: var(--tree-accent); }
/* a parent item keeps its label and core's chevron toggle on one row */
.tree-navpanel .mod-menu > li.parent {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.tree-navpanel .mod-menu > li.parent > .mod-menu__sub { grid-column: 1 / -1; }
.tree-navpanel .mod-menu .mod-menu__toggle-sub {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--tree-ink-2);
}
.tree-navpanel .mod-menu .mod-menu__sub {
position: static;
display: block;
min-width: 0;
padding: 0 0 .5rem 1rem;
border: 0;
background: none;
box-shadow: none;
}
.tree-navpanel .mod-menu .mod-menu__sub > li > a { min-height: 44px; font-size: 1.0625rem; font-weight: 400; }
}
}
@media (prefers-reduced-motion: reduce) {
.tree-navpanel,
.tree-navpanel::backdrop { transition-duration: 1ms; }
}
/* ---------------------------------------------------------------- buttons
Three states, all from the company palette: rest, hover/focus, and the
moment of the click. Red is the primary colour, silver the second, so a
primary button darkens red → dark red, and a secondary button inverts
silver → graphite. `:active` adds a 2 % press, which is the only motion
and is removed under prefers-reduced-motion. */
.btn, button.btn, .btn-primary, .readmore .btn {
border-radius: 999px;
padding: .7rem 1.35rem;
font-size: .9375rem;
font-weight: 500;
border: 1px solid transparent;
box-shadow: none;
min-height: 44px;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .1s ease;
}
.btn:active, button.btn:active { scale: .98; }
/* Decided 2026-09-12: the two button families swap into each other's colour.
A red button turns **graphite** — the dark silver — and a light button turns
**dark red**. So whichever button you hover, the page answers in the other
company colour instead of merely darkening.
Contrast of both hover states, measured: white on #3f4445 = 9.6:1,
white on #570f07 = 13.4:1. */
/* primary — red, inverting to graphite */
.btn-primary,
.btn-primary:focus {
background: var(--tree-fill);
border-color: var(--tree-fill);
color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
background: var(--tree-graphite);
border-color: var(--tree-graphite);
color: #ffffff;
}
/* graphite on black is a legible surface, so dark mode keeps the same move */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary:focus-visible,
:root:not([data-theme="light"]) .btn-primary:active {
background: var(--tree-graphite);
border-color: #5c6365;
color: #ffffff;
}
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus-visible,
:root[data-theme="dark"] .btn-primary:active {
background: var(--tree-graphite);
border-color: #5c6365;
color: #ffffff;
}
/* secondary — silver or white, inverting to dark red */
.btn-secondary,
.btn-outline-primary,
.btn-secondary:focus,
.btn-outline-primary:focus {
background: var(--tree-silver);
border-color: transparent;
color: var(--tree-graphite);
}
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-secondary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-secondary:active,
.btn-outline-primary:active {
background: var(--tree-red-dark);
border-color: var(--tree-red-dark);
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn-secondary,
:root:not([data-theme="light"]) .btn-outline-primary {
background: transparent;
border-color: var(--tree-hairline);
color: var(--tree-ink);
}
:root:not([data-theme="light"]) .btn-secondary:hover,
:root:not([data-theme="light"]) .btn-outline-primary:hover,
:root:not([data-theme="light"]) .btn-secondary:focus-visible,
:root:not([data-theme="light"]) .btn-outline-primary:focus-visible {
background: var(--tree-red-dark);
border-color: color-mix(in srgb, var(--tree-red) 60%, var(--tree-silver));
color: #ffffff;
}
}
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-outline-primary {
background: transparent;
border-color: var(--tree-hairline);
color: var(--tree-ink);
}
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-secondary:focus-visible,
:root[data-theme="dark"] .btn-outline-primary:focus-visible {
background: var(--tree-red-dark);
border-color: color-mix(in srgb, var(--tree-red) 60%, var(--tree-silver));
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.btn, button.btn { transition-duration: 1ms; }
.btn:active, button.btn:active { scale: 1; }
}
/* ---------------------------------------------------------------- surfaces */
/* ---------------------------------------------------------------- card grids
Bootstrap columns do not stretch their child by default, so cards in a row
end up ragged. This makes every card fill its column. */
.container-component .row { row-gap: 1.25rem; }
/* only columns that actually hold a card become flex, and as a column, so a
plain text column keeps normal block flow */
.container-component .row > [class*="col-"]:has(> .card) { display: flex; flex-direction: column; }
.container-component .row > [class*="col-"] > .card { flex: 1 1 auto; }
.card h3 { margin-bottom: .35rem; }
/* specificity has to beat .container-component a:not(.btn), which underlines
content links */
.container-component .card h3 a { color: var(--tree-ink); text-decoration: none; }
.container-component .card h3 a:hover { color: var(--tree-accent); text-decoration: none; }
.card p { color: var(--tree-ink-2); font-size: var(--fs-small, .9375rem); }
/* ⚠ The hairline is an **inset shadow, not a border**. A real border sits
outside the padding box, so a photograph inside a card can never reach the
card's edge and the border draws a visible line around the picture — which
is exactly what it did once the hovered card turned dark red. An inset ring
occupies no layout space, looks identical at rest, and simply stops
existing on hover. */
.card, .sidebar-right .card, .sidebar-left .card {
background: var(--tree-bg);
border: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px var(--tree-hairline);
overflow: hidden;
}
.card-header, .card-footer { background: transparent; border-color: var(--tree-hairline); }
.card-body { padding: 1.75rem; }
.well, .blog-featured > .card { background: var(--tree-bg-alt); }
/* article and blog listings */
.page-header { border: 0; margin-bottom: 1.5rem; padding: 0; }
.blog-featured .item, .blog .item, .com-content-article {
border-bottom: 1px solid var(--tree-hairline);
padding-block: 2.5rem;
}
.blog-featured .item:last-child, .blog .item:last-child { border-bottom: 0; }
.com-content-article__body > * + * { margin-top: 1.25rem; }
.article-info { font-size: .875rem; color: var(--tree-ink-2); }
.article-info dd { margin: 0; }
figure img, .com-content-article img { border-radius: 20px; height: auto; }
/* breadcrumbs, quiet */
.mod-breadcrumbs__wrapper { padding-block: 1.25rem 0; }
.mod-breadcrumbs {
background: transparent;
padding: 0;
font-size: .875rem;
color: var(--tree-ink-2);
}
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before { color: var(--tree-hairline); }
/* forms */
.form-control, .inputbox, input[type="text"], input[type="email"], input[type="password"], textarea, select {
border-radius: 12px;
border: 1px solid var(--tree-hairline);
background: var(--tree-bg);
color: var(--tree-ink);
min-height: 44px;
font-family: var(--tree-font);
}
.form-control:focus { border-color: var(--tree-accent); box-shadow: none; }
/* input groups: the appended button must follow the theme too, or it stays a
white patch on a dark ground */
.input-group-text,
.input-group .btn,
.input-group button {
background: var(--tree-bg);
border: 1px solid var(--tree-hairline);
color: var(--tree-ink-2);
border-radius: 12px;
min-height: 44px;
}
.input-group .btn:hover { background: var(--tree-bg-alt); color: var(--tree-ink); }
/* system messages */
/* ⚠ Core's alert ships its own white background and a pale text colour inside
a shadow DOM-ish wrapper; on the dark theme that produced a white slab with
grey-on-white text — reported as "the contact form error is not readable".
The colour is forced on every element inside the alert, and the danger
variant gets the company red as a left marker rather than as a fill. */
joomla-alert, .alert {
display: block;
/* ⚠ It sits directly above the page's first section and was touching the
contact card. Core's own alert stylesheet loads *after* this one and sets
`margin-bottom: 1rem` at the same specificity, so the value has to be
forced — measured 16 px before, the clamp after. */
margin-block: 1rem clamp(1.5rem, 3vw, 2.25rem) !important;
border-radius: 12px;
border: 1px solid var(--tree-hairline);
background: var(--tree-bg-alt) !important;
color: var(--tree-ink) !important;
padding: 1rem 1.25rem;
font-size: var(--fs-small, .9375rem);
}
joomla-alert *, .alert * { color: inherit; }
joomla-alert a, .alert a { color: var(--tree-link); }
/* ⚠ core sets `border-color` per variant with its own custom properties, which
land later in the cascade than a bare element selector — measured
`rgb(244,207,206)`, a pale pink, where the company red was intended. */
joomla-alert[type="danger"], joomla-alert.joomla-alert--danger, .alert-danger {
border-color: var(--tree-hairline) !important;
border-left: 4px solid var(--tree-fill) !important;
}
joomla-alert[type="success"], .alert-success {
border-color: var(--tree-hairline) !important;
border-left: 4px solid var(--tree-graphite) !important;
}
/* the close button is a button, not a red cross on a white field */
joomla-alert button.joomla-alert--close,
joomla-alert .joomla-alert-button,
.alert .btn-close {
color: var(--tree-ink-2) !important;
background: none;
opacity: 1;
}
/* ---------------------------------------------------------------- footer
Cassiopeia renders the `footer` position with `style="none"`: no chrome, no
module titles, just each module's own output, stacked. So the columns are
the modules themselves — this grid turns them into columns, and a module
with the class `tree-footer-legal` becomes the full-width bar underneath.
Column headings live inside the modules (see the markup in
`claude/website-copy-en.md`), because `style="none"` prints no title. */
.container-footer {
background: var(--tree-bg-alt);
border-top: 1px solid var(--tree-hairline);
color: var(--tree-ink-2);
margin-top: 0;
}
.container-footer > .grid-child {
display: grid;
--tree-footer-gap: clamp(1.75rem, 4vw, 3rem);
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--tree-footer-gap);
align-items: start;
padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.container-footer > .grid-child > * { min-width: 0; }
/* column headings: quiet, uppercase, small — they label, they do not shout */
.container-footer h2,
.container-footer h3,
.container-footer .tree-footer-head {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tree-ink-2);
margin: 0 0 .85rem;
}
.container-footer ul,
.container-footer .mod-menu {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .55rem;
}
.container-footer li { margin: 0; }
.container-footer a { color: var(--tree-ink); opacity: .8; }
.container-footer a:hover,
.container-footer a:focus-visible { opacity: 1; color: var(--tree-accent); }
.container-footer p {
font-size: .9375rem;
line-height: 1.6;
color: var(--tree-ink-2);
max-width: 34ch;
margin: 0 0 .5rem;
}
.container-footer img.tree-footer-logo {
height: 30px;
width: auto;
margin-bottom: 1rem;
}
/* the address block: same data as the Impressum, one line per field */
.container-footer address {
font-style: normal;
font-size: .9375rem;
line-height: 1.7;
color: var(--tree-ink-2);
}
/* The bottom bar. Keyed off BOTH the module class and "last module in the
position", so a forgotten Module Class no longer squeezes the copyright
into a narrow fifth column — which is what happened on staging. */
.container-footer > .grid-child > :nth-last-child(1 of :not(.mod-languages)),
.container-footer .tree-footer-legal {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem 1.5rem;
margin-top: .5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--tree-hairline);
font-size: .875rem;
}
.container-footer .tree-footer-legal ul {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.25rem;
}
.container-footer > .grid-child > :nth-last-child(1 of :not(.mod-languages)) p,
.container-footer .tree-footer-legal p { max-width: none; margin: 0; }
/* If the switcher is published in `footer` instead of `tree-lang` — i.e. the
{loadposition} route was not taken — it becomes its own grid item. Then it
is right-aligned directly under the copyright, without a second border. */
.container-footer > .grid-child > .mod-languages {
grid-column: 1 / -1;
justify-self: end;
border-top: 0;
padding-top: 0;
/* cancel the grid gap so the pills sit on the copyright's line, right */
margin-top: calc(-1 * var(--tree-footer-gap) + .25rem);
}
/* The language switcher and the colour-scheme control are **one component in
two flavours**, so they are written as one rule set with one set of numbers.
They were close but not equal — different shell fill, different segment
height, a circular active chip on one and a pill on the other — and that
reads as sloppy rather than as a pair. Reported twice; this version stops
styling them separately. */
.container-footer .mod-languages ul,
.container-footer .tree-theme {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--tree-hairline);
border-radius: 999px;
background: transparent;
margin: 0;
list-style: none;
}
.container-footer .mod-languages a,
.container-footer .tree-theme button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
min-width: 3.25rem;
padding: 0 .85rem;
border: 0;
border-radius: 999px;
background: none;
font: inherit;
font-size: .78rem;
font-weight: 500;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
color: var(--tree-ink-2);
cursor: pointer;
transition: background-color .18s ease, color .18s ease;
}
.container-footer .mod-languages .lang-active > a,
.container-footer .mod-languages a[aria-current="true"],
.container-footer .tree-theme button[aria-pressed="true"] {
background: var(--tree-ink);
color: var(--tree-bg);
}
.container-footer .mod-languages a:hover,
.container-footer .tree-theme button:hover[aria-pressed="false"] { color: var(--tree-ink); }
/* ⚠ mod_languages wraps its items in more than the list: a heading, a hidden
"active language" badge, and in some configurations a `` around the
label. Any of those can carry a ground of its own and show up as a grey
patch inside the pill — reported 2026-09-13. Everything inside the shell is
therefore reset to no background and no border, and the shell clips whatever
is left to its own rounded shape. */
.container-footer .mod-languages ul { overflow: hidden; }
.container-footer .mod-languages :is(li, span, div, p) {
background: none;
border: 0;
margin: 0;
padding: 0;
}
.container-footer .mod-languages a { background: none; }
.container-footer .mod-languages .lang-active::after,
.container-footer .mod-languages h3,
.container-footer .mod-languages .visually-hidden,
.container-footer .mod-languages .sr-only { display: none; }
.tree-footer-legal .mod-languages,
.tree-footer-legal .tree-theme { align-self: center; }
.tree-footer-legal .mod-languages { margin-left: auto; }
.tree-footer-legal .mod-languages + .tree-theme { margin-left: .75rem; }
/* the language switcher (mod_languages), wherever it is published */
.mod-languages ul {
display: flex;
gap: .35rem;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.mod-languages li { margin: 0; }
.mod-languages a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 .6rem;
border-radius: 999px;
font-size: .8125rem;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
.mod-languages .lang-active > a,
.mod-languages a[aria-current="true"] {
background: var(--tree-graphite);
color: var(--tree-silver);
opacity: 1;
}
.mod-languages .badge { display: none; } /* Joomla's "active" badge duplicates the state */
/* ⚠ Reported 2026-09-12: the switcher pills came out round in light mode and
square in dark. Our own rule sets the same radius in both themes, so the
square corners come from something else painting a background on a
different element — Bootstrap's `.btn`, a dropdown `select`, a flag image,
or a wrapper Cassiopeia gives a card radius to under `data-bs-theme=dark`.
Rather than guess which, every shape the switcher can render is pinned to
the pill radius in both themes. The `!important` is deliberate: this has to
beat whatever rule is winning, and it applies to nothing outside the
language switcher. */
.mod-languages a,
.mod-languages .btn,
.mod-languages li,
.mod-languages img,
.mod-languages select,
.mod-languages .dropdown-toggle,
.mod-languages .dropdown-menu { border-radius: 999px !important; }
.mod-languages .dropdown-menu { padding-inline: .35rem; }
.mod-languages img { max-height: 18px; width: auto; }
/* on black, a graphite pill disappears — invert it */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mod-languages .lang-active > a,
:root:not([data-theme="light"]) .mod-languages a[aria-current="true"] {
background: var(--tree-silver);
color: var(--tree-graphite);
}
}
:root[data-theme="dark"] .mod-languages .lang-active > a,
:root[data-theme="dark"] .mod-languages a[aria-current="true"] {
background: var(--tree-silver);
color: var(--tree-graphite);
}
/* Cassiopeia's own back-to-top link, in the company palette: a red disc with a
white arrow, dark red when hovered or pressed — the same pair as the primary
button, so the one piece of floating chrome on the page reads as ours. Red
as a filled surface is correct in both themes (white on #6f1009 measures
12:1); on black it gets a faint ring so the disc does not float unbounded. */
.back-to-top-link {
inset-inline-end: clamp(.75rem, 3vw, 1.5rem);
bottom: clamp(.75rem, 3vw, 1.5rem);
width: 2.75rem;
height: 2.75rem;
padding: 0;
display: grid;
place-items: center;
border-radius: 999px;
background-color: var(--tree-fill);
border: 1px solid var(--tree-fill);
color: #ffffff;
box-shadow: 0 2px 10px rgb(0 0 0 / .18);
transition: opacity .2s ease-in, background-color .18s ease,
border-color .18s ease, scale .15s ease;
}
.back-to-top-link .icon-arrow-up { font-size: .95rem; line-height: 1; }
.back-to-top-link:hover,
.back-to-top-link:focus {
background-color: var(--tree-red-dark);
border-color: var(--tree-red-dark);
color: #ffffff;
}
.back-to-top-link:active { scale: .96; }
.back-to-top-link:focus-visible { outline: 3px solid var(--tree-accent); outline-offset: 3px; }
/* core keeps the link click-through at opacity 0; hide it properly until its
script marks it visible, so there is no invisible target in the corner */
.back-to-top-link:not(.visible) { visibility: hidden; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .back-to-top-link { border-color: rgb(255 255 255 / .28); }
}
:root[data-theme="dark"] .back-to-top-link { border-color: rgb(255 255 255 / .28); }
@media (prefers-reduced-motion: reduce) {
.back-to-top-link { transition: opacity .2s ease-in; }
.back-to-top-link:active { scale: 1; }
}
/* ---------------------------------------------------------------- theme control
Rendered by a Custom HTML module in the header; styled here so the module
needs no CSS of its own. */
.tree-theme {
display: flex;
align-items: center;
gap: .1rem;
border: 1px solid var(--tree-hairline);
border-radius: 999px;
padding: 2px;
}
.tree-theme button {
font: inherit;
font-size: .78rem;
letter-spacing: .04em;
background: none;
border: 0;
color: var(--tree-ink-2);
padding: .25rem .6rem;
border-radius: 999px;
cursor: pointer;
min-height: 30px;
}
.tree-theme button[aria-pressed="true"] { background: var(--tree-ink); color: var(--tree-bg); }
.tree-theme button:hover[aria-pressed="false"] { color: var(--tree-ink); }
/* the bar holds: copyright · language · colour scheme. Both controls are
styled together further down — see "one component in two flavours". */
.container-footer .tree-footer-legal > * { flex: 0 0 auto; }
.container-footer .tree-footer-legal > p { margin-right: auto; }
/* ---------------------------------------------------------------- a11y */
:focus-visible { outline: 3px solid var(--tree-accent); outline-offset: 2px; }
.skip-link:focus, .skip:focus { background: var(--tree-accent); color: var(--tree-on-accent); }
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media print {
.container-header, .container-footer, .sidebar-right, .sidebar-left { display: none; }
body { background: #fff; color: #000; }
}
/* ---------------------------------------------------------------- imagery
Photographs are content, so they come from the article body as
/ — never as CSS backgrounds. That keeps alt text, lazy
loading and the srcset in the hands of whoever edits the page, and keeps
the images in the sitemap. These rules only decide how they sit. */
/* A picture with a caption. Since 3.27.0 it carries the same shell as the
interactive map — 20px radius, one hairline — because the contact page's map
became a picture, and a page should not change character just because a
component stopped being scriptable. `.tree-map__links` is deliberately not
scoped to `.tree-map`, so the button row under the map works here too. */
.tree-figure { margin-block: clamp(2.5rem, 6vw, 4.5rem); }
.tree-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
border: 1px solid var(--tree-hairline);
}
.tree-figure figcaption {
margin-top: .75rem;
font-size: .9375rem;
color: var(--tree-ink-2);
/* ⚠ No `max-width` here. A caption that stops at 60ch under a full-width
picture reads as a stray paragraph rather than as part of the figure —
reported 2026-09-17, and the same objection as the note under the contact
form. The measure is already set by the container. */
}
.tree-figure .tree-map__links { margin-top: 1rem; }
/* ------------------------------------------- a picture in two colour schemes
The contact map exists as a light and a dark rendering. ⚠ `` with a
`media` source is the textbook answer and is wrong twice here: the editor on
b.tree.bz strips `` and `` (website-copy-en §3a), and a
media query cannot see the site's own Light/Dark control, which is a data
attribute on and not a system preference. Two ``s and a display
rule answer both at once.
⚠ Both images must keep `loading="lazy"`. A lazy image inside a
`display: none` box has no layout box, so it never intersects the viewport
and is never fetched — which is what stops the page paying for the variant it
does not show. Drop the attribute and the visitor downloads both. */
.tree-figure--themed .tree-figure__dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tree-figure--themed .tree-figure__light { display: none; }
:root:not([data-theme="light"]) .tree-figure--themed .tree-figure__dark { display: block; }
/* the dark rendering is already dark; §4.9's blanket dimming would flatten it */
:root:not([data-theme="light"]) .tree-figure--themed .tree-figure__dark { filter: none; }
}
:root[data-theme="dark"] .tree-figure--themed .tree-figure__light { display: none; }
:root[data-theme="dark"] .tree-figure--themed .tree-figure__dark { display: block; filter: none; }
:root[data-theme="light"] .tree-figure--themed .tree-figure__light { display: block; }
:root[data-theme="light"] .tree-figure--themed .tree-figure__dark { display: none; }
/* Two escapes from the 1120 px measure.
`.tree-wide` widens to the page gutters — up to 1200 px, safe everywhere.
`.tree-bleed` goes edge to edge. ⚠ `100vw` includes the classic scrollbar,
so on its own it would add a horizontal scrollbar on every desktop page.
`overflow-x: clip` on the root absorbs that overshoot; unlike
`overflow: hidden` it does not create a scroll container, so the sticky
header keeps working. Browsers without `clip` (Safari < 16) fall back to
`visible` and would show a small horizontal scroll on bleed pages — the
reason `.tree-wide` exists as the conservative choice. */
html, body { overflow-x: clip; }
.tree-wide {
width: calc(100% + 2 * var(--tree-gutter));
max-width: none;
margin-inline: calc(-1 * var(--tree-gutter));
}
.tree-bleed {
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
.tree-wide img,
.tree-bleed img {
border-radius: 0;
aspect-ratio: 2 / 1;
object-fit: cover;
}
@media (width <= 700px) {
/* a 2:1 band is a letterbox slit on a phone — crop taller instead */
.tree-wide img,
.tree-bleed img { aspect-ratio: 4 / 3; }
}
@media (width >= 1200px) {
/* on a wide screen a 2:1 band is 700 px tall and swallows the fold */
.tree-wide img,
.tree-bleed img { aspect-ratio: 12 / 5; max-height: 68vh; }
}
/* Focal point: a centre crop cuts the subject off when it sits at one edge.
Add one of these to the in the article. */
.tree-focus-left { object-position: 15% center; }
.tree-focus-right { object-position: 80% center; }
/* ⚠ These are the only control over what a `cover` crop keeps, and the band
they sit in changes height with the viewport, so the values are chosen to
keep the subject inside the *shortest* window the component can have, not
the average one. Retuned 2026-09-13 after trees were cut off at the top of
the IT hero and at the foot of two closing bands. */
.tree-focus-top { object-position: center 12%; }
.tree-focus-mid { object-position: center 55%; }
.tree-focus-bottom { object-position: center 85%; }
/* inset band: stays inside the measure, rounded like the cards */
.tree-inset img {
border-radius: var(--border-radius-xl);
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* photo tiles on cards */
.card { overflow: hidden; }
.card > .card-img-top {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
}
.card:has(> .card-img-top) .card-body { padding-block-start: 1.25rem; }
/* Photographs sit a touch quieter in dark mode, like every other surface. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tree-figure img,
:root:not([data-theme="light"]) .card-img-top { filter: brightness(.88) saturate(.92); }
}
:root[data-theme="dark"] .tree-figure img,
:root[data-theme="dark"] .card-img-top { filter: brightness(.88) saturate(.92); }
/* ------------------------------------------------- hero: text over a photo
The photograph stays an (content, alt text, srcset, sitemap) and is
positioned behind the text rather than being a CSS background. A scrim
between the two guarantees contrast, so the type is white in both colour
schemes — the photograph, not the theme, is the surface here. */
.tree-hero {
/* full-bleed on its own, so the band rules for `.tree-bleed img`
(aspect-ratio, max-height) cannot fight the hero's own geometry */
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(26rem, 62vh, 42rem);
overflow: hidden;
isolation: isolate;
margin-block: 0 clamp(2.5rem, 6vw, 4.5rem);
}
.tree-hero--band {
min-height: clamp(20rem, 46vh, 30rem);
margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* A service page opens with a photograph too, but shorter than the home page:
the home hero is the one that gets the full 62 vh, so the subpages read as
subpages. */
.tree-hero--page { min-height: clamp(21rem, 50vh, 32rem); }
.tree-hero > .tree-hero__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
/* ⚠ width/height attributes give the an intrinsic aspect-ratio, and
with it Chromium computes the height from the width and overflows the
hero. The image is sized by the insets and cropped by object-fit. */
aspect-ratio: auto;
max-height: none;
object-fit: cover;
border-radius: 0;
}
/* The scrim. Measured, not guessed: with white type the darkest pixel behind
any glyph has to stay at 4.5:1 or better. A single side gradient failed on
the fog photograph (1.4:1 on a phone, where the text spans the full width),
so the scrim is two layers — a side gradient for the wide layout and a
bottom-up gradient that does the work when the text is full width — plus a
flat veil that guarantees a floor on a bright photograph. */
.tree-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgb(0 0 0 / .52) 0%, rgb(0 0 0 / .38) 55%, rgb(0 0 0 / .22) 100%),
linear-gradient(0deg, rgb(0 0 0 / .42) 0%, rgb(0 0 0 / .14) 62%, rgb(0 0 0 / 0) 100%),
rgb(0 0 0 / .10);
}
/* A bright photograph — fog, snow, a pale sky — needs more scrim than a dusk
shot. Add `tree-hero--bright` to the section rather than darkening every
hero. Measured on the fog photograph: 4.56:1 without it, 6.0:1 with. */
.tree-hero--bright::after {
background:
linear-gradient(90deg, rgb(0 0 0 / .60) 0%, rgb(0 0 0 / .46) 55%, rgb(0 0 0 / .30) 100%),
linear-gradient(0deg, rgb(0 0 0 / .50) 0%, rgb(0 0 0 / .20) 62%, rgb(0 0 0 / 0) 100%),
rgb(0 0 0 / .14);
}
/* A page hero is a 2:1 crop, so the sky sits directly behind the headline on a
wide screen where the standard scrim is tuned for a tall dusk photograph.
Measured on the four service photographs: the base scrim gave 2.40:1 on the
hill-and-clouds picture; these values put the worst pixel behind every
glyph above the floor on all four, in both themes. */
@media (width > 700px) {
.tree-hero--page::after {
background:
linear-gradient(90deg, rgb(0 0 0 / .64) 0%, rgb(0 0 0 / .50) 55%, rgb(0 0 0 / .34) 100%),
linear-gradient(0deg, rgb(0 0 0 / .58) 0%, rgb(0 0 0 / .24) 66%, rgb(0 0 0 / 0) 100%),
rgb(0 0 0 / .14);
}
.tree-hero--page.tree-hero--bright::after {
background:
linear-gradient(90deg, rgb(0 0 0 / .70) 0%, rgb(0 0 0 / .56) 55%, rgb(0 0 0 / .42) 100%),
linear-gradient(0deg, rgb(0 0 0 / .64) 0%, rgb(0 0 0 / .32) 66%, rgb(0 0 0 / 0) 100%),
rgb(0 0 0 / .18);
}
}
@media (width <= 700px) {
/* the text column is the whole width here, so the vertical layer carries it */
.tree-hero::after {
background:
linear-gradient(0deg, rgb(0 0 0 / .66) 0%, rgb(0 0 0 / .44) 70%, rgb(0 0 0 / .26) 100%),
rgb(0 0 0 / .08);
}
.tree-hero--bright::after {
background:
linear-gradient(0deg, rgb(0 0 0 / .74) 0%, rgb(0 0 0 / .54) 70%, rgb(0 0 0 / .36) 100%),
rgb(0 0 0 / .12);
}
}
.tree-hero__text {
position: relative;
width: 100%;
max-width: var(--tree-container);
margin-inline: auto;
padding: clamp(2rem, 6vw, 4rem) var(--tree-gutter) clamp(2rem, 5vw, 3.5rem);
color: #fff;
}
.tree-hero__text > * + * { margin-top: 1.25rem; }
.tree-hero h1,
.tree-hero h2,
.tree-hero h3 { color: #fff; }
.tree-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
/* The hero text runs the full measure. It was capped at 46 characters, which
is right for a column of running text and wrong here: the container is
already 1120 px and the photograph is 1440, so the paragraph stopped at
roughly a third of the picture and the hero read as a left-hand panel.
Reported 2026-09-12: "these are too left aligned, use full width."
⚠ This moves the end of every line out over the bright part of the
photograph, so the horizontal scrim below had to be flattened to match —
the two changes are one change. */
.tree-hero .lead,
.tree-hero p {
color: rgb(255 255 255 / .88);
max-width: 68ch;
}
@media (width >= 62em) {
.tree-hero .lead,
.tree-hero p { max-width: none; }
}
/* On a photograph the red button disappears into the scrim, so the hero uses
the second company colour: silver, inverting to dark red on hover — the
same behaviour as every other light button. */
.tree-hero .btn-primary {
background: var(--tree-silver);
border-color: var(--tree-silver);
color: var(--tree-graphite);
}
.tree-hero .btn-primary:hover,
.tree-hero .btn-primary:focus-visible,
.tree-hero .btn-primary:active {
background: var(--tree-red-dark);
border-color: var(--tree-red-dark);
color: #ffffff;
}
/* ⚠ the dark-mode primary-hover rules are 0,4,0 and would otherwise turn this
button red on hover; these repeat the inversion at 0,5,0 */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tree-hero .btn-primary:hover,
:root:not([data-theme="light"]) .tree-hero .btn-primary:focus-visible,
:root:not([data-theme="light"]) .tree-hero .btn-primary:active {
background: var(--tree-red-dark);
border-color: var(--tree-red-dark);
color: #ffffff;
}
}
:root[data-theme="dark"] .tree-hero .btn-primary:hover,
:root[data-theme="dark"] .tree-hero .btn-primary:focus-visible,
:root[data-theme="dark"] .tree-hero .btn-primary:active {
background: var(--tree-red-dark);
border-color: var(--tree-red-dark);
color: #ffffff;
}
.tree-hero :focus-visible { outline-color: #fff; }
/* Photographs are damped in dark mode; a hero already carries a scrim, so it
is damped once, not twice. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tree-hero > .tree-hero__img { filter: brightness(.92); }
}
:root[data-theme="dark"] .tree-hero > .tree-hero__img { filter: brightness(.92); }
/* --------------------------------------------- cards as one clickable area
Bootstrap ships `.stretched-link` (an absolutely positioned ::after on the
link) and Cassiopeia includes it, so the whole card becomes the hit area
with one tab stop and a short accessible name — no JavaScript, and no
nesting of headings inside a giant anchor. The card only has to be a
containing block.
Revised 2026-09-12: the old hover — a silver wash — was too quiet to read
as "this whole box is a link". A hovered card now **fills**: the surface
takes the company red, everything on it turns white, and the card lifts.
Nobody can miss it.
⚙ One line switches the whole site between the two options that were on the
table: dark red (`--tree-fill`) or the dark silver (`--tree-graphite`).
Change `--tree-card-hover` below and every clickable box follows.
Contrast on the filled card: white on #570f07 is 13.4:1, white on #6f1009
(dark mode) is 12:1, white on #3f4445 is 9.6:1 — all far above the floor
for the 15 px body text inside. */
:root { --tree-card-hover: var(--tree-fill); } /* ← or var(--tree-graphite) */
.card:has(.stretched-link) {
position: relative;
transition: background-color .18s ease, border-color .18s ease,
translate .18s ease, box-shadow .18s ease;
}
.card:has(.stretched-link):hover,
.card:has(.stretched-link:focus-visible) {
background: var(--tree-card-hover);
translate: 0 -2px;
/* no inset ring here: that is what removes the line around the photograph */
box-shadow: 0 10px 26px rgb(0 0 0 / .22);
}
/* everything on the filled card, including what normally carries a colour */
.card:has(.stretched-link):hover :is(h2, h3, h4, p, li, span, a),
.card:has(.stretched-link:focus-visible) :is(h2, h3, h4, p, li, span, a) {
color: #ffffff;
}
/* ⚠ The card heading is a link, and `.container-component .card h3 a:hover`
(0,3,2) outranks the rule above (0,3,1) — which made the heading dark red
on a dark red card, i.e. invisible. Measured, then fixed with a selector
that carries the container class too. */
.container-component .card:has(.stretched-link):hover h3,
.container-component .card:has(.stretched-link):hover h3 a,
.container-component .card:has(.stretched-link:focus-visible) h3,
.container-component .card:has(.stretched-link:focus-visible) h3 a,
.container-component .card:has(.stretched-link):hover p,
.container-component .card:has(.stretched-link:focus-visible) p { color: #ffffff; }
/* the icon badge inverts with it: a translucent white pane, white glyph */
.card:has(.stretched-link):hover .tree-ico::before,
.card:has(.stretched-link:focus-visible) .tree-ico::before {
background: rgb(255 255 255 / .16);
color: #ffffff;
}
/* and so does a tick marker, if a clickable card ever carries a list */
.card:has(.stretched-link):hover .tree-feats > li::before,
.card:has(.stretched-link:focus-visible) .tree-feats > li::before {
color: #ffffff;
}
.card:has(.stretched-link):hover :is(.tree-price, h3.tree-tld),
.card:has(.stretched-link:focus-visible) :is(.tree-price, h3.tree-tld) { color: #ffffff; }
.card:has(.stretched-link):hover .tree-chips > li,
.card:has(.stretched-link:focus-visible) .tree-chips > li {
border-color: rgb(255 255 255 / .35);
background: transparent;
}
/* The photograph goes soft and steps back, so the words on top of the filled
card are the thing you read. The scale is 1.08 rather than 1.03 because a
blur samples past the edges of its own box: without the extra size the
blurred border of the image would show as a pale fringe inside the card. */
.card:has(.stretched-link) img { transition: scale .45s ease, filter .3s ease; }
.card:has(.stretched-link):hover img,
.card:has(.stretched-link:focus-visible) img {
scale: 1.08;
filter: blur(3px) saturate(.9);
}
/* Boxes that are **not** links do not react to the pointer. A hover state on
something you cannot click is a promise the page does not keep. */
/* the focus ring belongs around the whole card, not around the words */
.card:has(.stretched-link:focus-visible) {
outline: 3px solid var(--tree-accent);
outline-offset: 2px;
}
.card .stretched-link:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
.card:has(.stretched-link),
.card:has(.stretched-link) img { transition: none; translate: 0; }
.card:has(.stretched-link):hover img,
.card:has(.stretched-link:focus-visible) img { scale: 1.02; }
}
/* ------------------------------------------- a page that opens with a hero
Measured on staging: 310 px of empty space between the header and the top of
the hero — 56 px of container padding, 32 px on , 40 px on
`.item-page`, a 39 px breadcrumb row and a 91 px "Details" block. On a page
whose first element is a photograph none of that belongs there.
`:has()` scopes every rule to exactly that case, so ordinary pages keep
their breadcrumbs, their page heading and their spacing. Nothing is
hard-coded to a menu item, and switching the article back to a text opening
restores everything by itself. */
.container-component:has(.tree-hero:first-child) { padding-block-start: 0; }
.container-component:has(.tree-hero:first-child) > main { margin-top: 0; }
.com-content-article:has(> .com-content-article__body > .tree-hero:first-child) { padding-top: 0; }
/* Breadcrumbs and the article's metadata line are chrome for a subpage, not
for a landing page — and the duplicate page heading is an SEO defect next
to the hero's own
. All three can also be switched off in Joomla
(menu item → Page Display, Articles → Options, Breadcrumbs module
assignment); this only makes the hero layout correct without waiting for
that. */
.container-component:has(.tree-hero:first-child) .mod-breadcrumbs__wrapper { display: none; }
.container-component:has(.tree-hero:first-child) .page-header,
.com-content-article:has(> .com-content-article__body > .tree-hero:first-child) > .article-info,
.com-content-article:has(> .com-content-article__body > .tree-hero:first-child) > .icons { display: none; }
/* The hero then sits flush under the sticky header; the section after it keeps
the normal rhythm. */
.container-component:has(.tree-hero:first-child) .tree-hero:first-child { margin-block-start: 0; }
/* ------------------------------------------------------------ legal pages
Impressum and Datenschutz are dense reference documents, not landing
pages: the display-sized h2 of the marketing pages shouts, and a 62 ch
measure makes a 14-section document endless. Add `tree-legal` to a wrapper
div in the article body to get document typography instead. */
.tree-legal h2 {
font-size: 1.375rem;
letter-spacing: -0.015em;
line-height: 1.3;
margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.tree-legal h2 + p,
.tree-legal h2 + ul { margin-top: .75rem; }
.tree-legal p,
.tree-legal li { max-width: 74ch; }
.tree-legal p { margin-bottom: .75rem; }
.tree-legal ul { margin-top: .75rem; padding-left: 1.25rem; }
.tree-legal li { margin-bottom: .35rem; }
.tree-legal code {
font-size: .9375em;
padding: .1em .35em;
border-radius: 6px;
background: var(--tree-bg-alt);
}
.tree-legal a { color: var(--tree-link); }
/* ------------------------------------------- icons and visualisations
Joomla ships Font Awesome 6 Free self-hosted in
`media/vendor/fontawesome-free/webfonts/` and loads
`media/system/css/joomla-fontawesome.min.css` on every page, so a glyph
costs no extra request and no third-party connection. The editor on the
live site strips `