/* JunaTalk — site styles Editorial ink-on-paper brand. Cross-platform bundled fonts: Source Serif 4 + IBM Plex Sans + IBM Plex Mono (all OFL — same faces ship in the iOS and Android apps). */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* Palette — light (default) */ --paper: #f6f1e6; --paper-2: #efe8d7; --paper-3: #e6dec8; --paper-deep: #d9d0b4; --ink: #1c1917; --ink-2: #3a342e; --ink-3: #6b6358; --ink-4: #a39988; --line: rgba(28,25,23,.10); --line-2: rgba(28,25,23,.18); /* RAG */ --rag-g: #1f7a4d; --rag-a: #c2680c; --rag-r: #a8302a; --bg-g: rgba(31,122,77,.12); --bg-a: rgba(194,104,12,.14); --bg-r: rgba(168,48,42,.13); --bg-gray: rgba(28,25,23,.06); /* Accent (brand surface) */ --accent: #1c1917; --on-accent: #f6f1e6; --on-accent-muted: color-mix(in oklab, var(--on-accent) 65%, transparent); --on-accent-faint: color-mix(in oklab, var(--on-accent) 30%, transparent); --on-accent-line: color-mix(in oklab, var(--on-accent) 22%, transparent); --on-accent-bg: color-mix(in oklab, var(--on-accent) 15%, transparent); /* Typography */ --serif: 'Source Serif 4', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; /* Geometry */ --container: 1180px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 28px; } /* Imagery modes — set on , control paper texture + line-art decorations */ /* ─── Base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; cursor: pointer; } /* ─── Imagery mode B: paper texture ──────────────────────── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background-color: #c9b896; background-image: /* Two large blooming stains for warmth */ radial-gradient(ellipse at 12% 18%, rgba(120,90,50,.18) 0, transparent 38%), radial-gradient(ellipse at 88% 82%, rgba(80,60,30,.16) 0, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(180,150,100,.10) 0, transparent 60%), /* Fine paper grain */ repeating-conic-gradient(from 0deg at 50% 50%, rgba(60,40,20,.04) 0deg 1deg, transparent 1deg 2deg), /* Vertical lined fibres */ repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(60,40,20,.04) 2px, rgba(60,40,20,.04) 3px), repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(60,40,20,.025) 3px, rgba(60,40,20,.025) 4px); background-blend-mode: multiply, multiply, multiply, normal, normal, normal; transition: opacity .3s ease; } [data-imagery="paper"] body::before { opacity: 0.55; mix-blend-mode: multiply; } /* ─── Layout helpers ────────────────────────────────────────── */ .container { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; position: relative; z-index: 1; } @media (max-width: 720px) { .container { padding-left: 20px; padding-right: 20px; } } .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .eyebrow.accent { color: var(--accent); } /* ─── Type scale ────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; color: var(--ink); letter-spacing: -0.02em; } .display { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; } .display em { font-style: italic; font-weight: 600; } .h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; } .h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; } .h3 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; } .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); line-height: 1.55; max-width: 60ch; text-wrap: pretty; } /* ─── Nav ───────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); background: color-mix(in oklab, var(--paper) 78%, transparent); border-bottom: 1px solid var(--line); } .site-nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { width: 30px; height: 30px; flex-shrink: 0; } .brand-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .brand-name em { font-style: italic; } .nav-links { display: flex; align-items: center; gap: 24px; } .nav-link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; } .nav-link:hover { color: var(--ink); } @media (max-width: 760px) { .nav-links .nav-link:not(.cta) { display: none; } } /* ─── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; text-decoration: none; transition: transform .12s ease, opacity .12s ease; } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn.sm { height: 38px; padding: 0 16px; font-size: 13px; } .btn.lg { height: 56px; padding: 0 28px; font-size: 16px; } /* ─── Sections ──────────────────────────────────────────────── */ section { padding: clamp(56px, 7vw, 100px) 0; position: relative; } .section-head { max-width: 720px; margin: 0 0 clamp(28px, 3.5vw, 48px); } .section-head .eyebrow { margin-bottom: 10px; } .section-head h2 { margin-bottom: 14px; } /* ─── Hero ──────────────────────────────────────────────────── */ .hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(36px, 5vw, 64px); } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } } .hero-copy .eyebrow { margin-bottom: 18px; } .hero-copy h1 { margin-bottom: 22px; } .hero-copy .lead { margin-bottom: 32px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-ctas .testflight-meta { font-size: 13px; color: var(--ink-3); margin-left: 6px; } .hero-phone-wrap { display: flex; justify-content: center; align-items: center; position: relative; min-height: 600px; } .hero-phone-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%); } [data-imagery="paper"] .hero-phone-bg, [data-imagery="lineart"] .hero-phone-bg { opacity: 1; } /* ─── Phone mockup ──────────────────────────────────────────── */ .phone { width: 320px; height: 658px; border-radius: 42px; position: relative; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px rgba(28,25,23,.25), 0 0 0 7px #15110b, 0 0 0 8px rgba(255,255,255,.06); flex-shrink: 0; } .phone.compact { width: 280px; height: 575px; border-radius: 38px; box-shadow: 0 20px 40px rgba(28,25,23,.20), 0 0 0 6px #15110b; } .phone.lg { width: 360px; height: 738px; box-shadow: 0 40px 80px rgba(28,25,23,.30), 0 0 0 8px #15110b, 0 0 0 9px rgba(255,255,255,.06); } .phone-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; border-radius: 20px; background: #0a0807; z-index: 5; } .phone-status { position: absolute; top: 0; left: 0; right: 0; height: 48px; padding: 12px 24px 0; display: flex; align-items: center; justify-content: space-between; z-index: 4; color: var(--ink); pointer-events: none; } .phone-status .time { font-family: var(--sans); font-weight: 600; font-size: 14px; font-feature-settings: "tnum"; } .phone-status .spacer { width: 104px; } .phone-status .icons { display: flex; gap: 5px; align-items: center; } .phone-status svg { fill: currentColor; } .phone-home { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; border-radius: 999px; background: var(--ink); opacity: 0.35; z-index: 5; } .phone-screen { position: absolute; inset: 0; padding-top: 50px; display: flex; flex-direction: column; } /* Phone screen content blocks */ .screen-header { padding: 12px 18px 12px; display: flex; align-items: flex-end; justify-content: space-between; } .screen-title { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .screen-gear { width: 32px; height: 32px; border-radius: 999px; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); } .screen-body { flex: 1; overflow: hidden; padding: 8px 14px; } .screen-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px; } .screen-card.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; } .screen-card.paper2 { background: var(--paper-2); } /* RAG chips */ .rag { display: inline-flex; align-items: baseline; padding: 3px 8px; border-radius: 6px; font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.2; } .rag.g { background: var(--bg-g); color: var(--rag-g); } .rag.a { background: var(--bg-a); color: var(--rag-a); } .rag.r { background: var(--bg-r); color: var(--rag-r); } .rag.gray { background: var(--bg-gray); color: var(--ink-3); } /* Phrase wrap */ .phrase-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; line-height: 1.3; } .phrase-row.lg .rag { font-size: 19px; padding: 4px 9px; } /* Mic dock */ .mic-dock { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 18px rgba(28,25,23,.06); } .mic-btn { width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: var(--on-accent); border: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mic-btn.rec { background: var(--rag-r); color: white; } .mic-status { font-family: var(--sans); font-size: 12.5px; color: var(--ink); font-weight: 500; flex: 1; min-width: 0; } .mic-foot { font-family: var(--sans); font-size: 10px; color: var(--ink-3); margin-top: 2px; } /* Pill */ .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 500; background: var(--paper-2); color: var(--ink-2); } .pill.ghost { background: transparent; color: var(--ink-3); border: 1px solid var(--line); } /* Ring grade */ .ring-grade { width: 64px; height: 64px; position: relative; display: inline-flex; align-items: center; justify-content: center; } .ring-grade svg { transform: rotate(-90deg); } .ring-grade .val { position: absolute; font-family: var(--mono); font-weight: 600; font-size: 19px; color: var(--ink); font-feature-settings: "tnum"; } .ring-grade.dark .val { color: var(--on-accent); } /* Grade chip */ .grade-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 999px; font-family: var(--mono); font-weight: 600; font-size: 11.5px; font-feature-settings: "tnum"; } .grade-chip .lbl { font-family: var(--sans); font-weight: 500; font-size: 10px; opacity: .8; } /* Meter bar */ .meter { display: flex; flex-direction: column; gap: 4px; } .meter-row { display: flex; justify-content: space-between; align-items: baseline; } .meter-lbl { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .meter-val { font-family: var(--mono); font-size: 11px; font-weight: 600; font-feature-settings: "tnum"; } .meter-track { height: 4px; border-radius: 999px; background: var(--bg-gray); overflow: hidden; } .meter-fill { height: 100%; border-radius: 999px; } /* ─── Feature grid ──────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .feature-card { padding: 28px 24px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .feature-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 12px 32px rgba(28,25,23,.06); } .feature-card h3 { font-size: 22px; } .feature-card p { color: var(--ink-3); font-size: 14px; margin: 0; } .feature-card .arrow { margin-top: auto; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; } /* ─── Feature sections (alternating phone + copy) ─────────────── */ .feature-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .feature-section.reverse > .feature-phone-wrap { order: 2; } @media (max-width: 900px) { .feature-section { grid-template-columns: 1fr; } .feature-section.reverse > .feature-phone-wrap { order: 0; } } .feature-copy .eyebrow { margin-bottom: 12px; } .feature-copy h2 { margin-bottom: 16px; } .feature-copy .lead { margin-bottom: 24px; } .feature-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; } .feature-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.5; } .feature-bullets li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-top: 9px; } .feature-phone-wrap { display: flex; justify-content: center; align-items: center; min-height: 600px; position: relative; } /* Inline link (arrow) */ .link-arrow { font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; } .link-arrow:hover { border-color: var(--ink); } /* ─── Language showcase ─────────────────────────────────────── */ .lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; max-width: 720px; } .lang-grid .lang { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); } /* ─── Pricing ───────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; } @media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } } .price-card { padding: 36px; border-radius: var(--radius-xl); background: var(--accent); color: var(--on-accent); display: flex; flex-direction: column; } .price-card .eyebrow { color: var(--on-accent-muted); margin-bottom: 14px; } .price-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .price-card .price { font-family: var(--serif); font-weight: 600; font-size: 64px; letter-spacing: -0.03em; line-height: 1; } .price-card .price-unit { font-family: var(--sans); font-size: 16px; color: var(--on-accent-muted); } .price-card .price-sub { font-size: 14px; color: var(--on-accent-muted); margin-bottom: 24px; } .price-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; } .price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--on-accent); line-height: 1.5; } .price-features li svg { flex-shrink: 0; margin-top: 3px; color: var(--on-accent); } .price-card .btn.primary { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); } .price-foot { font-size: 12px; color: var(--on-accent-muted); margin-top: 16px; text-align: center; } .referral-card { padding: 32px; border-radius: var(--radius-xl); background: var(--paper-2); border: 1px solid var(--line); display: flex; flex-direction: column; } .referral-card .eyebrow { margin-bottom: 14px; } .referral-card h3 { font-size: 26px; margin-bottom: 12px; } .referral-card p { color: var(--ink-2); font-size: 14px; margin: 0 0 24px; } .referral-progress { display: flex; gap: 3px; margin-bottom: 12px; } .referral-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--paper-deep); } .referral-seg.filled { background: var(--ink); } .referral-meta { font-size: 12px; color: var(--ink-3); margin-top: auto; } .referral-meta b { font-weight: 600; } /* ─── FAQ ───────────────────────────────────────────────────── */ .faq-list { display: flex; flex-direction: column; gap: 4px; max-width: 800px; } .faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); padding: 4px 0; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--ink-3); transition: transform .2s ease; } .faq-item[open] summary::after { content: "–"; } .faq-item .answer { padding-top: 12px; padding-right: 32px; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-2); } /* ─── Pronunciation explainer ───────────────────────────────── */ .pron-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 36px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); } @media (max-width: 760px) { .pron-demo { grid-template-columns: 1fr; padding: 24px; } } .pron-demo h3 { margin-bottom: 16px; font-size: 20px; } .pron-band { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .pron-band .swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; } .pron-band .desc { font-size: 14px; color: var(--ink-2); } .pron-band .range { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; } /* ─── Footer ────────────────────────────────────────────────── */ footer { margin-top: clamp(64px, 8vw, 96px); padding: clamp(48px, 6vw, 72px) 0 32px; border-top: 1px solid var(--line); background: var(--paper); font-family: var(--sans); font-size: 13px; color: var(--ink-3); position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .footer-col h4 { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; } .footer-col a { display: block; padding: 4px 0; color: var(--ink-3); text-decoration: none; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); } .footer-bottom .social { display: flex; gap: 14px; } .footer-bottom .social a { width: 32px; height: 32px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: color .15s ease, background .15s ease; } .footer-bottom .social a:hover { background: var(--ink); color: var(--on-accent); } .footer-bottom .credit { color: var(--ink-3); } .footer-bottom .credit a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; } /* ─── L1 switcher ───────────────────────────────────────────── */ .l1-switcher { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--ink-2); cursor: pointer; } .l1-switcher .flag { font-size: 20px; line-height: 1; } .l1-switcher .chev { color: var(--ink-3); font-size: 10px; } /* L1 sheet */ .l1-sheet { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.5); } .l1-sheet[open] { display: flex; } .l1-sheet .panel { width: min(640px, 100%); height: min(640px, 80vh); background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; animation: slideUp .25s ease; } @media (min-width: 600px) { .l1-sheet { align-items: center; } .l1-sheet .panel { border-radius: 22px; height: min(720px, 85vh); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .l1-sheet header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); } .l1-sheet header .title { font-family: var(--serif); font-size: 18px; font-weight: 600; } .l1-sheet header .close { background: var(--paper-2); border: none; width: 32px; height: 32px; border-radius: 999px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; } .l1-search { padding: 12px 22px; border-bottom: 1px solid var(--line); } .l1-search input { width: 100%; height: 40px; padding: 0 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; color: var(--ink); outline: none; } .l1-search input:focus { border-color: var(--accent); background: var(--paper); } .l1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; padding: 14px 18px 22px; overflow-y: auto; flex: 1 1 auto; align-content: start; } .l1-tile { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background .12s ease, border-color .12s ease; min-width: 0; } .l1-tile:hover { background: var(--paper-3); } .l1-tile.selected { border-color: var(--accent); background: var(--paper-3); } .l1-tile .flag { font-size: 22px; flex-shrink: 0; line-height: 1; } .l1-tile .name-block { min-width: 0; flex: 1; } .l1-tile .native { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l1-tile .english { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l1-empty { grid-column: 1/-1; padding: 32px 16px; text-align: center; color: var(--ink-3); font-size: 14px; } /* ─── Tweaks panel ──────────────────────────────────────────── */ .tweaks-panel { position: fixed; right: 16px; bottom: 16px; z-index: 100; background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); font-family: var(--sans); font-size: 12px; width: 240px; max-width: calc(100vw - 32px); } .tweaks-panel header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; } .tweaks-panel header b { font-weight: 600; font-size: 12px; letter-spacing: .01em; } .tweaks-panel header .toggle { font-size: 11px; color: var(--ink-3); } .tweaks-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; } .tweaks-panel.collapsed .tweaks-body { display: none; } .tweaks-row { display: flex; flex-direction: column; gap: 5px; } .tweaks-lbl { color: var(--ink-3); font-weight: 500; font-size: 11px; } .tweaks-seg { display: flex; background: var(--paper-2); border-radius: 8px; padding: 2px; } .tweaks-seg button { flex: 1; border: none; background: transparent; padding: 6px 4px; border-radius: 6px; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--ink-2); } .tweaks-seg button.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* Visually hidden text for accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ─── Imagery mode C: line-art decorations ──────────────── */ .deco-svg { position: absolute; pointer-events: none; color: var(--ink); opacity: 0; z-index: 0; transition: opacity .3s ease; } [data-imagery="lineart"] .deco-svg { opacity: 0.22; } /* Playing-bars animation */ @keyframes barPulse { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .playing-bars { display: inline-flex; align-items: center; gap: 1.5px; height: 14px; } .playing-bars span { width: 2.5px; height: 100%; background: currentColor; border-radius: 1px; animation: barPulse .9s ease-in-out infinite; transform-origin: center; } .playing-bars span:nth-child(2) { animation-delay: .15s; } .playing-bars span:nth-child(3) { animation-delay: .3s; } /* Cursor blink */ @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .cursor { display: inline-block; width: 2px; height: 1em; vertical-align: -2px; background: var(--ink); margin-left: 1px; animation: cursorBlink 1s steps(2) infinite; } /* ─── Sub-page layout helpers (used by feature pages) ────────── */ .subpage-hero { padding: clamp(48px, 6vw, 84px) 0 clamp(28px, 4vw, 48px); } .subpage-hero h1 { margin-bottom: 16px; } .subpage-hero .lead { margin-bottom: 22px; } .split-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(40px, 5vw, 72px) 0; } .split-section.reverse > .feature-phone-wrap { order: 2; } @media (max-width: 900px) { .split-section { grid-template-columns: 1fr; } .split-section.reverse > .feature-phone-wrap { order: 0; } } .split-section .copy h2 { margin-bottom: 16px; } .split-section .copy p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0 0 16px; max-width: 52ch; } .split-section .copy p:last-child { margin-bottom: 0; } .split-section .copy ul { padding: 0; margin: 16px 0 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .split-section .copy ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.55; } .split-section .copy ul li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); margin-top: 10px; } .bottom-cta { padding: clamp(36px, 5vw, 64px) 0 clamp(52px, 7vw, 88px); text-align: center; } .bottom-cta h2 { margin-bottom: 12px; } .bottom-cta p { color: var(--ink-3); margin: 0 0 24px; max-width: 540px; margin-left: auto; margin-right: auto; } /* ─── Mobile responsive overrides ───────────────────────────── */ /* Hamburger button — hidden on desktop, shown on mobile */ .nav-hamburger { display: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; } .nav-hamburger:hover { background: var(--paper-3); } /* Mobile breakpoints */ @media (max-width: 760px) { .nav-hamburger { display: inline-flex; } /* Hide regular nav links; the .nav-link.cta button stays visible */ .nav-links .nav-link:not(.cta) { display: none; } .nav-links .l1-switcher { display: none; } /* Drawer state */ .site-nav.menu-open .mobile-drawer { display: flex; } } /* Mobile drawer */ .mobile-drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px 20px; flex-direction: column; gap: 4px; box-shadow: 0 12px 24px rgba(28,25,23,.08); } .mobile-drawer a { padding: 14px 12px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 10px; } .mobile-drawer a:hover { background: var(--paper-2); } .mobile-drawer .lang-switch-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-top: 6px; border-top: 1px solid var(--line); } .mobile-drawer .lang-switch-row span { font-size: 13px; color: var(--ink-3); } /* Mobile-tight container padding */ @media (max-width: 540px) { .container { padding-left: 16px; padding-right: 16px; } section { padding: clamp(36px, 7vw, 56px) 0; } .subpage-hero { padding: clamp(32px, 6vw, 48px) 0 clamp(16px, 3vw, 24px); } .split-section { padding: clamp(28px, 6vw, 44px) 0; gap: 24px; } .bottom-cta { padding: clamp(32px, 6vw, 48px) 0 clamp(40px, 7vw, 60px); } .section-head { margin-bottom: clamp(20px, 4vw, 28px); } .hero { padding-top: clamp(28px, 5vw, 40px); padding-bottom: clamp(24px, 5vw, 36px); } .hero-grid { gap: 28px; } .pricing-grid { gap: 14px; } .feature-grid { gap: 10px; } } /* Hide decorative SVGs on mobile to prevent overflow */ @media (max-width: 760px) { .deco-svg { display: none; } } /* Scale down large hero phone on narrow viewports so it fits */ @media (max-width: 420px) { .phone.lg { transform: scale(0.82); transform-origin: top center; margin-bottom: -130px; } } @media (max-width: 360px) { .phone, .phone.lg { transform: scale(0.78); transform-origin: top center; margin-bottom: -140px; } } /* Hero CTAs full-width on mobile */ @media (max-width: 540px) { .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; } .hero-ctas .btn { width: 100%; } .hero-ctas .testflight-meta { margin-left: 0; text-align: center; } } /* Feature phone wraps reduce min-height on mobile */ @media (max-width: 760px) { .feature-phone-wrap, .hero-phone-wrap { min-height: 0; padding: 16px 0; } } /* Demo sidebar — disable sticky on mobile so it scrolls naturally */ @media (max-width: 980px) { .demo-side { position: static !important; } } @media (max-width: 540px) { .demo-side { padding: 18px; } .demo-segment button { padding: 8px 4px; font-size: 11px; } .demo-stage { min-height: 0; } .phrase-bar .phrase-row { font-size: 22px; } .phrase-bar .phrase-row .rag { font-size: 19px; padding: 4px 8px; } } /* Pricing card padding tighter on mobile */ @media (max-width: 540px) { .price-card, .referral-card { padding: 24px 20px; } .price-card .price { font-size: 52px; } } /* Feature card tighter on mobile */ @media (max-width: 540px) { .feature-card { padding: 22px 18px; } .feature-grid { grid-template-columns: 1fr; gap: 12px; } } /* Footer cleaner on mobile */ @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; } } /* Vocab cards full-width and tighter on mobile */ @media (max-width: 540px) { .vocab-card { padding: 14px 16px; } .vocab-card .word .en { font-size: 22px; } } /* FAQ — bigger tap targets */ @media (max-width: 540px) { .faq-item summary { font-size: 16px; padding: 8px 0; } .faq-item .answer { font-size: 14px; padding-right: 8px; } } /* Language grid spacing on mobile */ @media (max-width: 540px) { .lang-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; } .lang-grid .lang { font-size: 22px; border-radius: 10px; } } /* ─── Store badges (iOS + Android) ──────────────────────────── */ .store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .store-badge { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; min-width: 200px; padding: 0 20px; box-sizing: border-box; border-radius: 14px; background: var(--accent); color: var(--on-accent); text-decoration: none; border: 1px solid var(--accent); transition: transform .12s ease, opacity .12s ease; } .store-badge:active { transform: scale(0.97); } .store-badge svg { flex-shrink: 0; } .store-badge .lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .store-badge .pre { font-family: var(--sans); font-size: 10.5px; font-weight: 500; opacity: .75; letter-spacing: .04em; text-transform: uppercase; } .store-badge .store { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .store-badge.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } @media (max-width: 540px) { .store-badges { flex-direction: column; align-items: stretch; } .store-badge { justify-content: center; } } /* Store badges centered in bottom CTA sections */ .bottom-cta .store-badges { justify-content: center; } @media (max-width: 540px) { .bottom-cta .store-badges { align-items: center; } } /* Demo sidebar: the badge pair stacks — left-align content so the logos line up; the 20px Play mark gets 1px side margins to sit in the same 22px icon column as the Apple mark (keeps the text edge aligned too). */ .demo-side .store-badges { flex-direction: column; align-items: flex-start; } .demo-side .store-badge { justify-content: flex-start; } .demo-side .store-badge svg[width="20"] { margin-left: 1px; margin-right: 1px; } .nav-link.active { color: var(--ink); font-weight: 600; } .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ─── Web components (v6 migration) ─────────────────────────── */ /* Custom elements default to display:inline; give the block-level Light-DOM components their expected display. Class-based hooks (.phrase-row, .meter, .mic-dock, .l1-sheet, …) handle the rest. */ juna-nav, juna-phone, juna-demo, juna-reveal { display: block; } juna-l1-switcher, juna-deco { display: contents; } /* Spinner + play-button states (moved here from the old JS-injected styles) */ @keyframes spin { to { transform: rotate(360deg); } } .play-anim { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: none; } .play-anim .play-tri { display: block; } .play-anim .bars { display: none; } .play-anim.playing .play-tri { display: none; } .play-anim.playing .bars { display: inline-flex; }