/* * contact-page.css — "ติดต่อเรา" page template (page-contact.php). * Depends on inner-pages.css (shared .ip-* component vocabulary, incl. * .ip-eyebrow) and sitewide style.css tokens — both declared as deps * when this is enqueued, see iw_enqueue_assets() in functions.php. * Ported from `Wellness Website/contact-page-mockup.html`. */ /* ---------- hero flourish (Sep 2026, from contact-hero-redesign-preview.html): small curved-line + heart squiggle under the h1, prefixed .contact-hero- since it's a one-off decorative graphic unique to this page's hero (not part of the shared .ip-* vocabulary). */ .contact-hero-flourish{display:block;margin:14px 0 22px;width:140px;height:16px;} /* ---------- info + map ---------- */ .ip-info-section{ background: radial-gradient(ellipse 55% 45% at 90% 5%, rgba(249,214,223,0.38), transparent 70%), radial-gradient(ellipse 50% 40% at 5% 95%, rgba(200,162,172,0.22), transparent 70%), var(--white); } .ip-info-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;} .ip-info-heading{margin-bottom:36px;} .ip-info-heading h2{font-family:var(--font-th-display);font-size:clamp(1.5rem, 3vw, 2.1rem);font-weight:600;color:var(--heading-rose);} .ip-info-cards{display:flex;flex-direction:column;gap:20px;} .ip-info-card{ position:relative;display:flex;gap:18px;padding:26px;border-radius:22px;overflow:hidden; background:linear-gradient(145deg, var(--ip-blush-pale), var(--white)); border:1px solid rgba(200,162,172,0.3); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; } .ip-info-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(217,140,168,0.24), 0 0 0 1px rgba(212,175,55,0.14) inset; border-color:var(--heading-rose); } /* =================================================================== Visit Us card redesign (Sep 2026) — ported from `visit-us-redesign-preview.html`. Prefixed `.visit-card-` (not the bare `.icon-badge`/`.ring-outer`/`.ring-inner`/`.deco-dots`/`.spark` the mockup uses) since those bare names are already spoken for elsewhere: `.icon-badge` by `.service-card`/`.stat-cell--icon` in style.css, `.spark` by `.fab-stack`, and the whole dual-ring+halo+ deco-dots+spark *pattern* already exists once under its own `.promise-card-` prefix for why-inspire's "Our Promise" cards — same idea, deliberately separate names so editing one can never touch the other two. */ .visit-card-deco-dots{ position:absolute;top:-26px;right:-26px;width:100px;height:100px; border:1px dashed rgba(212,175,55,0.3);border-radius:50%; pointer-events:none; } .visit-card-deco-dots::before{ content:'';position:absolute;inset:12px;border:1px solid rgba(217,140,168,0.18);border-radius:50%; } .visit-card-badge{position:relative;width:60px;height:60px;flex-shrink:0;z-index:1;} .visit-card-ring-outer{ position:absolute;inset:0;border-radius:50%; border:1px dashed rgba(212,175,55,0.55); animation:visitCardSpin 14s linear infinite; } .ip-info-card:hover .visit-card-ring-outer{animation-duration:6s;} @keyframes visitCardSpin{to{transform:rotate(360deg);}} .visit-card-ring-inner{ position:absolute;inset:7px;border-radius:50%; background:linear-gradient(150deg, var(--blush-soft), var(--white)); border:1px solid rgba(165,79,98,0.25); display:flex;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(200,162,172,0.25); animation:visitCardHalo 3.2s ease-in-out infinite; } @keyframes visitCardHalo{ 0%,100%{box-shadow:0 5px 14px rgba(200,162,172,0.25), 0 0 0 0 rgba(212,175,55,0.3);} 50%{box-shadow:0 5px 14px rgba(200,162,172,0.25), 0 0 0 7px rgba(212,175,55,0);} } .visit-card-badge svg{width:22px;height:22px;stroke:var(--heading-rose);fill:none;stroke-width:1.5;position:relative;z-index:2;} .visit-card-spark{ position:absolute;width:13px;height:13px;opacity:0; transition:opacity .4s ease, transform .4s ease; top:20px;right:36px;transform:scale(.5) rotate(-10deg); pointer-events:none;z-index:1; } .ip-info-card:hover .visit-card-spark{opacity:1;transform:scale(1) rotate(10deg);} .visit-card-spark svg path{fill:var(--gold);} @media (prefers-reduced-motion: reduce){ .visit-card-ring-outer,.visit-card-ring-inner{animation:none;} } .ip-info-card h3{font-family:var(--font-latin);font-size:.78rem;letter-spacing:.04em;color:var(--ip-mauve-deep);font-weight:600;margin-bottom:6px;position:relative;z-index:1;} .ip-info-card p{font-size:.98rem;color:var(--ip-ink);position:relative;z-index:1;} .ip-info-card a{color:var(--heading-rose);text-decoration:none;} .ip-info-card a:hover{text-decoration:underline;} .ip-info-visual-col{display:flex;flex-direction:column;gap:20px;} .ip-map-frame{border-radius:26px;overflow:hidden;position:relative;min-height:220px;border:1px solid rgba(217,140,168,0.3);} .ip-map-frame iframe{display:block;width:100%;height:100%;min-height:220px;border:0;} /* ---------- social / reach band (dual-tone orbit ring) ---------- */ .ip-social-section{ background: radial-gradient(ellipse 55% 45% at 8% 10%, rgba(249,214,223,0.4), transparent 70%), radial-gradient(ellipse 50% 40% at 95% 90%, rgba(200,162,172,0.2), transparent 70%), var(--ip-pearl); text-align:center; } .ip-social-section .ip-section-heading{margin-bottom:48px;} /* Sep 2026: 5 cards now (Instagram added) — flex+wrap+justify-content: center instead of a straight CSS grid, so an odd count naturally centers its leftover last row (3 cards row 1, 2 cards centered row 2) instead of grid's default left-aligned gap. Tried a plain 5-column grid first: at this section's ~1120px max-width each card lands around ~200px wide, noticeably tighter than the 4-card mockup (~220px at a narrower 1000px wrap) with less room for the badge + 2-line label; 3-per-row reads more generous and the centered leftover row looks intentional rather than lopsided. */ .ip-social-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;} .ip-social-card{ position:relative;flex:0 1 calc(33.333% - 22px * 2 / 3);min-width:180px; padding:30px 18px;border-radius:22px;background:var(--white); border:1px solid rgba(200,162,172,0.25);text-decoration:none;color:var(--ip-ink); text-align:center;overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .ip-social-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(217,140,168,0.24);} /* =================================================================== Reach Us card redesign (Sep 2026) — ported from `reach-us-redesign-preview.html`. Prefixed `.reach-card-` for the same reason as `.visit-card-` above (see that block's comment) — a third, independently-named copy of the same dual-ring+halo+ deco-dots+spark component, deliberately not sharing state with `.visit-card-*` or `.promise-card-*` even though the CSS values are nearly identical, so a future tweak to one card type can't accidentally touch the other two. Replaces the single dashed "orbit ring" this section used before. */ .reach-card-deco-dots{ position:absolute;bottom:-24px;left:-24px;width:90px;height:90px; border:1px dashed rgba(212,175,55,0.25);border-radius:50%; pointer-events:none; } .reach-card-deco-dots::before{ content:'';position:absolute;inset:12px;border:1px solid rgba(217,140,168,0.16);border-radius:50%; } .reach-card-badge{position:relative;width:58px;height:58px;margin:0 auto 16px;z-index:1;} .reach-card-ring-outer{ position:absolute;inset:0;border-radius:50%; border:1px dashed rgba(212,175,55,0.55); animation:reachCardSpin 14s linear infinite; } .ip-social-card:hover .reach-card-ring-outer{animation-duration:6s;} @keyframes reachCardSpin{to{transform:rotate(360deg);}} .reach-card-ring-inner{ position:absolute;inset:7px;border-radius:50%; background:linear-gradient(150deg, var(--blush-soft), var(--white)); border:1px solid rgba(165,79,98,0.25); display:flex;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(200,162,172,0.25); animation:reachCardHalo 3.2s ease-in-out infinite; } @keyframes reachCardHalo{ 0%,100%{box-shadow:0 5px 14px rgba(200,162,172,0.25), 0 0 0 0 rgba(212,175,55,0.3);} 50%{box-shadow:0 5px 14px rgba(200,162,172,0.25), 0 0 0 7px rgba(212,175,55,0);} } .reach-card-badge svg{width:22px;height:22px;stroke:var(--heading-rose);fill:none;stroke-width:1.5;position:relative;z-index:2;} .reach-card-spark{ position:absolute;width:13px;height:13px;opacity:0; transition:opacity .4s ease, transform .4s ease; top:16px;right:16px;transform:scale(.5) rotate(-10deg); pointer-events:none;z-index:1; } .ip-social-card:hover .reach-card-spark{opacity:1;transform:scale(1) rotate(10deg);} .reach-card-spark svg path{fill:var(--gold);} @media (prefers-reduced-motion: reduce){ .reach-card-ring-outer,.reach-card-ring-inner{animation:none;} } .ip-social-card h4{font-family:var(--font-latin);font-weight:600;font-size:.95rem;color:var(--heading-rose);margin-bottom:4px;position:relative;z-index:1;} .ip-social-card span{font-size:.82rem;color:var(--ip-ink);opacity:.7;position:relative;z-index:1;} /* mobile carousel dots (Sep 2026) — hidden by default (desktop/tablet keep the centered flex-wrap grid above), shown inside @media(max-width:640px) below. Same pattern as the 3 earlier card sliders (why-inspire pillars/space-teaser, our-space gallery). */ .ip-reach-dots{display:none;} /* ---------- form ---------- */ .ip-form-section{ background: radial-gradient(ellipse 55% 45% at 90% 10%, rgba(249,214,223,0.36), transparent 70%), radial-gradient(ellipse 50% 40% at 5% 90%, rgba(200,162,172,0.2), transparent 70%), var(--white); } .ip-form-heading-wrap{max-width:680px;margin:0 auto;text-align:center;} .ip-form-heading-wrap .ip-section-heading{margin-bottom:12px;} .ip-form-heading-wrap > p{color:var(--ip-ink);opacity:.8;margin-bottom:44px;font-size:.98rem;} .ip-form-split{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:0.75fr 1.25fr;gap:36px;align-items:stretch;} .ip-form-panel{ background:linear-gradient(160deg, var(--ip-blush-pale), var(--white)); border:1px solid rgba(217,140,168,0.28);border-radius:32px;padding:44px 36px; box-shadow:0 22px 55px rgba(200,162,172,0.26);text-align:left; } .ip-form-panel .ip-notice{ border-radius:16px;padding:16px 20px;margin-bottom:22px;font-size:.92rem;line-height:1.6; } .ip-form-panel .ip-notice.ip-notice-success{background:rgba(212,175,55,0.14);border:1px solid rgba(212,175,55,0.4);color:var(--ip-mauve-deep);} .ip-form-panel .ip-notice.ip-notice-error{background:rgba(165,79,98,0.1);border:1px solid rgba(165,79,98,0.35);color:var(--heading-rose);} /* field-row/field: shared grid. Used by the native fallback form's own markup, and also by Contact Form 7's markup IF the CF7 form content wraps its tags in the same `
` — see the ready-to-paste CF7 template provided alongside this theme, which does exactly that so both rendering paths look identical. */ .ip-form-panel .ip-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;} .ip-form-panel .ip-field{display:flex;flex-direction:column;gap:6px;} .ip-form-panel .ip-field.ip-full{grid-column:1 / -1;} .ip-form-panel label{font-family:var(--font-latin);font-size:.78rem;color:var(--ip-mauve-deep);font-weight:600;} .ip-form-panel input[type="text"], .ip-form-panel input[type="tel"], .ip-form-panel input[type="email"], .ip-form-panel textarea{ font-family:var(--font-th-display);font-size:.95rem;padding:13px 16px;border-radius:14px; border:1px solid rgba(200,162,172,0.4);background:var(--white);color:var(--ip-ink); outline:none;width:100%; transition:border-color .3s ease, box-shadow .3s ease; } .ip-form-panel input::placeholder, .ip-form-panel textarea::placeholder{color:var(--heading-rose-mid);opacity:.65;} .ip-form-panel input:focus, .ip-form-panel textarea:focus{border-color:var(--heading-rose);box-shadow:0 0 0 4px rgba(217,140,168,0.16);} .ip-form-panel textarea{resize:vertical;min-height:110px;} /* ---------- PDPA heart-checkbox ---------- Styled directly on the itself (appearance:none + a heart SVG as background-image, swapped on :checked) rather than a sibling-selector box, so the exact same rule works whether it's the native fallback form's plain `