/* ===== DERMA CLINIC — CUSTOM THEME ===== */ /* --- Fonts --- */ /* Open Sans loaded locally — see fonts.css (loaded via artlogic.libraries.yml) */ /* Material Icons/Symbols loaded via html.html.twig */ /* --- CSS Variables --- */ :root { --primary: #0eb4bb; --primary-dark: #0a9aa0; --primary-light: #e6f9fa; --gold: #DFC15E; --gold-dark: #c9ac4e; --surface: #ffffff; --surface-container: #f5f5f5; --surface-container-low: #fafafa; --on-surface: #1a1a1a; --on-surface-variant: #5a5a5a; --outline: #e0e0e0; --outline-variant: #ebebeb; --text-body: #4b4b4b; --radius: 12px; --radius-sm: 6px; --radius-lg: 20px; --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-md: 0 4px 24px rgba(0,0,0,0.12); --shadow-lg: 0 8px 40px rgba(0,0,0,0.16); --shadow-primary: 0 4px 20px rgba(14,180,187,0.3); --transition: 0.25s cubic-bezier(0.4,0,0.2,1); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; color: var(--text-body); background-color: var(--surface); overflow-x: hidden; font-size: 19px; line-height: 1.65; } a { text-decoration: none; color: inherit; transition: color 0.2s; } a:hover { color: var(--primary); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; color: var(--on-surface); } h1 { font-size: clamp(2.16rem, 4.8vw, 3.36rem); margin-bottom: 1.2rem; } h2 { font-size: clamp(1.8rem, 3.6vw, 2.64rem); margin-bottom: 1rem; } h3 { font-size: clamp(1.32rem, 2.4vw, 1.8rem); margin-bottom: 0.75rem; } p { margin-bottom: 1rem; font-weight: 300; font-size: 1rem; color: var(--on-surface-variant); } .container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } /* ===== HEADER — static, not sticky/fixed ===== */ .site-header { position: relative; width: 100%; z-index: 400; background: #fff; box-shadow: var(--shadow); } .site-header.scrolled { box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 1.5rem; max-width: 1400px; margin: 0 auto; min-height: 80px; } .site-logo { flex-shrink: 0; } .site-logo img { max-height: 52px; width: auto; display: block; } /* Right side: stacked — top row (phone/wa/cta) + bottom row (nav) */ .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: 1; } /* Top row: phone, wa, cta */ .header-top-row { display: flex; align-items: center; gap: 1.25rem; padding: 0.55rem 0 0.45rem; border-bottom: 1px solid var(--outline-variant); width: 100%; justify-content: flex-end; } .header-phone a { color: var(--primary); font-weight: 600; font-size: 0.95rem; } .header-wa { color: #25d366; display: flex; align-items: center; transition: opacity 0.2s; } .header-wa:hover { opacity: 0.75; } /* --- Primary Nav --- */ .primary-nav > ul { list-style: none; display: flex; align-items: center; gap: 0; } .primary-nav > ul > li { position: relative; } /* Only the mega-menu li stays static so the fixed mega-menu can span full width */ .primary-nav > ul > li.has-megamenu { position: static; } .primary-nav > ul > li > a { display: flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; font-weight: 500; color: var(--on-surface); padding: 0.55rem 1rem; border-radius: var(--radius-sm); transition: color 0.2s, background 0.15s; white-space: nowrap; } .primary-nav > ul > li > a:hover, .primary-nav > ul > li.is-active > a { color: var(--primary); background: rgba(14,180,187,0.07); } .primary-nav > ul > li.is-active > a { font-weight: 700; border-bottom: 2px solid var(--primary); padding-bottom: calc(0.55rem - 2px); } .primary-nav > ul > li > a .nav-arrow { font-size: 0.85rem; transition: transform 0.25s; color: var(--on-surface-variant); } .primary-nav > ul > li.has-megamenu:hover > a .nav-arrow, .primary-nav > ul > li.has-megamenu.is-open > a .nav-arrow { transform: rotate(180deg); color: var(--primary); } /* ===== DROPDOWN NAVIGATION (2-level + 3-level, like admin toolbar) ===== */ /* L1 — li wrapper */ .primary-nav > ul > li.has-dropdown { position: relative; } /* L2 dropdown panel */ .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.14); border-top: 2px solid var(--primary); list-style: none; margin: 0; padding: 0.4rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s, visibility 0.15s; z-index: 9998; } /* Show L2 when parent li is hovered or .is-open */ .has-dropdown:hover > .nav-dropdown, .has-dropdown.is-open > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } /* L3 panel — positioned to the right of L2 item */ .nav-dropdown--l3 { top: -0.4rem; left: 100%; border-top: 2px solid var(--primary); border-radius: 0 10px 10px 10px; } /* Show L3 when L2 item hovered */ .has-subdropdown:hover > .nav-dropdown--l3, .has-subdropdown.is-open > .nav-dropdown--l3 { opacity: 1; visibility: visible; pointer-events: auto; } /* Dropdown items */ .nav-dropdown-item { position: relative; } .nav-dropdown-item > a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--on-surface); text-decoration: none; white-space: nowrap; transition: background 0.13s, color 0.13s; } .nav-dropdown-item > a:hover, .has-subdropdown:hover > a { background: rgba(14,180,187,0.08); color: var(--primary); } .nav-dropdown-item .nd-icon { font-size: 1rem; color: var(--primary); opacity: 0.75; flex-shrink: 0; } .nav-dropdown-item .nd-arrow { font-size: 0.9rem; margin-left: auto; color: var(--on-surface-variant); opacity: 0.5; } .nav-dropdown-item--all > a { border-top: 1px solid var(--outline-variant); margin-top: 0.2rem; font-weight: 600; color: var(--primary); font-size: 0.82rem; } /* Bridge to prevent gap closing dropdown */ .has-dropdown::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; } .has-subdropdown::after { content: ''; position: absolute; top: 0; right: -8px; width: 8px; height: 100%; } /* Backdrop */ .mega-backdrop { display: none; } /* ===== MOBILE DRAWER ===== */ .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); background: #fff; z-index: 10001; box-shadow: -4px 0 24px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); overflow-y: auto; overscroll-behavior: contain; } .mobile-drawer.is-open { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: flex-end; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--outline); } .drawer-close { background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--on-surface); font-size: 1.5rem; line-height: 1; } .drawer-nav { padding: 0.5rem 0 2rem; } .drawer-nav .drawer-item > a { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--on-surface); border-bottom: 1px solid var(--outline-variant); } .drawer-nav .drawer-item > a:hover { color: var(--primary); } .drawer-services-toggle { background: none; border: none; cursor: pointer; padding: 0.85rem 1.25rem; width: 100%; text-align: left; font-size: 1rem; font-weight: 600; color: var(--on-surface); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--outline-variant); font-family: inherit; } .drawer-services-toggle .material-symbols-outlined { transition: transform 0.25s; } .drawer-services-toggle.is-open .material-symbols-outlined { transform: rotate(180deg); } .drawer-categories { display: none; background: #fafafa; } .drawer-categories.is-open { display: block; } .drawer-cat-title { padding: 0.75rem 1.5rem 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); } .drawer-cat-items { list-style: none; } .drawer-cat-items li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.5rem; font-size: 0.9rem; color: var(--on-surface); border-bottom: 1px solid var(--outline-variant); } .drawer-cat-items li a:hover { color: var(--primary); background: rgba(14,180,187,0.06); } .drawer-cat-items .material-symbols-outlined { font-size: 0.95rem; color: var(--primary); opacity: 0.7; } .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .drawer-overlay.is-open { opacity: 1; visibility: visible; } /* ===== HEADER HEIGHT VAR ===== */ .site-header { --header-h: 80px; } /* .btn-cita — see standard button rules above */ /* Mobile menu toggle */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--on-surface); margin: 5px 0; transition: 0.3s; } /* Header is static — no offset needed */ main { padding-top: 0; } /* Full-width page wrapper — constrains content to header width */ .page-content-wrap { width: 100%; padding: 0; } /* Inner content sections inside page-content-wrap get their own padding */ .page-content-wrap > .section, .page-content-wrap > section { width: 100%; } /* Inner page content typography */ .page-content-wrap h1 { color: var(--primary); margin-bottom: 1.5rem; } .page-content-wrap h2 { color: var(--on-surface); margin-top: 2rem; margin-bottom: 1rem; } .page-content-wrap p { font-size: 1rem; line-height: 1.75; } .page-content-wrap a { color: var(--primary); } /* ===== HERO ===== */ .hero-section { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; background: #f7fbfb; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0.3) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 620px; padding: 4rem 1.5rem; margin-left: calc((100vw - 1400px)/2 + 1.5rem); } .hero-content .label { display: inline-block; background: rgba(14,180,187,0.12); color: var(--primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.85rem; border-radius: 100px; margin-bottom: 1.2rem; } .hero-content h1 { color: var(--on-surface); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 1.25rem; } .hero-content h1 span { color: var(--primary); } .hero-content p { font-size: 1.05rem; color: var(--on-surface-variant); margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } /* ===== BUTTON STANDARD: бирюза → золото при hover ===== */ .btn-primary, .btn-outline, .btn-book-card, .btn-cita, .estetica-book-btn, .bsf-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--primary); color: #fff !important; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; font-family: inherit; cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); letter-spacing: 0.01em; white-space: nowrap; } .btn-primary .material-symbols-outlined, .btn-outline .material-symbols-outlined, .btn-book-card .material-symbols-outlined { color: #fff !important; } .btn-primary:hover, .btn-primary:focus-visible, .btn-outline:hover, .btn-outline:focus-visible, .btn-book-card:hover, .btn-cita:hover, .estetica-book-btn:hover, .bsf-btn-submit:hover { background: var(--gold) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(223,193,94,0.45); } .btn-primary:active, .btn-outline:active, .btn-book-card:active, .btn-cita:active { transform: translateY(0); } /* Size variants */ .btn-primary { padding: 0.8rem 2rem; } .btn-outline { padding: 0.75rem 1.8rem; } .btn-cita { padding: 0.55rem 1.4rem; font-size: 0.9rem; } .btn-book-card { padding: 0.45rem 0.9rem; font-size: 0.82rem; margin-top: auto; align-self: flex-start; position: relative; z-index: 1; } .estetica-book-btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; } /* ===== SECTIONS ===== */ .section { padding: 5rem 0; } .section-sm { padding: 3rem 0; } .section-bg { background: var(--surface-container-low); } .section-dark { background: var(--surface-container); } .section-header { margin-bottom: 3rem; } .section-header.center { text-align: center; } .section-tag { display: inline-block; color: var(--primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; } .section-title { color: var(--primary); } /* ===== TREATMENTS GRID ===== */ .treatments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .treatment-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--outline-variant); padding: 1.75rem; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); cursor: pointer; position: relative; overflow: hidden; } .treatment-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .treatment-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-5px); } .treatment-card:hover::before { transform: scaleX(1); } .treatment-card .icon { width: 48px; height: 48px; background: rgba(14,180,187,0.1); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--primary); font-size: 1.5rem; } .treatment-card h3 { font-size: 1.1rem; color: var(--on-surface); margin-bottom: 0.5rem; } .treatment-card p { font-size: 0.9rem; margin-bottom: 0; } /* ===== ESTETICA SECTION ===== */ .estetica-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.5rem; } .estetica-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--outline-variant); transition: border-color 0.25s, box-shadow 0.25s; cursor: pointer; height: 260px; } .estetica-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } .estetica-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .estetica-card:hover img { transform: scale(1.04); } .estetica-card .card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.25rem; background: linear-gradient(transparent, rgba(0,0,0,0.65)); color: #fff; font-weight: 600; font-size: 1rem; } .estetica-card.featured { grid-column: span 2; height: 360px; } /* ===== TWO-COL SPLIT ===== */ .split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .split-section img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; height: auto; } .split-content .feature-list { list-style: none; margin: 1.5rem 0; } .split-content .feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--outline); font-size: 0.95rem; } .split-content .feature-list li:last-child { border-bottom: none; } .split-content .feature-list .icon { color: var(--primary); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; } /* ===== STATS BAR ===== */ .stats-bar { background: linear-gradient(135deg, #0cb3ba 0%, #0a9aa0 50%, #088f96 100%); width: 100%; display: flex; justify-content: center; align-items: stretch; } .stats-bar::before { display: none; } .stats-bar .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; padding: 4rem 0; width: 100%; } .stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; } .stat-item .number { display: block; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; } .stat-item .label { display: block; color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.3; } /* ===== CONTACT SECTION ===== */ .contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .contact-info .info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .contact-info .info-icon { color: var(--gold); font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; } .contact-info h3 { font-size: 0.95rem; font-weight: 700; color: var(--on-surface); margin-bottom: 0.2rem; } .contact-info p { margin: 0; font-size: 0.95rem; } .map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); height: 400px; } .map-embed iframe { width: 100%; height: 100%; border: none; } /* ===== CONTACT FORM ===== */ .contact-form-section { background: var(--surface-container-low); } .contact-form { max-width: 680px; margin: 0 auto; background: #fff; padding: 2.5rem; border-radius: var(--radius); box-shadow: var(--shadow); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--on-surface); margin-bottom: 0.4rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--on-surface); transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); } .form-group textarea { min-height: 120px; resize: vertical; } .form-submit { background: var(--primary); color: #fff; border: none; padding: 0.85rem 2rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; transition: background 0.2s; } .form-submit:hover { background: var(--primary-dark); } /* ===== FOOTER ===== */ .site-footer { background: #1a1a1a; color: rgba(255,255,255,0.75); padding: 3rem 0 1.5rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-brand img { max-height: 48px; margin-bottom: 1rem; filter: brightness(10); } .footer-brand p { font-size: 0.9rem; color: rgba(255,255,255,0.6); } .footer-col h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 0.5rem; } .footer-col ul li a { font-size: 0.9rem; color: rgba(255,255,255,0.6); transition: color 0.2s; } .footer-col ul li a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(255,255,255,0.4); } /* ===== UTILITY ===== */ .text-primary { color: var(--primary) !important; } .text-gold { color: var(--gold) !important; } .bg-primary { background-color: var(--primary) !important; } /* ===== RESPONSIVE ===== */ @media (max-width: 1200px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } } @media (max-width: 1024px) { .hero-content { margin-left: 1.5rem; } .split-section { grid-template-columns: 1fr; gap: 2.5rem; } .contact-section { grid-template-columns: 1fr; gap: 2.5rem; } .footer-grid { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .estetica-grid { grid-template-columns: 1fr; } .estetica-card.featured { height: 260px; } } @media (max-width: 768px) { .primary-nav, .header-phone { display: none; } .menu-toggle { display: block; } .hero-section { min-height: 70vh; } .hero-content { max-width: 100%; } .treatments-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } .stats-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; } .btn-primary, .btn-outline { width: 100%; justify-content: center; } } /* ===== DRUPAL OVERRIDES ===== */ #skip-link { display: none; } .visually-hidden { position: absolute; clip: rect(0,0,0,0); overflow: hidden; width: 1px; height: 1px; } .region-header { width: 100%; } /* ===== LANGUAGE SWITCHER ===== */ .lang-switcher { display: flex; align-items: center; } .lang-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; } .lang-switcher ul li { display: flex; align-items: center; } .lang-switcher ul li + li::before { content: '|'; color: var(--outline); margin-right: 0.15rem; font-size: 0.7rem; line-height: 1; } .lang-link { display: inline-block; padding: 0.15rem 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant); text-decoration: none; border-radius: 3px; transition: color 0.2s, background 0.2s; line-height: 1.4; } .lang-link:hover { color: var(--primary); background: rgba(var(--primary-rgb, 167, 139, 79), 0.08); } .lang-link.lang-active { color: var(--primary); font-weight: 700; pointer-events: none; } /* Mobile drawer language switcher */ .drawer-lang-switcher { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--outline-variant); } .drawer-lang-switcher .lang-link { font-size: 0.85rem; padding: 0.3rem 0.6rem; border: 1px solid var(--outline); border-radius: 4px; } .drawer-lang-switcher .lang-link.lang-active { background: var(--primary); color: #fff; border-color: var(--primary); pointer-events: none; } @media (max-width: 900px) { .lang-switcher { display: none; } } /* ===== CONTACTO PAGE ===== */ .contacto-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; padding: 3rem 0; } .contacto-info h2, .contacto-form h2 { font-size: 1.4rem; color: var(--primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--outline-variant); } .contacto-info p { margin-bottom: 1rem; font-size: 0.95rem; } .contacto-info strong { color: var(--on-surface); font-weight: 600; } @media (max-width: 768px) { .contacto-layout { grid-template-columns: 1fr; gap: 2rem; } } /* ===== WEBFORM STYLES ===== */ .webform-submission-form .form-item { margin-bottom: 1.25rem; } .webform-submission-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--on-surface); margin-bottom: 0.4rem; } .webform-submission-form input[type="text"], .webform-submission-form input[type="email"], .webform-submission-form input[type="tel"], .webform-submission-form input[type="date"], .webform-submission-form select, .webform-submission-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--outline); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--on-surface); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; } .webform-submission-form input:focus, .webform-submission-form select:focus, .webform-submission-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,180,187,0.12); } .webform-submission-form textarea { min-height: 120px; resize: vertical; } .webform-submission-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c7a7a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .webform-submission-form .form-type-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; } .webform-submission-form .form-type-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); } .webform-submission-form .form-type-checkbox label { font-size: 0.85rem; font-weight: 400; color: var(--on-surface-variant); margin: 0; } .webform-submission-form .form-type-checkbox label a { color: var(--primary); text-decoration: underline; } .webform-submission-form .form-actions { margin-top: 1.5rem; } .webform-submission-form .webform-button--submit, .webform-submission-form button[type="submit"] { background: var(--primary); color: #fff; border: none; padding: 0.85rem 2.5rem; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; transition: background 0.2s, transform 0.15s; font-family: inherit; letter-spacing: 0.02em; } .webform-submission-form .webform-button--submit:hover { background: var(--primary-dark); transform: translateY(-1px); } /* Confirmation message */ .webform-confirmation { background: rgba(14,180,187,0.08); border: 1px solid var(--primary); border-radius: var(--radius); padding: 1.5rem; color: var(--on-surface); font-weight: 500; } /* ===== NODE SERVICE PAGE ===== */ .node--type-service .layout-content { max-width: 860px; margin: 0 auto; } .node--type-service .field--name-body { font-size: 1rem; line-height: 1.75; } .node--type-service .field--name-body h2, .node--type-service .field--name-body h3 { color: var(--primary); margin-top: 2rem; } .node--type-service .field--name-body ul { list-style: none; padding: 0; margin: 1rem 0; } .node--type-service .field--name-body ul li { padding: 0.5rem 0 0.5rem 1.75rem; position: relative; border-bottom: 1px solid var(--outline-variant); font-size: 0.95rem; } .node--type-service .field--name-body ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--primary); border-radius: 50%; } /* Service page CTA block */ .service-cta { margin-top: 3rem; background: rgba(14,180,187,0.06); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .service-cta p { margin: 0; font-size: 1rem; font-weight: 500; color: var(--on-surface); } /* ===== GLASSMORPHISM HEADER (scrolled) ===== */ .site-header.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(0,0,0,0.1); } /* ===== REVIEWS SECTION ===== */ .reviews-section { background: var(--surface-container-low); } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .review-card { background: #fff; border-radius: var(--radius); padding: 1.75rem; border: 1px solid var(--outline-variant); transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; gap: 1rem; } .review-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .review-stars { display: flex; gap: 2px; } .review-text { font-size: 0.95rem; line-height: 1.7; color: var(--on-surface-variant); flex: 1; font-style: italic; margin: 0; } .review-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--outline-variant); } .review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .review-author strong { display: block; font-size: 0.9rem; color: var(--on-surface); } .review-location { font-size: 0.78rem; color: var(--on-surface-variant); display: flex; align-items: center; gap: 0.15rem; } .review-aggregate { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--outline-variant); border-radius: 100px; padding: 0.6rem 1.25rem; font-size: 0.9rem; color: var(--on-surface-variant); box-shadow: var(--shadow); } .review-aggregate strong { color: var(--on-surface); font-size: 1rem; } /* ===== FAQ SECTION ===== */ .faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .faq-item { background: #fff; border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--primary); box-shadow: 0 2px 16px rgba(14,180,187,0.12); } .faq-q { width: 100%; background: none; border: none; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--on-surface); cursor: pointer; font-family: inherit; transition: color var(--transition); } .faq-q:hover { color: var(--primary); } .faq-q[aria-expanded="true"] { color: var(--primary); } .faq-icon { font-size: 1.25rem; color: var(--primary); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); } .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-a { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.3s; } .faq-a:not([hidden]) { max-height: 400px; padding: 0 1.25rem 1.25rem; } .faq-a p { font-size: 0.9rem; line-height: 1.75; color: var(--on-surface-variant); margin: 0; } /* FAQ two-col grid — replaces inline style on front page */ .faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; gap: 2rem; } .faq-section > .container > div { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: 1fr; } } /* ===== FLOATING WHATSAPP ===== */ .floating-wa { position: fixed; bottom: 2rem; right: 2rem; z-index: 9995; opacity: 0; transform: scale(0.7) translateY(20px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; } .floating-wa.visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .floating-wa a { display: flex; align-items: center; gap: 0.65rem; background: #25d366; color: #fff; padding: 0.85rem 1.25rem 0.85rem 1rem; border-radius: 100px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 20px rgba(37,211,102,0.45); text-decoration: none; transition: box-shadow 0.25s, transform 0.2s; white-space: nowrap; } .floating-wa a:hover { box-shadow: 0 6px 28px rgba(37,211,102,0.6); transform: translateY(-2px); color: #fff; } .floating-wa svg { flex-shrink: 0; } .floating-wa .wa-label { display: none; } @media (min-width: 600px) { .floating-wa .wa-label { display: inline; } } @keyframes wa-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45); } 50% { box-shadow: 0 4px 36px rgba(37,211,102,0.75), 0 0 0 8px rgba(37,211,102,0.15); } } .floating-wa.pulse a { animation: wa-pulse 1s ease; } /* ===== SERVICE PAGE — IMPROVED LAYOUT ===== */ .service-layout { display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: start; } .service-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 2rem); } .service-toc-box { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; } .service-toc-box h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 1rem; } .toc-list { list-style: none; } .toc-list li { margin-bottom: 0.1rem; } .toc-list li.toc-sub { padding-left: 1rem; } .toc-list a { display: block; font-size: 0.875rem; color: var(--on-surface-variant); padding: 0.3rem 0.5rem; border-radius: 4px; border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; line-height: 1.4; } .toc-list a:hover, .toc-list a.toc-active { color: var(--primary); border-left-color: var(--primary); background: rgba(14,180,187,0.06); } .sidebar-cta { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: #fff; } .sidebar-cta p { color: rgba(255,255,255,0.9); font-size: 0.9rem; margin-bottom: 1rem; font-weight: 500; } .sidebar-cta .btn-cita { display: block; width: 100%; } .sidebar-cta .btn-cita:hover { background: rgba(255,255,255,0.9); transform: none; } .sidebar-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--outline-variant); text-decoration: none; color: var(--on-surface); transition: opacity 0.2s; } .sidebar-contact-item:last-child { border-bottom: none; } .sidebar-contact-item:hover { opacity: 0.8; } .sidebar-contact-item .material-symbols-outlined { font-size: 1.25rem; margin-top: 0.15rem; flex-shrink: 0; } @media (max-width: 900px) { .service-layout { grid-template-columns: 1fr; } .service-sidebar { position: static; order: -1; /* Show sidebar CTA above body content on mobile */ } } @media (max-width: 900px) { /* News sidebar: disable sticky and allow normal flow */ .news-sidebar { position: static; } } /* ===== SECTION DIVIDERS ===== */ .section-wave { overflow: hidden; line-height: 0; } .section-wave svg { display: block; } /* ===== BADGE / TRUST SIGNALS ===== */ .trust-badges { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--outline); } .trust-badge { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--on-surface-variant); font-weight: 600; } .trust-badge .material-symbols-outlined { font-size: 1.1rem; color: var(--primary); } /* ===== HERO ENHANCEMENTS ===== */ .hero-content .hero-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(14,180,187,0.1); border: 1px solid rgba(14,180,187,0.25); color: var(--primary-dark); font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 100px; letter-spacing: 0.02em; } .hero-badge .material-symbols-outlined { font-size: 0.9rem; } /* ===== SECTION TAG ENHANCED ===== */ .section-tag { display: inline-flex; align-items: center; gap: 0.35rem; } .section-tag::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--primary); border-radius: 2px; } /* ===== FOOTER ENHANCED ===== */ .site-footer { background: linear-gradient(160deg, #111 0%, #1a1a1a 60%, #0d1a1a 100%); } /* ===== IMAGE HOVER ZOOM ===== */ .estetica-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); } .estetica-card:hover img { transform: scale(1.06); } /* ===== SCROLL PROGRESS BAR ===== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--gold)); z-index: 10000; width: 0%; transition: width 0.1s linear; } /* ===== TREATMENT CARD WITH BOOKING ===== */ .treatment-card--linked { display: flex; flex-direction: column; } .card-title-link { text-decoration: none; color: inherit; } .card-title-link:hover h3 { color: var(--primary); } .card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--outline-variant); gap: 0.75rem; } .card-link-more { font-size: 0.82rem; color: var(--primary); font-weight: 600; white-space: nowrap; } .card-link-more:hover { text-decoration: underline; } .treatment-card--linked { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .treatment-card--linked h3 { color: var(--on-surface); transition: color var(--transition); } .treatment-card--linked:hover h3 { color: var(--primary); } /* .btn-book-card — see standard button rules above */ /* Estetica card book button */ .estetica-card--bookable { display: flex; flex-direction: column; } .estetica-book-btn { position: absolute; top: 1rem; right: 1rem; z-index: 5; border-radius: 100px; opacity: 0; transform: translateY(-4px); transition: opacity var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition); } .estetica-card--bookable:hover .estetica-book-btn { opacity: 1; transform: translateY(0); } /* Contact page booking hero */ .contact-booking-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--outline-variant); } @media (max-width: 768px) { .contact-booking-hero { grid-template-columns: 1fr; gap: 1.5rem; } } .contact-info-quick { display: flex; flex-direction: column; gap: 0.75rem; } .quick-info-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem 1rem; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition); } a.quick-info-item:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(14,180,187,0.12); } .quick-info-item .material-symbols-outlined { font-size: 1.3rem; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .quick-info-item strong { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface-variant); margin-bottom: 0.15rem; } .quick-info-item span { font-size: 0.9rem; color: var(--on-surface); font-weight: 500; } /* ===== COOKIE CONSENT ===== */ #sliding-popup { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; background: rgba(26, 26, 26, 0.97) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 2px solid var(--primary) !important; border-bottom: none !important; padding: 1rem 0 !important; z-index: 9990 !important; box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important; } #sliding-popup .popup-content { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; display: flex !important; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } #sliding-popup .popup-content p { color: rgba(255,255,255,0.85) !important; font-size: 0.9rem !important; margin: 0 !important; } #sliding-popup .popup-content a { color: var(--primary) !important; } #sliding-popup .agree-button, #sliding-popup .find-more-button { background: var(--primary) !important; border: none !important; border-radius: var(--radius-sm) !important; color: #fff !important; padding: 0.55rem 1.4rem !important; font-weight: 600 !important; font-size: 0.9rem !important; cursor: pointer !important; white-space: nowrap; } #sliding-popup .decline-button { background: transparent !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: var(--radius-sm) !important; color: rgba(255,255,255,0.7) !important; padding: 0.55rem 1.4rem !important; font-size: 0.9rem !important; cursor: pointer !important; } /* ===== ERROR PAGES ===== */ .error-page { text-align: center; padding: 6rem 1.5rem; max-width: 560px; margin: 0 auto; } .error-page .error-code { font-size: clamp(5rem, 20vw, 10rem); font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 1rem; opacity: 0.15; } .error-page h1 { color: var(--on-surface); margin-bottom: 1rem; } .error-page p { font-size: 1.1rem; margin-bottom: 2rem; } /* ===== BOOKING MODAL ===== */ .modal-booking { width: min(680px, 98vw); max-height: 94vh; } /* Steps indicator */ .modal-header-inner { display: flex; align-items: center; gap: 1rem; } .booking-steps-indicator { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .booking-step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--outline); color: var(--on-surface-variant); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); flex-shrink: 0; } .booking-step-dot.active { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(14,180,187,0.2); } .booking-step-dot.done { background: var(--primary-dark); color: #fff; } .booking-step-line { width: 24px; height: 2px; background: var(--outline); transition: background var(--transition); } .booking-step-line.done { background: var(--primary); } /* Step containers */ .booking-step { animation: fadeInStep 0.25s ease; } @keyframes fadeInStep { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .booking-step-content { min-height: 280px; } /* Nav buttons */ .booking-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; border-top: 1px solid var(--outline-variant); margin-top: 1.5rem; } /* Treatment picker */ .treatment-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } @media (max-width: 520px) { .treatment-picker { grid-template-columns: repeat(2, 1fr); } } .treatment-pick-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.5rem; border: 2px solid var(--outline-variant); border-radius: var(--radius); background: #fff; cursor: pointer; font-family: inherit; transition: border-color var(--transition), background var(--transition), transform var(--transition); text-align: center; } .treatment-pick-btn:hover { border-color: var(--pick-color, var(--primary)); background: rgba(14,180,187,0.04); transform: translateY(-2px); } .treatment-pick-btn.selected { border-color: var(--pick-color, var(--primary)); background: color-mix(in srgb, var(--pick-color, var(--primary)) 8%, #fff); } .treatment-pick-btn .pick-icon { font-size: 1.6rem; color: var(--pick-color, var(--primary)); } .treatment-pick-btn .pick-label { font-size: 0.78rem; font-weight: 600; color: var(--on-surface); line-height: 1.3; } /* Booking fields */ .booking-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 480px) { .booking-field-group { grid-template-columns: 1fr; } } .booking-field { display: flex; flex-direction: column; gap: 0.35rem; } .booking-field label { font-size: 0.82rem; font-weight: 600; color: var(--on-surface); } .booking-field label span { color: var(--primary); } .booking-field input, .booking-field textarea, .booking-field select { padding: 0.7rem 0.9rem; border: 1.5px solid var(--outline); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; color: var(--on-surface); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); } .booking-field input:focus, .booking-field textarea:focus, .booking-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,180,187,0.12); } .booking-privacy { grid-column: span 2; } .privacy-label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.82rem !important; font-weight: 400 !important; color: var(--on-surface-variant) !important; } .privacy-label input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--primary); } .privacy-label a { color: var(--primary); text-decoration: underline; } /* Calendar */ .booking-calendar { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; } .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .cal-header h3 { font-size: 1rem; color: var(--on-surface); font-weight: 600; } .cal-nav { background: none; border: none; cursor: pointer; color: var(--on-surface-variant); padding: 0.3rem; border-radius: var(--radius-sm); display: flex; align-items: center; transition: background var(--transition), color var(--transition); } .cal-nav:hover { background: var(--surface-container); color: var(--primary); } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.5rem; } .cal-weekdays span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--on-surface-variant); padding: 0.25rem 0; text-transform: uppercase; letter-spacing: 0.05em; } .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; font-family: inherit; color: var(--on-surface); transition: background var(--transition), color var(--transition); min-height: 36px; } .cal-day:hover:not(:disabled):not(.cal-day--empty) { background: rgba(14,180,187,0.12); color: var(--primary); } .cal-day--selected { background: var(--primary) !important; color: #fff !important; box-shadow: var(--shadow-primary); } .cal-day--today { font-weight: 700; color: var(--primary); } .cal-day--disabled, .cal-day:disabled { color: var(--outline); cursor: not-allowed; pointer-events: none; } .cal-day--weekend-sat { color: var(--primary); } .cal-day--weekend-sun { color: #e74c3c; } .cal-day--empty { pointer-events: none; } /* Time slots */ .time-slots-wrapper { border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.25rem; background: #fff; } .time-slots-title { font-size: 0.9rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.4rem; } .time-slots-title::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; } .time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 0.5rem; } .time-slot { padding: 0.5rem; border: 1.5px solid var(--outline-variant); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #fff; color: var(--on-surface); text-align: center; font-family: inherit; transition: border-color var(--transition), background var(--transition), transform var(--transition); } .time-slot:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .time-slot.selected { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-primary); } /* Booking summary box */ .booking-summary { background: rgba(14,180,187,0.06); border: 1px solid rgba(14,180,187,0.2); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; } .summary-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--on-surface); } .summary-item .material-symbols-outlined { font-size: 1.1rem; color: var(--primary); flex-shrink: 0; } /* Success screen */ .booking-success { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .success-icon { font-size: 3.5rem; animation: successPop 0.4s cubic-bezier(0.34,1.56,0.64,1); } @keyframes successPop { from { transform: scale(0); } to { transform: scale(1); } } .booking-success h3 { font-size: 1.4rem; color: var(--primary); } .booking-success p { color: var(--on-surface-variant); max-width: 400px; } .success-summary { background: var(--surface-container-low); border-radius: var(--radius); padding: 1rem 1.5rem; font-size: 0.9rem; color: var(--on-surface); line-height: 1.8; text-align: left; width: 100%; max-width: 380px; } .btn-wa-confirm { display: inline-flex; align-items: center; gap: 0.6rem; background: #25d366; color: #fff !important; padding: 0.85rem 1.75rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: background var(--transition), box-shadow var(--transition), transform var(--transition); box-shadow: 0 4px 16px rgba(37,211,102,0.4); } .btn-wa-confirm * { color: #fff !important; } .btn-wa-confirm svg { fill: #fff !important; } .btn-wa-confirm:hover { background: #1db954; box-shadow: 0 6px 24px rgba(37,211,102,0.6); transform: translateY(-1px); color: #fff !important; } /* ===== MODAL PEDIR CITA ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10010; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; backdrop-filter: blur(3px); } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal-cita { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.97); width: min(560px, 95vw); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: none; border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,0.25); z-index: 10011; padding: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; } .modal-cita.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* Fallback for browsers that support natively */ .modal-cita[open] { display: block; opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .modal-cita::backdrop { background: transparent; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid var(--outline-variant); position: sticky; top: 0; background: #fff; z-index: 1; } .modal-header h2 { font-size: 1.3rem; color: var(--primary); margin: 0 0 0.2rem; } .modal-header p { font-size: 0.85rem; color: var(--on-surface-variant); margin: 0; } .modal-close { background: none; border: none; cursor: pointer; color: var(--on-surface-variant); padding: 0.3rem; border-radius: 50%; transition: background 0.15s; flex-shrink: 0; } .modal-close:hover { background: var(--surface-container); } .modal-body { padding: 1.5rem 1.75rem 2rem; } body.modal-open { overflow: hidden; } /* ===== FOOTER LINKS ROW ===== */ .footer-links { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-social { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } /* ===== NEWS / BLOG LISTING ===== */ .news-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; } @media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .news-card { background: var(--surface-container-low); border-radius: var(--radius); border: 1px solid var(--outline-variant); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } .news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .news-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; } .news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .news-card:hover .news-card-img img { transform: scale(1.04); } .news-card-body { padding: 1.25rem; } .news-date { font-size: 0.78rem; color: var(--on-surface-variant); display: block; margin-bottom: 0.5rem; } .news-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; } .news-tag { font-size: 0.75rem; font-weight: 600; color: var(--primary); background: rgba(14,180,187,0.08); padding: 0.2rem 0.6rem; border-radius: 999px; text-decoration: none; transition: background 0.2s; } .news-tag:hover { background: rgba(14,180,187,0.18); } .news-card-title { font-size: 1.05rem; margin-bottom: 0.6rem; line-height: 1.4; } .news-card-title a { color: var(--on-surface); text-decoration: none; transition: color 0.2s; } .news-card-title a:hover { color: var(--primary); } .news-card-summary { font-size: 0.88rem; color: var(--on-surface-variant); line-height: 1.5; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-read-more { font-size: 0.88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.2rem; } .news-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 2rem); } /* ===== HERO VIDEO BACKGROUND ===== */ .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; } .hero-video-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10,30,30,0.45) 0%, rgba(10,30,30,0.25) 50%, rgba(10,30,30,0.55) 100% ); z-index: 1; } @media (min-width: 768px) { .hero-video-overlay { background: linear-gradient( 90deg, rgba(255,255,255,0.82) 36%, rgba(255,255,255,0.1) 100% ); } } /* Hide per-slide images when video is playing */ .slide-bg--hidden { display: none; } /* Show per-slide image if video fails or is hidden */ .no-video .slide-bg--hidden { display: block; } .no-video .hero-video-bg { display: none; } .no-video .hero-video-overlay { display: none; } /* Per-slide overlay becomes transparent since video overlay handles it */ .slide-overlay--video { background: transparent !important; } /* Reduce motion: hide video */ @media (prefers-reduced-motion: reduce) { .hero-video-bg { display: none; } .slide-bg--hidden { display: block; } .slide-overlay--video { background: inherit !important; } } /* ===== BOOKING PAGE ===== */ .booking-page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; padding: 5rem 0 3rem; text-align: left; } .booking-page-hero .section-tag { background: rgba(255,255,255,0.2); color: #fff; border-color: rgba(255,255,255,0.3); } .booking-page-hero h1 { color: #fff; margin-bottom: 0.75rem; text-align: left; } .booking-page-hero p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 0; text-align: left; } .booking-page-wrap { padding: 3rem 0 5rem; } .booking-page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; } @media (max-width: 900px) { .booking-page-grid { grid-template-columns: 1fr; } } .booking-page-form-col { background: #fff; border-radius: var(--radius); border: 1px solid var(--outline-variant); overflow: hidden; } .bpage-steps { display: flex; align-items: center; gap: 0; padding: 1.5rem 2rem; background: var(--surface-container-low); border-bottom: 1px solid var(--outline-variant); } .bpage-step-item { display: flex; align-items: center; gap: 0.6rem; opacity: 0.45; transition: opacity 0.2s; } .bpage-step-item.active, .bpage-step-item.done { opacity: 1; } .bpage-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--outline); color: var(--on-surface-variant); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .bpage-step-item.active .bpage-step-num { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(14,180,187,0.2); } .bpage-step-item.done .bpage-step-num { background: var(--primary-dark); color: #fff; } .bpage-step-label { font-size: 0.8rem; font-weight: 600; color: var(--on-surface); } .bpage-step-line { flex: 1; height: 2px; background: var(--outline); margin: 0 0.5rem; transition: background 0.2s; } .bpage-step-line.done { background: var(--primary); } .bpage-panel { padding: 2rem; } .bpage-panel[hidden] { display: none; } .bpage-panel-title { font-size: 1.2rem; color: var(--on-surface); margin-bottom: 1.5rem; } .bpage-cal-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 600px) { .bpage-cal-time-grid { grid-template-columns: 1fr; } .bpage-panel { padding: 1.25rem; } } .bpage-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--outline-variant); gap: 1rem; } .booking-page-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 2rem); } .booking-sidebar-card { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; } .booking-sidebar-card h3 { font-size: 1rem; color: var(--primary); margin-bottom: 1rem; } .bsidebar-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--outline-variant); font-size: 0.9rem; } .bsidebar-item:last-of-type { border-bottom: none; } .bsidebar-item .material-symbols-outlined { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .bsidebar-item a { color: var(--on-surface); text-decoration: none; } .bsidebar-item a:hover { color: var(--primary); } .booking-sidebar-trust { } .trust-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0; font-size: 0.85rem; font-weight: 500; color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-variant); } .trust-item:last-child { border-bottom: none; } .trust-item .material-symbols-outlined { color: var(--primary); font-size: 1.1rem; } /* ===== BOOKING SINGLE FORM (bsf) ===== */ .bsf-section { padding: 2rem; border-bottom: 1px solid var(--outline-variant); } .bsf-section:last-of-type { border-bottom: none; } .bsf-title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; color: var(--on-surface); margin-bottom: 1.5rem; } .bsf-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bsf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 600px) { .bsf-row { grid-template-columns: 1fr; } .bsf-section { padding: 1.25rem; } } .bsf-privacy { margin-top: 1rem; } .bsf-submit { padding: 1.5rem 2rem 2rem; text-align: center; } .bsf-btn-submit { font-size: 1.05rem; padding: 0.9rem 2.5rem; width: 100%; max-width: 400px; justify-content: center; } .bsf-success { padding: 3rem 2rem; text-align: center; } .treatment-picker--page { grid-template-columns: repeat(4, 1fr); } @media (max-width: 700px) { .treatment-picker--page { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .treatment-picker--page { grid-template-columns: repeat(2, 1fr); } } /* ===== REVIEWS CAROUSEL ===== */ .reviews-carousel { margin-top: 3rem; position: relative; --rc-visible: 4; --rc-gap: 1.5rem; } @media (max-width: 1099px) { .reviews-carousel { --rc-visible: 3; } } @media (max-width: 767px) { .reviews-carousel { --rc-visible: 2; } } @media (max-width: 479px) { .reviews-carousel { --rc-visible: 1; } } .reviews-track-wrap { overflow: hidden; width: 100%; } .reviews-track { display: flex; flex-wrap: nowrap; gap: var(--rc-gap); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .reviews-slide { flex: 0 0 calc((100% - var(--rc-gap) * (var(--rc-visible) - 1)) / var(--rc-visible)); min-width: 0; box-sizing: border-box; } .reviews-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; } .reviews-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--outline); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--on-surface); transition: border-color 0.2s, background 0.2s, color 0.2s; flex-shrink: 0; } .reviews-nav-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary); color: #fff; } .reviews-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .reviews-dots { display: flex; gap: 0.4rem; align-items: center; } .rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--outline); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .rc-dot--active { background: var(--primary); transform: scale(1.3); } /* ===== FAQ ACCORDION OPEN STATE ===== */ .faq-item.faq-open .faq-q { color: var(--primary); } .faq-item.faq-open .faq-icon { transform: rotate(180deg); color: var(--primary); } .faq-a { overflow: hidden; } .faq-icon { transition: transform 0.25s ease; } /* ===== NEWS ARTICLE PAGE ===== */ .news-article { padding-bottom: 4rem; } .news-article-hero { width: 100%; max-height: 480px; overflow: hidden; background: var(--surface-container); } .news-article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 480px; } .news-article-body { max-width: 780px; margin: 0 auto; padding: 2.5rem 0 3rem; } .news-breadcrumb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--on-surface-variant); flex-wrap: wrap; margin-bottom: 1.5rem; } .news-breadcrumb a { color: var(--primary); } .news-breadcrumb .material-symbols-outlined { font-size: 0.9rem; } .news-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } .news-article-meta { font-size: 0.85rem; color: var(--on-surface-variant); margin-bottom: 0.75rem; } .news-article-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin-bottom: 2rem; color: var(--on-surface); } .news-article-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-body); } .news-article-content h2 { margin: 2rem 0 1rem; font-size: 1.5rem; } .news-article-content h3 { margin: 1.5rem 0 0.75rem; font-size: 1.2rem; } .news-article-content p { margin-bottom: 1.25rem; } .news-article-content ul, .news-article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; } .news-article-content li { margin-bottom: 0.4rem; } .news-article-content img { border-radius: var(--radius); max-width: 100%; margin: 1.5rem auto; } .news-article-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--outline-variant); } @media (max-width: 767px) { .news-article-hero { max-height: 260px; } .news-article-hero img { max-height: 260px; } .news-article-body { padding: 1.5rem 0 2rem; } } /* ===== TEAM 2-COLUMN GRID ===== */ .team-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (max-width: 600px) { .team-grid-2col { grid-template-columns: 1fr; } } .team-grid-2col .treatment-card { display: flex; align-items: flex-start; gap: 1.5rem; text-align: left; padding: 1.75rem; } .team-grid-2col .treatment-card img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; flex-shrink: 0; } .team-grid-2col .treatment-card > div:last-child { flex: 1; } /* ===== CONTACT PAGE ===== */ .contact-page-section { padding: 2rem 0 4rem; } .contact-page-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; } @media (max-width: 900px) { .contact-page-grid { grid-template-columns: 1fr; } } .contact-info-blocks { display: flex; flex-direction: column; gap: 0; } .contact-info-block { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--outline-variant); text-decoration: none; color: var(--on-surface); transition: color 0.2s; } .contact-info-block:last-child { border-bottom: none; } a.contact-info-block:hover { color: var(--primary); } .contact-info-block .material-symbols-outlined { color: var(--primary); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; } .contact-info-block strong { display: block; font-size: 0.78rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; } .contact-info-block span { font-size: 0.95rem; } .contact-page-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 2rem); } .contact-sidebar-book { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.5rem; } .contact-sidebar-book h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 0.5rem; } .contact-sidebar-book p { font-size: 0.9rem; color: var(--on-surface-variant); margin-bottom: 0; } /* ===== TEAM MEMBER CARD ===== */ .team-member-card { display: flex; flex-direction: column; gap: 1rem; text-align: left !important; } .team-member-identity { display: flex; align-items: center; gap: 1rem; } .team-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .team-avatar--placeholder { background: var(--surface-container); display: flex; align-items: center; justify-content: center; } .team-avatar--placeholder .material-symbols-outlined { font-size: 2rem; color: var(--primary); } .team-member-name-role { flex: 1; } .team-member-name-role h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--on-surface); } .team-role { color: var(--primary); font-weight: 600; font-size: 0.88rem; margin: 0; } .team-bio { font-size: 0.9rem; color: var(--on-surface-variant); line-height: 1.6; margin: 0; text-align: left; } @media (max-width: 600px) { .team-grid-2col { grid-template-columns: 1fr; } } /* ===== TREATMENT CARD LINK ===== */ .treatment-card-link { color: inherit; text-decoration: none; } .treatment-card-link:hover { color: var(--primary); } .treatment-card--linked { cursor: default; } /* Remove page-content-wrap padding when it wraps article nodes */ .page-content-wrap:has(.news-article-hero) { padding-top: 0; } @media (max-width: 900px) { .news-article-sidebar { position: static; } } .sidebar-widget { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; } .sidebar-widget-title { font-size: 0.82rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } .sidebar-recent-list { list-style: none; } .sidebar-recent-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--outline-variant); display: flex; flex-direction: column; gap: 0.15rem; } .sidebar-recent-list li:last-child { border-bottom: none; } .sidebar-recent-list a { font-size: 0.88rem; font-weight: 500; color: var(--on-surface); line-height: 1.4; } .sidebar-recent-list a:hover { color: var(--primary); } .sidebar-recent-date { font-size: 0.75rem; color: var(--on-surface-variant); } .sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .sidebar-archive-list { list-style: none; } .sidebar-archive-list li { border-bottom: 1px solid var(--outline-variant); } .sidebar-archive-list li:last-child { border-bottom: none; } .sidebar-archive-list a { display: block; padding: 0.45rem 0; font-size: 0.88rem; color: var(--on-surface); } .sidebar-archive-list a:hover { color: var(--primary); } /* Admin toolbar overrides are in artlogic/admin-toolbar library (css/admin-toolbar.css), loaded only for authenticated users with toolbar access. */ /* ===== TEAM — FULL CARDS (About page) ===== */ .team-full-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; margin-top: 2.5rem; } .team-full-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .team-full-photo-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-container); } .team-full-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; } .team-full-card:hover .team-full-photo { transform: scale(1.04); } .team-full-photo--placeholder { display: block; background: #e6f9fa; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .team-full-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; } .team-full-name { font-size: 1.25rem; font-weight: 700; color: var(--on-surface); margin: 0; } .team-full-role { font-size: 0.88rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .team-full-bio { font-size: 0.92rem; color: var(--on-surface-variant); line-height: 1.65; margin: 0; } .team-full-certs { border-top: 1px solid var(--outline-variant); padding-top: 0.75rem; margin-top: 0.25rem; } .team-certs-label { font-size: 0.8rem; font-weight: 600; color: var(--on-surface); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem; } .team-certs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .team-certs-list li { font-size: 0.85rem; color: var(--on-surface-variant); display: flex; align-items: flex-start; gap: 0.4rem; line-height: 1.4; } .team-certs-list li::before { content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; } .team-full-social { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; } .team-social-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--primary); text-decoration: none; font-weight: 500; } .team-social-link:hover { text-decoration: underline; } /* ===== TEAM — HOME CARDS (Front page) ===== */ .team-grid-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2.5rem; } .team-home-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .team-home-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.13); transform: translateY(-3px); } .team-home-photo-wrap { width: 100%; aspect-ratio: 3/2; overflow: hidden; background: var(--surface-container); } .team-home-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; } .team-home-card:hover .team-home-photo { transform: scale(1.04); } .team-home-photo--placeholder { width: 100%; height: 100%; display: block; background: #e6f9fa; object-fit: cover; object-position: center top; } .team-home-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .team-home-name { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); margin: 0; } .team-home-role { font-size: 0.82rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .team-home-bio { font-size: 0.88rem; color: var(--on-surface-variant); line-height: 1.6; margin: 0; flex: 1; } .team-home-certs { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.2rem; } .team-home-certs li { font-size: 0.8rem; color: var(--on-surface-variant); line-height: 1.35; } .team-home-link { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; } .team-home-link:hover { text-decoration: underline; } @media (max-width: 767px) { .team-full-grid { grid-template-columns: 1fr; } .team-grid-home { grid-template-columns: 1fr; } } /* ===== PAGE HERO (listing pages) ===== */ .page-hero { background: linear-gradient(135deg, var(--primary-dark, #0a8a91) 0%, var(--primary) 100%); color: #fff; padding: 3.5rem 0 3rem; width: 100%; margin: 0; } .page-hero * { color: #fff !important; } .page-hero a { color: rgba(255,255,255,0.85) !important; } .page-hero .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } .page-hero-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; margin: 0.5rem 0 0.75rem; text-align: left; color: #fff !important; } .page-hero-sub { font-size: 1.05rem; opacity: 0.88; max-width: 600px; line-height: 1.6; margin: 0; text-align: left; color: #fff !important; } .page-hero .breadcrumb, .page-hero .breadcrumb a, .page-hero .breadcrumb span { color: rgba(255,255,255,0.75) !important; } /* No gap between header and hero */ .page-content-wrap > .page-hero:first-child { margin-top: 0; } .page-content-wrap { padding: 0; } /* ===== FILTER TABS ===== */ .filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .filter-tabs--secondary { margin-top: -1rem; } .filter-tab { padding: 0.45rem 1.1rem; border: 1.5px solid var(--outline-variant); border-radius: 999px; background: #fff; font-size: 0.85rem; font-weight: 500; cursor: pointer; color: var(--on-surface-variant); transition: all 0.18s; } .filter-tab:hover, .filter-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } .filter-tab-sm { padding: 0.3rem 0.85rem; border: 1px solid var(--outline-variant); border-radius: 999px; background: #fff; font-size: 0.78rem; font-weight: 500; cursor: pointer; color: var(--on-surface-variant); transition: all 0.18s; } .filter-tab-sm:hover, .filter-tab-sm.is-active { background: var(--primary-light, #0eb4bb22); border-color: var(--primary); color: var(--primary); } /* ===== ARTICLES GRID ===== */ .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .article-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .article-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.13); transform: translateY(-3px); } .article-card-img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--surface-container); } .article-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .article-card:hover .article-card-img { transform: scale(1.04); } .article-card-img-wrap--placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--outline-variant); } .article-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--gold, #DFC15E); color: #000; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .article-card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .article-cat-tag { font-size: 0.75rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; } .article-card-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3; } .article-card-title a { color: var(--on-surface); text-decoration: none; } .article-card-title a:hover { color: var(--primary); } .article-card-summary { font-size: 0.88rem; color: var(--on-surface-variant); line-height: 1.55; flex: 1; } .article-card-meta { font-size: 0.78rem; color: var(--on-surface-variant); display: flex; gap: 1rem; } .article-card-link { font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; margin-top: 0.25rem; } /* ===== FAQ PAGE ===== */ .faq-container { max-width: 860px; margin: 0 auto; } .faq-group { margin-bottom: 2.5rem; } .faq-cat-title { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); } .faq-item { border: 1px solid var(--outline-variant); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; } .faq-question { width: 100%; text-align: left; background: #fff; border: none; padding: 1.1rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--on-surface); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background 0.15s; } .faq-question:hover { background: var(--surface-container); } .faq-question[aria-expanded="true"] { background: var(--surface-container); color: var(--primary); } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-icon { flex-shrink: 0; transition: transform 0.25s; color: var(--primary); } .faq-answer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; } .faq-answer-inner { padding: 0 1.25rem 1.1rem; font-size: 0.95rem; color: var(--on-surface-variant); line-height: 1.7; } .faq-cta-box { margin-top: 3rem; background: var(--surface-container); border-radius: var(--radius); padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .faq-cta-box p { font-size: 1.05rem; font-weight: 600; margin: 0; } .faq-cta-box .btn { display: inline-block; padding: 0.7rem 1.75rem; border-radius: 999px; font-weight: 600; text-decoration: none; } .faq-cta-box .btn-primary { background: var(--primary); color: #fff; } .faq-cta-box .btn-outline { border: 2px solid var(--primary); color: var(--primary); } /* ===== GALLERY PAGE ===== */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .gallery-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.2s, transform 0.2s; } .gallery-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.16); transform: translateY(-3px); } .gallery-card-link { display: block; text-decoration: none; color: inherit; } .gallery-card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-container); } .gallery-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .gallery-card:hover .gallery-card-img { transform: scale(1.06); } .gallery-card-img-wrap--placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--outline-variant); } .gallery-badge { position: absolute; top: 0.7rem; left: 0.7rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px; letter-spacing: 0.04em; } .gallery-badge--ba { background: var(--primary); color: #fff; } .gallery-badge--video { background: rgba(0,0,0,0.7); color: #fff; display: flex; align-items: center; gap: 0.3rem; } .gallery-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 1rem 0.75rem 0.5rem; color: #fff; display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; opacity: 0; transition: opacity 0.2s; } .gallery-card:hover .gallery-card-overlay { opacity: 1; } .gallery-card-body { padding: 1rem 1.25rem 1.25rem; background: #fff; } .gallery-card-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--on-surface); } .gallery-treat-tag { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; } /* ===== GALLERY LIGHTBOX ===== */ .gallery-lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 2rem; } .glb-item { position: relative; border: none; padding: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: var(--surface-container); } .glb-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; display: block; } .glb-item:hover .glb-thumb { transform: scale(1.07); } .glb-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); color: #fff; transition: background 0.2s; } .glb-zoom .material-symbols-outlined { font-size: 2.5rem; opacity: 0; transition: opacity 0.2s; } .glb-item:hover .glb-zoom { background: rgba(0,0,0,0.3); } .glb-item:hover .glb-zoom .material-symbols-outlined { opacity: 1; } /* Lightbox modal */ .glb-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; } .glb-modal[hidden] { display: none; } .glb-content { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; } .glb-modal-img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 60px rgba(0,0,0,0.6); } .glb-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.12); border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.2s; z-index: 1; } .glb-close .material-symbols-outlined { font-size: 1.5rem; } .glb-close:hover { background: rgba(255,255,255,0.25); } .glb-prev, .glb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.2s; z-index: 1; } .glb-prev { left: 1rem; } .glb-next { right: 1rem; } .glb-prev .material-symbols-outlined, .glb-next .material-symbols-outlined { font-size: 2rem; } .glb-prev:hover, .glb-next:hover { background: rgba(255,255,255,0.25); } .glb-caption { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 0.9rem; text-align: center; max-width: 60%; } .glb-counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.85rem; background: rgba(0,0,0,0.4); padding: 0.2rem 0.75rem; border-radius: 999px; } /* Video section */ .gallery-video-section { margin-bottom: 2.5rem; padding: 1.5rem; background: var(--surface-container); border-radius: var(--radius); } .gallery-video-title { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; } .gallery-video-title .material-symbols-outlined { color: var(--primary); } .gallery-videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .gallery-video-item { cursor: pointer; } .gallery-video-thumb-wrap { position: relative; aspect-ratio: 16/9; border-radius: calc(var(--radius) * 0.75); overflow: hidden; background: #111; } .gallery-video-thumb { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; } .gallery-video-item:hover .gallery-video-thumb { opacity: 0.75; } .gallery-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); } .gallery-play-btn .material-symbols-outlined { font-size: 4rem; color: var(--primary); filter: drop-shadow(0 2px 12px rgba(14,180,187,0.5)); transition: transform 0.2s; } .gallery-video-item:hover .gallery-play-btn .material-symbols-outlined { transform: scale(1.12); } .gallery-video-label { margin-top: 0.5rem; font-size: 0.88rem; font-weight: 700; color: var(--primary); text-align: center; } .gallery-video-title { color: var(--primary); } /* Video modal */ .glb-video-modal .glb-content { width: min(90vw, 1000px); } .glb-video { width: 100%; border-radius: 8px; background: #000; box-shadow: 0 8px 60px rgba(0,0,0,0.6); } /* Gallery actions */ .gallery-actions { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; } .gallery-actions .btn { display: inline-block; padding: 0.7rem 1.75rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 0.95rem; } .gallery-actions .btn-primary { background: var(--primary); color: #fff; } .gallery-actions .btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; } @media (max-width: 600px) { .gallery-lb-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .glb-prev { left: 0.25rem; } .glb-next { right: 0.25rem; } } .gallery-desc { font-size: 1rem; color: var(--on-surface-variant); line-height: 1.65; margin-bottom: 2rem; max-width: 700px; } /* ===== TEAM PROFILE (individual) ===== */ .team-profile-layout { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; } .team-profile-sidebar { position: sticky; top: 6rem; } .team-profile-photo { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); } .team-profile-photo--placeholder { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-container); border-radius: var(--radius); font-size: 5rem; color: var(--primary); } .team-profile-certs, .team-profile-social { margin-top: 1.5rem; } .team-profile-certs h3 { font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .team-profile-certs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .team-profile-certs li { font-size: 0.85rem; color: var(--on-surface-variant); padding-left: 1.1rem; position: relative; } .team-profile-certs li::before { content: '✓'; color: var(--primary); font-weight: 700; position: absolute; left: 0; } .team-profile-name { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.25rem; } .team-profile-bio { font-size: 0.98rem; color: var(--on-surface-variant); line-height: 1.7; margin-top: 1rem; } @media (max-width: 767px) { .team-profile-layout { grid-template-columns: 1fr; } .team-profile-sidebar { position: static; } .articles-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } /* ===== FOOTER SITEMAP COLUMN ===== */ .footer-col--sitemap { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 1.5rem; } .footer-sitemap-xml { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .footer-xml-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; } .footer-xml-link:hover { color: var(--primary); } .footer-lang-switcher { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; } .footer-lang-btn { display: inline-block; padding: 0.2rem 0.65rem; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; color: rgba(255,255,255,0.45); text-decoration: none; transition: all 0.18s; text-transform: uppercase; letter-spacing: 0.05em; } .footer-lang-btn:hover, .footer-lang-btn.is-active { border-color: var(--primary); color: var(--primary); background: rgba(14,180,187,0.1); } /* ===== REMOVE DRUPAL WRAPPER GAPS ===== */ /* Drupal wraps content in block divs — strip all margin/padding so page-hero sits flush */ #main-content > div, #main-content > div > div, #block-artlogic-content, .block-system-main-block, .layout-container, .dialog-off-canvas-main-canvas > main > div { margin: 0 !important; padding: 0 !important; } /* Node article wrapper — no margin */ article.node { margin: 0; padding: 0; } /* Any empty space before page-hero */ .page-hero:first-child, main > div > div > .page-hero, main > div > div > article > .page-hero { margin-top: 0; } /* ===== MOBILE DRAWER — sub items ===== */ .drawer-about-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 1rem 1.25rem; font-size: 1rem; font-weight: 500; color: var(--on-surface); border-bottom: 1px solid var(--outline-variant); text-align: left; } .drawer-about-toggle .material-symbols-outlined { font-size: 1.2rem; color: var(--on-surface-variant); transition: transform 0.25s; } .drawer-about-toggle.is-open .material-symbols-outlined { transform: rotate(180deg); } .drawer-item--has-sub .drawer-sub { list-style: none; padding: 0; margin: 0; background: var(--surface-container-low, #f5f5f5); } .drawer-sub li a { display: block; padding: 0.75rem 1.75rem; font-size: 0.92rem; color: var(--on-surface-variant); text-decoration: none; border-bottom: 1px solid var(--outline-variant); } .drawer-sub li a:hover { color: var(--primary); background: rgba(14,180,187,0.06); } /* Contacts block — phone + WA centered */ .drawer-contacts { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 1.25rem; border-top: 1px solid var(--outline-variant); margin-top: 0.25rem; } .drawer-phone { display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-weight: 600; font-size: 1rem; text-decoration: none; } .drawer-phone .material-symbols-outlined { font-size: 1.1rem; } .drawer-wa-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #22c55e; color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.6rem 1.5rem; border-radius: 100px; text-decoration: none; transition: background 0.2s; } .drawer-wa-btn:hover { background: #16a34a; } /* ===== ABOUT US PAGE ===== */ /* Hero */ .about-hero { position: relative; min-height: 380px; display: flex; align-items: center; background: url('https://images.unsplash.com/photo-1516549655169-df83a0774514?w=1600&q=80') center/cover no-repeat; } .about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10,30,50,0.82) 40%, rgba(14,180,187,0.45) 100%); } .about-hero__content { position: relative; z-index: 1; padding: 5rem 1.5rem 4rem; color: #fff; text-align: left; max-width: 1400px; width: 100%; box-sizing: border-box; } .about-hero__title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 0.5rem 0 1rem; color: #fff; } .about-hero__sub { font-size: 1.15rem; max-width: 600px; opacity: 0.9; line-height: 1.6; margin: 0; text-align: left; } .about-hero .section-tag { background: rgba(14,180,187,0.25); color: #7ee8ed; border-color: rgba(14,180,187,0.4); } /* Story */ .about-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-story__text p { color: var(--on-surface-variant); line-height: 1.7; } .about-story__stats { display: flex; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--outline-variant); } .about-stat__num { display: block; font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; } .about-stat__label { display: block; font-size: 0.8rem; color: var(--on-surface-variant); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; } .about-story__image-wrap { position: relative; border-radius: var(--radius-lg); overflow: visible; } .about-story__image { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; } .about-story__badge { position: absolute; bottom: -1.25rem; left: -1.25rem; background: var(--primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius); display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; box-shadow: 0 4px 16px rgba(14,180,187,0.4); } .about-story__badge .material-symbols-outlined { font-size: 1.1rem; } /* Mission */ .about-mission__inner { display: grid; grid-template-columns: 64px 1fr; gap: 2.5rem; align-items: start; } .about-mission__icon-wrap { width: 64px; height: 64px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .about-mission__icon-wrap .material-symbols-outlined { font-size: 2rem; color: #fff; } .about-mission__text { font-size: 1.1rem; color: var(--on-surface-variant); line-height: 1.7; margin-bottom: 1.5rem; } .about-mission__values { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .about-mission__values li { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.95rem; } .about-mission__values li .material-symbols-outlined { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; } /* Highlights (dark bg, red circles like screenshot) */ .about-highlights { background: #0d1f22; } .about-highlights .section-tag { background: rgba(14,180,187,0.15); color: var(--primary); border-color: rgba(14,180,187,0.3); } .about-highlights .section-title { color: #fff; } .about-highlights__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; margin-top: 2.5rem; } .about-hl-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; color: #fff; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .about-hl-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(14,180,187,0.45); transition: transform 0.2s, box-shadow 0.2s; } .about-hl-item:hover .about-hl-icon { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,180,187,0.6); } .about-hl-icon .material-symbols-outlined { font-size: 1.8rem; color: #fff; } /* Certifications */ .about-certs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .about-cert-card { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .about-cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .about-cert-card__icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--primary), var(--primary-dark, #0ab0b6)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .about-cert-card__icon .material-symbols-outlined { color: #fff; font-size: 1.5rem; } .about-cert-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; } .about-cert-card p { font-size: 0.85rem; color: var(--on-surface-variant); line-height: 1.5; margin: 0; } /* 3 Pillars */ .about-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .about-pillar { text-align: center; padding: 2.5rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--outline-variant); transition: box-shadow 0.2s, transform 0.2s; } .about-pillar:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .about-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--outline-variant); margin-bottom: 1.25rem; color: var(--primary); transition: border-color 0.2s; } .about-pillar:hover .about-pillar__icon { border-color: var(--primary); } .about-pillar h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; } .about-pillar p { color: var(--on-surface-variant); font-size: 0.92rem; line-height: 1.6; margin: 0; } /* Gallery lightbox grid */ .about-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .about-gal-item { display: block; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in; } .about-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; } .about-gal-item:hover img { transform: scale(1.06); } .about-gal-item__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; } .about-gal-item:hover .about-gal-item__overlay { opacity: 1; } .about-gal-item__overlay .material-symbols-outlined { font-size: 2.5rem; color: #fff; } /* Lightbox overlay */ .lb-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; } .lb-overlay[hidden] { display: none; } .lb-img-wrap { max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; } .lb-img-wrap img { max-width: 100%; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 8px 48px rgba(0,0,0,0.7); display: block; } .lb-caption { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0.75rem 0 0; text-align: center; } .lb-close, .lb-prev, .lb-next { position: fixed; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s; z-index: 9001; } .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.3); } .lb-close { top: 1.5rem; right: 1.5rem; } .lb-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .lb-next { right: 1.5rem; top: 50%; transform: translateY(-50%); } .lb-close .material-symbols-outlined, .lb-prev .material-symbols-outlined, .lb-next .material-symbols-outlined { font-size: 1.5rem; } /* ===== ABOUT — RESPONSIVE ===== */ @media (max-width: 900px) { .about-story__grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-story__image { height: 280px; } .about-story__badge { left: 1rem; bottom: -1rem; } .about-mission__inner { grid-template-columns: 1fr; gap: 1.5rem; } .about-highlights__grid { grid-template-columns: repeat(2, 1fr); } .about-certs__grid { grid-template-columns: 1fr 1fr; } .about-pillars__grid { grid-template-columns: 1fr; } .about-gallery__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .about-highlights__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .about-certs__grid { grid-template-columns: 1fr; } .about-story__stats { flex-direction: column; gap: 1rem; } .about-mission__values { grid-template-columns: 1fr; } .about-gallery__grid { grid-template-columns: 1fr; } .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; } } /* ===== SERVICE PAGE — REDESIGN ===== */ /* Hero */ .svc-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; } .svc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .svc-hero__bg--fallback { background: linear-gradient(135deg, #0d1b2a 0%, #1a3a4a 100%); } .svc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,15,25,0.95) 0%, rgba(5,15,25,0.55) 50%, rgba(5,15,25,0.2) 100%); } .svc-hero__content { position: relative; z-index: 1; padding-bottom: 3rem; padding-top: 6rem; color: #fff; } .svc-breadcrumb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .svc-breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; } .svc-breadcrumb a:hover { color: #fff; } .svc-breadcrumb span:not(.material-symbols-outlined) { color: rgba(255,255,255,0.5); } .svc-breadcrumb .material-symbols-outlined { font-size: 0.9rem; opacity: 0.6; } .svc-hero__body { max-width: 720px; } .svc-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: rgba(14,180,187,0.2); border: 2px solid rgba(14,180,187,0.5); border-radius: 14px; margin-bottom: 1rem; } .svc-hero__icon .material-symbols-outlined { font-size: 1.8rem; color: #7ee8ed; } .svc-hero__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: #fff; margin: 0 0 0.75rem; line-height: 1.15; } .svc-hero__sub { font-size: 1.1rem; color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0 0 1.75rem; max-width: 560px; } .svc-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .btn-primary--white { background: #fff; color: var(--primary) !important; border-color: #fff; } .btn-primary--white:hover { background: rgba(255,255,255,0.9); } .btn-outline--white { border-color: rgba(255,255,255,0.6); color: #fff !important; } .btn-outline--white:hover { border-color: #fff; background: rgba(255,255,255,0.1); } /* Trust bar */ .svc-trust-bar { background: var(--primary); color: #fff; padding: 0.9rem 0; } .svc-trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .svc-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 1.5rem; white-space: nowrap; } .svc-trust-item .material-symbols-outlined { font-size: 1rem; } .svc-trust-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.35); } /* Main layout */ .svc-main { padding: 3rem 0 5rem; } .svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; } /* Body */ .svc-body { margin-bottom: 3rem; line-height: 1.75; } .svc-body h2, .svc-body h3 { color: var(--on-surface); margin-top: 2rem; } .svc-body ul { padding-left: 1.5rem; } .svc-body ul li { margin-bottom: 0.5rem; } /* Before/After */ .svc-patients { margin-bottom: 3rem; } .svc-patients__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; } .svc-patients__title .material-symbols-outlined { color: var(--primary); } .svc-patients__sub { color: var(--on-surface-variant); margin-bottom: 1.5rem; } .svc-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .svc-ba-card { } .svc-ba-wrap { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; display: grid; grid-template-columns: 1fr 1fr; } .svc-ba-before, .svc-ba-after { width: 100%; height: 100%; object-fit: cover; display: block; } .svc-ba-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; } .svc-ba-labels span { flex: 1; text-align: center; padding: 0.4rem 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,0,0,0.55); color: #fff; } .svc-ba-labels span:first-child { border-right: 1px solid rgba(255,255,255,0.2); } .svc-ba-caption { font-size: 0.8rem; color: var(--on-surface-variant); text-align: center; margin: 0.5rem 0 0; } .svc-patients__disclaimer { font-size: 0.78rem; color: var(--on-surface-variant); margin-top: 1.25rem; font-style: italic; } /* Reviews */ .svc-reviews { margin-bottom: 3rem; padding: 2rem; background: var(--surface-container-low); border-radius: var(--radius-lg); border: 1px solid var(--outline-variant); } .svc-reviews__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; } .svc-reviews__title .material-symbols-outlined { color: var(--primary); } .svc-reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .svc-review-card { background: var(--surface-container); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--outline-variant); } .svc-review-stars { color: #f59e0b; font-size: 1rem; margin-bottom: 0.75rem; letter-spacing: 0.1em; } .svc-review-card p { font-size: 0.9rem; color: var(--on-surface-variant); line-height: 1.6; font-style: italic; margin: 0 0 0.75rem; } .svc-review-author { font-size: 0.82rem; font-weight: 600; color: var(--on-surface); } /* CTA block */ .svc-cta-block { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: linear-gradient(135deg, var(--primary), #0ab0b6); color: #fff; padding: 2rem 2.5rem; border-radius: var(--radius-lg); margin-bottom: 3rem; } .svc-cta-block__text h3 { color: #fff; margin: 0 0 0.4rem; font-size: 1.2rem; } .svc-cta-block__text p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.95rem; } .svc-cta-block .btn-primary { background: #fff; color: var(--primary) !important; border-color: #fff; white-space: nowrap; flex-shrink: 0; } .svc-cta-block .btn-primary:hover { background: rgba(255,255,255,0.92); } /* Related */ .svc-related { padding-top: 2.5rem; border-top: 1px solid var(--outline-variant); } .svc-related__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--primary); } .svc-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .svc-related-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: var(--radius); text-decoration: none; color: inherit; transition: box-shadow 0.2s, border-color 0.2s; } .svc-related-card:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(14,180,187,0.15); } .svc-related-card__icon { width: 40px; height: 40px; background: rgba(14,180,187,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .svc-related-card__icon .material-symbols-outlined { font-size: 1.2rem; color: var(--primary); } .svc-related-card h4 { font-size: 0.88rem; margin: 0 0 0.2rem; } .svc-related-card p { font-size: 0.78rem; color: var(--on-surface-variant); margin: 0; } .svc-related-card__arrow { margin-left: auto; color: var(--outline); font-size: 1.1rem; flex-shrink: 0; } /* Sidebar */ .svc-sidebar { display: flex; flex-direction: column; gap: 1.25rem; } .svc-sidebar-sticky { position: sticky; top: 80px; } .svc-sidebar__cta { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 1.5rem; } .svc-sidebar__cta-text { font-size: 0.9rem; color: var(--on-surface-variant); margin: 0 0 1rem; line-height: 1.5; } .svc-sidebar__wa { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.6rem 1rem; border: 1px solid #25d366; border-radius: var(--radius); color: #25d366 !important; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.2s; } .svc-sidebar__wa:hover { background: rgba(37,211,102,0.1); } .svc-sidebar__contact { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); overflow: hidden; } .svc-sidebar__contact .sidebar-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--outline-variant); text-decoration: none; color: inherit; transition: background 0.15s; } .svc-sidebar__contact .sidebar-contact-item:last-child { border-bottom: none; } .svc-sidebar__contact .sidebar-contact-item:hover { background: var(--surface-container); } .svc-sidebar__contact strong { display: block; font-size: 0.75rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; } .svc-sidebar__contact span { display: block; font-weight: 500; font-size: 0.88rem; line-height: 1.4; } .svc-sidebar__trust { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .svc-sidebar__trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 500; } .svc-sidebar__trust-item .material-symbols-outlined { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; } /* ===== SERVICE PAGE — RESPONSIVE ===== */ @media (max-width: 1024px) { .svc-layout { grid-template-columns: 1fr; } .svc-sidebar-sticky { position: static; } .svc-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (max-width: 768px) { .svc-ba-grid { grid-template-columns: 1fr; } .svc-reviews__grid { grid-template-columns: 1fr; } .svc-related__grid { grid-template-columns: 1fr; } .svc-cta-block { flex-direction: column; text-align: center; } .svc-trust-bar__inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 1rem; } .svc-trust-sep { display: none; } .svc-sidebar { grid-template-columns: 1fr; } } @media (max-width: 600px) { .svc-hero { min-height: 360px; } } /* ===== SERVICE PAGE — UPDATES ===== */ /* Hero — strict left alignment */ .svc-hero { align-items: flex-end; justify-content: flex-start; } .svc-hero__content { text-align: left !important; width: 100%; align-self: flex-end; } .svc-hero__body { max-width: 700px; width: 100%; margin: 0; padding: 0; } .svc-hero__icon { margin: 0 0 1rem 0; } .svc-hero__title { text-align: left; margin: 0 0 0.75rem 0; } .svc-hero__sub { text-align: left; margin: 0 0 1.75rem 0; } .svc-breadcrumb { justify-content: flex-start; padding: 0; margin: 0 0 1.5rem 0; } .svc-hero__actions { justify-content: flex-start; margin: 0; padding: 0; } /* Book button — white bg, green icon */ .svc-book-btn { background: #fff !important; color: var(--primary) !important; border-color: #fff !important; font-weight: 700; } .svc-book-btn:hover { background: rgba(255,255,255,0.92) !important; } /* Sidebar — always sticky */ .svc-sidebar { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; } .svc-sidebar::-webkit-scrollbar { display: none; } /* Service Highlights — dark bg, red circles (like about page) */ .svc-highlights { background: #0d1f22; border-radius: var(--radius-lg); padding: 2.5rem 2rem; margin: 2.5rem 0; } .svc-highlights__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; } .svc-hl-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; color: #fff; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .svc-hl-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(14,180,187,0.4); transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; } .svc-hl-item:hover .svc-hl-icon { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,180,187,0.6); } .svc-hl-icon .material-symbols-outlined { font-size: 1.6rem; color: #fff; } @media (max-width: 1024px) { .svc-sidebar { position: static; max-height: none; overflow-y: visible; } } @media (max-width: 900px) { .svc-highlights__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .svc-highlights__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .svc-highlights { padding: 2rem 1.25rem; } } /* Gallery — video card inline play */ .gallery-card-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); transition: background 0.2s; } .gallery-card-play-overlay .material-symbols-outlined { font-size: 4rem; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); transition: transform 0.2s; } .gallery-card-video:hover .gallery-card-play-overlay { background: rgba(0,0,0,0.5); } .gallery-card-video:hover .gallery-card-play-overlay .material-symbols-outlined { transform: scale(1.1); } .gallery-card-video { cursor: pointer; } /* Gallery video modal title */ .gallery-video-modal-title { color: rgba(255,255,255,0.8); text-align: center; font-size: 1rem; font-weight: 600; margin: 0 0 1rem; } /* ===== MEDICAL TRIP PLAN BLOCK ===== */ .svc-trip-plan { padding: 5rem 0; background: var(--surface-container-low); border-top: 1px solid var(--outline-variant); } .svc-trip-plan__header { text-align: center; margin-bottom: 3rem; } .svc-trip-plan__sub { max-width: 560px; margin: 0.75rem auto 0; color: var(--on-surface-variant); line-height: 1.6; } .svc-trip-plan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; } .svc-trip-step {} .svc-trip-step__img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; margin-bottom: 1.25rem; border: 2px solid var(--primary); box-shadow: 0 4px 20px rgba(14,180,187,0.15); transition: box-shadow 0.25s; } .svc-trip-step:hover .svc-trip-step__img-wrap { box-shadow: 0 8px 32px rgba(14,180,187,0.3); } .svc-trip-step__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; } .svc-trip-step:hover .svc-trip-step__img-wrap img { transform: scale(1.05); } .svc-trip-step__num { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 32px; height: 32px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 0.95rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(14,180,187,0.5); } .svc-trip-step h3 { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface); margin-bottom: 0.6rem; } .svc-trip-step p { font-size: 0.88rem; color: var(--on-surface-variant); line-height: 1.6; margin: 0; } .svc-trip-plan__cta { text-align: center; } .svc-trip-wa-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2.5rem; border-radius: 50px; font-size: 1rem; font-weight: 700; } @media (max-width: 900px) { .svc-trip-plan__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 540px) { .svc-trip-plan__grid { grid-template-columns: 1fr; } .svc-trip-plan { padding: 3rem 0; } } /* ===== GLOBAL HERO LEFT ALIGN (all pages) ===== */ .page-hero .container, .page-hero > .container { text-align: left; } .page-hero-title, .page-hero-sub { text-align: left !important; margin-left: 0 !important; } .about-hero__content, .about-hero__title, .about-hero__sub { text-align: left !important; margin-left: 0 !important; } .about-hero .section-tag { margin-left: 0; } .booking-page-hero > .container, .booking-page-hero h1, .booking-page-hero p { text-align: left !important; } .booking-page-hero .section-tag { margin-left: 0; } .page-hero .breadcrumb { justify-content: flex-start; } /* ===== ARTICLE PAGE — REDESIGN ===== */ /* Hero — full width photo as background */ .art-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; background-size: cover; background-position: center top; width: 100%; } .art-hero--no-img { background: linear-gradient(135deg, var(--primary-dark) 0%, #0d1f22 100%); min-height: 320px; } .art-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(5,15,25,0.92) 0%, rgba(5,15,25,0.6) 45%, rgba(5,15,25,0.15) 100% ); } .art-hero__content { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 2.5rem; color: #fff; width: 100%; text-align: left; } /* Breadcrumb inside hero */ .art-breadcrumb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; margin-bottom: 1rem; flex-wrap: wrap; color: rgba(255,255,255,0.65); } .art-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; } .art-breadcrumb a:hover { color: #fff; } .art-breadcrumb span:last-child { color: rgba(255,255,255,0.5); } .art-breadcrumb .material-symbols-outlined { font-size: 0.9rem; opacity: 0.55; } /* Meta: date + tags */ .art-hero__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .art-hero__date { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.04em; } .art-hero__date .material-symbols-outlined { font-size: 0.9rem; color: var(--primary); } .art-hero__tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 20px; background: rgba(14,180,187,0.25); border: 1px solid rgba(14,180,187,0.5); color: #7ee8ed; font-size: 0.75rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s; } .art-hero__tag:hover { background: rgba(14,180,187,0.45); color: #fff; } /* Title */ .art-hero__title { font-size: clamp(1.7rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; color: #fff; margin: 0; max-width: 820px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); text-align: left; } /* Layout grid */ .art-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items: start; padding: 3rem 0 5rem; } /* Article body */ .art-main { min-width: 0; } .art-body { font-size: 1.05rem; line-height: 1.85; color: var(--text-body); margin-bottom: 2.5rem; } .art-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem; color: var(--on-surface); } .art-body h3 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--on-surface); } .art-body p { margin-bottom: 1.4rem; } .art-body ul, .art-body ol { padding-left: 1.5rem; margin-bottom: 1.4rem; } .art-body li { margin-bottom: 0.5rem; } .art-body img { border-radius: var(--radius); max-width: 100%; display: block; margin: 2rem 0; box-shadow: var(--shadow-md); } .art-body a { color: var(--primary); text-decoration: underline; } .art-body blockquote { border-left: 3px solid var(--primary); margin: 2rem 0; padding: 1rem 1.5rem; background: var(--surface-container-low); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--on-surface-variant); } /* Tags strip */ .art-tags-strip { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); margin-bottom: 2.5rem; font-size: 0.85rem; color: var(--on-surface-variant); } .art-tags-strip .material-symbols-outlined { font-size: 1rem; flex-shrink: 0; } /* CTA block */ .art-cta-block { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 1.75rem 2rem; border-radius: var(--radius-lg); margin-bottom: 2rem; } .art-cta-block__text h3 { color: #fff; margin: 0 0 0.3rem; font-size: 1.05rem; } .art-cta-block__text p { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.9rem; } .art-cta-block .btn-primary { background: #fff; color: var(--primary) !important; border-color: #fff; white-space: nowrap; flex-shrink: 0; } /* Back link */ .art-back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: gap 0.2s; } .art-back-link:hover { gap: 0.2rem; } .art-back-link .material-symbols-outlined { font-size: 1rem; } /* ── Sidebar ── */ .art-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 1.5rem); display: flex; flex-direction: column; gap: 1.25rem; } /* Book CTA widget */ .art-sidebar-cta { background: var(--primary); color: #fff; border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; } .art-sidebar-cta__icon { font-size: 2.5rem; opacity: 0.9; display: block; margin-bottom: 0.75rem; } .art-sidebar-cta h4 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; } .art-sidebar-cta p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin: 0 0 1.25rem; line-height: 1.5; } .art-sidebar-cta .btn-primary { background: #fff; color: var(--primary) !important; border-color: #fff; font-size: 0.9rem; } .art-sidebar-wa { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.55rem 1rem; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius); color: #fff; text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: background 0.2s; } .art-sidebar-wa:hover { background: rgba(255,255,255,0.15); } /* Sidebar widgets */ .art-sidebar-widget { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 1.25rem; } .art-sidebar-widget__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--on-surface); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--primary); } .art-sidebar-widget__title .material-symbols-outlined { font-size: 1rem; color: var(--primary); } /* Recent posts */ .art-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; } .art-recent-item { display: flex; gap: 0.75rem; align-items: flex-start; } .art-recent-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; display: block; } .art-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .art-recent-body { flex: 1; min-width: 0; } .art-recent-title { display: block; font-size: 0.85rem; font-weight: 600; color: var(--on-surface); text-decoration: none; line-height: 1.4; margin-bottom: 0.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .art-recent-title:hover { color: var(--primary); } .art-recent-date { font-size: 0.75rem; color: var(--on-surface-variant); } /* Tags cloud */ .art-tags-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; } .art-tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 20px; border: 1px solid var(--outline-variant); font-size: 0.78rem; font-weight: 500; color: var(--on-surface-variant); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .art-tag-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .art-tag-count { font-size: 0.7rem; opacity: 0.6; } /* Archive */ .art-archive-list { list-style: none; padding: 0; margin: 0; } .art-archive-list li a { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--outline-variant); font-size: 0.88rem; color: var(--on-surface-variant); text-decoration: none; transition: color 0.2s; } .art-archive-list li:last-child a { border-bottom: none; } .art-archive-list li a:hover { color: var(--primary); } .art-archive-count { background: var(--surface-container); border-radius: 20px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 600; } /* Contact widget */ .art-contact-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--outline-variant); font-size: 0.85rem; color: var(--on-surface-variant); text-decoration: none; transition: color 0.2s; } .art-contact-row:last-child { border-bottom: none; } .art-contact-row:hover { color: var(--primary); } .art-contact-row .material-symbols-outlined { font-size: 1rem; color: var(--primary); flex-shrink: 0; margin-top: 1px; } /* ── Responsive ── */ @media (max-width: 960px) { .art-layout { grid-template-columns: 1fr; gap: 2.5rem; } .art-sidebar { position: static; } .art-cta-block { flex-direction: column; text-align: center; } } @media (max-width: 600px) { .art-hero { min-height: 380px; } .art-hero__title { font-size: 1.6rem; } .art-layout { padding: 2rem 0 3rem; } } /* Remove page-content-wrap top padding when art-hero present */ .page-content-wrap:has(.art-hero) { padding-top: 0; } /* ===== PRE-FOOTER CTA BAR ===== */ .prefooter-cta { background: var(--primary); width: 100%; padding: 2.75rem 0; } .prefooter-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .prefooter-cta__text h3 { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 0.35rem; line-height: 1.2; } .prefooter-cta__text p { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin: 0; } .prefooter-cta__actions { display: flex; gap: 0.85rem; flex-shrink: 0; flex-wrap: wrap; } .prefooter-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.75rem; border-radius: 50px; font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.2s; white-space: nowrap; } .prefooter-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } .prefooter-btn--book { background: #fff; color: var(--primary) !important; border: 2px solid #fff; } .prefooter-btn--book .material-symbols-outlined { font-size: 1rem; color: var(--primary); } .prefooter-btn--book:hover { background: rgba(255,255,255,0.92); } .prefooter-btn--wa { background: #25d366; color: #fff !important; border: 2px solid #25d366; } .prefooter-btn--wa:hover { background: #1fb558; border-color: #1fb558; } @media (max-width: 700px) { .prefooter-cta__inner { flex-direction: column; text-align: center; } .prefooter-cta__actions { justify-content: center; width: 100%; } } /* ===== GLOBAL BUTTON & ICON COLOR FIXES ===== */ /* Primary button — always teal bg, white text, white icon */ .btn-primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } .btn-primary .material-symbols-outlined { color: #fff !important; } .btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; color: #fff !important; } /* Service hero book button — white bg, teal text */ .svc-book-btn { background: #fff !important; color: var(--primary) !important; border-color: #fff !important; } .svc-book-btn .material-symbols-outlined { color: #22c55e !important; } .svc-book-btn:hover { background: rgba(255,255,255,0.92) !important; color: var(--primary) !important; } /* Outline button — teal border + text */ .btn-outline { background: transparent; color: var(--primary) !important; border: 2px solid var(--primary) !important; } .btn-outline .material-symbols-outlined { color: var(--primary) !important; } .btn-outline:hover { background: var(--primary-light) !important; } /* CTA blocks (service, article) — white button on teal bg */ .svc-cta-block .btn-primary, .art-cta-block .btn-primary, .svc-trip-plan__cta .btn-primary { background: #fff !important; color: var(--primary) !important; border-color: #fff !important; } .svc-cta-block .btn-primary .material-symbols-outlined, .art-cta-block .btn-primary .material-symbols-outlined { color: var(--primary) !important; } /* Sidebar CTA buttons on teal background */ /* art-sidebar-cta buttons replaced below */ /* Header book button */ .header-book-btn { background: var(--primary) !important; color: #fff !important; } .header-book-btn:hover { background: var(--primary-dark) !important; } /* WhatsApp sidebar button */ .svc-sidebar__wa { color: #25d366 !important; border-color: #25d366 !important; } .svc-sidebar__wa:hover { background: rgba(37,211,102,0.1) !important; } /* Floating WA button */ .floating-wa a { background: #25d366; color: #fff !important; } .floating-wa a:hover { background: #1fb558; } /* Trust badges — primary color icons */ .trust-badge .material-symbols-outlined, .svc-sidebar__trust-item .material-symbols-outlined { color: var(--primary) !important; } /* ===== ARTICLE SIDEBAR — BUTTONS & CATEGORIES ===== */ /* CTA widget buttons — white on teal bg */ .art-sidebar-book-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius); background: #fff; color: var(--primary) !important; font-weight: 700; font-size: 0.92rem; text-decoration: none; border: 2px solid rgba(255,255,255,0.8); transition: background 0.2s, transform 0.15s; margin-bottom: 0.6rem; } .art-sidebar-book-btn:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); } .art-sidebar-book-btn .material-symbols-outlined { font-size: 1rem; color: var(--primary); } .art-sidebar-wa-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.72rem 1rem; border-radius: var(--radius); background: #25d366; color: #fff !important; font-weight: 700; font-size: 0.92rem; text-decoration: none; border: 2px solid #25d366; transition: background 0.2s, transform 0.15s; } .art-sidebar-wa-btn:hover { background: #1fb558; border-color: #1fb558; transform: translateY(-1px); } /* Categories list */ .art-cat-list { list-style: none; padding: 0; margin: 0; } .art-cat-item { border-bottom: 1px solid var(--outline-variant); } .art-cat-item:last-child { border-bottom: none; } .art-cat-link { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.25rem; color: var(--on-surface-variant); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: color 0.2s, padding-left 0.2s; } .art-cat-link:hover { color: var(--primary); padding-left: 0.5rem; } .art-cat-name { flex: 1; } .art-cat-count { background: var(--surface-container); color: var(--on-surface-variant); font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 20px; flex-shrink: 0; } .art-cat-link:hover .art-cat-count { background: var(--primary-light); color: var(--primary); } /* Add categories label translation key hook */ /* ===== SERVICE — HOW IT WORKS & BENEFITS GRIDS ===== */ .svc-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 1.5rem 0 2rem; } .svc-step-card { background: var(--surface-container); border-radius: var(--radius); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .svc-step-num { width: 2rem; height: 2rem; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; margin-bottom: 0.25rem; } .svc-step-title { font-weight: 700; font-size: 0.95rem; color: var(--on-surface); margin: 0; line-height: 1.35; } .svc-step-desc { font-size: 0.875rem; color: var(--on-surface-variant); margin: 0; line-height: 1.55; } .svc-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.5rem; margin: 1.5rem 0 2rem; } .svc-benefit-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 1rem; background: var(--surface-container); border-radius: var(--radius); border-left: 3px solid var(--primary); } .svc-benefit-icon { font-size: 1.2rem; color: var(--primary); flex-shrink: 0; margin-top: 0.1rem; } .svc-benefit-text { font-size: 0.9rem; color: var(--on-surface); line-height: 1.5; } .svc-benefit-text strong { color: var(--on-surface); font-weight: 600; } @media (max-width: 900px) { .svc-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .svc-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } .svc-benefits-grid { grid-template-columns: 1fr; } } /* ===== GLOBAL MOBILE FIXES ===== */ /* Base: prevent horizontal overflow on all screens */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } /* Container always padded on mobile */ @media (max-width: 768px) { .container { padding: 0 1.25rem; } } /* ── Hero (home) ── */ @media (max-width: 768px) { .hero-content { margin-left: 0 !important; padding: 2.5rem 1.25rem; max-width: 100%; } .hero-actions { flex-direction: column; gap: 0.75rem; } .hero-actions .btn-primary, .hero-actions .btn-outline { width: 100%; justify-content: center; } } /* ── Stats bar ── */ @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; } .stat-item { padding: 1.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-item .number { font-size: 2rem; } } /* ── About page ── */ @media (max-width: 768px) { .about-hero__content { padding: 3rem 1.25rem 2.5rem; } .about-story__grid { grid-template-columns: 1fr; gap: 2rem; } .about-highlights__grid { grid-template-columns: repeat(2, 1fr); } .about-certs__grid { grid-template-columns: 1fr; } .about-pillars__grid { grid-template-columns: 1fr; } .about-gallery__grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .about-mission__inner { grid-template-columns: 1fr; } .team-full-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (max-width: 480px) { .about-highlights__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .about-gallery__grid { grid-template-columns: 1fr; } .team-full-grid { grid-template-columns: 1fr; } } /* ── Service page ── */ @media (max-width: 900px) { .svc-layout { grid-template-columns: 1fr; } .svc-sidebar { display: none; } .svc-ba-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .svc-hero { min-height: 360px; } .svc-hero__content { padding-left: 1.25rem; padding-right: 1.25rem; } .svc-hero__body { max-width: 100%; } .svc-hero__title { font-size: clamp(1.5rem, 6vw, 2rem); } .svc-trust-bar { padding: 0.75rem 0; } .svc-trust-bar__inner { flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; } .svc-ba-grid { grid-template-columns: 1fr; } .svc-steps-grid { grid-template-columns: 1fr 1fr; } .svc-benefits-grid { grid-template-columns: 1fr; } .svc-trip-plan__grid { grid-template-columns: 1fr; } .svc-related__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .svc-reviews__grid { grid-template-columns: 1fr; } } @media (max-width: 400px) { .svc-steps-grid { grid-template-columns: 1fr; } .svc-related__grid { grid-template-columns: 1fr; } } /* ── Article page ── */ @media (max-width: 960px) { .art-layout { grid-template-columns: 1fr; } .art-sidebar { display: none; } } @media (max-width: 600px) { .art-hero { min-height: 320px; } .art-hero__title { font-size: 1.5rem; } .art-hero__content { padding: 3.5rem 1.25rem 1.5rem; } .art-layout { padding: 1.5rem 0 2.5rem; } } /* ── Gallery ── */ @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem; } } @media (max-width: 400px) { .gallery-grid { grid-template-columns: 1fr !important; } } /* ── Pre-footer CTA ── */ @media (max-width: 768px) { .prefooter-cta__inner { flex-direction: column; text-align: center; gap: 1.25rem; } .prefooter-cta__actions { flex-direction: column; width: 100%; } .prefooter-btn { width: 100%; justify-content: center; text-align: center; } } /* ── Footer ── */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } } /* ── Navigation mobile ── */ @media (max-width: 768px) { .header-top { padding: 0 1.25rem; } .header-nav { padding: 0 1.25rem; } } /* ── Section padding on mobile ── */ @media (max-width: 600px) { .section { padding: 3rem 0; } .section-title { font-size: clamp(1.4rem, 5vw, 2rem); } } /* ── FAQ ── */ @media (max-width: 600px) { .faq-grid { grid-template-columns: 1fr; } } /* ── Team member page ── */ @media (max-width: 768px) { .team-profile-layout { grid-template-columns: 1fr; } } /* ── Treatments/services grid ── */ @media (max-width: 600px) { .treatments-grid { grid-template-columns: 1fr; } .services-list-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } } @media (max-width: 380px) { .services-list-grid { grid-template-columns: 1fr; } }