/* * Mind Clinic — Unified Custom Stylesheet * Consolidates CSS from all 74 pages into one enqueue-ready file. * 3 template types: service-dark, content-light, team-scoped */ /* ============================================================ 0. DESIGN TOKENS (shared across all templates) ============================================================ */ :root { --mc-primary: #2B98A1; --mc-primary-hover: #1e7880; --mc-dark: #3F4954; --mc-white: #FFFFFF; --mc-slate: #F4F7F8; --mc-mint: #D1EAEB; --mc-muted: rgba(255,255,255,.75); --mc-line: rgba(63, 73, 84, 0.12); --mc-text: #3F4954; --mc-text-muted: #4B5563; --mc-border: #D1D5DB; --mc-radius: 24px; --mc-topbar-h: 36px; --mc-nav-h: 62px; --mc-nav-gap: 12px; } @media (max-width: 768px) { :root { --mc-topbar-h: 90px; --mc-nav-h: 56px; --mc-nav-gap: 16px; } } /* Typography — mindddd design system */ body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--mc-text); scroll-behavior: smooth; padding-top: calc(20px + 62px + 12px); } h1, h2, h3, h4, .mc-serif, .font-serif { font-family: 'Playfair Display', serif; color: var(--mc-dark); } @media (max-width: 768px) { body { padding-top: calc(16px + 56px + 10px); } } /* Service pages & front page have a Hero that should touch the viewport top. WordPress sets these classes on itself via body_class(), so the selector must be body.mc-service-page, not .mc-service-page body. */ body.mc-service-page, body.mc-service-page main, body.home, body.home main, body.mc-front-page, body.mc-front-page main, body.mc-hero-overlap, body.mc-hero-overlap main { padding-top: 0 !important; } /* ============================================================ 1. ISLAND NAVBAR (global — all pages) ============================================================ */ .mc-nav-glass { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1200px; z-index: 130; padding: 10px 24px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(43, 152, 161, 0.15); border-radius: 100px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, box-shadow 0.4s ease; } .mc-nav-glass.mc-scrolled { top: 10px; width: 98%; background: rgba(255, 255, 255, 0.97); box-shadow: 0 15px 50px rgba(43, 152, 161, 0.12); } .mc-nav-glass__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; gap: 0.75rem 1.25rem; } .mc-nav-glass__brand { justify-self: start; flex-shrink: 0; } .mc-nav-glass__brand .mc-header-logo, .mc-nav-glass__brand img { height: 48px; width: auto; max-width: 220px; object-fit: contain; display: block; } @media (min-width: 1024px) { .mc-nav-glass__brand .mc-header-logo, .mc-nav-glass__brand img { height: 56px; max-width: 260px; } } .mc-nav-glass__center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.75rem 2rem; min-width: 0; font-size: 14px; font-weight: 600; color: #3f4954; } .mc-nav-glass__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; justify-self: end; flex-shrink: 0; } .mc-nav-glass__cta, .mc-nav-glass__cta-wrap { margin: 0; } .mc-nav-glass__book-btn, .mc-nav-glass__cta .mc-nav-glass__book-btn, .mc-nav-glass__cta a.mc-nav-glass__book-btn { display: inline-flex; align-items: center; justify-content: center; background: #2b98a1; color: #fff; padding: 0.625rem 1.5rem; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; box-shadow: 0 10px 24px rgba(43, 152, 161, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .mc-nav-glass__book-btn:hover, .mc-nav-glass__cta .mc-nav-glass__book-btn:hover { transform: scale(1.04); background: #248a92; color: #fff; } /* position: static keeps the mega anchored to .mc-nav-glass (position: fixed), not to the individual menu item. !important overrides Tailwind's .relative utility which is injected via script tag after stylesheet link tags. */ .mc-services-menu-item { position: static !important; } .mc-services-mega { position: absolute; top: 100%; left: 50%; width: min(1100px, calc(100vw - 3rem)); margin-top: 0; padding: 1.65rem 1rem 1rem; transform: translate(-50%, 10px); opacity: 0; visibility: hidden; pointer-events: none; z-index: 120; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(43, 152, 161, 0.14); border-radius: 20px; box-shadow: 0 22px 60px rgba(10, 92, 102, 0.18); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .mc-services-mega::before { content: ''; position: absolute; top: -0.65rem; left: 0; right: 0; height: 0.65rem; } .mc-services-menu-item:hover > .mc-services-mega, .mc-services-menu-item:focus-within > .mc-services-mega, .mc-services-menu-item.mc-menu-open > .mc-services-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .mc-services-mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .mc-services-mega__group { min-width: 0; padding: 0.85rem; border-radius: 14px; background: rgba(244, 247, 248, 0.76); border: 1px solid rgba(226, 232, 240, 0.8); } .mc-services-mega__title, .mc-services-mega__link, .mc-services-mega__all { display: block; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .mc-services-mega__title { margin-bottom: 0.55rem; color: var(--mc-dark); font-size: 0.82rem; font-weight: 800; line-height: 1.35; } .mc-services-mega__link { margin-top: 0.35rem; color: #4a5568; font-size: 0.75rem; font-weight: 700; line-height: 1.35; } .mc-services-mega__title:hover, .mc-services-mega__link:hover, .mc-services-mega__all:hover { color: var(--mc-primary); } .mc-services-mega__all { margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--mc-primary); color: #fff; font-size: 0.75rem; font-weight: 900; line-height: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; } .mc-services-mega__all i { margin-inline-start: 0.45rem; } /* Featured dropdown: Psychiatry (4) + Psychotherapy (5) — mindddd nav */ .mc-services-mega--featured { width: min(560px, calc(100vw - 3rem)); padding: 1rem 1rem 0.75rem; } .mc-services-mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .mc-services-mega__col-label { margin-bottom: 0.75rem; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mc-primary); } .mc-services-mega__service-link { display: block; padding: 0.375rem 0.5rem; border-radius: 0.5rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .mc-services-mega__service-link:hover { background: var(--mc-slate); } .mc-services-mega__service-link:hover .mc-services-mega__service-label { color: var(--mc-primary); } .mc-services-mega__service-label { display: block; font-size: 14px; font-weight: 500; color: var(--mc-dark); line-height: 1.35; } .mc-services-mega__service-sub { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; color: #9ca3af; line-height: 1.3; } .mc-services-mega__footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } .mc-services-mega__view-all { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mc-primary); text-decoration: none; } .mc-services-mega__view-all:hover { text-decoration: underline; } [dir="rtl"] .mc-services-mega { text-align: right; } [dir="rtl"] .mc-services-menu-item:hover > .mc-services-mega, [dir="rtl"] .mc-services-menu-item:focus-within > .mc-services-mega, [dir="rtl"] .mc-services-menu-item.mc-menu-open > .mc-services-mega { transform: translate(-50%, 0); } /* Mobile menu toggle & drawer (desktop uses inline nav + hover mega) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.mc-nav-open { overflow: hidden; } /* backdrop — kept for accessibility; invisible behind full-screen drawer */ .mc-nav-backdrop { display: none; } /* Full-screen mobile overlay */ .mc-nav-drawer { position: fixed; inset: 0; z-index: 999; background: #ffffff; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; display: flex; flex-direction: column; } .mc-nav-drawer:not([hidden]) { transform: translateY(0); } /* When hidden attribute is present, display:none takes over — we need to override so the CSS transition works: remove hidden via JS before animating. */ .mc-nav-drawer__inner { display: flex; flex-direction: column; gap: 0; padding: 7rem 2rem 3rem; flex: 1; } /* Close button inside drawer */ .mc-nav-drawer__close { position: absolute; top: 1.75rem; right: 1.75rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mc-slate); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; color: var(--mc-text); transition: background 0.2s ease; } .mc-nav-drawer__close:hover { background: var(--mc-mint); } [dir="rtl"] .mc-nav-drawer__close { right: auto; left: 1.75rem; } /* Mobile nav items — large text style */ .mc-nav-mobile-item { border-bottom: 1px solid rgba(63, 73, 84, 0.08); } .mc-nav-mobile-item:last-child { border-bottom: none; } .mc-nav-mobile-item--cta { border-bottom: none; margin-top: 2rem; } .mc-nav-mobile-link { display: block; padding: 1.1rem 0; font-size: 1.75rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--mc-text); text-decoration: none; transition: color 0.2s ease; } .mc-nav-mobile-link:hover, .mc-nav-mobile-link:focus-visible { color: var(--mc-primary); } /* Sub-section label inside mobile nav */ .mc-nav-mobile-sublabel { display: block; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mc-primary); padding: 1.1rem 0 0.5rem; } .mc-nav-mobile-cta { display: block; padding: 1.25rem 2rem; border-radius: 1rem; text-align: center; font-size: 1.1rem; font-weight: 700; background: var(--mc-primary); color: #fff !important; text-decoration: none; box-shadow: 0 8px 24px rgba(43, 152, 161, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .mc-nav-mobile-cta:hover, .mc-nav-mobile-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(43, 152, 161, 0.38); } .mc-sub-menu--mobile-drawer { display: flex; flex-direction: column; gap: 0; padding: 0 0 0.75rem 1rem; } .mc-nav-mobile-sublink { display: block; padding: 0.6rem 0; font-size: 1.25rem; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--mc-text); text-decoration: none; transition: color 0.2s ease; } .mc-nav-mobile-sublink:hover, .mc-nav-mobile-sublink:focus-visible { color: var(--mc-primary); } /* Services accordion inside mobile drawer */ .mc-services-mobile { padding: 0 0 0.5rem; } .mc-services-mobile__details { border-bottom: 1px solid rgba(226, 232, 240, 0.75); } .mc-services-mobile__details:last-of-type { border-bottom: none; } .mc-services-mobile__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-dark); cursor: pointer; list-style: none; } .mc-services-mobile__summary::-webkit-details-marker { display: none; } .mc-services-mobile__chev { font-size: 0.55rem; opacity: 0.55; transition: transform 0.2s ease; } .mc-services-mobile__details[open] .mc-services-mobile__chev { transform: rotate(180deg); } .mc-services-mobile__panel { padding: 0 0 0.65rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; } .mc-services-mobile__link { display: block; padding: 0.4rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: #4a5568; text-decoration: none; line-height: 1.35; } .mc-services-mobile__link:hover, .mc-services-mobile__link:focus-visible { color: var(--mc-primary); } .mc-services-mobile__link--muted { font-size: 0.75rem; font-weight: 700; color: var(--mc-primary); margin-top: 0.25rem; } .mc-services-mobile__all { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 0.65rem; padding: 0.75rem 1rem; border-radius: 14px; background: var(--mc-primary); color: #fff !important; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .mc-services-mobile__all:hover, .mc-services-mobile__all:focus-visible { filter: brightness(1.05); } @media (max-width: 768px) { body:not(.mc-has-top-bar) .mc-nav-glass { width: calc(100% - 2rem); top: 12px; padding: 8px 18px; } body:not(.mc-has-top-bar) .mc-nav-glass.mc-scrolled { top: 6px; width: calc(100% - 1rem); } body.mc-has-top-bar .mc-nav-glass { width: calc(100% - 2rem); top: calc(var(--mc-topbar-h) + var(--mc-nav-gap) + 4px); padding: 8px 18px; } body.mc-has-top-bar .mc-nav-glass.mc-scrolled { top: calc(var(--mc-topbar-h) + 4px); width: calc(100% - 1rem); } .mc-nav-glass { left: 1rem; right: 1rem; width: auto; max-width: none; transform: none; } .mc-services-mega { display: none; } } @media (max-width: 1024px) { .mc-services-mega { width: min(720px, calc(100vw - 2rem)); } .mc-services-mega__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 2. SERVICE PAGES — Light Theme ============================================================ */ .mc-service-page { margin: 0; background: #ffffff; --mc-line: #E2E8F0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: #3F4954; line-height: 1.6; } .mc-service-page .page-shell { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; } /* Hero */ .mc-service-page .hero { position: relative; height: 450px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .mc-service-page .mc-service-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .mc-service-page .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(63,73,84,0.95), rgba(63,73,84,0.4)); } .mc-service-page .hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 60px; max-width: 700px; } .mc-service-page .badge { display: inline-block; align-self: flex-start; background: rgba(43,152,161,0.2); color: #8be4ec; padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: 1px solid rgba(43,152,161,0.3); } .mc-service-page .hero h1 { margin: 24px 0 16px; font-size: 48px; font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.1; color: var(--mc-white); } .mc-service-page .hero p { font-size: 18px; line-height: 1.7; color: var(--mc-muted); font-weight: 300; } /* Meta Bar */ .mc-service-page .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; padding: 30px; background: #F8FAFC; border-radius: 20px; border: 1px solid var(--mc-line); } .mc-service-page .meta-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-primary); font-weight: 700; margin-bottom: 8px; } .mc-service-page .meta-value { font-size: 18px; font-weight: 600; color: #3F4954; } .mc-service-page .price { color: #3F4954; display: flex; align-items: center; gap: 8px; } .mc-service-page .price span { color: var(--mc-primary); font-size: 24px; } /* Content Sections */ .mc-service-page .section { margin-top: 70px; max-width: 850px; border-left: 3px solid var(--mc-primary); padding-left: 40px; transition: all 0.3s ease; } .mc-service-page .section h2 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; margin: 0 0 20px; color: #3F4954; } .mc-service-page .section p { font-size: 16px; line-height: 1.8; color: #64748B; } .mc-service-page .list { padding-left: 20px; font-size: 16px; line-height: 2; color: #64748B; list-style: none; } .mc-service-page .list li { margin: 12px 0; position: relative; } .mc-service-page .list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: -25px; color: var(--mc-primary); font-size: 12px; } /* Doctors Grid */ .mc-service-page .doctors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 30px; } .mc-service-page .doctor-card { display: flex; align-items: center; gap: 20px; background: #ffffff; padding: 24px; border-radius: 24px; border: 1px solid rgba(43,152,161,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .mc-service-page .doctor-card:hover { border-color: var(--mc-primary); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(43,152,161,0.1); } .mc-service-page .doctor-avatar { width: 60px; height: 60px; border-radius: 18px; object-fit: cover; border: 2px solid #D1EAEB; background: #F4F7F8; position: relative; z-index: 2; transition: all 0.4s ease; flex-shrink: 0; overflow: hidden; } .mc-service-page .doctor-card:hover .doctor-avatar { border-radius: 50%; background: #D1EAEB; } .mc-service-page .doctor-card:hover .doctor-avatar { transform: scale(1.1); } .mc-service-page .doctor-info { position: relative; z-index: 2; } .mc-service-page .doctor-info h3 { margin: 0; font-size: 18px; font-weight: 700; color: #3F4954; font-family: 'Playfair Display', serif; letter-spacing: -0.01em; } .mc-service-page .doctor-info span { display: block; font-size: 13px; color: #64748B; margin-top: 2px; font-weight: 500; } .mc-service-page .doctor-btn { margin-left: auto; padding: 12px 24px; border-radius: 14px; background: #F4F7F8; border: 1px solid rgba(43,152,161,0.1); color: var(--mc-primary); font-size: 13px; font-weight: 800; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; } .mc-service-page .doctor-card:hover .doctor-btn, .mc-service-page .doctor-btn:hover { background: var(--mc-primary); border-color: var(--mc-primary); color: #ffffff; box-shadow: 0 8px 20px rgba(43,152,161,0.2); } .mc-service-page .doctor-avatar-initials { width: 60px; height: 60px; border-radius: 18px; border: 2px solid #D1EAEB; background: #F4F7F8; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--mc-primary); flex-shrink: 0; } .mc-service-page .doctor-meta { font-size: 12px; color: #94A3B8; margin-top: 5px; } /* CTA */ .mc-service-page .cta { margin-top: 100px; background: rgba(43,152,161,0.05); border-radius: 30px; padding: 50px; border: 1px solid var(--mc-line); position: relative; overflow: hidden; } .mc-service-page .cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: var(--mc-primary); filter: blur(120px); opacity: 0.1; } .mc-service-page .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; z-index: 2; } .mc-service-page .cta-content h3 { margin: 0 0 12px; font-size: 28px; font-family: 'Playfair Display', serif; color: #3F4954; } .mc-service-page .cta-content p { margin: 0; font-size: 16px; color: #64748B; max-width: 500px; } .mc-service-page .btn { padding: 18px 36px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; transition: .3s cubic-bezier(0.4,0,0.2,1); display: inline-block; text-align: center; } .mc-service-page .btn-primary { background: var(--mc-primary); color: #ffffff; box-shadow: 0 10px 20px rgba(43,152,161,0.2); } .mc-service-page .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(43,152,161,0.3); background: #34b0ba; } /* Service Responsive */ @media (max-width:900px) { .mc-service-page .hero { height: 400px; } .mc-service-page .hero-content { padding: 40px; } .mc-service-page .hero h1 { font-size: 36px; } .mc-service-page .meta { grid-template-columns: 1fr; padding: 20px; } .mc-service-page .section { padding-left: 24px; margin-top: 50px; } .mc-service-page .section h2 { font-size: 26px; } .mc-service-page .cta { padding: 30px; text-align: center; } .mc-service-page .cta-inner { flex-direction: column; gap: 30px; } .mc-service-page .btn { width: 100%; } .mc-service-page .doctor-btn { width: auto; } } /* ============================================================ 2. CONTENT PAGES — Light Theme (About, FAQ, Events) ============================================================ */ .mc-content-page { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--mc-text); background-color: var(--mc-white); line-height: 1.7; } .mc-content-page *, .mc-content-page *::before, .mc-content-page *::after { box-sizing: border-box; } .mc-content-page h1, .mc-content-page h2, .mc-content-page h3, .mc-content-page h4 { font-family: 'Playfair Display', serif; color: var(--mc-dark); margin: 0; } /* Dark Hero (shared by FAQ, Events, About) */ .mc-content-page .mc-hero-dark { background: var(--mc-dark); padding: 6rem 2rem; text-align: center; position: relative; overflow: hidden; } .mc-content-page .mc-hero-dark::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 90%, rgba(43,152,161,0.15) 0%, transparent 40%); } .mc-content-page .hero-tag { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--mc-mint); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.4rem 1.2rem; border-radius: 20px; margin-bottom: 1.5rem; position: relative; } .mc-content-page .mc-hero-dark h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; color: #fff; margin: 0 0 1rem; position: relative; } .mc-content-page .mc-hero-dark p { font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 650px; margin: 0 auto; position: relative; } /* Image Hero (About pages) */ .mc-content-page .mc-hero-image { position: relative; height: 480px; display: flex; align-items: center; padding: 0 2rem; background-size: cover; background-position: center; overflow: hidden; } .mc-content-page .mc-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(63,73,84,0.95), rgba(63,73,84,0.4)); } .mc-content-page .container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; width: 100%; } .mc-content-page .badge { display: inline-block; background: rgba(43,152,161,0.2); color: var(--mc-mint); padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.5rem; border: 1px solid rgba(43,152,161,0.3); } /* About page — image hero (Who Are We); sits under island nav (body.mc-hero-overlap) */ .mc-content-page .mc-about-hero { position: relative; min-height: clamp(560px, 88vh, 720px); display: flex; align-items: flex-end; padding: calc(20px + 76px + 2rem) 1.5rem 3.5rem; margin-top: 0; background-size: cover; background-position: center; overflow: hidden; border-radius: 0 0 2rem 2rem; } @media (max-width: 768px) { .mc-content-page .mc-about-hero { min-height: clamp(520px, 92vh, 680px); padding-top: calc(16px + 60px + 1.25rem); } } .mc-content-page .mc-about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10, 92, 102, 0.94) 0%, rgba(10, 92, 102, 0.72) 42%, rgba(10, 92, 102, 0.25) 100%), radial-gradient(ellipse 80% 60% at 85% 20%, rgba(43, 152, 161, 0.35) 0%, transparent 55%); pointer-events: none; } html[dir='rtl'] .mc-content-page .mc-about-hero__overlay { background: linear-gradient(255deg, rgba(10, 92, 102, 0.94) 0%, rgba(10, 92, 102, 0.72) 42%, rgba(10, 92, 102, 0.25) 100%), radial-gradient(ellipse 80% 60% at 15% 20%, rgba(43, 152, 161, 0.35) 0%, transparent 55%); } .mc-content-page .mc-about-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: 2.5rem; align-items: end; } .mc-content-page .mc-about-hero__content { max-width: 640px; } .mc-content-page .mc-about-hero__badge { display: inline-block; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(209, 234, 235, 0.35); color: var(--mc-mint, #d1eaeb); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.45rem 1.1rem; border-radius: 999px; margin-bottom: 1.25rem; backdrop-filter: blur(8px); } .mc-content-page .mc-about-hero__title { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 5.5vw, 3.75rem); font-weight: 700; line-height: 1.08; color: #fff !important; margin: 0 0 1rem; } .mc-content-page .mc-about-hero__lead { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; color: rgba(255, 255, 255, 0.82); margin: 0 0 1.75rem; max-width: 540px; font-weight: 300; } .mc-content-page .mc-about-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .mc-content-page .mc-about-hero__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .mc-content-page .mc-about-hero__btn--primary { background: var(--mc-primary, #2b98a1); color: #fff; box-shadow: 0 8px 24px rgba(43, 152, 161, 0.35); } .mc-content-page .mc-about-hero__btn--primary:hover { background: #248a92; color: #fff; transform: translateY(-2px); } .mc-content-page .mc-about-hero__btn--ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); } .mc-content-page .mc-about-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.5); } .mc-content-page .mc-about-hero__highlights { list-style: none; margin: 0; padding: 1.35rem 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1.25rem; backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); } .mc-content-page .mc-about-hero__highlights li { display: flex; align-items: center; gap: 0.85rem; margin: 0; padding: 0; } .mc-content-page .mc-about-hero__highlight-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: rgba(43, 152, 161, 0.25); color: var(--mc-mint, #d1eaeb); font-size: 1rem; } .mc-content-page .mc-about-hero__highlight-label { font-size: 0.88rem; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.92); } @media (max-width: 900px) { .mc-content-page .mc-about-hero { min-height: auto; padding: 6.5rem 1.25rem 2.5rem; align-items: center; } .mc-content-page .mc-about-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; } .mc-content-page .mc-about-hero__highlights { flex-direction: row; flex-wrap: wrap; padding: 1rem; } .mc-content-page .mc-about-hero__highlights li { flex: 1 1 calc(50% - 0.5rem); min-width: 140px; } } @media (max-width: 520px) { .mc-content-page .mc-about-hero__actions { flex-direction: column; } .mc-content-page .mc-about-hero__btn { width: 100%; justify-content: center; } .mc-content-page .mc-about-hero__highlights li { flex: 1 1 100%; } } /* Section Headers */ .mc-events-page #upcoming-sessions, .mc-events-page #past-events { scroll-margin-top: calc(1.25rem + 80px); } .mc-content-page .section-header { margin-bottom: 3.5rem; display: flex; align-items: center; gap: 1.5rem; } .mc-content-page .section-header h2 { font-size: 2.5rem; white-space: nowrap; } .mc-content-page .section-header::after { content: ''; flex-grow: 1; height: 1px; background: var(--mc-border); } .mc-content-page .section-header .line { width: 60px; height: 4px; background: var(--mc-primary); border-radius: 2px; } /* Intro Box */ .mc-content-page .intro-box { max-width: 850px; border-left: 4px solid var(--mc-primary); padding-left: 3rem; } .mc-content-page .intro-box h2 { font-size: 2.2rem; margin-bottom: 1.5rem; } .mc-content-page .intro-box p { font-size: 1.1rem; color: #4a5568; margin-bottom: 1.5rem; } /* Cards (Mission/Vision, Values) */ .mc-content-page .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 4rem 0 6rem; } .mc-content-page .mv-card { background: var(--mc-slate); padding: 3rem; border-radius: var(--mc-radius); border: 1px solid var(--mc-border); transition: all 0.3s ease; } .mc-content-page .mv-card:hover { transform: translateY(-5px); border-color: var(--mc-primary); box-shadow: 0 15px 40px rgba(63,73,84,0.05); } .mc-content-page .mv-icon { width: 56px; height: 56px; background: var(--mc-mint); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--mc-primary); font-size: 1.5rem; } /* Value Cards */ .mc-content-page .value-card { background: var(--mc-white); padding: 2.5rem; border-radius: 20px; border: 1px solid var(--mc-border); position: relative; transition: all 0.3s ease; } .mc-content-page .value-card:hover { border-color: var(--mc-primary); background: var(--mc-slate); } .mc-content-page .value-num { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--mc-mint); position: absolute; top: 1rem; right: 2rem; font-weight: 700; opacity: 0.5; } /* CEO Section */ .mc-content-page .ceo-section { background: var(--mc-dark); border-radius: 40px; padding: 5rem; color: var(--mc-white); position: relative; overflow: hidden; margin-bottom: 8rem; } .mc-content-page .ceo-section::before { content: "\201C"; position: absolute; top: -20px; left: 40px; font-size: 180px; font-family: 'Playfair Display', serif; color: var(--mc-primary); opacity: 0.15; line-height: 1; } /* FAQ Accordion */ .mc-content-page .faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; } .mc-content-page .faq-item { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; } .mc-content-page .faq-item:hover { border-color: var(--mc-primary); box-shadow: 0 8px 25px rgba(63,73,84,0.05); } .mc-content-page .faq-item summary { padding: 1.8rem; font-size: 1.1rem; font-weight: 700; color: var(--mc-dark); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .mc-content-page .faq-item summary::-webkit-details-marker { display: none; } .mc-content-page .faq-item summary::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--mc-primary); font-size: 0.9rem; transition: transform 0.4s ease; } .mc-content-page .faq-item[open] summary::after { content: "\f068"; transform: rotate(180deg); } .mc-content-page .faq-item[open] { border-color: var(--mc-primary); background: var(--mc-slate); } .mc-content-page .faq-answer { padding: 0 1.8rem 2rem; font-size: 0.95rem; color: #4a5568; animation: mc-slideDown 0.4s ease-out; } /* Forms */ .mc-content-page .form-group input, .mc-content-page .form-group textarea { font-family: inherit; font-size: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--mc-border); border-radius: 12px; background: var(--mc-white); color: var(--mc-dark); transition: all 0.3s ease; } .mc-content-page .form-group input:focus, .mc-content-page .form-group textarea:focus { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 4px rgba(43,152,161,0.1); } /* Buttons */ .mc-content-page .btn-send { background: var(--mc-primary); color: var(--mc-white); border: none; padding: 1.1rem 3.5rem; border-radius: 50px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(43,152,161,0.2); } .mc-content-page .btn-send:hover { background: var(--mc-primary-hover); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(43,152,161,0.3); } /* Events */ .mc-content-page .event-list { display: flex; flex-direction: column; gap: 5rem; } .mc-content-page .event-row { display: grid; grid-template-columns: 400px 1fr; gap: 4rem; padding-bottom: 5rem; border-bottom: 1px solid var(--mc-border); } .mc-content-page .event-row:last-child { border-bottom: none; } .mc-content-page .event-visuals { display: flex; flex-direction: column; gap: 1.5rem; } .mc-content-page .event-image-wrap { border-radius: 24px; overflow: hidden; box-shadow: 0 15px 45px rgba(63,73,84,0.15); background: var(--mc-slate); } .mc-content-page .event-image-wrap img { width: 100%; height: auto; display: block; transition: transform 0.6s ease; } .mc-content-page .event-row:hover .event-image-wrap img { transform: scale(1.03); } .mc-content-page .speakers-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; padding: 0.5rem; } .mc-content-page .speaker-mini { display: flex; align-items: center; gap: 0.6rem; background: var(--mc-slate); padding: 0.5rem 0.8rem; border-radius: 10px; border: 1px solid var(--mc-border); } .mc-content-page .speaker-mini img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--mc-primary); } .mc-content-page .speaker-mini span { font-size: 0.7rem; font-weight: 700; color: var(--mc-dark); white-space: nowrap; } .mc-content-page .event-content { display: flex; flex-direction: column; } .mc-content-page .event-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .mc-content-page .event-description { font-size: 1rem; color: #4a5568; margin-bottom: 2rem; } .mc-content-page .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .mc-content-page .detail-block h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mc-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-family: 'Plus Jakarta Sans', sans-serif; } .mc-content-page .detail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .mc-content-page .detail-list li { font-size: 0.9rem; color: var(--mc-text); padding-left: 1.4rem; position: relative; line-height: 1.5; } .mc-content-page .detail-list li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--mc-primary); font-size: 0.85rem; } .mc-content-page .event-action { display: inline-flex; align-items: center; gap: 0.8rem; font-weight: 700; background: var(--mc-primary); color: #fff; text-decoration: none; font-size: 0.9rem; padding: 1rem 2.2rem; border-radius: 14px; transition: all 0.3s ease; align-self: flex-start; box-shadow: 0 10px 25px rgba(43,152,161,0.2); } .mc-content-page .event-action:hover { background: var(--mc-primary-hover); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(43,152,161,0.3); } .mc-content-page .meta-item { font-size: 0.7rem; font-weight: 800; color: var(--mc-primary); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; background: var(--mc-mint); padding: 0.4rem 0.9rem; border-radius: 6px; } .mc-content-page .section-header .line { width: 60px; height: 4px; background: var(--mc-primary); border-radius: 2px; margin-top: 0.8rem; } .mc-content-page .upcoming-box { background: var(--mc-slate); border-radius: 30px; padding: 5rem 2rem; text-align: center; border: 2px dashed var(--mc-border); margin-bottom: 5rem; } .mc-content-page .upcoming-box h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .mc-content-page .upcoming-box p { color: #4a5568; margin: 0; } @media (max-width: 1024px) { .mc-content-page .event-row { grid-template-columns: 1fr; gap: 2.5rem; } .mc-content-page .event-visuals { max-width: 500px; } .mc-content-page .content-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* Single event detail (matches static event detail pages) */ .mc-event-single .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .mc-event-hero { background: var(--mc-dark, #3F4954); padding: 10rem 0 5rem; position: relative; overflow: hidden; } .mc-event-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(43, 152, 161, 0.1) 0%, transparent 40%); pointer-events: none; } .mc-event-hero .container { position: relative; z-index: 2; } .mc-event-hero__content { max-width: 800px; } .mc-event-hero__category { display: inline-block; color: var(--mc-mint, #D1EAEB); text-transform: uppercase; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 1.5rem; background: rgba(255, 255, 255, 0.08); padding: 0.4rem 1rem; border-radius: 6px; } .mc-event-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; line-height: 1.2; margin: 0 0 2rem; } .mc-event-hero__meta { display: flex; flex-wrap: wrap; gap: 2rem; } .mc-event-hero__meta-box { display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, 0.8); } .mc-event-hero__meta-box i { font-size: 1.2rem; color: var(--mc-primary, #2B98A1); } .mc-event-hero__meta-box span { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: 2px; } .mc-event-hero__meta-box strong { font-size: 1rem; color: #fff; } .mc-event-layout { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; padding: 4rem 0 8rem; } .mc-event-main-img { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(63, 73, 84, 0.15); margin-bottom: 3rem; } .mc-event-main-img img { width: 100%; height: auto; display: block; } .mc-event-section { margin-bottom: 4rem; } .mc-event-section h2 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--mc-dark, #3F4954); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; } .mc-event-section h2::after { content: ''; flex-grow: 1; height: 1px; background: var(--mc-border, #E2E8F0); } .mc-event-overview p { color: var(--mc-text-muted, #64748B); margin: 0 0 1rem; line-height: 1.7; } .mc-event-objectives { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; } .mc-event-objective-card { background: var(--mc-slate, #F4F7F8); padding: 2rem; border-radius: 20px; border: 1px solid var(--mc-border, #E2E8F0); } .mc-event-objective-card > i { font-size: 1.5rem; color: var(--mc-primary, #2B98A1); margin-bottom: 1rem; display: block; } .mc-event-objective-card h4 { font-size: 1rem; margin: 0 0 0.8rem; color: var(--mc-dark, #3F4954); } .mc-event-objective-card ul { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--mc-text-muted, #64748B); } .mc-event-objective-card li { margin-bottom: 0.6rem; padding-left: 1.2rem; position: relative; } .mc-event-objective-card li::before { content: '•'; color: var(--mc-primary, #2B98A1); position: absolute; left: 0; font-weight: 900; } .mc-event-section--outro p, .mc-event-audience-text { color: var(--mc-text-muted, #64748B); line-height: 1.7; margin: 0; } .mc-event-gains-list { margin: 0; padding: 0; list-style: none; color: var(--mc-text-muted, #64748B); } .mc-event-gains-list li { margin-bottom: 0.6rem; padding-left: 1.2rem; position: relative; } .mc-event-gains-list li::before { content: '•'; color: var(--mc-primary, #2B98A1); position: absolute; left: 0; font-weight: 900; } .mc-event-objectives--single { grid-template-columns: 1fr; max-width: 640px; } .mc-event-organizer { font-size: 0.8rem; } .mc-event-sidebar { position: sticky; top: 6rem; align-self: start; } .mc-event-sidebar-card { background: #fff; border: 1px solid var(--mc-border, #E2E8F0); border-radius: 24px; padding: 2.5rem; box-shadow: 0 10px 40px rgba(63, 73, 84, 0.05); } .mc-event-sidebar-title { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mc-primary, #2B98A1); margin-bottom: 2rem; display: block; } .mc-event-speaker { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--mc-border, #E2E8F0); } .mc-event-speaker:last-of-type { border-bottom: none; margin-bottom: 2.5rem; } .mc-event-speaker__avatar { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mc-primary, #2B98A1); padding: 2px; flex-shrink: 0; } .mc-event-speaker__info h4 { margin: 0; font-size: 1rem; color: var(--mc-dark, #3F4954); } .mc-event-speaker__info > span { font-size: 0.75rem; color: var(--mc-primary, #2B98A1); font-weight: 700; display: block; } .mc-event-speaker__info p { font-size: 0.7rem; margin: 4px 0 0; color: var(--mc-text-muted, #64748B); line-height: 1.3; } .mc-event-cta { display: block; width: 100%; background: var(--mc-primary, #2B98A1); color: #fff; text-align: center; padding: 1.2rem; border-radius: 14px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(43, 152, 161, 0.2); } .mc-event-cta:hover { background: var(--mc-primary-hover, #237D85); transform: translateY(-3px); color: #fff; } .mc-event-agenda-link { display: block; margin-top: 1rem; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--mc-primary, #2B98A1); text-decoration: none; } .mc-event-agenda-link:hover { text-decoration: underline; } .mc-event-agenda-link i { margin-left: 0.35rem; } .mc-event-support { margin-top: 2rem; text-align: center; font-size: 0.85rem; color: var(--mc-text-muted, #64748B); } .mc-event-support a { color: var(--mc-primary, #2B98A1); text-decoration: none; font-weight: 700; } @media (max-width: 1024px) { .mc-event-layout { grid-template-columns: 1fr; } .mc-event-sidebar { position: static; max-width: 500px; } .mc-event-objectives { grid-template-columns: 1fr; } } @media (max-width: 600px) { .mc-event-hero { padding: 7rem 0 3rem; } .mc-event-hero__meta { gap: 1rem; } .mc-event-layout { padding: 2rem 0 4rem; } } /* Value card headings — sans-serif + teal to match prototype */ .mc-content-page .value-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--mc-primary); text-transform: uppercase; letter-spacing: 0.05em; padding-right: 2rem; margin-bottom: 1.2rem; } /* CEO block */ .mc-content-page .ceo-content { max-width: 850px; } .mc-content-page .ceo-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mc-content-page .ceo-name { color: var(--mc-primary); } /* FAQ main column (matches mindddd .faq-page) */ .mc-content-page .faq-page { max-width: 1000px; width: 100%; } /* FAQ categories */ .mc-content-page .faq-category { margin-bottom: 5rem; } .mc-content-page .faq-category h2 { font-size: 2rem; margin-bottom: 2.5rem; text-align: center; display: flex; align-items: center; gap: 1.5rem; } .mc-content-page .faq-category h2::before, .mc-content-page .faq-category h2::after { content: ''; flex-grow: 1; height: 1px; background: var(--mc-border); } /* FAQ submit section */ .mc-content-page .submit-section { background: var(--mc-slate); border-radius: var(--mc-radius); padding: 3rem; margin-bottom: 5rem; border: 1px solid var(--mc-border); } .mc-content-page .submit-section h2 { font-size: 2rem; text-align: center; margin: 0 0 0.5rem; } .mc-content-page .section-subtitle { font-size: 1rem; color: #4a5568; text-align: center; margin-bottom: 2.5rem; } .mc-content-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .mc-content-page .form-group { display: flex; flex-direction: column; gap: 0.6rem; } .mc-content-page .form-group.full-width { grid-column: 1 / -1; } .mc-content-page .form-group label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-primary); } .mc-content-page .form-actions { margin-top: 2rem; display: flex; justify-content: center; } /* Contact select styling */ .mc-content-page .mc-contact-form select, .mc-content-page .form-group select { font-family: inherit; font-size: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--mc-border); border-radius: 12px; background: var(--mc-white); color: var(--mc-dark); width: 100%; transition: all 0.3s ease; appearance: none; } .mc-content-page .mc-contact-form select:focus, .mc-content-page .form-group select:focus { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 4px rgba(22, 167, 184, 0.1); } /* ── Contact Page ──────────────────────────────────────── */ .mc-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; } /* Info column */ .mc-contact-info h2 { margin-bottom: 1.5rem; } .mc-contact-info > p { color: #64748B; font-size: 1.1rem; margin-bottom: 3rem; } .mc-contact-methods { display: grid; gap: 2rem; } .mc-method-card { display: flex; gap: 1.5rem; align-items: flex-start; } .mc-icon-box { width: 52px; height: 52px; background: var(--mc-mint); color: var(--mc-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; } .mc-icon-box:hover { background: var(--mc-primary); color: #fff; transform: translateY(-3px); } .mc-method-text span { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mc-primary); margin-bottom: 4px; } .mc-method-text strong { font-size: 1.1rem; color: var(--mc-dark); display: block; } .mc-method-text small { display: block; color: #64748B; font-size: 0.8rem; margin-top: 2px; } .mc-method-text a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .mc-method-text a:hover { color: var(--mc-primary); } .mc-contact-social { display: flex; gap: 1rem; margin-top: 3.5rem; } /* Form card */ .mc-form-card { background: var(--mc-slate); padding: 3.5rem; border-radius: 24px; border: 1px solid #E2E8F0; box-shadow: 0 20px 50px rgba(63, 73, 84, 0.05); } .mc-form-header { margin-bottom: 2.5rem; } .mc-form-header h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .mc-form-header p { color: #64748B; font-size: 0.95rem; } .mc-form-group { margin-bottom: 1.5rem; } .mc-form-group label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-primary); margin-bottom: 8px; } .mc-form-group input, .mc-form-group select, .mc-form-group textarea { width: 100%; padding: 1rem 1.2rem; border: 1px solid #E2E8F0; border-radius: 12px; font-family: inherit; font-size: 1rem; background: #fff; color: var(--mc-dark); transition: all 0.3s ease; appearance: none; } .mc-form-group input:focus, .mc-form-group select:focus, .mc-form-group textarea:focus { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 4px rgba(43, 152, 161, 0.1); } .mc-btn-submit { width: 100%; background: var(--mc-primary); color: #fff; border: none; padding: 1.2rem; border-radius: 14px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(43, 152, 161, 0.2); margin-top: 1rem; font-family: inherit; } .mc-btn-submit:hover { background: var(--mc-primary-hover); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(43, 152, 161, 0.3); } /* Map */ .mc-map-section { margin-top: 5rem; border-radius: 24px; overflow: hidden; height: 500px; border: 1px solid #E2E8F0; } .mc-map-section iframe { width: 100%; height: 100%; border: 0; display: block; } /* Contact Responsive */ @media (max-width: 1024px) { .mc-contact-grid { grid-template-columns: 1fr; gap: 4rem; } .mc-contact-info { order: 2; } .mc-form-card { order: 1; } } #contact-form { scroll-margin-top: calc(76px + 2rem); } @media (max-width: 600px) { .mc-form-card { padding: 2rem; } .mc-method-card { flex-direction: column; gap: 0.8rem; } .mc-map-section { height: 350px; } } /* Content Responsive */ @media (max-width: 900px) { .mc-content-page .mc-hero-image { height: 400px; } .mc-content-page .mv-grid { grid-template-columns: 1fr; } .mc-content-page .ceo-section { padding: 3rem 2rem; border-radius: 24px; } .mc-content-page .section-header h2 { font-size: 1.8rem; } .mc-content-page .event-row { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 768px) { .mc-content-page .form-grid { grid-template-columns: 1fr; } .mc-content-page .faq-category h2 { font-size: 1.6rem; } } /* ============================================================ 3. TEAM PAGE — Scoped under .mcg-team-wrapper ============================================================ */ .mcg-team-wrapper { font-family: 'Plus Jakarta Sans', sans-serif; background: #fff; color: #0A5C66; line-height: 1.6; } .mcg-team-wrapper *, .mcg-team-wrapper *::before, .mcg-team-wrapper *::after { box-sizing: border-box; } /* Tab Nav — primary department switcher below page hero */ .mcg-tab-nav { background: #fff; border-bottom: 1px solid #E2E8F0; position: sticky; top: calc(1.25rem + 70px); z-index: 50; box-shadow: 0 4px 15px rgba(63, 73, 84, 0.05); margin-top: -0.5rem; border-radius: 1.25rem 1.25rem 0 0; } .mcg-tab-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 0 1.5rem; overflow-x: auto; scrollbar-width: none; } .mcg-tab-nav-inner::-webkit-scrollbar { display: none; } .mcg-brand { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--mc-primary); white-space: nowrap; padding: 1.2rem 1.5rem 1.2rem 0; margin-right: 1.5rem; border-right: 1px solid #E2E8F0; flex-shrink: 0; } .mcg-tab-btn { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; background: transparent; border: none; padding: 1.2rem; cursor: pointer; transition: color 0.3s ease; white-space: nowrap; position: relative; } .mcg-tab-btn:hover { color: var(--mc-primary); } .mcg-tab-btn.active { color: var(--mc-primary); } .mcg-tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px; background: var(--mc-primary); border-radius: 3px 3px 0 0; } /* Sections */ .mcg-section { display: none; } .mcg-section.active { display: block; } .mcg-section-head { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem 0.5rem; text-align: center; } .mcg-section-head__title { font-family: 'Playfair Display', serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--mc-dark, #3f4954); margin: 0 0 0.5rem; line-height: 1.15; } .mcg-section-head__title em { font-style: italic; font-weight: 400; color: var(--mc-primary, #2b98a1); } .mcg-section-head__count { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; white-space: pre-line; line-height: 1.4; } .mcg-section-head__count-num { display: inline-block; margin-right: 0.35rem; font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--mc-primary, #2b98a1); letter-spacing: 0; text-transform: none; } html[dir='rtl'] .mcg-section-head__count-num { margin-right: 0; margin-left: 0.35rem; } /* Legacy section intro (unused) */ .mcg-section-intro { background: var(--mc-dark); padding: 5rem 2rem; text-align: center; position: relative; overflow: hidden; } .mcg-section-intro::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 90%, rgba(43,152,161,0.15) 0%, transparent 40%); } .mcg-section-intro-tag { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--mc-mint); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.4rem 1.2rem; border-radius: 20px; margin-bottom: 1.5rem; position: relative; } .mcg-section-intro h2 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1.1; margin: 0 0 1rem; position: relative; } .mcg-section-intro h2 em { font-style: italic; color: var(--mc-primary); font-weight: 400; } .mcg-section-intro p { font-size: 1rem; color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto; line-height: 1.8; position: relative; } .mcg-intro-stat { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 2rem; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 0.6rem 1.5rem; border: 1px solid rgba(255,255,255,0.1); position: relative; } .mcg-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--mc-primary); } .mcg-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.5); text-align: left; line-height: 1.2; white-space: pre-line; } /* Cards */ .mcg-content-area { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; } .mcg-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; } .mcg-card { background: #fff; border-radius: 20px; border: 1px solid #E2E8F0; overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); animation: mcg-fadeUp 0.6s ease both; } .mcg-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(63,73,84,0.08); border-color: var(--mc-primary); } .mcg-card-top { background: #F5F7F8; padding: 2rem 1.5rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; border-bottom: 1px solid rgba(43,152,161,0.08); } .mcg-avatar { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .mcg-avatar-initials { background: var(--mc-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; } .mcg-card-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: var(--mc-dark); line-height: 1.2; margin-bottom: 0.3rem; } .mcg-card-role { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mc-primary); } .mcg-card-body { padding: 1.5rem; } .mcg-card-bio { font-size: 0.9rem; color: #64748B; line-height: 1.7; margin-bottom: 1.5rem; } .mcg-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mcg-tag { font-size: 0.65rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 8px; background: var(--mc-mint); color: #237D85; border: 1px solid rgba(43,152,161,0.1); } .mcg-tag-accent { background: #FFF3E8; color: #B8541E; border-color: rgba(244,162,97,0.2); } @keyframes mcg-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .mcg-brand { display: none; } .mcg-section-intro { padding: 4rem 1.5rem; } .mcg-content-area { padding: 2rem 1.2rem; } .mcg-card-grid { grid-template-columns: 1fr; } .mcg-tab-nav { top: calc(0.75rem + 60px); } } /* RTL support for mcg-brand separator */ [dir="rtl"] .mcg-brand { border-right: none; border-left: 1px solid #E2E8F0; padding: 1.2rem 0 1.2rem 1.5rem; margin-right: 0; margin-left: 1.5rem; } /* ============================================================ 4. SHARED ANIMATIONS ============================================================ */ @keyframes mc-slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes mc-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 7. SERVICES OVERVIEW PAGE ============================================================ */ /* Hero — services hub (archive + page template); island nav via body.mc-hero-overlap */ .services-hero, .mc-services-hero { background: linear-gradient(145deg, #3f4954 0%, #2a3238 48%, #1a2e33 100%); padding: calc(20px + 76px + 2.5rem) 1.5rem 4rem; text-align: center; color: #fff; position: relative; overflow: hidden; border-radius: 0 0 2rem 2rem; } .mc-services-hero__glow, .services-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 88%, rgba(43, 152, 161, 0.22) 0%, transparent 42%), radial-gradient(circle at 88% 12%, rgba(43, 152, 161, 0.12) 0%, transparent 38%); pointer-events: none; } .mc-services-hero__glow { inset: auto; top: -45%; left: -12%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 152, 161, 0.14) 0%, transparent 68%); } .mc-services-hero__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .mc-services-page .hero-tag { display: inline-block; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--mc-mint, #d1eaeb); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.45rem 1.1rem; border-radius: 999px; margin-bottom: 1.25rem; } .mc-services-hero__title { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; line-height: 1.08; color: #fff !important; margin: 0 0 1rem; } .mc-services-hero__accent { color: var(--mc-primary, #2b98a1); font-style: normal; } .mc-services-hero__lead { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; color: rgba(255, 255, 255, 0.78); max-width: 640px; margin: 0 auto 2rem; font-weight: 300; } .mc-services-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; margin-top: 0.5rem; } .mc-services-hero__stat { text-align: center; min-width: 100px; } .mc-services-hero__stat-num { display: block; font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; color: var(--mc-primary, #2b98a1); line-height: 1.1; margin-bottom: 0.35rem; } .mc-services-hero__stat-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } @media (max-width: 768px) { .services-hero, .mc-services-hero { padding-top: calc(16px + 60px + 1.5rem); padding-bottom: 3rem; } .mc-services-hero__stats { gap: 1.25rem 2rem; } .mc-services-hero__stat { min-width: 80px; } } /* Gradient page heroes — FAQ, Articles, Team, Terms, Events, Contact (island nav via body.mc-hero-overlap) */ .mc-faq-hero, .mc-articles-hero, .mc-team-hero, .mc-terms-hero, .mc-events-hero, .mc-contact-hero { background: linear-gradient(145deg, #3f4954 0%, #2a3238 48%, #1a2e33 100%); padding: calc(20px + 76px + 2.5rem) 1.5rem 3.5rem; text-align: center; color: #fff; position: relative; overflow: hidden; border-radius: 0 0 2rem 2rem; } .mc-faq-hero__glow, .mc-articles-hero__glow, .mc-team-hero__glow, .mc-terms-hero__glow, .mc-events-hero__glow, .mc-contact-hero__glow { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 85%, rgba(43, 152, 161, 0.22) 0%, transparent 42%), radial-gradient(circle at 85% 15%, rgba(43, 152, 161, 0.1) 0%, transparent 40%); pointer-events: none; } .mc-faq-hero__inner, .mc-articles-hero__inner, .mc-team-hero__inner, .mc-terms-hero__inner, .mc-events-hero__inner, .mc-contact-hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .mc-content-page .mc-faq-hero .hero-tag, .mc-content-page .mc-articles-hero .hero-tag, .mc-content-page .mc-team-hero .hero-tag, .mc-content-page .mc-terms-hero .hero-tag, .mc-content-page .mc-events-hero .hero-tag, .mc-content-page .mc-contact-hero .hero-tag { display: inline-block; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--mc-mint, #d1eaeb); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.45rem 1.1rem; border-radius: 999px; margin-bottom: 1.25rem; } .mc-faq-hero__title, .mc-articles-hero__title, .mc-team-hero__title, .mc-terms-hero__title, .mc-events-hero__title, .mc-contact-hero__title { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; line-height: 1.08; color: #fff !important; margin: 0 0 1rem; } .mc-faq-hero__lead, .mc-articles-hero__lead, .mc-team-hero__lead, .mc-terms-hero__lead, .mc-events-hero__lead, .mc-contact-hero__lead { font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.75; color: rgba(255, 255, 255, 0.78); max-width: 600px; margin: 0 auto 1.75rem; font-weight: 300; } .mc-faq-hero__actions, .mc-articles-hero__actions, .mc-team-hero__actions, .mc-terms-hero__actions, .mc-events-hero__actions, .mc-contact-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; } .mc-faq-hero__btn, .mc-articles-hero__btn, .mc-team-hero__btn, .mc-terms-hero__btn, .mc-events-hero__btn, .mc-contact-hero__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .mc-faq-hero__btn--primary, .mc-articles-hero__btn--primary, .mc-team-hero__btn--primary, .mc-terms-hero__btn--primary, .mc-events-hero__btn--primary, .mc-contact-hero__btn--primary { background: var(--mc-primary, #2b98a1); color: #fff; box-shadow: 0 8px 24px rgba(43, 152, 161, 0.35); } .mc-faq-hero__btn--primary:hover, .mc-articles-hero__btn--primary:hover, .mc-team-hero__btn--primary:hover, .mc-terms-hero__btn--primary:hover, .mc-events-hero__btn--primary:hover, .mc-contact-hero__btn--primary:hover { background: #248a92; color: #fff; transform: translateY(-2px); } .mc-faq-hero__btn--ghost, .mc-articles-hero__btn--ghost, .mc-team-hero__btn--ghost, .mc-terms-hero__btn--ghost, .mc-events-hero__btn--ghost, .mc-contact-hero__btn--ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); } .mc-faq-hero__btn--ghost:hover, .mc-articles-hero__btn--ghost:hover, .mc-team-hero__btn--ghost:hover, .mc-terms-hero__btn--ghost:hover, .mc-events-hero__btn--ghost:hover, .mc-contact-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .mc-faq-hero__highlights, .mc-team-hero__highlights, .mc-events-hero__highlights, .mc-contact-hero__highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; } .mc-faq-hero__highlights li, .mc-team-hero__highlights li, .mc-events-hero__highlights li, .mc-contact-hero__highlights li { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; backdrop-filter: blur(8px); } .mc-faq-hero__highlight-icon, .mc-team-hero__highlight-icon, .mc-events-hero__highlight-icon, .mc-contact-hero__highlight-icon { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(43, 152, 161, 0.25); color: var(--mc-mint, #d1eaeb); font-size: 0.75rem; flex-shrink: 0; } .mc-faq-hero__highlight-label, .mc-team-hero__highlight-label, .mc-events-hero__highlight-label, .mc-contact-hero__highlight-label { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); white-space: nowrap; } .mc-team-hero__highlights a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; } .mc-team-hero__highlights a:hover, .mc-events-hero__highlights a:hover, .mc-contact-hero__highlights a:hover { color: #fff; } .mc-team-hero__highlights a, .mc-events-hero__highlights a, .mc-contact-hero__highlights a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; } .mc-articles-hero__stats, .mc-team-hero__stats, .mc-events-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; margin-bottom: 2rem; } .mc-articles-hero__stat, .mc-team-hero__stat, .mc-events-hero__stat { text-align: center; min-width: 72px; } .mc-articles-hero__stat-num, .mc-team-hero__stat-num, .mc-events-hero__stat-num { display: block; font-family: 'Playfair Display', serif; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; color: var(--mc-mint, #d1eaeb); line-height: 1.1; } .mc-articles-hero__stat-label, .mc-team-hero__stat-label, .mc-events-hero__stat-label { display: block; margin-top: 0.35rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } @media (max-width: 768px) { .mc-faq-hero, .mc-articles-hero, .mc-team-hero, .mc-terms-hero, .mc-events-hero, .mc-contact-hero { padding-top: calc(16px + 60px + 1.5rem); padding-bottom: 2.5rem; } .mc-articles-hero__stats, .mc-team-hero__stats, .mc-events-hero__stats { gap: 1rem 1.5rem; } .mc-articles-hero__stat, .mc-team-hero__stat, .mc-events-hero__stat { min-width: 64px; } .mc-faq-hero__actions, .mc-articles-hero__actions, .mc-team-hero__actions, .mc-terms-hero__actions, .mc-events-hero__actions, .mc-contact-hero__actions { flex-direction: column; align-items: stretch; } .mc-faq-hero__btn, .mc-articles-hero__btn, .mc-team-hero__btn, .mc-terms-hero__btn, .mc-events-hero__btn, .mc-contact-hero__btn { justify-content: center; } .mc-faq-hero__highlights, .mc-team-hero__highlights, .mc-events-hero__highlights, .mc-contact-hero__highlights { flex-direction: column; align-items: stretch; } .mc-faq-hero__highlights li, .mc-team-hero__highlights li, .mc-events-hero__highlights li, .mc-contact-hero__highlights li { justify-content: center; } .mc-faq-hero__highlight-label, .mc-team-hero__highlight-label, .mc-events-hero__highlight-label, .mc-contact-hero__highlight-label { white-space: normal; text-align: center; } } /* Legal pages — Terms & Conditions */ .mc-legal-wrap { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 5rem; } .mc-legal-content { color: var(--mc-dark, #3f4954); } .mc-legal-section { margin-bottom: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--mc-line, #e2e8f0); } .mc-legal-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .mc-legal-section__title { font-size: clamp(1.35rem, 3vw, 1.65rem); font-weight: 700; color: var(--mc-dark, #3f4954); margin: 0 0 0.75rem; } .mc-legal-section p { margin: 0; font-size: 1rem; line-height: 1.8; color: #64748b; } .mc-legal-footer-note { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--mc-line, #e2e8f0); font-size: 0.95rem; line-height: 1.7; color: #64748b; text-align: center; } .mc-legal-footer-note a { color: var(--mc-primary, #2b98a1); text-decoration: none; font-weight: 600; } .mc-legal-footer-note a:hover { text-decoration: underline; } .mc-terms-hero__lead time { color: rgba(255, 255, 255, 0.9); font-weight: 600; } /* Services hub — prototype-style cards */ .mc-services-hub { max-width: 80rem; margin: 0 auto; } .mc-service-hub-section { margin-bottom: 5rem; } .mc-service-hub-section--all { padding-top: 1rem; border-top: 1px solid var(--mc-line); } .mc-service-hub-section__heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; } .mc-service-hub-section__line { flex: 1; height: 1px; background: #f1f5f9; } .mc-service-hub-section__title { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mc-primary, #2b98a1) !important; margin: 0; white-space: nowrap; } .mc-service-hub-section__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .mc-service-hub-section__grid { grid-template-columns: repeat(2, 1fr); } } .mc-service-hub-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 24px; padding: 2rem; display: flex; flex-direction: column; min-height: 100%; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .mc-service-hub-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(43, 152, 161, 0.08); border-color: var(--mc-mint, #d1eaeb); } .mc-service-hub-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; } .mc-service-hub-card__title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--mc-dark, #3f4954) !important; margin: 0; flex: 1; } .mc-service-hub-card__badge { flex-shrink: 0; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(43, 152, 161, 0.12); color: var(--mc-primary, #2b98a1); } .mc-service-hub-card__badge--muted { background: #f8fafc; color: #94a3b8; } .mc-service-hub-card__ar { font-size: 0.95rem; color: var(--mc-primary, #2b98a1); margin: 0 0 0.5rem; line-height: 1.4; } .mc-service-hub-card__providers { margin-top: auto; padding-top: 1.25rem; flex: 1; } .mc-service-hub-card__providers-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #94a3b8; margin: 0 0 0.75rem; } .mc-service-hub-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .mc-service-hub-card__tag { display: inline-block; background: var(--mc-mint, #d1eaeb); color: var(--mc-primary, #2b98a1); font-size: 0.68rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 6px; line-height: 1.3; } .mc-service-hub-card__cta { display: block; margin-top: 1.5rem; padding: 0.85rem 1rem; text-align: center; border: 1px solid var(--mc-primary, #2b98a1); border-radius: 12px; color: var(--mc-primary, #2b98a1); font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background 0.25s ease, color 0.25s ease; } .mc-service-hub-card__cta:hover { background: var(--mc-primary, #2b98a1); color: #fff; } .services-cta__btn, .cta-btn { display: inline-flex; align-items: center; gap: 0.8rem; background: var(--mc-primary); color: #fff; text-decoration: none; font-weight: 700; padding: 1rem 2.5rem; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(22, 167, 184, 0.25); position: relative; z-index: 1; } .services-cta__btn:hover, .cta-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 32px rgba(22, 167, 184, 0.35); } /* Category grid */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 2rem; } /* Category card */ .category-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 24px; overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); scroll-margin-top: calc(20px + 76px + 1.5rem); } .category-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(10, 92, 102, 0.08); border-color: var(--mc-primary); } /* Card header */ .card-header { background: var(--mc-dark); padding: 2rem 2rem 1.5rem; position: relative; overflow: hidden; } .card-header::before { content: ''; position: absolute; top: -30%; right: -10%; width: 120px; height: 120px; background: var(--mc-primary); filter: blur(60px); opacity: 0.15; } .card-header .card-icon { width: 48px; height: 48px; background: rgba(22, 167, 184, 0.15); border: 1px solid rgba(22, 167, 184, 0.25); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--mc-primary); font-size: 1.2rem; margin-bottom: 1rem; position: relative; } .card-header h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 0.3rem; position: relative; } .card-header .card-count { font-size: 0.7rem; font-weight: 700; color: var(--mc-primary); text-transform: uppercase; letter-spacing: 0.1em; position: relative; } .card-body { padding: 1.5rem 2rem 2rem; } .card-footer { padding: 0 2rem 1.5rem; } .card-footer a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--mc-primary); text-decoration: none; transition: gap 0.3s ease; } .card-footer a:hover { gap: 0.8rem; } /* Service list */ .service-list { list-style: none; margin: 0; padding: 0; } .service-list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid #E2E8F0; font-size: 0.88rem; color: var(--mc-dark); transition: all 0.2s ease; } .service-list li:last-child { border-bottom: none; } .service-list li:not(.sub-header):hover { color: var(--mc-primary); padding-left: 0.4rem; } .service-list li:not(.sub-header)::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.55rem; color: var(--mc-primary); opacity: 0.5; flex-shrink: 0; } .service-list .sub-header { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mc-primary); padding-top: 0.8rem; border-bottom: none; } .service-list .sub-header::before { content: none !important; } /* CTA block */ .services-cta { background: var(--mc-dark); border-radius: 30px; padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden; } .services-cta::before { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: var(--mc-primary); filter: blur(120px); opacity: 0.1; } .services-cta h3 { font-size: 2rem; color: #fff; margin: 0 0 1rem; } .services-cta p { color: rgba(255,255,255,0.6); max-width: 500px; margin: 0 auto 2rem; } .cta-btn { display: inline-flex; align-items: center; gap: 0.8rem; background: var(--mc-primary); color: #fff; text-decoration: none; font-weight: 700; padding: 1rem 2.5rem; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(22, 167, 184, 0.25); } .cta-btn:hover { background: #237D85; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(22, 167, 184, 0.3); } @media (max-width: 768px) { .category-grid { grid-template-columns: 1fr; } .services-cta { padding: 3rem 1.5rem; border-radius: 20px; } } /* ============================================================ 8. HOME PAGE COMPONENTS (previously mc-home.css) ============================================================ */ /* Hero Section */ .mc-hero-section { position: relative; min-height: 100vh; display: flex; align-items: flex-start; background: url("https://stage.mindclinicjo.com/wp-content/uploads/2026/02/biryuzoviy-tsvet-v-interere.png") center/cover no-repeat; background-attachment: fixed; overflow: hidden; } /* Clear fixed island nav (top 20px + bar height) before Excellence badge */ .mc-hero-section .mc-hero-inner { padding-top: calc(20px + 76px + 2rem); width: 100%; } @media (max-width: 768px) { .mc-hero-section .mc-hero-inner { padding-top: calc(16px + 60px + 1.25rem); } } /* Floating decorative blob — top right */ .mc-hero-section::before { content: ''; position: absolute; top: -120px; right: -80px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(125, 228, 238, 0.18) 0%, rgba(43, 152, 161, 0.07) 55%, transparent 75% ); z-index: 2; pointer-events: none; animation: mc-blob-drift 12s ease-in-out infinite alternate; } /* Floating decorative ring — bottom left */ .mc-hero-section::after { content: ''; position: absolute; bottom: 80px; left: 5%; width: 320px; height: 320px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 60px rgba(125, 228, 238, 0.08); z-index: 2; pointer-events: none; animation: mc-blob-drift 16s ease-in-out infinite alternate-reverse; } @keyframes mc-blob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(20px, 15px) scale(1.04); } } .mc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(75deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.2) 100% ); z-index: 1; } @media (max-width: 1024px) { .mc-hero-overlay { background: rgba(255, 255, 255, 0.85); } .mc-hero-section::after { display: none; } } /* Hero proof-points frosted strip */ .mc-hero-proof-strip { display: inline-flex; flex-wrap: wrap; gap: 2rem; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 1.25rem 2rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } /* Client Logos Carousel */ .mc-client-logos-wrap { overflow: hidden; padding: 4rem 0; background-color: #ffffff; position: relative; } .mc-client-logos-wrap::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 40px rgba(22, 167, 184, 0.05); pointer-events: none; z-index: 2; } .mc-client-logos-track { width: 100%; } .mc-client-logos-inner { display: flex; gap: 3rem; width: max-content; animation: mc-client-logos-scroll 50s linear infinite; } .mc-client-logos-inner:hover { animation-play-state: paused; } .mc-client-logo-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 180px; max-width: 240px; filter: grayscale(100%); opacity: 0.6; transition: all 0.4s ease; } .mc-client-logo-item:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } .mc-client-logo-img { display: flex; align-items: center; justify-content: center; padding: 1rem; } .mc-client-logo-img img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; } @keyframes mc-client-logos-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Utils */ .mc-serif { font-family: 'Playfair Display', serif; } /* ============================================================ 7b. PRODUCTION UX — top bar, skip link, breadcrumbs, 404 ============================================================ */ .mc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1rem; background: var(--mc-primary); color: var(--mc-white); font-weight: 700; border-radius: 0 0 0.5rem 0.5rem; text-decoration: none; } .mc-skip-link:focus { left: 1rem; } .mc-top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: linear-gradient(90deg, var(--mc-dark) 0%, #2a3238 100%); color: rgba(255, 255, 255, 0.92); font-size: 0.78rem; border-bottom: 1px solid rgba(43, 152, 161, 0.25); } .mc-top-bar__inner { max-width: 1200px; margin: 0 auto; padding: 0.45rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; } .mc-top-bar__item { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; } a.mc-top-bar__item:hover { color: var(--mc-mint); } .mc-top-bar__item i { color: var(--mc-primary); font-size: 0.7rem; } .mc-top-bar__label { opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .mc-top-bar__sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, 0.2); } body.mc-has-top-bar .mc-nav-glass { top: calc(var(--mc-topbar-h) + var(--mc-nav-gap)); } body.mc-has-top-bar .mc-nav-glass.mc-scrolled { top: calc(var(--mc-topbar-h) + 4px); } body.mc-has-top-bar:not(.mc-front-page):not(.mc-service-page):not(.mc-hero-overlap), body.mc-single-article.mc-has-top-bar { padding-top: calc(var(--mc-topbar-h) + var(--mc-nav-h) + var(--mc-nav-gap) + 16px) !important; } .mc-breadcrumbs { max-width: 1200px; margin: 0 auto; padding: 0.5rem 1.5rem 0; } .mc-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--mc-text-muted); } .mc-breadcrumbs__item:not(:last-child)::after { content: '/'; margin-inline-start: 0.35rem; opacity: 0.45; } .mc-breadcrumbs__item a { color: var(--mc-primary); text-decoration: none; font-weight: 600; } .mc-breadcrumbs__item a:hover { text-decoration: underline; } .mc-service-page > .mc-breadcrumbs { position: relative; z-index: 20; padding-top: calc(36px + 20px + 64px); color: rgba(255, 255, 255, 0.85); } .mc-service-page > .mc-breadcrumbs a { color: var(--mc-mint); } .mc-404__section { padding: 8rem 1.5rem 5rem; text-align: center; } .mc-404__inner { max-width: 36rem; margin: 0 auto; } .mc-404__code { margin: 0 0 0.5rem; font-size: clamp(4rem, 12vw, 6rem); font-weight: 800; line-height: 1; color: rgba(43, 152, 161, 0.15); font-family: 'Playfair Display', serif; } .mc-404__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--mc-dark); } .mc-404__lead { margin: 0 0 2rem; color: var(--mc-text-muted); line-height: 1.7; } .mc-404__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 2.5rem; } .mc-404__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mc-404__btn--primary { background: var(--mc-primary); color: var(--mc-white); box-shadow: 0 10px 24px rgba(43, 152, 161, 0.28); } .mc-404__btn--ghost { border: 1px solid var(--mc-line); color: var(--mc-dark); background: var(--mc-white); } .mc-404__btn:hover { transform: translateY(-1px); } .mc-404__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; text-align: start; } .mc-404__links a { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px solid var(--mc-line); border-radius: 0.85rem; color: var(--mc-dark); text-decoration: none; font-weight: 600; background: var(--mc-slate); transition: border-color 0.2s ease, color 0.2s ease; } .mc-404__links a:hover { border-color: rgba(43, 152, 161, 0.4); color: var(--mc-primary); } .mc-404__links i { color: var(--mc-primary); } @media (max-width: 640px) { .mc-top-bar__sep { display: none; } .mc-top-bar__inner { flex-direction: column; gap: 0.25rem; padding: 0.5rem 1rem; } .mc-404__links { grid-template-columns: 1fr; } } /* ============================================================ 8. BOOKING CTA (Take the First Step) ============================================================ */ .mc-booking { padding: 6rem 1.5rem; background: linear-gradient(180deg, var(--mc-white) 0%, var(--mc-slate) 100%); } .mc-booking__container { max-width: 64rem; margin: 0 auto; } .mc-booking__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mc-line); border-radius: 3rem; background: var(--mc-slate); box-shadow: 0 24px 48px rgba(63, 73, 84, 0.08), 0 8px 16px rgba(43, 152, 161, 0.06); } .mc-booking__info { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3rem; color: var(--mc-white); background: linear-gradient(135deg, var(--mc-primary) 0%, #248a92 52%, var(--mc-primary-hover) 100%); overflow: hidden; } .mc-booking__info-glow { position: absolute; inset: -20% auto auto -10%; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } .mc-booking__title { position: relative; z-index: 1; margin: 0 0 1.25rem; font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--mc-white); } .mc-booking__lead { position: relative; z-index: 1; margin: 0 0 2rem; max-width: 28rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.92); } .mc-booking__details { position: relative; z-index: 1; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .mc-booking__detail { display: flex; align-items: center; gap: 1rem; } .mc-booking__detail-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: 0.95rem; } .mc-booking__detail-copy { display: grid; gap: 0.15rem; } .mc-booking__detail-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .mc-booking__detail-value { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--mc-white); text-decoration: none; transition: opacity 0.2s ease; } a.mc-booking__detail-value:hover { opacity: 0.85; } .mc-booking__form-wrap { display: flex; flex-direction: column; justify-content: center; padding: 3rem; background: linear-gradient(180deg, #f8fafb 0%, var(--mc-slate) 100%); } .mc-booking__form { display: grid; gap: 1rem; } .mc-booking__field { display: grid; gap: 0.45rem; } .mc-booking__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-text-muted); } .mc-booking__input { width: 100%; padding: 0.95rem 1rem; border: 1px solid var(--mc-border); border-radius: 0.9rem; background: var(--mc-white); color: var(--mc-text); font: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .mc-booking__input::placeholder { color: #9ca3af; } .mc-booking__input:focus { outline: none; border-color: rgba(43, 152, 161, 0.55); box-shadow: 0 0 0 4px rgba(43, 152, 161, 0.12); } .mc-booking__textarea { min-height: 6.5rem; resize: vertical; } .mc-booking__form-wrap .wpforms-field textarea, .mc-form-card .wpforms-field textarea { min-height: 6.5rem; resize: vertical; } .mc-booking__error { margin: 0; font-size: 0.875rem; font-weight: 600; color: #dc2626; text-align: center; } .mc-booking__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; margin-top: 0.25rem; padding: 1rem 1.25rem; border: none; border-radius: 0.9rem; background: linear-gradient(135deg, var(--mc-primary) 0%, #248a92 100%); color: var(--mc-white); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 12px 24px rgba(43, 152, 161, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .mc-booking__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(43, 152, 161, 0.34); background: linear-gradient(135deg, #31a5ae 0%, var(--mc-primary) 100%); } .mc-booking__submit:disabled { opacity: 0.75; cursor: wait; } .mc-booking__submit i { transition: transform 0.2s ease; } .mc-booking__submit:hover:not(:disabled) i { transform: translateX(3px); } .mc-booking__trust { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--mc-text-muted); } .mc-booking__trust i { color: var(--mc-primary); font-size: 0.75rem; } .mc-booking__success { display: grid; gap: 0.75rem; justify-items: center; padding: 1.5rem; border: 1px solid rgba(43, 152, 161, 0.25); border-radius: 1rem; background: rgba(209, 234, 235, 0.55); color: #1e7880; text-align: center; } .mc-booking__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mc-primary); color: var(--mc-white); font-size: 0.95rem; } .mc-booking__success p { margin: 0; font-weight: 600; } .mc-booking__trust--wpforms { margin-top: 1rem; } /* WPForms inside booking / contact cards */ .mc-booking__form-wrap .mc-wpforms-embed, .mc-form-card .mc-wpforms-embed { width: 100%; } .mc-booking__form-wrap .wpforms-container, .mc-form-card .wpforms-container { margin: 0 !important; } .mc-booking__form-wrap .wpforms-field-label, .mc-form-card .wpforms-field-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-text-muted); margin-bottom: 0.45rem; } .mc-booking__form-wrap .wpforms-field input[type="text"], .mc-booking__form-wrap .wpforms-field input[type="email"], .mc-booking__form-wrap .wpforms-field input[type="tel"], .mc-booking__form-wrap .wpforms-field textarea, .mc-booking__form-wrap .wpforms-field select, .mc-form-card .wpforms-field input[type="text"], .mc-form-card .wpforms-field input[type="email"], .mc-form-card .wpforms-field input[type="tel"], .mc-form-card .wpforms-field textarea, .mc-form-card .wpforms-field select { width: 100%; padding: 0.95rem 1.1rem; border: 1px solid var(--mc-line); border-radius: 0.85rem; background: var(--mc-white); font: inherit; font-size: 0.95rem; color: var(--mc-dark); box-shadow: 0 4px 16px rgba(63, 73, 84, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mc-booking__form-wrap .wpforms-field input:focus, .mc-booking__form-wrap .wpforms-field textarea:focus, .mc-booking__form-wrap .wpforms-field select:focus, .mc-form-card .wpforms-field input:focus, .mc-form-card .wpforms-field textarea:focus, .mc-form-card .wpforms-field select:focus { outline: none; border-color: rgba(43, 152, 161, 0.55); box-shadow: 0 0 0 4px rgba(43, 152, 161, 0.12); } .mc-booking__form-wrap .wpforms-submit-container, .mc-form-card .wpforms-submit-container { margin-top: 0.25rem; padding-top: 0; } .mc-booking__form-wrap .wpforms-submit, .mc-form-card .wpforms-submit { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem 1.5rem !important; border: none !important; border-radius: 999px !important; background: var(--mc-primary) !important; color: var(--mc-white) !important; font: inherit !important; font-size: 0.95rem !important; font-weight: 700 !important; box-shadow: 0 10px 28px rgba(43, 152, 161, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .mc-booking__form-wrap .wpforms-submit:hover, .mc-form-card .wpforms-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(43, 152, 161, 0.34); } .mc-booking__form-wrap .wpforms-confirmation-container-full, .mc-form-card .wpforms-confirmation-container-full { border: 1px solid rgba(43, 152, 161, 0.25); border-radius: 1rem; background: rgba(209, 234, 235, 0.55); color: #1e7880; padding: 1.25rem; text-align: center; } @media (min-width: 768px) { .mc-booking__card { flex-direction: row; } .mc-booking__info, .mc-booking__form-wrap { width: 50%; } .mc-booking__info { padding: 3.5rem; } .mc-booking__form-wrap { padding: 3.5rem; } } @media (max-width: 767px) { .mc-booking { padding: 4rem 1rem; } .mc-booking__card { border-radius: 2rem; } .mc-booking__info, .mc-booking__form-wrap { padding: 2rem 1.5rem; } } [dir="rtl"] .mc-booking__detail { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .mc-booking__submit i { transform: scaleX(-1); } [dir="rtl"] .mc-booking__submit:hover:not(:disabled) i { transform: scaleX(-1) translateX(3px); } /* ============================================================ 9. TESTIMONIALS (Kind Words) ============================================================ */ .mc-testimonials { position: relative; padding: 5rem 0; background: linear-gradient(145deg, var(--mc-dark) 0%, #2a3238 48%, #1a2e33 100%); color: var(--mc-white); overflow: hidden; } .mc-testimonials__glow { position: absolute; top: 3rem; left: 33%; width: 20rem; height: 20rem; background: radial-gradient(circle, rgba(43, 152, 161, 0.14) 0%, transparent 70%); pointer-events: none; } .mc-testimonials__container { position: relative; z-index: 1; max-width: 1280px; width: 92%; margin: 0 auto; } .mc-testimonials__header { text-align: center; margin-bottom: 2.5rem; } .mc-testimonials__eyebrow { display: block; margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc-primary); } .mc-testimonials__title { margin: 0 auto; max-width: 52rem; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.2; font-weight: 600; color: var(--mc-white); } .mc-testimonials__divider { width: 6rem; height: 3px; margin: 1.25rem auto 0; background: linear-gradient(90deg, transparent, var(--mc-primary), transparent); } .mc-testimonials__scorecard { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: 2.5rem; padding: 1.75rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: calc(var(--mc-radius) - 4px); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); } @media (min-width: 1024px) { .mc-testimonials__scorecard { grid-template-columns: 5fr 7fr; padding: 2rem; } } .mc-testimonials__score-main { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 640px) { .mc-testimonials__score-main { flex-direction: row; text-align: start; padding-bottom: 0; border-bottom: 0; } } @media (min-width: 1024px) { .mc-testimonials__score-main { padding-inline-end: 2rem; border-inline-end: 1px solid rgba(255, 255, 255, 0.08); } } .mc-testimonials__score-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid rgba(43, 152, 161, 0.35); background: linear-gradient(135deg, rgba(43, 152, 161, 0.12), transparent); flex-shrink: 0; } .mc-testimonials__score-value { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--mc-white); } .mc-testimonials__score-of { margin-top: 0.25rem; font-size: 0.6875rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); } .mc-testimonials__score-copy { display: flex; flex-direction: column; gap: 0.35rem; } .mc-testimonials__score-label { margin: 0; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); } .mc-testimonials__score-meta { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } .mc-brand-stars { display: inline-flex; align-items: center; gap: 0.15rem; } .mc-brand-stars__icon { font-size: 0.95rem; } .mc-brand-stars__icon--full { color: var(--mc-primary); } .mc-brand-stars__icon--empty { color: rgba(255, 255, 255, 0.15); } .mc-brand-stars__half { position: relative; display: inline-block; width: 0.95rem; height: 0.95rem; overflow: hidden; } .mc-brand-stars__half .mc-brand-stars__icon { position: absolute; inset: 0; } .mc-testimonials__score-stars .mc-brand-stars__icon { font-size: 1.1rem; } .mc-testimonials__breakdown { display: grid; gap: 0.85rem; } .mc-testimonials__breakdown-row { display: flex; flex-direction: column; gap: 0.35rem; } @media (min-width: 640px) { .mc-testimonials__breakdown-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } } .mc-testimonials__breakdown-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .mc-testimonials__breakdown-rating { display: flex; align-items: center; gap: 0.65rem; } .mc-testimonials__breakdown-stars .mc-brand-stars__icon { font-size: 0.8rem; } .mc-testimonials__breakdown-bar { display: none; width: 6rem; height: 0.35rem; border-radius: 999px; background: rgba(0, 0, 0, 0.35); overflow: hidden; } @media (min-width: 640px) { .mc-testimonials__breakdown-bar { display: block; } } .mc-testimonials__breakdown-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-hover)); } .mc-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .mc-testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mc-testimonials__card { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: calc(var(--mc-radius) - 4px); background: rgba(255, 255, 255, 0.03); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .mc-testimonials__card:hover { transform: translateY(-4px); border-color: rgba(43, 152, 161, 0.28); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); } .mc-testimonials__card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .mc-testimonials__quote { font-size: 1.75rem; color: rgba(43, 152, 161, 0.18); transition: color 0.3s ease; } .mc-testimonials__card:hover .mc-testimonials__quote { color: rgba(43, 152, 161, 0.32); } .mc-testimonials__quote-text { margin: 0; } .mc-testimonials__quote-text p { margin: 0; line-height: 1.75; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); } .mc-testimonials__card[dir="rtl"] .mc-testimonials__quote-text p { font-size: 1.05rem; font-weight: 500; } .mc-testimonials__card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mc-testimonials__card[dir="rtl"] .mc-testimonials__card-footer { flex-direction: row-reverse; } .mc-testimonials__author strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--mc-white); } .mc-testimonials__author span { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); } .mc-testimonials__google-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; border-radius: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); font-size: 0.625rem; font-weight: 800; color: rgba(255, 255, 255, 0.45); } [dir="rtl"] .mc-testimonials__title { font-family: 'Plus Jakarta Sans', sans-serif; } @media (max-width: 767px) { .mc-testimonials { padding: 4rem 0; } } /* ============================================================ 9. PREMIUM FOOTER (Redesign) ============================================================ */ .mc-premium-footer { background: linear-gradient(145deg, var(--mc-dark) 0%, #2a3238 48%, #1a2e33 100%); color: var(--mc-muted); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; position: relative; } .mc-footer-accent-bar { height: 4px; background: linear-gradient(90deg, rgba(43, 152, 161, 0.15), var(--mc-primary), rgba(43, 152, 161, 0.15)); } .mc-footer-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 640px) { .mc-footer-container { padding: 0 2rem; } } @media (min-width: 768px) { .mc-footer-container { padding: 0 3rem; } } .mc-footer-main { padding: 4rem 0 2rem; position: relative; overflow: hidden; } .mc-footer-main::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 85%, rgba(43, 152, 161, 0.18) 0%, transparent 42%), radial-gradient(circle at 85% 15%, rgba(43, 152, 161, 0.08) 0%, transparent 40%); pointer-events: none; } .mc-footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; padding-bottom: 3rem; margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; } @media (min-width: 768px) { .mc-footer-top { flex-direction: row; justify-content: space-between; align-items: center; } } .mc-footer-brand-heading { display: flex; align-items: center; gap: 0.5rem; } .mc-footer-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mc-primary); flex-shrink: 0; animation: mc-footer-pulse 2s ease-in-out infinite; } @keyframes mc-footer-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } } .mc-footer-brand .custom-logo-link img, .mc-footer-logo-img { height: 56px; width: auto; max-width: 240px; display: block; object-fit: contain; } .mc-footer-brand-lockup, .mc-footer-logo-link { display: inline-flex; align-items: center; gap: 0.75rem; line-height: 1.2; text-decoration: none; margin-bottom: 0.25rem; } .mc-footer-logo-title { font-family: 'Playfair Display', serif; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--mc-white); letter-spacing: 0.02em; white-space: nowrap; } /* Colored header logo → white on dark footer */ .mc-footer-logo-link--invert .mc-footer-logo-img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } .mc-footer-logo-link--white .mc-footer-logo-img { opacity: 1; } .mc-footer-logo-text { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; color: var(--mc-white); letter-spacing: 0.02em; } .mc-footer-tagline { margin: 0.5rem 0 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.6; color: var(--mc-muted); } @media (min-width: 640px) { .mc-footer-tagline { font-size: 1rem; } } .mc-footer-top-actions { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; } @media (min-width: 640px) { .mc-footer-top-actions { flex-direction: row; align-items: center; width: auto; } } .mc-footer-trust-line { display: none; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } @media (min-width: 1024px) { .mc-footer-trust-line { display: flex; } } .mc-footer-trust-line i { color: var(--mc-primary); } .mc-footer-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-hover)); color: #fff !important; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 20px rgba(43, 152, 161, 0.2); } .mc-footer-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(43, 152, 161, 0.35); color: #fff !important; } .mc-footer-cta-btn__arrow { transition: transform 0.2s ease; } .mc-footer-cta-btn:hover .mc-footer-cta-btn__arrow { transform: translateX(4px); } [dir="rtl"] .mc-footer-cta-btn:hover .mc-footer-cta-btn__arrow { transform: translateX(-4px); } .mc-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 0; position: relative; z-index: 1; } @media (min-width: 640px) { .mc-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .mc-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } } .mc-footer-col-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.12em; } .mc-footer-col-accent { width: 4px; height: 12px; border-radius: 999px; background: var(--mc-primary); flex-shrink: 0; } .mc-footer-col--stacked { display: flex; flex-direction: column; gap: 1.5rem; } .mc-footer-links, .mc-footer-contact { list-style: none; padding: 0; margin: 0; } .mc-footer-links li { margin-bottom: 0.625rem; } .mc-footer-links--hover a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--mc-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.15s ease; } .mc-footer-links--hover a:hover { color: var(--mc-white); text-decoration: underline; text-decoration-color: var(--mc-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; padding-inline-start: 0; } .mc-footer-link-arrow { opacity: 0; color: var(--mc-primary); font-size: 0.75rem; transition: opacity 0.15s ease; } .mc-footer-links--hover a:hover .mc-footer-link-arrow { opacity: 1; } .mc-footer-links__view-all a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mc-primary) !important; font-weight: 600; text-decoration: none !important; } .mc-footer-links__view-all a:hover { color: var(--mc-mint) !important; } .mc-footer-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; } .mc-footer-quick-grid a { color: var(--mc-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.15s ease; } .mc-footer-quick-grid a:hover { color: var(--mc-white); } .mc-footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.625rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); } .mc-footer-contact li i { color: var(--mc-primary); margin-top: 0.15rem; width: 16px; text-align: center; flex-shrink: 0; } .mc-footer-contact a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.15s ease; } .mc-footer-contact a:hover { color: var(--mc-white); } .mc-footer-hours { display: inline-flex !important; align-items: center !important; gap: 0.5rem; padding: 0.375rem 0.625rem; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.5rem; width: fit-content; font-size: 0.75rem !important; } .mc-footer-newsletter-text { color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; margin: 0 0 0.75rem; line-height: 1.6; } .mc-footer-newsletter-form { position: relative; margin-bottom: 0.75rem; } .mc-footer-newsletter-form input { width: 100%; padding: 0.75rem 3rem 0.75rem 1rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.75rem; color: var(--mc-white); font-size: 0.875rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } [dir="rtl"] .mc-footer-newsletter-form input { padding: 0.75rem 1rem 0.75rem 3rem; } .mc-footer-newsletter-form input::placeholder { color: #64748b; } .mc-footer-newsletter-form input:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(43, 152, 161, 0.12); } .mc-footer-newsletter-form button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-hover)); border: none; border-radius: 0.5rem; color: var(--mc-white); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } [dir="rtl"] .mc-footer-newsletter-form button { right: auto; left: 6px; } .mc-footer-newsletter-form button:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(43, 152, 161, 0.35); } .mc-footer-newsletter-form button:disabled { opacity: 0.6; cursor: not-allowed; } .mc-footer-newsletter-msg { font-size: 0.75rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--mc-primary); } .mc-footer-newsletter-msg.hidden { display: none; } .mc-footer-social-wrap { margin-top: 1.25rem; } .mc-footer-reach .mc-footer-contact { margin-bottom: 0; } .mc-footer-social-label { display: block; font-size: 0.75rem; font-weight: 500; color: #64748b; margin-bottom: 0.625rem; } .mc-footer-social { display: flex; flex-wrap: wrap; gap: 0.625rem; } .mc-footer-social a { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .mc-footer-social a:hover { background: rgba(43, 152, 161, 0.15); border-color: rgba(43, 152, 161, 0.4); color: var(--mc-mint); transform: translateY(-2px); } .mc-footer-trust-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 2rem 1.5rem; margin: 0.5rem 0 0; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; } @media (min-width: 768px) { .mc-footer-trust-badges { grid-template-columns: repeat(4, 1fr); } } .mc-footer-trust-badge { display: flex; align-items: center; gap: 0.75rem; } .mc-footer-trust-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: rgba(43, 152, 161, 0.1); color: var(--mc-primary); flex-shrink: 0; } .mc-footer-trust-badge strong { display: block; font-size: 0.75rem; font-weight: 700; color: var(--mc-white); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .mc-footer-trust-badge small { display: block; font-size: 0.6875rem; color: #64748b; line-height: 1.3; margin-top: 0.125rem; } .mc-footer-bottom { background: transparent; padding: 2.5rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mc-footer-bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } @media (min-width: 640px) { .mc-footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: start; } } .mc-footer-copyright { font-size: 0.75rem; color: #64748b; margin: 0; } .mc-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; } .mc-footer-legal a { color: #64748b; text-decoration: none; font-size: 0.75rem; transition: color 0.2s ease; } .mc-footer-legal a:hover { color: var(--mc-muted); } .mc-footer-separator { color: rgba(148, 163, 184, 0.25); } .mc-footer-credit { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(148, 163, 184, 0.08); text-align: center; font-size: 0.625rem; color: #475569; } .mc-footer-credit a { color: #64748b; text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .mc-footer-credit a:hover { color: var(--mc-white); } .mc-footer-credit__domain { margin-inline-start: 0.25rem; font-weight: 500; font-style: italic; color: #64748b; } .mc-footer-credit a:hover .mc-footer-credit__domain { color: rgba(255, 255, 255, 0.55); } @media (max-width: 767px) { .mc-footer-main { padding-top: 3rem; } .mc-footer-grid { padding: 2.5rem 0; } .mc-footer-top { text-align: center; align-items: center; } .mc-footer-brand-heading { justify-content: center; } .mc-footer-tagline { text-align: center; margin-inline: auto; } }