/* ============================================ TOKENS ============================================ */ :root{ --bg: #1E1814; --bg-alt: #271F19; --bg-card: #2C231D; --line: #3B3026; --text: #F3EAE0; --text-muted:#BCA999; --text-dim: #8C7B6C; --rust: #C1543A; --rust-deep: #8F3D28; --gold: #E0A75E; --moss: #6B7050; --serif: "Frank Ruhl Libre", "Times New Roman", serif; --sans: "Rubik", -apple-system, "Segoe UI", sans-serif; --container: 1140px; --container-narrow: 760px; --ease: cubic-bezier(.22,.61,.36,1); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } h1,h2,h3{ font-family: var(--serif); font-weight: 500; margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; } h2{ font-size: clamp(28px, 4vw, 42px); } h3{ font-size: 21px; font-weight: 600; } p{ margin: 0 0 1em; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; } .container.narrow{ max-width: var(--container-narrow); } .kicker{ font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; margin: 0 0 .8em; } .kicker.center{ text-align:center; } .lead{ font-size: 19px; color: var(--text); } .callout{ font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold); border-right: 3px solid var(--rust); padding-right: 18px; margin: 1.6em 0; } /* reveal on scroll — only hidden by default when JS successfully runs (see inline script in ). Without JS, content is simply visible with no animation. */ .js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ============================================ BUTTONS ============================================ */ .btn{ display:inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; border: 1px solid transparent; } .btn-primary{ background: var(--rust); color: #FBF3EA; box-shadow: 0 6px 22px rgba(193,84,58,.35); } .btn-primary:hover{ background: var(--gold); color: #2A2118; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(224,167,94,.4); } .btn-outline{ background: transparent; color: var(--text); border-color: var(--line); } .btn-outline:hover{ border-color: var(--gold); color: var(--gold); } /* ============================================ HEADER ============================================ */ .site-header{ position: fixed; top:0; right:0; left:0; z-index: 100; background: linear-gradient(180deg, rgba(18,14,11,.72) 0%, transparent 100%); transition: background .35s, box-shadow .35s, padding .35s; padding: 22px 0; } .site-header.scrolled{ background: rgba(30,24,20,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,.25); padding: 14px 0; } .header-inner{ max-width: var(--container); margin: 0 auto; padding: 0 28px; display:flex; align-items:center; justify-content: space-between; } .wordmark{ font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--text); } .main-nav{ display:flex; align-items:center; gap: 30px; font-size: 15px; font-weight: 500; } .main-nav a{ color: var(--text-muted); transition: color .2s; } .main-nav a:hover{ color: var(--gold); } .nav-cta{ background: var(--rust); color: #FBF3EA !important; padding: 9px 22px; border-radius: 999px; } .nav-cta:hover{ background: var(--gold); color:#2A2118 !important; } .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px; } .nav-toggle span{ width: 24px; height: 2px; background: var(--text); display:block; } /* ============================================ HERO ============================================ */ .hero{ position: relative; min-height: 100vh; display:flex; align-items:flex-end; overflow:hidden; } .hero-media{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; } .hero-media img{ width:100%; height:100%; object-fit: cover; object-position: center 35%; } .hero-overlay{ position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(180deg, rgba(20,16,13,.15) 0%, rgba(20,16,13,.35) 45%, rgba(18,14,11,.94) 100%); } .hero-content{ position:relative; z-index:1; max-width: var(--container); margin: 0 auto; padding: 0 28px 110px; width:100%; } .hero .eyebrow{ color: var(--gold); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin-bottom:.8em; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .hero h1{ font-size: clamp(34px, 6vw, 64px); max-width: 16ch; color: #FBF3EA; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .hero-sub{ font-size: 19px; max-width: 46ch; color: #FBF3EA; text-shadow: 0 1px 6px rgba(0,0,0,.55); } .scroll-cue{ position:absolute; bottom: 28px; right: 50%; transform: translateX(50%); z-index:1; } .scroll-cue span{ display:block; width:1px; height:34px; background: linear-gradient(180deg, transparent, var(--gold)); animation: cue 1.8s ease-in-out infinite; } @keyframes cue{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } } /* video intro */ .video-intro{ padding-top: 70px; } .video-wrap{ max-width: 640px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); border: 1px solid var(--line); } .video-wrap video{ width: 100%; display:block; aspect-ratio: 16/9; background: #000; } /* ============================================ SECTIONS ============================================ */ .section{ padding: 110px 0; } .section-alt{ background: var(--bg-alt); } /* mark list — replaces generic checkmarks */ .mark-list{ list-style:none; margin: 1.6em 0; padding: 0; display:grid; gap: 14px; } .mark-list.two-col{ grid-template-columns: 1fr 1fr; gap: 18px 32px; } .mark-list li{ position:relative; padding-right: 26px; font-size: 18px; color: var(--text); } .mark-list li::before{ content:""; position:absolute; right:0; top:.55em; width: 10px; height: 1.5px; background: var(--rust); } /* process steps */ .steps{ list-style:none; margin: 50px 0 0; padding:0; display:grid; gap: 38px; } .steps li{ display:flex; align-items:flex-start; gap: 28px; border-top: 1px solid var(--line); padding-top: 30px; } .steps li:first-child{ border-top:none; padding-top:0; } .step-num{ font-family: var(--serif); font-size: 44px; color: var(--line); line-height:1; min-width: 1.6em; } .steps h3{ margin-bottom:.25em; color: var(--gold); } .steps p{ margin:0; color: var(--text-muted); } /* story */ .story-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items:center; } .story-media img{ border-radius: 6px; filter: saturate(1.05); } .story-text p{ color: var(--text-muted); font-size: 17px; } .story-text h2{ color: var(--text); } /* photo break */ .photo-break{ position: relative; height: 56vh; min-height: 360px; overflow:hidden; } .photo-break img{ width:100%; height:100%; object-fit:cover; object-position: center top; } .photo-break-overlay{ position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(0deg, rgba(18,14,11,.85) 0%, rgba(18,14,11,.15) 55%); display:flex; align-items:flex-end; padding: 50px 28px; } .photo-break-overlay p{ font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 26px); max-width: 620px; color: #FBF3EA; margin:0; } /* free tool / breathing */ .tool-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items:center; } .tool-steps{ list-style:none; counter-reset: tool; padding:0; margin: 1.4em 0; display:grid; gap: 14px; } .tool-steps li{ counter-increment: tool; position:relative; padding-right: 34px; color: var(--text-muted); } .tool-steps li::before{ content: counter(tool); position:absolute; right:0; top:0; width: 22px; height:22px; border-radius:50%; border: 1px solid var(--rust); color: var(--gold); font-size: 12px; font-weight:600; display:flex; align-items:center; justify-content:center; } .breathing-widget{ display:flex; justify-content:center; } .breath-circle{ position:relative; width: 220px; height:220px; border-radius:50%; background: radial-gradient(circle at 50% 45%, rgba(224,167,94,.18), transparent 70%); border: none; cursor:pointer; display:flex; align-items:center; justify-content:center; } .breath-ring{ position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%; border: 1px solid var(--rust); opacity:.5; } .breath-ring.r2{ top:22px; right:22px; bottom:22px; left:22px; border-color: var(--gold); opacity:.35; } .breath-circle.breathing .breath-ring.r1{ animation: breathe 8s ease-in-out infinite; } .breath-circle.breathing .breath-ring.r2{ animation: breathe 8s ease-in-out infinite .3s; } @keyframes breathe{ 0%, 100%{ transform: scale(.78); opacity:.3; } 40%{ transform: scale(1.12); opacity:.75; } 60%{ transform: scale(1.12); opacity:.75; } } .breath-label{ font-family: var(--serif); font-style: italic; color: var(--text); font-size: 16px; z-index:1; text-align:center; max-width: 130px; } /* testimonials */ .testimonials{ background: var(--bg-alt); } .testi-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; } blockquote{ margin:0; position:relative; padding-top: 18px; } blockquote::before{ content:"\201D"; font-family: var(--serif); font-size: 70px; color: var(--rust); position:absolute; top: -22px; right: -6px; opacity:.6; } blockquote p{ font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--text); } blockquote cite{ display:block; font-style:normal; font-weight:600; letter-spacing:.04em; color: var(--gold); font-size: 14px; text-transform:uppercase; } /* accordion */ .accordion details{ border-bottom: 1px solid var(--line); padding: 20px 0; } .accordion summary{ cursor:pointer; font-weight:600; font-size: 18px; list-style:none; display:flex; justify-content:space-between; align-items:center; } .accordion summary::-webkit-details-marker{ display:none; } .accordion summary::after{ content:"+"; font-size: 22px; color: var(--gold); transition: transform .25s; } .accordion details[open] summary::after{ transform: rotate(45deg); } .accordion details p{ color: var(--text-muted); margin: 14px 0 0; font-size: 16px; } /* pricing */ .pricing-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; } .price-card{ background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 30px 24px; display:flex; flex-direction:column; position:relative; } .price-card.featured{ border-color: var(--rust); background: linear-gradient(160deg, var(--bg-card), #34241D); } .badge{ position:absolute; top: -12px; right: 24px; background: var(--rust); color:#FBF3EA; font-size: 12px; font-weight:700; padding: 5px 12px; border-radius: 999px; } .price-card h3{ font-size: 18px; margin-bottom:.3em; } .price{ font-family: var(--serif); font-size: 32px; color: var(--gold); margin: 0; } .price-sub{ color: var(--text-dim); font-size: 13px; margin-bottom: 14px; } .price-desc{ color: var(--text-muted); font-size: 15px; flex-grow:1; } .price-card ul{ list-style:none; padding:0; margin: 0 0 18px; color: var(--text-muted); font-size: 14.5px; flex-grow:1; } .price-card ul li{ padding: 4px 0; } .price-card .btn{ text-align:center; margin-top:10px; } .price-note{ text-align:center; color: var(--text-dim); font-size: 14px; margin-top: 36px; } /* contact */ .contact-form{ margin-top: 40px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field{ margin-bottom: 20px; } .field label{ display:block; font-size: 14px; color: var(--text-muted); margin-bottom: 8px; } .field input, .field textarea{ width:100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px; padding: 13px 14px; color: var(--text); font-family: var(--sans); font-size: 16px; transition: border-color .2s; } .field input:focus, .field textarea:focus{ outline: none; border-color: var(--gold); } .form-success{ color: var(--gold); margin-top: 16px; font-weight:600; } /* footer */ .site-footer{ text-align:center; padding: 36px 0; color: var(--text-dim); font-size: 14px; border-top: 1px solid var(--line); } /* keyboard focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 880px){ .story-grid, .tool-grid{ grid-template-columns: 1fr; gap: 36px; } .testi-grid{ grid-template-columns: 1fr; gap: 36px; } .pricing-grid{ grid-template-columns: 1fr 1fr; } .mark-list.two-col{ grid-template-columns: 1fr; } } @media (max-width: 640px){ .section{ padding: 72px 0; } .main-nav{ position:absolute; top: 100%; left:0; right:0; background: rgba(24,19,16,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); flex-direction:column; align-items:flex-start; gap: 0; padding: 10px 28px 26px; transform: translateY(-12px); opacity:0; pointer-events:none; transition: opacity .25s, transform .25s; } .main-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; } .main-nav a{ padding: 12px 0; width:100%; border-bottom: 1px solid var(--line); } .main-nav a:last-child{ border-bottom:none; } .nav-cta{ margin-top: 10px; text-align:center; } .nav-toggle{ display:flex; } .pricing-grid{ grid-template-columns: 1fr; } .form-row{ grid-template-columns: 1fr; } .hero-content{ padding-bottom: 70px; } }