/* Pebble IT brand palette: dark burnt orange, replacing Material's default indigo. */ :root { --md-primary-fg-color: #bf5700; --md-primary-fg-color--light: #d9691a; --md-primary-fg-color--dark: #8a4000; --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-accent-fg-color: #e37625; --md-accent-fg-color--transparent: rgba(227, 118, 37, 0.1); --md-accent-bg-color: #ffffff; --md-accent-bg-color--inverse: #000000; } /* Dark mode: swap Material's default near-black/navy slate for a neutral charcoal. */ [data-md-color-scheme="slate"] { --md-default-bg-color: hsl(0, 0%, 18%); --md-default-bg-color--light: hsla(0, 0%, 18%, 0.54); --md-default-bg-color--lighter: hsla(0, 0%, 18%, 0.26); --md-default-bg-color--lightest: hsla(0, 0%, 18%, 0.07); --md-code-bg-color: hsl(0, 0%, 14%); } /* * Footer has two tiers: .md-footer (the prev/next links bar) and, nested * inside it, .md-footer-meta (the copyright strip at the very bottom). * Material renders .md-footer-meta's background as a semi-transparent * black (--md-footer-bg-color--dark) layered over .md-footer's own * opaque background (--md-footer-bg-color) — real compositing, not two * independent flats. Below, both variables are set to fully opaque hex * values instead, so each tier is an exact, predictable colour rather * than one derived from blending: the page-footer tier takes the shade * that used to only appear (via that blend) on the copyright strip, and * the copyright strip itself drops two further shades darker again. * * Material also sets --md-footer-* directly on via its * data-md-color-scheme attribute selectors, so a plain :root rule is * inherited and loses to that direct declaration regardless of source * order — these overrides have to target the same attribute selectors. */ [data-md-color-scheme="default"], [data-md-color-scheme="slate"] { --md-footer-bg-color: #0b0500; /* page footer (prev/next bar) — 3 shades darker than the previous #240f00 */ --md-footer-bg-color--dark: #ffc82a; /* absolute footer (copyright strip) */ --md-footer-fg-color: #ffffff; --md-footer-fg-color--light: #ffffffb3; --md-footer-fg-color--lighter: #ffffff73; } /* * The copyright strip's background is now a bright gold, so its text * needs to flip dark for contrast — the nav-links bar above it stays * dark, so its white text is untouched. These custom properties cascade * to every descendant inside .md-footer-meta (copyright text, the * highlighted link, the social icons), overriding the white set above * for this subtree only. */ .md-footer-meta { --md-footer-fg-color: #1a1200; --md-footer-fg-color--light: rgba(26, 18, 0, 0.7); --md-footer-fg-color--lighter: rgba(26, 18, 0, 0.45); } /* * Collapse/expand toggle for the absolute footer (.md-footer-meta). * Height is a pure CSS class toggle between a generous fixed max-height * and a thin 6px one — no JS-measured scrollHeight involved, so it can't * get stuck after an instant-navigation page swap. * * The button itself is a child of .md-footer (the outer bar), not of * .md-footer-meta — .md-footer-meta needs overflow:hidden to clip its own * collapsing content, which would also clip a button straddling its top * edge. Positioning and click-handling live in javascripts/footer-collapse.js. */ .md-footer { position: relative; } .md-footer-meta { overflow: hidden; max-height: 6.25rem; /* comfortably above the copyright strip's natural height */ transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease; } .md-footer-meta__inner { transition: opacity 0.2s ease; } .md-footer-meta--collapsed { max-height: 6px; padding-top: 0; padding-bottom: 0; } .md-footer-meta--collapsed .md-footer-meta__inner { opacity: 0; pointer-events: none; } .md-footer-collapse-toggle { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid #ffffff; border-radius: 50%; background-color: var(--md-footer-bg-color--dark); color: #1a1200; font-size: 0.75rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5); z-index: 10; } .md-footer-collapse-toggle:hover { filter: brightness(0.92); } .md-footer-collapse-toggle:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }