/* ===================================================================== SRFi — SRF FY26 Annual Report assistant Cinematic layout: running SRF video backdrop → focused chat. Landing = full-screen video + centred glass ask panel. Chatting = video blurs back, answers read on a clean floating sheet. ===================================================================== */ :root { --teal-deep: #0E6E78; --teal: #12A0AE; --aqua: #2EC9B8; --accent: #009798; --brand-blue: #0095DA; --grad: linear-gradient(120deg, #0E6E78 0%, #12A0AE 48%, #2EC9B8 100%); --grad-light: linear-gradient(120deg, #7fe3d6 0%, #a9edff 100%); --ink: #15333a; --ink-soft: #5a727a; --ink-faint: #93a6ab; --line: #e6edee; --line-soft: #eef4f5; --white: #fff; --bg-dark: #06343b; --tint: rgba(18,160,174,.08); --tint-soft: rgba(18,160,174,.05); --f-head: "Manrope", "Avenir LT Std", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; --f-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --f-cover: "Cormorant Garamond", Georgia, "Times New Roman", serif; --r-pill: 999px; --r-card: 16px; --sh-card: 0 6px 22px rgba(6,52,59,.05); --sh-lift: 0 18px 40px rgba(6,52,59,.12); --sh-pop: 0 30px 80px rgba(6,40,46,.35); --ease: cubic-bezier(.22,.61,.36,1); --measure: 46rem; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none; } body { margin: 0; overflow: hidden; overscroll-behavior: none; font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg-dark); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4 { font-family: var(--f-head); margin: 0; line-height: 1.15; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } :focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px var(--teal); border-radius: 8px; } #site-waves { display: none; } /* ===================================================================== Running background video ===================================================================== */ /* Pinned app-shell: fixed to the viewport so has no in-flow scrollable height. Without this, a transient reflow during the landing→chatting switch let scrollIntoView scroll and drag the fixed-height header off-screen. */ .via-app { position: fixed; inset: 0; height: 100dvh; height: 100vh; overflow: hidden; } .via-bg { position: fixed; inset: 0; z-index: 0; background: var(--bg-dark); overflow: hidden; } .via-bg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: filter .8s var(--ease), transform .8s var(--ease); } .via-bg__veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(6,52,59,.35), rgba(6,52,59,.72) 70%), linear-gradient(180deg, rgba(6,52,59,.35) 0%, rgba(6,40,46,.68) 100%); transition: background .8s var(--ease); } /* video recedes once a conversation begins */ /* In the chat view the video is fully covered by a clean light field, so the sheet no longer reads as a hard card floating on dark video. */ .via-app.is-chatting .via-bg__video { display: none; } .via-app.is-chatting .via-bg__veil { background: #ffffff; } /* ===================================================================== Stage ===================================================================== */ .via-stage { position: relative; z-index: 2; height: 100dvh; height: 100vh; display: flex; flex-direction: column; } /* --- top bar (light chrome over the video) --- */ .via-top { flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 clamp(14px, 3vw, 30px); background: linear-gradient(180deg, rgba(6,40,46,.5), rgba(6,40,46,0)); } .via-app.is-chatting .via-top { background: #fff; border-bottom: 1px solid var(--line); } .via-app.is-chatting .via-top__brand img { background: transparent; padding: 0; } .via-app.is-chatting .via-bar__name { color: var(--teal-deep); } .via-app.is-chatting .via-bar__tag { color: var(--ink-soft); } .via-app.is-chatting .via-top__tool { border-color: var(--line); background: rgba(255,255,255,.65); color: var(--ink); } .via-app.is-chatting .via-top__tool svg { color: var(--teal); } .via-app.is-chatting .via-top__tool:hover { background: #fff; border-color: color-mix(in srgb, var(--teal) 45%, #fff); color: var(--teal-deep); } .via-app.is-chatting .via-top__back { color: var(--teal-deep); box-shadow: inset 0 0 0 1.5px var(--teal); } .via-app.is-chatting .via-top__back:hover { color: #fff; } .via-app.is-chatting .via-years { background: var(--tint); } .via-app.is-chatting .via-years__btn { color: var(--ink-soft); } .via-top__brand { display: flex; align-items: center; gap: 11px; } .via-top__brand img { height: 34px; width: auto; background: #fff; border-radius: 9px; padding: 4px 7px; } .via-top__mark { display: flex; flex-direction: column; line-height: 1; } .via-bar__name { font-family: var(--f-head); font-weight: 800; font-size: 1rem; letter-spacing: .01em; color: #fff; } .via-bar__tag { font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 4px; } .via-top__spacer { flex: 1; } .via-years { display: inline-flex; gap: 4px; padding: 3px; background: rgba(255,255,255,.14); border-radius: var(--r-pill); } .via-years[hidden] { display: none; } .via-years__btn { border: 0; background: transparent; color: rgba(255,255,255,.75); font-family: var(--f-head); font-weight: 700; font-size: .76rem; padding: 6px 12px; border-radius: var(--r-pill); } .via-years__btn.is-active { background: #fff; color: var(--teal-deep); } .via-top__tool { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-family: var(--f-head); font-weight: 600; font-size: .8rem; padding: 8px 13px; border-radius: var(--r-pill); transition: background .25s var(--ease), border-color .25s var(--ease); } .via-top__tool svg { color: var(--aqua); } .via-top__tool:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); } .via-top__tool:disabled { opacity: .4; cursor: not-allowed; } .via-top__back { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 700; font-size: .8rem; color: #fff; padding: 9px 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); transition: box-shadow .3s var(--ease); } .via-top__back span, .via-top__back svg { position: relative; z-index: 1; } .via-top__back::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s var(--ease); } .via-top__back:hover { box-shadow: inset 0 0 0 1.5px transparent; } .via-top__back:hover::before { opacity: 1; } /* --- body (holds landing hero OR conversation) --- */ .via-body { flex: 1; position: relative; min-height: 0; } /* landing hero */ .via-hero { position: absolute; inset: 0; display: flex; padding: 18px clamp(16px, 5vw, 40px) 24px; overflow-y: auto; } .via-app.is-chatting .via-hero { display: none; } /* margin:auto centres the block when it fits, but lets it scroll from the top (instead of clipping the title) on short viewports like the iPhone SE. */ .via-hero__inner { width: 100%; max-width: 816px; margin: auto; text-align: center; color: #fff; } .via-intro__eyebrow { font-family: var(--f-head); font-weight: 700; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--aqua); margin-bottom: 18px; } .via-intro__title { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 3.6rem); letter-spacing: -.02em; color: #fff; line-height: 1.02; text-shadow: 0 2px 30px rgba(0,0,0,.3); } .via-intro__title em { display: block; font-family: var(--f-cover); font-style: italic; font-weight: 500; letter-spacing: 0; background: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; } .via-intro__sub { margin: 20px auto 0; max-width: 34rem; color: rgba(255,255,255,.86); font-size: 1.06rem; line-height: 1.65; } /* conversation surface */ .via-conv { position: absolute; inset: 0; overflow-y: auto; display: none; padding: 26px clamp(14px, 4vw, 40px) 30px; } .via-app.is-chatting .via-conv { display: block; } .via-conv__sheet { max-width: 760px; margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: clamp(18px, 2.5vw, 34px) clamp(4px, 2vw, 20px) 8px; } /* ===================================================================== Composer (relocates between hero and dock) ===================================================================== */ .via-composer__inner { max-width: 640px; margin: 0 auto; } .via-composer__box { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-pill); padding: 7px 7px 7px 20px; box-shadow: 0 20px 50px rgba(6,40,46,.35); transition: box-shadow .25s var(--ease), border-color .25s var(--ease); } .via-composer__box:focus-within { border-color: var(--aqua); box-shadow: 0 24px 60px rgba(6,40,46,.45); } .via-composer__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--f-body); font-size: 1.02rem; color: var(--ink); padding: 11px 0; box-shadow: none;} .via-composer__input::placeholder { color: var(--ink-faint); } .via-composer__mic { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--teal-deep); display: inline-flex; align-items: center; justify-content: center; transition: background .25s var(--ease); } .via-composer__mic:hover { background: color-mix(in srgb, var(--teal) 22%, #fff); } .via-composer__mic.is-live { background: var(--grad); color: #fff; } .via-composer__send { width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(14,110,120,.4); transition: transform .2s var(--ease), opacity .25s var(--ease); } .via-composer__send:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); } .via-composer__send:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; } .via-disclaimer { margin: 12px auto 0; text-align: center; max-width: 40rem; font-size: .72rem; color: rgba(255,255,255,.66); line-height: 1.5; } .via-disclaimer strong { color: rgba(255,255,255,.86); font-weight: 700; } /* landing composer: larger, sits under the hero copy */ .via-hero__inner .via-composer { margin-top: 30px; } /* docked composer at the foot of the stage */ .via-dock { flex-shrink: 0; } .via-dock:empty { display: none; } .via-dock .via-composer { padding: 12px clamp(14px, 4vw, 40px) max(16px, env(safe-area-inset-bottom)); } .via-dock .via-composer__box { box-shadow: 0 14px 34px rgba(6,40,46,.4); } /* When chatting the surround is light, so the docked composer chrome and the disclaimer switch to ink text and a lighter shadow. */ .via-app.is-chatting .via-dock .via-composer__box { box-shadow: var(--sh-lift); border-color: var(--line); } .via-app.is-chatting .via-disclaimer { color: var(--ink-faint); } .via-app.is-chatting .via-disclaimer strong { color: var(--ink-soft); } /* ===================================================================== Starters (glass chips on the landing) ===================================================================== */ .via-starters { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .via-starters__hint { width: 100%; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.58); margin: 0 0 4px; } .via-ask { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: rgba(255,255,255,.94); font-family: var(--f-head); font-weight: 500; font-size: .86rem; padding: 10px 16px; border-radius: var(--r-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .22s var(--ease), border-color .22s var(--ease), transform .2s var(--ease); } .via-ask:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); transform: translateY(-2px); } .via-ask__arrow { display: none; } /* ===================================================================== Turn (question + trace + answer) — rendered inside the white sheet ===================================================================== */ #via-turns { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 42px); } .via-turn { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 4px; } .via-turn + .via-turn { padding-top: clamp(26px, 4vw, 42px); border-top: 1px solid var(--line); } .via-turn__gutter { padding-top: 4px; } .via-turn__num { font-family: var(--f-head); font-weight: 800; font-size: .82rem; letter-spacing: .04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .via-turn__body { min-width: 0; } .via-q__text { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.14rem, 2vw, 1.4rem); letter-spacing: -.01em; color: var(--ink); line-height: 1.25; } .via-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); } .via-trace__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } .via-trace.is-working .via-trace__dot { animation: via-pulse 1.2s var(--ease) infinite; } @keyframes via-pulse { 0% { box-shadow: 0 0 0 0 rgba(18,160,174,.45); } 70% { box-shadow: 0 0 0 7px rgba(18,160,174,0); } 100% { box-shadow: 0 0 0 0 rgba(18,160,174,0); } } .via-trace.is-working { color: var(--teal-deep); } .via-trace__src, .via-trace__years { text-transform: none; letter-spacing: .01em; font-weight: 600; color: var(--ink-soft); background: var(--tint); padding: 3px 10px; border-radius: var(--r-pill); font-size: .72rem; } /* Hide the cited-section chips in the retrieval trace. */ .via-trace__src { display: none; } .via-a__text { color: #26424a; font-size: 1.01rem; line-height: 1.75; } .via-a__text > *:first-child { margin-top: 0; } .via-a__text p { margin: 0 0 14px; } .via-a__text strong { color: var(--ink); font-weight: 700; } .via-a__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .via-a__text h1, .via-a__text h2, .via-a__text h3, .via-a__text h4 { font-weight: 800; color: var(--ink); margin: 22px 0 10px; letter-spacing: -.01em; } .via-a__text h1 { font-size: 1.3rem; } .via-a__text h2 { font-size: 1.15rem; } .via-a__text h3 { font-size: 1.02rem; } .via-a__text h4 { font-size: .95rem; } .via-a__text ul, .via-a__text ol { margin: 0 0 16px; padding-left: 1.35em; } .via-a__text li { margin: 6px 0; padding-left: 4px; } .via-a__text li::marker { color: var(--teal); } .via-a__text code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--tint); padding: 2px 6px; border-radius: 6px; color: var(--teal-deep); } .via-a__text pre { background: #0d2b31; color: #dff2f3; padding: 14px 16px; border-radius: 12px; overflow: auto; } .via-a__text pre code { background: transparent; color: inherit; padding: 0; } .via-a__text .codewrap { position: relative; margin: 0 0 16px; } .via-a__text .code-copy { position: absolute; top: 8px; right: 8px; border: 0; background: rgba(255,255,255,.14); color: #cdeff0; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); } .via-a__text table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: .92rem; } .via-a__text thead th { text-align: left; font-family: var(--f-head); font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-deep); padding: 10px 12px; border-bottom: 2px solid var(--line); } .via-a__text tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: #2f4750; } .via-a__text tbody tr:hover { background: var(--tint-soft); } .via-none__tag { display: inline-block; font-family: var(--f-head); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #b06a2b; background: rgba(214,150,73,.12); padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 12px; } /* data card */ .via-data { margin: 20px 0; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-card); } .via-data__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .via-data__title { font-family: var(--f-head); font-weight: 700; font-size: .95rem; color: var(--ink); } .via-data__unit { color: var(--ink-faint); font-weight: 600; } .via-data__delta { font-family: var(--f-head); font-weight: 800; font-size: .82rem; color: var(--accent); } .via-data__single { margin-top: 10px; font-family: var(--f-head); font-weight: 800; font-size: 2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .via-bars { display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 26px); margin-top: 22px; height: 150px; } .via-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; } .via-bars__val { font-family: var(--f-head); font-weight: 700; font-size: .82rem; color: var(--ink); } .via-bars__track { width: 100%; max-width: 58px; height: 100%; display: flex; align-items: flex-end; } .via-bars__bar { width: 100%; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--teal) 34%, #fff); min-height: 4px; transform-origin: bottom; } .via-bars__bar--accent { background: var(--grad); } .via-bars__label { font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-align: center; } :root:not([data-motion="off"]) .via-bars__bar { animation: via-grow .6s var(--ease) both; } @keyframes via-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* figures */ .via-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 156px)); justify-content: start; gap: 16px; margin: 20px 0; } .via-person { margin: 0; } .via-person .via-zoom { width: 100%; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--sh-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .via-person .via-zoom img { width: 100%; height: 100%; object-fit: cover; } .via-person .via-zoom:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); } .via-person__cap { display: flex; flex-direction: column; margin-top: 9px; } .via-person__name { font-family: var(--f-head); font-weight: 700; font-size: .84rem; color: var(--ink); } .via-person__role { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } /* Award / descriptive figures tile into a gallery grid instead of stacking full-width. Uniform cropped thumbnails; the full image opens in the lightbox. */ .via-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); justify-content: start; gap: 16px; margin: 20px 0; } .via-figure { margin: 20px 0; min-width: 0; } .via-figures .via-figure { margin: 0; } .via-figure .via-zoom { width: 100%; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--sh-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .via-figures .via-zoom { aspect-ratio: 16 / 10; } .via-figures .via-zoom img { width: 100%; height: 100%; object-fit: cover; } .via-figure .via-zoom:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); } .via-figure figcaption { margin-top: 8px; font-size: .76rem; color: var(--ink-soft); line-height: 1.4; } .via-figures figcaption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .via-zoom { cursor: zoom-in; display: block; } /* notes */ .via-notes { margin: 22px 0; padding: 16px 20px; background: var(--tint-soft); border: 1px solid color-mix(in srgb, var(--teal) 18%, #fff); border-left: 3px solid var(--teal); border-radius: 12px; } .via-notes__head { font-family: var(--f-head); font-weight: 800; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px; } .via-note + .via-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .via-note__ref { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 3px; } .via-note__text { font-size: .9rem; color: #2f4750; line-height: 1.55; } /* actions */ .via-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .via-action { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--f-head); font-weight: 600; font-size: .8rem; padding: 8px 15px; border-radius: var(--r-pill); transition: border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); } .via-action svg { width: 15px; height: 15px; color: var(--teal); } .via-action:hover { border-color: color-mix(in srgb, var(--teal) 45%, #fff); color: var(--teal-deep); transform: translateY(-1px); } .via-action:hover svg { color: var(--teal-deep); } .via-action.is-done { border-color: var(--aqua); color: var(--teal-deep); } .via-action--primary { border-color: transparent; color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(14,110,120,.26); } .via-action--primary svg { color: #fff; } .via-action--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--sh-lift); filter: brightness(1.04); } .via-action--compare svg { color: var(--brand-blue); } /* ===================================================================== Recent drawer (left) ===================================================================== */ .via-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(6,40,46,.5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); backdrop-filter: blur(2px); } .via-scrim.is-open { opacity: 1; visibility: visible; } .via-recent { position: fixed; top: 0; left: 0; z-index: 60; width: min(360px, 88vw); height: 100dvh; height: 100vh; background: #fff; box-shadow: var(--sh-pop); transform: translateX(-100%); transition: transform .34s var(--ease); display: flex; flex-direction: column; } .via-recent.is-open { transform: translateX(0); } .via-recent__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); } .via-recent__title { font-family: var(--f-head); font-weight: 800; font-size: 1.1rem; color: var(--teal-deep); } .via-recent__close { border: 0; background: var(--tint); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .via-recent__close:hover { background: color-mix(in srgb, var(--teal) 20%, #fff); color: var(--teal-deep); } .via-recent__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px; } .via-recent__note { padding: 12px 20px; font-size: .7rem; color: var(--ink-faint); border-top: 1px solid var(--line); } .via-recent__empty { color: var(--ink-soft); font-size: .9rem; padding: 18px 6px; text-align: center; } .via-recent__group { font-family: var(--f-head); font-weight: 800; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 8px 6px; } .via-recent__row { display: flex; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 12px; transition: background .2s var(--ease); } .via-recent__row:hover { background: var(--tint-soft); } .via-recent__item { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; border: 0; background: transparent; text-align: left; padding: 0; } .via-recent__title { display: block; max-width: 100%; font-family: var(--f-head); font-weight: 700; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .via-recent__snippet { display: block; max-width: 100%; font-size: .78rem; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .via-recent__time { display: block; font-size: .68rem; color: var(--ink-faint); margin-top: 3px; } /* Always visible (not hover-only) so they work on touch devices too. */ .via-recent__acts { display: flex; gap: 2px; flex-shrink: 0; } .via-recent__act { border: 0; background: transparent; color: var(--ink-faint); width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .via-recent__act:hover { background: var(--tint); color: var(--teal-deep); } /* Two-step delete: the confirm swaps the trash icon for the word "Delete?", so this state must size to the text instead of the 27px icon square. */ .via-recent__act.is-danger { width: auto; padding: 0 9px; font-family: var(--f-head); font-weight: 700; font-size: .68rem; white-space: nowrap; color: #c0392b; background: rgba(192,57,43,.1); } .via-recent__act.is-danger:hover { background: rgba(192,57,43,.18); color: #a5281c; } .via-recent__rename { width: 100%; border: 1px solid var(--teal); border-radius: 8px; padding: 6px 8px; font-family: var(--f-body); font-size: .86rem; color: var(--ink); } .via-recent__loading { color: var(--ink-soft); text-align: center; padding: 40px 0; font-size: .95rem; } /* ===================================================================== Sources drawer (right, on demand) ===================================================================== */ .via-sources { position: fixed; top: 0; right: 0; z-index: 60; width: min(400px, 92vw); height: 100dvh; height: 100vh; background: #fff; box-shadow: var(--sh-pop); transform: translateX(100%); transition: transform .34s var(--ease); overflow-y: auto; padding: 0; } .via-sources.is-open { transform: translateX(0); } .via-sources__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: #fff; border-bottom: 1px solid var(--line); } .via-sources__close { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tint); color: var(--ink); font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .via-sources__close:hover { background: color-mix(in srgb, var(--teal) 20%, #fff); color: var(--teal-deep); } .via-sources__title { font-family: var(--f-head); font-weight: 800; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); margin: 0; } #via-sources-body { padding: 16px 20px 30px; } .via-sources__empty { color: var(--ink-soft); font-size: .86rem; line-height: 1.6; } .via-source { padding: 14px 16px; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-card); transition: box-shadow .25s var(--ease), transform .2s var(--ease); } .via-source:hover { box-shadow: var(--sh-lift); transform: translateY(-1px); } .via-source__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .via-source__year, .via-source__page { font-family: var(--f-head); font-weight: 700; font-size: .66rem; letter-spacing: .04em; color: var(--teal-deep); background: var(--tint); padding: 3px 9px; border-radius: var(--r-pill); } .via-source__sec { font-size: .74rem; font-weight: 600; color: var(--ink-soft); } .via-source__quote { font-family: var(--f-cover); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ink); margin: 6px 0 12px; } .via-source__note { font-size: .8rem; color: var(--ink-faint); font-style: italic; margin: 4px 0 12px; } .via-source__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-head); font-weight: 700; font-size: .78rem; color: var(--teal); } .via-source__link:hover { color: var(--teal-deep); } /* Wide chat view: the Sources become a permanent right column, and the conversation is a solid-white left column from header to footer. */ @media (min-width: 1000px) { .via-app.is-chatting .via-stage { padding-right: 366px; } .via-app.is-chatting .via-sources { transform: none; width: 366px; z-index: 3; box-shadow: none; border-left: 1px solid var(--line); background: #fff; } .via-app.is-chatting .via-sources__close { display: none; } .via-app.is-chatting .via-sources-toggle { display: none !important; } } /* ===================================================================== Lightbox + voice orb ===================================================================== */ .via-lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 5vw; background: rgba(6,52,59,.78); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s var(--ease); } .via-lightbox.is-open { opacity: 1; } .via-lightbox__fig { margin: 0; width: auto; max-width: min(460px, 90vw); background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-pop); transform: scale(.97); transition: transform .2s var(--ease); } .via-lightbox.is-open .via-lightbox__fig { transform: scale(1); } /* width:auto (not 100%) so a small portrait shows at its native size instead of being upscaled into a blur; max-width/height only ever shrink it. */ .via-lightbox__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 66vh; margin: 0 auto; object-fit: contain; background: #f2f8f9; } .via-lightbox__cap { display: flex; flex-direction: column; padding: 14px 18px; } .via-lightbox__name { font-family: var(--f-head); font-weight: 700; color: var(--ink); } .via-lightbox__role { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; } .via-lightbox__close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; line-height: 1; } .via-lightbox__close:hover { background: rgba(255,255,255,.28); } .via-orb { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #0e4b54, var(--bg-dark) 70%); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .via-orb.is-open { opacity: 1; visibility: visible; } .via-orb__close { position: absolute; top: 24px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.7rem; } .via-orb__stage { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; } .via-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(46,201,184,.4); } .via-orb__ring--2 { inset: 26px; border-color: rgba(18,160,174,.34); } .via-orb__ring--3 { inset: 52px; border-color: rgba(0,149,218,.3); } :root:not([data-motion="off"]) .via-orb.is-open .via-orb__ring { animation: via-ring 3s var(--ease) infinite; } :root:not([data-motion="off"]) .via-orb.is-open .via-orb__ring--2 { animation-delay: .4s; } :root:not([data-motion="off"]) .via-orb.is-open .via-orb__ring--3 { animation-delay: .8s; } @keyframes via-ring { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.06); opacity: .4; } } .via-orb__ball { position: relative; width: 130px; height: 130px; border-radius: 50%; background: var(--grad); box-shadow: 0 18px 60px rgba(46,201,184,.4); } .via-orb__gloss { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.6), transparent 46%); } .via-orb__glyph { position: relative; z-index: 1; color: #fff; display: flex; align-items: center; justify-content: center; height: 100%; } /* Voice-mode text (was inheriting dark ink on the dark overlay). */ .via-orb__status { text-align: center; margin-top: 32px; } .via-orb__title { font-family: var(--f-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; color: #fff; } .via-orb__sub { margin-top: 7px; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.72); } .via-orb__heard { margin: 18px auto 0; max-width: 34rem; padding: 0 16px; text-align: center; font-family: var(--f-cover); font-style: italic; font-size: 1.4rem; line-height: 1.4; color: #eafcfa; min-height: 1.4em; } .via-orb__note { margin: 26px auto 0; max-width: 30rem; padding: 0 20px; text-align: center; font-size: .76rem; line-height: 1.5; color: rgba(255,255,255,.5); } .via-orb__close { z-index: 2; } .via-orb__close:hover { background: rgba(255,255,255,.24); } /* Spin the "Thinking" spinner glyph (orb.js sets data-state on the overlay). */ @keyframes via-spin { to { transform: rotate(1turn); } } :root:not([data-motion="off"]) .via-orb[data-state="thinking"] .via-orb__glyph { animation: via-spin .9s linear infinite; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 720px) { .via-top { height: 58px; gap: 6px; padding: 0 12px; } .via-top__mark { display: none; } .via-top__tool span, .via-top__back span { display: none; } .via-top__tool, .via-top__back { padding: 9px; } .via-top__back { width: 40px; height: 40px; justify-content: center; } .via-intro__title { font-size: clamp(2rem, 9vw, 2.6rem); } .via-conv__sheet { padding: 20px 18px; border-radius: 18px; } .via-turn { grid-template-columns: 26px minmax(0,1fr); } } @media (prefers-reduced-motion: reduce) { .via-bg__video { display: none; } .via-bg { background: radial-gradient(120% 90% at 50% 0%, #0e5b64, var(--bg-dark) 70%); } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }