/** Theme Name: Animora Pet Store Author: PT. Bali Web Design Author URI: https://www.baliwebdesign.co.id/ Description: Animora Pet Store Theme - Gentle Care, Trusted Hands. A modern veterinary & wellness center theme for WordPress. Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: animora-pet-store Template: astra */ /* ============================================ ANIMORA PET STORE - CUSTOM STYLES ============================================ */ /* --- CSS Variables --- */ :root { --green-dark: #1E3D2F; --green-main: #2A5240; --green-mid: #4A7C59; --green-light: #8AAB6F; --orange: #E8932A; --orange-dark: #C97820; --cream: #F7F3EC; --cream-dark: #EDE8DF; --white: #FDFCFA; --text-dark: #1A2E22; --text-mid: #3D5246; --text-light: #6B7F72; --border: rgba(42,82,64,0.12); --shadow-sm: 0 2px 12px rgba(30,61,47,0.08); --shadow-md: 0 8px 32px rgba(30,61,47,0.12); --shadow-lg: 0 20px 60px rgba(30,61,47,0.16); --radius: 12px; --radius-lg: 20px; --nav-height: 72px; } /* ============================================ ANIMORA PAGE - reset Astra wrappers when used ============================================ */ .animora-page { margin: 0; padding: 0; } /* When templates output their own /, Astra body classes still load. Ensure no conflicting Astra container styles affect us. */ .animora-page #animora-main { width: 100%; overflow-x: hidden; } /* --- Base Styles (scoped to Animora pages) --- */ .animora-page *, .animora-page *::before, .animora-page *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.animora-page { margin: 0; padding: 0; font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--text-dark); line-height: 1.65; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .animora-page h1, .animora-page h2, .animora-page h3, .animora-page h4 { font-family: 'Playfair Display', serif; line-height: 1.25; color: var(--text-dark); margin: 0; } .animora-page p { margin: 0 0 1em; } .animora-page p:last-child { margin-bottom: 0; } .animora-page a { text-decoration: none; color: inherit; } .animora-page img { max-width: 100%; display: block; height: auto; } .animora-page button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } .animora-page ul { padding: 0; margin: 0; } /* --- Utility Classes --- */ .animora-page .text-center { text-align: center; } .animora-page .mx-auto { margin-left: auto; margin-right: auto; display: inline-flex; } .animora-page .mt-16 { margin-top: 16px; } .animora-page .mt-20 { margin-top: 20px; } .animora-page .mt-24 { margin-top: 24px; } .animora-page .mt-28 { margin-top: 28px; } .animora-page .mt-40 { margin-top: 40px; } .animora-page .mb-20 { margin-bottom: 20px; } .animora-page .bg-white { background: var(--white); } .animora-page .bg-cream { background: var(--cream); } .animora-page .link-green { color: var(--green-main); font-weight: 600; } .animora-page .lead-text { color: var(--text-light); line-height: 1.75; margin-bottom: 20px; } .animora-page .btn-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .animora-page .ratio-img { border-radius: var(--radius-lg); overflow: hidden; width: 100%; background: var(--cream); } .animora-page .ratio-4-3 { aspect-ratio: 4/3; } .animora-page .ratio-16-7 { aspect-ratio: 16/7; } /* --- NAVBAR --- */ .animora-page .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(30,61,47,0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 0 5%; display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); transition: box-shadow 0.3s, background 0.3s; } .animora-page .navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.25); background: rgba(30,61,47,1); } .animora-page .nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .animora-page .nav-brand-icon { display: flex; align-items: center; } .animora-page .nav-brand .brand-text { display: flex; flex-direction: column; } .animora-page .nav-brand .brand-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--cream); letter-spacing: 0.04em; line-height: 1.1; } .animora-page .nav-brand .brand-sub { font-size: 0.68rem; font-weight: 500; color: rgba(247,243,236,0.55); letter-spacing: 0.12em; text-transform: uppercase; } .animora-page .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .animora-page .nav-links li { list-style: none; } .animora-page .nav-links a { color: rgba(247,243,236,0.8); font-size: 0.88rem; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: color 0.2s, background 0.2s; letter-spacing: 0.01em; display: inline-block; } .animora-page .nav-links a:hover, .animora-page .nav-links a.active { color: var(--cream); background: rgba(255,255,255,0.08); } .animora-page .nav-links .nav-cta a { background: var(--orange); color: var(--white); padding: 8px 18px; } .animora-page .nav-links .nav-cta a:hover, .animora-page .nav-links .nav-cta a.active { background: var(--orange-dark); } /* Dropdown menu overrides — must come AFTER .nav-links a to win specificity */ .animora-page .nav-links .dropdown-menu li a { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 0.88rem !important; font-weight: 500 !important; color: rgba(247,243,236,0.8) !important; text-decoration: none !important; background: transparent !important; transition: background 0.15s, color 0.15s !important; width: 100%; } .animora-page .nav-links .dropdown-menu li a:hover, .animora-page .nav-links .dropdown-menu li a.active { background: rgba(232,147,42,0.12) !important; color: var(--orange) !important; } .animora-page .nav-links .dropdown-menu .drop-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 6px !important; background: rgba(255,255,255,0.07) !important; flex-shrink: 0 !important; opacity: 0.8; } .animora-page .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; background: transparent; border: none; } .animora-page .nav-toggle span { width: 24px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; display: block; } .animora-page .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .animora-page .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .animora-page .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Inner pages: page-hero handles offset itself; home hero is full viewport */ .animora-page #animora-main { padding-top: 0; } /* --- SECTION COMMON --- */ .animora-page .section { padding: 90px 5%; } .animora-page .container { max-width: 1200px; margin: 0 auto; } .animora-page .section-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } .animora-page .section-label.orange-label { color: var(--orange); } .animora-page .section-label.cta-label { color: rgba(232,147,42,0.8); } .animora-page .section-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--text-dark); margin-bottom: 16px; line-height: 1.2; } .animora-page .section-title.light { color: var(--cream); } .animora-page .section-subtitle { font-size: 1rem; color: var(--text-light); max-width: 580px; line-height: 1.7; margin: 0; } .animora-page .section-subtitle.light { color: rgba(247,243,236,0.7); } .animora-page .section-header { margin-bottom: 56px; } .animora-page .section-header.center { text-align: center; } .animora-page .section-header.center .section-subtitle { margin: 0 auto; } /* --- BUTTONS --- */ .animora-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; transition: all 0.2s; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.2; } .animora-page .btn-primary { background: var(--green-main); color: var(--white); border-color: var(--green-main); } .animora-page .btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(42,82,64,0.35); } .animora-page .btn-orange { background: var(--orange); color: var(--white); border-color: var(--orange); } .animora-page .btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,147,42,0.4); } .animora-page .btn-outline { border-color: var(--green-main); color: var(--green-main); background: transparent; } .animora-page .btn-outline:hover { background: var(--green-main); color: var(--white); } .animora-page .btn-outline-light { border-color: rgba(247,243,236,0.5); color: var(--cream); background: transparent; } .animora-page .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--cream); color: var(--cream); } /* --- IMAGES --- */ .animora-page .real-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- CARDS --- */ .animora-page .card-icon { width: 52px; height: 52px; background: var(--cream); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.5rem; } .animora-page .card-icon.orange { background: rgba(232,147,42,0.12); } .animora-page .card-icon.green { background: rgba(42,82,64,0.08); } /* --- HERO --- */ .animora-page .hero { min-height: 100vh; background: var(--green-dark); display: flex; align-items: center; position: relative; overflow: hidden; padding: calc(var(--nav-height) + 40px) 5% 80px; } .animora-page .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--green-dark) 0%, #2A5240 60%, #3D6B50 100%); } .animora-page .hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 50%, rgba(138,171,111,0.12) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(232,147,42,0.08) 0%, transparent 40%); } .animora-page .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .animora-page .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(232,147,42,0.15); border: 1px solid rgba(232,147,42,0.3); color: var(--orange); font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 50px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; } .animora-page .hero-title { font-size: clamp(2rem, 4.5vw, 3.6rem); color: var(--cream); font-weight: 700; margin-bottom: 20px; line-height: 1.18; } .animora-page .hero-title span { color: var(--orange); } .animora-page .hero-text { color: rgba(247,243,236,0.72); font-size: 1.05rem; line-height: 1.75; margin-bottom: 36px; max-width: 480px; } .animora-page .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .animora-page .hero-stats { display: flex; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } .animora-page .hero-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--cream); } .animora-page .hero-stat-label { font-size: 0.8rem; color: rgba(247,243,236,0.55); margin-top: 2px; } .animora-page .hero-visual { position: relative; } .animora-page .hero-img-wrap { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); } /* --- FEATURES BAR --- */ .animora-page .features-bar { background: var(--white); padding: 0 5%; box-shadow: var(--shadow-md); position: relative; z-index: 3; } .animora-page .features-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); } .animora-page .feature-item { display: flex; align-items: center; gap: 16px; padding: 28px 24px; border-right: 1px solid var(--border); transition: background 0.2s; } .animora-page .feature-item:last-child { border-right: none; } .animora-page .feature-item:hover { background: var(--cream); } .animora-page .feature-icon { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .animora-page .feature-icon.g { background: rgba(42,82,64,0.08); } .animora-page .feature-icon.o { background: rgba(232,147,42,0.12); } .animora-page .feature-text h3 { font-size: 0.97rem; margin-bottom: 3px; font-family: 'DM Sans', sans-serif; font-weight: 600; } .animora-page .feature-text p { font-size: 0.82rem; color: var(--text-light); margin: 0; } /* --- ABOUT GRID --- */ .animora-page .about-section { background: var(--white); } .animora-page .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .animora-page .about-grid.reverse { direction: rtl; } .animora-page .about-grid.reverse > * { direction: ltr; } /* --- SERVICES GRID --- */ .animora-page .services-preview { background: var(--cream); } .animora-page .sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .animora-page .service-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px 26px; transition: all 0.25s; position: relative; overflow: hidden; } .animora-page .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green-main); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .animora-page .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .animora-page .service-card:hover::before { transform: scaleX(1); } .animora-page .service-card h3 { font-size: 1.1rem; margin: 16px 0 10px; color: var(--text-dark); } .animora-page .service-card p { font-size: 0.9rem; color: var(--text-light); margin: 0; } /* --- GALLERY --- */ .animora-page .gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .animora-page .gallery-item { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; position: relative; cursor: pointer; background: var(--cream); } .animora-page .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,61,47,0.75) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 20px; opacity: 0; transition: opacity 0.25s; } .animora-page .gallery-item:hover .overlay, .animora-page .gallery-item:focus-within .overlay { opacity: 1; } .animora-page .overlay-text { color: var(--cream); font-size: 0.9rem; font-weight: 600; } /* --- REVIEWS --- */ .animora-page .reviews-section { background: var(--white); overflow: hidden; } .animora-page .reviews-track-wrap { overflow: hidden; margin-top: 48px; } .animora-page .reviews-track { display: flex; gap: 20px; width: max-content; animation: scrollReviews 40s linear infinite; will-change: transform; } .animora-page .reviews-track:hover { animation-play-state: paused; } @keyframes scrollReviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animora-page .review-card { width: 320px; flex-shrink: 0; background: var(--cream); border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--cream-dark); } .animora-page .review-stars { color: var(--orange); font-size: 0.9rem; margin-bottom: 12px; } .animora-page .review-text { font-size: 0.9rem; color: var(--text-mid); font-style: italic; line-height: 1.7; margin: 0; } .animora-page .review-author { margin-top: 14px; font-size: 0.82rem; font-weight: 600; color: var(--green-main); } /* --- FOUNDER SECTION --- */ .animora-page .founder-section { background: var(--green-dark); padding: 90px 5%; position: relative; overflow: hidden; } .animora-page .founder-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(138,171,111,0.1) 0%, transparent 50%); } .animora-page .founder-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .animora-page .founder-quote { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--cream); line-height: 1.5; margin-bottom: 24px; } .animora-page .founder-quote span { color: var(--orange); } .animora-page .founder-text { color: rgba(247,243,236,0.65); line-height: 1.75; font-size: 0.95rem; margin-bottom: 20px; } .animora-page .founder-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border-radius: var(--radius-lg); overflow: hidden; margin-top: 32px; } .animora-page .fn-item { background: rgba(255,255,255,0.04); padding: 28px 16px; text-align: center; transition: background 0.2s; } .animora-page .fn-item:hover { background: rgba(255,255,255,0.07); } .animora-page .fn-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--orange); } .animora-page .fn-label { font-size: 0.78rem; color: rgba(247,243,236,0.5); margin-top: 4px; line-height: 1.4; } .animora-page .quote-box { margin-top: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 28px; } .animora-page .quote-box.quote-box-tight { background: rgba(232,147,42,0.1); border-color: rgba(232,147,42,0.2); padding: 20px; margin-top: 8px; } .animora-page .quote-text { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: rgba(247,243,236,0.8); font-style: italic; line-height: 1.6; margin: 0; } .animora-page .quote-author { font-size: 0.8rem; color: rgba(247,243,236,0.4); margin-top: 10px; } .animora-page .timeline-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 32px; } .animora-page .timeline { display: flex; flex-direction: column; position: relative; } .animora-page .timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 40px; width: 2px; background: rgba(255,255,255,0.1); } .animora-page .tl-item { display: flex; gap: 20px; padding-bottom: 32px; position: relative; } .animora-page .tl-item:last-child { padding-bottom: 0; } .animora-page .tl-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--green-main); color: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; position: relative; z-index: 1; } .animora-page .tl-body h3 { font-size: 1rem; margin-bottom: 6px; color: var(--cream); } .animora-page .tl-body p { font-size: 0.88rem; color: rgba(247,243,236,0.55); line-height: 1.7; margin: 0; } /* --- LOCATION --- */ .animora-page .location-preview { background: var(--cream); } .animora-page .map-placeholder { border-radius: var(--radius-lg); overflow: hidden; height: 380px; border: 1px solid var(--cream-dark); background: var(--cream); } .animora-page .map-placeholder.map-tall { height: 450px; } /* --- CTA BANNER --- */ .animora-page .cta-banner { background: var(--green-main); padding: 80px 5%; text-align: center; position: relative; overflow: hidden; } .animora-page .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(138,171,111,0.2) 0%, transparent 60%), radial-gradient(circle at 75% 50%, rgba(232,147,42,0.1) 0%, transparent 50%); } .animora-page .cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; } .animora-page .cta-inner .section-title { margin-bottom: 16px; } .animora-page .cta-inner .section-subtitle { margin: 0 auto 32px; } .animora-page .cta-inner .btn { display: inline-flex; } /* --- FOOTER --- */ .animora-page .footer { background: var(--green-dark); color: rgba(247,243,236,0.65); padding: 72px 5% 32px; } .animora-page .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1.4fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .animora-page .footer-brand .brand-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--cream); font-weight: 700; margin-bottom: 0px; } .animora-page .footer-brand .brand-sub { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,243,236,0.45); margin-bottom: 16px; } .animora-page .footer-brand p { font-size: 0.87rem; line-height: 1.7; max-width: 280px; color: rgba(247,243,236,0.55); margin: 0; } .animora-page .footer-col h4 { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); margin: 0 0 20px 0; } .animora-page .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .animora-page .footer-col ul li { list-style: none; font-size: 0.88rem; color: rgba(247,243,236,0.55); } .animora-page .footer-col ul li a { font-size: 0.88rem; color: rgba(247,243,236,0.55); transition: color 0.2s; } .animora-page .footer-col ul li a:hover { color: var(--cream); } /* Footer highlight items (Pet Grooming, Pet Supplies, View All Services) */ .animora-page .footer-col ul li.footer-highlight { margin-top: 6px; } .animora-page .footer-col ul li.footer-highlight a { color: var(--cream); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; } .animora-page .footer-col ul li.footer-highlight a:hover { color: var(--orange); } /* "View All Services" gets a slight separator above */ .animora-page .footer-col ul li.footer-highlight--cta { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: 10px; } .animora-page .footer-col ul li.footer-highlight--cta a { color: var(--cream); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; } .animora-page .footer-col ul li.footer-highlight--cta a:hover { color: var(--orange); } .animora-page .footer-bottom { max-width: 1200px; margin: 28px auto 0; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(247,243,236,0.3); flex-wrap: wrap; gap: 8px; } /* --- PAGE HERO --- */ .animora-page .page-hero { background: var(--green-dark); padding: calc(var(--nav-height) + 60px) 5% 70px; position: relative; overflow: hidden; } .animora-page .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 60% 50%, rgba(138,171,111,0.15) 0%, transparent 60%); } .animora-page .page-hero-content { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .animora-page .page-hero-breadcrumb { font-size: 0.8rem; color: rgba(247,243,236,0.45); margin-bottom: 16px; letter-spacing: 0.04em; } .animora-page .page-hero-breadcrumb a { color: rgba(247,243,236,0.45); transition: color 0.2s; } .animora-page .page-hero-breadcrumb a:hover { color: var(--cream); } .animora-page .page-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--cream); margin-bottom: 16px; } .animora-page .page-hero p { font-size: 1.05rem; color: rgba(247,243,236,0.7); max-width: 580px; line-height: 1.7; margin: 0; } /* --- VALUES (About) --- */ .animora-page .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .animora-page .value-card { background: var(--cream); border-radius: var(--radius-lg); padding: 32px 24px; border: 1px solid var(--cream-dark); } .animora-page .value-card .v-icon { font-size: 1.8rem; margin-bottom: 16px; } .animora-page .value-card h3 { font-size: 1rem; margin-bottom: 8px; } .animora-page .value-card p { font-size: 0.87rem; color: var(--text-light); line-height: 1.7; margin: 0; } /* --- SERVICES PAGE --- */ .animora-page .service-block { margin-bottom: 64px; } .animora-page .service-block:last-child { margin-bottom: 0; } .animora-page .service-full { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .animora-page .service-full.reverse { direction: rtl; } .animora-page .service-full.reverse > * { direction: ltr; } .animora-page .service-h { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 16px; color: var(--text-dark); } .animora-page .service-detail-card { background: var(--cream); border-radius: var(--radius-lg); padding: 28px; } .animora-page .service-detail-card h4 { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 14px; } .animora-page .detail-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .animora-page .detail-list li { list-style: none; display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text-mid); line-height: 1.5; } .animora-page .detail-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-mid); flex-shrink: 0; margin-top: 7px; } .animora-page .service-tag { display: inline-block; background: var(--green-main); color: var(--cream); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 16px; } .animora-page .service-tag.orange { background: var(--orange); } .animora-page .dental-warning { background: rgba(232,147,42,0.08); border: 1px solid rgba(232,147,42,0.2); border-radius: 12px; padding: 18px; margin-top: 18px; } .animora-page .dental-warning h4 { font-family: 'DM Sans', sans-serif; font-size: 0.87rem; color: var(--orange-dark); margin-bottom: 10px; } .animora-page .dental-warning ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .animora-page .dental-warning ul li { list-style: none; font-size: 0.87rem; color: var(--text-mid); display: flex; align-items: center; gap: 8px; } .animora-page .dental-warning ul li::before { content: '⚠'; font-size: 0.75rem; } .animora-page .divider { border: none; border-top: 1px solid var(--border); margin: 0 0 64px 0; } /* --- FACILITIES --- */ .animora-page .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .animora-page .facility-card { background: var(--cream); border-radius: var(--radius-lg); padding: 32px 24px; border: 1px solid var(--cream-dark); transition: all 0.2s; } .animora-page .facility-card:hover { background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-3px); } .animora-page .facility-card h3 { font-size: 1.1rem; margin-bottom: 10px; } .animora-page .facility-card p { font-size: 0.9rem; color: var(--text-light); margin: 0; line-height: 1.7; } /* --- PRODUCTS --- */ .animora-page .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .animora-page .product-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; } .animora-page .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .animora-page .product-card .product-img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream); } .animora-page .product-card .product-body { padding: 22px; } .animora-page .product-card h3 { font-size: 1.05rem; margin-bottom: 8px; } .animora-page .product-card p { font-size: 0.87rem; color: var(--text-light); margin: 0; line-height: 1.6; } /* --- CONTACT --- */ .animora-page .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .animora-page .contact-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); } .animora-page .contact-item:last-child { border-bottom: none; } .animora-page .contact-item.plain-top { border: none; padding: 0 0 20px 0; border-bottom: 1px solid var(--border); } .animora-page .contact-item.plain-bottom { border: none; padding: 20px 0 0 0; } .animora-page .contact-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; } .animora-page .contact-item strong { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); display: block; margin-bottom: 4px; } .animora-page .contact-item p { font-size: 0.93rem; color: var(--text-dark); line-height: 1.6; margin: 0; } /* --- HOURS --- */ .animora-page .hours-card { background: var(--cream); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px; } .animora-page .hours-title { font-size: 1.2rem; margin: 0 0 20px 0; } .animora-page .hours-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cream-dark); font-size: 0.93rem; gap: 12px; } .animora-page .hours-row:last-child { border-bottom: none; } .animora-page .hours-row .day { color: var(--text-mid); font-weight: 500; } .animora-page .hours-row .time { color: var(--text-dark); font-weight: 600; text-align: right; } /* --- WHATSAPP FLOAT --- */ .animora-page .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.45); transition: transform 0.2s, box-shadow 0.2s; } .animora-page .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.55); } .animora-page .wa-float svg { width: 28px; height: 28px; fill: white; } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ /* Tablet (1024px and below) */ @media (max-width: 1024px) { .animora-page .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .animora-page .footer-col:nth-child(4) { grid-column: 1 / -1; margin-top: 16px; } } /* Tablet portrait (900px and below) */ @media (max-width: 900px) { .animora-page .hero-content { grid-template-columns: 1fr; gap: 32px; } .animora-page .hero-visual { display: none; } .animora-page .about-grid, .animora-page .about-grid.reverse { grid-template-columns: 1fr; direction: ltr; gap: 36px; } .animora-page .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .animora-page .footer-col:nth-child(4) { grid-column: auto; margin-top: 0; } .animora-page .contact-grid { grid-template-columns: 1fr; gap: 40px; } .animora-page .founder-grid { grid-template-columns: 1fr; gap: 40px; } .animora-page .service-full, .animora-page .service-full.reverse { grid-template-columns: 1fr; direction: ltr; gap: 28px; } .animora-page .sp-grid { grid-template-columns: repeat(2, 1fr); } .animora-page .features-inner { grid-template-columns: 1fr; } .animora-page .feature-item { border-right: none; border-bottom: 1px solid var(--border); } .animora-page .feature-item:last-child { border-bottom: none; } } /* Mobile (768px and below) */ @media (max-width: 768px) { .animora-page .section { padding: 60px 5%; } .animora-page .founder-section { padding: 60px 5%; } .animora-page .cta-banner { padding: 60px 5%; } .animora-page .page-hero { padding: calc(var(--nav-height) + 40px) 5% 50px; } .animora-page .section-header { margin-bottom: 36px; } .animora-page .gallery-strip { grid-template-columns: repeat(2, 1fr); } .animora-page .map-placeholder { height: 320px; } .animora-page .map-placeholder.map-tall { height: 360px; } } /* Mobile small (680px and below) */ @media (max-width: 680px) { /* Mobile Nav */ .animora-page .nav-links { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(30,61,47,0.98); flex-direction: column; align-items: stretch; padding: 16px; gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); max-height: calc(100vh - var(--nav-height)); overflow-y: auto; } .animora-page .nav-links.open { display: flex; } .animora-page .nav-links li { width: 100%; } .animora-page .nav-links a { display: block; padding: 12px 16px; font-size: 0.95rem; } .animora-page .nav-links .nav-cta a { text-align: center; margin-top: 8px; } .animora-page .nav-toggle { display: flex; } /* Brand smaller on mobile */ .animora-page .nav-brand .brand-name { font-size: 1rem; } .animora-page .nav-brand .brand-sub { font-size: 0.55rem; } .animora-page .nav-brand-icon svg, .animora-page .nav-brand-icon img { width: 40px; height: 40px; } .animora-page .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .animora-page .footer-brand { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; } .animora-page .footer-brand-inner { justify-content: center; } .animora-page .footer-brand > p { max-width: 320px; margin-left: auto; margin-right: auto; } .animora-page .footer-col:nth-child(4) { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; } .animora-page .footer-col:nth-child(4) ul { align-items: center; } .animora-page .footer-hours { align-items: center; } .animora-page .footer-hours-item { justify-content: center; } .animora-page .footer-bottom { flex-direction: column; text-align: center; } .animora-page .hero-stats { gap: 16px; margin-top: 32px; padding-top: 24px; } .animora-page .hero-stat-num { font-size: 1.6rem; } .animora-page .hero-stat-label { font-size: 0.72rem; } .animora-page .hero-stats > div { min-width: 30%; } .animora-page .sp-grid { grid-template-columns: 1fr; } .animora-page .values-grid { grid-template-columns: 1fr; } .animora-page .facilities-grid { grid-template-columns: 1fr; } .animora-page .products-grid { grid-template-columns: 1fr; } .animora-page .founder-numbers { grid-template-columns: 1fr; } .animora-page .timeline-card { padding: 24px 20px; } .animora-page .service-detail-card { padding: 22px; } .animora-page .hours-card { padding: 22px; } .animora-page .review-card { width: 280px; padding: 22px; } .animora-page .hero-actions .btn { width: 100%; } .animora-page .btn-group .btn { width: 100%; } .animora-page .wa-float { bottom: 16px; right: 16px; width: 52px; height: 52px; } .animora-page .wa-float svg { width: 24px; height: 24px; } } /* Mobile xs (480px and below) */ @media (max-width: 480px) { .animora-page .hero { padding: calc(var(--nav-height) + 24px) 5% 56px; min-height: auto; } .animora-page .hero-title { font-size: 1.9rem; } .animora-page .hero-text { font-size: 0.95rem; } .animora-page .btn { padding: 12px 22px; font-size: 0.85rem; } .animora-page .gallery-strip { grid-template-columns: 1fr; gap: 12px; } .animora-page .navbar { padding: 0 4%; } .animora-page .section { padding: 50px 5%; } .animora-page .features-bar .feature-item { padding: 22px 18px; } .animora-page .page-hero h1 { font-size: 1.7rem; } .animora-page .page-hero p { font-size: 0.95rem; } .animora-page .section-title { font-size: clamp(1.5rem, 5vw, 2rem); } .animora-page .container, .animora-page .features-inner, .animora-page .founder-grid, .animora-page .footer-grid { padding: 0; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .animora-page *, .animora-page *::before, .animora-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animora-page .reviews-track { animation: none !important; } } /* Focus styles for accessibility */ .animora-page a:focus-visible, .animora-page button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ============================================ PRESERVED ORIGINAL STYLES (non-Animora pages) ============================================ */ .ast-article-inner { background-color: #fff; } .main-header-menu .sub-menu .menu-link { font-size: 14px; font-weight: 400; } .main-header-menu .sub-menu .sub-menu .menu-link { font-size: 13px; } .main-header-menu .sub-menu .menu-link:hover { background-color: #f2f2f2; } #ez-toc-container { background: none; border: 0px solid #aaa; border-radius: 0px; box-shadow: none; display: table; margin: 25px 0 35px; padding: 0; position: relative; width: 100%; } #ez-toc-container nav { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); padding: 30px; border: 1px solid #f1f1f1; border-radius: 15px; } .ez-toc-title-container .ez-toc-title-toggle { display: none; } .ez-toc-title-container { display: table; width: auto; background: #f1f1f1; padding: 7px 25px; margin-left: 30px; border-radius: 10px 10px 0 0; } .ez-toc-title-container p { font-size: 16px !important; font-weight: bold; } #ez-toc-container ul { display: flex; flex-wrap: wrap; gap: 40px; row-gap: 10px; } div#ez-toc-container ul li { font-size: 100%; list-style: none; overflow: visible; width: 100%; padding: 10px 0; border-bottom: 1px solid #f1f1f1; } div#ez-toc-container ul li:last-child { border: none; } #ez-toc-container a { color: var(--contrast) !important; box-shadow: none; text-decoration: none; text-shadow: none; display: inline-flex; align-items: stretch; flex-wrap: nowrap; gap: 10px; font-size: 15.5px; line-height: 1.35em; font-weight: bold !important; } #ez-toc-container ul.ez-toc-list-level-3 { gap: 2px; padding: 8px 0; } #ez-toc-container ul.ez-toc-list-level-3 li { border: none; padding: 0; } #ez-toc-container ul.ez-toc-list-level-3 li a { font-weight: normal !important; } .ez-toc-counter nav ul li a::before { content: counters(item, ".", decimal); counter-increment: item; flex-grow: 0; flex-shrink: 0; margin-right: .2em; width: 25px; height: 25px; background: #FF7244; border-radius: 50%; color: #fff; display: inline-flex; justify-content: center; align-items: center; font-size: 13px; } #ez-toc-container ul.ez-toc-list-level-3 li a::before { background: none; color: #000; margin-left: 8px; } @media (min-width: 993px) { .ast-right-sidebar #primary { padding-right: 30px; } .ast-right-sidebar #secondary { padding-left: 30px; } } @media (max-width: 810px) { #primary, #secondary { margin: 0; } }