/* Global site footer (.ht-footer). * * Extracted from the home-test bundle for the same reason global-header.css was: * the footer renders on every template now, and pulling in home-test/lower.css to * style it would drag the whole homepage section sheet onto pages that have no * such sections. * * Everything is scoped under .vd-ht, which footer.php puts on a wrapper div * around the footer -- never on , because the bare .vd-ht element rules * below would restyle the entire page from there. * * Source: assets/css/home-test/base.css (tokens + .vd-ht reset) * assets/css/home-test/lower.css (.ht-footer and .ht-social-link rules) */ :root { --ht-ivory: #F7F3EA; /* light section bg (5) */ --ht-beige: #EEE8D4; /* cards, headings on dark (23) */ --ht-gold: #BA9B37; /* accent, eyebrows, buttons, icons (79) */ --ht-brown: #4B3D2A; /* warm brown: headings on light, borders (50) */ --ht-dark: #000000; /* dark section bg (61) */ --ht-white: #FFFFFF; /* (90) */ --ht-text: #000000; /* body copy on light — Figma uses pure black */ --ht-muted: #4B3D2A; /* secondary copy — warm brown, never a cool grey */ --ht-gold-deep: #96741F; /* NOT in Figma: AA-contrast gold for small text on ivory */ --ht-btn-dark: #A6892F; /* NOT in Figma: button hover only */ /* Type scale, from the Figma frame. */ --ht-fs-body: 15.5px; --ht-lh-body: 24px; --ht-fs-h2: 30px; --ht-lh-h2: 44px; --ht-fs-sub: 18px; --ht-lh-sub: 24px; --ht-fs-btn: 16px; --ht-lh-btn: 16px; --ht-fs-eyebrow: 18px; --ht-lh-eyebrow: 27.9px; --ht-radius: 5px; /* all 24 buttons in the design */ } .vd-ht { margin: 0; overflow-x: clip; background: var(--ht-white); color: var(--ht-text); font-family: "Sofia Pro", system-ui, sans-serif; font-size: var(--ht-fs-body); font-weight: 300; /* Figma body copy is Sofia Pro Light */ line-height: var(--ht-lh-body); } .vd-ht *, .vd-ht *::before, .vd-ht *::after { box-sizing: border-box; } .vd-ht img { display: block; max-width: 100%; } .vd-ht h1, .vd-ht h2, .vd-ht h3, .vd-ht h4, .vd-ht h5, .vd-ht h6 { margin-top: 0; color: inherit; font-family: "Sofia Pro", system-ui, sans-serif; font-weight: 700; /* there is no 800 face — 800 silently resolved to Black 900 */ } .vd-ht h1 { font-size: clamp(2.75rem, 3.1vw, 3.5rem); line-height: 1.08; } .vd-ht h2 { font-size: var(--ht-fs-h2); line-height: var(--ht-lh-h2); letter-spacing: 0; color: var(--ht-brown); } .vd-ht h3 { font-size: var(--ht-fs-sub); font-weight: 600; line-height: var(--ht-lh-sub); } .vd-ht p { margin-top: 0; } .vd-ht a { color: inherit; } .vd-ht .ht-footer { box-sizing: border-box; position: relative; } .vd-ht .ht-footer * { box-sizing: border-box; } .vd-ht .ht-footer a:focus-visible { outline: 3px solid var(--ht-gold); outline-offset: 4px; } .vd-ht .ht-footer { background-color: transparent; background-image: url("/wp-content/uploads/2026/07/Footer-texture.webp"), linear-gradient(90deg, #000000 0%, #4B3D2A 100%); background-position: center, 0 0; background-repeat: no-repeat, no-repeat; background-size: cover, auto; color: var(--ht-white); isolation: isolate; min-height: 686px; overflow: hidden; /* Figma pads 80/80 and centres a 512px column, landing Frame 80 at y+87. The bottom is 10px short because the legal block's three CSS line boxes are 10px taller than Figma's trimmed text node. */ padding: 87px 40px 77px; } .vd-ht .ht-footer-inner { margin-inline: auto; max-width: 1438px; /* Figma Frame 80: x 241 -> 1679 */ width: 100%; } .vd-ht .ht-footer-grid { display: grid; gap: 42px 5.8414%; grid-template-columns: 415fr 257fr 257fr 257fr; } .vd-ht .ht-footer-column { min-width: 0; } .vd-ht .ht-footer-logo { display: block; max-width: 250px; } .vd-ht .ht-footer-logo img { display: block; height: auto; max-width: 100%; } .vd-ht .ht-footer-brand > p { color: var(--ht-white); font-size: 24px; font-weight: 300; line-height: 28px; margin: 44px 0; max-width: 415px; } .vd-ht .ht-social-links { display: flex; flex-wrap: wrap; gap: 20px; } .vd-ht .ht-social-link { align-items: center; color: var(--ht-white); display: inline-flex; justify-content: center; transition: color 160ms ease; } .vd-ht .ht-social-link:hover { color: var(--ht-gold); } .vd-ht .ht-social-link svg { height: 40px; width: 40px; } .vd-ht .ht-footer-column h2 { color: var(--ht-white); font-size: 24px; font-weight: 700; line-height: 28px; margin: 0 0 29px; } .vd-ht .ht-footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .vd-ht .ht-footer-links li { display: flex; } .vd-ht .ht-footer-links a { color: var(--ht-white); font-size: 24px; font-weight: 300; line-height: 28px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.7); text-underline-offset: 3px; } .vd-ht .ht-footer-links a:hover, .vd-ht .ht-footer-legal-links a:hover { color: var(--ht-gold); } .vd-ht .ht-footer-practice .ht-footer-links a { align-items: center; display: inline-flex; gap: 11px; text-decoration: none; } .vd-ht .ht-footer-practice .ht-footer-links .ht-footer-link-label { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.7); text-underline-offset: 3px; } .vd-ht .ht-footer-practice .ht-footer-links span[aria-hidden] { background: center / 6px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 13' fill='none' stroke='%23BA9B37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 4.6 6.5 1 11.5'/%3E%3C/svg%3E"); color: transparent; flex: 0 0 6px; font-size: 0; height: 13px; line-height: 0; width: 6px; } .vd-ht .ht-footer-contact address, .vd-ht .ht-footer-contact p { color: var(--ht-white); font-size: 24px; font-style: normal; font-weight: 300; line-height: 28px; margin: 0 0 30px; } .vd-ht .ht-footer-contact address { margin-bottom: 22px; max-width: 257px; } .vd-ht .ht-footer-contact .ht-footer-phone, .vd-ht .ht-footer-contact .ht-footer-email { color: var(--ht-gold); font-weight: 700; } .vd-ht .ht-footer-contact .ht-footer-phone a { color: var(--ht-white); font-weight: 300; text-decoration: underline; text-underline-offset: 3px; } .vd-ht .ht-footer-contact .ht-footer-email { font-weight: 600; } .vd-ht .ht-footer-contact a { color: inherit; } .vd-ht .ht-footer-email a { text-decoration: underline; text-underline-offset: 3px; } .vd-ht .ht-footer-bottom { color: var(--ht-white); font-size: 18px; font-weight: 300; line-height: 28px; margin-top: 82px; text-align: center; } .vd-ht .ht-footer-legal-links { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 15px; } .vd-ht .ht-footer-legal-links span { background: var(--ht-white); font-size: 0; height: 18px; margin-inline: -1px; width: 2px; } .vd-ht .ht-footer-legal-links a { color: var(--ht-white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.7); text-underline-offset: 3px; } .vd-ht .ht-footer-bottom p { font-weight: 300; margin: 0; } @media (min-width: 992px) and (max-width: 1439px) { .vd-ht .ht-footer-column h2, .vd-ht .ht-footer-links a, .vd-ht .ht-footer-contact address, .vd-ht .ht-footer-contact p, .vd-ht .ht-footer-brand > p { font-size: 18px; line-height: 24px; } .vd-ht .ht-footer-contact p, .vd-ht .ht-footer-links a { overflow-wrap: anywhere; } } @media (max-width: 991px) { .vd-ht .ht-footer { min-height: 0; padding: 78px 50px 42px; } .vd-ht .ht-footer-grid { grid-template-columns: 1fr; } .vd-ht .ht-footer-brand { order: 1; } .vd-ht .ht-footer-contact { order: 2; } .vd-ht .ht-footer-practice { order: 3; } .vd-ht .ht-footer-quick { order: 4; } .vd-ht .ht-footer-column h2, .vd-ht .ht-footer-links a, .vd-ht .ht-footer-contact address, .vd-ht .ht-footer-contact p, .vd-ht .ht-footer-brand > p { font-size: 19px; line-height: 26px; } .vd-ht .ht-footer-brand > p { margin: 32px 0; max-width: 440px; } .vd-ht .ht-footer-contact address { max-width: none; } .vd-ht .ht-footer-bottom { margin-top: 52px; } } @media (max-width: 479px) { .vd-ht .ht-footer { padding: 68px 24px 38px; } .vd-ht .ht-footer-grid { gap: 42px; } .vd-ht .ht-footer-column h2, .vd-ht .ht-footer-links a, .vd-ht .ht-footer-contact address, .vd-ht .ht-footer-contact p, .vd-ht .ht-footer-brand > p { font-size: 17px; line-height: 24px; } .vd-ht .ht-footer-social-links { gap: 16px; } .vd-ht .ht-footer-bottom { font-size: 12px; line-height: 1.6; } .vd-ht .ht-footer-legal-links { gap: 9px; margin-bottom: 12px; } .vd-ht .ht-footer-legal-links span { height: 13px; } } @media (prefers-reduced-motion: reduce) { .vd-ht .ht-social-link { transition: none; } }