/* ================================================================= Mapbox Suite — Shared Product Page Styles ================================================================= One stylesheet for every Mapbox-family product page: - mapbox-addons-suite-product.html (the full 14-module suite) - route-planner-product.html (Route Planner Suite, 6 modules) - delivery-route-planner-product.html (Delivery extension, 8 modules) - contacts-route-planner-product.html (Contacts extension, 9 modules) Bootstrap 5 / Odoo coexistence ------------------------------ - All rules are scoped under .mxsuite-product so nothing leaks out to the rest of the page. - CSS variables live on .mxsuite-product (not :root) — they cannot shadow Odoo or Bootstrap variables. - Bootstrap classes like .container and .label are used directly in the markup. Our customizations target .mxsuite-product .container and .mxsuite-product .label, which have higher specificity than Bootstrap's plain .container / .label — so our rules win inside the wrapper while Bootstrap's defaults still apply everywhere else. - No global body/html/p/section overrides — every element selector is qualified by .mxsuite-product. HTML usage ---------- 1. Wrap the page content in

...

. 2. Use class="container" wherever the markup needs a page-width container (Bootstrap 5 also styles .container; our rule is more specific because it is scoped under .mxsuite-product, so it wins inside the wrapper). 3. Link this stylesheet from : ================================================================= */ /* ------------------------------------------------------------------ Root wrapper + design tokens ------------------------------------------------------------------ */ .mxsuite-product { /* Colours map onto Bootstrap / Odoo theme tokens with sensible fallbacks. Inside the live website the page inherits the brand palette automatically; standalone it falls back to the hex codes. */ --color-primary: var(--bs-primary, #0b5394); --color-primary-dark: color-mix(in srgb, var(--color-primary) 70%, #000); --color-accent: var(--bs-success, #1ea97c); --color-accent-alt: var(--bs-warning, #b45309); --color-text: var(--bs-body-color, #1f2933); --color-muted: var(--bs-secondary-color, #52606d); --color-bg: var(--bs-body-bg, #ffffff); --color-bg-alt: var(--bs-tertiary-bg, #f5f7fa); --color-border: var(--bs-border-color, #e4e7eb); --radius: 8px; --max-width: 1100px; --color-bg-hero: #030507; /* Font is intentionally not declared here — the page inherits the site / Odoo theme font from . */ color: var(--color-text); line-height: 1.65; background: var(--color-bg); scroll-behavior: smooth; } .mxsuite-product, .mxsuite-product *, .mxsuite-product *::before, .mxsuite-product *::after { box-sizing: border-box; } .mxsuite-product .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ .mxsuite-product header.hero { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-bg-hero) 100%); color: #fff; padding: 5.5rem 0 5rem; } .mxsuite-product header.hero .meta { display: inline-block; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); margin-bottom: 1.25rem; } .mxsuite-product header.hero h1 { font-size: 3rem; margin: 0 0 1.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #fff; } .mxsuite-product header.hero .tagline { font-size: 1.15rem; font-weight: 400; line-height: 1.65; opacity: 0.92; max-width: 760px; margin: 0 0 2rem; } .mxsuite-product header.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 2.25rem; } .mxsuite-product header.hero .hero-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.6rem; border-radius: 6px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .mxsuite-product header.hero .hero-cta:hover, .mxsuite-product header.hero .hero-cta:focus { transform: translateY(-1px); text-decoration: none; } .mxsuite-product header.hero .hero-cta-primary { background: #fff; color: var(--color-primary-dark); } .mxsuite-product header.hero .hero-cta-primary:hover, .mxsuite-product header.hero .hero-cta-primary:focus { background: rgba(255, 255, 255, 0.92); color: var(--color-primary-dark); } .mxsuite-product header.hero .hero-cta-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); } .mxsuite-product header.hero .hero-cta-secondary:hover, .mxsuite-product header.hero .hero-cta-secondary:focus { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.7); } .mxsuite-product header.hero .hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } .mxsuite-product header.hero .hero-badges span { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); padding: 0.35rem 0.85rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; /* font-family intentionally omitted — inherits site font */ } /* ------------------------------------------------------------------ Sticky table of contents ------------------------------------------------------------------ */ .mxsuite-product nav.toc { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: 1rem 0; position: sticky; top: 0; z-index: 10; } .mxsuite-product nav.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; } .mxsuite-product nav.toc a { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: 0.95rem; } .mxsuite-product nav.toc a:hover { text-decoration: underline; } .mxsuite-product nav.toc .section-label { color: var(--color-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-right: 0.25rem; } /* ------------------------------------------------------------------ Section, headings, paragraphs ------------------------------------------------------------------ */ .mxsuite-product section { padding: 3rem 0; border-bottom: 1px solid var(--color-border); } .mxsuite-product section:last-of-type { border-bottom: none; } .mxsuite-product section h2 { font-size: 1.9rem; color: var(--color-primary-dark); margin: 0 0 0.5rem; } .mxsuite-product section h3 { font-size: 1.3rem; color: var(--color-primary-dark); margin: 1.75rem 0 0.6rem; } .mxsuite-product section h4 { font-size: 1rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 1.5rem 0 0.5rem; } .mxsuite-product p { margin: 0 0 1rem; } /* ------------------------------------------------------------------ Feature list (bulleted list with custom dot) ------------------------------------------------------------------ */ .mxsuite-product ul.feature-list { list-style: none; padding: 0; margin: 0 0 1rem; } .mxsuite-product ul.feature-list li { position: relative; padding: 0.6rem 0 0.6rem 1.75rem; border-bottom: 1px solid var(--color-border); } .mxsuite-product ul.feature-list li:last-child { border-bottom: none; } .mxsuite-product ul.feature-list li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); } .mxsuite-product ul.feature-list li strong { color: var(--color-primary-dark); } /* ------------------------------------------------------------------ Tier header (Foundation / Application banner) ------------------------------------------------------------------ */ .mxsuite-product .tier-header { background: #fff; border-left: 4px solid var(--color-primary); padding: 0.75rem 1rem; margin: 0 0 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; } .mxsuite-product .tier-header .tier-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); font-weight: 700; margin-bottom: 0.25rem; } .mxsuite-product .tier-header h2 { margin: 0; font-size: 1.6rem; } .mxsuite-product .tier-header.app { border-left-color: var(--color-accent); } .mxsuite-product .tier-header.app .tier-label { color: var(--color-accent); } /* ------------------------------------------------------------------ Module card — default (full-page width, used on route-planner-product, delivery-route-planner-product, and contacts-route-planner-product). One card per row. ------------------------------------------------------------------ */ .mxsuite-product .module-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; margin: 2rem 0; } .mxsuite-product .module-card.foundation { border-left: 4px solid var(--color-primary); } .mxsuite-product .module-card.application { border-left: 4px solid var(--color-accent); } .mxsuite-product .module-card h2 { margin-top: 0; } .mxsuite-product .module-card .module-label { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 4px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; } .mxsuite-product .module-card.foundation .module-label { background: var(--color-primary); } .mxsuite-product .module-card.application .module-label { background: var(--color-accent); } /* ------------------------------------------------------------------ Module grid — compact variant (used on the Mapbox Addons Suite page where 14 module cards are shown side-by-side in a grid). Inheriting from .module-card and overriding the differences. ------------------------------------------------------------------ */ .mxsuite-product .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } .mxsuite-product .module-grid .module-card { padding: 1.5rem; margin: 0; display: flex; flex-direction: column; } .mxsuite-product .module-grid .module-card .module-label { font-size: 0.7rem; padding: 0.18rem 0.55rem; margin-bottom: 0.5rem; align-self: flex-start; } .mxsuite-product .module-grid .module-card h3 { margin: 0.25rem 0 0.4rem; font-size: 1.15rem; color: var(--color-primary-dark); } .mxsuite-product .module-grid .module-card code.tech-name { display: block; font-size: 0.78rem; color: var(--color-muted); margin-bottom: 0.6rem; /* font-family intentionally omitted — inherits site font */ } .mxsuite-product .module-grid .module-card p { margin: 0 0 0.6rem; font-size: 0.93rem; color: var(--color-text); } .mxsuite-product .module-grid .module-card .mini-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.6rem; } .mxsuite-product .module-grid .module-card .mini-badges span { background: #fff; border: 1px solid var(--color-border); padding: 0.18rem 0.5rem; border-radius: 4px; font-size: 0.78rem; color: var(--color-muted); /* font-family intentionally omitted — inherits site font */ } /* ------------------------------------------------------------------ "Built On" callout (linking to a parent product page) ------------------------------------------------------------------ */ .mxsuite-product .built-on-card { background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%); border: 1px solid #c6dcf0; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2rem 0; display: flex; flex-direction: column; gap: 0.5rem; } .mxsuite-product .built-on-card .label { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start; } .mxsuite-product .built-on-card h3 { margin: 0.25rem 0 0.3rem; color: var(--color-primary-dark); } .mxsuite-product .built-on-card p { margin: 0; color: var(--color-text); } .mxsuite-product .built-on-card a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .mxsuite-product .built-on-card a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ Sub-product cards (link out to standalone sub-product pages from the Mapbox Addons Suite page) ------------------------------------------------------------------ */ .mxsuite-product .subproduct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .mxsuite-product .subproduct-card { background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%); border: 1px solid #c6dcf0; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; } .mxsuite-product .subproduct-card .label { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start; margin-bottom: 0.5rem; } .mxsuite-product .subproduct-card h3 { margin: 0.25rem 0 0.4rem; color: var(--color-primary-dark); font-size: 1.15rem; } .mxsuite-product .subproduct-card p { margin: 0 0 0.75rem; font-size: 0.93rem; color: var(--color-text); } .mxsuite-product .subproduct-card .module-count { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 0.5rem; } .mxsuite-product .subproduct-card a { margin-top: auto; color: var(--color-primary); font-weight: 600; text-decoration: none; font-size: 0.93rem; } .mxsuite-product .subproduct-card a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ Capability block (themed feature groups on the Mapbox Addons Suite page — e.g. "Mapping Infrastructure", "Route Planning") ------------------------------------------------------------------ */ /* Two-column grid wrapper — wrap .capability-block elements in this to render them side-by-side. Falls back to a single column below 768 px so the feature lists stay readable on mobile. */ .mxsuite-product .capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; align-items: start; /* each card stays its natural height */ } @media (max-width: 768px) { .mxsuite-product .capability-grid { grid-template-columns: 1fr; } } .mxsuite-product .capability-block { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0; /* margin handled by the grid gap when inside .capability-grid */ } .mxsuite-product .capability-block h3 { margin: 0 0 0.4rem; font-size: 1.15rem; } .mxsuite-product .capability-block .capability-modules { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 0.6rem; /* font-family intentionally omitted — inherits site font */ } /* ------------------------------------------------------------------ Tech badges (per-module tech-stack indicators, used inside .module-card on the full-page product pages) ------------------------------------------------------------------ */ .mxsuite-product .tech-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1.5rem; } .mxsuite-product .tech-badges span { background: #fff; border: 1px solid var(--color-border); padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.85rem; color: var(--color-muted); /* font-family intentionally omitted — inherits site font */ } /* ------------------------------------------------------------------ Architecture stack (Route Planner Suite — Overview section) ------------------------------------------------------------------ */ .mxsuite-product .architecture-stack { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .mxsuite-product .architecture-stack ol { margin: 0; padding-left: 1.25rem; color: var(--color-text); } .mxsuite-product .architecture-stack ol li { padding: 0.35rem 0; } .mxsuite-product .architecture-stack ol li code { background: var(--color-bg-alt); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.9em; color: var(--color-primary-dark); } /* ------------------------------------------------------------------ Workflow steps (numbered cards — Delivery + Contacts pages) ------------------------------------------------------------------ */ .mxsuite-product .workflow-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; } .mxsuite-product .workflow-steps li { counter-increment: step; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1rem 1rem 3.5rem; position: relative; color: var(--color-text); } .mxsuite-product .workflow-steps li::before { content: counter(step); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 700; font-size: 0.9rem; } /* ------------------------------------------------------------------ Configuration table (Delivery Route Planner — setup instructions) ------------------------------------------------------------------ */ .mxsuite-product .config-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .mxsuite-product .config-table th, .mxsuite-product .config-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; } .mxsuite-product .config-table th { background: var(--color-bg-alt); color: var(--color-primary-dark); font-weight: 600; letter-spacing: 0.02em; } .mxsuite-product .config-table tr:last-child td { border-bottom: none; } /* ------------------------------------------------------------------ Who It's For callout ------------------------------------------------------------------ */ .mxsuite-product .who-for { background: #fff; border-left: 4px solid var(--color-accent); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; } .mxsuite-product .who-for strong { color: var(--color-accent); display: block; margin-bottom: 0.3rem; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; } /* ------------------------------------------------------------------ Benefit grid + benefit card ------------------------------------------------------------------ */ .mxsuite-product .benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; } .mxsuite-product .benefit-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; } .mxsuite-product .benefit-card h4 { margin: 0 0 0.5rem; color: var(--color-primary-dark); text-transform: none; letter-spacing: 0; font-size: 1.05rem; } .mxsuite-product .benefit-card p { margin: 0; color: var(--color-muted); font-size: 0.95rem; } /* ------------------------------------------------------------------ Bundle contents list (with optional NEW pill on extension items) ------------------------------------------------------------------ */ .mxsuite-product .bundle-list { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .mxsuite-product .bundle-list h4 { margin: 0.75rem 0 0.5rem; color: var(--color-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; } .mxsuite-product .bundle-list h4:first-child { margin-top: 0; } .mxsuite-product .bundle-list ol { margin: 0 0 1rem; padding-left: 1.25rem; } .mxsuite-product .bundle-list ol li { padding: 0.35rem 0; color: var(--color-text); } .mxsuite-product .bundle-list ol li code { background: var(--color-bg-alt); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.9em; color: var(--color-primary-dark); } .mxsuite-product .bundle-list ol li.new-badge::after { content: "NEW"; background: var(--color-accent); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 3px; margin-left: 0.5rem; letter-spacing: 0.05em; } /* ------------------------------------------------------------------ Screenshot carousel (between Hero and sticky TOC) ------------------------------------------------------------------ */ .mxsuite-product .screenshots { padding: 2.75rem 0 2.5rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } /* Outer wrapper — clips the sliding track */ .mxsuite-product .screenshot-carousel { position: relative; overflow: hidden; border-radius: var(--radius); } /* Horizontal strip that holds all slides side-by-side */ .mxsuite-product .carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* Each slide takes the full carousel width */ .mxsuite-product .carousel-slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* SVG placeholder box — swap for when real screenshots exist */ .mxsuite-product .screenshot-placeholder { width: 100%; aspect-ratio: 16 / 9; background: var(--color-bg-alt); border: 2px dashed var(--color-border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--color-muted); user-select: none; } .mxsuite-product .screenshot-placeholder svg { width: 3rem; height: 3rem; opacity: 0.4; color: var(--color-muted); } .mxsuite-product .screenshot-placeholder .placeholder-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); opacity: 0.7; } /* Screenshot images — enforces a consistent 16:9 frame regardless of the source image's natural dimensions. object-fit: cover fills the frame without distortion; object-position centres the crop. Swap src to any resolution and the layout stays pixel-perfect. */ .mxsuite-product .screenshot-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; /* favour the top of UI screenshots */ border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-alt); /* shown while the image loads */ cursor: zoom-in; } @media (max-width: 640px) { .mxsuite-product .screenshot-img { aspect-ratio: 4 / 3; } } /* ------------------------------------------------------------------ Lightbox overlay — opens when a .screenshot-img is clicked. Uses position:fixed so it escapes any overflow:hidden ancestor (including the carousel wrapper). Scoped under .mxsuite-product for CSS variable access; z-index 9999 sits above Odoo's sticky nav. ------------------------------------------------------------------ */ .mxsuite-product .mxs-lightbox { display: none; /* hidden by default */ position: fixed; inset: 0; z-index: 9999; background: rgba(3, 5, 7, 0.88); align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; /* Fade in */ animation: mxs-lb-fade 0.2s ease; } .mxsuite-product .mxs-lightbox.is-open { display: flex; } @keyframes mxs-lb-fade { from { opacity: 0; } to { opacity: 1; } } /* The full, un-cropped image inside the lightbox */ .mxsuite-product .mxs-lightbox-img { max-width: min(100%, 1400px); max-height: 90vh; width: auto; height: auto; object-fit: contain; /* show everything, no cropping */ border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); cursor: default; /* don't inherit zoom-out from overlay */ /* Subtle scale-in */ animation: mxs-lb-scale 0.22s cubic-bezier(0.34, 1.3, 0.64, 1); } @keyframes mxs-lb-scale { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Close (×) button — top-right corner */ .mxsuite-product .mxs-lightbox-close { position: fixed; top: 1rem; right: 1.25rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; z-index: 10000; } .mxsuite-product .mxs-lightbox-close:hover, .mxsuite-product .mxs-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.25); transform: scale(1.1); outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Caption below each slide */ .mxsuite-product .screenshot-caption { text-align: center; font-size: 0.95rem; color: var(--color-muted); max-width: 680px; margin: 0; padding: 0 1rem; line-height: 1.55; } /* Prev / Next arrow buttons */ .mxsuite-product .carousel-btn { position: absolute; top: calc(50% - 1.5rem); /* vertically centred on the image, not caption */ transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-border); border-radius: 50%; width: 2.6rem; height: 2.6rem; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-primary-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; z-index: 2; padding: 0; } .mxsuite-product .carousel-btn:hover, .mxsuite-product .carousel-btn:focus-visible { background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); outline: 2px solid var(--color-primary); outline-offset: 2px; } .mxsuite-product .carousel-btn-prev { left: 0.6rem; } .mxsuite-product .carousel-btn-next { right: 0.6rem; } /* Dot navigation */ .mxsuite-product .carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; margin-bottom: 0.25rem; } .mxsuite-product .carousel-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-border); border: none; cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; } .mxsuite-product .carousel-dot.active { background: var(--color-primary); transform: scale(1.3); } .mxsuite-product .carousel-dot:hover { background: var(--color-primary); opacity: 0.6; } /* Responsive tweaks */ @media (max-width: 640px) { .mxsuite-product .carousel-btn { width: 2rem; height: 2rem; font-size: 1.1rem; } .mxsuite-product .screenshot-placeholder { aspect-ratio: 4 / 3; } } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ .mxsuite-product footer { background: var(--color-bg-alt); padding: 2rem 0; text-align: center; color: var(--color-muted); font-size: 0.9rem; } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ @media (max-width: 640px) { .mxsuite-product header.hero { padding: 3.5rem 0 3rem; } .mxsuite-product header.hero h1 { font-size: 2rem; } .mxsuite-product header.hero .tagline { font-size: 1rem; } .mxsuite-product header.hero .hero-cta { width: 100%; } .mxsuite-product section h2 { font-size: 1.5rem; } .mxsuite-product .module-card { padding: 1.25rem; } .mxsuite-product nav.toc ul { gap: 0.75rem; } .mxsuite-product .workflow-steps li { padding: 1rem 1rem 1rem 3.25rem; } .mxsuite-product .module-grid { grid-template-columns: 1fr; } .mxsuite-product .subproduct-grid { grid-template-columns: 1fr; } }