/* ========================================================================== 99 अनोखे लाइफ-हैक्स और हिडन टेक ट्रिक्स: वेबसाइट CSS -------------------------------------------------------------------------- • सारे नियम .eb-scope के भीतर हैं, इसलिए आपकी साइट की मौजूदा डिज़ाइन से नहीं टकराएँगे। • रंग बदलने के लिए सिर्फ़ नीचे .eb-scope वाले --eb-* वेरिएबल बदलिए। • फॉन्ट: Google Fonts का "Noto Sans Devanagari" और "Poppins" (HTML के में लिंक है)। ऑफलाइन/बिना फॉन्ट के भी सिस्टम का हिंदी फॉन्ट चलेगा। ========================================================================== */ .eb-scope { --eb-navy: #0f1f3d; --eb-navy-2: #0a1630; --eb-gold: #ffb703; --eb-gold-soft: #ffd166; --eb-ink: #1b2233; --eb-muted: #5b6577; --eb-line: #e3e7ef; --eb-soft: #f4f6fb; --eb-radius: 16px; font-family: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 17px; line-height: 1.7; color: var(--eb-ink); -webkit-text-size-adjust: 100%; } .eb-scope *, .eb-scope *::before, .eb-scope *::after { box-sizing: border-box; } .eb-scope img { max-width: 100%; height: auto; display: block; } .eb-scope h1, .eb-scope h2, .eb-scope h3, .eb-scope h4, .eb-scope p, .eb-scope ul, .eb-scope ol { margin: 0; padding: 0; } .eb-scope ul, .eb-scope ol { list-style: none; } .eb-scope a { color: inherit; } .eb-scope [hidden] { display: none !important; } .eb-scope a:focus-visible, .eb-scope button:focus-visible, .eb-scope summary:focus-visible, .eb-scope input:focus-visible { outline: 3px solid var(--eb-gold); outline-offset: 3px; } /* ---- भागों के रंग ---- */ .eb-scope .eb-p1 { --c: #2563eb; --d: #1e40af; --t: #eaf1ff; } .eb-scope .eb-p2 { --c: #059669; --d: #047857; --t: #e4f6ee; } .eb-scope .eb-p3 { --c: #7c3aed; --d: #5b21b6; --t: #f0eafe; } .eb-scope .eb-p4 { --c: #dc2626; --d: #b91c1c; --t: #fdebea; } .eb-scope .eb-p5 { --c: #ea580c; --d: #c2410c; --t: #fff0e3; } .eb-scope .eb-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .eb-scope .eb-narrow { max-width: 780px; } /* ---- बटन ---- */ .eb-scope .eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .eb-scope .eb-btn:hover { transform: translateY(-2px); } .eb-scope .eb-buy { background: var(--eb-gold); color: var(--eb-navy-2); box-shadow: 0 10px 28px rgba(255, 183, 3, .35); } .eb-scope .eb-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); } .eb-scope .eb-ghost.dark { color: var(--eb-navy); border-color: var(--eb-navy); } /* ---- हीरो ---- */ .eb-scope .eb-hero { position: relative; overflow: hidden; color: #fff; padding: 48px 0 72px; background: linear-gradient(165deg, #0a1630 0%, #11274f 55%, #1a3a72 100%); } .eb-scope .eb-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 183, 3, .35), rgba(255, 183, 3, 0) 70%); } .eb-scope .eb-hero::after { content: ""; position: absolute; width: 480px; height: 480px; left: -190px; bottom: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, .28), rgba(56, 189, 248, 0) 70%); } .eb-scope .eb-hero-grid { position: relative; z-index: 1; display: grid; gap: 44px; align-items: center; grid-template-columns: 1fr; } @media (min-width: 860px) { .eb-scope .eb-hero-grid { grid-template-columns: 1.15fr .85fr; } } .eb-scope .eb-tag { display: inline-block; color: var(--eb-gold-soft); border: 1.5px solid rgba(255, 209, 102, .7); border-radius: 999px; padding: 3px 16px; font-size: .9rem; } .eb-scope .eb-h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 700; line-height: 1.15; margin: 18px 0 10px; } .eb-scope .eb-h1 b { color: var(--eb-gold); font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; } .eb-scope .eb-sub { color: var(--eb-gold-soft); font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 1.35rem); margin-bottom: 14px; } .eb-scope .eb-lead { color: #dbe5fb; max-width: 36rem; margin-bottom: 18px; } .eb-scope .eb-checks { margin: 0 0 26px; } .eb-scope .eb-checks li { position: relative; padding-left: 42px; margin: 0 0 12px; line-height: 1.5; } .eb-scope .eb-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 27px; height: 27px; border-radius: 50%; background: var(--eb-gold); } .eb-scope .eb-checks li::after { content: ""; position: absolute; left: 9.5px; top: 5px; width: 7px; height: 13px; border: solid var(--eb-navy-2); border-width: 0 3px 3px 0; transform: rotate(45deg); } .eb-scope .eb-cta-row { display: flex; flex-wrap: wrap; gap: 12px; } .eb-scope .eb-fine { margin-top: 14px; font-size: .9rem; color: #b9c6e4; } .eb-scope .eb-hero-media { position: relative; text-align: center; padding-bottom: 20px; } .eb-scope .eb-hero-media img { width: min(310px, 72%); margin: 0 auto; border-radius: 8px; transform: rotate(3deg); box-shadow: 0 34px 70px rgba(0, 0, 0, .55); } .eb-scope .eb-badge { position: absolute; left: 50%; margin-left: -172px; bottom: -6px; width: 124px; height: 124px; border-radius: 50%; background: var(--eb-gold); color: var(--eb-navy-2); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); font-weight: 700; box-shadow: 0 12px 34px rgba(0, 0, 0, .45); } .eb-scope .eb-badge small { font-size: 1rem; line-height: 1; } .eb-scope .eb-badge b { font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; font-size: 2.2rem; line-height: 1.1; } @media (max-width: 859px) { .eb-scope .eb-badge { margin-left: -150px; width: 104px; height: 104px; } .eb-scope .eb-badge b { font-size: 1.8rem; } } /* ---- आँकड़ों की पट्टी ---- */ .eb-scope .eb-stats { background: #fff; border-bottom: 1px solid var(--eb-line); } .eb-scope .eb-stats .eb-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } @media (min-width: 720px) { .eb-scope .eb-stats .eb-wrap { grid-template-columns: repeat(4, 1fr); } } .eb-scope .eb-stat { text-align: center; padding: 20px 8px; } .eb-scope .eb-stat b { display: block; font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; font-size: 2.2rem; color: var(--eb-navy); line-height: 1.2; } .eb-scope .eb-stat span { color: var(--eb-muted); font-size: .95rem; } /* ---- सेक्शन ---- */ .eb-scope .eb-section { padding: 60px 0; } .eb-scope .eb-section.alt { background: var(--eb-soft); } .eb-scope .eb-h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 700; color: var(--eb-navy); line-height: 1.3; margin-bottom: 8px; } .eb-scope .eb-h2::after { content: ""; display: block; width: 72px; height: 6px; border-radius: 4px; background: var(--eb-gold); margin-top: 12px; } .eb-scope .eb-kicker { color: var(--eb-muted); margin: 14px 0 28px; max-width: 46rem; } .eb-scope .eb-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .eb-scope .eb-card { background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 22px; } .eb-scope .eb-card .eb-ico { font-size: 2rem; line-height: 1; margin-bottom: 10px; } .eb-scope .eb-card h3 { font-size: 1.15rem; color: var(--eb-navy); margin-bottom: 6px; } .eb-scope .eb-card p { color: #3a4358; font-size: .98rem; } /* ---- भागों के कार्ड ---- */ .eb-scope .eb-parts { display: grid; gap: 16px; } .eb-scope .eb-partcard { display: flex; overflow: hidden; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); background: #fff; } .eb-scope .eb-partno { flex: 0 0 84px; background: var(--c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .eb-scope .eb-partno b { font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; font-size: 1.9rem; line-height: 1; } .eb-scope .eb-partno span { font-size: 1.6rem; line-height: 1; } .eb-scope .eb-partbody { padding: 16px 18px; } .eb-scope .eb-partbody h3 { font-size: 1.15rem; color: var(--d); line-height: 1.35; } .eb-scope .eb-partbody small { display: block; color: var(--eb-muted); margin: 2px 0 10px; } .eb-scope .eb-chip { display: inline-block; background: var(--t); color: var(--d); border-radius: 999px; padding: 2px 12px; font-size: .88rem; margin: 0 6px 6px 0; } .eb-scope .eb-bonus { margin-top: 18px; background: var(--eb-navy); color: #fff; border-radius: var(--eb-radius); padding: 16px 20px; } .eb-scope .eb-bonus b { color: var(--eb-gold-soft); } /* ---- दो कॉलम / सूची ---- */ .eb-scope .eb-two { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 780px) { .eb-scope .eb-two { grid-template-columns: 1fr 1fr; } } .eb-scope .eb-list li { position: relative; padding-left: 26px; margin-bottom: 8px; } .eb-scope .eb-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 10px; border-radius: 50%; background: var(--eb-gold); } .eb-scope .eb-list.no li::before { background: #ef6f5e; } /* ---- FAQ ---- */ .eb-scope .eb-faq details { background: #fff; border: 1px solid var(--eb-line); border-radius: 12px; padding: 4px 18px; margin-bottom: 10px; } .eb-scope .eb-faq summary { cursor: pointer; font-weight: 700; color: var(--eb-navy); padding: 12px 0; list-style: none; position: relative; padding-right: 30px; } .eb-scope .eb-faq summary::-webkit-details-marker { display: none; } .eb-scope .eb-faq summary::after { content: "+"; position: absolute; right: 2px; top: 8px; font-size: 1.5rem; line-height: 1.2; color: var(--eb-gold); } .eb-scope .eb-faq details[open] summary::after { content: "\2212"; } .eb-scope .eb-faq p { padding: 0 0 14px; color: #3a4358; } /* ---- खरीद का बॉक्स ---- */ .eb-scope .eb-buybox { background: linear-gradient(165deg, #0a1630 0%, #11274f 100%); color: #fff; text-align: center; padding: 64px 0; } .eb-scope .eb-buybox .eb-h2 { color: #fff; } .eb-scope .eb-buybox .eb-h2::after { margin-left: auto; margin-right: auto; } .eb-scope .eb-price { font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: clamp(3rem, 12vw, 4.6rem); color: var(--eb-gold); line-height: 1.1; margin: 18px 0 4px; } .eb-scope .eb-price small { font-size: 1.1rem; color: #dbe5fb; font-family: 'Noto Sans Devanagari', sans-serif; margin-left: 8px; } .eb-scope .eb-steps3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 26px auto 28px; max-width: 820px; text-align: left; } .eb-scope .eb-steps3 li { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 14px 16px 14px 56px; position: relative; } .eb-scope .eb-steps3 li::before { counter-increment: eb3; content: counter(eb3); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--eb-gold); color: var(--eb-navy-2); font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; } .eb-scope .eb-steps3 { counter-reset: eb3; } /* ---- फुटर ---- */ .eb-scope .eb-foot { background: var(--eb-navy-2); color: #b9c6e4; font-size: .88rem; padding: 26px 0; } .eb-scope .eb-foot p { margin-bottom: 8px; } @media (max-width: 719px) { .eb-scope .eb-foot { padding-bottom: 96px; } } /* ---- चिपकी हुई (sticky) खरीद पट्टी: सिर्फ़ मोबाइल ---- */ .eb-scope .eb-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--eb-navy); color: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); transform: translateY(100%); transition: transform .25s ease; } .eb-scope .eb-sticky.is-on { transform: none; } .eb-scope .eb-sticky b { color: var(--eb-gold); font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; } .eb-scope .eb-sticky .eb-btn { padding: 10px 20px; font-size: 1rem; } @media (max-width: 719px) { .eb-scope .eb-sticky { display: flex; } } /* ---- हैक कार्ड (सैंपल और पूरी किताब) ---- */ .eb-scope .eb-hack { background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 22px; margin: 0 0 22px; scroll-margin-top: 92px; } .eb-scope .eb-hack-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .eb-scope .eb-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif; font-weight: 700; } .eb-scope .eb-partlabel { font-size: .8rem; color: var(--d); font-weight: 700; letter-spacing: .01em; } .eb-scope .eb-hack-title { font-size: clamp(1.15rem, 3.6vw, 1.45rem); line-height: 1.4; color: var(--eb-navy); } .eb-scope .eb-blk { border-radius: 10px; padding: 12px 16px; margin: 10px 0; } .eb-scope .eb-blk p { margin: 0; } .eb-scope .eb-lbl { font-weight: 700; font-size: .92rem; margin-bottom: 4px; } .eb-scope .eb-problem { background: #fff3f1; border-left: 5px solid #ef6f5e; } .eb-scope .eb-problem .eb-lbl { color: #b5382a; } .eb-scope .eb-trick { background: #eaf2ff; border-left: 5px solid #3b82f6; } .eb-scope .eb-trick .eb-lbl { color: #1e4fb8; } .eb-scope .eb-steps { background: #fff; border: 1px solid #dde3ee; border-left: 5px solid var(--c); } .eb-scope .eb-steps .eb-lbl { color: var(--d); } .eb-scope .eb-steps ol { counter-reset: eb-s; } .eb-scope .eb-steps li { position: relative; padding: 0 0 0 36px; margin: 0 0 10px; counter-increment: eb-s; } .eb-scope .eb-steps li::before { content: counter(eb-s); position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: .8rem; font-weight: 700; line-height: 24px; text-align: center; font-family: 'Poppins', sans-serif; } .eb-scope .eb-tip { background: #fff8df; border-left: 5px solid #f2b705; } .eb-scope .eb-tip .eb-lbl { color: #8a5d00; } .eb-scope .eb-k { font-family: 'Poppins', 'Noto Sans Devanagari', monospace; font-size: .86em; background: #eef1f8; color: #1f3b78; border: 1px solid #cfd7ea; border-radius: 5px; padding: 0 6px; word-break: break-word; } .eb-scope .eb-ref { color: #1d4ed8; font-weight: 700; } /* ---- पूरी किताब का पेज ---- */ .eb-scope.eb-book { background: var(--eb-soft); } .eb-scope .eb-bookhead { background: linear-gradient(165deg, #0a1630 0%, #11274f 55%, #1a3a72 100%); color: #fff; padding: 40px 0 34px; } .eb-scope .eb-bookhead h1 { font-size: clamp(1.7rem, 6vw, 2.8rem); line-height: 1.25; } .eb-scope .eb-bookhead h1 b { color: var(--eb-gold); font-family: 'Poppins', sans-serif; } .eb-scope .eb-bookhead p { color: #dbe5fb; margin-top: 8px; } .eb-scope .eb-bar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--eb-line); box-shadow: 0 4px 14px rgba(15, 31, 61, .06); padding: 10px 0; } .eb-scope .eb-bar .eb-wrap { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; } .eb-scope .eb-search { flex: 1 1 220px; min-width: 0; border: 1.5px solid var(--eb-line); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .98rem; color: var(--eb-ink); background: #fff; } .eb-scope .eb-pill { border: 1.5px solid var(--eb-line); background: #fff; color: var(--eb-navy); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .88rem; cursor: pointer; } .eb-scope .eb-pill[aria-pressed="true"] { background: var(--eb-navy); color: #fff; border-color: var(--eb-navy); } .eb-scope .eb-count { color: var(--eb-muted); font-size: .88rem; margin-left: auto; } @media (max-width: 719px) { .eb-scope .eb-bar { position: static; } .eb-scope .eb-count { margin-left: 0; width: 100%; } } .eb-scope .eb-bookmain { padding: 28px 0 48px; } .eb-scope .eb-intro { background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 6px 20px; margin-bottom: 22px; } .eb-scope .eb-intro summary { cursor: pointer; font-weight: 700; color: var(--eb-navy); padding: 12px 0; } .eb-scope .eb-intro p { margin: 0 0 12px; } .eb-scope .eb-bonus-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 18px 0 30px; } .eb-scope .eb-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--eb-line); } .eb-scope .eb-checklist input { width: 20px; height: 20px; margin-top: 5px; flex: 0 0 auto; accent-color: var(--eb-navy); } .eb-scope .eb-tablewrap { overflow-x: auto; margin: 14px 0 24px; } .eb-scope table.eb-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .95rem; } .eb-scope table.eb-table th { background: var(--eb-navy); color: #fff; text-align: left; padding: 10px 12px; } .eb-scope table.eb-table td { padding: 10px 12px; border-bottom: 1px solid var(--eb-line); vertical-align: top; } .eb-scope table.eb-table td:first-child { font-weight: 700; color: var(--eb-navy); width: 45%; } .eb-scope .eb-h2.plain { margin-top: 34px; } .eb-scope .eb-top { display: inline-block; margin: 20px 0 0; color: var(--eb-navy); font-weight: 700; } .eb-scope .eb-cta-box { background: var(--eb-navy); color: #fff; border-radius: var(--eb-radius); padding: 28px 22px; text-align: center; margin: 30px 0; } .eb-scope .eb-cta-box h2 { font-size: 1.6rem; margin-bottom: 8px; } .eb-scope .eb-cta-box p { color: #dbe5fb; margin-bottom: 16px; } /* ---- कम-गति और प्रिंट ---- */ @media (prefers-reduced-motion: reduce) { .eb-scope * { transition: none !important; animation: none !important; } } @media print { .eb-scope .eb-bar, .eb-scope .eb-sticky, .eb-scope .eb-top, .eb-scope .eb-cta-box { display: none !important; } .eb-scope .eb-hack { break-inside: avoid; border-color: #999; } }