/* ========================================================================== 廣和中醫診所 Guarhe TCM Clinic — Global stylesheet Palette: deep herbal green + brand gold (#bf8d42) on warm rice paper ========================================================================== */ :root{ --green-900:#14301f; --green-800:#1c3f28; --green-700:#255033; --green-600:#2f6340; --green-300:#8fae93; --green-100:#e3ebe1; --gold:#bf8d42; --gold-dark:#a2742f; --cream:#f7f4ec; --cream-2:#efeade; --ink:#28302a; --ink-soft:#5d6a60; --line:#e0dbcd; --white:#fff; --wrap:1150px; --serif:"Noto Serif TC",serif; --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; --shadow-sm:0 4px 18px rgba(20,48,31,.06); --shadow-md:0 14px 40px rgba(20,48,31,.10); --header-h:82px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.9; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; letter-spacing:.02em; } img{max-width:100%;display:block;} a{color:var(--green-700);text-decoration:none;transition:color .25s;} a:hover{color:var(--gold);} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.45;letter-spacing:.04em;} p{margin:0 0 1em;text-wrap:pretty;} ul{margin:0;padding:0;list-style:none;} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;} /* ---------- Section frame ---------- */ .section{padding:104px 0;} .section-cream{background:var(--cream);} .section-green{background:var(--green-800);color:#e9efe8;} .sec-head{text-align:center;max-width:760px;margin:0 auto 58px;} .sec-head h2{font-size:36px;color:var(--green-800);margin:0 0 4px;} .sec-head-light h2{color:#fff;} .sec-sub{color:var(--ink-soft);margin:14px 0 0;font-size:15.5px;} .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;text-align:left;max-width:none;} .sec-head-row h2{font-size:32px;} .eyebrow{ display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:500; letter-spacing:.32em;color:var(--gold);margin-bottom:14px; } .eyebrow-light{color:#d9bd8c;} .rule{width:56px;height:2px;background:var(--gold);margin:18px auto 0;position:relative;} .rule::before,.rule::after{ content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%; background:var(--gold);transform:translateY(-50%); } .rule::before{left:-13px;} .rule::after{right:-13px;} .rule-left{margin:20px 0 26px;} .rule-light,.rule-light::before,.rule-light::after{background:#d9bd8c;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; padding:15px 30px;border-radius:2px;font-size:15px;font-weight:500; letter-spacing:.08em;transition:all .3s ease;border:1px solid transparent; } .btn em{font-style:normal;transition:transform .3s;} .btn:hover em{transform:translateX(4px);} .btn-solid{background:var(--green-700);color:#fff;box-shadow:var(--shadow-sm);} .btn-solid:hover{background:var(--gold);color:#fff;} .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(2px);} .btn-ghost:hover{background:#fff;color:var(--green-800);border-color:#fff;} .btn-line{border-color:var(--line);color:var(--green-700);background:transparent;padding:12px 24px;font-size:14px;} .btn-line:hover{border-color:var(--gold);color:var(--gold);} .btn-line-light{border-color:rgba(255,255,255,.35);color:#e9efe8;} .btn-line-light:hover{border-color:var(--gold);color:var(--gold);} .btn-sm{padding:11px 22px;font-size:14px;} .text-link{ display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500; color:var(--green-700);letter-spacing:.06em;margin-top:auto; } .text-link em{font-style:normal;transition:transform .3s;} .text-link:hover em{transform:translateX(4px);} /* ========================================================================== HEADER ========================================================================== */ .site-header{ position:fixed;inset:0 0 auto;z-index:100; background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border-bottom:1px solid rgba(224,219,205,.7); transition:box-shadow .3s,background .3s; } .site-header.is-stuck{box-shadow:0 6px 24px rgba(20,48,31,.09);} .header-inner{ width:100%;max-width:1440px;margin:0 auto;padding:0 32px;height:var(--header-h); display:flex;align-items:center;gap:28px; } .brand img{height:46px;width:auto;} .main-nav{margin-left:auto;} .main-nav > ul{display:flex;align-items:center;gap:4px;} .main-nav > ul > li{position:relative;} .main-nav > ul > li > a{ display:block;padding:12px 14px;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:.06em; } .main-nav > ul > li > a::after{ content:"";display:block;height:2px;width:0;background:var(--gold); margin-top:5px;transition:width .3s; } .main-nav > ul > li > a:hover::after, .main-nav > ul > li > a.is-current::after{width:100%;} .main-nav > ul > li > a.is-current{color:var(--green-700);} .sub{ position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px); min-width:236px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md); padding:10px 0;opacity:0;visibility:hidden;transition:all .25s; } .has-sub:hover .sub{opacity:1;visibility:visible;transform:translate(-50%,0);} .sub li a{display:block;padding:10px 22px;font-size:14.5px;color:var(--ink);white-space:nowrap;} .sub li a:hover{background:var(--cream);color:var(--green-700);} .header-actions{display:flex;align-items:center;gap:16px;} .header-tel{ display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700; color:var(--green-800);font-family:var(--serif);letter-spacing:.04em; } .header-tel svg{width:18px;height:18px;fill:var(--gold);} .nav-toggle{display:none;} /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative;height:780px;min-height:780px;display:flex;align-items:center; padding:calc(var(--header-h) + 40px) 0 90px;overflow:hidden; } .hero-media{position:absolute;inset:0;} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;animation:heroZoom 18s ease-out forwards;} @keyframes heroZoom{from{transform:scale(1.08);}to{transform:scale(1);}} .hero-overlay{ position:absolute;inset:0; background:linear-gradient(100deg,rgba(14,40,24,.90) 0%,rgba(16,44,27,.74) 42%,rgba(20,48,31,.28) 72%,rgba(20,48,31,.15) 100%); } .hero-inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;} .hero-copy{max-width:640px;color:#fff;animation:fadeUp 1s .1s both;} @keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} .hero h1{ font-size:60px;line-height:1.28;color:#fff;margin:0 0 22px; letter-spacing:.06em;text-shadow:0 2px 20px rgba(0,0,0,.25); } .hero h1 .thin{display:inline-block;font-size:38px;font-weight:400;color:#ecdcc0;margin-top:10px;} .hero-lead{font-size:17px;line-height:2.1;color:rgba(255,255,255,.9);margin:0 0 34px;} .hero-facts{display:flex;flex-wrap:wrap;gap:14px 42px;margin:0 0 38px;padding:24px 0; border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);} .hero-facts li{display:flex;flex-direction:column;} .hero-facts strong{font-family:var(--serif);font-size:22px;color:#ecdcc0;letter-spacing:.04em;line-height:1.4;} .hero-facts span{font-size:13.5px;color:rgba(255,255,255,.75);letter-spacing:.1em;} .hero-btns{display:flex;flex-wrap:wrap;gap:14px;} .hero-dots{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2;} .hero-dots span{width:26px;height:2px;background:rgba(255,255,255,.4);} .hero-dots span.on{background:var(--gold);width:44px;} /* ========================================================================== SERVICES ========================================================================== */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .svc-card{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);padding:44px 28px 34px; transition:transform .35s,box-shadow .35s,border-color .35s; } .svc-card::after{ content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:width .4s; } .svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent;} .svc-card:hover::after{width:100%;} .svc-no{ position:absolute;top:20px;right:24px;font-family:var(--serif);font-size:34px; color:var(--cream-2);line-height:1;letter-spacing:.02em; } .svc-icon{ width:66px;height:66px;border-radius:50%;background:var(--green-100); display:grid;place-items:center;margin-bottom:22px;transition:background .35s; } .svc-card:hover .svc-icon{background:var(--gold);} .svc-icon svg{width:34px;height:34px;fill:none;stroke:var(--green-700);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s;} .svc-card:hover .svc-icon svg{stroke:#fff;} .svc-card h3{font-size:21px;color:var(--green-800);margin-bottom:12px;} .svc-card p{font-size:14.5px;line-height:1.95;color:var(--ink-soft);margin-bottom:18px;} .svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;} .svc-tags li{font-size:12px;letter-spacing:.06em;color:var(--green-600); background:var(--cream);border:1px solid var(--line);padding:4px 10px;} /* ========================================================================== ABOUT ========================================================================== */ .about{background:#fff;} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;} .about-media{position:relative;padding:0 0 64px 0;} .about-img-main{width:100%;height:470px;object-fit:cover;box-shadow:var(--shadow-md);} .about-img-sub{ position:absolute;right:-24px;bottom:0;width:210px;height:180px;object-fit:cover; border:8px solid #fff;box-shadow:var(--shadow-md); } .about-badge{ position:absolute;left:-18px;top:28px;background:var(--green-700);color:#fff; padding:18px 22px;text-align:center;box-shadow:var(--shadow-md); } .about-badge strong{display:block;font-family:var(--serif);font-size:28px;line-height:1;color:#ecdcc0;} .about-badge span{font-size:12px;letter-spacing:.18em;} .about-copy h2{font-size:34px;color:var(--green-800);} .about-copy p{font-size:15.5px;color:var(--ink-soft);} .check-list{margin:26px 0 32px;display:grid;gap:12px;} .check-list li{position:relative;padding-left:34px;font-size:15px;color:var(--ink);} .check-list li::before{ content:"";position:absolute;left:0;top:.45em;width:20px;height:20px;border-radius:50%; background:var(--green-100); } .check-list li::after{ content:"";position:absolute;left:6px;top:calc(.45em + 6px);width:8px;height:5px; border-left:1.8px solid var(--green-700);border-bottom:1.8px solid var(--green-700); transform:rotate(-45deg); } /* ========================================================================== WHY ========================================================================== */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .why-card{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); padding:36px 26px;text-align:center;transition:background .35s,transform .35s; } .why-card:hover{background:#fff;transform:translateY(-6px);} .why-icon{width:58px;height:58px;margin:0 auto 18px;border-radius:50%; border:1px solid rgba(217,189,140,.5);display:grid;place-items:center;transition:border-color .35s;} .why-icon svg{width:28px;height:28px;fill:none;stroke:#d9bd8c;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s;} .why-card:hover .why-icon{border-color:var(--gold);} .why-card:hover .why-icon svg{stroke:var(--gold);} .why-card h3{font-size:19px;color:#fff;margin-bottom:10px;transition:color .35s;} .why-card p{font-size:14px;line-height:1.95;color:rgba(233,239,232,.72);margin:0;transition:color .35s;} .why-card:hover h3{color:var(--green-800);} .why-card:hover p{color:var(--ink-soft);} /* ========================================================================== ARTICLES ========================================================================== */ .post-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .post-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column; transition:transform .35s,box-shadow .35s;} .post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);} .post-thumb{position:relative;display:block;overflow:hidden;height:180px;} .post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s;} .post-card:hover .post-thumb img{transform:scale(1.07);} .post-cat{ position:absolute;left:14px;bottom:14px;background:var(--green-700);color:#fff; font-size:12px;letter-spacing:.1em;padding:4px 12px; } .post-body{padding:22px 22px 26px;} .post-body h3{font-size:16.5px;line-height:1.7;margin-bottom:10px;} .post-body h3 a{color:var(--green-800);} .post-body h3 a:hover{color:var(--gold);} .post-body p{font-size:13.5px;line-height:1.9;color:var(--ink-soft);margin:0;} /* ========================================================================== CTA ========================================================================== */ .cta{position:relative;padding:96px 0;overflow:hidden;color:#fff;} .cta-media{position:absolute;inset:0;} .cta-media img{width:100%;height:100%;object-fit:cover;} .cta-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,40,24,.94) 0%,rgba(16,44,27,.82) 55%,rgba(20,48,31,.55) 100%);} .cta-inner{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;} .cta-copy h2{font-size:34px;color:#fff;margin-bottom:14px;} .cta-copy p{color:rgba(255,255,255,.85);font-size:15.5px;} .cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;} .cta-clinics{display:grid;gap:18px;} .clinic{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:22px 26px;} .clinic h3{font-size:17px;color:#ecdcc0;margin-bottom:6px;} .clinic-tel{display:block;font-family:var(--serif);font-size:24px;color:#fff;letter-spacing:.04em;} .clinic-tel:hover{color:var(--gold);} .clinic p{font-size:14px;color:rgba(255,255,255,.75);margin:6px 0 0;} /* ========================================================================== FOOTER ========================================================================== */ .site-footer{background:var(--green-900);color:rgba(233,239,232,.72);font-size:14px;} .footer-grid{display:grid;grid-template-columns:1.6fr 1.1fr .8fr .8fr;gap:44px;padding-top:76px;padding-bottom:52px;} .foot-brand img{height:52px;margin-bottom:20px;filter:brightness(0) invert(1);opacity:.92;} .foot-brand p{font-size:13.5px;line-height:2;margin-bottom:22px;} .foot-col h4{font-size:16px;color:#fff;margin-bottom:20px;letter-spacing:.1em;position:relative;padding-bottom:12px;} .foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold);} .foot-contact li{margin-bottom:16px;line-height:1.85;} .foot-contact span{display:block;font-size:12px;letter-spacing:.16em;color:var(--gold);margin-bottom:2px;} .foot-links li{margin-bottom:11px;} .foot-links a{color:rgba(233,239,232,.72);font-size:14px;} .foot-links a:hover{color:var(--gold);} .foot-area{padding-bottom:34px;font-size:12.5px;line-height:1.95;color:rgba(233,239,232,.5);} .foot-area p{margin:0 0 8px;} .foot-area strong{color:rgba(233,239,232,.72);font-weight:500;} .foot-note{color:var(--gold)!important;} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);} .foot-bottom-inner{display:flex;gap:28px;justify-content:space-between;align-items:flex-start; padding-top:22px;padding-bottom:26px;font-size:12.5px;color:rgba(233,239,232,.45);} .foot-bottom-inner p{margin:0;} .disclaimer{max-width:720px;line-height:1.85;} /* ---------- floating LINE ---------- */ .float-line{ position:fixed;right:24px;bottom:24px;z-index:90;width:56px;height:56px;border-radius:50%; background:#06c755;display:grid;place-items:center;box-shadow:0 10px 26px rgba(6,199,85,.34); transition:transform .3s; } .float-line:hover{transform:translateY(-4px);} .float-line svg{width:30px;height:30px;fill:#fff;} /* ========================================================================== INNER PAGES ========================================================================== */ .page-hero{position:relative;height:400px;display:flex;align-items:center;overflow:hidden;padding-top:var(--header-h);} .page-hero-media{position:absolute;inset:0;} .page-hero-media img{width:100%;height:100%;object-fit:cover;} .page-hero-overlay{position:absolute;inset:0; background:linear-gradient(100deg,rgba(14,40,24,.92) 0%,rgba(16,44,27,.78) 50%,rgba(20,48,31,.42) 100%);} .page-hero-inner{position:relative;color:#fff;} .page-hero h1{font-size:44px;color:#fff;letter-spacing:.08em;margin:0;} .page-hero p{margin:14px 0 0;font-size:15.5px;color:rgba(255,255,255,.82);letter-spacing:.06em;} .crumb-bar{background:var(--cream);border-bottom:1px solid var(--line);} .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:16px;padding-bottom:16px; font-size:13px;color:var(--ink-soft);letter-spacing:.06em;} .crumb span{color:var(--line);} .crumb span.on{color:var(--green-700);font-weight:500;} .lead-block{max-width:820px;text-align:center;margin-bottom:56px;} .lead-block h2{font-size:34px;color:var(--green-800);} .lead-block p{margin-top:24px;font-size:16px;color:var(--ink-soft);} /* ---- definition list (about) ---- */ .def-list{display:grid;gap:2px;} .def-item{display:grid;grid-template-columns:100px 1fr;gap:24px;align-items:start; padding:38px 0;border-top:1px solid var(--line);} .def-item:last-child{border-bottom:1px solid var(--line);} .def-no{font-family:var(--serif);font-size:40px;color:var(--cream-2);line-height:1;} .def-item h3{font-size:23px;color:var(--green-800);margin-bottom:14px;} .def-item h3 small{display:block;font-family:var(--sans);font-size:13px;font-weight:400; color:var(--gold);letter-spacing:.14em;margin-top:6px;} .def-item p{font-size:15.5px;color:var(--ink-soft);} .def-sub{font-size:14px!important;padding:16px 20px;background:var(--cream);border-left:3px solid var(--green-300);margin-bottom:0!important;} /* ---- split image / text ---- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} .split-media img{width:100%;height:460px;object-fit:cover;box-shadow:var(--shadow-md);} .split-copy h2{font-size:32px;color:var(--green-800);} .split-copy p{font-size:15.5px;color:var(--ink-soft);} .notice{margin-top:24px;padding:16px 20px;background:var(--white);border:1px dashed var(--gold); color:var(--gold-dark);font-size:14px;letter-spacing:.04em;} /* ---- gallery ---- */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .gal-item{overflow:hidden;height:220px;background:var(--cream-2);} .gal-item.gal-wide{grid-column:span 2;} .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s;} .gal-item:hover img{transform:scale(1.06);} /* ---- specialty rows ---- */ .svc-rows{display:grid;gap:56px;} .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;} .svc-row.is-alt .svc-row-media{order:2;} .svc-row-media{display:block;overflow:hidden;} .svc-row-media img{width:100%;height:340px;object-fit:cover;transition:transform .6s;} .svc-row-media:hover img{transform:scale(1.05);} .svc-row-copy{position:relative;} .svc-row-no{font-family:var(--serif);font-size:15px;letter-spacing:.3em;color:var(--gold);} .svc-row-copy h3{font-size:28px;color:var(--green-800);margin-top:8px;} .svc-row-copy p{font-size:15.5px;color:var(--ink-soft);} .svc-row-copy .svc-tags{margin:18px 0 24px;} .row-btns{display:flex;flex-wrap:wrap;gap:12px;} /* ---- compare ---- */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .compare-col{background:#fff;border:1px solid var(--line);padding:34px 32px;} .compare-col h3{font-size:20px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);} .compare-col ul{display:grid;gap:12px;} .compare-col li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-soft);} .compare-col li::before{position:absolute;left:0;top:0;font-size:15px;} .compare-col.is-bad h3{color:var(--ink-soft);} .compare-col.is-bad li::before{content:"×";color:#b98a8a;} .compare-col.is-good{border-color:var(--green-600);box-shadow:var(--shadow-md);} .compare-col.is-good h3{color:var(--green-800);} .compare-col.is-good li::before{content:"✓";color:var(--green-600);} /* ---- steps ---- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s;} .steps li{position:relative;background:var(--cream);padding:36px 26px 30px;border-top:3px solid var(--green-700);} .steps li span{font-family:var(--serif);font-size:15px;letter-spacing:.24em;color:var(--gold);} .steps li h3{font-size:19px;color:var(--green-800);margin:8px 0 10px;} .steps li p{font-size:14px;line-height:1.95;color:var(--ink-soft);margin:0;} /* ---- faq ---- */ .faq{max-width:900px;margin:0 auto;display:grid;gap:12px;} .faq details{background:#fff;border:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative; font-family:var(--serif);font-size:17px;color:var(--green-800);} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%); font-size:22px;color:var(--gold);line-height:1;} .faq details[open] summary::after{content:"–";} .faq details[open] summary{border-bottom:1px solid var(--line);} .faq p{margin:0;padding:20px 24px;font-size:15px;color:var(--ink-soft);} /* ---- doctors ---- */ .doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .doc-card{background:#fff;border:1px solid var(--line);transition:transform .35s,box-shadow .35s;} .doc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);} .doc-photo{display:block;height:280px;overflow:hidden;} .doc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s;} .doc-card:hover .doc-photo img{transform:scale(1.05);} .doc-body{padding:24px 24px 28px;} .doc-clinic{font-size:12px;letter-spacing:.16em;color:var(--gold);} .doc-body h3{font-size:22px;color:var(--green-800);margin:6px 0 14px;} .doc-body .svc-tags{margin-bottom:16px;} /* ---- article list + sidebar ---- */ .col-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start;} .list-head{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:16px;border-bottom:2px solid var(--green-700);margin-bottom:8px;} .list-head h2{font-size:24px;color:var(--green-800);} .list-head span{font-size:13px;color:var(--ink-soft);letter-spacing:.08em;} .list{display:grid;} .list-item{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:32px 0;border-bottom:1px solid var(--line);} .list-thumb{display:block;height:170px;overflow:hidden;} .list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s;} .list-item:hover .list-thumb img{transform:scale(1.06);} .list-meta{display:flex;align-items:center;gap:14px;margin-bottom:10px;} .post-cat.is-flat{position:static;background:var(--green-100);color:var(--green-700);} .list-meta time{font-size:12.5px;color:var(--ink-soft);letter-spacing:.08em;} .list-body h3{font-size:20px;line-height:1.6;margin-bottom:10px;} .list-body h3 a{color:var(--green-800);} .list-body h3 a:hover{color:var(--gold);} .list-body p{font-size:14.5px;color:var(--ink-soft);margin-bottom:12px;} .list-body .text-link{margin-top:0;} .pager{display:flex;gap:8px;margin-top:36px;} .pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 16px; border:1px solid var(--line);font-size:14px;color:var(--ink-soft);} .pager span.on{background:var(--green-700);border-color:var(--green-700);color:#fff;} .pager a:hover{border-color:var(--gold);color:var(--gold);} .col-side{display:grid;gap:24px;position:sticky;top:calc(var(--header-h) + 20px);} .side-box{background:#fff;border:1px solid var(--line);padding:26px 24px;} .side-box h4{font-size:17px;color:var(--green-800);padding-bottom:14px;margin-bottom:16px; border-bottom:1px solid var(--line);letter-spacing:.08em;} .side-cats li,.side-links li{border-bottom:1px dashed var(--line);} .side-cats li:last-child,.side-links li:last-child{border-bottom:none;} .side-cats a,.side-links a{display:block;padding:11px 0 11px 16px;font-size:14.5px;color:var(--ink);position:relative;} .side-cats a::before,.side-links a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:5px;height:5px;background:var(--green-300);border-radius:50%;} .side-cats a:hover,.side-links a:hover,.side-cats a.on{color:var(--gold);} .side-cta{background:var(--green-800);border-color:var(--green-800);} .side-cta h4{color:#fff;border-color:rgba(255,255,255,.2);} .side-cta p{font-size:14px;color:rgba(233,239,232,.75);} /* ---- hours ---- */ .hours-tabs{display:flex;gap:8px;margin-bottom:22px;} .hours-tabs span{padding:12px 26px;border:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);background:#fff;} .hours-tabs span.on{background:var(--green-700);border-color:var(--green-700);color:#fff;} .table-wrap{overflow-x:auto;} .hours-table{width:100%;border-collapse:collapse;background:#fff;min-width:760px;} .hours-table th,.hours-table td{border:1px solid var(--line);padding:16px 12px;text-align:center;font-size:14.5px;} .hours-table thead th{background:var(--green-800);color:#fff;font-weight:500;letter-spacing:.08em;} .hours-table tbody th{background:var(--cream);color:var(--green-800);font-weight:500;white-space:nowrap;} .hours-table td.yes{color:var(--green-600);font-size:16px;} .hours-table td.no{color:var(--line);} .table-note{margin-top:14px;font-size:13px;color:var(--gold-dark);} .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;} .info-card{background:var(--cream);border:1px solid var(--line);padding:30px 32px;} .info-card h3{font-size:20px;color:var(--green-800);margin-bottom:16px;} .info-card ul{display:grid;gap:10px;} .info-card li{display:grid;grid-template-columns:56px 1fr;gap:10px;font-size:15px;color:var(--ink-soft);} .info-card li span{color:var(--gold);font-size:13px;letter-spacing:.1em;padding-top:3px;} /* ---- location ---- */ .map-block{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;margin-bottom:56px;} .map-block.is-alt .map-frame{order:2;} .map-frame{height:400px;border:1px solid var(--line);box-shadow:var(--shadow-sm);} .map-frame iframe{width:100%;height:100%;border:0;display:block;} .map-copy h3{font-size:28px;color:var(--green-800);margin-top:4px;} .info-list{display:grid;gap:12px;margin-bottom:26px;} .info-list li{display:grid;grid-template-columns:56px 1fr;gap:10px;font-size:15px;color:var(--ink-soft);} .info-list li span{color:var(--gold);font-size:13px;letter-spacing:.1em;padding-top:3px;} .area-box{background:var(--cream);border:1px solid var(--line);padding:34px 36px;} .area-box h3{font-size:20px;color:var(--green-800);margin-bottom:14px;} .area-box p{font-size:14px;line-height:2;color:var(--ink-soft);margin:0 0 8px;} .area-box strong{color:var(--green-700);font-weight:500;} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1200px){ .header-inner{padding:0 20px;gap:16px;} .main-nav > ul > li > a{padding:12px 9px;font-size:14px;} .header-tel{display:none;} } @media (max-width:1024px){ .section{padding:80px 0;} .hero h1{font-size:46px;} .hero h1 .thin{font-size:28px;} .svc-grid,.why-grid,.post-grid,.doc-grid{grid-template-columns:repeat(2,1fr);} .page-hero{height:330px;} .page-hero h1{font-size:34px;} .split,.svc-row,.map-block{grid-template-columns:1fr;gap:34px;} .svc-row.is-alt .svc-row-media,.map-block.is-alt .map-frame{order:0;} .split-media img{height:340px;} .gallery{grid-template-columns:repeat(2,1fr);} .gal-item.gal-wide{grid-column:span 2;} .steps{grid-template-columns:repeat(2,1fr);} .col-layout{grid-template-columns:1fr;gap:44px;} .col-side{position:static;grid-template-columns:repeat(2,1fr);} .about-grid{grid-template-columns:1fr;gap:48px;} .about-img-main{height:380px;} .cta-inner{grid-template-columns:1fr;gap:36px;} .footer-grid{grid-template-columns:1fr 1fr;gap:36px;} .nav-toggle{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer;padding:0 11px; } .nav-toggle span{display:block;height:2px;background:var(--green-800);transition:.3s;} .main-nav{ position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:#fff; padding:20px 24px 60px;overflow-y:auto;transform:translateX(100%);transition:transform .35s; } body.nav-open .main-nav{transform:none;} body.nav-open{overflow:hidden;} .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;} .main-nav > ul > li > a{padding:16px 4px;border-bottom:1px solid var(--line);font-size:16px;} .main-nav > ul > li > a::after{display:none;} .sub{position:static;transform:none;opacity:1;visibility:visible;border:none;box-shadow:none; padding:6px 0 10px 16px;min-width:0;} .sub li a{padding:8px 0;color:var(--ink-soft);} } @media (max-width:640px){ .section{padding:62px 0;} .wrap,.hero-inner{padding:0 18px;} .sec-head h2,.about-copy h2,.cta-copy h2{font-size:26px;} .sec-head-row{flex-direction:column;align-items:flex-start;} .hero{height:auto;min-height:auto;padding:calc(var(--header-h) + 70px) 0 90px;} .hero h1{font-size:34px;} .hero h1 .thin{font-size:22px;} .hero-lead{font-size:15px;} .hero-lead br{display:none;} .hero-facts{gap:16px 26px;} .hero-facts strong{font-size:18px;} .svc-grid,.why-grid,.post-grid,.footer-grid,.doc-grid,.steps,.compare,.info-grid,.col-side{grid-template-columns:1fr;} .page-hero{height:280px;} .page-hero h1{font-size:27px;} .lead-block h2,.split-copy h2,.svc-row-copy h3{font-size:25px;} .def-item{grid-template-columns:1fr;gap:10px;} .def-no{font-size:30px;} .gallery{grid-template-columns:1fr;} .gal-item.gal-wide{grid-column:span 1;} .list-item{grid-template-columns:1fr;gap:16px;} .list-thumb{height:200px;} .map-frame{height:300px;} .split-media img{height:260px;} .about-img-sub{display:none;} .about-badge{left:0;top:0;} .btn{width:100%;justify-content:center;} .btn-sm,.btn-line{width:auto;} .foot-bottom-inner{flex-direction:column;gap:12px;} } /* ========================================================================== Static-migration additions. Concatenated onto style.css by build.copy_static. Layout defences first. Three bugs recur when WordPress content moves into a grid: a full-width image blows out its column; a grid child sized `1fr` lets its min-content width set the track; an unwrapped table sets that min-content width to its own. All three are answered here once, globally, rather than per-page. ========================================================================== */ img,picture,svg,video,iframe,canvas{max-width:100%;} .prose,.col-main,.col-side,.svc-body{min-width:0;} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green-800); color:#fff;padding:12px 20px;font-size:15px;} .skip:focus{left:12px;top:12px;color:#fff;} /* ---------- flat hero (no photo): every interior page ---------- */ .page-hero-flat,.hero-flat{height:auto;min-height:0; padding:calc(var(--header-h) + 62px) 0 58px; background:linear-gradient(150deg,var(--green-900) 0%,var(--green-700) 62%,#2c5c3b 100%); color:#fff;} .page-hero-flat .page-hero-inner,.hero-flat .hero-inner{position:relative;z-index:2;} .page-hero-flat h1,.hero-flat h1{color:#fff;font-size:40px;margin:10px 0 14px;} .page-hero-flat .hero-lead,.hero-flat .hero-lead{color:#d7e3d6;max-width:70ch;margin:0;} .hero-flat{padding-bottom:66px;} .hero-flat .hero-facts{margin-top:34px;} .hero-flat .hero-btns{margin-top:30px;} /* ---------- generic content column ---------- */ .svc-body{max-width:920px;margin:0 auto;} .svc-sec{margin:0 0 58px;} .svc-sec h2{font-size:27px;color:var(--green-800);margin:0 0 16px; padding-left:16px;border-left:4px solid var(--gold);} .svc-sec h3{font-size:19px;color:var(--green-700);margin:26px 0 10px;} /* The answer-first opener. Set apart so a reader scanning the page and an answer engine extracting a passage land on the same sentences. */ .answer{background:var(--cream);border-left:3px solid var(--green-600); padding:18px 22px;margin:0 0 22px;font-size:17px;line-height:1.85;color:var(--ink);} .sec-foot{text-align:center;margin:44px 0 0;} /* ---------- tables ---------- */ .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px; border:1px solid var(--line);background:#fff;} .tableWrap table{margin:0;border:0;} .dtable{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;} .dtable caption,.hours-table caption{text-align:left;padding:14px 18px;font-weight:600; color:var(--green-800);background:var(--cream-2);border-bottom:1px solid var(--line); font-family:var(--serif);} .dtable th,.dtable td{padding:13px 18px;border-bottom:1px solid var(--line); vertical-align:top;text-align:left;line-height:1.75;} .dtable thead th{background:var(--green-800);color:#fff;font-weight:500;white-space:nowrap;} .dtable tbody th{font-weight:600;color:var(--green-800);background:var(--cream); white-space:nowrap;} .dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0;} .hours-table th span{display:block;font-weight:400;font-size:12.5px; color:var(--ink-soft);margin-top:2px;} /* ---------- figures ---------- */ .fig{margin:0 0 34px;} .fig .chart{width:100%;height:auto;display:block;border:1px solid var(--line); background:var(--cream);} .fig figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:10px;line-height:1.7;} /* ---------- lists ---------- */ .check-x li::before{content:"\2715";color:#a2472f;} .contra{margin:0 0 18px;} .contra li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:14px; padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;} .contra li strong{color:var(--green-800);} .contra li span{color:var(--ink-soft);line-height:1.8;} .twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px; margin:0 0 20px;} .tc-col{background:var(--cream);border:1px solid var(--line);padding:22px 24px;} .tc-col h3{margin:0 0 12px;font-size:17px;color:var(--green-800);} .tc-col li{position:relative;padding-left:20px;margin-bottom:8px;font-size:15px; color:var(--ink-soft);line-height:1.8;} .tc-col li::before{content:"\00B7";position:absolute;left:6px;color:var(--gold); font-weight:700;} /* ---------- FAQ ---------- */ .faq{border:1px solid var(--line);background:#fff;} .faq>h2{margin:0;padding:22px 22px 18px;border-bottom:1px solid var(--line); border-left:0;font-size:22px;} .faq-item{border-bottom:1px solid var(--line);background:#fff;} .faq-item:last-child{border-bottom:0;} .faq-item summary{cursor:pointer;padding:20px 46px 20px 22px;font-weight:600; font-family:var(--serif);color:var(--green-800);font-size:17px;position:relative; list-style:none;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+";position:absolute;right:20px;top:50%; transform:translateY(-50%);font-size:22px;color:var(--gold);font-weight:400;} .faq-item[open] summary::after{content:"\2212";} .faq-item summary:hover{color:var(--gold-dark);} .faq-a{padding:0 22px 22px;color:var(--ink-soft);font-size:15.5px;line-height:1.9;} .faq-a p{margin:0;} /* ---------- article index: text-first list, no thumbnails ---------- */ .idx-list{list-style:none;} .idx-item{padding:26px 0;border-bottom:1px solid var(--line);} .idx-item:first-child{padding-top:0;} .idx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;} .idx-meta time{font-size:13px;color:var(--ink-soft);letter-spacing:.06em;} .idx-item h3{font-size:19px;line-height:1.6;margin:0 0 8px;} .idx-item h3 a{color:var(--green-800);} .idx-item h3 a:hover{color:var(--gold);} .idx-item p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.85;} .idx-list-home .idx-item:first-child{padding-top:26px;border-top:1px solid var(--line);} .col-main{min-width:0;} /* ---------- article ---------- */ .post{background:#fff;} .post-wrap{max-width:880px;margin:0 auto;} .post-head{padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:30px;} .post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .post-head h1{font-size:33px;line-height:1.5;color:var(--green-900);margin:0 0 16px;} .byline{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:13.5px; color:var(--ink-soft);} .by-doc{font-weight:600;color:var(--green-700);} .by-doc em{font-style:normal;color:var(--ink-soft);font-weight:400;margin-left:8px;} .post-lead{margin:20px 0 0;font-size:17px;line-height:1.9;color:var(--ink); background:var(--cream);border-left:3px solid var(--gold);padding:16px 20px;} .toc{background:var(--cream);border:1px solid var(--line);padding:22px 26px; margin:0 0 34px;} .toc-h{font-family:var(--serif);font-weight:600;color:var(--green-800);margin:0 0 12px; font-size:16px;} .toc ol{counter-reset:toc;} .toc li{counter-increment:toc;position:relative;padding-left:28px;margin-bottom:8px; font-size:15px;line-height:1.75;} .toc li::before{content:counter(toc);position:absolute;left:0;top:1px;width:19px; height:19px;background:var(--green-700);color:#fff;font-size:11.5px;display:grid; place-items:center;border-radius:50%;} .prose{font-size:17px;line-height:1.95;} .prose h2{font-size:25px;color:var(--green-800);margin:44px 0 16px; padding-left:16px;border-left:4px solid var(--gold);scroll-margin-top:100px;} .prose h3{font-size:19px;color:var(--green-700);margin:30px 0 10px;} .prose h4{font-size:17px;color:var(--green-700);margin:24px 0 8px;} .prose p{margin:0 0 1.2em;} .prose ul,.prose ol{margin:0 0 1.2em;padding-left:0;} .prose ul li{position:relative;padding-left:22px;margin-bottom:9px;} .prose ul li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px; background:var(--gold);border-radius:50%;} .prose ol{counter-reset:p;} .prose ol li{counter-increment:p;position:relative;padding-left:30px;margin-bottom:9px;} .prose ol li::before{content:counter(p) ".";position:absolute;left:0;color:var(--gold); font-weight:700;} .prose a{text-decoration:underline;text-underline-offset:3px;} .prose figure{margin:26px 0;} .prose blockquote{margin:26px 0;padding:18px 24px;background:var(--cream); border-left:3px solid var(--green-600);color:var(--ink-soft);} .prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;} .prose th,.prose td{padding:12px 16px;border:1px solid var(--line);text-align:left; vertical-align:top;} .prose thead th{background:var(--green-800);color:#fff;font-weight:500;} .related{margin:44px 0 0;padding-top:30px;border-top:1px solid var(--line);} .related h2{font-size:20px;color:var(--green-800);margin:0 0 16px;} .rel-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px; line-height:1.7;} .rel-list li:last-child{border-bottom:0;} .rel-list a{color:var(--green-700);} .rel-list a:hover{color:var(--gold);} /* ---------- clinic cards (homepage) ---------- */ .clinic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;} .clinic-card{background:#fff;border:1px solid var(--line);padding:32px 30px; box-shadow:var(--shadow-sm);} .clinic-card h3{font-size:23px;color:var(--green-800);margin:6px 0 18px;} .mini-hours{margin:18px 0 22px;padding-top:16px;border-top:1px solid var(--line);} .mini-hours li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px; font-size:14px;color:var(--ink-soft);padding:5px 0;} .mini-hours li span{color:var(--green-700);font-weight:600;} .doc-card-flat{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);} .doc-card-flat .doc-body{padding:28px 26px;} /* ---------- flat CTA (no photo) ---------- */ .cta-flat{background:var(--green-800);color:#fff;padding:76px 0;} .cta-flat .cta-inner{position:relative;} /* Existing grids: swap 1fr for minmax(0,1fr) so a wide child cannot widen the track and push the whole page sideways. */ .svc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));} .why-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));} .doc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));} .info-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));} .col-layout{grid-template-columns:minmax(0,1fr) 300px;} .cta-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);} .map-block{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);} @media (max-width:1024px){ .col-layout{grid-template-columns:minmax(0,1fr);} .clinic-grid{grid-template-columns:minmax(0,1fr);} .cta-inner{grid-template-columns:minmax(0,1fr);} .map-block{grid-template-columns:minmax(0,1fr);} .page-hero-flat h1,.hero-flat h1{font-size:32px;} } @media (max-width:720px){ .svc-sec h2{font-size:23px;} .post-head h1{font-size:26px;} .prose{font-size:16.5px;} .prose h2{font-size:22px;} .answer,.post-lead{font-size:16px;padding:15px 17px;} .contra li{grid-template-columns:minmax(0,1fr);gap:4px;} .page-hero-flat,.hero-flat{padding:calc(var(--header-h) + 40px) 0 42px;} .page-hero-flat h1,.hero-flat h1{font-size:27px;} .footer-grid{grid-template-columns:minmax(0,1fr);} } /* 10 pages of pagination in a non-wrapping flex row set the page scroll width to 510px at a 390px viewport. Measured with check_layout.py. */ .pager{flex-wrap:wrap;justify-content:center;} @media (max-width:520px){ .pager a,.pager span{min-width:38px;height:38px;padding:0 10px;font-size:13px;} } /* ---------- rewrite-only blocks ---------- */ .related-links{border-top:1px solid var(--line);} .related-links .rel-list a{font-weight:500;} /* Ordered steps with a lead-in term. Used where the rewrite gives a sequence the reader is meant to follow, rather than an unordered set. */ .numlist{counter-reset:n;margin:0 0 20px;} .numlist li{counter-increment:n;position:relative;padding:14px 0 14px 46px; border-bottom:1px solid var(--line);} .numlist li:last-child{border-bottom:0;} .numlist li::before{content:counter(n);position:absolute;left:0;top:15px;width:26px; height:26px;background:var(--green-700);color:#fff;font-size:13px;display:grid; place-items:center;border-radius:50%;} .numlist li strong{display:block;color:var(--green-800);font-size:16px; font-family:var(--serif);margin-bottom:4px;} .numlist li span{color:var(--ink-soft);font-size:14.5px;line-height:1.8;} .deflist{margin:0 0 20px;} .deflist dt{font-weight:600;color:var(--green-800);margin-top:14px;} .deflist dd{margin:4px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.85;} /* The base sheet only strips markers from