/* Admin Bookkeeping: motion layer. Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. Sits on top of the converted design without touching it. Three rules: 1. FAIL-SAFE. Everything that starts hidden is scoped under .abk-motion, a class JavaScript puts on . No JS, or a JS error, means no class, which means nothing is ever hidden. Content is never at the mercy of a script. 2. SCROLL-COUPLED, NOT ONE-SHOT. Reveals re-run whenever an element leaves and re-enters, and the parallax/Ń‚ilt effects read a --p custom property that tracks position in the viewport continuously. Nothing fires once and dies. 3. Anyone who asks their system for less motion gets none of it. Brand: navy #072b5f, orange #ff7d21, cyan #05a1c7. */ /* ---- 1. Opening: a wireframe ledger in three dimensions --------------------- The whole design is the ruled ledger; this extends that ruling into space. A perspective grid runs to a horizon with the language of UK tax suspended above it, the camera flies through, and the field rules off to a single line. The drawing is in abk-intro.js: everything here is the stage it plays on. */ .abk-intro { position: fixed; inset: 0; z-index: 10000; background: radial-gradient(120% 100% at 50% 46%, #0a3a7a 0%, #072b5f 42%, #04203f 100%); pointer-events: none; opacity: 1; transition: opacity .7s ease, transform .9s cubic-bezier(.76, 0, .24, 1); } .abk-intro.is-done { opacity: 0; transform: scale(1.04); } .abk-intro__canvas { position: absolute; inset: 0; display: block; } /* the firm's own line, set the way the page sets an eyebrow */ .abk-intro__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 26px); font: 600 .78rem/1 "Open Sans", "Inter", -apple-system, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: rgba(234, 240, 248, .9); white-space: nowrap; opacity: 0; animation: abk-word .9s ease 2.45s both; } @keyframes abk-word { from { opacity: 0; letter-spacing: .5em; } to { opacity: .9; letter-spacing: .34em; } } /* nothing scrolls while the sequence is playing */ .abk-intro-open, .abk-intro-open body { overflow: hidden; } /* hero content arrives behind the sequence */ .abk-motion [data-abk="hero-in"] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); } .abk-motion.is-ready [data-abk="hero-in"] { opacity: 1; transform: none; } .abk-motion.is-ready [data-abk="hero-in"]:nth-of-type(2) { transition-delay: .10s; } .abk-motion.is-ready [data-abk="hero-in"]:nth-of-type(3) { transition-delay: .20s; } /* ---- 2. Scroll-coupled: continuous, re-runs both ways ---------------------- */ /* --p runs 0 -> 1 as an element crosses the viewport, updated every frame */ .abk-motion [data-abk="parallax"] { background-position-y: calc(50% + (var(--p, .5) - .5) * 70px) !important; } /* photographs drift and settle as they pass */ .abk-motion [data-abk="drift"] { transform: translateY(calc((var(--p, .5) - .5) * -22px)) scale(1.008); transition: transform .12s linear; will-change: transform; } /* section reveals: bidirectional, so scrolling back up replays them */ .abk-motion [data-abk="reveal"] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); } .abk-motion [data-abk="reveal"].is-in { opacity: 1; transform: none; } .abk-motion [data-abk="reveal"][data-abk-i="1"] { transition-delay: .07s; } .abk-motion [data-abk="reveal"][data-abk-i="2"] { transition-delay: .14s; } .abk-motion [data-abk="reveal"][data-abk-i="3"] { transition-delay: .21s; } /* headings sweep an underline as they enter, and again on re-entry */ .abk-motion [data-abk="rule"]::after { content: ""; display: block; height: 3px; width: 0; margin-top: .5rem; background: #ff7d21; transition: width .8s cubic-bezier(.22, .61, .36, 1) .1s; } .abk-motion [data-abk="rule"].is-in::after { width: 84px; } /* scroll progress, always live */ .abk-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 9998; width: 100%; transform: scaleX(var(--abk-scroll, 0)); transform-origin: 0 50%; background: #ff7d21; pointer-events: none; } /* ---- 3. Static: always-on life -------------------------------------------- */ /* counters get a soft pulse ring while they are on screen */ .abk-motion [data-abk="count"] { position: relative; } /* cards lift, with the brand accent picking out the edge */ [data-abk="card"] { transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease; will-change: transform; } @media (hover: hover) { [data-abk="card"]:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7, 43, 95, .22); } } /* the CTA band gets a slow sheen so it never looks dead */ [data-abk="cta"] { position: relative; overflow: hidden; } [data-abk="cta"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%); transform: translateX(-100%); animation: abk-sheen 7s ease-in-out infinite; pointer-events: none; } @keyframes abk-sheen { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* phone link in the CTA: a quiet underline sweep rather than a colour flash */ [data-abk="cta"] a[href^="tel:"] { position: relative; } [data-abk="cta"] a[href^="tel:"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #ff7d21; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) { [data-abk="cta"] a[href^="tel:"]:hover::after { transform: scaleX(1); transform-origin: left; } } /* ---- Respect the visitor --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .abk-intro { display: none !important; } .abk-motion [data-abk="hero-in"], .abk-motion [data-abk="reveal"] { opacity: 1 !important; transform: none !important; transition: none; } .abk-motion [data-abk="drift"], .abk-motion [data-abk="parallax"] { transform: none !important; background-position-y: 50% !important; } .abk-motion [data-abk="rule"]::after { transition: none; width: 84px; } [data-abk="cta"]::before { animation: none; } [data-abk="card"] { transition: none; } .abk-progress { display: none; } } /* ---- Testimonial slider --------------------------------------------------- A true crossfade: both slides are in the flow at once (absolutely positioned in a track whose height follows the active slide), so one dissolves into the next. Toggling display:none would flash, and a slide-in from the side is movement for its own sake on a page that already moves. Nothing is hidden until the script marks the track, so without JS the testimonials stay stacked and readable. */ [data-abk-slider] { position: relative; outline: none; transition: height .5s cubic-bezier(.22, .61, .36, 1); } [data-abk-slider]:focus-visible { outline: 2px solid #ff7d21; outline-offset: 6px; border-radius: 4px; } [data-abk-slider] [data-abk-slide] { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; } [data-abk-slider] [data-abk-slide].is-active { position: relative; opacity: 1; visibility: visible; transition: opacity .6s ease; z-index: 2; } .abk-slider__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1.4rem auto 0; position: relative; z-index: 20; } .abk-slider__arrow { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: #072b5f; background: transparent; border: 1px solid rgba(7, 43, 95, .3); border-radius: 50%; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; } .abk-slider__arrow:hover { background: #072b5f; border-color: #072b5f; color: #fff; } .abk-slider__arrow:focus-visible { outline: 2px solid #ff7d21; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { [data-abk-slider], [data-abk-slider] [data-abk-slide], .abk-slider__arrow { transition: none; } }