/* ========================================================= LAYOUT.CSS ========================================================= This file controls the OVERALL page structure. Think of this as: - the walls - the floor - the room size NOT the furniture. ========================================================= */ /* ========================================================= BODY ========================================================= */ body { /* Remove browser default spacing. */ margin: 0; padding: 0; /* Photo background behind the light catalogue shell. The actual URL is supplied by a CSS custom property on so Admin can change it without editing this stylesheet. When no local background image is available, the fallback is no image rather than an external URL that may disappear during the replacement-site launch. Activity-log note: CSS rendering is not logged. Durable background changes are logged by SiteBackgroundAdminController when the Admin form is saved. */ background-color: var(--wwd-colour-background); background-image: var(--wwd-page-background-image, none); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* Basic readable font. */ font-family: Arial, Helvetica, sans-serif; /* Default text color. */ color: #222; /* Default font size. */ font-size: 16px; } /* ========================================================= MAIN PAGE CONTAINER ========================================================= */ .page { /* Catalogue-style page shell. The previous storefront had a fixed catalogue width. The rebuild keeps that centered catalogue feel on desktop, but lets the page shrink cleanly on tablets and phones. */ width: calc(100% - 100px); max-width: 4000px;/*1200px;*/ /* Center the catalogue page. */ margin: 0 auto; /* Light content area over the selected site background. */ background: var(--wwd-colour-background); /* Space inside the content shell. */ padding: 20px; /* Include padding in the width calculation. */ box-sizing: border-box; /* Prevent child elements from overflowing the page shell. */ overflow-x: hidden; } /* ========================================================= CART / CHECKOUT ORDER FLOW SHELL ========================================================= The default public catalogue shell uses the light W. W. Doak page background over the legacy photo background. Cart and checkout are focused customer workflows, so their actual contents sit inside one inset white card that behaves like a larger product card. Activity-log note: This CSS only changes presentation. Do not activity-log it. Cart quantity, cart removal, customer information, shipping selection, payment submission, and order submission should continue to be logged from the relevant PHP controllers where the durable action occurs. ========================================================= */ .page--order-flow { /* Keep the same light catalogue background as the rest of the storefront. The order-flow contents are placed on a narrower white card below. */ background: var(--wwd-colour-background); /* Give the inset card room to breathe inside the page shell. */ padding-top: 36px; padding-bottom: 36px; } .order-flow-card { /* This wrapper is opened in the public header and closed in the public footer for /cart and /checkout routes so the full order flow uses one consistent white-card surface without duplicating wrapper markup in every view file. */ width: calc(100% - 56px); max-width: 1500px; margin: 0 auto; padding: 24px 28px 30px; box-sizing: border-box; background: var(--wwd-colour-white); border: 1px solid #c8cdd4; border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--wwd-colour-dark-blue-rgb), 0.12); /* Wide order-summary tables should scroll inside the card instead of pushing the whole site sideways. */ overflow-x: auto; } /* Backward-compatible selector for any checkout-specific rules already using the older wrapper name. */ .checkout-flow-card { background: var(--wwd-colour-white); } @media (max-width: 900px) { .page--order-flow { padding-top: 18px; padding-bottom: 18px; } .order-flow-card { width: calc(100% - 20px); padding: 16px; border-radius: 10px; } } @media (max-width: 520px) { .page--order-flow { padding: 10px 0; } .order-flow-card { width: 100%; padding: 12px; border-left: 0; border-right: 0; border-radius: 0; } } /* ========================================================= PAGE TITLES ========================================================= */ h1 { /* Space below title. */ margin-bottom: 20px; /* Large heading text. */ font-size: 28px; /* Non-bold looks more classic catalog style. */ font-weight: normal; /* Bottom divider line. */ border-bottom: 2px solid #ccc; /* Space between text and border. */ padding-bottom: 10px; /* Prevent long titles from breaking layouts. */ white-space: normal; overflow-wrap: break-word; }