/* * Isatou Green Oil — motion layer. * * Everything here is scoped to html.igo-motion, a class added in only * when animations are enabled (Customize → Motion) and the visitor has not * asked for reduced motion. The editor never gets the class, so blocks are * always visible while editing. If assets/js/motion.js fails to load, the head * script removes the class after 3s so no content stays hidden. */ :root { --igo-ease: cubic-bezier(.16, 1, .3, 1); /* expo-out: fast start, long settle */ --igo-ease-soft: cubic-bezier(.33, 1, .68, 1); } @keyframes igo-rise { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: none; } } @keyframes igo-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes igo-unveil { from { clip-path: inset(14% 0 0 0 round var(--radius-lg)); opacity: .4; } to { clip-path: inset(0 0 0 0 round var(--radius-lg)); opacity: 1; } } @keyframes igo-settle { from { transform: scale(1.14); } to { transform: scale(1); } } @keyframes igo-hero-light { from { box-shadow: inset 0 0 0 100vmax #0a2e4a; } to { box-shadow: inset 0 0 0 100vmax rgba(10, 46, 74, 0); } } @keyframes igo-title { from { opacity: 0; transform: translate3d(0, 40px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes igo-drift { from { transform: translate3d(-18%, -12%, 0) scale(1); } to { transform: translate3d(22%, 16%, 0) scale(1.15); } } @keyframes igo-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes igo-pop { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { /* ------------------------------------------------------------------ * Hero: photo lights up from navy, content rises in sequence. * (fill-mode "backwards" so motion.js can drive the scroll fade after.) * ---------------------------------------------------------------- */ .igo-motion .igo-hero-bg { animation: igo-hero-light 2.4s var(--igo-ease-soft) .1s backwards; } .igo-motion .igo-hero-inner > * { animation: igo-rise 1.2s var(--igo-ease) backwards; } .igo-motion .igo-hero-inner > :nth-child(1) { animation-delay: .25s; } .igo-motion .igo-hero-inner > :nth-child(2) { animation-name: igo-title; animation-duration: 1.4s; animation-delay: .38s; } .igo-motion .igo-hero-inner > :nth-child(3) { animation-delay: .6s; } .igo-motion .igo-hero-inner > :nth-child(4) { animation-delay: .75s; } .igo-motion .igo-hero-inner > :nth-child(5) { animation-delay: .9s; } /* ------------------------------------------------------------------ * Scroll reveals. Hidden until motion.js marks them .is-in; the delay * (--igo-d) staggers items that enter together. * ---------------------------------------------------------------- */ .igo-motion :is( .igo-section > .igo-eyebrow, .igo-section > .wp-block-heading, .igo-section > .igo-lead, .igo-section > .igo-section-head, .igo-section > .igo-section-head__text, .igo-split > .wp-block-group, .igo-contact__details > *, .igo-divisions > *, .igo-grid > *, .igo-tilegrid > *, .igo-vehicle-grid > *, .igo-milestones > *, .igo-cta-links > *, .igo-section .igo-pills > *, .igo-footer__cols > *, .igo-filterbar, .igo-cars-meta, .igo-form, .igo-cta, .igo-banner ):not(.is-in) { opacity: 0; } .igo-motion :is( .igo-section > .igo-eyebrow, .igo-section > .wp-block-heading, .igo-section > .igo-lead, .igo-section > .igo-section-head, .igo-section > .igo-section-head__text, .igo-split > .wp-block-group, .igo-contact__details > *, .igo-divisions > *, .igo-grid > *, .igo-tilegrid > *, .igo-vehicle-grid > *, .igo-milestones > *, .igo-cta-links > *, .igo-section .igo-pills > *, .igo-footer__cols > *, .igo-filterbar, .igo-cars-meta, .igo-form ).is-in { animation: igo-rise 1.1s var(--igo-ease) var(--igo-d, 0ms) backwards; } /* Banners grow in slightly rather than rise. */ .igo-motion :is(.igo-cta, .igo-banner).is-in { animation: igo-pop 1.2s var(--igo-ease) var(--igo-d, 0ms) backwards; } /* Images: a clip-path unveil while the photo settles from a gentle zoom. */ .igo-motion .igo-split > .wp-block-image:not(.is-in) { opacity: 0; } .igo-motion .igo-split > .wp-block-image.is-in { animation: igo-unveil 1.5s var(--igo-ease) var(--igo-d, 0ms) backwards; } .igo-motion .igo-split > .wp-block-image { overflow: hidden; border-radius: var(--radius-lg); } .igo-motion .igo-split > .wp-block-image.is-in img { animation: igo-settle 2.2s var(--igo-ease) var(--igo-d, 0ms) backwards; } /* Timeline connector draws down once its milestone is in. */ .igo-motion .igo-milestone::after { transform-origin: top; transform: scaleY(0); transition: transform 1.2s var(--igo-ease) .35s; } .igo-motion .igo-milestone.is-in::after { transform: scaleY(1); } /* Headings split into words by motion.js, each rising through a mask. */ .igo-motion .igo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .igo-motion .igo-w > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.1s var(--igo-ease); transition-delay: calc(var(--igo-d, 0ms) + var(--wi, 0) * 55ms); } .igo-motion .igo-words.is-in .igo-w > span { transform: none; } .igo-motion .igo-hero-inner .igo-words .igo-w > span { transition-duration: 1.3s; } /* ------------------------------------------------------------------ * Hover & interaction * ---------------------------------------------------------------- */ .igo-motion .wp-block-group.igo-card { transition: box-shadow .6s var(--igo-ease), transform .6s var(--igo-ease); } .igo-motion .wp-block-group.igo-card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 0 0 1px #d3d9d5, 0 24px 48px -12px rgba(20, 40, 28, .22); } .igo-motion .wp-block-group.igo-card--flat:hover { transform: translate3d(0, -4px, 0); } .igo-motion .igo-card .igo-card__media img { transition: transform 1.4s var(--igo-ease); } .igo-motion .igo-card:hover .igo-card__media img { transform: scale(1.06); } /* Cursor-following spotlight on cards and tiles (pointer devices only). */ @media (hover: hover) { .igo-motion :is(.wp-block-group.igo-card, .wp-block-group.igo-tile, .wp-block-group.igo-contact-card)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s var(--igo-ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(18, 95, 41, .08), transparent 45%); } .igo-motion :is(.igo-card--brand, .igo-contact-card--brand)::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%); } .igo-motion :is(.wp-block-group.igo-card, .wp-block-group.igo-tile, .wp-block-group.igo-contact-card):hover::after { opacity: 1; } } .igo-motion .wp-block-group.igo-tile { transition: background .5s var(--igo-ease); } .igo-motion .wp-block-group.igo-tile::before { transition: transform .6s var(--igo-ease); } .igo-motion .wp-block-group.igo-tile:hover::before { transform: translate3d(0, -4px, 0) scale(1.08); } .igo-motion .wp-block-group.igo-step, .igo-motion .wp-block-group.igo-feature, .igo-motion .wp-block-group.igo-contact-card { transition: transform .6s var(--igo-ease), box-shadow .6s var(--igo-ease); } .igo-motion .wp-block-group.igo-step:hover, .igo-motion .wp-block-group.igo-contact-card:hover { transform: translate3d(0, -4px, 0); } .igo-motion .wp-block-group.igo-step::before { transition: transform .6s var(--igo-ease); } .igo-motion .wp-block-group.igo-step:hover::before { transform: rotate(-8deg) scale(1.06); } /* Buttons: lift + a light sheen sweeping across. */ .igo-motion .wp-block-button > .wp-block-button__link, .igo-motion :is(.igo-wa-btn, .igo-form__submit, .igo-car-modal__wa) { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; transition: background-position 1s var(--igo-ease), transform .45s var(--igo-ease), box-shadow .45s var(--igo-ease), background-color .3s, color .3s; } .igo-motion .wp-block-button > .wp-block-button__link:hover, .igo-motion :is(.igo-wa-btn, .igo-form__submit, .igo-car-modal__wa):hover { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-position: -30% 0; transform: translate3d(0, -2px, 0); } .igo-motion .wp-block-button:not(.is-style-outline, .igo-btn-ghost-light, .igo-pill, .igo-cta-link) > .wp-block-button__link:hover, .igo-motion :is(.igo-wa-btn, .igo-form__submit):hover { box-shadow: 0 12px 26px -10px rgba(18, 95, 41, .6); } .igo-motion .igo-cta-link > .wp-block-button__link::after { transition: transform .5s var(--igo-ease); } .igo-motion .igo-cta-link > .wp-block-button__link:hover::after { transform: translate3d(3px, -3px, 0); } .igo-motion .igo-ico-end > .wp-block-button__link::after { transition: transform .5s var(--igo-ease); } .igo-motion .igo-ico-end > .wp-block-button__link:hover::after { transform: translate3d(4px, 0, 0); } /* Text links: underline draws in from the left. */ .igo-motion :is(.igo-arrow-link a, .igo-footer__links a, .igo-footer p a, .igo-topbar a, .igo-plain-links a, .igo-info a, .igo-breadcrumb a) { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--igo-ease), color .3s; } .igo-motion :is(.igo-arrow-link a, .igo-footer__links a, .igo-footer p a, .igo-topbar a, .igo-plain-links a, .igo-info a, .igo-breadcrumb a):hover { background-size: 100% 1px; } /* Living light inside the green banners. */ .igo-motion .wp-block-group.igo-cta { position: relative; overflow: hidden; isolation: isolate; } .igo-motion .wp-block-group.igo-cta::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(169, 220, 184, .22), transparent 70%); animation: igo-drift 16s ease-in-out infinite alternate; } .igo-motion .wp-block-group.igo-feature--brand { position: relative; overflow: hidden; isolation: isolate; } .igo-motion .wp-block-group.igo-feature--brand::after { content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(169, 220, 184, .18), transparent 70%); animation: igo-drift 18s ease-in-out infinite alternate-reverse; } /* Floating WhatsApp: arrives after the page settles, then breathes. */ .igo-motion .igo-float-wa { animation: igo-pop .8s var(--igo-ease) 1.6s backwards; transition: transform .4s var(--igo-ease); } .igo-motion .igo-float-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: igo-pulse 3.2s ease-out 2.6s infinite; pointer-events: none; } .igo-motion .igo-float-wa:hover { transform: scale(1.08); } /* ------------------------------------------------------------------ * Header: the top bar scrolls away while the main bar stays pinned * (sticky offset set by motion.js), and gains depth once scrolled. * ---------------------------------------------------------------- */ .igo-motion .wp-site-blocks > header.wp-block-template-part:has(.igo-sticky) { top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--igo-topbar-h, 0px)); } @media (max-width: 600px) { /* The admin bar isn't fixed on small screens. */ .igo-motion .wp-site-blocks > header.wp-block-template-part:has(.igo-sticky) { top: calc(-1 * var(--igo-topbar-h, 0px)); } } .igo-motion .igo-header { transition: box-shadow .5s var(--igo-ease); } .igo-motion .igo-site-header.is-scrolled .igo-header { box-shadow: 0 12px 32px -18px rgba(20, 40, 28, .35); } .igo-motion .igo-header::before { transition: background .5s var(--igo-ease); } .igo-motion .igo-site-header.is-scrolled .igo-header::before { background: rgba(255, 255, 255, .86); } .igo-motion .igo-nav__list a { transition: background .35s var(--igo-ease), color .35s var(--igo-ease); } .igo-motion .igo-brand__mark { transition: transform .6s var(--igo-ease); } .igo-motion .igo-brand:hover .igo-brand__mark { transform: rotate(-6deg) scale(1.05); } /* Mobile menu: panel fades, items stagger in. */ .igo-motion .igo-nav.is-open { animation: igo-fade .35s ease both; } .igo-motion .igo-nav.is-open .igo-nav__list > li { animation: igo-rise .7s var(--igo-ease) backwards; } .igo-motion .igo-nav.is-open .igo-nav__list > li:nth-child(2) { animation-delay: .05s; } .igo-motion .igo-nav.is-open .igo-nav__list > li:nth-child(3) { animation-delay: .1s; } .igo-motion .igo-nav.is-open .igo-nav__list > li:nth-child(4) { animation-delay: .15s; } .igo-motion .igo-nav.is-open .igo-nav__list > li:nth-child(n+5) { animation-delay: .2s; } /* Dealership details view. */ .igo-motion .igo-car-modal:not([hidden]) { animation: igo-fade .35s ease both; } .igo-motion .igo-car-modal:not([hidden]) .igo-car-modal__panel { animation: igo-pop .6s var(--igo-ease) both; } /* ------------------------------------------------------------------ * Page transitions (cross-document View Transitions, where supported): * pages cross-fade while the header stays put. * ---------------------------------------------------------------- */ @view-transition { navigation: auto; } .igo-motion .igo-site-header { view-transition-name: igo-header; } ::view-transition-old(root) { animation: .35s var(--igo-ease-soft) both igo-fade reverse; } ::view-transition-new(root) { animation: .55s var(--igo-ease-soft) .05s both igo-fade; } } /* Never print half-revealed content. */ @media print { .igo-motion * { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; } }