/* ============================================================ TunnelQuiz, shared site chrome for phones and tablets. Loaded by every page: the hand-written static pages in public/ link it from their , and app/layout.tsx links it for the Next.js routes. It owns three things: 1. The mobile navigation drawer (.tq-burger, .tq-drawer, .tq-scrim). The static pages get the drawer markup from /tq-menu.js; the Next.js pages render the same classes from SiteChrome.tsx. Both toggle the `tq-menu-open` class on , so the open state lives here once. 2. Mobile performance overrides. Fixed noise overlays, backdrop blurs and layout-thrashing animations are what made the site stutter on phones, so under 900px (or on any touch device) they are switched off. 3. Small touch ergonomics: tap highlight, anchor offset, focus rings. ============================================================ */ /* ---- touch ergonomics ---- */ html{-webkit-text-size-adjust:100%;scroll-padding-top:84px} a,button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation} :focus-visible{outline:2px solid var(--brand,#007E65);outline-offset:2px} img,video{max-width:100%;height:auto} html,body{overflow-x:clip} /* Marquee hover-pause sticks on touch screens, where a tap is a hover. */ @media(hover:none){.tq-marquee:hover .tq-marquee-track,.tq-marquee-track:hover{animation-play-state:running!important}} /* ---- hamburger ---- */ .tq-burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px;padding:0;background:transparent;border:0;border-radius:12px;cursor:pointer;flex-shrink:0;order:99;color:var(--ink,#0F172A)} .tq-burger span{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .2s ease,width .32s cubic-bezier(.32,.72,0,1)} .tq-burger span:nth-child(1){top:15px} .tq-burger span:nth-child(2){top:21px;width:14px} .tq-burger span:nth-child(3){top:27px} html.tq-menu-open .tq-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} html.tq-menu-open .tq-burger span:nth-child(2){opacity:0;width:0} html.tq-menu-open .tq-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---- scrim ---- */ .tq-scrim{position:fixed;inset:0;z-index:98;background:rgba(15,23,42,.42);border:0;padding:0;margin:0;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;display:none} html.tq-menu-open .tq-scrim{opacity:1;visibility:visible;transition:opacity .3s ease} /* ---- drawer ---- */ .tq-drawer{position:fixed;top:0;right:0;bottom:0;z-index:99;width:min(400px,100%);height:100dvh;background:var(--surface,#fff);display:none;flex-direction:column;box-shadow:-24px 0 60px -30px rgba(15,23,42,.45);transform:translateX(104%);visibility:hidden;transition:transform .38s cubic-bezier(.32,.72,0,1),visibility 0s linear .38s;will-change:transform} html.tq-menu-open .tq-drawer{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.32,.72,0,1)} .tq-drawer-top{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 14px 0 22px;border-bottom:1px solid var(--border,#E2E8F0);flex-shrink:0} .tq-drawer-top img{height:28px;width:auto;display:block} .tq-drawer-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--surface-muted,#F1F5F9);color:var(--ink,#0F172A);cursor:pointer;transition:background .18s ease} .tq-drawer-x:hover{background:var(--brand-light,#E6F5F1);color:var(--brand-hover,#006A55)} .tq-drawer-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 20px 24px} .tq-dn{display:flex;flex-direction:column} /* Items slide in one after another once the drawer lands. */ .tq-dn>*{opacity:0;transform:translateX(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)} html.tq-menu-open .tq-dn>*{opacity:1;transform:none;transition-delay:calc(90ms + var(--i,0) * 40ms)} .tq-dn-link,.tq-dn-acc{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:0 4px;font-family:inherit;font-size:17.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#0F172A);text-decoration:none;text-align:left;background:none;border:0;border-bottom:1px solid var(--border,#E2E8F0);cursor:pointer;transition:color .18s ease} .tq-dn-link:hover,.tq-dn-acc:hover{color:var(--brand-hover,#006A55)} /* The page you are on, marked with aria-current by both halves of the site. */ .tq-dn-link[aria-current="page"]{color:var(--brand-hover,#006A55)} .tq-dn-link[aria-current="page"] svg{color:var(--brand,#007E65)} .tq-dn-link svg,.tq-dn-acc svg{flex-shrink:0;color:var(--text-muted,#94A3B8);transition:transform .3s cubic-bezier(.32,.72,0,1),color .18s ease} .tq-dn-link:hover svg{transform:translateX(3px);color:var(--brand,#007E65)} .tq-dn-acc[aria-expanded="true"]{color:var(--brand-hover,#006A55)} .tq-dn-acc[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--brand,#007E65)} .tq-dn-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.32,.72,0,1)} .tq-dn-panel.open{grid-template-rows:1fr} .tq-dn-panel>div{min-height:0;overflow:hidden} .tq-dn-panel-in{padding:6px 0 14px;border-bottom:1px solid var(--border,#E2E8F0)} .tq-dn-group{padding-top:12px} .tq-dn-group-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#94A3B8);padding:6px 4px 4px} .tq-dn-sub{display:flex;align-items:center;gap:13px;min-height:52px;padding:6px 4px;border-radius:12px;text-decoration:none;color:inherit;transition:background .18s ease} .tq-dn-sub:hover,.tq-dn-sub:active{background:var(--surface-muted,#F1F5F9)} .tq-dn-ic{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--brand-light,#E6F5F1);color:var(--brand,#007E65)} .tq-dn-ic svg{width:17px;height:17px} .tq-dn-sub-t{display:flex;flex-direction:column;min-width:0} .tq-dn-sub-t b{font-size:15px;font-weight:600;color:var(--ink,#0F172A);line-height:1.3} .tq-dn-sub-t small{font-size:12.5px;color:var(--text-muted,#94A3B8);line-height:1.4;margin-top:1px} .tq-dn-all{display:inline-flex;align-items:center;gap:7px;margin:10px 4px 0;font-size:14px;font-weight:700;color:var(--brand,#007E65);text-decoration:none} .tq-dn-all svg{transition:transform .2s ease} .tq-dn-all:hover svg{transform:translateX(3px)} .tq-drawer-foot{flex-shrink:0;display:grid;gap:10px;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border,#E2E8F0);background:var(--surface,#fff)} .tq-drawer-foot a{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:13px;font-size:16px;font-weight:700;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease} .tq-drawer-cta{background:var(--brand,#007E65);color:#fff} .tq-drawer-cta:hover{background:var(--brand-hover,#006A55);color:#fff} .tq-drawer-login{background:var(--surface,#fff);color:var(--ink,#0F172A);border:1.5px solid var(--border-strong,#CBD5E1)} .tq-drawer-login:hover{border-color:var(--brand-muted,#5FB8A5);color:var(--brand-hover,#006A55)} /* Keeps the page underneath from scrolling on iOS while the drawer is open. The scroll position is parked in `top` by the script and restored on close. */ html.tq-menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden} /* ---- breakpoint: phones and small tablets ---- */ @media(max-width:900px){ .tq-burger{display:block} .tq-drawer{display:flex} .tq-scrim{display:block} /* Static pages: the desktop link row and CTA pair. */ header nav.tq-wrap>div{display:none!important} header nav.tq-wrap{padding-left:20px!important;padding-right:20px!important} /* Next.js pages */ .sx-navlinks,.sx-navcta{display:none!important} .sx-nav{padding:0 20px!important} /* A bare `1fr` column is minmax(auto,1fr), so a wide mock-up inside it pushes the whole hero past the viewport on 360px phones. */ .tq-hero-grid{grid-template-columns:minmax(0,1fr)!important} .tq-hero-visual,.tq-hero-grid>*{min-width:0} } /* Stacked CTA rows: the primary button sits inside a gradient-border wrapper. The wrapper stretches full width, so the button inside must too, or it sits as a darker block at the left of a wider green bar. */ @media(max-width:560px){ .tq-cta-row>span{display:flex!important} .tq-cta-row>span>a,.tq-cta-row>a{width:100%!important;flex:1 1 auto} } /* ---- mobile performance ---- Anything that makes the compositor redraw the whole viewport on scroll is turned off below 900px and on touch devices: the fixed SVG-noise overlay, frosted-glass blurs, and the industry chips that animate `margin-top` (which forces layout every frame). None of these are visible enough on a phone to be worth the frame budget. */ @media(max-width:900px),(pointer:coarse){ .tq-grain{display:none!important} [style*="backdrop-filter"],.sx-header,.sx-mobile{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} header[style*="backdrop-filter"],.sx-header{background:rgba(255,255,255,.97)!important} [style*="tqAurora"],[style*="tqCtaGlow"]{animation:none!important} .tq-orbit-chip{animation:none!important} [style*="blur(5"],[style*="blur(4"]{filter:blur(28px)!important} } /* ---- industries: the comparison table stacks into cards on phones ---- The table is a 1.7fr/1.1fr/1.1fr grid inside `overflow-x:auto` with a 600px floor, so on a phone it became a sideways scroller with the row label and the second column both cut off. Below 700px, the same width the home pricing grid collapses at, each row becomes its own card instead: the label is the card heading and the two options stack under it. Each cell carries its column name in .cmp-colname, which is what the (now hidden) header row was supplying. */ .cmp-colname{display:none} @media(max-width:700px){ .cmp-scroll{overflow-x:visible!important} .cmp-table{min-width:0!important;gap:14px!important} .cmp-head{display:none!important} .cmp-row{display:block!important;background:var(--surface,#fff);border:1px solid var(--border,#E2E8F0);border-radius:16px;padding:16px 16px 14px;box-shadow:0 1px 2px rgba(15,23,42,.05)} .cmp-row>div:first-child{padding-left:0!important;margin-bottom:12px;font-size:15px!important;line-height:1.35} .cmp-cell{flex-wrap:wrap;padding:12px 14px!important} .cmp-cell+.cmp-cell{margin-top:8px} .cmp-colname{display:block;flex:0 0 100%;order:-1;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .cmp-row>.cmp-cell:nth-child(2) .cmp-colname{color:var(--brand-hover,#006A55)} .cmp-row>.cmp-cell:nth-child(3) .cmp-colname{color:var(--text-muted,#94A3B8)} }