/* ============================================================================ MyNotaryBook — Reference Site Theme Single source of color/typography tokens. Light is default; dark matches app. Toggle by setting (see theme-toggle script). ---------------------------------------------------------------------------- App-sourced values (from mynotarybook.com): gold #FFC618 bg #171E22 slate/muted #708090 text #FFFFFF Status colors are brand-independent and tuned per theme for contrast. ========================================================================== */ /* ---- LIGHT (default) ------------------------------------------------------ */ :root { /* surfaces */ --mnb-bg: #FBFAF7; /* warm paper */ --mnb-surface: #FFFFFF; /* cards / tables */ --mnb-surface-2: #F4F2EC; /* zebra rows, inset panels */ --mnb-border: #E7E2D8; /* text */ --mnb-text: #171E22; /* app charcoal — shared by both themes */ --mnb-muted: #708090; /* citations, verified stamp, footer */ --mnb-strong: #171E22; /* brand gold — light uses a darker gold so gold text/links stay legible with no shadow */ --mnb-gold: #FFCC00; --mnb-gold-on: #171E22; /* text/icon placed ON a gold fill */ --mnb-gold-text: #FFCC00; --mnb-gold-shadow: none; /* links */ /* LIGHT-MODE LINKS (2026-08-05). Gold on the light background measured 1.45:1 -- effectively invisible, and far under the 4.5:1 body text needs. #C8102E is the flag red trialled on the hero: 5.64:1 here, and it reads as a link rather than as an alarm now that it is not set at 64px. Dark mode keeps gold, which is 11:1 on charcoal and is what makes links obvious there. The gold text-shadow goes with it -- it exists to lift gold off a dark surface and only muddies a dark colour on a light one. */ --mnb-link: #C8102E; --mnb-link-shadow: none; /* status — accepted / conditional / not-accepted (light) */ --mnb-ok: #1E7A52; --mnb-ok-bg: #E4F1EA; --mnb-cond: #C2691F; /* orange, kept distinct from gold */ --mnb-cond-bg: #FBEBDD; --mnb-no: #B23A3A; --mnb-no-bg: #F6E3E3; /* elevation */ --mnb-shadow: 0 1px 2px rgba(23,30,34,.05), 0 2px 6px rgba(23,30,34,.07); --mnb-shadow-header: 0 1px 0 var(--mnb-border); /* shape & motion */ --mnb-radius: 10px; --mnb-radius-sm: 6px; --mnb-maxw: 1120px; /* ambient page texture (fine grain + center glow) — light defaults */ --mnb-tex-blend: multiply; /* darken paper slightly */ --mnb-vignette: rgba(229, 229, 229, 0.8); /* #e5e5e5 @ 80% edge */ --mnb-vignette-0: rgba(229, 229, 229, 0); /* transparent center, same hue */ /* coarser, stronger grain in light so it reads against the pale background */ --mnb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E"); --mnb-grain-size: 230px; --mnb-ease: 180ms ease; /* typography — Feross (owned) for display; system stack for body + fallback */ --mnb-font-display: "Feross", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mnb-font-impact: "Anton", "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Narrow", sans-serif; }/* ---- DARK (matches the app) ---------------------------------------------- */ [data-theme="dark"] { --mnb-bg: #171E22; /* app background */ /* ambient texture — dark: light speckle that lightens, faint center glow */ --mnb-tex-blend: screen; --mnb-vignette: rgba(0, 0, 0, 0.55); /* corner vignette (dark) */ --mnb-vignette-0: rgba(0, 0, 0, 0); --mnb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); --mnb-grain-size: 200px; --mnb-surface: #1E262B; /* one notch up — app is flat, tables need cards */ --mnb-surface-2: #232C32; --mnb-border: rgba(112,128,144,.30); /* app slate @30% */ --mnb-text: #FFFFFF; --mnb-muted: #708090; --mnb-strong: #FFFFFF; --mnb-gold: #FFCC00; --mnb-gold-on: #171E22; --mnb-gold-text: #FFCC00; --mnb-gold-shadow: none; --mnb-link: var(--mnb-gold-text); --mnb-link-shadow: none; --mnb-ok: #3DBA86; --mnb-ok-bg: rgba(61,186,134,.14); --mnb-cond: #E0883D; --mnb-cond-bg: rgba(224,136,61,.14); --mnb-no: #E06666; --mnb-no-bg: rgba(224,102,102,.14); --mnb-shadow: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.35); --mnb-shadow-header: 0 0.5px 0 var(--mnb-border); }/* ============================================================================ FONTS — Feross (owned by Jordan), subset to display glyphs, hash-named. Files live at /assets/f/ behind the folder .htaccess gate. Paths are ABSOLUTE from the web root (public_html), so this works no matter where the CSS file itself sits. Regular 400 only; >400 is browser-synthesized bold. swap = show fallback instantly, swap in Feross when ready. ========================================================================== */ /* Feross @font-face moved to includes/header.php (2026-07-22): the header inlines it with a filemtime() version stamp so every font-file update busts caches automatically — no manual ?v= bump. Files renamed to the official /assets/f/Feross.woff2 + Feross.woff. */ @font-face { font-family: "Anton"; src: url("/assets/f/anton-400.woff2") format("woff2"), url("/assets/f/anton-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }@font-face { font-family: "Varela Round"; src: url("/assets/f/varela-round-400.woff2") format("woff2"), url("/assets/f/varela-round-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }/* ============================================================================ BASE ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; }html { -webkit-text-size-adjust: 100%; background-color: var(--mnb-bg); transition: background-color var(--mnb-ease); /* Smooth in-page navigation. Applied on the root rather than per-link so it covers menu clicks, keyboard activation, and a page opened WITH a hash -- a JS handler would only catch the clicks. */ scroll-behavior: smooth; }body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: transparent; color: var(--mnb-text); line-height: 1.6; min-height: 100vh; overflow-x: clip; /* contain the off-screen mobile menu (clip won't break sticky) */ transition: background-color var(--mnb-ease), color var(--mnb-ease); }/* Ambient texture as a position:fixed layer — stays put on scroll, including iOS Safari (which ignores background-attachment:fixed). No mix-blend-mode (that was the Safari stacking bug); grain blends via background-blend-mode against its own opaque base color, so z-index:-1 keeps it safely behind all content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--mnb-bg); background-image: radial-gradient(circle at 50% 50%, var(--mnb-vignette-0) min(324px, 28vw), var(--mnb-vignette) min(600px, 64vw)), var(--mnb-grain); background-repeat: no-repeat, repeat; background-size: cover, var(--mnb-grain-size); background-blend-mode: normal, var(--mnb-tex-blend); }/* lock background scroll while the full-screen mobile menu is open */ html.mnb-nav-open { overflow: hidden; }a { color: var(--mnb-link); text-shadow: var(--mnb-link-shadow); text-decoration: none; }a:hover { text-decoration: underline; }:focus-visible { outline: 2px solid var(--mnb-gold); outline-offset: 2px; border-radius: var(--mnb-radius-sm); }/* ============================================================================ HEADER + PRIMARY NAV (logo left, nav, Login button, theme toggle) ========================================================================== */ .mnb-header { position: sticky; top: 0; z-index: 100; padding: 20px 0; }/* frosted bar on a separate layer — keeps backdrop-filter OFF the header element itself, so the fixed mobile nav can still escape to the full viewport */ .mnb-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: calc(var(--mnb-maxw) - 40px); z-index: -1; background-color: rgba(110, 124, 131, 0.8); /* slate brand bar @ 80% */ -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); border-radius: 0 0 var(--mnb-radius) var(--mnb-radius); }.mnb-header__inner { display: flex; align-items: center; gap: 8px; max-width: calc(var(--mnb-maxw) - 40px); margin: 0 auto; padding: 0 28px; }[data-theme="dark"] .mnb-header::before { background-color: rgba(30, 38, 43, 0.8); }/* dark charcoal bar */ .mnb-header__brand { display: flex; align-items: center; margin-right: auto; }.mnb-header__brand img { height: 50px; width: auto; display: block; }.mnb-header__brand .mnb-logo--dark { display: none; }/* light mode shows logo-lt.png */ [data-theme="dark"] .mnb-header__brand .mnb-logo--light { display: none; }/* dark mode shows logo.png */ [data-theme="dark"] .mnb-header__brand .mnb-logo--dark { display: block; }.mnb-header__actions { display: flex; align-items: center; gap: 6px; }/* nav links */ .mnb-nav__list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }.mnb-nav__list a { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: var(--mnb-radius-sm); font-family: var(--mnb-font-impact); font-size: 1.1rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); /* Never break a label across two lines. "Notary Rules" wrapping is what threw the whole bar out of alignment: a two-line item is taller than its neighbours, so the flex row centres everything against it. */ white-space: nowrap; }/* THE SQUEEZE BAND. Between the full-width layout and the burger at 860px the seven labels no longer fit at 1.1rem. Two steps down rather than one so the change is never abrupt, and both stop above 860px where the burger takes over and the sizing stops mattering. Padding tightens with the type, since at these widths the gaps cost as much room as the letters. */ @media (max-width: 1100px) and (min-width: 861px) { .mnb-nav__list a { font-size: 1rem; padding: 8px 8px; letter-spacing: .02em; } .mnb-nav__list { gap: 0; } }@media (max-width: 980px) and (min-width: 861px) { .mnb-nav__list a { font-size: .9rem; padding: 8px 6px; letter-spacing: .01em; } }/* dot separators between primary items (Web.psd) */ .mnb-nav__list li + li::before { content: "\00B7"; align-self: center; margin: 0 2px; color: rgba(255, 255, 255, .5); font-weight: 700; }.mnb-nav__list li.mnb-nav__login-li::before { content: none; }/* inactive nav links = the Texas-title color, even if the