/* Rotabook — universal site chrome (nav + mega menus + footer + modals). Self-contained: carries its own brand tokens scoped to the chrome subtrees, so it renders identically on every page regardless of that page's CSS vars. Load this LAST in so it is authoritative. */ /* ── Scoped brand tokens (do not leak to page content) ───────────── */ .rb-nav, .rb-footer, .modal-backdrop { --bg: #ffffff; --bg-muted: #f7f8fb; --text: #0b1120; --text-muted: #475569; --text-dim: #5e6d83; --border: #e5e7eb; --border-soft: #eef2f7; --accent: #4f46e5; --accent-dark: #4338ca; --accent-soft: #eef2ff; --green-tint: #d1fae5; --font-head: 'Fraunces', 'Fraunces Fallback', Georgia, serif; --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --radius: 14px; --radius-lg: 20px; --radius-chip: 4px; --shadow-md: 0 6px 24px -8px rgba(15, 23, 42, 0.12); --shadow-modal: 0 30px 80px -20px rgba(11, 17, 32, 0.45); --dur-base: 200ms; --dur-fast: 150ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ── Scoped resets so chrome looks right on any page ─────────────── */ .rb-nav *, .rb-footer *, .modal-backdrop * { box-sizing: border-box; } .rb-nav a, .rb-footer a, .modal-backdrop a { text-decoration: none; color: inherit; } .rb-nav button, .modal-backdrop button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ── Nav ─────────────────────────────────────────────────────────── */ .rb-nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); } .rb-nav-inner { max-width: 1280px; margin: 0 auto; padding: 15px 32px; display: flex; align-items: center; gap: 30px; } .rb-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--text); } .rb-brand .brand-mark { width: 30px; height: 30px; display: block; color: var(--text); flex: none; } .rb-nav-links { display: flex; gap: 4px; margin-left: 6px; font-size: 14.5px; color: var(--text-muted); } .rb-nav-links > a, .rb-nav-trigger { color: var(--text-muted); padding: 8px 10px; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; } .rb-nav-links > a:hover, .rb-nav-trigger:hover { color: var(--text); background: var(--bg-muted); } .rb-nav-trigger svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--ease-out); } .rb-has-mega { position: relative; } .rb-has-mega.open .rb-nav-trigger { color: var(--text); background: var(--bg-muted); } .rb-has-mega.open .rb-nav-trigger svg { transform: rotate(180deg); } .rb-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14.5px; } .rb-nav-right > a { color: var(--text-muted); cursor: pointer; } .rb-nav-right > a:hover { color: var(--text); } .rb-nav-cta { background: var(--text); color: #fff !important; padding: 9px 17px; border-radius: 999px; font-weight: 600; transition: background var(--dur-base) ease; } .rb-nav-cta:hover { background: color-mix(in oklab, var(--text) 86%, var(--accent)); } @media (max-width: 1000px) { .rb-nav-links { display: none; } } /* ── Mega menu ───────────────────────────────────────────────────── */ .rb-mega { position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(-6px); width: min(720px, 92vw); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index: 70; } .rb-has-mega.open .rb-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .rb-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .rb-mega-item { display: flex; gap: 13px; padding: 13px; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-fast) ease; align-items: flex-start; } .rb-mega-item:hover { background: var(--bg-muted); } .rb-mega-item.current { background: var(--accent-soft); } .rb-mega-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; } .rb-mega-item.current .rb-mega-ic { background: var(--accent); color: #fff; } .rb-mega-ic svg { width: 19px; height: 19px; } .rb-mega-emoji { font-size: 21px; line-height: 1; background: var(--bg-muted); } .rb-mega-tt { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 8px; } .rb-mega-ds { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; } .rb-mega-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 14px 13px 6px; border-top: 1px solid var(--border-soft); } .rb-mega-foot .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .rb-mega-foot a { color: var(--accent); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex: none; } .rb-mega-foot a svg { width: 14px; height: 14px; flex: none; } /* ── Buttons (used in modals) ────────────────────────────────────── */ .rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 16px 28px; font-family: var(--font-body); font-size: 16px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; white-space: nowrap; } .rb-btn:active { transform: scale(0.97); } .rb-btn svg { width: 16px; height: 16px; } .rb-btn-primary { background: var(--text); color: #fff; } .rb-btn-primary:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--text) 88%, var(--accent) 12%); } .rb-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ── Footer ──────────────────────────────────────────────────────── */ .rb-footer { padding: 56px 0 40px; border-top: 1px solid var(--border); font-family: var(--font-body); color: var(--text-muted); font-size: 14px; margin-top: 8px; } .rb-footer-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; } .rb-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px 24px; padding-bottom: 34px; border-bottom: 1px solid var(--border-soft); } .rb-foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--text); margin-bottom: 14px; } .rb-foot-brand .brand-mark { width: 26px; height: 26px; } .rb-foot-blurb { font-size: 13.5px; color: var(--text-muted); max-width: 30ch; line-height: 1.55; } .rb-foot-col h3 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; margin-bottom: 13px; } .rb-foot-col a { display: block; color: var(--text-muted); text-decoration: none; font-size: 13.5px; padding: 5px 0; cursor: pointer; } .rb-foot-col a:hover { color: var(--accent); } .rb-footer-bot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 24px; font-size: 13px; color: var(--text-dim); } .rb-foot-tag { font-family: var(--font-mono); font-size: 12px; } @media (max-width: 720px) { .rb-footer-top { grid-template-columns: 1fr 1fr; gap: 26px 24px; } } @media (max-width: 460px) { .rb-footer-top { grid-template-columns: 1fr; gap: 22px; } .rb-footer-bot { gap: 8px; } } /* ── Modals (demo / sign-in) ─────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(11,17,32,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; } .modal-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } .modal-card { width: 100%; max-width: 440px; background: white; border-radius: 20px; padding: 36px 32px 28px; box-shadow: var(--shadow-modal); position: relative; transform: translateY(8px) scale(0.98); transition: transform var(--dur-base) var(--ease-out); } .modal-backdrop[data-open="true"] .modal-card { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 10px; background: transparent; color: var(--text-dim); font-size: 22px; line-height: 1; display: grid; place-items: center; } .modal-close:hover { background: var(--bg-muted); color: var(--text); } .modal-badge { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; color: white; margin-bottom: 20px; box-shadow: 0 10px 24px -8px rgba(79,70,229,0.5); } .modal-badge svg { width: 22px; height: 22px; } .modal-card h3 { font-family: var(--font-head); font-size: 22px; margin-bottom: 6px; color: var(--text); } .modal-card > p { color: var(--text-muted); font-size: 15px; margin-bottom: 22px; } .form-field { margin-bottom: 14px; } .form-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; } .form-field .optional { color: var(--text-dim); font-weight: 400; font-size: 12px; } .form-field input { width: 100%; border: 1.5px solid var(--border); border-radius: 11px; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--text); background: white; outline: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .form-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .modal-submit { width: 100%; margin-top: 16px; } .modal-help { margin-top: 18px; font-size: 13px; color: var(--text-dim); text-align: center; } .form-success { text-align: center; padding: 12px 0 8px; } .form-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--green-tint); color: #0a7954; display: grid; place-items: center; margin: 0 auto 18px; } .form-success-icon svg { width: 28px; height: 28px; } .form-success h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .form-success p { color: var(--text-muted); font-size: 15px; max-width: 32ch; margin: 0 auto; } body.modal-open { overflow: hidden; } /* ── Mobile refinements ──────────────────────────────────────────── */ @media (max-width: 720px) { /* Footer links are the de-facto mobile nav alongside the menu — give them 44px targets */ .rb-foot-col a { min-height: 44px; display: flex; align-items: center; } /* Modal: anchor to top + scroll + safe-area so short viewports / open keyboard never clip it */ .modal-backdrop { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } } @media (max-width: 460px) { .rb-footer-wrap { padding: 0 18px; } }