/* ============================================================ SELF-HOSTED TYPE — Lora (headings) + Public Sans (everything else, replacing General Sans and the banned Space Grotesk). Both are variable fonts served as one woff2 each; the browser interpolates the declared weight range from that single file. See DESIGN.md for the full rationale. ============================================================ */ @font-face{ font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap; src:url('assets/fonts/lora-variable.woff2') format('woff2-variations'), url('assets/fonts/lora-variable.woff2') format('woff2'); } @font-face{ font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url('assets/fonts/public-sans-variable.woff2') format('woff2-variations'), url('assets/fonts/public-sans-variable.woff2') format('woff2'); } :root{ /* ---- palette: coral / grey / cream, unchanged hues, retuned to spec ---- */ --coral:#E9796D; --coral-dark:#b85c47; --coral-darker:#9c4d3a; --coral-bg:rgba(233,121,109,.12); --coral-border:rgba(233,121,109,.32); --dark:#2c2828; --darker:#1a1616; --grey:#5A6774; --light:#FDFAF4; --ink:#211D1D; --line:#E4DFD8; --border:#e4dfd8; --white:#fff; --error:#c73f3f; /* ---- type ---- */ --sans:'Public Sans',-apple-system,BlinkMacSystemFont,sans-serif; --serif:'Lora',Georgia,'Times New Roman',serif; --nav-font:var(--sans); --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:clamp(1.5rem,2vw + 1rem,2.125rem); --text-2xl:clamp(1.75rem,2.5vw + 1rem,2.5rem); --text-3xl:clamp(2rem,3.5vw + 1rem,3.25rem); /* ---- spacing (4px base) ---- */ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px; --space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px; /* ---- radius: 0 = structural framing, 4 = interactive controls, 50% = circular only ---- */ --r-frame:0px; --r-control:4px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--white);color:var(--dark);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.2;letter-spacing:-.005em} section{padding:var(--space-24) 24px} @media (max-width:700px){section{padding:var(--space-16) 20px}} @media (max-width:480px){ section{padding:44px 18px} .section-title{margin-bottom:10px;font-size:23px} .section-sub{margin-bottom:32px;font-size:14.5px} } .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--coral-bg);border:1px solid var(--coral-border);color:var(--coral-dark);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:var(--r-control);margin-bottom:24px} .eyebrow::before{content:'';width:6px;height:6px;background:var(--coral);border-radius:50%} .btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.02em;padding:14px 30px;border-radius:var(--r-control);text-decoration:none;cursor:pointer;border:2px solid var(--coral-dark);transition:background-color .15s ease,color .15s ease,border-color .15s ease} .btn-primary{background:var(--coral-dark);color:#fff} .btn-primary:hover{background:var(--coral-darker);border-color:var(--coral-darker)} .btn-outline{background:transparent;color:var(--coral-dark)} .btn-outline:hover{background:var(--coral-dark);color:#fff} .btn-primary-dark{background:var(--coral-dark);color:#fff;border:2px solid var(--coral-dark)} .btn-primary-dark:hover{background:transparent;color:var(--coral-dark)} /* ---------- bracket primitive: the site's one repeated framing device ---------- */ .bracket-frame{position:relative;border:1px solid var(--border);border-radius:var(--r-frame);padding:32px 30px} .bracket-frame::before,.bracket-frame::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none} .bracket-frame::before{top:-1px;left:-1px;border-top:2px solid var(--coral);border-left:2px solid var(--coral)} .bracket-frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--coral);border-right:2px solid var(--coral)} .bracket-index{display:inline-block;font-family:var(--nav-font);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--coral-dark)} .bracket-index::before{content:'[ ';color:var(--coral-border);font-weight:400} .bracket-index::after{content:' ]';color:var(--coral-border);font-weight:400} /* NAV and FOOTER live in sidebar.css. */ /* SECTION HEADERS */ /* A bracketed kicker instead of the line-flanked eyebrow every other site seems to reach for. Space Grotesk's brackets sit close to the text, so this reads as a tag, not a decoration. */ .section-label{display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--nav-font); font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:16px} .section-label::before{content:'[';font-weight:400;color:var(--coral-border)} .section-label::after{content:']';font-weight:400;color:var(--coral-border)} .section-title{text-align:center;font-size:clamp(26px,3.4vw,38px);max-width:700px;margin:0 auto 18px} .section-sub{text-align:center;color:var(--grey);max-width:620px;margin:0 auto 56px;font-size:16px} .on-dark .section-sub{color:rgba(255,255,255,.65)} .on-dark .section-title{color:#fff} /* POSITIONING */ #positioning{background:var(--white)} .pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;max-width:1000px;margin:0 auto} .pos-grid p{color:var(--grey);margin-bottom:16px;font-size:16px} .pos-list{list-style:none;display:flex;flex-direction:column;gap:22px} .pos-list li{display:flex;gap:14px} .pos-num{flex-shrink:0;width:30px;height:30px;border-radius:6px;background:var(--coral-bg);color:var(--coral-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .pos-list strong{display:block;margin-bottom:4px;font-size:15px} .pos-list span{color:var(--grey);font-size:14px} @media (max-width:800px){.pos-grid{grid-template-columns:1fr;gap:36px}} @media (max-width:480px){.pos-grid{gap:26px}.pos-list{gap:18px}} /* HOW IT WORKS */ #process{background:var(--light)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1080px;margin:0 auto;position:relative} .step{text-align:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:32px 22px} .step-num{width:46px;height:46px;border:2px solid var(--coral);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:17px;color:var(--coral-dark);margin:0 auto 18px} .step h3{font-size:17px;margin-bottom:8px} .step p{color:var(--grey);font-size:14px} @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:560px){.steps{grid-template-columns:1fr;gap:14px}} @media (max-width:480px){.step{padding:22px 18px}} /* PACKAGES */ #packages{background:var(--white)} .price-note{max-width:640px;margin:0 auto 56px;text-align:center;background:var(--light);border:1px solid var(--border);border-radius:10px;padding:22px 28px;color:var(--dark);font-size:15px} .price-note strong{color:var(--coral-dark)} .packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px;margin:0 auto} .pkg{border:1px solid var(--border);border-radius:12px;padding:36px 28px;display:flex;flex-direction:column} .pkg-gold{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)} .pkg-tag{font-family:var(--sans);font-weight:500;font-size:22px;margin-bottom:6px} .pkg-flag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:18px} .pkg-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex-grow:1} .pkg-features li{display:flex;gap:10px;font-size:14.5px;color:var(--dark)} .pkg-features li::before{content:'✓';color:var(--coral-dark);font-weight:700;flex-shrink:0} .pkg .btn{text-align:center} @media (max-width:900px){.packages-grid{grid-template-columns:1fr;max-width:480px}} @media (max-width:480px){ .price-note{padding:18px 20px;margin-bottom:32px} .packages-grid{gap:16px} .pkg{padding:26px 22px} } /* FAQ */ #faq{background:var(--light)} .faq-list{max-width:760px;margin:0 auto} .faq-item{border-bottom:1px solid var(--border);padding:22px 0} @media (max-width:480px){.faq-item{padding:16px 0}.faq-item summary{font-size:14.5px}} .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:600;font-size:15.5px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:20px;color:var(--coral-dark);flex-shrink:0} .faq-item[open] summary::after{content:'–'} .faq-item p{margin-top:14px;color:var(--grey);font-size:15px;max-width:680px} /* BOOKING PAGE */ #booking{background:var(--darker);color:#fff} #booking .section-title{color:#fff} #booking .section-sub{color:rgba(255,255,255,.6)} .booking-box{max-width:640px;margin:0 auto;background:var(--dark);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:44px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-size:13px;font-weight:600;color:rgba(255,255,255,.8)} .field input,.field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:12px 14px;color:#fff;font-family:var(--sans);font-size:14px} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--coral)} .field textarea{resize:vertical;min-height:100px} #bookingForm .btn{width:100%;text-align:center;margin-top:6px} @media (max-width:560px){.form-row{grid-template-columns:1fr}.booking-box{padding:28px 22px}} @media (max-width:420px){.booking-box{padding:22px 16px}} .thankyou{display:none;text-align:center;padding:20px 0} .thankyou h3{font-size:24px;color:#fff;margin-bottom:12px} .thankyou p{color:rgba(255,255,255,.65);font-size:15px} /* ---------- scroll reveal (shared) ---------- Previously duplicated per-page inline