@charset "UTF-8"; /* ========================================================================== Fluid layout for the Adobe Muse export. The exported pages are a fixed 1270px canvas: every element is placed at absolute pixel offsets (left / margin-top) and pulled out of flow with margin-right:-10000px. That canvas actually measures ~1470px once the nav is counted, so ANY viewport below that scrolled sideways - 403px of it at 1024px wide. This file replaces the fixed placement with a fluid grid that adapts at every width. Notes for anyone editing this: 1. DOM order != reading order. On the service pages the markup runs numbers -> descriptions -> CTA -> title -> service names, and the footer is nested inside the content block. Wrappers are hoisted with display:contents so every leaf shares one grid container, then placed explicitly. 2. .grpelem/.colelem are floated inline elements. Removing the float alone collapses them to zero height - they must be forced to display:block. 3. Specificity: the generic `.fluid #page .grpelem` reset outranks a bare `#id`, so per-element overrides are written `.fluid #page #id`. 4. Bump the ?version query on this file in every page after editing, or the 7-day CSS cache serves the old copy. ========================================================================== */ /* ========================================================================== 1. Accessibility - every page, every width ========================================================================== */ /* Slideshow captions are white text over photography; their real contrast depends on the slide behind them and cannot be fixed by colour alone. */ .SSSlideCaption p, .SSSlideCaption span { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55); } /* These sit on the dark bg1.jpg band where a mid-tone accent cannot reach 4.5:1, so they take white to match the other text on that band. */ #u411-4, #u418-4, #u422-4, #u425-4 { color: #FFFFFF !important; } #u409-4, #u410-4, #u411-4, #u418-4, #u422-4, #u425-4 { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } /* Empty in-page anchor targets are not links - keep them out of the a11y tree so they are not reported as links without a name. */ #page a.anchor_item:not([href]) { display: none; } /* ========================================================================== 2. Fluid base - applies at ALL widths on pages marked .fluid ========================================================================== */ /* The Muse canvas is wider than the viewport, which stretches and takes #page with it. Clamp both, and size #page with `auto` rather than a percentage so it cannot inherit the stretched width back again. */ html:has(body.fluid) { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } body.fluid { /* Every pagesheet sets `body { min-width: 1270px }` - the real reason the site scrolled sideways on anything narrower. min-width beats max-width, so this must be reset or nothing else takes effect. */ min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; /* Deliberately NOT overflow-x:hidden. Setting either axis to hidden forces the other to compute as `auto`, which turns into a second scroll container and produces two vertical scrollbars. html clips instead. */ overflow: visible !important; -webkit-text-size-adjust: 100%; } .fluid #page { width: auto !important; max-width: 100% !important; min-height: 0 !important; margin: 0 !important; } .fluid #page_position_content, .fluid #page > div, .fluid #ptop { max-width: 100% !important; } .fluid #page_position_content { margin: 0 !important; float: none !important; } /* un-position every Muse element */ .fluid #page .grpelem, .fluid #page .colelem { display: block !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; /* grid and flex items default to min-width:auto and refuse to shrink below their content's intrinsic width, which pushes the whole layout wider than the viewport. This is the single most important line in the file. */ min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; float: none !important; clear: none !important; } /* same guard for the hoisted leaves and any non-Muse child that lands in a grid or flex container */ .fluid #page div[id], .fluid #page a[id], .fluid #page p { min-width: 0 !important; } /* full-bleed background helpers carry fixed heights */ .fluid #page div[id$="-bw"] { height: auto !important; min-height: 0 !important; position: static !important; width: auto !important; } /* Muse's JS absolutely-positions the inner wrapper of each browser_width block, so it contributes no height and siblings overlap. */ .fluid #page div[id$="-bw"] > div { position: static !important; width: auto !important; left: auto !important; top: auto !important; height: auto !important; } .fluid #page div[id$="_align_to_page"] { width: auto !important; left: auto !important; position: static !important; margin: 0 !important; padding: 0 !important; } .fluid #page img { max-width: 100% !important; height: auto !important; } .fluid #page iframe { max-width: 100% !important; } .fluid #page p { word-wrap: break-word !important; } /* ========================================================================== 3. Header - fluid at all widths ========================================================================== */ /* same colour master_a-master.css paints on #u135 itself */ .fluid #page #u135-bw { background-color: #28292B !important; } .fluid #page #u135_align_to_page { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 2px 2px; max-width: 1270px !important; margin: 0 auto !important; padding: 12px clamp(14px, 3vw, 40px) !important; } .fluid #page #u85 { display: flex !important; align-items: center !important; margin: 0 0 6px 0 !important; } .fluid #page #u85_img { width: clamp(150px, 17vw, 230px) !important; height: auto !important; } .fluid #page #u102-4, .fluid #page #u91-4, .fluid #page #u133-4, .fluid #page #u131-4, .fluid #page #u132-4 { display: inline-block !important; flex: 0 0 auto !important; min-height: 0 !important; padding: 8px clamp(5px, 0.85vw, 14px) !important; margin: 0 !important; } .fluid #page #u102-4 p, .fluid #page #u91-4 p, .fluid #page #u133-4 p, .fluid #page #u131-4 p, .fluid #page #u132-4 p { font-size: clamp(13px, 1.2vw, 18px) !important; line-height: 1.25 !important; padding: 0 !important; white-space: nowrap !important; } /* from tablet up the logo sits left and the nav right, as on the original */ @media only screen and (min-width: 720px) { .fluid #page #u135_align_to_page { justify-content: space-between !important; } .fluid #page #u85 { margin: 0 !important; } } /* ========================================================================== 4. Footer - fluid at all widths ========================================================================== */ /* On privacy.html the footer sits OUTSIDE #page, so the #page-scoped resets never reach it - these are deliberately not scoped to #page, and cover the footer's descendants too (#pu316 carries left:492px). */ .fluid #pu329, .fluid #u329-bw, .fluid #u329, .fluid #u329_align_to_page, .fluid #u315-6, .fluid #pu316, .fluid #pu329 .grpelem, .fluid #pu329 .colelem { display: block !important; position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; /* privacy.css pushes the footer down with `margin: 2500px ...` - on the fixed canvas that placed it below a full-length page, but the fluid layout is far shorter, so it reads as 2500px of blank space above the teal bar. The service pages re-add their own top margin further down. */ margin-top: 0 !important; margin-bottom: 0 !important; float: none !important; } /* the footer is teal, not charcoal - master_a-master.css paints #u329 #0077A0 */ .fluid #u329-bw { background-color: #0077A0 !important; } /* needs #page to outrank the generic `.fluid #page div[id$="_align_to_page"]` */ .fluid #page #u329_align_to_page, .fluid #u329_align_to_page { max-width: 1270px !important; margin: 0 auto !important; padding: 22px clamp(16px, 3vw, 40px) !important; } .fluid #u315-6 { text-align: center !important; font-size: 14px !important; line-height: 22px !important; } /* ========================================================================== 5. Service pages - fluid grid Single column by default; two columns from 760px up. ========================================================================== */ .page-service #page #pu1453 { display: grid !important; grid-template-columns: 1fr; column-gap: clamp(28px, 4vw, 70px); background-color: #F8F8F8 !important; width: auto !important; max-width: none !important; margin: 0 !important; /* Full-bleed grid: the outer columns ARE the gutters, so the background spans edge to edge while content caps at 1270px and the footer can span the full width by sitting in columns 1/-1. */ grid-template-columns: minmax(clamp(16px, 4vw, 50px), 1fr) minmax(0, 1270px) minmax(clamp(16px, 4vw, 50px), 1fr); padding: clamp(30px, 5vw, 62px) 0 0 0 !important; } /* every content item lives in the centre column by default */ .page-service #page #u1481-4, .page-service #page #u1448-4, .page-service #page #u1606-4, .page-service #page #u1531-4, .page-service #page #u1618-4, .page-service #page #u1619-4, .page-service #page #u1617-4, .page-service #page #u1612-4, .page-service #page #u1613-4, .page-service #page #u1611-4, .page-service #page #u1621-4, .page-service #page #u1622-4, .page-service #page #u1620-4, .page-service #page #u1615-4, .page-service #page #u1616-4, .page-service #page #u1614-4, .page-service #page #u1624-4, .page-service #page #u1625-4, .page-service #page #u1623-4, .page-service #page #uCTA-block { grid-column: 2; } /* hoist wrappers so every leaf becomes a grid item of #pu1453 */ .page-service #page #u1453-bw, .page-service #page #u1453, .page-service #page #u1453_align_to_page, .page-service #page #pu1448-4, .page-service #page #pu1531-4, .page-service #page #pu1612-4, .page-service #page #pu1611-4, .page-service #page #pu1615-4, .page-service #page #pu1614-4 { display: contents !important; } .page-service #page #u1560-4 { display: none !important; } .page-service #page #u1481-4 { order: 1; font-size: clamp(26px, 4.4vw, 58px) !important; line-height: 1.12 !important; text-align: left !important; margin: 0 0 clamp(20px, 3vw, 40px) 0 !important; } .page-service #page #u1481-4 h1, .page-service #page #u1481-4 p { font-size: inherit !important; line-height: inherit !important; } /* single-column reading order: number -> name -> description, six times */ .page-service #page #u1448-4 { order: 10; } .page-service #page #u1606-4 { order: 11; } .page-service #page #u1531-4 { order: 12; } .page-service #page #u1618-4 { order: 20; } .page-service #page #u1619-4 { order: 21; } .page-service #page #u1617-4 { order: 22; } .page-service #page #u1612-4 { order: 30; } .page-service #page #u1613-4 { order: 31; } .page-service #page #u1611-4 { order: 32; } .page-service #page #u1621-4 { order: 40; } .page-service #page #u1622-4 { order: 41; } .page-service #page #u1620-4 { order: 42; } .page-service #page #u1615-4 { order: 50; } .page-service #page #u1616-4 { order: 51; } .page-service #page #u1614-4 { order: 52; } .page-service #page #u1624-4 { order: 60; } .page-service #page #u1625-4 { order: 61; } .page-service #page #u1623-4 { order: 62; } .page-service #page #u1448-4, .page-service #page #u1618-4, .page-service #page #u1612-4, .page-service #page #u1621-4, .page-service #page #u1615-4, .page-service #page #u1624-4 { font-size: clamp(15px, 1.4vw, 20px) !important; line-height: 1.3 !important; margin: clamp(16px, 2vw, 26px) 0 2px 0 !important; } .page-service #page #u1606-4, .page-service #page #u1619-4, .page-service #page #u1613-4, .page-service #page #u1622-4, .page-service #page #u1616-4, .page-service #page #u1625-4 { font-size: clamp(18px, 1.5vw, 21px) !important; line-height: 1.3 !important; margin: 0 0 8px 0 !important; } .page-service #page #u1531-4, .page-service #page #u1617-4, .page-service #page #u1611-4, .page-service #page #u1620-4, .page-service #page #u1614-4, .page-service #page #u1623-4 { font-size: clamp(14px, 1.05vw, 15px) !important; line-height: 1.55 !important; margin: 0 !important; } .page-service #page #uCTA-block { order: 99; display: block !important; width: auto !important; margin: clamp(28px, 4vw, 52px) 0 0 0 !important; text-align: center !important; } .page-service #page #uCTA-head { width: auto !important; font-size: clamp(20px, 2.4vw, 31px) !important; line-height: 1.25 !important; margin: 0 0 12px 0 !important; } .page-service #page #uCTA-sub { width: auto !important; max-width: 760px; margin: 0 auto 22px auto !important; font-size: clamp(14px, 1.15vw, 16px) !important; line-height: 1.5 !important; } .page-service #page #uCTA-btn { width: auto !important; margin: 0 !important; } .page-service #page #uCTA-btn a { display: inline-block !important; width: auto !important; min-width: 260px; padding: 0 34px !important; font-size: clamp(15px, 1.2vw, 17px) !important; } /* the footer is nested inside #pu1453 - keep it last and edge-to-edge */ /* the footer is nested inside the grid - span every column so it stays full-bleed regardless of viewport */ .page-service #page #pu329 { order: 999; grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 52px) !important; } /* ---- two columns from 760px up ---- */ @media only screen and (min-width: 760px) { /* gutter | column 1 | column 2 | gutter */ .page-service #page #pu1453 { grid-template-columns: minmax(clamp(16px, 4vw, 50px), 1fr) minmax(0, 600px) minmax(0, 600px) minmax(clamp(16px, 4vw, 50px), 1fr); } .page-service #page #u1481-4 { grid-column: 2 / 4; grid-row: 1; } .page-service #page #u1448-4 { grid-column: 2; grid-row: 2; } .page-service #page #u1606-4 { grid-column: 2; grid-row: 3; } .page-service #page #u1531-4 { grid-column: 2; grid-row: 4; } .page-service #page #u1618-4 { grid-column: 3; grid-row: 2; } .page-service #page #u1619-4 { grid-column: 3; grid-row: 3; } .page-service #page #u1617-4 { grid-column: 3; grid-row: 4; } .page-service #page #u1612-4 { grid-column: 2; grid-row: 5; } .page-service #page #u1613-4 { grid-column: 2; grid-row: 6; } .page-service #page #u1611-4 { grid-column: 2; grid-row: 7; } .page-service #page #u1621-4 { grid-column: 3; grid-row: 5; } .page-service #page #u1622-4 { grid-column: 3; grid-row: 6; } .page-service #page #u1620-4 { grid-column: 3; grid-row: 7; } .page-service #page #u1615-4 { grid-column: 2; grid-row: 8; } .page-service #page #u1616-4 { grid-column: 2; grid-row: 9; } .page-service #page #u1614-4 { grid-column: 2; grid-row: 10; } .page-service #page #u1624-4 { grid-column: 3; grid-row: 8; } .page-service #page #u1625-4 { grid-column: 3; grid-row: 9; } .page-service #page #u1623-4 { grid-column: 3; grid-row: 10; } .page-service #page #uCTA-block { grid-column: 2 / 4; grid-row: 11; } .page-service #page #pu329 { grid-column: 1 / -1; grid-row: 12; } } /* ========================================================================== 6. Contacts page ========================================================================== */ .page-contacts #page #pu2723 { display: flex !important; flex-direction: column !important; max-width: 1270px; margin: 0 auto !important; padding: clamp(26px, 4vw, 56px) clamp(18px, 4vw, 50px) clamp(30px, 5vw, 60px) !important; } .page-contacts #page #u2723-bw, .page-contacts #page #u2723, .page-contacts #page #u2723_align_to_page, .page-contacts #page #pu2851 { display: contents !important; } .page-contacts #page #u2721-4 { display: none !important; } .page-contacts #page #u2598-4 { order: 1; font-size: clamp(26px, 4.4vw, 58px) !important; line-height: 1.12 !important; margin: 0 0 clamp(18px, 2.5vw, 32px) 0 !important; } .page-contacts #page #u2598-4 h1 { font-size: inherit !important; line-height: inherit !important; } .page-contacts #page #u2842 { order: 2; margin: 0 0 clamp(20px, 3vw, 34px) 0 !important; } .page-contacts #page #u2838-6 { order: 3; font-size: clamp(19px, 2vw, 26px) !important; line-height: 1.3 !important; } .page-contacts #page #u2838-7 { order: 4; font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.55 !important; } .page-contacts #page #u2861-5 { order: 5; font-size: clamp(15px, 1.2vw, 17px) !important; margin-top: 14px !important; } .page-contacts #page #u2842 iframe { width: 100% !important; height: clamp(260px, 38vw, 520px) !important; display: block; } /* ========================================================================== 7. Privacy page ========================================================================== */ .page-privacy #page #pu3117 { display: flex !important; flex-direction: column !important; max-width: 1000px; margin: 0 auto !important; padding: clamp(26px, 4vw, 56px) clamp(18px, 4vw, 40px) clamp(30px, 5vw, 60px) !important; } .page-privacy #page #u3117-bw, .page-privacy #page #u3117 { display: contents !important; } .page-privacy #page #u3124-4 { order: 1; font-size: clamp(26px, 4vw, 46px) !important; line-height: 1.15 !important; margin: 0 0 16px 0 !important; } .page-privacy #page #u3113-4 { order: 2; font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.55 !important; margin-bottom: 18px !important; } .page-privacy #page #u3088-26 { order: 3; font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.6 !important; } .page-privacy #page #u3088-26 ul { padding-left: 20px !important; } .page-privacy #page #u3088-26 li { list-style: disc !important; margin-bottom: 6px !important; } /* ========================================================================== 8. Home page The home page is a stack of full-bleed bands that Muse paints over the 1270px canvas at absolute offsets. Un-positioning them without rebuilding anything leaves one long single-column ribbon - four-across feature rows become four stacked rows, the two-column testimonial block unwraps, and the page grows ~50% taller. So the whole page is rebuilt as a grid here. #page is the grid container, not #page_position_content: the DETAILS button, the "BE SUCCESSFUL" strip, the contact band and the footer are siblings of #page_position_content rather than children (a consequence of the stray in index.html), so the container has to sit one level up with #page_position_content hoisted by display:contents. ========================================================================== */ .page-home #page { display: grid !important; /* gutter | column 1 | column 2 | gutter - the outer columns ARE the gutters, so bands can span 1/-1 and stay edge to edge */ grid-template-columns: minmax(clamp(16px, 4vw, 50px), 1fr) minmax(0, 620px) minmax(0, 620px) minmax(clamp(16px, 4vw, 50px), 1fr); column-gap: clamp(20px, 2.4vw, 30px); align-content: start; } .page-home #page #page_position_content { display: contents !important; } /* one column by default; the split is added back at 860px */ .page-home #page #ptop { grid-column: 1 / -1; grid-row: 1; } .page-home #page #slideshowu272 { grid-column: 1 / -1; grid-row: 2; } .page-home #page #pu1432 { grid-column: 1 / -1; grid-row: 3; } .page-home #page #u722-4 { grid-column: 2 / 4; grid-row: 4; } .page-home #page #u721-4 { grid-column: 2 / 4; grid-row: 5; } .page-home #page #ppu723-4 { grid-column: 2 / 4; grid-row: 6; } .page-home #page #pu725-4 { grid-column: 2 / 4; grid-row: 7; } .page-home #page #pu765-4 { grid-column: 2 / 4; grid-row: 8; } .page-home #page #pu899-4 { grid-column: 2 / 4; grid-row: 9; } .page-home #page #pu933 { grid-column: 1 / -1; grid-row: 10; } .page-home #page #pu329 { grid-column: 1 / -1; grid-row: 11; } /* ---- hero ---- */ /* Muse's own ContentSlideShow widget is built for the fixed 1270px canvas: on init it measures the slide's rendered pixel size and locks the frame to it with inline width/height, so it doesn't track a fluid viewport and fights the CSS below (its inline height collapses to 0 as soon as an image is styled by anything other than the widget itself). Its init call is commented out in index.html; scripts/home-hero.js drives rotation instead, toggling a plain `.is-active` class that this stylesheet cross-fades - no pixel measuring, so it just tracks whatever size the grid below computes at any width. */ .page-home #page #slideshowu272 { display: grid !important; grid-template-columns: minmax(0, 1fr); margin: 0 !important; overflow: hidden !important; /* index.css pins this to the design-time 645px. The slide image below scales down with the viewport, so without this the frame keeps its full desktop height and leaves a growing band of empty white under the hero as the window narrows - 445px of it at 375px wide. */ height: auto !important; } /* .popup_anchor is a 0x0 positioning helper. Its width is already reset globally; the height has to go too, or these grid items measure 0 and the row they define collapses, clipping the hero away entirely. */ .page-home #page #slideshowu272 div.popup_anchor { position: static !important; height: auto !important; } .page-home #page #u282popup, .page-home #page #u276popup, .page-home #page #u290popup { grid-area: 1 / 1; } .page-home #page #u276popup { align-self: center; z-index: 1; pointer-events: none; } .page-home #page #u290popup { align-self: end; z-index: 2; } /* .popup_anchor is a zero-width positioning helper that wraps the slideshow panels; leaving it at 0 collapses the hero image and caption to nothing. `div.` is needed to outrank the generic `.fluid #page .grpelem` reset. */ .fluid #page div.popup_anchor { width: auto !important; min-width: 0 !important; max-width: 100% !important; } .page-home #page div.SlideShowContentPanel, .page-home #page div.SlideShowCaptionPanel, .page-home #page #u282, .page-home #page #u276 { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; left: auto !important; top: auto !important; height: auto !important; } /* the three slides/captions stack on one grid cell each and cross-fade via opacity, so at any moment exactly one of each is visible - no more racing the widget's own display:block/none toggling */ .page-home #page #u282, .page-home #page #u276 { display: grid !important; overflow: hidden !important; } .page-home #page div.SSSlide, .page-home #page div.SSSlideCaption { grid-area: 1 / 1; position: static !important; width: auto !important; max-width: 100% !important; /* each slide also carries the design-time height: 645px */ height: auto !important; opacity: 0; transition: opacity 0.8s ease; } /* Fallback for the first paint, and for JS being unavailable entirely: show slide 1. This must be scoped to :not(.hero-ready) - home-hero.js sets that class on the panel once it takes over. Without the guard it has the same specificity as the .is-active rule below and, being declared first, would be beaten on slide 1 but would still pin slide 1 visible underneath every later slide, stacking all three captions on top of each other. */ .page-home #page #u282:not(.hero-ready) > div.SSSlide:first-child, .page-home #page #u276:not(.hero-ready) > div.SSSlideCaption:first-child { opacity: 1; } .page-home #page div.SSSlide.is-active, .page-home #page div.SSSlideCaption.is-active { opacity: 1; } /* The slide is 1931x645; letting it keep that ratio leaves a 125px-tall sliver on a phone, so it is cropped to a readable band instead. */ .page-home #page div.SSSlide img, .page-home #page #u282 img { width: 100% !important; max-width: none !important; height: clamp(200px, 33vw, 645px) !important; object-fit: cover !important; margin: 0 !important; display: block; } .page-home #page div.SSSlideCaption { width: auto !important; max-width: 100% !important; padding: 0 clamp(18px, 4vw, 60px) !important; background: none !important; text-align: center !important; line-height: 1.05 !important; pointer-events: none; } /* the headline sits in a that carries its own 124px size while the strapline below it is a 49px

