/* ========================================================================= Elite Golden Care - contact.html design layer (part 1: tokens, hero) Linked LAST in of contact.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; --egc-section:clamp(64px,7.5vw,104px); } 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{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;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-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .page-hero-actions .btn{min-height:50px} .page-hero-photo{margin:0;position:relative} .page-hero-photo img{ width:100%;height:clamp(300px,32vw,460px);object-fit:cover;object-position:center 28%; 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); } /* Contact cards + form (part 2) -------------------------------------- */ .contact-grid{gap:clamp(24px,3vw,34px);align-items:start} .contact-card{padding:clamp(28px,3vw,38px)} .contact-item{display:flex;gap:14px;align-items:flex-start;margin:22px 0} .contact-item .ico-badge{ width:48px;height:48px;flex:0 0 48px;border-radius:14px; display:grid;place-items:center; background:#faf2df;color:var(--egc-gold-deep); border:1px solid rgba(181,138,43,.25); } .contact-item .ico-badge .ico{width:22px;height:22px} .contact-item strong{display:block;color:var(--egc-ink);font-size:15px;margin-bottom:2px} .contact-item span{display:block;font-size:13.5px;color:var(--egc-body);line-height:1.6} .contact-item a{color:var(--egc-gold-deep);font-weight:700} .contact-item a:hover{text-decoration:underline} .contact-card .btn{margin-top:10px;min-height:50px} .form-card{padding:clamp(28px,3vw,38px)} .form-card .notice{ display:flex;gap:10px;align-items:flex-start; font-size:13.5px;line-height:1.6;color:var(--egc-ink); margin:0 0 22px;padding:14px 16px; } .form-card .notice .ico{width:18px;height:18px;flex:0 0 18px;color:var(--egc-gold-deep);margin-top:2px} .form-card .notice a{color:var(--egc-gold-deep);font-weight:700} .form-card .notice a:hover{text-decoration:underline} .field label{display:block;margin-bottom:8px} .field input,.field textarea{ width:100%;font:inherit;font-size:14.5px;color:var(--egc-ink); transition:border-color .2s,box-shadow .2s,background .2s; } .field textarea{min-height:150px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:#9aa7ae} .form-card button[type="submit"]{min-height:52px;font-size:14px} .closing-band{text-align:center} .closing-band p{max-width:60ch;margin:0 auto 26px} @media(max-width:900px){ .page-hero-inner{grid-template-columns:1fr} .page-hero-photo img{width:100%;height:340px} .contact-grid{grid-template-columns:1fr} } @media(max-width:680px){ .section{padding:64px 0} .page-hero-actions .btn{flex:1 1 100%;justify-content:center} .contact-item{margin:18px 0} } @media(prefers-reduced-motion:reduce){ .field input,.field textarea{transition:none!important} }