/* * wt-effects.css — the EFFECTS axis (design uplift 2026-07): depth (box * effects), hover (mouse-over behaviour) and motion (entrance animation). * * The third dial next to family (layout) and skin (paint). The engine puts * three classes on (class.websitetemplates.php via skins.php's * wtFxClasses()): wt-depth-{flat|soft|floating|glass|hard}, * wt-hover-{none|lift|glow|swipe|reveal}, wt-motion-{none|rise|luxe|snappy}. * 'auto' never reaches CSS — it resolves per skin in wtResolveFx(). * * Depth packs work by RE-DECLARING the shadow/border custom properties on * (element beats :root for descendants), so every existing component * that already reads --wt-card-shadow / --wt-card-border inherits the pack * with no markup changes. Shadows compose from --wt-shadow-rgb (skin-tinted * triplet, skins.php) so elevation reads correctly on light AND dark skins; * glows compose from --wt-primary-rgb. * * CARD ROOTS the packs must reach: .wt-card (generic + service/testimonial), * .wt-fleet-card / .wt-blog-card (article roots without .wt-card), * .wt-hero__card (grid-family hero action card). * * No build step — plain CSS, PHP 7.3-era stack irrelevant here but browser * floor is the same as templates-web.css (custom props required). */ /* ── DEPTH PACKS ──────────────────────────────────────────────────────── */ .wt-depth-flat { --wt-card-shadow: none; --wt-elev-hover: 0 4px 14px rgba(var(--wt-shadow-rgb), .10); } .wt-depth-soft { --wt-card-shadow: 0 1px 2px rgba(var(--wt-shadow-rgb), .05), 0 8px 24px rgba(var(--wt-shadow-rgb), .08); --wt-elev-hover: 0 2px 6px rgba(var(--wt-shadow-rgb), .06), 0 16px 40px rgba(var(--wt-shadow-rgb), .14); } .wt-depth-floating { --wt-card-shadow: 0 2px 6px rgba(var(--wt-shadow-rgb), .06), 0 18px 48px rgba(var(--wt-shadow-rgb), .14); --wt-elev-hover: 0 4px 10px rgba(var(--wt-shadow-rgb), .08), 0 30px 70px rgba(var(--wt-shadow-rgb), .20); } .wt-depth-hard { --wt-card-shadow: 6px 6px 0 rgba(var(--wt-shadow-rgb), .92); --wt-elev-hover: 9px 9px 0 rgba(var(--wt-shadow-rgb), .92); --wt-card-border: 2px solid var(--wt-ink); } .wt-depth-glass { --wt-glass-fill: rgba(255, 255, 255, .55); --wt-glass-edge: rgba(255, 255, 255, .65); --wt-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px rgba(var(--wt-shadow-rgb), .10), 0 24px 60px rgba(var(--wt-shadow-rgb), .16); --wt-elev-hover: inset 0 1px 0 rgba(255, 255, 255, .65), 0 12px 28px rgba(var(--wt-shadow-rgb), .13), 0 34px 80px rgba(var(--wt-shadow-rgb), .20); --wt-card-border: 1px solid var(--wt-glass-edge); } /* Dark skins: glass goes smoky, edge highlight drops to a faint rim. */ body.wt-depth-glass[data-skin="premium"] { --wt-glass-fill: rgba(22, 26, 36, .55); --wt-glass-edge: rgba(255, 255, 255, .14); --wt-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 20px rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .45); --wt-elev-hover: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px rgba(0, 0, 0, .40), 0 34px 80px rgba(0, 0, 0, .50); } /* Fleet/blog article roots already read --wt-card-shadow/--wt-card-border directly (wt-blocks-inner.css), so the pack token overrides above reach them with no extra rules here. */ /* True frosted material for the glass pack (any skin, not just 'glass'). */ .wt-depth-glass .wt-card, .wt-depth-glass .wt-fleet-card, .wt-depth-glass .wt-blog-card, .wt-depth-glass .wt-hero__card, .wt-depth-glass .wt-quote__bar { background: var(--wt-glass-fill); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } .wt-depth-glass .wt-nav { background: var(--wt-glass-fill); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } /* The colour blooms must stay behind the frosted panels while scrolling — otherwise the blur runs out of backdrop at the first fold. */ .wt-depth-glass { background-attachment: fixed; } /* ── HOVER PACKS ──────────────────────────────────────────────────────── * * Transitions are declared ONLY under a pack (hover 'none' costs nothing). * 150-250ms per the uplift spec; luxe motion pairs fine with these. */ body[class*="wt-hover-"]:not(.wt-hover-none) .wt-card, body[class*="wt-hover-"]:not(.wt-hover-none) .wt-fleet-card, body[class*="wt-hover-"]:not(.wt-hover-none) .wt-blog-card, body[class*="wt-hover-"]:not(.wt-hover-none) .wt-hero__card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } body[class*="wt-hover-"]:not(.wt-hover-none) .wt-btn { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-position .25s ease, background-color .18s ease, color .18s ease; } /* Nav links: underline grows in from the left under every active pack. */ body[class*="wt-hover-"]:not(.wt-hover-none) .wt-nav-item a { position: relative; } body[class*="wt-hover-"]:not(.wt-hover-none) .wt-nav-item a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--wt-primary); transition: right .2s ease; } body[class*="wt-hover-"]:not(.wt-hover-none) .wt-nav-item a:hover::after { right: 0; } /* lift — cards rise, buttons nudge */ .wt-hover-lift .wt-card:hover, .wt-hover-lift .wt-fleet-card:hover, .wt-hover-lift .wt-blog-card:hover, .wt-hover-lift .wt-hero__card:hover { transform: translateY(-5px); box-shadow: var(--wt-elev-hover, var(--wt-card-shadow)); } .wt-hover-lift .wt-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--wt-shadow-rgb), .18); opacity: 1; } /* glow — brand-coloured light instead of movement */ .wt-hover-glow .wt-card:hover, .wt-hover-glow .wt-fleet-card:hover, .wt-hover-glow .wt-blog-card:hover, .wt-hover-glow .wt-hero__card:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(var(--wt-primary-rgb), .28), var(--wt-card-shadow); border-color: rgba(var(--wt-primary-rgb), .45); } .wt-hover-glow .wt-btn-primary:hover { box-shadow: 0 6px 24px rgba(var(--wt-primary-rgb), .45); opacity: 1; } .wt-hover-glow .wt-btn-ghost:hover { box-shadow: 0 0 0 3px rgba(var(--wt-primary-rgb), .22); opacity: 1; } /* swipe — fills sweep across; rows shunt sideways */ .wt-hover-swipe .wt-btn-primary { background-image: linear-gradient(100deg, var(--wt-primary-dark) 0 50%, var(--wt-primary) 50% 100%); background-size: 205% 100%; background-position: 100% 0; } .wt-hover-swipe .wt-btn-primary:hover { background-position: 0 0; opacity: 1; } .wt-hover-swipe .wt-btn-ghost:hover { background: var(--wt-ink); color: var(--wt-surface); border-color: var(--wt-ink); opacity: 1; } .wt-hover-swipe .wt-card:hover, .wt-hover-swipe .wt-fleet-card:hover, .wt-hover-swipe .wt-blog-card:hover { box-shadow: inset 4px 0 0 var(--wt-primary), var(--wt-card-shadow); } .wt-hover-swipe .wt-service { transition: transform .18s ease; } .wt-hover-swipe .wt-service:hover { transform: translateX(6px); } /* reveal — photos live muted and wake up on hover */ .wt-hover-reveal .wt-fleet-card__img, .wt-hover-reveal .wt-blog-card__img, .wt-hover-reveal .wt-showcase-row img { filter: saturate(.35) contrast(1.02); transition: filter .25s ease, transform .25s ease; } .wt-hover-reveal .wt-fleet-card:hover .wt-fleet-card__img, .wt-hover-reveal .wt-blog-card:hover .wt-blog-card__img, .wt-hover-reveal .wt-showcase-row:hover img { filter: none; transform: scale(1.02); } .wt-hover-reveal .wt-card:hover, .wt-hover-reveal .wt-fleet-card:hover, .wt-hover-reveal .wt-blog-card:hover { transform: translateY(-3px); box-shadow: var(--wt-elev-hover, var(--wt-card-shadow)); } /* ── MOTION PACKS ─────────────────────────────────────────────────────── * * Screenshot/no-JS safe by construction: elements are visible by default. * The tiny script in wtRenderHead.php adds .wt-pre ONLY to elements still * below the fold at DOMContentLoaded, then swaps .wt-pre → transition via * .wt-in as they scroll into view. No JS (or reduced motion) = no .wt-pre * = everything simply visible. */ @media (prefers-reduced-motion: no-preference) { /* hero content settles in on load (pure CSS, completes by ~1s) */ .wt-motion-rise .wt-hero-content { animation: wtHeroRise .7s cubic-bezier(.22,.61,.36,1) both; } .wt-motion-luxe .wt-hero-content { animation: wtHeroRise 1.05s cubic-bezier(.16,.55,.3,1) both; } .wt-motion-snappy .wt-hero-content { animation: wtHeroSnap .45s cubic-bezier(.34,1.56,.64,1) both; } @keyframes wtHeroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes wtHeroSnap { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } /* below-the-fold reveals (classes managed by the head script) */ .wt-motion-rise .wt-pre { opacity: 0; transform: translateY(26px); } .wt-motion-luxe .wt-pre { opacity: 0; transform: translateY(34px); } .wt-motion-snappy .wt-pre { opacity: 0; transform: translateY(18px) scale(.97); } .wt-motion-rise .wt-in { transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); } .wt-motion-luxe .wt-in { transition: opacity .95s ease, transform .95s cubic-bezier(.16,.55,.3,1); } .wt-motion-snappy .wt-in { transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } /* snappy: sibling cards stagger */ .wt-motion-snappy .wt-grid-cards > .wt-in:nth-child(2) { transition-delay: .07s; } .wt-motion-snappy .wt-grid-cards > .wt-in:nth-child(3) { transition-delay: .14s; } .wt-motion-snappy .wt-grid-cards > .wt-in:nth-child(4) { transition-delay: .21s; } .wt-motion-snappy .wt-grid-cards > .wt-in:nth-child(5) { transition-delay: .28s; } .wt-motion-snappy .wt-grid-cards > .wt-in:nth-child(6) { transition-delay: .35s; } }