/* ========================================================================== Janinpex — sekce "Průmyslový papír" Samostatné, izolované styly (namespace .jp-paper*), aby nekolidovaly s vygenerovaným Tilda CSS. Font Roboto je již načten v . ========================================================================== */ .jp-paper { --jp-ink: #1c211e; --jp-ink-soft: #4a524d; --jp-line: #e3e6e2; --jp-bg: #ffffff; --jp-bg-alt: #f5f6f4; --jp-accent: #2f9e57; --jp-accent-dark: #237a43; font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif; color: var(--jp-ink); background: var(--jp-bg); -webkit-font-smoothing: antialiased; line-height: 1.6; box-sizing: border-box; } .jp-paper *, .jp-paper *::before, .jp-paper *::after { box-sizing: border-box; } .jp-paper__container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Typografie ---------------------------------------------------------------- */ .jp-paper__kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jp-accent); margin: 0 0 16px; } .jp-paper__title { font-size: clamp(30px, 5vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 18px; } .jp-paper__lead { font-size: clamp(16px, 2.2vw, 19px); font-weight: 300; max-width: 620px; margin: 0; } /* Hero banner --------------------------------------------------------------- */ .jp-paper__hero { position: relative; display: flex; align-items: center; min-height: 460px; padding: 80px 0; background-image: linear-gradient( 100deg, rgba(18, 24, 20, 0.86) 0%, rgba(18, 24, 20, 0.62) 48%, rgba(18, 24, 20, 0.25) 100% ), url("../images/paper-rolls.jpg"); background-size: cover; background-position: center; color: #fff; } .jp-paper__hero .jp-paper__kicker { color: #8fe0ab; } .jp-paper__hero .jp-paper__lead { color: rgba(255, 255, 255, 0.92); } .jp-paper__hero-inner { max-width: 640px; } /* Obecná sekce -------------------------------------------------------------- */ .jp-paper__section { padding: 72px 0; } .jp-paper__section--alt { background: var(--jp-bg-alt); border-top: 1px solid var(--jp-line); border-bottom: 1px solid var(--jp-line); } .jp-paper__heading { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; line-height: 1.2; margin: 0 0 16px; } .jp-paper__text { font-size: 17px; font-weight: 300; color: var(--jp-ink-soft); margin: 0 0 16px; } .jp-paper__text:last-child { margin-bottom: 0; } /* Dvousloupcový blok (text + obrázek) -------------------------------------- */ .jp-paper__split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .jp-paper__split--reverse .jp-paper__media { order: -1; } .jp-paper__media { margin: 0; } .jp-paper__media img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 6px; } /* Karty výhod --------------------------------------------------------------- */ .jp-paper__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; } .jp-paper__card { background: #fff; border: 1px solid var(--jp-line); border-radius: 8px; padding: 28px 24px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .jp-paper__card:hover { box-shadow: 0 12px 30px rgba(20, 30, 24, 0.08); transform: translateY(-3px); } .jp-paper__card-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(47, 158, 87, 0.12); color: var(--jp-accent-dark); margin-bottom: 18px; } .jp-paper__card-icon svg { width: 24px; height: 24px; } .jp-paper__card-title { font-size: 18px; font-weight: 500; margin: 0 0 8px; } .jp-paper__card-text { font-size: 15px; font-weight: 300; color: var(--jp-ink-soft); margin: 0; } /* Dekorativní pruh ---------------------------------------------------------- */ .jp-paper__band { position: relative; min-height: 280px; display: flex; align-items: center; padding: 64px 0; background-image: linear-gradient( 90deg, rgba(18, 24, 20, 0.72) 0%, rgba(18, 24, 20, 0.45) 60%, rgba(18, 24, 20, 0.3) 100% ), url("../images/paper-roll-detail.jpg"); background-size: cover; background-position: center 35%; color: #fff; } .jp-paper__band-quote { font-size: clamp(20px, 3vw, 30px); font-weight: 300; line-height: 1.35; max-width: 720px; margin: 0; } .jp-paper__band-quote strong { font-weight: 600; color: #9fe7b6; } /* Tabulka parametrů --------------------------------------------------------- */ .jp-paper__specs { width: 100%; border-collapse: collapse; font-size: 16px; } .jp-paper__specs tr { border-bottom: 1px solid var(--jp-line); } .jp-paper__specs tr:first-child { border-top: 1px solid var(--jp-line); } .jp-paper__specs th { text-align: left; font-weight: 500; color: var(--jp-ink); padding: 14px 16px 14px 0; white-space: nowrap; width: 42%; vertical-align: top; } .jp-paper__specs td { padding: 14px 0; font-weight: 300; color: var(--jp-ink-soft); } .jp-paper__note { font-size: 14px; color: var(--jp-ink-soft); margin: 18px 0 0; font-style: italic; } /* CTA ----------------------------------------------------------------------- */ .jp-paper__cta { background: var(--jp-ink); color: #fff; padding: 64px 0; text-align: center; } .jp-paper__cta-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin: 0 0 14px; } .jp-paper__cta-text { font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto 32px; } .jp-paper__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .jp-paper__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 6px; font-size: 16px; font-weight: 500; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .jp-paper__btn svg { width: 19px; height: 19px; } .jp-paper__btn--primary { background: var(--jp-accent); color: #fff; } .jp-paper__btn--primary:hover { background: var(--jp-accent-dark); transform: translateY(-2px); } .jp-paper__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .jp-paper__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* Responsivita -------------------------------------------------------------- */ @media (max-width: 980px) { .jp-paper__cards { grid-template-columns: repeat(2, 1fr); } .jp-paper__split { grid-template-columns: 1fr; gap: 32px; } .jp-paper__split--reverse .jp-paper__media { order: 0; } .jp-paper__media img { max-height: 360px; } .jp-paper__hero { min-height: 380px; padding: 64px 0; } } @media (max-width: 560px) { .jp-paper__container { padding: 0 18px; } .jp-paper__section { padding: 52px 0; } .jp-paper__cards { grid-template-columns: 1fr; } .jp-paper__specs th { white-space: normal; width: 50%; } .jp-paper__btn { width: 100%; justify-content: center; } }