/* ========================================================================== Full Contact SEO - AEO Theme Component stylesheet ========================================================================== */ /* -------------------------------------------------------------------------- 1. Brand tokens (CSS custom properties) Override per-site by setting FCS_BRAND_* constants in wp-config.php. functions.php injects an inline :root override block in . -------------------------------------------------------------------------- */ :root { --brand-primary: #0a1e3f; --brand-accent: #c9a94a; --brand-dark: #12222a; --brand-text: #222; --brand-bg: #fafafa; --brand-white: #ffffff; --font-serif: "Antic Slab", Georgia, serif; --font-sans: Arial, Helvetica, sans-serif; --max-width: 1025px; } /* -------------------------------------------------------------------------- 2. Reset + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-serif); line-height: 1.7; color: var(--brand-text); background: var(--brand-bg); margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-primary); text-decoration: underline; } a:hover { color: var(--brand-accent); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); } h2 { color: var(--brand-primary); border-bottom: 3px solid var(--brand-accent); padding-bottom: .4rem; margin-top: 2.5rem; } h3 { color: var(--brand-primary); margin-top: 1.8rem; } ol li, ul li { margin-bottom: .8rem; } /* -------------------------------------------------------------------------- 3. Layout container -------------------------------------------------------------------------- */ .fcs-container { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.25rem; } /* -------------------------------------------------------------------------- 4. Site header + nav -------------------------------------------------------------------------- */ .site-header { background: var(--brand-white); border-bottom: 1px solid #e5e5e5; padding: 0; position: relative; } .site-header-inner { /* Full-bleed: logo hugs left edge, nav hugs right edge. Viewport padding keeps them off the glass. Body content below still constrained by --max-width via .fcs-container. */ max-width: none; margin: 0; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media screen and (max-width: 768px) { .site-header-inner { padding: .75rem 1.25rem; } } .site-logo img, .site-logo .custom-logo { max-height: 60px; width: auto; display: block; } .site-logo a, .site-logo .custom-logo-link { display: inline-block; color: var(--brand-primary); text-decoration: none; font-weight: bold; font-size: 1.4rem; } /* ============================================================ * Primary nav — desktop * Ported from Joe's prior Bootstrap-era theme (proven pattern, * sub-0.87s load, no CDN). Pure CSS :hover + :focus-within * dropdowns, visibility+opacity transition, CSS-drawn caret, * current-page highlight. No JS dependency. * ============================================================ */ .primary-nav ul { list-style: none; margin: 0; padding: 0; } /* Top-level: centered horizontal flow via inline-block */ .primary-nav > ul, .primary-nav > div > ul { text-align: center; position: relative; } .primary-nav > ul > li, .primary-nav > div > ul > li { display: inline-block; vertical-align: top; padding: 10px 0; position: relative; } .primary-nav > ul > li > a, .primary-nav > div > ul > li > a { display: block; font-size: 21px; color: var(--brand-primary); text-transform: uppercase; position: relative; line-height: 50px; padding: 0 27px; letter-spacing: 0.02em; font-weight: 700; text-decoration: none; transition: color 0.2s ease; } .primary-nav > ul > li:hover > a, .primary-nav > ul > li:focus-within > a, .primary-nav > div > ul > li:hover > a, .primary-nav > div > ul > li:focus-within > a { color: var(--brand-accent); } /* CSS-drawn caret on parent items (WP auto-adds .menu-item-has-children) */ .primary-nav > ul > li.menu-item-has-children > a::after, .primary-nav > div > ul > li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.4em; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; opacity: 0.6; transition: opacity 0.2s ease, transform 0.2s ease; } .primary-nav > ul > li.menu-item-has-children:hover > a::after, .primary-nav > ul > li.menu-item-has-children:focus-within > a::after, .primary-nav > div > ul > li.menu-item-has-children:hover > a::after, .primary-nav > div > ul > li.menu-item-has-children:focus-within > a::after { opacity: 1; transform: rotate(-180deg); } /* Current-page accent */ .primary-nav > ul > li.current-menu-item > a, .primary-nav > ul > li.current-menu-ancestor > a, .primary-nav > ul > li.current-menu-parent > a, .primary-nav > div > ul > li.current-menu-item > a, .primary-nav > div > ul > li.current-menu-ancestor > a, .primary-nav > div > ul > li.current-menu-parent > a { color: var(--brand-accent); } /* Hamburger button - hidden on desktop, shown on mobile via @media block */ .fcs-menu-toggle { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; width: 44px; height: 44px; position: relative; margin-left: auto; -webkit-tap-highlight-color: transparent; } .fcs-menu-toggle-bar { display: block; width: 24px; height: 3px; background: var(--brand-primary); margin: 5px auto; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(2) { opacity: 0; } .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* -------------------------------------------------------------------------- 5. Sub-menu — desktop hover dropdown Ported directly from Joe's prior Bootstrap-era theme. Pure CSS hover + :focus-within keyboard accessibility. Visibility + opacity transition gives a natural ~200ms mouseout forgiveness window (no JS delay needed). Single-column dropdown, 250px wide, 3px accent border, hover-shift padding on sub-items. Degrades gracefully with JS disabled. -------------------------------------------------------------------------- */ @media screen and (min-width: 769px) { .primary-nav li { position: relative; } .primary-nav .sub-menu { list-style: none; display: block; width: 250px; position: absolute; top: 100%; left: 0; z-index: 1000; background: var(--brand-white); border: 3px solid var(--brand-accent); padding: 10px; margin: 0; text-align: left; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.2s, opacity 0.2s ease; } .primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 0.2s ease; } .primary-nav .sub-menu > li { display: block; padding: 0; margin: 0; border-bottom: 1px solid #e1e1e1; } .primary-nav .sub-menu > li:last-child { border-bottom: none; } .primary-nav .sub-menu > li > a { font-size: 16px; display: block; padding: 0 5px; line-height: 35px; color: var(--brand-primary); text-transform: none; letter-spacing: normal; font-weight: 500; text-decoration: none; transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease; } .primary-nav .sub-menu > li:hover > a, .primary-nav .sub-menu > li:focus-within > a { background: #f5f5f5; padding-left: 7px; color: var(--brand-accent); } .multi-column-list { column-count: 2; column-gap: 20px; list-style-position: inside; } } /* -------------------------------------------------------------------------- 6a. Home hero (featured image zone above the dark band) Image renders at native size up to 1400px, centered, scales down on mobile. Does NOT upscale above native resolution to avoid blur on large displays. -------------------------------------------------------------------------- */ .home-hero { width: 100%; padding: 0; margin: 0; text-align: center; background: var(--brand-bg); } .home-hero img { max-width: 100%; height: auto; display: inline-block; margin: 0 auto; vertical-align: middle; } /* -------------------------------------------------------------------------- 6b. Sub-hero band (homepage only) Dark band below hero with white centered H1/H2/H3. -------------------------------------------------------------------------- */ .sub-hero-band { background: var(--brand-primary); color: var(--brand-white); padding: 1.5rem 1rem; text-align: center; } /* -------------------------------------------------------------------------- 7. .smallTitle - white centered overlay titles Preserved verbatim from B&M custom CSS. -------------------------------------------------------------------------- */ h1.smallTitle { font-size: 36px !important; margin-bottom: 10px; margin-left: 20%; margin-right: 20%; color: var(--brand-white) !important; text-align: center !important; } h2.smallTitle { font-size: 28px !important; border-bottom: none !important; padding-bottom: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; margin-left: 20%; margin-right: 20%; color: var(--brand-white) !important; text-align: center !important; } h3.smallTitle { font-size: 16px !important; margin-top: 0px !important; margin-bottom: 10px; margin-left: 20%; margin-right: 20%; color: var(--brand-white) !important; text-align: center !important; } /* -------------------------------------------------------------------------- 8. Component classes - intro callout, CTA band, FAQ, listicle From rhode-island-arson-lawyer-preview.html. -------------------------------------------------------------------------- */ .intro { background: var(--brand-white); border-left: 6px solid var(--brand-accent); padding: 1.2rem 1.5rem; font-size: 1.08rem; margin-bottom: 2rem; } .cta { background: var(--brand-primary); color: var(--brand-white); padding: 1.8rem; text-align: center; margin: 2.5rem 0; border-radius: 4px; font-size: 24px; } .cta a { color: var(--brand-accent); font-weight: bold; } /* ============================================================ * FAQ accordion (v1.4.0) * Native
/ accordion. All content stays in DOM * so Google + AI answer engines see every FAQ regardless of open * or closed state. Zero JS. * ============================================================ */ .faq { background: var(--brand-white); margin-bottom: 0.75rem; border: 1px solid #e5e5e5; border-left: 4px solid var(--brand-primary); border-radius: 0 3px 3px 0; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq[open], .faq:hover { border-color: var(--brand-accent); border-left-color: var(--brand-accent); box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .faq summary { list-style: none; cursor: pointer; padding: 1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; user-select: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '\25B8'; /* black right-pointing small triangle */ color: var(--brand-accent); font-size: 0.9rem; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; } .faq[open] summary::after { transform: rotate(90deg); } .faq summary h3 { margin: 0; font-size: 1.1rem; flex-grow: 1; display: inline; } .faq summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } .faq .faq-answer { padding: 0 1.3rem 1.1rem 1.3rem; } .faq .faq-answer p:first-child { margin-top: 0; } .faq .faq-answer p:last-child { margin-bottom: 0; } .listicle li strong { color: var(--brand-primary); } /* Service Page template - FAQ block at end of content */ .service-page .faq-section { margin-top: 3rem; } .service-page .faq-section > h2 { margin-bottom: 1.5rem; } /* FAQ single - related FAQs block */ .faq-related { margin-top: 3rem; padding: 1.5rem; background: var(--brand-white); border-left: 4px solid var(--brand-accent); } .faq-related h2 { margin-top: 0; font-size: 1.3rem; } .faq-related-list { list-style: disc; padding-left: 1.25rem; } .faq-related-more { margin-top: 1rem; font-weight: bold; } /* FAQ archive + category */ .faq-archive-list, .faq-related-list { list-style: none; padding: 0; } .faq-archive-list li, .faq-related-list li { border-bottom: 1px solid #eaeaea; padding: .6rem 0; } .faq-archive-list a, .faq-related-list a { font-size: 1.05rem; } .faq-category-group { margin-bottom: 2.5rem; } .faq-category-group h2 a { text-decoration: none; color: var(--brand-primary); } .faq-category-group h2 a:hover { color: var(--brand-accent); } .meta-callout { background: var(--brand-white); border: 2px solid var(--brand-accent); border-left: 8px solid var(--brand-primary); padding: 1.2rem 1.5rem; margin-bottom: 2rem; font-family: var(--font-sans); font-size: .95rem; } .meta-callout h4 { margin-top: 0; color: var(--brand-primary); } .hero-note { font-style: italic; color: #666; font-size: .9rem; margin-bottom: 1.5rem; } /* -------------------------------------------------------------------------- 9. Utilities -------------------------------------------------------------------------- */ .alignright { float: right !important; padding: 5px; border: solid 1px var(--brand-dark); margin: 0 0 10px 15px; } .alignleft { float: left !important; padding: 5px; border: solid 1px var(--brand-dark); margin: 0 15px 10px 0; } .aligncenter { display: block; margin: 0 auto 15px auto; } .center { text-align: center; } .review-font { font-size: 14px; } .availabletitle { text-align: center; margin-top: 20px; } /* -------------------------------------------------------------------------- 10. Mobile CTA triptych - hidden on desktop -------------------------------------------------------------------------- */ @media screen and (min-width: 769px) { .mobileApp { display: none !important; } .mobileAppB { display: none !important; } .topApp { display: none !important; } } /* -------------------------------------------------------------------------- 11. Mobile-only styles -------------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { h1.smallTitle { font-size: 20px !important; color: var(--brand-white) !important; text-align: center; margin-left: 12%; margin-right: 12%; } h2.smallTitle { font-size: 20px !important; border-bottom: none !important; padding-bottom: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; color: var(--brand-white) !important; text-align: center; margin-left: 12%; margin-right: 12%; } h3.smallTitle { font-size: 12px !important; margin-top: 0px !important; color: var(--brand-white) !important; text-align: center; margin-left: 12%; margin-right: 12%; } .topApp { text-align: center; padding-top: 15px; padding-bottom: 15px; margin: auto; background: var(--brand-dark); } .topApp a { text-align: center; padding-top: 15px; padding-bottom: 15px; color: var(--brand-white); font-size: 18px; text-decoration: none; margin: auto; } .mobileApp { margin-bottom: 20px; text-align: center !important; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; } .mobileAppB { margin-bottom: 125px; text-align: center !important; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; } .ctaclick { background-color: var(--brand-dark); border: none; color: var(--brand-white); padding: 20px 95px; text-align: center; align-items: center; text-decoration: none; display: inline-block; font-size: 20px; margin-top: 30px; margin-bottom: 5px; line-height: 1.25; } .alignright, .alignleft { float: none !important; margin: 1rem auto; display: block; } /* --- Hamburger shows, inline nav hides + becomes accordion --- */ .fcs-menu-toggle { display: block; } .primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--brand-white); border-bottom: 1px solid #e5e5e5; max-height: 0; overflow: hidden; transition: max-height .3s ease; z-index: 500; } .primary-nav.is-open { /* Large value so long menus still fit - animates to natural height. */ max-height: 80vh; overflow-y: auto; } .primary-nav ul, .primary-nav .primary-menu { flex-direction: column; gap: 0; padding: .5rem 0; } .primary-nav li { border-bottom: 1px solid #eee; margin: 0; } .primary-nav li:last-child { border-bottom: 0; } .primary-nav a { display: block; padding: .9rem 1.25rem; font-size: 1.05rem; } .primary-nav .sub-menu { list-style: none; background: var(--brand-bg); padding: 0; margin: 0; } .primary-nav .sub-menu a { padding-left: 2.25rem; font-weight: 400; } /* Reset desktop sub-menu column hacks on mobile */ .primary-nav .sub-menu-columns .sub-menu { width: auto !important; } .primary-nav .sub-menu-columns .sub-menu li { display: block !important; width: auto !important; float: none !important; margin-right: 0 !important; } /* Lock body scroll while menu is open */ body.fcs-menu-open { overflow: hidden; } } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--brand-primary); color: var(--brand-white); margin-top: 3rem; } .site-footer a { color: var(--brand-accent); } /* Footer widget grid - 4 columns desktop, 2x2 tablet, 1 column mobile */ .site-footer-widgets { padding: 2.5rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-widgets-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 0 1.25rem; } .footer-widget-area { font-size: .95rem; line-height: 1.6; } .footer-widget-area .widget-title { color: var(--brand-white); font-size: 1.05rem; margin: 0 0 .75rem; padding-bottom: .35rem; border-bottom: 2px solid var(--brand-accent); display: inline-block; } .footer-widget-area ul { list-style: none; padding: 0; margin: 0; } .footer-widget-area li { margin-bottom: .35rem; } .footer-widget-area a { text-decoration: none; } .footer-widget-area a:hover { text-decoration: underline; } .site-footer-bottom { padding: 1.5rem 1.25rem; text-align: center; font-size: .9rem; } .site-footer-bottom p { margin: .4rem 0; } @media screen and (max-width: 959px) { .footer-widgets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 560px) { .footer-widgets-grid { grid-template-columns: 1fr; gap: 1.5rem; } .site-footer-widgets { padding: 2rem 0 .5rem; } } /* -------------------------------------------------------------------------- * Breadcrumb bar (v1.2.0) * Thin row between header and hero. Hidden on front page (no breadcrumbs * emitted there). BreadcrumbList JSON-LD is printed in . * -------------------------------------------------------------------------- */ .fcs-breadcrumbs { background: #f5f5f5; border-bottom: 1px solid #e5e5e5; font-size: 0.875rem; color: var(--brand-text); } .fcs-breadcrumbs .fcs-container { padding-top: 0.6rem; padding-bottom: 0.6rem; } .fcs-breadcrumb-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .fcs-breadcrumb-trail li { margin: 0; padding: 0; line-height: 1.3; } .fcs-breadcrumb-item a { color: var(--brand-primary); text-decoration: none; } .fcs-breadcrumb-item a:hover, .fcs-breadcrumb-item a:focus { text-decoration: underline; } .fcs-breadcrumb-item [aria-current="page"] { color: var(--brand-text); opacity: 0.75; } .fcs-breadcrumb-sep { color: var(--brand-text); opacity: 0.4; } @media screen and (max-width: 560px) { .fcs-breadcrumbs { font-size: 0.8125rem; } .fcs-breadcrumbs .fcs-container { padding-top: 0.5rem; padding-bottom: 0.5rem; } }