/* ========================================================================== EMEICH brand — content-layout classes for the emeich-* templates. Loaded last (asset priority 70, below custom.css's 80) so it overrides the theme defaults. Accent is the fixed EMEICH brand green; neutral borders and muted text use color-mix(currentColor) so they adapt to the theme's light/dark base color instead of hard-coding the source's dark palette. ========================================================================== */ :root { --emeich-accent: #3FA000; --emeich-accent-hover: #77BB41; --emeich-accent-active: #368A00; } /* -------------------------------------------------------------------------- Typography — matches the old static site (site.css): Geist 400 body + Roboto Slab headings, both self-hosted base64 in css/emeich-fonts.css. Must beat Pico's clamp() heading sizes: brand.css loads last, so equal specificity wins. -------------------------------------------------------------------------- */ body { font: 400 1rem/1.75 "Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing: antialiased; } h1, h2 { font-family: "Roboto Slab", Georgia, "Times New Roman", serif; } h1 { font-size: 2rem; font-weight: 600; line-height: 1.25; } h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; } h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.25; } /* -------------------------------------------------------------------------- Dark palette — old site's tokens mapped to the real quark2 var names (verified: quark2 has --q2-border-ring / --q2-border-strong / --q2-divider / --q2-nav-border, NOT a plain --q2-border). Dark is forced, so only the dark scope is overridden; light values are left as dead fallbacks. -------------------------------------------------------------------------- */ :root[data-theme=dark] { --q2-bg: #000000; --q2-bg-elev: #0A0A0A; --q2-bg-muted: #111111; --q2-border-ring: #1F1F1F; /* was --border */ --q2-divider: #1F1F1F; /* was --border */ --q2-nav-border: #1F1F1F; /* was --border */ --q2-border-strong: #333333; /* was --border-strong */ --q2-text: #D1D5DB; --q2-text-strong: #D1D5DB; --q2-text-muted: #757D88; color-scheme: dark; } /* Header + mobile-overlay logo: matches the old static site's .logo img (site.css: 9.375rem wide, native 567x128). */ .navbar-brand img, .mobile-logo img { display: block; width: 9.375rem; height: auto; aspect-ratio: 567 / 128; } /* Inner (non-home) pages: narrower centered column. The home uses its own container; .page composes with the theme's .container on desktop. */ .page { max-width: 60rem; margin-inline: auto; padding-top: 1rem; } .page > h1 { margin-top: 0; } /* Lede / intro paragraph under a page h1 */ .lede { color: color-mix(in oklab, currentColor 72%, transparent); max-width: 40rem; line-height: 1.6; margin: 0 0 2rem; } /* Section rhythm + titles. hadron.css gives .section a padding-block of clamp(2rem,6vw,4rem) which stacks on the 3rem margin below → neutralize it on EMEICH page content (#body-wrapper and any .section nested inside it) so only the margin rhythm applies. #header/#footer are .section too but live outside #body-wrapper and keep their own padding. */ .section { margin-block: 3rem; } #body-wrapper, #body-wrapper .section { padding-block: 0; } /* Site header: no vertical padding, 2rem horizontal (was inherited .section padding-block from quark2). Pin the padding in BOTH states: hadron.css has `body.scrolled #header { padding: 0.75rem 2rem }`, which shrank the header's height once `.scrolled` toggled. The header is sticky (in-flow), so the height change shifted the content below, nudging scrollY back across the `.scrolled` threshold, which re-toggled the class — an endless padding/height oscillation. Pinning the height constant breaks the feedback loop. Same specificity as hadron.css's rule, and brand.css (priority 70) loads after hadron.css (priority 90), so this wins in both states. */ body #header, body.scrolled #header { padding: 0 2rem; } .section-title { margin: 0 0 1rem; } /* Home "Latest" feed sits below the hero: larger top gap */ .latest-news { margin-top: 5rem; } /* -------------------------------------------------------------------------- News lists (home feed + news index) -------------------------------------------------------------------------- */ .news-list { list-style: none; margin: 0; padding: 0; } /* Home "Latest": two columns, fills column-by-column (1-3 left, 4-6 right) */ @media (min-width: 48rem) { .news-list.cols-2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 2rem; } } /* News index: full container width, category groups in a 2-column grid on desktop (col 1: llm-models + business stacked, col 2: hardware). DOM order is the mobile reading order (llm-models, business, hardware). */ .news-grid { display: grid; grid-template-columns: 1fr; column-gap: 2rem; } @media (min-width: 48rem) { .news-grid { grid-template-columns: 1fr 1fr; } .news-col .news-cat:first-of-type { margin-top: 2rem; } } /* .news-col is a bare grid item (no styles; mobile = 1 col, stacks by DOM order). */ .news-cat { margin-top: 4rem; } .news-col:first-child .news-cat:first-of-type { margin-top: 2rem; } .news-cat h2 { color: #000; background-color: var(--emeich-accent); display: inline-block; padding: 0 0.5rem; margin: 0 0 0.5rem; text-transform: uppercase; /* match .card h2 case */ } /* Two-row item: title link on row 1, date + category chip on row 2 */ .news-item { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 0.75rem; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent); } .news-item .news-title { display: block; line-height: 1.3; } .news-item a { color: inherit; text-decoration: none; } .news-item a:hover { color: var(--emeich-accent); text-decoration: underline; text-underline-offset: 3px; } .news-meta { display: inline-flex; align-items: center; gap: 0.5rem; } .news-date { color: color-mix(in oklab, currentColor 55%, transparent); font-size: 0.875rem; white-space: nowrap; } /* Scoped to news items: the base .chip (0.875rem) is reused elsewhere */ .news-item .news-date { font-size: 0.75rem; } .news-item .chip { font-size: 0.6rem; } /* Empty category (no articles yet) */ .news-list.is-empty { list-style: none; } /* Full-row clickable items — all four news-list locations: NEWS LANDING + CATEGORY LANDINGS + HOME "Latest" + ARTICLE PAGE "more news" (the article list is the last location added). .emeich-news-index is added to the .news-grid in emeich-news.html.twig, to the .news-list in emeich-category.html.twig, to the .news-list.cols-2 Latest list in emeich-home.html.twig, and to the "more news" .news-list in emeich-article.html.twig. Stretchy-link pattern: the title stays the only link (single tab stop, SEO unchanged) and its transparent ::after stretches the hit area over the whole row. ::after = part of the anchor, so cursor: pointer already covers the full row (no extra rule). The li position override wins over the later `.news-list li { position: static }` bullet exclusion on specificity (2 classes vs 1 class + 1 element). */ .emeich-news-index .news-item { position: relative; } .emeich-news-index .news-title::after { content: ""; position: absolute; inset: 0; } /* Hover ANYWHERE on the row → title gets the standard link-hover treatment (matches .news-item a:hover above; underline offset matches site convention) */ .emeich-news-index .news-item:hover .news-title { color: var(--emeich-accent); text-decoration: underline; text-underline-offset: 3px; } /* Category-list pager (prev/next + "Page X of Y"), rendered only when >1 page. flex-wrap = mobile-safe (links are short; no media query needed). Links get the .text-link treatment; color transition + reduced-motion guard come from the global `a, .cta` rule below. */ .news-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .news-pager-link { color: var(--emeich-accent); text-decoration: underline; text-underline-offset: 3px; border-radius: 0; /* brand rule: no rounded borders */ padding: 0.25rem 0.5rem; /* touch target */ } .news-pager-link:hover { color: var(--emeich-accent-hover); } .news-pager-pos { color: color-mix(in oklab, currentColor 55%, transparent); font-size: 0.875rem; /* matches .news-date muted style */ } /* -------------------------------------------------------------------------- Chips & badges -------------------------------------------------------------------------- */ .chip { display: inline-block; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); border-radius: 2px; padding: 0 0.5rem; font-size: 0.875rem; line-height: 1.75; color: color-mix(in oklab, currentColor 72%, transparent); white-space: nowrap; } /* -------------------------------------------------------------------------- Home hero — restored ORIGINAL EMEICH home intro (website/site.css, READ-ONLY). The

is .sr-only (visually hidden, kept for SEO/screen readers) and the two taglines are centered in a narrow centered column. Direct transcription — no color tokens. -------------------------------------------------------------------------- */ .hero-block { display: flex; flex-direction: column; margin-top: 2rem; max-width: 36.5rem; margin-inline: auto; text-align: center; } .hero-block p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- CTAs -------------------------------------------------------------------------- */ .cta { display: inline-block; background: var(--emeich-accent); color: #fff; font-weight: 300; font-size: 0.75rem; line-height: 1.25; padding: 0.625rem 1.25rem; border-radius: 2px; text-decoration: none; text-transform: uppercase; } .cta:hover { background: var(--emeich-accent-hover); } .cta:active { background: var(--emeich-accent-active); } /* Secondary (outlined) button: green border + white text, transparent fill; hover fills with the accent (old site.css .cta.secondary). */ .cta.secondary { background: transparent; border: 1px solid var(--emeich-accent); color: #fff; width: fit-content; } .cta.secondary:hover { background: var(--emeich-accent); } .cta.secondary:active { background: var(--emeich-accent-hover); } .cta-band { text-align: center; margin: 4rem 0 0 0; } .cta-band p { margin: 0 0 0.5rem; } /* -------------------------------------------------------------------------- Footer — restored ORIGINAL EMEICH footer (website/site.css, READ-ONLY). Two-row grid: row 1 logo / nav / locale toggle; row 2 tagline / email / copyright. Dark theme, no rounded borders. Old-site tokens mapped as in the rest of this file: --border #1F1F1F -> --q2-border-ring, --text-muted #757D88 -> --q2-text-muted, --text-1 #D1D5DB -> --q2-text, --text-2 #9CA3AF (no --q2-* equivalent) stays hex, --accent -> --emeich-accent. -------------------------------------------------------------------------- */ /* #footer keeps the .section class (layout grid); neutralize .section's margin/padding so the footer matches the original's own rhythm (4rem top gap, 1px top border, 2rem padding from .footer-grid). */ #footer.site-footer { margin-block: 4rem 0; padding-block: 0; border-top: 1px solid var(--q2-border-ring); border-radius: 0; } .footer-grid { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav toggle" "tagline email copy"; column-gap: 2rem; row-gap: 1rem; align-items: center; padding-block: 2rem; font-size: 0.875rem; } .footer-logo-link { grid-area: logo; display: inline-block; line-height: 0; /* Flush left within the logo grid area (grid items stretch by default). */ justify-self: start; text-align: start; } .footer-logo { width: 9.375rem; height: auto; aspect-ratio: 567 / 128; } .footer-tagline { grid-area: tagline; margin: 0; color: var(--q2-text-muted); font-size: 0.875rem; } .footer-nav { grid-area: nav; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; justify-self: center; font-size: 0.875rem; } .footer-nav a { color: #9CA3AF; text-decoration: none; } .footer-nav a:hover { color: var(--q2-text); text-decoration: underline; text-underline-offset: 3px; } /* Footer locale switcher: the SAME shared flags+codes partial as the header (partials/langauge-switcher.html.twig). Sized to the footer's 0.875rem rhythm, flush right in the "toggle" grid area. Current locale = accent + bold, aria-current, not a link; the other locale is a real link. */ .footer-toggle { grid-area: toggle; justify-self: end; } .footer .language-switcher { display: inline-flex; align-items: center; font-size: 0.875rem; } .footer .language-switcher .lang-entry { font-size: 0.875rem; min-height: 1.375rem; color: var(--q2-text-muted); } .footer .language-switcher a.lang-entry:hover .lang-code, .footer .language-switcher a.lang-entry:focus-visible .lang-code { color: #9CA3AF; } /* Override the header's opacity-dim: footer current locale is accent + bold. */ .footer .language-switcher .lang-item.current .lang-entry { opacity: 1; } .footer .language-switcher .lang-item.current .lang-code { color: var(--emeich-accent); font-weight: 700; } .footer-email-wrap { grid-area: email; display: flex; justify-content: center; } .footer-email { color: var(--emeich-accent); text-decoration: none; } .footer-email:hover { color: var(--emeich-accent-hover); text-decoration: underline; text-underline-offset: 3px; } .footer-copy { grid-area: copy; margin: 0; color: var(--q2-text-muted); text-align: end; /* Explicit: a global .section p rule would otherwise override the 0.875rem inherited from .footer-grid. */ font-size: 0.875rem; } /* Mobile (<=47.99rem): one left-aligned stacked column, original order. */ @media (max-width: 47.99rem) { .footer-grid { grid-template-columns: 1fr; grid-template-areas: "logo" "nav" "toggle" "tagline" "email" "copy"; align-items: start; } .footer-nav { justify-self: stretch; } .footer-email-wrap { justify-content: flex-start; } .footer-toggle { justify-self: start; } .footer-copy { text-align: start; } } /* Owner spec: footer paragraphs left-aligned on mobile ONLY (theme's mobile breakpoint, same 860px used by hadron.css/theme.css). Desktop alignment stays as-is. brand.css loads last, so plain load-order wins. */ @media (max-width: 860px) { #footer p { text-align: left; } } /* Motion: color transitions only, <=150ms, guarded for reduced-motion */ a, .cta { transition: color 0.15s, background-color 0.15s; } @media (prefers-reduced-motion: reduce) { a, .cta { transition: none; } } /* -------------------------------------------------------------------------- Project cards (projects page, template: emeich-projects) Original-faithful port of the old static site's project-card rules (website/site.css, READ-ONLY). The old site was already dark, so its hex values transfer directly; where a --q2-* dark var holds the identical value we use that instead (--q2-border-ring = #1F1F1F = old --border, --q2-border-strong = #333333 = old --border-strong, --q2-text-muted = #757D88 = old --text-muted; old --text-2 = #9CA3AF has no --q2-* equivalent and stays as hex). Green accent uses --emeich-accent (#3FA000 = old --accent), NOT the theme's --q2-accent (neutral #242424). Brand rule: NO rounded borders, so the original's 2px radii are 0. -------------------------------------------------------------------------- */ /* Projects page: 2 columns on desktop (featured cards first in DOM), single stacked column below 48rem */ .projects-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 48rem) { .projects-grid { grid-template-columns: 1fr 1fr; } } .projects-grid .card { margin-block: 0; } /* grid gap handles the rhythm */ /* Home "What we do": 2×2 on desktop, single column mobile — same grid conventions as .projects-grid. Reuses the brand .card (transparent/square). */ .what-we-do { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 48rem) { .what-we-do { grid-template-columns: 1fr 1fr; } } .what-we-do .card { margin-block: 0; } /* grid gap handles the rhythm */ /* Home "Why EMEICH" story section (old site site.css). */ .prose { max-width: 60rem; } #why-emeich .prose { max-width: none; } /* home story runs full container width */ .see-what-we-build { margin: 0.5rem 0 0; } /* Card: no elevated fill — page background shows through — 1px border, no rounding. (Original background: var(--surface) #0A0A0A and the .card:hover fill are dropped per brand.) */ .card { background: transparent; border: 1px solid var(--q2-border-ring); border-radius: 0; padding: 1.5rem; margin-block: 1rem; } /* Top row: category chip + Featured badge, right-aligned */ .card-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } /* Chip + Featured badge: original site.css values; 2px radius -> 0. Scoped to .card so .chip usages outside cards keep their own treatment. */ .card .chip { display: inline-block; border: 1px solid var(--q2-border-strong); border-radius: 0; padding: 0 0.5rem; font-size: 0.875rem; line-height: 1.75; color: #9CA3AF; white-space: nowrap; } .card .badge-featured { display: inline-block; background: var(--emeich-accent); color: #000; border-radius: 0; padding: 0 0.5rem; font-size: 0.75rem; font-weight: lighter; line-height: 2; text-transform: uppercase; } .card h2, .card h3 { margin: 0 0 0.25rem; } /* project cards title as h2; home cards keep h3 */ .card h2 { background-color: var(--emeich-accent); color: #000; display: inline; text-transform: uppercase; } /* Neutralize quark2's global h2 accent bar (h2::before, theme.css) site-wide. */ h2::before { content: none; } .card h3 { text-transform: uppercase; font-family: "Roboto Slab", Georgia, "Times New Roman", serif; } .card-tagline { margin: 0 0 1rem; color: #9CA3AF; line-height: 1.25rem; } .card h4 { margin: 1.25rem 0 0.5rem; font-family: "Roboto Slab", Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #FFFFFF; } /* What-you-get bullets with a leading bullet marker */ .bullets { list-style: none; margin: 0 0 1rem; padding: 0; } .bullets li { padding-left: 1.25rem; position: relative; margin-block: 0.375rem; } .bullets li::before { content: "\2022 "; /* CSS-escaped bullet (U+2022): ASCII-only bytes */ position: absolute; left: 0; color: var(--q2-text-muted); } /* -------------------------------------------------------------------------- Default