/* ========================================================================== Xeit AI — Site-wide additions on top of colors_and_type.css ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; /* iOS Safari needs this on html too, not just body */ } body { -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Form controls don't inherit the page font by default — force Libre Baskerville everywhere (inputs, text boxes, selects, buttons) across the Verity app and the marketing site. Code/monospace blocks use their own .font-mono rules and are unaffected. */ input, textarea, select, button { font-family: var(--font-serif); } /* ----- Site chrome ------------------------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; /* Brand + section links cluster on the left; meta/theme pushed right. */ justify-content: flex-start; gap: 32px; padding: 22px 40px; background: var(--xeit-nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--xeit-border); } /* The trailing meta/theme group sits at the far right. */ .site-nav > :last-child { margin-left: auto; } .site-nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--xeit-fg-strong); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .site-nav__brand .mark { color: var(--xeit-coral-400); display: inline-flex; } .site-nav__brand em { font-weight: 400; opacity: 0.65; font-style: italic; } .site-nav__links { display: flex; gap: 32px; font-size: 14px; } .site-nav__links a { color: var(--xeit-fg); text-decoration: none; transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .site-nav__links a[aria-current="page"] { color: var(--xeit-accent-on-bg); font-style: italic; } .site-nav__links a:hover { opacity: 0.7; } .site-nav__meta { font-size: 13px; color: var(--xeit-fg-muted); font-style: italic; letter-spacing: 0.04em; } /* ----- Footer corner -------------------------------------------------------*/ .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; font-size: 12px; color: var(--xeit-fg-muted); font-style: italic; letter-spacing: 0.06em; pointer-events: none; } .site-footer span, .site-footer a { pointer-events: auto; } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: var(--xeit-fg); } /* ----- Theme toggle button -------------------------------------------------*/ .theme-toggle { background: transparent; border: 1px solid var(--xeit-border-strong); color: var(--xeit-fg); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); margin-left: 16px; } .theme-toggle:hover { color: var(--xeit-accent-on-bg); border-color: var(--xeit-accent-on-bg); } .theme-toggle svg { width: 14px; height: 14px; } /* Three icons, one shown at a time, driven by data-theme-mode on . data-theme-mode reflects the user's choice (system | light | dark); data-theme reflects what is currently rendered (light or absent = dark). */ .theme-toggle .icon-sun, .theme-toggle .icon-moon, .theme-toggle .icon-auto { display: none; } :root[data-theme-mode="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme-mode="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme-mode="system"] .theme-toggle .icon-auto { display: block; } :root:not([data-theme-mode]) .theme-toggle .icon-auto { display: block; } /* ----- Background watermark -------------------------------------------------*/ .bg-rings { position: fixed; pointer-events: none; width: 700px; height: 700px; color: var(--xeit-bone-200); opacity: 0.025; } /* ----- Animations ----------------------------------------------------------*/ @keyframes x-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes x-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes x-slow-pulse { 0%, 100% { opacity: 0.025; } 50% { opacity: 0.045; } } .x-fade-up { opacity: 0; animation: x-fade-up 900ms var(--ease-out) forwards; } .x-fade-in { opacity: 0; animation: x-fade-in 1200ms var(--ease-out) forwards; } /* Stagger helpers */ .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; } .delay-500 { animation-delay: 500ms; } .delay-700 { animation-delay: 700ms; } .delay-900 { animation-delay: 900ms; } /* ----- Form primitives ----------------------------------------------------*/ .x-input { font-family: var(--font-serif); font-size: 16px; background: var(--xeit-bg-raised); color: var(--xeit-fg-strong); border: 1px solid var(--xeit-border-strong); border-radius: var(--radius-md); padding: 14px 18px; outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .x-input::placeholder { color: var(--xeit-ink-500); font-style: italic; } .x-input:focus { border-color: var(--xeit-coral-400); box-shadow: var(--shadow-glow); } .x-btn { font-family: var(--font-serif); font-size: 14px; background: var(--xeit-bone-200); color: var(--xeit-ink-100); border: none; border-radius: var(--radius-md); padding: 14px 22px; cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; } .x-btn:hover { background: var(--xeit-bone-100); } .x-btn:disabled { opacity: 0.5; cursor: not-allowed; } .x-btn--ghost { background: transparent; color: var(--xeit-fg); border: 1px solid var(--xeit-border-strong); } .x-btn--ghost:hover { background: var(--xeit-bg-raised); color: var(--xeit-fg-strong); } /* ----- Responsive — tablet & phone ---------------------------------------- Site chrome must shrink at narrow viewports — the nav otherwise crushes on small phones (~375px). Page bodies are responsive per-page; this block only handles the global header and footer. */ @media (max-width: 720px) { .site-nav { padding: 16px 20px; } .site-nav__links { gap: 18px; font-size: 13px; } .site-nav__meta { display: none; } /* drop the small decorative tag on phones */ .theme-toggle { margin-left: 10px; } .site-footer { padding: 14px 20px; font-size: 11px; } } @media (max-width: 480px) { .site-nav { padding: 14px 20px; } /* bumped from 16 for breathing room */ .site-nav__brand { font-size: 13px; gap: 6px; } .site-nav__brand svg { width: 18px; height: 18px; } .site-nav__links { gap: 12px; font-size: 11px; } .theme-toggle { margin-left: 6px; width: 30px; height: 30px; } .theme-toggle svg { width: 13px; height: 13px; } }