/* ============================================================ BEAT SP500 SLIDE 01 — DESIGN V2 Gridbox + vlastní BEAT design ============================================================ */ /* ============================================================ 01 / BARVY A ZÁKLAD ============================================================ */ :root { --beat-bg: #f7f7f5; --beat-ink: #202021; --beat-blue: #3033ff; --beat-muted: rgba(32, 32, 33, .52); --beat-side: clamp(42px, 6.2vw, 120px); --beat-intro-gap: clamp(28px, 3.1vw, 60px); } /* Celá první obrazovka */ .beat-slide-01 { position: relative !important; width: 100% !important; height: 100vh !important; min-height: 100svh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--beat-bg) !important; color: var(--beat-ink) !important; font-family: "Inter", Arial, sans-serif !important; box-sizing: border-box !important; } /* ============================================================ 02 / RESET GRIDBOXU PRO NAŠE PRVKY ============================================================ */ .beat-slide-01 .beat-cesta, .beat-slide-01 .beat-intro-1, .beat-slide-01 .beat-intro-2, .beat-slide-01 .beat-intro-3, .beat-slide-01 .beat-intro-4, .beat-slide-01 .beat-title-1, .beat-slide-01 .beat-title-2, .beat-slide-01 .beat-subtitle-1, .beat-slide-01 .beat-subtitle-2, .beat-slide-01 .beat-cta, .beat-slide-01 .beat-delivery, .beat-slide-01 .beat-free, .beat-slide-01 .beat-note { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; font-family: "Inter", Arial, sans-serif !important; } /* Vnitřní H1/H2/P vytvořené Gridboxem */ .beat-slide-01 .beat-cesta *, .beat-slide-01 .beat-intro-1 *, .beat-slide-01 .beat-intro-2 *, .beat-slide-01 .beat-intro-3 *, .beat-slide-01 .beat-intro-4 *, .beat-slide-01 .beat-title-1 *, .beat-slide-01 .beat-title-2 *, .beat-slide-01 .beat-subtitle-1 *, .beat-slide-01 .beat-subtitle-2 *, .beat-slide-01 .beat-delivery *, .beat-slide-01 .beat-free *, .beat-slide-01 .beat-note * { margin: 0 !important; padding: 0 !important; font-family: "Inter", Arial, sans-serif !important; } /* ============================================================ 03 / DESKTOP ============================================================ */ @media (min-width: 901px) { /* -------------------------------------------------------- 01 → NAŠE CESTA -------------------------------------------------------- */ .beat-slide-01 .beat-cesta { position: absolute !important; top: 11.5vh !important; left: var(--beat-side) !important; width: auto !important; text-align: left !important; } .beat-slide-01 .beat-cesta * { font-size: clamp(13px, .88vw, 17px) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .025em !important; color: var(--beat-ink) !important; } /* ======================================================== INTRO ŘÁDEK ======================================================== */ .beat-slide-01 .beat-intro-1, .beat-slide-01 .beat-intro-2, .beat-slide-01 .beat-intro-3, .beat-slide-01 .beat-intro-4 { position: absolute !important; top: 21.5vh !important; width: max-content !important; text-align: left !important; white-space: nowrap !important; } /* Všechny mezery jsou počítané od jednoho základu */ .beat-slide-01 .beat-intro-1 { left: var(--beat-side) !important; } .beat-slide-01 .beat-intro-2 { left: calc(var(--beat-side) + 195px + var(--beat-intro-gap)) !important; } .beat-slide-01 .beat-intro-3 { left: calc(var(--beat-side) + 195px + 235px + (var(--beat-intro-gap) * 2)) !important; } .beat-slide-01 .beat-intro-4 { left: calc(var(--beat-side) + 195px + 235px + 175px + (var(--beat-intro-gap) * 3)) !important; } .beat-slide-01 .beat-intro-1 *, .beat-slide-01 .beat-intro-2 *, .beat-slide-01 .beat-intro-3 *, .beat-slide-01 .beat-intro-4 * { font-size: clamp(17px, 1.15vw, 22px) !important; font-weight: 450 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; color: var(--beat-ink) !important; } /* ======================================================== HLAVNÍ HERO ======================================================== */ .beat-slide-01 .beat-title-1, .beat-slide-01 .beat-title-2 { position: absolute !important; left: var(--beat-side) !important; width: max-content !important; text-align: left !important; } /* Porazit S&P 500. */ .beat-slide-01 .beat-title-1 { top: 31.5vh !important; } /* Dlouhodobě. */ .beat-slide-01 .beat-title-2 { top: 42.5vh !important; } .beat-slide-01 .beat-title-1 *, .beat-slide-01 .beat-title-2 * { font-size: clamp(60px, 5.25vw, 101px) !important; font-weight: 760 !important; line-height: .91 !important; letter-spacing: -.067em !important; color: var(--beat-ink) !important; } /* ↗ U S&P 500 */ .beat-slide-01 .beat-title-1::after { content: "↗"; position: absolute !important; right: -40px !important; top: 0 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--beat-ink) !important; cursor: pointer; } /* ======================================================== ODDĚLOVACÍ LINKA ======================================================== */ .beat-slide-01::after { content: ""; position: absolute; left: var(--beat-side); right: var(--beat-side); top: 57.5vh; height: 1px; background: rgba(32, 32, 33, .18); } /* ======================================================== SPODNÍ CLAIM ======================================================== */ .beat-slide-01 .beat-subtitle-1, .beat-slide-01 .beat-subtitle-2 { position: absolute !important; left: var(--beat-side) !important; width: auto !important; text-align: left !important; } .beat-slide-01 .beat-subtitle-1 { top: 62.5vh !important; } .beat-slide-01 .beat-subtitle-2 { top: 66.5vh !important; } .beat-slide-01 .beat-subtitle-1 *, .beat-slide-01 .beat-subtitle-2 * { font-size: clamp(16px, 1.12vw, 21px) !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; color: var(--beat-ink) !important; } /* ======================================================== CTA ======================================================== */ .beat-slide-01 .beat-cta { position: absolute !important; left: var(--beat-side) !important; top: 74vh !important; width: auto !important; } .beat-slide-01 .beat-cta a, .beat-slide-01 .beat-cta button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 0 26px !important; border: 0 !important; border-radius: 100px !important; background: var(--beat-ink) !important; color: #fff !important; font-family: "Inter", Arial, sans-serif !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1 !important; letter-spacing: -.01em !important; text-decoration: none !important; transition: background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1) !important; } .beat-slide-01 .beat-cta a:hover, .beat-slide-01 .beat-cta button:hover { background: var(--beat-blue) !important; transform: translateY(-2px) !important; } /* ======================================================== INFO VPRAVO OD CTA ======================================================== */ .beat-slide-01 .beat-delivery, .beat-slide-01 .beat-free, .beat-slide-01 .beat-note { position: absolute !important; left: clamp(390px, 32vw, 615px) !important; width: auto !important; text-align: left !important; } .beat-slide-01 .beat-delivery { top: 73.8vh !important; } .beat-slide-01 .beat-free { top: 77.4vh !important; } .beat-slide-01 .beat-note { top: 81vh !important; } .beat-slide-01 .beat-delivery * { font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--beat-ink) !important; } .beat-slide-01 .beat-free * { font-size: 12px !important; font-weight: 650 !important; line-height: 1.25 !important; color: var(--beat-blue) !important; } .beat-slide-01 .beat-note * { font-size: 11px !important; font-weight: 450 !important; line-height: 1.25 !important; color: var(--beat-muted) !important; } } /* ============================================================ 04 / MOBIL ============================================================ */ @media (max-width: 900px) { :root { --beat-mobile-side: 24px; } .beat-slide-01 { height: 100svh !important; min-height: 100svh !important; padding: 0 !important; overflow: hidden !important; } /* -------------------------------------------------------- 01 → NAŠE CESTA -------------------------------------------------------- */ .beat-slide-01 .beat-cesta { position: absolute !important; left: var(--beat-mobile-side) !important; top: 11.5vh !important; width: auto !important; text-align: left !important; } .beat-slide-01 .beat-cesta * { font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .035em !important; color: var(--beat-ink) !important; } /* ======================================================== INTRO ======================================================== */ .beat-slide-01 .beat-intro-1, .beat-slide-01 .beat-intro-2, .beat-slide-01 .beat-intro-3, .beat-slide-01 .beat-intro-4 { position: absolute !important; left: var(--beat-mobile-side) !important; width: calc(100% - 48px) !important; text-align: left !important; } .beat-slide-01 .beat-intro-1 { top: 18vh !important; } .beat-slide-01 .beat-intro-2 { top: 20.7vh !important; } .beat-slide-01 .beat-intro-3 { top: 23.4vh !important; } .beat-slide-01 .beat-intro-4 { top: 26.1vh !important; } .beat-slide-01 .beat-intro-1 *, .beat-slide-01 .beat-intro-2 *, .beat-slide-01 .beat-intro-3 *, .beat-slide-01 .beat-intro-4 * { font-size: clamp(13px, 3.8vw, 16px) !important; font-weight: 450 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--beat-ink) !important; } /* ======================================================== HERO ======================================================== */ .beat-slide-01 .beat-title-1, .beat-slide-01 .beat-title-2 { position: absolute !important; left: var(--beat-mobile-side) !important; width: calc(100% - 48px) !important; text-align: left !important; } .beat-slide-01 .beat-title-1 { top: 33vh !important; } .beat-slide-01 .beat-title-2 { top: 39.2vh !important; } .beat-slide-01 .beat-title-1 *, .beat-slide-01 .beat-title-2 * { font-size: clamp(35px, 10.3vw, 49px) !important; font-weight: 760 !important; line-height: .92 !important; letter-spacing: -.06em !important; color: var(--beat-ink) !important; } /* ↗ */ .beat-slide-01 .beat-title-1::after { content: "↗"; position: absolute; right: 0; top: -1px; font-size: 16px; font-weight: 500; line-height: 1; color: var(--beat-ink); } /* ======================================================== LINKA ======================================================== */ .beat-slide-01::after { content: ""; position: absolute; left: var(--beat-mobile-side); right: var(--beat-mobile-side); top: 49.5vh; height: 1px; background: rgba(32, 32, 33, .17); } /* ======================================================== CLAIM ======================================================== */ .beat-slide-01 .beat-subtitle-1, .beat-slide-01 .beat-subtitle-2 { position: absolute !important; left: var(--beat-mobile-side) !important; width: calc(100% - 48px) !important; text-align: left !important; } .beat-slide-01 .beat-subtitle-1 { top: 53.5vh !important; } .beat-slide-01 .beat-subtitle-2 { top: 56.5vh !important; } .beat-slide-01 .beat-subtitle-1 *, .beat-slide-01 .beat-subtitle-2 * { font-size: 13px !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; color: var(--beat-ink) !important; } /* ======================================================== CTA ======================================================== */ .beat-slide-01 .beat-cta { position: absolute !important; left: var(--beat-mobile-side) !important; top: 63vh !important; width: auto !important; } .beat-slide-01 .beat-cta a, .beat-slide-01 .beat-cta button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 0 20px !important; border: 0 !important; border-radius: 100px !important; background: var(--beat-ink) !important; color: #fff !important; font-family: "Inter", Arial, sans-serif !important; font-size: 12px !important; font-weight: 650 !important; text-decoration: none !important; } /* ======================================================== INFO POD CTA ======================================================== */ .beat-slide-01 .beat-delivery, .beat-slide-01 .beat-free, .beat-slide-01 .beat-note { position: absolute !important; left: var(--beat-mobile-side) !important; width: calc(100% - 48px) !important; text-align: left !important; } .beat-slide-01 .beat-delivery { top: 71vh !important; } .beat-slide-01 .beat-free { top: 75vh !important; } .beat-slide-01 .beat-note { top: 79vh !important; } .beat-slide-01 .beat-delivery * { font-size: 11px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--beat-ink) !important; } .beat-slide-01 .beat-free * { font-size: 11px !important; font-weight: 650 !important; line-height: 1.25 !important; color: var(--beat-blue) !important; } .beat-slide-01 .beat-note * { font-size: 9.5px !important; font-weight: 450 !important; line-height: 1.3 !important; color: var(--beat-muted) !important; } } /* ============================================================ 05 / MALÉ MOBILY ============================================================ */ @media (max-width: 390px) { :root { --beat-mobile-side: 20px; } .beat-slide-01 .beat-title-1 *, .beat-slide-01 .beat-title-2 * { font-size: clamp(32px, 10vw, 42px) !important; } .beat-slide-01 .beat-title-1 { top: 32.5vh !important; } .beat-slide-01 .beat-title-2 { top: 38.3vh !important; } .beat-slide-01::after { top: 48.5vh; } .beat-slide-01 .beat-subtitle-1 { top: 52.5vh !important; } .beat-slide-01 .beat-subtitle-2 { top: 55.5vh !important; } .beat-slide-01 .beat-cta { top: 62vh !important; } } /* ========================================= BEAT — POSUN CELÉHO OBSAHU NAHORU ========================================= */ @media (min-width: 901px) { .beat-slide-01 .beat-cesta { top: 5vh !important; } .beat-slide-01 .beat-intro-1, .beat-slide-01 .beat-intro-2, .beat-slide-01 .beat-intro-3, .beat-slide-01 .beat-intro-4 { top: 13vh !important; } .beat-slide-01 .beat-title-1 { top: 22vh !important; } .beat-slide-01 .beat-title-2 { top: 33vh !important; } .beat-slide-01::after { top: 47vh !important; } .beat-slide-01 .beat-subtitle-1 { top: 52vh !important; } .beat-slide-01 .beat-subtitle-2 { top: 56vh !important; } .beat-slide-01 .beat-cta { top: 65vh !important; } .beat-slide-01 .beat-delivery { top: 65vh !important; } .beat-slide-01 .beat-free { top: 69vh !important; } .beat-slide-01 .beat-note { top: 73vh !important; } } /* ========================================================= BEAT — SPODNÍ ČÁST DESKTOP ========================================================= */ @media (min-width: 901px) { /* dočasně dovolíme Gridboxu vše zobrazit */ .beat-slide-01 { overflow: visible !important; } /* jemná linka pod hlavním claimem */ .beat-slide-01::after { top: 58vh !important; left: var(--beat-side) !important; right: var(--beat-side) !important; } /* Se svými penězi. Veřejně. */ .beat-slide-01 .beat-subtitle-1 { display: block !important; visibility: visible !important; opacity: 1 !important; top: 63vh !important; left: var(--beat-side) !important; z-index: 20 !important; } /* Obchodní den po obchodním dni. */ .beat-slide-01 .beat-subtitle-2 { display: block !important; visibility: visible !important; opacity: 1 !important; top: 67vh !important; left: var(--beat-side) !important; z-index: 20 !important; } /* CTA */ .beat-slide-01 .beat-cta { display: block !important; visibility: visible !important; opacity: 1 !important; top: 75vh !important; left: var(--beat-side) !important; z-index: 20 !important; } /* text napravo od CTA */ .beat-slide-01 .beat-delivery { display: block !important; visibility: visible !important; opacity: 1 !important; top: 74.5vh !important; left: 34vw !important; z-index: 20 !important; } .beat-slide-01 .beat-free { display: block !important; visibility: visible !important; opacity: 1 !important; top: 78vh !important; left: 34vw !important; z-index: 20 !important; } .beat-slide-01 .beat-note { display: block !important; visibility: visible !important; opacity: 1 !important; top: 81.5vh !important; left: 34vw !important; z-index: 20 !important; } } /* ========================================================= BEAT — DESKTOP FINAL VERTICAL RHYTHM ========================================================= */ @media (min-width: 901px) { /* linka */ .beat-slide-01::after { top: 53vh !important; } /* Se svými penězi. Veřejně. */ .beat-slide-01 .beat-subtitle-1 { top: 57vh !important; } /* Obchodní den po obchodním dni. */ .beat-slide-01 .beat-subtitle-2 { top: 61vh !important; } /* tlačítko */ .beat-slide-01 .beat-cta { top: 69vh !important; } /* pravý informační blok */ .beat-slide-01 .beat-delivery { top: 68.5vh !important; } .beat-slide-01 .beat-free { top: 72.5vh !important; } .beat-slide-01 .beat-note { top: 76.5vh !important; } } /* ========================================================= BEAT — DESKTOP COMPOSITION V3 ========================================================= */ @media (min-width: 901px) { /* INTRO trochu kompaktnější */ .beat-slide-01 .beat-intro-1 { left: var(--beat-side) !important; } .beat-slide-01 .beat-intro-2 { left: 18.2vw !important; } .beat-slide-01 .beat-intro-3 { left: 32.5vw !important; } .beat-slide-01 .beat-intro-4 { left: 44.2vw !important; } /* linka těsněji pod headline */ .beat-slide-01::after { top: 51vh !important; opacity: .75; } /* CLAIM VÝŠ */ .beat-slide-01 .beat-subtitle-1 { top: 55vh !important; } .beat-slide-01 .beat-subtitle-2 { top: 59vh !important; } /* CTA VÝŠ */ .beat-slide-01 .beat-cta { top: 67vh !important; } /* INFO VEDLE CTA */ .beat-slide-01 .beat-delivery { top: 66.5vh !important; left: 42vw !important; } .beat-slide-01 .beat-free { top: 70.5vh !important; left: 42vw !important; } .beat-slide-01 .beat-note { top: 74.5vh !important; left: 42vw !important; } }