/* ========================================================================== HOMEPAGE HERO — LEFT COLUMN ONLY, 3D redesign Created 2026-09-02. Reference (approved): Graphics/homepage-hero-left-3d-redesign-reference.png SCOPE: every selector is under `.hero-left3d`, a class added to the homepage hero's left column and nowhere else. `.hero-copy` on its own is used by ~20 other pages, so it is never targeted alone here. This file is linked ONLY by index.html and loads AFTER home.css. THE RIGHT COLUMN IS NOT TOUCHED. .hero-photo, .hero-social, .hero-photo-pair and both images keep every rule they already had. The one thing that could disturb them is column height: .hero-grid is `align-items:center`, so a left column taller than the right (811px) would re-centre the row and move the photographs. The type here is sized so the left column stays well under that — see the note on --hl-x below. ========================================================================== */ .hero-left3d{ position:relative; min-width:0; /* never let the headline widen the 1fr track */ padding-left:30px; /* 2026-09-08: the metallic rail this cleared is gone, but the indent is KEPT so the headline sits exactly where it did and the 523px column measurement below still holds */ z-index:1; } /* -------------------------------------------------------------------------- HALFTONE FIELD A restrained dot grid in the open area beside the headline. It sits behind the type at z-index 0 and is masked so it never runs under a word. -------------------------------------------------------------------------- */ .hero-left3d .hl-dots{ position:absolute; right:-46px; top:16%; width:250px; height:250px; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(23,20,18,0.30) 1.4px, rgba(0,0,0,0) 1.5px); background-size:15px 15px; -webkit-mask-image:radial-gradient(closest-side at 76% 40%, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%); mask-image:radial-gradient(closest-side at 76% 40%, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 82%); } /* -------------------------------------------------------------------------- HEADLINE Same words, same order, same single

; the four lines are spans so each can take its own weight and colour. --hl-x is the size of the two big lines and everything else is derived from it in em, so the block scales as one unit and cannot outgrow its column. -------------------------------------------------------------------------- */ .hero-left3d h1{ position:relative; z-index:1; /* 2026-09-08 - COMPACTED. Was clamp(2.6rem, 7.7vw, 7rem) = 110.9px at 1440, which made this h1 325px tall on its own - nearly half the left column. At 6.9vw it is 99px and the h1 is 291px, and every other line scales with it because the four sizes are all set in em from --hl-x. Measured at 1440, SUNROOF (the longest line) is 464px of text inside a 551px content box - 87px of clearance, up from 31px at the old size, so the load-bearing "SUNROOF must not wrap" constraint is further from the edge than before, not closer. Weight, colours, casing, wording and the four-line structure are all untouched - only the size changes. */ --hl-x:clamp(2.25rem, 6.9vw, 6.2rem); font-family:var(--font-sans); font-size:var(--hl-x); font-weight:900; text-transform:uppercase; line-height:0.94; letter-spacing:-0.028em; color:var(--black); margin:0; } .hero-left3d h1 span{ display:block; } .hero-left3d .hl-l1{ /* HOUSTON */ font-size:0.43em; letter-spacing:0.012em; line-height:1.06; text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(23,20,18,0.14); } .hero-left3d .hl-l2, /* SUNROOF */ .hero-left3d .hl-l3{ /* REPAIR */ font-size:1em; text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(23,20,18,0.20); } .hero-left3d .hl-l3{ color:var(--red); text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 4px 10px rgba(165,15,21,0.26); } .hero-left3d .hl-l4{ /* SINCE 1979 */ font-size:0.53em; letter-spacing:0.004em; line-height:1.12; text-shadow:0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(23,20,18,0.14); } /* -------------------------------------------------------------------------- PARAGRAPH — wording unchanged, set for reading -------------------------------------------------------------------------- */ .hero-left3d p.lede{ position:relative; z-index:1; /* 2026-09-08: 28px -> 18px. Replaced the gap the removed orange accent rule used to carry; 18px still separates the block clearly from the headline. */ margin-top:18px; font-size:1.22rem; /* 19.5px - UNCHANGED, still full size */ /* 1.66 -> 1.55. Five lines at 19.5px go from 162px to 151px. Still well above the 1.5 minimum for comfortable running copy. */ line-height:1.55; color:#3B3531; max-width:47ch; } /* -------------------------------------------------------------------------- "View Our Services" — approved services mark (2026-09-08, revision) Reference: Graphics/Sunroof-King-3D-Services-Button.png This replaces the rounded-key design from earlier the same day. The anchor carries no .btn / .btn-outline-dark / .btn-lg classes, so nothing in home.css reaches it — no chamfered face, no layered hairline frame, no text arrow. home.css is NOT edited; every other page keeps its own key. Composition follows the reference: mark on top, label underneath, the two centred on each other, the whole block left-aligned in the hero column. There is no button chrome — the design is a mark, not a moulded key — so the only box here is the invisible hit area, kept tight so the mark does not float in dead space. Loading cost: the artwork is inline SVG in the page HTML. No image request, no font, no JS, resolution-independent, and it paints with the first paint of the hero rather than after a network round trip. -------------------------------------------------------------------------- */ .hero-left3d .btn-row{ margin-top:16px; } /* 2026-09-08: 26 -> 16 */ .hero-left3d .hl-svc{ display:inline-flex; flex-direction:column; align-items:center; gap:7px; /* 2026-09-08: 9 -> 7 */ max-width:100%; padding:4px 10px 6px; /* 2026-09-08: was 6px 10px 8px */ margin-left:-10px; /* pull the padding back so the mark still aligns with the paragraph above */ border-radius:12px; text-decoration:none; transition:transform 0.15s ease, filter 0.15s ease; } /* the mark — height drives the whole block; width follows the viewBox ratio */ .hero-left3d .hl-svc-mark{ display:block; width:auto; height:92px; } .hero-left3d .hl-svc-mark svg{ display:block; height:100%; width:auto; /* 460:568 — the artwork's own tight box */ } /* the label — real selectable text, Title Case exactly as the reference */ .hero-left3d .hl-svc-label{ font-family:var(--font-sans); font-size:1.32rem; /* ~21px */ font-weight:800; line-height:1.1; letter-spacing:-0.012em; color:#0A0A0A; white-space:nowrap; text-align:center; } .hero-left3d .hl-svc:hover{ transform:translateY(-2px); filter:drop-shadow(0 6px 12px rgba(242,120,20,0.30)); } .hero-left3d .hl-svc:active{ transform:translateY(1px); } .hero-left3d .hl-svc:focus-visible{ outline:3px solid #171412; outline-offset:4px; } @media (prefers-reduced-motion: reduce){ .hero-left3d .hl-svc{ transition:none; } .hero-left3d .hl-svc:hover, .hero-left3d .hl-svc:active{ transform:none; } } /* -------------------------------------------------------------------------- RESPONSIVE The dot field and the mark scale down; nothing here changes the right column, which keeps its own existing breakpoints from home.css. -------------------------------------------------------------------------- */ @media (max-width: 1100px){ .hero-left3d .hl-dots{ display:none; } } @media (max-width: 900px){ .hero-left3d p.lede{ max-width:60ch; } } @media (max-width: 640px){ /* home.css turns .btn-row into a stretched column at this width. The mark is a compact block, not a full-bleed bar, so the stretch is cancelled here and the whole thing stays left-aligned with the copy. */ .hero-left3d .btn-row{ align-items:flex-start; } .hero-left3d .hl-svc{ align-items:flex-start; } .hero-left3d .hl-svc-mark{ height:82px; } .hero-left3d .hl-svc-label{ font-size:1.22rem; text-align:left; } } @media (max-width: 560px){ .hero-left3d{ padding-left:16px; } } @media (max-width: 380px){ .hero-left3d .hl-svc-mark{ height:72px; } .hero-left3d .hl-svc-label{ font-size:1.12rem; white-space:normal; } } /* -------------------------------------------------------------------------- SHORT DESKTOP VIEWPORTS — added 2026-09-08 The compaction above gets the whole hero onto a 1440x900 opening screen, but a 1366x768 or 1440x800 laptop has 100-130px less to work with and the services mark still finished below the fold. These two tiers key off the VIEWPORT HEIGHT, not the width, because height is the actual constraint. Only the headline size and three gaps move. The orbit is deliberately NOT touched here: it is pinned to the top of its column by align-self:start in home-hero-orbit.css and already scales itself with calc(100vh - 327px), so its size and position on these screens stay exactly as approved. -------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-height: 850px){ .hero-left3d h1{ --hl-x:clamp(2.25rem, 5.8vw, 5.1rem); } .hero-left3d p.lede{ margin-top:14px; line-height:1.5; } .hero-left3d .btn-row{ margin-top:12px; } } @media (min-width: 641px) and (max-height: 750px){ .hero-left3d h1{ --hl-x:clamp(2.25rem, 5.2vw, 4.6rem); } } /* -------------------------------------------------------------------------- SERVICES MARK — MOVED INTO THE EMPTY BOTTOM-RIGHT OF THE LEFT COLUMN Added 2026-09-08, owner-directed. Measured at 1440x900 before the change, left column content box x82-633, y225-833 (551 x 608): H1 225 - 515 (291) margin 18 paragraph 533 - 685 (151) margin 16 .btn-row 701 - 833 (132) <- the CTA sat at its LEFT end, x72-274, leaving x274-633 (359 x 132) empty So the mark moves right inside the row it already occupies. Nothing is re-ordered, nothing is re-flowed, and the paragraph, headline and orbit are not touched. ON THE SIZE: the CTA already filled its 132px row exactly (4 + 92 mark + 7 + 23 label + 6 = 132), so the requested 118px mark would have made the column 634px and pushed the trust cards down 26px. Reclaiming the row's top margin (16 -> 6) and trimming the internal padding and gap frees 16px, which is spent entirely on the artwork: 6 + (2 + 110 mark + 5 + 23 label + 2) = 6 + 142 = 148 = 18 + 16 + 132 - 18 i.e. the column stays 608px to the pixel and the mark grows 92 -> 110px (+20%). 118px is not reachable without adding height. -------------------------------------------------------------------------- */ /* Right-alignment costs no height, so it applies on every desktop width. */ @media (min-width: 641px){ .hero-left3d .btn-row{ justify-content:flex-end; } .hero-left3d .hl-svc{ /* was margin-left:-10px, which pulled the padding back on the LEFT so the mark lined up with the copy. Mirrored now the block is right-aligned, so the CTA's visual edge meets the column edge - the same x=633 the headline ends on. */ margin-left:0; margin-right:-10px; } } /* The enlargement is height-neutral only where the row has the space. Below 851px tall the short-viewport tiers above are already compacting the hero, so there the mark keeps its approved 92px and only the alignment changes. */ @media (min-width: 641px) and (min-height: 851px){ .hero-left3d .btn-row{ margin-top:6px; } .hero-left3d .hl-svc{ gap:5px; padding:2px 10px 2px; } .hero-left3d .hl-svc-mark{ height:110px; } } /* -------------------------------------------------------------------------- SERVICES MARK — ANCHORED TO THE ORBIT, IN THE STRIP BESIDE THE PARAGRAPH Added 2026-09-08, owner-directed: bigger, further right, higher, and never under or overlapping the orbit. WHY THE FIRST ATTEMPT DID NOTHING ON THE OWNER'S SCREEN: it was gated to viewports at least 1440 wide AND 851 tall. A maximised browser on a 1080p display is roughly 1536 x 730, so neither condition held and the mark kept its old size. Both gates are gone. WHY FIXED PIXEL OFFSETS CANNOT WORK HERE: the orbit is sized min(520px, max(380px, 100vh - 327px)), so its width - and therefore the left edge the mark has to stay clear of - moves with the WINDOW HEIGHT, not just its width. Measured strip between the paragraph and the orbit: 1366 x 900 138px 1366 x 700 208px 1440 x 900 192px 1440 x 760 236px 1536 x 900 264px 1536 x 730 322px A single offset tuned for one of those collides or wastes space in the others. So the rules below re-use the orbit's OWN expression, which makes the placement exact at every size. HOW IT IS ANCHORED: .hero-grid becomes the containing block. The right track is 1.15fr of 1fr+1.15fr, so the orbit's left edge sits 26.744% of the grid (less its share of the gap) plus half the orbit in from the grid's right edge. The mark is placed 16px left of that. Its width is whatever remains before the paragraph's right edge (a fixed 510px from the column's text edge), capped at 200px so the artwork never outgrows the vertical room. Top/height match the orbit exactly and the content is bottom-aligned, so the mark's baseline sits on the orbit's baseline and it grows upward into the empty strip. -------------------------------------------------------------------------- */ /* The strip is only wide enough when the viewport is wide relative to the orbit. Because the orbit grows with viewport HEIGHT, the condition is two dimensional - a tall window needs more width to earn the same strip. Below these, the mark keeps the approved in-flow layout further up this file. */ @media (min-width: 1440px), (min-width: 1360px) and (max-height: 800px), (min-width: 1300px) and (max-height: 720px){ /* The mark leaves the flow, so this keeps the row - and with it the whole left column and the hero's height - exactly as approved. */ .hero-left3d .btn-row{ height:142px; margin-top:6px; } /* .hero-grid is align-items:center, so whenever this column is SHORTER than the orbit column it is centred and starts below the row top. The mark is positioned from this column's top edge, so that offset pushed it down - at 1535x850 it put the artwork 19px past the hero and into the trust cards. Top-aligning the column makes top:78px exact at every size. The orbit column is already align-self:start, so the row is simply consistently top-aligned now. */ .hero-left3d{ align-self:start; } /* The headline box spans the full column even though SUNROOF - its widest line - ends around 464px. That empty right-hand part of the box was what the artwork collided with at 1440x760 and 1600x760, never the text. Shrink-wrapping the box removes the whole class of collision and changes nothing visually: the lines are left-aligned blocks. max-width keeps the existing "SUNROOF must not wrap" guarantee. */ .hero-left3d h1{ width:max-content; max-width:100%; } .hero-left3d .hl-svc{ position:absolute; /* Anchored by its BOTTOM to the orbit's foot, less 6px. Written as a top offset plus translateY(-100%) so the box stays exactly its own content height: an earlier version stretched it to the orbit's full height, which drew the keyboard focus ring around a tall empty area and made the link swallow clicks meant for the headline. */ top:calc(78px + min(520px, max(380px, calc(100vh - 327px))) - 6px); transform:translateY(-100%); /* The containing block is .hero-left3d (already position:relative), so percentages here are of the LEFT COLUMN width C, not the grid. The right track is 1.15C, so the orbit's left edge is gap + (1.15C - orbit)/2 beyond this column's right edge. */ right:calc(min(520px, max(380px, calc(100vh - 327px))) / 2 - 57.5% - 41.6px); /* remaining room before the paragraph's right edge (510px from the text edge), capped so the artwork never outgrows the vertical space */ width:min(200px, calc(157.5% - min(520px, max(380px, calc(100vh - 327px))) / 2 - 512px)); margin:0; padding:0; gap:6px; } /* width-driven now, so the artwork scales with the space instead of a fixed height. The SVG keeps its 460:568 viewBox ratio. */ .hero-left3d .hl-svc-mark{ width:100%; height:auto; } .hero-left3d .hl-svc-mark svg{ width:100%; height:auto; } /* allowed to wrap: on the narrowest strips a one-line label would be wider than the space and would push the mark into the paragraph. */ .hero-left3d .hl-svc-label{ white-space:normal; text-align:center; } } /* The bottom anchor above uses translateY, so the hover/active nudges further up this file - which set transform outright - have to be re-expressed here or they would cancel the anchoring and drop the mark by its own height. */ @media (min-width: 1440px), (min-width: 1360px) and (max-height: 800px), (min-width: 1300px) and (max-height: 720px){ .hero-left3d .hl-svc:hover{ transform:translateY(-100%) translateY(-2px); } .hero-left3d .hl-svc:active{ transform:translateY(-100%) translateY(1px); } } @media (prefers-reduced-motion: reduce){ .hero-left3d .hl-svc:hover, .hero-left3d .hl-svc:active{ transform:translateY(-100%); } }