/* * geniete.css — GenieTé brand tokens + shared chrome (header/footer). * * Scope: ONLY the cross-surface identity — design tokens, the standard * site header (.gt-header) and footer (.gt-footer) rendered by * geniete.js, and the shared button vocabulary. Page-level layout stays * in each product's own stylesheet, built on these tokens. * * Themes: light is the default. A product that keeps a dark canvas * (e.g. the AgentScreen admin console) sets data-gt-theme="dark" on * and the chrome adapts without losing its identity. */ :root { /* palette */ --gt-paper: #fbfcfb; --gt-surface: #ffffff; --gt-ink: #101312; --gt-muted: #5b6864; --gt-line: #dce5e1; --gt-line-strong: #aebfba; --gt-teal: #0f766e; --gt-blue: #0b6fb3; --gt-red: #c2410c; --gt-green-black: #10201d; --gt-soft-teal: #e2f3ef; --gt-soft-blue: #e6f1fb; --gt-soft-red: #faece7; --gt-shadow: 0 24px 70px rgba(16, 19, 18, 0.08); /* type */ --gt-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --gt-serif: Georgia, "Times New Roman", serif; --gt-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* chrome bindings (theme-switchable) */ --gt-chrome-ink: var(--gt-green-black); --gt-chrome-muted: var(--gt-muted); --gt-chrome-line: var(--gt-line); --gt-chrome-line-strong: var(--gt-line-strong); --gt-chrome-mark-bg: var(--gt-green-black); --gt-chrome-mark-ink: #ffffff; } [data-gt-theme="dark"] { --gt-chrome-ink: #e6ecf4; --gt-chrome-muted: #8b97a5; --gt-chrome-line: #1e2530; --gt-chrome-line-strong: #2a3545; --gt-chrome-mark-bg: #e6ecf4; --gt-chrome-mark-ink: #0a0e14; } /* ── Standard header ─────────────────────────────────────── */ .gt-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 18px; font-family: var(--gt-sans); } .gt-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--gt-chrome-ink); font-weight: 850; text-decoration: none; } .gt-brand-mark { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gt-chrome-mark-bg); border-radius: 50%; background: var(--gt-chrome-mark-bg); color: var(--gt-chrome-mark-ink); font-family: var(--gt-serif); font-size: 1.05rem; font-weight: 700; } .gt-brand span:last-child { font-size: 1.18rem; } .gt-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .gt-nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--gt-chrome-muted); font-weight: 750; text-decoration: none; } .gt-nav a:hover, .gt-nav a:focus-visible { border-color: var(--gt-chrome-line-strong); outline: none; } .gt-nav a.active { color: var(--gt-chrome-ink); border-color: var(--gt-chrome-line); } .gt-nav a.primary { color: var(--gt-blue); } /* ── Profile dropdown (My Account) ───────────────────────── */ .gt-profile { position: relative; } .gt-profile summary { list-style: none; cursor: pointer; display: inline-flex; } .gt-profile summary::-webkit-details-marker { display: none; } .gt-profile-badge { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gt-chrome-line-strong); border-radius: 50%; background: var(--gt-soft-teal); color: var(--gt-teal); font-family: var(--gt-sans); font-size: 1rem; font-weight: 800; } /* Signed-out: neutral account symbol inviting My Account */ .gt-profile-badge.empty { background: var(--gt-surface); color: var(--gt-chrome-muted); } .gt-profile-badge.empty::before { content: ""; width: 16px; height: 16px; border-radius: 50% 50% 4px 4px; background: radial-gradient(circle at 50% 30%, var(--gt-chrome-muted) 4.5px, transparent 5px), radial-gradient(ellipse 8px 5px at 50% 92%, var(--gt-chrome-muted) 7px, transparent 8px); } .gt-profile summary:hover .gt-profile-badge, .gt-profile summary:focus-visible .gt-profile-badge { border-color: var(--gt-teal); outline: none; } .gt-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 8px; border: 1px solid var(--gt-line); border-radius: 10px; background: var(--gt-surface); box-shadow: 0 18px 50px rgba(16, 19, 18, 0.14); z-index: 30; } .gt-menu-user { padding: 8px 10px 10px; border-bottom: 1px solid var(--gt-line); margin-bottom: 6px; color: var(--gt-muted); font-size: 0.82rem; overflow-wrap: anywhere; } .gt-menu-link { display: block; padding: 9px 10px; border-radius: 6px; color: var(--gt-green-black); font-weight: 750; font-size: 0.95rem; text-decoration: none; } .gt-menu-link:hover, .gt-menu-link:focus-visible { background: var(--gt-soft-teal); outline: none; } .gt-menu-logout { margin-top: 6px; border-top: 1px solid var(--gt-line); border-radius: 0 0 6px 6px; color: var(--gt-muted); } /* ── Standard footer ─────────────────────────────────────── */ .gt-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0 36px; border-top: 1px solid var(--gt-chrome-line); color: var(--gt-chrome-muted); font-family: var(--gt-sans); font-size: 0.95rem; } .gt-footer a { color: inherit; font-weight: 700; text-decoration: none; } .gt-footer a:hover, .gt-footer a:focus-visible { color: var(--gt-chrome-ink); outline: none; } /* ── Shared button vocabulary ────────────────────────────── */ .gt-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border: 1px solid var(--gt-line-strong); border-radius: 8px; background: #ffffff; color: var(--gt-green-black); font-family: var(--gt-sans); font-weight: 850; line-height: 1.1; text-decoration: none; cursor: pointer; } .gt-button:hover, .gt-button:focus-visible { border-color: var(--gt-green-black); outline: none; } .gt-button.primary { border-color: var(--gt-teal); background: var(--gt-teal); color: #ffffff; } .gt-button.quiet { color: var(--gt-blue); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 640px) { .gt-header { align-items: flex-start; flex-direction: column; gap: 12px; } .gt-nav { justify-content: flex-start; } /* Stacked header puts the profile badge at the LEFT edge — a right-anchored menu would extend offscreen left. Anchor left. */ .gt-menu { left: 0; right: auto; } .gt-footer { align-items: flex-start; flex-direction: column; } }