/* Isolated mobile + honesty overlay for AuroraDAW.com. Does not restore listen players, Stripe checkout URLs, or login JS. Hook from index.html after the existing stylesheets. */ html{scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 12px)} /* ---- nav: safe area + compact mobile menu ---- */ .nav{ padding-top:env(safe-area-inset-top,0px); height:calc(var(--nav-h) + env(safe-area-inset-top,0px)); padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px)); } /* Keep the in-page links reachable on phones even when the inline stylesheet hides .nav-links. No hamburger markup — index.html nav is claimed elsewhere. */ @media (max-width:900px){ .nav{ flex-wrap:wrap; height:auto; min-height:calc(var(--nav-h) + env(safe-area-inset-top,0px)); row-gap:0; } .nav-links{ display:flex !important; order:3; flex:1 0 100%; width:100%; margin-left:0; padding:6px 0 10px; gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .nav-links::-webkit-scrollbar{display:none} .nav-links a{flex:none;min-height:36px;display:inline-flex;align-items:center} .nav-cta{margin-left:auto} .brand{font-size:1.15rem;letter-spacing:.06em} .brand small{letter-spacing:.2em} } @media (max-width:420px){ .nav-cta{min-width:0;padding:0 12px} } /* ---- hero: phone fold + safe gutters ---- */ @media (max-width:620px){ .hero{ min-height:0; padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 16px); padding-bottom:28px; } .hero-in{gap:20px;padding-inline:max(16px, env(safe-area-inset-left,0px), env(safe-area-inset-right,0px))} .hero-ctas .btn{flex:1 1 100%;min-height:48px} .hero-lock{max-width:none} .hero-shot figcaption{padding-inline:2px} } /* ---- footer: stack, 44px taps, named public site ---- */ @media (max-width:720px){ footer{padding-block:36px calc(36px + env(safe-area-inset-bottom,0px))} .foot{flex-direction:column;gap:22px} .foot-links{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .foot-links a{ min-height:44px; display:flex;align-items:center; padding:8px 4px; } } /* Empty listen rail stays copy-only. Do not paint dead transport chrome. */ .player-sec:not(:has(audio)):not(:has(.player)) .featrow, .player-sec:not(:has(audio)):not(:has(.player)) .featrail, .player-sec:not(:has(audio)):not(:has(.player)) .wavebox, .player-sec:not(:has(audio)):not(:has(.player)) .trans{display:none} /* ---- login / legal: 44px taps, readable stills, leadership stays ---- */ @media (max-width:720px){ body:has(#login-h) main, body:has(#code-h) main{ padding:calc(var(--nav-h,60px) + env(safe-area-inset-top,0px) + 20px) max(16px, env(safe-area-inset-left,0px), env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)); } body:has(#login-h) .card, body:has(#code-h) .card{padding:clamp(22px,5vw,32px)} body:has(#login-h) input[type=text], body:has(#login-h) .btn, body:has(#code-h) .btn{ min-height:48px; } body:has(#top) #night-studio .sec-head, body:has(#top) #listen .sec-head{gap:12px} body:has(#top) #night-studio .lead, body:has(#top) #listen .lead{max-width:none} } @media (prefers-reduced-motion:reduce){ .nav,.nav-panel,.hero-ctas .btn{transition:none} }