/* =========================================================================== GEEKS360 — MOTION --------------------------------------------------------------------------- Motion is OPT-IN. Nothing below hides anything until motion.js adds `.g-motion` to , and it only does that when the visitor has not requested reduced motion. If JavaScript fails, the file never loads, or reduced motion is on, the page renders complete and static. Every transition uses transform and opacity only — both composited, so none of this triggers layout and none of it costs frames on a mid-range phone. Durations are deliberately short. Reveals are there to direct attention as content arrives, not to make the visitor wait for it. =========================================================================== */ :root { --reveal-dur: 620ms; --reveal-delay: 0ms; --hover-dur: 240ms; } /* --------------------------------------------------------------------------- SCROLL REVEALS --------------------------------------------------------------------------- */ .g-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--reveal-dur) var(--g-ease) var(--reveal-delay), transform var(--reveal-dur) var(--g-ease) var(--reveal-delay); } .g-motion [data-reveal="zoom"] { transform: scale(0.97); } .g-motion [data-reveal="fade"] { transform: none; } .g-motion [data-reveal].is-revealed { opacity: 1; transform: none; } /* --------------------------------------------------------------------------- HERO HEADLINE — lines rise out of their masks --------------------------------------------------------------------------- */ .g-line-mask { display: block; overflow: hidden; } .g-line-inner { display: block; } .g-motion [data-reveal-lines] .g-line-inner { transform: translateY(102%); transition: transform 760ms var(--g-ease) var(--reveal-delay); } .g-motion [data-reveal-lines].is-revealed .g-line-inner { transform: none; } /* --------------------------------------------------------------------------- MICRO-INTERACTIONS These are hover states, so they are outside .g-motion — but every one is disabled under prefers-reduced-motion at the foot of this file. --------------------------------------------------------------------------- */ /* Icons drawn in the icon set respond to their parent card being hovered. */ .g-icon { transition: transform var(--hover-dur) var(--g-ease); } .g-tile:hover .g-tile__icon .g-icon, .g-card:hover .g-card__icon .g-icon { transform: scale(1.08); } .g-industry:hover .g-industry__icon .g-icon { transform: translateX(2px); } .g-trustband__item .g-icon { transition: transform var(--hover-dur) var(--g-ease); } .g-trustband__item:hover .g-icon { transform: translateY(-2px); } /* Header CTA gets a slightly firmer lift than body buttons — it is the primary action on every page and should feel the most responsive thing in the header. */ .g-header__cta:hover { transform: translateY(-2px); } /* Nav underline is defined in sections.css; this only softens the return. */ .g-nav a::after { transition: transform var(--hover-dur) var(--g-ease); } /* --------------------------------------------------------------------------- FAQ ACCORDION Height animates via grid-template-rows, so no JavaScript measuring and no jump if the answer reflows. visibility keeps a closed panel out of the accessibility tree and the tab order without blocking the transition. --------------------------------------------------------------------------- */ .g-faq__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; /* visibility is stepped rather than interpolated — browsers hold it at the start value for the full duration, which would leave the answer invisible while the panel expanded. Instant on open, delayed on close. */ transition: grid-template-rows 320ms var(--g-ease), visibility 0s linear 320ms; } .g-faq__panel > * { overflow: hidden; } .g-faq__item.is-open .g-faq__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 320ms var(--g-ease), visibility 0s; } /* --------------------------------------------------------------------------- MOBILE MENU --------------------------------------------------------------------------- */ body.g-nav-open { overflow: hidden; } /* --------------------------------------------------------------------------- REDUCED MOTION motion.js already withholds `.g-motion`, so reveals never engage. These rules additionally neutralise the hover micro-interactions and the accordion transition, which live outside that class. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .g-motion [data-reveal], .g-motion [data-reveal-lines] .g-line-inner { opacity: 1 !important; transform: none !important; } /* The accordion still needs to open and close — just instantly. */ .g-faq__item.is-open .g-faq__panel { grid-template-rows: 1fr; visibility: visible; } }