/* ============================================================ CANVAS Medical Clinic — Penang Refined stylesheet · theming via [data-theme] on ============================================================ */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } :root { /* tunable via Tweaks */ --accent-h: 70; /* hue for accent (champagne default-ish, low chroma) */ --accent-c: 0.018; /* chroma — keep low for metallic luxury */ --font-display: 'Cormorant Garamond', serif; --pad: 72px; --maxw: 1480px; /* DARK THEME (default) */ --bg:#070707; --panel:#101010; --surface:#0b0b0b; --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.05); --text:#ededed; --text-dim:#9c9c9c; --text-faint:#6f6f6f; --accent: oklch(0.80 var(--accent-c) var(--accent-h)); --accent-strong: oklch(0.86 var(--accent-c) var(--accent-h)); --invert-logo:0; --on-accent:#0a0a0a; --legib:rgba(7,7,7,0.72); --shadow:0 30px 80px -40px rgba(0,0,0,0.8); } html[data-theme="light"] { --bg:#f5f3ef; --panel:#ece9e3; --surface:#faf8f4; --border:rgba(20,18,15,0.13); --border-soft:rgba(20,18,15,0.07); --text:#1b1a18; --text-dim:#5d5950; --text-faint:#8b867c; --accent: oklch(0.55 calc(var(--accent-c) * 2.2) var(--accent-h)); --accent-strong: oklch(0.46 calc(var(--accent-c) * 2.4) var(--accent-h)); --invert-logo:1; --on-accent:#faf8f4; --legib:rgba(245,243,239,0.88); --shadow:0 30px 70px -45px rgba(60,55,45,0.45); } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--text); font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.65; overflow-x:hidden; transition:background .5s ease, color .5s ease; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; } ::selection { background:var(--accent); color:var(--on-accent); } /* ---------- custom cursor (fine pointers only) ---------- */ #cur, #cur-r { display:none; } @media (pointer:fine) { html[data-cursor="on"] body { cursor:none; } html[data-cursor="on"] #cur { display:block; position:fixed; width:5px; height:5px; background:var(--text); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .15s; mix-blend-mode:difference; } html[data-cursor="on"] #cur-r { display:block; position:fixed; width:30px; height:30px; border:1px solid color-mix(in srgb, var(--text) 28%, transparent); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .3s,height .3s,border-color .3s; } html[data-cursor="on"] a, html[data-cursor="on"] button, html[data-cursor="on"] .dot, html[data-cursor="on"] .faq-q, html[data-cursor="on"] select, html[data-cursor="on"] input { cursor:none; } } /* ---------- focus accessibility ---------- */ :focus-visible { outline:2px solid var(--accent-strong); outline-offset:3px; } .skip-link { position:fixed; top:-60px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:12px 22px; z-index:9000; font-size:11px; letter-spacing:.18em; text-transform:uppercase; transition:top .3s; text-decoration:none; border-radius:2px; } .skip-link:focus { top:14px; } /* ============================== NAV ============================== */ nav { position:fixed; top:0; left:0; right:0; z-index:600; padding:22px var(--pad); display:flex; align-items:center; justify-content:space-between; transition:padding .4s, background .4s, border-color .4s; border-bottom:1px solid transparent; } nav.scrolled { padding:14px var(--pad); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(22px) saturate(1.1); border-bottom-color:var(--border); } .nav-logo { display:flex; align-items:center; z-index:2; } .nav-logo img { width:172px; height:auto; filter:invert(var(--invert-logo)); transition:filter .5s; } .nav-links { position:absolute; left:50%; transform:translateX(-50%); display:none; gap:38px; list-style:none; } .nav-links a { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; transition:color .3s; white-space:nowrap; position:relative; padding:4px 0; } .nav-links a::after { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent-strong); transition:width .35s ease; } .nav-links a:hover { color:var(--text); } .nav-links a:hover::after { width:100%; } .nav-cta { display:flex; align-items:center; gap:18px; z-index:2; } .nav-book { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-accent); background:var(--text); padding:13px 26px; text-decoration:none; transition:opacity .3s, transform .3s; white-space:nowrap; } .nav-book:hover { opacity:.82; } .nav-toggle { display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:700; } .nav-toggle span { display:block; width:24px; height:1px; background:var(--text); transition:transform .35s, opacity .35s; } /* mobile menu overlay */ .mobile-menu { position:fixed; inset:0; z-index:650; background:var(--bg); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; } .mobile-menu.open { opacity:1; visibility:visible; } .mobile-menu-close { position:absolute; top:26px; right:var(--pad); width:40px; height:40px; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; } .mobile-menu-close span { position:absolute; width:24px; height:1px; background:var(--text); transition:background .3s; } .mobile-menu-close span:first-child { transform:rotate(45deg); } .mobile-menu-close span:last-child { transform:rotate(-45deg); } .mobile-menu-close:hover span { background:var(--accent-strong); } .mobile-menu a { font-family:var(--font-display); font-size:34px; font-weight:300; color:var(--text); text-decoration:none; padding:10px 0; letter-spacing:.01em; transition:color .3s; } .mobile-menu a:hover { color:var(--accent-strong); } .mobile-menu .mm-book { margin-top:24px; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; background:var(--text); color:var(--on-accent); padding:15px 38px; } .mobile-menu .mm-meta { margin-top:30px; font-size:11px; letter-spacing:.1em; color:var(--text-faint); text-align:center; line-height:2; } /* ============================== HERO ============================== */ #hero { min-height:100svh; padding:150px var(--pad) 88px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; } .hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 55% 55% at 72% 30%, color-mix(in srgb,var(--text) 3%,transparent) 0%, transparent 60%), var(--bg); } .hero-photo { position:absolute; inset:0; opacity:.16; pointer-events:none; } .hero-photo image-slot { width:100%; height:100%; } html[data-theme="light"] .hero-photo { opacity:.22; } .hero-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85; } .hero-svg line, .hero-svg circle { stroke:color-mix(in srgb,var(--text) 7%,transparent); } .hero-svg .acc { stroke:color-mix(in srgb,var(--accent-strong) 30%,transparent); } .hero-svg text { fill:color-mix(in srgb,var(--text) 7%,transparent); } .hero-inner { position:relative; width:100%; max-width:var(--maxw); margin:0 auto; z-index:2; } .hero-eyebrow { font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--text-dim); margin-bottom:22px; display:flex; align-items:center; gap:12px; opacity:0; animation:up .8s ease .2s forwards; } .hero-eyebrow::before { content:''; width:26px; height:1px; background:var(--accent-strong); } .hero-h1 { font-family:var(--font-display); font-size:clamp(42px,5.8vw,88px); font-weight:300; line-height:1.05; letter-spacing:-.012em; margin-bottom:48px; opacity:0; animation:up .9s ease .35s forwards; display:grid; grid-template-columns:1fr 1fr; gap:0 48px; align-items:end; } .hero-h1 span { display:block; padding-bottom:18px; border-bottom:1px solid color-mix(in srgb,var(--accent-strong) 35%,transparent); } .hero-h1 em { font-style:italic; color:var(--accent-strong); } .hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:48px; opacity:0; animation:up .9s ease .5s forwards; } .hero-desc { font-size:14px; line-height:1.95; letter-spacing:.02em; color:var(--text-dim); max-width:340px; } .hero-btns { display:flex; align-items:center; gap:24px; flex-shrink:0; } .btn-fill { display:inline-block; padding:15px 34px; background:var(--text); color:var(--on-accent); font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; transition:opacity .3s, transform .3s; white-space:nowrap; border:none; cursor:pointer; } .btn-fill:hover { opacity:.82; } .btn-line { display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; transition:color .3s; white-space:nowrap; background:none; border:none; cursor:pointer; } .btn-line:hover { color:var(--text); } .btn-line span.bar { display:inline-block; width:26px; height:1px; background:currentColor; transition:width .3s; } .btn-line:hover span.bar { width:42px; } .hero-badge { position:absolute; top:50%; right:0; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; animation:fadeIn 1s ease .8s forwards; } .hero-badge-line { width:1px; height:54px; background:linear-gradient(to bottom,transparent,var(--accent-strong),transparent); } .hero-badge-text { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-faint); writing-mode:vertical-rl; } /* hero watermark logo */ .hero-watermark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(110vw, 1300px); height:auto; opacity:0.06; pointer-events:none; z-index:1; filter:invert(0); animation:fadeIn 1.8s ease .3s both; } html[data-theme="light"] .hero-watermark { filter:invert(0); opacity:0.05; } /* hero watermark logo */ .hero-watermark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(55vw, 600px); height:auto; opacity:0.06; pointer-events:none; z-index:1; filter:invert(0); animation:fadeIn 1.8s ease .3s both; } html[data-theme="light"] .hero-watermark { filter:invert(0); opacity:0.05; } /* hero model image */ .hero-model-img { position:absolute; right:0; bottom:0; height:96%; width:auto; max-width:52%; object-fit:contain; object-position:bottom right; pointer-events:none; z-index:1; animation:heroModelIn 1.2s cubic-bezier(.16,.84,.34,1) .4s both; } @keyframes heroModelIn { from { opacity:0; transform:translateX(60px) scale(.97); } to { opacity:1; transform:translateX(0) scale(1); } } @media (prefers-reduced-motion:reduce) { .hero-model-img { animation:none; } } @media (max-width:760px) { .hero-model-img { height:70%; max-width:65%; opacity:.35; } } @media (max-width:480px) { .hero-model-img { display:none; } } html[data-hero="centered"] #hero { justify-content:center; text-align:center; } html[data-hero="centered"] .hero-eyebrow { justify-content:center; } html[data-hero="centered"] .hero-eyebrow::before { display:none; } html[data-hero="centered"] .hero-bottom { flex-direction:column; align-items:center; gap:34px; } html[data-hero="centered"] .hero-desc { text-align:center; max-width:440px; } html[data-hero="centered"] .hero-badge { display:none; } /* hero variant: split (image panel right) */ html[data-hero="split"] #hero { justify-content:center; } html[data-hero="split"] .hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; } html[data-hero="split"] .hero-photo { display:none; } html[data-hero="split"] .hero-badge { display:none; } .hero-split-img { display:none; } html[data-hero="split"] .hero-split-img { display:block; aspect-ratio:4/5; border:1px solid var(--border); } html[data-hero="split"] .hero-split-img image-slot { width:100%; height:100%; } html[data-hero="split"] .hero-h1 { margin-bottom:40px; } /* ============================== TICKER ============================== */ .ticker { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; background:var(--surface); } .ticker-track { display:flex; width:max-content; animation:ticker 38s linear infinite; } .ticker:hover .ticker-track { animation-play-state:paused; } .ticker-item { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); padding:0 30px; white-space:nowrap; display:flex; align-items:center; gap:30px; } .ticker-item::after { content:'◇'; font-size:8px; color:var(--accent-strong); } /* ============================== SECTIONS ============================== */ .section { padding:104px var(--pad); } .section-inner { max-width:var(--maxw); margin:0 auto; } .section.dark { background:var(--panel); } .sec-label { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; display:flex; align-items:center; gap:14px; } .sec-label::before { content:''; width:20px; height:1px; background:var(--accent-strong); flex-shrink:0; } .sec-title { font-family:var(--font-display); font-size:clamp(36px,4.4vw,58px); font-weight:300; line-height:1.06; letter-spacing:-.006em; } .sec-title em { font-style:italic; color:var(--accent-strong); } /* ============================== SERVICES ============================== */ .services-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:58px; gap:48px; } .services-intro { font-size:14px; line-height:1.95; letter-spacing:.02em; color:var(--text-dim); max-width:340px; flex-shrink:0; } .grid-svc { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--border); border-top:1px solid var(--border); } .t-card { border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:40px 32px 36px; transition:background .35s; position:relative; overflow:hidden; display:flex; flex-direction:column; } .t-card:hover { background:color-mix(in srgb,var(--text) 2.5%,transparent); } .t-card.cta { justify-content:center; background:color-mix(in srgb,var(--accent-strong) 7%,transparent); } .t-icon { width:38px; height:38px; margin-bottom:26px; } .t-icon * { stroke:var(--text-dim); } .t-icon .acc { stroke:var(--accent-strong); } .t-num { font-size:11px; letter-spacing:.14em; color:var(--text-faint); margin-bottom:10px; } .t-name { font-family:var(--font-display); font-size:23px; font-weight:300; margin-bottom:12px; line-height:1.1; } .t-desc { font-size:13px; line-height:1.85; letter-spacing:.01em; color:var(--text-dim); margin-bottom:22px; flex-grow:1; } .t-link { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-strong); text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:gap .3s; align-self:flex-start; } .t-card:hover .t-link { gap:14px; } .t-link::after { content:'→'; } .t-card.cta .t-name { font-size:26px; margin-bottom:16px; } .t-card.cta .btn-fill { align-self:flex-start; } /* ============================== PHILOSOPHY ============================== */ .phil-wrap { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .phil-box { border:1px solid var(--border); padding:60px 52px; position:relative; background:var(--surface); } .phil-corner { position:absolute; width:16px; height:16px; } .phil-corner.tl { top:-1px; left:-1px; border-top:1px solid var(--accent-strong); border-left:1px solid var(--accent-strong); } .phil-corner.tr { top:-1px; right:-1px; border-top:1px solid var(--accent-strong); border-right:1px solid var(--accent-strong); } .phil-corner.bl { bottom:-1px; left:-1px; border-bottom:1px solid var(--accent-strong); border-left:1px solid var(--accent-strong); } .phil-corner.br { bottom:-1px; right:-1px; border-bottom:1px solid var(--accent-strong); border-right:1px solid var(--accent-strong); } .phil-box blockquote { font-family:var(--font-display); font-size:25px; font-style:italic; font-weight:300; line-height:1.6; color:var(--text); } .phil-box cite { display:block; margin-top:26px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--text-faint); font-style:normal; } .phil-text .sec-title { margin-bottom:28px; } .phil-body { font-size:14px; line-height:2; letter-spacing:.02em; color:var(--text-dim); margin-bottom:16px; max-width:520px; } .stats-row { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--border); border-top:1px solid var(--border); margin-top:46px; } .stat { border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 20px; } .stat-n { font-family:var(--font-display); font-size:40px; font-weight:300; color:var(--text); line-height:1; margin-bottom:8px; } .stat-l { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); } /* ============================== TEAM ============================== */ .team-head { margin-bottom:54px; } .team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .team-portrait { width:100%; aspect-ratio:3/4; border:1px solid var(--border); margin-bottom:20px; overflow:hidden; } .team-portrait image-slot { width:100%; height:100%; } .team-role { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:7px; } .team-name { font-family:var(--font-display); font-size:20px; font-weight:300; margin-bottom:7px; } .team-cert { font-size:11px; letter-spacing:.04em; color:var(--accent-strong); margin-bottom:11px; } .team-bio { font-size:12px; line-height:1.85; letter-spacing:.01em; color:var(--text-dim); } /* ============================== LOCATION ============================== */ #location { padding:128px var(--pad); background:var(--panel); } .location-wrap { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:var(--maxw); margin:0 auto; } .location-map { border:1px solid var(--border); aspect-ratio:4/3; position:relative; background:var(--surface); overflow:hidden; } .location-map image-slot { position:absolute; inset:0; width:100%; height:100%; opacity:.5; } .location-map-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .location-map-svg .stroke { stroke:color-mix(in srgb,var(--text) 9%,transparent); } .location-map-svg .pin { fill:var(--accent-strong); } .location-map-svg .ring { stroke:color-mix(in srgb,var(--accent-strong) 35%,transparent); fill:none; } .location-map-svg text { fill:color-mix(in srgb,var(--text) 32%,transparent); } .location-info .sec-title { margin-bottom:28px; } .location-detail { display:flex; flex-direction:column; border-top:1px solid var(--border); margin-top:38px; } .loc-row { display:flex; gap:24px; padding:20px 0; border-bottom:1px solid var(--border); align-items:flex-start; } .loc-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); min-width:74px; flex-shrink:0; padding-top:3px; } .loc-value { font-size:13.5px; letter-spacing:.01em; line-height:1.7; color:var(--text); } .loc-value a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); transition:border-color .3s; } .loc-value a:hover { border-color:var(--accent-strong); } /* ============================== GALLERY ============================== */ .gallery-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:46px; gap:40px; } .gallery-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:280px 280px; gap:6px; } .g-item { border:1px solid var(--border); position:relative; overflow:hidden; } .g-item:first-child { grid-row:1/3; } .g-item image-slot { width:100%; height:100%; } .g-label { position:absolute; bottom:0; left:0; right:0; padding:18px; background:linear-gradient(to top,rgba(0,0,0,0.7),transparent); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:0; transition:opacity .35s; pointer-events:none; z-index:3; } .g-item:hover .g-label { opacity:1; } /* ============================== TESTIMONIALS ============================== */ .testi-wrap { max-width:820px; margin:0 auto; text-align:center; } .testi-wrap .sec-label { justify-content:center; } .testi-wrap .sec-label::before { display:none; } .testi-wrap .sec-title { margin-bottom:52px; } .testi-q { font-family:var(--font-display); font-size:72px; color:color-mix(in srgb,var(--accent-strong) 22%,transparent); line-height:.5; display:block; margin-bottom:30px; } .testi-stage { position:relative; overflow:hidden; } .testi-item { position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .65s ease, transform .65s ease; pointer-events:none; display:flex; flex-direction:column; align-items:center; } .testi-item.active { opacity:1; transform:translateY(0); pointer-events:auto; position:relative; } .testi-item.leaving { opacity:0; transform:translateY(-14px); position:absolute; inset:0; } .testi-text { font-family:var(--font-display); font-size:26px; font-style:italic; font-weight:300; line-height:1.62; color:var(--text); margin-bottom:28px; text-wrap:pretty; } .testi-author { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:5px; } .testi-detail { font-size:11px; letter-spacing:.04em; color:var(--text-faint); } .testi-nav { display:flex; justify-content:center; align-items:center; gap:24px; margin-top:44px; } .testi-arrow { background:none; border:1px solid var(--border); color:var(--text-dim); width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s, color .3s; flex-shrink:0; } .testi-arrow:hover { border-color:var(--accent-strong); color:var(--text); } .testi-arrow svg { width:14px; height:14px; } .dots { display:flex; justify-content:center; align-items:center; gap:9px; } .dot { width:18px; height:2px; background:var(--text-faint); border:none; padding:0; transition:background .3s, width .3s; cursor:pointer; } .dot.active { background:var(--accent-strong); width:30px; } /* ============================== FAQ ============================== */ .faq-wrap { display:grid; grid-template-columns:5fr 7fr; gap:90px; align-items:start; } .faq-list { border-top:1px solid var(--border); } .faq-item { border-bottom:1px solid var(--border); } .faq-q { width:100%; text-align:left; background:none; border:none; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:18px; font-family:'Jost',sans-serif; font-weight:300; font-size:15px; letter-spacing:.01em; color:var(--text); transition:color .3s; cursor:pointer; } .faq-q:hover { color:var(--accent-strong); } .faq-plus { font-size:20px; color:var(--text-dim); flex-shrink:0; transition:transform .3s, color .3s; line-height:1; } .faq-item.open .faq-plus { transform:rotate(45deg); color:var(--accent-strong); } .faq-a { font-size:13.5px; line-height:1.95; letter-spacing:.01em; color:var(--text-dim); max-height:0; overflow:hidden; transition:max-height .45s ease, padding .45s; } .faq-item.open .faq-a { max-height:280px; padding-bottom:24px; } /* ============================== BOOK ============================== */ #book { padding:130px var(--pad); position:relative; overflow:hidden; } .book-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 45%, color-mix(in srgb,var(--accent-strong) 5%,transparent) 0%, transparent 65%), var(--bg); } .book-frame { position:absolute; inset:34px; border:1px solid var(--border-soft); pointer-events:none; } .bc { position:absolute; width:18px; height:18px; pointer-events:none; } .bc.tl { top:34px; left:34px; border-top:1px solid var(--accent-strong); border-left:1px solid var(--accent-strong); } .bc.tr { top:34px; right:34px; border-top:1px solid var(--accent-strong); border-right:1px solid var(--accent-strong); } .bc.bl { bottom:34px; left:34px; border-bottom:1px solid var(--accent-strong); border-left:1px solid var(--accent-strong); } .bc.br { bottom:34px; right:34px; border-bottom:1px solid var(--accent-strong); border-right:1px solid var(--accent-strong); } .book-inner { position:relative; max-width:560px; margin:0 auto; text-align:center; } .book-eye { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-dim); margin-bottom:18px; } .book-title { font-family:var(--font-display); font-size:clamp(40px,5vw,66px); font-weight:300; line-height:1.04; margin-bottom:14px; } .book-title em { font-style:italic; color:var(--accent-strong); } .book-sub { font-size:13.5px; line-height:1.9; letter-spacing:.02em; color:var(--text-dim); margin-bottom:42px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; margin-bottom:8px; text-align:left; } .f-field { display:flex; flex-direction:column; gap:8px; } .f-field.full { grid-column:1/-1; } .f-field label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); } .f-field input, .f-field select { background:color-mix(in srgb,var(--text) 3%,transparent); border:none; border-bottom:1px solid var(--border); padding:12px 2px; color:var(--text); font-family:'Jost',sans-serif; font-size:14px; letter-spacing:.02em; outline:none; transition:border-color .3s; -webkit-appearance:none; border-radius:0; width:100%; } .f-field input::placeholder { color:var(--text-faint); } .f-field input:focus, .f-field select:focus { border-bottom-color:var(--accent-strong); } .f-field select option { background:var(--panel); color:var(--text); } .f-field.invalid input, .f-field.invalid select { border-bottom-color:#d9534f; } .f-err { font-size:10px; letter-spacing:.04em; color:#d9534f; min-height:0; opacity:0; transition:opacity .25s; } .f-field.invalid .f-err { opacity:1; } .btn-submit { width:100%; margin-top:22px; padding:17px; background:var(--text); color:var(--on-accent); font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; border:none; cursor:pointer; transition:opacity .3s; display:flex; align-items:center; justify-content:center; gap:10px; } .btn-submit:hover { opacity:.85; } .btn-submit svg { width:15px; height:15px; } .form-note { margin-top:16px; font-size:11px; letter-spacing:.03em; color:var(--text-faint); } .form-success { display:none; flex-direction:column; align-items:center; gap:18px; padding:30px 0; } .form-success.show { display:flex; animation:fadeIn .5s ease; } .form-success .fs-icon { width:54px; height:54px; border:1px solid var(--accent-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--accent-strong); font-size:24px; } .form-success p { font-size:14px; color:var(--text-dim); max-width:380px; line-height:1.8; } /* ============================== FOOTER ============================== */ #contact { padding:88px var(--pad); border-top:1px solid var(--border); display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px; background:var(--panel); } .contact-logo img { width:160px; height:auto; margin-bottom:18px; filter:invert(var(--invert-logo)); } .contact-tag { font-size:13px; line-height:1.9; letter-spacing:.02em; color:var(--text-dim); max-width:230px; } .c-col h4 { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-dim); margin-bottom:18px; } .c-col p, .c-col a { display:block; font-size:13px; line-height:2.1; letter-spacing:.02em; color:var(--text-faint); text-decoration:none; transition:color .3s; } .c-col a:hover { color:var(--text); } .c-gap { margin-top:20px; } footer { padding:20px var(--pad); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:var(--panel); gap:20px; flex-wrap:wrap; } footer p { font-size:11px; letter-spacing:.06em; color:var(--text-faint); } .foot-links { display:flex; gap:24px; } .foot-links a { font-size:11px; letter-spacing:.06em; color:var(--text-faint); text-decoration:none; transition:color .3s; } .foot-links a:hover { color:var(--text); } /* ---------- floating whatsapp ---------- */ .fab { position:fixed; right:24px; bottom:24px; z-index:550; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); text-decoration:none; transition:transform .3s; transform:translateY(120px); } .fab.show { transform:translateY(0); } .fab:hover { transform:scale(1.06); } .fab svg { width:28px; height:28px; } /* ============================== ANIMATIONS ============================== */ @keyframes up { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} } .reveal { opacity:0; transform:translateY(24px); transition:opacity .85s ease, transform .85s ease; } .reveal.on { opacity:1; transform:translateY(0); } .d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal { opacity:1 !important; transform:none !important; } .hero-eyebrow, .hero-h1, .hero-bottom, .hero-badge { opacity:1 !important; animation:none !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px) { :root { --pad:48px; } .grid-svc { grid-template-columns:repeat(2,1fr); } .team-grid { grid-template-columns:repeat(2,1fr); gap:32px 24px; } } @media (max-width:920px) { :root { --pad:40px; } .nav-links { display:none; } .nav-book { display:none; } .nav-toggle { display:flex; } .phil-wrap { grid-template-columns:1fr; gap:48px; } .location-wrap { grid-template-columns:1fr; gap:48px; } html[data-hero="split"] .hero-inner { grid-template-columns:1fr; gap:40px; } html[data-hero="split"] .hero-split-img { display:none; } .faq-wrap { grid-template-columns:1fr; gap:40px; } .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,200px); } .gallery-grid .g-item:first-child { grid-row:1/2; grid-column:1/3; } #contact { grid-template-columns:1fr 1fr; gap:44px 40px; } #contact .contact-block { grid-column:1/3; } .section { padding:96px var(--pad); } #location, #book { padding:96px var(--pad); } } @media (max-width:620px) { :root { --pad:24px; } body { font-size:14px; } #hero { padding:130px var(--pad) 64px; } .hero-bottom { flex-direction:column; align-items:flex-start; gap:30px; } .hero-btns { flex-direction:column; align-items:flex-start; gap:16px; width:100%; } .hero-btns .btn-fill { width:100%; text-align:center; } .hero-badge { display:none; } .hero-desc { max-width:none; } .services-head { flex-direction:column; align-items:flex-start; gap:22px; } .grid-svc { grid-template-columns:1fr; } .gallery-head { flex-direction:column; align-items:flex-start; gap:20px; } .gallery-grid { grid-template-columns:1fr; grid-template-rows:none; } .gallery-grid .g-item, .gallery-grid .g-item:first-child { grid-row:auto; grid-column:auto; aspect-ratio:4/3; } .g-label { opacity:1; } .stats-row { grid-template-columns:1fr; } #contact { grid-template-columns:1fr; } #contact .contact-block { grid-column:auto; } footer { flex-direction:column; align-items:flex-start; gap:14px; } .phil-box { padding:44px 30px; } .phil-box blockquote { font-size:21px; } .form-grid { grid-template-columns:1fr; } .section { padding:80px var(--pad); } #location, #book { padding:80px var(--pad); } .testi-text { font-size:20px; } } /* ============================================================ TREATMENT MENU (stacked modality blocks + injectables index) ============================================================ */ .modality-stack { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; } .mod-block { border:1px solid var(--border); background:var(--surface); padding:58px 54px; display:grid; grid-template-columns:0.82fr 1.18fr; gap:56px; align-items:center; transition:background .35s; min-height:340px; position:relative; overflow:hidden; } .mod-block:hover { background:color-mix(in srgb,var(--text) 2%,transparent); } .mb-icon { width:40px; height:40px; margin-bottom:22px; } .mb-icon * { stroke:var(--text-dim); } .mb-icon .acc { stroke:var(--accent-strong); } .mb-num { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; } .mb-name { font-family:var(--font-display); font-size:clamp(28px,3.2vw,42px); font-weight:300; line-height:1.04; margin-bottom:14px; letter-spacing:-.005em; } .mb-sub { font-size:14px; line-height:1.75; letter-spacing:.01em; color:var(--text-dim); max-width:380px; } .mb-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0 46px; border-top:1px solid var(--border); } .mb-item { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-soft); } .mb-item .nm { font-size:16px; letter-spacing:.005em; color:var(--text); } .mb-item small { color:var(--text-faint); font-size:11px; letter-spacing:.05em; white-space:nowrap; } .inj-block { border:1px solid var(--border); padding:58px 54px; background:var(--surface); margin-bottom:6px; } .inj-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; flex-wrap:wrap; } .inj-title { font-family:var(--font-display); font-size:clamp(28px,3.4vw,42px); font-weight:300; line-height:1.04; margin-top:6px; } .inj-sub { font-size:13px; line-height:1.85; letter-spacing:.01em; color:var(--text-dim); max-width:400px; } .inj-grid { display:grid; grid-template-columns:repeat(4,1fr); column-gap:48px; row-gap:0; } .inj-item { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft); } .inj-item .nm { font-size:14px; letter-spacing:.01em; color:var(--text); } .inj-item .tg { font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong); white-space:nowrap; padding:2px 7px; border:1px solid color-mix(in srgb,var(--accent-strong) 32%,transparent); border-radius:2px; } .svc-cta { border:1px solid var(--border); background:color-mix(in srgb,var(--accent-strong) 7%,transparent); padding:36px 54px; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; } .svc-cta h3 { font-family:var(--font-display); font-size:28px; font-weight:300; line-height:1.1; margin-bottom:6px; } .svc-cta p { font-size:13px; letter-spacing:.01em; color:var(--text-dim); max-width:480px; } @media (max-width:980px) { .mod-block { grid-template-columns:1fr; gap:34px; padding:46px 40px; min-height:0; align-items:start; } .inj-block { padding:46px 40px; } .inj-grid { grid-template-columns:repeat(3,1fr); column-gap:38px; } } @media (max-width:760px) { .mb-list { grid-template-columns:1fr 1fr; gap:0 32px; } .inj-grid { grid-template-columns:repeat(2,1fr); column-gap:30px; } } @media (max-width:620px) { .mod-block { padding:38px 26px; } .inj-block { padding:38px 26px; } .mb-list { grid-template-columns:1fr; } .inj-grid { grid-template-columns:1fr; } .svc-cta { padding:30px 26px; } } /* ============================================================ IMAGE PLACEHOLDERS (awaiting real photos) ============================================================ */ .ph { width:100%; height:100%; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; overflow:hidden; background: radial-gradient(120% 120% at 50% 32%, color-mix(in srgb,var(--accent-strong) 9%,transparent), transparent 62%), var(--surface); } .ph-mark { width:62px; height:62px; color:var(--accent-strong); opacity:.5; flex:none; } .ph-name { font-family:var(--font-display); font-weight:300; font-size:clamp(18px,2vw,23px); line-height:1.1; letter-spacing:.01em; color:var(--text-dim); } .ph-cap { font-family:'Jost', sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); } /* decorative-only placeholders (hero backdrop, location under map svg) */ .ph-bare { background:transparent; } .ph-bare .ph-mark { opacity:.6; } .ph-loc { opacity:.5; } /* uploaded slot photos (replace placeholders, fill their container) */ .slot-img { width:100%; height:100%; object-fit:cover; display:block; } .hero-photo .slot-img, .hero-split-img .slot-img { position:absolute; inset:0; } /* Google Map embed in the location section */ .location-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } html[data-theme="dark"] .location-map iframe { filter:grayscale(.2) contrast(1.05) brightness(.95); } /* ---- Injectables model ---- */ .inj-head { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:32px 48px; margin-bottom:36px; flex-wrap:nowrap; } .inj-model-wrap { width:220px; flex-shrink:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; pointer-events:none; opacity:0; transform:translateX(40px); transition:opacity 1.6s cubic-bezier(.22,1,.36,1), transform 1.8s cubic-bezier(.16,.84,.34,1); will-change:opacity,transform; } .inj-model-wrap.visible { opacity:1; transform:translateX(0); } .inj-model { width:100%; height:auto; max-height:340px; object-fit:contain; object-position:bottom center; display:block; } @media (prefers-reduced-motion:reduce) { .inj-model-wrap { transition:none; opacity:1 !important; transform:none !important; } } @media (max-width:480px) { .inj-head { grid-template-columns:1fr 1fr; } .inj-model-wrap { display:none; } } @media (max-width:480px) { .inj-head { grid-template-columns:1fr; } } /* ============================================================ UNIFIED TREATMENT-CARD MODEL LAYOUT (all blocks identical) ============================================================ */ .has-model, .has-model-us, .has-model-mf, .has-model-laser, .has-model-rw, .has-model-sh, .has-model-ba, .has-model-cs, .has-model-mw, .has-model-sc { display:grid; grid-template-columns:1fr; padding:0; overflow:hidden; } .has-model .mb-info, .has-model-us .mb-info, .has-model-mf .mb-info, .has-model-laser .mb-info, .has-model-rw .mb-info, .has-model-sh .mb-info, .has-model-ba .mb-info, .has-model-cs .mb-info, .has-model-mw .mb-info, .has-model-sc .mb-info { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:48px; padding:40px 54px; overflow:hidden; border-bottom:1px solid var(--border-soft); } .mb-info-text { flex:1; min-width:0; padding-right:48px; } .rf-model-wrap, .us-model-wrap, .mf-model-wrap, .laser-model-wrap, .rw-model-wrap, .sh-model-wrap, .ba-model-wrap, .cs-model-wrap, .mw-model-wrap, .sc-model-wrap { flex-shrink:0; height:196px; max-width:56%; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; pointer-events:none; } .rf-model, .us-model, .mf-model, .laser-model, .rw-model, .sh-model, .ba-model, .cs-model, .mw-model, .sc-model { height:196px; width:auto; max-width:100%; object-fit:contain; object-position:center; display:block; opacity:0; transform:translateX(48px); transition:opacity 1.6s cubic-bezier(.22,1,.36,1), transform 1.8s cubic-bezier(.16,.84,.34,1); will-change:opacity,transform; } .rf-model-wrap.visible .rf-model, .us-model-wrap.visible .us-model, .mf-model-wrap.visible .mf-model, .laser-model-wrap.visible .laser-model, .rw-model-wrap.visible .rw-model, .sh-model-wrap.visible .sh-model, .ba-model-wrap.visible .ba-model, .cs-model-wrap.visible .cs-model, .mw-model-wrap.visible .mw-model, .sc-model-wrap.visible .sc-model { opacity:1; transform:translateX(0); } .ba-model { border-radius:4px; } .has-model .mb-list, .has-model-us .mb-list, .has-model-mf .mb-list, .has-model-laser .mb-list, .has-model-rw .mb-list, .has-model-sh .mb-list, .has-model-ba .mb-list, .has-model-cs .mb-list, .has-model-mw .mb-list, .has-model-sc .mb-list { padding:28px 54px 44px; border-top:none; } @media (prefers-reduced-motion:reduce) { .rf-model, .us-model, .mf-model, .laser-model, .rw-model, .sh-model, .ba-model, .cs-model, .mw-model, .sc-model { transition:none; opacity:1 !important; transform:none !important; } } @media (max-width:600px) { .has-model .mb-info, .has-model-us .mb-info, .has-model-mf .mb-info, .has-model-laser .mb-info, .has-model-rw .mb-info, .has-model-sh .mb-info, .has-model-ba .mb-info, .has-model-cs .mb-info, .has-model-mw .mb-info, .has-model-sc .mb-info { flex-direction:column; align-items:flex-start; padding:46px 40px 30px; } .mb-info-text { padding-right:0; } .rf-model-wrap, .us-model-wrap, .mf-model-wrap, .laser-model-wrap, .rw-model-wrap, .sh-model-wrap, .ba-model-wrap, .cs-model-wrap, .mw-model-wrap, .sc-model-wrap { width:100%; max-width:100%; height:auto; align-self:auto; margin-top:12px; } .rf-model, .us-model, .mf-model, .laser-model, .rw-model, .sh-model, .ba-model, .cs-model, .mw-model, .sc-model { height:auto; max-height:260px; width:auto; max-width:90%; object-position:center; } .has-model .mb-list, .has-model-us .mb-list, .has-model-mf .mb-list, .has-model-laser .mb-list, .has-model-rw .mb-list, .has-model-sh .mb-list, .has-model-ba .mb-list, .has-model-cs .mb-list, .has-model-mw .mb-list, .has-model-sc .mb-list { padding:30px 40px 46px; } } @media (max-width:480px) { .rf-model-wrap, .us-model-wrap, .mf-model-wrap, .laser-model-wrap, .rw-model-wrap, .sh-model-wrap, .ba-model-wrap, .cs-model-wrap, .mw-model-wrap, .sc-model-wrap { display:none; } }