/*
* Intuitive Mothers — Motion patterns
*
* The eight approved motion behaviors from the brand bible.
* Import after components.css. Pair with motion.js for the JS-driven patterns.
*
* Approved patterns:
* 1. Magnetic lift on CTAs (auto-applied to .btn-primary / .btn-secondary)
* 2. Scroll fade-in (.fade-in)
* 3. Sticky nav with blur backdrop (.nav-sticky-blur)
* 4. Scroll progress bar (#scroll-progress)
* 5. Animated hero headline (.hero-words .word > span)
* 6. Image hover (.img-hover)
* 7. Smooth accordion (.accordion .acc-item)
*
* Plus reduced-motion overrides at the bottom.
*/
/* ============================================================
* 1. MAGNETIC LIFT — primary + secondary CTAs
* Applied automatically to .btn-primary and .btn-secondary, replacing
* the static opacity-only hover from components.css.
* ============================================================ */
.btn-primary, .btn-secondary {
transition: transform 280ms var(--ease-out),
box-shadow 280ms var(--ease-out),
opacity 150ms var(--ease-soft);
box-shadow: 0 1px 2px rgba(45, 26, 40, 0.06);
}
/* Magnetic lift — primary and secondary both lift on hover.
* Primary deepens its Strawberry-tinted shadow (matching the pill nav CTA pattern).
* Secondary picks up a soft Strawberry shadow for subtle affordance. */
.btn-primary:hover, .btn-secondary:hover {
transform: translateY(-2px);
opacity: 1; /* override the 0.92 from components.css */
}
.btn-primary:hover {
box-shadow: 0 8px 20px rgba(188, 69, 101, 0.28);
}
.btn-secondary:hover {
box-shadow: 0 6px 16px rgba(188, 69, 101, 0.18),
0 1px 2px rgba(45, 26, 40, 0.06);
}
.btn-primary:active, .btn-secondary:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(45, 26, 40, 0.08);
transition-duration: 100ms;
}
/* ============================================================
* 2. SCROLL FADE-IN
* Apply .fade-in to any element. Stagger by adding nth-child rules.
* The motion.js IntersectionObserver toggles the .visible class.
* ============================================================ */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms var(--ease-out),
transform 600ms var(--ease-out);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Common stagger pattern — apply to a parent.
* E.g.
*/
.fade-stack .fade-in:nth-child(2) { transition-delay: 100ms; }
.fade-stack .fade-in:nth-child(3) { transition-delay: 200ms; }
.fade-stack .fade-in:nth-child(4) { transition-delay: 300ms; }
.fade-stack .fade-in:nth-child(5) { transition-delay: 400ms; }
.fade-stack .fade-in:nth-child(6) { transition-delay: 500ms; }
/* ============================================================
* 3. STICKY NAV WITH BLUR BACKDROP
* ============================================================ */
.nav-sticky-blur {
position: sticky;
top: 0;
z-index: 50;
background: rgba(248, 248, 246, 0.7);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--border);
padding: 18px 32px;
transition: background 280ms var(--ease-out);
}
/* Animated underline on nav links — right-to-left grow */
.nav-sticky-blur a, .nav-link-underline {
position: relative;
text-decoration: none;
color: var(--ink);
transition: opacity 200ms var(--ease-soft);
}
.nav-sticky-blur a::after, .nav-link-underline::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 2px;
width: 100%;
background: var(--strawberry);
transform: scaleX(0);
transform-origin: right;
transition: transform 280ms var(--ease-out);
}
.nav-sticky-blur a:hover::after, .nav-link-underline:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ============================================================
* 4. SCROLL PROGRESS BAR
* Place at the top of .
* motion.js drives the width.
* ============================================================ */
#scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: var(--strawberry);
width: 0%;
z-index: 100;
transition: width 80ms linear;
}
/* ============================================================
* 5. ANIMATED HERO HEADLINE — words slide up sequentially
*
* Markup:
*
* Mothering
* by
* instinct,
*
*
* Plays once on page load.
* ============================================================ */
.hero-words .word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.hero-words .word > span {
display: inline-block;
transform: translateY(110%);
animation: word-up 800ms var(--ease-out) forwards;
}
.hero-words .word:nth-child(1) > span { animation-delay: 100ms; }
.hero-words .word:nth-child(2) > span { animation-delay: 220ms; }
.hero-words .word:nth-child(3) > span { animation-delay: 340ms; }
.hero-words .word:nth-child(4) > span { animation-delay: 460ms; }
.hero-words .word:nth-child(5) > span { animation-delay: 580ms; }
.hero-words .word:nth-child(6) > span { animation-delay: 700ms; }
.hero-words .word:nth-child(7) > span { animation-delay: 820ms; }
.hero-words .word:nth-child(8) > span { animation-delay: 940ms; }
@keyframes word-up {
to { transform: translateY(0); }
}
/* ============================================================
* 6. IMAGE HOVER — slow zoom + saturation lift + caption fade
*
* Markup:
*
* ============================================================ */
.img-hover {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
cursor: pointer;
}
.img-hover-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 600ms var(--ease-out),
filter 400ms var(--ease-out);
filter: saturate(0.85);
}
.img-hover:hover .img-hover-bg {
transform: scale(1.04);
filter: saturate(1.05);
}
.img-hover-cap {
position: absolute;
bottom: 16px;
left: 18px;
right: 18px;
color: var(--cream);
font-family: var(--body);
font-size: 13px;
font-weight: 500;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(8px);
transition: opacity 400ms var(--ease-out),
transform 400ms var(--ease-out);
}
.img-hover:hover .img-hover-cap {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
* 7. SMOOTH ACCORDION — FAQ pattern
*
* Markup:
*
*
* toggleAcc() lives in motion.js.
* ============================================================ */
.accordion {
background: var(--cream);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
}
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-question {
width: 100%;
background: none;
border: none;
cursor: pointer;
padding: 24px 28px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
font-family: var(--display);
font-weight: 800;
font-size: 19px;
color: var(--ink);
letter-spacing: -0.01em;
transition: background 200ms var(--ease-soft);
}
.acc-question:hover { background: rgba(188, 69, 101, 0.04); }
.acc-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--strawberry);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 280ms var(--ease-out);
font-family: var(--body);
font-weight: 500;
font-size: 16px;
line-height: 1;
}
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-answer {
max-height: 0;
overflow: hidden;
transition: max-height 400ms var(--ease-out);
}
.acc-item.open .acc-answer { max-height: 400px; }
.acc-answer-inner {
padding: 0 28px 24px;
font-family: var(--body);
font-size: 15px;
color: var(--ink);
opacity: 0.85;
line-height: 1.65;
}
/* ============================================================
* 9. HIGHLIGHT SWIPE — animated marker swipe behind a word
*
* Markup:
* instinct
*
* Triggers when scrolled into view (50% threshold). Plays once.
* Use sparingly — once per page, on the single key idea.
*
* Sibling pattern: .highlight (in colors_and_type.css) is the static
* always-on version. Use .highlight for emphasis that should be
* visible from first paint; use .highlight-swipe for emphasis you
* want the user to "discover" as they scroll.
* ============================================================ */
.highlight-swipe {
/* Background-image approach so the highlight wraps cleanly across lines.
* box-decoration-break: clone makes each line of a wrapped inline span
* carry its own copy of the background, instead of one giant rect that
* spans from start-of-line-1 to end-of-last-line (which looks broken). */
display: inline;
color: inherit;
padding: 0 2px;
background-image: linear-gradient(120deg, var(--peach), var(--butter));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 100%;
border-radius: 2px;
transition: background-size 1200ms cubic-bezier(0.65, 0, 0.35, 1);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.highlight-swipe.active {
background-size: 100% 100%;
}
/* ============================================================
* 10. HAND-CIRCLE TITLE — SVG path "marker pen circle" around a title
*
* Markup:
*
*
*
Trust the body.
*
Read the research.
*