/*
Theme Name: Connect Bus (Astra Child)
Template: astra
Version: 1.0.0
Description: Connect Bus LMS Pro portal child theme. Tokens fra design/tokens.css er kanonisk.
*/
:root {
/* Color — 5 av 5 mulige (disiplin > kvote) */
--color-ink: #002730; /* = offisiell Dusk. Tekst, headinger, footer-bg, logo */
--color-surface: #FFFFFF; /* = offisiell White. Sidebakgrunn + kort */
--color-mist: #D1D7DF; /* = offisiell Breeze. Alt-seksjoner + borders */
--color-accent: #F6FF7D; /* = offisiell Reflex. KUN knapper/CTA — aldri tekst på hvit */
--color-sand: #CDC6B9; /* = offisiell Sand. Sekundær varm bakgrunn. Aldri stablet på mist. */
/* Type — offisiell to-font-system (Frontify-manualen) */
--font-display: 'Klarheit Kurrent', Arial, sans-serif; /* offisiell fallback er Arial per manualen */
--font-body: 'Matter', Arial, sans-serif; /* offisiell fallback er Arial per manualen */
--font: var(--font-body); /* kompat-alias — design-reference.html/index.html refererer var(--font) direkte, se DESIGN.md ## Endringer */
/* Space */
--sp-sm: 0.5rem;
--sp-md: 1rem;
--sp-lg: 1.5rem;
--sp-xl: 3rem;
/* Radius — pill på interaktivt, skarpt på flater (som connectbus.no) */
--r-card: 0;
--r-pill: 9999px;
/* Shadow — brandet bruker ingen; 1px mist-border gjør jobben */
--shadow: none;
}
@font-face {
font-family: 'Klarheit Kurrent';
src: url('fonts/ESKlarheitKurrent-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Matter';
src: url('fonts/Matter-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body { font-family: var(--font-body); color: var(--color-ink); }
h1, h2 { font-family: var(--font-display); font-weight: 500; }
h1 { line-height: 1.08; }
h2 { line-height: 1.15; }
h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 500; }
/* ==========================================================================
Component CSS — Connect Bus front page + header/footer/user-menu
Source: design/design-reference.html §6 (build-spec.md), values kept
verbatim. @font-face is already declared above (fonts/*.woff2, not
assets/fonts/* as the parfil comment implies — path adjusted here since
the woff2 files were already converted + placed by the base-setup agent).
========================================================================== */
/* ---------- Base additions (font-family/color already set above) ---------- */
body { font-weight: 400; background: var(--color-surface); -webkit-font-smoothing: antialiased; }
/* NB: h3,h4,h5,h6 keep the existing font-weight:500 base rule above (basis-
agent decision, site-wide). The parfil's "h3 { font-weight: 400 }" intent
is still honored on the front page because .course-title sets
font-weight:400 with higher specificity (class+element beats element). */
/* Type scale — fluid clamp(), 4 levels: H1 / H2 / body / small */
.h1 { font-size: clamp(2.5rem, 4.2vw + 1rem, 4.25rem); line-height: 1.08; }
.h2 { font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.25rem); line-height: 1.15; }
.body-lg { font-size: clamp(1.1875rem, 0.4vw + 1.1rem, 1.3125rem); line-height: 1.5; }
.small { font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ---------- Scoped reset ----------
The parfil's global reset (ul list-style, img display:block, a color:
inherit, h1/h2/h3/p margin:0) would collide with Astra/plugin markup
elsewhere (course archive lists, admin-rendered content, etc.), so it is
scoped to the header, footer and front-page sections only — the only
places this markup is used. box-sizing/margin/padding resets below are
left global since they only normalize UA defaults and are safe site-wide. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.site-header a,
.site-footer a,
.hero a,
.bg-mist a,
.bg-surface a { color: inherit; }
.site-header ul,
.site-footer ul,
.hero ul,
.bg-mist ul,
.bg-surface ul { margin: 0; padding: 0; list-style: none; }
.site-header h1, .site-header h2, .site-header h3, .site-header p,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer p,
.hero h1, .hero h2, .hero h3, .hero p,
.bg-mist h1, .bg-mist h2, .bg-mist h3, .bg-mist p,
.bg-surface h1, .bg-surface h2, .bg-surface h3, .bg-surface p { margin: 0; }
.site-header img,
.site-footer img,
.hero img,
.bg-mist img,
.bg-surface img { max-width: 100%; display: block; }
/* ---------- Skip link ----------
Astra already renders its own skip-link (header.php: ), so it is styled in place here
instead of adding a second one (see functions.php for the Norwegian
string override). It also carries the "screen-reader-text" class, whose
clip/width/height hiding must be reset here so the accent-pill focus
style is actually visible. */
.skip-link {
position: absolute;
top: -100px;
left: var(--sp-md);
z-index: 100;
background: var(--color-accent);
color: var(--color-ink);
padding: var(--sp-sm) var(--sp-lg);
border-radius: var(--r-pill);
font-weight: 500;
text-decoration: none;
transition: top 0.15s ease;
clip: auto;
width: auto;
height: auto;
overflow: visible;
white-space: nowrap;
}
.skip-link:focus { top: var(--sp-md); }
/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* ---------- Layout helpers ---------- */
.wrap {
max-width: 1200px;
margin: 0 auto;
padding-left: var(--sp-lg);
padding-right: var(--sp-lg);
}
section { padding: var(--sp-xl) 0; }
.bg-mist { background: var(--color-mist); }
.bg-surface { background: var(--color-surface); }
.bg-ink { background: var(--color-ink); color: var(--color-surface); }
/* ---------- Pills (CTA buttons — reserved for real actions) ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: var(--sp-sm);
border-radius: var(--r-pill);
background: var(--color-accent);
color: var(--color-ink);
font-weight: 500;
font-size: 0.9375rem;
text-decoration: none;
white-space: nowrap;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.pill:hover { background: var(--color-ink); color: var(--color-accent); }
.pill--cta,
.mk-user-menu__login { padding: var(--sp-sm) var(--sp-lg); }
.pill--sm { padding: 0.4rem var(--sp-md); font-size: 0.875rem; }
/* NB: 0.4rem er utenfor spacing-skalaen (sm/md/lg/xl) — arvet bevisst fra
godkjent prototype, ikke en feil. Se DESIGN.md ## Endringer. */
/* ---------- Nav links (plain text, pill only on hover/active) ---------- */
.nav-link {
display: inline-flex;
align-items: center;
padding: var(--sp-sm) var(--sp-lg);
border-radius: var(--r-pill);
background: transparent;
color: var(--color-ink);
font-weight: 500;
font-size: 0.9375rem;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"] { background: var(--color-accent); }
/* Kurskatalog active-state — the header HTML element is static, so
aria-current can't be set server-side per build-decisions.md §3; the
accepted realization is a body-class rule on the courses archive
(verified body class: post-type-archive-scorm_package). */
body.post-type-archive-scorm_package .nav-link--kurskatalog { background: var(--color-accent); }
/* ---------- Header ---------- */
.site-header {
background: var(--color-surface);
border-bottom: 1px solid var(--color-mist);
}
/* Astra's own dynamic CSS sets .ast-primary-header-bar background to
var(--ast-global-color-primary) (= mist token, wrong per spec) and its
border-bottom-color to var(--ast-global-color-subtle-background) (= ink
token) — inspected in the rendered inline stylesheet. Both are
single-class selectors; overriding them with a 2-class selector here wins
on specificity without !important. Covers desktop + mobile header rows
(both use the same .ast-primary-header-bar class). */
.site-header .ast-primary-header-bar {
background-color: var(--color-surface);
border-bottom-color: var(--color-mist);
}
/* The parfil's ".site-header .wrap { display:flex; justify-content:
space-between; ... }" has no real match in Astra's builder DOM — there is
no element with class="wrap" inside the header. Astra's own row wrapper
(.ast-builder-grid-row, inside .site-primary-header-wrap) already renders
at max-width:1200px with the logo/nav split handled by its own grid-area
system (verified in the rendered inline CSS + DOM), so that part needs no
override. What DID differ from spec: Astra defaults the row to a fixed
min-height:80px instead of sizing to content + var(--sp-md) padding —
overridden below on the real wrapper class, covering desktop + mobile
(both rows share .site-primary-header-wrap). */
.site-header .site-primary-header-wrap {
min-height: 0;
padding-top: var(--sp-md);
padding-bottom: var(--sp-md);
}
.logo-link { display: inline-flex; }
.logo-link img { height: 26px; width: auto; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); }
/* ---------- User menu (mirrors [mentorkit_user_menu] shortcode DOM) ---------- */
/* DOM-klassene mk-user-menu* kommer FRA PLUGINEN, ikke fra oss — verifisert
mot faktisk rendret markup (do_shortcode via Astra HTML-element) før disse
reglene ble tatt i bruk. Avvik fra parfilens antatte markup, dokumentert:
- Guest-lenken