/* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans", Arial, sans-serif; } :root{ --accent: peru; --muted: #666; --container: 1100px; } /* Dark theme overrides (apply by adding `dark-mode` class to the ) */ .dark-mode{ --accent: #ffb74d; --muted: #cfcfcf; background: linear-gradient(180deg,#0b0f12 0%, #111417 100%); color: #e6e6e6; } .dark-mode .site-header{ background:#071018; border-bottom-color: rgba(255,255,255,0.04); } .dark-mode .site-main-title{ color: var(--accent); } .dark-mode .site-subtitle, .dark-mode .founder-caption, .dark-mode .gallery-item figcaption{ color: var(--muted); } .dark-mode .navbar{ background: linear-gradient(90deg,#3a2209,#5b3210); box-shadow:none } .dark-mode .nav-links ul li a{ color:#fff } .dark-mode .btn{ background:#1d1f22; color:#fff; border:1px solid rgba(255,255,255,0.06) } .dark-mode .btn.outline{ background:transparent; color:#ffdca8; border:1px solid rgba(255,255,255,0.08) } .dark-mode .about, .dark-mode .sanskar-preview, .dark-mode .founder-text{ background: rgba(20,20,20,0.6); box-shadow:0 6px 18px rgba(0,0,0,0.6); color:#e6e6e6 } .dark-mode .gallery-item img{ box-shadow:0 10px 30px rgba(0,0,0,0.6); filter:brightness(0.95) } .dark-mode .footer{ background: linear-gradient(90deg,#2b1607,#3a1e08); color:#fff } .dark-mode h2,h3,h4{ color:#ffd59a } .dark-mode .btn-highlight{ background: linear-gradient(90deg,#ff6f00,#d84315); color:#fff; box-shadow:0 10px 30px rgba(216,67,21,0.22) } .container{ max-width: var(--container); margin: 0 auto; padding: 0 16px; } /* Header */ .site-header{ background: #fff; border-bottom: 3px solid #f2e4d6; } .header-top{ display:flex; gap:16px; align-items:flex-start; padding:12px 0; position:relative; } .site-logo{ width:80px; height:80px; object-fit:contain; position:absolute; left:0; top:0; } .site-title h1{ font-size:20px; } .site-title .host{ color:var(--muted); font-size:14px; } /* Slim header style for centered Hindi title */ .slim-header .header-top{ display:flex; flex-direction:column; justify-content:center; align-items:center; padding:18px 0; position:relative; } .site-main-title{ font-family: 'Noto Serif Devanagari', serif; font-size:72px; color: var(--accent); margin:0; letter-spacing:1px; line-height:1 } .site-subtitle{ font-size:14px; color: var(--muted); margin:6px 0 0 0; letter-spacing:0.5px; font-weight:400 } @media (max-width:900px){ .site-main-title{ font-size:48px } } @media (max-width:520px){ .site-main-title{ font-size:36px } } /* Founder / Swami Dayanand section */ .founder-container{ display:flex; gap:24px; align-items:center; padding:22px 0; } .founder-figure{ margin:0; flex:0 0 320px; } .founder-photo{ width:320px; max-width:100%; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.12); } .founder-caption{ text-align:center; margin-top:8px; font-weight:700; color:var(--muted) } .founder-text{ flex:1; background:rgba(255,255,255,0.8); padding:16px; border-radius:10px } .founder-text h3{ margin-top:0; font-size:22px; color:var(--accent) } .founder-text p{ line-height:1.6; color:#333 } @media (max-width:900px){ .founder-container{ flex-direction:column; align-items:center } .founder-figure{ flex:0 0 auto } .founder-text{ width:100% } } /* Navbar */ .navbar{ background:var(--accent); } .navdiv{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; } .logo a{ color:#fff; font-size:28px; text-decoration:none; font-weight:700; } .nav-links ul{ list-style:none; } .nav-links ul li{ display:inline-block; margin-right:18px; } .nav-links ul li a{ color:#fff; text-decoration:none; font-weight:600; } .nav-actions{ display:flex; gap:8px; } .btn{ background:#fff; color:var(--accent); padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:700; } .btn.outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.6); } /* --- Visual polish and modern styling --- */ body{ /* warmer saffron / temple-like gradient */ background: linear-gradient(180deg, #fff8e1 0%, #ffe6b3 40%, #fff8f0 100%); color: #222; background-attachment: fixed; } /* Global typography */ body{ font-family: 'Noto Sans', 'Noto Sans Devanagari', Arial, sans-serif; } h1,h2,h3,h4{ font-family: 'Noto Serif Devanagari', serif } *{ transition: all 180ms ease-in-out } /* navigation improvements */ .navbar{ position: sticky; top:0; z-index:40; backdrop-filter: blur(6px); } .nav-links{ display:block } .nav-links ul{ margin:0; padding:0 } .nav-links.open{ display:block } .nav-toggle{ display:none; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; padding:6px 8px; width:40px; height:40px; align-items:center; justify-content:center; flex-shrink:0 } @media (max-width:900px){ .nav-links{ display:none; position:fixed; top:60px; left:0; right:0; width:100%; background:#fff; z-index:50; box-shadow:0 8px 20px rgba(0,0,0,0.12); overflow-y:auto; max-height:calc(100vh - 60px) } .nav-links.open{ display:block } .nav-links ul{ padding:16px } .nav-links ul li{ display:block; margin-right:0; margin-bottom:2px } .nav-links ul li a{ display:block; padding:12px 16px; color:var(--accent); font-weight:600 } .nav-toggle{ display:inline-flex; margin-left:auto } } /* Make nav more attractive */ .navbar{ background: linear-gradient(90deg, rgba(205,133,63,0.95), rgba(224,111,60,0.95)); box-shadow: 0 4px 10px rgba(0,0,0,0.06); } .nav-links ul li a{ padding:6px 10px; border-radius:6px; transition:background .18s ease, transform .12s ease; } .nav-links ul li a:hover{ background: rgba(255,255,255,0.12); transform:translateY(-2px); } .nav-actions .btn{ box-shadow: 0 3px 8px rgba(0,0,0,0.12) } /* Logo / AUM symbol styling */ .logo a.aum-symbol{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background: #fff; color: var(--accent); border-radius:50%; font-size:28px; font-weight:700; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,0.12); font-family: 'Noto Serif Devanagari', serif } /* Hero decor */ .hero{ background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2)), url('logo-transformed.webp'); background-size:cover; background-position:center; padding:36px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); } .hero-left h2{ font-size:28px; margin-bottom:6px } .lead{ font-size:15px } /* Cards and sections */ .service-grid article{ border-left:6px solid rgba(255,152,0,0.9); background:linear-gradient(180deg,#fff,#fffaf5); } .about, .sanskar-preview{ background: rgba(255,255,255,0.7); padding:18px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.04); } /* Buttons */ .btn{ padding:10px 14px; border-radius:8px; display:inline-block } .btn.primary{ background:var(--accent); color:#fff; border:none } /* Highlight variant for important buttons (e.g., पूर्ण गैलरी खोलें) */ .btn-highlight{ background: linear-gradient(90deg,#ffb74d,#ff9800); color:#000000; border:0; box-shadow:0 8px 20px rgba(255,152,0,0.18); padding:10px 16px; font-weight:800 } .btn-highlight:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(255,152,0,0.22) } .btn-highlight:focus{ outline:3px solid rgba(255,152,0,0.14); outline-offset:3px } /* Footer polish */ .footer{ background: linear-gradient(90deg,#c57a33,#b7632a); padding:36px 0 18px; color:#fff; } .footer a{ color:#fff; text-decoration:none } /* Improved footer layout */ .footer-container{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:24px; align-items:start; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .footer-section h4{ margin-bottom:10px; color:#fff } .footer-section p, .footer-section ul{ color: #fff; opacity:0.95 } .footer-section ul{ list-style:none; padding:0 } .footer-section ul li{ margin:8px 0 } .footer-section ul li a{ color: #fff; opacity:0.95 } .footer .contact-item{ display:flex; gap:8px; align-items:center } .footer-bottom{ text-align:center; margin-top:18px; font-size:0.95rem; opacity:0.95; } @media (max-width:900px){ .footer-container{ grid-template-columns: 1fr; text-align:center } .footer-section{ padding:10px 0 } } /* Small screens tweak */ @media (max-width:900px){ .nav-actions{ display:none } .logo a.aum-symbol{ width:48px; height:48px; font-size:24px } } /* Hero */ .hero{ display:flex; gap:24px; align-items:center; padding:28px 0; } .hero-left{ flex:1 } .hero-right{ width:320px } .portrait{ width:100%; border-radius:8px; object-fit:cover } .lead{ color:var(--muted); margin:8px 0 16px } /* Services */ .service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px } .service-grid article{ background:#fff5e9; padding:12px; border-radius:8px } /* About & Sanskar */ /*.about, .sanskar-preview{ padding:20px 0 }*/ /* About section: side-by-side content + gallery */ .about-grid{ display:flex; gap:20px; align-items:flex-start } .about-left{ flex:1 } .about-right{ flex:0 0 360px } .about-right h4{ margin-top:0; color:var(--accent); font-size:18px } .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px } .gallery-item{ background:transparent; border-radius:8px; overflow:hidden; text-align:center } .gallery-item img{ width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,0.08) } .gallery-item figcaption{ font-size:13px; color:var(--muted); margin-top:6px } @media (max-width:900px){ .about-grid{ flex-direction:column } .about-right{ width:100%; flex:0 0 auto } .gallery-grid{ grid-template-columns:repeat(3,1fr) } } @media (max-width:520px){ .gallery-grid{ grid-template-columns:repeat(2,1fr) } } /* utility to hide embedded gallery */ .hidden{ display:none !important } /* Embedded gallery tweaks */ .embedded-gallery{ transition: all 220ms ease; } /* Full gallery page styles */ .full-gallery{ padding:28px 16px } .full-gallery .gallery-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px } .full-gallery .gallery-item img{ max-height:240px; object-fit:cover } .full-gallery .gallery-item figcaption{ font-size:14px } /* Contact */ .contact{ padding:20px 0 } /* Footer */ .footer{ background:var(--accent); color:#fff; padding:20px 0; margin-top:24px } .footer-container{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start } .footer-section{ flex:1 } .footer-section h4{ text-transform:uppercase; margin-bottom:10px } .social-icons{ list-style:none; display:flex; gap:10px } /* Utilities */ .text-center{ text-align:center } /* Responsive */ @media (max-width:900px){ .hero{ flex-direction:column } .nav-links ul li{ display:block; margin:8px 0 } .footer-container{ flex-direction:column; align-items:center } } img{ max-width:100%; height:auto; display:block } /* Headings and section spacing */ h2{ font-size:28px; color:#4b2e04; margin-bottom:8px } h3{ font-size:20px; color:#7a3f12 } section{ padding:22px 0 } /* Card hover */ .service-grid article:hover{ transform:translateY(-6px); box-shadow:0 8px 24px rgba(0,0,0,0.08) } /* Back to top button */ #back-to-top{ position:fixed; right:18px; bottom:18px; background:var(--accent); color:#070000; border:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,0.18); cursor:pointer; opacity:0; pointer-events:none } #back-to-top.visible{ opacity:1; pointer-events:auto } /* Small polish */ .container{ padding-left:20px; padding-right:20px } /* Sanskar gallery */ /*.sanskar-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:12px }*/ /*.sanskar-item{ display:flex; gap:12px; align-items:flex-start; background:#000000; padding:10px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.06) }*/ /*.sanskar-item img{ width:100px; height:auto; flex:0 0 100px; border-radius:6px }*/ /*.sanskar-text{ font-size:14px; color:#333 }*/ /*@media (max-width:520px){*/ /* .sanskar-item{ flex-direction:row; align-items:center }*/ /* .sanskar-item img{ width:80px }*/ }