/* ========================================================================== Dima Group - site footer NO FIGMA ARTBOARD EXISTS FOR A FOOTER. Every value in this file is an ENGINEERING PROPOSAL awaiting client sign-off, and each one is reasoned from something the design already approved rather than picked. The reasoning is written down at each decision as NEEDS DESIGN, so a designer reviewing this surface can argue with a stated premise instead of guessing at a number. What is NOT invented here: the ground, the row, the type styles and the colours. The footer stands on the existing `.dima-section--dark` modifier (base.css) - ink-800, #161616 - and reuses the 1328px row recipe shared by every Home section. It reads every colour through the semantic aliases that modifier re-declares, never through a raw ramp step, so it would follow the ground correctly if the footer were ever moved onto a different one. NEEDS DESIGN - why dark: the CTA band directly above is gold-dark (#332A12). Ink-800 under it is a deliberate step DOWN in both lightness and chroma, so the page ends on a quieter note than it makes its offer on. Putting the footer back on the light ground would have made the gold band the page's last loud surface with nothing to resolve it. Loaded after about.css and BEFORE responsive.css. Unlike the other section sheets this one carries its OWN media queries: the footer's narrow-viewport behaviour is entirely self-contained, and responsive.css is a shared surface that does not need to grow for it. Only the theme's three canonical breakpoints are used - 1200px, 900px, 600px. Do not add a fourth; the theme already carries competing values elsewhere and that is a known defect. ========================================================================== */ /* Shared inner row: the same 1328px content row every Home section sits on, inside the 56px artboard gutter and capped at the 1440px design width. The footer aligns to the CTA band above it because it uses the identical recipe, not because the two numbers happen to match. */ .dima-footer__inner { width: 100%; max-width: calc(var(--dima-layout-row) + 2 * var(--dima-layout-row-gutter)); margin-inline: auto; padding-inline: var(--dima-layout-row-gutter); } /* ========================================================================== 1. Top row - brand, services, company ========================================================================== */ /* NEEDS DESIGN: three columns at a 64px gap. --dima-space-9 is the section's own vertical padding, so the horizontal rhythm between the columns matches the vertical rhythm around the whole block; the footer reads as one field rather than as three stacked lists. flex-start, not stretch: the three columns are different heights by nature (the brand block is a mark plus two short lines, the services list is four rows) and centering them would leave the headings on different baselines. */ /* An explicit three-track GRID, not flex. This was `display: flex` with `flex: 0 1 380px` on the brand and `flex: 1 1 auto` on both nav groups. Both groups then grew by the same amount from their own content width, so the services grid stretched, its two sub-columns widened, the link text stayed left-aligned inside them, and the leftover turned into roughly 220px of dead air between the last service and COMPANY - which was itself shoved against the right edge. The three columns never sat on a shared rhythm. Measured at 1440px before the change. 1 : 2.4 : 1 is not arbitrary. The middle track carries eight items in two sub-columns, and the longest title ("Motorized Shading & Window Treatments") needs about 305px to hold one line; 2.4fr of a 1328px row less two 64px gaps gives sub-columns of ~311px. The outer tracks carry a three-line wordmark and three short links, which 272px holds comfortably. */ .dima-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); align-items: start; gap: var(--dima-space-9); /* 64px */ } /* No width of its own: the grid track above owns it. At 1440px that is about 272px - wide enough that the tagline, an arbitrary length the client controls, sets on two or three lines rather than one word per line. NEEDS DESIGN. */ .dima-footer__brand { display: flex; flex-direction: column; gap: var(--dima-space-3); /* 16px */ } /* NEEDS DESIGN: 72px against the header's 96px. The mark is the same asset in both places, so the size is what says which one is the primary occurrence. */ .dima-footer__logo { display: inline-flex; align-items: center; max-width: 72px; text-decoration: none; } /* the_custom_logo() emits .custom-logo-link, which carries none of our classes - the same accommodation components.css makes for the header. */ .dima-footer__brand .custom-logo-link { display: inline-flex; align-items: center; justify-content: flex-start; max-width: 72px; } .dima-footer__brand .custom-logo { width: 100%; height: auto; max-height: 72px; object-fit: contain; } /* Text fallback, used when the client has set no Customizer logo. Set in the display face at the wordmark's letter-spacing so it reads as a mark rather than as a heading that lost its section. */ .dima-footer__logo-text { font-family: var(--dima-font-display); font-size: 24px; font-weight: 700; letter-spacing: 4px; line-height: 1.2; text-transform: uppercase; color: var(--dima-text-heading); } .dima-footer__tagline, .dima-footer__location { margin: 0; color: var(--dima-text-muted); } /* The nav groups are placed by the grid in DOM order: services lands in the 2.4fr track, company in the last 1fr. `min-width: 0` is load bearing even with minmax(0, …) on the tracks - it stops the longest service title from setting a min-content floor on the group itself. */ .dima-footer__group { min-width: 0; } .dima-footer__heading { margin: 0 0 var(--dima-space-4); /* 24px */ color: var(--dima-accent-on-ground); } .dima-footer__list { margin: 0; padding: 0; list-style: none; } /* The services list runs in two columns so eight titles occupy four rows instead of eight, keeping the footer roughly as tall as the brand column beside it. minmax(0, 1fr) and NOT a bare 1fr: `1fr` is shorthand for minmax(auto, 1fr), and `auto` floors each track at its own min-content width. "Motorized Shading & Window Treatments" is the longest title in the set and would blow the track - and therefore the row - past its cap. This is a documented trap in this codebase; the explicit 0 minimum lets the track shrink and the text wrap, which is what a footer link list should do. */ .dima-footer__list--services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dima-space-5); /* 32px */ row-gap: var(--dima-space-2); /* 8px */ } /* The company list is a single column and needs the same row rhythm as the services grid, so the two headings and their first rows line up. */ .dima-footer__list:not(.dima-footer__list--services) { display: flex; flex-direction: column; gap: var(--dima-space-2); /* 8px */ } /* ========================================================================== 2. Links Matching .dima-card-link in post-types.css: undecorated at rest, gold on hover AND focus, eased at --dima-transition-fast. No underline in either state - the card links do not use one, and two different link idioms on one page is the inconsistency this file exists to avoid. Every rule below is written TWICE - once for `.dima-footer__link` and once for any anchor inside `.dima-footer__list`. That is not belt and braces: the company column is rendered by wp_nav_menu(), and the moment the client assigns a real menu to the `footer` location WordPress emits its own `.menu-item` markup whose anchors carry NONE of our classes. Only `menu_class` survives, onto the