(see adu-chrome.js). Both tables stay 1683px fixed-width like every other legacy table here, so they need the same auto-margin centering as body.mgp-adu-chrome > table above — but they're no longer direct children of body once wrapped, hence the separate selector. */ .mgp-adu-header { position: sticky; top: 0; z-index: 10000; background: #000000; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3); width: 1683px; min-width: 1683px; max-width: 1683px; margin-left: auto; margin-right: auto; } .mgp-adu-header > table { margin-left: auto; margin-right: auto; width: 1683px; min-width: 1683px; max-width: 1683px; height: 214px; table-layout: fixed; box-sizing: border-box; } /* width="1507" on the right-hand cells is a content-box hint. With #mgpAduNavCell's 260px right padding that would grow the table past 1683 (Granny 176 + 1507 + 260). Keep the padding inside the column so this header matches INFO / CONTACT / the hub. */ .mgp-adu-header > table th { box-sizing: border-box; } .mgp-adu-header > table th[rowspan="3"] { width: 176px; max-width: 176px; } #mgpAduNavCell, .mgp-adu-banner-cell, .mgp-adu-header .mgp-adu-intro-band { width: auto !important; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-header { width: 1683px; min-width: 1683px; max-width: 1683px; margin-left: auto; margin-right: auto; } /* Non-hub pages only: the 131px intro band is black with white type. The hub keeps its white showcase cell (no .mgp-adu-intro-band). */ .mgp-adu-header .mgp-adu-intro-band { background-color: #000000 !important; height: 131px; } .mgp-adu-header .mgp-adu-intro-band, .mgp-adu-header .mgp-adu-intro-band p, .mgp-adu-header .mgp-adu-intro-band .style-header-intro, .mgp-adu-header .mgp-adu-intro-band .style10 { color: #ffffff !important; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band { vertical-align: middle !important; text-align: center; height: 131px; padding: 0 20px !important; box-sizing: border-box; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .mgp-adu-hint-bar, body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .mgp-adu-hint-billboard { justify-content: center; align-items: center; width: 100%; height: auto; min-height: 54px; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .mgp-adu-hint-billboard { position: relative; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .hint-billboard-default, body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .hint-billboard-active { display: grid; place-items: center; text-align: center; position: absolute; inset: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 0; font-size: 18px; line-height: 1.35; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .hint-billboard-active { display: none; } body.mgp-adu-chrome:not(.mgp-adu-hub) .mgp-adu-intro-band .mgp-adu-hint-billboard.is-live .hint-billboard-active { display: grid; place-items: center; } /* Logo cell now rowspans the full header height (banner 52px + showcase 131px + grey nav band 31px = 214px) instead of just the top banner row, so the mascot image reads as a tall corner anchor. object-fit keeps whatever image is dropped in here from stretching/squishing. */ .mgp-adu-logo-img { display: block; width: 176px; height: 214px; object-fit: contain; background: #000000; } /* Banner cell (row 1, next to the logo) — used to be three s wide (banner image + two page-specific buttons like INFO/CONTACT or HOME/CONTACT); those buttons moved down into the grey nav band below, so this cell now colspans all three of that row's old columns. The banner graphic (Header-Button-1-Long.png) is left completely untouched at its own native 1243x52 size — no stretching, so its baked-in text stays crisp. Credits sits flush-right on this same band (250px), so the elongated art meets that button and the leftover pixels pick up the sampled teal + bevel colors instead of a hole. */ .mgp-adu-banner-cell { position: relative; padding: 0; margin: 0; background-color: #04745e; box-shadow: inset 0 5px 0 0 #85bbb1, inset 0 -5px 0 0 #01271f, inset -5px 0 0 0 #022e26; } .mgp-adu-banner-cell > a { display: block; float: left; width: 1243px; line-height: 0; } .mgp-adu-banner-cell img { display: block; width: 1243px; height: 52px; } .mgp-adu-banner-cell .mgp-adu-credits-btn-img { width: 250px; height: 52px; } /* White band showcase — same rotating 3D-barrel mechanic as the price- checker's header showcase (rotateX faces around a drum via perspective + translateZ), just restyled for this band: white background, black text, sized to the cell it lives in instead of the price- checker's compact single-line bar. Content is admin-managed (Showcase tab, admin-adu.html) instead of hardcoded paragraphs. */ .mgp-adu-showcase-cell { padding: 0 !important; } .mgp-adu-showcase { width: 100%; max-width: 100%; height: 131px; overflow: hidden; position: relative; background: #ffffff; box-sizing: border-box; margin-left: auto; margin-right: auto; } .mgp-hub-explain-ribbon { position: absolute; inset: 0; z-index: 6; box-sizing: border-box; display: flex; align-items: center; padding: 8px 16px; background: #000000; border: 3px solid #ffffff; color: #ffffff; font-family: "Tekton Pro", Arial, sans-serif; font-size: 17px; line-height: 1.35; cursor: pointer; } .mgp-hub-explain-ribbon p { margin: 0; } .mgp-hub-explain-ribbon.is-done { display: none; } .mgp-adu-showcase-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; perspective: 900px; perspective-origin: 50% 50%; } .mgp-adu-showcase-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(0deg); transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1); will-change: transform; } .mgp-adu-showcase-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 8px 20px; box-sizing: border-box; background: #ffffff; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; overflow: hidden; } .mgp-adu-showcase-text { position: relative; z-index: 1; display: inline-block; width: max-content; max-width: 100%; text-align: left; color: #000000; font-size: 18px; line-height: calc(1em + 2px); white-space: pre-wrap; overflow: hidden; max-height: 100%; } .mgp-adu-showcase-text span { line-height: calc(1em + 2px); } .mgp-adu-showcase-slide.is-image { padding: 8px 20px; } .mgp-adu-showcase-image { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 2400px; max-height: 2400px; width: auto; height: auto; object-fit: none; display: block; z-index: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; } .mgp-adu-showcase-slide.is-image .mgp-adu-showcase-text { font-size: 14px; max-width: 100%; } @media (prefers-reduced-motion: reduce) { .mgp-adu-showcase-track { transition: none; } } @media (max-width: 900px) { .mgp-adu-showcase { height: 161px; } .mgp-adu-showcase-slide { padding: 8px 16px; } .mgp-adu-showcase-text { font-size: 15px; } } /* The nav band reuses the legacy grey (#CCCCCC) purchasing-inquiry table — its bgcolor attribute is left in the HTML on purpose (that's the "keep the grey" ask). Table/th height="31" in the HTML matches the nav buttons' own height exactly (credits stays 52px on the teal banner above). Padding here is zero top/bottom so the buttons sit flush in the band. Left/right padding is also zero: the buttons sit flush against the band's left edge (align="left" HTML attribute on the ), not centered. */ /* Deliberately NOT display:flex here — overriding a 's display away from table-cell drops it out of the table's column-width algorithm entirely, which visibly shrank this band to its content width instead of the full column width every other header row uses. position:relative on a table-cell is fine and is all the account widget below needs to anchor itself; left-alignment of the nav buttons comes from the cell's own align="left" HTML attribute. */ #mgpAduNavCell { padding: 0 260px 0 0 !important; position: relative; } /* Same glossy/beveled look as Button-INFO.png and Button-CONTACT.png in the header (gradient fill + black border + a hard offset "shadow" duplicate), recreated in CSS at the same 31px height as the grey-band nav buttons. Color sampled from the logo's wireframe artwork (a hot magenta/pink, ~#e11de6) — every other hue in the logo (cyan, teal, purple, green, orange, gold, blue) is already claimed by a price-checker zone, so this is the one logo color with no zone to clash with. Font-family matches the rest of the page's declared typeface (Tekton Pro, set globally on body/td/th) instead of a generic UI sans-serif, and the size is bumped up to read at a similar visual weight to the header's INFO/CONTACT buttons (those are baked into raster images, so there's no literal font/size to inherit from them — this matches their scale instead). */ #mgpAduNavCell a.mgp-adu-nav-btn { position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 31px; padding: 0 16px; margin: 0 10px 0 0; color: #2b002b; font-family: "Tekton Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; background: linear-gradient(180deg, #ffcdf7 0%, #e63ce1 100%); border: 2px solid #000000; box-shadow: 3px 3px 0 #000000; } #mgpAduNavCell a.mgp-adu-nav-btn:hover, #mgpAduNavCell a.mgp-adu-nav-btn:focus-visible { background: linear-gradient(180deg, #ffe0fa 0%, #f04eea 100%); } #mgpAduNavCell a.mgp-adu-nav-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000000; } #mgpAduNavCell a.mgp-adu-nav-btn.is-active { background: linear-gradient(180deg, #fff0fc 0%, #e63ce1 100%); } /* Floor plans — old-school architectural blueprint: deep blueprint blue with the pale, almost-white blue "linen" ink lines were traditionally printed in. */ #mgpAduNavCell a.mgp-adu-nav-btn--blueprint { color: #dcefff; background: linear-gradient(180deg, #1f5f9e 0%, #0b3d6b 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--blueprint:hover, #mgpAduNavCell a.mgp-adu-nav-btn--blueprint:focus-visible { background: linear-gradient(180deg, #2c72b6 0%, #124a80 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--blueprint.is-active { background: linear-gradient(180deg, #3a82c8 0%, #16548f 100%); } /* Material Price-Checker — the same action-orange used for every button over on the price checker itself (#ff9900), so it visibly points to "that other app" using its own house color. */ #mgpAduNavCell a.mgp-adu-nav-btn--pricecheck { color: #241400; background: linear-gradient(180deg, #ffb340 0%, #ff9900 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--pricecheck:hover, #mgpAduNavCell a.mgp-adu-nav-btn--pricecheck:focus-visible { background: linear-gradient(180deg, #ffc266 0%, #ffa722 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--pricecheck.is-active { background: linear-gradient(180deg, #ffcf85 0%, #ffab33 100%); } /* How to — salmon pink. */ #mgpAduNavCell a.mgp-adu-nav-btn--howto { color: #330b04; background: linear-gradient(180deg, #ffb3a1 0%, #fa8072 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--howto:hover, #mgpAduNavCell a.mgp-adu-nav-btn--howto:focus-visible { background: linear-gradient(180deg, #ffc4b5 0%, #ff9585 100%); } #mgpAduNavCell a.mgp-adu-nav-btn--howto.is-active { background: linear-gradient(180deg, #ffd2c6 0%, #ffa696 100%); } /* Image-based nav buttons (Button-FloorPlans.png, Button-Material Prices-Checker.png, Button-How tor.png) replace the CSS-gradient look above — the graphics already carry their own color/label baked in, so this strips out the background/border/box-shadow/padding entirely and sets margin:0 so the three sit flush against each other with no gap. Placed after the color-variant rules above so it wins the cascade for the properties they share (same #id + tag + one-class specificity). */ #mgpAduNavCell a.mgp-adu-nav-btn--image { height: 31px; padding: 0; margin: 0; background: none; border: none; box-shadow: none; line-height: 0; vertical-align: top; } #mgpAduNavCell a.mgp-adu-nav-btn--image:hover, #mgpAduNavCell a.mgp-adu-nav-btn--image:focus-visible { background: none; filter: brightness(1.1); } #mgpAduNavCell a.mgp-adu-nav-btn--image:active { background: none; transform: none; box-shadow: none; filter: brightness(0.95); } #mgpAduNavCell a.mgp-adu-nav-btn--image.is-active { background: none; box-shadow: inset 0 -4px 0 0 #000000; } .mgp-adu-nav-btn-img { display: block; height: 31px; width: auto; } /* Account + hover-tip ? sit flush right on the grey nav band. Credits sit on the teal banner band above, same right:0 so Account still lines up under Credits. */ .mgp-adu-nav-tools { position: absolute; right: 0; top: 0; z-index: 3; height: 31px; display: flex; flex-direction: row; align-items: center; gap: 8px; } .mgp-adu-nav-account { position: relative; display: flex; align-items: stretch; line-height: 0; } #mgpAduNavCell .mgp-adu-hint-toggle { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid #666666; background: #1a1a1a; color: #888888; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #mgpAduNavCell .mgp-adu-hint-toggle:hover { border-color: #19edfe; color: #19edfe; } #mgpAduNavCell .mgp-adu-hint-toggle.is-on { border-color: #19edfe; background: #071a1e; color: #19edfe; box-shadow: 0 0 0 1px rgba(25, 237, 254, 0.25); } .mgp-adu-account-btn { display: block; padding: 0; margin: 0; border: none; background: none; cursor: pointer; line-height: 0; } .mgp-adu-account-btn-img { display: block; height: 31px; width: auto; } .mgp-adu-banner-credits { position: relative; float: left; left: auto; right: auto; top: auto; z-index: 2; line-height: 0; } .mgp-adu-credits-btn { position: relative; display: block; padding: 0; margin: 0; border: none; background: none; cursor: pointer; line-height: 0; } .mgp-adu-credits-btn-img { display: block; height: 52px; width: auto; } .mgp-adu-account-btn:hover img, .mgp-adu-account-btn:focus-visible img, .mgp-adu-credits-btn:hover img, .mgp-adu-credits-btn:focus-visible img { filter: brightness(1.1); } .mgp-adu-credits-count { position: absolute; left: calc(50% - 12px); top: 50%; transform: translate(-100%, calc(-50% + 5px)); max-width: 108px; overflow: hidden; color: #ff9900; font-family: "Tekton Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1; white-space: nowrap; text-align: right; pointer-events: none; } /* --- Floor-plan options row --------------------------------------------- Replaces the old single that mixed 8 checkbox groups with a rowspan'd rendering image into 3 flex containers between the nav band and the footer: two 190px scrollable option columns (left/right) plus a flexible middle column for the rendering. Column height is capped to the rendering image's own height (482px) — content only scrolls once a column's option groups actually exceed that. */ .mgp-adu-options-row { display: flex; align-items: stretch; gap: 8px; width: 1683px; margin: 0 auto; background: #000000; } .mgp-adu-options-col { flex: 0 0 190px; width: 190px; max-height: 482px; overflow-y: auto; overflow-x: hidden; background: #000000; scrollbar-width: thin; scrollbar-color: #555555 #1a1a1a; } .mgp-adu-options-col::-webkit-scrollbar { width: 8px; } .mgp-adu-options-col::-webkit-scrollbar-track { background: #1a1a1a; } .mgp-adu-options-col::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 4px; } .mgp-adu-option-group { padding: 8px 6px; border-bottom: 1px solid #333333; } .mgp-adu-option-group:last-child { border-bottom: none; } .mgp-adu-options-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; background: #000000; } /* Turntable slideshow standing in for the future 3D viewer — same 925x482 footprint the static rendering used to occupy, so this slots into the existing middle column without any layout change. All 8 slides are the same model/config at different angles (the model-viewer will eventually replace this whole block once the interactive 3D file is ready). */ .mgp-adu-slideshow { position: relative; width: 925px; height: 482px; max-width: 100%; } .mgp-adu-slideshow-track { position: relative; width: 100%; height: 100%; } /* Shows which foundation/roof variant is currently loaded — the yellow bar's own caption is baked into its image and can't update per variant, so this small overlay carries that context instead. */ .mgp-adu-slideshow-caption { position: absolute; top: 8px; left: 12px; z-index: 6; padding: 3px 10px; background: rgba(0, 0, 0, 0.55); color: #e63ce1; font-family: "Tekton Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; border-radius: 4px; pointer-events: none; } .mgp-adu-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; } .mgp-adu-slide.is-active { opacity: 1; pointer-events: auto; } .mgp-adu-slide img { width: 100%; height: 100%; object-fit: contain; } .mgp-adu-slideshow-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; } .mgp-adu-slideshow-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .mgp-adu-slideshow-dots span.is-active { background: #e63ce1; } /* Tap/click zones covering the left and right half of the rendering — left rewinds, right advances, and the auto-advance timer restarts from that point so browsing continues at the regular pace instead of fighting the visitor's own navigation. No enlarged/new-tab view. */ .mgp-adu-slide-nav { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; z-index: 5; outline: none; -webkit-appearance: none; appearance: none; font: inherit; } .mgp-adu-slide-nav-prev { left: 0; } .mgp-adu-slide-nav-next { right: 0; } .mgp-adu-slide-nav::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; opacity: 0; transition: opacity 0.2s ease; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); } .mgp-adu-slide-nav-prev::after { left: 18px; transform: translateY(-50%); border-width: 11px 14px 11px 0; border-color: transparent #e63ce1 transparent transparent; } .mgp-adu-slide-nav-next::after { right: 18px; transform: translateY(-50%); border-width: 11px 0 11px 14px; border-color: transparent transparent transparent #e63ce1; } .mgp-adu-slide-nav:hover::after { opacity: 0.85; } /* site-chrome-engine.js's cookie banner is styled inline on price-checker.html (it owns that element there); ADU hub pages load that same script but not that inline