/* ============================================================ CANVENA — Premium Design Layer 2026 ============================================================ - Editorial Premium Font (Fraunces) für Headlines - Animation Utilities (Scroll-Reveal, Magnetic, Counter) - Glassmorphism / Mesh-Gradient / Logo-Marquee Utilities - Premium Tier-Cards (5er Layout) + Wachs-Siegel Mandate ============================================================ */ /* --- Editorial Font: Fraunces (Google Fonts, kostenlos) --- */ /* Wird via preconnect+link in jeder Seite eingebunden, damit nicht erst hier nachgeladen wird. Fallback hier definiert. */ :root { --font-editorial: 'Fraunces', 'Playfair Display', Georgia, serif; --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --grad-aurora: radial-gradient(1200px 600px at 10% -10%, rgba(212, 175, 55, 0.18) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(91, 168, 181, 0.12) 0%, transparent 55%), radial-gradient(700px 400px at 50% 110%, rgba(212, 175, 55, 0.08) 0%, transparent 60%); --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); } /* --- Editorial Headlines --- */ .headline-editorial, .tier-hero h1, .section-hero h1.editorial { font-family: var(--font-editorial); font-weight: 500; font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144; letter-spacing: -0.02em; line-height: 1.05; } /* Tabular Nums für Preise (keine zitternden Zahlen) */ .num, .price-num, .stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Custom Text-Selection in Gold */ ::selection { background: rgba(212, 175, 55, 0.35); color: #F5F0E8; } ::-moz-selection { background: rgba(212, 175, 55, 0.35); color: #F5F0E8; } /* ============================================================ Animation Utilities ============================================================ */ /* Scroll-Reveal: erst transparent + nach unten verschoben, wird via GSAP/IntersectionObserver eingeblendet */ .cv-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); will-change: opacity, transform; } .cv-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger-Reveal für Kindelemente (z.B. Tier-Karten in Row) */ .cv-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); } .cv-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; } .cv-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; } .cv-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; } .cv-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; } .cv-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; } .cv-stagger.is-visible > * { opacity: 1; transform: translateY(0); } /* Magnetic Button (Cursor-Follow via JS, hier nur Hover-Polish) */ .cv-magnetic { position: relative; transition: transform 0.25s var(--ease-premium); will-change: transform; } .cv-magnetic::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, rgba(212, 175, 55, 0.0) 0%, rgba(212, 175, 55, 0.35) 50%, rgba(212, 175, 55, 0.0) 100%); opacity: 0; transition: opacity 0.4s var(--ease-premium); z-index: -1; filter: blur(10px); } .cv-magnetic:hover::after { opacity: 1; } /* Scroll-Progress-Bar (oben am Viewport, gold) */ .cv-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #D4AF37 0%, #E8C547 100%); z-index: 2147482000; pointer-events: none; transition: width 0.05s linear; box-shadow: 0 0 12px rgba(212, 175, 55, 0.6); } /* ============================================================ Mesh-Gradient Hero (für 5 Tier-Pages — leicht & schnell) ============================================================ */ .cv-mesh-hero { position: relative; overflow: hidden; isolation: isolate; } .cv-mesh-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad-aurora); animation: cv-mesh-drift 22s ease-in-out infinite alternate; } @keyframes cv-mesh-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-4%, 2%, 0) scale(1.06); } } /* 3D-Hero Canvas (für index.html + preise.html) */ .cv-hero-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .cv-hero-3d-canvas + .cv-hero-content { position: relative; z-index: 1; } /* ============================================================ Logo-Marquee (Endless Scroll) ============================================================ */ .cv-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .cv-marquee__track { display: flex; gap: 60px; width: max-content; animation: cv-marquee-scroll 42s linear infinite; } .cv-marquee__item { flex: 0 0 auto; font-family: var(--font-editorial); font-size: 1.4rem; letter-spacing: 0.04em; color: rgba(245, 240, 232, 0.55); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; } .cv-marquee__item::before { content: '✦'; color: rgba(212, 175, 55, 0.6); font-size: 0.9rem; } @keyframes cv-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .cv-marquee:hover .cv-marquee__track { animation-play-state: paused; } /* ============================================================ Premium Tier-Cards (5er-Layout) ============================================================ */ .tier-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 56px 0 32px; align-items: stretch; } /* Mid-Range Desktop & Tablet (1280px down to 900px) → Premium horizontal scroll-snap carousel. Alle 5 Cards bleiben sichtbar/swipebar statt zu kollabieren oder abzuschneiden. */ @media (max-width: 1279px) and (min-width: 900px) { .tier-grid-5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; gap: 18px; margin-inline: -24px; padding: 8px 24px 28px; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.35) transparent; -webkit-overflow-scrolling: touch; } .tier-grid-5 > .tier-card { flex: 0 0 calc(33.333% - 12px); min-width: 280px; scroll-snap-align: start; } .tier-grid-5::-webkit-scrollbar { height: 6px; } .tier-grid-5::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 3px; } .tier-grid-5::-webkit-scrollbar-track { background: rgba(245,240,232,0.04); } } @media (max-width: 899px) and (min-width: 600px) { .tier-grid-5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: -20px; padding: 8px 20px 24px; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.35) transparent; -webkit-overflow-scrolling: touch; } .tier-grid-5 > .tier-card { flex: 0 0 85%; max-width: 320px; scroll-snap-align: center; } } @media (max-width: 599px) { .tier-grid-5 { grid-template-columns: 1fr; gap: 16px; } } /* Premium Hero — CSS-only, ersetzt Three.js Particle-Network. Mesh-Gradient + Gold-Spotlight + Aurora-Sheen. Performant, kein WebGL. */ .cv-hero-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .cv-hero-mesh::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(ellipse 60% 50% at 78% 22%, rgba(212,175,55,0.18) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 18% 68%, rgba(91,168,181,0.14) 0%, transparent 60%), radial-gradient(ellipse 80% 70% at 50% 100%, rgba(26,39,68,0.85) 0%, transparent 70%); animation: cv-mesh-drift 28s ease-in-out infinite alternate; filter: blur(2px); } .cv-hero-mesh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,22,42,0) 0%, rgba(13,22,42,0.35) 70%, rgba(13,22,42,0.85) 100%), repeating-linear-gradient(135deg, transparent 0 22px, rgba(245,240,232,0.012) 22px 23px); mix-blend-mode: normal; } @keyframes cv-mesh-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } 100% { transform: translate3d(2%, -1%, 0) scale(1.02); } } /* Floating Gold-Dots — drei diskrete Punkte, atmend, kein Particle-Network */ .cv-hero-mesh .cv-orb { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #D4AF37; box-shadow: 0 0 12px 2px rgba(212,175,55,0.6), 0 0 32px 6px rgba(212,175,55,0.15); opacity: 0; animation: cv-orb-breath 6s ease-in-out infinite; } .cv-hero-mesh .cv-orb--1 { top: 28%; left: 22%; animation-delay: 0s; } .cv-hero-mesh .cv-orb--2 { top: 62%; left: 78%; animation-delay: 1.8s; width: 4px; height: 4px; } .cv-hero-mesh .cv-orb--3 { top: 18%; left: 68%; animation-delay: 3.4s; width: 8px; height: 8px; } @keyframes cv-orb-breath { 0%, 100% { opacity: 0; transform: translateY(0); } 35%, 65% { opacity: 1; transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .cv-hero-mesh::before, .cv-hero-mesh .cv-orb { animation: none; } .cv-hero-mesh .cv-orb { opacity: 0.5; } } .tier-card { position: relative; background: linear-gradient(180deg, rgba(38, 58, 92, 0.6) 0%, rgba(31, 48, 80, 0.45) 100%); border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 18px; padding: 32px 22px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.36s var(--ease-premium), border-color 0.36s var(--ease-premium), box-shadow 0.36s var(--ease-premium); backdrop-filter: blur(8px); min-width: 0; /* No overflow:hidden — badges at top:-12px need to be visible. Containment is enforced via min-width:0 + word-break on price-num. */ contain: layout; } .tier-card:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, 0.32); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.06) inset; } .tier-card__name { font-family: var(--font-editorial); font-size: 1.45rem; font-weight: 500; color: #F5F0E8; letter-spacing: -0.01em; } .tier-card__tagline { font-size: 0.85rem; color: rgba(245, 240, 232, 0.6); line-height: 1.5; min-height: 2.6em; } .tier-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 6px; font-family: var(--font-editorial); max-width: 100%; } .tier-card__price-num { font-size: clamp(1.55rem, 1.05rem + 1.4vw, 2.3rem); font-weight: 500; color: #D4AF37; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; word-break: keep-all; hyphens: none; max-width: 100%; } .tier-card__title, .tier-card__name, .price-nowrap { white-space: nowrap; word-break: keep-all; hyphens: none; } .tier-card__price-unit { font-size: 0.82rem; color: rgba(245, 240, 232, 0.55); font-family: 'Inter', sans-serif; white-space: nowrap; } .tier-card__price-meta { font-size: 0.75rem; color: rgba(245, 240, 232, 0.5); margin-top: -4px; } .tier-card__features { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .tier-card__features li { position: relative; padding-left: 22px; font-size: 0.86rem; line-height: 1.55; color: rgba(245, 240, 232, 0.78); } .tier-card__features li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, #E8C547 0%, #D4AF37 60%, #B8941F 100%); border-radius: 50%; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12); } .tier-card__cta { margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; background: transparent; color: #F5F0E8; border: 1px solid rgba(212, 175, 55, 0.35); text-decoration: none; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em; transition: background 0.25s var(--ease-premium), transform 0.25s var(--ease-premium); } .tier-card__cta:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-1px); } /* Most Popular: Engine */ .tier-card--featured { border-color: rgba(212, 175, 55, 0.45); background: linear-gradient(180deg, rgba(212, 175, 55, 0.06) 0%, rgba(38, 58, 92, 0.6) 60%); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(212, 175, 55, 0.16); } .tier-card--featured .tier-card__cta { background: linear-gradient(135deg, #D4AF37 0%, #E8C547 100%); color: #1A2744; border-color: transparent; } .tier-card--featured::before { content: attr(data-badge); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #D4AF37 0%, #E8C547 100%); color: #1A2744; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; white-space: nowrap; box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4); } /* Sanftes Atmen für Featured */ .tier-card--featured { animation: cv-tier-breath 5s ease-in-out infinite; } @keyframes cv-tier-breath { 0%, 100% { box-shadow: 0 24px 60px rgba(212, 175, 55, 0.16); } 50% { box-shadow: 0 24px 60px rgba(212, 175, 55, 0.28); } } /* Mandate: dunkel, edel, Wachs-Siegel statt Preis-CTA */ .tier-card--mandate { background: linear-gradient(180deg, rgba(26, 39, 68, 0.85) 0%, rgba(15, 22, 38, 0.75) 100%); border-color: rgba(212, 175, 55, 0.22); } .tier-card--mandate::before { content: attr(data-badge); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #1A2744; color: rgba(212, 175, 55, 0.95); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; white-space: nowrap; border: 1px solid rgba(212, 175, 55, 0.45); } .tier-card--mandate .tier-card__price-num { color: rgba(212, 175, 55, 0.95); } /* ============================================================ Animated Bar Chart (für Marktvergleich) ============================================================ */ .cv-bar-row { display: grid; grid-template-columns: 200px 1fr 100px; gap: 14px; align-items: center; padding: 10px 0; } .cv-bar-label { font-size: 0.88rem; color: rgba(245, 240, 232, 0.85); } .cv-bar-track { position: relative; height: 10px; background: rgba(245, 240, 232, 0.06); border-radius: 6px; overflow: hidden; } .cv-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, rgba(212, 175, 55, 0.4) 0%, #D4AF37 100%); border-radius: 6px; transition: width 1.4s var(--ease-premium); } .cv-bar-fill--canvena { background: linear-gradient(90deg, #5BA8B5 0%, #D4AF37 100%); } .cv-bar-value { font-family: var(--font-editorial); font-variant-numeric: tabular-nums; font-size: 0.92rem; color: rgba(245, 240, 232, 0.8); text-align: right; } .cv-bars.is-visible .cv-bar-fill { width: var(--bar-pct, 50%); } @media (max-width: 640px) { .cv-bar-row { grid-template-columns: 1fr; gap: 4px; } .cv-bar-value { text-align: left; } } /* ============================================================ Stats Row (animierte Counter) ============================================================ */ .cv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 36px 0; } @media (max-width: 720px) { .cv-stats { grid-template-columns: repeat(2, 1fr); } } .cv-stat { text-align: center; } .cv-stat__num { font-family: var(--font-editorial); font-size: 2.6rem; font-weight: 500; color: #D4AF37; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .cv-stat__label { font-size: 0.78rem; color: rgba(245, 240, 232, 0.6); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; } /* ============================================================ ROI-Kalkulator-Widget ============================================================ */ .cv-roi { background: linear-gradient(180deg, rgba(38, 58, 92, 0.5) 0%, rgba(31, 48, 80, 0.35) 100%); border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 18px; padding: 32px; margin: 48px 0; } .cv-roi__grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: center; } @media (max-width: 820px) { .cv-roi__grid { grid-template-columns: 1fr; } } .cv-roi__slider-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .cv-roi__slider-row label { font-size: 0.82rem; color: rgba(245, 240, 232, 0.7); display: flex; justify-content: space-between; } .cv-roi__slider-row label strong { font-family: var(--font-editorial); font-variant-numeric: tabular-nums; color: #D4AF37; font-size: 1.1rem; } .cv-roi__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(245, 240, 232, 0.1); border-radius: 2px; outline: none; } .cv-roi__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: linear-gradient(135deg, #D4AF37 0%, #E8C547 100%); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5); transition: transform 0.15s ease; } .cv-roi__slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .cv-roi__slider::-moz-range-thumb { width: 20px; height: 20px; background: linear-gradient(135deg, #D4AF37 0%, #E8C547 100%); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5); } .cv-roi__results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .cv-roi__result-card { background: rgba(245, 240, 232, 0.03); border: 1px solid rgba(245, 240, 232, 0.06); border-radius: 10px; padding: 14px; } .cv-roi__result-label { font-size: 0.72rem; color: rgba(245, 240, 232, 0.55); text-transform: uppercase; letter-spacing: 0.08em; } .cv-roi__result-value { font-family: var(--font-editorial); font-size: 1.4rem; color: #F5F0E8; font-variant-numeric: tabular-nums; margin-top: 4px; } .cv-roi__result-value--highlight { color: #D4AF37; } .cv-roi__chart-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 320px; margin: 0 auto; } @media (prefers-reduced-motion: reduce) { .cv-reveal, .cv-stagger > * { transition: none; opacity: 1; transform: none; } .tier-card--featured, .cv-mesh-hero::before { animation: none; } .cv-marquee__track { animation: none; } } /* ============================================================ GEO / LLM-Citation Blocks (W5.3) ============================================================ */ .cv-qa-block { background: rgba(212,175,55,0.04); border-left: 3px solid #D4AF37; padding: 24px 28px; border-radius: 0 12px 12px 0; max-width: 720px; margin: 32px auto; } .cv-qa-block h3 { font-family: var(--font-editorial); font-size: 1.4rem; color: #F5F0E8; margin: 0 0 12px; } .cv-qa-block p { color: rgba(245,240,232,0.85); line-height: 1.7; margin: 0 0 12px; } .cv-qa-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .cv-qa-block li { font-size: 0.92rem; color: rgba(245,240,232,0.75); padding-left: 18px; position: relative; } .cv-qa-block li::before { content: '→'; position: absolute; left: 0; color: #D4AF37; } .cv-compare-snippet { margin: 48px auto; max-width: 980px; overflow-x: auto; } .cv-compare-snippet table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .cv-compare-snippet th, .cv-compare-snippet td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(245,240,232,0.08); } .cv-compare-snippet th { font-family: var(--font-editorial); font-size: 0.95rem; color: #D4AF37; font-weight: 500; } .cv-compare-snippet caption { text-align: left; padding: 0 0 12px; font-size: 0.78rem; color: rgba(245,240,232,0.55); } .cv-compare-snippet td { color: rgba(245,240,232,0.8); font-variant-numeric: tabular-nums; } .cv-credentials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 32px 0; margin: 32px 0; border-top: 1px solid rgba(212,175,55,0.12); border-bottom: 1px solid rgba(212,175,55,0.12); } @media (max-width: 980px) { .cv-credentials { grid-template-columns: repeat(2, 1fr); } } .cv-credentials__item { font-size: 0.82rem; color: rgba(245,240,232,0.75); line-height: 1.5; } .cv-credentials__item strong { display: block; color: #D4AF37; font-family: var(--font-editorial); font-size: 1.05rem; margin-bottom: 4px; font-weight: 500; } .cv-credentials__item svg { width: 18px; height: 18px; color: #D4AF37; margin-bottom: 6px; opacity: 0.85; } @media (max-width: 560px) { .cv-credentials { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; } } /* ============================================================ RESPONSIVE AUDIT FIXES (W6 — global) ============================================================ */ /* --- Defensive base --- */ html, body { overflow-x: hidden; max-width: 100%; } img, video, svg, picture { max-width: 100%; height: auto; } table { max-width: 100%; } /* --- Container padding-inline scaling --- */ @media (max-width: 720px) { .container { padding-left: 20px !important; padding-right: 20px !important; } .nav__inner { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 420px) { .container { padding-left: 16px !important; padding-right: 16px !important; } .nav__inner { padding-left: 16px !important; padding-right: 16px !important; } } /* --- index.html Stats-Bar — 5 stats responsive --- */ @media (max-width: 1100px) { .stats-bar { gap: 32px !important; flex-wrap: wrap !important; } .stats-bar .stat-item { flex: 1 1 30%; min-width: 140px; } } @media (max-width: 720px) { .stats-bar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-direction: row !important; gap: 24px 16px !important; padding: 32px 0 !important; align-items: stretch !important; } .stats-bar .stat-item { min-width: 0; } .stats-bar .stat-number { font-size: 1.75rem !important; } } @media (max-width: 420px) { .stats-bar { grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important; } .stats-bar .stat-number { font-size: 1.45rem !important; } .stats-bar .stat-label { font-size: 0.625rem; letter-spacing: 0.08em; } } /* --- index.html Hero on mobile --- */ @media (max-width: 720px) { .hero { min-height: auto; padding-top: 100px; padding-bottom: 56px; } .hero__content { max-width: 100%; } .hero p { font-size: 1rem; } .hero__trust { margin-top: 40px; padding-top: 24px; } .hero__bg-glow { width: 420px; height: 420px; top: -150px; right: -150px; } .btn-group { flex-direction: column; align-items: stretch; } .btn-group .btn { width: 100%; justify-content: center; } } /* --- Hero image on small screens — keep visible, hide on tiny --- */ @media (max-width: 600px) { .hero__bg-image { opacity: 0.5; } } /* --- Demo result row — collapse on mobile --- */ @media (max-width: 600px) { .demo-result-row { grid-template-columns: 1fr 1fr !important; gap: 6px 12px; font-size: 0.78rem; } .demo-result-label { font-size: 0.625rem; } .demo-filter-row { flex-wrap: wrap; gap: 8px; } .demo-filter { font-size: 0.75rem; padding: 8px 14px; } } /* --- Page-hero (inner pages) — ensure nav clearance + clamp h1 --- */ .page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); } @media (max-width: 720px) { .page-hero { padding: 110px 0 56px !important; } .page-hero p { font-size: 1rem; } } /* --- Tier-hero (engine/pulse/atlas/compass/mandate) — nav clearance --- */ @media (max-width: 720px) { .tier-hero { padding-top: 110px !important; padding-bottom: 48px !important; } .mandate-hero { padding-top: 120px !important; padding-bottom: 56px !important; } .tier-hero__pricebox { padding: 22px 24px !important; width: 100%; box-sizing: border-box; } .tier-hero__cta, .btn-mandate { width: 100%; box-sizing: border-box; justify-content: center; } } /* --- Generic h1/h2 mobile typography safety --- */ @media (max-width: 480px) { h1 { font-size: clamp(1.85rem, 8vw, 2.4rem) !important; } h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; } } /* --- Footer responsive --- */ @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr !important; gap: 28px; } .footer__bottom { flex-direction: column; gap: 14px; text-align: center; } } /* --- Tables — universal wrap --- */ .data-table, .vgl-table { display: block; max-width: 100%; } @media (max-width: 720px) { .data-table, .vgl-table { font-size: 0.82rem; } .data-table th, .data-table td { padding: 10px 8px !important; } } /* --- Cookie consent — never overlap content --- */ @media (max-width: 720px) { body { padding-bottom: 0; } body:has(#canvena-consent.cc-show) { padding-bottom: 220px; } #canvena-consent { left: 12px; right: 12px; bottom: 12px; } } @supports not (selector(:has(*))) { @media (max-width: 720px) { .footer { padding-bottom: clamp(140px, 28vh, 240px); } } } /* --- Preise — addons-grid intermediate breakpoint --- */ @media (max-width: 1100px) and (min-width: 781px) { .addons-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) and (min-width: 601px) { .bundles-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* --- Capital-Intelligence DB-Grid icon hero (4 col tablet) --- */ @media (max-width: 980px) and (min-width: 769px) { .db-grid { grid-template-columns: repeat(4, 1fr) !important; } } /* --- Investor-grid intermediate --- */ @media (max-width: 1100px) and (min-width: 901px) { .investor-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* --- Mandate — Andrew portrait fluid --- */ @media (max-width: 880px) { .mandate-andrew__portrait { width: 100% !important; max-width: 320px; height: auto !important; aspect-ratio: 340 / 420; margin: 0 auto; } } @media (max-width: 720px) { .mandate-andrew { padding: 64px 0; } .mandate-section { padding: 64px 0 !important; } .mandate-setup { padding: 28px 22px !important; } .mandate-final-cta { padding: 80px 0 100px !important; } } /* --- Tier-grid (3-col mandate/atlas) intermediate --- */ @media (max-width: 900px) and (min-width: 641px) { .mandate-tier-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* --- Blog article padding --- */ @media (max-width: 720px) { .blog-article { padding: 0 20px !important; } .blog-article__content { font-size: 0.98rem; line-height: 1.75; } .blog-article__content h2 { font-size: 1.3rem; } .blog-article__content h3 { font-size: 1.1rem; } } /* --- Forms full-width on mobile --- */ @media (max-width: 720px) { .form-input, .form-select, .form-textarea, .btn { box-sizing: border-box; } .btn-group .btn { width: 100%; } } /* --- Flex/grid children safety --- */ .cv-stats, .stats-bar, .btn-group, .hero__trust-logos, .nav__links { min-width: 0; } .cv-stat, .stat-item, .btn { min-width: 0; } /* --- Lang-switcher hide on mobile (in hamburger) --- */ @media (max-width: 768px) { .nav__links.active .lang-switcher__dropdown { position: static; box-shadow: none; background: transparent; } .nav__links.active { overflow-y: auto; } } /* --- Section padding compression on very small screens --- */ @media (max-width: 480px) { section { padding-top: clamp(40px, 10vw, 60px); padding-bottom: clamp(40px, 10vw, 60px); } } /* --- ROI section grids fluid --- */ @media (max-width: 820px) { .cv-roi-grid, .roi-grid { grid-template-columns: 1fr !important; } } /* --- FAQ section padding --- */ @media (max-width: 720px) { .faq-section { padding: 56px 20px !important; } .faq-section details { padding: 16px 18px; } } /* --- Final CTA mobile --- */ @media (max-width: 720px) { .final-cta { padding: 64px 0 96px !important; } .final-cta .btn-mega { width: 100%; box-sizing: border-box; } } /* ============================================================ WOW Layer — Bloomberg-meets-Editorial 2026 ============================================================ */ /* ---- 1. Live Funding Ticker (top of hero) ---- */ .cv-live-ticker { position: relative; width: 100%; background: linear-gradient(90deg, rgba(13,22,42,0.95) 0%, rgba(26,39,68,0.9) 50%, rgba(13,22,42,0.95) 100%); border-top: 1px solid rgba(212,175,55,0.18); border-bottom: 1px solid rgba(212,175,55,0.18); overflow: hidden; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.04em; z-index: 5; } .cv-live-ticker::before { content: "LIVE · FUNDING SIGNALS"; position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; padding: 0 16px 0 18px; background: linear-gradient(90deg, #D4AF37 0%, #B8941F 100%); color: #0D162A; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; z-index: 2; box-shadow: 8px 0 18px rgba(13,22,42,0.6); } .cv-live-ticker::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, transparent 0%, rgba(13,22,42,1) 100%); z-index: 2; pointer-events: none; } .cv-live-ticker__track { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; padding: 11px 0 11px 200px; animation: cv-ticker-slide 60s linear infinite; will-change: transform; } @keyframes cv-ticker-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .cv-tick-item { display: inline-flex; align-items: center; gap: 10px; padding-right: 38px; color: rgba(245,240,232,0.85); } .cv-tick-dot { width: 6px; height: 6px; border-radius: 50%; background: #5BA8B5; box-shadow: 0 0 6px rgba(91,168,181,0.8); animation: cv-tick-blink 1.6s ease-in-out infinite; } @keyframes cv-tick-blink { 0%,100% { opacity:1 } 50% { opacity:0.3 } } .cv-tick-tag { color: #D4AF37; font-weight: 600; text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.14em; padding: 2px 7px; border: 1px solid rgba(212,175,55,0.32); border-radius: 3px; } .cv-tick-amount { color: #F5F0E8; font-weight: 600; font-size: 0.82rem; font-variant-numeric: tabular-nums; } .cv-tick-sector { color: rgba(245,240,232,0.75); } .cv-tick-geo { color: rgba(245,240,232,0.55); } .cv-tick-sep { color: rgba(245,240,232,0.32); font-style: italic; font-size: 0.68rem; } /* ---- 2. Cursor Spotlight ---- */ .cv-cursor-spot { position: relative; isolation: isolate; --cv-mx: 50%; --cv-my: 30%; } .cv-cursor-spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 480px at var(--cv-mx) var(--cv-my), rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.08) 25%, transparent 60%); mix-blend-mode: screen; z-index: 3; transition: opacity 0.4s ease; } @media (hover: none) { .cv-cursor-spot::after { display: none; } } /* ---- 3. Cinematic Hero ---- */ .cv-hero-cinematic { position: relative; min-height: clamp(620px, 90vh, 960px); overflow: hidden; isolation: isolate; background: #0D162A; } .cv-hero-cinematic .cv-parallax-bg { position: absolute; inset: -10% 0 -10% 0; z-index: 0; background-size: cover; background-position: center top; will-change: transform; filter: grayscale(35%) brightness(0.55) contrast(1.08); } .cv-hero-cinematic .cv-hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,22,42,0.45) 0%, rgba(13,22,42,0.0) 30%, rgba(13,22,42,0.85) 100%), linear-gradient(90deg, rgba(13,22,42,0.85) 0%, rgba(13,22,42,0.3) 35%, rgba(13,22,42,0.0) 60%, rgba(13,22,42,0.4) 100%), radial-gradient(ellipse 65% 50% at 78% 28%, rgba(212,175,55,0.14) 0%, transparent 60%); pointer-events: none; } .cv-hero-cinematic .cv-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } .cv-hero-cinematic .cv-hero-content { position: relative; z-index: 4; min-height: clamp(620px, 90vh, 960px); display: flex; flex-direction: column; justify-content: center; padding: 100px 0 80px; } .cv-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #D4AF37; margin-bottom: 32px; opacity: 0; animation: cv-fade-up 0.9s 0.1s cubic-bezier(0.16,1,0.3,1) forwards; } .cv-hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: #D4AF37; } .cv-hero-cinematic h1 { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(2.6rem, 7.5vw, 6.4rem); line-height: 0.96; letter-spacing: -0.025em; color: #F5F0E8; max-width: 16ch; margin: 0 0 28px; } .cv-hero-cinematic h1 em { font-style: italic; color: #D4AF37; font-weight: 500; } .cv-hero-cinematic .cv-hero-lede { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.55; color: rgba(245,240,232,0.78); max-width: 540px; margin: 0 0 44px; opacity: 0; animation: cv-fade-up 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) forwards; } .cv-hero-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; opacity: 0; animation: cv-fade-up 0.9s 0.75s cubic-bezier(0.16,1,0.3,1) forwards; } .cv-hero-cta-row .cv-btn-primary { display: inline-flex; align-items: center; gap: 12px; padding: 18px 32px; background: linear-gradient(135deg, #D4AF37 0%, #E8C547 100%); color: #0D162A; text-decoration: none; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; border-radius: 8px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; box-shadow: 0 12px 32px rgba(212,175,55,0.28), 0 0 0 1px rgba(212,175,55,0.18) inset; } .cv-hero-cta-row .cv-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(212,175,55,0.45), 0 0 0 1px rgba(212,175,55,0.32) inset; } .cv-hero-cta-row .cv-btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; color: #F5F0E8; text-decoration: none; font-weight: 500; font-size: 0.92rem; border: 1px solid rgba(245,240,232,0.18); border-radius: 8px; transition: border-color 0.3s, background 0.3s; } .cv-hero-cta-row .cv-btn-ghost:hover { border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.06); } /* ---- Hero Side-Card (deal-of-the-week / floating credentials) ---- */ .cv-hero-sidecard { position: absolute; right: 6%; bottom: 12%; z-index: 4; width: clamp(280px, 26vw, 360px); padding: 22px 24px; background: rgba(13,22,42,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(212,175,55,0.22); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,0.45); opacity: 0; animation: cv-fade-up 0.9s 1s cubic-bezier(0.16,1,0.3,1) forwards; } .cv-hero-sidecard__label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #D4AF37; margin-bottom: 10px; } .cv-hero-sidecard__quote { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-style: italic; font-size: 1.04rem; line-height: 1.45; color: #F5F0E8; margin-bottom: 14px; } .cv-hero-sidecard__author { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: rgba(245,240,232,0.65); } .cv-hero-sidecard__author strong { color: #F5F0E8; font-weight: 500; } @media (max-width: 1100px) { .cv-hero-sidecard { position: static; margin: 32px auto 0; width: 100%; max-width: 480px; } } @keyframes cv-fade-up { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* ---- 4. Word-by-word reveal ---- */ .cv-words .cv-word { display: inline-block; opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--cv-word-delay, 0ms); } .cv-words.cv-words-go .cv-word { opacity: 1; transform: translate3d(0,0,0); } /* ---- 5. Dramatic Counter Pulse ---- */ .cv-counter-active { text-shadow: 0 0 32px rgba(212,175,55,0.4), 0 0 8px rgba(212,175,55,0.2); animation: cv-counter-pulse 2.8s ease-out; } @keyframes cv-counter-pulse { 0% { transform: scale(0.95); filter: brightness(1.4); } 20% { transform: scale(1.04); filter: brightness(1.6); } 100% { transform: scale(1); filter: brightness(1); } } /* ---- 6. Stat Card Premium Treatment ---- */ .cv-stat-premium { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 28px 22px; position: relative; border-left: 1px solid rgba(212,175,55,0.14); transition: border-color 0.5s; } .cv-stat-premium:first-child { border-left: 0; } .cv-stat-premium:hover { border-left-color: rgba(212,175,55,0.45); } .cv-stat-premium__num { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 500; line-height: 1; color: #D4AF37; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .cv-stat-premium__label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,240,232,0.55); margin-top: 4px; } .cv-stat-premium__sub { font-size: 0.78rem; color: rgba(245,240,232,0.42); margin-top: 2px; } /* Premium stats row */ .cv-stats-row-premium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 56px 0; border-top: 1px solid rgba(212,175,55,0.1); border-bottom: 1px solid rgba(212,175,55,0.1); } @media (max-width: 900px) { .cv-stats-row-premium { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 36px 0; } .cv-stat-premium:nth-child(3) { border-left: 0; } } @media (max-width: 480px) { .cv-stats-row-premium { grid-template-columns: 1fr; } .cv-stat-premium { border-left: 0; border-top: 1px solid rgba(212,175,55,0.1); padding: 18px 0 16px; } .cv-stat-premium:first-child { border-top: 0; } } /* ============================================================ Apple-Style Override — Restraint, Whitespace, Centered Drama ============================================================ */ /* Hero: pure dark, centered, 100vh, image very subtle */ .cv-hero-cinematic { min-height: 100vh; text-align: center; } .cv-hero-cinematic .cv-parallax-bg { filter: grayscale(60%) brightness(0.32) contrast(1.15); opacity: 0.55; } .cv-hero-cinematic .cv-hero-veil { background: linear-gradient(180deg, rgba(13,22,42,0.4) 0%, rgba(13,22,42,0.0) 30%, rgba(13,22,42,0.95) 100%), radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(13,22,42,0.5) 80%); } .cv-hero-cinematic .cv-hero-content { align-items: center; text-align: center; min-height: 100vh; padding: 120px 0 160px; } .cv-hero-cinematic h1 { margin: 0 auto 32px; max-width: 14ch; font-size: clamp(2.8rem, 8.5vw, 7.5rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.035em; } .cv-hero-cinematic .cv-hero-eyebrow { margin-bottom: 40px; } .cv-hero-cinematic .cv-hero-eyebrow::before { display: none; } .cv-hero-cinematic .cv-hero-lede { margin: 0 auto 56px; text-align: center; font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5; color: rgba(245,240,232,0.72); max-width: 620px; } .cv-hero-cinematic .cv-hero-cta-row { justify-content: center; gap: 28px; } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-primary { background: #F5F0E8; color: #0D162A; box-shadow: 0 8px 24px rgba(0,0,0,0.35); border-radius: 980px; padding: 18px 36px; font-weight: 500; letter-spacing: 0; } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-primary:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.45); } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-ghost { border: 0; color: #D4AF37; padding: 18px 8px; background: transparent; } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-ghost:hover { color: #E8C547; background: transparent; border: 0; transform: translateX(4px); } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-ghost::after { content: " →"; display: inline-block; transition: transform 0.3s ease; } .cv-hero-cinematic .cv-hero-cta-row .cv-btn-ghost:hover::after { transform: translateX(4px); } /* Hide sidecard + ticker on hero — restraint mode */ .cv-hero-cinematic .cv-hero-sidecard { display: none; } .cv-hero-cinematic .cv-live-ticker { background: transparent; border: 0; opacity: 0.5; } .cv-hero-cinematic .cv-live-ticker::before { background: transparent; color: #D4AF37; box-shadow: none; border-right: 1px solid rgba(212,175,55,0.25); } .cv-hero-cinematic .cv-live-ticker::after { display: none; } /* Scroll-cue at hero bottom */ .cv-hero-cinematic::after { content: ""; position: absolute; left: 50%; bottom: 80px; width: 1px; height: 56px; background: linear-gradient(180deg, transparent 0%, #D4AF37 50%, transparent 100%); transform: translateX(-50%); z-index: 7; animation: cv-scroll-cue 2.4s ease-in-out infinite; pointer-events: none; } @keyframes cv-scroll-cue { 0%, 100% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; transform: translate(-50%, 0); } } /* ---- Apple-style "Big Number" Spec Section ---- */ .cv-spec-stats { padding: clamp(80px, 14vw, 180px) 0; background: #0D162A; position: relative; } .cv-spec-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(40px, 6vw, 96px) clamp(20px, 3vw, 48px); max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 900px) { .cv-spec-stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cv-spec-stats__grid { grid-template-columns: 1fr; } } .cv-spec-stat { text-align: left; position: relative; } .cv-spec-stat__num { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-size: clamp(3.6rem, 7vw, 6rem); font-weight: 300; line-height: 0.92; letter-spacing: -0.04em; background: linear-gradient(180deg, #F5F0E8 0%, #D4AF37 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; margin-bottom: 18px; display: block; } .cv-spec-stat__num.cv-counter-active { filter: drop-shadow(0 0 24px rgba(212,175,55,0.35)); } .cv-spec-stat__label { font-family: 'Inter', system-ui, sans-serif; font-size: 1.02rem; line-height: 1.4; color: #F5F0E8; font-weight: 500; margin-bottom: 6px; } .cv-spec-stat__sub { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,232,0.42); } /* Apple-style section eyebrow */ .cv-section-eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: #D4AF37; margin: 0 auto 24px; text-align: center; } .cv-section-headline { font-family: var(--font-editorial, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; text-align: center; color: #F5F0E8; max-width: 18ch; margin: 0 auto clamp(60px, 8vw, 120px); } .cv-section-headline em { font-style: italic; color: #D4AF37; font-weight: 500; } /* Reduce noise — kill grain inside hero on Apple-style */ .cv-hero-cinematic .cv-grain { opacity: 0.03; } /* Spec-stat unit — small caps mono baseline-aligned to big number */ .cv-spec-stat__unit { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.32em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.85em; margin-left: 0.18em; -webkit-text-fill-color: rgba(245,240,232,0.6); color: rgba(245,240,232,0.6); background: none; -webkit-background-clip: initial; background-clip: initial; } .tier-card--featured { padding-top: 44px; } .tier-card--featured[data-badge]::before { top: 12px; font-size: 0.62rem; padding: 4px 12px; } .tier-card__name { word-wrap: break-word; hyphens: auto; line-height: 1.15; } @media (max-width: 1279px) and (min-width: 600px) { .tier-grid-5 { scroll-padding: 24px; } .tier-grid-5 .tier-card { scroll-snap-align: start; } }