/* Vault brand CSS — JLog design tokens applied to the Vault portal. * Single file imported by every vault page. * Fraunces + IBM Plex Mono via Google Fonts (linked in each ). */ /* ── Tokens ──────────────────────────────────────────────────────── */ :root { --v-green: #1A2E26; --v-gold: #C79A45; --v-brass: #E8A13F; --v-oat: #EFEDE6; --v-paper: #FCFCFA; --v-line: #E8E6DF; --v-muted: #67746C; --v-display: 'Fraunces', Georgia, serif; --v-body: 'Inter', system-ui, sans-serif; --v-mono: 'IBM Plex Mono', 'Courier New', monospace; } /* ── Auth pages ─────────────────────────────────────────────────── */ /* * Auth pages do not load tailwind.css, so Tailwind's .hidden rule is absent. * Scoped to body.vault-auth so this can never affect the app-shell nav tabs * (those pages have no .vault-auth class and load Tailwind which owns .hidden). * No !important — plain display:none is sufficient because auth pages have no * responsive breakpoint overrides (there is no sm:flex on these elements). */ .vault-auth .hidden { display: none; } body.vault-auth { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; box-sizing: border-box; background: var(--v-green); font-family: var(--v-body); } .vault-auth-wrap { width: 100%; max-width: 22rem; } /* Wordmark above card */ .vault-wordmark { display: block; text-align: center; text-decoration: none; margin-bottom: 2rem; font-family: var(--v-display); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--v-paper); line-height: 1; } .vault-wordmark em { font-style: italic; font-weight: 400; letter-spacing: 0.05em; color: var(--v-gold); } /* White card */ .vault-card { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.28); padding: 2.25rem 2rem; } .vault-card h1 { font-family: var(--v-display); font-size: 1.35rem; font-weight: 600; color: var(--v-green); margin: 0 0 0.2rem; } .vault-card .vault-subtitle { font-size: 0.85rem; color: var(--v-muted); margin: 0 0 1.5rem; } /* Form fields */ .vault-field { margin-bottom: 1rem; } .vault-field.vault-field-last { margin-bottom: 1.5rem; } .vault-label { display: block; font-family: var(--v-mono); font-size: 0.59rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-muted); margin-bottom: 0.3rem; } .vault-label .opt { font-weight: 400; opacity: 0.65; text-transform: none; letter-spacing: 0; font-family: var(--v-body); font-size: 0.72rem; } .vault-input { display: block; width: 100%; box-sizing: border-box; padding: 0.62rem 0.85rem; border: 1px solid var(--v-line); border-radius: 8px; font-family: var(--v-body); font-size: 0.875rem; color: var(--v-green); background: #fff; outline: none; transition: border-color 150ms, box-shadow 150ms; } .vault-input::placeholder { color: #b4bdb9; } .vault-input:focus { border-color: var(--v-gold); box-shadow: 0 0 0 3px rgba(199,154,69,0.16); } .vault-hint { font-size: 0.72rem; color: var(--v-muted); margin: 0.3rem 0 0; } /* Gold primary button */ .vault-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.8rem 1.5rem; background: var(--v-brass); color: var(--v-green); font-family: var(--v-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; border: none; border-radius: 8px; cursor: pointer; transition: background 150ms; } .vault-btn:hover:not(:disabled) { background: var(--v-gold); } .vault-btn:disabled { opacity: 0.55; cursor: default; } /* Spinner (inline SVG, animated by JS class) */ .vault-spinner { width: 14px; height: 14px; animation: vault-spin 0.9s linear infinite; } @keyframes vault-spin { to { transform: rotate(360deg); } } /* Error / success banners */ .vault-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.82rem; border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1.25rem; } .vault-success-icon { font-size: 2.5rem; color: var(--v-gold); text-align: center; margin-bottom: 0.75rem; } .vault-success-title { font-family: var(--v-display); font-size: 1.1rem; font-weight: 600; color: var(--v-green); text-align: center; margin: 0 0 0.4rem; } .vault-success-body { font-size: 0.84rem; color: var(--v-muted); text-align: center; margin: 0 0 1.25rem; } /* Links inside card */ .vault-link { color: var(--v-gold); font-weight: 500; text-decoration: none; } .vault-link:hover { text-decoration: underline; } /* Footer links below card */ .vault-auth-meta { text-align: center; font-size: 0.8rem; color: rgba(252,252,250,0.5); margin-top: 0.85rem; line-height: 1.6; } .vault-auth-meta a { color: rgba(199,154,69,0.85); text-decoration: none; } .vault-auth-meta a:hover { text-decoration: underline; color: var(--v-gold); } /* Site-footer ("A JLog service") */ .vault-site-footer { text-align: center; font-size: 0.66rem; letter-spacing: 0.07em; color: rgba(252,252,250,0.25); margin-top: 1.5rem; } .vault-site-footer a { color: rgba(199,154,69,0.55); text-decoration: none; } .vault-site-footer a:hover { color: var(--v-gold); } /* ── App shell nav ────────────────────────────────────────────────── */ .vault-nav { background: var(--v-green); color: var(--v-paper); box-shadow: 0 1px 4px rgba(0,0,0,0.18); } /* Wordmark (compact, in nav) */ .vault-nav-wordmark { font-family: var(--v-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.14em; color: var(--v-paper); text-decoration: none; flex-shrink: 0; line-height: 1; } .vault-nav-wordmark em { font-style: italic; font-weight: 400; letter-spacing: 0.06em; color: var(--v-gold); } /* Nav links */ .v-nav-link { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 6px; color: rgba(252,252,250,0.68); font-size: 0.875rem; text-decoration: none; transition: background 150ms, color 150ms; white-space: nowrap; } .v-nav-link:hover { background: rgba(255,255,255,0.07); color: var(--v-paper); } .v-nav-link.v-active { background: rgba(199,154,69,0.16); color: var(--v-gold); font-weight: 500; } /* User name chip */ #nav-name { color: var(--v-gold); font-size: 0.875rem; opacity: 0.85; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sign-out button */ #logout-btn { background: none; border: none; padding: 0.35rem 0.6rem; border-radius: 6px; color: rgba(252,252,250,0.48); font-family: inherit; font-size: 0.875rem; cursor: pointer; transition: color 150ms, background 150ms; } #logout-btn:hover { color: var(--v-paper); background: rgba(255,255,255,0.07); } /* Mobile nav divider */ .vault-nav .vault-mobile-nav { border-top: 1px solid rgba(255,255,255,0.1); }