/* Miranda Davy Coaching: motion layer. Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. Sits on top of the converted design without altering it. Everything below moves something that was already in place; nothing changes a box. 1. FAIL-SAFE. Anything that starts hidden is scoped under .mrd-motion, a class JavaScript puts on . No JS means nothing is ever hidden. 2. SCROLL-COUPLED, not fire-once: reveals re-run on re-entry. 3. Reduced motion gets none of it. Brand: cyan #13bfd4, ink #231f20, orange #f49342. */ :root { --mrd-cyan: #13bfd4; --mrd-ink: #231f20; --mrd-orange: #f49342; --mrd-ease: cubic-bezier(.25, .46, .45, .94); } /* ---- the opening: a path resolving out of the noise ------------------------ Her promise is "clear and defined strategic paths to follow", so the screen opens tangled and ends on one drawn route. Drawing is in mrd-intro.js. */ .mrd-intro { position: fixed; inset: 0; z-index: 100000; background: #ffffff; pointer-events: none; opacity: 1; transition: opacity .7s ease; } .mrd-intro.is-done { opacity: 0; } .mrd-intro__canvas { position: absolute; inset: 0; display: block; } /* the wordmark sits just below the mark the canvas assembles */ .mrd-intro__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 0); margin-top: min(15vmin, 132px); width: min(38vw, 300px); opacity: 0; transition: opacity 1s ease, transform 1s var(--mrd-ease); } .mrd-intro__word img { display: block; width: 100%; height: auto; } .mrd-intro.is-named .mrd-intro__word { opacity: 1; transform: translate(-50%, -6px); } .mrd-intro-open, .mrd-intro-open body { overflow: hidden; } /* ---- scroll-coupled page motion -------------------------------------------- */ .mrd-motion [data-mrd="rise"] { opacity: 0; transform: translateY(22px); transition: opacity .85s ease, transform .95s var(--mrd-ease); } .mrd-motion [data-mrd="rise"].is-in { opacity: 1; transform: none; } .mrd-motion [data-mrd="rise"][data-mrd-i="1"] { transition-delay: .09s; } .mrd-motion [data-mrd="rise"][data-mrd-i="2"] { transition-delay: .18s; } .mrd-motion [data-mrd="rise"][data-mrd-i="3"] { transition-delay: .27s; } /* No heading rule here. The design already underlines its own headings, with hand-drawn SVG swashes under the hero lines and under each page title, so a second rule was both redundant and, sitting below the heading box, landing on the copy underneath it. */ /* photographs settle as they pass, tied to position not time */ .mrd-motion [data-mrd="drift"] { transform: translateY(calc((var(--p, .5) - .5) * -18px)); transition: transform .12s linear; will-change: transform; } .mrd-motion [data-mrd="parallax"] { background-position-y: calc(50% + (var(--p, .5) - .5) * 70px) !important; } /* the service cards lift, since they are the route into the site */ [data-mrd="card"] { transition: transform .5s var(--mrd-ease), box-shadow .5s ease; will-change: transform; } @media (hover: hover) { [data-mrd="card"]:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(19,191,212,.22); } } /* the appointment button is the conversion: give it a slow sheen */ [data-mrd="cta"] { position: relative; overflow: hidden; } [data-mrd="cta"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%); transform: translateX(-100%); animation: mrd-sheen 7s ease-in-out infinite; pointer-events: none; } @keyframes mrd-sheen { 0%,64% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .mrd-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 9998; width: 100%; transform: scaleX(var(--mrd-scroll, 0)); transform-origin: 0 50%; background: var(--mrd-cyan); pointer-events: none; } .mrd-motion a:focus-visible, .mrd-motion button:focus-visible, .mrd-motion input:focus-visible, .mrd-motion textarea:focus-visible { outline: 2px solid var(--mrd-cyan); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mrd-intro { display: none !important; } .mrd-motion [data-mrd="rise"] { opacity: 1 !important; transform: none !important; transition: none; } .mrd-motion [data-mrd="drift"] { transform: none !important; } .mrd-motion [data-mrd="parallax"] { background-position-y: 50% !important; } .mrd-motion [data-mrd="rule"]::after { transition: none; width: 68px; } [data-mrd="cta"]::after { animation: none; } [data-mrd="card"] { transition: none; } .mrd-progress { display: none; } } /* ---- corrections to the conversion ---------------------------------------- Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. Lining the Book an appointment button up with the nav. The nav is a block