@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap"); /* ============================================================ Hotline UGC docs, Forest + Citron. The palette and the two faces are the marketing site's, taken from its `.theme-forest` block rather than sampled from a screenshot, so the docs and hotlineugc.com cannot drift apart. forest #143d2b the ink, and the accent citron #dce962 the label on a forest field surface #fbfcec the page deep #0c281c the darker green, for the dark theme's field muted #49604e supporting copy Contrast, as computed on the site: forest on surface 11.7:1 citron on forest 10.1:1 forest at .68 on surface 4.5:1, passes AA for body text This re-points the THEME's own variables rather than styling its elements. The names below were read off the deployed site, where every surface resolves through `--background`, `--card`, `--border` and the sidebar group, so one declaration re-skins the navbar, the sidebar, cards, tables and popovers together. Styling the elements instead would mean matching class names that are not ours, and missing whichever ones we had not seen. The theme's dark switch is a class on , verified live, and the `[data-theme]` and prefers-color-scheme variants below are there in case that changes. A selector that never matches costs nothing. Deliberately left alone: the note, alert, success and error colours, which carry meaning rather than brand. Turning them green would take a warning callout and a success callout and make them the same thing. `--font-mono` is left alone too, because these pages carry shell commands and scope tables that need the alignment. One departure from the site: it sets letter-spacing -0.02em on headings and this does not, per the house rule that type ships at default tracking. ============================================================ */ :root, :root.light, :root[data-theme="light"] { --hl-forest: #143d2b; --hl-citron: #dce962; --hl-surface: #fbfcec; --hl-deep: #0c281c; --hl-muted: #49604e; --hl-sans: "Figtree", system-ui, -apple-system, sans-serif; --hl-heading: "Manrope", system-ui, -apple-system, sans-serif; /* Surfaces. The atlas template floats a rounded content card on a surrounding gutter: the card reads `--background`, the gutter, the sidebar and the navbar read `--sidebar`. The two sit one step apart rather than in contrast, which is as much separation as a flat brand wants. `--card` tracks `--background` rather than lifting off it, and that is load bearing. The previous/next links at the foot of each page are `bg-card` with square corners, no border and a box sized to their text, so a card colour that differs from the page draws a hard-edged rectangle around each one. */ --background: #fbfcec; --content-bg: #fbfcec; --card: #fbfcec; --popover: #fbfcec; --primary: #fbfcec; /* The gutter the card sits on: forest at 4% over the surface. */ --sidebar: #f2f4e4; --sidebar-bg: #f2f4e4; --navbar-bg: #f2f4e4; --sidebar-primary: #f2f4e4; /* Text. `--body`, `--heading` and `--brand` also come from documentation.json; repeated here so the file reads as one palette rather than half a palette. */ --body: #143d2b; --foreground: #143d2b; --heading: #143d2b; --link: #143d2b; --sub-text: #49604e; --toc-text: #49604e; --toc-active-text: #143d2b; --sidebar-foreground: rgba(20, 61, 43, 0.68); --sidebar-accent-foreground: #143d2b; --sidebar-primary-foreground: #143d2b; /* The kit's primary button is a forest field with a citron label. */ --brand: #143d2b; --brand-text: #dce962; /* Hairlines, lightest to strongest. Slightly stronger than a neutral grey would be, because forest at a low alpha over a warm surface reads fainter than near-black does over white. */ --navbar-border: rgba(20, 61, 43, 0.09); --footer-border: rgba(20, 61, 43, 0.09); --sidebar-border: rgba(20, 61, 43, 0); --border-muted: rgba(20, 61, 43, 0.13); --border: rgba(20, 61, 43, 0.2); --ring: rgba(20, 61, 43, 0.2); --secondary: rgba(20, 61, 43, 0.13); /* Fills: the sidebar's active pill, inline code, quiet chips. */ --muted: rgba(20, 61, 43, 0.06); --accent: rgba(20, 61, 43, 0.08); --sidebar-accent: rgba(20, 61, 43, 0.08); --sidebar-ring: rgba(20, 61, 43, 0.13); /* The plain callout, which is most of them. Its default is a neutral grey, the one cool thing on a warm page. Retinted to forest, and only this one: alert, success and danger keep their amber, green and red, because those carry meaning rather than brand and a page where every box is green tells the reader nothing. */ --info: #49604e; --info-muted: rgba(20, 61, 43, 0.06); /* `tip` renders through the note pair, which ships blue. A tip is helpful rather than hazardous, so it takes the citron side of the kit instead. Alert stays amber and danger stays red. */ --note: #55631a; --note-muted: rgba(220, 233, 98, 0.34); --selection-bg: rgba(20, 61, 43, 0.14); color-scheme: light; } /* The kit's reversed pairing: citron on the deep green field, which is the inversion the site uses for its one dark band. */ :root.dark, :root[data-theme="dark"], html.dark, .dark-mode { /* The card is the deep green; the gutter around it steps toward forest. See the light block for why `--card` tracks `--background`. */ --background: #0c281c; --content-bg: #0c281c; --card: #0c281c; --popover: #0c281c; --primary: #0c281c; --sidebar: #0f3022; --sidebar-bg: #0f3022; --navbar-bg: #0f3022; --sidebar-primary: #0f3022; --body: #fbfcec; --foreground: #fbfcec; --heading: #fbfcec; --link: #fbfcec; --sub-text: rgba(251, 252, 236, 0.66); --toc-text: rgba(251, 252, 236, 0.66); --toc-active-text: #fbfcec; --sidebar-foreground: rgba(251, 252, 236, 0.66); --sidebar-accent-foreground: #fbfcec; --sidebar-primary-foreground: #fbfcec; /* Citron carries the accent here, so its label is the deep green. */ --brand: #dce962; --brand-text: #0c281c; --navbar-border: rgba(251, 252, 236, 0.12); --footer-border: rgba(251, 252, 236, 0.12); --sidebar-border: rgba(251, 252, 236, 0.12); --border-muted: rgba(251, 252, 236, 0.16); --border: rgba(251, 252, 236, 0.24); --ring: rgba(251, 252, 236, 0.24); --secondary: rgba(251, 252, 236, 0.16); --muted: rgba(251, 252, 236, 0.08); --accent: rgba(251, 252, 236, 0.1); --sidebar-accent: rgba(251, 252, 236, 0.1); --sidebar-ring: rgba(251, 252, 236, 0.16); --info: rgba(251, 252, 236, 0.8); --info-muted: rgba(251, 252, 236, 0.07); --note: #dce962; --note-muted: rgba(220, 233, 98, 0.12); --selection-bg: rgba(220, 233, 98, 0.22); color-scheme: dark; } /* Fallback for a theme that stops using a class and follows the OS. Guarded, so an explicitly light page on a dark machine is not dragged into it. */ @media (prefers-color-scheme: dark) { :root:not(.light):not([data-theme="light"]) { --background: #0c281c; --content-bg: #0c281c; --card: #0c281c; --popover: #0c281c; --sidebar: #0f3022; --sidebar-bg: #0f3022; --navbar-bg: #0f3022; --body: #fbfcec; --foreground: #fbfcec; --heading: #fbfcec; --brand: #dce962; --brand-text: #0c281c; color-scheme: dark; } } /* ─── Type ─────────────────────────────────────────────────── */ body { background-color: var(--background); color: var(--body); font-family: var(--hl-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--hl-heading); font-weight: 600; line-height: 1.25; } h1 { font-weight: 700; } /* ─── Links ────────────────────────────────────────────────── */ /* Forest sits close to body text, so prose links carry an underline the way the site's article body does. Without it a link inside a paragraph is only a shade away from the sentence around it. Scoped to paragraphs, list items and table cells, so navigation, cards and headings keep the theme's own treatment. */ main p > a, main li > a, main td > a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }