/* ============================================================================ PEQUITY — LANDING PAGE AUTH-AWARE CHROME ---------------------------------------------------------------------------- Loaded ONLY by frontend/index.html (the public landing page, which is exempt from header-embed.js per DEV_GUIDE §SHARED HEADER "4. INDEX (LANDING) PAGE NAV" and therefore owns its own auth-aware nav). Session state is decided exclusively by /js/landing-auth.js via fetch('/auth/me', { credentials: 'include' }). This stylesheet only reacts to the `is-authenticated` class that script puts on . All lengths are rem (DEV_GUIDE CRITICAL CONSTRAINT #1 — zero px). ========================================================================== */ /* ============================================================================ OTROTL AUTH-AWARE VISIBILITY CONTRACT (canonical — do not reword) ---------------------------------------------------------------------------- GUEST-FIRST BY DESIGN. The default render is the marketing view, so Googlebot indexes marketing copy and the page stays CDN-cacheable. Never server-render two variants. The authenticated chrome ships in the HTML for everyone and is revealed by adding `is-authenticated` to AFTER /auth/me resolves 2xx. These five rules are the fleet-wide contract. Where they already exist in a site, keep them BYTE-IDENTICAL. Do not reorder, do not drop `!important` (each rule must beat Tailwind utility classes like `flex`/`grid`/`hidden`). ========================================================================== */ [data-auth-show="authenticated"] { display: none !important; } body.is-authenticated [data-auth-show="authenticated"] { display: block !important; } body.is-authenticated [data-auth-show="guest"] { display: none !important; } body.is-authenticated [data-auth-show="authenticated"][data-auth-display="flex"] { display: flex !important; } body.is-authenticated [data-auth-show="authenticated"][data-auth-display="grid"] { display: grid !important; } /* Optional reveal animation. Motion is disabled under prefers-reduced-motion per DEV_GUIDE accessibility expectations. */ .auth-fade-in { animation: authFadeIn 0.3s ease-in; } @keyframes authFadeIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .auth-fade-in { animation: none; } } /* ============================================================================ PEQUITY-NATIVE AUTH CHROME Uses the landing page's own --peq-* tokens (declared in index.html :root) with literal fallbacks so this file is safe to load anywhere. ========================================================================== */ :root { --peq-auth-surface: rgba(17, 24, 39, 0.6); --peq-auth-surface-solid: #0f1623; --peq-auth-border: rgba(30, 41, 59, 0.6); --peq-auth-text: #e2e8f0; --peq-auth-text-muted: #94a3b8; } /* Light theme — the shared token set in /css/base.css flips on [data-theme="light"]; mirror it here so every element added by the auth work is legible in BOTH themes (DEV_GUIDE CRITICAL CONSTRAINT #2). */ [data-theme="light"] { --peq-auth-surface: rgba(255, 255, 255, 0.85); --peq-auth-surface-solid: #ffffff; --peq-auth-border: rgba(203, 213, 225, 0.9); --peq-auth-text: #0f172a; --peq-auth-text-muted: #475569; } /* ---- Avatar (nav + drawer + hero) -------------------------------------- */ .peq-avatar { width: 2.75rem; /* DEV_GUIDE #6 — 2.75rem tap target */ height: 2.75rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.03125rem; color: #ffffff; background: linear-gradient(135deg, var(--peq-emerald, #10b981), var(--peq-blue, #3b82f6)); border: 0.0625rem solid rgba(16, 185, 129, 0.35); flex-shrink: 0; transition: transform 0.3s ease, box-shadow 0.3s ease; } .peq-avatar:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1rem rgba(16, 185, 129, 0.28); } .peq-avatar-lg { width: 4rem; height: 4rem; border-radius: 1rem; font-size: 1.25rem; } /* ---- Icon-only nav action (theme toggle, drawer trigger, sign out) ------ NOTE: this class deliberately sets NO `display`. Tailwind's stylesheet is linked BEFORE this file, so a `display` declared here would beat the `hidden` / `lg:hidden` utilities used to hide these controls responsively. The elements carry `inline-flex items-center justify-center` in the markup instead, which keeps Tailwind's own display cascade authoritative. */ .peq-icon-action { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; color: var(--peq-auth-text-muted); border: 0.0625rem solid var(--peq-auth-border); background: transparent; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .peq-icon-action:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); } /* ---- Authenticated quick-action tile ----------------------------------- */ .peq-auth-tile { display: flex; align-items: flex-start; gap: 0.875rem; min-height: 2.75rem; padding: 1.125rem; border-radius: 1rem; background: var(--peq-auth-surface); border: 0.0625rem solid var(--peq-auth-border); text-align: left; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .peq-auth-tile:hover { border-color: rgba(16, 185, 129, 0.35); transform: translateY(-0.125rem); box-shadow: 0 0.5rem 2rem rgba(16, 185, 129, 0.08); } .peq-auth-tile-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .peq-avatar, .peq-auth-tile { transition: none; } .peq-avatar:hover, .peq-auth-tile:hover { transform: none; } } /* ---- Landing nav links (Help / Investors / Marketplace) ---------------- */ .peq-nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--peq-auth-text-muted); transition: color 0.3s ease, background 0.3s ease; } .peq-nav-link:hover { color: var(--peq-emerald, #10b981); background: rgba(16, 185, 129, 0.06); } /* ---- Mobile drawer ------------------------------------------------------ */ .peq-drawer { display: none; position: fixed; top: 3.75rem; /* clears the fixed landing nav */ left: 0; right: 0; bottom: 0; z-index: 45; overflow-y: auto; padding: 1.25rem; background: var(--peq-auth-surface-solid); border-top: 0.0625rem solid var(--peq-auth-border); } .peq-drawer.is-open { display: block; } .peq-drawer-link { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--peq-auth-text); transition: background 0.3s ease, color 0.3s ease; } .peq-drawer-link:hover { color: var(--peq-emerald, #10b981); background: rgba(16, 185, 129, 0.08); } .peq-drawer-section-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--peq-auth-text-muted); padding: 0 0.75rem; margin-bottom: 0.5rem; } /* 64rem === Tailwind's `lg` (1024) breakpoint, expressed in rem per DEV_GUIDE CRITICAL CONSTRAINT #1. The drawer trigger is `lg:hidden`, so the drawer itself must also disappear at exactly the same breakpoint. */ @media (min-width: 64rem) { .peq-drawer, .peq-drawer.is-open { display: none; } }