/* ========================================================================== Redefine Midlife — Design System Tokens lifted 1:1 from the approved Lovable theme (OKLCH source of truth, hex fallbacks first for legacy browsers). Type: Cormorant Garamond (display) + DM Sans (UI/body) ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* Brand palette */ --ivory:#faf7f2; --ivory:oklch(97.6% .008 85); --plum:#4e3a5c; --plum:oklch(37.5% .068 313); --lavender:#9084a8; --lavender:oklch(65.5% .062 302); --sage:#cfe0d3; --sage:oklch(87.2% .028 158); --blush:#edd9d6; --blush:oklch(89.8% .019 12); --gold:#c9a46b; --gold:oklch(73.5% .075 82); --charcoal:#38323a; --charcoal:oklch(27.8% .006 315); /* Semantic */ --background:var(--ivory); --foreground:var(--charcoal); --card:#fff; --card:oklch(100% 0 0); --muted:#f4f1ec; --muted:oklch(95.5% .008 85); --muted-foreground:#6f6873; --muted-foreground:oklch(50.5% .02 315); --primary:var(--plum); --primary-foreground:var(--ivory); --secondary:var(--lavender); --accent:var(--gold); --border:#e6e0d7; --border:oklch(90% .012 85); --ring:var(--lavender); --success:#2f7d54; --success:oklch(52% .11 155); --destructive:#c0392b; --destructive:oklch(55% .19 25); /* Plum tints used for washes */ --plum-050:#f3f0f5; --plum-050:oklch(96% .012 313); --plum-100:#e6e0ea; --plum-100:oklch(92% .02 313); /* Shape + depth */ --radius:.875rem; --radius-sm:.5rem; --radius-lg:1.5rem; --radius-pill:999px; --shadow-sm:0 1px 2px rgb(56 50 58 / .05); --shadow:0 4px 16px -4px rgb(56 50 58 / .09); --shadow-lg:0 24px 60px -18px rgb(56 50 58 / .18); /* Type scale (fluid) */ --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --font-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --fs-xs:.875rem; --fs-sm:1rem; --fs-base:1.125rem; --fs-lg:clamp(1.125rem,.4vw + 1.05rem,1.25rem); --fs-h4:clamp(1.2rem,.6vw + 1.05rem,1.4rem); --fs-h3:clamp(1.45rem,1.1vw + 1.15rem,1.9rem); --fs-h2:clamp(1.95rem,2.2vw + 1.3rem,3rem); --fs-h1:clamp(2.4rem,4.2vw + 1.2rem,3.9rem); --fs-hero:clamp(2.6rem,5vw + 1.1rem,4.5rem); /* Rhythm */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --section-y:clamp(3.5rem,7vw,7rem); --container:74rem; --measure:38rem; --header-h:76px; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ font-family:var(--font-body); font-size:var(--fs-base); line-height:1.65; color:var(--foreground); background:var(--background); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Horizontal containment must live on using `clip`, not `hidden` on . `overflow-x:hidden` forces overflow-y to `auto`, which would promote to the scroll container and break scroll-padding-top / anchor offsets. */ html{overflow-x:clip} img,svg,video{display:block;max-width:100%;height:auto} /* Safety net: an inline icon that somehow escapes its sizing rule must never balloon to fill the page. Sized rules below still win on specificity. */ svg:not([width]):not([height]){width:1.15em;height:1.15em} input,button,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} ul,ol{padding:0;list-style:none} a{color:var(--plum);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{color:var(--lavender)} :focus-visible{outline:2.5px solid var(--ring);outline-offset:3px;border-radius:4px} ::selection{background:var(--blush);color:var(--charcoal)} hr{border:0;border-top:1px solid var(--border);margin:var(--sp-6) 0} /* ---------- 3. Typography ---------- */ h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.015em; color:var(--plum); text-wrap:balance; } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);line-height:1.2} h4{font-size:var(--fs-h4);font-weight:600;line-height:1.3} h5,h6{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;color:var(--plum)} p{text-wrap:pretty} p + p{margin-top:1em} .hero-title{font-size:var(--fs-hero)} .lede{font-size:var(--fs-lg);line-height:1.6;color:var(--muted-foreground)} .eyebrow{ font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--lavender); margin-bottom:var(--sp-3);display:block; } .eyebrow--gold{color:oklch(60% .085 82)} em,.italic-accent{font-style:italic} .display em{color:var(--gold);font-style:italic} h2 em,h1 em{color:var(--lavender);font-style:italic} strong{font-weight:600;color:var(--plum)} .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)} .muted{color:var(--muted-foreground)} .center{text-align:center} .measure{max-width:var(--measure)} .measure-wide{max-width:52rem} .mx-auto{margin-inline:auto} /* Long-form article body */ .prose{max-width:42rem;font-size:var(--fs-lg)} .prose h2{margin:2.2em 0 .5em;font-size:var(--fs-h3)} .prose h3{margin:1.8em 0 .4em;font-size:var(--fs-h4)} .prose p,.prose ul,.prose ol{margin-bottom:1.1em} .prose ul{list-style:none} .prose ul li{position:relative;padding-left:1.6em;margin-bottom:.5em} .prose ul li::before{content:"";position:absolute;left:.2em;top:.65em;width:.45em;height:.45em;border-radius:50%;background:var(--gold)} .prose ol{list-style:decimal;padding-left:1.3em} .prose ol li{margin-bottom:.5em;padding-left:.3em} .prose blockquote{ border-left:3px solid var(--gold);padding:.2em 0 .2em 1.3em;margin:1.6em 0; font-family:var(--font-display);font-size:1.25em;font-style:italic;color:var(--plum); } .prose a{color:var(--plum);text-decoration:underline;text-decoration-color:var(--lavender)} /* ---------- 4. Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)} .container--narrow{max-width:58rem} .section{padding-block:var(--section-y)} .section--tight{padding-block:clamp(2.5rem,5vw,4.5rem)} .section--ivory{background:var(--ivory)} .section--white{background:var(--card)} .section--muted{background:var(--muted)} .section--plum{background:var(--plum);color:oklch(94% .01 313)} .section--plum h1,.section--plum h2,.section--plum h3,.section--plum h4{color:var(--ivory)} .section--plum .lede,.section--plum .muted{color:oklch(85% .02 313)} .section--plum .eyebrow{color:var(--gold)} .section--wash{background:linear-gradient(170deg,var(--plum-050) 0%,var(--ivory) 55%)} .section--blush{background:linear-gradient(160deg,var(--blush) 0%,var(--ivory) 70%)} .section--sage{background:linear-gradient(160deg,var(--sage) 0%,var(--ivory) 75%)} .stack > * + *{margin-top:var(--sp-4)} .stack-lg > * + *{margin-top:var(--sp-6)} .section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3.5rem)} .section-head.center{margin-inline:auto} .grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))} .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr} @media (min-width:56rem){ .split{grid-template-columns:1fr 1fr} .split--60{grid-template-columns:1.35fr 1fr} .split--40{grid-template-columns:1fr 1.35fr} } .flow-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center} /* ---------- 5. Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600; letter-spacing:.01em;line-height:1.25;text-align:center;text-decoration:none; padding:.95em 1.7em;border-radius:var(--radius-pill);border:1.5px solid transparent; transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease; will-change:transform; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--plum);color:var(--ivory);box-shadow:var(--shadow)} .btn--primary:hover{background:oklch(32% .075 313);color:var(--ivory);box-shadow:var(--shadow-lg)} .btn--gold{background:var(--gold);color:var(--charcoal);box-shadow:var(--shadow)} .btn--gold:hover{background:oklch(68% .085 82);color:var(--charcoal);box-shadow:var(--shadow-lg)} .btn--outline{border-color:var(--plum);color:var(--plum);background:transparent} .btn--outline:hover{background:var(--plum);color:var(--ivory)} .btn--ghost{color:var(--plum);border-color:var(--border);background:var(--card)} .btn--ghost:hover{border-color:var(--lavender);color:var(--plum)} .btn--light{background:var(--ivory);color:var(--plum)} .btn--light:hover{background:#fff;color:var(--plum)} .btn--outline-light{border-color:oklch(80% .03 313);color:var(--ivory);background:transparent} .btn--outline-light:hover{background:var(--ivory);color:var(--plum)} .btn--lg{font-size:var(--fs-base);padding:1.1em 2.1em} .btn--sm{font-size:var(--fs-xs);padding:.7em 1.25em} .btn--block{width:100%} .btn-note{font-size:var(--fs-xs);color:var(--muted-foreground);margin-top:var(--sp-3)} /* ---------- 6. Cards & surfaces ---------- */ .card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg); padding:clamp(1.4rem,2.5vw,2.1rem);box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; height:100%;display:flex;flex-direction:column; } .card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--lavender)} .card--flat{box-shadow:none} .card--tint{background:var(--plum-050);border-color:transparent} .card--sage{background:var(--sage);border-color:transparent} .card--blush{background:var(--blush);border-color:transparent} .card--plum{background:var(--plum);border-color:transparent;color:oklch(90% .02 313)} .card--plum h3,.card--plum h4{color:var(--ivory)} .card--feature{border-color:var(--gold);border-width:2px;position:relative} .card__title{margin-bottom:var(--sp-2)} .card__body{color:var(--muted-foreground);font-size:var(--fs-sm);flex:1} .card__foot{margin-top:var(--sp-5)} .card-icon{ width:3rem;height:3rem;border-radius:var(--radius);display:grid;place-items:center; background:var(--plum-050);color:var(--plum);margin-bottom:var(--sp-4);flex:none; } .card-icon svg{width:1.5rem;height:1.5rem} .badge{ display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-xs);font-weight:600; letter-spacing:.06em;text-transform:uppercase;padding:.4em 1em;border-radius:var(--radius-pill); background:var(--plum-050);color:var(--plum); } .badge--gold{background:oklch(92% .04 82);color:oklch(45% .07 82)} .badge--sage{background:var(--sage);color:oklch(35% .05 158)} .badge--outline{background:transparent;border:1px solid var(--border);color:var(--muted-foreground)} .badge--float{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--charcoal);white-space:nowrap} .pill-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)} .pill{ font-size:var(--fs-sm);padding:.55em 1.1em;border-radius:var(--radius-pill); background:var(--card);border:1px solid var(--border);color:var(--charcoal); } /* ---------- 7. Header / nav ---------- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:200;background:var(--plum);color:var(--ivory); padding:.8em 1.4em;border-radius:0 0 var(--radius) 0;font-weight:600; } .skip-link:focus{left:0} .site-header{ position:sticky;top:0;z-index:100;background:oklch(97.6% .008 85 / .88); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease; } .site-header.is-stuck{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)} .site-header__inner{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--header-h)} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none} .brand__mark{width:2.15rem;height:2.15rem;flex:none} .brand__text{display:flex;flex-direction:column;line-height:1.05} .brand__name{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--plum);letter-spacing:-.01em} .brand__sub{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender);font-weight:600} .nav{margin-left:auto;display:none} @media (min-width:64rem){.nav{display:block}} .nav__list{display:flex;align-items:center;gap:.15rem} .nav__link{ display:block;padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:var(--fs-sm); font-weight:500;color:var(--charcoal);text-decoration:none;white-space:nowrap;transition:color .15s,background-color .15s; } .nav__link:hover{color:var(--plum);background:var(--plum-050)} .nav__link[aria-current="page"]{color:var(--plum);font-weight:600} .nav__item{position:relative} /* Disclosure toggle — a real