@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); /* ============================================================ My Derma Clinic — supplementary utilities for inner pages (classes the purged Tailwind build did not include) ============================================================ */ /* --- fonts: Manrope for headings + header menus, Inter for body --- Both render Greek correctly. :where() has 0 specificity so icon-font rules (fontawesome/feather/flaticon) always win and keep their glyphs. */ :root{--font-base:"Inter","sans-serif";--font-title:"Manrope","sans-serif";} body{font-family:"Inter","sans-serif";} /* content -> Inter */ :where(p,a,span,li,button,input,textarea,select,label,small,em,blockquote,div,td,th,figcaption){ font-family:"Inter","sans-serif"; } /* headings + emphasis -> Manrope */ :where(h1,h2,h3,h4,h5,h6),:where(b,strong), :where(.title,.sub-title,.dz-title,.sub-head,.section-head){ font-family:"Manrope","sans-serif"; } /* header menu items -> Manrope; top level bold */ .navbar-nav a{font-family:"Manrope","sans-serif" !important;} .navbar-nav > li > a{font-weight:700 !important;} /* 6 long Greek top-level labels: size + even spacing so they fit one row with clear gaps */ @media (min-width:1280px){ .navbar-nav > li > a{font-size:15px !important;padding-left:.6rem !important;padding-right:.6rem !important;} } @media (min-width:1024px) and (max-width:1279px){ .navbar-nav > li > a{font-size:13px !important;padding-left:.55rem !important;padding-right:.55rem !important;} } /* --- submenu dropdown: widen, stop Greek wrapping, add polish --- */ .sub-menu{ width:auto !important; min-width:245px; padding:.5rem 0 !important; box-shadow:0 22px 48px rgba(0,0,0,.13); border-radius:0 0 10px 10px; border-top:3px solid var(--primary,#2e6161); } .sub-menu li a{ white-space:nowrap; padding:.6rem 1.5rem !important; font-size:.95rem !important; font-weight:600 !important; } .sub-menu li a:hover{background:rgba(0,0,0,.04);} /* --- mega-menu: multi-column dropdown panels for large lists --- */ @media (min-width:1024px){ .navbar-nav .sub-menu.mdc-mega{ width:max-content !important; max-width:min(92vw,900px); padding:1.25rem 1.25rem !important; display:grid; grid-template-columns:repeat(var(--mcols,3),minmax(180px,1fr)); gap:.1rem 1.25rem; } .navbar-nav .sub-menu.mdc-r{ left:auto !important; right:0 !important; } } .sub-menu.mdc-mega li a{ white-space:normal !important; line-height:1.3; padding:.5rem .85rem !important; } /* keep long single-column submenus tidy */ .navbar-nav .sub-menu:not(.mdc-mega) li a{white-space:normal !important;} /* --- grid & flexbox layout --- */ .grid{display:grid} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-3\.75{gap:.9375rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem} .gap-10{gap:2.5rem} .gap-x-6{column-gap:1.5rem} .items-center{align-items:center} .items-stretch{align-items:stretch} .justify-center{justify-content:center} .space-y-5>*+*{margin-top:1.25rem} .justify-between{justify-content:space-between} .items-end{align-items:flex-end} @media (min-width:768px){.md\:w-8\/12{width:66.6667%}.md\:w-4\/12{width:33.3333%}} @media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1024px){ .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} } /* --- spacing --- */ .mt-2{margin-top:.5rem} .mt-2\.5{margin-top:.625rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-3\.75{margin-bottom:.9375rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .mb-16{margin-bottom:4rem} .p-6{padding:1.5rem} .p-8{padding:2rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .py-1{padding-top:.25rem;padding-bottom:.25rem} .py-3{padding-top:.75rem;padding-bottom:.75rem} .py-4{padding-top:1rem;padding-bottom:1rem} .scroll-mt-24{scroll-margin-top:6rem} /* --- sizing --- */ .h-56{height:14rem} .h-64{height:16rem} .h-full{height:100%} .min-h-\[380px\]{min-height:380px} .size-14{width:3.5rem;height:3.5rem} .w-75{width:18.75rem} .h-75{height:18.75rem} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .mx-auto{margin-left:auto;margin-right:auto} /* --- continuous image marquee (gallery strip) --- two identical copies + translateX(-50%) = seamless loop. spacing lives on each item (margin) not flex-gap, so -50% stays exact. */ @keyframes mdcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mdc-marquee{display:flex;flex-wrap:nowrap;width:max-content;animation:mdcMarquee 50s linear infinite;will-change:transform} .mdc-marquee:hover{animation-play-state:paused} /* fixed height + auto width: every photo keeps its own aspect, so the portrait shots sit narrow beside the landscape ones instead of being cover-cropped. the is the flex item (it opens the lightbox); the just sizes itself. */ .mdc-marquee > a{flex:0 0 auto;display:block;margin-right:1.25rem;border-radius:1rem;overflow:hidden;cursor:zoom-in;position:relative} .mdc-marquee > a::after{content:"";position:absolute;inset:0;background:rgba(var(--primary-rgb),0);transition:background .3s ease} .mdc-marquee > a:hover::after{background:rgba(var(--primary-rgb),.18)} .mdc-marquee .mdc-mimg{width:auto;height:14rem;display:block;border-radius:1rem} @media (max-width:640px){.mdc-marquee > a{margin-right:.75rem}.mdc-marquee .mdc-mimg{height:10rem}} /* doctor: keep the copy off the portrait's edge */ @media (min-width:992px){.mdc-doc-copy{padding-left:2.5rem}} @media (min-width:1280px){.mdc-doc-copy{padding-left:4rem}} /* --- typography --- */ .leading-relaxed{line-height:1.7} .leading-snug{line-height:1.35} .tracking-\[2px\]{letter-spacing:2px} /* --- effects --- */ .blur-\[110px\]{filter:blur(110px)} .opacity-10{opacity:.1} .overflow-hidden{overflow:hidden} .duration-500{transition-duration:.5s} .shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.06\)\]{box-shadow:0 10px 40px rgba(0,0,0,.06)} .hover\:scale-105:hover{transform:scale(1.05)} .group:hover .group-hover\:scale-105{transform:scale(1.05)} img{transition:transform .5s ease} /* --- article hero image: fixed height so any source ratio looks good --- */ .article-hero{width:100%;height:460px;object-fit:cover;object-position:center} @media (max-width:768px){.article-hero{height:280px}} /* --- article body readability --- */ .article-body p{margin-bottom:1rem;line-height:1.85} .article-body h3{margin-top:1.75rem;margin-bottom:.5rem} /* --- CTA outline (phone) button hover --- */ .mdc-cta-ghost{transition:background-color .25s ease,color .25s ease,border-color .25s ease} .mdc-cta-ghost:hover{background:#fff !important;color:#07121E !important;border-color:#fff !important} /* --- CTA primary button (left button in the teal CTA band) --- the band is var(--primary) teal, so a solid teal button would vanish into it. Light bg + dark text by default; flips to solid teal + white on hover. */ .mdc-cta-primary{ background-color:#fff;color:var(--secondary,#07121e);border:1px solid #fff; transition:background-color .25s ease,color .25s ease,border-color .25s ease; } .mdc-cta-primary:hover{ background-color:var(--light,#e7f5f1) !important; color:var(--primary,#2e6161) !important; border-color:var(--light,#e7f5f1) !important; } /* --- footer: now sits on the teal primary background (bg-primary) --- the inline --color-bodycolor:#BED2E7 (light blue) was tuned for the old dark navy; on teal it reads as stray blue, so force body copy to white. Link hover + animated underline were also heading to the same teal as the background and would vanish, so they go white too. The inner "contact" card (.mdc-contact-card) is styled separately below as a white card for separation. */ footer{--color-bodycolor:#fff !important;} footer a{transition:color .25s ease;} footer .list-hover1 a:hover, footer .list-hover1 li:hover > a, footer a:hover{color:#fff !important;} footer .link-hover::after{background-color:#fff !important;} footer .footer-bottom .copyright-text a{color:#fff;} footer .footer-bottom .copyright-text a:hover{opacity:.8;} /* --- footer contact card ("Είμαστε εδώ για κάθε ερώτησή σας") --- the card used to be bg-primarydark, which barely separated from the teal footer. Now white so it pops, with the teal icon circles kept (they read well on white) and all the white labels/text recoloured to near-black. */ footer .mdc-contact-card{ background-color:#fff !important; } footer .mdc-contact-card h3, footer .mdc-contact-card h5{color:var(--secondary,#07121e) !important;} footer .mdc-contact-card p, footer .mdc-contact-card a{color:var(--secondary,#07121e) !important;} footer .mdc-contact-card .text-body{color:var(--primary,#2e6161) !important;} /* icon circles stay teal so they keep their identity on the white card */ footer .mdc-contact-card .bg-primary{background-color:var(--primary,#2e6161) !important;} /* --- scroll-to-top: teal normally, flips to light teal over the teal footer --- button is bg-primary + white icon by default; when .over-footer is set (added by animation.js when it overlaps