.tq-media-page { --tq-cyan: #06b4c8; --tq-cyan-dark: #029eb0; --tq-cyan-soft: #dff7f9; --tq-red: #ff3448; --tq-red-dark: #e62b3f; --tq-navy: #20252c; --tq-text: #3f4850; --tq-muted: #727b82; --tq-white: #ffffff; --tq-bg: #f6fbfc; --tq-border: #e2edef; } .tq-media-page .container { max-width: 1320px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 767px) { .tq-media-page .container { padding-left: 16px; padding-right: 16px; } } .tq-media-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 460px; display: flex; align-items: center; padding: 10% 0 82px; background: radial-gradient(circle at 15% 25%, rgba(6, 180, 200, .12), transparent 30%), radial-gradient(circle at 85% 75%, rgba(255, 52, 72, .08), transparent 27%), linear-gradient(135deg, #f8fdfe 0%, #eefafb 53%, #ffffff 100%); } .tq-media-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 100px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--tq-bg)); } .tq-media-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .tq-media-grid-bg { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(6, 180, 200, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 180, 200, .055) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); } .tq-media-orb { position: absolute; border: 1px solid rgba(6, 180, 200, .12); border-radius: 50%; background: rgba(6, 180, 200, .025); } .tq-media-orb--one { width: 230px; height: 230px; top: 55px; left: -110px; } .tq-media-orb--two { width: 285px; height: 285px; right: -135px; bottom: -105px; border-color: rgba(255, 52, 72, .10); background: rgba(255, 52, 72, .018); } .tq-media-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .78fr); align-items: center; gap: 68px; } .tq-media-hero-copy { max-width: 760px; } .tq-media-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(6, 180, 200, .18); border-radius: 999px; background: rgba(255, 255, 255, .78); color: var(--tq-cyan-dark); font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 22px rgba(6, 180, 200, .055); } .tq-media-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tq-red); box-shadow: 0 0 0 5px rgba(255, 52, 72, .08); animation: tqMediaDotPulse 2.1s ease-in-out infinite; } .tq-media-hero-title { margin: 22px 0 18px; color: var(--tq-navy); font-size: clamp(46px, 5.1vw, 76px); line-height: .97; font-weight: 800; letter-spacing: -.06em; } .tq-media-hero-title span { position: relative; display: table; margin-top: 9px; color: var(--tq-red); } .tq-media-hero-title span::after { content: ""; position: absolute; left: 4px; right: 2px; bottom: -9px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--tq-red), rgba(255, 52, 72, .08)); transform: skewX(-18deg); } .tq-media-hero-text { max-width: 655px; margin: 0; color: var(--tq-muted); font-size: 17px; line-height: 1.85; } .tq-media-hero-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .tq-media-hero-pills span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--tq-white), #f7fcfe); color: #3e4b54; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(6, 180, 200, .06); border: 1px solid rgba(6, 180, 200, .06); transition: transform .25s ease, box-shadow .25s ease; } .tq-media-hero-pills span:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 180, 200, .10); } .tq-media-hero-pills i { color: var(--tq-cyan); font-size: 16px; } .tq-media-breadcrumb { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; color: #7b848a; font-size: 12px; font-weight: 700; } .tq-media-breadcrumb a { color: var(--tq-cyan-dark); } .tq-media-breadcrumb a:hover { color: var(--tq-red-dark); } .tq-media-breadcrumb i { color: #a7b2b7; font-size: 9px; } .tq-media-hero-visual { position: relative; width: min(100%, 470px); min-height: 350px; justify-self: end; display: grid; place-items: center; } .tq-media-hero-ring { position: absolute; border-radius: 50%; pointer-events: none; } .tq-media-hero-ring--outer { width: 325px; height: 325px; border: 1px dashed rgba(6, 180, 200, .23); animation: tqMediaRotate 25s linear infinite; } .tq-media-hero-ring--outer::before, .tq-media-hero-ring--outer::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; } .tq-media-hero-ring--outer::before { top: 22px; left: 71px; background: var(--tq-red); box-shadow: 0 0 0 8px rgba(255, 52, 72, .08); } .tq-media-hero-ring--outer::after { right: 27px; bottom: 55px; background: var(--tq-cyan); box-shadow: 0 0 0 8px rgba(6, 180, 200, .08); } .tq-media-hero-ring--inner { width: 245px; height: 245px; border: 1px solid rgba(255, 52, 72, .10); box-shadow: inset 0 0 65px rgba(6, 180, 200, .05); animation: tqMediaRotateReverse 18s linear infinite; } .tq-media-hero-card { position: relative; z-index: 3; width: 260px; min-height: 275px; padding: 31px 29px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px; background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 250, 251, .92)); box-shadow: 0 28px 70px rgba(31, 82, 91, .14), 0 0 0 9px rgba(255, 255, 255, .27); backdrop-filter: blur(13px); transform: rotate(-3deg); transition: transform .45s ease, box-shadow .45s ease; } .tq-media-hero-card:hover { transform: rotate(0deg) translateY(-7px); box-shadow: 0 34px 82px rgba(31, 82, 91, .17), 0 0 0 10px rgba(255, 255, 255, .32); } .tq-media-hero-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 18px; color: var(--tq-white); font-size: 22px; background: linear-gradient(145deg, var(--tq-cyan), var(--tq-cyan-dark)); box-shadow: 0 15px 28px rgba(6, 180, 200, .23); animation: tqMediaIconFloat 3.4s ease-in-out infinite; } .tq-media-hero-card > span { margin-bottom: 7px; color: var(--tq-cyan-dark); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .tq-media-hero-card strong { display: block; max-width: 195px; color: var(--tq-navy); font-size: 25px; line-height: 1.13; letter-spacing: -.04em; } .tq-media-hero-line { width: 77px; height: 4px; margin: 19px 0 18px; border-radius: 99px; background: linear-gradient(90deg, var(--tq-red), rgba(255, 52, 72, .08)); } .tq-media-hero-mini { display: flex; align-items: center; gap: 10px; } .tq-media-hero-mini > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 10px; color: var(--tq-red); background: rgba(255, 52, 72, .08); font-size: 12px; } .tq-media-hero-mini small { display: block; margin-bottom: 2px; color: #929ca1; font-size: 9px; font-weight: 700; } .tq-media-hero-mini b { display: block; color: #536068; font-size: 10px; font-weight: 800; } .tq-media-floating { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 14px; background: rgba(255, 255, 255, .86); color: #4d5860; font-size: 11px; font-weight: 800; box-shadow: 0 14px 36px rgba(29, 70, 78, .11); backdrop-filter: blur(10px); } .tq-media-floating i { color: var(--tq-red); } .tq-media-floating--top { top: 19px; right: -1px; animation: tqMediaFloatTop 4.1s ease-in-out infinite; } .tq-media-floating--bottom { left: -2px; bottom: 18px; animation: tqMediaFloatBottom 4.6s ease-in-out infinite .25s; } .tq-media-section { position: relative; padding: 16px 0 110px; background: radial-gradient(circle at 88% 14%, rgba(6, 180, 200, .055), transparent 23%), linear-gradient(180deg, var(--tq-bg) 0%, #ffffff 44%, #ffffff 100%); } .tq-media-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: end; gap: 70px; margin-bottom: 43px; } .tq-media-section-kicker { display: inline-block; margin-bottom: 10px; color: var(--tq-cyan-dark); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .tq-media-section-title { margin: 0; max-width: 700px; color: var(--tq-navy); font-size: clamp(35px, 4vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.055em; } .tq-media-section-title span { color: var(--tq-red); position: relative; } .tq-media-section-title span::after { content: ""; position: absolute; left: 2px; right: 3px; bottom: -8px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--tq-red), transparent); } .tq-media-section-description p { margin: 0; color: var(--tq-muted); font-size: 15px; line-height: 1.9; } .tq-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .tq-media-item { min-width: 0; overflow: hidden; border: 1px solid var(--tq-border); border-radius: 22px; background: var(--tq-white); box-shadow: 0 14px 36px rgba(22, 73, 81, .052); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease; position: relative; } .tq-media-item:hover { transform: translateY(-10px); border-color: rgba(6, 180, 200, .27); box-shadow: 0 30px 64px rgba(23, 81, 90, .13); } .tq-media-item .media-wrapper { position: relative; display: block; height: 270px; overflow: hidden; background: #eaf5f7; border-radius: 21px 21px 0 0; } .tq-media-item .media-wrapper img, .tq-media-item .media-wrapper video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2, .75, .2, 1), filter .6s ease; } .tq-media-item:hover .media-wrapper img { transform: scale(1.08); filter: saturate(1.05); } .tq-media-item .media-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(18, 31, 36, .15) 20%, rgba(18, 31, 36, .55) 100%); opacity: .7; transition: opacity .4s ease; } .tq-media-item:hover .media-overlay { opacity: .9; } .tq-media-item .play-btn { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tq-red); font-size: 26px; box-shadow: 0 12px 32px rgba(0, 0, 0, .15); transition: transform .35s ease, background .35s ease; } .tq-media-item:hover .play-btn { transform: scale(1.12); background: var(--tq-white); } .tq-media-item .play-btn i { margin-left: 4px; } .tq-media-item .video-play-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0, 0, 0, .15); transition: background .3s ease; } .tq-media-item .video-play-overlay:hover { background: rgba(0, 0, 0, .08); } .tq-media-item .video-play-overlay .play-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--tq-red); font-size: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); transition: transform .3s ease; } .tq-media-item .video-play-overlay:hover .play-icon { transform: scale(1.1); } .tq-media-item .play-icon i { margin-left: 4px; } .tq-media-item .media-footer { padding: 18px 20px 20px; } .tq-media-item .media-footer .media-type { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tq-white); } .tq-media-item .media-footer .media-type--image { background: var(--tq-cyan); } .tq-media-item .media-footer .media-type--video { background: var(--tq-red); } .tq-media-item .media-footer .media-type--youtube { background: #ff0000; } .tq-media-item .media-footer .media-type i { font-size: 10px; } .tq-media-item .media-footer .media-title { margin: 10px 0 0; font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--tq-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tq-media-empty { max-width: 620px; margin: 10px auto 0; padding: 58px 34px; text-align: center; border: 1px solid var(--tq-border); border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 22px 52px rgba(24, 72, 80, .06); } .tq-media-empty-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 21px; color: var(--tq-cyan-dark); background: var(--tq-cyan-soft); font-size: 24px; } .tq-media-empty h3 { margin: 0 0 8px; color: var(--tq-navy); font-size: 25px; font-weight: 800; } .tq-media-empty p { margin: 0; color: var(--tq-muted); font-size: 14px; line-height: 1.8; } @keyframes tqMediaDotPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(255, 52, 72, .08); } 50% { transform: scale(1.13); box-shadow: 0 0 0 9px rgba(255, 52, 72, .035); } } @keyframes tqMediaRotate { to { transform: rotate(360deg); } } @keyframes tqMediaRotateReverse { to { transform: rotate(-360deg); } } @keyframes tqMediaIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(2deg); } } @keyframes tqMediaFloatTop { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-8px) rotate(-1deg); } } @keyframes tqMediaFloatBottom { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(8px) rotate(1deg); } } @media (max-width: 1199px) { .tq-media-hero-inner { gap: 42px; } .tq-media-hero-title { font-size: clamp(43px, 5vw, 64px); } .tq-media-grid { gap: 22px; } .tq-media-item .media-wrapper { height: 245px; } } @media (max-width: 991px) { .tq-media-hero { min-height: auto; padding: 63px 0 76px; } .tq-media-hero-inner { grid-template-columns: 1fr; } .tq-media-hero-copy { max-width: 780px; } .tq-media-hero-visual { justify-self: center; margin-top: 3px; } .tq-media-section-head { grid-template-columns: 1fr; gap: 18px; align-items: start; } .tq-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tq-media-item .media-wrapper { height: 260px; } } @media (max-width: 767px) { .tq-media-hero { padding: 53px 0 62px; } .tq-media-hero-title { font-size: clamp(38px, 10vw, 54px); } .tq-media-hero-text { font-size: 15px; line-height: 1.78; } .tq-media-hero-visual { min-height: 305px; transform: scale(.94); margin: -2px 0 -2px; } .tq-media-section { padding-bottom: 82px; } .tq-media-section-title { font-size: clamp(33px, 8vw, 45px); } .tq-media-grid { grid-template-columns: 1fr; gap: 22px; } .tq-media-item .media-wrapper { height: 275px; } } @media (max-width: 520px) { .tq-media-hero { padding: 45px 0 49px; } .tq-media-eyebrow { font-size: 10px; letter-spacing: .11em; } .tq-media-hero-title { margin-top: 18px; font-size: 39px; } .tq-media-hero-title span::after { height: 5px; bottom: -7px; } .tq-media-hero-pills { gap: 8px; margin-top: 22px; } .tq-media-hero-pills span { padding: 9px 14px; font-size: 12px; } .tq-media-breadcrumb { margin-top: 19px; font-size: 11px; } .tq-media-hero-visual { width: 100%; min-height: 270px; transform: scale(.82); margin: -18px 0 -10px; } .tq-media-hero-ring--outer { width: 290px; height: 290px; } .tq-media-floating { font-size: 10px; padding: 9px 10px; } .tq-media-floating--top { right: 0; } .tq-media-floating--bottom { left: 0; } .tq-media-section-head { margin-bottom: 28px; } .tq-media-item .media-wrapper { height: 245px; } .tq-media-item .play-btn { width: 56px; height: 56px; font-size: 20px; } .tq-media-item .media-footer .media-title { font-size: 15px; } .tq-media-empty { padding: 45px 22px; } } @media (max-width: 380px) { .tq-media-hero-title { font-size: 35px; } .tq-media-hero-visual { transform: scale(.71); margin-top: -28px; margin-bottom: -28px; } .tq-media-item .media-wrapper { height: 220px; } } [dir="rtl"] .tq-media-hero-title span::after, .rtl .tq-media-hero-title span::after { left: 2px; right: 4px; transform: skewX(18deg); } [dir="rtl"] .tq-media-breadcrumb i, .rtl .tq-media-breadcrumb i { transform: scaleX(-1); } [dir="rtl"] .tq-media-floating--top, .rtl .tq-media-floating--top { right: auto; left: -1px; } [dir="rtl"] .tq-media-floating--bottom, .rtl .tq-media-floating--bottom { left: auto; right: -2px; } [dir="rtl"] .tq-media-hero-copy, .rtl .tq-media-hero-copy { text-align: right; } [dir="rtl"] .tq-media-item .play-btn i, .rtl .tq-media-item .play-btn i { margin-left: 0; margin-right: 4px; transform: scaleX(-1); } [dir="rtl"] .tq-media-item .play-icon i, .rtl .tq-media-item .play-icon i { margin-left: 0; margin-right: 4px; transform: scaleX(-1); } @media (prefers-reduced-motion: reduce) { .tq-media-eyebrow-dot, .tq-media-hero-ring--outer, .tq-media-hero-ring--inner, .tq-media-hero-icon, .tq-media-floating--top, .tq-media-floating--bottom, .tq-media-item, .tq-media-item .media-wrapper img { animation: none !important; transition: none !important; } }