/* =========================================================================== 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-st { --st-navy: var(--navy, #003A60); --st-ink: #0E3255; /* heading ink — TEXT, not chrome; kept */ --st-panel: rgba(120, 120, 120, .24); --st-grey: #787878; --st-font: var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif); font-family: var(--st-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-st 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-st :where(p, ul, ol, li, h1, h2, h3, h4, h5, h6, figure, blockquote) { margin: 0; } #arbor-st :where(ul, ol) { padding: 0 0 0 1.1em; } .st-in { width: 91%; max-width: 1317px; margin: 0 auto; } /* --- hero ----------------------------------------------------------------- */ .st-hero { background-color: #fff; background-image: var(--st-hero); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; padding: 24px 0 23px; min-height: 295px; display: flex; align-items: center; } .st-hero h1 { font-size: 54px; line-height: 70.2px; font-weight: 700; color: var(--st-ink); text-align: left; padding: 0 0 10px; } /* --- the 40px navy strip that opens every Shape B page -------------------- */ .st-strip { height: 40px; background: var(--st-navy); } /* --- sections ------------------------------------------------------------- */ .st-sec { background: #fff; padding: 25px 0 32px; } .st-sec-navy { background: var(--st-navy); } .st-sec-grey { background: var(--st-grey); } .st-sec + .st-sec { padding-top: 0; } #arbor-st .st-sec-navy :where(h1,h2,h3,h4,p,li,a), #arbor-st .st-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. */ .st-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--st-grey) url('/wp-content/uploads/2025/03/circle-background-pattern.png') left top repeat; } .st-split-text { padding: 80px; } /* ⚠️ These MUST be id-scoped and carry the element selector. `.st-split-text h3` is (0,1,1) and loses to `#arbor-st .st-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/. */ .st-split-photo { background-image: var(--st-photo); background-size: cover; background-position: 50% 50%; min-height: 420px; } /* --- panels and cards ----------------------------------------------------- */ .st-panel { background: var(--st-panel); border-radius: 20px; max-width: 1466px; padding: 25px 50px; margin: 18px auto 0; } .st-panel-white { background: #fff; } /* --- components this family adds on top of the vehicle vocabulary ---------- */ /* A NAVY panel holding GREY cards — the inverse pairing, on /dumpster-rental/ and /junk-removal/. Measured, not guessed: row #0E3255 r20, modules #787878 r20. */ .st-panel-navy { background: var(--st-navy); } /* /military-storage/ puts a photo behind a navy panel (de.png). */ .st-panel-photo { background-image: var(--st-panelbg); background-size: cover; background-position: 50% 50%; background-blend-mode: multiply; } /* /student-storage/: a translucent navy card sitting over a full-bleed photo section, Divi's rgba(14,50,85,.86). The section supplies the photo. */ .st-panel-quote { background: rgba(0, 58, 96, .86); } /* .st-card-grey's background is declared in the MUST-STAY-LAST block: .st-card is declared BELOW this point and would otherwise win the tie. */ /* /student-storage/'s 5-up numbered tips are navy rounded COLUMNS, not cards. Background likewise deferred to the MUST-STAY-LAST block -- .st-cell-pill is declared below. */ /* A content section carrying its own photo (student s2/s8, and both service pages). */ .st-sec-photo { background-image: var(--st-secbg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .st-card { background: #fff; border-radius: 20px; padding: 20px 30px; } .st-card + .st-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. */ .st-card-navy { background: var(--st-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. */ .st-icon { text-align: center; padding: 0 0 8px; } .st-icon img { display: inline-block; width: 66px; height: auto; } /* --- grids ---------------------------------------------------------------- */ .st-grid { display: grid; gap: 24px; align-items: stretch; } .st-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .st-cell { display: flex; flex-direction: column; gap: 16px; } .st-cell > .st-card { flex: 1; } /* "Properties that have covered parking" — Divi styles these as grey rounded COLUMNS containing a button, not as buttons. */ .st-cell-pill { background: var(--st-grey); border-radius: 20px; padding: 0; align-items: stretch; } #arbor-st .st-cell-pill .st-btn { background: transparent; width: 100%; min-width: 0; border-radius: 20px; } #arbor-st .st-cell-pill:hover { background: #5f5f5f; } /* --- headings outside cards ----------------------------------------------- */ #arbor-st .st-sec h2 { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--st-ink); text-align: center; padding: 0 0 10px; } #arbor-st .st-sec h3 { font-size: 23px; line-height: 27.6px; font-weight: 700; color: var(--st-ink); text-align: center; padding: 0 0 10px; } #arbor-st .st-sec > .st-in > .st-cell { padding: 13px 0 11px; } #arbor-st .st-sec p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000; padding: 0 0 16px; } #arbor-st .st-sec-navy p, #arbor-st .st-sec-grey p { color: #fff; } #arbor-st .st-sec a:not(.st-btn) { color: var(--st-navy); text-decoration: underline; } #arbor-st .st-sec-navy a:not(.st-btn), #arbor-st .st-sec-grey a:not(.st-btn) { color: #fff; } .st-fig { margin: 0 0 16px; } .st-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. */ .st-btn { display: inline-block; background: var(--st-grey); color: #fff; font-family: var(--st-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-st a.st-btn, #arbor-st a.st-btn:hover, #arbor-st a.st-btn:focus-visible { color: #fff; text-decoration: none; } #arbor-st a.st-btn:hover { background: #5f5f5f; } .st-split-text .st-btn { background: #fff; color: var(--st-navy); } #arbor-st .st-split-text a.st-btn, #arbor-st .st-split-text a.st-btn:hover { background: #fff; color: var(--st-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. */ .st-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) { .st-band { background-image: url('/wp-content/uploads/2025/01/slide3-1536x490.png'); } } /* --- shared globals: state buttons, sizes grid, CTA, resources ------------- */ .st-states { background: var(--st-navy); padding: 18px 0 24px; } .st-states-lead { font-size: 28px; line-height: 27.2px; font-weight: 600; color: #fff; text-align: center; padding: 0 0 18px; } .st-states-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; justify-items: center; list-style: none; padding: 0; } .st-sizes, .st-res { background: #fff; padding: 0 0 2px; } .st-sech { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--st-ink); text-align: center; padding: 0 0 10px; } .st-sizegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 18px 0 24px; list-style: none; } .st-sizecard { text-align: center; } .st-sizecard-fig { height: 210px; display: flex; align-items: flex-end; justify-content: center; margin: 0 0 12px; } .st-sizecard img { display: block; max-height: 100%; width: auto; object-fit: contain; } .st-sizecard h2 { font-size: 24px; line-height: 24px; font-weight: 700; color: var(--st-ink); text-align: center; padding: 0 0 10px; } #arbor-st .st-sizelinks { list-style: none; padding: 0; } #arbor-st .st-sizelinks li { padding: 4px 0; } #arbor-st .st-sizelinks a { color: var(--st-navy); font-size: 16px; line-height: 27.2px; font-weight: 500; text-decoration: none; } #arbor-st .st-sizelinks a:hover { text-decoration: underline; } .st-cta { background: var(--st-navy); padding: 18px 0; } .st-cta .st-in { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .st-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. */ .st-btn-solid { background: #fff; color: var(--st-navy); border-radius: 3px; font-weight: 700; min-width: 0; } #arbor-st a.st-btn.st-btn-solid, #arbor-st a.st-btn.st-btn-solid:hover { background: #fff; color: var(--st-navy); } .st-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-st .st-resgrid li { background: var(--st-panel); border-radius: 20px; min-height: 152px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; } #arbor-st .st-resgrid a { color: var(--st-navy); font-size: 18px; line-height: 26px; font-weight: 700; text-decoration: none; } #arbor-st .st-resgrid a:hover { text-decoration: underline; } /* --- location directories + base footer (Divi globals 170 / 220 / 70) ------ */ .st-dir { background: var(--st-navy); padding: 24px 0 9px; } .st-dir-ok { padding-top: 32px; } .st-dirhead { text-align: center; padding: 0 0 14px; } #arbor-st .st-dirhead, #arbor-st .st-dirhead a { color: #fff; font-size: 20px; line-height: 28px; font-weight: 700; } .st-dirheads-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #arbor-st .st-dircol { list-style: none; padding: 0; } #arbor-st .st-dircol li { color: #fff; font-size: 15px; line-height: 24px; padding: 0 0 6px; } #arbor-st .st-dir a { color: #fff; text-decoration: none; } #arbor-st .st-dir a:hover { text-decoration: underline; } .st-dirgrid { display: grid; gap: 20px; padding: 18px 0; } .st-dirgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-dirgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .st-basefoot { background: var(--st-navy); padding: 24px 0 32px; text-align: center; } #arbor-st .st-basefoot p { color: #fff; font-size: 16px; line-height: 27.2px; padding: 0 0 12px; } #arbor-st .st-basefoot p:last-child { padding-bottom: 0; } #arbor-st .st-basefoot a { color: #fff; text-decoration: none; } #arbor-st .st-basefoot a:hover { text-decoration: underline; } .st-footlogo img { display: block; margin: 8px auto 12px; max-width: 405px; } /* =========================================================================== CONTAINER OVERRIDES — MUST STAY LAST --------------------------------------------------------------------------- `#arbor-st .st-card h2` and `#arbor-st .st-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 .st-card / .st-card-navy / .st-split-text belongs in this block, at the bottom of the file. =========================================================================== */ #arbor-st .st-card h2, #arbor-st .st-card h3 { font-size: 19px; line-height: 24px; font-weight: 700; color: var(--st-ink); text-align: left; padding: 0 0 10px; } #arbor-st .st-card p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000; text-align: left; padding: 0 0 16px; } #arbor-st .st-card p:last-child { padding-bottom: 0; } #arbor-st .st-card a:not(.st-btn) { color: var(--st-navy); text-decoration: underline; } #arbor-st .st-card-navy h2, #arbor-st .st-card-navy h3, #arbor-st .st-card-navy p, #arbor-st .st-card-navy li, #arbor-st .st-card-navy strong, #arbor-st .st-card-navy a:not(.st-btn) { color: #fff; } #arbor-st .st-split-text h3 { font-size: 35px; line-height: 42px; font-weight: 700; color: #fff; text-align: left; padding: 0 0 10px; } #arbor-st .st-split-text h2 { font-size: 28px; line-height: 34px; color: #fff; text-align: left; } #arbor-st .st-split-text p, #arbor-st .st-split-text li, #arbor-st .st-split-text strong { color: #fff; text-align: left; } #arbor-st .st-split-text p { padding: 0 0 16px; } /* Grey and navy cards, navy pills and the quote card all invert their text. These sit in the MUST-STAY-LAST block for the same reason the card rules do: `#arbor-st .st-sec h2` ties them on specificity, so only order decides. */ #arbor-st .st-card-grey h2, #arbor-st .st-card-grey h3, #arbor-st .st-card-grey p, #arbor-st .st-card-grey li, #arbor-st .st-card-grey strong, #arbor-st .st-card-grey a:not(.st-btn), #arbor-st .st-cell-pill-navy h2, #arbor-st .st-cell-pill-navy h3, #arbor-st .st-cell-pill-navy p, #arbor-st .st-cell-pill-navy li, #arbor-st .st-panel-quote h2, #arbor-st .st-panel-quote h3, #arbor-st .st-panel-quote p, #arbor-st .st-panel-quote li, #arbor-st .st-panel-navy > .st-in > h2, #arbor-st .st-panel-photo p, #arbor-st .st-panel-photo h2, #arbor-st .st-panel-photo h3, #arbor-st .st-panel-photo li { color: #fff; } /* 🔴 THE BUG THIS BLOCK EXISTS FOR, HIT TWICE. `.st-card-grey` (0,1,0) was declared ABOVE `.st-card{background:#fff}` (0,1,0). Equal specificity -> the later rule wins -> the cards rendered WHITE, while the text-colour rules below correctly painted the text white. Result: 9 elements on /dumpster-rental/ and 10 on /junk-removal/ at a contrast ratio of exactly 1.0 -- the content was all present and completely invisible. `.st-cell-pill-navy` had the identical problem against `.st-cell-pill`, which rendered /student-storage/'s five numbered pills GREY instead of navy. That one stayed legible (white on grey), so a contrast check alone would not have found it -- only comparing the computed background against the measured live value did. Both backgrounds are therefore declared HERE, after every base rule. */ #arbor-st .st-card-grey { background: var(--st-grey); } #arbor-st .st-cell-pill-navy { background: var(--st-navy); } #arbor-st .st-cell-pill-navy { padding: 20px; border-radius: 20px; } #arbor-st .st-cell-pill-navy .st-card { background: transparent; padding: 0; } #arbor-st .st-panel-quote { padding: 75px 50px; } #arbor-st .st-panel-quote h2 { text-align: center; font-size: 28px; line-height: 34px; } /* 🔴 The reset `#arbor-st :where(ul, ol)` is (1,0,0) — an ID beats every unscoped class, so `.st-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