/* ============================================================================ * AEGEAN SMILE — Design System & Stylesheet * Dental clinic website · Rhodes, Greece * ---------------------------------------------------------------------------- * Author / maintainer : Vasileios Taralis * Company : ELMWAY HOSPITALITY CONSULTING ΜΟΝΟΠΡΟΣΩΠΗ Ι.Κ.Ε. * (Elmway Hospitality Consulting) · ΑΦΜ 802836636 * ---------------------------------------------------------------------------- * CONVENTIONS * • Mobile-first. Base styles target phones; min-width media queries * enhance for larger screens. Breakpoints: 768px (tablet), 1025px * (desktop), plus max-width 767/1024 for the mobile/tablet range and a * few component one-offs (480/600/640/900). * • Single stylesheet, no preprocessor/build. Organised into the numbered * sections in the table of contents below — search e.g. "6. NAVIGATION". * • All colours, type sizes, spacing, radii and shadows are DESIGN TOKENS * declared as CSS custom properties in :root (section 1) — prefer the * tokens (var(--…)) over hard-coded values when editing. * • Naming is light-BEM: .block, .block__element, .block--modifier. * • Hover effects are reset under @media (hover: none) so they don't * "stick" on touch (section 33). * * DESIGN TOKENS (see :root, section 1) * Colour --clr-dark/white/accent/accent-hover/light/grey/error/border, * --clr-overlay, --clr-overlay-hero * Type --ff-heading / --ff-body (Didact Gothic); * --fs-xs … --fs-3xl, --fs-hero (responsive via clamp()) * Spacing --sp-xs(0.5rem) … --sp-2xl(10rem) (8px-based scale) * Radius --radius-sm/md/lg/full Shadow --shadow-sm/md/lg * Layout --container-max(1200px), --nav-height(72px) * color-scheme: light (consistent light form controls; no dark theme) * * TABLE OF CONTENTS * 1. CSS custom properties (tokens) 17. Service-page detail * 2. Reset 18. Contact page * 3. Typography 19. Forms * 4. Layout (container/grid/section) 20. Footer * 5. Buttons 21. Blog index * 6. Navigation (+ dropdowns) 22. Virtual consultation * 7. Hero — video background 23. Reveal animations * 8. Intro section 24. Utility (sr-only, skip link) * 9. Service cards 25. Responsive — tablet (≥768) * 10. About teaser 26. Responsive — desktop (≥1025) * 11. Team 27. Nav on non-hero pages * 14. Reviews / testimonials 28a. Image placeholders * 15. CTA bar 29. Print * 16. Patients abroad 30. Mobile global polish * 31. Cookie consent banner * 32. Sticky mobile Call bar * 33. Mobile / touch hardening * ========================================================================== */ /* --- Google Fonts: loaded via in each page (non-blocking), not @import here, to avoid a render-blocking request chain. --- */ /* ============================================================ 1. CSS CUSTOM PROPERTIES ============================================================ */ /* --------------------------------------------------------------- Didact Gothic — SELF-HOSTED (was render-blocking Google Fonts). Per-subset woff2; unicode-range lets the browser fetch only what a page actually needs (Greek pages -> greek, English -> latin). --------------------------------------------------------------- */ @font-face{ font-family:'Didact Gothic'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/didact-gothic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Didact Gothic'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/didact-gothic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Didact Gothic'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/didact-gothic-greek.woff2') format('woff2'); unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face{ font-family:'Didact Gothic'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/didact-gothic-greek-ext.woff2') format('woff2'); unicode-range:U+1F00-1FFF; } :root { /* Render light UI (form controls, scrollbars) consistently — no dark theme */ color-scheme: light; /* Colours */ --clr-dark: #1a1a1a; --clr-white: #ffffff; --clr-accent: #000000; --clr-accent-hover:#333333; --clr-light: #f5f5f5; --clr-grey: #5f5f5f; --clr-error: #c0392b; --clr-border: #e0e0e0; --clr-overlay: rgba(0, 0, 0, 0.5); --clr-overlay-hero:rgba(0, 0, 0, 0.20); /* Typography */ --ff-heading: 'Didact Gothic', sans-serif; --ff-body: 'Didact Gothic', sans-serif; /* Font sizes — mobile-first */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.35rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-hero: clamp(2rem, 6vw, 4.5rem); /* Spacing */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 4rem; --sp-xl: 6rem; --sp-2xl: 10rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.28); --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.36); /* Layout */ --container-max: 1200px; --nav-height: 72px; } /* ============================================================ 2. RESET ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Offset anchor scrolling for the fixed nav, plus a little breathing room, so a linked section's heading isn't hidden behind the header. Honored by both native #anchor jumps and JS scrollIntoView. */ scroll-padding-top: calc(var(--nav-height) + 1rem); -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.7; color: var(--clr-dark); background: var(--clr-white); overflow-x: hidden; overflow-wrap: break-word; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-heading); font-weight: 600; line-height: 1.25; color: var(--clr-dark); } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin-bottom: var(--sp-sm); } p:last-child { margin-bottom: 0; } .text-accent { color: var(--clr-accent); } .text-grey { color: var(--clr-grey); } .text-center { text-align: center; } .text-upper { text-transform: uppercase; letter-spacing: 0.12em; } /* ============================================================ 4. LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-sm); } .section { padding: var(--sp-lg) 0; } .section--light { background: var(--clr-light); } .section--dark { background: var(--clr-dark); color: var(--clr-white); } /* === Accent colour inversion on dark backgrounds === */ .section--dark, .cta-bar, #cookie-banner { --clr-accent: #ffffff; --clr-accent-hover: #cccccc; } .section--dark .btn-primary, .cta-bar .btn-primary, .section--dark .btn-primary:hover, .cta-bar .btn-primary:hover { color: var(--clr-dark); } .section--dark .btn-outline:hover, .cta-bar .btn-outline:hover { color: var(--clr-dark); } .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--clr-white); } .section-header { text-align: center; margin-bottom: var(--sp-md); } .section-header h2 { margin-bottom: var(--sp-xs); } .section-header p { color: var(--clr-grey); max-width: 640px; margin: 0 auto; } /* Grid */ .grid { display: grid; gap: var(--sp-md); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } /* Two-column layout */ .split { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); align-items: center; } /* ============================================================ 5. BUTTONS ============================================================ */ .btn { display: inline-block; padding: 0.85em 2em; font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--radius-sm); transition: all 0.3s ease; text-align: center; cursor: pointer; } .btn-primary { background: var(--clr-accent); color: var(--clr-white); } .btn-primary:hover { background: var(--clr-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--clr-accent); border: 2px solid var(--clr-accent); } .btn-outline:hover { background: var(--clr-accent); color: var(--clr-white); transform: translateY(-2px); } .btn-white { background: var(--clr-white); color: var(--clr-dark); } .btn-white:hover { background: var(--clr-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-dark { background: var(--clr-dark); color: var(--clr-white); border: none; } .btn-dark:hover { opacity: 0.85; transform: translateY(-2px); } /* ============================================================ 6. NAVIGATION ============================================================ */ #main-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; transition: background 0.35s ease, box-shadow 0.35s ease; } #main-nav.scrolled { background: #000; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } #main-nav.scrolled .logo img { filter: brightness(0) invert(1); } #main-nav.scrolled .nav-links a, #main-nav.scrolled .lang-toggle { color: #fff; } #main-nav.scrolled .nav-hamburger span { background: #fff; } #main-nav.scrolled .lang-toggle { border-color: #fff; } #main-nav.scrolled .lang-toggle:hover { background: #fff; color: #000; } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-sm); height: var(--nav-height); } /* Logo — matches the rendered height of the nav action buttons (~32px) */ .logo img { height: 32px; width: auto; transition: filter 0.3s ease; } /* On transparent nav (hero pages), logo should be visible on dark bg */ #main-nav:not(.scrolled) .logo img { filter: brightness(0) invert(1); } /* Nav links - hidden on mobile */ .nav-links { display: none; gap: var(--sp-md); align-items: center; } .nav-links a { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-dark); padding: var(--sp-xs) 0; position: relative; transition: color 0.3s ease, opacity 0.25s ease, letter-spacing 0.3s ease; } .nav-links:hover a:hover, .nav-links a.active { letter-spacing: 0.13em; } #main-nav:not(.scrolled) .nav-links a { color: var(--clr-white); } /* Dropdown */ .has-dropdown { position: relative; } /* First-level dropdown */ .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--clr-white); min-width: 240px; padding: var(--sp-xs) 0; border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown a { display: block; padding: 0.6em 1.5em; font-size: var(--fs-sm); color: var(--clr-dark) !important; text-transform: none; letter-spacing: 0; white-space: nowrap; } .dropdown a:hover { background: var(--clr-light); color: var(--clr-accent) !important; } .dropdown a::after { display: none; } /* Nav actions */ .nav-actions { display: flex; align-items: center; gap: var(--sp-sm); } .lang-toggle { font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 600; padding: 0.35em 0.75em; border: 2px solid var(--clr-accent); border-radius: var(--radius-sm); color: var(--clr-accent); transition: all 0.3s ease; cursor: pointer; } .lang-toggle:hover { background: var(--clr-accent); color: var(--clr-white); } #main-nav:not(.scrolled) .lang-toggle { border-color: var(--clr-white); color: var(--clr-white); } #main-nav:not(.scrolled) .lang-toggle:hover { background: var(--clr-white); color: var(--clr-dark); } .nav-actions .btn-primary { display: none; font-size: var(--fs-xs); padding: 0.7em 1.5em; background: transparent; border: 1px solid #fff; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s, color 0.25s; } .nav-actions .btn-primary:hover { background: #fff; color: #000; } #main-nav.scrolled .nav-actions .btn-primary { border-color: #fff; color: #fff; } #main-nav.scrolled .nav-actions .btn-primary:hover { background: #fff; color: #000; } /* Hamburger */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 8px; cursor: pointer; z-index: 1001; background: rgba(0, 0, 0, 0.4); border-radius: var(--radius-sm); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #main-nav.scrolled .nav-hamburger { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--clr-white); margin: 3px 0; transition: all 0.3s ease; } #main-nav:not(.scrolled) .nav-hamburger span { background: var(--clr-white); } body:not(.page-has-hero) .nav-hamburger { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; height: 100dvh; background: var(--clr-white); z-index: 999; transition: right 0.4s ease; display: flex; flex-direction: column; justify-content: flex-start; /* never centre-with-no-scroll — overflowed items would overlap */ align-items: center; overflow-y: auto; /* always scrollable, at any width (not only ≤1024) */ padding: calc(var(--nav-height) + var(--sp-md)) var(--sp-md) var(--sp-lg); } /* Menu items must keep their natural height — without this they shrink to fit the fixed 100dvh column when both dropdowns are open, compressing/overlapping each other. flex-shrink:0 makes the content overflow → the menu scrolls instead. */ .mobile-menu > * { flex-shrink: 0; } .mobile-menu.open { right: 0; } .mobile-menu a { display: block; font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: 500; padding: 0.6em 0; color: var(--clr-dark); text-align: center; transition: color 0.3s ease; } .mobile-menu .btn-primary { background: var(--clr-dark); color: #fff; font-size: var(--fs-xs); padding: 0.85em 2em; align-self: center; } .mobile-menu a:hover { color: var(--clr-accent); } .mobile-menu .mobile-dropdown-title { cursor: pointer; } .mobile-dropdown-items { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mobile-dropdown-items.open { max-height: 600px; } .mobile-dropdown-items a { font-size: var(--fs-base); color: var(--clr-grey); padding: 0.4em 0; } /* Mobile menu polish — applies across the whole hamburger range (≤1024px), not just phones, so the tablet range scrolls and clears the nav bar. Also hide the cookie banner while the menu is open (it sits at z-index 9999 and would otherwise cover the lower menu items / book button). */ @media (max-width: 1024px) { .mobile-menu { overflow-y: auto; padding-top: calc(var(--nav-height) + var(--sp-md)); padding-bottom: var(--sp-lg); justify-content: flex-start; gap: var(--sp-xs); } .mobile-menu a { min-height: 48px; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.5em var(--sp-md); } .mobile-menu .btn-primary { margin-top: var(--sp-md); width: 80%; max-width: 320px; } body.menu-open #cookie-banner { display: none; } } /* ============================================================ 7. HERO — VIDEO BACKGROUND ============================================================ */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-video-wrap { position: absolute; inset: 0; z-index: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: var(--clr-overlay-hero); } .hero-content { position: relative; z-index: 1; text-align: center; color: var(--clr-white); padding: var(--sp-md); max-width: 800px; } .hero-brand-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-white); margin: 0 0 0.4rem; } .hero-content h1 { font-size: var(--fs-hero); color: var(--clr-white); margin-bottom: var(--sp-xs); } .hero-content p { font-size: var(--fs-md); margin-bottom: var(--sp-md); opacity: 0.9; } .hero-content .btn { margin-top: var(--sp-xs); } /* Brand hero (logo + dual buttons over video) */ .hero-content--brand { display: flex; flex-direction: column; align-items: center; gap: 0; } .hero-eyebrow { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 300; letter-spacing: 0.02em; line-height: 1; margin-bottom: 6px; opacity: 0.95; } .hero-logo { width: clamp(154px, 25vw, 322px); height: auto; display: block; filter: brightness(0) invert(1); } .hero-tagline-text { color: #fff; font-size: clamp(0.85rem, 1.15vw, 1.05rem); letter-spacing: 0.22em; text-transform: none; font-weight: 300; margin-top: 0.4rem; opacity: 0.95; } .hero-title, .hero-tagline, .hero-brand-title, .hero-tagline-text { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35); } .hero-content--brand .hero-actions { margin-top: 2.5rem; } .hero-actions { display: flex; justify-content: center; } .hero-btn { display: inline-block; padding: 0.8rem 2.2rem; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; font-weight: 400; border-radius: var(--radius-sm); transition: background 0.3s, color 0.3s, border-color 0.3s; } .hero-btn--phone { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); } .hero-btn--phone:hover { background: #fff; color: #000; border-color: #fff; } /* Hero with static image (for service pages) */ .page-hero { position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; } .page-hero::before { content: ''; position: absolute; inset: 0; background: var(--clr-overlay-hero); } .page-hero .hero-content { position: relative; z-index: 1; } /* ============================================================ 8. INTRO SECTION ============================================================ */ .intro { text-align: center; } .intro p { max-width: 780px; margin: 0 auto var(--sp-sm); font-size: var(--fs-md); line-height: 1.8; color: var(--clr-grey); } /* ============================================================ 9. SERVICE CARDS ============================================================ */ .service-card { background: var(--clr-white); border-radius: var(--radius-md); padding: var(--sp-md); text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .service-card-icon { width: 64px; height: 64px; margin: 0 auto var(--sp-sm); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--clr-accent); } .service-card h3 { margin-bottom: var(--sp-xs); font-size: var(--fs-md); } .service-card p { font-size: var(--fs-sm); color: var(--clr-grey); line-height: 1.6; } .service-card .btn { margin-top: var(--sp-sm); font-size: var(--fs-xs); padding: 0.6em 1.5em; } /* ============================================================ 10. ABOUT TEASER (2-col) ============================================================ */ .about-teaser-img { border-radius: var(--radius-md); overflow: hidden; } .about-teaser-img img { width: 100%; height: 100%; object-fit: cover; } .about-teaser-text h2 { margin-bottom: var(--sp-sm); } .about-teaser-text p { color: var(--clr-grey); margin-bottom: var(--sp-sm); } /* ============================================================ 11. TEAM Kept for meet-the-team.html — no longer used on about.html ============================================================ */ .team-card { text-align: center; } .team-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-md); align-items: start; } @media (max-width: 1024px) { .team-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .team-row { grid-template-columns: repeat(2, 1fr); } } .team-row .team-card .team-role { color: var(--clr-grey); margin-bottom: 0; } .team-row .team-card h3 { margin-top: var(--sp-sm); font-weight: 600; } .team-card-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius-md); margin-bottom: var(--sp-sm); } .team-card h3 { font-size: var(--fs-md); margin-bottom: 0.25rem; } .team-card .team-role { font-size: var(--fs-sm); color: var(--clr-accent); margin-bottom: var(--sp-xs); } .team-card p { font-size: var(--fs-sm); color: var(--clr-grey); line-height: 1.6; } /* ============================================================ 14. REVIEWS ============================================================ */ .review-card { background: var(--clr-white); border-radius: var(--radius-md); padding: var(--sp-md); box-shadow: var(--shadow-sm); border-left: 4px solid var(--clr-accent); } .review-card blockquote { font-size: var(--fs-sm); color: var(--clr-grey); line-height: 1.7; margin-bottom: var(--sp-sm); font-style: italic; } .review-card cite { font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--clr-dark); } /* ============================================================ 15. CTA BAR ============================================================ */ .cta-bar { background: var(--clr-dark); color: var(--clr-white); text-align: center; padding: var(--sp-lg) var(--sp-sm); } .cta-bar h2 { color: var(--clr-white); margin-bottom: var(--sp-sm); } /* ============================================================ 16. PATIENTS ABROAD ============================================================ */ .patients-abroad { text-align: center; } .patients-abroad h2 { margin-bottom: var(--sp-xs); } .patients-abroad p { max-width: 700px; margin: 0 auto var(--sp-sm); color: var(--clr-grey); } /* ============================================================ 17. SERVICE PAGE DETAIL ============================================================ */ .service-intro { max-width: 800px; margin: 0 auto; } .service-intro h2 { margin-bottom: var(--sp-sm); } .service-intro p { color: var(--clr-grey); line-height: 1.8; } .service-list { max-width: 800px; margin: 0 auto; } .service-list h2 { margin-bottom: var(--sp-sm); } .service-list ul { list-style: none; } .service-list li { padding: 0.75em 0; border-bottom: 1px solid var(--clr-border); font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-xs); } .service-list li::before { content: '✓'; color: var(--clr-accent); font-weight: 700; flex-shrink: 0; } .service-images { max-width: 1000px; margin: 0 auto; } .service-images img { width: 100%; border-radius: var(--radius-md); object-fit: cover; } .service-cta { text-align: center; max-width: 700px; margin: 0 auto; } .service-cta h2 { margin-bottom: var(--sp-xs); } .service-cta p { color: var(--clr-grey); margin-bottom: var(--sp-md); } /* ============================================================ 18. CONTACT PAGE ============================================================ */ .contact-info { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); } .contact-block h3 { font-size: var(--fs-md); margin-bottom: var(--sp-xs); color: var(--clr-accent); } .contact-block p { color: var(--clr-grey); font-size: var(--fs-sm); line-height: 1.8; } .contact-block a { color: var(--clr-accent); transition: color 0.3s ease; } .contact-block a:hover { color: var(--clr-accent-hover); } /* Map embed */ .map-wrap { width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .map-wrap iframe { width: 100%; height: 350px; border: 0; } /* ============================================================ 19. FORMS ============================================================ */ .form-group { margin-bottom: var(--sp-sm); } .form-group label { display: block; font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: 500; margin-bottom: 0.35em; color: var(--clr-dark); } .form-group .form-hint { font-size: var(--fs-xs); color: var(--clr-grey); margin-top: 0.25em; } .form-control { width: 100%; padding: 0.85em 1em; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: var(--fs-base); background: var(--clr-white); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-control:focus { outline: none; border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); } textarea.form-control { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-sm); } .form-success { display: none; text-align: center; padding: var(--sp-md); } .form-success.show { display: block; } .form-success h3 { color: var(--clr-accent); margin-bottom: var(--sp-xs); } /* Required-field marking — asterisk after labels of groups containing a required control. Pseudo-element survives the JS i18n innerHTML rewrite. */ .form-group:has(:required) > label::after { content: ' *'; color: var(--clr-error); } .form-required-note { font-size: var(--fs-sm); color: var(--clr-grey); margin-bottom: var(--sp-sm); } /* Accessible submit-error message (role="alert") */ .form-error-msg { background: rgba(192, 57, 43, 0.08); border: 1px solid var(--clr-error); border-radius: var(--radius-sm); color: var(--clr-error); padding: 0.75em 1em; font-size: var(--fs-sm); margin-bottom: var(--sp-sm); } .form-error-msg[hidden] { display: none; } /* ============================================================ 20. FOOTER ============================================================ */ footer { background: #fff; color: #555; padding: 4rem 0 1.5rem; border-top: 1px solid #ececec; } .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1.2fr; gap: 3rem; max-width: 1500px; margin: 0 auto; padding: 0 2rem; } @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; } } /* Phone footer layout (2-col structured block) lives in the ≤767px section below. */ .footer-col h3 { color: #222; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; margin: 0 0 1.5rem; } footer a { color: #555; text-decoration: none; transition: color 0.25s; } footer a:hover { color: #000; } .footer-brand img { height: 60px; width: auto; margin-bottom: 1.25rem; filter: brightness(0); } .footer-tagline-text { font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.5rem; color: #666; max-width: 280px; } .footer-social-group { display: flex; flex-direction: column; gap: 0.5rem; } .footer-social-label { font-size: 0.95rem; font-weight: 600; color: #222; } .footer-social-icons { display: flex; gap: 0.6rem; } .footer-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #c7c7c7; color: #555; transition: border-color 0.25s, color 0.25s; } .footer-social-icons a:hover { border-color: #000; color: #000; } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links ul li { margin-bottom: 0.85rem; } .footer-links ul a { font-size: 0.95rem; } .footer-row { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0 0 1rem; font-size: 0.93rem; line-height: 1.5; color: #555; } .footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c7c7c7; color: #555; flex-shrink: 0; margin-top: 1px; } .footer-bottom { border-top: 1px solid #ececec; margin-top: 3rem; padding: 1.25rem 2rem 0; text-align: center; font-size: 0.82rem; color: #5f5f5f; max-width: 1500px; margin-left: auto; margin-right: auto; } /* ============================================================ 21. BLOG INDEX ============================================================ */ .blog-card { background: var(--clr-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .blog-card-body { padding: var(--sp-sm); } .blog-card-body h3 { font-size: var(--fs-md); margin-bottom: var(--sp-xs); } .blog-card-body p { font-size: var(--fs-sm); color: var(--clr-grey); } /* ============================================================ 22. VIRTUAL CONSULTATION ============================================================ */ .consult-steps { counter-reset: step; } .consult-step { padding: var(--sp-md); background: var(--clr-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); position: relative; } .consult-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--clr-accent); color: var(--clr-white); font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: 700; border-radius: var(--radius-full); margin-bottom: var(--sp-sm); } .consult-step h3 { margin-bottom: var(--sp-xs); } .consult-step p { font-size: var(--fs-sm); color: var(--clr-grey); } /* ============================================================ 23. REVEAL ANIMATIONS (IntersectionObserver) ============================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Staggered grid children */ .reveal-grid .service-card, .reveal-grid .team-card, .reveal-grid .review-card, .reveal-grid .blog-card, .reveal-grid .consult-step { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-grid.is-visible .service-card, .reveal-grid.is-visible .team-card, .reveal-grid.is-visible .review-card, .reveal-grid.is-visible .blog-card, .reveal-grid.is-visible .consult-step { opacity: 1; transform: translateY(0); } .reveal-grid.is-visible :nth-child(1) { transition-delay: 0s; } .reveal-grid.is-visible :nth-child(2) { transition-delay: 0.1s; } .reveal-grid.is-visible :nth-child(3) { transition-delay: 0.15s; } .reveal-grid.is-visible :nth-child(4) { transition-delay: 0.2s; } .reveal-grid.is-visible :nth-child(5) { transition-delay: 0.25s; } .reveal-grid.is-visible :nth-child(6) { transition-delay: 0.3s; } /* ============================================================ 24. UTILITY ============================================================ */ .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; } /* Skip-to-content link — hidden until keyboard-focused */ .skip-link { position: absolute; top: -100px; left: var(--sp-sm); z-index: 2000; padding: 0.7em 1.2em; background: var(--clr-dark); color: var(--clr-white); border-radius: var(--radius-sm); font-size: var(--fs-sm); transition: top 0.2s ease; } .skip-link:focus { top: var(--sp-sm); outline: 2px solid var(--clr-white); outline-offset: 2px; } /* Skip target receives focus programmatically — don't draw a box around it */ #main:focus { outline: none; } /* Link-styled button (e.g. footer "Manage Cookies") */ .link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } .link-btn:hover { color: #000; } .divider { width: 60px; height: 2px; background: var(--clr-accent); margin: var(--sp-sm) auto; } /* ============================================================ 25. RESPONSIVE — TABLET (min-width: 768px) ============================================================ */ @media (min-width: 768px) { :root { --fs-md: 1.25rem; --fs-lg: 1.5rem; --fs-xl: 2rem; --fs-2xl: 2.75rem; --fs-3xl: 3.5rem; } .container { padding: 0 var(--sp-md); } .section { padding: var(--sp-xl) 0; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr 1fr; } .contact-info { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 2fr 1fr 1fr; } .map-wrap iframe { height: 400px; } .service-images .grid--2 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 26. RESPONSIVE — DESKTOP (min-width: 1025px) ============================================================ */ @media (min-width: 1025px) { .nav-links { display: flex; } .nav-hamburger { display: none; } /* Mobile menu can never render on desktop — prevents the distorted centred/overflowing flash while resizing the window past the breakpoint. */ .mobile-menu { display: none; } .nav-actions .btn-primary { display: inline-block; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .section { padding: var(--sp-xl) 0; } .section-header { margin-bottom: var(--sp-lg); } .footer-inner { grid-template-columns: 2fr 1fr 1fr auto; } .page-hero { min-height: 55vh; } } /* ============================================================ 27. PAGE-SPECIFIC: NAV ON NON-HERO PAGES ============================================================ */ .page-has-hero #main-nav { background: transparent; } .page-has-hero #main-nav.scrolled { background: #000; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* Marble hero pages: nav is always black (white text invisible on light marble) */ .page-marble-hero #main-nav { background: #000; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } body:not(.page-has-hero) #main-nav { background: var(--clr-white); box-shadow: var(--shadow-sm); } body:not(.page-has-hero) #main-nav .nav-links a { color: var(--clr-dark); } body:not(.page-has-hero) #main-nav .nav-hamburger span { background: var(--clr-dark); } body:not(.page-has-hero) #main-nav .lang-toggle { border-color: var(--clr-accent); color: var(--clr-accent); } /* Non-hero pages have a solid white nav, so the logo must be the dark original — not the white-inverted hero/nav variant. #main-nav raises specificity above #main-nav:not(.scrolled) .logo img (which would otherwise force the logo white → invisible on the white bar). */ body:not(.page-has-hero) #main-nav .logo img { filter: none; } /* Spacer for non-hero pages so content isn't behind fixed nav */ body:not(.page-has-hero) main { padding-top: var(--nav-height); } /* ============================================================ 28a. IMAGE PLACEHOLDERS ============================================================ */ .img-placeholder { width: 100%; height: 100%; min-height: 220px; aspect-ratio: 16/9; background: #f0ece6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: #555; border-radius: var(--radius-md); } .img-placeholder svg { opacity: 0.6; } .img-placeholder span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; } .team-card .img-placeholder { aspect-ratio: 3/4; min-height: 280px; border-radius: var(--radius-md) var(--radius-md) 0 0; } .hero .img-placeholder { aspect-ratio: unset; min-height: 500px; border-radius: 0; background: #1a1a1a; color: #fff; } /* ============================================================ 29. PRINT ============================================================ */ @media print { #main-nav, .mobile-menu, footer, .cta-bar, .hero-video-wrap { display: none; } .reveal { opacity: 1; transform: none; } body { font-size: 12pt; color: #000; } } /* ============================================================ WELCOME SECTION — centred text layout ============================================================ */ .welcome-section { padding: 6rem 0; } .welcome-body { max-width: 760px; margin: 0 auto; text-align: center; } .welcome-body h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; margin: 0 0 var(--sp-sm); } .welcome-tagline { font-size: 1.05rem; font-style: italic; color: var(--clr-accent); margin: 0 0 1.5rem; } .welcome-body p { font-size: 1rem; line-height: 1.8; color: #444; margin: 0 0 1.25rem; } .welcome-btn { display: inline-block; margin-top: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ============================================================ FLIP CARDS — services 2x3 grid (White Dental Spa style) ============================================================ */ .flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .flip-grid .flip-card { aspect-ratio: 16 / 9; } @media (max-width: 900px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } .flip-grid .flip-card { aspect-ratio: 16 / 9; } } @media (max-width: 600px) { .flip-grid { grid-template-columns: 1fr; } .flip-grid .flip-card { aspect-ratio: 16 / 9; } } /* ============================================================ TREATMENT & TECHNOLOGY CARDS — floating glass hover ============================================================ */ /* Outer wrapper: stationary hit-area, shadow bleeds outside */ .flip-card { display: block; text-decoration: none; color: inherit; height: auto; aspect-ratio: 3 / 4; position: relative; overflow: visible; } /* Inner wrapper: clips the image, handles the lift animation */ .flip-card-inner { position: relative; width: 100%; height: 100%; border-radius: var(--radius-md); overflow: hidden; transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), box-shadow 0.45s ease; will-change: transform; } .flip-card:hover .flip-card-inner { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.50), 0 8px 20px rgba(0, 0, 0, 0.30); } /* Image face */ .flip-card-front { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } /* White overlay at rest — fades out on hover to reveal the image */ .flip-card-front::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.45); transition: background 0.5s ease; pointer-events: none; z-index: 1; } .flip-card:hover .flip-card-front::before { background: rgba(255, 255, 255, 0); } /* Glass sheen — diagonal light sweep, fades in on hover only */ .flip-card-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 32%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0) 65% ); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: 2; } .flip-card:hover .flip-card-front::after { opacity: 1; } /* Label */ .flip-card-front-inner { position: absolute; bottom: 10%; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .flip-card-front h3 { margin: 0; color: #1a1a1a; background: #fff; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); transition: background 0.4s ease, color 0.4s ease; } .flip-card:hover .flip-card-front h3 { background: #1a1a1a; color: #fff; } .flip-line { display: none; } .flip-card-back { display: none; } /* ============================================================ TESTIMONIALS — light bg, side heading + carousel (White style) ============================================================ */ .testimonials-section { background: #ededed; padding: 6rem 0; } .testimonials-section .container { max-width: 1500px; display: flex; flex-direction: column; align-items: center; } .testimonials-heading { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1.25; color: #222; text-align: center; margin: 0 0 2.5rem; } /* Horizontal scroll-snap carousel — never wraps; swipe on touch, scrollbar + arrows on desktop. All 5 fit on wide screens. */ .testimonials-carousel { position: relative; width: 100%; } .testimonials-track { display: flex; gap: 1rem; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding: 0 1rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.75rem; /* room for the scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.28) transparent; } .testimonials-track::-webkit-scrollbar { height: 8px; } .testimonials-track::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 4px; } .testimonials-track::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.28); border-radius: 4px; } /* Arrow controls (desktop / mouse) */ .testimonials-prev, .testimonials-next { position: absolute; top: calc(50% - 0.4rem); /* offset for scrollbar padding */ transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border: none; border-radius: 50%; background: #fff; color: #222; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transition: opacity 0.2s, background 0.2s; } .testimonials-prev { left: -6px; } .testimonials-next { right: -6px; } .testimonials-prev:hover, .testimonials-next:hover { background: #f3f3f3; } .testimonials-prev:disabled, .testimonials-next:disabled { opacity: 0.3; cursor: default; } /* Hide arrows when everything fits (no overflow) */ .testimonials-carousel.is-static .testimonials-prev, .testimonials-carousel.is-static .testimonials-next { display: none; } /* On touch devices, swipe is primary — drop the arrows */ @media (hover: none) { .testimonials-prev, .testimonials-next { display: none; } } .testimonial-card { /* Grow to fill the row so all 5 fit on wide desktop (no overflow → no arrows); never shrink below the basis, so it scrolls when narrow. */ flex: 1 0 min(260px, 80vw); scroll-snap-align: start; background: #fff; padding: 1.4rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; border-radius: var(--radius-md); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } .testimonial-stars { color: #a87c00; /* ~3.8:1 on white — passes SC 1.4.11 (was #f5b50a ≈ 1.9:1) */ font-size: 1.1rem; letter-spacing: 0.2em; } .testimonial-card cite { font-style: normal; font-weight: 600; font-size: 1rem; color: #222; letter-spacing: 0.02em; } .testimonial-card blockquote { flex: 1; margin: 0; font-size: 0.83rem; line-height: 1.6; color: #555; } /* ============================================================ 30. MOBILE RESPONSIVENESS — GLOBAL POLISH ============================================================ */ /* Tap delay & global focus ring */ * { touch-action: manipulation; } :focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 3px; } /* Honour reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- TABLET (≤1024px) ---------- */ @media (max-width: 1024px) { .section { padding: var(--sp-lg) 0; } /* Hero button group stacks vertically on tablet portrait & smaller */ .hero-actions { flex-direction: column; width: min(320px, 80%); align-items: stretch; margin-left: auto; margin-right: auto; } .hero-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1rem; } /* Hide desktop nav-links on tablet too — hamburger handles tablet */ .nav-links { display: none; } .nav-actions .btn-primary { display: none; } } /* ---------- MOBILE (≤767px) ---------- */ @media (max-width: 767px) { /* Section spacing */ .section { padding: var(--sp-md) 0; } .section-header { margin-bottom: var(--sp-md); } .container { padding: 0 var(--sp-sm); } .welcome-section, .testimonials-section { padding: var(--sp-md) 0; } /* Typography: ensure body never < 1rem, headings sized via clamp tokens */ body { font-size: 1rem; line-height: 1.6; } h1 { font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: 1.2; } h2 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.2; } h3 { font-size: clamp(1.2rem, 4vw, 1.4rem); line-height: 1.25; } /* Buttons — tap target & full-width primary CTAs */ .btn, .hero-btn { min-height: 48px; min-width: 120px; padding: 0.85em 1.5em; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } .hero-content .btn, .hero-content--brand .hero-actions .hero-btn, .cta-bar .btn, .service-cta .btn, .form-actions .btn { width: 100%; } .hero-actions { flex-direction: column; width: 100%; align-items: stretch; } /* HERO */ .hero { min-height: 100vh; min-height: 100svh; } .hero-overlay { background: rgba(0,0,0,0.25); } .hero-content { padding: var(--sp-sm); } .hero-eyebrow { font-size: clamp(1.6rem, 7vw, 2.4rem); } .hero-logo { width: clamp(180px, 60vw, 280px); } .hero-tagline-text { font-size: 0.78rem; letter-spacing: 0.18em; } /* NAV — show hamburger, hide horizontal links */ .nav-links { display: none; } .nav-actions .lang-toggle { display: none; } /* moved into mobile menu via .mobile-menu .lang-toggle */ .nav-actions .btn-primary { display: none; } .nav-hamburger { display: flex; min-width: 44px; min-height: 44px; } /* MOBILE MENU — layout polish lives in the shared @media (max-width:1024px) block above; only the phone-specific lang-toggle stays here. */ .mobile-menu .lang-toggle { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--sp-sm); min-height: 44px; padding: 0.5em 1.5em; font-family: var(--ff-heading); font-weight: 600; border: 2px solid var(--clr-accent); border-radius: var(--radius-sm); color: var(--clr-accent); background: transparent; cursor: pointer; } /* SERVICE CARDS — disable hover lift on touch, keep tap state */ .service-card { padding: var(--sp-sm); } .service-card:hover { transform: none; box-shadow: var(--shadow-sm); } .service-card:active { box-shadow: var(--shadow-md); } .blog-card:hover { transform: none; } .blog-card:active { box-shadow: var(--shadow-md); } /* FLIP CARDS — disable interactive border animation on touch */ .flip-card { height: auto; } .flip-card-front-inner { margin-top: 50%; } /* ABOUT TEASER — stacked image max-height */ .about-teaser-img img { max-height: 300px; width: 100%; object-fit: cover; } /* TEAM */ .team-row { grid-template-columns: 1fr; gap: var(--sp-md); } .team-card-photo { max-width: 320px; margin-left: auto; margin-right: auto; } /* CTA BAR — vertical stack */ .cta-bar { padding: var(--sp-md) var(--sp-sm); } .cta-bar h2 { margin-bottom: var(--sp-sm); } /* MAP & IFRAME */ .map-wrap iframe { height: 280px; } /* FORMS — iOS-zoom-safe */ .form-control, select.form-control, textarea.form-control { font-size: 1rem; min-height: 48px; width: 100%; } .form-group label { font-size: 1rem; } .form-actions .btn[type="submit"], button[type="submit"].btn { width: 100%; min-height: 56px; font-size: 1rem; } /* FOOTER — full-width sections, LEFT-ALIGNED, brand centred on top. (A 2-col grid was tried but the long Greek headings — ΕΝΗΜΕΡΩΜΕΝΟΙ, ΛΕΙΤΟΥΡΓΙΑΣ — and the hours line overflow a half-column at phone widths. Left-aligning the stacked sections is what fixes the old centred-"list" feel; 768–1024px still uses the 2-col grid where the columns are wide enough.) */ footer { padding: var(--sp-md) 0 var(--sp-sm); } .footer-inner { grid-template-columns: minmax(0, 1fr); /* cap the column at the viewport — never overflow */ gap: var(--sp-md); padding: 0 var(--sp-md); text-align: left; } .footer-col { text-align: left; min-width: 0; } .footer-row { justify-content: flex-start; text-align: left; min-width: 0; overflow-wrap: anywhere; } .footer-row > * { min-width: 0; } /* let the address/hours text wrap (flex min-width trap) */ /* brand block (logo + tagline + social) stays centred at the top */ .footer-brand { text-align: center; } .footer-brand img { height: auto; width: 220px; max-width: 100%; margin-left: auto; margin-right: auto; } .footer-tagline-text { max-width: 100%; margin-left: auto; margin-right: auto; } .footer-social-group { align-items: center; } .footer-social-icons { justify-content: center; } /* PAGE HERO (service detail pages) */ .page-hero { min-height: 40vh; } } /* ============================================================ 31. COOKIE CONSENT BANNER ============================================================ */ @keyframes cookieSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } #cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; background: var(--clr-dark); color: var(--clr-white); box-shadow: var(--shadow-lg); animation: cookieSlideUp 0.4s ease forwards; } #cookie-banner.is-hiding { opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.3s ease; } .cookie-banner__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-md) var(--sp-md); display: flex; align-items: center; gap: var(--sp-md); } .cookie-banner__text { flex: 1; } .cookie-banner__title { display: block; font-family: var(--ff-heading); font-size: var(--fs-md); font-weight: 600; color: var(--clr-white); margin-bottom: var(--sp-xs); } .cookie-banner__body { font-size: var(--fs-sm); color: var(--clr-white); opacity: 0.85; line-height: 1.55; margin: 0; } .cookie-banner__actions { display: flex; gap: var(--sp-sm); flex-shrink: 0; } #cookie-banner .btn { min-height: 44px; min-width: 120px; border-radius: var(--radius-full); padding: 0.75em 1.5em; font-size: var(--fs-sm); letter-spacing: 0.08em; } #cookie-banner .cookie-banner__accept { background: var(--clr-accent); color: var(--clr-dark); border: 2px solid var(--clr-accent); } #cookie-banner .cookie-banner__accept:hover { background: var(--clr-accent-hover); border-color: var(--clr-accent-hover); transform: none; box-shadow: none; } #cookie-banner .cookie-banner__decline { background: transparent; color: var(--clr-white); border: 1px solid var(--clr-border); } #cookie-banner .cookie-banner__decline:hover { background: var(--clr-white); color: var(--clr-dark); transform: none; } @media (max-width: 767px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; padding: var(--sp-sm); gap: var(--sp-xs); } .cookie-banner__actions { flex-direction: row; /* side-by-side keeps the banner short */ width: 100%; } #cookie-banner .btn { flex: 1; min-width: 0; min-height: 48px; } } /* ============================================================ THE CLINIC SECTION (about.html) ============================================================ */ /* --- Two-column split --- */ .clinic-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-lg); } .clinic-heading { text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--sp-md); } .clinic-body { margin-bottom: var(--sp-md); line-height: 1.75; } .clinic-text-short { margin-bottom: 0; } /* --- Expanded text (hidden by default, smooth reveal) --- */ .clinic-text-long { margin-top: var(--sp-sm); } /* --- Overlapping photos (right column) --- */ .clinic-photo-col { display: flex; justify-content: center; } .clinic-photos-stack { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 3.5; } .clinic-photo-placeholder { border-radius: var(--radius-md); } .clinic-photo--back { position: absolute; top: 0; right: 0; width: 75%; } .clinic-photo--front { position: absolute; bottom: 0; left: 0; width: 75%; box-shadow: var(--shadow-md); } /* --- Photo gallery grid --- */ .clinic-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .clinic-gallery-item { border-radius: var(--radius-sm); overflow: hidden; min-height: 80px; } .clinic-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Tablet (768px+) --- */ @media (min-width: 768px) { .clinic-gallery { grid-template-columns: repeat(4, 1fr); } .clinic-gallery-item { min-height: 120px; } } /* --- Desktop (1025px+) --- */ @media (min-width: 1025px) { .clinic-split { grid-template-columns: 1fr; } .clinic-gallery { grid-template-columns: repeat(15, 1fr); grid-template-rows: 130px 190px; } /* Row 1: 5 items × span 3 = 15 */ .clinic-gallery-item:nth-child(-n+5) { grid-column: span 3; } /* Row 2: 3 items × span 5 = 15 */ .clinic-gallery-item:nth-child(n+6) { grid-column: span 5; } } /* === Meet Team Divider === */ .meet-team-divider { background: var(--clr-light); width: 100%; padding: var(--sp-xl) 0; } .meet-team-divider__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; } .meet-team-divider__text { display: flex; flex-direction: column; gap: var(--sp-sm); } .meet-team-divider__text .btn { align-self: flex-start; margin-top: var(--sp-xs); } .meet-team-section-img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md); display: block; object-fit: cover; } @media (max-width: 767px) { .meet-team-divider__inner { grid-template-columns: 1fr; } .meet-team-divider__media { order: 2; } .meet-team-divider__text { order: 1; } } /* === Meet The Team Page === */ .team-page-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .team-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero__overlay { position: absolute; inset: 0; background: var(--clr-overlay); z-index: 1; } .page-hero__content { position: relative; z-index: 2; text-align: center; color: var(--clr-white); } .page-hero__content h1 { font-size: var(--fs-hero); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-white); /* white over the dark photo + scrim (was inheriting the global dark heading colour) */ } .team-member { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--clr-border); } .team-member:last-of-type { border-bottom: none; } .team-member__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; } .team-member--image-first .team-member__photo { order: 1; } .team-member--image-first .team-member__text { order: 2; } .team-member--text-first .team-member__text { order: 1; } .team-member--text-first .team-member__photo { order: 2; } .team-member__photo img { width: 70%; height: auto; border-radius: var(--radius-md); display: block; margin: 0 auto; } .team-member__text { display: flex; flex-direction: column; gap: var(--sp-sm); } .team-member__role { color: var(--clr-accent); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--ff-body); } .team-member__bio p { color: var(--clr-grey); font-size: var(--fs-base); line-height: 1.8; } @media (max-width: 767px) { .team-member__inner { grid-template-columns: 1fr; } .team-member--image-first .team-member__photo, .team-member--text-first .team-member__photo { order: 1; } .team-member--image-first .team-member__text, .team-member--text-first .team-member__text { order: 2; } } /* === FAQ Tips Section === */ .faq-tips { background: var(--clr-white); padding: var(--sp-xl) 0; } .faq-tips__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; } .faq-tips__left h2 { font-family: var(--ff-heading); font-size: var(--fs-2xl); color: var(--clr-dark); margin-bottom: var(--sp-md); text-align: center; } .faq-tips__list { display: flex; flex-direction: column; } .faq-tips__item { border: 1px solid var(--clr-border); margin-bottom: -1px; } .faq-tips__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-sm) var(--sp-md); background: var(--clr-white); border: none; cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-base); color: var(--clr-dark); text-align: left; gap: var(--sp-sm); } .faq-tips__question:hover { background: var(--clr-light); } .faq-tips__question[aria-expanded="true"] { font-weight: 600; } .faq-tips__icon { font-size: var(--fs-lg); font-weight: 300; color: var(--clr-dark); flex-shrink: 0; transition: transform 0.3s ease; line-height: 1; } .faq-tips__question[aria-expanded="true"] .faq-tips__icon { content: "−"; } .faq-tips__answer { padding: var(--sp-sm) var(--sp-md) var(--sp-md); background: var(--clr-white); } .faq-tips__answer p { color: var(--clr-grey); font-size: var(--fs-base); line-height: 1.8; margin: 0; } .faq-clinic-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); display: block; position: sticky; top: calc(var(--nav-height) + var(--sp-md)); } @media (max-width: 767px) { .faq-tips__inner { grid-template-columns: 1fr; } .faq-tips__right { display: none; } } /* === Service Pages === */ .service-hero { position: relative; height: 50vh; min-height: 360px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .service-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .service-hero__overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.45); z-index: 1; } .service-hero__content { position: relative; z-index: 2; text-align: center; color: var(--clr-dark); } .service-hero__content h1 { font-family: var(--ff-heading); font-size: var(--fs-hero); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-xs); } .service-hero__content p { font-family: var(--ff-body); font-size: var(--fs-md); color: var(--clr-grey); letter-spacing: 0.04em; } .service-body { padding: var(--sp-xl) 0; background: var(--clr-white); } .service-body__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; } .service-body__text { display: flex; flex-direction: column; gap: var(--sp-sm); } .service-body__text h2 { font-family: var(--ff-heading); font-size: var(--fs-xl); color: var(--clr-dark); } .service-body__text p { font-family: var(--ff-body); font-size: var(--fs-base); color: var(--clr-grey); line-height: 1.8; } .service-body__text h3 { font-family: var(--ff-heading); font-size: var(--fs-lg); color: var(--clr-dark); margin-top: var(--sp-sm); } .service-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; } .service-list li { display: grid; grid-template-columns: 1.1rem 1fr; grid-template-rows: auto auto; column-gap: 0.5rem; font-family: var(--ff-body); font-size: var(--fs-base); color: var(--clr-dark); padding: 0.65rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .service-list li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.08); } .service-list li::before { content: '✓'; grid-column: 1; grid-row: 1; color: var(--clr-accent); font-weight: 700; font-size: 0.85rem; line-height: 1.5; } .service-list li:empty { display: none; } .service-list li strong { grid-column: 2; grid-row: 1; font-weight: 600; white-space: nowrap; color: var(--clr-dark); line-height: 1.5; } .svc-desc { grid-column: 2; grid-row: 2; display: block; color: #5f5f5f; font-size: 0.85rem; line-height: 1.5; margin-top: 0.15rem; } .service-body__image img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; } .service-img-placeholder { width: 100%; aspect-ratio: 4 / 3; background: var(--clr-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--clr-grey); font-family: var(--ff-body); font-size: var(--fs-sm); letter-spacing: 0.06em; text-align: center; } @media (max-width: 767px) { .service-body__inner { grid-template-columns: 1fr; } .service-body__image { order: 1; } .service-body__text { order: 2; } } /* === Services Hub Page === */ .services-hero .service-hero__overlay, .contact-hero .service-hero__overlay { background: rgba(0, 0, 0, 0.45); } .services-hero .service-hero__content, .contact-hero .service-hero__content { color: var(--clr-white); } .services-hero .service-hero__content h1, .contact-hero .service-hero__content h1 { color: var(--clr-white); } .services-grid-section { padding: var(--sp-xl) 0; background: var(--clr-white); } .services-grid-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); } /* === Technology Pages === */ .tech-grid-section { padding: var(--sp-xl) 0; background: var(--clr-white); } .tech-grid-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); } .tech-info-section { background: var(--clr-white); border-top: 1px solid var(--clr-border); padding: 3.5rem 0 4.5rem; } .tech-info-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-md); } .tech-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; } .tech-info-item h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-accent); margin: 0 0 0.55rem; } .tech-info-item p { font-size: 0.88rem; line-height: 1.7; color: #555; margin: 0; } @media (max-width: 768px) { .tech-info-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tech-info-grid { grid-template-columns: 1fr; } } .tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .tech-grid .flip-card { aspect-ratio: 16 / 9; } .tech-flip-placeholder { position: absolute; inset: 0; background: var(--clr-border); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0.6rem 0.8rem; } .tech-flip-placeholder__note { font-size: 0.7rem; font-style: italic; color: #aaa; letter-spacing: 0.04em; } @media (max-width: 1024px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } .tech-grid > :nth-child(n) { grid-column: auto; } .tech-grid .flip-card { aspect-ratio: 16 / 9; } } @media (max-width: 767px) { .tech-grid { grid-template-columns: 1fr; } .tech-grid > :nth-child(n) { grid-column: auto; } .tech-grid .flip-card { aspect-ratio: 16 / 9; } } /* ============================================================ 32. STICKY MOBILE CALL BAR (phones only) Injected by main.js so it appears on every page. Primary action is Call (tel:); Book is the secondary action. ============================================================ */ .call-bar { display: none; } @media (max-width: 767px) { .call-bar { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 9990; /* sits below the cookie banner (9999) */ display: flex; gap: 2px; background: var(--clr-dark); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25); padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */ transition: bottom 0.3s ease, transform 0.3s ease; } .call-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; font-family: var(--ff-heading); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } /* Call — dominant, inverted (white) so it pops on the dark bar */ .call-bar__call { flex: 1 1 64%; background: var(--clr-white); color: var(--clr-dark); } .call-bar__call:active { background: var(--clr-light); } /* Book — secondary, recedes into the dark bar */ .call-bar__book { flex: 1 1 36%; background: var(--clr-dark); color: var(--clr-white); } .call-bar__book:active { background: #000; } /* Hide while the mobile menu is open (the menu has its own Book button) */ body.menu-open .call-bar { transform: translateY(100%); } /* While the one-time cookie banner is showing, sit directly above it */ body.cookie-open .call-bar { bottom: var(--cookie-h, 0); } /* Reserve space so the fixed bar never covers footer content */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } /* Aggregate Google rating shown above testimonials */ .testimonials-aggregate { text-align: center; margin: -1.5rem 0 2rem; font-size: var(--fs-sm); } .testimonials-aggregate a { color: var(--clr-grey); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .testimonials-aggregate a:hover { color: var(--clr-dark); border-bottom-color: var(--clr-dark); } /* Privacy notice under the contact form */ .form-privacy-note { font-size: var(--fs-xs); color: var(--clr-grey); text-align: center; margin: var(--sp-sm) 0 0; } .form-privacy-note a { color: var(--clr-accent); text-decoration: underline; } /* ============================================================ 33. MOBILE / TOUCH HARDENING ============================================================ */ /* Prevent scroll-chaining / pull-to-refresh from inner scrollers */ .testimonials-track { overscroll-behavior-x: contain; } .mobile-menu { overscroll-behavior: contain; } /* Kill "sticky hover" on touch devices — neutralise the lift/transform hover effects that otherwise persist after a tap. */ @media (hover: none) { .btn-primary:hover, .btn-outline:hover, .btn-white:hover, .btn-dark:hover, .welcome-btn:hover, .service-card:hover, .blog-card:hover, .testimonial-card:hover, .flip-card:hover .flip-card-inner { transform: none; box-shadow: var(--shadow-sm); } } /* Hide the sticky Call bar while a form field is focused (iOS keyboard) */ @media (max-width: 767px) { body.kbd-open .call-bar { transform: translateY(100%); } } /* ============================================================ 34. ACCESSIBILITY — link affordance (WCAG 1.4.1 Use of Colour) Links inside running body text are underlined so they are distinguishable without relying on colour alone. Buttons, nav and cards (which have their own affordances) opt out. ============================================================ */ main p a:not([class*="btn"]):not(.logo), main li a:not([class*="btn"]), .cookie-banner__body a { text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ 36. FLIP-CARD IMAGE EFFECT ON TOUCH (no hover) Desktop reveals the image on hover (white veil fades → vivid image, card lifts, glass sheen sweeps, title pill inverts). Touch devices have no :hover, so: #1 show the revealed look by default (also the no-JS fallback) #2 with JS, play the reveal as each card scrolls into view (.in-view added by an IntersectionObserver in main.js) Scoped to .flip-card → covers the homepage services, the Services hub and the Technology grid automatically. ============================================================ */ @media (hover: none) { /* #1 — fallback / no-JS: images vivid, dark title pill, soft shadow */ .flip-card-front::before { background: rgba(255, 255, 255, 0); } .flip-card-front h3 { background: #1a1a1a; color: #fff; } .flip-card-inner { box-shadow: var(--shadow-md); } /* #2 — with JS: start washed-out … */ .js .flip-card-front::before { background: rgba(255, 255, 255, 0.45); } .js .flip-card-front h3 { background: #fff; color: #1a1a1a; } .js .flip-card .flip-card-inner { box-shadow: var(--shadow-sm); transform: translateY(16px); transition: transform 0.55s cubic-bezier(.16, 1, .3, 1), box-shadow 0.55s ease; } /* … then reveal (vivid + lift + sheen + dark pill) once scrolled into view */ .js .flip-card.in-view .flip-card-front::before { background: rgba(255, 255, 255, 0); } .js .flip-card.in-view .flip-card-front h3 { background: #1a1a1a; color: #fff; } .js .flip-card.in-view .flip-card-inner { transform: translateY(0); box-shadow: var(--shadow-md); } .js .flip-card.in-view .flip-card-front::after { animation: flipCardSheen 0.8s ease 0.1s; } } @keyframes flipCardSheen { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } } /* Reduced motion: skip the slide/sheen — just show the vivid end state */ @media (hover: none) and (prefers-reduced-motion: reduce) { .js .flip-card .flip-card-inner { transform: none; transition: none; } .js .flip-card-front::before { background: rgba(255, 255, 255, 0); } .js .flip-card-front h3 { background: #1a1a1a; color: #fff; } .js .flip-card.in-view .flip-card-front::after { animation: none; } }