/* * settings-drawer.css -- Tripgen account-hub drawer * * Spec: docs/superpowers/specs/2026-04-26-account-hub-2-settings-drawer.md * Depends on: assets/css/theme.css (locked 17-token palette). * * Wire by adding to alongside theme.css and theme.js, then loading * /assets/js/settings-drawer.js. The script auto-mounts the trigger and * drawer DOM if the page exposes a [data-tripgen-drawer-mount] element, * otherwise the host page calls window.TripgenDrawer.init({ trigger, host }). * * Token-only: no hardcoded colour values. The drawer renders correctly in * light + dark with no per-mode rules required. */ .tg-drawer-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-primary); cursor: pointer; transition: background 160ms ease-out, border-color 160ms ease-out; } .tg-drawer-trigger--fixed { position: fixed; top: 16px; right: 16px; z-index: 7000; /* Stronger separation so the cog reads cleanly when it floats over photos / hero imagery on dashboard + detail pages. */ background: var(--bg-elevated); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--bg-page); } @media (max-width: 767px) { .tg-drawer-trigger--fixed { top: 12px; right: 12px; } } .tg-drawer-trigger:hover { background: var(--bg-surface); border-color: var(--border-strong); } .tg-drawer-trigger:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .tg-drawer-trigger svg { width: 20px; height: 20px; display: block; } .tg-drawer-trigger--nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 999px; } .tg-drawer-trigger--nav-icon:hover { background: var(--bg-surface); } .tg-drawer-trigger[data-state="signed-in"] { background: var(--accent-secondary); border-color: var(--accent-secondary); color: var(--text-on-accent); font-weight: 600; font-size: 16px; text-transform: uppercase; } .tg-drawer-trigger[data-state="signed-in"] svg { display: none; } /* Inline nav-link variant: rendered as a regular nav item, not a circular icon button. Inherits the host nav's typography. Used in .nav-links and .mobile-menu-panel; overrides the circular-button defaults above. */ .tg-drawer-trigger--inline, .tg-drawer-trigger--mobile { display: inline; width: auto; height: auto; padding: 0; background: transparent; border: 0; border-radius: 0; color: inherit; font: inherit; cursor: pointer; } .tg-drawer-trigger--inline:hover, .tg-drawer-trigger--mobile:hover { background: transparent; border: 0; color: var(--text-primary); } .tg-drawer-trigger--inline[data-state="signed-in"]::after, .tg-drawer-trigger--mobile[data-state="signed-in"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent-secondary); vertical-align: middle; } .tg-drawer-trigger--inline[data-state="signed-in"], .tg-drawer-trigger--mobile[data-state="signed-in"] { background: transparent; color: inherit; font-weight: inherit; font-size: inherit; text-transform: none; border: 0; } .tg-drawer-scrim { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 8990; opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } .tg-drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; } .tg-drawer { position: fixed; top: 0; right: 0; width: 400px; max-width: 100vw; height: 100vh; background: var(--bg-elevated); color: var(--text-primary); border-left: 1px solid var(--border-subtle); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); z-index: 9000; transform: translateX(100%); transition: transform 220ms ease-out; display: flex; flex-direction: column; } .tg-drawer[data-open="true"] { transform: translateX(0); } .tg-drawer[hidden] { display: none !important; } .tg-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); } .tg-drawer__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; } .tg-drawer__close { width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms ease-out, color 160ms ease-out; } .tg-drawer__close:hover { background: var(--bg-surface); color: var(--text-primary); } .tg-drawer__close:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .tg-drawer__close svg { width: 18px; height: 18px; display: block; } .tg-drawer__body { padding: 24px; overflow-y: auto; flex: 1; } .tg-drawer__section { margin-bottom: 28px; } .tg-drawer__section:last-child { margin-bottom: 0; } .tg-drawer__label { display: block; margin: 0 0 12px 0; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .tg-drawer__pill { display: flex; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px; gap: 4px; } .tg-drawer__pill button { flex: 1; padding: 8px 12px; background: transparent; border: none; border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 160ms ease-out, color 160ms ease-out; } .tg-drawer__pill button:hover { color: var(--text-primary); } .tg-drawer__pill button[aria-pressed="true"] { background: var(--accent-primary); color: var(--text-on-accent); } .tg-drawer__pill button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .tg-drawer__identity { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; word-break: break-all; } .tg-drawer__action { display: inline-block; padding: 10px 16px; background: transparent; color: var(--link); border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 160ms ease-out, border-color 160ms ease-out; } .tg-drawer__action:hover { background: var(--bg-surface); border-color: var(--border-strong); } .tg-drawer__action:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } @media (max-width: 767px) { .tg-drawer { width: 100vw; border-left: none; } .tg-drawer-scrim { background: transparent; } .tg-drawer__header { padding: 16px 20px; } .tg-drawer__body { padding: 20px; } } /* In-nav drawer mount: the auto-mount injects a span.nav-drawer-mount inside any .site-nav it finds, so the cog renders inline as part of the nav row rather than floating fixed over content. Older padding-right reservation removed -- it is no longer needed once the cog is in flow. */ .nav-drawer-mount { display: inline-flex; align-items: center; margin-left: 0.5rem; } .nav-drawer-mount .tg-drawer-trigger { width: 36px; height: 36px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .tg-drawer, .tg-drawer-scrim { transition: none; } }