/* 2fux.media — shared styles (ported from design_reference ) */ html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: #141210; color: #F2ECDF; font-family: 'Bricolage Grotesque', sans-serif; } /* Clip horizontal overflow at the ROOT so tilted marquees (scale/rotate) and the off-canvas gradient blobs can't create a sideways scroll / zoomed-out gutter on iOS Safari (which doesn't honor overflow-x:hidden on alone for transformed or absolutely-positioned children). `clip` doesn't create a scroll container, so the sticky nav keeps working; `hidden` is the fallback for older browsers. */ html, body { overflow-x: hidden; overflow-x: clip; } * { box-sizing: border-box; } a { color: #F2ECDF; text-decoration: none; } a:hover { color: #FF5A63; } ::selection { background: #D7263D; color: #F2ECDF; } @keyframes fux-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fux-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fux-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes fux-drift { 0%, 100% { translate: 0 0; scale: 1; } 33% { translate: 3vw -3vh; scale: 1.08; } 66% { translate: -2vw 2vh; scale: .94; } } @media (prefers-reduced-motion: reduce) { [data-marquee-track] { animation: none !important; } [data-blob], [data-finger] { animation: none !important; } [data-spin] { animation: none !important; } [data-float] { animation: none !important; } } /* never let a stray transformed/absolute element create a horizontal scrollbar */ img, video, iframe, svg { max-width: 100%; } /* sticky-nav offset so in-page anchors don't hide under the bar */ #work, #insights, #testimonials, #book { scroll-margin-top: 76px; } /* long-text CTA buttons must wrap, never overflow their column on narrow screens */ .cta { max-width: 100%; } /* ========================================================================= RESPONSIVE LAYER The page markup is inline-styled, so mobile overrides use !important to win over the element `style` attribute. Hooks: .site-nav .nav-toggle .nav-links .hero-kicker .corner-sticker .video-wall .team-grid ========================================================================= */ /* --- hamburger button (hidden on desktop) --- */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin: -6px -8px -6px 0; background: none; border: 0; cursor: pointer; z-index: 2; } .nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #F2ECDF; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Tablet / phone (≤ 760px) ---------- */ @media (max-width: 760px) { .nav-toggle { display: flex !important; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding: 8px clamp(16px, 4vw, 48px) 16px !important; background: #141210; border-top: 1px solid rgba(242,236,223,.12); box-shadow: 0 26px 44px rgba(0,0,0,.55); display: none !important; } .nav-links.open { display: flex !important; } .nav-links > a { padding: 13px 4px !important; font-size: 17px !important; opacity: 1 !important; border-bottom: 1px solid rgba(242,236,223,.08); } /* the "Book a Call" pill → full-width button inside the menu */ .nav-links > a[href$="#book"] { transform: none !important; text-align: center; margin-top: 10px; padding: 14px 18px !important; border-bottom: 0; } /* kicker no longer needs to dodge the corner sticker */ .hero-kicker { padding-right: 0 !important; } /* decorative corner stickers collide with the big headline on narrow screens */ .corner-sticker { display: none !important; } } /* X-layout video wall (~746px min) → single vertical stack. Wider breakpoint than the nav so iPad-portrait (768px) doesn't overflow. */ @media (max-width: 860px) { .video-wall { grid-template-columns: 1fr !important; max-width: 400px !important; } } /* keep flywheel node pills compact once the ring shrinks (tablet + phone) */ @media (max-width: 860px) { [data-fw-node] > div { font-size: 10px !important; padding: 6px 10px !important; } } /* ---------- Small phones (≤ 480px) ---------- */ @media (max-width: 480px) { /* minmax(320px) tracks overflow on <340px viewports → force one column */ .team-grid { grid-template-columns: 1fr !important; } }