/* ========================================================== AI TOOLS HINDI HUB – Modern, mobile‑first stylesheet ---------------------------------------------------------- • Fluid typography (clamp) • CSS variables for light / dark themes • Gradient hero overlay • Card hover lift & subtle glow • Button ripple effect • Accessible focus outlines ========================================================== */ /* -------------------- 1️⃣ Theme variables (updated background) -------------------- */ :root { /* Typography */ --font-sans: 'Inter', 'Noto Sans Devanagari', sans-serif; /* Colours – Light theme (fallback solid colour) */ --bg: #e0f7ff; /* light blue background */ --text: #212529; --muted: #6c757d; --primary: #0d9488; --secondary: #f59e0b; --card-bg: #fff; --card-shadow: 0 2px 8px rgba(0,0,0,.07); --code-bg: #f5f5f5; /* Dark‑mode overrides */ --bg-dark: #111; --text-dark: #e9ecef; --muted-dark: #bbb; --primary-dark: #5eead4; --secondary-dark: #fbbf24; --card-bg-dark: #1a1a1a; --card-shadow-dark:0 2px 8px rgba(0,0,0,.15); --code-bg-dark: #2a2a2a; /* UI basics */ --radius: .5rem; --transition: .2s ease; } /* Apply dark‑mode when is present */ [data-theme="dark"] { --bg: var(--bg-dark); --text: var(--text-dark); --muted: var(--muted-dark); --primary: var(--primary-dark); --secondary: var(--secondary-dark); --card-bg: var(--card-bg-dark); --card-shadow: var(--card-shadow-dark); --code-bg: var(--code-bg-dark); } /* -------------------- 2️⃣ New Background (solid light‑blue) -------------------- */ /* Light‑mode solid background (light blue) */ body { /* Use the updated --bg variable (light blue) */ background: var(--bg); /* Remove previous gradient & texture layers */ /* background-image: none; <-- not needed */ } /* Dark‑mode gradient remains unchanged */ [data-theme="dark"] body { background: #111; /* fallback for old browsers */ background-image: linear-gradient( 135deg, #2c3e50 0%, /* deep midnight blue‑gray */ #0a192f 100% /* slightly lighter navy */ ), repeating-linear-gradient( 45deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 2px ); background-attachment: fixed; background-blend-mode: overlay; } /* -------------------- 3️⃣ Reset & base -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } /* Fluid base font‑size for better scalability */ body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; } /* Focus outline for keyboard accessibility */ a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid var(--secondary); outline-offset: 2px; } /* -------------------- 4️⃣ Helper utilities (enhanced) -------------------- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 1rem; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .hidden { display: none !important; } .text-center { text-align: center; } /* Navigation utilities – remove default list styling and space items */ .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; } .nav-menu li { margin: 0; } .nav-menu a { color: #fff; text-decoration: none; font-weight: 500; transition: color var(--transition), opacity var(--transition); } .nav-menu a:hover, .nav-menu a:focus { opacity: 0.85; } /* -------------------- 5️⃣ Header (modern refinements) -------------------- */ /* Style the navigation links inside the sticky header */ .site-header nav a { color: #fff; margin-left: 1rem; text-decoration: none; font-weight: 500; transition: opacity var(--transition); } .site-header nav a:hover, .site-header nav a:focus { opacity: 0.85; } /* Header controls (theme / language toggle) – make them feel like modern icon buttons */ .site-header .header-controls button { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; margin-left: .5rem; transition: opacity var(--transition); } .site-header .header-controls button:hover, .site-header .header-controls button:focus { opacity: 0.85; } /* Slight visual tweak for the logo icon */ .site-header .logo i { margin-right: .4rem; } /* -------------------- 6️⃣ Section titles (modern look) -------------------- */ .section-title { font-size: 2rem; margin-bottom: 1.5rem; text-align: center; color: var(--primary); } /* -------------------- 6️⃣ Hero (gradient overlay) -------------------- */ .hero { background: url('../images/hero.jpg') center/cover no-repeat; position: relative; text-align: center; color: #fff; padding: 4rem 1rem; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.15)); } .hero .container { position: relative; z-index: 1; } .hero-title { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .5rem; } .hero-sub { font-size: clamp(1.1rem, 4vw, 1.4rem); margin-bottom: 1.5rem; } .hero-cta .btn { margin: 0 .5rem; } /* -------------------- 7️⃣ Carousel (home) -------------------- */ #hero-carousel { position: relative; max-width: 800px; margin: 2rem auto 0; height: 300px; overflow: hidden; } #hero-carousel .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--transition); } #hero-carousel .slide.active { opacity: 1; } #hero-carousel img { width: 100%; height: 100%; object-fit: contain; } #carousel-dots { text-align: center; margin-top: .8rem; } #carousel-dots .dot { display: inline-block; width: .9rem; height: .9rem; margin: 0 .3rem; background: rgba(255,255,255,.6); border-radius: 50%; cursor: pointer; transition: background var(--transition); } #carousel-dots .dot.active, #carousel-dots .dot:hover { background: var(--secondary); } /* -------------------- 8️⃣ Buttons (primary accent) -------------------- */ .btn { display: inline-block; padding: .5rem 1rem; border: none; border-radius: var(--radius); cursor: pointer; font-weight: 600; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .btn.primary { background: var(--primary); color: #fff; } .btn.secondary { background: var(--secondary); color: #fff; } .btn.small { padding: .3rem .8rem; font-size: .9rem; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } /* Ripple effect on click */ .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,.3); border-radius: 50%; transform: translate(-50%,-50%); transition: width .4s ease, height .4s ease; } .btn:active::after { width: 200px; height: 200px; } /* -------------------- 9️⃣ Grids (slightly larger gap for a cleaner layout) -------------------- */ .grid { display: grid; gap: 2rem; /* increased from 1.5rem for a more spacious feel */ } .tools-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .prompt-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1px)); } .mini-tools-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* -------------------- 10️⃣ Cards (spacing tweaks) -------------------- */ .card { background: var(--card-bg); border-radius: var(--radius); padding: 1.5rem; /* added extra padding */ margin-bottom: 1.5rem; /* consistent vertical spacing */ box-shadow: var(--card-shadow); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,0,0,.12); } /* Card header for tool pages – align image and text */ .tool-header { display: flex; align-items: center; gap: 1rem; } .tool-header img { max-width: 120px; border-radius: var(--radius); } /* -------------------- 11️⃣ Tabs & FAQ -------------------- */ .faq-list dt { font-weight: 600; margin-top: .8rem; } .faq-list dd { margin-left: 1rem; } .tabs { display: flex; border-bottom: 2px solid var(--muted); } .tab { padding: .5rem 1rem; cursor: pointer; transition: color var(--transition); } .tab.active { border-bottom: 2px solid var(--primary); font-weight: 600; } /* -------------------- 12️⃣ Quiz -------------------- */ .quiz-question { margin-bottom: 1.5rem; } .quiz-option { display: block; margin: .3rem 0; } .quiz-option input { margin-right: .4rem; } /* -------------------- 13️⃣ Blog list -------------------- */ .blog-list .blog-post { display: flex; flex-direction: column; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); } .blog-post img { width: 100%; height: auto; } .post-content { padding: 1rem; } .post-content h3 { margin: 0 0 .5rem; } .post-content .meta { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; } .post-content p { margin: 0 0 .5rem; } .post-content .btn { margin-top: .5rem; } /* -------------------- 14️⃣ Footer (centered) -------------------- */ .site-footer { background: #222; color: #ddd; padding: 1rem 0; font-size: .9rem; text-align: center; /* center footer content */ } .site-footer a { color: #ddd; text-decoration: none; } .social-icons a { margin-left: .5rem; color: #ddd; } /* -------------------- 15️⃣ Responsive tweaks -------------------- */ @media (max-width: 768px) { .hero-title { font-size: clamp(1.6rem, 6vw, 2.2rem); } .hero-sub { font-size: clamp(1rem, 4vw, 1.2rem); } .blog-post { flex-direction: column; } } /* -------------------- 16️⃣ Dark‑mode overrides -------------------- */ [data-theme="dark"] .card, [data-theme="dark"] .blog-post { background: var(--card-bg); color: var(--text); } [data-theme="dark"] .prompt-code { background: var(--code-bg); } [data-theme="dark"] .site-footer { background: #000; } /* -------------------- 12️⃣ About page styling (already present) -------------------- */ .about-page { padding: 2rem 0; background: var(--bg); color: var(--text); } .about-content { max-width: 800px; margin: 0 auto; } .about-content h2 { margin-top: 1.2rem; font-size: 1.5rem; font-weight: 600; } .about-content p, .about-content ul { margin-bottom: 1rem; } /* -------------------- 13️⃣ Blog card styling (new) -------------------- */ .blog-card { background: var(--card-bg); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; box-shadow: var(--card-shadow); } /* “Read more” links look like buttons */ .blog-card .read-more { display: inline-block; margin-top: .5rem; } /* -------------------- 14️⃣ Quiz container styling (new) -------------------- */ .quiz-container { /* No extra styles needed – inherits from .card */ } /* ========================================================== END OF STYLESHEET ========================================================== */