/* ============================================================ STOMAPOINT — Mobile Responsive Styles Adaugă acest fișier în DUPĂ styles.css: ============================================================ */ /* ── Tablet: 768px și mai mic ── */ @media (max-width: 768px) { /* Global safety net against horizontal overflow */ html, body { overflow-x: hidden; max-width: 100%; } /* Container */ .container { padding-left: 16px; padding-right: 16px; width: 100%; box-sizing: border-box; } /* ── Navbar ── */ .nav-wrapper { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-wrap: nowrap; } .logo-img { max-height: 40px; width: auto; } .mobile-toggle { display: flex !important; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .mobile-toggle span { display: block; width: 25px; height: 2px; background: #333; border-radius: 2px; transition: all 0.3s ease; } /* Hamburger → X animation */ .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle.active span:nth-child(2) { opacity: 0; } .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav menu — collapsed by default */ .nav-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 24px; list-style: none; margin: 0; padding: 80px 24px 24px; box-sizing: border-box; z-index: 1000; overflow-y: auto; } .nav-menu.active { display: flex; } .nav-link { font-size: 1.2rem; font-weight: 500; } .nav-menu .btn { margin-top: 8px; width: 100%; text-align: center; } /* ── Hero Section ── */ .hero { padding: 100px 0 60px; min-height: auto; } .hero-content { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 40px; text-align: center; max-width: 100%; overflow-x: hidden; } .hero-text { order: 1; width: 100% !important; max-width: 100%; } .hero-image { order: 2; width: 100% !important; max-width: 360px; margin: 0 auto; } .hero-title { font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.2; } .hero-description { font-size: 0.95rem; margin: 16px 0; } .hero-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; } .hero-buttons .btn { width: 100%; max-width: 300px; } .hero-stats { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; } .hero-stats .stat { flex: 0 0 auto; text-align: center; } .hero-stats .stat h3 { font-size: 1.4rem; } /* ── Features Grid ── */ .features-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; } .feature-card { padding: 20px 16px; text-align: center; } /* ── Services Grid ── */ .services-grid { grid-template-columns: 1fr !important; gap: 20px; } .service-card { padding: 24px 20px; } /* ── Prices ── */ .price-categories { padding: 0; } .price-item { flex-wrap: wrap; gap: 4px; } .price-value { white-space: nowrap; } /* ── Team / Echipa ── */ .team-grid { grid-template-columns: 1fr !important; gap: 24px; } .team-member { text-align: center; padding: 24px 16px; } /* ── About / Despre ── */ .about-content { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 32px; max-width: 100%; overflow-x: hidden; } .about-text, .about-features { width: 100% !important; max-width: 100%; } .about-features[style] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .about-values { grid-template-columns: 1fr !important; } .features-boxes { grid-template-columns: 1fr 1fr !important; gap: 16px; } /* ── Appointment Section ── */ .appointment-content { flex-direction: column !important; gap: 40px; } .appointment-info, .appointment-form { width: 100% !important; } .form-row { flex-direction: column !important; gap: 16px; } .form-group { width: 100% !important; } .contact-methods { flex-direction: column; gap: 12px; } .contact-method { width: 100%; justify-content: flex-start; } .btn-block { width: 100%; } /* ── Contact Grid ── */ .contact-grid { grid-template-columns: 1fr !important; gap: 20px; } .contact-info-box { padding: 20px 16px; text-align: center; } /* ── Map ── */ .map-container iframe { height: 280px; } /* ── Footer ── */ .footer-content { grid-template-columns: 1fr 1fr !important; gap: 32px; } .footer-bottom { text-align: center; font-size: 0.8rem; } /* ── Floating buttons ── */ .back-to-top { bottom: 100px !important; left: 16px !important; width: 44px !important; height: 44px !important; font-size: 20px !important; } .whatsapp-float { bottom: 16px !important; right: 16px !important; width: 52px !important; height: 52px !important; } /* ── Section headers ── */ .section-title { font-size: clamp(1.4rem, 5vw, 2rem); } .section-subtitle { font-size: 0.9rem; } } /* ── Small phones: 480px și mai mic ── */ @media (max-width: 480px) { .features-grid { grid-template-columns: 1fr !important; } .hero-stats { gap: 16px; } .hero-stats .stat h3 { font-size: 1.2rem; } .footer-content { grid-template-columns: 1fr !important; } .features-boxes { grid-template-columns: 1fr !important; } .about-features[style] { grid-template-columns: 1fr !important; } .section-header { padding: 0 8px; } .btn-lg { padding: 14px 20px; font-size: 0.95rem; } } /* ── Landscape phones ── */ @media (max-width: 896px) and (orientation: landscape) { .hero { padding: 80px 0 40px; } .nav-menu { padding-top: 60px; flex-direction: row; flex-wrap: wrap; height: auto; min-height: 100vh; gap: 16px; } .nav-link { font-size: 1rem; } } /* ── General touch-friendliness ── */ @media (hover: none) and (pointer: coarse) { .btn, .nav-link, .contact-method, .back-to-top, .whatsapp-float { min-height: 44px; min-width: 44px; } input, select, textarea { font-size: 16px !important; /* prevents iOS auto-zoom */ } } /* ── Scroll progress bar ── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: #C9A86A; z-index: 9999; transition: width 0.1s linear; } /* ============================================================ NAVBAR DROPDOWN — Servicii (v2: delay + no-navigate fix) ============================================================ */ .nav-item-dropdown { position: relative; } .nav-item-dropdown > .nav-link { display: flex; align-items: center; gap: 5px; } /* Arrow */ .nav-item-dropdown > .nav-link::before { content: ''; display: inline-block; order: 2; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s ease; margin-left: 4px; flex-shrink: 0; } .nav-item-dropdown > .nav-link::after { display: none !important; } .nav-item-dropdown:hover > .nav-link::before, .nav-item-dropdown.open > .nav-link::before { transform: rotate(-135deg) translateY(-2px); } /* Invisible bridge: fills gap between link and panel so mouse can travel down without triggering mouseout */ .nav-item-dropdown > .nav-link { padding-bottom: 14px; margin-bottom: -14px; } /* Dropdown panel */ .dropdown-menu { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06); padding: 10px; min-width: 270px; list-style: none; z-index: 2000; border: 1px solid rgba(0,0,0,0.06); /* Show transition instant, hide with 280ms delay */ transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 280ms; } .dropdown-menu::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 13px; height: 13px; background: #fff; border-left: 1px solid rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.06); } .nav-item-dropdown:hover .dropdown-menu, .nav-item-dropdown.open .dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; } /* Items */ .dropdown-menu li a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9px; text-decoration: none; color: #333; font-size: 0.92rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .dropdown-menu li a:hover { background-color: rgba(201, 168, 106, 0.1); color: #C9A86A; } .dropdown-icon { width: 32px; height: 32px; background: rgba(201, 168, 106, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.15s ease; } .dropdown-menu li a:hover .dropdown-icon { background-color: rgba(201, 168, 106, 0.2); } .item-label { display: block; font-weight: 600; font-size: 0.9rem; } .item-desc { display: block; font-weight: 400; color: #aaa; font-size: 0.77rem; margin-top: 1px; } .dropdown-menu li a:hover .item-desc { color: rgba(201, 168, 106, 0.85); } .dropdown-all { border-top: 1px solid rgba(0,0,0,0.07); margin-top: 6px; padding-top: 6px; } .dropdown-all a { color: #C9A86A !important; font-weight: 600 !important; justify-content: center !important; font-size: 0.88rem !important; } /* ── Mobile ── */ @media (max-width: 768px) { /* nav-item-dropdown must stretch full width so it aligns with other items */ .nav-item-dropdown { width: 100%; text-align: center; } .nav-item-dropdown > .nav-link { padding-bottom: 0; margin-bottom: 0; justify-content: center; /* center the "Servicii" text + arrow */ width: 100%; } .dropdown-menu { position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none !important; box-shadow: none; border: none; border-radius: 8px; min-width: unset; width: 100%; margin: 8px 0 0; transition: max-height 0.3s ease, padding 0.3s ease; background: rgba(201, 168, 106, 0.06); /* Hidden by default */ max-height: 0; overflow: hidden; padding: 0; } .dropdown-menu::before { display: none; } .nav-item-dropdown.open .dropdown-menu { max-height: 600px; padding: 8px; } /* Block desktop hover on mobile */ .nav-item-dropdown:hover .dropdown-menu { max-height: 0; padding: 0; } .nav-item-dropdown.open:hover .dropdown-menu { max-height: 600px; padding: 8px; } .dropdown-menu li a { padding: 10px 12px; white-space: normal; justify-content: center; border-radius: 8px; } .dropdown-menu li a .dropdown-icon { display: none; } .item-desc { display: none; } .item-label { font-size: 0.95rem; } .dropdown-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(201,168,106,0.2); } .dropdown-all a { justify-content: center !important; } } /* ============================================================ SERVICE PAGES — Mobile centering (toate paginile de servicii) ============================================================ */ @media (max-width: 900px) { /* Hero section */ .service-hero-content, .service-content-grid { grid-template-columns: 1fr !important; } .service-hero-badge { display: inline-flex; } .service-hero h1 { font-size: 2rem; text-align: center; } .service-hero .lead { text-align: center; } .service-highlights { text-align: left; /* keep checkmarks left-aligned */ max-width: 480px; margin-left: auto; margin-right: auto; } .service-hero > .container > nav.breadcrumb { justify-content: center; } /* Center the hero badge */ .service-hero-content > div:first-child { display: flex; flex-direction: column; align-items: center; text-align: center; } /* CTA buttons row */ .service-hero-content > div:first-child > div[style] { justify-content: center; flex-wrap: wrap; } /* Result badges (estetica) */ .result-badges { justify-content: center; } /* Age badges (ortodontie) */ .age-badges { justify-content: center; } /* Sticky cards become static */ .cta-card, .sidebar-cta { position: static !important; } /* Prose headings centered on mobile */ .prose h2, .prose h3 { text-align: center; } /* Price table rows stay left-aligned (readability) */ .price-row { text-align: left; } /* Before/after strip */ .before-after-strip { flex-direction: column; text-align: center; } /* Treatment comparison */ .treatment-comparison { grid-template-columns: 1fr !important; } /* Other services grid */ .other-services-grid { grid-template-columns: 1fr 1fr !important; } /* Comparison table scroll on small screens */ .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .other-services-grid { grid-template-columns: 1fr !important; } .age-badges { flex-direction: column; align-items: center; } .service-hero h1 { font-size: 1.7rem; } } /* ============================================================ FIX: Prose content centering on mobile (toate service pages) ============================================================ */ @media (max-width: 768px) { /* CRITICAL: prevent text overflow */ .service-content, .service-hero, .prose, .prose p, .prose h2, .prose h3 { overflow-wrap: break-word; word-break: break-word; max-width: 100%; box-sizing: border-box; } /* Prose text in service-content section — LEFT aligned on mobile for readability */ .service-content .prose p { text-align: left; } .service-content .prose h2, .service-content .prose h3 { text-align: center; } /* Lists stay left */ .service-content .prose ul, .service-content .prose ol, .service-content .prose li { text-align: left; } /* Price rows */ .price-row-name, .price-row-value { text-align: left; } .cost-row { text-align: left; } /* Timeline stays left */ .timeline-body h4, .timeline-body p { text-align: left; } /* Steps list stays left */ .steps-list li { text-align: left; } /* Product cards */ .product-card h4, .product-card .product-price { text-align: center; } .product-card p { text-align: left; } /* Highlight box */ .highlight-box h3, .highlight-box p, .highlight-box .price-tag { text-align: center; } .highlight-box ul li { text-align: left; } /* Before/after strip */ .ba-item h4, .ba-item p { text-align: center; } /* Treatment cards */ .treatment-card h4, .treatment-card .treatment-price { text-align: center; } .treatment-card ul li { text-align: left; } /* FAQ — increase max-height and keep left */ .faq-item.open .faq-answer { max-height: 600px !important; } .faq-answer p { text-align: left; } /* Comparison table scroll */ .comparison-table { font-size: 0.78rem; } /* Sidebar */ .sidebar-info-box h4 { text-align: center; } .sidebar-info-box ul li { text-align: left; } } /* ============================================================ Social icons — mobile: hide from navbar, show as strip under navbar ============================================================ */ @media (max-width: 768px) { /* Hide social icons from navbar on mobile */ .nav-social-links { display: none !important; } /* Social strip under navbar */ .mobile-social-strip { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; background: var(--white, #fff); border-bottom: 1px solid rgba(201,168,106,0.15); position: fixed; top: 70px; left: 0; right: 0; z-index: 999; } .mobile-social-strip a { color: var(--primary-gold, #C9A86A); display: flex; align-items: center; opacity: 0.85; } /* Push hero content down to account for strip */ .hero, .page-hero, .service-hero, .article-hero { padding-top: 140px !important; } } @media (min-width: 769px) { .mobile-social-strip { display: none !important; } }