/* =========================================================================== * martyrusso.com — design system * * A 1:1 reproduction of the legacy Vertex theme's presentation on Divi 5. * Every value here traces to docs/design-system.md, which in turn traces to the * old theme's style.css or the customizer CSS the live site printed inline. * Nothing is eyeballed from a screenshot. * * Enqueued at priority 20 (see functions.php) so it lands after Divi's own * stylesheet AND after Divi's per-page dynamic CSS. That ordering is what lets * these rules win on specificity instead of needing !important everywhere. * * Divi 5's front-end CSS is DESKTOP-FIRST, so every override below is a * max-width query. * =========================================================================== */ :root { --mr-dark: #2c2c2a; /* header bar, body bg, name plate */ --mr-navy: #383d61; /* tagline plate, buttons, accents */ --mr-rust: #bd4a35; /* body links */ --mr-body: #3f3f3f; /* body text */ --mr-white: #ffffff; --mr-head-font: 'PT Sans', Helvetica, Arial, Lucida, sans-serif; --mr-body-font: 'Open Sans', Helvetica, Arial, Lucida, sans-serif; --mr-container: 960px; /* the legacy fixed container width */ } /* --------------------------------------------------------------------------- * 1. Base * ------------------------------------------------------------------------- */ body { background-color: var(--mr-dark); color: var(--mr-body); font-family: var(--mr-body-font); } /* Content area background. * * CORRECTED against the live site: this is WHITE by default, not #eaeaea. An * earlier reading of the captured CSS found `#content-area{background:#eaeaea}` * in the page source and assumed it was site-wide — it is present in the markup * on every page but only WINS on five of them. Measured on live: * white -> bio, speaking, services, news, gallery, media, contact * #eaeaea -> spotlight-pages, congressional-beginnings, congressional-baseball, * getting-started-in-politics, presidential-aircraft * i.e. the long-form "spotlight" pages only. Those get .mr-content-alt on * from t20_content_bg_body_class() in functions.php. * * The theme's `#content-area { padding: 60px 0 120px }` comes along with it; * Divi has no #content-area, so both land on #et-main-area. */ #page-container, #et-main-area { background-color: #ffffff; } #et-main-area { padding: 60px 0 120px; } body.mr-content-alt #page-container, body.mr-content-alt #et-main-area { background-color: #eaeaea; } /* Divi paints #main-content white; let the #eaeaea behind it show through. */ #main-content { background-color: transparent; } /* The legacy front page had an empty content area, so the dark body colour showed between the hero and the footer. Reproduced by letting the front page's content area go transparent. Remove this the moment real home content is added — see the open question in BUILD-LOG.md about the empty home body. */ body.home #page-container, body.home #et-main-area, body.home #main-content { background-color: transparent; } body.home #et-main-area { padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--mr-head-font); } /* Body links are rust — but NOT inside Divi modules flagged as sitting on a dark background. Divi sets .et_pb_bg_layout_dark there and colours links white; this stylesheet loads at priority 20, so an unguarded `a{}` rule beats it. That produced rust-on-rust: the "click here" link in the #bd4a35 CTA band was the exact same colour as the band and rendered invisible. Keep the :not(). */ a { color: var(--mr-rust); text-decoration: none; } a:hover { color: var(--mr-rust); text-decoration: underline; } .et_pb_bg_layout_dark a, .et_pb_bg_layout_dark a:hover, .et_pb_bg_layout_dark .et_pb_text_inner a { color: var(--mr-white); } /* The legacy site hid the sidebar and ran content full width. Divi pages are pushed as et_full_width_page, so this only has to hold the line. */ #sidebar { display: none; } #main-area, .fullwidth #main-area { width: 100%; float: none; margin-right: 0; } /* The container is 960px in the original. Made max-width rather than a hard width so it can shrink on phones — see design-system.md §6.2. */ .t20-header .container, .t20-footer .container { width: 100%; max-width: var(--mr-container); margin: 0 auto; position: relative; text-align: center; } /* --------------------------------------------------------------------------- * 2. Header — #top-menu bar * ------------------------------------------------------------------------- */ /* RECLAIM THE LEGACY CHROME FROM DIVI'S OWN STYLES. * * Three collisions, all of which have to be undone explicitly: * * 1. `#top-menu` is ALSO Divi's own primary-nav ID. Divi ships * `#top-menu { float: left }`, which collapsed this bar to 634px instead of * spanning the viewport. The legacy markup used the same id, so it is kept * for parity and Divi's rules are overridden here rather than renaming it. * 2. Divi sets `#main-header { position: fixed; z-index: 99999 }`. The legacy * header was in normal flow, so the fixed header sat on top of the banner and * the first ~250px of every page's content. * 3. Divi's JS then offsets `#page-container` by the header height for that * fixed header. With a static header that offset is dead space. * * Symptom if any of these regress: content starts mid-sentence under the banner. */ .t20-header, #main-header.t20-header { position: static !important; z-index: auto; background: transparent; box-shadow: none; } body #page-container { padding-top: 0 !important; } #top-menu { background: var(--mr-dark); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; float: none !important; width: 100% !important; max-width: none !important; } #top-menu .container { padding: 32px 0 0; } /* Legacy values, verbatim: the wordmark is capped at 40px tall and floated left, so the nav centres in the remaining width. Without the cap the 450x117 source renders full size and the bar is 149px instead of ~78px. */ #et-logo { float: left; margin-top: -15px; } #et-logo img { display: block; max-height: 40px; width: auto; } /* On the front page the bar logo is hidden — the hero shows the wordmark large. */ body.home #et-logo { display: none; } #top-menu nav { display: inline-block; vertical-align: middle; } #top-menu ul.nav { list-style: none; margin: 0; padding: 0; } #top-menu ul.nav > li { display: inline-block; } #top-menu ul.nav a { color: var(--mr-white); text-decoration: none; padding: 0 12px; display: block; line-height: 2.4; } #top-menu ul.nav a:hover { color: rgba(255, 255, 255, 0.9); text-decoration: none; } #top-menu ul.nav li.current-menu-item > a { font-weight: 800; } /* Mobile toggle — hidden on desktop, shown under 980px with the panel. */ #et_mobile_nav_menu { display: none; } .t20-burger { background: none; border: 0; color: var(--mr-white); font-family: var(--mr-body-font); font-size: 16px; cursor: pointer; padding: 10px 0; display: inline-flex; align-items: center; gap: 8px; } .t20-burger .et_mobile_arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; display: inline-block; transition: transform .2s ease; } .t20-burger[aria-expanded="true"] .et_mobile_arrow { transform: rotate(180deg); } .t20-mobile-panel { background: var(--mr-dark); padding: 0 0 12px; } .t20-mobile-panel ul.nav { list-style: none; margin: 0; padding: 0; } .t20-mobile-panel ul.nav > li { display: block; } .t20-mobile-panel ul.nav a { color: var(--mr-white); display: block; padding: 12px 20px; text-align: center; } /* --------------------------------------------------------------------------- * 3. Header — #top-area banner * ------------------------------------------------------------------------- */ #top-area, #pre-footer { background-position: top center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; /* parallax, as the original */ text-align: center; } /* Front-page-only band above the footer, repeating the tagline. */ #pre-footer { padding: 120px 0; } #pre-footer .container { width: 100%; max-width: var(--mr-container); margin: 0 auto; text-align: center; } .t20-top-area--interior { padding: 127px 0 68px; } .t20-top-area--home { padding: 130px 0 141px; } /* Interior banner title. The legacy rule is `#top-area h1.title { font-size:60px }` — the 100px value belongs to `#top-area h1`, which on this site only ever wraps the home hero wordmark. Its higher specificity also means the @767px `#top-area h1 { font-size:72px }` never applied to interior pages. Lower bound made fluid so long titles do not overflow a 390px viewport. */ #top-area h1.title { margin: 0 0 27px; font-weight: 100; font-size: clamp(34px, 8vw, 60px); line-height: 1.1; color: var(--mr-white); font-family: var(--mr-head-font); } /* Home: the wordmark sits inside the h1 rather than page-title text. */ .t20-home-mark { margin: 0 0 21px; font-size: 0; line-height: 0; } .t20-home-mark img { display: inline-block; max-width: 100%; height: auto; } /* `#top-area p.tagline` / `#pre-footer p.tagline`, not a bare `.tagline`: the tagline is a

and it is the last one in its container, so Divi's `p:last-of-type { padding-bottom: 0 }` outranks a single-class selector and flattened the plate's bottom padding from 19px to 0. Caught by diffing computed styles against the live site, not by looking at a screenshot. */ #top-area p.tagline, #pre-footer p.tagline, .tagline { font-size: 24px; color: var(--mr-white); font-weight: 800; text-transform: uppercase; padding: 17px 32px 19px; background-color: var(--mr-navy); margin: 0 auto 60px; display: inline-block; font-family: var(--mr-body-font); line-height: 1.2; } /* The pre-footer plate sits closer to the footer than the hero plate does to the content (36px vs 60px). Must come AFTER the block above: both selectors carry an id, so source order decides. */ #pre-footer p.tagline { margin-bottom: 36px; } /* --------------------------------------------------------------------------- * 4. Footer * ------------------------------------------------------------------------- */ /* `#main-footer.t20-footer`, not `.t20-footer`: Divi ships `#main-footer { background-color: #222222 }` and an id beats a class, so the footer rendered #222222 instead of the site's #2c2c2a. A 10-unit difference nobody spots by eye — caught by diffing computed styles against live. */ #main-footer.t20-footer, .t20-footer { background: var(--mr-dark); padding: 117px 0 80px; text-align: center; } .t20-footer #footer-info { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin: 0; } .t20-footer #footer-info a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .t20-footer #footer-info a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- * 5. Content defaults inside Divi modules * ------------------------------------------------------------------------- */ /* Divi's default row is 1080px; the legacy container was 960px. Matching it keeps line lengths and image scale identical to the old site. */ #et-main-area .et_pb_row { max-width: var(--mr-container); width: 100%; margin-left: auto; margin-right: auto; } /* Divi 5 gives every section a WHITE background by default; Divi 4 sections were transparent, so the #eaeaea content area showed through on the legacy site. Restoring transparency is what makes the converted pages sit on the right colour. Sections that genuinely set their own background still win: Divi emits those as `.et_pb_section_N { background-color: X !important }`, which outranks this generic rule. */ #main-content .et_pb_section { background-color: transparent; } .et-db #et-boc .et-l .et_pb_text a, .et_pb_text a { color: var(--mr-rust); } /* Buttons: Divi does NOT emit CSS for button.decoration.spacing (docs/divi5-reference.md §6.7), so padding has to live here. */ .t20-btn.et_pb_button, .et_pb_button.t20-btn { padding: 14px 30px !important; font-family: var(--mr-body-font); text-transform: uppercase; letter-spacing: .04em; } .t20-btn.et_pb_button:after { display: none !important; } /* --------------------------------------------------------------------------- * 6. Divi defensive fixes (docs/divi5-reference.md §6) * ------------------------------------------------------------------------- */ /* §6.6 — Divi puts display:flex on any row with vertical column alignment but never adds flex-wrap, so columns refuse to stack and the page scrolls sideways on a phone. Do not remove; verify with tools/find-overflow.js. */ @media (max-width: 980px) { .et_pb_row { flex-wrap: wrap !important; } .et_pb_row > .et_pb_column { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } } /* §6.8 — .et_pb_text_inner is position:relative, so it hijacks the containing block for absolutely-positioned overlays. Only applied to explicit overlays. */ .t20-overlay { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; } .t20-overlay .et_pb_text_inner { position: static; } .t20-overlay a { pointer-events: auto; } /* --------------------------------------------------------------------------- * 7. Scroll reveal * * Hidden ONLY under .t20-js, so a script error or a no-JS client gets all the * content rather than a blank page. * ------------------------------------------------------------------------- */ .t20-js .t20-reveal { opacity: 0; transform: translateY(16px); } .t20-js .t20-reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; } @media (prefers-reduced-motion: reduce) { .t20-js .t20-reveal { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------------- * 8. Responsive * ------------------------------------------------------------------------- */ @media (max-width: 980px) { #top-menu .container { padding: 20px 16px 0; } /* Swap the inline desktop nav for the toggle + panel. */ #top-menu nav { display: none; } #et_mobile_nav_menu { display: block; padding: 8px 0 4px; } #et-logo { float: none; margin-top: 0; margin-bottom: 20px; } #et-logo img { margin: 0 auto; max-height: 40px; } .t20-top-area--interior { padding: 70px 16px 44px; } .t20-top-area--home { padding: 70px 16px 80px; } /* iOS ignores fixed attachment and Android janks on it; the original theme already switched to scroll on iOS. */ #top-area, #pre-footer { background-attachment: scroll; } #pre-footer { padding: 64px 16px; } .tagline { font-size: 18px; padding: 14px 22px 15px; margin-bottom: 40px; } .t20-footer { padding: 60px 16px 48px; } } @media (max-width: 767px) { .tagline { font-size: 15px; padding: 12px 16px 13px; } } /* --------------------------------------------------------------------------- * 9. Rebuilt pages: /services/, /gallery/, /contact/ * * These three rendered entirely from Vertex PHP templates that died with the * theme, so their markup is rebuilt (tools/pages/*.js) and styled here. Values * are the legacy ones — see docs/design-system.md §5 for the mapping. * Original selectors are noted per block so they can be traced back. * ------------------------------------------------------------------------- */ /* --- /services/ : was .team-member on page-template-team.php --------------- */ .mr-services { padding-top: 67px; } /* #team-members */ .mr-service { position: relative; /* containing block for the avatar */ margin-bottom: 125px; } .mr-service:last-child { margin-bottom: 0; } .mr-service__card { /* .team-member + .team-member-inner */ background-color: #fff; border: 1px solid #e9e5e5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 42px 29px 30px; overflow: hidden; /* contains the floats */ } .mr-service__avatar { /* .member-image */ position: absolute; left: 65px; top: -67px; z-index: 2; border: 1px solid #c9c9c9; background-color: #fff; padding: 5px; border-radius: 60px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); line-height: 0; } .mr-service__avatar img { border-radius: 60px; display: block; width: 121px; height: 121px; } .mr-skills { /* .member-skills + .skills */ float: left; width: 207px; margin: 0 50px 0 0; padding: 44px 0 0; list-style: none; } .mr-skill { /* .skills li */ background-color: var(--mr-dark); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); padding: 14px 58px 14px 14px; border-radius: 5px; color: var(--mr-white); margin-bottom: 10px; position: relative; overflow: hidden; font-size: 14px; line-height: 1.25; } .mr-service__body { float: right; width: 630px; } /* .member-info */ .mr-service__title { /* .title h3 / span */ margin: 0 0 14px; text-align: left; font-size: 24px; font-family: var(--mr-head-font); font-weight: 400; } .mr-service__title strong { font-weight: 700; } .mr-service__title span { font-weight: 400; color: var(--mr-body); } .mr-service__body p { margin: 0; } /* --- /gallery/ : was #et_pt_gallery on page-gallery.php -------------------- */ /* The legacy grid was image-only tiles (136px tall) linking to the post, with a hover overlay. divi/blog is used so the grid stays dynamic; these rules strip it back to the original's image-only presentation. */ /* 4-across tile grid, 23px gutters — the legacy #et_pt_gallery layout (207px tiles in a 960px container, style.css:703 `margin-left: 23px`). * * Done in CSS rather than via the module's own layout attribute. Divi decides * `et_pb_blog_grid_wrapper` internally and setting * `blogGrid.decoration.layout..value.display = "grid"` did NOT produce it — * the module kept rendering as fullwidth `et_pb_blog`, one post per row, with no * error. Grid here is deterministic and exactly matches the original; the module * is still a real divi/blog, so the listing stays dynamic and VB-editable. */ /* ONLY the post list is the grid. `.et_pb_ajax_pagination_container` is its PARENT — making both a grid nested them and collapsed the inner one to a single 223px cell. */ .mr-gallery .et_pb_blog_posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; align-items: start; } .mr-gallery .et_pb_post { border: 0; padding: 0; background: transparent; margin: 0; min-width: 0; } @media (max-width: 980px) { .mr-gallery .et_pb_blog_posts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .mr-gallery .et_pb_blog_posts { grid-template-columns: 1fr; } } /* Divi's blog item markup is `a.entry-featured-image-url > img.et_pb_post_main_image` — there is no .et_pb_image_container here (that is the IMAGE module's wrapper). Targeting the wrong one left the tiles at their natural 800px height. */ .mr-gallery .entry-featured-image-url { margin: 0 0 8px; position: relative; display: block; overflow: hidden; } .mr-gallery .entry-featured-image-url img, .mr-gallery img.et_pb_post_main_image { width: 100%; height: 136px; object-fit: cover; display: block; } .mr-gallery .entry-title { font-size: 14px; line-height: 1.3; margin: 8px 0 0; font-family: var(--mr-body-font); } .mr-gallery .entry-title a { color: var(--mr-body); } .mr-gallery .entry-title a:hover { color: var(--mr-rust); } .mr-gallery .post-meta, .mr-gallery .post-content, .mr-gallery .more-link { display: none; } .mr-gallery .pagination { grid-column: 1 / -1; } .mr-gallery .entry-featured-image-url:after { content: ''; position: absolute; inset: 0; background: rgba(44, 44, 42, 0); transition: background .3s ease; } .mr-gallery .et_pb_post:hover .entry-featured-image-url:after { background: rgba(44, 44, 42, 0.45); } /* --- /contact/ : was #et-contact on page-contact.php ----------------------- */ .mr-contact .et_pb_contact_field { padding: 0 0 16px; } .mr-contact .et_pb_contact_form_label { display: block; margin-bottom: 6px; font-weight: 600; } .mr-contact input[type=text], .mr-contact input[type=email], .mr-contact textarea { width: 100%; background-color: #fff; border: 1px solid #e9e5e5; padding: 12px 14px; font-family: var(--mr-body-font); font-size: 14px; color: var(--mr-body); } .mr-contact textarea { min-height: 180px; } .mr-contact .et_pb_contact_submit, .mr-contact .et_pb_button { background-color: var(--mr-navy); color: var(--mr-white); border: 0; padding: 14px 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 0; } .mr-contact .et_pb_contact_submit:after { display: none !important; } /* --- responsive: legacy stacked these at <=767px (style.css:675-679) ------ */ @media (max-width: 980px) { .mr-services { padding-top: 40px; } .mr-service { margin-bottom: 90px; } .mr-service__card { padding: 42px 20px 30px; } .mr-skills, .mr-service__body { float: none; width: 100%; } .mr-skills { margin: 0 0 32px; padding-top: 44px; } .mr-service__avatar { left: 50%; transform: translateX(-50%); } } /* --------------------------------------------------------------------------- * 10. Suppress Divi's duplicate page title * * On pages that are NOT built with the Divi builder (the classic-editor ones: * speaking, media, client, family) Divi prints its own `h1.entry-title.main_title`. * The legacy Vertex templates never did — the #top-area banner IS the page title * — so the rebuilt pages were showing the title twice and carrying two

s. * * Scoped to `.main_title`, which Divi uses ONLY for the singular page/post title. * Post titles in the blog archive are `h2.entry-title` (no .main_title) and are * deliberately left alone — verified on /news/. * ------------------------------------------------------------------------- */ #et-main-area h1.entry-title.main_title { display: none; }