/* ============================================================ MASSAGEASY — marketing site shared styles Aesthetic: editorial wellness. Cormorant serif display + Manrope body, warm cream/sand grounds, single sage accent. ============================================================ */ /* Fonts are loaded via in the page (faster than CSS @import, which blocks in series). Keep families in sync there. */ :root{ --cream:#F0EBE1; /* page bg (exact brand beige) */ --cream-2:#F6F2E9; /* lighter band */ --sand:#E7DECB; /* alt section */ --card:#FAF7F0; /* raised card */ --sage:#7E9C8C; /* muted sage accent */ --sage-deep:#1E3A2F; /* forest green — text emphasis + CTAs */ --green-ink:#1E3A2F; /* darkest forest green, headings */ --ink:#2B2620; /* body text */ --muted:#6E6356; /* muted brown — darkened for WCAG AA on cream */ --faint:#7A6E5D; /* captions — 4.5:1 on the cream ground */ --line:#E4D8C4; --line-soft:#EFE6D6; --serif:'Cormorant Garamond', Georgia, serif; /* @kind font */ --sans:'Manrope', ui-sans-serif, system-ui, sans-serif; /* @kind font */ --container:1080px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} /* ---------- accessibility ---------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sage-deep);color:#fff; padding:10px 18px;border-radius:0 0 10px 0;font:600 14px/1 var(--sans);} .skip-link:focus{left:0;} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--sage-deep);outline-offset:2px;border-radius:4px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important; transition-duration:0.01ms !important;} } body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6;} a{color:inherit;-webkit-tap-highlight-color:transparent;} img{max-width:100%;} .wrap{max-width:var(--container);margin:0 auto;padding:0 22px;} .narrow{max-width:680px;} /* ---------- type ---------- */ .eyebrow{font:600 12px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);margin:0 0 18px;} h1,h2,h3{font-family:var(--serif);color:var(--green-ink);font-weight:500;margin:0;letter-spacing:0.005em;} h1{font-size:clamp(36px,5.6vw,52px);line-height:1.28;} h2{font-size:clamp(28px,5vw,44px);line-height:1.22;} h3{font-size:clamp(21px,3vw,27px);line-height:1.22;} p{margin:0;text-wrap:pretty;} .lead{font:400 clamp(17px,2.3vw,20px)/1.65 var(--sans);color:var(--muted);} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font:600 15px/1 var(--sans); padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .25s ease;white-space:nowrap;} .btn-primary{background:var(--sage-deep);color:var(--cream-2);} .btn-primary:hover{background:var(--green-ink);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--sage-deep);border-color:var(--sage);} .btn-ghost:hover{background:rgba(126,156,140,0.12);} .btn-sm{padding:10px 18px;font-size:14px;min-height:44px;} .btn i{width:17px;height:17px;} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:40;background:rgba(240,235,225,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;gap:16px;} .site-header .brand{display:flex;align-items:center;} .site-header .brand img{height:27px;} .nav{display:flex;gap:30px;align-items:center;} .nav a{font:600 14px/1 var(--sans);color:var(--muted);text-decoration:none;transition:color .2s ease;} .nav a:hover,.nav a.active{color:var(--green-ink);} .nav-only-mobile{display:none;} .nav-cta{display:flex;align-items:center;gap:12px;} .menu-btn{display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--green-ink);padding:6px;min-width:44px;min-height:44px;} .menu-btn i{width:24px;height:24px;} /* ---------- sections ---------- */ .section{padding:clamp(60px,11vw,118px) 0;} .section.sand{background:var(--sand);} .section.cream2{background:var(--cream-2);} .page-hero{padding:clamp(52px,9vw,92px) 0 clamp(34px,6vw,56px);text-align:center;} .page-hero .wrap{max-width:740px;} .page-hero .lead{margin:24px auto 0;max-width:32em;} /* ---------- footer ---------- */ .site-footer{background:var(--sand);padding:clamp(48px,7vw,72px) 0 32px;margin-top:0;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;} .site-footer .brand img{height:24px;margin-bottom:14px;} .site-footer .blurb{font:400 15px/1.6 var(--sans);color:var(--muted);max-width:24em;} .foot-col h4{font:600 12px/1 var(--sans);letter-spacing:0.16em;text-transform:uppercase;color:var(--sage);margin:0 0 16px;} .foot-col a{display:block;font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none;margin-bottom:12px;} .foot-col a:hover{color:var(--sage-deep);} .foot-base{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,52px);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;} .foot-base span{font:500 13px/1 var(--sans);color:var(--faint);} /* ---------- shared bits ---------- */ .cta-band{text-align:center;} .cta-band .wrap{max-width:660px;} .cta-band h2{margin-bottom:14px;} .cta-band .lead{margin:0 auto 30px;} .cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;} /* mobile nav */ @media(max-width:780px){ .nav,.nav-cta .btn{display:none;} .menu-btn{display:inline-flex;} .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:var(--cream-2);border-bottom:1px solid var(--line);padding:8px 0;} .nav.open a{display:flex;align-items:center;min-height:44px;padding:12px 22px;width:100%;} .nav-only-mobile{display:block;} .nav.open .nav-only-mobile{border-top:1px solid var(--line);color:var(--green-ink);} .foot-grid{grid-template-columns:1fr 1fr;} .site-footer .brand{grid-column:1 / -1;} } @media(max-width:480px){ .foot-grid{grid-template-columns:1fr;} }