/* --------------------------------------------- # CSS VERSION: 1.0 - album.css # TITLE: Album Stylesheet (Colors & Interiors + Sales Album) # DESCRIPTION: Shared styling for the digitized 1968 Pontiac dealer albums, # served site-wide like Main.css. Two page families: the Colors & # Interiors album (.album-page.exterior/.interior/.title/.combo/ # .contents/.specsheet/.landing) and the Sales Album # (.album-page.sales) -- masthead, binder tab rails, prev/next nav, # lightbox/chart-zoom, and the mobile-responsive pass. # # CSS PARENT(S): /css/Main.css (styles the legacy .sales_manual_* content tables) # CSS CHILD(REN): None # SUPPORTING FILES: None # # CREATED: June 2026 # UPDATED: July 14, 2026 # CREATED BY: Geoff Martin, geoff@firstgenfirebird.org # WEBSITE: http://FirstGenFirebird.org # COPYRIGHT: Copyright © Geoff Martin 1996-2026 --------------------------------------------- */ /* TABLE OF CONTENTS --------------------------------------------- 1. ROOT VARIABLES & BASE PAGE 2. SHARED HEADINGS & MASTHEAD 3. EXTERIOR TEMPLATE 4. INTERIOR TEMPLATE 5. TITLE PAGE (F-1) 6. COMBO TEMPLATE 7. SECTION TABS (binder dividers) 8. PREV / NEXT NAV 9. CLICK-TO-ZOOM LIGHTBOX (+ fold-out chart zoom) 10. LANDING PAGE 11. CONTENTS / INDEX PAGE 12. SPEC-SHEET & CLOSING PAGES 13. LANDING BUTTONS / ALBUM LINKS 14. SALES ALBUM (masthead, full nav, two-line tabs, trim tables, binder colors) 15. RESPONSIVE DESIGN 15a. Mobile <=700px -- sales table linearization + figure markers 15b. Tablet 701-1160px -- show the iPad tab rail --------------------------------------------- */ :root{ --paper:#f6f2ea; --ink:#1a1a1a; --rule:#111; --muted:#555; } .album-page{ width:860px;max-width:100%;margin:0 auto;background:var(--paper); border:1px solid var(--rule);box-sizing:border-box;color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;position:relative; min-height:1040px;display:flex;flex-direction:column; /* uniform length; nav pinned to bottom; room for the 13 tabs */ } /* ---------- shared headings ---------- */ .album-page .model-name, .album-page .trim-title{font-weight:800;letter-spacing:-.5px;margin:0;} .page-folio{position:absolute;right:16px;bottom:10px;font-size:10px;color:var(--muted);} /* ---------- masthead (top of every page) ---------- */ .album-head{background:#2b3a4a;color:#f5f1e8;text-align:center; font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; padding:11px 16px;border-bottom:2px solid #e3b34a;} .exterior .album-head{margin:-34px -40px 22px;} /* bleed past the exterior page padding */ .interior .album-head{margin:0;} /* interior page has no side padding */ /* EXTERIOR TEMPLATE --------------------------------------------- */ .album-page.exterior{padding:34px 40px 26px;} .exterior .model-block{margin-bottom:26px;} .exterior .model-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 6px;} .exterior .model-name{font-size:40px;line-height:.9;} .exterior .model-type{font-size:12px;line-height:1.25;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding-top:4px;} .exterior .model-type .code{font-weight:400;} .exterior .model-desc{font-size:12.5px;line-height:1.45;max-width:520px;margin:0 0 4px;} .exterior .car{display:block;width:100%;height:auto;margin:6px auto 0; filter:drop-shadow(0 12px 10px rgba(0,0,0,.18));} /* single-car pages: keep the album's standard page height (so the 13-tab rail always reaches the bottom) and center the lone car so the page reads as an intentional spec page, not empty. The car is capped BELOW the content width (no negative-margin bleed) so it can never reach the page borders or the tab rail, at any window width. */ .exterior .car-wrap{flex:1;display:flex;align-items:center;justify-content:center;margin:14px 0 0;} .exterior .car-wrap .car{margin:0;width:100%;max-width:100%;} /* INTERIOR TEMPLATE --------------------------------------------- */ .album-page.interior{width:1000px;padding:0 0 26px;} .interior .interior-photo{display:block;width:100%;height:auto;} .interior .interior-body{display:flex;gap:22px;padding:20px 34px 0;align-items:flex-start;} .interior .trim-head{flex:0 0 172px;} .interior .trim-title{font-size:19px;line-height:1.05;} .interior .trim-title .light{font-weight:400;display:block;font-size:15px;} .interior .trim-sub{font-size:12px;margin:2px 0 14px;} .interior .trim-models{font-size:15px;font-weight:700;line-height:1.2;margin:0 0 10px;} .interior .trim-models .code{font-weight:400;} .interior .trim-desc{font-size:12.5px;line-height:1.45;margin:0;} .interior .chips{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;} .interior .chips.c2{grid-template-columns:repeat(2,158px);justify-content:flex-end;align-content:start;gap:26px;} .interior .chips.c3{grid-template-columns:repeat(3,150px);justify-content:flex-end;align-content:start;gap:20px;} .interior .chips.c4{grid-template-columns:repeat(4,minmax(0,150px));justify-content:flex-end;align-content:start;gap:16px;} .interior .chips.c5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;} .interior .trim-note{font-size:10px;font-style:italic;color:#777;margin:10px 0 0;line-height:1.4;} .interior .chip-note{font-size:9px;font-style:italic;color:#777;margin:0 0 4px;line-height:1.3;} .interior .chip{min-width:0;} .interior .chip .sw{display:block;width:100%;height:66px;border:1px solid rgba(0,0,0,.25); border-radius:2px;margin-bottom:6px;} .interior .chip-name{font-size:11.5px;font-weight:700;margin:0 0 3px;} .interior .trimlist{list-style:none;margin:0;padding:0;font-size:9.5px;line-height:1.34;} .interior .trimlist li{padding-left:9px;text-indent:-9px;} .interior .trimlist .key{font-weight:700;} .interior .trimlist b{font-weight:700;} /* TITLE PAGE (F-1) --------------------------------------------- */ .album-page.title{padding:34px 40px 26px;} .title .title-body{flex:1;display:flex;flex-direction:column;justify-content:center; align-items:flex-end;text-align:right;padding-right:8%;} .title .title-year{font-size:34px;font-weight:300;letter-spacing:.02em;margin:0;color:#222;} .title .title-main{font-size:52px;font-weight:300;line-height:1.02;margin:2px 0 0;color:#222; letter-spacing:-.01em;} .title .title-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; border-top:1px solid #d8d2c4;margin-top:auto;padding-top:12px;} .title .litho{font-size:10px;color:#666;letter-spacing:.02em;white-space:nowrap;} .title .legal{flex:1;text-align:center;font-size:9.5px;line-height:1.5;color:#555;max-width:640px; margin:0 auto;} .title .gm-mark{flex:0 0 auto;text-align:center;} .title .gm-mark .gm{display:inline-block;border:1.5px solid #333;color:#333;font-weight:700; font-size:15px;letter-spacing:.04em;padding:3px 7px;line-height:1;} .title .gm-mark .moe{display:block;font-size:6.5px;letter-spacing:.12em;color:#555;margin-top:2px; text-transform:uppercase;} /* ===================== COMBO TEMPLATE (exterior car + interior/trim on one page) Used where the printed album puts a full-width exterior illustration on the top half and an interior photo + trim-chip block on the bottom half (e.g. LM-29). Built on the interior page base (.album-page.interior.combo). =============== */ .interior.combo .combo-ext{padding:22px 34px 0;} .interior.combo .model-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 6px;} .interior.combo .model-name{font-size:36px;line-height:.9;font-weight:800;letter-spacing:-.5px;} .interior.combo .model-type{font-size:12px;line-height:1.25;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding-top:4px;} .interior.combo .model-type .code{font-weight:400;} .interior.combo .model-desc{font-size:12.5px;line-height:1.45;max-width:520px;margin:0 0 4px;} .interior.combo .combo-car{display:block;width:88%;max-width:88%;height:auto;margin:6px auto 0; filter:drop-shadow(0 12px 10px rgba(0,0,0,.18));} .interior.combo .combo-int{border-top:1px solid #d8d2c4;margin-top:22px;} .interior.combo .combo-photo{flex:0 0 320px;width:320px;height:auto;align-self:flex-start; border:1px solid rgba(0,0,0,.15);} /* SECTION TABS (binder dividers) --------------------------------------------- */ /* Vertical tab rail stuck to the right edge of the page, like the album's physical section dividers. Current section = slate; others tan, gold on hover. */ .album-tabs{position:absolute;top:44px;bottom:12px;right:-27px;width:27px; display:flex;flex-direction:column;gap:3px;z-index:2;} .album-tabs a{flex:1 0 auto;display:flex;align-items:center;justify-content:center; writing-mode:vertical-rl;text-orientation:mixed; padding:7px 4px;background:#cdbf9a;color:#22303c; font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; text-decoration:none;white-space:nowrap; border:1px solid rgba(0,0,0,.22);border-left:none;border-radius:0 6px 6px 0; transition:background .15s,color .15s;} .album-tabs a:hover{background:#e3b34a;} .album-tabs a.active{background:#2b3a4a;color:#f5f1e8;} @media (max-width:1160px){.album-tabs{display:none;}} /* hide when no room to stick out */ /* PREV / NEXT NAV --------------------------------------------- */ .album-nav{display:flex;align-items:center;justify-content:space-between; border-top:1px solid #d8d2c4;margin-top:auto;padding-top:14px;} /* auto = pinned to page bottom */ .interior .album-nav{margin:auto 34px 0;} /* interior page has no side padding */ .album-nav .nav-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px; border:1px solid #2b3a4a;border-radius:20px;background:#fff;color:#2b3a4a; font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;} .album-nav .nav-btn:hover{background:#2b3a4a;color:#fff;} .album-nav .nav-btn.disabled{opacity:.3;pointer-events:none;cursor:default;} .album-nav .nav-here{font-size:13px;font-weight:700;color:#666;letter-spacing:.06em;} .album-nav .arrow{font-size:15px;line-height:1;} /* CLICK-TO-ZOOM LIGHTBOX --------------------------------------------- */ .zoomable{cursor:zoom-in;} .album-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999; display:none;align-items:center;justify-content:center;padding:2.5vmin;cursor:zoom-out;} .album-lightbox.open{display:flex;} .album-lightbox img{max-width:96vw;max-height:95vh;background:#f6f2ea; box-shadow:0 6px 40px rgba(0,0,0,.6);} /* stop the page behind the overlay from scrolling under it */ body.album-lightbox-lock{overflow:hidden;} /* ---- FOLD-OUT CHART ZOOM (2026-07-07) -------------------------------------- The (o) Power Train charts are wide, dense, and unreadable at column width. .album-zoom marks them; JS adds .wide to the overlay so the enlarged chart uses the whole viewport (and is allowed to scale UP past its natural width — the default lightbox rule caps portrait art at its intrinsic size). Click the chart, click outside it, or press Esc to collapse. */ .album-page .album-zoom{cursor:zoom-in;} /* A chart is nearly square, so a max-height:95vh fit would shrink it to ~1000px on a laptop — barely bigger than the page. Instead give it the full WIDTH (up to its natural 2400px) and let the overlay scroll vertically. Clicking the chart or the surround still closes; scrolling doesn't fire a click. */ .album-lightbox.wide{padding:1vmin;overflow:auto;align-items:flex-start;justify-content:center;} .album-lightbox.wide img{width:99vw;max-width:2400px;height:auto;max-height:none;} @media (max-width:700px){ .album-lightbox.wide{padding:0;} .album-lightbox.wide img{width:100vw;} } @media (max-width:700px){ .interior .interior-body{flex-direction:column;gap:16px;} .interior .chips{grid-template-columns:repeat(3,1fr);} } /* LANDING PAGE --------------------------------------------- */ .album-landing{max-width:1000px;margin:0 auto;background:var(--paper);border:1px solid var(--rule); display:flex;align-items:stretch;overflow:hidden; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} .album-landing .landing-cover{width:50%;object-fit:cover;display:block;background:#222;} .album-landing .landing-info{width:50%;padding:48px 44px;display:flex;flex-direction:column; justify-content:center;color:var(--ink);} .landing-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#8a7a52;margin:0 0 14px;} .album-landing h1{font-size:38px;line-height:1.04;font-weight:800;letter-spacing:-.5px;margin:0 0 14px;} .landing-sub{font-size:15px;line-height:1.5;color:#444;margin:0 0 30px;max-width:36ch;} .landing-actions{display:flex;gap:12px;flex-wrap:wrap;} .btn-primary,.btn-ghost{display:inline-block;padding:12px 22px;border-radius:26px;font-size:14px; font-weight:700;text-decoration:none;border:1.5px solid #2b3a4a;transition:background .15s,color .15s;} .btn-primary{background:#2b3a4a;color:#f5f1e8;} .btn-primary:hover{background:#1c2732;} .btn-ghost{background:transparent;color:#2b3a4a;} .btn-ghost:hover{background:#2b3a4a;color:#f5f1e8;} @media (max-width:720px){.album-landing{flex-direction:column;} .album-landing .landing-cover,.album-landing .landing-info{width:100%;} .album-landing .landing-cover{height:240px;}.album-landing h1{font-size:30px;}} /* CONTENTS / INDEX PAGE --------------------------------------------- */ .album-page.contents{width:1000px;padding:0 0 30px;} .contents .contents-inner{padding:26px 46px 6px;} .contents-title{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 4px;} .contents-lead{font-size:13.5px;color:#555;margin:0 0 22px;} .contents-list{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:0 40px;} .contents-list li{border-top:1px solid #e2dccb;} .contents-list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:11px 4px 4px;text-decoration:none;color:var(--ink);} .contents-list a:hover{background:#efe9db;} .contents-list .c-name{font-size:15px;font-weight:700;} .contents-list .c-pages{font-size:12px;color:#6a5f3f;font-weight:700;letter-spacing:.03em;white-space:nowrap;} .contents-list .c-sub{display:block;font-size:11px;color:#8a8a8a;padding:0 4px 9px;} /* chip availability sub-note (e.g. "Not available on 25269") --------------------------------------------- */ .interior .chip-sub{font-size:10px;font-style:italic;color:#8a8175;margin:2px 0 4px;line-height:1.2;} /* Trim-spec scan pages (S-82..S-87) --------------------------------------------- */ .album-page.specsheet{width:1000px;padding:0 0 26px;} .specsheet .album-head{margin:0;} .specsheet .spec-cap{font-size:13px;color:#6b6152;margin:0;padding:18px 34px 12px; font-style:italic;line-height:1.45;} .spec-scan{display:block;margin:0 34px;max-width:calc(100% - 68px);height:auto; border:1px solid #d8d2c4;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.12);} .specsheet .album-nav{margin:16px 34px 0;} /* Closing page --------------------------------------------- */ .album-page.closing{max-width:760px;text-align:center;} .closing .close-body{font-size:17px;line-height:1.6;color:#3a352c;max-width:560px;margin:30px auto;} .closing .close-note{font-size:12px;color:#8a8175;font-style:italic;margin-top:22px;} /* === LANDING BUTTONS / ALBUM LINKS ============================================ Kadence content-link CSS (.entry-content a) outranks ours and forces an underline + its own link color. Strip the underline everywhere in the album and re-assert our button text colors (scoped so nothing else is touched). ============================================================================ */ .album-page a, .album-landing a { text-decoration: none !important; } /* buttons: kill the theme underline (text-decoration only) + any box-shadow, but KEEP the ghost button's own border intact */ .album-landing .btn-primary, .album-landing .btn-ghost { text-decoration: none !important; box-shadow: none !important; } .album-landing .btn-primary { color: #f5f1e8; } .album-landing .btn-ghost { color: #2b3a4a; } .album-landing .btn-ghost:hover { color: #f5f1e8; } /* buttons: also kill the underline on hover/focus (Kadence a:hover underline) */ .album-landing .btn-primary:hover, .album-landing .btn-ghost:hover, .album-landing .btn-primary:focus, .album-landing .btn-ghost:focus { text-decoration: none !important; } /* wpautop safety net: the Classic editor injects
between the nav s on import, which breaks the flex tab rail + prev/next nav. Hide those
. Harmless when wpautop is disabled (no
to hide). Intentional
in the title/legal text are untouched -- this is scoped to the two nav rails only. */ .album-tabs br, .album-nav br { display: none; } /* ===================== SALES ALBUM ===================== Twin of the C&I album. Pages = class="album-page sales". The untouched legacy .sales_manual_* content table (styled by Main.css) sits inside the paper page; we only supply the masthead + side tabs + modern nav. */ .album-page.sales{width:1000px;padding:0 0 26px;min-height:1040px;} .sales .album-head{margin:0;} .sales .sm-content{padding:18px 30px 0;overflow-x:auto;} /* A bit more air between body paragraphs, album-wide (Geoff, 2026-07-09). Legacy body copy inherits Main.css's .page_section p{margin-bottom:1rem}; bump it to 1.4rem so the paragraph breaks read less cramped. Modern index/type pages set their own inline margins on

, so those keep their tighter, intentional spacing and are unaffected. */ .sales .sm-content p{margin-bottom:1.4rem;} /* A too-wide data table (m-3, o-chart*, the wide spec grids) scrolls sideways INSIDE the content block on any screen where it doesn't fit, while the masthead, tab rail and Prev/Next stay put. Height is auto, so there's no vertical scrollbar; on desktop the tables fit and nothing scrolls. Keeps the wide tables from running under the iPad rail. */ /* Trim the empty spacer rows around the page title. The legacy pages stack several blanks above/below the heading for desktop breathing room, which leaves a big gap between the title and the content box. Collapse those blanks to ~1/4. Only the truly-empty spacers match: the heading/footer/content colspan-5 cells all carry a class, the blanks carry none. (2026-07-09, Geoff — applies to all titled pages) */ .sales .sm-content .sales_manual_main td[colspan="5"]:not([class]){line-height:.3;} /* The legacy page title (h3 inside sales_manual_page) inherits Main.css line-height:200% plus default heading margins, so a one-line title reserves ~110px of vertical space — that's the big gap above the title. Tighten it (still roomy, ~1/4 of the old gap). The modern index/landing h3s carry their own inline margin, so they're unaffected. */ .sales .sm-content h3{line-height:1.25;margin:.15em 0;} /* Legacy pages wrap their content in a , and each layout comment (

,


, …) is illegal inside a table, so the browser "foster-parents" it OUT of the table and stacks it as an empty paragraph ABOVE the content — ~200px of dead space over the title (n-4). Hide those stray paragraphs. Scoped with :has(> p:empty) so it fires ONLY on the foster-parented legacy pages (an empty direct-child

can only come from foster-parenting); the modern index/type pages, whose real text sits in direct

children, never match and are untouched. Verified across all 220 pages: 0 real paragraphs hidden, 0 residual title gaps. (2026-07-09, Geoff — n-4) */ .sales .sm-content:has(> p:empty) > p{display:none;} .sales .sm-content .sales_manual_page, .sales .sm-content .sales_manual_border{border:0 !important;width:100% !important;} /* RED sub-section tab rail (reuses .album-tabs positioning) */ .album-tabs.sub a{background:#c62828;color:#fff;border-color:rgba(0,0,0,.30);} .album-tabs.sub a:hover{background:#e3b34a;color:#22303c;} .album-tabs.sub a.active{background:#8e1c1c;color:#fff;} .sales .album-nav{margin:14px 30px 0;} .sales-footnav{margin:10px 30px 0;font-size:12px;color:#555;line-height:1.6;} .sales-footnav strong{color:#2b3a4a;} .sales-footnav a{color:#2b3a4a;text-decoration:none;} .sales-footnav a:hover{text-decoration:underline;} /* sales tab + footer tweaks (2026-07-05 sales pilot feedback) */ .sales .album-tabs{justify-content:flex-start;} .sales .album-tabs a{flex:0 0 auto;min-height:150px;} /* compact binder tabs, not stretched */ .sales-footnav{margin-top:18px;text-align:center;} /* centered + bump off the buttons */ /* sales tab readability + footer link clarity (2026-07-05) */ .sales .album-tabs a{font-size:11px;} /* bigger, more legible vertical text */ .sales-footnav strong{font-weight:800;color:#1a1a1a;} /* bolder "Sections:" label */ .sales-footnav a{text-decoration:underline;} /* section links clearly read as links */ /* white content bg + section tab colors (2026-07-05) */ .album-page.sales{background:#fff;} /* match uncropped white image edges */ .sales .album-tabs.selling a{background:#a3884d;color:#241a0a;} /* brown = original tab_(m).gif */ .sales .album-tabs.selling a:hover{background:#e3b34a;color:#22303c;} .sales .album-tabs.selling a.active{background:#6d4c30;color:#f5efe0;} /* FULL NAV: clickable master header + per-color tab rail (2026-07-06) --------------------------------------------- */ /* Master-section header, clickable, just under the masthead (Geoff's request). Colors = original tan master tab_series/selling/sales.gif (#f1edde). */ .sales .album-masternav{display:flex;justify-content:center;flex-wrap:wrap; background:#f1edde;border-bottom:1px solid #cbb98a;margin:0;} .sales .album-masternav a{padding:8px 22px;font-size:13px;font-weight:700; color:#4a3c1a;text-decoration:none;letter-spacing:.02em; border-right:1px solid #cbb98a;transition:background .15s,color .15s;} .sales .album-masternav a:first-child{border-left:1px solid #cbb98a;} .sales .album-masternav a:hover{background:#e5dec3;} .sales .album-masternav a.active{background:#6d5a2a;color:#f7f1e2;} /* Multi-tab rail: let 1..8 tabs distribute down the rail without overflow. */ .sales .album-tabs a{flex:1 1 auto;min-height:78px;line-height:1.15;} /* ---- TWO-LINE TABS (2026-07-07) -------------------------------------------- .t1/.t2 used to be inline spans, so "(l) Station Wagons" + "Catalina—Executive Safari—Bonneville" ran together into ONE 53-char vertical column. It only looked OK because the tab stretched the full page side; the moment the tab was sized like a real tab the text clipped. Fix: make .t1/.t2 real block lines. The is writing-mode:vertical-rl, so its BLOCK axis is horizontal — flex-direction:column therefore lays the two lines out as two side-by-side vertical columns (first line outermost), which is how the printed binder tabs read. Rail widens 27px->34px to hold both columns (measured: 12px + 10px + gap + padding = 33px). Tab height then comes from the longest line, so no height cap is needed: the lone (l) tab self-sizes to ~239px and every tab on a 7-tab rail fits with 0 overflow. */ .sales .album-tabs{width:34px;right:-34px;} .sales .album-tabs a{flex-direction:column;gap:1px;} .sales .album-tabs a .t1, .sales .album-tabs a .t2{display:block;margin:0;} /* a rail holding a single tab (series3 = just (l)) must size to its text, not stretch */ .sales .album-tabs a:only-child{flex:0 0 auto;} /* two-line tabs: primary line + smaller second line (vertical writing-mode) */ .sales .album-tabs a .t2{font-size:9px;font-weight:600;opacity:.9;} /* ---- INTERIOR TRIM TABLES, R-8..R-14 (2026-07-07) -------------------------- One boxed grid; each model is a group separated by a rule, exactly as printed. Tight leading because a page carries 4-5 groups of 3-6 rows. */ .sales .trim-table{border:1px solid #6f6a5e;border-collapse:collapse;} .sales .trim-table td{vertical-align:top;padding:1px 8px;} .sales .trim-table td p{margin:0;line-height:1.25;} .sales .trim-table tr.trim-group td{border-top:1px solid #6f6a5e;padding-top:4px;} .sales .trim-table tr:first-child td{border-bottom:1px solid #6f6a5e;padding-bottom:4px;} .sales .trim-table .trim-num{width:14%;} /* Index page-number column: keep short page codes (S-1, R-1, AA-1) from breaking at the hyphen into "S-" / "1" in a narrow cell on a phone. Scoped to right-aligned STRONG cells, which hold ONLY the page-reference codes -- the long "See Individual Series and Models" index cells use a plain

(not .strong), so they still wrap normally. */ .sales .sm-content td.right p.strong{white-space:nowrap;} /* Per-tab binder colors from the physical divider scans: a/a-a red, b-g gold, h-l blue, m-v brown. (Green is NOT used anywhere in the binder — (l) confirmed blue from divider photo 80, (g) yellow from photo 38.) */ .sales .album-tabs a.red{background:#c62828;color:#fff;} .sales .album-tabs a.red:hover{background:#e05a5a;color:#fff;} .sales .album-tabs a.red.active{background:#8e1c1c;color:#fff;} .sales .album-tabs a.yellow{background:#dcc24a;color:#3a2e00;} .sales .album-tabs a.yellow:hover{background:#ecd15f;color:#3a2e00;} .sales .album-tabs a.yellow.active{background:#b8912a;color:#2a2200;} .sales .album-tabs a.blue{background:#3f6fa3;color:#fff;} .sales .album-tabs a.blue:hover{background:#5a8ec2;color:#fff;} .sales .album-tabs a.blue.active{background:#2b4d73;color:#fff;} .sales .album-tabs a.green{background:#4f7a44;color:#fff;} .sales .album-tabs a.green:hover{background:#6a9a5e;color:#fff;} .sales .album-tabs a.green.active{background:#365630;color:#fff;} .sales .album-tabs a.brown{background:#a3884d;color:#241a0a;} .sales .album-tabs a.brown:hover{background:#c2a35f;color:#241a0a;} .sales .album-tabs a.brown.active{background:#6d4c30;color:#f5efe0;} /* ---- MOBILE: legacy two-column sales tables (2026-07-09, Geoff phone feedback) ----- The sales_manual_main pages lay body copy in 48%/48% columns split by a 1px divider. On a phone the full desktop cell-padding (~6px a side) stacks up into a ~26px gutter that eats the little width there is, and the justified text then breaks into rivers. Tighten the gutter (drop cell padding + outer page padding) and left-align the body copy, on narrow screens only. Everything is scoped to .sales, so desktop and the Colors & Interiors album (.exterior/.interior/.title) are untouched. Applies to every two-or-more-column sales page, not just the Introduction. */ @media (max-width:700px){ /* Desktop forces every sales page to min-height:1040px so the tall right-side tab rail always reaches the bottom (a Colors & Interiors carry-over). On a phone the rail is hidden, so that fixed height just leaves a big band of dead white below the nav on short pages (the o-chart chart pages). Let the page shrink to its content. */ .album-page.sales{min-height:0;} .sales .sm-content{padding:10px 8px 0;box-sizing:border-box;} /* content block: reclaim the desktop 30px side padding; border-box so the padding can't push past the viewport */ .sales .album-nav{margin:12px 8px 0;} /* prev/next buttons in from the edge, not 30px */ .sales-footnav{margin-left:8px;margin-right:8px;} /* Sections: footer likewise */ .sales .sm-content td{padding-left:2px;padding-right:2px;} /* tighten every sales cell, not just sales_manual_main */ .sales .sm-content .justify{text-align:left;} /* kill justified word-rivers on every sales page */ .sales .sm-content img{max-width:100%;height:auto;} /* never let an image push past the viewport */ .sales .sm-content table{box-sizing:border-box;max-width:100%;} /* Main.css gives sales_manual_main width:100% + padding w/o border-box -> ~8px overflow that drags the full-width car image off-screen */ /* Series-Availability lineup: the 2-up car grid must stack on a phone or column two runs off-screen. Target ONLY the car cells (a nowrap cell holding a car image) — the technical spec tables also use td.nowrap and must NOT stack. :has() is fine on current mobile Safari/Chrome; older engines just keep the desktop grid (no worse than today). */ .sales .sm-content td.nowrap:has(> img.middle){display:block;width:100%!important;white-space:normal;} /* LINEARIZE the outer page-layout table on phones: its divider|content|divider columns (or 2-/3-column text/spec layouts) become stacked full-width blocks. Nested tables (text tables, data grids) keep their own layout inside each block and render full width; wide ones scroll via the sm-content overflow-x. This is robust where per-

stacking was not: a display:block inside a table collapses to the first column's width (N-2 crammed to 78px). Only sales_manual_main (the layout wrapper) is linearized — the data-grid pages (m-3, o-chart*) use a border_0 outer table and are left alone, so their grids still scroll rather than stack. */ .sales .sm-content > table.sales_manual_main:not(.sched-grid):not(.trim-table), .sales .sm-content > table.sales_manual_main:not(.sched-grid):not(.trim-table) > tbody, .sales .sm-content > table.sales_manual_main:not(.sched-grid):not(.trim-table) > tbody > tr, .sales .sm-content > table.sales_manual_main:not(.sched-grid):not(.trim-table) > tbody > tr > td{display:block;width:auto !important;max-width:100%;} /* A .sched-grid is a genuine DATA matrix (P-6 maintenance schedule: service item + four X-marked interval columns). Linearizing it stacks every cell into a useless one-per-line column, so it opts OUT above and instead keeps its grid and scrolls sideways inside the sm-content (which is overflow-x:auto). min-width forces the scroll so the columns stay desktop-proportioned rather than crushed. */ .sales .sm-content table.sched-grid{min-width:600px;max-width:none;} /* .trim-table (R-8 through R-14 interior-trim matrices) is likewise a genuine DATA table: Interior Trim Number + Seat/Door/Headlining/Floor columns. Linearizing it stacks every cell into an unreadable vertical list where you can't tell which colour maps to which component, so it opts OUT of the linearizer above and scrolls sideways inside the overflow-x sm-content, keeping its columns aligned. */ .sales .sm-content table.trim-table{min-width:660px;max-width:none;display:table;} .sales .sm-content table.trim-table td{display:table-cell;width:auto;} .sales .sm-content .sales_manual_main img.column_line{display:none;} /* blank_line is an 800px-tall transparent spacer graphic (Main.css) that legacy pages drop into a column to force page height. When the table linearizes, that column stacks ABOVE the content and shoves it ~800px down (o_index on iPhone). It has no purpose in a single-column mobile layout — drop it. */ .sales .sm-content .sales_manual_main img.blank_line{display:none;} /* Image + text entries (engine pages m-4/m-5 etc.): instead of a rigid image|text column split, float the image small on the left and let the text wrap around it (magazine style). Targets rows in a NESTED sales table that hold an . flow-root contains the float per row; the empty spacer cell is dropped; margin-bottom separates one image+text pair from the next (Q-1 body-features list). */ .sales .sm-content .sales_manual_main table tr:has(> td > img.middle){display:flow-root;margin-bottom:1.4rem;} .sales .sm-content .sales_manual_main table tr:has(> td > img.middle) > td{display:block;width:auto !important;} /* Float an image cell to 40% ONLY in the true SIDE-BY-SIDE pattern (m-5: holds an AND a separate text
in the SAME row) so the body copy wraps beside the small image. The row-level :has(> td > p) is the gate: a row that pairs an image cell with a text cell. When an image sits ALONE in its own row (m-4/Q-4/Q-8/Q-9 stacked photos, authored with inline width:100%) the row has no sibling text cell, so it is NOT floated -- it stays a full-width block and the image fills the column as intended, with its caption in the row below. Also excluded: cells whose text is a direct

(already full width) or a nested (Q-5 multi-column caption, handled above). */ .sales .sm-content .sales_manual_main table tr:has(> td > img.middle):has(> td > p) > td:has(> img.middle):not(:has(> p)):not(:has(> table)){float:left;width:40% !important;margin:2px 12px 3px 0;} /* Drop the empty spacer cell only. The old rule keyed on class "left", but real image cells (n-3/n-5/p-2/p-3) and paragraph cells (Q-1) also carry class "left", so it was hiding actual cars and one Q-1 paragraph. A spacer is defined by content: it holds neither an nor a

. Match that instead — cars and text are safe. */ .sales .sm-content .sales_manual_main table tr:has(> td > img.middle) > td:not(:has(img)):not(:has(p)){display:none;} /* STACKED IMAGE + MULTI-COLUMN CAPTION (Q-5 Standard Body Features): a wide image sits ABOVE a nested text table that splits the caption into two justified columns divided by a spacer cell (49% | spacer | rest). On a phone those columns crush to one-word-per-line with an empty band on the right. The image+caption CELL holds a nested

, so it is excluded from the 40% image-float above (stays full width). Here we (1) linearize that inner caption table to one stacked column and (2) drop its empty spacer cell. Keyed on the image-above-table structure, so data grids (m-3, o-chart) are untouched. */ .sales .sm-content .sales_manual_main td:has(> img.middle) > table, .sales .sm-content .sales_manual_main td:has(> img.middle) > table > tbody, .sales .sm-content .sales_manual_main td:has(> img.middle) > table > tbody > tr, .sales .sm-content .sales_manual_main td:has(> img.middle) > table > tbody > tr > td{display:block;width:auto !important;max-width:100%;} .sales .sm-content .sales_manual_main td:has(> img.middle) > table > tbody > tr > td:not(:has(p)){display:none;} /* FULL-WIDTH IMAGE OVER A KEPT MULTI-COLUMN CAPTION (marker: .fgf-imgtable on the nested table; Q-4 Concealed Windshield Wipers). When a wide image lives in its OWN colspan row ABOVE a two-column caption row inside the SAME table, the generic linearizer blocks the colspan cell and it collapses to one column's width (image stuck ~40%). Marking that one table opts it into: table forced full width, and the image's colspan row/cell kept as real table-row/-cell so the colspan spans the full width (image fills). The caption row is left alone, so its columns remain BELOW the full-width image. Scoped to the marker class only -- other colspan-image pages are untouched (a blanket rule regressed them). */ .sales .sm-content .sales_manual_main table.fgf-imgtable{width:100% !important;} .sales .sm-content .sales_manual_main table.fgf-imgtable > tbody > tr:has(> td[colspan] > img.middle){display:table-row !important;} .sales .sm-content .sales_manual_main table.fgf-imgtable > tbody > tr > td[colspan]:has(> img.middle){display:table-cell !important;width:auto !important;float:none !important;} /* FILL-ON-MOBILE (marker: .fgf-fillmobile on a width-constrained wrapper div; Q-10 bottom Heater Controls). Some pages center a single image + caption in a narrow fixed-width div (e.g. width:60%) that reads fine on desktop but leaves it small on a phone. Marking that div makes it span the full content box on phones ONLY; the desktop inline width stands. */ .sales .sm-content .sales_manual_main div.fgf-fillmobile{width:100% !important;} /* FIGURE-WRAP (mobile) -- a figure that sits in its OWN table row above its text rows (Q-2, N-5, P-3, P-2 front suspension). Marked in the page HTML with .fgf-figwrap on the nested table and .fgf-fig on the image cell (Geoff's "proper CSS identifier"). Plain classes ONLY -- no :has()/:only-child, because WP Rocket LazyLoad rewrites the on the live front end (injects a sibling), which broke the earlier :only-child selector on Safari. Linearize the table to block flow and float the marked figure so the body copy wraps beside it, then closes full width beneath. */ .sales .sm-content .fgf-figwrap, .sales .sm-content .fgf-figwrap tbody, .sales .sm-content .fgf-figwrap tr, .sales .sm-content .fgf-figwrap td { display: block !important; width: auto !important; float: none; } .sales .sm-content .fgf-figwrap td.fgf-fig { float: left !important; width: 44% !important; margin: 2px 14px 6px 0; } } /* ---- TABLET: show the section-tab rail on iPad (2026-07-09, Geoff request) ---------- The sales rail is positioned to stick out 34px past the album's right edge, so below 1160px it was hidden for lack of overhang room. On tablet widths, left-align the album and reserve a 44px right gutter, and the rail shows in it (verified 1024 landscape + 768 portrait, no overflow). Phones (<=700px) still hide it — genuinely no room there. Only the .sales rail; the Colors & Interiors album is untouched. */ @media (min-width:701px) and (max-width:1160px){ .sales .album-tabs{display:flex;} .album-page.sales{width:auto !important;max-width:calc(100% - 44px) !important;margin-left:0;margin-right:44px;} .sales .sm-content{box-sizing:border-box;} }