/* =====================================================================
MIKE: TWEAK OPTIONS (Oct 2026), all in this one file.
Your original layout and wording are unchanged. This file only adds looks.
HOW TO SWITCH OPTIONS
Each option is a class on the tag at the top of the page, e.g.
- Background (pick ONE): bg-satin | bg-brushed | bg-graphite (none = original white gloss)
- Buttons (pick ONE): btn-smoked | btn-whiteglass | btn-silver | btn-pill (none = original buttons)
- Frames: frames (silver-glass shadow on photos, service boxes, video)
- Icons: icons-new (new line icons; remove to show the old ones)
- Fonts: font-a (final; none = original fonts; see section 6)
(The ?t= / ?panel=1 preview helper, js/mike-tweaks.js, is not part of the live site.)
The gallery spacing section (bottom of this file) is always on.
To undo EVERYTHING: delete the line in the page.
===================================================================== */
/* MIKE: shared silver colours, taken from the tile logo */
:root {
--mt-silver-1: #fbfbfc; /* highlight */
--mt-silver-2: #e6e8eb; /* light satin */
--mt-silver-3: #c9ccd1; /* mid silver */
--mt-silver-4: #9a9ea6; /* shadow silver */
--mt-graphite: #3d4148; /* grout grey */
--mt-accent: #5f6b87; /* your existing blue-grey accent */
}
/* ---------------------------------------------------------------------
1) PAGE BACKGROUND (the sides of the page around your content)
The middle stays white so text is as easy to read as before.
--------------------------------------------------------------------- */
/* MIKE: Option A "Satin Silver": soft silver at the left/right edges fading to white */
html.bg-satin, html.bg-satin body {
background: #fff linear-gradient(90deg,
#c5c9cf 0%, #dfe2e5 6%, #f3f4f6 12%, #ffffff 20%,
#ffffff 80%, #f3f4f6 88%, #dfe2e5 94%, #c5c9cf 100%) fixed;
}
/* MIKE: Option B "Brushed Steel": same idea, slightly deeper, with a fine brushed-metal grain */
html.bg-brushed, html.bg-brushed body {
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 1px, rgba(0,0,0,0.025) 1px 3px) fixed,
linear-gradient(90deg,
#b9bdc3 0%, #d3d6da 5%, #eceef0 11%, #ffffff 19%,
#ffffff 81%, #eceef0 89%, #d3d6da 95%, #b9bdc3 100%) fixed,
#fff;
}
/* MIKE: Option C "Graphite Edge": deeper grout-grey at the very edges, through silver to white (most contrast) */
html.bg-graphite, html.bg-graphite body {
background: #fff linear-gradient(90deg,
#8b9097 0%, #b3b7bd 3.5%, #dcdfe2 9%, #f5f6f7 14%, #ffffff 18%,
#ffffff 82%, #f5f6f7 86%, #dcdfe2 91%, #b3b7bd 96.5%, #8b9097 100%) fixed;
}
/* the page body itself is see-through so the html background shows */
html.bg-satin body, html.bg-brushed body, html.bg-graphite body { background: transparent; }
/* ---------------------------------------------------------------------
2) BUTTONS: "silver glass" options
Affects: the hero "Call for a free quote" button, all "Learn more" buttons,
and the phone-only sticky call button. Same size and position as before.
--------------------------------------------------------------------- */
/* MIKE: Button Option 1 "Polished Silver": satin silver bar, dark text, glassy top shine */
.btn-silver .banner-info a,
.btn-silver .containerClick a,
.btn-silver .mobile-call-btn {
color: #2b2e33;
background: linear-gradient(180deg, #ffffff 0%, #eef0f2 45%, #d5d8dc 55%, #e9ebee 100%);
border: 1px solid #a9adb4;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.06),
0 2px 4px rgba(0,0,0,0.18), 0 8px 18px rgba(30,35,45,0.18);
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
transition: all .25s ease;
}
.btn-silver .banner-info a:hover,
.btn-silver .containerClick a:hover,
.btn-silver .mobile-call-btn:hover {
color: #1d2024;
background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 45%, #e2e5e8 55%, #f2f3f5 100%);
border: 1px solid #8e939b;
box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,0.2), 0 12px 24px rgba(30,35,45,0.22);
transform: translateY(-1px);
text-decoration: none;
}
/* MIKE: Button Option 2 "Smoked Glass": see-through dark glass with a silver rim, white text */
.btn-smoked .banner-info a,
.btn-smoked .containerClick a,
.btn-smoked .mobile-call-btn {
color: #fff;
background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 50%, rgba(0,0,0,0.08) 51%, rgba(0,0,0,0.02) 100%),
rgba(52,57,66,0.62);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(225,228,232,0.85);
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 4px rgba(0,0,0,0.25), 0 10px 22px rgba(0,0,0,0.22);
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
transition: all .25s ease;
}
/* on white areas the glass is a little darker so it still reads as a button */
.btn-smoked .containerClick a { background-color: rgba(70,75,85,0.85); }
.btn-smoked .banner-info a:hover,
.btn-smoked .containerClick a:hover,
.btn-smoked .mobile-call-btn:hover {
color: #fff;
background: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0) 100%),
rgba(95,107,135,0.85);
border: 1px solid #fff;
transform: translateY(-1px);
text-decoration: none;
}
/* MIKE: Button Option 3 "Frosted Pill": rounded frosted-white glass, silver rim, blue-grey text */
.btn-pill .banner-info a,
.btn-pill .containerClick a,
.btn-pill .mobile-call-btn {
color: var(--mt-accent);
font-weight: 600;
letter-spacing: .02em;
background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(243,245,247,0.92) 100%);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid transparent;
border-radius: 999px;
background-clip: padding-box;
box-shadow: 0 0 0 1px #c3c7cd, inset 0 1px 0 #fff, inset 0 -2px 4px rgba(150,155,165,0.18),
0 3px 6px rgba(0,0,0,0.12), 0 10px 24px rgba(40,50,70,0.16);
transition: all .25s ease;
}
.btn-pill .banner-info a:hover,
.btn-pill .containerClick a:hover,
.btn-pill .mobile-call-btn:hover {
color: #fff;
background: linear-gradient(180deg, #7380a0 0%, var(--mt-accent) 100%);
box-shadow: 0 0 0 1px #c3c7cd, inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 8px rgba(0,0,0,0.18), 0 12px 26px rgba(40,50,70,0.22);
transform: translateY(-1px);
text-decoration: none;
}
/* MIKE: Button Option 4 "White Smoked Glass": like Smoked Glass but milky WHITE frosted glass.
See-through white with a blur behind it, thin silver rim, soft shine on the top half,
and a light silver glass shadow. Hover: a little brighter and the rim glows. */
.btn-whiteglass .banner-info a,
.btn-whiteglass .containerClick a,
.btn-whiteglass .mobile-call-btn {
color: #2b2e33; /* dark text on light areas */
background:
linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.30) 48%, rgba(255,255,255,0.12) 52%, rgba(255,255,255,0.22) 100%),
rgba(255,255,255,0.45); /* milky white glass */
-webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(255,255,255,0.9); /* bright inner edge */
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(150,156,165,0.55), /* thin silver rim */
inset 0 1px 0 rgba(255,255,255,0.95), /* top shine line */
inset 0 -1px 2px rgba(120,126,135,0.12),
0 2px 4px rgba(0,0,0,0.10), 0 8px 20px rgba(30,35,45,0.14); /* soft glass shadow */
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
transition: all .25s ease;
}
/* MIKE: over the hero photo: white text was hard to read on the light floor, so it's dark text on a milkier glass */
.btn-whiteglass .banner-info a {
color: #24272c;
background:
linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.42) 48%, rgba(255,255,255,0.22) 52%, rgba(255,255,255,0.32) 100%),
rgba(255,255,255,0.50);
border-color: rgba(255,255,255,0.9);
box-shadow: 0 0 0 1px rgba(200,205,212,0.7), inset 0 1px 0 #fff,
0 2px 4px rgba(0,0,0,0.18), 0 10px 24px rgba(0,0,0,0.22);
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}
/* MIKE: on white areas the glass is a bit milkier so the button still stands out */
.btn-whiteglass .containerClick a { background-color: rgba(250,251,252,0.85); }
/* MIKE: the phone sticky button floats over photos too, so it is the milkiest */
.btn-whiteglass .mobile-call-btn { background-color: rgba(255,255,255,0.72); border-radius: 24px; }
/* MIKE: hover: brighter glass, rim glows */
.btn-whiteglass .banner-info a:hover,
.btn-whiteglass .containerClick a:hover,
.btn-whiteglass .mobile-call-btn:hover {
color: #1d2024;
background:
linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.32) 52%, rgba(255,255,255,0.45) 100%),
rgba(255,255,255,0.65);
border: 1px solid #fff;
box-shadow: 0 0 0 1px rgba(175,182,192,0.85), 0 0 12px 2px rgba(205,212,222,0.85),
inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,0.12), 0 12px 26px rgba(30,35,45,0.18);
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
transform: translateY(-1px);
text-decoration: none;
}
.btn-whiteglass .banner-info a:hover {
box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 16px 4px rgba(255,255,255,0.6),
inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,0.2), 0 12px 28px rgba(0,0,0,0.25);
}
/* ---------------------------------------------------------------------
2b) FRAMES: matching subtle silver-glass shadow on photos and boxes
--------------------------------------------------------------------- */
/* MIKE: gallery photos/videos get a thin silver rim, rounded corners and a soft shadow */
.frames #gallery img.example-image,
.frames #gallery video.example-image {
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 0 0 2px rgba(160,165,172,0.45),
0 4px 10px rgba(0,0,0,0.12), 0 14px 28px rgba(30,35,45,0.12);
}
/* MIKE: the three service boxes become light silver-glass cards */
.frames .service-box {
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(244,245,247,0.9) 100%);
border: 1px solid rgba(255,255,255,0.95);
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(170,175,182,0.35), inset 0 1px 0 #fff,
0 6px 14px rgba(0,0,0,0.07), 0 18px 36px rgba(30,35,45,0.09);
padding: 28px 10px 26px;
}
/* MIKE: the YouTube showreel and the hero text box get the same glass edge */
.frames .welcm-right iframe {
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 0 0 2px rgba(160,165,172,0.45), 0 12px 28px rgba(30,35,45,0.18);
}
.frames .banner-info {
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 18px 40px rgba(0,0,0,0.25);
}
/* MIKE: service icon circles become satin silver, like the logo tiles */
.frames .service-box .icon {
background: linear-gradient(145deg, #eef0f2 0%, #c9ccd1 55%, #a4a8af 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.15);
}
/* ---------------------------------------------------------------------
3) ICONS: new line icons (inline SVG in the page, class "mt-ico")
The old icon stays in the page; this switches which one shows.
--------------------------------------------------------------------- */
.mt-ico { display: none; }
.icons-new .mt-ico {
display: inline-block;
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
/* hide the old icons when the new ones are on */
.icons-new .details .glyphicon,
.icons-new .service-box .glyphicon3,
.icons-new .contact-grid .glyphicon,
.icons-new .mobile-call-btn .glyphicon,
.icons-new span.menu img { display: none !important; }
/* sizes and colours, matched to the old icons */
.icons-new .details .mt-ico { font-size: 14px; margin-right: 6px; }
.icons-new .service-box .mt-ico { font-size: 44px; color: #fff; position: relative; top: 28px; z-index: 999; stroke-width: 1.5; }
.icons-new.frames .service-box .mt-ico { color: #3d4148; }
.icons-new.frames .service-box:hover .mt-ico { color: #fff; }
.icons-new .contact-grid .mt-ico { font-size: 26px; color: #9da1a8; }
.icons-new .mobile-call-btn .mt-ico { font-size: 16px; margin-right: 4px; }
.icons-new span.menu .mt-ico { font-size: 34px; color: #4b4f56; stroke-width: 2; }
/* back-to-top button: silver circle with a line arrow */
.icons-new #toTop {
background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e3e5e8 55%, #b9bdc3 100%);
border-radius: 50%;
box-shadow: 0 0 0 1px #a9adb4, 0 4px 10px rgba(0,0,0,0.2);
}
.icons-new #toTop::after {
content: ""; position: absolute; inset: 0;
background: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4148' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
4) GALLERY SPACING (always on)
The old
spacers were removed from the gallery. Instead every photo sits
in an even grid: same gap (16px) between all photos, rows line up, captions
span the full width. Photo order, links and captions are unchanged.
Only on the home page for now (its gallery has class "mt-tidy"); the other pages keep their old gallery.
--------------------------------------------------------------------- */
/* MIKE: the gallery becomes a 12-column grid (same column sizes as before: thirds, halves, quarters) */
#gallery.mt-tidy > .container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 16px;
row-gap: 16px;
align-items: start;
}
/* MIKE: the old row wrappers no longer create their own uneven gaps */
#gallery.mt-tidy .gallery-grids,
#gallery.mt-tidy .gallery-grids-top,
#gallery.mt-tidy .gallery-grids-middle,
#gallery.mt-tidy .clearfix { display: contents; }
#gallery.mt-tidy .gallery-info,
#gallery.mt-tidy p,
#gallery.mt-tidy .contact, #gallery.mt-tidy .footer { grid-column: 1 / -1; } /* (Contact + footer sit inside the gallery box in the page code) */
/* (Bootstrap's invisible clearfix helpers would take up grid cells, so switch them off here) */
#gallery.mt-tidy > .container::before, #gallery.mt-tidy > .container::after,
#gallery.mt-tidy .clearfix::before, #gallery.mt-tidy .clearfix::after,
#gallery.mt-tidy .gallery-right-grid::before, #gallery.mt-tidy .gallery-right-grid::after { display: none; }
/* MIKE: photo tiles: thirds span 4 columns, quarters 3, halves 6 */
#gallery.mt-tidy .col-md-4, #gallery.mt-tidy .col-md-3, #gallery.mt-tidy .col-md-6 {
float: none; width: auto; padding: 0; margin: 0; min-height: 0;
}
#gallery.mt-tidy .col-md-4 { grid-column: span 4; }
#gallery.mt-tidy .col-md-3 { grid-column: span 3; }
#gallery.mt-tidy .col-md-6 { grid-column: span 6; }
/* the 2x2 block of small photos next to a big one */
#gallery.mt-tidy .gallery-right-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
#gallery.mt-tidy .gallery-right-grid > .gallery-grid-img { grid-column: auto; }
#gallery.mt-tidy .gallery-right-top-grid { margin-top: 16px; }
#gallery.mt-tidy .gallery-grid-top-img { margin: 0; }
/* MIKE: every photo fills its tile neatly (portrait thirds, landscape halves) */
#gallery.mt-tidy .gallery-grid img.example-image,
#gallery.mt-tidy .gallery-grid video.example-image { width: 100%; aspect-ratio: 647 / 861; object-fit: cover; display: block; }
#gallery.mt-tidy .gallery-grid-top img.example-image,
#gallery.mt-tidy .gallery-right .gallery-grid-top-img img.example-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
#gallery.mt-tidy .gallery-grid-img img.example-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* MIKE: captions: a little air above and below, same everywhere */
#gallery.mt-tidy p { margin: 2px 0 14px; }
#gallery.mt-tidy .contact p { margin: 1em 0 0; } #gallery.mt-tidy .footer p { margin: 0; }
#gallery.mt-tidy .contact-icons { display: flow-root; } /* keeps the Contact spacing exactly as before */
#gallery.mt-tidy .gallery-info { margin-bottom: 8px; }
#gallery.mt-tidy .gallery-info h4 { margin-top: 18px; }
@media (max-width: 991px) {
/* MIKE: phones/tablets: same tidy grid (thirds stay thirds like before), just a smaller 10px gap */
#gallery.mt-tidy > .container { column-gap: 10px; row-gap: 10px; }
#gallery.mt-tidy .gallery-right-grid { gap: 10px; }
#gallery.mt-tidy .gallery-right-top-grid { margin-top: 10px; }
#gallery.mt-tidy p { margin: 2px 0 12px; }
}
/* ---------------------------------------------------------------------
5) SMALL FIX (always on)
MIKE: the YouTube showreel was a fixed 560px wide, so on phones the whole page
was wider than the screen (it could slide sideways and the sticky "Call" button
ended up off the bottom). Now it shrinks to fit. Desktop looks the same.
--------------------------------------------------------------------- */
.welcm-right iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* MIKE: on phones the grey intro box ran over the top of "WE TILE AND RENOVATE"; let the banner grow to fit it */
@media (max-width: 767px) { .banner { height: auto; padding-bottom: 1px; } }
/* MIKE: same problem with the long email address in Contact on small phones: let it wrap */
.contact-grid p a { overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------
6) FONTS (always on: the "font-a" class on each page's tag)
MIKE: EB Garamond for headings and the menu, Lato for body text. This also:
- makes body text bigger and darker (was 14px light grey #999, hard to read)
- restyles the menu, headings and buttons to match
- shows the hero intro in normal sentence case instead of ALL CAPS (easier to read)
The fonts are stored with the site in fonts/mike-fonts/ (free Google Fonts, OFL licence),
so nothing loads from Google.
--------------------------------------------------------------------- */
@font-face { font-family: 'MT EB Garamond'; src: url(../fonts/mike-fonts/EBGaramond-var.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'MT Lato'; src: url(../fonts/mike-fonts/Lato-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MT Lato'; src: url(../fonts/mike-fonts/Lato-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* MIKE: shared for all three font options: easier-to-read body text and calmer headings */
:is(.font-a, .font-b, .font-c) :is(.welcm-left p, .welcm-right p, .service-box p) {
font-size: 16.5px; line-height: 1.75; color: #4f545c;
}
:is(.font-a, .font-b, .font-c) #gallery p:not(.contact p):not(.footer p) { font-size: 15px; line-height: 1.6; color: #555a61; }
:is(.font-a, .font-b, .font-c) .gallery-info h4 { font-size: 17px; line-height: 1.5; color: #444950; }
:is(.font-a, .font-b, .font-c) .contact-grid p, :is(.font-a, .font-b, .font-c) .contact-grid p a { color: #555a61; }
:is(.font-a, .font-b, .font-c) .copywrite p, :is(.font-a, .font-b, .font-c) .copywrite p a { color: #6b7078; }
/* section titles: soft silver emboss instead of the old blue drop shadow */
:is(.font-a, .font-b, .font-c) :is(.services h3, .gallery-info h3, .contact h3, .welcm-left h3) , :is(.font-a, .font-b, .font-c) :is(.services h2.h3, .gallery-info h2.h3, .contact h2.h3, .welcm-left h2.h3){
color: #3d4148; text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(61,65,72,0.12);
}
:is(.font-a, .font-b, .font-c) .welcm-left h4, :is(.font-a, .font-b, .font-c) .welcm-right h3 , :is(.font-a, .font-b, .font-c) .welcm-right h2.h3{ color: #2f3338; }
/* hero intro paragraph: normal case, readable size */
:is(.font-a, .font-b, .font-c) .banner-info h3 , :is(.font-a, .font-b, .font-c) .banner-info h2.h3{
text-transform: none; font-size: 17px; line-height: 1.6; letter-spacing: 0.01em;
text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
:is(.font-a, .font-b, .font-c) .banner-info h1, :is(.font-a, .font-b, .font-c) .banner-info h2 { text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
/* the menu keeps its exact height (61px) whatever the font */
@media (min-width: 768px) {
:is(.font-a, .font-b, .font-c) .top-menu ul li a { line-height: 47px; padding: 7px 0.15em; margin: 0 18px; text-transform: uppercase; }
}
@media (max-width: 767px) {
:is(.font-a, .font-b, .font-c) .banner-info h3 , :is(.font-a, .font-b, .font-c) .banner-info h2.h3{ font-size: 15px; }
:is(.font-a, .font-b, .font-c) :is(.welcm-left p, .welcm-right p, .service-box p) { font-size: 16px; }
}
/* MIKE: OPTION A "CLASSIC": EB Garamond (the same serif as your tile logo) for headings and menu,
Lato (clean, friendly sans) for reading text. Most in keeping with the logo. */
.font-a :is(.banner-info h1, .banner-info h2, .welcm-left h3, .welcm-left h4, .welcm-right h3, .services h3,
.gallery-info h3, .contact h3, .service-box h5) , .font-a :is(.welcm-left h2.h3, .welcm-right h2.h3, .services h2.h3, .gallery-info h2.h3, .contact h2.h3){ font-family: 'MT EB Garamond', Garamond, Georgia, serif; font-weight: 500; }
.font-a :is(.banner-info h1, .banner-info h2) { font-weight: 600; letter-spacing: 0.03em; }
.font-a .welcm-left h3 , .font-a .welcm-left h2.h3{ letter-spacing: 0.03em; }
.font-a :is(.services h3, .gallery-info h3, .contact h3) , .font-a :is(.services h2.h3, .gallery-info h2.h3, .contact h2.h3){ letter-spacing: 0.02em; }
.font-a .service-box h5 { font-weight: 600; letter-spacing: 0.01em; }
.font-a :is(.welcm-left p, .welcm-right p, .service-box p, .banner-info h3, #gallery p, .gallery-info h4,
.contact-grid p, .copywrite p, .details, .details a) , .font-a :is(.banner-info h2.h3){ font-family: 'MT Lato', 'Helvetica Neue', Arial, sans-serif; }
.font-a .top-menu ul li a { font-family: 'MT EB Garamond', Garamond, Georgia, serif; font-weight: 500; }
.font-a :is(.banner-info a, .containerClick a, .mobile-call-btn) { font-family: 'MT Lato', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; letter-spacing: 0.04em; }
@media (min-width: 992px) {
.font-a :is(.banner-info h1, .banner-info h2) { font-size: 39px; line-height: 1.12; }
.font-a .welcm-left h3 , .font-a .welcm-left h2.h3{ font-size: 41px; }
.font-a :is(.services h3, .gallery-info h3, .contact h3) , .font-a :is(.services h2.h3, .gallery-info h2.h3, .contact h2.h3){ font-size: 54px; }
.font-a .welcm-left h4 { font-size: 23px; line-height: 1.3; }
.font-a .welcm-right h3 , .font-a .welcm-right h2.h3{ font-size: 36px; }
.font-a .service-box h5 { font-size: 26px; }
}
@media (min-width: 768px) { .font-a .top-menu ul li a { font-size: 18px; letter-spacing: 0.16em; } }
/* MIKE: font options B ("Modern clean": Montserrat/Open Sans) and C ("Upscale": Marcellus/Source Sans 3)
and the ?panel=1 preview picker were removed for the live site (Oct 1, 2026). Font A is the final choice.
Copies of the full option file are in ~/Desktop/GrokBot/burlingtontile-tweaks/css/mike-tweaks.css. */
/* ---------------------------------------------------------------------
7) MENU WITH 7 ITEMS (Oct 1, 2026)
MIKE: the menu now has SLABS and goes to the new contact page, so it has 7 items.
On wide screens (where the full menu shows, 1191px and up) the items sit a little
closer together and the lettering is 1px smaller, so all 7 stay on ONE row and the
bar keeps its height. Phones/tablets (the drop-down menu) are unchanged.
Delete this block to go back (the 7th item would then wrap to a second row).
--------------------------------------------------------------------- */
@media (min-width: 1191px) {
.top-menu ul { display: flex; justify-content: center; flex-wrap: nowrap; padding-left: 0; }
.top-menu ul li { flex: 0 0 auto; }
:is(.font-a, .font-b, .font-c) .top-menu ul li a { margin: 0 12px; }
.font-a .top-menu ul li a { font-size: 17px; letter-spacing: 0.1em; }
}
/* ---------------------------------------------------------------------
8) IMAGE SIZES (Oct 1, 2026)
MIKE: photos now carry width/height in the HTML so the browser can save their space
while they load (less jumping around). This line keeps them sized exactly as before.
--------------------------------------------------------------------- */
:where(img[width][height]:not([src$=".svg"])) { height: auto; }
/* ---------------------------------------------------------------------
9) LINKS INSIDE TEXT (Oct 1, 2026)
MIKE: a few existing words now link to the matching page (e.g. "fireplaces" -> Fireplaces page)
so visitors and Google can find every page. Same words, just a soft underline.
--------------------------------------------------------------------- */
a.mt-inlink { color: inherit; text-decoration: underline; text-decoration-color: rgba(61,65,72,0.45);
text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.mt-inlink:hover, a.mt-inlink:focus-visible { color: #1f2328; text-decoration-color: currentColor; }
/* ---------------------------------------------------------------------
7) QA FIXES (Oct 1, 2026, always on)
--------------------------------------------------------------------- */
/* MIKE: photo viewer: the photo, caption and close button now fit on the screen (was cut off at the bottom on laptops) */
.lb-outerContainer { margin-top: 0; }
/* MIKE: Contact section on small phones: the 3 items stack in one column so the email address fits on one line */
@media (max-width: 479px) {
.contact-grid, .contact-grid:nth-child(2) { float: none; width: 100%; margin: 0 0 18px; }
.contact-grid p a { overflow-wrap: normal; word-break: normal; }
}
/* MIKE: Bathrooms page, "Our Bathroom Renovation Services": proper space above the heading, darker easier-to-read list */
.mt-bath-services { clear: both; padding-top: 50px; }
.mt-bath-services > br { display: none; }
.mt-bath-services h2.h3 { margin-bottom: 28px; }
@media (max-width: 767px) { .mt-bath-services blockquote p { margin-left: 0; margin-right: 0; width: auto; } }
.mt-bath-services blockquote, .mt-bath-services blockquote p, .mt-bath-services blockquote strong {
color: #555; font-family: 'MT Lato', 'Helvetica Neue', Arial, sans-serif; font-weight: 400;
}
/* MIKE: Fireplaces page: the 3 sub-headings and the lists now use the site's heading/text fonts; bullets sit inside the text column on phones */
.welcm-grids h2:not(.h3) {
font-family: 'MT EB Garamond', Garamond, Georgia, serif; font-weight: 500; font-size: 30px; line-height: 1.2;
color: #2f3338; margin: 8px 0 0;
}
@media (max-width: 767px) { .welcm-grids h2:not(.h3) { font-size: 26px; } }
.welcm-left > ul { padding-left: 1.3em; margin: 0; }
.welcm-left > ul li { font-family: 'MT Lato', 'Helvetica Neue', Arial, sans-serif; font-size: 16.5px; line-height: 1.75; color: #4f545c; }
.font-a .welcm-right h4 { font-family: 'MT EB Garamond', Garamond, Georgia, serif; }
/* MIKE: hidden anti-spam field in the quote forms: use the site font (stops an old font file downloading for nothing) */
.sq-hp { font-family: 'MT Lato', Arial, sans-serif; }
/* MIKE: no visible text uses the old OpenSans and Angsana fonts any more; pointing the page default and the menu box at the
site fonts stops browsers downloading those two old font files (about 350 KB) for invisible spacing characters */
html.font-a, html.font-a body { font-family: 'MT Lato', 'Helvetica Neue', Arial, sans-serif; }
.font-a .top-menu { font-family: 'MT EB Garamond', Garamond, Georgia, serif; }
/* ---------------------------------------------------------------------
10) LOGO LOAD-IN ANIMATION: "A) Drop & settle" (picked by Mike, Oct 1, 2026)
MIKE: the big logo at the top is now drawn right in the page (not a picture file) so its
four tiles can move. When the page opens: the dark grout bed fades in, the tiles drop in
one at a time (bottom, left, right, top) with a small bounce, then "Burlington Tile" fades up.
About 1.4 seconds, plays once. Same size and place as the old logo picture.
Easy knobs (change the numbers, then save):
--dur how long each tile takes to land, in seconds (0.6)
--stagger gap between one tile starting and the next, seconds (0.14)
--bounce bounce strength: 0 = no bounce, 1 = as approved, 2 = lots (1)
No JavaScript needed: if anything fails, the logo simply shows. People who turn on
"reduce motion" on their phone/computer get a gentle fade instead.
To turn the animation off completely: delete this section (the logo stays).
--------------------------------------------------------------------- */
.mt-logo { --dur: 0.6; --stagger: 0.14; --bounce: 1; }
/* same box as the old ![]()
logo (.banner img in style.css): 726px wide max, keeps its shape */
.banner svg.mt-logo {
width: 726px; max-width: 100%; height: auto; box-sizing: border-box;
margin: 70px auto 0; padding: 0 20px 60px 0; overflow: visible;
}
.mt-logo .mt-tile, .mt-logo .mt-word { transform-box: fill-box; transform-origin: center; }
.mt-logo .mt-grout, .mt-logo .mt-shadow { animation: mt-fade calc(var(--dur) * 1.2s) ease-out calc(var(--stagger) * 1s) both; }
.mt-logo .mt-tile {
animation: mt-drop calc(var(--dur) * 1s) cubic-bezier(.4, 0, .6, 1) calc(var(--i) * var(--stagger) * 1s) both;
}
.mt-logo .mt-word { animation: mt-word-up .55s ease-out calc(3 * var(--stagger) * 1s + var(--dur) * 0.75s) both; }
/* --mt-u scales the drop for the phone logo, whose tiles are drawn bigger */
@keyframes mt-drop {
0% { transform: translateY(calc(var(--mt-u, 1) * -140px)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
12% { opacity: 1; }
55% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
72% { transform: translateY(calc(var(--mt-u, 1) * var(--bounce) * -16px)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
86% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
93% { transform: translateY(calc(var(--mt-u, 1) * var(--bounce) * -4px)); }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes mt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-word-up {
from { opacity: 0; transform: translateY(calc(var(--mt-u, 1) * 14px)); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.mt-logo .mt-tile, .mt-logo .mt-grout, .mt-logo .mt-shadow { animation: mt-fade .4s ease-out 0s both; }
.mt-logo .mt-word { animation: mt-fade .4s ease-out .15s both; }
}