/* PITCH Roofing Calculator — frontend overrides. * * This stylesheet wins over the widget's own injected CSS because the * selectors are anchored on #pitch-calculator-mount (ID specificity = 1, * unbeatable by the widget's class-only selectors). * * Strategy: don't fight the widget's behavior styles (display, flex, * grid, borders, spacing, colors) — just nuke everything text-related * so the host WordPress theme's typography wins. Whatever the theme * decides headings, body, buttons, and form inputs should look like * (font-family, font-size, line-height, letter-spacing, font-weight), * the widget conforms to it without imposing PITCH's brand typography. * * Layout: also drop the widget's 1080px max-width and centering — the * shortcode should fill the container the user dropped it in. If the * tenant wants a narrower calculator, they wrap the shortcode in their * own container. */ /* Typography reset — make widget elements inherit the host theme's * typography by default. Plugin's ID-anchored selector (1,1,0) beats * the widget JS's class-only selectors (0,1,0) via specificity alone, * so !important is NOT needed here — and actively harmful: Elementor's * Typography group control generates CSS without !important and relies * on specificity to win, so a plugin !important would block Elementor * from being able to override anything. * * Without !important on this rule: * - Widget JS class-only rules → beaten by plugin (specificity) * - Elementor at (1,3,0) or more → beats plugin (specificity) * - Theme class-only rules → beaten by plugin (specificity) * - Theme !important rules → would beat plugin (rare, acceptable) */ #pitch-calculator-mount .pitch-calc, #pitch-calculator-mount .pitch-calc *, #pitch-calculator-mount .pitch-calc *::before, #pitch-calculator-mount .pitch-calc *::after { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; } #pitch-calculator-mount .pitch-calc { max-width: none !important; margin: 0 !important; width: 100% !important; } /* Google Places autocomplete dropdown sits OUTSIDE the mount in the DOM * (Google appends it to ), so we can't anchor on #pitch-calculator-mount * for it. Target by class only — the widget's autocomplete spawns * .pac-container elements. Same theme-inherit treatment. */ body .pac-container, body .pac-container * { font-family: inherit !important; font-size: inherit !important; } /* Server-rendered "Calculator Loading…" placeholder. Lives inside * #pitch-calculator-mount until the widget JS replaces it. Spinner * uses currentColor so it picks up whatever the theme sets as the * text color in this part of the page. */ #pitch-calculator-mount .pitch-calc-plugin-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 3em 1em; text-align: center; color: inherit; opacity: 0.85; } #pitch-calculator-mount .pitch-calc-plugin-loading p { margin: 0; } #pitch-calculator-mount .pitch-calc-plugin-spinner { width: 36px; height: 36px; border: 4px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: 0.4; animation: pitch-calc-plugin-spin 0.8s linear infinite; box-sizing: border-box; } @keyframes pitch-calc-plugin-spin { to { transform: rotate(360deg); } } /* Re-pin the widget's intended image dimensions. The widget JS sets * these on .pitch-calc-card-photo / .pitch-calc-result-photo / * .pitch-calc-example-img via class-only selectors (specificity 0,1,0). * Most WP themes ship a "make images responsive" rule like * .entry-content img { max-width: 100%; height: auto !important; } * which has comparable-or-higher specificity AND !important, so the * widget's intended heights get clobbered and images stretch to match * their natural aspect ratio at the wider container width. * * Solution: re-declare with #pitch-calculator-mount anchor (ID + * specificity wins) + !important. Values mirror the widget JS exactly * so partner.pitchroofing.com behavior is the source of truth — if * those numbers ever change on partner, mirror here. */ /* v1.1.10: pin the card-photo wrapper height. The widget JS (step 31) * wraps every card's image area in .pitch-calc-card-photo-wrap with a * fixed 130px height, and the img inside fills the wrapper at 100%. * Re-declare here with ID specificity so themes that ship `img { * height: auto !important }` rules can't reshape the wrapper or the * image inside it. */ #pitch-calculator-mount .pitch-calc .pitch-calc-card-photo-wrap { width: 100% !important; height: 130px !important; overflow: hidden !important; display: block !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-card-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-result-photo { width: 100% !important; height: auto !important; max-height: 220px !important; object-fit: cover !important; display: block !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-example-img { width: 100% !important; height: 150px !important; object-fit: cover !important; display: block !important; } /* v1.1.2: re-pin hover/active states. Most WP themes ship aggressive * button:hover, a:hover, .button:hover rules that bleed into the * widget (notable case: WP themes setting button:hover background to * the theme's primary color or pure black). Re-declare each * interactive element's hover with ID specificity + !important to * preserve the calculator's intended PITCH-red hover language. */ /* Primary button hover — darker red */ #pitch-calculator-mount .pitch-calc .pitch-calc-btn:hover:not(:disabled):not(.secondary) { background: #9a0000 !important; border-color: #9a0000 !important; color: #fff !important; } /* Secondary button hover — light red bg, red text */ #pitch-calculator-mount .pitch-calc .pitch-calc-btn.secondary:hover:not(:disabled) { background: #fff5f5 !important; color: #9a0000 !important; border-color: #9a0000 !important; } /* Variant comparison card hover — red border, lift, soft shadow */ #pitch-calculator-mount .pitch-calc .pitch-calc-card:hover { background: #fff !important; border-color: #BA0000 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(186, 0, 0, 0.08) !important; } /* Tabs — Cash / Financing on the result page */ #pitch-calculator-mount .pitch-calc .pitch-calc-tab { background: none !important; color: #888 !important; border: none !important; border-bottom: 3px solid transparent !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-tab.active { background: none !important; color: #BA0000 !important; border-bottom-color: #BA0000 !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-tab:hover:not(.active) { background: none !important; color: #555 !important; } /* Link-style text button under the disclaimer */ #pitch-calculator-mount .pitch-calc .pitch-calc-link-btn { background: transparent !important; color: #555 !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-link-btn:hover { background: transparent !important; color: #222 !important; } /* Estimate-type radio card hover on the lead form */ #pitch-calculator-mount .pitch-calc .pitch-calc-lead-typeoption:hover { border-color: #BA0000 !important; background: transparent !important; } /* Back link */ #pitch-calculator-mount .pitch-calc .pitch-calc-back { background: none !important; color: #BA0000 !important; } #pitch-calculator-mount .pitch-calc .pitch-calc-back:hover { background: none !important; color: #BA0000 !important; text-decoration: underline !important; }