/* Grip Voice, dressed to match gripcannabis.com exactly. * Pulls the real site tokens (anthracite + seasonal copper) and the website's * atmosphere (ambient washes, grain, slow breathe), Inter Tight / Fraunces / * Inter / JetBrains Mono. Season is set on by date. */ @import "./site-tokens.css"; *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--anthracite); color: var(--bone); font-family: var(--ff-body); font-weight: 400; -webkit-font-smoothing: antialiased; } /* Website body atmosphere: ambient seasonal washes + grain + slow breathe. */ body { background: radial-gradient(1400px 900px at 12% -10%, color-mix(in srgb, var(--copper) 26%, transparent), transparent 55%), radial-gradient(1200px 800px at 92% -5%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 55%), radial-gradient(900px 700px at 50% 115%, color-mix(in srgb, var(--copper) 12%, transparent), transparent 60%), var(--anthracite); background-attachment: fixed; animation: body-breathe 14s ease-in-out infinite; } @keyframes body-breathe { 0%, 100% { background-color: var(--anthracite); } 50% { background-color: color-mix(in srgb, var(--anthracite) 92%, var(--copper)); } } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 22% 35%, color-mix(in srgb, var(--copper) 20%, transparent) 0, transparent 1px), radial-gradient(circle at 78% 65%, color-mix(in srgb, var(--copper) 16%, transparent) 0, transparent 0.8px), radial-gradient(circle at 45% 88%, color-mix(in srgb, var(--copper) 12%, transparent) 0, transparent 0.7px); background-size: 6px 6px, 9px 9px, 13px 13px; opacity: 0.5; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { *, *::before { animation-duration: 0ms !important; } } /* App shell */ .view { display: none; height: 100dvh; flex-direction: column; position: relative; z-index: 1; } .view.on { display: flex; } header { padding: 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--hairline); background: linear-gradient(to bottom, color-mix(in srgb, var(--anthracite-deepest) 92%, transparent), transparent); } /* Calm + minimalist: the small nav mark is still, no pulse. */ header .mark { width: 30px; height: 30px; object-fit: contain; } .pulse-dot { display: none; } header h1 { flex: 1; font-family: var(--ff-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; } /* The wordmark is a single fancy word: "Voice" in italic Fraunces. */ .wordmark { font-family: var(--ff-serif) !important; font-weight: 300; font-style: italic; letter-spacing: -0.01em; color: color-mix(in srgb, var(--copper) 80%, var(--bone)); } header h1.wordmark { font-size: 26px; } /* Kicker pill (mono, the website .kicker idiom) */ .pill { font-family: var(--ff-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 5px 11px; } /* Start screen */ .start-wrap { padding: 26px var(--content-pad); max-width: 560px; margin: 0 auto; width: 100%; } .hero { text-align: center; padding: 24px 0 12px; } /* Exact gripcannabis.com hero-hex glow: hex-breathe, 6s, copper bloom 50px->90px / 55%->80%. */ @property --glow-r { syntax: ""; inherits: true; initial-value: 50px; } @property --glow-a { syntax: ""; inherits: true; initial-value: 55%; } @keyframes hex-breathe { 0%, 100% { --glow-r: 50px; --glow-a: 55%; } 50% { --glow-r: 90px; --glow-a: 80%; } } .hero .mark-lg { width: min(74vw, 300px); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 24px; display: block; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 var(--glow-r, 60px) color-mix(in srgb, var(--copper) var(--glow-a, 70%), transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--copper) 90%, transparent)); animation: hex-breathe 6s ease-in-out infinite; } .hero .kicker { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--copper); } .hero h2.wordmark { font-family: var(--ff-serif); font-weight: 300; font-style: italic; font-size: clamp(40px, 13vw, 64px); letter-spacing: -0.02em; margin-top: 10px; color: color-mix(in srgb, var(--copper) 80%, var(--bone)); } .start-wrap label { display: block; font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-2); margin: 18px 0 7px; } select, input, textarea { font-family: var(--ff-body); } select, input { width: 100%; padding: 14px; font-size: 16px; color: var(--bone); background: var(--anthracite-deep); border: 1px solid var(--hairline-strong); border-radius: 4px; } select:focus, input:focus, textarea:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--copper) 16%, transparent); } .row { display: flex; gap: 12px; } .row > * { flex: 1; } /* Primary CTA = website .btn.primary (solid seasonal copper) */ .big { width: 100%; margin-top: 28px; padding: 16px 26px; font-family: var(--ff-body); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; background: var(--copper); color: var(--bone); border: 1px solid var(--copper); border-radius: 4px; transition: all 0.15s ease; } .big:hover { background: var(--copper-dim); box-shadow: 0 0 0 6px color-mix(in srgb, var(--copper) 18%, transparent); } /* Chat */ /* Hex-mark watermark behind the conversation (the site's .ph idiom), static and centered so it reads as brand without fighting legibility. */ /* Chat hex: the exact front-page glow + smooth hex-breathe pulse, sized down. */ .chat-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(62vw, 300px); height: auto; aspect-ratio: 1; object-fit: contain; z-index: 0; pointer-events: none; opacity: 0.7; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 var(--glow-r, 60px) color-mix(in srgb, var(--copper) var(--glow-a, 70%), transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--copper) 90%, transparent)); animation: hex-breathe 6s ease-in-out infinite; } #chatView header, #chatView .msgs, #chatView .confirmbar, #chatView .bar { position: relative; z-index: 1; } .msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px var(--content-pad); display: flex; flex-direction: column; gap: 13px; } .b { max-width: 86%; padding: 12px 15px; border-radius: 10px; white-space: pre-wrap; word-wrap: break-word; font-size: 16px; line-height: 1.5; } .b.agent { background: var(--card); border: 1px solid var(--hairline); border-left: 2px solid var(--copper); align-self: flex-start; } .b.me { background: var(--anthracite-2); border: 1px solid var(--hairline); align-self: flex-end; } .b.sys { align-self: center; background: transparent; color: var(--steel-2); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; text-align: center; } .b .src { display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); margin-top: 7px; } /* Composer bar */ .bar { border-top: 1px solid var(--hairline); padding: 11px; display: flex; gap: 9px; align-items: flex-end; background: var(--anthracite-deep); } .bar textarea { flex: 1; resize: none; max-height: 120px; padding: 12px; font-size: 16px; color: var(--bone); background: var(--anthracite); border: 1px solid var(--hairline-strong); border-radius: 8px; } .ic { width: 52px; height: 52px; flex: 0 0 auto; border: 0; border-radius: 50%; display: grid; place-items: center; } .ic svg { width: 23px; height: 23px; display: block; } /* Live recording meter: copper waveform + timer, shown only while recording. */ .recbar { display: none; flex: 1; align-items: center; gap: 12px; height: 52px; padding: 0 4px; } .recbar canvas { flex: 1; width: 100%; height: 34px; display: block; } .rectime { font-family: var(--ff-mono); font-size: 13px; color: var(--copper); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } .bar.recording .recbar { display: flex; } .bar.recording .cam, .bar.recording #txt, .bar.recording .send { display: none; } .ic.mic { background: var(--copper); color: var(--bone); } .ic.mic.rec { background: #d6533a; color: #fff; animation: pulse 1s infinite; } .ic.cam { background: var(--anthracite-2); color: var(--bone); border: 1px solid var(--hairline-strong); } .ic.cam.hot { background: var(--copper); color: var(--bone); border-color: var(--copper); } .ic.send { background: var(--anthracite-2); color: var(--copper); border: 1px solid var(--hairline-strong); } @keyframes pulse { 50% { opacity: 0.5; } } /* Confirm + done */ .confirmbar { padding: 13px var(--content-pad); border-top: 1px solid var(--hairline-strong); background: var(--anthracite-deep); } .confirmbar button { width: 100%; padding: 15px; font-family: var(--ff-body); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; background: var(--copper); color: var(--bone); border: 1px solid var(--copper); border-radius: 4px; } .pad { padding: 22px var(--content-pad); max-width: 600px; margin: 0 auto; width: 100%; overflow-y: auto; } .sumrow { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); } .sumrow .k { color: var(--steel-2); font-size: 13px; } .sumrow .v { text-align: right; font-weight: 500; color: var(--bone); } .sumhead { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); margin: 20px 0 7px; display: flex; align-items: center; gap: 12px; } .sumhead::before { content: ""; width: 40px; height: 2px; background: linear-gradient(90deg, var(--copper), transparent); } .score { font-family: var(--ff-display); font-weight: 600; font-size: 60px; letter-spacing: -0.03em; text-align: center; margin: 20px 0 6px; color: var(--copper); font-variant-numeric: tabular-nums; } .hint { color: var(--steel-2); font-size: 13px; text-align: center; } .muttxt { color: var(--bone-dim); font-size: 14px; font-weight: 300; line-height: 1.6; }