/**
* Beregn Handling .Nu — Fluid Typography System
* ------------------------------------------------
* Drop this into: themes/custom/rethink/css/typography.css
* Load it AFTER themes/contrib/bootstrap_barrio/fonts/monserrat_lato.css
* (see loading instructions at the bottom of this file).
*
* Why this file exists:
* Font families are currently set in the CONTRIB theme
* (bootstrap_barrio/fonts/monserrat_lato.css) — don't edit that file,
* a theme update can overwrite it. All heading/body sizes today are
* ad hoc, one-off rules scattered across style.css (h1.brand-h1,
* .item h2, .report_list h2/h3, etc.) with no shared scale and no
* responsive sizing. This file replaces that with one fluid scale,
* driven by CSS custom properties, that scales smoothly between a
* 375px (small phone) and 1440px (desktop) viewport — no breakpoint
* jumps, no duplicate media queries per component.
*
* Font pairing:
* h1, h2, h3 -> Roboto Slab (from the Adobe Fonts kit already
* loaded in ; weights 400/700 available)
* h4, h5, h6 -> Montserrat (unchanged, this is what the site
* already used for all headings — not mentioned in
* the new pairing, so left as-is; say the word if
* you'd rather these move to Roboto Slab too)
* body copy -> Open Sans (also now in the same Adobe Fonts kit —
* 300/400/500/600/700/800, normal + italic all
* available. No extra font loading needed, it rides
* in on the already in .)
*
* Scale used (min px @375 -> max px @1440):
* small 14->15 | body 16->18 | lead 19->22
* h6 18->20 | h5 20->24 | h4 24->30 | h3 29->38 | h2 35->48 | h1 42->60
*
* Tune the whole scale by editing the --fs-* values below. Everything
* else (h1-h6, body, .lead, small) reads from them, so one edit
* updates the entire site consistently.
*/
:root {
/* Font families */
--font-heading-slab: "roboto-slab", serif; /* h1-h3, from the Adobe kit (400/700 only, no italic) */
--font-heading: Montserrat, sans-serif; /* h4-h6, unchanged */
--font-body: "open-sans", arial, sans-serif; /* body copy, from the Adobe kit — lowercase family name, matches roboto-slab's naming */
/* Fluid font-size scale, clamp(min, preferred, max) */
--fs-small: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem); /* 14px -> 15px */
--fs-body: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* 16px -> 18px */
--fs-lead: clamp(1.1875rem, 1.1215rem + 0.282vw, 1.375rem); /* 19px -> 22px */
--fs-h6: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18px -> 20px */
--fs-h5: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20px -> 24px */
--fs-h4: clamp(1.5rem, 1.368rem + 0.563vw, 1.875rem); /* 24px -> 30px */
--fs-h3: clamp(1.8125rem, 1.6144rem + 0.845vw, 2.375rem); /* 29px -> 38px */
--fs-h2: clamp(2.1875rem, 1.9014rem + 1.221vw, 3rem); /* 35px -> 48px */
--fs-h1: clamp(2.625rem, 2.2289rem + 1.690vw, 3.75rem); /* 42px -> 60px */
/* Line-heights: tighter for large display type, roomier for body copy */
--lh-heading: 1.15;
--lh-body: 1.6;
/* Nav link tokens (main menu + user menu both read from these) */
--nav-font-size: 0.8rem;
--nav-font-weight: 700;
--nav-text-transform: uppercase;
--nav-letter-spacing: normal;
--nav-color: #555;
--nav-color-hover: #000;
--nav-padding: 0 1rem;
/* Plain in-content link tokens */
--link-color: rgb(143, 54, 57);
--link-color-hover: rgb(47, 72, 88);
/* H2 variant — smaller, e.g. card/grid titles like .item h2 */
--fs-h2-sm: 1.6rem;
--lh-h2-sm: 0.9;
/* Button tokens (the yellow CTA style — "Læs mere", "Tilmeld dig") */
--btn-bg: rgb(224, 219, 89);
--btn-color: var(--bs-black, #000);
--btn-font-size: 0.875rem;
--btn-font-weight: 700;
--btn-radius: 2px;
--btn-padding: 8px 16px 8px 2.5rem;
}
/* Set once on the wrapper itself — font-family/size/line-height are
inherited properties, so every real element inside (p, li, a, div,
span, ...) picks this up automatically without needing to list
every tag, and nothing outside the wrapper (the toolbar) is touched. */
.dialog-off-canvas-main-canvas {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.dialog-off-canvas-main-canvas :is(small, .small) {
font-size: var(--fs-small);
}
.dialog-off-canvas-main-canvas .lead {
font-size: var(--fs-lead);
line-height: var(--lh-body);
}
.dialog-off-canvas-main-canvas :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
font-weight: 700;
line-height: var(--lh-heading);
margin-bottom: 0.5em;
}
.dialog-off-canvas-main-canvas :is(h1, .h1, h2, .h2, h3, .h3) {
font-family: var(--font-heading-slab);
}
.dialog-off-canvas-main-canvas :is(h4, .h4, h5, .h5, h6, .h6) {
font-family: var(--font-heading);
}
.dialog-off-canvas-main-canvas :is(h1, .h1) { font-size: var(--fs-h1); line-height: 0.9; }
.dialog-off-canvas-main-canvas :is(h2, .h2) { font-size: var(--fs-h2); }
.dialog-off-canvas-main-canvas :is(h3, .h3) { font-size: var(--fs-h3); }
.dialog-off-canvas-main-canvas :is(h4, .h4) { font-size: var(--fs-h4); }
.dialog-off-canvas-main-canvas :is(h5, .h5) { font-size: var(--fs-h5); }
.dialog-off-canvas-main-canvas :is(h6, .h6) { font-size: var(--fs-h6); }
.dialog-off-canvas-main-canvas .item h2 {
font-size: var(--fs-h2-sm);
line-height: var(--lh-h2-sm);
padding: 0 1rem;
}
@media (min-width: 1024px) and (max-width: 1366px) {
.dialog-off-canvas-main-canvas,
.dialog-off-canvas-main-canvas :is(p, a, li) {
font-size: 1rem;
}
.dialog-off-canvas-main-canvas :is(h2, .h2) {
font-size: 1.8rem;
}
}
/* ============================================================
* NAVIGATION & INTERACTIVE ELEMENTS
* ============================================================ */
/* --- Main menu — #block-rethink-main-menu ---
(CO2-BEREGNING, THEATRE GREEN BOOK, THE GREEN LOG, ...) */
.dialog-off-canvas-main-canvas #block-rethink-main-menu .nav-link {
font-size: var(--nav-font-size);
font-weight: var(--nav-font-weight);
text-transform: var(--nav-text-transform);
letter-spacing: var(--nav-letter-spacing);
color: var(--nav-color);
padding: var(--nav-padding);
}
.dialog-off-canvas-main-canvas #block-rethink-main-menu .nav-link:hover,
.dialog-off-canvas-main-canvas #block-rethink-main-menu .nav-link:active {
color: var(--nav-color-hover);
}
/* --- User menu — #block-rethink-account-menu ---
(Min side / Log ud) */
.dialog-off-canvas-main-canvas #block-rethink-account-menu .nav-link {
font-size: var(--nav-font-size);
font-weight: var(--nav-font-weight);
text-transform: var(--nav-text-transform);
letter-spacing: var(--nav-letter-spacing);
color: var(--nav-color);
padding: var(--nav-padding);
}
.dialog-off-canvas-main-canvas #block-rethink-account-menu .nav-link:hover,
.dialog-off-canvas-main-canvas #block-rethink-account-menu .nav-link:active {
color: var(--nav-color-hover);
}
/* --- Buttons ---
(the yellow CTA style — a.brand-button, .btn-primary) */
.dialog-off-canvas-main-canvas :is(a.brand-button, a.btn-primary, button.btn-primary) {
background-color: var(--btn-bg);
background-image: url("/sites/default/files/2023-03/icon_arrow.png");
background-position: 0.4rem 0.25rem;
background-size: 2rem;
background-repeat: no-repeat;
color: var(--btn-color);
border: none;
border-radius: var(--btn-radius);
padding: var(--btn-padding);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
margin-top: 2rem;
}
/* --- Links ---
(plain in-content tags — article copy, footer, etc.) */
.dialog-off-canvas-main-canvas a {
color: var(--link-color);
}
.dialog-off-canvas-main-canvas a:hover,
.dialog-off-canvas-main-canvas a:focus {
color: var(--link-color-hover);
}
/**
* How to load this file (Drupal library, same pattern as the Adobe
* Fonts kit). Both Roboto Slab and Open Sans now come from that one
* kit link already in — no separate font loading needed here,
* just this stylesheet:
*
* In themes/custom/rethink/rethink.libraries.yml, add:
*
* typography:
* css:
* theme:
* css/typography.css: {}
*
* In themes/custom/rethink/rethink.info.yml, make sure it's in the
* global libraries list, AFTER bootstrap_barrio's own CSS so these
* rules win the cascade:
*
* libraries:
* - rethink/typography
*
* Then clear cache (drush cr) so Drupal picks up the new library and
* regenerates the aggregated CSS.
*
* Once this is in and confirmed working, the scattered per-component
* font-size overrides in style.css (h1.brand-h1, .item h2,
* .report_list h2/h3, etc.) are good candidates to fold into this
* scale or trim down — happy to help with that pass once you've
* seen this render on the live site.
*/