/** * Tirupati Sure Homestays - Complete CSS * Fixed Layout & Design System */ /* =========================================== CSS VARIABLES =========================================== */:root{--saffron:#FF7900;--saffron-dark:#E56D00;--saffron-light:#FFA347;--gold:#FFC107;--gold-light:#FFD54F;--maroon:#800020;--maroon-dark:#5C0018;--cream:#FFF8F0;--white:#FFFFFF;--gray-50:#FAFAFA;--gray-100:#F5F5F5;--gray-200:#E5E5E5;--gray-300:#D4D4D4;--gray-400:#A3A3A3;--gray-500:#737373;--gray-600:#525252;--gray-700:#404040;--gray-800:#262626;--gray-900:#171717;--success:#22C55E;--success-light:#DCFCE7;--warning:#F59E0B;--error:#EF4444;--green-600:#16A34A;--red-600:#DC2626;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1);}/* =========================================== RESET & BASE =========================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--text-base);line-height:1.6;color:var(--gray-900);background:var(--cream);min-height:100vh;}img{max-width:100%;height:auto;display:block;}a{color:inherit;text-decoration:none;}ul,ol{list-style:none;}h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.2;}/* =========================================== LAYOUT - CONTAINER =========================================== */ .container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-4);}/* =========================================== HEADER & NAVIGATION - FIXED =========================================== */ .header{position:sticky;top:0;z-index:1000;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,0.08);}.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:var(--space-6);}.nav__logo{display:flex;align-items:center;gap:var(--space-3);font-weight:700;color:var(--saffron);font-size:var(--text-lg);flex-shrink:0;}.nav__logo img{width:40px;height:40px;}.nav__logo-text{white-space:nowrap;}.nav__menu{display:flex;align-items:center;gap:var(--space-6);flex:1;justify-content:flex-end;}.nav__list{display:flex;align-items:center;gap:var(--space-1);}.nav__item{position:relative;}.nav__link{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);color:var(--gray-700);font-weight:500;font-size:var(--text-sm);border-radius:var(--radius-md);transition:all 0.2s ease;}.nav__link:hover,.nav__link--active{color:var(--saffron);background:rgba(255,121,0,0.08);}.nav__link--active{position:relative;}.nav__link--active::after{content:'';position:absolute;bottom:-2px;left:var(--space-3);right:var(--space-3);height:2px;background:var(--saffron);border-radius:2px;}.nav__dropdown{position:absolute;top:100%;left:0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);min-width:200px;padding:var(--space-2);opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s ease;z-index:100;}.nav__item--dropdown:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0);}.nav__dropdown li a{display:block;padding:var(--space-3) var(--space-4);color:var(--gray-700);border-radius:var(--radius-md);transition:all 0.2s ease;font-size:var(--text-sm);}.nav__dropdown li a:hover{background:var(--cream);color:var(--saffron);}.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:8px;}.nav__toggle span{display:block;width:24px;height:2px;background:var(--gray-900);transition:all 0.3s ease;}/* =========================================== BUTTONS =========================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:600;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease;text-decoration:none;white-space:nowrap;}.btn--primary{background:linear-gradient(135deg,var(--saffron),var(--gold));color:var(--white);box-shadow:0 4px 15px rgba(255,121,0,0.3);}.btn--primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,121,0,0.4);}.btn--secondary{background:var(--white);color:var(--gray-700);border:1px solid var(--gray-300);}.btn--secondary:hover{border-color:var(--saffron);color:var(--saffron);}.btn--whatsapp{background:#25d366;color:var(--white);}.btn--whatsapp:hover{background:#128c7e;}.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);}.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);}/* =========================================== HERO SECTION =========================================== */ .hero{position:relative;padding:var(--space-16) 0;background:linear-gradient(135deg,var(--maroon) 0%,#5a0015 50%,var(--saffron) 100%);color:var(--white);overflow:hidden;}.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}.hero__content{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto;}.hero__badge{display:inline-block;padding:var(--space-2) var(--space-4);background:rgba(255,255,255,0.15);border-radius:var(--radius-full);font-size:var(--text-sm);margin-bottom:var(--space-6);}.hero__title{font-size:var(--text-5xl);margin-bottom:var(--space-4);line-height:1.1;}.hero__subtitle{font-size:var(--text-xl);opacity:0.9;margin-bottom:var(--space-8);max-width:700px;margin-left:auto;margin-right:auto;}.text-gradient{background:linear-gradient(135deg,var(--gold),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.hero__search{max-width:800px;margin:0 auto var(--space-8);}.search-box{display:flex;background:var(--white);border-radius:var(--radius-2xl);padding:var(--space-2);box-shadow:0 20px 60px rgba(0,0,0,0.3);}.search-box__field{flex:1;padding:var(--space-3) var(--space-4);}.search-box__field label{display:block;font-size:var(--text-xs);color:var(--gray-500);margin-bottom:var(--space-1);}.search-box__field select{width:100%;border:none;font-size:var(--text-base);color:var(--gray-900);background:transparent;cursor:pointer;outline:none;}.search-box__btn{margin:var(--space-1);}.hero__stats{display:flex;justify-content:center;gap:var(--space-10);flex-wrap:wrap;}.stat{text-align:center;}.stat__number{display:block;font-size:var(--text-3xl);font-weight:700;}.stat__label{font-size:var(--text-sm);opacity:0.8;}/* =========================================== SECTIONS =========================================== */ .section{padding:var(--space-16) 0;}.section-header{text-align:center;margin-bottom:var(--space-10);}.section-badge{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--cream);color:var(--saffron);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3);}.section-title{font-size:var(--text-3xl);margin-bottom:var(--space-3);}.section-subtitle{font-size:var(--text-lg);color:var(--gray-600);max-width:600px;margin:0 auto;}/* =========================================== GRID SYSTEM =========================================== */ .grid{display:grid;gap:var(--space-6);}.grid--2{grid-template-columns:repeat(2,1fr);}.grid--3{grid-template-columns:repeat(3,1fr);}.grid--4{grid-template-columns:repeat(4,1fr);}.homestays-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}/* =========================================== CARDS =========================================== */ .card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:all 0.3s ease;}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);}.card__image{position:relative;overflow:hidden;}.card__image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}.card:hover .card__image img{transform:scale(1.05);}.card__badge{position:absolute;top:var(--space-3);left:var(--space-3);padding:var(--space-1) var(--space-3);background:var(--success);color:var(--white);font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-full);display:flex;align-items:center;gap:var(--space-1);z-index:2;}.card__category{position:absolute;top:var(--space-3);right:var(--space-3);padding:var(--space-1) var(--space-3);background:var(--saffron);color:var(--white);font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-full);z-index:2;}.card__price{position:absolute;bottom:var(--space-3);right:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--white);color:var(--gray-900);font-weight:700;border-radius:var(--radius-full);box-shadow:var(--shadow-md);z-index:2;}.card__body{padding:var(--space-5);}.card__rating{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);}.card__rating-score{font-weight:700;color:var(--saffron);}.card__rating-count{font-size:var(--text-sm);color:var(--gray-500);}.card__title{font-size:var(--text-lg);margin-bottom:var(--space-2);}.card__title a{color:inherit;transition:color 0.2s ease;}.card__title a:hover{color:var(--saffron);}.card__location{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--gray-500);margin-bottom:var(--space-3);}.card__meta{display:flex;gap:var(--space-4);font-size:var(--text-sm);color:var(--gray-600);}.card__excerpt{font-size:var(--text-sm);color:var(--gray-600);margin-bottom:var(--space-3);}.card__link{font-size:var(--text-sm);font-weight:600;color:var(--saffron);}.card--featured{border:2px solid var(--gold);position:relative;}.card--featured::before{content:'⭐ TOP RATED';position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:var(--space-1) var(--space-4);background:linear-gradient(135deg,var(--gold),var(--saffron));color:var(--white);font-size:var(--text-xs);font-weight:700;border-radius:var(--radius-full);z-index:10;white-space:nowrap;}/* =========================================== STAR RATING =========================================== */ .stars{display:inline-flex;gap:2px;}.stars svg{flex-shrink:0;}/* =========================================== FEATURE CARDS =========================================== */ .feature-card{text-align:center;padding:var(--space-6);background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all 0.3s ease;}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);}.feature-icon{font-size:2.5rem;margin-bottom:var(--space-4);}.feature-title{font-size:var(--text-lg);margin-bottom:var(--space-2);}.feature-desc{font-size:var(--text-sm);color:var(--gray-600);}/* =========================================== TESTIMONIALS =========================================== */ .testimonial-card{padding:var(--space-6);background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);}.testimonial-rating{margin-bottom:var(--space-4);}.testimonial-text{color:var(--gray-700);line-height:1.7;font-style:italic;margin-bottom:var(--space-4);}.testimonial-author{display:flex;align-items:center;gap:var(--space-3);}.testimonial-avatar{width:48px;height:48px;background:var(--saffron);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;}.testimonial-name{font-weight:600;display:block;}.testimonial-location{font-size:var(--text-sm);color:var(--gray-500);}/* =========================================== CTA SECTION =========================================== */ .cta-section{text-align:center;padding:var(--space-12);background:linear-gradient(135deg,var(--cream),var(--white));border-radius:var(--radius-2xl);border:1px solid var(--gray-200);}.cta-section__title{font-size:var(--text-2xl);margin-bottom:var(--space-3);}.cta-section__description{color:var(--gray-600);margin-bottom:var(--space-6);max-width:500px;margin-left:auto;margin-right:auto;}/* =========================================== FAQ ACCORDION =========================================== */ .faq-list{display:grid;gap:var(--space-3);}.faq-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;}.faq-item[open]{border-color:var(--saffron);}.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);font-weight:600;cursor:pointer;list-style:none;transition:background 0.2s ease;}.faq-question::-webkit-details-marker{display:none;}.faq-question::after{content:'+';font-size:var(--text-xl);color:var(--saffron);}.faq-item[open] .faq-question::after{content:'−';}.faq-question:hover{background:var(--gray-50);}.faq-answer{padding:0 var(--space-5) var(--space-4);color:var(--gray-700);line-height:1.7;}/* =========================================== BREADCRUMB =========================================== */ .breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);flex-wrap:wrap;}.breadcrumb a{opacity:0.8;transition:opacity 0.2s;}.breadcrumb a:hover{opacity:1;}/* =========================================== FILTER BUTTONS =========================================== */ .filter-btn{padding:var(--space-2) var(--space-4);background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);transition:all 0.2s ease;}.filter-btn:hover,.filter-btn.active{background:var(--saffron);color:var(--white);border-color:var(--saffron);}/* =========================================== FOOTER =========================================== */ .footer{background:var(--gray-900);color:var(--white);padding:var(--space-16) 0 var(--space-8);}.footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--space-8);margin-bottom:var(--space-8);}.footer__brand{max-width:280px;}.footer__logo{display:flex;align-items:center;gap:var(--space-3);font-weight:700;color:var(--saffron);font-size:var(--text-lg);margin-bottom:var(--space-4);}.footer__logo img{width:40px;height:40px;}.footer__desc{font-size:var(--text-sm);color:var(--gray-400);margin-bottom:var(--space-4);line-height:1.7;}.footer__contact{display:flex;flex-direction:column;gap:var(--space-2);}.footer__contact a{font-size:var(--text-sm);color:var(--gray-400);transition:color 0.2s ease;}.footer__contact a:hover{color:var(--saffron);}.footer__links h4{font-size:var(--text-base);margin-bottom:var(--space-4);color:var(--white);}.footer__links ul{display:flex;flex-direction:column;gap:var(--space-2);}.footer__links a{font-size:var(--text-sm);color:var(--gray-400);transition:color 0.2s ease;}.footer__links a:hover{color:var(--saffron);}.footer__trust{display:flex;justify-content:center;gap:var(--space-6);padding:var(--space-6) 0;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:var(--space-8);flex-wrap:wrap;}.trust-item{font-size:var(--text-sm);opacity:0.9;}.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-sm);color:var(--gray-500);}.footer__legal{display:flex;gap:var(--space-6);}.footer__legal a{color:var(--gray-500);transition:color 0.2s ease;}.footer__legal a:hover{color:var(--saffron);}/* =========================================== FLOATING WHATSAPP =========================================== */ .floating-whatsapp{position:fixed;bottom:24px;right:24px;z-index:100;display:flex;align-items:center;gap:8px;padding:14px 20px;background:#25d366;color:var(--white);border-radius:50px;font-weight:600;text-decoration:none;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:transform 0.3s ease;}.floating-whatsapp:hover{transform:scale(1.05);}/* =========================================== RESPONSIVE DESIGN =========================================== */ @media (max-width:1024px){.nav__toggle{display:flex;}.nav__menu{position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;background:var(--white);padding:80px var(--space-6) var(--space-6);box-shadow:var(--shadow-xl);transition:right 0.3s ease;flex-direction:column;align-items:stretch;gap:0;z-index:999;}.nav__menu.is-open{right:0;}.nav__list{flex-direction:column;align-items:stretch;gap:0;}.nav__link{padding:var(--space-4);border-bottom:1px solid var(--gray-100);border-radius:0;}.nav__dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--gray-50);display:none;padding:0;}.nav__item--dropdown:hover .nav__dropdown,.nav__item--dropdown.is-open .nav__dropdown{display:block;}.btn--whatsapp{width:100%;margin-top:var(--space-4);justify-content:center;}.grid--3,.grid--4,.homestays-grid,.features-grid,.testimonials-grid{grid-template-columns:repeat(2,1fr);}.footer__grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:768px){.hero__title{font-size:var(--text-3xl);}.hero__stats{gap:var(--space-6);}.stat__number{font-size:var(--text-2xl);}.search-box{flex-direction:column;gap:var(--space-2);padding:var(--space-4);}.search-box__field{padding:var(--space-2) 0;border-bottom:1px solid var(--gray-200);}.search-box__btn{width:100%;margin-top:var(--space-2);}.grid--2,.grid--3,.grid--4,.homestays-grid,.features-grid,.testimonials-grid{grid-template-columns:1fr;}.footer__grid{grid-template-columns:1fr;text-align:center;}.footer__brand{max-width:100%;}.footer__logo{justify-content:center;}.footer__contact{align-items:center;}.footer__bottom{flex-direction:column;text-align:center;}.footer__legal{justify-content:center;}.floating-whatsapp{padding:14px;border-radius:50%;}.floating-whatsapp .whatsapp-text{display:none;}}.nav__overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:998;}.nav__overlay.is-visible{opacity:1;visibility:visible;}.nav__toggle.is-active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}.nav__toggle.is-active span:nth-child(2){opacity:0;}.nav__toggle.is-active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}/* =============================================== ACCESSIBILITY - SKIP LINK =============================================== */ .skip-link{position:absolute;top:-40px;left:0;background:#FF7900;color:white;padding:12px 20px;z-index:100000;font-weight:600;border-radius:0 0 8px 0;transition:top 0.3s ease;}.skip-link:focus{top:0;outline:3px solid #1a1a2e;outline-offset:2px;}/* =============================================== PRINT STYLES =============================================== */ @media print{.header,.nav,.nav__toggle,.footer,.chatbot-trigger,.chatbot-window,.wa-channel-float,.wa-popup-overlay,.push-prompt,.social-share,.skip-link,.btn,.cta-section,.newsletter-section,.search-box,.filters-form,button,iframe{display:none !important;}body{font-size:12pt;line-height:1.5;color:#000;background:#fff;}a[href^="http"]:after{content:" (" attr(href) ")";font-size:0.8em;color:#666;}h1,h2,h3{page-break-after:avoid;}img{max-width:100%;page-break-inside:avoid;}.card,.container,.section{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid;}}