/* VoxaCue site — dark theme dérivé du panel. Tokens : bg page plus sombre que le panel (#0e0e10 vs #141414) pour que les mockups du panel se détachent. Display = Anton (la police des presets Outline/ Impact — le matériau du produit), corps = Montserrat (la police des captions). */ @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Anton'; src: url('fonts/Anton-Regular.ttf'); font-display: swap; } @font-face { font-family: 'Bangers'; src: url('fonts/Bangers-Regular.ttf'); font-display: swap; } @font-face { font-family: 'Bebas Neue'; src: url('fonts/BebasNeue-Regular.ttf'); font-display: swap; } :root { --bg: #0e0e10; --bg-panel: #141414; --bg-2: #1d1d1f; --bg-3: #27272a; --bg-4: #323236; --border: #3a3a3e; --text: #f2f2f3; --text-2: #a1a1a8; --text-3: #6b6b72; --accent: #00d2c4; --accent-2: #0fb9ad; --accent-dark: #06211f; /* Accents « monde des captions » — utilisés avec parcimonie */ --kw-green: #39ff14; --capsule: #7c3aed; --karaoke: #ffd93d; --danger: #ff5a5a; --radius: 12px; --radius-s: 7px; --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-display: 'Anton', Impact, sans-serif; --font-mono: ui-monospace, Consolas, 'Courier New', monospace; --maxw: 1120px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Bascule de langue : le HTML contient les deux langues, l'attribut data-lang sur choisit celle qui s'affiche. */ html[data-lang='en'] [lang='fr'] { display: none !important; } html[data-lang='fr'] [lang='en'] { display: none !important; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 60; background: rgba(14, 14, 16, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(58, 58, 62, 0.6); } .site-nav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; } .logo { font-weight: 800; font-size: 19px; letter-spacing: 0.2px; color: var(--text); } .logo b { color: var(--accent); font-weight: 800; } .logo:hover { text-decoration: none; } .nav-links { display: flex; gap: 22px; margin-left: 8px; } .nav-links a { color: var(--text-2); font-size: 14px; font-weight: 600; } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .lang-switch { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .lang-switch button { background: none; border: none; color: var(--text-3); font: 600 12px var(--font-body); padding: 5px 11px; cursor: pointer; } .lang-switch button.active { background: var(--bg-3); color: var(--text); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius-s); padding: 11px 20px; font: 700 14.5px var(--font-body); cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: var(--bg-3); color: var(--text); transition: background 0.15s, border-color 0.15s, transform 0.1s; } .btn:hover { background: var(--bg-4); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-dark); } .btn.primary:hover { background: var(--accent-2); } .btn.big { padding: 14px 26px; font-size: 16px; } .btn.small { padding: 8px 14px; font-size: 13px; } /* ---------- Hero ---------- */ .hero { padding: 78px 0 64px; overflow: hidden; } .hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font-body); letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); } /* Signature : le H1 est lui-même une caption animée — mots surlignés en séquence, comme le produit le fait aux sous-titres. */ .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.04; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 22px; } .hero h1 .cap-w { display: inline-block; white-space: nowrap; } .hero h1 .hl { position: relative; color: var(--kw-green); } .hero h1 .hl-cap { position: relative; z-index: 0; padding: 0 0.14em; border-radius: 0.18em; } .hero h1 .hl-cap::before { content: ''; position: absolute; inset: 0.04em -0.02em; z-index: -1; background: var(--capsule); border-radius: 0.6em; transform: rotate(-1.2deg); } /* Chaque mot du H1 pop à l'arrivée, en cascade — une seule fois au chargement */ .hero h1 .cap-w { animation: wpop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes wpop { from { opacity: 0; transform: scale(0.55) translateY(0.12em); } to { opacity: 1; transform: none; } } .hero .sub { color: var(--text-2); font-size: 18px; max-width: 54ch; margin-bottom: 30px; } .hero .sub b { color: var(--text); } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .hero-trust { display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-3); font-size: 13px; font-weight: 600; } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust svg { width: 15px; height: 15px; color: var(--accent); flex: none; } .hero-visual { position: relative; } .hero-visual .glow { position: absolute; inset: -12% -18%; background: radial-gradient(ellipse at 60% 40%, rgba(0, 210, 196, 0.14), transparent 65%); pointer-events: none; } /* ---------- Sections ---------- */ section.band { padding: 88px 0; } section.band.alt { background: #121214; border-top: 1px solid #1e1e21; border-bottom: 1px solid #1e1e21; } .sec-head { max-width: 720px; margin-bottom: 48px; } .sec-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: 0.5px; margin-bottom: 14px; } .sec-head h2 em { font-style: normal; color: var(--accent); } .sec-head p { color: var(--text-2); font-size: 17px; } /* ---------- Live demo ---------- */ .demo-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 44px; align-items: start; } .demo-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%), linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); border: 1px solid var(--border); } .demo-stage canvas { display: block; width: 100%; height: auto; } .demo-badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); color: #dfe6ea; font: 600 11px var(--font-body); letter-spacing: 0.4px; padding: 5px 10px; border-radius: 999px; pointer-events: none; } .demo-badge b { color: var(--accent); } .preset-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .preset-thumb { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-s); cursor: pointer; overflow: hidden; text-align: center; padding-bottom: 7px; transition: border-color 0.12s, transform 0.12s; } .preset-thumb:hover { border-color: var(--text-3); transform: translateY(-2px); } .preset-thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .preset-thumb canvas { width: 100%; display: block; background: #232327; } .preset-thumb .name { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-top: 6px; } .demo-note { margin-top: 18px; color: var(--text-3); font-size: 13px; } /* Texte du visiteur + mots forts + effet combiné (sous la grille de presets) */ .demo-custom { margin-top: 18px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 16px; } .demo-lbl { display: block; font: 700 11px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .demo-custom .demo-lbl + .demo-lbl { margin-top: 0; } #demo-text, #sync-text { width: 100%; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-s); color: var(--text); font: 600 15px var(--font-body); padding: 10px 12px; margin-bottom: 10px; } #demo-text:focus, #sync-text:focus { outline: none; border-color: var(--accent); } .sync-widget .demo-custom { margin-top: 10px; } .sync-widget #sync-text { margin-bottom: 0; } .demo-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .demo-word { background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font: 700 13px var(--font-body); padding: 4px 11px; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; } .demo-word:hover { border-color: var(--text-3); color: var(--text); } .demo-word.kw { color: var(--kw-green); border-color: rgba(57, 255, 20, 0.55); background: rgba(57, 255, 20, 0.08); } .demo-hint { color: var(--text-3); font-size: 12.5px; margin: 0 0 16px; } .demo-hint .kwt { color: var(--kw-green); font-weight: 800; } .demo-hint kbd { font-family: var(--font-mono); font-size: 11px; background: var(--bg-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } .demo-fx { display: flex; flex-wrap: wrap; gap: 6px; } .demo-fx button { background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font: 600 12.5px var(--font-body); padding: 5px 12px; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; } .demo-fx button:hover { border-color: var(--text-3); color: var(--text); } .demo-fx button.on { background: rgba(0, 210, 196, 0.1); border-color: var(--accent); color: var(--accent); } .demo-slider { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .demo-slider label { font: 700 11px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); flex: none; } .demo-slider input[type='range'] { flex: 1; accent-color: var(--accent); min-width: 0; } .demo-slider-val { font: 600 12px var(--font-body); color: var(--text-2); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } .demo-slider input[type='color'] { flex: none; width: 32px; height: 24px; padding: 2px; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-3); } /* Réglage sans effet pour l'emphase choisie : grisé, comme le panel les masque. Ciblé élément par élément — le picker couleur partage la rangée intensité (flash : pas d'intensité mais une couleur) et suit sa propre classe .off. */ .demo-slider.off label, .demo-slider.off input[type='range'], .demo-slider.off .demo-slider-val { opacity: 0.35; pointer-events: none; } .demo-slider input[type='color'].off { opacity: 0.35; pointer-events: none; } /* ---------- Features ---------- */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; } .feat .ic { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(0, 210, 196, 0.09); border: 1px solid rgba(0, 210, 196, 0.25); margin-bottom: 18px; } .feat .ic svg { width: 21px; height: 21px; color: var(--accent); } .feat h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; } .feat p { color: var(--text-2); font-size: 14.5px; } .feat p b { color: var(--text); font-weight: 700; } /* Widget « sync mot à mot » : la ligne de timing du plugin, interactive */ .feat.wide { grid-column: span 3; display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: center; } .sync-visual { background: #17171a; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 14px 14px 10px; } .sync-widget canvas { display: block; width: 100%; height: auto; } #sync-preview { border-radius: 6px; } #sync-strip { margin-top: 8px; border-radius: 6px; cursor: default; } .sync-try { color: var(--text-3); font-size: 12.5px; margin: 10px 2px 2px; } .sync-try b { color: var(--text-2); } /* ---------- Workflow / mockups annotés ---------- */ .flow-tabs { display: flex; gap: 8px; margin-bottom: 34px; flex-wrap: wrap; } .flow-tabs button { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 20px; font: 700 14px var(--font-body); cursor: pointer; } .flow-tabs button.active { background: rgba(0, 210, 196, 0.1); border-color: var(--accent); color: var(--accent); } .flow-pane { display: none; } .flow-pane.active { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 48px; align-items: start; } .flow-legend { counter-reset: zone; } .flow-legend h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .flow-legend > p { color: var(--text-2); margin-bottom: 22px; } .zone-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .zone-list li { display: flex; gap: 14px; align-items: baseline; } .zone-list li strong { display: block; font-size: 14.5px; } .zone-list li p { color: var(--text-2); font-size: 13.5px; margin: 0; } .zdot { counter-increment: zone; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-dark); font: 800 12px/22px var(--font-body); text-align: center; transform: translateY(3px); } .zdot::before { content: counter(zone); } /* ---------- Comparison ---------- */ .cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .cmp-table th, .cmp-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #232326; } .cmp-table th { font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); } .cmp-table th.vx, .cmp-table td.vx { background: rgba(0, 210, 196, 0.055); } .cmp-table th.vx { color: var(--accent); } .cmp-table td { color: var(--text-2); } .cmp-table td:first-child { color: var(--text); font-weight: 600; } .ok { color: var(--accent); font-weight: 700; } .no { color: var(--text-3); } /* ---------- Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 20px; justify-content: center; } .price { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; text-align: center; position: relative; } .price.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(0, 210, 196, 0.08); } .price .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-dark); font: 800 11px var(--font-body); letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .price h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-2); margin-bottom: 10px; } .price .amount { font-family: var(--font-display); font-size: 54px; line-height: 1; margin-bottom: 4px; } .price .amount small { font-size: 20px; color: var(--text-2); font-family: var(--font-body); font-weight: 700; } .price .amount .was { display: inline-block; font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 2px; margin-left: 8px; vertical-align: 12px; } .price .per { color: var(--text-3); font-size: 13px; margin-bottom: 20px; } .price ul { list-style: none; text-align: left; margin: 0 auto 24px; max-width: 260px; display: flex; flex-direction: column; gap: 9px; } .price li { color: var(--text-2); font-size: 14px; padding-left: 24px; position: relative; } .price li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .price-foot { text-align: center; color: var(--text-3); font-size: 13px; margin-top: 22px; } /* ---------- Coming soon (pré-lancement) ---------- */ .btn.soon { opacity: .55; cursor: default; pointer-events: none; } .soon-note { text-align: center; margin: 0 auto 28px; color: var(--accent); font-weight: 800; font-size: 14px; letter-spacing: .3px; } /* ---------- FAQ ---------- */ .faq { max-width: 780px; } .faq details { border-bottom: 1px solid #232326; } .faq summary { padding: 19px 34px 19px 2px; cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 22px; font-weight: 400; } .faq details[open] summary::after { content: '–'; } .faq .a { padding: 0 2px 20px; color: var(--text-2); font-size: 15px; max-width: 68ch; } .faq .a code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-3); padding: 1px 6px; border-radius: 4px; } /* ---------- CTA final ---------- */ .final-cta { text-align: center; padding: 100px 0; } .final-cta h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; margin-bottom: 16px; } .final-cta h2 em { font-style: normal; color: var(--kw-green); } .final-cta p { color: var(--text-2); font-size: 17px; margin-bottom: 30px; } /* ---------- Footer ---------- */ footer.site-foot { border-top: 1px solid #1e1e21; padding: 34px 0; } footer.site-foot .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } footer.site-foot .fnav { display: flex; gap: 20px; margin-left: auto; } footer.site-foot a, footer.site-foot span { color: var(--text-3); font-size: 13px; } footer.site-foot a:hover { color: var(--text-2); text-decoration: none; } /* ---------- Docs ---------- */ .docs-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; padding: 48px 0 96px; } .docs-side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; } .docs-side nav { display: flex; flex-direction: column; gap: 2px; } .docs-side .grp { font: 700 11px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); margin: 20px 0 8px; } .docs-side .grp:first-child { margin-top: 0; } .docs-side a { color: var(--text-2); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border-left: 2px solid transparent; } .docs-side a:hover { color: var(--text); background: var(--bg-2); text-decoration: none; } .docs-side a.active { color: var(--accent); border-left-color: var(--accent); background: rgba(0, 210, 196, 0.06); border-radius: 0 6px 6px 0; } .docs-main { min-width: 0; max-width: 760px; } .docs-main h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; margin-bottom: 12px; } .docs-main .lead { color: var(--text-2); font-size: 17px; margin-bottom: 40px; } .docs-main section { padding-top: 18px; margin-bottom: 54px; } .docs-main h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #232326; } .docs-main h2 .step { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; margin-right: 10px; background: rgba(0, 210, 196, 0.1); border: 1px solid rgba(0, 210, 196, 0.3); color: var(--accent); font-size: 14px; align-items: center; justify-content: center; transform: translateY(-2px); } .docs-main h3 { font-size: 17px; font-weight: 800; margin: 26px 0 10px; } .docs-main p, .docs-main li { color: var(--text-2); font-size: 15px; } .docs-main p { margin-bottom: 14px; } .docs-main b, .docs-main strong { color: var(--text); } .docs-main ul, .docs-main ol { padding-left: 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; } .docs-main code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-3); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; color: var(--text); } .docs-main pre { background: #131316; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 14px 16px; overflow-x: auto; margin-bottom: 16px; } .docs-main pre code { background: none; border: none; padding: 0; font-size: 13.5px; color: #d7e0e6; } .docs-main table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; } .docs-main th, .docs-main td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #232326; vertical-align: top; } .docs-main th { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; } .docs-main td { color: var(--text-2); } .docs-main td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; } .docs-main kbd { font-family: var(--font-mono); font-size: 12px; background: var(--bg-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; } .callout { display: flex; gap: 12px; background: rgba(0, 210, 196, 0.05); border: 1px solid rgba(0, 210, 196, 0.22); border-radius: var(--radius-s); padding: 14px 16px; margin-bottom: 16px; font-size: 14.5px; color: var(--text-2); } .callout::before { content: '💡'; flex: none; } .callout.warn { background: rgba(255, 176, 32, 0.05); border-color: rgba(255, 176, 32, 0.3); } .callout.warn::before { content: '⚠️'; } .docs-figure { margin: 22px 0 26px; } .docs-figure figcaption { color: var(--text-3); font-size: 13px; margin-top: 10px; text-align: center; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } .hero-visual { max-width: 420px; } .demo-grid { grid-template-columns: 1fr; } .demo-stage { max-width: 360px; } .feat-grid { grid-template-columns: 1fr 1fr; } .feat.wide { grid-column: span 2; grid-template-columns: 1fr; } .flow-pane.active { grid-template-columns: 1fr; } .docs-layout { grid-template-columns: 1fr; } .docs-side { position: static; max-height: none; } } @media (max-width: 640px) { .nav-links { display: none; } .feat-grid { grid-template-columns: 1fr; } .feat.wide { grid-column: span 1; } .price-grid { grid-template-columns: 1fr; } section.band { padding: 60px 0; } .cmp-scroll { overflow-x: auto; } }