/* ========================================================================== MorrowTab — notepin.cloud / prettify.cloud house style, MorrowTab palette. Structure follows the sibling sites: @font-face → :root dark → :root light → reset → header → typography → hero → sections → cards → screenshots → cross-promo → footer → lightbox → responsive → manual subsystem → reduced-motion → forced-colors → print. Dark is the base theme. Light is a token-only prefers-color-scheme override. There is no theme toggle and no JS involved in theming. ACCESSIBILITY RULE INHERITED FROM THE FAMILY: fill and border tokens are never used as text colours. Text uses --primary-text / --accent-text, which are the variants measured to clear 4.5:1 on --bg, --surface and --surface-light in BOTH themes. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — self-hosted, latin + latin-ext split on the unicode-range Google serves, so latin-ext downloads only for pages containing those characters. Only the latin subsets are preloaded in . -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Metric-matched fallbacks so the pre-swap frame lays out at the final size. Order matters: the Arial / Courier New arms claim the whole weight range for non-Windows, the Segoe UI / Consolas arms come after and win on Windows. */ @font-face { font-family: 'Inter Fallback'; font-weight: 400 800; src: local('Arial'); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 400; src: local('Segoe UI'); size-adjust: 111.16%; ascent-override: 87.15%; descent-override: 21.70%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 500; src: local('Segoe UI Semilight'); size-adjust: 110.20%; ascent-override: 87.91%; descent-override: 21.89%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 600; src: local('Segoe UI Semibold'); size-adjust: 107.45%; ascent-override: 90.16%; descent-override: 22.45%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 700; src: local('Segoe UI Bold'); size-adjust: 106.30%; ascent-override: 91.13%; descent-override: 22.69%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; font-weight: 800; src: local('Segoe UI Black'); size-adjust: 105.80%; ascent-override: 91.56%; descent-override: 22.80%; line-gap-override: 0%; } @font-face { font-family: 'JetBrains Mono Fallback'; font-weight: 400 500; src: local('Courier New'); size-adjust: 133.72%; ascent-override: 76.13%; descent-override: 22.16%; line-gap-override: 0%; } @font-face { font-family: 'JetBrains Mono Fallback'; font-weight: 400 500; src: local('Consolas'); size-adjust: 108.79%; ascent-override: 93.57%; descent-override: 27.24%; line-gap-override: 0%; } /* -------------------------------------------------------------------------- CSS Variables — Dark (default) Palette comes from the MorrowTab app icon: the indigo card (#6574F7), the teal card (#15C7BD) and the sunrise (#FFD166). Measured contrast: --text #e4e5ec 15.6 : bg 13.8 : surface 11.3 : surface-light --text-muted #a8acbe 8.7 : bg 7.7 : surface 6.3 : surface-light --primary-text #a5adff 9.4 : bg 8.3 : surface 6.8 : surface-light --accent-text #5ee9e0 11.9 : bg 10.5 : surface 9.6 : surface-light --btn-primary-ink on the darkest end of the button gradient 5.0 -------------------------------------------------------------------------- */ :root { --primary: #8f99ff; --primary-light: #a5adff; --primary-dark: #6574f7; --primary-rgb: 143, 153, 255; --accent: #3ee0d6; --accent-rgb: 62, 224, 214; --sunrise: #ffd166; --bg: #0a0b12; --bg-gradient: linear-gradient(135deg, #0a0b12 0%, #12141f 50%, #0a0b12 100%); --text: #e4e5ec; --text-muted: #a8acbe; --heading: #fff; --surface: #181a24; --surface-light: #262a3b; --border: #3a4059; /* Interactive outlines need 3:1 against their own fill; --border is a decorative divider and deliberately softer. */ --border-strong: #6a7294; --overlay: rgba(4, 5, 10, 0.88); --shadow-strength: 0.4; --success: #4ade80; --warning: #fbbf24; --error: #f87171; /* Primary button. White on the brand indigo is only 3.9:1, so the dark theme puts near-black ink on a bright indigo gradient instead. Kept as tokens so each theme picks what actually reads on its own gradient. */ --btn-primary-from: var(--primary); --btn-primary-to: var(--primary-dark); --btn-primary-ink: #0b0d1c; --btn-primary-glow: rgba(101, 116, 247, 0.35); /* Fill colours are not text colours. These are the text-safe variants. */ --primary-text: #a5adff; --accent-text: #5ee9e0; --success-text: #4ade80; --page-max-width: 1200px; --page-shell-width: calc(100% - 48px); --anchor-offset: 96px; } /* -------------------------------------------------------------------------- CSS Variables — Light -------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root { --primary: #4d5ae0; --primary-light: #4351d8; --primary-dark: #3a46bd; --primary-rgb: 77, 90, 224; --accent: #0d7c76; --accent-rgb: 13, 124, 118; --bg: #f8f9fa; --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #eceef4 50%, #f8f9fa 100%); --text: #1f2937; --text-muted: #565d6e; --heading: #111827; --surface: #ffffff; --surface-light: #f2f3f8; --border: #d5d9e6; --border-strong: #6f7689; --overlay: rgba(17, 24, 39, 0.62); --shadow-strength: 0.12; --success: #16a34a; --warning: #9a5b04; --error: #dc2626; /* The light theme's indigo is already dark, so white ink wins here. Starting at the deeper indigo takes white from 3.9:1 to 6.2:1. */ --btn-primary-from: #4351d8; --btn-primary-to: #3a46bd; --btn-primary-ink: #ffffff; --btn-primary-glow: rgba(67, 81, 216, 0.3); --primary-text: #3f4dd2; --accent-text: #0b6a65; --success-text: #166534; } } /* -------------------------------------------------------------------------- Reset and page shell -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: var(--anchor-offset); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container, .header-inner, .content { width: min(var(--page-max-width), var(--page-shell-width)); margin: 0 auto; } .content { max-width: 860px; } img, picture, svg, video { max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } /* Decorative background wash — the house signature. Fixed, behind everything, never intercepts pointer events. */ .bg-glow { position: fixed; inset: 0 0 auto; height: 100vh; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--primary-rgb), 0.16) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 82% 58%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* Screen-reader-only text — carries the "(opens in a new tab)" hints on every external link. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -80px; left: 16px; z-index: 200; padding: 12px 20px; border-radius: 8px; background: var(--btn-primary-to); color: var(--btn-primary-ink); font-weight: 600; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 16px; color: var(--btn-primary-ink); } /* One global focus ring. Two layers so it stays visible on both the page and on the coloured buttons. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- Header and navigation -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(20px); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--heading); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; } .logo-icon { display: block; width: 32px; height: 32px; border-radius: 8px; } .logo-text span { color: var(--primary-text); } /* Scoped to the site nav by id: a bare `nav` selector also matches the manual's table-of-contents