, so the two scale separately */ .page-home #page div.SSSlideCaption p { font-size: clamp(15px, 3.1vw, 49px) !important; line-height: 1.15 !important; color: #FFFFFF !important; margin: 0 !important; text-align: center !important; } .page-home #page div.SSSlideCaption span { font-size: clamp(28px, 7.6vw, 124px) !important; line-height: 1 !important; color: #FFFFFF !important; } /* ---- dot navigation ---- */ /* Scope every rule here to #u290's own children. The eight gallery thumbnails in #u442 carry the same .SSSlideLink class, so an unscoped rule turns each 293x270 photo into a 10px dot. */ .page-home #page div.SSSlideLinks#u290 { display: flex !important; position: static !important; width: auto !important; justify-content: center; gap: 10px; padding: 0 0 clamp(14px, 2.4vw, 22px) 0; } .page-home #page #u290 > div.SSSlideLink { position: static !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, 0.55) !important; border: none !important; cursor: pointer; transition: background-color 0.3s ease; } .page-home #page #u290 > div.SSSlideLink.SSSlideLinkSelected { background-color: #FFFFFF !important; } /* fluid container for the home page's stacked content bands */ .page-home #page div[id$="_align_to_page"] { max-width: 1270px !important; margin: 0 auto !important; padding: clamp(24px, 4vw, 54px) clamp(18px, 4vw, 50px) !important; } /* Muse boxes are content-box, so the 1270px cap would sit INSIDE the padding and each band would end up 100px wider than the one above it. These three carry the body copy, so they are switched to border-box and share one centred 1270px measure - the gallery and the title below match it. */ .page-home #page #u1432_align_to_page, .page-home #page #u694_align_to_page, .page-home #page #u933_align_to_page, .page-home #page #u410-4 { box-sizing: border-box !important; width: 100% !important; max-width: 1270px !important; margin: 0 auto !important; } /* -------------------------------------------------------------------------- 8a. The two stacked bands (#pu1432) Four children: the light feature band, the dark bg1 band, the dark band's TITLE and the eight-photo gallery. The title and the gallery are siblings of the dark band rather than children of it, so the band cannot simply wrap them. Instead #u694-bw/#u694 are hoisted away and bg1 is repainted on a ::before pseudo-element spanning rows 2-4 - pseudo-elements of a grid container are grid items, so it can sit behind all three. -------------------------------------------------------------------------- */ .page-home #page #pu1432 { display: grid !important; grid-template-columns: minmax(0, 1fr); isolation: isolate; } .page-home #page #pu1432::before { content: ""; grid-area: 2 / 1 / 5 / 2; background: #555A5E url("../images/bg1.jpg") no-repeat center center; background-size: cover; z-index: -1; } .page-home #page #u1432-bw { grid-area: 1 / 1; } .page-home #page #u694-bw, .page-home #page #u694 { display: contents !important; } .page-home #page #u410-4 { grid-area: 2 / 1; z-index: 1; } .page-home #page #u694_align_to_page { grid-area: 3 / 1; z-index: 1; } .page-home #page #slideshowu439 { grid-area: 4 / 1; z-index: 1; } /* ---- light band: four features, each icon + heading + description ---- */ .page-home #page #u1432_align_to_page { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 44px) clamp(20px, 2.6vw, 33px); } .page-home #page #pu376, .page-home #page #pu385, .page-home #page #pu391, .page-home #page #pu396 { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .page-home #page #u372-6, .page-home #page #u372-6 p, .page-home #page #u382-6, .page-home #page #u382-6 p, .page-home #page #u388-6, .page-home #page #u388-6 p, .page-home #page #u393-6, .page-home #page #u393-6 p { font-size: clamp(17px, 1.7vw, 21px) !important; line-height: 1.25 !important; margin: 14px 0 8px 0 !important; text-align: center !important; } .page-home #page #u373-4, .page-home #page #u373-4 p, .page-home #page #u383-4, .page-home #page #u383-4 p, .page-home #page #u389-4, .page-home #page #u389-4 p, .page-home #page #u394-4, .page-home #page #u394-4 p { font-size: clamp(13px, 1.15vw, 15px) !important; line-height: 1.55 !important; text-align: center !important; } /* ---- dark band: title, strapline, four icons, four labels ---- */ .page-home #page #u410-4, .page-home #page #u410-4 p { font-size: clamp(28px, 4.6vw, 60px) !important; line-height: 1.05 !important; text-align: center !important; color: #FFFFFF !important; margin: 0 auto !important; padding: clamp(34px, 5vw, 68px) clamp(18px, 4vw, 50px) clamp(8px, 1.4vw, 16px) !important; } .page-home #page #u694_align_to_page { display: grid !important; grid-template-columns: minmax(0, 1fr); /* auto side margins suppress a grid item's default stretch, so it would shrink to max-content (665px) without an explicit width */ width: 100% !important; column-gap: clamp(16px, 2.4vw, 33px); row-gap: clamp(12px, 1.6vw, 20px); padding: 0 clamp(18px, 4vw, 50px) clamp(30px, 4vw, 56px) !important; } /* hoist the Muse groups so all nine leaves share one grid */ .page-home #page #pu412, .page-home #page #pu409-4, .page-home #page #pu419, .page-home #page #pu418-4, .page-home #page #pu426 { display: contents !important; } .page-home #page #u409-4 { grid-column: 1; grid-row: 1; } .page-home #page #u412 { grid-column: 1; grid-row: 2; } .page-home #page #u411-4 { grid-column: 1; grid-row: 3; } .page-home #page #u419 { grid-column: 1; grid-row: 4; } .page-home #page #u418-4 { grid-column: 1; grid-row: 5; } .page-home #page #u423 { grid-column: 1; grid-row: 6; } .page-home #page #u422-4 { grid-column: 1; grid-row: 7; } .page-home #page #u426 { grid-column: 1; grid-row: 8; } .page-home #page #u425-4 { grid-column: 1; grid-row: 9; } /* Muse marks these display:block, so text-align cannot centre them */ .page-home #page #u412 img, .page-home #page #u419 img, .page-home #page #u423 img, .page-home #page #u426 img, .page-home #page #u903 img { display: block; margin: 0 auto !important; } .page-home #page #u409-4, .page-home #page #u409-4 p { font-size: clamp(16px, 1.9vw, 24px) !important; line-height: 1.35 !important; text-align: center !important; color: #FFFFFF !important; margin: 0 0 clamp(14px, 2vw, 26px) 0 !important; } .page-home #page #u411-4, .page-home #page #u411-4 p, .page-home #page #u418-4, .page-home #page #u418-4 p, .page-home #page #u422-4, .page-home #page #u422-4 p, .page-home #page #u425-4, .page-home #page #u425-4 p { font-size: clamp(15px, 1.5vw, 18px) !important; line-height: 1.35 !important; text-align: center !important; color: #FFFFFF !important; } /* ---- eight-photo gallery, still inside the dark band ---- */ .page-home #page #slideshowu439 { width: 100% !important; max-width: 1270px !important; margin: 0 auto !important; padding: 0 clamp(18px, 4vw, 50px) clamp(36px, 5vw, 72px) !important; box-sizing: border-box !important; } .page-home #page #slideshowu439 div.popup_anchor { position: static !important; height: auto !important; } /* This gallery keeps its own Muse ContentSlideShow widget for the lightbox click-to-enlarge behaviour (elastic:'off'). That widget still measures the original slide width at init and sets it as an inline style on #u442, which - unlike a CSS rule - no amount of specificity below !important can out-rank, so width has to be forced here too or the gallery reverts to its 1169px design-time size on any narrower screen. #u442 also isn't a .grpelem/.colelem, so the generic reset never gives it position:static - it keeps index.css's `position: absolute`, which makes `width: 100%` resolve against the wrong containing block (its popup_anchor parent's width is itself only "auto", so percentage resolution for an out-of-flow box skips it and climbs further up). Forcing it back into normal flow here sidesteps that entirely. */ .page-home #page #u442 { display: grid !important; position: static !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100% !important; max-width: 100% !important; visibility: visible !important; } /* the thumbnails are clip_frames with a design-time height:270px baked in; left alone, a 170px-wide photo on a phone renders 156px tall inside a 270px box, leaving 114px of dead space under every image */ .page-home #page #u442 > div { width: auto !important; height: auto !important; } .page-home #page #u442 img { width: 100% !important; height: auto !important; display: block; } /* -------------------------------------------------------------------------- 8b. "WE DO A LOT!" - copy on the left, testimonial on the right -------------------------------------------------------------------------- */ .page-home #page #u722-4, .page-home #page #u722-4 p { font-size: clamp(28px, 4.6vw, 60px) !important; line-height: 1.05 !important; text-align: center !important; margin: clamp(40px, 5vw, 74px) 0 0 0 !important; } .page-home #page #u721-4, .page-home #page #u721-4 p { font-size: clamp(16px, 1.9vw, 24px) !important; line-height: 1.35 !important; text-align: center !important; margin: 10px 0 clamp(26px, 3.4vw, 46px) 0 !important; } .page-home #page #u723-4, .page-home #page #u723-4 p, .page-home #page #u765-4, .page-home #page #u765-4 p { font-size: clamp(17px, 1.6vw, 20px) !important; line-height: 1.3 !important; margin: 0 0 10px 0 !important; } .page-home #page #u724-7, .page-home #page #u724-7 p { font-size: clamp(13px, 1.1vw, 15px) !important; line-height: 1.6 !important; } .page-home #page #pu725-4 { margin: clamp(16px, 2vw, 22px) 0 clamp(30px, 4vw, 46px) 0 !important; } .page-home #page #u725-4 { display: inline-block !important; width: 120px !important; height: 43px !important; line-height: 43px !important; text-align: center !important; background-color: #0077A0 !important; color: #FFFFFF !important; } /* the quote sits inside the speech-bubble graphic, so it is positioned as a percentage of the bubble and scales with it. The image's usable interior (measured from the PNG) only covers its top ~44% - at the image's native 273px width that box is ~90px tall, too short for this quote's ~113px of text at 12px, which is why the text spilled below the bubble outline into the avatar. Sizing the bubble up to 360px keeps the same text at the same font size but wraps it into fewer, wider lines, so it fits with room to spare - and the interior grows right along with the outline since both are the same raster image. */ .page-home #page #pu767 { position: relative !important; width: 100% !important; max-width: 360px !important; } .page-home #page #u767 { display: block !important; } .page-home #page #u767 img { width: 100% !important; height: auto !important; display: block; } .page-home #page #u766-4 { position: absolute !important; left: 6% !important; top: 4% !important; width: 88% !important; margin: 0 !important; } /* the 360px cap above only applies once the column is wide enough to reach it - below ~860px this sits in the full-width single column and gets it, but the three-column desktop layout gives it less. At the narrowest columns this quote is long enough to reach the bottom of the bubble's interior at 12px, so it takes the same 11px live uses rather than 12. */ .page-home #page #u766-4, .page-home #page #u766-4 p { font-size: 11px !important; line-height: 1.3 !important; } /* -------------------------------------------------------------------------- 8c. "BE SUCCESSFUL, IT'S EASY!" - heading and strapline left, button right -------------------------------------------------------------------------- */ .page-home #page #pu899-4 { display: grid !important; grid-template-columns: minmax(0, 1fr); column-gap: clamp(20px, 3vw, 40px); align-items: center; margin: clamp(30px, 4vw, 54px) 0 clamp(40px, 5vw, 66px) 0 !important; } .page-home #page #u900-4 { grid-column: 1; grid-row: 1; } .page-home #page #u899-4 { grid-column: 1; grid-row: 2; } .page-home #page #u901-4 { grid-column: 1; grid-row: 3; justify-self: start; } .page-home #page #u900-4, .page-home #page #u900-4 p { font-size: clamp(26px, 3.9vw, 50px) !important; line-height: 1.1 !important; } .page-home #page #u899-4, .page-home #page #u899-4 p { font-size: clamp(16px, 1.95vw, 25px) !important; line-height: 1.35 !important; margin: 10px 0 0 0 !important; } .page-home #page #u901-4 { display: inline-block !important; width: auto !important; height: clamp(52px, 5vw, 72px) !important; line-height: clamp(52px, 5vw, 72px) !important; padding: 0 clamp(20px, 2.4vw, 32px) !important; margin: 18px 0 0 0 !important; font-size: clamp(18px, 2.2vw, 28px) !important; text-align: center !important; background-color: #C84322 !important; color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 8d. Contact band and footer -------------------------------------------------------------------------- */ .page-home #page #u933 { background-size: cover !important; } .page-home #page #u933_align_to_page { text-align: center !important; padding: clamp(30px, 4.5vw, 52px) clamp(18px, 4vw, 50px) !important; } .page-home #page #u903 { text-align: center !important; margin: 0 0 clamp(14px, 2vw, 26px) 0 !important; } .page-home #page #u902-4, .page-home #page #u902-4 p { font-size: clamp(28px, 4.6vw, 60px) !important; line-height: 1.05 !important; text-align: center !important; color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 8e. Breakpoints - two columns from 560px, four from 900px -------------------------------------------------------------------------- */ @media only screen and (min-width: 560px) { .page-home #page #u1432_align_to_page, .page-home #page #u694_align_to_page { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home #page #u409-4 { grid-column: 1 / -1; grid-row: 1; } .page-home #page #u412 { grid-column: 1; grid-row: 2; } .page-home #page #u411-4 { grid-column: 1; grid-row: 3; } .page-home #page #u419 { grid-column: 2; grid-row: 2; } .page-home #page #u418-4 { grid-column: 2; grid-row: 3; } .page-home #page #u423 { grid-column: 1; grid-row: 4; } .page-home #page #u422-4 { grid-column: 1; grid-row: 5; } .page-home #page #u426 { grid-column: 2; grid-row: 4; } .page-home #page #u425-4 { grid-column: 2; grid-row: 5; } } @media only screen and (min-width: 700px) { .page-home #page #u442 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media only screen and (min-width: 820px) { .page-home #page #pu899-4 { grid-template-columns: minmax(0, 1fr) auto; } .page-home #page #u901-4 { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin: 0 !important; } } @media only screen and (min-width: 860px) { .page-home #page #ppu723-4 { grid-column: 2; grid-row: 6; } .page-home #page #pu725-4 { grid-column: 2; grid-row: 7; } .page-home #page #pu765-4 { grid-column: 3; grid-row: 6 / 8; } } @media only screen and (min-width: 900px) { .page-home #page #u1432_align_to_page, .page-home #page #u694_align_to_page { grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-home #page #u412 { grid-column: 1; grid-row: 2; } .page-home #page #u419 { grid-column: 2; grid-row: 2; } .page-home #page #u423 { grid-column: 3; grid-row: 2; } .page-home #page #u426 { grid-column: 4; grid-row: 2; } .page-home #page #u411-4 { grid-column: 1; grid-row: 3; } .page-home #page #u418-4 { grid-column: 2; grid-row: 3; } .page-home #page #u422-4 { grid-column: 3; grid-row: 3; } .page-home #page #u425-4 { grid-column: 4; grid-row: 3; } }