/* ============================================================ Balance Acupuncture — Shared Stylesheet Import on every page: Google Fonts must be loaded BEFORE this file in ============================================================ */ /* Handwritten font for section eyebrows */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap'); /* ── Design Tokens ── */ :root { --cream: #f9f6f1; --warm-white: #fdfbf8; --sage: #7eaa85; --sage-light: #a8c8ab; --sage-dark: #4e7a58; --stone: #c9bfae; --charcoal: #3a3530; --mid-grey: #524f4c; --light-grey: #9e9894; --border: #e4ddd4; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-hand: 'Caveat', cursive; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-weight: 300; font-size: 17px; line-height: 1.8; color: var(--charcoal); background: var(--warm-white); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 300; letter-spacing: 0.01em; line-height: 1.2; color: var(--charcoal); } h1 { font-size: clamp(2.4rem, 5vw, 4rem); } h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); } h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); } h4 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } p { color: var(--mid-grey); font-size: 0.975rem; line-height: 1.9; } /* ── Utilities ── */ .container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; } .section { padding: 5rem 0; } .section--alt { background: var(--cream); } .section--dark { background: var(--charcoal); } .text-center { text-align: center; } .eyebrow { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.02em; color: var(--sage-dark); display: block; margin-bottom: 0.8rem; } .divider { width: 40px; height: 1px; background: var(--sage); margin: 1.5rem auto; } .divider--left { margin-left: 0; } /* ── Buttons ── */ .btn { display: inline-block; padding: 0.85rem 2.2rem; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid currentColor; transition: all 0.3s ease; cursor: pointer; text-decoration: none; } .btn--sage { color: var(--sage-dark); border-color: var(--sage-dark); background: transparent; } .btn--sage:hover { background: var(--sage-dark); color: var(--warm-white); } .btn--filled { background: var(--sage-dark); color: var(--warm-white); border-color: var(--sage-dark); } .btn--filled:hover { background: var(--sage); border-color: var(--sage); } .btn--ghost { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.4); } .btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; } /* ── Navigation ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(253,251,248,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); transition: box-shadow 0.3s; } .site-header.scrolled { box-shadow: 0 2px 20px rgba(58,53,48,0.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; max-width: 1120px; margin: 0 auto; padding: 0 2rem; } .nav-logo { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.04em; color: var(--charcoal); display: flex; align-items: center; gap: 0.65rem; } .nav-logo span { color: var(--sage); } .nav-logo-symbol { height: 38px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; } .nav-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid-grey); transition: color 0.2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--sage); transform: scaleX(0); transition: transform 0.25s ease; } .nav-links a:hover { color: var(--charcoal); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.active { color: var(--charcoal); } .nav-cta { font-size: 0.72rem !important; padding: 0.6rem 1.4rem !important; background: var(--sage-dark) !important; color: var(--warm-white) !important; border-radius: 1px !important; transition: background 0.2s !important; } .nav-cta:hover { background: var(--sage) !important; } .nav-cta::after { display: none !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--charcoal); transition: all 0.3s; } /* ── Page Hero (inner pages) ── */ .page-hero { padding: 9rem 0 5rem; background: var(--cream); border-bottom: 1px solid var(--border); } .page-hero h1 { margin-bottom: 1.2rem; font-style: italic; } .page-hero p { max-width: 580px; font-size: 1.05rem; } /* ── Split layout ── */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .split--reverse { direction: rtl; } .split--reverse > * { direction: ltr; } .split-image { position: relative; overflow: hidden; min-height: 460px; } .split-image img { width: 100%; height: 100%; object-fit: cover; } .split-text { padding: 5rem 4rem; display: flex; flex-direction: column; justify-content: center; } .split-text h2 { margin-bottom: 1.1rem; } .split-text p { margin-bottom: 1.2rem; } .split-text .btn { align-self: flex-start; margin-top: 0.8rem; } /* ── Placeholder image blocks ── */ .ph { display: flex; align-items: center; justify-content: center; } .ph svg { opacity: 0.2; } .ph--sage { background: linear-gradient(160deg, #d4e0d4 0%, var(--stone) 100%); } .ph--stone { background: linear-gradient(160deg, var(--stone) 0%, #b8c9b9 100%); } .ph--herb { background: linear-gradient(160deg, #d0ddd0 0%, #e8e0d4 100%); } .ph--warm { background: linear-gradient(160deg, #e0d5c8 0%, #c5d6c5 100%); } /* ── CTA Banner ── */ .cta-banner { background: var(--sage-dark); padding: 5rem 0; text-align: center; } .cta-banner .eyebrow { color: var(--sage-light); } .cta-banner h2 { color: var(--warm-white); margin-bottom: 1rem; font-size: clamp(1.8rem,3vw,2.6rem); } .cta-banner p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; max-width: 560px; margin-left: auto; margin-right: auto; } .cta-banner-actions { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; } .cta-tel { display: block; font-family: var(--font-serif); font-size: 1.9rem; font-style: italic; color: rgba(255,255,255,0.9); margin-bottom: 2rem; transition: color 0.2s; } .cta-tel:hover { color: var(--sage-light); } /* ── Footer ── */ .site-footer { background: var(--charcoal); padding: 4rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-brand h3 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--warm-white); margin-bottom: 1rem; font-weight: 300; } .footer-brand p { color: rgba(255,255,255,0.45); font-size: 0.82rem; } .footer-col h4 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 1.2rem; font-family: var(--font-sans); font-weight: 500; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 0.6rem; } .footer-col ul li a { color: rgba(255,255,255,0.5); font-size: 0.82rem; transition: color 0.2s; } .footer-col ul li a:hover { color: var(--sage-light); } .footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; } .footer-social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 0.75rem; transition: all 0.2s; } .footer-social a:hover { border-color: var(--sage-light); color: var(--sage-light); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: rgba(255,255,255,0.3); } /* ── Responsive ── */ @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: flex; } .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--warm-white); padding: 2rem; gap: 1.4rem; border-bottom: 1px solid var(--border); z-index: 99; box-shadow: 0 8px 24px rgba(58,53,48,0.08); } .split { grid-template-columns: 1fr; } .split--reverse { direction: ltr; } .split-image { min-height: 300px; } .split-text { padding: 3.5rem 2rem; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } .section { padding: 3.5rem 0; } }