/* * ╔══════════════════════════════════════════════════════════════╗ * evid-genesis-fix.css | evidyarthi.in * Genesis Child Theme Conflict Shield — v1.0 * * PROBLEM * ─────── * Your Genesis child theme (custom.css) uses broad global CSS * selectors — h1, h2, h3, table, th, td, li, li:before, a:link, * .entry-content li — that bleed into .evid-wp post content and * break the design system components. * * SOLUTION * ──────── * This file undoes every conflict by re-scoping or overriding * ONLY inside .evid-wp. It does NOT change any theme behaviour * outside the wrapper. Load it LAST — after both custom.css * and evid-custom.css. * * LOAD ORDER IN WordPress (functions.php) * ─────────────────────────────────────── * wp_enqueue_style( 'genesis-child', ... ); // automatic * wp_enqueue_style( 'evid-custom', ... ); // your design system * wp_enqueue_style( 'evid-genesis-fix', get_stylesheet_directory_uri() * . '/evid-genesis-fix.css', * ['evid-custom'], '1.0' ); // THIS FILE — load last * * Or via WordPress Customizer → Additional CSS (paste at the end). * * CONFLICTS FIXED (8 rules from custom.css) * ────────────────────────────────────────── * 1. li:before / .entry-content li:before { content: none !important } * → kills ev-list bullets, timeline dots, numbered circles * * 2. .content h2 { color:white !important; background-image:radial-gradient; * box-shadow; text-shadow; text-transform:capitalize; * text-align:center; padding:10px 14px; border-radius:6px } * → makes every ev-h2 a white-on-blue gradient banner * * 3. h1 { font-family:"Raleway"; font-weight:300; font-size:40px; color:#080808 } * → wrong font/weight on ev-h1 inside hero * * 4. .entry-header h1::before / ::after (blue decorative lines) * → unwanted underline drawn under ev-h1 * * 5. table/th/td global styles (Arial font, light-blue header, grey borders) * → overwrites ev-table navy header, correct borders, warm stripes * * 6. .content p a:link { font-weight:bold; color:#006EB6 !important } * → forces bold blue on every link inside dark components * * 7. .entry-content li { display:list-item; margin:0 0 0 1.5em; position:static } * .entry-content li:before { content:none !important } * .entry-content li:after { content:none } * → breaks ev-list flex layout, kills all decorative pseudo-elements * * 8. .content h3 / .entry-content h3 { clear:both } * .entry-content p { clear:both } * → clear:both inside flex/grid containers breaks component layout * ╚══════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────── FIX 1 li:before / .entry-content li:before { content:none !important } ────────────────────────────────────────────────────────────── SOURCE IN custom.css: li:before { content: none; } .entry-content li:before { content: none !important; ... opacity: 0; } .entry-content li:after { content: none; } .entry-content li:hover:before { opacity: 0; } WHY IT BREAKS: Every component that draws a decorative mark via ::before or ::after on a child element is silently erased — ev-list diamond bullets, timeline dots, numbered circles, section-head gold underline (::after on a div, but the broad rule still stacks with the cascade). FIX: Restore content for each affected component inside .evid-wp. Use !important to beat the !important source rule. ───────────────────────────────────────────────────────────── */ /* ev-list — diamond ◆ bullet */ .evid-wp .ev-list li::before { content: '◆' !important; color: var(--c-gold, #C8870A) !important; font-size: 10px !important; flex-shrink: 0 !important; margin-top: 6px !important; /* reset any bleed from .entry-content li:before */ background: none !important; position: static !important; animation: none !important; filter: none !important; opacity: 1 !important; border: none !important; padding: 0 !important; width: auto !important; height: auto !important; top: auto !important; left: auto !important; z-index: auto !important; } /* ev-list.list-numbered — auto-numbered circles */ .evid-wp .ev-list.list-numbered li::before { content: counter(ev-li) !important; counter-increment: ev-li !important; background: var(--c-navy, #1B3A6B) !important; color: #fff !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; font-size: 11px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-top: 2px !important; position: static !important; animation: none !important; filter: none !important; opacity: 1 !important; padding: 0 !important; } /* ev-tl-item — timeline dots (these are divs, not li, but we guard anyway) */ .evid-wp .ev-tl-item::before { content: '' !important; position: absolute !important; left: -28px !important; top: 50% !important; transform: translateY(-50%) !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: var(--c-gold, #C8870A) !important; border: 3px solid var(--c-bg, #F9F5EE) !important; box-shadow: 0 0 0 2px var(--c-gold, #C8870A) !important; z-index: 1 !important; animation: none !important; filter: none !important; opacity: 1 !important; margin: 0 !important; } .evid-wp .ev-tl-item.tl-navy::before { background: var(--c-navy, #1B3A6B) !important; box-shadow: 0 0 0 2px var(--c-navy, #1B3A6B) !important; } .evid-wp .ev-tl-item.tl-green::before { background: var(--c-green, #1A5C35) !important; box-shadow: 0 0 0 2px var(--c-green, #1A5C35) !important; } /* ev-section-head — ensure positioned container + bottom border intact */ .evid-wp .ev-section-head { position: relative !important; display: flex !important; align-items: center !important; gap: 14px !important; border-bottom: 2px solid var(--c-border, #DDD0B8) !important; padding-bottom: 14px !important; margin-bottom: 26px !important; } /* gold accent underline (::after on a div — not a li) */ .evid-wp .ev-section-head::after { content: '' !important; display: block !important; position: absolute !important; bottom: -2px !important; left: 0 !important; width: 52px !important; height: 2px !important; background: var(--c-gold, #C8870A) !important; animation: none !important; filter: none !important; opacity: 1 !important; z-index: 1 !important; } /* ev-ornament-line — decorative side rules */ .evid-wp .ev-ornament-line::before, .evid-wp .ev-ornament-line::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--c-gold, #C8870A) !important; opacity: .5 !important; } /* ev-list ::after — ensure the empty reset is never triggered */ .evid-wp .ev-list li::after { content: none !important; background: none !important; } /* ───────────────────────────────────────────────────────────── FIX 2 .content h2 — blue gradient banner ────────────────────────────────────────────────────────────── SOURCE IN custom.css: .content h2 { color: white !important; background-image: radial-gradient(circle farthest-corner …); box-shadow: … 0 6px 10px rgba(0,0,0,0.4); text-transform: capitalize; text-align: center; text-shadow: 0 4px 3px rgba(0,0,0,0.4) …; padding: 10px 14px; border-radius: 6px; } WHY IT BREAKS: Every .ev-h2 used as a section heading appears as a full-width white-text blue gradient banner instead of plain navy text. FIX: Restore ev-h2 to its designed state — serif, navy, transparent. ───────────────────────────────────────────────────────────── */ .evid-wp .ev-h2, .evid-wp .ev-section-head h2 { color: var(--c-navy, #1B3A6B) !important; background-image: none !important; background-color: transparent !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; text-align: left !important; padding: 0 !important; border-radius: 0 !important; font-family: var(--f-serif, 'Tiro Devanagari Hindi', serif) !important; font-size: clamp(20px, 3vw, 26px) !important; font-weight: 400 !important; line-height: 1.25 !important; margin: 0 !important; clear: none !important; } /* ── .sec-head h2 — h2 inside a coloured header band ────────────────────────────────────────────────────── PROBLEM: You use .sec-head as a coloured gradient container, e.g.: .sec-head { background: linear-gradient(90deg, var(--indigo), …); color:#fff; } .sec-head.kosal { background: linear-gradient(90deg, #0D4E6E, #1A7AAA); } The h2 INSIDE .sec-head should just be white text — plain, no padding, no own background. But custom.css paints its own gradient on every h2: .content h2 { background-image: radial-gradient(…cyan→blue…); color:white !important; padding:10px 14px; border-radius:6px; box-shadow:…; text-shadow:…; } Result: the h2 renders as a second blue-cyan gradient BANNER sitting inside the .sec-head container's gradient — double stacked. FIX: make the h2 inside any .sec-head fully transparent so only the container's background is visible. Use high-specificity selector to beat .content h2 { … !important }. */ .content .sec-head h2, .entry-content .sec-head h2, .sec-head h2 { background: none !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; text-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; text-transform: none !important; text-align: left !important; clear: none !important; color: inherit !important; /* inherit white from .sec-head */ font-size: 18px !important; line-height: inherit !important; display: block !important; } /* ── Bare

tags written directly anywhere inside .evid-wp (e.g. ## markdown headings from the WordPress editor) ────────────────────────────────────────────────────────── ROOT CAUSE: custom.css uses .content h2 { color: white !important; background-image: radial-gradient(…) } Both .content h2 and .evid-wp h2 have the SAME specificity (0,1,1). When two !important declarations tie on specificity, load order wins. The previous version of this file had no `color` property at all, so `color: white !important` was never cancelled. FIX: declare every property from the custom.css rule, all !important, so load order makes this file win. */ .evid-wp h2 { color: #1B3A6B !important; /* override color:white !important */ background-image: none !important; background-color: transparent !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important; /* override text-transform:capitalize */ text-align: left !important; /* override text-align:center */ padding: 0 0 12px 0 !important; /* override padding:10px 14px */ border-radius: 0 !important; /* override border-radius:6px */ clear: none !important; /* prevent clear:both in flex/grid */ font-size: 1.5em !important; } /* h2 inside .sec-head that is also inside .evid-wp — defer to sec-head fix above */ .evid-wp .sec-head h2 { color: inherit !important; background: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; padding: 0 !important; border-radius: 0 !important; text-transform: none !important; text-align: left !important; clear: none !important; font-size: 18px !important; } /* ───────────────────────────────────────────────────────────── FIX 3 h1 global — wrong font family / weight ────────────────────────────────────────────────────────────── SOURCE IN custom.css: h1 { font-family:"Raleway",sans-serif; font-weight:300; font-size:40px; color:#080808; } WHY IT BREAKS: ev-h1 inside the hero gets Raleway light-weight instead of the correct serif at clamp(28px–52px) in white. FIX: Re-apply the correct font stack and colour for ev-h1. ───────────────────────────────────────────────────────────── */ .evid-wp .ev-h1 { font-family: var(--f-serif, 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(28px, 5vw, 52px) !important; color: #fff !important; line-height: 1.15 !important; margin: 0 0 10px !important; padding: 0 !important; transition: none !important; } /* Gold accent span inside ev-h1 */ .evid-wp .ev-h1 .ev-accent { color: var(--c-gold-lt, #E8A532) !important; font-family: inherit !important; } /* ───────────────────────────────────────────────────────────── FIX 4 .entry-header h1::before / ::after — decorative lines ────────────────────────────────────────────────────────────── SOURCE IN custom.css: .entry-header h1:before { width:55px; height:6px; content:""; position:absolute; bottom:-2px; left:48%; background:#0050bb; } .entry-header h1:after { width:100%; height:1px; content:""; position:relative; margin-top:7px; background:#004fb8; } WHY IT BREAKS: When .evid-wp sits inside .entry-header (or its ancestor matches), a blue underline bar and horizontal rule appear under ev-h1. FIX: Remove both pseudo-elements from ev-h1. ───────────────────────────────────────────────────────────── */ .evid-wp .ev-h1::before, .evid-wp .ev-h1::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; } /* ───────────────────────────────────────────────────────────── FIX 5 table / th / td global styles ────────────────────────────────────────────────────────────── SOURCE IN custom.css: table { font-family:arial; border-style:hidden; box-shadow:0 0 0 1px #b7b7b7; } th { background-color:#e8f2ff; color:#003d8f; border:1px solid #c0d4ee; padding:8px 10px; } td { border:1px solid #dddddd; padding:8px 10px; } tr:nth-child(even) td { background-color:#f7faff; } WHY IT BREAKS: ev-table should have a navy header, borderless cells with only a bottom-border separator, and warm gold-tinted even rows. The global rules replace all of this with Arial font, light-blue header, grey borders and cold-blue stripes. FIX: Restore every ev-table property to its designed values. ───────────────────────────────────────────────────────────── */ /* Table wrapper and element */ .evid-wp .ev-table { font-family: var(--f-sans, 'Noto Sans Devanagari', sans-serif) !important; border-style: none !important; box-shadow: none !important; } /* Header row */ .evid-wp .ev-table thead tr { background: var(--c-navy, #1B3A6B) !important; } /* Header cells */ .evid-wp .ev-table th { background-color: var(--c-navy, #1B3A6B) !important; color: rgba(255,255,255,.9) !important; border: none !important; padding: 12px 14px !important; font-family: var(--f-sans, sans-serif) !important; font-size: 12.5px !important; font-weight: 600 !important; text-align: left !important; white-space: nowrap !important; } .evid-wp .ev-table th:first-child { border-radius: 10px 0 0 0 !important; } .evid-wp .ev-table th:last-child { border-radius: 0 10px 0 0 !important; } /* Data cells — bottom border only, no side borders */ .evid-wp .ev-table td { border: none !important; border-bottom: 1px solid var(--c-border-lt, #EDE4D0) !important; padding: 10px 14px !important; background: #fff !important; color: var(--c-ink-soft, #3A2C14) !important; font-size: 14px !important; font-family: var(--f-sans, sans-serif) !important; vertical-align: top !important; text-align: left !important; } /* Even-row stripe — warm instead of cold blue */ .evid-wp .ev-table tbody tr:nth-child(even) td { background-color: var(--c-bg, #F9F5EE) !important; } /* Hover row */ .evid-wp .ev-table tbody tr:hover td { background-color: var(--c-gold-tint, #FFF7E0) !important; } /* Strong text inside cells */ .evid-wp .ev-table td strong { color: var(--c-ink, #1C1208) !important; } /* ───────────────────────────────────────────────────────────── FIX 6 .content p a:link — forced bold blue on all links ────────────────────────────────────────────────────────────── SOURCE IN custom.css: .content p a:link { font-weight:bold; color:#006EB6 !important; } WHY IT BREAKS: Links inside ev- dark components (hero, TOC card, summary box, PYQ block, profile header) inherit bold weight and blue colour, which is illegible on dark navy or gradient backgrounds. FIX: Reset weight to normal inside .evid-wp. On dark-background components, explicitly set the correct colour. ───────────────────────────────────────────────────────────── */ /* General weight reset inside .evid-wp */ .evid-wp p a, .evid-wp p a:link, .evid-wp p a:visited { font-weight: normal !important; } /* Links on dark-background components — keep readable white / gold */ .evid-wp .ev-hero a:link, .evid-wp .ev-hero a:visited, .evid-wp .ev-toc-card a:link, .evid-wp .ev-toc-card a:visited, .evid-wp .ev-summary a:link, .evid-wp .ev-summary a:visited, .evid-wp .ev-pyq a:link, .evid-wp .ev-pyq a:visited, .evid-wp .ev-bpsc-box a:link, .evid-wp .ev-bpsc-box a:visited, .evid-wp .ev-vision a:link, .evid-wp .ev-vision a:visited, .evid-wp .ev-pull-quote a:link, .evid-wp .ev-pull-quote a:visited, .evid-wp .ev-ruler-head a:link, .evid-wp .ev-ruler-head a:visited, .evid-wp .ev-profile-head a:link, .evid-wp .ev-profile-head a:visited, .evid-wp .ev-acc-trigger a:link, .evid-wp .ev-acc-trigger a:visited, .evid-wp .ev-sidebar-card-head a:link, .evid-wp .ev-sidebar-card-head a:visited { color: rgba(255,255,255,.85) !important; font-weight: normal !important; text-decoration: none !important; } /* TOC dark card links */ .evid-wp .ev-toc-item, .evid-wp .ev-toc-item:link, .evid-wp .ev-toc-item:visited { color: rgba(255,255,255,.72) !important; font-weight: 500 !important; text-decoration: none !important; } /* Sticky TOC bar links */ .evid-wp .ev-toc-link, .evid-wp .ev-toc-link:link, .evid-wp .ev-toc-link:visited { color: var(--c-gold-lt, #E8A532) !important; font-weight: 500 !important; text-decoration: none !important; } /* Gold-bordered TOC box links (light background — navy is correct) */ .evid-wp .ev-toc-box a:link, .evid-wp .ev-toc-box a:visited { color: var(--c-navy, #1B3A6B) !important; font-weight: normal !important; text-decoration: none !important; } /* ───────────────────────────────────────────────────────────── FIX 7 .entry-content li — display, margin and pseudo-elements ────────────────────────────────────────────────────────────── SOURCE IN custom.css: .entry-content li { display: list-item; margin: 0 0 0 1.5em; position: static; z-index: auto; border-radius: 0; } .entry-content li:before { content: none !important; ... opacity: 0; } .entry-content li:after { content: none; background: none; } .entry-content li:hover:before { opacity: 0; } .entry-content li:active { color: #222; } WHY IT BREAKS: ev-list items use display:flex + gap. Forcing display:list-item removes the flex layout entirely. The 1.5em left margin pushes items right, misaligning the bullet. The :before/:after resets (already covered in Fix 1) are repeated here for completeness. FIX: Restore flex display and zero margin for ev-list items. Restore :before / :after to the correct decorative values. ───────────────────────────────────────────────────────────── */ /* Restore flex layout */ .evid-wp .ev-list li { display: flex !important; margin: 0 !important; padding: 7px 0 !important; position: relative !important; color: var(--c-ink-soft, #3A2C14) !important; background: none !important; border-radius: 0 !important; cursor: default !important; z-index: auto !important; } /* Remove forced underline + weight override on list links */ .evid-wp .ev-list li a, .evid-wp .ev-list li a:link { text-decoration: none !important; font-weight: normal !important; color: var(--c-navy, #1B3A6B) !important; } /* Links on dark-bg list items stay white */ .evid-wp .ev-pyq .ev-list li a:link, .evid-wp .ev-summary .ev-list li a:link { color: rgba(255,255,255,.8) !important; } /* Restore :after on li to nothing — already in Fix 1 but explicit here */ .evid-wp .ev-list li::after { content: none !important; } /* Hover and active states — no colour change inside ev-list */ .evid-wp .ev-list li:hover::before { opacity: 1 !important; } .evid-wp .ev-list li:active { color: var(--c-ink-soft, #3A2C14) !important; } .evid-wp .ev-list li:active::after { background: none !important; } /* ───────────────────────────────────────────────────────────── FIX 8 clear:both on h3 and p inside flex/grid containers ────────────────────────────────────────────────────────────── SOURCE IN custom.css: .content h3, .entry-content h3 { clear: both; font-size: 1.4em; } .entry-content p { clear: both; } WHY IT BREAKS: clear:both on .ev-h3 elements inside ev- flex or grid containers (ev-note, ev-card, ev-acc-body, etc.) forces them to drop below any preceding float, breaking the layout rhythm. Same issue for .ev-p paragraphs inside flex row containers. FIX: Set clear:none on ev-h3 and ev-p inside .evid-wp. ───────────────────────────────────────────────────────────── */ .evid-wp .ev-h3 { clear: none !important; font-size: 16px !important; font-weight: 700 !important; color: var(--c-navy, #1B3A6B) !important; /* Guard against h2 gradient rule bleeding onto ev-h3 */ background-image: none !important; background-color: transparent !important; box-shadow: none !important; text-shadow: none !important; padding: 0 0 0 12px !important; margin: 20px 0 10px !important; border-left: 3px solid var(--c-gold, #C8870A) !important; border-radius: 0 !important; text-transform: none !important; text-align: left !important; } .evid-wp .ev-p { clear: none !important; } /* Specific flex container inner paragraphs */ .evid-wp .ev-note .ev-p, .evid-wp .ev-note-body p, .evid-wp .ev-card-body .ev-p, .evid-wp .ev-card-body p, .evid-wp .ev-v-item .ev-p, .evid-wp .ev-ruler-body .ev-p, .evid-wp .ev-profile-body .ev-p, .evid-wp .ev-summary-item .ev-si-text, .evid-wp .ev-acc-body .ev-p, .evid-wp .ev-pyq-item, .evid-wp .ev-bpsc-item, .evid-wp .ev-qa-answer, .evid-wp .ev-pull-quote .ev-pq-text, .evid-wp .ev-conclusion p { clear: none !important; } /* ───────────────────────────────────────────────────────────── BONUS — Accordion trigger button ────────────────────────────────────────────────────────────── custom.css: .button, input[type=button], input[type=reset], input[type=submit] { background-color:#c7efff; border-color:skyblue; padding:18px; } The ev-acc-trigger is a