/* ============================================ AI Admission Counselor - University of South Asia Locked Layout CSS - Mobile First ============================================ */ /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #0d1830; --bg-secondary: #0a0f1e; --bg-button: #1e3a6e; --accent-orange: #ffa524; --accent-blue: #4aa8ff; --panel-navy: #152449; --accent-purple: #7c3aed; --text-white: #ffffff; --text-gray: #a0a0b0; --border-orange: #ffa524; --header-height: 56px; --chat-height: 64px; --nav-height: 56px; } html, body { height: 100%; width: 100%; overflow: hidden; position: fixed; top: 0; left: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-primary); color: var(--text-white); } /* --- Welcome Popup --- */ .welcome-popup-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; /* Breathing room so the card never hugs the screen edges on short laptops. */ padding: 4vh 16px; box-sizing: border-box; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity 0.4s ease, visibility 0.4s ease; } .welcome-popup-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Pre-paint guard: once the popup was dismissed this session, hide it INSTANTLY (no flash / no fade) on every later page load. The script adds the .welcome-dismissed class before first paint. */ html.welcome-dismissed .welcome-popup-overlay { display: none !important; } .welcome-popup { position: relative; text-align: center; padding: 2rem 1.9rem 1.9rem; max-width: 92vw; width: 360px; /* Never exceed the viewport — scroll inside the card on short screens (uses dvh so mobile browser chrome is accounted for). */ max-height: calc(100dvh - 8vh); overflow-y: auto; background: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(255, 165, 36, 0.10) 0%, rgba(255, 165, 36, 0) 60%), linear-gradient(160deg, rgba(28, 33, 48, 0.55) 0%, rgba(16, 19, 30, 0.60) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow-x: hidden; animation: welcomePopupIn 0.5s cubic-bezier(0.21, 1, 0.36, 1) both; } @keyframes welcomePopupIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .welcome-popup-logo { width: 54px; height: auto; margin-bottom: 0.85rem; filter: drop-shadow(0 2px 8px rgba(255, 165, 36, 0.3)); } .welcome-popup-title { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 0.25rem; letter-spacing: 0.02em; } .welcome-popup-uni { font-size: 1.65rem; font-weight: 800; color: var(--accent-orange); line-height: 1.15; margin: 0 0 0.75rem 0; white-space: nowrap; } .welcome-popup-subtitle { font-size: 0.82rem; color: #b0b8cc; margin-bottom: 0.5rem; line-height: 1.5; text-align: center; } .welcome-popup-select-lang { font-size: 1.15rem; font-weight: 700; color: #ffffff; margin: 0 0 1rem 0; line-height: 1.3; } .welcome-popup-greeting { font-size: 1.05rem; font-weight: 700; color: #ffb347; margin: 0.1rem 0 0.4rem; line-height: 1.4; } .welcome-popup-fields { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 auto 0.9rem; width: 100%; max-width: 280px; } .welcome-popup-field { display: flex; flex-direction: column; gap: 0.2rem; } .welcome-popup-langs { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 0.15rem; } .welcome-popup-langs-label { font-size: 0.8rem; color: #b9c0d0; font-weight: 600; } .welcome-popup-langs-options { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1.4rem; } .welcome-lang-option { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #fff; font-size: 0.9rem; font-weight: 600; user-select: none; } .welcome-lang-option input[type="radio"] { accent-color: var(--accent-orange); width: 16px; height: 16px; margin: 0; cursor: pointer; } .welcome-lang-option span[lang="ur"] { font-size: 1.1rem; line-height: 1; } .welcome-popup-hint { font-size: 0.72rem; color: #8a93a8; text-align: left; padding-left: 0.2rem; line-height: 1.3; letter-spacing: 0.01em; } .welcome-popup-input { width: 100%; padding: 0.7rem 1rem; font-size: 0.88rem; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .welcome-popup-input::placeholder { color: #828ca2; } .welcome-popup-input:focus { border-color: var(--accent-orange); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(255, 165, 36, 0.18); } .welcome-popup-input.is-invalid { border-color: #ff5a5a; box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18); } .welcome-popup-error { color: #ff7a7a; font-size: 0.78rem; margin: 0.05rem 0 0; min-height: 1em; text-align: center; } .welcome-popup-btn { display: inline-block; width: 100%; max-width: 280px; margin-top: 0.5rem; padding: 0.78rem 3rem; font-size: 0.96rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #ffa524, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 165, 36, 0.4); letter-spacing: 0.02em; } .welcome-popup-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 165, 36, 0.55); } .welcome-popup-btn:active { transform: scale(0.97); } /* Known-user mode (no input fields): give clear breathing room between the "Welcome back" greeting and the button. */ .welcome-popup.is-known-user .welcome-popup-greeting { margin: 0.4rem 0 1.6rem; } .welcome-popup.is-known-user .welcome-popup-btn { margin-top: 0; } /* ---- Welcome popup: "Select Your Option" menu ---- */ .welcome-popup-options { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 300px; margin: 1rem auto 0; } .welcome-popup-options-title { font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; margin: 0 0 0.2rem; } .welcome-option-btn { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 14px; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .welcome-option-btn:hover { background: rgba(255, 165, 36, 0.16); border-color: var(--accent-orange); } .welcome-option-btn:active { transform: scale(0.98); } .welcome-option-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #ffa524, #FFA033); color: #000; font-weight: 800; font-size: 0.95rem; } .welcome-option-label { flex: 1; } .welcome-option-arrow { color: var(--accent-orange); font-size: 1.4rem; line-height: 1; font-weight: 700; } /* ---- Welcome popup: "Get Started" button (public home: language-only) ---- */ .welcome-get-started-btn { display: inline-block; width: 100%; max-width: 280px; margin-top: 1rem; padding: 0.82rem 3rem; font-size: 1rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #ffa524, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 165, 36, 0.4); letter-spacing: 0.02em; } .welcome-get-started-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 165, 36, 0.55); } .welcome-get-started-btn:active { transform: scale(0.97); } /* ---- Welcome popup: two language buttons (public home: English / Urdu) ---- */ .welcome-popup-lang-btns { display: flex; flex-direction: row; justify-content: center; gap: 0.9rem; width: 100%; max-width: 300px; margin: 1.1rem auto 0; } .welcome-lang-btn { flex: 1 1 0; padding: 0.82rem 0.5rem; font-size: 1rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #ffa524, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 165, 36, 0.4); letter-spacing: 0.02em; } .welcome-lang-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 165, 36, 0.55); } .welcome-lang-btn:active { transform: scale(0.97); } /* ---- Home welcome landing (no popup, direct landing) ---- */ .home-welcome-landing { max-width: 540px; margin: 0; padding: 26px 16px 28px 22px; } .home-welcome-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--accent-orange); margin: 0 0 18px; letter-spacing: 0.2px; } .home-welcome-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--text-white); margin: 0 0 12px; letter-spacing: 0.1px; } .home-welcome-highlight { color: var(--accent-orange); font-weight: 700; } .home-lets-talk-btn { display: inline-block; margin-top: 10px; padding: 12px 36px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 18px; font-weight: 700; color: #fff; background: var(--accent-orange); border: none; border-radius: 8px; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; box-shadow: 0 4px 18px rgba(255, 165, 36, 0.35); } .home-lets-talk-btn:hover { background: #e08a00; box-shadow: 0 6px 24px rgba(255, 165, 36, 0.5); } .home-lets-talk-btn:active { transform: scale(0.97); } /* Home page visual in the visual window */ .home-page-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; z-index: 10; background: var(--bg-primary); } @media (min-width: 769px) { .home-welcome-landing { max-width: 620px; padding-left: 44px; } .home-welcome-title { font-size: 34px; margin-bottom: 22px; } .home-welcome-body { font-size: 20px; margin-bottom: 14px; } .home-lets-talk-btn { font-size: 20px; padding: 14px 44px; } } /* ---- Home intro screen (Adam: Get Started -> spoken intro + clickable cards) ---- */ .home-intro { max-width: 540px; margin: 0; padding: 26px 16px 28px 22px; } .home-intro-greet { font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 26px; line-height: 1.35; color: var(--text-white); margin: 6px 0 18px; letter-spacing: 0.5px; } @keyframes homeIntroTitleBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .home-intro-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--accent-orange); margin: 0 0 20px; letter-spacing: 0.2px; animation: homeIntroTitleBlink 1.2s ease-in-out infinite; } .home-intro-row { margin-bottom: 18px; } .home-intro-head { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text-white); margin: 0 0 9px; letter-spacing: 0.2px; } .home-intro-head .hw-char, .home-intro-foot .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: inherit; } .home-intro-btn { display: inline-block; width: auto; min-width: 210px; max-width: 100%; padding: 0.62rem 1.15rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--accent-orange); background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(124, 142, 178, 0.38); border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .home-intro-btn:hover { background: rgba(255, 165, 36, 0.14); border-color: var(--accent-orange); } .home-intro-btn:active { transform: scale(0.98); } .home-intro-foot { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text-white); margin: 18px 0 0; letter-spacing: 0.1px; } /* Welcome-back screen body paragraph (reuses the .home-intro design; this is the one extra element the home-intro doesn't have). */ .welcome-back-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text-white); margin: 0 0 16px; letter-spacing: 0.1px; } /* Home-intro: hide the Back button + the empty header row, and start content at the TOP of the panel (it otherwise bottom-aligns chat messages). */ .app-shell.home-intro-active .chat-back-btn { display: none !important; } .app-shell.home-intro-active.welcome-back-mode .chat-back-btn { display: flex !important; } .app-shell.home-intro-active.welcome-back-mode .chat-panel-header { display: flex !important; } .app-shell.home-intro-active .chat-panel-header { display: none !important; } .app-shell.home-intro-active .voice-transcript-panel { justify-content: flex-start; align-items: flex-start; } /* Desktop: bigger fonts + more left breathing room (mobile keeps the base sizes above). */ @media (min-width: 769px) { .home-intro { max-width: 620px; padding-left: 44px; } .home-intro-title { font-size: 34px; margin-bottom: 24px; } .home-intro-head { font-size: 22px; margin-bottom: 11px; } .home-intro-btn { font-size: 18px; min-width: 240px; padding: 0.72rem 1.3rem; } .home-intro-foot { font-size: 20px; margin-top: 22px; } .home-intro-row { margin-bottom: 22px; } .welcome-back-body { font-size: 19px; margin-bottom: 20px; } } /* Bottom-nav "Goto" repurposed to an active "Demo" button during the home intro. */ .nav-btn.is-home-demo, .nav-btn.is-home-demo .nav-icon { color: var(--accent-orange); } /* Header: phone number stacked under the Apply Now button. */ .header-apply-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .header-phone { font-size: 12px; font-weight: 600; color: var(--text-white); letter-spacing: 0.2px; white-space: nowrap; text-align: center; /* Rendered as a tel: link, but click-to-call is enabled ONLY on touch devices (phones/tablets) below; on desktop it stays plain, inert text. */ text-decoration: none; pointer-events: none; cursor: default; } @media (hover: none) and (pointer: coarse) { .header-phone { pointer-events: auto; cursor: pointer; } } @media (min-width: 768px) { .welcome-popup { width: 390px; padding: 2.2rem 2.1rem 2.1rem; } .welcome-popup-logo { width: 60px; margin-bottom: 0.95rem; } .welcome-popup-title { font-size: 1.25rem; } .welcome-popup-uni { font-size: 1.9rem; } .welcome-popup-subtitle { font-size: 0.88rem; margin-bottom: 1.35rem; } .welcome-popup-fields { max-width: 300px; gap: 0.55rem; } .welcome-popup-input { padding: 0.74rem 1.05rem; font-size: 0.9rem; } .welcome-popup-btn { max-width: 300px; padding: 0.82rem 3rem; font-size: 1rem; } } @media (min-width: 1200px) { .welcome-popup { width: 410px; padding: 2.4rem 2.3rem 2.3rem; } .welcome-popup-logo { width: 64px; margin-bottom: 1.05rem; } .welcome-popup-title { font-size: 1.32rem; } .welcome-popup-uni { font-size: 2.05rem; } .welcome-popup-subtitle { font-size: 0.92rem; margin-bottom: 1.45rem; } .welcome-popup-fields { max-width: 310px; } .welcome-popup-input { padding: 0.78rem 1.1rem; font-size: 0.92rem; } .welcome-popup-btn { max-width: 310px; padding: 0.88rem 3.25rem; font-size: 1.04rem; } } /* Short laptop screens (13–14"): compress vertical rhythm so the whole card (especially WITH all three fields) fits without scrolling. */ @media (max-height: 720px) { .welcome-popup { padding: 1.6rem 1.8rem 1.7rem; } .welcome-popup-logo { width: 46px; margin-bottom: 0.6rem; } .welcome-popup-title { font-size: 1rem; margin-bottom: 0.15rem; } .welcome-popup-uni { font-size: 1.5rem; margin-bottom: 0.55rem; } .welcome-popup-subtitle { font-size: 0.8rem; margin-bottom: 0.9rem; } .welcome-popup-greeting { font-size: 1rem; margin: 0.1rem 0 0.3rem; } .welcome-popup-fields { gap: 0.4rem; margin-bottom: 0.7rem; } .welcome-popup-hint { font-size: 0.68rem; } .welcome-popup-input { padding: 0.58rem 0.95rem; } .welcome-popup-btn { padding: 0.68rem 2.5rem; margin-top: 0.35rem; } } @media (max-width: 380px) { .welcome-popup { padding: 2.25rem 1.4rem 2rem; border-radius: 20px; } .welcome-popup-logo { width: 52px; } .welcome-popup-title { font-size: 1.1rem; } .welcome-popup-uni { font-size: 1.6rem; white-space: normal; } .welcome-popup-subtitle { margin-bottom: 1.2rem; } .welcome-popup-fields { max-width: 100%; } .welcome-popup-input { padding: 0.7rem 1rem; } .welcome-popup-btn { max-width: 100%; padding: 0.8rem 2rem; font-size: 0.95rem; } } /* ============================================ MOBILE LAYOUT - Fixed 5 Component Positions Order: header → text → chat → visual → nav ============================================ */ .app-shell { display: grid; grid-template-areas: "header" "title" "text" "chat" "visual" "nav"; grid-template-rows: var(--header-height) auto 1fr var(--chat-height) 30vh var(--nav-height); height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } /* --- HEADER --- */ .app-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bg-secondary); border-bottom: 1px solid #707070; z-index: 100; } .header-left { display: flex; align-items: center; gap: 10px; } .header-brand-link { color: inherit; text-decoration: none; cursor: pointer; } .header-brand-link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; border-radius: 4px; } .header-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; } .header-title { display: flex; flex-direction: column; line-height: 1.2; } .header-uni { font-size: 14px; color: var(--text-white); font-weight: 600; } .header-south-asia { font-size: 16px; color: var(--accent-orange); font-weight: 700; } @keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(255, 165, 36, 0.28); } 50% { box-shadow: 0 3px 18px rgba(255, 165, 36, 0.55), 0 0 26px rgba(255, 165, 36, 0.22); } } .apply-now-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #ffa524 0%, #ff7a00 100%); color: #0a1128; font-size: 14px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.2; text-align: center; text-decoration: none; border: none; border-radius: 999px; cursor: pointer; white-space: nowrap; margin-right: 0; animation: btn-glow-pulse 2s ease-in-out infinite; } .apply-now-btn:hover { filter: brightness(1.05); } .apply-now-btn:active { filter: brightness(0.95); } /* --- Header hamburger menu (menu pages: replaces Apply Now + phone) --- */ .header-menu-wrap { position: relative; display: flex; align-items: center; } .header-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: transparent; border: none; border-radius: 10px; cursor: pointer; } .header-menu-btn .hmb-bar { display: block; width: 26px; height: 3px; border-radius: 999px; background: var(--accent-orange); transition: transform 0.2s ease, opacity 0.2s ease; } .header-menu-btn:hover, .header-menu-btn.is-open { background: rgba(255, 165, 36, 0.12); } .header-menu-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; } .header-menu-btn.is-open .hmb-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .header-menu-btn.is-open .hmb-bar:nth-child(2) { opacity: 0; } .header-menu-btn.is-open .hmb-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .header-menu-dropdown { position: absolute; top: calc(100% + 12px); right: 0; display: flex; flex-direction: column; gap: 8px; min-width: 260px; max-width: min(320px, calc(100vw - 24px)); max-height: min(70vh, 480px); overflow-y: auto; padding: 10px; background: var(--bg-secondary); border: 1px solid rgba(255, 165, 36, 0.45); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); z-index: 400; scrollbar-width: thin; scrollbar-color: rgba(255, 165, 36, 0.4) rgba(255, 255, 255, 0.05); } .header-menu-dropdown[hidden] { display: none; } /* Dropdown rows reuse the .menu-btn look; just size them for the panel. */ .header-menu-item { font-size: 14px; padding: 12px 38px 12px 14px; } /* --- TEXT WINDOW --- */ .text-window { grid-area: text; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 14px 14px; background: var(--bg-primary); -webkit-overflow-scrolling: touch; border-bottom: 1px solid #707070; position: relative; z-index: 1; /* Thin styled scrollbar - Firefox */ scrollbar-width: thin; scrollbar-color: rgba(255, 165, 36, 0.4) rgba(255, 255, 255, 0.05); } /* Styled scrollbar - WebKit (Chrome, Safari, new Edge) */ .text-window::-webkit-scrollbar { width: 14px; height: 0; } /* Floating "scroll down for more" indicator. Anchored to the bottom-center of the text window. JS toggles `.is-hidden` based on scroll position so the button only appears when there's content below the fold. */ .scroll-down-btn { position: sticky; bottom: 12px; left: 50%; transform: translateX(-50%); margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 165, 36, 0.55); background: rgba(20, 24, 48, 0.85); color: var(--accent-orange); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(255, 165, 36, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 5; opacity: 1; transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease; animation: scrollDownBob 1.6s ease-in-out infinite; } .scroll-down-btn:hover { background: rgba(255, 165, 36, 0.2); transform: translateX(-50%) translateY(-2px); } .scroll-down-btn:active { transform: translateX(-50%) scale(0.92); } .scroll-down-btn.is-hidden { opacity: 0; pointer-events: none; position: absolute; bottom: 12px; } @keyframes scrollDownBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } } /* Floating "scroll back up" indicator. Same visual style as the scroll-down button, but anchored to the TOP-center of the text window so it appears above the content (where the user wants to go) rather than at the bottom. JS ensures only one of the two is visible at a time. */ .scroll-up-btn { position: sticky; top: 12px; left: 50%; transform: translateX(-50%); margin-left: auto; margin-right: auto; /* Pull the button out of the normal flow vertically so it doesn't push content down when it appears. */ margin-bottom: -36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 165, 36, 0.55); background: rgba(20, 24, 48, 0.85); color: var(--accent-orange); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(255, 165, 36, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 5; opacity: 1; transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease; animation: scrollDownBob 1.6s ease-in-out infinite; } .scroll-up-btn:hover { background: rgba(255, 165, 36, 0.2); transform: translateX(-50%) translateY(-2px); } .scroll-up-btn:active { transform: translateX(-50%) scale(0.92); } .scroll-up-btn.is-hidden { opacity: 0; pointer-events: none; position: absolute; top: 12px; } /* While talking to AI Adam/Zara the conversation auto-scrolls to the newest message, so the floating scroll arrows are not needed — and they would otherwise overlap the chat bubbles. Hide them in voice-chat mode. */ .app-shell.voice-chat-mode .scroll-up-btn, .app-shell.voice-chat-mode .scroll-down-btn { display: none !important; } .screen-title { grid-area: title; font-size: 20px; font-weight: 700; font-style: normal; color: var(--accent-orange); margin: 0; padding: 16px; position: sticky; top: -10px; z-index: 10; background: var(--bg-primary); display: flex; align-items: center; gap: 10px; } .screen-title .back-btn { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: var(--accent-orange); padding: 4px; margin: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .screen-title .back-btn:hover { background: rgba(255, 165, 36, 0.12); } .screen-title .back-btn:active { transform: translateX(-2px); } .screen-title .back-btn svg { display: block; } .screen-title-text { flex: 1 1 auto; min-width: 0; } .screen-title-text--glow { animation: titleBlink 1.2s ease-in-out infinite; text-shadow: 0 0 8px rgba(255, 165, 36, 0.45), 0 0 16px rgba(255, 165, 36, 0.25); } /* Indented bullet points under category labels in eligibility/program sections */ .intro-new-line.intro-new-line--indented { padding-left: 44px; margin-left: 0; } .intro-new-line.intro-new-line--indented::before { left: 28px; } @keyframes titleBlink { 0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 165, 36, 0.45), 0 0 16px rgba(255, 165, 36, 0.25); } 50% { opacity: 0.45; text-shadow: 0 0 4px rgba(255, 165, 36, 0.25), 0 0 8px rgba(255, 165, 36, 0.15); } } .page-content { min-height: 100%; } .voice-transcript-panel { display: none; min-height: 100%; padding: 2px 0 10px; flex-direction: column; justify-content: flex-end; } .app-shell.voice-chat-mode .page-content { display: none; } .app-shell.voice-chat-mode .screen-title { display: none; } .app-shell.voice-chat-mode .voice-transcript-panel { display: flex; } /* Back button — pinned to top-right of chat panel, only visible while chatting. Uses position: sticky so it stays in place as the conversation scrolls. */ .chat-back-btn { position: sticky; top: 10px; z-index: 6; display: none; width: fit-content; margin: 10px 2px 4px auto; align-items: center; gap: 6px; padding: 7px 15px 7px 11px; background: rgba(16, 21, 44, 0.72); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .chat-back-btn:hover { background: rgba(28, 35, 66, 0.88); border-color: rgba(255, 165, 36, 0.55); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42); } .chat-back-btn:active { transform: scale(0.95); } .chat-back-btn svg { flex: 0 0 auto; color: var(--accent-orange); } .app-shell.voice-chat-mode .chat-back-btn { display: flex; } @media (max-width: 768px) { .chat-back-btn { top: 8px; margin: 8px 0 4px auto; padding: 6px 13px 6px 9px; font-size: 12px; } } /* ── Chat panel header row (status chip on the left, Back chip on the right) ── A sticky bar at the top of the chat panel, only visible while chatting. It keeps the live presence indicator and the Back button neatly on one line. */ .chat-panel-header { position: sticky; top: 10px; z-index: 6; display: none; align-items: center; justify-content: flex-end; gap: 10px; margin: 10px 2px 4px; } .app-shell.voice-chat-mode .chat-panel-header { display: flex; } /* Back button now lives inside the header row — neutralise its own sticky/margin so the header controls placement (it stays pushed to the right). */ .chat-panel-header .chat-back-btn { position: static; margin: 0; top: auto; } /* Presence "status chip" — a floating pill that sits just ABOVE the chat input (bottom-left of the chat bar) and shows Adam's live state during a call. */ .voice-status-chip { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 7; display: none; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 6px 13px 6px 10px; background: rgba(16, 21, 44, 0.85); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; animation: vscRise 0.22s ease-out; } .voice-status-chip.is-active { display: inline-flex; } .voice-status-text { overflow: hidden; text-overflow: ellipsis; } .voice-status-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--vsc-dot, var(--accent-orange)); } .voice-status-chip.is-listening { --vsc-dot: #3ad27e; } .voice-status-chip.is-speaking { --vsc-dot: #ffa524; } .voice-status-chip.is-thinking { --vsc-dot: #ffc34d; } .voice-status-chip.is-connecting { --vsc-dot: #8ab4ff; } .voice-status-chip.is-paused { --vsc-dot: #9aa4bf; } /* Connection-trouble state: the chip itself turns orange with a blinking background (overrides the dark bg) so "Internet unstable… please wait" is impossible to miss while Adam is frozen/reconnecting. */ .voice-status-chip.is-unstable { --vsc-dot: #ffd9a6; border-color: rgba(255, 180, 100, 0.45); background: rgba(180, 95, 0, 0.92); animation: vscRise 0.22s ease-out, vncPulseBg 1.1s ease-in-out infinite; } .voice-status-chip.is-unstable .voice-status-dot { animation: vscBlink 0.8s ease-in-out infinite; } .voice-status-chip.is-listening .voice-status-dot, .voice-status-chip.is-speaking .voice-status-dot { animation: vscPulse 1.2s ease-in-out infinite; } .voice-status-chip.is-thinking .voice-status-dot { animation: vscBlink 1s steps(2, start) infinite; } .voice-status-chip.is-connecting .voice-status-dot { animation: vscBlink 0.8s ease-in-out infinite; } @keyframes vscPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } @keyframes vscBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes vscRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── RIGHT-side network-status chip (above the Talk-to-Adam button) ── Shows "Internet unstable… please wait" with an orange blinking background while the live voice session is reconnecting, then "Switching to text mode" if recovery fails. Mirrors the left status chip but anchored to the right. */ .voice-net-chip { position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 7; display: none; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 6px 13px 6px 10px; color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; background: rgba(180, 95, 0, 0.92); animation: vscRise 0.22s ease-out, vncPulseBg 1.1s ease-in-out infinite; } .voice-net-chip.is-active { display: inline-flex; } .voice-net-text { overflow: hidden; text-overflow: ellipsis; } .voice-net-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #ffd9a6; animation: vscBlink 0.8s ease-in-out infinite; } /* "Switching to text mode" — steadier (solid) amber, no background blink so it reads as a final decision rather than a transient warning. */ .voice-net-chip.is-switching { background: rgba(150, 70, 0, 0.96); animation: vscRise 0.22s ease-out; } .voice-net-chip.is-switching .voice-net-dot { animation: none; background: #ffe2bd; } /* Orange background blink for the "Internet unstable" warning. */ @keyframes vncPulseBg { 0%, 100% { background: rgba(180, 95, 0, 0.92); } 50% { background: rgba(255, 165, 36, 0.96); } } /* Mic-enable prompt — a small card floating just above the chat bar, shown after Adam finishes the welcome-back greeting when the mic isn't granted yet. Tapping "Enable" triggers the browser's native permission prompt. */ .mic-enable-popup { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 10px); z-index: 9; display: none; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; color: var(--text-white); background: linear-gradient(135deg, #0a0f1e 0%, #0d1830 100%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); pointer-events: auto; animation: vscRise 0.22s ease-out; } .mic-enable-popup.is-visible { display: flex; } .mic-enable-popup-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(6, 182, 212, 0.18); color: #22d3ee; } .mic-enable-popup-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; } .mic-enable-popup-title { font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .mic-enable-popup-sub { font-size: 12px; font-weight: 500; opacity: 0.8; } .mic-enable-popup-btn { flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 999px; background: #06b6d4; color: #04293a; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .mic-enable-popup-btn:hover { background: #22d3ee; } .mic-enable-popup-btn:active { transform: scale(0.96); } .mic-enable-popup-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .mic-enable-popup-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } @media (max-width: 520px) { .mic-enable-popup-sub { display: none; } .mic-enable-popup-title { font-size: 13px; } } @media (max-width: 768px) { .chat-panel-header { top: 8px; margin: 8px 0 4px; } .voice-status-chip { font-size: 12px; padding: 5px 11px 5px 9px; left: 6px; bottom: calc(100% + 6px); } .voice-net-chip { font-size: 12px; padding: 5px 11px 5px 9px; right: 6px; bottom: calc(100% + 6px); } } /* Mobile keyboard open: collapse avatar + nav rows */ .app-shell.keyboard-open { grid-template-rows: var(--header-height) auto 1fr var(--chat-height) 0px 0px; } /* Choose Your Preferred Program Button (in title bar) */ .choose-program-btn { flex-shrink: 0; padding: 7px 15px 7px 15px; background: rgba(16, 21, 44, 0.72); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); animation: selectShake 3s ease-in-out infinite; } @keyframes selectShake { 0%, 85%, 100% { transform: translateX(0); } 88% { transform: translateX(-2px); } 91% { transform: translateX(2px); } 94% { transform: translateX(-1.5px); } 97% { transform: translateX(1px); } } .choose-program-btn--block { display: block; width: 100%; padding: 12px 18px; text-align: center; font-size: 14px; border-radius: 10px; margin-bottom: 6px; } /* Menu Buttons */ .menu-buttons { display: flex; flex-direction: column; gap: 10px; } .menu-btn { position: relative; display: flex; align-items: center; width: 100%; padding: 14px 44px 14px 15px; background: linear-gradient(180deg, #172a5c 0%, #0b2148 100%); color: #ffffff; border: 1px solid rgba(241, 142, 8, 0.30); border-left: 3px solid #f18e08; border-radius: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.2px; text-align: left; cursor: pointer; text-decoration: none; box-shadow: 0 3px 10px rgba(4, 10, 28, 0.45); transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease; } .menu-btn::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2.5px solid #f18e08; border-top: 2.5px solid #f18e08; transform: translateY(-50%) rotate(45deg); opacity: 1; transition: right 0.18s ease; } .menu-btn:hover { background: linear-gradient(180deg, #1d3468 0%, #102a58 100%); border-color: rgba(241, 142, 8, 0.65); border-left-color: #f18e08; box-shadow: 0 5px 14px rgba(4, 10, 28, 0.55); } .menu-btn:hover::after { right: 13px; } .menu-btn:active { transform: scale(0.985); } .menu-btn--disabled { opacity: 0.45; pointer-events: none; cursor: default; } /* "New" badge inside a menu-btn — solid orange pill with a soft pulse. */ .menu-btn-new-badge { margin-left: auto; margin-right: 0; padding: 4px 9px 3px; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #fff; background: #f18e08; border-radius: 999px; line-height: 1; flex-shrink: 0; animation: menuBtnNewGlow 1.6s ease-in-out infinite; } /* When a row carries a New badge, push it flush to the right edge and drop the hover chevron so they don't visually compete for the same slot. */ .menu-btn:has(.menu-btn-new-badge) { padding-right: 14px; } .menu-btn:has(.menu-btn-new-badge)::after { display: none; } @keyframes menuBtnNewGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 142, 8, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(241, 142, 8, 0); } } /* Extra row at the end of a menu list: two side-by-side external action buttons (Counsellor, Seminar). Sits inside .menu-buttons so it inherits the column's gap and width. Styled to match .apply-now-btn (pill shape, white border, glow-pulse animation). */ .menu-extra-row { display: flex; gap: 10px; width: 100%; } .menu-extra-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; white-space: nowrap; animation: btn-glow-pulse 2s ease-in-out infinite; } .menu-extra-btn.is-blue { background: linear-gradient(180deg, rgba(74, 93, 148, 0.55) 0%, rgba(54, 71, 119, 0.55) 100%); } .menu-extra-btn.is-orange { background: linear-gradient(135deg, #ffa524 0%, #ff6b00 100%); } .menu-extra-btn:hover { filter: brightness(1.05); } .menu-extra-btn:active { filter: brightness(0.95); } /* Section Buttons (on final program pages) - vertical column */ .section-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .section-buttons::-webkit-scrollbar { display: none; } .section-btn { padding: 14px 18px; background: var(--bg-button); color: var(--text-white); border: 1px solid transparent; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s; text-align: left; width: 100%; } .section-btn:hover, .section-btn.active { background: var(--accent-orange); color: var(--bg-primary); border-color: var(--accent-orange); } /* Section Content Panels */ .section-content { margin-top: 12px; } .section-panel { display: none; } .section-panel.active { display: block; } .section-heading { display: none; font-style: italic; font-weight: 700; color: var(--accent-orange); margin-bottom: 10px; } .section-text { font-size: 15px; line-height: 1.7; color: var(--text-white); font-style: italic; } /* Section Lines with Audio */ .section-lines { display: flex; flex-direction: column; gap: 6px; } .section-line { margin-bottom: 2px; } .section-text-urdu { color: #81c784; margin-top: 2px; } .line-audio-player { margin: 4px 0; } .line-audio-player audio { height: 28px; width: 240px; opacity: 0.8; } /* Intro Text */ .intro-text { font-size: 15px; line-height: 1.7; color: var(--text-white); font-style: italic; margin-bottom: 16px; } /* FAQ Section */ .faq-section { margin-top: 0; border-top: none; padding-top: 0; counter-reset: faq; } /* (Auto-advance progress bar removed — Next-button glow is used instead) */ .faq-title { font-size: 14px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 12px; } .faq-item { margin-bottom: 10px; counter-increment: faq; } .faq-btn { display: flex; align-items: flex-start; width: 100%; padding: 12px 16px; background: linear-gradient(180deg, #172a5c 0%, #0b2148 100%); color: #eef2ff; border: 1px solid rgba(241, 142, 8, 0.28); border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; text-align: left; cursor: pointer; box-shadow: 0 3px 10px rgba(4, 10, 28, 0.4); transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .faq-btn::before { content: "Q" counter(faq) ": "; color: #f7a239; font-weight: 700; margin-right: 6px; flex-shrink: 0; line-height: inherit; } .faq-btn:hover { background: linear-gradient(180deg, #1d3468 0%, #102a58 100%); border-color: rgba(241, 142, 8, 0.6); } .faq-btn:active { transform: scale(0.985); background: #0b2148; } .faq-answer { padding: 12px 16px; background: linear-gradient(180deg, #fdf5e8 0%, #f3e9d6 100%); border-left: 3px solid #f18e08; border-radius: 0 8px 8px 0; margin-top: 4px; font-size: 14px; line-height: 1.6; color: #2a3557; } .section-faqs-block { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 165, 36, 0.2); counter-reset: faq; } .section-faqs-block .faq-btn { margin-bottom: 10px; } .section-faqs-heading { color: var(--accent-orange); font-size: 14px; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.3px; } .source-label, .source-label-global { display: inline-block; font-size: 11px; color: var(--accent-orange); font-style: italic; margin-top: 8px; opacity: 0.8; } .source-label-global { display: none !important; } .source-label-inline { display: block; font-size: 11px; color: var(--accent-orange); font-style: italic; margin-top: 18px; margin-bottom: 6px; opacity: 0.8; text-align: right; } /* Back Link - hidden, use nav Prev button */ .back-link { display: none; } /* ============================================ Handwriting / Doodle Intro Animation ============================================ */ .intro-handwriting { position: relative; min-height: 80px; padding-bottom: 20px; } /* "Preparing content…" placeholder shown until the intro narration actually starts typing. Removed by JS as soon as the first character lands. */ .intro-loading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 400; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.6px; display: inline-flex; align-items: baseline; padding: 6px 0 14px; animation: introLoadingFade 1.8s ease-in-out infinite; } .intro-loading.is-hidden { display: none; } .intro-loading-dots { display: inline-flex; margin-left: 6px; color: var(--accent-orange); } .intro-loading-dots > span { opacity: 0; animation: introLoadingDot 1.2s infinite; } .intro-loading-dots > span:nth-child(2) { animation-delay: 0.2s; } .intro-loading-dots > span:nth-child(3) { animation-delay: 0.4s; } @keyframes introLoadingDot { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes introLoadingFade { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .intro-handwriting-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.8; color: var(--text-white); font-style: italic; overflow: hidden; padding-bottom: 20px; } /* The hand-written characters themselves use the 'Caveat' handwriting font so the pen genuinely looks like it's writing by hand. Scoped to .hw-char so the structured "new format" intro blocks (.intro-new-*) keep their Inter look. */ .intro-handwriting-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 23px; font-weight: 600; font-style: normal; letter-spacing: 0.3px; } @keyframes hwReveal { to { opacity: 1; } } .hand-icon { position: absolute; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: 10; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: handBob 0.2s ease-in-out infinite; } .hand-icon.is-paused { animation-play-state: paused; } @keyframes handBob { 0%, 100% { margin-top: 0px; } 50% { margin-top: -3px; } } /* New Format Program Introduction */ .intro-new-format { font-style: normal; } /* ── Hand-writing transcript (demo intro + welcome-back) ── Adam's words are written out by the hand icon in the self-hosted "Welcome Darling" handwriting font so the text genuinely looks hand-written by the pen. Scoped to Adam's transcript only (Maya's intro keeps Caveat). */ @font-face { font-family: 'welcomeDarling'; src: url("../fonts/welcomeDarling.542a80695d8a.woff") format('woff'); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-welcome-darling: 'welcomeDarling'; } .hw-transcript { position: relative; padding: 18px 16px 40px; } .hw-transcript-text { font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 21px; line-height: 1.5; color: var(--text-white); font-weight: 400; letter-spacing: 0.5px; overflow: hidden; } .hw-transcript-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; } .hw-transcript-hand { position: absolute; left: 0; top: 0; width: 38px; height: 38px; pointer-events: none; z-index: 10; opacity: 0; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); animation: handBob 0.2s ease-in-out infinite; } /* Turn finished writing: the pen stops bobbing and rests on the last character (the hand stays put until the next turn resumes writing). */ .hw-transcript-hand.is-resting { animation: none; } @media (max-width: 380px) { .hw-transcript-text { font-size: 17.5px; } } @media (min-width: 1200px) { .hw-transcript-text { font-size: 23px; } } .intro-new-opening { font-size: 15px; line-height: 1.6; color: var(--text-white); margin-bottom: 16px; } .intro-new-section { margin-bottom: 12px; } /* Accordion mode */ .intro-accordion-mode { padding: 0 4px; } .intro-accordion-item { margin-bottom: 6px; border: 1px solid rgba(255, 165, 36, 0.3); border-radius: 6px; overflow: hidden; } .intro-accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: rgba(255, 165, 36, 0.08); border: none; cursor: pointer; text-align: left; font-size: 13px; font-weight: 700; color: #ffa524; text-transform: uppercase; letter-spacing: 0.4px; transition: background 0.2s; } .intro-accordion-header:hover { background: rgba(255, 165, 36, 0.15); } .intro-accordion-header[aria-expanded="true"] { background: rgba(255, 165, 36, 0.15); } .intro-accordion-arrow { font-size: 10px; color: #ffa524; transition: transform 0.2s; margin-left: 8px; flex-shrink: 0; } .intro-accordion-body { padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .intro-accordion-header[aria-expanded="true"] + .intro-accordion-body { padding: 8px 14px 12px; overflow-y: auto; } .intro-accordion-subheading { margin-top: 8px; font-size: 13px; } .intro-accordion-body .intro-new-line { margin-bottom: 5px; } /* Roadmap semester tables */ .semester-dropdown { margin: 4px 0; border-radius: 6px; overflow: hidden; } /* Apply Now accordion item */ .intro-accordion-item--apply { border: 1.5px solid rgba(255, 165, 36, 0.7); box-shadow: 0 0 8px rgba(255, 165, 36, 0.35), 0 0 2px rgba(255, 165, 36, 0.2); } .intro-accordion-header--apply { background: linear-gradient(135deg, rgba(255, 165, 36, 0.22), rgba(255, 100, 0, 0.13)); font-size: 14px; padding: 12px 14px; color: #ffa524; font-weight: 700; text-shadow: 0 0 6px rgba(255, 165, 36, 0.4); } .intro-accordion-header--apply:hover { background: linear-gradient(135deg, rgba(255, 165, 36, 0.32), rgba(255, 100, 0, 0.2)); box-shadow: 0 0 12px rgba(255, 165, 36, 0.45); } .intro-accordion-body--apply { padding: 0 !important; } .intro-accordion-header--apply[aria-expanded="true"] + .intro-accordion-body--apply { padding: 0 !important; } .apply-now-iframe { width: 100%; min-height: 520px; border: none; display: block; } .apply-now-loader { padding: 30px 14px; text-align: center; color: #ffa524; font-size: 14px; font-weight: 600; } .semester-dropdown-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: rgba(255, 165, 36, 0.08); border: 1px solid rgba(255, 165, 36, 0.25); border-radius: 6px; padding: 8px 12px; color: #ffa524; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s; } .semester-dropdown-btn:hover { background: rgba(255, 165, 36, 0.15); } .semester-dropdown-arrow { font-size: 9px; transition: transform 0.2s; } .semester-dropdown-body { display: none; padding: 4px 0 8px 0; } .roadmap-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px 0; font-size: 13px; } .roadmap-table th { background: #ffa524; color: #fff; font-weight: 700; text-align: left; padding: 6px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .roadmap-table td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ddd; font-size: 11px; } .roadmap-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); } .roadmap-table td:first-child { width: 24px; text-align: center; font-weight: 600; color: #ffa524; } .roadmap-table td:nth-child(2) { font-weight: 600; } .intro-new-heading { font-size: 14px; font-weight: 700; color: #ffa524; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.5px; } .intro-new-line { font-size: 14px; line-height: 1.5; color: var(--text-white); margin: 0 0 3px 0; padding-left: 16px; position: relative; } .intro-new-line::before { content: '•'; position: absolute; left: 2px; color: #ffa524; } .intro-btn-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 14px; gap: 10px; } .intro-btn-row.apply-only { justify-content: center; padding: 0; margin-top: 18px; } .intro-faq-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #003366 0%, #005599 100%); color: #ffffff; font-size: 14px; font-weight: 700; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; animation: btn-glow-pulse 2s ease-in-out infinite; } .intro-apply-now { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #ffa524 0%, #ff6b00 100%); color: #ffffff; font-size: 14px; font-weight: 700; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; text-decoration: none; animation: btn-glow-pulse 2s ease-in-out infinite; } @keyframes introNewFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .intro-hidden { display: none !important; } .awaiting-selection { display: none !important; } /* --- AI Chat Messages --- */ .chat-message { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 12px 0; } .chat-message:first-of-type { margin-top: 4px; } .chat-message.user-message { justify-content: flex-end; } .chat-message.bot-message { justify-content: flex-start; } .chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; font-size: 11px; font-weight: 800; letter-spacing: 0; color: #ffffff; background: #32415f; border: 1px solid rgba(255,255,255,0.18); } .user-message .chat-avatar { background: var(--accent-orange); color: #101828; border-color: rgba(255,255,255,0.25); } .bot-message .chat-avatar { background: #0f766e; } .chat-content { display: flex; flex-direction: column; max-width: min(calc(100% - 46px), 680px); min-width: 0; } .user-message .chat-content { align-items: flex-end; max-width: min(78%, 640px); } .bot-message .chat-content { align-items: flex-start; } .chat-speaker { margin: 0 2px 4px; color: rgba(255,255,255,0.72); font-size: 11px; font-weight: 700; line-height: 1.2; } .chat-bubble { padding: 10px 14px; border-radius: 8px; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; line-height: 1.5; letter-spacing: normal; word-spacing: normal; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .user-message .chat-bubble { color: #ffffff; background: #26385f; border: 1px solid rgba(255,165,36,0.45); } .bot-message .chat-bubble { color: #f8fafc; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.24); } /* ── Queued message badge (shown when user speaks during greeting) ── */ .chat-queued-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 12px; background: rgba(255, 165, 36, 0.15); border: 1px solid rgba(255, 165, 36, 0.4); font-size: 0.75rem; color: #fbbf24; animation: queuedBadgePulse 1.2s ease-in-out infinite; } .chat-queued-badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; animation: queuedDotBlink 0.8s ease-in-out infinite alternate; } @keyframes queuedBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes queuedDotBlink { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 1; } } .bot-body, .user-body { display: inline; } .suggest-link { display: inline-flex; margin-top: 8px; color: var(--accent-orange); font-weight: 700; text-decoration: none; } .suggest-link:hover { text-decoration: underline; } /* ─── Apply Options Buttons ─────────────────────────────────── */ .apply-options-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(249, 141, 2, 0.3); border-radius: 12px; } .apply-options-title { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-align: center; margin-bottom: 12px; } .apply-options-buttons { display: flex; gap: 12px; justify-content: center; } .apply-option-btn { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: rgba(16, 29, 60, 0.8); cursor: pointer; transition: all 0.2s ease; } .apply-option-btn:hover { border-color: var(--accent-orange); background: rgba(249, 141, 2, 0.1); transform: translateY(-2px); } .apply-option-btn .apply-btn-icon { font-size: 1.5rem; } .apply-option-btn .apply-btn-label { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; font-weight: 700; color: #ffffff; } .apply-option-btn .apply-btn-desc { font-family: system-ui, -apple-system, sans-serif; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); } .apply-option-btn.ai-btn { border-color: rgba(249, 141, 2, 0.4); } .apply-option-btn.ai-btn:hover { background: rgba(249, 141, 2, 0.15); } /* Lead Success */ .lead-success-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 12px; display: flex; align-items: center; gap: 12px; } .lead-success-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(16, 185, 129, 0.2); border: 2px solid #10b981; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #10b981; flex-shrink: 0; } .lead-success-text { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; color: #a7f3d0; line-height: 1.4; } /* --- POST-SUBMISSION VOUCHERS (AI Adam apply flow) --- */ .voucher-success { width: 100%; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 12px; } .voucher-instructions { padding: 14px 16px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.32); border-radius: 12px; font-family: system-ui, -apple-system, sans-serif; } .voucher-instructions-title { font-size: 0.9rem; font-weight: 800; color: #67e8f9; margin-bottom: 8px; } .voucher-instructions-list { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.5; color: #cbd5e1; } .voucher-instructions-list li { margin-bottom: 5px; } .voucher-instructions-list strong { color: #e7eefc; } .voucher-card { padding: 14px 16px; background: rgba(245, 130, 32, 0.08); border: 1px solid rgba(245, 130, 32, 0.34); border-radius: 12px; font-family: system-ui, -apple-system, sans-serif; } .voucher-card-title { font-size: 0.85rem; font-weight: 800; color: #f8b07a; margin-bottom: 10px; } .voucher-card-list { display: flex; flex-direction: column; gap: 10px; } .voucher-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(245, 130, 32, 0.10); color: inherit; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .voucher-item:hover { background: rgba(245, 130, 32, 0.18); border-color: rgba(245, 130, 32, 0.5); } .voucher-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .voucher-item-info strong { font-size: 0.88rem; color: #fff; } .voucher-item-meta { font-size: 0.74rem; color: #9aa3b2; } .voucher-item-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 800; color: #f58220; white-space: nowrap; flex-shrink: 0; } .voucher-note { padding: 12px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; font-size: 0.8rem; color: #cbd5e1; font-family: system-ui, -apple-system, sans-serif; } /* --- REVIEW FORM --- */ .review-form-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: 12px; } .review-form-title { font-family: system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .review-form-subtitle { font-family: system-ui, -apple-system, sans-serif; font-size: 0.8rem; color: #94a3b8; margin-bottom: 12px; } .review-form { display: flex; flex-direction: column; gap: 10px; } .review-field { display: flex; flex-direction: column; gap: 3px; } .review-label { font-family: system-ui, -apple-system, sans-serif; font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .review-input { font-family: system-ui, -apple-system, sans-serif; font-size: 0.88rem; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(15, 23, 42, 0.6); color: #e2e8f0; outline: none; transition: border-color 0.2s; } .review-input:focus { border-color: #6366f1; } .review-input select { appearance: none; } .review-form-actions { margin-top: 12px; display: flex; justify-content: center; } .review-submit-btn { font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 600; padding: 10px 28px; border-radius: 8px; border: none; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .review-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); } .review-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .application-mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .application-mode-btn { min-height: 40px; padding: 8px 10px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; } .application-mode-btn.is-secondary { color: #f8fafc; background: rgba(16, 29, 60, 0.86); border-color: rgba(148, 163, 184, 0.34); } .application-mode-btn:hover { opacity: 0.92; } .chat-application-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.22); } .application-step-note { color: var(--accent-orange); font-size: 12px; font-weight: 800; line-height: 1.35; } .application-field { display: grid; gap: 5px; } .application-field span { color: rgba(255,255,255,0.72); font-size: 11px; font-weight: 700; } .application-field input { width: 100%; min-height: 38px; padding: 8px 10px; color: #ffffff; background: rgba(16, 29, 60, 0.86); border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 8px; font: inherit; outline: none; } .application-field input:focus { border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(255, 165, 36, 0.16); } .application-field.has-error input { border-color: #fb7185; box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.14); } .application-form-status { min-height: 16px; color: rgba(255,255,255,0.68); font-size: 12px; line-height: 1.35; } .application-form-status.is-error { color: #fecdd3; } .application-form-status.is-success { color: #bbf7d0; } .application-submit-btn { min-height: 40px; padding: 9px 14px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 800; transition: opacity 0.2s, transform 0.2s; } .application-submit-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); } .application-submit-btn:disabled { cursor: default; opacity: 0.7; } .application-next-step-actions { display: grid; gap: 8px; margin-top: 12px; } .application-next-step-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; } .application-next-step-btn.is-secondary { color: #f8fafc; background: rgba(16, 29, 60, 0.86); border-color: rgba(148, 163, 184, 0.34); } .application-next-step-btn:hover { opacity: 0.92; } /* --- CHAT BAR --- */ .chat-bar { grid-area: chat; position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 4px; background: var(--bg-secondary); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } /* 75/25 split wrapper: input+send on the left, talk-btn on the right */ .chat-input-wrap { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; height: 48px; } .chat-input { width: 100%; padding: 5px 48px 5px 14px; /* right padding leaves room for the embedded send */ /* Always-on CALM animated ORANGE border (idle): muted orange tones + slow spin (matches the Apply Now button palette). Brightens to full orange + faster spin during live voice states via .is-voice-status / .is-ai-speaking / .is-resume-glow below. */ border: 2px solid transparent; background: linear-gradient(rgb(16, 29, 60), rgb(16, 29, 60)) padding-box, conic-gradient( from var(--ai-border-angle), rgba(255, 165, 36, 0.38), rgba(255, 179, 71, 0.30), rgba(255, 107, 0, 0.38), rgba(255, 210, 127, 0.26), rgba(255, 165, 36, 0.38) ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 9s linear infinite; border-radius: 8px; color: var(--text-white); font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; letter-spacing: normal; outline: none; height: 48px; min-height: 48px; max-height: 48px; text-align: left; resize: none; box-sizing: border-box; overflow: hidden; } /* Chat input placeholder ("Type a message…"). ONE font across the whole project and every state (idle, listening, speaking, thinking, paused) so the prompt always looks identical: big, bold, white. */ .chat-input::placeholder { color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: 0.3px; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 380px) { .chat-input::placeholder { font-size: 16px; } } /* LIVE VOICE STATUS — shown big + bold inside the chat input while a voice call is active ("Adam is listening / speaking / thinking / paused"). Overrides the normal placeholder so the state reads clearly at a glance. The live-state "Type a message…" prompt (.is-live) shares this exact font so every state looks identical. */ .chat-input.is-voice-status::placeholder, .chat-input.is-live::placeholder { color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: 0.3px; opacity: 1; } @media (max-width: 380px) { .chat-input.is-voice-status::placeholder, .chat-input.is-live::placeholder { font-size: 16px; } } .chat-input:focus { /* Keep the animated gradient border on focus (don't replace with a solid). */ border-color: transparent; } /* --- AI SPEAKING: animated colorful rotating border around the input --- */ /* Applied via JS (chatInput.classList.add('is-ai-speaking')) while Adam is producing/playing a response. Uses a conic-gradient whose angle is animated via the registered custom property `--ai-border-angle`, so the colors truly travel around the perimeter of the input instead of sliding off one side. */ @property --ai-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } .chat-input.is-ai-speaking, .chat-input.is-resume-glow, .chat-input.is-voice-status { border: 2px solid transparent; background: linear-gradient(rgb(16, 29, 60), rgb(16, 29, 60)) padding-box, conic-gradient( from var(--ai-border-angle), #ffa524, #ffb347, #ff6b00, #ffd27f, #ffa524 ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 3s linear infinite; } .chat-input.is-ai-speaking:focus, .chat-input.is-resume-glow:focus, .chat-input.is-voice-status:focus { /* Keep the animated border instead of the static orange focus border. */ border-color: transparent; } /* LIVE CONVERSATION — the input stays "Type a message…" but rendered in an elegant, professional bold style with the bright animated border, so it's clearly an active session. The live state (listening / speaking / thinking) is shown on the Talk button, never here. */ .chat-input.is-live { border: 2px solid transparent; background: linear-gradient(rgb(16, 29, 60), rgb(16, 29, 60)) padding-box, conic-gradient( from var(--ai-border-angle), #ffa524, #ffb347, #ff6b00, #ffd27f, #ffa524 ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 3s linear infinite; } .chat-input.is-live:focus { border-color: transparent; } @keyframes aiSpeakingBorder { to { --ai-border-angle: 360deg; } } /* Fallback for browsers that don't support @property (the colors will still travel, just via a sliding linear gradient, never fully disappearing because the gradient repeats). */ @supports not (background: conic-gradient(from 0deg, red, blue)) { .chat-input { background: linear-gradient(rgb(16, 29, 60), rgb(16, 29, 60)) padding-box, linear-gradient(90deg, rgba(255,165,36,0.38), rgba(255,179,71,0.30), rgba(255,107,0,0.38), rgba(255,210,127,0.26), rgba(255,165,36,0.38) ) border-box; background-size: 100% 100%, 200% 100%; animation: aiSpeakingBorderFallback 9s linear infinite; } .chat-input.is-ai-speaking, .chat-input.is-resume-glow, .chat-input.is-voice-status { background: linear-gradient(rgb(16, 29, 60), rgb(16, 29, 60)) padding-box, linear-gradient(90deg, #ffa524, #ffb347, #ff6b00, #ffd27f, #ffa524 ) border-box; background-size: 100% 100%, 200% 100%; animation: aiSpeakingBorderFallback 3s linear infinite; } @keyframes aiSpeakingBorderFallback { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 200% 50%; } } } /* Adam direct-landing overlay — RETIRED. The welcome text overlay and the Adam-right video pan were removed on all screens; the avatar keeps its natural centered framing. */ .chat-mic-btn { width: 44px; height: 44px; border-radius: 8px; background: var(--accent-purple); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; transition: background 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s, opacity 0.2s; box-shadow: 0 8px 18px rgba(0,0,0,0.24); } .chat-mic-btn:hover { opacity: 0.95; } /* Mic icon set — legacy (icon-only mic button removed; kept for any remnant references) */ .chat-mic-btn { display: none; } .chat-mic-btn .mic-icon-stop { display: none; } .chat-mic-btn .mic-icon-muted { display: none; } .chat-mic-btn .mic-icon-default { display: none; } /* ── Mic button (right side): circular green mic with amber ring — the ONE mic style across the whole project (idle AND live). The home idle screen hides this button entirely (it has the circuit mic panel instead). ── */ .chat-talk-btn { flex: 0 0 64px; width: 64px; height: 64px; margin: -8px 2px; padding: 4px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; z-index: 20; color: #cfe4ff; background: conic-gradient(from 220deg, #ffce85, #ffa524 30%, #ff8a00 55%, #ffa524 80%, #ffce85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 0 16px rgba(255, 165, 36, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); transition: box-shadow 0.2s, filter 0.2s; } /* Deep-blue face inside the amber ring while the mic is NOT live (matches the header/site navy-blue); turns GREEN during an active call below. */ .chat-talk-btn::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #1d3a78 0%, #12234e 48%, #0a1530 100%); box-shadow: inset 0 0 14px rgba(74, 168, 255, 0.25), inset 0 -4px 10px rgba(0, 0, 0, 0.5); pointer-events: none; } /* Live call: the mic is hot — the face turns GREEN. */ .app-shell.voice-chat-mode .chat-talk-btn::before { background: radial-gradient(circle at 50% 34%, #14503a 0%, #0a2e20 48%, #071d15 100%); box-shadow: inset 0 0 14px rgba(58, 210, 126, 0.22), inset 0 -4px 10px rgba(0, 0, 0, 0.5); } .chat-talk-btn:hover { filter: brightness(1.06); } .chat-talk-btn:focus, .chat-talk-btn:focus-visible { outline: none; } /* Icon set: live mic by default, slashed mic while muted/paused/resumable. The glyph carries a continuous gentle BLINK so the mic reads as alive. */ .chat-talk-btn .mic-btn-icon { display: block; flex-shrink: 0; width: 30px; height: 30px; position: relative; z-index: 1; filter: drop-shadow(0 0 5px rgba(190, 220, 255, 0.55)); animation: micGlyphBlink 1.8s ease-in-out infinite; } @keyframes micGlyphBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Listening: amber glow breathing on the ring (keyframes in live section) */ .chat-talk-btn.is-listening { animation: liveMicGlow 2.1s ease-in-out infinite; } /* Paused / muted / resume / disabled: dimmed, glyph steady */ .chat-talk-btn.is-mic-muted, .chat-talk-btn.is-paused, .chat-talk-btn.is-resume { animation: none; filter: grayscale(0.45) brightness(0.85); } .chat-talk-btn:disabled .mic-btn-icon, .chat-talk-btn.is-mic-muted .mic-btn-icon, .chat-talk-btn.is-paused .mic-btn-icon, .chat-talk-btn.is-resume .mic-btn-icon { animation: none; opacity: 1; } @media (min-width: 769px) { .chat-talk-btn { flex: 0 0 68px; width: 68px; height: 68px; margin: 0 4px; } .chat-talk-btn .mic-btn-icon { width: 32px; height: 32px; } } /* ── "Connecting to Adam…" loading pill (above the chat bar) ─────────── */ .adam-loading-pill { position: absolute; left: 50%; top: -46px; transform: translateX(-50%) translateY(8px); display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(16, 29, 60, 0.97); border: 1px solid rgba(255, 165, 36, 0.45); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 165, 36, 0.15); color: #ffffff; font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 60; } .adam-loading-pill.is-active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .adam-loading-pill .alp-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 165, 36, 0.25); border-top-color: var(--accent-orange, #ffa524); animation: alpSpin 0.8s linear infinite; flex-shrink: 0; } @keyframes alpSpin { to { transform: rotate(360deg); } } .adam-loading-pill .alp-dots span { display: inline-block; animation: alpDot 1.2s infinite; } .adam-loading-pill .alp-dots span:nth-child(2) { animation-delay: 0.2s; } .adam-loading-pill .alp-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes alpDot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } /* ── Radar/sonar connecting animation (over the blinking-Adam visual) ─── */ .adam-radar-overlay { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; overflow: hidden; } .adam-radar-overlay.is-active { display: block; } .adam-radar-overlay .radar-ring { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 2px solid rgba(255, 165, 36, 0.55); box-shadow: 0 0 18px rgba(255, 165, 36, 0.25), inset 0 0 12px rgba(255, 165, 36, 0.15); animation: radarPulse 2.4s ease-out infinite; opacity: 0; } .adam-radar-overlay .radar-ring.r2 { animation-delay: 0.8s; } .adam-radar-overlay .radar-ring.r3 { animation-delay: 1.6s; } @keyframes radarPulse { 0% { opacity: 0.85; transform: scale(0.4); } 80% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } } .adam-radar-overlay .radar-sweep { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 165, 36, 0.28) 0deg, rgba(255, 165, 36, 0) 70deg, transparent 360deg); animation: radarSweep 2.6s linear infinite; -webkit-mask-image: radial-gradient(circle, black 0%, black 62%, transparent 66%); mask-image: radial-gradient(circle, black 0%, black 62%, transparent 66%); } @keyframes radarSweep { to { transform: rotate(360deg); } } .chat-talk-btn .mic-btn-icon-live { animation: micIconPulse 2.4s linear infinite; } @keyframes micIconPulse { 0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 3px rgba(190, 220, 255, 0.45)); } 50% { transform: scale(1.08); opacity: 0.45; filter: drop-shadow(0 0 9px rgba(190, 220, 255, 0.9)); } } .chat-talk-btn:disabled .mic-btn-icon-live { animation: none; } .chat-talk-btn .mic-btn-icon-muted { display: none; } .chat-talk-btn.is-mic-muted .mic-btn-icon-live, .chat-talk-btn.is-paused .mic-btn-icon-live, .chat-talk-btn.is-resume .mic-btn-icon-live { display: none; } .chat-talk-btn.is-mic-muted .mic-btn-icon-muted, .chat-talk-btn.is-paused .mic-btn-icon-muted, .chat-talk-btn.is-resume .mic-btn-icon-muted { display: block; } /* Talk-btn states (applied via JS on #mic-btn, which is now the talk btn) */ .chat-talk-btn.is-listening { background: #0a0f1e; } .chat-talk-btn.is-paused { background: #0a0f1e; } .chat-talk-btn.is-resume { background: #0a0f1e; } @keyframes talkBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 36, 0.45), 0 0 10px rgba(255, 165, 36, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(255, 165, 36, 0.16), 0 0 22px rgba(255, 165, 36, 0.60); } } @keyframes talkBtnPausePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ── Embedded send button (inside the input, right edge) ───────────────── */ .chat-send-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 6px; background: var(--accent-orange); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; z-index: 1; } .chat-send-btn:hover { opacity: 0.85; } /* Disabled state for chat controls (used while Adam is answering). */ .chat-talk-btn:disabled, .chat-mic-btn:disabled, .chat-send-btn:disabled, .chat-input:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(0.3); } /* Keep the animated rainbow border visible even when the input is disabled. */ .chat-input.is-ai-speaking:disabled { opacity: 1; filter: none; } /* --- VISUAL WINDOW --- */ .visual-window { grid-area: visual; overflow: hidden; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; position: relative; /* The avatar/video area is tap-to-pause everywhere (live Adam + narration), so signal it's interactive on every page. */ cursor: pointer; } .visual-window:active { /* subtle press feedback so the tap-to-pause gesture feels responsive */ filter: brightness(0.97); } .avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .avatar-image-fallback { z-index: 0; } .avatar-idle-video { z-index: 1; } .avatar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 3; transition: opacity 0.3s ease; } /* Second lipsync buffer — stacked on top for seamless crossfade looping */ .avatar-video-b { z-index: 4; } /* Hide Maya/Sam idle video during voice chat mode */ .app-shell.voice-chat-mode .avatar-idle-video { display: none !important; } /* Connecting Overlay (LEGACY ring — replaced by the radar/sonar; never shown) */ .avatar-connecting-overlay { display: none !important; } .avatar-connecting-overlay--legacy-unused { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: rgba(10, 10, 20, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; animation: connFadeIn 0.3s ease; } .avatar-connecting-overlay.is-active { display: flex; } .conn-card { display: flex; flex-direction: column; align-items: center; gap: 14px; } .conn-ring { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; } .conn-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .conn-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3; } .conn-ring-progress { fill: none; stroke: #ffa524; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 170; animation: connRingSpin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .avatar-connecting-overlay.is-reconnecting .conn-ring-progress { stroke: var(--accent-orange, #f98d02); } /* Adam's circular face inside the connecting ring. */ .conn-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid rgba(255, 165, 36, 0.65); box-shadow: 0 0 0 3px rgba(255, 165, 36, 0.18), 0 0 18px rgba(255, 165, 36, 0.40); animation: connAvatarPulse 2s ease-in-out infinite; } .avatar-connecting-overlay.is-reconnecting .conn-avatar { border-color: rgba(249, 141, 2, 0.7); box-shadow: 0 0 0 3px rgba(249, 141, 2, 0.18), 0 0 18px rgba(249, 141, 2, 0.40); } .connecting-label { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.3px; } .conn-attempt { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.45); min-height: 14px; } @keyframes connFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes connRingSpin { 0% { stroke-dashoffset: 226; transform: rotate(0deg); } 50% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 226; transform: rotate(360deg); } } @keyframes connIconPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes connAvatarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Adam Thinking Overlay */ .avatar-thinking-overlay { position: absolute; inset: 0; z-index: 4; display: none; align-items: flex-end; justify-content: center; pointer-events: none; } .avatar-thinking-overlay.is-active { display: flex; } .avatar-thinking-dots { display: flex; gap: 6px; padding-bottom: 18px; align-items: center; } .avatar-thinking-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.9); animation: adamThinkPulse 1.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(255,255,255,0.5); } .avatar-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .avatar-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes adamThinkPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } /* Avatar waiting overlay — shown while narration video is loading */ .avatar-waiting-overlay { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(10, 10, 20, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } .avatar-waiting-overlay.is-active { display: flex; } .avatar-waiting-card { display: flex; flex-direction: column; align-items: center; gap: 12px; } .avatar-waiting-label { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.4px; animation: avatarWaitingPulse 1.8s ease-in-out infinite; } .avatar-waiting-dots { display: flex; gap: 7px; align-items: center; } .avatar-waiting-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); animation: avatarWaitingDot 1.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); } .avatar-waiting-dots span:nth-child(2) { animation-delay: 0.2s; } .avatar-waiting-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes avatarWaitingDot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } @keyframes avatarWaitingPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Avatar pause overlay — shown when user freezes the AI by tapping the avatar */ .avatar-pause-overlay { position: absolute; inset: 0; z-index: 6; display: none; /* toggled to flex via JS */ flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8, 15, 35, 0.30); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); pointer-events: none; cursor: pointer; } .avatar-pause-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.40); border: 1.5px solid rgba(255, 255, 255, 0.75); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); transition: transform 0.2s ease; } .visual-window.is-playback-paused:hover .avatar-pause-icon { transform: scale(1.06); } .avatar-pause-icon svg { margin-left: 3px; /* optically center the play triangle */ } .avatar-pause-hint { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.2px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .visual-window.is-playback-paused { cursor: pointer; } /* Narration mute toggle (top-right of the avatar). Mutes ONLY Adam's intro/program/FAQ/home narration. The live voice chat is a separate audio pipeline and is never affected. Hidden during a live call + on idle home. */ .narration-mute-btn { position: absolute; top: 12px; right: 12px; z-index: 7; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(8, 15, 35, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.55); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .narration-mute-btn:hover { transform: scale(1.08); background: rgba(8, 15, 35, 0.75); } .narration-mute-btn:active { transform: scale(0.95); } .narration-mute-btn .nmb-icon { display: block; pointer-events: none; } .narration-mute-btn .nmb-icon-off { display: none; } .narration-mute-btn.is-muted .nmb-icon-on { display: none; } .narration-mute-btn.is-muted .nmb-icon-off { display: block; } .narration-mute-btn.is-muted { color: #f98d02; border-color: rgba(249, 141, 2, 0.85); background: rgba(8, 15, 35, 0.72); } /* Never show the narration mute button during a live Adam call (separate audio) or on the idle home mic panel. */ .app-shell.voice-chat-mode .narration-mute-btn { display: none !important; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .narration-mute-btn { display: none !important; } .visual-window.is-thinking::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 2px solid rgba(99, 179, 237, 0.6); border-radius: inherit; animation: adamThinkGlow 2s ease-in-out infinite; pointer-events: none; } @keyframes adamThinkGlow { 0%, 100% { border-color: rgba(99, 179, 237, 0.3); box-shadow: inset 0 0 8px rgba(99, 179, 237, 0.1); } 50% { border-color: rgba(99, 179, 237, 0.7); box-shadow: inset 0 0 16px rgba(99, 179, 237, 0.25); } } .visual-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 2; opacity: 1; transition: opacity 0.2s ease; } .visual-video.is-fading { opacity: 0; } /* --- BOTTOM NAVIGATION --- */ .bottom-nav { grid-area: nav; display: flex; align-items: stretch; justify-content: stretch; gap: 6px; padding: 4px 4px; background: var(--bg-secondary); border-top: 1px solid rgba(255,255,255,0.05); } .nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; background: rgba(255, 165, 36, 0.06); border: 1px solid rgba(255, 165, 36, 0.35); border-radius: 10px; color: var(--accent-orange); cursor: pointer; font-size: 10px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease; } .nav-btn:hover { background: rgba(255, 165, 36, 0.18); border-color: rgba(255, 165, 36, 0.6); } .nav-btn:active { transform: scale(0.94); background: rgba(255, 165, 36, 0.28); } /* Locked bottom nav: while in a live voice call with Adam/Zara the disrupting nav buttons (Goto/Prev/Next/Lang) are disabled and visibly dimmed so they can't interrupt the conversation. Pause/Play and Repeat stay active and are NOT dimmed. Scoped to :disabled so only the locked buttons are affected. */ .nav-btn:disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; filter: grayscale(0.4); } /* A disabled nav button must NEVER pulse — kill any lingering glow animation (e.g. the FAQ/section Next glow) so it can't keep blinking mid-conversation. */ .nav-btn:disabled, .nav-btn:disabled.is-glowing, .nav-btn:disabled.is-demo-next { animation: none; box-shadow: none; } .bottom-nav.is-nav-locked .nav-btn:disabled:hover { background: var(--bg-secondary, rgba(255,255,255,0.04)); border-color: rgba(255,255,255,0.08); } .nav-btn.is-active, .nav-btn[aria-pressed="true"] { background: var(--accent-orange); color: #ffffff; border-color: var(--accent-orange); } /* Inside glow used to highlight the Next button while the FAQ list is showing, nudging the user to advance to the program sections. */ .nav-btn.is-glowing { border-color: var(--accent-orange); background: rgba(255, 165, 36, 0.18); box-shadow: inset 0 0 10px 1px rgba(255, 154, 60, 0.55), inset 0 0 22px 4px rgba(255, 165, 36, 0.35); animation: navBtnGlowPulse 1.8s ease-in-out infinite; } @keyframes navBtnGlowPulse { 0%, 100% { box-shadow: inset 0 0 10px 1px rgba(255, 154, 60, 0.45), inset 0 0 22px 4px rgba(255, 165, 36, 0.28); } 50% { box-shadow: inset 0 0 14px 2px rgba(255, 154, 60, 0.75), inset 0 0 28px 6px rgba(255, 165, 36, 0.5); } } /* Strong, obvious glow for the AI-Tutor demo Next button (direct landing). An outer orange halo + gentle scale makes it unmistakably the next step. */ .nav-btn.is-demo-next { border-color: var(--accent-orange); color: #fff; background: rgba(255, 165, 36, 0.28); animation: demoNextGlow 1.4s ease-in-out infinite; } .nav-btn.is-demo-next .nav-label, .nav-btn.is-demo-next .nav-icon { color: #fff; font-weight: 800; } @keyframes demoNextGlow { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 10px 2px rgba(255, 165, 36, 0.55), 0 0 22px 6px rgba(255, 165, 36, 0.35), inset 0 0 12px 2px rgba(255, 170, 70, 0.5); } 50% { transform: translateY(-1px) scale(1.06); box-shadow: 0 0 18px 4px rgba(255, 154, 60, 0.85), 0 0 34px 10px rgba(255, 165, 36, 0.55), inset 0 0 16px 3px rgba(255, 180, 90, 0.7); } } /* AI-Tutor return: glow the 3 entry points (program buttons, chat bar, Talk to Adam) while Adam speaks the welcome-back message, until the user picks one. */ .is-return-glow { border-radius: 12px; animation: returnGlowPulse 1.5s ease-in-out infinite; } @keyframes returnGlowPulse { 0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 165, 36, 0.45), 0 0 16px 4px rgba(255, 165, 36, 0.22); } 50% { box-shadow: 0 0 16px 4px rgba(255, 165, 36, 0.85), 0 0 30px 9px rgba(255, 165, 36, 0.5); } } .nav-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; } .nav-icon svg { display: block; width: 16px; height: 16px; } .nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; } /* --- Visual Video (plays in visual window) --- */ .visual-video { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* --- Section Handwriting Player --- */ .section-handwriting { position: relative; min-height: 60px; } .section-handwriting-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.8; color: var(--text-white); font-style: italic; } .section-handwriting-text .hw-line { margin-bottom: 6px; } .section-handwriting-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; } /* FAQ answers stream like the program intro: clean paragraphs, no hand, no handwriting italic. Applied to .section-handwriting-text when streamLineText() runs. */ .section-handwriting-text.faq-stream-text { font-style: normal; font-size: 15px; line-height: 1.65; } .section-handwriting-text.faq-stream-text .faq-stream-line { margin: 0 0 10px 0; white-space: pre-wrap; } .section-handwriting-text.faq-stream-text + .section-hand, .section-handwriting.faq-stream-active .section-hand { display: none !important; } .section-hand { position: absolute; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: 10; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: handBob 0.2s ease-in-out infinite; } /* ============================================ DESKTOP LAYOUT - Fixed Two-Window Design ============================================ */ @media (min-width: 769px) { :root { --header-height: 72px; --chat-height: 72px; --nav-height: 64px; } .app-shell { grid-template-areas: "header header" "visual title" "visual text" "nav chat"; grid-template-columns: 50% 50%; grid-template-rows: var(--header-height) auto 1fr var(--chat-height); } .app-header { padding: 0 24px; } .header-logo { width: 48px; height: 48px; } .header-uni { font-size: 16px; } .header-south-asia { font-size: 20px; } .text-window { padding: 0 28px 24px 28px; border-left: 1px solid rgba(255,255,255,0.05); } .screen-title { font-size: 24px; } .menu-btn { padding: 16px 22px; font-size: 17px; } .section-text { font-size: 16px; } .chat-bar { padding: 12px 4px; } .chat-input { font-size: 15px; padding: 12px 18px; } .chat-input::placeholder { font-size: 15px; font-weight: 700; } .visual-window { border-right: 1px solid rgba(255,255,255,0.05); } .bottom-nav { border-right: 1px solid rgba(255,255,255,0.05); align-items: center; } .nav-btn { padding: 8px 16px; min-width: 64px; font-size: 12px; } .nav-icon { font-size: 18px; } .nav-icon svg { width: 18px; height: 18px; } .nav-label { font-size: 11px; } } /* ============================================ Scrollbar Styling ============================================ */ .text-window::-webkit-scrollbar { width: 14px; } .text-window::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .text-window::-webkit-scrollbar-thumb { background: rgba(255, 165, 36, 0.4); border-radius: 4px; } .text-window::-webkit-scrollbar-thumb:hover { background: rgba(255, 165, 36, 0.6); } /* ─── Typing cursor animation (ChatGPT-style) ─── */ .typing-cursor::after { content: '|'; display: inline; animation: blink-cursor 0.7s step-end infinite; color: #ffa524; font-weight: 700; margin-left: 1px; } @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ─── Thinking dots animation (bouncing) ─── */ .thinking-dots { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; } .thinking-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffa524; animation: thinking-bounce 1.4s ease-in-out infinite; } .thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; } .thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes thinking-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Reconnecting animation */ #chat-input.reconnecting { animation: reconnect-pulse 1.5s ease-in-out infinite; border-color: #f5a623; } #chat-input.reconnecting::placeholder { color: #f5a623; } @keyframes reconnect-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Mobile pull-to-refresh indicator ── */ .ptr-indicator { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -64px); z-index: 4000; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #0a0f1e; border: 1px solid rgba(255, 165, 36, 0.55); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; } .ptr-indicator.is-visible { transform: translate(-50%, 0); opacity: 1; } .ptr-indicator.is-ready { border-color: #ffa524; background: #1e3a6e; } .ptr-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 165, 36, 0.3); border-top-color: #ffa524; flex-shrink: 0; } .ptr-indicator.is-refreshing .ptr-spinner { animation: ptrSpin 0.7s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* --- Route Options (Adam ↔ Sam inline chat buttons) --- */ .route-options-container { border-color: rgba(124, 58, 237, 0.4); } .route-accept-btn { border-color: rgba(249, 141, 2, 0.4) !important; } .route-accept-btn:hover { background: rgba(249, 141, 2, 0.15) !important; } .route-decline-btn:hover { background: rgba(255, 255, 255, 0.05) !important; } /* --- Counselor Transition Animation --- */ /* ═══════ PREMIUM COUNSELOR TRANSITION OVERLAY ═══════ */ .ct-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ct-overlay.ct-visible { opacity: 1; pointer-events: auto; } .ct-overlay.ct-exit { opacity: 0; transition: opacity 0.5s ease; } .ct-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ct-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 48px; border-radius: 24px; background: rgba(30, 30, 40, 0.85); border: 1px solid rgba(124, 58, 237, 0.25); box-shadow: 0 0 60px rgba(124, 58, 237, 0.15), 0 25px 50px rgba(0, 0, 0, 0.4); transform: scale(0.9) translateY(20px); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ct-visible .ct-card { transform: scale(1) translateY(0); } .ct-exit .ct-card { transform: scale(0.95) translateY(-10px); } .ct-avatars { display: flex; align-items: center; gap: 32px; } .ct-avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ct-avatar-ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ct-ring-from { opacity: 0.5; transform: scale(0.85); } .ct-ring-to { background: conic-gradient(from 0deg, #7c3aed, #a78bfa, #c084fc, #7c3aed); animation: ctRingRotate 2s linear infinite; box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 0 40px rgba(124, 58, 237, 0.2); } .ct-resolved .ct-ring-to { background: conic-gradient(from 0deg, #4ade80, #86efac, #bbf7d0, #4ade80); box-shadow: 0 0 20px rgba(74, 222, 128, 0.4), 0 0 40px rgba(74, 222, 128, 0.2); animation: none; } .ct-avatar-icon { font-size: 32px; line-height: 1; } .ct-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .ct-avatar-name { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.3px; } .ct-avatar-role { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 500; } /* Arrow track animation */ .ct-arrow-container { position: relative; width: 60px; height: 4px; display: flex; align-items: center; } .ct-arrow-track { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; } .ct-arrow-track::after { content: ''; display: block; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, #7c3aed, #a78bfa); border-radius: 2px; animation: ctTrackSlide 1.2s ease-in-out infinite; } .ct-resolved .ct-arrow-track::after { background: linear-gradient(90deg, transparent, #4ade80, #86efac); animation: none; width: 100%; } .ct-arrow-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px #7c3aed; animation: ctDotTravel 1.2s ease-in-out infinite; } .ct-resolved .ct-arrow-dot { left: calc(100% - 8px) !important; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: none; } /* Status section */ .ct-status { display: flex; align-items: center; gap: 12px; } .ct-loader { display: flex; gap: 4px; align-items: center; } .ct-loader span { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: ctBounce 1s ease-in-out infinite; } .ct-loader span:nth-child(2) { animation-delay: 0.15s; } .ct-loader span:nth-child(3) { animation-delay: 0.3s; } .ct-resolved .ct-loader span { display: none; } .ct-check-icon { width: 20px; height: 20px; color: #4ade80; animation: ctCheckPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ct-status-text { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.2px; } .ct-resolved .ct-status-text { color: #4ade80; } /* Keyframes */ @keyframes ctRingRotate { to { transform: rotate(360deg); } } @keyframes ctTrackSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes ctDotTravel { 0% { left: 0; } 50% { left: calc(100% - 8px); } 100% { left: 0; } } @keyframes ctBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes ctCheckPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Keep the old avatar-transitioning class */ .avatar-video.avatar-transitioning { opacity: 0 !important; transition: opacity 0.5s ease; } @keyframes avatarPulseIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* --- User Speaking Indicator (Voice Activity Wave) --- */ .speaking-indicator-msg { animation: fadeSlideUp 0.3s ease; } .speaking-indicator-bubble { background: rgba(249, 141, 2, 0.08) !important; border: 1px solid rgba(249, 141, 2, 0.25) !important; padding: 12px 20px !important; min-width: 80px; } .speaking-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; } .speaking-wave .wave-bar { display: inline-block; width: 3px; height: 8px; border-radius: 3px; background: var(--accent-orange); animation: waveAnim 1.2s ease-in-out infinite; } .speaking-wave .wave-bar:nth-child(1) { animation-delay: 0s; } .speaking-wave .wave-bar:nth-child(2) { animation-delay: 0.15s; } .speaking-wave .wave-bar:nth-child(3) { animation-delay: 0.3s; } .speaking-wave .wave-bar:nth-child(4) { animation-delay: 0.45s; } .speaking-wave .wave-bar:nth-child(5) { animation-delay: 0.6s; } @keyframes waveAnim { 0%, 100% { height: 6px; opacity: 0.4; } 25% { height: 20px; opacity: 1; } 50% { height: 12px; opacity: 0.7; } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ─── Goto Navigation Overlay ─── */ .goto-overlay { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.25s ease, visibility 0.25s ease; } .goto-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .goto-panel { width: 100%; max-width: 420px; max-height: 70vh; background: var(--card-bg, #1a2332); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; animation: gotoSlideUp 0.25s ease-out; } @keyframes gotoSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Desktop: center the panel as a modal */ @media (min-width: 768px) { .goto-overlay { align-items: center; } .goto-panel { max-width: 380px; max-height: 60vh; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); animation: gotoScaleIn 0.2s ease-out; } @keyframes gotoScaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } } .goto-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .goto-panel-title { font-size: 15px; font-weight: 700; color: #fff; } .goto-close-btn { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; } .goto-close-btn:hover { color: #fff; } .goto-panel-body { overflow-y: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 6px; } .goto-section-label { font-size: 11px; font-weight: 700; color: rgba(255,165,36,0.85); text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px; } .goto-section-label:first-child { margin-top: 0; } .goto-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,165,36,0.25); background: rgba(255,165,36,0.06); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-decoration: none; } .goto-item:hover { background: rgba(255,165,36,0.18); border-color: rgba(255,165,36,0.5); } .goto-item.is-current { border-color: var(--accent-orange, #ffa524); background: rgba(255,165,36,0.22); } .goto-loading { text-align: center; color: rgba(255,255,255,0.5); padding: 20px; font-size: 13px; } /* ── "Resume with Adam" affordance — now on the Talk button (is-resume class). The CSS is on .chat-talk-btn.is-resume (defined above). The old input-glow is no longer needed since the talk button itself changes color/text. ── */ /* ── Welcome Demo Page ── */ .welcome-demo-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 0px 16px 40px; gap: 16px; } .welcome-demo-heading { font-size: 22px; font-weight: 700; color: #fff; } .welcome-demo-subtext { font-size: 14px; color: rgba(255,255,255,0.85); margin-bottom: 12px; } .welcome-demo-stream { text-align: left; width: 100%; padding: 0; } .welcome-demo-stream .welcome-demo-subtext { font-size: 15px; font-style: normal; line-height: 1.6; color: rgba(255,255,255,0.88); } .welcome-demo-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .welcome-demo-btn { display: inline-block; background: linear-gradient(135deg, #ffa524, #FF6B00); color: #fff; font-size: 17px; font-weight: 700; padding: 14px 36px; border-radius: 30px; text-decoration: none; box-shadow: 0 4px 16px rgba(255,165,36,0.5); transition: transform 0.2s, box-shadow 0.2s; } .welcome-demo-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(255,165,36,0.7); } .welcome-demo-btn-secondary { background: transparent !important; border: 2px solid rgba(255,255,255,0.5); box-shadow: none !important; font-size: 14px !important; padding: 10px 28px !important; } .welcome-demo-btn-secondary:hover { border-color: rgba(255,255,255,0.85); box-shadow: none !important; transform: none !important; } .welcome-demo-or { color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600; letter-spacing: 1px; } /* ============================================================ HOME MOCKUP REDESIGN — idle home screen only Scoped to .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) so that a live voice call restores the normal (tested) chrome: Adam's avatar in the visual window + the media controls nav. ============================================================ */ /* ── Continuous deep-navy backdrop (one canvas like the mockup): radial blue glow top-right, faint amber glow top-left, dot grid. The strip areas (text/chat/visual/nav) go transparent on home so the backdrop reads as a single scene. ── */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) { grid-template-rows: var(--header-height) 0 1fr 76px 30vh 124px; background: radial-gradient(circle at 1px 1px, rgba(120, 150, 220, 0.08) 1px, transparent 1.6px) 0 0 / 26px 26px, radial-gradient(120% 65% at 88% -8%, rgba(30, 58, 138, 0.50) 0%, rgba(13, 24, 48, 0) 55%), radial-gradient(70% 45% at 8% 2%, rgba(255, 165, 36, 0.07) 0%, rgba(13, 24, 48, 0) 48%), linear-gradient(180deg, #0e1b3c 0%, #0a1128 100%); } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .screen-title { display: none !important; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .text-window, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-bar, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .visual-window, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-tiles-nav { background: transparent; border: none; } /* Hide Adam's idle avatar + the chat-bar mic on the idle home (the mockup shows a mic panel instead). All restored during a live call. */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .avatar-idle-video, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .avatar-image, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-talk-btn { display: none !important; } /* ── Hero (text / 1fr area) ── */ .home-hero { display: none; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) #page-content { display: flex; flex-direction: column; justify-content: center; min-height: 100%; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px; gap: 4px; } .home-hero .hh-welcome { margin: 0; color: #ffffff; font-size: clamp(19px, 5.5vw, 23px); font-weight: 700; letter-spacing: 0.2px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); } .home-hero .hh-title { margin: 3px 0 0; font-size: clamp(22px, 7vw, 32px); white-space: nowrap; font-weight: 900; line-height: 1.12; letter-spacing: 0.3px; color: #ffa524; background: linear-gradient(180deg, #ffd9a0 0%, #ffa524 45%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 14px rgba(255, 165, 36, 0.35)); } /* Glowing curved arc under the title (inline SVG in home.html) */ .home-hero .hh-arc { width: 88%; max-width: 400px; height: 26px; margin: 8px 0 4px; overflow: visible; animation: hhArcGlow 3s ease-in-out infinite; } @keyframes hhArcGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 165, 36, 0.45)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 165, 36, 0.85)); } } .home-hero .hh-tagline { margin: 6px 0 0; max-width: 420px; color: #ffffff; font-size: clamp(18px, 5.2vw, 22px); font-weight: 700; line-height: 1.48; letter-spacing: 0.2px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); } .home-hero .hh-tagline .hh-accent { color: #ffffff; font-weight: 700; white-space: nowrap; } /* Program list — hidden on the idle home; the Programs tile reveals it */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) #menu-buttons { display: none !important; } .app-shell.home-page.show-programs:not(.voice-chat-mode) #menu-buttons { display: flex !important; } .app-shell.home-page.show-programs .home-hero { display: none !important; } /* ── Chat capsule (chat area) ── */ .chat-input-icon { display: none; } .app-shell.home-page.voice-chat-mode .chat-input-icon { display: none !important; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-bar { padding: 8px 14px; gap: 0; justify-content: center; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: var(--accent-blue); opacity: 0.9; z-index: 2; pointer-events: none; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input-wrap { height: 58px; flex: 0 1 660px; margin: 0 auto; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input { height: 58px; min-height: 58px; max-height: 58px; padding: 5px 60px 5px 50px; border-radius: 999px; border: 1.5px solid rgba(150, 180, 235, 0.26); background: linear-gradient(180deg, rgba(24, 38, 74, 0.92) 0%, rgba(15, 26, 54, 0.96) 100%); animation: none; font-size: 0.95rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.40), 0 0 16px rgba(74, 168, 255, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input:focus { border-color: rgba(170, 200, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.40), 0 0 20px rgba(74, 168, 255, 0.16); } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input::placeholder { color: #b9c4e0; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-send-btn { right: 7px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, #ffc46b 0%, #ffa524 45%, #ff7a00 100%); box-shadow: 0 3px 12px rgba(255, 165, 36, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-send-btn:hover { opacity: 1; filter: brightness(1.06); } /* ── Voice panel card (visual / 30vh area) ── */ .home-mic-panel { display: none; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-mic-panel { position: absolute; top: 2px; bottom: 10px; left: max(12px, calc((100% - 700px) / 2)); right: max(12px, calc((100% - 700px) / 2)); z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 0; padding: 12px 10px 10px; border-radius: 20px; border: 1px solid rgba(130, 160, 225, 0.24); background: radial-gradient(60% 70% at 50% 40%, rgba(37, 64, 143, 0.35) 0%, rgba(16, 29, 60, 0) 75%), linear-gradient(180deg, #14224a 0%, #0e1a3a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.40), 0 0 20px rgba(74, 168, 255, 0.06); } .home-mic-panel .hmp-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } /* Top band: sine waves + equalizer in one non-overlapping flex row */ .home-mic-panel .hmp-band { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; width: 92%; height: 30px; flex: 0 0 auto; pointer-events: none; } .home-mic-panel .hmp-wave { flex: 1 1 0; min-width: 0; height: 26px; fill: none; stroke: #ffa524; stroke-width: 1.8; opacity: 0.75; filter: drop-shadow(0 0 3px rgba(255, 165, 36, 0.4)); } /* Blue + amber equalizer bars in the centre of the band */ .home-mic-panel .hmp-eq { flex: 0 0 auto; height: 28px; display: flex; align-items: center; gap: 3px; } .home-mic-panel .hmp-eq span { width: 2.5px; border-radius: 2px; height: 30%; background: var(--accent-blue); box-shadow: 0 0 4px rgba(74, 168, 255, 0.5); animation: hmpEq 1.15s ease-in-out infinite alternate; } .home-mic-panel .hmp-eq span:nth-child(3n) { background: #ffa524; box-shadow: 0 0 4px rgba(255, 165, 36, 0.5); } .home-mic-panel .hmp-eq span:nth-child(1) { height: 34%; animation-delay: 0s; } .home-mic-panel .hmp-eq span:nth-child(2) { height: 62%; animation-delay: .12s; } .home-mic-panel .hmp-eq span:nth-child(3) { height: 44%; animation-delay: .24s; } .home-mic-panel .hmp-eq span:nth-child(4) { height: 88%; animation-delay: .06s; } .home-mic-panel .hmp-eq span:nth-child(5) { height: 54%; animation-delay: .3s; } .home-mic-panel .hmp-eq span:nth-child(6) { height: 96%; animation-delay: .18s; } .home-mic-panel .hmp-eq span:nth-child(7) { height: 48%; animation-delay: .36s; } .home-mic-panel .hmp-eq span:nth-child(8) { height: 78%; animation-delay: .09s; } .home-mic-panel .hmp-eq span:nth-child(9) { height: 40%; animation-delay: .27s; } .home-mic-panel .hmp-eq span:nth-child(10) { height: 66%; animation-delay: .15s; } @keyframes hmpEq { from { transform: scaleY(0.6); opacity: 0.65; } to { transform: scaleY(1.15); opacity: 1; } } /* Circuit traces with glowing node dots (orange left, blue right) */ .home-mic-panel .hmp-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffa524; box-shadow: 0 0 6px 1px rgba(255, 165, 36, 0.55); animation: hmpNode 2.6s ease-in-out infinite; } .home-mic-panel .hmp-node::before { content: ''; position: absolute; top: 50%; height: 1px; width: 88px; background: linear-gradient(90deg, rgba(255, 165, 36, 0.55), rgba(255, 165, 36, 0.04)); } .home-mic-panel .hmp-node.n-l::before { left: 5px; } .home-mic-panel .hmp-node.n-r { background: var(--accent-blue); box-shadow: 0 0 6px 1px rgba(74, 168, 255, 0.55); } .home-mic-panel .hmp-node.n-r::before { right: 5px; background: linear-gradient(270deg, rgba(74, 168, 255, 0.55), rgba(74, 168, 255, 0.04)); } .home-mic-panel .hmp-node.n1 { left: 8%; top: 40%; animation-delay: 0s; } .home-mic-panel .hmp-node.n2 { left: 13%; top: 54%; animation-delay: .6s; } .home-mic-panel .hmp-node.n3 { left: 7%; top: 68%; animation-delay: 1.2s; } .home-mic-panel .hmp-node.n4 { right: 8%; top: 40%; animation-delay: .3s; } .home-mic-panel .hmp-node.n5 { right: 13%; top: 54%; animation-delay: .9s; } .home-mic-panel .hmp-node.n6 { right: 7%; top: 68%; animation-delay: 1.5s; } @keyframes hmpNode { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } } /* Mic button: slim amber gradient ring, navy core, ice-blue glyph */ .home-mic-panel .hmp-mic { position: relative; width: 96px; height: 96px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4.5px; flex: 0 0 auto; background: conic-gradient(from 220deg, #ffce85, #ffa524 30%, #ff8a00 55%, #ffa524 80%, #ffce85); animation: hmpMicGlow 3s ease-in-out infinite; transition: transform 0.12s ease; } .home-mic-panel .hmp-mic:active { transform: scale(0.96); } @keyframes hmpMicGlow { 0%, 100% { box-shadow: 0 0 14px rgba(255, 165, 36, 0.30), 0 6px 16px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 26px rgba(255, 165, 36, 0.52), 0 6px 16px rgba(0, 0, 0, 0.45); } } .home-mic-panel .hmp-mic-core { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 34%, #1d3a78 0%, #0f1e42 72%); box-shadow: inset 0 0 16px rgba(74, 168, 255, 0.28), inset 0 -5px 12px rgba(0, 0, 0, 0.42); } .home-mic-panel .hmp-mic-core svg { filter: drop-shadow(0 0 5px rgba(190, 220, 255, 0.6)); } .home-mic-panel .hmp-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(255, 165, 36, 0.42); animation: hmpRing 2.8s ease-out infinite; pointer-events: none; } .home-mic-panel .hmp-ring-2 { animation-delay: 1.4s; } @keyframes hmpRing { 0% { opacity: 0.65; transform: scale(0.94); } 80% { opacity: 0; transform: scale(1.42); } 100% { opacity: 0; transform: scale(1.42); } } .home-mic-panel .hmp-caption { position: relative; margin: 0; flex: 0 0 auto; text-align: center; color: #ffffff; font-size: 19px; font-weight: 800; line-height: 1.32; letter-spacing: 0.2px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .home-mic-panel .hmp-caption span { color: #ffa524; } /* ── 4 category tiles (nav area) ── */ .home-tiles-nav { display: none; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-tiles-nav { grid-area: nav; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 4px 10px 7px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .bottom-nav { display: none !important; } .home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 700px; } .home-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 13px 4px; border-radius: 14px; background: linear-gradient(180deg, #1b2c5c 0%, #14224c 52%, #0f1a3a 100%); border: 1px solid rgba(140, 170, 240, 0.28); color: #eef2ff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 6px rgba(0, 0, 0, 0.32), 0 5px 14px rgba(0, 0, 0, 0.35); transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.1s ease; } .home-tile:hover { border-color: rgba(170, 200, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(0, 0, 0, 0.32), 0 7px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(74, 168, 255, 0.20); transform: translateY(-1px); } .home-tile:active { transform: scale(0.96); } .home-tile .home-tile-icon { display: flex; filter: drop-shadow(0 0 5px rgba(255, 165, 36, 0.28)); } .home-tile .home-tile-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.25px; color: #ffffff; white-space: nowrap; } @media (max-width: 430px) { .home-tile { padding: 11px 2px; gap: 5px; } .home-tile .home-tile-label { font-size: 11px; letter-spacing: 0.15px; } .home-tiles { gap: 8px; } } .home-tile[data-accent="orange"] .home-tile-icon { color: #ffa524; } .home-tile[data-accent="blue"] .home-tile-icon { color: #bdd9ff; filter: drop-shadow(0 0 5px rgba(74, 168, 255, 0.32)); } .home-tiles-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--accent-blue); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; } .home-tiles-hint .hth-orn { position: relative; width: 34px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 165, 36, 0), rgba(255, 165, 36, 0.8)); } .home-tiles-hint .hth-orn::after { content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #ffa524; box-shadow: 0 0 6px rgba(255, 165, 36, 0.75); } .home-tiles-hint .hth-orn:last-child { transform: scaleX(-1); } .home-tiles-hint .hth-ico { display: none; } /* ============================================================ LIVE-CALL CHROME (voice-chat-mode) — reference design: solid green status pill ("Adam Listening") by the mic and a green "Back to Menu" pill in the chat panel header. (The circular green mic itself is now the project-wide BASE style.) ============================================================ */ @keyframes liveMicGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 16px rgba(255, 165, 36, 0.38), 0 6px 18px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26), 0 0 32px rgba(255, 165, 36, 0.68), 0 6px 18px rgba(0, 0, 0, 0.5); } } /* Active call: the RING around the mic turns BLUE (face stays green). */ .app-shell.voice-chat-mode .chat-talk-btn { background: conic-gradient(from 220deg, #9cc8ff, #4aa8ff 30%, #2563eb 55%, #4aa8ff 80%, #9cc8ff); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 16px rgba(74, 168, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.45); } .app-shell.voice-chat-mode .chat-talk-btn.is-listening { animation: liveMicGlowBlue 2.1s ease-in-out infinite; } @keyframes liveMicGlowBlue { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 16px rgba(74, 168, 255, 0.38), 0 6px 18px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26), 0 0 32px rgba(74, 168, 255, 0.68), 0 6px 18px rgba(0, 0, 0, 0.5); } } /* Status pill — solid green, sits right BELOW the mic */ .app-shell.voice-chat-mode .voice-status-chip { left: auto; right: 6px; bottom: auto; top: calc(100% + 2px); padding: 5px 13px; background: linear-gradient(180deg, #1d8a55 0%, #135a39 100%); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); z-index: 21; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-shell.voice-chat-mode .voice-status-chip .voice-status-dot { display: none; } .app-shell.voice-chat-mode .voice-status-chip.is-speaking, .app-shell.voice-chat-mode .voice-status-chip.is-thinking { background: linear-gradient(180deg, #cc7d00 0%, #995d00 100%); } .app-shell.voice-chat-mode .voice-status-chip.is-connecting { background: linear-gradient(180deg, #1d8a55 0%, #135a39 100%); } .app-shell.voice-chat-mode .voice-status-chip.is-unstable { background: rgba(180, 95, 0, 0.92); } /* Back button → green "Back to Menu" pill (chevron hidden) */ .app-shell.voice-chat-mode .chat-back-btn { background: linear-gradient(180deg, #1d8a55 0%, #135a39 100%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 10px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-shell.voice-chat-mode .chat-back-btn:hover { background: linear-gradient(180deg, #22a065 0%, #177045 100%); border-color: rgba(255, 255, 255, 0.55); } .app-shell.voice-chat-mode .chat-back-btn svg { display: none; } /* ── MayaAI Launch Event: on-screen invitation form (Q1–Q7) ── */ .launch-form { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; } /* Voice-edit feedback: the corrected row flashes amber while it scrolls into view so the user sees their spoken correction land. */ .launch-form .launch-q { border-radius: 12px; } .launch-form .launch-q.launch-q-flash { animation: launchQFlash 1.7s ease; } @keyframes launchQFlash { 0% { background: rgba(255, 165, 36, 0.30); box-shadow: 0 0 0 3px rgba(255, 165, 36, 0.55); } 45% { background: rgba(255, 165, 36, 0.18); box-shadow: 0 0 0 4px rgba(255, 165, 36, 0.35); } 100% { background: transparent; box-shadow: 0 0 0 0 rgba(255, 165, 36, 0); } } .launch-form .launch-q-label { font-size: 13.5px; font-weight: 800; color: #ffd9a0; letter-spacing: 0.2px; margin-bottom: 6px; } .launch-form .launch-chips { display: flex; flex-wrap: wrap; gap: 7px; } .launch-form .launch-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(140, 170, 240, 0.35); background: rgba(37, 64, 143, 0.22); color: #eef2ff; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .launch-form .launch-chip:hover { border-color: rgba(170, 200, 255, 0.6); background: rgba(37, 64, 143, 0.4); } .launch-form .launch-chip.is-selected { background: linear-gradient(160deg, #ffc46b 0%, #ffa524 50%, #ff7a00 100%); border-color: transparent; color: #0a1128; font-weight: 800; } .launch-form .launch-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(150, 180, 235, 0.3); background: rgba(15, 26, 54, 0.85); color: #ffffff; font-size: 14px; outline: none; transition: border-color 0.15s ease; } .launch-form .launch-input:focus { border-color: rgba(255, 165, 36, 0.6); } .launch-form .launch-form-status { min-height: 16px; font-size: 12.5px; font-weight: 600; color: #ffb35c; } .launch-form .launch-submit-btn { align-self: flex-start; padding: 11px 26px; border: none; border-radius: 999px; background: linear-gradient(160deg, #ffc46b 0%, #ffa524 50%, #ff7a00 100%); color: #0a1128; font-size: 14px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 4px 14px rgba(255, 165, 36, 0.35); transition: filter 0.15s ease, transform 0.1s ease; } .launch-form .launch-submit-btn:hover { filter: brightness(1.07); } .launch-form .launch-submit-btn:active { transform: scale(0.97); } .launch-form .launch-submit-btn:disabled { background: linear-gradient(160deg, #1d8a55 0%, #135a39 100%); color: #ffffff; cursor: default; box-shadow: none; } .launch-form.is-submitted .launch-chip, .launch-form.is-submitted .launch-input { pointer-events: none; opacity: 0.75; } /* Launch-event page: the chat panel shows ONLY the invitation form — every conversation bubble (Adam's spoken lines + the user's transcript) stays hidden. Adam still speaks aloud; spoken answers fill the form. */ .app-shell.launch-event-page .voice-transcript-panel .chat-message { display: none !important; } .app-shell.launch-event-page .voice-transcript-panel .chat-message.launch-form-bubble { display: flex !important; } /* Launch-event page: hide the text chat input (typing box + send button) — only the mic button is needed for this invitation flow. Keeps the rest of the chat bar chrome (mic, subtitle) intact everywhere else. */ .app-shell.launch-event-page .chat-bar .chat-input-wrap { display: none !important; } /* Launch-event page: with the input hidden the chat bar would put the mic button alone on the left; keep the mic anchored on the RIGHT (its original position) and fill the space to its left with a calm, decorative hint panel so the bar doesn't feel empty. The mic button itself is NOT restyled. */ .app-shell.launch-event-page .chat-bar { gap: 12px; padding-left: 14px; } .app-shell.launch-event-page .chat-bar .chat-talk-btn { order: 2; flex: 0 0 auto; margin-left: 4px; } .app-shell.launch-event-page .chat-bar::after { content: "Adam is listening — just speak your answer. Tap the mic to pause the conversation; tap again to resume."; order: 1; flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: flex-start; padding: 0 18px 0 22px; min-height: 48px; font-size: 13px; line-height: 1.35; font-weight: 500; letter-spacing: 0.2px; color: rgba(255, 210, 160, 0.92); background: radial-gradient(120% 180% at 0% 50%, rgba(255,165,36,0.18), rgba(255,165,36,0) 60%), linear-gradient(90deg, rgba(255,165,36,0.10), rgba(16,29,60,0.55) 60%, rgba(16,29,60,0.75)); border: 1px solid rgba(255, 165, 36, 0.28); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); animation: launchHintPulse 3.2s ease-in-out infinite; white-space: normal; } @keyframes launchHintPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 0 0 rgba(255,165,36,0.00); border-color: rgba(255,165,36,0.28); } 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 12px 0 rgba(255,165,36,0.18); border-color: rgba(255,165,36,0.45); } } /* Narrow screens: shorter hint text, smaller padding, still legible. */ @media (max-width: 520px) { .app-shell.launch-event-page .chat-bar::after { content: "Adam is listening — just speak. Tap the mic to pause / resume."; font-size: 12px; padding: 0 12px 0 14px; } } /* Keep the "MayaAI Launch Event" heading pinned at the top even after the chat/form view opens — voice-chat-mode hides .screen-title everywhere else, but on this page the title must stay visible above the invitation form. */ .app-shell.launch-event-page.voice-chat-mode .screen-title { display: flex !important; } /* Desktop: the chat bar is the BOTTOM grid row, so the pill below the mic would clip off-screen — show it above the bar instead. */ @media (min-width: 769px) { .app-shell.voice-chat-mode .voice-status-chip { top: auto; bottom: calc(100% + 6px); right: 8px; } } /* ── DESKTOP home (≥769px): hero LEFT · chat + voice card + tiles RIGHT, matching the widescreen mockup. The base desktop grid (avatar left / content right) still applies to every other page and to live calls. ── */ @media (min-width: 769px) { .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) { grid-template-areas: "header header" "text chat" "text visual" "text nav"; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: var(--header-height) 96px 1fr 188px; background: radial-gradient(circle at 1px 1px, rgba(120, 150, 220, 0.08) 1px, transparent 1.6px) 0 0 / 26px 26px, radial-gradient(46% 40% at -8% 6%, rgba(255, 165, 36, 0.12) 0%, rgba(13, 24, 48, 0) 60%), radial-gradient(42% 34% at -6% 100%, rgba(255, 165, 36, 0.09) 0%, rgba(13, 24, 48, 0) 55%), radial-gradient(120% 65% at 88% -8%, rgba(30, 58, 138, 0.55) 0%, rgba(13, 24, 48, 0) 55%), linear-gradient(180deg, #0e1b3c 0%, #0a1128 100%); } /* Hero — bigger type in the left column */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-hero { padding: 16px 28px; gap: 6px; } .home-page .home-hero .hh-welcome { font-size: clamp(22px, 2vw, 28px); } .home-page .home-hero .hh-title { font-size: clamp(36px, 3.4vw, 50px); } .home-page .home-hero .hh-arc { max-width: 500px; height: 30px; margin: 12px 0 6px; } .home-page .home-hero .hh-tagline { font-size: clamp(21px, 1.9vw, 27px); max-width: 540px; line-height: 1.52; margin-top: 10px; } /* Chat capsule — rounded rectangle, top of the right column */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-bar { padding: 20px 22px 8px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input-wrap { flex: 1 1 auto; max-width: none; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input { border-radius: 16px; font-size: 15px; padding: 5px 62px 5px 52px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-input::placeholder { font-size: 15.5px; font-weight: 500; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-send-btn { right: 8px; } /* Voice card — fills the right column's middle band */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-mic-panel { top: 6px; bottom: 8px; left: 22px; right: 22px; border-radius: 18px; } .home-page .home-mic-panel .hmp-mic { width: 104px; height: 104px; } .home-page .home-mic-panel .hmp-caption { font-size: 21px; } .home-page .home-mic-panel .hmp-band { width: 88%; } /* Tiles — bottom of the right column */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-tiles-nav { padding: 8px 22px 12px; gap: 10px; } .home-page .home-tiles { gap: 12px; max-width: none; } .home-page .home-tile { padding: 17px 4px; border-radius: 16px; gap: 8px; } .home-page .home-tile .home-tile-icon svg { width: 30px; height: 30px; } .home-page .home-tile .home-tile-label { font-size: 13.5px; } .home-page .home-tiles-hint { font-size: 14px; gap: 12px; } .home-page .home-tiles-hint .hth-ico { display: inline-flex; align-items: center; color: var(--accent-blue); margin-right: -4px; } .home-page .home-tiles-hint .hth-orn { width: 44px; } } /* ================================================================ NEW HOME LANDING — "I'm Adam · Your AI Assistant" Replaces the idle hero + mic panel + category tiles with Adam's intro portrait + 3 connect cards (Type / Talk / Browse). Scoped to the idle-home state (.home-page:not(.voice-chat-mode):not(.show- programs)) so the live-voice + browse chrome stays exactly as before. Placed last so it wins over the mobile idle rules AND the ≥769px desktop idle rules above. ================================================================ */ /* Single column at every width; collapse the chat / visual / nav rows — their chrome is hidden on the landing (mockup shows only hero + cards). */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) { grid-template-columns: 1fr; grid-template-areas: "header" "title" "text" "chat" "visual" "nav"; grid-template-rows: var(--header-height) 0 1fr 0 0 0; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .chat-bar, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .visual-window, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-tiles-nav { display: none !important; } /* Type card → reveal the chat capsule at the bottom so the visitor can type; the hero stays above it (Enter/Send then hands off to the live conversation UI, exactly like today). */ .app-shell.home-page.home-type-mode:not(.voice-chat-mode):not(.show-programs) { grid-template-rows: var(--header-height) 0 1fr 76px 0 0; } .app-shell.home-page.home-type-mode:not(.voice-chat-mode):not(.show-programs) .chat-bar { display: flex !important; } /* Landing scrolls from the top; hero is a centered single column. */ .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) #page-content { justify-content: flex-start; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-hero { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 8px 26px; } /* Top line: badge (left) + presence pill (right) on ONE row */ .home-hero .home-topline { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; } /* Presence pill */ .home-hero .home-online-pill { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(18, 32, 64, 0.72); border: 1px solid rgba(150, 180, 235, 0.22); color: #dbe6ff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; } .home-hero .home-online-pill .hop-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fe08a; box-shadow: 0 0 8px rgba(47, 224, 138, 0.9); animation: hopPulse 1.8s ease-in-out infinite; } @keyframes hopPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* "You came here for" badge (dynamic; only rendered when present). Shared by the home hero AND menu/program pages (.home-camefor--page). Compact pill (mock): hugs its content at the top-left, never full width. */ .home-camefor { display: inline-flex; align-self: flex-start; flex: 0 1 auto; min-width: 0; max-width: 100%; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(28, 52, 110, 0.55) 0%, rgba(14, 26, 56, 0.72) 100%); border: 1px solid rgba(80, 150, 255, 0.42); } .home-camefor .hcf-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #3cc5ff; border: 1.5px solid rgba(60, 197, 255, 0.65); background: rgba(18, 40, 86, 0.55); } .home-camefor .hcf-icon svg { width: 20px; height: 20px; } .home-camefor .hcf-text { color: #ffffff; font-size: 11.5px; line-height: 1.3; min-width: 0; } .home-camefor .hcf-text strong { color: #3cc5ff; font-size: 14px; font-weight: 800; } /* ── Direct-landing Adam overlay (menu/program pages) ── Full-screen welcome shown UNDER the header when a visitor opens a /menu/ or /program/ URL directly (ad / shared link). Reuses the entire .home-hero design; dismissed by the three connect cards. */ .adam-landing { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 400; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: radial-gradient(circle at 1px 1px, rgba(120, 150, 220, 0.08) 1px, transparent 1.6px) 0 0 / 26px 26px, radial-gradient(120% 65% at 88% -8%, rgba(30, 58, 138, 0.50) 0%, rgba(13, 24, 48, 0) 55%), radial-gradient(70% 45% at 8% 2%, rgba(255, 165, 36, 0.07) 0%, rgba(13, 24, 48, 0) 48%), linear-gradient(180deg, #0e1b3c 0%, #0a1128 100%); } .adam-landing.is-visible { display: block; } .adam-landing .home-hero { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 16px 30px; } /* While the direct-landing overlay is up, the page must be ONLY the welcome screen (header + hero) — exactly like the mockup. Hide every other piece of chrome (title bar, Adam video window, chat bar + mic, bottom nav, mute button) so nothing can render over or around the overlay. The class is added/removed by _adam_landing.html. */ .app-shell.adam-landing-mode .screen-title, .app-shell.adam-landing-mode .chat-bar, .app-shell.adam-landing-mode .visual-window, .app-shell.adam-landing-mode .bottom-nav, .app-shell.adam-landing-mode .narration-mute-btn { display: none !important; } /* ── MayaAI Launch Event intro (/menu/mayaai-launch-event/ only) ── IN-PAGE hand-written welcome (_launch_event_intro.html): the page renders normally ("MayaAI Launch Event" title stays visible) and Adam's welcome is written INSIDE the text panel by the SAME hand/pen effect as the demo transcript (reuses the .hw-transcript / .hw-char / .hw-transcript-hand classes + writing1.png). A Continue button then starts the invitation flow (window.__launchEventBegin). While the intro is up, .launch-intro-mode on the app shell hides only the chat bar + bottom nav — NOT the title. */ .app-shell.launch-intro-mode .chat-bar, .app-shell.launch-intro-mode .bottom-nav, .app-shell.launch-intro-mode .narration-mute-btn, .app-shell.launch-intro-mode .intro-text, .app-shell.launch-intro-mode #menu-buttons, .app-shell.launch-intro-mode .faq-section { display: none !important; } .launch-intro { padding: 4px 2px 40px; } .launch-intro .hw-transcript { padding: 12px 8px 34px; } .launch-intro .hw-transcript-text { font-size: 19px; line-height: 1.55; overflow: visible; } .launch-intro .li-par { margin: 0 0 16px; } .launch-intro .li-par:first-child { color: var(--accent-orange, #ffa524); font-size: 1.22em; } @media (max-width: 380px) { .launch-intro .hw-transcript-text { font-size: 16px; } } .launch-intro .li-actions { margin: 10px 8px 0; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; } .launch-intro .li-actions.is-visible { opacity: 1; transform: none; pointer-events: auto; } .launch-intro .li-continue { display: inline-block; padding: 13px 44px; border: none; border-radius: 999px; background: linear-gradient(180deg, #ffb03a 0%, #ff9314 100%); color: #14203f; font-size: 18px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 6px 22px rgba(255, 149, 20, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .launch-intro .li-continue:hover, .launch-intro .li-continue:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255, 149, 20, 0.5); } /* Adam intro: copy (left) + portrait (right) */ .home-hero .home-adam { display: flex; align-items: flex-end; gap: 6px; position: relative; } .home-hero .home-adam-copy { flex: 1 1 0; min-width: 0; padding-bottom: 8px; } .home-hero .ha-welcome { margin: 0; color: var(--accent-orange); font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive; font-size: clamp(26px, 7.2vw, 34px); font-weight: 700; line-height: 1; } .home-hero .ha-uni { margin: 4px 0 0; color: #ffffff; font-size: clamp(13.5px, 3.9vw, 19px); font-weight: 900; line-height: 1.25; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .home-hero .ha-name { margin: 10px 0 0; color: #ffffff; font-size: clamp(30px, 9vw, 44px); font-weight: 900; line-height: 1.02; letter-spacing: 0.3px; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.5); } .home-hero .ha-role { margin: 5px 0 0; color: #ffffff; font-size: clamp(16px, 4.6vw, 20px); font-weight: 700; } .home-hero .ha-divider { position: relative; display: block; width: 130px; height: 2px; margin: 12px 0 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent-orange) 0%, rgba(255, 165, 36, 0) 100%); } .home-hero .ha-divider::after { content: ""; position: absolute; left: 60px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-orange); transform: translateY(-50%); box-shadow: 0 0 8px rgba(255, 165, 36, 0.85); } .home-hero .ha-intro { margin: 12px 0 0; max-width: 290px; color: #dbe6ff; font-size: clamp(13.5px, 3.9vw, 16px); line-height: 1.5; } .home-hero .home-adam-photo { flex: 0 0 54%; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; position: relative; min-height: 290px; } .home-hero .home-adam-photo::before { content: ""; position: absolute; inset: 12% 0 4%; background: radial-gradient(58% 52% at 52% 58%, rgba(255, 138, 0, 0.45) 0%, rgba(255, 138, 0, 0) 70%); z-index: 0; pointer-events: none; } .home-hero .ha-photo-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)); } /* Connect section */ .home-hero .home-connect { margin-top: 4px; } .home-hero .hc-heading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 14px; color: #ffffff; font-size: clamp(13px, 3.8vw, 18px); font-weight: 700; } .home-hero .hc-heading > span { white-space: nowrap; } .home-hero .hc-heading::before, .home-hero .hc-heading::after { content: ""; flex: 1 1 12px; min-width: 12px; max-width: 40px; height: 1px; background: linear-gradient(90deg, rgba(255, 165, 36, 0), var(--accent-orange)); } .home-hero .hc-heading::after { background: linear-gradient(90deg, var(--accent-orange), rgba(255, 165, 36, 0)); } .home-hero .hc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .home-hero .hc-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 8px 15px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 34, 68, 0.92) 0%, rgba(13, 23, 48, 0.94) 100%); border: 1px solid rgba(120, 155, 230, 0.24); color: #dbe6ff; font: inherit; text-align: center; cursor: pointer; transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .home-hero .hc-card:hover { transform: translateY(-2px); border-color: rgba(120, 155, 230, 0.5); } .home-hero .hc-card:active { transform: translateY(0) scale(0.98); } .home-hero .hc-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #4aa8ff; border: 1.5px solid rgba(74, 168, 255, 0.5); background: rgba(74, 168, 255, 0.08); box-shadow: inset 0 0 16px rgba(74, 168, 255, 0.14); } .home-hero .hc-card-title { color: #ffffff; font-size: 13.5px; font-weight: 800; } .home-hero .hc-card-desc { color: #b6c4e6; font-size: 11.5px; line-height: 1.35; flex: 1 1 auto; } .home-hero .hc-card-btn { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 16px; border-radius: 999px; background: rgba(74, 168, 255, 0.1); border: 1px solid rgba(74, 168, 255, 0.45); color: #cfe4ff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; position: relative; /* soft breathing glow under the radiating rings */ animation: hcBtnGlow 2.4s ease-in-out infinite; } /* Radiating rings: two expanding pill-shaped waves emanating from the button, staggered half a cycle apart so radiation feels continuous. */ .home-hero .hc-card-btn::before, .home-hero .hc-card-btn::after { content: ''; position: absolute; inset: -1px; /* start on the button's own border */ border-radius: inherit; border: 1.5px solid rgba(74, 168, 255, 0.55); opacity: 0; pointer-events: none; animation: hcBtnRadiate 2.4s ease-out infinite; } .home-hero .hc-card-btn::after { animation-delay: 1.2s; } @keyframes hcBtnRadiate { 0% { transform: scale(1); opacity: 0.8; } 75% { transform: scale(1.35, 1.95); opacity: 0; } 100% { transform: scale(1.35, 1.95); opacity: 0; } } @keyframes hcBtnGlow { 0%, 100% { box-shadow: 0 0 6px rgba(74, 168, 255, 0.18); } 50% { box-shadow: 0 0 14px rgba(74, 168, 255, 0.40); } } /* Primary (Talk to Adam) card — orange accent + glow, like the mockup */ .home-hero .hc-card--primary { border-color: rgba(255, 165, 36, 0.7); box-shadow: 0 0 0 1px rgba(255, 165, 36, 0.22), 0 12px 30px rgba(255, 138, 0, 0.16); } .home-hero .hc-card--primary .hc-card-icon { color: var(--accent-orange); border-color: rgba(255, 165, 36, 0.8); background: rgba(255, 165, 36, 0.1); box-shadow: inset 0 0 16px rgba(255, 165, 36, 0.18); } .home-hero .hc-card--primary .hc-card-btn { background: rgba(255, 165, 36, 0.14); border-color: rgba(255, 165, 36, 0.6); color: #ffd9a0; animation-name: hcBtnGlowOrange; } .home-hero .hc-card--primary .hc-card-btn::before, .home-hero .hc-card--primary .hc-card-btn::after { border-color: rgba(255, 165, 36, 0.6); } @keyframes hcBtnGlowOrange { 0%, 100% { box-shadow: 0 0 6px rgba(255, 165, 36, 0.22); } 50% { box-shadow: 0 0 16px rgba(255, 165, 36, 0.5); } } /* Desktop: keep the new landing a centered single column, a touch larger. */ @media (min-width: 769px) { .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-hero, .adam-landing .home-hero { max-width: 640px; padding: 22px 12px 32px; } .home-hero .ha-intro { max-width: 340px; } .home-hero .hc-card-desc { font-size: 12.5px; } } /* Wide desktop home: use the available canvas instead of presenting the mobile/tablet column in the middle of the screen. This is intentionally home-page-only; direct-landing overlays and every width below 1024px retain their existing composition. */ @media (min-width: 1024px) { .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) #page-content { justify-content: center; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-hero { width: min(100%, 1100px); max-width: 1100px; min-height: 100%; justify-content: center; gap: 12px; padding: 16px 24px 22px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-topline { padding: 0 18px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-adam { min-height: 324px; align-items: stretch; gap: 42px; padding: 0 30px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-adam-copy { display: flex; flex: 1 1 50%; flex-direction: column; justify-content: center; padding: 14px 0 24px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-welcome { font-size: 36px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-uni { margin-top: 7px; font-size: 20px; line-height: 1.2; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-name { margin-top: 14px; font-size: 50px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-role { margin-top: 7px; font-size: 21px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-divider { width: 180px; margin-top: 16px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-divider::after { left: 82px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-intro { max-width: 430px; margin-top: 16px; font-size: 16px; line-height: 1.6; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-adam-photo { flex: 0 0 46%; min-height: 324px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .ha-photo-img { object-fit: contain; object-position: center bottom; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .home-connect { margin-top: 0; padding: 0 18px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-heading { gap: 16px; margin: 0 0 16px; font-size: 18px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-heading::before, .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-heading::after { max-width: 90px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-cards { gap: 18px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "icon title button" "icon description button"; min-height: 124px; column-gap: 18px; row-gap: 6px; align-items: center; padding: 20px 22px; text-align: left; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-card-icon { grid-area: icon; width: 62px; height: 62px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-card-title { grid-area: title; align-self: end; font-size: 17px; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-card-desc { grid-area: description; align-self: start; font-size: 13.5px; line-height: 1.45; } .app-shell.home-page:not(.voice-chat-mode):not(.show-programs) .hc-card-btn { grid-area: button; min-width: 82px; margin: 0; padding: 10px 18px; font-size: 13.5px; } } /* ================================================================ AVATAR HIDE + COLLAPSED ADAM DOCK — program & menu pages only (.app-shell.avatar-hideable, set by menu.html / program_detail.html). The eye button (top-left of the avatar) collapses the video window into a compact glowing Adam chip; narration audio keeps playing and can be muted from the badge on the chip. Tapping the chip restores the avatar. A live voice call (.voice-chat-mode) always overrides the collapse so the live Adam is never hidden. ================================================================ */ .avatar-hide-btn { position: absolute; top: 12px; left: 12px; z-index: 7; width: 40px; height: 40px; padding: 0; display: none; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(8, 15, 35, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.55); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .app-shell.avatar-hideable .avatar-hide-btn { display: flex; } .avatar-hide-btn:hover { transform: scale(1.08); background: rgba(8, 15, 35, 0.75); } .avatar-hide-btn:active { transform: scale(0.95); } .avatar-hide-btn svg { display: block; pointer-events: none; } /* Never during a live call, the landing overlay or the launch intro. */ .app-shell.voice-chat-mode .avatar-hide-btn, .app-shell.launch-intro-mode .avatar-hide-btn { display: none !important; } /* ── Collapsed dock: glowing Adam chip + mute badge + label ── */ .avatar-dock { display: none; flex-direction: column; align-items: center; gap: 7px; padding: 14px 12px 12px; pointer-events: auto; } /* Collapsed state (never while a live call or the launch intro is up): swap everything inside the visual window for the dock. */ .app-shell.avatar-hideable.avatar-collapsed:not(.voice-chat-mode):not(.launch-intro-mode):not(.keyboard-open) .visual-window > *:not(.avatar-dock) { display: none !important; } .app-shell.avatar-hideable.avatar-collapsed:not(.voice-chat-mode):not(.launch-intro-mode):not(.keyboard-open) .avatar-dock { display: flex; } /* Kill the window's tap-to-pause while collapsed (dock keeps its own events). */ .app-shell.avatar-hideable.avatar-collapsed:not(.voice-chat-mode):not(.launch-intro-mode):not(.keyboard-open) .visual-window { pointer-events: none; cursor: default; } .avatar-dock-chip-wrap { position: relative; display: block; width: 74px; height: 74px; } .avatar-dock-chip { display: block; width: 100%; height: 100%; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .avatar-dock-chip:active { transform: scale(0.96); } .avatar-dock-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-orange); animation: avatarDockGlow 1.9s ease-in-out infinite; } @keyframes avatarDockGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255, 165, 36, 0.45), 0 0 0 0 rgba(255, 165, 36, 0.30); } 50% { box-shadow: 0 0 20px rgba(255, 165, 36, 0.85), 0 0 0 7px rgba(255, 165, 36, 0.12); } } /* Mute badge riding the chip's bottom-right edge */ .avatar-dock-mute { position: absolute; right: -5px; bottom: -5px; z-index: 1; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(8, 15, 35, 0.92); border: 1.5px solid var(--accent-orange); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); cursor: pointer; } .avatar-dock-mute:hover { transform: scale(1.1); } .avatar-dock-mute .adm-icon { display: block; pointer-events: none; } .avatar-dock-mute .adm-icon-off { display: none; } .avatar-dock-mute.is-muted .adm-icon-on { display: none; } .avatar-dock-mute.is-muted .adm-icon-off { display: block; } .avatar-dock-mute.is-muted { color: #f98d02; } .avatar-dock-label { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--accent-orange); text-shadow: 0 0 10px rgba(255, 165, 36, 0.35); white-space: nowrap; } /* Mobile: shrink the 30vh visual row down to the dock's natural height so the freed space goes to the text window (1fr row). Desktop keeps its two-column grid; the dock simply centers in the left visual pane. */ @media (max-width: 768px) { .app-shell.avatar-hideable.avatar-collapsed:not(.voice-chat-mode):not(.launch-intro-mode):not(.keyboard-open) { grid-template-rows: var(--header-height) auto 1fr var(--chat-height) auto var(--nav-height); } } /* ================================================================ Vertical "Apply Now" tab pinned to the right edge — program pages (same look & behavior as the Fee & Scholarship page's .fs-apply-fab). ================================================================ */ .pd-apply-fab { position: fixed; right: 0; /* Sits higher than the Fee page's 50% so it clears the mic button that program pages show at the right edge of the chat bar. */ top: 38%; transform: translateY(-50%); z-index: 60; writing-mode: vertical-rl; text-orientation: mixed; background: #f18e08; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1; padding: 16px 9px; border-radius: 10px 0 0 10px; box-shadow: -3px 3px 12px rgba(11, 20, 44, 0.35); -webkit-tap-highlight-color: transparent; } .pd-apply-fab:active { filter: brightness(0.94); } /* Hidden during a live "Ask Adam" call and the full-screen overlays (Adam landing / launch intro), like the rest of the page chrome. */ .app-shell.voice-chat-mode .pd-apply-fab, .app-shell.adam-landing-mode .pd-apply-fab, .app-shell.launch-intro-mode .pd-apply-fab { display: none !important; }