.qv-tools-article, .qv-tools-article * { box-sizing: border-box; } .single-blog-post-title { display: none; } .qv-tools-article { --qv-green: #123f35; --qv-dark: #092f28; --qv-gold: #ddb42b; --qv-gold-dark: #9b7100; --qv-cream: #f8f6ef; --qv-line: #e7e1d2; --qv-text: #293b36; --qv-muted: #63736e; --qv-white: #ffffff; width: 100%; color: var(--qv-text); font-family: inherit; font-size: 17px; line-height: 1.82; } .qv-tools-article > * { max-width: 940px; margin-left: auto; margin-right: auto; } .qv-tools-article h1 { margin: 0 auto 25px; color: var(--qv-dark); font-size: clamp(35px, 5.2vw, 59px); line-height: 1.1; letter-spacing: -.035em; } .qv-tools-article h2 { margin-top: 58px; margin-bottom: 18px; color: var(--qv-dark); font-size: clamp(28px, 3.7vw, 42px); line-height: 1.18; letter-spacing: -.025em; } .qv-tools-article h3 { margin-top: 29px; margin-bottom: 10px; color: var(--qv-green); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.35; } .qv-tools-article p { margin-top: 0; margin-bottom: 20px; } .qv-tools-article ul, .qv-tools-article ol { margin: 0 0 25px; padding-left: 25px; } .qv-tools-article li { margin-bottom: 9px; } .qv-tools-article strong { color: var(--qv-dark); } .qv-tools-article a { color: #0c6855; text-decoration-thickness: 1px; text-underline-offset: 3px; } .qv-tools-article a:hover { color: var(--qv-gold-dark); } .qv-tools-article a:focus-visible, .qv-tools-article summary:focus-visible { outline: 3px solid rgba(221,180,43,.55); outline-offset: 4px; } .qv-tools-hero { margin-top: 0; margin-bottom: 27px; overflow: hidden; border: 1px solid var(--qv-line); border-radius: 24px; box-shadow: 0 22px 55px rgba(18,63,53,.12); } .qv-tools-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .qv-tools-lead { color: #304640; font-size: clamp(18px, 2vw, 21px); line-height: 1.75; } .qv-tools-answer { margin-top: 33px; padding: clamp(24px, 4vw, 36px); background: radial-gradient(circle at 100% 0, rgba(221,180,43,.20), transparent 38%), linear-gradient(145deg, var(--qv-green), var(--qv-dark)); color: rgba(255,255,255,.88); border-radius: 22px; box-shadow: 0 18px 48px rgba(9,47,40,.15); } .qv-tools-answer h2 { margin: 0 0 13px; color: #fff; font-size: clamp(25px, 3.3vw, 34px); } .qv-tools-answer p { margin-bottom: 0; } .qv-tools-answer strong { color: #fff4c8; } .qv-tools-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 27px; margin-bottom: 43px; } .qv-tools-nav a { display: flex; align-items: center; min-height: 67px; padding: 14px 16px; background: #fff; color: var(--qv-green); border: 1px solid var(--qv-line); border-radius: 14px; font-size: 14px; font-weight: 800; line-height: 1.35; text-decoration: none; box-shadow: 0 7px 20px rgba(18,63,53,.05); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .qv-tools-nav a:hover { transform: translateY(-2px); border-color: var(--qv-gold); box-shadow: 0 11px 26px rgba(18,63,53,.09); } .qv-five-method { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 28px 0 24px; } .qv-five-method article { position: relative; min-height: 178px; padding: 21px 15px 17px; background: var(--qv-cream); border: 1px solid var(--qv-line); border-radius: 16px; text-align: center; } .qv-five-method span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 13px; background: var(--qv-gold); color: var(--qv-dark); border-radius: 50%; font-size: 14px; font-weight: 900; } .qv-five-method h3 { margin: 0 0 7px; font-size: 17px; } .qv-five-method p { margin: 0; color: var(--qv-muted); font-size: 13px; line-height: 1.55; } .qv-principle-note, .qv-research-note, .qv-safety-note { margin-top: 23px; padding: 21px 23px; background: rgba(221,180,43,.12); border: 1px solid rgba(221,180,43,.45); border-left: 5px solid var(--qv-gold); border-radius: 14px; } .qv-principle-note p, .qv-research-note p, .qv-safety-note p { margin: 0; } .qv-primary-mushaf { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0; margin: 30px 0; overflow: hidden; border: 1px solid var(--qv-line); border-radius: 22px; box-shadow: 0 16px 44px rgba(18,63,53,.09); } .qv-primary-mushaf__title { display: flex; flex-direction: column; justify-content: center; padding: clamp(27px, 4vw, 40px); background: var(--qv-green); color: #fff; } .qv-primary-mushaf__title span { color: var(--qv-gold); font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .qv-primary-mushaf__title h3 { margin: 9px 0 0; color: #fff; font-size: clamp(26px, 3vw, 35px); } .qv-primary-mushaf__content { padding: clamp(27px, 4vw, 40px); background: #fff; } .qv-primary-mushaf__content p:last-child { margin-bottom: 0; } .qv-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; } .qv-tool-card { padding: 25px; background: #fff; border: 1px solid var(--qv-line); border-radius: 18px; box-shadow: 0 10px 30px rgba(18,63,53,.06); } .qv-tool-card__number { display: inline-grid; place-items: center; width: 41px; height: 41px; margin-bottom: 12px; color: var(--qv-dark); background: var(--qv-gold); border-radius: 12px; font-size: 13px; font-weight: 900; } .qv-tool-card h3 { margin: 0 0 9px; font-size: 21px; } .qv-tool-card p { margin-bottom: 13px; font-size: 15px; line-height: 1.7; } .qv-tool-card p:last-child { margin-bottom: 0; } .qv-tool-label { display: inline-block; margin-top: 4px; padding: 5px 9px; color: var(--qv-green); background: var(--qv-cream); border: 1px solid var(--qv-line); border-radius: 999px; font-size: 12px; font-weight: 800; } .qv-table-wrap { margin: 27px 0; overflow-x: auto; border: 1px solid var(--qv-line); border-radius: 17px; box-shadow: 0 9px 28px rgba(18,63,53,.06); } .qv-tools-article table { width: 100%; min-width: 690px; border-collapse: collapse; background: #fff; } .qv-tools-article caption { padding: 17px 19px; color: var(--qv-dark); background: var(--qv-cream); font-weight: 900; text-align: left; } .qv-tools-article th, .qv-tools-article td { padding: 15px 17px; border-bottom: 1px solid var(--qv-line); text-align: left; vertical-align: top; font-size: 14px; line-height: 1.55; } .qv-tools-article th { color: #fff; background: var(--qv-green); font-weight: 800; } .qv-tools-article tr:last-child td { border-bottom: 0; } .qv-tools-article tbody tr:nth-child(even) td { background: #fbfaf6; } .qv-sheet-demo { margin: 28px 0; overflow: hidden; background: #fff; border: 1px solid #dfe8e4; border-radius: 20px; box-shadow: 0 18px 50px rgba(18,63,53,.10); } .qv-sheet-demo__head { display: flex; justify-content: space-between; gap: 20px; padding: 20px 23px; color: #fff; background: var(--qv-green); } .qv-sheet-demo__head strong { color: #fff; } .qv-sheet-demo__head span { color: #f5dc86; font-size: 13px; font-weight: 800; } .qv-sheet-demo .qv-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; } .qv-sheet-status { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .qv-sheet-status--done { color: #0b5847; background: #dff4eb; } .qv-sheet-status--review { color: #7a5700; background: #fff0bd; } .qv-sheet-status--weak { color: #8a3131; background: #fbe1e1; } .qv-teacher-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin: 29px 0; } .qv-teacher-panel article { padding: clamp(24px, 4vw, 34px); border-radius: 19px; } .qv-teacher-panel article:first-child { color: rgba(255,255,255,.88); background: var(--qv-green); } .qv-teacher-panel article:first-child h3, .qv-teacher-panel article:first-child strong { color: #fff; } .qv-teacher-panel article:last-child { background: var(--qv-cream); border: 1px solid var(--qv-line); } .qv-teacher-panel h3 { margin-top: 0; } .qv-teacher-panel p:last-child { margin-bottom: 0; } .qv-routine { counter-reset: qv-routine; display: grid; gap: 13px; margin: 27px 0; } .qv-routine article { counter-increment: qv-routine; display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 19px; background: #fff; border: 1px solid var(--qv-line); border-radius: 15px; } .qv-routine article::before { content: counter(qv-routine, decimal-leading-zero); display: grid; place-items: center; width: 52px; height: 52px; color: var(--qv-dark); background: var(--qv-gold); border-radius: 14px; font-size: 14px; font-weight: 900; } .qv-routine h3 { margin: 1px 0 5px; font-size: 19px; } .qv-routine p { margin: 0; color: var(--qv-muted); font-size: 14px; line-height: 1.65; } .qv-details-group { display: grid; gap: 12px; margin: 26px 0; } .qv-tools-article details { background: #fff; border: 1px solid var(--qv-line); border-radius: 14px; overflow: hidden; } .qv-tools-article summary { position: relative; padding: 18px 50px 18px 20px; color: var(--qv-green); cursor: pointer; font-weight: 850; line-height: 1.45; list-style: none; } .qv-tools-article summary::-webkit-details-marker { display: none; } .qv-tools-article summary::after { content: "+"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--qv-gold-dark); font-size: 23px; font-weight: 700; } .qv-tools-article details[open] summary::after { content: "−"; } .qv-tools-article details[open] summary { background: var(--qv-cream); } .qv-detail-body { padding: 4px 20px 20px; } .qv-detail-body p:last-child { margin-bottom: 0; } .qv-final-cta { margin-top: 55px; padding: clamp(29px, 5vw, 48px); color: rgba(255,255,255,.88); background: radial-gradient(circle at 0 100%, rgba(221,180,43,.22), transparent 38%), linear-gradient(145deg, var(--qv-green), var(--qv-dark)); border-radius: 24px; text-align: center; box-shadow: 0 22px 60px rgba(9,47,40,.18); } .qv-final-cta h2 { margin: 0 0 14px; color: #fff; } .qv-final-cta p { max-width: 740px; margin: 0 auto 24px; } .qv-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; } .qv-cta-buttons a { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 19px; border-radius: 999px; font-size: 14px; font-weight: 850; text-decoration: none; } .qv-cta-buttons a:first-child { color: var(--qv-dark); background: var(--qv-gold); } .qv-cta-buttons a:nth-child(2) { color: var(--qv-green); background: #fff; } .qv-cta-buttons a:nth-child(3) { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.55); } .qv-source-note { margin-top: 30px; padding-top: 20px; color: var(--qv-muted); border-top: 1px solid var(--qv-line); font-size: 13px; line-height: 1.7; } @media (max-width: 860px) { .qv-tools-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-five-method { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-five-method article:last-child { grid-column: 1 / -1; } .qv-primary-mushaf, .qv-teacher-panel { grid-template-columns: 1fr; } } @media (max-width: 620px) { .qv-tools-article { font-size: 16px; line-height: 1.75; } .qv-tools-article h2 { margin-top: 46px; } .qv-tools-hero, .qv-final-cta { border-radius: 17px; } .qv-tools-nav, .qv-tool-grid { grid-template-columns: 1fr; } .qv-five-method { grid-template-columns: 1fr; } .qv-five-method article:last-child { grid-column: auto; } .qv-routine article { grid-template-columns: 43px 1fr; gap: 12px; padding: 16px; } .qv-routine article::before { width: 43px; height: 43px; } .qv-sheet-demo__head { flex-direction: column; gap: 3px; } .qv-cta-buttons { flex-direction: column; } } .qv-tools-article article { margin: 0 !important; }