/* ========================================================================= Elite Golden Care - about.html design layer (part 1: tokens, hero, story) Linked LAST in of about.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{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:min(470px,100%);height:auto;aspect-ratio:47/30;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); } .split{gap:clamp(30px,4.5vw,64px)} .split .btn{margin-top:8px;min-height:50px} .photo-grid{grid-template-columns:1.25fr .8fr;align-items:stretch} .photo-figure{margin:0} .photo-figure img{ height:100%;min-height:330px;width:100%;object-fit:cover;border-radius:13px; } .photo-figure figcaption{ margin-top:10px;font-size:12px;letter-spacing:.05em;color:var(--egc-meta); line-height:1.5; } .quote-photo{ border:1px solid rgba(181,138,43,.30); background:linear-gradient(150deg,#fffdf7,#f6ecd6); font-family:"Playfair Display",Georgia,serif; font-size:clamp(22px,2.2vw,30px);line-height:1.25;color:var(--egc-ink); text-align:center;padding:28px 20px;gap:12px; flex-direction:column; } .quote-photo .ico{width:30px;height:30px;color:var(--egc-gold-deep)} .quote-photo small{ font-family:"DM Sans",Arial,sans-serif;font-size:11px;font-weight:700; letter-spacing:.22em;color:var(--egc-gold-deep); } /* Values band: dark card language matching services.html ------------- */ .values-band{background:linear-gradient(180deg,#0d242f,#102e3a);color:#fff} .values-band .eyebrow{color:var(--egc-gold-soft)} .values-band h2{color:#fff} .values-band .section-head p{color:#c3d2d8} .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .value-card{ position:relative;overflow:hidden;text-align:center; background:linear-gradient(145deg,#123544,#0c2634); border:1px solid rgba(216,180,90,.22); border-radius:20px;padding:38px 24px 34px; transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s; } .value-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background:linear-gradient(90deg,var(--egc-gold),var(--egc-gold-soft)); transform:scaleX(0);transform-origin:left;transition:transform .4s ease; } .value-card:hover{transform:translateY(-10px);border-color:rgba(216,180,90,.55)} .value-card:hover::before{transform:scaleX(1)} .value-badge{ position:relative;width:96px;height:96px;border-radius:50%; margin:0 auto 22px;display:grid;place-items:center; background:rgba(216,180,90,.10);color:var(--egc-gold-soft); } .value-badge::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--egc-gold-soft);opacity:.3; animation:egc-pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite; } .value-card:hover .value-badge::after{animation-duration:1s;opacity:.6} .value-badge .ico{width:38px;height:38px} .value-card h3{color:#fff;font-size:1.3rem;margin:0 0 10px} .value-card p{color:#c3d2d8;font-size:.92rem;line-height:1.7;margin:0} @keyframes egc-pulse-ring{ 0%{transform:scale(1);opacity:.3} 50%{transform:scale(1.12);opacity:.08} 100%{transform:scale(1);opacity:.3} } @media(max-width:900px){ .page-hero-inner{grid-template-columns:1fr} .page-hero-photo img{width:100%} .value-grid{grid-template-columns:repeat(2,1fr)} .photo-grid{grid-template-columns:1fr} .photo-figure img{min-height:260px} } @media(max-width:680px){ .section{padding:64px 0} .value-grid{grid-template-columns:1fr} .page-hero-actions .btn{flex:1 1 100%;justify-content:center} } @media(prefers-reduced-motion:reduce){ .value-card,.value-card::before,.value-badge::after{transition:none!important;animation:none!important} }