/* Miranda Davy Hypnotherapy: 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. The layout, spacing and type are the client's and are not touched: everything below moves something that was already in place. Three rules: 1. FAIL-SAFE. Everything that starts hidden is scoped under .md-motion, a class JavaScript puts on . No JS, or a JS error, means no class, which means nothing is ever hidden. 2. SCROLL-COUPLED, NOT ONE-SHOT. Reveals re-run whenever an element leaves and re-enters. Nothing fires once and dies. 3. Anyone who asks their system for less motion gets none of it. The register is hers: unhurried. This is a page about relaxation, so nothing snaps, nothing bounces, and the easings are long and soft. A hypnotherapist's site that flings its content around is selling the wrong thing. Brand: cyan #0fbed3. */ :root { --md-cyan: #0fbed3; --md-cyan-2:#0aa7ba; --md-ink: #333333; --md-ease: cubic-bezier(.25, .46, .45, .94); /* easeOutQuad: no overshoot */ } /* ---- 1. The opening: focus arriving ----------------------------------------- Her own page quotes what hypnosis is: a level of focus that leaves you unaware of the things that otherwise flit in and out of mind. So the screen opens busy with the soft shapes of her own background, then quietens until only her name is left. The drawing is in md-intro.js; this is the stage. */ .md-intro { position: fixed; inset: 0; z-index: 100000; background: #d3f2f7; pointer-events: none; opacity: 1; transition: opacity .8s ease; } .md-intro.is-done { opacity: 0; } .md-intro__canvas { position: absolute; inset: 0; display: block; } .md-intro__lockup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; width: max-content; max-width: 92vw; } .md-intro__lockup > * { opacity: 0; transform: translateY(10px); transition: opacity 1.1s ease, transform 1.1s var(--md-ease); font-family: "Bookman Old Style", Bookman, Georgia, serif; line-height: 1.2; } .md-intro.is-named .md-intro__lockup > * { opacity: 1; transform: none; } .md-intro.is-named .md-intro__h2 { transition-delay: .16s; } .md-intro.is-named .md-intro__h3 { transition-delay: .32s; } .md-intro__h1 { font-size: clamp(2rem, 5.4vw, 3.25rem); font-weight: 500; color: var(--md-ink); } .md-intro__h2 { font-size: clamp(1.1rem, 2.4vw, 1.625rem); font-weight: 500; color: #000; } .md-intro__h3 { font-size: 1rem; font-weight: 400; color: var(--md-ink); background: #fff; padding: 4px 8px; } /* nothing scrolls while the sequence plays */ .md-intro-open, .md-intro-open body { overflow: hidden; } /* ---- 2. Scroll-coupled page motion ------------------------------------------ The design is white cards floating on an illustrated background, so the cards are what moves: they settle into place rather than flying in. */ .md-motion [data-md="card"] { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1.1s var(--md-ease); } .md-motion [data-md="card"].is-in { opacity: 1; transform: none; } .md-motion [data-md="rise"] { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform 1s var(--md-ease); } .md-motion [data-md="rise"].is-in { opacity: 1; transform: none; } .md-motion [data-md="rise"][data-md-i="1"] { transition-delay: .10s; } .md-motion [data-md="rise"][data-md-i="2"] { transition-delay: .20s; } .md-motion [data-md="rise"][data-md-i="3"] { transition-delay: .30s; } /* the illustrated background drifts, slowly, tied to scroll position */ .md-motion [data-md="parallax"] { background-position-y: calc(50% + (var(--p, .5) - .5) * 90px) !important; } /* headings draw their own cyan rule as they arrive */ .md-motion [data-md="rule"] { position: relative; } .md-motion [data-md="rule"]::after { content: ""; position: absolute; left: 0; bottom: -9px; height: 2px; width: 0; background: var(--md-cyan); transition: width 1.1s var(--md-ease) .2s; } .md-motion [data-md="rule"].is-in::after { width: 64px; } /* ---- 3. Always-on life ------------------------------------------------------- The call to action breathes. Four seconds in, four seconds out, which is a settling breath rather than a pulse: it is the one piece of always-on motion on the page and it should feel like the thing she teaches. */ [data-md="cta"] { animation: md-breathe 8s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; } @keyframes md-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } /* the phone number warms as you approach it */ [data-md="phone"] { transition: transform .5s var(--md-ease), box-shadow .5s ease; } @media (hover: hover) { [data-md="phone"]:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 190, 211, .32); } } /* nav: a cyan underline that slides, instead of a colour flick */ .md-motion [data-md="nav"] { position: relative; } .md-motion [data-md="nav"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--md-cyan); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--md-ease); } @media (hover: hover) { .md-motion [data-md="nav"]:hover::after { transform: scaleX(1); transform-origin: left; } } /* every interactive thing gets a visible focus ring in the brand colour */ .md-motion a:focus-visible, .md-motion button:focus-visible, .md-motion input:focus-visible, .md-motion textarea:focus-visible { outline: 2px solid var(--md-cyan-2); outline-offset: 3px; } /* scroll progress, always live */ .md-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 9998; width: 100%; transform: scaleX(var(--md-scroll, 0)); transform-origin: 0 50%; background: var(--md-cyan); pointer-events: none; } /* ---- Respect the visitor ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .md-intro { display: none !important; } .md-motion [data-md="card"], .md-motion [data-md="rise"] { opacity: 1 !important; transform: none !important; transition: none; } .md-motion [data-md="parallax"] { background-position-y: 50% !important; } .md-motion [data-md="rule"]::after { transition: none; width: 64px; } [data-md="cta"] { animation: none; } [data-md="phone"] { transition: none; } .md-progress { display: none; } } /* Mobile: her email address is one 28-character token with no break opportunity, so on a 360px phone it ran 9px past the edge of the viewport and the last letters were clipped. Breaking is allowed only where it has to be, so nothing changes on any screen wide enough to hold the address whole. */ @media (max-width: 480px) { a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; } }