/* ============================================================ MG CEM & MG PLUS - single-page product + comparison "JOBSITE" industrial theme (2026): raw-concrete hero, giant packs on scaffolding, tiny workers, bold poster type, Mastermind red + MG PLUS orange, city-skyline strip (echoes the packaging art). Plain CSS3. No frameworks, no build step. Beginner-friendly: retune everything from the :root block. ============================================================ */ /* ------------------------------------------------------------ 1. TOKENS - edit colours / spacing here ------------------------------------------------------------ */ :root{ /* surfaces */ --paper: #f3f1ec; /* content background (warm off-white) */ --surface: #ffffff; /* cards */ --concrete: #1e1e1e; /* hero / footer base (charcoal) */ /* ink */ --ink: #171717; /* headings / strong text */ --ink-body: #3a3a3a; /* body text */ --ink-soft: #6f6f6f; /* muted labels */ --line: #171717; /* structural borders (industrial) */ --hair: #ded9d0; /* hairlines inside cards */ /* brand */ --cem: #e30613; /* MG CEM - Mastermind red */ --cem-dark: #b00410; --cem-soft: #fdeced; --plus: #f26a1b; /* MG PLUS - orange */ --plus-dark: #c9530f; --plus-soft: #fdefe4; /* jobsite props */ --steel: #9aa0a6; /* scaffolding poles */ --hazard: #f4b400; /* hard-hat / safety yellow */ /* shape */ --r: 6px; --r-lg: 10px; --hard: 6px 6px 0 var(--line); --hard-sm: 4px 4px 0 var(--line); --wrap: 1180px; /* tiled concrete grain (inline SVG - no image file needed) */ --grain: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'%20opacity='0.5'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ 1b. PRODUCT THEME - toggled by the MG CEM / MG PLUS switch at the top of the page (sets data-theme on ). MG CEM -> red / white / black (default) MG PLUS -> orange / white / black Only the "brand" + dark "concrete" tokens change; the comparison table etc. keep their own fixed red/orange. ------------------------------------------------------------ */ :root, html[data-theme="cem"]{ --brand: #e30613; --brand-dark: #b00410; --brand-soft: #fdeced; --paper: #f7ebe8; /* warm-red tinted page */ --bar: #1b1010; /* header / footer */ --hero-1: #491f1e; --hero-2: #241413; --hero-3: #180c0c; --hero-glow: rgba(227,6,19,.22); --sc-1: #c33642; /* product showcase gradient */ --sc-2: #5f1218; } html[data-theme="plus"]{ --brand: #f26a1b; --brand-dark: #c9530f; --brand-soft: #fdefe4; --paper: #f8f0e6; /* peach tinted page */ --bar: #1c1610; --hero-1: #4a3117; --hero-2: #251a0e; --hero-3: #180f07; --hero-glow: rgba(242,106,27,.24); --sc-1: #db8038; --sc-2: #7c3a12; } /* ------------------------------------------------------------ 2. RESET + TYPE ------------------------------------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink-body); font-family:"Inter",system-ui,-apple-system,Arial,sans-serif; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } [hidden]{ display:none !important; } h1,h2,h3{ color:var(--ink); margin:0 0 .5em; } h1,h2{ font-family:"Anton","Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; line-height:.94; letter-spacing:.01em; } h3{ font-family:"Oswald","Inter",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; } h1{ font-size:clamp(2.6rem,1.4rem+5.4vw,5.4rem); } h2{ font-size:clamp(2rem,1.3rem+3vw,3.4rem); } p{ margin:0 0 1rem; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; height:auto; display:block; } strong{ font-weight:700; color:var(--ink); } .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ------------------------------------------------------------ 3. LAYOUT HELPERS ------------------------------------------------------------ */ .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; font-family:"Oswald","Inter",sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); } .eyebrow::before{ content:""; width:26px; height:3px; background:var(--brand); } .eyebrow--ondark{ color:#c9c7c2; } .lede{ font-size:1.14rem; color:var(--ink-body); max-width:46ch; } .lede--tight{ max-width:54ch; margin-bottom:0; } /* shared button */ .btn{ display:inline-flex; align-items:center; gap:.55em; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; padding:14px 22px; color:#fff; background:var(--ink); border:2px solid var(--line); border-radius:var(--r); box-shadow:var(--hard-sm); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; } .btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line); } .btn--cem{ background:var(--cem); } .btn--plus{ background:var(--plus); } /* ------------------------------------------------------------ 4. TOP BAR ------------------------------------------------------------ */ .topbar{ position:sticky; top:0; z-index:50; background:var(--bar); border-bottom:3px solid var(--brand); } .topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; } .logo img{ height:30px; width:auto; } /* MG CEM / MG PLUS switch - re-themes the whole page */ .theme-toggle{ display:inline-flex; gap:4px; padding:4px; border:2px solid var(--line); border-radius:var(--r); background:var(--surface); } .theme-toggle button{ border:0; border-radius:3px; padding:7px 14px; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:transparent; cursor:pointer; white-space:nowrap; transition:background-color .15s ease, color .15s ease; } .theme-toggle button.is-active{ color:#fff; } .theme-toggle button[data-theme-btn="cem"].is-active{ background:var(--cem); } .theme-toggle button[data-theme-btn="plus"].is-active{ background:var(--plus); } .topbar .theme-toggle{ padding:3px; } .topbar .theme-toggle button{ padding:6px 11px; font-size:.72rem; } .pill-link{ padding:9px 18px; border:2px solid #ffffff; border-radius:var(--r); color:#fff; font-family:"Oswald","Inter",sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:background-color .15s ease, color .15s ease; } .pill-link:hover{ background:#fff; color:var(--bar); } /* ------------------------------------------------------------ 5. HERO - headline + theme switch + the site render + CTAs ------------------------------------------------------------ */ .hero{ position:relative; background:var(--hero-2); background-image: var(--grain), radial-gradient(110% 60% at 50% -4%, var(--hero-glow), transparent 60%), radial-gradient(130% 95% at 50% -6%, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%); color:#efeee9; padding:44px 0 0; border-bottom:5px solid var(--brand); overflow:hidden; transition:background-color .25s ease; } .hero-copy{ position:relative; z-index:3; text-align:center; } .hero-copy .eyebrow{ display:flex; justify-content:center; margin-bottom:14px; } .hero .theme-toggle{ margin:0 auto 26px; } .hero .theme-toggle button{ font-size:.82rem; padding:9px 18px; } .hero-h1{ color:#fff; margin:0 0 .48em; font-size:clamp(3rem,1.4rem+7.6vw,6.8rem); line-height:.92; } .hero-h1 span{ position:relative; white-space:nowrap; } .hero-h1 span::after{ content:""; position:absolute; left:0; right:0; bottom:-.1em; height:.09em; background:var(--brand); } .hero-lede{ margin:0 auto 24px; max-width:44ch; font-size:1.06rem; color:#cfccc6; } .hero-lede strong{ color:#fff; } .hero-actions{ position:relative; z-index:3; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .hero-actions .btn{ border-color:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.45); } .hero-actions .btn:hover{ box-shadow:2px 2px 0 rgba(0,0,0,.45); } /* --- the client's construction-site hero render (shown if present) --- */ .hero-photo{ position:relative; z-index:2; width:100%; max-width:560px; margin:20px auto 0; padding:0 20px; } .hero-photo img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.12); box-shadow:0 44px 90px -30px rgba(0,0,0,.75); } /* --- fallback: the two big pack cut-outs standing on the floor --- */ .jobsite{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; gap:clamp(12px,3vw,44px); margin-top:24px; padding:0 24px; } /* the "floor" the packs stand on - a soft band of light on the wall */ .jobsite::before{ content:""; position:absolute; z-index:0; left:-10%; right:-10%; bottom:6%; height:46%; background:radial-gradient(70% 100% at 50% 100%, rgba(255,255,255,.14), transparent 72%); pointer-events:none; } .rig{ position:relative; margin:0; width:min(400px,46vw); } .rig--cem { z-index:2; } .rig--plus { z-index:3; } .pack-shot{ position:relative; z-index:2; display:block; width:100%; aspect-ratio:1/1; object-fit:contain; filter:drop-shadow(0 26px 22px rgba(0,0,0,.55)); } /* elliptical contact shadow so the pack doesn't float */ .rig::after{ content:""; position:absolute; z-index:1; left:10%; right:10%; bottom:11%; height:16px; background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); filter:blur(4px); } .ribbon{ position:absolute; top:6%; left:-4px; z-index:5; background:var(--brand); color:#fff; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; padding:6px 12px; box-shadow:3px 3px 0 rgba(0,0,0,.35); } .ribbon::after{ content:""; position:absolute; left:0; bottom:-8px; border:4px solid var(--brand-dark); border-left-color:transparent; border-bottom-color:transparent; } /* white city skyline - echoes the packaging; fill matches the section below so the hero hands off cleanly. */ .skyline{ position:relative; z-index:1; display:block; width:100%; height:clamp(56px,8vw,104px); margin:-14px 0 -1px; fill:var(--paper); } /* ============================================================ 6. PRODUCT SHOWCASE - full-bleed gradient panel with a swipeable white product card (only the card slides; the dots, the arrows and the MG CEM / MG PLUS switch all move it together). Layout mirrors the client's reference shot. ============================================================ */ .pshow{ position:relative; padding:26px 0 46px; background:linear-gradient(168deg, var(--sc-1) 0%, var(--sc-2) 100%); color:#fff; overflow:hidden; transition:background-color .3s ease; } /* the whole showcase is a centred phone-width column - the red gradient just bleeds out to the page edges on wider screens */ .pshow-in{ width:100%; max-width:440px; margin:0 auto; padding:0 20px; } .pshow-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .pshow-icon{ width:44px; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:1.35rem; line-height:1; cursor:pointer; transition:background-color .15s ease; } .pshow-icon:hover{ background:rgba(255,255,255,.3); } .pshow-tag{ margin:0; display:inline-flex; align-items:center; gap:7px; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; } .pshow-tag svg{ width:16px; height:16px; fill:currentColor; } .pshow-title{ margin:0 0 20px; text-align:center; color:#fff; font-family:"Anton","Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; line-height:1; letter-spacing:.01em; font-size:clamp(2rem,1.3rem+3.2vw,3rem); } /* the showcase carousel lives in a centred phone-width column, so on a laptop the red gradient just bleeds to the page edges. */ .pshow-stage{ max-width:460px; margin:0 auto; } /* the sliding track. Big top pad = room for the pack photo to poke out above the card (like the chair in the reference); big bottom pad = room for the round + button below it. */ .pshow-track{ display:flex; gap:16px; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:68px 16px 46px; } .pshow-track::-webkit-scrollbar{ display:none; } .pcard{ flex:0 0 90%; scroll-snap-align:center; position:relative; background:#fff; color:var(--ink); border-radius:26px; padding:14px 18px 30px; box-shadow:0 26px 46px -12px rgba(0,0,0,.42); text-align:center; } .pcard[data-product="cem"] { --accent:var(--cem); --accent-dark:var(--cem-dark); } .pcard[data-product="plus"] { --accent:var(--plus); --accent-dark:var(--plus-dark); } .pcard-badge{ position:absolute; top:64px; right:-8px; z-index:3; padding:6px 12px; border-radius:999px; background:var(--ink); color:#fff; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.05em; box-shadow:0 6px 14px -4px rgba(0,0,0,.4); } /* the pack photo sits at the top of the card and spills above it */ .pcard-shot{ display:flex; align-items:flex-end; justify-content:center; margin-top:-62px; } .pcard-shot img{ width:100%; max-width:260px; aspect-ratio:1/1; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.14)); } .pcard-name{ margin:10px 0 4px; font-family:"Anton","Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.75rem; color:var(--ink); } /* compact pack toggle (MG CEM only) - pure CSS */ .pack{ margin:0; padding:0; border:0; background:none; } .pack > input[type="radio"]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .pack-pills{ display:inline-flex; gap:4px; padding:4px; margin:2px auto 8px; border:2px solid var(--line); border-radius:999px; background:#fff; } .pack-pills label, .pack-pill-static{ padding:6px 15px; border-radius:999px; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:background-color .15s ease, color .15s ease; } .pack-pill-static{ background:var(--ink); color:#fff; cursor:default; } .pack-pills label:hover{ color:var(--accent); } #cem-25:checked ~ .pack-pills label[for="cem-25"], #cem-10:checked ~ .pack-pills label[for="cem-10"]{ background:var(--ink); color:#fff; } .pack-panel{ display:none; } .pack-panel.is-open{ display:block; } #cem-25:checked ~ .pack-panel--25{ display:block; } #cem-10:checked ~ .pack-panel--10{ display:block; } .pcard-price{ margin:0; font-family:"Anton","Arial Narrow",sans-serif; letter-spacing:.01em; font-size:2rem; color:var(--ink); } .pcard-price span{ margin-left:6px; vertical-align:middle; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } /* round add-to-cart button straddling the card's lower edge */ .pcard-add{ position:absolute; left:50%; bottom:-25px; transform:translateX(-50%); width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ink); color:#fff; box-shadow:0 12px 22px -6px rgba(0,0,0,.5); transition:transform .14s ease, background-color .14s ease; } .pcard-add:hover{ transform:translateX(-50%) translateY(-3px); background:var(--accent); } .pcard-add svg{ width:22px; height:22px; fill:currentColor; } .pshow-dots{ display:flex; justify-content:center; gap:8px; margin:24px 0 22px; } .pshow-dots .dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.42); cursor:pointer; transition:width .15s ease, background-color .15s ease; } .pshow-dots .dot.is-active{ width:26px; border-radius:999px; background:#fff; } .pshow-more{ display:block; max-width:340px; margin:0 auto; text-align:center; padding:16px 24px; border-radius:999px; background:#fff; color:var(--ink); font-family:"Oswald","Inter",sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 14px 26px -10px rgba(0,0,0,.45); transition:transform .14s ease; } .pshow-more:hover{ transform:translateY(-2px); } /* ------------------------------------------------------------ 7. COMPARISON ------------------------------------------------------------ */ .compare{ padding:56px 0 64px; } .compare h2{ margin-bottom:.2em; } .compare-scroll{ margin-top:28px; overflow-x:auto; border:2px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--hard); } .compare-table{ width:100%; min-width:640px; border-collapse:collapse; background:var(--surface); } .compare-table th, .compare-table td{ padding:15px 20px; text-align:left; vertical-align:top; font-size:.92rem; border-bottom:1px solid var(--hair); } .compare-table thead th{ font-family:"Anton","Arial Narrow",sans-serif; font-size:1.15rem; font-weight:400; letter-spacing:.02em; text-transform:uppercase; color:#fff; } .compare-table thead th:first-child{ background:var(--ink); } .compare-table .th-cem{ background:var(--cem); } .compare-table .th-plus{ background:var(--plus); } .compare-table tbody th{ width:168px; font-family:"Oswald","Inter",sans-serif; font-weight:600; color:var(--ink-soft); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; background:#faf9f7; } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{ border-bottom:0; } .mini-btn{ display:inline-flex; align-items:center; gap:5px; margin:2px 6px 2px 0; padding:6px 14px; border:2px solid var(--line); border-radius:3px; font-family:"Oswald","Inter",sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#fff; } .mini-btn--cem{ background:var(--cem); } .mini-btn--cem:hover{ background:var(--cem-dark); } .mini-btn--plus{ background:var(--plus); } .mini-btn--plus:hover{ background:var(--plus-dark); } /* ------------------------------------------------------------ 8. FAQ ------------------------------------------------------------ */ .faq{ padding:8px 0 72px; } .faq h2{ margin-bottom:22px; } .faq-list{ display:grid; gap:12px; max-width:780px; } .faq details{ background:var(--surface); border:2px solid var(--line); border-radius:var(--r); overflow:hidden; } .faq summary{ position:relative; list-style:none; cursor:pointer; padding:16px 52px 16px 20px; font-family:"Oswald","Inter",sans-serif; font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--brand); } .faq details[open] summary::after{ content:"\2212"; } .faq details[open] summary{ border-bottom:2px solid var(--line); } .faq details p{ margin:0; padding:15px 20px 18px; font-size:.93rem; color:var(--ink-body); } /* ------------------------------------------------------------ 9. FOOTER ------------------------------------------------------------ */ .foot{ position:relative; background:var(--bar); background-image:var(--grain), linear-gradient(180deg,var(--hero-2),var(--hero-3)); color:#c9c7c2; border-top:5px solid var(--brand); padding:44px 0 28px; } .foot-in{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; } .foot-logo{ height:28px; width:auto; margin-bottom:10px; } .foot p{ margin:0; color:#9a9893; font-size:.9rem; } .foot-contact{ display:grid; gap:6px; font-size:.9rem; color:#b9b7b2; } .foot-contact a:hover{ color:#fff; } .foot-legal{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid #333; font-size:.8rem; color:#8f8d88; } .foot-legal a:hover{ color:#fff; } /* ------------------------------------------------------------ 10. RESPONSIVE ------------------------------------------------------------ */ @media (max-width:720px){ .topbar .pill-link{ display:none; } /* keep header to logo + switch */ .topbar-in{ justify-content:space-between; } } @media (max-width:560px){ .wrap{ padding:0 16px; } .eyebrow{ font-size:.7rem; letter-spacing:.12em; } .logo img{ height:26px; } .topbar .theme-toggle button{ padding:6px 9px; font-size:.68rem; letter-spacing:.04em; } .hero{ padding-top:40px; } .hero .theme-toggle button{ font-size:.76rem; padding:8px 14px; } .hero-actions{ flex-direction:column; align-items:center; gap:10px; } .hero-actions .btn{ width:100%; max-width:320px; justify-content:center; } .hero-photo{ padding:0 14px; margin-top:14px; } .jobsite{ gap:12px; padding:0 10px; margin-top:18px; } .rig{ width:47vw; } .ribbon{ font-size:.56rem; padding:4px 8px; } .pshow{ padding:22px 0 40px; } .pshow-title{ font-size:clamp(1.9rem,5vw+.6rem,2.4rem); } .pshow-track{ padding:60px 12px 46px; } .compare{ padding:40px 0 48px; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }