/* ============================================================ Yani Heritage — BOLD FLAT theme in a heritage palette Saffron, Peshwa maroon, sandstone and teak; crisp edges, hard offset shadows. Variable names (--orange, --blue...) are kept from Yani so every component keeps working — only the colours changed. ============================================================ */ :root { --vh: 1vh; /* real 1% viewport height; refined by JS (common.js) for mobile chrome */ --orange: #e2711d; /* saffron (primary) */ --orange-deep: #c25a0c; --blue: #7a1f2b; /* Peshwa maroon (accent) */ --cyan: #b8860b; /* old brass */ --green: #2f7d4f; /* garden green */ --red: #b3261e; /* sindoor red */ --yellow: #e0a526; /* marigold */ --navy: #2b1a12; /* dark teak: text + borders */ --primary: var(--orange); --bg: #fffaf2; /* sandstone cream */ --bg-2: #f6ecdc; --surface: #ffffff; --surface-2: #f8f0e3; --border: #eadcc6; --line: #2b1a12; /* strong border for bold elements */ --text: #2b1a12; --muted: #6e5a4b; --bot-bubble: #f8f0e3; --user-bubble: var(--orange); --nav-h: 68px; --radius: 16px; } :root[data-theme="dark"] { --bg: #16100b; --bg-2: #1d150f; --surface: #221912; --surface-2: #2a1f17; --border: #3d2e22; --line: #ffffff; --text: #f6ede2; --muted: #c4ae98; --bot-bubble: #2a1f17; --user-bubble: var(--orange); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html.has-scroll-smooth { overflow: hidden; } /* Locomotive Scroll requires BOTH html and body hidden in smooth mode — without this, the real can still natively scroll independently of Locomotive's virtual transform, desyncing mouse-wheel input from the true scroll position (symptom: scrolling appears to "stick" before reaching the end of the page). */ html.has-scroll-smooth body { overflow: hidden; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } em { font-style: normal; color: var(--orange); } img { max-width: 100%; } /* ---------------- Preloader ---------------- */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--navy); } .preloader-inner { text-align: center; } .pl-face { width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 18px; background: var(--orange); display: flex; align-items: center; justify-content: center; gap: 9px; animation: plFaceIn .5s ease both; } .pl-face span { width: 10px; height: 24px; border-radius: 5px; background: #fff; animation: eyeBlink 1.7s infinite ease-in-out; } .pl-face span:nth-child(2) { animation-delay: .2s; } .pl-word { font-size: clamp(2.8rem, 9vw, 4.2rem); font-weight: 800; letter-spacing: -1px; line-height: 1; } .pl-word i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(-32px); animation: plDrop .6s cubic-bezier(.2,.9,.25,1) forwards; } .pl-word i:nth-child(1) { color: #f47b20; animation-delay: .15s; } /* Y */ .pl-word i:nth-child(2) { color: #35a94a; animation-delay: .27s; } /* a */ .pl-word i:nth-child(3) { color: #1e7bc4; animation-delay: .39s; } /* n */ .pl-word i:nth-child(4) { color: #e5202a; animation-delay: .51s; } /* i */ .pl-word i.pl-dot { color: #f9a825; animation-delay: .63s; } /* . */ .pl-tag { margin-top: 14px; font-size: .72rem; letter-spacing: 3px; color: #8ea0c0; opacity: 0; animation: plFade .5s .78s forwards; } .preloader-bar { width: 200px; height: 4px; margin: 24px auto 0; background: #23324f; border-radius: 999px; overflow: hidden; } .preloader-bar i { display: block; height: 100%; width: 0%; background: var(--orange); border-radius: 999px; transition: width .15s ease; } @keyframes plDrop { 0% { opacity: 0; transform: translateY(-32px); } 60% { opacity: 1; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes plFaceIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes plFade { to { opacity: 1; } } @keyframes eyeBlink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.15); } } /* ---------------- Custom cursor ---------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); } .cursor-dot { width: 7px; height: 7px; background: var(--orange); opacity: 0; transition: opacity .3s; } .cursor-ring { width: 38px; height: 38px; border: 2px solid var(--orange); display: grid; place-items: center; opacity: 0; transition: width .2s, height .2s, background .2s, opacity .3s; } body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring { opacity: 1; } .cursor-ring.is-hover { width: 60px; height: 60px; background: var(--orange); border-color: var(--orange); } .cursor-label { font-size: .58rem; font-weight: 800; letter-spacing: .5px; color: #fff; opacity: 0; transition: opacity .2s; text-transform: uppercase; } .cursor-ring.is-hover .cursor-label { opacity: 1; } .cursor-ring.named:not(.is-hover) .cursor-label { opacity: 0; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* ---------------- Nav ---------------- */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); padding: 0 clamp(14px, 3vw, 34px); background: var(--surface); border-bottom: 2px solid var(--navy); } :root[data-theme="dark"] .nav { border-bottom-color: var(--border); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-logo { height: 38px; width: auto; display: block; } :root[data-theme="dark"] .brand-logo { background: #fff; padding: 3px 6px; border-radius: 6px; } .brand-sep { width: 2px; height: 26px; background: var(--navy); } :root[data-theme="dark"] .brand-sep { background: var(--border); } .brand-name { font-weight: 800; font-size: 1.25rem; color: var(--navy); letter-spacing: .3px; } :root[data-theme="dark"] .brand-name { color: #fff; } .nav-links { display: flex; gap: 4px; } .nav-link { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--muted); transition: color .15s, background .15s; } .nav-link:hover { color: var(--orange); } .nav-link.is-active { color: #fff; background: var(--navy); } :root[data-theme="dark"] .nav-link.is-active { background: var(--orange); } .nav-actions { display: flex; align-items: center; gap: 10px; } .yantrix-badge img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--navy); transition: transform .15s; } :root[data-theme="dark"] .yantrix-badge img { border-color: var(--border); } .yantrix-badge:hover img { transform: rotate(-6deg) scale(1.06); border-color: var(--orange); } /* ---- Hamburger (CSS-only, no JS) ---- */ .nav-toggle { display: none; } /* hidden checkbox — state holder only */ .nav-hamburger { display: none; /* revealed below 780px */ flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; border: 2px solid var(--border); background: var(--surface); padding: 10px 11px; flex: none; transition: border-color .15s; } .nav-hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .25s, opacity .2s, width .2s; } :root[data-theme="dark"] .nav-hamburger span { background: #fff; } .nav-hamburger:hover { border-color: var(--orange); } /* Animate hamburger → X when checked */ .nav-toggle:checked ~ header .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ header .nav-hamburger span:nth-child(2) { opacity: 0; width: 0; } .nav-toggle:checked ~ header .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Full-screen overlay behind the drawer — tap to close */ .nav-overlay { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(14,27,51,.45); } .nav-toggle:checked ~ .nav-overlay { display: block; } @media (max-width: 780px) { .nav { gap: 10px; padding: 0 14px; } .nav .nav-cta { display: none; } /* redundant — "Chat" is in the links */ .brand-name, .brand-sep { display: none; } /* logo alone is enough */ /* Show the hamburger button */ .nav-hamburger { display: flex; } /* Mobile drawer — slides in from the top */ .nav-links { display: flex; flex-direction: column; gap: 0; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; background: var(--surface); border-bottom: 2px solid var(--navy); padding: 10px 12px 14px; transform: translateY(-110%); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s; pointer-events: none; box-shadow: 0 8px 24px rgba(14,27,51,.18); } :root[data-theme="dark"] .nav-links { border-bottom-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.5); } /* Open state */ .nav-toggle:checked ~ header .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-link { padding: 14px 16px; border-radius: 12px; font-size: 1.05rem; border-bottom: 1px solid var(--border); } .nav-link:last-child { border-bottom: none; } } /* 430px nav actions tighten */ @media (max-width: 430px) { .nav-actions { gap: 6px; } } /* ---------------- Buttons (flat, hard shadow) ---------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; border: 2px solid var(--navy); cursor: pointer; font: inherit; font-weight: 800; border-radius: 999px; padding: 11px 22px; transition: transform .12s, box-shadow .12s; } .btn:active { transform: translate(2px, 2px); box-shadow: none !important; } .btn-lg { padding: 15px 30px; font-size: 1.02rem; } .btn-primary { background: var(--orange); color: #fff; box-shadow: 4px 4px 0 var(--navy); } .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--navy); } .btn-ghost { background: var(--surface); color: var(--navy); box-shadow: 4px 4px 0 var(--navy); } :root[data-theme="dark"] .btn-ghost { color: #fff; border-color: var(--border); box-shadow: 4px 4px 0 var(--border); } .btn-ghost:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--navy); } :root[data-theme="dark"] .btn-ghost:hover { box-shadow: 6px 6px 0 var(--border); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--surface); color: var(--navy); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; } :root[data-theme="dark"] .icon-btn { color: #fff; } .icon-btn:hover { border-color: var(--orange); color: var(--orange); } .icon-btn:active { transform: scale(.94); } .btn:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* ---------------- Hero ---------------- */ .hero { position: relative; min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(40px,8vh,80px) clamp(16px, 5vw, 40px) clamp(60px,10vh,80px); overflow: hidden; background: var(--bg); } .hero-bg { position: absolute; inset: 0; z-index: 0; } /* solid flat decorative shapes (no blur) */ .orb { position: absolute; border-radius: 50%; } .orb--orange { width: 190px; height: 190px; left: 6vw; top: 26vh; background: var(--orange); opacity: .12; } .orb--blue { width: 150px; height: 150px; right: 8vw; top: 20vh; border: 10px solid var(--blue); opacity: .18; } .orb--green { width: 120px; height: 120px; left: 40vw; bottom: 8vh; background: var(--green); opacity: .12; border-radius: 24px; } @media (max-width: 720px) { .hero-bg { display: none; } } /* On very short viewports (landscape phones) hide scroll cue so it doesn't overlap CTA */ @media (max-height: 500px) { .scroll-cue { display: none; } } .hero-badges { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .float-badge { position: absolute; padding: 10px 18px; border-radius: 999px; font-size: .98rem; font-weight: 800; color: #fff; border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy); } .float-badge.b-orange { background: var(--orange); top: 24%; left: 12%; } .float-badge.b-blue { background: var(--blue); top: 30%; right: 13%; } .float-badge.b-green { background: var(--green); bottom: 24%; left: 17%; } @media (max-width: 720px) { .float-badge { display: none; } } .hero-inner { position: relative; z-index: 2; max-width: 900px; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: 2px; color: #fff; background: var(--blue); padding: 6px 14px; border-radius: 999px; margin: 0 0 20px; } .hero-title { font-size: clamp(3.4rem, 13vw, 9rem); line-height: .88; margin: 0 0 22px; font-weight: 800; letter-spacing: -2px; color: var(--navy); } :root[data-theme="dark"] .hero-title { color: #fff; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line span { display: inline-block; } /* Multicolor "Yani." wordmark in the heritage palette. */ .hero-title .yani i { font-style: normal; } .hero-title .yani i:nth-child(1) { color: #e2711d; } /* Y — saffron */ .hero-title .yani i:nth-child(2) { color: #7a1f2b; } /* a — maroon */ .hero-title .yani i:nth-child(3) { color: #b8860b; } /* n — brass */ .hero-title .yani i:nth-child(4) { color: #2f7d4f; } /* i — green */ .hero-title .yani i.dot { color: #e0a526; } /* . — marigold */ .hero-sub { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--muted); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; } .hero-sub b { color: var(--navy); } :root[data-theme="dark"] .hero-sub b { color: #fff; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-cue span { width: 2px; height: 32px; background: var(--orange); animation: scrollLine 1.8s infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------------- Sections ---------------- */ .section { position: relative; padding: clamp(60px, 12vh, 140px) clamp(16px, 6vw, 80px); max-width: 1200px; margin: 0 auto; } .section-head { margin-bottom: 46px; } .section-head.center { text-align: center; } .section-title { font-size: clamp(2rem, 5.5vw, 3.5rem); font-weight: 800; letter-spacing: -1px; line-height: 1.05; margin: 8px 0 0; color: var(--navy); } :root[data-theme="dark"] .section-title { color: #fff; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 22px; } .card { --c: var(--orange); background: var(--surface); border: 2px solid var(--navy); border-radius: 18px; padding: 26px; box-shadow: 5px 5px 0 var(--navy); transition: transform .15s, box-shadow .15s; } :root[data-theme="dark"] .card { border-color: var(--border); box-shadow: 5px 5px 0 var(--border); } .card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--c); border-color: var(--c); } .card-ic { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 16px; background: var(--c); } .card h3 { margin: 0 0 8px; font-size: 1.18rem; color: var(--navy); } :root[data-theme="dark"] .card h3 { color: #fff; } .card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; } .accent-orange { --c: var(--orange); } .accent-blue { --c: var(--blue); } .accent-green { --c: var(--green); } .accent-red { --c: var(--red); } .section--steps .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; } .step { --c: var(--orange); padding: 24px; border-radius: 16px; border: 2px solid var(--navy); background: var(--surface); box-shadow: 5px 5px 0 var(--c); } :root[data-theme="dark"] .step { border-color: var(--border); } .step-n { display: inline-block; font-size: .8rem; font-weight: 800; color: #fff; background: var(--c); padding: 4px 10px; border-radius: 6px; letter-spacing: 1px; } .step h3 { margin: 12px 0 6px; font-size: 1.12rem; color: var(--navy); } :root[data-theme="dark"] .step h3 { color: #fff; } .step p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; } .s-orange { --c: var(--orange); } .s-blue { --c: var(--blue); } .s-green { --c: var(--green); } .s-red { --c: var(--red); } .marquee-wrap { overflow: hidden; padding: 30px 0; background: var(--navy); } .marquee { display: inline-flex; gap: 26px; white-space: nowrap; font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; color: #fff; will-change: transform; } .marquee span:nth-child(4n+1) { color: var(--orange); } .marquee span:nth-child(4n+3) { color: var(--cyan); } .section--stats { text-align: center; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; } .stat b { display: block; font-size: clamp(2.2rem, 7vw, 4.2rem); font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; word-break: break-word; overflow-wrap: anywhere; } .stat:nth-child(2) b { color: var(--blue); } .stat:nth-child(3) b { color: var(--green); } .stat:nth-child(4) b { color: var(--red); } .stat span { color: var(--muted); font-size: .95rem; } /* CTA band (solid navy block) */ .cta-band { padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 60px); } .cta-inner { max-width: 900px; margin: 0 auto; text-align: center; background: var(--navy); color: #fff; border-radius: 26px; padding: clamp(28px, 7vw, 72px); } .cta-inner h2 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; } .cta-inner em { color: var(--yellow); } .cta-inner p { color: #b9c3d6; margin: 0 0 26px; } .cta-inner .btn-primary { box-shadow: 4px 4px 0 #000; } /* About hero */ .about-hero { position: relative; padding: clamp(70px, 12vh, 140px) clamp(20px, 6vw, 80px) 40px; max-width: 1000px; margin: 0 auto; text-align: center; } .about-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.02; margin: 6px 0 22px; color: var(--navy); } :root[data-theme="dark"] .about-title { color: #fff; } .about-lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.65; } .about-lead b { color: var(--orange); } /* ============================================================ CHAT PAGE ============================================================ */ .chatpage { padding: clamp(12px, 3vw, 26px); display: flex; justify-content: center; } .chat-shell { width: 100%; max-width: 860px; display: flex; flex-direction: column; height: calc(var(--vh, 1vh) * 100 - var(--nav-h) - clamp(24px, 6vw, 52px)); background: var(--surface); border: 2px solid var(--navy); border-radius: 20px; box-shadow: 8px 8px 0 var(--navy); overflow: hidden; } /* Chat page: no site header/footer — the chat fills the whole viewport. */ /* height (not min-height) caps the page at the viewport, so .chat's own overflow-y:auto actually scrolls instead of the whole page growing taller with every new message. */ body.page-chat { display: flex; flex-direction: column; height: calc(var(--vh, 1vh) * 100); overflow: hidden; } /* min-height:0 overrides the flexbox default (min-height:auto), which would otherwise let this grow to fit its content instead of staying capped at the viewport — the actual cause of the chat page growing taller with every message instead of scrolling internally ("flexbugs #1"). */ /* min-width:0 is the HORIZONTAL twin of the min-height:0 fix above: without it, a row-flex item won't shrink below its content's intrinsic min width (here, the composer's input+select+buttons row) and instead overflows the viewport sideways — the actual cause of the broken/cut-off mobile layout: .chatpage (and .chat-shell inside it) were rendering wider than the phone screen. */ body.page-chat > main { flex: 1; display: flex; min-height: 0; min-width: 0; } .page-chat .chatpage { flex: 1; min-height: 0; min-width: 0; } .page-chat .chat-shell { height: 100%; min-width: 0; } .brand-link { text-decoration: none; color: inherit; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-home { width: 40px; height: 40px; } .topbar-report { width: 40px; height: 40px; } .topbar-report:hover { border-color: var(--red); color: var(--red); } /* ---------------- Volunteer testing study ---------------- */ .test-gate { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: var(--bg); } .test-card { width: min(560px, 100%); background: var(--surface); border: 2px solid var(--navy); border-radius: 20px; box-shadow: 8px 8px 0 var(--navy); padding: 32px 30px; } :root[data-theme="dark"] .test-card { border-color: var(--border); box-shadow: 8px 8px 0 var(--border); } .test-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .test-brand img { height: 38px; width: auto; } .test-brand .test-brand-yantrix { height: 34px; border-radius: 8px; } .test-brand-sep { width: 2px; height: 26px; background: var(--border); } .test-card h1 { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; } .test-yani { color: var(--orange); } .test-sub { margin: 0 0 20px; color: var(--muted); font-size: .94rem; line-height: 1.6; } .test-steps { display: grid; gap: 8px; margin-bottom: 22px; } .test-step { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; } .test-step span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 800; flex: none; } .test-label { display: block; font-size: .8rem; font-weight: 800; margin-bottom: 6px; } .test-input { width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 12px; font: inherit; background: var(--bg); color: inherit; } .test-input:focus { outline: none; border-color: var(--orange); } .test-hint { margin: 6px 0 16px; font-size: .78rem; color: var(--muted); } .test-consent-details { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; background: var(--bg); } .test-consent-details summary { cursor: pointer; font-size: .85rem; font-weight: 700; } .test-consent-details ul { margin: 10px 0; padding-left: 20px; font-size: .84rem; line-height: 1.6; color: var(--muted); } .test-consent-details p { margin: 8px 0 4px; font-size: .82rem; color: var(--muted); line-height: 1.55; } .test-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: .85rem; line-height: 1.5; cursor: pointer; } .test-check input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--orange); } .test-err { background: var(--red); color: #fff; border-radius: 10px; padding: 9px 12px; font-size: .84rem; margin-bottom: 12px; } .test-err[hidden] { display: none; } .test-btn { width: 100%; justify-content: center; margin-top: 6px; } .test-tag { font-size: .58rem; font-weight: 900; letter-spacing: .8px; background: var(--orange); color: #fff; padding: 2px 6px; border-radius: 5px; vertical-align: middle; } .test-banner { background: #fff6ea; border-bottom: 2px solid var(--navy); color: #7a5210; padding: 9px 18px; font-size: .82rem; text-align: center; } :root[data-theme="dark"] .test-banner { background: #2a2113; color: #ffd79a; border-bottom-color: var(--border); } .rate { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); flex-wrap: wrap; } .rate-q { font-size: .78rem; color: var(--muted); font-weight: 600; } .rate-btn { border: 2px solid var(--border); background: var(--surface); border-radius: 9px; padding: 4px 10px; font-size: 1rem; cursor: pointer; line-height: 1.2; transition: transform .1s, border-color .15s; } .rate-btn:hover { border-color: var(--orange); transform: translateY(-1px); } .rate-btn:active { transform: scale(.94); } .rate-done { font-size: .8rem; color: var(--green); font-weight: 700; } /* Prominent "Submit study" action — volunteers must not miss this */ .finish-btn { padding: 10px 18px; font-size: .92rem; border-radius: 999px; white-space: nowrap; box-shadow: 3px 3px 0 var(--navy); } :root[data-theme="dark"] .finish-btn { box-shadow: 3px 3px 0 var(--border); } .finish-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); } @media (max-width: 560px) { .finish-btn { padding: 9px 12px; font-size: .84rem; } } .link-btn { background: none; border: none; color: var(--orange); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0 0 0 6px; text-decoration: underline; } .link-btn:hover { opacity: .8; } /* Shows which language the mic actually recognised */ .heard-tag { margin-top: 6px; font-size: .7rem; font-weight: 700; opacity: .75; letter-spacing: .2px; } /* Words land straight in the typing box while you speak. The input itself stays visually plain — the pulsing mic button below is the "recording" signal, so there's no tinted background competing with the text you're reading. */ /* Mic button pulses while recording */ .mic-btn.is-listening { background: var(--orange); color: #fff; border-color: var(--orange); animation: micPulse 1.2s ease-in-out infinite; } @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,106,26,.55); } 50% { box-shadow: 0 0 0 8px rgba(255,106,26,0); } } /* Prominent "Have a suggestion?" call-to-action under the composer */ .composer-actions { display: flex; justify-content: center; margin: 10px 0 2px; } .suggest-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); color: var(--navy); border: 2px dashed var(--orange); border-radius: 999px; padding: 10px 22px; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; transition: transform .12s, background .15s, box-shadow .12s; } :root[data-theme="dark"] .suggest-cta { color: #fff; } /* Hover styling only where a real pointer exists. On touch screens :hover "sticks" after a tap, which left this button looking permanently filled. */ @media (hover: hover) and (pointer: fine) { .suggest-cta:hover { background: var(--orange); color: #fff; border-style: solid; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,106,26,.35); } } .suggest-cta:active { transform: translateY(0); background: var(--orange); color: #fff; } @media (max-width: 480px) { .suggest-cta { font-size: .84rem; padding: 9px 16px; } } /* Highlighted confirmation panel inside the "Submit study" dialog */ .submit-note { background: var(--bg); border: 2px solid var(--orange); border-radius: 14px; padding: 16px 18px; margin-top: 18px; } .submit-note-row { display: flex; gap: 12px; align-items: flex-start; } .submit-note-row + .submit-note-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .submit-note-icon { font-size: 1.35rem; line-height: 1.2; flex: none; } .submit-note strong { display: block; font-size: .95rem; margin-bottom: 3px; } .submit-note p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); } .done-stats { display: flex; justify-content: center; gap: 34px; margin: 20px 0 6px; } .done-stats > div { display: flex; flex-direction: column; } .done-num { font-size: 2rem; font-weight: 900; color: var(--orange); line-height: 1; } .done-label { font-size: .78rem; color: var(--muted); margin-top: 4px; } .done-note { text-align: left; background: var(--bg); border: 1px dashed var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 18px; } .done-note p { margin: 6px 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted); } /* ---------------- Report-a-problem modal ---------------- */ .report-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(14, 27, 51, .55); } .report-modal[hidden] { display: none; } .report-modal-card { position: relative; background: var(--surface); color: var(--navy); border: 2px solid var(--navy); border-radius: 18px; box-shadow: 8px 8px 0 var(--navy); width: min(480px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px 24px 22px; } :root[data-theme="dark"] .report-modal-card { color: #fff; border-color: var(--border); box-shadow: 8px 8px 0 var(--border); } .report-modal-card h2 { margin: 0 0 6px; font-size: 1.25rem; } .report-sub { margin: 0 0 16px; font-size: .88rem; color: var(--muted); line-height: 1.5; } .report-close { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; } .report-close:hover { color: var(--red); } .report-label { display: block; font-size: .8rem; font-weight: 800; margin: 12px 0 6px; } .report-label .opt { font-weight: 500; color: var(--muted); } .report-input { width: 100%; padding: 11px 13px; border: 2px solid var(--border); border-radius: 12px; font: inherit; background: var(--bg); color: inherit; } .report-input:focus { outline: none; border-color: var(--orange); } textarea.report-input { resize: vertical; } .report-attach { margin: 14px 0 0; font-size: .8rem; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 12px; } .report-err { margin: 12px 0 0; font-size: .84rem; color: #fff; background: var(--red); border-radius: 10px; padding: 9px 12px; } .report-err[hidden] { display: none; } .report-err.report-ok { background: var(--green); } .report-actions-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .report-actions-row .btn { padding: 10px 18px; font-size: .92rem; } :root[data-theme="dark"] .chat-shell { border-color: var(--border); box-shadow: 8px 8px 0 var(--border); } .chat-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--navy); background: var(--surface); } :root[data-theme="dark"] .chat-topbar { border-bottom-color: var(--border); } .brand-text { min-width: 0; } .brand-text h1 { font-size: 1.1rem; margin: 0; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="dark"] .brand-text h1 { color: #fff; } .subtitle { margin: 2px 0 0; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--navy); flex: none; } .chat-topbar .brand { gap: 12px; } .status { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 2px solid var(--border); white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0ae; } .status--online .status-dot { background: var(--green); } .status--connecting .status-dot { background: var(--yellow); animation: pulse 1.2s infinite; } .status--offline .status-dot { background: var(--red); } /* On phones the status pill collapses to just its coloured dot to save width (the label is redundant — green/red reads fine on its own). */ @media (max-width: 600px) { .status .status-label { display: none; } .status { padding: 5px; border-width: 1.5px; } } .chat { flex: 1; overflow-y: auto; padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .msg { display: flex; max-width: 100%; animation: rise .2s ease; } .msg--user { justify-content: flex-end; } .msg--bot { justify-content: flex-start; } /* NOTE: no white-space:pre-wrap on the bubble itself. It used to be here to keep line breaks in answers, but bot answers are now real

/