/* ─── NEXLANE SHARED RESPONSIVE ───────────────────────────────────── Linked from all pages alongside theme.css. Handles cross-page touch/pointer fixes and safe-area insets. Page-specific layout breakpoints live in each page's styles.css. ──────────────────────────────────────────────────────────────────── */ /* ── Safe-area padding for notched iPhones ──────────────────────── */ body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* NOTE: never set overflow-x on here — it stops the body's overflow-x from propagating to the viewport, which turns into its own scroll container and silently breaks position: sticky (the Home hero). Sideways overflow is handled at the source (edge-light inset on touch, grid fixes) plus body { overflow-x: hidden } in each page's stylesheet. */ /* ── Touch targets: ensure all buttons/links hit 44×44px ───────── */ @media (pointer: coarse) { .btn, .btn-primary, .btn-ghost, .btn-blue, .btn-violet, .btn-sol, .btn-nav, .filter-btn { min-height: 44px; } /* No 3D tilt on touch (the tilt JS skips hover-less devices) — but the card stays interactive: its links and taps must keep working */ .card-tilt-wrapper { transform: none !important; } /* Border-glow: cursor-tracked effect is N/A on touch — hide the hover layer so it doesn't flash on tap */ .border-glow-card:hover::before, .border-glow-card:hover::after, .border-glow-card:hover > .edge-light { opacity: 0 !important; } /* The glow layer normally reaches 40px past the card (its glow radius). With the effect off on touch, pull it back inside the card so it can't widen the page. */ .border-glow-card > .edge-light { inset: 0 !important; } } /* ── Fluid section padding for all pages ───────────────────────── */ @media (max-width: 768px) { /* pill nav: tighten for small screens */ nav { top: 10px; width: calc(100% - 24px); padding: 8px 8px 8px 16px; } } /* ── Reduced motion: global baseline ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Scroll reveal: start visible, no animation */ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Tilted card: no 3D transform */ .card-tilt-wrapper { transform: none !important; transition: none !important; } /* Border glow: remove transitions so the static hairline border shows */ .border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light { transition: none !important; } /* Hero animations handled per-page */ .logoloop__track { transform: translate3d(0, 0, 0) !important; } .logoloop__node { transition: none !important; } }