/* ============================================================================ Avtalskrav theme for Forgejo ---------------------------------------------------------------------------- Matches the avtalskrav.se brand (see avtalskrav.css): emerald accent on a slate/white base, Inter body + Space Grotesk headings, soft rounding. Scoping: Forgejo 11 loads ONLY the active theme's stylesheet and sets . The built-in light theme defines ~150 CSS tokens under :root; we IMPORT those first (exactly as theme-forgejo-auto.css does, by relative URL served from /assets/css/) so EVERY token is defined, then override only the brand-relevant ones below. An earlier version redefined just ~25 tokens and dropped the rest, leaving e.g. --color-menu and --color-hover undefined: transparent dropdowns and white-on-white hover buttons. Importing the full base fixes that. Activated via DEFAULT_THEME. (Inter + Space Grotesk are self-hosted under /assets/fonts/ - no external CDN.) Copied from avtalskrav/comms (the brand source of truth) for ak-git; keep the two in sync. Only the stable custom hooks are ported here: home.tmpl is NOT (ak-git lands on /user/login), so section 5 (.av-home/.av-hero/.av-cards) is inert on this instance. Re-verify token names against the built-in themes on Forgejo MAJOR upgrades (written against 11, deployed on 15). ============================================================================ */ /* Complete token base: import the built-in light + dark themes (relative URLs, served alongside this file at /assets/css/). Brand overrides come AFTER, so they win the cascade; everything we do not override stays correctly defined. */ @import "theme-forgejo-light.css"; @import "theme-forgejo-dark.css" (prefers-color-scheme: dark); @import url("/assets/fonts/fonts.css"); /* 1. Brand tokens (from avtalskrav.css). ------------------------------------- */ :root { --brand-primary: #2f9e6e; /* emerald HSL(152 45% 45%), links / primary */ --brand-accent: #34d399; /* vivid emerald, highlights / active */ --brand-ink: #12151c; /* near-black slate (220 15% 8%), nav / dark */ --brand-paper: #ffffff; /* light surface */ --brand-radius: 8px; /* 0.5rem, the site's --radius */ --brand-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --brand-font-heading: "Space Grotesk", var(--brand-font); } /* 2. Map brand tokens onto Forgejo's variables (light). --------------------- */ :root { --color-primary: var(--brand-primary); --color-primary-contrast: #ffffff; --color-primary-dark-1: color-mix(in oklab, var(--brand-primary) 88%, black); --color-primary-dark-2: color-mix(in oklab, var(--brand-primary) 76%, black); --color-primary-light-1: color-mix(in oklab, var(--brand-primary) 85%, white); --color-primary-light-2: color-mix(in oklab, var(--brand-primary) 70%, white); --color-primary-light-4: color-mix(in oklab, var(--brand-primary) 40%, white); --color-primary-light-6: color-mix(in oklab, var(--brand-primary) 18%, white); --color-primary-light-7: color-mix(in oklab, var(--brand-primary) 10%, white); --color-primary-alpha-30: color-mix(in oklab, var(--brand-primary) 30%, transparent); --color-accent: var(--brand-accent); --color-secondary: color-mix(in oklab, var(--brand-ink) 12%, white); --color-body: #f6f8fc; --color-box-body: var(--brand-paper); --color-text: #1b2436; --color-text-light: #4a566b; --color-nav-bg: var(--brand-ink); --color-nav-text: #eaf0ff; /* The dark header needs its own hover: the base theme's --color-nav-hover-bg is a light grey (--zinc-300) that clashes on near-black. Use a subtle white overlay so hover reads as a gentle lift, the same convention Forgejo uses on its own dark surfaces (console hover is #ffffff16). */ --color-nav-hover-bg: #ffffff1a; font-family: var(--brand-font); } /* 3. Dark mode derives from the same tokens. -------------------------------- */ @media (prefers-color-scheme: dark) { :root { --color-body: #0b1120; --color-box-body: #121a2b; --color-text: #e6ecf7; --color-text-light: #9fb0cc; --color-primary: color-mix(in oklab, var(--brand-primary) 70%, white); --color-nav-bg: #0a0f1c; } } /* 4. Modern touches kept at low specificity with :where(). ------------------ */ /* Space Grotesk on headings + brand wordmark, like the site. */ :where(h1, h2, h3, .ui.header, .repo-title, .project-title, .navbar .brand) { font-family: var(--brand-font-heading); letter-spacing: -0.01em; } :where(.ui.button) { border-radius: var(--brand-radius); font-weight: 600; letter-spacing: 0.1px; transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease; } :where(.ui.primary.button):hover { box-shadow: 0 6px 18px var(--color-primary-alpha-30); transform: translateY(-1px); } :where(.ui.segment, .repository .header-wrapper, .ui.card, .ui.attached.segment) { border-radius: var(--brand-radius); } /* A thin brand bar under the top navigation for a polished, owned feel. */ :where(.full.height > .following.bar, .secondary-nav) { box-shadow: inset 0 -2px 0 0 var(--color-accent); } /* Links pick up the accent on hover without shouting. */ :where(a):where(:hover) { color: var(--color-accent); } /* Selected / hovered top-level nav items on the dark bar. The base fills the active and hover state with a light grey (--color-active / --color-hover) meant for a light nav; on our near-black header that grey hides the light text (white on white). Use a subtle translucent overlay instead, keep the text light, and mark the current page with an accent underline (the base sets box-shadow:none on secondary-menu items, so this needs !important to show). Direct children only, so opened dropdown popovers stay untouched. */ #navbar .navbar-left > .item:hover, #navbar .navbar-left > .item:focus, #navbar .navbar-right > .item:hover, #navbar .navbar-right > .item:focus, #navbar .navbar-left > details.dropdown > summary:hover, #navbar .navbar-right > details.dropdown > summary:hover, #navbar .navbar-right > details.dropdown[open] > summary { background: var(--color-nav-hover-bg) !important; color: var(--color-nav-text) !important; } #navbar .navbar-left > .active.item, #navbar .navbar-right > .active.item { background: var(--color-nav-hover-bg) !important; color: var(--color-nav-text) !important; box-shadow: inset 0 -2px 0 0 var(--color-accent) !important; } /* Navbar text color. Forgejo 15 defines no --color-nav-text token; the base .ui.secondary.menu items carry no explicit color and inherit the dark --color-text, which washes out on our near-black nav. Repaint only the TOP-LEVEL bar items light, with direct-child selectors so the opened dropdown popovers (their own .menu .item already forced dark on a light surface by the base's own !important) are left untouched. !important is needed because the base colours these via a rule that wins the cascade in practice; verified on the running 15.0.5 instance with a headless render. */ #navbar .navbar-left > .item, #navbar .navbar-right > .item, #navbar .navbar-left > details.dropdown > summary, #navbar .navbar-right > details.dropdown > summary, #navbar #navbar-logo { color: var(--color-nav-text) !important; } /* 5. Branded landing page (templates/home.tmpl). ---------------------------- */ .av-home { max-width: 960px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; } .av-hero { text-align: center; margin-bottom: 3rem; } .av-hero-logo { margin: 0 auto 1.25rem; display: block; } .av-hero-title { font-family: var(--brand-font-heading); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .5rem; color: var(--color-text); } .av-hero-tagline { color: var(--color-text-light); font-size: 1.15rem; max-width: 34rem; margin: 0 auto 1.75rem; line-height: 1.55; } .av-hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } .av-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 720px) { .av-cards { grid-template-columns: 1fr; } } .av-card { background: var(--color-box-body); border: 1px solid var(--color-secondary); border-radius: var(--brand-radius); padding: 1.5rem; text-align: left; transition: transform .08s ease, box-shadow .12s ease; } .av-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-primary-alpha-30); } .av-card-icon { color: var(--color-primary); margin-bottom: .6rem; line-height: 1; } .av-card h3 { font-family: var(--brand-font-heading); font-size: 1.05rem; margin: 0 0 .35rem; color: var(--color-text); } .av-card p { color: var(--color-text-light); font-size: .92rem; line-height: 1.55; margin: 0; } /* 6. Footer brand link (templates/custom/extra_links_footer.tmpl). ----------- */ /* Injected inside the footer's right-links, next to Licenses/API, so the company reads as part of the footer instead of an orphan block below it. Inherits the footer link style; picks up the accent on hover like the rest. */ .page-footer .right-links a[href*="avtalskrav.se"]:hover { color: var(--color-accent); }