/* ========================================================================= Elite Golden Care - booking.html design layer (part 1: tokens, hero) Linked LAST in of booking.html. Delete that one line to roll back. ========================================================================= */ :root{ --egc-gold:#b58a2b; --egc-gold-soft:#d8b45a; --egc-gold-deep:#8a6410; --egc-ink:#172d3b; --egc-body:#5c6b76; --egc-meta:#5d6b74; } body{ font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{font-family:"Playfair Display",Georgia,"Times New Roman",serif;text-wrap:balance} p{color:var(--egc-body);line-height:1.72} .eyebrow{letter-spacing:.22em} .page-hero{ min-height:0; padding:clamp(52px,6.5vw,92px) 0; background: radial-gradient(circle at 12% 15%,rgba(216,180,90,.16),transparent 32%), linear-gradient(120deg,#f7f2e7 0%,#fbfaf6 58%,#eef3f1 100%); } .page-hero-inner{gap:clamp(30px,4vw,56px)} .page-hero-copy{max-width:620px} .page-hero h1{font-size:clamp(40px,4.8vw,64px);letter-spacing:-.035em;margin-bottom:18px} .page-hero-copy p{font-size:clamp(15px,1.1vw,16.5px);max-width:56ch;margin-bottom:0} .page-hero .breadcrumb{ display:flex;align-items:center;gap:9px; font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--egc-meta);margin:0 0 16px; } .page-hero .breadcrumb a{color:var(--egc-gold-deep)} .page-hero .breadcrumb a:hover{text-decoration:underline} .page-hero .breadcrumb [aria-hidden="true"]{color:var(--egc-gold)} .page-hero-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;list-style:none;padding:0} .page-hero-steps li{ display:flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--egc-ink);background:#fff;border:1px solid #ebe4d4; border-radius:999px;padding:9px 15px; } .page-hero-steps .n{ width:22px;height:22px;border-radius:50%;flex:0 0 22px; display:grid;place-items:center;font-size:11px; background:var(--egc-ink);color:#fff; } .page-hero-photo{margin:0;position:relative} .page-hero-photo img{ width:min(430px,100%);height:auto;aspect-ratio:43/28;object-fit:cover; border-radius:18px; box-shadow:14px 14px 0 rgba(216,180,90,.55),0 25px 55px rgba(23,45,59,.14); } .page-hero-photo figcaption{ margin-top:12px;font-size:12px;letter-spacing:.06em;color:var(--egc-meta); } /* Booking panel + form (part 2) ---------------------------------------- */ .booking-wrap{gap:clamp(24px,3vw,34px);align-items:start} .booking-side .eyebrow{color:#f2d27a} .booking-side h2{color:#fff} .booking-side p{color:#d3dde1} .promise-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px} .promise-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:#fff;font-weight:500} .promise-list .ico{width:18px;height:18px;flex:0 0 18px;color:#f2d27a} .booking-contact{border:0;border-top:1px solid rgba(255,255,255,.15);margin:26px 0 0;padding:20px 0 0} .booking-contact p{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f2d27a;margin:0 0 4px} .booking-contact strong a{color:#fff;font-size:20px;text-decoration:none} .booking-contact strong a:hover{text-decoration:underline} .booking-contact address{font-style:normal;font-size:13.5px;color:#d3dde1;margin-top:12px;line-height:1.6} .booking-contact address a{color:#d3dde1} .booking-contact address a:hover{color:#fff} .form-card{padding:clamp(28px,3vw,38px)} .field label{display:block;margin-bottom:8px} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:14.5px;color:var(--egc-ink); transition:border-color .2s,box-shadow .2s,background .2s; } .field input::placeholder,.field textarea::placeholder{color:#9aa7ae} .field textarea{min-height:130px;resize:vertical} .form-card button[type="submit"]{min-height:52px;font-size:14px} .success{display:none;background:#eef7f0;border:1px solid #cfe8d8;border-radius:12px;padding:16px 18px;margin-top:18px;color:#2e6b41;font-size:14px;line-height:1.6} @media(max-width:900px){ .page-hero-inner{grid-template-columns:1fr} .page-hero-photo img{width:100%} .booking-wrap{grid-template-columns:1fr} .booking-side{order:2} } @media(max-width:680px){ .section{padding:64px 0} .page-hero-steps li{font-size:11px;padding:8px 12px} .booking-contact strong a{font-size:18px} } @media(prefers-reduced-motion:reduce){ .field input,.field select,.field textarea{transition:none!important} }