/* =========================================================================== Arborstone vehicle / parking pages (8) + /larger-storage/ --------------------------------------------------------------------------- Every value measured off LIVE on 2026-09-16 at a VERIFIED clientWidth of 1250, element by element, via computed style — not read out of Divi's inline CSS, which is split across media queries and cannot be resolved by grepping. THE FAMILY IS TWO SHAPES, and that is the single most important fact here: Shape A 20/35/50-vehicle, outdoor, larger — the unit-size skeleton, with the state buttons, the 2769 sizes grid, the CTA and the 2726 resources globals. Shape B boat, trailer, vehicle-rv, covered-parking — a bespoke layout that carries NONE of those globals and instead opens with a 40px navy strip and a grey/photo split block. Anything that keys off section POSITION breaks on one shape or the other. Shape A's components are the same ones already shipped for the unit-size family on 2026-09-16 (grey panel, white card, hero, decorative band) and are restated here at the same measured values rather than shared across mu-plugins — one family must not break another by editing a common file. =========================================================================== */ #arbor-vp { --vp-navy: var(--navy, #003A60); --vp-ink: #0E3255; /* heading ink — TEXT, not chrome; kept */ --vp-panel: rgba(120, 120, 120, .24); --vp-grey: #787878; --vp-font: var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif); font-family: var(--vp-font); } /* Divi supplied img{max-width:100%}; a Divi-free template must restate it, or an intrinsically-wide image forces sideways scroll on a phone. */ #arbor-vp img { max-width: 100%; height: auto; } /* Divi's element reset zeroes margin everywhere. Without it the browser's own p{margin:1em 0} returns and containers grow ~16px with byte-identical children — and getBoundingClientRect() does not show margins, so the symptom appears nowhere near the cause. */ #arbor-vp :where(p, ul, ol, li, h1, h2, h3, h4, h5, h6, figure, blockquote) { margin: 0; } #arbor-vp :where(ul, ol) { padding: 0 0 0 1.1em; } .vp-in { width: 91%; max-width: 1317px; margin: 0 auto; } /* --- hero ----------------------------------------------------------------- */ .vp-hero { background-color: #fff; background-image: var(--vp-hero); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; padding: 24px 0 23px; min-height: 295px; display: flex; align-items: center; } .vp-hero h1 { font-size: 54px; line-height: 70.2px; font-weight: 700; color: var(--vp-ink); text-align: left; padding: 0 0 10px; } /* --- the 40px navy strip that opens every Shape B page -------------------- */ .vp-strip { height: 40px; background: var(--vp-navy); } /* --- sections ------------------------------------------------------------- */ .vp-sec { background: #fff; padding: 25px 0 32px; } .vp-sec-navy { background: var(--vp-navy); } .vp-sec-grey { background: var(--vp-grey); } .vp-sec + .vp-sec { padding-top: 0; } #arbor-vp .vp-sec-navy :where(h1,h2,h3,h4,p,li,a), #arbor-vp .vp-sec-grey :where(h1,h2,h3,h4,p,li) { color: #fff; } /* --- grey / photo split block --------------------------------------------- */ /* Divi builds this as a 2-column row with the pattern PNG tiled over a grey ground, the copy in a padded left column and the photo as the RIGHT COLUMN'S background — so the photo is a background image, not an , and it is invisible to any markup-only extractor. */ .vp-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--vp-grey) url('/wp-content/uploads/2025/03/circle-background-pattern.png') left top repeat; } .vp-split-text { padding: 80px; } /* ⚠️ These MUST be id-scoped and carry the element selector. `.vp-split-text h3` is (0,1,1) and loses to `#arbor-vp .vp-sec h3` at (1,1,1), which silently rendered the split heading 23px navy centred instead of 35px white left. Same specificity failure that produced the navy-on-navy CTA on /acquisitions/ and the ghost list markers on /find-a-unit/. */ .vp-split-photo { background-image: var(--vp-photo); background-size: cover; background-position: 50% 50%; min-height: 420px; } /* --- panels and cards ----------------------------------------------------- */ .vp-panel { background: var(--vp-panel); border-radius: 20px; max-width: 1466px; padding: 25px 50px; margin: 18px auto 0; } .vp-panel-white { background: #fff; } .vp-card { background: #fff; border-radius: 20px; padding: 20px 30px; } .vp-card + .vp-card { margin-top: 31px; } /* ⚠️ Divi hand-tunes each navy card's BOTTOM padding to fake equal heights in a row — measured values run from 20px to 182px, and they are wrong at every viewport except the one they were eyeballed at. The grid equalises properly, so the hand-tuning is dropped and the padding is uniform. */ .vp-card-navy { background: var(--vp-navy); color: #fff; } /* The check icon, which Divi wraps in its own

. Unwrapped to a paragraph — see the build script: an

