/* ============================================================================ bragi.css — "Ask Bragi" full-fold chat page (loaded after style.css) Reuses NativeWorks brand tokens only — invents no colors. Neumorphic plaster. ========================================================================== */ /* ── 1. Full-fold layout + landing↔active state machine ──────────────────── */ .bragi-ask{ min-height:100dvh; padding:120px clamp(24px,5vw,80px) calc(40px + env(safe-area-inset-bottom)); background:var(--plaster); display:flex; align-items:center; justify-content:center; } .bragi-shell{ width:100%; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:28px; } /* LANDING vs ACTIVE — driven by body.bragi-active (set by JS on first send) */ .bragi-log{ display:none; opacity:0; transition:opacity .24s ease; } body.bragi-active .bragi-hero, body.bragi-active .bragi-chips{ display:none; } /* ACTIVE: the chat fold is exactly ONE viewport tall and the message LOG scrolls internally — but the section stays IN FLOW with the footer below it, so the page can still scroll down to the footer. Using height (not min-height) stops the fold from growing with content, which caused the earlier dual-scroll / white-space bug. */ /* Chat layout: the message LOG scrolls internally; the PAGE scroll (revealing the footer below the fold) is driven by BODY, while is locked to the viewport. This avoids a document-scrollHeight leak — the site's base body{overflow-x:hidden} otherwise lets the nested log's content inflate 's scroll height, producing white space past the footer. With locked, only body scrolls (fold + footer). */ html.bragi-active{ height:100dvh; overflow:hidden; } body.bragi-active{ height:100dvh; overflow-x:hidden; overflow-y:auto; } body.bragi-active .bragi-ask{ height:100vh; height:100dvh; min-height:0; overflow:hidden; /* fold = one viewport; log scrolls inside */ align-items:stretch; padding:96px clamp(24px,5vw,80px) calc(20px + env(safe-area-inset-bottom)); } body.bragi-active .bragi-shell{ height:100%; min-height:0; justify-content:flex-end; } body.bragi-active .bragi-log{ display:flex; flex-direction:column; gap:20px; flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px 4px 16px; scroll-behavior:smooth; opacity:1; } body.bragi-active .bragi-composer{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--plaster) 70%, rgba(234,229,220,0)); } .bragi-composer{ width:100%; } /* no transform transition: the keyboard-tracking transform must track instantly */ /* ── 2. Hero type (eyebrow → headline → italic sub) ──────────────────────── */ .bragi-hero{ text-align:left; } .bragi-eyebrow{ display:block; font-family:var(--font-body); font-size:10px; letter-spacing:4px; text-transform:uppercase; color:#5A5650; margin-bottom:20px; } .bragi-headline{ font-family:var(--font-display); font-weight:400; line-height:1.03; letter-spacing:-0.5px; color:var(--night); text-shadow:var(--text-engraved); text-wrap:balance; font-size:clamp(42px,4.8vw,72px); margin:0 0 20px; } .bragi-headline em{ font-style:italic; font-weight:400; color:var(--true-north); } .bragi-subhead{ font-family:var(--font-display); font-style:italic; font-weight:300; color:#5A5650; text-shadow:var(--text-engraved); font-size:clamp(18px,2vw,24px); line-height:1.4; max-width:42ch; margin:0; } /* ── 3. Engraved prompt box (recessed field on plaster) ──────────────────── */ .bragi-inputwrap{ position:relative; display:flex; align-items:flex-end; gap:10px; background:var(--plaster-light); border:1px solid var(--border); border-radius:4px; padding:10px 10px 10px 0; box-shadow:var(--shadow-raised); } .bragi-input{ flex:1 1 auto; background:var(--plaster); border:1px solid var(--border); border-radius:2px; box-shadow:var(--shadow-engraved-sm); margin-left:10px; padding:14px 16px; font-family:var(--font-body); font-size:16px; color:var(--night); line-height:1.6; outline:none; resize:none; max-height:200px; overflow-y:auto; field-sizing:content; } .bragi-input::placeholder{ color:#5A5650; opacity:1; font-weight:300; } .bragi-input:focus{ border-color:var(--true-north); box-shadow:var(--shadow-engraved-sm), 0 0 0 3px rgba(var(--true-north-rgb),0.08); } .bragi-counter{ margin:6px 4px 0; font-size:11px; color:#4A4740; text-align:right; } /* ── 4. Raised send button (dark → bronze) ───────────────────────────────── */ .bragi-send{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; font-family:var(--font-body); font-size:11px; letter-spacing:2.5px; font-weight:600; text-transform:uppercase; color:var(--plaster); background:var(--night); border:none; border-radius:2px; padding:0 22px; cursor:none; transition:background .3s, transform .3s, opacity .3s; } .bragi-send:hover{ background:var(--true-north); transform:translateY(-1px); } .bragi-send:focus-visible{ outline:2px solid var(--true-north); outline-offset:2px; } .bragi-send:disabled{ opacity:.4; background:var(--engraved-dark); transform:none; cursor:none; } .bragi-send-arrow{ font-size:14px; line-height:1; } /* ── 5. Raised pill chips (raised → engraved on press) ───────────────────── */ .bragi-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; } .bragi-chip{ font-family:var(--font-body); font-size:12px; letter-spacing:.5px; color:var(--night); text-transform:none; text-align:left; background:var(--plaster); border:1px solid var(--border); border-radius:999px; padding:12px 20px; min-height:44px; cursor:none; box-shadow:var(--shadow-raised-sm); transition:box-shadow .3s, transform .3s, border-color .3s; } .bragi-chip:hover{ box-shadow:var(--shadow-raised-hover); border-color:rgba(var(--true-north-rgb),0.25); transform:translateY(-1px); } .bragi-chip:active{ box-shadow:var(--shadow-engraved-sm); transform:translateY(1px); } .bragi-chip:focus-visible{ outline:2px solid var(--true-north); outline-offset:2px; } /* ── 6. Message rows (user vs assistant) ─────────────────────────────────── */ .bragi-msg{ display:flex; flex-direction:column; max-width:100%; } .bragi-msg--user{ align-items:flex-end; } .bragi-msg--bot{ align-items:flex-start; } .bragi-bubble{ max-width:85%; padding:14px 18px; border-radius:4px; font-family:var(--font-body); font-size:15px; line-height:1.7; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; } .bragi-msg--user .bragi-bubble{ background:var(--plaster-light); color:var(--night); border:1px solid var(--border); box-shadow:var(--shadow-raised-sm); } .bragi-msg--bot .bragi-bubble{ background:var(--plaster); color:#4A4740; border:1px solid var(--border); box-shadow:var(--shadow-engraved-sm); } .bragi-msg--bot .bragi-bubble strong{ color:var(--night); font-weight:600; } .bragi-msg--bot .bragi-bubble code{ font-family:ui-monospace,monospace; background:var(--plaster-mid); padding:1px 5px; border-radius:2px; font-size:.92em; } .bragi-msg--bot .bragi-bubble ul, .bragi-msg--bot .bragi-bubble ol{ margin:.4em 0 .4em 1.2em; } .bragi-msg--bot .bragi-bubble li{ margin:.15em 0; } .bragi-msg--bot .bragi-bubble p{ margin:0 0 .6em; } .bragi-msg--bot .bragi-bubble p:last-child{ margin-bottom:0; } /* ── 7. Typing indicator ─────────────────────────────────────────────────── */ .bragi-typing .bragi-bubble{ display:inline-flex; align-items:center; gap:5px; padding:16px 18px; } .bragi-dot{ width:7px; height:7px; border-radius:50%; background:var(--mid); animation:bragi-blink 1.2s infinite ease-in-out; } .bragi-dot:nth-child(2){ animation-delay:.18s; } .bragi-dot:nth-child(3){ animation-delay:.36s; } @keyframes bragi-blink{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } } /* ── 8. Error state (in-voice, inline assistant row) ─────────────────────── */ .bragi-msg--error .bragi-bubble{ background:var(--plaster); color:#4A4740; border:1px solid rgba(var(--true-north-rgb),0.4); box-shadow:var(--shadow-engraved-sm); } .bragi-retry{ margin-top:10px; align-self:flex-start; font-family:var(--font-body); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--true-north); background:var(--plaster); border:none; border-radius:2px; padding:10px 22px; cursor:none; box-shadow:var(--shadow-raised-sm); transition:box-shadow .3s, transform .3s; } .bragi-retry:hover{ box-shadow:var(--shadow-engraved-sm); transform:translateY(1px); } .bragi-retry:focus-visible{ outline:2px solid var(--true-north); outline-offset:2px; } /* CTA button rendered from any URL Bragi emits in a reply (e.g. the assessment link) */ .bragi-cta-button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start; margin-top:12px; padding:11px 24px; min-height:44px; max-width:100%; font-family:var(--font-body); font-size:12px; letter-spacing:1.5px; font-weight:600; text-transform:uppercase; text-decoration:none; overflow-wrap:anywhere; text-align:left; color:var(--plaster); background:var(--true-north); border:none; border-radius:2px; cursor:none; box-shadow:var(--shadow-raised-sm); transition:background .3s, transform .3s, box-shadow .3s; } .bragi-cta-button::after{ content:'→'; flex:0 0 auto; } .bragi-cta-button:hover{ background:var(--night); transform:translateY(-1px); box-shadow:var(--shadow-raised-hover); } .bragi-cta-button:active{ transform:translateY(1px); box-shadow:var(--shadow-engraved-sm); } .bragi-cta-button:focus-visible{ outline:2px solid var(--true-north); outline-offset:2px; } /* ── 9. Utilities ────────────────────────────────────────────────────────── */ .bragi-visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .bragi-disclaimer{ font-family:var(--font-body); font-size:11px; line-height:1.6; color:#4A4740; text-align:center; max-width:52ch; margin:4px auto 0; } /* (Homepage secondary CTA `.intro-cta-secondary` lives in style.css — the homepage doesn't load bragi.css, so the rule must ship in the global sheet.) */ /* ── 11. Responsive ──────────────────────────────────────────────────────── */ @media (max-width:900px){ .bragi-ask{ padding:96px 24px calc(24px + env(safe-area-inset-bottom)); } .bragi-headline{ font-size:clamp(28px,8vw,36px); } .bragi-bubble{ max-width:92%; } } @media (max-width:480px){ .bragi-headline{ font-size:clamp(24px,9vw,32px); } .bragi-send-label{ display:none; } .bragi-send{ padding:0 16px; } } /* ── 12. Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .bragi-composer,.bragi-log{ transition:none; } .bragi-log{ opacity:1; } body.bragi-active .bragi-log{ scroll-behavior:auto; } .bragi-dot{ animation:none; opacity:.6; } .bragi-chip,.bragi-send,.bragi-retry,.bragi-cta-button,.intro-cta-secondary{ transition:none; } }