| Server IP : 62.72.47.131 / Your IP : 216.73.217.34 Web Server : Apache/2.4.66 (Debian) System : Linux 975cdb959a49 5.14.0-611.55.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May 19 15:19:29 EDT 2026 x86_64 User : ( 501) PHP Version : 8.3.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/html/wp-content/themes/medicate/assets/css/ |
Upload File : |
/*
* Custom CSS — Keeratipon Urology Clinic
* Aligned with Stitch "Breathable Clinic" design (see stitch-keeratiponUroClinic/stitch/).
*/
/* =============================================
CSS Variable Overrides — editorial teal system
============================================= */
:root {
--primary-color: #004e47;
--primary-dark-color: #00332e;
--primary-light-color: rgba(157, 241, 241, 0.35);
--accent-color: #00696b;
--dark-color: #171d1d;
--secondary-color: #3e4947;
--grey-color: #eff5f4;
--grey-border: rgba(190, 201, 198, 0.4);
--white-color: #ffffff;
--shadow-sm: 0 2px 12px rgba(23, 29, 29, 0.05);
--shadow-md: 0 16px 48px -12px rgba(23, 29, 29, 0.08);
--shadow-lg: 0 32px 64px -12px rgba(23, 29, 29, 0.06);
--shadow-cta: 0 8px 24px rgba(0, 78, 71, 0.22);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 24px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--body-fonts: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--title-fonts: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--label-fonts: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* =============================================
Global Base
============================================= */
*, *::before, *::after {
box-sizing: border-box;
}
body {
background: #f5fafa;
color: var(--secondary-color);
font-family: var(--body-fonts);
font-size: 15px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--title-fonts);
color: var(--dark-color);
letter-spacing: -0.02em;
font-weight: 700;
}
a {
transition: var(--transition);
}
img {
transition: var(--transition);
}
/* =============================================
Page Loader
============================================= */
#pt-loading {
background: linear-gradient(135deg, #004e47 0%, #00332e 55%, #00696b 100%);
}
#pt-loading img {
filter: brightness(0) invert(1);
height: 70px;
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.75; transform: scale(0.96); }
}
/* =============================================
Header — Top Bar
============================================= */
header#pt-header .pt-top-header {
background: linear-gradient(90deg, #00332e 0%, #004e47 50%, #0d5c54 100%);
font-size: 13px;
letter-spacing: 0.02em;
padding-top: 10px;
padding-bottom: 10px;
}
header#pt-header .pt-top-header .pt-header-contact ul li {
border-color: rgba(255, 255, 255, 0.12);
padding: 9px 18px;
transition: var(--transition);
}
header#pt-header .pt-top-header .pt-header-contact ul li:hover {
background: rgba(255, 255, 255, 0.08);
}
header#pt-header .pt-top-header ul li a:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--white-color);
}
/* =============================================
Header — Main Navbar
============================================= */
header#pt-header {
box-shadow: none;
}
header#pt-header .pt-bottom-header {
min-height: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
header#pt-header .pt-bottom-header .navbar {
padding-top: 14px;
padding-bottom: 14px;
align-items: center;
}
header#pt-header .pt-bottom-header .navbar .navbar-brand {
line-height: 1.2;
padding: 4px 0;
display: flex;
align-items: center;
}
header#pt-header .pt-bottom-header .navbar .navbar-brand img {
height: auto;
max-height: 52px;
width: auto;
max-width: 220px;
object-fit: contain;
transition: var(--transition);
}
header#pt-header .pt-bottom-header .navbar .navbar-brand:hover img {
opacity: 0.85;
}
header#pt-header .pt-bottom-header .navbar .navbar-nav li {
line-height: 1.35;
margin-right: 24px;
padding-top: 8px;
padding-bottom: 8px;
font-family: var(--title-fonts);
letter-spacing: -0.01em;
}
header#pt-header .pt-bottom-header .navbar .navbar-nav li a {
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.06em;
position: relative;
padding-bottom: 2px;
}
/* Animated underline on nav links */
header#pt-header .pt-bottom-header .navbar .navbar-nav li a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
border-radius: 2px;
transition: width 0.3s ease;
}
header#pt-header .pt-bottom-header .navbar .navbar-nav li a:hover::after,
header#pt-header .pt-bottom-header .navbar .navbar-nav li.current-menu-item a::after,
header#pt-header .pt-bottom-header .navbar .navbar-nav li.current_page_item a::after {
width: 100%;
}
/* Sub-menu */
header#pt-header .pt-bottom-header .navbar .navbar-nav li:hover .sub-menu {
border-radius: var(--radius-sm);
border-top: 3px solid var(--primary-color);
box-shadow: var(--shadow-md);
overflow: hidden;
top: calc(100% - 4px);
}
header#pt-header .pt-bottom-header .navbar .navbar-nav li .sub-menu li a {
padding: 8px 20px;
font-size: 13px;
transition: var(--transition);
}
header#pt-header .pt-bottom-header .navbar .navbar-nav li .sub-menu li a:hover {
background: var(--primary-light-color);
color: var(--primary-color) !important;
padding-left: 26px;
}
/* Fixed header — stays on top when scrolling */
header#pt-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: box-shadow 0.3s ease;
}
/* Push page content down so it isn't hidden behind the fixed header (+ extra breathing room) */
body {
padding-top: 108px;
}
@media (max-width: 991px) {
body {
padding-top: 88px;
}
}
header#pt-header.pt-header-sticky,
header#pt-header.pt-header-default .pt-bottom-header.pt-header-sticky {
box-shadow: var(--shadow-md);
}
/* =============================================
Header — CTA Button "นัดหมายแพทย์"
============================================= */
header#pt-header.pt-header-default .pt-btn-container .pt-button,
.pt-btn-container .pt-button {
background: linear-gradient(135deg, var(--primary-color) 0%, #00685f 100%);
border-radius: var(--radius-md);
padding: 10px 22px;
font-size: 13px;
letter-spacing: 0.02em;
box-shadow: var(--shadow-cta);
transition: var(--transition);
}
header#pt-header.pt-header-default .pt-btn-container .pt-button:hover,
.pt-btn-container .pt-button:hover {
background: linear-gradient(135deg, #00685f 0%, var(--primary-color) 100%);
box-shadow: 0 12px 32px rgba(0, 78, 71, 0.28);
transform: translateY(-2px);
color: var(--white-color);
}
/* Search icon */
header#pt-header.pt-header-default .pt-menu-search-block {
margin-left: 20px;
}
#pt-seacrh-btn {
font-size: 18px;
color: var(--secondary-color);
transition: var(--transition);
}
#pt-seacrh-btn:hover {
color: var(--primary-color);
}
/* =============================================
Breadcrumb / page hero — editorial photo + overlay
(Background: assets/img/kc-hero-breadcrumb.jpg)
============================================= */
.pt-breadcrumb {
position: relative;
overflow: hidden;
background-color: #dfeceb;
background-image: url('/wp-content/uploads/hero-banner.jpg');
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
/* height tracks image aspect ratio: 924/1640 = 56.34% of width */
min-height: 56.34vw;
display: block;
}
.pt-breadcrumb::before {
content: none;
}
.pt-breadcrumb::after {
content: none;
}
.pt-breadcrumb .container {
display: none;
}
@media (max-width: 768px) {
.pt-breadcrumb {
background-size: contain;
background-position: top center;
min-height: 56.34vw;
}
}
.pt-breadcrumb nav {
max-width: min(560px, 100%);
padding: 24px 28px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}
.pt-breadcrumb .pt-breadcrumb-title h1 {
color: var(--white-color);
font-family: var(--title-fonts);
font-size: clamp(2rem, 4.6vw, 4rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.96;
margin-bottom: 0.85rem;
text-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pt-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.pt-breadcrumb .breadcrumb:empty {
display: none;
}
.pt-breadcrumb .breadcrumb-item,
.pt-breadcrumb .breadcrumb-item a {
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.pt-breadcrumb .breadcrumb-item.active {
color: #ffffff;
}
.pt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.72);
}
/* =============================================
About page hero banner
Inspired by contemporary clinic landing pages with a calmer split layout.
============================================= */
/* =============================================
Buttons
============================================= */
.pt-button {
border-radius: var(--radius-md);
font-size: 13.5px;
letter-spacing: 0.02em;
background: linear-gradient(135deg, var(--primary-color), #00685f);
box-shadow: var(--shadow-cta);
transition: var(--transition);
}
.pt-button:hover,
.pt-button:focus {
background: linear-gradient(135deg, #00685f, var(--primary-color));
box-shadow: 0 12px 32px rgba(0, 78, 71, 0.28);
transform: translateY(-2px);
color: var(--white-color);
}
[type="submit"],
[type="button"] {
border-radius: var(--radius-md) !important;
background: linear-gradient(135deg, var(--primary-color), #00685f) !important;
box-shadow: var(--shadow-cta);
letter-spacing: 0.02em;
transition: var(--transition);
}
[type="submit"]:hover,
[type="button"]:hover {
background: linear-gradient(135deg, #00685f, var(--primary-color)) !important;
box-shadow: 0 12px 32px rgba(0, 78, 71, 0.28);
transform: translateY(-2px);
}
/* Back to Top */
#back-to-top .top {
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #00685f);
box-shadow: var(--shadow-md);
transition: var(--transition);
width: 46px;
height: 46px;
line-height: 46px;
}
#back-to-top .top:hover {
background: linear-gradient(135deg, var(--primary-dark-color), var(--primary-color));
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
/* =============================================
Forms
============================================= */
input,
input.form-control,
textarea,
select,
select.form-control {
border-radius: var(--radius-sm) !important;
background: #e4e9e9 !important;
border: 1px solid rgba(190, 201, 198, 0.35) !important;
color: var(--dark-color) !important;
transition: var(--transition);
}
input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
.form-control:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(0, 104, 95, 0.14) !important;
outline: none !important;
}
/* =============================================
Blog / Posts
============================================= */
.pt-blog-post article.hentry {
border-radius: var(--radius-md);
overflow: hidden;
background: var(--white-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
margin-bottom: 30px;
}
.pt-blog-post article.hentry:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.pt-blog-post article.hentry .pt-post-media img {
border-radius: 0;
transition: var(--transition);
}
.pt-blog-post article.hentry:hover .pt-post-media img {
transform: scale(1.04);
}
.pt-blog-post article.hentry .pt-post-media {
overflow: hidden;
}
/* =============================================
Sidebar Widgets
============================================= */
.widget {
border-radius: var(--radius-md);
background: #ffffff;
box-shadow: var(--shadow-sm);
border: none;
padding: 28px;
}
.widget.widget_search {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark-color));
border: none;
box-shadow: var(--shadow-md);
}
.widget-title,
.widget h2.widget-title {
color: var(--dark-color);
font-size: 18px;
font-weight: 700;
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 2px solid var(--primary-light-color);
position: relative;
}
.widget-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: var(--primary-color);
}
/* =============================================
Footer
============================================= */
#pt-footer {
background: linear-gradient(165deg, #002a26 0%, #003d37 42%, #002420 100%);
color: rgba(255,255,255,0.78);
position: relative;
}
#pt-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #004e47, #9df1f1, #00696b);
}
#pt-footer .pt-footer-style-1 {
background: transparent;
}
/* ── Custom footer layout ── */
.kc-footer-main {
padding: 64px 0 40px;
}
.kc-footer-col {
margin-bottom: 32px;
}
/* Brand */
.kc-footer-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.kc-footer-logo {
height: auto;
max-height: 56px;
width: auto;
max-width: 200px;
object-fit: contain;
opacity: 1;
}
.kc-footer-clinic-name {
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0;
}
.kc-footer-tagline {
font-size: 14px;
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin-bottom: 6px;
}
.kc-footer-sub {
font-size: 12px;
color: rgba(255,255,255,0.5);
line-height: 1.6;
margin-bottom: 20px;
}
/* Social buttons */
.kc-footer-social {
display: flex;
flex-direction: column;
gap: 10px;
}
.kc-social-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
width: fit-content;
}
.kc-social-line {
background: #06C755;
color: #fff;
}
.kc-social-line:hover {
background: #05b34c;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(6,199,85,0.35);
}
.kc-social-fb {
background: #1877f2;
color: #fff !important;
}
.kc-social-fb i {
font-size: 16px;
width: 18px;
text-align: center;
}
.kc-social-fb:hover {
background: #1464c8;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35);
}
.kc-social-phone {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.15);
}
.kc-social-phone:hover {
background: rgba(255,255,255,0.18);
color: #fff;
transform: translateY(-2px);
}
/* Headings */
.kc-footer-heading {
font-size: 14px;
font-weight: 700;
color: #fff;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 18px;
padding-bottom: 10px;
position: relative;
}
.kc-footer-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #9df1f1, transparent);
border-radius: 2px;
}
/* Links */
.kc-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.kc-footer-links li {
margin-bottom: 10px;
}
.kc-footer-links li a {
color: rgba(255,255,255,0.6);
font-size: 13.5px;
text-decoration: none;
transition: var(--transition);
display: flex;
align-items: center;
gap: 6px;
}
.kc-footer-links li a::before {
content: '›';
color: #9df1f1;
font-size: 16px;
line-height: 1;
}
.kc-footer-links li a:hover {
color: #fff;
padding-left: 4px;
}
/* Contact info */
.kc-footer-info-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
font-size: 13.5px;
color: rgba(255,255,255,0.65);
line-height: 1.6;
}
.kc-footer-info-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.kc-footer-info-item a {
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: var(--transition);
}
.kc-footer-info-item a:hover {
color: #9df1f1;
}
.kc-footer-hours-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0,183,77,0.12);
border: 1px solid rgba(0,183,77,0.25);
color: #4ade80;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 50px;
margin-top: 6px;
}
.kc-hours-dot {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
animation: kcPulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes kcPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* Bottom bar */
.kc-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.07);
padding: 18px 0;
font-size: 12.5px;
color: rgba(255,255,255,0.35);
}
.kc-footer-bottom .col-md-6 {
padding-top: 4px;
padding-bottom: 4px;
}
@media (max-width: 767px) {
.kc-footer-main { padding: 40px 0 24px; }
.kc-footer-bottom .text-md-right { text-align: center !important; }
.kc-footer-bottom .text-md-left { text-align: center !important; }
}
#pt-footer .footer-title {
color: var(--white-color);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 20px;
padding-bottom: 12px;
position: relative;
}
#pt-footer .footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 2px;
background: linear-gradient(90deg, var(--accent-color), transparent);
border-radius: 2px;
}
#pt-footer a {
color: rgba(255,255,255,0.65);
transition: var(--transition);
}
#pt-footer a:hover {
color: var(--accent-color);
padding-left: 4px;
}
#pt-footer .widget ul li a {
color: rgba(255,255,255,0.65);
}
#pt-footer .widget ul li a:hover {
color: var(--accent-color);
}
#pt-footer p {
color: rgba(255,255,255,0.6);
}
/* Footer bottom bar (site-info) */
.pt-footer-bottom,
#pt-footer .pt-footer-bottom-info,
#pt-footer .site-info {
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.07);
padding: 16px 0;
}
#pt-footer .pt-footer-bottom-info p,
#pt-footer .site-info p {
color: rgba(255,255,255,0.45);
font-size: 13px;
margin: 0;
}
/* Footer recent posts */
.pt-footer-recent-post {
border-bottom-color: rgba(255,255,255,0.08) !important;
}
.pt-footer-recent-post .pt-footer-recent-post-media img {
border-radius: var(--radius-sm);
transition: var(--transition);
}
.pt-footer-recent-post:hover .pt-footer-recent-post-media img {
transform: scale(1.05);
opacity: 0.9;
}
.pt-footer-recent-post .pt-footer-recent-post-info h6 a {
color: rgba(255,255,255,0.85) !important;
}
.pt-footer-recent-post .pt-footer-recent-post-info h6 a:hover {
color: var(--accent-color) !important;
}
/* Footer subscribe section */
.pt-footer-subscribe {
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: var(--radius-md);
}
/* =============================================
Section Titles (Elementor / Shortcodes)
============================================= */
.pt-section-title-box .pt-section-title {
position: relative;
display: inline-block;
}
.pt-fancy-box {
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-sm);
transition: var(--transition);
overflow: hidden;
border: none;
}
.pt-fancy-box:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
/* =============================================
Service / Info boxes
============================================= */
.pt-service-box,
.pt-info-box {
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-sm);
border: none;
transition: var(--transition);
overflow: hidden;
}
.pt-service-box:hover,
.pt-info-box:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.pt-service-box .pt-service-icon i,
.pt-info-box .pt-info-box-icon i {
background: rgba(157, 241, 241, 0.45);
color: var(--primary-color);
border-radius: 50%;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 26px;
transition: var(--transition);
}
.pt-service-box:hover .pt-service-icon i,
.pt-info-box:hover .pt-info-box-icon i {
background: linear-gradient(135deg, var(--primary-color), #00685f);
color: var(--white-color);
transform: rotate(5deg) scale(1.08);
}
/* =============================================
Team / Doctor cards
============================================= */
.pt-team-box {
border-radius: var(--radius-md);
overflow: hidden;
background: var(--white-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.pt-team-box:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.pt-team-box .pt-team-img img {
transition: var(--transition);
}
.pt-team-box:hover .pt-team-img img {
transform: scale(1.05);
}
/* =============================================
Testimonials
============================================= */
.pt-testimonial-box {
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-sm);
border: none;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.pt-testimonial-box::before {
content: '\201C';
position: absolute;
top: -10px;
left: 16px;
font-size: 100px;
color: var(--primary-color);
opacity: 0.06;
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.pt-testimonial-box:hover {
box-shadow: var(--shadow-md);
}
/* =============================================
Appointment Form
============================================= */
.pt-appointment-form {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/* =============================================
Working Hours
============================================= */
.pt-working-hours-table tr {
transition: var(--transition);
}
.pt-working-hours-table tr:hover {
background: var(--primary-light-color);
}
/* =============================================
FullCalendar (custom appointment calendar)
============================================= */
.fc {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
background: var(--white-color);
}
.fc .fc-toolbar {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark-color));
padding: 12px 16px;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.fc .fc-toolbar-title {
color: var(--white-color) !important;
font-size: 18px;
font-weight: 700;
}
.fc .fc-button-primary {
background: rgba(255,255,255,0.15) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: var(--radius-sm) !important;
color: var(--white-color) !important;
font-size: 13px;
transition: var(--transition);
}
.fc .fc-button-primary:hover {
background: rgba(255,255,255,0.25) !important;
}
.fc .fc-daygrid-day.fc-day-today {
background: var(--primary-light-color) !important;
}
.fc .fc-daygrid-day:hover {
background: rgba(0, 78, 71, 0.06);
cursor: pointer;
}
.fc .fc-col-header-cell {
background: var(--grey-color);
font-weight: 700;
color: var(--dark-color);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fc-event {
border-radius: var(--radius-sm) !important;
border: none !important;
font-size: 12px;
font-weight: 600;
padding: 2px 6px;
background: linear-gradient(135deg, var(--primary-color), #00685f) !important;
}
/* =============================================
Pagination
============================================= */
.page-numbers {
border-radius: var(--radius-sm) !important;
transition: var(--transition);
}
.page-numbers.current,
.page-numbers:hover {
background: linear-gradient(135deg, var(--primary-color), #00685f) !important;
box-shadow: var(--shadow-cta);
transform: translateY(-1px);
}
/* =============================================
Tables
============================================= */
table {
border-radius: var(--radius-sm);
overflow: hidden;
border: 1.5px solid var(--grey-border);
box-shadow: var(--shadow-sm);
}
table th {
background: var(--primary-dark-color) !important;
color: var(--white-color) !important;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 12px;
}
table tr:nth-child(even) {
background: var(--grey-color);
}
table tr:hover {
background: var(--primary-light-color);
transition: var(--transition);
}
/* =============================================
Blockquote
============================================= */
blockquote {
border-radius: var(--radius-sm);
border-left: 4px solid var(--primary-color);
background: var(--primary-light-color);
padding: 20px 28px;
box-shadow: var(--shadow-sm);
}
/* =============================================
Comments
============================================= */
.comment-body {
border-radius: var(--radius-sm);
background: var(--white-color);
box-shadow: var(--shadow-sm);
border: 1px solid var(--grey-border);
padding: 20px;
margin-bottom: 16px;
transition: var(--transition);
}
.comment-body:hover {
box-shadow: var(--shadow-md);
}
/* =============================================
Scrollbar
============================================= */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: var(--grey-color);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark-color);
}
/* =============================================
Selection
============================================= */
::selection {
background: var(--primary-color);
color: var(--white-color);
}
/* =============================================
Elementor Overrides
============================================= */
.elementor-widget-image img {
border-radius: var(--radius-sm);
}
.elementor-button {
border-radius: var(--radius-sm) !important;
transition: var(--transition) !important;
}
/* =============================================
Mobile Responsive Enhancements
============================================= */
@media (max-width: 991px) {
header#pt-header .pt-bottom-header .navbar {
padding-top: 12px;
padding-bottom: 12px;
}
header#pt-header .pt-bottom-header .navbar .navbar-brand {
line-height: 1.2;
padding: 2px 0;
}
.navbar-toggler {
border: none !important;
background: var(--primary-light-color) !important;
border-radius: var(--radius-sm) !important;
padding: 8px 12px !important;
color: var(--primary-color) !important;
font-size: 18px !important;
}
.navbar-toggler:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(0, 78, 71, 0.2) !important;
}
}
@media (max-width: 767px) {
.pt-breadcrumb {
min-height: 240px;
background-position: center 10%;
}
.pt-breadcrumb .container {
padding: 0 20px 24px;
}
.pt-breadcrumb nav {
padding: 18px 18px 16px;
border-radius: 18px;
}
.pt-breadcrumb .pt-breadcrumb-title h1 {
font-size: clamp(1.65rem, 7vw, 2.5rem);
}
.widget {
padding: 20px;
}
}
/* =============================================
Long-form single post (reference: clinical article UX)
============================================= */
.kc-longform-single .single-post .pt-blog-post {
background: transparent;
box-shadow: none;
margin-bottom: 0;
}
.kc-longform-single .single-post .pt-blog-post:hover {
transform: none;
box-shadow: none;
}
.kc-single-head {
margin-bottom: 1rem;
}
.kc-single-eyebrow {
font-family: var(--label-fonts);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 0.75rem;
}
.kc-single-eyebrow a {
color: var(--accent-color);
text-decoration: none;
}
.kc-single-eyebrow a:hover {
color: var(--primary-color);
}
.kc-single-title {
font-family: var(--title-fonts);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
color: var(--primary-color);
margin: 0 0 0.5rem;
letter-spacing: -0.03em;
}
.kc-single-meta.pt-post-meta {
border: none;
padding: 0 0 1.25rem;
margin-bottom: 0.5rem;
opacity: 0.85;
}
.kc-single-meta.pt-post-meta ul {
margin: 0;
}
.kc-single-meta .pt-post-author,
.kc-single-meta .pt-post-comment {
font-size: 13px;
}
.kc-entry-prose {
font-size: 1.05rem;
line-height: 1.85;
color: var(--secondary-color);
}
.kc-entry-prose > p:first-of-type {
font-size: 1.12rem;
color: #2a3230;
}
.kc-entry-prose h2 {
font-family: var(--title-fonts);
font-size: clamp(1.35rem, 2.5vw, 1.65rem);
font-weight: 800;
color: var(--primary-color);
margin: 2.25rem 0 1rem;
padding-top: 0.5rem;
letter-spacing: -0.02em;
}
.kc-entry-prose h3 {
font-family: var(--title-fonts);
font-size: 1.2rem;
font-weight: 700;
color: var(--dark-color);
margin: 1.75rem 0 0.65rem;
}
.kc-entry-prose hr {
border: none;
height: 1px;
margin: 2.5rem 0;
background: linear-gradient(90deg, rgba(0, 78, 71, 0.2), rgba(157, 241, 241, 0.5), transparent);
}
.kc-entry-prose img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.kc-entry-prose .page-links {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid rgba(190, 201, 198, 0.45);
}
/* Table of contents */
.kc-toc {
background: #eff5f4;
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem 1.25rem;
margin: 0 0 2rem;
}
.kc-toc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 0 0.65rem;
margin: 0;
border: none;
border-bottom: 1px solid rgba(0, 78, 71, 0.12);
background: transparent;
cursor: pointer;
font-family: var(--title-fonts);
font-weight: 700;
font-size: 15px;
color: var(--primary-color);
text-align: left;
}
.kc-toc-toggle__hint {
font-family: var(--label-fonts);
font-size: 11px;
font-weight: 500;
color: var(--secondary-color);
opacity: 0.8;
}
.kc-toc-panel {
padding-top: 0.85rem;
}
.kc-toc--collapsed .kc-toc-toggle {
border-bottom-color: transparent;
}
.kc-toc-list {
margin: 0;
padding: 0 0 0 1.1rem;
font-family: var(--body-fonts);
font-size: 14px;
line-height: 1.55;
color: var(--secondary-color);
}
.kc-toc-item {
margin-bottom: 0.4rem;
}
.kc-toc-item--h3 {
margin-left: 0.85rem;
list-style-type: circle;
}
.kc-toc-list a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: var(--transition);
}
.kc-toc-list a:hover {
color: var(--primary-color);
border-bottom-color: rgba(0, 78, 71, 0.25);
}
@media (max-width: 575px) {
.kc-longform-single .kc-toc {
padding: 1rem;
}
.kc-toc-toggle__hint {
display: none;
}
}
/* End-of-article CTA */
.kc-article-end-cta {
margin-top: 3rem;
padding: 1.75rem 1.5rem;
background: linear-gradient(145deg, rgba(0, 78, 71, 0.06) 0%, rgba(157, 241, 241, 0.2) 100%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.kc-article-end-cta__lead {
margin: 0 0 1.25rem;
font-size: 15px;
line-height: 1.65;
color: var(--dark-color);
}
.kc-article-end-cta__lead strong {
font-family: var(--title-fonts);
font-size: 17px;
color: var(--primary-color);
}
.kc-article-end-cta__sub {
display: block;
margin-top: 0.35rem;
font-size: 13px;
font-weight: 400;
color: var(--secondary-color);
}
.kc-article-end-cta__grid {
display: grid;
gap: 1rem 1.5rem;
}
@media (min-width: 576px) {
.kc-article-end-cta__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.kc-article-end-cta__block {
font-size: 13px;
line-height: 1.55;
color: var(--secondary-color);
}
.kc-article-end-cta__label {
display: block;
font-family: var(--label-fonts);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary-color);
margin-bottom: 0.35rem;
}
.kc-article-end-cta__block p {
margin: 0;
}
.kc-article-end-cta__block a {
color: var(--accent-color);
font-weight: 600;
text-decoration: none;
}
.kc-article-end-cta__block a:hover {
color: var(--primary-color);
}
.kc-article-end-cta__sep {
opacity: 0.5;
}
/* =============================================
Elementor contrast — calendar, contact (ติดต่อเรา), etc.
Readable text on light sections; form labels/inputs on contact.
============================================= */
body.kc-elementor-contrast #content .elementor-widget-wrap,
body.kc-elementor-contrast .site-main .elementor-widget-wrap {
color: #171d1d;
}
body.kc-elementor-contrast #content .elementor-heading-title,
body.kc-elementor-contrast .site-main .elementor-heading-title {
color: #004e47 !important;
}
body.kc-elementor-contrast #content .elementor-widget-text-editor,
body.kc-elementor-contrast #content .elementor-widget-text-editor p,
body.kc-elementor-contrast #content .elementor-widget-text-editor li,
body.kc-elementor-contrast .site-main .elementor-widget-text-editor,
body.kc-elementor-contrast .site-main .elementor-widget-text-editor p,
body.kc-elementor-contrast .site-main .elementor-widget-text-editor li {
color: #2f3836 !important;
}
body.kc-elementor-contrast #content .elementor-icon-list-text,
body.kc-elementor-contrast .site-main .elementor-icon-list-text {
color: #171d1d !important;
}
body.kc-elementor-contrast #content .elementor-icon-list-icon,
body.kc-elementor-contrast #content .elementor-icon-list-icon i,
body.kc-elementor-contrast #content .elementor-icon-list-icon svg,
body.kc-elementor-contrast .site-main .elementor-icon-list-icon,
body.kc-elementor-contrast .site-main .elementor-icon-list-icon i,
body.kc-elementor-contrast .site-main .elementor-icon-list-icon svg {
color: #00696b !important;
fill: #00696b !important;
}
body.kc-elementor-contrast #content .elementor-widget-icon-box .elementor-icon-box-title,
body.kc-elementor-contrast .site-main .elementor-widget-icon-box .elementor-icon-box-title {
color: #004e47 !important;
}
body.kc-elementor-contrast #content .elementor-widget-icon-box .elementor-icon-box-description,
body.kc-elementor-contrast #content .elementor-widget-icon-box .elementor-icon-box-description p,
body.kc-elementor-contrast .site-main .elementor-widget-icon-box .elementor-icon-box-description,
body.kc-elementor-contrast .site-main .elementor-widget-icon-box .elementor-icon-box-description p {
color: #3e4947 !important;
}
/* Primary buttons: solid fill so label stays legible */
body.kc-elementor-contrast #content .elementor-widget-button .elementor-button,
body.kc-elementor-contrast .site-main .elementor-widget-button .elementor-button {
background-color: #004e47 !important;
color: #ffffff !important;
border-color: transparent !important;
}
body.kc-elementor-contrast #content .elementor-widget-button .elementor-button:hover,
body.kc-elementor-contrast .site-main .elementor-widget-button .elementor-button:hover {
background-color: #00685f !important;
color: #ffffff !important;
}
/* Text-only Elementor link buttons (avoid white-on-pale) */
body.kc-elementor-contrast #content .elementor-button.elementor-button-link,
body.kc-elementor-contrast .site-main .elementor-button.elementor-button-link {
background-color: rgba(255, 255, 255, 0.92) !important;
color: #004e47 !important;
border: 1px solid rgba(0, 78, 71, 0.35) !important;
}
body.kc-elementor-contrast #content a:not(.elementor-button):not(.kc-social-btn),
body.kc-elementor-contrast .site-main a:not(.elementor-button):not(.kc-social-btn) {
color: #00696b;
}
body.kc-elementor-contrast #content a:not(.elementor-button):not(.kc-social-btn):hover,
body.kc-elementor-contrast .site-main a:not(.elementor-button):not(.kc-social-btn):hover {
color: #004e47;
}
/* Elementor form (contact) — labels & inputs */
body.kc-elementor-contrast #content .elementor-field-label,
body.kc-elementor-contrast #content .elementor-form-fields-wrapper label,
body.kc-elementor-contrast .site-main .elementor-field-label,
body.kc-elementor-contrast .site-main .elementor-form-fields-wrapper label {
color: #171d1d !important;
}
body.kc-elementor-contrast #content .elementor-field-textual,
body.kc-elementor-contrast #content textarea.elementor-field-textual,
body.kc-elementor-contrast #content select.elementor-field-textual,
body.kc-elementor-contrast .site-main .elementor-field-textual,
body.kc-elementor-contrast .site-main textarea.elementor-field-textual,
body.kc-elementor-contrast .site-main select.elementor-field-textual {
color: #171d1d !important;
background-color: #ffffff !important;
border: 1px solid rgba(0, 78, 71, 0.28) !important;
}
body.kc-elementor-contrast #content .elementor-field-textual:focus,
body.kc-elementor-contrast #content textarea.elementor-field-textual:focus,
body.kc-elementor-contrast .site-main .elementor-field-textual:focus,
body.kc-elementor-contrast .site-main textarea.elementor-field-textual:focus {
border-color: #004e47 !important;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 104, 95, 0.15);
}
body.kc-elementor-contrast #content .elementor-field-textual::placeholder,
body.kc-elementor-contrast .site-main .elementor-field-textual::placeholder {
color: #6e7977 !important;
opacity: 1;
}
body.kc-elementor-contrast #content .elementor-field-subgroup label,
body.kc-elementor-contrast #content .elementor-field-option label,
body.kc-elementor-contrast .site-main .elementor-field-subgroup label,
body.kc-elementor-contrast .site-main .elementor-field-option label {
color: #2f3836 !important;
}
/* Shortcode calendar (calendar page) */
body.kc-elementor-contrast #content #kc-calendar-wrap,
body.kc-elementor-contrast .site-main #kc-calendar-wrap {
color: #171d1d;
}
/* =============================================
Contact page fallback styles
The page content includes inline CSS, but this keeps the layout readable
even if that block is stripped or cached incorrectly.
============================================= */
body.kc-elementor-contrast .ct-page {
--primary: #004e47;
--primary-container: #00685f;
--primary-fixed-dim: #85d5c9;
--secondary: #00696b;
--tertiary: #174e32;
--tertiary-fixed: #b6f0c9;
--surface: #f5fafa;
--surface-low: #eff5f4;
--surface-container: #e9efee;
--surface-high: #e4e9e9;
--surface-highest: #dee4e3;
--surface-lowest: #ffffff;
--on-surface: #171d1d;
--on-surface-variant: #3e4947;
--outline: #6e7977;
--outline-variant: #bec9c6;
font-family: 'Public Sans', sans-serif;
color: var(--on-surface);
background: var(--surface-lowest);
}
body.kc-elementor-contrast .ct-page,
body.kc-elementor-contrast .ct-page * {
box-sizing: border-box;
}
body.kc-elementor-contrast .ct-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primary-fixed-dim);
margin-bottom: 14px;
}
body.kc-elementor-contrast .ct-section-title,
body.kc-elementor-contrast .ct-form-side-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.02em;
}
body.kc-elementor-contrast .ct-section-title {
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.15;
margin: 0 0 48px;
}
body.kc-elementor-contrast .ct-form-side-title {
font-size: 1.8rem;
margin: 0 0 12px;
}
body.kc-elementor-contrast .ct-hero,
body.kc-elementor-contrast .ct-cards,
body.kc-elementor-contrast .ct-map,
body.kc-elementor-contrast .ct-form-section,
body.kc-elementor-contrast .ct-faq {
padding: 72px 32px;
}
body.kc-elementor-contrast .ct-hero {
background: linear-gradient(135deg, #004e47 0%, #0a6b63 100%);
position: relative;
overflow: hidden;
}
body.kc-elementor-contrast .ct-hero::before,
body.kc-elementor-contrast .ct-hero::after {
content: '';
position: absolute;
border-radius: 999px;
pointer-events: none;
}
body.kc-elementor-contrast .ct-hero::before {
top: -120px;
right: -80px;
width: 380px;
height: 380px;
background: rgba(255, 255, 255, 0.05);
}
body.kc-elementor-contrast .ct-hero::after {
bottom: -100px;
left: -60px;
width: 280px;
height: 280px;
background: rgba(255, 255, 255, 0.04);
}
body.kc-elementor-contrast .ct-hero-inner,
body.kc-elementor-contrast .ct-cards-inner,
body.kc-elementor-contrast .ct-map-inner,
body.kc-elementor-contrast .ct-faq-inner {
max-width: 1200px;
margin: 0 auto;
}
body.kc-elementor-contrast .ct-hero-inner,
body.kc-elementor-contrast .ct-form-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
body.kc-elementor-contrast .ct-hero-title {
font-family: 'Manrope', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: #ffffff !important;
margin: 0 0 16px;
}
body.kc-elementor-contrast .ct-hero-desc,
body.kc-elementor-contrast .ct-hero p.ct-hero-desc {
color: rgba(255, 255, 255, 0.78) !important;
font-size: 1rem;
line-height: 1.8;
font-weight: 300;
margin: 0 0 28px;
}
body.kc-elementor-contrast .ct-hero-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.kc-elementor-contrast .ct-hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.92) !important;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
}
body.kc-elementor-contrast .ct-hero-chip .material-symbols-outlined,
body.kc-elementor-contrast .ct-quick-icon .material-symbols-outlined {
color: var(--primary-fixed-dim);
}
body.kc-elementor-contrast .ct-quick-card {
padding: 36px 32px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 24px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
body.kc-elementor-contrast .ct-quick-card h3 {
font-family: 'Manrope', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary-fixed-dim) !important;
margin: 0 0 20px;
}
body.kc-elementor-contrast .ct-quick-item {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
body.kc-elementor-contrast .ct-quick-item:last-child {
margin-bottom: 0;
}
body.kc-elementor-contrast .ct-quick-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
}
body.kc-elementor-contrast .ct-quick-text span {
display: block;
margin-bottom: 2px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6) !important;
}
body.kc-elementor-contrast .ct-quick-text strong,
body.kc-elementor-contrast .ct-quick-text a {
font-family: 'Manrope', sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff !important;
text-decoration: none;
}
body.kc-elementor-contrast .ct-cards {
background: var(--surface-lowest);
}
body.kc-elementor-contrast .ct-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 56px;
}
body.kc-elementor-contrast .ct-info-card {
padding: 28px 24px;
border-bottom: 2px solid transparent;
border-radius: 20px;
background: var(--surface-low);
text-align: center;
transition: all 0.3s ease;
}
body.kc-elementor-contrast .ct-info-card:hover {
transform: translateY(-3px);
border-bottom-color: var(--primary-fixed-dim);
background: var(--surface-lowest);
box-shadow: 0 16px 40px rgba(23, 29, 29, 0.07);
}
body.kc-elementor-contrast .ct-info-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto 18px;
border-radius: 16px;
background: var(--tertiary-fixed);
}
body.kc-elementor-contrast .ct-info-card h3 {
margin: 0 0 8px;
font-family: 'Manrope', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-surface-variant) !important;
}
body.kc-elementor-contrast .ct-info-card p,
body.kc-elementor-contrast .ct-info-card a,
body.kc-elementor-contrast .ct-hours-day,
body.kc-elementor-contrast .ct-channel-value,
body.kc-elementor-contrast .ct-faq-btn {
font-family: 'Manrope', sans-serif;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.5;
color: var(--on-surface) !important;
}
body.kc-elementor-contrast .ct-info-card a {
color: var(--primary) !important;
text-decoration: none;
}
body.kc-elementor-contrast .ct-info-card .sub,
body.kc-elementor-contrast .ct-map-note,
body.kc-elementor-contrast .ct-form-side-desc,
body.kc-elementor-contrast .ct-faq-answer,
body.kc-elementor-contrast .ct-channel-label,
body.kc-elementor-contrast .ct-field label {
color: var(--on-surface-variant) !important;
}
body.kc-elementor-contrast .ct-hours {
margin-bottom: 56px;
overflow: hidden;
border: 1px solid var(--outline-variant);
border-radius: 20px;
background: var(--surface-highest);
}
body.kc-elementor-contrast .ct-hours-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid var(--surface-high);
}
body.kc-elementor-contrast .ct-hours-row:last-child {
border-bottom: 0;
}
body.kc-elementor-contrast .ct-hours-day-wrap {
display: flex;
align-items: center;
gap: 12px;
}
body.kc-elementor-contrast .ct-hours-dot {
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 999px;
}
body.kc-elementor-contrast .ct-hours-dot.open {
background: var(--secondary);
}
body.kc-elementor-contrast .ct-hours-dot.closed {
background: var(--outline-variant);
}
body.kc-elementor-contrast .ct-hours-time {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-container) !important;
}
body.kc-elementor-contrast .ct-hours-time.closed {
color: var(--outline) !important;
font-style: italic;
font-weight: 400;
}
body.kc-elementor-contrast .ct-hours-badge {
padding: 4px 12px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 700;
}
body.kc-elementor-contrast .ct-hours-badge.open {
color: var(--tertiary) !important;
background: var(--tertiary-fixed);
}
body.kc-elementor-contrast .ct-hours-badge.closed {
color: var(--outline) !important;
background: var(--surface-high);
}
body.kc-elementor-contrast .ct-map {
background: var(--surface-low);
}
body.kc-elementor-contrast .ct-map-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 32px;
}
body.kc-elementor-contrast .ct-map-wrap {
position: relative;
height: 420px;
overflow: hidden;
border-radius: 24px;
background: var(--surface-high);
box-shadow: 0 16px 48px rgba(23, 29, 29, 0.08);
}
body.kc-elementor-contrast .ct-map-wrap iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
body.kc-elementor-contrast .ct-form-section {
background: var(--surface-lowest);
}
body.kc-elementor-contrast .ct-form-inner {
max-width: 1200px;
margin: 0 auto;
align-items: start;
gap: 72px;
}
body.kc-elementor-contrast .ct-form-wrap {
padding: 40px;
border: 1px solid var(--outline-variant);
border-radius: 24px;
background: var(--surface-low);
}
body.kc-elementor-contrast .ct-privacy {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
margin-bottom: 24px;
border-radius: 12px;
background: var(--tertiary-fixed);
}
body.kc-elementor-contrast .ct-privacy p {
margin: 0;
font-size: 0.83rem;
line-height: 1.6;
font-weight: 500;
color: var(--tertiary) !important;
}
body.kc-elementor-contrast .ct-channel-cards {
display: flex;
flex-direction: column;
gap: 14px;
}
body.kc-elementor-contrast .ct-channel-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border-radius: 14px;
background: var(--surface-low);
text-decoration: none;
transition: all 0.2s ease;
}
body.kc-elementor-contrast .ct-channel-card:hover {
transform: translateX(3px);
background: var(--surface-container);
}
body.kc-elementor-contrast .ct-channel-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 12px;
}
body.kc-elementor-contrast .ct-channel-icon.phone {
background: var(--tertiary-fixed);
}
body.kc-elementor-contrast .ct-channel-icon.line-icon {
background: #06c755;
}
body.kc-elementor-contrast .ct-field-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
body.kc-elementor-contrast .ct-field {
margin-bottom: 16px;
}
body.kc-elementor-contrast .ct-field label {
display: block;
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.kc-elementor-contrast .ct-field input,
body.kc-elementor-contrast .ct-field select,
body.kc-elementor-contrast .ct-field textarea {
width: 100%;
padding: 12px 16px;
border: 1.5px solid var(--outline-variant);
border-radius: 10px;
background: var(--surface-lowest);
color: var(--on-surface) !important;
font-family: 'Public Sans', sans-serif;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.kc-elementor-contrast .ct-field input:focus,
body.kc-elementor-contrast .ct-field select:focus,
body.kc-elementor-contrast .ct-field textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 104, 95, 0.12);
}
body.kc-elementor-contrast .ct-field textarea {
min-height: 100px;
resize: vertical;
}
body.kc-elementor-contrast .ct-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px;
border: 0;
border-radius: 10px;
background: var(--primary);
color: #ffffff !important;
font-family: 'Manrope', sans-serif;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
body.kc-elementor-contrast .ct-submit-btn:hover {
background: var(--primary-container);
}
body.kc-elementor-contrast .ct-faq {
background: var(--surface-low);
}
body.kc-elementor-contrast .ct-faq-inner {
max-width: 800px;
}
body.kc-elementor-contrast .ct-faq-header {
margin-bottom: 48px;
text-align: center;
}
body.kc-elementor-contrast .ct-faq-item {
border-bottom: 1px solid var(--outline-variant);
}
body.kc-elementor-contrast .ct-faq-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 22px 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
}
body.kc-elementor-contrast .ct-faq-answer {
display: none;
padding: 0 0 22px;
font-size: 0.9rem;
line-height: 1.8;
}
body.kc-elementor-contrast .ct-faq-item.open .ct-faq-answer {
display: block;
}
@media (max-width: 960px) {
body.kc-elementor-contrast .ct-hero-inner,
body.kc-elementor-contrast .ct-form-inner,
body.kc-elementor-contrast .ct-info-grid {
grid-template-columns: 1fr;
}
body.kc-elementor-contrast .ct-map-header {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 600px) {
body.kc-elementor-contrast .ct-hero,
body.kc-elementor-contrast .ct-cards,
body.kc-elementor-contrast .ct-map,
body.kc-elementor-contrast .ct-form-section,
body.kc-elementor-contrast .ct-faq {
padding-right: 20px;
padding-left: 20px;
}
body.kc-elementor-contrast .ct-field-group,
body.kc-elementor-contrast .ct-info-grid {
grid-template-columns: 1fr;
}
body.kc-elementor-contrast .ct-form-wrap {
padding: 24px;
}
body.kc-elementor-contrast .ct-hours-row {
flex-direction: column;
align-items: flex-start;
}
}
/* =============================================
Calendar page fallback styles
Mirrors the inline calendar page design so the page remains usable
when page-level CSS is stripped or cached incorrectly.
============================================= */
body.kc-elementor-contrast .cal-page {
--primary: #004e47;
--primary-container: #00685f;
--primary-fixed-dim: #85d5c9;
--secondary: #00696b;
--tertiary: #174e32;
--tertiary-fixed: #b6f0c9;
--surface: #f5fafa;
--surface-low: #eff5f4;
--surface-container: #e9efee;
--surface-high: #e4e9e9;
--surface-highest: #dee4e3;
--surface-lowest: #ffffff;
--on-surface: #171d1d;
--on-surface-variant: #3e4947;
--outline: #6e7977;
--outline-variant: #bec9c6;
font-family: 'Public Sans', sans-serif;
color: var(--on-surface);
background: var(--surface-lowest);
}
body.kc-elementor-contrast .cal-page,
body.kc-elementor-contrast .cal-page * {
box-sizing: border-box;
}
body.kc-elementor-contrast .cal-hero,
body.kc-elementor-contrast .cal-schedule,
body.kc-elementor-contrast .cal-appt,
body.kc-elementor-contrast .cal-embed {
padding: 72px 32px;
}
body.kc-elementor-contrast .cal-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #004e47 0%, #0a6b63 100%);
}
body.kc-elementor-contrast .cal-hero::before,
body.kc-elementor-contrast .cal-hero::after {
content: '';
position: absolute;
border-radius: 999px;
pointer-events: none;
}
body.kc-elementor-contrast .cal-hero::before {
top: -100px;
right: -100px;
width: 420px;
height: 420px;
background: rgba(255, 255, 255, 0.04);
}
body.kc-elementor-contrast .cal-hero::after {
bottom: -120px;
left: -60px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.03);
}
body.kc-elementor-contrast .cal-hero-inner,
body.kc-elementor-contrast .cal-schedule-inner,
body.kc-elementor-contrast .cal-embed-inner {
max-width: 1200px;
margin: 0 auto;
}
body.kc-elementor-contrast .cal-hero-inner,
body.kc-elementor-contrast .cal-appt-inner {
position: relative;
z-index: 1;
display: grid;
gap: 48px;
}
body.kc-elementor-contrast .cal-hero-inner {
grid-template-columns: 1fr auto;
align-items: center;
}
body.kc-elementor-contrast .cal-appt-inner {
max-width: 1200px;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
body.kc-elementor-contrast .cal-hero-label,
body.kc-elementor-contrast .cal-section-label {
display: block;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
body.kc-elementor-contrast .cal-hero-label {
color: var(--primary-fixed-dim);
}
body.kc-elementor-contrast .cal-section-label {
color: var(--secondary);
}
body.kc-elementor-contrast .cal-hero-title,
body.kc-elementor-contrast .cal-section-title {
font-family: 'Manrope', sans-serif;
font-weight: 800;
letter-spacing: -0.025em;
}
body.kc-elementor-contrast .cal-hero-title {
margin: 0 0 16px;
font-size: clamp(2.2rem, 4vw, 3.2rem);
line-height: 1.1;
color: #ffffff !important;
}
body.kc-elementor-contrast .cal-section-title {
margin: 0 0 48px;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.15;
color: var(--primary) !important;
}
body.kc-elementor-contrast .cal-hero-desc {
max-width: 480px;
margin: 0 0 28px;
font-size: 1rem;
line-height: 1.8;
font-weight: 300;
color: rgba(255, 255, 255, 0.78) !important;
}
body.kc-elementor-contrast .cal-hero-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.kc-elementor-contrast .cal-hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9) !important;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
}
body.kc-elementor-contrast .cal-hero-chip .material-symbols-outlined {
color: var(--primary-fixed-dim);
}
body.kc-elementor-contrast .cal-today-card {
min-width: 180px;
padding: 28px 32px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
text-align: center;
}
body.kc-elementor-contrast .cal-today-label {
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--primary-fixed-dim) !important;
}
body.kc-elementor-contrast .cal-today-day {
margin-bottom: 4px;
font-family: 'Manrope', sans-serif;
font-size: 1.4rem;
font-weight: 800;
color: #ffffff !important;
}
body.kc-elementor-contrast .cal-today-time {
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.72) !important;
}
body.kc-elementor-contrast .cal-status-open,
body.kc-elementor-contrast .cal-status-closed {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 700;
}
body.kc-elementor-contrast .cal-status-open {
background: var(--tertiary-fixed);
color: var(--tertiary) !important;
}
body.kc-elementor-contrast .cal-status-closed {
background: rgba(186, 26, 26, 0.15);
color: #ffd5d5 !important;
}
body.kc-elementor-contrast .cal-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
body.kc-elementor-contrast .cal-status-dot.open {
background: var(--tertiary);
}
body.kc-elementor-contrast .cal-status-dot.closed {
background: #ffd5d5;
}
body.kc-elementor-contrast .cal-schedule {
background: var(--surface-lowest);
}
body.kc-elementor-contrast .cal-week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
margin-bottom: 40px;
}
body.kc-elementor-contrast .cal-day-card {
position: relative;
padding: 20px 14px;
border-radius: 16px;
text-align: center;
transition: all 0.3s ease;
}
body.kc-elementor-contrast .cal-day-card.open {
border: 1.5px solid var(--outline-variant);
background: var(--surface-low);
}
body.kc-elementor-contrast .cal-day-card.open:hover {
transform: translateY(-3px);
border-color: var(--primary-fixed-dim);
box-shadow: 0 12px 32px rgba(23, 29, 29, 0.08);
}
body.kc-elementor-contrast .cal-day-card.closed-day {
border: 1.5px solid var(--surface-highest);
background: var(--surface-highest);
opacity: 0.6;
}
body.kc-elementor-contrast .cal-day-card.highlight {
transform: translateY(-4px);
border: 1.5px solid var(--primary);
background: var(--primary);
box-shadow: 0 16px 40px rgba(0, 78, 71, 0.25);
}
body.kc-elementor-contrast .cal-day-abbr,
body.kc-elementor-contrast .cal-info-label {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
body.kc-elementor-contrast .cal-day-abbr {
display: block;
margin-bottom: 8px;
}
body.kc-elementor-contrast .cal-day-card.open .cal-day-abbr,
body.kc-elementor-contrast .cal-info-label {
color: var(--on-surface-variant) !important;
}
body.kc-elementor-contrast .cal-day-card.closed-day .cal-day-abbr {
color: var(--outline) !important;
}
body.kc-elementor-contrast .cal-day-card.highlight .cal-day-abbr {
color: var(--primary-fixed-dim) !important;
}
body.kc-elementor-contrast .cal-day-icon {
display: block;
margin-bottom: 10px;
font-size: 28px !important;
}
body.kc-elementor-contrast .cal-day-card.open .cal-day-icon {
color: var(--primary);
}
body.kc-elementor-contrast .cal-day-card.closed-day .cal-day-icon {
color: var(--outline);
}
body.kc-elementor-contrast .cal-day-card.highlight .cal-day-icon {
color: var(--primary-fixed-dim);
}
body.kc-elementor-contrast .cal-day-name,
body.kc-elementor-contrast .cal-hours-day-name,
body.kc-elementor-contrast .cal-info-value,
body.kc-elementor-contrast .cal-step-content h4,
body.kc-elementor-contrast .cal-btn-phone,
body.kc-elementor-contrast .cal-btn-line {
font-family: 'Manrope', sans-serif;
font-weight: 700;
color: var(--on-surface) !important;
}
body.kc-elementor-contrast .cal-day-name {
display: block;
margin-bottom: 10px;
font-size: 0.85rem;
}
body.kc-elementor-contrast .cal-day-card.highlight .cal-day-name {
color: #ffffff !important;
}
body.kc-elementor-contrast .cal-day-time {
display: inline-block;
padding: 5px 10px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
}
body.kc-elementor-contrast .cal-day-card.open .cal-day-time {
background: var(--tertiary-fixed);
color: var(--tertiary) !important;
}
body.kc-elementor-contrast .cal-day-card.closed-day .cal-day-time {
background: transparent;
color: var(--outline) !important;
font-style: italic;
}
body.kc-elementor-contrast .cal-day-card.highlight .cal-day-time {
background: rgba(255, 255, 255, 0.15);
color: var(--primary-fixed-dim) !important;
}
body.kc-elementor-contrast .cal-day-card.highlight::after {
content: 'TODAY';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
padding: 3px 10px;
border-radius: 999px;
background: var(--tertiary-fixed);
color: var(--tertiary);
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.1em;
}
body.kc-elementor-contrast .cal-hours-table {
overflow: hidden;
border: 1px solid var(--outline-variant);
border-radius: 20px;
background: var(--surface-low);
}
body.kc-elementor-contrast .cal-hours-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid var(--surface-highest);
}
body.kc-elementor-contrast .cal-hours-row:last-child {
border-bottom: 0;
}
body.kc-elementor-contrast .cal-hours-row:hover {
background: var(--surface-lowest);
}
body.kc-elementor-contrast .cal-hours-row.closed-row {
opacity: 0.55;
}
body.kc-elementor-contrast .cal-hours-day-group {
display: flex;
align-items: center;
gap: 14px;
}
body.kc-elementor-contrast .cal-hours-day-dot {
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 50%;
}
body.kc-elementor-contrast .cal-hours-day-dot.open {
background: var(--secondary);
}
body.kc-elementor-contrast .cal-hours-day-dot.closed {
background: var(--outline-variant);
}
body.kc-elementor-contrast .cal-hours-time {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-container) !important;
}
body.kc-elementor-contrast .cal-hours-time.closed {
color: var(--outline) !important;
font-style: italic;
font-weight: 400;
}
body.kc-elementor-contrast .cal-hours-badge {
padding: 4px 12px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
}
body.kc-elementor-contrast .cal-hours-badge.open {
background: var(--tertiary-fixed);
color: var(--tertiary) !important;
}
body.kc-elementor-contrast .cal-hours-badge.closed {
background: var(--surface-highest);
color: var(--outline) !important;
}
body.kc-elementor-contrast .cal-embed {
background: var(--surface);
}
body.kc-elementor-contrast .cal-embed-header {
margin-bottom: 40px;
}
body.kc-elementor-contrast .cal-embed-wrap {
padding: 32px;
border: 1px solid var(--outline-variant);
border-radius: 24px;
background: var(--surface-lowest);
box-shadow: 0 8px 32px rgba(23, 29, 29, 0.05);
}
body.kc-elementor-contrast .cal-embed-wrap .fc-toolbar-title {
font-family: 'Manrope', sans-serif !important;
}
body.kc-elementor-contrast .cal-embed-wrap .fc-button-primary {
background: var(--primary) !important;
border-color: var(--primary) !important;
font-family: 'Manrope', sans-serif !important;
}
body.kc-elementor-contrast .cal-appt {
background: var(--surface-low);
}
body.kc-elementor-contrast .cal-info-cards,
body.kc-elementor-contrast .cal-appt-btns {
display: flex;
flex-direction: column;
gap: 16px;
}
body.kc-elementor-contrast .cal-info-card {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px 24px;
border-left: 3px solid var(--primary-fixed-dim);
border-radius: 16px;
background: var(--surface-lowest);
transition: all 0.2s ease;
}
body.kc-elementor-contrast .cal-info-card:hover {
transform: translateX(2px);
box-shadow: 0 8px 24px rgba(23, 29, 29, 0.06);
}
body.kc-elementor-contrast .cal-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tertiary-fixed);
}
body.kc-elementor-contrast .cal-info-icon .material-symbols-outlined {
font-size: 20px !important;
color: var(--tertiary);
}
body.kc-elementor-contrast .cal-info-value,
body.kc-elementor-contrast .cal-info-value a {
font-size: 0.95rem;
line-height: 1.4;
}
body.kc-elementor-contrast .cal-info-value a {
color: var(--primary) !important;
text-decoration: none;
}
body.kc-elementor-contrast .cal-steps {
margin-bottom: 32px;
}
body.kc-elementor-contrast .cal-step {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}
body.kc-elementor-contrast .cal-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
background: var(--primary);
color: #ffffff !important;
font-family: 'Manrope', sans-serif;
font-size: 0.85rem;
font-weight: 800;
}
body.kc-elementor-contrast .cal-step-content h4 {
margin: 0 0 4px;
font-size: 0.95rem;
}
body.kc-elementor-contrast .cal-step-content p,
body.kc-elementor-contrast .cal-note p {
margin: 0;
font-size: 0.85rem;
line-height: 1.6;
}
body.kc-elementor-contrast .cal-step-content p {
color: var(--on-surface-variant) !important;
}
body.kc-elementor-contrast .cal-btn-phone,
body.kc-elementor-contrast .cal-btn-line {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-radius: 12px;
font-size: 1rem;
text-decoration: none !important;
transition: all 0.2s ease;
}
body.kc-elementor-contrast .cal-btn-phone {
background: var(--primary);
color: #ffffff !important;
}
body.kc-elementor-contrast .cal-btn-phone:hover {
transform: translateY(-1px);
background: var(--primary-container);
box-shadow: 0 8px 24px rgba(0, 78, 71, 0.2);
}
body.kc-elementor-contrast .cal-btn-line {
background: #06c755;
color: #ffffff !important;
}
body.kc-elementor-contrast .cal-btn-line:hover {
transform: translateY(-1px);
opacity: 0.92;
box-shadow: 0 8px 24px rgba(6, 199, 85, 0.25);
}
body.kc-elementor-contrast .cal-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 20px;
padding: 14px 18px;
border: 1.5px solid #fbbf24;
border-radius: 12px;
background: #fffbeb;
}
body.kc-elementor-contrast .cal-note .material-symbols-outlined {
margin-top: 1px;
font-size: 18px !important;
color: #f59e0b;
}
body.kc-elementor-contrast .cal-note p {
color: #92400e !important;
}
/* =============================================
About page fallback: mission numbers strip
Keeps the stats section readable when page-level inline CSS is missing.
============================================= */
body.kc-elementor-contrast .ab-mission {
padding: 56px 32px;
background: linear-gradient(135deg, #004e47 0%, #0b655d 100%);
}
body.kc-elementor-contrast .ab-mission-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
body.kc-elementor-contrast .ab-mission-item {
color: #ffffff;
}
body.kc-elementor-contrast .ab-mission-icon {
margin-bottom: 12px;
font-size: 36px !important;
color: #9df1f1 !important;
}
body.kc-elementor-contrast .ab-mission-num {
margin-bottom: 8px;
color: #ffffff !important;
font-family: 'Manrope', sans-serif;
font-size: clamp(2.4rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
text-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
body.kc-elementor-contrast .ab-mission-label {
color: rgba(255, 255, 255, 0.82) !important;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 500;
}
@media (max-width: 900px) {
body.kc-elementor-contrast .cal-hero-inner,
body.kc-elementor-contrast .cal-appt-inner {
grid-template-columns: 1fr;
}
body.kc-elementor-contrast .cal-hero-side {
display: none;
}
body.kc-elementor-contrast .cal-week-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 600px) {
body.kc-elementor-contrast .cal-hero,
body.kc-elementor-contrast .cal-schedule,
body.kc-elementor-contrast .cal-appt,
body.kc-elementor-contrast .cal-embed {
padding-right: 20px;
padding-left: 20px;
}
body.kc-elementor-contrast .cal-week-grid {
grid-template-columns: repeat(2, 1fr);
}
body.kc-elementor-contrast .cal-hours-row {
flex-direction: column;
align-items: flex-start;
padding: 14px 18px;
}
body.kc-elementor-contrast .cal-embed-wrap {
padding: 20px;
}
body.kc-elementor-contrast .ab-mission {
padding-right: 20px;
padding-left: 20px;
}
body.kc-elementor-contrast .ab-mission-inner {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* =============================================
HOMEPAGE REDESIGN — Keeratipon Urology Clinic
============================================= */
/* Force full-width on homepage — no sidebar */
.home #primary { max-width: 100%; width: 100%; }
.home .content-area { width: 100%; max-width: 100%; }
.home .site-content { display: block; }
.home .widget-area { display: none; }
.home article { max-width: 100%; }
.home .entry-content { padding: 0; max-width: 100%; }
.home .entry-header { display: none; }
/* Shared layout helpers */
.kc-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.kc-section-header {
text-align: center;
margin-bottom: 52px;
}
.kc-section-header.kc-left { text-align: left; }
.kc-section-tag {
display: inline-block;
background: var(--primary-light-color);
color: var(--primary-color);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 14px;
}
.kc-section-header h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
color: var(--dark-color);
margin: 0 0 12px;
}
.kc-section-header p {
color: var(--secondary-color);
font-size: 1.05rem;
max-width: 520px;
margin: 0 auto;
opacity: 0.8;
}
/* Buttons */
.kc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: var(--transition);
cursor: pointer;
border: 2px solid transparent;
}
.kc-btn-primary {
background: var(--primary-color);
color: #fff !important;
box-shadow: var(--shadow-cta);
}
.kc-btn-primary:hover {
background: var(--primary-dark-color);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0,78,71,0.28);
color: #fff !important;
}
.kc-btn-outline {
background: transparent;
color: var(--primary-color) !important;
border-color: var(--primary-color);
}
.kc-btn-outline:hover {
background: var(--primary-color);
color: #fff !important;
transform: translateY(-2px);
}
/* ── Services Section ── */
.kc-services-section {
padding: 88px 0 72px;
background: #f5fafa;
}
.kc-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.kc-service-card {
background: #fff;
border-radius: var(--radius-md);
padding: 36px 28px 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--grey-border);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.kc-service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.kc-service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: transparent;
}
.kc-service-card:hover::before { transform: scaleX(1); }
.kc-service-icon {
width: 56px;
height: 56px;
background: var(--primary-light-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 22px;
color: var(--primary-color);
transition: var(--transition);
}
.kc-service-card:hover .kc-service-icon {
background: var(--primary-color);
color: #fff;
}
.kc-service-card h3 {
font-size: 1.05rem;
margin: 0 0 10px;
color: var(--dark-color);
}
.kc-service-card p {
font-size: 0.92rem;
color: var(--secondary-color);
margin: 0;
line-height: 1.65;
}
.kc-services-cta { text-align: center; }
/* ── Doctor Section ── */
.kc-doctor-section {
padding: 88px 0;
background: #fff;
}
.kc-doctor-inner {
display: grid;
grid-template-columns: 420px 1fr;
gap: 72px;
align-items: center;
}
.kc-doctor-photo {
position: relative;
}
.kc-doctor-photo::before {
content: '';
position: absolute;
inset: -12px -12px 12px 12px;
background: var(--primary-light-color);
border-radius: var(--radius-lg);
z-index: 0;
}
.kc-doctor-photo img {
position: relative;
z-index: 1;
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: block;
}
.kc-doctor-info .kc-section-tag { margin-bottom: 16px; }
.kc-doctor-info h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 0 0 6px; }
.kc-doctor-title {
color: var(--accent-color);
font-weight: 600;
font-size: 1.05rem;
margin: 0 0 18px;
}
.kc-doctor-info > p { color: #555; line-height: 1.8; margin-bottom: 24px; }
.kc-doctor-highlights {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
}
.kc-doctor-highlights li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.93rem;
color: var(--secondary-color);
}
.kc-doctor-highlights li i {
color: var(--primary-color);
margin-top: 3px;
flex-shrink: 0;
}
/* ── Hours & Contact Section ── */
.kc-hours-section {
padding: 88px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
color: #fff;
}
.kc-hours-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.kc-hours-section .kc-section-tag {
background: rgba(255,255,255,0.15);
color: #fff;
}
.kc-hours-section h2 { color: #fff; margin-bottom: 28px; }
.kc-hours-table { display: flex; flex-direction: column; gap: 12px; }
.kc-hours-row {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.1);
border-radius: var(--radius-sm);
padding: 14px 20px;
backdrop-filter: blur(4px);
}
.kc-hours-row.kc-open { border-left: 3px solid #7dffd4; }
.kc-hours-row.kc-closed { border-left: 3px solid rgba(255,255,255,0.3); opacity: 0.7; }
.kc-day { font-weight: 600; }
.kc-time { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.kc-time i { opacity: 0.7; }
.kc-closed-label { opacity: 0.6; font-style: italic; }
.kc-contact-list {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: flex;
flex-direction: column;
gap: 16px;
}
.kc-contact-list li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 0.97rem;
}
.kc-contact-list li i {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 15px;
}
.kc-contact-list li span,
.kc-contact-list li a {
color: #fff;
text-decoration: none;
line-height: 1.6;
padding-top: 6px;
}
.kc-contact-list li a:hover { text-decoration: underline; }
/* ── Responsive ── */
@media (max-width: 992px) {
.kc-services-grid { grid-template-columns: repeat(2, 1fr); }
.kc-doctor-inner { grid-template-columns: 1fr; gap: 40px; }
.kc-doctor-photo { max-width: 380px; margin: 0 auto; }
.kc-hours-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
.kc-services-grid { grid-template-columns: 1fr; }
.kc-services-section, .kc-doctor-section, .kc-hours-section { padding: 60px 0; }
.kc-doctor-highlights { grid-template-columns: 1fr; }
}
/* ── Calendar Section ── */
.kc-calendar-section {
padding: 88px 0;
background: #f5fafa;
}
@media (max-width: 600px) {
.kc-calendar-section { padding: 60px 0; }
}