/** * LUAP News footer — final alignment v4.31 * 20 September 2026 * * Loaded AFTER luap-news-refresh.css as the single final News-footer layer. * * This fixes the concrete V4.25 mistake: * an older rule still left background-position at 50px / 44px, so the * hand-drawn divider was being painted THROUGH the Project heading even * though the footer itself had top padding. * * Geometry below is copied from the CURRENT approved Tag footer: * * ALL WIDTHS * - footer starts 50px after previous content * - divider sits at footer top * - content starts 50px below divider * * DESKTOP * - Project / Related tags columns: 50px gutter * - nav -> More Studio News: 50px * - News cards: 50px gutter * - final page breathing room owned by #main: 70px * * TABLET * - final page breathing room: 30px * * MOBILE * - Project -> Related tags: 50px * - Related tags -> More Studio News: 50px * - complete News card -> complete News card: 50px * - final card -> bottom of white page: 50px * * Desktop typography is intentionally untouched because it is already right. * Mobile More Studio News + card titles use VolkswagenMed / normal. */ /* ========================================================= BASE FOOTER — SAME DIVIDER RHYTHM AS APPROVED TAG FOOTER ========================================================= */ body.luap-news-original-plus .luap-news-explore-footer { position: relative !important; box-sizing: border-box !important; clear: both !important; float: none !important; width: 100% !important; max-width: none !important; margin: 50px 0 0 !important; padding: 50px 0 0 !important; background-image: url(/sites/all/themes/luap/images/line@2x.png) !important; background-repeat: repeat-x !important; background-position: left top !important; background-size: auto 2px !important; border: 0 !important; overflow: visible !important; } /* ========================================================= DESKTOP / TABLET GEOMETRY Do NOT alter the working desktop font treatment. ========================================================= */ @media (min-width: 700px) { body.luap-news-original-plus .luap-news-footer-nav, body.luap-news-original-plus .luap-news-more-list { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 50px !important; row-gap: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.luap-news-original-plus .luap-news-footer-nav { margin-top: 0 !important; margin-bottom: 50px !important; } body.luap-news-original-plus .luap-news-more-list { margin-top: 0 !important; margin-bottom: 0 !important; } body.luap-news-original-plus .luap-news-more-section { margin: 0 !important; padding: 0 !important; } /* * Match the approved Tag architecture: * footer has no trailing page padding; #main owns the final space. */ body.luap-news-original-plus .luap-news-explore-footer { padding-bottom: 0 !important; } body.luap-news-original-plus #main.width { margin-bottom: 70px !important; padding-bottom: 0 !important; } } @media (min-width: 700px) and (max-width: 960px) { body.luap-news-original-plus #main.width { margin-bottom: 30px !important; } } /* ========================================================= MOBILE — ONE 50PX SYSTEM ========================================================= */ @media (max-width: 699px) { /* * Kill all competing final tails. * #main alone owns the final 50px. */ body.luap-news-original-plus #page { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } body.luap-news-original-plus #main.width { box-sizing: border-box !important; margin-bottom: 0 !important; padding-bottom: 50px !important; } body.luap-news-original-plus #content, body.luap-news-original-plus #content > .inner, body.luap-news-original-plus #page-content, body.luap-news-original-plus #node-content { margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } body.luap-news-original-plus .luap-news-explore-footer { margin: 50px 0 0 !important; padding: 50px 0 0 !important; /* Explicit reset fixes the divider crossing the Project heading. */ background-position: left top !important; } /* Project -> Related tags = exactly 50px. */ body.luap-news-original-plus .luap-news-footer-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.luap-news-original-plus .luap-news-footer-project { margin: 0 0 50px !important; padding: 0 !important; } body.luap-news-original-plus .luap-news-footer-tags { margin: 0 !important; padding: 0 !important; } /* Related tags -> More Studio News = exactly 50px. */ body.luap-news-original-plus .luap-news-more-section { margin: 50px 0 0 !important; padding: 0 !important; } /* * Keep the established heading-to-first-image spacing. * Correct only the mobile face/weight. */ body.luap-news-original-plus .luap-news-more-heading { margin-top: 0 !important; margin-bottom: 22px !important; font-family: 'VolkswagenMed', sans-serif !important; font-weight: normal !important; font-style: normal !important; } /* Complete card -> complete card = exactly 50px. */ body.luap-news-original-plus .luap-news-more-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; column-gap: 0 !important; row-gap: 50px !important; gap: 50px 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.luap-news-original-plus .luap-news-more-list > *, body.luap-news-original-plus .luap-news-more-list .box { box-sizing: border-box !important; float: none !important; clear: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Preserve image -> title spacing; correct the mobile title face only. */ body.luap-news-original-plus .luap-news-more-card .content { margin: 12px 0 0 !important; padding: 0 !important; } body.luap-news-original-plus .luap-news-more-card .content > .inner { margin: 0 !important; padding: 0 !important; text-align: center !important; } body.luap-news-original-plus .luap-news-more-card .content h3, body.luap-news-original-plus .luap-news-more-card .content h3 a { margin: 0 !important; padding: 0 !important; font-family: 'VolkswagenMed', sans-serif !important; font-weight: normal !important; font-style: normal !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center !important; color: #000 !important; } } /* ========================================================= V4.27 — SECTION-HEADING TYPOGRAPHY ONLY --------------------------------------------------------- Do NOT change the now-working card captions or any spacing. The approved/final Tag footer scale is: - desktop/tablet section labels: 24px - mobile section labels: 22px - VolkswagenMed, normal weight Applies only to: - Project - Related tags - More Studio News The text UNDER the News images remains exactly as V4.26. ========================================================= */ @media (min-width: 700px) { body.luap-news-original-plus .luap-news-footer-label, body.luap-news-original-plus .luap-news-more-heading { font-family: 'VolkswagenMed', sans-serif !important; font-size: 24px !important; font-weight: normal !important; font-style: normal !important; line-height: 1.25 !important; } } @media (max-width: 699px) { body.luap-news-original-plus .luap-news-footer-label, body.luap-news-original-plus .luap-news-more-heading { font-family: 'VolkswagenMed', sans-serif !important; font-size: 22px !important; font-weight: normal !important; font-style: normal !important; line-height: 1.25 !important; } } /* ========================================================= V4.28 — ACTUAL LINE + FINAL-BOTTOM ROOT CAUSES --------------------------------------------------------- Two concrete legacy behaviours were still visible: 1) The legacy final Field Collection can draw its own bottom hand-drawn rule/padding. That is the line sitting directly against the final article image. The News footer must be the ONLY divider. 2) .luap-news-more-list also has the theme class .layout. The legacy theme defines .layout:after as a clearfix. Once the list becomes CSS Grid, that pseudo-element becomes an invisible THIRD grid item. On mobile it therefore creates an extra 50px grid row after the final News card, on top of the intended 50px page-bottom gap. V4.28 removes both legacy leftovers. ========================================================= */ /* ----- REMOVE THE LEGACY ARTICLE-END DIVIDER ----- */ body.luap-news-original-plus .node-news-press.view-mode-full .field-name-field-extra-content .field-items > .field-item:last-child .field-collection-view, body.luap-news-original-plus .node-news-press.view-mode-full .field-name-field-extra-content .field-collection-container .field-items > .field-item:last-child .field-collection-view { margin-bottom: 0 !important; padding-bottom: 0 !important; background: none !important; background-image: none !important; border-bottom: 0 !important; } /* ----- NEWS FOOTER IS THE ONE AND ONLY DIVIDER ----- */ /* * Do not rely on margin above a clearing element beside the legacy floated * article/sidebar columns. Put the 50px before + 50px after the rule INSIDE * the footer instead: * * footer begins immediately after the preceding content * rule is painted 50px down * Project row begins 50px after the rule * * This also matches the sticky-sidebar JS, which was originally written for a * footer rule sitting 50px inside the footer. */ body.luap-news-original-plus .luap-news-explore-footer { margin-top: 0 !important; padding-top: 100px !important; background-image: url(/sites/all/themes/luap/images/line@2x.png) !important; background-repeat: repeat-x !important; background-position: left 50px !important; background-size: auto 2px !important; } /* ----- REMOVE THE INVISIBLE THIRD GRID ITEM ----- */ body.luap-news-original-plus .luap-news-more-list:before, body.luap-news-original-plus .luap-news-more-list:after { content: none !important; display: none !important; clear: none !important; } /* ----- MOBILE: EXACTLY ONE FINAL 50PX GAP ----- */ @media (max-width: 699px) { /* * The footer/list/card add no trailing page space. * #main owns exactly one final 50px. */ body.luap-news-original-plus .luap-news-explore-footer, body.luap-news-original-plus .luap-news-more-section, body.luap-news-original-plus .luap-news-more-list, body.luap-news-original-plus .luap-news-more-list > *, body.luap-news-original-plus .luap-news-more-list .box { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.luap-news-original-plus #main.width { margin-bottom: 0 !important; padding-bottom: 50px !important; } body.luap-news-original-plus #page { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= V4.29 — TABLET TYPE WEIGHT ONLY --------------------------------------------------------- Spacing/divider/card geometry from V4.28 is now approved. This block changes ONLY the News-footer type face on tablet. Tablet range: 700px–960px. No sizes, margins, gaps or desktop/mobile rules are changed. ========================================================= */ @media (min-width: 700px) and (max-width: 960px) { body.luap-news-original-plus .luap-news-footer-label, body.luap-news-original-plus .luap-news-more-heading, body.luap-news-original-plus .luap-news-more-card .content h3, body.luap-news-original-plus .luap-news-more-card .content h3 a { font-family: 'VolkswagenMed', sans-serif !important; font-weight: normal !important; font-style: normal !important; } } /* ========================================================= V4.30 — LOCK NEWS FOOTER TYPE SIZES --------------------------------------------------------- The accumulated legacy News stylesheet contains several old responsive title sizes (15px, 18px, 28px and 38px). That is why the same card title changes size at different tablet widths. V4.30 is loaded last and gives the footer ONE clear type scale. No spacing, divider or layout values are changed. ========================================================= */ /* Section headings: one desktop/tablet size. */ @media (min-width: 700px) { body.luap-news-original-plus .luap-news-footer-label, body.luap-news-original-plus .luap-news-more-heading { font-family: 'VolkswagenMed', sans-serif !important; font-size: 24px !important; font-weight: normal !important; font-style: normal !important; line-height: 1.25 !important; } } /* Section headings: one mobile size. */ @media (max-width: 699px) { body.luap-news-original-plus .luap-news-footer-label, body.luap-news-original-plus .luap-news-more-heading { font-family: 'VolkswagenMed', sans-serif !important; font-size: 22px !important; font-weight: normal !important; font-style: normal !important; line-height: 1.25 !important; } } /* ========================================================= V4.31 — RESTORE DESKTOP ROLLOVER --------------------------------------------------------- V4.30 accidentally applied the 18px card-title rule at ALL widths. On desktop that overrode the existing hover/rollover title styling, which was already correct. Keep the 18px static caption lock only on tablet/mobile. Desktop (961px+) is deliberately untouched so the original overlay/rollover state is restored exactly. ========================================================= */ @media (max-width: 960px) { body.luap-news-original-plus .luap-news-more-card .content h3, body.luap-news-original-plus .luap-news-more-card .content h3 a { font-family: 'VolkswagenMed', sans-serif !important; font-size: 18px !important; font-weight: normal !important; font-style: normal !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; } }