/* ========================================================================== RS Society — motion -------------------------------------------------------------------------- Everything here hangs off `rs-motion` on , which a few lines of inline script in the page head add before the first paint — and only when the browser can do the work and the visitor has not asked for less motion. A page that never gets that class is simply the page: nothing hidden, nothing to wait for, no dependence on a script that might not arrive. Hiding is done by these selectors rather than by an attribute the script adds later, because an attribute added after paint would show the content and then snatch it away again. >>> The selector list below is mirrored in motion.js. Change one, change the >>> other, or things will hide and never come back. One easing curve and one distance throughout: a site where every section arrives the same way reads as designed, one where each arrives differently reads as a demonstration of a plugin. ========================================================================== */ /* Slower than it was. At .7s the rise was over before the eye had found it — the section simply appeared to be there already, which is the same as having no motion at all and costs the same. A little over a second reads as deliberate: long enough to be seen arriving, short enough that nobody waiting to read is kept waiting. The travel grew with it, because a longer movement over the same distance looks slow rather than calm. */ :root{ --rs-m-dur:1.15s; --rs-m-ease:cubic-bezier(.22,.61,.36,1); --rs-m-rise:28px; --rs-m-step:130ms; } /* ------------------------------------------------------------- the reveal */ .rs-motion .rs-sec-head, .rs-motion .rs-why__media, .rs-motion .rs-why__copy, .rs-motion .rs-contact__intro, .rs-motion .rs-contact__form, .rs-motion .rs-contact__card, .rs-motion .rs-cta__inner, .rs-motion .rs-reveal, .rs-motion .rs-cards > *, .rs-motion .rs-reviews__list > *, .rs-motion .rs-mission__grid > *, .rs-motion .rs-steps-list > *, .rs-motion .rs-strip__list > *, .rs-motion .rs-points > *{ opacity:0; transform:translateY(var(--rs-m-rise)); transition: opacity var(--rs-m-dur) var(--rs-m-ease), transform var(--rs-m-dur) var(--rs-m-ease); /* --rs-i is written by the script onto the children of a row, so the second card starts a fraction after the first. Absent, it is zero. */ transition-delay:calc(var(--rs-i, 0) * var(--rs-m-step)); will-change:opacity, transform; } /* The two halves of a split section lean in towards each other rather than both rising, which makes the pairing legible as it arrives. */ .rs-motion .rs-why__media, .rs-motion .rs-contact__form{ transform:translateX(-26px) } .rs-motion .rs-why__copy, .rs-motion .rs-contact__card{ transform:translateX(26px) } /* Below the width where those pairs stop sitting side by side, there is nothing to lean towards: the two halves are stacked. Worse, leaning the right-hand half 26px to the right pushed it past the edge of a 375px screen and gave the whole page a sideways scroll — before the reveal fired, which is exactly when a visitor first sees it. Stacked, they simply rise. */ @media (max-width:979px){ .rs-motion .rs-why__media, .rs-motion .rs-why__copy, .rs-motion .rs-contact__form, .rs-motion .rs-contact__card{ transform:translateY(var(--rs-m-rise)) } } .rs-motion .is-in{ opacity:1; transform:none; /* Arrived: it is ordinary content again, and holding a compositor layer for it costs memory on the phones most of these applicants are using. */ will-change:auto; } /* --------------------------------------------------------------- the hero Above the fold, so it plays on load rather than waiting to be scrolled to. The order is the order somebody reads it in. */ .rs-motion .rs-hero__eyebrow, .rs-motion .rs-hero__title, .rs-motion .rs-hero__text, .rs-motion .rs-hero__actions, .rs-motion .rs-hero__foot{ opacity:0; transform:translateY(18px); transition:opacity 1.25s var(--rs-m-ease), transform 1.25s var(--rs-m-ease); } .rs-motion .rs-hero.is-ready .rs-hero__eyebrow{ transition-delay:.14s } .rs-motion .rs-hero.is-ready .rs-hero__title { transition-delay:.30s } .rs-motion .rs-hero.is-ready .rs-hero__text { transition-delay:.48s } .rs-motion .rs-hero.is-ready .rs-hero__actions{ transition-delay:.66s } .rs-motion .rs-hero.is-ready .rs-hero__foot { transition-delay:.84s } .rs-motion .rs-hero.is-ready .rs-hero__eyebrow, .rs-motion .rs-hero.is-ready .rs-hero__title, .rs-motion .rs-hero.is-ready .rs-hero__text, .rs-motion .rs-hero.is-ready .rs-hero__actions, .rs-motion .rs-hero.is-ready .rs-hero__foot{ opacity:1; transform:none; } /* The photograph settles rather than appears: a slow, small scale-down finished before anybody has read the headline. Kept under 3% so it can never pull an edge of the image into view. */ .rs-motion .rs-hero__bg{ transform:scale(1.03); transition:transform 1.6s cubic-bezier(.16,.8,.3,1); } .rs-motion .rs-hero.is-ready .rs-hero__bg{ transform:scale(1) } /* ----------------------------------------------------------------- hovers Not conditional on the script. A hover answers something the visitor just did, and it should work whether or not the reveals do. */ .rs-card-item, .rs-review, .rs-mission__card{ transition: transform .28s var(--rs-m-ease), box-shadow .28s var(--rs-m-ease); } .rs-card-item:hover, .rs-review:hover, .rs-mission__card:hover{ transform:translateY(-5px) } /* The framed photograph in the "why us" band leans in. The frame clips, so the picture grows inside it rather than over the layout. */ .rs-why__frame{ overflow:hidden } .rs-why__frame img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--rs-m-ease); } .rs-why__media:hover .rs-why__frame img{ transform:scale(1.045) } /* Navigation links grow an underline from the middle out rather than switching one on. */ .rs-nav a{ position:relative } .rs-nav a::after{ content:''; position:absolute; left:50%; right:50%; bottom:-4px; height:2px; background:currentColor; border-radius:2px; transition:left .24s var(--rs-m-ease), right .24s var(--rs-m-ease); } .rs-nav a:hover::after, .rs-nav a:focus-visible::after, .rs-nav .current-menu-item > a::after{ left:0; right:0 } /* The sticky header changes state rather than snapping into one. */ .rs-header{ transition: background-color .3s var(--rs-m-ease), box-shadow .3s var(--rs-m-ease); } /* -------------------------------------------------------- asking for less Belt and braces: the script already declines to add `rs-motion` when reduced motion is on, but a visitor can turn it on with the page open. */ @media (prefers-reduced-motion:reduce){ .rs-motion .rs-sec-head, .rs-motion .rs-why__media, .rs-motion .rs-why__copy, .rs-motion .rs-contact__intro, .rs-motion .rs-contact__form, .rs-motion .rs-contact__card, .rs-motion .rs-cta__inner, .rs-motion .rs-reveal, .rs-motion .rs-cards > *, .rs-motion .rs-reviews__list > *, .rs-motion .rs-mission__grid > *, .rs-motion .rs-steps-list > *, .rs-motion .rs-strip__list > *, .rs-motion .rs-points > *, .rs-motion .rs-hero__eyebrow, .rs-motion .rs-hero__title, .rs-motion .rs-hero__text, .rs-motion .rs-hero__actions, .rs-motion .rs-hero__foot{ opacity:1 !important; transform:none !important; transition:none !important; } .rs-motion .rs-hero__bg{ transform:none !important; transition:none !important } .rs-card-item, .rs-review, .rs-mission__card, .rs-why__frame img, .rs-nav a::after, .rs-header{ transition:none !important } .rs-card-item:hover, .rs-review:hover, .rs-mission__card:hover, .rs-why__media:hover .rs-why__frame img{ transform:none !important } } /* Inside the Elementor editor nothing may be invisible, or the person editing the page cannot find what they are editing. */ body.elementor-editor-active .rs-sec-head, body.elementor-editor-active .rs-why__media, body.elementor-editor-active .rs-why__copy, body.elementor-editor-active .rs-contact__intro, body.elementor-editor-active .rs-contact__form, body.elementor-editor-active .rs-contact__card, body.elementor-editor-active .rs-cta__inner, body.elementor-editor-active .rs-reveal, body.elementor-editor-active .rs-cards > *, body.elementor-editor-active .rs-reviews__list > *, body.elementor-editor-active .rs-mission__grid > *, body.elementor-editor-active .rs-steps-list > *, body.elementor-editor-active .rs-strip__list > *, body.elementor-editor-active .rs-points > *, body.elementor-editor-active .rs-hero__eyebrow, body.elementor-editor-active .rs-hero__title, body.elementor-editor-active .rs-hero__text, body.elementor-editor-active .rs-hero__actions, body.elementor-editor-active .rs-hero__foot{ opacity:1 !important; transform:none !important; } /* Printing an animated page must not print a blank one. */ @media print{ .rs-motion .rs-sec-head, .rs-motion .rs-cards > *, .rs-motion .rs-reviews__list > *, .rs-motion .rs-mission__grid > *, .rs-motion .rs-steps-list > *, .rs-motion .rs-strip__list > *, .rs-motion .rs-points > *, .rs-motion .rs-why__media, .rs-motion .rs-why__copy, .rs-motion .rs-contact__intro, .rs-motion .rs-contact__form, .rs-motion .rs-contact__card, .rs-motion .rs-cta__inner, .rs-motion .rs-reveal, .rs-motion .rs-hero__eyebrow, .rs-motion .rs-hero__title, .rs-motion .rs-hero__text, .rs-motion .rs-hero__actions, .rs-motion .rs-hero__foot{ opacity:1 !important; transform:none !important; } }