/* ============================================================================= CLINICS MANAGEMENT — Public-site theme personalities Raw CSS (NOT processed by Tailwind/Vite) so themes can be edited & previewed with no build step. Loaded after the built app.css in x-layouts.site. Driven by: + CSS vars from TemplateTheme (--brand-50..900, --tpl-accent2, --tpl-ink, --tpl-surface, --tpl-font, --tpl-radius). Latin heading fonts fall back to Tajawal for Arabic glyphs. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Quicksand:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&family=Rubik:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Nunito+Sans:wght@400;600;700;800&family=Lato:wght@300;400;700;900&family=Work+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700;800&family=Raleway:wght@400;500;600;700;800&family=Mulish:wght@400;600;700;800&family=Jost:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=Josefin+Sans:wght@400;500;600;700&family=Karla:wght@400;500;700&family=Heebo:wght@400;500;700;800&display=swap'); /* --------------------------------------------------------------------------- 1) UNIVERSAL TOKEN LAYER — every non-classic theme picks up its font, surface tint, corner radius and accent automatically from its tokens. --------------------------------------------------------------------------- */ /* Heading typeface (Latin from the theme, Arabic always falls back to Tajawal) */ [data-template]:not([data-template="classic"]) h1, [data-template]:not([data-template="classic"]) h2, [data-template]:not([data-template="classic"]) h3, [data-template]:not([data-template="classic"]) .section-title, [data-template]:not([data-template="classic"]) .hero-headline, [data-template]:not([data-template="classic"]) .hero-headline-md { font-family: var(--tpl-font, 'Inter'), 'Tajawal', 'Inter', system-ui, sans-serif; } /* Page background tint */ [data-template]:not([data-template="classic"]) body { background-color: rgb(var(--tpl-surface, 255 255 255)); } /* Card / surface radius from the theme token */ [data-template]:not([data-template="classic"]) .card, [data-template]:not([data-template="classic"]) .card-padded { border-radius: var(--tpl-radius, 16px); } /* Buttons + inputs inherit a proportional radius */ [data-template]:not([data-template="classic"]) .btn-primary, [data-template]:not([data-template="classic"]) .btn-navy, [data-template]:not([data-template="classic"]) .btn-outline, [data-template]:not([data-template="classic"]) .btn-ghost, [data-template]:not([data-template="classic"]) .btn-dark, [data-template]:not([data-template="classic"]) .form-input { border-radius: calc(var(--tpl-radius, 16px) * 0.62); } /* Themed soft shadow + hover lift on cards */ [data-template]:not([data-template="classic"]) .card { box-shadow: 0 6px 24px -12px rgb(var(--brand-700, 12 88 139) / 0.28); transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } [data-template]:not([data-template="classic"]) .card:hover { box-shadow: 0 20px 44px -18px rgb(var(--brand-600, 15 107 169) / 0.42); } /* Primary buttons get a subtle two-tone gradient from accent → accent2 */ [data-template]:not([data-template="classic"]) .btn-primary { background-image: linear-gradient(135deg, rgb(var(--brand-500, 19 125 197)), rgb(var(--tpl-accent2, 27 41 102))); border: none; box-shadow: 0 10px 26px -12px rgb(var(--brand-600) / 0.55); } [data-template]:not([data-template="classic"]) .btn-primary:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-2px); } /* Pills / badges tint */ [data-template]:not([data-template="classic"]) .pill-brand { background: rgb(var(--brand-500) / 0.12); color: rgb(var(--brand-700)); } /* Hero: overlay the theme's colour wash on top of the shared shader */ [data-template]:not([data-template="classic"]) .mesh-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(var(--brand-600) / 0.55) 0%, rgb(var(--tpl-accent2, 27 41 102) / 0.42) 55%, rgb(var(--brand-800) / 0.6) 100%); mix-blend-mode: soft-light; pointer-events: none; } /* --------------------------------------------------------------------------- 2) PER-THEME PERSONALITY — pill vs sharp, motion, and signature touches. --------------------------------------------------------------------------- */ /* ---- SERENE : soft, organic, calm ---- */ [data-template="serene"] .btn-primary, [data-template="serene"] .btn-outline, [data-template="serene"] .pill, [data-template="serene"] .pill-brand { border-radius: 9999px; } [data-template="serene"] .card { box-shadow: 0 10px 30px -16px rgb(28 61 48 / 0.30); } [data-template="serene"] .section-title { letter-spacing: -0.01em; font-weight: 600; } /* ---- AURORA : gradient violet, glow, contemporary (flagship sample) ---- */ [data-template="aurora"] .btn-primary { background-image: linear-gradient(120deg, #6b46c1, #9f7aea 45%, #d53f8c); box-shadow: 0 12px 34px -12px rgb(107 70 193 / 0.6); } [data-template="aurora"] .card { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, rgb(107 70 193 / .28), rgb(213 63 140 / .28)) border-box; border: 1px solid transparent; box-shadow: 0 14px 40px -18px rgb(107 70 193 / 0.4); } [data-template="aurora"] .pill-brand { background: linear-gradient(120deg, rgb(107 70 193 /.16), rgb(213 63 140 /.16)); color: #6b46c1; } [data-template="aurora"] .section-title { background: linear-gradient(120deg, #6b46c1, #d53f8c); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes tpl-aurora-glow { 0%,100% { box-shadow: 0 12px 34px -12px rgb(107 70 193 / 0.5); } 50% { box-shadow: 0 16px 44px -10px rgb(213 63 140 / 0.6); } } [data-template="aurora"] .btn-primary:hover { animation: tpl-aurora-glow 2.2s ease-in-out infinite; } /* ---- MERIDIAN : crisp corporate, minimal radius ---- */ [data-template="meridian"] .btn-primary, [data-template="meridian"] .btn-outline, [data-template="meridian"] .card, [data-template="meridian"] .pill { border-radius: 4px; } [data-template="meridian"] .btn-primary { background-image: none; background-color: rgb(var(--brand-600)); } [data-template="meridian"] .card { box-shadow: 0 2px 10px -4px rgb(23 38 63 / 0.18); border: 1px solid rgb(23 38 63 / 0.08); } [data-template="meridian"] .section-title { letter-spacing: -0.02em; text-transform: none; } /* ---- BLOSSOM : pillowy pink, extra round, gentle ---- */ [data-template="blossom"] .btn-primary, [data-template="blossom"] .btn-outline, [data-template="blossom"] .pill, [data-template="blossom"] .pill-brand { border-radius: 9999px; } [data-template="blossom"] .btn-primary { background-image: linear-gradient(120deg, #d53f8c, #f6ad55); } [data-template="blossom"] .card { box-shadow: 0 16px 40px -20px rgb(213 63 140 / 0.4); } /* ---- ONYX : luxurious dark mode with gold accents ---- */ [data-template="onyx"] body { background-color: #14141c; color: #e7e7ee; } [data-template="onyx"] .card { background-color: #1c1c26; color: #e7e7ee; border: 1px solid rgb(200 162 74 / 0.22); box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.7); border-radius: 10px; } [data-template="onyx"] .section-title, [data-template="onyx"] h1, [data-template="onyx"] h2, [data-template="onyx"] h3 { color: #f2ead6; letter-spacing: -0.01em; } [data-template="onyx"] .btn-primary { background-image: linear-gradient(120deg, #c8a24a, #e6c877); color: #14141c; font-weight: 700; box-shadow: 0 12px 30px -12px rgb(200 162 74 / 0.55); } [data-template="onyx"] .pill-brand { background: rgb(200 162 74 / 0.15); color: #e6c877; } [data-template="onyx"] .section.bg-white, [data-template="onyx"] section.bg-white { background-color: #14141c !important; } /* ---- CORAL : warm, energetic, playful zoom ---- */ [data-template="coral"] .btn-primary, [data-template="coral"] .card, [data-template="coral"] .pill { border-radius: 20px; } [data-template="coral"] .btn-primary { background-image: linear-gradient(120deg, #dd6b20, #f6ad55); } [data-template="coral"] .card:hover { transform: translateY(-4px) scale(1.015); } /* ---- SKY : fresh, airy, light ---- */ [data-template="sky"] .btn-primary { background-image: linear-gradient(120deg, #0987a0, #4fd1c5); } [data-template="sky"] .card { box-shadow: 0 12px 34px -18px rgb(9 135 160 / 0.35); } /* ---- VERDANT : rich natural green, refined ---- */ [data-template="verdant"] .btn-primary { background-image: linear-gradient(120deg, #276749, #48bb78); } [data-template="verdant"] .section-title { font-weight: 600; } /* ---- NOBLE : classic gold, serif, stately ---- */ [data-template="noble"] .btn-primary, [data-template="noble"] .btn-outline, [data-template="noble"] .card { border-radius: 6px; } [data-template="noble"] h1, [data-template="noble"] h2, [data-template="noble"] h3, [data-template="noble"] .section-title, [data-template="noble"] .hero-headline { font-family: 'Playfair Display', 'Tajawal', Georgia, serif; letter-spacing: 0; font-weight: 700; } [data-template="noble"] .btn-primary { background-image: linear-gradient(120deg, #a06a1f, #c8963e); } [data-template="noble"] .pill { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; } [data-template="noble"] .card { border: 1px solid rgb(160 106 31 / 0.18); box-shadow: 0 10px 30px -16px rgb(160 106 31 / 0.3); } /* --------------------------------------------------------------------------- 3) MOTION PERSONALITIES — entrance animation flavour per theme, layered on the existing scroll-reveal ([data-reveal] -> .is-visible) engine. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* glow themes: reveal with a soft brightness bloom */ [data-template="aurora"] [data-reveal].is-visible, [data-template="onyx"] [data-reveal].is-visible { animation: tpl-reveal-glow .8s ease both; } @keyframes tpl-reveal-glow { from { opacity:0; transform: translateY(18px); filter: brightness(1.4); } to { opacity:1; transform:none; filter:none; } } /* zoom theme: reveal with a gentle scale-in */ [data-template="coral"] [data-reveal].is-visible { animation: tpl-reveal-zoom .7s cubic-bezier(.22,.61,.36,1) both; } @keyframes tpl-reveal-zoom { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } } /* fade themes: calmer, slower fade-up */ [data-template="serene"] [data-reveal].is-visible, [data-template="blossom"] [data-reveal].is-visible, [data-template="sky"] [data-reveal].is-visible, [data-template="noble"] [data-reveal].is-visible { animation: tpl-reveal-fade 1s ease both; } @keyframes tpl-reveal-fade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } } /* --------------------------------------------------------------------------- 5) DARK SURFACES + HERO — the big navy hero and dark sections follow each theme's ink/brand colour instead of the one fixed navy, so every theme reads as a whole design, not just a re-tinted accent. --------------------------------------------------------------------------- */ [data-template]:not([data-template="classic"]) .bg-navy { background-color: rgb(var(--tpl-ink, 27 41 102)) !important; } /* Hero: a rich themed gradient behind a softened shader */ [data-template]:not([data-template="classic"]) header.bg-navy { background-image: linear-gradient(160deg, rgb(var(--brand-700)) 0%, rgb(var(--tpl-ink, 27 41 102)) 58%, rgb(var(--brand-900)) 100%) !important; } [data-template]:not([data-template="classic"]) .mesh-hero { opacity: .52; } /* Real hero photo (pulled from the source template) gets a themed gradient wash so the medical image reads through while the white headline stays legible — the colour follows each theme's brand + ink tokens. */ .hero-photo-tint { background: radial-gradient(125% 135% at 50% 38%, rgb(var(--tpl-ink, 27 41 102) / .28) 0%, rgb(var(--brand-900, 6 44 70) / .74) 100%), linear-gradient(180deg, rgb(var(--brand-800, 8 62 96) / .50) 0%, rgb(var(--tpl-ink, 27 41 102) / .72) 100%); } /* Glass cards on dark sections keep a neutral, theme-tinted translucency */ [data-template]:not([data-template="classic"]) .svc-card2 { background: rgb(255 255 255 / 0.05) !important; border-color: rgb(255 255 255 / 0.14) !important; } /* ONYX — a genuinely dark hero + dark light-sections (true dark mode) */ [data-template="onyx"] header.bg-navy { background-image: linear-gradient(160deg, #20202c 0%, #0d0d12 62%, #050507 100%) !important; } [data-template="onyx"] .bg-navy { background-color: #0d0d12 !important; } [data-template="onyx"] .mesh-hero { opacity: .30; } [data-template="onyx"] .section.bg-white, [data-template="onyx"] section.bg-white, [data-template="onyx"] .flow-soft, [data-template="onyx"] .flow-pastel { background: #14141c !important; } [data-template="onyx"] .card p, [data-template="onyx"] .card .text-gray-700, [data-template="onyx"] .card .text-gray-500 { color: #b9b9c6 !important; } /* --------------------------------------------------------------------------- 6) LAYOUT RHYTHM — spacing & section-shape personalities per theme family. --------------------------------------------------------------------------- */ /* Soft families: airy spacing + rounded section tops */ [data-template="serene"] .section, [data-template="blossom"] .section { padding-block: 5.5rem; } [data-template="serene"] .section-rounded, [data-template="blossom"] .section-rounded { border-radius: 3rem 3rem 0 0; } /* Crisp families: tighter rhythm + squared sections */ [data-template="meridian"] .section, [data-template="noble"] .section { padding-block: 3.75rem; } [data-template="meridian"] .section-rounded, [data-template="onyx"] .section-rounded, [data-template="noble"] .section-rounded { border-radius: 0; } /* Contemporary families: bolder rounded section tops */ [data-template="aurora"] .section-rounded, [data-template="coral"] .section-rounded, [data-template="sky"] .section-rounded { border-radius: 2.5rem 2.5rem 0 0; } /* --------------------------------------------------------------------------- 8) SITE HEADER — structural archetypes (standard | centered | split | minimal | bold). One shared DOM (x-site.header) re-lays-out per template. --------------------------------------------------------------------------- */ .site-hdr { background: rgb(255 255 255 / .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgb(15 23 42 / .07); } .site-hdr__promo { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; font-size: .72rem; line-height: 1; color: #fff; background: linear-gradient(120deg, rgb(var(--brand-600, 15 107 169)), rgb(var(--tpl-accent2, 27 41 102))); } .site-hdr__promo a { color: #fff; } .site-hdr__wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .site-hdr__wrap { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .site-hdr__wrap { padding-inline: 2rem; } } .site-hdr__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.25rem; } @media (min-width: 1024px) { .site-hdr__bar { height: 5rem; } } .site-hdr__logo img { height: 2.25rem; width: auto; display: block; } @media (min-width: 1024px) { .site-hdr__logo img { height: 2.5rem; } } .site-hdr__nav { display: none; align-items: center; gap: 1.6rem; } @media (min-width: 1024px) { .site-hdr__nav { display: flex; } } .site-hdr__link { font-size: .92rem; font-weight: 500; color: rgb(51 65 85); white-space: nowrap; transition: color .2s, background .2s; } .site-hdr__link:hover, .site-hdr__link.is-active { color: rgb(var(--brand-600, 15 107 169)); } .site-hdr__actions { display: flex; align-items: center; gap: .5rem; } .site-hdr__lang { display: none; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; color: rgb(51 65 85); padding: .4rem .55rem; border-radius: .5rem; } .site-hdr__login { display: none; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 500; color: rgb(51 65 85); } @media (min-width: 640px) { .site-hdr__lang, .site-hdr__login { display: inline-flex; } } .site-hdr__lang:hover, .site-hdr__login:hover { color: rgb(var(--brand-600)); } .site-hdr__cta { display: none; } @media (min-width: 768px) { .site-hdr__cta { display: inline-flex; } } .site-hdr__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; color: rgb(var(--tpl-ink, 27 41 102)); } .site-hdr__burger:hover { background: rgb(15 23 42 / .06); } @media (min-width: 1024px) { .site-hdr__burger { display: none; } } /* Drawer (mobile for all; desktop too for 'minimal') */ .site-hdr__drawer { border-top: 1px solid rgb(15 23 42 / .07); background: #fff; } .site-hdr__drawer-inner { max-width: 80rem; margin-inline: auto; padding: 1rem; display: flex; flex-direction: column; gap: .15rem; } .site-hdr__drawer-link { padding: .7rem .75rem; border-radius: .6rem; color: rgb(51 65 85); font-weight: 500; } .site-hdr__drawer-link:hover { background: rgb(15 23 42 / .04); color: rgb(var(--brand-600)); } .site-hdr__drawer-foot { padding-top: 1rem; margin-top: .75rem; border-top: 1px solid rgb(15 23 42 / .07); display: flex; flex-direction: column; gap: .15rem; } /* ---- CENTERED : big logo centred, nav on a second centred row ---- */ @media (min-width: 1024px) { .site-hdr--centered .site-hdr__bar { display: grid; height: auto; padding-block: .85rem; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". logo actions" "nav nav nav"; row-gap: .5rem; column-gap: 1rem; } .site-hdr--centered .site-hdr__logo { grid-area: logo; justify-self: center; } .site-hdr--centered .site-hdr__logo img{ height: 3rem; } .site-hdr--centered .site-hdr__actions { grid-area: actions; justify-self: end; } .site-hdr--centered .site-hdr__nav { grid-area: nav; justify-content: center; } } .site-hdr--centered .site-hdr__link { letter-spacing: .01em; } /* ---- SPLIT : centred stretched nav between logo & actions, accent underline ---- */ @media (min-width: 1024px) { .site-hdr--split .site-hdr__nav { flex: 1; justify-content: center; gap: 2.2rem; } .site-hdr--split .site-hdr__bar { border-bottom: 2px solid rgb(var(--brand-500) / .16); } } .site-hdr--split .site-hdr__link { text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; font-weight: 600; } .site-hdr--split .site-hdr__promo { justify-content: space-between; } /* ---- MINIMAL : no promo strip, no inline nav, everything in a clean drawer ---- */ .site-hdr--minimal .site-hdr__promo { display: none; } .site-hdr--minimal .site-hdr__bar { height: 4.5rem; } .site-hdr--minimal .site-hdr__burger{ display: inline-flex; } /* keep on desktop */ .site-hdr--minimal .site-hdr__drawer-inner { padding-block: 1.5rem; } @media (min-width: 1024px) { .site-hdr--minimal .site-hdr__drawer-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem 2rem; padding-block: 2rem; } .site-hdr--minimal .site-hdr__drawer-foot { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .75rem; } .site-hdr--minimal .site-hdr__drawer-foot .btn-primary { width: auto; margin-inline-start: auto; } } /* ---- BOLD : thick coloured promo, pill nav, big logo & CTA ---- */ .site-hdr--bold .site-hdr__promo { padding: .8rem 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .01em; } .site-hdr--bold .site-hdr__bar { height: 5.25rem; } .site-hdr--bold .site-hdr__logo img { height: 2.5rem; } @media (min-width: 1024px) { .site-hdr--bold .site-hdr__logo img { height: 2.9rem; } } .site-hdr--bold .site-hdr__nav { gap: .35rem; } .site-hdr--bold .site-hdr__link { padding: .5rem .95rem; border-radius: 9999px; } .site-hdr--bold .site-hdr__link:hover { background: rgb(var(--brand-500) / .10); } .site-hdr--bold .site-hdr__link.is-active { background: rgb(var(--brand-500) / .14); color: rgb(var(--brand-700)); } .site-hdr--bold .site-hdr__cta { padding: .72rem 1.4rem; font-size: .95rem; font-weight: 600; } /* --------------------------------------------------------------------------- 9) SITE FOOTER — structural archetypes (columns | centered | cta | panel). Shared DOM (x-site.footer), re-laid-out per template. Ink colour follows the theme (--tpl-ink), so a dark theme keeps a dark footer. --------------------------------------------------------------------------- */ .site-ftr { position: relative; margin-top: 7rem; background: rgb(var(--tpl-ink, 27 41 102)); } /* Newsletter */ .site-ftr__news { max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; position: relative; z-index: 10; } .site-ftr__news-inner { background: #fff; border-radius: 1.5rem; box-shadow: 0 30px 70px -25px rgb(0 0 0 / .45); padding: 2rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; } .site-ftr__news-title { font-size: 1.55rem; font-weight: 700; color: rgb(var(--tpl-ink, 27 41 102)); line-height: 1.3; } .site-ftr__news-form { display: flex; gap: .75rem; } @media (max-width: 640px) { .site-ftr__news-inner { grid-template-columns: 1fr; } .site-ftr__news-form { flex-direction: column; } } /* Body */ .site-ftr__body { max-width: 80rem; margin-inline: auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; } .site-ftr__desc { color: rgb(255 255 255 / .65); font-size: .875rem; line-height: 1.7; max-width: 22rem; margin: 0 0 1.25rem; } .site-ftr__socials { display: flex; gap: .5rem; flex-wrap: wrap; } .site-ftr__social { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .8); display: flex; align-items: center; justify-content: center; transition: all .2s; } .site-ftr__social:hover { background: rgb(var(--brand-500)); color: #fff; transform: scale(1.1); } .site-ftr__heading { font-weight: 600; margin-bottom: 1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; } .site-ftr__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; font-size: .875rem; } .site-ftr__links a { color: rgb(255 255 255 / .65); } .site-ftr__links a:hover { color: #fff; } .site-ftr__contact { display: flex; align-items: center; gap: .5rem; color: rgb(255 255 255 / .65); } .site-ftr__contact a { color: rgb(255 255 255 / .65); } .site-ftr__contact a:hover { color: #fff; } /* Bottom */ .site-ftr__bottom { border-top: 1px solid rgb(255 255 255 / .1); } .site-ftr__bottom-inner { max-width: 80rem; margin-inline: auto; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .site-ftr__copy { color: rgb(255 255 255 / .55); font-size: .75rem; } .site-ftr__legal { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .75rem; } .site-ftr__legal a { color: rgb(255 255 255 / .55); white-space: nowrap; } .site-ftr__legal a:hover { color: #fff; } /* ---- COLUMNS : classic 3-column with a floating newsletter card ---- */ .site-ftr--columns .site-ftr__news { margin-top: -5rem; } @media (min-width: 768px) { .site-ftr--columns .site-ftr__body { grid-template-columns: 5fr 3fr 4fr; } } /* ---- CENTERED : stacked & centred, inline link row, no card straddle ---- */ .site-ftr--centered .site-ftr__news { margin-top: -5rem; } .site-ftr--centered .site-ftr__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; } .site-ftr--centered .site-ftr__brand { display: flex; flex-direction: column; align-items: center; } .site-ftr--centered .site-ftr__desc { margin-inline: auto; } .site-ftr--centered .site-ftr__socials { justify-content: center; } .site-ftr--centered .site-ftr__col:not(.site-ftr__brand) { width: 100%; } .site-ftr--centered .site-ftr__heading { display: none; } .site-ftr--centered .site-ftr__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; } .site-ftr--centered .site-ftr__bottom-inner { justify-content: center; text-align: center; } /* ---- CTA : full-width gradient newsletter band on top, then columns ---- */ .site-ftr--cta .site-ftr__news { max-width: none; margin: 0; padding: 0; background: linear-gradient(120deg, rgb(var(--brand-600) / .28), rgb(var(--tpl-accent2, 27 41 102) / .22)); border-bottom: 1px solid rgb(255 255 255 / .1); } .site-ftr--cta .site-ftr__news-inner { max-width: 80rem; margin-inline: auto; border-radius: 0; background: transparent; box-shadow: none; padding: 3.5rem 1.5rem; } .site-ftr--cta .site-ftr__news-title { color: #fff; font-size: 2rem; } @media (min-width: 768px) { .site-ftr--cta .site-ftr__body { grid-template-columns: 5fr 3fr 4fr; } } /* ---- PANEL : brand block sits in a raised translucent panel beside the links ---- */ .site-ftr--panel .site-ftr__news { margin-top: -5rem; } .site-ftr--panel .site-ftr__brand { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); border-radius: 1.25rem; padding: 2rem; } @media (min-width: 768px) { .site-ftr--panel .site-ftr__body { grid-template-columns: 2.2fr 1fr 1fr; gap: 2.5rem; align-items: start; } } /* --------------------------------------------------------------------------- 10) CARDS — box personality per template (data-cards). One archetype gives every .card the same "feel": elevated | outline | soft | gradient | flat | bordered | dark. Placed late so it wins over the per-theme card tweaks above. --------------------------------------------------------------------------- */ [data-cards] .card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .3s ease; } /* elevated — confident lift + soft coloured shadow (the default) */ [data-cards="elevated"] .card { border: 1px solid rgb(15 23 42 / .04); box-shadow: 0 14px 40px -18px rgb(var(--brand-700, 12 88 139) / .35); } [data-cards="elevated"] .card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px -22px rgb(var(--brand-600) / .45); } /* outline — crisp bordered, minimal shadow */ [data-cards="outline"] .card { box-shadow: none; border: 1px solid rgb(var(--tpl-ink, 27 41 102) / .14); } [data-cards="outline"] .card:hover { border-color: rgb(var(--brand-500) / .55); box-shadow: 0 8px 22px -14px rgb(var(--brand-600) / .3); } /* soft — tinted fill, no border, pillowy shadow */ [data-cards="soft"] .card { border: none; box-shadow: 0 18px 46px -22px rgb(var(--tpl-ink, 27 41 102) / .28); } [data-cards="soft"] .card:hover { transform: translateY(-3px); box-shadow: 0 24px 54px -20px rgb(var(--tpl-ink, 27 41 102) / .34); } /* gradient — two-tone gradient border + coloured glow */ [data-cards="gradient"] .card { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgb(var(--brand-500) / .55), rgb(var(--tpl-accent2, 27 41 102) / .55)) border-box; border: 1.5px solid transparent; box-shadow: 0 16px 44px -20px rgb(var(--brand-600) / .4); } [data-cards="gradient"] .card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px -18px rgb(var(--tpl-accent2, 27 41 102) / .5); } /* flat — minimal hairline, no shadow, no lift */ [data-cards="flat"] .card { box-shadow: none; border: 1px solid rgb(15 23 42 / .08); } [data-cards="flat"] .card:hover { background: rgb(var(--brand-500) / .03); border-color: rgb(var(--brand-500) / .25); } /* bordered — stately accent top rule */ [data-cards="bordered"] .card { border: 1px solid rgb(var(--brand-500) / .26); border-top: 3px solid rgb(var(--brand-500)); box-shadow: 0 10px 30px -20px rgb(var(--tpl-ink, 27 41 102) / .4); } [data-cards="bordered"] .card:hover { box-shadow: 0 18px 40px -22px rgb(var(--brand-600) / .4); } /* dark — dark surface + accent hairline (onyx) */ [data-cards="dark"] .card { background: #1c1c26; color: #e7e7ee; border: 1px solid rgb(200 162 74 / .22); box-shadow: 0 18px 44px -20px rgb(0 0 0 / .7); } [data-cards="dark"] .card:hover { transform: translateY(-3px); border-color: rgb(200 162 74 / .4); } [data-cards="dark"] .card p, [data-cards="dark"] .card .text-gray-700, [data-cards="dark"] .card .text-gray-500 { color: #b9b9c6; } /* --------------------------------------------------------------------------- 11) HERO personality (data-hero). The mesh banner stays, but split reads left-aligned & tighter, centered stays classic, spotlight glows & runs taller. --------------------------------------------------------------------------- */ [data-hero="spotlight"] .mesh-hero { min-height: 82vh; } [data-hero="spotlight"] .mesh-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 42%, rgb(var(--tpl-accent2, 27 41 102) / .5), transparent 70%); } [data-hero="split"] .mesh-hero { min-height: 66vh; } /* --------------------------------------------------------------------------- 12) HOME SECTIONS — per-template shape + gradient + ENTRANCE MOTION. Every home section is wrapped in .home-sec[data-section] (home.blade). The wrapper reveals on scroll with a motion that differs BY SECTION and is flavoured BY TEMPLATE; backgrounds + shapes also re-skin per template. --------------------------------------------------------------------------- */ /* -- A. Entrance motion — hidden only once JS is confirmed (html.js), then eased in -- */ html.js .home-sec[data-reveal] { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1), filter .8s ease; will-change: opacity, transform; } html.js .home-sec.is-visible { opacity: 1; transform: none; filter: none; } /* A distinct entrance direction/feel per section */ html.js .home-sec[data-section="trust_bar"][data-reveal] { transform: translateY(24px) scale(.985); } html.js .home-sec[data-section="services_block"][data-reveal] { transform: translateY(58px); } html.js .home-sec[data-section="featured_therapists"][data-reveal] { transform: translateX(-48px); } html.js .home-sec[data-section="resources_slider"][data-reveal] { transform: translateX(48px); } html.js .home-sec[data-section="journal_insights"][data-reveal] { transform: translateY(46px) scale(.99); } html.js .home-sec[data-section="reviews_block"][data-reveal] { transform: scale(.955); } [dir="rtl"] html.js .home-sec[data-section="featured_therapists"][data-reveal] { transform: translateX(48px); } [dir="rtl"] html.js .home-sec[data-section="resources_slider"][data-reveal] { transform: translateX(-48px); } /* Template motion personalities layered on top */ [data-template="aurora"] html.js .home-sec[data-reveal], [data-template="onyx"] html.js .home-sec[data-reveal] { filter: brightness(1.45) saturate(1.15); } [data-template="coral"] html.js .home-sec[data-reveal] { transition-timing-function: ease, cubic-bezier(.34,1.56,.64,1), ease; } [data-template="serene"] html.js .home-sec[data-reveal], [data-template="blossom"] html.js .home-sec[data-reveal], [data-template="sky"] html.js .home-sec[data-reveal], [data-template="noble"] html.js .home-sec[data-reveal] { transition-duration: 1.1s; } /* calm themes swap the side-slide for a gentle rise */ [data-template="serene"] html.js .home-sec[data-section="featured_therapists"][data-reveal], [data-template="blossom"] html.js .home-sec[data-section="featured_therapists"][data-reveal], [data-template="serene"] html.js .home-sec[data-section="resources_slider"][data-reveal], [data-template="blossom"] html.js .home-sec[data-section="resources_slider"][data-reveal] { transform: translateY(34px); } @media (prefers-reduced-motion: reduce) { html.js .home-sec[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } } /* -- B. Background gradients recoloured per template -- */ [data-template]:not([data-template="classic"]) .flow-soft { background-image: linear-gradient(180deg, rgb(var(--brand-50) / .6) 0%, rgb(var(--tpl-surface, 255 255 255)) 88%); } [data-template]:not([data-template="classic"]) .flow-pastel { background-image: linear-gradient(180deg, rgb(var(--tpl-surface, 255 255 255)) 0%, rgb(var(--brand-100) / .55) 55%, rgb(var(--brand-200) / .6) 100%); } /* Dark sections: a themed diagonal gradient instead of a flat ink block */ [data-template]:not([data-template="classic"]) section.bg-navy { background-image: linear-gradient(165deg, rgb(var(--brand-800, 8 62 96)) 0%, rgb(var(--tpl-ink, 27 41 102)) 52%, rgb(var(--brand-900, 6 44 70)) 100%) !important; } [data-template="onyx"] section.bg-navy { background-image: linear-gradient(165deg, #1a1a24 0%, #0d0d12 55%, #050507 100%) !important; } /* -- C. Section shape per template: soft curved tops vs crisp accent rules -- */ [data-template="serene"] .home-sec[data-section="featured_therapists"] > section, [data-template="blossom"] .home-sec[data-section="featured_therapists"] > section, [data-template="serene"] .home-sec[data-section="reviews_block"] > section, [data-template="blossom"] .home-sec[data-section="reviews_block"] > section, [data-template="serene"] .home-sec[data-section="journal_insights"] > section, [data-template="blossom"] .home-sec[data-section="journal_insights"] > section { border-radius: 2.75rem 2.75rem 0 0; } [data-template="meridian"] .home-sec > section.flow-soft, [data-template="noble"] .home-sec > section.flow-soft { border-top: 2px solid rgb(var(--brand-500) / .3); } /* --------------------------------------------------------------------------- 13) ICON DISCS (data-icon) — the service icon container gets a different SHAPE + a themed gradient fill per template: circle | squircle | square | rounded | diamond(hex). Fill uses the theme tokens (ink → accent). --------------------------------------------------------------------------- */ .svc-ico2 { border-radius: 9999px; background: linear-gradient(135deg, rgb(var(--tpl-ink, 27 41 102)), rgb(var(--brand-500, 19 125 197))); } [data-icon="squircle"] .svc-ico2 { border-radius: 34%; } [data-icon="square"] .svc-ico2 { border-radius: 12px; } [data-icon="rounded"] .svc-ico2 { border-radius: 22px; } [data-icon="diamond"] .svc-ico2 { border-radius: 6px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } /* onyx keeps a gold-lit disc */ [data-template="onyx"] .svc-ico2 { background: linear-gradient(135deg, #2a2a38, rgb(var(--brand-500, 200 162 74))); } /* --------------------------------------------------------------------------- 14) SECTION DIVIDERS (data-divider via x-deco.wave) — shape is drawn in the component; here we colour the accent edge to the theme and give each style its own professional MOTION. --------------------------------------------------------------------------- */ .site-divider__edge { stroke: rgb(var(--brand-300, 153 201 246)); stroke-opacity: .6; filter: drop-shadow(0 0 7px rgb(var(--brand-300, 153 201 246) / .6)); } @media (prefers-reduced-motion: no-preference) { /* wave + tilt: a soft breathing glow along the edge */ .site-divider--wave .site-divider__edge, .site-divider--tilt .site-divider__edge { animation: dvd-pulse 4s ease-in-out infinite; } /* curve: slower, gentler breathing */ .site-divider--curve .site-divider__edge { animation: dvd-pulse 5.5s ease-in-out infinite; } @keyframes dvd-pulse { 0%, 100% { stroke-opacity: .32; } 50% { stroke-opacity: .8; } } /* straight: a light beam that travels along the flat rule */ .site-divider--straight .site-divider__edge { stroke-opacity: .9; stroke-dasharray: 200 1240; animation: dvd-beam 4.5s linear infinite; } @keyframes dvd-beam { from { stroke-dashoffset: 1440; } to { stroke-dashoffset: -200; } } /* gradient: a slow luminance breathing on the colour fade */ .site-divider--gradient { animation: dvd-fade 6s ease-in-out infinite; } @keyframes dvd-fade { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } } /* --------------------------------------------------------------------------- 7) PREVIEW BAR — shown when the site is rendered in preview mode. --------------------------------------------------------------------------- */ .tpl-preview-bar { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 9999; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; background: linear-gradient(120deg, rgb(var(--brand-700, 12 88 139)), rgb(var(--tpl-accent2, 27 41 102))); color: #fff; font-size: .875rem; box-shadow: 0 6px 20px -8px rgb(0 0 0 / .4); } .tpl-preview-bar .tpl-preview-name { font-weight: 700; } .tpl-preview-bar .tpl-spacer { flex: 1; } .tpl-preview-bar a, .tpl-preview-bar button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 9999px; font-weight: 600; font-size: .8rem; border: 1px solid rgb(255 255 255 / .4); color: #fff; background: rgb(255 255 255 / .12); transition: background .2s ease, transform .2s ease; cursor: pointer; } .tpl-preview-bar a:hover, .tpl-preview-bar button:hover { background: rgb(255 255 255 / .24); transform: translateY(-1px); } .tpl-preview-bar a.tpl-apply { background: #fff; color: rgb(var(--brand-700, 12 88 139)); border-color: #fff; } body.tpl-previewing { padding-block-start: 3.25rem; } /* ============================================================================= MEDCARE — full faithful layout component styles (colorlib "MedCare"). Emitted by resources/views/templates/medcare/*.blade.php. Class-scoped so they only apply where medcare markup is rendered; tokens gated by the slug. ============================================================================= */ /* The .mc-* building blocks are SHARED by every full-layout medical template. The palette + heading font come from the ACTIVE template's own design tokens (--brand-500 / --tpl-accent2 / --tpl-ink / --tpl-surface / --tpl-font), so the same faithful structure re-skins per template. medcare's tokens resolve to the original hard-coded values, so medcare is unchanged. Per-template overrides (dark heroes, gradients, etc.) live in each theme's own block below. */ [data-template]{ --mc-blue: rgb(var(--brand-500, 19 92 209)); --mc-blue2: rgb(var(--tpl-accent2, 30 79 168)); --mc-ink: rgb(var(--tpl-ink, 20 33 58)); --mc-muted: #6b7793; --mc-line: #e6ebf2; --mc-soft: rgb(var(--tpl-surface, 244 247 251)); } .mc-serif{ font-family: var(--tpl-font, 'Playfair Display'), 'Tajawal', Georgia, serif; color:var(--mc-ink); font-weight:700; line-height:1.15; letter-spacing:-.01em; } .mc-wrap{ max-width:80rem; margin-inline:auto; padding-inline:1rem; } @media(min-width:640px){ .mc-wrap{ padding-inline:1.5rem; } } @media(min-width:1024px){ .mc-wrap{ padding-inline:2rem; } } .mc-btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--mc-blue); color:#fff; font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:2px; transition:background .2s, transform .2s; } .mc-btn:hover{ background:var(--mc-blue2); transform:translateY(-2px); color:#fff; } .mc-btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--mc-line); color:var(--mc-ink); font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:2px; transition:.2s; } .mc-btn-ghost:hover{ border-color:var(--mc-blue); color:var(--mc-blue); } .mc-learn{ display:inline-flex; align-items:center; gap:.4rem; color:var(--mc-ink); font-weight:600; font-size:.9rem; border-bottom:2px solid var(--mc-blue); padding-bottom:2px; transition:color .2s; } .mc-learn:hover{ color:var(--mc-blue); } /* Inner-page banner: serif title + breadcrumb over a soft medical photo (light). Uniform height across ALL pages (content vertically centred) so every banner matches regardless of how long its title/subtitle is. */ .mc-banner{ position:relative; overflow:hidden; background:#eef2f7; display:flex; align-items:center; min-height:20rem; } .mc-banner > .mc-wrap{ width:100%; } @media(max-width:640px){ .mc-banner{ min-height:13rem; } } .mc-banner__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.5; } .mc-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(244,247,251,.96), rgba(244,247,251,.62)); } [dir="rtl"] .mc-banner::after{ background:linear-gradient(270deg, rgba(244,247,251,.96), rgba(244,247,251,.62)); } .mc-banner__inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-block:3.5rem; } .mc-banner__t{ font-size:2.4rem; } @media(min-width:1024px){ .mc-banner__t{ font-size:3rem; } } .mc-banner__d{ color:var(--mc-muted); margin-top:.5rem; } .mc-banner__crumb{ color:var(--mc-muted); font-size:.9rem; } .mc-banner__crumb a{ color:var(--mc-ink); } .mc-banner__crumb a:hover{ color:var(--mc-blue); } /* ---- Hero (light split, serif, photo on the side) ---- */ .mc-hero{ position:relative; background:linear-gradient(90deg,#eef2f7 0%,#f6f8fb 60%,#eaf0f7 100%); overflow:hidden; } .mc-hero__grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:2rem; min-height:70vh; padding-block:3rem; } @media(min-width:1024px){ .mc-hero__grid{ grid-template-columns:1.05fr .95fr; gap:2.5rem; min-height:80vh; padding-block:0; align-items:stretch; } } .mc-hero__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; color:var(--mc-blue); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; } .mc-hero h1{ font-size:2.5rem; margin-bottom:1.3rem; } @media(min-width:1024px){ .mc-hero h1{ font-size:3.6rem; } } .mc-hero__lead{ color:var(--mc-muted); font-size:1.02rem; line-height:1.8; max-width:34rem; margin-bottom:2rem; } .mc-hero__text{ display:flex; flex-direction:column; justify-content:center; padding-block:2.5rem; } .mc-hero__photo{ position:relative; min-height:20rem; } .mc-hero__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; display:block; -webkit-mask-image:linear-gradient(to left, #000 72%, transparent 100%); mask-image:linear-gradient(to left, #000 72%, transparent 100%); } [dir="rtl"] .mc-hero__photo img{ -webkit-mask-image:linear-gradient(to right, #000 72%, transparent 100%); mask-image:linear-gradient(to right, #000 72%, transparent 100%); } @media(max-width:1023px){ .mc-hero__photo{ min-height:16rem; } .mc-hero__photo img{ position:relative; object-position:center; } } /* Hero slideshow: cross-fade between admin-managed slides + dot navigation */ .mc-hero__photo.mc-has-slides img{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; } .mc-hero__photo.mc-has-slides img.is-on{ opacity:1; } .mc-hero__dots{ position:absolute; z-index:3; inset-inline:0; bottom:1.1rem; display:flex; gap:.5rem; justify-content:center; } .mc-hero__dots button{ width:.6rem; height:.6rem; border-radius:50%; background:rgba(255,255,255,.6); border:0; padding:0; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:width .25s, background .25s; } .mc-hero__dots button.is-on{ background:#fff; width:1.5rem; border-radius:.6rem; } /* Spotlight hero (hero:spotlight) — full-bleed photo/slideshow behind a themed gradient with white text; used by medica/drpro/… instead of the split hero. */ .mc-hero-spot{ position:relative; min-height:82vh; display:flex; align-items:center; overflow:hidden; background:var(--mc-ink); } .mc-hero-spot__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .mc-hero-spot.mc-has-slides .mc-hero-spot__bg{ opacity:0; transition:opacity .9s ease; } .mc-hero-spot.mc-has-slides .mc-hero-spot__bg.is-on{ opacity:1; } .mc-hero-spot__tint{ position:absolute; inset:0; background:linear-gradient(120deg, rgb(var(--brand-700, 12 88 139) / .90) 0%, rgb(var(--tpl-accent2, 30 79 168) / .62) 55%, rgb(var(--brand-900, 8 40 88) / .82) 100%); } .mc-hero-spot__inner{ position:relative; max-width:40rem; padding-block:5rem; } .mc-hero-spot .mc-serif{ font-size:2.5rem; } @media(min-width:1024px){ .mc-hero-spot .mc-serif{ font-size:4rem; } } @media(max-width:640px){ .mc-hero-spot{ min-height:66vh; } } /* Centered hero (hero:centered) — centred headline over a soft tint with a wide framed slideshow below; used by dento/medico/hospice/… instead of split. */ .mc-hero-center{ background:linear-gradient(180deg, var(--mc-soft) 0%, #fff 92%); padding:4.5rem 0 0; text-align:center; } .mc-hero-center__head{ max-width:52rem; margin:0 auto 2.6rem; } .mc-hero-center__head .mc-hero__eyebrow{ justify-content:center; } .mc-hero-center__head .mc-serif{ font-size:2.15rem; line-height:1.18; color:var(--mc-ink); margin:.4rem 0 1rem; } @media(min-width:1024px){ .mc-hero-center__head .mc-serif{ font-size:3.4rem; } } .mc-hero-center .mc-hero__lead{ margin-inline:auto; max-width:38rem; } .mc-hero-center__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.7rem; } .mc-hero-center__media{ position:relative; max-width:70rem; margin:0 auto; aspect-ratio:21/9; border-radius:calc(var(--tpl-radius, 10px) + 10px) calc(var(--tpl-radius, 10px) + 10px) 0 0; overflow:hidden; box-shadow:0 -14px 46px rgb(var(--brand-500, 19 92 209) / .18); } .mc-hero-center__media img{ width:100%; height:100%; object-fit:cover; } .mc-hero-center__media.mc-has-slides img{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; } .mc-hero-center__media.mc-has-slides img.is-on{ opacity:1; } @media(max-width:640px){ .mc-hero-center{ padding-top:3rem; } .mc-hero-center__media{ aspect-ratio:16/10; } } /* ---- Feature band (blue) with white cards straddling it ---- */ .mc-featband{ background:var(--mc-blue); } .mc-featwrap{ display:grid; grid-template-columns:1fr; gap:1.5rem; transform:translateY(-3rem); } @media(min-width:768px){ .mc-featwrap{ grid-template-columns:repeat(3,1fr); } } .mc-feat{ background:#fff; padding:2rem 1.75rem; box-shadow:0 24px 50px -28px rgba(20,33,58,.35); border-top:3px solid var(--mc-blue); } .mc-feat__ico{ width:3.5rem; height:3.5rem; border-radius:50%; background:#eef4ff; color:var(--mc-blue); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; } .mc-feat h3{ font-size:1.2rem; margin-bottom:.55rem; } .mc-feat p{ color:var(--mc-muted); font-size:.9rem; line-height:1.7; } /* ---- Split section header (serif title left + paragraph right) ---- */ .mc-shead{ display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:3rem; align-items:end; } @media(min-width:900px){ .mc-shead{ grid-template-columns:minmax(0,26rem) 1fr; gap:3rem; } } .mc-shead__t{ font-size:2rem; } @media(min-width:1024px){ .mc-shead__t{ font-size:2.6rem; } } .mc-shead__d{ color:var(--mc-muted); font-size:.98rem; line-height:1.8; } .mc-shead--center{ text-align:center; display:block; max-width:44rem; margin-inline:auto; } .mc-shead--center .mc-shead__d{ margin-top:.75rem; } /* ---- Section + grid + service/doctor/post/testimonial cards ---- */ .mc-section{ padding-block:5rem; } .mc-grid3{ display:grid; grid-template-columns:1fr; gap:1.75rem; } @media(min-width:640px){ .mc-grid3{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1024px){ .mc-grid3{ grid-template-columns:repeat(3,1fr); } } .mc-svc{ background:#fff; border:1px solid var(--mc-line); padding:2.25rem 1.9rem; transition:box-shadow .3s, transform .3s; display:flex; flex-direction:column; } .mc-svc:hover{ box-shadow:0 26px 55px -30px rgb(var(--brand-500) / .4); transform:translateY(-4px); } .mc-svc__ico{ width:4.4rem; height:4.4rem; border-radius:50%; background:#eef2f7; color:var(--mc-ink); display:flex; align-items:center; justify-content:center; overflow:hidden; } .mc-svc__ico img{ width:100%; height:100%; object-fit:cover; } .mc-svc__rule{ height:1px; background:var(--mc-line); margin:1.4rem 0 1.2rem; } .mc-svc h3{ font-size:1.28rem; margin-bottom:.7rem; } .mc-svc p{ color:var(--mc-muted); font-size:.92rem; line-height:1.75; flex:1; margin-bottom:1.3rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .mc-about{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; } @media(min-width:1024px){ .mc-about{ grid-template-columns:1fr 1fr; gap:4rem; } } .mc-about--rev .mc-about__img{ order:2; } .mc-about__img{ overflow:hidden; } .mc-about__img img{ width:100%; height:100%; max-height:30rem; object-fit:cover; display:block; } .mc-about h2{ font-size:2.1rem; margin-bottom:1rem; } @media(min-width:1024px){ .mc-about h2{ font-size:2.7rem; } } .mc-about__sub{ color:var(--mc-blue); font-weight:700; font-size:1.02rem; margin-bottom:1rem; font-family:'Playfair Display',serif; } .mc-about__p{ color:var(--mc-muted); line-height:1.85; margin-bottom:1.6rem; } .mc-doc{ background:#fff; border:1px solid var(--mc-line); overflow:hidden; transition:box-shadow .3s, transform .3s; display:block; } .mc-doc:hover{ box-shadow:0 26px 55px -30px rgb(var(--brand-500) / .4); transform:translateY(-4px); } .mc-doc__ph{ aspect-ratio:1/1; overflow:hidden; background:#eef2f7; } .mc-doc__ph img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s; } .mc-doc:hover .mc-doc__ph img{ transform:scale(1.05); } .mc-doc__body{ padding:1.4rem 1.5rem; text-align:center; } .mc-doc__name{ font-size:1.2rem; margin-bottom:.15rem; } .mc-doc__role{ color:var(--mc-muted); font-size:.86rem; } .mc-doc__rule{ height:1px; background:var(--mc-line); margin:1.1rem 0; } .mc-doc__meta{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--mc-muted); } .mc-doc__meta .mc-star{ color:#f6ad2b; display:inline-flex; align-items:center; gap:.25rem; } .mc-hotline{ position:relative; text-align:center; color:#fff; padding-block:4.5rem; overflow:hidden; background:linear-gradient(160deg, var(--mc-blue) 0%, var(--mc-blue2) 55%, var(--mc-ink) 100%); } .mc-hotline__num{ font-family:'Playfair Display',serif; font-weight:700; font-size:2.4rem; line-height:1.1; letter-spacing:.01em; } @media(min-width:768px){ .mc-hotline__num{ font-size:3.6rem; } } .mc-hotline__sub{ color:rgba(255,255,255,.85); margin-top:.9rem; max-width:32rem; margin-inline:auto; line-height:1.7; } .mc-testi{ display:grid; grid-template-columns:1fr; gap:1.5rem; } @media(min-width:768px){ .mc-testi{ grid-template-columns:repeat(3,1fr); } } .mc-tcard{ background:#fff; border:1px solid var(--mc-line); padding:2rem 1.8rem; display:flex; flex-direction:column; } .mc-tcard__stars{ color:#f6ad2b; margin-bottom:1rem; display:flex; gap:.15rem; } .mc-tcard__q{ color:#3a4560; line-height:1.8; font-size:.95rem; flex:1; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; } .mc-tcard__who{ display:flex; align-items:center; gap:.75rem; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--mc-line); } .mc-tcard__av{ width:2.6rem; height:2.6rem; border-radius:50%; background:var(--mc-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .mc-tcard__nm{ font-family:'Playfair Display',serif; font-weight:700; color:var(--mc-ink); font-size:.95rem; } .mc-post{ background:#fff; border:1px solid var(--mc-line); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .3s, transform .3s; } .mc-post:hover{ box-shadow:0 26px 55px -30px rgb(var(--brand-500) / .4); transform:translateY(-4px); } .mc-post__ph{ aspect-ratio:16/10; overflow:hidden; background:#eef2f7; } .mc-post__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; } .mc-post:hover .mc-post__ph img{ transform:scale(1.05); } .mc-post__body{ padding:1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; } .mc-post__cat{ color:var(--mc-blue); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; } .mc-post h3{ font-size:1.18rem; margin-bottom:.7rem; } .mc-post p{ color:var(--mc-muted); font-size:.9rem; line-height:1.7; flex:1; margin-bottom:1.1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ---- Contact / filter helpers ---- */ .mc-field{ width:100%; border:1px solid var(--mc-line); background:#fff; padding:.8rem 1rem; border-radius:2px; color:var(--mc-ink); font-size:.95rem; } .mc-field:focus{ outline:none; border-color:var(--mc-blue); } .mc-info{ display:flex; align-items:flex-start; gap:1rem; } .mc-info__ico{ width:3rem; height:3rem; border-radius:50%; background:#eef4ff; color:var(--mc-blue); display:flex; align-items:center; justify-content:center; flex:none; } /* ========================================================================== MEDICA — faithful skin for colorlib "Medica" (data-template="medica"). Cyan→blue diagonal gradient hero, light Montserrat headline on the reading side, hero photo bleeding to the opposite edge, square buttons, 01/02/03 nums. ========================================================================== */ .md-hero{ position:relative; overflow:hidden; min-height:82vh; display:flex; align-items:center; background:linear-gradient(115deg, rgb(var(--tpl-accent2,35 208 232)) 0%, rgb(var(--brand-500,47 110 232)) 55%, rgb(var(--brand-700,25 70 180)) 100%); } .md-hero__wrap{ position:relative; z-index:2; width:100%; } .md-hero__text{ max-width:36rem; padding-block:5rem; color:#fff; } .md-hero__text h1{ font-family:var(--tpl-font,'Montserrat'),'Tajawal',sans-serif; font-weight:300; font-size:clamp(2.3rem,5.2vw,4.1rem); line-height:1.08; letter-spacing:-.01em; margin:0; } .md-hero__text h1 span{ display:block; font-weight:600; } .md-hero__sub{ font-weight:700; font-size:1.05rem; margin:1.1rem 0 2rem; color:rgba(255,255,255,.92); } .md-hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; } .md-hero__media{ position:absolute; inset-block:0; inset-inline-end:0; width:52%; z-index:1; } .md-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center top; } .md-hero.md-has-slides .md-hero__media img{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; } .md-hero.md-has-slides .md-hero__media img.is-on{ opacity:1; } .md-hero__media::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to var(--md-seam, left), rgb(var(--brand-500,47 110 232)) 0%, transparent 34%); } html:not([dir="rtl"]) .md-hero__media::before{ --md-seam:right; } .md-hero__nums{ display:flex; gap:1.1rem; margin-top:2.6rem; } .md-hero__nums button{ color:rgba(255,255,255,.7); font-weight:700; font-size:.9rem; padding:.15rem .35rem; border:0; background:transparent; cursor:pointer; } .md-hero__nums button.is-on{ color:#fff; box-shadow:inset 0 -2px 0 #fff; } @media(max-width:900px){ .md-hero{ min-height:auto; } .md-hero__media{ position:relative; width:100%; height:15rem; } .md-hero__media::before{ display:none; } .md-hero__text{ padding-block:2.5rem; max-width:none; } } /* Square medica buttons */ .md-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; padding:.9rem 1.7rem; border-radius:4px; transition:filter .2s, background .2s, color .2s; } .md-btn--ghost{ border:2px solid rgba(255,255,255,.7); color:#fff; } .md-btn--ghost:hover{ background:#fff; color:rgb(var(--brand-600,30 90 200)); } .md-btn--solid{ background:rgb(var(--brand-700,25 70 180)); color:#fff; } .md-btn--solid:hover{ filter:brightness(1.12); } .md-btn--white{ background:#fff; color:rgb(var(--brand-600,30 90 200)); } .md-btn--white:hover{ filter:brightness(.96); } /* Call-to-action band (appointment) */ .md-cta{ background:linear-gradient(115deg, rgb(var(--brand-500,47 110 232)), rgb(var(--brand-700,25 70 180))); color:#fff; } .md-cta__wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:3rem; } .md-cta__ey{ text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:700; opacity:.85; margin:0; } .md-cta__num{ font-family:var(--tpl-font,'Montserrat'),sans-serif; font-weight:800; font-size:2.3rem; line-height:1.1; margin:.2rem 0; } .md-cta__sub{ opacity:.9; font-size:.95rem; margin:0; } /* Header skin — white bar, cyan→blue topbar, blue links, square CTA */ [data-template="medica"] .site-hdr{ background:#fff; } [data-template="medica"] .site-hdr__promo{ background:linear-gradient(90deg, rgb(var(--tpl-accent2,35 208 232)), rgb(var(--brand-700,25 70 180))); font-size:.76rem; } [data-template="medica"] .site-hdr__link{ font-weight:600; } [data-template="medica"] .site-hdr__cta{ border-radius:4px; } [data-template="medica"] .mc-btn, [data-template="medica"] .mc-btn-ghost{ border-radius:4px; } /* ========================================================================== PARTNER / CLIENT LOGOS MARQUEE (.pm) — animated strip, content from home.trust_bar. Placed at a different position per template; $variant skins it. ========================================================================== */ .pm{ padding:2.6rem 0; background:#fff; overflow:hidden; } .pm__head{ text-align:center; color:var(--mc-muted,#6b7793); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.5rem; } .pm__viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .pm__track{ display:flex; align-items:center; gap:3.6rem; width:max-content; animation:pm-scroll 34s linear infinite; } html[dir="rtl"] .pm__track{ animation-name:pm-scroll-rtl; } .pm:hover .pm__track{ animation-play-state:paused; } @keyframes pm-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes pm-scroll-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } } .pm__logo img{ height:2.4rem; width:auto; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .3s, opacity .3s; } .pm__logo:hover img{ filter:none; opacity:1; } .pm__chip{ display:inline-flex; align-items:center; height:2.7rem; padding:0 1.5rem; border-radius:calc(var(--tpl-radius,8px) + 2px); background:var(--mc-soft,#f4f7fb); color:var(--mc-ink,#14213a); font-weight:800; font-size:1.02rem; letter-spacing:.01em; white-space:nowrap; opacity:.5; } @media (prefers-reduced-motion: reduce){ .pm__track{ animation:none; flex-wrap:wrap; justify-content:center; } } /* ---- Variants (per template) ---- */ .pm--soft{ background:var(--mc-soft,#f4f7fb); } .pm--tint{ background:linear-gradient(90deg, rgb(var(--brand-500,19 92 209)/.06), rgb(var(--tpl-accent2,30 79 168)/.07)); } .pm--bordered{ border-block:1px solid var(--mc-line,#e6ebf2); } .pm--dark{ background:var(--mc-ink,#14213a); } .pm--dark .pm__head{ color:rgba(255,255,255,.55); } .pm--dark .pm__chip{ background:rgba(255,255,255,.08); color:#fff; } .pm--dark .pm__logo img{ filter:grayscale(1) brightness(3); } .pm--band{ background:linear-gradient(115deg, rgb(var(--brand-500,19 92 209)), rgb(var(--brand-700,12 60 140))); } .pm--band .pm__head{ color:rgba(255,255,255,.7); } .pm--band .pm__chip{ background:rgba(255,255,255,.12); color:#fff; } /* ========================================================================== GLOBAL SCROLL-REVEAL (all pages). JS adds html.rvl-on; elements already in view reveal instantly and a safety timeout reveals everything, so no-JS and slow loads always show content. Each template picks its own entrance motion via --rvl-anim (cards) — set in public/css/templates/{slug}.css. ========================================================================== */ html.rvl-on .mc-section, html.rvl-on .mc-banner, html.rvl-on .md-cta, html.rvl-on .dn-stats, html.rvl-on .dc-feats, html.rvl-on .pm{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.16,.8,.3,1), transform .75s cubic-bezier(.16,.8,.3,1); } html.rvl-on .is-in{ opacity:1 !important; transform:none !important; } /* Staggered card entrance once the parent section is revealed */ html.rvl-on .is-in .mc-svc, html.rvl-on .is-in .mc-doc, html.rvl-on .is-in .mc-post, html.rvl-on .is-in .mc-tcard{ animation:var(--rvl-anim, rvl-up) .62s both; } html.rvl-on .is-in .mc-grid3 > *:nth-child(2), html.rvl-on .is-in .mc-testi > *:nth-child(2){ animation-delay:.09s; } html.rvl-on .is-in .mc-grid3 > *:nth-child(3), html.rvl-on .is-in .mc-testi > *:nth-child(3){ animation-delay:.18s; } html.rvl-on .is-in .mc-grid3 > *:nth-child(4){ animation-delay:.27s; } html.rvl-on .is-in .mc-grid3 > *:nth-child(5){ animation-delay:.36s; } html.rvl-on .is-in .mc-grid3 > *:nth-child(6){ animation-delay:.45s; } @keyframes rvl-up{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } @keyframes rvl-zoom{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } } @keyframes rvl-slide{ from{ opacity:0; transform:translateX(var(--rvl-x,-38px)); } to{ opacity:1; transform:none; } } html[dir="rtl"]{ --rvl-x:38px; } @keyframes rvl-flip{ from{ opacity:0; transform:perspective(900px) rotateX(16deg) translateY(22px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ html.rvl-on .mc-section, html.rvl-on .mc-banner, html.rvl-on .md-cta, html.rvl-on .dn-stats, html.rvl-on .dc-feats, html.rvl-on .pm{ opacity:1; transform:none; transition:none; } html.rvl-on .is-in .mc-svc, html.rvl-on .is-in .mc-doc, html.rvl-on .is-in .mc-post, html.rvl-on .is-in .mc-tcard{ animation:none; } } /* ========================================================================== CHATBOT / customer-service widget follows the ACTIVE TEMPLATE colour. The widget uses fixed Tailwind brand utilities; re-point them at the theme's --brand-* vars so the floating button + panel match every template. ========================================================================== */ .site-chat .bg-brand-gradient{ background-image:linear-gradient(135deg, rgb(var(--brand-400,90 150 240)), rgb(var(--brand-600,15 107 169))) !important; } .site-chat .bg-brand{ background-color:rgb(var(--brand-500,19 92 209)) !important; } .site-chat .bg-brand-600{ background-color:rgb(var(--brand-600,15 107 169)) !important; } .site-chat .hover\:bg-brand-600:hover{ background-color:rgb(var(--brand-600,15 107 169)) !important; } .site-chat .bg-navy{ background-color:rgb(var(--tpl-ink,20 33 58)) !important; } .site-chat .focus\:border-brand:focus{ border-color:rgb(var(--brand-500,19 92 209)) !important; } .site-chat .focus\:ring-brand:focus{ --tw-ring-color:rgb(var(--brand-500,19 92 209)) !important; } /* ========================================================================== THEMED INNER-PAGE ICON BADGES + CARDS. The shared `.icon-badge-leaf` (about values, "why us" checklist, services, courses, resources, providers) and `.card` were fixed navy→blue for every theme. Re-point them at the ACTIVE theme: badge colour = the theme's brand, badge SHAPE = the theme's `data-icon` archetype, card radius = the theme radius — so no two themes share the same inner-page icon/card look. ========================================================================== */ [data-template] .icon-badge-leaf{ background-image:linear-gradient(135deg, rgb(var(--brand-700, 27 41 102)), rgb(var(--brand-500, 19 125 197))) !important; box-shadow:0 10px 22px -8px rgb(var(--brand-500, 19 125 197) / .5) !important; color:#fff !important; } [data-icon="circle"] .icon-badge-leaf{ border-radius:50% !important; } [data-icon="squircle"] .icon-badge-leaf{ border-radius:34% !important; } [data-icon="rounded"] .icon-badge-leaf{ border-radius:16px !important; } [data-icon="square"] .icon-badge-leaf{ border-radius:6px !important; } [data-icon="diamond"] .icon-badge-leaf{ border-radius:10px !important; transform:rotate(45deg); } [data-icon="diamond"] .icon-badge-leaf > svg{ transform:rotate(-45deg); } /* Shared inner-page cards follow the theme's corner radius (public site only). */ [data-template] .card{ border-radius:calc(var(--tpl-radius, 12px) + 4px) !important; }