/* sbrat.net — vanilla replacement styles. Provides: appear animation CSS, menu toggle states, light-mode theme, print fallback. Loaded last so it overrides Framer-generated styles. */ /* ============================================================ LIGHT MODE THEME ------------------------------------------------------------ Framer generated 4 design tokens in :root for dark mode: --token-0df385c8… = rgb(15, 15, 15) primary background --token-412736a6… = rgb(255, 255, 255) primary text + logo --token-4213617f… = rgb(166, 166, 166) secondary text --token-847bdcde… = rgb(26, 26, 26) surface / card bg We override them for light mode in two ways: 1. @media (prefers-color-scheme: light) — auto from OS 2. html[data-theme="light"] — manual override (wins over auto) 3. html[data-theme="dark"] — manual pin to dark Transitions smooth the toggle; reduced-motion users skip them. ============================================================ */ html { color-scheme: dark; } html body, html #main { transition: background-color 280ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms cubic-bezier(0.22, 1, 0.36, 1); } /* 1a. AUTO — follow OS preference when no manual override. NOTE: Framer's SSR declared these tokens on `body`, not :root. We must target `body` too (higher specificity than plain body) to override them. */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { color-scheme: light; } html:not([data-theme="dark"]) body { --token-0df385c8-c6c4-40bb-a008-e6f27b304ae0: rgb(245, 245, 245); --token-412736a6-764a-4748-80bf-a9c04ad63339: rgb(15, 15, 15); --token-4213617f-db71-4b9f-b786-d4b4f6de56f3: rgb(107, 107, 107); --token-847bdcde-68af-4acc-bb45-37d83fa37c74: rgb(232, 232, 232); } } /* 1b. MANUAL — user explicitly chose light (beats OS auto). */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] body { --token-0df385c8-c6c4-40bb-a008-e6f27b304ae0: rgb(245, 245, 245); --token-412736a6-764a-4748-80bf-a9c04ad63339: rgb(15, 15, 15); --token-4213617f-db71-4b9f-b786-d4b4f6de56f3: rgb(107, 107, 107); --token-847bdcde-68af-4acc-bb45-37d83fa37c74: rgb(232, 232, 232); } /* 1c. Framer's SSR injected hard-coded background rules on the : :root body { background: var(--token-0df385c8…) } html body { background: var(--token-0df385c8…) } Force them to recompute by re-declaring here. */ :root body, html body { background: var(--token-0df385c8-c6c4-40bb-a008-e6f27b304ae0); } /* 1d. Theme toggle button — top-left, positioned next to the hamburger on all devices. Hamburger sits at (20, 35) with 24x24 size; the toggle is placed just to its right with visual breathing room. */ /* Vertically center mobile header content inside the 80px nav. Framer hard-codes 20px top/bottom padding on the logo wrapper which pushes the logo + hamburger below the nav's midline — override it. */ .framer-1grl81i { padding-top: 6px !important; padding-bottom: 6px !important; } #sbrat-theme-toggle { position: fixed; top: 24px; left: 60px; width: 32px; height: 32px; border: none; background: transparent; color: var(--token-412736a6-764a-4748-80bf-a9c04ad63339, #fff); cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; transition: background-color 200ms, transform 200ms; } #sbrat-theme-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); transform: scale(1.08); } #sbrat-theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show sun icon when light is active, moon when dark — opposite of current. */ #sbrat-theme-toggle .icon-sun { display: none; } #sbrat-theme-toggle .icon-moon { display: block; } html[data-theme="light"] #sbrat-theme-toggle .icon-sun { display: block; } html[data-theme="light"] #sbrat-theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) #sbrat-theme-toggle .icon-sun { display: block; } html:not([data-theme="dark"]) #sbrat-theme-toggle .icon-moon { display: none; } } /* Respect motion preference — remove theme transitions for those users. */ @media (prefers-reduced-motion: reduce) { html body, html #main, #sbrat-theme-toggle { transition: none; } } /* 1e. Hamburger icon lines — Framer hard-codes their background-color as inline style `rgb(255, 255, 255)`. We override with !important so the lines follow the active theme's foreground color. */ html[data-theme="light"] [data-framer-name="Mobile Menu Icon"] > div, html[data-theme="light"] [data-framer-name="Menu Icon"] > div { background-color: var(--token-412736a6-764a-4748-80bf-a9c04ad63339) !important; } @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) [data-framer-name="Mobile Menu Icon"] > div, html:not([data-theme="dark"]) [data-framer-name="Menu Icon"] > div { background-color: var(--token-412736a6-764a-4748-80bf-a9c04ad63339) !important; } } /* 1. Appear animation — initial hidden state + transition to visible. */ .appear-init { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .appear-init.is-visible { opacity: 1; transform: translateY(0); } /* Respect user motion preferences. */ @media (prefers-reduced-motion: reduce) { .appear-init, .appear-init.is-visible { opacity: 1; transform: none; transition: none; } } /* 2. Menu open state — when hamburger toggles. */ html.menu-open { overflow: hidden; } [data-framer-name="Overlay"].is-open, [data-framer-name="Nav Overlay"].is-open, [data-framer-name="Menu Overlay"].is-open { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; transform: none !important; } /* 3. Baseline: ensure images never exceed container. */ img { max-width: 100%; height: auto; } /* 3a.