/* site/assets-src/styles.css — Tailwind v3 source. Compiled to site/public/assets/css/styles.css by bin/build-css.sh. See README.md ("Building styles") for the build workflow. Anything NOT a @tailwind directive lives here too: - self-hosted Inter @font-face - edit-mode hover outlines (Phase 5) - prefers-reduced-motion global override - chat widget styles (Phase 13) — self-contained, no Tailwind classes so the widget keeps working even if utilities ever get tree-shaken away. */ @tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: 'InterVariable'; src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'), url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } html { -webkit-text-size-adjust: 100%; } body { font-feature-settings: 'cv11', 'ss01', 'ss03'; } /* Edit-mode visual cues — only render when . Phase 5 sets that class on the server when an admin session is active. */ .edit-mode [data-edit] { outline: 1.5px dashed transparent; outline-offset: 4px; border-radius: 4px; transition: outline-color 120ms ease; cursor: pointer; } .edit-mode [data-edit]:hover { outline-color: #7c3aed; } .edit-mode [data-edit].is-editing { outline-style: solid; outline-color: #7c3aed; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================================ Chat widget (Phase 13). Loaded only when GUA_AI_CHAT_ENABLED=1. Self-contained styles — no Tailwind classes — so the widget keeps working even if utilities ever get tree-shaken away. ============================================================================ */ .gua-chat { --gua-chat-bg: #ffffff; --gua-chat-fg: #111827; --gua-chat-muted: #6b7280; --gua-chat-brand: #7c3aed; --gua-chat-brand-fg: #ffffff; --gua-chat-border: #e5e7eb; --gua-chat-shadow: 0 12px 32px rgba(17, 24, 39, .12); position: fixed; right: 1rem; bottom: 1rem; z-index: 9990; font-family: 'InterVariable', system-ui, -apple-system, Segoe UI, sans-serif; color: var(--gua-chat-fg); } .gua-chat__bubble { width: 56px; height: 56px; border-radius: 9999px; border: 0; background: var(--gua-chat-brand); color: var(--gua-chat-brand-fg); box-shadow: var(--gua-chat-shadow); cursor: pointer; font-size: 24px; line-height: 1; display: grid; place-items: center; transition: transform 120ms ease, box-shadow 120ms ease; } .gua-chat__bubble:hover { transform: translateY(-2px); } .gua-chat__bubble:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 3px; } .gua-chat__bubble-icon { display: inline-block; line-height: 1; } .gua-chat__panel { position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 2rem)); height: min(540px, calc(100vh - 6rem)); background: var(--gua-chat-bg); border: 1px solid var(--gua-chat-border); border-radius: 16px; box-shadow: var(--gua-chat-shadow); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; } .gua-chat__panel--open { display: flex; } .gua-chat__header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gua-chat-border); background: linear-gradient(180deg, #faf9ff 0%, #ffffff 100%); } .gua-chat__title { font-weight: 600; font-size: .95rem; flex: 1; } .gua-chat__close, .gua-chat__reset { background: transparent; border: 1px solid var(--gua-chat-border); color: var(--gua-chat-muted); border-radius: 6px; cursor: pointer; padding: .25rem .5rem; font-size: .8rem; line-height: 1.2; } .gua-chat__close { font-size: 1.25rem; padding: 0 .55rem; } .gua-chat__close:hover, .gua-chat__reset:hover { color: var(--gua-chat-fg); } .gua-chat__messages { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; background: #fafafa; } .gua-chat__msg { display: flex; max-width: 85%; } .gua-chat__msg--user { align-self: flex-end; } .gua-chat__msg--assistant { align-self: flex-start; } .gua-chat__bubble-msg { padding: .55rem .75rem; border-radius: 12px; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } .gua-chat__msg--user .gua-chat__bubble-msg { background: var(--gua-chat-brand); color: var(--gua-chat-brand-fg); border-bottom-right-radius: 4px; } .gua-chat__msg--assistant .gua-chat__bubble-msg { background: #ffffff; border: 1px solid var(--gua-chat-border); border-bottom-left-radius: 4px; } .gua-chat__msg--typing .gua-chat__bubble-msg { color: var(--gua-chat-muted); font-style: italic; } .gua-chat__form { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--gua-chat-border); background: #ffffff; } .gua-chat__input { flex: 1; border: 1px solid var(--gua-chat-border); border-radius: 8px; padding: .5rem .75rem; font: inherit; font-size: .9rem; resize: none; line-height: 1.4; max-height: 120px; outline: none; } /* Focus ring is solid brand-500 (#8b5cf6, 4.23:1 vs white) — WCAG 1.4.11 requires 3:1 against the adjacent background, and the previous rgba(brand-600, .15) ring fell well under that. */ .gua-chat__input:focus { border-color: var(--gua-chat-brand); box-shadow: 0 0 0 3px #8b5cf6; } .gua-chat__send { background: var(--gua-chat-brand); color: var(--gua-chat-brand-fg); border: 0; border-radius: 8px; padding: 0 .9rem; font-size: 1rem; cursor: pointer; align-self: flex-end; height: 36px; } .gua-chat__send:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 480px) { .gua-chat { right: .5rem; bottom: .5rem; } .gua-chat__panel { right: 0; bottom: 64px; width: calc(100vw - 1rem); height: calc(100vh - 5rem); } } /* ============================================================================ v2 Stage 9 — Front-end canvas polish ============================================================================ */ /* --- Public-page scroll-driven reveal -------------------------------------- reveal.js applies .gua-revealed when an element scrolls into view. prefers-reduced-motion respects user settings (handled by the global override above which clamps animation/transition durations). */ .gua-reveal { opacity: 0; transform: translateY(12px); transition: opacity 480ms ease-out, transform 480ms ease-out; will-change: opacity, transform; } .gua-reveal.gua-revealed { opacity: 1; transform: none; } /* --- Micro-interactions ---------------------------------------------------- Consistent focus rings + subtle hover lift across interactive elements. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #8b5cf6; /* brand-500, AA against white */ outline-offset: 2px; border-radius: 4px; } /* Buttons get a soft lift on hover where they don't already declare one. Limited to ".btn"-style elements via a marker class so we don't override stylised buttons that have their own choreography. */ .gua-lift { transition: transform 150ms ease, box-shadow 150ms ease; } .gua-lift:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(17, 24, 39, .08); } /* Underline-from-center on inline links inside prose. Skips nav/buttons. */ .gua-prose a:not(.gua-no-underline) { position: relative; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-position: 50% 100%; background-repeat: no-repeat; transition: background-size 200ms ease; } .gua-prose a:not(.gua-no-underline):hover, .gua-prose a:not(.gua-no-underline):focus-visible { background-size: 100% 1.5px; } /* --- Inline editor: section toolbar + drag indicators ---------------------- Only renders when (admin session). Each section gets a thin toolbar absolutely positioned in its top-right corner; the wrapper div is relatively positioned for the toolbar to anchor to. */ .edit-mode .gua-section { position: relative; outline: 1.5px dashed transparent; outline-offset: -4px; transition: outline-color 120ms ease; } .edit-mode .gua-section:hover { outline-color: rgba(124, 58, 237, .35); } .edit-mode .gua-section--dragging { opacity: .4; } .edit-mode .gua-section--drop-before { box-shadow: inset 0 4px 0 0 #7c3aed; } .edit-mode .gua-section--drop-after { box-shadow: inset 0 -4px 0 0 #7c3aed; } .gua-section-toolbar { position: absolute; top: .5rem; right: .5rem; z-index: 40; display: none; align-items: center; gap: .25rem; padding: .25rem .35rem; background: rgba(255, 255, 255, .94); border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 2px 8px rgba(17, 24, 39, .08); font: 500 12px/1 'InterVariable', system-ui, sans-serif; color: #374151; } .edit-mode .gua-section:hover > .gua-section-toolbar, .edit-mode .gua-section:focus-within > .gua-section-toolbar { display: inline-flex; } .gua-section-toolbar__handle { cursor: grab; padding: 0 .25rem; color: #6b7280; user-select: none; } .gua-section-toolbar__handle:active { cursor: grabbing; } .gua-section-toolbar__slug { padding: 0 .25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #1f2937; } .gua-section-toolbar__btn { appearance: none; border: 1px solid #e5e7eb; background: #ffffff; color: #374151; border-radius: 4px; padding: .15rem .45rem; font: inherit; cursor: pointer; line-height: 1; } .gua-section-toolbar__btn:hover { border-color: #c4b5fd; background: #f5f3ff; color: #5b21b6; } .gua-section-toolbar__btn--danger:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; } .gua-section-add-top { display: block; width: calc(100% - 2rem); margin: 1rem auto 0; padding: .65rem; border: 1.5px dashed #c4b5fd; border-radius: 8px; background: #faf5ff; color: #5b21b6; font: 500 .875rem 'InterVariable', system-ui, sans-serif; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .gua-section-add-top:hover { background: #f3e8ff; border-color: #8b5cf6; } /* --- Inline editor: section palette modal ----------------------------------- */ .gua-palette-overlay { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: 1rem; background: rgba(17, 24, 39, .45); } .gua-palette { width: min(720px, 100%); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; background: #ffffff; border-radius: 12px; box-shadow: 0 24px 48px rgba(17, 24, 39, .25); overflow: hidden; } .gua-palette__header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; background: #fafafa; } .gua-palette__header h2 { margin: 0; font: 600 1rem 'InterVariable', system-ui, sans-serif; color: #111827; } .gua-palette__close { appearance: none; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 .5rem; } .gua-palette__close:hover { color: #111827; } .gua-palette__body { overflow-y: auto; padding: 1rem; } .gua-palette__loading, .gua-palette__error { margin: 0; color: #6b7280; font-size: .875rem; text-align: center; padding: 1rem; } .gua-palette__error { color: #b91c1c; } .gua-palette__group { margin: 1rem 0 .5rem; font: 600 .75rem 'InterVariable', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; } .gua-palette__group:first-child { margin-top: 0; } .gua-palette__list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; } .gua-palette__item { width: 100%; text-align: left; appearance: none; border: 1px solid #e5e7eb; background: #ffffff; border-radius: 8px; padding: .65rem .75rem; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; transition: border-color 120ms ease, background 120ms ease; } .gua-palette__item:hover { border-color: #8b5cf6; background: #faf5ff; } .gua-palette__slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: #5b21b6; } .gua-palette__label { font-size: .9rem; color: #111827; }