/* LINGO — responsive behaviour. Mobile is a first-class layout, not a squeezed desktop: the app gets a real bottom tab bar and the sidebar becomes an off-canvas drawer. */ @media (max-width: 1080px) { .hero-chip-2 { left: 0; } .hero-chip-1 { right: 0; } .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-copy { max-width: none; } .hero-stage { min-height: 420px; margin-top: var(--sp-5); } .auth-grid { grid-template-columns: 1fr; } .auth-aside { display: none; } } @media (max-width: 900px) { /* ---- public header collapses to a drawer ---- */ .site-nav { display: none; } .site-header-actions .btn-ghost { display: none; } .site-burger { display: inline-flex; } body.drawer-open .site-drawer { display: flex; } /* ---- app shell becomes single column + bottom tabs ---- */ .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; /* Above the backdrop below. Both live inside .app-root, which is its own stacking context — a backdrop on would sit above the whole app, menu included, however high the menu's z-index went. */ z-index: 92; transform: translateX(-102%); transition: transform var(--t) var(--ease); box-shadow: var(--shadow-3); } body.sidebar-open .sidebar { transform: none; } body.sidebar-open .app-shell::after { content: ""; position: fixed; inset: 0; z-index: 88; background: rgba(4, 5, 7, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Keep the page still behind the open menu. */ body.sidebar-open { overflow: hidden; } /* ---- top bar: six controls do not fit across a phone ---- */ .topbar { gap: 6px; padding-inline: 12px; } .topbar-burger { display: inline-flex; } .topbar-logo { display: inline-flex; margin-right: 2px; } /* XP is on the dashboard card a thumb-length below; the streak is the one number worth carrying in the bar, and only as a number. */ .topbar-stats .xp-pill { display: none; } .topbar .pill-compact { padding: 5px 10px; font-size: var(--step--1); } /* The language switcher moves to the sidebar, where it has room for the names of the languages rather than two letters and an arrow. */ .topbar .lang-compact { display: none; } .sidebar .lang-sidebar { display: block; margin-top: 4px; } .sidebar .lang-sidebar .lang-trigger { width: 100%; justify-content: flex-start; gap: 12px; padding: 12px; border-color: transparent; font-family: var(--font-ui); letter-spacing: normal; } .sidebar .lang-sidebar .lang-menu { width: 100%; } /* Touch targets: 40px minimum, and enough room between them to tell apart. */ .topbar-bell, .topbar-burger, .topbar-avatar { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none; } .bell-dot { top: 8px; right: 9px; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: flex; justify-content: space-around; gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(11, 13, 17, 0.9); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--line); } .tabbar-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: var(--r-sm); color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; transition: color var(--t) var(--ease); } .tabbar-link.is-active { color: var(--accent); } .tabbar-link.is-active .icon { transform: translateY(-1px); } .tabbar-link:active { background: var(--surface); } .app-main { padding-bottom: calc(var(--tabbar-h) + var(--sp-6)); } .offline-bar { bottom: calc(var(--tabbar-h) + 16px); } } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .loop-step::after { display: none; } .plan-grid { margin-top: var(--sp-6); } .social-card { padding: var(--sp-5) var(--sp-4); } .toast-region { left: var(--sp-4); right: var(--sp-4); max-width: none; } } @media (max-width: 560px) { .hero { padding-block: var(--sp-6) var(--sp-5); } .hero-stage { min-height: 380px; } .hero-chip { font-size: var(--step--2); padding: 9px 12px; } .hero-chip-2 { display: none; } .hero-dash { padding: var(--sp-4); } .onb-card h1, .auth-h1 { font-size: var(--step-3); } .onb-actions { flex-direction: column-reverse; align-items: stretch; } .onb-actions .btn { width: 100%; } .path-facts { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } .footer-bottom { flex-direction: column; gap: 6px; } .modal { padding: var(--sp-4); border-radius: var(--r-md); } .modal-actions { flex-direction: column; } .state { padding: var(--sp-6) var(--sp-4); } } /* Very small phones: keep the hero legible rather than clever. */ @media (max-width: 380px) { .hero-chip-1, .hero-chip-3 { display: none; } .topbar-stats { display: none; } } /* Wide screens: let the dashboard breathe instead of stretching text. */ @media (min-width: 1500px) { .app-main { padding-inline: clamp(40px, 5vw, 96px); } } /* Coarse pointers get bigger hit areas throughout. */ @media (pointer: coarse) { .btn { padding-block: 13px; } .btn-sm { padding-block: 9px; } .sidebar-link, .lang-item { padding-block: 13px; } .option { padding-block: 17px; } }