/* ============================================ CSS Variables — RamJet mdBook theme Two colours, two jobs. A ramjet has one cold zone and one hot one, and so does this theme: Accent — "intake teal", hue 175. The book's own system: links, tables, code, search chrome, figures, the NOTE alert. Roughly 70% of the colour on any page. Secondary — "ember", hue 16. Where *you* are and what *you* touched: the active chapter, the active heading marker, your text selection, your search hits, the footnote you jumped to, the IMPORTANT alert. It lands on what the eye is already hunting for, which is why a small dose reads as deliberate rather than sprinkled. Rebranding is still one find-and-replace per hue. ============================================ */ @import url("../fonts/fonts.css"); /* === Global: palettes, layout, typography === */ :root { /* --- Accent palette (hue 175) --- */ --accent-50: hsl(175, 60%, 97.5%); --accent-100: hsl(175, 50%, 91%); --accent-200: hsl(175, 50%, 82%); --accent-300: hsl(175, 46%, 68%); --accent-400: hsl(175, 44%, 52%); --accent-500: hsl(175, 55%, 40%); --accent-600: hsl(175, 60%, 32%); --accent-700: hsl(175, 60%, 25%); --accent-800: hsl(175, 55%, 20%); --accent-900: hsl(175, 50%, 15%); --accent-950: hsl(175, 55%, 8%); /* --- Secondary palette (hue 16, "ember" — a muted terracotta/clay). --secondary-500 is #CD846A, the anchor of the pairing. --- */ --secondary-50: hsl(16, 72%, 97%); --secondary-100: hsl(16, 70%, 92%); --secondary-200: hsl(16, 66%, 85%); --secondary-300: hsl(16, 58%, 76%); --secondary-400: hsl(16, 53%, 68%); --secondary-500: hsl(16, 50%, 61%); --secondary-600: hsl(16, 46%, 50%); --secondary-700: hsl(16, 52%, 41%); --secondary-800: hsl(16, 45%, 30%); --secondary-900: hsl(16, 42%, 21%); --secondary-950: hsl(16, 44%, 12%); /* --- Neutral gray palette (teal-tinted, hue 175, sat 6-14%) --- */ --gray-50: hsl(175, 10%, 98%); --gray-100: hsl(175, 9%, 93%); --gray-200: hsl(175, 8%, 87%); --gray-300: hsl(175, 7%, 72%); --gray-400: hsl(175, 6%, 58%); --gray-500: hsl(175, 7%, 48%); --gray-600: hsl(175, 7%, 34%); --gray-700: hsl(175, 9%, 26%); --gray-800: hsl(175, 10%, 17%); --gray-900: hsl(175, 10%, 11%); --gray-950: hsl(175, 12%, 8%); /* --- Layout --- */ --sidebar-target-width: 280px; --chapter-number-width: 1.8em; /* the gutter a chapter's number hangs in — room for "42." */ --sidebar-width: min(var(--sidebar-target-width), 85vw); --right-sidebar-width: 264px; --page-padding: 28px; --content-max-width: 780px; --menu-bar-height: 64px; --site-logo-height: 30px; --sidebar-logo-height: 30px; --layout-max-width: 1480px; /* sync with @media breakpoint in sidebar.css */ /* --- Typography --- */ --body-font: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono-font: "Google Sans Code", Menlo, Monaco, Consolas, "Courier New", monospace; --code-font-size: 0.875em; --table-font-size: 0.9375rem; --alert-font-size: 0.95rem; /* --- Spacing & Radii --- */ --border-radius: 8px; --border-radius-lg: 12px; --accent-border-width: 1px; /* --- Search --- */ --search-bar-margin-block-start: 8px; /* --- Two-colour mix --- */ /* How far down the sidebar the teal holds before it turns warm. Lower = more ember, higher = more teal. This is the 70/30 dial. */ --warm-turn: 46%; /* Gradient overshoot, for the prev/next cards. Stops sit outside the 0-100% band so the card only ever shows the middle of the ramp — the teal end never reaches full teal, the ember end stops short of full ember. Every other gradient does the same thing with literal stops, compressed harder the shorter its run: a hairline overshoots by 10 and 40 points, the sidebar, with a viewport to cross, not at all at the start and 18 points at the end. A leading overshoot only does something when the next stop is a different colour. Where a gradient holds one colour before it turns — the h2 rule, the sidebar — the hold is what keeps the start pure and the overshoot there would be a no-op. */ --nav-wash-start: -20%; --nav-wash-end: 130%; } /* ============================================ Light theme ============================================ */ .light, html:not(.js) { /* --- Page --- */ --page-background: #ffffff; --page-foreground: #000000; --page-foreground-secondary: var(--gray-600); --page-foreground-alt: var(--gray-700); --page-foreground-muted: var(--gray-500); --color-scheme: light; /* --- Links --- */ --link-color: var(--accent-600); /* --- Sidebar --- */ /* The flat colour is the fallback; the gradient paints over it. Teal at the top where the logo sits, ember at the foot. The 28deg waypoint keeps the blend out of the grey that a straight teal-to-clay run passes through. */ --sidebar-background: hsl(175, 33%, 92%); --sidebar-gradient: linear-gradient( 210deg in oklab, hsl(175, 38%, 91%) 0%, hsl(175, 32%, 92%) var(--warm-turn), hsl(32, 30%, 92.5%) 82%, hsl(18, 40%, 92%) 100% ); --sidebar-foreground: var(--gray-800); --sidebar-missing-color: var(--gray-400); --sidebar-spacer-color: hsl(175, 26%, 85%); --sidebar-header-border-color: var(--accent-400); /* --- "You are here" markers (ember) --- */ /* Text has to clear 4.5:1 on a pale ground, so it takes the dark step; the bar is pure signal and can sit brighter. */ --marker-color: var(--secondary-700); --marker-rail: var(--secondary-500); --sidebar-active-color: var(--marker-color); /* --- Selection --- */ --selection-background: hsl(16, 68%, 85%); --selection-foreground: var(--gray-900); /* --- Header --- */ /* Left flat and near-white on purpose. A wash here fought the sidebar gradient it sits beside, and the header is the one surface with content scrolling under it. The ember icon hover is the only colour it needs. */ --header-background: hsl(175deg 15% 88% / 20%); --header-border-color: var(--gray-200); /* --- Icon buttons (header cluster) --- */ --icon-hover-background: hsla(16, 60%, 55%, 0.16); --icon-hover-color: var(--secondary-700); /* --- Keyboard chips (the S in search, Esc in the dialog) --- */ --kbd-background: hsl(175, 40%, 92%); /* --- Content-area two-colour edge --- Everything inside the column runs teal at the left to ember at the right: the rule under an h2, the hairline around a code block, a table or a quote, the prev/next cards. One direction, so they read as one system. */ --edge-gradient: linear-gradient( 135deg in oklab, var(--accent-300) -10%, var(--accent-200) 42%, var(--secondary-300) 140% ); --table-header-gradient: linear-gradient( 100deg in oklab, hsl(175, 50%, 91%) -10%, hsl(175, 38%, 93%) var(--warm-turn), hsl(16, 66%, 92%) 140% ); /* --- Alert hairlines --- Same material as a code block, but each card stays in its own family: about 25 degrees of drift, in the direction that puts more space between it and its nearest neighbour in the set, so the five fan apart rather than converging on the two brand hues. Each also sheds saturation and gains lightness as it travels. Hue alone was too quiet to read at one pixel — two axes moving together make the shift visible without making either one loud. The corner a card starts from is what identifies it, so the starts stay saturated and only the far end goes pale. */ --alert-note-gradient: linear-gradient( 135deg in oklab, hsl(175, 42%, 65%), hsl(200, 30%, 75%)); --alert-tip-gradient: linear-gradient( 135deg in oklab, hsl(145, 38%, 61%), hsl(172, 26%, 71%)); --alert-important-gradient: linear-gradient( 135deg in oklab, hsl(16, 52%, 70%), hsl(34, 32%, 79%)); --alert-warning-gradient: linear-gradient( 135deg in oklab, hsl(42, 52%, 64%), hsl(64, 32%, 74%)); --alert-caution-gradient: linear-gradient( 135deg in oklab, hsl(352, 54%, 70%), hsl(330, 34%, 78%)); /* Stops only — .page-nav assembles the gradient itself so the prev card can flip its angle. Opaque, and both ends at the same lightness: this is a button surface, so the two colours drift across it rather than one side being darker than the other. */ --nav-wash-1: hsl(175, 16%, 95.5%); --nav-wash-3: hsl(16, 20%, 95.5%); --nav-wash-1-hover: hsl(175, 24%, 92%); --nav-wash-3-hover: hsl(16, 28%, 92%); /* --- Scrollbar --- */ --scrollbar-color: var(--gray-300); /* --- Icons --- */ --icon-color: var(--gray-400); --icon-color-hover: var(--gray-700); /* --- Code --- */ /* Not quite opaque. The fill sits over the edge gradient, so a few points of alpha let the hairline bleed faintly across the card instead of stopping dead at the border. Kept close to white — the hairline is what separates the block from the page, so the fill doesn't need to be grey to do it. */ --code-background: hsla(175, 7%, 99.2%, 0.95); /* Also not quite opaque, and for the other half of the same reason. On a phone the block is edge to edge with no hairline — a rule drawn the full width of the page is a line across it, not the edge of a card — so the gradient has nowhere to sit but *under* the fill. Twelve points of it come through, which is the wash the border used to carry; the other 88 keep the block a shade the page is not, which is now the only thing telling the two apart. The lightness sits between the column's fill and the flat grey this replaced. The grey read as a band the code was printed *on*, and a gradient under it only deepened that; halfway back toward the column keeps the block distinct without spending contrast the text needs, which is what a code block is for. */ --code-background-mobile: hsla(175, 8%, 97.5%, 0.88); --code-border-color: var(--gray-300); --inline-code-color: var(--accent-800); /* The fallback layer. The gradient paints over it, so the two alphas compound — the chip lands near 0.13 effective, not 0.06. */ --inline-code-background: hsla(175, 30%, 50%, 0.04); /* A chip is too small for the page's mix: held teal to --warm-turn it read as a teal pill with a warm corner, and a page full of them read as a page full of teal. So the chip splits the two evenly — teal for its first sixth, then a straight run to ember — at low saturation and low alpha, so it stays a tint under the text rather than a colour beside it. */ --inline-code-gradient: linear-gradient( 102deg in oklab, hsla(175, 40%, 44%, 0.06) 0%, hsla(175, 40%, 44%, 0.06) 15%, hsla(16, 45%, 55%, 0.06) 100% ); /* --- Search --- */ --search-dialog-border-color: var(--accent-400); --search-bar-background: #ffffff; --search-bar-foreground: var(--page-foreground); --search-bar-border-color: var(--gray-300); --search-bar-shadow-color: var(--accent-200); --search-results-header-color: var(--gray-600); --search-results-border-color: var(--gray-300); --search-results-item-background: var(--accent-50); --search-mark-background: hsla(16, 78%, 60%, 0.38); /* --- Tables --- */ --table-border-color: var(--accent-300); /* Thin enough that the wash behind carries through the grid. */ --table-cell-border-color: hsla(175, 35%, 40%, 0.13); /* Near enough opaque that an unstriped row is genuinely white. At 0.94 it sat around 250 and the stripe only five points below it, so the table averaged out to a grey block against a white page. The hairline still shows at full strength — it lives in the border area, which this layer never covers. */ --table-fill: hsla(0, 0%, 100%, 0.99); --table-header-background: var(--accent-100); /* Neutral, not tinted. The header wash and the hairline are already carrying colour here; a teal stripe on every other row fought them. */ --table-alternate-background: hsl(175, 9%, 96%); /* --- Quotes & Separators --- */ --quote-background: var(--gray-50); --quote-border-color: var(--gray-200); --separator-color: var(--accent-300); /* The rule under every h2: teal at the margin, ember by the time it runs out. The quietest place the pairing repeats. */ --separator-gradient: linear-gradient( 90deg in oklab, var(--accent-300) 0%, var(--accent-300) 20%, var(--secondary-300) 140% ); /* --- Theme popup --- */ --theme-popup-background: #ffffff; --theme-popup-border-color: var(--gray-200); --theme-hover-background: hsla(175, 25%, 50%, 0.12); /* --- Admonitions --- NOTE takes the accent and IMPORTANT takes the secondary, so the two brand colours bracket the set. CAUTION moves off orange to a true red: at hue 25 it sat on top of ember and read as brand, not danger. */ --blockquote-note-color: hsl(175, 40%, 55%); --blockquote-tip-color: hsl(145, 35%, 50%); --blockquote-important-color: var(--secondary-500); --blockquote-warning-color: hsl(42, 52%, 54%); --blockquote-caution-color: hsl(352, 58%, 60%); /* Flat fallbacks. The gradients below are what actually paints. */ --admonition-note-background: hsl(175, 50%, 96%); --admonition-tip-background: hsl(145, 45%, 96%); --admonition-warning-background: hsl(42, 62%, 96%); --admonition-caution-background: hsl(352, 62%, 97%); --admonition-important-background: hsl(16, 70%, 96%); /* The fill drifts the same way the hairline does, but it needs a swing in *lightness* to read. Hue and saturation alone are invisible up at 96% — which is why these looked flat while the borders did not. Saturated and a shade darker at the top-left corner, nearly white by the bottom right, so each card reads as lit from where its hairline starts. */ --admonition-note-gradient: linear-gradient( 135deg in oklab, hsl(175, 52%, 95%), hsl(196, 36%, 96.4%)); --admonition-tip-gradient: linear-gradient( 135deg in oklab, hsl(145, 46%, 95%), hsl(170, 28%, 96.4%)); --admonition-warning-gradient: linear-gradient( 135deg in oklab, hsl(42, 64%, 95%), hsl(58, 42%, 96.4%)); --admonition-caution-gradient: linear-gradient( 135deg in oklab, hsl(352, 60%, 95.8%), hsl(334, 38%, 97%)); --admonition-important-gradient: linear-gradient( 135deg in oklab, hsl(16, 68%, 95.4%), hsl(34, 42%, 96.8%)); /* --- Misc --- */ --warning-border-color: hsl(40, 85%, 50%); --footnote-highlight-color: var(--secondary-400); --overlay-background: rgba(0, 0, 0, 0.25); --tooltip-background: #333; --tooltip-foreground: #fff; --hr-color: var(--gray-200); --dark-accent: var(--accent-700); } /* ============================================ Dark theme ============================================ */ .coal { /* --- Page --- */ --page-background: hsl(175, 5%, 4%); --page-foreground: #ffffff; --page-foreground-secondary: var(--gray-300); --page-foreground-alt: var(--gray-200); --page-foreground-muted: var(--gray-400); --color-scheme: dark; /* --- Links --- */ --link-color: var(--accent-400); /* --- Sidebar --- */ --sidebar-background: hsl(175, 33%, 12%); --sidebar-gradient: linear-gradient( 210deg in oklab, hsl(175, 38%, 11.5%) 0%, hsl(175, 32%, 12.5%) var(--warm-turn), hsl(30, 18%, 13.5%) 82%, hsl(18, 22%, 14.5%) 100% ); --sidebar-foreground: var(--gray-200); --sidebar-missing-color: var(--gray-600); --sidebar-spacer-color: hsl(175, 24%, 21%); --sidebar-header-border-color: var(--accent-500); /* --- "You are here" markers (ember) --- */ --marker-color: var(--secondary-300); --marker-rail: var(--secondary-400); --sidebar-active-color: var(--marker-color); /* --- Selection --- */ --selection-background: hsl(16, 42%, 32%); --selection-foreground: #ffffff; /* --- Header --- */ --header-background: hsl(175deg 40% 15% / 25%); --header-border-color: hsl(175, 30%, 24%); /* --- Icon buttons (header cluster) --- */ --icon-hover-background: hsla(16, 60%, 55%, 0.20); --icon-hover-color: var(--secondary-300); /* --- Keyboard chips --- */ --kbd-background: hsl(175, 26%, 16%); /* --- Content-area two-colour edge --- */ /* Lighter than the light-theme pair: at accent-700/800 the hairline vanished against the near-black fill. */ --edge-gradient: linear-gradient( 135deg in oklab, var(--accent-600) -10%, hsl(175, 20%, 27%) 42%, var(--secondary-700) 140% ); --table-header-gradient: linear-gradient( 100deg in oklab, hsl(175, 44%, 15%) -10%, hsl(175, 26%, 15%) var(--warm-turn), hsl(16, 34%, 17%) 140% ); /* --- Alert hairlines --- */ --alert-note-gradient: linear-gradient( 135deg in oklab, hsl(175, 48%, 34%), hsl(200, 28%, 43%)); --alert-tip-gradient: linear-gradient( 135deg in oklab, hsl(145, 44%, 33%), hsl(172, 26%, 42%)); --alert-important-gradient: linear-gradient( 135deg in oklab, hsl(16, 48%, 48%), hsl(34, 30%, 57%)); --alert-warning-gradient: linear-gradient( 135deg in oklab, hsl(42, 54%, 38%), hsl(64, 30%, 46%)); --alert-caution-gradient: linear-gradient( 135deg in oklab, hsl(352, 50%, 43%), hsl(330, 30%, 50%)); --nav-wash-1: hsl(175, 14%, 15%); --nav-wash-3: hsl(16, 17%, 15.5%); --nav-wash-1-hover: hsl(175, 20%, 19.5%); --nav-wash-3-hover: hsl(16, 23%, 20%); /* --- Scrollbar --- */ --scrollbar-color: var(--gray-600); /* --- Icons --- */ --icon-color: var(--gray-400); --icon-color-hover: var(--gray-200); /* --- Code --- */ --code-background: hsla(175, 10%, 11%, 0.94); /* `--gray-900`, opened up (the light theme's note applies) — through `color-mix` rather than as a literal, so a book that repoints the ramp keeps this with it. Less alpha here than there: the dark edge gradient is far lighter than the fill it sits under, so twelve points of it would lift the block off the page rather than tint it. */ --code-background-mobile: color-mix(in srgb, var(--gray-900) 93%, transparent); --code-border-color: var(--gray-700); --inline-code-color: var(--accent-200); --inline-code-background: hsla(175, 30%, 55%, 0.07); --inline-code-gradient: linear-gradient( 102deg in oklab, hsla(175, 40%, 50%, 0.09) 0%, hsla(175, 40%, 50%, 0.09) 15%, hsla(16, 45%, 58%, 0.09) 100% ); /* --- Search --- */ --search-dialog-border-color: var(--accent-500); --search-bar-background: hsl(175, 21%, 14%); --search-bar-foreground: var(--page-foreground); --search-bar-border-color: var(--gray-600); --search-bar-shadow-color: hsl(175, 45%, 18%); --search-results-header-color: var(--gray-400); --search-results-border-color: var(--gray-700); --search-results-item-background: hsl(175, 23%, 14%); --search-mark-background: hsla(16, 72%, 58%, 0.42); /* --- Tables --- */ --table-border-color: var(--accent-800); --table-cell-border-color: hsla(175, 35%, 40%, 0.16); --table-fill: hsla(175, 5%, 4%, 0.97); --table-header-background: var(--accent-900); --table-alternate-background: hsl(175, 9%, 10.5%); /* --- Quotes & Separators --- */ --quote-background: hsl(175, 21%, 13%); --quote-border-color: hsl(175, 21%, 20%); --separator-color: var(--accent-700); --separator-gradient: linear-gradient( 90deg in oklab, var(--accent-700) 0%, var(--accent-700) 20%, var(--secondary-800) 140% ); /* --- Theme popup --- */ --theme-popup-background: hsl(175, 23%, 12%); --theme-popup-border-color: var(--gray-700); --theme-hover-background: hsla(175, 25%, 50%, 0.12); /* --- Admonitions --- */ --blockquote-note-color: hsl(175, 50%, 45%); --blockquote-tip-color: hsl(145, 45%, 44%); --blockquote-important-color: var(--secondary-400); --blockquote-warning-color: hsl(42, 60%, 48%); --blockquote-caution-color: hsl(352, 58%, 54%); --admonition-note-background: hsl(175, 35%, 13%); --admonition-tip-background: hsl(145, 33%, 13%); --admonition-warning-background: hsl(42, 33%, 13%); --admonition-caution-background: hsl(352, 30%, 14%); --admonition-important-background: hsl(16, 30%, 14%); /* Same drift, same direction — lit corner at the top left, falling away toward the page colour at the bottom right. */ --admonition-note-gradient: linear-gradient( 135deg in oklab, hsl(175, 40%, 15%), hsl(196, 28%, 13.2%)); --admonition-tip-gradient: linear-gradient( 135deg in oklab, hsl(145, 38%, 15%), hsl(170, 26%, 13.2%)); --admonition-warning-gradient: linear-gradient( 135deg in oklab, hsl(42, 38%, 15%), hsl(58, 26%, 13.2%)); --admonition-caution-gradient: linear-gradient( 135deg in oklab, hsl(352, 36%, 16%), hsl(334, 26%, 13.8%)); --admonition-important-gradient: linear-gradient( 135deg in oklab, hsl(16, 36%, 16%), hsl(34, 26%, 13.8%)); /* --- Misc --- */ --warning-border-color: hsl(40, 85%, 55%); --footnote-highlight-color: var(--secondary-500); --overlay-background: rgba(0, 0, 0, 0.45); --tooltip-background: var(--gray-200); --tooltip-foreground: var(--gray-900); --hr-color: var(--gray-800); --dark-accent: var(--accent-300); }