holding one decorative image is a screen-reader trap, and 17 of them shipped across these nine pages. */ .vp-icon { text-align: center; padding: 0 0 8px; } .vp-icon img { display: inline-block; width: 66px; height: auto; } /* --- grids ---------------------------------------------------------------- */ .vp-grid { display: grid; gap: 24px; align-items: stretch; } .vp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vp-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vp-cell { display: flex; flex-direction: column; gap: 16px; } .vp-cell > .vp-card { flex: 1; } /* "Properties that have covered parking" — Divi styles these as grey rounded COLUMNS containing a button, not as buttons. */ .vp-cell-pill { background: var(--vp-grey); border-radius: 20px; padding: 0; align-items: stretch; } #arbor-vp .vp-cell-pill .vp-btn { background: transparent; width: 100%; min-width: 0; border-radius: 20px; } #arbor-vp .vp-cell-pill:hover { background: #5f5f5f; } /* --- headings outside cards ----------------------------------------------- */ #arbor-vp .vp-sec h2 { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--vp-ink); text-align: center; padding: 0 0 10px; } #arbor-vp .vp-sec h3 { font-size: 23px; line-height: 27.6px; font-weight: 700; color: var(--vp-ink); text-align: center; padding: 0 0 10px; } #arbor-vp .vp-sec > .vp-in > .vp-cell { padding: 13px 0 11px; } #arbor-vp .vp-sec p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000; padding: 0 0 16px; } #arbor-vp .vp-sec-navy p, #arbor-vp .vp-sec-grey p { color: #fff; } #arbor-vp .vp-sec a:not(.vp-btn) { color: var(--vp-navy); text-decoration: underline; } #arbor-vp .vp-sec-navy a:not(.vp-btn), #arbor-vp .vp-sec-grey a:not(.vp-btn) { color: #fff; } .vp-fig { margin: 0 0 16px; } .vp-fig img { display: block; margin: 0 auto; } /* --- buttons -------------------------------------------------------------- */ /* Divi paints these #787878 grey. Kept: the identical treatment shipped on /find-a-unit/ and on the unit-size pages, so the family already looks like this. */ .vp-btn { display: inline-block; background: var(--vp-grey); color: #fff; font-family: var(--vp-font); font-size: 20px; line-height: 34px; font-weight: 500; padding: 6px 20px; border-radius: 8px; min-width: 190px; text-align: center; text-decoration: none; align-self: flex-start; transition: background .15s ease; } #arbor-vp a.vp-btn, #arbor-vp a.vp-btn:hover, #arbor-vp a.vp-btn:focus-visible { color: #fff; text-decoration: none; } #arbor-vp a.vp-btn:hover { background: #5f5f5f; } .vp-split-text .vp-btn { background: #fff; color: var(--vp-navy); } #arbor-vp .vp-split-text a.vp-btn, #arbor-vp .vp-split-text a.vp-btn:hover { background: #fff; color: var(--vp-navy); } /* --- decorative photo band (Shape A only) --------------------------------- */ /* Live serves the 915 KB ORIGINAL slide3.png behind an EMPTY 408px strip. The sized variants WordPress already generated are used instead. */ .vp-band { height: 408px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-image: url('/wp-content/uploads/2025/01/slide3-1280x408.png'); } @media (min-width: 1281px) { .vp-band { background-image: url('/wp-content/uploads/2025/01/slide3-1536x490.png'); } } /* --- shared globals: state buttons, sizes grid, CTA, resources ------------- */ .vp-states { background: var(--vp-navy); padding: 18px 0 24px; } .vp-states-lead { font-size: 28px; line-height: 27.2px; font-weight: 600; color: #fff; text-align: center; padding: 0 0 18px; } .vp-states-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; justify-items: center; list-style: none; padding: 0; } .vp-sizes, .vp-res { background: #fff; padding: 0 0 2px; } .vp-sech { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--vp-ink); text-align: center; padding: 0 0 10px; } .vp-sizegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 18px 0 24px; list-style: none; } .vp-sizecard { text-align: center; } .vp-sizecard-fig { height: 210px; display: flex; align-items: flex-end; justify-content: center; margin: 0 0 12px; } .vp-sizecard img { display: block; max-height: 100%; width: auto; object-fit: contain; } .vp-sizecard h2 { font-size: 24px; line-height: 24px; font-weight: 700; color: var(--vp-ink); text-align: center; padding: 0 0 10px; } #arbor-vp .vp-sizelinks { list-style: none; padding: 0; } #arbor-vp .vp-sizelinks li { padding: 4px 0; } #arbor-vp .vp-sizelinks a { color: var(--vp-navy); font-size: 16px; line-height: 27.2px; font-weight: 500; text-decoration: none; } #arbor-vp .vp-sizelinks a:hover { text-decoration: underline; } .vp-cta { background: var(--vp-navy); padding: 18px 0; } .vp-cta .vp-in { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .vp-cta-lead { font-size: 20px; line-height: 34px; font-weight: 700; color: #fff; } /* White on navy, not Divi's grey on navy — the page's only conversion action. */ .vp-btn-solid { background: #fff; color: var(--vp-navy); border-radius: 3px; font-weight: 700; min-width: 0; } #arbor-vp a.vp-btn.vp-btn-solid, #arbor-vp a.vp-btn.vp-btn-solid:hover { background: #fff; color: var(--vp-navy); } .vp-resgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 18px 0 24px; list-style: none; } /* Divi paints these #fff on a 24%-grey panel — about 1.2:1, failing WCAG AA. */ #arbor-vp .vp-resgrid li { background: var(--vp-panel); border-radius: 20px; min-height: 152px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; } #arbor-vp .vp-resgrid a { color: var(--vp-navy); font-size: 18px; line-height: 26px; font-weight: 700; text-decoration: none; } #arbor-vp .vp-resgrid a:hover { text-decoration: underline; } /* --- location directories + base footer (Divi globals 170 / 220 / 70) ------ */ .vp-dir { background: var(--vp-navy); padding: 24px 0 9px; } .vp-dir-ok { padding-top: 32px; } .vp-dirhead { text-align: center; padding: 0 0 14px; } #arbor-vp .vp-dirhead, #arbor-vp .vp-dirhead a { color: #fff; font-size: 20px; line-height: 28px; font-weight: 700; } .vp-dirheads-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #arbor-vp .vp-dircol { list-style: none; padding: 0; } #arbor-vp .vp-dircol li { color: #fff; font-size: 15px; line-height: 24px; padding: 0 0 6px; } #arbor-vp .vp-dir a { color: #fff; text-decoration: none; } #arbor-vp .vp-dir a:hover { text-decoration: underline; } .vp-dirgrid { display: grid; gap: 20px; padding: 18px 0; } .vp-dirgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vp-dirgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vp-basefoot { background: var(--vp-navy); padding: 24px 0 32px; text-align: center; } #arbor-vp .vp-basefoot p { color: #fff; font-size: 16px; line-height: 27.2px; padding: 0 0 12px; } #arbor-vp .vp-basefoot p:last-child { padding-bottom: 0; } #arbor-vp .vp-basefoot a { color: #fff; text-decoration: none; } #arbor-vp .vp-basefoot a:hover { text-decoration: underline; } .vp-footlogo img { display: block; margin: 8px auto 12px; max-width: 405px; } /* =========================================================================== CONTAINER OVERRIDES — MUST STAY LAST --------------------------------------------------------------------------- `#arbor-vp .vp-card h2` and `#arbor-vp .vp-sec h2` are BOTH (1,1,1). A card lives inside a section, so with equal specificity the rule that appears LATER in this file wins — and with the section block last, every card heading rendered 28px centred navy instead of 19px left, and the split heading 23px navy centred instead of 35px white left. Nothing about the selectors looked wrong; only source order was. Anything that styles content INSIDE .vp-card / .vp-card-navy / .vp-split-text belongs in this block, at the bottom of the file. =========================================================================== */ #arbor-vp .vp-card h2, #arbor-vp .vp-card h3 { font-size: 19px; line-height: 24px; font-weight: 700; color: var(--vp-ink); text-align: left; padding: 0 0 10px; } #arbor-vp .vp-card p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000; text-align: left; padding: 0 0 16px; } #arbor-vp .vp-card p:last-child { padding-bottom: 0; } #arbor-vp .vp-card a:not(.vp-btn) { color: var(--vp-navy); text-decoration: underline; } #arbor-vp .vp-card-navy h2, #arbor-vp .vp-card-navy h3, #arbor-vp .vp-card-navy p, #arbor-vp .vp-card-navy li, #arbor-vp .vp-card-navy strong, #arbor-vp .vp-card-navy a:not(.vp-btn) { color: #fff; } #arbor-vp .vp-split-text h3 { font-size: 35px; line-height: 42px; font-weight: 700; color: #fff; text-align: left; padding: 0 0 10px; } #arbor-vp .vp-split-text h2 { font-size: 28px; line-height: 34px; color: #fff; text-align: left; } #arbor-vp .vp-split-text p, #arbor-vp .vp-split-text li, #arbor-vp .vp-split-text strong { color: #fff; text-align: left; } #arbor-vp .vp-split-text p { padding: 0 0 16px; } /* 🔴 The reset `#arbor-vp :where(ul, ol)` is (1,0,0) — an ID beats every unscoped class, so `.vp-states-btns { list-style: none; padding: 0 }` at (0,1,0) lost and these three component lists rendered with UA DISC BULLETS and a 17.6px indent. Measured live on /20-vehicle-storage/ 2026-09-17, so it shipped that way. NOT fixed by neutralising the reset: ported card content contains real